代码提交
This commit is contained in:
parent
90ac4a25b9
commit
63e1df822c
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 603 B After Width: | Height: | Size: 603 B |
|
Before Width: | Height: | Size: 618 B After Width: | Height: | Size: 618 B |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 397 B After Width: | Height: | Size: 397 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,64 +1,173 @@
|
|||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import { ref } from "vue";
|
||||
// dom
|
||||
const calendar = ref()
|
||||
const calenderValue = ref(new Date())
|
||||
const calendar = ref();
|
||||
const calenderValue = ref(new Date());
|
||||
// 时间参数
|
||||
const calendarDate = ref()
|
||||
const toggleClick = () =>{
|
||||
|
||||
}
|
||||
const calendarDate = ref();
|
||||
const toggleClick = () => {};
|
||||
const selectDate = (val) => {
|
||||
if (!calendar.value) return
|
||||
calendar.value.selectDate(val)
|
||||
}
|
||||
if (!calendar.value) return;
|
||||
calendar.value.selectDate(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-calendar ref="calendar" v-model="calendarDate">
|
||||
<template #header="{ date }">
|
||||
<!-- <div class="calender-header">-->
|
||||
<p>
|
||||
<!-- <span @click="selectDate('prev-year')">上一年</span>-->
|
||||
<span @click="selectDate('prev-month')">上个月</span>
|
||||
</p>
|
||||
<span @click="toggleClick">{{date}}</span>
|
||||
<p>
|
||||
<span @click="selectDate('next-month')">下个月</span>
|
||||
<!-- <span @click="selectDate('next-year')">下一年</span>-->
|
||||
</p>
|
||||
|
||||
<!-- </div>-->
|
||||
|
||||
<div>
|
||||
<img
|
||||
@click="selectDate('prev-month')"
|
||||
src="../../assets/images/overview/prevMonth.png"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
||||
"
|
||||
/>
|
||||
<span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
|
||||
<img
|
||||
@click="selectDate('next-month')"
|
||||
src="../../assets/images/overview/nextMonth.png"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3);
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="returningToThisMonth" @click="selectDate('today')"></div>
|
||||
</template>
|
||||
<template #date-cell="{ data }">
|
||||
<p class="day">{{ data.day.split('-').slice(1)[1] }}</p>
|
||||
<p class="day">{{ data.day.split("-").slice(1)[1] }}</p>
|
||||
<p class="value">{{ data.day.split("-").slice(1)[1] }}</p>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
:deep(.el-calendar){
|
||||
font-size: .7rem;
|
||||
:deep.el-calendar {
|
||||
font-size: 0.7rem;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background-color: transparent !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
:deep(.el-calendar__header) {
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
padding: 0 0.3rem;
|
||||
border-bottom: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
:deep(.el-calendar__header > div:nth-child(-n + 1)) {
|
||||
// flex-grow: 1;
|
||||
// text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
position: relative;
|
||||
left: 13%;
|
||||
width: 56%;
|
||||
}
|
||||
:deep(.el-calendar-day) {
|
||||
//display: none;
|
||||
width: 52px !important;
|
||||
padding: 0 !important;
|
||||
height: 30% !important;
|
||||
width: 54px !important;
|
||||
padding: 3px !important;
|
||||
height: 25px !important;
|
||||
color: #b1fffa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
// border:0.01px solid rgba(177, 255, 250, 0.2)
|
||||
//max-height: 1.8rem!important;
|
||||
@media only screen and (min-height: 1000px) {
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
:deep(.el-calendar-day .day) {
|
||||
font-size: 12px;
|
||||
height: 60%;
|
||||
}
|
||||
:deep(.el-calendar-day .value) {
|
||||
color: rgba(91, 250, 241, 1);
|
||||
height: 40%;
|
||||
}
|
||||
:deep(.el-calendar-table td) {
|
||||
background: url(../../assets/images/overview/thisMonth.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
:deep(.el-calendar-table thead th) {
|
||||
padding: 0;
|
||||
color: #ddfffd;
|
||||
}
|
||||
:deep(.el-calendar-table td) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.el-calendar-table tr td:first-child) {
|
||||
border: none;
|
||||
}
|
||||
:deep(.el-calendar-table tr:first-child td) {
|
||||
border: none;
|
||||
}
|
||||
//鼠标悬停
|
||||
:deep(.el-calendar-table :hover) {
|
||||
background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
:deep(.el-calendar__body) {
|
||||
padding: 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
height: 79% !important;
|
||||
}
|
||||
//修改不是本月的字体颜色
|
||||
:deep(.el-calendar-table__row) {
|
||||
.prev,
|
||||
.next {
|
||||
// 修改非本月
|
||||
.el-calendar-day {
|
||||
.day {
|
||||
font-size: 12px;
|
||||
color: rgba(177, 255, 250, 0.4);
|
||||
}
|
||||
.value {
|
||||
color: rgba(177, 255, 250, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//修改选中后的颜色
|
||||
:deep(.el-calendar-table td.is-selected) {
|
||||
// .el-calendar-day {
|
||||
// p {
|
||||
// 选中日期颜色
|
||||
color: rgba(255, 251, 222, 1);
|
||||
// }
|
||||
// }
|
||||
background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3) !important;
|
||||
.el-calendar-day {
|
||||
.day {
|
||||
color: rgba(255, 251, 222, 1);
|
||||
}
|
||||
.value {
|
||||
color: rgba(1, 246, 139, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.returningToThisMonth {
|
||||
width: 67px;
|
||||
height: 21px;
|
||||
background: url(../../assets/images/overview/returningToThisMonth.png)
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 9%;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -272,6 +272,7 @@ function getDailyElectricityConsumption() {
|
|||
name: "单位:kW/h",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding:[0,5,0,0]
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
|
|
@ -802,8 +803,7 @@ function getLoadClassification() {
|
|||
}
|
||||
);
|
||||
}
|
||||
var img =
|
||||
"/src/assets/images/energyMonitoring/loadClassification.png";
|
||||
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
||||
let myChart = echarts.init(document.getElementById("loadClassification"));
|
||||
let option = {
|
||||
graphic: {
|
||||
|
|
@ -927,8 +927,9 @@ function getLoadClassification() {
|
|||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 50,
|
||||
length: 60,
|
||||
length: 60,
|
||||
length2: 60,
|
||||
show: true,
|
||||
color: "#00ffff",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -406,6 +406,7 @@ function getCarbonEmission() {
|
|||
name: "单位:kW/h",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding:[0,5,0,0]
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
|
|
|
|||
|
|
@ -1,5 +1,117 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const faultAlarmList = ref([
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED1",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED2",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED3",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
{
|
||||
location: "1楼中庭",
|
||||
time: "2023-11-28 16:58:02",
|
||||
name: "LED4",
|
||||
},
|
||||
]);
|
||||
const runTimeList = ref([
|
||||
{
|
||||
name: "西大厅1",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅2",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅3",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅4",
|
||||
value: true,
|
||||
},
|
||||
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -7,24 +119,156 @@
|
|||
<div class="page-left-box">
|
||||
<div class="title">
|
||||
<span>故障报警</span>
|
||||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
|
||||
<div
|
||||
class="page-big-box margin10"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<div class="alarm">
|
||||
<div
|
||||
class="alarmList"
|
||||
v-for="(item, index) in faultAlarmList"
|
||||
:key="index"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<div class="content">
|
||||
<span class="location">地点：{{ item.location }}</span>
|
||||
<span class="time">时间：{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<div class="title">
|
||||
<span>运行状态</span>
|
||||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
|
||||
<div class="runningState">
|
||||
<div class="tableTitle">
|
||||
<span>区域名称</span>
|
||||
<span>状态</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div
|
||||
class="tableBoby"
|
||||
v-for="(item, index) in runTimeList"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-switch v-model="item.value" style="left: 8px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.alarm {
|
||||
width: 100%;
|
||||
height: 94%;
|
||||
padding: 0 3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
overflow: auto;
|
||||
scrollbar-width: none; /* firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
.alarmList {
|
||||
width: 93.2%;
|
||||
height: 6.2%;
|
||||
margin-top: 2.6%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: url("../../assets/images/overview/alarm.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 2%;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.location {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: rgba(218, 218, 218, 1);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: rgba(91, 250, 241, 1);
|
||||
position: relative;
|
||||
margin-left: 14%;
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.runningState {
|
||||
height: 98%;
|
||||
width: 100%;
|
||||
padding: 3% 3%;
|
||||
box-sizing: border-box;
|
||||
.tableTitle {
|
||||
background: url("../../assets/images/overview/runTime.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 4.5%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.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/overview/runTime.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 3.5%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-top: 2%;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
}
|
||||
::v-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 {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(80, 233, 83, 1);
|
||||
}
|
||||
::v-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 {
|
||||
border-radius: 0;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
background: rgba(80, 233, 83, 1);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue