wszhyWx/src/views/page/alarmSettings.vue
2025-06-27 17:42:15 +08:00

629 lines
30 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="all">
<div class="table-title">
<img src="../../assets/img/alarmSettings.png" alt="">{{$t('alarm.title')}}
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>{{$t('alarm.temperature.selectRealTime', {index:1})}}</span>
<el-dropdown @command="handleCommand1($event, 20080)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20080]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList1" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(0, 20081)">
<div v-if="inputDataNew[20081][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option1High')}}</span>
<input @blur="blurChange10('20082', $event)" v-model="inputData['20082']"
@input="changeCount10('20082', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.highAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(1, 20081)">
<div v-if="inputDataNew[20081][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option2Low')}}</span>
<input @blur="blurChange10('20083', $event)" v-model="inputData['20083']"
@input="changeCount10('20083', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.lowAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(2, 20081)">
<div v-if="inputDataNew[20081][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option3High')}}</span>
<input @blur="blurChangeCount('20084', $event)" v-model="inputData['20084']"
@input="changeCountData('20084', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.highAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20104, $event)" v-model="inputData[20104]" @input="change(20104, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="flex-sel padding-none" @click="changeOpenTrue(3, 20081)">
<div v-if="inputDataNew[20081][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option4Low')}}</span>
<input @blur="blurChangeCount('20085', $event)" v-model="inputData['20085']"
@input="changeCountData('20085', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.lowAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20105, $event)" v-model="inputData[20105]" @input="change(20105, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>{{$t('alarm.temperature.selectRealTime', {index:2})}}</span>
<el-dropdown @command="handleCommand1($event, 20086)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20086]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList1" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(0, 20087)">
<div v-if="inputDataNew[20087][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option1High')}}</span>
<input @blur="blurChange10('20088', $event)" v-model="inputData['20088']"
@input="changeCount10('20088', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.highAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(1, 20087)">
<div v-if="inputDataNew[20087][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option2Low')}}</span>
<input @blur="blurChange10('20089', $event)" v-model="inputData['20089']"
@input="changeCount10('20089', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.lowAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(2, 20087)">
<div v-if="inputDataNew[20087][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option3High')}}</span>
<input @blur="blurChangeCount('20090', $event)" v-model="inputData['20090']"
@input="changeCountData('20090', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.highAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20106, $event)" v-model="inputData[20106]" @input="change(20106, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="flex-sel padding-none" @click="changeOpenTrue(3, 20087)">
<div v-if="inputDataNew[20087][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.temperature.option4Low')}}</span>
<input @blur="blurChangeCount('20091', $event)" v-model="inputData['20091']"
@input="changeCountData('20091', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.temperature.lowAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20107, $event)" v-model="inputData[20107]" @input="change(20107, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>{{$t('alarm.humidity.selectRealTime', {index:1})}}</span>
<el-dropdown @command="handleCommand2($event, 20092)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20092]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList2" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(0, 20093)">
<div v-if="inputDataNew[20093][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option1High')}}</span>
<input @blur="blurChange10('20094', $event)" v-model="inputData['20094']"
@input="changeCount10('20094', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.highAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(1, 20093)">
<div v-if="inputDataNew[20093][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option2Low')}}</span>
<input @blur="blurChange10('20095', $event)" v-model="inputData['20095']"
@input="changeCount10('20095', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.lowAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(2, 20093)">
<div v-if="inputDataNew[20093][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option3High')}}</span>
<input @blur="blurChange10('20096', $event)" v-model="inputData['20096']"
@input="changeCount10('20096', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.highAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20108, $event)" v-model="inputData[20108]" @input="change(20108, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="flex-sel padding-none" @click="changeOpenTrue(3, 20093)">
<div v-if="inputDataNew[20093][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option4Low')}}</span>
<input @blur="blurChange10('20097', $event)" v-model="inputData['20097']"
@input="changeCount10('20097', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.lowAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20109, $event)" v-model="inputData[20109]" @input="change(20109, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>{{$t('alarm.humidity.selectRealTime', {index:2})}}</span>
<el-dropdown @command="handleCommand2($event, 20098)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20098]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList2" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(0, 20099)">
<div v-if="inputDataNew[20099][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option1High')}}</span>
<input @blur="blurChange10('20100', $event)" v-model="inputData['20100']"
@input="changeCount10('20100', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.highAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(1, 20099)">
<div v-if="inputDataNew[20099][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option2Low')}}</span>
<input @blur="blurChange10('20101', $event)" v-model="inputData['20101']"
@input="changeCount10('20101', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.lowAlarm')}}</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(2, 20099)">
<div v-if="inputDataNew[20099][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option3High')}}</span>
<input @blur="blurChange10('20102', $event)" v-model="inputData['20102']"
@input="changeCount10('20102', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.highAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20110, $event)" v-model="inputData[20110]" @input="change(20110, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" @click="changeOpenTrue(3, 20099)">
<div v-if="inputDataNew[20099][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>{{$t('alarm.humidity.option4Low')}}</span>
<input @blur="blurChange10('20103', $event)" v-model="inputData['20103']"
@input="changeCount10('20103', $event)" type="text" value="60" placeholder="60" />
<span>{{$t('alarm.humidity.lowAlarm')}}{{$t('alarm.channel')}}</span>
<input @blur="blurChange(20111, $event)" v-model="inputData[20111]" @input="change(20111, $event)"
type="text" placeholder="0">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputDataNew: {20099:[],20093:[],20087:[],20081:[],},
inputData: [],
typeList1: [
{ label: this.$t('alarm.temperature.average',{index:1}), value: 0 },
{ label: this.$t('alarm.temperature.average',{index:2}), value: 1 },
{ label: this.$t('alarm.temperature.sensor', {index:1}), value: 2 },
{ label: this.$t('alarm.temperature.sensor', {index:2}), value: 3 },
{ label: this.$t('alarm.temperature.sensor', {index:3}), value: 4 },
{ label: this.$t('alarm.temperature.sensor', {index:4}), value: 5 },
{ label: this.$t('alarm.temperature.sensor', {index:5}), value: 6 },
{ label: this.$t('alarm.temperature.sensor', {index:6}), value: 7 },
{ label: this.$t('alarm.temperature.sensor', {index:7}), value: 8 },
{ label: this.$t('alarm.temperature.sensor', {index:8}), value: 9 },
{ label: this.$t('alarm.temperature.sensor', {index:9}), value: 10 },
{ label: this.$t('alarm.temperature.sensor', {index:10}), value: 11 },
{ label: this.$t('alarm.temperature.sensor', {index:11}), value: 12 },
{ label: this.$t('alarm.temperature.sensor', {index:12}), value: 13 },
{ label: this.$t('alarm.temperature.sensor', {index:13}), value: 14 },
{ label: this.$t('alarm.temperature.sensor', {index:14}), value: 15 },
{ label: this.$t('alarm.temperature.sensor', {index:15}), value: 16 },],
typeList2: [
{ label:this.$t('alarm.humidity.average', {index:1}), value: 0 },
{ label:this.$t('alarm.humidity.average', {index:2}), value: 1 },
{ label: this.$t('alarm.humidity.sensor', {index:1}), value: 2 },
{ label: this.$t('alarm.humidity.sensor', {index:2}), value: 3 },
{ label: this.$t('alarm.humidity.sensor', {index:3}), value: 4 },
{ label: this.$t('alarm.humidity.sensor', {index:4}), value: 5 },
{ label: this.$t('alarm.humidity.sensor', {index:5}), value: 6 },
{ label: this.$t('alarm.humidity.sensor', {index:6}), value: 7 },
{ label: this.$t('alarm.humidity.sensor', {index:7}), value: 8 },
{ label: this.$t('alarm.humidity.sensor', {index:8}), value: 9 },
{ label: this.$t('alarm.humidity.sensor', {index:9}), value: 10 },
{ label: this.$t('alarm.humidity.sensor', {index:10}), value: 11 },
{ label: this.$t('alarm.humidity.sensor', {index:11}), value: 12 },
{ label: this.$t('alarm.humidity.sensor', {index:12}), value: 13 },
{ label: this.$t('alarm.humidity.sensor', {index:13}), value: 14 },
{ label: this.$t('alarm.humidity.sensor', {index:14}), value: 15 },
{ label: this.$t('alarm.humidity.sensor', {index:15}), value: 16 },],
loading:null,
}
},
watch:{
'$store.state.equipmentIndex'(newVal, oldVal) {
this.dataInit();
},
},
mounted() {
const that = this;
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: {
getData1(data) {
var name = ''
this.typeList1.forEach((el, index) => {
if (el.value == data) {
name = el.label
}
})
return name
},
getData2(data) {
var name = ''
this.typeList2.forEach((el, index) => {
if (el.value == data) {
name = el.label
}
})
return name
},
//类型选择温度
handleCommand1(command, code) {
this.typeList1.forEach((el, index) => {
if (el.value == command) {
this.inputDataNew[code] = el.label
}
})
var dataNum = {
target: {
value: command,
},
};
this.changeBtn(code, dataNum);
},
//类型选择湿度
handleCommand2(command, code) {
this.typeList2.forEach((el, index) => {
if (el.value == command) {
this.inputDataNew[code] = el.label
}
})
var dataNum = {
target: {
value: command,
},
};
this.changeBtn(code, dataNum);
},
//失去焦点 计算公式 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,
}; //避免开启多个计时器
console.log(store.nowInput, el.target.value, 111);
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
}
},
//失去焦点
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);
}
},
//失去焦点
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)
},
padString(str, length) {
return str.padStart(length, '0');
},
//反转数组 不影响原数组
myReverse(arr) {
return [...arr].reverse()
},
changeOpenTrue(index, code) {
if (this.inputDataNew[code][index] == 0) {
this.inputDataNew[code][index] = 1
} else {
this.inputDataNew[code][index] = 0
}
this.$forceUpdate();
var num = this.myReverse(this.inputDataNew[code]).join("")
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(code, dataNum);
},
dataInit() {
this.loading = this.$loading({
lock: true,
text: this.$t('message.loading'),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var store = this.$store.state
var data = {
deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
};
this.api.targetValue(data).then(res => {
this.loading.close()
if (res.data.code == 200) {
this.inputData = JSON.parse(JSON.stringify(res.data.data));
this.inputDataNew = JSON.parse(JSON.stringify(res.data.data))
this.inputDataNew[20080] = this.getData1(this.inputData[20080])
this.inputDataNew[20086] = this.getData1(this.inputData[20086])
this.inputData[20082] = this.countData10(this.inputData[20082])
this.inputData[20083] = this.countData10(this.inputData[20083])
this.inputData[20084] = this.countData(this.inputData[20084])
this.inputData[20085] = this.countData(this.inputData[20085])
this.inputData[20088] = this.countData10(this.inputData[20088])
this.inputData[20089] = this.countData10(this.inputData[20089])
this.inputData[20090] = this.countData(this.inputData[20090])
this.inputData[20091] = this.countData(this.inputData[20091])
this.inputDataNew[20092] = this.getData2(this.inputData[20092])
this.inputDataNew[20098] = this.getData2(this.inputData[20098])
this.inputData[20094] = this.countData10(this.inputData[20094])
this.inputData[20095] = this.countData10(this.inputData[20095])
this.inputData[20096] = this.countData10(this.inputData[20096])
this.inputData[20097] = this.countData10(this.inputData[20097])
this.inputData[20100] = this.countData10(this.inputData[20100])
this.inputData[20101] = this.countData10(this.inputData[20101])
this.inputData[20102] = this.countData10(this.inputData[20102])
this.inputData[20103] = this.countData10(this.inputData[20103])
this.getOpenData(20081)
this.getOpenData(20087)
this.getOpenData(20093)
this.getOpenData(20099)
}
})
},
getOpenData(code) {
var num1 = this.inputData[code] ? this.inputData[code] : 0
var num11 = this.padString(num1.toString(2), 4)
var openList1New
openList1New = num11.split("")
this.inputDataNew[code] = openList1New.reverse()
console.log(this.inputDataNew[code],code);
},
//全选文本
selectValue(e) {
var store = this.$store.state
store.nowInput = e.target.value
e.currentTarget.select();
},
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);
},
//修改数据的函数
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);
},
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>