Browse Source

图例库管理

zhulizhen1111 4 years ago
parent
commit
bf6bdb57aa

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


+ 3 - 0
src/components/menuList.vue

@@ -117,6 +117,9 @@ export default {
         color: #646c73;
         font-size: 14px;
         cursor: pointer;
+        img {
+            margin-top: -2px;
+        }
     }
     .span1,
     .span2 {

+ 6 - 1
src/router/index.js

@@ -46,11 +46,16 @@ const routes = [
                 path: "analysis",
                 component: () => import("../views/analysis"),
             },
-            //新开页面图例库
+            //图例库管理
             {
                 path: "legendLibrary",
                 component: () => import("../views/legendLibrary"),
             },
+            //图例绘制规则
+            {
+                path: "legendRules",
+                component: () => import("../views/legendRules"),
+            },
         ],
     },
 ]

+ 6 - 4
src/views/equipment/index.vue

@@ -24,7 +24,7 @@
                         <span>{{floorInfo.floorName}}</span>
                     </div>
                     <div class='eq-content'>
-                        <floorMap ref="floorMap"></floorMap>
+                        <floorMap ref='floorMap'></floorMap>
                         <bottomLayer></bottomLayer>
                     </div>
                     <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
@@ -66,7 +66,7 @@ export default {
         },
         emitFloor(item) {
             this.floorInfo = item
-            this.$refs.floorMap.init();
+            this.$refs.floorMap.init()
         },
         dialogVisible(eve) {
             this.$refs.dialog.showModal(eve)
@@ -81,7 +81,8 @@ export default {
 <style lang="less" scoped>
 #equipment {
     background: rgba(242, 245, 247, 1);
-    height: 100%;
+    display: flex;
+    flex: 1;
     .eq-top {
         margin-left: 195px;
         padding-top: 24px;
@@ -100,6 +101,7 @@ export default {
     }
     .eq-bottom {
         display: flex;
+        flex: 1;
         .eq-left {
             position: fixed;
             z-index: 2;
@@ -107,6 +109,7 @@ export default {
             padding-top: 100px;
             color: #646c73;
             font-size: 14px;
+            background: rgba(242, 245, 247, 1);
         }
         .li-style {
             padding: 0 0 18px 35px;
@@ -121,7 +124,6 @@ export default {
             }
         }
         .eq-right {
-            margin-top: 24px;
             flex: 1;
             .eq-right-bottom {
                 display: flex;

+ 8 - 8
src/views/floorFunc/index.vue

@@ -3,14 +3,12 @@
         <div class='eq-title'>
             <span>{{floorInfo.floorName}}</span>
         </div>
-        <!-- <floorMap></floorMap> -->
-        <!-- <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list> -->
-        <!-- <bottomLayer></bottomLayer> -->
-        <!-- <floorMap></floorMap>楼层功能 -->
-        <a-button type='primary' @click='legendClik'>点击出现编辑图例备注弹框</a-button>
+        <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>
-
+        <a-button type='primary' @click='picClik'>点击出现图片预览</a-button>-->
         <legend-remarks ref='EditdMarks'></legend-remarks>
         <pic-large :imgUrl='imgUrl' ref='pic'></pic-large>
     </div>
@@ -66,6 +64,7 @@ export default {
         },
         emitFloor(item) {
             this.floorInfo = item
+            this.$refs.floorMap.init()
         },
         picClik() {
             this.$refs.pic.open()
@@ -77,7 +76,8 @@ export default {
 <style lang="less">
 #floorFunc {
     background: rgba(242, 245, 247, 1);
-    height: 100%;
+    height: calc(100vh - 48px);
+    flex: 1;
     .eq-title {
         position: fixed;
         z-index: 2;

+ 4 - 1
src/views/index.vue

@@ -47,6 +47,9 @@ export default {
 <style lang="less">
 .home {
     width: 100%;
-    height: calc(100vh - 48px);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 </style>

+ 182 - 0
src/views/legendLibrary/addForm.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class='add-form'>
+        <div class='form1'>
+            <span class='span1'>图例名称</span>
+            <span class='span2'>单位</span>
+            <span class='span3' v-if='value==1 || value==3'>展示预览</span>
+        </div>
+        <div class='form2'>
+            <div class='input-left'>
+                <div class='input-left-top'>
+                    <el-input v-model='ruleForm.name' style='width:200px;height:32px;margin-right:48px;'></el-input>
+                    <el-input v-model='ruleForm.name' style='width:200px;height:32px;'></el-input>
+                </div>
+                <div class='input-left-bottom'>
+                    <div class='title'>图例类型</div>
+                    <el-select v-model='value' placeholder='请选择' style='width:442px;height:32px;'>
+                        <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                    </el-select>
+                </div>
+            </div>
+            <div class='input-right' v-if='value==1 || value==3'></div>
+        </div>
+        <div v-if='value==1' class='form3'>
+            <div class='form3-top'>
+                <span class='form3-span1'>填充色</span>
+                <span class='form3-span2'>透明度</span>
+                <span class='form3-span3'>边框颜色</span>
+                <span class='form3-span4'>边框线型</span>
+                <span class='form3-span5'>边框粗细</span>
+            </div>
+            <div class='form3-bottom'>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;margin-right:24px;margin-left:12px;'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:96px;margin-right:24px'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;margin-right:24px'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;margin-right:24px'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+            </div>
+        </div>
+        <div v-if='value==3' class='form5'>
+            <div class='form5-top'>上传新图标</div>
+            <div>
+                <el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' :file-list='fileList'>
+                    <el-button size='small' style='color:#1F2329;'>点击上传</el-button>
+                </el-upload>
+            </div>
+        </div>
+        <div v-if='value==1 || value==3' class='form4'>
+            <div class='form4-top'>
+                <span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
+                <span class='form4-span2'>工程信息化的专业/系统</span>
+                <span class='form4-span3'>铺位可视化typeid</span>
+            </div>
+            <div class='form3-bottom'>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px;'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;'>
+                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            ruleForm: {},
+            options: [
+                {
+                    value: '2',
+                    label: '非图例'
+                },
+                {
+                    value: '1',
+                    label: '区域'
+                },
+                {
+                    value: '3',
+                    label: '图标'
+                }
+            ],
+            value: '1',
+            fileList: []
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style lang='less' scoped>
+.add-form {
+    color: #646c73;
+    margin: 16px 0 0 72px;
+    font-size: 14px;
+    .form1 {
+        margin-bottom: 8px;
+        .span1 {
+            margin-right: 192px;
+        }
+        .span2 {
+            margin-right: 220px;
+        }
+    }
+    .form2 {
+        display: flex;
+        .input-left {
+            .input-left-bottom {
+                margin: 20px 0 8px 0;
+                .title {
+                    margin-bottom: 8px;
+                }
+            }
+        }
+        .input-right {
+            width: 200px;
+            height: 114px;
+            background: rgba(245, 246, 247, 1);
+            display: inline-block;
+            margin-left: 48px;
+        }
+    }
+    .form3 {
+        width: 696px;
+        height: 86px;
+        background: rgba(245, 246, 247, 1);
+        border-radius: 4px;
+        margin-top: 16px;
+        .form3-top {
+            padding: 12px 0 8px 12px;
+            .form3-span1 {
+                margin-right: 102px;
+            }
+            .form3-span2 {
+                margin-right: 78px;
+            }
+            .form3-span3 {
+                margin-right: 88px;
+            }
+            .form3-span4 {
+                margin-right: 88px;
+            }
+        }
+    }
+    .form4 {
+        .form4-top {
+            padding: 20px 0 8px 0;
+            .form4-span1 {
+                margin-right: 32px;
+            }
+            .form4-span2 {
+                margin-right: 102px;
+            }
+        }
+    }
+    .form5 {
+        width: 696px;
+        height: 86px;
+        background: rgba(245, 246, 247, 1);
+        border-radius: 4px;
+        margin-top: 16px;
+        padding-left: 12px;
+        .form5-top {
+            padding: 12px 0 8px 0;
+        }
+    }
+}
+</style>

+ 50 - 0
src/views/legendLibrary/addLegend.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class='add-legend'>
+        <el-dialog :title='title' :visible.sync='dialogVisible'>
+            <add-form></add-form>
+            <span slot='footer' class='dialog-footer'>
+                <el-button @click='dialogVisible = false' size='small'>取 消</el-button>
+                <el-button type='primary' @click='dialogVisible = false' size='small'>确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import addForm from './addForm'
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            info: {},
+            title: ''
+        }
+    },
+    components: { addForm },
+    methods: {
+        open(row, title) {
+            this.dialogVisible = true
+            this.title = title
+            this.info = row
+        }
+    }
+}
+</script>
+
+<style lang='less' scoped>
+.add-legend {
+}
+</style>
+<style lang='less'>
+.add-legend {
+    .el-dialog {
+        width: 840px;
+        height: 509px;
+    }
+    .el-dialog__footer {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+    }
+}
+</style>

+ 180 - 6
src/views/legendLibrary/index.vue

@@ -1,14 +1,188 @@
 <template>
-    <!-- 图例库首页 -->
-    <div class='legend-library'>图例库首页</div>
+    <div class='legend-library'>
+        <div class='legend-library-top'>
+            图例库管理
+            <span class='library-btn'>
+                <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
+                <el-button size='small' type='primary' @click='add'>添加图例</el-button>
+            </span>
+        </div>
+        <div class='legend-library-bottom'>
+            <div class='select-box'>
+                <a-select default-value='全部' style='width: 120px' @change='handleChange'>
+                    <a-select-option value='全部'>全部</a-select-option>
+                </a-select>
+                <a-select default-value='全部' style='width: 120px' @change='handleChange'>
+                    <a-select-option value='全部'>全部</a-select-option>
+                </a-select>
+                <a-select default-value='全部' style='width: 120px' @change='handleChange'>
+                    <a-select-option value='全部'>全部</a-select-option>
+                </a-select>
+                <a-select default-value='全部' style='width: 120px' @change='handleChange'>
+                    <a-select-option value='全部'>全部</a-select-option>
+                </a-select>
+                <a-select default-value='全部' style='width: 120px' @change='handleChange'>
+                    <a-select-option value='全部'>全部</a-select-option>
+                </a-select>
+                <a-select default-value='全部' style='width: 120px' @change='handleChange'>
+                    <a-select-option value='全部'>全部</a-select-option>
+                </a-select>
+                <a-input-search placeholder style='width: 200px' @search='onSearch' />
+            </div>
+            <el-table :data='tableData' style='width: 100%'>
+                <el-table-column prop='name' label='图例名称'></el-table-column>
+                <el-table-column prop='style' label='图例样式'></el-table-column>
+                <el-table-column prop='unit' label='单位'></el-table-column>
+                <el-table-column prop='position' label='对应广场说明书的位置'></el-table-column>
+                <el-table-column prop='type' label='对应工程信息化中的位置/设备分类' width='240'></el-table-column>
+                <el-table-column prop='system' label='对应工程信息化的系统'></el-table-column>
+                <el-table-column prop='typeId' label='铺位可视化typeid'></el-table-column>
+                <el-table-column label='操作' width='100'>
+                    <template slot-scope='scope'>
+                        <el-button @click='modifyClick(scope.row)' type='text' size='small'>修改</el-button>
+                        <el-button @click='deleteClick(scope.row)' type='text' size='small'>做废</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!-- <a-table size='small' style='margin-top:12px' :columns='columns' :bordered='false' :data-source='tableData'>
+                <template v-slot:action>
+                    <a href='javascript:;'>Delete</a>
+                </template>
+            </a-table>-->
+        </div>
+        <add-legend ref='addLegend'></add-legend>
+    </div>
 </template>
 <script>
+import addLegend from './addLegend'
 export default {
-    components: {},
+    components: { addLegend },
     data() {
-        return {}
+        return {
+            columns: [
+                {
+                    title: '图例名称',
+                    dataIndex: 'name',
+                    key: 'name'
+                },
+                {
+                    title: '图例样式',
+                    dataIndex: 'style',
+                    key: 'style'
+                },
+                {
+                    title: '单位',
+                    dataIndex: 'unit',
+                    key: 'unit'
+                },
+                {
+                    title: '对应广场说明书的位置',
+                    dataIndex: 'position',
+                    key: 'position'
+                },
+                {
+                    title: '对应工程信息化中的位置/设备分类',
+                    dataIndex: 'type',
+                    key: 'type'
+                },
+                {
+                    title: '对应工程信息化的系统',
+                    dataIndex: 'system',
+                    key: 'system'
+                },
+                {
+                    title: '铺位可视化typeid',
+                    dataIndex: 'typeId',
+                    key: 'typeId'
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    key: 'action'
+                }
+            ],
+            tableData: [{ name: '车库', style: '--' }, { style: '--' }]
+        }
+    },
+    methods: {
+        dumpRules() {
+            this.$router.push('/home/legendRules')
+        },
+        handleChange() {},
+        onSearch() {},
+        add() {
+            this.$refs.addLegend.open('', '添加图例库')
+        },
+        modifyClick(row) {
+            this.$refs.addLegend.open(row, '修改图例库')
+        },
+        deleteClick(row) {
+            this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
+                confirmButtonText: '作废',
+                cancelButtonText: '取消',
+                type: 'warning',
+                center: true
+            })
+                .then(() => {
+                    this.$message({
+                        type: 'success',
+                        message: '删除成功!'
+                    })
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除'
+                    })
+                })
+        }
     },
-    methods: {},
     mounted() {}
 }
-</script>
+</script>
+<style lang="less" scoped>
+.legend-library {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .legend-library-top {
+        height: 48px;
+        background: rgba(247, 249, 250, 1);
+        text-align: center;
+        line-height: 48px;
+        color: #1f2329;
+        .library-btn {
+            float: right;
+            margin-right: 16px;
+        }
+    }
+    .legend-library-bottom {
+        flex: 1;
+        background: #fff;
+        padding: 0 16px;
+        .select-box {
+            height: 56px;
+            line-height: 56px;
+        }
+    }
+}
+</style>
+<style lang="less">
+.legend-library {
+    th {
+        font-size: 12px;
+        font-family: MicrosoftYaHei;
+        color: #646a73;
+        height: 40px;
+        background: rgba(248, 249, 250, 1);
+    }
+
+    td {
+        color: #1f2429;
+    }
+
+    .ant-select {
+        margin-right: 12px;
+    }
+}
+</style>

+ 17 - 0
src/views/legendLibrary/modifyForm.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class='modify-form'></div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+
+<style lang='less' scoped>
+.modifyForm {
+}
+</style>

+ 184 - 0
src/views/legendRules/index.vue

@@ -0,0 +1,184 @@
+<template>
+    <!-- 图例库首页 -->
+    <div class='legend-rules'>
+        <div class='legend-rules-top'>
+            图例绘制规则
+            <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
+        </div>
+        <div class='legend-rules-bottom'>
+            <div class='legend-rules-left'>
+                <p>楼层功能</p>
+                <el-tree :data='data' :props='defaultProps' default-expand-all @node-click='handleNodeClick'></el-tree>
+            </div>
+            <div class='legend-rules-right'>
+                <el-table :data='tableData' style='width: 100%'>
+                    <el-table-column prop='date' label='图例名称'></el-table-column>
+                    <el-table-column prop='name' label='图例样式'></el-table-column>
+                    <el-table-column prop='address' label='地址'></el-table-column>
+                    <el-table-column label='操作' width='100'>
+                        <template slot-scope='scope'>
+                            <el-button @click='handleClick(scope.row)' type='text' size='small'>删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+        <add-legend ref='addLegend'></add-legend>
+    </div>
+</template>
+<script>
+import addLegend from '../legendLibrary/addLegend'
+export default {
+    components: { addLegend },
+    data() {
+        return {
+            data: [
+                {
+                    label: '楼层分布',
+                    children: [
+                        {
+                            label: '供电系统',
+                            id: 'GD'
+                        },
+                        {
+                            label: '暖通系统',
+                            id: 'NT'
+                        },
+                        {
+                            label: '消防系统',
+                            id: 'XF'
+                        },
+
+                        {
+                            label: '弱电系统',
+                            id: 'RD'
+                        },
+                        {
+                            label: '给排水系统',
+                            id: 'GP'
+                        },
+                        {
+                            label: '电梯系统',
+                            id: 'DT'
+                        },
+                        {
+                            label: '燃气系统',
+                            id: 'RT'
+                        }
+                    ]
+                },
+                {
+                    label: '石材铺装(土建装饰)',
+                    children: []
+                },
+                {
+                    label: '系统原理图',
+                    children: [
+                        {
+                            label: '分支器支路分布图(暖通系统)',
+                            id: 'FZL'
+                        },
+                        {
+                            label: '消防泵房引出管路分布图(消防系统)',
+                            id: 'XFB'
+                        }
+                    ]
+                }
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            tableData: [
+                {
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                },
+                {
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1517 弄'
+                },
+                {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1519 弄'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄'
+                }
+            ]
+        }
+    },
+    methods: {
+        handleNodeClick(data) {
+            console.log(data)
+        },
+        handleClick() {},
+        add() {
+            this.$refs.addLegend.open('', '添加图例库')
+        }
+    },
+    mounted() {}
+}
+</script>
+<style lang="less" scoped>
+.legend-rules {
+    background: rgba(247, 249, 250, 1);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #1f2329;
+    .legend-rules-top {
+        text-align: center;
+        height: 48px;
+        line-height: 48px;
+        font-size: 16px;
+        .rules-button {
+            float: right;
+            margin-right: 16px;
+            margin-top: 8px;
+        }
+    }
+    .legend-rules-bottom {
+        flex: 1;
+        display: flex;
+        .legend-rules-left {
+            width: 288px;
+            padding: 26px;
+        }
+        .legend-rules-right {
+            padding: 16px;
+            flex: 1;
+            background: #fff;
+            color: #1f2429;
+        }
+    }
+}
+</style>
+<style lang="less" >
+.legend-rules {
+    .el-tree {
+        background: rgba(247, 249, 250, 1);
+    }
+    .is-current {
+        background: #e1f2ff !important;
+        border-radius: 4px;
+        font-size: 14px;
+        color: rgba(0, 145, 255, 1);
+    }
+    th {
+        font-size: 12px;
+        font-family: MicrosoftYaHei;
+        color: #646a73;
+        height: 40px;
+        background: rgba(248, 249, 250, 1);
+    }
+    td {
+        color: #1f2429;
+    }
+}
+</style>