You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
3.4 KiB
Vue
157 lines
3.4 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span class="card-title-icon">
|
|
<Icon icon="fa-solid:bolt" />
|
|
</span>
|
|
<span>能耗周趋势</span>
|
|
</div>
|
|
<span class="tag">本周能耗对比</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart-energy" class="chart"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import { useChart, colors, style } from '../utils'
|
|
|
|
const { init } = useChart('chart-energy')
|
|
|
|
const energyDays = ['周一','周二','周三','周四','周五','周六','周日']
|
|
const energyUse = [520, 540, 580, 610, 640, 590, 560]
|
|
const energyStd = [500, 520, 540, 560, 580, 560, 540]
|
|
|
|
onMounted(() => {
|
|
const chart = init()
|
|
if (!chart) return
|
|
|
|
chart.setOption({
|
|
backgroundColor: 'transparent',
|
|
tooltip: { trigger: 'axis' },
|
|
legend: { top: 0, right: 0, textStyle: style.legendText },
|
|
grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
|
|
xAxis: { type: 'category', data: energyDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
|
|
yAxis: { type: 'value', axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
|
|
series: [
|
|
{
|
|
name: '实际能耗(kWh)',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
itemStyle: {
|
|
borderRadius: [4,4,0,0],
|
|
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
|
{ offset: 0, color: colors.danger },
|
|
{ offset: 1, color: 'rgba(239,68,68,0.10)' }
|
|
])
|
|
},
|
|
data: energyUse
|
|
},
|
|
{
|
|
name: '基准能耗(kWh)',
|
|
type: 'line',
|
|
smooth: true,
|
|
showSymbol: false,
|
|
lineStyle: { width: 2, color: colors.green },
|
|
data: energyStd
|
|
}
|
|
]
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(30,64,175,0.85);
|
|
box-shadow:
|
|
0 18px 45px rgba(15,23,42,0.95),
|
|
0 0 0 1px rgba(15,23,42,1),
|
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
|
padding: 10px 10px 10px 10px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card::before,
|
|
.card::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(56,189,248,0.75);
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card::before {
|
|
top: -1px;
|
|
left: -1px;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.card::after {
|
|
right: -1px;
|
|
bottom: -1px;
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
padding-bottom: 4px;
|
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #e5f0ff;
|
|
}
|
|
|
|
.card-title-icon {
|
|
color: #22d3ee;
|
|
}
|
|
|
|
.card-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tag {
|
|
border-radius: 999px;
|
|
padding: 2px 6px;
|
|
font-size: 10px;
|
|
border: 1px solid rgba(148,163,184,0.4);
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 180px;
|
|
}
|
|
|
|
@media (max-width: 1600px) {
|
|
.chart { min-height: 160px; }
|
|
}
|
|
</style>
|