story#6735 task#7361 车辆报警列表静态页
This commit is contained in:
BIN
src/assets/alarm_one.png
Normal file
BIN
src/assets/alarm_one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/alarm_three.png
Normal file
BIN
src/assets/alarm_three.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/alarm_two.png
Normal file
BIN
src/assets/alarm_two.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -251,6 +251,14 @@ const routes = [
|
|||||||
title:'车辆维保'
|
title:'车辆维保'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/vehicleAlarmList',
|
||||||
|
name: 'vehicleAlarmList',
|
||||||
|
component:()=>import('@/views/vehicle-maintenance/vehicle-alarm-list.vue'),
|
||||||
|
meta: {
|
||||||
|
title:'车辆报警'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/maintenanceApplication',
|
path: '/maintenanceApplication',
|
||||||
name: 'maintenanceApplication',
|
name: 'maintenanceApplication',
|
||||||
|
|||||||
153
src/views/vehicle-maintenance/vehicle-alarm-list.vue
Normal file
153
src/views/vehicle-maintenance/vehicle-alarm-list.vue
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
<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>
|
||||||
|
<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="">
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "vehicleAlarmList",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabArr: [{ name: '未处理', status: 2, num: 6 }, { name: '技术处理中', status: 2, num: 0 }, {name: '处理中', status: 2, num: 3 }],
|
||||||
|
activeIndex: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async changeTab(index) {
|
||||||
|
this.activeIndex = index
|
||||||
|
this.pageNum = 1
|
||||||
|
this.pageList = [];
|
||||||
|
this.total= 0
|
||||||
|
await this.getList()
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user