|
@@ -0,0 +1,726 @@
|
|
|
+<template>
|
|
|
+ <div class='low-voltage-cabinet'>
|
|
|
+ <!-- 顶部条 -->
|
|
|
+ <van-nav-bar :title='title' left-arrow @click-left='backPage' @click-right='handleRightClick'>
|
|
|
+ <template #right>
|
|
|
+ <i class='iconfont wanda-scan'></i>
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <div class='equipment-search-container'>
|
|
|
+ <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
|
|
|
+ </div>
|
|
|
+ <!-- 配电室 -->
|
|
|
+ <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
|
|
|
+ <van-list
|
|
|
+ class='switch-room-container'
|
|
|
+ :class='{"one-list":list.length === 1}'
|
|
|
+ v-model='loading'
|
|
|
+ :finished='finished'
|
|
|
+ @load='onLoad'
|
|
|
+ finished-text
|
|
|
+ >
|
|
|
+ <div class='switch-room' v-for='(item,index) in list' :key='index'>
|
|
|
+ <div class='title' v-show='item.data.length'>{{item.wzjc}}</div>
|
|
|
+ <!-- 一个低压柜信息 -->
|
|
|
+ <div class='info-container'>
|
|
|
+ <!-- 第1,2条 -->
|
|
|
+ <div class='info' v-for='(detail,dIndex) in item.data.slice(0,2) || []' :key='dIndex'>
|
|
|
+ <div class='name'>{{detail.drawernum}}</div>
|
|
|
+ <div class='specification'>
|
|
|
+ <div class='label'>出线规格:</div>
|
|
|
+ <div class='value'>{{detail.outspec}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='loop'>
|
|
|
+ <div class='label'>控制回路:</div>
|
|
|
+ <div class='value'>{{detail.control}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='floor'>
|
|
|
+ <div class='label'>
|
|
|
+ <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
|
|
|
+ <span>楼层:</span>
|
|
|
+ </div>
|
|
|
+ <div class='value'>{{detail.floor}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='divider'></div>
|
|
|
+ </div>
|
|
|
+ <!-- 加载更多 -->
|
|
|
+ <div class='load-more' v-show='item.loadMore && item.data && item.data.length>=3' @click='locationLoadMore(item,index)'>加载更多</div>
|
|
|
+ <!-- 第3-5条 -->
|
|
|
+ <div class='info' v-show='!item.loadMore' v-for='(detail,dIndex) in item.data.slice(2) || []' :key='`loadMore-${dIndex}`'>
|
|
|
+ <div class='name'>{{detail.drawernum}}</div>
|
|
|
+ <div class='specification'>
|
|
|
+ <div class='label'>出线规格:</div>
|
|
|
+ <div class='value'>{{detail.outspec}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='loop'>
|
|
|
+ <div class='label'>控制回路:</div>
|
|
|
+ <div class='value'>{{detail.control}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='floor'>
|
|
|
+ <div class='label'>
|
|
|
+ <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
|
|
|
+ <span>楼层:</span>
|
|
|
+ </div>
|
|
|
+ <div class='value'>{{detail.floor}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='divider'></div>
|
|
|
+ </div>
|
|
|
+ <van-list
|
|
|
+ v-model='item.loading'
|
|
|
+ v-show='!item.loadMore && item.list && item.list.length'
|
|
|
+ :finished='item.finished'
|
|
|
+ :immediate-check='false'
|
|
|
+ @load='locationOnLoad(item,index)'
|
|
|
+ finished-text='没有更多了'
|
|
|
+ >
|
|
|
+ <div class='info' v-for='(detail,dIndex) in item.list || []' :key='dIndex'>
|
|
|
+ <div class='name'>{{detail.drawernum}}</div>
|
|
|
+ <div class='specification'>
|
|
|
+ <div class='label'>出线规格:</div>
|
|
|
+ <div class='value'>{{detail.outspec}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='loop'>
|
|
|
+ <div class='label'>控制回路:</div>
|
|
|
+ <div class='value'>{{detail.control}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='floor'>
|
|
|
+ <div class='label'>
|
|
|
+ <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
|
|
|
+ <span>楼层:</span>
|
|
|
+ </div>
|
|
|
+ <div class='value'>{{detail.floor}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='divider'></div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ <!-- 点击头部筛选,出现的右侧弹窗 -->
|
|
|
+ <van-popup class='m-popup-container' v-model='showPopup' position='right'>
|
|
|
+ <div class='m-popup'>
|
|
|
+ <!-- 系统 -->
|
|
|
+ <div class='system'>
|
|
|
+ <h1 class='title'>配电室</h1>
|
|
|
+ <div class='system-btn-container'>
|
|
|
+ <div class='system-btn' v-for='(item,index) in systemList' :key='index'>
|
|
|
+ <van-button class='m-btn' :class='item.active' @click='changeSwitchRoom(item)'>{{item.text}}</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='footer'>
|
|
|
+ <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
|
|
|
+ <van-button size='large' color='#025BAA' type='info' @click='confirm'>确定</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <van-empty class='m-empty' v-if='finished &&(!list.length || noDataFlag)' description='暂无数据'>
|
|
|
+ <template #image>
|
|
|
+ <img class='no-data' src='../../assets/images/search_null.png' alt />
|
|
|
+ </template>
|
|
|
+ </van-empty>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 配电室低压柜及出线明细
|
|
|
+ */
|
|
|
+import Vue from 'vue'
|
|
|
+import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
|
|
|
+Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
+import { queryDygjcxline, querySmsLocation } from '@/api/equipmentList'
|
|
|
+import { sleep } from '@/utils/util'
|
|
|
+import { cloneDeep } from 'lodash'
|
|
|
+export default {
|
|
|
+ name: 'LowVoltageCabinet',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mock: 2,
|
|
|
+ title: '配电室低压柜及出线明细',
|
|
|
+ keyword: '',
|
|
|
+ page: 1,
|
|
|
+ size: 5,
|
|
|
+ innerSize: 5,
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ noDataFlag: false,
|
|
|
+ showPopup: false,
|
|
|
+ systemList: [{ text: '全部', location: '全部', active: 'active' }],
|
|
|
+ modalData: {
|
|
|
+ location: '全部',
|
|
|
+ },
|
|
|
+ modalDataBak: {
|
|
|
+ location: '全部',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 查询筛选条件(右弹窗)
|
|
|
+ this.getFilterList()
|
|
|
+ // this.onLoad()
|
|
|
+ },
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ backPage() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *
|
|
|
+ */
|
|
|
+ async onLoad() {
|
|
|
+ console.log('onLoad')
|
|
|
+ if (this.page > 1) {
|
|
|
+ await sleep(1000)
|
|
|
+ }
|
|
|
+ await this.getList()
|
|
|
+ // list无数据,不执行后续分页查询
|
|
|
+ console.log(this.list)
|
|
|
+ console.log(this.count)
|
|
|
+ if (!this.list.length) {
|
|
|
+ this.finished = true
|
|
|
+ this.loading = false
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ this.page++
|
|
|
+ this.loading = false
|
|
|
+ if (this.list.length >= this.count) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询低压柜list
|
|
|
+ */
|
|
|
+ async getList() {
|
|
|
+ let queryData = {
|
|
|
+ data: {
|
|
|
+ page: this.page,
|
|
|
+ size: this.size,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ },
|
|
|
+ postParams: {
|
|
|
+ // location: '',
|
|
|
+ locflList: ['5201', '5204', '5209'], //低压柜
|
|
|
+ pageable: {
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: this.innerSize,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ if (this.keyword) {
|
|
|
+ queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
|
|
|
+ }
|
|
|
+ // 筛选 配电室之后, location字段上送
|
|
|
+ if (this.modalData.location && this.modalData.location !== '全部') {
|
|
|
+ queryData.postParams.location = this.modalData.location
|
|
|
+ }
|
|
|
+ console.log(queryData)
|
|
|
+ let res
|
|
|
+ try {
|
|
|
+ res = await queryDygjcxline(queryData)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ // mockData
|
|
|
+ // res = require('./mockData').queryDygjcxlineData
|
|
|
+ if (!res?.data?.data) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ res.data.data.map((item, index, arr) => {
|
|
|
+ // console.log(item)
|
|
|
+ if (item?.count >= 5 || item?.data?.length >= 5) {
|
|
|
+ // console.log(item)
|
|
|
+ arr[index] = {
|
|
|
+ ...item,
|
|
|
+ loadMore: true,
|
|
|
+ loading: true,
|
|
|
+ finished: false,
|
|
|
+ list: [],
|
|
|
+ page: 2,
|
|
|
+ size: this.innerSize,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.loadMore = false
|
|
|
+ }
|
|
|
+ if (!item.data) {
|
|
|
+ item.data = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.list = [...this.list, ...res.data.data]
|
|
|
+ // console.log('%csssss', 'color:blue')
|
|
|
+ // console.log(this.list)
|
|
|
+ this.count = res.data.count
|
|
|
+ // 是否显示无数据的标志
|
|
|
+ let noDataFlag = !Boolean(this.list.filter((v) => v.data.length).length)
|
|
|
+ console.log(noDataFlag)
|
|
|
+ this.noDataFlag = noDataFlag
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 点击加载更多
|
|
|
+ */
|
|
|
+ locationLoadMore(item, index) {
|
|
|
+ // console.log(item, index)
|
|
|
+ item.loadMore = false
|
|
|
+ this.$set(this.list, index, item)
|
|
|
+ this.locationOnLoad(item, index)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询一个location下的onLoad事件
|
|
|
+ */
|
|
|
+ async locationOnLoad({ location }, index) {
|
|
|
+ console.log(location, index)
|
|
|
+ let item = cloneDeep(this.list[index])
|
|
|
+ console.log(item)
|
|
|
+ if (item.page > 2) {
|
|
|
+ await sleep(1000)
|
|
|
+ }
|
|
|
+ await this.getLocationList({ location, index })
|
|
|
+ // 调用接口后的item
|
|
|
+ let currentItem = cloneDeep(this.list[index])
|
|
|
+ // list无数据,不执行后续分页查询
|
|
|
+ if (!currentItem.list.length) {
|
|
|
+ currentItem.finished = true
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ currentItem.page++
|
|
|
+ currentItem.finished = false
|
|
|
+ currentItem.loading = false
|
|
|
+ if (currentItem.list.length + currentItem.data.length >= currentItem.count) {
|
|
|
+ currentItem.finished = true
|
|
|
+ }
|
|
|
+ this.$set(this.list, index, currentItem)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询一个location下的设备
|
|
|
+ */
|
|
|
+ async getLocationList(item) {
|
|
|
+ console.log('=========')
|
|
|
+ console.log('=========')
|
|
|
+ console.log('=========')
|
|
|
+ console.log('=========')
|
|
|
+ console.log('=========')
|
|
|
+ console.log('=========')
|
|
|
+ console.log('getLocationList')
|
|
|
+ console.log(item)
|
|
|
+ const { location, index } = item
|
|
|
+ let currentList = cloneDeep(this.list[index])
|
|
|
+ console.log(currentList)
|
|
|
+ console.log('getLocationList')
|
|
|
+ let queryData = {
|
|
|
+ data: {
|
|
|
+ page: Math.ceil((index + 1) / this.size), // 当前出线柜,所在的页码
|
|
|
+ size: currentList.size,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ },
|
|
|
+ postParams: {
|
|
|
+ locflList: ['5201', '5204', '5209'], //低压柜
|
|
|
+ location: item.location,
|
|
|
+ pageable: {
|
|
|
+ pageNumber: currentList.page,
|
|
|
+ pageSize: this.innerSize,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ if (this.keyword) {
|
|
|
+ queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
|
|
|
+ }
|
|
|
+ // 筛选 配电室之后, location字段上送
|
|
|
+ console.log(queryData)
|
|
|
+ let res
|
|
|
+ try {
|
|
|
+ res = await queryDygjcxline(queryData)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ // mockData
|
|
|
+ // res = require('./mockData').queryDygjcxlineData1
|
|
|
+ console.log('=============')
|
|
|
+ console.log(res)
|
|
|
+ console.log('=============')
|
|
|
+ if (!res?.data?.data[0]?.data) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ currentList.list = [...currentList.list, ...res.data.data[0].data]
|
|
|
+ this.$set(this.list, index, currentList)
|
|
|
+ console.log('====================')
|
|
|
+ console.log(this.list)
|
|
|
+ console.log('====================')
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 查询筛选条件
|
|
|
+ */
|
|
|
+ async getFilterList() {
|
|
|
+ let queryData = {
|
|
|
+ data: {
|
|
|
+ // page: this.page,
|
|
|
+ // size: this.size,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ },
|
|
|
+ postParams: {
|
|
|
+ locflList: ['5201', '5204', '5209'], //低压柜
|
|
|
+ // location: '',
|
|
|
+ system_code: this.smsxt,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ let res = await querySmsLocation(queryData)
|
|
|
+ console.log(res)
|
|
|
+ if (!res?.data?.data) {
|
|
|
+ this.systemList = [{ text: '全部', location: '全部', active: 'active' }]
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let data = res?.data?.data || []
|
|
|
+ data.map((item) => {
|
|
|
+ item.text = item.wzjc
|
|
|
+ item.active = ''
|
|
|
+ })
|
|
|
+ console.log(data)
|
|
|
+ this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击右侧筛选
|
|
|
+ */
|
|
|
+ handleRightClick() {
|
|
|
+ this.showPopup = true
|
|
|
+ // 设置选中的专业系统
|
|
|
+ },
|
|
|
+ onSearch() {
|
|
|
+ // 初始化数据,查询列表
|
|
|
+ this.initData()
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * popup 更改配电室
|
|
|
+ */
|
|
|
+ changeSwitchRoom(data) {
|
|
|
+ let systemList = this.systemList
|
|
|
+ systemList.map((item) => {
|
|
|
+ item.active = ''
|
|
|
+ if (item.location === data.location) {
|
|
|
+ item.active = 'active'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 弹窗选中的系统
|
|
|
+ this.$set(this.modalDataBak, 'location', data.location)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 重置
|
|
|
+ */
|
|
|
+ reset() {
|
|
|
+ this.modalDataBak = {
|
|
|
+ location: '全部',
|
|
|
+ }
|
|
|
+ this.modalData = {
|
|
|
+ location: '全部',
|
|
|
+ }
|
|
|
+ let { systemList } = this
|
|
|
+ systemList.map((item) => {
|
|
|
+ item.active = ''
|
|
|
+ if (item.text === '全部') {
|
|
|
+ item.active = 'active'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.systemList = systemList
|
|
|
+ this.showPopup = false
|
|
|
+ // 初始化数据,查询列表
|
|
|
+ this.initData()
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 弹窗确认
|
|
|
+ */
|
|
|
+ confirm() {
|
|
|
+ this.modalData = cloneDeep(this.modalDataBak)
|
|
|
+ this.showPopup = false
|
|
|
+ // 初始化数据,查询列表
|
|
|
+ this.initData()
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 初始化数据,查询列表
|
|
|
+ */
|
|
|
+ initData() {
|
|
|
+ // this.finished = false
|
|
|
+ // this.loading = false
|
|
|
+ this.noDataFlag = false
|
|
|
+ this.page = 1
|
|
|
+ this.count = 0
|
|
|
+ this.list = []
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.low-voltage-cabinet {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ // 返回箭头修改
|
|
|
+ /deep/ .van-nav-bar .van-icon {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ // 搜索
|
|
|
+ .equipment-search-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 55px;
|
|
|
+ // background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ .equipment-search {
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .van-search__content {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 配电室列表
|
|
|
+ .switch-room-container {
|
|
|
+ width: 100%;
|
|
|
+ // background-color: #fff;
|
|
|
+ min-height: 1px;
|
|
|
+ max-height: calc(100% - 100px);
|
|
|
+ overflow: auto;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ .switch-room {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 390px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // 浅蓝色title
|
|
|
+ .title {
|
|
|
+ padding: 0 10px;
|
|
|
+ color: #025baa;
|
|
|
+ height: 45px;
|
|
|
+ background: rgba(2, 91, 170, 0.1);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #025baa;
|
|
|
+ line-height: 45px;
|
|
|
+ }
|
|
|
+ // 每个配电室出线明细信息
|
|
|
+ .info-container {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ // 每个配电室出线明细
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ .name {
|
|
|
+ font-size: 16px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .specification,
|
|
|
+ .loop,
|
|
|
+ .floor {
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ height: auto;
|
|
|
+ .label {
|
|
|
+ width: 70px;
|
|
|
+ min-width: 70px;
|
|
|
+ max-width: 70px;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .floor .label > span {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部1px边框
|
|
|
+ .divider {
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ height: 1px;
|
|
|
+ left: 15px;
|
|
|
+ bottom: 0;
|
|
|
+ position: absolute;
|
|
|
+ background: #e6e6e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .load-more {
|
|
|
+ width: 80px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px auto;
|
|
|
+ color: #025baa;
|
|
|
+ background: #e5eef6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 只有一个出线柜时,样式
|
|
|
+ .one-list {
|
|
|
+ height: calc(100% - 100px) !important;
|
|
|
+ .switch-room {
|
|
|
+ max-height: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 空状态
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 筛选弹窗
|
|
|
+ .m-popup-container {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 55px 20px 10px 20px;
|
|
|
+ .m-popup {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ // 配电室
|
|
|
+ .system {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ // 专业系统按钮
|
|
|
+ .system-btn-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ max-height: calc(100% - 80px);
|
|
|
+ overflow: auto;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .system-btn {
|
|
|
+ width: 100% !important;
|
|
|
+ min-width: 100% !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ // min-height: 40px;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px 0 !important;
|
|
|
+ .m-btn {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 100%;
|
|
|
+ // height: 32px !important;
|
|
|
+ text-align: center;
|
|
|
+ background: #eff0f1;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 5px 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #025baa !important;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 设备设施
|
|
|
+ .sbss {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: auto;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+ .system-btn-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ .system-btn {
|
|
|
+ width: 100% !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #eff0f1 !important;
|
|
|
+ margin: 10px 0 10px 0;
|
|
|
+ .m-btn {
|
|
|
+ display: block !important;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 32px !important;
|
|
|
+ text-align: center;
|
|
|
+ background: #eff0f1;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #025baa !important;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .load-more {
|
|
|
+ width: 80px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #025baa;
|
|
|
+ background: #e5eef6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .divider {
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .van-button {
|
|
|
+ width: 40%;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 40%;
|
|
|
+ min-width: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|