store

src/components/SealTest.vue

@@ -14,18 +14,23 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import SealPng from '@/assets/img/seal/seal.png'
 import StartAir from '@/assets/img/seal/start.png'
 import StopAir from '@/assets/img/seal/stop.png'
 import DisStart from '@/assets/img/seal/dis_start.png'
 import DisStop from '@/assets/img/seal/dis_stop.png'
+import { useSealStore } from '@/store'
+
+const sealStore = useSealStore()
 
 const sealCharts = ref(null)
 const sealOptions = ref({
   series: [
     {
       type: 'gauge',
+      min: 0,
+      max: 800,
       progress: {
         show: true,
         width: 18,
@@ -79,16 +84,87 @@ const sealOptions = ref({
       },
       data: [
         {
-          value: 68,
+          value: sealStore.currentAirPressure,
         },
       ],
     },
   ],
 })
 
+const timer = ref(null)
+onBeforeUnmount(() => {
+  timer.value = null
+})
 onMounted(() => {
   sealCharts.value = echarts.init(document.getElementById('seal_echarts'))
   sealCharts.value.setOption(sealOptions.value)
+  timer.value = setInterval(() => {
+    sealCharts.value.setOption({
+      series: [
+        {
+          type: 'gauge',
+          min: 0,
+          max: 800,
+          progress: {
+            show: true,
+            width: 18,
+            itemStyle: {
+              color: '#3442aa',
+            },
+          },
+          pointer: {
+            itemStyle: {
+              color: '#3442aa',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              width: 18,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            length: 15,
+            lineStyle: {
+              width: 2,
+              color: '#999',
+            },
+          },
+          axisLabel: {
+            distance: 25,
+            color: '#999',
+            fontSize: 20,
+          },
+          anchor: {
+            show: true,
+            showAbove: true,
+            size: 25,
+            itemStyle: {
+              borderWidth: 10,
+              borderColor: '#3442aa',
+            },
+          },
+          title: {
+            show: false,
+          },
+          detail: {
+            valueAnimation: true,
+            fontSize: 40,
+            color: '#3442aa',
+            formatter: '{value} KPa',
+            offsetCenter: [0, '70%'],
+          },
+          data: [
+            {
+              value: sealStore.currentAirPressure,
+            },
+          ],
+        },
+      ],
+    })
+  }, 1000)
 })
 </script>
 

src/store/index.js

@@ -11,6 +11,7 @@ import { useAuditStore } from './modules/audit'
 import { useFormulaStore } from './modules/formula'
 import { useRunningStore } from './modules/running'
 import { useHistoryStore } from './modules/history'
+import { useSealStore } from './modules/seal'
 const store = createPinia()
 
 export default store
@@ -19,6 +20,7 @@ export {
   useFormulaStore,
   useAuditStore,
   useRunningStore,
+  useSealStore,
   useSettingStore,
   useOperatorStore,
   useHistoryStore,

src/store/modules/seal.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+export const useSealStore = defineStore({
+  id: 'seal', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      // 0~800kPa
+      currentAirPressure: 0,
+    }
+  },
+  // actions
+  actions: {
+    updateCurrentAirPressure(currentAirPressure) {
+      this.currentAirPressure = currentAirPressure
+    },
+  },
+})