|
@@ -13,6 +13,9 @@
|
|
|
</div>
|
|
|
<floor-list ref="fList" class="bind-floor-list" v-if='floorsArr.length>0' :floorsArr='floorsArr'
|
|
|
@emitFloor='emitFloor'></floor-list>
|
|
|
+ <div class="change-direction" @click='changeOri'>
|
|
|
+ <i class="iconfont wanda-hengshuping"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -26,6 +29,7 @@ import { NavBar, Toast } from 'vant'
|
|
|
import floorList from "@/components/floorMap/floorList.vue"
|
|
|
import canvasFun from '@/components/floorMap/canvasFun'
|
|
|
import { readGroup, queryStatis, graphQuery } from '@/api/public'
|
|
|
+import { queryShops } from '@/api/equipmentList.js'
|
|
|
import { FloorView } from '@/lib/FloorView'
|
|
|
import { FloorScene } from '@/lib/FloorScene'
|
|
|
import { STopologyParser } from '@/lib/parsers/STopologyParser'
|
|
@@ -56,13 +60,25 @@ export default {
|
|
|
count: 0, // 顶楼为多张图时计数器
|
|
|
topologyParser: null, // 解析器数据
|
|
|
fParser: null, // 底图解析器
|
|
|
+ direction: '竖屏',
|
|
|
}
|
|
|
},
|
|
|
props: {},
|
|
|
beforeMount() { },
|
|
|
mounted() {
|
|
|
+ window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
|
|
|
+ document.getElementById("bind-canvas").width = document.getElementById("bind-map-content").offsetWidth;
|
|
|
+ document.getElementById("bind-canvas").height = document.getElementById("bind-map-content").offsetHeight;
|
|
|
+ setTimeout(() => {
|
|
|
+ if (window.orientation === 0 || window.orientation === 180) {
|
|
|
+ this.init(this.floorid)
|
|
|
+ }
|
|
|
+ if (window.orientation === 90 || window.orientation === -90) {
|
|
|
+ this.init(this.floorid)
|
|
|
+ }
|
|
|
+ }, 300)
|
|
|
+ }, false);
|
|
|
this.$nextTick(() => {
|
|
|
- console.log(document.getElementById("bind-map-content").offsetHeight)
|
|
|
document.getElementById("bind-canvas").width = document.getElementById("bind-map-content").offsetWidth;
|
|
|
document.getElementById("bind-canvas").height = document.getElementById("bind-map-content").offsetHeight;
|
|
|
})
|
|
@@ -94,6 +110,7 @@ export default {
|
|
|
this.clearGraphy()
|
|
|
this.scene = new FloorScene()
|
|
|
if (this.haveFengMap == 1) {
|
|
|
+ this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
|
this.getGraphDetail().then((res) => {
|
|
|
if (res.Content.length == 1) {
|
|
|
const data = res.Content[0]
|
|
@@ -277,7 +294,7 @@ export default {
|
|
|
// 多边形
|
|
|
this.topologyParser.zoneLegendList.forEach((t) => {
|
|
|
this.scene.addItem(t)
|
|
|
- t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ // t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
})
|
|
|
// 增加文字
|
|
|
this.topologyParser.textMarkerList.forEach((t) => {
|
|
@@ -294,14 +311,14 @@ export default {
|
|
|
// 增加图标类图例
|
|
|
this.topologyParser.imageLegendList.forEach((t) => {
|
|
|
this.scene.addItem(t)
|
|
|
- t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ // t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
})
|
|
|
// 增加管线类
|
|
|
// 增加图标类图例
|
|
|
this.topologyParser.relationList.forEach((t) => {
|
|
|
t.selectable = true
|
|
|
this.scene.addItem(t)
|
|
|
- t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ // t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
})
|
|
|
// this.view.fitSceneToView()
|
|
|
// this.view.minScale = this.view.scale
|
|
@@ -334,6 +351,63 @@ export default {
|
|
|
}
|
|
|
this.view = new FloorView("bind-canvas");
|
|
|
},
|
|
|
+ listChange(item, ev) {
|
|
|
+ if (ev[0].length) {
|
|
|
+ // 选中电井设置电井关联的商铺高亮
|
|
|
+ this.setHightLight(ev[0])
|
|
|
+ } else {
|
|
|
+ this.clearHightLight()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选中电井关联的商铺高亮
|
|
|
+ setHightLight(arr) {
|
|
|
+ this.clearHightLight()
|
|
|
+ arr.forEach((item) => {
|
|
|
+ let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
|
|
|
+ // 添加了位置类型并且选中的类型为电井类型
|
|
|
+ if (
|
|
|
+ (item.data.GraphElementId == '100050' ||
|
|
|
+ item.data.GraphElementId == '100055' ||
|
|
|
+ item.data.GraphElementId == '100056' ||
|
|
|
+ item.data.GraphElementId == '100057') &&
|
|
|
+ location
|
|
|
+ ) {
|
|
|
+ let getParams = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ floor: this.floorid,
|
|
|
+ keyword: `${location}:wellnum;`,
|
|
|
+ }
|
|
|
+ queryShops({ getParams }).then((res) => {
|
|
|
+ let shopsnumList = []
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ for (let floor in res.data[0]) {
|
|
|
+ if (res.data[0][floor].length) {
|
|
|
+ res.data[0][floor].forEach((v) => {
|
|
|
+ shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (shopsnumList.length) {
|
|
|
+ this.fParser.spaceList.forEach((item) => {
|
|
|
+ if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
|
|
|
+ item.highLightFlag = true
|
|
|
+ item.zOrder = 30
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清除电井关联商铺的高亮状态
|
|
|
+ clearHightLight() {
|
|
|
+ ItemColor.spaceHighColor = new SColor('#FBF2CC')
|
|
|
+ this.fParser.spaceList.forEach((item) => {
|
|
|
+ item.highLightFlag = false
|
|
|
+ item.zOrder = ItemOrder.spaceOrder
|
|
|
+ })
|
|
|
+ },
|
|
|
// 适配底图到窗口
|
|
|
fit() {
|
|
|
this.view.fitSceneToView()
|
|
@@ -363,6 +437,35 @@ export default {
|
|
|
}
|
|
|
return graphQuery(data)
|
|
|
},
|
|
|
+ changeOri() {
|
|
|
+ if (this.direction === '竖屏') {
|
|
|
+ this.roateX()
|
|
|
+ this.direction = '横屏'
|
|
|
+ } else if (this.direction === '横屏') {
|
|
|
+ this.roateY()
|
|
|
+ this.direction = '竖屏'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ roateX() {
|
|
|
+ console.log('横屏')
|
|
|
+ window.webkit &&
|
|
|
+ webkit.messageHandlers.cordova_iab.postMessage(
|
|
|
+ JSON.stringify({
|
|
|
+ method: 'roateX',
|
|
|
+ })
|
|
|
+ )
|
|
|
+ },
|
|
|
+
|
|
|
+ // 竖屏
|
|
|
+ roateY() {
|
|
|
+ console.log('竖屏')
|
|
|
+ window.webkit &&
|
|
|
+ webkit.messageHandlers.cordova_iab.postMessage(
|
|
|
+ JSON.stringify({
|
|
|
+ method: 'roateY',
|
|
|
+ })
|
|
|
+ )
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
'$route.params.floor': {
|
|
@@ -399,6 +502,42 @@ export default {
|
|
|
bottom: 60px;
|
|
|
right: 16px;
|
|
|
}
|
|
|
+ .change-direction {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 60px;
|
|
|
+ left: 16px;
|
|
|
+ .wanda-hengshuping {
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 横屏
|
|
|
+@media screen and (orientation: landscape) {
|
|
|
+ .map-view {
|
|
|
+ /deep/ .van-nav-bar {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ #bind-map-content {
|
|
|
+ .bind-floor-list {
|
|
|
+ position: fixed;
|
|
|
+ top: 47px;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+ .strip-bottom {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 15px;
|
|
|
+ right: 60px;
|
|
|
+ }
|
|
|
+ .change-direction {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 15px;
|
|
|
+ left: 15px;
|
|
|
+ .wanda-hengshuping {
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|