|
@@ -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>
|