[Feat 0000] 预警看板开发

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

@@ -13,15 +13,197 @@ enum Api {
  * @param params
  */
 export const getSummary: () => Promise<BillboardType[]> = () =>
-  defHttp
-    .post({
-      url: Api.getSummary,
-      params: {
-        userName: store.userInfo?.username,
+  Promise.resolve([
+    {
+      dustInfo: {
+        // 矿井粉尘风险信息
+        totalNum: 0,
+        dustTypeList: [
+          {
+            deviceType: '/',
+            warnLevel: 0,
+            num: 0,
+            typeName: '/',
+          },
+          {
+            deviceType: '/',
+            warnLevel: 0,
+            num: 0,
+            typeName: '/',
+          },
+        ],
+        dustWarnLevel: 0, // 矿井粉尘风险性等级
       },
-    })
-    .then((res: BillboardType[]) => {
-      return res.reverse().sort((r) => {
-        return r.orgname ? -1 : 1;
-      });
-    });
+      fileServerInfo: {
+        totalNum: 0, // 文档总数
+        approvalNum: 0, // 待审批文档
+      },
+      fireInfo: {
+        tempMax: 29,
+        fireWarnLevel: 1001,
+        bundletubeInfo: {
+          typeName: '束管',
+          maxValueInstallPos: '31310采空区50m',
+          tempMax: 0,
+          coval: '2.0',
+          ch2val: '0.0',
+          deviceType: 'bundletube_auto',
+          warnLevel: 1001,
+          maxValue: 2,
+          o2val: '10.31',
+          totalNum: 12,
+          chval: '0.0',
+          gasval: '0.0',
+          time: '2024-05-31 16:34:04',
+          isRun: '-2',
+          co2val: '7.42',
+        },
+        smokeSensorInfo: {
+          deviceType: 'modelsensor_smoke',
+          tempMax: 0,
+          warnLevel: 0,
+          totalNum: 30,
+          maxValue: 0,
+          typeName: '烟雾传感器',
+          maxValueInstallPos: '12煤井底停车场',
+        },
+        fiberInfo: {
+          deviceType: 'fiber_normal',
+          tempMax: 0,
+          warnLevel: 0,
+          totalNum: 4,
+          maxValue: 25,
+          typeName: '光纤测温',
+          maxValueInstallPos: '31煤中央变电所电缆沟-通道一',
+        },
+        tempSensorInfo: {
+          deviceType: 'modelsensor_temperature',
+          tempMax: 29,
+          warnLevel: 0,
+          totalNum: 51,
+          maxValue: 29,
+          typeName: '温度传感器',
+          maxValueInstallPos: '主通风机房配电室',
+        },
+      },
+      gasInfo: {
+        gasWarnLevel: 0, // 瓦斯风险等级
+        gasTypeList: [
+          {
+            warnLevel: 0,
+            num: 0,
+            typeName: '/',
+          },
+        ],
+      },
+      ventInfo: {
+        //通风系统信息
+        totallength: 0, //矿井巷道总长度
+        zonghuifeng: '0', //总回风
+        fanMainList: [
+          {
+            sqzlfb: '/',
+            strname: '/',
+            strinstallpos: '/',
+            Fan1m3: '/',
+            Fan2m3: '/',
+          },
+        ],
+        xufengliang: 0, //总需风量
+        zongjinfeng: '/', //总进风
+      },
+      sys_warndata: {
+        info: {
+          sysInfo: {
+            ventS: {
+              maxLevel: 0,
+              netstatus: 0,
+              code: '/',
+              levelstatus: '/',
+              maxLevel_str: '/',
+              name: '/',
+              count: 0,
+              status: '/',
+              maxLevel_status: '/',
+            },
+            fireS: {
+              maxLevel: 0,
+              code: '/',
+              maxLevel_str: '/',
+              count: 0,
+              netstatus: 0,
+              levelstatus: '/',
+              name: '/',
+              status: '/',
+              maxLevel_status: '/',
+            },
+            synthesizeS: {
+              maxLevel: 0,
+              netstatus: 1,
+              code: 'synthesizeS',
+              levelstatus: '低风险',
+              maxLevel_str: '正常',
+              name: '综合',
+              count: 0,
+              status: '正常',
+              maxLevel_status: '低风险',
+            },
+            dustS: {
+              maxLevel: 0,
+              netstatus: 0,
+              code: 'dustS',
+              levelstatus: '低风险',
+              maxLevel_str: '正常',
+              name: '防尘',
+              count: 0,
+              status: '正常',
+              maxLevel_status: '低风险',
+            },
+            gasS: {
+              maxLevel: 0,
+              netstatus: 0,
+              code: 'gasS',
+              levelstatus: '低风险',
+              maxLevel_str: '正常',
+              devices: [],
+              name: '瓦斯',
+              count: 0,
+              status: '正常',
+              maxLevel_status: '低风险',
+            },
+            deviceWarnInfo: {
+              maxLevel: 101,
+              levelstatus: '低风险',
+              maxLevel_str: '低风险预警',
+              status: '异常',
+              devMaxlevel_status: '低风险预警',
+            },
+          },
+        },
+      },
+      warningInfo: {
+        total: 5,
+        vent: 1,
+        gas: 1,
+        dust: 1,
+        fire: 1,
+        safety: 1,
+        maxLevel: 5,
+      },
+      orgname: '/',
+      orgcode: '/',
+      ip: 'localhost',
+    },
+  ]);
+// defHttp
+//   .post({
+//     url: Api.getSummary,
+//     params: {
+//       userName: store.userInfo?.username,
+//     },
+//   })
+//   .then((res: BillboardType[]) => {
+//     return res.reverse().sort((r) => {
+//       return r.orgname ? -1 : 1;
+//     });
+//   });

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

@@ -1,5 +1,10 @@
 import leftImg from '/@/assets/images/files/homes/file.svg';
 import rightImg from '/@/assets/images/files/homes/sp.svg';
+import GasIcon from '/@/assets/images/vent/gas-icon.png';
+import FireIcon from '/@/assets/images/vent/fire-icon.png';
+import VentIcon from '/@/assets/images/vent/vent-icon.png';
+import SafetyIcon from '/@/assets/images/vent/safety-icon.png';
+import DustIcon from '/@/assets/images/vent/dust-icon.png';
 
 export type Translation = Record<string | number, string>;
 export interface TitleConfig {
@@ -67,6 +72,9 @@ export const BillboardConfig: {
     headers: HeaderConfig[];
     tree: TreeConfig;
   };
+  Warning: {
+    contents: OverviewConfig[];
+  };
 } = {
   DustStatus: {
     title: {
@@ -172,6 +180,12 @@ export const BillboardConfig: {
       ],
     },
   },
+  Warning: {
+    content: [
+      { src: leftImg, text: '文档总数', prop: 'totalNum' },
+      { src: rightImg, text: '待审批数', prop: 'approvalNum' },
+    ],
+  },
 };
 
 // 基础的表格列配置，针对普通设备
@@ -426,6 +440,16 @@ export const SUMMARY_COLUMN = [
   },
 ];
 
+// 预警总览相关的内容配置项
+export const WARNING_CONFIG = [
+  { src: '', text: '总预警数量', prop: 'total', id: 'warning_cfg_000' },
+  { src: GasIcon, text: '瓦斯', prop: 'gas', id: 'warning_cfg_001' },
+  { src: FireIcon, text: '火灾', prop: 'fire', id: 'warning_cfg_002' },
+  { src: DustIcon, text: '粉尘', prop: 'dust', id: 'warning_cfg_003' },
+  { src: VentIcon, text: '通风', prop: 'vent', id: 'warning_cfg_004' },
+  { src: SafetyIcon, text: '安全监控', prop: 'safety', id: 'warning_cfg_005' },
+];
+
 export const DEFAULT_TEST_DATA = {
   dustInfo: {
     // 矿井粉尘风险信息
@@ -593,6 +617,15 @@ export const DEFAULT_TEST_DATA = {
       },
     },
   },
+  warningInfo: {
+    total: 5,
+    vent: 1,
+    gas: 1,
+    dust: 1,
+    fire: 1,
+    safety: 1,
+    maxLevel: 5,
+  },
   orgname: '/',
   orgcode: '/',
   ip: 'localhost',

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

@@ -0,0 +1,93 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="warning">
+    <div class="warning-item" v-for="item in WARNING_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" :class="`warning-level_${warnData.maxLevel}`">{{ warnData[item.prop] }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { shallowRef, onMounted } from 'vue';
+  import { BillboardType, DEFAULT_TEST_DATA, WARNING_CONFIG } from '../billboard.data';
+  import _ from 'lodash-es';
+
+  const props = withDefaults(
+    defineProps<{
+      data?: BillboardType;
+    }>(),
+    {
+      data: () => DEFAULT_TEST_DATA,
+    }
+  );
+  defineEmits(['click']);
+
+  const warnData = shallowRef<BillboardType['warningInfo']>({
+    total: 5,
+    vent: 1,
+    gas: 1,
+    dust: 1,
+    fire: 1,
+    safety: 1,
+    maxLevel: 5,
+  });
+
+  function fetchData() {
+    const info = props.data.warningInfo;
+    if (!info) return;
+    warnData.value = info;
+  }
+
+  onMounted(() => {
+    fetchData();
+  });
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url(/@/assets/images/files/douyuFont.otf);
+  }
+
+  .warning {
+    height: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .warning-item:first-of-type {
+    width: 100%;
+    flex-basis: 100%;
+    flex-shrink: 0;
+    flex-grow: 1;
+    font-size: 17px;
+    padding: 10px 0;
+
+    div {
+      display: inline;
+    }
+
+    .text {
+      margin-right: 10px;
+    }
+
+    .warning-level_5 {
+      color: red;
+    }
+    .warning-level_4 {
+      color: orange;
+    }
+    .warning-level_3 {
+      color: yellow;
+    }
+    .warning-level_2 {
+      color: green;
+    }
+  }
+  .warning-item {
+    flex-basis: 30%;
+  }
+</style>

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

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

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

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