Bladeren bron

[Wip 0000] 首页改造使用静态配置并加强了对部门切换的支持

houzekong 1 maand geleden
bovenliggende
commit
1fbfcbb468

+ 1 - 0
src/api/sys/map.ts

@@ -72,6 +72,7 @@ export function getGeoJSON(params: any) {
     for (const element of records) {
       // 为初始的数据赋值
       if (!element.dynamic) {
+        element.id = element.deptId;
         // 子节点计数器
         element.count = 1;
         element.isLeaf = true;

+ 3 - 2
src/layouts/default/feature/SimpleMap.vue

@@ -40,7 +40,7 @@
 
   const appStore = useAppStore();
   const mineStore = useMineDepartmentStore();
-  appStore.setSimpleMapParams({ deptId: mineStore.getRootId });
+  appStore.setSimpleMapParams({ deptId: mineStore.getRootId, isLeaf: mineStore.getRoot?.isLeaf });
   // const route = useRoute();
 
   const mapContainer = ref<HTMLElement>();
@@ -58,6 +58,7 @@
     longitude: 108.367283,
     latitude: 36.024691,
     zoom: 6,
+    isLeaf: false,
   };
 
   const historyStack = ref([DEFAULT_NODE]); // 用于存储历史节点的栈,实现返回上一级功能
@@ -132,7 +133,7 @@
     const node: any = last(historyStack.value);
     if (!node) return;
 
-    appStore.setSimpleMapParams({ deptId: node.id });
+    appStore.setSimpleMapParams({ deptId: node.id, isLeaf: node.isLeaf });
 
     if (node.isLeaf) {
       document.getElementById('map2dContainer')!.style.display = 'block';

+ 426 - 0
src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -676,3 +676,429 @@ export const testConfigSealedGoaf: Config[] = [
   //   },
   // },
 ];
+
+export const testConfigSealedMine: Config[] = [
+  // 1. 密闭统计
+  {
+    deviceType: 'goaf_statistics',
+    moduleName: '密闭统计',
+    pageType: 'sealed_goaf_mine',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: { show: false, value: '' },
+        slot: { show: false, value: '' },
+      },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'row',
+        items: [{ name: 'board', basis: '100%' }],
+      },
+      list: [],
+      board: [
+        {
+          type: 'F',
+          readFrom: 'goafStatusNum',
+          layout: 'label-top',
+          items: [
+            {
+              label: '设备总数',
+              value: '${total}',
+            },
+            {
+              label: '正常',
+              value: '${status1}',
+            },
+            {
+              label: '未知',
+              value: '${unknown}',
+            },
+            {
+              label: '断线',
+              value: '${status0}',
+            },
+            {
+              label: '报警',
+              value: '${alarm}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:170px;',
+      version: '原版',
+      position: 'top:70px;left:25px;',
+    },
+  },
+
+  // 2. 密闭预警统计
+  {
+    deviceType: 'warning_statistics',
+    moduleName: '密闭预警统计',
+    pageType: 'sealed_goaf_mine',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'C',
+          readFrom: 'goafAlarmNum[0]',
+          layout: 'val-top',
+          items: [
+            {
+              label: '低风险',
+              value: '${alarm1}',
+            },
+            {
+              label: '一般风险',
+              value: '${alarm2}',
+            },
+            {
+              label: '较高风险',
+              value: '${alarm3}',
+            },
+            {
+              label: '高风险',
+              value: '${alarm4}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:210px;',
+      version: '原版',
+      position: 'top:250px;left:25px;',
+    },
+  },
+  // 3.预警信息列表
+  {
+    deviceType: 'warning_list',
+    moduleName: '预警信息列表',
+    pageType: 'sealed_goaf_mine',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+            overflow: true,
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          // parser: 'json',
+          readFrom: 'provinceAlarm.records',
+          columns: [
+            {
+              name: '告警类型',
+              prop: 'alarmTypeCont',
+            },
+            {
+              name: '安装位置',
+              prop: 'devicePos',
+            },
+            {
+              name: '告警描述',
+              prop: 'alarmName',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:420px;',
+      version: '原版',
+      position: 'top:470px;left:25px;',
+    },
+  },
+  // 4.  密闭内墙详情展示
+  {
+    deviceType: 'detail_inner_display',
+    moduleName: '密闭详情展示',
+    pageType: 'sealed_goaf_mine',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board_table',
+            basis: '100%',
+            overflow: true,
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'monitorData',
+          boardConfigs: [
+            {
+              type: 'D',
+              layout: 'val-top',
+              title: '密闭内详情',
+              items: [
+                { label: '甲烷', value: '${ch4Val}' },
+                { label: '一氧化碳', value: '${coVal}' },
+                { label: '二氧化碳', value: '${co2Val}' },
+                { label: '氧气', value: '${o2Val}' },
+                { label: '乙烯', value: '${c2h2Val}' },
+                { label: '乙炔', value: '${c2h4Val}' },
+                { label: '压差', value: '${sourcePressure}' },
+                { label: '温度', value: '${temperature}' },
+              ],
+            },
+            {
+              type: 'D',
+              layout: 'val-top',
+              title: '密闭外详情',
+              items: [
+                { label: '甲烷', value: '${ch4ValOut}' },
+                { label: '一氧化碳', value: '${coValOut}' },
+                { label: '二氧化碳', value: '${co2ValOut}' },
+                { label: '氧气', value: '${o2ValOut}' },
+                { label: '乙烯', value: '${c2h2ValOut}' },
+                { label: '乙炔', value: '${c2h4ValOut}' },
+                { label: '压差', value: '${sourcePressure}' },
+                { label: '温度', value: '${temperatureOut}' },
+              ],
+            },
+          ],
+          table: {
+            type: 'D',
+            readFrom: '',
+            columns: [
+              { name: '安装位置', prop: 'devicePos' },
+              { name: '预警等级', prop: 'alarmLevel' },
+              { name: '状态', prop: 'gjMineStatus' },
+            ],
+          },
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:800px;',
+      version: '原版',
+      position: 'top:30px;right:25px;',
+    },
+  },
+  // 4.  密闭墙外详情展示
+  // {
+  //   deviceType: 'detail_outer_display',
+  //   moduleName: '密闭墙外详情展示',
+  //   pageType: 'sealed_goaf_mine',
+  //   moduleData: {
+  //     header: {
+  //       show: false,
+  //       readFrom: '',
+  //       selector: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //       slot: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: {
+  //       direction: 'column',
+  //       items: [
+  //         {
+  //           name: 'board_table',
+  //           basis: '100%',
+  //           overflow: true,
+  //         },
+  //       ],
+  //     },
+  //     board: [],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [
+  //       {
+  //         readFrom: 'monitorData',
+  //         board: {
+  //           type: 'D',
+  //           layout: 'val-top',
+  //           items: [
+  //             { label: '甲烷', value: '${ch4Val}' },
+  //             { label: '一氧化碳', value: '${coVal}' },
+  //             { label: '二氧化碳', value: '${co2Val}' },
+  //             { label: '氧气', value: '${o2Val}' },
+  //             { label: '乙烯', value: '${c2h2Val}' },
+  //             { label: '乙炔', value: '${c2h4Val}' },
+  //             { label: '压差', value: '${dailyYaCha}' },
+  //             { label: '温度', value: '${temperature}' },
+  //           ],
+  //         },
+  //         table: {
+  //           type: 'D',
+  //           readFrom: '',
+  //           columns: [
+  //             { name: '安装位置', prop: 'devicePos' },
+  //             { name: '预警等级', prop: 'alarmLevel' },
+  //             { name: '状态统计', prop: 'gjMineStatus' },
+  //           ],
+  //         },
+  //       },
+  //     ],
+  //   },
+  //   showStyle: {
+  //     size: 'width:440px;height:420px;',
+  //     version: '原版',
+  //     position: 'top:460px;right:25px;',
+  //   },
+  // },
+  // // 6. 煤层自燃倾向性
+  // {
+  //   deviceType: 'coalSeam_fire',
+  //   moduleName: '煤层自燃倾向性',
+  //   pageType: 'sealed_goaf_mine',
+  //   moduleData: {
+  //     header: {
+  //       show: false,
+  //       readFrom: '',
+  //       selector: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //       slot: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: {
+  //       direction: 'column',
+  //       items: [
+  //         {
+  //           name: 'chart',
+  //           basis: '100%',
+  //         },
+  //       ],
+  //     },
+  //     chart: [
+  //       {
+  //         type: 'pie_drag',
+  //         readFrom: '',
+  //         legend: { show: false, formatter: '{b}:{c}\n{d}%' },
+  //         xAxis: [{ show: false }],
+  //         yAxis: [{ show: false, name: '风量', position: 'left' }],
+  //         series: [{ readFrom: 'coalSeamFireData', xprop: 'coalSeamLevel', yprop: 'num', label: '' }],
+  //       },
+  //     ],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [],
+  //   },
+  //   showStyle: {
+  //     size: 'width:440px;height:210px;',
+  //     version: '原版',
+  //     position: 'top:650px;right:25px;',
+  //   },
+  // },
+];

+ 77 - 18
src/views/dashboard/SealedGoaf/index.vue

@@ -4,7 +4,7 @@
     <!-- 渲染所有模块 -->
     <ModulePrimary
       v-for="cfg in cfgs"
-      :key="cfg.deviceType + cfg.moduleName"
+      :key="cfg.deviceType"
       :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
@@ -15,23 +15,32 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { computed, onUnmounted, ref, watch, shallowRef } from 'vue';
   import { useInitConfigs, useInitPage } from '@/components/Configurable/hooks/useInit';
-  import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
-  import { getCoalSeamFireNum, getMineProductionStatusNum, getOverLimitNum, getGoafAlarmNum, getGoafAccessCount } from './sealedGoaf.api';
+  import { testConfigSealedGoaf, testConfigSealedMine } from './configurable.data.sealedGoaf';
+  import {
+    getCoalSeamFireNum,
+    getMineProductionStatusNum,
+    getOverLimitNum,
+    getGoafAlarmNum,
+    getGoafAccessCount,
+    getGoafData,
+    getGoafStatusNum,
+    getProvinceAlarm,
+  } from './sealedGoaf.api';
   import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useAppStore } from '/@/store/modules/app';
-  import { useMineDepartmentStore } from '/@/store/modules/mine';
+  // import { useMineDepartmentStore } from '/@/store/modules/mine';
 
   const { title = '老空区永久密闭监测与分析系统' } = useGlobSetting();
   const { data, updateData } = useInitPage(title);
   const appStore = useAppStore();
-  const mineStore = useMineDepartmentStore();
+  // const mineStore = useMineDepartmentStore();
 
   const cfgs = computed(() => configs.value);
-  const { configs, fetchConfigs } = useInitConfigs();
-  const mineData = ref({
+  const { configs } = useInitConfigs();
+  const mineData = shallowRef({
     coalSeamFireData: null,
     productionStatusData: null,
     overLimitData: null,
@@ -58,6 +67,14 @@
     },
   }); // 所有数据汇总
 
+  const goafData = ref({
+    monitorData: null,
+    coalSeamFireData: null,
+    goafStatusNum: null,
+    goafAlarmNum: null,
+    provinceAlarm: null,
+  });
+
   async function fetchHomeData() {
     try {
       // 2. 异步获取所有接口数据(并行请求提升性能)
@@ -66,7 +83,7 @@
         getMineProductionStatusNum(appStore.simpleMapParams), // 当日生产状态数据
         getOverLimitNum(appStore.simpleMapParams), // 超限数据(可按需处理)
         getGoafAlarmNum(appStore.simpleMapParams), // 执法处风险统计
-        getGoafAccessCount({}), //联网状态接入统计
+        getGoafAccessCount(appStore.simpleMapParams),
 
         // getGoafAlarmLevel(appStore.simpleMapParams),
         // getGoafAlarmLevel({ mineCode: '100008' }),
@@ -121,18 +138,60 @@
     }
   }
 
-  watch(() => appStore.getSimpleMapParams, fetchHomeData);
+  async function fetchLeafData() {
+    try {
+      // 异步获取所有接口数据(并行请求提升性能)
+      const [monitorData, coalSeamFireData, goafStatusNum, goafAlarmNum, provinceAlarm] = await Promise.all([
+        getGoafData(appStore.simpleMapParams), // 密闭监测详情
+        getCoalSeamFireNum(appStore.simpleMapParams), // 煤层自燃倾向数据
+        getGoafStatusNum(appStore.simpleMapParams), // 密闭统计
+        getGoafAlarmNum(appStore.simpleMapParams), // 预警统计
+        getProvinceAlarm(appStore.simpleMapParams), // 预警信息列表
+      ]);
+
+      if (provinceAlarm?.records) {
+        const alarmTypeMap = {
+          leakageAlarm: '密闭漏风状态报警',
+          sourcePressureAlarm: '内外压差风险报警',
+          fireAlarm: '自燃发火隐患报警',
+          fireAlarmOut: '密闭外自燃发火报警',
+          unsealAlarm: '火区密闭启封报警',
+          explosionAlarm: '密闭爆炸危险性报警',
+          overLimitAlarm: '超限报警',
+          lateReport: '数据延迟上报预警',
+        };
+
+        // 遍历列表,把 alarmType 替换成中文
+        provinceAlarm.records = provinceAlarm.records.map((item) => {
+          item.alarmTypeCont = alarmTypeMap[item.alarmType] || item.alarmType;
+          return item;
+        });
+      }
 
-  onMounted(() => {
-    fetchHomeData(); // 4. 赋值更新后的配置到configs(触发组件重新渲染)
+      // 把接口数据赋值给响应式变量(备用)
+      goafData.value = { monitorData, coalSeamFireData, goafStatusNum, goafAlarmNum, provinceAlarm };
+      // 更新页面数据
+      updateData(goafData.value);
+    } catch (error) {
+      console.error('数据获取/配置更新失败:', error);
+    }
+  }
 
-    // 1. 先获取基础配置(若有接口获取配置则保留,否则直接用本地testConfigSealedGoaf)
-    fetchConfigs(mineStore.getRoot?.isLeaf ? 'sealed_goaf_mine' : 'sealed_goaf').then(() => {
-      if (configs.value.length === 0) {
-        configs.value = [...testConfigSealedGoaf]; // 解构触发响应式更新
+  watch(
+    () => appStore.getSimpleMapParams,
+    (params) => {
+      if (params.isLeaf) {
+        fetchLeafData();
+        configs.value = testConfigSealedMine; // 解构触发响应式更新
+      } else {
+        fetchHomeData();
+        configs.value = testConfigSealedGoaf; // 解构触发响应式更新
       }
-    });
-  });
+    },
+    {
+      immediate: true,
+    }
+  );
 
   // 数据处理函数
   onUnmounted(() => {});

+ 31 - 0
src/views/dashboard/SealedGoaf/sealedGoaf.api.ts

@@ -7,6 +7,9 @@ enum Api {
   getGoafAlarmNum = '/province/homeData/getGoafAlarmNum',
   getGoafAlarmLevel = '/province/homeData/getGoafAlarmLevel',
   getGoafAccessCount = '/province/mineData/getGoafAccessCount',
+  getGoafData = '/province/device/getGoafData',
+  getGoafStatusNum = '/province/homeData/getGoafStatusNum',
+  getProvinceAlarm = '/province/alarm/getProvinceAlarm',
 }
 
 // 查询煤层自燃倾向数量统计
@@ -75,8 +78,36 @@ export const getGoafAccessCount = (params) =>
   defHttp.get(
     {
       url: Api.getGoafAccessCount,
+      params,
     },
     {
       joinParamsToUrl: true,
     }
   );
+
+// 查询密闭监测数据
+export function getGoafData(params: any) {
+  return defHttp.post({ url: Api.getGoafData, params }, { joinParamsToUrl: true });
+}
+
+// 查询密闭统计
+export function getGoafStatusNum(params) {
+  return defHttp.post(
+    {
+      url: Api.getGoafStatusNum,
+      params,
+    },
+    { joinParamsToUrl: true }
+  );
+}
+
+// 查询预警信息列表
+export function getProvinceAlarm(params) {
+  return defHttp.post(
+    {
+      url: Api.getProvinceAlarm,
+      params,
+    },
+    { joinParamsToUrl: true }
+  );
+}