416 lines
12 KiB
Vue
416 lines
12 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="alarm_info">
|
||
<div class="alarm_title">
|
||
<div class="title_left">
|
||
<span class="car_title">{{info.alarmTypeString}}</span>
|
||
<img class="alarm_level" v-if="info.level == 1" src="@/assets/alarm_one.png" alt="">
|
||
<img class="alarm_level" v-if="info.level == 2" src="@/assets/alarm_two.png" alt="">
|
||
<img class="alarm_level" v-if="info.level == 3" src="@/assets/alarm_three.png" alt="">
|
||
</div>
|
||
<div class="status">{{info.handStatusString}}</div>
|
||
</div>
|
||
<div class="content_list">
|
||
<div class="alarm_content">
|
||
<div class="label">报警时间:</div>
|
||
<div class="content">{{info.startTime}}</div>
|
||
</div>
|
||
<div class="alarm_content">
|
||
<div class="label">报警详情:</div>
|
||
<div class="content">{{info.alarmRemark}}</div>
|
||
</div>
|
||
<div class="alarm_content">
|
||
<div class="label">报警照片:</div>
|
||
<div class="content">
|
||
<img class="photo" v-if="info.url" :src="info.url" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="alarm_content">
|
||
<div class="label">报警通道:</div>
|
||
<div class="content content_flex">
|
||
<span>{{ info.plateNumber + '_' + (info?.channel || '') }} <!--浙A7H1M2_1--></span>
|
||
<span class="btn" @click="goAlarmMonitoring">查看监控</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alarm_info car_info">
|
||
<div class="car_title title">
|
||
车辆位置
|
||
</div>
|
||
<div class="car_map">
|
||
<div class="map_title">
|
||
<span class="driver_name">{{info.vehicleName}} / {{info.plateNumber}}</span>
|
||
<span class="driver_name">司机：{{info.onlineDriverName}} <a :href="'tel:' + info.onlinePhone">{{info.onlinePhone}}</a></span>
|
||
</div>
|
||
<div class="map_cover" id="container"></div>
|
||
</div>
|
||
</div>
|
||
<div class="deal_btn" v-if="[0, 3].includes(info.handStatus)" @click="dealWithShow = true">处理</div>
|
||
<van-popup v-model="dealWithShow" v-if="dealWithShow" round position="center">
|
||
<div class="dialog_wrap">
|
||
<div class="dialog_title">报警处理</div>
|
||
<div>
|
||
<van-radio-group v-model="radio" @change="change" class="horizontal-radio-group">
|
||
<van-radio v-for="item in radioList" :key="item.value" :name="item.value" :disabled="item.disabled" class="item">
|
||
<span :style="{ color: radio === item.value ? '#393230' : 'rgba(0, 0, 0, 0.5)' }">
|
||
{{ item.name }}
|
||
</span>
|
||
<img
|
||
slot="icon"
|
||
class="icon"
|
||
slot-scope="props"
|
||
:src="props.checked ? activeIcon : inactiveIcon"
|
||
>
|
||
</van-radio>
|
||
</van-radio-group>
|
||
<div class="alarm_tip" v-if="['1', '2', '3'].includes(String(info.alarmType))">
|
||
注：开始处理后将流转至技术支持进行处理。
|
||
</div>
|
||
<div class="alarm_text" v-if="radio == 5">
|
||
<textarea class="alarm_textarea" id="text-input" rows="6" placeholder="处理结果：" v-model.trim="remark"></textarea>
|
||
</div>
|
||
<div class="btn_wrap">
|
||
<div class="btn_confirm" @click="noMultipleClicks(operatorHandle)">确认</div>
|
||
<div class="btn_close" @click="dealWithShow = false">关闭</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import { getAlarmByCode, dealWithAlarm } from "@/api/order"
|
||
import trailerPosition from "@/assets/alarm_trailer.png";
|
||
import repairPosition from "@/assets/alarm_repair.png";
|
||
export default {
|
||
name: "vehicleAlarmDetail",
|
||
mixins: [ myMixins ],
|
||
data() {
|
||
return {
|
||
noClick: true,
|
||
map: null,
|
||
lng: 121.553376,
|
||
lat: 31.247998,
|
||
radio: '',
|
||
activeIcon: require('@/assets/alarm_check.png'),
|
||
inactiveIcon: require('@/assets/alarm_unCheck.png'),
|
||
dealWithShow: false,
|
||
radioList: [{ name: '开始处理', value: 3, disabled: false }, { name: '处理完成', value: 5, disabled: false }],
|
||
remark: '',
|
||
code: '',
|
||
info: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.code = this.$route.query.code;
|
||
this.getAlarmDetail();
|
||
this.initMap();
|
||
},
|
||
methods: {
|
||
// 新增方法：重置弹窗状态
|
||
resetPopupState() {
|
||
this.radio = '';
|
||
this.remark = '';
|
||
// 重置radioList状态
|
||
this.radioList = [
|
||
{ name: '开始处理', value: 3, disabled: false },
|
||
{ name: '处理完成', value: 5, disabled: false }
|
||
];
|
||
},
|
||
goAlarmMonitoring() {
|
||
let data = {
|
||
"action":"goMonitoring",
|
||
"params": {
|
||
"code": this.code
|
||
}
|
||
};
|
||
let u = navigator.userAgent;
|
||
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||
if(isiOS){
|
||
window.webkit.messageHandlers.nativeObject.postMessage(data);
|
||
}else {
|
||
window.android.sendMessage("code=" + this.code);
|
||
}
|
||
},
|
||
async operatorHandle() {
|
||
try {
|
||
await dealWithAlarm({
|
||
alarmId: this.info.id,
|
||
handleStatus: this.radio,
|
||
remark: this.remark
|
||
})
|
||
this.$toast('操作成功')
|
||
this.resetPopupState();
|
||
} finally {
|
||
this.dealWithShow = false;
|
||
await this.getAlarmDetail();
|
||
}
|
||
},
|
||
change(e) {
|
||
this.radio = e
|
||
},
|
||
async getAlarmDetail() {
|
||
let res = await getAlarmByCode({
|
||
code: this.code
|
||
});
|
||
if(!res.data) {
|
||
this.$router.push({
|
||
name: 'vehicleAlarmList',
|
||
params: {
|
||
token: localStorage.getItem('token')
|
||
},
|
||
replace: true // 关键：替换当前路由，而不是新增历史记录
|
||
});
|
||
return
|
||
}
|
||
this.info = res?.data;
|
||
// 每次获取详情时重置radioList
|
||
this.radioList = [
|
||
{ name: '开始处理', value: 3, disabled: false },
|
||
{ name: '处理完成', value: 5, disabled: false }
|
||
];
|
||
if( this.info.handStatus == 0 && ['1', '2', '3'].includes(String(this.info.alarmType))) { // 未处理，且需要技术处理
|
||
this.radio = this.radioList[0].value
|
||
this.radioList[1].disabled = true
|
||
}
|
||
if(this.info.handStatus == 3) {
|
||
this.radioList[0].disabled = true
|
||
}
|
||
},
|
||
initMap() {
|
||
this.map = new AMap.Map('container',{
|
||
zoom:14,//级别(缩放比例 3-20 )
|
||
center: [this.lng, this.lat],//中心点坐标
|
||
viewMode:'2D',//使用3D视图
|
||
})
|
||
this.map.on('complete', () => {
|
||
this.mapMarkers();
|
||
});
|
||
},
|
||
mapMarkers() {
|
||
let url = String(this.info.vehicleType) == '5' ? repairPosition : trailerPosition
|
||
let marker = new AMap.Marker({
|
||
position: [this.lng, this.lat],
|
||
icon: new AMap.Icon({
|
||
image: url, // 图片的相对路径
|
||
size: new AMap.Size(42, 50), // 图标的尺寸
|
||
imageSize: new AMap.Size(42, 50) // 图片的实际尺寸
|
||
}),
|
||
});
|
||
this.map.add(marker);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #F4F5F7 !important;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
padding: 0 12px;
|
||
box-sizing: border-box;
|
||
}
|
||
.alarm_info {
|
||
padding-top: 12px;
|
||
padding-bottom: 16px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 4px 0px rgba(39,52,125,0.05);
|
||
border-radius: 6px;
|
||
backdrop-filter: blur(5.602678571428572px);
|
||
margin-top: 10px;
|
||
.alarm_title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(233, 233, 234, 0.6);
|
||
padding: 3px 20px 10px 18px;
|
||
.title_left {
|
||
display: flex;
|
||
align-items: center;
|
||
.alarm_level {
|
||
width: 32px;
|
||
height: 14px;
|
||
margin-left: 7px;
|
||
}
|
||
}
|
||
.status {
|
||
font-size: 11px;
|
||
color: #FA8D14;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.content_list {
|
||
padding: 12px 18px 0px;
|
||
}
|
||
.alarm_content {
|
||
display: flex;
|
||
margin-bottom: 6px;
|
||
.content {
|
||
margin-left: 10px;
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.75);
|
||
flex: 1;
|
||
.btn {
|
||
/*display: inline-block;*/
|
||
padding: 5px 12px;
|
||
background: #FA8236;
|
||
border-radius: 3px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
.photo {
|
||
width: 75px;
|
||
height: 55px;
|
||
margin-right: 6px;
|
||
margin-bottom: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.label {
|
||
color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
.content_flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.car_title {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
.title {
|
||
padding-left: 18px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.car_info {
|
||
padding: 12px 4px 5px 4px;
|
||
}
|
||
.car_map {
|
||
width: 100%;
|
||
/*height: 204px;*/
|
||
border-radius: 4px;
|
||
border: 1px solid #F0F0F0;
|
||
background-color: #F9FCFF;
|
||
box-sizing: border-box;
|
||
.map_title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 8px 10px 15px;
|
||
.driver_name {
|
||
font-size: 12px;
|
||
color: #000000;
|
||
a {
|
||
color: #377BE6;
|
||
}
|
||
}
|
||
}
|
||
.map_cover {
|
||
width: 100%;
|
||
height: 174px;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
.deal_btn {
|
||
width: calc(100% - 38px);
|
||
height: 48px;
|
||
text-align: center;
|
||
line-height: 48px;
|
||
position: fixed;
|
||
bottom: 10px;
|
||
left: 19px;
|
||
font-size: 15px;
|
||
color: #fff;
|
||
background: #354D93;
|
||
border-radius: 5px;
|
||
}
|
||
.dialog_wrap {
|
||
width: 325px;
|
||
border-radius: 13px;
|
||
.dialog_title {
|
||
height: 68px;
|
||
line-height: 82px;
|
||
background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
|
||
font-size: 18px;
|
||
color: #E0481E;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
.horizontal-radio-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
margin-bottom: 15px;
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.item {
|
||
font-size: 14px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.alarm_tip {
|
||
font-size: 14px;
|
||
color: #FF5D3B;
|
||
margin: 10px 0 20px;
|
||
text-align: center;
|
||
}
|
||
.alarm_text {
|
||
width: 100%;
|
||
padding: 0 25px 15px;
|
||
box-sizing: border-box;
|
||
.alarm_textarea {
|
||
width: 100%;
|
||
background: #FFFBFB;
|
||
border-radius: 3px;
|
||
border: 1px solid #F97C64;
|
||
backdrop-filter: blur(10px);
|
||
padding: 10px;
|
||
color: #FF5D3B;
|
||
box-sizing: border-box;
|
||
}
|
||
.alarm_textarea::placeholder {
|
||
color: rgba(255, 93, 59, 0.8);
|
||
}
|
||
}
|
||
.btn_wrap {
|
||
.btn_confirm {
|
||
width: 173px;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
color: #FFFFFF;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
background: #F16363;
|
||
border-radius: 23px;
|
||
margin: 0 auto;
|
||
}
|
||
.btn_close {
|
||
margin-top: 12px;
|
||
margin-bottom: 22px;
|
||
font-size: 14px;
|
||
color: rgba(44, 65, 85, 0.6);
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
::v-deep .van-radio__icon {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
::v-deep .van-radio__label--disabled {
|
||
opacity: 0.5;
|
||
}
|
||
</style>
|