联调普测计划管理页面

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

@@ -1,7 +1,153 @@
 <template>
-  <!--工作流view的路径：/pqs/supervise/harmonicSurvey/detail-->
-  <h1>详细信息回显</h1>
-</template>
-<script setup lang='ts'>
+    <!--工作流view的路径：/pqs/supervise/retire/detail-->
+    <div class="default-main">
+        <!--        <h1>详细信息回显</h1>-->
+        <el-descriptions :column="2" border>
+            <el-descriptions-item label="普测计划名称">
+                {{ detailData?.planName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="计划负责人">
+                {{ detailData?.leader }}
+            </el-descriptions-item>
+            <el-descriptions-item label="计划开始时间">
+                {{ detailData?.planStartTime }}
+            </el-descriptions-item>
+            <el-descriptions-item label="计划结束时间">
+                {{ detailData?.planEndTime }}
+            </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="文件">
+                <div v-for="(item, index) in aList">
+                    <el-icon>
+                        <Link />
+                    </el-icon>
+                    <a :href="item.url">
+                        {{ item.fileName }}
+                    </a>
+                    <!-- <el-button type="primary" link @click="downloadFile(item.url, item.fileName)">
+                        {{ item.fileName }}
+                    </el-button> -->
+                </div>
+            </el-descriptions-item>
+        </el-descriptions>
+        <div style="height: 300px">
+            <vxe-table
+                v-bind="defaultAttribute"
+                ref="vxeRef"
+                class="mt10"
+                height="auto"
+                :data="detailData?.supervisionGeneralSurveyPlanDetailPOS"
+            >
+                <vxe-column field="subName" title="变电站名称"></vxe-column>
+                <vxe-column field="voltageLevel" title="变电站电压等级" :formatter="formatter"></vxe-column>
+                <vxe-column field="measurementPointId" title="在线监测点ID">
+                    <template #default="{ row }">{{ row.measurementPointId ? row.measurementPointId : '/' }}</template>
+                </vxe-column>
 
-</script>
+                <vxe-column field="isSurvey" title="是否实现监测">
+                    <template #default="{ row }">{{ row.isSurvey === 1 ? '是' : '否' }}</template>
+                </vxe-column>
+            </vxe-table>
+        </div>
+    </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 { getFileNameAndFilePath } from '@/api/system-boot/file'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { useDictData } from '@/stores/dictData'
+import { Link } from '@element-plus/icons-vue'
+const { query } = useRoute() // 查询参数
+
+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 querySurveyDetail({ id: props.id || queryId }).then(res => {
+            detailData.value = res.data
+            aList.value = []
+            let arr = res.data.filePath.split(',')
+
+            arr.slice(0, -1).forEach((item: any) => {
+                getFileNameAndFilePath({ filePath: item }).then((res: any) => {
+                    aList.value.push(res.data)
+                })
+            })
+        })
+    } finally {
+        detailLoading.value = false
+    }
+}
+// 下载文件
+const downloadFile = (url: string, fileName: string) => {
+    const link = document.createElement('a')
+    link.href = url
+    link.download = fileName
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+}
+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'
+}
+// 过滤数据
+const formatter = (row: any) => {
+    if (row.column.field == 'voltageLevel') {
+        return levelList.filter(item => item.id == row.cellValue)[0].name
+    } else {
+        return row.cellValue
+    }
+}
+defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
+
+/** 初始化 **/
+onMounted(() => {
+    getInfo()
+})
+</script>