Browse Source

四行数据

master
maochaoying 2 years ago
parent
commit
46bb643793
  1. 8
      .env
  2. 24
      src/components/Progress.vue
  3. 25
      src/components/info/EnvironmentInfo.vue
  4. 9
      src/store/modules/device.js
  5. 7
      src/store/modules/echarts.js
  6. 16
      src/store/modules/websocket.js

8
.env

@ -1,5 +1,5 @@
# VITE_BASE_WS1_URL=ws://192.168.8.10:19001/
# VITE_BASE_WS2_URL=ws://192.168.8.10:19002/
VITE_BASE_WS1_URL=ws://192.168.8.10:19001/
VITE_BASE_WS2_URL=ws://192.168.8.10:19002/
VITE_BASE_WS1_URL=ws://127.0.0.1:19001/
VITE_BASE_WS2_URL=ws://127.0.0.1:19002/
# VITE_BASE_WS1_URL=ws://127.0.0.1:19001/
# VITE_BASE_WS2_URL=ws://127.0.0.1:19002/

24
src/components/Progress.vue

@ -120,7 +120,7 @@ const binOption = ref({
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -155,6 +155,12 @@ const binOption = ref({
stack: 'binHP', stack: 'binHP',
data: echartsStore.binHP, data: echartsStore.binHP,
}, },
{
name: '过氧化氢相对饱和度',
type: 'line',
stack: 'binSaturation',
data: echartsStore.binSaturation,
},
], ],
}) })
const envir1Option = ref({ const envir1Option = ref({
@ -287,7 +293,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -322,6 +328,12 @@ onMounted(() => {
stack: 'binHP', stack: 'binHP',
data: echartsStore.binHP, data: echartsStore.binHP,
}, },
{
name: '过氧化氢相对饱和度',
type: 'line',
stack: 'binSaturation',
data: echartsStore.binSaturation,
},
], ],
}) })
envir1Charts.value?.setOption({ envir1Charts.value?.setOption({
@ -416,7 +428,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -451,6 +463,12 @@ onMounted(() => {
stack: 'binHP', stack: 'binHP',
data: echartsStore.binHP, data: echartsStore.binHP,
}, },
{
name: '过氧化氢相对饱和度',
type: 'line',
stack: 'binSaturation',
data: echartsStore.binSaturation,
},
], ],
}) })
envir1Charts.value?.setOption({ envir1Charts.value?.setOption({

25
src/components/info/EnvironmentInfo.vue

@ -35,6 +35,12 @@
</p> </p>
<p class="num">{{ getHP() }} PPM</p> <p class="num">{{ getHP() }} PPM</p>
</div> </div>
<div class="line">
<p class="title">
{{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢相对饱和度
</p>
<p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -48,6 +54,7 @@ const {
binTemperature, binTemperature,
binHumidity, binHumidity,
binHP, binHP,
binSaturation,
envirTemperature1, envirTemperature1,
envirHumidity1, envirHumidity1,
envirHP1, envirHP1,
@ -109,6 +116,18 @@ const getHP = () => {
return envirHP2 return envirHP2
} }
} }
const getSaturation = () => {
if (props.cardType == 1) {
return binSaturation
}
if (props.cardType == 2) {
return 0
}
if (props.cardType == 3) {
return 0
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -132,10 +151,12 @@ const getHP = () => {
} }
} }
.content { .content {
display: grid;
grid-template-rows: repeat(4, 1fr);
.line { .line {
padding: 14px 26px;
padding: 11px 26px;
width: 353px; width: 353px;
height: 56px;
// height: 56px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;

9
src/store/modules/device.js

@ -25,10 +25,19 @@ export const useDeviceStore = defineStore({
envirHumidity2: 0, envirHumidity2: 0,
// 环境二 过氧化氢浓度 // 环境二 过氧化氢浓度
envirHP2: 0, envirHP2: 0,
// 仓内过氧化氢相对饱和度
binSaturation: 0,
} }
}, },
// actions // actions
actions: { actions: {
updateBinSaturation(binSaturation) {
if (binSaturation < 0) {
this.binSaturation = 0
return
}
this.binSaturation = binSaturation
},
updateDisinfectantCapacity(disinfectantCapacity) { updateDisinfectantCapacity(disinfectantCapacity) {
if (disinfectantCapacity < 0) { if (disinfectantCapacity < 0) {
this.disinfectantCapacity = 0 this.disinfectantCapacity = 0

7
src/store/modules/echarts.js

@ -43,6 +43,13 @@ export const useEchartsStore = defineStore({
}) })
return arr return arr
}, },
binSaturation(state) {
let arr = []
Object.values(state.binCharts).map(item => {
arr.push(item[3])
})
return arr
},
envir1Temp(state) { envir1Temp(state) {
let arr = [] let arr = []
Object.values(state.envir1Charts).map(item => { Object.values(state.envir1Charts).map(item => {

16
src/store/modules/websocket.js

@ -61,6 +61,7 @@ export const useWebSocketStore = defineStore({
humid_1, humid_1,
humid_2, humid_2,
humid_3, humid_3,
saturation_1,
temp_1, temp_1,
temp_2, temp_2,
temp_3, temp_3,
@ -94,6 +95,7 @@ export const useWebSocketStore = defineStore({
deviceStore.updateBinTemperature(temp_1) deviceStore.updateBinTemperature(temp_1)
deviceStore.updateBinHumidity(humid_1) deviceStore.updateBinHumidity(humid_1)
deviceStore.updateBinHP(h2o2_1) deviceStore.updateBinHP(h2o2_1)
deviceStore.updateBinSaturation(saturation_1)
deviceStore.updateEnvirTemperature1(temp_2) deviceStore.updateEnvirTemperature1(temp_2)
deviceStore.updateEnvirHumidity1(humid_2) deviceStore.updateEnvirHumidity1(humid_2)
deviceStore.updateEnvirHP1(h2o2_2) deviceStore.updateEnvirHP1(h2o2_2)
@ -111,9 +113,9 @@ export const useWebSocketStore = defineStore({
if (operatorStore.disinfectStatus == 1) { if (operatorStore.disinfectStatus == 1) {
saveEchartsDataToLocal( saveEchartsDataToLocal(
moment(timeStamp).format('HH:mm'), moment(timeStamp).format('HH:mm'),
[temp_1, humid_1, h2o2_1],
[temp_2, humid_2, h2o2_2],
[temp_3, humid_3, h2o2_3],
[temp_1, humid_1, h2o2_1, saturation_1],
[temp_2, humid_2, h2o2_2, saturation_1],
[temp_3, humid_3, h2o2_3, saturation_1],
) )
echartsStore.updateBinCharts( echartsStore.updateBinCharts(
JSON.parse(localStorage.getItem('bin')), JSON.parse(localStorage.getItem('bin')),
@ -197,6 +199,7 @@ export const useWebSocketStore = defineStore({
temp_1, temp_1,
temp_2, temp_2,
temp_3, temp_3,
saturation_1,
airCompressor, airCompressor,
disinfectant_volume, disinfectant_volume,
heatingStrip, heatingStrip,
@ -223,6 +226,7 @@ export const useWebSocketStore = defineStore({
deviceStore.updateBinTemperature(temp_1) deviceStore.updateBinTemperature(temp_1)
deviceStore.updateBinHumidity(humid_1) deviceStore.updateBinHumidity(humid_1)
deviceStore.updateBinHP(h2o2_1) deviceStore.updateBinHP(h2o2_1)
deviceStore.updateBinSaturation(saturation_1)
deviceStore.updateEnvirTemperature1(temp_2) deviceStore.updateEnvirTemperature1(temp_2)
deviceStore.updateEnvirHumidity1(humid_2) deviceStore.updateEnvirHumidity1(humid_2)
deviceStore.updateEnvirHP1(h2o2_2) deviceStore.updateEnvirHP1(h2o2_2)
@ -234,9 +238,9 @@ export const useWebSocketStore = defineStore({
if (operatorStore.disinfectStatus) { if (operatorStore.disinfectStatus) {
saveEchartsDataToLocal( saveEchartsDataToLocal(
moment(timeStamp).format('HH:mm'), moment(timeStamp).format('HH:mm'),
[temp_1, humid_1, h2o2_1],
[temp_2, humid_2, h2o2_2],
[temp_3, humid_3, h2o2_3],
[temp_1, humid_1, h2o2_1, saturation_1],
[temp_2, humid_2, h2o2_2, saturation_1],
[temp_3, humid_3, h2o2_3, saturation_1],
) )
echartsStore.updateBinCharts( echartsStore.updateBinCharts(
JSON.parse(localStorage.getItem('bin')), JSON.parse(localStorage.getItem('bin')),

Loading…
Cancel
Save