From 53106187dc8f49407aba33de885da8695f116af9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E8=BE=89?= <814457906@qq.com>
Date: Wed, 16 Nov 2022 13:21:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/stationAvatar/index.vue | 64 +++++++++++++++---------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/views/system/stationAvatar/index.vue b/src/views/system/stationAvatar/index.vue
index 2430e0e..74f8da9 100644
--- a/src/views/system/stationAvatar/index.vue
+++ b/src/views/system/stationAvatar/index.vue
@@ -8,7 +8,7 @@
       <img
         v-if="options.img"
         v-bind:src="options.img"
-        title="点击上传头像"
+        title="点击上传图片"
         style="width: 100px; height: 100px; line-height: 200px"
       />
       <i
@@ -24,15 +24,15 @@
     </div>
 
     <el-dialog
-      :title="title"
+      title="上传图片"
       :visible.sync="openimg"
-      width="800px"
+      width="950px"
       append-to-body
       @opened="modalOpened"
       @close="closeDialog"
     >
       <el-row>
-        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+        <el-col :xs="24" :md="0" :style="{ height: '350px' }">
           <vue-cropper
             ref="cropper"
             :img="options.img"
@@ -47,7 +47,12 @@
         </el-col>
         <el-col :xs="24" :md="12" :style="{ height: '350px' }">
           <div class="avatar-upload-preview">
-            <img :src="previews.url" :style="previews.img" />
+            <img
+              style="width: 100%; height: 100%"
+              v-if="previews.url"
+              :src="previews.url"
+            />
+            <div v-else></div>
           </div>
         </el-col>
       </el-row>
@@ -126,8 +131,8 @@ export default {
       options: {
         img: null, //裁剪图片的地址
         autoCrop: true, // 是否默认生成截图框
-        autoCropWidth: 200, // 默认生成截图框宽度
-        autoCropHeight: 200, // 默认生成截图框高度
+        autoCropWidth: 300, // 默认生成截图框宽度
+        autoCropHeight: 300, // 默认生成截图框高度
         fixedBox: true, // 固定截图框大小 不允许改变
       },
       previews: {},
@@ -200,34 +205,34 @@ export default {
         );
       } else {
         const reader = new FileReader();
+        this.previews.data = file;
+        this.previews.url = URL.createObjectURL(file);
         reader.readAsDataURL(file);
         reader.onload = () => {
-          this.options.img = reader.result;
+          // this.options.img = reader.result;
         };
       }
     },
     // 上传图片
     uploadImg() {
-      // console.log(this.types);
-      this.$refs.cropper.getCropBlob((data) => {
-        let formData = new FormData();
-        formData.append("file", data);
-        formData.append("type", this.types);
-        updateNurseStationHeads(formData).then((response) => {
-          this.options.img = baseurl + response.imgUrl;
-          this.$emit("imgUrl", response.imgUrl);
-          console.log(this.items);
-          console.log(this.types);
-          if (this.types == "attributePitureUrl") {
-            this.items.attributePitureUrl = response.imgUrl;
-            this.$emit("item", JSON.stringify(this.items));
-          }
-          this.openimg = false;
-        });
+      let formData = new FormData();
+      formData.append("file", this.previews.data);
+      formData.append("type", this.types);
+      updateNurseStationHeads(formData).then((response) => {
+        this.options.img = baseurl + response.imgUrl;
+        this.$emit("imgUrl", response.imgUrl);
+        console.log(this.items);
+        console.log(this.types);
+        if (this.types == "attributePitureUrl") {
+          this.items.attributePitureUrl = response.imgUrl;
+          this.$emit("item", JSON.stringify(this.items));
+        }
+        this.openimg = false;
       });
     },
     // 实时预览
     realTime(data) {
+      console.log(data);
       this.previews = data;
     },
     // 关闭窗口
@@ -239,6 +244,17 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+.avatar-upload-preview {
+  position: absolute;
+  top: 0%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  width: 300px;
+  height: 300px;
+  border-radius: 0%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+}
 .user-info-head {
   position: relative;
   display: inline-block;