|
@@ -1,21 +1,121 @@
|
|
<template>
|
|
<template>
|
|
<div class='equipment-facilities'>
|
|
<div class='equipment-facilities'>
|
|
- <SystemMenu class='left' />
|
|
|
|
- <div class='right'></div>
|
|
|
|
|
|
+ <!-- 左侧菜单 -->
|
|
|
|
+ <SystemMenu class='left' @chooseSystem='changeSystem' />
|
|
|
|
+ <div class='right'>
|
|
|
|
+ <div class='top'>
|
|
|
|
+ <!-- <van-cell :title='`消防电系统原理示意图`' :border='false' is-link :value='`19条`' @click='handleClick' />
|
|
|
|
+ <van-cell :title='`消防喷淋系统示意图`' :border='false' is-link value='无' @click='handleClick' />
|
|
|
|
+ <van-cell :title='`消防窗喷系统示意图`' :border='false' is-link value='无' @click='handleClick' />
|
|
|
|
+ <van-cell :title='`配电室低压柜及出线明细`' :border='false' is-link value='无' @click='handleClick' />
|
|
|
|
+ <van-cell :title='`消防泵房引出管路分布图`' :border='false' is-link value='无' @click='handleClick' />
|
|
|
|
+ <van-cell :title='`楼层分布+其他数据`' :border='false' is-link value='无' @click='handleClick' />-->
|
|
|
|
+ <van-cell
|
|
|
|
+ v-for='({text},index ) in listData[smsxt]'
|
|
|
|
+ :key='index'
|
|
|
|
+ :title='text'
|
|
|
|
+ :border='false'
|
|
|
|
+ is-link
|
|
|
|
+ value='无'
|
|
|
|
+ @click='handleClick'
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 分割线 -->
|
|
|
|
+ <div class='divider'></div>
|
|
|
|
+ <!-- 设备卡片 -->
|
|
|
|
+ <div class='card-container'>
|
|
|
|
+ <div class='card' v-for='i in 5' :key='i'></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
|
|
+import Vue from 'vue'
|
|
|
|
+import { Cell } from 'vant'
|
|
|
|
+Vue.use(Cell)
|
|
import SystemMenu from '@/components/systemMenu'
|
|
import SystemMenu from '@/components/systemMenu'
|
|
export default {
|
|
export default {
|
|
name: 'EquipmentFacilities',
|
|
name: 'EquipmentFacilities',
|
|
props: {},
|
|
props: {},
|
|
data() {
|
|
data() {
|
|
- return {}
|
|
|
|
|
|
+ return {
|
|
|
|
+ smsxt: '1001', //系统值,默认供电系统
|
|
|
|
+ listData: {
|
|
|
|
+ //上部列表数据
|
|
|
|
+ 1001: [
|
|
|
|
+ //供电
|
|
|
|
+ { text: '供电系统原理图', id: '' },
|
|
|
|
+ { text: '机房平面布置图', id: '' },
|
|
|
|
+ { text: '配电室低压柜及出现明细', id: '' },
|
|
|
|
+ { text: '楼层分布', id: '' },
|
|
|
|
+ { text: '电井控制商铺范围', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ 1002: [
|
|
|
|
+ //暖通
|
|
|
|
+ { text: '空调系统原理图', id: '' },
|
|
|
|
+ { text: '分水器之路分布图', id: '' },
|
|
|
|
+ { text: '机房平面布置图', id: '' },
|
|
|
|
+ { text: '楼层分布', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ 1003: [
|
|
|
|
+ //消防
|
|
|
|
+ { text: '消防电系统原理示意图', id: '' },
|
|
|
|
+ { text: '消防喷淋系统示意图', id: '' },
|
|
|
|
+ { text: '消防窗喷系统示意图', id: '' },
|
|
|
|
+ { text: '消火栓系统示意图', id: '' },
|
|
|
|
+ { text: '消防泵房引出管理分布图', id: '' },
|
|
|
|
+ { text: '机房平面布置图', id: '' },
|
|
|
|
+ { text: '楼层分布+附加数据', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ 1004: [
|
|
|
|
+ //弱电
|
|
|
|
+ { text: '门禁管理系统原理图', id: '' },
|
|
|
|
+ { text: 'BA楼宇智能化系统原理图', id: '' },
|
|
|
|
+ { text: '机房平面布置图', id: '' },
|
|
|
|
+ { text: '楼层分布', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ 1005: [
|
|
|
|
+ //给排水
|
|
|
|
+ { text: '给水系统原理示意图', id: '' },
|
|
|
|
+ { text: '排水系统原理示意图', id: '' },
|
|
|
|
+ { text: '机房平面布置图', id: '' },
|
|
|
|
+ { text: '楼层分布', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ 1006: [
|
|
|
|
+ //电梯
|
|
|
|
+ { text: '扶梯原理图', id: '' },
|
|
|
|
+ { text: '直梯原理图', id: '' },
|
|
|
|
+ { text: '楼层分布', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ 1007: [
|
|
|
|
+ // 燃气
|
|
|
|
+ { text: '燃气系统原理示意图', id: '' },
|
|
|
|
+ { text: '楼层分布', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ 1008: [
|
|
|
|
+ // 土建
|
|
|
|
+ { text: '建筑立面图', id: '' },
|
|
|
|
+ { text: '石材铺装', id: '' },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ }
|
|
},
|
|
},
|
|
components: { SystemMenu },
|
|
components: { SystemMenu },
|
|
beforeMount() {},
|
|
beforeMount() {},
|
|
mounted() {},
|
|
mounted() {},
|
|
- methods: {},
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ /**
|
|
|
|
+ * 左侧菜单切换事件
|
|
|
|
+ * @param { String } text 系统名称
|
|
|
|
+ * @param { String } category 系统拼音简称 NTXT ...
|
|
|
|
+ * @param { String } smsxt 系统id? 1001 - 1008
|
|
|
|
+ */
|
|
|
|
+ changeSystem({ text, categoryId, smsxt }) {
|
|
|
|
+ console.log(text, categoryId, smsxt)
|
|
|
|
+ this.smsxt = smsxt
|
|
|
|
+ },
|
|
|
|
+ handleClick() {},
|
|
|
|
+ },
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
@@ -31,6 +131,43 @@ export default {
|
|
.right {
|
|
.right {
|
|
flex: 1;
|
|
flex: 1;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
+ padding: 16px 16px 16px 12px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ .top {
|
|
|
|
+ width: 100%;
|
|
|
|
+ /deep/ .van-cell {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #333333;
|
|
|
|
+ background: #f8f9fa;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
+ .van-cell__value {
|
|
|
|
+ width: 40px;
|
|
|
|
+ flex: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .divider {
|
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+ }
|
|
|
|
+ .card-container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ flex-flow: wrap;
|
|
|
|
+ .card {
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 48%;
|
|
|
|
+ margin: 2% 1%;
|
|
|
|
+ min-width: 48%; // 加入这两个后每个item的宽度就生效了
|
|
|
|
+ max-width: 48%; // 加入这两个后每个item的宽度就生效了
|
|
|
|
+ height: 100px;
|
|
|
|
+ border: 1px solid #2bad88;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|