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 class="tips"  @click="getShoeInfo('smsMsgModal')" >提示</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" />
      <ZhxfModalHeader slot="title" />
      </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; 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="50%">
      <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/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";
import MessageTipModalContent from '@/components/MessageTipModalContent.vue'

export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapChartsCategory,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex,
    BasicInfoModalContent,
    SearchBox,
    zzglModul,
    MessageTipModalContent
  },
  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: "" //大修基金
      },
      textInfo:`<div style="color: #fff;">
    <p style="text-indent: 31.6pt;">
        <br/>
    </p>
    <h1 style="text-align: center;">
        高层建筑消防安全风险分级分色判定标准
    </h1>
    <h1 style="text-align: center;">
        （试行）
    </h1>
    <p style="text-indent: 31.6pt;">
        <br/>
    </p>
    <p style="text-indent: 31.6pt;">
        <span>一、高层建筑消防安全风险分级分色定义</span>
    </p>
    <p style="text-indent: 31.6pt;">
        依据《中共中央办公厅国务院办公厅关于推进城市安全发展的意见》、《国务院安委会办公室关于实施遏制重特大事故工作指南构建双重预防机制的意见》，将高层建筑消防安全风险等级从高到低划分为重大风险、较大风险、一般风险和低风险，分别用红、橙、黄、蓝四种颜色标示。
    </p>
    <p style="text-indent: 31.6pt;">
        （一）重大风险（红）：指该高层建筑火灾危险、致灾因素多，管控难度大，具有发生重大及以上火灾事故的可能性；
    </p>
    <p style="text-indent: 31.6pt;">
        （二）较大风险（橙）。指该高层建筑火灾危险、致灾因素较多，管控难度较大，具有发生较大火灾事故的可能性；
    </p>
    <p style="text-indent: 31.6pt;">
        （三）一般风险（黄）。指该高层建筑火灾危险、致灾因素较少，具有发生一般火灾事故的可能性；
    </p>
    <p style="text-indent: 31.6pt;">
        （四）低风险（蓝）。指该高层建筑火灾危险、致灾因素在受控范围内，发生火灾事故的可能性较小。
    </p>
    <p style="text-indent: 31.6pt;">
        <span>二、高层建筑火灾隐患分类</span>
    </p>
    <p style="text-indent: 31.6pt;">
        参考《重大火灾隐患判定标准》（GB35151-2017），将此次排查隐患状态，根据发生火灾概率、后果严重性、扑救难度从高到低分为A、B、C类。其中住宅建筑隐患分类：A类3个，B类8个，C类11个；公共建筑隐患分类：A类4个，B类10个，C类10个。
    </p>
    <table width="100%" style="color: #fff; padding: 0 40px;" border="1">
        <colgroup>
            <col width="91"/>
            <col width="189"/>
            <col width="307"/>
            <col width="160"/>
            <col width="173"/>
        </colgroup>
        <tbody style="text-align: center; line-height: 30px; border: #fff 1px solid;">
            <tr>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;"></th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
                    二级指标
                </th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
                    排查结果
                </th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
                    住宅建筑 隐患分类
                </th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px;">
                    公共建筑 隐患分类
                </th>
            </tr>
            <tr>
                <td colspan="1" rowspan="10">
                    消防设施
                </td>
                <td colspan="1" rowspan="2">
                    室内消火栓系统
                </td>
                <td colspan="1" rowspan="1">
                    无水
                </td>
                <td colspan="1" rowspan="1">
                    A
                </td>
                <td colspan="1" rowspan="1">
                    A
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    压力不足、其他故障
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="2">
                    室外消火栓系统
                </td>
                <td colspan="1" rowspan="1">
                    无水
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    压力不足、其他故障
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="2">
                    自动喷水灭火系统
                </td>
                <td colspan="1" rowspan="1">
                    无水
                </td>
                <td colspan="1" rowspan="1">
                    A
                </td>
                <td colspan="1" rowspan="1">
                    A
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    压力不足、其他故障
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    火灾自动报警系统
                </td>
                <td colspan="1" rowspan="1">
                    设施故障，不具备 防灭火功能
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    机械防、排烟系统
                </td>
                <td colspan="1" rowspan="1">
                    设施故障，不具备 防灭火功能
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    防火卷帘
                </td>
                <td colspan="1" rowspan="1">
                    设施故障，不具备 防灭火功能
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    气体灭火系统
                </td>
                <td colspan="1" rowspan="1">
                    设施故障，不具备 防灭火功能
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="2">
                    生命通道
                </td>
                <td colspan="1" rowspan="1">
                    消防车通道
                </td>
                <td colspan="1" rowspan="1">
                    存在堵塞、占用情况
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    建筑内疏散通道、 安全出口
                </td>
                <td colspan="1" rowspan="1">
                    被堵塞、占用或封闭
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="3">
                    用电用气
                </td>
                <td colspan="1" rowspan="1">
                    电动自行车
                </td>
                <td colspan="1" rowspan="1">
                    存在违规停放充电现象
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    电气线路
                </td>
                <td colspan="1" rowspan="1">
                    存在私接乱拉
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    电缆井内防火封堵
                </td>
                <td colspan="1" rowspan="1">
                    防火封堵被破坏
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="9">
                    日常管理
                </td>
                <td colspan="1" rowspan="1">
                    可燃雨棚
                </td>
                <td colspan="1" rowspan="1">
                    存在违规设置现象
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    突出外墙防护网
                </td>
                <td colspan="1" rowspan="1">
                    存在违规设置现象
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    人员密集场所 室内装修
                </td>
                <td colspan="1" rowspan="1">
                    违规采用 易燃可燃材料装修
                </td>
                <td colspan="1" rowspan="1">
                    /
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    易燃可燃彩钢板房
                </td>
                <td colspan="1" rowspan="1">
                    违规搭建 易燃可燃彩钢板房
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    避难层（间）
                </td>
                <td colspan="1" rowspan="1">
                    被占用或擅自改变用途
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
                <td colspan="1" rowspan="1">
                    B
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    易燃易爆危险品
                </td>
                <td colspan="1" rowspan="1">
                    存在违规 储存、经营、使用
                </td>
                <td colspan="1" rowspan="1">
                    A
                </td>
                <td colspan="1" rowspan="1">
                    A
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    住宅部分与 非住宅部分楼梯
                </td>
                <td colspan="1" rowspan="1">
                    存在共用疏散楼梯
                </td>
                <td colspan="1" rowspan="1">
                    /
                </td>
                <td colspan="1" rowspan="1">
                    A
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    消防控制室值班人员
                </td>
                <td colspan="1" rowspan="1">
                    配备不到位
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    外墙装饰、广告牌
                </td>
                <td colspan="1" rowspan="1">
                    存在影响灭火救援的 装饰、广告牌
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
                <td colspan="1" rowspan="1">
                    C
                </td>
            </tr>
        </tbody>
    </table>
    <p style="text-indent: 31.6pt;">
        <span>三、高层建筑消防安全风险分级分色判定规则</span>
    </p>
    <p style="text-indent: 31.6pt;">
        按照A类隐患赋30分、B类隐患赋5分、C类隐患赋1分计算消防安全风险值
    </p>
    <table width="100%" style="color: #fff; padding: 0 40px;" border="1">
        <colgroup>
            <col width="228"/>
            <col width="377"/>
        </colgroup>
        <tbody style="text-align: center; line-height: 30px; border: #fff 1px solid;">
            <tr>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto; ">
                    消防安全风险分色
                </th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
                    消防安全风险值n
                </th>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    重大风险（红色）
                </td>
                <td colspan="1" rowspan="1">
                    ≥60
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    较大风险（橙色）
                </td>
                <td colspan="1" rowspan="1">
                    60＞n≥30
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    一般风险（黄色）
                </td>
                <td colspan="1" rowspan="1">
                    30＞n≥6
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    低风险（蓝色）
                </td>
                <td colspan="1" rowspan="1">
                    6＞n＞0
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    无风险（绿色）
                </td>
                <td colspan="1" rowspan="1">
                    n=0
                </td>
            </tr>
        </tbody>
    </table>
    <p>
        <br/>
    </p>
    <p>
        <br/>
    </p>
    <p>
        <br/>
    </p>
</div>`
    }
  },
  watch: {
    qy() {
      this.getList();
      this.getFireList();
      this.getIotList();
    },
  },
  methods: {
    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 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;
}
.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;
}
</style>