[Wip 0000] 看板数据对接

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

@@ -1,4 +1,3 @@
-import { queryDepartTreeSync } from '/@/api/common/api';
 import { useUserStore } from '/@/store/modules/user';
 import { defHttp } from '/@/utils/http/axios';
 
@@ -97,18 +96,6 @@ export const getSummary = () =>
 //   },
 // });
 
-/**
- * 获取矿区列表
- * @param params
- */
-export const getList = () => {
-  return queryDepartTreeSync().then((r) => {
-    return r.map((e) => ({
-      title: e.title,
-      address: `${e.ip}:${e.port}`,
-    }));
-  });
-};
 // 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' },

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

@@ -158,3 +158,37 @@ export const COMPONENTS_MAP = new Map([
   ['ventilate', VentilationStatus],
   ['gas', GasStatus],
 ]);
+
+export const DEFAULT_TEST_DATA = {
+  dustInfo: {
+    // 矿井粉尘风险信息
+    totalNum: 0,
+    dustTypeList: [],
+    dustWarnLevel: 0, // 矿井粉尘风险性等级
+  },
+  fileServerInfo: {
+    totalNum: 0, // 文档总数
+    approvalNum: 0, // 待审批文档
+  },
+  fireInfo: {
+    tempMax: 0, // 矿井温度传感器最高温度
+    fireWarnLevel: 0, // 矿井火灾风险等级
+    coSensorInfo: 0, // 矿井CO传感器报警等级
+    bundletubeInfo: 0, // 矿井束管监测报警等级
+    smokeSensorInfo: 0, // 矿井烟雾传感器报警等级
+    fiberInfo: 0, // 矿井光纤测温系统报警等级
+    tempSensorInfo: 0, // 矿井温度传感器报警等级
+  },
+  gasInfo: {
+    gasWarnLevel: 0, // 瓦斯风险等级
+    gasTypeList: [],
+  },
+  ventInfo: {
+    //通风系统信息
+    totallength: 0, //矿井巷道总长度
+    zonghuifeng: '0', //总回风
+    fanMainList: [],
+    xufengliang: 0, //总需风量
+    zongjinfeng: '0', //总进风
+  },
+};

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

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="card" :style="{ height: `${height}px` }">
-    <p class="card_title" @click="alert">
+    <p class="card_title" @click="clickHandler">
       <slot name="title">{{ title }}</slot>
     </p>
     <div class="card_content" :style="{ height: `${contentHeight}px` }">
@@ -26,8 +26,10 @@
     }
   );
 
-  function alert() {
-    window.alert('123');
+  const emit = defineEmits(['open']);
+
+  function clickHandler() {
+    emit('open');
   }
 </script>
 <style lang="less" scoped>

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

@@ -6,13 +6,20 @@
 <script lang="ts" setup>
   import CommonTable from './CommonTable.vue';
   import CommonTitle from './CommonTitle.vue';
-  import { DUST_STATUS_COLUMN } from '../billboard.data';
+  import { DEFAULT_TEST_DATA, DUST_STATUS_COLUMN } from '../billboard.data';
   import { onMounted, ref, shallowRef } from 'vue';
-  import { getSummary } from '../billboard.api';
   // import mapComponent from './3Dmap/index.vue';
 
+  const props = withDefaults(
+    defineProps<{
+      data?: any;
+    }>(),
+    {
+      data: DEFAULT_TEST_DATA,
+    }
+  );
   const risk = ref('低风险');
-  const data = shallowRef<any[]>([]);
+  const tableData = shallowRef<any[]>([]);
 
   function fetchData() {
     const trans = {
@@ -24,13 +31,11 @@
       201: '报警',
       1001: '网络断开',
     };
-    getSummary().then((r) => {
-      data.value = r.dustInfo.dustTypeList.map((e) => {
-        return {
-          ...e,
-          warnLevelStr: trans[e.warnLevel],
-        };
-      });
+    tableData.value = props.data.dustInfo.dustTypeList.map((e) => {
+      return {
+        ...e,
+        warnLevelStr: trans[e.warnLevel],
+      };
     });
   }
 

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

@@ -9,17 +9,22 @@
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, shallowRef } from 'vue';
-  import { FILE_OVERVIEW_CONFIG } from '../billboard.data';
-  import { getSummary } from '../billboard.api';
+  import { DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
 
+  const props = withDefaults(
+    defineProps<{
+      data?: any;
+    }>(),
+    {
+      data: DEFAULT_TEST_DATA,
+    }
+  );
   defineEmits(['click']);
 
-  const data = shallowRef<any>({});
+  const fileData = shallowRef<any>({});
 
   function fetchData() {
-    getSummary().then((r) => {
-      data.value = r.fileServerInfo;
-    });
+    fileData.value = props.data.fileServerInfo;
   }
 
   onMounted(() => {

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

@@ -15,17 +15,23 @@
   import { onMounted, ref, shallowRef } from 'vue';
   import CommonTitle from './CommonTitle.vue';
   import ListItem from './ListItem.vue';
-  import { FIRE_STATUS_LIST } from '../billboard.data';
-  import { getSummary } from '../billboard.api';
+  import { DEFAULT_TEST_DATA, FIRE_STATUS_LIST } from '../billboard.data';
+
+  const props = withDefaults(
+    defineProps<{
+      data?: any;
+    }>(),
+    {
+      data: DEFAULT_TEST_DATA,
+    }
+  );
 
   const risk = ref('低风险');
 
-  const data = shallowRef<any>({});
+  const listData = shallowRef<any>({});
 
   function fetchData() {
-    getSummary().then((r) => {
-      data.value = r.fireInfo;
-    });
+    listData.value = props.data.fireInfo;
   }
 
   onMounted(() => {

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

@@ -9,24 +9,30 @@
 </template>
 <script lang="ts" setup>
   import { Row, Col } from 'ant-design-vue';
-  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN } from '../billboard.data';
+  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
   import { onMounted, shallowRef } from 'vue';
   import CommonTable from './CommonTable.vue';
-  import { getSummary } from '../billboard.api';
   // import mapComponent from './components/3Dmap/index.vue';
 
+  const props = withDefaults(
+    defineProps<{
+      data?: any;
+    }>(),
+    {
+      data: DEFAULT_TEST_DATA,
+    }
+  );
+
   const headerData = shallowRef({});
-  const data = shallowRef<any[]>([]);
+  const tableData = shallowRef<any[]>([]);
 
   function fetchData() {
-    getSummary().then((r) => {
-      headerData.value = {
-        gasWarnLevel: r.gasInfo.gasWarnLevel,
-        gasJudgeLevel: 0,
-      };
-      data.value = r.gasInfo.gasTypeList;
-    });
+    headerData.value = {
+      gasWarnLevel: props.data.gasInfo.gasWarnLevel,
+      gasJudgeLevel: 0,
+    };
+    tableData.value = props.data.gasInfo.gasTypeList;
   }
 
   onMounted(() => {

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

@@ -14,42 +14,48 @@
   import { Row, Col } from 'ant-design-vue';
   import { BasicTree } from '/@/components/Tree';
   import type { TreeProps } from 'ant-design-vue';
-  import { VENTILATION_STATUS_HEADER_CONFIG, VENTILATION_STATUS_TREE_CONFIG } from '../billboard.data';
+  import { 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 { getSummary } from '../billboard.api';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  const data = shallowRef({});
+  const props = withDefaults(
+    defineProps<{
+      data?: any;
+    }>(),
+    {
+      data: DEFAULT_TEST_DATA,
+    }
+  );
+
+  const baseData = shallowRef({});
   const ventilatorCount = ref('0');
   const treeData = shallowRef<TreeProps['treeData']>([]);
 
   function fetchData() {
-    getSummary().then((r) => {
-      ventilatorCount.value = r.ventInfo.fanMainList.length.toString();
-      data.value = r.ventInfo;
-      treeData.value = r.ventInfo.fanMainList.map((e, i) => {
-        const { prefix, suffix, prop, children } = VENTILATION_STATUS_TREE_CONFIG;
-        return {
-          title: `${prefix}${e[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}`,
-              };
-            }
-          }),
-        };
-      });
+    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;
+      return {
+        title: `${prefix}${e[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}`,
+            };
+          }
+        }),
+      };
     });
   }
 

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

@@ -6,8 +6,8 @@
     </div>
     <a-row class="company-content" :gutter="10">
       <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
-        <BaseCard :title="item.title">
-          <component :is="COMPONENTS_MAP.get(billboardType)" />
+        <BaseCard :title="item.orgname" @open="openHandler(item.ip)">
+          <component :is="COMPONENTS_MAP.get(billboardType)" :data="item" />
         </BaseCard>
       </a-col>
     </a-row>
@@ -28,18 +28,20 @@
   import ArrowButton from './components/ArrowButton.vue';
   import { COMPONENTS_MAP } from './billboard.data';
   import { useRoute } from 'vue-router';
-  import { getList } from './billboard.api';
+  import { getSummary } from './billboard.api';
+  import { useSSO } from '/@/hooks/vent/useSSO';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const route = useRoute();
+  const { open } = useSSO();
 
   const mainTitle = '煤炭集团';
 
   // 看板相关的基础配置
-  const billboards = ref<{ title: string }[]>([]);
+  const billboards = ref<{ orgname: string; ip: string }[]>([]);
 
   function fetchBillboards() {
-    getList().then((r) => {
+    getSummary().then((r) => {
       billboards.value = r;
     });
   }
@@ -63,6 +65,11 @@
   const billboardType = ref('dust');
   const showBtn = ref(true);
 
+  // 页面跳转
+  function openHandler(ip: string) {
+    open(`${ip}:8082/login`);
+  }
+
   onMounted(() => {
     if (route.query.type) {
       billboardType.value = route.query.type as string;