zhgkpt-datav/app/src/views/PoliceSituation/index.vue

<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
    <div>
      <border-panel
        height="350px"
        width="540px"
        style="margin-bottom: 6px"
        :headerType="3"
        title="报警信息"
      >
        <Alaem
          :list="bjxxList"
          v-if="bjxxList && bjxxList.length > 0"
          @callback="callback"
          :pId="pId"
        />
      </border-panel>
      <border-panel
        height="600px"
        width="540px"
        style="margin-bottom: 6px"
        :headerType="3"
        title="出动力量"
      >
        <MobilizeStrength
          :list="cdxxList"
          :zlxx="zlxx"
          :hcws="hcws"
          :hcws1="hcws1"
        />
      </border-panel>
    </div>
    <div style="width: 1000px; padding-bottom: 6px; position: relative">
      <!-- <Map :data="mapData" v-if="mapData" /> -->
      <iframe
        ref="box"
        src="https://www.720yun.com/t/65aknlde0pm?scene_id=110320524"
        style="height: 100%; width: 100%"
        v-if="middleType === '720'"
      ></iframe>
      <div style="height: 100%; width: 100%; position: relative" v-else>
        <Map :data="mapData" v-if="mapData && Mapflag == false" />
        <img
          v-if="Mapflag == true"
          class="map-null"
          src="../../assets/images/map-null1.png"
          alt=""
        />
      </div>
      <!-- <div
        class="m-btn d"
        :class="middleType === '720' ? 'map' : 'd'"
        @click="changeMiddleType"
      ></div> -->
    </div>
    <div>
      <border-panel
        height="469px"
        width="540px"
        style="margin-bottom: 6px"
        :headerType="3"
        title="事故单位信息"
      >
        <UnitInformation
          :ajxxList="ajxxList"
          :jzxxList="jzxxList"
          :wlwsb="wlwsb"
          :jzImg="jzImg"
        />
      </border-panel>
      <border-panel
        height="480px"
        width="540px"
        style="margin-bottom: 6px"
        :headerType="3"
        title="风险隐患信息"
      >
        <UnitInfo :fxxxList="fxxxList" :lshzList="lshzList" />
      </border-panel>
    </div>
  </div>
</template>
<script>
import MobilizeStrength from "./components/MobilizeStrength.vue";
import Alaem from "./components/Alarm.vue";
import UnitInformation from "./components/UnitInformation.vue";
import UnitInfo from "./components/UnitInfo.vue";
import Map from "@/components/Map.vue";
import moment from "moment";
import {
  getBjxx,
  geTzl,
  getCdllxx,
  getHcws,
  getAjxx,
  getJzxx,
  getWlwsb,
  getFxyhxx,
  getZhd,
} from "@/api/jqdt.js";
export default {
  name: "Fire",
  components: {
    Map,
    Alaem,
    MobilizeStrength,
    UnitInformation,
    UnitInfo,
  },
  data() {
    return {
      jzImg: "",
      gxsj1: null,
      pId: null,
      params: {
        pageSize: 100,
        pageNum: 1,
        qy: null,
        id: null,
      },
      ajid: "",
      bjxxList: [], //报警信息
      cdxxList: [], //出动信息列表
      zlxx: [], //出动信息总览
      hcws: [], //火场文书
      hcws1: [],
      ajxxList: [],
      jzxxList: {},
      fxxxList: {},
      lshzList: [],
      wlwsb: [],
      mapData: null,
      middleType: "map",
      flag: "",
      Mapflag: false,
    };
  },
  methods: {
    changeMiddleType() {
      if (this.middleType === "720") {
        this.getMapData();
        this.middleType = "map";
      } else {
        this.middleType = "720";
      }
    },
    getMapData() {
      // console.log(this.params.id);
      var latreg =
        /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,15}|180)$/;
      var longrg =
        /^(\-|\+)?([0-8]?\d{1}\.\d{0,15}|90\.0{0,15}|[0-8]?\d{1}|90)$/;

      this.mapData = null;
      getZhd({
        id: this.params.id,
      }).then((res) => {
        if (res.data && res.data.data) {
          this.mapData = {
            jd: res.data.data.dqjd1,
            wd: res.data.data.dqwd1,
            zl: res.data.data.总览信息1,
            jzmc: res.data.data.ddmc,
            showzhd: true,
          };
        }
        if (
          !longrg.test(Number(res.data.data.dqwd1)) &&
          !latreg.test(Number(res.data.data.dqjd1))
        ) {
          this.Mapflag = true;
        } else {
          this.Mapflag = false;
        }
      });
    },
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },
    callback(id) {
      this.params.id = id;
      this.getMapData();
      this.getOtherData();
    },
    openBasicModal() {
      this.showModal("basicInfoModal");
    },
    getOtherData() {
      // 出警力量
      const cdxxId = {
        ajid: this.params.id,
      };
      getCdllxx(cdxxId).then((res) => {
        this.cdxxList = res.data.rows;
      });
      // 出动力量-总览
      geTzl(this.params).then((res) => {
        this.zlxx = res.data.rows ? res.data.rows[0].zl : "";
      });
      // 火场文书
      const hcwsId = {
        jqTywysbm: this.params.id,
      };
      getHcws(hcwsId).then((res) => {
        this.hcws1 = res.data.rows[0];
        let i = res.data.rows;
        let i2 = i.filter((item, index) => {
          return index;
        });
        this.hcws = i2.map((i) => {
          return {
            ...i,
            gxsj: moment(i.gxsj).format("yyyy-MM-DD"),
          };
        });
        this.hcws1.gxsj = moment(this.hcws1.gxsj).format("yyyy-MM-DD");
      });
      // 事故单位信息-案件信息列表
      getAjxx(this.params).then((res) => {
        this.ajxxList = res.data.rows[0];
      });
      // 事故单位建筑信息
      const jzxxid = {
        ajid: this.params.id,
      };
      getJzxx(jzxxid).then((res) => {
        console.log(res);
        this.jzxxList = res.data.rows[0];
        this.jzImg = this.jzxxList.jzzp1;
        console.log(this.jzxxList.jzzp1, "建筑信息");
      });
      // 风险隐患信息
      const fxyhId = {
        ajid: this.params.id,
      };
      getFxyhxx(fxyhId).then((res) => {
        this.fxxxList =
          res.data.rows && res.data.rows.length > 0 ? res.data.rows[0] : null;
        this.lshzList = res.data.rows;
      });
      // 物联网设备信息
      const wlwId = {
        ajid: this.params.id,
      };
      getWlwsb(wlwId).then((res) => {
        this.wlwsb = res.data.rows;
      });
    },
    getList() {
      const params1 = {
        pageSize: 10000,
        pageNum: 1,
      };
      getBjxx(params1).then((res) => {
        let list = res.data.rows;
        if (this.pId) {
          list = list.filter((p) => p.id !== this.pId);
          list.unshift(res.data.rows.find((p) => p.id === this.pId));
        }
        this.bjxxList = list;
      });
    },
  },
  created() {
    const id = this.getQueryString("id");
    this.pId = id;
    this.getList();
  },
};
</script>

<style scoped lang="less">
.m-btn {
  width: 78px;
  height: 72px;
  position: absolute;
  right: 20px;
  top: 30px;
  z-index: 99;
  cursor: pointer;
}

.m-btn.d {
  background: url("../../assets/images/dd-change-720.png") center center
    no-repeat;
  background-size: 78px 72px;
}

.m-btn.map {
  background: url("../../assets/images/dd-change-map.png") center center
    no-repeat;
  background-size: 78px 72px;
}
.map-null {
  display: inline-block;
  margin-top: 380px;
  margin-left: 280px;
}
</style>