|
@@ -21,9 +21,19 @@
|
|
|
</li>
|
|
|
<li class="zoom-window">
|
|
|
<div>
|
|
|
- <img class="lock" @click="handleScale(-1)" :src="require(`./../../assets/images/缩小.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 />
|
|
|
+ <img
|
|
|
+ class="lock"
|
|
|
+ @click="handleScale(1)"
|
|
|
+ :src="require(`./../../assets/images/放大 amplification.png`)"
|
|
|
+ alt
|
|
|
+ />
|
|
|
</div>
|
|
|
<span>缩放窗口</span>
|
|
|
</li>
|
|
@@ -54,8 +64,17 @@
|
|
|
<a-icon type="caret-down" class="down-icon" />
|
|
|
</div>
|
|
|
<a-menu slot="overlay">
|
|
|
- <a-menu-item :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 />
|
|
|
+ <a-menu-item
|
|
|
+ :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
|
|
|
+ />
|
|
|
<span>{{item.label}}</span>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
@@ -95,7 +114,7 @@
|
|
|
import bus from "@/bus";
|
|
|
import { SGraphLayoutType, SOrderSetType } from "@saga-web/graph/lib";
|
|
|
import systym from "./codeMapSystem.js";
|
|
|
-import { MessageBox } from 'element-ui';
|
|
|
+import { MessageBox } from "element-ui";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -107,49 +126,49 @@ export default {
|
|
|
value: SGraphLayoutType.Left,
|
|
|
label: "左对齐",
|
|
|
img: "t-left",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Right,
|
|
|
label: "右对齐",
|
|
|
img: "t-right",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Top,
|
|
|
label: "顶对齐",
|
|
|
img: "t-top",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Bottom,
|
|
|
label: "底对齐",
|
|
|
img: "t-bottom",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Center,
|
|
|
label: "水平居中对齐",
|
|
|
img: "t-center",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Middle,
|
|
|
label: "垂直居中对齐",
|
|
|
img: "t-topandbottm",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Vertical,
|
|
|
label: "垂直分布",
|
|
|
img: "t-vertical",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
},
|
|
|
{
|
|
|
value: SGraphLayoutType.Horizontal,
|
|
|
label: "水平分布",
|
|
|
img: "t-level",
|
|
|
- disable:true,
|
|
|
+ disable: true
|
|
|
}
|
|
|
],
|
|
|
orderOptions:[//图层
|
|
@@ -179,16 +198,19 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
scale: 0.5, //底图缩放比例
|
|
|
- initScale: 0.5, //初始 底图缩放比例
|
|
|
- baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
|
|
|
- scaleStep: 0.05, // +-缩放步进
|
|
|
+ initScale: 0.5, //初始 底图缩放比例
|
|
|
+ baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
|
|
|
+ scaleStep: 0.05 // +-缩放步进
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
// 缩放比例显示文本
|
|
|
scalePercent() {
|
|
|
- const scalePercent = (this.scale * 100).toFixed(0) > 500? 500 : (this.scale * 100).toFixed(0);
|
|
|
- return scalePercent + '%'
|
|
|
+ const scalePercent =
|
|
|
+ (this.scale * 100).toFixed(0) > 500
|
|
|
+ ? 500
|
|
|
+ : (this.scale * 100).toFixed(0);
|
|
|
+ return scalePercent + "%";
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -197,9 +219,9 @@ export default {
|
|
|
* @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
|
|
|
*/
|
|
|
getInitScale() {
|
|
|
- bus.$on('initScale', baseScale => {
|
|
|
- this.baseScale = Number(baseScale || 1)
|
|
|
- })
|
|
|
+ bus.$on("initScale", baseScale => {
|
|
|
+ this.baseScale = Number(baseScale || 1);
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* @name getMouseScale
|
|
@@ -207,10 +229,10 @@ export default {
|
|
|
*/
|
|
|
getMouseScale() {
|
|
|
// zoom 为缩放后改变的比例
|
|
|
- bus.$on('mouseScale', zoom => {
|
|
|
- const s = Number((zoom * this.initScale).toFixed(2))
|
|
|
- this.scale = s > 0.05 ? s: 0.05
|
|
|
- })
|
|
|
+ bus.$on("mouseScale", zoom => {
|
|
|
+ const s = Number((zoom * this.initScale).toFixed(2));
|
|
|
+ this.scale = s > 0.05 ? s : 0.05;
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* @name handleScale
|
|
@@ -219,37 +241,37 @@ 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))
|
|
|
- if ( 0 < oldScale && oldScale < 99) {
|
|
|
- bus.$emit('changeScale', this.scale / oldScale)
|
|
|
+ const oldScale = this.scale;
|
|
|
+ this.scale = Number((oldScale + type * this.scaleStep).toFixed(2));
|
|
|
+ if (0 < oldScale && oldScale < 99) {
|
|
|
+ bus.$emit("changeScale", this.scale / oldScale);
|
|
|
} else {
|
|
|
- bus.$emit('changeScale', 1)
|
|
|
+ bus.$emit("changeScale", 1);
|
|
|
}
|
|
|
},
|
|
|
FocusItemChanged(itemMsg) {
|
|
|
this.focusItem = null;
|
|
|
- this.alignmentOptions.forEach(el=>{
|
|
|
- el.disable = true
|
|
|
- })
|
|
|
+ this.alignmentOptions.forEach(el => {
|
|
|
+ el.disable = true;
|
|
|
+ });
|
|
|
if (itemMsg.itemList.length == 1) {
|
|
|
this.isLock = itemMsg.itemList[0].moveable;
|
|
|
this.focusItem = itemMsg.itemList[0];
|
|
|
- }else if (itemMsg.itemList.length > 1) {
|
|
|
- this.alignmentOptions.forEach(el=>{
|
|
|
- el.disable = false
|
|
|
- })
|
|
|
+ } else if (itemMsg.itemList.length > 1) {
|
|
|
+ this.alignmentOptions.forEach(el => {
|
|
|
+ el.disable = false;
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
lockItem() {
|
|
@@ -275,16 +297,16 @@ export default {
|
|
|
// }
|
|
|
},
|
|
|
// 发布图例
|
|
|
- publishMap(){
|
|
|
- MessageBox.confirm('确认后即发布到平台?', '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- bus.$emit("publishMap");
|
|
|
- }).catch(() => {
|
|
|
- });
|
|
|
-
|
|
|
+ publishMap() {
|
|
|
+ MessageBox.confirm("确认后即发布到平台?", "提示", {
|
|
|
+ confirmButtonText: "确认",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ bus.$emit("publishMap");
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
// 对齐item
|
|
|
changeAlignItem(val) {
|
|
@@ -295,13 +317,13 @@ export default {
|
|
|
bus.$emit('changeOrderItem', val )
|
|
|
},
|
|
|
// 撤销
|
|
|
- undo(){
|
|
|
- bus.$emit("changeUndo");
|
|
|
+ undo() {
|
|
|
+ bus.$emit("changeUndo");
|
|
|
},
|
|
|
// 重做
|
|
|
- redo(){
|
|
|
+ redo() {
|
|
|
bus.$emit("changeRedo");
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
async mounted() {
|
|
|
bus.$on("FocusItemChanged", itemMsg => {
|
|
@@ -309,9 +331,9 @@ export default {
|
|
|
this.FocusItemChanged(itemMsg);
|
|
|
});
|
|
|
// 获取底图加载完成后的初始sacle
|
|
|
- await this.getInitScale()
|
|
|
+ await this.getInitScale();
|
|
|
// 监听滚轮 底图缩放比例
|
|
|
- this.getMouseScale()
|
|
|
+ this.getMouseScale();
|
|
|
},
|
|
|
created() {
|
|
|
const href = window.location.href;
|
|
@@ -333,8 +355,8 @@ export default {
|
|
|
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 FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : "";
|
|
|
+ this.urlMsg.floorName = systym[this.urlMsg.categoryId] + "-" + FloorName;
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -418,7 +440,7 @@ li {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- .btn-list:hover{
|
|
|
+ .btn-list:hover {
|
|
|
background: #f5f6f7;
|
|
|
border-radius: 2px;
|
|
|
}
|