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" />
      </border-panel>
      <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
        <HiddenDangerDetection :qy="qy" />
      </border-panel>
      <border-panel height="296px" title="自主管理">
        <AutonomousManagement :qy="qy" />
      </border-panel>
    </div>
    <div class="display: flex;">
      <div class="map" style="position: relative;">
        <MapCharts />
        <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 :PoliceList="PoliceList" />
        </border-panel>
      </div>
    </div>
    <div>
      <border-panel height="311px" style="margin-bottom: 6px" title="风险预警">
        <RiskWarning :riskList="riskList"  />
      </border-panel>
      <border-panel height="331px" style="margin-bottom: 6px" title="智慧消防">
        <WisdomFire :frieList="frieList" :iotList="iotList" />
      </border-panel>
      <border-panel height="298px" title="火灾指标">
        <FireIndex />
        <template #ext-header>
          <!-- TODO  实现火灾指标日期范围切换事件 -->
          <button-block :items="['月', '年']" />
        </template>
      </border-panel>
    </div>
    <basic-modal top="120px" ref="basicInfoModal" title="基本信息">
      <BasicInfoModalContent :qy="qy" />
    </basic-modal>
  </div>
</template>
<script>
import BasicInfo from "./components/BasicInfo.vue";
import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics.vue";
import AutonomousManagement from "./components/AutonomousManagement.vue";
import HiddenDangerDetection from "./components/HiddenDangerDetection/index.vue";
import MapCharts from "./components/MapCharts.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 { totaldata,getJqdt,getZxgjtj ,getJrjzsbs} from "@/api/index.js";
export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapCharts,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex,
    BasicInfoModalContent,
    SearchBox
  },
  data(){
    return{
      riskList:[],
      // 传参
      qy:'重庆市',
      params:{
        pageSize:100,
        pageNum:1,
      },
      PoliceList:[],
      frieList:{},
      iotList:{},
    }
  },
  watch:{
    qy(){
      this.getList()
    this.getFireList()
    this.getIotList()
    }
  },
  methods: {
    openBasicModal() {
      this.showModal("basicInfoModal");
    },
    // 风险预警
    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"
          });
      })
    },
    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]
       console.log('------',this.frieList);
      })
    },
    // 物联网栋数
    getIotList(){
      getJrjzsbs({...this.params,name:this.qy==="重庆市"?"":this.qy}).then(res=>{
        this.iotList=res.data.rows[0]
        
      })
    }
  },
  created(){
    this.getList()
    this.getStaic()
    this.getFireList()
    this.getIotList()
  }
};
</script>
<style scoped>
.map {
  flex: 1;
}
</style>