[Feat 0000]双下拉框图表组件

src/views/vent/home/configurable/components/preset/selectorDualChart.vue

@@ -4,12 +4,7 @@
     <!-- 双下拉框头部 -->
     <div class="w-100% flex costume-header">
       <!-- 第一个下拉框 -->
-      <Dropdown
-        class="flex-grow-1 costume-header_left"
-        :trigger="['click']"
-        :bordered="false"
-        @open-change="visible1 = $event"
-      >
+      <Dropdown class="flex-grow-1 costume-header_left" :trigger="['click']" :bordered="false" @open-change="visible1 = $event">
         <div class="flex-basis-100% flex flex-items-center" @click.prevent>
           <component :is="getIcon(selectorConfig1.icon)" class="w-30px" />
           <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
@@ -19,7 +14,7 @@
           <CaretDownOutlined class="w-30px" v-else />
         </div>
         <template #overlay>
-          <Menu :selected-keys="[selectorConfig1.options]" @click="handleSelect1">
+          <Menu :selected-keys="[selectedValue1]" @click="handleSelect1">
             <MenuItem v-for="item in selectorConfig1.options" :key="item.value" :title="item.label">
               {{ item.label }}
             </MenuItem>
@@ -28,12 +23,7 @@
       </Dropdown>
 
       <!-- 第二个下拉框 -->
-      <Dropdown
-        class="flex-grow-1 costume-header_left"
-        :trigger="['click']"
-        :bordered="false"
-        @open-change="visible2 = $event"
-      >
+      <Dropdown class="flex-grow-1 costume-header_left" :trigger="['click']" :bordered="false" @open-change="visible2 = $event">
         <div class="flex-basis-100% flex flex-items-center" @click.prevent>
           <component :is="getIcon(selectorConfig2.icon)" class="w-30px" />
           <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
@@ -43,7 +33,7 @@
           <CaretDownOutlined class="w-30px" v-else />
         </div>
         <template #overlay>
-          <Menu :selected-keys="[selectorConfig2.options]" @click="handleSelect2">
+          <Menu :selected-keys="[selectedValue2]" @click="handleSelect2">
             <MenuItem v-for="item in selectorConfig2.options" :key="item.value" :title="item.label">
               {{ item.label }}
             </MenuItem>
@@ -53,185 +43,153 @@
     </div>
 
     <!-- 图表内容区域 -->
-    <div class="chart-container h-calc(100% - 30px)">
-      <CustomChart 
-        class="content__module" 
-        :chart-config="config.chartConfig" 
-        :chart-data="filteredChartData" 
-      />
+    <div class="chart-container h-190px">
+      <CustomChart class="content__module" :chart-config="chartConfig" :chart-data="chartData" height="100%" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, defineAsyncComponent } from 'vue';
-import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-import { 
-  SwapOutlined, 
-  CaretUpOutlined, 
-  CaretDownOutlined,
-  BarChartOutlined,
-  LineChartOutlined,
-  PieChartOutlined
-} from '@ant-design/icons-vue';
-import { getData, getFormattedText } from '../../hooks/helper';
-
-// 异步导入图表组件，优化加载性能
-const CustomChart = defineAsyncComponent(() => import('../detail/CustomChart.vue'));
-
-// 定义组件属性
-const props = defineProps<{
-  moduleData: any;
-  data: any;
-  config: any;
-}>();
-
-console.log('SelectorDualChart props:', props);
-
-// 状态管理
-const visible1 = ref(false);
-const visible2 = ref(false);
-const selectedValue1 = ref('');
-const selectedValue2 = ref('');
-const selectedLabel1 = ref('请选择');
-const selectedLabel2 = ref('请选择');
-
-// 从配置中获取选择器配置
-const { selectorConfig1, selectorConfig2 } = props.config.config;
-
-// 初始化选项数据
-const options1 = ref<any[]>([]);
-const options2 = ref<any[]>([]);
-
-// 处理图标渲染
-const getIcon = (iconName: string) => {
-  const iconMap: Record<string, any> = {
-    'swap': SwapOutlined,
-    'bar-chart': BarChartOutlined,
-    'line-chart': LineChartOutlined,
-    'pie-chart': PieChartOutlined,
-    // 可以添加更多图标映射
+  import { ref, onMounted, computed, watch, nextTick } from 'vue';
+  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined, BarChartOutlined, LineChartOutlined, PieChartOutlined } from '@ant-design/icons-vue';
+  import { getData } from '../../hooks/helper';
+  import CustomChart from '../detail/CustomChart.vue';
+
+  // 定义组件属性
+  const props = defineProps<{
+    moduleData: any;
+    data: any;
+    config: any;
+  }>();
+
+  // 状态管理
+  const visible1 = ref(false);
+  const visible2 = ref(false);
+  const selectedValue1 = ref('');
+  const selectedValue2 = ref('');
+  const selectedLabel1 = ref('请选择');
+  const selectedLabel2 = ref('请选择');
+
+  // 从配置中获取选择器配置
+  const { chartConfig, selectorConfig1, selectorConfig2 } = props.config.config;
+
+  // 初始化选项数据
+  const options1 = ref<any[]>([]);
+  const options2 = ref<any[]>([]);
+  const rawChartData = ref([]); // 存储原始数据，用于过滤
+  // 处理图标渲染
+  const getIcon = (iconName: string) => {
+    const iconMap: Record<string, any> = {
+      swap: SwapOutlined,
+      'bar-chart': BarChartOutlined,
+      'line-chart': LineChartOutlined,
+      'pie-chart': PieChartOutlined,
+      // 可以添加更多图标映射
+    };
+    return iconMap[iconName] || SwapOutlined;
   };
-  return iconMap[iconName] || SwapOutlined;
-};
-
-// 获取图表配置
-const chartConfig = computed(() => {
-  // 从模块数据中找到图表配置
-  return props.moduleData.chart?.[0] || {};
-});
-
-// 初始化数据
-const initData = (data: any) => {
-  console.log('Initializing data with:', data);
-  // 从数据中获取第一个选择器的选项
-  // const rawOptions1 = getData(data, selectorConfig1.readFrom) || [];
-  options1.value = Array.isArray(selectorConfig1) ? selectorConfig1 : [selectorConfig1];
-  
-  // 从数据中获取第二个选择器的选项
-  // const rawOptions2 = getData(data, selectorConfig2.readFrom) || [];
-  options2.value = Array.isArray(selectorConfig2) ? selectorConfig2 : [selectorConfig2];
-  
-  // 设置默认选中项
-  if (options1.value.length > 0) {
-    selectedValue1.value = options1.value[0].value;
-    selectedLabel1.value = options1.value[0].label;
+  // 组件挂载时初始化一次
+  onMounted(() => {
+    initData();
+  });
+
+  // 初始化数据
+  const initData = () => {
+    // 从数据中获取第一个选择器的选项
+    options1.value = selectorConfig1.options || [];
+    // 从数据中获取第二个选择器的选项
+    options2.value = selectorConfig2.options || [];
+
+    if (props.data) {
+      rawChartData.value = getData(props.data, chartConfig.readFrom, chartConfig.parser);
+    }
+  };
+
+  // 处理第一个下拉框选择
+  const handleSelect1 = (info: { key: string | number }) => {
+    const key = String(info.key);
+    selectedValue1.value = key;
+    const selectedItem = options1.value.find((item) => item.value === key);
+    if (selectedItem) {
+      selectedLabel1.value = selectedItem.label;
+    }
+  };
+
+  // 处理第二个下拉框选择
+  const handleSelect2 = (info: { key: string | number }) => {
+    const key = String(info.key);
+    selectedValue2.value = key;
+    const selectedItem = options2.value.find((item) => item.value === key);
+    if (selectedItem) {
+      selectedLabel2.value = selectedItem.label;
+    }
+  };
+
+  // 根据两个选择器的值过滤图表数据
+  const chartData = computed(() => {
+    // 如果没有原始数据，直接返回空
+    if (!rawChartData.value.length) return [];
+
+    // 过滤逻辑：如果选择了值则过滤，未选择则不过滤对应条件
+    return rawChartData.value.filter((item: any) => {
+      const matchFirst = selectedValue1.value ? item.deviceType === selectedValue1.value : true;
+
+      const matchSecond = selectedValue2.value ? item.deviceId === selectedValue2.value : true;
+
+      return matchFirst && matchSecond;
+    });
+  });
+  // 监听数据变化，重新初始化
+  watch(
+    () => props.data,
+    (newData) => {
+      initData();
+      nextTick(() => {
+        console.log(chartData.value, '更新后的chartData');
+      });
+    },
+    { immediate: true }
+  );
+</script>
+
+<style scoped>
+  @import '/@/design/theme.less';
+
+  .selector-dual-chart {
+    height: 100%;
   }
-  
-  if (options2.value.length > 0) {
-    selectedValue2.value = options2.value[0].value;
-    selectedLabel2.value = options2.value[0].label;
+
+  .costume-header {
+    height: 30px;
+    background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
   }
-};
-
-// 处理第一个下拉框选择
-const handleSelect1 = (info: { key: string | number }) => {
-  const key = String(info.key);
-  selectedValue1.value = key;
-  const selectedItem = options1.value.find(item => item.value === key);
-  if (selectedItem) {
-    selectedLabel1.value = selectedItem.label;
+
+  .costume-header_left {
+    border-left: 3px solid;
+    border-right: 3px solid;
+    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+    border-image-slice: 1;
   }
-};
-
-// 处理第二个下拉框选择
-const handleSelect2 = (info: { key: string | number }) => {
-  const key = String(info.key);
-  selectedValue2.value = key;
-  const selectedItem = options2.value.find(item => item.value === key);
-  if (selectedItem) {
-    selectedLabel2.value = selectedItem.label;
+
+  .chart-container {
+    width: 100%;
+    overflow: hidden;
   }
-};
-
-// 根据两个选择器的值过滤图表数据
-const filteredChartData = computed(() => {
-  if (!props.data) return [];
-  
-  // 示例：同时满足两个选择器的筛选条件
-  // return props.data.filter((item: any) => {
-  //   return item[selectorConfig1.basis] === selectedValue1.value &&
-  //          item[selectorConfig2.basis] === selectedValue2.value;
-  // });
-});
-
-// 监听数据变化，重新初始化
-watch(
-  () => props.data,
-  (newData) => {
-    initData(newData);
-  },
-  { immediate: true }
-);
-
-// 监听选择变化，更新图表数据
-watch(
-  [() => selectedValue1.value, () => selectedValue2.value],
-  () => {
-    // emit('update:chartData', filteredChartData.value);
+
+  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    color: #fff;
   }
-);
-</script>
 
-<style scoped>
-@import '/@/design/theme.less';
-
-.selector-dual-chart {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.costume-header {
-  height: 30px;
-  background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
-}
-
-.costume-header_left {
-  border-left: 3px solid;
-  border-right: 3px solid;
-  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-  border-image-slice: 1;
-}
-
-.chart-container {
-  width: 100%;
-  overflow: hidden;
-}
-
-::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-  color: #fff;
-}
-
-::v-deep .zxm-select-arrow {
-  color: #fff;
-}
-
-::v-deep .zxm-select-selection-item {
-  color: #fff !important;
-}
-
-::v-deep .zxm-select-selection-placeholder {
-  color: #fff !important;
-}
-</style>
+  ::v-deep .zxm-select-arrow {
+    color: #fff;
+  }
+
+  ::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+  }
+
+  ::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+  }
+</style>

src/views/vent/home/configurable/configurable.api.ts

@@ -9,6 +9,7 @@ enum Api {
   getBDDustData = '/monitor/disaster/getDisDustHome',
   getBDFireData = '/monitor/disaster/getDisFireHome',
   getDeviceSys = '/ventanaly-device/monitor/system',
+  getAlarmRecord = '/ventanaly-device/safety/ventanalyAlarmLog/sysLinkDevAlarmLog',
 }
 
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
@@ -227,10 +228,24 @@ export const getDeviceSys = (params) => {
     );
   }
   return (cache.get(key) as Promise<any>).then((res) => {
-    console.log('getDeviceSys', res);
     return res;
   });
-}
+};
+
+export const getAlarmRecord = (params) => {
+  const key = `${Api.getAlarmRecord}?${JSON.stringify(params)}`;
+  if (!cache.has(key)) {
+    cache.set(
+      key,
+      defHttp.post({ url: Api.getAlarmRecord, params }).finally(() => {
+        cache.delete(key);
+      })
+    );
+  }
+  return (cache.get(key) as Promise<any>).then((res) => {
+    return res;
+  });
+};
 
 export const getDisHome = (params) => {
   const key = `${Api.getDisHome}?${JSON.stringify(params)}`;

src/views/vent/home/configurable/configurable.data.tashan.ts

@@ -1,7 +1,6 @@
 import type { Config } from '../../deviceManager/configurationTable/types';
 
 export const testConfigTSFire: Config[] = [
-
   // 1. 采空区基本信息（左上）
   {
     deviceType: 'goafsInfo',
@@ -49,7 +48,7 @@ export const testConfigTSFire: Config[] = [
             {
               label: '采空区管理',
               value: '${goafManage}',
-            }
+            },
           ],
         },
       ],
@@ -61,10 +60,10 @@ export const testConfigTSFire: Config[] = [
       preset: [],
     },
     showStyle: {
-    size: 'width:440px;height:250px;',
-    version: '原版',
-    position: 'top:70px;left:10px;',
-    headerPosition: 'centerBottom',
+      size: 'width:440px;height:250px;',
+      version: '原版',
+      position: 'top:70px;left:10px;',
+      headerPosition: 'centerBottom',
     },
   },
   // 2. 矿用自动喷洒系统（左中）
@@ -99,8 +98,8 @@ export const testConfigTSFire: Config[] = [
           },
           {
             name: 'board',
-            basis: '60%'
-          }
+            basis: '60%',
+          },
         ],
       },
       board: [
@@ -124,7 +123,7 @@ export const testConfigTSFire: Config[] = [
             {
               label: '液位计',
               value: '液位超限',
-            }
+            },
           ],
         },
       ],
@@ -137,12 +136,12 @@ export const testConfigTSFire: Config[] = [
       preset: [
         {
           readFrom: 'select_cs',
-          setLabelConfig :{
-            selectL:'请选择...',
-            switchL:['开启','关闭'],
-            switchL1:'进料泵',
-            switchL2:'注浆泵'
-          }
+          setLabelConfig: {
+            selectL: '请选择...',
+            switchL: ['开启', '关闭'],
+            switchL1: '进料泵',
+            switchL2: '注浆泵',
+          },
         },
       ],
       mock: {},
@@ -155,16 +154,16 @@ export const testConfigTSFire: Config[] = [
   },
   // 3. 光纤测温系统（左下）
   {
-    deviceType: 'fiber',
+    deviceType: 'pdArray',
     moduleName: '光纤测温系统',
     pageType: 'ts_fire',
     moduleData: {
       header: {
         show: true,
-        readFrom: 'deviceInfo.fiber',
+        readFrom: '',
         selector: {
           show: true,
-          value: '${strname}',
+          value: '${systemname}',
         },
         slot: {
           show: false,
@@ -179,23 +178,23 @@ export const testConfigTSFire: Config[] = [
       layout: {
         direction: 'column',
         items: [
-        {
-        name: 'chart',
-        basis: '100%',
-        },
+          {
+            name: 'chart',
+            basis: '100%',
+          },
         ],
       },
       chart: [
         {
           type: 'line_smooth',
-          readFrom: 'arrayFiber',
+          readFrom: 'deviceInfo.fiber.datalist',
           legend: { show: false },
           xAxis: [{ show: true }],
           yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
           series: [
             {
               label: '${strinstallpos}',
-              readFrom: 'fibreTemperatureArr',
+              readFrom: 'readData.fibreTemperature',
               xprop: 'pos',
               yprop: 'value',
             },
@@ -243,8 +242,8 @@ export const testConfigTSFire: Config[] = [
         direction: 'row',
         items: [
           {
-          name: 'table',
-          basis: '100%',
+            name: 'table',
+            basis: '100%',
           },
         ],
       },
@@ -259,28 +258,26 @@ export const testConfigTSFire: Config[] = [
           columns: [
             {
               name: '煤层',
-              prop: '${mc}',
+              prop: 'mc',
             },
             {
               name: '自燃倾向性',
-              prop: '${zrqxx}',
+              prop: 'zrqxx',
             },
             {
               name: '最短发火期',
-              prop: '${zdfhq}',
+              prop: 'zdfhq',
             },
             {
               name: '自燃倾向等级',
-              prop: '${zrqxxdj}',
-            }
+              prop: 'zrqxxdj',
+            },
           ],
         },
       ],
       list: [],
       complex_list: [],
       preset: [],
-      mock: {
-      },
     },
     showStyle: {
       size: 'width:440px;height:200px;',
@@ -299,9 +296,9 @@ export const testConfigTSFire: Config[] = [
       layout: {
         direction: 'column',
         items: [
-          { 
-            name: 'partition', 
-            basis: 'auto' ,
+          {
+            name: 'partition',
+            basis: 'auto',
             overflow: false,
           },
           {
@@ -309,36 +306,36 @@ export const testConfigTSFire: Config[] = [
             basis: 'auto',
             overflow: false,
           },
-          { 
-            name: 'partition', 
-            basis: 'auto' ,
+          {
+            name: 'partition',
+            basis: 'auto',
             overflow: false,
           },
-          { 
-            name: 'board', 
-            basis: 'auto' ,
+          {
+            name: 'board',
+            basis: 'auto',
             overflow: false,
           },
-          { 
-            name: 'partition', 
-            basis: 'auto' ,
+          {
+            name: 'partition',
+            basis: 'auto',
             overflow: false,
           },
-          { 
-            name: 'board', 
+          {
+            name: 'board',
             basis: 'auto',
             overflow: false,
           },
-          { 
-            name: 'partition', 
+          {
+            name: 'partition',
             basis: 'auto',
             overflow: false,
           },
-          { 
-            name: 'board', 
+          {
+            name: 'board',
             basis: 'auto',
             overflow: false,
-          }
+          },
         ],
       },
       table: [],
@@ -347,7 +344,7 @@ export const testConfigTSFire: Config[] = [
           type: 'N',
           readFrom: '',
           layout: 'label-top',
-            items: [
+          items: [
             {
               label: '流量',
               value: '${cumulativeFlow}',
@@ -363,7 +360,7 @@ export const testConfigTSFire: Config[] = [
             {
               label: '氮含量',
               value: '${nitrogenContent}',
-            }
+            },
           ],
         },
         {
@@ -382,7 +379,7 @@ export const testConfigTSFire: Config[] = [
             {
               label: '油压',
               value: '0.99',
-            }
+            },
           ],
         },
         {
@@ -401,7 +398,7 @@ export const testConfigTSFire: Config[] = [
             {
               label: '油压',
               value: '0.99',
-            }
+            },
           ],
         },
         {
@@ -420,9 +417,9 @@ export const testConfigTSFire: Config[] = [
             {
               label: '油压',
               value: '0.99',
-            }
+            },
           ],
-        }
+        },
       ],
       chart: [],
       gallery: [],
@@ -436,28 +433,28 @@ export const testConfigTSFire: Config[] = [
           readFrom: '',
           layout: 'icon-pre',
           label: '制氮机',
-          icon:'/src/assets/images/home-container/configurable/tashanhome/partition-icon-1.png'
+          icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-1.png',
         },
         {
           type: 'A',
           readFrom: '',
           layout: 'icon-pre',
           label: '风压机#1',
-          icon:'/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png'
+          icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png',
         },
         {
           type: 'A',
           readFrom: '',
           layout: 'icon-pre',
           label: '风压机#2',
-          icon:'/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png'
+          icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png',
         },
         {
           type: 'A',
           readFrom: '',
           layout: 'icon-pre',
           label: '风压机#3',
-          icon:'/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png'
+          icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png',
         },
       ],
       mock: {},
@@ -470,21 +467,21 @@ export const testConfigTSFire: Config[] = [
   },
   // 6. 采空区密闭监测系统（右下）
   {
-    deviceType: 'pdArray',
+    deviceType: 'goafMonitoring',
     moduleName: '采空区密闭监测系统',
     pageType: 'ts_fire',
     moduleData: {
       header: {
-      show: false,
-      readFrom: '',
-      selector: {
-        show: true,
-        value: '${systemname}',
-      },
-      slot: {
         show: false,
-        value: '',
-      },
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
       },
       background: {
         show: false,
@@ -500,126 +497,127 @@ export const testConfigTSFire: Config[] = [
           },
         ],
       },
-      chart: [
-        {
-          type: 'line_smooth',
-          readFrom: 'mockChart',
-          legend: { show: false },
-          xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
-          series: [
-            {
-              label: '',
-              readFrom: 'seriesData',
-              xprop: 'pos',
-              yprop: 'value',
-            },
-          ],
-        },
-      ],
+      chart: [],
       gallery: [],
       gallery_list: [],
       table: [],
       list: [],
       complex_list: [],
       preset: [
-        // {
-        //   readFrom: '',
-        //   selectorConfig1: {
-        //     options:[
-        //       {
-        //         value: 'o2',
-        //         label: '氧气',
-        //       },
-        //       {
-        //         value: 'co',
-        //         label: '一氧化碳',
-        //       }
-        //     ]
-
-        //   },
-        //   selectorConfig2: {
-        //     options:[
-        //       {
-        //         value: '1',
-        //         label: '工作面1',
-        //       },
-        //       {
-        //         value: '1',
-        //         label: '工作面2',
-        //       }
-        //     ],
-        //   }
-        // },
+        {
+          readFrom: '',
+          selectorConfig1: {
+            options: [
+              {
+                value: 'o2',
+                label: '氧气',
+              },
+              {
+                value: 'co',
+                label: '一氧化碳',
+              },
+            ],
+          },
+          selectorConfig2: {
+            options: [
+              {
+                value: '1',
+                label: '工作面1',
+              },
+              {
+                value: '2',
+                label: '工作面2',
+              },
+            ],
+          },
+          chartConfig: {
+            type: 'line_smooth',
+            readFrom: 'mockChart',
+            legend: { show: true },
+            xAxis: [{ show: true }],
+            yAxis: [{ show: true, name: '', position: 'left' }],
+            series: [
+              {
+                label: '${label}',
+                readFrom: 'seriesData',
+                xprop: 'pos',
+                yprop: 'value',
+              },
+            ],
+          },
+        },
       ],
-      mock:{
-        // mockChart:[
-        //   {
-        //     deviceType:'o2',
-        //     deviceId:'1',
-        //     seriesData:[
-        //       { pos: '0', value: 10 },
-        //       { pos: '10', value: 12 },
-        //       { pos: '20', value: 11 },
-        //       { pos: '30', value: 13 },
-        //       { pos: '40', value: 14 },
-        //       { pos: '50', value: 16 },
-        //       { pos: '60', value: 15 },
-        //       { pos: '70', value: 17 },
-        //       { pos: '80', value: 18 },
-        //       { pos: '90', value: 19 },
-        //     ]
-        //   },
-        //   {
-        //     deviceType:'co',
-        //     deviceId:'2',
-        //     seriesData:[
-        //       { pos: '0', value: 30 },
-        //       { pos: '10', value: 32 },
-        //       { pos: '20', value: 31 },
-        //       { pos: '30', value: 33 },
-        //       { pos: '40', value: 34 },
-        //       { pos: '50', value: 36 },
-        //       { pos: '60', value: 35 },
-        //       { pos: '70', value: 37 },
-        //       { pos: '80', value: 38 },
-        //       { pos: '90', value: 39 },
-        //     ]
-        //   },
-        //   {
-        //     deviceType:'o2',
-        //     deviceId:'1',
-        //     seriesData:[
-        //       { pos: '0', value: 40 },
-        //       { pos: '10', value: 42 },
-        //       { pos: '20', value: 41 },
-        //       { pos: '30', value: 43 },
-        //       { pos: '40', value: 44 },
-        //       { pos: '50', value: 46 },
-        //       { pos: '60', value: 45 },
-        //       { pos: '70', value: 47 },
-        //       { pos: '80', value: 48 },
-        //       { pos: '90', value: 49 },
-        //     ]
-        //   },
-        //   {
-        //     deviceType:'co',
-        //     deviceId:'2',
-        //     seriesData:[
-        //       { pos: '0', value: 60 },
-        //       { pos: '10', value: 62 },
-        //       { pos: '20', value: 61 },
-        //       { pos: '30', value: 63 },
-        //       { pos: '40', value: 64 },
-        //       { pos: '50', value: 66 },
-        //       { pos: '60', value: 65 },
-        //       { pos: '70', value: 67 },
-        //       { pos: '80', value: 68 },
-        //       { pos: '90', value: 69 },
-        //     ]
-        //   }
-
-        // ]
+      mock: {
+        mockChart: [
+          {
+            label: '工作面1氧气',
+            deviceType: 'o2',
+            deviceId: '1',
+            seriesData: [
+              { pos: '0', value: 21 },
+              { pos: '10', value: 21 },
+              { pos: '20', value: 21 },
+              { pos: '30', value: 21 },
+              { pos: '40', value: 21 },
+              { pos: '50', value: 21 },
+              { pos: '60', value: 21 },
+              { pos: '70', value: 21 },
+              { pos: '80', value: 21 },
+              { pos: '90', value: 21 },
+            ],
+          },
+          {
+            label: '工作面1一氧化碳',
+            deviceType: 'co',
+            deviceId: '1',
+            seriesData: [
+              { pos: '0', value: 11 },
+              { pos: '10', value: 11 },
+              { pos: '20', value: 11 },
+              { pos: '30', value: 11 },
+              { pos: '40', value: 11 },
+              { pos: '50', value: 11 },
+              { pos: '60', value: 11 },
+              { pos: '70', value: 11 },
+              { pos: '80', value: 11 },
+              { pos: '90', value: 11 },
+            ],
+          },
+          {
+            label: '工作面2氧气',
+            deviceType: 'o2',
+            deviceId: '2',
+            seriesData: [
+              { pos: '0', value: 25 },
+              { pos: '10', value: 25 },
+              { pos: '20', value: 25 },
+              { pos: '30', value: 25 },
+              { pos: '40', value: 25 },
+              { pos: '50', value: 25 },
+              { pos: '60', value: 25 },
+              { pos: '70', value: 25 },
+              { pos: '80', value: 25 },
+              { pos: '90', value: 25 },
+            ],
+          },
+          {
+            label: '工作面2一氧化碳',
+            deviceType: 'co',
+            deviceId: '2',
+            seriesData: [
+              { pos: '0', value: 15 },
+              { pos: '10', value: 15 },
+              { pos: '20', value: 15 },
+              { pos: '30', value: 15 },
+              { pos: '40', value: 15 },
+              { pos: '50', value: 15 },
+              { pos: '60', value: 15 },
+              { pos: '70', value: 15 },
+              { pos: '80', value: 15 },
+              { pos: '90', value: 15 },
+            ],
+          },
+        ],
       },
     },
     showStyle: {
@@ -658,7 +656,6 @@ export const testConfigTSFire: Config[] = [
             name: 'table',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -676,7 +673,8 @@ export const testConfigTSFire: Config[] = [
             { name: '类型', prop: 'warnType' },
             { name: '值', prop: 'nowVal' },
           ],
-        },],
+        },
+      ],
       list: [],
       complex_list: [],
       preset: [],
@@ -709,7 +707,7 @@ export const testConfigTSFire: Config[] = [
             warnLevel: '低风险',
             warnType: '乙烷',
             nowVal: '0ppm',
-          }
+          },
         ],
       },
     },
@@ -749,7 +747,6 @@ export const testConfigTSFire: Config[] = [
             name: 'table',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -767,7 +764,8 @@ export const testConfigTSFire: Config[] = [
             { name: '类型', prop: 'warnType' },
             { name: '值', prop: 'nowVal' },
           ],
-        },],
+        },
+      ],
       list: [],
       complex_list: [],
       preset: [],
@@ -800,7 +798,7 @@ export const testConfigTSFire: Config[] = [
             warnLevel: '低风险',
             warnType: '乙烷',
             nowVal: '0ppm',
-          }
+          },
         ],
       },
     },
@@ -840,7 +838,6 @@ export const testConfigTSFire: Config[] = [
             name: 'table',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -858,7 +855,8 @@ export const testConfigTSFire: Config[] = [
             { name: '类型', prop: 'warnType' },
             { name: '值', prop: 'nowVal' },
           ],
-        },],
+        },
+      ],
       list: [],
       complex_list: [],
       preset: [],
@@ -891,7 +889,7 @@ export const testConfigTSFire: Config[] = [
             warnLevel: '低风险',
             warnType: '乙烷',
             nowVal: '0ppm',
-          }
+          },
         ],
       },
     },
@@ -900,5 +898,5 @@ export const testConfigTSFire: Config[] = [
       version: '原版',
       position: 'bottom:8px;left:470px',
     },
-  }
-];
+  },
+];

src/views/vent/home/configurable/fireMine.vue

@@ -12,11 +12,9 @@
         <div>
           <img src="@/assets/images/home-container/configurable/minehome/znzjxt-icon.png" alt="智能注浆系统" />
         </div>
-        <div>
-          智能注浆系统
-        </div>
+        <div> 智能注浆系统 </div>
       </div>
-      <div class="center-info-content ">
+      <div class="center-info-content">
         <div class="center-info-block left">
           <img src="@/assets/images/home-container/configurable/minehome/jcqy-icon.png" alt="监测区域" />
           <span>监测区域</span>
@@ -34,15 +32,13 @@
         <div>
           <img src="@/assets/images/home-container/configurable/minehome/znzdxt-icon.png" alt="智能注氮系统" />
         </div>
-        <div>
-          智能注氮系统
-        </div>
+        <div> 智能注氮系统 </div>
       </div>
     </div>
     <!-- 渲染所有模块 -->
     <ModuleMine
       v-for="cfg in cfgs"
-       :key="cfg.deviceType + cfg.moduleName"
+      :key="cfg.deviceType + cfg.moduleName"
       :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
@@ -65,177 +61,169 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleMine from './components/ModuleMine.vue';
-import ModuleBDDual from './components/ModuleBDDual.vue';
-import NewNav from './components/originalNew/NewNavFire.vue';
-import { getDisHome } from './configurable.api';
-import { testConfigMineFire } from './configurable.data.mine';
+  import { computed, onMounted, onUnmounted } from 'vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleMine from './components/ModuleMine.vue';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
+  import NewNav from './components/originalNew/NewNavFire.vue';
+  import { getDisHome } from './configurable.api';
+  import { testConfigMineFire } from './configurable.data.mine';
 
-const cfgs = computed(() =>
-  configs.value.filter((_, index) => index !== 6 && index !== 7)
-);
-const cfgA = computed<any>(() =>
-  configs.value[6]
-);
-const cfgB = computed<any>(() =>
-  configs.value[7]
-);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
-let interval: ReturnType<typeof setInterval> | undefined;
+  const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7));
+  const cfgA = computed<any>(() => configs.value[6]);
+  const cfgB = computed<any>(() => configs.value[7]);
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
+  let interval: ReturnType<typeof setInterval> | undefined;
 
-onMounted(() => {
-  fetchConfigs('mine_fire').then(() => {
-    configs.value = testConfigMineFire;
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
+  onMounted(() => {
+    fetchConfigs('mine_fire').then(() => {
+      configs.value = testConfigMineFire;
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      }).then(updateData);
+    });
+    interval = setInterval(() => {
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      }).then(updateData);
+    }, 2000);
   });
-  interval = setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
-function redirectTo(url) {
-  window.open(url);
-}
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
 
-.company-home {
-  --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
-  --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
-  --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
-  --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: var(--image-bg) no-repeat center;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
 
-  .top-bg {
+  .company-home {
+    --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
+    --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
+    --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
+    --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
     width: 100%;
-    height: 73px;
-    background: var(--image-fire-title) no-repeat top;
-    position: absolute;
-    z-index: 1;
-    ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-unactive{
-      margin-top: 0;
-    }
-    ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-active{
-      margin-top: 0;
-    }
-    ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-unactive{
-      margin-top: 0;
-    }
-    ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-active{
-      margin-top: 0;
-    }
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: var(--image-bg) no-repeat center;
 
-  }
-  // 顶部中间样式块
-  .center-info-bar {
-    position: absolute;
-    top: 80px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 900px;
-    height: 90px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-    background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
-    padding: 0 20px;
-    gap: 15px;
-
-    .center-info-btn {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: #fff;
-      font-size: 10px;
-      font-family: 'douyuFont';
-      font-weight: bold;
-      cursor: pointer;
-      user-select: none;
-      width: 110px;
-      margin: 0 0 10px 0;
-      img {
-        width: 60px;
+    .top-bg {
+      width: 100%;
+      height: 73px;
+      background: var(--image-fire-title) no-repeat top;
+      position: absolute;
+      z-index: 1;
+      ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-unactive {
+        margin-top: 0;
+      }
+      ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-active {
+        margin-top: 0;
+      }
+      ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-unactive {
+        margin-top: 0;
+      }
+      ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-active {
+        margin-top: 0;
       }
     }
-
-    .center-info-content {
+    // 顶部中间样式块
+    .center-info-bar {
+      position: absolute;
+      top: 80px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 900px;
+      height: 90px;
       display: flex;
       align-items: center;
       justify-content: center;
+      z-index: 2;
+      background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
+      padding: 0 20px;
+      gap: 15px;
 
-      .center-info-block {
-        color: #ffffff;
-        font-size: 18px;
-        img{
-          margin: 0 5px;
-        }
-      }
-      .center-info-risk {
+      .center-info-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         color: #fff;
-        font-weight: bolder;
-        text-align: center;
-        .risk-level {
-          color: #4EABD9;
-          font-size: 24px;
-          font-weight: bold;
-          letter-spacing: 8px;
-          margin: 10px 0;
+        font-size: 10px;
+        font-family: 'douyuFont';
+        font-weight: bold;
+        cursor: pointer;
+        user-select: none;
+        width: 110px;
+        margin: 0 0 10px 0;
+        img {
+          width: 60px;
         }
       }
 
-      .left {
-        margin-right: 45px;
+      .center-info-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-      }
-      .right {
-        margin-left: 45px;
+        .center-info-block {
+          color: #ffffff;
+          font-size: 18px;
+          img {
+            margin: 0 5px;
+          }
+        }
+        .center-info-risk {
+          color: #fff;
+          font-weight: bolder;
+          text-align: center;
+          .risk-level {
+            color: #4eabd9;
+            font-size: 24px;
+            font-weight: bold;
+            letter-spacing: 8px;
+            margin: 10px 0;
+          }
+        }
+
+        .left {
+          margin-right: 45px;
+        }
+        .right {
+          margin-left: 45px;
+        }
       }
     }
-  }
 
-  ::v-deep .dane-bd {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-    &.dane-w {
-      background-image: var(--image-common-border3);
-    }
-    .dane-title {
-      justify-content: space-around;
-      padding: 0 50px 0 0;
+    ::v-deep .dane-bd {
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
+      &.dane-w {
+        background-image: var(--image-common-border3);
+      }
+      .dane-title {
+        justify-content: space-around;
+        padding: 0 50px 0 0;
 
-      .common-navL {
-        font-size: 14px;
-        font-weight: bold;
-        font-family: 'douyuFont';
+        .common-navL {
+          font-size: 14px;
+          font-weight: bold;
+          font-family: 'douyuFont';
+        }
+      }
+      .dane-content {
+        border: none;
+        background: none;
+        padding: 5px 35px 10px 10px;
       }
-    }
-    .dane-content {
-      border: none;
-      background: none;
-      padding: 5px 35px 10px 10px;
     }
   }
-}
 </style>

src/views/vent/home/configurable/fireTS.vue

@@ -9,47 +9,48 @@
     <div class="center-info-bar">
       <div class="left-info-content">
         <div class="left-block block1">
-          <div class="info-value">{{fireSgWarnInfo.sgCoTbAlarmAddress}}</div>
+          <div class="info-value">{{ fireSgWarnInfo.sgCoTbAlarmAddress }}</div>
           <div class="info-label">突变预警</div>
         </div>
         <div class="left-block block2">
-          <div class="info-value">{{fireSgWarnInfo.nyAlarmLevelStr}}</div>
+          <div class="info-value">{{ fireSgWarnInfo.nyAlarmLevelStr }}</div>
           <div class="info-label">煤自燃氧化阶段</div>
         </div>
         <div class="left-block block3">
-          <div class="info-value">{{fireSgWarnInfo.sgMaxTemp}}</div>
+          <div class="info-value">{{ fireSgWarnInfo.sgMaxTemp }}</div>
           <div class="info-label">最高温度</div>
         </div>
       </div>
       <div class="center-info-content">
-        <div class="info-value">{{fireSgWarnInfo.aqfxLevelStr}}</div>
+        <div class="info-value">{{ fireSgWarnInfo.aqfxLevelStr }}</div>
         <div class="info-label">火灾安全等级</div>
       </div>
       <div class="right-info-content">
         <div class="right-block block1">
-          <div class="info-value">{{fireSgWarnInfo.sgZbAlarmNum}}</div>
+          <div class="info-value">{{ fireSgWarnInfo.sgZbAlarmNum }}</div>
           <div class="info-label">指标预警</div>
         </div>
         <div class="right-block block2">
-          <div class="info-value">{{fireSgWarnInfo.yjjbLevelStr}}</div>
+          <div class="info-value">{{ fireSgWarnInfo.yjjbLevelStr }}</div>
           <div class="info-label">预警等级</div>
         </div>
         <div class="right-block block3">
-          <div class="info-value">{{fireSgWarnInfo.sgSwAlarmAddress}}</div>
+          <div class="info-value">{{ fireSgWarnInfo.sgSwAlarmAddress }}</div>
           <div class="info-label">升温预警</div>
         </div>
       </div>
     </div>
     <!-- 渲染所有模块 -->
-    <ModuleCommon 
-      v-for="cfg in cfgs" 
+    <ModuleCommon
+      v-for="cfg in cfgs"
       :key="cfg.deviceType + cfg.moduleName"
-      :show-style="cfg.showStyle" 
+      :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName" 
-      :device-type="cfg.deviceType" 
-      :data="data" 
-      :visible="true" />
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
     <ModuleCommonDual
       v-if="cfgA && cfgB"
       :show-style="cfgA.showStyle"
@@ -69,253 +70,262 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import { getDisHome,getDeviceSys } from './configurable.api';
-import { testConfigTSFire } from './configurable.data.tashan';
-import ModuleCommon from './components/ModuleCommon.vue';
-import ModuleCommonDual from './components/ModuleCommonDual.vue';
+  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import { getAlarmRecord, getDeviceSys } from './configurable.api';
+  import { testConfigTSFire } from './configurable.data.tashan';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  import ModuleCommonDual from './components/ModuleCommonDual.vue';
 
-const cfgs = computed(() =>
-  configs.value.filter((_, index) => index !== 6 && index !== 7 && index !== 8)
-);
-const cfgA = computed<any>(() =>
-  configs.value[6]
-);
-const cfgB = computed<any>(() =>
-  configs.value[7]
-);
-const cfgC = computed<any>(() =>
-  configs.value[8]
-);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('回采工作面智能管控');
-let interval: ReturnType<typeof setInterval> | undefined;
-const commonTitle = "实时监测与预警"
-const fireSgWarnInfo = ref ({
-  aqfxLevelStr: "-",
-  nyAlarmLevel: 0,
-  nyAlarmLevelStr: "-",
-  sgCoTbAlarmAddress: "-",
-  sgMaxTemp: '-',
-  sgSwAlarmAddress: "-",
-  sgZbAlarmNum: 0,
-  yjjbLevelStr: "-"
-});
-onMounted(() => {
-  fetchConfigs('ts_fire').then(() => {
-    configs.value = testConfigTSFire;
-    getDeviceSys({
-      devicetype: 'sys',
-      systemID: '1955807282207465474',
-      type: 'all'
-    }).then((res)=>{
-      const processedRes = handleData(res);
-      updateData(processedRes)
-    });;
+  const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7 && index !== 8));
+  const cfgA = computed<any>(() => configs.value[6]);
+  const cfgB = computed<any>(() => configs.value[7]);
+  const cfgC = computed<any>(() => configs.value[8]);
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('回采工作面智能管控');
+  let interval: ReturnType<typeof setInterval> | undefined;
+  const commonTitle = '实时监测与预警';
+  const fireSgWarnInfo = ref({
+    aqfxLevelStr: '-',
+    nyAlarmLevel: 0,
+    nyAlarmLevelStr: '-',
+    sgCoTbAlarmAddress: '-',
+    sgMaxTemp: '-',
+    sgSwAlarmAddress: '-',
+    sgZbAlarmNum: 0,
+    yjjbLevelStr: '-',
   });
-  interval = setInterval(() => {
-    getDeviceSys({
-      devicetype: 'sys',
-      systemID: '1955807282207465474',
-      type: 'all'
-    }).then((res)=>{
-      const processedRes = handleData(res);
-      updateData(processedRes)
+  onMounted(() => {
+    fetchConfigs('ts_fire').then(() => {
+      configs.value = testConfigTSFire;
+      getDeviceSys({
+        devicetype: 'sys',
+        systemID: '1955807282207465474',
+        type: 'all',
+      }).then((res) => {
+        const processedRes = handleData(res);
+        getAlarmRecord({
+          sysId: '1955807282207465474',
+          devicekind: 'bundletube',
+          pageNo: '1',
+          pageSize: '10',
+        }).then((res) => {
+          processedRes.alarmLog = res.records || [];
+          updateData(processedRes);
+        });
+      });
     });
-  }, 2000);
-});
+    interval = setInterval(() => {
+      getDeviceSys({
+        devicetype: 'sys',
+        systemID: '1955807282207465474',
+        type: 'all',
+      }).then((res) => {
+        const processedRes = handleData(res);
+        updateData(processedRes);
+      });
+    }, 2000);
+  });
 
-const handleData = (res: any) => {
-  const processedData = { ...res };
-  fireSgWarnInfo.value = res?.fireSgWarnInfo || {};;
-  processedData.sysInfo.coalSpoCha = JSON.parse(`${res.sysInfo.coalSpoCha}` || '[]');
-  return processedData;
-};
+  const handleData = (res: any) => {
+    const processedData = { ...res };
+    fireSgWarnInfo.value = res?.fireSgWarnInfo || {};
+
+    if (res.sysInfo.coalSpoCha && typeof res.sysInfo.coalSpoCha === 'string') {
+      processedData.sysInfo.coalSpoCha = JSON.parse(`${res.sysInfo.coalSpoCha}` || '[]');
+    }
+    if (res.deviceInfo.fiber) {
+      // Example: process each item in datalist if needed
+      processedData.deviceInfo.fiber.datalist.forEach((item) => {
+        item.readData.fibreTemperature = JSON.parse(`${item.readData.fibreTemperature}` || '[]');
+      });
+      console.log(processedData.deviceInfo.fiber, '11111111111111111111111');
+    }
+    return processedData;
+  };
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
 
-.company-home {
-  --image-fire-title: url(/@/assets/images/vent/vent-header1.png);
-  --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
-  --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: #09172c;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
 
-  .top-bg {
+  .company-home {
+    --image-fire-title: url(/@/assets/images/vent/vent-header1.png);
+    --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
+    --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
     width: 100%;
-    height: 73px;
-    background: var(--image-fire-title) no-repeat top;
-    position: absolute;
-    z-index: 1;
-    .main-title {
-      height: 80px;
-      font-family: 'douyuFont';
-      font-size: 26px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0 0 10px 0;
-    }
-  }
-  // 顶部中间样式块
-  .center-info-bar {
+    height: 100%;
+    color: @white;
     position: relative;
-    top: 75px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 900px;
-    height: 160px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-bg.png') no-repeat center;
+    background: #09172c;
 
-    .center-info-content {
-      position: relative;
-      top: 15px;
-      background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-circle.png') no-repeat center;
-      width: 160px;
-      height: 160px;
-      text-align: center;
-      .info-value {
-        position: absolute;
-        top: 34%;
-        left: 50%;
-        transform: translateX(-50%);
+    .top-bg {
+      width: 100%;
+      height: 73px;
+      background: var(--image-fire-title) no-repeat top;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 80px;
         font-family: 'douyuFont';
-        font-size: 25px;
-        color: #2cffdd;
-      }
-      .info-label {
-        width: 100%;
-        position: absolute;
-        bottom: 25px;
-        font-size: 17px;
-        left: 50%;
-        transform: translateX(-50%);
+        font-size: 26px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 0 10px 0;
       }
     }
-    .left-info-content {
+    // 顶部中间样式块
+    .center-info-bar {
       position: relative;
-      text-align: right;
-      .left-block {
-        position: absolute;
-        width: 190px;
-        height: 55px;
-        background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg1.png') no-repeat right;
-        padding-right: 52px;
+      top: 75px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 900px;
+      height: 160px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-bg.png') no-repeat center;
+
+      .center-info-content {
+        position: relative;
+        top: 15px;
+        background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-circle.png') no-repeat center;
+        width: 160px;
+        height: 160px;
+        text-align: center;
         .info-value {
-          height: 28px;
-          line-height: 28px;
+          position: absolute;
+          top: 34%;
+          left: 50%;
+          transform: translateX(-50%);
           font-family: 'douyuFont';
-          font-size: 12px;
-          color: var(--vent-gas-primary-text);
+          font-size: 25px;
+          color: #2cffdd;
         }
         .info-label {
-          height: 28px;
-          line-height: 28px;
+          width: 100%;
+          position: absolute;
+          bottom: 25px;
+          font-size: 17px;
+          left: 50%;
+          transform: translateX(-50%);
         }
       }
-      .block1 {
-        top: -70px;
-        right: -5px;
-      }
-      .block2 {
-        top: -15px;
-        left: -280px;
-        background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg2.png') no-repeat right;
-        .info-value {
-          color: #2cffdd;
+      .left-info-content {
+        position: relative;
+        text-align: right;
+        .left-block {
+          position: absolute;
+          width: 190px;
+          height: 55px;
+          background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg1.png') no-repeat right;
+          padding-right: 52px;
+          .info-value {
+            height: 28px;
+            line-height: 28px;
+            font-family: 'douyuFont';
+            font-size: 12px;
+            color: var(--vent-gas-primary-text);
+          }
+          .info-label {
+            height: 28px;
+            line-height: 28px;
+          }
         }
-      }
-      .block3 {
-        top: 40px;
-        right: -5px;
-      }
-    }
-    .right-info-content {
-      position: relative;
-      .right-block {
-        position: absolute;
-        width: 190px;
-        height: 55px;
-        background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg1.png') no-repeat left;
-        padding-left: 52px;
-        .info-value {
-          height: 28px;
-          line-height: 28px;
-          font-family: 'douyuFont';
-          font-size: 12px;
-          color: var(--vent-gas-primary-text);
+        .block1 {
+          top: -70px;
+          right: -5px;
         }
-        .info-label {
-          height: 28px;
-          line-height: 28px;
+        .block2 {
+          top: -15px;
+          left: -280px;
+          background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg2.png') no-repeat right;
+          .info-value {
+            color: #2cffdd;
+          }
         }
-      }
-      .block1 {
-        top: -70px;
-        left: -5px;
-      }
-      .block2 {
-        top: -15px;
-        right: -280px;
-        background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg2.png') no-repeat left;
-        .info-value {
-          color: #2cffdd;
+        .block3 {
+          top: 40px;
+          right: -5px;
         }
       }
-      .block3 {
-        top: 40px;
-        left: -5px;
+      .right-info-content {
+        position: relative;
+        .right-block {
+          position: absolute;
+          width: 190px;
+          height: 55px;
+          background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg1.png') no-repeat left;
+          padding-left: 52px;
+          .info-value {
+            height: 28px;
+            line-height: 28px;
+            font-family: 'douyuFont';
+            font-size: 12px;
+            color: var(--vent-gas-primary-text);
+          }
+          .info-label {
+            height: 28px;
+            line-height: 28px;
+          }
+        }
+        .block1 {
+          top: -70px;
+          left: -5px;
+        }
+        .block2 {
+          top: -15px;
+          right: -280px;
+          background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg2.png') no-repeat left;
+          .info-value {
+            color: #2cffdd;
+          }
+        }
+        .block3 {
+          top: 40px;
+          left: -5px;
+        }
       }
     }
-  }
 
-  ::v-deep .dane-bd {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-    &.dane-w {
-      background-image: var(--image-common-border3);
-    }
-    .dane-title {
-      justify-content: space-around;
-      padding: 0 50px 0 0;
+    ::v-deep .dane-bd {
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
+      &.dane-w {
+        background-image: var(--image-common-border3);
+      }
+      .dane-title {
+        justify-content: space-around;
+        padding: 0 50px 0 0;
 
-      .common-navL {
-        font-size: 14px;
-        font-weight: bold;
-        font-family: 'douyuFont';
+        .common-navL {
+          font-size: 14px;
+          font-weight: bold;
+          font-family: 'douyuFont';
+        }
+      }
+      .dane-content {
+        border: none;
+        background: none;
+        padding: 10px 35px;
       }
     }
-    .dane-content {
-      border: none;
-      background: none;
-      padding: 10px 35px;
+    ::v-deep .table__content .table__content_list {
+      width: 95%;
+    }
+    ::v-deep .table__content .table__content_label {
+      width: 95%;
     }
-
-  }
-  ::v-deep .table__content .table__content_list {
-    width: 95%;  
-  }
-  ::v-deep .table__content .table__content_label {
-    width: 95%;
   }
-}
 </style>