qichengbin/erqi-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交对接的接口

Browse Source
This commit is contained in:
Digo
2025-12-26 01:13:15 +08:00
parent a7f2ed7c8a
commit 092d1d1505
1 changed files with 100 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/business/alarm/list.vue
View File

@@ -2,21 +2,45 @@
<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
: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">
<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"
:class="{ selected: isSelected(item) }"
v-for="(item, index) in data"
:key="item.id"
@click="selectItem(item)"
>
<div class="time">
{{ item.createAt }}
<img src="@/assets/images/alarm/time-more.png" alt="">
<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="index">
{{ (index + 1).toString().padStart(2, "0") }}
</div>
<div class="info">
{{ item.boatName }} - {{ item.illegalType }} ,请相关人员尽快前往协调
{{ item.boatName }} -
{{ item.illegalType }} ,请相关人员尽快前往协调
</div>
</div>
</div>
@@ -25,11 +49,11 @@
</div>
<div class="fold-button" @click="toggleFold()">
<template v-if="isFold">
<img src="@/assets/images/common/icon-arrow-right.png" alt="">
<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="">
<img src="@/assets/images/common/icon-arrow-left.png" alt="" />
<div>收起</div>
</template>
</div>
@@ -51,7 +75,6 @@ const tabs = [
label: '有船号',
value: 'plane'
}
]
const current = ref(1)
const data = ref([])
@@ -60,7 +83,6 @@ const isFold = ref(false)
const isLoading = ref(false)
const initData = () => {
// 为了撑起来框架
data.value = [
{
@@ -76,7 +98,7 @@ const initData = () => {
pageNo: 1,
pageSize: 20
}
videoIdentificationPage(params).then(res => {
videoIdentificationPage(params).then((res) => {
if (res.success) {
data.value = res.result.records
} else {
@@ -84,7 +106,6 @@ const initData = () => {
}
isLoading.value = false
})
}
const toggleFold = () => {
isFold.value = !isFold.value
@@ -103,6 +124,20 @@ const handle = (type, item) => {
break
}
}
// 在 script setup 中添加
const selectedItemId = ref(null) // 记录选中的项目ID
// 判断是否选中
const isSelected = (item) => {
return selectedItemId.value === item.id
}
// 更新选中状态的方法
const selectItem = (item) => {
selectedItemId.value = item.id === selectedItemId.value ? null : item.id
}
initData()
</script>
<style scoped lang="scss">
@@ -115,10 +150,15 @@ initData()
width: 488px;
height: 100%;
padding: 20px 20px 10px;
background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.6) 100%);
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;
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;
@@ -139,7 +179,7 @@ initData()
width: 28px;
position: relative;
height: 180px;
color: #FFFFFF;
color: #ffffff;
font-size: 16px;
text-align: center;
align-items: center;
@@ -147,18 +187,18 @@ initData()
line-height: 20px;
cursor: pointer;
margin-bottom: -47px;
background-image: url('@/assets/images/alarm/tab-background-first.png');
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-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');
background-image: url("@/assets/images/alarm/tab-background.png");
&.active {
background-image: url('@/assets/images/alarm/tab-background-active.png');
background-image: url("@/assets/images/alarm/tab-background-active.png");
}
}
}
@@ -176,7 +216,7 @@ initData()
width: 100%;
padding: 10px;
font-size: 14px;
color: #E1F1FAFF;
color: #e1f1faff;
box-sizing: border-box;
border: 1px solid rgba(24, 128, 254, 0);
flex-shrink: 0;
@@ -186,7 +226,7 @@ initData()
border-radius: 6px 6px 6px 6px;
.time {
font-size: 18px;
color: #0FC8F6;
color: #0fc8f6;
line-height: 27px;
display: flex;
align-items: center;
@@ -197,7 +237,8 @@ initData()
.content {
display: flex;
gap: 4px;
.index,.info{
.index,
.info {
background: rgba(66, 171, 191, 0.2);
font-size: 14px;
height: 52px;
@@ -206,7 +247,7 @@ initData()
}
}
.index {
border-left: 2px solid #3CD0ED;
border-left: 2px solid #3cd0ed;
font-family: SHSCM;
width: 32px;
text-align: center;
@@ -217,21 +258,22 @@ initData()
padding: 6px 13px;
box-sizing: border-box;
line-height: 20px;
background-image: url('@/assets/images/alarm/alarm-info-background.png');
background-image: url("@/assets/images/alarm/alarm-info-background.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
&:nth-of-type(3){
&.selected {
.content {
.index,.info{
.index,
.info {
background: rgba(255, 145, 31, 0.2);
}
.index {
border-left: 2px solid #FF911F;
border-left: 2px solid #ff911f;
}
.info {
background-image: url('@/assets/images/alarm/alarm-info-background-other.png');
background-image: url("@/assets/images/alarm/alarm-info-background-other.png");
}
}
}
@@ -244,10 +286,10 @@ initData()
top: 0;
width: 17px;
height: 82px;
background-image: url('@/assets/images/common/subscript-background-vertical.png');
background-image: url("@/assets/images/common/subscript-background-vertical.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #FFFFFFCC;
color: #ffffffcc;
font-size: 12px;
cursor: pointer;
display: flex;