commit
7e206e0de1
@ -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