|
@@ -16,7 +16,10 @@
|
|
|
:title='item.text'
|
|
|
:border='false'
|
|
|
is-link
|
|
|
+ :class='item.class'
|
|
|
+ :arrow-direction='item.arrow'
|
|
|
:value='`${item.count||""}`'
|
|
|
+ v-show='!item.hide'
|
|
|
@click='handleClick(item)'
|
|
|
/>
|
|
|
</div>
|
|
@@ -36,8 +39,21 @@
|
|
|
@click.native='goToEquipment(item)'
|
|
|
/>
|
|
|
<!-- 更多主要设备 -->
|
|
|
- <m-card class='card' :type='4' name unit :total='0' @click.native='goToMoreEquipment' />
|
|
|
+ <m-card class='card' :type='4' name unit v-show='!showMoreCardList' :total='0' @click.native='goToMoreEquipment' />
|
|
|
+ <m-card
|
|
|
+ v-show='moreCardList.length && showMoreCardList'
|
|
|
+ class='card'
|
|
|
+ :type='item.type'
|
|
|
+ :name='item.name'
|
|
|
+ :unit='item.unit'
|
|
|
+ :total='item.total'
|
|
|
+ :number='item.number'
|
|
|
+ v-for='(item,index) in cardList'
|
|
|
+ :key='index'
|
|
|
+ @click.native='goToEquipment(item)'
|
|
|
+ />
|
|
|
</div>
|
|
|
+ <div class='close' v-show='showMoreCardList' @click='showMoreCardList=false'>收起</div>
|
|
|
</div>
|
|
|
<!-- 原理图 -->
|
|
|
<ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
|
|
@@ -48,12 +64,13 @@ import Vue from 'vue'
|
|
|
import { Cell, Toast } from 'vant'
|
|
|
Vue.use(Cell).use(Toast)
|
|
|
import { mapGetters, mapMutations } from 'vuex'
|
|
|
-import { querySystemCount, querySystemCard, querySystemImage, querySystemTuJianImage, queryRoomCount } from '@/api/equipmentList'
|
|
|
+import { querySystemCount, querySystemCard, querySystemImage, querySystemTuJianImage, queryRoomCount, queryMoreAsset } from '@/api/equipmentList'
|
|
|
+
|
|
|
import { appGraphElementQuery } from '@/api/public'
|
|
|
import MCard from '@/components/equipmentFacilities/Card'
|
|
|
import SystemMenu from '@/components/systemMenu'
|
|
|
import ImagePreview from '@/components/ImagePreview'
|
|
|
-
|
|
|
+import { cloneDeep } from 'lodash'
|
|
|
export default {
|
|
|
name: 'EquipmentFacilities',
|
|
|
props: {},
|
|
@@ -73,11 +90,12 @@ export default {
|
|
|
//供电
|
|
|
{ text: '供电系统原理图', dataType: 'img', typecode: '2010', count: '无' },
|
|
|
{ text: '机房平面布置图', dataType: 'room' },
|
|
|
- { text: '配电室低压出线柜及出线明细', dataType: 'dyg' },
|
|
|
+ { text: '配电室低压出线柜及出线明细', dataType: 'dyg', class: 'dyg' },
|
|
|
{ text: '楼层分布', dataType: 'floor', value: ' ' },
|
|
|
{ text: '电井控制商铺范围', dataType: 'electricWell' },
|
|
|
{ text: '主要设备清单', dataType: 'mainEquipment' },
|
|
|
{ text: '重要维修及重要维保', dataType: 'wxwb' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
1002: [
|
|
|
//暖通
|
|
@@ -87,44 +105,57 @@ export default {
|
|
|
{ text: '楼层分布', dataType: 'floor' },
|
|
|
{ text: '主要设备清单', dataType: 'mainEquipment' },
|
|
|
{ text: '重要维修及重要维保', dataType: 'wxwb' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
1003: [
|
|
|
//消防
|
|
|
- { text: '消防电系统原理示意图', dataType: 'img', typecode: '2014', count: '无' },
|
|
|
- { text: '消防喷淋系统示意图', dataType: 'img', typecode: '2015', count: '无' },
|
|
|
- { text: '消防窗喷系统示意图', dataType: 'img', typecode: '2016', count: '无' },
|
|
|
- { text: '消火栓系统示意图', dataType: 'img', typecode: '2017', count: '无' },
|
|
|
+ { text: '系统原理图', id: '1003', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
|
|
|
+ { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
|
|
|
+ { text: '消防电系统原理示意图', dataType: 'img', typecode: '2014', count: '无', hide: true, class: 'img-cell' },
|
|
|
+ { text: '消防喷淋系统示意图', dataType: 'img', typecode: '2015', count: '无', hide: true, class: 'img-cell' },
|
|
|
+ { text: '消防窗喷系统示意图', dataType: 'img', typecode: '2016', count: '无', hide: true, class: 'img-cell' },
|
|
|
+ { text: '消火栓系统示意图', dataType: 'img', typecode: '2017', count: '无', hide: true, class: 'img-cell' },
|
|
|
{ text: '消防泵房引出管路分布图', dataType: 'fbt', categoryId: 'XFBFYCFL' },
|
|
|
{ text: '机房平面布置图', dataType: 'room' },
|
|
|
{ text: '楼层分布+附加数据', dataType: 'floor' },
|
|
|
{ text: '主要设备清单', dataType: 'mainEquipment' },
|
|
|
{ text: '重要维修及重要维保', dataType: 'wxwb' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
1004: [
|
|
|
//弱电
|
|
|
- { text: '门禁管理系统原理图', dataType: 'img', typecode: '2019', count: '无' },
|
|
|
- { text: 'BA楼宇智能化系统原理图', dataType: 'img', typecode: '2020', count: '无' },
|
|
|
+ { text: '系统原理图', id: '1004', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
|
|
|
+ { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
|
|
|
+ { text: '门禁管理系统原理图', dataType: 'img', typecode: '2019', count: '无', hide: true, class: 'img-cell' },
|
|
|
+ { text: 'BA楼宇智能化系统原理图', dataType: 'img', typecode: '2020', count: '无', hide: true, class: 'img-cell' },
|
|
|
{ text: '机房平面布置图', dataType: 'room' },
|
|
|
{ text: '楼层分布+附加数据', dataType: 'floor' },
|
|
|
{ text: '主要设备清单', dataType: 'mainEquipment' },
|
|
|
{ text: '重要维修及重要维保', dataType: 'wxwb' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
1005: [
|
|
|
//给排水
|
|
|
- { text: '给水系统原理示意图', dataType: 'img', typecode: '2021', count: '无' },
|
|
|
- { text: '排水系统原理示意图', dataType: 'img', typecode: '2022', count: '无' },
|
|
|
+ { text: '系统原理图', id: '1005', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
|
|
|
+ { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
|
|
|
+ { text: '给水系统原理示意图', dataType: 'img', typecode: '2021', count: '无', hide: true, class: 'img-cell' },
|
|
|
+ { text: '排水系统原理示意图', dataType: 'img', typecode: '2022', count: '无', hide: true, class: 'img-cell' },
|
|
|
{ text: '机房平面布置图', dataType: 'room' },
|
|
|
{ text: '楼层分布', dataType: 'floor' },
|
|
|
{ text: '主要设备清单', dataType: 'mainEquipment' },
|
|
|
{ text: '重要维修及重要维保', dataType: 'wxwb' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
1006: [
|
|
|
//电梯
|
|
|
- { text: '扶梯原理图', dataType: 'img', typecode: '2023', count: '无' },
|
|
|
- { text: '直梯原理图', dataType: 'img', typecode: '2024', count: '无' },
|
|
|
+ { text: '系统原理图', id: '1006', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
|
|
|
+ { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
|
|
|
+ { text: '扶梯原理图', dataType: 'img', typecode: '2023', count: '无', hide: true, class: 'img-cell' },
|
|
|
+ { text: '直梯原理图', dataType: 'img', typecode: '2024', count: '无', hide: true, class: 'img-cell' },
|
|
|
{ text: '楼层分布', dataType: 'floor' },
|
|
|
{ text: '主要设备清单', dataType: 'mainEquipment' },
|
|
|
{ text: '重要维修及重要维保', dataType: 'wxwb' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
1007: [
|
|
|
// 燃气
|
|
@@ -132,6 +163,7 @@ export default {
|
|
|
{ text: '楼层分布', dataType: 'floor' },
|
|
|
{ text: '主要设备清单', dataType: 'mainEquipment' },
|
|
|
{ text: '重要维修及重要维保', dataType: 'wxwb' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
1008: [
|
|
|
// 土建
|
|
@@ -143,10 +175,13 @@ export default {
|
|
|
// { text: '建筑立面图', dataType: 'img', typecode: '2026', count: '无' },
|
|
|
{ text: '建筑立面图', dataType: 'img', typecode: ['2026', '2027', '2028', '2029'], count: '无' },
|
|
|
{ text: '楼层分布', dataType: 'floor' },
|
|
|
+ { text: '其他事项', dataType: 'otherMatter' },
|
|
|
],
|
|
|
},
|
|
|
listKey: `list_${new Date().getTime()}`,
|
|
|
cardList: [],
|
|
|
+ moreCardList: [],
|
|
|
+ showMoreCardList: false,
|
|
|
showRight: false, //是否显示右侧内容
|
|
|
showImgPreview: false, //是否展示图片预览
|
|
|
imgList: [], //图片数组
|
|
@@ -176,6 +211,7 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
async created() {
|
|
|
+ window.vm = this
|
|
|
// let initSys = {
|
|
|
// text: '供电',
|
|
|
// categoryId: 'GDXT',
|
|
@@ -205,7 +241,7 @@ export default {
|
|
|
this.showRight = false
|
|
|
this.currentSmsxt = smsxt
|
|
|
this.systemText = text + '系统'
|
|
|
- console.log(this.systemText)
|
|
|
+ // console.log(this.systemText)
|
|
|
/**
|
|
|
* 查询图片数量,设备卡片
|
|
|
*/
|
|
@@ -296,9 +332,9 @@ export default {
|
|
|
}
|
|
|
}),
|
|
|
}
|
|
|
- console.log(params)
|
|
|
+ // console.log(params)
|
|
|
let res = await appGraphElementQuery(params)
|
|
|
- console.log(res)
|
|
|
+ // console.log(res)
|
|
|
if (!res?.Data) {
|
|
|
return false
|
|
|
}
|
|
@@ -381,12 +417,16 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
this.cardList = cardList
|
|
|
- console.log('=============')
|
|
|
- console.log(this.cardList)
|
|
|
- console.log('=============')
|
|
|
+ // console.log('=============')
|
|
|
+ // console.log(this.cardList)
|
|
|
+ // console.log('=============')
|
|
|
},
|
|
|
handleClick(item) {
|
|
|
switch (item.dataType) {
|
|
|
+ // 点击系统原理图, 显示/隐藏 具体的原理图
|
|
|
+ case 'moreImg':
|
|
|
+ this.handleMoreImg(item)
|
|
|
+ break
|
|
|
// 原理图
|
|
|
case 'img':
|
|
|
this.handleImg(item)
|
|
@@ -418,11 +458,34 @@ export default {
|
|
|
case 'dyg':
|
|
|
this.hanldeDyg(item)
|
|
|
break
|
|
|
+ // 其他事项
|
|
|
+ case 'otherMatter':
|
|
|
+ this.handleOtherMatter(item)
|
|
|
+ break
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
+ * 点击系统原理图
|
|
|
+ * 显示隐藏详细的系统原理图
|
|
|
+ */
|
|
|
+ handleMoreImg(item) {
|
|
|
+ console.log(item)
|
|
|
+ const currentItem = this.listData[item.id]
|
|
|
+ if (item.arrow === 'down') {
|
|
|
+ currentItem.map((v) => {
|
|
|
+ v.dataType === 'img' && (v.hide = false)
|
|
|
+ })
|
|
|
+ item.arrow = 'up'
|
|
|
+ } else {
|
|
|
+ currentItem.map((v) => {
|
|
|
+ v.dataType === 'img' && (v.hide = true)
|
|
|
+ })
|
|
|
+ item.arrow = 'down'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
* 显示原理图预览
|
|
|
*/
|
|
|
handleImg(item) {
|
|
@@ -512,6 +575,12 @@ export default {
|
|
|
this.$router.push({ name: 'LowVoltageCabinet', params: {} })
|
|
|
},
|
|
|
/**
|
|
|
+ * 其他事项
|
|
|
+ */
|
|
|
+ handleOtherMatter(item) {
|
|
|
+ // this.$router.push({ name: '', params: {} })
|
|
|
+ },
|
|
|
+ /**
|
|
|
* 跳转 楼层分布
|
|
|
*/
|
|
|
handleFloor(item) {
|
|
@@ -562,8 +631,29 @@ export default {
|
|
|
/**
|
|
|
* 点击更多设备卡片,跳转设备列表页面
|
|
|
*/
|
|
|
- goToMoreEquipment() {
|
|
|
- this.$router.push({ name: 'MoreEquipmentList', params: {} })
|
|
|
+ async goToMoreEquipment(e) {
|
|
|
+ // this.$router.push({ name: 'MoreEquipmentList', params: {} })
|
|
|
+ console.log(e.target)
|
|
|
+ this.showMoreCardList = true
|
|
|
+ this.moreCardList = cloneDeep(this.cardList)
|
|
|
+ console.log()
|
|
|
+ //
|
|
|
+ // let data = {
|
|
|
+ // // page: 1,
|
|
|
+ // // size: 400,
|
|
|
+ // // subPage: 1,
|
|
|
+ // // subSize: 100,
|
|
|
+ // plazaId: this.plazaId,
|
|
|
+ // onlyMainAsset: true,
|
|
|
+ // }
|
|
|
+ // let postParams = {
|
|
|
+ // system_code: this.smsxt,
|
|
|
+ // }
|
|
|
+ // let res = await queryMoreAsset({ data, postParams })
|
|
|
+ // if (!res?.data?.data) {
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ // console.log(res.data.data)
|
|
|
},
|
|
|
},
|
|
|
}
|
|
@@ -598,6 +688,36 @@ export default {
|
|
|
flex: none;
|
|
|
}
|
|
|
}
|
|
|
+ // 系统原理图
|
|
|
+ .more-img-cell {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+ .more-img-cell-border {
|
|
|
+ height: 1px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ background: #fff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+ border-bottom: 1px solid #e4e6e7;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 0;
|
|
|
+ font-size: 0;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .img-cell {
|
|
|
+ background: #eff0f1;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ .img-cell:not(:last-child) {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+ .dyg {
|
|
|
+ /deep/ .van-cell__value {
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.divider {
|
|
|
border-bottom: 1px solid #e6e6e6;
|
|
@@ -617,6 +737,17 @@ export default {
|
|
|
height: 110px;
|
|
|
}
|
|
|
}
|
|
|
+ .close {
|
|
|
+ position: fixed;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ border-radius: 50px;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 80px;
|
|
|
+ right: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|