[Feat 0000] 保德双模块组件调整及附属模块问题修复，新看板开发

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

@@ -5,6 +5,11 @@ import FireIcon from '/@/assets/images/vent/fire-icon-2.png';
 import VentIcon from '/@/assets/images/vent/vent-icon-2.png';
 import SafetyIcon from '/@/assets/images/vent/safety-icon-2.png';
 import DustIcon from '/@/assets/images/vent/dust-icon-2.png';
+import NetworkIcon from '/@/assets/images/vent/dust-risk-icon-1.png';
+import DeviceIcon from '/@/assets/images/vent/dust-risk-icon-2.png';
+import LevelChartIcon from '/@/assets/images/vent/dust-risk-icon-3.png';
+import PointIcon from '/@/assets/images/vent/dust-risk-icon-4.png';
+import AlertIcon from '/@/assets/images/vent/dust-risk-icon-5.png';
 
 // export type Translation = Record<string | number, string>;
 // export interface TitleConfig {
@@ -450,6 +455,14 @@ export const WARNING_CONFIG = [
   { src: FireIcon, text: '火灾', prop1: 'fireSWarnInfo.totalNum', prop2: 'fireSWarnInfo.maxWarnLevel', id: 'warning_cfg_002' },
 ];
 
+// 粉尘预警相关的内容配置项
+export const DUST_RISK_CONFIG = [
+  { src: LevelChartIcon, text: '风险等级', prop: 'fxdj', id: 'dust_risk_cfg_005' },
+  { src: PointIcon, text: '测点数', prop: 'cds', id: 'dust_risk_cfg_004' },
+  { src: NetworkIcon, text: '在线测点数', prop: 'zxcds', id: 'dust_risk_cfg_003' },
+  { src: AlertIcon, text: '测点报警数', prop: 'cdbjs', id: 'dust_risk_cfg_001' },
+  { src: DeviceIcon, text: '降尘设备数', prop: 'jcsbs', id: 'dust_risk_cfg_002' },
+];
 export const DEFAULT_TEST_DATA = {
   dustInfo: {
     // 矿井粉尘风险信息
@@ -625,6 +638,13 @@ export const DEFAULT_TEST_DATA = {
     gasSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //瓦斯
     fireSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //火灾
   },
+  dustRisk: {
+    fxdj: '4',
+    cds: 3,
+    zxcds: 2,
+    cdbjs: 1,
+    jcsbs: 0,
+  },
   orgname: '/',
   orgcode: '/',
   ip: 'localhost',

src/views/vent/home/billboard/components/DustRisk.vue

@@ -0,0 +1,98 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="dust-risk">
+    <div class="dust-risk-item" v-for="item in DUST_RISK_CONFIG" :key="item.id" @click="$emit('click', item)">
+      <div class="img"> <img :src="item.src" alt="" /> </div>
+      <div class="text">{{ item.text }}</div>
+      <div class="num">{{ get(dustRiskData, item.prop) }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { shallowRef, onMounted } from 'vue';
+  import { BillboardType, DEFAULT_TEST_DATA, DUST_RISK_CONFIG } from '../billboard.data';
+  import _ from 'lodash-es';
+  import { get } from '../utils';
+
+  withDefaults(
+    defineProps<{
+      data?: BillboardType;
+    }>(),
+    {
+      data: () => DEFAULT_TEST_DATA,
+    }
+  );
+  defineEmits(['click']);
+
+  const dustRiskData = shallowRef<BillboardType['dustRisk']>({
+    fxdj: '低',
+    cds: 99,
+    zxcds: 99,
+    cdbjs: 0,
+    jcsbs: 99,
+  });
+
+  // function fetchData() {
+  //   const info = props.data.dustRisk;
+  //   if (!info) return;
+  //   dustRiskData.value = info;
+  // }
+
+  onMounted(() => {
+    // fetchData();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+  @font-face {
+    font-family: 'douyuFont';
+    src: url(/@/assets/images/files/douyuFont.otf);
+  }
+
+  .dust-risk {
+    height: 100%;
+    // display: flex;
+    // justify-content: space-evenly;
+    // align-items: center;
+    // flex-wrap: wrap;
+  }
+
+  .dust-risk-item {
+    display: flex;
+    align-items: center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 46px;
+    margin-top: 10px;
+    padding: 0 7px;
+
+    .text {
+      text-align: center;
+      width: 200px;
+    }
+    .num {
+      text-align: center;
+      width: 140px;
+    }
+  }
+
+  .dust-risk-item:nth-child(odd) {
+    background-image: url(/@/assets/images/company/list-item-1.png);
+  }
+  .dust-risk-item:nth-child(even) {
+    background-image: url(/@/assets/images/company/list-item-2.png);
+  }
+
+  .num {
+    font-size: 20px;
+    font-family: douyuFont;
+    color: @vent-gas-primary-text;
+  }
+  .risk {
+    font-size: 20px;
+    font-family: douyuFont;
+    color: @vent-gas-primary-text;
+  }
+</style>

src/views/vent/home/billboard/components/Warning.vue

@@ -27,12 +27,12 @@
   defineEmits(['click']);
 
   const warnData = shallowRef<BillboardType['warn']>({
-    allNum: 19,
-    synthesizeSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //安全监控
-    ventSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //通风
-    dustSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //粉尘
-    gasSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //瓦斯
-    fireSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //火灾
+    allNum: 0,
+    synthesizeSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //安全监控
+    ventSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //通风
+    dustSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //粉尘
+    gasSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //瓦斯
+    fireSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //火灾
   });
 
   function fetchData() {

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

@@ -58,6 +58,7 @@
   import GasStatus from './components/GasStatus.vue';
   import Summary from './components/Summary.vue';
   import Warning from './components/Warning.vue';
+  import DuskRisk from './components/DustRisk.vue';
   import _ from 'lodash-es';
   import { useRouter } from 'vue-router';
   // import mapComponent from './components/3Dmap/index.vue';
@@ -79,6 +80,7 @@
     FireStatus,
     Summary,
     Warning,
+    DuskRisk,
   };
 
   const mainTitle = '国能神东一通三防管控平台';

src/views/vent/home/billboard/risk.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Billboard billboard-type="DuskRisk" />
+</template>
+<script lang="ts" setup>
+  import Billboard from './index.vue';
+</script>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/blastDelta.vue

@@ -350,39 +350,43 @@
         (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
     );
   }
+  function update(newV) {
+    if (newV.btTriBlast) {
+      maxY1.value = parseFloat(newV.o2val);
+      maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
+      let btTriBlasts = JSON.parse(newV.btTriBlast);
+      coordinateA.x = btTriBlasts.A_x;
+      coordinateA.y = btTriBlasts.A_y;
+      coordinateB.x = btTriBlasts.B_x;
+      coordinateB.y = btTriBlasts.B_y;
+      coordinateE.x = btTriBlasts.E_x;
+      coordinateE.y = btTriBlasts.E_y;
+      coordinateF.x = btTriBlasts.F_x;
+      coordinateF.y = btTriBlasts.F_y;
+      coordinateG.x = btTriBlasts.G_x;
+      coordinateG.y = btTriBlasts.G_y;
+      if (
+        !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
+        (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
+      ) {
+        getUnblast();
+      } else {
+        getBlast();
+      }
+    }
+  }
 
   watch(
     () => props.posMonitor,
     (newV, oldV) => {
-      if (newV.btTriBlast) {
-        maxY1.value = parseFloat(newV.o2val);
-        maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
-        let btTriBlasts = JSON.parse(newV.btTriBlast);
-        coordinateA.x = btTriBlasts.A_x;
-        coordinateA.y = btTriBlasts.A_y;
-        coordinateB.x = btTriBlasts.B_x;
-        coordinateB.y = btTriBlasts.B_y;
-        coordinateE.x = btTriBlasts.E_x;
-        coordinateE.y = btTriBlasts.E_y;
-        coordinateF.x = btTriBlasts.F_x;
-        coordinateF.y = btTriBlasts.F_y;
-        coordinateG.x = btTriBlasts.G_x;
-        coordinateG.y = btTriBlasts.G_y;
-        if (
-          !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
-          (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
-        ) {
-          getUnblast();
-        } else {
-          getBlast();
-        }
-      }
+      update(newV);
     },
     { deep: true }
   );
 
   onMounted(() => {
     getAreas();
+    update(props.posMonitor);
   });
 </script>