Pārlūkot izejas kodu

'平面图页面'

zhangyu 4 gadi atpakaļ
vecāks
revīzija
e8f9860cec

+ 233 - 0
src/components/floorList.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class='floor-box'>
+    <div class='floor-list'>
+      <div class='icon-top' v-if='floorsArr.length>8'>
+        <!-- @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 />
+      </div>
+      <div class='floor-out' :style='{ height:conHeight + "px" }'>
+        <!--  放开marginTop样式  -->
+        <div class='floor-center' :style='{ marginTop : marginTop }'>
+          <div class='floor-item' :class='item.FloorId == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
+            v-for='(item,index) in floorsArr' :key='index'>{{item.Name}}</div>
+        </div>
+      </div>
+      <div class='icon-bottom' v-if='floorsArr.length>8'>
+        <!-- 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 />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import RepeatClick from '@/directives/repeat-click'
+
+export default {
+  directives: {
+    repeatClick: RepeatClick,
+  },
+  data() {
+    return {
+      currentFloorId: null,
+      marginTop: 0,
+      marginTopMax: 0,
+      showNumber: 8, //需要展示的楼层数   //TODO:
+      height: 39, //一个楼层的高度
+      currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
+      conHeight: 0, // floor-out 的高度
+    }
+  },
+  props: {
+    floorsArr: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    }
+  },
+  methods: {
+    /**
+     * @description 点击上箭头,marginTop<0时执行楼层滚动
+     */
+    increase() {
+      const marginTop = parseInt(this.marginTop)
+      marginTop < 0 && this.changeFloor(1, this.currIndex)
+    },
+    /**
+     * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
+     */
+    decrease() {
+      const marginTop = Math.abs(parseInt(this.marginTop)),
+      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
+
+      this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+      this.changeFloor(0, 0);
+      this.tabFloor(this.floorsArr[0], 0);
+    },
+    /**
+     * @name changeFloor
+     * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
+     * @description 点击图例下方的,上下切换按钮
+     */
+    changeFloor(flag, index) {
+      const len = this.floorsArr.length
+      this.currIndex = index
+      // 点击上箭头
+      if (flag === 1) {
+        index--
+        this.currIndex = index
+      } else if (flag === -1) {
+        //点击下箭头
+        index++
+        this.currIndex = index
+      }
+      this.handlePosition(flag, index, len)
+    },
+    /**
+     * @name tabFloor
+     * @param {Object} item 选中的楼层信息
+     * @param {Number} index 楼层信息在floorsArr数组中的位置
+     */
+    tabFloor(item, index) {
+      this.currentFloorId = item.FloorId;
+      this.$emit("emitFloor", item)
+      this.handlePosition(2, index, this.floorsArr.length)
+    },
+    /**
+     * @description 楼层位置动画处理
+     * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
+     * @param index 楼层 floorsArr
+     * @param len floorsArr
+     */
+    handlePosition(flag, index, len) {
+      // 取出当前 marginTop
+      let marginTop = parseInt(this.marginTop)
+      switch (flag) {
+        // 初始化进入页面,位置处理
+        case 0:
+        // 直接点击楼层,滚动楼层
+        case 2:
+          // 将 marginTop 设置为对应的index 应滚动的距离
+          marginTop = -index * this.height
+          // marginTop 过大时,取最大值marginTopMax
+          if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
+            marginTop = parseInt(this.marginTopMax)
+          }
+          // marginTop>0时,取0,防止楼层上边出现空白
+          marginTop = marginTop >= 0 ? 0 : marginTop
+          // index为0,marginTop设置为0
+          index == 0 && (marginTop = 0)
+          // index为最后一个,设置为最大marginTopMax
+          index == len - 1 && (marginTop = parseInt(this.marginTopMax))
+          this.marginTop = marginTop + 'px'
+          break
+        //  1:向上滚动楼层
+        case 1:
+          this.marginTop = marginTop + this.height + 'px'
+          break
+        // -1向下滚动楼层
+        case -1:
+          this.marginTop = marginTop + this.height * -1 + 'px'
+          break
+        default:
+          break
+      }
+    },
+  },
+  watch: {
+    floorsArr: {
+      handler() {
+        this.init()
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.floor-box {
+  .floor-list {
+    width: 44px;
+    // height: 212px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+    border-radius: 2px;
+    position: relative;
+    padding: 6px 4px;
+    text-align: center;
+    .floor-out {
+      // max-height: 300px; //TODO:
+      min-height: 38px;
+      overflow: hidden;
+      position: relative;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .floor-center {
+        transition: all linear 0.5s;
+        .floor-item {
+          line-height: 28px;
+          height: 28px;
+          cursor: pointer;
+          position: relative;
+          &::after {
+            position: absolute;
+            left: 50%;
+            margin-left: -20%;
+            bottom: -6px;
+            content: "";
+            width: 14px;
+            height: 1px;
+            background: rgba(195, 199, 203, 1);
+            border: 0px solid rgba(228, 229, 231, 1);
+          }
+          & + .floor-item {
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+
+    .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: #025baa;
+      background: #e1f2ff;
+    }
+  }
+  .disabled {
+    cursor: not-allowed !important;
+  }
+}
+</style>

+ 11 - 0
src/router/index.ts

@@ -73,6 +73,17 @@ const routes: Array<RouteConfig> = [
             hideNarBar: true,
         },
     },
+    // 平面图查看
+    {
+        path: '/mapView',
+        name: 'MapView',
+        component: () => import(/* webpackChunkName: "mapView" */ '../views/overview/MapView.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
 ]
 
 const router = new VueRouter({

+ 13 - 6
src/views/FloorFunc.vue

@@ -3,7 +3,10 @@
         <div class="floor-item">
             <div class="floor-item-title">
                 <span class="floor-item-text">F3</span>
-                <a class="floor-item-goMap">查看平面图</a>
+                <p class="floor-item-goMap" @click='goToMapView'>
+                    <span>查看平面图 </span>
+                    <van-icon class='floor-item-arrow' name='arrow' />
+                </p>
             </div>
         </div>
     </div>
@@ -18,7 +21,11 @@ export default {
     components: {},
     beforeMount() {},
     mounted() {},
-    methods: {},
+    methods: {
+        goToMapView() {
+            this.$router.push({ name: 'MapView' })
+        },
+    },
 }
 </script>
 <style lang='less' scoped>
@@ -37,14 +44,14 @@ export default {
             font-size: 16px;
             font-weight: 600;
             display: inline-block;
-            height: 44px;
-            line-height: 44px;
         }
         .floor-item-goMap {
-            height: 44px;
-            line-height: 44px;
             font-size: 14px;
             float: right;
+            .floor-item-arrow {
+                position: relative;
+                top: 2px;
+            }
         }
     }
 }

+ 67 - 0
src/views/overview/MapView.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class='map-view'>
+        <van-nav-bar title="F3平面图" @click-left='backPage'>
+          <template #left>
+            <van-icon name="arrow-left" size="18" color="#333333" />
+          </template>
+        </van-nav-bar>
+        <div id="bind-map-content" v-loading="canvasLoading">
+          <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
+          <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
+        </div>
+    </div>
+</template>
+<script>
+/**
+ * 说明书更新记录
+ */
+import Vue from 'vue'
+import { NavBar } from 'vant'
+import floorList from "@/components/floorList.vue"
+Vue.use(NavBar)
+export default {
+    name: 'MapView',
+    props: {},
+    components: {},
+    data() {
+        return {
+            floorsArr: [],
+            canvasLoading: false
+        }
+    },
+    beforeMount() {},
+    mounted() {
+      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;
+      })
+    },
+    methods: {
+        backPage() {
+            this.$router.go(-1)
+        },
+        // 切换楼层
+        emitFloor(floorObj) {
+          // if (floorObj) {
+          //   this.$nextTick(() => {
+          //     this.canvasLoading = true;
+          //     this.activeFloor = floorObj;
+          //     this.initGraph(floorObj.FloorId);
+          //   })
+          // }
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.map-view {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    #bind-map-content {
+      flex: 1;
+    }
+}
+</style>