Merge remote-tracking branch 'origin/dev' into dev

# Conflicts: # src/components/content/badGasInfo/BadGasInfo.vue
2023-12-15 18:07:24 +08:00
parent 1168c9eb13 ca3fbc2602
commit bf9dc9530a
15 changed files with 419 additions and 19842 deletions
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -1,22 +1,36 @@
 <template>
-  <div id="bad-gas-info" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
+  <div
+    id="bad-gas-info"
+    :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }"
+    @click="handleOpenChart"
+  >
    <div class="title">有害气体</div>
    <div class="info-list">
-      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item"/>
+      <gas-info-item
+        v-for="item in badGasList"
+        :key="item.equipmentId"
+        :gasInfo="item"
+      />
    </div>
+
    <div class="digital-tunnel">
-      <el-dialog v-model="isVisited" title="有害气体监控数据" width="2400px" :modal="false">
+      <el-dialog
+        v-model="isVisited"
+        title="有害气体监控数据"
+        width="2400px"
+        :modal="false"
+      >
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="chat-dialog">
          <div id="container"></div>
-          <div style="width: 1px;"></div>
+          <div style="width: 1px"></div>
        </div>
        <div class="time-select">
          <time-range-btn
-              :buttonList="timeList"
-              v-model="selectTimeButton"
-              @select="timeSelect"
+            :buttonList="timeList"
+            v-model="selectTimeButton"
+            @select="timeSelect"
          />
        </div>
        <div class="left-bottom-icon"></div>
@@ -28,57 +42,68 @@

 <script setup>
 import GasInfoItem from "./childComps/GasInfoItem.vue";
-import * as echarts from 'echarts';
-import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
+import * as echarts from "echarts";
+import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";

 const props = defineProps({
  list: Array,
-  badGasData: Array
+  badGasData: Array,
 });
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isVisited = ref(false);
-const badGasList = ref([])
+const badGasList = ref([]);
 let myEcharts = reactive({});
-const bgImage = computed(() =>
-    isVisited.value
-        ? "sp_active.png"
-        : "bg.png"
+const bgImage = computed(() => (isVisited.value ? "sp_active.png" : "bg.png"));
+watch(
+  () => props.list,
+  (now) => {
+    badGasList.value.forEach((item) => {
+      now.forEach((newItem) => {
+        if (item.equipmentId === newItem.equipmentId) {
+          item.value = newItem.value;
+        }
+      });
+    });
+  },
+  { deep: true }
 );
-watch(() => props.list, (now) => {
-  badGasList.value.forEach(item => {
-    now.forEach(newItem => {
-      if (item.equipmentId === newItem.equipmentId) {
-        item.value = newItem.value
-      }
-    })
-  })
-}, {deep: true});

-watch(() => props.badGasData, (now) => {
-  getBadGasInfo(now.sensorList)
-}, {deep: true});
+watch(
+  () => props.badGasData,
+  (now) => {
+    getBadGasInfo(now.sensorList);
+  },
+  { deep: true }
+);
 const timeSelect = (index) => {
-  console.log('选择时间', index)
+  console.log("选择时间", index);
  if (index === 0) {
-    console.log('--年')
+    console.log("--年");
  } else if (index === 1) {
-    console.log('--月')
+    console.log("--月");
  } else if (index === 2) {
-    console.log('--日')
+    console.log("--日");
  }
 };
 const getBadGasInfo = (now) => {
-  let windPressureObj = {}
-  let windPressureArr = []
-  now.map(item => {
-    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
-      windPressureObj = changeData(item)
-      windPressureArr.push(windPressureObj)
+  let windPressureObj = {};
+  let windPressureArr = [];
+  now.map((item) => {
+    if (
+      item.equipmentType === "carbonDioxide" ||
+      item.equipmentType === "carbonMonoxide" ||
+      item.equipmentType === "hydrogenSulfide" ||
+      item.equipmentType === "sulfurDioxide" ||
+      item.equipmentType === "sulfurMonoxide" ||
+      item.equipmentType === "nitrogenDioxide"
+    ) {
+      windPressureObj = changeData(item);
+      windPressureArr.push(windPressureObj);
    }
-  })
-  badGasList.value = windPressureArr
-}
+  });
+  badGasList.value = windPressureArr;
+};
 const changeData = (item) => {
  return {
    equipmentId: item.equipmentId,
@@ -86,25 +111,26 @@ const changeData = (item) => {
    max: 120,
    value: item.value,
    point: item.valueThreshold,
-    unit: item.unit
-  }
-}
+    unit: item.unit,
+  };
+};
 const handleOpenChart = () => {
-  console.log('有害气体弹窗')
-  isVisited.value = true
+  console.log("有害气体弹窗");
+  isVisited.value = true;
  nextTick(() => {
-    initChart()
-  })
-}
+    initChart();
+  });
+};
 const getImageUrl = (name) => {
-  return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url).href
-}
+  return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
+    .href;
+};
 /**
 * 初始化echarts实例方法
 */
 const initChart = () => {
  //3.初始化container容器
-  myEcharts = echarts.init(document.getElementById('container'));
+  myEcharts = echarts.init(document.getElementById("container"));
  //5.传入数据
  let option = {
    //图例
@@ -129,103 +155,146 @@ const initChart = () => {
    //提示框组件
    tooltip: {
      show: true,
-      trigger: 'axis',
+      trigger: "axis",
      textStyle: {
        fontSize: 40
      }
    },
    //X轴
    xAxis: {
-      type: 'category',
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+      type: "category",
+      data: [
+        "00:00",
+        "01:00",
+        "02:00",
+        "03:00",
+        "04:00",
+        "05:00",
+        "06:00",
+        "07:00",
+        "08:00",
+        "09:00",
+        "10:00",
+        "11:00",
+        "12:00",
+        "13:00",
+        "14:00",
+        "15:00",
+        "16:00",
+        "17:00",
+        "18:00",
+        "19:00",
+        "20:00",
+        "21:00",
+        "22:00",
+        "23:00",
+        "24:00",
+      ],
      axisLabel: {
        textStyle: {
          fontSize: 45,
-          color: '#D6F1FA'
+          color: "#D6F1FA",
        },
      },
    },
    //Y轴
    yAxis: {
-      type: 'value',
+      type: "value",
      axisLabel: {
        textStyle: {
          fontSize: 45,
-          color: '#D6F1FA'
+          color: "#D6F1FA",
        },
      },
    },
    //配置项
    series: [
      {
-        name: '二氧化碳',
-        data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
-        type: 'line',
+        name: "二氧化碳",
+        data: [
+          56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
+          69, 25, 31, 49, 81, 63,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        name: '一氧化碳',
-        data: [96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11, 79, 51, 29, 60, 48, 83, 15],
-        type: 'line',
+        name: "一氧化碳",
+        data: [
+          96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
+          79, 51, 29, 60, 48, 83, 15,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        name: '二氧化氮',
-        data: [53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25, 77, 82, 13, 68, 49, 55, 7, 39],
-        type: 'line',
+        name: "二氧化氮",
+        data: [
+          53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
+          77, 82, 13, 68, 49, 55, 7, 39,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        name: '一氧化氮',
-        data: [37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82, 17, 66, 30, 78, 55, 23, 47],
-        type: 'line',
+        name: "一氧化氮",
+        data: [
+          37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
+          17, 66, 30, 78, 55, 23, 47,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        name: '二氧化硫',
-        data: [6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100, 23, 80, 44, 62, 59, 13, 86],
-        type: 'line',
+        name: "二氧化硫",
+        data: [
+          6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
+          23, 80, 44, 62, 59, 13, 86,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        name: '硫化氢',
-        data: [13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 11, 21, 31, 41, 51],
-        type: 'line',
+        name: "硫化氢",
+        data: [
+          13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
+          100, 11, 21, 31, 41, 51,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
-    ]
-  }
+    ],
+  };
  myEcharts.setOption(option);
  //图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
-  }
-}
-
+  };
+};
 </script>

 <style lang="scss" scoped>
@@ -239,7 +308,6 @@ const initChart = () => {
  right: 72px;
  background-image: url(../../../assets/images/badGasInfo/bg.png);

-
  .title {
    width: 128px;
    height: 45px;