wszhyWx/src/views/page/wetFan.vue
2024-01-22 16:46:57 +08:00

751 lines
31 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="wetFan">
<div class="table-title">
<img src="../../assets/img/wetFan.png" alt="">{{getName()}}
</div>
<template v-if="indexs==1">
<div class="title-tips">工作方式选择
<div class="input-btn">
<div class="btn btn-tips" @click="changeOpen(0)" :class="inputData[21950] == 0 ? 'blue' : 'green'">
{{ inputData[21950] == 0 ? '无效' : '有效' }}
</div>
</div>
</div>
<div class="flex-view">
<div class="input-btn ">
<div class="btn" @click="changeOpen(1,21950)" :class="inputData[21950] == 1 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div>
<div class="btn" @click="changeOpen(2,21950)" :class="inputData[21950] == 2 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div>
<div class="btn" @click="changeOpen(3,21950)" :class="inputData[21950] == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div>
</div>
</div>
<div class="text-tips">手动打开时风机启动</div>
<div class="flex-view border-none">
<div class="input-btn ">
<div class="btn btn-w80" @click="changeIndexOpen(0)" :class="actList1[0] == '1' ? 'blue' : 'off'">
1#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(1)" :class="actList1[1] == '1' ? 'blue' : 'off'">
2#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(2)" :class="actList1[2] == '1' ? 'blue' : 'off'">
3#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(3)" :class="actList1[3] == '1' ? 'blue' : 'off'">
4#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(4)" :class="actList1[4] == '1' ? 'blue' : 'off'">
5#
</div>
</div>
</div>
<div class="text-tips">工作时段限制</div>
<div class="flex-view border-none">
<div class="input-main-80">
<input @blur="blurChange(21952, $event)" v-model="inputData[21952]" @input="change(21952, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(21953, $event)" v-model="inputData[21953]" @input="change(21953, $event)"
type="text" placeholder="0">
<span>-</span>
<input @blur="blurChange(21954, $event)" v-model="inputData[21954]" @input="change(21954, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(21955, $event)" v-model="inputData[21955]" @input="change(21955, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="text-tips">工作时段限制</div>
<div class="flex-view shrink-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeOpen(1,21956)" :class="inputData[21956] == 1 ? 'blue' : 'off'">
{{inputData[21956] == 1 ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>工作模式一</span>
</div>
<div class="input-btn">
<div class="btn btn-w80" @click="changeOpen(2,21956)" :class="inputData[21956] == 2 ? 'blue' : 'off'">
{{inputData[21956] == 2 ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>工作模式二</span>
</div>
</div>
<div class="flex-view shrink-none">
<div class="input-main-80">
<span>工作模式一风机湿帘工作最大级数</span>
<input @blur="blurChange(21959, $event)" v-model="inputData[21959]" @input="change(21959, $event)"
type="text" placeholder="0">
<span>风机湿帘工作调整时间</span>
<input @blur="blurChange(21961, $event)" v-model="inputData[21961]" @input="change(21961, $event)"
type="text" placeholder="0">
<span></span>
</div>
</div>
<div class="flex-view border-none shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen1(0)" :class="actList2[0] == '1' ? 'blue' : 'off'">
{{actList2[0] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>室外温度小于</span>
<input @blur="blurChangeCount(21958, $event)" v-model="inputData[21958]" @input="changeCountData(21958, $event)"
type="text" placeholder="0">
<span>禁止启动风机</span>
</div>
</div>
<div class="flex-view border-none shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen1(1)" :class="actList2[1] == '1' ? 'blue' : 'off'">
{{actList2[1] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>实测温度大于目标温度</span>
<input @blur="blurChange10(21960, $event)" v-model="inputData[21960]" @input="changeCount10(21960, $event)"
type="text" placeholder="0">
<span>跳过通风窗直接启动风机</span>
</div>
</div>
<!-- <div class="flex-view border-none shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen1(2)" :class="actList2[2] == '1' ? 'blue' : 'off'">
{{actList2[2] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>预留条件</span>
</div>
</div> -->
<div class="flex-view shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen1(3)" :class="actList2[3] == '1' ? 'blue' : 'off'">
{{actList2[3] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>湿帘结束后风机延时吹干湿帘时间</span>
<input @blur="blurChange(21962, $event)" v-model="inputData[21962]" @input="change(21962, $event)"
type="text" placeholder="0">
<span>分钟</span>
</div>
</div>
<div class="flex-view shrink-none">
<div class="input-main-80">
<span>工作模式二控温精度滞回带</span>
<input @blur="blurChange10(21964, $event)" v-model="inputData[21964]" @input="changeCount10(21964, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(0)" :class="actList3[0] == '1' ? 'blue' : 'off'">
{{actList3[0] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>温度大于</span>
<input @blur="blurChangeCount(21965, $event)" v-model="inputData[21965]" @input="changeCountData(21965, $event)"
type="text" placeholder="0">
<span>启动1#风机</span>
</div>
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(1)" :class="actList3[1] == '1' ? 'blue' : 'off'">
{{actList3[1] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>温度大于</span>
<input @blur="blurChangeCount(21966, $event)" v-model="inputData[21966]" @input="changeCountData(21966, $event)"
type="text" placeholder="0">
<span>启动2#风机</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(2)" :class="actList3[2] == '1' ? 'blue' : 'off'">
{{actList3[2] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>温度大于</span>
<input @blur="blurChangeCount(21967, $event)" v-model="inputData[21967]" @input="changeCountData(21967, $event)"
type="text" placeholder="0">
<span>启动3#风机</span>
</div>
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(3)" :class="actList3[3] == '1' ? 'blue' : 'off'">
{{actList3[3] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>温度大于</span>
<input @blur="blurChangeCount(21968, $event)" v-model="inputData[21968]" @input="changeCountData(21968, $event)"
type="text" placeholder="0">
<span>启动4#风机</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(4)" :class="actList3[4] == '1' ? 'blue' : 'off'">
{{actList3[4] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>温度大于</span>
<input @blur="blurChangeCount(21969, $event)" v-model="inputData[21969]" @input="changeCountData(21969, $event)"
type="text" placeholder="0">
<span>启动5#风机</span>
</div>
</div>
</template>
<template v-if="indexs==2">
<div class="flex-view border-none shrink-none">
<div class="input-main">
<span>湿帘水泵1:</span>
</div>
<div class="input-btn ">
<div class="btn" @click="changeOpen(1,21970)" :class="inputData[21970] == 1 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div>
<div class="btn" @click="changeOpen(2,21970)" :class="inputData[21970] == 2 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div>
<div class="btn" @click="changeOpen(3,21970)" :class="inputData[21970] == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div>
</div>
</div>
<div class="flex-view shrink-none">
<div class="input-main-80">
<span>降温需求到达</span>
<input @blur="blurChange(21971, $event)" v-model="inputData[21971]" @input="change(21971, $event)"
type="text" placeholder="0">
<span>级时湿帘泵1启动</span>
</div>
</div>
<div class="flex-view border-none shrink-none">
<div class="input-main">
<span>湿帘水泵2:</span>
</div>
<div class="input-btn ">
<div class="btn" @click="changeOpen(1,21972)" :class="inputData[21972] == 1 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div>
<div class="btn" @click="changeOpen(2,21972)" :class="inputData[21972] == 2 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div>
<div class="btn" @click="changeOpen(3,21972)" :class="inputData[21972] == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div>
</div>
</div>
<div class="flex-view shrink-none border-none">
<div class="input-main-80">
<span>降温需求到达</span>
<input @blur="blurChange(21973, $event)" v-model="inputData[21973]" @input="change(21973, $event)"
type="text" placeholder="0">
<span>级时湿帘泵2启动</span>
</div>
</div>
</template>
<template v-if="indexs==3">
<div class="flex-view border-none shrink-none">
<div class="input-main">
<span>湿帘外翻窗1模式:</span>
</div>
<div class="input-btn ">
<div class="btn" @click="changeOpen(1,21974)" :class="inputData[21974] == 1 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div>
<div class="btn" @click="changeOpen(2,21974)" :class="inputData[21974] == 2 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div>
<div class="btn" @click="changeOpen(3,21974)" :class="inputData[21974] == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div>
<div class="btn" @click="changeOpen(4,21974)" :class="inputData[21974] == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />停止
</div>
</div>
</div>
<div class="flex-view border-none shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen3(0)" :class="actList4[0] == '1' ? 'blue' : 'off'">
{{actList4[0] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>室温大于</span>
<input @blur="blurChangeCount(21976, $event)" v-model="inputData[21976]" @input="changeCountData(21976, $event)"
type="text" placeholder="0">
<span>开启湿帘外翻窗降温滞回带</span>
<input @blur="blurChange10(21977, $event)" v-model="inputData[21977]" @input="changeCount10(21977, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen3(1)" :class="actList4[1] == '1' ? 'blue' : 'off'">
{{actList4[1] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>风机结束时</span>
<input @blur="blurChange(21978, $event)" v-model="inputData[21978]" @input="change(21978, $event)"
type="text" placeholder="0">
<span>分钟之后关闭湿帘窗</span>
</div>
</div>
<div class="flex-view border-none shrink-none">
<div class="input-main">
<span>湿帘外翻窗2模式:</span>
</div>
<div class="input-btn ">
<div class="btn" @click="changeOpen(1,21979)" :class="inputData[21979] == 1 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div>
<div class="btn" @click="changeOpen(2,21979)" :class="inputData[21979] == 2 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div>
<div class="btn" @click="changeOpen(3,21979)" :class="inputData[21979] == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div>
<div class="btn" @click="changeOpen(4,21979)" :class="inputData[21979] == 4 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />停止
</div>
</div>
</div>
<div class="flex-view border-none shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen4(0)" :class="actList5[0] == '1' ? 'blue' : 'off'">
{{actList5[0] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>室温大于</span>
<input @blur="blurChangeCount(21981, $event)" v-model="inputData[21981]" @input="changeCountData(21981, $event)"
type="text" placeholder="0">
<span>开启湿帘外翻窗降温滞回带</span>
<input @blur="blurChange10(21982, $event)" v-model="inputData[21982]" @input="changeCount10(21982, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view border-none shrink-none padding-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen4(1)" :class="actList5[1] == '1' ? 'blue' : 'off'">
{{actList5[1] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>风机结束时</span>
<input @blur="blurChange(21983, $event)" v-model="inputData[21983]" @input="change(21983, $event)"
type="text" placeholder="0">
<span>分钟之后关闭湿帘窗</span>
</div>
</div>
</template>
</div>
</template>
<script>
export default {
data() {
return {
inputData: [],
actList1: [],
actList2: [],
actList3: [],
actList4: [],
actList5: [],
indexs: 1,
}
},
watch: {
$route(newVal, oldVal) {
const that = this;
this.indexs = this.$route.query.id ? this.$route.query.id : 1;
},
},
mounted() {
const that = this;
this.indexs = this.$route.query.id ? this.$route.query.id : 1;
setTimeout(() => {
that.dataInit();
}, 0);
//input获取焦点后全选
let inputList = document.querySelectorAll('input');
for (let index = 0; index < inputList.length; index++) {
inputList[index].onfocus = this.selectValue;//input放入焦点全选文本
}
},
methods: {
getName(){
if(this.indexs==1){
return '风机'
}else if(this.indexs==2){
return '湿帘泵'
}else if(this.indexs==3){
return '湿帘外翻窗'
}else{
return '湿帘风机'
}
},
//失去焦点 计算公式 x/10
blurChange10(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value * 10,
}; //避免开启多个计时器
if (store.nowInput != el.target.value) {
this.changeData(data);
}
// if (this.timer) {
// this.timer && clearInterval(this.timer);
// this.changeData(data);
// }
},
//反向计算 计算公式 x/10
changeCount10(code, el) {
var data = el.target.value * 10
var sendData = {
target: {
value: data
}
}
this.change(code, sendData)
},
// 计算展示值 计算公式 x/10
countData10(data) {
if (data) {
return data / 10
} else {
return 0
}
},
// 计算展示值 计算公式 (x - 400) / 10
countData(data) {
if (data) {
return (data - 400) / 10
} else {
return 0
}
},
//失去焦点
blurChangeCount(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: (el.target.value * 10) + 400,
}; //避免开启多个计时器
if (store.nowInput != el.target.value) {
this.changeData(data);
}
// if (this.timer) {
// this.timer && clearInterval(this.timer);
// this.changeData(data);
// }
},
changeCountData(code, el) {
var data = (el.target.value * 10) + 400
var sendData = {
target: {
value: data
}
}
this.change(code, sendData)
},
//开关无效
changeIndexOpen(active) {
if (this.actList1[active] == '1') {
this.actList1[active] = '0'
} else {
this.actList1[active] = '1'
}
this.$forceUpdate();
var revList = this.actList1.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num,2),
},
};
this.changeBtn(21951, dataNum);
},
//开关无效
changeIndexOpen1(active) {
if (this.actList2[active] == '1') {
this.actList2[active] = '0'
} else {
this.actList2[active] = '1'
}
this.$forceUpdate();
var revList = this.actList2.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(21957, dataNum);
},
//开关无效
changeIndexOpen2(active) {
if (this.actList3[active] == '1') {
this.actList3[active] = '0'
} else {
this.actList3[active] = '1'
}
this.$forceUpdate();
var revList = this.actList3.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(21963, dataNum);
},
//开关无效
changeIndexOpen3(active) {
if (this.actList4[active] == '1') {
this.actList4[active] = '0'
} else {
this.actList4[active] = '1'
}
this.$forceUpdate();
var revList = this.actList4.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(21975, dataNum);
},
//开关无效
changeIndexOpen4(active) {
if (this.actList5[active] == '1') {
this.actList5[active] = '0'
} else {
this.actList5[active] = '1'
}
this.$forceUpdate();
var revList = this.actList5.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(21980, dataNum);
},
getActive1() {
this.actList1 = []
var num = this.inputData[21951]
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.actList1 = openListNew.reverse();
},
getActive2() {
this.actList2 = []
var num = this.inputData[21957]
var num1 = this.padString(num.toString(2), 4)
var openListNew = []
openListNew = num1.split("")
this.actList2 = openListNew.reverse();
},
getActive3() {
this.actList3 = []
var num = this.inputData[21963]
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.actList3 = openListNew.reverse();
},
getActive4() {
this.actList4 = []
var num = this.inputData[21975]
var num1 = this.padString(num.toString(2), 2)
var openListNew = []
openListNew = num1.split("")
this.actList4 = openListNew.reverse();
},
getActive5() {
this.actList5 = []
var num = this.inputData[21980]
var num1 = this.padString(num.toString(2), 2)
var openListNew = []
openListNew = num1.split("")
this.actList5 = openListNew.reverse();
},
// 工作方式选择
changeOpen(index,code) {
this.inputData[code] = index;
var dataNum = {
target: {
value: index,
},
};
this.changeBtn(code, dataNum);
},
dataInit() {
var store = this.$store.state
var data = {
deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
};
this.api.fanwetcurtain(data).then(res => {
if (res.data.code == 200) {
this.inputData = res.data.data;
this.inputData[21958]=this.countData(this.inputData[21958])
this.inputData[21960]=this.countData10(this.inputData[21960])
this.inputData[21964]=this.countData10(this.inputData[21964])
this.inputData[21965]=this.countData(this.inputData[21965])
this.inputData[21966]=this.countData(this.inputData[21966])
this.inputData[21967]=this.countData(this.inputData[21967])
this.inputData[21968]=this.countData(this.inputData[21968])
this.inputData[21969]=this.countData(this.inputData[21969])
this.inputData[21976]=this.countData(this.inputData[21976])
this.inputData[21977]=this.countData10(this.inputData[21977])
this.inputData[21981]=this.countData(this.inputData[21981])
this.inputData[21982]=this.countData10(this.inputData[21982])
this.getActive1()
this.getActive2()
this.getActive3()
this.getActive4()
this.getActive5()
}
})
},
//二进制转换后的补全
padString(str, length) {
return str.padStart(length, '0');
},
//反转数组 不影响原数组
myReverse(arr) {
return [...arr].reverse()
},
//全选文本
selectValue(e) {
var store = this.$store.state
store.nowInput = e.target.value
e.currentTarget.select();
},
//失去焦点
blurChange(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value,
}; //避免开启多个计时器
if (store.nowInput != el.target.value) {
this.changeData(data);
}
// if (this.timer) {
// this.timer && clearInterval(this.timer);
// this.changeData(data);
// }
},
//修改数据的函数
changeBtn(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value,
};
this.delayTimerBtn(0, data);
},
//切换btn的限制 写入停止后j*100毫秒调取函数
delayTimerBtn(i, data) {
const that = this;
//整体接口
let j = this.$store.state.lateSendBtn;
//避免开启多个计时器
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
++i;
if (i == j) {
that.changeData(data);
clearInterval(this.timer);
}
}, 100);
},
change(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value,
};
this.delayTimer(0, data);
},
//限制 写入停止后j*100毫秒调取函数
delayTimer(i, data) {
// const that = this;
// //整体接口
// let j = this.$store.state.lateSend;
// //避免开启多个计时器
// this.timer && clearInterval(this.timer);
// this.timer = setInterval(() => {
// ++i;
// if (i == j) {
// that.changeData(data);
// clearInterval(this.timer);
// }
// }, 100);
},
changeData(data) {
var store = this.$store.state
this.api.postControlWrite(data).then((res) => {
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
type: "success",
});
store.nowInput = ''
// this.dataInit();
} else {
this.inputData[data.regAddress] = store.nowInput
this.$message.error(res.data.msg);
}
this.timer = null
});
},
},
}
</script>
<style lang="scss"></style>