|
@@ -0,0 +1,75 @@
|
|
|
+<template>
|
|
|
+ <div class='engine-room-picture'>
|
|
|
+ <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>
|
|
|
+ <van-list class='room-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, List, Cell } from 'vant'
|
|
|
+Vue.use(NavBar).use(List).use(Cell)
|
|
|
+export default {
|
|
|
+ name: 'EngineRoomPicture',
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: '机房平面布置图',
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ backPage() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ handleRightClick() {
|
|
|
+ console.log(1111)
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.engine-room-picture {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // 返回箭头修改
|
|
|
+ /deep/ .van-nav-bar .van-icon {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .room-list {
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|