[Feat 0000]塔山回采工作面智能管控页面修改

src/views/vent/deviceManager/configurationTable/types.ts

@@ -90,10 +90,12 @@ export interface ModuleData {
         | 'tabs'
         | 'blast_delta'
         | 'measure_detail'
-          | 'select_cs'
+        | 'select_cs'
         | 'qh_curve'
         | 'ai_chat'
-        | 'device_alarm';
+        | 'device_alarm'
+        | 'partition'
+        | 'selector_dual_chart';
       /** 分区大小 */
       basis: string;
       overflow?: boolean;
@@ -109,6 +111,7 @@ export interface ModuleData {
   tabs?: ModuleDataTabs[];
   preset?: ModuleDataPreset[];
   complex_list?: ModuleDataComplexList[];
+  partition?: ModuleDataPartition[];
   /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
   mock?: any;
   /** 如果模块需要跳转，可以在这里配置，部分类型的模块（保德）不支持 formatter 格式 */
@@ -331,3 +334,14 @@ export interface ModuleDataTabs extends ReadFrom {
     >;
   }[];
 }
+
+export interface ModuleDataPartition extends ReadFrom {
+  /** 展示分隔条的背景类型 */
+  type: 'A';
+  /** 展示分隔条布局，决定是 label 部分在前方或是 icon 在前方 */
+  layout: 'icon-pre' | 'label-pre';
+  /** 展示牌说明内容，formatter 格式 */
+  label: string;
+  /** 展示牌值内容，formatter 格式 */
+  icon: string;
+}

src/views/vent/home/configurable/components/ModuleCommonDual.vue

@@ -3,8 +3,9 @@
     <template #title>
       <div class="dual-title">
         <div class="title-left">
-          <div :class="{ deactived: index === 1, 'cursor-pointer': !!moduleDataA.to }" @click="index = 0">{{ moduleNameA }}</div>
-          <div :class="{ deactived: index === 0, 'cursor-pointer': !!moduleDataB.to }" @click="index = 1">{{ moduleNameB }}</div>
+          <div :class="{ deactived: index === 0, 'cursor-pointer': !!moduleDataA.to }" @click="index = 0">{{ moduleNameA }}</div>
+          <div :class="{ deactived: index === 1, 'cursor-pointer': !!moduleDataB.to }" @click="index = 1">{{ moduleNameB }}</div>
+          <div :class="{ deactived: index === 2, 'cursor-pointer': !!moduleDataC.to }" @click="index = 2">{{ moduleNameC }}</div>
         </div>
         <div class="title-center">{{ commonTitle }}</div>
       </div>
@@ -25,6 +26,13 @@
           :data="data"
           @select="selectedDataB = $event"
         />
+        <Header
+          v-if="index === 2"
+          :deviceType="deviceTypeC"
+          :moduleData="moduleDataC"
+          :data="data"
+          @select="selectedDataC = $event"
+        />
         <Content
           v-if="index === 0"
           :style="{ height: moduleDataA.header?.show ? 'calc(100% - 30px)' : '100%' }"
@@ -37,6 +45,12 @@
           :moduleData="moduleDataB"
           :data="selectedDataB"
         />
+        <Content
+          v-if="index === 2"
+          :style="{ height: moduleDataC.header?.show ? 'calc(100% - 30px)' : '100%' }"
+          :moduleData="moduleDataC"
+          :data="selectedDataC"
+        />
       </slot>
     </template>
   </ventBox1>
@@ -57,6 +71,9 @@ const props = defineProps<{
   moduleDataB: any;
   moduleNameB: string;
   deviceTypeB: string;
+  moduleDataC: any;
+  moduleNameC: string;
+  deviceTypeC: string;
   showStyle: any;
   visible: boolean;
   data: any;
@@ -68,6 +85,7 @@ const index = ref(0);
 
 const selectedDataA = ref();
 const selectedDataB = ref();
+const selectedDataC = ref();
 
 const style = computed(() => {
   const size = props.showStyle.size;
@@ -96,6 +114,11 @@ function redirectToB() {
   if (!to) return;
   openWindow(getFormattedText(selectedDataB.value, to));
 }
+function redirectToC() {
+  const { to } = props.moduleDataC;
+  if (!to) return;
+  openWindow(getFormattedText(selectedDataC.value, to));
+}
 </script>
 
 <style lang="less" scoped>
@@ -135,13 +158,13 @@ function redirectToB() {
       height: 100%;
       cursor: pointer;
       padding: 0 12px;
-      background: linear-gradient(to top, #2bafc6 0%, rgba(44, 255, 221, 0.1) 50%,rgba(44, 255, 221, 0) 90%);
+      color: #8087a1;
     }
   }
 
   .deactived {
-    background: none !important;
-    color: #8087a1;
+    color: #fff !important;
+    background: linear-gradient(to top, #2bafc6 0%, rgba(44, 255, 221, 0.1) 50%,rgba(44, 255, 221, 0) 90%);
   }
 }
 // @{theme-deepblue} {

src/views/vent/home/configurable/components/content.vue

@@ -97,6 +97,16 @@
           <MeasureDetail class="content__module" :show-title="false" :composite-data="config.data"
             :topconfig="config.config.topconfig" :btnconfig="config.config.btnconfig" />
         </template>
+        <template v-if="config.name === 'partition'">
+          <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
+        </template>
+        <template v-if="config.name === 'selector_dual_chart'">
+          <SelectorDualChart
+            :data="config.data"
+            :moduleData="props.moduleData"
+            :config="config"
+          />
+        </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
       </template>
@@ -137,6 +147,8 @@ import AIChat from '/@/components/AIChat/MiniChat.vue';
 import DeviceAlarm from './preset/DeviceAlarm.vue';
 import SelectCs from './preset/SelectCs.vue';
 import MiniBoardNew from './detail/MiniBoard-New.vue';
+import Partition from './detail/partition.vue';
+import SelectorDualChart from './preset/selectorDualChart.vue';
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 
@@ -185,9 +197,10 @@ const layoutConfig = computed(() => {
   const chart = clone(props.moduleData.chart) || [];
   const table = clone(props.moduleData.table) || [];
   const preset = clone(props.moduleData.preset) || [];
+  const partition = clone(props.moduleData.partition) || [];
 
   return layout.items.reduce((arr: any[], item) => {
-    console.log(item.name,'name---')
+    // console.log(item.name,'name---')
     switch (item.name) {
       case 'board': {
         const cfg = board.shift();
@@ -357,6 +370,19 @@ const layoutConfig = computed(() => {
         });
         break;
       }
+      case 'partition': {
+        const cfg = partition.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        // console.log(data, 'partition data-----------------------------------------------------------')
+        arr.push({
+          overflow: true,
+          ...item,
+          data,
+          ...cfg,
+        });
+        break;
+      }
       default: {
         const cfg = preset.shift();
         if (!cfg) break;
@@ -370,7 +396,7 @@ const layoutConfig = computed(() => {
         break;
       }
     }
-    console.log(arr,'arr---')
+    // console.log(arr,'arr---')
     return arr;
   }, []);
 });
@@ -384,6 +410,7 @@ const layoutConfig = computed(() => {
   // z-index: -2;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
 }
 
 .content__background {

src/views/vent/home/configurable/components/detail/partition.vue

@@ -0,0 +1,70 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="partition-block" :class="`partition-block_${type}`">
+      <slot name="icon">
+        <div class="partition-block__icon" :class="`partition-block__icon_${type}`" 
+        :style="{ backgroundImage: iconUrl ? `url(${icon})`: '' }">
+        </div>
+      </slot>
+      <slot name="label">
+        <div class="partition-block__label" :class="`partition-block__label_${type}`">
+          {{ label }}
+        </div>
+      </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, defineEmits, defineProps, withDefaults } from 'vue';
+const props = withDefaults(
+  defineProps<{
+    // 分隔条类型，类型为：'A' | 'B' 
+    type?: string;
+    // 分隔条内容
+    label: string;
+    // 分隔条图标
+    icon: string;
+  }>(),
+  {
+    type: 'A',
+    label: '分隔条',
+    icon: ''
+  }
+);
+// 处理 icon 路径，兼容静态资源
+const iconUrl = computed(() => {
+  if (!props.icon) return '';
+  if (props.icon.startsWith('/')) {
+    return props.icon;
+  }
+  return '/' + props.icon;
+});
+
+defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+
+.partition-block {
+  --image-partition-bg: url('/@/assets/images/home-container/configurable/tashanhome/partition-bg-a.png');
+  display: flex;
+  background: var(--image-partition-bg);
+  background-size: 100% 100%;
+  position: relative;
+  .partition-block__icon {
+    width: 14px;
+    height: 14px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin:3px 5px;
+  }
+}
+.partition-block_A {
+  height: 30px !important;
+  width: calc(100% - 30px)!important;
+  margin:5px 0 10px 20px;
+}
+
+
+
+</style>

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

@@ -0,0 +1,237 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="selector-dual-chart">
+    <!-- 双下拉框头部 -->
+    <div class="w-100% flex costume-header">
+      <!-- 第一个下拉框 -->
+      <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">
+            {{ selectedLabel1 }}
+          </div>
+          <CaretUpOutlined class="w-30px" v-if="visible1" />
+          <CaretDownOutlined class="w-30px" v-else />
+        </div>
+        <template #overlay>
+          <Menu :selected-keys="[selectorConfig1.options]" @click="handleSelect1">
+            <MenuItem v-for="item in selectorConfig1.options" :key="item.value" :title="item.label">
+              {{ item.label }}
+            </MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
+
+      <!-- 第二个下拉框 -->
+      <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">
+            {{ selectedLabel2 }}
+          </div>
+          <CaretUpOutlined class="w-30px" v-if="visible2" />
+          <CaretDownOutlined class="w-30px" v-else />
+        </div>
+        <template #overlay>
+          <Menu :selected-keys="[selectorConfig2.options]" @click="handleSelect2">
+            <MenuItem v-for="item in selectorConfig2.options" :key="item.value" :title="item.label">
+              {{ item.label }}
+            </MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
+    </div>
+
+    <!-- 图表内容区域 -->
+    <div class="chart-container h-calc(100% - 30px)">
+      <CustomChart 
+        class="content__module" 
+        :chart-config="config.chartConfig" 
+        :chart-data="filteredChartData" 
+      />
+    </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,
+    // 可以添加更多图标映射
+  };
+  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;
+  }
+  
+  if (options2.value.length > 0) {
+    selectedValue2.value = options2.value[0].value;
+    selectedLabel2.value = options2.value[0].label;
+  }
+};
+
+// 处理第一个下拉框选择
+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 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);
+  }
+);
+</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>

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

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

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

@@ -2,521 +2,903 @@ import type { Config } from '../../deviceManager/configurationTable/types';
 
 export const testConfigTSFire: Config[] = [
 
-// 1. 采空区基本信息（左上）
-{
-deviceType: 'goafsInfo',
-moduleName: '采空区基本信息',
-pageType: 'ts_fire',
-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: 'L',
-readFrom: '',
-layout: 'label-top',
-items: [
-{
-label: '所属煤层',
-value: '6煤',
-},
-{
-label: '煤层厚度',
-value: '2.62m',
-},
-{
-label: '煤层角度',
-value: '0°~10°',
-},
-{
-label: '最短发火期',
-value: '33天',
-},
-{
-label: '工作面长度',
-value: '303.69m',
-},
-{
-label: '采空区管理',
-value: '全部垮落',
-},
-],
-},
-],
-chart: [],
-gallery: [],
-gallery_list: [],
-table: [],
-complex_list: [],
-preset: [],
-},
-showStyle: {
-size: 'width:440px;height:250px;',
-version: '原版',
-position: 'top:70px;left:10px;',
-headerPosition: 'centerBottom',
-},
-},
-// 2. 矿用自动喷洒系统（左中）
-{
-deviceType: 'autoSpraySystem',
-moduleName: '矿用自动喷洒系统',
-pageType: 'ts_fire',
-moduleData: {
-header: {
-show: false,
-readFrom: '',
-selector: {
-show: false,
-value: '',
-},
-slot: {
-show: false,
-value: '',
-},
-},
-background: {
-show: false,
-type: 'video',
-link: '',
-},
-layout: {
-direction: 'column',
-items: [
-{
-name: 'select_cs',
-basis: '40%',
-},
-{
-name: 'board',
-basis: '60%'
-}
-],
-},
-board: [
-{
-type: 'M',
-readFrom: '',
-layout: 'val-top',
-items: [
-{
-label: '流量传感器#1',
-value: 'xxxxxx',
-},
-{
-label: '流量传感器#2',
-value: 'xxxxxx',
-},
-{
-label: '压力传感器',
-value: 'xxxxxx',
-},
-{
-label: '液位计',
-value: '液位超限',
-}
-],
-},],
-chart: [],
-gallery: [],
-gallery_list: [],
-table: [],
-list: [],
-complex_list: [],
-preset: [
-{
-readFrom: 'select_cs',
-setLabelConfig :{
-selectL:'请选择...',
-switchL:['开启','关闭'],
-switchL1:'进料泵',
-switchL2:'注浆泵'
-}
-},
-],
-mock: {},
-},
-showStyle: {
-size: 'width:440px;height:290px;',
-version: '原版',
-position: 'top:325px;left:10px;',
-},
-},
-// 3. 光纤测温系统（左下）
-{
-deviceType: 'pdArray',
-moduleName: '光纤测温系统',
-pageType: 'ts_fire',
-moduleData: {
-header: {
-show: true,
-readFrom: '',
-selector: {
-show: true,
-value: '${systemname}',
-},
-slot: {
-show: false,
-value: '',
-},
-},
-background: {
-show: false,
-type: 'video',
-link: '',
-},
-layout: {
-direction: 'column',
-items: [
-{
-name: 'chart',
-basis: '100%',
-},
-],
-},
-chart: [
-{
-type: 'line_smooth',
-readFrom: 'arrayFiber',
-legend: { show: false },
-xAxis: [{ show: true }],
-yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
-series: [
-{
-label: '${strinstallpos}',
-readFrom: 'fibreTemperatureArr',
-xprop: 'pos',
-yprop: 'value',
-},
-],
-},
-],
-gallery: [],
-gallery_list: [],
-table: [],
-list: [],
-complex_list: [],
-preset: [],
-},
-showStyle: {
-size: 'width:440px;height:270px;',
-version: '原版',
-position: 'bottom:8px;left:10px;',
-headerPosition: 'centerBottom',
-},
-},
-// 4. 可采煤层煤自燃特性（右上）
-{
-deviceType: 'coalFireFeature',
-moduleName: '开采煤层自燃发火特性',
-pageType: 'ts_fire',
-moduleData: {
-header: {
-show: false,
-readFrom: '',
-selector: {
-show: false,
-value: '',
-},
-slot: {
-show: false,
-value: '',
-},
-},
-background: {
-show: false,
-type: 'video',
-link: '',
-},
-layout: {
-direction: 'row',
-items: [
-{
-name: 'table',
-basis: '100%',
-},
-],
-},
-board: [],
-chart: [],
-gallery: [],
-gallery_list: [],
-table: [
-{
-type: 'A',
-readFrom: 'mockTable',
-columns: [
-{
-name: '煤层',
-prop: 'a',
-},
-{
-name: '自燃倾向性',
-prop: 'b',
-},
-{
-name: '最短发火期',
-prop: 'c',
-},
-{
-name: '煤层爆炸指数',
-prop: 'd',
-},
-],
-},
-],
-list: [],
-complex_list: [],
-preset: [],
-mock: {
-mockTable: [
-{
-a: '1煤',
-b: '自燃',
-c: '123天',
-d: '0%',
-},
-{
-a: '2煤',
-b: '自燃',
-c: '123天',
-d: '0%',
-},
-{
-a: '3煤',
-b: '自燃',
-c: '123天',
-d: '0%',
-},
-{
-a: '4煤',
-b: '自燃',
-c: '123天',
-d: '0%',
-},
-{
-a: '5煤',
-b: '自燃',
-c: '123天',
-d: '0%',
-},
-{
-a: '6煤',
-b: '自燃',
-c: '123天',
-d: '0%',
-},
-{
-a: '7煤',
-b: '自燃',
-c: '123天',
-d: '0%',
-},
-],
-},
-},
-showStyle: {
-size: 'width:440px;height:200px;',
-version: '原版',
-position: 'top:75px;right:10px;',
-},
-},
-// 5. 注氮系统（右中）
-{
-deviceType: 'NitrogenMonitor',
-moduleName: '注氮系统',
-pageType: 'ts_fire',
-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: '40%',
-},
-{
-name: 'board',
-basis: '30%'
-},
-{
-name: 'board',
-basis: '30%'
-},
-{
-name: 'board',
-basis: '30%'
-}],
-},
-table: [],
-board: [
-{
-type: 'N',
-readFrom: '',
-layout: 'label-top',
-items: [
-{
-label: '流量',
-value: '2663',
-},
-{
-label: '管道温度',
-value: '40.1',
-},
-{
-label: '氮气压力',
-value: '0.86',
-},
-{
-label: '氮含量',
-value: '97.3',
-}
-],
-},
-{
-type: 'O',
-readFrom: '',
-layout: 'val-top',
-items: [
-{
-label: '排气压力',
-value: '0.97',
-},
-{
-label: '排气温度',
-value: '84.4',
-},
-{
-label: '油压',
-value: '0.99',
-}
-],
-},
-{
-type: 'O',
-readFrom: '',
-layout: 'val-top',
-items: [
-{
-label: '排气压力',
-value: '0.97',
-},
-{
-label: '排气温度',
-value: '84.4',
-},
-{
-label: '油压',
-value: '0.99',
-}
-],
-},
-{
-type: 'O',
-readFrom: '',
-layout: 'val-top',
-items: [
-{
-label: '排气压力',
-value: '0.97',
-},
-{
-label: '排气温度',
-value: '84.4',
-},
-{
-label: '油压',
-value: '0.99',
-}
-],
-}
-],
-chart: [],
-gallery: [],
-gallery_list: [],
-list: [],
-complex_list: [],
-preset: [],
-mock: {},
-},
-showStyle: {
-size: 'width:440px;height:290px;',
-version: '原版',
-position: 'top:280px;right:10px;',
-},
-},
-// 6. 采空区密闭监测系统（右下）
-{
-deviceType: 'pdArray',
-moduleName: '采空区密闭监测系统',
-pageType: 'ts_fire',
-moduleData: {
-header: {
-show: true,
-readFrom: '',
-selector: {
-show: true,
-value: '${systemname}',
-},
-slot: {
-show: false,
-value: '',
-},
-},
-background: {
-show: false,
-type: 'video',
-link: '',
-},
-layout: {
-direction: 'column',
-items: [
-{
-name: 'chart',
-basis: '100%',
-},
-],
-},
-chart: [
-{
-type: 'line_smooth',
-readFrom: 'arrayFiber',
-legend: { show: false },
-xAxis: [{ show: true }],
-yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
-series: [
-{
-label: '${strinstallpos}',
-readFrom: 'fibreTemperatureArr',
-xprop: 'pos',
-yprop: 'value',
-},
-],
-},
-],
-gallery: [],
-gallery_list: [],
-table: [],
-list: [],
-complex_list: [],
-preset: [],
-},
-showStyle: {
-size: 'width:440px;height:280px;',
-version: '原版',
-position: 'bottom:8px;right:10px;',
-},
-},
+  // 1. 采空区基本信息（左上）
+  {
+    deviceType: 'goafsInfo',
+    moduleName: '采空区基本信息',
+    pageType: 'ts_fire',
+    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: 'L',
+          readFrom: 'sysInfo',
+          layout: 'label-top',
+          items: [
+            {
+              label: '所属煤层',
+              value: '${coalseam}',
+            },
+            {
+              label: '煤层厚度',
+              value: '${coalSeamThick}',
+            },
+            {
+              label: '煤层角度',
+              value: '${coalSeamAngle}',
+            },
+            {
+              label: '最短发火期',
+              value: '${minFirePeriod}',
+            },
+            {
+              label: '工作面长度',
+              value: '${faceLen}',
+            },
+            {
+              label: '采空区管理',
+              value: '${goafManage}',
+            }
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+    size: 'width:440px;height:250px;',
+    version: '原版',
+    position: 'top:70px;left:10px;',
+    headerPosition: 'centerBottom',
+    },
+  },
+  // 2. 矿用自动喷洒系统（左中）
+  {
+    deviceType: 'spray_auto',
+    moduleName: '矿用自动喷洒系统',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'select_cs',
+            basis: '40%',
+          },
+          {
+            name: 'board',
+            basis: '60%'
+          }
+        ],
+      },
+      board: [
+        {
+          type: 'M',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '流量传感器#1',
+              value: '${deviceInfo.spray.warnInfo.alarmNum}',
+            },
+            {
+              label: '流量传感器#2',
+              value: 'xxxxxx',
+            },
+            {
+              label: '压力传感器',
+              value: 'xxxxxx',
+            },
+            {
+              label: '液位计',
+              value: '液位超限',
+            }
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'select_cs',
+          setLabelConfig :{
+            selectL:'请选择...',
+            switchL:['开启','关闭'],
+            switchL1:'进料泵',
+            switchL2:'注浆泵'
+          }
+        },
+      ],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:325px;left:10px;',
+    },
+  },
+  // 3. 光纤测温系统（左下）
+  {
+    deviceType: 'fiber',
+    moduleName: '光纤测温系统',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'deviceInfo.fiber',
+        selector: {
+          show: true,
+          value: '${strname}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+        {
+        name: 'chart',
+        basis: '100%',
+        },
+        ],
+      },
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: 'arrayFiber',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:270px;',
+      version: '原版',
+      position: 'bottom:8px;left:10px;',
+      headerPosition: 'centerBottom',
+    },
+  },
+  // 4. 可采煤层煤自燃特性（右上）
+  {
+    deviceType: 'coalFireFeature',
+    moduleName: '开采煤层自燃发火特性',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+          name: 'table',
+          basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'sysInfo.coalSpoCha',
+          columns: [
+            {
+              name: '煤层',
+              prop: '${mc}',
+            },
+            {
+              name: '自燃倾向性',
+              prop: '${zrqxx}',
+            },
+            {
+              name: '最短发火期',
+              prop: '${zdfhq}',
+            },
+            {
+              name: '自燃倾向等级',
+              prop: '${zrqxxdj}',
+            }
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:200px;',
+      version: '原版',
+      position: 'top:75px;right:10px;',
+    },
+  },
+  // 5. 注氮系统（右中）
+  {
+    deviceType: 'NitrogenMonitor',
+    moduleName: '注氮系统',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: { show: false, readFrom: '', selector: { show: false, value: '' }, slot: { show: false, value: '' } },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'column',
+        items: [
+          { 
+            name: 'partition', 
+            basis: 'auto' ,
+            overflow: false,
+          },
+          {
+            name: 'board',
+            basis: 'auto',
+            overflow: false,
+          },
+          { 
+            name: 'partition', 
+            basis: 'auto' ,
+            overflow: false,
+          },
+          { 
+            name: 'board', 
+            basis: 'auto' ,
+            overflow: false,
+          },
+          { 
+            name: 'partition', 
+            basis: 'auto' ,
+            overflow: false,
+          },
+          { 
+            name: 'board', 
+            basis: 'auto',
+            overflow: false,
+          },
+          { 
+            name: 'partition', 
+            basis: 'auto',
+            overflow: false,
+          },
+          { 
+            name: 'board', 
+            basis: 'auto',
+            overflow: false,
+          }
+        ],
+      },
+      table: [],
+      board: [
+        {
+          type: 'N',
+          readFrom: 'deviceInfo.nitrogen.datalist[0].readData',
+          layout: 'label-top',
+            items: [
+            {
+              label: '流量',
+              value: '${cumulativeFlow}',
+            },
+            {
+              label: '管道温度',
+              value: '${heaterTemperature}',
+            },
+            {
+              label: '氮气压力',
+              value: '${nitrogen}',
+            },
+            {
+              label: '氮含量',
+              value: '${nitrogenContent}',
+            }
+          ],
+        },
+        {
+          type: 'O',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '排气压力',
+              value: '0.97',
+            },
+            {
+              label: '排气温度',
+              value: '84.4',
+            },
+            {
+              label: '油压',
+              value: '0.99',
+            }
+          ],
+        },
+        {
+          type: 'O',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '排气压力',
+              value: '0.97',
+            },
+            {
+              label: '排气温度',
+              value: '84.4',
+            },
+            {
+              label: '油压',
+              value: '0.99',
+            }
+          ],
+        },
+        {
+          type: 'O',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '排气压力',
+              value: '0.97',
+            },
+            {
+              label: '排气温度',
+              value: '84.4',
+            },
+            {
+              label: '油压',
+              value: '0.99',
+            }
+          ],
+        }
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      partition: [
+        {
+          type: 'A',
+          readFrom: '',
+          layout: 'icon-pre',
+          label: '制氮机',
+          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'
+        },
+        {
+          type: 'A',
+          readFrom: '',
+          layout: 'icon-pre',
+          label: '风压机#2',
+          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'
+        },
+      ],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:280px;right:10px;',
+    },
+  },
+  // 6. 采空区密闭监测系统（右下）
+  {
+    deviceType: 'pdArray',
+    moduleName: '采空区密闭监测系统',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: {
+      show: false,
+      readFrom: '',
+      selector: {
+        show: true,
+        value: '${systemname}',
+      },
+      slot: {
+        show: false,
+        value: '',
+      },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'selector_dual_chart',
+            basis: '100%',
+          },
+        ],
+      },
+      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',
+            },
+          ],
+        },
+      ],
+      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',
+        //       }
+        //     ],
+        //   }
+        // },
+      ],
+      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 },
+        //     ]
+        //   }
+
+        // ]
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:280px;',
+      version: '原版',
+      position: 'bottom:8px;right:10px;',
+    },
+  },
+  // 7. 进风侧设备监测（中下1）
+  {
+    deviceType: 'RealtimeMonitor',
+    moduleName: '进风侧设备监测',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'mockTable',
+          columns: [
+            { name: '序号', prop: 'serialVal' },
+            { name: '监测点', prop: 'MonitorPoint' },
+            { name: '报警等级', prop: 'warnLevel' },
+            { name: '类型', prop: 'warnType' },
+            { name: '值', prop: 'nowVal' },
+          ],
+        },],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            serialVal: '1',
+            MonitorPoint: '130608工作面采空区1',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '2',
+            MonitorPoint: '130608工作面采空区1',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '3',
+            MonitorPoint: '130608工作面采空区1',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '4',
+            MonitorPoint: '130608工作面采空区1',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          }
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:980px;height:270px;',
+      version: '原版',
+      position: 'bottom:8px;left:470px',
+    },
+  },
+  // 8. 进风侧设备监测（中下2）
+  {
+    deviceType: 'RealtimeMonitor',
+    moduleName: '进风侧设备监测',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'mockTable',
+          columns: [
+            { name: '序号', prop: 'serialVal' },
+            { name: '监测点', prop: 'MonitorPoint' },
+            { name: '报警等级', prop: 'warnLevel' },
+            { name: '类型', prop: 'warnType' },
+            { name: '值', prop: 'nowVal' },
+          ],
+        },],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            serialVal: '1',
+            MonitorPoint: '130608工作面采空区2',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '2',
+            MonitorPoint: '130608工作面采空区2',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '3',
+            MonitorPoint: '130608工作面采空区2',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '4',
+            MonitorPoint: '130608工作面采空区2',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          }
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:980px;height:270px;',
+      version: '原版',
+      position: 'bottom:8px;left:470px',
+    },
+  },
+  // 9. 预警记录（中下3）
+  {
+    deviceType: 'RealtimeMonitor',
+    moduleName: '预警记录',
+    pageType: 'ts_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'mockTable',
+          columns: [
+            { name: '序号', prop: 'serialVal' },
+            { name: '监测点', prop: 'MonitorPoint' },
+            { name: '报警等级', prop: 'warnLevel' },
+            { name: '类型', prop: 'warnType' },
+            { name: '值', prop: 'nowVal' },
+          ],
+        },],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            serialVal: '1',
+            MonitorPoint: '130608工作面采空区3',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '2',
+            MonitorPoint: '130608工作面采空区3',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '3',
+            MonitorPoint: '130608工作面采空区3',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '4',
+            MonitorPoint: '130608工作面采空区3',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          }
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:980px;height:270px;',
+      version: '原版',
+      position: 'bottom:8px;left:470px',
+    },
+  }
 ];

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

@@ -9,33 +9,33 @@
     <div class="center-info-bar">
       <div class="left-info-content">
         <div class="left-block block1">
-          <div class="info-value">无</div>
+          <div class="info-value">{{fireSgWarnInfo.sgCoTbAlarmAddress}}</div>
           <div class="info-label">突变预警</div>
         </div>
         <div class="left-block block2">
-          <div class="info-value">无自燃隐患</div>
+          <div class="info-value">{{fireSgWarnInfo.nyAlarmLevelStr}}</div>
           <div class="info-label">煤自燃氧化阶段</div>
         </div>
         <div class="left-block block3">
-          <div class="info-value">-</div>
+          <div class="info-value">{{fireSgWarnInfo.sgMaxTemp}}</div>
           <div class="info-label">最高温度</div>
         </div>
       </div>
       <div class="center-info-content">
-        <div class="info-value">正常</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">0</div>
+          <div class="info-value">{{fireSgWarnInfo.sgZbAlarmNum}}</div>
           <div class="info-label">指标预警</div>
         </div>
         <div class="right-block block2">
-          <div class="info-value">无</div>
+          <div class="info-value">{{fireSgWarnInfo.yjjbLevelStr}}</div>
           <div class="info-label">预警等级</div>
         </div>
         <div class="right-block block3">
-          <div class="info-value">无</div>
+          <div class="info-value">{{fireSgWarnInfo.sgSwAlarmAddress}}</div>
           <div class="info-label">升温预警</div>
         </div>
       </div>
@@ -59,6 +59,9 @@
       :module-data-b="cfgB.moduleData"
       :module-name-b="cfgB.moduleName"
       :device-type-b="cfgB.deviceType"
+      :module-data-c="cfgC.moduleData"
+      :module-name-c="cfgC.moduleName"
+      :device-type-c="cfgC.deviceType"
       :data="data"
       :visible="true"
       :common-title="commonTitle"
@@ -66,16 +69,15 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleBDDual from './components/ModuleBDDual.vue';
-import { getDisHome } from './configurable.api';
+import { getDisHome,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)
+  configs.value.filter((_, index) => index !== 6 && index !== 7 && index !== 8)
 );
 const cfgA = computed<any>(() =>
   configs.value[6]
@@ -83,30 +85,57 @@ const cfgA = computed<any>(() =>
 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;
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
+    getDeviceSys({
+      devicetype: 'sys',
+      systemID: '1955807282207465474',
+      type: 'all'
+    }).then((res)=>{
+      const processedRes = handleData(res);
+      updateData(processedRes)
+    });;
   });
   interval = setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
+    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;
+};
+
 onUnmounted(() => {
   clearInterval(interval);
 });
-function redirectTo(url) {
-  window.open(url);
-}
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';