This commit is contained in:
lixiaobang 2023-12-18 13:13:09 +08:00
commit 6e238c6984
9 changed files with 318 additions and 20 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -74,6 +74,85 @@ const faultList = ref([
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',
}
])
</script>
<template>
@ -142,12 +221,46 @@ const faultList = ref([
<div class="title">
<span>开机策略</span>
</div>
<div id="airConditioningLoad" class="margin10 box-bg"></div>
<div class="margin10 box-bg">
<div class="runningState">
<div class="tableTitle">
<span>策略名称</span>
<span>策略状态</span>
<span>操作</span>
</div>
<div class="tableContent">
<div class="tableBoby"
v-for="(item, index) in runTimeList"
:key="index"
>
<span class="name">{{ item.name }}</span>
<el-switch v-model="item.value" style="left: 8px" />
<span>编辑</span>
</div>
</div>
</div>
</div>
<!-- 维护提醒-->
<div class="title margin10">
<span>维护提醒</span>
</div>
<div id="reminder" class="margin10 box-bg"></div>
<div id="reminder" class="margin10 box-bg">
<div class="runningState">
<div class="tableTitle" style="height: 7%">
<span>设备名称</span>
<span>超期</span>
</div>
<div class="tableContent">
<div class="tableBoby" style="height: 7%"
v-for="(item, index) in maintenanceList"
:key="index"
>
<span class="name">{{ item.name }}</span>
<span class="date">{{ item.date }} <span>小时</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
@ -194,12 +307,7 @@ const faultList = ref([
display: block;
}
.num {
color: rgba(61, 255, 244, 1);
font-weight: 600;
font-size: 1.1rem;
margin-right: .2rem;
}
}
}
@ -297,10 +405,100 @@ const faultList = ref([
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: .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 {
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: .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);
}
</style>

View File

@ -361,7 +361,7 @@ const drawEnergyFlow = () => {
];
let itemStyleSource = [];
for (let d = 0; d < sourceData.length; d++) {
if (sourceData[d].name == "电") {
if (sourceData[d].name === "电") {
sourceData[d].label = {
position: "right",
};
@ -384,8 +384,6 @@ const drawEnergyFlow = () => {
bottom: "4%",
left: "6%",
right: "5%",
nodeWidth: '12',
nodeAlign:'right',
nodeWidth: "13",
// nodeAlign:'right',

View File

@ -1,13 +1,115 @@
<script setup>
import {ref} from "vue"
import getPath from "@/utils/getPath.js";
//
const lightingNumList = ref([
{
name:"照明四路数量",
num:1130,
pic:getPath.lightTotal,
},
{
name:"照明四路灭灯数量",
num:1130,
pic:getPath.noLightNum,
},
{
name:"照明四路亮灯数量",
num:1130,
pic:getPath.lightingNum,
},
{
name:"离线数量",
num:1130,
pic:getPath.offlineNum,
}
])
</script>
<template>
<div>
照明
<div class="page m100">
<div class="page-left-box">
<!-- 照明监测-->
<div class="title">
<span>照明监测</span>
</div>
<div class="margin10 box-bg" id="light">
<div class="light-item" v-for="(item,index) in lightingNumList">
<img :src="item.pic" alt="">
<p>
<span class="name">{{item.name}}</span>
<span class="num">{{item.num}}<span class="unit"></span></span>
</p>
</div>
</div>
<!-- 当日累计用电量-->
<div class="title margin10">
<span>照明回路详情</span>
</div>
<div class="margin10 box-bg"></div>
<!-- 照明负荷-->
<div class="title margin10">
<span>照明负荷</span>
</div>
<div class="margin10 box-bg"></div>
</div>
<div class="page-right-box">
<!-- 展馆照明 -->
<div class="title">
<span>展馆照明</span>
</div>
<div class="margin10 box-bg" id="airConditioningLoad"></div>
<!-- 照明控制-->
<div class="title margin10">
<span>照明控制</span>
</div>
<div class="margin10 box-bg" id="exhibitionLoad"></div>
<!-- 故障情况-->
<div class="title margin10">
<span>故障情况</span>
</div>
<div class="margin10 box-bg" id="ranking"></div>
</div>
</div>
</template>
<style scoped lang="scss">
//
#light{
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
//padding: 2% 10%;
box-sizing: border-box;
img{
width: 3.875rem;
height: 4.375rem;
}
}
.light-item{
display: flex;
flex-basis: 50%;
padding-left: 2rem;
box-sizing: border-box;
p{
margin-left: .5rem;
.name{
margin-top: 1.3rem;
margin-bottom: .5rem;
}
.num {
color: rgba(1, 246, 139, 1);
font-weight: 700;
font-size: 1.25rem !important;
}
.unit{
margin-left: .2rem;
}
.name,.num{
display: block;
font-size: .75rem;
}
}
}
</style>

View File

@ -249,23 +249,23 @@ const runTimeList = ref([
display: none; /* Chrome Safari */
}
}
::v-deep .el-switch__core {
:deep(.el-switch__core) {
border-radius: 0;
background: transparent;
border: 1px solid rgba(223, 94, 94, 1);
}
::v-deep .el-switch.is-checked .el-switch__core {
:deep(.el-switch.is-checked .el-switch__core) {
background: transparent;
border: 1px solid rgba(80, 233, 83, 1);
}
::v-deep .el-switch__core .el-switch__action {
:deep(.el-switch__core .el-switch__action) {
border-radius: 0;
height: 13px;
width: 13px;
background: rgba(223, 94, 94, 1);
}
::v-deep .el-switch.is-checked .el-switch__action {
:deep(.el-switch.is-checked .el-switch__action) {
border-radius: 0;
height: 13px;
width: 13px;