4 Commits

15 changed files with 2 additions and 722 deletions

View File

@ -112,43 +112,3 @@ export function correctionHandle(data) {
data
})
}
// 获取报警列表
export function getAlarmList(data) {
return request({
url: '/supplierAppV2/dispatchApp/alarm/alarmList',
method:'POST',
contentType: 'application/json',
data
})
}
// 获取报警数目
export function getAlarmCount(data) {
return request({
url: '/supplierAppV2/dispatchApp/alarm/alarmCount',
method:'POST',
data
})
}
// 获取报警详情
export function getAlarmByCode(data) {
return request({
url: '/supplierAppV2/dispatchApp/alarm/getAlarmByCode',
method:'POST',
data
})
}
// 处理报警
export function dealWithAlarm(data) {
return request({
url: '/supplierAppV2/dispatchApp/alarm/handAlarm',
method:'POST',
data
})
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 785 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 770 B

View File

@ -251,22 +251,6 @@ const routes = [
title:'车辆维保'
}
},
{
path: '/vehicleAlarmList',
name: 'vehicleAlarmList',
component:()=>import('@/views/vehicle-maintenance/vehicle-alarm-list.vue'),
meta: {
title:'车辆报警'
}
},
{
path: '/vehicleAlarmDetail',
name: 'vehicleAlarmDetail',
component:()=>import('@/views/vehicle-maintenance/vehicle-alarm-detail.vue'),
meta: {
title:'报警详情'
}
},
{
path: '/maintenanceApplication',
name: 'maintenanceApplication',

View File

@ -25,7 +25,7 @@ service.interceptors.request.use(
}
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
let token = localStorage.getItem('token');
// let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBTkNIQU5HIiwidXNlcklkIjo0NTY3MSwibmFtZSI6IuWuieeVhSIsInVzZXJOYW1lIjoiQU5DSEFORyIsInN1cHBsaWVySWQiOjExMjgsImlzWmQiOjAsImV4cCI6MTc1NTQyMjUyNX0.xzDZhaANJFnbeViIHJA0SEtOyTv7Ja3rKmXqRKRuFkc'
// let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBTkNIQU5HIiwidXNlcklkIjo0NTY3MSwibmFtZSI6IuWuieeVhSIsInVzZXJOYW1lIjoiQU5DSEFORyIsInN1cHBsaWVySWQiOjExMjgsImlzWmQiOjAsImV4cCI6MTc1MjEzNDc2M30.q1O7C8thZzEMVKYDhBQ-N_14Fh9Bqejj7j11EKLF5Aw'
// let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJTSEhQWEIiLCJ1c2VySWQiOjU0NzI2LCJuYW1lIjoiI-a1i-ivleWwj-eZveeZvSIsInVzZXJOYW1lIjoiU0hIUFhCIiwic3VwcGxpZXJJZCI6MTAwMDE2NSwiZXhwIjoxNzQ0NTEwNzkwfQ.JPk0OA7slYJN3FIi_uhW4Y0CiWRvl6R1dK8MRTbyhD8'
if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
if(token) {

View File

@ -48,10 +48,6 @@
</div>
<div class="viewNum">{{detailInfo.attentionCount}}人想要<span>{{detailInfo.browseCount}}人浏览</span></div>
</div>
<div class="price commonColor">
车源ID: &nbsp;&nbsp;&nbsp;&nbsp;{{ detailInfo.code }}
<img class="copyIcon" @click="copyHandler(detailInfo.code)" src="@/assets/copy.png" />
</div>
</div>
<div class="detailInfoWrap wrapCommon">
<div>
@ -182,16 +178,6 @@ export default {
this.getDuration(1)
},
methods:{
copyHandler(copyText){
let inputNode = document.createElement('input') // 创建input
inputNode.value = copyText // 赋值给 input 值
document.body.appendChild(inputNode) // 插入进去
inputNode.select() // 选择对象
document.execCommand('Copy') // 原生调用执行浏览器复制命令
inputNode.className = 'oInput'
inputNode.style.display = 'none' // 隐藏
this.$toast('复制成功')
},
showImagePreview(index) {
ImagePreview({
images: this.imgSrcList.map(item => item),
@ -288,7 +274,7 @@ export default {
margin-bottom: 12px;
}
.titleWrap{
height: 120px;
height: 108px;
padding: 18px 0 15px 21px;
display: flex;
flex-direction: column;
@ -451,14 +437,4 @@ export default {
object-fit: cover;
object-position: center;
}
.copyIcon {
width: 35px;
height: 15px;
margin-left: 10px
}
.commonColor {
color: #999999 !important;
display: flex;
align-items: center;
}
</style>

View File

@ -23,12 +23,6 @@
</div>
<div class="viewNum">{{detailInfo.attentionCount}}人想卖<span>{{detailInfo.browseCount}}人浏览</span></div>
</div>
<div class="priceWrap">
<div class="commonColor" style="margin-top: 5px">
车源ID: &nbsp;&nbsp;&nbsp;&nbsp;{{ detailInfo.code }}
<img class="copyIcon" @click="copyHandler(detailInfo.code)" src="@/assets/copy.png" />
</div>
</div>
</div>
<div class="detailInfoWrap wrapCommon">
<div>
@ -107,16 +101,6 @@ export default {
this.getDuration(1)
},
methods:{
copyHandler(copyText){
let inputNode = document.createElement('input') // 创建input
inputNode.value = copyText // 赋值给 input 值
document.body.appendChild(inputNode) // 插入进去
inputNode.select() // 选择对象
document.execCommand('Copy') // 原生调用执行浏览器复制命令
inputNode.className = 'oInput'
inputNode.style.display = 'none' // 隐藏
this.$toast('复制成功')
},
getDuration(type){
const endTime = new Date();
const duration = (endTime - this.startTime) / 1000; // 计算时长(秒)
@ -306,14 +290,4 @@ export default {
cursor: pointer;
}
}
.commonColor {
color: #999999 !important;
display: flex;
align-items: center;
}
.copyIcon {
width: 35px;
height: 15px;
margin-left: 10px
}
</style>

View File

@ -1,381 +0,0 @@
<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">查看监控</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: {
async operatorHandle() {
try {
await dealWithAlarm({
alarmId: this.info.id,
handleStatus: this.radio,
remark: this.remark
})
this.$toast('操作成功')
} 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',
replace: true // 关键:替换当前路由,而不是新增历史记录
});
}
this.info = res?.data;
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>

View File

@ -1,233 +0,0 @@
<template>
<div class="wrap">
<div class="tab_wrap">
<div class="item_wrap" v-for="(item, index) in tabArr" :key="index" @click="changeTab(index)">
<span class="alpha" :class="{'active' : activeIndex == index }"> {{ item.name }}</span>
<span class="numTip" style="opacity: 1 !important;" v-if="item.num > 0">{{item.num}}</span>
</div>
</div>
<van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="content_wrap">
<div class="alarm_wrap" v-for="(item, index) in pageList" :key="index" @click="goDetail(item)">
<div class="alarm_title">
<div class="title_left">
<span>{{item.alarmTypeString}}</span>
<img class="alarm_level" v-if="item.level == 1" src="@/assets/alarm_one.png" alt="">
<img class="alarm_level" v-if="item.level == 2" src="@/assets/alarm_two.png" alt="">
<img class="alarm_level" v-if="item.level == 3" src="@/assets/alarm_three.png" alt="">
</div>
<div class="label">{{item.startTime}}</div>
</div>
<div class="alarm_content">
<div class="label">车辆名称:</div>
<div class="content">{{item.vehicleName}}</div>
</div>
<div class="alarm_content">
<div class="label">报警详情:</div>
<div class="content">{{item.alarmRemark}}</div>
</div>
</div>
</div>
</van-list>
</van-pull-refresh>
<div class="bgEmptyImg" v-show="show" >
<img src="@/assets/empty.png" />
</div>
</div>
</template>
<script>
import {myMixins} from "@/utils/myMixins"
import { getAlarmList, getAlarmCount } from "@/api/order"
export default {
name: "vehicleAlarmList",
data() {
return {
tabArr: [{ name: '未处理', num: 0 }, { name: '技术处理中', num: 0 }, {name: '处理中', num: 1 }],
activeIndex: 0,
pageNum:1,
pageSize:10,
total:'',
pageList: [],
isLoading: '',
loading: false,
finished: false,
}
},
mixins: [ myMixins ],
computed:{
show() {
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
},
},
async mounted() {
await this.getList()
},
methods: {
goDetail(item) {
this.goPage('vehicleAlarmDetail', { code: item.code })
},
async getCount() {
let res = await getAlarmCount();
this.tabArr[0].num = res?.data?.alarmCount || 0
this.tabArr[1].num = res?.data?.jxCount || 0
this.tabArr[2].num = res?.data?.yyCount || 0
},
async changeTab(index) {
this.activeIndex = index
this.pageNum = 1
this.pageList = [];
this.total= 0
await this.getList()
},
async getList() {
let res = await getAlarmList({
pageNum:this.pageNum,
pageSize:this.pageSize,
handStatus: this.activeIndex
})
this.total = res.total
if(this.pageNum == 1){// 第一页直接赋值
this.pageList=res.data
}else{// 第二页数据拼接
let preList = this.pageList;
let arr = res.data;
this.pageList = preList.concat(arr)
}
await this.getCount();
},
async onLoad(){
this.pageNum++;
await this.getList()
this.loading = false;
if (this.pageList.length >= this.total) {
this.finished = true;
}
},
async onRefresh() {
this.pageNum=1
await this.getList()
setTimeout(() => {
this.$toast('刷新成功');
this.isLoading = false;
}, 1000);
},
}
}
</script>
<style scoped lang="scss">
.wrap{
width: 100%;
height: 100%;
background-color: #F4F5F7 !important;
box-sizing: border-box;
overflow-y: auto;
}
.tab_wrap {
display: flex;
justify-content: space-around;
padding-top: 15px;
padding-bottom: 10px;
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #F4F5F7;
z-index: 100;
.item_wrap {
display: flex;
align-items: center;
}
.alpha {
color: rgba(115, 115, 115, 0.7);
font-size: 13px;
line-height: 13px;
}
.active {
font-size: 14px;
color: #3678FF;
position: relative;
}
.active:after {
content: '';
display: block;
width: 18px;
height: 3px;
background: linear-gradient( 270deg, #33A3FF 0%, #176AFE 100%);
border-radius: 2px;
position: absolute;
margin-top: 3px;
left: 50%;
transform: translateX(-50%);
}
.numTip {
border-radius: 4px;
background: #F95B45;
display: inline-block;
padding: 2px 4px;
font-weight: 600;
font-size: 11px;
color: #FFFFFF;
margin-left: 5px;
}
}
.content_wrap {
padding: 50px 12px 0;
.alarm_wrap {
margin-top: 10px;
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
border-radius: 6px;
padding: 13px 13px 17px 18px;
box-sizing: border-box;
.alarm_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.label {
color: rgba(0, 0, 0, 0.5);
}
.title_left {
display: flex;
align-items: center;
span {
font-size: 14px;
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
}
.alarm_level {
width: 32px;
height: 14px;
margin-left: 7px;
}
}
.alarm_content {
display: flex;
margin-top: 10px;
.content {
margin-left: 10px;
font-size: 13px;
color: rgba(0, 0, 0, 0.75);
}
}
}
}
.bgEmptyImg{
display: flex;
align-items: center;
justify-content: center;
height: 90% ;
background-color: #F4F5F7;
img{
width: 100%;
}
}
</style>