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