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="基础信息"
      >
        <BasicInfo :qy="qy" @click-label="reloadMap"  @showTc="showTc" @UnitType="UnitType" />
      </border-panel>
      <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
        <HiddenDangerDetection @click-label="reloadMap" :qy="qy" />
      </border-panel>
      <border-panel
        height="293px"
        header-cursor="pointer"
        title="自主管理"
        @click-header="openAutoManageModal"
      >
        <AutonomousManagement
          @click-label="reloadMap"
          @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"
          :legend="legendData"
          @selectArea="(area) => (qy = area)"
          :right="20"
          showTip
        />
        <!-- <div style="position: relative; width: 100%; height: 632px;">
          <MapChart3D
            :mapHeatData="heatMap"
            :formatter="showLabel"
            :qx="qy"
            @selectArea="(area) => (qy = area)"
          />
        </div> -->
        <div style="position: absolute; top: 10px; width: 500px">
          <SearchBox :area="qy"  @update:area="e => qy = e" />
        </div>
        <div class="tips" @click="getShoeInfo('smsMsgModal')">提示</div>
        <div class="title" v-if="selectMapType !== 'DEFAULT'">
          <div class="back-btn" @click="reloadMap('DEFAULT')">{{ '<' }}</div>
          <div class="select-title">{{selectMapTitle}}</div>
        </div>
      </div>
      <div>
        <border-panel
          height="321px"
          width="938px"
          title="火灾指数"
          :header-type="1"
        >
          <FireIndex @click-label="onClockFireIndex" :type="fireIndexType" :qx="qy" />
          <template #ext-header>
            <button-block
              :items="['月', '年']"
              @select-item="selectItemHandler"
            />
          </template>
        </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"
          :monthData="monthData"
          :typeList="typeList"
          @click-label="reloadMap"
        />
        <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 @click-label="reloadMap" :frieList="frieList" :iotList="iotList" :qy="qy" />
        <ZhxfModalHeader slot="title" />
      </border-panel>
      <border-panel title="警情动态" height="298px" :header-type="1">
        <AlarmingSituationDynamics :qx="qy" :PoliceList="PoliceList" />
      </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; flex-direction: column; justify-content: center"
      >
        <img class="imgs" src="../../assets/images/zl-fxyj.png" />
      </div>
    </basic-modal>
    <!-- 短信提示弹窗 -->
    <basic-modal top="120px" ref="smsMsgModal" name="信息提示" width="800px">
      <MessageTipModalContent :qy="qy" @close="onCloseModal" />
    </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/NewMapChartsCategory.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 { getSxzbListToatl,getFhzdType } from "@/api/index.js";
import { getSxzbListToatl } from "@/api/index.js";

import {
  totaldata,
  getJqdt,
  getZxgjtj,
  getJrjzsbs
} from "@/api/index.js";
import MessageTipModalContent from "@/components/MessageTipModalContent.vue";
import MapChart3D from '@/components/MapChart3D/index.vue'
import { createInfoWindow, TEMPLATE_TYPE, loadMapData, TITLE_MAP } from '@/shared'

export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapChartsCategory,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex,
    BasicInfoModalContent,
    SearchBox,
    zzglModul,
    MessageTipModalContent,
    MapChart3D
  },
  data() {
    return {
      // 定时器
      timer: null,
      riskList: [],
      // 传参
      qy: "重庆市",
      params: {
        pageSize: 100,
        pageNum: 1,
      },
      PoliceList: [],
      frieList: {},
      iotList: {},
      fireIndexType: 0,
      heatMap: [],
      defaultModel: {},
      monthData: [],
      queryParams: {
        glxs: "", //管理形式
        wbxs: "", //维保形式
        dxjj: "", //大修基金
      },
      selectMapType: TEMPLATE_TYPE.DEFAULT,
      legendData: [],
      TEMPLATE_TYPE,
      typeList:[]
    };
  },
  computed: {
    selectMapTitle() {
      return TITLE_MAP[this.selectMapType]
    }
  },
  watch: {
    qy() {
      this.getList();
      this.getFireList();
      this.getIotList();
      this.zdType()
    },
  },
  methods: {
    onClockFireIndex() {
      this.reloadMap(["HZQSY", "HZQSN"][this.fireIndexType])
    },
    reloadMap(type) {
      if (this.selectMapType === type) return;
      this.selectMapType = type;
      this.loadData()
    },
    onCloseModal() {
      this.closeModal("smsMsgModal");
    },
    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 createInfoWindow(this.selectMapType, params);
    },
    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];
      });
    },
    //重点类型
    zdType(){
      getFhzdType( { ...this.params, qx: this.qy === "重庆市" ? "" : this.qy }).then(res=>{
       this.typeList=res.data
      })
    },
      openAutoManageModal() {
      this.showModal("autoManageModal");
    },
    loadData() {
      loadMapData(this.selectMapType).then(res => {
        this.legendData = res.legendData
        this.heatMap = res.heatMap
      })
    },
    // 火灾预测
    loadHzzbSxzbYoy() {
      getSxzbListToatl({
        qy: this.qy === "重庆市" ? "" : this.qy,
      }).then((res) => {
        this.monthData = res.data.data.sxzbMonth;
        // let temp = res.data.data;
        // console.log("009999", temp);
        // const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12);
        // (this.monthData = month.map((item, index) =>
        //   month.length - 1 === index || month.length - 2 === index
        //     ? {
        //         name: item.y,
        //         value: item.hzqs,
        //         itemStyle: {
        //           normal: {
                   
        //               type: "dotted",
        //               width: 2,
        //               color: "#fd87ab",
        //           },
        //         },
        //       }
        //     : { name: item.y, value: item.hzqs }
        // )),
          // console.log("--------zhiss", this.monthData);
        // let temp=res.data.data
        // console.log('-------ssssssss',temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12));
        // const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12);
        // this.monthLabel = month.map((item) => item.y);
        // this.monthData = [
        //   month.map((item, index) =>
        //     month.length - 1 === index
        //       ? {
        //           name: item.qhyy,
        //           value: item.hzqs,
        //           itemStyle: {
        //             color: "#cccccc89",
        //           },
        //         }
        //       : { name: item.y, value: item.hzqs }
        //   ),
        //   month.map((item) => ({ name: item.y, value: item.wrs })),
        //   month.map((item) => ({ name: item.y, value: item.srs })),
        //   month.map((item) => ({
        //     name: item.y,
        //     value: parseInt(item.zzjjss / 10000),
        //   })),

        // ];
      });
    },
  },
  created() {
    this.getList();
    this.getStaic();
    this.getFireList();
    this.getIotList();
    this.loadData();
    this.loadHzzbSxzbYoy();
    this.zdType()
  },
  mounted() {
    this.timer = setInterval(() => {
      // 获取通知
      getJqdt(this.params).then((res) => {
        // console.log("通知", res);
        this.PoliceList = res.data.rows;
      });
    }, 6000);
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style scoped>
.map {
  flex: 1;
}
.imgs {
  display: inline-block;
  /* width: 100%;
  height: 700px; */
}

.tips {
  color: #9bc3ff;
  background: url("../../assets/images/border.png") no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  position: absolute;
  bottom: 20px;
  left: 5px;
  box-sizing: border-box;
  padding: 10px 20px;
  cursor: pointer;
}

.title {
  position: absolute;
  top: 60px;
  left: 5px;
  box-sizing: border-box;
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 20px;
  .back-btn {
    margin-right: 10px;
  }
  .select-title {
  }
}
</style>