From 1aad86f8cb9d6c0f0d40e15181785d2cdb251973 Mon Sep 17 00:00:00 2001
From: ck-chenkang <bettermanchenkang@163.com>
Date: Wed, 6 May 2026 11:10:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=83=BD=E8=80=97=E6=A6=82?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mes/energyOverview/index.vue | 770 +++++++++++++++++++++++++
 1 file changed, 770 insertions(+)
 create mode 100644 src/views/mes/energyOverview/index.vue

diff --git a/src/views/mes/energyOverview/index.vue b/src/views/mes/energyOverview/index.vue
new file mode 100644
index 00000000..ea7d7c2f
--- /dev/null
+++ b/src/views/mes/energyOverview/index.vue
@@ -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>