You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.7 KiB
121 lines
2.7 KiB
1 week ago
|
<template>
|
||
|
|
<navigation-general :isBack="false" title="预警中心">
|
||
|
|
<scroll-view scroll-y="true" :style="{height: `calc(100% - ${boxTop}rpx)`}" @scrolltolower="scrolltolower">
|
||
|
|
<div class="building-list">
|
||
|
|
<view class="building-item" v-for="(item,index) in buildingList" :key="index">
|
||
|
|
<text class="building-name">{{item.pname }}</text>
|
||
|
|
<color-item :item="item"></color-item>
|
||
|
|
<text class="building-name">已 <text style="color: red;">{{item.daycount }}</text>天未更新</text>
|
||
|
|
</view>
|
||
|
|
</div>
|
||
|
|
<u-loadmore :status="status" :load-text="loadText" />
|
||
|
|
</scroll-view>
|
||
|
|
</navigation-general>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getWarningList
|
||
|
|
} from '@/api/taicangpop/data.js' //预警
|
||
|
|
import {
|
||
|
|
mapGetters
|
||
|
|
} from "vuex";
|
||
|
|
import {
|
||
|
|
handleColor
|
||
|
|
} from '@/utils/handlerColor.js'
|
||
|
|
export default {
|
||
|
|
computed: {
|
||
|
|
...mapGetters(["dept", "deptId"])
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
total: 0,
|
||
|
|
boxTop: 0,
|
||
|
|
buildingList: [],
|
||
|
|
status: 'loadmore',
|
||
|
|
loadText: {
|
||
|
|
loadmore: '轻轻上拉',
|
||
|
|
loading: '努力加载中',
|
||
|
|
nomore: '没有更多了~'
|
||
|
|
},
|
||
|
|
queryParams: {
|
||
|
|
xiaoquId: undefined,
|
||
|
|
deptId: undefined,
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 24,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onShow() {
|
||
|
|
const systemData = this.$u.sys()
|
||
|
|
this.boxTop = (systemData.statusBarHeight + 44) * 2
|
||
|
|
this.queryParams.xiaoquId = this.dept.xiaoquId
|
||
|
|
this.queryParams.deptId = this.deptId
|
||
|
|
this.queryParams.pageNum = 1
|
||
|
|
this.buildingList = []
|
||
|
|
this.getWarnList()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 触底加装更多
|
||
|
|
scrolltolower() {
|
||
|
|
if (this.buildingList.length >= this.total) {
|
||
|
|
this.status = 'nomore';
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.getWarnList()
|
||
|
|
},
|
||
|
|
//获取预警列表
|
||
|
|
async getWarnList() {
|
||
|
|
this.status = 'loading';
|
||
|
|
const res = await getWarningList(this.queryParams)
|
||
|
|
let list = handleColor(res.rows)
|
||
|
|
this.buildingList = [...this.buildingList, ...list]
|
||
|
|
console.log(this.buildingList, 'sss')
|
||
|
|
this.total = res.total
|
||
|
|
this.queryParams.pageNum = this.queryParams.pageNum + 1
|
||
|
|
this.status = 'loadmore';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.app-container {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.building-list {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 20rpx;
|
||
|
|
display: grid;
|
||
|
|
/* 启用 Grid 布局 */
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
/* 创建三列，列宽相等 */
|
||
|
|
gap: 25rpx;
|
||
|
|
|
||
|
|
.building-item {
|
||
|
|
/* 背景色，方便查看 */
|
||
|
|
padding: 20rpx;
|
||
|
|
/* 内边距 */
|
||
|
|
text-align: center;
|
||
|
|
/* 文本居中 */
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
|
||
|
|
border-radius: 3px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 设置列之间的间隙 */
|
||
|
|
}
|
||
|
|
</style>
|