|
|
@@ -9,68 +9,51 @@
|
|
|
<div class="top_box">
|
|
|
<div class="top_content">
|
|
|
<!-- 左侧选择器 -->
|
|
|
- <div class="left_selects">
|
|
|
- <div class="select_item">
|
|
|
- <img class="img" src="@/assets/home/leftSelect.png" alt="" />
|
|
|
- <div class="content">
|
|
|
- <el-select
|
|
|
- v-model="regionId"
|
|
|
- @change="dateTypeChange"
|
|
|
- clearable
|
|
|
- placeholder=" "
|
|
|
- :popper-append-to-body="false"
|
|
|
- >
|
|
|
- <el-option label="全部区域" :value="''" />
|
|
|
- <el-option
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- v-for="item in areaList"
|
|
|
- :key="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="select_item">
|
|
|
- <img class="img" src="@/assets/home/leftSelect.png" alt="" />
|
|
|
- <div class="content">
|
|
|
- <el-select
|
|
|
- v-model="orgId"
|
|
|
- @change="dateTypeChange"
|
|
|
- clearable
|
|
|
- placeholder=" "
|
|
|
- >
|
|
|
- <el-option label="集团组织" :value="''" />
|
|
|
- <el-option
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- v-for="item in orgList"
|
|
|
- :key="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
+
|
|
|
<!-- 中间标题 -->
|
|
|
<div class="title">
|
|
|
+ <div class="left_selects">
|
|
|
+ <div class="select_item">
|
|
|
+ <img class="img" src="@/assets/home/leftSelect.png" alt="" />
|
|
|
+ <div class="content">
|
|
|
+ <el-select
|
|
|
+ v-model="regionId"
|
|
|
+ @change="dateTypeChange"
|
|
|
+ clearable
|
|
|
+ placeholder=" "
|
|
|
+ :popper-append-to-body="false"
|
|
|
+ >
|
|
|
+ <el-option label="全部区域" :value="''" />
|
|
|
+ <el-option
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ v-for="item in areaList"
|
|
|
+ :key="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<span class="title_text">能源管理数据看板</span>
|
|
|
- </div>
|
|
|
- <!-- 右侧选择器和信息 -->
|
|
|
- <div class="right_selects">
|
|
|
- <div class="select_item">
|
|
|
- <img class="img" src="@/assets/home/rightSelect.png" alt="" />
|
|
|
- <div class="content">
|
|
|
- <el-select
|
|
|
- v-model="statisticsCycle"
|
|
|
- @change="dateTypeChange"
|
|
|
- clearable
|
|
|
- placeholder=" "
|
|
|
- >
|
|
|
- <el-option label="本月" :value="1" />
|
|
|
- <el-option label="本年度" :value="2" />
|
|
|
- </el-select>
|
|
|
+ <!-- 右侧选择器和信息 -->
|
|
|
+ <div class="right_selects">
|
|
|
+ <div class="select_item">
|
|
|
+ <img class="img" src="@/assets/home/rightSelect.png" alt="" />
|
|
|
+ <div class="content">
|
|
|
+ <el-select
|
|
|
+ v-model="statisticsCycle"
|
|
|
+ @change="dateTypeChange"
|
|
|
+ clearable
|
|
|
+ placeholder=" "
|
|
|
+ >
|
|
|
+ <el-option label="本月" :value="1" />
|
|
|
+ <el-option label="本年度" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div
|
|
|
style="
|
|
|
position: absolute;
|
|
|
@@ -538,12 +521,12 @@
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: res.map((item) => item.time),
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 212, 255, 0.3)'
|
|
|
- }
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.3)'
|
|
|
+ }
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
+ axisLabel: {
|
|
|
color: '#a8c5e8',
|
|
|
fontSize: 11
|
|
|
}
|
|
|
@@ -557,21 +540,21 @@
|
|
|
padding: [0, 0, 0, -45],
|
|
|
fontSize: 12
|
|
|
},
|
|
|
- axisLine: {
|
|
|
+ axisLine: {
|
|
|
show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 212, 255, 0.3)'
|
|
|
- }
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.3)'
|
|
|
+ }
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
+ axisLabel: {
|
|
|
color: '#a8c5e8',
|
|
|
fontSize: 11
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
color: 'rgba(0, 212, 255, 0.15)',
|
|
|
type: 'dashed'
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
@@ -596,7 +579,7 @@
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- lineStyle: {
|
|
|
+ lineStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
@@ -613,7 +596,7 @@
|
|
|
shadowColor: 'rgba(0, 212, 255, 0.5)',
|
|
|
shadowBlur: 10
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
+ itemStyle: {
|
|
|
color: '#00f2fe',
|
|
|
borderColor: '#fff',
|
|
|
borderWidth: 2
|
|
|
@@ -1195,10 +1178,28 @@
|
|
|
}).then((res) => {
|
|
|
console.log(res, 'res');
|
|
|
// 专业配色方案 - 科技风渐变
|
|
|
- const electricityColors = ['#00d4ff', '#00a8ff', '#0099ff', '#0077ff', '#0055ff'];
|
|
|
- const waterColors = ['#00f5a0', '#00d4aa', '#00b894', '#009e7d', '#008b6b'];
|
|
|
- const gasColors = ['#ff9f43', '#ff8c42', '#ff7b38', '#ff6b35', '#ff5722'];
|
|
|
-
|
|
|
+ const electricityColors = [
|
|
|
+ '#00d4ff',
|
|
|
+ '#00a8ff',
|
|
|
+ '#0099ff',
|
|
|
+ '#0077ff',
|
|
|
+ '#0055ff'
|
|
|
+ ];
|
|
|
+ const waterColors = [
|
|
|
+ '#00f5a0',
|
|
|
+ '#00d4aa',
|
|
|
+ '#00b894',
|
|
|
+ '#009e7d',
|
|
|
+ '#008b6b'
|
|
|
+ ];
|
|
|
+ const gasColors = [
|
|
|
+ '#ff9f43',
|
|
|
+ '#ff8c42',
|
|
|
+ '#ff7b38',
|
|
|
+ '#ff6b35',
|
|
|
+ '#ff5722'
|
|
|
+ ];
|
|
|
+
|
|
|
this.areaCompareOption = {
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
@@ -1223,7 +1224,7 @@
|
|
|
fontWeight: 'bold'
|
|
|
},
|
|
|
labelLine: { show: false },
|
|
|
- itemStyle: {
|
|
|
+ itemStyle: {
|
|
|
borderWidth: 0,
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: 'rgba(0, 212, 255, 0.3)'
|
|
|
@@ -1253,7 +1254,7 @@
|
|
|
fontWeight: 'bold'
|
|
|
},
|
|
|
labelLine: { show: false },
|
|
|
- itemStyle: {
|
|
|
+ itemStyle: {
|
|
|
borderWidth: 0,
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: 'rgba(0, 245, 160, 0.3)'
|
|
|
@@ -1283,7 +1284,7 @@
|
|
|
fontWeight: 'bold'
|
|
|
},
|
|
|
labelLine: { show: false },
|
|
|
- itemStyle: {
|
|
|
+ itemStyle: {
|
|
|
borderWidth: 0,
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: 'rgba(255, 159, 67, 0.3)'
|
|
|
@@ -1332,17 +1333,33 @@
|
|
|
];
|
|
|
// 专业配色方案
|
|
|
const colorThemes = [
|
|
|
- { line: '#00d4ff', start: 'rgba(0, 212, 255, 0.4)', end: 'rgba(0, 212, 255, 0.02)' },
|
|
|
- { line: '#00f5a0', start: 'rgba(0, 245, 160, 0.4)', end: 'rgba(0, 245, 160, 0.02)' },
|
|
|
- { line: '#f59e0b', start: 'rgba(245, 158, 11, 0.4)', end: 'rgba(245, 158, 11, 0.02)' },
|
|
|
- { line: '#0099ff', start: 'rgba(0, 153, 255, 0.4)', end: 'rgba(0, 153, 255, 0.02)' }
|
|
|
+ {
|
|
|
+ line: '#00d4ff',
|
|
|
+ start: 'rgba(0, 212, 255, 0.4)',
|
|
|
+ end: 'rgba(0, 212, 255, 0.02)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ line: '#00f5a0',
|
|
|
+ start: 'rgba(0, 245, 160, 0.4)',
|
|
|
+ end: 'rgba(0, 245, 160, 0.02)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ line: '#f59e0b',
|
|
|
+ start: 'rgba(245, 158, 11, 0.4)',
|
|
|
+ end: 'rgba(245, 158, 11, 0.02)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ line: '#0099ff',
|
|
|
+ start: 'rgba(0, 153, 255, 0.4)',
|
|
|
+ end: 'rgba(0, 153, 255, 0.02)'
|
|
|
+ }
|
|
|
];
|
|
|
-
|
|
|
+
|
|
|
['electricityTrend', 'waterTrend', 'gasTrend', 'costTrend'].forEach(
|
|
|
(item, index) => {
|
|
|
const theme = colorThemes[index];
|
|
|
this.$set(this.todayList[index], 'chartOption', {
|
|
|
- tooltip: {
|
|
|
+ tooltip: {
|
|
|
trigger: 'axis',
|
|
|
backgroundColor: 'rgba(10, 25, 50, 0.9)',
|
|
|
borderColor: theme.line,
|
|
|
@@ -1461,12 +1478,12 @@
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: res.map((item) => item.time),
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 153, 255, 0.3)'
|
|
|
- }
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 153, 255, 0.3)'
|
|
|
+ }
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
+ axisLabel: {
|
|
|
color: '#7dd3fc',
|
|
|
fontSize: 11
|
|
|
}
|
|
|
@@ -1480,21 +1497,21 @@
|
|
|
padding: [0, 0, 0, -50],
|
|
|
fontSize: 12
|
|
|
},
|
|
|
- axisLine: {
|
|
|
+ axisLine: {
|
|
|
show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 153, 255, 0.3)'
|
|
|
- }
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 153, 255, 0.3)'
|
|
|
+ }
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
+ axisLabel: {
|
|
|
color: '#7dd3fc',
|
|
|
fontSize: 11
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
color: 'rgba(0, 153, 255, 0.15)',
|
|
|
type: 'dashed'
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
@@ -1519,7 +1536,7 @@
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- lineStyle: {
|
|
|
+ lineStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
@@ -1536,7 +1553,7 @@
|
|
|
shadowColor: 'rgba(0, 153, 255, 0.5)',
|
|
|
shadowBlur: 10
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
+ itemStyle: {
|
|
|
color: '#00d4ff',
|
|
|
borderColor: '#fff',
|
|
|
borderWidth: 2
|
|
|
@@ -1693,8 +1710,12 @@
|
|
|
.title {
|
|
|
text-align: center;
|
|
|
line-height: 80px;
|
|
|
+ width: calc(32% + 400px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
.title_text {
|
|
|
- font-size: 48px;
|
|
|
+ font-size: 42px;
|
|
|
font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
background-image: linear-gradient(to top, #009dff, 15%, #fff);
|
|
|
background-clip: text;
|
|
|
@@ -1703,16 +1724,13 @@
|
|
|
}
|
|
|
}
|
|
|
.left_selects {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- position: absolute;
|
|
|
- left: 25%;
|
|
|
- top: 35px;
|
|
|
+ margin-top: 1%;
|
|
|
+ height: 36px;
|
|
|
.select_item {
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
- // width: 130px;
|
|
|
+ line-height: 36px;
|
|
|
+ height: 36px;
|
|
|
.img {
|
|
|
width: 100%;
|
|
|
height: 36px;
|
|
|
@@ -1735,13 +1753,11 @@
|
|
|
}
|
|
|
}
|
|
|
.right_selects {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- position: absolute;
|
|
|
- right: 25%;
|
|
|
- top: 35px;
|
|
|
+ height: 36px;
|
|
|
+ margin-top: 1%;
|
|
|
.select_item {
|
|
|
+ line-height: 36px;
|
|
|
+ height: 36px;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
// width: 200px;
|
|
|
@@ -1820,7 +1836,7 @@
|
|
|
display: flex;
|
|
|
gap: 20px;
|
|
|
flex: 1;
|
|
|
- min-height: 400px;
|
|
|
+ min-height: 340px;
|
|
|
}
|
|
|
|
|
|
.row_1 {
|
|
|
@@ -1848,10 +1864,10 @@
|
|
|
}
|
|
|
|
|
|
.row_3 {
|
|
|
- min-height: 280px;
|
|
|
+ min-height: 230px;
|
|
|
.panel_half {
|
|
|
flex: 1;
|
|
|
- min-height: 280px;
|
|
|
+ min-height: 230px;
|
|
|
}
|
|
|
}
|
|
|
|
yusheng