maochaoying
2 years ago
2 changed files with 13 additions and 310 deletions
@ -1,309 +0,0 @@ |
|||||
<template> |
|
||||
<div class="liquid_contaienr"> |
|
||||
<div class="header_wrap"> |
|
||||
<div class="set_wrap" v-if="tabType == 1"> |
|
||||
<van-field |
|
||||
type="number" |
|
||||
v-model="addLiquidVal" |
|
||||
:clickable="true" |
|
||||
:maxlength="4" |
|
||||
readonly |
|
||||
@click.stop="numberKeyboardShow = true" |
|
||||
class="add_liquid_input" |
|
||||
/> |
|
||||
<p class="title">设置加液</p> |
|
||||
</div> |
|
||||
<div |
|
||||
:class=" |
|
||||
operatorStore.replenishingFluidsWorkState |
|
||||
? 'btn mr active style-btn' |
|
||||
: 'btn mr ' |
|
||||
" |
|
||||
v-if="tabType == 1" |
|
||||
@click="stopAdd" |
|
||||
> |
|
||||
停止加液 |
|
||||
</div> |
|
||||
<div |
|
||||
:class=" |
|
||||
operatorStore.replenishingFluidsWorkState |
|
||||
? 'btn' |
|
||||
: 'btn active style-btn' |
|
||||
" |
|
||||
v-if="tabType == 1" |
|
||||
@click="startAdd" |
|
||||
> |
|
||||
开始加液 |
|
||||
</div> |
|
||||
<div |
|
||||
:class=" |
|
||||
operatorStore.drainingWorkState |
|
||||
? 'btn mr active style-btn' |
|
||||
: 'btn mr ' |
|
||||
" |
|
||||
v-if="tabType == 2" |
|
||||
@click="stopPop" |
|
||||
> |
|
||||
停止排液 |
|
||||
</div> |
|
||||
<div |
|
||||
:class=" |
|
||||
operatorStore.drainingWorkState ? 'btn' : 'btn active style-btn' |
|
||||
" |
|
||||
v-if="tabType == 2" |
|
||||
@click="startTabLiquid" |
|
||||
> |
|
||||
开始排液 |
|
||||
</div> |
|
||||
</div> |
|
||||
<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 |
|
||||
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="chart"> |
|
||||
<div |
|
||||
class="liquid_column" |
|
||||
:style="{ |
|
||||
'--height': `${ |
|
||||
((disinfectantCapacity <= 0 ? 0 : disinfectantCapacity) / 5000) * |
|
||||
427 |
|
||||
}px`, |
|
||||
}" |
|
||||
> |
|
||||
<p class="indicator"> |
|
||||
{{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}g |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<LiquidModal |
|
||||
v-if="tabType == 2 && tipModalVisible" |
|
||||
:hideTabLiquid="hideTabLiquid" |
|
||||
/> |
|
||||
<van-number-keyboard |
|
||||
v-model="addLiquidVal" |
|
||||
:show="numberKeyboardShow" |
|
||||
:maxlength="4" |
|
||||
@blur="numberKeyboardShow = false" |
|
||||
/> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import LiquidModal from './dialogs/LiquidModal.vue' |
|
||||
import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store' |
|
||||
import { ref } from 'vue' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
import { |
|
||||
startReplenishingFluidsJSON, |
|
||||
stopReplenishingFluidsJSON, |
|
||||
stopDrainingJSON, |
|
||||
} from '@/mock/command' |
|
||||
|
|
||||
const numberKeyboardShow = ref(false) |
|
||||
const operatorStore = useOperatorStore() |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
tabType: { |
|
||||
type: Number, |
|
||||
}, |
|
||||
}) |
|
||||
|
|
||||
const addLiquidVal = ref(2000) |
|
||||
const tipModalVisible = ref(false) |
|
||||
const webSocketStore = useWebSocketStore() |
|
||||
|
|
||||
const isPopLiquidStatus = ref(false) |
|
||||
|
|
||||
const startAdd = () => { |
|
||||
if (!(operatorStore.replenishingFluidsWorkState == 1)) { |
|
||||
webSocketStore.sendCommandMsg( |
|
||||
startReplenishingFluidsJSON(parseInt(addLiquidVal.value)), |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const stopAdd = () => { |
|
||||
if (operatorStore.replenishingFluidsWorkState == 1) { |
|
||||
webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const stopPop = () => { |
|
||||
if (operatorStore.drainingWorkState == 1) { |
|
||||
webSocketStore.sendCommandMsg(stopDrainingJSON) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const startTabLiquid = () => { |
|
||||
if (!(operatorStore.drainingWorkState == 1)) { |
|
||||
tipModalVisible.value = true |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const hideTabLiquid = () => { |
|
||||
tipModalVisible.value = false |
|
||||
} |
|
||||
|
|
||||
const deviceStore = useDeviceStore() |
|
||||
|
|
||||
const { disinfectantCapacity } = storeToRefs(deviceStore) |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.liquid_contaienr { |
|
||||
margin-bottom: 19px; |
|
||||
height: 580px; |
|
||||
box-sizing: border-box; |
|
||||
background: #ffffff; |
|
||||
border-radius: 16px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
// .header_wrap { |
|
||||
// display: flex; |
|
||||
// align-items: center; |
|
||||
// justify-content: flex-end; |
|
||||
// position: relative; |
|
||||
// margin-bottom: 39px; |
|
||||
// .set_wrap { |
|
||||
// position: relative; |
|
||||
// width: 227px; |
|
||||
// height: 45px; |
|
||||
// background: url(../assets/img/liquid/oper.png) no-repeat; |
|
||||
// background-size: 227px 45px; |
|
||||
// .title { |
|
||||
// position: absolute; |
|
||||
// left: 22px; |
|
||||
// top: 12px; |
|
||||
// font-family: Source Han Sans CN; |
|
||||
// font-size: 14px; |
|
||||
// font-weight: normal; |
|
||||
// line-height: normal; |
|
||||
// letter-spacing: 0.1em; |
|
||||
// color: #0e0e0e; |
|
||||
// } |
|
||||
// .add_liquid_input { |
|
||||
// position: absolute; |
|
||||
// left: 113px; |
|
||||
// top: 11px; |
|
||||
// width: 40px; |
|
||||
// height: 20px; |
|
||||
// padding: 0; |
|
||||
// color: #0e0e0e; |
|
||||
// font-family: Source Han Sans CN; |
|
||||
// font-weight: 500; |
|
||||
// font-size: 14; |
|
||||
// } |
|
||||
// } |
|
||||
// .btn { |
|
||||
// width: 140px; |
|
||||
// height: 45px; |
|
||||
// border-radius: 23px; |
|
||||
// background: #f6f6f6; |
|
||||
// display: flex; |
|
||||
// align-items: center; |
|
||||
// justify-content: center; |
|
||||
// font-family: Source Han Sans CN; |
|
||||
// font-size: 14px; |
|
||||
// font-weight: normal; |
|
||||
// line-height: normal; |
|
||||
// letter-spacing: 0.1em; |
|
||||
// color: #d8d8d8; |
|
||||
// } |
|
||||
// .mr { |
|
||||
// margin: 0 16px; |
|
||||
// } |
|
||||
// .active { |
|
||||
// background: #06518b; |
|
||||
// color: #fff; |
|
||||
// } |
|
||||
// } |
|
||||
// .add_liquid { |
|
||||
// position: absolute; |
|
||||
// left: 382px; |
|
||||
// top: 33px; |
|
||||
// display: flex; |
|
||||
// align-items: center; |
|
||||
// .text { |
|
||||
// margin-left: 16px; |
|
||||
// font-family: Source Han Sans CN; |
|
||||
// font-size: 26px; |
|
||||
// font-weight: normal; |
|
||||
// line-height: normal; |
|
||||
// letter-spacing: 0.06em; |
|
||||
// color: #ff9a2d; |
|
||||
// } |
|
||||
// } |
|
||||
// .chart { |
|
||||
// position: absolute; |
|
||||
// left: 310px; |
|
||||
// bottom: 23px; |
|
||||
// width: 600px; |
|
||||
// height: 452px; |
|
||||
// background: url(../assets/img/liquid/chart.png) no-repeat; |
|
||||
// background-size: 600px 452px; |
|
||||
// .liquid_column { |
|
||||
// position: absolute; |
|
||||
// left: 96px; |
|
||||
// bottom: 13px; |
|
||||
// width: 491px; |
|
||||
// height: var(--height); |
|
||||
// border-radius: 0px 12px 12px 0px; |
|
||||
// background: linear-gradient(0deg, #06518b 0%, rgba(6, 81, 139, 0.7) 58%); |
|
||||
// .indicator { |
|
||||
// position: absolute; |
|
||||
// top: -10px; |
|
||||
// right: -50px; |
|
||||
// font-family: Source Han Sans CN; |
|
||||
// font-size: 12px; |
|
||||
// font-weight: 500; |
|
||||
// line-height: normal; |
|
||||
// letter-spacing: 0.06em; |
|
||||
|
|
||||
// color: #06518b; |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue