Merge branch 'demo'

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: "上传中",

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) => {

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 {