248 lines
6.5 KiB
Vue
248 lines
6.5 KiB
Vue
<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 flexLabel">车辆名称:</div>
|
|
<div class="content flexContent">{{item.vehicleName}}</div>
|
|
</div>
|
|
<div class="alarm_content">
|
|
<div class="label flexLabel">报警详情:</div>
|
|
<div class="content flexContent">{{item.alarmRemark}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-list>
|
|
</van-pull-refresh>
|
|
<div class="bgEmptyImg" v-show="show" >
|
|
<img src="@/assets/emptyData.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 handleStatus;
|
|
if( this.activeIndex == 2 ) {
|
|
handleStatus = 3
|
|
} else {
|
|
handleStatus = this.activeIndex
|
|
}
|
|
let res = await getAlarmList({
|
|
pageNum:this.pageNum,
|
|
pageSize:this.pageSize,
|
|
handStatus: handleStatus
|
|
})
|
|
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);
|
|
}
|
|
.flexLabel {
|
|
min-width: 50px;
|
|
flex-shrink: 0;
|
|
}
|
|
.flexContent {
|
|
flex: 1;
|
|
word-break: break-all;
|
|
}
|
|
.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>
|