first commit
This commit is contained in:
282
src/views/business/alarm/list.vue
Normal file
282
src/views/business/alarm/list.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<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" @handle="handle"/>
|
||||
<div class="list-wrapper">
|
||||
<div class="list-item" v-for="(item,index) in data" :key="item.id">
|
||||
<div class="time">
|
||||
{{ item.time }}
|
||||
<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.alarms }} ,请相关人员尽快前往协调
|
||||
</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'
|
||||
|
||||
const mapStore = useMapStore()
|
||||
const tabs = [
|
||||
{
|
||||
label: '无船号',
|
||||
value: 'monitor'
|
||||
},
|
||||
{
|
||||
label: '有船号',
|
||||
value: 'plane'
|
||||
}
|
||||
]
|
||||
const current = ref(1)
|
||||
const data = ref([])
|
||||
|
||||
const isFold = ref(false)
|
||||
|
||||
const initData = () => {
|
||||
data.value = [
|
||||
{
|
||||
id: 1,
|
||||
time: '2025-11-23 09:37:25',
|
||||
boatName: '浙渔BHI90',
|
||||
alarms: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
time: '2025-11-23 09:37:25',
|
||||
boatName: '浙渔BHI90',
|
||||
alarms: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
time: '2025-11-23 09:37:25',
|
||||
boatName: '浙渔BHI90',
|
||||
alarms: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
time: '2025-11-23 09:37:25',
|
||||
boatName: '浙渔BHI90',
|
||||
alarms: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
time: '2025-11-23 09:37:25',
|
||||
boatName: '浙渔BHI90',
|
||||
alarms: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
time: '2025-11-23 09:37:25',
|
||||
boatName: '浙渔BHI90',
|
||||
alarms: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
time: '2025-11-23 09:37:25',
|
||||
boatName: '浙渔BHI90',
|
||||
alarms: '未穿救生衣预警，未封仓预警，未悬挂国旗'
|
||||
}
|
||||
]
|
||||
}
|
||||
const toggleFold = () => {
|
||||
isFold.value = !isFold.value
|
||||
}
|
||||
const toggle = (index) => {
|
||||
current.value = index
|
||||
}
|
||||
const handle = (type, item) => {
|
||||
switch (type) {
|
||||
case 'more':
|
||||
mapStore.updateDialog('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>
|
||||
Reference in New Issue
Block a user