guoxiaohuan 4 years ago
parent
commit
adb9a0e4b3

+ 179 - 84
src/components/Legend/src/legend.vue

@@ -1,52 +1,55 @@
 <template>
-    <div class='legend-container'>
-        <div class='legend' @click='show=!show'>图例</div>
-        <el-collapse-transition>
-            <div v-show='show' class='legend-tab'>
-                <div class='legend-table'>
-                    <el-table
-                        ref='multipleTable'
-                        :data='tableData'
-                        tooltip-effect='dark'
-                        style='width: 100%'
-                        @selection-change='handleSelectionChange'
-                    >
-                        <el-table-column type='selection' width='55'></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>
-                    </el-table>
-                    <div class='swich'>
-                        <el-switch v-model='value1'></el-switch>
-                        <span>隐藏数量为0的项目</span>
-                    </div>
-                    <div class='remark'>
-                        <span style='font-weight:bold'>注:</span>
-                        1.主要设备房包括:制冷机房、生活水泵房、消防泵房
-                        2.图例后 的数字,代表此位置的数量
-                        3.
-                    </div>
-                    <div class='legendFoot'>
-                        <el-button size='mini'>取消</el-button>
-                        <el-button size='mini' type='primary'>保存</el-button>
+    <div>
+        <div class='legend-container'>
+            <div class='legend' @click='showTl'>图例</div>
+            <el-collapse-transition>
+                <div class='legend-tab' v-if='show'>
+                    <div class='legend-table'>
+                        <lengend-view :tableData='tableData' :swich='value1'></lengend-view>
                     </div>
                 </div>
+            </el-collapse-transition>
+            <el-collapse-transition>
+                <div v-if='show2'>
+                    <lengend-edit ref='editLen' @cance='cance' :tableData='tableData'></lengend-edit>
+                </div>
+            </el-collapse-transition>
+            <edit-list></edit-list>
+        </div>
+        <div class='edit_map'>
+            <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
+                <span class='edit-icon'>
+                    <a-icon type='edit' style='color:#fff' />
+                </span>
+            </el-tooltip>
+
+            <div class='hover-div'>
+                <span class='icon1' @click='legendClik'>
+                    <a-icon type='form' />
+                </span>
+                <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
+                    <span class='icon2' @click='editTl'>
+                        <a-icon type='form' />
+                    </span>
+                </el-tooltip>
             </div>
-        </el-collapse-transition>
-        <edit-list></edit-list>
+            <remarks ref='EditdMarks'></remarks>
+        </div>
     </div>
 </template>
 <script>
 import editList from '@/components/edit.vue'
+import lengendView from '@/components/viewLengend'
+import Remarks from '@/components/legendremarks'
+import lengendEdit from '@/components/editLengend'
 
 export default {
     name: 'Legend',
     data() {
         return {
-            show: true,
+            text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后    的数字,代表此位置的数量',
+            show: false,
+            show2: false,
             value1: true,
             dataSelect2: [
                 { id: 'test1', name: '选择项' },
@@ -57,76 +60,123 @@ export default {
             tableData: [
                 {
                     project: '建筑面积',
-                    num: '18500',
+                    num: '1',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '建筑面积',
+                    num: '5',
+                    type: '㎡',
+                    lege: '---'
+                },
+
+                {
+                    project: '建筑面积',
+                    num: '5',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '建筑面积',
+                    num: '2',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '主要设备房',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '3',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '机动车位',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '4',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '疏散通道口',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '5',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '卫生间',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '2',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '扶梯/坡梯',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '3',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '客梯',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '4',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '货梯',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '3',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '防火分区',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '2',
                     type: '㎡',
                     lege: '---'
                 },
                 {
-                    project: '连通口',
-                    num: '18500',
+                    project: '建筑面积',
+                    num: '3',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '建筑面积',
+                    num: '4',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '建筑面积',
+                    num: '3',
                     type: '㎡',
                     lege: '---'
                 }
             ],
+            tbData1: [],
+            tbData2: [],
+            tbData3: [],
             multipleSelection: [],
             testModel: ['test3']
         }
     },
-    components: { editList },
+    components: { editList, lengendView, Remarks, lengendEdit },
     methods: {
-        handleSelectionChange(val) {
-            this.multipleSelection = val
-        },
         testClick(data) {
             console.log(data)
+        },
+        legendClik() {
+            this.$refs.EditdMarks.showModal()
+        },
+        showTl() {
+            this.show = !this.show
+            if (this.show) {
+                this.show2 = false
+            }
+        },
+        cance() {
+            this.show2 = false
+        },
+        editTl() {
+            this.show = false
+            this.show2 = true
         }
     },
     watch: {
@@ -161,37 +211,82 @@ export default {
         top: 0;
         right: 44px;
         .legend-table {
-            width: 387px;
+            padding-top: 16px;
+            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;
             border: 1px solid rgba(228, 229, 231, 1);
-            .swich {
-                display: flex;
-                justify-content: flex-end;
-                align-items: center;
-                margin-top: 8px;
-                margin-right: 16px;
-                margin-bottom: 12px;
-                span {
-                    margin-left: 8px;
-                }
-            }
-            .remark {
-                font-size: 12px;
-                font-family: MicrosoftYaHeiSemibold;
-                color: rgba(31, 35, 41, 1);
-                line-height: 16px;
-                margin: 0px 16px 16px 16px;
-            }
-            .legendFoot {
-                display: flex;
-                justify-content: flex-end;
-                margin-bottom: 12px;
-                margin-right: 16px;
-            }
         }
     }
 }
+.edit_map {
+    position: fixed;
+    bottom: 28px;
+    right: 28px;
+    z-index: 2;
+    .edit-icon {
+        width: 48px;
+        height: 48px;
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
+        border-radius: 50%;
+        text-align: center;
+        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;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
+            border: 1px solid rgba(31, 36, 41, 0.2);
+            font-size: 16px;
+            display: inline-block;
+            color: #646c73;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 40px;
+            cursor: pointer;
+        }
+        .icon2 {
+            width: 40px;
+            height: 40px;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
+            border: 1px solid rgba(31, 36, 41, 0.2);
+            font-size: 16px;
+            display: inline-block;
+            color: #646c73;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 40px;
+            margin-top: 15px;
+            cursor: pointer;
+        }
+    }
+}
+</style>
+<style lang="less">
+.legend-container {
+    .el-table thead {
+        background: rgba(2, 91, 170, 0.1);
+    }
+    .el-table td,
+    .el-table th {
+        padding: 5px 0;
+    }
+}
 </style>

+ 170 - 0
src/components/editLengend.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class='view'>
+        <div class='legend-tab2' v-if='tableData.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='数量'>
+                            <template slot-scope='{row}'>
+                                <div style='width:50px'>
+                                    <el-input 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>
+                    </el-table>
+                </div>
+                <div class='legend-table2' v-if='tbData2.length>0'>
+                    <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
+                        <el-table-column prop='project' label='项目' width='100'></el-table-column>
+                        <el-table-column prop='num' label='数量'>
+                            <template slot-scope='{row}'>
+                                <div style='width:50px'>
+                                    <el-input 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>
+                    </el-table>
+                </div>
+                <div class='legend-table2' v-if='tbData3.length>0'>
+                    <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
+                        <el-table-column prop='project' label='项目' width='100'></el-table-column>
+                        <el-table-column prop='num' label='数量'>
+                            <template slot-scope='{row}'>
+                                <div style='width:50px'>
+                                    <el-input 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>
+                    </el-table>
+                </div>
+            </div>
+
+            <div class='swich'>
+                <el-switch v-model='value'></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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: ['tableData'],
+    data() {
+        return {
+            value: false,
+            showT: false,
+            tbData1: [],
+            tbData2: [],
+            tbData3: []
+        }
+    },
+    methods: {
+        handleSelectionChange(val) {
+            this.multipleSelection = val
+        },
+        cancel() {
+            this.$emit('cance')
+        },
+        init() {
+            this.tbData1 = []
+            this.tbData2 = []
+            this.tbData3 = []
+            if (this.tableData.length > 0) {
+                let len = this.tableData.length
+                console.log(len)
+                if (len <= 10) {
+                    this.tbData1 = this.tableData
+                } else if (len > 10 && len <= 20) {
+                    this.tbData1 = this.tableData.slice(0, 10)
+                    this.tbData2 = this.tableData.slice(10, len)
+                } else if (len > 10 && len <= 30) {
+                    this.tbData1 = this.tableData.slice(0, 10)
+                    this.tbData2 = this.tableData.slice(10, 20)
+                    this.tbData3 = this.tableData.slice(20, len)
+                } else {
+                    this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
+                    this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
+                    this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
+                }
+                console.log(this.tbData1)
+                console.log(this.tbData2)
+                console.log(this.tbData3)
+            }
+        }
+    },
+    mounted() {
+        this.init()
+    }
+}
+</script>
+<style lang="less" scoped>
+.view {
+    position: relative;
+    .legend-tab2 {
+        position: absolute;
+        top: -44px;
+        right: 44px;
+        // width: 1046px;
+        height: 535px;
+        min-width: 350px;
+        width: auto;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+        border-radius: 2px;
+        border: 1px solid rgba(228, 229, 231, 1);
+        .legend-table2-box {
+            display: flex;
+            justify-content: flex-end;
+            .legend-table2 {
+                padding: 16px 10px;
+                height: 430px;
+                width: 345px;
+            }
+        }
+    }
+    .swich {
+        position: absolute;
+        right: 16px;
+        bottom: 56px;
+        span {
+            margin-left: 8px;
+        }
+    }
+    .legendFoot {
+        position: absolute;
+        right: 16px;
+        bottom: 12px;
+    }
+}
+</style>
+<style lang="less">
+.view {
+    .el-input--mini .el-input__inner {
+        width: 50px;
+    }
+    .el-input__inner {
+        padding: 0 5px;
+    }
+    .legend-container .el-table td,
+    .legend-container .el-table th {
+        padding: 4px 0 !important;
+    }
+}
+</style>

+ 69 - 0
src/components/viewLengend.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class='view'>
+        <el-table
+            ref='multipleTable'
+            :data='tableData'
+            tooltip-effect='dark'
+            style='width: 100%'
+            @selection-change='handleSelectionChange'
+            height='400px'
+        >
+            <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>
+        </el-table>
+        <div class='swich'>
+            <el-switch v-model='swich'></el-switch>
+            <span>隐藏数量为0的项目</span>
+        </div>
+        <div class='remark'>
+            <span style='font-weight:bold'>注:</span>
+            <div>
+                1.主要设备房包括:制冷机房、生活水泵房、消防泵房
+                <br />2.图例后 的数字,代表此位置的数量
+                <br />3.图例后 的数字,代表此位置的数量
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: ['tableData', 'swich'],
+    data() {
+        return {}
+    },
+    methods: {
+        handleSelectionChange(val) {
+            this.multipleSelection = val
+        }
+    },
+    mounted() {}
+}
+</script>
+<style lang="less" scoped>
+.view {
+    .swich {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 8px;
+        margin-right: 0;
+        margin-bottom: 12px;
+        span {
+            margin-left: 8px;
+        }
+    }
+    .remark {
+        font-size: 12px;
+        font-family: MicrosoftYaHeiSemibold;
+        color: rgba(31, 35, 41, 1);
+        line-height: 16px;
+        margin: 0px 0 16px 0;
+        display: flex;
+    }
+}
+</style>

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

@@ -2,7 +2,7 @@
     <div class='other'>
         <div class='other-top'>
             <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
-                <img :src='item.id==matterId?item.icon:item.icon1' alt />
+                <img :src='item.id==matterId?item.icon1:item.icon' alt />
                 {{item.name}}
             </span>
         </div>
@@ -19,7 +19,7 @@
             <div class='other-right' v-if='matterId!=1'>
                 <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
             </div>
-            <div class='legend-box'>
+            <div class='legend-box' v-if='matterId!=1'>
                 <Legend></Legend>
             </div>
         </div>
@@ -44,7 +44,7 @@ export default {
             matter,
             floors,
             everySystem: [],
-            matterId: 2,
+            matterId: 1,
             systemName: '供电系统',
             floorInfo: {
                 floorName: 'F1',