679 lines
16 KiB
Vue
679 lines
16 KiB
Vue
<template>
|
||
<view style="padding-bottom: 80rpx;">
|
||
<view class="barBox">
|
||
<headers :showBack="true">
|
||
<view class="title">
|
||
<view class="backBtn">
|
||
<view>
|
||
<!-- <span class="back" @click="goBack()">返回</span> -->
|
||
<span class="tip">违章处置</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</headers>
|
||
</view>
|
||
<view class="content">
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>违章类型</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<!-- <select :value="workerId" class="row-select">
|
||
<option style="margin-left: 26rpx;" v-for="(item,i) in workerList" :key="i" :value="item.id">
|
||
{{item.workerName}}
|
||
</option>
|
||
</select> -->
|
||
<view class="row-input">
|
||
<picker mode="selector" :range="alarmTypeList" range-key="name" @change="onAlarmTypeChange"
|
||
filterable>
|
||
<view class="picker" style="margin-left: 24rpx;">
|
||
<view class="" style="color: #e1e1e1;" v-if="!alarmTypeItem.name">
|
||
请选择违章类型
|
||
</view>
|
||
<view class="" v-else>
|
||
{{alarmTypeItem.name}}
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>来源</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<input class="uni-input" placeholder="请输入来源" :value="alarmDesc" @blur="bindTextAreaBlur" />
|
||
</view>
|
||
</view>
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>车牌号</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<input class="uni-input" placeholder="请输入车牌号" :value="carNumber" @blur="bindTextAreaBlur" />
|
||
</view>
|
||
</view>
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>当前车速(km/h)</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<input class="uni-input" placeholder="请输入当前车速" :value="currentSpeed" @blur="bindTextAreaBlur" />
|
||
</view>
|
||
</view>
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>选择违章人员</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<view class="row-input">
|
||
<!-- <picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
|
||
<view class="picker" style="margin-left: 24rpx;">
|
||
<view class="" style="color: #e1e1e1;" v-if="!selectedItem.workerName">
|
||
请选择违章人员
|
||
</view>
|
||
<view class="" v-else>
|
||
{{selectedItem.workerName}}
|
||
</view>
|
||
</view>
|
||
</picker> -->
|
||
<g-picker style="flex: 1" :searchFlag="true" :value="selectedItem.workerName" :columns="workerList"
|
||
:filter="{label: 'workerName', value: 'id'}" input-align="left"
|
||
@confirm="handleChangeEnterprise"></g-picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="row-line" v-show="isDis === 'dis'">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>违章区域</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<view class="row-input">
|
||
<picker mode="selector" :range="areaList" range-key="regionName" @change="onAreaChange"
|
||
filterable>
|
||
<view class="picker" style="margin-left: 24rpx;">
|
||
<view class="" style="color: #e1e1e1;" v-if="!selectedAreaItem.regionName">
|
||
请选择违章区域
|
||
</view>
|
||
<view class="" v-else>
|
||
{{selectedAreaItem.regionName}}
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>处置方式</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<radio-group @change="isShowContent" :value="isDis">
|
||
<radio value="1" checked="true">违章再教育</radio>
|
||
<radio value="2">加入黑名单</radio>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<text style="color: firebrick;">*</text>
|
||
<text>抓拍时间</text>
|
||
</view>
|
||
<view class="row-content">
|
||
{{addForm.inspectTime}}
|
||
</view>
|
||
</view>
|
||
<view class="row-line">
|
||
<view class="row-label">
|
||
<!-- <text style="color: firebrick;">*</text> -->
|
||
<text>上传图片</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<view class="uni-form-input imgBox_wrap">
|
||
<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList"
|
||
:key="index">
|
||
<image :src="item.url" class="img"
|
||
@click="previewImage(item.url)">
|
||
</image>
|
||
<view @click="deleteImg(item,1)" style="margin: 10rpx;" class="deleteImg">×</view>
|
||
</view>
|
||
<view class="addImgBox" @click="uploadImg(1)" v-if="imgFileList.length<1">
|
||
<image src="/static/icon-add.png" class="icon-add"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="confirm-btn" @click="confirm" v-show="btnAuth">
|
||
<view class="inner-btn">处置推送</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
dateformat
|
||
} from "@/utils/tool.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
imgFileList: [],
|
||
list: [{
|
||
name: '苹果'
|
||
},
|
||
{
|
||
name: '香蕉'
|
||
},
|
||
{
|
||
name: '橙子'
|
||
},
|
||
{
|
||
name: '葡萄'
|
||
},
|
||
// ... 更多选项
|
||
],
|
||
selectedItem: {},
|
||
alarmTypeItem: {},
|
||
addForm: {
|
||
inspectTime: dateformat(new Date())
|
||
},
|
||
isDis: '1',
|
||
workerId: [],
|
||
alarmDesc: '',
|
||
carNumber: "",
|
||
currentSpeed: "",
|
||
deductScore: '',
|
||
workerList: [],
|
||
workerInfoList: [],
|
||
handleResult: '',
|
||
alarmItem: {},
|
||
alarmTypeList: [],
|
||
alrmTypeId: "",
|
||
areaList: [],
|
||
selectedAreaItem: {},
|
||
areaId: "",
|
||
btnAuth: true
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.btnAuth = this.checkBtnPermission({key: 'dealPush_push', menuPath: '/project/carViolation/dealPushManage'})
|
||
// this.alarmItem = JSON.parse(decodeURIComponent(option.item));
|
||
console.log('alarmItem', this.alarmItem)
|
||
},
|
||
mounted() {
|
||
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
this.getWorkerList()
|
||
this.getAlarmTypeList()
|
||
this.getAreaList();
|
||
},
|
||
methods: {
|
||
//上传附件
|
||
uploadImg(type) {
|
||
var that = this
|
||
if (type == 1) {
|
||
uni.chooseImage({
|
||
count: 5 - that.imgFileList.length,
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
uni.uploadFile({
|
||
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
||
filePath: tempFilePaths[0],
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
let data = {
|
||
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
||
url: that.url_config+'image/' + JSON.parse(uploadFileRes.data).data[0].imageUrl
|
||
};
|
||
that.imgFileList.push(data)
|
||
uni.getImageInfo({
|
||
src: tempFilePaths[0],
|
||
success: (resInfo) => {
|
||
console.log('传过去啦 resInfo', resInfo)
|
||
that.imgList = {
|
||
imgUrl: tempFilePaths[0],
|
||
imgWidth: resInfo.width,
|
||
imgHeight: resInfo.height,
|
||
// team:'班组人员',
|
||
// name: '张三'
|
||
}
|
||
that.openImg = true
|
||
}
|
||
})
|
||
that.openImg = false
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//删除附件
|
||
deleteImg(val, type) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定删除该附件吗?',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
if (type == 1) {
|
||
let fileArr = JSON.parse(JSON.stringify(that.imgFileList));
|
||
fileArr.forEach((item, index) => {
|
||
if (item.url == val.url) {
|
||
fileArr.splice(index, 1)
|
||
}
|
||
})
|
||
that.imgFileList = fileArr;
|
||
} else if (type == 2) {
|
||
let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
|
||
fileArr.forEach((item, index) => {
|
||
if (item.url == val.url) {
|
||
fileArr.splice(index, 1)
|
||
}
|
||
})
|
||
that.videoFileList = fileArr;
|
||
}
|
||
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
//预览图片
|
||
previewImage(url) {
|
||
uni.previewImage({
|
||
urls: [url]
|
||
})
|
||
},
|
||
onChange(e) {
|
||
const index = e.detail.value;
|
||
this.selectedItem = this.workerList[index];
|
||
this.workerId = this.selectedItem.id
|
||
console.log("change!!!!!!!!!")
|
||
},
|
||
onAreaChange(e) {
|
||
const index = e.detail.value;
|
||
this.selectedAreaItem = this.areaList[index];
|
||
this.areaId = this.selectedAreaItem.id
|
||
console.log("change!!!!!!!!!")
|
||
},
|
||
onAlarmTypeChange(e) {
|
||
const index = e.detail.value;
|
||
this.alarmTypeItem = this.alarmTypeList[index];
|
||
this.alrmTypeId = this.alarmTypeItem.data
|
||
},
|
||
handleChangeEnterprise(e, values, labels) {
|
||
// console.log(e, values, labels)
|
||
// this.workerId = values.join(',');
|
||
this.workerId = values;
|
||
this.selectedItem.workerName = labels.join('、')
|
||
// selectedItem.workerName
|
||
},
|
||
confirm() {
|
||
if (!this.alrmTypeId) {
|
||
uni.showToast({
|
||
title: '请选择违章类型',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
if (!this.alarmDesc) {
|
||
uni.showToast({
|
||
title: '请输入来源',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
if (!this.carNumber) {
|
||
uni.showToast({
|
||
title: '请输入车牌号',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
if (!this.currentSpeed) {
|
||
uni.showToast({
|
||
title: '请输入当前车速',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
if (this.workerId.length == 0) {
|
||
uni.showToast({
|
||
title: '请选择违章人员',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
let requestData = {
|
||
projectSn: this.projectSn,
|
||
alarmType: this.alrmTypeId,
|
||
// qualityRegionId: this.areaId,
|
||
createTime: this.addForm.inspectTime,
|
||
isPushed: 1,
|
||
handleResult: 1,
|
||
handleDone: true,
|
||
alarmDesc: this.alarmDesc,
|
||
carNumber: this.carNumber,
|
||
currentSpeed: this.currentSpeed,
|
||
handleType: this.isDis,
|
||
workerInfoList: this.workerId.map(item => {
|
||
return {
|
||
id: item
|
||
}
|
||
}),
|
||
// alarmDesc: "手动抓拍"
|
||
}
|
||
let arr = [];
|
||
if(this.imgFileList.length > 0){
|
||
this.imgFileList.map(item =>{
|
||
arr.push(item.url)
|
||
})
|
||
}
|
||
requestData.imageUrl = arr.join(',');
|
||
this.sendRequest({
|
||
url: 'xmgl/carDangerDetectRecord/add',
|
||
method: "post",
|
||
data: requestData,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
console.log('res', res)
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: "none"
|
||
})
|
||
setTimeout(function(){
|
||
uni.navigateBack({delta: 1})
|
||
},1000)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getAreaList() {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: uni.getStorageSync("dept"),
|
||
ignoreDataScope: "ignoreDataScope"
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/qualityRegion/notTreeList',
|
||
method: 'post',
|
||
data: data,
|
||
success: (res) => {
|
||
if (res.code === 200) {
|
||
that.areaList = res.result
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getAlarmTypeList() {
|
||
this.sendRequest({
|
||
url: 'xmgl/dictionaryItem/list',
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
dictionaryEncoding: "car_danger_detect_record_alarm_type"
|
||
},
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
console.log('alarmTypeList', res)
|
||
this.alarmTypeList = res.result
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getWorkerList() {
|
||
this.sendRequest({
|
||
url: 'xmgl/workerInfo/selectWorkerInfoList',
|
||
method: "post",
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
},
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
console.log('workerListRes', res)
|
||
this.workerList = res.result.records
|
||
}
|
||
}
|
||
})
|
||
},
|
||
isShowContent(e) {
|
||
this.isDis = e.detail.value
|
||
if (this.isDis === 'ign') {
|
||
this.cleanForm()
|
||
}
|
||
},
|
||
cleanForm() {
|
||
this.workerId = '';
|
||
this.alarmDesc = '';
|
||
this.carNumber = '';
|
||
this.currentSpeed = '';
|
||
this.deductScore = '';
|
||
},
|
||
bindTextAreaBlur(e) {
|
||
this.alarmDesc = e.detail.value
|
||
console.log(e.detail.value)
|
||
},
|
||
change(e) {
|
||
console.log("e:", e);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-input {
|
||
width: 70%;
|
||
height: 78rpx;
|
||
line-height: 78rpx;
|
||
border: 2rpx solid rgba(42, 43, 91, 0.3);
|
||
padding: 0px 30rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.uni-input-placeholder{
|
||
color: rgb(225, 225, 225);
|
||
}
|
||
.imgBox_wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// margin-top: 20rpx;
|
||
width: 75%;
|
||
|
||
.imgBox {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
display: inline-flex;
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.deleteImg {
|
||
position: absolute;
|
||
right: -6rpx;
|
||
top: -36rpx;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
|
||
.addImgBox {
|
||
border: 1px solid rgba(42, 43, 91, 0.1);
|
||
background-color: #F5F5F5;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
|
||
.icon-add {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.confirm-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
// background-color: darkred;
|
||
position: fixed;
|
||
bottom: 0;
|
||
|
||
.inner-btn {
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
background-color: #2D8EF3;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.row-line {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
min-height: 80rpx;
|
||
|
||
.row-label {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
width: 30%;
|
||
}
|
||
|
||
.row-content {
|
||
width: 70%;
|
||
margin-left: 40rpx;
|
||
display: flex;
|
||
|
||
radio {
|
||
// font-size: 36rpx;
|
||
margin-right: 20rpx;
|
||
// transform:scale(0.7);
|
||
}
|
||
|
||
:deep(uni-textarea ){
|
||
width: 70%;
|
||
height: 200rpx;
|
||
padding: 26rpx 28rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
// background-color: #efefef;
|
||
border: 1px solid #d8d8d8;
|
||
border-radius: 6rpx;
|
||
|
||
.uni-textarea-compute {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
}
|
||
}
|
||
|
||
.row-select {
|
||
width: 70%;
|
||
height: 68rpx;
|
||
border: 1px solid #d8d8d8;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 6rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.row-input {
|
||
width: 70%;
|
||
height: 78rpx;
|
||
border: 1px solid #d8d8d8;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 6rpx;
|
||
|
||
.g-picker {
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
}
|
||
|
||
.select-container {
|
||
// height: 80px;
|
||
// overflow: auto;
|
||
}
|
||
:deep( .uni-radio-input ){
|
||
border: 2rpx solid #171717;
|
||
// background-color: white !important;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
:deep( .uni-radio-input.uni-radio-input-checked:before ){
|
||
content: '';
|
||
background-color: #2F8FF3;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-radius: 50%;
|
||
transform: translate(-50% -50%) scale(.73) !important;
|
||
}
|
||
}
|
||
}
|
||
.row-line:last-child {
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
.barBox {
|
||
background-color: #5181F6;
|
||
}
|
||
|
||
.title {
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
font-size: 40rpx;
|
||
width: 100vw;
|
||
// background-color: #5181F6;
|
||
// color: #fff;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.backBtn {
|
||
// display: flex;
|
||
// justify-content: flex-start;
|
||
font-size: 30rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.back {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
// .tip {
|
||
// margin-left: 5rem;
|
||
// }
|
||
</style> |