[Wip 0000] 公司端看板添加综合看板

src/views/vent/comment/history/TestPage.vue

@@ -1,6 +1,19 @@
 <template>
-  <HistoryTable class="w-100% h-100% mt-100px" device-code="forcFan" dict-code="forcFan_dict" />
+  <HistoryTable class="w-100% h-100% mt-100px" :device-code="code" :dict-code="`${code}_dict`" />
 </template>
 <script lang="ts" setup>
+  import { onBeforeMount, ref } from 'vue';
   import HistoryTable from './HistoryTable.vue';
+  import { useRoute } from 'vue-router';
+
+  const route = useRoute();
+
+  const code = ref('forcFan');
+
+  onBeforeMount(() => {
+    console.log('debug', route);
+    if (route.query.code) {
+      code.value = route.query.code as string;
+    }
+  });
 </script>

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

@@ -146,6 +146,27 @@ export const GAS_STATUS_HEADER_CONFIG = [
   },
 ];
 
+// 综合监测相关的内容配置项
+export const SUMMARY_HEADER_CONFIG = [
+  {
+    label: '风险分析',
+    prop: 'gasWarnLevel',
+    type: 'to-bottom-right',
+  },
+];
+
+// 综合监测表格列配置
+export const SUMMARY_COLUMN = [
+  {
+    name: '监测类别',
+    prop: 'typeName',
+  },
+  {
+    name: '风险等级',
+    prop: 'warnLevelStr',
+  },
+];
+
 export const DEFAULT_TEST_DATA = {
   dustInfo: {
     // 矿井粉尘风险信息

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

@@ -0,0 +1,57 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Row justify="space-around">
+    <Col v-for="(item, i) in SUMMARY_HEADER_CONFIG" :key="`svvhbcgs${i}`" :span="10">
+      <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
+    </Col>
+  </Row>
+  <CommonTable class="mt-10px" :columns="SUMMARY_COLUMN" :data="tableData" />
+</template>
+<script lang="ts" setup>
+  import { Row, Col } from 'ant-design-vue';
+  import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
+  import LargeBoard from './LargeBoard.vue';
+  import { onMounted, shallowRef } from 'vue';
+  import CommonTable from './CommonTable.vue';
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  const props = withDefaults(
+    defineProps<{
+      data?: BillboardType;
+    }>(),
+    {
+      data: () => DEFAULT_TEST_DATA,
+    }
+  );
+
+  const headerData = shallowRef({});
+  const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);
+
+  function fetchData() {
+    const info = props.data.gasInfo || DEFAULT_TEST_DATA.gasInfo;
+    const trans = {
+      0: '低风险',
+      101: '低风险',
+      102: '一般风险',
+      103: '较大风险',
+      104: '重大风险',
+      201: '报警',
+      1001: '网络断开',
+    };
+    headerData.value = {
+      gasWarnLevel: trans[info.gasWarnLevel],
+      gasJudgeLevel: '低风险',
+    };
+    tableData.value = info.gasTypeList.map((e) => {
+      return {
+        ...e,
+        warnLevelStr: trans[e.warnLevel],
+      };
+    });
+  }
+
+  onMounted(() => {
+    fetchData();
+  });
+</script>
+<style lang="less" scoped></style>

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

@@ -30,7 +30,7 @@
    *
    * 菜单配置相关信息：使用vent/home/billboard/gas及类似组件进行配置（即 ./gas.vue ./fire.vue 等）
    *
-   * 支持的看板类型如下：'DustStatus'、'FireStatus'、'FileOverview'、'VentilationStatus'、'GasStatus'
+   * 支持的看板类型如下：'DustStatus'、'FireStatus'、'FileOverview'、'VentilationStatus'、'GasStatus'、'Summary'
    *
    */
   import { computed, onMounted, ref } from 'vue';
@@ -45,6 +45,7 @@
   import FireStatus from './components/FireStatus.vue';
   import VentilationStatus from './components/VentilationStatus.vue';
   import GasStatus from './components/GasStatus.vue';
+  import Summary from './components/Summary.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = defineProps<{
@@ -61,6 +62,7 @@
     VentilationStatus,
     GasStatus,
     FireStatus,
+    Summary,
   };
   // 组件Map，不同type需要跳转到不同的矿端页面
   const routePathMap = {
@@ -69,6 +71,7 @@
     VentilationStatus: '/micro-vent-3dModal/dashboard/analysis',
     GasStatus: '/gas/warn/home',
     FireStatus: '/fire/warn/home',
+    Summary: undefined,
   };
 
   const mainTitle = '国家能源神东煤炭集团';

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

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