Browse Source

编辑图例

guoxiaohuan 5 years ago
parent
commit
7e7ada7825

File diff suppressed because it is too large
+ 2144 - 2047
package-lock.json


+ 5 - 0
src/components/Legend/index.js

@@ -0,0 +1,5 @@
+import Legend from './src/legend.vue'
+Legend.install = function(Vue) {
+    Vue.component(Legend.name, Legend)
+}
+export default Legend

+ 197 - 0
src/components/Legend/src/legend.vue

@@ -0,0 +1,197 @@
+<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>
+            </div>
+        </el-collapse-transition>
+        <edit-list></edit-list>
+    </div>
+</template>
+<script>
+import editList from '@/components/edit.vue'
+
+export default {
+    name: 'Legend',
+    data() {
+        return {
+            show: true,
+            value1: true,
+            dataSelect2: [
+                { id: 'test1', name: '选择项' },
+                { id: 'test2', name: '单平米' },
+                { id: 'test3', name: '下级分项' },
+                { id: 'test4', name: '滑动平均滑动平均' }
+            ],
+            tableData: [
+                {
+                    project: '建筑面积',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '主要设备房',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '机动车位',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '疏散通道口',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '卫生间',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '扶梯/坡梯',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '客梯',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '货梯',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '防火分区',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                },
+                {
+                    project: '连通口',
+                    num: '18500',
+                    type: '㎡',
+                    lege: '---'
+                }
+            ],
+            multipleSelection: [],
+            testModel: ['test3']
+        }
+    },
+    components: { editList },
+    methods: {
+        handleSelectionChange(val) {
+            this.multipleSelection = val
+        },
+        testClick(data) {
+            console.log(data)
+        }
+    },
+    watch: {
+        testModel(n, o) {
+            console.log(n, o)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.legend-container {
+    position: relative;
+    .legend {
+        // padding: 12px 8px;
+        text-align: center;
+        line-height: 44px;
+        width: 44px;
+        height: 44px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(2, 91, 170, 1);
+        line-height: 19px;
+        background: #ffffff;
+        cursor: pointer;
+        line-height: 44px;
+        text-align: center;
+    }
+    .legend-tab {
+        position: absolute;
+        // width: 600px;
+        // height: 500px;
+        top: 0;
+        right: 44px;
+        .legend-table {
+            width: 387px;
+            // 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;
+            }
+        }
+    }
+}
+</style>

+ 1 - 1
src/components/Rotation/src/rotation.vue

@@ -8,7 +8,7 @@
         <div v-if='rotationImg.length==1' height='100%'>
             <img src='../../../assets/imgs/survey_pop1.png' alt />
         </div>
-        <el-carousel v-else trigger='click' style='height:100%' :interval='5000'>
+        <el-carousel v-else trigger='click' style='height:100%' :interval='5000' arrow='always'>
             <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
                 <img :src='item' alt />
             </el-carousel-item>

+ 13 - 8
src/components/edit.vue

@@ -8,27 +8,32 @@
         </el-tooltip>
 
         <div class='hover-div'>
-            <el-tooltip class='item' effect='dark' content='111' placement='left'>
-                <span class='icon1'>
-                    <a-icon type='form' />
-                </span>
-            </el-tooltip>
+            <span class='icon1' @click='legendClik'>
+                <a-icon type='form' />
+            </span>
             <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
                 <span class='icon2' @click='dump'>
                     <a-icon type='form' />
                 </span>
             </el-tooltip>
         </div>
+        <legend-remarks ref='EditdMarks'></legend-remarks>
     </div>
 </template>
 <script>
+import LegendRemarks from '@/components/legendremarks'
 export default {
-    components: {},
+    components: { LegendRemarks },
     data() {
-        return {}
+        return {
+            text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后    的数字,代表此位置的数量'
+        }
     },
     methods: {
-        dump() {}
+        dump() {},
+        legendClik() {
+            this.$refs.EditdMarks.showModal()
+        }
     },
     mounted() {}
 }

src/views/floorFunc/legendremarks.vue → src/components/legendremarks.vue


+ 3 - 0
src/main.js

@@ -27,6 +27,9 @@ Vue.use(Rotation)
 import PicLarge from '@/components/PicLarge'
 Vue.use(PicLarge)
 
+import Legend from '@/components/Legend'
+Vue.use(Legend)
+
 new Vue({
     router,
     store,

+ 1 - 4
src/views/floorFunc/index.vue

@@ -9,7 +9,7 @@
         <!-- <a-button type='primary' @click='legendClik'>点击出现编辑图例备注弹框</a-button>
         <br />
         <a-button type='primary' @click='picClik'>点击出现图片预览</a-button>-->
-        <legend-remarks ref='EditdMarks'></legend-remarks>
+
         <pic-large :imgUrl='imgUrl' ref='pic'></pic-large>
     </div>
 </template>
@@ -59,9 +59,6 @@ export default {
         }
     },
     methods: {
-        legendClik() {
-            this.$refs.EditdMarks.showModal()
-        },
         emitFloor(item) {
             this.floorInfo = item
             this.$refs.floorMap.init()

+ 2 - 0
src/views/other/floorList.vue

@@ -36,6 +36,7 @@ export default {
     },
     methods: {
         tabFloor(item) {
+            console.log(item)
             this.showTopButton = true
             this.showBottomButton = true
             this.floorId = item.id
@@ -155,6 +156,7 @@ export default {
                     border-radius: 4px;
                 }
                 .isActive {
+                    border-radius: 4px;
                     color: #025baa;
                     background: #e1f2ff;
                 }

+ 10 - 1
src/views/other/index.vue

@@ -15,9 +15,13 @@
                     </li>
                 </ul>
             </div>
+
             <div class='other-right' v-if='matterId!=1'>
                 <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
             </div>
+            <div class='legend-box'>
+                <Legend></Legend>
+            </div>
         </div>
         <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
         <zhsx-other v-if='matterId==1'></zhsx-other>
@@ -40,7 +44,7 @@ export default {
             matter,
             floors,
             everySystem: [],
-            matterId: 1,
+            matterId: 2,
             systemName: '供电系统',
             floorInfo: {
                 floorName: 'F1',
@@ -123,6 +127,11 @@ export default {
             margin-top: 24px;
             flex: 1;
         }
+        .legend-box {
+            position: fixed;
+            right: 32px;
+            top: 155px;
+        }
     }
     .qtfugl {
         img {