除尘器监控开发2

src/views/dustMonitoring/index.vue

@@ -41,11 +41,47 @@
       <div class="part2">
         <div class="dust-title">2号窑尾除尘器</div>
         <div class="dust-info">
-            <div class="info-item" v-for="item in dustInfo" :key="item.label">
-                <span class="lable">{{ item.label }}</span>
-                <span class="value">{{ item.value }}</span>
-                <span class="unit">{{ item.unit }}</span>
+          <div class="info-item" v-for="item in dustInfo" :key="item.label">
+            <span class="lable">{{ item.label }}</span>
+            <span class="value">{{ item.value }}</span>
+            <span class="unit">{{ item.unit }}</span>
+          </div>
+        </div>
+        <div class="indicator-box">
+          <div class="indicator-item" id="indicatorOne"></div>
+          <div class="indicator-item" id="indicatorTwo"></div>
+        </div>
+        <div class="position-info">
+          <div class="left">
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
+            </div>
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
             </div>
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
+            </div>
+          </div>
+        </div>
+        <div class="other-info">
+          <div>
+            <span>反吹仓室：</span>
+            <span>3#仓-1排</span>
+          </div>
+          <div>
+            <span>泄露仓室：</span>
+            <span>5#仓、10#仓、13#仓</span>
+          </div>
+          <div>
+            <span>故障仓室：</span>
+            <span>5#仓、10#仓、13#仓</span>
+          </div>
         </div>
       </div>
       <div class="warn-info"></div>
@@ -85,19 +121,108 @@ const initChart = () => {
     chartInstance[index] = echarts.init(
       document.getElementById("chart" + index)
     );
-    console.log(chartInstance[index]);
     chartInstance[index].setOption(option);
   });
 };
 const dustInfo = reactive([
-    {label: '压差', value: '0.0', unit: 'KPa'},
-    {label: '粉尘浓度', value: '0.0', unit: 'KPa'},
-])
+  { label: "压差", value: "0.0", unit: "KPa" },
+  { label: "粉尘浓度", value: "0.0", unit: "mg/m3" },
+  { label: "电磁阀数量", value: "0.0", unit: "KPa" },
+  { label: "仓室数量", value: "0.0", unit: "KPa" },
+  { label: "布袋检测仪数量", value: "0.0", unit: "KPa" },
+  { label: "脉冲检测仪数量", value: "0.0", unit: "KPa" },
+]);
+const option2 = {
+  series: [
+    {
+      type: "gauge",
+      startAngle: 260,
+      endAngle: 300,
+      center: ["50%", "75%"],
+      radius: "90%",
+      min: 0,
+      max: 1,
+      splitNumber: 8,
+      axisLine: {
+        lineStyle: {
+          width: 3,
+          color: [
+            [0.25, "#FF6E76"],
+            [0.8, "#67c23a"],
+            [1, "#FF6E76"],
+          ],
+        },
+      },
+      pointer: {
+        icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+        length: "12%",
+        width: 20,
+        offsetCenter: [0, "-60%"],
+        itemStyle: {
+          color: "auto",
+        },
+      },
+      axisTick: {
+        length: 0,
+        lineStyle: {
+          color: "auto",
+          width: 2,
+        },
+      },
+      splitLine: {
+        length: 0,
+        lineStyle: {
+          color: "auto",
+          width: 5,
+        },
+      },
+      axisLabel: {
+        color: "#464646",
+        fontSize: 20,
+        distance: -60,
+        rotate: "tangential",
+        show: false,
+      },
+      title: {
+        offsetCenter: [0, "50%"],
+        fontSize: 12,
+      },
+      detail: {
+        fontSize: 20,
+        offsetCenter: [0, 0],
+        valueAnimation: true,
+        formatter: function (value) {
+          return Math.round(value * 100) + "";
+        },
+        color: "inherit",
+      },
+      data: [
+        {
+          value: 0.7,
+          name: "压差",
+        },
+      ],
+    },
+  ],
+};
+const indicatorOneInstance = ref();
+const indicatorTwoInstance = ref();
+const indicatorFun = (target, domId, option) => {
+  if (target.value && target.dispose) {
+    target.value.dispose();
+  }
+  target.value = echarts.init(document.getElementById(domId));
+  target.value.setOption(option);
+};
+
 onMounted(() => {
   initChart();
+  indicatorFun(indicatorOneInstance, "indicatorOne", option2);
+  indicatorFun(indicatorTwoInstance, "indicatorTwo", option2);
 });
 </script>
 <style lang="scss" scoped>
+$borderColor: #bbbdc3;
 .top-box {
 }
 .left-box {
@@ -132,30 +257,86 @@ onMounted(() => {
     height: calc(60vh - 20px);
     border-radius: 15px;
     background-color: #fff;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 20px 0;
+    box-sizing: border-box;
     .dust-title {
-        text-align: center;
-        font-size: 20px;
-        font-weight: 600;
-        padding: 10px;
-        border: 1px solid #ebeef5;
+      text-align: center;
+      font-size: 20px;
+      font-weight: 600;
+      padding-bottom: 20px;
+      border-bottom: 1px solid $borderColor;
     }
     .dust-info {
-        padding: 0 20px;
+      padding: 20px 20px;
+      border-bottom: 1px solid $borderColor;
     }
     .info-item {
-        padding: 3px 0;
-        span {
-            display: inline-block;
-        }
-        .lable {
-            width: 40%;
-        }
-        .value {
-            width: 50%;
-        }
-        .unit {
-            width: 10%;
-        }
+      padding: 3px 0;
+      span {
+        display: inline-block;
+      }
+      .lable {
+        width: 40%;
+      }
+      .value {
+        width: 50%;
+      }
+      .unit {
+        width: 10%;
+      }
+    }
+    .indicator-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .indicator-item {
+        width: 50%;
+        height: 200px;
+      }
+    }
+    .position-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 40px 20px 20px 20px;
+      .left,
+      .right {
+        padding: 5px;
+        width: 48%;
+        flex-wrap: wrap;
+        // box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842);
+        box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px 0px;
+        // box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
+      }
+      .part {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+      }
+      .point {
+        width: 20px;
+        margin: 1% 3%;
+        border-radius: 50%;
+        display: inline-block;
+        cursor: pointer;
+      }
+      .point::after {
+        content: "";
+        display: block;
+        padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
+      }
+      .warn {
+        background-color: rgb(217, 10, 10);
+      }
+      .health {
+        background-color: #67c23a;
+      }
+    }
+    .other-info {
+      padding: 20px;
+      border-top: 1px solid $borderColor;
     }
   }
 }
@@ -169,4 +350,9 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
 }
+.layout2 {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
 </style>