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

<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
    <div>
      <border-panel height="360px" style="margin-bottom: 6px" title="建筑信息">
        <BuildingInfo :detail="detail" v-if="detail" />
        <div slot="ext-header">
          <div class="float-btn" @click="openModal({ name: 'qtModal' })">
            其他
          </div>
        </div>
      </border-panel>
      <border-panel height="585px" style="margin-bottom: 6px" title="管理单位">
        <GementUnit :detail="detail" v-if="detail" @openModal="openModal" />
      </border-panel>
    </div>
    <div style="width: 1000px; position: relative">
      <div style="height: calc(100% - 325px)">
        <iframe
          ref="box"
          :src="dtData.txdz"
          style="height: 100%; width: 100%"
          v-if="dtData && dtData.txdz && middleType === '720'"
        ></iframe>
        <div style="height: 100%; width: 100%" v-if="middleType === 'map'">
          <Map :data="mapData" v-if="mapData" />
        </div>
      </div>
      <border-panel
        class="ylym2"
        :header-type="3"
        height="313px"
        width="955px"
        style="margin: 7px"
        title='火灾风险"一楼一码"'
      >
        <Risklevel :detail="detail" v-if="detail" @openModal="openModal" />
      </border-panel>
      <div
        class="m-btn d"
        :class="middleType === '720' ? 'map' : 'd'"
        @click="changeMiddleType"
        v-if="dtData && dtData.txdz"
      ></div>
    </div>
    <div>
      <border-panel height="521px" style="margin-bottom: 6px" title="智慧消防">
        <VideoInfo :detail="detail" v-if="detail" @openModal="openModal" />
      </border-panel>
      <border-panel
        height="425px"
        style="margin-bottom: 6px"
        title="自查、监督、维保"
      >
        <maintenance-supervision
          :detail="detail"
          v-if="detail"
          @openModal="openModal"
        />
      </border-panel>
    </div>

    <!-- 管理单位弹窗 -->
    <basic-modal top="120px" ref="gldwModal" name="管理单位" width="90%">
      <GldwModalContent :default="params.gldwModal" />
    </basic-modal>

    <!-- 其他 -->
    <basic-modal top="120px" ref="qtModal" name="其他">
      <BasicInfoModalContent />
    </basic-modal>

    <!-- 风险问号弹窗 -->
    <basic-modal top="30px" ref="whFxModal" name="安全风险分级预警流程" width="90%">
      <div style="display: flex; justify-content: center">
        <img src="../../assets/images/zl-fxyj.png" />
      </div>
    </basic-modal>

    <!-- 隐患问号弹窗 -->
    <basic-modal top="30px" ref="whYhModal" name="隐患闭环处置流程" width="90%">
      <div style="display: flex; justify-content: center">
        <img src="../../assets/images/dd-yhczlc.png" />
      </div>
    </basic-modal>

    <!-- 历史火灾 -->
    <basic-modal top="120px" ref="qhyyModal" name="历史火灾">
      <QhyyModalContent :default="params.qhyyModal" />
    </basic-modal>

    <!-- 隐患 -->
    <basic-modal top="120px" ref="yhModal">
      <YhModalContent :default="params.yhModal" />
      <YlycModalHeader slot="title" />
    </basic-modal>

    <!-- 智慧消防 -->
    <basic-modal top="120px" ref="zhxfModal" name="智慧消防">
      <fxfbCont 
        :gcjzmc="params && params.zhxfModal ? params.zhxfModal.gcjzmc : null"
      :sbType="params && params.zhxfModal ? params.zhxfModal.sblx : null" />
    </basic-modal>

    <!-- 自查 -->
    <basic-modal top="120px" ref="zcModal" name="自查、督查、维保信息">
      <MaintenanceModalContent :default="params.zcModal" />
    </basic-modal>
  </div>
</template>
<script>
import BuildingInfo from "./components/BuildingInfo.vue";
import VideoInfo from "./components/VideoInfo.vue";
import GementUnit from "./components/GementUnit.vue";
import Risklevel from "./components/Risklevel.vue";
import MaintenanceSupervision from "./components/MaintenanceSupervision.vue";
import HistoricalFire from "./components/HistoricalFire.vue";
import HiddenDanger from "./components/HiddenDanger.vue";
import { getBuildDetail, get720 } from "@/api/detail.js";
import Map from "@/components/Map.vue";
import GldwModalContent from "./components/GldwModalContent.vue";
import BasicInfoModalContent from "../Home/components/BasicInfoModalContent.vue";
import QhyyModalContent from "./components/QhyyModalContent.vue";
import YhModalContent from "./components/YhModalContent.vue";
import MaintenanceModalContent from "./components/MaintenanceModalContent.vue";
import fxfbCont from '../Iot/components/fxfbCont.vue';
export default {
  name: "BasicInfoPage",
  components: {
    BuildingInfo,
    VideoInfo,
    GementUnit,
    Risklevel,
    MaintenanceSupervision,
    HistoricalFire,
    HiddenDanger,
    Map,
    GldwModalContent,
    BasicInfoModalContent,
    QhyyModalContent,
    YhModalContent,
    MaintenanceModalContent,
    fxfbCont
  },
  data() {
    return {
      id: null,
      detail: null,
      middleType: "720",
      mapData: null,
      params: {
        gldwModal: null,
        qhyyModal: null,
        yhModal: null,
        zhxfModal: null,
        zcModal: null,
      },
      dtData: null,
    };
  },
  methods: {
    openModal(data) {
      console.log(data);
      this.params[data.name] = data.params;
      this.showModal(data.name);
    },
    changeMiddleType() {
      if (this.middleType === "720") {
        this.getMapData();
        this.middleType = "map";
      } else {
        this.middleType = "720";
      }
    },
    getMapData() {
      // console.log(this.params.id);
      this.mapData = null;
      this.mapData = {
        jd: this.detail.jd,
        wd: this.detail.wd,
        zl: null,
        jzmc: this.detail.gcjzmc,
        showzhd: 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;
    },
    getData() {
      getBuildDetail(this.id).then((res) => {
        this.detail = res.data.data;
        this.params.zhxfModal.gcjzmc = this.detail.gcjzmc
      });

      get720({ jzid: this.id, pageSize: 1000 }).then((res) => {
        console.log(res);
        this.dtData = res.data.rows.find((p) => p.jzid.toString() === this.id);
        console.log(this.dtData);
        if (!this.dtData || !this.dtData.txdz) {
          this.changeMiddleType();
        }
      });
    },
  },
  mounted() {
    // 获取参数
    const id = this.getQueryString("id");
    console.log(id);
    if (!id) {
      return;
    }

    this.id = id;
    this.getData();
  },
};
</script>

<style scoped lang="less">
.ylym {
  position: absolute;
  bottom: 0;
  left: 0;
}
.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;
}
.float-btn {
  width: 55px;
  height: 22px;
  left: 392px;
  top: 127px;

  background: linear-gradient(
    180deg,
    rgba(0, 209, 255, 0.245) 0%,
    rgba(0, 255, 224, 0.435) 100%
  );
  border: 1px solid rgba(0, 213, 255, 0.22);
  border-radius: 2px;
  font-family: "Abel";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  align-items: center;

  color: #ffffff;
  text-align: center;
  cursor: pointer;
}
</style>