From 5b3ec1e16f50516e7be80bb6e02244ea53b382b2 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 28 八月 2026 14:44:59 +0800
Subject: [PATCH] 天津-豹鸣 1.添加设备二维码包含信息

---
 src/views/equipmentManagement/deviceInfo/index.vue |  135 ++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 133 insertions(+), 2 deletions(-)

diff --git a/src/views/equipmentManagement/deviceInfo/index.vue b/src/views/equipmentManagement/deviceInfo/index.vue
index de162cc..8a49227 100644
--- a/src/views/equipmentManagement/deviceInfo/index.vue
+++ b/src/views/equipmentManagement/deviceInfo/index.vue
@@ -48,6 +48,27 @@
          </div>
        </div>
      </div>
+
+     <div class="info-card">
+       <div class="card-header">鍙樻洿璁板綍</div>
+       <div class="card-content" v-loading="recordsLoading">
+         <div v-if="changeRecords.length === 0" class="empty-tip">鏆傛棤鍙樻洿璁板綍</div>
+         <div v-else class="change-record" v-for="(item, index) in changeRecords" :key="index">
+           <div class="record-header">
+             <span class="record-time">{{ item.createTime }}</span>
+             <span class="record-status" :class="approvalClass(item.approvalStatus)">{{ approvalText(item.approvalStatus) }}</span>
+           </div>
+           <div class="record-line">
+             <span class="record-status-change">
+               {{ statusText(item.originalStatus) }} 鈫� {{ statusText(item.targetStatus) }}
+             </span>
+             <span class="record-user">鐢宠浜猴細{{ item.createUserName || '--' }}</span>
+           </div>
+           <div class="record-reason">鍙樻洿鍘熷洜锛歿{ item.reason || '--' }}</div>
+           <div v-if="item.approvalStatus === 'REJECTED' && item.rejectReason" class="record-reject">椹冲洖鍘熷洜锛歿{ item.rejectReason }}</div>
+         </div>
+       </div>
+     </div>
   </div>
 </template>
 
@@ -55,9 +76,10 @@
 import { ref, reactive, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { 
-  getDeviceInfo, 
+import {
+  getDeviceInfo,
 } from '@/api/equipmentManagement/deviceInfo'
+import { listStatusChangeRecord } from '@/api/device/statusChangeRecord'
 
 const route = useRoute()
 
@@ -94,9 +116,39 @@
   }
 }
 
+const changeRecords = ref([])
+const recordsLoading = ref(false)
+
+const statusText = (s) => (s == 1 ? '鍚敤' : '鍋滅敤')
+
+const approvalText = (s) => {
+  const map = { PENDING: '瀹℃壒涓�', APPROVED: '宸查�氳繃', REJECTED: '宸查┏鍥�' }
+  return map[s] || s || '--'
+}
+
+const approvalClass = (s) => {
+  const map = { PENDING: 'status-pending', APPROVED: 'status-approved', REJECTED: 'status-rejected' }
+  return map[s] || ''
+}
+
+const fetchChangeRecords = async (deviceId) => {
+  recordsLoading.value = true
+  try {
+    const res = await listStatusChangeRecord({ deviceId, pageNum: 1, pageSize: 20 })
+    if (res.code === 200) {
+      changeRecords.value = res.data?.records || res.data || []
+    }
+  } catch (error) {
+    console.error('鑾峰彇鍙樻洿璁板綍澶辫触:', error)
+  } finally {
+    recordsLoading.value = false
+  }
+}
+
 onMounted(() => {
   const deviceId = route.query.deviceId || route.params.deviceId || ''
   fetchDeviceInfo(deviceId)
+  fetchChangeRecords(deviceId)
 })
 </script>
 
@@ -172,6 +224,85 @@
   color: #52c41a;
 }
 
+.empty-tip {
+  color: #999;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.change-record {
+  padding: 14px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.change-record:last-child {
+  border-bottom: none;
+}
+
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.record-time {
+  color: #666;
+  font-size: 13px;
+}
+
+.record-status {
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  background: #f5f5f5;
+  color: #666;
+}
+
+.status-pending {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.status-approved {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.status-rejected {
+  background: #fff1f0;
+  color: #f5222d;
+}
+
+.record-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.record-status-change {
+  color: #2c3e50;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.record-user {
+  color: #999;
+  font-size: 13px;
+}
+
+.record-reason {
+  color: #666;
+  font-size: 13px;
+}
+
+.record-reject {
+  color: #f5222d;
+  font-size: 13px;
+  margin-top: 4px;
+}
+
 
 
 @media (max-width: 768px) {

--
Gitblit v1.9.3