453 lines
9.4 KiB
Vue
453 lines
9.4 KiB
Vue
<template>
|
||
<view class="listPage" :class="{ popupShow: popupShow }">
|
||
<view class="fixedheader">
|
||
<headers :showBack="true" :themeType="true">
|
||
<view class="headerName"> 应急信息 </view>
|
||
</headers>
|
||
<view class="searchBox">
|
||
<form>
|
||
<view class="uni-form-item">
|
||
<view class="screen" @click="$refs.typeTree._show()">筛选</view>
|
||
<view class="screen" style="margin-top: 3px; margin-left: 5px">
|
||
<image src="/static/screenIcon.png" style="width: 15px; height: 15px"> </image>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
<view class="content" :style="{ paddingTop: mobileTopHeight + 100 + 'px' }">
|
||
<view class="item" v-if="listData.length > 0" v-for="(item, index) in listData" :key="index" @click="goDetails(item)">
|
||
<view class="item_title">
|
||
{{ item.scenariosName }}
|
||
</view>
|
||
<view class="item_content">预案类型：{{ item.typeName }}</view>
|
||
<view class="item_content mt">编制时间: {{ item.createTime }}</view>
|
||
<view class="item_content mt">组织名称: {{ item.groupName }}</view>
|
||
</view>
|
||
<view class="noData" v-if="listData.length == 0">
|
||
<image class="noDataImg" src="../../../static/noData.png"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
<tki-tree
|
||
style="z-index: 9999"
|
||
cancelText="清空"
|
||
ref="typeTree"
|
||
@cancel="resettingBtn()"
|
||
@confirm="val => searchItem(val)"
|
||
idKey="id"
|
||
:range="typeList"
|
||
rangeKey="name"
|
||
confirmColor="#4e8af7"
|
||
:selectParent="true"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
mobileTopHeight: 0,
|
||
popupShow: false,
|
||
listData: [],
|
||
condition: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
search: '', //搜索字段
|
||
typeId: ''
|
||
},
|
||
checkItem: undefined,
|
||
teach: true,
|
||
typeList: [],
|
||
userInfo: ''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||
this.getSelectData()
|
||
},
|
||
mounted() {
|
||
var that = this
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0
|
||
uni.setStorageSync('systemInfo', res)
|
||
console.log(res)
|
||
}
|
||
})
|
||
console.log('this.mobileTopHeight', this.mobileTopHeight)
|
||
},
|
||
onShow() {
|
||
this.listData = []
|
||
this.condition.pageNo = 1
|
||
this.condition.pageSize = 10
|
||
this.getListData()
|
||
},
|
||
//上拉触底时间
|
||
onReachBottom() {
|
||
if (this.teach) {
|
||
this.condition.pageNo = this.condition.pageNo + 1
|
||
// this.condition.pageNo = this.condition.pageNo;
|
||
this.getListData()
|
||
}
|
||
},
|
||
methods: {
|
||
//重置
|
||
resettingBtn() {
|
||
this.listData = []
|
||
this.condition.pageNo = 1
|
||
this.condition.pageSize = 10
|
||
this.getListData()
|
||
},
|
||
//点击筛选项
|
||
searchItem(item, index) {
|
||
let that = this
|
||
that.condition.typeId = (item && item[0].id) || ''
|
||
this.sendRequest({
|
||
url: 'xmgl/urgentEventInfo/page',
|
||
method: 'post',
|
||
data: that.condition,
|
||
success: res => {
|
||
that.listData = []
|
||
that.listNum = res.result.total
|
||
let arr = JSON.parse(JSON.stringify(that.listData))
|
||
if (res.result.records.length > 0) {
|
||
let newArr = arr.concat(res.result.records)
|
||
if (res.result.records.length < 10) {
|
||
that.teach = false
|
||
} else {
|
||
that.teach = true
|
||
}
|
||
that.listData = newArr
|
||
} else {
|
||
that.teach = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//获取筛选数据
|
||
getSelectData() {
|
||
this.sendRequest({
|
||
url: 'xmgl/urgentEventType/tree',
|
||
method: 'post',
|
||
data: {
|
||
pageNo: -1,
|
||
sn: JSON.parse(uni.getStorageSync('userInfo')).headquartersSn
|
||
},
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
this.typeList = res.result.records
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//获取列表数据
|
||
getListData() {
|
||
let that = this
|
||
this.sendRequest({
|
||
url: 'xmgl/urgentEventInfo/page',
|
||
method: 'post',
|
||
data: that.condition,
|
||
success: res => {
|
||
that.listNum = res.result.total
|
||
let arr = JSON.parse(JSON.stringify(that.listData))
|
||
if (res.result.records.length > 0) {
|
||
let newArr = arr.concat(res.result.records)
|
||
if (res.result.records.length < 10) {
|
||
that.teach = false
|
||
} else {
|
||
that.teach = true
|
||
}
|
||
that.listData = newArr
|
||
} else {
|
||
that.teach = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
goDetails(obj) {
|
||
uni.navigateTo({
|
||
url: './details?id=' + obj.id + '&scenariosName=' + obj.scenariosName
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
.headerName {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
.line {
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: #ccc;
|
||
margin-top: 3%;
|
||
}
|
||
|
||
.screenDialog {
|
||
position: absolute;
|
||
// top: 11%;
|
||
height: 95%;
|
||
/* background: pink; */
|
||
background: white;
|
||
width: 100%;
|
||
border-radius: 20px;
|
||
margin-left: -4%;
|
||
background-color: white;
|
||
/* 设置为半透明的灰色 */
|
||
z-index: 9;
|
||
/* 设置一个较大的 z-index 值，保证遮罩层在最上层 */
|
||
|
||
.closeIcon {
|
||
float: right;
|
||
font-size: 25px;
|
||
color: gray;
|
||
margin-right: 3%;
|
||
}
|
||
|
||
.screenTitle {
|
||
text-align: center;
|
||
margin-top: 4%;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.uni-popup__wrapper-box {
|
||
height: 70vh;
|
||
overflow: scroll;
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
|
||
.screenContent {
|
||
width: 100vw;
|
||
height: 70%;
|
||
// width: 90%;
|
||
// margin: -65% 0%;
|
||
overflow: scroll;
|
||
// position: relative;
|
||
// margin-top: 180%;
|
||
border-radius: 20px 20px 0 0;
|
||
// margin-left: -4%;
|
||
background-color: white;
|
||
// padding-left: 10%;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
.titleItem {
|
||
font-size: 14px;
|
||
|
||
.regionText {
|
||
display: inline-block;
|
||
margin-left: 16%;
|
||
width: 190px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screenItem {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.screenI {
|
||
width: 100px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
background: #f7f8fa;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: gray;
|
||
margin: 5% 0;
|
||
}
|
||
|
||
.screenText {
|
||
width: 90px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
background: #f7f8fa;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #000;
|
||
margin: 5% 5% 5% 0%;
|
||
}
|
||
|
||
.active {
|
||
width: 90px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
background: #edf2fe;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #000;
|
||
margin: 5% 5% 5% 0%;
|
||
border: 1px solid #5181f6;
|
||
}
|
||
|
||
.screenTextClose {
|
||
width: 90px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #000;
|
||
margin: 5% 5% 5% 0%;
|
||
}
|
||
}
|
||
|
||
.footerBtn {
|
||
display: flex;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
margin-top: 2%;
|
||
margin-left: 6%;
|
||
margin-right: 6%;
|
||
.btn {
|
||
width: 100%;
|
||
background: #5181f6;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.searchBox {
|
||
background-color: white;
|
||
}
|
||
|
||
.uni-form-item {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 0 32rpx;
|
||
font-size: 14px;
|
||
/* .search-icon{
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 50rpx;
|
||
transform: translateY(-50%);
|
||
} */
|
||
}
|
||
|
||
.uni-input {
|
||
border-radius: 20px;
|
||
margin: 10px 10px;
|
||
background-color: #f7f8fa;
|
||
height: 35px;
|
||
line-height: 30px;
|
||
padding: 0 20px;
|
||
font-size: 14px;
|
||
width: 70%;
|
||
}
|
||
|
||
.screen {
|
||
line-height: 50px;
|
||
color: gray;
|
||
}
|
||
|
||
.picker {
|
||
margin-bottom: 15px;
|
||
margin-left: 100px;
|
||
width: 164px;
|
||
border: 1px solid #ccc;
|
||
height: 30px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.content {
|
||
padding: 0px 30rpx 0;
|
||
box-sizing: border-box;
|
||
width: 100vw;
|
||
}
|
||
|
||
.item {
|
||
// height: 160px;
|
||
width: 100%;
|
||
padding: 12px 30rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Medium;
|
||
}
|
||
.item_title {
|
||
font-weight: 600;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.item_content {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-family: PingFangSC-Regular;
|
||
line-height: 28px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
color: #999;
|
||
// &.mt {
|
||
// margin-top: 16rpx;
|
||
// }
|
||
}
|
||
|
||
.noData {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
margin-top: 120px;
|
||
color: #bed0fb;
|
||
}
|
||
|
||
.noDataImg {
|
||
width: 125px;
|
||
height: 98px;
|
||
}
|
||
|
||
::v-deep .tki-tree-cnt {
|
||
z-index: 99999;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
::v-deep .tki-tree-bar {
|
||
border-top-left-radius: 20px;
|
||
border-top-right-radius: 20px;
|
||
}
|
||
|
||
::v-deep .placeholder {
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.popupShow {
|
||
overflow: hidden;
|
||
position: fixed;
|
||
}
|
||
</style>
|