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

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>

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>