From 305a5f9824e973b210579e03e0342af4049bae73 Mon Sep 17 00:00:00 2001
From: trp <2477421791@qq.com>
Date: Sat, 9 Dec 2023 03:09:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=94=90=E6=B6=A6=E5=B9=B3:=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=9D=A2=E6=9D=BF=E9=9B=8F=E5=BD=A2=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BA=86=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E9=A3=8E=E6=9C=BA=E9=9D=A2=E6=9D=BF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/content/airInfo/AirInfo.vue    |   6 +
 .../content/badGasInfo/BadGasInfo.vue         |  65 +++-
 .../badGasInfo/childComps/GasInfoItem.vue     | 125 ++++++++
 src/components/content/fanInfo/FanInfo.vue    | 281 ++++++++++++------
 .../content/windPressure/WindPressureList.vue |  10 +-
 5 files changed, 401 insertions(+), 86 deletions(-)
 create mode 100644 src/components/content/badGasInfo/childComps/GasInfoItem.vue

diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue
index 9c175d4..ccead2c 100644
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -62,6 +62,12 @@ const info3 = reactive({
   value: 80, //测量值
   point: 88, //阈值
 });
+setInterval(() => {
+  info.value = parseInt(Math.random() * 10) * 10;
+  info1.value = parseInt(Math.random() * 10) * 10;
+  info2.value = parseInt(Math.random() * 10) * 10;
+  info3.value = parseInt(Math.random() * 10) * 10;
+}, 2000);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue
index 0f26fdf..3d37b4e 100644
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -1,10 +1,65 @@
 <template>
   <div id="bad-gas-info">
     <div class="title">有害气体</div>
+    <div class="info-list">
+      <gas-info-item :gasInfo="gasInfo" />
+      <gas-info-item :gasInfo="gasInfo2" />
+      <gas-info-item :gasInfo="gasInfo3" />
+      <gas-info-item :gasInfo="gasInfo4" />
+      <gas-info-item :gasInfo="gasInfo5" />
+      <gas-info-item :gasInfo="gasInfo6" />
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { reactive } from "vue";
+import gasInfoItem from "./childComps/gasInfoItem.vue";
+const gasInfo = reactive({
+  name: "氧气", //气体名称
+  max: 100, //最大值
+  value: 10, //传感器值
+  point: 50, //阈值
+});
+const gasInfo2 = reactive({
+  name: "氧气", //气体名称
+  max: 100, //最大值
+  value: 10, //传感器值
+  point: 10, //阈值
+});
+const gasInfo3 = reactive({
+  name: "氧气", //气体名称
+  max: 100, //最大值
+  value: 10, //传感器值
+  point: 70, //阈值
+});
+const gasInfo4 = reactive({
+  name: "氧气", //气体名称
+  max: 100, //最大值
+  value: 10, //传感器值
+  point: 40, //阈值
+});
+const gasInfo5 = reactive({
+  name: "氧气", //气体名称
+  max: 100, //最大值
+  value: 10, //传感器值
+  point: 20, //阈值
+});
+const gasInfo6 = reactive({
+  name: "氧气", //气体名称
+  max: 100, //最大值
+  value: 10, //传感器值
+  point: 20, //阈值
+});
+setInterval(() => {
+  gasInfo.value = parseInt(Math.random() * 10) * 10;
+  gasInfo2.value = parseInt(Math.random() * 10) * 10;
+  gasInfo3.value = parseInt(Math.random() * 10) * 10;
+  gasInfo4.value = parseInt(Math.random() * 10) * 10;
+  gasInfo6.value = parseInt(Math.random() * 10) * 10;
+  gasInfo5.value = parseInt(Math.random() * 10) * 10;
+}, 2000);
+</script>
 
 <style lang="scss" scoped>
 #bad-gas-info {
@@ -25,5 +80,13 @@
     line-height: 45px;
     margin: 22px 0px 0px 62px;
   }
+  .info-list {
+    width: 100%;
+    height: calc(621px - 45px - 22px);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 10px 0px 0px 10px;
+  }
 }
 </style>
diff --git a/src/components/content/badGasInfo/childComps/GasInfoItem.vue b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
new file mode 100644
index 0000000..5d2ff3c
--- /dev/null
+++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
@@ -0,0 +1,125 @@
+<template>
+  <div id="gas-info-item">
+    <div class="info" ref="container"></div>
+    <div class="name">{{ gasInfo.name }}</div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref, reactive, watch, onMounted } from "vue";
+import * as Echarts from "echarts";
+let e_info;
+let params = defineProps({
+  gasInfo: Object,
+});
+// const gasInfo = {
+//   name: "氧气", //气体名称
+//   max: 100, //最大值
+//   value: 66, //传感器值
+//   point: 90, //阈值
+// };
+
+const option = {
+  series: [
+    {
+      type: "gauge",
+      startAngle: -90,
+      endAngle: -450,
+      radius: "100%",
+      center: ["50%", "50%"],
+      pointer: {
+        show: false,
+      },
+      progress: {
+        show: true,
+        overlap: false,
+        roundCap: true,
+        clip: false,
+        itemStyle: {
+          color: `${
+            params.gasInfo.value > params.gasInfo.point ? "#F94236" : "#7EDFEC"
+          }`,
+        },
+      },
+      max: params.gasInfo.max,
+      splitLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      data: [
+        {
+          value: params.gasInfo.value,
+          fontSize: 2100,
+          detail: {
+            valueAnimation: true,
+            offsetCenter: ["0%", "0%"],
+            fontSize: 26,
+          },
+        },
+      ],
+      axisLine: {
+        lineStyle: {
+          width: 25,
+          color: [[1, "#0a4265"]],
+        },
+      },
+      detail: {
+        width: 100,
+        height: 14,
+        fontSize: 26,
+        color: `${
+          params.gasInfo.value > params.gasInfo.point ? "#F94236" : "#FFCE23"
+        }`,
+        formatter: "Vo{value}%",
+      },
+    },
+  ],
+};
+let container = ref(null);
+onMounted(handleOnMounted);
+function handleOnMounted() {
+  e_info = Echarts.init(container.value);
+  e_info.setOption(option);
+}
+watch(
+  () => params.gasInfo.value,
+  (value) => {
+    option.series[0].data[0].value = value;
+    // 判断是否超过阈值则进度条变红
+    value > params.gasInfo.point
+      ? (option.series[0].progress.itemStyle.color = "#F94236")
+      : (option.series[0].progress.itemStyle.color = "#7EDFEC");
+    //   字体颜色
+    value > params.gasInfo.point
+      ? (option.series[0].detail.color = "#F94236")
+      : (option.series[0].detail.color = "#FFCE23");
+    e_info.setOption(option);
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+#gas-info-item {
+  width: 231px;
+
+  text-align: center;
+  .info {
+    width: 200px;
+    height: 200px;
+  }
+  .name {
+    width: 112px;
+    height: 37px;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 37px;
+    margin: 10px auto 0px;
+  }
+}
+</style>
diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue
index 20b8966..29c2151 100644
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -121,60 +121,110 @@ const option = {
   series: [
     {
       type: "gauge",
-      progress: {
-        show: true,
-        width: 15,
-        lineStyle: {
-          color: "yellow",
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          width: 5,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        length: 15,
-        lineStyle: {
-          width: 1,
-          color: "#099",
-        },
-      },
-      axisLabel: {
-        show: false,
-        distance: 25,
-        color: "#999",
-        fontSize: 20,
-      },
+      startAngle: -120,
+      endAngle: -420,
       pointer: {
         show: false,
       },
-      anchor: {
-        show: false,
-        showAbove: true,
-        size: 0,
+      progress: {
+        show: true,
+        overlap: false,
+        roundCap: true,
+        clip: false,
         itemStyle: {
           borderWidth: 10,
+          borderColor: {
+            type: "linear",
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#4BB10E", // 0% 处的颜色
+              },
+              {
+                offset: 0.25,
+                color: "#B1AD0E", // 100% 处的颜色
+              },
+              {
+                offset: 0.75,
+                color: "#B1880E", // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#D77E01", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+          color: {
+            type: "linear",
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#4BB10E", // 0% 处的颜色
+              },
+              {
+                offset: 0.25,
+                color: "#B1AD0E", // 100% 处的颜色
+              },
+              {
+                offset: 0.75,
+                color: "#B1880E", // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#D77E01", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+          borderWidth: 10,
         },
       },
-      title: {
-        show: true,
+      max: 1000,
+      splitLine: {
+        show: false,
       },
-      detail: {
-        valueAnimation: true,
-        fontSize: 40,
-        offsetCenter: [0, "0%"],
-        formatter: "{value}Hz",
-        color: "white",
+      axisTick: {
+        show: true,
+        splitNumber: 1,
+        length: 10,
+      },
+      axisLabel: {
+        show: false,
       },
       data: [
         {
-          value: 10,
+          value: 50,
+          fontSize: 2100,
+          detail: {
+            valueAnimation: true,
+            offsetCenter: ["0%", "0%"],
+            fontSize: 40,
+            color: "white",
+          },
         },
       ],
+      axisLine: {
+        lineStyle: {
+          width: 3,
+          color: [[1, "#155F7C"]],
+        },
+      },
+      detail: {
+        width: 100,
+        height: 14,
+        fontSize: 26,
+        color: "inherit",
+        formatter: "{value}",
+      },
     },
   ],
 };
@@ -182,60 +232,110 @@ const option2 = {
   series: [
     {
       type: "gauge",
-      progress: {
-        show: true,
-        width: 15,
-        lineStyle: {
-          color: "yellow",
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          width: 5,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        length: 15,
-        lineStyle: {
-          width: 1,
-          color: "#099",
-        },
-      },
-      axisLabel: {
-        show: false,
-        distance: 25,
-        color: "#999",
-        fontSize: 20,
-      },
+      startAngle: -120,
+      endAngle: -420,
       pointer: {
         show: false,
       },
-      anchor: {
-        show: false,
-        showAbove: true,
-        size: 0,
+      progress: {
+        show: true,
+        overlap: false,
+        roundCap: true,
+        clip: false,
         itemStyle: {
           borderWidth: 10,
+          borderColor: {
+            type: "linear",
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#4BB10E", // 0% 处的颜色
+              },
+              {
+                offset: 0.25,
+                color: "#B1AD0E", // 100% 处的颜色
+              },
+              {
+                offset: 0.75,
+                color: "#B1880E", // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#D77E01", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+          color: {
+            type: "linear",
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#4BB10E", // 0% 处的颜色
+              },
+              {
+                offset: 0.25,
+                color: "#B1AD0E", // 100% 处的颜色
+              },
+              {
+                offset: 0.75,
+                color: "#B1880E", // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#D77E01", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+          borderWidth: 10,
         },
       },
-      title: {
-        show: true,
+      max: 1000,
+      splitLine: {
+        show: false,
       },
-      detail: {
-        valueAnimation: true,
-        fontSize: 40,
-        offsetCenter: [0, "0%"],
-        formatter: "{value}Hz",
-        color: "white",
+      axisTick: {
+        show: true,
+        splitNumber: 1,
+        length: 10,
+      },
+      axisLabel: {
+        show: false,
       },
       data: [
         {
-          value: 10,
+          value: 500,
+          fontSize: 2100,
+          detail: {
+            valueAnimation: true,
+            offsetCenter: ["0%", "0%"],
+            fontSize: 40,
+            color: "white",
+          },
         },
       ],
+      axisLine: {
+        lineStyle: {
+          width: 3,
+          color: [[1, "#155F7C"]],
+        },
+      },
+      detail: {
+        width: 100,
+        height: 14,
+        fontSize: 26,
+        color: "inherit",
+        formatter: "{value}",
+      },
     },
   ],
 };
@@ -288,7 +388,9 @@ let isSAuto2 = ref("false");
   height: 24px;
   border: 2px solid #38cafb;
   border-radius: 50%;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 ::v-deep .el-radio__label {
   font-size: 28px;
@@ -332,6 +434,19 @@ let isSAuto2 = ref("false");
         height: 100%;
         width: 30%;
         margin: 0px 0px 0px 10px;
+        position: relative;
+      }
+      .echart::after {
+        content: "Hz";
+        font-size: 24px;
+        font-family: MicrosoftYaHei, MicrosoftYaHei;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 31px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 60%);
       }
       .fan-name {
         width: 39px;
diff --git a/src/components/content/windPressure/WindPressureList.vue b/src/components/content/windPressure/WindPressureList.vue
index 4f36e83..62bb015 100644
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -9,7 +9,8 @@
 
 <script setup>
 import WindPressureItem from "./childComps/WindPressureItem.vue";
-const wpList = [
+import { reactive } from "vue";
+const wpList = reactive([
   {
     windPId: 1, //编号
     max: 120, //最大值
@@ -70,7 +71,12 @@ const wpList = [
     value: 99, //测量值
     point: 70, //阈值
   },
-];
+]);
+setInterval(() => {
+  wpList.forEach((item) => {
+    item.value = parseInt(Math.random() * 10) * 10;
+  });
+}, 2000);
 </script>
 
 <style lang="scss" scoped>

From 600febc98a35782d47bb83bf09901f1c5d8c0f21 Mon Sep 17 00:00:00 2001
From: trp <2477421791@qq.com>
Date: Sat, 9 Dec 2023 03:24:38 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=94=90=E6=B6=A6=E5=B9=B3=EF=BC=9A?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E5=B0=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/content/badGasInfo/BadGasInfo.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue
index 3d37b4e..071bbe0 100644
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -16,37 +16,37 @@
 import { reactive } from "vue";
 import gasInfoItem from "./childComps/gasInfoItem.vue";
 const gasInfo = reactive({
-  name: "氧气", //气体名称
+  name: "一氧化硫", //气体名称
   max: 100, //最大值
   value: 10, //传感器值
   point: 50, //阈值
 });
 const gasInfo2 = reactive({
-  name: "氧气", //气体名称
+  name: "一氧化氮", //气体名称
   max: 100, //最大值
   value: 10, //传感器值
   point: 10, //阈值
 });
 const gasInfo3 = reactive({
-  name: "氧气", //气体名称
+  name: "一氧化碳", //气体名称
   max: 100, //最大值
   value: 10, //传感器值
   point: 70, //阈值
 });
 const gasInfo4 = reactive({
-  name: "氧气", //气体名称
+  name: "二氧化碳", //气体名称
   max: 100, //最大值
   value: 10, //传感器值
   point: 40, //阈值
 });
 const gasInfo5 = reactive({
-  name: "氧气", //气体名称
+  name: "硫化氢", //气体名称
   max: 100, //最大值
   value: 10, //传感器值
   point: 20, //阈值
 });
 const gasInfo6 = reactive({
-  name: "氧气", //气体名称
+  name: "二氧化硫", //气体名称
   max: 100, //最大值
   value: 10, //传感器值
   point: 20, //阈值