Explorar o código

Merge branch 'develop' of http://39.106.8.246:3003/web/wanda-bm-guide into develop

shaun-sheep %!s(int64=4) %!d(string=hai) anos
pai
achega
9c4c6a30c2

BIN=BIN
src/assets/imgs/dl.png


BIN=BIN
src/assets/imgs/er.png


BIN=BIN
src/assets/imgs/qp.png


+ 7 - 0
src/components/PicLarge/src/picLarge.vue

@@ -29,6 +29,13 @@ export default {
     data() {
         return {
             dialogVisible: false,
+            imgUrl: [
+                { url: require('@/assets/images/matter_pop3.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/survey_map.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/matter_pop3.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/survey_overlook.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/survey_project_btn.png'), name: '图片名称1.png' }
+            ],
             ImgUrl: require('../../../assets/images/matter_pop3.png')
         }
     },

+ 160 - 0
src/components/floorMap/canvasFun.vue

@@ -0,0 +1,160 @@
+<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'>
+                <i>
+                    <img src='../../assets/imgs/er.png' alt />
+                </i>
+            </div>
+            <div class='small-block' @click='fitToWindow'>
+                <i>
+                    <img src='../../assets/imgs/qp.png' 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>
+            </div>
+            <div class='small-size' @click='plus'>
+                <i>+</i>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            sliderVal: 1, // 滑块值
+            active: '',
+            min: 1,
+            max: 1000,
+            everyScale: 1, // 每份的放大倍数
+            isSwitch: 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)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.action-box {
+    width: 400px;
+    height: 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;
+    align-items: center;
+    overflow: hidden;
+    .small-block {
+        border-right: 1px solid #e4e5e7;
+        padding: 12px;
+        cursor: pointer;
+        i {
+            width: 16px;
+            height: 16px;
+            display: inline-block;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .small-size {
+        cursor: pointer;
+        padding: 12px;
+        font-size: 28px;
+    }
+    .small-slide {
+        flex: 1;
+        height: 100%;
+        padding: 0 1px;
+        margin-top: 10px;
+        border-left: 1px solid #e4e5e7;
+        border-right: 1px solid #e4e5e7;
+    }
+}
+</style>
+<style lang="less">
+.action-box {
+    .el-slider__button {
+        width: 13px;
+        height: 13px;
+    }
+    .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;
+    }
+}
+</style>

+ 0 - 91
src/components/floorMap/floorBase.vue

@@ -1,91 +0,0 @@
-<!-- 底图 -->
-<template>
-    <div id='floor_base' v-loading='loading'>
-        <div id='fengMap'></div>
-        <div class='canvas-container' ref='graphy'>
-            <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
-        </div>
-        <room-box ref='boxRoom'></room-box>
-    </div>
-</template>
-<script>
-import { SFengParser } from '@saga-web/feng-map'
-import { SFloorParser } from '@saga-web/big'
-import { FloorView } from '@/lib/FloorView'
-import { FloorScene } from '@/lib/FloorScene'
-import RoomBox from '../../views/room/index'
-export default {
-    data() {
-        return {
-            appName: '万达可视化系统',
-            key: '23f30a832a862c58637a4aadbf50a566',
-            mapServerURL: '/wanda',
-            fmapID: '1001724_29',
-            fmap: null,
-            canvasWidth: 700,
-            canvasHeight: 800,
-            fParser: null,
-            loading: true
-        }
-    },
-    components: { RoomBox },
-    methods: {
-        init(floorid) {
-            this.clearGraphy()
-            this.scene = new FloorScene()
-            this.scene.selectContainer.connect('listChange', this, this.listChange)
-            this.fmap = new SFengParser('fengMap', this.mapServerURL, this.key, this.appName, null)
-            // console.log(this.fmap)
-            this.fmap.parseData('1001724_29', Number(floorid), res => {
-                // console.log(res)
-                this.fParser = new SFloorParser(null)
-                // console.log(this.fParser)
-                this.fParser.parseData(res)
-                this.fParser.spaceList.forEach(t => {
-                    t.selectable = true
-                    this.scene.addItem(t)
-                })
-                this.fParser.wallList.forEach(t => this.scene.addItem(t))
-                this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
-                this.fParser.doorList.forEach(t => this.scene.addItem(t))
-                this.fParser.columnList.forEach(t => this.scene.addItem(t))
-                this.fParser.casementList.forEach(t => this.scene.addItem(t))
-                this.view.scene = this.scene
-                this.view.fitSceneToView()
-                this.loading = false
-            })
-        },
-        clearGraphy() {
-            if (this.view) {
-                this.view.scene = null
-                return
-            }
-            this.view = new FloorView('canvas')
-        },
-        listChange(item, ev) {
-            let name = ev[0][0].data.Name
-            if (name.slice(name.length - 2, name.length) == '机房') {
-                this.$refs.boxRoom.open(name)
-            }
-        }
-    },
-    mounted() {
-        this.canvasWidth = this.$refs.graphy.offsetWidth
-        this.canvasHeight = this.$refs.graphy.offsetHeight
-    }
-}
-</script>
-<style lang="less" scoped>
-#floor_base {
-    #fengMap {
-        position: absolute;
-        width: 100px;
-        height: 100px;
-        z-index: -1;
-    }
-    .canvas-container {
-        width: 100%;
-        height: 100%;
-    }
-}
-</style>

+ 114 - 8
src/components/floorMap/index.vue

@@ -1,20 +1,126 @@
+<!-- 底图 -->
 <template>
-    <div id='floor_map'>
-        <floorBase ref='floorBase'></floorBase>
+    <div id='floor_base' v-loading='loading' ref='graphy'>
+        <div id='fengMap'></div>
+        <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
+        <!-- 地图底部操作按钮 -->
+        <div class='strip-bottom'>
+            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' ref='canvasFun'></canvasFun>
+        </div>
+        <room-box ref='boxRoom'></room-box>
     </div>
 </template>
 <script>
-import floorBase from './floorBase'
+import { SFengParser } from '@saga-web/feng-map'
+import { SFloorParser } from '@saga-web/big'
+import { FloorView } from '@/lib/FloorView'
+import { FloorScene } from '@/lib/FloorScene'
+import RoomBox from '@/views/room/index'
+import canvasFun from '@/components/floorMap/canvasFun'
+
 export default {
-    components: { floorBase },
     data() {
-        return {}
+        return {
+            appName: '万达可视化系统',
+            key: '23f30a832a862c58637a4aadbf50a566',
+            mapServerURL: '/wanda',
+            fmapID: '1001724_29',
+            fmap: null,
+            canvasWidth: 1100,
+            canvasHeight: 800,
+            fParser: null,
+            loading: true,
+            view: null
+        }
     },
+    components: { RoomBox, canvasFun },
     methods: {
         init(floorid) {
-            this.$refs.floorBase.init(floorid)
+            this.clearGraphy()
+            this.scene = new FloorScene()
+            this.scene.selectContainer.connect('listChange', this, this.listChange)
+            this.fmap = new SFengParser('fengMap', this.mapServerURL, this.key, this.appName, null)
+            this.fmap.parseData('1001724_29', Number(floorid), res => {
+                this.fParser = new SFloorParser(null)
+                this.fParser.parseData(res)
+                this.fParser.spaceList.forEach(t => {
+                    t.selectable = true
+                    this.scene.addItem(t)
+                })
+                this.fParser.wallList.forEach(t => this.scene.addItem(t))
+                this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
+                this.fParser.doorList.forEach(t => this.scene.addItem(t))
+                this.fParser.columnList.forEach(t => this.scene.addItem(t))
+                this.fParser.casementList.forEach(t => this.scene.addItem(t))
+                this.view.scene = this.scene
+                this.view.fitSceneToView()
+                this.loading = false
+            })
+        },
+        clearGraphy() {
+            if (this.view) {
+                this.view.scene = null
+                return
+            }
+            this.view = new FloorView('canvas')
+        },
+        listChange(item, ev) {
+            let name = ev[0][0].data.Name
+            if (name.slice(name.length - 2, name.length) == '机房') {
+                this.$refs.boxRoom.open(name)
+            }
+        },
+        // 适配底图到窗口
+        fit() {
+            this.view.fitSceneToView()
+        },
+        // 保存为png
+        savePng() {
+            this.view.saveImage(`1.png`, 'png')
+        },
+        // 保存为svg
+        saveSvg() {
+            this.view.saveSceneSvg(`1.svg`, 6400, 4800)
+        },
+        // 保存为json
+        saveJson() {
+            console.log(2222)
+            this.view.saveFloorJson(`1.json`)
+        },
+        // 缩放
+        scale(val) {
+            if (!this.view) {
+                return
+            }
+            let scale = this.view.scale
+            this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
         }
     },
-    mounted() {}
+    mounted() {
+        if (window.screen.height == '768') {
+            this.canvasWidth = this.$refs.graphy.offsetWidth
+            this.canvasHeight = this.$refs.graphy.offsetHeight - 100
+        } else {
+            this.canvasWidth = this.$refs.graphy.offsetWidth
+            this.canvasHeight = this.$refs.graphy.offsetHeight
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+#floor_base {
+    position: relative;
+    #fengMap {
+        position: fixed;
+        width: 100px;
+        height: 100px;
+        z-index: -1;
+    }
+    .strip-bottom {
+        position: absolute;
+        right: 0;
+        bottom: 40px;
+        width: 100%;
+    }
 }
-</script>
+</style>

+ 0 - 58
src/views/equipment/bottomLayer.vue

@@ -1,58 +0,0 @@
-<!-- 楼层和设备底图下面的放大缩小的浮层 -->
-<template>
-    <div class='bottom-layer'>
-        <span class='icon-style'>
-            <a-icon type='arrow-down' />
-        </span>
-        <span class='icon-style'>
-            <a-icon type='poweroff' />
-        </span>
-        <span class='icon-style'>
-            <a-icon type='aliyun' />
-        </span>
-        <span class='icon-style'>
-            <a-icon type='minus-square' />
-        </span>
-        <span class='slider'>
-            <a-slider class='slider-style' id='test' :default-value='30' />
-        </span>
-
-        <span class='icon-style'>
-            <a-icon type='plus-square' />
-        </span>
-    </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style lang="less" scoprd>
-.bottom-layer {
-    position: fixed;
-    width: 360px;
-    height: 40px;
-    line-height: 40px;
-    bottom: 40px;
-    z-index: 2;
-    background: #ffffff;
-    left: 483px;
-    display: flex;
-    .icon-style {
-        width: 40px;
-        display: inline-block;
-        text-align: center;
-        border-right: 1px solid #e4e5e7;
-    }
-    .slider {
-        width: 200px;
-        display: inline-block;
-        text-align: center;
-        border-right: 1px solid #e4e5e7;
-        .slider-style {
-            display: inline-block;
-            width: 180px;
-        }
-    }
-}
-</style>

+ 5 - 45
src/views/floorFunc/index.vue

@@ -1,55 +1,18 @@
 <template>
-    <div id='floorFunc'>
+    <div class='floorFunc-box'>
         <div class='eq-title'>
             <span>{{floorInfo.floorName}}</span>
         </div>
-        <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
-        <bottomLayer></bottomLayer>
         <floorMap ref='floorMap'></floorMap>
-        <!-- <a-button type='primary' @click='legendClik'>点击出现编辑图例备注弹框</a-button>
-        <br />
-        <a-button type='primary' @click='picClik'>点击出现图片预览</a-button>-->
-        <pic-large :imgUrl='imgUrl' ref='pic'></pic-large>
     </div>
 </template>
 <script>
 import floorMap from '@/components/floorMap/index.vue'
-import floorList from '@/components/floorList.vue'
-import bottomLayer from '../equipment/bottomLayer'
 
 export default {
-    components: { floorMap, floorList, bottomLayer },
+    components: { floorMap },
     data() {
         return {
-            imgUrl: [
-                { url: require('@/assets/images/matter_pop3.png'), name: '图片名称1.png' },
-                { url: require('@/assets/images/survey_map.png'), name: '图片名称1.png' },
-                { url: require('@/assets/images/matter_pop3.png'), name: '图片名称1.png' },
-                { url: require('@/assets/images/survey_overlook.png'), name: '图片名称1.png' },
-                { url: require('@/assets/images/survey_project_btn.png'), name: '图片名称1.png' }
-            ],
-            floors: [
-                {
-                    floorName: 'F3',
-                    id: 'f3'
-                },
-                {
-                    floorName: 'F2',
-                    id: 'f2'
-                },
-                {
-                    floorName: 'F1',
-                    id: 'f1'
-                },
-                {
-                    floorName: 'B1',
-                    id: 'b1'
-                },
-                {
-                    floorName: 'B2',
-                    id: 'b2'
-                }
-            ],
             floorInfo: {
                 floorName: 'F1',
                 floorId: '1'
@@ -60,9 +23,6 @@ export default {
         emitFloor(item) {
             this.floorInfo.floorId = item
             this.$refs.floorMap.init(item)
-        },
-        picClik() {
-            this.$refs.pic.open()
         }
     },
     mounted() {
@@ -71,16 +31,16 @@ export default {
 }
 </script>
 <style lang="less">
-#floorFunc {
+.floorFunc-box {
     background: rgba(242, 245, 247, 1);
     height: calc(100vh - 48px);
     flex: 1;
     .eq-title {
         position: fixed;
         z-index: 2;
-        top: 146px;
+        top: 92px;
         left: 242px;
-        width: 141px;
+        width: 140px;
         height: 32px;
         background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
         box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);