[Feat 0000] 添加、优化chart子模块，包括pie_halo/pie_drag/line，添加monitor_bar、device_alarm等预设

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/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/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;