src/views/vent/monitorManager/deviceMonitor/components/device/modal/mainPath.vue

@@ -36,7 +36,6 @@
         </div>
       </div>
     </div>
-
     <div class="status-card-box">
       <div class="status-card">
         <div class="left-content">
@@ -45,11 +44,13 @@
         <div class="right-content">
           <div class="fengya">
             <div class="title">矿井自然风压</div>
-            <div class="value">3210 Pa</div>
+            <div class="value">{{ zrfyValue.zrfyVal }} Pa</div>
           </div>
           <div class="status">
             <div class="title">当前状态</div>
-            <div class="value">帮助通风</div>
+            <div class="value">
+              {{ zrfyValue.zrfyStatus ? '阻碍通风' : '帮助通风' }}
+            </div>
           </div>
         </div>
       </div>
@@ -58,238 +59,274 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
-  import * as echarts from 'echarts';
-  import { formatNum } from '/@/utils/ventutil';
-  const emit = defineEmits(['goDetail']);
-
-  let props = defineProps({
-    dataSource: Object,
-  });
-
-  //获取dom节点
-  let majorpath = ref<any>();
-  let lineData = reactive<any[]>([]);
-  let searchValue = ref('');
-  const lineTypeList = reactive<any[]>([]);
-
-  let echartData = reactive<any[]>([
-    { name: '进风区', value: 0 },
-    { name: '用风区', value: 0 },
-    { name: '回风区', value: 0 },
-  ]);
-  let xData = reactive<any[]>([]);
-  let yData = reactive<any[]>([]);
-  let percentE = ref<any>(0);
-  let percentF = ref<any>(0);
-  let percentT = ref<any>(0);
-
-  let tabList = reactive<any[]>([
-    { name: '总风量(m³/min)', val: 0 },
-    { name: '总阻力(Pa)', val: 0 },
-    { name: '等积孔(m²)', val: 0 },
-  ]);
-  //跳转详情
-  function getDetail() {
-    console.log('跳转详情');
-    emit('goDetail', 'line');
-  }
-  //选项切换
-  function changeSelect(val) {
-    echartData[0].value = (val['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
-    echartData[1].value = (val['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
-    echartData[2].value = (val['drag_3'] || Math.floor(Math.random() * (855 - 850 + 1)) + 850).toFixed(2);
-    tabList[0].val = (val['m3_total'] || Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600).toFixed(2);
-    tabList[1].val = (val['drag_total'] || Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423).toFixed(2);
-    tabList[2].val = formatNum((1.19 * Number(tabList[0].val)) / 60 / Math.sqrt(Number(tabList[1].val)));
-    percentF.value = formatNum(
-      (Number(echartData[0].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
-    );
-    percentT.value = formatNum(
-      (Number(echartData[1].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
-    );
-    percentE.value = formatNum(
-      (echartData[2].value / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
-    );
-    getOption();
-  }
-
-  function getOption() {
-    nextTick(() => {
-      function deepCopy(obj) {
-        if (typeof obj !== 'object') {
-          return obj;
-        }
-        var newobj = {};
-        for (var attr in obj) {
-          newobj[attr] = obj[attr];
-        }
-        return newobj;
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+import * as echarts from 'echarts';
+import { formatNum } from '/@/utils/ventutil';
+const emit = defineEmits(['goDetail']);
+
+let props = defineProps({
+  dataSource: Object,
+});
+
+//获取dom节点
+let majorpath = ref<any>();
+let lineData = reactive<any[]>([]);
+let searchValue = ref('');
+const lineTypeList = reactive<any[]>([]);
+
+let echartData = reactive<any[]>([
+  { name: '进风区', value: 0 },
+  { name: '用风区', value: 0 },
+  { name: '回风区', value: 0 },
+]);
+let xData = reactive<any[]>([]);
+let yData = reactive<any[]>([]);
+let percentE = ref<any>(0);
+let percentF = ref<any>(0);
+let percentT = ref<any>(0);
+let zrfyValue = ref<any>([]);
+let tabList = reactive<any[]>([
+  { name: '总风量(m³/min)', val: 0 },
+  { name: '总阻力(Pa)', val: 0 },
+  { name: '等积孔(m²)', val: 0 },
+]);
+//跳转详情
+function getDetail() {
+  console.log('跳转详情');
+  emit('goDetail', 'line');
+}
+//选项切换
+function changeSelect(val) {
+  zrfyValue.value = val['zrfyInfo'];
+  echartData[0].value = (val['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
+  echartData[1].value = (val['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
+  echartData[2].value = (val['drag_3'] || Math.floor(Math.random() * (855 - 850 + 1)) + 850).toFixed(2);
+  tabList[0].val = (val['m3_total'] || Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600).toFixed(2);
+  tabList[1].val = (val['drag_total'] || Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423).toFixed(2);
+  tabList[2].val = formatNum((1.19 * Number(tabList[0].val)) / 60 / Math.sqrt(Number(tabList[1].val)));
+  percentF.value = formatNum(
+    (Number(echartData[0].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
+  );
+  percentT.value = formatNum(
+    (Number(echartData[1].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
+  );
+  percentE.value = formatNum((echartData[2].value / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100);
+  getOption();
+}
+
+function getOption() {
+  nextTick(() => {
+    function deepCopy(obj) {
+      if (typeof obj !== 'object') {
+        return obj;
+      }
+      var newobj = {};
+      for (var attr in obj) {
+        newobj[attr] = obj[attr];
       }
-      echartData.map((a, b) => {
-        xData.push(a.name);
-        yData.push(a.value);
-      });
-
-      var startColor = ['rgba(154, 255, 168,.6)', 'rgba(255, 224, 28,.6)', 'rgba(255, 54, 93, .6)'];
-      var borderStartColor = ['#9affa8', '#ffe01c', '#FF365D'];
-      // var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
-      // var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
-      var RealData = [];
-      var borderData = [];
-      echartData.map((item, index) => {
-        var newobj = deepCopy(item);
-        var newobj1 = deepCopy(item);
-        RealData.push(newobj);
-        borderData.push(newobj1);
-      });
-      RealData.map((item, index) => {
-        item.itemStyle = {
-          normal: {
-            color: startColor[index],
+      return newobj;
+    }
+    echartData.map((a, b) => {
+      xData.push(a.name);
+      yData.push(a.value);
+    });
+
+    var startColor = ['rgba(154, 255, 168,.6)', 'rgba(255, 224, 28,.6)', 'rgba(255, 54, 93, .6)'];
+    var borderStartColor = ['#9affa8', '#ffe01c', '#FF365D'];
+    // var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
+    // var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
+    var RealData = [];
+    var borderData = [];
+    echartData.map((item, index) => {
+      var newobj = deepCopy(item);
+      var newobj1 = deepCopy(item);
+      RealData.push(newobj);
+      borderData.push(newobj1);
+    });
+    RealData.map((item, index) => {
+      item.itemStyle = {
+        normal: {
+          color: startColor[index],
+        },
+      };
+    });
+    borderData.map((item, index) => {
+      item.itemStyle = {
+        normal: {
+          color: borderStartColor[index],
+        },
+      };
+    });
+    const myChart = echarts.init(majorpath.value);
+
+    let option = {
+      legend: [
+        {
+          // orient: 'vertical',
+          x: '50%',
+          y: '12%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#9affa8',
+          },
+          data: ['进风区'],
+        },
+        {
+          // orient: 'vertical',
+          x: '50%',
+          y: '42%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#ffe01c',
           },
-        };
-      });
-      borderData.map((item, index) => {
-        item.itemStyle = {
-          normal: {
-            color: borderStartColor[index],
+          data: ['用风区'],
+        },
+        {
+          // orient: 'vertical',
+          x: '50%',
+          y: '70%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#FF365D',
           },
-        };
-      });
-      const myChart = echarts.init(majorpath.value);
-
-      let option = {
-        legend: [
-          {
-            // orient: 'vertical',
-            x: '50%',
-            y: '12%',
-            itemWidth: 10,
-            itemHeight: 10,
-            align: 'left',
-            textStyle: {
-              fontSize: 14,
-              color: '#9affa8',
+          data: ['回风区'],
+        },
+      ],
+      tooltip: {
+        formatter: '{b}:{c}',
+      },
+      series: [
+        // 主要展示层的
+        {
+          radius: ['40%', '80%'],
+          center: ['25%', '50%'],
+          type: 'pie',
+          z: 10,
+          label: {
+            normal: {
+              show: false,
+            },
+            emphasis: {
+              show: false,
             },
-            data: ['进风区'],
           },
-          {
-            // orient: 'vertical',
-            x: '50%',
-            y: '42%',
-            itemWidth: 10,
-            itemHeight: 10,
-            align: 'left',
-            textStyle: {
-              fontSize: 14,
-              color: '#ffe01c',
+          labelLine: {
+            normal: {
+              show: false,
+            },
+            emphasis: {
+              show: false,
             },
-            data: ['用风区'],
           },
-          {
-            // orient: 'vertical',
-            x: '50%',
-            y: '70%',
-            itemWidth: 10,
-            itemHeight: 10,
-            align: 'left',
-            textStyle: {
-              fontSize: 14,
-              color: '#FF365D',
+          itemStyle: {
+            normal: {
+              borderWidth: 5,
+              borderColor: 'rgba(2, 39, 115)',
             },
-            data: ['回风区'],
           },
-        ],
-        tooltip: {
-          formatter: '{b}:{c}',
+          data: RealData,
         },
-        series: [
-          // 主要展示层的
-          {
-            radius: ['40%', '80%'],
-            center: ['25%', '50%'],
-            type: 'pie',
-            z: 10,
-            label: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
+        // 边框的设置
+        {
+          radius: ['45%', '52%'],
+          center: ['25%', '50%'],
+          type: 'pie',
+          z: 5,
+          label: {
+            normal: {
+              show: false,
             },
-            itemStyle: {
-              normal: {
-                borderWidth: 5,
-                borderColor: 'rgba(2, 39, 115)',
-              },
+            emphasis: {
+              show: false,
             },
-            data: RealData,
           },
-          // 边框的设置
-          {
-            radius: ['45%', '52%'],
-            center: ['25%', '50%'],
-            type: 'pie',
-            z: 5,
-            label: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
+          labelLine: {
+            normal: {
+              show: false,
             },
-
-            animation: false,
-            tooltip: {
+            emphasis: {
               show: false,
             },
-            data: borderData,
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
 
-  watch(
-    () => props.dataSource,
-    (val) => {
-      changeSelect(val);
-    },
-    {
-      deep: true,
-    }
-  );
+          animation: false,
+          tooltip: {
+            show: false,
+          },
+          data: borderData,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+watch(
+  () => props.dataSource,
+  (val) => {
+    changeSelect(val);
+  },
+  {
+    deep: true,
+  }
+);
 
-  onMounted(() => {});
+onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/vent/color.less';
-  .windLine {
+@import '/@/design/theme.less';
+@import '/@/design/vent/color.less';
+.windLine {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #47474722;
+  backdrop-filter: blur(2px);
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
+    font-family: 'douyuFont';
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
+    }
+  }
+
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
+
+    .icon-search {
+      position: absolute;
+      top: 50%;
+      left: 5px;
+      transform: translate(0%, -50%);
+    }
+  }
+
+  .line-echart {
+    position: absolute;
+    top: 66px;
+    left: 0;
     width: 100%;
     height: 100%;
     position: relative;
@@ -521,21 +558,22 @@
       }
     }
   }
-
-  :deep .zxm-select-selector {
-    width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
-
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
-
-  :deep .zxm-select-arrow {
-    color: #fff !important;
-  }
+}
+
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
+
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
+
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}
 </style>