zhgkpt-datav/app/src/views/Home/components/AlarmingSituationDynamics/ModalContent.vue

<template>
  <div style="padding: 0px; display: flex; justify-content: space-between">
    <div>
      <border-panel
        height="350px"
        width="540px"
        style="margin-bottom: 6px"
        :headerType="3"
        title="警情列表"
      >
        <AlaemList
          :flag="type"
          :selectTimes="selectTimes"
          :list="bjxxList"
          v-if="bjxxList && bjxxList.length > 0"
          @callback="callback"
          :pId="pId"
        />
      </border-panel>
      <border-panel
        height="593px"
        width="540px"
        style="margin-bottom: 6px"
        :headerType="3"
        title="出动力量"
      >
        <MobilizeStrength
          style="width: 518px"
          :list="cdxxList"
          :hcws1="hcws1"
          :zlxx="zlxx"
          :hcws="hcws"
        />
      </border-panel>
    </div>
    <div style="width: 1000px">
      <Map :data="mapData" v-if="mapData" />
    </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 "@/views/PoliceSituation/components/MobilizeStrength.vue";
import AlaemList from "./AlaemList.vue";
import UnitInformation from "@/views/PoliceSituation/components/UnitInformation.vue";
import UnitInfo from "@/views/PoliceSituation/components/UnitInfo.vue";
import Map from "@/components/Map.vue";
import moment from "moment";
import {
  geTzl,
  getCdllxx,
  getHcws,
  getAjxx,
  getJzxx,
  getWlwsb,
  getFxyhxx,
  getZhd,
} from "@/api/jqdt.js";
import { getJumpList } from "@/api/index.js";
export default {
  name: "ModalContent",
  props: {
    selectTimes: {
      type: Array,
      default: () => [],
    },
    type: String,
  },
  watch: {
    type: {
      handler(val) {
        this.flag = val;
        this.getList();
      },
      immediate: true,
      deep: true,
    },
  },
  components: {
    Map,
    AlaemList,
    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: "",
    };
  },
  methods: {
    changeMiddleType() {
      if (this.middleType === "720") {
        this.getMapData();
        this.middleType = "map";
      } else {
        this.middleType = "720";
      }
    },
    getMapData() {
      // console.log(this.params.id);
      this.mapData = null;
      getZhd({
        id: this.params.id,
      }).then((res) => {
        console.log(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,
          };
        }
      });
    },
    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) {
      if (id) {
        this.params.id = id;
        this.getMapData();
        this.getOtherData();
      } else {
        this.ajid = "";
        this.cdxxList = []; //出动信息列表
        this.zlxx = ""; //出动信息总览
        this.hcws = []; //火场文书
        this.hcws1 = [];
        this.ajxxList = [];
        this.jzxxList = {};
        this.fxxxList = {};
        this.lshzList = [];
        this.wlwsb = [];
        this.mapData = null;
      }
    },
    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) => {
        this.jzxxList = res.data.rows[0];
        this.jzImg = 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,
        type: this.flag,
      };
      getJumpList(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;
}
</style>