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.
629 lines
16 KiB
629 lines
16 KiB
<template> |
|
<view id="page"> |
|
<view class="Width100 Box BorderBox"> |
|
<view class="Content BorderBox Width100"> |
|
<top-title :is-show-left="false" :title="'排查'" :rightWidth='60' 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="handleCreate" |
|
class="InlineBlock imgIcon"></image> |
|
</template> |
|
</top-title> |
|
</view> |
|
<view class="query-form"> |
|
<view class="search-box"> |
|
<u-search placeholder="请输入名称" v-model="searchValue" actionText="" :showAction="false" |
|
@search="handleSearch" @clear="handleSearch"></u-search> |
|
</view> |
|
<view class="tab"> |
|
<view v-for="tabItem in tabList" :key="tabItem.active" :class="{ |
|
'tab-item': true, |
|
'active': tabItem.active == approve |
|
}" @click="handleTabChange(tabItem.active)"> |
|
<text>{{tabItem.name}}</text> |
|
<text class="number">{{tabItem.number}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="Content MarginAuto BorderBox"> |
|
<!-- <dateSearch :tabList="tabTypeList" :tabActive="classification" :startDate.sync="startDate" |
|
:endDate.sync="endDate" @handleSearch="handleSearch" @tabChange="queryTypeChange" v-if='approve == 2'/> --> |
|
<dateSearch v-if="approve == 1" :tabList="sortTypeList" :tabActive="classification" |
|
:startDate.sync="startDate1" :endDate.sync="endDate1" @handleSearch="handleSearch" |
|
@tabChange="queryTypeChange" /> |
|
<dateSearch v-else :tabList="tabTypeList" :tabActive="classification" :startDate.sync="startDate" |
|
:endDate.sync="endDate" @handleSearch="handleSearch" @tabChange="queryTypeChange" /> |
|
<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 v-if="tab === 1">排查</text> |
|
<text v-if="tab === 3">治理</text> --> |
|
<text>{{ item.enumname || '--' }}</text> |
|
<text v-show="approve!=2&&classification!='3'">{{ item.deadlineStatus || '--' }}</text> |
|
<text |
|
v-show="approve!=2&&classification=='3'">距离{{ item.distance || item.distance == 0?item.distance: '--' }}米</text> |
|
</view> |
|
</view> |
|
<view class="trapezoidal" v-if="item.deadlineType == 1&&approve!=2"> |
|
超期 |
|
</view> |
|
<view class="trapezoidal lin" v-if="item.deadlineType == 2&&approve!=2"> |
|
临期 |
|
</view> |
|
</view> |
|
</view> |
|
<u-loadmore :status="loadmorestatus" v-show="!isEmpty" /> |
|
</view> |
|
</view> |
|
<Tabbar name="排查" v-if="tabbarShow"></Tabbar> |
|
<u-modal v-if="toDoObject" :show="true" :content="`您${toDoObject.name}任务尚未完成，是否切换到该任务？`" confirm-text="否" |
|
cancel-text="是" :showConfirmButton="true" :showCancelButton="true" @confirm="handleConfirm" |
|
@cancel="handleCancel" :closeOnClickOverlay="false"></u-modal> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import Tabbar from "../../components/tabbar.vue"; |
|
import NoData from "../../components/no-data.vue"; |
|
import TopTitle from "../../components/top-title"; |
|
import $ from "../../common/globalJs/globalJs"; |
|
import tabFun from '@/libs/function/tabbar.js' |
|
import dateSearch from "../approve/date-search.vue"; |
|
export default { |
|
// 组件 |
|
components: { |
|
NoData, |
|
TopTitle, |
|
Tabbar, |
|
dateSearch, |
|
}, |
|
data() { |
|
return { |
|
list: [], |
|
isEmpty: false, |
|
isMore: true, |
|
pageNum: 1, |
|
pageSize: 10, |
|
searchValue: '', |
|
classification: '1', |
|
sortTypeKey: '1', |
|
approve: '1', |
|
status: '10', |
|
tabbarShow: true, |
|
startDate: '', |
|
endDate: '', |
|
startDate1: '', |
|
endDate1: '', |
|
tabList: [{ |
|
name: '待办', |
|
active: '1', |
|
number: 0 |
|
}, |
|
{ |
|
name: '已完成', |
|
active: '2', |
|
number: 0 |
|
}, |
|
], |
|
tabTypeList: [{ |
|
name: '全部', |
|
active: '1' |
|
}, |
|
{ |
|
name: '人工上报', |
|
active: '2' |
|
}, |
|
{ |
|
name: '系统下发', |
|
active: '3' |
|
}, |
|
], |
|
sortTypeList: [{ |
|
name: '时间最早', |
|
active: '1' |
|
}, |
|
{ |
|
name: '时间最新', |
|
active: '2' |
|
}, |
|
{ |
|
name: '距离最近', |
|
active: '3' |
|
}, |
|
], |
|
loadmorestatus: 'loading', |
|
toDoObject: null |
|
} |
|
}, |
|
// 页面加载 |
|
onLoad(e) { |
|
// this.getList() |
|
}, |
|
|
|
onShow() { |
|
this.startDate1 = this.$moment('2021-01-01').format('YYYY-MM-DD') |
|
this.endDate1 = this.$moment().format('YYYY-MM-DD') |
|
this.startDate = this.$moment().startOf('month').format('YYYY-MM-DD') |
|
this.endDate = this.$moment().format('YYYY-MM-DD') |
|
const approve = uni.getStorageSync('MyPCtabIndex') |
|
if (approve) { |
|
this.approve = Number(approve) |
|
uni.setStorageSync('MyPCtabIndex', '') |
|
} |
|
uni.hideTabBar() //隐藏官方的tabBar |
|
this.pageNum = 1 |
|
this.list = []; |
|
this.getList() |
|
}, |
|
// 计算属性 |
|
computed: { |
|
|
|
}, |
|
// 方法 |
|
methods: { |
|
handleSearch() { |
|
this.pageNum = 1 |
|
this.list = [] |
|
this.getList() |
|
}, |
|
queryTypeChange(tabKey) { |
|
if (this.classification != tabKey) { |
|
this.classification = tabKey |
|
this.pageNum = 1 |
|
this.list = [] |
|
this.getList('queryType') |
|
} |
|
}, |
|
handleTabChange(tabKey) { |
|
this.classification = '1' |
|
if (this.approve != tabKey) { |
|
this.approve = tabKey |
|
this.pageNum = 1 |
|
this.list = [] |
|
this.getList() |
|
} |
|
}, |
|
getLocationInfo() { |
|
// #ifdef H5 |
|
return new Promise((resolve, reject) => { |
|
resolve({ |
|
longitude: 120.485218, |
|
latitude: 36.147391, |
|
}) |
|
}) |
|
// #endif |
|
return new Promise((resolve, reject) => { |
|
uni.getLocation({ |
|
type: 'gcj02', |
|
geocode: true, |
|
success: (res) => { |
|
resolve(res) |
|
}, |
|
fail: (res) => { |
|
reject(res) |
|
} |
|
}); |
|
}) |
|
}, |
|
getQueryStr(query) { |
|
let myQuery = { |
|
...query |
|
} |
|
|
|
return Object.entries(myQuery).reduce((str, keyValue, index, self) => { |
|
const [key, value] = keyValue |
|
str += `${key}=${value}${index !== self.length - 1 ? '&' : ''}` |
|
return str |
|
}, '') |
|
}, |
|
getList(type) { |
|
const { |
|
startDate, |
|
endDate, |
|
startDate1, |
|
endDate1, |
|
approve |
|
} = this |
|
const data = { |
|
nuserid: this.$.getData('token'), |
|
status: this.status |
|
} |
|
const queryStr = this.getQueryStr({ |
|
pageNum: this.pageNum, |
|
pageSize: this.pageSize, |
|
search: this.searchValue, |
|
classification: this.classification, |
|
approve: this.approve, |
|
}) |
|
//排查距离最近加经纬度信息 |
|
if (this.approve == 1 && this.classification == '3') { |
|
this.getLocationInfo().then(res => { |
|
const { |
|
longitude, |
|
latitude |
|
} = res |
|
this.loadmorestatus = 'loading' |
|
this.isMore = true |
|
this.$request.globalRequest( |
|
`/hiddenDanger/highDanger/getHigDangerDealt?${this.getQueryStr({ |
|
pageNum: this.pageNum, |
|
pageSize: this.pageSize, |
|
search: this.searchValue, |
|
classification: this.classification, |
|
approve: this.approve, |
|
longitude, |
|
latitude, |
|
startTime:approve == '1'? startDate1:startDate, |
|
endTime:approve == '1'? endDate1:endDate |
|
})}`, |
|
data, |
|
'post').then(( |
|
res) => { |
|
this.loadmorestatus = 'loadmore' |
|
uni.stopPullDownRefresh(); |
|
this.$set(this.tabList[this.approve - 1], 'number', res.result.total) |
|
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(); |
|
}) |
|
}) |
|
} else { |
|
this.loadmorestatus = 'loading' |
|
this.isMore = true |
|
this.$request.globalRequest(`/hiddenDanger/highDanger/getHigDangerDealt?${this.getQueryStr({ |
|
pageNum: this.pageNum, |
|
pageSize: this.pageSize, |
|
search: this.searchValue, |
|
classification: this.classification, |
|
approve: approve, |
|
startTime:approve == '1'? startDate1:startDate, |
|
endTime:approve == '1'? endDate1:endDate |
|
})}`, data, |
|
'post') |
|
.then(( |
|
res) => { |
|
this.loadmorestatus = 'loadmore' |
|
uni.stopPullDownRefresh(); |
|
this.$set(this.tabList[this.approve - 1], 'number', res.result.total) |
|
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(); |
|
}) |
|
} |
|
if (type != 'queryType' && this.pageNum == 1) { |
|
this.$request.globalRequest(`/hiddenDanger/highDanger/getHigDangerDealt?${this.getQueryStr({ |
|
pageNum: this.pageNum, |
|
pageSize: 1, |
|
search: this.searchValue, |
|
classification: this.classification, |
|
approve: this.approve == 1 ? 2 : 1, |
|
startTime:approve == '1'? startDate:startDate1, |
|
endTime:approve == '1'? endDate:endDate1 |
|
})}`, data, 'post').then(res => { |
|
this.$set(this.tabList[this.approve == 1 ? 1 : 0], 'number', res.result.total) |
|
}) |
|
} |
|
}, |
|
handleClick(row) { |
|
if (this.approve == 1) { |
|
if (row.pcType == 2) { |
|
this.$.open("/pages/investigation/task" + "?id=" + row.businessId + '§ionId=' + row |
|
.sectionCode + |
|
'&operator=' + row.operator + '&deptId=' + row.handleDept + '&taskName=' + row |
|
.name + |
|
'&pcType' + row.pcType + '§ionName=' + row.sectionName + '§ionCode=' + row |
|
.sectionCode + '§ionType=' + (row.ifCross || '2')); |
|
} else { |
|
this.$.open('/pages/map/index?businessId=' + row.businessId + |
|
'&operator=' + row.operator + |
|
'&deptId=' + row.handleDept + |
|
'&pcType=' + row.pcType + |
|
'&type=' + (this.approve == 1 ? 'edit' : 'view') + '§ionName=' + row |
|
.sectionName + |
|
'§ionCode=' + row.sectionCode + '&taskName=' + row.name + '&enumname=' + row |
|
.enumname + |
|
'&deadlineStatus=' + row.deadlineStatus + '§ionType=' + (row.ifCross || '2') + |
|
'&deadlineType=' + row.deadlineType + '§ionId=' + (row.ifCross == 1 ? |
|
row.crossCode : row.sectionCode)) |
|
// this.$.open('/pages/map/index?businessId=' + row.businessId) |
|
} |
|
|
|
} else { |
|
// this.$.open('/pages/investigation/complete?id=' + row.businessId + '&type=' + (this.tab == 1 ? 'edit' : |
|
// 'view')) |
|
this.$.open("/pages/investigation/complete" + "?id=" + row.businessId + '§ionId=' + row |
|
.sectionCode + |
|
'&operator=' + row.operator + '&deptId=' + row.handleDept + '&taskName=' + row.name + |
|
'&pcType' + row.pcType + '§ionName=' + row.sectionName + '§ionCode=' + row |
|
.sectionCode + '§ionType=' + (row.ifCross || '2')); |
|
} |
|
|
|
}, |
|
// 跳转页面 |
|
skipPage(even) { |
|
// this.$.open(even) |
|
}, |
|
|
|
|
|
handleCreate() { |
|
const queryStr = this.getQueryStr({ |
|
pageNum: this.pageNum, |
|
pageSize: this.pageSize, |
|
search: this.searchValue, |
|
classification: this.classification, |
|
approve: this.approve, |
|
}) |
|
const data = { |
|
nuserid: this.$.getData('token'), |
|
status: this.status |
|
} |
|
this.$request.globalRequest(`/hiddenDanger/highDanger/getHigDangerDealt?${queryStr}`, data, |
|
'post').then(res => { |
|
console.log('resresresresresres', res) |
|
if (res.result.list.length) { |
|
this.toDoObject = res.result.list[0] |
|
} else { |
|
this.$.open('/pages/create/create') |
|
} |
|
}) |
|
}, |
|
handleConfirm() { |
|
this.toDoObject = null |
|
this.$.open('/pages/create/create') |
|
}, |
|
handleCancel() { |
|
this.handleClick(this.toDoObject) |
|
this.toDoObject = null |
|
}, |
|
}, |
|
onReady() {}, |
|
// 页面卸载 |
|
onUnload() { |
|
|
|
}, |
|
// 触发下拉刷新 |
|
onPullDownRefresh() { |
|
this.pageNum = 1 |
|
this.list = []; |
|
this.getList() |
|
// 延迟关闭刷新动画 |
|
// setTimeout(() => { |
|
// uni.stopPullDownRefresh(); |
|
// }, 1500); |
|
}, |
|
// 页面上拉触底事件的处理函数 |
|
onReachBottom() { |
|
if (this.isMore) { |
|
this.pageNum++ |
|
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; |
|
} |
|
|
|
.query-form { |
|
width: 100%; |
|
font-size: 16px; |
|
height: 91px; |
|
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 { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-around; |
|
|
|
.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; |
|
} |
|
} |
|
} |
|
|
|
.search-box { |
|
padding: 10px 10px 3px; |
|
} |
|
} |
|
|
|
.query-form2 { |
|
height: 190px; |
|
|
|
.type-box { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
width: calc(100% - 100rpx); |
|
padding: 0 50rpx; |
|
height: 108rpx; |
|
|
|
.type-item { |
|
width: 28%; |
|
border-radius: 200rpx; |
|
height: 50rpx; |
|
text-align: center; |
|
line-height: 50rpx; |
|
font-size: 26rpx; |
|
border: #999999 solid 1rpx; |
|
margin-top: 15rpx; |
|
} |
|
|
|
.type-active { |
|
border: #3c6dc3 solid 1rpx; |
|
color: #3c6dc3; |
|
} |
|
} |
|
} |
|
|
|
.Box { |
|
padding-top: var(--status-bar-height); |
|
|
|
.Content { |
|
width: calc(100% - 48rpx); |
|
padding-bottom: 88rpx; |
|
} |
|
|
|
.Unit { |
|
padding: 20rpx 12rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
position: relative; |
|
box-shadow: 1px 1px 3px #ccc; |
|
|
|
.trapezoidal { |
|
position: absolute; |
|
top: -0px; |
|
right: 0px; |
|
color: #ffffff; |
|
font-size: 22rpx; |
|
font-weight: normal; |
|
z-index: 1; |
|
} |
|
|
|
image { |
|
width: 200rpx; |
|
} |
|
|
|
.right { |
|
flex: 1; |
|
padding-left: 30rpx; |
|
|
|
.title { |
|
font-size: 16px; |
|
width: 100%; |
|
min-height: 60rpx; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
|
|
.type { |
|
font-size: 14px; |
|
color: #666; |
|
font-weight: normal; |
|
|
|
text { |
|
margin-right: 20rpx; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |