goaf-monitoring-system/src/views/dashboard/SealedGoaf/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <!-- 渲染所有模块 -->
    <ModulePrimary v-for="cfg in cfgs" :key="cfg.deviceType + cfg.moduleName" :show-style="cfg.showStyle"
      :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
      :visible="true" />
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useInitConfigs, useInitPage } from '@/components/Configurable/hooks/useInit';
import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
import { getCoalSeamFireNum, getMineProductionStatusNum, getOverLimitNum, getGoafAlarmNum, getGoafAlarmLevel } from './sealedGoaf.api'
import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
import { useGlobSetting } from '/@/hooks/setting';

const { title = '采空区密闭监测与分析系统' } = useGlobSetting();
const { data, updateData } = useInitPage(title);

const cfgs = computed(() => configs.value);
const { configs, fetchConfigs } = useInitConfigs();
const mineData = ref({}); // 所有数据汇总

onMounted(async () => {
  try {
    // 1. 先获取基础配置（若有接口获取配置则保留，否则直接用本地testConfigSealedGoaf）
    await fetchConfigs('sealed_goaf');

    // 2. 异步获取所有接口数据（并行请求提升性能）
    const [coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel] = await Promise.all([
      getCoalSeamFireNum(), // 煤层自燃倾向数据
      getMineProductionStatusNum(), // 当日生产状态数据
      getOverLimitNum(), // 超限数据（可按需处理）
      getGoafAlarmNum({ mineCode: '100008' }), // 执法处风险统计
      getGoafAlarmLevel({ mineCode: '100008' }),
    ]);

    // 3. 把接口数据赋值给响应式变量（备用）
    mineData.value = { coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel };

    // 4. 赋值更新后的配置到configs（触发组件重新渲染）
    configs.value = [...testConfigSealedGoaf]; // 解构触发响应式更新

    // 5. 更新页面数据
    updateData(mineData.value);

  } catch (error) {
    console.error('数据获取/配置更新失败：', error);
  }
});

// 数据处理函数
onUnmounted(() => { });
</script>
<style lang="less" scoped>
@import '/@/design/theme.less';

@font-face {
  font-family: 'douyuFont';
  src: url('/@/assets/font/douyuFont.otf');
}




.company-home {
  position: absolute;
  width: 100%;
  height: 100%;
  color: @white;
  background-image: linear-gradient(90deg, @map-bg 0%, @map-bg 14%, transparent 50%, @map-bg 86%, @map-bg 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: @layout-basic-z-index;
  // 允许点击穿透以支持下面的地图进行交互
  pointer-events: none;
}

:deep(.ant-select-selection-item) {
  display: flex;
  align-items: center;
}
</style>