story#6735 中道救援系统及调度APP中新增报警模块 接口
This commit is contained in:
@ -112,3 +112,43 @@ 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
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
src/assets/alarm_repair.png
Normal file
BIN
src/assets/alarm_repair.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/alarm_trailer.png
Normal file
BIN
src/assets/alarm_trailer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -3,36 +3,32 @@
|
||||
<div class="alarm_info">
|
||||
<div class="alarm_title">
|
||||
<div class="title_left">
|
||||
<span class="car_title">设备离线</span>
|
||||
<!-- <img class="alarm_level" src="@/assets/alarm_one.png" alt="">-->
|
||||
<!-- <img class="alarm_level" src="@/assets/alarm_two.png" alt="">-->
|
||||
<img class="alarm_level" src="@/assets/alarm_three.png" alt="">
|
||||
<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">未处理</div>
|
||||
<div class="status">{{info.handStatusString}}</div>
|
||||
</div>
|
||||
<div class="content_list">
|
||||
<div class="alarm_content">
|
||||
<div class="label">报警时间:</div>
|
||||
<div class="content">2025-06-18 10:00</div>
|
||||
<div class="content">{{info.startTime}}</div>
|
||||
</div>
|
||||
<div class="alarm_content">
|
||||
<div class="label">报警详情:</div>
|
||||
<div class="content">APP未到达C点，车斗状态识别为空车</div>
|
||||
<div class="content">{{info.alarmRemark}}</div>
|
||||
</div>
|
||||
<div class="alarm_content">
|
||||
<div class="label">报警照片:</div>
|
||||
<div class="content">
|
||||
<img class="photo" src="@/assets/love.jpg" alt="">
|
||||
<img class="photo" src="@/assets/love.jpg" alt="">
|
||||
<img class="photo" src="@/assets/love.jpg" alt="">
|
||||
<img class="photo" src="@/assets/love.jpg" alt="">
|
||||
<img class="photo" src="@/assets/love.jpg" alt="">
|
||||
<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>浙A7H1M2_1</span>
|
||||
<span>{{ info.plateNumber + '_' + (info?.channel || '') }} <!--浙A7H1M2_1--></span>
|
||||
<span class="btn">查看监控</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,31 +40,105 @@
|
||||
</div>
|
||||
<div class="car_map">
|
||||
<div class="map_title">
|
||||
<span class="driver_name">GZ103大板 / 粤A10111</span>
|
||||
<span class="driver_name">司机：杨建 <a href="tel:181027411111">181027411111</a></span>
|
||||
<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">处理</div>
|
||||
<div class="deal_btn" v-if="[0, 3].includes(info.handStatus)" @click="dealWithShow = true">处理</div>
|
||||
<van-popup v-model="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_text">
|
||||
<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 minePosition from "@/assets/realApoint.png";
|
||||
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 == 3) {
|
||||
this.radioList[0].disabled = true
|
||||
}
|
||||
|
||||
},
|
||||
initMap() {
|
||||
this.map = new AMap.Map('container',{
|
||||
zoom:14,//级别(缩放比例 3-20 )
|
||||
@ -80,12 +150,13 @@
|
||||
});
|
||||
},
|
||||
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: minePosition, // 图片的相对路径
|
||||
size: new AMap.Size(43, 43), // 图标的尺寸
|
||||
imageSize: new AMap.Size(43, 43) // 图片的实际尺寸
|
||||
image: url, // 图片的相对路径
|
||||
size: new AMap.Size(42, 50), // 图标的尺寸
|
||||
imageSize: new AMap.Size(42, 50) // 图片的实际尺寸
|
||||
}),
|
||||
});
|
||||
this.map.add(marker);
|
||||
@ -219,4 +290,78 @@
|
||||
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;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.item {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.alarm_text {
|
||||
width: 100%;
|
||||
padding: 15px 25px;
|
||||
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>
|
||||
|
||||
@ -6,40 +6,79 @@
|
||||
<span class="numTip" style="opacity: 1 !important;" v-if="item.num > 0">{{item.num}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_wrap">
|
||||
<div class="alarm_wrap" v-for="i in 6" :key="i">
|
||||
<div class="alarm_title">
|
||||
<div class="title_left">
|
||||
<span>设备离线 {{i}}</span>
|
||||
<!-- <img class="alarm_level" src="@/assets/alarm_one.png" alt="">-->
|
||||
<!-- <img class="alarm_level" src="@/assets/alarm_two.png" alt="">-->
|
||||
<img class="alarm_level" src="@/assets/alarm_three.png" alt="">
|
||||
<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 class="label">2025-06-18 10:00</div>
|
||||
</div>
|
||||
<div class="alarm_content">
|
||||
<div class="label">车辆名称:</div>
|
||||
<div class="content">GZ103大板</div>
|
||||
</div>
|
||||
<div class="alarm_content">
|
||||
<div class="label">报警详情:</div>
|
||||
<div class="content">APP未到达C点，车斗状态识别为空车</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: '未处理', status: 2, num: 6 }, { name: '技术处理中', status: 2, num: 0 }, {name: '处理中', status: 2, num: 3 }],
|
||||
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
|
||||
@ -47,8 +86,37 @@
|
||||
this.total= 0
|
||||
await this.getList()
|
||||
},
|
||||
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);
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -71,6 +139,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #F4F5F7;
|
||||
z-index: 100;
|
||||
.item_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -150,4 +219,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bgEmptyImg{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 90% ;
|
||||
background-color: #F4F5F7;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user