Browse Source

[Feat 0000] 布尔台可配置首页模拟配置及子模块调整

houzekong 1 month ago
parent
commit
6054bfecad

BIN
public/video/fanLocal.mp4


BIN
public/video/gate.mp4


BIN
public/video/mainFan.mp4


BIN
src/assets/vedio/gate.mp4


BIN
src/assets/vedio/mainFan.mp4


+ 1 - 1
src/views/vent/home/configurable/components/content.vue

@@ -338,7 +338,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: -1;
+    z-index: 0;
     object-fit: fill;
   }
   .content__module {

+ 36 - 23
src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -58,7 +58,7 @@
     }
 
     // 该项作为下面所有图表依赖的基准系列数据
-    const baseSeries: { name: string; data: { name: string; value: any }[] }[] = sorttedData.reduce((res: any[], baseData) => {
+    const baseSeries: { name: string; data: [string, string] }[] = sorttedData.reduce((res: any[], baseData) => {
       series.forEach((serie) => {
         res.push({
           name: getFormattedText(baseData, serie.label),
@@ -79,24 +79,25 @@
           textStyle,
           show: legend.show,
         },
+        tooltip: {
+          trigger: 'item',
+        },
         color: ['#d9a1ff', '#00d1ff', '#82fe78'],
         series: baseSeries.map((serie) => {
           return {
             type: 'pie',
             radius: ['50%', '75%'],
             center: ['50%', '55%'],
-            name: serie.name,
-            data: serie.data.map((serie) => {
-              return {
-                ...serie,
-                labelLine: { show: false },
-                label: { show: false },
-                itemStyle: {
-                  shadowBlur: 20,
-                  shadowColor: '#259bcf',
-                },
-              };
-            }),
+            labelLine: { show: false },
+            label: { show: false },
+            itemStyle: {
+              shadowBlur: 20,
+              shadowColor: '#259bcf',
+            },
+            data: serie.data.map((e) => ({
+              name: e[0],
+              value: e[1],
+            })),
           };
         }),
       };
@@ -104,20 +105,29 @@
 
     // 柱状图
     if (type === 'bar') {
+      const barGapMap = { 1: '-100%', 2: '-85%' };
       return {
         textStyle,
         grid: {
           top: 50,
-          bottom: 30,
+          bottom: 50,
         },
         legend: {
           textStyle,
           show: legend.show,
         },
+        tooltip: {
+          trigger: 'item',
+        },
         xAxis: xAxis.map((e) => {
           return {
             ...e,
             type: 'category',
+            axisLabel: {
+              interval: 0,
+              width: 150,
+              overflow: 'break',
+            },
           };
         }),
         yAxis: yAxis.map((e) => {
@@ -125,8 +135,7 @@
             ...e,
             splitLine: {
               lineStyle: {
-                color: '#ffffff',
-                opacity: 0.3,
+                opacity: 0.1,
               },
             },
           };
@@ -140,6 +149,7 @@
             symbolPosition: 'end',
             symbolSize: [16, 16],
             symbolOffset: [0, -8],
+            barGap: barGapMap[baseSeries.length],
             yAxisIndex: index,
             itemStyle: {
               color: colors[index % colors.length],
@@ -150,8 +160,8 @@
             type: 'bar',
             silent: true,
             yAxisIndex: index,
-            tooltip: { show: false },
             barWidth: 8,
+            barGap: '100%',
             itemStyle: {
               color: new graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: colors[index % colors.length] },
@@ -178,14 +188,18 @@
         },
         grid: {
           left: 60,
-          top: 50,
+          top: 40,
           right: 60,
-          bottom: 50,
+          bottom: 30,
         },
         xAxis: xAxis.map((e) => {
           return {
             ...e,
             type: 'category',
+            axisLabel: {
+              width: 100,
+              overflow: 'break',
+            },
           };
         }),
         yAxis: yAxis.map((e) => {
@@ -193,8 +207,7 @@
             ...e,
             splitLine: {
               lineStyle: {
-                color: '#fff',
-                opacity: 0.3,
+                opacity: 0.1,
               },
             },
           };
@@ -233,7 +246,7 @@
             ...e,
             splitLine: {
               lineStyle: {
-                opacity: 0.3,
+                opacity: 0.1,
               },
             },
           };
@@ -278,7 +291,7 @@
             splitLine: {
               lineStyle: {
                 color: '#fff',
-                opacity: 0.3,
+                opacity: 0.1,
               },
             },
           };

+ 29 - 1
src/views/vent/home/configurable/configurable.api.ts

@@ -27,7 +27,35 @@ export const getHomeData = (params) => {
       })
     );
   }
-  return cache.get(key) as Promise<any>;
+  return (cache.get(key) as Promise<any>).then((res) => {
+    res.fanmain.forEach((e) => {
+      if (e.readData.Fan2StartStatus === '1') {
+        e.current = '二号';
+        e.readData.FanFreqHz = e.readData.Fan2FreqHz;
+      } else {
+        e.current = '一号';
+        e.readData.FanFreqHz = e.readData.Fan1FreqHz;
+      }
+    });
+    res.fanlocal.forEach((e) => {
+      if (e.readData.Fan2StartStatus === '1') {
+        e.current = '二号';
+        e.readData.FanfHz = e.readData.Fan2fHz;
+      } else {
+        e.current = '一号';
+        e.readData.FanfHz = e.readData.Fan1fHz;
+      }
+    });
+    res.sys_majorpath.forEach((e) => {
+      e.piechart = [
+        { val: e.majorpath.drag_1, label: '进风区' },
+        { val: e.majorpath.drag_2, label: '用风区' },
+        { val: e.majorpath.drag_3, label: '回风区' },
+      ];
+    });
+
+    return res;
+  });
 };
 export const getBDDustData = (params) => {
   const key = `${Api.getBDDustData}?${JSON.stringify(params)}`;

+ 87 - 64
src/views/vent/home/configurable/configurable.data.ts

@@ -1,9 +1,10 @@
 import { Config } from '../../deviceManager/configurationTable/types';
+import FanLocalVedio from '@/assets/vedio/fanLocal.mp4?url';
 
 export const testConfigBuErTai: Config[] = [
   {
-    deviceType: 'fanlocal',
-    moduleName: 'fanlocal-左上',
+    deviceType: 'fanmain',
+    moduleName: '主通风机系统',
     pageType: '',
     moduleData: {
       header: {
@@ -14,13 +15,13 @@ export const testConfigBuErTai: Config[] = [
           value: '${strinstallpos}',
         },
         slot: {
-          value: '${strinstallpos}',
+          value: '运行风机:${current}',
         },
       },
       background: {
         show: true,
         type: 'video',
-        link: '/src/assets/vedio/fanLocal.mp4',
+        link: '/video/mainFan.mp4',
       },
       slice: {
         direction: 'column',
@@ -30,16 +31,20 @@ export const testConfigBuErTai: Config[] = [
       board: [
         {
           type: 'A',
-          readFrom: '',
+          readFrom: 'readData',
           layout: 'val-top',
           items: [
             {
-              value: '${readData.windSpeed1}',
-              label: '风速1',
+              label: '风量(m³/min)',
+              value: '${m3}',
             },
             {
-              label: '风速2',
-              value: '${readData.windSpeed2}',
+              label: '负压(Pa)',
+              value: '${FanFreqHz}',
+            },
+            {
+              label: '频率(Hz)',
+              value: '${DataPa}',
             },
           ],
         },
@@ -59,8 +64,8 @@ export const testConfigBuErTai: Config[] = [
     },
   },
   {
-    deviceType: 'fanmain',
-    moduleName: 'fanmain-左中',
+    deviceType: 'fanlocal',
+    moduleName: '局部通风机系统',
     pageType: '',
     moduleData: {
       header: {
@@ -71,13 +76,13 @@ export const testConfigBuErTai: Config[] = [
           value: '${strinstallpos}',
         },
         slot: {
-          value: '${strinstallpos}',
+          value: '运行风机:${current}',
         },
       },
       background: {
         show: true,
         type: 'video',
-        link: '/src/assets/vedio/fanLocal.mp4',
+        link: '/video/fanLocal.mp4',
       },
       slice: {
         direction: 'column',
@@ -87,16 +92,20 @@ export const testConfigBuErTai: Config[] = [
       board: [
         {
           type: 'A',
-          readFrom: '',
+          readFrom: 'readData',
           layout: 'val-top',
           items: [
             {
-              value: '${readData.windSpeed1}',
-              label: '风速1',
+              label: '吸风量(m³/min)',
+              value: '${windQuantity1}',
             },
             {
-              label: '风速2',
-              value: '${readData.windSpeed2}',
+              label: '供风量(m³/min)',
+              value: '${windQuantity2}',
+            },
+            {
+              label: '频率(Hz)',
+              value: '${FanfHz}',
             },
           ],
         },
@@ -116,8 +125,8 @@ export const testConfigBuErTai: Config[] = [
     },
   },
   {
-    deviceType: 'unknown',
-    moduleName: 'unknown-左下',
+    deviceType: '',
+    moduleName: '通风设施远程控制',
     pageType: '',
     moduleData: {
       header: {
@@ -134,7 +143,7 @@ export const testConfigBuErTai: Config[] = [
       background: {
         show: true,
         type: 'video',
-        link: '/src/assets/vedio/fanLocal.mp4',
+        link: '/video/gate.mp4',
       },
       slice: {
         direction: 'column',
@@ -157,8 +166,8 @@ export const testConfigBuErTai: Config[] = [
     },
   },
   {
-    deviceType: 'midinfo',
-    moduleName: 'midinfo-中间',
+    deviceType: '',
+    moduleName: '风量监测',
     pageType: '',
     moduleData: {
       header: {
@@ -192,16 +201,16 @@ export const testConfigBuErTai: Config[] = [
       chart: [
         {
           type: 'bar',
-          readFrom: 'sysdata',
+          readFrom: '',
           legend: { show: true },
           xAxis: [{ show: true }],
           yAxis: [
-            { show: true, name: '风量', position: 'left' },
-            { show: true, name: '风速', position: 'right' },
+            { show: true, name: '风量(m³/min)', position: 'left' },
+            { show: true, name: '风速(m/s)', position: 'right' },
           ],
           series: [
-            { readFrom: 'historydata', xprop: 'm3', yprop: 'm3', label: '风量' },
-            { readFrom: 'historydata', xprop: 'spd', yprop: 'spd', label: '风速' },
+            { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.m3', label: '风量' },
+            { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.incipientWindSpeed1', label: '风速' },
           ],
         },
       ],
@@ -213,19 +222,19 @@ export const testConfigBuErTai: Config[] = [
     },
   },
   {
-    deviceType: 'sys_wind',
-    moduleName: 'blast_delta-右上预设类',
+    deviceType: 'sys_majorpath',
+    moduleName: '关键通风路线',
     pageType: '',
     moduleData: {
       header: {
-        show: false,
+        show: true,
         showSelector: true,
         showSlot: false,
         selector: {
-          value: '${strinstallpos}',
+          value: '${devicePos}',
         },
         slot: {
-          value: '${strinstallpos}',
+          value: '${devicePos}',
         },
       },
       background: {
@@ -235,26 +244,26 @@ export const testConfigBuErTai: Config[] = [
       },
       slice: {
         direction: 'column',
-        basis: ['70%', '30%'],
+        basis: ['60%', '40%'],
       },
       layout: ['chart', 'board'],
       board: [
         {
           type: 'D',
-          readFrom: 'sys_wind[0]',
+          readFrom: 'majorpath',
           layout: 'label-top',
           items: [
             {
-              label: '面积',
-              value: '${fsectarea}',
+              label: '矿井风量',
+              value: '${m3_total}',
             },
             {
-              label: '分站名称',
-              value: '${stationname}',
+              label: '矿井阻力',
+              value: '${drag_total}',
             },
             {
-              label: '分站类别',
-              value: '${stationtype}',
+              label: '等积孔',
+              value: '6.12',
             },
           ],
         },
@@ -265,18 +274,12 @@ export const testConfigBuErTai: Config[] = [
       table: [],
       chart: [
         {
-          type: 'bar',
-          readFrom: 'sysdata',
-          legend: { show: true },
-          xAxis: [{ show: true }],
-          yAxis: [
-            { show: true, name: '风量', position: 'left' },
-            { show: true, name: '风速', position: 'right' },
-          ],
-          series: [
-            { readFrom: 'historydata', xprop: 'm3', yprop: 'm3', label: '风量' },
-            { readFrom: 'historydata', xprop: 'spd', yprop: 'spd', label: '风速' },
-          ],
+          type: 'pie',
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: false }],
+          yAxis: [{ show: false, name: '风量', position: 'left' }],
+          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'val', label: '-' }],
         },
       ],
       gallery_list: [],
@@ -289,14 +292,14 @@ export const testConfigBuErTai: Config[] = [
     },
   },
   {
-    deviceType: 'sys_majorpath',
-    moduleName: 'unknown-右中',
+    deviceType: 'sys_surface_caimei',
+    moduleName: '工作面智能监控',
     pageType: '',
     moduleData: {
       header: {
-        show: false,
+        show: true,
         showSelector: true,
-        showSlot: true,
+        showSlot: false,
         selector: {
           value: '${devicePos}',
         },
@@ -311,10 +314,30 @@ export const testConfigBuErTai: Config[] = [
       },
       slice: {
         direction: 'column',
-        basis: ['100%'],
+        basis: ['65%', '35%'],
       },
-      layout: ['chart'],
-      board: [],
+      layout: ['chart', 'board'],
+      board: [
+        {
+          type: 'B',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '进风',
+              value: '${jin}',
+            },
+            {
+              label: '回风',
+              value: '${hui}',
+            },
+            {
+              label: '需风量',
+              value: '${xufengliang}',
+            },
+          ],
+        },
+      ],
       list: [],
       preset: [],
       table: [],
@@ -322,13 +345,13 @@ export const testConfigBuErTai: Config[] = [
       chart: [
         {
           type: 'line',
-          readFrom: 'sysdata',
+          readFrom: '',
           legend: { show: true },
           xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '风量', position: 'left' }],
+          yAxis: [{ show: true, name: '风量(m³/min)', position: 'left' }],
           series: [
-            { readFrom: 'historydata', xprop: 'm3', yprop: 'jin', label: '进风' },
-            { readFrom: 'historydata', xprop: 'spd', yprop: 'hui', label: '回风' },
+            { readFrom: 'history', xprop: 'time', yprop: 'jin', label: '进风' },
+            { readFrom: 'history', xprop: 'time', yprop: 'hui', label: '回风' },
           ],
         },
       ],

+ 82 - 185
src/views/vent/home/configurable/index.vue

@@ -15,84 +15,100 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <div class="left-t">
-      <div class="tcontent-area">
-        <div class="tcontent-l">
-          <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"
+      />
+    </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"
+      />
+    </template>
+    <template v-else>
+      <!-- 下面是正常展示的各新版模块 -->
+      <ModuleEnhanced
+        v-for="cfg in enhancedConfigs"
+        :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"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="pos-absolute top-70px left-460px">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
-        <div class="tcontent-c">
-          <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>
-        <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> -->
-    <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"
-      :page-type="pageType"
-    />
-    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+    </template>
+    <!-- <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
-    </div>
+    </div> -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs } from './hooks/useInit';
-  import ModuleBD from './components/ModuleBD.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getBDDustData } from './configurable.api';
-  // import { getToken } from '/@/utils/auth';
+  import { Config } from '../../deviceManager/configurationTable/types';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  import { testConfigBuErTai } from './configurable.data';
+  import { useRoute } from 'vue-router';
+  // import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+  interface EnhancedConfig extends Config {
+    visible: boolean;
+  }
 
-  // const iframeUrl = ref(
-  //   `${location.protocol}//${location.hostname}:8091/dashboard/analysis?type=empty&deviceType=empty&showid=1&token=${getToken()}`
-  // );
-  // const loading = ref(true);
-  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
-  const pageType = 'BD_dust';
+  const mainTitle = ref('智能通风管控系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const { configs, fetchConfigs } = useInitConfigs();
-  const homedata = ref<any>({});
-  // function hideLoading() {
-  //   loading.value = false;
-  // }
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
+
+  const hiddenList = computed(() => {
+    return enhancedConfigs.value.filter((e) => e.visible === false);
+  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+
   onMounted(() => {
+    const query = useRoute().query;
+    if (query.fire) {
+      mainTitle.value = '智能火灾管控系统';
+    }
+    if (query.gas) {
+      mainTitle.value = '智能瓦斯管控系统';
+    }
     // configs.value = testConfigB;
-    getBDDustData({}).then((r) => {
-      homedata.value = r;
+    fetchConfigs('configurable_home').then(() => {
+      configs.value = testConfigBuErTai;
+      // configs.value.push(...testConfigBuErTai);
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
     });
-    fetchConfigs(pageType);
   });
-
-  // function redirectTo(url) {
-  //   window.open(url);
-  // }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -105,18 +121,18 @@
     height: 100%;
     color: @white;
     position: relative;
-    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+    // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
-      height: 86px;
-      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
+      height: 56px;
+      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 86px;
+        height: 56px;
         font-family: 'douyuFont';
-        font-size: 26px;
+        font-size: 20px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -166,123 +182,4 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
-
-  .left-t {
-    position: absolute;
-    height: 115px;
-    top: 50px;
-    width: 450px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
-    background-color: #000723;
-    background-repeat: no-repeat;
-    background-position: 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: 160px;
-    right: 0;
-    top: 50px;
-    width: 450px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
-    background-color: #000723;
-    background-repeat: no-repeat;
-    background-position: 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;
-      cursor: pointer;
-    }
-    .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;
-      cursor: pointer;
-    }
-  }
-
-  :deep(.loading-box) {
-    position: unset;
-  }
 </style>

+ 6 - 2
src/views/vent/home/configurable/index copy.vue → src/views/vent/home/configurable/vent.vue

@@ -56,6 +56,9 @@
         </div>
       </div>
     </template>
+    <!-- <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+      <VentModal />
+    </div> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -69,6 +72,7 @@
   import ModuleCommon from './components/ModuleCommon.vue';
   import { testConfigBuErTai } from './configurable.data';
   import { useRoute } from 'vue-router';
+  // import VentModal from '/@/components/vent/micro/ventModal.vue';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
@@ -117,12 +121,12 @@
     height: 100%;
     color: @white;
     position: relative;
-    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+    // 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/vent/home/modal-top.png') no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {