[Feat 0000] 公司端首页修改

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

@@ -0,0 +1,126 @@
+<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;
+    }[]
+  >([
+    {
+      id: '/for-test',
+      text: '/for-test',
+      path: '/for-test',
+    },
+    {
+      id: '/for-test',
+      text: '/for-test',
+      path: '/for-test',
+    },
+    {
+      id: '/for-test',
+      text: '/for-test',
+      path: '/for-test',
+    },
+    {
+      id: '/for-test',
+      text: '/for-test',
+      path: '/for-test',
+    },
+    {
+      id: '/for-test',
+      text: '/for-test',
+      path: '/for-test',
+    },
+  ]);
+
+  // 寻找具有指定关键词的菜单，调用前请清空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/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">
@@ -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 },
   ]);
 
   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,430 @@
+<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 }}</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(roadDatas.value + 1000),
+          name: '长度(km)',
+          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 = newR.totallength;
+        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('');