yunxing 4 years ago
parent
commit
750f3057a0

+ 2 - 2
src/api/equipmentList.js

@@ -17,9 +17,9 @@ export function querySystemCard({ getParams }) {
     return httputils.getJson(`/data/home/querySystemCard`, getParams)
 }
 
-// 设备设施-主要设备清单
+// 设备设施-主要设备清单-详情
 export function queryEquipmentList({ data, postParams }) {
-    return httputils.fetchJson(`/data/sms_asset/queryStatistics`, data, postParams)
+    return httputils.fetchJson(`/data/sms_asset/query`, data, postParams)
 }
 
 // 设备设施-楼层电井口(间)控制商铺范围清单

+ 13 - 1
src/utils/util.js

@@ -19,4 +19,16 @@ function osInfo() {
         dpr: dpr,
     }
 }
-export { osInfo }
+/**
+ * 同步延迟器
+ * @param { Number } timeout 延迟时间,ms
+ */
+async function sleep(timeout) {
+    await new Promise((resolve) => {
+        setTimeout(() => {
+            resolve()
+        }, timeout)
+    })
+}
+
+export { osInfo, sleep }

+ 135 - 0
src/views/equipmentFacilities/Equipment copy.vue

@@ -0,0 +1,135 @@
+
+
+<template>
+    <div class='equipment-page'>
+        <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'>
+                <!-- <template #action>
+                <div class='search' @click='onSearch'>搜索</div>
+                </template>-->
+            </van-search>
+        </div>
+        <van-list class='equipment-list' v-model='loading' :finished='finished' finished-text='已经到底了' @load='onLoad'>
+            <van-cell v-for='item in list' :key='item' :title='item' />
+        </van-list>
+    </div>
+</template>
+<script>
+/**
+ * 设备页面(正常/或者维修或维保)
+ * 点击设备卡片,跳转到改页面
+ *
+ */
+import Vue from 'vue'
+import { NavBar, Search, List, Cell } from 'vant'
+Vue.use(NavBar).use(Search).use(List).use(Cell)
+import { mapGetters } from 'vuex'
+
+import { queryEquipmentList } from '@/api/equipmentList'
+
+export default {
+    name: 'EngineRoomPicture',
+    props: {},
+    data() {
+        return {
+            title: '',
+            keyWord: '',
+            list: [],
+            loading: false,
+            finished: false,
+            category_code: '',
+        }
+    },
+    computed: {
+        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
+    },
+    components: {},
+    created() {
+        console.log(this.$route)
+        let { title, category_code } = this.$route.params
+        this.title = title
+        this.category_code = category_code
+        this.getList()
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        backPage() {
+            this.$router.go(-1)
+        },
+        handleRightClick() {
+            console.log(1111)
+        },
+        /**
+         *
+         */
+        async getList() {
+            let data = {
+                    page: this.page,
+                    size: this.size,
+                    plazaId: this.plazaId,
+                },
+                postParams = { system_code: this.smsxt }
+            let resData = queryEquipmentList({ data, postParams })
+            console.log('==============')
+            console.log(resData)
+            if (!resData && !resData?.data) {
+                return false
+            }
+        },
+        onLoad() {
+            console.log('onload')
+            // 异步更新数据
+            // setTimeout 仅做示例,真实场景中一般为 ajax 请求
+            setTimeout(() => {
+                for (let i = 0; i < 10; i++) {
+                    this.list.push(this.list.length + 1)
+                }
+
+                // 加载状态结束
+                this.loading = false
+
+                // 数据全部加载完成
+                if (this.list.length >= 40) {
+                    this.finished = true
+                }
+            }, 1000)
+        },
+        /**
+         * 搜索
+         */
+        onSearch() {},
+    },
+}
+</script>
+<style lang='less' scoped>
+.equipment-page {
+    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;
+        }
+    }
+    .equipment-list {
+        height: calc(100% - 100px);
+        overflow: auto;
+    }
+}
+</style>

+ 122 - 19
src/views/equipmentFacilities/Equipment.vue

@@ -7,14 +7,30 @@
                 <i class='iconfont wanda-scan'></i>
             </template>
         </van-nav-bar>
-        <van-search class='equipment-search' v-model='keyWord' background='#F5F6F7' show-action placeholder='请输入搜索关键词' @search='onSearch'>
-            <template #action>
+        <div class='equipment-search-container'>
+            <van-search class='equipment-search' v-model='keyWord' placeholder='请输入设备关键字或编号' @search='onSearch'>
+                <!-- <template #action>
                 <div class='search' @click='onSearch'>搜索</div>
-            </template>
-        </van-search>
-        <van-list class='equipment-list' v-model='loading' :finished='finished' finished-text='已经到底了' @load='onLoad'>
-            <van-cell v-for='item in list' :key='item' :title='item' />
-        </van-list>
+                </template>-->
+            </van-search>
+        </div>
+        <div class='equipment-list'>
+            <van-list v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
+                <!-- <van-cell v-for='item in list' :key='item' :title='item' /> -->
+                <van-cell is-link v-for='item in list' :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' v-else-if='item._type === "维保"'>维保</span>
+                        <van-icon name='arrow' class='arrow-icon' />
+                    </template>
+                </van-cell>
+            </van-list>
+        </div>
     </div>
 </template>
 <script>
@@ -24,12 +40,12 @@
  *
  */
 import Vue from 'vue'
-import { NavBar, Search, List, Cell } from 'vant'
-Vue.use(NavBar).use(Search).use(List).use(Cell)
+import { NavBar, Search, List, Cell, Icon } from 'vant'
+Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon)
 import { mapGetters } from 'vuex'
 
 import { queryEquipmentList } from '@/api/equipmentList'
-
+import { sleep } from '@/utils/util'
 export default {
     name: 'EngineRoomPicture',
     props: {},
@@ -37,6 +53,8 @@ export default {
         return {
             title: '',
             keyWord: '',
+            page: 1,
+            size: 10,
             list: [],
             loading: false,
             finished: false,
@@ -52,6 +70,7 @@ export default {
         let { title, category_code } = this.$route.params
         this.title = title
         this.category_code = category_code
+        this.onLoad()
     },
     beforeMount() {},
     mounted() {},
@@ -70,18 +89,41 @@ export default {
                     page: this.page,
                     size: this.size,
                     plazaId: this.plazaId,
+                    category_code: this.category_code,
                 },
                 postParams = { system_code: this.smsxt }
-            let resData = queryEquipmentList({ data, postParams })
+            let resData = await queryEquipmentList({ data, postParams })
             if (!resData && !resData?.data) {
                 return false
             }
+            let res_data = resData.data?.data || []
+            res_data.map((item) => {
+                item._type = '正常'
+                // 检测中
+                if (item.is_detecting) {
+                    item._type = '维保'
+                }
+                // 异常
+                if (item.is_exception) {
+                    item._type = '维修'
+                }
+            })
+            this.list = this.list.concat(res_data)
+            this.count = resData.data?.count
+            console.log(JSON.stringify(res_data, null, 2))
         },
-        onLoad() {
+        async onLoad() {
             console.log('onload')
+            // await sleep(1000)
+            await this.getList()
+            this.page++
+            this.loading = false
+            if (this.list.length >= this.count) {
+                this.finished = true
+            }
             // 异步更新数据
             // setTimeout 仅做示例,真实场景中一般为 ajax 请求
-            setTimeout(() => {
+            /* setTimeout(() => {
                 for (let i = 0; i < 10; i++) {
                     this.list.push(this.list.length + 1)
                 }
@@ -93,12 +135,15 @@ export default {
                 if (this.list.length >= 40) {
                     this.finished = true
                 }
-            }, 1000)
+            }, 1000) */
+            this.getList()
         },
         /**
          * 搜索
          */
-        onSearch() {},
+        onSearch() {
+            
+        },
     },
 }
 </script>
@@ -106,18 +151,76 @@ export default {
 .equipment-page {
     width: 100%;
     height: 100%;
-    background-color: lightblue;
+    background-color: #f5f6f7;
     // 返回箭头修改
     /deep/ .van-nav-bar .van-icon {
         color: #000;
     }
     // 搜索
-    .equipment-search{
-        
+    .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 {
-        height: calc(100% - 45px);
+        width: 100%;
+        padding: 0 10px;
+        background-color: #fff;
+        min-height: 1px;
+        max-height: calc(100% - 100px);
         overflow: auto;
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        /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;
+        }
     }
 }
 </style>