echarts

src/components/Progress.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script setup>
-import { useOperatorStore, useWebSocketStore } from '@/store'
+import { useOperatorStore, useWebSocketStore, useEchartsStore } from '@/store'
 import {
   stopDisinfectionJSON,
   getStateJSON,
@@ -82,8 +82,14 @@ import {
 } from '@/mock/command'
 import { onMounted, onUnmounted, ref } from 'vue'
 import * as echarts from 'echarts'
+import { storeToRefs } from 'pinia'
+
+const echartsStore = useEchartsStore()
 
 const binOption = ref({
+  tooltip: {
+    trigger: 'axis',
+  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -96,7 +102,7 @@ const binOption = ref({
   xAxis: {
     type: 'category',
     boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    data: Object.keys(echartsStore.binCharts),
   },
   yAxis: {
     type: 'value',
@@ -106,23 +112,26 @@ const binOption = ref({
       name: '温度',
       type: 'line',
       stack: 'Total',
-      data: [120, 132, 101, 134, 90, 230, 210],
+      data: echartsStore.binTemp,
     },
     {
       name: '湿度',
       type: 'line',
       stack: 'Total',
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: echartsStore.binHumidity,
     },
     {
       name: '过氧化氢浓度',
       type: 'line',
       stack: 'Total',
-      data: [150, 232, 201, 154, 190, 330, 410],
+      data: echartsStore.binHP,
     },
   ],
 })
 const envir1Option = ref({
+  tooltip: {
+    trigger: 'axis',
+  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -135,7 +144,7 @@ const envir1Option = ref({
   xAxis: {
     type: 'category',
     boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    data: Object.keys(echartsStore.envir1Charts),
   },
   yAxis: {
     type: 'value',
@@ -145,23 +154,26 @@ const envir1Option = ref({
       name: '温度',
       type: 'line',
       stack: 'Total',
-      data: [120, 132, 101, 134, 90, 230, 210],
+      data: echartsStore.envir1Temp,
     },
     {
       name: '湿度',
       type: 'line',
       stack: 'Total',
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: echartsStore.envir1Humidity,
     },
     {
       name: '过氧化氢浓度',
       type: 'line',
       stack: 'Total',
-      data: [150, 232, 201, 154, 190, 330, 410],
+      data: echartsStore.envir1HP,
     },
   ],
 })
 const envir2Option = ref({
+  tooltip: {
+    trigger: 'axis',
+  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -174,7 +186,7 @@ const envir2Option = ref({
   xAxis: {
     type: 'category',
     boundaryGap: false,
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    data: Object.keys(echartsStore.envir2Charts),
   },
   yAxis: {
     type: 'value',
@@ -184,19 +196,19 @@ const envir2Option = ref({
       name: '温度',
       type: 'line',
       stack: 'Total',
-      data: [120, 132, 101, 134, 90, 230, 210],
+      data: echartsStore.envir2Temp,
     },
     {
       name: '湿度',
       type: 'line',
       stack: 'Total',
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: echartsStore.envir2Humidity,
     },
     {
       name: '过氧化氢浓度',
       type: 'line',
       stack: 'Total',
-      data: [150, 232, 201, 154, 190, 330, 410],
+      data: echartsStore.envir2HP,
     },
   ],
 })

src/store/index.js

@@ -5,6 +5,7 @@ import { useOperatorStore } from './modules/operator'
 import { useWebSocketStore } from './modules/websocket'
 import { useDeviceStore } from './modules/device'
 import { useUserStore } from './modules/user'
+import { useEchartsStore } from './modules/echarts'
 const store = createPinia()
 
 export default store
@@ -14,5 +15,6 @@ export {
   useOperatorStore,
   useWebSocketStore,
   useDeviceStore,
+  useEchartsStore,
   useUserStore,
 }

src/store/modules/echarts.js

@@ -0,0 +1,89 @@
+import { defineStore } from 'pinia'
+export const useEchartsStore = defineStore({
+  id: 'echarts', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      binCharts: {},
+      envir1Charts: {},
+      envir2Charts: {},
+    }
+  },
+  // actions
+  actions: {
+    updateBinCharts(binCharts) {
+      this.binCharts = binCharts
+    },
+    updateEnvir1Charts(envir1Charts) {
+      this.envir1Charts = envir1Charts
+    },
+    updateEnvir2Charts(envir2Charts) {
+      this.envir2Charts = envir2Charts
+    },
+  },
+  getters: {
+    binTemp(state) {
+      let arr = []
+      Object.values(state.binCharts).map(item => {
+        arr.push(item[0])
+      })
+      return arr
+    },
+    binHumidity(state) {
+      let arr = []
+      Object.values(state.binCharts).map(item => {
+        arr.push(item[1])
+      })
+      return arr
+    },
+    binHP(state) {
+      let arr = []
+      Object.values(state.binCharts).map(item => {
+        arr.push(item[2])
+      })
+      return arr
+    },
+    envir1Temp(state) {
+      let arr = []
+      Object.values(state.envir1Charts).map(item => {
+        arr.push(item[0])
+      })
+      return arr
+    },
+    envir1Humidity(state) {
+      let arr = []
+      Object.values(state.envir1Charts).map(item => {
+        arr.push(item[1])
+      })
+      return arr
+    },
+    envir1HP(state) {
+      let arr = []
+      Object.values(state.envir1Charts).map(item => {
+        arr.push(item[2])
+      })
+      return arr
+    },
+    envir2Temp(state) {
+      let arr = []
+      Object.values(state.envir2Charts).map(item => {
+        arr.push(item[0])
+      })
+      return arr
+    },
+    envir2Humidity(state) {
+      let arr = []
+      Object.values(state.envir2Charts).map(item => {
+        arr.push(item[1])
+      })
+      return arr
+    },
+    envir2HP(state) {
+      let arr = []
+      Object.values(state.envir2Charts).map(item => {
+        arr.push(item[2])
+      })
+      return arr
+    },
+  },
+})

src/store/modules/websocket.js

@@ -6,6 +6,7 @@ import { useUserStore } from './user'
 import { useOperatorStore } from './operator'
 import { useDeviceStore } from './device'
 import { useTestStore } from './test'
+import { useEchartsStore } from './echarts'
 import { showSuccessToast, showFailToast } from 'vant'
 import { saveEchartsDataToLocal } from '@/utils'
 
@@ -144,6 +145,7 @@ export const useWebSocketStore = defineStore({
       const testStore = useTestStore()
       const settingStore = useSettingStore()
       const operatorStore = useOperatorStore()
+      const echartsStore = useEchartsStore()
       init.ws.onmessage = function (ev) {
         // console.log(JSON.parse(ev.data))
         const { command, timeStamp } = JSON.parse(ev.data)
@@ -202,7 +204,15 @@ export const useWebSocketStore = defineStore({
               [temp_2, humid_2, h2o2_2],
               [temp_3, humid_3, h2o2_3],
             )
-
+            echartsStore.updateBinCharts(
+              JSON.parse(localStorage.getItem('bin')),
+            )
+            echartsStore.updateEnvir1Charts(
+              JSON.parse(localStorage.getItem('envir1')),
+            )
+            echartsStore.updateEnvir2Charts(
+              JSON.parse(localStorage.getItem('envir2')),
+            )
             break
           default:
             break