唐润平:显示面板雏形全部完成并优化了第一个风机面板样式

2023-12-09 03:09:53 +08:00
parent e20b7c1002
commit 305a5f9824
5 changed files with 401 additions and 86 deletions
--- 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>
--- 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>
--- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue
+++ 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>
--- 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;
--- 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>