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

merge

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

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

@@ -2,21 +2,45 @@
<div class="emergency-list-wrapper"> <div class="emergency-list-wrapper">
<div :class="['alarm-content', isFold ? 'fold' : '']"> <div :class="['alarm-content', isFold ? 'fold' : '']">
<div class="tab-wrapper"> <div class="tab-wrapper">
<div :class="['tab-button', current === index ? 'active' : '']" v-for="(item, index) in tabs" :key="index" <div
@click="toggle(index)">{{ item.label }}</div> :class="['tab-button', current === index ? 'active' : '']"
v-for="(item, index) in tabs"
:key="index"
@click="toggle(index)"
>
{{ item.label }}
</div>
</div> </div>
<div> <div>
<SubtitleComponent title="告警列表" :more="true" element-loading-text="拼命加载中" @handle="handle"/> <SubtitleComponent
<div v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.8)" class="list-wrapper"> title="告警列表"
<div class="list-item" v-for="(item,index) in data" :key="item.id"> :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"> <div class="time">
{{ item.createAt }} {{ item.createAt }}
<img src="@/assets/images/alarm/time-more.png" alt=""> <img src="@/assets/images/alarm/time-more.png" alt="" />
</div> </div>
<div class="content"> <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"> <div class="info">
{{ item.boatName }} - {{ item.illegalType }} ,请相关人员尽快前往协调 {{ item.boatName }} -
{{ item.illegalType }} ,请相关人员尽快前往协调
</div> </div>
</div> </div>
</div> </div>
@@ -25,11 +49,11 @@
</div> </div>
<div class="fold-button" @click="toggleFold()"> <div class="fold-button" @click="toggleFold()">
<template v-if="isFold"> <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> <div>展开</div>
</template> </template>
<template v-else> <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> <div>收起</div>
</template> </template>
</div> </div>
@@ -51,7 +75,6 @@ const tabs = [
label: '有船号', label: '有船号',
value: 'plane' value: 'plane'
} }
] ]
const current = ref(1) const current = ref(1)
const data = ref([]) const data = ref([])
@@ -60,8 +83,7 @@ const isFold = ref(false)
const isLoading = ref(false) const isLoading = ref(false)
const initData = () => { const initData = () => {
// 为了撑起来框架
// 为了撑起来框架
data.value = [ data.value = [
{ {
id: 1, id: 1,
@@ -76,15 +98,14 @@ const initData = () => {
pageNo: 1, pageNo: 1,
pageSize: 20 pageSize: 20
} }
videoIdentificationPage(params).then(res => { videoIdentificationPage(params).then((res) => {
if(res.success) { if (res.success) {
data.value = res.result.records data.value = res.result.records
}else { } else {
ElMessage.error(res.result) ElMessage.error(res.result)
} }
isLoading.value = false isLoading.value = false
}) })
} }
const toggleFold = () => { const toggleFold = () => {
isFold.value = !isFold.value isFold.value = !isFold.value
@@ -103,10 +124,24 @@ const handle = (type, item) => {
break 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() initData()
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.emergency-list-wrapper{ .emergency-list-wrapper {
position: absolute; position: absolute;
top: 98px; top: 98px;
left: 40px; left: 40px;
@@ -115,10 +150,15 @@ initData()
width: 488px; width: 488px;
height: 100%; height: 100%;
padding: 20px 20px 10px; 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-radius: 0px 0px 0px 0px;
border: 1px solid; 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; box-sizing: border-box;
display: flex; display: flex;
gap: 6px; gap: 6px;
@@ -139,7 +179,7 @@ initData()
width: 28px; width: 28px;
position: relative; position: relative;
height: 180px; height: 180px;
color: #FFFFFF; color: #ffffff;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
align-items: center; align-items: center;
@@ -147,18 +187,18 @@ initData()
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
margin-bottom: -47px; 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-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
&.active { &.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-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&:not(:first-of-type) { &:not(:first-of-type) {
background-image: url('@/assets/images/alarm/tab-background.png'); background-image: url("@/assets/images/alarm/tab-background.png");
&.active { &.active {
background-image: url('@/assets/images/alarm/tab-background-active.png'); background-image: url("@/assets/images/alarm/tab-background-active.png");
} }
} }
} }
@@ -176,62 +216,64 @@ initData()
width: 100%; width: 100%;
padding: 10px; padding: 10px;
font-size: 14px; font-size: 14px;
color: #E1F1FAFF; color: #e1f1faff;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(24, 128, 254, 0); border: 1px solid rgba(24, 128, 254, 0);
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
height: 99px; height: 99px;
background: rgba(46,164,240,0.1); background: rgba(46, 164, 240, 0.1);
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
.time{ .time {
font-size: 18px; font-size: 18px;
color: #0FC8F6; color: #0fc8f6;
line-height: 27px; line-height: 27px;
display: flex; display: flex;
align-items: center; align-items: center;
img{ img {
margin-left: 16px; margin-left: 16px;
} }
} }
.content{ .content {
display: flex; display: flex;
gap: 4px; gap: 4px;
.index,.info{ .index,
background: rgba(66,171,191,0.2); .info {
background: rgba(66, 171, 191, 0.2);
font-size: 14px; font-size: 14px;
height: 52px; height: 52px;
&:nth-of-type(3){ &:nth-of-type(3) {
background: rgba(255,145,31,0.2); background: rgba(255, 145, 31, 0.2);
} }
} }
.index{ .index {
border-left: 2px solid #3CD0ED; border-left: 2px solid #3cd0ed;
font-family: SHSCM; font-family: SHSCM;
width: 32px; width: 32px;
text-align: center; text-align: center;
line-height: 52px; line-height: 52px;
} }
.info{ .info {
width: calc(100% - 32px); width: calc(100% - 32px);
padding: 6px 13px; padding: 6px 13px;
box-sizing: border-box; box-sizing: border-box;
line-height: 20px; 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-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
&:nth-of-type(3){ &.selected {
.content{ .content {
.index,.info{ .index,
background: rgba(255,145,31,0.2); .info {
background: rgba(255, 145, 31, 0.2);
} }
.index{ .index {
border-left: 2px solid #FF911F; border-left: 2px solid #ff911f;
} }
.info{ .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; top: 0;
width: 17px; width: 17px;
height: 82px; 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-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #FFFFFFCC; color: #ffffffcc;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -260,7 +302,7 @@ initData()
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
div{ div {
width: min-content; width: min-content;
} }
} }