Browse Source

修改svg

yunxing 4 years ago
parent
commit
0cb6c92e06
3 changed files with 67 additions and 27 deletions
  1. 63 26
      src/components/editview/leftToolBar/editInfoPoint.vue
  2. 3 0
      src/views/editer.vue
  3. 1 1
      vue.config.js

+ 63 - 26
src/components/editview/leftToolBar/editInfoPoint.vue

@@ -103,8 +103,10 @@
                         action="https://jsonplaceholder.typicode.com/posts/"
                         :show-file-list="false"
                         :before-upload="beforeAvatarUpload"
+                        :on-success="handleAvatarSuccess"
                     >
-                        <img v-if="equipmentData.url" :src="imgBaseUrl + equipmentData.url" class="avatar" />
+                        <img v-if="equipmentData.url" :src="equipmentData.imgUrl" class="avatar" />
+
                         <el-button v-else type="small">替换图标</el-button>
                     </el-upload>
                 </div>
@@ -221,7 +223,8 @@ import { planerSave, pubPlanerUpdate } from "@/api/labsl";
 import { dictQuery } from "@/api/datacenter";
 import { imgBaseUrl, imgServeUpload } from "@/api/imageservice";
 import { cloneDeep } from "lodash";
-import { rgbaNum } from "@persagy-web/big-edit/lib/until";
+import { rgbaNum, svgTobase64 } from "@persagy-web/big-edit/lib/until";
+
 import { SColor } from "@persagy-web/draw/lib";
 const list = [
     { name: "运行状态", id: "yxzt" },
@@ -278,6 +281,7 @@ export default {
                 color: "#000000",
                 size: 1,
                 url: "",
+                imgUrl: "", //图片路径,页面显示使用
             },
             /** -------------------设备属性使用值end-------------------------- */
             /** -------------------空间属性使用值start-------------------------- */
@@ -361,12 +365,33 @@ export default {
             // 获取公式,属性信息
             const styleMap = { ...this.styleMap.defaultEquipStyle, ...(this.styleMap[this.code] || {}) };
             const { formula, url, color, size } = styleMap;
-            console.log(formula);
             this.chooseList = JSON.parse(formula || "[]");
-            this.equipmentData = { url, color, size };
-            console.log("=============================");
-            console.log(this.equipmentData.style);
-            console.log("=============================");
+            // color 8位hex转rgba
+            this.equipmentData = { url, color: new SColor(color).toRgba(), size, imgUrl: "" };
+            // 设置设备/设备组/空间 图片地址
+            const imgUrl = url ? imgBaseUrl + url : "";
+            // equipment 设备, equipmentGroup 设备组, space 空间
+            const dict = {
+                equipment: "equipmentData",
+                equipmentGroup: "equipmentGroupData",
+                space: "spaceData",
+            };
+            console.log(imgUrl);
+            imgUrl && this.initImgUrl(imgUrl, dict[this.type]);
+        },
+        /**
+         * 设置设备/设备组/空间 图片地址
+         */
+        initImgUrl(imgUrl, data) {
+            svgTobase64(imgUrl)
+                .then((res) => {
+                    this[data].imgUrl = res ? res : "";
+                })
+                .catch((res) => {
+                    debugger;
+                    this[data].imgUrl = res;
+                });
+           
         },
         async getInfoPoint() {
             console.time(1);
@@ -477,7 +502,8 @@ export default {
             // console.log("changeColor: ", val);
         },
         beforeAvatarUpload(file) {
-            let that = this;
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            const that = this;
             const fileReader = new FileReader();
             fileReader.readAsDataURL(file); //读取图片
             console.log(file);
@@ -487,26 +513,27 @@ 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 () {
                     // 这个事件在读取结束后,无论成功或者失败都会触发
+                    // eslint-disable-next-line no-empty
                     if (reader.error) {
                     } else {
                         // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
-                        var xhr = new XMLHttpRequest();
+                        const xhr = new XMLHttpRequest();
                         xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
                         xhr.send(reader.result);
                         xhr.onreadystatechange = function () {
@@ -523,21 +550,25 @@ export default {
                 reader.readAsArrayBuffer(file);
             });
         },
+        handleAvatarSuccess(res, file) {
+            console.log(res, file);
+            this.equipmentData.imgUrl = URL.createObjectURL(file.raw);
+        },
         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 +
                 "-" +
@@ -553,12 +584,13 @@ export default {
             );
         },
         /**------------空间的属性----------------- */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         changeLineWidth() {},
         changeLineStyle() {
             // this.setLineStyle();
         },
         setLineStyle() {
-            let img = this.borderLineOption.filter((v) => v.id === this.spaceData.linestyle)[0]?.src;
+            const img = this.borderLineOption.filter((v) => v.id === this.spaceData.linestyle)[0]?.src;
             // console.log(img);
             if (img) {
                 this.$refs.selectLine?.$el?.children[0].children[0].setAttribute(
@@ -849,6 +881,11 @@ export default {
                 }
             }
         }
+        // 图标大小
+        .avatar {
+            width: 60px;
+            height: 60px;
+        }
     }
 }
 </style>

+ 3 - 0
src/views/editer.vue

@@ -5,6 +5,9 @@
                 <div class="project-name">{{ name }}</div>
                 <div class="project-type">/ {{ floorLocalName }}({{ folderName }})</div>
                 <div class="project-save">自动保存成功- v {{ version }}</div>
+                <!-- TODO:  -->
+                <!-- <img src="../assets/images/aaa.svg" /> -->
+
             </div>
             <div class="right">
                 <el-tooltip class="item" effect="dark" content="下载" placement="bottom">

+ 1 - 1
vue.config.js

@@ -31,7 +31,7 @@ module.exports = {
             },
             // 图片服务器
             "/image-service": {
-                target: "http://adm.sagacloud.cn",
+                target: "http://api.sagacloud.cn",
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {