Compare commits
3 Commits
26b24711c5
...
9f5afda6f6
| Author | SHA1 | Date |
|---|---|---|
 luoshiwen
|
9f5afda6f6 | |
|
luoshiwen
|
790c8ed129 | |
|
luoshiwen
|
6ed07fe0fc |
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"element-plus": "^2.4.3",
|
||||
"moment": "^2.29.4",
|
||||
"sass": "^1.69.5",
|
||||
|
|
@ -1029,6 +1030,11 @@
|
|||
"node": ">=6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/claygl": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
|
||||
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
|
|
@ -1063,6 +1069,18 @@
|
|||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts-gl": {
|
||||
"version": "2.0.9",
|
||||
"resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
|
||||
"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
|
||||
"dependencies": {
|
||||
"claygl": "^1.2.1",
|
||||
"zrender": "^5.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"echarts": "^5.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
|
|
@ -2826,6 +2844,11 @@
|
|||
"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
|
||||
"peer": true
|
||||
},
|
||||
"claygl": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
|
||||
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
|
||||
},
|
||||
"commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
|
|
@ -2867,6 +2890,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"echarts-gl": {
|
||||
"version": "2.0.9",
|
||||
"resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
|
||||
"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
|
||||
"requires": {
|
||||
"claygl": "^1.2.1",
|
||||
"zrender": "^5.1.1"
|
||||
}
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.4.609",
|
||||
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 162 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 469 B |
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import moment from "moment"
|
||||
import {ref,shallowRef} from "vue";
|
||||
import {onMounted, ref, shallowRef} from "vue";
|
||||
import overview from '@/views/overview/index.vue' //总览
|
||||
import energyEfficiency from '@/views/energyEfficiency/index.vue' //能效
|
||||
import drainage from '@/views/drainage/index.vue' //排水
|
||||
|
|
@ -17,37 +17,40 @@ const nowWeek = ref('')
|
|||
const nowMin = ref('')
|
||||
|
||||
const timer = ref(0)
|
||||
const getNowDate = () =>{
|
||||
const getNowDate = () => {
|
||||
nowDate.value = moment().format('YYYY年MM月DD日')
|
||||
nowWeek.value = moment().format('dddd')
|
||||
nowMin.value = moment().format('HH:mm:ss')
|
||||
}
|
||||
getNowDate()
|
||||
timer.value = setInterval(()=>{
|
||||
timer.value = setInterval(() => {
|
||||
getNowDate()
|
||||
},1000)
|
||||
}, 1000)
|
||||
const menuList = ref([
|
||||
{name:shallowRef(overview),default:getPath.overview,select:getPath.overviewselect},
|
||||
{name:shallowRef(energyMonitoring),
|
||||
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}
|
||||
{name: shallowRef(overview), default: getPath.overview, select: getPath.overviewselect},
|
||||
{
|
||||
name: shallowRef(energyMonitoring),
|
||||
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)
|
||||
// const animationShow = ref(false)
|
||||
// 菜单切换方法
|
||||
const toggleClick = (item,index) =>{
|
||||
const toggleClick = (item, index) => {
|
||||
tabName.value = item?.name
|
||||
menuIndex.value = index
|
||||
|
||||
}
|
||||
const tabName = shallowRef(overview)
|
||||
const getImageUrl=(name)=>{
|
||||
return `url(${new URL(name, import.meta.url).href})`
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -66,9 +69,9 @@ const getImageUrl=(name)=>{
|
|||
<div class="container">
|
||||
<div class="date">
|
||||
<p>
|
||||
<span class="m10">{{nowDate}}</span>
|
||||
<span class="m10">{{nowWeek}}</span>
|
||||
<span>{{nowMin}}</span>
|
||||
<span class="m10">{{ nowDate }}</span>
|
||||
<span class="m10">{{ nowWeek }}</span>
|
||||
<span>{{ nowMin }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="m10 weaIcon">晴</span>
|
||||
|
|
@ -78,18 +81,46 @@ const getImageUrl=(name)=>{
|
|||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li @click="toggleClick(item,index)" v-for="(item,index) in menuList" :style="'background-image:'+ getImageUrl(menuIndex==index?item.select:item.default)" :class="'menu-icon'+index"></li>
|
||||
<li v-for="(item,index) in menuList" :class="'menu-icon'+index"
|
||||
:style="menuIndex===index?'background-image:url('+ item.select + ')':'background-image:url('+ item.default + ')'"
|
||||
@click="toggleClick(item,index)"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <overview></overview>-->
|
||||
<!-- <router-view />-->
|
||||
<keep-alive>
|
||||
<component :is="tabName"></component>
|
||||
</keep-alive>
|
||||
<!-- <overview></overview>-->
|
||||
<!-- <router-view />-->
|
||||
<transition appear mode="out-in">
|
||||
<keep-alive>
|
||||
<component :is="tabName"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.v-enter-active {
|
||||
transition: opacity 1s ease-in;
|
||||
}
|
||||
|
||||
.v-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.v-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.v-leave-active {
|
||||
transition: opacity 1s ease-in
|
||||
}
|
||||
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: vh(136);
|
||||
width: 100%;
|
||||
|
|
@ -99,7 +130,9 @@ const getImageUrl=(name)=>{
|
|||
background-image: url('@/assets/images/mask/top.png');
|
||||
background-size: 100% 100%;
|
||||
z-index: -1 !important;
|
||||
|
||||
}
|
||||
|
||||
.left-mask {
|
||||
width: vw(600);
|
||||
left: 0;
|
||||
|
|
@ -120,38 +153,45 @@ const getImageUrl=(name)=>{
|
|||
background-image: url('@/assets/images/mask/right.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.date{
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
margin: 2.5rem 2.2rem 0 2.2rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.m10{
|
||||
|
||||
.m10 {
|
||||
margin-right: 1.3rem;
|
||||
}
|
||||
.weaIcon{
|
||||
|
||||
.weaIcon {
|
||||
|
||||
}
|
||||
.menu{
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
bottom: vh(24);
|
||||
z-index:999;
|
||||
left:29.15%;
|
||||
z-index: 999;
|
||||
left: 29.15%;
|
||||
width: vw(800);
|
||||
height: vh(100);
|
||||
ul{
|
||||
|
||||
ul {
|
||||
//width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
li{
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
width:12.5%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
width: 12.5%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
127
src/style.scss
127
src/style.scss
|
|
@ -50,12 +50,37 @@ p,ul,li{
|
|||
|
||||
&-right-box {
|
||||
padding-right: 2.375rem;
|
||||
|
||||
}
|
||||
|
||||
&-left-box {
|
||||
padding-left: 2.375rem;
|
||||
|
||||
//transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out {
|
||||
//0%{
|
||||
// transform: translateX(0%);
|
||||
//}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
//@keyframes slide-in {
|
||||
// //0%{
|
||||
// // transform: translateX(0%);
|
||||
// //}
|
||||
// from{
|
||||
// opacity: 0;
|
||||
// }
|
||||
// to {
|
||||
// opacity: 1;
|
||||
// }
|
||||
//}
|
||||
.m100{
|
||||
position: relative;
|
||||
top:2rem;
|
||||
|
|
@ -91,6 +116,7 @@ p,ul,li{
|
|||
span{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-family: normal;
|
||||
}
|
||||
.year,.month,.day{
|
||||
padding: 0 0.8rem;
|
||||
|
|
@ -100,6 +126,9 @@ p,ul,li{
|
|||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectMonth,.selectYear,.selectDay{
|
||||
background-image: url('@/assets/images/small-icon-select.png');
|
||||
}
|
||||
.day{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
|
@ -108,3 +137,101 @@ p,ul,li{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//table的css
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
|
||||
//弹窗
|
||||
.dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: vw(506);
|
||||
height: vh(317);
|
||||
background-image: url('@/assets/images/lighting/dialog.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-title {
|
||||
padding-left: 2.5rem;
|
||||
padding-top: .2rem;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 1.4rem;
|
||||
font-family: title;
|
||||
}
|
||||
.close-btn {
|
||||
background-image: url('@/assets/images/lighting/dialog-close.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 5%;
|
||||
height: 8.5%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(true)
|
||||
// 父组件传值
|
||||
const props = defineProps({
|
||||
dialogName:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update'])
|
||||
const closeDialog = () =>{
|
||||
// 关闭弹窗
|
||||
emit('update',false)
|
||||
}
|
||||
// 选中设备
|
||||
const checkedSystem = ref(['2号机窗'])
|
||||
const systems = ['1号机窗', '2号机窗', '3号机窗', '4号机窗']
|
||||
|
||||
const handleCheckAllChange = (val) => {
|
||||
checkedSystem.value = val ? systems : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const handleCheckedCitiesChange = (value) => {
|
||||
const checkedCount = value.length
|
||||
checkAll.value = checkedCount === systems.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < systems.length
|
||||
}
|
||||
|
||||
// 关闭设备的按钮
|
||||
const toggleClose = (index) =>{
|
||||
checkedSystem.value.splice(index,1)
|
||||
const checkedCount = checkedSystem.value.length
|
||||
checkAll.value = checkedCount === systems.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < systems.length
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dialog">
|
||||
<div class="close-btn" @click="closeDialog"></div>
|
||||
<div class="dialog-title">策略编辑</div>
|
||||
<div class="dialog-box">
|
||||
<div class="dialog-box-name">
|
||||
<el-form-item label="策略名称:">
|
||||
<el-input v-model="props.dialogName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="dialog-box-content">
|
||||
<div class="dialog-box-content-item">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>全部设备</el-checkbox
|
||||
>
|
||||
<el-checkbox-group
|
||||
|
||||
v-model="checkedSystem"
|
||||
@change="handleCheckedCitiesChange"
|
||||
>
|
||||
<el-checkbox v-for="city in systems" :key="city" :label="city">{{
|
||||
city
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="dialog-box-content-item">
|
||||
<div class="on-device">开机设备</div>
|
||||
<div class="system">
|
||||
<div class="select-system" v-for="(item,index) in checkedSystem">
|
||||
<span>{{item}}</span>
|
||||
<span class="close" @click="toggleClose(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dialog-box{
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-content{
|
||||
//background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 86%;
|
||||
&-item{
|
||||
font-size: .875rem;
|
||||
padding: 2%;
|
||||
box-sizing: border-box;
|
||||
width: 47%;
|
||||
height: 90%;
|
||||
background-image: url('@/assets/images/air-conditioning/dialog-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
.on-device{
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.system{
|
||||
height: 80%;
|
||||
.select-system{
|
||||
margin-bottom: 2%;
|
||||
width: 60%;
|
||||
padding-left: 1rem;
|
||||
padding-right: .5rem;
|
||||
box-sizing: border-box;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-image: url("@/assets/images/air-conditioning/system-border.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
align-items: center;
|
||||
.close{
|
||||
width: 8%;
|
||||
cursor: pointer;
|
||||
height: 40%;
|
||||
background-image: url("@/assets/images/air-conditioning/close-btn.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__inner){
|
||||
color:rgba(255, 255, 255, 1);
|
||||
}
|
||||
:deep(.el-input__wrapper){
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.el-form-item__label){
|
||||
color:rgba(255, 255, 255, 1);
|
||||
font-size: .875rem;
|
||||
}
|
||||
:deep(.el-input){
|
||||
width: 50%;
|
||||
height: 65%;
|
||||
}
|
||||
:deep(.el-input__wrapper){
|
||||
border-radius: 0;
|
||||
}
|
||||
:deep(.el-form-item){
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
:deep(.el-checkbox){
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
margin-bottom: 2%;
|
||||
color:rgba(221, 255, 253, 1);
|
||||
}
|
||||
:deep(.el-checkbox-group){
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
:deep(.el-checkbox__input.is-checked+.el-checkbox__label){
|
||||
color:rgba(221, 255, 253, 1);
|
||||
}
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after){
|
||||
border-color:#000;
|
||||
}
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner){
|
||||
background-color: rgba(255, 221, 0, 1);
|
||||
border-color: rgba(255, 221, 0, 1);
|
||||
}
|
||||
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before){
|
||||
background-color: #000;
|
||||
}
|
||||
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
|
||||
background-color: rgba(221, 255, 253, 1);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup>
|
||||
import {ref, reactive} from "vue";
|
||||
import getPath from "@/utils/getPath.js";
|
||||
|
||||
import dialogBox from './components/dialogBox.vue'
|
||||
const systemNumList = ref([
|
||||
{
|
||||
name: '运行设备数量',
|
||||
|
|
@ -153,10 +153,23 @@ const maintenanceList = ref([
|
|||
date: '09',
|
||||
}
|
||||
])
|
||||
|
||||
// 弹窗
|
||||
const dialogBoxShow = ref(false)
|
||||
const dialogName = ref('')
|
||||
const openDialog = (name) =>{
|
||||
dialogBoxShow.value = true
|
||||
dialogName.value = name
|
||||
}
|
||||
const closeDialog = (val) =>{
|
||||
dialogBoxShow.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
<!-- 弹窗-->
|
||||
<dialogBox v-show="dialogBoxShow" @update="closeDialog" :dialogName="dialogName"/>
|
||||
<div class="page-left-box">
|
||||
<!-- 概况-->
|
||||
<div class="title">
|
||||
|
|
@ -222,6 +235,7 @@ const maintenanceList = ref([
|
|||
<span>开机策略</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
<!-- tbale -->
|
||||
<div class="runningState">
|
||||
<div class="tableTitle">
|
||||
<span>策略名称</span>
|
||||
|
|
@ -235,7 +249,7 @@ const maintenanceList = ref([
|
|||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<el-switch v-model="item.value" style="left: 8px" />
|
||||
<span>编辑</span>
|
||||
<span @click="openDialog(item.name)" style="cursor: pointer">编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div
|
||||
v-for="(item, index) in overviewDate"
|
||||
:key="index"
|
||||
:class="[activeDate == index ? 'dateAc' : 'date']"
|
||||
:class="[activeDate === index ? 'dateAc' : 'date']"
|
||||
@click="switchDate(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<div class="title margin10">
|
||||
<span>碳流图</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id=""></div>
|
||||
<div class="margin10 box-bg" id="energyFlow"></div>
|
||||
<!-- 碳排放趋势-->
|
||||
<div class="title margin10">
|
||||
<span>碳排放趋势</span>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<div
|
||||
v-for="(item, index) in trendDate"
|
||||
:key="index"
|
||||
:class="[trendActiveDate == index ? 'dateAc' : 'date']"
|
||||
:class="[trendActiveDate === index ? 'dateAc' : 'date']"
|
||||
@click="trandSwitchDate(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
|
|
@ -89,9 +89,6 @@ import * as echarts from "echarts";
|
|||
import "echarts-gl";
|
||||
import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
|
||||
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
const overviewDate = ref([
|
||||
{
|
||||
name: "年",
|
||||
|
|
@ -239,7 +236,7 @@ function getCarbonTrends() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//碳排放强度
|
||||
function getCarbonIntensity() {
|
||||
const getCarbonIntensity=()=> {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -365,7 +362,7 @@ function getCarbonIntensity() {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
|
|
@ -408,7 +405,7 @@ function getCarbonIntensity() {
|
|||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
|
|
@ -540,7 +537,7 @@ function getCarbonIntensity() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//各系统碳排放量统计
|
||||
function getCarbonEmissionStatistics() {
|
||||
const getCarbonEmissionStatistics = ()=> {
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("carbonEmissionStatistics")
|
||||
);
|
||||
|
|
@ -684,7 +681,7 @@ const color = [
|
|||
"rgba(1, 225, 242, 1)",
|
||||
"rgba(27, 255, 118, 1)",
|
||||
];
|
||||
function setLabel() {
|
||||
const setLabel = ()=> {
|
||||
optionData.value.forEach((item, index) => {
|
||||
item.itemStyle = {
|
||||
color: color[index],
|
||||
|
|
@ -739,7 +736,7 @@ function setLabel() {
|
|||
});
|
||||
}
|
||||
//碳中和
|
||||
function getCarbonNeutrality() {
|
||||
const getCarbonNeutrality = () => {
|
||||
setLabel();
|
||||
let myChart = echarts.init(document.getElementById("carbonNeutrality"));
|
||||
let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
|
||||
|
|
@ -767,6 +764,160 @@ function getCarbonNeutrality() {
|
|||
myChart.setOption(option);
|
||||
// bindListen(myChart);
|
||||
}
|
||||
// 碳流图
|
||||
const drawEnergyFlow = () => {
|
||||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let sourceData = [
|
||||
{
|
||||
name: "电",
|
||||
nameValue: 1562,
|
||||
valueUnit: "KWh",
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
nameValue: 562,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "照明",
|
||||
nameValue: 490,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "电梯",
|
||||
nameValue: 510,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "其他",
|
||||
nameValue:320,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
];
|
||||
let sangjiColor = [
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
];
|
||||
let itemStyleSource = [];
|
||||
for (let d = 0; d < sourceData.length; d++) {
|
||||
if (sourceData[d].name === "电") {
|
||||
sourceData[d].label = {
|
||||
position: "right",
|
||||
};
|
||||
}
|
||||
sourceData[d].itemStyle = {
|
||||
color: sangjiColor[d],
|
||||
};
|
||||
itemStyleSource.push(sourceData[d]);
|
||||
}
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
// select:{
|
||||
// disabled:true
|
||||
// },
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
top: "5%",
|
||||
bottom: "4%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
nodeAlign:'right',
|
||||
nodeWidth: "13",
|
||||
// nodeAlign:'right',
|
||||
focusNodeAdjacency: "allEdges",
|
||||
data: itemStyleSource,
|
||||
links: [
|
||||
{
|
||||
source: "电",
|
||||
target: "空调",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
target: "照明",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
target: "电梯",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
target: "其他",
|
||||
value: 8,
|
||||
},
|
||||
],
|
||||
label: {
|
||||
position: "left",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
formatter: function (params) {
|
||||
|
||||
if (params.dataIndex === 0) {
|
||||
return (
|
||||
"{a|" +
|
||||
params.data.name +
|
||||
"}\n" +
|
||||
"{b|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
" " +
|
||||
params.data.valueUnit
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
"{name|" +
|
||||
params.data.name +
|
||||
"}" +
|
||||
"{value|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
// " " +
|
||||
params.data.valueUnit
|
||||
);
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
padding: [0, 15, 10, 0],
|
||||
fontSize: "14",
|
||||
},
|
||||
b: {
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
fontWeight: "600",
|
||||
fontSize: "16",
|
||||
},
|
||||
name: {
|
||||
fontSize: 14,
|
||||
// padding: [10, 0, 0, 0],
|
||||
},
|
||||
value: {
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
fontWeight: "600",
|
||||
fontSize: "16",
|
||||
padding: [0, 10, 0, 10],
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: "source",
|
||||
// curveness: 0.5,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "transparent",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
};
|
||||
//加载完dom执行
|
||||
onMounted(() => {
|
||||
//碳趋势图表
|
||||
|
|
@ -777,6 +928,8 @@ onMounted(() => {
|
|||
getCarbonEmissionStatistics();
|
||||
//碳中和
|
||||
getCarbonNeutrality();
|
||||
// 碳流图
|
||||
drawEnergyFlow()
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,6 +73,23 @@ const systemRightList = ref([
|
|||
}
|
||||
]//年
|
||||
])
|
||||
|
||||
// 能耗总量时间点击事件
|
||||
const totalEnergyDate = ref('month')
|
||||
const toggleTotalEnergy = (event) =>{
|
||||
totalEnergyDate.value = event.srcElement.className
|
||||
}
|
||||
// 能效对标时间点击时间
|
||||
const managementDate = ref('month')
|
||||
|
||||
const toggleManagement = (event) => {
|
||||
managementDate.value = event.srcElement.className
|
||||
}
|
||||
// 复费率的时间点击事件
|
||||
const exhibitionLoadDate = ref('month')
|
||||
const toggleExhibitionLoad = (event) =>{
|
||||
exhibitionLoadDate.value = event.srcElement.className
|
||||
}
|
||||
const selectSystemTab = (index) => {
|
||||
systemTabIndex.value = index;
|
||||
};
|
||||
|
|
@ -909,6 +926,7 @@ const drawElectricityPrice = () => {
|
|||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
// dom加载
|
||||
onMounted(() => {
|
||||
// 能耗总量
|
||||
|
|
@ -933,8 +951,8 @@ onMounted(() => {
|
|||
<div class="title">
|
||||
<span>能耗总量</span>
|
||||
<p>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
<span class="month" :class="totalEnergyDate === 'month'?'selectMonth':''" @click="toggleTotalEnergy">月</span>
|
||||
<span class="day" :class="totalEnergyDate === 'day'?'selectDay':''" @click="toggleTotalEnergy">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="totalEnergy" class="margin10 box-bg"></div>
|
||||
|
|
@ -942,8 +960,8 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>能效对标（定额管理）</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="year" :class="managementDate === 'year'?'selectYear':''" @click="toggleManagement">年</span>
|
||||
<span class="month" :class="managementDate === 'month'?'selectMonth':''" @click="toggleManagement">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="management" class="margin10 box-bg"></div>
|
||||
|
|
@ -962,7 +980,7 @@ onMounted(() => {
|
|||
<ul class="system-tab">
|
||||
<li
|
||||
v-for="(item, index) in systemTab"
|
||||
:class="index == systemTabIndex ? 'tab-select' : ''"
|
||||
:class="index === systemTabIndex ? 'tab-select' : ''"
|
||||
@click="selectSystemTab(index)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
|
|
@ -996,9 +1014,9 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>复费率</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
<span class="year" :class="exhibitionLoadDate === 'year'?'selectYear':''" @click="toggleExhibitionLoad">年</span>
|
||||
<span class="month" :class="exhibitionLoadDate === 'month'?'selectMonth':''" @click="toggleExhibitionLoad">月</span>
|
||||
<span class="day" :class="exhibitionLoadDate === 'day'?'selectDay':''" @click="toggleExhibitionLoad">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
||||
|
|
|
|||
|
|
@ -44,8 +44,9 @@ const getImageUrl = (name) => {
|
|||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
//实时负荷
|
||||
function getRealTimeLoad() {
|
||||
let myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
const getRealTimeLoad = ()=> {
|
||||
let myChart
|
||||
myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
|
|
@ -125,7 +126,7 @@ function getRealTimeLoad() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//当日累计用电量
|
||||
function getDailyElectricityConsumption() {
|
||||
const getDailyElectricityConsumption = () => {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -252,7 +253,7 @@ function getDailyElectricityConsumption() {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
interval: 1,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
|
|
@ -293,7 +294,7 @@ function getDailyElectricityConsumption() {
|
|||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
|
|
@ -408,7 +409,7 @@ function getDailyElectricityConsumption() {
|
|||
}
|
||||
|
||||
//空调负荷
|
||||
function drawAirConditioningLoad() {
|
||||
const drawAirConditioningLoad = ()=> {
|
||||
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -508,7 +509,7 @@ function drawAirConditioningLoad() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
// 展陈负荷
|
||||
function drawExhibitionLoad() {
|
||||
const drawExhibitionLoad =()=> {
|
||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -608,7 +609,7 @@ function drawExhibitionLoad() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
// 配电回路排名
|
||||
function drawRanking() {
|
||||
const drawRanking = ()=> {
|
||||
let myChart = echarts.init(document.getElementById("ranking"));
|
||||
let option = {
|
||||
grid: {
|
||||
|
|
@ -744,7 +745,7 @@ function drawRanking() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//负荷分类
|
||||
function getLoadClassification() {
|
||||
const getLoadClassification=()=> {
|
||||
var trafficWay = [
|
||||
{
|
||||
name: "一级",
|
||||
|
|
@ -927,7 +928,6 @@ function getLoadClassification() {
|
|||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 60,
|
||||
length: 60,
|
||||
length2: 60,
|
||||
show: true,
|
||||
|
|
@ -943,19 +943,19 @@ function getLoadClassification() {
|
|||
}
|
||||
//加载完dom执行
|
||||
onMounted(() => {
|
||||
//实时负荷
|
||||
getRealTimeLoad();
|
||||
//当日累计用电量
|
||||
getDailyElectricityConsumption();
|
||||
// 空调负荷
|
||||
drawAirConditioningLoad();
|
||||
// 展陈负荷
|
||||
drawExhibitionLoad();
|
||||
// 配电回路排名
|
||||
drawRanking();
|
||||
//负荷分类
|
||||
getLoadClassification();
|
||||
});
|
||||
//实时负荷
|
||||
getRealTimeLoad();
|
||||
//当日累计用电量
|
||||
getDailyElectricityConsumption();
|
||||
// 空调负荷
|
||||
drawAirConditioningLoad();
|
||||
// 展陈负荷
|
||||
drawExhibitionLoad();
|
||||
// 配电回路排名
|
||||
drawRanking();
|
||||
//负荷分类
|
||||
getLoadClassification();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
|
||||
const lightControl = ref([
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:true
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
}
|
||||
|
||||
])
|
||||
// 照明控制
|
||||
const controlBtn = ref('')
|
||||
const toggleControl = (event) =>{
|
||||
controlBtn.value = event.srcElement.className
|
||||
if(event.srcElement.className==="off"){
|
||||
lightControl.value.forEach(ele=>{
|
||||
ele.state = false
|
||||
})
|
||||
}else if(event.srcElement.className==="on"){
|
||||
lightControl.value.forEach(ele=>{
|
||||
ele.state = true
|
||||
})
|
||||
}
|
||||
}
|
||||
const props = defineProps(
|
||||
{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
name:{
|
||||
type:String,
|
||||
default:"",
|
||||
}
|
||||
}
|
||||
)
|
||||
const emit = defineEmits(['update'])
|
||||
const closeDialog = () => {
|
||||
// 向父组件传值
|
||||
emit('update',false)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dialog" v-if="props.show">
|
||||
<div class="close-btn" @click="closeDialog"></div>
|
||||
<div class="dialog-title">
|
||||
<span>{{props.name}}</span>
|
||||
</div>
|
||||
<div class="control-btn">
|
||||
<span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
|
||||
<span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<div class="runningState">
|
||||
<div class="tableTitle">
|
||||
<span>回路名称</span>
|
||||
<span>操作</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div class="tableBoby"
|
||||
v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
|
||||
<span><el-switch v-model="item.state" style="left: 8px" /></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.dialog-content{
|
||||
width: 100%;
|
||||
height: 74%;
|
||||
box-sizing: border-box;
|
||||
//padding: 1rem .5rem 0 1rem;
|
||||
}
|
||||
.control-btn{
|
||||
padding-left: 1rem;
|
||||
padding-top: .8rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.select{
|
||||
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||||
}
|
||||
span{
|
||||
background-image: url("@/assets/images/air-tab.png");
|
||||
cursor: pointer;
|
||||
font-family: normal;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
background-size: 100% 100%;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
: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>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup>
|
||||
import {ref} from "vue"
|
||||
import {onMounted, ref} from "vue"
|
||||
import getPath from "@/utils/getPath.js";
|
||||
import * as echarts from "echarts";
|
||||
import dialogBox from './components/dialog.vue'
|
||||
// 照明监测
|
||||
const lightingNumList = ref([
|
||||
{
|
||||
|
|
@ -24,10 +26,681 @@ const lightingNumList = ref([
|
|||
pic:getPath.offlineNum,
|
||||
}
|
||||
])
|
||||
// 照明回路详情
|
||||
const lightDetail = ref([
|
||||
{
|
||||
name:'照明1',
|
||||
address:"西大厅",
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明2',
|
||||
address:"西大厅",
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明3',
|
||||
address:"西大厅",
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明4',
|
||||
address:"西大厅",
|
||||
state:true
|
||||
},
|
||||
{
|
||||
name:'照明5',
|
||||
address:"西大厅",
|
||||
state:true
|
||||
}
|
||||
])
|
||||
|
||||
// 照明控制
|
||||
const lightControl = ref([
|
||||
{
|
||||
name:'控制箱名称1'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称2'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称3'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称4'
|
||||
},
|
||||
{
|
||||
name:'控制箱名称5'
|
||||
}
|
||||
|
||||
])
|
||||
// 照明负荷的时间切换
|
||||
const lightLoadDate = ref('day')
|
||||
const toggleLightLoad = (event) =>{
|
||||
lightLoadDate.value = event.srcElement.className
|
||||
}
|
||||
// 照明控制
|
||||
const controlBtn = ref('')
|
||||
const toggleControl = (event) =>{
|
||||
controlBtn.value = event.srcElement.className
|
||||
}
|
||||
// 弹窗
|
||||
const dialogShow = ref(false)
|
||||
const box = ref("")
|
||||
const dialogTitle = ref("")
|
||||
const openDialog = (name) =>{
|
||||
dialogShow.value = true
|
||||
dialogTitle.value = name
|
||||
}
|
||||
const closeDialog = (val) =>{
|
||||
dialogShow.value = val
|
||||
}
|
||||
// 故障情况
|
||||
const drawFaultConditionsChart = () =>{
|
||||
let trafficWay = [
|
||||
{
|
||||
name: "正常",
|
||||
value: 1260,
|
||||
},
|
||||
{
|
||||
name: "故障",
|
||||
value: 80,
|
||||
},
|
||||
|
||||
];
|
||||
var total = 0;
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
total += trafficWay[i].value;
|
||||
}
|
||||
|
||||
var data = [];
|
||||
var color = [
|
||||
'rgba(1, 246, 139, 1)',
|
||||
'rgba(255, 221, 0, 1)'
|
||||
];
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
data.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
borderWidth: 5,
|
||||
// shadowBlur: 20,
|
||||
borderRadius: 10,
|
||||
borderColor: color[i],
|
||||
shadowColor: color[i],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: total * 0.04,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
||||
let myChart = echarts.init(document.getElementById("faultConditions"));
|
||||
let option = {
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
z: 3,
|
||||
style: {
|
||||
image: img,
|
||||
width: 175,
|
||||
height: 175,
|
||||
},
|
||||
left: "center",
|
||||
top: "center",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
color: color,
|
||||
title: [
|
||||
{
|
||||
text: total,
|
||||
x: "47%",
|
||||
y: "42%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontFamily: "Verdana-Bold",
|
||||
fontSize: "20",
|
||||
fontWeight: "bold",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "个",
|
||||
x: "58%",
|
||||
y: "45%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontSize: "13",
|
||||
fontWeight: "100",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "照明四路数量",
|
||||
left: "49%",
|
||||
top: "55%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
fontSize: "12",
|
||||
fontWeight: "100",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
clockWise: true,
|
||||
radius: [50, 56],
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
color: "#FFFFFF",
|
||||
fontSize: 13,
|
||||
formatter: function (params) {
|
||||
var percent = 0;
|
||||
// var total = 0
|
||||
// for (var i = 0; i < trafficWay.length; i++) {
|
||||
// total += trafficWay[i].value
|
||||
// }
|
||||
percent = params.percent;
|
||||
let unit = "个";
|
||||
// percent = ((params.value / total) * 100).toFixed(0)
|
||||
if (params.name !== "") {
|
||||
return (
|
||||
`{a${params.dataIndex / 2}|` +
|
||||
params.value +
|
||||
"}" +
|
||||
`{s0|` +
|
||||
unit +
|
||||
"}" +
|
||||
"\n" +
|
||||
params.name
|
||||
);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
padding: [60, -50],
|
||||
textStyle: {
|
||||
rich: {
|
||||
a0: {
|
||||
color: "rgba(1, 246, 139, 1)",
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
a1: {
|
||||
color: color[1],
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
s0: {
|
||||
color: "#fff",
|
||||
padding: [0, 0, 10, 5],
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 20,
|
||||
length2: 100,
|
||||
show: true,
|
||||
showAbove:true,
|
||||
color: "#00ffff",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 展馆照明
|
||||
const drawHallLightingChart =()=>{
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
const CubeLeft = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 7, shape.y];
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
// 绘制右侧面
|
||||
const CubeRight = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
// 绘制顶面
|
||||
const CubeTop = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const c1 = [shape.x - 7, shape.y];
|
||||
const c2 = [shape.x + 8, shape.y];
|
||||
const c3 = [shape.x + 15, shape.y - 5];
|
||||
const c4 = [shape.x - 2, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
// 注册三个面图形
|
||||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let intAxisData = ['室内','户外'];
|
||||
let intSeriesData = [100,200];
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
let colorArr;
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("hallLighting")
|
||||
);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: function (params, ticket, callback) {
|
||||
const item = params[1];
|
||||
return item.name + " : " + item.value;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "4%",
|
||||
right: "5%",
|
||||
top: "18%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: intAxisData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
interval: 0,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
// const length = value.length;
|
||||
// if (length > 3) {
|
||||
// const start = Math.floor(length / 2);
|
||||
// const str =
|
||||
// value.slice(0, start) + "\n" + value.slice(start, length);
|
||||
// return str;
|
||||
// }
|
||||
// return value;
|
||||
// },
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位:kW",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding:[0,20,0,0]
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
// y轴横向 标线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
// y轴刻度线
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
colorArr = params.dataIndex===0?[
|
||||
// 蓝色渐变
|
||||
["rgba(0, 170, 193, 1)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
]:[
|
||||
// 绿色渐变
|
||||
["rgba(0, 193, 113, 1)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
]
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
// 左侧面
|
||||
{
|
||||
type: "CubeLeft",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr[1][0],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[1][1],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
// 右侧面
|
||||
{
|
||||
type: "CubeRight",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr[1][0],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[1][1],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
// 顶部
|
||||
{
|
||||
type: "CubeTop",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr[0][0],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[0][0],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
data: intSeriesData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
formatter: (e) => {
|
||||
return e.value;
|
||||
},
|
||||
fontSize: 16,
|
||||
color: "#43C4F1",
|
||||
offset: [0, -5],
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
},
|
||||
tooltip: {},
|
||||
data: intSeriesData,
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 照明负荷
|
||||
const drawLightLoadChart = () =>{
|
||||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
top: '18%',
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
bottom: '7%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
borderWidth: 1,
|
||||
// axisPointer: {
|
||||
// type: 'shadow'
|
||||
// },
|
||||
// extraCssText: 'z-index:2'
|
||||
|
||||
},
|
||||
legend: [{
|
||||
icon: 'rect',
|
||||
top: 5,
|
||||
left: 'right',
|
||||
orient: 'horizontal',
|
||||
// data: ['进水量', '出水量'],
|
||||
borderRadius: 20,
|
||||
itemHeight:10,
|
||||
itemWidth:15,
|
||||
textStyle: {
|
||||
color: '#DDFFFD',
|
||||
fontSize: 12,
|
||||
// fontWeight: 400
|
||||
}
|
||||
}],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['13:00', '14:00', '15:00', '16:00', '17:00'],
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// type:'dashed',
|
||||
color: "#557775"
|
||||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#DDFFFD",//X轴文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
min:0,
|
||||
max:500,
|
||||
type: 'value',
|
||||
name: '单位/kW',
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12,
|
||||
padding: [0, 10, 0, 0], // 四个数字分别为上右下左与原位置距离
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '昨日',
|
||||
type: 'line',
|
||||
//显示所有图形。
|
||||
//标记的图形为实心圆
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: 'white',
|
||||
borderWidth: '2',
|
||||
borderColor: 'rgba(91, 250, 241, 1)',
|
||||
normal: {
|
||||
color: 'rgba(91, 250, 241, 1)'//拐点颜色
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'rgba(91, 250, 241, 1)'
|
||||
},
|
||||
data: [400, 320, 100, 320, 100]
|
||||
},
|
||||
{
|
||||
name: '今日',
|
||||
type: 'line',
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: 'white',
|
||||
borderWidth: '2',
|
||||
borderColor: '#91cc75',
|
||||
normal: {
|
||||
color: '#91cc75'//拐点颜色
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#91cc75'
|
||||
},
|
||||
data: [100, 320, 400,420, 500]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
myChart.setOption(option)
|
||||
}
|
||||
onMounted(()=>{
|
||||
// 故障情况
|
||||
drawFaultConditionsChart()
|
||||
// 展馆照明
|
||||
drawHallLightingChart()
|
||||
// 照明负荷
|
||||
drawLightLoadChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
<dialogBox ref="box" :show="dialogShow" @update="closeDialog" :name="dialogTitle"/>
|
||||
<div class="page-left-box">
|
||||
<!-- 照明监测-->
|
||||
<div class="title">
|
||||
|
|
@ -47,29 +720,73 @@ const lightingNumList = ref([
|
|||
<div class="title margin10">
|
||||
<span>照明回路详情</span>
|
||||
</div>
|
||||
<div 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 lightDetail"
|
||||
:key="index"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span>{{item.address}}</span>
|
||||
<span ><i :class="item.state?'state1':'state0'"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 照明负荷-->
|
||||
<div class="title margin10">
|
||||
<span>照明负荷</span>
|
||||
<p>
|
||||
<span class="year" :class="lightLoadDate === 'year'?'selectYear':''" @click="toggleLightLoad">年</span>
|
||||
<span class="month" :class="lightLoadDate === 'month'?'selectMonth':''" @click="toggleLightLoad">月</span>
|
||||
<span class="day" :class="lightLoadDate === 'day'?'selectDay':''" @click="toggleLightLoad">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg"></div>
|
||||
<div class="margin10 box-bg" id="lightLoad"></div>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<!-- 展馆照明 -->
|
||||
<div class="title">
|
||||
<span>展馆照明</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="airConditioningLoad"></div>
|
||||
<div class="margin10 box-bg" id="hallLighting"></div>
|
||||
<!-- 照明控制-->
|
||||
<div class="title margin10">
|
||||
<span>照明控制</span>
|
||||
<p class="control-btn">
|
||||
<span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
|
||||
<span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" >
|
||||
<div class="runningState">
|
||||
<div class="tableTitle">
|
||||
<span>控制箱名称</span>
|
||||
<span>操作</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div class="tableBoby"
|
||||
v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
|
||||
<span class="control" @click="openDialog(item.name)">照明控制</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="margin10 box-bg" id="faultConditions"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -111,5 +828,43 @@ const lightingNumList = ref([
|
|||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
//照明回路详情
|
||||
.state0,.state1{
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
display: block;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.state0{
|
||||
background-image: url('@/assets/images/lighting/state0.png');
|
||||
}
|
||||
.state1{
|
||||
background-image: url('@/assets/images/lighting/state1.png');
|
||||
}
|
||||
//照明控制
|
||||
.control{
|
||||
color:rgba(61, 255, 244, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.control-btn{
|
||||
display: flex;
|
||||
.select{
|
||||
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||||
}
|
||||
span{
|
||||
background-image: url("@/assets/images/air-tab.png");
|
||||
cursor: pointer;
|
||||
font-family: normal;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
background-size: 100% 100%;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem 1.1rem;
|
||||
}
|
||||
}
|
||||
//弹窗
|
||||
.dialog{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -30,7 +30,17 @@ onMounted(()=>{
|
|||
//碳排放
|
||||
getCarbonEmission()
|
||||
})
|
||||
// 用电量时间切换
|
||||
const powerDate = ref('year')
|
||||
|
||||
const togglePower = (event) =>{
|
||||
powerDate.value = event.srcElement.className
|
||||
}
|
||||
// 碳排放时间切换
|
||||
const carbonEmissionDate = ref('month')
|
||||
const toggleCarbonEmission = (event) =>{
|
||||
carbonEmissionDate.value = event.srcElement.className
|
||||
}
|
||||
const drawPowerEcharts = () =>{
|
||||
let myChart = echarts.init(document.getElementById('power'))
|
||||
const option = {
|
||||
|
|
@ -386,7 +396,7 @@ function getCarbonEmission() {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
|
|
@ -427,7 +437,7 @@ function getCarbonEmission() {
|
|||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
|
|
@ -551,8 +561,8 @@ function getCarbonEmission() {
|
|||
<div class="title">
|
||||
<span>用电量</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="year" :class="powerDate === 'year'?'selectYear':''" @click="togglePower">年</span>
|
||||
<span class="month" :class="powerDate === 'month'?'selectMonth':''" @click="togglePower">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="power">
|
||||
|
|
@ -572,8 +582,8 @@ function getCarbonEmission() {
|
|||
<div class="title margin10">
|
||||
<span>碳排放</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="year" :class="carbonEmissionDate === 'year'?'selectYear':''" @click="toggleCarbonEmission">年</span>
|
||||
<span class="month" :class="carbonEmissionDate === 'month'?'selectMonth':''" @click="toggleCarbonEmission">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="carbonEmission">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,86 @@ const runTimeList = ref([
|
|||
name: "西大厅4",
|
||||
value: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: "西大厅5",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅6",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅7",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅8",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅9",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅10",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅11",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅12",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅13",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅14",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅15",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅16",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅17",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅18",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅19",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅20",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅21",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅22",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅23",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅24",
|
||||
value: true,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue