Compare commits
4 Commits
prod-25-07
...
prod-25-06
| Author | SHA1 | Date | |
|---|---|---|---|
| dee9cd779a | |||
| 0b0749f04a | |||
| 61da53bfe0 | |||
| d1d246d871 |
@ -112,43 +112,3 @@ export function correctionHandle(data) {
|
|||||||
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 |
@ -251,22 +251,6 @@ const routes = [
|
|||||||
title:'车辆维保'
|
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',
|
path: '/maintenanceApplication',
|
||||||
name: 'maintenanceApplication',
|
name: 'maintenanceApplication',
|
||||||
|
|||||||
@ -25,7 +25,7 @@ service.interceptors.request.use(
|
|||||||
}
|
}
|
||||||
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
|
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
|
||||||
let token = localStorage.getItem('token');
|
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'
|
// let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJTSEhQWEIiLCJ1c2VySWQiOjU0NzI2LCJuYW1lIjoiI-a1i-ivleWwj-eZveeZvSIsInVzZXJOYW1lIjoiU0hIUFhCIiwic3VwcGxpZXJJZCI6MTAwMDE2NSwiZXhwIjoxNzQ0NTEwNzkwfQ.JPk0OA7slYJN3FIi_uhW4Y0CiWRvl6R1dK8MRTbyhD8'
|
||||||
if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
|
if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
|
||||||
if(token) {
|
if(token) {
|
||||||
|
|||||||
@ -48,10 +48,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="viewNum">{{detailInfo.attentionCount}}人想要<span>{{detailInfo.browseCount}}人浏览</span></div>
|
<div class="viewNum">{{detailInfo.attentionCount}}人想要<span>{{detailInfo.browseCount}}人浏览</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="price commonColor">
|
|
||||||
车源ID: {{ detailInfo.code }}
|
|
||||||
<img class="copyIcon" @click="copyHandler(detailInfo.code)" src="@/assets/copy.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="detailInfoWrap wrapCommon">
|
<div class="detailInfoWrap wrapCommon">
|
||||||
<div>
|
<div>
|
||||||
@ -182,16 +178,6 @@ export default {
|
|||||||
this.getDuration(1)
|
this.getDuration(1)
|
||||||
},
|
},
|
||||||
methods:{
|
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) {
|
showImagePreview(index) {
|
||||||
ImagePreview({
|
ImagePreview({
|
||||||
images: this.imgSrcList.map(item => item),
|
images: this.imgSrcList.map(item => item),
|
||||||
@ -288,7 +274,7 @@ export default {
|
|||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.titleWrap{
|
.titleWrap{
|
||||||
height: 120px;
|
height: 108px;
|
||||||
padding: 18px 0 15px 21px;
|
padding: 18px 0 15px 21px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -451,14 +437,4 @@ export default {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
}
|
}
|
||||||
.copyIcon {
|
|
||||||
width: 35px;
|
|
||||||
height: 15px;
|
|
||||||
margin-left: 10px
|
|
||||||
}
|
|
||||||
.commonColor {
|
|
||||||
color: #999999 !important;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -23,12 +23,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="viewNum">{{detailInfo.attentionCount}}人想卖<span>{{detailInfo.browseCount}}人浏览</span></div>
|
<div class="viewNum">{{detailInfo.attentionCount}}人想卖<span>{{detailInfo.browseCount}}人浏览</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="priceWrap">
|
|
||||||
<div class="commonColor" style="margin-top: 5px">
|
|
||||||
车源ID: {{ detailInfo.code }}
|
|
||||||
<img class="copyIcon" @click="copyHandler(detailInfo.code)" src="@/assets/copy.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="detailInfoWrap wrapCommon">
|
<div class="detailInfoWrap wrapCommon">
|
||||||
<div>
|
<div>
|
||||||
@ -107,16 +101,6 @@ export default {
|
|||||||
this.getDuration(1)
|
this.getDuration(1)
|
||||||
},
|
},
|
||||||
methods:{
|
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){
|
getDuration(type){
|
||||||
const endTime = new Date();
|
const endTime = new Date();
|
||||||
const duration = (endTime - this.startTime) / 1000; // 计算时长（秒）
|
const duration = (endTime - this.startTime) / 1000; // 计算时长（秒）
|
||||||
@ -306,14 +290,4 @@ export default {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.commonColor {
|
|
||||||
color: #999999 !important;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.copyIcon {
|
|
||||||
width: 35px;
|
|
||||||
height: 15px;
|
|
||||||
margin-left: 10px
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
Reference in New Issue
Block a user