<template>
|
<!-- 实物图 -->
|
<div style="position: relative; height: 100%" v-loading="state.m_loadingCheck">
|
<div style="font-size: 13px; float: left; font-weight: bold">
|
<a v-if="state.CAD_Path !== null" class="diagram btn-export default blue-stripe pos_style" @click="exportCAD">
|
<el-icon size="12">
|
<PictureFilled />
|
</el-icon>
|
<span style="margin-left: 1px">
|
{{ t("selectPage.export.TR") }}CAD
|
</span>
|
</a>
|
|
</div>
|
<viewer :images="state.currentimageList" :options="state.OptionssalseImg" class="imgBox">
|
<img :onerror="useDefaultImage" v-for="src in state.currentimageList" :key="src" :src="src"
|
style="max-width: 100%; max-height: 100%; height: auto; width: auto" />
|
</viewer>
|
<span v-if="state.isDebug" class="debug_span">{{ state.currentimageList[0] }}</span>
|
</div>
|
</template>
|
|
<script setup name="realPictureCtrl">
|
import { reactive, watch, toRefs, onMounted } from 'vue';
|
import UtilsHelper from '@/utils/utils.js'
|
import defaultImgUrl from '@/assets/img_fail.png'
|
import { ElMessage } from 'element-plus';
|
import { useI18n } from 'vue-i18n';
|
import { CheckDownAssemFile } from "@/api/detail.ts"
|
const { t } = useI18n()
|
const props = defineProps({
|
tag: {
|
type: String,
|
default: "normal"
|
},
|
pid: Number,
|
sid: Number,
|
width: Number,
|
height: Number,
|
path: String,
|
cad: String
|
})
|
const { tag, pid, sid, path, cad } = toRefs(props)
|
const state = reactive({
|
currentimageList: [],
|
isDebug: false, //是否显示图片路径
|
isVisibleWaterMark: true, //是否显示水印
|
OptionssalseImg: {
|
"title": false,
|
},
|
CAD_Path: null,
|
m_PID: 0,
|
m_SID: 0,
|
m_loadingCheck:false
|
})
|
watch(path, (newVal, oldVal) => {
|
state.currentimageList = [];
|
if (newVal == null || newVal == "") return;
|
state.currentimageList.push(newVal);
|
|
})
|
watch(cad, (newVal, oldVal) => {
|
if (newVal == null || newVal == "") return;
|
state.CAD_Path = newVal.replace('.png', '.dwg');
|
})
|
watch(pid, (newVal, oldVal) => {
|
if (!newVal || newVal == "") return;
|
state.m_PID = newVal
|
})
|
watch(sid, (newVal, oldVal) => {
|
if (!newVal || newVal == "") return;
|
state.m_SID = newVal
|
})
|
onMounted(() => {
|
state.isDebug = window.globalConfig.IsDebug;
|
state.isVisibleWaterMark = window.globalConfig.IsVisibleWaterMark;
|
})
|
const useDefaultImage = (event) => {
|
event.target.src = defaultImgUrl;
|
}
|
const exportCAD = async () => {
|
extractCadByAuth()
|
}
|
// 校验cad下载权限
|
const extractCadByAuth = () => {
|
const FileSuffix = {
|
'PDF':0,
|
'CAD':3,
|
'PNG':4
|
}
|
let requestData = {
|
SeriesID: state.m_SID,
|
ProductID : state.m_PID,
|
FilePath: state.CAD_Path,
|
FileSuffixType:FileSuffix.CAD
|
}
|
state.m_loadingCheck = true;
|
CheckDownAssemFile(requestData).then(async (res) => {
|
state.m_loadingCheck = false;
|
let result = res.data;
|
if (result.Code !== 0) {
|
ElMessage.error(result.Message);
|
return;
|
}
|
let isExistFile = await UtilsHelper.isExistImgPath(state.CAD_Path)
|
if (!isExistFile) {
|
ElMessage.error("暂未上传对应的CAD文件")
|
return
|
}
|
UtilsHelper.downloadFile(state.CAD_Path, UtilsHelper.extractFileExtension(state.CAD_Path))
|
}).catch(err => {
|
state.m_loadingCheck = false;
|
console.log(err, '异常错误');
|
})
|
}
|
</script>
|
<style lang="scss">
|
.tabBackground {
|
border: 1px solid #eae8e8;
|
background-color: white;
|
margin-top: -1px;
|
}
|
|
.imgBox {
|
width: 100%;
|
height: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.diagram {
|
cursor: pointer;
|
font-size: 12px;
|
margin-top: 0;
|
margin-bottom: 3px;
|
padding-top: 5px;
|
height: 27px;
|
|
&>span {
|
font-size: 12px;
|
font-family: "SourceHanSans-Bold";
|
}
|
}
|
|
.pos_style {
|
position: absolute;
|
height: 15px;
|
line-height: 15px;
|
left: 10px;
|
top: 5px;
|
}
|
|
.debug_span {
|
z-index: 1000;
|
position: absolute;
|
bottom: 2px;
|
left:0px;
|
opacity: 0.4;
|
}
|
|
.btn-export {
|
width: unset;
|
height: unset;
|
border-radius: unset;
|
border-width: 0;
|
padding: 7px 14px;
|
font-size: 12px;
|
outline: none !important;
|
background-image: none !important;
|
border-radius: unset !important;
|
filter: none;
|
border-radius: 0;
|
box-shadow: none;
|
text-shadow: none;
|
|
&.default {
|
color: #333333;
|
background-color: #e5e5e5 !important;
|
|
&:hover {
|
background-color: #aaaaaa;
|
}
|
}
|
|
&.blue-stripe {
|
border-left: 3px solid #4b8df8;
|
}
|
}
|
</style>
|
