|
@@ -1,64 +1,53 @@
|
|
|
<template>
|
|
|
<div class='low-voltage-cabinet-detail'>
|
|
|
<!-- 顶部条 -->
|
|
|
- <van-nav-bar :title='drawernum' left-arrow @click-left='backPage'></van-nav-bar>
|
|
|
+ <van-nav-bar :title='wzjc' left-arrow @click-left='backPage'></van-nav-bar>
|
|
|
<!-- 搜索框 -->
|
|
|
<div class='equipment-search-container'>
|
|
|
<!-- TODO: 配电室名称 -->
|
|
|
<van-search class='equipment-search' v-model='keyword' placeholder='请输入抽屉编号/控制回路/楼层' @search='onSearch'></van-search>
|
|
|
</div>
|
|
|
<div class='card-container'>
|
|
|
- <swiper class='swiper' :options='swiperOption'>
|
|
|
- <swiper-slide>1-2AA1-11</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-112</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-113</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-114</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-115</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-116</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-117</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-118</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-119</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1110</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1111</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1112</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1113</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1114</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1115</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1116</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1117</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1118</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1119</swiper-slide>
|
|
|
- <swiper-slide>1-2AA1-1120</swiper-slide>
|
|
|
+ <!-- <swiper class='swiper' ref='bannerSwiper' :options='swiperOption' v-show='list.length'>
|
|
|
+ <swiper-slide v-for='(item,index) in list' :class='{"active":item.active}' :key='`${index}_${item.drawernum}`'>{{item.drawernum}}</swiper-slide>
|
|
|
<div class='swiper-pagination' slot='pagination'></div>
|
|
|
- </swiper>
|
|
|
+ </swiper>-->
|
|
|
+ <!-- 解决input搜索,页面卡顿的情况,将swiper抽离成组件 -->
|
|
|
+ <MSwiper :list='list' v-if='list.length' @itemClick='itemClick' />
|
|
|
</div>
|
|
|
- <div class='info-container'>
|
|
|
+ <div class='info-container' v-show='list.length'>
|
|
|
<div class='border'></div>
|
|
|
+ <div class='title'>{{currentInfo.drawernum}}</div>
|
|
|
<div class='info'>
|
|
|
<div class='label'>出线规格:</div>
|
|
|
- <div class='value'>{{outspec}}</div>
|
|
|
+ <div class='value'>{{currentInfo.outspec}}</div>
|
|
|
</div>
|
|
|
<div class='info'>
|
|
|
<div class='label'>楼 层:</div>
|
|
|
- <div class='value'>{{floor}}</div>
|
|
|
+ <div class='value'>{{currentInfo.floor}}</div>
|
|
|
</div>
|
|
|
<div class='info'>
|
|
|
<div class='label'>电井编号:</div>
|
|
|
- <div class='value'>{{wellnum}}</div>
|
|
|
+ <div class='value'>{{currentInfo.wellnum}}</div>
|
|
|
</div>
|
|
|
<div class='info'>
|
|
|
<div class='label'>电箱编号:</div>
|
|
|
- <div class='value'>{{boxnum}}</div>
|
|
|
+ <div class='value'>{{currentInfo.boxnum}}</div>
|
|
|
</div>
|
|
|
<div class='info'>
|
|
|
<div class='label'>供电容量:</div>
|
|
|
- <div class='value'>{{capacitynum}} kw</div>
|
|
|
+ <div class='value'>{{currentInfo.capacitynum}} kw</div>
|
|
|
</div>
|
|
|
<div class='info'>
|
|
|
<div class='label'>控制回路:</div>
|
|
|
- <div class='value'>{{control}}</div>
|
|
|
+ <div class='value'>{{currentInfo.control}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <van-empty class='m-empty' v-if='noDataFlag && !list.length' description='暂无数据'>
|
|
|
+ <template #image>
|
|
|
+ <img class='no-data' src='../../assets/images/search_null.png' alt />
|
|
|
+ </template>
|
|
|
+ </van-empty>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -70,19 +59,27 @@ import { NavBar, Search } from 'vant'
|
|
|
Vue.use(NavBar).use(Search)
|
|
|
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
import 'swiper/swiper-bundle.css'
|
|
|
+import { queryDygjcxline } from '@/api/equipmentList'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { cloneDeep } from 'lodash'
|
|
|
+import MSwiper from '@/components/equipmentFacilities/MSwiper'
|
|
|
+// let swiperVm = null
|
|
|
export default {
|
|
|
name: 'LowVoltageCabinetDetail',
|
|
|
props: {},
|
|
|
components: {
|
|
|
Swiper,
|
|
|
SwiperSlide,
|
|
|
+ MSwiper,
|
|
|
},
|
|
|
directives: {
|
|
|
swiper: directive,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ pageKey: `key_${new Date().getTime()}`,
|
|
|
keyword: '',
|
|
|
+ noDataFlag: false,
|
|
|
swiperOption: {
|
|
|
slidesPerView: 3,
|
|
|
// slidesPerGroup: 3,
|
|
@@ -93,6 +90,16 @@ export default {
|
|
|
el: '.swiper-pagination',
|
|
|
clickable: true,
|
|
|
},
|
|
|
+ // on: {
|
|
|
+ // click: function (event) {
|
|
|
+ // const { realIndex } = this
|
|
|
+ // // 这里有坑,需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
|
|
|
+ // console.log(this) // -> Swiper
|
|
|
+ // console.log(event.target.innerText)
|
|
|
+ // // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
|
|
|
+ // swiperVm.handleTap(event.target.innerText)
|
|
|
+ // },
|
|
|
+ // },
|
|
|
// autoplay: {
|
|
|
// //自动播放
|
|
|
// delay: 1500,
|
|
@@ -100,23 +107,28 @@ export default {
|
|
|
// },
|
|
|
// speed: 1500, //播放速度
|
|
|
},
|
|
|
- control: '',
|
|
|
- drawernum: '',
|
|
|
- floor: '',
|
|
|
- glsms_proimgupid: '',
|
|
|
- outspec: '',
|
|
|
- wellnum: '',
|
|
|
- boxnum: '',
|
|
|
- capacitynum: '',
|
|
|
+ list: [],
|
|
|
+ currentInfo: {},
|
|
|
+ location: '', //路由传递的参数
|
|
|
+ wzjc: '', //位置简称
|
|
|
}
|
|
|
},
|
|
|
- computed: {},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
|
|
|
+ },
|
|
|
created() {
|
|
|
+ // 将this指向swiperVm,供swiper点击事件使用
|
|
|
+ // swiperVm = this
|
|
|
this.control = '步行街分区2中庭用电'
|
|
|
this.drawernum = '1-5AA-2'
|
|
|
this.floor = '1F'
|
|
|
this.glsms_proimgupid = 37206
|
|
|
this.outspec = '4*150+1*70'
|
|
|
+
|
|
|
+ const { location, wzjc } = this.$route.params
|
|
|
+ this.location = location
|
|
|
+ this.wzjc = wzjc
|
|
|
+ this.getList()
|
|
|
},
|
|
|
beforeMount() {},
|
|
|
mounted() {},
|
|
@@ -124,7 +136,63 @@ export default {
|
|
|
backPage() {
|
|
|
this.$router.go(-1)
|
|
|
},
|
|
|
- onSearch() {},
|
|
|
+ onSearch() {
|
|
|
+ console.log('sssss')
|
|
|
+ this.initData()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ itemClick(currentInfo) {
|
|
|
+ this.currentInfo = cloneDeep(currentInfo)
|
|
|
+ },
|
|
|
+ handleTap(text) {
|
|
|
+ console.log(text)
|
|
|
+ console.time(1)
|
|
|
+ //
|
|
|
+ if (text.indexOf('\n') !== -1) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.list.map((item, index) => {
|
|
|
+ item.active = false
|
|
|
+ if (text === item.drawernum) {
|
|
|
+ item.active = true
|
|
|
+ this.currentInfo = cloneDeep(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.timeEnd(1)
|
|
|
+ console.log(this.currentInfo)
|
|
|
+ // this.key = `key_${new Date().getTime()}`
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ this.noDataFlag = false
|
|
|
+ this.list = []
|
|
|
+ this.currentInfo = {}
|
|
|
+ },
|
|
|
+ async getList() {
|
|
|
+ let getParams = {
|
|
|
+ page: 1,
|
|
|
+ size: 500,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ location: this.location,
|
|
|
+ }
|
|
|
+ if (this.keyword) {
|
|
|
+ getParams.keyword = `${this.keyword}:drawernum,outspec,floor`
|
|
|
+ }
|
|
|
+ let res = await queryDygjcxline({ getParams })
|
|
|
+ if (!res?.data) {
|
|
|
+ this.noDataFlag = true
|
|
|
+ this.list = []
|
|
|
+ this.currentInfo = {}
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.noDataFlag = false
|
|
|
+ let list = res.data
|
|
|
+ list.map((item, index) => {
|
|
|
+ item.active = false
|
|
|
+ index === 0 && (item.active = true)
|
|
|
+ })
|
|
|
+ this.list = list
|
|
|
+ this.currentInfo = cloneDeep(list[0])
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -132,7 +200,8 @@ export default {
|
|
|
.low-voltage-cabinet-detail {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: #f5f6f7;
|
|
|
+ // background-color: #f5f6f7;
|
|
|
+ background-color: #fff;
|
|
|
// 返回箭头修改
|
|
|
/deep/ .van-nav-bar .van-icon {
|
|
|
color: #000;
|
|
@@ -142,6 +211,7 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 55px;
|
|
|
// background-color: #fff;
|
|
|
+ background-color: #f5f6f7;
|
|
|
text-align: center;
|
|
|
.equipment-search {
|
|
|
width: 80%;
|
|
@@ -153,6 +223,7 @@ export default {
|
|
|
border-radius: 50px;
|
|
|
}
|
|
|
}
|
|
|
+ // 轮播
|
|
|
.card-container {
|
|
|
margin-top: 12px;
|
|
|
padding: 20px 15px 0 15px;
|
|
@@ -165,8 +236,9 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
- font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
background: #ebeded;
|
|
|
}
|
|
|
}
|
|
@@ -185,9 +257,15 @@ export default {
|
|
|
height: 30px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: #025baa !important;
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
|
}
|
|
|
+ // 下方信息
|
|
|
.info-container {
|
|
|
padding: 15px;
|
|
|
background: #fff;
|
|
@@ -195,6 +273,14 @@ export default {
|
|
|
border-top: 1px solid #e4e6e7;
|
|
|
margin-bottom: 23px;
|
|
|
}
|
|
|
+ .title {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #025baa;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
.info {
|
|
|
display: flex;
|
|
|
height: 20px;
|
|
@@ -215,5 +301,24 @@ export default {
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
+ // 空状态
|
|
|
+ .m-empty {
|
|
|
+ // position: fixed;
|
|
|
+ // top: 0;
|
|
|
+ // left: 0;
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /deep/ .van-empty__image {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ img {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|