14 changed files with 336 additions and 2 deletions
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 632 B |
@ -0,0 +1,44 @@ |
|||||
|
<template> |
||||
|
<div class='Title'> |
||||
|
<div class="left"> |
||||
|
<img src="./images/icon.svg" /> |
||||
|
<span>{{ title }}</span> |
||||
|
<!-- <slot name="prefix"/> --> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<slot name="suffix" /> |
||||
|
<img src="./images/icon2.svg" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Title', |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.Title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
height: 36px; |
||||
|
padding: 0 9px; |
||||
|
|
||||
|
background-image: url(./images/bg.svg); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: auto; |
||||
|
|
||||
|
>div { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='CrowdnessIndicatorRankings' title="拥挤度指标排名情况"> |
||||
|
CrowdnessIndicatorRankings |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'CrowdnessIndicatorRankings', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.CrowdnessIndicatorRankings {} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='DispatchLiaison' title="调度联络"> |
||||
|
DispatchLiaison |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'DispatchLiaison', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.DispatchLiaison {} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='DisposalPlan' title="处置预案"> |
||||
|
DisposalPlan |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'DisposalPlan', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.DisposalPlan {} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='DisposalProcess' title="处置过程"> |
||||
|
DisposalProcess |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'DisposalProcess', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.DisposalProcess {} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='EventInformation' title="事件信息"> |
||||
|
EventInformation |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'EventInformation', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.EventInformation {} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='RealTimeVideo' title="实时视频"> |
||||
|
RealTimeVideo |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'RealTimeVideo', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.RealTimeVideo {} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='ReleaseInformation' title="信息发布"> |
||||
|
ReleaseInformation |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'ReleaseInformation', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.ReleaseInformation {} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<Card class='TrafficControl' title="交通管制"> |
||||
|
TrafficControl |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "./../../components/Card.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'TrafficControl', |
||||
|
components: { |
||||
|
Card |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.TrafficControl {} |
||||
|
</style> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<template> |
||||
|
<div class='Card'> |
||||
|
<Title :title="title"> |
||||
|
<template #suffix> |
||||
|
<slot name="title-suffix" /> |
||||
|
</template> |
||||
|
</Title> |
||||
|
<div class="content"> |
||||
|
<slot /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Title from "@screen/components/Title/index.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'Card', |
||||
|
components: { |
||||
|
Title |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.Card { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(6, 66, 88, .4) 93%); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.content { |
||||
|
height: 100%; |
||||
|
overflow: auto; |
||||
|
flex: 1; |
||||
|
padding: 9px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,15 +1,49 @@ |
|||||
<template> |
<template> |
||||
<div class='CommandDispatch'> |
<div class='CommandDispatch'> |
||||
CommandDispatch |
<EventInformation style="grid-area: 1/1/span 9/1;">1</EventInformation> |
||||
|
<DispatchLiaison style="grid-area: 10/1/span 7/2;">2</DispatchLiaison> |
||||
|
<DisposalPlan style="grid-area: 17/1/span 9/2;">3</DisposalPlan> |
||||
|
<CrowdnessIndicatorRankings style="grid-area: 1/2/span 12/2;">4</CrowdnessIndicatorRankings> |
||||
|
<DisposalProcess style="grid-area: 13/2/span 13/2;">5</DisposalProcess> |
||||
|
<RealTimeVideo style="grid-area: 1/3/span 6/3;">6</RealTimeVideo> |
||||
|
<ReleaseInformation style="grid-area: 7/3/span 14/3;">7</ReleaseInformation> |
||||
|
<TrafficControl style="grid-area: 21/3/span 5/3;">8</TrafficControl> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import Card from "./components/Card.vue"; |
||||
|
import CrowdnessIndicatorRankings from "./Cards/CrowdnessIndicatorRankings/index.vue"; |
||||
|
import DispatchLiaison from "./Cards/DispatchLiaison/index.vue"; |
||||
|
import DisposalPlan from "./Cards/DisposalPlan/index.vue"; |
||||
|
import DisposalProcess from "./Cards/DisposalProcess/index.vue"; |
||||
|
import EventInformation from "./Cards/EventInformation/index.vue"; |
||||
|
import RealTimeVideo from "./Cards/RealTimeVideo/index.vue"; |
||||
|
import ReleaseInformation from "./Cards/ReleaseInformation/index.vue"; |
||||
|
import TrafficControl from "./Cards/TrafficControl/index.vue"; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'CommandDispatch', |
name: 'CommandDispatch', |
||||
|
components: { |
||||
|
Card, |
||||
|
CrowdnessIndicatorRankings, |
||||
|
DispatchLiaison, |
||||
|
DisposalPlan, |
||||
|
DisposalProcess, |
||||
|
EventInformation, |
||||
|
RealTimeVideo, |
||||
|
ReleaseInformation, |
||||
|
TrafficControl, |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.CommandDispatch {} |
.CommandDispatch { |
||||
|
padding: 24px 12px 21px 12px; |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr 1fr; |
||||
|
grid-template-rows: repeat(24, 1fr); |
||||
|
gap: 18px; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue