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

<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between; cursor: pointer;">
    <div>
      <border-panel
        height="443px"
        style="margin-bottom: 6px"
        title="高层建筑管理"
      >
        <Construction :qx="qx" :glztList="glztList" :wbxsList="wbxsList"  />
      </border-panel>
      <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
        <ManagementContent :qx="qx" />
      </border-panel>
    </div>
    <div>
      <div style="width: 900px; height: 1000px; display: flex;justify-content: center; margin-top: 150px;">
        <MapCharts :qx="qx" @selectArea="area => qx = area" />
      </div>
    </div>
    <div>
      <border-panel
        height="521px"
        style="margin-bottom: 6px"
        title="建筑管理单位分布"
      >
        <Management :gldListL="gldListL" :JzrzdList="JzrzdList" :wbdwList="wbdwList" />
      </border-panel>
      <border-panel
        height="421px"
        style="margin-bottom: 6px"
        title="建筑管理单位信息"
      >
        <UnitInfo :qx="qx"/>
      </border-panel>
    </div>
   
  </div>
</template>
<script>
import Management from "./components/Management.vue";
import UnitInfo from "./components/UnitInfo.vue";
import Construction from "./components/Construction.vue";
import ManagementContent from "./components/ManagementContent.vue";
import MapCharts from "../Home/components/MapCharts.vue";

import {
  getGlzts,
  getWbxxs,
  getGldwgljzpm,
  getJzrzdwpms,
  getWbdwgljzpm,
} from "@/api/management.js";
export default {
  name: "FirePage",
  components: {
    Management,
    UnitInfo,
    Construction,
    ManagementContent,
    MapCharts,
    
  },
  data() {
    return {
      glztList: [],
      wbxsList: [],
      gldListL: [],
      JzrzdList: [],
      ZjglList: [],
      wbdwList: [],
      qx: "万州区",
      params: {
        pageSize: 100,
        pageNum: 1,
      },
    };
  },
  watch: {
    qx() {
      this.unitZt();
      this.getWbxsList();
      this.getDwfbList();
      this.getDwpmList();
      this.getWbdwList()
    }
  },
  methods: {
    // 管理主体
    unitZt() {
      getGlzts({
        pageSize: 100,
        pageNum: 1,
        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
      }).then((res) => {
        this.glztList = res.data.rows;
      });
    },
    // 维保形式
    getWbxsList() {
      getWbxxs({
        pageSize: 100,
        pageNum: 1,
        qx: (this.qx === '重庆市' ? '' : this.qx ),
      }).then((res) => {
        this.wbxsList = res.data.rows;
      });
    },
    // 单位分布
    getDwfbList() {
      getGldwgljzpm({
        pageSize: 100,
        pageNum: 1,
        qx: (this.qx === '重庆市' ? '' : this.qx ),
      }).then((res) => {
        this.gldListL = res.data.rows;
      });
    },
    //入住单位排名
    getDwpmList() {
      getJzrzdwpms({
        pageSize: 100,
        pageNum: 1,
        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
      }).then((res) => {
        this.JzrzdList = res.data.rows;
      });
    },
    //维保单位
    getWbdwList() {
		getWbdwgljzpm({
        pageSize: 100,
        pageNum: 1,
        qx: (this.qx === '重庆市' ? '' : this.qx ),
      }).then((res) => {
        this.wbdwList = res.data.rows;
      });
    },
  
  },
  created() {
    this.unitZt();
    this.getWbxsList();
    this.getDwfbList();
    this.getDwpmList();
	this.getWbdwList()
  },
};
</script>

<style scoped lang="less"></style>