Browse Source

楼层和设备公共组件封装

zhulizhen1111 4 years ago
parent
commit
585dc48570

BIN
src/assets/imgs/eq.jpg


+ 142 - 0
src/components/floorList.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class='floor-box'>
+        <a-icon class='box-style' type='check-square' @click='showLegend' />
+        <div class='floor-list'>
+            <a-icon class='i-style' v-if='showTopButton' type='caret-up' @click='removeTop' />
+            <a-icon class='i-style' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
+            <span
+                class='eq-floor'
+                v-for='(item,index) in floors'
+                :class='item.id==floorId?"isActive":""'
+                :key='index'
+                @click='tabFloor(item)'
+            >{{item.floorName}}</span>
+            <a-icon class='i-style' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
+            <a-icon class='i-style' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />
+        </div>
+        <a-icon class='box-style' type='unordered-list' @click='showPic' />
+        <legendBox ref='legend'></legendBox>
+    </div>
+</template>
+
+<script>
+import legendBox from '@/views/equipment/legendBox'
+export default {
+    data() {
+        return {
+            floorId: 'f1',
+            floorName: 'F3',
+            showTopButton: true,
+            showBottomButton: true
+        }
+    },
+    props: {
+        floors: {
+            default: []
+        }
+    },
+    components: { legendBox },
+    methods: {
+        tabFloor(item) {
+            this.floorId = item.id
+            this.floorName = item.floorName
+            this.$emit('emitFloor', item)
+        },
+        removeTop() {
+            let tempFloorIdList = []
+            let tempFloorIndex = 0
+            this.floors.map(el => {
+                tempFloorIdList.push(el.id)
+            })
+            tempFloorIdList.forEach((el, index) => {
+                if (el == this.floorId) {
+                    tempFloorIndex = index
+                    if (tempFloorIndex == 1) {
+                        this.showTopButton = false
+                    }
+                    if (tempFloorIndex != 0) {
+                        tempFloorIndex--
+                        this.showBottomButton = true
+                    }
+                    console.log(tempFloorIndex)
+                }
+            })
+            this.floorId = tempFloorIdList[tempFloorIndex]
+        },
+        removeBottom() {
+            let tempFloorIdList = []
+            let tempFloorIndex = 0
+            this.floors.map(el => {
+                tempFloorIdList.push(el.id)
+            })
+            console.log(tempFloorIdList)
+            tempFloorIdList.forEach((el, index) => {
+                if (el == this.floorId) {
+                    tempFloorIndex = index
+                    if (tempFloorIndex == tempFloorIdList.length - 2) {
+                        this.showBottomButton = false
+                    }
+                    if (tempFloorIndex != tempFloorIdList.length - 1) {
+                        tempFloorIndex++
+                        this.showTopButton = true
+                    }
+                }
+            })
+            this.floorId = tempFloorIdList[tempFloorIndex]
+            console.log(this.floorId)
+        },
+        showLegend() {
+            this.$refs.legend.open()
+        },
+        showPic() {}
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.floor-box {
+    position: fixed;
+    top: 154px;
+    right: 32px;
+    z-index: 2;
+    .floor-list {
+        width: 40px;
+        background: #ffffff;
+        text-align: center;
+        .eq-floor {
+            width: 28px;
+            height: 28px;
+            line-height: 28px;
+            text-align: center;
+            background: #fff;
+            display: block;
+            cursor: pointer;
+            font-size: 14px;
+            margin-left: 6px;
+            border-radius: 4px;
+        }
+        .isActive {
+            color: #025baa;
+            background: #e1f2ff;
+        }
+        .i-style {
+            width: 40px;
+            height: 32px;
+            background: #fff;
+            text-align: center;
+            line-height: 32px;
+        }
+    }
+
+    .box-style {
+        width: 40px;
+        height: 40px;
+        background: #fff;
+        display: block;
+        line-height: 40px;
+        text-align: center;
+        margin: 8px 0;
+        color: #025baa;
+    }
+}
+</style>

+ 1 - 1
src/components/floorMap/floorBase.vue

@@ -1,6 +1,6 @@
 <template>
     <div id='floor_base'>
-        <canvas id='map' :width='initWidth' height='800'></canvas>
+        <canvas id='map' :width='initWidth' height='700'></canvas>
     </div>
 </template>
 <script>

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

@@ -0,0 +1,54 @@
+<template>
+    <div class='bottom-layer'>
+        <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: 30%;
+    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>

+ 37 - 0
src/views/equipment/eqDialog.vue

@@ -0,0 +1,37 @@
+<template>
+    <a-modal v-model='visible' :footer='null' :title='`${systemName}-${dialogInfo.label}`' @ok='handleOk' :maskClosable='false' width='100%'>
+        <a-radio-group v-model='mode'>
+            <a-radio-button v-for='(value,index) in dialogInfo.children' :key='"u"+index' :value='value.label'>{{value.label}}</a-radio-button>
+        </a-radio-group>
+        <a-tabs @prevClick='callback' @nextClick='callback'>
+            <img src='@/assets/imgs/eq.jpg' />
+        </a-tabs>
+    </a-modal>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            mode: 'top'
+        }
+    },
+    props: ['dialogInfo', 'systemName'],
+    methods: {
+        showModal() {
+            this.visible = true
+        },
+        handleOk(e) {
+            console.log(e)
+            this.visible = false
+        },
+        callback(val) {
+            console.log(val)
+        }
+    }
+}
+</script>
+
+<style>
+</style>

+ 666 - 3
src/views/equipment/index.vue

@@ -1,7 +1,670 @@
 <template>
-    <div id='equipment'>设备设施</div>
+    <div id='equipment'>
+        <div class='eq-top'>
+            <span
+                class='eq-system'
+                v-for='(item,index) in system'
+                :class='item.id==systemId?"isActive":""'
+                :key='index'
+                @click='tabSyatem(item)'
+            >{{item.name}}</span>
+        </div>
+        <div class='eq-bottom'>
+            <div class='eq-left'>
+                <ul>
+                    <li class='li-style' v-for='(eve,index) in everySystem' :key='"o"+index' @click='dialogVisible(eve)'>
+                        <span class='circle'></span>
+                        {{eve.label}}
+                    </li>
+                </ul>
+            </div>
+            <div class='eq-right'>
+                <div class='eq-right-bottom'>
+                    <div class='eq-title'>
+                        <span>{{floorInfo.floorName}}</span>
+                    </div>
+                    <div class='eq-content'>
+                        <floorMap></floorMap>
+                        <bottomLayer></bottomLayer>
+                    </div>
+                    <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
+                    <div class='edit-box'></div>
+                </div>
+            </div>
+        </div>
+        <eq-dialog ref='dialog' :systemName='systemName' :dialogInfo='dialogInfo'></eq-dialog>
+    </div>
 </template>
-<style lang="less">
+
+<script>
+import floorList from '@/components/floorList.vue'
+import floorMap from '@/components/floorMap/index.vue'
+import eqDialog from './eqDialog'
+import bottomLayer from './bottomLayer'
+export default {
+    data() {
+        return {
+            system: [
+                {
+                    name: '供电系统',
+                    id: 1,
+                    children: [
+                        {
+                            label: '系统原理图',
+                            children: []
+                        },
+                        {
+                            label: '变配电室内部设备清单',
+                            children: []
+                        },
+                        {
+                            label: '楼层电井(间)控制商铺范围清单',
+                            children: [
+                                {
+                                    label: 'BA楼宇智能化'
+                                },
+                                {
+                                    label: '门禁管理(科松)'
+                                },
+                                {
+                                    label: '视频监控'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维修事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    name: '暖通系统',
+                    id: 2,
+                    children: [
+                        {
+                            label: '系统原理图',
+                            children: [
+                                {
+                                    label: '空调系统原理图'
+                                },
+                                {
+                                    label: '超市空调系统原理图'
+                                },
+                                {
+                                    label: '分水器支路分布明细'
+                                },
+                                {
+                                    label: '分水器支路分布图'
+                                }
+                            ]
+                        },
+                        {
+                            label: '主要设备清单',
+                            children: [
+                                {
+                                    label: '冷热源机房内'
+                                },
+                                {
+                                    label: '楼层末端'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维修事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    name: '消防系统',
+                    id: 3,
+                    children: [
+                        {
+                            label: '系统原理图',
+                            children: [
+                                {
+                                    label: '消防电系统原理示意图'
+                                },
+                                {
+                                    label: '消防喷淋系统示意图'
+                                },
+                                {
+                                    label: '消防窗喷系统示意图'
+                                },
+                                {
+                                    label: '消防栓系统示意图'
+                                },
+                                {
+                                    label: '消防泵房引出管路分布图'
+                                }
+                            ]
+                        },
+                        {
+                            label: '主要设备清单',
+                            children: []
+                        },
+                        {
+                            label: '维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维修事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    name: '弱电系统',
+                    id: 4,
+                    children: [
+                        {
+                            label: '系统原理图',
+                            children: [
+                                {
+                                    label: '视频监控系统原理图'
+                                },
+                                {
+                                    label: '门禁管理系统原理图'
+                                },
+                                {
+                                    label: 'BA楼宇智能化系统原理图'
+                                }
+                            ]
+                        },
+                        {
+                            label: '主要设备清单',
+                            children: [
+                                {
+                                    label: 'BA楼宇智能化'
+                                },
+                                {
+                                    label: '门禁管理'
+                                },
+                                {
+                                    label: '视频监控'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维修事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    name: '给排水系统',
+                    id: 5,
+                    children: [
+                        {
+                            label: '系统原理图',
+                            children: [
+                                {
+                                    label: '给水系统原理示意图'
+                                },
+                                {
+                                    label: '排水系统原理示意图'
+                                }
+                            ]
+                        },
+                        {
+                            label: '主要设备清单',
+                            children: []
+                        },
+                        {
+                            label: '维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '维修事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    name: '电梯系统',
+                    id: 6,
+                    children: [
+                        {
+                            label: '系统原理图',
+                            children: [
+                                {
+                                    label: '扶梯原理图'
+                                },
+                                {
+                                    label: '直梯原理图'
+                                }
+                            ]
+                        },
+                        {
+                            label: '主要设备清单',
+                            children: []
+                        },
+                        {
+                            label: '维修及维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    name: '燃气系统',
+                    id: 7,
+                    children: [
+                        {
+                            label: '系统原理图'
+                        },
+                        {
+                            label: '主要设备清单',
+                            children: []
+                        },
+                        {
+                            label: '维修及维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    name: '土建系统',
+                    id: 8,
+                    children: [
+                        {
+                            label: '建筑立面图',
+                            children: [
+                                {
+                                    label: '西面外立面'
+                                },
+                                {
+                                    label: '南面外立面'
+                                },
+                                {
+                                    label: '东面外立面'
+                                },
+                                {
+                                    label: '北面外立面'
+                                }
+                            ]
+                        },
+                        {
+                            label: '主要材料清单',
+                            children: []
+                        },
+                        {
+                            label: '维修及维保事项',
+                            children: [
+                                {
+                                    label: '中控室/消防泵房内'
+                                },
+                                {
+                                    label: '中控室/消防泵房外'
+                                }
+                            ]
+                        },
+                        {
+                            label: '专维及其他事项',
+                            children: [
+                                {
+                                    label: '给水系统专项维修'
+                                },
+                                {
+                                    label: '排水系统专项维修'
+                                },
+                                {
+                                    label: '其他事项'
+                                }
+                            ]
+                        },
+                        {
+                            label: '查看图纸',
+                            children: []
+                        }
+                    ]
+                }
+            ],
+            everySystem: [],
+            floors: [
+                {
+                    floorName: 'F3',
+                    id: 'f3'
+                },
+                {
+                    floorName: 'F2',
+                    id: 'f2'
+                },
+                {
+                    floorName: 'F1',
+                    id: 'f1'
+                },
+                {
+                    floorName: 'B1',
+                    id: 'b1'
+                },
+                {
+                    floorName: 'B2',
+                    id: 'b2'
+                }
+            ],
+            systemId: 1,
+            systemName: '供电系统',
+            floorInfo: {
+                floorName: 'F1',
+                floorId: 'f1'
+            },
+            dialogInfo: {}
+        }
+    },
+    components: { floorList, eqDialog, floorMap, bottomLayer },
+    methods: {
+        tabSyatem(item) {
+            this.systemId = item.id
+            ;(this.everySystem = item.children), (this.systemName = item.name)
+        },
+        emitFloor(item) {
+            this.floorInfo = item
+        },
+        dialogVisible(eve) {
+            this.dialogInfo = eve
+            this.$refs.dialog.showModal()
+        }
+    },
+    mounted() {
+        this.everySystem = this.system[0].children
+    }
+}
+</script>
+<style lang="less" scoped>
 #equipment {
+    background: rgba(242, 245, 247, 1);
+    height: 100%;
+    .eq-top {
+        margin-left: 195px;
+        padding-top: 24px;
+        position: fixed;
+        z-index: 2;
+        .eq-system {
+            padding: 12px 23px;
+            color: #1f2429;
+            background: #fff;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        .isActive {
+            color: #025baa;
+        }
+    }
+    .eq-bottom {
+        display: flex;
+        .eq-left {
+            position: fixed;
+            z-index: 2;
+            width: 196px;
+            padding-top: 100px;
+            color: #646c73;
+            font-size: 14px;
+        }
+        .li-style {
+            padding: 0 0 18px 35px;
+            cursor: pointer;
+            .circle {
+                width: 6px;
+                height: 6px;
+                background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+                border-radius: 50%;
+                display: inline-block;
+                margin-right: 10px;
+            }
+        }
+        .eq-right {
+            margin-top: 24px;
+            flex: 1;
+            .eq-right-bottom {
+                display: flex;
+                .eq-title {
+                    position: fixed;
+                    z-index: 2;
+                    top: 146px;
+                    left: 196px;
+                    width: 141px;
+                    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-content {
+                    flex: 1;
+                }
+            }
+        }
+    }
 }
-</style>
+</style> 

+ 171 - 0
src/views/equipment/legendBox.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class='legend-box' v-if='isShow'>
+        <a-table :columns='columns' :data-source='data' :row-selection='rowSelection' :pagination='false' size='small' />
+        <div class='switch-btn'>
+            <a-switch @change='changeSwitch' size='small' />&nbsp;&nbsp;隐藏数量为0的项目
+        </div>
+        <div class='remark'>
+            注:1.主要设备房包括:制冷机房、生活水泵房、消防泵房
+            <p>2.图例后 的数字,代表此位置的数量</p>
+            <p>&nbsp;&nbsp;&nbsp;&nbsp;3.B2-1至B2-8为防火分区编号</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isShow: false,
+            columns: [
+                {
+                    title: '项目',
+                    dataIndex: 'projectName',
+                    key: 'projectName'
+                },
+                {
+                    title: '数量',
+                    dataIndex: 'count',
+                    key: 'count'
+                },
+                {
+                    title: '单位',
+                    dataIndex: 'unit',
+                    key: 'unit'
+                },
+                {
+                    title: '图例',
+                    dataIndex: 'legend',
+                    key: 'legend'
+                }
+            ],
+            data: [
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                },
+                {
+                    projectName: '建筑面积',
+                    count: '18500',
+                    unit: 'm2',
+                    legend: '——'
+                }
+            ],
+            rowSelection: {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+                },
+                onSelect: (record, selected, selectedRows) => {
+                    console.log(record, selected, selectedRows)
+                },
+                onSelectAll: (selected, selectedRows, changeRows) => {
+                    console.log(selected, selectedRows, changeRows)
+                }
+            }
+        }
+    },
+    methods: {
+        changeSwitch(checked) {
+            console.log(`a-switch to ${checked}`)
+        },
+        open() {
+            this.isShow = !this.isShow
+        }
+    }
+}
+</script>
+
+
+<style lang="less" scoped>
+.legend-box {
+    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);
+    position: fixed;
+    z-index: 2;
+    right: 80px;
+    top: 164px;
+    padding: 16px 0;
+    overflow-y: auto;
+    .switch-btn {
+        position: absolute;
+        bottom: 78px;
+        right: 16px;
+        color: #646c73;
+    }
+    .remark {
+        position: absolute;
+        bottom: 16px;
+        left: 16px;
+        p {
+            padding-left: 28px;
+            margin-bottom: 0;
+        }
+    }
+}
+</style>
+<style lang="less" >
+.legend-box {
+    th {
+        background: rgba(2, 91, 170, 0.1) !important;
+        font-size: 12px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: border;
+        color: #000;
+    }
+}
+</style>
+

+ 64 - 2
src/views/floorFunc/index.vue

@@ -1,19 +1,81 @@
 <template>
     <div id='floorFunc'>
+        <div class='eq-title'>
+            <span>{{floorInfo.floorName}}</span>
+        </div>
         <floorMap></floorMap>
+        <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
+        <bottomLayer></bottomLayer>
     </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 },
+    components: { floorMap, floorList, bottomLayer },
     data() {
-        return {}
+        return {
+            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: 'f1'
+            }
+        }
+    },
+    methods: {
+        emitFloor(item) {
+            this.floorInfo = item
+        }
     },
     mounted() {}
 }
 </script>
 <style lang="less">
 #floorFunc {
+    background: rgba(242, 245, 247, 1);
+    height: 100%;
+    .eq-title {
+        position: fixed;
+        z-index: 2;
+        top: 146px;
+        left: 196px;
+        width: 141px;
+        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;
+        }
+    }
 }
 </style>