详情文件预览

src/views/pqs/supervise/interfere/components/undocumented/detail.vue

@@ -105,7 +105,10 @@
                     {{ proviteData.antiInterferenceTest == 0 ? '否' : '是' }}
                 </span>
             </el-descriptions-item>
-            <el-descriptions-item label="用户协议容量（MVA）" v-if="detailData.userType == 0 || detailData.userType == 1">
+            <el-descriptions-item
+                label="用户协议容量（MVA）"
+                v-if="detailData.userType == 0 || detailData.userType == 1"
+            >
                 {{ proviteData.agreementCapacity }}
             </el-descriptions-item>
             <el-descriptions-item
@@ -175,26 +178,26 @@
             <el-descriptions-item label="敏感装置名称" v-if="detailData.userType == 6">
                 {{ proviteData.deviceName }}
             </el-descriptions-item>
-<!--            <el-descriptions-item label="供电电源数量" v-if="detailData.userType == 6">-->
-<!--                {{ proviteData.powerSupplyCount }}-->
-<!--            </el-descriptions-item>-->
-          <el-descriptions-item label="供电电源情况" v-if="detailData.userType == 6">
-            {{
-              powerSupplyInfoOptionList.find(item => {
-                return item.id == proviteData.powerSupplyInfo
-              })?.name
-            }}
-          </el-descriptions-item>
-          <el-descriptions-item label="供电电源" :span='2'  v-if="detailData.userType == 6">
-            {{ proviteData.powerSupply }}
-          </el-descriptions-item>
-          <el-descriptions-item label="负荷级别" v-if="detailData.userType == 6">
-            {{
-              loadLevelOptionList.find(item => {
-                return item.id == proviteData.loadLevel
-              })?.name
-            }}
-          </el-descriptions-item>
+            <!--            <el-descriptions-item label="供电电源数量" v-if="detailData.userType == 6">-->
+            <!--                {{ proviteData.powerSupplyCount }}-->
+            <!--            </el-descriptions-item>-->
+            <el-descriptions-item label="供电电源情况" v-if="detailData.userType == 6">
+                {{
+                    powerSupplyInfoOptionList.find(item => {
+                        return item.id == proviteData.powerSupplyInfo
+                    })?.name
+                }}
+            </el-descriptions-item>
+            <el-descriptions-item label="供电电源" :span="2" v-if="detailData.userType == 6">
+                {{ proviteData.powerSupply }}
+            </el-descriptions-item>
+            <el-descriptions-item label="负荷级别" v-if="detailData.userType == 6">
+                {{
+                    loadLevelOptionList.find(item => {
+                        return item.id == proviteData.loadLevel
+                    })?.name
+                }}
+            </el-descriptions-item>
             <el-descriptions-item label="敏感电能质量指标" v-if="detailData.userType == 6">
                 {{
                     energyQualityIndexList.find(item => {
@@ -205,7 +208,10 @@
             <el-descriptions-item label="可研报告">
                 <span v-if="detailData.userType == 0 || detailData.userType == 1">
                     <el-icon><Link /></el-icon>
-                   <a target="_blank" :href="proviteData.feasibilityReport?.url">{{ proviteData.feasibilityReport?.name }}</a>
+                    <a target="_blank" :href="proviteData.feasibilityReport?.url" rel="nofollow">
+                        {{ proviteData.feasibilityReport?.name }}
+                    </a>
+                    <span @click="openFile(proviteData.feasibilityReport?.name )">预览</span>
                 </span>
                 <span
                     v-if="
@@ -216,36 +222,45 @@
                     "
                 >
                     <el-icon><Link /></el-icon>
-                   <a target="_blank" :href="proviteData.feasibilityReport?.url">{{ proviteData.feasibilityReport?.name }}</a>
+                    <a target="_blank" :href="proviteData.feasibilityReport?.url">
+                        {{ proviteData.feasibilityReport?.name }}
+                    </a>
+                    <span @click="openFile(proviteData.feasibilityReport?.name )">预览</span>
                 </span>
                 <span v-if="detailData.userType == 6">
                     <el-icon><Link /></el-icon>
-                   <a target="_blank" :href="proviteData.feasibilityReport?.url">{{ proviteData.feasibilityReport?.name }}</a>
+                    <a target="_blank" :href="proviteData.feasibilityReport?.url">
+                        {{ proviteData.feasibilityReport?.name }}
+                    </a>
+                    <span @click="openFile(proviteData.feasibilityReport?.name )">预览</span>
                 </span>
             </el-descriptions-item>
             <el-descriptions-item label="项目初步设计说明书">
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.preliminaryDesignDescription?.url">
+                <a target="_blank" :href="proviteData?.preliminaryDesignDescription?.url">
                     {{ proviteData?.preliminaryDesignDescription?.name }}
                 </a>
+                <span @click="openFile(proviteData.preliminaryDesignDescription?.name )">预览</span>
             </el-descriptions-item>
             <el-descriptions-item label="预测评估报告">
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.predictionEvaluationReport?.url">
+                <a target="_blank" :href="proviteData?.predictionEvaluationReport?.url">
                     {{ proviteData?.predictionEvaluationReport?.name }}
                 </a>
+                <span @click="openFile(proviteData.predictionEvaluationReport?.name )">预览</span>
             </el-descriptions-item>
             <el-descriptions-item label="预测评估评审意见报告">
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.predictionEvaluationReviewOpinions?.url">
+                <a target="_blank" :href="proviteData?.predictionEvaluationReviewOpinions?.url">
                     {{ proviteData?.predictionEvaluationReviewOpinions?.name }}
                 </a>
+                <span @click="openFile(proviteData.predictionEvaluationReviewOpinions?.name )">预览</span>
             </el-descriptions-item>
             <el-descriptions-item
                 label="用户接入变电站主接线示意图"
@@ -254,27 +269,37 @@
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.substationMainWiringDiagram?.url">
+                <a target="_blank" :href="proviteData?.substationMainWiringDiagram?.url">
                     {{ proviteData?.substationMainWiringDiagram?.name }}
                 </a>
+                <span @click="openFile(proviteData.substationMainWiringDiagram?.name )">预览</span>
             </el-descriptions-item>
             <el-descriptions-item label="主要敏感设备清单" v-if="detailData.userType == 6">
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.sensitiveDevices?.url">{{ proviteData?.sensitiveDevices?.name }}</a>
+                <a target="_blank" :href="proviteData?.sensitiveDevices?.url">
+                    {{ proviteData?.sensitiveDevices?.name }}
+                </a>
+                <span @click="openFile(proviteData.sensitiveDevices?.name )">预览</span>
             </el-descriptions-item>
             <el-descriptions-item label="抗扰度测试报告" v-if="detailData.userType == 6">
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.antiInterferenceReport?.url">{{ proviteData?.antiInterferenceReport?.name }}</a>
+                <a target="_blank" :href="proviteData?.antiInterferenceReport?.url">
+                    {{ proviteData?.antiInterferenceReport?.name }}
+                </a>
+                <span @click="openFile(proviteData.antiInterferenceReport?.name )">预览</span>
             </el-descriptions-item>
             <el-descriptions-item label="背景电能质量测试报告" v-if="detailData.userType == 6">
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.powerQualityReport?.url">{{ proviteData?.powerQualityReport?.name }}</a>
+                <a target="_blank" :href="proviteData?.powerQualityReport?.url">
+                    {{ proviteData?.powerQualityReport?.name }}
+                </a>
+                <span @click="openFile(proviteData.powerQualityReport?.name )">预览</span>
             </el-descriptions-item>
             <el-descriptions-item
                 label="其他附件"
@@ -283,14 +308,17 @@
                 <el-icon>
                     <Link />
                 </el-icon>
-               <a target="_blank" :href="proviteData?.additionalAttachments?.url">{{ proviteData?.additionalAttachments?.name }}</a>
+                <a target="_blank" :href="proviteData?.additionalAttachments?.url">
+                    {{ proviteData?.additionalAttachments?.name }}
+                </a>
+                <span @click="openFile(proviteData.additionalAttachments?.name )">预览</span>
             </el-descriptions-item>
         </el-descriptions>
     </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, reactive, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { formatDate } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
 import { getUserReportById } from '@/api/supervision-boot/userReport/form'
@@ -298,7 +326,7 @@ import { getDictTreeById } from '@/api/system-boot/dictTree'
 import { useDictData } from '@/stores/dictData'
 import { getFileNameAndFilePath } from '@/api/system-boot/file'
 import { Link } from '@element-plus/icons-vue'
-
+import PreviewFile from '@/components/PreviewFile/index.vue'
 defineOptions({ name: 'BpmUserReportDetail' })
 
 const { query } = useRoute() // 查询参数
@@ -309,6 +337,9 @@ const props = defineProps({
 const detailLoading = ref(false) // 表单的加载中
 const detailData = ref<any>({}) // 详情数据
 const queryId = query.id as unknown as string // 从 URL 传递过来的 id 编号
+const openFile = (name:any) => {
+    window.open(window.location.origin + '/#/previewFile?'+name)
+}
 //用户性质数组
 const userTypeList = reactive([
     {
@@ -387,6 +418,66 @@ const getInfo = async () => {
     }
 }
 const proviteData = ref()
+//可研报告
+const feasibilityReportRef = ref(null)
+//项目初步设计说明书
+const preliminaryDesignDescriptionRef = ref(null)
+//预测评估报告
+const predictionEvaluationReportRef = ref(null)
+//预测评估评审意见报告
+const predictionEvaluationReviewOpinionsRef = ref(null)
+//用户接入变电站主接线示意图
+const substationMainWiringDiagramRef = ref(null)
+//主要敏感设备清单
+const sensitiveDevicesRef = ref(null)
+//抗扰度测试报告
+const antiInterferenceReportRef = ref(null)
+//背景电能质量测试报告
+const powerQualityReportRef = ref(null)
+//其他附件
+const additionalAttachmentsRef = ref(null)
+//预览
+const preview = (val: any, url: any) => {
+    nextTick(() => {
+        //可研报告
+        if (val == 'feasibilityReport') {
+            feasibilityReportRef?.value.open(url)
+        }
+        //项目初步设计说明书
+        if (val == 'preliminaryDesignDescription') {
+            preliminaryDesignDescriptionRef?.value.open(url)
+        }
+        //预测评估报告
+        if (val == 'predictionEvaluationReport') {
+            console.log(url, '9999999')
+            predictionEvaluationReportRef?.value.open(url)
+        }
+        //预测评估评审意见报告
+        if (val == 'predictionEvaluationReviewOpinions') {
+            predictionEvaluationReviewOpinionsRef?.value.open(url)
+        }
+        //用户接入变电站主接线示意图
+        if (val == 'substationMainWiringDiagram') {
+            substationMainWiringDiagramRef?.value.open(url)
+        }
+        //主要敏感设备清单
+        if (val == 'sensitiveDevices') {
+            sensitiveDevicesRef?.value.open(url)
+        }
+        //抗扰度测试报告
+        if (val == 'antiInterferenceReport') {
+            antiInterferenceReportRef?.value.open(url)
+        }
+        //背景电能质量测试报告
+        if (val == 'powerQualityReport') {
+            powerQualityReportRef?.value.open(url)
+        }
+        //其他附件
+        if (val == 'additionalAttachments') {
+            additionalAttachmentsRef?.value.open(url)
+        }
+    })
+}
 //判断userType选择取用的对象
 const getProviteData = async () => {
     if (detailData.value.userType == '0' || detailData.value.userType == '1') {
@@ -546,10 +637,10 @@ onMounted(() => {
     position: absolute !important;
     top: 20px !important;
 }
-.el-icon{
+.el-icon {
     float: left;
 }
-a{
+a {
     display: block;
     width: 200px;
     float: left;