From 48b391a208344eba163525851e6c0d045a84ab9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?=
 <14103883+leaf-phos@user.noreply.gitee.com>
Date: Sat, 4 Jan 2025 18:05:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ss/billEleRecord.js                   |  44 +++
 src/utils/filter.js                           |  10 +
 src/utils/mixins.js                           |   2 +-
 src/views/ss/billEleRecord/index.vue          | 363 ++++++++++++++++++
 .../device/components/DeviceActions.vue       |  55 +++
 .../device/components/DeviceInfoCard.vue      |  67 ++++
 .../device/components/DeviceOverview.vue      | 101 +++++
 .../device/components/DeviceOwnerCard.vue     |  88 +++++
 .../device/components/DeviceStatusCard.vue    |  73 ++++
 src/views/system/recharge/detail.vue          |   6 +-
 10 files changed, 807 insertions(+), 2 deletions(-)
 create mode 100644 src/api/ss/billEleRecord.js
 create mode 100644 src/views/ss/billEleRecord/index.vue
 create mode 100644 src/views/system/device/components/DeviceActions.vue
 create mode 100644 src/views/system/device/components/DeviceInfoCard.vue
 create mode 100644 src/views/system/device/components/DeviceOverview.vue
 create mode 100644 src/views/system/device/components/DeviceOwnerCard.vue
 create mode 100644 src/views/system/device/components/DeviceStatusCard.vue

diff --git a/src/api/ss/billEleRecord.js b/src/api/ss/billEleRecord.js
new file mode 100644
index 0000000..4943fff
--- /dev/null
+++ b/src/api/ss/billEleRecord.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询订单电量记录列表
+export function listBillEleRecord(query) {
+  return request({
+    url: '/ss/billEleRecord/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询订单电量记录详细
+export function getBillEleRecord(id) {
+  return request({
+    url: '/ss/billEleRecord/' + id,
+    method: 'get'
+  })
+}
+
+// 新增订单电量记录
+export function addBillEleRecord(data) {
+  return request({
+    url: '/ss/billEleRecord',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改订单电量记录
+export function updateBillEleRecord(data) {
+  return request({
+    url: '/ss/billEleRecord',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除订单电量记录
+export function delBillEleRecord(id) {
+  return request({
+    url: '/ss/billEleRecord/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/utils/filter.js b/src/utils/filter.js
index 27d63b7..092d6f4 100644
--- a/src/utils/filter.js
+++ b/src/utils/filter.js
@@ -12,9 +12,19 @@ const filters = {
     }
     return num.toFixed(3);
   },
+  fix2(num) {
+    if (num == null) {
+      return num;
+    }
+    return num.toFixed(2);
+  },
   // 缺省值
   defaultValue(data) {
     return data == null ? '--' : data;
+  },
+  // 缺省值
+  dv(data) {
+    return filters.defaultValue(data);
   }
 }
 export default (vm) => {
diff --git a/src/utils/mixins.js b/src/utils/mixins.js
index a699b1b..7f7048e 100644
--- a/src/utils/mixins.js
+++ b/src/utils/mixins.js
@@ -184,7 +184,7 @@ export const $recharge = {
     },
     canRefund() {
       return (row) => {
-        return row.status === '2';
+        return ['2', '3'].includes(row.status);
       }
     },
     canClose() {
diff --git a/src/views/ss/billEleRecord/index.vue b/src/views/ss/billEleRecord/index.vue
new file mode 100644
index 0000000..e8beb8f
--- /dev/null
+++ b/src/views/ss/billEleRecord/index.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="订单编号" prop="billNo">
+        <el-input
+          v-model="queryParams.billNo"
+          placeholder="请输入订单编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['ss:billEleRecord:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['ss:billEleRecord:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['ss:billEleRecord:remove']"
+        >删除</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['ss:billEleRecord:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="billEleRecordList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="['totalEle', 'usedEle'].includes(column.key)">
+              {{d.row[column.key] | fix2 | dv}} 度
+            </template>
+            <template v-else-if="['price', 'totalPrice'].includes(column.key)">
+              {{d.row[column.key] | fix2 | dv}} 元
+            </template>
+            <template v-else-if="column.key === 'time'">
+              起始:{{d.row.timeStart | dv}}<br/>
+              结束:{{d.row.timeEnd | dv}}
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['ss:billEleRecord:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['ss:billEleRecord:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改订单电量记录对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="订单ID" prop="billId">
+          <el-input v-model="form.billId" placeholder="请输入订单ID" />
+        </el-form-item>
+        <el-form-item label="记录时的总用电量(度)" prop="totalEle">
+          <el-input v-model="form.totalEle" placeholder="请输入记录时的总用电量(度)" />
+        </el-form-item>
+        <el-form-item label="当前时间段用电量(度)" prop="usedEle">
+          <el-input v-model="form.usedEle" placeholder="请输入当前时间段用电量(度)" />
+        </el-form-item>
+        <el-form-item label="当前时间段电价(元/度)" prop="price">
+          <el-input v-model="form.price" placeholder="请输入当前时间段电价(元/度)" />
+        </el-form-item>
+        <el-form-item label="当前时间段总电价(元)" prop="totalPrice">
+          <el-input v-model="form.totalPrice" placeholder="请输入当前时间段总电价(元)" />
+        </el-form-item>
+        <el-form-item label="记录时间段(起始)" prop="timeStart">
+          <el-date-picker clearable
+            v-model="form.timeStart"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择记录时间段(起始)">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="记录时间段(结束)" prop="timeEnd">
+          <el-date-picker clearable
+            v-model="form.timeEnd"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择记录时间段(结束)">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listBillEleRecord, getBillEleRecord, delBillEleRecord, addBillEleRecord, updateBillEleRecord } from "@/api/ss/billEleRecord";
+import { $showColumns } from '@/utils/mixins';
+
+// 默认排序字段
+const defaultSort = {
+  prop: "createTime",
+  order: "descending"
+}
+
+export default {
+  name: "BillEleRecord",
+  mixins: [$showColumns],
+  props: {
+    query: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      // 字段列表
+      columns: [
+        {key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'billNo', visible: true, label: '订单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'totalEle', visible: true, label: '抄表电量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'usedEle', visible: true, label: '用电量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'price', visible: true, label: '电价', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'totalPrice', visible: true, label: '总价', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'time', visible: true, label: '记录时间段', minWidth: null, sortable: false, overflow: false, align: 'center', width: "200"},
+        {key: 'recordTime', visible: true, label: '记录时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
+
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 订单电量记录表格数据
+      billEleRecordList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        billId: [
+          { required: true, message: "订单ID不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.queryParams = {
+      ...this.queryParams,
+      ...this.query
+    }
+
+    this.getList();
+  },
+  methods: {
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询订单电量记录列表 */
+    getList() {
+      this.loading = true;
+      listBillEleRecord(this.queryParams).then(response => {
+        this.billEleRecordList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        billId: null,
+        totalEle: null,
+        usedEle: null,
+        price: null,
+        totalPrice: null,
+        createTime: null,
+        timeStart: null,
+        timeEnd: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加订单电量记录";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getBillEleRecord(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改订单电量记录";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateBillEleRecord(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addBillEleRecord(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除订单电量记录编号为"' + ids + '"的数据项？').then(function() {
+        return delBillEleRecord(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ss/billEleRecord/export', {
+        ...this.queryParams
+      }, `billEleRecord_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/src/views/system/device/components/DeviceActions.vue b/src/views/system/device/components/DeviceActions.vue
new file mode 100644
index 0000000..483e680
--- /dev/null
+++ b/src/views/system/device/components/DeviceActions.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="device-actions">
+    <el-button-group>
+      <el-button size="small" type="primary" plain icon="el-icon-plus" @click="$emit('add-time')">
+        增加时长
+      </el-button>
+      <el-button 
+        size="small" 
+        type="primary" 
+        plain 
+        icon="el-icon-plus"
+        v-if="showAddEle"
+        @click="$emit('add-ele')">
+        增加电量
+      </el-button>
+    </el-button-group>
+    
+    <el-dropdown trigger="click" @command="handleCommand">
+      <el-button size="small" type="primary" plain>
+        更多操作<i class="el-icon-arrow-down el-icon--right"></i>
+      </el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="reset">时长归零</el-dropdown-item>
+        <el-dropdown-item command="resetEle" v-if="showAddEle">电量归零</el-dropdown-item>
+        <el-dropdown-item command="switch">
+          {{isOpen ? '强制关闭' : '强制开启'}}
+        </el-dropdown-item>
+        <el-dropdown-item command="refresh">刷新设备</el-dropdown-item>
+        <el-dropdown-item command="qrcode">设备二维码</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceActions',
+  props: {
+    isOpen: Boolean,
+    showAddEle: Boolean
+  },
+  methods: {
+    handleCommand(command) {
+      this.$emit(command)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device-actions {
+  display: flex;
+  gap: 8px;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/system/device/components/DeviceInfoCard.vue b/src/views/system/device/components/DeviceInfoCard.vue
new file mode 100644
index 0000000..1d8971d
--- /dev/null
+++ b/src/views/system/device/components/DeviceInfoCard.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-card class="device-info" shadow="hover">
+    <template #header>
+      <div class="card-header">
+        <span>设备信息</span>
+      </div>
+    </template>
+    <el-descriptions :column="3" border>
+      <el-descriptions-item label="MAC-1">
+        <div class="desc-content">
+          {{device.mac | defaultValue}}
+          <dict-tag :options="dict.type.sm_device_online_status" :value="device.onlineStatus1" size="mini"/>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="MAC-2">
+        <div class="desc-content">
+          {{device.mac2 | defaultValue}}
+          <template v-if="!isEmpty(device.mac2)">
+            <dict-tag :options="dict.type.sm_device_online_status" :value="device.onlineStatus2" size="mini"/>
+          </template>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="设备型号">
+        {{device.model | defaultValue}}
+      </el-descriptions-item>
+      <el-descriptions-item label="产品ID">
+        {{device.productId | defaultValue}}
+      </el-descriptions-item>
+      <el-descriptions-item label="型号功能">
+        <dict-tag :options="dict.type.sm_model_tag" :value="device.modelTags" size="mini"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="设备状态">
+        <dict-tag :options="dict.type.sm_device_status" :value="device.status" size="mini"/>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-card>
+</template>
+
+<script>
+import { isEmpty } from '@/utils'
+
+export default {
+  name: 'DeviceInfoCard',
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  dicts: ['sm_device_online_status', 'sm_model_tag', 'sm_device_status'],
+  methods: {
+    isEmpty
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device-info {
+  margin-bottom: 16px;
+
+  .desc-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/system/device/components/DeviceOverview.vue b/src/views/system/device/components/DeviceOverview.vue
new file mode 100644
index 0000000..68ccb18
--- /dev/null
+++ b/src/views/system/device/components/DeviceOverview.vue
@@ -0,0 +1,101 @@
+<template>
+  <el-card class="device-overview" shadow="hover">
+    <el-row type="flex" align="middle" justify="space-between">
+      <el-col :span="16">
+        <div class="device-header">
+          <div class="device-title">
+            <span class="name">{{device.deviceName || device.deviceNo || '未命名设备'}}</span>
+            <el-tag size="small" :type="isOpen ? 'success' : 'info'" class="status-tag">
+              {{isOpen ? '运行中' : '已关闭'}}
+            </el-tag>
+            <dict-tag 
+              :options="dict.type.sm_device_online_status" 
+              :value="device.onlineStatus" 
+              size="small"
+            />
+          </div>
+          <div class="device-meta">
+            <span class="meta-item">
+              <i class="el-icon-cpu"></i>
+              SN: {{device.deviceNo}}
+            </span>
+            <span class="meta-item">
+              <i class="el-icon-connection"></i>
+              MAC: {{device.mac}}
+            </span>
+            <span class="meta-item">
+              <i class="el-icon-timer"></i>
+              最后在线: {{device.lastOnlineTime | defaultValue}}
+            </span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="action-group">
+          <slot name="actions"></slot>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'DeviceOverview',
+  props: {
+    device: {
+      type: Object,
+      required: true
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  dicts: ['sm_device_online_status']
+}
+</script>
+
+<style lang="scss" scoped>
+.device-overview {
+  margin-bottom: 16px;
+  
+  .device-header {
+    .device-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      
+      .name {
+        font-size: 18px;
+        font-weight: 500;
+        color: #303133;
+        margin-right: 12px;
+      }
+      
+      .status-tag {
+        margin-right: 8px;
+      }
+    }
+    
+    .device-meta {
+      color: #909399;
+      font-size: 13px;
+      
+      .meta-item {
+        margin-right: 24px;
+        
+        i {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+  
+  .action-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/system/device/components/DeviceOwnerCard.vue b/src/views/system/device/components/DeviceOwnerCard.vue
new file mode 100644
index 0000000..15a4dfb
--- /dev/null
+++ b/src/views/system/device/components/DeviceOwnerCard.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-card class="device-owner" shadow="hover">
+    <template #header>
+      <div class="card-header">
+        <span>归属信息</span>
+        <div class="header-actions">
+          <el-button-group v-if="device.agentId">
+            <el-button size="small" type="danger" plain icon="el-icon-link" @click="$emit('unbind-agent')">
+              解绑代理商
+            </el-button>
+          </el-button-group>
+          <bind-agent-button v-else :device-id="device.deviceId" @success="$emit('refresh')"/>
+          
+          <el-button-group v-if="device.userId" style="margin-left: 8px">
+            <el-button size="small" type="danger" plain icon="el-icon-link" @click="$emit('unbind-mch')">
+              解绑商户
+            </el-button>
+          </el-button-group>
+          <bind-mch-button v-else :device-id="device.deviceId" @success="$emit('refresh')"/>
+        </div>
+      </div>
+    </template>
+    
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="设备名称">
+        {{device.deviceName | defaultValue}}
+      </el-descriptions-item>
+      <el-descriptions-item label="服务模式">
+        <dict-tag :options="dict.type.device_service_mode" :value="device.serviceMode" size="small"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="所属代理" v-if="device.serviceMode === DeviceServiceMode.AGENT">
+        <user-link :name="device.agentName" :id="device.agentId"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="所属商户">
+        <user-link :name="device.userName" :id="device.userId"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="店铺名称">
+        <store-link :name="device.storeName" :id="device.storeId"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="月费">
+        {{device.monthFee | money | defaultValue}} 元/月
+        （到期时间：{{device.rentTime | defaultValue}}）
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-card>
+</template>
+
+<script>
+import { DeviceServiceMode } from '@/utils/constants'
+import UserLink from '@/components/Business/SmUser/UserLink'
+import StoreLink from '@/components/Business/Store/StoreLink'
+import BindAgentButton from './BindAgentButton'
+import BindMchButton from './BindMchButton'
+
+export default {
+  name: 'DeviceOwnerCard',
+  components: {
+    UserLink,
+    StoreLink,
+    BindAgentButton,
+    BindMchButton
+  },
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  dicts: ['device_service_mode'],
+  computed: {
+    DeviceServiceMode() {
+      return DeviceServiceMode
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device-owner {
+  margin-bottom: 16px;
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/system/device/components/DeviceStatusCard.vue b/src/views/system/device/components/DeviceStatusCard.vue
new file mode 100644
index 0000000..c044e66
--- /dev/null
+++ b/src/views/system/device/components/DeviceStatusCard.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-card class="device-status" shadow="hover">
+    <template #header>
+      <div class="card-header">
+        <span>实时状态</span>
+        <span class="update-time">{{updateTime}}</span>
+      </div>
+    </template>
+    <div class="status-list">
+      <div v-for="(item, index) in statusItems" :key="index" class="status-item">
+        <span class="item-label">{{item.label}}</span>
+        <span class="item-value" :class="item.class">{{item.value}}</span>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'DeviceStatusCard',
+  props: {
+    updateTime: String,
+    statusItems: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device-status {
+  margin-bottom: 16px;
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .update-time {
+      color: #909399;
+      font-size: 13px;
+    }
+  }
+  
+  .status-list {
+    .status-item {
+      padding: 12px 0;
+      border-bottom: 1px solid #EBEEF5;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+      
+      .item-label {
+        display: block;
+        color: #909399;
+        font-size: 13px;
+        margin-bottom: 4px;
+      }
+      
+      .item-value {
+        font-size: 15px;
+        color: #303133;
+        
+        &.warning {
+          color: #E6A23C;
+        }
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/system/recharge/detail.vue b/src/views/system/recharge/detail.vue
index 6a3784d..256c09a 100644
--- a/src/views/system/recharge/detail.vue
+++ b/src/views/system/recharge/detail.vue
@@ -178,6 +178,9 @@
         <el-tab-pane label="支付信息" lazy>
           <pay-bill :query="{bstId: detail.billId}" :view="views.recharge"/>
         </el-tab-pane>
+        <el-tab-pane label="电量记录" lazy>
+          <bill-ele-record :query="{billId: detail.billId}" :view="views.recharge"/>
+        </el-tab-pane>
       </el-tabs>
     </el-card>
 
@@ -210,11 +213,12 @@ import RefundDialog from '@/views/system/recharge/components/RefundDialog.vue'
 import { toDescriptionFromSecond } from '@/utils/date'
 import BooleanTag from '@/components/BooleanTag/index.vue'
 import SuitTimePrice from '@/views/ss/suit/component/SuitTimePrice.vue'
+import BillEleRecord from '@/views/ss/billEleRecord/index.vue'
 
 export default {
   name: 'Recharge/:billId',
   mixins: [$recharge],
-  components: { SuitTimePrice, BooleanTag, RefundDialog, Bonus, PayBill, UserLink, DeviceLink, Refund },
+  components: { SuitTimePrice, BooleanTag, RefundDialog, Bonus, PayBill, UserLink, DeviceLink, Refund, BillEleRecord },
   dicts: [
     'channel_type',
     'sm_transaction_bill_status',