|
|
@@ -1,32 +1,542 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- MoreEquipmentList
|
|
|
- </div>
|
|
|
+<template>
|
|
|
+ <div class='more-equipment'>
|
|
|
+ <!-- 顶部条 -->
|
|
|
+ <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>
|
|
|
+ <!-- 一个类的设备,如螺旋式冷水机组 -->
|
|
|
+ <div class='equipment-container' v-if='1'>
|
|
|
+ <div class='switch-room' v-for='ii in 3' :key='ii'>
|
|
|
+ <div class='title'>
|
|
|
+ <span>螺旋式冷水机组</span>
|
|
|
+ <span>10</span>
|
|
|
+ </div>
|
|
|
+ <!-- 单元格 -->
|
|
|
+ <van-cell is-link v-for='item in mockList' :key='item.classstructureid'>
|
|
|
+ <!-- 使用 title 插槽来自定义标题 -->
|
|
|
+ <template #title>
|
|
|
+ <span class='number'>{{item.classstructureid}}</span>
|
|
|
+ <span class='name'>{{item.sbjc}}</span>
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <span class='wx' v-if='item._type === "维修"'>维修</span>
|
|
|
+ <span class='wb'>维保</span>
|
|
|
+ <van-icon name='arrow' class='arrow-icon' />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <!-- 加载更多 -->
|
|
|
+ <div class='load-more' @click>加载更多</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 点击头部筛选,出现的右侧弹窗 -->
|
|
|
+ <!-- 点击头部筛选,出现的右侧弹窗 -->
|
|
|
+ <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='changeSystem(item)'>{{item.text}}</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='divider'></div>
|
|
|
+ <!-- 设备设施 -->
|
|
|
+ <div class='sbss'>
|
|
|
+ <h1 class='title'>设备设施</h1>
|
|
|
+ <!-- TODO: 1 -->
|
|
|
+ <div class='system-btn-container'>
|
|
|
+ <div class='system-btn' v-for='(item,index) in sbssList.slice(0,3)' :key='index'>
|
|
|
+ <van-button size='small' class='m-btn' :class='item.active' @click='changeSbss(item)'>{{item.text}}</van-button>
|
|
|
+ </div>
|
|
|
+ <div v-if='!loadMore && sbssList.length>3' class='load-more' @click='loadMore= true'>加载更多</div>
|
|
|
+ <div v-if='loadMore'>
|
|
|
+ <div class='system-btn' v-for='(item,index) in sbssList.slice(3)' :key='index'>
|
|
|
+ <van-button size='small' class='m-btn' :class='item.active' @click='changeSbss(item)'>{{item.text}}</van-button>
|
|
|
+ </div>
|
|
|
+ </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' description='暂无数据'>
|
|
|
+ <template #image>
|
|
|
+ <img class='no-data' src='../../assets/images/search_null.png' alt />
|
|
|
+ </template>
|
|
|
+ </van-empty>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: '',
|
|
|
- props: {
|
|
|
-
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
-
|
|
|
-},
|
|
|
- beforeMount() {
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
+/**
|
|
|
+ * 点击更多设备,进入到的更多设备列表页面
|
|
|
+ */
|
|
|
+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 { querySmsLocation } from '@/api/equipmentList'
|
|
|
+import { queryPic } from '@/api/public'
|
|
|
+import ImagePreview from '@/components/ImagePreview'
|
|
|
+import { sleep } from '@/utils/util'
|
|
|
+import { cloneDeep } from 'lodash'
|
|
|
+export default {
|
|
|
+ name: 'LowVoltageCabinet',
|
|
|
+ props: {},
|
|
|
+ components: { ImagePreview },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mock: 2,
|
|
|
+ title: '更多设备',
|
|
|
+ keyword: '',
|
|
|
+ page: 1,
|
|
|
+ size: 20, //TODO: size1500
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ showPopup: false,
|
|
|
+ systemList: [
|
|
|
+ { text: '全部', smsxt: '全部', active: 'active' },
|
|
|
+ { text: '供电系统', smsxt: '1001', active: '' },
|
|
|
+ { text: '暖通系统', smsxt: '1002', active: '' },
|
|
|
+ { text: '消防系统', smsxt: '1003', active: '' },
|
|
|
+ { text: '弱电系统', smsxt: '1004', active: '' },
|
|
|
+ { text: '给排水系统', smsxt: '1005', active: '' },
|
|
|
+ { text: '电梯系统', smsxt: '1006', active: '' },
|
|
|
+ { text: '燃气系统', smsxt: '1007', active: '' },
|
|
|
+ { text: '土建系统', smsxt: '1008', active: '' },
|
|
|
+ ],
|
|
|
+ system_code: '', //系统code
|
|
|
+ sbss_code: '', //设备设施code
|
|
|
+ sbssList: [{ text: '全部', code: '全部', active: 'active' }], //设备设施筛选条件
|
|
|
+ loadMore: false,
|
|
|
+ // 弹窗中使用数据
|
|
|
+ modalData: {
|
|
|
+ system: '',
|
|
|
+ sbss: '全部',
|
|
|
+ },
|
|
|
+ // 弹窗中使用备份数据
|
|
|
+ modalDataBak: {
|
|
|
+ system: '',
|
|
|
+ sbss: '全部',
|
|
|
+ },
|
|
|
+ mockList: [
|
|
|
+ {
|
|
|
+ assetid: 1206624,
|
|
|
+ assetnum: '26466',
|
|
|
+ assetuid: 1221607,
|
|
|
+ category_code: 'gde',
|
|
|
+ classstructureid: '1932',
|
|
|
+ floorcode: 'B2',
|
|
|
+ fws: '上海恒锦动力科技有限公司',
|
|
|
+ importance: 12,
|
|
|
+ is_detecting: false,
|
|
|
+ is_exception: false,
|
|
|
+ manufacturer: '上海恒锦动力科技有限公司',
|
|
|
+ sb_status: '运行',
|
|
|
+ sbglgs: '商管',
|
|
|
+ sbjbm: '1',
|
|
|
+ sbjc: '发电机',
|
|
|
+ sbxh: 'MX-1030-4',
|
|
|
+ seq: -200,
|
|
|
+ sl: 1,
|
|
|
+ system_code: '1001',
|
|
|
+ type_code: 'gd0112',
|
|
|
+ type_name: '柴油发电机组',
|
|
|
+ wzjc: '商业楼/B2/地下建筑-发电机房-地下1层车库发电机房',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ assetid: 1206624,
|
|
|
+ assetnum: '26466',
|
|
|
+ assetuid: 1221607,
|
|
|
+ category_code: 'gde',
|
|
|
+ classstructureid: '1933',
|
|
|
+ floorcode: 'B2',
|
|
|
+ fws: '上海恒锦动力科技有限公司',
|
|
|
+ importance: 12,
|
|
|
+ is_detecting: false,
|
|
|
+ is_exception: false,
|
|
|
+ manufacturer: '上海恒锦动力科技有限公司',
|
|
|
+ sb_status: '运行',
|
|
|
+ sbglgs: '商管',
|
|
|
+ sbjbm: '1',
|
|
|
+ sbjc: '发电机',
|
|
|
+ sbxh: 'MX-1030-4',
|
|
|
+ seq: -200,
|
|
|
+ sl: 1,
|
|
|
+ system_code: '1001',
|
|
|
+ type_code: 'gd0112',
|
|
|
+ type_name: '柴油发电机组',
|
|
|
+ wzjc: '商业楼/B2/地下建筑-发电机房-地下2层车库发电机房',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ assetid: 1206624,
|
|
|
+ assetnum: '26466',
|
|
|
+ assetuid: 1221607,
|
|
|
+ category_code: 'gde',
|
|
|
+ classstructureid: '1933',
|
|
|
+ floorcode: 'B2',
|
|
|
+ fws: '上海恒锦动力科技有限公司',
|
|
|
+ importance: 12,
|
|
|
+ is_detecting: false,
|
|
|
+ is_exception: false,
|
|
|
+ manufacturer: '上海恒锦动力科技有限公司',
|
|
|
+ sb_status: '运行',
|
|
|
+ sbglgs: '商管',
|
|
|
+ sbjbm: '1',
|
|
|
+ sbjc: '发电机',
|
|
|
+ sbxh: 'MX-1030-4',
|
|
|
+ seq: -200,
|
|
|
+ sl: 1,
|
|
|
+ system_code: '1001',
|
|
|
+ type_code: 'gd0112',
|
|
|
+ type_name: '柴油发电机组',
|
|
|
+ wzjc: '商业楼/B2/地下建筑-发电机房-地下3层车库发电机房',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ assetid: 1206624,
|
|
|
+ assetnum: '26466',
|
|
|
+ assetuid: 1221607,
|
|
|
+ category_code: 'gde',
|
|
|
+ classstructureid: '1933',
|
|
|
+ floorcode: 'B2',
|
|
|
+ fws: '上海恒锦动力科技有限公司',
|
|
|
+ importance: 12,
|
|
|
+ is_detecting: false,
|
|
|
+ is_exception: false,
|
|
|
+ manufacturer: '上海恒锦动力科技有限公司',
|
|
|
+ sb_status: '运行',
|
|
|
+ sbglgs: '商管',
|
|
|
+ sbjbm: '1',
|
|
|
+ sbjc: '发电机',
|
|
|
+ sbxh: 'MX-1030-4',
|
|
|
+ seq: -200,
|
|
|
+ sl: 1,
|
|
|
+ system_code: '1001',
|
|
|
+ type_code: 'gd0112',
|
|
|
+ type_name: '柴油发电机组',
|
|
|
+ wzjc: '商业楼/B2/地下建筑-发电机房-地下4层车库发电机房',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ backPage() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击右侧筛选
|
|
|
+ */
|
|
|
+ handleRightClick() {
|
|
|
+ this.showPopup = true
|
|
|
+ // 设置选中的专业系统
|
|
|
+ this.changeSystem({ smsxt: this.system_code })
|
|
|
+ this.loadMore = false
|
|
|
+ this.sbssList = [{ text: '全部', code: '', active: 'active' }]
|
|
|
+ // 查询筛选条件的 设备设施
|
|
|
+ // this.getSbss()
|
|
|
+ },
|
|
|
+ onSearch() {
|
|
|
+ // 初始化数据,查询列表
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * popup 更改系统
|
|
|
+ */
|
|
|
+ changeSystem(data) {
|
|
|
+ console.log(data)
|
|
|
+ let systemList = this.systemList
|
|
|
+ systemList.map((item) => {
|
|
|
+ item.active = ''
|
|
|
+ if (item.smsxt === data.smsxt) {
|
|
|
+ item.active = 'active'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 弹窗选中的系统
|
|
|
+ this.$set(this.modalDataBak, 'system', data.smsxt)
|
|
|
+ // this.getSbss(data.smsxt)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 重置
|
|
|
+ */
|
|
|
+ reset() {
|
|
|
+ // this.modalDataBak = {
|
|
|
+ // system: '',
|
|
|
+ // }
|
|
|
+ // this.modalData = {
|
|
|
+ // system: '',
|
|
|
+ // }
|
|
|
+ // this.system_code = this.smsxt
|
|
|
+ this.showPopup = false
|
|
|
+ // 初始化数据,查询列表
|
|
|
+ // this.initData()
|
|
|
+ // this.onLoad()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 弹窗确认
|
|
|
+ */
|
|
|
+ confirm() {
|
|
|
+ // this.modalData = cloneDeep(this.modalDataBak)
|
|
|
+ this.showPopup = false
|
|
|
+ // this.system_code = this.modalData.system
|
|
|
+ // 初始化数据,查询列表
|
|
|
+ // this.initData()
|
|
|
+ // this.onLoad()
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
-
|
|
|
+.more-equipment {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 配电室列表
|
|
|
+ .equipment-container {
|
|
|
+ width: 100%;
|
|
|
+ // background-color: #fff;
|
|
|
+ min-height: 1px;
|
|
|
+ // TODO:
|
|
|
+ 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 15px;
|
|
|
+ color: #025baa;
|
|
|
+ height: 45px;
|
|
|
+ background: rgba(2, 91, 170, 0.1);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #025baa;
|
|
|
+ line-height: 45px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ /deep/ .van-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .van-cell__title {
|
|
|
+ display: flex;
|
|
|
+ vertical-align: center;
|
|
|
+ .number {
|
|
|
+ width: 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrow-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: inherit !important;
|
|
|
+ color: #333333 !important;
|
|
|
+ }
|
|
|
+ // 维修
|
|
|
+ .wx,
|
|
|
+ .wb {
|
|
|
+ color: #d83931;
|
|
|
+ display: inline-block;
|
|
|
+ width: 44px;
|
|
|
+ margin-right: 10px;
|
|
|
+ background: #fbeceb;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .wb {
|
|
|
+ color: #0481e1;
|
|
|
+ background: #e6f3fc;
|
|
|
+ }
|
|
|
+ // 加载更多
|
|
|
+ .load-more {
|
|
|
+ width: 80px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px auto;
|
|
|
+ color: #025baa;
|
|
|
+ background: #e5eef6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 空状态
|
|
|
+ .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: auto;
|
|
|
+ // 专业系统按钮
|
|
|
+ .system-btn-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .system-btn {
|
|
|
+ width: 50% !important;
|
|
|
+ min-width: 50% !important;
|
|
|
+ max-width: 50% !important;
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 10px 10px 0;
|
|
|
+ .m-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 32px !important;
|
|
|
+ text-align: center;
|
|
|
+ background: #eff0f1;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|
yunxing