优化空调_9_29
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>长岛海洋生态文明展览馆</title>
|
||||
<script type="module" crossorigin src="/assets/index-3d36f7da.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-63407875.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -40,6 +40,14 @@ export function getMaintenanceReminder(params){
|
|||
params
|
||||
})
|
||||
}
|
||||
//获取设备运行状态
|
||||
// export function GetMaintenanceReminder(params){
|
||||
// return http({
|
||||
// url:'/api/GetMaintenanceReminder',
|
||||
// method:'get',
|
||||
// params
|
||||
// })
|
||||
// }
|
||||
// 获取策略编辑
|
||||
export function getPolicyEditing(params){
|
||||
return http({
|
||||
|
|
|
|||
|
|
@ -171,13 +171,12 @@ const openDialog = (item) => {
|
|||
emit("closeAir", "");
|
||||
dialogBoxShow.value = true;
|
||||
dialogName.value = item.name;
|
||||
id.value = item.StrategyId
|
||||
|
||||
id.value = item.StrategyId;
|
||||
};
|
||||
const closeDialog = (val) => {
|
||||
console.log(val, "xxxxxxxxxx");
|
||||
let params = {
|
||||
id:id.value,
|
||||
id: id.value,
|
||||
name: dialogName.value,
|
||||
value: deviceList.value === "" ? null : deviceList.value,
|
||||
};
|
||||
|
|
@ -234,16 +233,58 @@ const failureWarningInterface = () => {
|
|||
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 = 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[4].value = res.data[2].EH;
|
||||
electricityContent.value[5].value = res.data[2].Electricity;
|
||||
// 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) => {
|
||||
|
|
@ -259,14 +300,14 @@ const bootStrategyInterface = () => {
|
|||
// 维护提醒
|
||||
const maintenanceReminderInterface = () => {
|
||||
console.log(controlBtn.value);
|
||||
let params = {
|
||||
name: controlBtn.value === "on" ? "已超期" : "即将开始",
|
||||
};
|
||||
getMaintenanceReminder(params).then((res) => {
|
||||
// let params = {
|
||||
// name: controlBtn.value === "on" ? "已超期" : "即将开始",
|
||||
// };
|
||||
getMaintenanceReminder().then((res) => {
|
||||
maintenanceList.value = res.data.map((el) => {
|
||||
return {
|
||||
name: el.DeviceName,
|
||||
date: el.OverDue,
|
||||
date: el.Status,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -279,6 +320,10 @@ function btnControl(item, type) {
|
|||
};
|
||||
setAircondition(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
message: "开机策略操作成功",
|
||||
type: "success",
|
||||
});
|
||||
bootStrategyInterface();
|
||||
} else {
|
||||
ElMessage({
|
||||
|
|
@ -318,10 +363,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div id="overview" class="margin10 box-bg overview">
|
||||
<div class="overview-system">
|
||||
<div
|
||||
v-for="(item, index) in systemNumList"
|
||||
class="overview-system-item"
|
||||
>
|
||||
<div v-for="(item, index) in systemNumList" class="overview-system-item">
|
||||
<img :src="img[index]" alt="" srcset="" />
|
||||
<p>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
|
|
@ -331,10 +373,7 @@ onMounted(() => {
|
|||
·
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in overviewList"
|
||||
:class="'overview-item' + index"
|
||||
>
|
||||
<div v-for="(item, index) in overviewList" :class="'overview-item' + index">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<p>
|
||||
<span class="value">{{ item.num }}</span>
|
||||
|
|
@ -357,9 +396,7 @@ onMounted(() => {
|
|||
<li v-for="(item, index) in electricityContent">
|
||||
<span>{{ item.name }}</span>
|
||||
<span
|
||||
><span class="value" style="font-size: 1rem">{{
|
||||
item.value
|
||||
}}</span
|
||||
><span class="value" style="font-size: 1rem">{{ item.value }}</span
|
||||
><span class="unit">{{ item.unit }}</span></span
|
||||
>
|
||||
</li>
|
||||
|
|
@ -382,7 +419,7 @@ onMounted(() => {
|
|||
<div class="title">
|
||||
<span>开机策略</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
<div class="margin10 box-bg" style="height: 32.7%">
|
||||
<!-- tbale -->
|
||||
<div class="runningState">
|
||||
<div class="tableTitle">
|
||||
|
|
@ -399,17 +436,15 @@ onMounted(() => {
|
|||
>
|
||||
<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="item.value !== '0' ? 'select' : ''"
|
||||
class="on"
|
||||
@click.stop="btnControl(item, 1)"
|
||||
>开</span
|
||||
>
|
||||
<span
|
||||
:class="item.value === '0' ? 'select' : ''"
|
||||
class="off"
|
||||
style="margin-left: 0.7rem"
|
||||
@click.stop="btnControl(item, 0)"
|
||||
|
|
@ -424,8 +459,8 @@ onMounted(() => {
|
|||
</div>
|
||||
<!-- 维护提醒-->
|
||||
<div class="title margin10">
|
||||
<span>维护提醒</span>
|
||||
<p class="control-btn">
|
||||
<span>设备运行状态</span>
|
||||
<!-- <p class="control-btn">
|
||||
<span
|
||||
:class="controlBtn === 'on' ? 'select' : ''"
|
||||
class="on"
|
||||
|
|
@ -439,23 +474,29 @@ onMounted(() => {
|
|||
@click="toggleControl"
|
||||
>即将开始</span
|
||||
>
|
||||
</p>
|
||||
</p> -->
|
||||
</div>
|
||||
<div id="reminder" class="margin10 box-bg">
|
||||
<div id="reminder" class="margin10 box-bg" style="height: 42%">
|
||||
<div class="runningState">
|
||||
<div class="tableTitle" style="height: 7%">
|
||||
<span>设备名称</span>
|
||||
<span>超期</span>
|
||||
<div class="tableTitle" style="height: 12%">
|
||||
<span>策略名称</span>
|
||||
<span>状态</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div
|
||||
class="tableBoby"
|
||||
style="height: 7%"
|
||||
style="height: 12%"
|
||||
v-for="(item, index) in maintenanceList"
|
||||
:key="index"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="date">{{ item.date }} <span>小时</span></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>
|
||||
|
|
@ -467,7 +508,8 @@ onMounted(() => {
|
|||
<style lang="scss" scoped>
|
||||
.state0,
|
||||
.state1,
|
||||
.state2 {
|
||||
.state2,
|
||||
.statebad {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
display: block;
|
||||
|
|
@ -478,13 +520,36 @@ onMounted(() => {
|
|||
.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");
|
||||
|
|
@ -683,8 +748,7 @@ onMounted(() => {
|
|||
-ms-overflow-style: none; /* IE 10+ */
|
||||
.tableBoby {
|
||||
cursor: pointer;
|
||||
background: url("../../assets/images/air-conditioning/table-item.png")
|
||||
no-repeat;
|
||||
background: url("../../assets/images/air-conditioning/table-item.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 15.5%;
|
||||
|
|
@ -723,7 +787,9 @@ onMounted(() => {
|
|||
}
|
||||
.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;
|
||||
}
|
||||
|
|
@ -738,4 +804,7 @@ onMounted(() => {
|
|||
padding: 0.2rem 1.1rem;
|
||||
}
|
||||
}
|
||||
// .state0 {
|
||||
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -223,8 +223,11 @@ onMounted(()=>{
|
|||
<div v-for="(item,index) in operationLeftList" class="system-item" :key="'sys'+index">
|
||||
<span class="system-item-title">{{ item.name }}</span>
|
||||
<div class="system-item-right">
|
||||
<p v-for="(s,i) in item.children">
|
||||
<p v-for="(s,i) in item.children" class="tooltip-content">
|
||||
<span>{{ s.DrainingName }}</span>
|
||||
<div class="tooltip-text" v-if="s.DrainingState == 0">运行</div>
|
||||
<div class="tooltip-text" v-else-if="s.DrainingState == 1">停止</div>
|
||||
<div class="tooltip-text" v-else-if="s.DrainingState == -1">离线</div>
|
||||
<span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -240,8 +243,11 @@ onMounted(()=>{
|
|||
<div v-for="(item,index) in operationRightList" class="system-item" :key="'sys'+index">
|
||||
<span class="system-item-title">{{ item.name }}</span>
|
||||
<div class="system-item-right">
|
||||
<p v-for="(s,i) in item.children">
|
||||
<p v-for="(s,i) in item.children" class="tooltip-content">
|
||||
<span>{{ s.DrainingName }}</span>
|
||||
<div class="tooltip-text" v-if="s.DrainingState == 0">运行</div>
|
||||
<div class="tooltip-text" v-else-if="s.DrainingState == 1">停止</div>
|
||||
<div class="tooltip-text" v-else-if="s.DrainingState == -1">离线</div>
|
||||
<span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -314,4 +320,21 @@ onMounted(()=>{
|
|||
.state2{
|
||||
background-image: url("@/assets/images/drainage/state2.png");
|
||||
}
|
||||
.tooltip-text {
|
||||
visibility: hidden; /* 默认隐藏 */
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin-top: 0;
|
||||
margin-left: 198px; /* 居中对齐 */
|
||||
opacity: 0; /* 透明度设置为0 */
|
||||
transition: opacity 0.3s; /* 添加过渡效果 */
|
||||
font-weight: 600
|
||||
}
|
||||
.tooltip-content:hover .tooltip-text {
|
||||
visibility: visible; /* 悬停时可见 */
|
||||
opacity: 1; /* 悬停时不透明 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -270,13 +270,13 @@ const drawFaultConditionsChart = (params) => {
|
|||
color: "rgba(1, 246, 139, 1)",
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 20,
|
||||
fontFamily:'D-DIN-Bold',
|
||||
fontFamily: "D-DIN-Bold",
|
||||
},
|
||||
a1: {
|
||||
color: color[1],
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 20,
|
||||
fontFamily:'D-DIN-Bold',
|
||||
fontFamily: "D-DIN-Bold",
|
||||
},
|
||||
s0: {
|
||||
color: "#fff",
|
||||
|
|
@ -639,7 +639,7 @@ const drawLightLoadChart = (params) => {
|
|||
icon: "rect",
|
||||
top: 10,
|
||||
// left: "right",
|
||||
right:10,
|
||||
right: 10,
|
||||
orient: "horizontal",
|
||||
// data: ['进水量', '出水量'],
|
||||
borderRadius: 20,
|
||||
|
|
@ -789,8 +789,7 @@ function lightingCircuit() {
|
|||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.data.forEach((item) => {
|
||||
item.state =
|
||||
item.state == "0" ? "0" : item.state == "255" ? "1" : "2";
|
||||
item.state = item.state == "0" ? "0" : item.state == "255" ? "1" : "2";
|
||||
});
|
||||
lightDetail.value = res.data;
|
||||
} else {
|
||||
|
|
@ -804,11 +803,7 @@ function lightingCircuit() {
|
|||
//照明负荷
|
||||
function lightingLoad() {
|
||||
let date =
|
||||
lightLoadDate.value == "year"
|
||||
? "年"
|
||||
: lightLoadDate.value == "month"
|
||||
? "月"
|
||||
: "日";
|
||||
lightLoadDate.value == "year" ? "年" : lightLoadDate.value == "month" ? "月" : "日";
|
||||
getLightingLoad({ date })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
|
|
@ -955,13 +950,12 @@ onMounted(() => {
|
|||
<span>状态</span>
|
||||
</div>
|
||||
<div class="tableContent" style="height: 86.5%">
|
||||
<div
|
||||
v-for="(item, index) in lightDetail"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<div v-for="(item, index) in lightDetail" :key="index" class="tableBoby">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span>{{ item.location }}</span>
|
||||
<div class="tooltip-text" v-if="item.state == 0">停止</div>
|
||||
<div class="tooltip-text" v-else-if="item.state == 1">运行</div>
|
||||
<div class="tooltip-text" v-else-if="item.state == 2">离线</div>
|
||||
<span><i :class="'state' + item.state"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1025,16 +1019,10 @@ onMounted(() => {
|
|||
<span>操作</span>
|
||||
</div>
|
||||
<div class="tableContent" style="height: 86.5%">
|
||||
<div
|
||||
v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<div v-for="(item, index) in lightControl" :key="index" class="tableBoby">
|
||||
<span class="name">{{ item.TypeName }}</span>
|
||||
|
||||
<span class="control" @click="openDialog(item.TypeName)"
|
||||
>照明控制</span
|
||||
>
|
||||
<span class="control" @click="openDialog(item.TypeName)">照明控制</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1062,7 +1050,7 @@ onMounted(() => {
|
|||
height: 4.375rem;
|
||||
}
|
||||
}
|
||||
.light-item:nth-child(2n){
|
||||
.light-item:nth-child(2n) {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
.light-item {
|
||||
|
|
@ -1094,8 +1082,8 @@ onMounted(() => {
|
|||
display: block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.num{
|
||||
font-family: 'D-DIN-Bold';
|
||||
.num {
|
||||
font-family: "D-DIN-Bold";
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1122,7 +1110,26 @@ onMounted(() => {
|
|||
.state2 {
|
||||
background-image: url("@/assets/images/lighting/state2.png");
|
||||
}
|
||||
|
||||
.tooltip-text {
|
||||
visibility: hidden; /* 默认隐藏 */
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
margin-top: 0;
|
||||
margin-left: 323px; /* 居中对齐 */
|
||||
opacity: 0; /* 透明度设置为0 */
|
||||
transition: opacity 0.3s; /* 添加过渡效果 */
|
||||
font-weight: 600;
|
||||
}
|
||||
.tableBoby:hover .tooltip-text {
|
||||
visibility: visible; /* 悬停时可见 */
|
||||
opacity: 1; /* 悬停时不透明 */
|
||||
}
|
||||
.tableBoby{
|
||||
position: relative;
|
||||
}
|
||||
//照明控制
|
||||
.control {
|
||||
color: rgba(61, 255, 244, 1);
|
||||
|
|
|
|||
|
|
@ -173,6 +173,9 @@ onMounted(() => {
|
|||
>
|
||||
<span>{{ item.Name }}</span>
|
||||
<span class="control">
|
||||
<div class="tooltip-text" v-if="item.State == '1'">停止</div>
|
||||
<div class="tooltip-text" v-else-if="item.State == '2' || item.State == '3'">运行</div>
|
||||
<div class="tooltip-text" v-else>离线</div>
|
||||
<i :class="getState(item.State)"></i>
|
||||
</span>
|
||||
<!-- <el-switch v-model="item.State" style="left: 8px" /> -->
|
||||
|
|
@ -206,6 +209,7 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
//照明回路详情
|
||||
.state0,
|
||||
|
|
@ -228,6 +232,23 @@ onMounted(() => {
|
|||
.state2 {
|
||||
background-image: url("@/assets/images/lighting/state2.png");
|
||||
}
|
||||
.tooltip-text {
|
||||
visibility: hidden; /* 默认隐藏 */
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
margin-top: 0;
|
||||
margin-left: 58px; /* 居中对齐 */
|
||||
opacity: 0; /* 透明度设置为0 */
|
||||
transition: opacity 0.3s; /* 添加过渡效果 */
|
||||
font-weight: 600;
|
||||
}
|
||||
.control:hover .tooltip-text {
|
||||
visibility: visible; /* 悬停时可见 */
|
||||
opacity: 1; /* 悬停时不透明 */
|
||||
}
|
||||
.alarm {
|
||||
width: 100%;
|
||||
height: 94%;
|
||||
|
|
|
|||