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> |
|||
<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> |
|||
</template> |
|||
|
|||
<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 { |
|||
name: 'CommandDispatch', |
|||
components: { |
|||
Card, |
|||
CrowdnessIndicatorRankings, |
|||
DispatchLiaison, |
|||
DisposalPlan, |
|||
DisposalProcess, |
|||
EventInformation, |
|||
RealTimeVideo, |
|||
ReleaseInformation, |
|||
TrafficControl, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<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> |
|||
|
|||
Loading…
Reference in new issue