|
@@ -21,9 +21,9 @@
|
|
|
</li>-->
|
|
|
<li class="zoom-window">
|
|
|
<div>
|
|
|
- <img class="lock" :src="require(`./../../assets/images/缩小.png`)" alt />
|
|
|
- <span class="percentage">100%</span>
|
|
|
- <img class="lock" :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>
|
|
@@ -37,16 +37,8 @@
|
|
|
<a-icon type="caret-down" class="down-icon" />
|
|
|
</div>
|
|
|
<a-menu slot="overlay">
|
|
|
- <a-menu-item
|
|
|
- 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 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>
|
|
@@ -133,10 +125,61 @@ export default {
|
|
|
label: "水平分布",
|
|
|
img: "t-level"
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ scale: 0.5, //底图缩放比例
|
|
|
+ initScale: 0.5, //初始 底图缩放比例
|
|
|
+ baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
|
|
|
+ scaleStep: 0.05, // +-缩放步进
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ // 缩放比例显示文本
|
|
|
+ scalePercent() {
|
|
|
+ return (this.scale * 100).toFixed(0) + '%'
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ /**
|
|
|
+ * @name getInitScale
|
|
|
+ * @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
|
|
|
+ */
|
|
|
+ getInitScale() {
|
|
|
+ bus.$on('initScale', baseScale => {
|
|
|
+ this.baseScale = Number(baseScale || 1)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name getMouseScale
|
|
|
+ * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
|
|
|
+ */
|
|
|
+ getMouseScale() {
|
|
|
+ // zoom 为缩放后改变的比例
|
|
|
+ bus.$on('mouseScale', zoom => {
|
|
|
+ this.scale = Number((zoom * this.initScale).toFixed(2))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name handleScale
|
|
|
+ * @param { Number } type -1:点击 - 缩小底图; 1:点击 + 放大底图
|
|
|
+ * @description 点击 -+ 缩放底图
|
|
|
+ */
|
|
|
+ handleScale(type) {
|
|
|
+ // +-按钮禁用处理
|
|
|
+ let flag = true
|
|
|
+ // 设置缩放范围 0.05 ~ 100
|
|
|
+ if ((type < 0 && this.scale <= 0.05) || (type > 0 && this.scale >= 100)) {
|
|
|
+ flag = false
|
|
|
+ } else {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ if (!flag) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // emit 缩放比例 this.scale / oldScale
|
|
|
+ let oldScale = this.scale
|
|
|
+ this.scale = Number((oldScale + type * this.scaleStep).toFixed(2))
|
|
|
+ bus.$emit('changeScale', this.scale / oldScale)
|
|
|
+ },
|
|
|
FocusItemChanged(itemMsg) {
|
|
|
this.focusItem = null;
|
|
|
if (itemMsg.itemList.length == 1) {
|
|
@@ -176,14 +219,21 @@ export default {
|
|
|
bus.$emit("changeAlignItem", val);
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ async mounted() {
|
|
|
bus.$on("FocusItemChanged", itemMsg => {
|
|
|
console.log("itemMsg", itemMsg);
|
|
|
this.FocusItemChanged(itemMsg);
|
|
|
});
|
|
|
+<<<<<<< HEAD
|
|
|
bus.$on("setGraphId", setGraphId => {
|
|
|
console.log("itemMsg", setGraphId);
|
|
|
});
|
|
|
+=======
|
|
|
+ // 获取底图加载完成后的初始sacle
|
|
|
+ await this.getInitScale()
|
|
|
+ // 监听滚轮 底图缩放比例
|
|
|
+ this.getMouseScale()
|
|
|
+>>>>>>> 023961b36b18c0d07bd14a95254cd64636182fc4
|
|
|
},
|
|
|
created() {
|
|
|
const href = window.location.href;
|
|
@@ -205,7 +255,12 @@ export default {
|
|
|
obj[arr[0]] = arr[1];
|
|
|
});
|
|
|
this.urlMsg = obj;
|
|
|
+<<<<<<< HEAD
|
|
|
const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName:'';
|
|
|
+=======
|
|
|
+ // ///////////测试代码
|
|
|
+ const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : '';
|
|
|
+>>>>>>> 023961b36b18c0d07bd14a95254cd64636182fc4
|
|
|
this.urlMsg.floorName = systym[this.urlMsg.categoryId] + '-' + FloorName;
|
|
|
}
|
|
|
};
|
|
@@ -251,6 +306,8 @@ li {
|
|
|
height: 16px;
|
|
|
}
|
|
|
.percentage {
|
|
|
+ display: inline-block;
|
|
|
+ width: 35px;
|
|
|
border-bottom: 1px solid #c3c7cb;
|
|
|
margin: 0 13px;
|
|
|
font-size: 14px;
|