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

新增预设洁面

master
maochaoying 2 years ago
parent
2a40a0da96
commit
7ecd74d03e
8 changed files with 1157 additions and 3 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. 34
      src/components/Setting/components/ExportExcel.vue
  2. 702
      src/components/Setting/components/PreSetting.vue
  3. 162
      src/components/Setting/components/PreTable.vue
  4. 19
      src/components/Setting/index.vue
  5. 117
      src/components/dialogs/AddPreModal.vue
  6. 114
      src/components/dialogs/DelPreModal.vue
  7. 2
      src/store/index.js
  8. 10
      src/store/modules/preinstall.js

34
src/components/Setting/components/ExportExcel.vue
View File

@ -0,0 +1,34 @@
<template>
<div class="export_excel_container">
<div class="btn">导出消毒相关日志</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.export_excel_container {
width: 766px;
height: 580px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
.btn {
background: #06518b;
display: flex;
align-items: center;
justify-content: center;
width: 247px;
height: 60px;
border-radius: 30px;
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.1em;
color: #ffffff;
}
}
</style>

702
src/components/Setting/components/PreSetting.vue
View File

@ -0,0 +1,702 @@
<template>
<div class="device_container">
<div class="row_wrap">
<p class="title">注射蠕动泵速率(g/min)</p>
<p class="num">
<van-field
type="number"
v-model="sprayLiquidConfigVal"
:clickable="true"
:formatter="formatter7"
readonly
@click.stop="hideClickKey(2)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止过氧化氢浓度(ppm)</p>
<p class="num">
<van-field
type="number"
v-model="stoped_gs"
:clickable="true"
:formatter="formatter1"
readonly
@click.stop="hideClickKey(3)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续过氧化氢浓度(ppm)</p>
<p class="num">
<van-field
type="number"
v-model="continued_gs"
:clickable="true"
:formatter="formatter2"
readonly
@click.stop="hideClickKey(4)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止相对湿度(%RH)</p>
<p class="num">
<van-field
type="number"
v-model="stoped_humi"
:clickable="true"
:formatter="formatter9"
readonly
@click.stop="hideClickKey(9)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续相对湿度(%RH)</p>
<p class="num">
<van-field
type="number"
v-model="continued_humi"
:clickable="true"
:formatter="formatter10"
readonly
@click.stop="hideClickKey(10)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
<p class="num">
<van-field
type="number"
:formatter="formatter3"
v-model="stoped_satur"
:clickable="true"
readonly
@click.stop="hideClickKey(5)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
<p class="num">
<van-field
type="number"
:formatter="formatter4"
v-model="continued_satur"
:clickable="true"
readonly
@click.stop="hideClickKey(6)"
/>
</p>
</div>
<div class="row_wrap" v-if="operatorStore.disinfectStatus != 1">
<p class="title">允许消毒最大湿度(%RH)</p>
<p class="num">
<van-field
:formatter="formatter5"
type="number"
v-model="max_humidity"
:clickable="true"
readonly
@click.stop="hideClickKey(7)"
/>
</p>
</div>
<div class="row_wrap" v-if="operatorStore.disinfectStatus != 1">
<p class="title">预热时间(s)</p>
<p class="num">
<van-field
:formatter="formatter8"
type="number"
v-model="pre_heat_time_s"
:clickable="true"
readonly
@click.stop="hideClickKey(8)"
/>
</p>
</div>
<van-number-keyboard
v-model="addLiquidConfigVal"
:title="addLiquidConfigVal"
:show="addLiquidConfigValShow"
@input="val => handleInput(val, 1)"
theme="custom"
close-button-text="配置"
@close="setAddliquidVal"
@blur="addLiquidConfigValShow = false"
/>
<van-number-keyboard
v-model="sprayLiquidConfigVal"
@input="val => handleInput(val, 2)"
:title="sprayLiquidConfigVal"
:show="sprayLiquidConfigValShow"
theme="custom"
@close="setSprayLiquidVal"
close-button-text="配置"
@blur="sprayLiquidConfigValShow = false"
/>
<van-number-keyboard
v-model="stoped_gs"
@input="val => handleInput(val, 3)"
:title="stoped_gs"
:show="stoped_gsShow"
theme="custom"
@close="setStopedGsVal"
close-button-text="配置"
@blur="stoped_gsShow = false"
/>
<van-number-keyboard
v-model="continued_gs"
@input="val => handleInput(val, 4)"
:title="continued_gs"
@close="setcontinuedGsVal"
:show="continued_gsShow"
theme="custom"
close-button-text="配置"
@blur="continued_gsShow = false"
/>
<van-number-keyboard
v-model="stoped_satur"
@input="val => handleInput(val, 5)"
:title="stoped_satur"
@close="setstopedSaturVal"
:show="stoped_saturShow"
theme="custom"
close-button-text="配置"
@blur="stoped_saturShow = false"
/>
<van-number-keyboard
v-model="continued_satur"
@input="val => handleInput(val, 6)"
:title="continued_satur"
@close="setContinuedSaturVal"
:show="continued_saturShow"
theme="custom"
close-button-text="配置"
@blur="continued_saturShow = false"
/>
<van-number-keyboard
v-model="max_humidity"
@input="val => handleInput(val, 7)"
:title="max_humidity"
@close="setMaxHumidityVal"
:show="max_humidityShow"
theme="custom"
close-button-text="配置"
@blur="max_humidityShow = false"
/>
<van-number-keyboard
theme="custom"
close-button-text="配置"
@input="val => handleInput(val, 8)"
@close="setHeat_timeVal"
v-model="pre_heat_time_s"
:title="pre_heat_time_s"
:show="pre_heat_time_sShow"
@blur="pre_heat_time_sShow = false"
/>
<van-number-keyboard
@input="val => handleInput(val, 9)"
theme="custom"
close-button-text="配置"
@close="setstoped_humiVal"
v-model="stoped_humi"
:title="stoped_humi"
:show="stoped_humiShow"
@blur="stoped_humiShow = false"
/>
<van-number-keyboard
theme="custom"
@input="val => handleInput(val, 10)"
close-button-text="配置"
@close="setcontinued_humiVal"
v-model="continued_humi"
:title="continued_humi"
:show="continued_humiShow"
@blur="continued_humiShow = false"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
import { storeToRefs } from 'pinia'
import { setSettingValJSON } from '@/mock/command'
const settingStore = useSettingStore()
const webSocketStore = useWebSocketStore()
const operatorStore = useOperatorStore()
const {
max_humidity,
continued_satur,
stoped_satur,
continued_gs,
stoped_gs,
addLiquidConfigVal,
sprayLiquidConfigVal,
stoped_humi,
continued_humi,
allSettingList,
pre_heat_time_s,
} = storeToRefs(settingStore)
const pre_heat_time_sShow = ref(false)
const addLiquidConfigValShow = ref(false)
const sprayLiquidConfigValShow = ref(false)
const stoped_gsShow = ref(false)
const continued_gsShow = ref(false)
const stoped_saturShow = ref(false)
const continued_saturShow = ref(false)
const max_humidityShow = ref(false)
const stoped_humiShow = ref(false)
const continued_humiShow = ref(false)
const isFirstClick = ref(true)
const hideClickKey = flag => {
isFirstClick.value = true
stoped_humiShow.value = false
continued_humiShow.value = false
pre_heat_time_sShow.value = false
addLiquidConfigValShow.value = false
sprayLiquidConfigValShow.value = false
stoped_gsShow.value = false
continued_gsShow.value = false
stoped_saturShow.value = false
continued_saturShow.value = false
max_humidityShow.value = false
if (flag == 1) {
addLiquidConfigValShow.value = true
}
if (flag == 2) {
sprayLiquidConfigValShow.value = true
}
if (flag == 3) {
stoped_gsShow.value = true
}
if (flag == 4) {
continued_gsShow.value = true
}
if (flag == 5) {
stoped_saturShow.value = true
}
if (flag == 6) {
continued_saturShow.value = true
}
if (flag == 7) {
max_humidityShow.value = true
}
if (flag == 8) {
pre_heat_time_sShow.value = true
}
if (flag == 9) {
stoped_humiShow.value = true
}
if (flag == 10) {
continued_humiShow.value = true
}
}
const handleInput = (value, index) => {
if (isFirstClick.value) {
if (index == 1) {
setTimeout(() => {
addLiquidConfigVal.value = value + ''
})
}
if (index == 2) {
setTimeout(() => {
sprayLiquidConfigVal.value = value + ''
})
}
if (index == 3) {
setTimeout(() => {
stoped_gs.value = value + ''
})
}
if (index == 4) {
setTimeout(() => {
continued_gs.value = value + ''
})
}
if (index == 5) {
setTimeout(() => {
stoped_satur.value = value + ''
})
}
if (index == 6) {
setTimeout(() => {
continued_satur.value = value + ''
})
}
if (index == 7) {
setTimeout(() => {
max_humidity.value = value + ''
})
}
if (index == 8) {
setTimeout(() => {
pre_heat_time_s.value = value + ''
})
}
if (index == 9) {
setTimeout(() => {
stoped_humi.value = value + ''
})
}
if (index == 10) {
setTimeout(() => {
continued_humi.value = value + ''
})
}
isFirstClick.value = false
}
}
const formatter1 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(item => item.name == 'stoped_gs')
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter2 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'continued_gs',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter3 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'stoped_satur',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter4 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'continued_satur',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter5 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'max_humidity',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter6 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'drainage_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter7 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'injection_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter8 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'pre_heat_time_s',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter9 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'stoped_humi',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter10 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'continued_humi',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const setAddliquidVal = () => {
const val = parseInt(addLiquidConfigVal.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.changeAddLiquidConfigVal(val)
webSocketStore.sendCommandMsg(setSettingValJSON('drainage_pump_speed', val))
showSuccessToast('设置成功')
}
const setStopedGsVal = () => {
const val = parseInt(stoped_gs.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updateStopedGs(val)
webSocketStore.sendCommandMsg(setSettingValJSON('stoped_gs', val))
showSuccessToast('设置成功')
}
const setcontinuedGsVal = () => {
const val = parseInt(continued_gs.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updateContinuedGs(val)
webSocketStore.sendCommandMsg(setSettingValJSON('continued_gs', val))
showSuccessToast('设置成功')
}
const setstopedSaturVal = () => {
const val = parseInt(stoped_satur.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updateStopedSatur(val)
webSocketStore.sendCommandMsg(setSettingValJSON('stoped_satur', val))
showSuccessToast('设置成功')
}
const setContinuedSaturVal = () => {
const val = parseInt(continued_satur.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updateContinuedSatur(val)
webSocketStore.sendCommandMsg(setSettingValJSON('continued_satur', val))
showSuccessToast('设置成功')
}
const setMaxHumidityVal = () => {
const val = parseInt(max_humidity.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updateMaxHumidity(val)
webSocketStore.sendCommandMsg(setSettingValJSON('max_humidity', val))
showSuccessToast('设置成功')
}
const setHeat_timeVal = () => {
const val = parseInt(pre_heat_time_s.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updatePre_heat_time_s(val)
webSocketStore.sendCommandMsg(setSettingValJSON('pre_heat_time_s', val))
showSuccessToast('设置成功')
}
const setstoped_humiVal = () => {
const val = parseInt(stoped_humi.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updateStopedHumi(val)
webSocketStore.sendCommandMsg(setSettingValJSON('stoped_humi', val))
showSuccessToast('设置成功')
}
const setcontinued_humiVal = () => {
const val = parseInt(continued_humi.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.updateContinuedHumi(val)
webSocketStore.sendCommandMsg(setSettingValJSON('continued_humi', val))
showSuccessToast('设置成功')
}
const setSprayLiquidVal = () => {
const val = parseInt(sprayLiquidConfigVal.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
settingStore.changeSprayLiquidConfigVal(val)
webSocketStore.sendCommandMsg(setSettingValJSON('injection_pump_speed', val))
showSuccessToast('设置成功')
}
</script>
<style lang="scss" scoped>
.device_container {
box-sizing: border-box;
width: 100%;
height: 580px;
padding: 20px;
display: grid;
overflow: scroll;
grid-template-columns: repeat(1, 1fr);
row-gap: 20px;
padding-bottom: 20px;
.row_wrap {
// width: 726px;
height: 80px;
border-radius: 14px;
background: #f6f6f6;
box-sizing: border-box;
padding: 0 18px 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-family: Zona Pro;
font-size: 20px;
font-weight: normal;
letter-spacing: 0.06em;
color: #000000;
}
.num {
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: #000000;
display: flex;
align-items: center;
}
.btn {
width: 87px;
height: 45px;
border-radius: 23px;
background: #06518b;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.1em;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>

162
src/components/Setting/components/PreTable.vue
File diff suppressed because it is too large
View File

19
src/components/Setting/index.vue
View File

@ -21,12 +21,24 @@
<p :class="activeTab == 4 ? 'title active' : 'title'">日期/时间设置</p>
<div :class="activeTab == 4 ? 'btn style-btn' : 'dis_btn'">配置</div>
</div>
<div class="tab_wrap" @click="changeActiveTab(5)">
<p class="active_line" v-show="activeTab == 5"></p>
<p :class="activeTab == 5 ? 'title active' : 'title'">操作日志导出</p>
<div :class="activeTab == 5 ? 'btn style-btn' : 'dis_btn'">导出</div>
</div>
<div class="tab_wrap" @click="changeActiveTab(6)">
<p class="active_line" v-show="activeTab == 6"></p>
<p :class="activeTab == 6 ? 'title active' : 'title'">消毒预设</p>
<div :class="activeTab == 6 ? 'btn style-btn' : 'dis_btn'">设置</div>
</div>
</div>
<div class="right_container">
<Admin v-if="activeTab == 2" />
<Date v-if="activeTab == 4" />
<Device v-if="activeTab == 1" />
<User v-if="activeTab == 3" />
<ExportExcel v-if="activeTab == 5" />
<PreTable v-if="activeTab == 6" />
</div>
</div>
</template>
@ -37,6 +49,8 @@ import Admin from './components/Admin.vue'
import Date from './components/Date.vue'
import Device from './components/Device.vue'
import User from './components/User.vue'
import ExportExcel from './components/ExportExcel.vue'
import PreTable from './components/PreTable.vue'
import { getAllUserJSON } from '@/mock/command'
import { useWebSocketStore } from '@/store'
@ -67,14 +81,13 @@ const changeActiveTab = index => {
border-radius: 16px;
background: #ffffff;
padding: 20px;
padding-bottom: 180px;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
row-gap: 20px;
.tab_wrap {
width: 384px;
height: 80px;
height: 73.3px;
border-radius: 14px;
background: #f6f6f6;
box-sizing: border-box;

117
src/components/dialogs/AddPreModal.vue
View File

@ -0,0 +1,117 @@
<template>
<div class="add_pre_modal_container">
<div class="modal_content">
<p class="title">新增预设</p>
<van-field
v-model="preName"
clearable
label="预设名称"
left-icon="setting-o"
size="large"
:center="true"
class="name"
placeholder="请输入预设名称"
/>
<div class="btns">
<div class="cancel style-btn" @click="addNewRecord">确定</div>
<div class="ok style-btn" @click="handleCancel">取消</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
hideAddNewPreModal: {
type: Function,
},
})
const handleCancel = () => {
props.hideAddNewPreModal()
}
const preName = ref('')
const addNewRecord = () => {
// 新增新的预设
// 新增成功后请求所有预设
props.hideAddNewPreModal()
}
</script>
<style lang="scss" scoped>
.add_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: 414px;
border-radius: 16px;
background: #ffffff;
position: relative;
box-sizing: border-box;
padding: 0 40px;
padding-top: 45px;
padding-bottom: 45px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
.title {
font-family: Source Han Sans CN;
font-size: 22px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.04em;
color: #000000;
}
.name {
height: 68px;
}
.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>

114
src/components/dialogs/DelPreModal.vue
View File

@ -0,0 +1,114 @@
<template>
<div class="del_pre_modal_container">
<div class="modal_content">
<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>
<p class="tips">
<span class="red">确定要删除当前预设吗？</span>
</p>
<div class="btns">
<div class="ok style-btn">确定</div>
<div class="cancel style-btn" @click="handleCancel">取消</div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
hideDelModal: {
type: Function,
},
})
const handleCancel = () => {
props.hideDelModal()
}
</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>

2
src/store/index.js
View File

@ -6,6 +6,7 @@ import { useWebSocketStore } from './modules/websocket'
import { useDeviceStore } from './modules/device'
import { useUserStore } from './modules/user'
import { useEchartsStore } from './modules/echarts'
import { usePreStore } from './modules/preinstall'
const store = createPinia()
export default store
@ -17,4 +18,5 @@ export {
useDeviceStore,
useEchartsStore,
useUserStore,
usePreStore,
}

10
src/store/modules/preinstall.js
View File

@ -0,0 +1,10 @@
import { defineStore } from 'pinia'
export const usePreStore = defineStore({
id: 'preinstall', // id必填，且需要唯一
// state
state: () => {
return {}
},
// actions
actions: {},
})
Write Preview
Loading…
Cancel
Save