[Fix 0000] 关键阻力路线通风状态判断条件修改

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

@@ -49,7 +49,7 @@
           <div class="status">
             <div class="title">当前状态</div>
             <div class="value">
-              {{ zrfyValue.zrfyStatus === 1 ? '阻碍通风' : '帮助通风' }}
+              {{ zrfyValue.zrfyStatus == '1' ? '阻碍通风' : '帮助通风' }}
             </div>
           </div>
         </div>
@@ -59,483 +59,485 @@
 </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 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];
-      }
-      return newobj;
-    }
-    echartData.map((a, b) => {
-      xData.push(a.name);
-      yData.push(a.value);
-    });
+  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import * as echarts from 'echarts';
+  import { formatNum } from '/@/utils/ventutil';
+  const emit = defineEmits(['goDetail']);
 
-    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',
+  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];
+        }
+        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],
           },
-          data: ['用风区'],
-        },
-        {
-          // orient: 'vertical',
-          x: '50%',
-          y: '70%',
-          itemWidth: 10,
-          itemHeight: 10,
-          align: 'left',
-          textStyle: {
-            fontSize: 14,
-            color: '#FF365D',
+        };
+      });
+      borderData.map((item, index) => {
+        item.itemStyle = {
+          normal: {
+            color: borderStartColor[index],
           },
-          data: ['回风区'],
-        },
-      ],
-      tooltip: {
-        formatter: '{b}:{c}',
-      },
-      series: [
-        // 主要展示层的
-        {
-          radius: ['40%', '80%'],
-          center: ['25%', '50%'],
-          type: 'pie',
-          z: 10,
-          label: {
-            normal: {
-              show: false,
-            },
-            emphasis: {
-              show: false,
+        };
+      });
+      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: ['进风区'],
           },
-          labelLine: {
-            normal: {
-              show: false,
-            },
-            emphasis: {
-              show: false,
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '42%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#ffe01c',
             },
+            data: ['用风区'],
           },
-          itemStyle: {
-            normal: {
-              borderWidth: 5,
-              borderColor: 'rgba(2, 39, 115)',
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '70%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#FF365D',
             },
+            data: ['回风区'],
           },
-          data: RealData,
+        ],
+        tooltip: {
+          formatter: '{b}:{c}',
         },
-        // 边框的设置
-        {
-          radius: ['45%', '52%'],
-          center: ['25%', '50%'],
-          type: 'pie',
-          z: 5,
-          label: {
-            normal: {
-              show: false,
+        series: [
+          // 主要展示层的
+          {
+            radius: ['40%', '80%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 10,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
-              show: false,
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                borderColor: 'rgba(2, 39, 115)',
+              },
             },
+            data: RealData,
           },
-          labelLine: {
-            normal: {
-              show: false,
+          // 边框的设置
+          {
+            radius: ['45%', '52%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 5,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
-              show: false,
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-          },
 
-          animation: false,
-          tooltip: {
-            show: false,
+            animation: false,
+            tooltip: {
+              show: false,
+            },
+            data: borderData,
           },
-          data: borderData,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-
-watch(
-  () => props.dataSource,
-  (val) => {
-    changeSelect(val);
-  },
-  {
-    deep: true,
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
   }
-);
-
-onMounted(() => {});
-</script>
 
-<style lang="less" scoped>
-@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;
+  watch(
+    () => props.dataSource,
+    (val) => {
+      changeSelect(val);
+    },
+    {
+      deep: true,
     }
-  }
-
-  .toggle-search {
-    position: absolute;
-    left: 9px;
-    top: 37px;
-    display: flex;
+  );
 
-    .icon-search {
-      position: absolute;
-      top: 50%;
-      left: 5px;
-      transform: translate(0%, -50%);
-    }
-  }
+  onMounted(() => {});
+</script>
 
-  .line-echart {
-    position: absolute;
-    top: 66px;
-    left: 0;
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/color.less';
+  .windLine {
     width: 100%;
-    height: 120px;
-
-    .line {
-      width: 100%;
-      height: 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;
+      }
     }
 
-    .pic {
-      height: 100%;
+    .toggle-search {
       position: absolute;
-      left: 45%;
-      top: 0;
+      left: 9px;
+      top: 37px;
       display: flex;
-      align-items: center;
 
-      img {
-        height: 60%;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
       }
     }
 
-    .percent {
+    .line-echart {
       position: absolute;
-      left: 75%;
-      top: 0;
-      width: 45px;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      // justify-content: space-between;
-      align-items: center;
-
-      .percent-box {
-        font-size: 14px;
-
-        // color: #b3b8cc;
-        &:nth-child(1) {
-          position: absolute;
-          top: 12%;
-          color: #9affa8;
-        }
+      top: 66px;
+      left: 0;
+      width: 100%;
+      height: 120px;
 
-        &:nth-child(2) {
-          position: absolute;
-          top: 42%;
-          color: #ffe01c;
-        }
+      .line {
+        width: 100%;
+        height: 100%;
+      }
 
-        &:nth-child(3) {
-          position: absolute;
-          top: 70%;
-          color: #ff365d;
-        }
+      .pic {
+        height: 100%;
+        position: absolute;
+        left: 45%;
+        top: 0;
+        display: flex;
+        align-items: center;
 
-        .dw {
-          color: #f2f4f8;
-          margin-left: 5px;
+        img {
+          height: 60%;
         }
       }
-    }
-  }
 
-  .line-card {
-    position: absolute;
-    top: 166px;
-    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;
-      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: #e4e6ee;
-          font-size: 12px;
-        }
+      .percent {
+        position: absolute;
+        left: 75%;
+        top: 0;
+        width: 45px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+        align-items: center;
 
-        .item-val {
-          position: absolute;
-          left: 50%;
-          top: 26px;
+        .percent-box {
           font-size: 14px;
-          font-family: 'douyuFont';
-          color: #fff;
-          transform: translate(-50%, 0);
+
+          // 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: #f2f4f8;
+            margin-left: 5px;
+          }
         }
       }
     }
-  }
-  .status-card-box {
-    width: 330px;
-    height: 106px;
-    padding: 5px;
-    position: relative;
-
-    top: 280px;
-    border-radius: 4px;
 
-    .status-card {
+    .line-card {
       position: absolute;
-      width: 310px;
-      height: 94px;
+      top: 166px;
+      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;
-      background: url('/@/assets/images/home-container/bj.png') no-repeat;
 
-      background-size: 100% 100%;
-      .left-content {
-        width: 95px;
-        height: 93px;
-        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 {
+      .card-item {
         display: flex;
-        flex-direction: column;
-        width: 70%;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
         height: 100%;
-        .fengya {
+
+        .item-s {
           position: relative;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 5px;
-          margin-top: 8px;
+          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: #e4e6ee;
+            font-size: 12px;
+          }
+
+          .item-val {
+            position: absolute;
+            left: 50%;
+            top: 26px;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            transform: translate(-50%, 0);
+          }
         }
-        .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;
+      }
+    }
+    .status-card-box {
+      width: 330px;
+      height: 106px;
+      padding: 5px;
+      position: relative;
+
+      top: 280px;
+      border-radius: 4px;
+
+      .status-card {
+        position: absolute;
+        width: 310px;
+        height: 94px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        background: url('/@/assets/images/home-container/bj.png') no-repeat;
+
+        background-size: 100% 100%;
+        .left-content {
+          width: 95px;
+          height: 93px;
+          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%;
+          }
         }
-        .title {
-          margin-left: 8px;
-          color: @white;
-        }
-        .value {
-          margin-right: 8px;
-          color: #a1f9ff;
-        }
-        .status {
-          position: relative;
+        .right-content {
           display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-top: 8px;
-          padding: 5px;
-        }
-        .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%;
+          flex-direction: column;
+          width: 70%;
+          height: 100%;
+          .fengya {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 5px;
+            margin-top: 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%;
+          }
+          .title {
+            margin-left: 8px;
+            color: @white;
+          }
+          .value {
+            margin-right: 8px;
+            color: #a1f9ff;
+          }
+          .status {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 8px;
+            padding: 5px;
+          }
+          .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;
-}
+
+  :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>