ソースを参照

'平面图横屏切换'

zhangyu 4 年 前
コミット
73a8c85252

+ 1 - 0
public/index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />
         <!-- <meta name="viewport" content="target-densitydpi=device-dpi,width=750,user-scalable=0" /> -->
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+        <link rel="stylesheet" href="//at.alicdn.com/t/font_2072883_7onlk4odzkb.css">
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>

+ 5 - 0
src/api/equipmentList.js

@@ -3,4 +3,9 @@ import httputils from '@/api/httputils'
 // 设备设施-主要设备清单
 export function queryEquipmentList({ data, postParams }) {
     return httputils.fetchJson(`/data/sms_asset/queryStatistics`, data, postParams)
+}
+
+// 设备设施-楼层电井口(间)控制商铺范围清单
+export function queryShops({ getParams }) {
+    return httputils.getJson(`/data/sms_shops/query`, getParams)
 }

+ 139 - 113
src/components/floorMap/canvasFun.vue

@@ -1,129 +1,155 @@
 <template>
-    <div>
-        <div class='action-box'>
-            <div class='small-block' @click='fitToWindow'>
-                <i class="iconfont wanda-suofang"></i>
-            </div>
-            <div class='small-block' @click='showText'>
-                <i v-if='isShow' class="iconfont wanda-yulan" title="隐藏店铺名称"></i>
-                <i v-else class="iconfont wanda-yincang" title="显示店铺名称"></i>
-            </div>
-        </div>
+  <div>
+    <div class='action-box'>
+      <div class='small-block' @click='fitToWindow'>
+        <i class="iconfont wanda-suofang"></i>
+      </div>
+      <div class='small-block' @click='showText'>
+        <i v-if='isShow' class="iconfont wanda-yulan" title="隐藏店铺名称"></i>
+        <i v-else class="iconfont wanda-yincang" title="显示店铺名称"></i>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {
-            sliderVal: 1, // 滑块值
-            active: '',
-            min: 1,
-            max: 200,
-            everyScale: 1, // 每份的放大倍数
-            isSwitch: false, // 是否开启吸附
-            isShow: false
-        }
-    },
+  data() {
+    return {
+      sliderVal: 1, // 滑块值
+      active: '',
+      min: 1,
+      max: 200,
+      everyScale: 1, // 每份的放大倍数
+      isSwitch: false, // 是否开启吸附
+      isShow: false
+    }
+  },
 
-    methods: {
-        // 适配大小
-        fitToWindow() {
-            this.$emit('fit')
-        },
-        // 下拉菜单
-        handleCommand(command) {
-            this.$emit(command)
-        },
-        // 是否开启吸附
-        handleDivideCommand(commond) {
-            this.$emit('changeAbsorb', this.isSwitch)
-        },
-        // 切割编辑
-        divide() {
-            this.active = 'divide'
-            this.$emit('divide')
-        },
-        // 清除编辑
-        clearDivide() {
-            this.active = ''
-            this.$emit('clearDivide')
-        },
-        // 减
-        reduce() {
-            this.sliderVal /= 1.1
-            if (this.sliderVal < this.min) {
-                this.sliderVal = this.min
-            }
-            this.scale(this.sliderVal)
-        },
-        // 缩放
-        scale(val) {
-            // 换算
-            let scale = (val * this.everyScale) / 10
-            this.$emit('scale', scale)
-        },
-        // 加
-        plus() {
-            this.sliderVal *= 1.1
-            if (this.sliderVal > this.maxScale) {
-                this.sliderVal = this.maxScale
-            }
-            this.scale(this.sliderVal)
-        },
-        showText() {
-            this.isShow = !this.isShow
-            this.$emit('showText', this.isShow)
-        }
+  methods: {
+    // 适配大小
+    fitToWindow() {
+      this.$emit('fit')
+    },
+    // 下拉菜单
+    handleCommand(command) {
+      this.$emit(command)
+    },
+    // 是否开启吸附
+    handleDivideCommand(commond) {
+      this.$emit('changeAbsorb', this.isSwitch)
+    },
+    // 切割编辑
+    divide() {
+      this.active = 'divide'
+      this.$emit('divide')
+    },
+    // 清除编辑
+    clearDivide() {
+      this.active = ''
+      this.$emit('clearDivide')
+    },
+    // 减
+    reduce() {
+      this.sliderVal /= 1.1
+      if (this.sliderVal < this.min) {
+        this.sliderVal = this.min
+      }
+      this.scale(this.sliderVal)
     },
-    mounted() {}
+    // 缩放
+    scale(val) {
+      // 换算
+      let scale = (val * this.everyScale) / 10
+      this.$emit('scale', scale)
+    },
+    // 加
+    plus() {
+      this.sliderVal *= 1.1
+      if (this.sliderVal > this.maxScale) {
+        this.sliderVal = this.maxScale
+      }
+      this.scale(this.sliderVal)
+    },
+    showText() {
+      this.isShow = !this.isShow
+      this.$emit('showText', this.isShow)
+    }
+  },
+  mounted() { }
 }
 </script>
 <style lang="less" scoped>
 .action-box {
-    width: 40px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
-    border-radius: 2px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: hidden;
-    .small-block {
-        border-right: 1px solid #e4e5e7;
-        padding: 12px;
-        position: relative;
-        cursor: pointer;
-        i {
-            width: 16px;
-            height: 16px;
-            display: inline-block;
-            img {
-                width: 100%;
-                height: 100%;
-            }
-        }
-        &::after {
-            position: absolute;
-            left: 50%;
-            margin-left: -20%;
-            bottom: 0;
-            content: "";
-            width: 14px;
-            height: 1px;
-            background: rgba(195, 199, 203, 1);
-            border: 0px solid rgba(228, 229, 231, 1);
-        }
+  width: 40px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+  border-radius: 2px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  .small-block {
+    border-right: 1px solid #e4e5e7;
+    padding: 12px;
+    position: relative;
+    cursor: pointer;
+    i {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
-    .small-block:last-child {
-        &::after {
-            content: "";
-            background: transparent;
-            border: none;
-        }
+    &::after {
+      position: absolute;
+      left: 50%;
+      margin-left: -20%;
+      bottom: 0;
+      content: "";
+      width: 14px;
+      height: 1px;
+      background: rgba(195, 199, 203, 1);
+      border: 0px solid rgba(228, 229, 231, 1);
     }
-    .small-block:active {
-        background: #D2D9DF;
+  }
+  .small-block:last-child {
+    &::after {
+      content: "";
+      background: transparent;
+      border: none;
+    }
+  }
+  .small-block:active {
+    background: #d2d9df;
+  }
+}
+// 横屏
+@media screen and (orientation: landscape) {
+  .action-box {
+    width: 48px;
+    flex-direction: row;
+    .small-block {
+      border: none;
+      padding: 6px;
+      i {
+        width: 12px;
+        height: 12px;
+      }
+      &::after {
+        position: absolute;
+        left: 119%;
+        margin-bottom: 30%;
+        right: 0;
+        content: "";
+        width: 1px;
+        height: 10px;
+        background: #c3c7cb;
+        border: 0px solid #e4e5e7;
+      }
     }
+  }
 }
 </style>

+ 85 - 23
src/components/floorMap/floorList.vue

@@ -2,9 +2,13 @@
   <div class='floor-box'>
     <div class='floor-list'>
       <div class='icon-top' v-if='floorsArr.length>8'>
+        <i class="iconfont wanda-top" style="color:#9ca2a9;font-size:12px;" v-show='parseInt(marginTop) !== 0'
+          v-repeat-click='increase'></i>
+        <i class="iconfont wanda-top" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
+          v-show='parseInt(marginTop) === 0'></i>
         <!-- @click='changeFloor(1,currIndex)' -->
-        <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/images/iconBlackTop.png' alt />
-        <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/images/iconLightTop.png' alt />
+        <!-- <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/images/iconBlackTop.png' alt />
+        <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/images/iconLightTop.png' alt /> -->
       </div>
       <div class='floor-out' :style='{ height:conHeight + "px" }'>
         <!--  放开marginTop样式  -->
@@ -14,11 +18,15 @@
         </div>
       </div>
       <div class='icon-bottom' v-if='floorsArr.length>8'>
+        <i class="iconfont wanda-bottom" style="color:#9ca2a9;font-size:12px;"
+          v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'></i>
+        <i class="iconfont wanda-bottom" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
+          v-show='parseInt(marginTop) === marginTopMax'></i>
         <!-- v-repeat-click='decrease' -->
-        <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'
+        <!-- <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'
           src='@/assets/images/iconBlackBottom.png' alt />
         <img class='disabled' v-show='parseInt(marginTop) === marginTopMax' src='@/assets/images/iconLightBottom.png'
-          alt />
+          alt /> -->
       </div>
     </div>
   </div>
@@ -39,6 +47,7 @@ export default {
       height: 39, //一个楼层的高度
       currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
       conHeight: 0, // floor-out 的高度
+      direction: 1, //1:竖屏;2:横屏
     }
   },
   props: {
@@ -49,6 +58,20 @@ export default {
       },
     }
   },
+  mounted() {
+    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
+      setTimeout(() => {
+        if (window.orientation === 0 || window.orientation === 180) {
+          this.direction = 1;
+          this.init()
+        }
+        if (window.orientation === 90 || window.orientation === -90) {
+          this.direction = 2;
+          this.init()
+        }
+      }, 300)
+    },false);
+  },
   methods: {
     /**
      * @description 点击上箭头,marginTop<0时执行楼层滚动
@@ -62,18 +85,25 @@ export default {
      */
     decrease() {
       const marginTop = Math.abs(parseInt(this.marginTop)),
-      marginTopMax = Math.abs(parseInt(this.marginTopMax))
+        marginTopMax = Math.abs(parseInt(this.marginTopMax))
       marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
     },
     init() {
-      // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
-      this.conHeight = this.floorsArr.length * 37.5
-      this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
-      this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
+      if (this.direction == 1) {
+        // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
+        this.conHeight = this.floorsArr.length * 37.5
+        this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
+        this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
 
-      this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
-      // this.changeFloor(0, 0);
-      // this.tabFloor(this.floorsArr[0], 0);
+        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+        // this.changeFloor(0, 0);
+        // this.tabFloor(this.floorsArr[0], 0);
+      } else if (this.direction == 2) {
+        this.conHeight = this.floorsArr.length * 30
+        this.conHeight = this.conHeight >= 230 ? 230 : this.conHeight
+        this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
+        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+      }
     },
     /**
      * @name changeFloor
@@ -152,6 +182,12 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    direction: {
+      handler() {
+        this.init()
+      },
+      immediate: true
     }
   }
 }
@@ -205,29 +241,55 @@ export default {
     .icon-top {
       cursor: pointer;
       height: 18px;
-      img {
-        width: 18px;
-        height: 100%;
-        margin-top: -10px;
-      }
     }
     .icon-bottom {
       cursor: pointer;
       height: 18px;
-      img {
-        width: 18px;
-        height: 100%;
-        margin-top: -10px;
-      }
     }
     .isActive {
       border-radius: 4px;
       color: #ffffff;
-      background: #025BAA;
+      background: #025baa;
     }
   }
   .disabled {
     cursor: not-allowed !important;
   }
 }
+// 横屏
+@media screen and (orientation: landscape) {
+  .floor-box {
+    .floor-list {
+      width: 30px;
+      .floor-out {
+        .floor-center {
+          .floor-item {
+            line-height: 20px;
+            height: 20px;
+            &::after {
+              position: absolute;
+              left: 50%;
+              margin-left: -20%;
+              bottom: -2px;
+              content: "";
+              width: 10px;
+              height: 1px;
+              background: rgba(195, 199, 203, 1);
+              border: 0px solid rgba(228, 229, 231, 1);
+            }
+            & + .floor-item {
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+      .icon-top {
+        height: 10px;
+      }
+      .icon-bottom {
+        height: 10px;
+      }
+    }
+  }
+}
 </style>

+ 2 - 2
src/main.ts

@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 // 引入lib-flexible
 import 'lib-flexible'
-import './assets/fonts/iconfont.css';
+// import './assets/fonts/iconfont.css';
 Vue.config.productionTip = false
 // 引入使用fastclick
 // 移动端点击有300ms延迟,主要是为了解决双击缩放,浏览器等待300ms以判断是否是双击操作。
@@ -22,4 +22,4 @@ new Vue({
     router,
     store,
     render: (h) => h(App),
-}).$mount('#app')
+}).$mount('#app')

+ 143 - 4
src/views/overview/MapView.vue

@@ -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>