新增终端状态管理

src/views/pqs/supervise/retire/detail.vue

@@ -1,37 +1,42 @@
 <template>
-    <!--工作流view的路径：/pqs/supervise/retire/detail-->
-    <div class='default-main'>
-        <!--        <h1>详细信息回显</h1>-->
-        <el-descriptions :column='2' border>
-            <el-descriptions-item label='供电公司'>
-                {{ detailData.gdName }}
-            </el-descriptions-item>
-            <el-descriptions-item label='变电站'>
-                {{ detailData.subName }}
-            </el-descriptions-item>
-            <template v-if='detailData.deviceType == 1'>
-                <el-descriptions-item label='设备名称'>
-                    {{ detailData.deviceName }}
-                </el-descriptions-item>
-            </template>
-            <template v-else>
-                <el-descriptions-item label='母线'>
-                    {{ detailData.volName }}
-                </el-descriptions-item>
-                <el-descriptions-item label='监测点'>
-                    {{ detailData.deviceName }}
-                </el-descriptions-item>
-            </template>
-            <el-descriptions-item label='运行状态'>
-                <el-tag :type='getDeviceStatusType(detailData.deviceStatus)'>
-                    {{ getDeviceStatus(detailData.deviceStatus) }}
-                </el-tag>
-            </el-descriptions-item>
-            <el-descriptions-item label='退役原因'>
-                {{ detailData.propertyNo }}
-            </el-descriptions-item>
-        </el-descriptions>
-    </div>
+  <!--工作流view的路径：/pqs/supervise/retire/detail-->
+  <div class='default-main'>
+    <!--        <h1>详细信息回显</h1>-->
+    <el-descriptions :column='2' border>
+      <el-descriptions-item label='供电公司'>
+        {{ detailData.gdName }}
+      </el-descriptions-item>
+      <el-descriptions-item label='变电站'>
+        {{ detailData.subName }}
+      </el-descriptions-item>
+      <template v-if='detailData.deviceType == 1'>
+        <el-descriptions-item label='设备名称' :span='2'>
+          {{ detailData.deviceName }}
+        </el-descriptions-item>
+      </template>
+      <template v-else>
+        <el-descriptions-item label='母线'>
+          {{ detailData.volName }}
+        </el-descriptions-item>
+        <el-descriptions-item label='监测点'>
+          {{ detailData.deviceName }}
+        </el-descriptions-item>
+      </template>
+      <el-descriptions-item label='当前状态'>
+        <el-tag :type='getDeviceStatusType(detailData.deviceStatus)'>
+          {{ getDeviceStatus(detailData.deviceStatus) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label='变更状态' >
+        <el-tag :type='getDeviceStatusType(detailData.devStatus)'>
+          {{ getDeviceStatus(detailData.devStatus) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item :span='2' label='变更原因'>
+        {{ detailData.propertyNo }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
 </template>
 <script setup lang='ts'>
 import { onMounted, ref } from 'vue'
@@ -43,66 +48,65 @@ defineOptions({ name: 'QuitRunningDeviceDetail' })
 const { query } = useRoute() // 查询参数
 
 const props = defineProps({
-    id: propTypes.string.def(undefined)
+  id: propTypes.string.def(undefined)
 })
 const detailLoading = ref(false) // 表单的加载中
 const detailData = ref({}) // 详情数据
 const queryId = query.id// 从 URL 传递过来的 id 编号
 const getDeviceStatus = (status: number) => {
-    if (status === 0) {
-        return '运行'
-    }
-    if (status === 1) {
-        return '检修'
-    }
-    if (status === 2) {
-        return '停运'
-    }
-    if (status === 3) {
-        return '调试'
-    }
-    if (status === 4) {
-        return '退运'
-    }
+  if (status === 0) {
     return '运行'
+  }
+  if (status === 1) {
+    return '检修'
+  }
+  if (status === 2) {
+    return '停运'
+  }
+  if (status === 3) {
+    return '调试'
+  }
+  if (status === 4) {
+    return '退运'
+  }
+  return '运行'
 }
 
 const getDeviceStatusType = (status: number) => {
-    if (status === 0) {
-        return 'success'
-    }
-    if (status === 1) {
-        return 'warning'
-    }
-    if (status === 2) {
-        return 'danger'
-    }
-    if (status === 3) {
-        return 'warning'
-    }
-    if (status === 4) {
-        return 'info'
-    }
+  if (status === 0) {
     return 'success'
+  }
+  if (status === 1) {
+    return 'warning'
+  }
+  if (status === 2) {
+    return 'danger'
+  }
+  if (status === 3) {
+    return 'warning'
+  }
+  if (status === 4) {
+    return 'info'
+  }
+  return 'success'
 }
 
 /** 获得数据 */
 const getInfo = async () => {
-    detailLoading.value = true
-    try {
-
-        await getRunningDeviceById(props.id || queryId).then(res => {
-            detailData.value = res.data
-        })
-    } finally {
-        detailLoading.value = false
-    }
+  detailLoading.value = true
+  try {
+    await getRunningDeviceById(props.id || queryId).then(res => {
+      detailData.value = res.data
+    })
+  } finally {
+    detailLoading.value = false
+  }
 }
 defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
 
 /** 初始化 **/
 onMounted(() => {
-    getInfo()
+  getInfo()
 })
 
 </script>