|
@@ -1,21 +1,500 @@
|
|
<template>
|
|
<template>
|
|
- <div>主要设备清单-详情</div>
|
|
|
|
|
|
+ <div class='main-equipment-detail'>
|
|
|
|
+ <!-- 顶部条 -->
|
|
|
|
+ <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-list' v-if='list.length'>
|
|
|
|
+ <van-list v-model='loading' :finished='finished' finished-text='没有更多了' :offset='20' :immediate-check='false' @load='onLoad'>
|
|
|
|
+ <div class='equipment' v-for='(item,index) in 5' :key='index'>
|
|
|
|
+ <p class='title'>商业楼/B2/停车场/变电所/大商2号变电所-进线柜-隔离柜AH1 201-2</p>
|
|
|
|
+ <div class='assetnum-attribution'>
|
|
|
|
+ <div class='assetnum'>
|
|
|
|
+ <div class='label'>设备内码:</div>
|
|
|
|
+ <div class='value'>30715</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='attribution'>
|
|
|
|
+ <div class='label'>管理归属:</div>
|
|
|
|
+ <div class='value'>商管</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='brand'>
|
|
|
|
+ <div class='label'>{{'品\u3000\u3000牌:'}}</div>
|
|
|
|
+ <div class='value'>万宁电力</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='manufacturer'>
|
|
|
|
+ <div class='label'>生产厂商:</div>
|
|
|
|
+ <div class='value'>上海中发电气(集团)股份有限公司</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='floor-status'>
|
|
|
|
+ <div class='floor'>
|
|
|
|
+ <div class='label'>
|
|
|
|
+ <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
|
|
|
|
+ <span>楼层:</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='value'>B2</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='status run' v-if='1'>运行</div>
|
|
|
|
+ <div class='status wx' v-else-if='2'>维修</div>
|
|
|
|
+ <div class='status wb' v-else>维保</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='divider'></div>
|
|
|
|
+ </div>
|
|
|
|
+ </van-list>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 无数据 -->
|
|
|
|
+ <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>
|
|
|
|
+ <!-- 点击头部筛选,出现的右侧弹窗 -->
|
|
|
|
+ <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 floorList' :key='index'>
|
|
|
|
+ <van-button class='m-btn' :class='item.active' @click='changeFloor(item)'>{{item.code}}</van-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='divider'></div>
|
|
|
|
+ <!-- 设备设施 -->
|
|
|
|
+ <div class='sbss'>
|
|
|
|
+ <h1 class='title'>管理归属</h1>
|
|
|
|
+ <div class='system-btn-container'>
|
|
|
|
+ <div class='system-btn' v-for='(item,index) in attributionList' :key='index'>
|
|
|
|
+ <van-button class='m-btn' :class='item.active' @click='changeAttribution(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>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<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 { queryOptions } from '@/api/public'
|
|
|
|
+import { sleep } from '@/utils/util'
|
|
|
|
+import { cloneDeep } from 'lodash'
|
|
export default {
|
|
export default {
|
|
name: 'mainEquipment',
|
|
name: 'mainEquipment',
|
|
props: {},
|
|
props: {},
|
|
data() {
|
|
data() {
|
|
- return {}
|
|
|
|
|
|
+ return {
|
|
|
|
+ title: '高压进线柜(4)',
|
|
|
|
+ keyword: '',
|
|
|
|
+ page: 1,
|
|
|
|
+ size: 10,
|
|
|
|
+ list: [{ a: 1 }, { a: 2 }],
|
|
|
|
+ loading: false,
|
|
|
|
+ finished: false,
|
|
|
|
+ showPopup: false,
|
|
|
|
+ floorList: [],
|
|
|
|
+ attributionList: [{ text: '全部', id: '全部', active: 'active' }],
|
|
|
|
+ currentFloor: '全部',
|
|
|
|
+ currentAttribution: '全部',
|
|
|
|
+ // 弹窗中使用数据
|
|
|
|
+ modalData: {
|
|
|
|
+ floor: '',
|
|
|
|
+ attribution: '',
|
|
|
|
+ },
|
|
|
|
+ // 弹窗中使用备份数据
|
|
|
|
+ modalDataBak: {
|
|
|
|
+ floor: '',
|
|
|
|
+ attribution: '',
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters(['plazaId', 'smsxt', 'categoryId', 'floorsArr']),
|
|
},
|
|
},
|
|
components: {},
|
|
components: {},
|
|
|
|
+ created() {
|
|
|
|
+ window.vm = this
|
|
|
|
+ // 设置 筛选抽屉中的 楼层
|
|
|
|
+ let floorList = [{ code: '全部', gcname: '全部', gcode: '全部', gname: '全部', seq: null, active: 'active' }]
|
|
|
|
+ this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
|
|
|
|
+ floorList.push({ code, gcname, gcode, gname, seq, active: '' })
|
|
|
|
+ })
|
|
|
|
+ this.floorList = floorList
|
|
|
|
+ console.log(this.floorList)
|
|
|
|
+ // 查询归属管理
|
|
|
|
+ this.getOptions()
|
|
|
|
+ },
|
|
beforeMount() {},
|
|
beforeMount() {},
|
|
mounted() {},
|
|
mounted() {},
|
|
- methods: {},
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ async getOptions() {
|
|
|
|
+ let data = {
|
|
|
|
+ major: '暖通',
|
|
|
|
+ plazaId: 1000423,
|
|
|
|
+ onlyMainAsset: true,
|
|
|
|
+ }
|
|
|
|
+ let postParams = [{ columnName: { sbglgs: 'sbglgs' }, params: { tab_code: '' }, tableName: 'sms_asset' }]
|
|
|
|
+ await queryOptions({ data, postParams })
|
|
|
|
+ },
|
|
|
|
+ backPage() {
|
|
|
|
+ this.$router.go(-1)
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 点击右侧筛选
|
|
|
|
+ */
|
|
|
|
+ handleRightClick() {
|
|
|
|
+ this.showPopup = true
|
|
|
|
+ // 设置选中的专业系统
|
|
|
|
+ this.changeFloor({ gname: this.currentFloor })
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 搜索
|
|
|
|
+ */
|
|
|
|
+ onSearch() {
|
|
|
|
+ // 初始化数据,查询列表
|
|
|
|
+ this.initData()
|
|
|
|
+ this.onLoad()
|
|
|
|
+ },
|
|
|
|
+ initData() {},
|
|
|
|
+ onLoad() {},
|
|
|
|
+ /**
|
|
|
|
+ * popup 更改楼层
|
|
|
|
+ */
|
|
|
|
+ changeFloor(data) {
|
|
|
|
+ console.log(data)
|
|
|
|
+ let floorList = this.floorList
|
|
|
|
+ floorList.map((item) => {
|
|
|
|
+ item.active = ''
|
|
|
|
+ if (item.gname === data.gname) {
|
|
|
|
+ item.active = 'active'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // 弹窗选中的系统
|
|
|
|
+ this.$set(this.modalDataBak, 'floor', data.gname)
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 更改管理归属
|
|
|
|
+ */
|
|
|
|
+ changeAttribution(data) {
|
|
|
|
+ let { attributionList } = this
|
|
|
|
+ attributionList.map((item) => {
|
|
|
|
+ item.active = ''
|
|
|
|
+ if (item.text === data.text) {
|
|
|
|
+ item.active = 'active'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.$set(this.modalDataBak, 'attribution', data.text)
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 重置
|
|
|
|
+ */
|
|
|
|
+ reset() {
|
|
|
|
+ this.modalDataBak = {
|
|
|
|
+ floor: '',
|
|
|
|
+ wellType: '',
|
|
|
|
+ }
|
|
|
|
+ this.modalData = {
|
|
|
|
+ floor: '',
|
|
|
|
+ wellType: '',
|
|
|
|
+ }
|
|
|
|
+ this.attributionList = [{ text: '全部', id: '全部', active: 'active' }]
|
|
|
|
+ this.currentFloor = '全部'
|
|
|
|
+ this.currentAttribution = '全部'
|
|
|
|
+ this.showPopup = false
|
|
|
|
+ // 初始化数据,查询列表
|
|
|
|
+ this.initData()
|
|
|
|
+ this.onLoad()
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 确定
|
|
|
|
+ */
|
|
|
|
+ confirm() {
|
|
|
|
+ this.modalData = cloneDeep(this.modalDataBak)
|
|
|
|
+ this.showPopup = false
|
|
|
|
+ this.currentFloor = this.modalData.floor
|
|
|
|
+ this.currentAttribution = this.modalData.attribution
|
|
|
|
+ // 初始化数据,查询列表
|
|
|
|
+ this.initData()
|
|
|
|
+ this.onLoad()
|
|
|
|
+ },
|
|
|
|
+ },
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
|
|
+.main-equipment-detail {
|
|
|
|
+ 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-list {
|
|
|
|
+ width: 100%;
|
|
|
|
+ max-height: calc(100% - 100px);
|
|
|
|
+ overflow: auto;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ .equipment {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 16px 10px 0;
|
|
|
|
+ .title {
|
|
|
|
+ height: 44px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #333333;
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
+ }
|
|
|
|
+ .assetnum-attribution {
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
+ display: flex;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ .assetnum,
|
|
|
|
+ .attribution {
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .brand,
|
|
|
|
+ .manufacturer {
|
|
|
|
+ display: flex;
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ .floor-status {
|
|
|
|
+ margin: 12px 0 16px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ .floor {
|
|
|
|
+ display: flex;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ .label {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ span {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .status {
|
|
|
|
+ background: #d9f5d6;
|
|
|
|
+ width: 44px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ }
|
|
|
|
+ .run {
|
|
|
|
+ background: #d9f5d6;
|
|
|
|
+ color: #237b19;
|
|
|
|
+ }
|
|
|
|
+ // 维修
|
|
|
|
+ .wx {
|
|
|
|
+ background: #fbeceb;
|
|
|
|
+ color: #d83931;
|
|
|
|
+ }
|
|
|
|
+ // 维保
|
|
|
|
+ .wb {
|
|
|
|
+ background: #e6f3fc;
|
|
|
|
+ color: #0481e1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .label {
|
|
|
|
+ color: #666;
|
|
|
|
+ // margin-right: 10px;
|
|
|
|
+ width: 60px;
|
|
|
|
+ min-width: 60px;
|
|
|
|
+ max-width: 60px;
|
|
|
|
+ }
|
|
|
|
+ .value {
|
|
|
|
+ color: #333;
|
|
|
|
+ }
|
|
|
|
+ // 底部1px边框
|
|
|
|
+ .divider {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 1px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ background: #e6e6e6;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 空状态
|
|
|
|
+ .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: 35px 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: 33% !important;
|
|
|
|
+ min-width: 33% !important;
|
|
|
|
+ max-width: 33% !important;
|
|
|
|
+ height: 40px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 5px 10px 5px 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 {
|
|
|
|
+ display: flex;
|
|
|
|
+ width: 100%;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ flex-flow: wrap;
|
|
|
|
+ .system-btn {
|
|
|
|
+ width: 33% !important;
|
|
|
|
+ min-width: 33% !important;
|
|
|
|
+ max-width: 33% !important;
|
|
|
|
+ height: 50px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 5px 10px 5px 0;
|
|
|
|
+ .m-btn {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 32px !important;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: #eff0f1;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ padding: 0 !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .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>
|
|
</style>
|