From b9552ee25b33abf0db47589dc2a92adaa07c8179 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Fri, 25 Aug 2023 14:35:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9echarts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Progress.vue             | 140 ++++++++++++++++++++++----------
 src/components/info/EnvironmentInfo.vue |  18 ++--
 src/pages/Home.vue                      |   3 +-
 3 files changed, 106 insertions(+), 55 deletions(-)

diff --git a/src/components/Progress.vue b/src/components/Progress.vue
index a8e393b..6bfbd63 100644
--- a/src/components/Progress.vue
+++ b/src/components/Progress.vue
@@ -10,6 +10,7 @@
               : `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
           }}
         </p>
+        <p class="pre_time">预热时间约5分钟</p>
         <!-- <div class="progress_bg">
           <div
             class="pro"
@@ -120,7 +121,7 @@ const binOption = ref({
     trigger: 'axis',
   },
   legend: {
-    data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
+    data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
   },
   grid: {
     left: '3%',
@@ -131,7 +132,10 @@ const binOption = ref({
   xAxis: {
     type: 'category',
     boundaryGap: false,
-    data: Object.keys(echartsStore.binCharts),
+    data: Array.from(
+      Array(Object.keys(echartsStore.binCharts).length),
+      (v, k) => k,
+    ),
   },
   yAxis: {
     type: 'value',
@@ -150,13 +154,13 @@ const binOption = ref({
       data: echartsStore.binHumidity,
     },
     {
-      name: '过氧化氢浓度',
+      name: 'H2O2浓度',
       type: 'line',
       stack: 'binHP',
       data: echartsStore.binHP,
     },
     {
-      name: '过氧化氢相对饱和度',
+      name: 'H2O2饱和度',
       type: 'line',
       stack: 'binSaturation',
       data: echartsStore.binSaturation,
@@ -168,7 +172,7 @@ const envir1Option = ref({
     trigger: 'axis',
   },
   legend: {
-    data: ['温度', '湿度', '过氧化氢浓度'],
+    data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
   },
   grid: {
     left: '3%',
@@ -188,19 +192,25 @@ const envir1Option = ref({
     {
       name: '温度',
       type: 'line',
-      stack: 'Total',
+      stack: '1',
       data: [],
     },
     {
       name: '湿度',
       type: 'line',
-      stack: 'Total',
+      stack: '2',
       data: [],
     },
     {
-      name: '过氧化氢浓度',
+      name: 'H2O2浓度',
       type: 'line',
-      stack: 'Total',
+      stack: '3',
+      data: [],
+    },
+    {
+      name: 'H2O2饱和度',
+      type: 'line',
+      stack: '4',
       data: [],
     },
   ],
@@ -210,7 +220,7 @@ const envir2Option = ref({
     trigger: 'axis',
   },
   legend: {
-    data: ['温度', '湿度', '过氧化氢浓度'],
+    data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
   },
   grid: {
     left: '3%',
@@ -230,19 +240,25 @@ const envir2Option = ref({
     {
       name: '温度',
       type: 'line',
-      stack: 'Total',
+      stack: '1',
       data: [],
     },
     {
       name: '湿度',
       type: 'line',
-      stack: 'Total',
+      stack: '2',
+      data: [],
+    },
+    {
+      name: 'H2O2浓度',
+      type: 'line',
+      stack: '3',
       data: [],
     },
     {
-      name: '过氧化氢浓度',
+      name: 'H2O2饱和度',
       type: 'line',
-      stack: 'Total',
+      stack: '4',
       data: [],
     },
   ],
@@ -293,7 +309,7 @@ onMounted(() => {
         trigger: 'axis',
       },
       legend: {
-        data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
+        data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
       },
       grid: {
         left: '3%',
@@ -304,7 +320,10 @@ onMounted(() => {
       xAxis: {
         type: 'category',
         boundaryGap: false,
-        data: Object.keys(echartsStore.binCharts),
+        data: Array.from(
+          Array(Object.keys(echartsStore.binCharts).length),
+          (v, k) => k,
+        ),
       },
       yAxis: {
         type: 'value',
@@ -323,13 +342,13 @@ onMounted(() => {
           data: echartsStore.binHumidity,
         },
         {
-          name: '过氧化氢浓度',
+          name: 'H2O2浓度',
           type: 'line',
           stack: 'binHP',
           data: echartsStore.binHP,
         },
         {
-          name: '过氧化氢相对饱和度',
+          name: 'H2O2饱和度',
           type: 'line',
           stack: 'binSaturation',
           data: echartsStore.binSaturation,
@@ -341,7 +360,7 @@ onMounted(() => {
         trigger: 'axis',
       },
       legend: {
-        data: ['温度', '湿度', '过氧化氢浓度'],
+        data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
       },
       grid: {
         left: '3%',
@@ -361,19 +380,25 @@ onMounted(() => {
         {
           name: '温度',
           type: 'line',
-          stack: 'Total',
+          stack: '1',
           data: [],
         },
         {
           name: '湿度',
           type: 'line',
-          stack: 'Total',
+          stack: '2',
           data: [],
         },
         {
-          name: '过氧化氢浓度',
+          name: 'H2O2浓度',
           type: 'line',
-          stack: 'Total',
+          stack: '3',
+          data: [],
+        },
+        {
+          name: 'H2O2饱和度',
+          type: 'line',
+          stack: '4',
           data: [],
         },
       ],
@@ -383,7 +408,7 @@ onMounted(() => {
         trigger: 'axis',
       },
       legend: {
-        data: ['温度', '湿度', '过氧化氢浓度'],
+        data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
       },
       grid: {
         left: '3%',
@@ -403,19 +428,25 @@ onMounted(() => {
         {
           name: '温度',
           type: 'line',
-          stack: 'Total',
+          stack: '1',
           data: [],
         },
         {
           name: '湿度',
           type: 'line',
-          stack: 'Total',
+          stack: '2',
           data: [],
         },
         {
-          name: '过氧化氢浓度',
+          name: 'H2O2浓度',
           type: 'line',
-          stack: 'Total',
+          stack: '3',
+          data: [],
+        },
+        {
+          name: 'H2O2饱和度',
+          type: 'line',
+          stack: '4',
           data: [],
         },
       ],
@@ -428,7 +459,7 @@ onMounted(() => {
         trigger: 'axis',
       },
       legend: {
-        data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
+        data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
       },
       grid: {
         left: '3%',
@@ -439,7 +470,10 @@ onMounted(() => {
       xAxis: {
         type: 'category',
         boundaryGap: false,
-        data: Object.keys(echartsStore.binCharts),
+        data: Array.from(
+          Array(Object.keys(echartsStore.binCharts).length),
+          (v, k) => k,
+        ),
       },
       yAxis: {
         type: 'value',
@@ -458,13 +492,13 @@ onMounted(() => {
           data: echartsStore.binHumidity,
         },
         {
-          name: '过氧化氢浓度',
+          name: 'H2O2浓度',
           type: 'line',
           stack: 'binHP',
           data: echartsStore.binHP,
         },
         {
-          name: '过氧化氢相对饱和度',
+          name: 'H2O2饱和度',
           type: 'line',
           stack: 'binSaturation',
           data: echartsStore.binSaturation,
@@ -476,7 +510,7 @@ onMounted(() => {
         trigger: 'axis',
       },
       legend: {
-        data: ['温度', '湿度', '过氧化氢浓度'],
+        data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
       },
       grid: {
         left: '3%',
@@ -496,19 +530,25 @@ onMounted(() => {
         {
           name: '温度',
           type: 'line',
-          stack: 'Total',
+          stack: '1',
           data: [],
         },
         {
           name: '湿度',
           type: 'line',
-          stack: 'Total',
+          stack: '2',
           data: [],
         },
         {
-          name: '过氧化氢浓度',
+          name: 'H2O2浓度',
           type: 'line',
-          stack: 'Total',
+          stack: '3',
+          data: [],
+        },
+        {
+          name: 'H2O2饱和度',
+          type: 'line',
+          stack: '4',
           data: [],
         },
       ],
@@ -518,7 +558,7 @@ onMounted(() => {
         trigger: 'axis',
       },
       legend: {
-        data: ['温度', '湿度', '过氧化氢浓度'],
+        data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
       },
       grid: {
         left: '3%',
@@ -538,19 +578,25 @@ onMounted(() => {
         {
           name: '温度',
           type: 'line',
-          stack: 'Total',
+          stack: '1',
           data: [],
         },
         {
           name: '湿度',
           type: 'line',
-          stack: 'Total',
+          stack: '2',
+          data: [],
+        },
+        {
+          name: 'H2O2浓度',
+          type: 'line',
+          stack: '3',
           data: [],
         },
         {
-          name: '过氧化氢浓度',
+          name: 'H2O2饱和度',
           type: 'line',
-          stack: 'Total',
+          stack: '4',
           data: [],
         },
       ],
@@ -607,6 +653,7 @@ const continueDisinfect = () => {
       padding: 0 23px;
       display: flex;
       align-items: center;
+      position: relative;
       .left_time_tag {
         width: 158.66px;
         height: 45px;
@@ -635,6 +682,15 @@ const continueDisinfect = () => {
         align-items: center;
         justify-content: center;
       }
+      .pre_time {
+        position: absolute;
+        font-family: Source Han Sans CN;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        color: red;
+        left: 214px;
+      }
       .progress_bg {
         width: 396px;
         height: 14px;
diff --git a/src/components/info/EnvironmentInfo.vue b/src/components/info/EnvironmentInfo.vue
index bf398a7..12165c9 100644
--- a/src/components/info/EnvironmentInfo.vue
+++ b/src/components/info/EnvironmentInfo.vue
@@ -22,24 +22,20 @@
     </div>
     <div class="content">
       <div class="line">
-        <p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}温度</p>
-        <p class="num">{{ getTemperature() }}℃</p>
+        <p class="title">温度</p>
+        <p class="num">{{ getTemperature() }}°C</p>
       </div>
       <div class="line">
-        <p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}湿度</p>
+        <p class="title">相对湿度</p>
         <p class="num">{{ getHumidity() }} {{ '%RH' }}</p>
       </div>
       <div class="line">
-        <p class="title">
-          {{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢浓度
-        </p>
-        <p class="num">{{ getHP() }} PPM</p>
+        <p class="title">相对饱和度</p>
+        <p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
       </div>
       <div class="line">
-        <p class="title">
-          {{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢相对饱和度
-        </p>
-        <p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
+        <p class="title">汽化过氧化氢浓度</p>
+        <p class="num">{{ getHP() }} ppm</p>
       </div>
     </div>
   </div>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index c518565..4889146 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -152,8 +152,7 @@
     <LiquidHandle v-if="activeTab == 2" :tabType="1" />
     <LiquidHandle v-if="activeTab == 3" :tabType="2" />
     <Test v-if="activeTab == 4" />
-    <Setting />
-    <!-- <Setting v-if="activeTab == 5" /> -->
+    <Setting v-if="activeTab == 5" />
     <div class="other_info">
       <p>IP {{ settingStore.deviceIp }}</p>
       <p class="time">{{ nowTime }}</p>