From 5500238be35ba6ff70db033c9d2c392ba899e3d5 Mon Sep 17 00:00:00 2001
From: chiguyong <chiguyong@beyondsoft.com>
Date: Tue, 24 Mar 2026 00:34:43 +0800
Subject: [PATCH] feat: add energy monitoring frontend pages

---
 src/api/energy.ts                      |  93 ++++++
 src/router/index.ts                    |  18 ++
 src/views/Layout.vue                   |  11 +
 src/views/energy/ConsumptionRecord.vue | 417 +++++++++++++++++++++++++
 src/views/energy/EnergyStatistics.vue  | 352 +++++++++++++++++++++
 src/views/energy/MeterList.vue         | 380 ++++++++++++++++++++++
 6 files changed, 1271 insertions(+)
 create mode 100644 src/api/energy.ts
 create mode 100644 src/views/energy/ConsumptionRecord.vue
 create mode 100644 src/views/energy/EnergyStatistics.vue
 create mode 100644 src/views/energy/MeterList.vue

diff --git a/src/api/energy.ts b/src/api/energy.ts
new file mode 100644
index 00000000..6ed42e88
--- /dev/null
+++ b/src/api/energy.ts
@@ -0,0 +1,93 @@
+import request from '@/utils/request'
+
+export interface EnergyMeter {
+  id?: string
+  meterCode: string
+  meterName: string
+  energyType: string
+  installationLocation?: string
+  ratedCapacity?: number
+  unitPrice?: number
+  status?: string
+}
+
+export interface EnergyConsumption {
+  id?: string
+  meterId: string
+  consumptionDate: string
+  previousReading: number
+  currentReading: number
+  consumption: number
+  amount?: number
+  recordMethod?: string
+}
+
+export function getEnergyMeters(projectId: string, energyType?: string) {
+  return request({
+    url: '/api/v1/ops/energy-meters',
+    method: 'get',
+    params: { projectId, energyType }
+  })
+}
+
+export function getEnergyMeter(id: string) {
+  return request({
+    url: `/api/v1/ops/energy-meters/${id}`,
+    method: 'get'
+  })
+}
+
+export function createEnergyMeter(data: EnergyMeter) {
+  return request({
+    url: '/api/v1/ops/energy-meters',
+    method: 'post',
+    data
+  })
+}
+
+export function updateEnergyMeter(id: string, data: EnergyMeter) {
+  return request({
+    url: `/api/v1/ops/energy-meters/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+export function deleteEnergyMeter(id: string) {
+  return request({
+    url: `/api/v1/ops/energy-meters/${id}`,
+    method: 'delete'
+  })
+}
+
+export function recordEnergyConsumption(data: { meterId: string; currentReading: number; recordedBy?: string }) {
+  return request({
+    url: '/api/v1/ops/energy-consumption',
+    method: 'post',
+    data
+  })
+}
+
+export function getEnergyConsumption(meterId: string, startDate?: string, endDate?: string) {
+  return request({
+    url: `/api/v1/ops/energy-consumption/${meterId}`,
+    method: 'get',
+    params: { startDate, endDate }
+  })
+}
+
+export function getConsumptionByType(projectId: string, month: string) {
+  return request({
+    url: '/api/v1/ops/energy-statistics/by-type',
+    method: 'get',
+    params: { projectId, month }
+  })
+}
+
+export function getUnitConsumption(projectId: string, month: string) {
+  return request({
+    url: '/api/v1/ops/energy-statistics/unit-consumption',
+    method: 'get',
+    params: { projectId, month }
+  })
+}
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index c3ea0afa..c1545a89 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -92,6 +92,24 @@ const router = createRouter({
           name: 'MaintenanceTasks',
           component: () => import('@/views/maintenance/TaskList.vue'),
           meta: { title: '维保任务' }
+        },
+        {
+          path: 'energy/meters',
+          name: 'EnergyMeters',
+          component: () => import('@/views/energy/MeterList.vue'),
+          meta: { title: '计量点管理' }
+        },
+        {
+          path: 'energy/consumption',
+          name: 'EnergyConsumption',
+          component: () => import('@/views/energy/ConsumptionRecord.vue'),
+          meta: { title: '能耗录入' }
+        },
+        {
+          path: 'energy/statistics',
+          name: 'EnergyStatistics',
+          component: () => import('@/views/energy/EnergyStatistics.vue'),
+          meta: { title: '能耗统计' }
         }
       ]
     }
diff --git a/src/views/Layout.vue b/src/views/Layout.vue
index 18f6b88d..b3e84a78 100644
--- a/src/views/Layout.vue
+++ b/src/views/Layout.vue
@@ -10,6 +10,7 @@ import {
   TeamOutlined,
   AppstoreOutlined,
   BuildOutlined,
+  HeatMapOutlined,
   LogoutOutlined,
   AuditOutlined,
   SettingOutlined,
@@ -55,6 +56,16 @@ const menuItems: MenuProps['items'] = [
         key: '/maintenance/tasks',
         icon: () => h(ToolOutlined),
         label: '维保任务'
+      },
+      {
+        key: 'energy',
+        icon: () => h(HeatMapOutlined),
+        label: '能耗管理',
+        children: [
+          { key: '/energy/meters', label: '计量点管理' },
+          { key: '/energy/consumption', label: '能耗录入' },
+          { key: '/energy/statistics', label: '能耗统计' }
+        ]
       }
     ]
   },
diff --git a/src/views/energy/ConsumptionRecord.vue b/src/views/energy/ConsumptionRecord.vue
new file mode 100644
index 00000000..e44d9e5a
--- /dev/null
+++ b/src/views/energy/ConsumptionRecord.vue
@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Button, Select, Space, message, Card, Statistic, Row, Col, Table, DatePicker, InputNumber, Form } from 'ant-design-vue'
+import type { ColumnsType } from 'ant-design-vue/es/table'
+import { ReloadOutlined } from '@ant-design/icons-vue'
+import {
+  getEnergyMeters,
+  getEnergyMeter,
+  recordEnergyConsumption,
+  getEnergyConsumption,
+  type EnergyMeter,
+  type EnergyConsumption
+} from '@/api/energy'
+import { getProjectSelectorList } from '@/api/project'
+
+// 能源类型映射
+const energyTypeMap: Record<string, string> = {
+  ELECTRICITY: '电力',
+  WATER: '水',
+  GAS: '燃气',
+  CENTRAL_HEATING: '集中供热',
+  CENTRAL_COOLING: '集中供冷'
+}
+
+// 项目选择选项
+const projectOptions = ref<{ value: string; label: string }[]>([])
+
+// 计量点选项
+const meterOptions = ref<{ value: string; label: string; energyType: string }[]>([])
+
+// 查询参数
+const queryParams = reactive({
+  projectId: '',
+  meterId: ''
+})
+
+// 数据状态
+const loading = ref(false)
+const recordLoading = ref(false)
+const consumptionList = ref<EnergyConsumption[]>([])
+const selectedMeter = ref<EnergyMeter | null>(null)
+const lastRecord = ref<EnergyConsumption | null>(null)
+
+// 录入表单
+const formState = reactive({
+  meterId: '',
+  currentReading: undefined as number | undefined,
+  recordedBy: ''
+})
+
+// 计算消耗量和费用
+const calculatedConsumption = computed(() => {
+  if (!selectedMeter.value || formState.currentReading === undefined || lastRecord.value === null) {
+    return { consumption: 0, amount: 0 }
+  }
+  const consumption = formState.currentReading - lastRecord.value.currentReading
+  const amount = consumption * (selectedMeter.value.unitPrice || 0)
+  return { consumption: Math.max(0, consumption), amount }
+})
+
+// 表格列定义
+const columns: ColumnsType = [
+  { title: '记录日期', dataIndex: 'consumptionDate', key: 'consumptionDate', width: 120 },
+  { title: '上次读数', dataIndex: 'previousReading', key: 'previousReading', width: 120 },
+  { title: '当前读数', dataIndex: 'currentReading', key: 'currentReading', width: 120 },
+  { title: '消耗量', dataIndex: 'consumption', key: 'consumption', width: 100 },
+  { title: '费用(元)', dataIndex: 'amount', key: 'amount', width: 100 },
+  { title: '记录方式', dataIndex: 'recordMethod', key: 'recordMethod', width: 100 }
+]
+
+// 获取项目列表
+const fetchProjects = async () => {
+  try {
+    const res = await getProjectSelectorList()
+    projectOptions.value = (res.data.data || []).map((item: any) => ({
+      value: item.id,
+      label: item.name
+    }))
+  } catch {
+    message.error('获取项目列表失败')
+  }
+}
+
+// 获取计量点列表
+const fetchMeters = async () => {
+  if (!queryParams.projectId) {
+    meterOptions.value = []
+    return
+  }
+  try {
+    const res = await getEnergyMeters(queryParams.projectId)
+    const data = res.data.data
+    const meters: EnergyMeter[] = data.content || data || []
+    meterOptions.value = meters.map(m => ({
+      value: m.id!,
+      label: `${m.meterName} (${m.meterCode})`,
+      energyType: m.energyType
+    }))
+    queryParams.meterId = ''
+    selectedMeter.value = null
+    lastRecord.value = null
+    formState.currentReading = undefined
+  } catch {
+    message.error('获取计量点列表失败')
+  }
+}
+
+// 获取计量点详情和上条记录
+const fetchMeterDetail = async () => {
+  if (!queryParams.meterId) {
+    selectedMeter.value = null
+    lastRecord.value = null
+    return
+  }
+  try {
+    const meterRes = await getEnergyMeter(queryParams.meterId)
+    selectedMeter.value = meterRes.data.data
+
+    // 获取历史记录找最近一条
+    const historyRes = await getEnergyConsumption(queryParams.meterId)
+    const history = historyRes.data.data || []
+    if (history.length > 0) {
+      lastRecord.value = history[0]
+    } else {
+      lastRecord.value = null
+    }
+  } catch {
+    message.error('获取计量点详情失败')
+  }
+}
+
+// 获取历史记录
+const fetchHistory = async () => {
+  if (!queryParams.meterId) return
+  loading.value = true
+  try {
+    const res = await getEnergyConsumption(queryParams.meterId)
+    consumptionList.value = res.data.data || []
+  } catch {
+    message.error('获取能耗记录失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 选择项目
+const handleProjectChange = () => {
+  queryParams.meterId = ''
+  selectedMeter.value = null
+  lastRecord.value = null
+  formState.currentReading = undefined
+  consumptionList.value = []
+  fetchMeters()
+}
+
+// 选择计量点
+const handleMeterChange = () => {
+  fetchMeterDetail()
+  fetchHistory()
+}
+
+// 提交记录
+const handleSubmit = async () => {
+  if (!formState.meterId) {
+    message.warning('请选择计量点')
+    return
+  }
+  if (formState.currentReading === undefined) {
+    message.warning('请输入当前读数')
+    return
+  }
+  if (lastRecord.value && formState.currentReading < lastRecord.value.currentReading) {
+    message.warning('当前读数不能小于上次读数')
+    return
+  }
+  recordLoading.value = true
+  try {
+    await recordEnergyConsumption({
+      meterId: formState.meterId,
+      currentReading: formState.currentReading!,
+      recordedBy: formState.recordedBy
+    })
+    message.success('录入成功')
+    // 刷新数据
+    fetchMeterDetail()
+    fetchHistory()
+    formState.currentReading = undefined
+  } catch {
+    message.error('录入失败')
+  } finally {
+    recordLoading.value = false
+  }
+}
+
+// 重置
+const handleReset = () => {
+  queryParams.projectId = ''
+  queryParams.meterId = ''
+  selectedMeter.value = null
+  lastRecord.value = null
+  formState.currentReading = undefined
+  formState.recordedBy = ''
+  consumptionList.value = []
+  meterOptions.value = []
+}
+
+onMounted(() => {
+  fetchProjects()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">能耗录入</h2>
+    </div>
+
+    <Row :gutter="24">
+      <!-- 左侧：录入表单 -->
+      <Col :span="10">
+        <Card title="录入能耗数据" class="record-card">
+          <!-- 筛选区 -->
+          <div class="filter-section">
+            <Form layout="vertical">
+              <Form.Item label="选择项目">
+                <Select
+                  v-model:value="queryParams.projectId"
+                  placeholder="请选择项目"
+                  style="width: 100%"
+                  :options="projectOptions"
+                  @change="handleProjectChange"
+                />
+              </Form.Item>
+              <Form.Item label="选择计量点">
+                <Select
+                  v-model:value="queryParams.meterId"
+                  placeholder="请选择计量点"
+                  style="width: 100%"
+                  :options="meterOptions"
+                  @change="handleMeterChange"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+
+          <!-- 计量点信息 -->
+          <div v-if="selectedMeter" class="meter-info">
+            <Row :gutter="16">
+              <Col :span="12">
+                <Statistic title="能源类型" :value="energyTypeMap[selectedMeter.energyType] || selectedMeter.energyType" />
+              </Col>
+              <Col :span="12">
+                <Statistic title="单价" :value="selectedMeter.unitPrice || 0" suffix="元" :precision="2" />
+              </Col>
+            </Row>
+            <Row :gutter="16" style="margin-top: 16px">
+              <Col :span="12">
+                <Statistic title="额定容量" :value="selectedMeter.ratedCapacity || 0" suffix="kW" />
+              </Col>
+              <Col :span="12">
+                <Statistic title="安装位置" :value="selectedMeter.installationLocation || '-'" />
+              </Col>
+            </Row>
+          </div>
+
+          <!-- 上次记录 -->
+          <div v-if="lastRecord" class="last-record">
+            <h4>上次记录</h4>
+            <Row :gutter="16">
+              <Col :span="12">
+                <Statistic title="记录日期" :value="lastRecord.consumptionDate" />
+              </Col>
+              <Col :span="12">
+                <Statistic title="上次读数" :value="lastRecord.currentReading" />
+              </Col>
+            </Row>
+          </div>
+
+          <!-- 录入表单 -->
+          <div class="record-form">
+            <Form layout="vertical">
+              <Form.Item label="当前读数">
+                <InputNumber
+                  v-model:value="formState.currentReading"
+                  placeholder="请输入当前读数"
+                  style="width: 100%"
+                  :min="0"
+                  :precision="2"
+                />
+              </Form.Item>
+              <Form.Item label="记录人">
+                <Select
+                  v-model:value="formState.recordedBy"
+                  placeholder="请输入记录人"
+                  style="width: 100%"
+                  allow-clear
+                />
+              </Form.Item>
+            </Form>
+
+            <!-- 计算结果预览 -->
+            <div v-if="formState.currentReading !== undefined" class="calculation-preview">
+              <Row :gutter="16">
+                <Col :span="12">
+                  <Statistic title="消耗量" :value="calculatedConsumption.consumption" :precision="2" />
+                </Col>
+                <Col :span="12">
+                  <Statistic title="费用" :value="calculatedConsumption.amount" suffix="元" :precision="2" />
+                </Col>
+              </Row>
+            </div>
+
+            <Space style="width: 100%; justify-content: flex-end; margin-top: 16px">
+              <Button @click="handleReset">
+                <ReloadOutlined /> 重置
+              </Button>
+              <Button type="primary" :loading="recordLoading" @click="handleSubmit">
+                提交记录
+              </Button>
+            </Space>
+          </div>
+        </Card>
+      </Col>
+
+      <!-- 右侧：历史记录 -->
+      <Col :span="14">
+        <Card title="历史记录" class="history-card">
+          <a-table
+            :columns="columns"
+            :data-source="consumptionList"
+            :loading="loading"
+            :row-key="(record: EnergyConsumption) => record.id || record.consumptionDate"
+            :pagination="{
+              pageSize: 10,
+              showSizeChanger: true,
+              showTotal: (total: number) => `共 ${total} 条`
+            }"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'consumption'">
+                {{ record.consumption }} kWh
+              </template>
+              <template v-else-if="column.key === 'amount'">
+                {{ record.amount ? `¥${record.amount.toFixed(2)}` : '-' }}
+              </template>
+              <template v-else-if="column.key === 'recordMethod'">
+                {{ record.recordMethod === 'MANUAL' ? '手动录入' : '自动抄表' }}
+              </template>
+            </template>
+          </a-table>
+          <a-empty v-if="!queryParams.meterId" description="请先选择计量点" />
+        </Card>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.record-card,
+.history-card {
+  height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.filter-section {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.meter-info {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
+}
+
+.last-record {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  border-radius: 8px;
+}
+
+.last-record h4 {
+  margin: 0 0 16px 0;
+  color: #52c41a;
+}
+
+.record-form {
+  margin-top: 24px;
+}
+
+.calculation-preview {
+  margin-top: 16px;
+  padding: 16px;
+  background: #e6f7ff;
+  border: 1px solid #91d5ff;
+  border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/energy/EnergyStatistics.vue b/src/views/energy/EnergyStatistics.vue
new file mode 100644
index 00000000..6980c10d
--- /dev/null
+++ b/src/views/energy/EnergyStatistics.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Button, Select, Space, message, Row, Col, Card, Statistic, Table, DatePicker } from 'ant-design-vue'
+import type { ColumnsType } from 'ant-design-vue/es/table'
+import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
+import { getConsumptionByType, getUnitConsumption } from '@/api/energy'
+import { getProjectSelectorList } from '@/api/project'
+
+// 能源类型映射
+const energyTypeMap: Record<string, { color: string; text: string }> = {
+  ELECTRICITY: { color: '#faad14', text: '电力' },
+  WATER: { color: '#1890ff', text: '水' },
+  GAS: { color: '#fa541c', text: '燃气' },
+  CENTRAL_HEATING: { color: '#f5222d', text: '集中供热' },
+  CENTRAL_COOLING: { color: '#13c2c2', text: '集中供冷' }
+}
+
+// 项目选择选项
+const projectOptions = ref<{ value: string; label: string }[]>([])
+
+// 查询参数
+const queryParams = reactive({
+  projectId: '',
+  month: ''
+})
+
+// 数据状态
+const loading = ref(false)
+const byTypeData = ref<{ energyType: string; consumption: number; amount: number }[]>([])
+const unitData = ref<{ indicatorName: string; value: number; unit: string }[]>([])
+
+// 总计
+const totalConsumption = ref(0)
+const totalAmount = ref(0)
+
+// 表格列定义（分项统计）
+const byTypeColumns: ColumnsType = [
+  { title: '能源类型', dataIndex: 'energyType', key: 'energyType', width: 150 },
+  { title: '消耗量(kWh)', dataIndex: 'consumption', key: 'consumption', width: 150 },
+  { title: '费用(元)', dataIndex: 'amount', key: 'amount', width: 150 },
+  {
+    title: '占比',
+    key: 'percentage',
+    width: 150,
+    customRender: ({ record }: { record: { consumption: number } }) => {
+      const pct = totalConsumption.value > 0
+        ? ((record.consumption / totalConsumption.value) * 100).toFixed(1)
+        : '0.0'
+      return `${pct}%`
+    }
+  }
+]
+
+// 单方能耗列定义
+const unitColumns: ColumnsType = [
+  { title: '指标名称', dataIndex: 'indicatorName', key: 'indicatorName', width: 200 },
+  { title: '指标值', dataIndex: 'value', key: 'value', width: 150 },
+  { title: '单位', dataIndex: 'unit', key: 'unit', width: 100 }
+]
+
+// 获取项目列表
+const fetchProjects = async () => {
+  try {
+    const res = await getProjectSelectorList()
+    projectOptions.value = (res.data.data || []).map((item: any) => ({
+      value: item.id,
+      label: item.name
+    }))
+  } catch {
+    message.error('获取项目列表失败')
+  }
+}
+
+// 获取月度格式化
+const getCurrentMonth = () => {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  return `${year}-${month}`
+}
+
+// 获取分项统计数据
+const fetchByTypeData = async () => {
+  if (!queryParams.projectId || !queryParams.month) return
+  loading.value = true
+  try {
+    const res = await getConsumptionByType(queryParams.projectId, queryParams.month)
+    byTypeData.value = res.data.data || []
+    // 计算总计
+    totalConsumption.value = byTypeData.value.reduce((sum, item) => sum + item.consumption, 0)
+    totalAmount.value = byTypeData.value.reduce((sum, item) => sum + item.amount, 0)
+  } catch {
+    message.error('获取分项统计数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取单方能耗数据
+const fetchUnitData = async () => {
+  if (!queryParams.projectId || !queryParams.month) return
+  try {
+    const res = await getUnitConsumption(queryParams.projectId, queryParams.month)
+    unitData.value = res.data.data || []
+  } catch {
+    message.error('获取单方能耗数据失败')
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  if (!queryParams.projectId) {
+    message.warning('请先选择项目')
+    return
+  }
+  if (!queryParams.month) {
+    message.warning('请选择月份')
+    return
+  }
+  fetchByTypeData()
+  fetchUnitData()
+}
+
+// 重置
+const handleReset = () => {
+  queryParams.projectId = ''
+  queryParams.month = ''
+  byTypeData.value = []
+  unitData.value = []
+  totalConsumption.value = 0
+  totalAmount.value = 0
+}
+
+// 获取能源类型标签
+const getEnergyTypeTag = (type: string) => {
+  return energyTypeMap[type] || { color: 'default', text: type }
+}
+
+onMounted(() => {
+  fetchProjects()
+  queryParams.month = getCurrentMonth()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">能耗统计</h2>
+    </div>
+
+    <!-- 筛选区 -->
+    <div class="filter-bar">
+      <Space>
+        <Select
+          v-model:value="queryParams.projectId"
+          placeholder="请选择项目"
+          style="width: 240px"
+          allow-clear
+          :options="projectOptions"
+        />
+        <DatePicker
+          v-model:value="queryParams.month"
+          picker="month"
+          placeholder="选择月份"
+          style="width: 140px"
+          :format="(value: any) => value ? value.format('YYYY-MM') : ''"
+        />
+        <Button type="primary" @click="handleSearch">
+          <SearchOutlined /> 查询
+        </Button>
+        <Button @click="handleReset">
+          <ReloadOutlined /> 重置
+        </Button>
+      </Space>
+    </div>
+
+    <!-- 统计卡片 -->
+    <Row :gutter="16" style="margin-bottom: 24px">
+      <Col :span="6">
+        <Card>
+          <Statistic
+            title="月度总消耗"
+            :value="totalConsumption"
+            suffix="kWh"
+            :precision="2"
+          />
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card>
+          <Statistic
+            title="月度总费用"
+            :value="totalAmount"
+            prefix="¥"
+            :precision="2"
+          />
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card>
+          <Statistic
+            title="计量点数量"
+            :value="byTypeData.length"
+          />
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card>
+          <Statistic
+            title="统计月份"
+            :value="queryParams.month || '-'"
+          />
+        </Card>
+      </Col>
+    </Row>
+
+    <!-- 分项统计饼图区域 -->
+    <Row :gutter="24" style="margin-bottom: 24px">
+      <Col :span="24">
+        <Card title="分项能耗构成">
+          <!-- 简单饼图实现 -->
+          <div class="pie-container">
+            <div class="pie-chart">
+              <div
+                v-for="(item, index) in byTypeData"
+                :key="item.energyType"
+                class="pie-segment"
+                :style="{
+                  '--percentage': `${(item.consumption / totalConsumption) * 100 || 0}%`,
+                  '--color': getEnergyTypeTag(item.energyType).color,
+                  '--index': index
+                }"
+              >
+                <div class="pie-label">
+                  <span class="pie-color" :style="{ background: getEnergyTypeTag(item.energyType).color }"></span>
+                  <span class="pie-text">{{ getEnergyTypeTag(item.energyType).text }}</span>
+                  <span class="pie-value">{{ ((item.consumption / totalConsumption) * 100 || 0).toFixed(1) }}%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+    </Row>
+
+    <Row :gutter="24">
+      <!-- 分项能耗表格 -->
+      <Col :span="12">
+        <Card title="分项能耗明细">
+          <a-table
+            :columns="byTypeColumns"
+            :data-source="byTypeData"
+            :loading="loading"
+            :row-key="(record: any) => record.energyType"
+            :pagination="false"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'energyType'">
+                <span :style="{ color: getEnergyTypeTag(record.energyType).color }">
+                  {{ getEnergyTypeTag(record.energyType).text }}
+                </span>
+              </template>
+            </template>
+          </a-table>
+          <a-empty v-if="!queryParams.projectId || byTypeData.length === 0" description="请先选择项目和月份进行查询" />
+        </Card>
+      </Col>
+
+      <!-- 单方能耗指标 -->
+      <Col :span="12">
+        <Card title="单方能耗指标">
+          <a-table
+            :columns="unitColumns"
+            :data-source="unitData"
+            :loading="loading"
+            :row-key="(record: any) => record.indicatorName"
+            :pagination="false"
+          />
+          <a-empty v-if="!queryParams.projectId || unitData.length === 0" description="请先选择项目和月份进行查询" />
+        </Card>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.filter-bar {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
+}
+
+/* 简单饼图样式 */
+.pie-container {
+  padding: 20px 0;
+}
+
+.pie-chart {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+}
+
+.pie-segment {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-left: 4px solid var(--color);
+  background: #fafafa;
+  border-radius: 4px;
+  min-width: 200px;
+}
+
+.pie-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pie-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.pie-text {
+  font-weight: 500;
+  color: #262626;
+}
+
+.pie-value {
+  color: #8c8c8c;
+  margin-left: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/energy/MeterList.vue b/src/views/energy/MeterList.vue
new file mode 100644
index 00000000..c61c3f47
--- /dev/null
+++ b/src/views/energy/MeterList.vue
@@ -0,0 +1,380 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { Button, Select, Space, message, Tag, Modal, Form, Input, InputNumber, Popconfirm } from 'ant-design-vue'
+import type { ColumnsType } from 'ant-design-vue/es/table'
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  PlusOutlined
+} from '@ant-design/icons-vue'
+import {
+  getEnergyMeters,
+  createEnergyMeter,
+  updateEnergyMeter,
+  deleteEnergyMeter,
+  type EnergyMeter
+} from '@/api/energy'
+import { getProjectSelectorList } from '@/api/project'
+import { TableActions, Pagination } from '@/components'
+
+// 能源类型映射
+const energyTypeMap: Record<string, { color: string; text: string }> = {
+  ELECTRICITY: { color: 'gold', text: '电力' },
+  WATER: { color: 'blue', text: '水' },
+  GAS: { color: 'orange', text: '燃气' },
+  CENTRAL_HEATING: { color: 'red', text: '集中供热' },
+  CENTRAL_COOLING: { color: 'cyan', text: '集中供冷' }
+}
+
+// 表格列定义
+const columns: ColumnsType = [
+  { title: '计量点编码', dataIndex: 'meterCode', key: 'meterCode', width: 150 },
+  { title: '计量点名称', dataIndex: 'meterName', key: 'meterName', width: 180 },
+  { title: '能源类型', dataIndex: 'energyType', key: 'energyType', width: 100 },
+  { title: '安装位置', dataIndex: 'installationLocation', key: 'installationLocation', width: 150 },
+  { title: '额定容量', dataIndex: 'ratedCapacity', key: 'ratedCapacity', width: 100 },
+  { title: '单价(元)', dataIndex: 'unitPrice', key: 'unitPrice', width: 100 },
+  { title: '状态', dataIndex: 'status', key: 'status', width: 80 },
+  { title: '操作', key: 'action', width: 120, fixed: 'right' as const }
+]
+
+// 项目选择选项
+const projectOptions = ref<{ value: string; label: string }[]>([])
+
+// 能源类型选项
+const energyTypeOptions = [
+  { value: 'ELECTRICITY', label: '电力' },
+  { value: 'WATER', label: '水' },
+  { value: 'GAS', label: '燃气' },
+  { value: 'CENTRAL_HEATING', label: '集中供热' },
+  { value: 'CENTRAL_COOLING', label: '集中供冷' }
+]
+
+// 查询参数
+const queryParams = reactive({
+  projectId: '',
+  energyType: undefined as string | undefined
+})
+
+// 数据状态
+const loading = ref(false)
+const tableData = ref<EnergyMeter[]>([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 新建/编辑 Modal
+const modalVisible = ref(false)
+const modalTitle = ref('新建计量点')
+const modalLoading = ref(false)
+const editingRecord = ref<EnergyMeter | null>(null)
+const formState = reactive<EnergyMeter>({
+  meterCode: '',
+  meterName: '',
+  energyType: 'ELECTRICITY',
+  installationLocation: '',
+  ratedCapacity: undefined,
+  unitPrice: undefined,
+  status: 'ACTIVE'
+})
+
+// 表单验证
+const rules = {
+  meterCode: [{ required: true, message: '请输入计量点编码' }],
+  meterName: [{ required: true, message: '请输入计量点名称' }],
+  energyType: [{ required: true, message: '请选择能源类型' }]
+}
+
+// 获取项目列表
+const fetchProjects = async () => {
+  try {
+    const res = await getProjectSelectorList()
+    projectOptions.value = (res.data.data || []).map((item: any) => ({
+      value: item.id,
+      label: item.name
+    }))
+  } catch {
+    message.error('获取项目列表失败')
+  }
+}
+
+// 获取计量点列表
+const fetchMeterList = async () => {
+  if (!queryParams.projectId) {
+    message.warning('请先选择项目')
+    return
+  }
+  loading.value = true
+  try {
+    const res = await getEnergyMeters(queryParams.projectId, queryParams.energyType)
+    const data = res.data.data
+    tableData.value = data.content || data || []
+    pagination.total = data.totalElements || (Array.isArray(data) ? data.length : 0)
+  } catch {
+    message.error('获取计量点列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  fetchMeterList()
+}
+
+// 重置
+const handleReset = () => {
+  queryParams.projectId = ''
+  queryParams.energyType = undefined
+  pagination.current = 1
+  tableData.value = []
+}
+
+// 分页变化
+const handlePageChange = (page: number, pageSize: number) => {
+  pagination.current = page
+  pagination.pageSize = pageSize
+  fetchMeterList()
+}
+
+// 打开新建 Modal
+const handleAdd = () => {
+  editingRecord.value = null
+  modalTitle.value = '新建计量点'
+  Object.assign(formState, {
+    id: undefined,
+    meterCode: '',
+    meterName: '',
+    energyType: 'ELECTRICITY',
+    installationLocation: '',
+    ratedCapacity: undefined,
+    unitPrice: undefined,
+    status: 'ACTIVE'
+  })
+  modalVisible.value = true
+}
+
+// 打开编辑 Modal
+const handleEdit = (record: EnergyMeter) => {
+  editingRecord.value = record
+  modalTitle.value = '编辑计量点'
+  Object.assign(formState, {
+    id: record.id,
+    meterCode: record.meterCode,
+    meterName: record.meterName,
+    energyType: record.energyType,
+    installationLocation: record.installationLocation || '',
+    ratedCapacity: record.ratedCapacity,
+    unitPrice: record.unitPrice,
+    status: record.status || 'ACTIVE'
+  })
+  modalVisible.value = true
+}
+
+// 删除计量点
+const handleDelete = async (id: string) => {
+  try {
+    await deleteEnergyMeter(id)
+    message.success('删除成功')
+    fetchMeterList()
+  } catch {
+    message.error('删除失败')
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  modalLoading.value = true
+  try {
+    if (editingRecord.value) {
+      await updateEnergyMeter(editingRecord.value.id!, formState)
+      message.success('更新成功')
+    } else {
+      await createEnergyMeter({ ...formState, status: 'ACTIVE' } as EnergyMeter)
+      message.success('创建成功')
+    }
+    modalVisible.value = false
+    fetchMeterList()
+  } catch {
+    message.error(editingRecord.value ? '更新失败' : '创建失败')
+  } finally {
+    modalLoading.value = false
+  }
+}
+
+// 获取能源类型标签
+const getEnergyTypeTag = (type: string) => {
+  const config = energyTypeMap[type] || { color: 'default', text: type }
+  return config
+}
+
+onMounted(() => {
+  fetchProjects()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">计量点管理</h2>
+    </div>
+
+    <!-- 筛选区 -->
+    <div class="filter-bar">
+      <Space>
+        <Select
+          v-model:value="queryParams.projectId"
+          placeholder="请选择项目"
+          style="width: 240px"
+          allow-clear
+          :options="projectOptions"
+        />
+        <Select
+          v-model:value="queryParams.energyType"
+          placeholder="能源类型"
+          style="width: 140px"
+          allow-clear
+          :options="energyTypeOptions"
+        />
+        <Button type="primary" @click="handleSearch">
+          <SearchOutlined /> 查询
+        </Button>
+        <Button @click="handleReset">
+          <ReloadOutlined /> 重置
+        </Button>
+      </Space>
+    </div>
+
+    <!-- 表格区 -->
+    <div class="table-card">
+      <div class="table-toolbar">
+        <Button type="primary" @click="handleAdd">
+          <PlusOutlined /> 新建计量点
+        </Button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="tableData"
+        :loading="loading"
+        :row-key="(record: EnergyMeter) => record.id || record.meterCode"
+        :pagination="{
+          current: pagination.current,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          showTotal: (total: number) => `共 ${total} 条`
+        }"
+        @change="(pag: any) => handlePageChange(pag.current, pag.pageSize)"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'energyType'">
+            <Tag :color="getEnergyTypeTag(record.energyType).color">
+              {{ getEnergyTypeTag(record.energyType).text }}
+            </Tag>
+          </template>
+          <template v-else-if="column.key === 'ratedCapacity'">
+            {{ record.ratedCapacity ? `${record.ratedCapacity} kW` : '-' }}
+          </template>
+          <template v-else-if="column.key === 'unitPrice'">
+            {{ record.unitPrice ? `¥${record.unitPrice}` : '-' }}
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <Tag :color="record.status === 'ACTIVE' ? 'green' : 'red'">
+              {{ record.status === 'ACTIVE' ? '启用' : '停用' }}
+            </Tag>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <Space>
+              <Button type="link" size="small" @click="handleEdit(record)">编辑</Button>
+              <Popconfirm title="确定删除该计量点?" @confirm="handleDelete(record.id!)">
+                <Button type="link" size="small" danger>删除</Button>
+              </Popconfirm>
+            </Space>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 未选择项目提示 -->
+      <a-empty v-if="!queryParams.projectId && tableData.length === 0" description="请先选择项目" />
+    </div>
+
+    <!-- 新建/编辑 Modal -->
+    <Modal
+      v-model:open="modalVisible"
+      :title="modalTitle"
+      :confirm-loading="modalLoading"
+      @ok="handleSubmit"
+      @cancel="modalVisible = false"
+      width="560px"
+    >
+      <Form
+        :model="formState"
+        :rules="rules"
+        layout="vertical"
+        class="meter-form"
+      >
+        <Form.Item label="计量点编码" name="meterCode">
+          <Input v-model:value="formState.meterCode" placeholder="请输入计量点编码" />
+        </Form.Item>
+        <Form.Item label="计量点名称" name="meterName">
+          <Input v-model:value="formState.meterName" placeholder="请输入计量点名称" />
+        </Form.Item>
+        <Form.Item label="能源类型" name="energyType">
+          <Select v-model:value="formState.energyType" :options="energyTypeOptions" />
+        </Form.Item>
+        <Form.Item label="安装位置" name="installationLocation">
+          <Input v-model:value="formState.installationLocation" placeholder="请输入安装位置" />
+        </Form.Item>
+        <Form.Item label="额定容量(kW)" name="ratedCapacity">
+          <InputNumber v-model:value="formState.ratedCapacity" placeholder="请输入额定容量" style="width: 100%" />
+        </Form.Item>
+        <Form.Item label="单价(元)" name="unitPrice">
+          <InputNumber v-model:value="formState.unitPrice" placeholder="请输入单价" style="width: 100%" :precision="2" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.filter-bar {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.table-toolbar {
+  margin-bottom: 16px;
+}
+
+.meter-form {
+  margin-top: 16px;
+}
+</style>
\ No newline at end of file