首页的数据

src/components/Operator.vue

@@ -6,13 +6,13 @@
           <DisinfectantLiquidInfo />
         </div>
         <div class="card">
-          <EnvironmentInfo />
+          <EnvironmentInfo :cardType="1" />
         </div>
         <div class="card">
-          <EnvironmentInfo />
+          <EnvironmentInfo :cardType="2" />
         </div>
         <div class="card">
-          <EnvironmentInfo />
+          <EnvironmentInfo :cardType="3" />
         </div>
       </div>
       <div class="warn_wrap">

src/components/info/DisinfectantLiquidInfo.vue

@@ -24,16 +24,23 @@
         <div
           class="pro"
           :style="{
-            '--height': '50px',
+            '--height': `${(disinfectantCapacity / 500) * 100}px`,
           }"
         ></div>
       </div>
     </div>
-    <div class="bottom">500 (g)</div>
+    <div class="bottom">{{ disinfectantCapacity }} (g)</div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useDeviceStore } from '@/store'
+import { storeToRefs } from 'pinia'
+
+const deviceStore = useDeviceStore()
+
+const { disinfectantCapacity } = storeToRefs(deviceStore)
+</script>
 
 <style lang="scss" scoped>
 .disinfectant_liquid_container {

src/components/info/EnvironmentInfo.vue

@@ -18,26 +18,98 @@
           />
         </g>
       </svg>
-      <p class="title">仓内</p>
+      <p class="title">{{ getTitle() }}</p>
     </div>
     <div class="content">
       <div class="line">
-        <p class="title">仓内温度</p>
-        <p class="num">000℃</p>
+        <p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}温度</p>
+        <p class="num">{{ getTemperature() }}℃</p>
       </div>
       <div class="line">
-        <p class="title">仓内湿度</p>
-        <p class="num">000℃</p>
+        <p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}湿度</p>
+        <p class="num">{{ getHumidity() }}℃</p>
       </div>
       <div class="line">
-        <p class="title">仓内过氧化氢浓度</p>
-        <p class="num">1000 PPM</p>
+        <p class="title">
+          {{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢浓度
+        </p>
+        <p class="num">{{ getHP() }} PPM</p>
       </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useDeviceStore } from '@/store'
+import { storeToRefs } from 'pinia'
+
+const deviceStore = useDeviceStore()
+const {
+  binTemperature,
+  binHumidity,
+  binHP,
+  envirTemperature1,
+  envirHumidity1,
+  envirHP1,
+  envirTemperature2,
+  envirHumidity2,
+  envirHP2,
+} = storeToRefs(deviceStore)
+const props = defineProps({
+  cardType: {
+    type: Number,
+  },
+})
+
+const getTitle = () => {
+  if (props.cardType == 1) {
+    return '仓内'
+  }
+  if (props.cardType == 2) {
+    return '环境1'
+  }
+  if (props.cardType == 3) {
+    return '环境2'
+  }
+  return ''
+}
+
+const getTemperature = () => {
+  if (props.cardType == 1) {
+    return binTemperature
+  }
+  if (props.cardType == 2) {
+    return envirTemperature1
+  }
+  if (props.cardType == 3) {
+    return envirTemperature2
+  }
+}
+
+const getHumidity = () => {
+  if (props.cardType == 1) {
+    return binHumidity
+  }
+  if (props.cardType == 2) {
+    return envirHumidity1
+  }
+  if (props.cardType == 3) {
+    return envirHumidity2
+  }
+}
+
+const getHP = () => {
+  if (props.cardType == 1) {
+    return binHP
+  }
+  if (props.cardType == 2) {
+    return envirHP1
+  }
+  if (props.cardType == 3) {
+    return envirHP2
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .environment_container {

src/store/index.js

@@ -3,7 +3,14 @@ import { useTestStore } from './modules/test'
 import { useSettingStore } from './modules/setting'
 import { useOperatorStore } from './modules/operator'
 import { useWebSocketStore } from './modules/websocket'
+import { useDeviceStore } from './modules/device'
 const store = createPinia()
 
 export default store
-export { useTestStore, useSettingStore, useOperatorStore, useWebSocketStore }
+export {
+  useTestStore,
+  useSettingStore,
+  useOperatorStore,
+  useWebSocketStore,
+  useDeviceStore,
+}

src/store/modules/device.js

@@ -0,0 +1,63 @@
+// 设备各个部位状态信息
+import { defineStore } from 'pinia'
+export const useDeviceStore = defineStore({
+  id: 'device', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      // 消毒液容量
+      disinfectantCapacity: 0,
+      // 仓内温度
+      binTemperature: 0,
+      // 仓内湿度
+      binHumidity: 0,
+      // 仓内过氧化氢浓度
+      binHP: 0,
+      // 环境一 温度
+      envirTemperature1: 0,
+      // 环境一 湿度
+      envirHumidity1: 0,
+      // 环境一 过氧化氢浓度
+      envirHP1: 0,
+      // 环境二 温度
+      envirTemperature2: 0,
+      // 环境二 湿度
+      envirHumidity2: 0,
+      // 环境二 过氧化氢浓度
+      envirHP2: 0,
+    }
+  },
+  // actions
+  actions: {
+    updateDisinfectantCapacity(disinfectantCapacity) {
+      this.disinfectantCapacity = disinfectantCapacity
+    },
+    updateBinTemperature(binTemperature) {
+      this.binTemperature = binTemperature
+    },
+    updateBinHumidity(binHumidity) {
+      this.binHumidity = binHumidity
+    },
+    updateBinHP(binHP) {
+      this.binHP = binHP
+    },
+    updateEnvirTemperature1(envirTemperature1) {
+      this.envirTemperature1 = envirTemperature1
+    },
+    updateEnvirHumidity1(envirHumidity1) {
+      this.envirHumidity1 = envirHumidity1
+    },
+    updateEnvirHP1(envirHP1) {
+      this.envirHP1 = envirHP1
+    },
+    updateEnvirTemperature2(envirTemperature2) {
+      this.envirTemperature2 = envirTemperature2
+    },
+    updateEnvirHumidity2(envirHumidity2) {
+      this.envirHumidity2 = envirHumidity2
+    },
+    updateEnvirHP2(envirHP2) {
+      this.envirHP2 = envirHP2
+    },
+  },
+})