添加 终端周期检测 页面

src/views/pqs/supervise/terminalNetworkDetection/components/cycleDetection/detail.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="default-main">
+        <!--        <h1>详细信息回显</h1>-->
+        <el-descriptions :column="2" border>
+            <el-descriptions-item label="变电站">
+                {{ detailData?.substation }}
+            </el-descriptions-item>
+            <el-descriptions-item label="供电公司">
+                {{ detailData?.dept }}
+            </el-descriptions-item>
+            <el-descriptions-item label="终端名称">
+                {{ detailData?.deviceName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="逾期天数">
+                <span
+                    :style="{ color: detailData?.overdueDay > 10 ? 'red' : detailData?.overdueDay > 3 ? 'yellow' : '' }"
+                >
+                    {{ detailData?.overdueDay }}
+                </span>
+            </el-descriptions-item>
+            <el-descriptions-item label="流程状态">
+                <el-tag :type="getDeviceStatusType(detailData?.status)">
+                    {{ getDeviceStatus(detailData?.status) }}
+                </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="文件">
+                <el-icon>
+                    <Link />
+                </el-icon>
+                <a :href="detailData.reportPaths?.url">
+                    {{ detailData.reportPaths?.fileName }}
+                </a>
+                <span @click="detailData.reportPaths?.fileName">预览</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="描述">
+                {{ detailData?.description }}
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+defineOptions({ name: 'QuitRunningDeviceDetail' })
+import { propTypes } from '@/utils/propTypes'
+// import { querySurveyDetail } from '@/api/process-boot/generalTest'
+import { getInfoById } from '@/api/supervision-boot/cycleDetection/index'
+import { getFileNameAndFilePath } from '@/api/system-boot/file'
+import { useDictData } from '@/stores/dictData'
+import { Link } from '@element-plus/icons-vue'
+const { query } = useRoute() // 查询参数
+const openFile = (name: any) => {
+    window.open(window.location.origin + '/#/previewFile?' + name)
+}
+const props = defineProps({
+    id: propTypes.string.def(undefined)
+})
+const dictData = useDictData()
+const detailLoading = ref(false) // 表单的加载中
+const detailData: any = ref({}) // 详情数据
+const levelList = dictData.getBasicData('Dev_Voltage_Stand')
+const aList: any = ref([]) // 详情数据
+const queryId = query.id // 从 URL 传递过来的 id 编号
+
+/** 获得数据 */
+const getInfo = async () => {
+    detailLoading.value = true
+    try {
+        await getInfoById({ id: props.id || queryId }).then(res => {
+            detailData.value = res.data
+        })
+        await getFileNameAndFilePath({ filePath: detailData.value.checkFilePath }).then((res: any) => {
+            detailData.value.reportPaths = res.data
+        })
+    } finally {
+        detailLoading.value = false
+    }
+}
+
+const getDeviceStatus = (status: number) => {
+    if (status === 1) {
+        return '审批中'
+    }
+    if (status === 2) {
+        return '审批通过'
+    }
+    if (status === 3) {
+        return '审批不通过'
+    }
+    if (status === 4) {
+        return '已取消'
+    }
+    return '审批通过'
+}
+
+const getDeviceStatusType = (status: number) => {
+    if (status === 1) {
+        return 'primary'
+    }
+    if (status === 2) {
+        return 'success'
+    }
+    if (status === 3) {
+        return 'danger'
+    }
+    if (status === 4) {
+        return 'warning'
+    }
+    return 'success'
+}
+
+defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
+
+/** 初始化 **/
+onMounted(() => {
+    getInfo()
+})
+</script>