limingtao
11 months ago
parent
25e1156048
commit
2b54d07cc2
1 changed files with 347 additions and 312 deletions
@ -1,312 +1,347 @@ |
||||
<template> |
||||
<view id="page"> |
||||
<view class="Width100 Box BorderBox"> |
||||
<view class="Content BorderBox Width100"> |
||||
<top-title :is-show-left="false" :title="'排查'" :rightWidth='120' class="custom_bg"> |
||||
<template slot="right"> |
||||
<image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')" mode="aspectFit" class="InlineBlock imgIcon"></image> |
||||
<image :src="$.imgSrc + '/mine/plus.png'" mode="aspectFit" @click="$.open('/pages/create/create')" class="InlineBlock imgIcon"></image> |
||||
</template> |
||||
</top-title> |
||||
</view> |
||||
<view class="tab"> |
||||
<view class="tab-item" :class="tab === 1 ? 'active' : ''" @click='handleTabClick(1)'> |
||||
<text>待办</text> |
||||
<text v-if="showNumber" class="number">{{ totalData.Unconfirmed }}</text> |
||||
</view> |
||||
<view class="tab-item" :class="tab === 2 ? 'active' : ''" @click='handleTabClick(2)'> |
||||
<text>正在办理</text> |
||||
<text class="number">{{ totalData.InGovernance }}</text> |
||||
</view> |
||||
<view class="tab-item" :class="tab === 3 ? 'active' : ''" @click='handleTabClick(3)'> |
||||
<text>已完成</text> |
||||
<text class="number">{{ totalData.Finished }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="Content MarginAuto BorderBox"> |
||||
<no-data v-if="isEmpty" /> |
||||
<view v-else class="List Width100 BorderBox"> |
||||
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" |
||||
v-for="item in list" :key='item.id' @click='handleClick(item)'> |
||||
<image class="imgleft" :src="item.imgurl || '/static/logo.png'" mode="widthFix"></image> |
||||
<view class="right"> |
||||
<view class="title">{{ item.name }}</view> |
||||
<view class="type"> |
||||
<text>排查</text> |
||||
<text>{{ item.deadlineStatus || '--' }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="trapezoidal" v-if="item.deadlineType == 1"> |
||||
超期 |
||||
</view> |
||||
<view class="trapezoidal lin" v-if="item.deadlineType == 2"> |
||||
临期 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import NoData from "../../components/no-data.vue"; |
||||
import TopTitle from "../../components/top-title"; |
||||
import $ from "../../common/globalJs/globalJs"; |
||||
export default { |
||||
// 组件 |
||||
components: { |
||||
NoData,TopTitle |
||||
}, |
||||
data() { |
||||
return { |
||||
showNumber: true, |
||||
// 公用的js |
||||
bgUrl1: '', // 登录信息背景图 |
||||
list: [], |
||||
isEmpty: false, |
||||
isMore: true, |
||||
page: 1, |
||||
tab: 1, |
||||
totalData: { |
||||
UnderInvestigation: 0, |
||||
InGovernance: 0, |
||||
Finished: 0, |
||||
Unconfirmed: 0, |
||||
}, |
||||
status: '0' |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
|
||||
}, |
||||
onShow: function() { |
||||
this.getData() |
||||
this.getList() |
||||
}, |
||||
// 计算属性 |
||||
computed: { |
||||
$() { |
||||
return $ |
||||
} |
||||
}, |
||||
// 方法 |
||||
methods: { |
||||
handleTabClick(tab) { |
||||
this.tab = tab; |
||||
this.page = 1; |
||||
this.list = []; |
||||
switch (tab) { |
||||
case 1: |
||||
this.status = '0'; |
||||
break; |
||||
case 2: |
||||
this.status = '20'; |
||||
break; |
||||
case 3: |
||||
this.status = '40'; |
||||
break; |
||||
} |
||||
this.getList() |
||||
}, |
||||
getData() { |
||||
this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', { nuserid: this.$.getData('token') }, 'GET').then(res => { |
||||
if (res.code === 200) { |
||||
console.log(res.result) |
||||
res.result.forEach(item => { |
||||
this.totalData[item.status] = item.count |
||||
}) |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
}) |
||||
}, |
||||
getList(v) { |
||||
let datas = { |
||||
nuserid: this.$.getData('token'), |
||||
status: this.status, |
||||
} |
||||
this.$request.globalRequest(`/hiddenDanger/highDanger/getHigDangerDealt?pageNum=${this.page}&pageSize=${10}`, datas, 'POST').then(res => { |
||||
if (res.code === 200) { |
||||
if(v){ |
||||
this.list = [] |
||||
} |
||||
if (res.result.total === 0) { |
||||
this.isEmpty = true; |
||||
} else { |
||||
this.isEmpty = false; |
||||
this.list.push(...res.result.list) |
||||
} |
||||
if (this.list.length >= res.result.total) { |
||||
this.isMore = false |
||||
} else { |
||||
this.isMore = true |
||||
} |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
}) |
||||
}, |
||||
handleClick(row) { |
||||
console.log(row) |
||||
this.$.open('/pages/map/index?businessId=' + row.businessId) |
||||
}, |
||||
// 跳转页面 |
||||
skipPage(even) { |
||||
// this.$.open(even) |
||||
}, |
||||
}, |
||||
onReady() {}, |
||||
// 页面卸载 |
||||
onUnload() { |
||||
|
||||
}, |
||||
// 触发下拉刷新 |
||||
onPullDownRefresh() { |
||||
// 延迟关闭刷新动画 |
||||
setTimeout(() => { |
||||
uni.stopPullDownRefresh(); |
||||
this.page = 1 |
||||
this.getList('onPullDownRefresh') |
||||
}, 1500); |
||||
}, |
||||
// 页面上拉触底事件的处理函数 |
||||
onReachBottom() { |
||||
if (this.isMore) { |
||||
this.page++ |
||||
this.getList() |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
page { |
||||
background: #F6F8FA; |
||||
} |
||||
.imgIcon { |
||||
width: 40rpx; |
||||
height: 100%; |
||||
} |
||||
.imgIcon:nth-of-type(2) { |
||||
margin-left: 40rpx; |
||||
} |
||||
.img { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-left: 30rpx; |
||||
} |
||||
.trapezoidal { |
||||
position: relative; |
||||
display: inline-block; |
||||
min-width: 2em; |
||||
text-align: center; |
||||
padding: 3rpx 20rpx 3rpx 18rpx; |
||||
} |
||||
|
||||
.trapezoidal::before, |
||||
.trapezoidal::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0%; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 0rpx 0 0 0; |
||||
background: #FF1111; |
||||
z-index: -1; |
||||
transform-origin: bottom; |
||||
transform: skew(18deg); |
||||
border: 0rpx solid #333; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.trapezoidal::after { |
||||
left: auto; |
||||
right: 0; |
||||
transform: skew(-0deg); |
||||
border-radius: 0 0rpx 0 0; |
||||
background-color: #FF1111; |
||||
border-left: 0 none; |
||||
} |
||||
.lin::before,.lin::after { |
||||
background-color: #E68A0B; |
||||
} |
||||
|
||||
.tab { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
font-size: 16px; |
||||
height: 44px; |
||||
background: #ffffff; |
||||
box-shadow: 3px 0px 10px #ccc; |
||||
color: #666666; |
||||
position: relative; |
||||
.tab-item { |
||||
position: relative; |
||||
height: 41px; |
||||
line-height: 41px; |
||||
padding: 0 30rpx 0 30rpx; |
||||
border-bottom: 3px solid #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
&.active { |
||||
color: rgb(60, 109, 195); |
||||
border-color: rgb(60, 109, 195); |
||||
} |
||||
.number { |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
margin-left: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.Box { |
||||
padding-top:var(--status-bar-height); |
||||
.Content { |
||||
width: calc(100% - 48rpx); |
||||
padding-bottom: 88rpx; |
||||
} |
||||
|
||||
.Unit { |
||||
padding: 12rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
box-shadow: 1px 1px 3px #ccc; |
||||
.trapezoidal { |
||||
position: absolute; |
||||
top: -0px; |
||||
right: 4px; |
||||
color: #ffffff; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
z-index: 1; |
||||
} |
||||
image { |
||||
width: 200rpx; |
||||
} |
||||
.right { |
||||
flex: 1; |
||||
padding-left: 30rpx; |
||||
.title { |
||||
font-size: 16px; |
||||
} |
||||
.type { |
||||
font-size: 14px; |
||||
color: #666; |
||||
font-weight: normal; |
||||
text { |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<template> |
||||
<view id="page"> |
||||
<view class="Width100 Box BorderBox"> |
||||
<view class="Content BorderBox Width100"> |
||||
<top-title :is-show-left="false" :title="'排查'" :rightWidth='120' class="custom_bg"> |
||||
<template slot="right"> |
||||
<image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')" |
||||
mode="aspectFit" class="InlineBlock imgIcon"></image> |
||||
<image :src="$.imgSrc + '/mine/plus.png'" mode="aspectFit" |
||||
@click="$.open('/pages/create/create')" class="InlineBlock imgIcon"></image> |
||||
</template> |
||||
</top-title> |
||||
</view> |
||||
<view class="tab"> |
||||
<view class="tab-item" :class="tab === 1 ? 'active' : ''" @click='handleTabClick(1)'> |
||||
<text>待办</text> |
||||
<text v-if="showNumber" class="number">{{ totalData.Unconfirmed }}</text> |
||||
</view> |
||||
<view class="tab-item" :class="tab === 2 ? 'active' : ''" @click='handleTabClick(2)'> |
||||
<text>正在办理</text> |
||||
<text class="number">{{ totalData.InGovernance }}</text> |
||||
</view> |
||||
<view class="tab-item" :class="tab === 3 ? 'active' : ''" @click='handleTabClick(3)'> |
||||
<text>已完成</text> |
||||
<text class="number">{{ totalData.Finished }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="Content MarginAuto BorderBox"> |
||||
<no-data v-if="isEmpty" /> |
||||
<view v-else class="List Width100 BorderBox"> |
||||
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" v-for="(item,index) in list" |
||||
:key='item.businessId+index' @click='handleClick(item)'> |
||||
<image class="imgleft" :src="item.imgurl || '/static/logo.png'" mode="widthFix"></image> |
||||
<view class="right"> |
||||
<view class="title">{{ item.name }}</view> |
||||
<view class="type"> |
||||
<text>排查</text> |
||||
<text>{{ item.deadlineStatus || '--' }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="trapezoidal" v-if="item.deadlineType == 1"> |
||||
超期 |
||||
</view> |
||||
<view class="trapezoidal lin" v-if="item.deadlineType == 2"> |
||||
临期 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-loadmore :status="loadmorestatus" v-show="!isEmpty" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import NoData from "../../components/no-data.vue"; |
||||
import TopTitle from "../../components/top-title"; |
||||
import $ from "../../common/globalJs/globalJs"; |
||||
export default { |
||||
// 组件 |
||||
components: { |
||||
NoData, |
||||
TopTitle |
||||
}, |
||||
data() { |
||||
return { |
||||
loadmorestatus: 'loading', |
||||
showNumber: true, |
||||
// 公用的js |
||||
bgUrl1: '', // 登录信息背景图 |
||||
list: [], |
||||
isEmpty: false, |
||||
isMore: true, |
||||
page: 1, |
||||
tab: 1, |
||||
totalData: { |
||||
UnderInvestigation: 0, |
||||
InGovernance: 0, |
||||
Finished: 0, |
||||
Unconfirmed: 0, |
||||
}, |
||||
status: '0', |
||||
|
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
|
||||
}, |
||||
|
||||
onShow: function() { |
||||
this.getData() |
||||
this.getList() |
||||
}, |
||||
// 计算属性 |
||||
computed: { |
||||
$() { |
||||
return $ |
||||
} |
||||
}, |
||||
// 方法 |
||||
methods: { |
||||
handleTabClick(tab) { |
||||
this.tab = tab; |
||||
this.page = 1; |
||||
this.list = []; |
||||
this.isMore = true |
||||
switch (tab) { |
||||
case 1: |
||||
this.status = '0'; |
||||
break; |
||||
case 2: |
||||
this.status = '20'; |
||||
break; |
||||
case 3: |
||||
this.status = '40'; |
||||
break; |
||||
} |
||||
this.getList() |
||||
}, |
||||
getData() { |
||||
this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', { |
||||
nuserid: this.$.getData('token') |
||||
}, 'GET').then(res => { |
||||
if (res.code === 200) { |
||||
// console.log(res.result) |
||||
res.result.forEach(item => { |
||||
this.totalData[item.status] = item.count |
||||
}) |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
}) |
||||
}, |
||||
getList() { |
||||
let datas = { |
||||
nuserid: this.$.getData('token'), |
||||
status: this.status, |
||||
} |
||||
this.loadmorestatus = 'loading' |
||||
this.$request.globalRequest( |
||||
`/hiddenDanger/highDanger/getHigDangerDealt?pageNum=${this.page}&pageSize=${10}`, datas, 'POST') |
||||
.then(res => { |
||||
this.loadmorestatus = 'loadmore' |
||||
uni.stopPullDownRefresh(); |
||||
if (res.code === 200) { |
||||
if (res.result.total === 0) { |
||||
this.isEmpty = true; |
||||
} else { |
||||
this.isEmpty = false; |
||||
this.list.push(...res.result.list) |
||||
} |
||||
if (this.list.length >= res.result.total) { |
||||
this.loadmorestatus = 'nomore' |
||||
this.isMore = false |
||||
} |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
}).catch((err) => { |
||||
this.loadmorestatus = 'nomore' |
||||
uni.stopPullDownRefresh(); |
||||
}) |
||||
}, |
||||
handleClick(row) { |
||||
console.log(row) |
||||
this.$.open('/pages/map/index?businessId=' + row.businessId) |
||||
}, |
||||
// 跳转页面 |
||||
skipPage(even) { |
||||
// this.$.open(even) |
||||
}, |
||||
}, |
||||
onReady() {}, |
||||
// 页面卸载 |
||||
onUnload() { |
||||
|
||||
}, |
||||
// 触发下拉刷新 |
||||
onPullDownRefresh() { |
||||
this.page = 1; |
||||
this.list = []; |
||||
this.isMore = true |
||||
this.getList() |
||||
// 延迟关闭刷新动画 |
||||
// setTimeout(() => { |
||||
// uni.stopPullDownRefresh(); |
||||
// }, 1500); |
||||
}, |
||||
// 页面上拉触底事件的处理函数 |
||||
onReachBottom() { |
||||
if (this.isMore) { |
||||
this.page++ |
||||
this.getList() |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
page { |
||||
background: #F6F8FA; |
||||
} |
||||
|
||||
.imgIcon { |
||||
width: 40rpx; |
||||
height: 100%; |
||||
} |
||||
|
||||
.imgIcon:nth-of-type(2) { |
||||
margin-left: 40rpx; |
||||
} |
||||
|
||||
.img { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-left: 30rpx; |
||||
} |
||||
|
||||
.trapezoidal { |
||||
position: relative; |
||||
display: inline-block; |
||||
min-width: 2em; |
||||
text-align: center; |
||||
padding: 3rpx 20rpx 3rpx 18rpx; |
||||
} |
||||
|
||||
.trapezoidal::before, |
||||
.trapezoidal::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0%; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 0rpx 0 0 0; |
||||
background: #FF1111; |
||||
z-index: -1; |
||||
transform-origin: bottom; |
||||
transform: skew(18deg); |
||||
border: 0rpx solid #333; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.trapezoidal::after { |
||||
left: auto; |
||||
right: 0; |
||||
transform: skew(-0deg); |
||||
border-radius: 0 0rpx 0 0; |
||||
background-color: #FF1111; |
||||
border-left: 0 none; |
||||
} |
||||
|
||||
.lin::before, |
||||
.lin::after { |
||||
background-color: #E68A0B; |
||||
} |
||||
|
||||
.tab { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
font-size: 16px; |
||||
height: 44px; |
||||
background: #ffffff; |
||||
box-shadow: 3px 0px 10px #ccc; |
||||
color: #666666; |
||||
position: sticky; |
||||
// top: var(--status-bar-height + 88rpx); |
||||
top: calc(var(--status-bar-height ) + 88rpx); |
||||
z-index: 10; |
||||
|
||||
.tab-item { |
||||
position: relative; |
||||
height: 41px; |
||||
line-height: 41px; |
||||
padding: 0 30rpx 0 30rpx; |
||||
border-bottom: 3px solid #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
&.active { |
||||
color: rgb(60, 109, 195); |
||||
border-color: rgb(60, 109, 195); |
||||
} |
||||
|
||||
.number { |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
margin-left: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.Box { |
||||
padding-top: var(--status-bar-height); |
||||
|
||||
.Content { |
||||
width: calc(100% - 48rpx); |
||||
padding-bottom: 88rpx; |
||||
} |
||||
|
||||
.Unit { |
||||
padding: 12rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
box-shadow: 1px 1px 3px #ccc; |
||||
|
||||
.trapezoidal { |
||||
position: absolute; |
||||
top: -0px; |
||||
right: 4px; |
||||
color: #ffffff; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
z-index: 1; |
||||
} |
||||
|
||||
image { |
||||
width: 200rpx; |
||||
} |
||||
|
||||
.right { |
||||
flex: 1; |
||||
padding-left: 30rpx; |
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.type { |
||||
font-size: 14px; |
||||
color: #666; |
||||
font-weight: normal; |
||||
|
||||
text { |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue