优化空调_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
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//获取设备运行状态
|
||||||
|
// export function GetMaintenanceReminder(params){
|
||||||
|
// return http({
|
||||||
|
// url:'/api/GetMaintenanceReminder',
|
||||||
|
// method:'get',
|
||||||
|
// params
|
||||||
|
// })
|
||||||
|
// }
|
||||||
// 获取策略编辑
|
// 获取策略编辑
|
||||||
export function getPolicyEditing(params){
|
export function getPolicyEditing(params){
|
||||||
return http({
|
return http({
|
||||||
|
|
|
||||||
|
|
@ -171,13 +171,12 @@ const openDialog = (item) => {
|
||||||
emit("closeAir", "");
|
emit("closeAir", "");
|
||||||
dialogBoxShow.value = true;
|
dialogBoxShow.value = true;
|
||||||
dialogName.value = item.name;
|
dialogName.value = item.name;
|
||||||
id.value = item.StrategyId
|
id.value = item.StrategyId;
|
||||||
|
|
||||||
};
|
};
|
||||||
const closeDialog = (val) => {
|
const closeDialog = (val) => {
|
||||||
console.log(val, "xxxxxxxxxx");
|
console.log(val, "xxxxxxxxxx");
|
||||||
let params = {
|
let params = {
|
||||||
id:id.value,
|
id: id.value,
|
||||||
name: dialogName.value,
|
name: dialogName.value,
|
||||||
value: deviceList.value === "" ? null : deviceList.value,
|
value: deviceList.value === "" ? null : deviceList.value,
|
||||||
};
|
};
|
||||||
|
|
@ -234,16 +233,58 @@ const failureWarningInterface = () => {
|
||||||
const electricalConditionInterface = () => {
|
const electricalConditionInterface = () => {
|
||||||
getElectricalCondition().then((res) => {
|
getElectricalCondition().then((res) => {
|
||||||
// 今日
|
// 今日
|
||||||
electricityContent.value[0].value = res.data[0].EH;
|
// electricityContent.value[0].value = res.data[0].EH;
|
||||||
electricityContent.value[1].value = res.data[0].Electricity;
|
// 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[2].value = res.data[1].EH;
|
||||||
electricityContent.value[3].value = res.data[1].Electricity;
|
// electricityContent.value[3].value = res.data[1].Electricity;
|
||||||
// 本年
|
electricityContent.value[2].value = unitConversion(res.data[1].EH, 2);
|
||||||
electricityContent.value[4].value = res.data[2].EH;
|
electricityContent.value[3].value = unitConversion(res.data[1].Electricity, 3);
|
||||||
electricityContent.value[5].value = res.data[2].Electricity;
|
|
||||||
|
// 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 = () => {
|
const bootStrategyInterface = () => {
|
||||||
getBootStrategy().then((res) => {
|
getBootStrategy().then((res) => {
|
||||||
|
|
@ -259,14 +300,14 @@ const bootStrategyInterface = () => {
|
||||||
// 维护提醒
|
// 维护提醒
|
||||||
const maintenanceReminderInterface = () => {
|
const maintenanceReminderInterface = () => {
|
||||||
console.log(controlBtn.value);
|
console.log(controlBtn.value);
|
||||||
let params = {
|
// let params = {
|
||||||
name: controlBtn.value === "on" ? "已超期" : "即将开始",
|
// name: controlBtn.value === "on" ? "已超期" : "即将开始",
|
||||||
};
|
// };
|
||||||
getMaintenanceReminder(params).then((res) => {
|
getMaintenanceReminder().then((res) => {
|
||||||
maintenanceList.value = res.data.map((el) => {
|
maintenanceList.value = res.data.map((el) => {
|
||||||
return {
|
return {
|
||||||
name: el.DeviceName,
|
name: el.DeviceName,
|
||||||
date: el.OverDue,
|
date: el.Status,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -279,6 +320,10 @@ function btnControl(item, type) {
|
||||||
};
|
};
|
||||||
setAircondition(params).then((res) => {
|
setAircondition(params).then((res) => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
message: "开机策略操作成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
bootStrategyInterface();
|
bootStrategyInterface();
|
||||||
} else {
|
} else {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
|
|
@ -318,10 +363,7 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
<div id="overview" class="margin10 box-bg overview">
|
<div id="overview" class="margin10 box-bg overview">
|
||||||
<div class="overview-system">
|
<div class="overview-system">
|
||||||
<div
|
<div v-for="(item, index) in systemNumList" class="overview-system-item">
|
||||||
v-for="(item, index) in systemNumList"
|
|
||||||
class="overview-system-item"
|
|
||||||
>
|
|
||||||
<img :src="img[index]" alt="" srcset="" />
|
<img :src="img[index]" alt="" srcset="" />
|
||||||
<p>
|
<p>
|
||||||
<span class="name">{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
|
|
@ -331,10 +373,7 @@ onMounted(() => {
|
||||||
·
|
·
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-for="(item, index) in overviewList" :class="'overview-item' + index">
|
||||||
v-for="(item, index) in overviewList"
|
|
||||||
:class="'overview-item' + index"
|
|
||||||
>
|
|
||||||
<span class="name">{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<p>
|
<p>
|
||||||
<span class="value">{{ item.num }}</span>
|
<span class="value">{{ item.num }}</span>
|
||||||
|
|
@ -357,9 +396,7 @@ onMounted(() => {
|
||||||
<li v-for="(item, index) in electricityContent">
|
<li v-for="(item, index) in electricityContent">
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
<span
|
<span
|
||||||
><span class="value" style="font-size: 1rem">{{
|
><span class="value" style="font-size: 1rem">{{ item.value }}</span
|
||||||
item.value
|
|
||||||
}}</span
|
|
||||||
><span class="unit">{{ item.unit }}</span></span
|
><span class="unit">{{ item.unit }}</span></span
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -382,7 +419,7 @@ onMounted(() => {
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>开机策略</span>
|
<span>开机策略</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg">
|
<div class="margin10 box-bg" style="height: 32.7%">
|
||||||
<!-- tbale -->
|
<!-- tbale -->
|
||||||
<div class="runningState">
|
<div class="runningState">
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
|
|
@ -399,17 +436,15 @@ onMounted(() => {
|
||||||
>
|
>
|
||||||
<span class="name">{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<span class="control">
|
<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>
|
<i :class="'state' + item.value"></i>
|
||||||
</span>
|
</span>
|
||||||
<p class="control-btn">
|
<p class="control-btn">
|
||||||
|
<!-- :class="item.value === '0' ? 'select' : ''" -->
|
||||||
|
<span class="on" @click.stop="btnControl(item, 1)">开</span>
|
||||||
|
<!-- :class="item.value !== '0' ? 'select' : ''" -->
|
||||||
<span
|
<span
|
||||||
:class="item.value !== '0' ? 'select' : ''"
|
|
||||||
class="on"
|
|
||||||
@click.stop="btnControl(item, 1)"
|
|
||||||
>开</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
:class="item.value === '0' ? 'select' : ''"
|
|
||||||
class="off"
|
class="off"
|
||||||
style="margin-left: 0.7rem"
|
style="margin-left: 0.7rem"
|
||||||
@click.stop="btnControl(item, 0)"
|
@click.stop="btnControl(item, 0)"
|
||||||
|
|
@ -424,8 +459,8 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
<!-- 维护提醒-->
|
<!-- 维护提醒-->
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>维护提醒</span>
|
<span>设备运行状态</span>
|
||||||
<p class="control-btn">
|
<!-- <p class="control-btn">
|
||||||
<span
|
<span
|
||||||
:class="controlBtn === 'on' ? 'select' : ''"
|
:class="controlBtn === 'on' ? 'select' : ''"
|
||||||
class="on"
|
class="on"
|
||||||
|
|
@ -439,23 +474,29 @@ onMounted(() => {
|
||||||
@click="toggleControl"
|
@click="toggleControl"
|
||||||
>即将开始</span
|
>即将开始</span
|
||||||
>
|
>
|
||||||
</p>
|
</p> -->
|
||||||
</div>
|
</div>
|
||||||
<div id="reminder" class="margin10 box-bg">
|
<div id="reminder" class="margin10 box-bg" style="height: 42%">
|
||||||
<div class="runningState">
|
<div class="runningState">
|
||||||
<div class="tableTitle" style="height: 7%">
|
<div class="tableTitle" style="height: 12%">
|
||||||
<span>设备名称</span>
|
<span>策略名称</span>
|
||||||
<span>超期</span>
|
<span>状态</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tableContent">
|
<div class="tableContent">
|
||||||
<div
|
<div
|
||||||
class="tableBoby"
|
class="tableBoby"
|
||||||
style="height: 7%"
|
style="height: 12%"
|
||||||
v-for="(item, index) in maintenanceList"
|
v-for="(item, index) in maintenanceList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<span class="name">{{ item.name }}</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -467,7 +508,8 @@ onMounted(() => {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.state0,
|
.state0,
|
||||||
.state1,
|
.state1,
|
||||||
.state2 {
|
.state2,
|
||||||
|
.statebad {
|
||||||
width: 1.1rem;
|
width: 1.1rem;
|
||||||
height: 1.1rem;
|
height: 1.1rem;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -478,13 +520,36 @@ onMounted(() => {
|
||||||
.state0 {
|
.state0 {
|
||||||
background-image: url("@/assets/images/lighting/state0.png");
|
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 {
|
.state1 {
|
||||||
background-image: url("@/assets/images/lighting/state1.png");
|
background-image: url("@/assets/images/lighting/state1.png");
|
||||||
}
|
}
|
||||||
.state2 {
|
.state2 {
|
||||||
background-image: url("@/assets/images/lighting/state2.png");
|
background-image: url("@/assets/images/lighting/state2.png");
|
||||||
}
|
}
|
||||||
|
.statebad {
|
||||||
|
background-image: url("@/assets/images/lighting/state2.png");
|
||||||
|
}
|
||||||
#reminder {
|
#reminder {
|
||||||
height: vh(576);
|
height: vh(576);
|
||||||
background-image: url("@/assets/images/air-conditioning/reminder-bg.png");
|
background-image: url("@/assets/images/air-conditioning/reminder-bg.png");
|
||||||
|
|
@ -683,8 +748,7 @@ onMounted(() => {
|
||||||
-ms-overflow-style: none; /* IE 10+ */
|
-ms-overflow-style: none; /* IE 10+ */
|
||||||
.tableBoby {
|
.tableBoby {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: url("../../assets/images/air-conditioning/table-item.png")
|
background: url("../../assets/images/air-conditioning/table-item.png") no-repeat;
|
||||||
no-repeat;
|
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 15.5%;
|
height: 15.5%;
|
||||||
|
|
@ -723,7 +787,9 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
.control-btn {
|
.control-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
span:hover {
|
||||||
|
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||||||
|
}
|
||||||
.select {
|
.select {
|
||||||
background-image: url("@/assets/images/air-tab-select.png") !important;
|
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||||||
}
|
}
|
||||||
|
|
@ -738,4 +804,7 @@ onMounted(() => {
|
||||||
padding: 0.2rem 1.1rem;
|
padding: 0.2rem 1.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// .state0 {
|
||||||
|
|
||||||
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -223,8 +223,11 @@ onMounted(()=>{
|
||||||
<div v-for="(item,index) in operationLeftList" class="system-item" :key="'sys'+index">
|
<div v-for="(item,index) in operationLeftList" class="system-item" :key="'sys'+index">
|
||||||
<span class="system-item-title">{{ item.name }}</span>
|
<span class="system-item-title">{{ item.name }}</span>
|
||||||
<div class="system-item-right">
|
<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>
|
<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>
|
<span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -240,8 +243,11 @@ onMounted(()=>{
|
||||||
<div v-for="(item,index) in operationRightList" class="system-item" :key="'sys'+index">
|
<div v-for="(item,index) in operationRightList" class="system-item" :key="'sys'+index">
|
||||||
<span class="system-item-title">{{ item.name }}</span>
|
<span class="system-item-title">{{ item.name }}</span>
|
||||||
<div class="system-item-right">
|
<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>
|
<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>
|
<span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -314,4 +320,21 @@ onMounted(()=>{
|
||||||
.state2{
|
.state2{
|
||||||
background-image: url("@/assets/images/drainage/state2.png");
|
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>
|
</style>
|
||||||
|
|
@ -270,13 +270,13 @@ const drawFaultConditionsChart = (params) => {
|
||||||
color: "rgba(1, 246, 139, 1)",
|
color: "rgba(1, 246, 139, 1)",
|
||||||
padding: [0, 0, 10, 0],
|
padding: [0, 0, 10, 0],
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
fontFamily:'D-DIN-Bold',
|
fontFamily: "D-DIN-Bold",
|
||||||
},
|
},
|
||||||
a1: {
|
a1: {
|
||||||
color: color[1],
|
color: color[1],
|
||||||
padding: [0, 0, 10, 0],
|
padding: [0, 0, 10, 0],
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
fontFamily:'D-DIN-Bold',
|
fontFamily: "D-DIN-Bold",
|
||||||
},
|
},
|
||||||
s0: {
|
s0: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
|
|
@ -639,7 +639,7 @@ const drawLightLoadChart = (params) => {
|
||||||
icon: "rect",
|
icon: "rect",
|
||||||
top: 10,
|
top: 10,
|
||||||
// left: "right",
|
// left: "right",
|
||||||
right:10,
|
right: 10,
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
// data: ['进水量', '出水量'],
|
// data: ['进水量', '出水量'],
|
||||||
borderRadius: 20,
|
borderRadius: 20,
|
||||||
|
|
@ -789,8 +789,7 @@ function lightingCircuit() {
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
res.data.forEach((item) => {
|
res.data.forEach((item) => {
|
||||||
item.state =
|
item.state = item.state == "0" ? "0" : item.state == "255" ? "1" : "2";
|
||||||
item.state == "0" ? "0" : item.state == "255" ? "1" : "2";
|
|
||||||
});
|
});
|
||||||
lightDetail.value = res.data;
|
lightDetail.value = res.data;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -804,11 +803,7 @@ function lightingCircuit() {
|
||||||
//照明负荷
|
//照明负荷
|
||||||
function lightingLoad() {
|
function lightingLoad() {
|
||||||
let date =
|
let date =
|
||||||
lightLoadDate.value == "year"
|
lightLoadDate.value == "year" ? "年" : lightLoadDate.value == "month" ? "月" : "日";
|
||||||
? "年"
|
|
||||||
: lightLoadDate.value == "month"
|
|
||||||
? "月"
|
|
||||||
: "日";
|
|
||||||
getLightingLoad({ date })
|
getLightingLoad({ date })
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
|
|
@ -955,13 +950,12 @@ onMounted(() => {
|
||||||
<span>状态</span>
|
<span>状态</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tableContent" style="height: 86.5%">
|
<div class="tableContent" style="height: 86.5%">
|
||||||
<div
|
<div v-for="(item, index) in lightDetail" :key="index" class="tableBoby">
|
||||||
v-for="(item, index) in lightDetail"
|
|
||||||
:key="index"
|
|
||||||
class="tableBoby"
|
|
||||||
>
|
|
||||||
<span class="name">{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<span>{{ item.location }}</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>
|
<span><i :class="'state' + item.state"></i></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1025,16 +1019,10 @@ onMounted(() => {
|
||||||
<span>操作</span>
|
<span>操作</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tableContent" style="height: 86.5%">
|
<div class="tableContent" style="height: 86.5%">
|
||||||
<div
|
<div v-for="(item, index) in lightControl" :key="index" class="tableBoby">
|
||||||
v-for="(item, index) in lightControl"
|
|
||||||
:key="index"
|
|
||||||
class="tableBoby"
|
|
||||||
>
|
|
||||||
<span class="name">{{ item.TypeName }}</span>
|
<span class="name">{{ item.TypeName }}</span>
|
||||||
|
|
||||||
<span class="control" @click="openDialog(item.TypeName)"
|
<span class="control" @click="openDialog(item.TypeName)">照明控制</span>
|
||||||
>照明控制</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1062,7 +1050,7 @@ onMounted(() => {
|
||||||
height: 4.375rem;
|
height: 4.375rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.light-item:nth-child(2n){
|
.light-item:nth-child(2n) {
|
||||||
padding-left: 1.2rem;
|
padding-left: 1.2rem;
|
||||||
}
|
}
|
||||||
.light-item {
|
.light-item {
|
||||||
|
|
@ -1094,8 +1082,8 @@ onMounted(() => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
.num{
|
.num {
|
||||||
font-family: 'D-DIN-Bold';
|
font-family: "D-DIN-Bold";
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1122,7 +1110,26 @@ onMounted(() => {
|
||||||
.state2 {
|
.state2 {
|
||||||
background-image: url("@/assets/images/lighting/state2.png");
|
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 {
|
.control {
|
||||||
color: rgba(61, 255, 244, 1);
|
color: rgba(61, 255, 244, 1);
|
||||||
|
|
|
||||||
|
|
@ -173,6 +173,9 @@ onMounted(() => {
|
||||||
>
|
>
|
||||||
<span>{{ item.Name }}</span>
|
<span>{{ item.Name }}</span>
|
||||||
<span class="control">
|
<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>
|
<i :class="getState(item.State)"></i>
|
||||||
</span>
|
</span>
|
||||||
<!-- <el-switch v-model="item.State" style="left: 8px" /> -->
|
<!-- <el-switch v-model="item.State" style="left: 8px" /> -->
|
||||||
|
|
@ -206,6 +209,7 @@ onMounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
//照明回路详情
|
//照明回路详情
|
||||||
.state0,
|
.state0,
|
||||||
|
|
@ -228,6 +232,23 @@ onMounted(() => {
|
||||||
.state2 {
|
.state2 {
|
||||||
background-image: url("@/assets/images/lighting/state2.png");
|
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 {
|
.alarm {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 94%;
|
height: 94%;
|
||||||
|
|
|
||||||