<template>
|
<div class="study-judge">
|
<div class="study-judge-header">
|
<span>您有{{ countData.review }}条待审核报警信息,今日立案{{ countData.register }}条,再学习{{ countData.study }}条</span>
|
</div>
|
<div class="study-judge-main">
|
<div class="sjm-header">
|
<div class="sjm-header-left">
|
<span class="moni-name">监控点位名称: {{ currentEvent.name }} </span>
|
<span class="moni-area">{{ currentEvent.street }}</span>
|
<span>{{ currentEvent.address }}</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" v-for="(item, index) in imageList" :key="item.id">
|
<span>报警图片</span>
|
<img :src="item">
|
<span v-if="index === 0">报警时间：{{ currentEvent.alarmTime }}</span>
|
</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="eventInfoData" :rules="rules">
|
<el-form-item label="事件编号:">
|
<span>{{ currentEvent.code }}</span>
|
</el-form-item>
|
<el-form-item label="事件等级:">
|
<span>{{ currentEvent.grade }}</span>
|
</el-form-item>
|
<el-form-item label="首次报警时间:">
|
<span>{{ currentEvent.alarmTime }}</span>
|
</el-form-item>
|
<el-form-item label="最近报警时间:">
|
<span>{{ currentEvent.currentAlarmTime }}</span>
|
</el-form-item>
|
<el-form-item label="持续时间:">
|
<span>{{ currentEvent.conntinueTime }}</span>
|
</el-form-item>
|
<el-form-item label="关联店铺" prop="store">
|
<el-select v-model="eventInfoData.store" clearable @change="selectStoreChange" placeholder="请选择关联店铺">
|
<el-option v-for="store in storeList" :value="store.id" :label="store.storeName" :key="store.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="eventInfoData.store" label="店铺得分:">
|
<span>{{ selectStoreChange(eventInfoData.store).storeScore }}</span>
|
</el-form-item>
|
<el-form-item label="处理意见:" prop="state">
|
<el-radio-group v-model="eventInfoData.state">
|
<el-radio :label="item.id" v-for="item in stateList" :key="item.id">{{ item.label }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="大类名称:" prop="categoryId">
|
<el-select v-model="eventInfoData.categoryId" placeholder="请选择大类名称" @change="categoryChange">
|
<el-option v-for="category in categoryOptions" :key="category.id" :value="category.id" :label="category.name" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="小类名称:" prop="typeId">
|
<el-select v-model="eventInfoData.typeId" placeholder="请选择小类名称">
|
<el-option v-for="type in typeOptions" :key="type.id" :value="type.id" :label="type.name" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="车牌号:" prop="carNumber">
|
<el-input v-model="eventInfoData.carNumber" placeholder="请填写车牌号码"></el-input>
|
</el-form-item>
|
<el-form-item label="备注:" prop="description">
|
<el-input type="textarea" :rows="5" v-model="eventInfoData.description"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button :disabled="currentPage === 1" @click="pageChange('prev')">上一条</el-button>
|
<el-button @click.native.prevent="handleConfirm">确认</el-button>
|
<el-button @click="pageChange('next')">下一条</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog :visible="isShowDialog" title="调度信息">
|
<MyDispatch v-if="isShowDialog" :mytype="1" @getDispatchData="confirmInspection" :isGetData="true" @changeDialog="closeDialog"></MyDispatch>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import basecase from "@/api/operate/basecase";
|
import baseInfo from "@/api/baseInfo";
|
import { getStoreInfoList } from "@/api/operate/storeManagement";
|
import { FILE_ORIGINAL_URL } from "@/utils";
|
import { validateCarNum } from "@/utils/validate";
|
import MyDispatch from '@/components/dispatch';
|
|
export default {
|
components: { MyDispatch },
|
created() {
|
this.getInspectionData();
|
this.initEventParams();
|
basecase.getInspectionCountData()
|
.then(res => {
|
this.countData = res;
|
})
|
.catch(err => this.$message.error(err))
|
|
getStoreInfoList({ current: 1, size: 100 })
|
.then(({ list }) => {
|
this.storeList = list;
|
})
|
.catch(err => {
|
this.$message.error(err)
|
})
|
|
baseInfo.getCategoryList()
|
.then(res => {
|
this.categoryOptions = res;
|
})
|
.catch(err => this.$message.error(err))
|
|
baseInfo.getTypeList()
|
.then(res => {
|
this.typeList = res;
|
})
|
.catch(err => this.$message.error(err))
|
},
|
data() {
|
const validateCarNumber = (rule, value, callback) => {
|
if (value) {
|
if (validateCarNum(value)) {
|
callback();
|
} else {
|
callback(new Error('请输入正确的车牌号'));
|
}
|
} else {
|
callback();
|
}
|
};
|
return {
|
countData: {
|
study: 0,
|
review: 0,
|
register: 0
|
},
|
currentEvent: {},
|
stateList: [
|
{
|
id: 2,
|
label: '上报',
|
},
|
{
|
id: 6,
|
label: '调度',
|
},
|
{
|
id: 3,
|
label: '再学习',
|
},
|
{
|
id: 4,
|
label: '暂不处理',
|
},
|
],
|
eventInfoData: null,
|
rules:{
|
state:[
|
{
|
required: true, trigger:['blur'], message: '处理意见不能为空'
|
},
|
],
|
categoryId:[
|
{
|
required: true, trigger:['blur'], message: '大类名称不能为空'
|
}
|
],
|
typeId:[
|
{
|
required: true, trigger:['blur'], message: '小类名称不能为空'
|
}
|
],
|
carNumber:[{ trigger:['blur', 'change'], validator: validateCarNumber }]
|
},
|
imageList: [],
|
currentPage: 1,
|
categoryOptions: [],
|
typeOptions: [],
|
storeList: [],
|
typeList: [],
|
isShowDialog: false
|
}
|
},
|
methods:{
|
pageChange(type) {
|
if (type === 'next') {
|
this.currentPage += 1;
|
} else {
|
this.currentPage -= 1;
|
}
|
this.getInspectionData();
|
},
|
|
getInspectionData() {
|
basecase.getInspectionData({ current: this.currentPage })
|
.then(({ records }) => {
|
this.currentEvent = records[0];
|
if (this.currentEvent?.picData) {
|
this.imageList = this.currentEvent.picData.split(',').map(item => `${FILE_ORIGINAL_URL}${item}`);
|
}
|
if (this.currentEvent?.alarmTime || this.currentEvent?.currentAlarmTime) {
|
const { alarmTime, currentAlarmTime } = this.currentEvent;
|
const continueAlarmTime = new Date().getTime() -
|
(currentAlarmTime ? new Date(currentAlarmTime).getTime() : new Date(alarmTime).getTime());
|
const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24;
|
const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24;
|
this.currentEvent.conntinueTime = `${parseInt(CONTINUE_DAY)}天${parseInt(CONTINUE_HOURS)}小时`;
|
}
|
})
|
.catch(err => this.$message.error(err))
|
},
|
|
// 确认点击事件
|
handleConfirm(){
|
this.$refs.currentEvent.validate((flag)=>{
|
if(flag){
|
this.eventInfoData.baseId = this.currentEvent.baseId;
|
|
// 调度
|
if (this.eventInfoData.state === 6) {
|
this.isShowDialog = true;
|
} else {
|
this.confirmInspection();
|
}
|
} else {
|
this.$message.warning('请检查必填项');
|
}
|
})
|
},
|
|
initEventParams() {
|
this.eventInfoData = {
|
baseId: null,
|
store: null,
|
state: null,
|
categoryId: null,
|
typeId: null,
|
carNumber: null,
|
description: null,
|
linkShop: 0,
|
shopName: null
|
}
|
},
|
|
categoryChange(id) {
|
this.typeOptions = this.typeList.filter(type => type.parentId === id);
|
},
|
|
confirmInspection(data) {
|
const eventParams = Object.assign({}, this.eventInfoData);
|
delete eventParams.store;
|
basecase.confirmInspection({ ...eventParams, ...data })
|
.then(() => {
|
this.$message.success('操作成功');
|
this.getInspectionData();
|
this.initEventParams();
|
})
|
.catch(err => this.$message.error(err))
|
},
|
|
closeDialog() {
|
this.isShowDialog = false;
|
},
|
|
selectStoreChange(id) {
|
const selectedStore = this.storeList.find(store => store.id === id);
|
this.eventInfoData.shopName = selectedStore.id;
|
this.eventInfoData.linkShop = 1;
|
return selectedStore;
|
}
|
}
|
}
|
</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 {
|
}
|
|
::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
}
|
|
::v-deep .el-radio__label {
|
color: #4b9bb7;
|
}
|
}
|
</style>
|
