[Feat 0000] 思山岭可配置首页开发

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

@@ -4,6 +4,452 @@ import { fanControlState1 } from '../../monitorManager/fanLocalMonitor1/fanLocal
 // import { BDdustMock, BDfireMock } from './configurable.data.bd';
 import { getThemifyImagesURL } from '/@/utils/ui';
 
+export const testConfigVentSsl: Config[] = [
+  {
+    deviceType: 'fanmain',
+    moduleName: '主通风机系统',
+    pageType: 'vent',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: true,
+          value: '运行风机：${readData.Fan1StartStatus}',
+          trans: {
+            '1': '一号',
+            '0': '二号',
+          },
+        },
+      },
+      background: {
+        show: true,
+        type: 'video',
+        link: '/video/video.mp4',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '33%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'A',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '风量(m³/min)',
+              value: '${flow_merge}',
+            },
+            {
+              label: '负压(Pa)',
+              value: '${fy_merge}',
+            },
+            {
+              label: '漏风率(%)',
+              value: '${leakage}',
+            },
+          ],
+        },
+      ],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:420px;height:280px;',
+      version: '原版',
+      position: 'top:60px;left:0;',
+    },
+  },
+  {
+    deviceType: 'fanlocal',
+    moduleName: '局部通风机系统',
+    pageType: 'vent',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: true,
+          value: '运行风机：${readData.Fan1StartStatus}',
+          trans: {
+            '1': '一号',
+            '0': '二号',
+          },
+        },
+      },
+      background: {
+        show: true,
+        type: 'video',
+        link: '/video/video.mp4',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '33%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'A',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '风量(m³/min)',
+              value: '${flow_merge}',
+            },
+            {
+              label: '负压(Pa)',
+              value: '${fy_merge}',
+            },
+            {
+              label: '漏风率(%)',
+              value: '${leakage}',
+            },
+          ],
+        },
+      ],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal',
+    },
+    showStyle: {
+      size: 'width:420px;height:280px;',
+      version: '原版',
+      position: 'top:350px;left:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '通风设施远程控制',
+    pageType: 'vent',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: true,
+        type: 'video',
+        link: '/video/video.mp4',
+      },
+      layout: {
+        direction: 'row',
+        items: [],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
+    },
+    showStyle: {
+      size: 'width:420px;height:280px;',
+      version: '原版',
+      position: 'top:640px;left:0;',
+    },
+  },
+  {
+    deviceType: 'sys_wind',
+    moduleName: '风量监测',
+    pageType: 'vent_new',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      table: [],
+      preset: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      chart: [
+        {
+          type: 'bar',
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [
+            { show: true, name: '风量(m³/min)', position: 'left' },
+            { show: true, name: '风速(m/s)', position: 'right' },
+          ],
+          dataZoom: [
+            {
+              show: false,
+              end: 20,
+            },
+          ],
+          series: [
+            { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.m3', label: '风量' },
+            { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
+          ],
+        },
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=windrect',
+    },
+    showStyle: {
+      size: 'width:1100px;height:280px;',
+      version: '原版',
+      position: 'top:640px;left:410px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '风窗监测',
+    pageType: 'vent',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: true,
+        type: 'video',
+        link: '/video/video.mp4',
+      },
+      layout: {
+        direction: 'row',
+        items: [],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
+    },
+    showStyle: {
+      size: 'width:420px;height:280px;',
+      version: '原版',
+      position: 'top:60px;right:0;',
+    },
+  },
+  {
+    deviceType: 'safetymonitor',
+    moduleName: '安全监控系统',
+    pageType: 'fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'safetymonitor',
+          columns: [
+            {
+              name: '测点位置',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '数据',
+              prop: 'readData.V',
+            },
+            {
+              name: '单位',
+              prop: 'readData.unit',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:420px;height:280px;',
+      version: '原版',
+      position: 'top:350px;right:0;',
+    },
+  },
+  {
+    deviceType: 'warn',
+    moduleName: '预警监测',
+    pageType: 'vent',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: true,
+          value: '网络异常：${warn[0].netstatus.val}',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [
+        {
+          type: 'timeline',
+          readFrom: 'warn[0]',
+          items: [
+            {
+              label: '报警',
+              value: '${alarm.val}',
+              info: '',
+              color: 'red',
+            },
+            {
+              label: '重大风险预警',
+              value: '${red.val}',
+              info: '',
+              color: 'red',
+            },
+            {
+              label: '较大风险预警',
+              value: '${orange.val}',
+              info: '',
+              color: 'orange',
+            },
+            {
+              label: '一般风险预警',
+              value: '${yellow.val}',
+              info: '',
+              color: 'yellow',
+            },
+            {
+              label: '低风险预警',
+              value: '${blue.val}',
+              info: '',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      preset: [],
+      table: [],
+      gallery: [],
+      chart: [],
+      gallery_list: [],
+      complex_list: [],
+      to: '/monitorChannel/monitor-alarm-home',
+    },
+    showStyle: {
+      size: 'width:420px;height:280px;',
+      version: '原版',
+      position: 'top:640px;right:0;',
+    },
+  },
+];
+
 export const testConfigVent: Config[] = [
   {
     deviceType: 'fanmain',
@@ -4408,7 +4854,7 @@ export let menuList: any[] = [
   { name: '通风预警', MenuItemList: [] },
   { name: '火灾预警', MenuItemList: [] },
   { name: '粉尘预警', MenuItemList: [] },
-]
+];
 export const testConfigBDFire: Config[] = [
   {
     deviceType: 'fireManageInfo',
@@ -5527,9 +5973,8 @@ export const testConfigElectro: Config[] = [
           show: true,
           value: '${strinstallpos}',
           toggleIcon: true,
-
         },
-        
+
         slot: {
           show: false,
           value: '',
@@ -5558,8 +6003,7 @@ export const testConfigElectro: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'cardData',
-         
+          readFrom: 'datalist',
         },
       ],
       to: '/ventilate/warn/home',
@@ -5604,10 +6048,64 @@ export const testConfigElectro: Config[] = [
             basis: '70%',
           },
         ],
-
       },
       board: [],
-      list: [],
+      list: [
+        {
+          type: 'N',
+          readFrom: 'arrayCount',
+          items: [
+            {
+              label: '分区1',
+              value: '${coVal}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分区2',
+              value: '${co2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分区3',
+              value: '${o2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分区4',
+              value: '${tempVal}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分区5',
+              value: '${coVal}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分区6',
+              value: '${co2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分区7',
+              value: '${o2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分区8',
+              value: '${tempVal}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
       chart: [
         {
           type: 'line',
@@ -5619,7 +6117,7 @@ export const testConfigElectro: Config[] = [
             { readFrom: 'chartData', xprop: 'time', yprop: 'coRealTime', label: 'CO实时值' },
             { readFrom: 'chartData', xprop: 'time', yprop: 'coWarn', label: 'CO报警阈值' },
           ],
-        }
+        },
       ],
       table: [],
       gallery: [],
@@ -5628,9 +6126,8 @@ export const testConfigElectro: Config[] = [
       preset: [
         {
           readFrom: 'tempData',
-         
-        }
-        ],
+        },
+      ],
       to: '',
     },
     showStyle: {
@@ -5639,5 +6136,4 @@ export const testConfigElectro: Config[] = [
       position: 'top:0px;right:0px;',
     },
   },
-
 ];

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

@@ -0,0 +1,298 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <VentModal />
+    </div>
+    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
+    <template v-if="!route.query.deviceType">
+      <div v-if="!route.query.embed" class="top-bg">
+        <div class="main-title">{{ mainTitle }}</div>
+      </div>
+      <a class="ant-dropdown-link module-dropdown" @click.prevent="showBar = !showBar">
+        全矿井通风检测
+        <CaretDownOutlined />
+      </a>
+      <MonitorBar
+        v-if="showBar"
+        class="module-monitor-bar"
+        :style="{ width: `${barWidth}px`, left: `calc(50% - ${Math.floor(barWidth / 2)}px)` }"
+        :is-data-real-time="isDataRealTime"
+        :data="data"
+      />
+      <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
+        <template #overlay>
+        </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="flex pos-absolute bottom-10px left-60px 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
+        v-if="sysDataType === 'all'"
+        :class="{ 'realtime-mode': isDataRealTime }"
+        alt="切换数据模式"
+        class="switch-button report-mode right-525px"
+        @click="switchDataMode"
+      ></div>
+      <div class="switch-button icon-goto right-475px" @click="goMicroApp()"></div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, ref, watch } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  import MonitorBar from './components/MonitorBar.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, useRouter } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
+  // import { testConfigVentSsl } from './configurable.data';
+  import { computed } from 'vue';
+  // import { testConfigVent, testConfigVentRealtime } from './configurable.data';
+
+  const { sysDataType = 'monitor', title = '智能通风管控系统' } = useGlobSetting();
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
+  const route = useRoute();
+  const router = useRouter();
+  const isDataRealTime = ref(sysDataType === 'monitor');
+  const showBar = ref(true);
+  /** 最长的模块的长度（一版指正下方模块） */
+  const barWidth = computed<number>(() => {
+    for (let index = 0; index < configs.value.length; index++) {
+      const element = configs.value[index];
+      const { size, position } = element.showStyle;
+      const [_, width] = size.match(/width:([0-9]+)px/) || [];
+      if (position.includes('bottom') || parseInt(width) > 800) {
+        return parseInt(width);
+      }
+    }
+    return 1000;
+  });
+  let interval: number | undefined;
+
+  function switchDataMode() {
+    isDataRealTime.value = !isDataRealTime.value;
+    refresh();
+  }
+
+  function refresh() {
+    fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
+      // configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
+      // configs.value = testConfigVentSsl;
+      updateEnhancedConfigs(configs.value);
+
+      list({
+        types: configs.value
+          .filter((e) => e.deviceType)
+          .map((e) => e.deviceType)
+          .join(','),
+      }).then(updateData);
+    });
+  }
+
+  function initInterval() {
+    setInterval(() => {
+      list({}).then(updateData);
+    }, 60000);
+  }
+
+  function goMicroApp() {
+    router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        type: 'model3D',
+        deviceType: 'model3D',
+      },
+    });
+  }
+
+  watch(
+    () => route.query,
+    () => {
+      if (route.query.deviceType) {
+        // 仅需要展示子应用，模拟 unmounted
+        clearInterval(interval);
+      } else {
+        // 模拟 mounted
+        refresh();
+        initInterval();
+      }
+    }
+  );
+
+  onMounted(() => {
+    refresh();
+    initInterval();
+  });
+
+  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');
+    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
+    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
+    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.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: 5px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 60px;
+      right: 480px;
+    }
+    .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;
+    }
+
+    .switch-button {
+      width: 34px;
+      height: 34px;
+      position: absolute;
+      // right: 5px;
+      bottom: 300px;
+      z-index: 5;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .report-mode {
+      background-image: var(--image-monitor-doc);
+    }
+    .realtime-mode {
+      background-image: var(--image-monitor-realtime);
+    }
+    .icon-goto {
+      background-image: var(--image-monitor-goto);
+    }
+
+    .module-monitor-bar {
+      position: absolute;
+      top: 100px;
+      width: 1000px;
+      height: 200px;
+      left: calc(50% - 500px);
+    }
+  }
+  :deep(.loading-box) {
+    position: unset;
+  }
+</style>