You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
943 lines
26 KiB
943 lines
26 KiB
<template> |
|
<div class="carbon-emissions-analysis"> |
|
<!-- 时间选择器 --> |
|
<div class="time-selector"> |
|
<div class="selector-label">时间维度</div> |
|
<div class="time-periods"> |
|
<div |
|
v-for="(period, index) in timePeriods" |
|
:key="index" |
|
:class="['period-item', { active: activePeriod === index }]" |
|
@click="handlePeriodChange(index)" |
|
> |
|
{{ period }} |
|
</div> |
|
</div> |
|
<div class="date-range" v-if="activePeriod === 3"> |
|
<el-date-picker |
|
v-model="dateRange" |
|
type="daterange" |
|
range-separator="至" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
value-format="yyyy-MM-dd" |
|
@change="handleDateChange" |
|
class="custom-picker" |
|
/> |
|
</div> |
|
</div> |
|
|
|
<!-- 碳排放核心指标 --> |
|
<div class="carbon-indicators"> |
|
<div class="indicator-card primary"> |
|
<div class="card-header"> |
|
<div class="card-icon"> |
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> |
|
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/> |
|
<path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/> |
|
</svg> |
|
</div> |
|
<div class="card-title">累计碳排放</div> |
|
</div> |
|
<div class="card-value">{{ carbonIndicators.totalCarbon }} <span class="unit">tCO₂e</span></div> |
|
<div class="card-trend" :class="carbonIndicators.carbonTrend >= 0 ? 'up' : 'down'"> |
|
<span v-if="carbonIndicators.carbonTrend >= 0">↑</span> |
|
<span v-else>↓</span> |
|
{{ Math.abs(carbonIndicators.carbonTrend) }}% |
|
</div> |
|
</div> |
|
<div class="indicator-card success"> |
|
<div class="card-header"> |
|
<div class="card-icon"> |
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> |
|
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/> |
|
<path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/> |
|
<path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/> |
|
</svg> |
|
</div> |
|
<div class="card-title">累计碳减排</div> |
|
</div> |
|
<div class="card-value">{{ carbonIndicators.totalReduction }} <span class="unit">tCO₂e</span></div> |
|
<div class="card-trend" :class="carbonIndicators.reductionTrend >= 0 ? 'up' : 'down'"> |
|
<span v-if="carbonIndicators.reductionTrend >= 0">↑</span> |
|
<span v-else>↓</span> |
|
{{ Math.abs(carbonIndicators.reductionTrend) }}% |
|
</div> |
|
</div> |
|
<div class="indicator-card warning"> |
|
<div class="card-header"> |
|
<div class="card-icon"> |
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> |
|
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/> |
|
<path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/> |
|
<path d="M536 672h-72c-4.4 0-8 3.6-8 8v72c0 4.4 3.6 8 8 8h72c4.4 0 8-3.6 8-8v-72c0-4.4-3.6-8-8-8z" fill="currentColor"/> |
|
</svg> |
|
</div> |
|
<div class="card-title">碳强度</div> |
|
</div> |
|
<div class="card-value">{{ carbonIndicators.carbonIntensity }} <span class="unit">kgCO₂/kWh</span></div> |
|
<div class="card-trend" :class="carbonIndicators.intensityTrend >= 0 ? 'up' : 'down'"> |
|
<span v-if="carbonIndicators.intensityTrend >= 0">↑</span> |
|
<span v-else>↓</span> |
|
{{ Math.abs(carbonIndicators.intensityTrend) }}% |
|
</div> |
|
</div> |
|
<div class="indicator-card info"> |
|
<div class="card-header"> |
|
<div class="card-icon"> |
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> |
|
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/> |
|
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/> |
|
<path d="M688 592H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/> |
|
</svg> |
|
</div> |
|
<div class="card-title">节能率</div> |
|
</div> |
|
<div class="card-value">{{ carbonIndicators.energySavingRate }} <span class="unit">%</span></div> |
|
<div class="card-trend" :class="carbonIndicators.savingTrend >= 0 ? 'up' : 'down'"> |
|
<span v-if="carbonIndicators.savingTrend >= 0">↑</span> |
|
<span v-else>↓</span> |
|
{{ Math.abs(carbonIndicators.savingTrend) }}% |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 碳排放趋势图 --> |
|
<div class="chart-section"> |
|
<div class="chart-header"> |
|
<div class="chart-title">碳排放趋势</div> |
|
<div class="chart-legend"> |
|
<div class="legend-item"> |
|
<span class="legend-dot" style="background: #EE6666;"></span> |
|
<span>碳排放量</span> |
|
</div> |
|
<div class="legend-item"> |
|
<span class="legend-dot" style="background: #91CC75;"></span> |
|
<span>碳减排量</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="chart" ref="carbonTrendChartRef"></div> |
|
</div> |
|
|
|
<!-- 碳排放来源分布 --> |
|
<div class="chart-section half-width"> |
|
<div class="chart-header"> |
|
<div class="chart-title">碳排放来源分布</div> |
|
</div> |
|
<div class="chart" ref="carbonSourceChartRef"></div> |
|
</div> |
|
|
|
<!-- 能耗与碳排放对比 --> |
|
<div class="chart-section half-width"> |
|
<div class="chart-header"> |
|
<div class="chart-title">能耗与碳排放对比</div> |
|
</div> |
|
<div class="chart" ref="energyCarbonChartRef"></div> |
|
</div> |
|
|
|
<!-- 碳减排量详情表格 --> |
|
<div class="table-section"> |
|
<div class="section-header"> |
|
<div class="section-title">碳减排量详情</div> |
|
<el-button type="primary" size="small" @click="exportData">导出数据</el-button> |
|
</div> |
|
<div class="table-container"> |
|
<table class="data-table"> |
|
<thead> |
|
<tr> |
|
<th>日期</th> |
|
<th>用电量(kWh)</th> |
|
<th>碳排放量(tCO₂e)</th> |
|
<th>基准碳排放(tCO₂e)</th> |
|
<th>碳减排量(tCO₂e)</th> |
|
<th>碳减排率(%)</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr v-for="(item, index) in carbonDetailList" :key="index"> |
|
<td>{{ item.date }}</td> |
|
<td>{{ item.energy }}</td> |
|
<td>{{ item.carbon }}</td> |
|
<td>{{ item.baselineCarbon }}</td> |
|
<td>{{ item.reduction }}</td> |
|
<td>{{ item.reductionRate }}%</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
<!-- 碳减排贡献分析 --> |
|
<div class="contribution-section"> |
|
<div class="section-header"> |
|
<div class="section-title">碳减排贡献分析</div> |
|
</div> |
|
<div class="contribution-grid"> |
|
<div class="contribution-item" v-for="item in contributionList" :key="item.name"> |
|
<div class="contribution-icon" :style="{ background: item.bg }"> |
|
<span>{{ item.icon }}</span> |
|
</div> |
|
<div class="contribution-info"> |
|
<div class="contribution-name">{{ item.name }}</div> |
|
<div class="contribution-value">{{ item.value }} <span class="unit">tCO₂e</span></div> |
|
<div class="contribution-percent">{{ item.percent }}%</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as echarts from "echarts"; |
|
|
|
export default { |
|
name: "CarbonEmissionsAnalysis", |
|
data() { |
|
return { |
|
// 时间段选项 |
|
timePeriods: ["近七日", "近一月", "近三月", "自定义"], |
|
activePeriod: 0, |
|
// 日期范围 |
|
dateRange: [], |
|
// 碳排放核心指标 |
|
carbonIndicators: { |
|
totalCarbon: 1256.8, |
|
carbonTrend: -5.2, |
|
totalReduction: 89.6, |
|
reductionTrend: 12.5, |
|
carbonIntensity: 0.52, |
|
intensityTrend: -3.8, |
|
energySavingRate: 28.5, |
|
savingTrend: 2.3 |
|
}, |
|
// 碳排放详情列表 |
|
carbonDetailList: [ |
|
{ date: "2024-03-01", energy: 178000, carbon: 92.56, baselineCarbon: 129.5, reduction: 36.94, reductionRate: 28.5 }, |
|
{ date: "2024-03-02", energy: 189000, carbon: 98.28, baselineCarbon: 137.5, reduction: 39.22, reductionRate: 28.5 }, |
|
{ date: "2024-03-03", energy: 197000, carbon: 102.44, baselineCarbon: 143.3, reduction: 40.86, reductionRate: 28.5 }, |
|
{ date: "2024-03-04", energy: 181000, carbon: 94.12, baselineCarbon: 131.6, reduction: 37.48, reductionRate: 28.5 }, |
|
{ date: "2024-03-05", energy: 204000, carbon: 106.08, baselineCarbon: 148.4, reduction: 42.32, reductionRate: 28.5 } |
|
], |
|
// 碳减排贡献分析 |
|
contributionList: [ |
|
{ name: "能效提升", icon: "EER", value: 45.6, percent: 50.9, bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" }, |
|
{ name: "设备优化", icon: "设备", value: 25.8, percent: 28.8, bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" }, |
|
{ name: "运行策略", icon: "策略", value: 12.3, percent: 13.7, bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" }, |
|
{ name: "其他措施", icon: "其他", value: 5.9, percent: 6.6, bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" } |
|
], |
|
// 图表实例 |
|
carbonTrendChart: null, |
|
carbonSourceChart: null, |
|
energyCarbonChart: null |
|
}; |
|
}, |
|
mounted() { |
|
this.initCarbonTrendChart(); |
|
this.initCarbonSourceChart(); |
|
this.initEnergyCarbonChart(); |
|
window.addEventListener("resize", this.handleResize); |
|
}, |
|
beforeDestroy() { |
|
window.removeEventListener("resize", this.handleResize); |
|
if (this.carbonTrendChart) this.carbonTrendChart.dispose(); |
|
if (this.carbonSourceChart) this.carbonSourceChart.dispose(); |
|
if (this.energyCarbonChart) this.energyCarbonChart.dispose(); |
|
}, |
|
watch: { |
|
activePeriod() { |
|
this.updateAllCharts(); |
|
} |
|
}, |
|
methods: { |
|
// 时间段切换 |
|
handlePeriodChange(index) { |
|
this.activePeriod = index; |
|
}, |
|
// 日期范围变化 |
|
handleDateChange(value) { |
|
console.log("自定义日期范围:", value); |
|
this.updateAllCharts(); |
|
}, |
|
// 导出数据 |
|
exportData() { |
|
this.$message.success("数据导出成功"); |
|
}, |
|
// 初始化碳排放趋势图 |
|
initCarbonTrendChart() { |
|
this.carbonTrendChart = echarts.init(this.$refs.carbonTrendChartRef); |
|
this.updateCarbonTrendChart(); |
|
}, |
|
// 更新碳排放趋势图 |
|
updateCarbonTrendChart() { |
|
const dataMap = { |
|
0: { // 近七日 |
|
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], |
|
carbon: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76], |
|
reduction: [36.94, 39.22, 40.86, 37.48, 42.32, 44.96, 41.76] |
|
}, |
|
1: { // 近一月 |
|
xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"], |
|
carbon: [856, 912, 888, 945, 1012, 956, 892], |
|
reduction: [341.6, 364.8, 355.2, 378, 404.8, 382.4, 356.8] |
|
}, |
|
2: { // 近三月 |
|
xData: ["1月", "2月", "3月"], |
|
carbon: [24120, 27360, 25680], |
|
reduction: [9648, 10944, 10272] |
|
}, |
|
3: { // 自定义 |
|
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], |
|
carbon: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76], |
|
reduction: [36.94, 39.22, 40.86, 37.48, 42.32, 44.96, 41.76] |
|
} |
|
}; |
|
|
|
const currentData = dataMap[this.activePeriod]; |
|
|
|
const option = { |
|
tooltip: { |
|
trigger: "axis", |
|
axisPointer: { |
|
type: "cross" |
|
} |
|
}, |
|
legend: { |
|
data: ["碳排放量", "碳减排量"], |
|
textStyle: { |
|
color: "#ffffff" |
|
} |
|
}, |
|
grid: { |
|
left: "3%", |
|
right: "4%", |
|
bottom: "3%", |
|
containLabel: true |
|
}, |
|
xAxis: { |
|
type: "category", |
|
boundaryGap: false, |
|
data: currentData.xData, |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: "#365576" |
|
} |
|
}, |
|
axisTick: { |
|
show: false |
|
} |
|
}, |
|
yAxis: { |
|
type: "value", |
|
name: "tCO₂e", |
|
nameTextStyle: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: "#365576" |
|
} |
|
}, |
|
splitLine: { |
|
lineStyle: { |
|
color: "#1a3d62", |
|
type: "dashed" |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
name: "碳排放量", |
|
type: "bar", |
|
data: currentData.carbon, |
|
itemStyle: { |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "#EE6666" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#E53935" |
|
} |
|
] |
|
} |
|
} |
|
}, |
|
{ |
|
name: "碳减排量", |
|
type: "line", |
|
smooth: true, |
|
data: currentData.reduction, |
|
itemStyle: { |
|
color: "#91CC75" |
|
}, |
|
lineStyle: { |
|
color: "#91CC75", |
|
width: 3 |
|
}, |
|
areaStyle: { |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "rgba(145, 204, 117, 0.5)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(145, 204, 117, 0)" |
|
} |
|
] |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
this.carbonTrendChart.setOption(option); |
|
}, |
|
// 初始化碳排放来源分布图 |
|
initCarbonSourceChart() { |
|
this.carbonSourceChart = echarts.init(this.$refs.carbonSourceChartRef); |
|
const option = { |
|
tooltip: { |
|
trigger: "item", |
|
formatter: "{b}: {c}% ({d}%)" |
|
}, |
|
legend: { |
|
orient: "vertical", |
|
left: "left", |
|
textStyle: { |
|
color: "#ffffff" |
|
} |
|
}, |
|
series: [ |
|
{ |
|
name: "碳排放来源", |
|
type: "pie", |
|
radius: ["30%", "70%"], |
|
center: ["60%", "50%"], |
|
data: [ |
|
{ value: 65, name: "主机", itemStyle: { color: "#5470C6" } }, |
|
{ value: 20, name: "冷冻泵", itemStyle: { color: "#91CC75" } }, |
|
{ value: 10, name: "冷却泵", itemStyle: { color: "#FAC858" } }, |
|
{ value: 3, name: "冷却塔风机", itemStyle: { color: "#EE6666" } }, |
|
{ value: 2, name: "其他", itemStyle: { color: "#73C0DE" } } |
|
], |
|
label: { |
|
formatter: "{b}\n{d}%" |
|
} |
|
} |
|
] |
|
}; |
|
this.carbonSourceChart.setOption(option); |
|
}, |
|
// 初始化能耗与碳排放对比图 |
|
initEnergyCarbonChart() { |
|
this.energyCarbonChart = echarts.init(this.$refs.energyCarbonChartRef); |
|
const option = { |
|
tooltip: { |
|
trigger: "axis", |
|
axisPointer: { |
|
type: "cross" |
|
} |
|
}, |
|
legend: { |
|
data: ["用电量", "碳排放量"], |
|
textStyle: { |
|
color: "#ffffff" |
|
} |
|
}, |
|
grid: { |
|
left: "3%", |
|
right: "4%", |
|
bottom: "3%", |
|
containLabel: true |
|
}, |
|
xAxis: { |
|
type: "category", |
|
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: "#365576" |
|
} |
|
}, |
|
axisTick: { |
|
show: false |
|
} |
|
}, |
|
yAxis: [ |
|
{ |
|
type: "value", |
|
name: "kWh", |
|
nameTextStyle: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: "#365576" |
|
} |
|
}, |
|
splitLine: { |
|
lineStyle: { |
|
color: "#1a3d62", |
|
type: "dashed" |
|
} |
|
} |
|
}, |
|
{ |
|
type: "value", |
|
name: "tCO₂e", |
|
nameTextStyle: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, 0.8)" |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: "#365576" |
|
} |
|
}, |
|
splitLine: { |
|
show: false |
|
} |
|
} |
|
], |
|
series: [ |
|
{ |
|
name: "用电量", |
|
type: "bar", |
|
data: [178000, 189000, 197000, 181000, 204000, 215000, 200000], |
|
itemStyle: { |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "#15e1fd" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#208fff" |
|
} |
|
] |
|
} |
|
} |
|
}, |
|
{ |
|
name: "碳排放量", |
|
type: "line", |
|
smooth: true, |
|
yAxisIndex: 1, |
|
data: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76], |
|
itemStyle: { |
|
color: "#EE6666" |
|
}, |
|
lineStyle: { |
|
color: "#EE6666", |
|
width: 3 |
|
} |
|
} |
|
] |
|
}; |
|
this.energyCarbonChart.setOption(option); |
|
}, |
|
// 更新所有图表 |
|
updateAllCharts() { |
|
this.updateCarbonTrendChart(); |
|
}, |
|
// 响应式调整 |
|
handleResize() { |
|
if (this.carbonTrendChart) this.carbonTrendChart.resize(); |
|
if (this.carbonSourceChart) this.carbonSourceChart.resize(); |
|
if (this.energyCarbonChart) this.energyCarbonChart.resize(); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.carbon-emissions-analysis { |
|
padding: 0.16rem; |
|
} |
|
|
|
.time-selector { |
|
display: flex; |
|
align-items: center; |
|
padding: 0.2rem; |
|
background: rgba(255, 255, 255, 0.05); |
|
border-radius: 0.08rem; |
|
margin-bottom: 0.16rem; |
|
flex-wrap: wrap; |
|
gap: 0.15rem; |
|
|
|
.selector-label { |
|
font-size: 0.15rem; |
|
color: #ffffff; |
|
margin-right: 0.15rem; |
|
} |
|
|
|
.time-periods { |
|
display: flex; |
|
gap: 0.08rem; |
|
|
|
.period-item { |
|
padding: 0.06rem 0.2rem; |
|
font-size: 0.13rem; |
|
color: #ffffff; |
|
opacity: 0.7; |
|
cursor: pointer; |
|
border-radius: 0.04rem; |
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
opacity: 1; |
|
} |
|
|
|
&.active { |
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
opacity: 1; |
|
} |
|
} |
|
} |
|
|
|
.date-range { |
|
margin-left: 0.15rem; |
|
|
|
::v-deep .custom-picker { |
|
.el-input__wrapper { |
|
background: rgba(255, 255, 255, 0.1); |
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
|
.el-input__inner { |
|
color: #ffffff; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.carbon-indicators { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr)); |
|
gap: 0.15rem; |
|
margin-bottom: 0.16rem; |
|
|
|
.indicator-card { |
|
padding: 0.25rem; |
|
border-radius: 0.08rem; |
|
|
|
&.primary { |
|
background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%); |
|
border: 1px solid rgba(238, 102, 102, 0.3); |
|
} |
|
|
|
&.success { |
|
background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%); |
|
border: 1px solid rgba(145, 204, 117, 0.3); |
|
} |
|
|
|
&.warning { |
|
background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%); |
|
border: 1px solid rgba(250, 200, 88, 0.3); |
|
} |
|
|
|
&.info { |
|
background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%); |
|
border: 1px solid rgba(84, 112, 198, 0.3); |
|
} |
|
|
|
.card-header { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 0.15rem; |
|
|
|
.card-icon { |
|
width: 0.4rem; |
|
height: 0.4rem; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-right: 0.12rem; |
|
background: rgba(255, 255, 255, 0.1); |
|
|
|
svg { |
|
width: 0.2rem; |
|
height: 0.2rem; |
|
fill: #ffffff; |
|
} |
|
} |
|
|
|
.card-title { |
|
font-size: 0.14rem; |
|
color: #ffffff; |
|
opacity: 0.8; |
|
} |
|
} |
|
|
|
.card-value { |
|
font-size: 0.32rem; |
|
color: #15e1fd; |
|
font-weight: bold; |
|
margin-bottom: 0.1rem; |
|
|
|
.unit { |
|
font-size: 0.16rem; |
|
opacity: 0.8; |
|
} |
|
} |
|
|
|
.card-trend { |
|
font-size: 0.13rem; |
|
|
|
&.up { |
|
color: #EE6666; |
|
} |
|
|
|
&.down { |
|
color: #91CC75; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.chart-section { |
|
background: rgba(255, 255, 255, 0.03); |
|
border-radius: 0.08rem; |
|
padding: 0.2rem; |
|
margin-bottom: 0.16rem; |
|
|
|
&.half-width { |
|
display: inline-block; |
|
width: calc(50% - 0.08rem); |
|
vertical-align: top; |
|
|
|
&:nth-child(odd) { |
|
margin-right: 0.16rem; |
|
} |
|
} |
|
|
|
.chart-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 0.15rem; |
|
|
|
.chart-title { |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
padding-left: 0.12rem; |
|
border-left: 0.04rem solid #15e1fd; |
|
} |
|
|
|
.chart-legend { |
|
display: flex; |
|
gap: 0.2rem; |
|
|
|
.legend-item { |
|
display: flex; |
|
align-items: center; |
|
font-size: 0.13rem; |
|
color: #ffffff; |
|
|
|
.legend-dot { |
|
width: 0.1rem; |
|
height: 0.1rem; |
|
border-radius: 50%; |
|
margin-right: 0.06rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.chart { |
|
width: 100%; |
|
height: 3rem; |
|
} |
|
} |
|
|
|
.table-section { |
|
background: rgba(255, 255, 255, 0.03); |
|
border-radius: 0.08rem; |
|
padding: 0.2rem; |
|
margin-bottom: 0.16rem; |
|
|
|
.section-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 0.15rem; |
|
|
|
.section-title { |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
padding-left: 0.12rem; |
|
border-left: 0.04rem solid #15e1fd; |
|
} |
|
} |
|
|
|
.table-container { |
|
overflow-x: auto; |
|
|
|
.data-table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
|
|
thead { |
|
tr { |
|
background: rgba(255, 255, 255, 0.05); |
|
|
|
th { |
|
padding: 0.12rem; |
|
text-align: left; |
|
font-size: 0.14rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
} |
|
} |
|
} |
|
|
|
tbody { |
|
tr { |
|
&:hover { |
|
background: rgba(255, 255, 255, 0.05); |
|
} |
|
|
|
td { |
|
padding: 0.12rem; |
|
font-size: 0.13rem; |
|
color: #ffffff; |
|
opacity: 0.8; |
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.contribution-section { |
|
background: rgba(255, 255, 255, 0.03); |
|
border-radius: 0.08rem; |
|
padding: 0.2rem; |
|
|
|
.section-header { |
|
margin-bottom: 0.15rem; |
|
|
|
.section-title { |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
padding-left: 0.12rem; |
|
border-left: 0.04rem solid #15e1fd; |
|
} |
|
} |
|
|
|
.contribution-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); |
|
gap: 0.15rem; |
|
|
|
.contribution-item { |
|
display: flex; |
|
align-items: center; |
|
padding: 0.2rem; |
|
background: rgba(255, 255, 255, 0.05); |
|
border-radius: 0.06rem; |
|
|
|
.contribution-icon { |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-right: 0.15rem; |
|
|
|
span { |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
.contribution-info { |
|
flex: 1; |
|
|
|
.contribution-name { |
|
font-size: 0.14rem; |
|
color: #ffffff; |
|
opacity: 0.8; |
|
margin-bottom: 0.05rem; |
|
} |
|
|
|
.contribution-value { |
|
font-size: 0.2rem; |
|
color: #15e1fd; |
|
font-weight: bold; |
|
margin-bottom: 0.03rem; |
|
|
|
.unit { |
|
font-size: 0.13rem; |
|
opacity: 0.8; |
|
} |
|
} |
|
|
|
.contribution-percent { |
|
font-size: 0.12rem; |
|
color: #91CC75; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 1485px) { |
|
.carbon-indicators { |
|
grid-template-columns: repeat(2, 1fr); |
|
} |
|
|
|
.chart-section { |
|
&.half-width { |
|
width: 100%; |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
.contribution-grid { |
|
grid-template-columns: repeat(2, 1fr); |
|
} |
|
} |
|
</style>
|
|
|