1583 lines
55 KiB
Vue
1583 lines
55 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">{{ leftOilData[0] }}L</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="用电统计" class="left-power">
|
|
<div style="height: 50%;">
|
|
<div class="survey_content">
|
|
<div class="survey_content_img">
|
|
<svg-icon icon-class="power" class="an2"></svg-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 50%;" class="power-chart">
|
|
<el-col :span="8">
|
|
<div class="chart-bg power-chart1">
|
|
<div class="chart-proc"></div>
|
|
<div class="data-top">
|
|
<div class="chart-data led-number">{{ leftPowerData[0] }}</div>
|
|
<div class="chart-unit">kW</div>
|
|
</div>
|
|
<div class="data-bottom">施工用电</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="chart-bg power-chart2">
|
|
<div class="chart-proc" :style="'height:' + leftPowerData[3] + '%'"></div>
|
|
<div class="data-top">
|
|
<div class="chart-data led-number">{{ (leftPowerData[1] / 1000.0).toFixed(1) }}</div>
|
|
<div class="chart-unit">(T CO₂)</div>
|
|
</div>
|
|
<div class="data-bottom">碳排放</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="chart-bg power-chart3">
|
|
<div class="chart-proc" :style="'height:' + leftPowerData[4] + '%;'"></div>
|
|
<div class="data-top">
|
|
<div class="chart-data led-number">{{ (leftPowerData[2] / 1000.0).toFixed(1) }}</div>
|
|
<div class="chart-unit">(T CO₂)</div>
|
|
</div>
|
|
<div class="data-bottom">碳减排</div>
|
|
</div>
|
|
</el-col>
|
|
</div>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
|
|
<el-col :span="12" class="h100">
|
|
<module-one-2-2 label class="no-title no-border center-top">
|
|
<div class="top-total-data">
|
|
<el-col :span="8">
|
|
<div class="data-item">
|
|
<div class="td-title">
|
|
<svg-icon icon-class="money"></svg-icon>碳排放预估总量(T CO₂)
|
|
</div>
|
|
<div class="td-number">
|
|
<people-number :number="(totalData[0] / 1000.0).toFixed(1)" unit></people-number>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="data-item">
|
|
<div class="td-title">
|
|
<svg-icon icon-class="money"></svg-icon>碳排放监测累计总量(T CO₂)
|
|
</div>
|
|
<div class="td-number">
|
|
<people-number :number="(totalData[1] / 1000.0).toFixed(1)" unit></people-number>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="data-item">
|
|
<div class="td-title">
|
|
<svg-icon icon-class="money"></svg-icon>当月碳排放监测量(T CO₂)
|
|
</div>
|
|
<div class="td-number">
|
|
<people-number :number="(totalData[2] / 1000.0).toFixed(1)" unit></people-number>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</div>
|
|
<div class="prj-img-list">
|
|
<el-carousel height="100%" :autoplay="false">
|
|
<el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
|
|
<el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</module-one-2-2>
|
|
<module-one-1-2 label="节能减排趋势" class="energy-tendency">
|
|
<el-col :span="8" class="et-chart1">
|
|
<img src="images/security1.gif" class="time-img" />
|
|
<my-chart :key="chartKey" id="energy-tendency-total" width="100%" height="100%" :render="renderChart4"></my-chart>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<my-chart :key="chartKey" id="energy-tendency-line" width="100%" height="100%" :render="renderChart5"></my-chart>
|
|
</el-col>
|
|
</module-one-1-2>
|
|
</el-col>
|
|
<el-col :span="6" class="h100">
|
|
<module-one-1-1 label="建材排放趋势">
|
|
<my-chart :key="chartKey" id="right-build-chart" width="100%" height="100%" :render="renderChart6"></my-chart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="用油排放趋势">
|
|
<my-chart :key="chartKey" id="right-oil-chart" width="100%" height="100%" :render="renderChart7"></my-chart>
|
|
</module-one-1-1>
|
|
<module-one-1-1 label="用电排放趋势">
|
|
<my-chart :key="chartKey" id="right-power-chart" width="100%" height="100%" :render="renderChart8"></my-chart>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import debounce from 'lodash.debounce'
|
|
import SvgIcon from '@/components/SvgIcon.vue'
|
|
export default {
|
|
components: { SvgIcon },
|
|
data() {
|
|
return {
|
|
dpi: '',
|
|
chartKey: 0,
|
|
prjImgs: [],
|
|
selProject: null,
|
|
prjInfo: {},
|
|
allData: [],
|
|
curMonthData: [],
|
|
yearMonthData: {},
|
|
leftOilData: [0, 0, 0, 0],
|
|
leftPowerData: [0, 0, 0, 40, 60],
|
|
totalData: [0, 0, 0],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch('ChangeNav', 6)
|
|
this.dpi = this.$dpi()
|
|
window.addEventListener('resize', () => {
|
|
if (this.dpi != this.$dpi()) {
|
|
this.dpi = this.$dpi()
|
|
this.chartKey++
|
|
}
|
|
})
|
|
this.$bus.$on(
|
|
'projectChange',
|
|
debounce((prj) => {
|
|
this.selProject = prj
|
|
this.init()
|
|
})
|
|
)
|
|
this.selProject = this.$store.getters.selProject
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
if (!this.selProject) {
|
|
return
|
|
}
|
|
this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
|
|
this.prjInfo = d.data || {}
|
|
this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(',').filter((d) => d)
|
|
})
|
|
this.loadData()
|
|
},
|
|
loadData() {
|
|
let projectId = this.selProject.id
|
|
let comId = this.selProject.comId
|
|
let ajax = [
|
|
this.$api.greenCarbon.groupByAll({
|
|
projectId: projectId,
|
|
comId: comId,
|
|
}),
|
|
this.$api.greenCarbon.groupCurrentMonth({
|
|
projectId: projectId,
|
|
comId: comId,
|
|
createTime: this.$dt(new Date()).format('YYYY-MM-01'),
|
|
updateTime: this.$dt(new Date()).endOf('month').format('YYYY-MM-DD'),
|
|
}),
|
|
this.$api.greenCarbon.groupByYearMonth({
|
|
projectId: projectId,
|
|
comId: comId,
|
|
createTime: this.$dt(new Date()).add(-11, 'month').format('YYYY-MM-01'),
|
|
updateTime: this.$dt(new Date()).endOf('month').format('YYYY-MM-DD'),
|
|
}),
|
|
]
|
|
this.$api.http.all(ajax).then((res) => {
|
|
console.log(res)
|
|
this.allData = res[0]
|
|
this.curMonthData = res[1]
|
|
this.yearMonthData = res[2]
|
|
let tmps = this.allData.filter((it) => it.factorType == 2)
|
|
this.leftOilData =
|
|
tmps.length > 0
|
|
? [
|
|
tmps[0].practicalValue,
|
|
tmps[0].sumPracticalValue,
|
|
tmps[0].sumEmissionReduction,
|
|
(Math.round(tmps[0].sumEstimateValue / 10000) + 1) * 10,
|
|
]
|
|
: [0, 0, 0, 0]
|
|
tmps = this.allData.filter((it) => it.factorType == 3)
|
|
this.leftPowerData =
|
|
tmps.length > 0
|
|
? [
|
|
tmps[0].practicalValue,
|
|
tmps[0].sumPracticalValue,
|
|
tmps[0].sumEmissionReduction,
|
|
tmps[0].sumEstimateValue == 0 ? 0 : (tmps[0].sumPracticalValue * 100) / tmps[0].sumEstimateValue,
|
|
tmps[0].sumEstimateValue == 0 ? 0 : (tmps[0].sumEmissionReduction * 100) / tmps[0].sumEstimateValue,
|
|
]
|
|
: [0, 0, 0, 0, 0]
|
|
tmps = this.allData.filter((it) => it.factorType == 0)
|
|
this.totalData[0] = tmps.length > 0 ? tmps[0].sumEstimateValue : 0
|
|
this.totalData[1] = tmps.length > 0 ? tmps[0].sumPracticalValue : 0
|
|
tmps = this.curMonthData.filter((it) => it.factorType == 0)
|
|
this.totalData[2] = tmps.length > 0 ? tmps[0].emissionReduction : 0
|
|
this.chartKey++
|
|
})
|
|
},
|
|
renderChart1() {
|
|
let tmps = this.allData.filter((it) => it.factorType == 1)
|
|
let datas = tmps.length > 0 ? [tmps[0].sumPracticalValue, tmps[0].sumEmissionReduction] : [0, 0]
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let option = {
|
|
color: ['#ff9f1a', '#00a4e6'],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
valueFormatter: (v) => {
|
|
return v + 'T CO₂'
|
|
},
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
},
|
|
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}\nT CO₂}'].join('\n'),
|
|
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: (datas[0] / 1000.0).toFixed(1), name: '碳排放' },
|
|
{ value: (datas[1] / 1000.0).toFixed(1), name: '碳减排' },
|
|
],
|
|
},
|
|
],
|
|
}
|
|
return option
|
|
},
|
|
renderChart2() {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let option = {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
max: this.leftOilData[3],
|
|
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: (this.leftOilData[1] / 1000.0).toFixed(1),
|
|
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: this.leftOilData[3],
|
|
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: (this.leftOilData[2] / 1000.0).toFixed(1),
|
|
name: '碳减排(T CO₂)',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
return option
|
|
},
|
|
renderChart4() {
|
|
let sum = (objs) => {
|
|
let res = 0
|
|
objs.forEach((it) => {
|
|
res += it || 0
|
|
})
|
|
return res
|
|
}
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let datas = [0, 0, 0]
|
|
datas[0] = this.yearMonthData.buildData ? sum(this.yearMonthData.buildData.emissionReduction.datas) : 0
|
|
datas[1] = this.yearMonthData.oilData ? sum(this.yearMonthData.oilData.emissionReduction.datas) : 0
|
|
datas[2] = this.yearMonthData.powerData ? sum(this.yearMonthData.powerData.emissionReduction.datas) : 0
|
|
let option = {
|
|
legend: {
|
|
bottom: is1K ? '0%' : is2K ? '10%' : '5%',
|
|
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,
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
valueFormatter: (v) => {
|
|
return v + 'T CO₂'
|
|
},
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
},
|
|
color: ['#C060F6', '#5087EC', '#FFBB3A'],
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: is1K ? [40, 66] : is2K ? [60, 100] : [140, 190],
|
|
center: is1K ? ['50%', '40%'] : is2K ? ['50%', '40%'] : ['50%', '40%'],
|
|
roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: is1K ? 4 : is2K ? 8 : 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2,
|
|
},
|
|
data: [
|
|
{ value: datas[2].toFixed(1), name: '电力' },
|
|
{ value: datas[0].toFixed(1), name: '建材' },
|
|
{ value: datas[1].toFixed(1), name: '油耗' },
|
|
],
|
|
label: {
|
|
overflow: 'none',
|
|
formatter: ['{b|{b}}', '{c|{c}\nT CO₂}'].join('\n'),
|
|
rich: {
|
|
b: {
|
|
color: '#01e5ff',
|
|
height: is1K ? 20 : is2K ? 30 : 50,
|
|
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
|
},
|
|
c: {
|
|
color: '#01e5ff',
|
|
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
|
},
|
|
},
|
|
show: true,
|
|
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
|
},
|
|
labelLayout: {},
|
|
},
|
|
],
|
|
}
|
|
return option
|
|
},
|
|
renderChart5() {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let option = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0%',
|
|
top: '15%',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
valueFormatter: (v) => {
|
|
return v ? v : '- ' + 'T CO₂'
|
|
},
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
},
|
|
legend: {
|
|
top: is1K ? '0%' : is2K ? '0%' : '0%',
|
|
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,
|
|
},
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.yearMonthData?.totalData?.emissionReduction?.titles || [],
|
|
axisLabel: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
color: '#a2c8f9',
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}T CO₂',
|
|
color: '#2ec2b3',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '碳预估',
|
|
type: 'line',
|
|
smooth: true,
|
|
label: {
|
|
show: true,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7ddff2',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.totalData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳排放',
|
|
type: 'line',
|
|
smooth: true,
|
|
label: {
|
|
show: true,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#006594',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.totalData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳减排',
|
|
type: 'line',
|
|
smooth: true,
|
|
label: {
|
|
show: true,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7db800',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.totalData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
],
|
|
}
|
|
return option
|
|
},
|
|
renderChart6() {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let option = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0%',
|
|
top: '15%',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
valueFormatter: (v) => {
|
|
return v ? v : ' - ' + 'T CO₂'
|
|
},
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
},
|
|
legend: {
|
|
top: is1K ? '0%' : is2K ? '0%' : '0%',
|
|
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,
|
|
},
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.yearMonthData?.buildData?.emissionReduction?.titles || [],
|
|
axisLabel: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
color: '#a2c8f9',
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}T CO₂',
|
|
color: '#2ec2b3',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '碳预估',
|
|
type: 'bar',
|
|
smooth: true,
|
|
label: {
|
|
show: false,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7ddff2',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.buildData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳排放',
|
|
type: 'bar',
|
|
smooth: true,
|
|
label: {
|
|
show: false,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#006594',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.buildData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳减排',
|
|
type: 'bar',
|
|
smooth: true,
|
|
label: {
|
|
show: false,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7db800',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.buildData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
],
|
|
}
|
|
console.log(option)
|
|
return option
|
|
},
|
|
renderChart7() {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let option = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0%',
|
|
top: '15%',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
valueFormatter: (v) => {
|
|
return v ? v : ' - ' + 'T CO₂'
|
|
},
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
},
|
|
legend: {
|
|
top: is1K ? '0%' : is2K ? '0%' : '0%',
|
|
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,
|
|
},
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.yearMonthData?.oilData?.emissionReduction?.titles || [],
|
|
axisLabel: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
color: '#a2c8f9',
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}T CO₂',
|
|
color: '#2ec2b3',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '碳预估',
|
|
type: 'line',
|
|
smooth: true,
|
|
label: {
|
|
show: true,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7ddff2',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.oilData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳排放',
|
|
type: 'line',
|
|
smooth: true,
|
|
label: {
|
|
show: true,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#006594',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.oilData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳减排',
|
|
type: 'line',
|
|
smooth: true,
|
|
label: {
|
|
show: true,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7db800',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.oilData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
],
|
|
}
|
|
return option
|
|
},
|
|
renderChart8() {
|
|
let is1K = this.$dpi() == '1K'
|
|
let is2K = this.$dpi() == '2K'
|
|
let option = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0%',
|
|
top: '15%',
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
valueFormatter: (v) => {
|
|
return v ? v : ' - ' + 'T CO₂'
|
|
},
|
|
textStyle: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
},
|
|
legend: {
|
|
top: is1K ? '0%' : is2K ? '0%' : '0%',
|
|
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,
|
|
},
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.yearMonthData?.powerData?.emissionReduction?.titles || [],
|
|
axisLabel: {
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
color: '#a2c8f9',
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}T CO₂',
|
|
color: '#2ec2b3',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '碳预估',
|
|
type: 'bar',
|
|
smooth: true,
|
|
label: {
|
|
show: false,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7ddff2',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.powerData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳排放',
|
|
type: 'bar',
|
|
smooth: true,
|
|
label: {
|
|
show: false,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#006594',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.powerData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
{
|
|
name: '碳减排',
|
|
type: 'bar',
|
|
smooth: true,
|
|
label: {
|
|
show: false,
|
|
color: '#4DAAFC',
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
|
},
|
|
lineStyle: {
|
|
color: '#7db800',
|
|
},
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
|
|
},
|
|
data: (this.yearMonthData?.powerData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
|
|
},
|
|
],
|
|
}
|
|
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 {
|
|
.survey_content_img {
|
|
.oil-data {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.an1 {
|
|
position: relative;
|
|
}
|
|
|
|
.oil-title {
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.survey_content {
|
|
height: 100%;
|
|
|
|
.survey_content_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
|
|
.an2 {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-power {
|
|
.svg-icon {
|
|
fill: #63c8ff;
|
|
}
|
|
|
|
.power-chart {
|
|
.el-col {
|
|
height: 100%;
|
|
padding: 10px;
|
|
|
|
.chart-bg {
|
|
position: relative;
|
|
border-radius: 5px 5px 0px 0px;
|
|
height: 100%;
|
|
|
|
&.power-chart1 {
|
|
background-color: #0c142d;
|
|
}
|
|
|
|
&.power-chart2 {
|
|
background-color: #ffbb3a;
|
|
}
|
|
|
|
&.power-chart3 {
|
|
background-color: #17ad55;
|
|
}
|
|
|
|
.chart-proc {
|
|
height: 50%;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
background-color: #05275aad;
|
|
z-index: 1;
|
|
}
|
|
|
|
.data-top {
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-flow: column;
|
|
|
|
.chart-data {
|
|
color: #01e5ff;
|
|
text-shadow: 2px 2px 2px black;
|
|
}
|
|
}
|
|
|
|
.data-bottom {
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.center-top {
|
|
.top-total-data {
|
|
height: 110px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
.el-col {
|
|
padding: 10px 10px;
|
|
|
|
&:first-child {
|
|
padding: 10px 10px 10px 0px;
|
|
}
|
|
|
|
&:last-child {
|
|
padding: 10px 0px 10px 10px;
|
|
}
|
|
|
|
.data-item {
|
|
background-image: linear-gradient(89deg, #192c6447 0%, #192c648a 100%);
|
|
|
|
.td-title {
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #01e5ff;
|
|
|
|
.svg-icon {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.td-number {
|
|
height: 70px;
|
|
display: flex;
|
|
position: relative;
|
|
top: -10px;
|
|
justify-content: center;
|
|
|
|
.people-number-con {
|
|
padding: 0px;
|
|
|
|
div {
|
|
margin-right: 2px;
|
|
width: 25px;
|
|
color: #01e5ff;
|
|
text-shadow: 2px 2px 2px black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-img-list {
|
|
height: calc(100% - 130px);
|
|
|
|
.el-carousel {
|
|
height: 100%;
|
|
|
|
.el-carousel__arrow {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: #192c648a;
|
|
|
|
i {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.energy-tendency {
|
|
.el-col {
|
|
height: 100%;
|
|
|
|
&.et-chart1 {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-power {
|
|
@keyframes bounce2 {
|
|
from {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
to {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
.an2 {
|
|
animation: bounce2 1s infinite;
|
|
}
|
|
|
|
.survey_content {
|
|
.survey_content_img {
|
|
background-size: 120px 120px;
|
|
}
|
|
}
|
|
|
|
.chart-bg {
|
|
.data-top {
|
|
.chart-data {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.chart-unit {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.data-bottom {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.energy-tendency {
|
|
.el-col {
|
|
&.et-chart1 {
|
|
position: relative;
|
|
|
|
.time-img {
|
|
position: absolute;
|
|
width: 110px;
|
|
height: 110px;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -79px;
|
|
margin-left: -56px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-power {
|
|
@keyframes bounce2 {
|
|
from {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
to {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
.an2 {
|
|
animation: bounce2 1s infinite;
|
|
top: 40px;
|
|
}
|
|
|
|
.survey_content {
|
|
.survey_content_img {
|
|
background-size: 160px 160px !important;
|
|
}
|
|
}
|
|
|
|
.chart-bg {
|
|
.data-top {
|
|
.chart-data {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.chart-unit {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.data-bottom {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.center-top {
|
|
.top-total-data {
|
|
height: 150px !important;
|
|
|
|
.el-col {
|
|
.data-item {
|
|
.td-title {
|
|
height: 60px !important;
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
.td-number {
|
|
height: 90px !important;
|
|
top: -15px !important;
|
|
|
|
.people-number-con {
|
|
div {
|
|
width: 35px !important;
|
|
height: 60px !important;
|
|
font-size: 50px;
|
|
margin-right: 4px !important;
|
|
line-height: 60px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-img-list {
|
|
height: calc(100% - 170px) !important;
|
|
|
|
.el-carousel {
|
|
height: 100%;
|
|
|
|
.el-carousel__arrow {
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
|
|
i {
|
|
font-size: 30px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.energy-tendency {
|
|
.el-col {
|
|
&.et-chart1 {
|
|
position: relative;
|
|
|
|
.time-img {
|
|
position: absolute;
|
|
width: 180px;
|
|
height: 180px;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -126px;
|
|
margin-left: -89px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-power {
|
|
@keyframes bounce2 {
|
|
from {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
to {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
}
|
|
|
|
.an2 {
|
|
animation: bounce2 1s infinite;
|
|
top: 60px;
|
|
}
|
|
|
|
.survey_content {
|
|
.survey_content_img {
|
|
background-size: 200px 200px !important;
|
|
}
|
|
}
|
|
|
|
.chart-bg {
|
|
.data-top {
|
|
.chart-data {
|
|
font-size: 60px;
|
|
}
|
|
|
|
.chart-unit {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.data-bottom {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.center-top {
|
|
.top-total-data {
|
|
height: 180px !important;
|
|
|
|
.el-col {
|
|
.data-item {
|
|
.td-title {
|
|
height: 70px !important;
|
|
font-size: 24px !important;
|
|
}
|
|
|
|
.td-number {
|
|
height: 110px !important;
|
|
top: -15px !important;
|
|
|
|
.people-number-con {
|
|
div {
|
|
width: 45px !important;
|
|
height: 80px !important;
|
|
font-size: 64px;
|
|
margin-right: 4px !important;
|
|
line-height: 80px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-img-list {
|
|
height: calc(100% - 200px) !important;
|
|
|
|
.el-carousel {
|
|
height: 100%;
|
|
|
|
.el-carousel__arrow {
|
|
width: 120px !important;
|
|
height: 120px !important;
|
|
|
|
i {
|
|
font-size: 40px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.energy-tendency {
|
|
.el-col {
|
|
&.et-chart1 {
|
|
position: relative;
|
|
|
|
.time-img {
|
|
position: absolute;
|
|
width: 400px;
|
|
height: 400px;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -261px;
|
|
margin-left: -199px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |