@ -0,0 +1,770 @@
|
|||||||
|
<template>
|
||||||
|
<div class="energy-overview-page">
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form
|
||||||
|
ref="queryFormRef"
|
||||||
|
class="-mb-15px energy-overview-filter"
|
||||||
|
:model="queryParams"
|
||||||
|
:inline="true"
|
||||||
|
label-width="auto"
|
||||||
|
>
|
||||||
|
<el-form-item label="所属区域" prop="orgId">
|
||||||
|
<el-select v-model="queryParams.orgId" clearable filterable placeholder="请选择所属区域" class="!w-220px">
|
||||||
|
<el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="能源类型" prop="energyTypeId">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.energyTypeId"
|
||||||
|
:disabled="!hasEnergyTypes"
|
||||||
|
placeholder="请选择能源类型"
|
||||||
|
class="!w-220px"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in energyTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="时间范围" prop="timeRange">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.timeRange"
|
||||||
|
type="datetimerange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
range-separator="~"
|
||||||
|
:default-time="[new Date('2000-01-01 00:00:00'), new Date('2000-01-01 23:59:59')]"
|
||||||
|
class="!w-420px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">
|
||||||
|
<Icon icon="ep:search" class="mr-5px" />
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery">
|
||||||
|
<Icon icon="ep:refresh" class="mr-5px" />
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
<el-button type="success" plain @click="handleExport">
|
||||||
|
<Icon icon="ep:download" class="mr-5px" />
|
||||||
|
导出
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<template v-if="hasEnergyTypes">
|
||||||
|
<div class="metric-grid">
|
||||||
|
<div v-for="item in metricCards" :key="item.key" class="metric-card">
|
||||||
|
<div class="metric-icon" :class="item.theme">
|
||||||
|
<Icon :icon="item.icon" />
|
||||||
|
</div>
|
||||||
|
<div class="metric-content">
|
||||||
|
<div class="metric-label">{{ item.label }}</div>
|
||||||
|
<div class="metric-value">
|
||||||
|
{{ item.value }}
|
||||||
|
<span class="metric-unit">{{ item.unit }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-sub">
|
||||||
|
<span>{{ item.subLabel }}</span>
|
||||||
|
<span v-if="item.change" class="metric-change" :class="{ down: item.down }">
|
||||||
|
<Icon :icon="item.down ? 'ep:bottom' : 'ep:top'" />
|
||||||
|
{{ item.change }}
|
||||||
|
</span>
|
||||||
|
<span v-else>{{ item.subValue }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-row :gutter="12" class="chart-row">
|
||||||
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||||
|
<ContentWrap class="overview-panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<div class="panel-title">
|
||||||
|
能源用量趋势
|
||||||
|
<Icon icon="ep:info-filled" class="panel-info" />
|
||||||
|
</div>
|
||||||
|
<div class="panel-actions">
|
||||||
|
<el-button text type="primary">
|
||||||
|
<Icon icon="ep:trend-charts" />
|
||||||
|
</el-button>
|
||||||
|
<el-button text type="primary">
|
||||||
|
<Icon icon="ep:download" />
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Echart :height="300" :options="trendChartOptions" />
|
||||||
|
</ContentWrap>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||||
|
<ContentWrap class="overview-panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<div class="panel-title">
|
||||||
|
区域能耗占比
|
||||||
|
<Icon icon="ep:info-filled" class="panel-info" />
|
||||||
|
</div>
|
||||||
|
<div class="panel-actions">
|
||||||
|
<el-button text type="primary">
|
||||||
|
<Icon icon="ep:pie-chart" />
|
||||||
|
</el-button>
|
||||||
|
<el-button text type="primary">
|
||||||
|
<Icon icon="ep:download" />
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Echart :height="300" :options="regionPieOptions" />
|
||||||
|
</ContentWrap>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="12" class="detail-row">
|
||||||
|
<el-col :xl="7" :lg="8" :md="24" :sm="24" :xs="24">
|
||||||
|
<ContentWrap class="overview-panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<div class="panel-title">
|
||||||
|
能耗排行 TOP5
|
||||||
|
<Icon icon="ep:info-filled" class="panel-info" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-table :data="rankList" :stripe="true" :show-overflow-tooltip="true">
|
||||||
|
<el-table-column label="排名" align="center" width="70">
|
||||||
|
<template #default="scope">
|
||||||
|
<span class="rank-index" :class="`rank-${scope.$index + 1}`">{{ scope.$index + 1 }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="名称" prop="name" min-width="150" />
|
||||||
|
<el-table-column label="所属区域" prop="region" width="110" />
|
||||||
|
<el-table-column :label="`用量 (${selectedEnergyUnit})`" prop="value" align="right" width="120" />
|
||||||
|
</el-table>
|
||||||
|
</ContentWrap>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xl="17" :lg="16" :md="24" :sm="24" :xs="24">
|
||||||
|
<ContentWrap class="overview-panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<div class="panel-title">
|
||||||
|
能源明细表
|
||||||
|
<Icon icon="ep:info-filled" class="panel-info" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-table v-loading="loading" :data="pageDetailList" :stripe="true" :show-overflow-tooltip="true">
|
||||||
|
<el-table-column label="表名称" prop="name" min-width="170" />
|
||||||
|
<el-table-column label="能源类型" prop="energyType" align="center" width="100" />
|
||||||
|
<el-table-column label="所属区域" prop="region" align="center" width="120" />
|
||||||
|
<el-table-column :label="`能源用量 (${selectedEnergyUnit})`" prop="value" align="right" width="150" />
|
||||||
|
<el-table-column label="开始时间" prop="startTime" align="center" width="180" />
|
||||||
|
<el-table-column label="结束时间" prop="endTime" align="center" width="180" />
|
||||||
|
</el-table>
|
||||||
|
<Pagination
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<ContentWrap v-else class="empty-panel">
|
||||||
|
<el-empty description="请先配置能源类型" :image-size="120" />
|
||||||
|
</ContentWrap>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { EChartsOption } from 'echarts'
|
||||||
|
import { Echart } from '@/components/Echart'
|
||||||
|
import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype'
|
||||||
|
|
||||||
|
defineOptions({ name: 'EnergyOverview' })
|
||||||
|
|
||||||
|
interface MetricCard {
|
||||||
|
key: string
|
||||||
|
label: string
|
||||||
|
value: string
|
||||||
|
unit: string
|
||||||
|
icon: string
|
||||||
|
theme: string
|
||||||
|
subLabel: string
|
||||||
|
change?: string
|
||||||
|
down?: boolean
|
||||||
|
subValue?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DetailRow {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
energyType: string
|
||||||
|
region: string
|
||||||
|
value: string
|
||||||
|
startTime: string
|
||||||
|
endTime: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const message = useMessage()
|
||||||
|
|
||||||
|
const defaultTimeRange = ['2026-05-04 00:00:00', '2026-05-05 23:59:59']
|
||||||
|
const orgOptions = [
|
||||||
|
{ label: '成型系统', value: 1 },
|
||||||
|
{ label: '蛋托线01', value: 2 },
|
||||||
|
{ label: '烘干系统', value: 3 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const queryFormRef = ref()
|
||||||
|
const energyTypeOptions = ref<EnergyTypeVO[]>([])
|
||||||
|
const defaultEnergyTypeId = ref<number>()
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
orgId: undefined as number | undefined,
|
||||||
|
energyTypeId: undefined as number | undefined,
|
||||||
|
timeRange: [...defaultTimeRange]
|
||||||
|
})
|
||||||
|
|
||||||
|
const metricCards = ref<MetricCard[]>([])
|
||||||
|
const rankList = ref([
|
||||||
|
{ name: '蛋托成型柜用电量', region: '成型系统', value: '2,139.09' },
|
||||||
|
{ name: '蛋托线真空柜用电量', region: '蛋托线01', value: '0' },
|
||||||
|
{ name: '蛋托干燥柜用电量', region: '烘干系统', value: '0' },
|
||||||
|
{ name: '蛋托线其它用电量', region: '蛋托线01', value: '0' },
|
||||||
|
{ name: '烘干系统其它用电量', region: '烘干系统', value: '0' }
|
||||||
|
])
|
||||||
|
const detailList = ref<DetailRow[]>([])
|
||||||
|
const pageDetailList = ref<DetailRow[]>([])
|
||||||
|
const total = ref(0)
|
||||||
|
const hasEnergyTypes = computed(() => energyTypeOptions.value.length > 0)
|
||||||
|
const selectedEnergyType = computed(() =>
|
||||||
|
energyTypeOptions.value.find((item) => item.id === queryParams.energyTypeId)
|
||||||
|
)
|
||||||
|
const selectedEnergyName = computed(() => selectedEnergyType.value?.name || '电')
|
||||||
|
const selectedEnergyUnit = computed(() => selectedEnergyType.value?.unit || 'kWh')
|
||||||
|
const selectedUnitConsumptionUnit = computed(() => `${selectedEnergyUnit.value}/件`)
|
||||||
|
|
||||||
|
const hours = [
|
||||||
|
'00:00',
|
||||||
|
'01:00',
|
||||||
|
'02:00',
|
||||||
|
'03:00',
|
||||||
|
'04:00',
|
||||||
|
'05:00',
|
||||||
|
'06:00',
|
||||||
|
'07:00',
|
||||||
|
'08:00',
|
||||||
|
'09:00',
|
||||||
|
'10:00',
|
||||||
|
'11:00',
|
||||||
|
'12:00',
|
||||||
|
'13:00',
|
||||||
|
'14:00',
|
||||||
|
'15:00',
|
||||||
|
'16:00',
|
||||||
|
'17:00',
|
||||||
|
'18:00',
|
||||||
|
'19:00',
|
||||||
|
'20:00',
|
||||||
|
'21:00',
|
||||||
|
'22:00'
|
||||||
|
]
|
||||||
|
const trendData = [90, 80, 72, 75, 74, 85, 105, 116, 120, 112, 123, 127, 122, 146, 156.8, 147, 116, 94, 88, 102, 103, 116, 106]
|
||||||
|
const regionData = [
|
||||||
|
{ name: '成型系统', value: 2139.09 },
|
||||||
|
{ name: '蛋托线01', value: 0 },
|
||||||
|
{ name: '烘干系统', value: 0 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const trendChartOptions = reactive<EChartsOption>({
|
||||||
|
color: ['#2f7df6'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: (params: any) => {
|
||||||
|
const item = params?.[0]
|
||||||
|
return `${item.axisValue}<br />用电量：${item.data} kWh`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: 4,
|
||||||
|
data: ['用电量 (kWh)']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 24,
|
||||||
|
right: 24,
|
||||||
|
top: 46,
|
||||||
|
bottom: 32,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
name: '时间（小时）',
|
||||||
|
nameLocation: 'middle',
|
||||||
|
nameGap: 28,
|
||||||
|
data: hours,
|
||||||
|
axisLine: { lineStyle: { color: '#dcdfe6' } },
|
||||||
|
axisLabel: { color: '#606266' }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: 'kWh',
|
||||||
|
min: 0,
|
||||||
|
max: 180,
|
||||||
|
interval: 30,
|
||||||
|
axisLabel: { color: '#606266' },
|
||||||
|
splitLine: { lineStyle: { color: '#e8edf5' } }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '用电量 (kWh)',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 7,
|
||||||
|
lineStyle: { width: 3 },
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: 'rgba(47, 125, 246, 0.28)' },
|
||||||
|
{ offset: 1, color: 'rgba(47, 125, 246, 0.04)' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: trendData,
|
||||||
|
markPoint: {
|
||||||
|
symbolSize: 48,
|
||||||
|
label: { color: '#2f7df6', formatter: '{c}' },
|
||||||
|
data: [{ type: 'max', name: '峰值' }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}) as EChartsOption
|
||||||
|
|
||||||
|
const regionPieOptions = reactive<EChartsOption>({
|
||||||
|
color: ['#2f7df6', '#52c41a', '#faad14'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}<br />{c} kWh ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 24,
|
||||||
|
top: 'center',
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
formatter: (name: string) => {
|
||||||
|
const item = regionData.find((row) => row.name === name)
|
||||||
|
const value = item?.value ?? 0
|
||||||
|
const percent = value > 0 ? '100.00' : '0.00'
|
||||||
|
return `${name} ${value.toLocaleString()} kWh (${percent}%)`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '区域能耗',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['58%', '76%'],
|
||||||
|
center: ['34%', '50%'],
|
||||||
|
avoidLabelOverlap: true,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
formatter: '总用电量\n{total|2,139.09 kWh}',
|
||||||
|
color: '#303133',
|
||||||
|
rich: {
|
||||||
|
total: {
|
||||||
|
fontSize: 20,
|
||||||
|
lineHeight: 34,
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#17233d'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: { show: false },
|
||||||
|
data: regionData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}) as EChartsOption
|
||||||
|
|
||||||
|
const buildMetrics = () => {
|
||||||
|
metricCards.value = [
|
||||||
|
{
|
||||||
|
key: 'total',
|
||||||
|
label: '总用电量',
|
||||||
|
value: '2,139.09',
|
||||||
|
unit: selectedEnergyUnit.value,
|
||||||
|
icon: 'ep:lightning',
|
||||||
|
theme: 'blue',
|
||||||
|
subLabel: '较昨日',
|
||||||
|
change: '12.53%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'today',
|
||||||
|
label: '今日用电量',
|
||||||
|
value: '860.32',
|
||||||
|
unit: selectedEnergyUnit.value,
|
||||||
|
icon: 'ep:calendar',
|
||||||
|
theme: 'green',
|
||||||
|
subLabel: '较昨日',
|
||||||
|
change: '12.15%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'peak',
|
||||||
|
label: '峰值用电',
|
||||||
|
value: '156.8',
|
||||||
|
unit: selectedEnergyUnit.value,
|
||||||
|
icon: 'ep:histogram',
|
||||||
|
theme: 'purple',
|
||||||
|
subLabel: '时间：',
|
||||||
|
subValue: '2026-05-04 14:00 ~ 15:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'unit',
|
||||||
|
label: '单位产量能耗',
|
||||||
|
value: '0.38',
|
||||||
|
unit: selectedUnitConsumptionUnit.value,
|
||||||
|
icon: 'ep:orange',
|
||||||
|
theme: 'orange',
|
||||||
|
subLabel: '较昨日',
|
||||||
|
change: '5.21%',
|
||||||
|
down: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'region',
|
||||||
|
label: '最大耗能区域',
|
||||||
|
value: '成型系统',
|
||||||
|
unit: '',
|
||||||
|
icon: 'ep:pie-chart',
|
||||||
|
theme: 'cyan',
|
||||||
|
subLabel: '占比：',
|
||||||
|
subValue: '100.00%'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildDetails = () => {
|
||||||
|
const timeRange = queryParams.timeRange?.length === 2 ? queryParams.timeRange : defaultTimeRange
|
||||||
|
detailList.value = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '蛋托线真空柜用电量',
|
||||||
|
energyType: selectedEnergyName.value,
|
||||||
|
region: '蛋托线01',
|
||||||
|
value: '0',
|
||||||
|
startTime: timeRange[0],
|
||||||
|
endTime: timeRange[1]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '蛋托成型柜用电量',
|
||||||
|
energyType: selectedEnergyName.value,
|
||||||
|
region: '成型系统',
|
||||||
|
value: '2,139.09',
|
||||||
|
startTime: timeRange[0],
|
||||||
|
endTime: timeRange[1]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '蛋托干燥柜用电量',
|
||||||
|
energyType: selectedEnergyName.value,
|
||||||
|
region: '烘干系统',
|
||||||
|
value: '0',
|
||||||
|
startTime: timeRange[0],
|
||||||
|
endTime: timeRange[1]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
total.value = detailList.value.length
|
||||||
|
}
|
||||||
|
|
||||||
|
const getList = () => {
|
||||||
|
if (!hasEnergyTypes.value) {
|
||||||
|
metricCards.value = []
|
||||||
|
detailList.value = []
|
||||||
|
pageDetailList.value = []
|
||||||
|
total.value = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
buildMetrics()
|
||||||
|
buildDetails()
|
||||||
|
const start = (queryParams.pageNo - 1) * queryParams.pageSize
|
||||||
|
pageDetailList.value = detailList.value.slice(start, start + queryParams.pageSize)
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizeEnergyTypeList = (data: unknown): EnergyTypeVO[] => {
|
||||||
|
const maybeData = data as { data?: EnergyTypeVO[] }
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
return data as EnergyTypeVO[]
|
||||||
|
}
|
||||||
|
if (Array.isArray(maybeData?.data)) {
|
||||||
|
return maybeData.data
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDefaultEnergyType = (list: EnergyTypeVO[]) => {
|
||||||
|
return (
|
||||||
|
list.find((item) => item.name === '电') ||
|
||||||
|
list.find((item) => item.name === '水') ||
|
||||||
|
list.find((item) => item.name === '气') ||
|
||||||
|
list[0]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getEnergyTypes = async () => {
|
||||||
|
try {
|
||||||
|
const data = await EnergyTypeApi.getEnergyTypeList()
|
||||||
|
energyTypeOptions.value = normalizeEnergyTypeList(data)
|
||||||
|
} catch (error) {
|
||||||
|
energyTypeOptions.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultEnergyType = getDefaultEnergyType(energyTypeOptions.value)
|
||||||
|
defaultEnergyTypeId.value = defaultEnergyType?.id
|
||||||
|
queryParams.energyTypeId = defaultEnergyType?.id
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleQuery = () => {
|
||||||
|
if (!hasEnergyTypes.value) {
|
||||||
|
getList()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields()
|
||||||
|
queryParams.orgId = undefined
|
||||||
|
queryParams.energyTypeId = defaultEnergyTypeId.value
|
||||||
|
queryParams.timeRange = [...defaultTimeRange]
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExport = () => {
|
||||||
|
message.info('示例页暂未接入导出接口')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getEnergyTypes()
|
||||||
|
if (hasEnergyTypes.value) {
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.energy-overview-page {
|
||||||
|
.energy-overview-filter {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, minmax(180px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
display: flex;
|
||||||
|
min-height: 118px;
|
||||||
|
padding: 24px 22px;
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border: 1px solid var(--el-border-color-light);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-icon {
|
||||||
|
display: flex;
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
background: linear-gradient(135deg, #60a5fa, #2563eb);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
background: linear-gradient(135deg, #7ad957, #30b83f);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.purple {
|
||||||
|
background: linear-gradient(135deg, #a78bfa, #7c3aed);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.orange {
|
||||||
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cyan {
|
||||||
|
background: linear-gradient(135deg, #2dd4bf, #14b8a6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-content {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-unit {
|
||||||
|
margin-left: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-sub {
|
||||||
|
display: flex;
|
||||||
|
min-height: 22px;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-change {
|
||||||
|
display: inline-flex;
|
||||||
|
color: var(--el-color-danger);
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
|
||||||
|
&.down {
|
||||||
|
color: var(--el-color-success);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-row,
|
||||||
|
.detail-row {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-panel {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-panel {
|
||||||
|
display: flex;
|
||||||
|
min-height: 520px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
height: 32px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-info {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--el-color-primary-light-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-actions {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid var(--el-border-color-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-index {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #606266;
|
||||||
|
background: #eef1f6;
|
||||||
|
border-radius: 50%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&.rank-1 {
|
||||||
|
color: #fff;
|
||||||
|
background: #f5a400;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rank-2 {
|
||||||
|
color: #fff;
|
||||||
|
background: #aab2bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rank-3 {
|
||||||
|
color: #fff;
|
||||||
|
background: #d99458;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.metric-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.metric-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(160px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.metric-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue