<template>
|
<div class="study-judge">
|
<div class="study-judge-header">
|
<span>您有1111条待审核报警信息,今日立案0条,再学习0条</span>
|
</div>
|
<div class="study-judge-main">
|
<!-- sjm:study-judge-main -->
|
<div class="sjm-header">
|
<div class="sjm-header-left">
|
<span class="moni-name">监控点位名称:中华路XX路口 </span>
|
<span class="moni-area">中华街道区域</span>
|
</div>
|
<div class="sjm-header-right">
|
<el-button size="small">实时预览</el-button>
|
<el-button size="small">录像回放</el-button>
|
</div>
|
</div>
|
<div class="sjm-content">
|
<div class="sjm-content-left">
|
<div class="img-item">
|
<span>报警图片</span>
|
<img
|
src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
|
alt="">
|
<span>报警时间：2022-09-08 14:23:34</span>
|
</div>
|
<div class="img-item">
|
<img
|
src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
|
alt="">
|
</div>
|
<div class="img-item">
|
<img
|
src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
|
alt="">
|
</div>
|
</div>
|
<div class="sjm-content-center">
|
地图容器
|
</div>
|
<div class="sjm-content-right">
|
<div class="card-box">
|
<div class="card-header">
|
<span>报警记录</span>
|
<span>乱停乱放违法占道</span>
|
</div>
|
<el-form ref="currentEvent" label-width="120px" :model="currentEvent" :rules="rules">
|
<el-form-item label="事件编号:">
|
<span>{{ currentEvent.number }}</span>
|
</el-form-item>
|
<el-form-item label="事件等级:">
|
<span>{{ currentEvent.level }}</span>
|
</el-form-item>
|
<el-form-item label="首次报警时间:">
|
<span>{{ currentEvent.firstTime }}</span>
|
</el-form-item>
|
<el-form-item label="最近报警时间:">
|
<span>{{ currentEvent.recentTime }}</span>
|
</el-form-item>
|
<el-form-item label="持续时间:">
|
<span>{{ currentEvent.conntinueTime }}</span>
|
</el-form-item>
|
<el-form-item label="处理意见:" prop="advice">
|
<el-radio-group v-model="currentEvent.advice">
|
<el-radio :label="item.id" v-for="item in adviceList" :key="item.id">{{ item.label }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="问题类型:" prop="type">
|
<el-input v-model="currentEvent.type" placeholder="请选择问题类型"></el-input>
|
</el-form-item>
|
<el-form-item label="大类名称:" prop="bigKind">
|
<el-input v-model="currentEvent.bigKind" placeholder="请选择大类名称"></el-input>
|
</el-form-item>
|
<el-form-item label="小类名称:" prop="smallKind">
|
<el-input v-model="currentEvent.smallKind" placeholder="请选择小类名称"></el-input>
|
</el-form-item>
|
<el-form-item label="车牌号:" prop="carNumber">
|
<el-input v-model="currentEvent.carNumber" placeholder="请填写车牌号码"></el-input>
|
</el-form-item>
|
<el-form-item label="备注:">
|
<el-input type="textarea" :rows="5" v-model="currentEvent.tip"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button>上一条</el-button>
|
<el-button @click.native.prevent="handleConfirm">确认</el-button>
|
<el-button>下一条</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
const validateAdvice = (rule,value,callback)=>{
|
if(value){
|
callback()
|
}else{
|
callback(new Error('处理意见不能为空'))
|
}
|
}
|
const validateType = (rule,value,callback)=>{
|
if(value){
|
callback()
|
}else{
|
callback(new Error('问题类型不能为空'))
|
}
|
}
|
const validateBigKind = (rule,value,callback)=>{
|
console.log(value)
|
if(value){
|
callback()
|
}else{
|
callback(new Error('大类名称不能为空'))
|
}
|
}
|
const validateSmallKind = (rule,value,callback)=>{
|
if(value){
|
callback()
|
}else{
|
callback(new Error('小类名称不能为空'))
|
}
|
}
|
const validateCarNumber = (rule,value,callback)=>{
|
if(value){
|
callback()
|
}else{
|
callback(new Error('车牌号不能为空'))
|
}
|
}
|
return {
|
currentEvent: {
|
number: '1233123414141414',
|
level: '一般事件',
|
firstTime: '2022/09/23 12:00:00',
|
recentTime: '2022/09/23/ 12:00:00',
|
conntinueTime: '0小时10分钟',
|
advice: null,
|
type: '',
|
bigKind: '',
|
smallKind: '',
|
carNumber: '',
|
tip: ''
|
},
|
adviceList: [
|
{
|
id: 1,
|
label: '上报',
|
},
|
{
|
id: 2,
|
label: '调度',
|
},
|
{
|
id: 3,
|
label: '再学习',
|
},
|
{
|
id: 4,
|
label: '暂不处理',
|
},
|
],
|
rules:{
|
advice:[
|
{
|
trigger:'blur',validator:validateAdvice
|
},
|
],
|
type:[
|
{
|
trigger:'blur',validator:validateType
|
}
|
],
|
bigKind:[
|
{
|
trigger:'blur',validator:validateBigKind
|
}
|
],
|
smallKind:[
|
{
|
trigger:'blur',validator:validateSmallKind
|
}
|
],
|
carNumber:[
|
{
|
trigger:'blur',validator:validateCarNumber
|
}
|
]
|
}
|
}
|
},
|
methods:{
|
// 确认点击事件
|
handleConfirm(){
|
console.log(this.$refs.currentEvent)
|
this.$refs.currentEvent.validate((flag)=>{
|
console.log(flag)
|
if(flag){
|
|
}else{
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.study-judge {
|
text-align: left;
|
color: #4b9bb7;
|
padding: 20px;
|
.study-judge-header {
|
line-height: 8vh;
|
}
|
|
.study-judge-main {
|
.sjm-header {
|
line-height: 8vh;
|
display: flex;
|
justify-content: space-between;
|
|
.sjm-header-left {
|
flex: 1;
|
display: flex;
|
justify-content: flex-start;
|
|
.moni-area {
|
margin-left: 4vw;
|
}
|
}
|
|
.sjm-header-right {
|
flex: 1;
|
display: flex;
|
justify-content: flex-end;
|
|
.el-button {
|
padding: 0 1vw;
|
height: 4vh;
|
}
|
}
|
}
|
|
.sjm-content {
|
display: flex;
|
justify-content: space-between;
|
|
.sjm-content-left {
|
line-height: 4.8vh;
|
|
.img-item {
|
display: flex;
|
flex-direction: column;
|
|
img {
|
width: 15vw;
|
height: 20vh;
|
}
|
}
|
|
.img-item+.img-item {
|
margin-top: 2vh;
|
}
|
}
|
|
.sjm-content-right {
|
.card-box {
|
.card-header {
|
line-height: 4.8vh;
|
}
|
}
|
}
|
}
|
}
|
|
.el-form {
|
::v-deep .el-form-item {
|
// margin-bottom: 10px;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
}
|
|
::v-deep .el-radio__label {
|
color: #4b9bb7;
|
}
|
}
|
</style>
|
