Browse Source

设置-设备参数设置增加恢复出厂设置配置

master
sige 1 year ago
parent
commit
ce12fd4407
  1. 17
      src/assets/img/icon/exclamation-cricle-red-fill.svg
  2. 133
      src/components/MyModal.vue
  3. 25
      src/components/Setting/components/Device.vue
  4. 2
      src/main.js
  5. 8
      src/style.scss
  6. 60
      src/utils/MyModal.js

17
src/assets/img/icon/exclamation-cricle-red-fill.svg

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="69"
height="69"
viewBox="0 0 69 69"
>
<g>
<path
d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
fill="#FA1C1C"
fill-opacity="1"
/>
</g>
</svg>

133
src/components/MyModal.vue

@ -0,0 +1,133 @@
<template>
<div v-if="visible" class="clear_record_modal_container">
<div class="modal_content">
<div v-if="'warning' === props.icon">
<img src="@/assets/img/icon/exclamation-cricle-red-fill.svg " />
</div>
<template v-if="'' === props.content">
<slot></slot>
</template>
<p v-else class="tips">
<span>{{ props.content }}</span>
</p>
<div v-if="'confirm' === props.type" class="btns">
<div class="cancel" @click="actionCancel">取消</div>
<div class="ok" @click="actionOk">确定</div>
</div>
<div v-else-if="'info' === props.type" class="btns" style="justify-content: center;">
<div class="ok" @click="actionOk">确定</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
/** @var {Function} */
const emits = defineEmits(['update:visible', 'ok', 'cancel']);
/** @var {Object} */
const props = defineProps({
visible: {type:Boolean, default:false}, //
content : {type:String, default:''}, //
type : {type:String, default:'confirm'}, //
icon : {type:String, default:''} //
});
/** @var {Boolean} */
const visible = ref(props.visible);
// watch visible
watch(() => props.visible, val => visible.value = val);
// expose public functions
defineExpose({show});
// show dialog
function show() {
emits('update:visible', true);
visible.value = true;
}
// action ok
function actionOk() {
emits('ok');
emits('update:visible', false);
visible.value = false;
}
// action cancel
function actionCancel() {
emits('cancel');
emits('update:visible', false);
visible.value = false;
}
</script>
<style lang="scss" scoped>
.clear_record_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: #1f6397;
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>

25
src/components/Setting/components/Device.vue

@ -107,6 +107,12 @@
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">恢复默认设置</p>
<p class="num">
<div class="btn" style="font-size: 1rem;margin-right: 50px;" @click="actionDefaultSetting">恢复</div>
</p>
</div>
</div>
</template>
@ -119,10 +125,15 @@ import Down from '@/assets/img/arrow/down.png'
import Top from '@/assets/img/arrow/top.png'
import {
setSettingValJSON,
getAllSettingJSON,
changeDisinfectionParameterJSON,
updateSettingInRunInfectionJSON,
} from '@/mock/command'
import MyModal from '../../../utils/MyModal'
const topContainer = () => {
const ele = document.getElementById('set_device_container')
ele.scrollTop = ele.scrollTop - 100 < 100 ? 0 : ele.scrollTop - 100
@ -681,6 +692,20 @@ const setSprayLiquidVal = () => {
}
showSuccessToast('设置成功')
}
//
async function actionDefaultSetting() {
let isConfirmed = await MyModal.confirm('是否恢复到默认设置?');
if (!isConfirmed) {
return;
}
if ( !props.runInfection ) {
await webSocketStore.call('factoryResetSettings');
webSocketStore.sendCommandMsg(getAllSettingJSON);
}
showSuccessToast('设置成功')
}
</script>
<style lang="scss" scoped>

2
src/main.js

@ -24,6 +24,7 @@ import 'vant/lib/index.css'
import '@/assets/css/reset.css'
import './style.scss'
import MyInput from 'cpns/MyInput.vue'
import MyModal from 'cpns/MyModal.vue'
createApp(App)
.use(router)
@ -44,4 +45,5 @@ createApp(App)
.use(Slider)
.use(store)
.component('my-input', MyInput)
.component('my-modal', MyModal)
.mount('#app')

8
src/style.scss

@ -19,6 +19,14 @@ body {
user-select: none;
}
html {
overscroll-behavior-x: none;
}
body {
overscroll-behavior-x: none;
}
.van-cell {
.van-field__control {
text-align: center;

60
src/utils/MyModal.js

@ -0,0 +1,60 @@
import { createApp, h } from 'vue';
import MyModalComponent from 'cpns/MyModal.vue';
export default class MyModal {
// show error message
static error( message ) {
return new Promise( resolve => {
const modalContainer = document.createElement('div');
document.body.appendChild(modalContainer);
const modalApp = createApp({
render() {
return h(MyModalComponent, {
ref : 'modal',
icon : 'warning',
type : 'info',
content : message,
onOk : () => {
modalApp.unmount();
document.body.removeChild(modalContainer);
resolve();
}
});
},
});
const vm = modalApp.mount(modalContainer);
vm.$refs.modal.show();
});
}
// show confirm message
static confirm( message ) {
return new Promise( resolve => {
const modalContainer = document.createElement('div');
document.body.appendChild(modalContainer);
const modalApp = createApp({
render() {
return h(MyModalComponent, {
ref : 'modal',
icon : 'warning',
type : 'confirm',
content : message,
onOk : () => {
modalApp.unmount();
document.body.removeChild(modalContainer);
resolve(true);
},
onCancel : () => {
modalApp.unmount();
document.body.removeChild(modalContainer);
resolve(false);
}
});
},
});
const vm = modalApp.mount(modalContainer);
vm.$refs.modal.show();
});
}
}
Loading…
Cancel
Save