427 lines
14 KiB
Vue
427 lines
14 KiB
Vue
|
<template>
|
||
|
|
<div class="green-carbon main-page">
|
||
|
|
<el-col :span="6" class="h100">
|
||
|
|
<module-one-1-1 label="建材统计">
|
||
|
|
<my-chart :key="chartKey" id="green-carbon-building" width="100%" height="100%"
|
||
|
|
:render="renderChart1"></my-chart>
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-1-1 label="用油统计" class="left-oil">
|
||
|
|
<div style="height: 50%;">
|
||
|
|
<div class="survey_content">
|
||
|
|
<div class="survey_content_img">
|
||
|
|
<div class="oil-data">
|
||
|
|
<div class="led-number an1">2222L</div>
|
||
|
|
<div class="oil-title">施工用油</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="height: 50%;">
|
||
|
|
<el-col :span="12" style="height: 100%;">
|
||
|
|
<my-chart :key="chartKey" id="green-carbon-oil1" width="100%" height="100%"
|
||
|
|
:render="renderChart2"></my-chart>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" style="height: 100%;">
|
||
|
|
<my-chart :key="chartKey" id="green-carbon-oil2" width="100%" height="100%"
|
||
|
|
:render="renderChart3"></my-chart>
|
||
|
|
</el-col>
|
||
|
|
</div>
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-1-1 label="用电统计">
|
||
|
|
</module-one-1-1>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12" class="h100">
|
||
|
|
<module-one-2-2 label="" class="no-title no-border">
|
||
|
|
</module-one-2-2>
|
||
|
|
<module-one-1-2 label="节能减排趋势" class="energy-tendency">
|
||
|
|
</module-one-1-2>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6" class="h100">
|
||
|
|
<module-one-1-1 label="建材排放趋势">
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-1-1 label="用油排放趋势">
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-1-1 label="用电排放趋势">
|
||
|
|
</module-one-1-1>
|
||
|
|
</el-col>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dpi: '',
|
||
|
|
chartKey: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.dpi = this.$dpi();
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
if (this.dpi != this.$dpi()) {
|
||
|
|
this.dpi = this.$dpi();
|
||
|
|
this.chartKey++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
renderChart1() {
|
||
|
|
let is1K = this.$dpi() == "1K";
|
||
|
|
let is2K = this.$dpi() == "2K";
|
||
|
|
let option = {
|
||
|
|
color: ['#ff9f1a', '#00a4e6'],
|
||
|
|
legend: {
|
||
|
|
bottom: is1K ? '0%' : is2K ? '10%' : '10%',
|
||
|
|
left: 'center',
|
||
|
|
itemWidth: is1K ? 25 : is2K ? 30 : 40,
|
||
|
|
itemHeight: is1K ? 14 : is2K ? 20 : 20,
|
||
|
|
itemGap: is1K ? 20 : is2K ? 30 : 40,
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: "70%",
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
bottom: is1K ? '5%' : is2K ? '15%' : '10%',
|
||
|
|
top: "-10%",
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: is1K ? 4 : is2K ? 8 : 10,
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderWidth: 2
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
formatter: ["{b|{b}}", "{c|{c}T CO2}"].join("\n"),//"{b|b}\n{c|c T CO2}",
|
||
|
|
rich: {
|
||
|
|
b: {
|
||
|
|
color: '#fff',
|
||
|
|
height: 50,
|
||
|
|
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||
|
|
},
|
||
|
|
c: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
show: true,
|
||
|
|
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||
|
|
},
|
||
|
|
|
||
|
|
labelLine: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: 1048, name: '碳排放' },
|
||
|
|
{ value: 735, name: '碳减排' },
|
||
|
|
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
},
|
||
|
|
renderChart2() {
|
||
|
|
let is1K = this.$dpi() == "1K";
|
||
|
|
let is2K = this.$dpi() == "2K";
|
||
|
|
let option = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'gauge',
|
||
|
|
startAngle: 180,
|
||
|
|
endAngle: 0,
|
||
|
|
max: 6000,
|
||
|
|
center: ['50%', '90%'],
|
||
|
|
radius: '120%',
|
||
|
|
itemStyle: {
|
||
|
|
color: '#e76e50',
|
||
|
|
shadowColor: 'rgba(0,138,255,0.45)',
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 2,
|
||
|
|
shadowOffsetY: 2
|
||
|
|
},
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
width: is1K ? 12 : is2K ? 20 : 30,
|
||
|
|
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
width: is1K ? 12 : is2K ? 20 : 30,
|
||
|
|
color: [[1, '#4f504e']] // 圆环底
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
distance: is1K ? -16 : is2K ? -30 : -40,
|
||
|
|
length: is1K ? 4 : is2K ? 8 : 10,
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
length: 10,
|
||
|
|
distance: -20,
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#8e9aaf'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#999',
|
||
|
|
distance: is1K ? -15 : is2K ? -20 : -30,
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 20,
|
||
|
|
},
|
||
|
|
pointer: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
anchor: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
|
||
|
|
fontSize: is1K ? 12 : is2K ? 20 : 30,
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
valueAnimation: true,
|
||
|
|
fontSize: is1K ? 20 : is2K ? 30 : 40,
|
||
|
|
offsetCenter: [0, '-40%'],
|
||
|
|
color: '#4ccdc4'
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 4000,
|
||
|
|
name: '碳排放(T CO₂)'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
},
|
||
|
|
renderChart3() {
|
||
|
|
let is1K = this.$dpi() == "1K";
|
||
|
|
let is2K = this.$dpi() == "2K";
|
||
|
|
let option = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'gauge',
|
||
|
|
startAngle: 180,
|
||
|
|
endAngle: 0,
|
||
|
|
max: 6000,
|
||
|
|
center: ['50%', '90%'],
|
||
|
|
radius: '120%',
|
||
|
|
itemStyle: {
|
||
|
|
color: '#05d69e',
|
||
|
|
shadowColor: 'rgba(0,138,255,0.45)',
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 2,
|
||
|
|
shadowOffsetY: 2
|
||
|
|
},
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
width: is1K ? 12 : is2K ? 20 : 30,
|
||
|
|
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
width: is1K ? 12 : is2K ? 20 : 30,
|
||
|
|
color: [[1, '#4f504e']] // 圆环底
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
distance: is1K ? -16 : is2K ? -30 : -40,
|
||
|
|
length: is1K ? 4 : is2K ? 8 : 10,
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
length: 10,
|
||
|
|
distance: -20,
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#8e9aaf'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#999',
|
||
|
|
distance: is1K ? -15 : is2K ? -20 : -30,
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 20,
|
||
|
|
},
|
||
|
|
pointer: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
anchor: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
|
||
|
|
fontSize: is1K ? 12 : is2K ? 20 : 30,
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
valueAnimation: true,
|
||
|
|
fontSize: is1K ? 20 : is2K ? 30 : 40,
|
||
|
|
offsetCenter: [0, '-40%'],
|
||
|
|
color: '#4ccdc4'
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 4000,
|
||
|
|
name: '碳减排(T CO₂)'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.green-carbon {
|
||
|
|
.left-oil {
|
||
|
|
@keyframes bounce {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.an1 {
|
||
|
|
animation: bounce 1s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.survey_content {
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.survey_content_img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
line-height: 100%;
|
||
|
|
|
||
|
|
|
||
|
|
.oil-data {
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.an1 {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.oil-title {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 1920px) {
|
||
|
|
.left-oil {
|
||
|
|
@keyframes bounce {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-30px) ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.survey_content {
|
||
|
|
|
||
|
|
.survey_content_img {
|
||
|
|
background-size: 120px 120px;
|
||
|
|
.oil-data {
|
||
|
|
.an1 {
|
||
|
|
top: 20px;
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oil-title {
|
||
|
|
bottom: 50px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 1921px) and (max-width: 2560px) {
|
||
|
|
.left-oil {
|
||
|
|
@keyframes bounce {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-30px) ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.survey_content {
|
||
|
|
|
||
|
|
.survey_content_img {
|
||
|
|
background-size: 160px 160px !important;
|
||
|
|
.oil-data {
|
||
|
|
.an1 {
|
||
|
|
top: 50px !important;
|
||
|
|
font-size: 40px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oil-title {
|
||
|
|
bottom:60px !important;
|
||
|
|
font-size: 20px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 2561px) {
|
||
|
|
.left-oil {
|
||
|
|
@keyframes bounce {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-30px) ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.survey_content {
|
||
|
|
|
||
|
|
.survey_content_img {
|
||
|
|
background-size: 200px 200px !important;
|
||
|
|
.oil-data {
|
||
|
|
.an1 {
|
||
|
|
top: 90px !important;
|
||
|
|
font-size: 60px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oil-title {
|
||
|
|
bottom:80px !important;
|
||
|
|
font-size: 30px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|