Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

package.json

@@ -47,7 +47,7 @@
     "dayjs": "^1.11.9",
     "dexie": "^3.2.2",
     "dom-align": "^1.12.4",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
     "emoji-mart-vue-fast": "^15.0.0",
     "enquire.js": "^2.1.6",
     "gsap": "^3.11.3",

pnpm-lock.yaml

@@ -84,8 +84,8 @@ dependencies:
     specifier: ^1.12.4
     version: 1.12.4
   echarts:
-    specifier: ^5.4.3
-    version: 5.4.3
+    specifier: ^5.5.0
+    version: 5.6.0
   emoji-mart-vue-fast:
     specifier: ^15.0.0
     version: 15.0.0(vue@3.3.6)
@@ -3341,9 +3341,9 @@ packages:
       core-js: 3.33.1
       crypto-js: 4.1.1
       dayjs: 1.11.10
-      echarts: 5.4.3
-      echarts-gl: 2.0.9(echarts@5.4.3)
-      echarts-liquidfill: 3.1.0(echarts@5.4.3)
+      echarts: 5.6.0
+      echarts-gl: 2.0.9(echarts@5.6.0)
+      echarts-liquidfill: 3.1.0(echarts@5.6.0)
       html2canvas: 1.4.1
       jspdf: 2.5.1
       lodash-es: 4.17.21
@@ -6757,29 +6757,29 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==, tarball: http://registry.npm.taobao.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz}
     dev: true
 
-  /echarts-gl@2.0.9(echarts@5.4.3):
+  /echarts-gl@2.0.9(echarts@5.6.0):
     resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==, tarball: http://registry.npm.taobao.org/echarts-gl/-/echarts-gl-2.0.9.tgz}
     peerDependencies:
       echarts: ^5.1.2
     dependencies:
       claygl: 1.3.0
-      echarts: 5.4.3
+      echarts: 5.6.0
       zrender: 5.4.4
     dev: false
 
-  /echarts-liquidfill@3.1.0(echarts@5.4.3):
+  /echarts-liquidfill@3.1.0(echarts@5.6.0):
     resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==, tarball: http://registry.npm.taobao.org/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz}
     peerDependencies:
       echarts: ^5.0.1
     dependencies:
-      echarts: 5.4.3
+      echarts: 5.6.0
     dev: false
 
-  /echarts@5.4.3:
-    resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==, tarball: http://registry.npm.taobao.org/echarts/-/echarts-5.4.3.tgz}
+  /echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
     dependencies:
       tslib: 2.3.0
-      zrender: 5.4.4
+      zrender: 5.6.1
     dev: false
 
   /editorconfig@1.0.4:
@@ -13082,7 +13082,7 @@ packages:
     dev: true
 
   /tslib@2.3.0:
-    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, tarball: http://registry.npm.taobao.org/tslib/-/tslib-2.3.0.tgz}
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
     dev: false
 
   /tslib@2.6.2:
@@ -14309,7 +14309,13 @@ packages:
     dev: true
 
   /zrender@5.4.4:
-    resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==, tarball: http://registry.npm.taobao.org/zrender/-/zrender-5.4.4.tgz}
+    resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
+
+  /zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
     dependencies:
       tslib: 2.3.0
     dev: false

src/design/theme.less

@@ -90,6 +90,7 @@ html[data-theme='light'] {
 @vent-text-base: var(--vent-text-base);
 @vent-base-light-bg: var(--vent-base-light-bg);
 @vent-configurable-module-bg: var(--vent-configurable-module-bg);
+@vent-configurable-original-module-bg: var(--vent-configurable-original-module-bg);
 @vent-configurable-bg: var(--vent-configurable-bg);
 @vent-base-light-bg-opcity: var(--vent-base-light-bg-opcity);
 @vent-configurable-module-border-bd: var(--vent-configurable-module-border-bd);

src/design/themify/dark.less

@@ -37,6 +37,7 @@ html[data-theme='dark2'] {
 
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff22;
+  --vent-configurable-original-module-bg: #3df6ff15;
   --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
   --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
   --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);

src/design/themify/deepblue.less

@@ -40,6 +40,7 @@ html[data-theme='deepblue'] {
 
   --vent-configurable-bg: #02132c;
   --vent-configurable-module-bg: #0d2037;
+  --vent-configurable-original-module-bg: #0d203711;
   --vent-configurable-module-border-bd: linear-gradient(#3b4c65 0%, #3b4c65 60%, #000723);
   --vent-configurable-dropdown: linear-gradient(to bottom, #2d3e55, #09172c);
   --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);

src/design/themify/default.less

@@ -39,6 +39,7 @@ html {
 
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff22;
+  --vent-configurable-original-module-bg: #00336655;
   --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
   --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
   --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
@@ -61,5 +62,4 @@ html {
   --vent-warn-tab-bg: #0f376ccc;
   --vent-warn-tab-border: #166ab5;
   --vent-warn-tab-bg-actived: #209dfc;
-  
 }

src/design/themify/light.less

@@ -37,6 +37,7 @@ html[data-theme='light'] {
 
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff22;
+  --vent-configurable-original-module-bg: #3df6ff15;
   --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
   --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
   --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);

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

@@ -77,7 +77,18 @@ export interface ModuleData {
     direction: 'column' | 'row';
     items: {
       /** 分区名称，对应下方的配置 */
-      name: 'board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta' | 'measure_detail' | 'qh_curve';
+      name:
+        | 'board'
+        | 'list'
+        | 'chart'
+        | 'table'
+        | 'gallery'
+        | 'complex_list'
+        | 'gallery_list'
+        | 'blast_delta'
+        | 'measure_detail'
+        | 'qh_curve'
+        | 'device_alarm';
       /** 分区大小 */
       basis: string;
       overflow?: boolean;
@@ -127,7 +138,7 @@ export interface CommonItem {
 
 export interface ModuleDataBoard extends ReadFrom {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top';
   /** 核心配置，每个展示牌对应一项 */
@@ -136,7 +147,7 @@ export interface ModuleDataBoard extends ReadFrom {
 
 export interface ModuleDataList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
@@ -195,7 +206,9 @@ export interface ModuleDataChart extends ReadFrom {
     | 'line_smooth_complex'
     | 'bar_stack'
     | 'bar_cylinder'
-    | 'bar_cylinder_wide';
+    | 'bar_cylinder_wide'
+    | 'pie_halo'
+    | 'pie_drag';
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */

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

@@ -0,0 +1,147 @@
+<template>
+  <a-row class="midback-info" :gutter="5">
+    <div v-for="item in computedConfig" :key="item.class" style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
+      <div class="middata" :class="item.class">
+        <div class="midnumberval">{{ item.value }}</div>
+        <div class="infotext1">{{ item.label }}</div>
+      </div>
+    </div>
+    <!-- <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
+      <div class="middata middata2">
+        <div class="midnumberval">{{ '123' }}</div>
+        <div class="infotext1">总进风量(m³/min)</div>
+      </div>
+    </div>
+    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
+      <div class="middata middata3">
+        <div class="midnumberval">{{ '123' }}</div>
+        <div class="infotext1">计划风量(m³/min)</div>
+      </div>
+    </div>
+    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
+      <div class="middata middata4">
+        <div class="midnumberval">{{ '123' }}</div>
+        <div class="infotext1">通风巷道长度(万m)</div>
+      </div>
+    </div>
+    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
+      <div class="middata middata6">
+        <div class="midnumberval">{{ '123' }}%</div>
+        <div class="infotext1">有效风量率</div>
+      </div>
+    </div> -->
+  </a-row>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { getFormattedText } from '../hooks/helper';
+
+  const props = defineProps<{
+    isDataRealTime: boolean;
+    data: any;
+  }>();
+
+  const config = computed(() => {
+    if (props.isDataRealTime) {
+      return [
+        {
+          label: '总回风量(m³/min)',
+          value: '${midinfo[0].sysdata.zonghuifeng}',
+        },
+        {
+          label: '总进风量(m³/min)',
+          value: '${midinfo[0].sysdata.zongjinfeng}',
+        },
+        {
+          label: '计划风量(m³/min)',
+          value: '${midinfo[0].sysdata.totalPlanM3}',
+        },
+        {
+          label: '通风巷道长度(万m)',
+          value: '223196',
+          // value: '${midinfo[0].sysdata.totallength}',
+        },
+        {
+          label: '有效风量率',
+          value: '${midinfo[0].sysinfo.useM3Perent}',
+        },
+      ];
+    } else {
+      return [
+        {
+          label: '总回风量(m³/min)',
+          value: '${midinfo[0].sysinfo.info.totalRetM3}',
+        },
+        {
+          label: '总进风量(m³/min)',
+          value: '${midinfo[0].sysinfo.info.totalIntM3}',
+        },
+        {
+          label: '计划风量(m³/min)',
+          value: '${midinfo[0].sysinfo.info.totalPlanM3}',
+        },
+        {
+          label: '通风巷道长度(万m)',
+          value: '${midinfo[0].sysinfo.info.flength}',
+        },
+        {
+          label: '有效风量率',
+          value: '${midinfo[0].sysinfo.info.useM3Perent}',
+        },
+      ];
+    }
+  });
+
+  const computedConfig = computed(() => {
+    const data = props.data;
+    return config.value.map((e, i) => {
+      return {
+        label: getFormattedText(data, e.label),
+        value: getFormattedText(data, e.value),
+        class: `middata${i}`,
+      };
+    });
+  });
+</script>
+<style lang="less" scoped>
+  .middata {
+    // margin-top: 7px;
+    padding: 5px 0px 5px 50px;
+    width: calc(100% - 10px);
+    height: 65px;
+    margin-top: 4px;
+    margin-left: 10px;
+    margin-bottom: 5px;
+    background-size: 100% 100%;
+  }
+  .middata0 {
+    background: url('/@/assets/images/home-container/configurable/middata1.png');
+  }
+  .middata1 {
+    background: url('/@/assets/images/home-container/configurable/middata2.png');
+  }
+  .middata2 {
+    background: url('/@/assets/images/home-container/configurable/middata3.png');
+  }
+  .middata3 {
+    background: url('/@/assets/images/home-container/configurable/middata6.png');
+  }
+  .middata4 {
+    background: url('/@/assets/images/home-container/configurable/middata5.png');
+  }
+  .middata5 {
+    background: url('/@/assets/images/home-container/configurable/middata4.png');
+  }
+  .midnumberval {
+    z-index: 4;
+    padding-top: -10px;
+    // position: absolute;
+    // top: -6px;
+    text-align: center;
+    font-weight: 600;
+    color: #f6ca0e;
+    font-size: 18px;
+    font-family: 'Microsoft YaHei', Arial;
+    // font-family: 'UnidreamLED';
+  }
+</style>

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

@@ -21,7 +21,7 @@
       <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
-          <div class="content__module flex flex-justify-around flex-items-center flex-wrap pt-10px pb-10px">
+          <div class="content__module flex flex-justify-around flex-items-center flex-wrap">
             <MiniBoard
               v-for="item in config.items"
               :key="item.prop"
@@ -67,6 +67,9 @@
         <template v-if="config.name === 'qh_curve'">
           <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
         </template>
+        <template v-if="config.name === 'device_alarm'">
+          <DeviceAlarm class="content__module" :devicedata="config.data" />
+        </template>
         <template v-if="config.name === 'measure_detail'">
           <MeasureDetail
             class="content__module"
@@ -110,6 +113,7 @@
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
   import QHCurve from './preset/QHCurve.vue';
   import MeasureDetail from './preset/MeasureDetail.vue';
+  import DeviceAlarm from './preset/DeviceAlarm.vue';
   // import FIreWarn from './preset/FIreWarn.vue';
   // import FIreControl from './preset/FIreControl.vue';
 

src/views/vent/home/configurable/components/original/moduleBottom.vue

@@ -76,7 +76,7 @@
     height: calc(100% - 33px);
     width: calc(100% - 15px);
     backdrop-filter: blur(5px);
-    background-color: var(--vent-configurable-module-bg);
+    background-color: var(--vent-configurable-original-module-bg);
     margin-left: 5px;
   }
 

src/views/vent/home/configurable/components/original/moduleLeft.vue

@@ -77,7 +77,7 @@
     width: calc(100% - 20px);
     backdrop-filter: blur(5px);
     // #182d47
-    background-color: var(--vent-configurable-module-bg);
+    background-color: var(--vent-configurable-original-module-bg);
     margin-left: 10px;
   }
 

src/views/vent/home/configurable/components/preset/DeviceAlarm.vue

@@ -0,0 +1,350 @@
+<template>
+  <div class="device-contents">
+    <div class="icons-box" @mouseleave="resetScroll">
+      <template v-for="(item, key) in iconsMonitor" :key="key">
+        <div class="icon-item" v-if="item.text">
+          <div class="wrapper">
+            {{ item.text }}
+          </div>
+          <div></div>
+          <img :src="item.url" :alt="item.text" />
+          <div class="level-text">
+            <div class="all-count">
+              <span>{{ `${item.allText}&nbsp;:&nbsp;` }}</span>
+              <span class="num-count">{{ item.allCount || 0 }}</span>
+            </div>
+            <div class="warn-count">
+              <span>{{ `${item.warnText}&nbsp;:&nbsp;` }}</span>
+              <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
+            </div>
+            <div class="close-count">
+              <span> {{ `${item.closeText}&nbsp;:&nbsp;` }}</span>
+              <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, defineProps, watch } from 'vue';
+  import { getAssetURL } from '/@/utils/ui';
+  let props = defineProps({
+    devicedata: Object,
+  });
+  let iconsMonitor = reactive({
+    fanmain: {
+      url: getAssetURL('vent/alarm-icons/zhushan.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    fanlocal: {
+      url: getAssetURL('vent/alarm-icons/js.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    fanlocaldp: {
+      url: getAssetURL('vent/alarm-icons/js.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    gate: {
+      url: getAssetURL('vent/alarm-icons/fm.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    window: {
+      url: getAssetURL('vent/alarm-icons/fc.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    windrect: {
+      url: getAssetURL('vent/alarm-icons/cf.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    forcFan: {
+      url: getAssetURL('vent/alarm-icons/yafeng.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    spray: {
+      url: getAssetURL('vent/alarm-icons/penlin.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    dustdev: {
+      url: getAssetURL('vent/alarm-icons/penfen.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    nitrogen: {
+      url: getAssetURL('vent/alarm-icons/zhudan.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    pulping: {
+      url: getAssetURL('vent/alarm-icons/zhujiang.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    atomizing: {
+      url: getAssetURL('vent/alarm-icons/pw.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    dustsensor: {
+      url: getAssetURL('vent/alarm-icons/ccq.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    gas: {
+      url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    pump: {
+      url: getAssetURL('vent/alarm-icons/wasibeng.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    modelsensor: {
+      url: getAssetURL('vent/alarm-icons/cf.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+  });
+
+  const resetScroll = (e: Event) => {
+    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  };
+
+  watch(
+    () => props.devicedata,
+    (val) => {
+      Object.keys(iconsMonitor).forEach((el) => {
+        if (val && val[el]) {
+          iconsMonitor[el].level = val[el].maxLevel;
+          iconsMonitor[el]['text'] = val[el].name;
+          // iconsMonitor[el]['count'] = val[el].count;
+          iconsMonitor[el].allCount = val[el].totalcount;
+          iconsMonitor[el].warnCount = val[el].count;
+          iconsMonitor[el].closeCount = val[el].netstatus;
+        }
+      });
+    },
+    {
+      deep: true,
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+
+  .device-contents {
+    height: 100%;
+    padding: 10px 15px;
+    box-sizing: border-box;
+    width: 100%;
+    overflow-y: auto;
+
+    .icons-box {
+      // display: flex; lxh
+      // flex-wrap: wrap; lxh
+      // justify-content: space-around;
+      // justify-content: space-between; lxh
+      height: 100%;
+
+      // overflow-y: hidden;
+      // align-items: start ;
+      // &:hover {
+      //   overflow-y: auto;
+      //   & > .icon-item {
+      //     // animation-play-state: paused; lxh
+      //     // animation: move1 2s linear;lxh
+      //   }
+      // }
+      .icon-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3px;
+        // animation: move 10s linear infinite;lxh
+
+        .level-text {
+          width: 220px;
+          display: flex;
+          justify-content: space-between;
+          position: absolute;
+          // top: 42px;lxh
+          // right: 25px;lxh
+          // color: #fff;lxh
+          // font-family: 'douyuFont';lxh
+          // font-size: 12px;lxh
+          top: 37px;
+          left: 165px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+
+          .num-count,
+          .num-count1 {
+            font-family: 'douyuFont';
+            font-size: 12px;
+          }
+
+          .warn-count,
+          .close-count {
+            .num-count {
+              color: #ffffffe0;
+            }
+            .num-count1 {
+              color: #ff0000;
+            }
+          }
+        }
+
+        img {
+          width: 427px;
+          height: 64px;
+        }
+      }
+
+      @keyframes move {
+        0% {
+          transform: translateY(0px);
+        }
+
+        100% {
+          transform: translateY(-269px);
+        }
+      }
+
+      @keyframes move1 {
+        0% {
+          transform: translateY(0px);
+        }
+      }
+
+      .wrapper {
+        position: absolute;
+        top: 37px;
+        left: 90px;
+        color: #ffffffe0;
+        font-size: 13px;
+        text-align: center;
+        letter-spacing: 1px;
+      }
+
+      .level-warning {
+        font-weight: 600;
+        color: #ff2e2e;
+        text-shadow: 2px 2px 4px #000000;
+      }
+    }
+  }
+</style>

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

@@ -32,20 +32,20 @@ export const testConfigVent: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'board',
-            basis: '33%',
+            name: 'qh_curve',
+            basis: '72%',
           },
           {
-            name: 'qh_curve',
-            basis: '67%',
+            name: 'board',
+            basis: '28%',
           },
         ],
       },
       board: [
         {
-          type: 'A',
+          type: 'D',
           readFrom: '',
-          layout: 'val-top',
+          layout: 'label-top',
           items: [
             {
               label: '风量(m³/min)',
@@ -55,6 +55,10 @@ export const testConfigVent: Config[] = [
               label: '负压(Pa)',
               value: '${fy_merge}',
             },
+            {
+              label: '漏风率(%)',
+              value: '${leakage}',
+            },
           ],
         },
       ],
@@ -74,8 +78,8 @@ export const testConfigVent: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:60px;left:0;',
     },
   },
@@ -92,7 +96,7 @@ export const testConfigVent: Config[] = [
           value: '${strinstallpos}',
         },
         slot: {
-          show: true,
+          show: false,
           value: '运行风机：${readData.Fan1StartStatus}',
           trans: {
             '1': '一号',
@@ -134,8 +138,8 @@ export const testConfigVent: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:350px;left:0;',
     },
   },
@@ -165,7 +169,7 @@ export const testConfigVent: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'complex_list',
+            name: 'device_alarm',
             basis: '100%',
           },
         ],
@@ -175,40 +179,18 @@ export const testConfigVent: Config[] = [
       chart: [],
       table: [],
       gallery: [],
-      complex_list: [
+      complex_list: [],
+      gallery_list: [],
+      preset: [
         {
-          type: 'F',
-          readFrom: 'device_arr',
-          mapFromData: true,
-          items: [
-            {
-              title: '${name}',
-              contents: [
-                {
-                  label: '总数',
-                  value: '${totalcount}',
-                },
-                {
-                  label: '报警',
-                  value: '${count}',
-                  color: 'red',
-                },
-                {
-                  label: '断开',
-                  value: '${netstatus}',
-                },
-              ],
-            },
-          ],
+          readFrom: 'device',
         },
       ],
-      gallery_list: [],
-      preset: [],
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:640px;left:0;',
     },
   },
@@ -270,7 +252,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:640px;left:460px;',
     },
   },
@@ -301,11 +283,11 @@ export const testConfigVent: Config[] = [
         items: [
           {
             name: 'chart',
-            basis: '60%',
+            basis: '67%',
           },
           {
             name: 'board',
-            basis: '40%',
+            basis: '33%',
           },
         ],
       },
@@ -316,11 +298,11 @@ export const testConfigVent: Config[] = [
           layout: 'label-top',
           items: [
             {
-              label: '矿井风量',
+              label: '风量(m³/min)',
               value: '${retM3_merge.value}',
             },
             {
-              label: '矿井阻力',
+              label: '矿井阻力(Pa)',
               value: '${zuli.value}',
             },
             {
@@ -336,7 +318,7 @@ export const testConfigVent: Config[] = [
       table: [],
       chart: [
         {
-          type: 'pie',
+          type: 'pie_drag',
           readFrom: '',
           legend: { show: false },
           xAxis: [{ show: false }],
@@ -349,8 +331,8 @@ export const testConfigVent: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:60px;right:0;',
     },
   },
@@ -396,15 +378,15 @@ export const testConfigVent: Config[] = [
           layout: 'label-top',
           items: [
             {
-              label: '进风',
+              label: '进风(m³/min)',
               value: '${faceIntM3}',
             },
             {
-              label: '回风',
+              label: '回风(m³/min)',
               value: '${faceRetM3}',
             },
             {
-              label: '需风量',
+              label: '需风量(m³/min)',
               value: '${facePlanM3}',
             },
           ],
@@ -432,8 +414,8 @@ export const testConfigVent: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_surface_caimei&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:350px;right:0;',
     },
   },
@@ -478,7 +460,7 @@ export const testConfigVent: Config[] = [
               label: '报警',
               value: '${alarm.val}',
               info: '',
-              color: 'blue',
+              color: 'red',
             },
             {
               label: '重大风险预警',
@@ -516,8 +498,8 @@ export const testConfigVent: Config[] = [
       to: '/monitorChannel/monitor-alarm-home',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:640px;right:0;',
     },
   },
@@ -1455,20 +1437,20 @@ export const testConfigVentRealtime: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'board',
-            basis: '33%',
+            name: 'qh_curve',
+            basis: '72%',
           },
           {
-            name: 'qh_curve',
-            basis: '67%',
+            name: 'board',
+            basis: '28%',
           },
         ],
       },
       board: [
         {
-          type: 'A',
-          readFrom: 'readData',
-          layout: 'val-top',
+          type: 'D',
+          readFrom: '',
+          layout: 'label-top',
           items: [
             {
               label: '风量(m³/min)',
@@ -1486,6 +1468,10 @@ export const testConfigVentRealtime: Config[] = [
                 '0': '${Fan2FanPre}',
               },
             },
+            {
+              label: '漏风率(%)',
+              value: '${leakage}',
+            },
           ],
         },
       ],
@@ -1505,8 +1491,8 @@ export const testConfigVentRealtime: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:60px;left:0;',
     },
   },
@@ -1523,7 +1509,7 @@ export const testConfigVentRealtime: Config[] = [
           value: '${strinstallpos}',
         },
         slot: {
-          show: true,
+          show: false,
           value: '运行风机：${readData.Fan1StartStatus}',
           trans: {
             '1': '一号',
@@ -1568,8 +1554,8 @@ export const testConfigVentRealtime: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:350px;left:0;',
     },
   },
@@ -1599,7 +1585,7 @@ export const testConfigVentRealtime: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'complex_list',
+            name: 'device_alarm',
             basis: '100%',
           },
         ],
@@ -1609,40 +1595,18 @@ export const testConfigVentRealtime: Config[] = [
       chart: [],
       table: [],
       gallery: [],
-      complex_list: [
+      complex_list: [],
+      gallery_list: [],
+      preset: [
         {
-          type: 'F',
-          readFrom: 'device_arr',
-          mapFromData: true,
-          items: [
-            {
-              title: '${name}',
-              contents: [
-                {
-                  label: '总数',
-                  value: '${totalcount}',
-                },
-                {
-                  label: '报警',
-                  value: '${count}',
-                  color: 'red',
-                },
-                {
-                  label: '断开',
-                  value: '${netstatus}',
-                },
-              ],
-            },
-          ],
+          readFrom: 'device',
         },
       ],
-      gallery_list: [],
-      preset: [],
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:640px;left:0;',
     },
   },
@@ -1704,7 +1668,7 @@ export const testConfigVentRealtime: Config[] = [
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:640px;left:460px;',
     },
   },
@@ -1735,11 +1699,11 @@ export const testConfigVentRealtime: Config[] = [
         items: [
           {
             name: 'chart',
-            basis: '60%',
+            basis: '67%',
           },
           {
             name: 'board',
-            basis: '40%',
+            basis: '33%',
           },
         ],
       },
@@ -1750,11 +1714,11 @@ export const testConfigVentRealtime: Config[] = [
           layout: 'label-top',
           items: [
             {
-              label: '矿井风量',
+              label: '风量(m³/min)',
               value: '${m3_total}',
             },
             {
-              label: '矿井阻力',
+              label: '矿井阻力(Pa)',
               value: '${drag_total}',
             },
             {
@@ -1770,7 +1734,7 @@ export const testConfigVentRealtime: Config[] = [
       table: [],
       chart: [
         {
-          type: 'pie',
+          type: 'pie_drag',
           readFrom: '',
           legend: { show: false },
           xAxis: [{ show: false }],
@@ -1783,8 +1747,8 @@ export const testConfigVentRealtime: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:60px;right:0;',
     },
   },
@@ -1830,15 +1794,15 @@ export const testConfigVentRealtime: Config[] = [
           layout: 'label-top',
           items: [
             {
-              label: '进风',
+              label: '进风(m³/min)',
               value: '${jin}',
             },
             {
-              label: '回风',
+              label: '回风(m³/min)',
               value: '${hui}',
             },
             // {
-            //   label: '需风量',
+            //   label: '需风量(m³/min)',
             //   value: '${xufengliang}',
             // },
           ],
@@ -1866,8 +1830,8 @@ export const testConfigVentRealtime: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_surface_caimei&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:350px;right:0;',
     },
   },
@@ -1912,7 +1876,7 @@ export const testConfigVentRealtime: Config[] = [
               label: '报警',
               value: '${alarm.val}',
               info: '',
-              color: 'blue',
+              color: 'red',
             },
             {
               label: '重大风险预警',
@@ -1950,8 +1914,8 @@ export const testConfigVentRealtime: Config[] = [
       to: '/monitorChannel/monitor-alarm-home',
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
+      size: 'width:470px;height:280px;',
+      version: '原版',
       position: 'top:640px;right:0;',
     },
   },
@@ -2026,8 +1990,8 @@ export const testConfigVentRealtime: Config[] = [
 //     preset: [],
 //   },
 //   showStyle: {
-//     size: 'width:450px;height:280px;',
-//     version: '新版',
+//     size: 'width:470px;height:280px;',
+//     version: '原版',
 //     position: 'top:60px;left:0;',
 //   },
 // },

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

@@ -1,25 +1,23 @@
 <!-- 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 style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
-        <VentModal />
-      </div>
-    </template>
-    <template v-else>
+    <template v-if="!route.query.deviceType">
       <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>
+      <a class="ant-dropdown-link module-dropdown" @click.prevent="showBar = !showBar">
         全矿井通风检测
         <CaretDownOutlined />
       </a>
-      <template #overlay>
-        <MonitorCenter />
-      </template>
-    </a-dropdown> -->
+      <MonitorBar v-if="showBar" class="module-monitor-bar" :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">
@@ -66,24 +64,21 @@
           </div>
         </div>
       </template>
-      <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-        <VentModal />
-        <div
-          v-if="sysDataType === 'all'"
-          :class="{ 'realtime-mode': isDataRealTime }"
-          alt="切换数据模式"
-          class="switch-button report-mode right-50px"
-          @click="switchDataMode"
-        ></div>
-        <div class="switch-button icon-goto right-5px" @click="goMicroApp()"></div>
-      </div>
+      <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 MonitorCenter from './components/MonitorCenter.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';
@@ -95,12 +90,13 @@
   import { useGlobSetting } from '/@/hooks/setting';
   // import { testConfigVent, testConfigVentRealtime } from './configurable.data';
 
-  const { sysDataType = 'monitor' } = useGlobSetting();
+  const { sysDataType = 'monitor', title = '智能通风管控系统' } = useGlobSetting();
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
   const route = useRoute();
   const router = useRouter();
   const isDataRealTime = ref(sysDataType === 'monitor');
+  const showBar = ref(true);
   let interval: number | undefined;
 
   function switchDataMode() {
@@ -162,7 +158,7 @@
 
   @font-face {
     font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
+    src: url('/@/assets/font/douyuFont.otf');
   }
 
   @{theme-deepblue} {
@@ -218,13 +214,13 @@
     //   height: 280px;
     // }
     .module-dropdown {
-      padding: 10px;
+      padding: 5px;
       background-image: @vent-configurable-dropdown;
       border-bottom: 2px solid @vent-configurable-home-light-border;
       color: @vent-font-color;
       position: absolute;
-      top: 70px;
-      right: 460px;
+      top: 60px;
+      right: 480px;
     }
     .module-dropdown-original {
       padding: 10px;
@@ -247,7 +243,7 @@
       height: 34px;
       position: absolute;
       // right: 5px;
-      bottom: 5px;
+      bottom: 300px;
       z-index: 5;
       background-repeat: no-repeat;
       background-size: 100% 100%;
@@ -261,6 +257,14 @@
     .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;