From ef69e7c282ff25c99f5be735c788aa65fc5085cf Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Tue, 12 Dec 2023 16:38:15 +0800
Subject: [PATCH] =?UTF-8?q?=EF=BC=8C=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |  29 ++--
 src/components/BarEchart.vue    |   2 -
 src/components/BarEchart1.vue   |   2 -
 src/components/BarEchartB.vue   |   2 -
 src/components/BarEchartC.vue   |   2 -
 src/components/BarEchartG.vue   |   2 -
 src/components/BarEchartS.vue   |   2 -
 src/components/Flow.vue         |  74 ++++------
 src/components/Header.vue       |   1 -
 src/components/History1.vue     |   3 -
 src/components/History2.vue     |   3 -
 src/components/History3.vue     |   3 -
 src/components/History4.vue     |   3 -
 src/components/History5.vue     |   3 -
 src/components/ImagePreview.vue |   1 -
 src/components/Index.vue        | 236 +++++++++++++++-----------------
 src/components/LineEchart.vue   |   3 -
 src/components/Liquid.vue       |  77 ++++++-----
 src/components/Process.vue      |   1 -
 src/components/Quality.vue      |  49 +++----
 src/components/Zhibiao.vue      |   1 -
 src/components/Zhibiao1.vue     |   4 -
 src/components/Zhibiao3.vue     |   4 -
 src/components/Zhibiao4.vue     |   4 -
 src/components/Zhibiao5.vue     |   1 -
 src/store/index.js              |  39 +++++-
 src/views/History.vue           |   1 -
 src/views/Login.vue             |   1 -
 src/views/page.vue              |   4 +-
 29 files changed, 255 insertions(+), 302 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb80bc7..e582254 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@ import Sidebar from '@/components/Sidebar.vue'
 import { useRouter } from 'vue-router'
 import { pathMap, localGet } from '@/utils';
 import mqtt from 'mqtt/dist/mqtt.min';
+import { useStore } from "vuex";
 export default {
   name: 'App',
   components: {
@@ -32,6 +33,7 @@ export default {
     Sidebar
   },
   setup() {
+    const store = useStore();
     const noMenu = ['/login']
     const router = useRouter();
     const state = reactive({
@@ -70,8 +72,8 @@ export default {
 
     onMounted(() => {
       if (localGet('token')) {
-        state.client = mqtt.connect('ws://www.shikicc.com', {
-          port: 52194,
+        state.client = mqtt.connect('ws://www.shikicc.com:52190/mqtt', {
+          port: 52190,
           clientId: new Date(),
           username: 'hsgy',
           password: "hsgy123",
@@ -86,10 +88,10 @@ export default {
       state.client.on("connect", e => {
         // qos 是通道 一般有 0，1， 2
         const url = `iot/push/plc_01`;
-        this.client.subscribe([url], { qos: 2 }, error => {
+        state.client.subscribe([url], { qos: 2 }, error => {
           if (!error) {
             console.log("消息订阅成功！");
-            this.mqttAll();
+            mqttAll();
           } else {
             console.log("消息订阅失败！");
           }
@@ -100,15 +102,16 @@ export default {
 
     // 接收消息
     const mqttAll = () => {
-      this.client.on("message", (topic, message) => {
-        // var data = JSON.parse(message);
-        console.log(message);
-        // if (data) {
-        //   if (data.topic === `iot/push/plc_01`) {
-        //     var res = data.data;
-        //     return;
-        //   }
-        // }
+      state.client.on("message", (topic, message) => {
+        var data = JSON.parse(message);
+        if (data) {
+          if (data.topic === `iot/push/plc_01`) {
+            var res = data.data;
+            store.commit("setPlcData", res);
+      
+            return;
+          }
+        }
       });
     }
     onUnmounted(() => {
diff --git a/src/components/BarEchart.vue b/src/components/BarEchart.vue
index 0acfecb..f0de1c3 100644
--- a/src/components/BarEchart.vue
+++ b/src/components/BarEchart.vue
@@ -28,7 +28,6 @@ export default {
     });
     onMounted(() => {
       bus.on('foo', e => {
-        console.log(12)
         getEchart();
       })
     })
@@ -61,7 +60,6 @@ export default {
       }
     };
     const loadlineChart = (myChart, data) => {
-      console.log(data);
       var option = {
         grid: {
           left: "8%", //画布左移位置
diff --git a/src/components/BarEchart1.vue b/src/components/BarEchart1.vue
index fd44bcf..b7d10c9 100644
--- a/src/components/BarEchart1.vue
+++ b/src/components/BarEchart1.vue
@@ -27,7 +27,6 @@ export default {
     });
     onMounted(() => {
       bus.on('foo', e => {
-        console.log(e)
         getEchart();
       })
       getEchart();
@@ -142,7 +141,6 @@ export default {
       }
     };
     const loadlineChart = (myChart, data) => {
-      console.log(data);
       var option = {
         grid: {
           left: "8%", //画布左移位置
diff --git a/src/components/BarEchartB.vue b/src/components/BarEchartB.vue
index 6d48dad..ed758c2 100644
--- a/src/components/BarEchartB.vue
+++ b/src/components/BarEchartB.vue
@@ -27,7 +27,6 @@ export default {
     });
     onMounted(() => {
       bus.on('foo', e => {
-        console.log(e)
         getEchart();
       })
       getEchart();
@@ -137,7 +136,6 @@ export default {
       }
     };
     const loadlineChart = (myChart, data) => {
-      console.log(data);
       var option = {
         grid: {
           left: "8%", //画布左移位置
diff --git a/src/components/BarEchartC.vue b/src/components/BarEchartC.vue
index 4b131da..86ae959 100644
--- a/src/components/BarEchartC.vue
+++ b/src/components/BarEchartC.vue
@@ -27,7 +27,6 @@ export default {
     });
     onMounted(() => {
       bus.on('foo', e => {
-        console.log(e)
         getEchart();
       })
       getEchart();
@@ -133,7 +132,6 @@ export default {
       }
     };
     const loadlineChart = (myChart, data) => {
-      console.log(data);
       var option = {
         grid: {
           left: "8%", //画布左移位置
diff --git a/src/components/BarEchartG.vue b/src/components/BarEchartG.vue
index 35c9395..5a27630 100644
--- a/src/components/BarEchartG.vue
+++ b/src/components/BarEchartG.vue
@@ -27,7 +27,6 @@ export default {
     });
     onMounted(() => {
       bus.on('foo', e => {
-        console.log(e)
         getEchart();
       })
       getEchart();
@@ -137,7 +136,6 @@ export default {
       }
     };
     const loadlineChart = (myChart, data) => {
-      console.log(data);
       var option = {
         grid: {
           left: "8%", //画布左移位置
diff --git a/src/components/BarEchartS.vue b/src/components/BarEchartS.vue
index a4523d5..9aa94d2 100644
--- a/src/components/BarEchartS.vue
+++ b/src/components/BarEchartS.vue
@@ -27,7 +27,6 @@ export default {
     });
     onMounted(() => {
       bus.on('foo', e => {
-        console.log(e)
         getEchart();
       })
       getEchart();
@@ -137,7 +136,6 @@ export default {
       }
     };
     const loadlineChart = (myChart, data) => {
-      console.log(data);
       var option = {
         grid: {
           left: "8%", //画布左移位置
diff --git a/src/components/Flow.vue b/src/components/Flow.vue
index 2077c6f..8851b45 100644
--- a/src/components/Flow.vue
+++ b/src/components/Flow.vue
@@ -4,20 +4,12 @@
       <div class="date">
         <Date />
       </div>
-      <div
-        v-for="(item, index) of listData"
-        :key="index"
-        class="echart-content"
-      >
+      <div v-for="(item, index) of listData" :key="index" class="echart-content">
         <BarEchart :echartData="item" />
       </div>
     </div>
     <div class="right-div">
-      <div
-        v-for="(item, index) of dataList"
-        :key="index"
-        :class="'div' + index"
-      >
+      <div v-for="(item, index) of dataList" :key="index" :class="'div' + index">
         <div>{{ item.title }}</div>
         <div v-for="(it, i) of item.data" :key="i">
           <Process :itemData="it"></Process>
@@ -28,12 +20,13 @@
 </template>
 
 <script>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { onMounted, reactive, ref, toRefs,watch } from "vue";
 import { ElMessage } from "element-plus";
 import myApi from "@/api/myApi.js";
 import BarEchart from "./BarEchart.vue";
 import Process from "./Process.vue";
 import Date from "@/components/Date.vue";
+import { useStore } from "vuex";
 export default {
   name: "Flow",
   components: {
@@ -42,6 +35,7 @@ export default {
     Date
   },
   setup() {
+    const store = useStore();
     const state = reactive({
       listData: [
         {
@@ -73,30 +67,6 @@ export default {
           filed: 'VD2766'
         },
       ],
-      baseData: {
-        vd500: 2,
-        vd500Max: 12,
-        vd500Min: 0.8,
-        vd504: 3,
-        vd504Max: 11,
-        vd504Min: 0.4,
-        vd2700: 13.4,
-        vd2716: 12.99,
-        vd2800: 12.3,
-        vd2816: 4.56,
-        vd2850: 12.3,
-        vd2866: 34.5,
-        vd2750: 15.4,
-        vd2766: 7.89,
-        vd2600: 12,
-        vd2610: 3.23,
-        vd2620: 23.4,
-        vd2630: 12.3,
-        vd2500: 12,
-        vd2510: 3.23,
-        vd2520: 23.4,
-        vd2530: 12.3
-      },
       dataList: [
         {
           title: "UF产水瞬时流量:m3/H:",
@@ -196,12 +166,20 @@ export default {
         }
       ],
     });
-    onMounted(async () => {
-      state.dataList.forEach(ele => {
-        ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
-        console.log(ele.data[0].value);
-      })
-    });
+    watch(() => store.state.pclData, val => {
+      if (val) {
+        console.log('flow',val);
+        state.dataList.forEach(ele => {
+          ele.data[0].value = Number(val[ele.data[0].key]).toFixed(2)+'';
+        })
+      }
+    }, { deep: true, immediate: true });
+    // onMounted(async () => {
+    //   state.dataList.forEach(ele => {
+    //     ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+    //     console.log(ele.data[0].value);
+    //   })
+    // });
 
     return {
       ...toRefs(state),
@@ -217,6 +195,7 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 10px;
+
   .left-div {
     width: 75%;
     height: 100%;
@@ -224,20 +203,23 @@ export default {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
+
     .echart-content {
       width: 49%;
       height: 46%;
     }
   }
+
   .right-div {
     width: 22%;
     height: 100%;
   }
+
   .date {
-  width: 100%;
-  display: flex;
-  justify-content: end;
-  height: 3%;
-}
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    height: 3%;
+  }
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 41b9963..90e969f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -66,7 +66,6 @@ export default {
       router.push("/config");
     }
     router.afterEach((to) => {
-      console.log("to", to);
       const { id } = to.query;
       state.name = pathMap[to.name];
       state.modelName = store.state.modelName;
diff --git a/src/components/History1.vue b/src/components/History1.vue
index 0c1c384..80dd34e 100644
--- a/src/components/History1.vue
+++ b/src/components/History1.vue
@@ -204,12 +204,9 @@ export default {
     });
     onMounted(async () => {
       state.value1 = state.fxOptions[0];
-      console.log(123, state.value1)
       state.listData[0].title = state.value1.label;
     });
     const changeValue = (data) => {
-      console.log('data', data);
-      console.log('selectItem', state.value1);
       state.listData[0].title = state.value1.label;
     }
     return {
diff --git a/src/components/History2.vue b/src/components/History2.vue
index 702c6cb..e479ff3 100644
--- a/src/components/History2.vue
+++ b/src/components/History2.vue
@@ -194,12 +194,9 @@ export default {
     });
     onMounted(async () => {
       state.value1 = state.fxOptions[0];
-      console.log(123, state.value1)
       state.listData[0].title = state.value1.label;
     });
     const changeValue = (data) => {
-      console.log('data', data);
-      console.log('selectItem', state.value1);
       state.listData[0].title = state.value1.label;
     }
     return {
diff --git a/src/components/History3.vue b/src/components/History3.vue
index 3edc490..a2a31ec 100644
--- a/src/components/History3.vue
+++ b/src/components/History3.vue
@@ -210,13 +210,10 @@ export default {
     });
     onMounted(async () => {
       state.value1 = state.fxOptions[0];
-      console.log(123, state.value1)
       state.listData[0].title = state.value1.label;
 
     });
     const changeValue = (data) => {
-      console.log('data', data);
-      console.log('selectItem', state.value1);
       state.listData[0].title = state.value1.label;
     }
     return {
diff --git a/src/components/History4.vue b/src/components/History4.vue
index 906f1f2..a49925b 100644
--- a/src/components/History4.vue
+++ b/src/components/History4.vue
@@ -204,12 +204,9 @@ export default {
     });
     onMounted(async () => {
       state.value1 = state.fxOptions[0];
-      console.log(123, state.value1)
       state.listData[0].title = state.value1.label;
     });
     const changeValue = (data) => {
-      console.log('data', data);
-      console.log('selectItem', state.value1);
       state.listData[0].title = state.value1.label;
     }
     return {
diff --git a/src/components/History5.vue b/src/components/History5.vue
index e675859..25b328d 100644
--- a/src/components/History5.vue
+++ b/src/components/History5.vue
@@ -194,12 +194,9 @@ export default {
     });
     onMounted(async () => {
       state.value1 = state.fxOptions[0];
-      console.log(123, state.value1)
       state.listData[0].title = state.value1.label;
     });
     const changeValue = (data) => {
-      console.log('data', data);
-      console.log('selectItem', state.value1);
       state.listData[0].title = state.value1.label;
     }
 
diff --git a/src/components/ImagePreview.vue b/src/components/ImagePreview.vue
index f1f27a7..a728130 100644
--- a/src/components/ImagePreview.vue
+++ b/src/components/ImagePreview.vue
@@ -16,7 +16,6 @@
   
   <script setup>
   import { isExternal } from "@/utils/validate";
-  import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
   
   const props = defineProps({
     src: {
diff --git a/src/components/Index.vue b/src/components/Index.vue
index 25554e6..e0d10e2 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -4,168 +4,156 @@
     <div class="index-right">
       <div class="one-card">
         <div class="one-card-content">
-            <div>
-              <p>节水量</p>
-              <font><span class="font26">4.00</span>m³</font>
-            </div>
-            <div>
-              <p>节碳量</p>
-              <font><span class="font26">0.67</span>kg</font>
-            </div>
-             <div>
-              <p>原水箱液位：<span class="font26">{{ baseData.vd500.toFixed(2) }}</span>m</p>
-              <p>历史最高：<span class="font26">{{ baseData.vd500Max.toFixed(2) }}</span>m</p>
-              <p>历史最低：<span class="font26">{{ baseData.vd500Min.toFixed(2) }}</span>m</p>
-            </div>
-            <div>
-              <p>净水箱液位：<span class="font26">{{ baseData.vd504.toFixed(2) }}</span>m</p>
-              <p>历史最高：<span class="font26">{{ baseData.vd504Max.toFixed(2) }}</span>m</p>
-              <p>历史最低：<span class="font26">{{ baseData.vd504Min.toFixed(2) }}</span>m</p>
-            </div>
-             <div>
-              <p>UF产水</p>
-              <p>瞬时流量：<span class="font26">{{ baseData.vd2700.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">{{ baseData.vd2716.toFixed(2) }}</span>m³</p>
-            </div>
-            <div>
-              <p>自来水前端</p>
-              <p>瞬时流量：<span class="font26">{{ baseData.vd2800.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">{{ baseData.vd2816.toFixed(2) }}</span>m³</p>
-            </div>
-            <div >
-              <p>供水</p>
-              <p>瞬时流量：<span class="font26">{{ baseData.vd2850.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">{{ baseData.vd2866.toFixed(2) }}</span>m³</p>
-            </div>
-            <div >
-              <p>自来水后端</p>
-              <p>瞬时流量：<span class="font26">{{ baseData.vd2750.toFixed(2) }}</span> m³/H</p>
-              <p>累计流量：<span class="font26">{{ baseData.vd2766.toFixed(2) }}</span>m³</p>
-            </div>
-            <div>
-              <p>原水水质</p>
-              <p>余氯：<span class="font26">{{ baseData.vd2600.toFixed(2) }}</span> mg/L</p>
-              <p>浊度：<span class="font26">{{ baseData.vd2610.toFixed(2) }}</span> mg/L</p>
-              <p>氨氮：<span class="font26">{{ baseData.vd2620.toFixed(2) }}</span> mg/L</p>
-              <p>COD：<span class="font26">{{ baseData.vd2630.toFixed(2) }}</span> mg/L</p>
-            </div>
-            <div>
-              <p>净水水质</p>
-              <p>余氯：<span class="font26">{{ baseData.vd2500.toFixed(2) }}</span> mg/L</p>
-              <p>浊度：<span class="font26">{{ baseData.vd2510.toFixed(2) }}</span> mg/L</p>
-              <p>氨氮：<span class="font26">{{ baseData.vd2520.toFixed(2) }}</span> mg/L</p>
-              <p>COD：<span class="font26">{{ baseData.vd2530.toFixed(2) }}</span> mg/L</p>
-            </div>
+          <div>
+            <p>节水量</p>
+            <font><span class="font26">4.00</span>m³</font>
           </div>
-        
+          <div>
+            <p>节碳量</p>
+            <font><span class="font26">0.67</span>kg</font>
+          </div>
+          <div>
+            <p>原水箱液位：<span class="font26">{{ baseData && baseData.vd500.toFixed(2) }}</span>m</p>
+            <p>历史最高：<span class="font26">{{ baseData && baseData.vd500Max.toFixed(2) }}</span>m</p>
+            <p>历史最低：<span class="font26">{{ baseData && baseData.vd500Min.toFixed(2) }}</span>m</p>
+          </div>
+          <div>
+            <p>净水箱液位：<span class="font26">{{ baseData && baseData.vd504.toFixed(2) }}</span>m</p>
+            <p>历史最高：<span class="font26">{{ baseData && baseData.vd504Max.toFixed(2) }}</span>m</p>
+            <p>历史最低：<span class="font26">{{ baseData && baseData.vd504Min.toFixed(2) }}</span>m</p>
+          </div>
+          <div>
+            <p>UF产水</p>
+            <p>瞬时流量：<span class="font26">{{ baseData && baseData.vd2700.toFixed(2) }}</span> m³/H</p>
+            <p>累计流量：<span class="font26">{{ baseData && baseData.vd2716.toFixed(2) }}</span>m³</p>
+          </div>
+          <div>
+            <p>自来水前端</p>
+            <p>瞬时流量：<span class="font26">{{ baseData && baseData.vd2800.toFixed(2) }}</span> m³/H</p>
+            <p>累计流量：<span class="font26">{{ baseData && baseData.vd2816.toFixed(2) }}</span>m³</p>
+          </div>
+          <div>
+            <p>供水</p>
+            <p>瞬时流量：<span class="font26">{{ baseData && baseData.vd2850.toFixed(2) }}</span> m³/H</p>
+            <p>累计流量：<span class="font26">{{ baseData && baseData.vd2866.toFixed(2) }}</span>m³</p>
+          </div>
+          <div>
+            <p>自来水后端</p>
+            <p>瞬时流量：<span class="font26">{{ baseData && baseData.vd2750.toFixed(2) }}</span> m³/H</p>
+            <p>累计流量：<span class="font26">{{ baseData && baseData.vd2766.toFixed(2) }}</span>m³</p>
+          </div>
+          <div>
+            <p>原水水质</p>
+            <p>余氯：<span class="font26">{{ baseData && baseData.vd2600.toFixed(2) }}</span> mg/L</p>
+            <p>浊度：<span class="font26">{{ baseData && baseData.vd2610.toFixed(2) }}</span> mg/L</p>
+            <p>氨氮：<span class="font26">{{ baseData && baseData.vd2620.toFixed(2) }}</span> mg/L</p>
+            <p>COD：<span class="font26">{{ baseData && baseData.vd2630.toFixed(2) }}</span> mg/L</p>
+          </div>
+          <div>
+            <p>净水水质</p>
+            <p>余氯：<span class="font26">{{ baseData && baseData.vd2500.toFixed(2) }}</span> mg/L</p>
+            <p>浊度：<span class="font26">{{ baseData && baseData.vd2510.toFixed(2) }}</span> mg/L</p>
+            <p>氨氮：<span class="font26">{{ baseData && baseData.vd2520.toFixed(2) }}</span> mg/L</p>
+            <p>COD：<span class="font26">{{ baseData && baseData.vd2530.toFixed(2) }}</span> mg/L</p>
+          </div>
+        </div>
+
       </div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import Menus from "@/components/Menus.vue";
-import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+import { onMounted, reactive, ref, toRefs, computed } from "vue";
 import myApi from "@/api/myApi.js";
+import { useStore } from "vuex";
 export default {
   name: "index",
   components: {
     Menus,
   },
   setup() {
+    const store = useStore();
     const state = reactive({
-      baseData: {
-        vd500: 2,
-        vd500Max: 12,
-        vd500Min: 0.8,
-        vd504: 3,
-        vd504Max: 11,
-        vd504Min: 0.4,
-        vd2700: 13.4,
-        vd2716: 12.99,
-        vd2800: 12.3,
-        vd2816: 4.56,
-        vd2850: 12.3,
-        vd2866: 34.5,
-        vd2750: 15.4,
-        vd2766: 7.89,
-        vd2600: 12,
-        vd2610: 3.23,
-        vd2620: 23.4,
-        vd2630: 12.3,
-        vd2500: 12,
-        vd2510: 3.23,
-        vd2520: 23.4,
-        vd2530: 12.3
-      }
+
     });
-    onMounted(() => {
-      getBaseInfo();
-    })
-    const getBaseInfo = async () => {
-      const res = await myApi.getBaseInfo();
-      state.baseData = res.data;
-    }
+    const baseData = computed(() =>
+      store.state.pclData
+    );
+    // onMounted(() => {
+    //   getBaseInfo();
+    // })
+    // const getBaseInfo = async () => {
+    //   const res = await myApi.getBaseInfo();
+    //   state.baseData = res.data;
+    // }
     return {
-      ...toRefs(state)
+      ...toRefs(state),
+      baseData
     };
   },
 };
 </script>
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .mt10 {
   margin-top: 10px;
 }
+
 .index {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-between;
+
   .index-left {
     width: 69%;
     border: 1px solid rgb(179, 174, 174);
   }
+
   .index-right {
     width: 30%;
     display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-        .one-card {
-          width: 100%;
-          height: 100%;
-          box-shadow: 0 0 8px #99ACB0 inset;
-          
-          h2 {
-            padding: 20px;
-            text-align: center;
-          }
-          .one-card-content {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
 
-            >div {
-              width: 46%;
-              // height: 22%;
-              border: 1px solid rgb(197, 195, 195);
-              display: flex;
-              flex-direction: column;
-              background:#3CB6CC;
-              // align-items: center;
-              justify-content: center;
-              text-align: center;
-              padding: 10px;
-              border-radius: 10px;
-              font-size: 20px;
-              line-height: 40px;
-              margin: 10px 0;
-              color: #fff;
-            }
-          }
+    .one-card {
+      width: 100%;
+      height: 100%;
+      box-shadow: 0 0 8px #99ACB0 inset;
+
+      h2 {
+        padding: 20px;
+        text-align: center;
+      }
+
+      .one-card-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+
+        >div {
+          width: 46%;
+          // height: 22%;
+          border: 1px solid rgb(197, 195, 195);
+          display: flex;
+          flex-direction: column;
+          background: #3CB6CC;
+          // align-items: center;
+          justify-content: center;
+          text-align: center;
+          padding: 10px;
+          border-radius: 10px;
+          font-size: 20px;
+          line-height: 40px;
+          margin: 10px 0;
+          color: #fff;
         }
+      }
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/LineEchart.vue b/src/components/LineEchart.vue
index 7e49bd7..22071b6 100644
--- a/src/components/LineEchart.vue
+++ b/src/components/LineEchart.vue
@@ -58,9 +58,6 @@ export default {
       }
     };
     const loadlineChart = (myChart, data) => {
-      console.log(store.state.selectTab );
-      console.log(store.state.selectDate );
-      console.log(data );
       var option = {
         legend: {
           data: data.legend,
diff --git a/src/components/Liquid.vue b/src/components/Liquid.vue
index 14762d7..1e7b2c9 100644
--- a/src/components/Liquid.vue
+++ b/src/components/Liquid.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { nextTick, onMounted, reactive, ref, toRefs } from "vue";
+import { nextTick, onMounted, reactive, ref, toRefs,watch  } from "vue";
 import { ElMessage } from "element-plus";
 import BarEchart from "./BarEchart.vue";
 import Process from "./Process.vue";
@@ -46,30 +46,30 @@ export default {
   setup() {
     const store = useStore();
     const state = reactive({
-      baseData: {
-        vd500: 2,
-        vd500Max: 12,
-        vd500Min: 0.8,
-        vd504: 3,
-        vd504Max: 11,
-        vd504Min: 0.4,
-        vd2700: 13.4,
-        vd2716: 12.99,
-        vd2800: 12.3,
-        vd2816: 4.56,
-        vd2850: 12.3,
-        vd2866: 34.5,
-        vd2750: 15.4,
-        vd2766: 7.89,
-        vd2600: 12,
-        vd2610: 3.23,
-        vd2620: 23.4,
-        vd2630: 12.3,
-        vd2500: 12,
-        vd2510: 3.23,
-        vd2520: 23.4,
-        vd2530: 12.3
-      },
+      // baseData: {
+      //   vd500: 2,
+      //   vd500Max: 12,
+      //   vd500Min: 0.8,
+      //   vd504: 3,
+      //   vd504Max: 11,
+      //   vd504Min: 0.4,
+      //   vd2700: 13.4,
+      //   vd2716: 12.99,
+      //   vd2800: 12.3,
+      //   vd2816: 4.56,
+      //   vd2850: 12.3,
+      //   vd2866: 34.5,
+      //   vd2750: 15.4,
+      //   vd2766: 7.89,
+      //   vd2600: 12,
+      //   vd2610: 3.23,
+      //   vd2620: 23.4,
+      //   vd2630: 12.3,
+      //   vd2500: 12,
+      //   vd2510: 3.23,
+      //   vd2520: 23.4,
+      //   vd2530: 12.3
+      // },
       listData: [
         {
           id: "echart0",
@@ -163,14 +163,25 @@ export default {
         }
       ],
     });
-    onMounted(() => {
-      state.olddataList.forEach(ele => {
-        ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
-      })
-      state.puredataList.forEach(ele => {
-        ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
-      })
-    })
+    watch(() => store.state.pclData, val => {
+      if (val) {
+        console.log('liquid', val);
+        state.olddataList.forEach(ele => {
+          ele.data[0].value = Number(val[ele.data[0].key]).toFixed(2)+'';
+        })
+        state.puredataList.forEach(ele => {
+          ele.data[0].value = Number(val[ele.data[0].key]).toFixed(2)+'';
+        })
+      }
+    }, { deep: true, immediate: true });
+    // onMounted(() => {
+    //   state.olddataList.forEach(ele => {
+    //     ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+    //   })
+    //   state.puredataList.forEach(ele => {
+    //     ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+    //   })
+    // })
     return {
       ...toRefs(state),
     };
diff --git a/src/components/Process.vue b/src/components/Process.vue
index 745f21c..c4713c6 100644
--- a/src/components/Process.vue
+++ b/src/components/Process.vue
@@ -41,7 +41,6 @@ export default {
       }
     };
     const loadProcessChart = (myChart, data) => {
-      console.log(123, myChart);
       var option = {
         grid: {
           top: "0",
diff --git a/src/components/Quality.vue b/src/components/Quality.vue
index 8ed26f2..fe4aae1 100644
--- a/src/components/Quality.vue
+++ b/src/components/Quality.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
+import { onMounted, reactive, toRefs, ref, watch  } from "vue";
 import LineEchart from "@/components/LineEchart.vue";
 import Process from "@/components/Process.vue";
 import Date from "@/components/Date.vue";
@@ -45,30 +45,7 @@ export default {
     const refSon = ref(null);
     const store = useStore();
     const state = reactive({
-      baseData: {
-        vd500: 2,
-        vd500Max: 12,
-        vd500Min: 0.8,
-        vd504: 3,
-        vd504Max: 11,
-        vd504Min: 0.4,
-        vd2700: 13.4,
-        vd2716: 12.99,
-        vd2800: 12.3,
-        vd2816: 4.56,
-        vd2850: 12.3,
-        vd2866: 34.5,
-        vd2750: 15.4,
-        vd2766: 7.89,
-        vd2600: 15,
-        vd2610: 13.23,
-        vd2620: 43.4,
-        vd2630: 62.3,
-        vd2500: 12,
-        vd2510: 3.23,
-        vd2520: 23.4,
-        vd2530: 12.3
-      },
+      baseData: {},
       listData: [
         {
           id: "echart0",
@@ -151,11 +128,22 @@ export default {
       ],
       activeName: 'old'
     });
+    watch(() => store.state.pclData, val => {
+      if (val) {
+        console.log('quality', val);
+        state.baseData = val;
+        state.dataList.forEach(ele => {
+          ele.data[0].value = store.state.selectTab == 'old'
+            ? Number(val[ele.data[0].key]).toFixed(2) + ''
+            : Number(val[ele.data[0].key1]).toFixed(2) + '';
+        })
+      }
+    }, { deep: true, immediate: true });
     onMounted(() => {
       store.commit("changeSelectTab", "old");
       state.dataList.forEach(ele => {
-          ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
-        })
+        ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
+      })
     });
     const handleClick = (tab) => {
       if (tab.props.name == 'old') {
@@ -173,11 +161,10 @@ export default {
         state.listData[2].filed = 'VD2520';
         state.listData[3].filed = 'VD2530';
 
-        state.dataList.forEach(ele => {
-          ele.data[0].value = Number(state.baseData[ele.data[0].key1]).toFixed(2);
-        })
+        // state.dataList.forEach(ele => {
+        //   ele.data[0].value = Number(state.baseData[ele.data[0].key1]).toFixed(2);
+        // })
       }
-      console.log(tab.props.name);
       store.commit("changeSelectTab", tab.props.name);
       bus.emit('foo');
     };
diff --git a/src/components/Zhibiao.vue b/src/components/Zhibiao.vue
index 4228d7c..8c65d21 100644
--- a/src/components/Zhibiao.vue
+++ b/src/components/Zhibiao.vue
@@ -33,7 +33,6 @@ export default {
      });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
         title: {
diff --git a/src/components/Zhibiao1.vue b/src/components/Zhibiao1.vue
index 456879f..f976167 100644
--- a/src/components/Zhibiao1.vue
+++ b/src/components/Zhibiao1.vue
@@ -40,7 +40,6 @@ export default {
     });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
         title: {
@@ -212,7 +211,6 @@ export default {
     };
     const getChartsZf2 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
@@ -334,7 +332,6 @@ export default {
     };
     const getChartsZf3 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
@@ -455,7 +452,6 @@ export default {
     };
     const getChartsZf4 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
diff --git a/src/components/Zhibiao3.vue b/src/components/Zhibiao3.vue
index 10bfecc..a47f65a 100644
--- a/src/components/Zhibiao3.vue
+++ b/src/components/Zhibiao3.vue
@@ -46,7 +46,6 @@ export default {
     });
     const getChartsZfl = (id, text, num, color) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         color: ["#80FFA5"],
         title: {
@@ -134,7 +133,6 @@ export default {
     };
     const getChartsZf2 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
@@ -256,7 +254,6 @@ export default {
     };
     const getChartsZf3 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
@@ -377,7 +374,6 @@ export default {
     };
     const getChartsZf4 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
diff --git a/src/components/Zhibiao4.vue b/src/components/Zhibiao4.vue
index df69f91..e3b661f 100644
--- a/src/components/Zhibiao4.vue
+++ b/src/components/Zhibiao4.vue
@@ -43,7 +43,6 @@ export default {
      });
     const getChartsZfl = (id, text, num, color) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         color: ["#80FFA5"],
         title: {
@@ -131,7 +130,6 @@ export default {
     };
     const getChartsZf2 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
@@ -253,7 +251,6 @@ export default {
     };
     const getChartsZf3 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
@@ -374,7 +371,6 @@ export default {
     };
     const getChartsZf4 = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         title: {
           text: text,
diff --git a/src/components/Zhibiao5.vue b/src/components/Zhibiao5.vue
index 4228d7c..8c65d21 100644
--- a/src/components/Zhibiao5.vue
+++ b/src/components/Zhibiao5.vue
@@ -33,7 +33,6 @@ export default {
      });
     const getChartsZfl = (id, text) => {
       var dom = document.getElementById(id);
-      console.log(dom);
       var op = {
         color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
         title: {
diff --git a/src/store/index.js b/src/store/index.js
index 8ce27fe..1588426 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,4 +1,6 @@
-import { createStore } from "vuex"
+import {
+    createStore
+} from "vuex"
 // 引入持久化
 import createPersistedState from 'vuex-persistedstate';
 
@@ -8,7 +10,31 @@ const store = createStore({
         userInfo: {},
         selectDate: 0,
         selectTab: 'old',
-        modelName: ''
+        modelName: '',
+        pclData: {
+            vd500: 2,
+            vd500Max: 12,
+            vd500Min: 0.8,
+            vd504: 3,
+            vd504Max: 11,
+            vd504Min: 0.4,
+            vd2700: 13.4,
+            vd2716: 12.99,
+            vd2800: 12.3,
+            vd2816: 4.56,
+            vd2850: 12.3,
+            vd2866: 34.5,
+            vd2750: 15.4,
+            vd2766: 7.89,
+            vd2600: 12,
+            vd2610: 3.23,
+            vd2620: 23.4,
+            vd2630: 12.3,
+            vd2500: 12,
+            vd2510: 3.23,
+            vd2520: 23.4,
+            vd2530: 12.3
+        }
     },
     mutations: {
         updateCurrentPath(state, path) {
@@ -25,10 +51,15 @@ const store = createStore({
         },
         setModelName(state, data) {
             state.modelName = data;
+        },
+        setPlcData(state, data) {
+            state.pclData = data;
         }
     },
     actions: {
-        updateCurrentPath({ commit }, path) {
+        updateCurrentPath({
+            commit
+        }, path) {
             commit('updateCurrentPath', path)
         }
     },
@@ -40,7 +71,7 @@ const store = createStore({
     },
     plugins: [
         createPersistedState({
-            key: 'vuex', 
+            key: 'vuex',
             storage: window.localStorage
         })
     ]
diff --git a/src/views/History.vue b/src/views/History.vue
index a93fac3..d8ec887 100644
--- a/src/views/History.vue
+++ b/src/views/History.vue
@@ -31,7 +31,6 @@
       onMounted(() => {
       });
       const showContent = (i) => {
-        console.log(i)
         state.activeindex = i;
       }
       return {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index a76e59b..cdffc21 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -72,7 +72,6 @@ export default {
           localSet("token", "token");
           window.location.href = "/";
         } else {
-          console.log("error submit!!");
           return false;
         }
       });
diff --git a/src/views/page.vue b/src/views/page.vue
index e5522c7..cad75c2 100644
--- a/src/views/page.vue
+++ b/src/views/page.vue
@@ -18,8 +18,8 @@ import Index from "@/components/Index.vue";
 import Liquid from "@/components/Liquid.vue";
 import Quality from "@/components/Quality.vue";
 import Flow from "@/components/Flow.vue";
-import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
-import bus from '../utils/bus.js'
+import { onMounted, reactive, ref, toRefs, nextTick, computed } from "vue";
+import bus from '../utils/bus.js';
 export default {
   name: 'cl-hy',
   components: {