echarts

src/components/Progress.vue

@@ -16,12 +16,18 @@
       <div class="right_btns">
         <div
           :class="operatorStore.disinfectStatus ? 'btn active' : 'btn'"
+          @click="stopDisinfect"
+        >
+          停止消毒
+        </div>
+        <div
+          :class="operatorStore.disinfectStatus ? 'btn active ml' : 'btn ml'"
           @click="pauseDisinfect"
         >
           暂停消毒
         </div>
         <div
-          :class="operatorStore.disinfectStatus ? 'btn ml' : 'btn ml active'"
+          :class="operatorStore.disinfectStatus ? 'btn' : 'btn active'"
           @click="continueDisinfect"
         >
           继续消毒
@@ -31,15 +37,15 @@
     <div class="echarts_wrap">
       <div class="single_wrap">
         <p class="title">设备温度/湿度/过氧化氢浓度</p>
-        <div class="echarts_box"></div>
+        <div class="echarts_box" id="bin"></div>
       </div>
       <div class="single_wrap">
         <p class="title">环境1/湿度/过氧化氢浓度</p>
-        <div class="echarts_box"></div>
+        <div class="echarts_box" id="envir1"></div>
       </div>
       <div class="single_wrap">
         <p class="title">环境2/湿度/过氧化氢浓度</p>
-        <div class="echarts_box"></div>
+        <div class="echarts_box" id="envir2"></div>
       </div>
     </div>
     <div class="detail_wrap">
@@ -53,9 +59,80 @@ import { useOperatorStore, useWebSocketStore } from '@/store'
 import {
   stopDisinfectionJSON,
   getStateJSON,
-  getAllRecordsJSON,
+  pauseDisinfectionJSON,
 } from '@/mock/command'
 import { onMounted, onUnmounted, ref } from 'vue'
+import * as echarts from 'echarts'
+
+const binOption = ref({
+  legend: {
+    data: ['Email', 'Union Ads', 'Video Ads'],
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      name: 'Email',
+      type: 'line',
+      stack: 'Total',
+      data: [120, 132, 101, 134, 90, 230, 210],
+    },
+    {
+      name: 'Union Ads',
+      type: 'line',
+      stack: 'Total',
+      data: [220, 182, 191, 234, 290, 330, 310],
+    },
+    {
+      name: 'Video Ads',
+      type: 'line',
+      stack: 'Total',
+      data: [150, 232, 201, 154, 190, 330, 410],
+    },
+  ],
+})
+const envir1Option = ref({
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line',
+    },
+  ],
+})
+const envir2Option = ref({
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line',
+    },
+  ],
+})
 
 const operatorStore = useOperatorStore()
 const webSocketStore = useWebSocketStore()
@@ -73,6 +150,12 @@ onMounted(() => {
   timer.value = setInterval(() => {
     webSocketStore.sendCommandMsg(getStateJSON)
   }, 1000)
+  var binCharts = echarts.init(document.getElementById('bin'))
+  binCharts.setOption(binOption.value)
+  var envir1Charts = echarts.init(document.getElementById('envir1'))
+  envir1Charts.setOption(envir1Option.value)
+  var envir2Charts = echarts.init(document.getElementById('envir2'))
+  envir2Charts.setOption(envir2Option.value)
 })
 onUnmounted(() => {
   timer.value = null
@@ -80,6 +163,13 @@ onUnmounted(() => {
 
 const pauseDisinfect = () => {
   if (operatorStore.disinfectStatus) {
+    webSocketStore.sendCommandMsg(pauseDisinfectionJSON)
+    operatorStore.updateDisinfectStatus(false)
+  }
+}
+
+const stopDisinfect = () => {
+  if (operatorStore.disinfectStatus) {
     webSocketStore.sendCommandMsg(stopDisinfectionJSON)
     operatorStore.updateDisinfectStatus(false)
   }
@@ -106,7 +196,8 @@ const continueDisinfect = () => {
     align-items: center;
     margin-bottom: 49px;
     .left_progress {
-      width: 860px;
+      // width: 860px;
+      flex: 1;
       height: 80px;
       border-radius: 14px;
       background: #f6f6f6;
@@ -128,19 +219,19 @@ const continueDisinfect = () => {
         font-weight: normal;
         letter-spacing: 0.1em;
         color: #ffffff;
-        margin-right: 73px;
       }
       .time {
-        width: 90px;
+        // width: 90px;
+        flex: 1;
         height: 20px;
         font-family: Source Han Sans CN;
         font-size: 14px;
         font-weight: 500;
         letter-spacing: 0.1em;
         color: #000000;
-        margin-right: 85px;
         display: flex;
         align-items: center;
+        justify-content: center;
       }
       .progress_bg {
         width: 396px;
@@ -184,7 +275,7 @@ const continueDisinfect = () => {
         background: #06518b;
       }
       .ml {
-        margin-left: 20px;
+        margin: 0 20px;
       }
     }
   }

src/mock/command.js

@@ -47,6 +47,11 @@ export const stopDisinfectionJSON = {
   messageId: 'stopDisinfection',
 }
 
+export const pauseDisinfectionJSON = {
+  command: 'pauseDisinfection',
+  messageId: 'pauseDisinfection',
+}
+
 // 获取当前设备的状态信息
 export const getStateJSON = {
   command: 'getState',

src/pages/Home.vue

@@ -120,7 +120,7 @@
         <p class="text">设置</p>
       </div>
     </div>
-    <Operator
+    <!-- <Operator
       v-if="activeTab == 1 && showOpertor"
       :changeShowOperator="changeShowOperator"
       :handleShowKeyBoard="handleShowKeyBoard"
@@ -130,7 +130,8 @@
     <Progress
       v-if="activeTab == 1 && !showOpertor"
       :changeShowOperator="changeShowOperator"
-    />
+    /> -->
+    <Progress v-if="activeTab == 1" />
     <LiquidHandle v-if="activeTab == 2" :tabType="1" />
     <LiquidHandle v-if="activeTab == 3" :tabType="2" />
     <Test v-if="activeTab == 4" />