[Feat 0000] 公司端看板数据对接

src/hooks/vent/useSSO.ts

@@ -25,7 +25,6 @@ export function useSSO() {
     const { username, id } = route.query;
     if (!username || !id) return;
     const realPassword = userStore.decryptPassword(id as string);
-    console.log('debug aaa', realPassword, username);
     const params = {
       username: username as string,
       password: realPassword,
@@ -35,7 +34,7 @@ export function useSSO() {
   }
 
   return {
-    /** 启用单点登录功能来跳转新的页面 */
+    /** 启用单点登录功能来跳转新的页面，参数与window.open一致，但需要注意url需要指向登录页 */
     open,
     /** 用在跳转到的页面上，执行单点登录的逻辑 */
     doSSO,

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

@@ -1,3 +1,4 @@
+import { BillboardType } from './billboard.data';
 import { useUserStore } from '/@/store/modules/user';
 import { defHttp } from '/@/utils/http/axios';
 
@@ -11,103 +12,10 @@ enum Api {
  * 获取看板的详细数据
  * @param params
  */
-export const getSummary = () =>
+export const getSummary: () => Promise<BillboardType[]> = () =>
   defHttp.post({
     url: Api.getSummary,
     params: {
       userName: store.userInfo?.username,
     },
   });
-
-// Promise.resolve({
-//   dustInfo: {
-//     //矿井粉尘风险信息
-//     totalNum: 8,
-//     dustTypeList: [
-//       {
-//         deviceType: 'dusting_auto', //设备类型编码
-//         warnLevel: 0, //状态（0或者101：低风险、102：一般风险、103：较大风险、104：重大风险、201：报警、1001：网络断开）
-//         num: 8, //监测数量
-//         typeName: '粉尘传感器', //设备类型名称
-//       },
-//     ],
-//     dustWarnLevel: 0, //矿井粉尘风险性等级
-//   },
-//   fileServerInfo: {
-//     //文件共享中心
-//     totalNum: 29, //文档总数
-//     approvalNum: 0, //待审批文档
-//   },
-//   fireInfo: {
-//     //矿井火灾风险数据
-//     tempMax: 0, //矿井温度传感器最高温度
-//     fireWarnLevel: 0, //矿井火灾风险等级
-//     coSensorInfo: 0, //矿井CO传感器报警等级
-//     bundletubeInfo: 0, //矿井束管监测报警等级
-//     smokeSensorInfo: 0, //矿井烟雾传感器报警等级
-//     fiberInfo: 0, //矿井光纤测温系统报警等级
-//     tempSensorInfo: 0, //矿井温度传感器报警等级
-//   },
-//   gasInfo: {
-//     //瓦斯风险信息
-//     gasWarnLevel: 0, //瓦斯风险等级
-//     gasTypeList: [
-//       {
-//         warnLevel: 0, //当前状态
-//         num: 2, //监测数量
-//         typeName: '瓦斯抽采泵站', //设备类型名称
-//       },
-//       {
-//         warnLevel: 0,
-//         num: 1,
-//         typeName: '瓦斯巡检',
-//       },
-//       {
-//         warnLevel: 0,
-//         num: 2,
-//         typeName: '瓦斯巡检',
-//       },
-//     ],
-//   },
-//   ventInfo: {
-//     //通风系统信息
-//     totallength: 1562.35, //矿井巷道总长度
-//     zonghuifeng: '25881.74', //总回风
-//     fanMainList: [
-//       {
-//         sqzlfb: '31.0%-29.0%-40.0%', //三区阻力分布
-//         strname: '2号回风立井', //风机名称
-//         strinstallpos: '2号回风立井', //安装位置
-//         Fan1m3: '12465.84', //1号风机风量
-//         Fan2m3: '12493.72', //2号风机风量
-//         FanFreqHz: '225', //风机频率
-//       },
-//       {
-//         sqzlfb: '42.0%-37.0%-21.0%',
-//         strname: '1号回风斜井',
-//         strinstallpos: '1号回风斜井',
-//         Fan1m3: '13419.83',
-//         Fan2m3: '13415.9',
-//         FanFreqHz: '225',
-//       },
-//     ],
-//     xufengliang: 15065, //总需风量
-//     zongjinfeng: '24987.25', //总进风
-//   },
-// });
-
-// Promise.resolve([
-//   { title: '布尔台', address: 'http://10.246.95.4:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '上湾', address: 'http://10.246.167.205:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '大柳塔', address: 'http://10.248.135.10:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '活鸡兔', address: 'http://10.248.135.121:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '锦界', address: 'http://10.248.151.42:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '哈拉沟', address: 'http://10.248.223.12:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '石圪台', address: 'http://10.246.191.13:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '柳塔', address: 'http://10.246.87.121:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '补连塔', address: 'http://10.246.175.16:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '寸草塔矿', address: 'http://10.246.23.171:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '寸草塔二矿', address: 'http://10.246.63.5:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '乌兰木伦', address: 'http://10.246.183.35:8092/micro-vent-3dModal/dashboard/analysis' },
-//   { title: '榆家梁', address: 'http://10.248.143.211:8092/micro-vent-3dModal/dashboard/analysis' },
-// ]);

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

@@ -5,6 +5,7 @@ import VentilationStatus from './components/VentilationStatus.vue';
 import GasStatus from './components/GasStatus.vue';
 import leftImg from '/@/assets/images/files/homes/file.svg';
 import rightImg from '/@/assets/images/files/homes/sp.svg';
+import type { Component } from 'vue';
 
 // 基础的表格列配置，针对普通设备
 export const GAS_STATUS_COLUMN = [
@@ -151,7 +152,7 @@ export const GAS_STATUS_HEADER_CONFIG = [
 ];
 
 // 各个监测类型对应的要展示的组件
-export const COMPONENTS_MAP = new Map([
+export const COMPONENTS_MAP = new Map<string, Component>([
   ['dust', DustStatus],
   ['fire', FireStatus],
   ['file', FileOverview],
@@ -163,7 +164,14 @@ export const DEFAULT_TEST_DATA = {
   dustInfo: {
     // 矿井粉尘风险信息
     totalNum: 0,
-    dustTypeList: [],
+    dustTypeList: [
+      {
+        deviceType: '/',
+        warnLevel: 0,
+        num: 0,
+        typeName: '/',
+      },
+    ],
     dustWarnLevel: 0, // 矿井粉尘风险性等级
   },
   fileServerInfo: {
@@ -181,14 +189,33 @@ export const DEFAULT_TEST_DATA = {
   },
   gasInfo: {
     gasWarnLevel: 0, // 瓦斯风险等级
-    gasTypeList: [],
+    gasTypeList: [
+      {
+        warnLevel: 0,
+        num: 0,
+        typeName: '/',
+      },
+    ],
   },
   ventInfo: {
     //通风系统信息
     totallength: 0, //矿井巷道总长度
     zonghuifeng: '0', //总回风
-    fanMainList: [],
+    fanMainList: [
+      {
+        sqzlfb: '/',
+        strname: '/',
+        strinstallpos: '/',
+        Fan1m3: '/',
+        Fan2m3: '/',
+      },
+    ],
     xufengliang: 0, //总需风量
-    zongjinfeng: '0', //总进风
+    zongjinfeng: '/', //总进风
   },
+  orgname: '/',
+  orgcode: '/',
+  ip: 'localhost',
 };
+
+export type BillboardType = typeof DEFAULT_TEST_DATA;

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

@@ -1,18 +1,18 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <CommonTitle class="mb-10px" label="矿井粉尘风险性等级" :value="risk" />
-  <CommonTable :columns="DUST_STATUS_COLUMN" :data="data" />
+  <CommonTable :columns="DUST_STATUS_COLUMN" :data="tableData" />
 </template>
 <script lang="ts" setup>
   import CommonTable from './CommonTable.vue';
   import CommonTitle from './CommonTitle.vue';
-  import { DEFAULT_TEST_DATA, DUST_STATUS_COLUMN } from '../billboard.data';
+  import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN } from '../billboard.data';
   import { onMounted, ref, shallowRef } from 'vue';
   // import mapComponent from './3Dmap/index.vue';
 
   const props = withDefaults(
     defineProps<{
-      data?: any;
+      data?: BillboardType;
     }>(),
     {
       data: () => DEFAULT_TEST_DATA,
@@ -22,6 +22,7 @@
   const tableData = shallowRef<any[]>([]);
 
   function fetchData() {
+    const info = props.data.dustInfo;
     const trans = {
       0: '低风险',
       101: '低风险',
@@ -31,7 +32,8 @@
       201: '报警',
       1001: '网络断开',
     };
-    tableData.value = props.data.dustInfo.dustTypeList.map((e) => {
+    risk.value = trans[info.dustWarnLevel];
+    tableData.value = info.dustTypeList.map((e) => {
       return {
         ...e,
         warnLevelStr: trans[e.warnLevel],

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

@@ -1,19 +1,19 @@
 <template>
   <div class="card-b">
-    <div class="box" v-for="item in tabs" :key="item.id" @click="$emit('click', item)">
+    <div class="box" v-for="item in FILE_OVERVIEW_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">{{ data[item.prop] }}</div>
+      <div class="num">{{ fileData[item.prop] }}</div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, shallowRef } from 'vue';
-  import { DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
+  import { onMounted, shallowRef } from 'vue';
+  import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
 
   const props = withDefaults(
     defineProps<{
-      data?: any;
+      data?: BillboardType;
     }>(),
     {
       data: () => DEFAULT_TEST_DATA,
@@ -21,7 +21,10 @@
   );
   defineEmits(['click']);
 
-  const fileData = shallowRef<any>({});
+  const fileData = shallowRef<BillboardType['fileServerInfo']>({
+    totalNum: 0,
+    approvalNum: 0,
+  });
 
   function fetchData() {
     fileData.value = props.data.fileServerInfo;
@@ -30,8 +33,6 @@
   onMounted(() => {
     fetchData();
   });
-
-  let tabs = ref(FILE_OVERVIEW_CONFIG);
 </script>
 
 <style lang="less" scoped>

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

@@ -6,7 +6,7 @@
     :key="item.icon"
     :icon="item.icon"
     :label="item.label"
-    :value="data[item.prop]"
+    :value="listData[item.prop]"
     :type="i % 2 ? 'green' : 'blue'"
     class="mt-5px"
   />
@@ -15,11 +15,11 @@
   import { onMounted, ref, shallowRef } from 'vue';
   import CommonTitle from './CommonTitle.vue';
   import ListItem from './ListItem.vue';
-  import { DEFAULT_TEST_DATA, FIRE_STATUS_LIST } from '../billboard.data';
+  import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST } from '../billboard.data';
 
   const props = withDefaults(
     defineProps<{
-      data?: any;
+      data?: BillboardType;
     }>(),
     {
       data: () => DEFAULT_TEST_DATA,
@@ -31,7 +31,18 @@
   const listData = shallowRef<any>({});
 
   function fetchData() {
-    listData.value = props.data.fireInfo;
+    const info = props.data.fireInfo;
+    const trans = {
+      0: '低风险',
+      101: '低风险',
+      102: '一般风险',
+      103: '较大风险',
+      104: '重大风险',
+      201: '报警',
+      1001: '网络断开',
+    };
+    risk.value = trans[info.fireWarnLevel];
+    listData.value = info;
   }
 
   onMounted(() => {

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

@@ -5,11 +5,11 @@
       <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
     </Col>
   </Row>
-  <CommonTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="data" />
+  <CommonTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" />
 </template>
 <script lang="ts" setup>
   import { Row, Col } from 'ant-design-vue';
-  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA } from '../billboard.data';
+  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
   import { onMounted, shallowRef } from 'vue';
   import CommonTable from './CommonTable.vue';
@@ -17,7 +17,7 @@
 
   const props = withDefaults(
     defineProps<{
-      data?: any;
+      data?: BillboardType;
     }>(),
     {
       data: () => DEFAULT_TEST_DATA,
@@ -25,14 +25,24 @@
   );
 
   const headerData = shallowRef({});
-  const tableData = shallowRef<any[]>([]);
+  const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);
 
   function fetchData() {
+    const info = props.data.gasInfo;
+    const trans = {
+      0: '低风险',
+      101: '低风险',
+      102: '一般风险',
+      103: '较大风险',
+      104: '重大风险',
+      201: '报警',
+      1001: '网络断开',
+    };
     headerData.value = {
-      gasWarnLevel: props.data.gasInfo.gasWarnLevel,
-      gasJudgeLevel: 0,
+      gasWarnLevel: trans[info.gasWarnLevel],
+      gasJudgeLevel: '低风险',
     };
-    tableData.value = props.data.gasInfo.gasTypeList;
+    tableData.value = info.gasTypeList;
   }
 
   onMounted(() => {

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

@@ -2,7 +2,7 @@
 <template>
   <Row justify="space-between">
     <Col v-for="(item, i) in VENTILATION_STATUS_HEADER_CONFIG" :key="`svvhbcvs${i}`" :span="12">
-      <MiniBoard :label="item.label" :value="data[item.prop]" :type="item.type" />
+      <MiniBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
     </Col>
     <div class="ventilate-status-card">
       <CommonTitle label="通风系统数量" :value="ventilatorCount" />
@@ -14,46 +14,51 @@
   import { Row, Col } from 'ant-design-vue';
   import { BasicTree } from '/@/components/Tree';
   import type { TreeProps } from 'ant-design-vue';
-  import { DEFAULT_TEST_DATA, VENTILATION_STATUS_HEADER_CONFIG, VENTILATION_STATUS_TREE_CONFIG } from '../billboard.data';
+  import { BillboardType, DEFAULT_TEST_DATA, VENTILATION_STATUS_HEADER_CONFIG, VENTILATION_STATUS_TREE_CONFIG } from '../billboard.data';
   import MiniBoard from './MiniBoard.vue';
   import { onMounted, ref, shallowRef } from 'vue';
   import CommonTitle from './CommonTitle.vue';
+  import _ from 'lodash-es';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = withDefaults(
     defineProps<{
-      data?: any;
+      data?: BillboardType;
     }>(),
     {
       data: () => DEFAULT_TEST_DATA,
     }
   );
 
-  const baseData = shallowRef({});
   const ventilatorCount = ref('0');
+  const headerData = shallowRef({});
   const treeData = shallowRef<TreeProps['treeData']>([]);
 
   function fetchData() {
-    ventilatorCount.value = props.data.ventInfo.fanMainList.length.toString();
-    baseData.value = props.data.ventInfo;
-    treeData.value = props.data.ventInfo.fanMainList.map((e, i) => {
-      const { prefix, suffix, prop, children } = VENTILATION_STATUS_TREE_CONFIG;
+    const info = props.data.ventInfo;
+    const { prefix, suffix, prop, children } = VENTILATION_STATUS_TREE_CONFIG;
+    ventilatorCount.value = info.fanMainList.length.toString();
+    headerData.value = info;
+
+    // 处理树状图的数据
+    treeData.value = info.fanMainList.map((mainfan, i) => {
       return {
-        title: `${prefix}${e[prop]}${suffix}`,
+        title: `${prefix}${mainfan[prop]}${suffix}`,
         key: i.toString(),
         children: children.map((child, j) => {
           // 配置里如果指定了多个prop则进行合并
-          if (Array.isArray(child.prop)) {
-            return {
-              title: `${child.prefix}${child.prop.map((p) => `${e[p]}${suffix}`).join('-')}`,
-              key: `${i}-${j}`,
-            };
-          } else {
-            return {
-              title: `${child.prefix}${e[child.prop]}${child.suffix}`,
-              key: `${i}-${j}`,
-            };
-          }
+          // if (Array.isArray(child.prop)) {
+          //   return {
+          //     title: `${child.prefix}${child.prop.map((p) => `${mainfan[p]}${suffix}`).join('-')}`,
+          //     key: `${i}-${j}`,
+          //   };
+          // }
+
+          // 该部分数据有可能部分为undefined
+          return {
+            title: `${child.prefix}${_.get(mainfan, child.prop, '/')}${child.suffix}`,
+            key: `${i}-${j}`,
+          };
         }),
       };
     });

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

@@ -26,7 +26,7 @@
   import { computed, onMounted, ref } from 'vue';
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
-  import { COMPONENTS_MAP } from './billboard.data';
+  import { BillboardType, COMPONENTS_MAP } from './billboard.data';
   import { useRoute } from 'vue-router';
   import { getSummary } from './billboard.api';
   import { useSSO } from '/@/hooks/vent/useSSO';
@@ -38,7 +38,7 @@
   const mainTitle = '煤炭集团';
 
   // 看板相关的基础配置
-  const billboards = ref<{ orgname: string; ip: string }[]>([]);
+  const billboards = ref<BillboardType[]>([]);
 
   function fetchBillboards() {
     getSummary().then((r) => {
@@ -67,7 +67,7 @@
 
   // 页面跳转
   function openHandler(ip: string) {
-    open(`${ip}:8082/login`);
+    open(`http://${ip}:8092/login`);
   }
 
   onMounted(() => {

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

@@ -42,7 +42,6 @@
 
   // 选择了某一项
   function selectHandler({ key, item }) {
-    console.log('debug', key, item);
     selectedKey.value = key;
     selectedLabel.value = item.title;
     emit('change', key);