admin-sjzx/src/views/pqs/supervise/retire/detail.vue

<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='设备名称' :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'
import { useRoute } from 'vue-router'
import { propTypes } from '@/utils/propTypes'
import { getRunningDeviceById } from '@/api/supervision-boot/device/quitRunningDev'

defineOptions({ name: 'QuitRunningDeviceDetail' })
const { query } = useRoute() // 查询参数

const props = defineProps({
  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 '退运'
  }
  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'
  }
  return 'success'
}

/** 获得数据 */
const getInfo = async () => {
  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()
})

</script>