269 lines
7.0 KiB
Vue
269 lines
7.0 KiB
Vue
<template>
|
|
<div class="emergency-list-wrapper">
|
|
<div :class="['alarm-content', isFold ? 'fold' : '']">
|
|
<div class="tab-wrapper">
|
|
<div :class="['tab-button', current === index ? 'active' : '']" v-for="(item, index) in tabs" :key="index"
|
|
@click="toggle(index)">{{ item.label }}</div>
|
|
</div>
|
|
<div>
|
|
<SubtitleComponent title="告警列表" :more="true" element-loading-text="拼命加载中" @handle="handle"/>
|
|
<div v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.8)" class="list-wrapper">
|
|
<div class="list-item" v-for="(item,index) in data" :key="item.id">
|
|
<div class="time">
|
|
{{ item.createAt }}
|
|
<img src="@/assets/images/alarm/time-more.png" alt="">
|
|
</div>
|
|
<div class="content">
|
|
<div class="index">{{ (index + 1).toString().padStart(2, '0') }}</div>
|
|
<div class="info">
|
|
{{ item.boatName }} - {{ item.illegalType }} ,请相关人员尽快前往协调
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fold-button" @click="toggleFold()">
|
|
<template v-if="isFold">
|
|
<img src="@/assets/images/common/icon-arrow-right.png" alt="">
|
|
<div>展开</div>
|
|
</template>
|
|
<template v-else>
|
|
<img src="@/assets/images/common/icon-arrow-left.png" alt="">
|
|
<div>收起</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import SubtitleComponent from '@/components/SubtItle/index.vue'
|
|
import { reactive, ref } from 'vue'
|
|
import useMapStore from '@/store/modules/map'
|
|
import { videoIdentificationPage } from '@/api/identification.js'
|
|
|
|
const mapStore = useMapStore()
|
|
const tabs = [
|
|
{
|
|
label: '无船号',
|
|
value: 'monitor'
|
|
},
|
|
{
|
|
label: '有船号',
|
|
value: 'plane'
|
|
}
|
|
|
|
]
|
|
const current = ref(1)
|
|
const data = ref([])
|
|
|
|
const isFold = ref(false)
|
|
const isLoading = ref(false)
|
|
|
|
const initData = () => {
|
|
|
|
// 为了撑起来框架
|
|
data.value = [
|
|
{
|
|
id: 1,
|
|
createAt: '2025-11-23 09:37:25',
|
|
boatName: '浙渔BHI90',
|
|
illegalType: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
|
}
|
|
]
|
|
isLoading.value = true
|
|
const params = {
|
|
isHasBoatName: current.value == 1 ? 1 : 2,
|
|
pageNo: 1,
|
|
pageSize: 20
|
|
}
|
|
videoIdentificationPage(params).then(res => {
|
|
if(res.success) {
|
|
data.value = res.result.records
|
|
}else {
|
|
ElMessage.error(res.result)
|
|
}
|
|
isLoading.value = false
|
|
})
|
|
|
|
}
|
|
const toggleFold = () => {
|
|
isFold.value = !isFold.value
|
|
}
|
|
const toggle = (index) => {
|
|
current.value = index
|
|
|
|
initData()
|
|
}
|
|
const handle = (type, item) => {
|
|
switch (type) {
|
|
case 'more':
|
|
mapStore.updateDialog({ visible: true, type: 'alarm' })
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
initData()
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.emergency-list-wrapper{
|
|
position: absolute;
|
|
top: 98px;
|
|
left: 40px;
|
|
bottom: 42px;
|
|
.alarm-content {
|
|
width: 488px;
|
|
height: 100%;
|
|
padding: 20px 20px 10px;
|
|
background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.6) 100%);
|
|
border-radius: 0px 0px 0px 0px;
|
|
border: 1px solid;
|
|
border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
gap: 6px;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: all 0.3s ease-in-out;
|
|
font-family: SHSCN;
|
|
&.fold {
|
|
width: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
.tab-wrapper {
|
|
height: 100%;
|
|
margin-right: 20px;
|
|
.tab-button {
|
|
width: 28px;
|
|
position: relative;
|
|
height: 180px;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
align-items: center;
|
|
display: flex;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
margin-bottom: -47px;
|
|
background-image: url('@/assets/images/alarm/tab-background-first.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
&.active {
|
|
background-image: url('@/assets/images/alarm/tab-background-active-first.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
&:not(:first-of-type) {
|
|
background-image: url('@/assets/images/alarm/tab-background.png');
|
|
&.active {
|
|
background-image: url('@/assets/images/alarm/tab-background-active.png');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
overflow: auto;
|
|
background: transparent;
|
|
margin-top: 20px;
|
|
height: calc(100% - 58px);
|
|
.list-item {
|
|
width: 100%;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
color: #E1F1FAFF;
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(24, 128, 254, 0);
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
height: 99px;
|
|
background: rgba(46,164,240,0.1);
|
|
border-radius: 6px 6px 6px 6px;
|
|
.time{
|
|
font-size: 18px;
|
|
color: #0FC8F6;
|
|
line-height: 27px;
|
|
display: flex;
|
|
align-items: center;
|
|
img{
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
.content{
|
|
display: flex;
|
|
gap: 4px;
|
|
.index,.info{
|
|
background: rgba(66,171,191,0.2);
|
|
font-size: 14px;
|
|
height: 52px;
|
|
&:nth-of-type(3){
|
|
background: rgba(255,145,31,0.2);
|
|
}
|
|
}
|
|
.index{
|
|
border-left: 2px solid #3CD0ED;
|
|
font-family: SHSCM;
|
|
width: 32px;
|
|
text-align: center;
|
|
line-height: 52px;
|
|
}
|
|
.info{
|
|
width: calc(100% - 32px);
|
|
padding: 6px 13px;
|
|
box-sizing: border-box;
|
|
line-height: 20px;
|
|
background-image: url('@/assets/images/alarm/alarm-info-background.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
&:nth-of-type(3){
|
|
.content{
|
|
.index,.info{
|
|
background: rgba(255,145,31,0.2);
|
|
}
|
|
.index{
|
|
border-left: 2px solid #FF911F;
|
|
}
|
|
.info{
|
|
background-image: url('@/assets/images/alarm/alarm-info-background-other.png');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.fold-button {
|
|
position: absolute;
|
|
right: -17px;
|
|
top: 0;
|
|
width: 17px;
|
|
height: 82px;
|
|
background-image: url('@/assets/images/common/subscript-background-vertical.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
color: #FFFFFFCC;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
visibility: visible;
|
|
&.disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
div{
|
|
width: min-content;
|
|
}
|
|
}
|
|
}
|
|
</style>
|