From 165d67f943bc0211076fdcef98e0186733c942c9 Mon Sep 17 00:00:00 2001
From: zelian_wu <zelian.wu@xujiesoft.com>
Date: Fri, 14 Jun 2024 11:44:39 +0800
Subject: [PATCH] 2024-06-14

---
 src/views/modules/cdc/collectScreen.vue | 95 +++++++++++++++----------
 1 file changed, 59 insertions(+), 36 deletions(-)

diff --git a/src/views/modules/cdc/collectScreen.vue b/src/views/modules/cdc/collectScreen.vue
index 74f3eae..658e6fa 100644
--- a/src/views/modules/cdc/collectScreen.vue
+++ b/src/views/modules/cdc/collectScreen.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="echarts">
     <div class="header " style="display: flex;justify-content: space-between;align-items: center;height: 6%;padding: 5px">
-      <div style="width: 30%"><img style="max-width: 20%;max-height: 100%;vertical-align:middle;" src="~@/assets/img/ccl.png" ></div>
-      <div style="width: 40%;text-align: center;font-size: 24px;font-weight: 400">CCL Coating 监控大屏/Monitor Platform</div>
+      <div style="width: 20%"><img style="max-width: 30%;max-height: 100%;vertical-align:middle;" src="~@/assets/img/ccl.png" ></div>
+      <div style="width: 50%;text-align: center;font-size: 24px;font-weight: 400">CCL Coating 监控大屏/Monitor Platform</div>
       <div style="width: 30%;font-size: 13px">
         <el-row>
-          <el-col :span="6" :offset="18">
+          <el-col :span="12" :offset="12">
             <div>当前时间/Time:</div>
             <div>{{dateFormat(this.newTime)}}</div>
           </el-col>
@@ -18,38 +18,38 @@
     <div class="pie">
       <div class="pie_left">
         <div class="pie_content" >
-          <span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/Static Electricity</span>
+          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
         </div>
         <div class="pie_chart" style="text-align: center;">
           <div v-for="item in line1">
-            <div style="margin-bottom: 20px">
+            <div>
               <div>{{ item.deviceDesc.split(';')[0] }}</div>
               <div>{{ item.deviceDesc.split(';')[1] }}</div>
             </div>
-            <div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
+            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
           </div>
         </div>
         <div class="pie_content pie_footer">
           <div>上限/Upper  <span v-if="line1.length !== 0">{{line1[0].maxValue}}</span><span v-else>0</span></div>
-          <div>下限/Lower  <span v-if="line1.length !== 0">{{line1[0].minValue}}</span><span v-else>0</span></div>
+<!--          <div>下限/Lower  <span v-if="line1.length !== 0">{{line1[0].minValue}}</span><span v-else>0</span></div>-->
         </div>
       </div>
       <div class="pie_right">
-        <div class="pie_content">
-          <span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/Gas Concentration</span>
+        <div class="pie_content" >
+          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
         </div>
         <div class="pie_chart" style="text-align: center;">
           <div v-for="item in lineGC1">
-            <div style="margin-bottom: 20px">
+            <div>
               <div>{{ item.deviceDesc.split(';')[0] }}</div>
               <div>{{ item.deviceDesc.split(';')[1] }}</div>
             </div>
-            <div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
+            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue || item.itemValue <= item.minValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
           </div>
         </div>
-        <div class="pie_content pie_footer">
-          <div>上限/Upper  <span v-if="lineGC1.length !== 0">{{lineGC1[0].maxValue}}</span><span v-else>0</span></div>
-          <div>下限/Lower  <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span></div>
+        <div class="pie_content pie_footer" style="margin-top: 2%">
+          <div>上限/Upper  <span v-if="lineGC1.length !== 0">{{lineGC1[0].maxValue}}</span><span v-else>0</span>%</div>
+          <div>下限/Lower  <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span>%</div>
         </div>
       </div>
     </div>
@@ -59,43 +59,43 @@
     <div class="pie">
       <div class="pie_left">
         <div class="pie_content">
-          <span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/Static Electricity</span>
+          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
         </div>
         <div class="pie_chart" style="text-align: center;">
           <div v-for="item in line2">
-            <div style="margin-bottom: 20px">
+            <div >
               <div>{{ item.deviceDesc.split(';')[0] }}</div>
               <div>{{ item.deviceDesc.split(';')[1] }}</div>
             </div>
-            <div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
+            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 60px;height:60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
           </div>
         </div>
         <div class="pie_content pie_footer">
           <div>上限/Upper  <span v-if="line2.length !== 0">{{line2[0].maxValue}}</span><span v-else>0</span></div>
-          <div>下限/Lower  <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>
+<!--          <div>下限/Lower  <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>-->
         </div>
       </div>
       <div class="pie_right">
         <div class="pie_content">
-          <span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/Gas Concentration</span>
+          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
         </div>
         <div class="pie_chart" style="text-align: center;">
           <div v-for="item in lineGC2">
-            <div style="margin-bottom: 20px">
+            <div >
               <div>{{ item.deviceDesc.split(';')[0] }}</div>
               <div>{{ item.deviceDesc.split(';')[1] }}</div>
             </div>
-            <div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
+            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue || item.itemValue <= item.minValue )?'red':'#ccc'};width: 60px;height: 60px;line-height: 60px;margin: 0 auto`">{{item.itemValue}}</div>
           </div>
         </div>
-        <div class="pie_content pie_footer">
-          <div>上限/Upper  <span v-if="lineGC2.length !== 0">{{lineGC2[0].maxValue}}</span><span v-else>0</span></div>
-          <div>下限/Lower  <span v-if="lineGC2.length !== 0">{{lineGC2[0].minValue}}</span><span v-else>0</span></div>
+        <div class="pie_content pie_footer" style="margin-top: 2%">
+          <div>上限/Upper  <span v-if="lineGC2.length !== 0">{{lineGC2[0].maxValue}}</span><span v-else>0</span>%</div>
+          <div>下限/Lower  <span v-if="lineGC2.length !== 0">{{lineGC2[0].minValue}}</span><span v-else>0</span>%</div>
         </div>
       </div>
     </div>
     <div class="content">
-      配妆间/Adhensive Workshop
+      配胶间/Mixing Room
     </div>
     <div style="border: 1px solid #ccc;padding: 0 10px;height: 34%">
       <div style="width: 100%;height: 100%" id="main">
@@ -119,14 +119,25 @@ export default {
       option : {
         title: {
           text: '浓度/Gas Concentration',
-          left: 'center'
+          left: 'center',
+          textStyle:{
+            color: '#2f82d7',
+          }
         },
         color: ['#2f82d7'],
         xAxis: {
           data: ['1#', '2#', '3#', '4#', '5#', '6#', '7#']
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          min:0,
+          max:30,
+          interval:5,
+          axisLabel: {
+            formatter: function (value, index) {
+              return value + "%";
+            }
+          }
         },
         series: [
           {
@@ -137,10 +148,10 @@ export default {
               data : [
                 {
                   yAxis : 16,
-                  name : '下限/Lower  16'
+                  name : '下限/Lower  16%'
                 },  {
                   yAxis : 20,
-                  name : '上限/Upper  20'
+                  name : '上限/Upper  20%'
                 }
               ],
               label : {
@@ -192,6 +203,9 @@ export default {
         if (data && data.code === 0){
           if (this.dataList.length !== 0){
             this.dataList = data.rows;
+            if (!this.times){
+              this.newTime = new Date(data.time);
+            }
             this.initCharts();
             return
           }
@@ -219,10 +233,10 @@ export default {
           this.option.series[0].markLine.data = [
             {
               yAxis : val[0].minValue,
-              name : `下限/Lower  ${val[0].minValue}`
+              name : `下限/Lower  ${val[0].minValue} %`
             },  {
               yAxis : val[0].maxValue,
-              name : `上限/Lower  ${val[0].maxValue}`
+              name : `上限/Lower  ${val[0].maxValue} %`
             }
           ]
         }
@@ -233,6 +247,9 @@ export default {
   },
   created() {
     this.getDataList();
+    this.times = setInterval(() => {
+      this.getDataList();
+    }, 1000 * 30);
   },
   mounted() {
     this.initCharts();
@@ -244,12 +261,16 @@ export default {
     if (this.timer){
       clearInterval(this.timer)
     }
+    if (this.times){
+      clearInterval(this.times)
+    }
   }
 }
 </script>
 
 <style scoped>
 .echarts{
+  margin-top: 10px;
   height:100vh;
   padding: 5px;
 }
@@ -263,28 +284,30 @@ export default {
   border: 1px solid #ccc;
   padding: 10px;
   margin-bottom: 10px;
-  width: 62%
+  width: 64%
 }
 
 .pie_right{
   border: 1px solid #ccc;
   padding: 10px;
   margin-bottom: 10px;
-  width: 48%
+  width: 46%
 }
 .pie_content{
   height: 15%;
   text-align: center;
-  padding: 10px;
-  line-height: 1.5
+  padding: 0;
+  line-height: 1
 }
 .pie_footer{
+  margin-top: 1%;
   display: flex;
   align-items: center;
   justify-content: space-around;
 }
 .pie_chart{
-  height: 70%;
+  margin-top: 2%;
+  height: 65%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;