Browse Source

图片右侧属性修改

yunxing 4 years ago
parent
commit
a56d523ef3
2 changed files with 121 additions and 49 deletions
  1. 120 48
      src/components/editview/rightPropertyBar/BaseImagePro.vue
  2. 1 1
      src/views/editer.vue

+ 120 - 48
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -26,17 +26,28 @@
                             placeholder="请输入内容"
                         ></el-input>
                     </div>
-                    <el-upload
-                        class="avatar-uploader"
-                        action="https://jsonplaceholder.typicode.com/posts/"
-                        :show-file-list="false"
-                        :before-upload="beforeAvatarUpload"
-                        accept="image/jpeg,image/jpg,image/png,"
-                    >
-                        <i class="el-icon-link"></i>
-                    </el-upload>
+                    <div @click="lockItem" :title="isLock ? '锁定' : '解锁'">
+                        <Icon style="vertical-align: middle" :name="isLock ? 'lock' : 'unlock'" />
+                    </div>
                 </div>
             </li>
+            <li class="m-picture">
+                <p class="title">图片</p>
+                <el-upload
+                    class="avatar-uploader"
+                    drag
+                    action="https://jsonplaceholder.typicode.com/posts/"
+                    :show-file-list="false"
+                    :before-upload="beforeAvatarUpload"
+                    accept="image/jpeg,image/jpg,image/png,"
+                >
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                        将文件拖动到这里替换
+                        <p><em>本地上传</em></p>
+                    </div>
+                </el-upload>
+            </li>
             <li>
                 <div class="small-title">边框</div>
                 <div class="property">
@@ -76,6 +87,8 @@
 import bus from "@/bus/bus";
 const baseUrl = "/image-service/common/image_get?systemId=dataPlatform&key=";
 import { uploadGroup, getImageGroup } from "@/api/editer";
+import { imgBaseUrl, imgServeUpload } from "@/api/imageservice";
+
 export default {
     props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
     data() {
@@ -100,15 +113,47 @@ export default {
             ],
             linestyle: "solid",
             url: "",
+            isLock: true,
+            aspectRatio: 1, // 元素宽高比
         };
     },
+    mounted() {
+        window.vm = this;
+    },
     methods: {
-        changeHeight(val) {
-            bus.$emit("updateStyle", "height", val);
+        /**
+         * 切换锁状态
+         */
+        lockItem() {
+            this.isLock = !this.isLock;
+            if (this.isLock) {
+                this.aspectRatio = this.width / this.height;
+            }
         },
+        /**
+         * 更改宽度
+         */
         changeWidth(val) {
             bus.$emit("updateStyle", "width", val);
+            if (this.isLock) {
+                this.height = val * this.aspectRatio;
+                bus.$emit("updateStyle", "height", this.height);
+            }
+        },
+        /**
+         * 更改高度
+         */
+        changeHeight(val) {
+            bus.$emit("updateStyle", "height", val);
+            if (this.isLock) {
+                this.width = val / this.aspectRatio;
+                bus.$emit("updateStyle", "width", this.width);
+            }
         },
+
+        /**
+         * 更改线宽
+         */
         changeLineWidth(val) {
             bus.$emit("updateStyle", "lineWidth", val);
         },
@@ -121,7 +166,7 @@ export default {
             bus.$emit("updateStyle", "strokeColor", val);
         },
         beforeAvatarUpload(file) {
-            let that = this;
+            const that = this;
             const fileReader = new FileReader();
             fileReader.readAsDataURL(file); //读取图片
             const ftype = file.type;
@@ -130,41 +175,44 @@ export default {
             const imgType = ftype.split(".")[ftype.length - 1];
             fileReader.addEventListener("load", function () {
                 // 读取完成
-                let res = fileReader.result;
+                const res = fileReader.result;
                 //将canvas的base64位图片转换成图片png的file
-                var blob = that.dataURLtoBlob(res, ftype);
+                const blob = that.dataURLtoBlob(res, ftype);
                 //将其转换成file对象
-                let file = new File([blob], fname, {
+                const file = new File([blob], fname, {
                     type: ftype,
                     lastModified: Date.now(),
                 }); //blob转file
 
                 // try sending
-                let reader = new FileReader();
-                let fileType = file.name.split(".");
-                let imgType = fileType[fileType.length - 1];
-                let CreateTime = that.formatDate(new Date(file.lastModified));
+                const reader = new FileReader();
+                const fileType = file.name.split(".");
+                const imgType = fileType[fileType.length - 1];
+                const CreateTime = that.formatDate(new Date(file.lastModified));
                 reader.onloadend = function () {
                     // 这个事件在读取结束后,无论成功或者失败都会触发
                     if (reader.error) {
+                        //
                     } else {
                         // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
-                        var xhr = new XMLHttpRequest();
-                        xhr.open(
-                            /* method */
-                            "POST",
-                            /* target url */
-                            "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" +
-                                "&key=" +
-                                uploadKey +
-                                "." +
-                                imgType
-                        );
+                        const xhr = new XMLHttpRequest();
+                        // xhr.open(
+                        //     /* method */
+                        //     "POST",
+                        //     /* target url */
+                        //     "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" +
+                        //         "&key=" +
+                        //         uploadKey +
+                        //         "." +
+                        //         imgType
+                        // );
+                        xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
                         xhr.send(reader.result);
                         xhr.onreadystatechange = function () {
                             if (xhr.readyState == 4) {
                                 if (xhr.status == 200) {
                                     that.url = baseUrl + uploadKey + "." + imgType;
+                                    bus.$emit("updateStyle", "defaultUrl", uploadKey + "." + imgType);
                                     bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
                                 }
                             }
@@ -175,20 +223,20 @@ export default {
             });
         },
         dataURLtoBlob(dataURI, type) {
-            var binary = atob(dataURI.split(",")[1]);
-            var array = [];
-            for (var i = 0; i < binary.length; i++) {
+            const binary = atob(dataURI.split(",")[1]);
+            const array = [];
+            for (let i = 0; i < binary.length; i++) {
                 array.push(binary.charCodeAt(i));
             }
             return new Blob([new Uint8Array(array)], { type: type });
         },
         formatDate(now) {
-            let year = now.getFullYear();
-            let month = now.getMonth() + 1;
-            let date = now.getDate();
-            let hour = now.getHours();
-            let minute = now.getMinutes();
-            let second = now.getSeconds();
+            const year = now.getFullYear();
+            const month = now.getMonth() + 1;
+            const date = now.getDate();
+            const hour = now.getHours();
+            const minute = now.getMinutes();
+            const second = now.getSeconds();
             return (
                 year +
                 "-" +
@@ -220,6 +268,7 @@ export default {
         },
         Height(val) {
             this.height = val;
+            this.aspectRatio = this.Width / this.Height;
         },
         Url(val) {
             this.url = val;
@@ -235,22 +284,25 @@ li {
     list-style-type: none;
 }
 .base-image {
-    .title {
-        height: 47px;
-        border-bottom: 1px solid #979797;
-        color: #646c73;
-        font-size: 16px;
+    & > .title {
+        height: 40px;
+        line-height: 40px;
+        color: #000000;
+        background: #f8f9fa;
+        font-size: 14px;
         padding-left: 12px;
         box-sizing: border-box;
     }
     ul {
-        width: calc(~"100% - 24px");
-        margin: -1px 12px 0 12px;
+        // width: calc(100% - 24px);
+        // margin: -1px 12px 0 12px;
+        width: 100%;
         li {
-            border-top: 1px solid #979797;
+            // border-top: 1px solid #979797;
+            padding: 0 12px;
             margin-bottom: 16px;
             .small-title {
-                font-size: 12px;
+                font-size: 14px;
                 color: #8d9399;
                 margin: 12px 0;
             }
@@ -292,6 +344,26 @@ li {
                 }
             }
         }
+        li.m-picture {
+            border-top: 1px solid #e4e5e7;
+            border-bottom: 1px solid #e4e5e7;
+            padding: 12px 0 18px 0;
+            .title {
+                padding: 0 12px;
+                margin-bottom: 12px;
+                color: #8d9399;
+                font-size: 12px;
+                line-height: 16px;
+            }
+
+            .avatar-uploader {
+                width: 100%;
+                text-align: center;
+                /deep/ .el-upload-dragger {
+                    width: 200px !important;
+                }
+            }
+        }
     }
 }
 </style>

+ 1 - 1
src/views/editer.vue

@@ -35,7 +35,7 @@ export default {
         ...mapState(["name", "folderName", "floorLocalName", "version"]),
     },
     created() {
-        window.vm = this;
+        // window.vm = this;
         this.init();
     },
     methods: {