[Feat 0000] 添加gallery、preset以及各个模块到首页中

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

@@ -55,7 +55,7 @@ export interface ModuleData {
     link: string;
   };
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta' | 'measure_detail')[];
   /** 模块内容的分区 */
   slice: {
     /** 分区方向 */
@@ -124,7 +124,7 @@ export interface ModuleDataList {
 
 export interface ModuleDataGallery {
   /** 画廊预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
   /** 核心配置，每个画廊项对应一项 */
@@ -167,7 +167,7 @@ export interface ModuleDataGalleryList {
 
 export interface ModuleDataChart {
   /** 图表类型，一个类型对应一种图表预设 */
-  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex';
+  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex' | 'bar_stack';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。应该指到数组上 */
   readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */

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

@@ -66,6 +66,9 @@
         <template v-if="config.key === 'blast_delta'">
           <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
+        <template v-if="config.key === 'measure_point'">
+          <MeasureDetail class="content__module" :composite-data="config.data" />
+        </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
       </template>
@@ -97,6 +100,7 @@
   import { get, clone } from 'lodash-es';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import MeasureDetail from '../../clique/dustComponents/measure-detail.vue';
   // import FIreWarn from './preset/FIreWarn.vue';
   // import FIreControl from './preset/FIreControl.vue';
 

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

@@ -190,7 +190,7 @@
   .list-item_C {
     position: relative;
     height: 140px;
-    width: 210px;
+    width: 200px;
     background-repeat: no-repeat;
     background-image: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
     background-size: 100% 100%;

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

@@ -343,6 +343,65 @@
       };
     }
 
+    // 堆叠柱状图
+    if (type === 'bar_stack') {
+      return {
+        textStyle,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            ...e,
+            type: 'category',
+          };
+        }),
+        yAxis: yAxis.map((e) => {
+          return {
+            ...e,
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(21,80,126,0.3)',
+                type: 'dashed',
+              },
+            },
+          };
+        }),
+        series: baseSeries.map((serie) => {
+          return {
+            ...serie,
+            type: 'bar',
+            stack: 'stackME',
+            barMaxWidth: '24',
+            emphasis: {
+              focus: 'series',
+            },
+            label: {
+              show: true,
+              position: 'top', //在上方显示
+              textStyle: {
+                //数值样式
+                color: '#fff',
+                fontSize: 14,
+              },
+            },
+          };
+        }),
+        color: ['#F56731', '#00E8FF'],
+      };
+    }
+
     return {};
   };
 

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

@@ -331,6 +331,98 @@
     transform: scale(0.7);
   }
 
+  .gallery_H {
+    background-image: url('/@/assets/images/vent/alarm/bottom1.png'), url('/@/assets/images/vent/alarm/center-bg.png');
+    background-repeat: no-repeat, no-repeat;
+    background-size:
+      auto 90%,
+      auto 90%;
+    // background-size: contain;
+    background-position: center, center;
+    position: relative;
+  }
+
+  .gallery > .gallery-item_H {
+    width: 100px;
+    height: 70px;
+    display: flex;
+    position: absolute;
+    text-align: center;
+    justify-content: space-evenly;
+    background-repeat: no-repeat;
+  }
+  .gallery > .gallery-item_H:nth-child(2) {
+    top: 0%;
+    left: calc(50% - 150px);
+    width: 300px;
+    height: 200px;
+    padding-top: 50px;
+    background-image: url(/@/assets/images/vent/alarm/warning-icon-bg1.png), url(/@/assets/images/vent/alarm/warning-icon-bg-a1.png);
+    background-size:
+      auto 100%,
+      auto 46%;
+    background-position:
+      center top,
+      center 28%;
+    display: block;
+  }
+  .gallery > .gallery-item_H:nth-child(3) {
+    top: calc(50% - 60px);
+    left: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-vent.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+  .gallery > .gallery-item_H:nth-child(4) {
+    top: calc(50% + 10px);
+    left: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-device.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+  .gallery > .gallery-item_H:nth-child(5) {
+    top: calc(50% - 60px);
+    right: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-dust.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+  .gallery > .gallery-item_H:nth-child(6) {
+    top: calc(50% + 10px);
+    right: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-gas.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+
   .gallery-item__value_red {
     color: red;
   }

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

@@ -1837,6 +1837,26 @@ const BDfireMock = {
         warnLevel: '低风险', //预警级别
         maxVal: '1.88', //最高温度
       },
+      {
+        sysNamme: '工作面名称3', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
+      {
+        sysNamme: '工作面名称4', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
+      {
+        sysNamme: '工作面名称5', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
+      {
+        sysNamme: '工作面名称6', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
     ],
   },
   obfObj: {
@@ -3107,6 +3127,7 @@ export const testConfigBDNew: Config[] = [
       },
       slice: {
         direction: 'row',
+        ignoreOverflow: true,
         basis: ['65%', '35%'],
       },
       layout: ['list', 'blast_delta'],
@@ -3291,17 +3312,128 @@ export const testConfigBDNew: Config[] = [
       position: 'top:160px;left:0;',
     },
   },
+  // {
+  //   deviceType: '',
+  //   moduleName: '光纤测温',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: false,
+  //       selector: {
+  //         value: '',
+  //       },
+  //       slot: {
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     slice: {
+  //       direction: 'row',
+  //       basis: ['50%', '50%'],
+  //     },
+  //     layout: ['list', 'chart'],
+  //     board: [],
+  //     chart: [
+  //       {
+  //         type: 'line',
+  //         readFrom: 'btArray',
+  //         legend: { show: false },
+  //         xAxis: [{ show: true }],
+  //         yAxis: [{ show: true, name: '值', position: 'left' }],
+  //         series: [{ label: '', readFrom: '', xprop: 'value', yprop: 'pos' }],
+  //       },
+  //     ],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [
+  //       {
+  //         type: 'G',
+  //         readFrom: 'dsArray',
+  //         items: [
+  //           {
+  //             label: 'CO',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'CO₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'CH₄',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           {
+  //             label: 'C₂H₂',
+  //             value: '--',
+  //             color: 'blue',
+  //             info: '--',
+  //           },
+  //           // {
+  //           //   label: 'C₂H₄',
+  //           //   value: '--',
+  //           //   color: 'blue',
+  //           //   info: '--',
+  //           // },
+  //           // {
+  //           //   label: 'O₂',
+  //           //   value: '--',
+  //           //   color: 'blue',
+  //           //   info: '--',
+  //           // },
+  //           // {
+  //           //   label: '温度',
+  //           //   value: '--',
+  //           //   color: 'blue',
+  //           //   info: '--',
+  //           // },
+  //           // {
+  //           //   label: '风险',
+  //           //   value: '--',
+  //           //   color: 'blue',
+  //           //   info: '--',
+  //           // },
+  //         ],
+  //       },
+  //     ],
+  //     complex_list: [],
+  //     preset: [],
+  //     // mock: BDfireMock,
+  //   },
+  //   // showStyle: {
+  //   //   size: 'width:450px;height:760px;',
+  //   //   version: '保德',
+  //   //   position: 'top:160px;left:0;',
+  //   // },
+  //   showStyle: {
+  //     size: 'width:1000px;height:280px;',
+  //     version: '保德',
+  //     position: 'top:640px;left:460px',
+  //   },
+  // },
   {
-    deviceType: '',
-    moduleName: '光纤测温',
+    deviceType: 'btArray',
+    moduleName: '工作面束管监测',
     pageType: '',
     moduleData: {
       header: {
-        show: true,
-        showSelector: true,
+        show: false,
+        showSelector: false,
         showSlot: false,
         selector: {
-          value: '',
+          value: '${systemname}',
         },
         slot: {
           value: '',
@@ -3314,122 +3446,33 @@ export const testConfigBDNew: Config[] = [
       },
       slice: {
         direction: 'row',
-        basis: ['50%', '50%'],
+        basis: ['100%'],
       },
-      layout: ['list', 'chart'],
+      layout: ['chart'],
       board: [],
       chart: [
         {
-          type: 'line',
-          readFrom: 'btArray',
-          legend: { show: false },
+          type: 'bar_stack',
+          readFrom: 'chartMock',
+          legend: { show: true },
           xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '值', position: 'left' }],
-          series: [{ label: '', readFrom: '', xprop: 'value', yprop: 'pos' }],
-        },
-      ],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'G',
-          readFrom: 'dsArray',
-          items: [
-            {
-              label: 'CO',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'CO₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
             {
-              label: 'CH₄',
-              value: '--',
-              color: 'blue',
-              info: '--',
+              label: '${name1}',
+              readFrom: 'data1',
+              xprop: 'pos',
+              yprop: 'val',
             },
             {
-              label: 'C₂H₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
+              label: '${name2}',
+              readFrom: 'data2',
+              xprop: 'pos',
+              yprop: 'val',
             },
-            // {
-            //   label: 'C₂H₄',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-            // {
-            //   label: 'O₂',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-            // {
-            //   label: '温度',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-            // {
-            //   label: '风险',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
           ],
         },
       ],
-      complex_list: [],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    // showStyle: {
-    //   size: 'width:450px;height:760px;',
-    //   version: '保德',
-    //   position: 'top:160px;left:0;',
-    // },
-    showStyle: {
-      size: 'width:1000px;height:280px;',
-      version: '保德',
-      position: 'top:640px;left:460px',
-    },
-  },
-  {
-    deviceType: 'btArray',
-    moduleName: '工作面束管监测',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: false,
-        selector: {
-          value: '${systemname}',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'row',
-        basis: ['100%'],
-      },
-      layout: ['complex_list'],
-      board: [],
-      chart: [],
       gallery: [],
       gallery_list: [],
       table: [],
@@ -3582,7 +3625,24 @@ export const testConfigBDNew: Config[] = [
         },
       ],
       preset: [],
-      // mock: BDfireMock,
+      mock: {
+        chartMock: {
+          name1: 'A',
+          data1: [
+            { val: 1, pos: '1' },
+            { val: 2, pos: '2' },
+            { val: 3, pos: '3' },
+            { val: 4, pos: '4' },
+          ],
+          name2: 'B',
+          data2: [
+            { val: 4, pos: '4' },
+            { val: 3, pos: '3' },
+            { val: 2, pos: '2' },
+            { val: 1, pos: '1' },
+          ],
+        },
+      },
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
@@ -3590,4 +3650,102 @@ export const testConfigBDNew: Config[] = [
       position: 'top:640px;left:460px',
     },
   },
+  {
+    deviceType: '',
+    moduleName: '测试用的',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      // layout: ['table'],
+      layout: ['gallery'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'H',
+          readFrom: '',
+          items: [
+            {
+              label: '一氧化碳',
+              value: '${coVal}',
+              color: 'blue',
+            },
+            {
+              label: '二氧化碳',
+              value: '${co2Val}',
+              color: 'blue',
+            },
+            {
+              label: '氧气',
+              value: '${o2Val}',
+              color: 'blue',
+            },
+            {
+              label: '温度',
+              value: '${tempVal}',
+              color: 'blue',
+            },
+            {
+              label: '乙烯',
+              value: '${c2h4Val}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'aqjkArray',
+          columns: [
+            {
+              name: '测点位置',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '温度',
+              prop: 'nowVal',
+            },
+            {
+              name: '预警级别',
+              prop: 'warnLevel',
+            },
+            // {
+            //   name: '时间',
+            //   prop: 'time',
+            // },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:640px;right:0;',
+    },
+  },
 ];

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

@@ -25,24 +25,24 @@
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
             {{ homedata.allMineWarn }}
           </div>
-          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
+          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
         </div>
         <div class="tcontent-r">
-          <div>火灾</div>
+          <div>粉尘</div>
           <div>风险</div>
         </div>
       </div>
     </div>
-    <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('/grout-home')">
+    <!-- <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
         <div>智能</div>
-        <div>注浆系统</div>
+        <div>灌浆系统</div>
       </div>
-      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
         <div>智能</div>
-        <div>注氮系统</div>
+        <div>注氟系统</div>
       </div>
-    </div>
+    </div> -->
     <ModuleBD
       v-for="cfg in configs"
       :key="cfg.deviceType"
@@ -53,17 +53,6 @@
       :visible="true"
       :page-type="pageType"
     />
-    <ModuleBDDual
-      :show-style="configA.showStyle"
-      :module-data-a="configA.moduleData"
-      :module-name-a="configA.moduleName"
-      :device-type-a="configA.deviceType"
-      :module-data-b="configB.moduleData"
-      :module-name-b="configB.moduleName"
-      :device-type-b="configB.deviceType"
-      :visible="true"
-      :page-type="pageType"
-    />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
     </div>
@@ -75,46 +64,30 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import ModuleBDDual from './components/ModuleBDDual.vue';
-  import { testConfigBDFire } from './configurable.data';
+  import { testConfigBDNew } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getBDFireData } from './configurable.api';
+  import { getBDDustData } from './configurable.api';
 
-  const mainTitle = ref('保德煤矿火灾预警系统');
-  const pageType = 'BD_fire';
+  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
+  const pageType = 'BD_dust';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(
-    testConfigBDFire.filter(({ moduleName }) => {
-      return moduleName !== '工作面光纤监测' && moduleName !== '工作面束管监测';
-    })
-  );
-  const configA = ref<any>(
-    testConfigBDFire.find(({ moduleName }) => {
-      return moduleName === '工作面束管监测';
-    })
-  );
-  const configB = ref<any>(
-    testConfigBDFire.find(({ moduleName }) => {
-      return moduleName === '工作面光纤监测';
-    })
-  );
+  const configs = ref(testConfigBDNew);
   // const { configs, fetchConfigs } = useInitConfigs();
-
   const homedata = ref<any>({});
 
   onMounted(() => {
     // configs.value = testConfigB;
-    getBDFireData({}).then((r) => {
+    getBDDustData({}).then((r) => {
       homedata.value = r;
     });
     // fetchConfigs(pageType);
   });
 
-  function redirectTo(url) {
-    window.open(url);
-  }
+  // function redirectTo(url) {
+  //   window.open(url);
+  // }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -251,8 +224,7 @@
   }
   .right-t {
     position: absolute;
-    // height: 160px;
-    height: 115px;
+    height: 160px;
     right: 0;
     top: 40px;
     width: 450px;
@@ -264,12 +236,11 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    z-index: 1;
 
     .tcontent-l {
       flex: 1;
-      height: 100%;
-      font-size: 16px;
+      height: 70%;
+      font-size: 20px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
@@ -281,13 +252,14 @@
         center,
         center top;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 40px;
+      line-height: 50px;
+      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
-      height: 100%;
-      font-size: 16px;
+      height: 70%;
+      font-size: 20px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
@@ -299,8 +271,9 @@
         center,
         center top;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 40px;
+      line-height: 50px;
+      cursor: pointer;
     }
   }