|
@@ -4,10 +4,38 @@ import FloorOverview from "@/components/dashboard/more/floorOverview.vue";
|
|
|
import SpaceOverview from "@/components/dashboard/more/spaceOverview.vue";
|
|
|
import CarbonOverviewChart from "@/components/dashboard/more/carbonOverviewChart.vue";
|
|
|
import PvPowerChart from "@/components/dashboard/more/pvPowerChart.vue";
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- showPv: false,
|
|
|
+ showPv: true,
|
|
|
+ showMoreConfig: false,
|
|
|
+ moduleConfig: {
|
|
|
+ 'floor': {
|
|
|
+ id: 'floor',
|
|
|
+ name: '楼宇概览',
|
|
|
+ visible: true,
|
|
|
+ grid: 1,
|
|
|
+ },
|
|
|
+ 'space': {
|
|
|
+ id: 'space',
|
|
|
+ name: '空间概览',
|
|
|
+ visible: true,
|
|
|
+ grid: 1,
|
|
|
+ },
|
|
|
+ 'carbon': {
|
|
|
+ id: 'carbon',
|
|
|
+ name: '碳配额概览',
|
|
|
+ visible: true,
|
|
|
+ grid: 1,
|
|
|
+ },
|
|
|
+ 'pv': {
|
|
|
+ id: 'pv',
|
|
|
+ name: '光伏发电概览',
|
|
|
+ visible: false,
|
|
|
+ grid: 2,
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
@@ -20,55 +48,150 @@ export default {
|
|
|
mounted() {
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ toggleVisible(obj) {
|
|
|
+ if (obj.visible) {
|
|
|
+ obj.visible = false
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let num = 0;
|
|
|
+ for (let objKey in this.moduleConfig) {
|
|
|
+ if (this.moduleConfig[objKey].visible) {
|
|
|
+ num += this.moduleConfig[objKey].grid
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if ((num+obj.grid) <= 3) {
|
|
|
+ obj.visible = true;
|
|
|
+ } else {
|
|
|
+ this.$message.warning('空间不足,请移除模块后添加')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="dashboard-more">
|
|
|
+ <div class="ioc-dashboard-more">
|
|
|
+ <div class="ioc-dashboard-more-config">
|
|
|
+ <a-popover v-model="showMoreConfig" trigger="click" placement="leftTop">
|
|
|
+ <a-button type="link" style="color: #C6C8CC;font-size: 12px;height: 20px;">
|
|
|
+ <span style="line-height: 20px">模块配置</span>
|
|
|
+ <a-icon type="right"></a-icon>
|
|
|
+ </a-button>
|
|
|
+ <template #content>
|
|
|
+ <div>
|
|
|
+ <Card title="自定义模块">
|
|
|
+ <div class="ioc-dashboard-more-config-show" style="width: 450px">
|
|
|
+ <a-row :gutter="30" >
|
|
|
+ <template v-for="obj in moduleConfig" >
|
|
|
+ <a-col v-if="obj.visible" :key="obj.id" :span="8">
|
|
|
+ <div class="ioc-dashboard-more-config-item">
|
|
|
+ {{ obj.name }}
|
|
|
+ <div class="module-btn-opr" @click="toggleVisible(obj)">
|
|
|
+ <span class="anticon" >
|
|
|
+ <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#cd2a2a" stroke="#cd2a2a" stroke-width="4" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 12px;padding-left: 20px;height: auto;width: 450px">
|
|
|
+ <a-row :gutter="30">
|
|
|
+ <template v-for="obj in moduleConfig" >
|
|
|
+ <a-col v-if="!obj.visible" :key="obj.id" :span="8">
|
|
|
+ <div class="ioc-dashboard-more-config-item">
|
|
|
+ {{ obj.name }}
|
|
|
+ <div class="module-btn-opr" style="right: 14px" @click="toggleVisible(obj)">
|
|
|
+ <span class="anticon" >
|
|
|
+ <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#2ea8e6" stroke="#2ea8e6" stroke-width="4" stroke-linejoin="round"/><path d="M24 16V32" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-popover>
|
|
|
+ </div>
|
|
|
<!--楼层概览-->
|
|
|
- <div class="dashboard-floorOverflow">
|
|
|
- <FloorOverview :show-pv.sync="showPv" ></FloorOverview>
|
|
|
+ <div class="dashboard-floorOverflow" v-if="moduleConfig.floor.visible">
|
|
|
+ <FloorOverview></FloorOverview>
|
|
|
<div style="width: 90%;margin: 0 auto;">
|
|
|
- <a-divider style="margin: 10px 0 0;padding: 0;"></a-divider>
|
|
|
+ <a-divider style="margin: 10px 0 10px;padding: 0;"></a-divider>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--空间概览-->
|
|
|
- <div class="dashboard-spaceOverflow" v-if="!showPv">
|
|
|
- <SpaceOverview></SpaceOverview>
|
|
|
+ <div class="dashboard-spaceOverflow" v-if="moduleConfig.space.visible">
|
|
|
+ <div style="padding-left: 12px">
|
|
|
+ <SpaceOverview></SpaceOverview>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div style="width: 90%;margin: 0 auto;">
|
|
|
<a-divider style="margin: 10px 0 0;padding: 0;"></a-divider>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--碳配额概览-->
|
|
|
- <div class="dashboard-carbonOverflow" v-if="!showPv">
|
|
|
+ <div class="dashboard-carbonOverflow" v-if="moduleConfig.carbon.visible">
|
|
|
<CarbonOverviewChart></CarbonOverviewChart>
|
|
|
</div>
|
|
|
<!--光伏发电概览-->
|
|
|
- <div class="dashboard-lightOverflow" v-if="showPv">
|
|
|
+ <div class="dashboard-lightOverflow" v-if="moduleConfig.pv.visible">
|
|
|
<PvPowerChart></PvPowerChart>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.dashboard-more {
|
|
|
+.ioc-dashboard-more-config-show {
|
|
|
+ padding: 8px 20px;
|
|
|
+ border: 1px solid #ecedef;
|
|
|
+ border-radius: 1px;
|
|
|
+}
|
|
|
+.ioc-dashboard-more-config-item {
|
|
|
+ color: #333333;
|
|
|
+ width: 120px;
|
|
|
+ padding: 8px 0;
|
|
|
+ margin: 5px 0px;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.module-btn-opr {
|
|
|
+ position: absolute;
|
|
|
+ top: -3px;
|
|
|
+ right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ioc-dashboard-more {
|
|
|
background-color: white;
|
|
|
- margin-top: 12px;
|
|
|
height: 740px;
|
|
|
- //padding: 0 8px;
|
|
|
+
|
|
|
+ .ioc-dashboard-more-config {
|
|
|
+ position: absolute;
|
|
|
+ right: 2px;
|
|
|
+ top: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
.dashboard-floorOverflow {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
}
|
|
|
+
|
|
|
.dashboard-spaceOverflow {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
}
|
|
|
+
|
|
|
.dashboard-carbonOverflow {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dashboard-lightOverflow {
|
|
|
+ width: 100%;
|
|
|
+ height: 492px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|