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"
            title="基础信息"
          >
            <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 />
      </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'
export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapCharts,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex
  },
};
</script>
<style scoped>
.map {
  flex: 1;
}
</style>