811 lines
20 KiB
Vue
811 lines
20 KiB
Vue
<script setup>
|
|
import { ElMessage } from "element-plus";
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import getPath from "@/utils/getPath.js";
|
|
import dialogBox from "./components/dialogBox.vue";
|
|
import {
|
|
getGeneralSituation,
|
|
getElectricalCondition,
|
|
getFailureWarning,
|
|
getBootStrategy,
|
|
getMaintenanceReminder,
|
|
getPolicyEditing,
|
|
setAircondition,
|
|
} from "@/api/air-conditioning";
|
|
const systemNumList = ref([
|
|
{
|
|
name: "运行设备数量",
|
|
num: "1130",
|
|
},
|
|
{
|
|
name: "停机设备数量",
|
|
num: "1130",
|
|
},
|
|
]);
|
|
const img = ref([getPath.defaultsystemnum, getPath.stopsystemnum]);
|
|
const overviewList = ref([
|
|
{
|
|
name: "展馆面积",
|
|
num: 83,
|
|
unit: "万m²",
|
|
},
|
|
{
|
|
name: "设备总量",
|
|
num: 83,
|
|
unit: "台",
|
|
},
|
|
]);
|
|
// 用电情况
|
|
const electricityContent = ref([
|
|
{
|
|
name: "今日用电量",
|
|
value: 66,
|
|
unit: "kWh",
|
|
},
|
|
{
|
|
name: "今日用电费用",
|
|
value: 66,
|
|
unit: "元",
|
|
},
|
|
{
|
|
name: "本月用电量",
|
|
value: 66,
|
|
unit: "kWh",
|
|
},
|
|
{
|
|
name: "本月用电费用",
|
|
value: 66,
|
|
unit: "元",
|
|
},
|
|
{
|
|
name: "本年用电量",
|
|
value: 66,
|
|
unit: "kWh",
|
|
},
|
|
{
|
|
name: "本年用电费用",
|
|
value: 66,
|
|
unit: "元",
|
|
},
|
|
]);
|
|
|
|
// 故障报警
|
|
const faultList = ref([
|
|
{
|
|
name: "1号机组的XX模块故障",
|
|
date: "2023-11-28 16:58:02",
|
|
},
|
|
{
|
|
name: "1号机组的XX模块故障",
|
|
date: "2023-11-28 16:58:02",
|
|
},
|
|
{
|
|
name: "1号机组的XX模块故障",
|
|
date: "2023-11-28 16:58:02",
|
|
},
|
|
]);
|
|
// 开机策略
|
|
const runTimeList = ref([
|
|
{
|
|
name: "休息日",
|
|
value: false,
|
|
},
|
|
{
|
|
name: "节假日",
|
|
value: true,
|
|
},
|
|
{
|
|
name: "日常",
|
|
value: true,
|
|
},
|
|
{
|
|
name: "全开",
|
|
value: true,
|
|
},
|
|
{
|
|
name: "全关",
|
|
value: true,
|
|
},
|
|
]);
|
|
// 维护提醒
|
|
const maintenanceList = ref([
|
|
{
|
|
name: "1#主机",
|
|
date: "10",
|
|
},
|
|
{
|
|
name: "2#主机",
|
|
date: "03",
|
|
},
|
|
{
|
|
name: "3#主机",
|
|
date: "01",
|
|
},
|
|
{
|
|
name: "4#主机",
|
|
date: "07",
|
|
},
|
|
{
|
|
name: "5#主机",
|
|
date: "09",
|
|
},
|
|
{
|
|
name: "6#主机",
|
|
date: "10",
|
|
},
|
|
{
|
|
name: "7#主机",
|
|
date: "06",
|
|
},
|
|
{
|
|
name: "8#主机",
|
|
date: "04",
|
|
},
|
|
{
|
|
name: "9#主机",
|
|
date: "12",
|
|
},
|
|
{
|
|
name: "10#主机",
|
|
date: "11",
|
|
},
|
|
{
|
|
name: "11#主机",
|
|
date: "05",
|
|
},
|
|
{
|
|
name: "12#主机",
|
|
date: "06",
|
|
},
|
|
{
|
|
name: "13#主机",
|
|
date: "09",
|
|
},
|
|
]);
|
|
const emit = defineEmits(["closeAir"]);
|
|
// 弹窗
|
|
const dialogBoxShow = ref(false);
|
|
const dialogName = ref("");
|
|
const id = ref("");
|
|
const openDialog = (item) => {
|
|
emit("closeAir", "");
|
|
dialogBoxShow.value = true;
|
|
dialogName.value = item.name;
|
|
id.value = item.StrategyId;
|
|
};
|
|
const closeDialog = (val) => {
|
|
console.log(val, "xxxxxxxxxx");
|
|
let params = {
|
|
id: id.value,
|
|
name: dialogName.value,
|
|
value: deviceList.value === "" ? null : deviceList.value,
|
|
};
|
|
console.log(deviceList.value, "参数", params);
|
|
getPolicyEditing(params).then((res) => {
|
|
if (res.code === 200) {
|
|
ElMessage({
|
|
message: res.msg,
|
|
type: "success",
|
|
});
|
|
} else {
|
|
ElMessage({
|
|
message: res.msg,
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
dialogBoxShow.value = val;
|
|
};
|
|
const deviceList = ref("");
|
|
// 获取设备数组
|
|
const getDevice = (data) => {
|
|
console.log(data);
|
|
// 获取设备
|
|
deviceList.value = data.join(",");
|
|
};
|
|
//维护提醒
|
|
const controlBtn = ref("on");
|
|
const toggleControl = (event) => {
|
|
controlBtn.value = event.srcElement.className;
|
|
maintenanceReminderInterface();
|
|
};
|
|
// 获取概况数据
|
|
const generalSituationInterface = () => {
|
|
getGeneralSituation().then((res) => {
|
|
systemNumList.value[0].num = res.data[0].Operation;
|
|
systemNumList.value[1].num = res.data[0].Stop;
|
|
overviewList.value[0].num = res.data[0].Area;
|
|
overviewList.value[1].num = res.data[0].Amount;
|
|
});
|
|
};
|
|
// 获取故障报警
|
|
const failureWarningInterface = () => {
|
|
getFailureWarning().then((res) => {
|
|
faultList.value = res.data.map((el) => {
|
|
return {
|
|
name: el.FailureWarning,
|
|
date: el.FailureTime,
|
|
};
|
|
});
|
|
});
|
|
};
|
|
// 获取用电情况数据
|
|
const electricalConditionInterface = () => {
|
|
getElectricalCondition().then((res) => {
|
|
// 今日
|
|
// electricityContent.value[0].value = res.data[0].EH;
|
|
// electricityContent.value[1].value = res.data[0].Electricity;
|
|
electricityContent.value[0].value = unitConversion(res.data[0].EH, 0);
|
|
electricityContent.value[1].value = unitConversion(res.data[0].Electricity, 1);
|
|
// 本月
|
|
// electricityContent.value[2].value = res.data[1].EH;
|
|
// electricityContent.value[3].value = res.data[1].Electricity;
|
|
electricityContent.value[2].value = unitConversion(res.data[1].EH, 2);
|
|
electricityContent.value[3].value = unitConversion(res.data[1].Electricity, 3);
|
|
|
|
// electricityContent.value[4].value = res.data[2].EH;
|
|
electricityContent.value[4].value = unitConversion(res.data[2].EH, 4);
|
|
// electricityContent.value[5].value = res.data[2].Electricity;
|
|
electricityContent.value[5].value = unitConversion(res.data[2].Electricity, 5);
|
|
});
|
|
};
|
|
//单位换算
|
|
function unitConversion(params, num) {
|
|
// 本年
|
|
let dataString = params.toString();
|
|
|
|
// 使用 split 方法按小数点分割
|
|
let integerPart = dataString.split(".")[0];
|
|
|
|
// 获取整数部分的长度
|
|
let lengthOfIntegerPart = integerPart.length;
|
|
let updatedValue = null;
|
|
// 判断整数部分的长度是否大于等于5
|
|
if (lengthOfIntegerPart >= 5) {
|
|
if (num == 0 || num == 2 || num == 4) {
|
|
electricityContent.value[num].unit = "万kWh";
|
|
} else {
|
|
electricityContent.value[num].unit = "万元";
|
|
}
|
|
return (updatedValue = formatNumber(integerPart, true));
|
|
} else {
|
|
return formatNumber(params, false);
|
|
}
|
|
}
|
|
//整数转换
|
|
function formatNumber(num, status) {
|
|
// 检查数字是否为整数
|
|
if (Number.isInteger(num)) {
|
|
return num; // 如果是整数，直接返回
|
|
} else {
|
|
if (status == true) {
|
|
return parseFloat((num / 10000).toFixed(3)); // 否则，保留三位小数并转换回数字
|
|
} else {
|
|
return parseFloat(num.toFixed(3)); // 否则，保留三位小数并转换回数字
|
|
}
|
|
}
|
|
}
|
|
// 开机策略
|
|
const bootStrategyInterface = () => {
|
|
getBootStrategy().then((res) => {
|
|
runTimeList.value = res.data.map((el) => {
|
|
return {
|
|
name: el.StrategyName,
|
|
value: el.StrategyState,
|
|
StrategyId: el.StrategyId,
|
|
};
|
|
});
|
|
});
|
|
};
|
|
// 维护提醒
|
|
const maintenanceReminderInterface = () => {
|
|
console.log(controlBtn.value);
|
|
// let params = {
|
|
// name: controlBtn.value === "on" ? "已超期" : "即将开始",
|
|
// };
|
|
getMaintenanceReminder().then((res) => {
|
|
maintenanceList.value = res.data.map((el) => {
|
|
return {
|
|
name: el.DeviceName,
|
|
date: el.Status,
|
|
};
|
|
});
|
|
});
|
|
};
|
|
|
|
function btnControl(item, type) {
|
|
let params = {
|
|
StrategyId: item.StrategyId,
|
|
Type: type,
|
|
};
|
|
setAircondition(params).then((res) => {
|
|
if (res.code == 200) {
|
|
ElMessage({
|
|
message: "开机策略操作成功",
|
|
type: "success",
|
|
});
|
|
bootStrategyInterface();
|
|
} else {
|
|
ElMessage({
|
|
message: res.msg,
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
// 概况接口
|
|
generalSituationInterface();
|
|
// 用电接口
|
|
electricalConditionInterface();
|
|
// 故障报警接口
|
|
failureWarningInterface();
|
|
// 开机策略接口
|
|
bootStrategyInterface();
|
|
// 维护提醒接口
|
|
maintenanceReminderInterface();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page m100">
|
|
<!-- 弹窗-->
|
|
<dialogBox
|
|
v-if="dialogBoxShow"
|
|
@update="closeDialog"
|
|
:dialogName="dialogName"
|
|
@sendDevice="getDevice"
|
|
/>
|
|
<div class="page-left-box">
|
|
<!-- 概况-->
|
|
<div class="title">
|
|
<span>概况</span>
|
|
</div>
|
|
<div id="overview" class="margin10 box-bg overview">
|
|
<div class="overview-system">
|
|
<div v-for="(item, index) in systemNumList" class="overview-system-item">
|
|
<img :src="img[index]" alt="" srcset="" />
|
|
<p>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span class="num">{{ item.num }}</span>
|
|
<span>台</span>
|
|
</p>
|
|
·
|
|
</div>
|
|
</div>
|
|
<div v-for="(item, index) in overviewList" :class="'overview-item' + index">
|
|
<span class="name">{{ item.name }}</span>
|
|
<p>
|
|
<span class="value">{{ item.num }}</span>
|
|
<span class="unit">{{ item.unit }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- 用电情况-->
|
|
<div class="title margin10">
|
|
<span>用电情况</span>
|
|
</div>
|
|
<div id="electricity" class="margin10 box-bg">
|
|
<div class="electricity-left">
|
|
<span> </span>
|
|
<span> </span>
|
|
<span></span>
|
|
</div>
|
|
<div class="electricity-right">
|
|
<ul>
|
|
<li v-for="(item, index) in electricityContent">
|
|
<span>{{ item.name }}</span>
|
|
<span
|
|
><span class="value" style="font-size: 1rem">{{ item.value }}</span
|
|
><span class="unit">{{ item.unit }}</span></span
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- 故障报警-->
|
|
<div class="title margin10">
|
|
<span>故障报警</span>
|
|
</div>
|
|
<div id="fault" class="margin10 box-bg">
|
|
<p v-for="s in faultList">
|
|
<span class="name">{{ s.name }}</span>
|
|
<span class="date">时间：{{ s.date }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="page-right-box">
|
|
<!-- 开机策略 -->
|
|
<div class="title">
|
|
<span>开机策略</span>
|
|
</div>
|
|
<div class="margin10 box-bg" style="height: 32.7%">
|
|
<!-- tbale -->
|
|
<div class="runningState">
|
|
<div class="tableTitle">
|
|
<span>策略名称</span>
|
|
<span>策略状态</span>
|
|
<span>操作</span>
|
|
</div>
|
|
<div class="tableContent">
|
|
<div
|
|
class="tableBoby"
|
|
@click="openDialog(item)"
|
|
v-for="(item, index) in runTimeList"
|
|
:key="index"
|
|
>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span class="control">
|
|
<div class="tooltip-text" v-if="item.value == '0'">停止</div>
|
|
<div class="tooltip-text" v-else-if="item.value == '1'">运行</div>
|
|
<i :class="'state' + item.value"></i>
|
|
</span>
|
|
<p class="control-btn">
|
|
<!-- :class="item.value === '0' ? 'select' : ''" -->
|
|
<span class="on" @click.stop="btnControl(item, 1)">开</span>
|
|
<!-- :class="item.value !== '0' ? 'select' : ''" -->
|
|
<span
|
|
class="off"
|
|
style="margin-left: 0.7rem"
|
|
@click.stop="btnControl(item, 0)"
|
|
>关</span
|
|
>
|
|
</p>
|
|
<!-- <el-switch v-model="item.value" style="left: 8px" /> -->
|
|
<!-- <span style="cursor: pointer">编辑</span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 维护提醒-->
|
|
<div class="title margin10">
|
|
<span>设备运行状态</span>
|
|
<!-- <p class="control-btn">
|
|
<span
|
|
:class="controlBtn === 'on' ? 'select' : ''"
|
|
class="on"
|
|
@click="toggleControl"
|
|
>已超期</span
|
|
>
|
|
<span
|
|
:class="controlBtn === 'off' ? 'select' : ''"
|
|
class="off"
|
|
style="margin-left: 0.7rem"
|
|
@click="toggleControl"
|
|
>即将开始</span
|
|
>
|
|
</p> -->
|
|
</div>
|
|
<div id="reminder" class="margin10 box-bg" style="height: 42%">
|
|
<div class="runningState">
|
|
<div class="tableTitle" style="height: 12%">
|
|
<span>策略名称</span>
|
|
<span>状态</span>
|
|
</div>
|
|
<div class="tableContent">
|
|
<div
|
|
class="tableBoby"
|
|
style="height: 12%"
|
|
v-for="(item, index) in maintenanceList"
|
|
:key="index"
|
|
>
|
|
<span class="name">{{ item.name }}</span>
|
|
<span class="date">
|
|
<!-- {{ item.date }} -->
|
|
<div class="tooltip-text" v-if="item.date == 0">停止</div>
|
|
<div class="tooltip-text" v-else-if="item.date == 1">运行</div>
|
|
<div class="tooltip-text" v-else>离线</div>
|
|
<i :class="'state' + item.date"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.state0,
|
|
.state1,
|
|
.state2,
|
|
.statebad {
|
|
width: 1.1rem;
|
|
height: 1.1rem;
|
|
display: block;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.state0 {
|
|
background-image: url("@/assets/images/lighting/state0.png");
|
|
}
|
|
.tooltip-text {
|
|
visibility: hidden; /* 默认隐藏 */
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
margin-top: 0;
|
|
margin-left: 80px; /* 居中对齐 */
|
|
opacity: 0; /* 透明度设置为0 */
|
|
transition: opacity 0.3s; /* 添加过渡效果 */
|
|
font-weight: 600;
|
|
}
|
|
.date:hover .tooltip-text {
|
|
visibility: visible; /* 悬停时可见 */
|
|
opacity: 1; /* 悬停时不透明 */
|
|
}
|
|
.control:hover .tooltip-text {
|
|
visibility: visible; /* 悬停时可见 */
|
|
opacity: 1; /* 悬停时不透明 */
|
|
}
|
|
.state1 {
|
|
background-image: url("@/assets/images/lighting/state1.png");
|
|
}
|
|
.state2 {
|
|
background-image: url("@/assets/images/lighting/state2.png");
|
|
}
|
|
.statebad {
|
|
background-image: url("@/assets/images/lighting/state2.png");
|
|
}
|
|
#reminder {
|
|
height: vh(576);
|
|
background-image: url("@/assets/images/air-conditioning/reminder-bg.png");
|
|
}
|
|
|
|
#overview > div {
|
|
width: 24.125rem;
|
|
height: 27%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 4.75rem;
|
|
padding-right: 1.3rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.overview {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-content: space-evenly;
|
|
|
|
&-system {
|
|
padding: 0 !important;
|
|
display: flex;
|
|
justify-content: space-around !important;
|
|
|
|
&-item {
|
|
display: flex;
|
|
|
|
img {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.name {
|
|
font-size: 0.8rem;
|
|
margin-bottom: 0.5rem;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item0 {
|
|
background-size: 100% 100%;
|
|
background-image: url("@/assets/images/air-conditioning/area.png");
|
|
}
|
|
|
|
&-item1 {
|
|
background-size: 100% 100%;
|
|
background-image: url("@/assets/images/air-conditioning/system-total.png");
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
font-size: 0.8rem;
|
|
color: rgba(221, 255, 253, 1);
|
|
}
|
|
|
|
.value {
|
|
margin-right: 0.7rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: rgba(91, 250, 241, 1);
|
|
}
|
|
|
|
//用电
|
|
#electricity {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.electricity-left {
|
|
width: 12.6%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-around;
|
|
|
|
span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 21.5%;
|
|
background-size: 100% 100%;
|
|
background-image: url("@/assets/images/air-conditioning/electricity.png");
|
|
}
|
|
}
|
|
.electricity-right {
|
|
width: 69%;
|
|
height: 100%;
|
|
ul {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-evenly;
|
|
//background-color: #fff;
|
|
li {
|
|
height: 11%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 0.875rem;
|
|
padding: 0 0.5rem;
|
|
background-size: 100% 100%;
|
|
background-image: url("@/assets/images/air-conditioning/electricityBg.png");
|
|
}
|
|
}
|
|
}
|
|
//故障
|
|
#fault::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
#fault {
|
|
padding: 0 1rem;
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// align-content: space-evenly;
|
|
p {
|
|
margin: 0.8rem;
|
|
width: 100%;
|
|
height: 20%;
|
|
background-image: url("@/assets/images/air-conditioning/fault.png");
|
|
background-size: 100% 100%;
|
|
padding-left: 3.75rem;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
span {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.name {
|
|
font-weight: 600;
|
|
color: rgba(91, 250, 241, 1);
|
|
}
|
|
.num {
|
|
color: rgba(1, 246, 139, 1);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
.date {
|
|
color: rgba(202, 202, 202, 1);
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
//开机策略
|
|
.tableBoby > span {
|
|
//width: 4rem;
|
|
text-align: center;
|
|
flex-basis: 33%;
|
|
display: block;
|
|
}
|
|
.tableBoby .date {
|
|
font-weight: 600;
|
|
color: rgba(61, 255, 244, 1);
|
|
span {
|
|
font-weight: normal;
|
|
color: rgba(221, 255, 253, 1);
|
|
}
|
|
}
|
|
:deep(.el-switch) {
|
|
//width: 4rem;
|
|
flex-basis: 33%;
|
|
justify-content: center;
|
|
}
|
|
.runningState {
|
|
height: 98%;
|
|
width: 100%;
|
|
padding: 2% 2%;
|
|
box-sizing: border-box;
|
|
.tableTitle {
|
|
background: url("../../assets/images/overview/runTime.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 15.5%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
span {
|
|
flex-basis: 33%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.tableContent {
|
|
width: 100%;
|
|
height: calc(100% - 4.5%);
|
|
overflow: auto;
|
|
scrollbar-width: none; /* firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
.tableBoby {
|
|
cursor: pointer;
|
|
background: url("../../assets/images/air-conditioning/table-item.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 15.5%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
margin-top: 0.3rem;
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
display: none; /* Chrome Safari */
|
|
}
|
|
}
|
|
:deep(.el-switch__core) {
|
|
border-radius: 0;
|
|
background: transparent;
|
|
border: 1px solid rgba(223, 94, 94, 1);
|
|
}
|
|
|
|
:deep(.el-switch.is-checked .el-switch__core) {
|
|
background: transparent;
|
|
border: 1px solid rgba(80, 233, 83, 1);
|
|
}
|
|
:deep(.el-switch__core .el-switch__action) {
|
|
border-radius: 0;
|
|
height: 13px;
|
|
width: 13px;
|
|
background: rgba(223, 94, 94, 1);
|
|
}
|
|
:deep(.el-switch.is-checked .el-switch__action) {
|
|
border-radius: 0;
|
|
height: 13px;
|
|
width: 13px;
|
|
background: rgba(80, 233, 83, 1);
|
|
}
|
|
.control-btn {
|
|
display: flex;
|
|
span:hover {
|
|
background-image: url("@/assets/images/air-tab-select.png") !important;
|
|
}
|
|
.select {
|
|
background-image: url("@/assets/images/air-tab-select.png") !important;
|
|
}
|
|
|
|
span {
|
|
background-image: url("@/assets/images/air-tab.png");
|
|
cursor: pointer;
|
|
font-family: normal;
|
|
color: rgba(221, 255, 253, 1);
|
|
background-size: 100% 100%;
|
|
font-size: 0.8rem;
|
|
padding: 0.2rem 1.1rem;
|
|
}
|
|
}
|
|
// .state0 {
|
|
|
|
// }
|
|
</style>
|