[Feat 0000] 可配置首页添加5.5通风首页页面

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

@@ -252,7 +252,7 @@ export interface ModuleDataPreset extends ReadFrom {
 
 export interface ModuleDataComplexList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */

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

@@ -13,10 +13,60 @@ enum Api {
 const cache = new Map<string, Promise<any>>();
 
 /**
- * 列表接口
+ * 列表接口，5.5专用，和6.0的getHomeData基本一致
  * @param params
  */
-export const list = (params) => defHttp.post({ url: Api.list, params });
+export const list = (params) => {
+  const key = `${Api.list}?${JSON.stringify(params)}`;
+  if (!cache.has(key)) {
+    cache.set(
+      key,
+      defHttp.post({ url: Api.list, params }).finally(() => {
+        cache.delete(key);
+      })
+    );
+  }
+  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) => {
+      e.chartData = [
+        {
+          x: '吸风量',
+          y: e.readData.windQuantity1,
+        },
+        {
+          x: '供风量',
+          y: e.readData.windQuantity2,
+        },
+      ];
+      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: '回风区' },
+      ];
+    });
+    res.device_arr = Object.values(res.device);
+
+    return res;
+  });
+};
 
 export const getHomeData = (params) => {
   const key = `${Api.getHomeData}?${JSON.stringify(params)}`;

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

@@ -305,20 +305,51 @@ export const testConfigVent: Config[] = [
         },
       },
       background: {
-        show: true,
-        type: 'video',
-        link: '/video/gate.mp4',
+        show: false,
+        type: 'image',
+        link: '',
       },
       layout: {
         direction: 'row',
-        items: [],
+        items: [
+          {
+            name: 'complex_list',
+            basis: '100%',
+          },
+        ],
       },
       board: [],
       list: [],
       chart: [],
       table: [],
       gallery: [],
-      complex_list: [],
+      complex_list: [
+        {
+          type: 'F',
+          readFrom: 'device_arr',
+          mapFromData: true,
+          items: [
+            {
+              title: '${name}',
+              contents: [
+                {
+                  label: '总数',
+                  value: '${totalcount}',
+                },
+                {
+                  label: '报警',
+                  value: '${count}',
+                  color: 'red',
+                },
+                {
+                  label: '断开',
+                  value: '${netstatus}',
+                },
+              ],
+            },
+          ],
+        },
+      ],
       gallery_list: [],
       preset: [],
     },

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

@@ -0,0 +1,186 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div v-if="!route.query.embed" class="top-bg">
+      <div class="main-title">{{ mainTitle }}</div>
+    </div>
+    <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
+      <a class="ant-dropdown-link" @click.prevent>
+        全矿井通风检测
+        <CaretDownOutlined />
+      </a>
+      <template #overlay>
+        <MonitorCenter />
+      </template>
+    </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"
+        :data="data"
+        :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"
+        :data="data"
+        :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"
+        :data="data"
+        @close="cfg.visible = false"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="pos-absolute top-70px left-460px z-3">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
+        </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>
+  import { onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  // import MonitorCenter from './components/MonitorCenter.vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { list } from './configurable.api';
+  import { useRoute } from 'vue-router';
+  // import { testConfigVent } from './configurable.data';
+
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
+  const route = useRoute();
+  let interval: number | undefined;
+
+  onMounted(() => {
+    fetchConfigs('vent').then(() => {
+      // configs.value = testConfigVent;
+      updateEnhancedConfigs(configs.value);
+
+      list({}).then(updateData);
+    });
+    setInterval(() => {
+      list({}).then(updateData);
+    }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/themify/deepblue/vent/home/modal-top.png');
+    }
+  }
+
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
+    width: 100%;
+    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: var(--image-modal-top) no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+    }
+  }
+  :deep(.loading-box) {
+    position: unset;
+  }
+</style>