Browse Source

'添加视图按钮'

zhangyu 4 years ago
parent
commit
ac599514ab

+ 2 - 0
src/App.vue

@@ -102,6 +102,7 @@ export default {
         console.log('环境变量', process.env.VUE_APP_RealEnv)
         if (this.plazaId) {
             this.getFengMap()
+            store.dispatch("getBrand")
         } else {
             window.fengmapData = null
         }
@@ -173,6 +174,7 @@ export default {
             if (plazaId) {
                 // 请求该项目下的楼层数据
                 this.getFengMap()
+                store.dispatch("getBrand")
             } else {
                 window.fengmapData = null
             }

File diff suppressed because it is too large
+ 18 - 10
src/assets/fonts/iconfont.css


BIN
src/assets/fonts/iconfont.eot


File diff suppressed because it is too large
+ 10 - 4
src/assets/fonts/iconfont.svg


BIN
src/assets/fonts/iconfont.ttf


BIN
src/assets/fonts/iconfont.woff


BIN
src/assets/fonts/iconfont.woff2


+ 26 - 74
src/components/floorMap/canvasFun.vue

@@ -1,40 +1,12 @@
 <template>
     <div>
         <div class='action-box'>
-            <div class='small-block'>
-                <el-dropdown size='mini' placement='top-start' @command='handleCommand'>
-                    <i>
-                        <!-- <img src='../../assets/imgs/dl.png' alt /> -->
-                    </i>
-                    <el-dropdown-menu slot='dropdown'>
-                        <el-dropdown-item command='savePng'>保存为png</el-dropdown-item>
-                        <!-- <el-dropdown-item command='saveSvg'>保存为svg</el-dropdown-item> -->
-                    </el-dropdown-menu>
-                </el-dropdown>
-            </div>
-            <div class='small-block' @click='showText'>
-                <i>
-                    <el-tooltip v-if='isShow' effect='dark' content='隐藏店铺名称' placement='top'>
-                        <!-- <img src='../../assets/imgs/yl.png' alt /> -->
-                    </el-tooltip>
-                    <el-tooltip v-else effect='dark' content='显示店铺名称' placement='top'>
-                        <!-- <img src='../../assets/imgs/er.png' alt /> -->
-                    </el-tooltip>
-                </i>
-            </div>
             <div class='small-block' @click='fitToWindow'>
-                <i>
-                    <!-- <img src='../../assets/imgs/eye2.jpg' alt /> -->
-                </i>
-            </div>
-            <div class='small-size' @click='reduce'>
-                <i>-</i>
-            </div>
-            <div class='small-slide'>
-                <el-slider tooltip-class='tooltip-class' :min='min' v-model='sliderVal' :show-tooltip='false' @input='scale' :max='max'></el-slider>
+                <i class="iconfont wanda-suofang"></i>
             </div>
-            <div class='small-size' @click='plus'>
-                <i>+</i>
+            <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>
@@ -108,18 +80,19 @@ export default {
 </script>
 <style lang="less" scoped>
 .action-box {
-    width: 400px;
-    height: 40px;
+    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;
@@ -130,48 +103,27 @@ export default {
                 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);
+        }
     }
-    .small-size {
-        cursor: pointer;
-        padding: 12px;
-        font-size: 28px;
-    }
-    .small-slide {
-        flex: 1;
-        height: 100%;
-        padding: 0 8px;
-        margin-top: 10px;
-        border-left: 1px solid #e4e5e7;
-        border-right: 1px solid #e4e5e7;
-        z-index: 1;
-    }
-}
-</style>
-<style lang="less">
-.action-box {
-    .el-slider__button {
-        width: 13px;
-        height: 13px;
-        border: 2px solid #025baa;
-    }
-    .el-slider__runway {
-        height: 3px;
-        background-color: #e4e7ed;
-        background: rgba(0, 0, 0, 0.45);
-        border-radius: 1px;
-    }
-    .el-slider__button-wrapper {
-        top: -17px;
-    }
-    .el-slider__bar {
-        height: 3px;
-        background-color: #025baa;
-        border-top-left-radius: 1px;
-        border-bottom-left-radius: 1px;
+    .small-block:last-child {
+        &::after {
+            content: "";
+            background: transparent;
+            border: none;
+        }
     }
-    .action-box .el-slider__runway {
-        background-color: #e8e8e8 !important;
-        background: #e8e8e8 !important;
+    .small-block:active {
+        background: #D2D9DF;
     }
 }
 </style>

+ 1 - 1
src/views/FloorFunc.vue

@@ -59,7 +59,7 @@ export default {
   props: {},
   data() {
     return {
-      floorData: [ ]
+      floorData: []
     }
   },
   computed: {

+ 13 - 3
src/views/overview/MapView.vue

@@ -9,9 +9,10 @@
       <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
       <!-- 地图底部操作按钮 -->
       <div class='strip-bottom'>
-        <!-- <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun> -->
+        <canvasFun @fit='fit' @showText='showText' ref='canvasFun'></canvasFun>
       </div>
-      <floor-list ref="fList" class="bind-floor-list" v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor'></floor-list>
+      <floor-list ref="fList" class="bind-floor-list" v-if='floorsArr.length>0' :floorsArr='floorsArr'
+        @emitFloor='emitFloor'></floor-list>
     </div>
   </div>
 </template>
@@ -57,7 +58,7 @@ export default {
       fParser: null, // 底图解析器
     }
   },
-  props: { },
+  props: {},
   beforeMount() { },
   mounted() {
     this.$nextTick(() => {
@@ -333,6 +334,10 @@ export default {
       }
       this.view = new FloorView("bind-canvas");
     },
+    // 适配底图到窗口
+    fit() {
+      this.view.fitSceneToView()
+    },
     // 小眼睛控制显示铺位名称
     showText(val) {
       this.fParser.spaceList.forEach((t) => {
@@ -389,6 +394,11 @@ export default {
       top: 65px;
       right: 16px;
     }
+    .strip-bottom {
+      position: fixed;
+      bottom: 60px;
+      right: 16px;
+    }
   }
 }
 </style>