[Feat 0000] 修复样式及模块Header问题，依据后端给出的数据模拟

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

@@ -91,8 +91,8 @@
   // }
 
   //下拉框选项切换
-  function selectHandler({ key }) {
-    selectedDeviceID.value = key;
+  function selectHandler(id) {
+    selectedDeviceID.value = id;
     emit('select', selectedDevice);
   }
 

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

@@ -236,6 +236,9 @@
 
   // .gallery-item_center_F {
   // }
+  .gallery_F {
+    height: 150px;
+  }
   .gallery > .gallery-item_F {
     width: 120px;
     height: 60px;

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

@@ -1349,127 +1349,72 @@ export const testConfigA: Config[] = [
 ];
 
 const BDdustMock = {
-  // 工作面风险监测
-  worksurface: {
-    risk: [
-      {
-        name: '低风险',
-        count: 3,
-      },
-      {
-        name: '一般风险',
-        count: 0,
-      },
-      {
-        name: '较大风险',
-        count: 0,
-      },
-      {
-        name: '重大风险',
-        count: 2,
-      },
-    ],
-    count: 5,
-    contents: [
-      {
-        risk: '低',
-        name: '81202综放工作面',
-        tmax: '30',
-      },
-      {
-        risk: '低',
-        name: '81205主运掘进面',
-        tmax: '30',
-      },
-      {
-        risk: '低',
-        name: '81202综放工作面',
-        tmax: '30',
-      },
+  allMineWarn: '低风险', //全矿井风险级别
+  dustManageInfo: {
+    //工作面风险监测
+    totalNum: '5', //工作面总数
+    dfxNum: '5', //工作面低风险数
+    ybNum: '5', //工作面一般风险数
+    jdNum: '5', //工作面较大风险数
+    zdNum: '5', //工作面重大风险
+    sysList: [
       {
-        risk: '低',
-        name: '81205主运掘进面',
-        tmax: '30',
+        sysNamme: '工作面名称1', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高粉尘浓度
       },
       {
-        risk: '低',
-        name: '81202综放工作面',
-        tmax: '30',
+        sysNamme: '工作面名称2', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高粉尘浓度
       },
     ],
   },
-  // 粉尘浓度
-  dust: [
+  dustDustGraph: [
+    //粉尘传感器曲线图（综放工作面粉尘浓度）
     {
-      name: '82101综放',
-      deviceID: '82101',
-      history: [
-        {
-          val: '40',
-        },
-        {
-          val: '30',
-        },
+      strinstallpos: '81202工作面', //安装位置
+      historyList: [
+        //历史数据
         {
-          val: '40',
+          dustval: '0.86', //粉尘浓度值
+          time: '2024-09-12 15:33:50', //时间
         },
         {
-          val: '50',
-        },
-        {
-          val: '20',
+          dustval: '0.96', //粉尘浓度值
+          time: '2024-09-12 15:34:50', //时间
         },
+      ],
+    },
+    {
+      strinstallpos: '81203工作面', //安装位置
+      historyList: [
+        //历史数据
         {
-          val: '30',
+          dustval: '0.86', //粉尘浓度值
+          time: '2024-09-12 15:33:50', //时间
         },
         {
-          val: '50',
+          dustval: '1.00', //粉尘浓度值
+          time: '2024-09-12 15:34:50', //时间
         },
       ],
     },
   ],
-  // 降尘装置
-  jczz: {
-    devicetotal: '10',
-    forgetotal: '10',
-    onlinetotal: '24',
-    offlinetotal: '0',
+  atomObj: {
+    //智能喷雾降尘装置
+    totalNum: '5', //喷雾设备总数
+    openNum: '5', //喷雾设备连接数
+    breakNum: '0', //喷雾设备断开数
+    atomOpenNum: '1', //喷雾设备开启数
   },
-  // 粉尘关联指标
-  glzb: [
+  dustRelArray: [
+    //粉尘关联指标
     {
-      pos: '81202综采工作面隅角',
-      temp: '20',
-      ws: '1.8',
-      status: '打开',
-    },
-    {
-      pos: '81202综采工作面隅角',
-      temp: '20',
-      ws: '1.8',
-      status: '打开',
-    },
-    {
-      pos: '81202综采工作面隅角',
-      temp: '20',
-      ws: '1.8',
-      status: '打开',
-    },
-    {
-      pos: '81202综采工作面隅角',
-      temp: '20',
-      ws: '1.8',
-      status: '打开',
-    },
-  ],
-  // 静态指标
-  statics: [
-    {
-      name: '10#煤层',
-      flameLength: '400',
-      min: '75',
-      con: '有爆炸性',
-      deviceID: '1',
+      strinstallpos: '81202工作面', //安装位置
+      temp: '23.3', //温度
+      windSpeed: '10.5', //风速
+      atomState: '打开', //喷雾状态
     },
   ],
 };
@@ -1501,31 +1446,31 @@ export const testConfigBDDust: Config[] = [
       gallery: [
         {
           type: 'F',
-          readFrom: 'worksurface',
+          readFrom: 'dustManageInfo',
           items: [
             {
               label: '',
-              value: '${count}',
+              value: '${totalNum}',
               color: 'blue',
             },
             {
-              label: '${risk[0].name}',
-              value: '${risk[0].count}',
+              label: '低风险',
+              value: '${dfxNum}',
               color: 'blue',
             },
             {
-              label: '${risk[1].name}',
-              value: '${risk[1].count}',
+              label: '一般风险',
+              value: '${ybNum}',
               color: 'blue',
             },
             {
-              label: '${risk[2].name}',
-              value: '${risk[2].count}',
+              label: '较大风险',
+              value: '${jdNum}',
               color: 'blue',
             },
             {
-              label: '${risk[3].name}',
-              value: '${risk[3].count}',
+              label: '重大风险',
+              value: '${zdNum}',
               color: 'blue',
             },
           ],
@@ -1537,71 +1482,37 @@ export const testConfigBDDust: Config[] = [
       complex_list: [
         {
           type: 'A',
-          readFrom: 'worksurface.contents',
+          readFrom: 'dustManageInfo.sysList',
           items: [
             {
-              title: '${[0].name}',
+              title: '${[0].sysNamme}',
               contents: [
                 {
                   label: '风险监测',
-                  value: '${[0].risk}',
+                  value: '${[0].warnLevel}',
                   color: 'blue',
                   info: '',
                 },
                 {
-                  label: '温度最大值',
-                  value: '${[0].tmax}℃',
+                  label: '最高粉尘浓度',
+                  value: '${[0].maxVal}',
                   color: 'blue',
                   info: '',
                 },
               ],
             },
             {
-              title: '${[1].name}',
+              title: '${[1].sysNamme}',
               contents: [
                 {
                   label: '风险监测',
-                  value: '${[1].risk}',
+                  value: '${[1].warnLevel}',
                   color: 'blue',
                   info: '',
                 },
                 {
-                  label: '温度最大值',
-                  value: '${[1].tmax}℃',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: '${[2].name}',
-              contents: [
-                {
-                  label: '风险监测',
-                  value: '${[2].risk}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '温度最大值',
-                  value: '${[2].tmax}℃',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-            {
-              title: '${[3].name}',
-              contents: [
-                {
-                  label: '风险监测',
-                  value: '${[3].risk}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '温度最大值',
-                  value: '${[3].tmax}℃',
+                  label: '最高粉尘浓度',
+                  value: '${[1].maxVal}',
                   color: 'blue',
                   info: '',
                 },
@@ -1620,7 +1531,7 @@ export const testConfigBDDust: Config[] = [
     },
   },
   {
-    deviceType: 'dust',
+    deviceType: 'dustDustGraph',
     moduleName: '综放工作面粉尘浓度',
     pageType: '',
     moduleData: {
@@ -1629,7 +1540,7 @@ export const testConfigBDDust: Config[] = [
         showSelector: true,
         showSlot: false,
         selector: {
-          value: '${name}',
+          value: '${strinstallpos}',
         },
         slot: {
           value: '',
@@ -1645,7 +1556,7 @@ export const testConfigBDDust: Config[] = [
       chart: [
         {
           type: 'line_area',
-          readFrom: 'history',
+          readFrom: 'historyList',
           xAxis: [
             {
               label: 'null',
@@ -1659,8 +1570,8 @@ export const testConfigBDDust: Config[] = [
           ],
           series: [
             {
-              label: 'A',
-              prop: 'val',
+              label: '粉尘浓度',
+              prop: 'dustval',
             },
           ],
         },
@@ -1706,26 +1617,26 @@ export const testConfigBDDust: Config[] = [
       gallery: [
         {
           type: 'E',
-          readFrom: 'jczz',
+          readFrom: 'atomObj',
           items: [
             {
               label: '设备总数',
-              value: '${devicetotal}',
+              value: '${totalNum}',
               color: 'blue',
             },
             {
               label: '喷雾开启数',
-              value: '${forgetotal}',
+              value: '${atomOpenNum}',
               color: 'blue',
             },
             {
               label: '连网数量',
-              value: '${onlinetotal}',
+              value: '${openNum}',
               color: 'blue',
             },
             {
               label: '断网数量',
-              value: '${offlinetotal}',
+              value: '${breakNum}',
               color: 'blue',
             },
           ],
@@ -1773,11 +1684,11 @@ export const testConfigBDDust: Config[] = [
       table: [
         {
           type: 'C',
-          readFrom: 'glzb',
+          readFrom: 'dustRelArray',
           columns: [
             {
               name: '类别',
-              prop: 'pos',
+              prop: 'strinstallpos',
             },
             {
               name: '温度',
@@ -1785,11 +1696,11 @@ export const testConfigBDDust: Config[] = [
             },
             {
               name: '风速',
-              prop: 'ws',
+              prop: 'windSpeed',
             },
             {
               name: '状态',
-              prop: 'status',
+              prop: 'atomState',
             },
           ],
         },
@@ -1811,8 +1722,8 @@ export const testConfigBDDust: Config[] = [
     pageType: '',
     moduleData: {
       header: {
-        show: true,
-        showSelector: true,
+        show: false,
+        showSelector: false,
         showSlot: false,
         selector: {
           value: '${name}',
@@ -1835,15 +1746,15 @@ export const testConfigBDDust: Config[] = [
           items: [
             {
               label: '火焰长度',
-              value: '>${flameLength}mm',
+              value: '>400mm',
             },
             {
               label: '抑制煤层爆炸最低岩粉量',
-              value: '${min}%',
+              value: '75%',
             },
             {
               label: '鉴定结论',
-              value: '${con}',
+              value: '有煤层爆炸性',
             },
           ],
         },

src/views/vent/home/configurable/hooks/useInit.ts

@@ -65,7 +65,7 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'])
   const selectedDevice = computed(() => {
     return (
       devices.value.find((e) => {
-        return e.deviceID === selectedDeviceID.value;
+        return e.id === selectedDeviceID.value;
       }) || {}
     );
   });
@@ -86,23 +86,28 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'])
     return promise.then((result) => {
       if (header.show && header.showSelector && result[devicekind]) {
         // 如果配置里指明需要 header，检验后初始化设备信息
-        const records: { deviceID: string }[] = result[devicekind];
-        devices.value = records;
-        selectedDeviceID.value = records[0]?.deviceID;
-        options.value = records.map((e) => {
+        const records: Record<string, any>[] = result[devicekind];
+        devices.value = records.map((e, i) => {
+          return {
+            id: i,
+            ...e,
+          };
+        });
+        options.value = devices.value.map((e) => {
           return {
             label: getFormattedText(e, value),
-            value: e.deviceID,
+            value: e.id,
           };
         });
+        selectedDeviceID.value = options.value[0]?.value;
       } else {
         // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
         const record = {
           ...result,
-          deviceID: 'isthisthereallife',
+          id: '00000000',
         };
         devices.value = [record];
-        selectedDeviceID.value = record.deviceID;
+        selectedDeviceID.value = record.id;
       }
     });
   }
@@ -125,7 +130,7 @@ export function useInitScene(scenekind: string) {
     return getHomeData({}).then((result) => {
       if (!result[scenekind]) return;
       // 如果数据只有一条，转为数据
-      const records: { strinstallpos: string; deviceID: string }[] = result[scenekind];
+      const records: { strinstallpos: string; id: string }[] = result[scenekind];
       scene.value = records;
     });
   }

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

@@ -23,7 +23,7 @@
         </div>
         <div class="tcontent-c">
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">低风险</div>
-          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
+          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
         </div>
         <div class="tcontent-r">
           <div>火灾</div>
@@ -31,7 +31,7 @@
         </div>
       </div>
     </div>
-    <div class="right-t">
+    <!-- <div class="right-t">
       <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
         <div>智能</div>
         <div>灌浆系统</div>
@@ -40,7 +40,7 @@
         <div>智能</div>
         <div>注氟系统</div>
       </div>
-    </div>
+    </div> -->
     <template v-if="isOriginal">
       <ModuleOriginal
         v-for="cfg in configs"
@@ -106,14 +106,14 @@
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
   import ModuleBD from './components/ModuleBD.vue';
-  import { testConfigBDFire } from './configurable.data';
+  import { testConfigBDDust } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
   }
 
-  const mainTitle = ref('保德煤矿火灾预警系统');
+  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
@@ -127,8 +127,8 @@
   onMounted(() => {
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
-      configs.value = testConfigBDFire;
-      // configs.value.push(...testConfigBDFire);
+      configs.value = testConfigBDDust;
+      // configs.value.push(...testConfigBDDust);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -138,9 +138,9 @@
     });
   });
 
-  function redirectTo(url) {
-    window.open(url);
-  }
+  // function redirectTo(url) {
+  //   window.open(url);
+  // }
 </script>
 <style lang="less" scoped>
   @font-face {