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

25
src/components/info/EnvironmentInfo.vue

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

9
src/store/modules/device.js

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

7
src/store/modules/echarts.js

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

16
src/store/modules/websocket.js

@ -61,6 +61,7 @@ export const useWebSocketStore = defineStore({
humid_1,
humid_2,
humid_3,
saturation_1,
temp_1,
temp_2,
temp_3,
@ -94,6 +95,7 @@ export const useWebSocketStore = defineStore({
deviceStore.updateBinTemperature(temp_1)
deviceStore.updateBinHumidity(humid_1)
deviceStore.updateBinHP(h2o2_1)
deviceStore.updateBinSaturation(saturation_1)
deviceStore.updateEnvirTemperature1(temp_2)
deviceStore.updateEnvirHumidity1(humid_2)
deviceStore.updateEnvirHP1(h2o2_2)
@ -111,9 +113,9 @@ export const useWebSocketStore = defineStore({
if (operatorStore.disinfectStatus == 1) {
saveEchartsDataToLocal(
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(
JSON.parse(localStorage.getItem('bin')),
@ -197,6 +199,7 @@ export const useWebSocketStore = defineStore({
temp_1,
temp_2,
temp_3,
saturation_1,
airCompressor,
disinfectant_volume,
heatingStrip,
@ -223,6 +226,7 @@ export const useWebSocketStore = defineStore({
deviceStore.updateBinTemperature(temp_1)
deviceStore.updateBinHumidity(humid_1)
deviceStore.updateBinHP(h2o2_1)
deviceStore.updateBinSaturation(saturation_1)
deviceStore.updateEnvirTemperature1(temp_2)
deviceStore.updateEnvirHumidity1(humid_2)
deviceStore.updateEnvirHP1(h2o2_2)
@ -234,9 +238,9 @@ export const useWebSocketStore = defineStore({
if (operatorStore.disinfectStatus) {
saveEchartsDataToLocal(
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(
JSON.parse(localStorage.getItem('bin')),

Loading…
Cancel
Save