|
|
<!-- 紧急事件审核弹框 -->
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
:visible.sync="showCK"
|
|
|
v-if="showCK"
|
|
|
width="60%"
|
|
|
:show-close="false"
|
|
|
:append-to-body="true"
|
|
|
:close-on-click-modal="false"
|
|
|
:close-on-press-escape="false"
|
|
|
custom-class="travel"
|
|
|
>
|
|
|
<div slot="title" class="dialog-title">
|
|
|
<div class="dialog-title-text">{{ title }}</div>
|
|
|
<i @click="close" class="el-icon-close"></i>
|
|
|
</div>
|
|
|
<div class="audit-generalize">
|
|
|
<el-row>
|
|
|
<el-col :span="14" v-if="!isTrue">
|
|
|
<div class="work-order-info ">
|
|
|
<div class="work-order-item" v-if="auditStatus == 1">
|
|
|
<div class="work-order-item-left">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">事件名称</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<el-tooltip class="item" effect="light" :content="eventInfo.title" placement="top">
|
|
|
<!-- @blur="titleBlur" -->
|
|
|
<el-input class="work-order-value-value" v-model="eventInfo.title" :disabled="disabled"></el-input>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
<el-button size="mini" @click="disabled = false"><img src="@/assets/images/changeTitle.png" alt=""> 修改标题</el-button>
|
|
|
</div>
|
|
|
<div class="work-order-item" v-else>
|
|
|
<div class="work-order-item-left">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">事件名称</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<el-tooltip class="item" effect="light" :content="eventInfo.title" placement="top">
|
|
|
<div class="work-order-value work-order-value-value" :class="!eventInfo.titleBefore ? 'value-value':''">{{ eventInfo.title }}</div>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
<el-button size="mini" v-if="eventInfo.titleBefore" @click="innerVisible = true"><img src="@/assets/images/changeTitle.png" alt=""> 查看标题</el-button>
|
|
|
</div>
|
|
|
<div class="work-order-items" v-if="eventInfo.auditTime">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">审核时间</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ eventInfo.auditTime }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">预警因素</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ eventInfo.warnFactor }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">预警时间</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ eventInfo.firstWarnTimeDate }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">预警类别</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ eventInfo.msgTypeName }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox order-labelBox">事件来源</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.scenceName }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">诉求类型</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseType }}</div>
|
|
|
</div>
|
|
|
<!-- <div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">案件类型</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseAccord }}</div>
|
|
|
</div> -->
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">工单标题</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseTitle }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">制单时间</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseDate }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">诉求内容</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">
|
|
|
{{ audioInfo.caseContent }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">位置描述</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseAddress }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">来电号码</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.creatorTel }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">服务对象姓名</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.creatorName }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="14" v-else>
|
|
|
<div class="work-order-info ">
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox order-labelBox">工单编号</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseSerial }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox order-labelBox">事件来源</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.scenceName }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">诉求类型</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseType }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">工单标题</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseTitle }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">制单时间</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseDate }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">诉求内容</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">
|
|
|
{{ audioInfo.caseContent }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">位置描述</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.caseAddress }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">来电号码</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.creatorTel }}</div>
|
|
|
</div>
|
|
|
<div class="work-order-items">
|
|
|
<div class="work-order-label">
|
|
|
<div class="work-order-labelBox">服务对象姓名</div>
|
|
|
<span>：</span>
|
|
|
</div>
|
|
|
<div class="work-order-value">{{ audioInfo.creatorName }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="10">
|
|
|
<div id="newmapTwo" v-loading="mapLoading"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div slot="footer" class="dialog-footer" v-if="auditStatus == 1">
|
|
|
<el-button type="primary" @click="reported(1)">上报驾驶舱</el-button>
|
|
|
<!-- <el-button type="info" plain>不上报</el-button> -->
|
|
|
<el-button type="danger" @click="reported(2)">退回重训练</el-button>
|
|
|
<!-- <el-button type="success" @click="reported(3)">审核通过</el-button> -->
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
width="30%"
|
|
|
title="查看标题"
|
|
|
:visible.sync="innerVisible"
|
|
|
append-to-body>
|
|
|
<el-descriptions :column="1">
|
|
|
<el-descriptions-item label="当前标题">{{ eventInfo.title }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="历史标题">{{ eventInfo.titleBefore }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-dialog>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
import L from "leaflet";
|
|
|
import 'leaflet.markercluster';
|
|
|
import "leaflet.markercluster/dist/MarkerCluster.css"
|
|
|
import "proj4";
|
|
|
import "proj4leaflet";
|
|
|
import "@/utils/lib/leaflet.ChineseTmsProviders.js";
|
|
|
import "@/utils/lib/leaflet.mapCorrection.min.js";
|
|
|
import { auditList, eventChangeIsReport, editTitle, getMassEvents } from "@/api/eventPage"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
showCK:false,
|
|
|
audioInfo:{},
|
|
|
eventInfo:{},
|
|
|
backupsInfo:{},
|
|
|
loading:false,
|
|
|
mapLoading:false,
|
|
|
mapLayers: {
|
|
|
mapLayer1: null,
|
|
|
},
|
|
|
disabled: true,
|
|
|
innerVisible:false,
|
|
|
isTrue: true,
|
|
|
}
|
|
|
},
|
|
|
props:{
|
|
|
title:{
|
|
|
type:String,
|
|
|
default:""
|
|
|
},
|
|
|
auditStatus:{
|
|
|
type:Number,
|
|
|
required: true
|
|
|
},
|
|
|
},
|
|
|
mounted(){
|
|
|
|
|
|
},
|
|
|
methods:{
|
|
|
// 弹出弹框
|
|
|
open(row,item){
|
|
|
this.showCK = true;
|
|
|
this.eventInfo = {...row}
|
|
|
this.backupsInfo = {...row}
|
|
|
if(item){
|
|
|
this.isTrue = true;
|
|
|
if(item.caseSerial) {
|
|
|
this.getListTwo(item.caseSerial);
|
|
|
} else {
|
|
|
this.getListTwo(item.resultId);
|
|
|
}
|
|
|
} else if(!item && this.eventInfo.msgType == '3'){
|
|
|
this.isTrue = false;
|
|
|
this.getList(row.innerEventId);
|
|
|
} else {
|
|
|
this.isTrue = false;
|
|
|
this.audioInfo = {...row}
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
this.initMap();
|
|
|
});
|
|
|
},
|
|
|
// 关闭弹框
|
|
|
close(){
|
|
|
this.showCK = false;
|
|
|
this.loading = false;
|
|
|
},
|
|
|
initMap(){
|
|
|
this.map = L.map("newmapTwo", {
|
|
|
// crs: L.CRS.Baidu,
|
|
|
center: [31.324624, 120.582904],
|
|
|
zoom: 12,
|
|
|
attributionControl: false,
|
|
|
zoomControl: false,
|
|
|
});
|
|
|
this.basemap = L.tileLayer.chinaProvider("GaoDe.Normal.Map", {
|
|
|
maxZoom: 14,
|
|
|
minZoom: 5,
|
|
|
});
|
|
|
this.map.addLayer(this.basemap);
|
|
|
|
|
|
this.map.createPane("mapLayer1");
|
|
|
this.map.getPane("mapLayer1").style.zIndex = 501;
|
|
|
this.map.getPane("mapLayer1").style.pointerEvents = "none";
|
|
|
|
|
|
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.map);
|
|
|
},
|
|
|
getList(id){
|
|
|
this.loading = true;
|
|
|
auditList(id).then(res=>{
|
|
|
this.audioInfo = {...res.data.records[0]};
|
|
|
if(this.audioInfo.caseLnglat) {
|
|
|
let iconUrl2 = require("@/assets/images/icon2.png");
|
|
|
// 事件有经纬度情况下
|
|
|
var myIcon2 = L.icon({
|
|
|
iconUrl: iconUrl2,
|
|
|
iconSize: [38, 50], // 图标图像的尺寸，单位是像素。
|
|
|
iconAnchor: [19, 29], // 图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
|
|
|
popupAnchor: [-3, -76], // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。
|
|
|
});
|
|
|
let lat = this.audioInfo.caseLnglat.split(",")[1];
|
|
|
let lon = this.audioInfo.caseLnglat.split(",")[0];
|
|
|
let marker = L.marker(
|
|
|
L.latLng(lat, lon),
|
|
|
{ icon: myIcon2 }
|
|
|
)
|
|
|
// .addTo(this.mapLayers.mapLayer1)
|
|
|
this.mapLayers.mapLayer1.addLayer(marker);
|
|
|
const bounds = this.mapLayers.mapLayer1.getBounds();
|
|
|
let center = bounds.getCenter();
|
|
|
this.map.setView(center, 12);
|
|
|
}
|
|
|
this.loading = false;
|
|
|
}).catch(err=>{
|
|
|
this.loading = false;
|
|
|
})
|
|
|
},
|
|
|
getListTwo(id){
|
|
|
this.loading = true;
|
|
|
getMassEvents(id).then(res=>{
|
|
|
this.audioInfo = {...res.data};
|
|
|
if(this.audioInfo.caseLnglat) {
|
|
|
let iconUrl2 = require("@/assets/images/icon2.png");
|
|
|
// 事件有经纬度情况下
|
|
|
var myIcon2 = L.icon({
|
|
|
iconUrl: iconUrl2,
|
|
|
iconSize: [38, 50], // 图标图像的尺寸，单位是像素。
|
|
|
iconAnchor: [19, 29], // 图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
|
|
|
popupAnchor: [-3, -76], // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。
|
|
|
});
|
|
|
let lat = this.audioInfo.caseLnglat.split(",")[1];
|
|
|
let lon = this.audioInfo.caseLnglat.split(",")[0];
|
|
|
let marker = L.marker(
|
|
|
L.latLng(lat, lon),
|
|
|
{ icon: myIcon2 }
|
|
|
)
|
|
|
// .addTo(this.mapLayers.mapLayer1)
|
|
|
this.mapLayers.mapLayer1.addLayer(marker);
|
|
|
const bounds = this.mapLayers.mapLayer1.getBounds();
|
|
|
let center = bounds.getCenter();
|
|
|
this.map.setView(center, 12);
|
|
|
}
|
|
|
// console.log(res,"res");
|
|
|
this.loading = false;
|
|
|
}).catch(err=>{
|
|
|
this.loading = false;
|
|
|
})
|
|
|
},
|
|
|
titleBlur(){
|
|
|
this.disabled = true;
|
|
|
if(this.backupsInfo.title !== this.eventInfo.title) {
|
|
|
// editTitle({title:this.eventInfo.title, innerEventId:this.eventInfo.innerEventId}).then(res=>{
|
|
|
// if(res.code == 200) {
|
|
|
// this.$message({
|
|
|
// type: "success",
|
|
|
// message: "标题修改成功!",
|
|
|
// });
|
|
|
// }
|
|
|
// })
|
|
|
}
|
|
|
},
|
|
|
// 上报驾驶舱/退回重训练
|
|
|
reported(id){
|
|
|
// console.log(this.multipleSelection);
|
|
|
// console.log(this.audioInfo.innerEventId);
|
|
|
this.$confirm(`确定要${id == 1 ? '重新上报驾驶舱' : id == 2 ? '退回重训练' : id == 3 ? '审核通过':''}吗?`, "警告", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
}).then(() => {
|
|
|
if(id !== 3) {
|
|
|
eventChangeIsReport({isReport:id,caseSerial:[this.audioInfo.caseSerial],innerEventId:this.eventInfo.innerEventId,newTitle:this.eventInfo.title,oldTitle:this.backupsInfo.title}).then(res=>{
|
|
|
// console.log(res);
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: id == 1 ? '已上报驾驶舱' : '已退回重训练' + "!",
|
|
|
});
|
|
|
this.$emit('closeDialog')
|
|
|
this.close();
|
|
|
})
|
|
|
} else {
|
|
|
if(this.backupsInfo.title !== this.eventInfo.title) {
|
|
|
this.$message.error(`您已修改标题，请上报驾驶舱或退回重训练`);
|
|
|
} else {
|
|
|
eventChangeIsReport({isReport:id,caseSerial:[this.audioInfo.caseSerial],innerEventId:this.eventInfo.innerEventId}).then(res=>{
|
|
|
// console.log(res);
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: "审核完成",
|
|
|
});
|
|
|
this.$emit('closeDialog')
|
|
|
this.close();
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 修改第二列样式
|
|
|
addStyle({row, column, rowIndex, columnIndex}) {
|
|
|
if(columnIndex === 2) {
|
|
|
return "columnFactor"
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
