Browse Source

底图拖拽、楼层功能楼层、图例、富文本

guoxiaohuan 4 years ago
parent
commit
47f75f5784

+ 2 - 1
package.json

@@ -17,13 +17,14 @@
         "axios": "^0.19.2",
         "core-js": "^3.4.4",
         "element-ui": "^2.13.2",
+        "moment": "^2.24.0",
         "quill": "^1.3.7",
         "vue": "^2.6.10",
         "vue-cookie": "^1.1.4",
         "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.1.3",
         "vuex": "^3.4.0",
-        "moment": "^2.24.0"
+        "wangeditor": "^3.1.1"
     },
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^2.26.0",

+ 13 - 0
src/api/public.js

@@ -13,3 +13,16 @@ export function querySelect({ data, postParams }) {
 export function queryTab({ data, postParams }) {
     return httputils.fetchJson(`/api/data/base/queryTabStatistics`, data, postParams)
 }
+
+// 查询图例统计信息
+export function queryStatis({ data, postParams }) {
+    return httputils.fetchJson(`/serve/graphElement/statistic/query`, data, postParams)
+}
+
+// 图例-查询图片
+//  /serve/Picture/eqruy/{id}
+
+// 更新图例系统信息
+export function updateStatis({ postParams }) {
+    return httputils.fetchJson(`/serve/graphElement/statistic/update`, postParams)
+}

+ 56 - 118
src/components/Legend/src/legend.vue

@@ -10,13 +10,19 @@
             <el-collapse-transition>
                 <div class='legend-tab' v-if='show'>
                     <div class='legend-table'>
-                        <lengend-view :tableData='tableData' @changeSwitch='handleSwich'></lengend-view>
+                        <lengend-view
+                            v-if='viewTable.length>=0'
+                            :loading='loading'
+                            :viewTable='viewTable'
+                            @changeSwitch='handleSwich'
+                            :editChange='editChange'
+                        ></lengend-view>
                     </div>
                 </div>
             </el-collapse-transition>
             <el-collapse-transition>
                 <div v-if='show2'>
-                    <lengend-edit ref='editLen' @cance='cance' :tableData='tableData'></lengend-edit>
+                    <lengend-edit v-if='editTable.length>=0' :loading='loading1' ref='editLen' @saveNum='saveNum' @cance='cance' :editText='editText'></lengend-edit>
                 </div>
             </el-collapse-transition>
             <edit-list></edit-list>
@@ -38,7 +44,7 @@
                     </span>
                 </el-tooltip>
             </div>
-            <remarks ref='EditdMarks'></remarks>
+            <remarks ref='EditdMarks' @editChange='editChange'></remarks>
         </div>
     </div>
 </template>
@@ -47,7 +53,7 @@ import editList from '@/components/edit.vue'
 import lengendView from '@/components/viewLengend'
 import Remarks from '@/components/legendremarks'
 import lengendEdit from '@/components/editLengend'
-
+import { queryStatis, updateStatis } from '@/api/public.js'
 export default {
     name: 'Legend',
     data() {
@@ -61,119 +67,32 @@ export default {
                 { id: 'test3', name: '下级分项' },
                 { id: 'test4', name: '滑动平均滑动平均' }
             ],
-            tableData: [
-                {
-                    project: '建筑面积',
-                    num: '1',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '5',
-                    type: '㎡',
-                    lege: '---'
-                },
-
-                {
-                    project: '建筑面积',
-                    num: '5',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '2',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '3',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '4',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '5',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '2',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '3',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '4',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '3',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '2',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '3',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '4',
-                    type: '㎡',
-                    lege: '---'
-                },
-                {
-                    project: '建筑面积',
-                    num: '3',
-                    type: '㎡',
-                    lege: '---'
-                }
-            ],
+            loading: false,
+            loading1: false,
+            viewTable: [],
+            editTable: [],
             tbData1: [],
             tbData2: [],
             tbData3: [],
             multipleSelection: [],
-            testModel: ['test3']
+            editText: ''
         }
     },
     components: { editList, lengendView, Remarks, lengendEdit },
     methods: {
-        testClick(data) {
-            console.log(data)
-        },
+        testClick(data) {},
         legendClik() {
             this.$refs.EditdMarks.showModal()
         },
+        editChange(val) {
+            this.editText = val
+        },
         showTl() {
             this.show = !this.show
             if (this.show) {
                 this.show2 = false
             }
+            this.queryView(true)
         },
         cance() {
             this.show2 = false
@@ -183,14 +102,39 @@ export default {
             this.show2 = true
         },
         handleSwich(val) {
-            console.log(val)
+            this.queryView(val)
+        },
+        // 查询图例
+        queryView(flag) {
+            let postParams = {}
+            if (flag) {
+                postParams.Filters = "graphId='1';projectId='1';Num!=0"
+            } else {
+                postParams.Filters = "graphId='1';projectId='1'"
+            }
+            let data = {}
+            queryStatis({ data, postParams }).then(res => {
+                this.loading = false
+                this.loading1 = false
+                console.log('图例', res)
+                this.viewTable = res.data.Content
+                this.editTable = res.data.Content
+            })
+        },
+        // 编辑数量
+        queryEdit(val) {
+            let postParams = {
+                Content: val
+            }
+            updateStatis({ postParams }).then(res => {
+                console.log('编辑', res)
+            })
+        },
+        saveNum(val) {
+            this.queryEdit(val)
         }
     },
-    watch: {
-        testModel(n, o) {
-            console.log(n, o)
-        }
-    }
+    mounted() {}
 }
 </script>
 <style lang="less" scoped>
@@ -198,7 +142,6 @@ export default {
     position: relative;
     top: -13px;
     .legend {
-        // padding: 12px 8px;
         text-align: center;
         line-height: 44px;
         width: 44px;
@@ -206,7 +149,9 @@ export default {
         font-size: 14px;
         font-family: MicrosoftYaHei;
         color: rgba(2, 91, 170, 1);
-        background: #ffffff;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+        border-radius: 2px;
         cursor: pointer;
         line-height: 44px;
         text-align: center;
@@ -214,8 +159,6 @@ export default {
 
     .legend-tab {
         position: absolute;
-        // width: 600px;
-        // height: 500px;
         top: 0;
         right: 44px;
         .legend-table {
@@ -223,7 +166,6 @@ export default {
             padding-left: 16px;
             padding-right: 16px;
             width: 420px;
-            // height: 546px;
             background: rgba(255, 255, 255, 1);
             box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
             border-radius: 2px;
@@ -235,7 +177,7 @@ export default {
     position: fixed;
     bottom: 28px;
     right: 28px;
-    z-index: 2;
+    z-index: 1;
     .edit-icon {
         width: 48px;
         height: 48px;
@@ -246,15 +188,11 @@ export default {
         line-height: 48px;
         display: inline-block;
         cursor: pointer;
-        // &:hover + .hover-div {
-        //     display: block;
-        // }
     }
     .hover-div {
         position: absolute;
         bottom: 58px;
         right: 28px;
-        // display: none;
         .icon1 {
             width: 40px;
             height: 40px;
@@ -294,7 +232,7 @@ export default {
     }
     .el-table td,
     .el-table th {
-        padding: 5px 0;
+        padding: 6px 0;
     }
 }
 </style>

+ 15 - 13
src/components/edit.vue

@@ -3,10 +3,10 @@
     <div class='edit_map'>
         <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
             <span class='edit-icon'>
-                <a-icon type='edit' style='color:#fff' />
+                <i class='el-icon-edit'></i>
+                <span v-if='len>0'></span>
             </span>
         </el-tooltip>
-
         <div class='hover-div'>
             <span class='icon1' @click='legendClik'>
                 <a-icon type='form' />
@@ -25,7 +25,8 @@ import Remarks from './legendremarks'
 export default {
     data() {
         return {
-            text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后    的数字,代表此位置的数量'
+            len: 2,
+            text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后的数字,代表此位置的数量'
         }
     },
     methods: {
@@ -56,25 +57,26 @@ export default {
         line-height: 48px;
         display: inline-block;
         cursor: pointer;
-        // &:hover + .hover-div {
-        //     display: block;
-        // }
-        &::before {
-            content: '';
-            display: inline-block;
+        position: relative;
+        i {
+            color: #ffffff;
+            font-size: 20px;
+        }
+        span {
+            position: absolute;
+            right: 4px;
+            top: 2px;
             width: 10px;
             height: 10px;
+            display: inline-block;
+            background: #f54a45;
             border-radius: 50%;
-            background: chocolate;
-            position: absolute;
-            right: 8px;
         }
     }
     .hover-div {
         position: absolute;
         bottom: 58px;
         right: 28px;
-        // display: none;
         .icon1 {
             width: 40px;
             height: 40px;

+ 58 - 17
src/components/editLengend.vue

@@ -5,21 +5,38 @@
 */
 <template>
     <div class='view'>
-        <div class='legend-tab2' v-if='tableData.length>0'>
+        <div class='legend-tab2' v-if='editTable.length>0'>
             <div class='legend-table2-box'>
-                <div class='legend-table2' v-if='tbData1.length>0'>
-                    <el-table ref='multipleTable' height='430px' :data='tbData1' tooltip-effect='dark' @selection-change='handleSelectionChange'>
-                        <el-table-column prop='project' label='项目' width='100'></el-table-column>
-                        <el-table-column prop='num' label='数量'>
+                <div class='legend-table2' v-if='tbData1.length>=0'>
+                    <el-table
+                        v-loading='loading'
+                        :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
+                        ref='multipleTable'
+                        height='430px'
+                        :data='tbData1'
+                        tooltip-effect='dark'
+                        @selection-change='handleSelectionChange'
+                    >
+                        <el-table-column prop label='项目' :show-overflow-tooltip='true' width='100'>
+                            <template slot-scope='{row}'>{{row.Name||'--'}}</template>
+                        </el-table-column>
+                        <el-table-column prop label='数量'>
                             <template slot-scope='{row}'>
                                 <div style='width:50px'>
-                                    <el-input v-model='row.num' size='mini'></el-input>
+                                    <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
                                 </div>
                             </template>
                         </el-table-column>
-                        <el-table-column prop='type' label='单位' width='60'></el-table-column>
-                        <el-table-column prop='lege' label='图例'>
-                            <template slot-scope='scope'>{{ scope.row.lege }}</template>
+                        <el-table-column prop label='单位' width='60'>
+                            <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
+                        </el-table-column>
+                        <el-table-column prop label='图例'>
+                            <template slot-scope='{row}'>
+                                <div v-if='row.Url' class='Url-img'>
+                                    <img :src='`/serve/Picture/query/${row.Url}`' alt />
+                                </div>
+                                <div v-else>{{'--'}}</div>
+                            </template>
                         </el-table-column>
                     </el-table>
                 </div>
@@ -58,26 +75,27 @@
             </div>
 
             <div class='swich'>
-                <el-switch v-model='value'></el-switch>
+                <el-switch v-model='value' @change='witchChange'></el-switch>
                 <span>隐藏数量为0的项目</span>
             </div>
             <div class='legendFoot'>
                 <el-button size='mini' @click='cancel'>取消</el-button>
-                <el-button size='mini' type='primary'>保存</el-button>
+                <el-button size='mini' @click='save' type='primary'>保存</el-button>
             </div>
         </div>
     </div>
 </template>
 <script>
 export default {
-    props: ['tableData'],
+    props: ['editTable', 'loading'],
     data() {
         return {
             value: false,
             showT: false,
             tbData1: [],
             tbData2: [],
-            tbData3: []
+            tbData3: [],
+            editNum: []
         }
     },
     methods: {
@@ -87,12 +105,27 @@ export default {
         cancel() {
             this.$emit('cance')
         },
+        changeTable(val) {
+            this.editNum.push(val)
+            var obj = {}
+            this.editNum = this.editNum.reduce(function(item, next) {
+                obj[next.key] ? '' : (obj[next.key] = true && item.push(next))
+                return item
+            }, [])
+        },
+        witchChange(val) {
+            console.log(val)
+        },
+        save() {
+            console.log(this.editNum)
+            this.$emit('saveNum', this.editNum)
+        },
         init() {
             this.tbData1 = []
             this.tbData2 = []
             this.tbData3 = []
-            if (this.tableData.length > 0) {
-                this.tbData1 = this.tableData
+            if (this.editTable.length > 0) {
+                this.tbData1 = this.editTable
                 // 以下不要动 不要删
                 // let len = this.tableData.length
                 // if (len <= 10) {
@@ -124,7 +157,6 @@ export default {
         position: absolute;
         top: -44px;
         right: 44px;
-        // width: 1046px;
         height: 535px;
         min-width: 350px;
         width: auto;
@@ -150,6 +182,15 @@ export default {
             margin-left: 8px;
         }
     }
+    .Url-img {
+        width: 20px;
+        height: 22px;
+        line-height: 20px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
     .legendFoot {
         position: absolute;
         right: 16px;
@@ -167,7 +208,7 @@ export default {
     }
     .legend-container .el-table td,
     .legend-container .el-table th {
-        padding: 4px 0 !important;
+        padding: 6px 0 !important;
     }
 }
 </style>

+ 1 - 0
src/components/floorList.vue

@@ -89,6 +89,7 @@ export default {
     position: fixed;
     right: 32px;
     top: 196px;
+    z-index: 2;
     .floor-list {
         width: 44px;
         height: 212px;

+ 20 - 3
src/components/legendremarks.vue

@@ -6,35 +6,52 @@
 <template>
     <div class='editModel'>
         <a-modal v-model='visible' :title='title' @ok='handleOk' ok-text='保存' cancel-text='取消' :maskClosable='false' :width='648'>
-            <wd-editor :width='width' :height='height' :text='content'></wd-editor>
+            <!-- <wd-editor :width='width' :height='height' :text='content'></wd-editor> -->
+            <markEditorBar v-model='detail' :isClear='isClear' @change='change'></markEditorBar>
         </a-modal>
     </div>
 </template>
 <script>
+import markEditorBar from '@/components/marksEnduit'
+
 export default {
     name: 'EditdMarks',
     data() {
         return {
+            editText: '',
             title: '编辑图例备注',
             visible: false,
             width: '600px',
             height: '156px',
-            content: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后的数字,代表此位置的数量'
+            content: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后的数字,代表此位置的数量',
+            isClear: false,
+            detail: '<p>刚开始的。。。</p><p>第二条数据的。。。</p>'
         }
     },
+    components: { markEditorBar },
     methods: {
+        change(val) {
+            this.editText = this.detail + val
+            this.$emit('editChange', this.editText)
+            console.log('传给后台的', val)
+            console.log(typeof val)
+        },
         showModal() {
             this.visible = true
         },
         handleOk() {
             this.visible = false
         }
-    }
+    },
+    mounted() {}
 }
 </script>
 
 
 <style lang="less" >
 .editModel {
+    .ant-modal-body {
+        padding: 0 24px 35px !important;
+    }
 }
 </style>

+ 98 - 0
src/components/marksEnduit.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class='editor'>
+        <div ref='toolbar' class='toolbar'></div>
+        <div ref='editor' class='text'></div>
+        <span class='limitNum'>
+            <span>{{num}}</span>/200
+        </span>
+    </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+export default {
+    name: 'editoritem',
+    data() {
+        return {
+            editor: null,
+            info_: null,
+            spanInfo: 0,
+            num: ''
+        }
+    },
+    model: {
+        prop: 'value',
+        event: 'change'
+    },
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        isClear: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        isClear(val) {
+            if (val) {
+                this.editor.txt.clear()
+                this.info_ = null
+            }
+        },
+        value: function(value, e) {
+            if (value !== this.editor.txt.html()) {
+                this.editor.txt.html(this.value)
+            }
+        }
+    },
+    mounted() {
+        this.seteditor()
+        this.editor.txt.html(this.value)
+        this.num = this.value.replace(/<[^>]+>/g, '').length
+    },
+    methods: {
+        seteditor() {
+            this.editor = new E(this.$refs.toolbar, this.$refs.editor)
+            this.editor.customConfig.menus = ['bold', 'italic', 'foreColor']
+            this.editor.customConfig.onchangeTimeout = 100
+            this.editor.customConfig.onchange = html => {
+                this.info_ = html
+                this.num = this.info_.replace(/<[^>]+>/g, '').length
+                this.$emit('change', this.info_)
+            }
+            this.editor.customConfig.onfocus = html => {
+                this.info_ = html
+                this.$emit('change', this.info_)
+            }
+            this.editor.customConfig.onblur = html => {
+                this.info_ = html
+                this.$emit('change', this.info_)
+            }
+            this.editor.create()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.editor {
+    width: 100%;
+    height: 300px;
+    .toolbar {
+        border: 1px solid #ccc;
+    }
+    .text {
+        border: 1px solid #ccc;
+        height: 292px;
+    }
+    .limitNum {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-right: 12px;
+        margin-top: -25px;
+    }
+}
+</style>

+ 39 - 12
src/components/viewLengend.vue

@@ -6,19 +6,35 @@
 <template>
     <div class='view'>
         <el-table
-            ref='multipleTable'
-            :data='tableData'
+            v-loading='loading'
+            ref='dataTable'
+            :data='viewTable'
             tooltip-effect='dark'
-            style='width: 100%'
+            style='width:100%'
             @selection-change='handleSelectionChange'
             height='400px'
+            :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
         >
             <el-table-column type='selection' width='45'></el-table-column>
-            <el-table-column prop='project' label='项目' width='100'></el-table-column>
-            <el-table-column prop='num' label='数量'></el-table-column>
-            <el-table-column prop='type' label='单位' width='70'></el-table-column>
-            <el-table-column prop='lege' label='图例'>
-                <template slot-scope='scope'>{{ scope.row.lege }}</template>
+            <el-table-column prop='Name' :show-overflow-tooltip='true' label='项目' width='100'>
+                <template slot-scope='{row}'>{{row.Name||'--'}}</template>
+            </el-table-column>
+            <el-table-column prop='Num' label='数量'>
+                <template slot-scope='{row}'>
+                    <span v-if='row.Num || row.Num==0'>{{row.Num}}</span>
+                    <span v-else>--</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop='Unit' label='单位' width='70'>
+                <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
+            </el-table-column>
+            <el-table-column prop='Url' label='图例'>
+                <template slot-scope='{row}'>
+                    <div v-if='row.Url' class='Url-img'>
+                        <img :src='`/serve/Picture/query/${row.Url}`' alt />
+                    </div>
+                    <div v-else>{{'--'}}</div>
+                </template>
             </el-table-column>
         </el-table>
         <div class='swich'>
@@ -27,20 +43,22 @@
         </div>
         <div class='remark'>
             <span style='font-weight:bold'>注:</span>
-            <div>
+            <!-- <div>
                 1.主要设备房包括:制冷机房、生活水泵房、消防泵房
                 <br />2.图例后 的数字,代表此位置的数量
                 <br />3.图例后 的数字,代表此位置的数量
-            </div>
+            </div>-->
+            <div v-html='editText'></div>
         </div>
     </div>
 </template>
 <script>
 export default {
-    props: ['tableData'],
+    props: ['viewTable', 'loading', 'editText'],
     data() {
         return {
-            swich: true
+            swich: true,
+            multipleSelection: []
         }
     },
     methods: {
@@ -75,5 +93,14 @@ export default {
         margin: 0px 0 16px 0;
         display: flex;
     }
+    .Url-img {
+        width: 20px;
+        height: 22px;
+        line-height: 20px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
 }
 </style>

+ 7 - 7
src/lib/FloorView.ts

@@ -1,6 +1,6 @@
-import { SGraphItem, SGraphView } from "@saga-web/graph/lib"
-import { SMouseButton, SMouseEvent, SNetUtil } from "@saga-web/base/lib"
-import { SPoint } from "@saga-web/draw/lib"
+import { SGraphItem, SGraphView } from '@saga-web/graph/lib'
+import { SMouseButton, SMouseEvent, SNetUtil } from '@saga-web/base/lib'
+import { SPoint } from '@saga-web/draw/lib'
 
 /**
  * 楼层场景
@@ -90,10 +90,10 @@ export class FloorView extends SGraphView {
         // 按左键移动
         let se = new SMouseEvent(event)
         if (se.buttons & SMouseButton.LeftButton) {
-            if (this.spaceKey) {
-                this.origin.x += se.x - this._leftKeyPos.x
-                this.origin.y += se.y - this._leftKeyPos.y
-            }
+            // if (this.spaceKey) {
+            this.origin.x += se.x - this._leftKeyPos.x
+            this.origin.y += se.y - this._leftKeyPos.y
+            // }
             this._leftKeyPos.x = se.x
             this._leftKeyPos.y = se.y
             this.update()

+ 67 - 28
src/views/floorFunc/index.vue

@@ -1,21 +1,30 @@
 <template>
     <div class='floorFunc-box'>
-        <div class='title-box'>
-            <img src='@/assets/imgs/mainIcon.png' />
-            <div class='eq-title'>
-                <span>{{floorInfo.floorName}}</span>
-            </div>
+        <div class='eq-title'>
+            <span>{{floorInfo.floorName}}</span>
+        </div>
+        <!-- 图例 -->
+        <div class='legend-boxs'>
+            <Legend></Legend>
+        </div>
+        <floor-list></floor-list>
+        <div class='additional-box'>
+            <div class='additional' @click='additionalColl'></div>
+            <el-collapse-transition>
+                <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
+            </el-collapse-transition>
         </div>
         <floorMap ref='floorMap'></floorMap>
     </div>
 </template>
 <script>
 import floorMap from '@/components/floorMap/index.vue'
-
+import floorList from '@/components/floorList.vue'
 export default {
-    components: { floorMap },
+    components: { floorMap, floorList },
     data() {
         return {
+            show: false,
             floorInfo: {
                 floorName: 'F1',
                 floorId: '1'
@@ -26,6 +35,9 @@ export default {
         emitFloor(item) {
             this.floorInfo.floorId = item
             this.$refs.floorMap.init(item)
+        },
+        additionalColl() {
+            this.show = !this.show
         }
     },
     mounted() {
@@ -38,31 +50,58 @@ export default {
     background: rgba(242, 245, 247, 1);
     height: calc(100vh - 48px);
     flex: 1;
-    .title-box {
+    .eq-title {
         position: fixed;
         z-index: 2;
         top: 92px;
-        left: 104px;
-        display: flex;
-        img {
-            margin-top: -5px;
+        left: 242px;
+        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);
+        color: #025baa;
+        font-size: 16px;
+        &::before {
+            width: 2px;
+            height: 16px;
+            background: rgba(2, 91, 170, 1);
+            display: inline-block;
+            content: '';
+            margin-right: 10px;
+            margin-top: 8px;
         }
-        .eq-title {
-            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);
-            color: #025baa;
-            font-size: 16px;
-            &::before {
-                width: 2px;
-                height: 16px;
-                background: rgba(2, 91, 170, 1);
-                display: inline-block;
-                content: '';
-                margin-right: 10px;
-                margin-top: 8px;
-            }
+    }
+    .legend-boxs {
+        position: fixed;
+        z-index: 9;
+        right: 32px;
+        top: 155px;
+    }
+    .additional-box {
+        position: relative;
+        .additional {
+            width: 44px;
+            height: 44px;
+            background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+            border-radius: 2px;
+            position: fixed;
+            right: 32px;
+            top: 420px;
+            z-index: 2;
+            cursor: pointer;
+        }
+        .add-img {
+            width: 560px;
+            height: 325px;
+            background: #ffffff;
+            -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+            box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+            border-radius: 2px;
+            border: 1px solid #e4e5e7;
+            position: absolute;
+            right: 77px;
+            top: 93px;
+            z-index: 2;
         }
     }
 }

+ 2 - 2
src/views/other/index.vue

@@ -20,7 +20,7 @@
                 <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
             </div>
             <!-- 图例 -->
-            <div class='legend-box' v-if='matterId!=1'>
+            <div class='legend-boxs' v-if='matterId!=1'>
                 <Legend></Legend>
             </div>
         </div>
@@ -139,7 +139,7 @@ export default {
             margin-top: 24px;
             flex: 1;
         }
-        .legend-box {
+        .legend-boxs {
             position: fixed;
             right: 32px;
             top: 155px;