Merge branch '图稿制作' into 测试

src/views/sell/draft-design/drawing/index.vue

@@ -118,7 +118,7 @@
     </div>
 
     <el-dialog title="定制图样" v-if="openDrawing" v-model="openDrawing" width="70%">
-      <div style="height: calc(100vh - 166px); overflow-y: auto; overflow-x: hidden; position: relative; display: flex; justify-content: center">
+      <div style="height: calc(100vh - 94px); overflow: auto; display: flex; align-items: center; justify-content: center; position: relative">
         <div style="position: absolute; left: 10px; top: 10px">
           <div style="font-size: 20; font-weight: 700">裸垫参数:</div>
           <div style="margin: 4px 8px 4px">长: {{ formData.data.length }}mm</div>
@@ -127,14 +127,15 @@
           <div style="margin: 4px 8px 4px">长: {{ elLength }}mm</div>
           <div style="margin: 4px 8px 4px">宽: {{ elWidth }}mm</div>
           <div style="margin: 4px 8px 4px">旋转角度: {{ elAngle }}</div>
+          <div style="margin-top: 16px; font-size: 20; font-weight: 700">比例:</div>
+          <div style="margin: 4px 8px 4px">{{ ratio }}px : 1mm</div>
         </div>
-        <div style="position: absolute">
-          <canvas ref="canvas" :width="width" :height="height" style="border: 1px solid #ccc"></canvas>
+        <div style="width: 757px; height: 813px; border: 2px dashed #bdbdbd" ref="mainDIV">
+          <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+            <canvas ref="canvas" :width="width" :height="height" style="border: 1px solid #ccc"></canvas>
+          </div>
         </div>
       </div>
-      <div style="text-align: center; padding-top: 10px">
-        <el-button @click="openDrawing = false" size="large">关 闭</el-button>
-      </div>
     </el-dialog>
   </el-card>
 </template>
@@ -234,6 +235,7 @@ const handleSuccess = (response, UploadFile) => {
 const openDrawing = ref(false);
 const width = ref(0);
 const height = ref(0);
+const ratio = ref(1);
 const canvas = ref(null);
 const ctx = ref("");
 const clickCoordinate = { x: 0, y: 0 };
@@ -439,8 +441,8 @@ const elementMarking = (item) => {
   if (item.imgStatus) {
     w = Number(Math.round(item.w));
     h = Number(Math.round(item.h));
-    elLength.value = Number(Math.round(item.w / 4));
-    elWidth.value = Number(Math.round(item.h / 4));
+    elLength.value = Number(Math.round(item.w / ratio.value));
+    elWidth.value = Number(Math.round(item.h / ratio.value));
     x1 = x;
     y1 = y;
     x3 = x;
@@ -451,8 +453,8 @@ const elementMarking = (item) => {
     let textPixel = getStringPixel(item.text, item.size + "px 宋体");
     w = Number(Math.round(textPixel.width));
     h = Number(Math.round(textPixel.fontBoundingBoxAscent + textPixel.fontBoundingBoxDescent));
-    elLength.value = Number(Math.round(textPixel.width / 4));
-    elWidth.value = Number(Math.round((textPixel.fontBoundingBoxAscent + textPixel.fontBoundingBoxDescent) / 4));
+    elLength.value = Number(Math.round(textPixel.width / ratio.value));
+    elWidth.value = Number(Math.round((textPixel.fontBoundingBoxAscent + textPixel.fontBoundingBoxDescent) / ratio.value));
     x1 = x;
     y1 = y - h;
     x3 = x;
@@ -479,15 +481,20 @@ const elementMarking = (item) => {
   }
   elCoordinates.value.push({ textStatus: false, x1: 0, y1: yLine, x2: xLine, y2: yLine });
   elCoordinates.value.push({ textStatus: false, x1: xLine, y1: 0, x2: xLine, y2: yLine });
-  elCoordinates.value.push({ textStatus: true, x: xLine / 2, y: yLine, color: "red", text: Number(Math.round(xLine / 4)) + "mm", crosswise: true });
-  elCoordinates.value.push({ textStatus: true, x: xLine, y: yLine / 2, color: "red", text: Number(Math.round(yLine / 4)) + "mm", crosswise: false });
+  elCoordinates.value.push({ textStatus: true, x: xLine / 2, y: yLine, color: "red", text: Number(Math.round(xLine / ratio.value)) + "mm", crosswise: true });
+  elCoordinates.value.push({ textStatus: true, x: xLine, y: yLine / 2, color: "red", text: Number(Math.round(yLine / ratio.value)) + "mm", crosswise: false });
 };
 const clickToView = () => {
-  width.value = Number(Math.round(formData.data.width * 4));
-  height.value = Number(Math.round(formData.data.length * 4));
   openDrawing.value = true;
   nextTick(() => {
-    init();
+    let divWidth = proxy.$refs.mainDIV.clientWidth;
+    let divHeight = proxy.$refs.mainDIV.clientHeight;
+    ratio.value = Math.min(Math.floor(divWidth / formData.data.width), Math.floor(divHeight / formData.data.length));
+    width.value = Number(Math.round(formData.data.width * ratio.value));
+    height.value = Number(Math.round(formData.data.length * ratio.value));
+    nextTick(() => {
+      init();
+    });
   });
 };
 const clickCancel = () => {
@@ -537,4 +544,7 @@ const clickSubmit = () => {
   margin-top: 10px !important;
   margin-bottom: 10px !important;
 }
+::v-deep(.el-dialog__body) {
+  padding: 10px !important;
+}
 </style>