From b0885fe610e22462c4b350ac49f32fba10bff96a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Wed, 9 Feb 2022 09:07:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E5=9B=BE=E7=89=87=E5=83=8F?=
 =?UTF-8?q?=E7=B4=A0=E4=BF=AE=E6=94=B9=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageUpload/index.vue | 26 ++++++++++++++++++++++
 src/views/vehicleMent/map.vue        | 33 ++++++++++++++++++----------
 src/views/vehicleMent/overview.vue   |  9 +++-----
 3 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 4d20923..45a07b7 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -71,6 +71,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 是否获取图片宽高
+    isGetPicInfo: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -164,6 +169,27 @@ export default {
           return false;
         }
       }
+      if (this.isGetPicInfo) {
+        const isSize = new Promise((resolve, reject) => {
+          //上传文件为图片类型
+          let img = new Image();
+          img.onload = function () {
+            resolve(img);
+          };
+          img.src = URL.createObjectURL(file);
+        }).then(
+          (res) => {
+            let picInfo = {
+              width: res.width,
+              height: res.height,
+            };
+            this.$emit("getPicInfo", picInfo);
+          },
+          (err) => {
+            return Promise.reject();
+          }
+        );
+      }
       this.loading = this.$loading({
         lock: true,
         text: "上传中",
diff --git a/src/views/vehicleMent/map.vue b/src/views/vehicleMent/map.vue
index 9a0f965..c5f2638 100644
--- a/src/views/vehicleMent/map.vue
+++ b/src/views/vehicleMent/map.vue
@@ -12,14 +12,20 @@
           <el-input v-model.number="dataInfo.scale"></el-input>
           <span style="color: #818895">px/m</span>
         </el-form-item>
-        <el-form-item label="横轴像素:" prop="xpixel">
+        <!-- <el-form-item label="横轴像素:" prop="xpixel">
           <el-input v-model.number="dataInfo.xpixel"></el-input>
         </el-form-item>
         <el-form-item label="纵轴像素:" prop="ypixel">
           <el-input v-model.number="dataInfo.ypixel"></el-input>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="图片:" prop="pic">
-          <ImageUpload v-model="dataInfo.pic" :isShowTip="false" :limit="1" />
+          <ImageUpload
+            v-model="dataInfo.pic"
+            @getPicInfo="getPicInfo"
+            :isGetPicInfo="true"
+            :isShowTip="false"
+            :limit="1"
+          />
         </el-form-item>
         <el-form-item>
           <el-button
@@ -47,14 +53,14 @@ export default {
           { required: true, message: "请输入比例尺", trigger: "blur" },
           { type: "number", message: "必须为数字值", trigger: "blur" },
         ],
-        xpixel: [
-          { required: true, message: "请输入横轴像素", trigger: "blur" },
-          { type: "number", message: "必须为数字值", trigger: "blur" },
-        ],
-        ypixel: [
-          { required: true, message: "请输入纵轴像素", trigger: "blur" },
-          { type: "number", message: "必须为数字值", trigger: "blur" },
-        ],
+        // xpixel: [
+        //   { required: true, message: "请输入横轴像素", trigger: "blur" },
+        //   { type: "number", message: "必须为数字值", trigger: "blur" },
+        // ],
+        // ypixel: [
+        //   { required: true, message: "请输入纵轴像素", trigger: "blur" },
+        //   { type: "number", message: "必须为数字值", trigger: "blur" },
+        // ],
       },
     };
   },
@@ -62,12 +68,15 @@ export default {
     this.getList();
   },
   methods: {
-    /** 查询岗位列表 */
     getList() {
       mapList().then((response) => {
         this.dataInfo = response.rows[0] || {};
       });
     },
+    getPicInfo(e) {
+      this.dataInfo.xpixel = e.width;
+      this.dataInfo.ypixel = e.height;
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {
diff --git a/src/views/vehicleMent/overview.vue b/src/views/vehicleMent/overview.vue
index 4a82792..7141a4a 100644
--- a/src/views/vehicleMent/overview.vue
+++ b/src/views/vehicleMent/overview.vue
@@ -1,11 +1,8 @@
 <template>
   <div class="app-container">
     <!-- <scalseBox> -->
-    <div
-      class="content"
-      :style="{ width: dataInfo.xpixel + 'px', height: dataInfo.ypixel + 'px' }"
-      v-loading="loading"
-    >
+    <div class="content" style="width: 100%" v-loading="loading">
+      <!-- :style="{ width: dataInfo.xpixel + 'px', height: dataInfo.ypixel + 'px' }" -->
       <img :src="dataInfo.pic" alt="" class="bg_img" />
       <div
         class="bg_box"
@@ -162,7 +159,7 @@ export default {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
-    // width: 100%;
+    width: 100%;
     // height: 100%;
   }
   .bg_box {