chenjinliang
/
disinfection_high_front_end
forked from maochaoying/disinfection_high_front_end
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

some state change

master
maochaoying 2 years ago
parent
e8728d65a9
commit
900681a626
7 changed files with 117 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      index.html
  2. 47
      src/components/LiquidHandle.vue
  3. 6
      src/components/Operator.vue
  4. 20
      src/pages/Home.vue
  5. 8
      src/store/modules/operator.js
  6. 13
      src/store/modules/websocket.js
  7. 13
      src/style.scss

5
index.html
View File

@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>消毒机</title> <title>消毒机</title>
</head> </head>
<body> <body>

47
src/components/LiquidHandle.vue
View File

@ -42,26 +42,52 @@
开始排液 开始排液
</div> </div>
</div> </div>
<!-- <div class="add_liquid">
<div
class="add_liquid"
v-if="operatorStore.replenishingFluidsWorkState == 1 && tabType == 1"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="29.999204635620117"
height="29.999876022338867"
viewBox="0 0 29.999204635620117 29.999876022338867"
>
<g>
<path
d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
fill="#FF9A2D"
fill-opacity="1"
/>
</g>
</svg>
<p class="text">正在加液...</p>
</div>
<div
class="add_liquid"
v-if="operatorStore.drainingWorkState == 1 && tabType == 2"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none" fill="none"
version="1.1" version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
width="29.999204635620117"
height="29.999876022338867"
viewBox="0 0 29.999204635620117 29.999876022338867"
> >
<g> <g>
<path <path
d="M15.0171,0Q18.13,0,20.8495,1.1748Q23.569,2.3496,25.6043,4.39274Q27.6397,6.43587,28.8198,9.16005Q30,11.8842,30,14.983Q30,18.0817,28.8198,20.8229Q27.6397,23.5641,25.6043,25.6073Q23.569,27.6504,20.8495,28.8252Q18.13,30,15.0171,30Q11.9042,30,9.16762,28.8252Q6.43101,27.6504,4.39567,25.6073Q2.36032,23.5641,1.18016,20.8229Q-0.00000305839,18.0817,0,14.983Q0.00000305839,11.8842,1.18016,9.16004Q2.36032,6.43587,4.39567,4.39274Q6.43102,2.3496,9.16762,1.1748Q11.9042,-5.07417e-7,15.0171,0ZM24.4242,12.1226Q25.0399,11.5096,25.0741,10.6073Q25.1083,9.70488,24.4926,9.09194Q23.8769,8.479,22.9875,8.49603Q22.0981,8.51305,21.4823,9.12599L11.8358,18.7287L8.51767,15.4597Q7.90194,14.8468,7.01254,14.8297Q6.12315,14.8127,5.50741,15.4257Q4.89168,16.0386,4.87457,16.8729Q4.85747,17.7072,5.4732,18.3201L10.2281,23.0874Q10.8438,23.7003,11.8358,23.6833Q12.8278,23.6663,13.4436,23.0533L13.3067,23.1896L24.4242,12.1226Z"
fill="#81FC50"
d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
fill="#FF9A2D"
fill-opacity="1" fill-opacity="1"
/> />
</g> </g>
</svg> </svg>
<p class="text">{{ tabType == 1 ? '加液完成' : '排液完成' }}</p>
</div> -->
<p class="text">正在排液...</p>
</div>
<div class="chart"> <div class="chart">
<div <div
class="liquid_column" class="liquid_column"
@ -87,7 +113,7 @@
<script setup> <script setup>
import LiquidModal from './dialogs/LiquidModal.vue' import LiquidModal from './dialogs/LiquidModal.vue'
import { useDeviceStore, useWebSocketStore } from '@/store'
import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store'
import { ref } from 'vue' import { ref } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { import {
@ -97,6 +123,7 @@ import {
} from '@/mock/command' } from '@/mock/command'
const numberKeyboardShow = ref(false) const numberKeyboardShow = ref(false)
const operatorStore = useOperatorStore()
const props = defineProps({ const props = defineProps({
tabType: { tabType: {
@ -247,7 +274,7 @@ const { disinfectantCapacity } = storeToRefs(deviceStore)
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0.06em; letter-spacing: 0.06em;
color: #81fc50;
color: #ff9a2d;
} }
} }
.chart { .chart {

6
src/components/Operator.vue
View File

@ -49,7 +49,7 @@
开始消毒 开始消毒
</div> </div>
<div class="progress"> <div class="progress">
<p class="title">剩余时间</p>
<p class="title">预计剩余时间</p>
<!-- <div class="tube"> <!-- <div class="tube">
<div <div
class="pro" class="pro"
@ -62,8 +62,8 @@
<div class="time"> <div class="time">
{{ {{
operatorStore.estimatedRemainingTimeS == 0 operatorStore.estimatedRemainingTimeS == 0
? `${operatorStore.estimatedRemainingTimeS} S`
: '已结束'
? '已结束'
: `${operatorStore.estimatedRemainingTimeS} S`
}} }}
</div> </div>
</div> </div>

20
src/pages/Home.vue
View File

@ -144,7 +144,6 @@
<div class="other_info"> <div class="other_info">
<p>IP {{ settingStore.deviceIp }}</p> <p>IP {{ settingStore.deviceIp }}</p>
<p class="time">{{ nowTime }}</p> <p class="time">{{ nowTime }}</p>
</div>
<div class="log_out_btn" @click="handleLogout"> <div class="log_out_btn" @click="handleLogout">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -174,6 +173,8 @@
</g> </g>
</svg> </svg>
</div> </div>
</div>
<!-- <van-overlay :show="settingStore.initLoading"> <!-- <van-overlay :show="settingStore.initLoading">
<div class="wrapper" @click.stop> <div class="wrapper" @click.stop>
<div class="block"> <div class="block">
@ -347,23 +348,24 @@ const handleLogout = () => {
letter-spacing: 0.06em; letter-spacing: 0.06em;
color: #ffffff; color: #ffffff;
padding: 0 30px; padding: 0 30px;
.time {
width: 156px;
white-space: nowrap;
}
}
position: relative;
.log_out_btn { .log_out_btn {
width: 123px; width: 123px;
height: 45px; height: 45px;
border-radius: 23px; border-radius: 23px;
opacity: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #064b81; background: #064b81;
right: 248px;
bottom: 22px;
right: 276px;
top: -17px;
position: absolute; position: absolute;
z-index: 1;
}
.time {
width: 156px;
white-space: nowrap;
}
} }
} }
.wrapper { .wrapper {

8
src/store/modules/operator.js
View File

@ -8,10 +8,18 @@ export const useOperatorStore = defineStore({
disinfectStatus: false, disinfectStatus: false,
estimatedRemainingTimeS: 0, estimatedRemainingTimeS: 0,
disinfection_id: '', disinfection_id: '',
drainingWorkState: 0,
replenishingFluidsWorkState: 0,
} }
}, },
// actions // actions
actions: { actions: {
updateDrainingWorkState(drainingWorkState) {
this.drainingWorkState = drainingWorkState
},
updateReplenishingFluidsWorkState(replenishingFluidsWorkState) {
this.replenishingFluidsWorkState = replenishingFluidsWorkState
},
updateDisinfectionId(disinfection_id) { updateDisinfectionId(disinfection_id) {
this.disinfection_id = disinfection_id this.disinfection_id = disinfection_id
}, },

13
src/store/modules/websocket.js
View File

@ -41,12 +41,14 @@ export const useWebSocketStore = defineStore({
// 初始化完毕 // 初始化完毕
const { state } = JSON.parse(ev.data) const { state } = JSON.parse(ev.data)
const { const {
workState,
disinfectionWorkState,
estimatedRemainingTimeS, estimatedRemainingTimeS,
disinfection_id, disinfection_id,
isLogin, isLogin,
permissionLevel, permissionLevel,
sensor_data, sensor_data,
drainingWorkState,
replenishingFluidsWorkState,
} = state || {} } = state || {}
if (!isLogin) { if (!isLogin) {
window.location.href = 'http://127.0.0.1/#/login' window.location.href = 'http://127.0.0.1/#/login'
@ -71,7 +73,10 @@ export const useWebSocketStore = defineStore({
waterImmersionSensor1, waterImmersionSensor1,
waterImmersionSensor2, waterImmersionSensor2,
} = sensor_data } = sensor_data
operatorStore.updateDrainingWorkState(drainingWorkState)
operatorStore.updateReplenishingFluidsWorkState(
replenishingFluidsWorkState,
)
testStore.updateWaterImmersionSensor1( testStore.updateWaterImmersionSensor1(
waterImmersionSensor1 == 0 ? false : true, waterImmersionSensor1 == 0 ? false : true,
) )
@ -98,7 +103,9 @@ export const useWebSocketStore = defineStore({
userStore.updatePermission(permissionLevel) userStore.updatePermission(permissionLevel)
settingStore.updateInitLoading() settingStore.updateInitLoading()
operatorStore.updateDisinfectStatus(workState == 0 ? false : true)
operatorStore.updateDisinfectStatus(
disinfectionWorkState == 0 ? false : true,
)
operatorStore.updateEstimatedRemainingTimeS(estimatedRemainingTimeS) operatorStore.updateEstimatedRemainingTimeS(estimatedRemainingTimeS)
operatorStore.updateDisinfectionId(disinfection_id) operatorStore.updateDisinfectionId(disinfection_id)
// 将sensor_data中的数据更新到store中 // 将sensor_data中的数据更新到store中

13
src/style.scss
View File

@ -10,9 +10,22 @@ body {
user-select: none; /* Standard */ user-select: none; /* Standard */
} }
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.van-cell { .van-cell {
.van-field__control { .van-field__control {
text-align: center; text-align: center;
} }
background: none; background: none;
} }
.key_wrap {
z-index: 999;
}
Write Preview
Loading…
Cancel
Save