[Feat 0000]自然风压在线监测功能

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

@@ -36,401 +36,495 @@
         </div>
       </div>
     </div>
+    <div class="status-card">
+      <div class="left-content">
+        <div class="left1"></div>
+      </div>
+      <div class="right-content">
+        <div class="fengya">
+          <div class="title" style="color: #fff">矿井自然风压</div>
+          <div class="value" style="color: #19a8b3">3210 Pa</div>
+        </div>
+        <div class="status">
+          <div class="title" style="color: #fff">当前状态</div>
+          <div class="value" style="color: #19a8b3">帮助通风</div>
+        </div>
+      </div>
+    </div>
   </div>
 </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 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;
       }
-      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],
+      var newobj = {};
+      for (var attr in obj) {
+        newobj[attr] = obj[attr];
+      }
+      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',
           },
-        };
-      });
-      borderData.map((item, index) => {
-        item.itemStyle = {
-          normal: {
-            color: borderStartColor[index],
+          data: ['进风区'],
+        },
+        {
+          // orient: 'vertical',
+          x: '50%',
+          y: '42%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#ffe01c',
           },
-        };
-      });
-      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: '70%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#FF365D',
+          },
+          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>
-  .windLine {
-    width: 100%;
-    height: 100%;
-    position: relative;
+.windLine {
+  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;
+    }
+  }
+
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
 
-    .title-top {
+    .icon-search {
       position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-
-      &:hover {
-        color: #66ffff;
-      }
+      top: 50%;
+      left: 5px;
+      transform: translate(0%, -50%);
+    }
+  }
+
+  .line-echart {
+    position: absolute;
+    top: 66px;
+    left: 0;
+    width: 100%;
+    height: 120px;
+
+    .line {
+      width: 100%;
+      height: 100%;
     }
 
-    .toggle-search {
+    .pic {
+      height: 100%;
       position: absolute;
-      left: 9px;
-      top: 37px;
+      left: 45%;
+      top: 0;
       display: flex;
+      align-items: center;
 
-      .icon-search {
-        position: absolute;
-        top: 50%;
-        left: 5px;
-        transform: translate(0%, -50%);
+      img {
+        height: 60%;
       }
     }
 
-    .line-echart {
+    .percent {
       position: absolute;
-      top: 66px;
-      left: 0;
-      width: 100%;
-      height: 120px;
-
-      .line {
-        width: 100%;
-        height: 100%;
-      }
+      left: 75%;
+      top: 0;
+      width: 45px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-between;
+      align-items: center;
 
-      .pic {
-        height: 100%;
-        position: absolute;
-        left: 45%;
-        top: 0;
-        display: flex;
-        align-items: center;
+      .percent-box {
+        font-size: 14px;
 
-        img {
-          height: 60%;
+        // color: #b3b8cc;
+        &:nth-child(1) {
+          position: absolute;
+          top: 12%;
+          color: #9affa8;
         }
-      }
 
-      .percent {
-        position: absolute;
-        left: 75%;
-        top: 0;
-        width: 45px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        // justify-content: space-between;
-        align-items: center;
+        &:nth-child(2) {
+          position: absolute;
+          top: 42%;
+          color: #ffe01c;
+        }
 
-        .percent-box {
-          font-size: 14px;
+        &:nth-child(3) {
+          position: absolute;
+          top: 70%;
+          color: #ff365d;
+        }
 
-          // color: #b3b8cc;
-          &:nth-child(1) {
-            position: absolute;
-            top: 12%;
-            color: #9affa8;
-          }
-
-          &:nth-child(2) {
-            position: absolute;
-            top: 42%;
-            color: #ffe01c;
-          }
-
-          &:nth-child(3) {
-            position: absolute;
-            top: 70%;
-            color: #ff365d;
-          }
-
-          .dw {
-            color: #b3b8cc;
-            margin-left: 5px;
-          }
+        .dw {
+          color: #b3b8cc;
+          margin-left: 5px;
         }
       }
     }
+  }
 
-    .line-card {
-      position: absolute;
-      top: 186px;
-      left: 0;
-      width: 100%;
-      height: calc(100% - 186px);
-      padding: 0px 15px 15px 15px;
-      box-sizing: border-box;
+  .line-card {
+    position: absolute;
+    top: 186px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 186px);
+    padding: 0px 15px 15px 15px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .card-item {
       display: flex;
-      justify-content: space-around;
+      flex: 1;
+      justify-content: center;
       align-items: center;
+      height: 100%;
+
+      .item-s {
+        position: relative;
+        width: 105px;
+        height: 58px;
+        margin: 0 1px;
+        margin-top: 20px;
+        background: url('/@/assets/images/home-container/line-val.png') no-repeat;
+        background-size: 100% 90%;
+
+        .item-label {
+          width: 100%;
+          text-align: center;
+          color: #b3b8cc;
+          font-size: 12px;
+        }
 
-      .card-item {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-
-        .item-s {
-          position: relative;
-          width: 105px;
-          height: 58px;
-          margin: 0 1px;
-          margin-top: 20px;
-          background: url('/@/assets/images/home-container/line-val.png') no-repeat;
-          background-size: 100% 90%;
-
-          .item-label {
-            width: 100%;
-            text-align: center;
-            color: #b3b8cc;
-            font-size: 12px;
-          }
-
-          .item-val {
-            position: absolute;
-            left: 50%;
-            top: 26px;
-            font-size: 14px;
-            font-family: 'douyuFont';
-            color: #fff;
-            transform: translate(-50%, 0);
-          }
+        .item-val {
+          position: absolute;
+          left: 50%;
+          top: 26px;
+          font-size: 14px;
+          font-family: 'douyuFont';
+          color: #fff;
+          transform: translate(-50%, 0);
         }
       }
     }
   }
-
-  :deep .zxm-select-selector {
+  .status-card {
+    position: absolute;
+    top: 300px;
+    left: 0;
     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;
-  }
+    height: calc(100% - 210px);
+    box-sizing: border-box;
+    margin-left: 30px;
+    display: flex;
+    align-items: center;
+    background: url('/@/assets/images/home-container/bj.png') no-repeat;
+    background-size: 100% 100%;
+    .left-content {
+      width: 30%;
+      height: 100%;
+      background: url('/@/assets/images/home-container/leftBJ1.png') no-repeat;
+      background-size: 100% 100%;
+      .left1 {
+        width: 100%;
+        height: 100%;
+        margin: 30px;
+        background: url('/@/assets/images/home-container/leftBJ2.png') no-repeat;
+        background-size: 30% 30%;
+      }
+    }
+    .right-content {
+      display: flex;
+      flex-direction: column;
+      width: 70%;
+      height: 100%;
+      .fengya {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px;
+        margin-top: 8px;
 
-  :deep .zxm-select-arrow {
-    color: #fff !important;
+        .title {
+          margin-left: 8px;
+        }
+        .value {
+          margin-right: 8px;
+        }
+      }
+      .fengya::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 10px;
+        background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+        background-size: 100% 100%;
+      }
+      .status {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 8px;
+        padding: 5px;
+        .title {
+          margin-left: 8px;
+        }
+        .value {
+          margin-right: 8px;
+        }
+      }
+      .status::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 10px;
+        background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+        background-size: 100% 100%;
+      }
+    }
   }
+}
+
+: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>