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

<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
    <div>
      <border-panel
        height="302px"
        style="margin-bottom: 6px; cursor: pointer"
        title="基础信息"
        @click="openBasicModal"
      >
        <BasicInfo :qy="qy" @showTc="showTc" @UnitType="UnitType" />
      </border-panel>
      <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
        <HiddenDangerDetection :qy="qy" />
      </border-panel>
      <border-panel height="296px" header-cursor="pointer" title="自主管理" @click-header="openAutoManageModal">
        <AutonomousManagement @click-item="onClickAutonomousManagementItemHandler" :qy="qy" />
      </border-panel>
    </div>
    <div class="display: flex;">
      <div class="map" style="position: relative">
        <MapChartsCategory
          :mapHeatData="heatMap"
          :formatter="showLabel"
          :qx="qy"
          @selectArea="(area) => (qy = area)"
        />
        <div style="position: absolute; top: 10px; width: 500px">
          <SearchBox :area.sync="qy" />
        </div>
      </div>
      <div>
        <border-panel
          title="警情动态"
          width="938px"
          height="321px"
          :header-type="1"
        >
          <AlarmingSituationDynamics :qx="qy" :PoliceList="PoliceList" />
        </border-panel>
      </div>
    </div>
    <div>
      <border-panel
        height="311px"
        style="margin-bottom: 6px; cursor: pointer"
        header-cursor="pointer"
        title="风险预警"
        @click-header="openBasicModal"
      >
        <RiskWarning :riskList="riskList" @showFxyj="showFxyj" :qy="qy" />
        <template #ext-header>
          <img src="../../assets/images/dd_wh.png" alt="" @click="getShoeInfo('whFxModal')">
        </template>
      </border-panel>
      <border-panel
        height="331px"
        style="margin-bottom: 6px; cursor: pointer"
        title="智慧消防"
      >
        <WisdomFire :frieList="frieList" :iotList="iotList" :qy="qy" />
      </border-panel>
      <border-panel height="298px" title="火灾指标">
        <FireIndex :type="fireIndexType" :qx="qy" />
        <template #ext-header>
          <button-block
            :items="['月', '年']"
            @select-item="selectItemHandler"
          />
        </template>
      </border-panel>
    </div>
    <basic-modal top="120px" ref="basicInfoModal" name="基础信息">
      <BasicInfoModalContent :qy="qy" :default="defaultModel" />
    </basic-modal>
    <basic-modal top="120px" ref="autoManageModal"  name="自主管理">
      <zzglModul ref="zzglModul" 
      :queryParams="queryParams"
      :qy="qy" />
    </basic-modal>
      <!-- 风险问号弹窗 -->
      <basic-modal top="30px" ref="whFxModal" name="安全风险分级规则" width="90%">
      <div style="display: flex; justify-content: center">
        <img src="../../assets/images/dd-exp-fx.png" />
      </div>
    </basic-modal>
  </div>
</template>
<script>
import BasicInfo from "./components/BasicInfo.vue";
import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics/index.vue";
import AutonomousManagement from "./components/AutonomousManagement/index.vue";
import HiddenDangerDetection from "./components/HiddenDangerDetection/index.vue";
import MapChartsCategory from "./components/MapChartsCategory.vue";
import RiskWarning from "./components/RiskWarning.vue";
import WisdomFire from "./components/WisdomFire.vue";
import FireIndex from "./components/FireIndex/index.vue";
import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
import SearchBox from "@/components/SearchBox.vue";
import zzglModul from "./components/zzglModul.vue";
import { totaldata, getJqdt, getZxgjtj, getJrjzsbs, getDtskgzList } from "@/api/index.js";
import { fxfb } from "@/api/risk";
import { formatCityData, createMapChartWindowInfo } from "@/utils";

export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapChartsCategory,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex,
    BasicInfoModalContent,
    SearchBox,
    zzglModul,
  },
  data() {
    return {
      riskList: [],
      // 传参
      qy: "重庆市",
      params: {
        pageSize: 100,
        pageNum: 1,
      },
      PoliceList: [],
      frieList: {},
      iotList: {},
      fireIndexType: 0,
      heatMap: [],
      defaultModel: {},
      mapType: {
        "红色": 90,
        "橙色": 70,
        "黄色": 50,
        "蓝色": 30,
        "绿色": 10
      },
      queryParams: {
        glxs: "", //管理形式
        wbxs: "", //维保形式
        dxjj: "" //大修基金
      }
    }
  },
  watch: {
    qy() {
      this.getList();
      this.getFireList();
      this.getIotList();
    },
  },
  methods: {
    onClickAutonomousManagementItemHandler(data) {
      const temp = {
        glxs: "",
        wbxs: "",
        dxjj: "",
      }
      switch (data.index) {
        case 0:
          temp.glxs = data.value
          break;
        case 1:
          temp.wbxs = data.value
          break;
        case 2:
        temp.dxjj = data.value
          break;
      }
      this.queryParams = temp
      this.showModal("autoManageModal")
    },
    showLabel(params) {
      return createMapChartWindowInfo(
        {
          title: params.name,
        },
        () => {
          const item = params.data.meta
          let res =`
          <table>
            <tr >
              <td style="padding-bottom:8px;">${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名</td>
              <td></td>
            </tr>
            <tr>
              <td>直接财产损失 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元</td>
              <td></td>
            </tr>
            <tr>
              <td>火灾起数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.火灾起数 || 0}</span>起</td>
              <td>亡人数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.亡人数 || 0}</span>人</td>
            </tr>
            <tr>
              <td>重大风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.重大风险 || 0}</span>栋</td>
              <td>较大风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.较大风险 || 0}</span>栋</td>
            </tr>
            <tr>
              <td>一般风险栋数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.一般风险 || 0}</span>栋</td>
              <td>低风险风数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.低风险 || 0}</span>栋</td>
            </tr>
          </table>
          `
          return res;
        }
      );
    },
    showTc(val) {
      if (val) {
        this.defaultModel = {
          qy: this.qy,
          dl: val
        }
        this.showModal("basicInfoModal");
      }
    },
    showFxyj(val){
      this.defaultModel = {
        qy: this.qy,
        fxdjYs: val
      }
      this.showModal("basicInfoModal");
    },
    openBasicModal() {
      this.showModal("basicInfoModal");
    },
    UnitType(name){
      const params={
        qy:this.qy,
      }
        if (name == "超高层建筑总数（栋）") {
        params.gd = "100米以上";
      }
      if (name == "2000年底前老旧住宅建筑总数（栋）") {
        params.jcnd = "2000年前";
        params.dl = "住宅建筑";
      }
      if (name == "2000年底前老旧商业混合体建筑总数（栋）") {
        params.jcnd = "2000年前";
        params.dl = "公共建筑";
      }
      this.defaultModel = params
      this.showModal("basicInfoModal");
    },
    getShoeInfo(name){
      this.showModal(name);
    },
    // 风险预警
    getList(){
      totaldata({...this.params,qy:this.qy==="重庆市"?"":this.qy}).then(res=>{
        if(res.data.code==200){
        this.riskList=res.data.rows
        }
      }).catch(error=>{
        this.$message({
          message: res.data.msg,
          type: "error"
        });
      })
    },
    selectItemHandler(idx) {
      this.fireIndexType = idx;
    },
    getStaic() {
      getJqdt(this.params).then((res) => {
        this.PoliceList = res.data.rows;
      });
    },
    //智慧消防
    getFireList() {
      getZxgjtj({
        ...this.params,
        name: this.qy === "重庆市" ? "" : this.qy,
      }).then((res) => {
        this.frieList = res.data.rows[0];
      });
    },
    // 物联网栋数
    getIotList() {
      getJrjzsbs({
        ...this.params,
        name: this.qy === "重庆市" ? "" : this.qy,
      }).then((res) => {
        this.iotList = res.data.rows[0];
      });
    },

    openAutoManageModal() {
      this.showModal("autoManageModal");
    },
    loadMapData() {
      getDtskgzList({
        pageNum: 1,
        pageSize: 42,
      }).then((res) => {
        let tempData = res.data.rows;
        this.heatMap = formatCityData(
          tempData.map((item) => ({
            name: item.qx,
            value: this.mapType[item.分区颜色],
            meta: item
          }))
        );
      });
    },
  },
  created() {
    this.getList();
    this.getStaic();
    this.getFireList();
    this.getIotList();
    this.loadMapData();
  },
};
</script>
<style scoped>
.map {
  flex: 1;
}
</style>