[Wip 0000] 保德可配置首页开发

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

@@ -16,7 +16,7 @@ export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
 }));
 
 /** 默认的模块版本选项，即外边框样式 */
-export const ModuleVersionOptions = _.map(['原版', '新版'], (k) => ({
+export const ModuleVersionOptions = _.map(['原版', '新版', '保德'], (k) => ({
   value: k,
   label: k,
 }));

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

@@ -74,11 +74,11 @@ export interface ModuleData {
 
 export interface ShowStyle {
   /** 模块的宽高，特殊情况下可以自定义宽高 */
-  size: keyof typeof ModuleSizeMap;
+  size: string;
   /** 模块的版本，除了新版，只要有一个模块指定为旧版或其他版本，那么整个页面风格将变更为对应版本，优先级 旧版 > 普通版 > 新版 */
   version: '原版' | '新版' | '普通版' | '保德';
   /** 模块的位置，即定位，特殊情况下可以自定义定位 */
-  position: keyof typeof ModulePositionMap;
+  position: string;
 }
 
 export interface ModuleDataBoard {
@@ -117,7 +117,7 @@ export interface ModuleDataList {
 
 export interface ModuleDataGallery {
   /** 画廊预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
   /** 核心配置，每个画廊项对应一项 */
@@ -160,7 +160,7 @@ export interface ModuleDataGalleryList {
 
 export interface ModuleDataChart {
   /** 图表类型，一个类型对应一种图表预设 */
-  type: 'pie' | 'bar' | 'line' | 'line_area';
+  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。特别的是，pie 类型的图表应将路径指到对象上，其他的图表应该指到数组上 */
   readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */

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

@@ -36,9 +36,11 @@
           </div> -->
       </div>
     </div>
-    <slot>
-      <Content :style="{ height: '100%' }" :moduleData="moduleData" :data="selectedDevice" />
-    </slot>
+    <div class="dane-content">
+      <slot>
+        <Content class="h-full" :moduleData="moduleData" :data="selectedDevice" />
+      </slot>
+    </div>
   </div>
 </template>
 
@@ -70,9 +72,6 @@
   // 根据配置里的定位判断应该使用哪个module组件
   const daneClass = computed(() => {
     const position = props.showStyle.position;
-    if (!props.moduleName) {
-      return 'dane-s';
-    }
     if (position.includes('left:0')) {
       return 'dane-m';
     }
@@ -107,6 +106,10 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    background-image: url(/home/zekong/mky-vent-base/src/assets/images/home-container/configurable/firehome/module-title.png);
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: 100% auto;
 
     .dane-title {
       display: flex;
@@ -150,10 +153,15 @@
     }
 
     .dane-content {
-      position: relative;
+      height: calc(100% - 34px);
+      // border-image: linear-gradient(#1dabeb, #1dabeb22);
+      border-image: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723) 30;
+      // border-left: 1px;
+      // border-right: 1px;
+      border-width: 2px;
+      border-style: solid;
       box-sizing: border-box;
-      width: 100%;
-      padding: 10px;
+      background-image: linear-gradient(#00000000 94%, #1dabeb11);
     }
   }
 
@@ -163,7 +171,7 @@
   }
 
   .dane-m {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
+    // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
     background-size: 100% auto;
   }
 
@@ -175,6 +183,10 @@
   .dane-w {
     background: url('@/assets/images/home-container/configurable/firehome/common-border3.png') no-repeat;
     background-size: 100% auto;
+    .dane-content {
+      background: none;
+      border: none;
+    }
   }
 
   :deep(.vMonitor-select-selector) {

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

@@ -245,7 +245,7 @@
           arr.push({
             key,
             config: cfg,
-            data: get(data, cfg.readFrom, []),
+            data,
           });
           break;
         }
@@ -258,7 +258,7 @@
             ...cfg,
             key,
             columns: cfg.columns,
-            data: get(data, cfg.readFrom, []),
+            data,
           });
           break;
         }

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

@@ -45,7 +45,7 @@
             data: series.map((serie) => {
               return {
                 name: serie.label,
-                value: getFormattedText(props.chartData, serie.prop, 0),
+                value: get(props.chartData, serie.prop, 0),
                 labelLine: { show: false },
                 label: { show: false },
                 itemStyle: {
@@ -110,7 +110,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: getFormattedText(d, serie.prop, 0),
+              value: get(d, serie.prop, 0),
             };
           });
           curr.push({
@@ -192,7 +192,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: getFormattedText(d, serie.prop, 0),
+              value: get(d, serie.prop, 0),
             };
           });
 
@@ -246,7 +246,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: getFormattedText(d, serie.prop, 0),
+              value: get(d, serie.prop, 0),
             };
           });
 
@@ -268,9 +268,72 @@
           };
         }),
       };
+    }
+
+    if (type === 'line_bar') {
+      return {
+        legend: {
+          top: 10,
+          right: 10,
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        // backgroundColor: '#081f33',
+        textStyle: {
+          color: '#fff',
+        },
+        grid: {
+          left: 60,
+          top: 50,
+          right: 60,
+          bottom: 50,
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            type: 'category',
+            data: sorttedData.map((d) => {
+              return getFormattedText(d, e.label);
+            }),
+          };
+        }),
+        yAxis: yAxis.map((e) => {
+          return {
+            name: e.label,
+            position: e.align,
+            splitLine: {
+              lineStyle: {
+                color: '#fff',
+                opacity: 0.3,
+              },
+            },
+          };
+        }),
+        series: series.map((serie, i) => {
+          const data = sorttedData.map((d) => {
+            return {
+              name: serie.label,
+              value: get(d, serie.prop, 0),
+              itemStyle: {
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#66ffff' },
+                  { offset: 0.2, color: '#66ffff' },
+                  { offset: 1, color: '#66ffff22' },
+                ]),
+              },
+            };
+          });
 
-      return {};
+          return {
+            type: i % 2 ? 'line' : 'bar',
+            data,
+            barWidth: 20,
+          };
+        }),
+      };
     }
+
+    return {};
   };
 
   watch(

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

@@ -451,7 +451,8 @@ export const testConfigA: Config[] = [
       // layout: ['list'],
       // layout: ['board'],
       // layout: ['complex_list'],
-      layout: ['gallery'],
+      layout: ['chart'],
+      // layout: ['gallery'],
       board: [
         {
           type: 'E',
@@ -473,7 +474,21 @@ export const testConfigA: Config[] = [
           ],
         },
       ],
-      chart: [],
+      chart: [
+        {
+          type: 'line_bar',
+          readFrom: 'dust',
+          xAxis: [{ label: '${name}' }],
+          yAxis: [
+            { label: 'minDust', align: 'left' },
+            { label: 'flameLength', align: 'right' },
+          ],
+          series: [
+            { label: 'minDust', prop: 'minDust' },
+            { label: 'flameLength', prop: 'flameLength' },
+          ],
+        },
+      ],
       gallery: [
         {
           type: 'G',
@@ -875,6 +890,7 @@ export const testConfigA: Config[] = [
       preset: [],
       gallery: [],
       complex_list: [],
+      gallery_list: [],
       chart: [
         {
           type: 'bar',
@@ -1011,6 +1027,7 @@ export const testConfigA: Config[] = [
       ],
       table: [],
       chart: [],
+      gallery_list: [],
       preset: [
         {
           readFrom: '',
@@ -1020,7 +1037,8 @@ export const testConfigA: Config[] = [
     showStyle: {
       size: 'width:450px;height:280px;',
       version: '新版',
-      position: 'top:60px;right:0;',
+      position: 'top:350px;left:0;',
+      // position: 'top:60px;right:0;',
     },
   },
   // {
@@ -1190,7 +1208,7 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['complex_list', 'blast_delta', 'list'],
+      layout: ['gallery_list', 'blast_delta', 'list'],
       board: [],
       gallery: [],
       list: [
@@ -1281,7 +1299,8 @@ export const testConfigA: Config[] = [
           mock: posMonitorData,
         },
       ],
-      complex_list: [
+      complex_list: [],
+      gallery_list: [
         {
           type: 'B',
           readFrom: '',
@@ -1328,3 +1347,427 @@ export const testConfigA: Config[] = [
     },
   },
 ];
+
+export const testConfigBDDust: Config[] = [
+  {
+    deviceType: 'dust',
+    moduleName: '工作面风险监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:760px;',
+      version: '保德',
+      position: 'top:160px;left:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '综放工作面粉尘浓度',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:460px',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '智能喷雾降尘装置',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:60px;right:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '粉尘关联指标',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:350px;right:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '粉尘静态指标',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:640px;right:0;',
+    },
+  },
+];
+
+export const testConfigBDFire: Config[] = [
+  {
+    deviceType: 'dust',
+    moduleName: '工作面风险监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:470px;',
+      version: '保德',
+      position: 'top:160px;left:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '密闭采空区监测区域',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '工作面束管监测 | 工作面光纤监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:460px',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '带式输送机防灭火监控系统',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:230px;',
+      version: '保德',
+      position: 'top:210px;right:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '变电硐室防灭火监控系统',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:230px;',
+      version: '保德',
+      position: 'top:450px;right:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '安全监控系统',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:450px;height:230px;',
+      version: '保德',
+      position: 'top:690px;right:0;',
+    },
+  },
+];

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

@@ -14,29 +14,65 @@
       </template>
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+
+    <div class="left-t">
+      <div class="tcontent-area">
+        <div class="tcontent-l">
+          <div>监测</div>
+          <div>区域</div>
+        </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>
+        <div class="tcontent-r">
+          <div>火灾</div>
+          <div>风险</div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>灌浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>注氟系统</div>
+      </div>
+    </div> -->
     <template v-if="isOriginal">
       <ModuleOriginal
         v-for="cfg in configs"
         :key="cfg.deviceType"
         :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
         :visible="true"
-        @click="redirectTo(cfg)"
-      >
-        <Content v-bind="cfg" />
-      </ModuleOriginal>
+      />
     </template>
     <template v-else-if="isCommon">
       <ModuleCommon
         v-for="cfg in configs"
         :key="cfg.deviceType"
         :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
         :visible="true"
-        @click="redirectTo(cfg)"
-      >
-        <Content v-bind="cfg" />
-      </ModuleCommon>
+      />
+    </template>
+    <template v-else-if="isBD">
+      <ModuleBD
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
     </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
@@ -45,12 +81,11 @@
         :key="cfg.deviceType"
         :visible="cfg.visible"
         :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
         @close="cfg.visible = false"
-        @click="redirectTo(cfg)"
-      >
-        <Content v-bind="cfg" />
-      </ModuleEnhanced>
+      />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
       <div class="pos-absolute top-70px left-460px">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
@@ -69,16 +104,14 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import Content from './components/content.vue';
-  import { testConfigA } from './configurable.data';
-  import { useRoute } from 'vue-router';
-  import { openWindow } from '/@/utils';
+  import ModuleBD from './components/ModuleBD.vue';
+  import { testConfigBDDust } from './configurable.data';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
@@ -87,25 +120,13 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-
-  function redirectTo(config: Config) {
-    const { to } = config.moduleData;
-    if (!to) return;
-    openWindow(to);
-  }
+  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
-      configs.value.push(...testConfigA);
+      configs.value = testConfigBDDust;
+      // configs.value.push(...testConfigBDDust);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -114,6 +135,10 @@
       });
     });
   });
+
+  // function redirectTo(url) {
+  //   window.open(url);
+  // }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -126,11 +151,12 @@
     height: 100%;
     color: @white;
     position: relative;
+    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -186,4 +212,111 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
+
+  .left-t {
+    position: absolute;
+    height: 115px;
+    top: 30px;
+    width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png') no-repeat center;
+    background-size: 100% 100%;
+
+    .tcontent-area {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: space-around;
+      width: 100%;
+      height: 70px;
+      padding: 0 15px;
+      transform: translate(0, -40%);
+
+      .tcontent-l {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+
+      .tcontent-c {
+        display: flex;
+        flex: 3;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      .tcontent-r {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+    }
+  }
+  .right-t {
+    position: absolute;
+    height: 200px;
+    right: 0;
+    margin-bottom: 10px;
+    width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .tcontent-l {
+      flex: 1;
+      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);
+      background-size:
+        auto 100%,
+        auto auto;
+      background-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+    .tcontent-r {
+      flex: 1;
+      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);
+      background-size:
+        auto 100%,
+        auto auto;
+      background-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+  }
 </style>

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

@@ -15,24 +15,32 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <!-- <div class="left-t">
+    <div class="left-t">
       <div class="tcontent-area">
         <div class="tcontent-l">
-          <div>全矿井</div>
-          <div>监测区域</div>
+          <div>监测</div>
+          <div>区域</div>
         </div>
         <div class="tcontent-c">
-          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px"> 低风险</div>
+          <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>
-        <div class="tcontent-r">火灾风险</div>
+        <div class="tcontent-r">
+          <div>火灾</div>
+          <div>风险</div>
+        </div>
       </div>
     </div>
     <div class="right-t">
-      <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }" :bgSize="'small'">
-        <systemJc />
-      </DanelBd>
-    </div> -->
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>灌浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>注氟系统</div>
+      </div>
+    </div>
     <template v-if="isOriginal">
       <ModuleOriginal
         v-for="cfg in configs"
@@ -55,6 +63,17 @@
         :visible="true"
       />
     </template>
+    <template v-else-if="isBD">
+      <ModuleBD
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
       <ModuleEnhanced
@@ -85,14 +104,14 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigA } from './configurable.data';
-  import { useRoute } from 'vue-router';
+  import ModuleBD from './components/ModuleBD.vue';
+  import { testConfigBDFire } from './configurable.data';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('保德煤矿火灾预警系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
@@ -101,20 +120,13 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
-      configs.value = testConfigA;
-      // configs.value.push(...testConfigA);
+      configs.value = testConfigBDFire;
+      // configs.value.push(...testConfigBDFire);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -123,6 +135,10 @@
       });
     });
   });
+
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -135,11 +151,12 @@
     height: 100%;
     color: @white;
     position: relative;
+    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -199,9 +216,9 @@
   .left-t {
     position: absolute;
     height: 115px;
-    margin-bottom: 25px;
+    top: 30px;
     width: 450px;
-    background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+    background: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png') no-repeat center;
     background-size: 100% 100%;
 
     .tcontent-area {
@@ -255,6 +272,51 @@
   }
   .right-t {
     position: absolute;
+    height: 160px;
+    right: 0;
+    top: 40px;
     width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .tcontent-l {
+      flex: 1;
+      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);
+      background-size:
+        auto 100%,
+        auto auto;
+      background-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+    .tcontent-r {
+      flex: 1;
+      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);
+      background-size:
+        auto 100%,
+        auto auto;
+      background-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
   }
 </style>

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

@@ -40,8 +40,8 @@ export function useInitConfigs() {
     });
   });
 
-  function fetchConfigs() {
-    return cfgList({}).then(({ records }) => {
+  function fetchConfigs(pageType?: string) {
+    return cfgList({ pageType }).then(({ records }) => {
       configs.value = records;
     });
   }

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

@@ -37,6 +37,17 @@
         :visible="true"
       />
     </template>
+    <template v-else-if="isBD">
+      <ModuleBD
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
       <ModuleEnhanced
@@ -67,7 +78,8 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigA } from './configurable.data';
+  import ModuleBD from './components/ModuleBD.vue';
+  import { testConfigBDDust } from './configurable.data';
   import { useRoute } from 'vue-router';
 
   interface EnhancedConfig extends Config {
@@ -83,7 +95,7 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
     const query = useRoute().query;
@@ -94,9 +106,9 @@
       mainTitle.value = '智能瓦斯管控系统';
     }
     // configs.value = testConfigB;
-    fetchConfigs().then(() => {
-      configs.value = testConfigA;
-      // configs.value.push(...testConfigA);
+    fetchConfigs('configurable_home').then(() => {
+      configs.value = testConfigBDDust;
+      // configs.value.push(...testConfigBDDust);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -117,11 +129,12 @@
     height: 100%;
     color: @white;
     position: relative;
+    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('/@/assets/images/home-container/configurable/firehome/fire-title.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {

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

@@ -15,24 +15,32 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <!-- <div class="left-t">
+    <div class="left-t">
       <div class="tcontent-area">
         <div class="tcontent-l">
-          <div>全矿井</div>
-          <div>监测区域</div>
+          <div>监测</div>
+          <div>区域</div>
         </div>
         <div class="tcontent-c">
-          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px"> 低风险</div>
+          <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>
-        <div class="tcontent-r">火灾风险</div>
+        <div class="tcontent-r">
+          <div>火灾</div>
+          <div>风险</div>
+        </div>
       </div>
     </div>
     <div class="right-t">
-      <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }" :bgSize="'small'">
-        <systemJc />
-      </DanelBd>
-    </div> -->
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>灌浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>注氟系统</div>
+      </div>
+    </div>
     <template v-if="isOriginal">
       <ModuleOriginal
         v-for="cfg in configs"
@@ -97,14 +105,13 @@
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
   import ModuleBD from './components/ModuleBD.vue';
-  import { testConfigA } from './configurable.data';
-  import { useRoute } from 'vue-router';
+  import { testConfigBDFire } from './configurable.data';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('保德煤矿火灾预警系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
@@ -116,17 +123,10 @@
   const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
-      configs.value = testConfigA;
-      // configs.value.push(...testConfigA);
+      configs.value = testConfigBDFire;
+      // configs.value.push(...testConfigBDFire);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -135,6 +135,10 @@
       });
     });
   });
+
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -152,7 +156,7 @@
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -212,9 +216,9 @@
   .left-t {
     position: absolute;
     height: 115px;
-    margin-bottom: 25px;
+    top: 30px;
     width: 450px;
-    background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+    background: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png') no-repeat center;
     background-size: 100% 100%;
 
     .tcontent-area {
@@ -268,6 +272,51 @@
   }
   .right-t {
     position: absolute;
+    height: 160px;
+    right: 0;
+    top: 40px;
     width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .tcontent-l {
+      flex: 1;
+      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);
+      background-size:
+        auto 100%,
+        auto auto;
+      background-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+    .tcontent-r {
+      flex: 1;
+      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);
+      background-size:
+        auto 100%,
+        auto auto;
+      background-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
   }
 </style>