Quellcode durchsuchen

Merge branch 'dev' of http://39.106.8.246:3003/yunxing/wanda-bm-guide-h5 into dev

zhangyu vor 4 Jahren
Ursprung
Commit
f2df186a59

+ 7 - 0
src/App.vue

@@ -239,5 +239,12 @@ export default {
 // }
 .tabber {
     height: 50px;
+    //
+    /deep/ .van-tabbar-item--active {
+        color: #025baa !important;
+        i {
+            color: #025baa !important;
+        }
+    }
 }
 </style>

+ 4 - 0
src/api/equipmentList.js

@@ -35,3 +35,7 @@ export function queryShops({ getParams }) {
 export function querySmsLocation({ data, postParams }) {
     return httputils.fetchJson(`/data/sms_location/query`, data, postParams)
 }
+// 设备设施 - 查询低压出线柜明细 
+export function queryDygjcxline({ data, postParams }) {
+    return httputils.fetchJson(`/data/sms_dygjcxline/queryDygjcxline`, data, postParams)
+}

+ 2 - 2
src/main.ts

@@ -19,7 +19,7 @@ import VConsole from 'vconsole'
 // 开发环境引入 vConsole调试工具
 if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_RealEnv !== 'production') {
     // TODO: vConsole
-    new VConsole()
+    // new VConsole()
 }
 const ua = navigator.userAgent
 
@@ -38,7 +38,7 @@ if (process.env.NODE_ENV === 'production') {
     })
 } else {
     // 开发环境
-    new Vue({
+    new Vue({ 
         router,
         store,
         render: (h) => h(App),

+ 4 - 3
src/router/index.ts

@@ -225,12 +225,13 @@ const router = new VueRouter({
     routes,
 })
 // 跳入路由后要对发送pvuv
-router.afterEach((to) => {
-    // console.log(to)
+router.afterEach((to, from) => {
+    // console.log(to, from)
     // 项目概览,楼层功能,设备设施,其他事项 记录pupv
     let pupvArr = ['Overview', 'FloorFunc', 'EquipmentFacilities', 'OtherMatter']
+    // tabbar对应的四个路由相互切换,发送puuv
     // @ts-ignore
-    if (!pupvArr.includes(to.name)) {
+    if (!pupvArr.includes(to.name) || !pupvArr.includes(from.name)) {
         return true
     }
     let postParams = {

+ 2 - 2
src/views/equipmentFacilities/EngineRoomPicture.vue

@@ -79,7 +79,7 @@ export default {
             title: '机房平面布置图',
             keyword: '',
             page: 1,
-            size: 2000, //TODO: size1500
+            size: 20, //TODO: size1500
             list: [],
             loading: false,
             finished: false,
@@ -168,7 +168,7 @@ export default {
             }
             let resData = res.data.data || []
             console.log(resData)
-            resData = resData.filter((v) => v.photos_num) // TODO:开发时 过滤有图片的列表项
+            // resData = resData.filter((v) => v.photos_num) // TODO:开发时 过滤有图片的列表项
             console.log(resData)
             this.list = this.list.concat(resData)
             this.count = res.data.count || 0

+ 327 - 44
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -11,11 +11,87 @@
             <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
         </div>
         <!-- 配电室 -->
-        <div class='switch-room-container' v-if='1'>
-            <div class='switch-room' v-for='ii in 3' :key='ii'>
-                <div class='title'>商业楼/B1层/配电室/3#</div>
+        <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
+        <van-list class='switch-room-container' v-model='loading' :finished='finished' @load='onLoad' finished-text='没有更多了' v-if='1'>
+            <div class='switch-room' v-for='(item,index) in list' :key='index'>
+                <div class='title'>{{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.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>
+            <!-- <div class='switch-room' v-for='ii in 3' :key='ii'>
+                <div class='title'>商业楼/B1层/配电室/3#</div>
+                <div class='info-container'>
                     <div class='info' v-for='i in mock' :key='i'>
                         <div class='name'>1AAAA1</div>
                         <div class='specification'>
@@ -35,11 +111,10 @@
                         </div>
                         <div class='divider'></div>
                     </div>
-                    <!-- 加载更多 -->
                     <div class='load-more' @click='mock=5'>加载更多</div>
                 </div>
-            </div>
-        </div>
+            </div>-->
+        </van-list>
         <!-- 点击头部筛选,出现的右侧弹窗 -->
         <van-popup class='m-popup-container' v-model='showPopup' position='right'>
             <div class='m-popup'>
@@ -75,43 +150,41 @@ 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 { queryDygjcxline, querySmsLocation } from '@/api/equipmentList'
 import { sleep } from '@/utils/util'
 import { cloneDeep } from 'lodash'
 export default {
     name: 'LowVoltageCabinet',
     props: {},
-    components: { ImagePreview },
+    components: {},
     data() {
         return {
             mock: 2,
             title: '配电室低压柜及出线明细',
             keyword: '',
             page: 1,
-            size: 20, //TODO: size1500
+            size: 5,
+            innerSize: 5,
             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: '' },
-            ],
+            systemList: [{ text: '全部', location: '全部', active: 'active' }],
+            modalData: {
+                location: '全部',
+            },
+            modalDataBak: {
+                location: '全部',
+            },
         }
     },
     computed: {
         ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
     },
-    created() {},
+    created() {
+        // 查询筛选条件(右弹窗)
+        this.getFilterList()
+    },
     beforeMount() {},
     mounted() {},
     methods: {
@@ -119,6 +192,194 @@ export default {
             this.$router.go(-1)
         },
         /**
+         *
+         */
+        async onLoad() {
+            if (this.page > 1) {
+                await sleep(1000)
+            }
+            await this.getList()
+            // list无数据,不执行后续分页查询
+            if (!this.list.length) {
+                this.finished = true
+                return true
+            }
+            this.page++
+            this.loading = false
+            if (this.list.length >= this.count) {
+                this.finished = true
+            }
+        },
+        /**
+         * 查询低压柜list
+         */
+        async getList() {
+            // 请求地址 POST /data/sms_dygjcxline/queryDygjcxline?plazaId=1000772&page=1&size=10&keyword=123:drawernum,outspec
+            // 参数说明
+            // {
+            //     "locfl": 1003,//分类内码
+            //     "locflList": [],//分类内码
+            //     "pageable:{    //低压出线柜条数
+            //        "pageNumber":1,
+            //        "pageSize":50
+            //      }
+            // }
+            let queryData = {
+                data: {
+                    page: this.page,
+                    size: this.size,
+                    plazaId: this.plazaId,
+                },
+                postParams: {
+                    locflList: ['5201', '5204', '5209'], //低压柜
+                    // location: '',
+                    pageable: {
+                        pageNumber: 1,
+                        pageSize: this.innerSize,
+                    },
+                },
+            }
+            // 筛选 配电室之后, 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
+            res.data.map((item, index, arr) => {
+                if (item?.count > 5) {
+                    // console.log(item)
+                    arr[index] = {
+                        ...item,
+                        loadMore: true,
+                        loading: true,
+                        finished: false,
+                        list: [],
+                        page: 2,
+                        size: this.innerSize,
+                    }
+                } else {
+                    item.loadMore = false
+                }
+            })
+            this.list = [...this.list, ...res.data]
+            this.count = res.count
+        },
+
+        /**
+         * 点击加载更多
+         */
+        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('getLocationList')
+            console.log(item)
+            const { location, index } = item
+            let currentList = cloneDeep(this.list[index])
+            console.log(currentList)
+            console.log('getLocationList')
+            let queryData = {
+                data: {
+                    page: 1, // TODO: page
+                    size: currentList.size,
+                    plazaId: this.plazaId,
+                },
+                postParams: {
+                    locflList: ['5201', '5204', '5209'], //低压柜
+                    location: item.location,
+                    pageable: {
+                        pageNumber: currentList.page,
+                        pageSize: this.innerSize,
+                    },
+                },
+            }
+            // 筛选 配电室之后, location字段上送
+            console.log(queryData)
+            let res
+            try {
+                res = await queryDygjcxline(queryData)
+            } catch (error) {
+                console.log(error)
+            }
+            // mockData
+            res = require('./mockData').queryDygjcxlineData1
+            currentList.list = [...currentList.list, ...res.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() {
@@ -135,39 +396,54 @@ export default {
             let systemList = this.systemList
             systemList.map((item) => {
                 item.active = ''
-                if (item.smsxt === data.smsxt) {
+                if (item.location === data.location) {
                     item.active = 'active'
                 }
             })
             // 弹窗选中的系统
-            // this.$set(this.modalDataBak, 'system', data.smsxt)
+            this.$set(this.modalDataBak, 'location', data.location)
         },
         /**
          * 重置
          */
         reset() {
-            // this.modalDataBak = {
-            //     system: '',
-            // }
-            // this.modalData = {
-            //     system: '',
-            // }
-            // this.system_code = this.smsxt
+            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()
+            this.initData()
+            this.onLoad()
         },
         /**
          * 弹窗确认
          */
         confirm() {
-            // this.modalData = cloneDeep(this.modalDataBak)
+            this.modalData = cloneDeep(this.modalDataBak)
             this.showPopup = false
-            // this.system_code = this.modalData.system
             // 初始化数据,查询列表
-            // this.initData()
-            // this.onLoad()
+            this.initData()
+            this.onLoad()
+        },
+        /**
+         *  初始化数据,查询列表
+         */
+        initData() {
+            this.finished = false
+            this.page = 1
+            this.count = 0
+            this.list = []
         },
     },
 }
@@ -315,8 +591,8 @@ export default {
         .m-popup {
             width: 100%;
             height: calc(100% - 80px);
-            display: flex;
-            flex-direction: column;
+            // display: flex;
+            // flex-direction: column;
             .title {
                 font-size: 16px;
                 font-weight: 500;
@@ -326,26 +602,33 @@ export default {
             // 配电室
             .system {
                 width: 100%;
-                height: auto;
+                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;
-                        height: 40px;
+                        // min-height: 40px;
+                        height: auto;
                         box-sizing: border-box;
-                        padding: 10px 10px 10px 0;
+                        padding: 5px 0 !important;
                         .m-btn {
                             width: 100%;
-                            height: 32px !important;
+                            font-size: 14px;
+                            height: 100%;
+                            // height: 32px !important;
                             text-align: center;
                             background: #eff0f1;
                             border-radius: 2px;
+                            padding: 5px 0 !important;
                         }
                     }
                 }

+ 535 - 25
src/views/equipmentFacilities/MoreEquipmentList.vue

@@ -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>

+ 6 - 2
src/views/equipmentFacilities/index.vue

@@ -323,6 +323,8 @@ export default {
         async showImage(item) {
             console.log('显示原理图')
             console.log(item)
+            this.imgList = []
+            this.imgKey = 'img_' + new Date().getTime()
             if (Array.isArray(item.typecode)) {
                 return this.getTuJianImage(item)
             }
@@ -344,6 +346,7 @@ export default {
                 imgList.push(item.url)
             })
             this.imgList = imgList
+
             imgList.length && (this.showImgPreview = true)
         },
         /**
@@ -367,7 +370,7 @@ export default {
             }
             let resData = res.data
             let imgList = []
-            resData.map((item) => {
+            resData?.data.map((item) => {
                 imgList.push(item.url)
             })
             this.imgList = imgList
@@ -384,6 +387,7 @@ export default {
          * 配电室低压柜及出线明细
          */
         hanldeDyg() {
+            // TODO: 11111
             this.$router.push({ name: 'LowVoltageCabinet', params: {} })
         },
         /**
@@ -420,7 +424,7 @@ export default {
          * 点击更多设备卡片,跳转设备列表页面
          */
         goToMoreEquipment() {
-            this.$router.push({ name: 'MoreEquipmentList', params: {} })
+            // this.$router.push({ name: 'MoreEquipmentList', params: {} })
         },
     },
 }

+ 129 - 0
src/views/equipmentFacilities/mockData.js

@@ -0,0 +1,129 @@
+// 低压柜模拟数据
+const queryDygjcxlineData = {
+    result: 'success',
+    data: [
+        {
+            data: [
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '1-1AA', //抽屉编号
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区1营业用电',
+                    floor: 'B2',
+                    drawernum: '1-4AA-1',
+                },
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '1-1AA', //抽屉编号
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区1营业用电',
+                    floor: 'B2',
+                    drawernum: '1-4AA-1',
+                },
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '1-1AA', //抽屉编号
+                },
+
+                // {
+                //     glsms_proimgupid: 37206,
+                //     outspec: '4*95+1*50',
+                //     control: '步行街货梯2主',
+                //     floor: '1F',
+                //     drawernum: '2-12AA-9',
+                // },
+            ],
+            count: 20,
+            location: '1054',
+            wzjc: '商业楼/B2/停车场/变电所/大商1号变电所',
+        },
+        {
+            data: [
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '1-1AA', //抽屉编号
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区2营业用电',
+                    floor: 'B2',
+                    drawernum: '1-4AA-2',
+                },
+
+                // {
+                //     glsms_proimgupid: 37206,
+                //     outspec: '4*95+1*50',
+                //     control: '步行街货梯3主',
+                //     floor: '1F',
+                //     drawernum: '2-12AA-10',
+                // },
+            ],
+            count: 20,
+            location: '1054',
+            wzjc: '商业楼/B2/停车场/变电所/大商2号变电所',
+        },
+    ],
+    count: 10,
+}
+const queryDygjcxlineData1 = {
+    result: 'success',
+    data: [
+        {
+            data: [
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '2-1B', //抽屉编号
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区1营业用电',
+                    floor: 'B2',
+                    drawernum: '2-1C',
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区1营业用电',
+                    floor: 'B2',
+                    drawernum: '2-1D',
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*95+1*50',
+                    control: '步行街货梯2主',
+                    floor: '1F',
+                    drawernum: '2-12AA-9',
+                },
+            ],
+            count: 20,
+            location: '1054',
+            wzjc: '商业楼/B2/停车场/变电所/大商1号变电所',
+        },
+    ],
+    count: 1,
+}
+
+export { queryDygjcxlineData, queryDygjcxlineData1 }

+ 29 - 6
src/views/overview/index.vue

@@ -12,7 +12,7 @@
             </van-swipe>
         </div>
         <!-- tab页签 -->
-        <van-tabs class='overview-tabs' v-model='active' color='#025BAA' title-active-color='#025BAA' :line-width='120' :line-height='2'>
+        <van-tabs class='overview-tabs' v-model='active' color='#025BAA' title-active-color='#025BAA' :line-width='80' :line-height='2'>
             <!-- 建筑综合信息 -->
             <van-tab class='buiding-tab' title='建筑综合信息'>
                 <div class='building-info'>
@@ -170,7 +170,7 @@
                 @click='goToUpdateRecord'
             />
             <span v-else>近一个月,说明书无更新</span>
-            <van-icon v-show='showNoticeBar' class='building-arrow' name='arrow' size='14px'  />
+            <van-icon v-show='showNoticeBar' class='building-arrow' name='arrow' size='14px' />
         </div>
     </div>
 </template>
@@ -398,6 +398,16 @@ export default {
             flex: 1;
             overflow: auto;
         }
+        /deep/ .van-tabs__wrap {
+            border-bottom: 1px solid #eaeaea;
+            .van-tabs__nav--line {
+                box-sizing: content-box;
+                height: 100%;
+                width: 80%;
+                margin: 0 auto;
+            }
+        }
+
         // 建筑综合信息
         .buiding-tab {
             width: 100%;
@@ -426,8 +436,8 @@ export default {
         }
         // 施工单位信息
         .sgdw-info {
-            margin-top: 10px;
-            height: calc(100% - 10px);
+            margin-top: 15px;
+            height: calc(100% - 15px);
             // tab样式修改
             /deep/.van-tabs__nav {
                 width: 50%;
@@ -438,6 +448,17 @@ export default {
                     background-color: rgb(229, 238, 246);
                 }
             }
+            /deep/.van-tabs__wrap {
+                border-bottom: none;
+                // margin: 15px 0;
+                .van-tabs__nav--card {
+                    border-radius: 2px;
+                    border-color: #d4d4d4 !important;
+                }
+                .van-tab {
+                    border-radius: 2px;
+                }
+            }
             & > .van-tabs {
                 display: flex;
                 flex-direction: column;
@@ -449,7 +470,7 @@ export default {
             }
             // 总包
             .zb {
-                padding: 10px 18px;
+                padding: 15px 18px 10px 18px;
                 li {
                     height: 25px;
                     line-height: 25px;
@@ -474,6 +495,7 @@ export default {
                     .card {
                         display: inline-block;
                         height: 25px;
+                        font-size: 14px;
                         background-color: #eff0f1;
                         border-radius: 2px;
                         color: #666;
@@ -490,7 +512,8 @@ export default {
             }
             // 分包
             .fb {
-                padding: 10px 18px;
+                padding: 15px 18px 10px 18px;
+
                 .fb-card {
                     width: 100%;
                     height: auto;