Compare commits
No commits in common. "9f5afda6f6ac3a9c889dafbe0b837ce08ec3262e" and "26b24711c5a1f8550ddcf07613dfe4de6ae7f219" have entirely different histories.
9f5afda6f6
...
26b24711c5
|
|
@ -9,7 +9,6 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"echarts-gl": "^2.0.9",
|
|
||||||
"element-plus": "^2.4.3",
|
"element-plus": "^2.4.3",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"sass": "^1.69.5",
|
"sass": "^1.69.5",
|
||||||
|
|
@ -1030,11 +1029,6 @@
|
||||||
"node": ">=6.0"
|
"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": {
|
"node_modules/commander": {
|
||||||
"version": "2.20.3",
|
"version": "2.20.3",
|
||||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||||
|
|
@ -1069,18 +1063,6 @@
|
||||||
"zrender": "5.4.4"
|
"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": {
|
"node_modules/echarts/node_modules/tslib": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||||
|
|
@ -2844,11 +2826,6 @@
|
||||||
"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
|
"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
|
||||||
"peer": true
|
"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": {
|
"commander": {
|
||||||
"version": "2.20.3",
|
"version": "2.20.3",
|
||||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||||
|
|
@ -2890,15 +2867,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"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": {
|
"electron-to-chromium": {
|
||||||
"version": "1.4.609",
|
"version": "1.4.609",
|
||||||
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz",
|
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz",
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 162 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 469 B |
Binary file not shown.
|
Before Width: | Height: | Size: 491 B |
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import moment from "moment"
|
import moment from "moment"
|
||||||
import {onMounted, ref, shallowRef} from "vue";
|
import {ref,shallowRef} from "vue";
|
||||||
import overview from '@/views/overview/index.vue' //总览
|
import overview from '@/views/overview/index.vue' //总览
|
||||||
import energyEfficiency from '@/views/energyEfficiency/index.vue' //能效
|
import energyEfficiency from '@/views/energyEfficiency/index.vue' //能效
|
||||||
import drainage from '@/views/drainage/index.vue' //排水
|
import drainage from '@/views/drainage/index.vue' //排水
|
||||||
|
|
@ -17,40 +17,37 @@ const nowWeek = ref('')
|
||||||
const nowMin = ref('')
|
const nowMin = ref('')
|
||||||
|
|
||||||
const timer = ref(0)
|
const timer = ref(0)
|
||||||
const getNowDate = () => {
|
const getNowDate = () =>{
|
||||||
nowDate.value = moment().format('YYYY年MM月DD日')
|
nowDate.value = moment().format('YYYY年MM月DD日')
|
||||||
nowWeek.value = moment().format('dddd')
|
nowWeek.value = moment().format('dddd')
|
||||||
nowMin.value = moment().format('HH:mm:ss')
|
nowMin.value = moment().format('HH:mm:ss')
|
||||||
}
|
}
|
||||||
getNowDate()
|
getNowDate()
|
||||||
timer.value = setInterval(() => {
|
timer.value = setInterval(()=>{
|
||||||
getNowDate()
|
getNowDate()
|
||||||
}, 1000)
|
},1000)
|
||||||
const menuList = ref([
|
const menuList = ref([
|
||||||
{name: shallowRef(overview), default: getPath.overview, select: getPath.overviewselect},
|
{name:shallowRef(overview),default:getPath.overview,select:getPath.overviewselect},
|
||||||
{
|
{name:shallowRef(energyMonitoring),
|
||||||
name: shallowRef(energyMonitoring),
|
default:getPath.energy,select:getPath.energyselect},
|
||||||
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(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
|
{name:shallowRef(airConditioning),default:getPath.airconditioning,select:getPath.airconditioningselect},
|
||||||
{name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
|
{name:shallowRef(lighting),default:getPath.lighting,select:getPath.lightingselect},
|
||||||
{name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
|
{name:shallowRef(carbonEmission),default:getPath.carbon,select:getPath.carbonselect},
|
||||||
{name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
|
{name:shallowRef(screen),default:getPath.screen,select:getPath.screenselect}
|
||||||
{name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
|
|
||||||
{name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
|
|
||||||
])
|
])
|
||||||
const menuIndex = ref(0)
|
const menuIndex = ref(0)
|
||||||
// const animationShow = ref(false)
|
|
||||||
// 菜单切换方法
|
// 菜单切换方法
|
||||||
const toggleClick = (item, index) => {
|
const toggleClick = (item,index) =>{
|
||||||
tabName.value = item?.name
|
tabName.value = item?.name
|
||||||
menuIndex.value = index
|
menuIndex.value = index
|
||||||
|
|
||||||
}
|
}
|
||||||
const tabName = shallowRef(overview)
|
const tabName = shallowRef(overview)
|
||||||
onMounted(() => {
|
const getImageUrl=(name)=>{
|
||||||
|
return `url(${new URL(name, import.meta.url).href})`
|
||||||
})
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -69,9 +66,9 @@ onMounted(() => {
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="date">
|
<div class="date">
|
||||||
<p>
|
<p>
|
||||||
<span class="m10">{{ nowDate }}</span>
|
<span class="m10">{{nowDate}}</span>
|
||||||
<span class="m10">{{ nowWeek }}</span>
|
<span class="m10">{{nowWeek}}</span>
|
||||||
<span>{{ nowMin }}</span>
|
<span>{{nowMin}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<span class="m10 weaIcon">晴</span>
|
<span class="m10 weaIcon">晴</span>
|
||||||
|
|
@ -81,46 +78,18 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item,index) in menuList" :class="'menu-icon'+index"
|
<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>
|
||||||
:style="menuIndex===index?'background-image:url('+ item.select + ')':'background-image:url('+ item.default + ')'"
|
|
||||||
@click="toggleClick(item,index)"></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!-- <overview></overview>-->
|
<!-- <overview></overview>-->
|
||||||
<!-- <router-view />-->
|
<!-- <router-view />-->
|
||||||
<transition appear mode="out-in">
|
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<component :is="tabName"></component>
|
<component :is="tabName"></component>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.header {
|
||||||
height: vh(136);
|
height: vh(136);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -130,9 +99,7 @@ onMounted(() => {
|
||||||
background-image: url('@/assets/images/mask/top.png');
|
background-image: url('@/assets/images/mask/top.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
z-index: -1 !important;
|
z-index: -1 !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-mask {
|
.left-mask {
|
||||||
width: vw(600);
|
width: vw(600);
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -153,45 +120,38 @@ onMounted(() => {
|
||||||
background-image: url('@/assets/images/mask/right.png');
|
background-image: url('@/assets/images/mask/right.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
.date{
|
||||||
.date {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #fff;
|
color:#fff;
|
||||||
margin: 2.5rem 2.2rem 0 2.2rem;
|
margin: 2.5rem 2.2rem 0 2.2rem;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.m10{
|
||||||
.m10 {
|
|
||||||
margin-right: 1.3rem;
|
margin-right: 1.3rem;
|
||||||
}
|
}
|
||||||
|
.weaIcon{
|
||||||
.weaIcon {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.menu{
|
||||||
.menu {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: vh(24);
|
bottom: vh(24);
|
||||||
z-index: 999;
|
z-index:999;
|
||||||
left: 29.15%;
|
left:29.15%;
|
||||||
width: vw(800);
|
width: vw(800);
|
||||||
height: vh(100);
|
height: vh(100);
|
||||||
|
ul{
|
||||||
ul {
|
|
||||||
//width: 100%;
|
//width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
li{
|
||||||
li {
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 12.5%;
|
width:12.5%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
127
src/style.scss
127
src/style.scss
|
|
@ -50,37 +50,12 @@ p,ul,li{
|
||||||
|
|
||||||
&-right-box {
|
&-right-box {
|
||||||
padding-right: 2.375rem;
|
padding-right: 2.375rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-left-box {
|
&-left-box {
|
||||||
padding-left: 2.375rem;
|
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{
|
.m100{
|
||||||
position: relative;
|
position: relative;
|
||||||
top:2rem;
|
top:2rem;
|
||||||
|
|
@ -116,7 +91,6 @@ p,ul,li{
|
||||||
span{
|
span{
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-family: normal;
|
|
||||||
}
|
}
|
||||||
.year,.month,.day{
|
.year,.month,.day{
|
||||||
padding: 0 0.8rem;
|
padding: 0 0.8rem;
|
||||||
|
|
@ -126,9 +100,6 @@ p,ul,li{
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.selectMonth,.selectYear,.selectDay{
|
|
||||||
background-image: url('@/assets/images/small-icon-select.png');
|
|
||||||
}
|
|
||||||
.day{
|
.day{
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -137,101 +108,3 @@ 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,185 +0,0 @@
|
||||||
<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>
|
<script setup>
|
||||||
import {ref, reactive} from "vue";
|
import {ref, reactive} from "vue";
|
||||||
import getPath from "@/utils/getPath.js";
|
import getPath from "@/utils/getPath.js";
|
||||||
import dialogBox from './components/dialogBox.vue'
|
|
||||||
const systemNumList = ref([
|
const systemNumList = ref([
|
||||||
{
|
{
|
||||||
name: '运行设备数量',
|
name: '运行设备数量',
|
||||||
|
|
@ -153,23 +153,10 @@ const maintenanceList = ref([
|
||||||
date: '09',
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page m100">
|
<div class="page m100">
|
||||||
<!-- 弹窗-->
|
|
||||||
<dialogBox v-show="dialogBoxShow" @update="closeDialog" :dialogName="dialogName"/>
|
|
||||||
<div class="page-left-box">
|
<div class="page-left-box">
|
||||||
<!-- 概况-->
|
<!-- 概况-->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -235,7 +222,6 @@ const closeDialog = (val) =>{
|
||||||
<span>开机策略</span>
|
<span>开机策略</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg">
|
<div class="margin10 box-bg">
|
||||||
<!-- tbale -->
|
|
||||||
<div class="runningState">
|
<div class="runningState">
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
<span>策略名称</span>
|
<span>策略名称</span>
|
||||||
|
|
@ -249,7 +235,7 @@ const closeDialog = (val) =>{
|
||||||
>
|
>
|
||||||
<span class="name">{{ item.name }}</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<el-switch v-model="item.value" style="left: 8px" />
|
<el-switch v-model="item.value" style="left: 8px" />
|
||||||
<span @click="openDialog(item.name)" style="cursor: pointer">编辑</span>
|
<span>编辑</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in overviewDate"
|
v-for="(item, index) in overviewDate"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="[activeDate === index ? 'dateAc' : 'date']"
|
:class="[activeDate == index ? 'dateAc' : 'date']"
|
||||||
@click="switchDate(index)"
|
@click="switchDate(index)"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>碳流图</span>
|
<span>碳流图</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="energyFlow"></div>
|
<div class="margin10 box-bg" id=""></div>
|
||||||
<!-- 碳排放趋势-->
|
<!-- 碳排放趋势-->
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>碳排放趋势</span>
|
<span>碳排放趋势</span>
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in trendDate"
|
v-for="(item, index) in trendDate"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="[trendActiveDate === index ? 'dateAc' : 'date']"
|
:class="[trendActiveDate == index ? 'dateAc' : 'date']"
|
||||||
@click="trandSwitchDate(index)"
|
@click="trandSwitchDate(index)"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
|
|
@ -89,6 +89,9 @@ import * as echarts from "echarts";
|
||||||
import "echarts-gl";
|
import "echarts-gl";
|
||||||
import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
|
import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
|
||||||
|
|
||||||
|
const getImageUrl = (name) => {
|
||||||
|
return new URL(name, import.meta.url).href;
|
||||||
|
};
|
||||||
const overviewDate = ref([
|
const overviewDate = ref([
|
||||||
{
|
{
|
||||||
name: "年",
|
name: "年",
|
||||||
|
|
@ -236,7 +239,7 @@ function getCarbonTrends() {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
//碳排放强度
|
//碳排放强度
|
||||||
const getCarbonIntensity=()=> {
|
function getCarbonIntensity() {
|
||||||
const offsetX = 10; //bar宽
|
const offsetX = 10; //bar宽
|
||||||
const offsetY = 5; //倾斜角度
|
const offsetY = 5; //倾斜角度
|
||||||
// 绘制左侧面
|
// 绘制左侧面
|
||||||
|
|
@ -362,7 +365,7 @@ const getCarbonIntensity=()=> {
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(221, 255, 253, 1)",
|
color: "rgba(221, 255, 253, 1)",
|
||||||
fontSize: 12,
|
fontSize: 14,
|
||||||
interval: 0,
|
interval: 0,
|
||||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||||
// formatter: function (value) {
|
// formatter: function (value) {
|
||||||
|
|
@ -405,7 +408,7 @@ const getCarbonIntensity=()=> {
|
||||||
},
|
},
|
||||||
// y轴文字
|
// y轴文字
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12,
|
fontSize: 14,
|
||||||
color: "#DDFFFD",
|
color: "#DDFFFD",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -537,7 +540,7 @@ const getCarbonIntensity=()=> {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
//各系统碳排放量统计
|
//各系统碳排放量统计
|
||||||
const getCarbonEmissionStatistics = ()=> {
|
function getCarbonEmissionStatistics() {
|
||||||
let myChart = echarts.init(
|
let myChart = echarts.init(
|
||||||
document.getElementById("carbonEmissionStatistics")
|
document.getElementById("carbonEmissionStatistics")
|
||||||
);
|
);
|
||||||
|
|
@ -681,7 +684,7 @@ const color = [
|
||||||
"rgba(1, 225, 242, 1)",
|
"rgba(1, 225, 242, 1)",
|
||||||
"rgba(27, 255, 118, 1)",
|
"rgba(27, 255, 118, 1)",
|
||||||
];
|
];
|
||||||
const setLabel = ()=> {
|
function setLabel() {
|
||||||
optionData.value.forEach((item, index) => {
|
optionData.value.forEach((item, index) => {
|
||||||
item.itemStyle = {
|
item.itemStyle = {
|
||||||
color: color[index],
|
color: color[index],
|
||||||
|
|
@ -736,7 +739,7 @@ const setLabel = ()=> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//碳中和
|
//碳中和
|
||||||
const getCarbonNeutrality = () => {
|
function getCarbonNeutrality() {
|
||||||
setLabel();
|
setLabel();
|
||||||
let myChart = echarts.init(document.getElementById("carbonNeutrality"));
|
let myChart = echarts.init(document.getElementById("carbonNeutrality"));
|
||||||
let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
|
let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
|
||||||
|
|
@ -764,160 +767,6 @@ const getCarbonNeutrality = () => {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
// bindListen(myChart);
|
// 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执行
|
//加载完dom执行
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
//碳趋势图表
|
//碳趋势图表
|
||||||
|
|
@ -928,8 +777,6 @@ onMounted(() => {
|
||||||
getCarbonEmissionStatistics();
|
getCarbonEmissionStatistics();
|
||||||
//碳中和
|
//碳中和
|
||||||
getCarbonNeutrality();
|
getCarbonNeutrality();
|
||||||
// 碳流图
|
|
||||||
drawEnergyFlow()
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -73,23 +73,6 @@ 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) => {
|
const selectSystemTab = (index) => {
|
||||||
systemTabIndex.value = index;
|
systemTabIndex.value = index;
|
||||||
};
|
};
|
||||||
|
|
@ -926,7 +909,6 @@ const drawElectricityPrice = () => {
|
||||||
};
|
};
|
||||||
myChart.setOption(option)
|
myChart.setOption(option)
|
||||||
}
|
}
|
||||||
|
|
||||||
// dom加载
|
// dom加载
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 能耗总量
|
// 能耗总量
|
||||||
|
|
@ -951,8 +933,8 @@ onMounted(() => {
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>能耗总量</span>
|
<span>能耗总量</span>
|
||||||
<p>
|
<p>
|
||||||
<span class="month" :class="totalEnergyDate === 'month'?'selectMonth':''" @click="toggleTotalEnergy">月</span>
|
<span class="month">月</span>
|
||||||
<span class="day" :class="totalEnergyDate === 'day'?'selectDay':''" @click="toggleTotalEnergy">日</span>
|
<span class="day">日</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="totalEnergy" class="margin10 box-bg"></div>
|
<div id="totalEnergy" class="margin10 box-bg"></div>
|
||||||
|
|
@ -960,8 +942,8 @@ onMounted(() => {
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>能效对标（定额管理）</span>
|
<span>能效对标（定额管理）</span>
|
||||||
<p>
|
<p>
|
||||||
<span class="year" :class="managementDate === 'year'?'selectYear':''" @click="toggleManagement">年</span>
|
<span class="year">年</span>
|
||||||
<span class="month" :class="managementDate === 'month'?'selectMonth':''" @click="toggleManagement">月</span>
|
<span class="month">月</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="management" class="margin10 box-bg"></div>
|
<div id="management" class="margin10 box-bg"></div>
|
||||||
|
|
@ -980,7 +962,7 @@ onMounted(() => {
|
||||||
<ul class="system-tab">
|
<ul class="system-tab">
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in systemTab"
|
v-for="(item, index) in systemTab"
|
||||||
:class="index === systemTabIndex ? 'tab-select' : ''"
|
:class="index == systemTabIndex ? 'tab-select' : ''"
|
||||||
@click="selectSystemTab(index)"
|
@click="selectSystemTab(index)"
|
||||||
>
|
>
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
|
|
@ -1014,9 +996,9 @@ onMounted(() => {
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>复费率</span>
|
<span>复费率</span>
|
||||||
<p>
|
<p>
|
||||||
<span class="year" :class="exhibitionLoadDate === 'year'?'selectYear':''" @click="toggleExhibitionLoad">年</span>
|
<span class="year">年</span>
|
||||||
<span class="month" :class="exhibitionLoadDate === 'month'?'selectMonth':''" @click="toggleExhibitionLoad">月</span>
|
<span class="month">月</span>
|
||||||
<span class="day" :class="exhibitionLoadDate === 'day'?'selectDay':''" @click="toggleExhibitionLoad">日</span>
|
<span class="day">日</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
||||||
|
|
|
||||||
|
|
@ -44,9 +44,8 @@ const getImageUrl = (name) => {
|
||||||
return new URL(name, import.meta.url).href;
|
return new URL(name, import.meta.url).href;
|
||||||
};
|
};
|
||||||
//实时负荷
|
//实时负荷
|
||||||
const getRealTimeLoad = ()=> {
|
function getRealTimeLoad() {
|
||||||
let myChart
|
let myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||||
myChart = echarts.init(document.getElementById("realTimeLoad"));
|
|
||||||
const option = {
|
const option = {
|
||||||
// backgroundColor: "#05224d",
|
// backgroundColor: "#05224d",
|
||||||
tooltip: {},
|
tooltip: {},
|
||||||
|
|
@ -126,7 +125,7 @@ const getRealTimeLoad = ()=> {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
//当日累计用电量
|
//当日累计用电量
|
||||||
const getDailyElectricityConsumption = () => {
|
function getDailyElectricityConsumption() {
|
||||||
const offsetX = 10; //bar宽
|
const offsetX = 10; //bar宽
|
||||||
const offsetY = 5; //倾斜角度
|
const offsetY = 5; //倾斜角度
|
||||||
// 绘制左侧面
|
// 绘制左侧面
|
||||||
|
|
@ -253,7 +252,7 @@ const getDailyElectricityConsumption = () => {
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(221, 255, 253, 1)",
|
color: "rgba(221, 255, 253, 1)",
|
||||||
fontSize: 12,
|
fontSize: 14,
|
||||||
interval: 1,
|
interval: 1,
|
||||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||||
// formatter: function (value) {
|
// formatter: function (value) {
|
||||||
|
|
@ -294,7 +293,7 @@ const getDailyElectricityConsumption = () => {
|
||||||
},
|
},
|
||||||
// y轴文字
|
// y轴文字
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12,
|
fontSize: 14,
|
||||||
color: "#DDFFFD",
|
color: "#DDFFFD",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -409,7 +408,7 @@ const getDailyElectricityConsumption = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
//空调负荷
|
//空调负荷
|
||||||
const drawAirConditioningLoad = ()=> {
|
function drawAirConditioningLoad() {
|
||||||
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||||
const option = {
|
const option = {
|
||||||
// backgroundColor: "#05224d",
|
// backgroundColor: "#05224d",
|
||||||
|
|
@ -509,7 +508,7 @@ const drawAirConditioningLoad = ()=> {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
// 展陈负荷
|
// 展陈负荷
|
||||||
const drawExhibitionLoad =()=> {
|
function drawExhibitionLoad() {
|
||||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||||
const option = {
|
const option = {
|
||||||
// backgroundColor: "#05224d",
|
// backgroundColor: "#05224d",
|
||||||
|
|
@ -609,7 +608,7 @@ const drawExhibitionLoad =()=> {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
// 配电回路排名
|
// 配电回路排名
|
||||||
const drawRanking = ()=> {
|
function drawRanking() {
|
||||||
let myChart = echarts.init(document.getElementById("ranking"));
|
let myChart = echarts.init(document.getElementById("ranking"));
|
||||||
let option = {
|
let option = {
|
||||||
grid: {
|
grid: {
|
||||||
|
|
@ -745,7 +744,7 @@ const drawRanking = ()=> {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
//负荷分类
|
//负荷分类
|
||||||
const getLoadClassification=()=> {
|
function getLoadClassification() {
|
||||||
var trafficWay = [
|
var trafficWay = [
|
||||||
{
|
{
|
||||||
name: "一级",
|
name: "一级",
|
||||||
|
|
@ -928,6 +927,7 @@ const getLoadClassification=()=> {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
|
length: 60,
|
||||||
length: 60,
|
length: 60,
|
||||||
length2: 60,
|
length2: 60,
|
||||||
show: true,
|
show: true,
|
||||||
|
|
@ -955,7 +955,7 @@ onMounted(() => {
|
||||||
drawRanking();
|
drawRanking();
|
||||||
//负荷分类
|
//负荷分类
|
||||||
getLoadClassification();
|
getLoadClassification();
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
<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,8 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import {onMounted, ref} from "vue"
|
import {ref} from "vue"
|
||||||
import getPath from "@/utils/getPath.js";
|
import getPath from "@/utils/getPath.js";
|
||||||
import * as echarts from "echarts";
|
|
||||||
import dialogBox from './components/dialog.vue'
|
|
||||||
// 照明监测
|
// 照明监测
|
||||||
const lightingNumList = ref([
|
const lightingNumList = ref([
|
||||||
{
|
{
|
||||||
|
|
@ -26,681 +24,10 @@ const lightingNumList = ref([
|
||||||
pic:getPath.offlineNum,
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page m100">
|
<div class="page m100">
|
||||||
<dialogBox ref="box" :show="dialogShow" @update="closeDialog" :name="dialogTitle"/>
|
|
||||||
<div class="page-left-box">
|
<div class="page-left-box">
|
||||||
<!-- 照明监测-->
|
<!-- 照明监测-->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -720,73 +47,29 @@ onMounted(()=>{
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>照明回路详情</span>
|
<span>照明回路详情</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg">
|
<div class="margin10 box-bg"></div>
|
||||||
<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">
|
<div class="title margin10">
|
||||||
<span>照明负荷</span>
|
<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>
|
||||||
<div class="margin10 box-bg" id="lightLoad"></div>
|
<div class="margin10 box-bg"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-right-box">
|
<div class="page-right-box">
|
||||||
<!-- 展馆照明 -->
|
<!-- 展馆照明 -->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>展馆照明</span>
|
<span>展馆照明</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="hallLighting"></div>
|
<div class="margin10 box-bg" id="airConditioningLoad"></div>
|
||||||
<!-- 照明控制-->
|
<!-- 照明控制-->
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>照明控制</span>
|
<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>
|
||||||
|
<div class="margin10 box-bg" id="exhibitionLoad"></div>
|
||||||
<!-- 故障情况-->
|
<!-- 故障情况-->
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>故障情况</span>
|
<span>故障情况</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="faultConditions"></div>
|
<div class="margin10 box-bg" id="ranking"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -828,43 +111,5 @@ onMounted(()=>{
|
||||||
font-size: .75rem;
|
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>
|
</style>
|
||||||
|
|
@ -30,17 +30,7 @@ onMounted(()=>{
|
||||||
//碳排放
|
//碳排放
|
||||||
getCarbonEmission()
|
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 = () =>{
|
const drawPowerEcharts = () =>{
|
||||||
let myChart = echarts.init(document.getElementById('power'))
|
let myChart = echarts.init(document.getElementById('power'))
|
||||||
const option = {
|
const option = {
|
||||||
|
|
@ -396,7 +386,7 @@ function getCarbonEmission() {
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(221, 255, 253, 1)",
|
color: "rgba(221, 255, 253, 1)",
|
||||||
fontSize: 12,
|
fontSize: 14,
|
||||||
interval: 0,
|
interval: 0,
|
||||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||||
// formatter: function (value) {
|
// formatter: function (value) {
|
||||||
|
|
@ -437,7 +427,7 @@ function getCarbonEmission() {
|
||||||
},
|
},
|
||||||
// y轴文字
|
// y轴文字
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12,
|
fontSize: 14,
|
||||||
color: "#DDFFFD",
|
color: "#DDFFFD",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -561,8 +551,8 @@ function getCarbonEmission() {
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>用电量</span>
|
<span>用电量</span>
|
||||||
<p>
|
<p>
|
||||||
<span class="year" :class="powerDate === 'year'?'selectYear':''" @click="togglePower">年</span>
|
<span class="year">年</span>
|
||||||
<span class="month" :class="powerDate === 'month'?'selectMonth':''" @click="togglePower">月</span>
|
<span class="month">月</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="power">
|
<div class="margin10 box-bg" id="power">
|
||||||
|
|
@ -582,8 +572,8 @@ function getCarbonEmission() {
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>碳排放</span>
|
<span>碳排放</span>
|
||||||
<p>
|
<p>
|
||||||
<span class="year" :class="carbonEmissionDate === 'year'?'selectYear':''" @click="toggleCarbonEmission">年</span>
|
<span class="year">年</span>
|
||||||
<span class="month" :class="carbonEmissionDate === 'month'?'selectMonth':''" @click="toggleCarbonEmission">月</span>
|
<span class="month">月</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg" id="carbonEmission">
|
<div class="margin10 box-bg" id="carbonEmission">
|
||||||
|
|
|
||||||
|
|
@ -110,86 +110,7 @@ const runTimeList = ref([
|
||||||
name: "西大厅4",
|
name: "西大厅4",
|
||||||
value: true,
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue