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

UI 更新

master
sige 1 year ago
parent
c07f8770ac
commit
9c0be372b2
8 changed files with 559 additions and 151 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      src/assets/icon/disinfect-start.svg
  2. 1
      src/assets/icon/slider-filled-circle.svg
  3. 154
      src/components/Operator.vue
  4. 115
      src/components/dialogs/Modal.vue
  5. 7
      src/components/info/EnvironmentInfo.vue
  6. 245
      src/components/info/ExtDeviceInfo.vue
  7. 12
      src/pages/Home.vue
  8. 38
      src/store/modules/device.js

138
src/assets/icon/disinfect-start.svg
File diff suppressed because it is too large
View File

1
src/assets/icon/slider-filled-circle.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="28" height="28" viewBox="0 0 28 28"><g><g><ellipse cx="14" cy="14" rx="14" ry="14" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(0,-1,1,0,-14,28)"><path d="M9.8,21L8.4,21L8.4,22.4L7,22.4L7,25.2L8.4,25.2L8.4,35L9.8,35L9.8,25.2L11.2,25.2L11.2,22.4L9.8,22.4L9.8,21ZM14.7,21L13.3,21L13.3,30.8L11.9,30.8L11.9,33.6L13.3,33.6L13.3,35L14.7,35L14.7,33.6L16.1,33.6L16.1,30.8L14.7,30.8L14.7,21ZM21,22.4L19.6,22.4L19.6,21L18.2,21L18.2,22.4L16.8,22.4L16.8,25.2L18.2,25.2L18.2,35L19.6,35L19.6,25.2L21,25.2L21,22.4Z" fill="#06518B" fill-opacity="1"/></g></g></svg>

154
src/components/Operator.vue
File diff suppressed because it is too large
View File

115
src/components/dialogs/Modal.vue
View File

@ -0,0 +1,115 @@
<template>
<div v-if="enable" class="del_pre_modal_container">
<div class="modal_content">
<div style="flex-grow: 1;height: 0;">
<slot></slot>
</div>
<div class="btns">
<div class="cancel style-btn" @click="actionOk">确定</div>
<div class="cancel style-btn" @click="actionCancel">取消</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
/** @var {Function} */
const emits = defineEmits(['ok','cancel','update:enable']);
/** @var {Object} */
const props = defineProps({
enable : Boolean,
});
/** @var {Boolean} */
const enable = ref(props.enable);
// watch enable
watch (() => props.enable, (val) => {
enable.value = val;
});
// action ok
function actionOk() {
emits('ok');
enable.value = false;
emits('update:enable', false);
}
// action cancel
function actionCancel() {
emits('cancel');
enable.value = false;
emits('update:enable', false);
}
</script>
<style lang="scss" scoped>
.del_pre_modal_container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
.modal_content {
width: 476px;
height: 350px;
border-radius: 16px;
background: #ffffff;
padding: 52px 37px 55px 37px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.tips {
margin-top: 33px;
margin-bottom: 50px;
font-family: Source Han Sans CN;
font-size: 21px;
font-weight: normal;
letter-spacing: 0.04em;
color: #000000;
.red {
color: #fa1c1c;
}
}
.btns {
display: flex;
align-items: center;
justify-content: space-between;
width: 362px;
.cancel {
width: 173px;
height: 68px;
border-radius: 34px;
background: #06518b;
font-family: Source Han Sans CN;
font-size: 23px;
font-weight: 350;
letter-spacing: 0em;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.ok {
width: 173px;
height: 68px;
border-radius: 34px;
background: #d8d8d8;
font-family: Source Han Sans CN;
font-size: 23px;
font-weight: 350;
letter-spacing: 0em;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>

7
src/components/info/EnvironmentInfo.vue
View File

@ -141,14 +141,17 @@ const getSaturation = () => {
<style lang="scss" scoped>
.environment_container {
width: 353px;
height: 225px;
height: 100%;
box-sizing: border-box;
overflow: hidden;
border-radius: 17.5px;
display: flex;
flex-direction: column;
.top_title {
padding: 15px 16px;
display: flex;
align-items: center;
height: 90px;
.title {
font-family: Source Han Sans CN;
font-size: 24px;
@ -161,6 +164,8 @@ const getSaturation = () => {
.content {
display: grid;
grid-template-rows: repeat(4, 1fr);
height: 0;
flex-grow: 1;
.line {
padding: 11px 13px 11px 26px;
width: 353px;

245
src/components/info/ExtDeviceInfo.vue
View File

@ -0,0 +1,245 @@
<template>
<div class="environment_container">
<div class="top_title">
<img src="@/assets/icon/slider-filled-circle.svg" alt="icon" />
<p class="title">消毒除湿/降解</p>
</div>
<div class="content">
<div class="line">
<p class="title">消毒前除湿</p>
<p class="value dark" @click="dehumidifyBeforeDisinfectionThresholdValueEditEnable=true"
>{{dehumidifyBeforeDisinfectionThreshold}}%</p>
<div class="act-btn"
:class="{disabled:!externalDeviceConnected,danger:!dehumidifyBeforeDisinfectionEnable}"
@click="actionToggleDehumidifyBeforeDisinfectionEnable"
>{{ dehumidifyBeforeDisinfectionEnable ? '使能' : '未使能'}}</div>
</div>
<div class="line">
<p class="title">消毒后除湿</p>
<p class="value light" @click="dehumidifyAfterDisinfectionThresholdValueEditEnable=true"
>{{dehumidifyAfterDisinfectionThreshold}}%</p>
<div class="act-btn"
:class="{disabled:!externalDeviceConnected,danger:!dehumidifyAfterDisinfectionEnable}"
@click="actionToggleDehumidifyAfterDisinfectionEnable"
>{{ dehumidifyAfterDisinfectionEnable ? '使能' : '未使能' }}</div>
</div>
<div class="line">
<p class="title">消毒后降解</p>
<div class="act-btn"
:class="{disabled:!externalDeviceConnected,danger:!degradeAfterDisinfectionEnable}"
@click="actionToggleDegradeAfterDisinfectionEnable"
>{{ degradeAfterDisinfectionEnable ? '使能' : '未使能' }}</div>
</div>
<div class="line">
<p v-if="!externalDeviceConnected" class="title" style="color:#FA1C1C">*外部未接入设备</p>
<div class="num"></div>
</div>
</div>
<!-- 消毒前除湿阈值 -->
<modal
v-model:enable="dehumidifyBeforeDisinfectionThresholdValueEditEnable"
@ok="actionDehumidifyBeforeDisinfectionThresholdValueChange"
>
<p>消毒前除湿</p>
<van-picker
:columns="percentageValues"
:show-toolbar="false"
visible-option-num="3"
option-height="42"
v-model="dehumidifyBeforeDisinfectionThresholdValue"
/>
</modal>
<!-- 消毒后除湿阈值 -->
<modal
v-model:enable="dehumidifyAfterDisinfectionThresholdValueEditEnable"
@ok="actionDehumidifyAfterDisinfectionThresholdValueChange"
>
<p>消毒后除湿</p>
<van-picker
:columns="percentageValues"
:show-toolbar="false"
visible-option-num="3"
option-height="42"
v-model="dehumidifyAfterDisinfectionThresholdValue"
/>
</modal>
</div>
</template>
<script setup>
import { useDeviceStore } from '@/store'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import Modal from 'cpns/dialogs/Modal.vue'
const deviceStore = useDeviceStore()
const {
// 消毒前是否需要除湿
dehumidifyBeforeDisinfectionEnable,
// 除湿阈值
dehumidifyBeforeDisinfectionThreshold,
// 消毒后是否需要除湿
dehumidifyAfterDisinfectionEnable,
// 除湿阈值
dehumidifyAfterDisinfectionThreshold,
// 消毒后是否需要降解
degradeAfterDisinfectionEnable,
// 外部设备已接入
externalDeviceConnected,
} = storeToRefs(deviceStore);
// 除湿阈值
const percentageValues = ref([
{ text: '10%', value: '10' },
{ text: '20%', value: '20' },
{ text: '30%', value: '30' },
{ text: '40%', value: '40' },
{ text: '50%', value: '50' },
{ text: '60%', value: '60' },
{ text: '70%', value: '70' },
{ text: '80%', value: '80' },
{ text: '90%', value: '90' },
{ text: '100%', value: '100' },
]);
// 消毒前除湿阈值
const dehumidifyBeforeDisinfectionThresholdValue = ref([dehumidifyBeforeDisinfectionThreshold.value]);
// 是否显示除湿阈值编辑弹窗
const dehumidifyBeforeDisinfectionThresholdValueEditEnable = ref(false);
// 消毒后除湿阈值
const dehumidifyAfterDisinfectionThresholdValue = ref([dehumidifyAfterDisinfectionThreshold.value]);
// 是否显示除湿阈值编辑弹窗
const dehumidifyAfterDisinfectionThresholdValueEditEnable = ref(false);
// 使能/禁用消毒前除湿
function actionToggleDehumidifyBeforeDisinfectionEnable() {
let status = !dehumidifyBeforeDisinfectionEnable.value;
deviceStore.setDehumidifyBeforeDisinfectionEnable(status);
}
// 使能/禁用消毒后除湿
function actionToggleDehumidifyAfterDisinfectionEnable() {
let status = !dehumidifyAfterDisinfectionEnable.value;
deviceStore.setDehumidifyAfterDisinfectionEnable(status);
}
// 使能/禁用消毒后降解
function actionToggleDegradeAfterDisinfectionEnable() {
let status = !degradeAfterDisinfectionEnable.value;
deviceStore.setDegradeAfterDisinfectionEnable(status);
}
// 消毒前除湿阈值改变
function actionDehumidifyBeforeDisinfectionThresholdValueChange() {
deviceStore.setDehumidifyBeforeDisinfectionThreshold(dehumidifyBeforeDisinfectionThresholdValue.value[0]);
}
// 消毒后除湿阈值改变
function actionDehumidifyAfterDisinfectionThresholdValueChange() {
deviceStore.setDehumidifyAfterDisinfectionThreshold(dehumidifyAfterDisinfectionThresholdValue.value[0]);
}
</script>
<style lang="scss" scoped>
.environment_container {
width: 353px;
height: 100%;
box-sizing: border-box;
overflow: hidden;
border-radius: 17.5px;
display: flex;
flex-direction: column;
.top_title {
padding: 15px 16px;
display: flex;
align-items: center;
height: 90px;
.title {
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.1em;
margin-left: 8px;
color: #ffffff;
}
}
.content {
display: grid;
grid-template-rows: repeat(4, 1fr);
height: 0;
flex-grow: 1;
.line {
padding: 11px 13px 11px 26px;
width: 353px;
// height: 56px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
&:nth-child(odd) {
background: #1f6397;
}
.title {
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.06em;
color: #ffffff;
}
.value {
width:69px;
height:35px;
border-radius:8px;
opacity:1;
font-family:Source Han Sans;
font-size:20px;
font-weight:bold;
line-height:normal;
letter-spacing:0.06em;
color:#FFFFFF;
text-align: center;
line-height: 35px;
}
.value.dark {
background: #06518B;
}
.value.light {
background: #1F6397;
}
.act-btn {
background: #17F179;border-radius: 8px;font-family: 思源黑体;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.07em;
color: #FFFFFF;
height: 35px;
width: 92px;
text-align: center;
line-height: 35px;
}
.act-btn.danger {
background: #FA1C1C !important;
}
.act-btn.disabled {
background: #B3B3B3 !important;
}
.num {
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.06em;
color: #ffffff;
display: flex;
align-items: center;
.unit {
width: 60px;
margin-left: 6px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
</style>

12
src/pages/Home.vue
View File

@ -26,7 +26,7 @@
</svg>
<p class="text">消毒</p>
</div>
<div
<!-- <div
:class="
activeTab == 2 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
"
@ -51,8 +51,8 @@
</g>
</svg>
<p class="text">加液</p>
</div>
<div
</div> -->
<!-- <div
:class="
activeTab == 3 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
"
@ -77,8 +77,8 @@
</g>
</svg>
<p class="text">排液</p>
</div>
<div
</div> -->
<!-- <div
:class="
activeTab == 8 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
"
@ -106,7 +106,7 @@
</g>
</svg>
<p class="text">密封测试</p>
</div>
</div> -->
<div
:class="
activeTab == 7 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'

38
src/store/modules/device.js
View File

@ -30,6 +30,19 @@ export const useDeviceStore = defineStore({
// 剩余log
nowlog: 0,
targetlog: 0,
// 消毒前是否需要除湿
dehumidifyBeforeDisinfectionEnable : false,
// 除湿阈值
dehumidifyBeforeDisinfectionThreshold : 0,
// 消毒后是否需要除湿
dehumidifyAfterDisinfectionEnable : false,
// 除湿阈值
dehumidifyAfterDisinfectionThreshold : 0,
// 消毒后是否需要降解
degradeAfterDisinfectionEnable : false,
// 外部设备已接入
externalDeviceConnected : true,
}
},
// actions
@ -122,5 +135,30 @@ export const useDeviceStore = defineStore({
}
this.envirHP2 = envirHP2
},
// 设置是否需要消毒前除湿
setDehumidifyBeforeDisinfectionEnable( enable ) {
this.dehumidifyBeforeDisinfectionEnable = enable;
},
// 设置消毒后是否需要除湿
setDehumidifyAfterDisinfectionEnable( enable ) {
this.dehumidifyAfterDisinfectionEnable = enable;
},
// 设置消毒后是否需要降解
setDegradeAfterDisinfectionEnable( enable ) {
this.degradeAfterDisinfectionEnable = enable;
},
// 设置除湿阈值
setDehumidifyBeforeDisinfectionThreshold( threshold ) {
this.dehumidifyBeforeDisinfectionThreshold = threshold;
},
// 设置除湿阈值
setDehumidifyAfterDisinfectionThreshold( threshold ) {
this.dehumidifyAfterDisinfectionThreshold = threshold;
},
},
})
Write Preview
Loading…
Cancel
Save