|
@@ -1,15 +1,29 @@
|
|
|
<template>
|
|
|
- <div id='top_toolbar'>
|
|
|
+ <div id="top_toolbar">
|
|
|
<!-- 顶部编辑器 -->
|
|
|
- <div class='tit'>
|
|
|
+ <div class="tit">
|
|
|
<!-- <a-icon type="left" /> -->
|
|
|
{{this.urlMsg.floorName}}
|
|
|
</div>
|
|
|
- <div class='tool'>
|
|
|
+ <div class="tool">
|
|
|
<ul>
|
|
|
- <li @click='saveMsg'>
|
|
|
- <img class='lock' :src='require(`./../../assets/images/t-save.png`)' alt />
|
|
|
- <span>保存</span>
|
|
|
+ <li>
|
|
|
+ <a-upload
|
|
|
+ name="json"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :customRequest="customRequestJSON"
|
|
|
+ :before-upload="beforeUploadJSON"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <a-icon type="upload" />
|
|
|
+ <div class="ant-upload-text">读取json文件</div>
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ </li>
|
|
|
+ <li @click="saveMsg">
|
|
|
+ <img class="lock" :src="require(`./../../assets/images/t-save.png`)" alt />
|
|
|
+ <span>保存json</span>
|
|
|
</li>
|
|
|
<!-- <li>
|
|
|
<a-icon type="edit" />
|
|
@@ -19,31 +33,31 @@
|
|
|
<img class="lock" :src="require(`./../../assets/images/redo.png`)" alt />
|
|
|
<span>重做</span>
|
|
|
</li>-->
|
|
|
- <li class='zoom-window'>
|
|
|
+ <li class="zoom-window">
|
|
|
<div>
|
|
|
- <img class='lock' @click='handleScale(-1)' :src='require(`./../../assets/images/缩小.png`)' alt />
|
|
|
- <span class='percentage'>{{scalePercent}}</span>
|
|
|
- <img class='lock' @click='handleScale(1)' :src='require(`./../../assets/images/放大 amplification.png`)' alt />
|
|
|
+ <img class="lock" @click="handleScale(-1)" :src="require(`./../../assets/images/缩小.png`)" alt />
|
|
|
+ <span class="percentage">{{scalePercent}}</span>
|
|
|
+ <img class="lock" @click="handleScale(1)" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
|
|
|
</div>
|
|
|
<span>缩放窗口</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <a-dropdown :trigger='[`click`]'>
|
|
|
- <div class='ant-dropdown-link dropdown-flex' @click='e => e.preventDefault()'>
|
|
|
+ <a-dropdown :trigger="[`click`]">
|
|
|
+ <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
|
|
|
<div>
|
|
|
- <img class='lock' :src='require(`./../../assets/images/t-format.png`)' alt />
|
|
|
+ <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
|
|
|
<div>对齐</div>
|
|
|
</div>
|
|
|
- <a-icon type='caret-down' class='down-icon' />
|
|
|
+ <a-icon type="caret-down" class="down-icon" />
|
|
|
</div>
|
|
|
- <a-menu slot='overlay'>
|
|
|
+ <a-menu slot="overlay">
|
|
|
<a-menu-item
|
|
|
- :disabled='item.disable'
|
|
|
- v-for='item in alignmentOptions'
|
|
|
- :key='item.value'
|
|
|
- @click='changeAlignItem(item.value)'
|
|
|
+ :disabled="item.disable"
|
|
|
+ v-for="item in alignmentOptions"
|
|
|
+ :key="item.value"
|
|
|
+ @click="changeAlignItem(item.value)"
|
|
|
>
|
|
|
- <img style='width: 16px;margin-right: 5px;' :src='require(`./../../assets/images/`+item.img+`.png`)' alt />
|
|
|
+ <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt />
|
|
|
<span>{{item.label}}</span>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
@@ -61,108 +75,108 @@
|
|
|
<a-icon type="edit" />
|
|
|
<span>打散</span>
|
|
|
</li>-->
|
|
|
- <li @click='lockItem'>
|
|
|
- <Icon :name='!isLock?`lock`:`unlock`' />
|
|
|
+ <li @click="lockItem">
|
|
|
+ <Icon :name="!isLock?`lock`:`unlock`" />
|
|
|
<span>{{isLock?"解锁":"锁定"}}</span>
|
|
|
</li>
|
|
|
- <li @click='deleteItem'>
|
|
|
- <a-icon type='delete' />
|
|
|
+ <li @click="deleteItem">
|
|
|
+ <a-icon type="delete" />
|
|
|
<span>删除</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
<a-upload
|
|
|
- name='avatar'
|
|
|
- class='avatar-uploader'
|
|
|
- :show-upload-list='false'
|
|
|
- :customRequest='customRequest'
|
|
|
- action='https://jsonplaceholder.typicode.com/posts/'
|
|
|
- :before-upload='beforeUpload'
|
|
|
- @change='handleChange'
|
|
|
+ name="avatar"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :customRequest="customRequest"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ @change="handleChange"
|
|
|
>
|
|
|
- <img v-if='0' :src='imageUrl' alt='avatar' />
|
|
|
+ <img v-if="0" :src="imageUrl" alt="avatar" />
|
|
|
<div v-else>
|
|
|
- <a-icon :type='loading ? `loading` : `edit`' />
|
|
|
- <div class='ant-upload-text'>修改底图</div>
|
|
|
+ <a-icon :type="loading ? `loading` : `edit`" />
|
|
|
+ <div class="ant-upload-text">修改底图</div>
|
|
|
</div>
|
|
|
</a-upload>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class='btn-list'>
|
|
|
- <div class='btn-list-item' @click='publishMap'>
|
|
|
- <Icon name='release' />
|
|
|
+ <div class="btn-list">
|
|
|
+ <div class="btn-list-item" @click="publishMap">
|
|
|
+ <Icon name="release" />
|
|
|
<span>发布</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import bus from '@/bus'
|
|
|
-import { SGraphLayoutType } from '@saga-web/graph/lib'
|
|
|
-import systym from './codeMapSystem.js'
|
|
|
-import { MessageBox } from 'element-ui'
|
|
|
-import { uploadImg } from '@/api/editer.js'
|
|
|
+import bus from "@/bus";
|
|
|
+import { SGraphLayoutType } from "@saga-web/graph/lib";
|
|
|
+import systym from "./codeMapSystem.js";
|
|
|
+import { MessageBox } from "element-ui";
|
|
|
+import { uploadImg } from "@/api/editer.js";
|
|
|
|
|
|
function getBase64(img, callback) {
|
|
|
- const reader = new FileReader()
|
|
|
- reader.addEventListener('load', () => callback(reader.result))
|
|
|
- reader.readAsDataURL(img)
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.addEventListener("load", () => callback(reader.result));
|
|
|
+ reader.readAsDataURL(img);
|
|
|
}
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false, //添加图片,是否显示loading
|
|
|
- imageUrl: '',
|
|
|
+ imageUrl: "",
|
|
|
isLock: false, //是否锁定
|
|
|
focusItem: null,
|
|
|
alignmentOptions: [
|
|
|
//对齐数据
|
|
|
{
|
|
|
value: SGraphLayoutType.Left,
|
|
|
- label: '左对齐',
|
|
|
- img: 't-left',
|
|
|
+ label: "左对齐",
|
|
|
+ img: "t-left",
|
|
|
disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Right,
|
|
|
- label: '右对齐',
|
|
|
- img: 't-right',
|
|
|
+ label: "右对齐",
|
|
|
+ img: "t-right",
|
|
|
disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Top,
|
|
|
- label: '顶对齐',
|
|
|
- img: 't-top',
|
|
|
+ label: "顶对齐",
|
|
|
+ img: "t-top",
|
|
|
disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Bottom,
|
|
|
- label: '底对齐',
|
|
|
- img: 't-bottom',
|
|
|
+ label: "底对齐",
|
|
|
+ img: "t-bottom",
|
|
|
disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Center,
|
|
|
- label: '水平居中对齐',
|
|
|
- img: 't-center',
|
|
|
+ label: "水平居中对齐",
|
|
|
+ img: "t-center",
|
|
|
disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Middle,
|
|
|
- label: '垂直居中对齐',
|
|
|
- img: 't-topandbottm',
|
|
|
+ label: "垂直居中对齐",
|
|
|
+ img: "t-topandbottm",
|
|
|
disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Vertical,
|
|
|
- label: '垂直分布',
|
|
|
- img: 't-vertical',
|
|
|
+ label: "垂直分布",
|
|
|
+ img: "t-vertical",
|
|
|
disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Horizontal,
|
|
|
- label: '水平分布',
|
|
|
- img: 't-level',
|
|
|
+ label: "水平分布",
|
|
|
+ img: "t-level",
|
|
|
disable: true
|
|
|
}
|
|
|
],
|
|
@@ -170,64 +184,84 @@ export default {
|
|
|
initScale: 0.5, //初始 底图缩放比例
|
|
|
baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
|
|
|
scaleStep: 0.05 // +-缩放步进
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
// 缩放比例显示文本
|
|
|
scalePercent() {
|
|
|
- return (this.scale * 100).toFixed(0) + '%'
|
|
|
+ return (this.scale * 100).toFixed(0) + "%";
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
handleChange(info) {
|
|
|
- if (info.file.status === 'uploading') {
|
|
|
- this.loading = true
|
|
|
- return
|
|
|
+ if (info.file.status === "uploading") {
|
|
|
+ this.loading = true;
|
|
|
+ return;
|
|
|
}
|
|
|
- if (info.file.status === 'done') {
|
|
|
+ if (info.file.status === "done") {
|
|
|
// Get this url from response in real world.
|
|
|
getBase64(info.file.originFileObj, imageUrl => {
|
|
|
- this.imageUrl = imageUrl
|
|
|
- this.loading = false
|
|
|
- console.log(imageUrl)
|
|
|
- bus.$emit('changeImgUrl', imageUrl)
|
|
|
- })
|
|
|
+ this.imageUrl = imageUrl;
|
|
|
+ this.loading = false;
|
|
|
+ console.log(imageUrl);
|
|
|
+ bus.$emit("changeImgUrl", imageUrl);
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
beforeUpload(file) {
|
|
|
- const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
|
+ const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
|
|
|
if (!isJpgOrPng) {
|
|
|
- this.$message.error('You can only upload JPG file!')
|
|
|
+ this.$message.error("You can only upload JPG file!");
|
|
|
}
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
if (!isLt2M) {
|
|
|
- this.$message.error('Image must smaller than 2MB!')
|
|
|
+ this.$message.error("Image must smaller than 2MB!");
|
|
|
}
|
|
|
- return isJpgOrPng && isLt2M
|
|
|
+ return isJpgOrPng && isLt2M;
|
|
|
},
|
|
|
+
|
|
|
// TODO: customRequest
|
|
|
customRequest(info) {
|
|
|
- const formData = new FormData()
|
|
|
- formData.append('file', info.file)
|
|
|
- const postParams = formData
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("file", info.file);
|
|
|
+ const postParams = formData;
|
|
|
uploadImg({ postParams }).then(res => {
|
|
|
- this.loading = false
|
|
|
- if (res.Result == 'success') {
|
|
|
- this.$message.success(`${info.file.name} file uploaded successfully.`)
|
|
|
- bus.$emit('changeImgUrl', res.EntityList[0])
|
|
|
+ this.loading = false;
|
|
|
+ if (res.Result == "success") {
|
|
|
+ this.$message.success(`${info.file.name} file uploaded successfully.`);
|
|
|
+ bus.$emit("changeImgUrl", res.EntityList[0]);
|
|
|
} else {
|
|
|
- this.$message.error(`${info.file.name} file upload failed.`)
|
|
|
+ this.$message.error(`${info.file.name} file upload failed.`);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeUploadJSON(file) {
|
|
|
+ console.log(file);
|
|
|
+ const { type } = file;
|
|
|
+ const flag = type == "application/json";
|
|
|
+ !flag && this.$message.error("仅支持上传json文件");
|
|
|
+ return flag;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 读取json文件,bus.$emit后在 baseEditer中使用
|
|
|
+ */
|
|
|
+ customRequestJSON(info) {
|
|
|
+ let { file } = info;
|
|
|
+ const reader = new FileReader(); //实例化一个FileReader对象
|
|
|
+ reader.readAsText(file); //借助 FileReader 的方法,按照文本格式读入文件,第二个参数是编码方式(可空)
|
|
|
+ reader.onload = result => {
|
|
|
+ let json = JSON.parse(reader.result);
|
|
|
+ bus.$emit("loadJSON", json);
|
|
|
+ };
|
|
|
},
|
|
|
/**
|
|
|
* @name getInitScale
|
|
|
* @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
|
|
|
*/
|
|
|
getInitScale() {
|
|
|
- bus.$on('initScale', baseScale => {
|
|
|
- this.baseScale = Number(baseScale || 1)
|
|
|
- })
|
|
|
+ bus.$on("initScale", baseScale => {
|
|
|
+ this.baseScale = Number(baseScale || 1);
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* @name getMouseScale
|
|
@@ -235,9 +269,9 @@ export default {
|
|
|
*/
|
|
|
getMouseScale() {
|
|
|
// zoom 为缩放后改变的比例
|
|
|
- bus.$on('mouseScale', zoom => {
|
|
|
- this.scale = Number((zoom * this.initScale).toFixed(2))
|
|
|
- })
|
|
|
+ bus.$on("mouseScale", zoom => {
|
|
|
+ this.scale = Number((zoom * this.initScale).toFixed(2));
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* @name handleScale
|
|
@@ -246,109 +280,109 @@ export default {
|
|
|
*/
|
|
|
handleScale(type) {
|
|
|
// +-按钮禁用处理
|
|
|
- let flag = true
|
|
|
+ let flag = true;
|
|
|
// 设置缩放范围 0.05 ~ 100
|
|
|
if ((type < 0 && this.scale <= 0.05) || (type > 0 && this.scale >= 100)) {
|
|
|
- flag = false
|
|
|
+ flag = false;
|
|
|
} else {
|
|
|
- flag = true
|
|
|
+ flag = true;
|
|
|
}
|
|
|
if (!flag) {
|
|
|
- return false
|
|
|
+ return false;
|
|
|
}
|
|
|
// emit 缩放比例 this.scale / oldScale
|
|
|
- const oldScale = this.scale
|
|
|
- this.scale = Number((oldScale + type * this.scaleStep).toFixed(2))
|
|
|
- bus.$emit('changeScale', this.scale / oldScale)
|
|
|
+ const oldScale = this.scale;
|
|
|
+ this.scale = Number((oldScale + type * this.scaleStep).toFixed(2));
|
|
|
+ bus.$emit("changeScale", this.scale / oldScale);
|
|
|
},
|
|
|
FocusItemChanged(itemMsg) {
|
|
|
- this.focusItem = null
|
|
|
+ this.focusItem = null;
|
|
|
this.alignmentOptions.forEach(el => {
|
|
|
- el.disable = true
|
|
|
- })
|
|
|
+ el.disable = true;
|
|
|
+ });
|
|
|
if (itemMsg.itemList.length == 1) {
|
|
|
- this.isLock = itemMsg.itemList[0].moveable
|
|
|
- this.focusItem = itemMsg.itemList[0]
|
|
|
+ this.isLock = itemMsg.itemList[0].moveable;
|
|
|
+ this.focusItem = itemMsg.itemList[0];
|
|
|
} else if (itemMsg.itemList.length > 1) {
|
|
|
this.alignmentOptions.forEach(el => {
|
|
|
- el.disable = false
|
|
|
- })
|
|
|
+ el.disable = false;
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
lockItem() {
|
|
|
if (this.focusItem) {
|
|
|
- this.isLock = !this.isLock
|
|
|
- this.focusItem.moveable = this.isLock
|
|
|
+ this.isLock = !this.isLock;
|
|
|
+ this.focusItem.moveable = this.isLock;
|
|
|
} else {
|
|
|
- this.$message.error('请选择指定对象!', 1)
|
|
|
+ this.$message.error("请选择指定对象!", 1);
|
|
|
}
|
|
|
},
|
|
|
saveMsg() {
|
|
|
// this.$message.success("保存成功!", 1);
|
|
|
- bus.$emit('saveMsgItem')
|
|
|
+ bus.$emit("saveMsgItem");
|
|
|
},
|
|
|
// 删除item
|
|
|
deleteItem() {
|
|
|
- console.log(this.focusItem)
|
|
|
+ console.log(this.focusItem);
|
|
|
if (this.focusItem) {
|
|
|
- bus.$emit('deleiteItem')
|
|
|
+ bus.$emit("deleiteItem");
|
|
|
// this.focusItem = null;
|
|
|
- this.$message.success('删除成功', 1)
|
|
|
+ this.$message.success("删除成功", 1);
|
|
|
} else {
|
|
|
- this.$message.error('请选择指定对象!', 1)
|
|
|
+ this.$message.error("请选择指定对象!", 1);
|
|
|
}
|
|
|
},
|
|
|
// 发布图例
|
|
|
publishMap() {
|
|
|
- MessageBox.confirm('确认后即发布到平台?', '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
+ MessageBox.confirm("确认后即发布到平台?", "提示", {
|
|
|
+ confirmButtonText: "确认",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
})
|
|
|
.then(() => {
|
|
|
- bus.$emit('publishMap')
|
|
|
+ bus.$emit("publishMap");
|
|
|
})
|
|
|
- .catch(() => {})
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
// 对齐item
|
|
|
changeAlignItem(val) {
|
|
|
- bus.$emit('changeAlignItem', val)
|
|
|
+ bus.$emit("changeAlignItem", val);
|
|
|
}
|
|
|
},
|
|
|
async mounted() {
|
|
|
- bus.$on('FocusItemChanged', itemMsg => {
|
|
|
- console.log('itemMsg', itemMsg)
|
|
|
- this.FocusItemChanged(itemMsg)
|
|
|
- })
|
|
|
+ bus.$on("FocusItemChanged", itemMsg => {
|
|
|
+ console.log("itemMsg", itemMsg);
|
|
|
+ this.FocusItemChanged(itemMsg);
|
|
|
+ });
|
|
|
// 获取底图加载完成后的初始sacle
|
|
|
- await this.getInitScale()
|
|
|
+ await this.getInitScale();
|
|
|
// 监听滚轮 底图缩放比例
|
|
|
- this.getMouseScale()
|
|
|
+ this.getMouseScale();
|
|
|
},
|
|
|
created() {
|
|
|
- const href = window.location.href
|
|
|
+ const href = window.location.href;
|
|
|
// 路由
|
|
|
// const route = href.split("?")[0];
|
|
|
// 参数处理
|
|
|
- let params = href.split('?')[1]
|
|
|
+ let params = href.split("?")[1];
|
|
|
if (!params) {
|
|
|
// 参数有问题
|
|
|
- return false
|
|
|
+ return false;
|
|
|
}
|
|
|
- params = decodeURIComponent(params)
|
|
|
+ params = decodeURIComponent(params);
|
|
|
// params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
|
|
|
- const paramsArr = params.split('&')
|
|
|
- console.log('paramsArr', paramsArr)
|
|
|
- const obj = {}
|
|
|
+ const paramsArr = params.split("&");
|
|
|
+ console.log("paramsArr", paramsArr);
|
|
|
+ const obj = {};
|
|
|
paramsArr.map(item => {
|
|
|
- const arr = item.split('=')
|
|
|
- obj[arr[0]] = arr[1]
|
|
|
- })
|
|
|
- this.urlMsg = obj
|
|
|
- const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : ''
|
|
|
- this.urlMsg.floorName = systym[this.urlMsg.categoryId] + '-' + FloorName
|
|
|
+ const arr = item.split("=");
|
|
|
+ obj[arr[0]] = arr[1];
|
|
|
+ });
|
|
|
+ this.urlMsg = obj;
|
|
|
+ const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : "";
|
|
|
+ this.urlMsg.floorName = systym[this.urlMsg.categoryId] + "-" + FloorName;
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
ul,
|