[Feat 0000] 公司端看板无数据的改为提示/显示网络异常

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

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="dust-risk">
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到粉尘预警信息" />
+  <div v-else 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>
@@ -10,20 +11,19 @@
 </template>
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { BillboardType, DEFAULT_TEST_DATA, DUST_RISK_CONFIG } from '../billboard.data';
+  import { Result } from 'ant-design-vue';
+  import { BillboardType, DUST_RISK_CONFIG } from '../billboard.data';
   import { get } from '../utils';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
   defineEmits(['click']);
 
-  const dustRiskData = computed<BillboardType['dustRisk']>(() => {
+  const unavailble = computed<boolean>(() => {
+    return props.data.dustRisk === undefined;
+  });
+  const dustRiskData = computed(() => {
     const info = props.data.dustRisk;
     return info;
   });

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

@@ -1,33 +1,26 @@
 <template>
-  <CommonTitle class="mb-10px" label="矿井粉尘风险性等级" :value="risk" />
-  <CollapseTable :columns="DUST_STATUS_COLUMN" :data="tableData" :collapses="DUST_COLLAPSES" />
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到粉尘风险等级信息" />
+  <template v-else>
+    <CommonTitle class="mb-10px" label="矿井粉尘风险性等级" :value="risk" />
+    <CollapseTable :columns="DUST_STATUS_COLUMN" :data="tableData" :collapses="DUST_COLLAPSES" />
+  </template>
 </template>
 <script lang="ts" setup>
   import CollapseTable from './CollapseTable.vue';
   import CommonTitle from './CommonTitle.vue';
-  import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN, DUST_COLLAPSES } from '../billboard.data';
+  import { Result } from 'ant-design-vue';
+  import { BillboardType, DUST_STATUS_COLUMN, DUST_COLLAPSES } from '../billboard.data';
   import { computed } from 'vue';
   import { get } from '../utils';
   // import mapComponent from './3Dmap/index.vue';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
-  const trans = {
-    0: '低风险',
-    101: '低风险',
-    102: '一般风险',
-    103: '较大风险',
-    104: '重大风险',
-    201: '报警',
-    1001: '网络断开',
-  };
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
 
+  const unavailble = computed<boolean>(() => {
+    return props.data.dustInfo === undefined;
+  });
   const risk = computed(() => {
     const info = props.data.dustInfo;
     return trans[get(info, 'dustWarnLevel', 0)];
@@ -41,5 +34,15 @@
       };
     });
   });
+
+  const trans = {
+    0: '低风险',
+    101: '低风险',
+    102: '一般风险',
+    103: '较大风险',
+    104: '重大风险',
+    201: '报警',
+    1001: '网络断开',
+  };
 </script>
 <style lang="less" scoped></style>

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

@@ -1,27 +1,28 @@
 <template>
-  <div class="card-b">
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到文件信息" />
+  <div v-else class="card-b">
     <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">{{ fileData[item.prop] }}</div>
+      <div class="num">{{ get(fileData, item.prop) }}</div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
+  import { Result } from 'ant-design-vue';
+  import { BillboardType, FILE_OVERVIEW_CONFIG } from '../billboard.data';
+  import { get } from '../utils';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
   defineEmits(['click']);
 
-  const fileData = computed<BillboardType['fileServerInfo']>(() => {
+  const unavailble = computed<boolean>(() => {
+    return props.data.fileServerInfo === undefined;
+  });
+  const fileData = computed(() => {
     // 返回的数据中有两种类型，适配之
     const info = props.data.fileServerInfo;
     return info;

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

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="fire_wrapper">
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到火灾风险信息" />
+  <div v-else class="fire_wrapper">
     <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
     <Collapse ghost class="fire_list">
       <CollapsePanel class="fire_list_item" v-for="(item, i) in FIRE_STATUS_LIST" :key="`svvhbcfcp-${i}`" :showArrow="false">
@@ -22,21 +23,35 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { Collapse, CollapsePanel } from 'ant-design-vue';
+  import { Collapse, CollapsePanel, Result } from 'ant-design-vue';
   import { get } from '../utils';
   import { computed } from 'vue';
   import CommonTitle from './CommonTitle.vue';
   import ListItem from './ListItem.vue';
-  import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST } from '../billboard.data';
+  import { BillboardType, FIRE_STATUS_LIST } from '../billboard.data';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
+
+  const unavailble = computed<boolean>(() => {
+    return props.data.fireInfo === undefined;
+  });
+  const risk = computed(() => {
+    const info = props.data.fireInfo;
+    return riskTrans[get(info, 'fireWarnLevel', 0)];
+  });
+  const listData = computed(() => {
+    const info = props.data.fireInfo;
+    const value = {};
+    FIRE_STATUS_LIST.forEach((cfg) => {
+      value[cfg.prop] = get(warnTrans, get(info, cfg.prop), '低风险');
+      cfg.collapses.forEach((el) => {
+        value[el.prop] = get(info, el.prop);
+      });
+    });
+    return value;
+  });
 
   const riskTrans = {
     0: '低风险',
@@ -56,22 +71,6 @@
     201: '报警',
     1001: '网络断开',
   };
-
-  const risk = computed(() => {
-    const info = props.data.fireInfo;
-    return riskTrans[get(info, 'fireWarnLevel', 0)];
-  });
-  const listData = computed(() => {
-    const info = props.data.fireInfo;
-    const value = {};
-    FIRE_STATUS_LIST.forEach((cfg) => {
-      value[cfg.prop] = get(warnTrans, get(info, cfg.prop), '低风险');
-      cfg.collapses.forEach((el) => {
-        value[el.prop] = get(info, el.prop);
-      });
-    });
-    return value;
-  });
 </script>
 <style lang="less" scoped>
   .fire_list {

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

@@ -1,29 +1,47 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Row justify="space-around">
-    <Col v-for="(item, i) in GAS_STATUS_HEADER_CONFIG" :key="`svvhbcgs${i}`" :span="10">
-      <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
-    </Col>
-  </Row>
-  <CollapseTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" :collapses="GAS_COLLAPSES" content-height="160px" />
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到瓦斯风险信息" />
+  <template v-else>
+    <Row justify="space-around">
+      <Col v-for="(item, i) in GAS_STATUS_HEADER_CONFIG" :key="`svvhbcgs${i}`" :span="10">
+        <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
+      </Col>
+    </Row>
+    <CollapseTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" :collapses="GAS_COLLAPSES" content-height="160px" />
+  </template>
 </template>
 <script lang="ts" setup>
-  import { Row, Col } from 'ant-design-vue';
-  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA, GAS_COLLAPSES, BillboardType } from '../billboard.data';
+  import { Row, Col, Result } from 'ant-design-vue';
+  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, GAS_COLLAPSES, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
   import { computed } from 'vue';
   import CollapseTable from './CollapseTable.vue';
   import { get } from '../utils';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
+
+  const unavailble = computed<boolean>(() => {
+    return props.data.gasInfo === undefined;
+  });
+  const headerData = computed(() => {
+    const info = props.data.gasInfo;
+    return {
+      gasWarnLevel: riskTrans[get(info, 'gasWarnLevel', 0)],
+      gasJudgeLevel: props.data.orgcode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯',
+    };
+  });
+  const tableData = computed(() => {
+    const info = props.data.gasInfo;
+    return get(info, 'gasTypeList', []).map((e) => {
+      return {
+        ...e,
+        warnLevelStr: trans[e.warnLevel],
+      };
+    });
+  });
 
   const riskTrans = {
     0: '低风险',
@@ -43,23 +61,5 @@
     201: '报警',
     1001: '网络断开',
   };
-
-  const headerData = computed(() => {
-    const info = props.data.gasInfo;
-    return {
-      gasWarnLevel: riskTrans[get(info, 'gasWarnLevel', 0)],
-      gasJudgeLevel: props.data.orgcode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯',
-    };
-  });
-
-  const tableData = computed<BillboardType['gasInfo']['gasTypeList']>(() => {
-    const info = props.data.gasInfo;
-    return get(info, 'gasTypeList', []).map((e) => {
-      return {
-        ...e,
-        warnLevelStr: trans[e.warnLevel],
-      };
-    });
-  });
 </script>
 <style lang="less" scoped></style>

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

@@ -1,29 +1,31 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Row justify="space-around">
-    <!-- <Col> -->
-    <LargeBoard :label="SUMMARY_HEADER_CONFIG.label" :value="headerData" :type="SUMMARY_HEADER_CONFIG.type" />
-    <!-- </Col> -->
-  </Row>
-  <CommonTable class="mt-10px" :columns="SUMMARY_COLUMN" :data="tableData" />
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到相关信息" />
+  <template v-else>
+    <Row justify="space-around">
+      <!-- <Col> -->
+      <LargeBoard :label="SUMMARY_HEADER_CONFIG.label" :value="headerData" :type="SUMMARY_HEADER_CONFIG.type" />
+      <!-- </Col> -->
+    </Row>
+    <CommonTable class="mt-10px" :columns="SUMMARY_COLUMN" :data="tableData" />
+  </template>
 </template>
 <script lang="ts" setup>
-  import { Row } from 'ant-design-vue';
-  import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, DEFAULT_TEST_DATA, BillboardType } from '../billboard.data';
+  import { Row, Result } from 'ant-design-vue';
+  import { SUMMARY_HEADER_CONFIG, SUMMARY_COLUMN, BillboardType } from '../billboard.data';
   import LargeBoard from './LargeBoard.vue';
-  import { onMounted, shallowRef, ref } from 'vue';
+  import { onMounted, shallowRef, ref, computed } from 'vue';
   import CommonTable from './CommonTable.vue';
   import { get } from '../utils';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
+
+  const unavailble = computed<boolean>(() => {
+    return props.data.sys_warndata === undefined;
+  });
 
   const headerData = ref('/');
   const tableData = shallowRef<any[]>([]);

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

@@ -1,8 +1,9 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Row justify="space-between">
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到风机信息" />
+  <Row v-else justify="space-between">
     <Col v-for="(item, i) in VENTILATION_STATUS_HEADER_CONFIG" :key="`svvhbcvs${i}`" :span="12">
-      <MiniBoard :label="item.label" :value="filterBadValue(headerData[item.prop])" :type="item.type" />
+      <MiniBoard :label="item.label" :value="filterBadValue(get(headerData, item.prop))" :type="item.type" />
     </Col>
     <div class="ventilate-status-card">
       <!-- <CommonTitle label="回风井系统数量" :value="ventilatorCount" /> -->
@@ -11,25 +12,23 @@
   </Row>
 </template>
 <script lang="ts" setup>
-  import { Row, Col } from 'ant-design-vue';
+  import { Row, Col, Result } from 'ant-design-vue';
   import { BasicTree } from '/@/components/Tree';
   import type { TreeProps } from 'ant-design-vue';
-  import { BillboardType, DEFAULT_TEST_DATA, VENTILATION_STATUS_HEADER_CONFIG, VENTILATION_STATUS_TREE_CONFIG } from '../billboard.data';
+  import { BillboardType, VENTILATION_STATUS_HEADER_CONFIG, VENTILATION_STATUS_TREE_CONFIG } from '../billboard.data';
   import MiniBoard from './MiniBoard.vue';
   import { ref, computed } from 'vue';
   import { get } from '../utils';
   // import CommonTitle from './CommonTitle.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
 
+  const unavailble = computed<boolean>(() => {
+    return props.data.ventInfo === undefined;
+  });
   // const ventilatorCount = ref('0');
   const headerData = computed(() => {
     const info = props.data.ventInfo;

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

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="warning">
+  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到预警信息" />
+  <div v-else 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>
@@ -12,27 +13,25 @@
 </template>
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { BillboardType, DEFAULT_TEST_DATA, WARNING_CONFIG } from '../billboard.data';
+  import { Result } from 'ant-design-vue';
+  import { BillboardType, WARNING_CONFIG } from '../billboard.data';
   import { get } from '../utils';
 
-  const props = withDefaults(
-    defineProps<{
-      data?: BillboardType;
-    }>(),
-    {
-      data: () => DEFAULT_TEST_DATA,
-    }
-  );
+  const props = defineProps<{
+    data: Partial<BillboardType>;
+  }>();
   defineEmits(['click']);
 
-  const warnData = computed<BillboardType['warnInfo']>(() => {
+  const unavailble = computed<boolean>(() => {
+    return props.data.warnInfo === undefined;
+  });
+  const warnData = computed(() => {
     const info = props.data.warnInfo;
     return info;
   });
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
   @import '/@/design/theme.less';
   @font-face {
     font-family: 'douyuFont';
@@ -54,7 +53,7 @@
     padding-left: 60px;
 
     .text {
-      width: 130px;
+      width: 120px;
       text-align: left;
     }
     .extra {
@@ -90,11 +89,11 @@
     }
     .extra {
       text-align: center;
-      width: 90px;
+      width: 80px;
     }
     .num {
       text-align: center;
-      width: 110px;
+      width: 120px;
     }
     .risk {
       text-align: right;

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

@@ -1,87 +1,88 @@
-import _ from 'lodash-es';
-import { BillboardType, HeaderConfig, ListConfig, TableConfig, TitleConfig } from './billboard.data';
+import _ from 'lodash';
+// import { BillboardType, HeaderConfig, ListConfig, TableConfig, TitleConfig } from './billboard.data';
 
 /**
  * 功能类似 lodash.get 但是当取值为 null 时也直接返回默认值
  */
-export const get: typeof _.get = (o, p, defaultValue = '/') => {
-  const d = _.get(o, p, defaultValue);
+export function get(object?: Object, path?: Array<string> | string, defaultValue: any = '/') {
+  if (!object || path === undefined) return defaultValue;
+  const d = _.get(object, path, defaultValue);
   return d === null ? defaultValue : d;
-};
-
-/** 依据配置获取适用于 CommonTitle 的数据 */
-export function parseTitleConfig(data: BillboardType, config: TitleConfig) {
-  const val = get(data, config.prop);
-  return {
-    label: config.label,
-    value: config.translation ? get(config.translation, val) : val,
-  };
 }
 
-/** 依据配置获取适用于 LargeBoard 的数据 */
-export function parseHeaderConfigs(data: BillboardType, configs: HeaderConfig[]) {
-  const types = ['to-top-right', 'to-bottom-right'];
-  return configs.map((cfg, i) => {
-    const val = get(data, cfg.prop);
-    return {
-      label: cfg.label,
-      value: cfg.translation ? get(cfg.translation, val) : val,
-      type: types[i % configs.length],
-    };
-  });
-}
+// /** 依据配置获取适用于 CommonTitle 的数据 */
+// export function parseTitleConfig(data: BillboardType, config: TitleConfig) {
+//   const val = get(data, config.prop);
+//   return {
+//     label: config.label,
+//     value: config.translation ? get(config.translation, val) : val,
+//   };
+// }
 
-/** 依据配置获取适用于 CommonTable、CollapseTable 的数据 */
-export function parseTableConfig(data: BillboardType, config: TableConfig) {
-  const arr = get(data, config.prop, []);
-  if (config.translation) {
-    const finalRes = arr.reduce((res: any[], ele) => {
-      // 对于表格里的每条数据，如果需要翻译则翻译之
-      config.columns.forEach((col) => {
-        if (col._t) {
-          const v = get(ele, col.prop);
-          _.set(ele, col.prop, get(config.translation, v));
-        }
-      });
-      config.collapses.forEach((col) => {
-        if (col._t) {
-          const v = get(ele, col.prop);
-          _.set(ele, col.prop, get(config.translation, v));
-        }
-      });
-      res.push(ele);
-      return res;
-    }, []);
+// /** 依据配置获取适用于 LargeBoard 的数据 */
+// export function parseHeaderConfigs(data: BillboardType, configs: HeaderConfig[]) {
+//   const types = ['to-top-right', 'to-bottom-right'];
+//   return configs.map((cfg, i) => {
+//     const val = get(data, cfg.prop);
+//     return {
+//       label: cfg.label,
+//       value: cfg.translation ? get(cfg.translation, val) : val,
+//       type: types[i % configs.length],
+//     };
+//   });
+// }
 
-    return {
-      data: finalRes,
-      collapses: config.collapses,
-      columns: config.columns,
-    };
-  } else {
-    return {
-      data,
-      collapses: config.collapses,
-      columns: config.columns,
-    };
-  }
-}
+// /** 依据配置获取适用于 CommonTable、CollapseTable 的数据 */
+// export function parseTableConfig(data: BillboardType, config: TableConfig) {
+//   const arr = get(data, config.prop, []);
+//   if (config.translation) {
+//     const finalRes = arr.reduce((res: any[], ele) => {
+//       // 对于表格里的每条数据，如果需要翻译则翻译之
+//       config.columns.forEach((col) => {
+//         if (col._t) {
+//           const v = get(ele, col.prop);
+//           _.set(ele, col.prop, get(config.translation, v));
+//         }
+//       });
+//       config.collapses.forEach((col) => {
+//         if (col._t) {
+//           const v = get(ele, col.prop);
+//           _.set(ele, col.prop, get(config.translation, v));
+//         }
+//       });
+//       res.push(ele);
+//       return res;
+//     }, []);
 
-/** 依据配置获取适用于 ListItem 的数据 */
-export function parseListConfigs(data: BillboardType, configs: ListConfig[]) {
-  const types = ['blue', 'green'];
-  return configs.map((cfg, i) => {
-    const val = get(data, cfg.prop);
-    return {
-      icon: cfg.icon,
-      label: cfg.label,
-      value: cfg.translation ? get(cfg.translation, val) : val,
-      type: types[i % configs.length],
-      collapses: cfg.collapses.map((col) => {
-        return {
-          label: col.label,
-        };
-      }),
-    };
-  });
-}
+//     return {
+//       data: finalRes,
+//       collapses: config.collapses,
+//       columns: config.columns,
+//     };
+//   } else {
+//     return {
+//       data,
+//       collapses: config.collapses,
+//       columns: config.columns,
+//     };
+//   }
+// }
+
+// /** 依据配置获取适用于 ListItem 的数据 */
+// export function parseListConfigs(data: BillboardType, configs: ListConfig[]) {
+//   const types = ['blue', 'green'];
+//   return configs.map((cfg, i) => {
+//     const val = get(data, cfg.prop);
+//     return {
+//       icon: cfg.icon,
+//       label: cfg.label,
+//       value: cfg.translation ? get(cfg.translation, val) : val,
+//       type: types[i % configs.length],
+//       collapses: cfg.collapses.map((col) => {
+//         return {
+//           label: col.label,
+//         };
+//       }),
+//     };
+//   });
+// }