Joe
1 year ago
|
After Width: | Height: | Size: 395 B |
|
After Width: | Height: | Size: 692 B |
|
After Width: | Height: | Size: 552 B |
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 938 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 785 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,37 @@ |
|||||
|
export const timeLine1List = [ |
||||
|
{ |
||||
|
time: "16.36", |
||||
|
label: "接警记录", |
||||
|
isActive: true, |
||||
|
}, |
||||
|
{ |
||||
|
time: "16.36", |
||||
|
label: "指令下达", |
||||
|
isActive: true, |
||||
|
}, |
||||
|
{ |
||||
|
time: "16.36", |
||||
|
label: "清障到达", |
||||
|
isActive: true, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "安全防护", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "开始清障", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "清障结束", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
{ |
||||
|
time: "", |
||||
|
label: "恢复畅通", |
||||
|
isActive: false, |
||||
|
}, |
||||
|
]; |
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
@ -1,20 +1,88 @@ |
|||||
<template> |
<template> |
||||
<Card class='DisposalProcess' title="处置过程"> |
<Card class='DisposalProcess' title="处置过程"> |
||||
DisposalProcess |
<template #title-suffix> |
||||
|
<ButtonGradient class="title-button"> |
||||
|
事件解除 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient class="title-button"> |
||||
|
协同调度 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient class="title-button"> |
||||
|
无需清障 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient class="title-button"> |
||||
|
重要事件上报 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient class="title-button"> |
||||
|
路赔 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient class="title-button special"> |
||||
|
<template #prefix> |
||||
|
<div class="icon" :style="{ backgroundImage: `url(${require(`./images/${'zoom'}.svg`)})` }" /> |
||||
|
</template> |
||||
|
</ButtonGradient> |
||||
|
</template> |
||||
|
|
||||
|
<TimeLine1 :data="timeLine1List" :filterDistance="filterDistance" /> |
||||
|
<TimeLine2 :data="timeLine2List" style="flex: 1;" /> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue" |
import Card from "./../../components/Card.vue"; |
||||
|
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
|
|
||||
|
import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index"; |
||||
|
import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index"; |
||||
|
|
||||
|
import { timeLine1List } from "./data" |
||||
|
|
||||
export default { |
export default { |
||||
name: 'DisposalProcess', |
name: 'DisposalProcess', |
||||
|
inject: ["adpScale"], |
||||
components: { |
components: { |
||||
Card |
Card, |
||||
|
ButtonGradient, |
||||
|
TimeLine1, |
||||
|
TimeLine2 |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
timeLine1List, |
||||
|
timeLine2List: Array.from({ length: 6 }).map(() => ({ |
||||
|
title: "接警记录", |
||||
|
time: "2023-12-21 16:35:44", |
||||
|
name: "甘易玫", |
||||
|
desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字", |
||||
|
posts: '淄博发展公司管理员' |
||||
|
})), |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
filterDistance(distance) { |
||||
|
return 1 / this.adpScale.scaleX * distance |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.DisposalProcess {} |
.DisposalProcess { |
||||
|
|
||||
|
|
||||
|
.special { |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
||||
|
border-radius: 3px !important; |
||||
|
padding: 3px; |
||||
|
width: 26px; |
||||
|
height: 26px; |
||||
|
|
||||
|
.icon { |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
|
After Width: | Height: | Size: 574 B |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 574 B |
@ -0,0 +1,22 @@ |
|||||
|
export const tabMap = { |
||||
|
AlarmEvents: { |
||||
|
state: 5, |
||||
|
textColor: "#007FF4", |
||||
|
text: "去确认", |
||||
|
}, |
||||
|
EventsConfirmed: { |
||||
|
state: 5, |
||||
|
textColor: "#007FF4", |
||||
|
text: "去确认", |
||||
|
}, |
||||
|
DisposingEvents: { |
||||
|
state: 4, |
||||
|
textColor: "#007FF4", |
||||
|
text: "去处置", |
||||
|
}, |
||||
|
IncidentDisposed: { |
||||
|
state: 3, |
||||
|
textColor: "#007FF4", |
||||
|
text: "处置记录", |
||||
|
}, |
||||
|
}; |
||||