123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- <template>
- <div class='equipment-facilities'>
- <!-- 左侧菜单 -->
- <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='(item,index ) in listData[smsxt]'
- :key='index'
- :title='item.text'
- :border='false'
- is-link
- value='无'
- @click='handleClick(item)'
- />
- </div>
- <!-- 分割线 -->
- <div class='divider'></div>
- <!-- 设备卡片 -->
- <div class='card-container'>
- <m-card class='card' :type='item' name='消防主机' :total='50' :numer='3' v-for='item in 5' :key='item' @click.native='goToEquipment(item)' />
- </div>
- </div>
- </div>
- </template>
- <script>
- import Vue from 'vue'
- import { Cell } from 'vant'
- Vue.use(Cell)
- import SystemMenu from '@/components/systemMenu'
- import MCard from '@/components/equipmentFacilities/Card'
- export default {
- name: 'EquipmentFacilities',
- props: {},
- components: { SystemMenu, MCard },
- data() {
- return {
- smsxt: '1001', //系统值,默认供电系统
- listData: {
- //上部列表数据
- 1001: [
- //供电
- { text: '供电系统原理图', dataType: 'img', id: '' },
- { text: '机房平面布置图', dataType: 'room', id: '' },
- { text: '配电室低压柜及出现明细', id: '' },
- { text: '楼层分布', dataType: 'floor', id: '' },
- { text: '电井控制商铺范围', id: '' },
- ],
- 1002: [
- //暖通
- { text: '空调系统原理图', type: 'img', 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: '' },
- ],
- },
- }
- },
- beforeMount() {},
- mounted() {},
- 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(item) {
- console.log(item)
- },
- goToEquipment(data) {
- console.log(data)
- },
- },
- }
- </script>
- <style lang='less' scoped>
- .equipment-facilities {
- width: 100%;
- height: calc(100% - 100px);
- padding: 0;
- display: flex;
- .left {
- width: 80px;
- height: 100%;
- }
- .right {
- flex: 1;
- 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: 110px;
- }
- }
- }
- }
- </style>
|