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.
665 lines
16 KiB
665 lines
16 KiB
<template> |
|
<view id="page"> |
|
<view class="Width100 Box BorderBox"> |
|
<view class="Content BorderBox Width100"> |
|
<top-title @skipPage="dealFlag?dealFlag = false: $.back(1)" :isCuMethod="true" :is-show-left="true" |
|
:title="dealFlag?'处理': '预警处理'" :rightWidth='120' class="custom_bg"> |
|
</top-title> |
|
</view> |
|
<view class="formBox" v-if="!dealFlag"> |
|
<uni-forms :modelValue="formData" border> |
|
<uni-forms-item label="抓拍时间"> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
|
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.warningTimeFormat" |
|
:disabled="!editFlag" /> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="问题描述"> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
|
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" |
|
v-model="formData.problemDescription" :disabled="!editFlag" /> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="违法行为"> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
|
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.illegalActivities" |
|
:disabled="!editFlag" /> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="违法车辆"> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
|
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.vehicleLicense" |
|
:disabled="!editFlag" /> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="车主"> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
|
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.driverName" |
|
:disabled="!editFlag" /> |
|
</view> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<image class="itemImg" :src="formData.illegalImg ||require('./defaultImg.png')" mode="widthFix"> |
|
</view> |
|
<view class="formBox" v-else> |
|
<uni-forms :modelValue="formData" border> |
|
<uni-forms-item label="处理类型" required> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
|
@click="handleTypeFlag = true "> |
|
<view v-if="dealData.handleType"> |
|
{{dealData.handleType}} |
|
</view> |
|
<view v-else class="gray"> |
|
请选择处理类型 |
|
</view> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="处理结果" required> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
|
<input type="text" placeholder="请填写处理结果" v-model="dealData.handleResult" /> |
|
</view> |
|
</uni-forms-item> |
|
|
|
<uni-forms-item label="照片" required> |
|
<locationUpload :fileList="handleImg" @afterRead="(e) => afterRead(e, 'handleImg')" |
|
@delete="(e) => deletePic(e, 'handleImg')" name="1" :maxCount="1"></locationUpload> |
|
</uni-forms-item> |
|
<uni-forms-item label="处理人" required> |
|
<view class="Height100"> |
|
{{ dealData.handlePersonnel }} |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="处理时间" required> |
|
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
|
<view class="Height100"> |
|
{{ dealData.handleTime }} |
|
</view> |
|
</view> |
|
</uni-forms-item> |
|
</uni-forms> |
|
</view> |
|
<!-- 分配社区列表 --> |
|
<u-picker :show="assignFlag" :columns="[squadronVillageList]" @cancel="assignFlag = false" keyName='sqname' |
|
@confirm="assignTo"></u-picker> |
|
<!-- 预警处理类型 --> |
|
<u-picker :show="handleTypeFlag" :columns="[handleTypeEnum]" @cancel="handleTypeFlag = false" |
|
keyName='sqname' @confirm="handleTypeSelect"></u-picker> |
|
<three class="footer-buttons" :type="'view'" first-text="处理" next-text="分配" :second-primary="true" |
|
@first="dealFlag = true" @last="assignFlag = true" v-if="propState!= '2'&& userFlag&&!dealFlag" /> |
|
<view class="bottom" v-if="propState!= '2'&& !userFlag&&dealFlag"> |
|
<view class="trapezoidal" @click="dealFlag = true" style="background: #2663BF;color: #fff;"> |
|
<text>处理</text> |
|
</view> |
|
</view> |
|
<view class="bottom" v-if="propState!= '2'&&dealFlag"> |
|
<view class="trapezoidal" @click="handleDeal" style="background: #2663BF;color: #fff;"> |
|
<text>处理</text> |
|
</view> |
|
</view> |
|
|
|
<view style="width: 100%;height: 100rpx;"></view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import NoData from "../../components/no-data.vue"; |
|
import Tabbar from "../../components/tabbar.vue"; |
|
import TopTitle from "../../components/top-title"; |
|
import $ from "../../common/globalJs/globalJs"; |
|
import taskInfo from "../../components/task-info.vue"; |
|
import uploadFile from "../../components/upload-file.vue"; |
|
import Three from "../../components/bottom-button/three.vue"; |
|
import BottomButton from "../../components/bottom-button/three.vue"; |
|
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'; |
|
import locationUpload from '@/components/u-upload/index.js' |
|
export default { |
|
// 组件 |
|
components: { |
|
TopTitle, |
|
NoData, |
|
taskInfo, |
|
uploadFile, |
|
Three, |
|
BottomButton, |
|
locationUpload |
|
}, |
|
data() { |
|
return { |
|
editFlag: false, |
|
$: this.$, |
|
formData: { |
|
communityCadre: "", |
|
communityCadrePhone: '', |
|
driverAddress: "", |
|
driverAuthorizedModel: "", |
|
driverIdNumber: "", |
|
driverName: "", |
|
driverPhone: "", |
|
drivingImg: "", |
|
insertPersonnel: "", |
|
insertTime: "", |
|
streetCommunity: "", |
|
vehicleBrand: "", |
|
vehicleColor: "", |
|
vehicleInsurance: "", |
|
vehicleLicense: "", |
|
vehicleStatus: "", |
|
vehicleType: "", |
|
villageCommunity: "", |
|
vin: "" |
|
}, |
|
enumList: {}, |
|
streetCommunityByXq: [], |
|
streetCommunityByJd: [], |
|
|
|
squadronVillageList: [], |
|
assignFlag: false, |
|
dealFlag: false, |
|
userFlag: false, |
|
handleTypeFlag: false, |
|
dealData: { |
|
// 预警主键 |
|
"warningId": "", |
|
// 处理类型 |
|
"handleType": "", |
|
// 处理结果 |
|
"handleResult": "", |
|
// 处理人 |
|
"handlePersonnel": "", |
|
// 处理时间 |
|
"handleTime": "", |
|
// 处理图片 |
|
"handleImg": "" |
|
}, |
|
handleImg: [], |
|
handleTypeEnum: [], |
|
propState: '2' |
|
} |
|
}, |
|
// 页面加载 |
|
onLoad(e) { |
|
if (this.$.getData('userInfo').role.some(i => i == '中队民警农三轮')) { |
|
this.userFlag = true |
|
} |
|
if (e.warningId) { |
|
console.log(e, 'warningIdwarningIdwarningIdwarningIdwarningIdwarningId') |
|
this.getDetail(e.warningId); |
|
} |
|
if (this.propState) { |
|
this.propState = this.propState |
|
} |
|
//查询用户名称 |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/auth/getOperatorInformation", { |
|
nuserid: this.$.getData('userInfo').username, |
|
}, |
|
"GET" |
|
) |
|
.then((res) => { |
|
if (res.code === 200) { |
|
this.$.setData('cusername', res.result.cusername) |
|
} |
|
}); |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/tricycle/getSquadronVillageList", { |
|
nuserId: this.$.getData('userInfo').username, |
|
}, |
|
"GET" |
|
).then(res => { |
|
if (res.code == 200) { |
|
this.squadronVillageList = res.result |
|
} |
|
}) |
|
//预警处理类型 |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/tricycle/getHandleTypeEnum", { |
|
nuserId: this.$.getData('userInfo').username, |
|
}, |
|
"GET" |
|
).then(res => { |
|
if (res.code == 200) { |
|
this.handleTypeEnum = res.result |
|
} |
|
}) |
|
this.dealData.handleTime = this.timestampToTime() |
|
this.dealData.handlePersonnel = this.$.getData('cusername') |
|
}, |
|
methods: { |
|
//取消 |
|
handleCancel() { |
|
this.editFlag = false |
|
this.getDetail(this.formData.warningId) |
|
}, |
|
//选择处理类型 |
|
handleTypeSelect(e) { |
|
this.dealData.handleType = e.value[0] |
|
this.handleTypeFlag = false |
|
}, |
|
//分配 |
|
assignTo(e) { |
|
if (e.value[0].sqcode) { |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/tricycle/submitDistributionStatus", { |
|
warningId: this.formData.warningId, |
|
sqCode: e.value[0].sqcode |
|
}, |
|
"GET" |
|
).then(res => { |
|
if (res.code == 200) { |
|
this.$.toast(res.result); |
|
setTimeout(() => { |
|
this.assignFlag = false |
|
this.$.back(1) |
|
}, 500) |
|
} |
|
}) |
|
} |
|
}, |
|
//处理 |
|
handleDeal() { |
|
const { |
|
handleType, |
|
handleResult, |
|
handlePersonnel, |
|
handleTime |
|
} = this.dealData |
|
let handleImg = '' |
|
if (this.handleImg[0] && this.handleImg[0]?.url) { |
|
handleImg = this.handleImg[0]?.url |
|
} |
|
|
|
if (!handleType || !handleResult || !handlePersonnel || !handleTime | !handleImg) { |
|
return this.$.toast("请输入完成表单必填项"); |
|
} |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/tricycle/saveTricycleWarningHandle", { |
|
"warningId": this.formData.warningId, |
|
handleType, |
|
handleResult, |
|
handlePersonnel, |
|
handleTime, |
|
handleImg |
|
}, |
|
"POST" |
|
).then(res => { |
|
if (res.code == 200) { |
|
this.$.toast(res.result); |
|
setTimeout(() => { |
|
this.$.back(2) |
|
}, 500) |
|
} |
|
}) |
|
}, |
|
getDetail(warningId) { |
|
this.formData = {} |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/tricycle/getWarningDetails", { |
|
warningId |
|
}, |
|
"GET" |
|
) |
|
.then((res) => { |
|
if (res.code === 200) { |
|
if (res.result[0]) { |
|
this.formData = res.result[0] |
|
} else { |
|
this.$.toast("未查询到预警详情，请联系管理员") |
|
} |
|
} |
|
}); |
|
}, |
|
|
|
timestampToTime() { |
|
var date = new Date() |
|
var Y = date.getFullYear() + '-'; |
|
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; |
|
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; |
|
var h = date.getHours(); |
|
if (String(h).length < 2) { |
|
h = '0' + String(h) |
|
} |
|
var m = date.getMinutes(); |
|
if (String(m).length < 2) { |
|
m = '0' + String(m) |
|
} |
|
var s = date.getSeconds(); |
|
if (String(s).length < 2) { |
|
s = '0' + String(s) |
|
} |
|
return Y + M + D + h + ':' + m + ':' + s; // 返回格式：YYYY-MM-DD |
|
}, |
|
|
|
//获取随机id |
|
uuid(len, binary) { |
|
len = !len ? 36 : len; |
|
binary = !binary ? 16 : binary; |
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" |
|
.replace(/[xy]/g, function(c) { |
|
var r = (Math.random() * binary) | 0, |
|
v = c == "x" ? r : (r & 0x3) | 0x8; |
|
return v.toString(binary); |
|
}) |
|
.substring(0, len); |
|
}, |
|
uploadFilePromise(event) { |
|
return new Promise((resolve, reject) => { |
|
let a = uni.uploadFile({ |
|
url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例，非真实的接口地址 |
|
filePath: event?.file.url, |
|
name: "file", |
|
formData: { |
|
position: event.position, |
|
longitude: event.longitude, |
|
latitude: event.latitude |
|
}, |
|
success: (res) => { |
|
resolve(res.data); |
|
}, |
|
}); |
|
}); |
|
}, |
|
async afterRead(event, key) { |
|
// console.log(key) |
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 |
|
const id = this.uuid(); |
|
this[key].push({ |
|
id, |
|
...event?.file, |
|
status: "uploading", |
|
message: "上传中", |
|
}); |
|
const result = await this.uploadFilePromise(event); |
|
const resultInfo = JSON.parse(result); |
|
const index = this[key]?.findIndex((v) => v.id === id); |
|
if (resultInfo.code == 200) { |
|
this[key].splice( |
|
index, |
|
1, |
|
Object.assign(event?.file, { |
|
status: "success", |
|
message: "", |
|
result: resultInfo, |
|
url: resultInfo.result, |
|
|
|
}) |
|
); |
|
} else { |
|
this.$.toast("上传失败"); |
|
this[key].splice( |
|
index, |
|
1, |
|
|
|
); |
|
} |
|
}, |
|
// 删除图片 |
|
deletePic(event, keyName) { |
|
if (!this.editFlag) { |
|
return |
|
} |
|
this[keyName].splice(event.index, 1); |
|
}, |
|
}, |
|
onReady() {}, |
|
// 页面卸载 |
|
onUnload() {}, |
|
} |
|
</script> |
|
|
|
<style> |
|
</style> |
|
<style lang="scss" scoped> |
|
.itemImg { |
|
max-width: 660rpx; |
|
max-height: 580rpx; |
|
margin: 0 auto; |
|
} |
|
|
|
.footer-buttons { |
|
z-index: 3; |
|
} |
|
|
|
page { |
|
background: #F6F8FA; |
|
} |
|
|
|
|
|
.query-form { |
|
|
|
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; |
|
|
|
.search-box { |
|
padding: 10px 10px 3px; |
|
} |
|
} |
|
|
|
.formBox { |
|
margin: 30rpx 20rpx; |
|
border: 1px solid #e6e6e6; |
|
background: #ffffff; |
|
padding: 0 20rpx 20rpx; |
|
box-sizing: border-box; |
|
|
|
/deep/ .uni-forms-item--border .uni-forms-item__content { |
|
justify-content: flex-end; |
|
text-align: right; |
|
} |
|
|
|
.photo { |
|
width: 100%; |
|
|
|
image { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
.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: 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: 380rpx; |
|
min-height: 80rpx; |
|
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; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.label-box { |
|
display: flex; |
|
align-items: center; |
|
height: 110rpx; |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
|
|
.border { |
|
background-color: #2663BF; |
|
height: 35rpx; |
|
width: 6rpx; |
|
margin-right: 14rpx; |
|
} |
|
} |
|
|
|
.label-box2 { |
|
height: 100rpx; |
|
|
|
|
|
} |
|
|
|
.label-box-small { |
|
font-size: 28rpx; |
|
margin-top: -25rpx; |
|
font-weight: 500; |
|
} |
|
|
|
.border-bottom { |
|
border-bottom: 1px #eee solid; |
|
} |
|
|
|
.border-top { |
|
border-top: 1px #eee solid; |
|
} |
|
|
|
|
|
/deep/ .uni-forms-item__label { |
|
font-size: 28rpx; |
|
height: auto; |
|
margin-bottom: 20rpx; |
|
white-space: nowrap; |
|
} |
|
|
|
/deep/ .u-input { |
|
background-color: #ffffff !important; |
|
} |
|
|
|
.detail-item-flex { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
|
|
.investigation-item-zl { |
|
.uni-forms-item--border { |
|
border: none; |
|
} |
|
|
|
border-top: 1px solid #eee; |
|
} |
|
|
|
.btn-right { |
|
width: 100%; |
|
text-align: right; |
|
} |
|
|
|
.bottom { |
|
position: fixed; |
|
bottom: 0; |
|
width: calc(100% - 40rpx); |
|
padding: 18rpx 20rpx; |
|
height: 80rpx; |
|
background: #FFFFFF; |
|
border-top: 1px solid #cccccc; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
z-index: 3; |
|
} |
|
|
|
.Img { |
|
width: 512rpx; |
|
height: 440rpx; |
|
margin: 0 auto; |
|
} |
|
|
|
.trapezoidal { |
|
position: relative; |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex: 1; |
|
width: 20%; |
|
height: 100%; |
|
box-sizing: border-box; |
|
text-align: center; |
|
border-radius: 10rpx; |
|
line-height: 60rpx; |
|
|
|
&.primary { |
|
background: #2663BF; |
|
color: #fff; |
|
|
|
&::after, |
|
&::before { |
|
background: #2663BF; |
|
} |
|
} |
|
} |
|
|
|
.trapezoidal::before, |
|
.trapezoidal::after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 10rpx; |
|
background: #E9EDF5; |
|
z-index: -1; |
|
transform-origin: bottom; |
|
box-sizing: border-box; |
|
} |
|
|
|
.trapezoidal::after { |
|
left: auto; |
|
right: 0; |
|
border-radius: 10rpx; |
|
background-color: #E9EDF5; |
|
border-left: 0 none; |
|
} |
|
|
|
.gray { |
|
color: gray; |
|
} |
|
</style> |