admin/zhgdyunapp_vue3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
zhgdyunapp_vue3/pages/carViolation/manualCapture/index.vue

679 lines
16 KiB
Vue
Raw Normal View History

flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
<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>
flx：优化
2025-11-27 17:15:44 +08:00
<text>来源</text>
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
</view>
<view class="row-content">
flx：优化
2025-11-27 17:15:44 +08:00
<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" />
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
</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: '',
flx：优化
2025-11-27 17:15:44 +08:00
carNumber: "",
currentSpeed: "",
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
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;
flx：修复搜索框弹窗不展示问题
2025-02-24 17:13:51 +08:00
this.selectedItem.workerName = labels.join('、')
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
// selectedItem.workerName
},
confirm() {
if (!this.alrmTypeId) {
uni.showToast({
title: '请选择违章类型',
icon: "none"
})
return
}
if (!this.alarmDesc) {
uni.showToast({
flx：优化
2025-11-27 17:15:44 +08:00
title: '请输入来源',
icon: "none"
})
return
}
if (!this.carNumber) {
uni.showToast({
title: '请输入车牌号',
icon: "none"
})
return
}
if (!this.currentSpeed) {
uni.showToast({
title: '请输入当前车速',
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
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,
flx：优化
2025-11-27 17:15:44 +08:00
carNumber: this.carNumber,
currentSpeed: this.currentSpeed,
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
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,
flx：优化
2025-11-27 17:15:44 +08:00
dictionaryEncoding: "car_danger_detect_record_alarm_type"
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
},
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() {
flx：优化
2025-11-27 17:15:44 +08:00
this.workerId = '';
this.alarmDesc = '';
this.carNumber = '';
this.currentSpeed = '';
this.deductScore = '';
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
},
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;
flx:修复app图表ucharts不显示问题 新增扫码展示页面
2025-03-14 14:38:24 +08:00
// background-color: white !important;
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
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 {
flx：修复搜索框弹窗不展示问题
2025-02-24 17:13:51 +08:00
height: 88rpx;
line-height: 88rpx;
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
font-size: 40rpx;
flx：修复搜索框弹窗不展示问题
2025-02-24 17:13:51 +08:00
width: 100vw;
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
// background-color: #5181F6;
// color: #fff;
text-align: center;
position: relative;
}
.backBtn {
// display: flex;
// justify-content: flex-start;
font-size: 30rpx;
position: absolute;
flx：修复搜索框弹窗不展示问题
2025-02-24 17:13:51 +08:00
left: 50%;
transform: translateX(-50%);
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
}
.back {
font-size: 24rpx;
}
flx：修复搜索框弹窗不展示问题
2025-02-24 17:13:51 +08:00
// .tip {
// margin-left: 5rem;
// }
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
</style>
Reference in New Issue Copy Permalink