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

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

@@ -8,250 +8,268 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
-  import * as echarts from 'echarts';
-  const emit = defineEmits(['goDetail'])
+import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+import * as echarts from 'echarts';
+const emit = defineEmits(['goDetail'])
 
-  let props = defineProps({
-    flList: Array,
-  });
+let props = defineProps({
+  flList: Array,
+});
 
-  //获取dom节点
-  let windBar = ref<any>();
-  //echart数据
-  let echartData = reactive<any>({ ydata: [], xdata: [] });
-  //跳转详情
-  function getDetail() {
-    emit('goDetail', 'windrect')
-  }
-  function getOption() {
-    nextTick(() => {
-      const color = '#66ffff';
-      let barWidth = echartData.ydata.length>0 && echartData.ydata.length<=1 ? 0.03 : 0.1; // 柱条占比
-      function renderItem(params, api) {
-        const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
-        const width = api.size([0, 1])[0] * barWidth; // 宽度
-        const ballRadius = width * 0.6;
-        return {
-          type: 'group',
-          children: [
-            {
-              // 圆形装饰
-              type: 'circle',
-              shape: {
-                cx: topCenter[0],
-                cy: topCenter[1],
-                r: ballRadius,
-              },
-              style: api.style({
-                fill: '#66ffff',
-                stroke: color,
-                lineWidth: 2,
-              }),
+//获取dom节点
+let windBar = ref<any>();
+//坐标轴最大值
+let maxY = ref(0)
+//echart数据
+let echartData = reactive<any>({ ydata: [], xdata: [] });
+//跳转详情
+function getDetail() {
+  emit('goDetail', 'windrect')
+}
+function getOption() {
+  nextTick(() => {
+    const color = '#66ffff';
+    let barWidth = echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? 0.03 : 0.1; // 柱条占比
+    function renderItem(params, api) {
+      const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
+      const width = api.size([0, 1])[0] * barWidth; // 宽度
+      const ballRadius = width * 0.6;
+      return {
+        type: 'group',
+        children: [
+          {
+            // 圆形装饰
+            type: 'circle',
+            shape: {
+              cx: topCenter[0],
+              cy: topCenter[1],
+              r: ballRadius,
             },
-          ],
-        };
-      }
-
-      const myChart = echarts.init(windBar.value);
-      let option = {
-        color: [color],
-        tooltip: {
-          trigger: 'item',
-          show: true,
-          formatter: function (p) {
-            // console.info(p);
-            return p.marker + p.name + ' : ' + p.value;
+            style: api.style({
+              fill: '#66ffff',
+              stroke: color,
+              lineWidth: 2,
+            }),
           },
-        },
+        ],
+      };
+    }
 
-        grid: {
-          left: '8%',
-          top: '15%',
-          bottom: '32%',
-          right: '8%',
-          // containLabel: true
+    const myChart = echarts.init(windBar.value);
+    let option = {
+      color: [color],
+      tooltip: {
+        trigger: 'item',
+        show: true,
+        formatter: function (p) {
+          // console.info(p);
+          return p.marker + p.name + ' : ' + p.value;
         },
-        xAxis: {
-          type: 'category',
-          data: echartData.xdata,
-          axisLabel: {
-            formatter: function (params) {
-              var newParamsName = ''; // 最终拼接成的字符串
-              var paramsNameNumber = params.length; // 实际标签的个数
-              var provideNumber = 6; // 每行能显示的字的个数
-              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
-              /**
-               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-               */
-              // 条件等同于rowNumber>1
-              if (paramsNameNumber > provideNumber) {
-                /** 循环每一行,p表示行 */
-                for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = ''; // 表示每一次截取的字符串
-                  var start = p * provideNumber; // 开始截取的位置
-                  var end = start + provideNumber; // 结束截取的位置
-                  // 此处特殊处理最后一行的索引值
-                  if (p == rowNumber - 1) {
-                    // 最后一次不换行
-                    tempStr = params.substring(start, paramsNameNumber);
-                  } else {
-                    // 每一次拼接字符串并换行
-                    tempStr = params.substring(start, end) + '\n';
-                  }
-                  newParamsName += tempStr; // 最终拼成的字符串
+      },
+
+      grid: {
+        left: '8%',
+        top: '15%',
+        bottom: '32%',
+        right: '8%',
+        // containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: echartData.xdata,
+        axisLabel: {
+          formatter: function (params) {
+            var newParamsName = ''; // 最终拼接成的字符串
+            var paramsNameNumber = params.length; // 实际标签的个数
+            var provideNumber = 6; // 每行能显示的字的个数
+            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+            /**
+             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+             */
+            // 条件等同于rowNumber>1
+            if (paramsNameNumber > provideNumber) {
+              /** 循环每一行,p表示行 */
+              for (var p = 0; p < rowNumber; p++) {
+                var tempStr = ''; // 表示每一次截取的字符串
+                var start = p * provideNumber; // 开始截取的位置
+                var end = start + provideNumber; // 结束截取的位置
+                // 此处特殊处理最后一行的索引值
+                if (p == rowNumber - 1) {
+                  // 最后一次不换行
+                  tempStr = params.substring(start, paramsNameNumber);
+                } else {
+                  // 每一次拼接字符串并换行
+                  tempStr = params.substring(start, end) + '\n';
                 }
-              } else {
-                // 将旧标签的值赋给新标签
-                newParamsName = params;
+                newParamsName += tempStr; // 最终拼成的字符串
               }
-              //将最终的字符串返回
-              return newParamsName;
-            },
-            fontSize: 14,
-            margin: 10,
-            interval: 0,
-            textStyle: {
-              color: '#b3b8cc',
-            },
+            } else {
+              // 将旧标签的值赋给新标签
+              newParamsName = params;
+            }
+            //将最终的字符串返回
+            return newParamsName;
           },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(62, 103, 164)',
-            },
-          },
-          splitLine: {
-            show: false,
-          },
-          axisTick: {
-            show: false,
+          fontSize: 14,
+          margin: 10,
+          interval: 0,
+          textStyle: {
+            color: '#b3b8cc',
           },
         },
-        yAxis: {
-          type: 'value',
-          name: '(m³/min)',
-          max: 10000,
-          axisLabel: {
-            textStyle: {
-              fontSize: 14,
-              color: '#b3b8cc',
-            },
-          },
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: 12,
-            lineHeight: 10,
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(62, 103, 164)',
           },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(62, 103, 164,.4)',
-            },
-          },
-          axisLine: {
-            show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        name: '(m³/min)',
+        max: maxY.value,
+        axisLabel: {
+          textStyle: {
+            fontSize: 14,
+            color: '#b3b8cc',
           },
-          axisTick: {
-            show: false,
+        },
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 12,
+          lineHeight: 10,
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(62, 103, 164,.4)',
           },
         },
-        series: [
-          {
-            data: echartData.ydata,
-            type: 'bar',
-            barWidth: barWidth * 100 + '%',
-            itemStyle: {
-              color: {
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
-                  },
-                ],
-              },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          data: echartData.ydata,
+          type: 'bar',
+          barWidth: barWidth * 100 + '%',
+          itemStyle: {
+            color: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
+                },
+              ],
             },
-            label: {
-              normal: {
-                show: true,
-                position: echartData.ydata.length>0 && echartData.ydata.length<=1 ?  ['-17', '-30'] :  ['-20', '-25'],
-                formatter: [' {a|{c}}'].join(','),
-                rich: {
-                  a: {
-                    color: '#fff',
-                    align: 'center',
-                  },
+          },
+          label: {
+            normal: {
+              show: true,
+              position: echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? ['-17', '-30'] : ['-16', '-30'],
+              formatter: [' {a|{c}}'].join(','),
+              rich: {
+                a: {
+                  color: '#fff',
+                  align: 'center',
                 },
               },
             },
           },
-          {
-            data: echartData.ydata,
-            type: 'custom',
-            renderItem: renderItem,
-            zlevel: 2,
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+        },
+        {
+          data: echartData.ydata,
+          type: 'custom',
+          renderItem: renderItem,
+          zlevel: 2,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  watch(
-    () => props.flList,
-    (val) => {
-      echartData.xdata.length = 0;
-      echartData.ydata.length = 0;
-      val.forEach((el) => {
+function formatRoundNum(num) {
+  let interger = Math.ceil(num)
+  let leng = String(interger).length
+  return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
+}
+
+watch(
+  () => props.flList,
+  (val) => {
+    echartData.xdata.length = 0;
+    echartData.ydata.length = 0;
+    val.forEach((el: any) => {
+      if (el.readData.m3) {
         echartData.xdata.push(el.strinstallpos);
         echartData.ydata.push(el.readData.m3);
-      });
-      getOption();
-    },
-    {
-      deep: true,
-    }
-  );
+      }
+    });
+    let max = echartData.ydata.reduce((acr, cur) => {
+      return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur)
+    })
+    maxY.value = formatRoundNum(max * 1.5)
+    getOption();
+  },
+  {
+    deep: true,
+  }
+);
 
-  onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  .windMonitor {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    .title-top {
-      position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-      &:hover {
-        color: #66ffff;
-      }
+.windMonitor {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
+    font-family: 'douyuFont';
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
     }
-    .wind-contents {
-      position: absolute;
-      left: 0;
-      top: 36px;
+  }
+
+  .wind-contents {
+    position: absolute;
+    left: 0;
+    top: 36px;
+    width: 100%;
+    height: calc(100% - 36px);
+
+    .wind-bar {
       width: 100%;
-      height: calc(100% - 36px);
-      .wind-bar {
-        width: 100%;
-        height: 100%;
-      }
+      height: 100%;
     }
   }
+}
 </style>

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

@@ -7,7 +7,7 @@
           <span>{{ nowTimeWeek }}</span>
           <span>{{ nowTime }}</span>
         </div>
-        <div class="main-title">通防智能管控系统</div>
+        <div class="main-title">{{ title }}</div>
       </div>
       <div class="home-contents">
         <div class="left-content">
@@ -93,6 +93,7 @@ import { resetMicroContentWH } from '/@/utils/domUtils'
 import { getDate } from './clique.data'
 
 const { currentRoute } = useRouter();
+const { title, logoUrl } = useGlobSetting();
 const actions = getActions();
 let timer: NodeJS.Timeout | null = null;
 let fanLocalList = reactive<any[]>([]); //局部风机数据