|
@@ -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>
|