包装图片变为左上角

src/views/qualityManagement/FQC/thirtyFQC.vue

@@ -502,9 +502,10 @@
 						<tr>
 							<td>标签参考图片</td>
 							<td>
-								<span>
-									<el-image ref="elImageRef" style="width: 40px; height: 40px" :src="imageUrl" :preview-src-list="[imageUrl]">
+								<span @click="openImageViewer">
+									<el-image ref="elImageRef" style="width: 40px; height: 40px" :src="imageUrl" >
 									</el-image>
+									<el-image-viewer style="width: 60%;height: 80%;" v-if="showViewer" :on-close="closeImageViewer" :url-list="[imageUrl]" />
 								</span>
 							</td>
 							<td>开始时间</td>
@@ -631,11 +632,14 @@
 		GetQcQualityStatisticsFirstStartTime,
 	} from '@/api/qualityManagement/firstFQC.js'
 	import { convertToIncomingInspectionData } from '@/api/wmsManagement/wmFgentryInspect.js'
+	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
 	export default {
 		name: 'thirtyFQC',
+		components: { ElImageViewer },
 		data() {
 			return {
 				imgBaseUrl: 'http://192.168.60.251:9888/chfs/shared/partnumber/',
+				showViewer: true,
 				paint: [],
 				device: [],
 				blank: [], // 毛坯
@@ -681,7 +685,7 @@
 		watch: {
 			// 工单变动
 			'CurrentWorkorder.clientWorkorder'(newValue, oldValue) {
-				this.showBigImageView();
+				// this.showBigImageView();
 				this.getWorkOrderStartTime(newValue);
 				this.getWorkOrderInListStatus(newValue);
 				this.handlerSyncDataBoard(newValue);
@@ -1227,11 +1231,17 @@
 				}
 			},
 			// 大图触发
-			showBigImageView() {
-				this.$nextTick(() => {
-					this.$refs.elImageRef.clickHandler();
-				})
+			// showBigImageView() {
+			// 	this.$nextTick(() => {
+			// 		this.$refs.elImageRef.clickHandler();
+			// 	})
 
+			// },
+			openImageViewer() {
+				this.showViewer = true;
+			},
+			closeImageViewer() {
+				this.showViewer = false;
 			},
 			// 获取开始时间
 			getWorkOrderStartTime(workOrderId) {
@@ -1292,21 +1302,23 @@
 		},
 
 
-
 	}
 </script>
 
 <style lang="scss" scoped>
-	span{
+	span {
 		font-weight: 700
 	}
+
 	.board-box {
-		background-color:#032169;
+		background-color: #032169;
 	}
-	.border-title{
-		color:white !important;
+
+	.border-title {
+		color: white !important;
 	}
-	.board-text{
+
+	.board-text {
 		// font-weight: 600 !important;
 	}