[Feat 0000] 保德首页根据配置进行调整

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

@@ -90,7 +90,7 @@ export interface ShowStyle {
 
 export interface ModuleDataBoard {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */

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

@@ -105,7 +105,7 @@
   }
   .mini-board_G {
     width: 98px;
-    height: 63px;
+    height: 70px;
     background-image: url('@/assets/images/vent/value-bg-2.png');
     background-size: 100% auto;
     background-position: center bottom;
@@ -181,8 +181,8 @@
     color: @vent-gas-primary-text;
     font-size: 20px;
     font-weight: bold;
-    height: 40px;
-    line-height: 40px;
+    height: 42px;
+    line-height: 42px;
   }
   .mini-board__label_G {
     line-height: 20px;

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

@@ -858,6 +858,22 @@ const BDdustMock = {
       windSpeed: '3.53',
     },
   ],
+  devGbsb: [
+    //隔爆设备信息
+    {
+      devicename: '81202工作面', //地点
+      kind: '22', //性质
+      bag: '10', //水袋(个)
+      timeval: '2024-09-12 15:34:50', //安装日期
+      len: '2000.3', //棚区长度(m)
+      water: '20', //水量(升)
+      netStatus: '连接', //连接状态
+      warnLevel: '低风险', //风险等级
+      fsectarea: '13.8', //巷道断面(m2)
+      num: '3', //获取架数(架)
+      addr: '2201巷道', //吊挂位置
+    },
+  ],
 };
 export const testConfigBDDust: Config[] = [
   {
@@ -1119,23 +1135,23 @@ export const testConfigBDDust: Config[] = [
       table: [
         {
           type: 'C',
-          readFrom: 'dustRelArray',
+          readFrom: 'devGbsb',
           columns: [
             {
-              name: '类别',
-              prop: 'strinstallpos',
+              name: '地点',
+              prop: 'devicename',
             },
             {
-              name: '温度',
-              prop: 'temp',
+              name: '水量(升)',
+              prop: 'water',
             },
             {
-              name: '风速',
-              prop: 'windSpeed',
+              name: '棚区长度(m)',
+              prop: 'len',
             },
             {
-              name: '状态',
-              prop: 'atomState',
+              name: '风险等级',
+              prop: 'warnLevel',
             },
           ],
         },
@@ -1224,6 +1240,8 @@ const BDfireMock = {
     ybNum: '5', //工作面一般风险数
     jdNum: '5', //工作面较大风险数
     zdNum: '5', //工作面重大风险
+    nyWarnLevel: '低风险', //内因火灾预警级别
+    wyWarnLevel: '低风险', //外因火灾预警级别
     sysList: [
       {
         sysName: '工作面名称1', //工作面名称
@@ -1958,22 +1976,26 @@ export const testConfigBDFire: Config[] = [
         direction: 'column',
         basis: ['40%', '60%'],
       },
-      layout: ['gallery', 'complex_list'],
-      board: [],
-      chart: [],
-      gallery: [
+      layout: ['board', 'complex_list'],
+      board: [
         {
-          type: 'D',
+          type: 'A',
           readFrom: 'fireManageInfo',
+          layout: 'label-top',
           items: [
             {
-              label: '低风险',
-              value: '${dfxNum}',
-              color: 'blue',
+              label: '内因风险等级',
+              value: '${nyWarnLevel}',
+            },
+            {
+              label: '外因风险等级',
+              value: '${wyWarnLevel}',
             },
           ],
         },
       ],
+      chart: [],
+      gallery: [],
       gallery_list: [],
       table: [],
       list: [],
@@ -2013,13 +2035,13 @@ export const testConfigBDFire: Config[] = [
     },
   },
   {
-    deviceType: 'pdArray',
+    deviceType: '',
     moduleName: '开采煤层自燃发火特性',
     pageType: '',
     moduleData: {
       header: {
-        show: true,
-        showSelector: true,
+        show: false,
+        showSelector: false,
         showSlot: false,
         selector: {
           value: '${systemname}',
@@ -2045,23 +2067,23 @@ export const testConfigBDFire: Config[] = [
       table: [
         {
           type: 'A',
-          readFrom: 'tttt',
+          readFrom: 'mockTable',
           columns: [
             {
               name: '煤层',
-              prop: 'l',
+              prop: 'a',
             },
             {
               name: '自燃倾向性',
-              prop: 'l',
+              prop: 'b',
             },
             {
               name: '最短发火期',
-              prop: 'v',
+              prop: 'c',
             },
             {
-              name: '煤层',
-              prop: 'v',
+              name: '最小推进速度',
+              prop: 'd',
             },
           ],
         },
@@ -2069,7 +2091,16 @@ export const testConfigBDFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: BDfireMock,
+      mock: {
+        mockTable: [
+          {
+            a: '8煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+        ],
+      },
     },
     showStyle: {
       size: 'width:450px;height:120px;',
@@ -2378,8 +2409,8 @@ export const testConfigBDFire: Config[] = [
               value: '${c2h2Val}',
             },
             {
-              label: '温度',
-              value: '${tempVal}',
+              label: '压差',
+              value: '${dpVal}',
             },
           ],
         },

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

@@ -15,96 +15,106 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <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 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">
+            {{ 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('/grout-home')">
+        <div>智能</div>
+        <div>注浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
+        <div>智能</div>
+        <div>注氮系统</div>
       </div>
-    </template>
+    </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"
+    />
+    <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>
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  import { useInitConfigs } from './hooks/useInit';
-  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';
-
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
+  // import { useInitConfigs } from './hooks/useInit';
+  import ModuleBD from './components/ModuleBD.vue';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
+  import { testConfigBDFire } from './configurable.data';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getBDFireData } from './configurable.api';
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('保德煤矿火灾预警系统');
+  const pageType = 'BD_fire';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
+  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, fetchConfigs } = useInitConfigs();
 
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
-  });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const homedata = ref<any>({});
 
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
-    fetchConfigs('configurable_home').then(() => {
-      configs.value = testConfigBuErTai;
-      // configs.value.push(...testConfigBuErTai);
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
+    getBDFireData({}).then((r) => {
+      homedata.value = r;
     });
+    // fetchConfigs(pageType);
   });
+
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -121,14 +131,14 @@
 
     .top-bg {
       width: 100%;
-      height: 56px;
+      height: 86px;
       background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 56px;
+        height: 86px;
         font-family: 'douyuFont';
-        font-size: 20px;
+        font-size: 26px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -178,4 +188,123 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
+
+  .left-t {
+    position: absolute;
+    height: 115px;
+    top: 30px;
+    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;
+    height: 115px;
+    right: 0;
+    top: 40px;
+    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;
+    z-index: 1;
+
+    .tcontent-l {
+      flex: 1;
+      height: 100%;
+      font-size: 16px;
+      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: 35px;
+      line-height: 40px;
+    }
+    .tcontent-r {
+      flex: 1;
+      height: 100%;
+      font-size: 16px;
+      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: 35px;
+      line-height: 40px;
+    }
+  }
+
+  :deep(.loading-box) {
+    position: unset;
+  }
 </style>