Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

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

@@ -6,7 +6,8 @@
   import CommonTable from './CommonTable.vue';
   import CommonTitle from './CommonTitle.vue';
   import { BillboardType, DEFAULT_TEST_DATA, DUST_STATUS_COLUMN } from '../billboard.data';
-  import { onMounted, ref, shallowRef } from 'vue';
+  import { ref, shallowRef, watch } from 'vue';
+  import _ from 'lodash-es';
   // import mapComponent from './3Dmap/index.vue';
 
   const props = withDefaults(
@@ -22,28 +23,32 @@
 
   function fetchData() {
     const info = props.data.dustInfo;
-    if (info) {
-      const trans = {
-        0: '低风险',
-        101: '低风险',
-        102: '一般风险',
-        103: '较大风险',
-        104: '重大风险',
-        201: '报警',
-        1001: '网络断开',
+    if (!info) return;
+    const trans = {
+      0: '低风险',
+      101: '低风险',
+      102: '一般风险',
+      103: '较大风险',
+      104: '重大风险',
+      201: '报警',
+      1001: '网络断开',
+    };
+    risk.value = trans[_.get(info, 'dustWarnLevel', 0)];
+    tableData.value = _.get(info, 'dustTypeList', []).map((e) => {
+      return {
+        ...e,
+        warnLevelStr: trans[e.warnLevel],
       };
-      risk.value = trans[info.dustWarnLevel];
-      tableData.value = info.dustTypeList.map((e) => {
-        return {
-          ...e,
-          warnLevelStr: trans[e.warnLevel],
-        };
-      });
-    }
+    });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

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

@@ -8,8 +8,9 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, shallowRef } from 'vue';
+  import { watch, shallowRef } from 'vue';
   import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
+  import _ from 'lodash-es';
 
   const props = withDefaults(
     defineProps<{
@@ -27,12 +28,19 @@
   });
 
   function fetchData() {
-    fileData.value = props.data.fileServerInfo || DEFAULT_TEST_DATA.fileServerInfo;
+    const info = props.data.fileServerInfo;
+    if (!info) return;
+    fileData.value = info;
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 
 <style lang="less" scoped>

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

@@ -13,7 +13,7 @@
 </template>
 <script lang="ts" setup>
   import _ from 'lodash-es';
-  import { onMounted, ref, shallowRef } from 'vue';
+  import { watch, ref, shallowRef } from 'vue';
   import CommonTitle from './CommonTitle.vue';
   import ListItem from './ListItem.vue';
   import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST, FIRE_STATUS_IGNORE_TRANSLATION_KEYS } from '../billboard.data';
@@ -32,7 +32,8 @@
   const listData = shallowRef<any>({});
 
   function fetchData() {
-    const info = props.data.fireInfo || DEFAULT_TEST_DATA.fireInfo;
+    const info = props.data.fireInfo;
+    if (!info) return;
     const riskTrans = {
       0: '低风险',
       101: '低风险',
@@ -51,7 +52,7 @@
       201: '报警',
       1001: '网络断开',
     };
-    risk.value = riskTrans[info.fireWarnLevel];
+    risk.value = riskTrans[_.get(info, 'fireWarnLevel', 0)];
     _.forEach(info, (val, key) => {
       if (FIRE_STATUS_IGNORE_TRANSLATION_KEYS.includes(key)) return;
       info[key] = warnTrans[val];
@@ -59,8 +60,13 @@
     listData.value = info;
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

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

@@ -8,10 +8,11 @@
   <CommonTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" />
 </template>
 <script lang="ts" setup>
+  import _ from 'lodash-es';
   import { Row, Col } from 'ant-design-vue';
   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 { watch, shallowRef } from 'vue';
   import CommonTable from './CommonTable.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -28,7 +29,17 @@
   const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);
 
   function fetchData() {
-    const info = props.data.gasInfo || DEFAULT_TEST_DATA.gasInfo;
+    const info = props.data.gasInfo;
+    if (!info) return;
+    const riskTrans = {
+      0: '低风险',
+      101: '低风险',
+      102: '普通风险',
+      103: '较高风险',
+      104: '高风险',
+      201: '低风险',
+      1001: '低风险',
+    };
     const trans = {
       0: '低风险',
       101: '低风险',
@@ -39,10 +50,10 @@
       1001: '网络断开',
     };
     headerData.value = {
-      gasWarnLevel: trans[info.gasWarnLevel],
+      gasWarnLevel: riskTrans[_.get(info, 'gasWarnLevel', 0)],
       gasJudgeLevel: '低风险',
     };
-    tableData.value = info.gasTypeList.map((e) => {
+    tableData.value = _.get(info, 'gasTypeList', []).map((e) => {
       return {
         ...e,
         warnLevelStr: trans[e.warnLevel],
@@ -50,8 +61,13 @@
     });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

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

@@ -11,7 +11,7 @@
   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 { watch, shallowRef } from 'vue';
   import CommonTable from './CommonTable.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -50,8 +50,13 @@
     });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped></style>

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

@@ -5,20 +5,20 @@
       <MiniBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
     </Col>
     <div class="ventilate-status-card">
-      <CommonTitle label="回风井系统数量" :value="ventilatorCount" />
-      <BasicTree class="ventilate-status-card__tree" :tree-data="treeData" :virtual="false" />
+      <!-- <CommonTitle label="回风井系统数量" :value="ventilatorCount" /> -->
+      <BasicTree class="ventilate-status-card__tree" :tree-data="treeData" :virtual="false" :expanded-keys="expandedKeys" />
     </div>
   </Row>
 </template>
 <script lang="ts" setup>
+  import _ from 'lodash-es';
   import { Row, Col } 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 MiniBoard from './MiniBoard.vue';
-  import { onMounted, ref, shallowRef } from 'vue';
-  import CommonTitle from './CommonTitle.vue';
-  import _ from 'lodash-es';
+  import { ref, shallowRef, watch } from 'vue';
+  // import CommonTitle from './CommonTitle.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = withDefaults(
@@ -30,18 +30,22 @@
     }
   );
 
-  const ventilatorCount = ref('0');
+  // const ventilatorCount = ref('0');
   const headerData = shallowRef({});
   const treeData = shallowRef<TreeProps['treeData']>([]);
+  const expandedKeys = ref<string[]>([]);
 
   function fetchData() {
-    const info = props.data.ventInfo || DEFAULT_TEST_DATA.ventInfo;
+    const info = props.data.ventInfo;
+    if (!info) return;
     const { prefix, suffix, prop, children } = VENTILATION_STATUS_TREE_CONFIG;
-    ventilatorCount.value = info.fanMainList.length.toString();
+    // ventilatorCount.value = info.fanMainList.length.toString();
     headerData.value = info;
+    expandedKeys.value = [];
 
     // 处理树状图的数据
-    treeData.value = info.fanMainList.map((mainfan, i) => {
+    treeData.value = _.get(info, 'fanMainList', []).map((mainfan, i) => {
+      expandedKeys.value.push(i.toString());
       return {
         title: `${prefix}${mainfan[prop]}${suffix}`,
         key: i.toString(),
@@ -64,9 +68,14 @@
     });
   }
 
-  onMounted(() => {
-    fetchData();
-  });
+  watch(
+    () => props.data,
+    () => {
+      console.log('debug');
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
 <style lang="less" scoped>
   .ventilate-status-card {
@@ -82,7 +91,7 @@
     // }
 
     .ventilate-status-card__tree {
-      height: 130px;
+      height: 160px;
       overflow: auto;
     }
   }

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

@@ -6,7 +6,7 @@
     </div>
     <a-row class="company-content" :gutter="10">
       <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
-        <BaseCard :title="item.orgname" @open="openHandler(item.ip)">
+        <BaseCard :title="item.orgname || '/'" @open="openHandler(item.ip)">
           <component :is="componentMap[billboardType]" :data="item" />
         </BaseCard>
       </a-col>

src/views/vent/home/clique/components/billboard-entry.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="billboard-entry">
+    <div class="entry-title">{{ entryTitle }}</div>
+    <div class="entry-content">
+      <Button class="entry-button" v-for="btn in buttonConfig" :key="btn.id" @click="$router.push(btn.path)">{{ btn.text }}</Button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { getMenus } from '/@/router/menus';
+  import { ref, onMounted } from 'vue';
+  import { Menu } from '/@/router/types';
+  import Button from '../../../gas/components/form/button.vue';
+
+  // let props = defineProps({});
+
+  const entryTitle = ref('看板汇总台');
+  const buttonConfig = ref<
+    {
+      id: string;
+      text: string;
+      path: string;
+    }[]
+  >([]);
+
+  // 寻找具有指定关键词的菜单，调用前请清空buttonConfig
+  function findBillboardEntry(menus: Menu[]) {
+    const keywords = [
+      // 'vent/home/billboard/dust',
+      // 'vent/home/billboard/file',
+      // 'vent/home/billboard/fire',
+      // 'vent/home/billboard/gas',
+      // 'vent/home/billboard/vent',
+      // 'vent/home/billboard/summary'
+      '看板',
+    ];
+
+    menus.forEach((menu) => {
+      // 如若有子菜单，说明不是叶节点，我们需要找叶节点里匹配关键字的项目
+      if (menu.children) {
+        findBillboardEntry(menu.children);
+        return;
+      }
+      if (
+        keywords.some((w) => {
+          return menu.name.includes(w);
+        })
+      ) {
+        // 如若菜单的名称与关键字匹配，那么记录到buttonConfig里面
+        buttonConfig.value.push({
+          id: menu.path,
+          text: menu.name,
+          path: menu.path,
+        });
+        return;
+      }
+    });
+  }
+
+  onMounted(() => {
+    getMenus().then((menus) => {
+      findBillboardEntry(menus);
+    });
+  });
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .billboard-entry {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .entry-title {
+      position: absolute;
+      left: 50px;
+      top: 10px;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 14px;
+    }
+
+    .entry-content {
+      position: relative;
+      height: 100%;
+      padding: 72px 40px 43px 40px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+
+      .entry-button {
+        width: 170px;
+      }
+    }
+  }
+</style>

src/views/vent/home/clique/components/mine-wind.vue

@@ -8,9 +8,9 @@
       <div class="content-text">
         <div class="text" v-for="(item, index) in mineData" :key="index">
           <span>{{ item.deviceName }}</span>
-          <span>{{ item.jf }}</span>
-          <span>{{ item.hf }}</span>
-          <span>{{ item.xf }}</span>
+          <span>{{ filterBadValue(item.jf) }}</span>
+          <span>{{ filterBadValue(item.hf) }}</span>
+          <span>{{ filterBadValue(item.xf) }}</span>
         </div>
       </div>
     </div>
@@ -31,6 +31,12 @@
   let labelList = reactive([{ name: '矿井名称' }, { name: '总进风量' }, { name: '总回风量' }, { name: '总需风量' }]);
   let mineData = ref<any[]>([]);
 
+  // 过滤不合法的值，小于5000的视为传感器出错
+  function filterBadValue(val: number | string) {
+    const valid = parseInt(val) > 5000;
+    return valid ? val : '/';
+  }
+
   watch(
     () => props.airKjStatus,
     (newA, oldA) => {

src/views/vent/home/clique/components/risk-warn.vue

@@ -44,19 +44,7 @@
                             </svg>
                         </div> -->
             <div class="text-box">
-              <div class="text1">{{
-                centerData.levels == 101
-                  ? '正常'
-                  : centerData.levels == 102
-                  ? '低风险'
-                  : centerData.levels == 103
-                  ? '中风险'
-                  : centerData.levels == 104
-                  ? '高风险'
-                  : centerData.levels == 201
-                  ? '报警'
-                  : '--'
-              }}</div>
+              <div class="text1">{{ parseLevel(centerData.levels) }}</div>
               <div class="text2">风险分析</div>
             </div>
             <div class="icon-animation"></div>
@@ -69,7 +57,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">火灾监测</span>
-                <span class="value value1">{{ centerData.fire }}</span>
+                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.fire) }}</span>
               </div>
             </div>
             <div class="item item2">
@@ -78,7 +66,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">设备监测</span>
-                <span class="value value">{{ centerData.sb }}</span>
+                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.sb) }}</span>
               </div>
             </div>
             <div class="item item3">
@@ -87,7 +75,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">瓦斯监测</span>
-                <span class="value">{{ centerData.ws }}</span>
+                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.ws) }}</span>
                 <!-- <div class="">
                                     <span class="title">矿井瓦斯鉴定等级监测</span>
                                     <span class="value">低瓦斯</span>
@@ -100,7 +88,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">粉尘监测</span>
-                <span class="value">{{ centerData.fc }}</span>
+                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.fc) }}</span>
               </div>
             </div>
             <div class="item item5">
@@ -109,7 +97,7 @@
               </div>
               <div class="item-monitor-box">
                 <span class="title">通风监测</span>
-                <span class="value">{{ centerData.tf }}</span>
+                <span class="value" :class="`value${centerData.tf}`">{{ parseLevel(centerData.tf) }}</span>
               </div>
             </div>
           </div>
@@ -151,11 +139,11 @@
     selectVal.value = val;
     let datas = warnData.value.filter((v) => v.orgname == selectVal.value)[0];
     centerData.levels = datas.sys_warndata.info.sysInfo.synthesizeS.maxLevel;
-    centerData.fire = datas.sys_warndata.info.sysInfo.fireS.maxLevel_str;
-    centerData.sb = datas.sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel_str;
-    centerData.ws = datas.sys_warndata.info.sysInfo.gasS.maxLevel_str;
-    centerData.fc = datas.sys_warndata.info.sysInfo.dustS.maxLevel_str;
-    centerData.tf = datas.sys_warndata.info.sysInfo.ventS.maxLevel_str;
+    centerData.fire = datas.sys_warndata.info.sysInfo.fireS.maxLevel;
+    centerData.sb = datas.sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel;
+    centerData.ws = datas.sys_warndata.info.sysInfo.gasS.maxLevel;
+    centerData.fc = datas.sys_warndata.info.sysInfo.dustS.maxLevel;
+    centerData.tf = datas.sys_warndata.info.sysInfo.ventS.maxLevel;
   }
 
   watch(
@@ -171,19 +159,19 @@
         if (selectVal.value) {
           let datas = newE.filter((v) => v.orgname == selectVal.value)[0];
           centerData.levels = datas.sys_warndata.info.sysInfo.synthesizeS.maxLevel;
-          centerData.fire = datas.sys_warndata.info.sysInfo.fireS.maxLevel_str;
-          centerData.sb = datas.sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel_str;
-          centerData.ws = datas.sys_warndata.info.sysInfo.gasS.maxLevel_str;
-          centerData.fc = datas.sys_warndata.info.sysInfo.dustS.maxLevel_str;
-          centerData.tf = datas.sys_warndata.info.sysInfo.ventS.maxLevel_str;
+          centerData.fire = datas.sys_warndata.info.sysInfo.fireS.maxLevel;
+          centerData.sb = datas.sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel;
+          centerData.ws = datas.sys_warndata.info.sysInfo.gasS.maxLevel;
+          centerData.fc = datas.sys_warndata.info.sysInfo.dustS.maxLevel;
+          centerData.tf = datas.sys_warndata.info.sysInfo.ventS.maxLevel;
         } else {
           selectVal.value = selectList[0].value;
           centerData.levels = newE[0].sys_warndata.info.sysInfo.synthesizeS.maxLevel;
-          centerData.fire = newE[0].sys_warndata.info.sysInfo.fireS.maxLevel_str;
-          centerData.sb = newE[0].sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel_str;
-          centerData.ws = newE[0].sys_warndata.info.sysInfo.gasS.maxLevel_str;
-          centerData.fc = newE[0].sys_warndata.info.sysInfo.dustS.maxLevel_str;
-          centerData.tf = newE[0].sys_warndata.info.sysInfo.ventS.maxLevel_str;
+          centerData.fire = newE[0].sys_warndata.info.sysInfo.fireS.maxLevel;
+          centerData.sb = newE[0].sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel;
+          centerData.ws = newE[0].sys_warndata.info.sysInfo.gasS.maxLevel;
+          centerData.fc = newE[0].sys_warndata.info.sysInfo.dustS.maxLevel;
+          centerData.tf = newE[0].sys_warndata.info.sysInfo.ventS.maxLevel;
         }
       }
     },
@@ -193,6 +181,26 @@
     }
   );
 
+  function parseLevel(lv: string) {
+    const l = parseInt(lv);
+    switch (l) {
+      case 0:
+        return '低风险';
+      case 101:
+        return '低风险';
+      case 102:
+        return '一般风险';
+      case 103:
+        return '较大风险';
+      case 104:
+        return '重大风险';
+      case 201:
+        return '报警';
+      default:
+        return '低风险';
+    }
+  }
+
   onMounted(async () => {
     rainBg('rain', 'animation-box');
   });
@@ -554,11 +562,11 @@
               }
 
               .item-monitor-box {
-                width: 112px;
+                width: 142px;
                 color: #fff;
                 position: relative;
                 top: -58px;
-                left: -16px;
+                left: -21px;
                 font-weight: 600;
 
                 padding: 0px 5px 0px 5px;
@@ -576,16 +584,27 @@
 
                 .value {
                   color: #2bdcff;
-                  margin-left: 10px;
+                  margin-left: 5px;
                 }
 
-                .value1 {
+                .value104 {
                   font-size: 16px;
                   font-weight: 800;
-                  margin-top: 6px;
                   color: #ff0000;
                   animation: color-blink 1s infinite;
                 }
+                .value103 {
+                  font-size: 16px;
+                  font-weight: 800;
+                  color: #ff8800;
+                  animation: color-blink 1s infinite;
+                }
+                .value102 {
+                  font-size: 16px;
+                  font-weight: 800;
+                  color: #ffff00;
+                  animation: color-blink 1s infinite;
+                }
 
                 @keyframes color-blink {
                   0% {

src/views/vent/home/clique/components/scene-key.vue

@@ -4,7 +4,7 @@
     <div class="scene-content">
       <div class="content-t">
         <a-select style="width: 372px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
-          <a-select-option v-for="item in selectList" :value="item.value">{{ item.label }} </a-select-option>
+          <a-select-option v-for="item in selectList" :key="item.value" :value="item.value">{{ item.label }} </a-select-option>
         </a-select>
       </div>
       <div class="content-c">
@@ -25,8 +25,8 @@
             <img v-else src="../../../../../assets/images/company/iconS2.png" alt="" />
             <!-- <img v-else src="../../../../../assets/images/company/iconS3.png" alt="" />
             <img v-else src="../../../../../assets/images/company/iconS4.png" alt="" /> -->
-          </i> </div
-        >sssss
+          </i>
+        </div>
       </div>
     </div>
   </div>
@@ -49,13 +49,14 @@
   let sceneTitle = ref('关键场景通防综合监测');
 
   let sceneList = reactive([
-    { label: '总进风', value: 0 },
+    { label: '总阻力', value: 0 },
+    // { label: '总进风', value: 0 },
     { label: '总风量', value: 0 },
-    { label: '等级孔', value: 0 },
+    { label: '等积孔', value: 0 },
   ]);
 
   let selectVal = ref('');
-  let selectList = reactive<any[]>([]);
+  let selectList = ref<any[]>([]);
   let compositeDatas = ref<any[]>([]);
 
   //图表数据
@@ -87,10 +88,7 @@
       console.log(newS, '综合监测数据------------');
       compositeDatas.value = newS;
       if (newS.length != 0) {
-        selectList.length = 0;
-        newS.forEach((el) => {
-          selectList.push({ label: el.deviceName, value: el.deviceName });
-        });
+        selectList.value = newS.map((el: any) => ({ label: el.deviceName, value: el.deviceName }));
         if (selectVal.value) {
           let datas = newS.filter((v) => v.deviceName == selectVal.value)[0];
           echartData.jfq = datas.majorpath.drag_1;
@@ -102,7 +100,7 @@
           sceneList[1].value = datas.majorpath.m3_total;
           sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100;
         } else {
-          selectVal.value = selectList[0].value;
+          selectVal.value = selectList.value[0].value;
           console.log(selectVal.value, '0009999');
           echartData.jfq = newS[0].majorpath.drag_1;
           echartData.yfq = newS[0].majorpath.drag_2;

src/views/vent/home/clique/components/wind-road-middle.vue

@@ -0,0 +1,429 @@
+<template>
+  <div class="windRoad">
+    <div class="road-title">{{ roadTitle }}</div>
+    <div class="road-content">
+      <div class="left-jt">
+        <SvgIcon class="icon" size="24" name="jt2" />
+      </div>
+      <div class="right-jt">
+        <SvgIcon class="icon" size="24" name="jt1" />
+      </div>
+      <div class="road-card">
+        <div class="head-nav">
+          <span>{{ roadDatas.label }} : </span>
+          <span>{{ roadDatas.value }}km</span>
+        </div>
+        <div class="echart-box">
+          <div ref="road" class="road"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  // 该组件和wind-road组件基本上一摸一样，只不过该组件是适配首页中间的卡片而做的
+  import { ref, reactive, nextTick, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+
+  let props = defineProps({
+    roadData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
+
+  let roadTitle = ref('通风巷道长度统计');
+  let road = ref(); //获取Dom节点
+  let roadDatas = reactive({
+    label: '通风巷道总长度',
+    value: '',
+  });
+
+  // let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
+  let xData = ref<any[]>([]);
+  // var yData = reactive([200, 100, 200, 200, 100]);
+  // var maxData = reactive([300, 200, 300, 300, 200]);
+  let yData = ref<any[]>([]);
+  let maxData = reactive<any[]>([]);
+
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(road.value);
+      let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
+      let option = {
+        grid: {
+          top: '22%',
+          left: '2%',
+          bottom: '15%',
+          right: '2%',
+          containLabel: true,
+        },
+        xAxis: {
+          data: xData.value,
+          axisTick: {
+            show: false,
+          },
+
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(187, 187, 187,.2)',
+              type: 'dashed',
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+              fontSize: 14,
+            },
+            margin: 20, //刻度标签与轴线之间的距离。
+          },
+        },
+        yAxis: {
+          max: Math.ceil(parseInt(roadDatas.value) + 1000),
+          name: '长度(m)',
+          nameTextStyle: {
+            color: '#3df6ff',
+            fontSize: 12,
+            lineHeight: 20,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(187, 187, 187,.2)',
+              type: 'dashed',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+              fontSize: 14,
+            },
+          },
+        },
+
+        series: [
+          {
+            //三个最低下的圆片
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, 7],
+            z: 12,
+            itemStyle: {
+              opacity: 1,
+              color: function (params) {
+                console.log(params, 'index-----11111111111111111');
+                // var a = params.name.slice(0, 2);
+
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.seriesIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.seriesIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+              },
+            },
+            data: [1, 1, 1, 1, 1],
+          },
+
+          //下半截柱状图
+          {
+            name: '2020',
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            itemStyle: {
+              //lenged文本
+              opacity: 0.7,
+              color: function (params) {
+                console.log(params, 'index-----222222222222222');
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.dataIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.dataIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+                // var a = params.name.slice(0, 2);
+                // if (a === '全矿') {
+                //   return new echarts.graphic.LinearGradient(
+                //     0,
+                //     0,
+                //     0,
+                //     1,
+                //     [
+                //       {
+                //         offset: 0,
+                //         color: '#FF9A22', // 0% 处的颜色
+                //       },
+                //       {
+                //         offset: 1,
+                //         color: '#FFD56E', // 100% 处的颜色
+                //       },
+                //     ],
+                //     false
+                //   );
+                // }
+                // // else if (a === '榆家' || a == '大柳') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#00EC28', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#5DF076', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // }
+                // // else if (a === '锦界' || a == '哈拉') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#12B9DB', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#6F8EF2', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // }
+              },
+            },
+            data: yData.value,
+          },
+
+          {
+            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            stack: '广告',
+            itemStyle: {
+              color: 'transparent',
+            },
+            data: maxData,
+          },
+
+          {
+            name: '', //头部
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, -7],
+            z: 12,
+            symbolPosition: 'end',
+            itemStyle: {
+              color: '#163F7A',
+              opacity: 1,
+            },
+            data: maxData,
+          },
+
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, -7],
+            z: 12,
+            itemStyle: {
+              opacity: 1,
+              color: function (params) {
+                console.log(params, 'index-----333333333333333');
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.dataIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.dataIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+              },
+            },
+            symbolPosition: 'end',
+
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                fontSize: 12,
+                // fontWeight: 'bold',
+                color: '#fff',
+              },
+            },
+            data: yData.value,
+          },
+
+          {
+            name: '2019',
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            z: 0,
+            itemStyle: {
+              color: '#163F7A',
+              opacity: 0.7,
+            },
+
+            data: maxData,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+
+  watch(
+    () => props.roadData,
+    (newR, oldR) => {
+      if (JSON.stringify(newR) != '{}') {
+        maxData.length = 0;
+        roadDatas.value = Math.floor(newR.totallength / 1000);
+        xData.value = newR.data1;
+        yData.value = newR.data;
+        yData.value.forEach((el) => {
+          maxData.push(el + 200);
+        });
+        getOption();
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .windRoad {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .road-title {
+      position: absolute;
+      left: 50px;
+      top: 10px;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 14px;
+    }
+
+    .road-content {
+      position: relative;
+      height: 100%;
+      padding: 42px 40px 15px 40px;
+      box-sizing: border-box;
+
+      .left-jt {
+        position: absolute;
+        top: 50%;
+        left: 18px;
+        transform: translate(0, -50%);
+      }
+
+      .right-jt {
+        position: absolute;
+        top: 50%;
+        right: 18px;
+        transform: translate(0, -50%);
+      }
+
+      .road-card {
+        height: 100%;
+
+        .head-nav {
+          height: 24px;
+          line-height: 24px;
+          padding-left: 78%;
+          box-sizing: border-box;
+          // background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
+          // background-size: 100% 100%;
+
+          span {
+            font-size: 14px;
+
+            &:nth-child(1) {
+              color: #fff;
+            }
+
+            &:nth-child(2) {
+              color: #3df6ff;
+            }
+          }
+        }
+
+        .echart-box {
+          height: calc(100% - 24px);
+
+          .road {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -26,9 +26,10 @@
           <!-- <div class="area-card2">
             
           </div> -->
-          <!-- 文件共享中心 -->
+          <!-- 通风巷道长度统计，原文件共享中心 -->
           <div class="area-card3">
-            <fileShare :shareData="shareData" />
+            <windRoad :roadData="roadData" />
+            <!-- <fileShare :shareData="shareData" /> -->
           </div>
         </div>
         <div class="right-area">
@@ -36,9 +37,10 @@
           <div class="area-card">
             <sceneKey :compositeData="compositeData" />
           </div>
-          <!-- 通风巷道长度统计 -->
+          <!-- 原通风巷道长度统计（wind-road.vue） -->
           <div class="area-card1">
-            <windRoad :roadData="roadData" />
+            <BillboardEntry />
+            <!-- <windRoad :roadData="roadData" /> -->
           </div>
         </div>
       </div>
@@ -52,14 +54,16 @@
   import { ref, reactive, nextTick, onMounted, onUnmounted } from 'vue';
   import mineWind from './components/mine-wind.vue';
   import riskWarn from './components/risk-warn.vue';
-  import fileShare from './components/file-share.vue';
-  import windRoad from './components/wind-road.vue';
+  // import fileShare from './components/file-share.vue';
+  import BillboardEntry from './components/billboard-entry.vue';
+  import windRoad from './components/wind-road-middle.vue';
   import sceneKey from './components/scene-key.vue';
   import iconLight from './components/icon-light.vue';
   import dialogModal from './components/dialog-modal.vue';
   import { getHomeData, getList } from './clique.api';
   const dialogModalRef = ref();
-  let mainTitle = ref('国家能源神东煤炭集团');
+  let mainTitle = ref('国能神东一通三防管控平台');
+  // let mainTitle = ref('国家能源神东煤炭集团');
   // let mainTitle = ref('XXXX集团');
   const isShowDialog = ref(false);
   const dialogTitle = ref('');
@@ -107,7 +111,9 @@
     console.log(res, '公司端首页数据----------');
     if (res && res.length > 0) {
       earlyWarn.value = res;
-      roadData.totallength = res[0] && res[0].sys_data ? res[0].sys_data.totallength : 0;
+      roadData.totallength = res.reduce((len, r) => {
+        return r.sys_data ? len + r.sys_data.totallength : len;
+      }, 0);
       roadData.data.length = 0;
       roadData.data1.length = 0;
       airKjStatus.length = 0;

src/views/vent/home/colliery/components/fan-monitor.vue

@@ -70,7 +70,12 @@
           ? '主机'
           : selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1'
           ? '备机'
-          ? selectData.readData.Fan1StartStatus && selectData.readData.Fan1StartStatus == '0' &&  selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '0' ? '断开' : '-';
+          : selectData.readData.Fan1StartStatus &&
+            selectData.readData.Fan1StartStatus == '0' &&
+            selectData.readData.Fan2StartStatus &&
+            selectData.readData.Fan2StartStatus == '0'
+          ? '断开'
+          : '-';
       echartData.xdata = selectData.readData.windQuantity1 || selectData.readData.windQuantity1_merge;
       echartData.ydata = selectData.readData.windQuantity2 || selectData.readData.windQuantity2_merge;
       if (echartData.xdata && echartData.ydata) {

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -653,7 +653,7 @@ async function getDataSource() {
                 tableData.push(el);
               }
             })
-            dataSource.value = tableData
+            dataSource.value = tableData.reverse()
           }
         } else {
           dataSource.value = []