代码提交==
This commit is contained in:
parent
94b1415aff
commit
a27ba970b4
|
|
@ -5,3 +5,10 @@
|
|||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/*yaHei*/
|
||||
@font-face {
|
||||
font-family: "Microsoft YaHei";
|
||||
src: url('./msyhl.ttc');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ import carbonEmission from '@/views/carbonEmission/index.vue' //碳排放
|
|||
|
||||
import screen from '@/views/screen/index.vue' //显示屏
|
||||
import energyMonitoring from '@/views/energyMonitoring/index.vue'
|
||||
|
||||
import getPath from "@/utils/getPath.js";
|
||||
// import getImageUrl from '@/utils/getPath.js'
|
||||
const nowDate = ref('')
|
||||
const nowWeek = ref('')
|
||||
|
|
@ -27,15 +27,15 @@ timer.value = setInterval(()=>{
|
|||
getNowDate()
|
||||
},1000)
|
||||
const menuList = ref([
|
||||
{name:shallowRef(overview),default:'../../assets/images/menu/overview.png',select:'../../assets/images/menu/overview-select.png'},
|
||||
{name:shallowRef(overview),default:getPath.overview,select:getPath.overviewselect},
|
||||
{name:shallowRef(energyMonitoring),
|
||||
default:'../../assets/images/menu/energy.png',select:'../../assets/images/menu/energy-select.png'},
|
||||
{name:shallowRef(energyEfficiency),default:'../../assets/images/menu/energy-efficiency.png',select:'../../assets/images/menu/energy-efficiency-select.png'},
|
||||
{name:shallowRef(drainage),default:'../../assets/images/menu/drainage.png',select:'../../assets/images/menu/drainage-select.png'},
|
||||
{name:shallowRef(airConditioning),default:'../../assets/images/menu/air-conditioning.png',select:'../../assets/images/menu/air-conditioning-select.png'},
|
||||
{name:shallowRef(lighting),default:'../../assets/images/menu/lighting.png',select:'../../assets/images/menu/lighting-select.png'},
|
||||
{name:shallowRef(carbonEmission),default:'../../assets/images/menu/carbon.png',select:'../../assets/images/menu/carbon-select.png'},
|
||||
{name:shallowRef(screen),default:'../../assets/images/menu/screen.png',select:'../../assets/images/menu/screen-select.png'}
|
||||
default:getPath.energy,select:getPath.energyselect},
|
||||
{name:shallowRef(energyEfficiency),default:getPath.energyefficiency,select:getPath.energyefficiencyselect},
|
||||
{name:shallowRef(drainage),default:getPath.drainage,select:getPath.drainageselect},
|
||||
{name:shallowRef(airConditioning),default:getPath.airconditioning,select:getPath.airconditioningselect},
|
||||
{name:shallowRef(lighting),default:getPath.lighting,select:getPath.lightingselect},
|
||||
{name:shallowRef(carbonEmission),default:getPath.carbon,select:getPath.carbonselect},
|
||||
{name:shallowRef(screen),default:getPath.screen,select:getPath.screenselect}
|
||||
])
|
||||
const menuIndex = ref(0)
|
||||
// 菜单切换方法
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
font-family: "Microsoft YaHei";
|
||||
}
|
||||
p,ul,li{
|
||||
margin: 0;
|
||||
|
|
@ -34,7 +35,13 @@ p,ul,li{
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
//排水
|
||||
.page-big-box{
|
||||
width: 100%;
|
||||
height: vh(892);
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/page-big-box.png");
|
||||
}
|
||||
&-right-box, &-left-box {
|
||||
height: 100%;
|
||||
width: vw(450);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,306 @@
|
|||
<script setup>
|
||||
import {ref, reactive} from "vue";
|
||||
import getPath from "@/utils/getPath.js";
|
||||
|
||||
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'
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
空调
|
||||
</div>
|
||||
<div class="page m100">
|
||||
<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="unit">{{ 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 id="airConditioningLoad" class="margin10 box-bg"></div>
|
||||
<!-- 维护提醒-->
|
||||
<div class="title margin10">
|
||||
<span>维护提醒</span>
|
||||
</div>
|
||||
<div id="reminder" class="margin10 box-bg"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
#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: .8rem;
|
||||
margin-bottom: .5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: rgba(61, 255, 244, 1);
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin-right: .2rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&-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: .8rem;
|
||||
color: rgba(221, 255, 253, 1)
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-right: .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: .875rem;
|
||||
padding:0 .5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/air-conditioning/electricityBg.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
//故障
|
||||
#fault{
|
||||
padding: 0 1rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
p{
|
||||
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)
|
||||
}
|
||||
.date{
|
||||
color:rgba(202, 202, 202, 1);
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div >
|
||||
碳排放
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,291 @@
|
|||
<script setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
const operationLeftList = ref([
|
||||
{
|
||||
name: '1号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '1#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '2#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '2号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '3#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '4#泵',
|
||||
state:0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '3号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '5#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '6#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
, {
|
||||
name: '4号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '7#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '8#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '5号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '9#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '10#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '6号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '11#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '12#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '7号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '13#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '14#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
])
|
||||
const operationRightList = ref([
|
||||
{
|
||||
name: '8号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '15#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '16#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '9号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '17#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '18#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '10号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '19#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '20#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
, {
|
||||
name: '11号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '21#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '22#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '12号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '23#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '24#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '13号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '25#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '26#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '14号排水点',
|
||||
children: [
|
||||
{
|
||||
name: '27#泵',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '28#泵',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
排水
|
||||
</div>
|
||||
<div class="page m100">
|
||||
<div class="page-left-box">
|
||||
<div class="title ">
|
||||
<span>运行情况</span>
|
||||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
<div v-for="(item,index) in operationLeftList" class="system-item">
|
||||
<span class="system-item-title">{{ item.name }}</span>
|
||||
<div class="system-item-right">
|
||||
<p v-for="(s,i) in item.children">
|
||||
<span>{{ s.name }}</span>
|
||||
<span :class="'state' + s.state"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<div class="title ">
|
||||
<span>运行情况</span>
|
||||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
<div v-for="(item,index) in operationRightList" class="system-item">
|
||||
<span class="system-item-title">{{ item.name }}</span>
|
||||
<div class="system-item-right">
|
||||
<p v-for="(s,i) in item.children">
|
||||
<span>{{ s.name }}</span>
|
||||
<span :class="'state' + s.state"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.page-big-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
padding: 0 .5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.system-item {
|
||||
height: 12.6%;
|
||||
//background-color: #fff;
|
||||
width: 100%;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/drainage/drainage-item-bg.png");
|
||||
position: relative;
|
||||
|
||||
&-title {
|
||||
position: absolute;
|
||||
top: 68%;
|
||||
left: 6%;
|
||||
font-family: 'title';
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
&-right {
|
||||
height: 100%;
|
||||
margin-left: 8.275rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
|
||||
p {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
box-sizing: border-box;
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
//background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .9rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.state0, .state1 {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.state0 {
|
||||
background-image: url("@/assets/images/drainage/state0.png");
|
||||
}
|
||||
|
||||
.state1 {
|
||||
background-image: url("@/assets/images/drainage/state1.png");
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,51 +19,51 @@ const systemRightList = ref([
|
|||
{
|
||||
name: '今日',
|
||||
value: '3122',
|
||||
unit:'kWh'
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '昨日',
|
||||
value: '9400',
|
||||
unit:'kWh'
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name:'同比',
|
||||
value:'-201',
|
||||
unit:'%'
|
||||
name: '同比',
|
||||
value: '-201',
|
||||
unit: '%'
|
||||
}
|
||||
],//日
|
||||
[
|
||||
{
|
||||
name: '本月',
|
||||
value: '3122',
|
||||
unit:'kWh'
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '上月',
|
||||
value: '9400',
|
||||
unit:'kWh'
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name:'同比',
|
||||
value:'-201',
|
||||
unit:'%'
|
||||
name: '同比',
|
||||
value: '-201',
|
||||
unit: '%'
|
||||
}
|
||||
],//月
|
||||
[
|
||||
{
|
||||
name: '今年',
|
||||
value: '3122',
|
||||
unit:'kWh'
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name: '去年',
|
||||
value: '9400',
|
||||
unit:'kWh'
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
name:'同比',
|
||||
value:'-201',
|
||||
unit:'%'
|
||||
name: '同比',
|
||||
value: '-201',
|
||||
unit: '%'
|
||||
}
|
||||
]//年
|
||||
])
|
||||
|
|
@ -359,14 +359,18 @@ const drawEnergyFlow = () => {
|
|||
let option = {
|
||||
series: [
|
||||
{
|
||||
// select:{
|
||||
// disabled:true
|
||||
// },
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
top: "5%",
|
||||
bottom: "4%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
nodeWidth: '13',
|
||||
// nodeAlign:'right',
|
||||
nodeWidth: '12',
|
||||
|
||||
nodeAlign:'right',
|
||||
focusNodeAdjacency: "allEdges",
|
||||
data: itemStyleSource,
|
||||
links: [
|
||||
|
|
@ -393,7 +397,7 @@ const drawEnergyFlow = () => {
|
|||
fontSize: 14,
|
||||
formatter: function (params) {
|
||||
|
||||
if (params.dataIndex == 0) {
|
||||
if (params.dataIndex === 0) {
|
||||
return (
|
||||
"{a|" +
|
||||
params.data.name +
|
||||
|
|
@ -450,6 +454,166 @@ const drawEnergyFlow = () => {
|
|||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
// 电费电价
|
||||
const drawElectricityPrice = () => {
|
||||
let myChart = echarts.init(document.getElementById('electricity-price'))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: "rgba(1, 13, 19, 0.5)",
|
||||
borderWidth: 0,
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
textStyle: {
|
||||
color: "rgba(212, 232, 254, 1)",
|
||||
// fontSize: fontChart(0.24),
|
||||
},
|
||||
confine: true
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
data:['电费','销售电价'],
|
||||
selected:{
|
||||
'电费': true,
|
||||
'销售电价': true,
|
||||
},
|
||||
icon: 'rect',
|
||||
itemGap:14,
|
||||
top:"8",
|
||||
layout: 'vertical',
|
||||
itemHeight: '10',
|
||||
// itemWidth:'10',
|
||||
textStyle: {
|
||||
color: "rgba(221, 255, 253, 1)"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
bottom: "4%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#557775'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
// interval: 0,
|
||||
// rotate: 40,
|
||||
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
color: "#DDFFFD",
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
name: '单位:kWh',
|
||||
nameTextStyle: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
// 表现为上下位置
|
||||
type: 'value',
|
||||
max: '50',
|
||||
splitNumber: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#666666',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// splitNumber:
|
||||
name: '单位:元/kWh',
|
||||
position: 'right', // 放在右边
|
||||
nameTextStyle: {
|
||||
padding: [0, 15, 0, 0],
|
||||
color: 'rgba(221, 255, 253, 1)'
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// fontSize: 18,
|
||||
color: 'rgba(221, 255, 253, 1)',
|
||||
formatter: function (value) {
|
||||
// 在标签后面添加百分号
|
||||
return value.toFixed(1);
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
|
||||
// color: '#eff6ff'
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [{
|
||||
name: '电费',
|
||||
type: 'bar',
|
||||
barWidth: '15',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(82, 217, 208, 1)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(82, 217, 208, 0)'
|
||||
}]),
|
||||
|
||||
},
|
||||
},
|
||||
data: [40, 35, 15, 10, 19, 24, 14]
|
||||
},
|
||||
{
|
||||
name: '销售电价',
|
||||
type: 'line',
|
||||
yAxisIndex: 1, // 与第二个 y 轴关联
|
||||
itemStyle: {
|
||||
color: 'rgba(1, 246, 139, 1)', // 设置折线颜色为黄色
|
||||
},
|
||||
symbol:"none",
|
||||
data: [0.1, 0.2, 0.6, 1, 0.4, 0.8, 0.9], // 折线图的数据
|
||||
},
|
||||
]
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
// dom加载
|
||||
onMounted(() => {
|
||||
// 能耗总量
|
||||
|
|
@ -458,6 +622,8 @@ onMounted(() => {
|
|||
drawManagement()
|
||||
// 能效流向
|
||||
drawEnergyFlow()
|
||||
// 电费电价
|
||||
drawElectricityPrice()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -510,12 +676,13 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="system-content-right">
|
||||
<div class="system-content-right-item" v-for="(item,index) in systemRightList">
|
||||
<ul class="system-content-right-item-title">
|
||||
<li v-for="(s,i) in item">{{s.name}}</li>
|
||||
<div v-for="(item,index) in systemRightList" class="system-content-right-item">
|
||||
<ul class="system-content-right-item-title">
|
||||
<li v-for="(s,i) in item">{{ s.name }}</li>
|
||||
</ul>
|
||||
<div class="system-content-right-item-box">
|
||||
<span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{v.value}} <span class="unit">{{v.unit}}</span></span>
|
||||
<span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{ v.value }} <span
|
||||
class="unit">{{ v.unit }}</span></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -538,7 +705,7 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>电费电价</span>
|
||||
</div>
|
||||
<div id="ranking" class="margin10 box-bg"></div>
|
||||
<div id="electricity-price" class="margin10 box-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -609,19 +776,21 @@ onMounted(() => {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
|
||||
&-item {
|
||||
height: 30%;
|
||||
//background-color: #000;
|
||||
width: 100%;
|
||||
|
||||
&-title{
|
||||
&-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .8rem;
|
||||
padding: 0 .5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-box{
|
||||
|
||||
&-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -632,9 +801,10 @@ onMounted(() => {
|
|||
background-size: 100% 100%;
|
||||
height: 65%;
|
||||
width: 100%;
|
||||
color: rgba(255,255,255,1);
|
||||
.yoy{
|
||||
color:rgba(1, 246, 139, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
.yoy {
|
||||
color: rgba(1, 246, 139, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,24 +2,26 @@
|
|||
import calendar from '@/components/calendar/index.vue'
|
||||
import * as echarts from 'echarts'
|
||||
import {onMounted,ref} from "vue";
|
||||
|
||||
import getPath from "@/utils/getPath.js";
|
||||
// 实时负荷
|
||||
const realTimeLoad = ref([
|
||||
{pic:"../../assets/images/overview/room-num.png",name:'配电室数量',value:8,unit:'个'},
|
||||
{pic:"../../assets/images/overview/WL.png",name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
|
||||
{pic:"../../assets/images/overview/E.png",name:'今日电量',value:146,unit:'kW/h'}, //电量
|
||||
{pic:getPath.roomnum,name:'配电室数量',value:8,unit:'个'},
|
||||
{pic:getPath.WL,name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
|
||||
{pic:getPath.E,name:'今日电量',value:146,unit:'kW/h'}, //电量
|
||||
])
|
||||
// 气象站
|
||||
const weatherStation = ref([
|
||||
{pic:"../../assets/images/overview/rain.png",name:'雨量',value:100,unit:'mm'},
|
||||
{pic:"../../assets/images/overview/rain-snow.png",name:'雨雪',value:'实际取值',unit:'kW'},
|
||||
{pic:"../../assets/images/overview/wind.png",name:'风向',value:'东南风'},
|
||||
{pic:"../../assets/images/overview/illuminance.png",name:'光照度',value:101,unit:'lux'},
|
||||
{pic:"../../assets/images/overview/wind-speed.png",name:'风速',value:'东南风3级'},
|
||||
{pic:"../../assets/images/overview/air.png",name:'今日电量',value:'优'},
|
||||
{pic:getPath.rain,name:'雨量',value:100,unit:'mm'},
|
||||
{pic:getPath.rainsnow,name:'雨雪',value:'实际取值',unit:'kW'},
|
||||
{pic:getPath.wind,name:'风向',value:'东南风'},
|
||||
{pic:getPath.illuminance,name:'光照度',value:101,unit:'lux'},
|
||||
{pic:getPath.windspeed,name:'风速',value:'东南风3级'},
|
||||
{pic:getPath.air,name:'今日电量',value:'优'},
|
||||
])
|
||||
const getImageUrl=(name)=>{
|
||||
return `url(${new URL(name, import.meta.url).href})`
|
||||
}
|
||||
// const getImageUrl=(name)=>{
|
||||
// return `url(${new URL(name, import.meta.url).href})`
|
||||
// }
|
||||
onMounted(()=>{
|
||||
// 用电量
|
||||
drawPowerEcharts()
|
||||
|
|
@ -584,7 +586,7 @@ function getCarbonEmission() {
|
|||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
<ul class="real-time-load">
|
||||
<li v-for="(item,index) in realTimeLoad" :style="'background-image:'+ getImageUrl(item.pic)">
|
||||
<li v-for="(item,index) in realTimeLoad" :style="'background-image:url('+item.pic+')'">
|
||||
<span class="unit">{{item.name}}</span>
|
||||
<p>
|
||||
<span class="value">{{item.value}}</span>
|
||||
|
|
@ -602,7 +604,7 @@ function getCarbonEmission() {
|
|||
<div class="margin10 box-bg">
|
||||
<ul class="weather-station">
|
||||
<li v-for="(item,index) in weatherStation" >
|
||||
<p class="img" :style="'background-image:'+ getImageUrl(item.pic)">
|
||||
<p class="img" :style="'background-image:url('+item.pic+')'">
|
||||
<span>{{item.name}}</span>
|
||||
</p>
|
||||
<p><span class="wea-value">{{item.value}}</span><span class="unit" v-if="item.unit">{{ item.unit }}</span></p>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,26 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
显示屏
|
||||
</div>
|
||||
<div class="page m100">
|
||||
<div class="page-left-box">
|
||||
<div class="title ">
|
||||
<span>故障报警</span>
|
||||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<div class="title ">
|
||||
<span>运行状态</span>
|
||||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue