|
@@ -0,0 +1,159 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="qr-report-container">
|
|
|
|
|
+ <div class="qr-report-header">
|
|
|
|
|
+ <div class="qr-report-header-title">特种设备检测研究院</div>
|
|
|
|
|
+ <div class="qr-report-header-desc">{{ reportTitle }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="qr-report-content" v-loading="loading">
|
|
|
|
|
+ <div v-if="errorMsg" class="qr-report-error">{{ errorMsg }}</div>
|
|
|
|
|
+ <div v-else-if="formData" class="qr-report-table">
|
|
|
|
|
+ <div class="table-row" v-for="(label, key) in displayFields" :key="key">
|
|
|
|
|
+ <div class="table-cell table-label">{{ label }}:</div>
|
|
|
|
|
+ <div class="table-cell table-value">{{ formData[key] || '-' }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-else-if="!loading" class="qr-report-error">暂无报告数据</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
|
|
+import dayjs from 'dayjs'
|
|
|
|
|
+
|
|
|
|
|
+defineOptions({ name: 'QrReportView' })
|
|
|
|
|
+
|
|
|
|
|
+interface Props {
|
|
|
|
|
+ apiUrl: string
|
|
|
|
|
+ reportTitle: string
|
|
|
|
|
+ displayFields: Record<string, string>
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const props = defineProps<Props>()
|
|
|
|
|
+const route = useRoute()
|
|
|
|
|
+const loading = ref(false)
|
|
|
|
|
+const errorMsg = ref('')
|
|
|
|
|
+const formData = ref<Record<string, any> | null>(null)
|
|
|
|
|
+
|
|
|
|
|
+const baseUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL
|
|
|
|
|
+
|
|
|
|
|
+const fetchReport = async () => {
|
|
|
|
|
+ const id = route.query.id as string
|
|
|
|
|
+ if (!id) {
|
|
|
|
|
+ errorMsg.value = '缺少报告 ID 参数'
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ loading.value = true
|
|
|
|
|
+ try {
|
|
|
|
|
+ const res = await fetch(baseUrl + props.apiUrl + '?id=' + encodeURIComponent(id))
|
|
|
|
|
+ if (!res.ok) {
|
|
|
|
|
+ errorMsg.value = '请求失败:' + res.status
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ const json = await res.json()
|
|
|
|
|
+ // 处理 yudao CommonResult 包装
|
|
|
|
|
+ if (json && json.code === 0 && json.data) {
|
|
|
|
|
+ formData.value = json.data
|
|
|
|
|
+ } else if (json && json.code === 0) {
|
|
|
|
|
+ formData.value = json
|
|
|
|
|
+ } else if (json && json.data) {
|
|
|
|
|
+ formData.value = json.data
|
|
|
|
|
+ } else {
|
|
|
|
|
+ formData.value = json
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e: any) {
|
|
|
|
|
+ errorMsg.value = '请求异常:' + e.message
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ loading.value = false
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ fetchReport()
|
|
|
|
|
+})
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.qr-report-container {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background-color: #f5f5f5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qr-report-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ background-color: #26456a;
|
|
|
|
|
+ padding: 24px 0;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qr-report-header-title {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qr-report-header-desc {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qr-report-content {
|
|
|
|
|
+ max-width: 720px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ padding: 0 16px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qr-report-error {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ padding: 40px 0;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qr-report-table {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.table-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ border-bottom: 1px solid #d9d9d9;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.table-row:last-child {
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.table-cell {
|
|
|
|
|
+ padding: 14px 16px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.table-label {
|
|
|
|
|
+ width: 36%;
|
|
|
|
|
+ min-width: 140px;
|
|
|
|
|
+ background-color: #f7f8fa;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ border-right: 1px solid #d9d9d9;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.table-value {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|