|
@@ -1,310 +1,297 @@
|
|
|
<!-- 基本图片的属性框 -->
|
|
|
<template>
|
|
|
- <div class="base-image">
|
|
|
- <div class="title">属性</div>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <div class="small-title">尺寸大小</div>
|
|
|
- <div class="property">
|
|
|
- <div>
|
|
|
- <span>W</span>
|
|
|
- <el-input
|
|
|
- style="width:74px;margin-left:6px"
|
|
|
- size="mini"
|
|
|
- v-model="width"
|
|
|
- @input="changeWidth"
|
|
|
- placeholder="请输入内容"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>H</span>
|
|
|
- <el-input
|
|
|
- style="width:74px;margin-left:6px"
|
|
|
- size="mini"
|
|
|
- v-model="height"
|
|
|
- @input="changeHeight"
|
|
|
- placeholder="请输入内容"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
- :show-file-list="false"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- >
|
|
|
- <i class="el-icon-link"></i>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="small-title">边框</div>
|
|
|
- <div class="property">
|
|
|
- <div class="color-box">
|
|
|
- <div class="cololorSelect">
|
|
|
- <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
|
|
|
- </div>
|
|
|
- <span>颜色</span>
|
|
|
- </div>
|
|
|
- <div class="line-width">
|
|
|
- <el-input-number
|
|
|
- style="width:80px"
|
|
|
- v-model="linewidth"
|
|
|
- controls-position="right"
|
|
|
- @change="changeLineWidth"
|
|
|
- size="mini"
|
|
|
- :min="1"
|
|
|
- :max="20"
|
|
|
- :maxlength="100"
|
|
|
- ></el-input-number>
|
|
|
- <span>线宽</span>
|
|
|
- </div>
|
|
|
- <div class="line-width">
|
|
|
- <a-select
|
|
|
- style="width: 80px"
|
|
|
- v-model="linestyle"
|
|
|
- :default-value="borderLineOption[0].id"
|
|
|
- @change="changeLineStyle"
|
|
|
- >
|
|
|
- <a-select-option
|
|
|
- v-for="item in borderLineOption"
|
|
|
- :key="item.id"
|
|
|
- :label="item.src"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- <img :src="item.src" alt width="60" />
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- <span>线型</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <div class="base-image">
|
|
|
+ <div class="title">属性</div>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div class="small-title">尺寸大小</div>
|
|
|
+ <div class="property">
|
|
|
+ <div>
|
|
|
+ <span>W</span>
|
|
|
+ <el-input
|
|
|
+ style="width: 74px; margin-left: 6px"
|
|
|
+ size="mini"
|
|
|
+ v-model="width"
|
|
|
+ @input="changeWidth"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>H</span>
|
|
|
+ <el-input
|
|
|
+ style="width: 74px; margin-left: 6px"
|
|
|
+ size="mini"
|
|
|
+ v-model="height"
|
|
|
+ @input="changeHeight"
|
|
|
+ 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>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="small-title">边框</div>
|
|
|
+ <div class="property">
|
|
|
+ <div class="color-box">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span>颜色</span>
|
|
|
+ </div>
|
|
|
+ <div class="line-width">
|
|
|
+ <el-input-number
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="linewidth"
|
|
|
+ controls-position="right"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ size="mini"
|
|
|
+ :min="1"
|
|
|
+ :max="20"
|
|
|
+ :maxlength="100"
|
|
|
+ ></el-input-number>
|
|
|
+ <span>线宽</span>
|
|
|
+ </div>
|
|
|
+ <div class="line-width">
|
|
|
+ <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
|
|
|
+ <a-select-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
|
|
|
+ <img :src="item.src" alt width="60" />
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <span>线型</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from "@/bus/bus";
|
|
|
const baseUrl = "/image-service/common/image_get?systemId=dataPlatform&key=";
|
|
|
import { uploadGroup, getImageGroup } from "@/api/editer";
|
|
|
export default {
|
|
|
- props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- width: 0,
|
|
|
- height: 0,
|
|
|
- color: "#cccccc", //颜色
|
|
|
- linewidth: 1,
|
|
|
- borderLineOption: [
|
|
|
- {
|
|
|
- id: "Solid",
|
|
|
- src: require("@/assets/images/solidLine.png"),
|
|
|
+ props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ color: "#cccccc", //颜色
|
|
|
+ linewidth: 1,
|
|
|
+ borderLineOption: [
|
|
|
+ {
|
|
|
+ id: "Solid",
|
|
|
+ src: require("@/assets/images/solidLine.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "Dashed",
|
|
|
+ src: require("@/assets/images/dashedLine.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "Dotted",
|
|
|
+ src: require("@/assets/images/dotLine.png"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ linestyle: "solid",
|
|
|
+ url: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeHeight(val) {
|
|
|
+ bus.$emit("updateStyle", "height", val);
|
|
|
},
|
|
|
- {
|
|
|
- id: "Dashed",
|
|
|
- src: require("@/assets/images/dashedLine.png"),
|
|
|
+ changeWidth(val) {
|
|
|
+ bus.$emit("updateStyle", "width", val);
|
|
|
},
|
|
|
- {
|
|
|
- id: "Dotted",
|
|
|
- src: require("@/assets/images/dotLine.png"),
|
|
|
+ changeLineWidth(val) {
|
|
|
+ bus.$emit("updateStyle", "lineWidth", val);
|
|
|
},
|
|
|
- ],
|
|
|
- linestyle: "solid",
|
|
|
- url: "",
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeHeight(val) {
|
|
|
- bus.$emit("updateStyle", "height", val);
|
|
|
- },
|
|
|
- changeWidth(val) {
|
|
|
- bus.$emit("updateStyle", "width", val);
|
|
|
- },
|
|
|
- changeLineWidth(val) {
|
|
|
- bus.$emit("updateStyle", "lineWidth", val);
|
|
|
- },
|
|
|
- // 改变线样式
|
|
|
- changeLineStyle(val) {
|
|
|
- bus.$emit("updateStyle", "lineStyle", val);
|
|
|
- },
|
|
|
- // 改变颜色
|
|
|
- changeColor(val) {
|
|
|
- bus.$emit("updateStyle", "strokeColor", val);
|
|
|
- },
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- let that = this;
|
|
|
- const fileReader = new FileReader();
|
|
|
- fileReader.readAsDataURL(file); //读取图片
|
|
|
- const ftype = file.type;
|
|
|
- const fname = file.name;
|
|
|
- const uploadKey = file.uid;
|
|
|
- const imgType = ftype.split(".")[ftype.length - 1];
|
|
|
- fileReader.addEventListener("load", function () {
|
|
|
- // 读取完成
|
|
|
- let res = fileReader.result;
|
|
|
- //将canvas的base64位图片转换成图片png的file
|
|
|
- var blob = that.dataURLtoBlob(res, ftype);
|
|
|
- //将其转换成file对象
|
|
|
- let file = new File([blob], fname, {
|
|
|
- type: ftype,
|
|
|
- lastModified: Date.now(),
|
|
|
- }); //blob转file
|
|
|
+ // 改变线样式
|
|
|
+ changeLineStyle(val) {
|
|
|
+ bus.$emit("updateStyle", "lineStyle", val);
|
|
|
+ },
|
|
|
+ // 改变颜色
|
|
|
+ changeColor(val) {
|
|
|
+ bus.$emit("updateStyle", "strokeColor", val);
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ let that = this;
|
|
|
+ const fileReader = new FileReader();
|
|
|
+ fileReader.readAsDataURL(file); //读取图片
|
|
|
+ const ftype = file.type;
|
|
|
+ const fname = file.name;
|
|
|
+ const uploadKey = file.uid;
|
|
|
+ const imgType = ftype.split(".")[ftype.length - 1];
|
|
|
+ fileReader.addEventListener("load", function () {
|
|
|
+ // 读取完成
|
|
|
+ let res = fileReader.result;
|
|
|
+ //将canvas的base64位图片转换成图片png的file
|
|
|
+ var blob = that.dataURLtoBlob(res, ftype);
|
|
|
+ //将其转换成file对象
|
|
|
+ let 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));
|
|
|
- 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
|
|
|
+ // 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));
|
|
|
+ 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
|
|
|
+ );
|
|
|
+ xhr.send(reader.result);
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ that.url = baseUrl + uploadKey + "." + imgType;
|
|
|
+ bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ dataURLtoBlob(dataURI, type) {
|
|
|
+ var binary = atob(dataURI.split(",")[1]);
|
|
|
+ var array = [];
|
|
|
+ for (var 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();
|
|
|
+ return (
|
|
|
+ year +
|
|
|
+ "-" +
|
|
|
+ month +
|
|
|
+ "-" +
|
|
|
+ (date > 10 ? date : "0" + date) +
|
|
|
+ " " +
|
|
|
+ hour +
|
|
|
+ ":" +
|
|
|
+ (minute > 10 ? minute : "0" + minute) +
|
|
|
+ ":" +
|
|
|
+ (second > 10 ? second : "0" + second)
|
|
|
);
|
|
|
- xhr.send(reader.result);
|
|
|
- xhr.onreadystatechange = function () {
|
|
|
- if (xhr.readyState == 4) {
|
|
|
- if (xhr.status == 200) {
|
|
|
- that.url = baseUrl + uploadKey + "." + imgType;
|
|
|
- bus.$emit(
|
|
|
- "updateStyle",
|
|
|
- "url",
|
|
|
- baseUrl + uploadKey + "." + imgType
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
- };
|
|
|
- reader.readAsArrayBuffer(file);
|
|
|
- });
|
|
|
- },
|
|
|
- dataURLtoBlob(dataURI, type) {
|
|
|
- var binary = atob(dataURI.split(",")[1]);
|
|
|
- var array = [];
|
|
|
- for (var 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();
|
|
|
- return (
|
|
|
- year +
|
|
|
- "-" +
|
|
|
- month +
|
|
|
- "-" +
|
|
|
- (date > 10 ? date : "0" + date) +
|
|
|
- " " +
|
|
|
- hour +
|
|
|
- ":" +
|
|
|
- (minute > 10 ? minute : "0" + minute) +
|
|
|
- ":" +
|
|
|
- (second > 10 ? second : "0" + second)
|
|
|
- );
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
|
|
|
- watch: {
|
|
|
- strokeColor(val) {
|
|
|
- this.color = val;
|
|
|
- },
|
|
|
- lineWidth(val) {
|
|
|
- this.linewidth = val;
|
|
|
- },
|
|
|
- lineStyle(val) {
|
|
|
- this.linestyle = val;
|
|
|
- },
|
|
|
- Width(val) {
|
|
|
- this.width = val;
|
|
|
- },
|
|
|
- Height(val) {
|
|
|
- this.height = val;
|
|
|
- },
|
|
|
- Url(val) {
|
|
|
- this.url = val;
|
|
|
+ watch: {
|
|
|
+ strokeColor(val) {
|
|
|
+ this.color = val;
|
|
|
+ },
|
|
|
+ lineWidth(val) {
|
|
|
+ this.linewidth = val;
|
|
|
+ },
|
|
|
+ lineStyle(val) {
|
|
|
+ this.linestyle = val;
|
|
|
+ },
|
|
|
+ Width(val) {
|
|
|
+ this.width = val;
|
|
|
+ },
|
|
|
+ Height(val) {
|
|
|
+ this.height = val;
|
|
|
+ },
|
|
|
+ Url(val) {
|
|
|
+ this.url = val;
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
ul,
|
|
|
li {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- list-style-type: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style-type: none;
|
|
|
}
|
|
|
.base-image {
|
|
|
- .title {
|
|
|
- height: 47px;
|
|
|
- border-bottom: 1px solid #979797;
|
|
|
- color: #646c73;
|
|
|
- font-size: 16px;
|
|
|
- padding-left: 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- ul {
|
|
|
- width: calc(~"100% - 24px");
|
|
|
- margin: -1px 12px 0 12px;
|
|
|
- li {
|
|
|
- border-top: 1px solid #979797;
|
|
|
- margin-bottom: 16px;
|
|
|
- .small-title {
|
|
|
- font-size: 12px;
|
|
|
- color: #8d9399;
|
|
|
- margin: 12px 0;
|
|
|
- }
|
|
|
- .property {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- .color-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- .cololorSelect {
|
|
|
- width: 32px;
|
|
|
- height: 20px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- margin: 4px 0;
|
|
|
- .fix-box-1 {
|
|
|
- margin-top: -8px;
|
|
|
- margin-left: -8px;
|
|
|
- /deep/ .el-color-picker__trigger {
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ height: 47px;
|
|
|
+ border-bottom: 1px solid #979797;
|
|
|
+ color: #646c73;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-left: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ width: calc(~"100% - 24px");
|
|
|
+ margin: -1px 12px 0 12px;
|
|
|
+ li {
|
|
|
+ border-top: 1px solid #979797;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .small-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8d9399;
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+ .property {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .color-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .cololorSelect {
|
|
|
+ width: 32px;
|
|
|
+ height: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ margin: 4px 0;
|
|
|
+ .fix-box-1 {
|
|
|
+ margin-top: -8px;
|
|
|
+ margin-left: -8px;
|
|
|
+ /deep/ .el-color-picker__trigger {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line-width {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1f2429;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .line-width {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: 8px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- color: #1f2429;
|
|
|
- margin-top: 4px;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|