584 lines
14 KiB
Vue
584 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<view class="barBox">
|
||
<headers class="" :showBack="true">
|
||
<view class="headerName">
|
||
违章处置
|
||
</view>
|
||
</headers>
|
||
<!-- <headers :showBack="true">
|
||
<view class="title">
|
||
<view class="backBtn">
|
||
<view>
|
||
<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">
|
||
<view class="row-input">
|
||
<picker mode="selector" :range="alarmTypeArrList" range-key="name" @change="onChangeAlarm" 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" v-show="isDis === 'dis'">
|
||
<view class="row-label">
|
||
<text>描述</text>
|
||
</view>
|
||
<view class="row-content">
|
||
<textarea :value="desc" @blur="bindTextAreaBlur" />
|
||
</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="dis" checked="true">已处置</radio>
|
||
<radio value="ign">误报忽略</radio>
|
||
</radio-group>
|
||
</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="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">
|
||
<radio-group @change="isShowContentType" :value="handleType">
|
||
<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">
|
||
<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">
|
||
<view class="inner-btn">确认</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [
|
||
{ name: '苹果' },
|
||
{ name: '香蕉' },
|
||
{ name: '橙子' },
|
||
{ name: '葡萄' },
|
||
// ... 更多选项
|
||
],
|
||
selectedItem: {},
|
||
imgFileList: [],
|
||
alarmTypeArrList: [],
|
||
alarmTypeItem: {},
|
||
alarmType: "",
|
||
|
||
isDis: 'dis',
|
||
handleType:'1',
|
||
workerId: '',
|
||
alarmDesc: '',
|
||
deductScore: '',
|
||
workerList: [],
|
||
workerInfoList: [],
|
||
handleResult: '',
|
||
alarmItem: {},
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.alarmItem = JSON.parse(decodeURIComponent(option.item));
|
||
console.log('alarmItem',this.alarmItem)
|
||
// this.deductScore = this.alarmItem.aiDeductRule.deductScore
|
||
},
|
||
mounted() {
|
||
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
this.getWorkerList()
|
||
this.getDictionaryList();
|
||
},
|
||
methods: {
|
||
onChange(e) {
|
||
const index = e.detail.value;
|
||
this.selectedItem = this.workerList[index];
|
||
this.workerId = this.selectedItem.id
|
||
console.log("change!!!!!!!!!")
|
||
},
|
||
onChangeAlarm(e) {
|
||
const index = e.detail.value;
|
||
this.alarmTypeItem = this.alarmTypeArrList[index];
|
||
this.alarmType = this.alarmTypeItem.data
|
||
console.log("change!!!!!!!!!")
|
||
},
|
||
handleChangeEnterprise(e, values, labels) {
|
||
// console.log(e, values, labels)
|
||
// this.workerId = values.join(',');
|
||
this.workerId = values;
|
||
this.selectedItem.workerName = labels.join('、')
|
||
// selectedItem.workerName
|
||
},
|
||
confirm(){
|
||
console.log(">>>>>>>>>>>>>>>>>>>>>>>");
|
||
console.log(this.selectedItem);
|
||
console.log(this.alarmItem);
|
||
// if(this.alarmType === '' || this.alarmType === null || this.alarmType === undefined){
|
||
// uni.showToast({
|
||
// title: '请选择违规原因',
|
||
// icon: "none"
|
||
// })
|
||
// return
|
||
// }
|
||
// if(this.alarmDesc === '' || this.alarmDesc === null || this.alarmDesc === undefined){
|
||
// uni.showToast({
|
||
// title: '请输入违规地点',
|
||
// icon: "none"
|
||
// })
|
||
// return
|
||
// }
|
||
// if(this.imgFileList.length == 0){
|
||
// uni.showToast({
|
||
// title: '请上传图片',
|
||
// icon: "none"
|
||
// })
|
||
// return
|
||
// }
|
||
let requestData = {}
|
||
|
||
|
||
if(this.isDis === 'dis') {
|
||
requestData = {
|
||
...this.alarmItem,
|
||
handleResult: 1,
|
||
handleDone: true,
|
||
projectSn: this.projectSn,
|
||
workerInfoList: [{id: this.workerId}],
|
||
handleType: this.handleType,
|
||
}
|
||
if(this.workerId === '' || this.workerId === null || this.workerId === undefined){
|
||
uni.showToast({
|
||
title: '请选择违章人员',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
} else if(this.isDis === 'ign'){
|
||
requestData = {
|
||
...this.alarmItem,
|
||
handleResult: 2,
|
||
projectSn: this.projectSn,
|
||
}
|
||
}
|
||
console.log(requestData)
|
||
return
|
||
this.sendRequest({
|
||
// url: 'xmgl/carDangerDetectRecord/edit',
|
||
url: 'xmgl/carDangerDetectRecord/setFalsePositive',
|
||
method: "post",
|
||
data: requestData,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
console.log('res', res)
|
||
uni.navigateBack({delta: 2})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
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
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getDictionaryList(){
|
||
this.sendRequest({
|
||
url: 'xmgl/dictionaryItem/list',
|
||
method: "get",
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
dictionaryEncoding: "ai_analyse_hard_ware_alarm_record_type",
|
||
},
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
console.log('alarmTypeArrList', res)
|
||
this.alarmTypeArrList = res.result
|
||
}
|
||
}
|
||
})
|
||
},
|
||
isShowContent(e){
|
||
this.isDis = e.detail.value
|
||
if(this.isDis === 'ign'){
|
||
this.cleanForm()
|
||
}
|
||
},
|
||
isShowContentType(e){
|
||
this.handleType = e.detail.value
|
||
},
|
||
cleanForm(){
|
||
this.workerId = ''
|
||
// this.desc = ''
|
||
// this.deductScore = ''
|
||
},
|
||
bindTextAreaBlur(e) {
|
||
this.alarmDesc = e.detail.value
|
||
console.log(e.detail.value)
|
||
},
|
||
change(e) {
|
||
console.log("e:", e);
|
||
},
|
||
//上传附件
|
||
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]
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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: 120rpx;
|
||
height: 120rpx;
|
||
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: 30rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
|
||
.addImgBox {
|
||
border: 1px solid rgba(42, 43, 91, 0.1);
|
||
background-color: #f6f5f8;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
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: 90rpx;
|
||
// background-color: darkred;
|
||
position: absolute;
|
||
bottom: 5%;
|
||
display: flex;
|
||
justify-content: center;
|
||
.inner-btn{
|
||
width: 65%;
|
||
height: 90rpx;
|
||
color: #fff;
|
||
background-color: #5181f6;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.content{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.row-line{
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.barBox {
|
||
background-color: #5181F6;
|
||
}
|
||
|
||
.title {
|
||
height: 44px;
|
||
line-height: 44px;
|
||
font-size: 40rpx;
|
||
width: 750rpx;
|
||
// background-color: #5181F6;
|
||
// color: #fff;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.backBtn {
|
||
// display: flex;
|
||
// justify-content: flex-start;
|
||
font-size: 30rpx;
|
||
position: absolute;
|
||
left: 20%;
|
||
}
|
||
|
||
.back {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.tip {
|
||
margin-left: 5rem;
|
||
}
|
||
</style> |