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 />
      </border-panel>
      <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
        <HiddenDangerDetection />
      </border-panel>
      <border-panel height="296px" title="自主管理">
        <AutonomousManagement />
      </border-panel>
    </div>
    <div class="display: flex;">
      <div class="map">
        <MapCharts />
      </div>
      <div>
        <border-panel
          title="警情动态"
          width="938px"
          height="321px"
          :header-type="1"
        >
          <AlarmingSituationDynamics />
        </border-panel>
      </div>
    </div>
    <div>
      <border-panel height="311px" style="margin-bottom: 6px" title="风险预警">
        <RiskWarning />
      </border-panel>
      <border-panel height="331px" style="margin-bottom: 6px" title="智慧消防">
        <WisdomFire />
      </border-panel>
      <border-panel height="298px" title="火灾指标">
        <FireIndex />
        <template #ext-header>
          <!-- TODO  实现火灾指标日期范围切换事件 -->
          <button-block :items="['月', '年']" />
        </template>
      </border-panel>
    </div>
    <basic-modal ref="basicInfoModal" title="基本信息">
      <BasicInfoModalContent />
    </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.vue";
import MapCharts from "./components/MapCharts.vue";
import RiskWarning from "./components/RiskWarning.vue";
import WisdomFire from "./components/WisdomFire.vue";
import FireIndex from "./components/FireIndex.vue";
import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapCharts,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex,
    BasicInfoModalContent,
  },
  methods: {
    openBasicModal() {
      this.showModal("basicInfoModal");
    },
  },
};
</script>
<style scoped>
.map {
  flex: 1;
}
</style>