27 changed files with 1129 additions and 643 deletions
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
@ -1,90 +1,90 @@ |
|||||
<template> |
<template> |
||||
<Card class='DispatchLiaison' title="调度联络"> |
<Card class='DispatchLiaison' title="调度联络"> |
||||
<template #title-suffix> |
<template #title-suffix> |
||||
<ButtonGradient class="title-button"> |
<ButtonGradient class="title-button"> |
||||
调度 |
调度 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
</template> |
</template> |
||||
<Descriptions :list="list" style="gap: 24px; flex: 1;"> |
<Descriptions :list="list" style="gap: 24px; flex: 1;"> |
||||
<template #content-phone1="{ data: { text } }"> |
<template #content-phone1="{ data: { text } }"> |
||||
{{ text }} |
{{ text }} |
||||
<img src="./images/phone.svg" /> |
<img src="./images/phone.svg" /> |
||||
</template> |
</template> |
||||
<template #content-phone2="{ data: { text } }"> |
<template #content-phone2="{ data: { text } }"> |
||||
{{ text }} |
{{ text }} |
||||
<img src="./images/phone.svg" /> |
<img src="./images/phone.svg" /> |
||||
<img src="./images/camera.svg" /> |
<img src="./images/camera.svg" /> |
||||
</template> |
</template> |
||||
<template #content-rescueVehicles="{ data: { text } }"> |
<template #content-rescueVehicles="{ data: { text } }"> |
||||
{{ text }} |
{{ text }} |
||||
<img src="./images/rescueVehicles.svg" /> |
<img src="./images/rescueVehicles.svg" /> |
||||
</template> |
</template> |
||||
</Descriptions> |
</Descriptions> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue" |
import Card from "@screen/components/Card2/Card.vue"; |
||||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
import Descriptions from '@screen/components/Descriptions.vue'; |
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'DispatchLiaison', |
name: 'DispatchLiaison', |
||||
components: { |
components: { |
||||
Card, |
Card, |
||||
ButtonGradient, |
ButtonGradient, |
||||
Descriptions |
Descriptions |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
list: [ |
list: [ |
||||
{ |
{ |
||||
label: '业务单位', |
label: '业务单位', |
||||
text: '山东正晨科技股份有限公司', |
text: '山东正晨科技股份有限公司', |
||||
gridColumn: 2 |
gridColumn: 2 |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '值班领导', |
label: '值班领导', |
||||
text: '张亮亮', |
text: '张亮亮', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '手机', |
label: '手机', |
||||
key: "phone1", |
key: "phone1", |
||||
text: '18888888888', |
text: '18888888888', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '调度人员', |
label: '调度人员', |
||||
text: '', |
text: '', |
||||
gridColumn: 2 |
gridColumn: 2 |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '路管人员', |
label: '路管人员', |
||||
text: '王一博', |
text: '王一博', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '手机', |
label: '手机', |
||||
key: "phone2", |
key: "phone2", |
||||
text: '16666666666', |
text: '16666666666', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '救援车辆', |
label: '救援车辆', |
||||
key: "rescueVehicles", |
key: "rescueVehicles", |
||||
text: '鲁A34567 （大型清障车）', |
text: '鲁A34567 （大型清障车）', |
||||
gridColumn: 2 |
gridColumn: 2 |
||||
}, |
}, |
||||
] |
] |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.DispatchLiaison { |
.DispatchLiaison { |
||||
::v-deep { |
::v-deep { |
||||
.content { |
.content { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,301 +1,301 @@ |
|||||
<template> |
<template> |
||||
<Card class='DisposalPlan' title="处置预案"> |
<Card class='DisposalPlan' title="处置预案"> |
||||
<canvas ref="FlowCanvasRef" /> |
<canvas ref="FlowCanvasRef" /> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue"; |
import Card from "@screen/components/Card2/Card.vue";; |
||||
import { CanvasFlow } from "./utils"; |
import { CanvasFlow } from "./utils"; |
||||
|
|
||||
import { merge } from "lodash"; |
import { merge } from "lodash"; |
||||
|
|
||||
function getDefaultBlockOption() { |
function getDefaultBlockOption() { |
||||
return { |
return { |
||||
width: 100, |
width: 100, |
||||
height: 30, |
height: 30, |
||||
radius: 9, |
radius: 9, |
||||
linearGradient: "linear-gradient(180deg, #005C79 0%, #009BCC 100%)", |
linearGradient: "linear-gradient(180deg, #005C79 0%, #009BCC 100%)", |
||||
text: { |
text: { |
||||
font: "PingFang SC", |
font: "PingFang SC", |
||||
fontSize: 14, |
fontSize: 14, |
||||
color: "#FFFFFF" |
color: "#FFFFFF" |
||||
}, |
}, |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
function getDefaultLegendOption() { |
function getDefaultLegendOption() { |
||||
return { |
return { |
||||
width: 9, |
width: 9, |
||||
height: 9, |
height: 9, |
||||
y: 0, |
y: 0, |
||||
text: { |
text: { |
||||
font: "PingFang SC", |
font: "PingFang SC", |
||||
fontSize: 9, |
fontSize: 9, |
||||
align: 'left', |
align: 'left', |
||||
color: "#FFFFFF" |
color: "#FFFFFF" |
||||
}, |
}, |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
const status = { |
const status = { |
||||
0: `linear-gradient(180deg, #004960 0%, #004B62 100%)`, |
0: `linear-gradient(180deg, #004960 0%, #004B62 100%)`, |
||||
1: `linear-gradient(90deg, #006121 0%, #488000 100%)`, |
1: `linear-gradient(90deg, #006121 0%, #488000 100%)`, |
||||
2: `linear-gradient(180deg, #005C79 0%, #009BCC 100%)`, |
2: `linear-gradient(180deg, #005C79 0%, #009BCC 100%)`, |
||||
} |
} |
||||
|
|
||||
export default { |
export default { |
||||
name: 'DisposalPlan', |
name: 'DisposalPlan', |
||||
components: { |
components: { |
||||
Card |
Card |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
data: null |
data: null |
||||
} |
} |
||||
}, |
}, |
||||
watch: { |
watch: { |
||||
data() { |
data() { |
||||
this.draw(); |
this.draw(); |
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
this.canvasFlow = new CanvasFlow(this.$refs.FlowCanvasRef); |
this.canvasFlow = new CanvasFlow(this.$refs.FlowCanvasRef); |
||||
|
|
||||
this.draw(); |
this.draw(); |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
drawBlock({ x, y, width, height, backgroundColor, linearGradient, |
drawBlock({ x, y, width, height, backgroundColor, linearGradient, |
||||
radius, |
radius, |
||||
text: { |
text: { |
||||
color, text, fontSize, fontWeight, fontFamily |
color, text, fontSize, fontWeight, fontFamily |
||||
} = {} }) { |
} = {} }) { |
||||
|
|
||||
if (linearGradient) this.canvasFlow.setLinearGradient(...this.canvasFlow.transformCssLinearGradient(x, y, width, height, linearGradient)) |
if (linearGradient) this.canvasFlow.setLinearGradient(...this.canvasFlow.transformCssLinearGradient(x, y, width, height, linearGradient)) |
||||
|
|
||||
this.canvasFlow.drawRectangle({ x, y, width, height, backgroundColor, radius }); |
this.canvasFlow.drawRectangle({ x, y, width, height, backgroundColor, radius }); |
||||
|
|
||||
if (text) { |
if (text) { |
||||
this.canvasFlow.fillText(text, { x, y, color, fontSize, fontWeight, fontFamily }, { width, height }); |
this.canvasFlow.fillText(text, { x, y, color, fontSize, fontWeight, fontFamily }, { width, height }); |
||||
} |
} |
||||
}, |
}, |
||||
drawLegend({ x, y, width, height, backgroundColor, linearGradient, |
drawLegend({ x, y, width, height, backgroundColor, linearGradient, |
||||
radius, |
radius, |
||||
text: { |
text: { |
||||
text, ...textOptions |
text, ...textOptions |
||||
} = {} }) { |
} = {} }) { |
||||
|
|
||||
if (linearGradient) this.canvasFlow.setLinearGradient(...this.canvasFlow.transformCssLinearGradient(x, y, width, height, linearGradient)) |
if (linearGradient) this.canvasFlow.setLinearGradient(...this.canvasFlow.transformCssLinearGradient(x, y, width, height, linearGradient)) |
||||
|
|
||||
this.canvasFlow.drawRectangle({ x, y, width, height, backgroundColor, radius }); |
this.canvasFlow.drawRectangle({ x, y, width, height, backgroundColor, radius }); |
||||
|
|
||||
if (text) { |
if (text) { |
||||
this.canvasFlow.fillText(text, { ...textOptions, x: x + width + 3, y: y + height / 2, }, { height }); |
this.canvasFlow.fillText(text, { ...textOptions, x: x + width + 3, y: y + height / 2, }, { height }); |
||||
} |
} |
||||
}, |
}, |
||||
drawLine({ x, y, vertices }) { |
drawLine({ x, y, vertices }) { |
||||
this.canvasFlow.drawLine({ x, y, color: '#154D6A', lineWidth: 6 }, vertices); |
this.canvasFlow.drawLine({ x, y, color: '#154D6A', lineWidth: 6 }, vertices); |
||||
}, |
}, |
||||
draw() { |
draw() { |
||||
const { clientWidth } = this.$refs.FlowCanvasRef; |
const { clientWidth } = this.$refs.FlowCanvasRef; |
||||
|
|
||||
const defaultBlockOption = getDefaultBlockOption(); |
const defaultBlockOption = getDefaultBlockOption(); |
||||
|
|
||||
const halfWidth = defaultBlockOption.width / 2; |
const halfWidth = defaultBlockOption.width / 2; |
||||
|
|
||||
this.canvasFlow.clear(); |
this.canvasFlow.clear(); |
||||
|
|
||||
const legends = [ |
const legends = [ |
||||
{ |
{ |
||||
type: 'drawLegend', |
type: 'drawLegend', |
||||
options: merge(getDefaultLegendOption(), { |
options: merge(getDefaultLegendOption(), { |
||||
x: 150, |
x: 150, |
||||
linearGradient: "linear-gradient(180deg, #004960 0%, #004B62 100%)", |
linearGradient: "linear-gradient(180deg, #004960 0%, #004B62 100%)", |
||||
text: { |
text: { |
||||
text: "未完成" |
text: "未完成" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'drawLegend', |
type: 'drawLegend', |
||||
options: merge(getDefaultLegendOption(), { |
options: merge(getDefaultLegendOption(), { |
||||
x: 210, |
x: 210, |
||||
linearGradient: "linear-gradient(90deg, #006121 0%, #488000 100%)", |
linearGradient: "linear-gradient(90deg, #006121 0%, #488000 100%)", |
||||
text: { |
text: { |
||||
text: "进行中" |
text: "进行中" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'drawLegend', |
type: 'drawLegend', |
||||
options: merge(getDefaultLegendOption(), { |
options: merge(getDefaultLegendOption(), { |
||||
x: 270, |
x: 270, |
||||
linearGradient: "linear-gradient(180deg, #005C79 0%, #009BCC 100%)", |
linearGradient: "linear-gradient(180deg, #005C79 0%, #009BCC 100%)", |
||||
text: { |
text: { |
||||
text: "已完成" |
text: "已完成" |
||||
} |
} |
||||
}) |
}) |
||||
} |
} |
||||
] |
] |
||||
|
|
||||
const blockList = [ |
const blockList = [ |
||||
{ |
{ |
||||
type: 'drawBlock', |
type: 'drawBlock', |
||||
key: "DisposalPlan", |
key: "DisposalPlan", |
||||
options: merge(getDefaultBlockOption(), { |
options: merge(getDefaultBlockOption(), { |
||||
x: clientWidth / 2 - halfWidth, |
x: clientWidth / 2 - halfWidth, |
||||
y: 24, |
y: 24, |
||||
text: { |
text: { |
||||
text: "处置预案" |
text: "处置预案" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'drawBlock', |
type: 'drawBlock', |
||||
key: "AnalyzeConfirm", |
key: "AnalyzeConfirm", |
||||
options: merge(getDefaultBlockOption(), { |
options: merge(getDefaultBlockOption(), { |
||||
x: clientWidth / 2 - halfWidth, |
x: clientWidth / 2 - halfWidth, |
||||
y: 75, |
y: 75, |
||||
text: { |
text: { |
||||
text: "分析确认" |
text: "分析确认" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'drawBlock', |
type: 'drawBlock', |
||||
key: "InstructionsGiven", |
key: "InstructionsGiven", |
||||
options: merge(getDefaultBlockOption(), { |
options: merge(getDefaultBlockOption(), { |
||||
x: clientWidth / 7 - halfWidth, |
x: clientWidth / 7 - halfWidth, |
||||
y: 123, |
y: 123, |
||||
linearGradient: "linear-gradient(90deg, #006121 0%, #488000 100%)", |
linearGradient: "linear-gradient(90deg, #006121 0%, #488000 100%)", |
||||
text: { |
text: { |
||||
text: "指令下达" |
text: "指令下达" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'drawBlock', |
type: 'drawBlock', |
||||
key: "OnSiteConfirmation", |
key: "OnSiteConfirmation", |
||||
options: merge(getDefaultBlockOption(), { |
options: merge(getDefaultBlockOption(), { |
||||
x: clientWidth / 7 * 6 - halfWidth, |
x: clientWidth / 7 * 6 - halfWidth, |
||||
y: 123, |
y: 123, |
||||
linearGradient: "linear-gradient(90deg, #006121 0%, #488000 100%)", |
linearGradient: "linear-gradient(90deg, #006121 0%, #488000 100%)", |
||||
text: { |
text: { |
||||
text: "现场确认" |
text: "现场确认" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'drawBlock', |
type: 'drawBlock', |
||||
key: "OnSiteDisposal", |
key: "OnSiteDisposal", |
||||
options: merge(getDefaultBlockOption(), { |
options: merge(getDefaultBlockOption(), { |
||||
x: clientWidth / 2 - halfWidth, |
x: clientWidth / 2 - halfWidth, |
||||
y: 170, |
y: 170, |
||||
linearGradient: "linear-gradient(180deg, #004960 0%, #004B62 100%)", |
linearGradient: "linear-gradient(180deg, #004960 0%, #004B62 100%)", |
||||
text: { |
text: { |
||||
text: "现场处置" |
text: "现场处置" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'drawBlock', |
type: 'drawBlock', |
||||
key: "FollowUpProcessing", |
key: "FollowUpProcessing", |
||||
options: merge(getDefaultBlockOption(), { |
options: merge(getDefaultBlockOption(), { |
||||
x: clientWidth / 2 - halfWidth, |
x: clientWidth / 2 - halfWidth, |
||||
y: 225, |
y: 225, |
||||
linearGradient: "linear-gradient(180deg, #004960 0%, #004B62 100%)", |
linearGradient: "linear-gradient(180deg, #004960 0%, #004B62 100%)", |
||||
text: { |
text: { |
||||
text: "后续处理" |
text: "后续处理" |
||||
} |
} |
||||
}) |
}) |
||||
}, |
}, |
||||
]; |
]; |
||||
|
|
||||
const linePoints = [ |
const linePoints = [ |
||||
{ |
{ |
||||
x: blockList[0].options.x + blockList[0].options.width / 2, |
x: blockList[0].options.x + blockList[0].options.width / 2, |
||||
y: blockList[0].options.y + blockList[0].options.height, |
y: blockList[0].options.y + blockList[0].options.height, |
||||
vertices: [ |
vertices: [ |
||||
{ |
{ |
||||
x: blockList[0].options.x + blockList[0].options.width / 2, |
x: blockList[0].options.x + blockList[0].options.width / 2, |
||||
y: blockList[2].options.y + blockList[2].options.height / 2 |
y: blockList[2].options.y + blockList[2].options.height / 2 |
||||
} |
} |
||||
] |
] |
||||
}, |
}, |
||||
{ |
{ |
||||
x: blockList[2].options.x + blockList[2].options.width / 2, |
x: blockList[2].options.x + blockList[2].options.width / 2, |
||||
y: blockList[2].options.y + blockList[2].options.height / 2, |
y: blockList[2].options.y + blockList[2].options.height / 2, |
||||
vertices: [ |
vertices: [ |
||||
{ |
{ |
||||
x: blockList[3].options.x + blockList[3].options.width / 2, |
x: blockList[3].options.x + blockList[3].options.width / 2, |
||||
y: blockList[2].options.y + blockList[2].options.height / 2, |
y: blockList[2].options.y + blockList[2].options.height / 2, |
||||
} |
} |
||||
] |
] |
||||
}, |
}, |
||||
{ |
{ |
||||
x: blockList[0].options.x + blockList[0].options.width / 2, |
x: blockList[0].options.x + blockList[0].options.width / 2, |
||||
y: blockList[4].options.y, |
y: blockList[4].options.y, |
||||
vertices: [ |
vertices: [ |
||||
{ |
{ |
||||
x: blockList[0].options.x + blockList[0].options.width / 2, |
x: blockList[0].options.x + blockList[0].options.width / 2, |
||||
y: blockList[5].options.y, |
y: blockList[5].options.y, |
||||
} |
} |
||||
] |
] |
||||
}, |
}, |
||||
{ |
{ |
||||
x: blockList[2].options.x + blockList[2].options.width / 2, |
x: blockList[2].options.x + blockList[2].options.width / 2, |
||||
y: blockList[2].options.y + blockList[2].options.height, |
y: blockList[2].options.y + blockList[2].options.height, |
||||
vertices: [ |
vertices: [ |
||||
{ |
{ |
||||
x: blockList[2].options.x + blockList[2].options.width / 2, |
x: blockList[2].options.x + blockList[2].options.width / 2, |
||||
y: blockList[4].options.y + blockList[4].options.height / 2, |
y: blockList[4].options.y + blockList[4].options.height / 2, |
||||
}, |
}, |
||||
{ |
{ |
||||
x: blockList[4].options.x, |
x: blockList[4].options.x, |
||||
y: blockList[4].options.y + blockList[4].options.height / 2, |
y: blockList[4].options.y + blockList[4].options.height / 2, |
||||
} |
} |
||||
] |
] |
||||
}, |
}, |
||||
{ |
{ |
||||
x: blockList[3].options.x + blockList[3].options.width / 2, |
x: blockList[3].options.x + blockList[3].options.width / 2, |
||||
y: blockList[3].options.y + blockList[3].options.height, |
y: blockList[3].options.y + blockList[3].options.height, |
||||
vertices: [ |
vertices: [ |
||||
{ |
{ |
||||
x: blockList[3].options.x + blockList[3].options.width / 2, |
x: blockList[3].options.x + blockList[3].options.width / 2, |
||||
y: blockList[4].options.y + blockList[4].options.height / 2, |
y: blockList[4].options.y + blockList[4].options.height / 2, |
||||
}, |
}, |
||||
{ |
{ |
||||
x: blockList[4].options.x - blockList[3].options.width, |
x: blockList[4].options.x - blockList[3].options.width, |
||||
y: blockList[4].options.y + blockList[4].options.height / 2, |
y: blockList[4].options.y + blockList[4].options.height / 2, |
||||
} |
} |
||||
] |
] |
||||
}, |
}, |
||||
]; |
]; |
||||
|
|
||||
linePoints.forEach(item => this.drawLine(item)); |
linePoints.forEach(item => this.drawLine(item)); |
||||
|
|
||||
[...blockList, ...legends].forEach(item => { |
[...blockList, ...legends].forEach(item => { |
||||
this[item.type]?.(item.options) |
this[item.type]?.(item.options) |
||||
}) |
}) |
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.DisposalPlan { |
.DisposalPlan { |
||||
::v-deep { |
::v-deep { |
||||
.content { |
.content { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
canvas { |
canvas { |
||||
flex: 1; |
flex: 1; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
|
After Width: | Height: | Size: 372 KiB |
|
After Width: | Height: | Size: 335 KiB |
@ -1,119 +1,119 @@ |
|||||
<template> |
<template> |
||||
<Card class='EventInformation' title="事件信息"> |
<Card class='EventInformation' title="事件信息"> |
||||
<template #title-suffix> |
<template #title-suffix> |
||||
<ButtonGradient class="title-button"> |
<ButtonGradient class="title-button"> |
||||
搜索 |
搜索 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
<ButtonGradient class="title-button"> |
<ButtonGradient class="title-button"> |
||||
编写 |
编写 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
</template> |
</template> |
||||
|
|
||||
<Descriptions :list="list" style="gap: 15px;" /> |
<Descriptions :list="list" style="gap: 15px;" /> |
||||
|
|
||||
<div class="road-lane"> |
<div class="road-lane"> |
||||
<div v-for="i in 11"> |
<div v-for="i in 11"> |
||||
<img v-if="i != 6" src="./images/normal.svg"> |
<img v-if="i != 6" src="./images/normal.svg"> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="bottom-info"> |
<div class="bottom-info"> |
||||
<div class="tag">拥堵五级事件</div> |
<div class="tag">拥堵五级事件</div> |
||||
</div> |
</div> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue" |
import Card from "@screen/components/Card2/Card.vue"; |
||||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
import Descriptions from '@screen/components/Descriptions.vue'; |
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'EventInformation', |
name: 'EventInformation', |
||||
components: { |
components: { |
||||
Card, |
Card, |
||||
ButtonGradient, |
ButtonGradient, |
||||
Descriptions |
Descriptions |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
|
||||
list: [ |
list: [ |
||||
{ |
{ |
||||
label: '情报时间', |
label: '情报时间', |
||||
text: '2024-01-03 14:00:21', |
text: '2024-01-03 14:00:21', |
||||
gridColumn: 2 |
gridColumn: 2 |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '情报来源', |
label: '情报来源', |
||||
text: '96659', |
text: '96659', |
||||
gridColumn: 2 |
gridColumn: 2 |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '事件类型', |
label: '事件类型', |
||||
text: '交通事故', |
text: '交通事故', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '所属路线', |
label: '所属路线', |
||||
text: 'G34济菏高速', |
text: 'G34济菏高速', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '道路方向', |
label: '道路方向', |
||||
text: '菏泽方向', |
text: '菏泽方向', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '桩号：', |
label: '桩号：', |
||||
text: "K266+001", |
text: "K266+001", |
||||
} |
} |
||||
] |
] |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.EventInformation { |
.EventInformation { |
||||
::v-deep { |
::v-deep { |
||||
>.content { |
>.content { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
gap: 12px; |
gap: 12px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.road-lane { |
.road-lane { |
||||
background-image: url(./images/lane.svg); |
background-image: url(./images/lane.svg); |
||||
flex: 1; |
flex: 1; |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
display: grid; |
display: grid; |
||||
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 1.2fr; |
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 1.2fr; |
||||
|
|
||||
>div { |
>div { |
||||
display: flex; |
display: flex; |
||||
align-items: end; |
align-items: end; |
||||
padding-bottom: 18px; |
padding-bottom: 18px; |
||||
justify-content: center; |
justify-content: center; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.bottom-info { |
.bottom-info { |
||||
display: flex; |
display: flex; |
||||
gap: 9px; |
gap: 9px; |
||||
|
|
||||
.tag { |
.tag { |
||||
padding: 3px 6px; |
padding: 3px 6px; |
||||
height: 24px; |
height: 24px; |
||||
background: rgba(245, 80, 80, 0.4); |
background: rgba(245, 80, 80, 0.4); |
||||
border-radius: 2px; |
border-radius: 2px; |
||||
border: 1px solid #F55050; |
border: 1px solid #F55050; |
||||
|
|
||||
font-size: 12px; |
font-size: 12px; |
||||
font-family: Source Han Sans SC, Source Han Sans SC; |
font-family: Source Han Sans SC, Source Han Sans SC; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: #F55050; |
color: #F55050; |
||||
line-height: 14px; |
line-height: 14px; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,37 +1,37 @@ |
|||||
<template> |
<template> |
||||
<Card class='RealTimeVideo' title="实时视频"> |
<Card class='RealTimeVideo' title="实时视频"> |
||||
<Video class="item-video" /> |
<Video class="item-video" /> |
||||
<Video class="item-video" /> |
<Video class="item-video" /> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue"; |
import Card from "@screen/components/Card2/Card.vue";; |
||||
import Video from "@screen/components/Video" |
import Video from "@screen/components/Video" |
||||
export default { |
export default { |
||||
name: 'RealTimeVideo', |
name: 'RealTimeVideo', |
||||
components: { |
components: { |
||||
Card, |
Card, |
||||
Video |
Video |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.RealTimeVideo { |
.RealTimeVideo { |
||||
::v-deep { |
::v-deep { |
||||
.content { |
.content { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
gap: 9px; |
gap: 9px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.item-video { |
.item-video { |
||||
flex: 1; |
flex: 1; |
||||
width: calc(50% - 4.5px); |
width: calc(50% - 4.5px); |
||||
height: 100%; |
height: 100%; |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,150 +1,150 @@ |
|||||
<template> |
<template> |
||||
<Card class='ReleaseInformation' title="信息发布"> |
<Card class='ReleaseInformation' title="信息发布"> |
||||
<Form :formList="formList" column="1"> |
<Form :formList="formList" column="1"> |
||||
<template #platform="{ formData, data }"> |
<template #platform="{ formData, data }"> |
||||
<CheckboxGroup :list="checkboxList" v-model="formData[data.key]"> |
<CheckboxGroup :list="checkboxList" v-model="formData[data.key]"> |
||||
<template v-for="item in checkboxList" #[item.key]="{ data }"> |
<template v-for="item in checkboxList" #[item.key]="{ data }"> |
||||
<div class="checkbox-content"> |
<div class="checkbox-content"> |
||||
<img :src="require(`./images/${item.key}.svg`)" /> |
<img :src="require(`./images/${item.key}.svg`)" /> |
||||
{{ data.label }} |
{{ data.label }} |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
</CheckboxGroup> |
</CheckboxGroup> |
||||
</template> |
</template> |
||||
</Form> |
</Form> |
||||
|
|
||||
<div class="line"></div> |
<div class="line"></div> |
||||
|
|
||||
<Descriptions :list="list" style="flex: 1;" column="1" titleStyle="align-self: flex-start;"> |
<Descriptions :list="list" style="flex: 1;" column="1" titleStyle="align-self: flex-start;"> |
||||
<template #content-informationBoard> |
<template #content-informationBoard> |
||||
<div class="informationBoard-content"> |
<div class="informationBoard-content"> |
||||
<div>暂无情报板推荐发布信息</div> |
<div>暂无情报板推荐发布信息</div> |
||||
<img src="./images/add.svg" /> |
<img src="./images/add.svg" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
</Descriptions> |
</Descriptions> |
||||
|
|
||||
<div class="bottom"> |
<div class="bottom"> |
||||
<ButtonGradient class="title-button special-button"> |
<ButtonGradient class="title-button special-button"> |
||||
一键发布 |
一键发布 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
<ButtonGradient class="title-button special-button"> |
<ButtonGradient class="title-button special-button"> |
||||
发布预案 |
发布预案 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
</div> |
</div> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue" |
import Card from "@screen/components/Card2/Card.vue"; |
||||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
import Form from '@screen/components/FormConfig'; |
import Form from '@screen/components/FormConfig'; |
||||
import CheckboxGroup from '@screen/components/CheckboxGroup/index.vue'; |
import CheckboxGroup from '@screen/components/CheckboxGroup/index.vue'; |
||||
import Descriptions from '@screen/components/Descriptions.vue'; |
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'ReleaseInformation', |
name: 'ReleaseInformation', |
||||
components: { |
components: { |
||||
Card, |
Card, |
||||
ButtonGradient, |
ButtonGradient, |
||||
CheckboxGroup, |
CheckboxGroup, |
||||
Form, |
Form, |
||||
Descriptions |
Descriptions |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
list: [ |
list: [ |
||||
{ |
{ |
||||
label: '情报板', |
label: '情报板', |
||||
key: "informationBoard", |
key: "informationBoard", |
||||
gridColumn: 1 |
gridColumn: 1 |
||||
} |
} |
||||
], |
], |
||||
checkboxValues: [], |
checkboxValues: [], |
||||
checkboxList: [ |
checkboxList: [ |
||||
{ key: 'weChat', label: '微信' }, |
{ key: 'weChat', label: '微信' }, |
||||
{ key: 'message', label: '短信' }, |
{ key: 'message', label: '短信' }, |
||||
{ key: 'website', label: '网站' }, |
{ key: 'website', label: '网站' }, |
||||
{ key: 'weibo', label: '新浪' }, |
{ key: 'weibo', label: '新浪' }, |
||||
], |
], |
||||
formList: [{ |
formList: [{ |
||||
label: "发布内容:", |
label: "发布内容:", |
||||
key: "content", |
key: "content", |
||||
type: "input", |
type: "input", |
||||
options: { |
options: { |
||||
type: "textarea", |
type: "textarea", |
||||
autosize: true, |
autosize: true, |
||||
maxlength: 200, |
maxlength: 200, |
||||
autosize: { minRows: 9, maxRows: 9 }, |
autosize: { minRows: 9, maxRows: 9 }, |
||||
showWordLimit: true |
showWordLimit: true |
||||
} |
} |
||||
}, |
}, |
||||
{ |
{ |
||||
label: "发布平台:", |
label: "发布平台:", |
||||
key: "platform", |
key: "platform", |
||||
type: "input", |
type: "input", |
||||
default: [] |
default: [] |
||||
}], |
}], |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.ReleaseInformation { |
.ReleaseInformation { |
||||
|
|
||||
::v-deep { |
::v-deep { |
||||
.content { |
.content { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
gap: 18px; |
gap: 18px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.informationBoard-content { |
.informationBoard-content { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
display: flex; |
display: flex; |
||||
align-items: start; |
align-items: start; |
||||
gap: 6px; |
gap: 6px; |
||||
|
|
||||
>div { |
>div { |
||||
flex: 1; |
flex: 1; |
||||
font-size: 16px; |
font-size: 16px; |
||||
font-family: PingFang SC, PingFang SC; |
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: rgba(255, 255, 255, .6); |
color: rgba(255, 255, 255, .6); |
||||
line-height: 19px; |
line-height: 19px; |
||||
letter-spacing: 1px; |
letter-spacing: 1px; |
||||
} |
} |
||||
|
|
||||
img { |
img { |
||||
cursor: pointer; |
cursor: pointer; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.checkbox-content { |
.checkbox-content { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
gap: 3px; |
gap: 3px; |
||||
} |
} |
||||
|
|
||||
.line { |
.line { |
||||
background: linear-gradient(to left, transparent 0%, transparent 24%, #3DE8FF 24%, #3DE8FF 100%); |
background: linear-gradient(to left, transparent 0%, transparent 24%, #3DE8FF 24%, #3DE8FF 100%); |
||||
background-size: 10px 1px; |
background-size: 10px 1px; |
||||
background-repeat: repeat-x; |
background-repeat: repeat-x; |
||||
height: 1px; |
height: 1px; |
||||
} |
} |
||||
|
|
||||
.bottom { |
.bottom { |
||||
display: flex; |
display: flex; |
||||
gap: 9px; |
gap: 9px; |
||||
justify-content: end; |
justify-content: end; |
||||
|
|
||||
.special-button { |
.special-button { |
||||
padding: 0 9px; |
padding: 0 9px; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,65 +1,65 @@ |
|||||
<template> |
<template> |
||||
<Card class='TrafficControl' title="交通管制"> |
<Card class='TrafficControl' title="交通管制"> |
||||
<RadioGroup :list="radioList" value="mainlineControl" /> |
<RadioGroup :list="radioList" value="mainlineControl" /> |
||||
|
|
||||
<div class="bottom"> |
<div class="bottom"> |
||||
<ButtonGradient class="title-button special-button" |
<ButtonGradient class="title-button special-button" |
||||
style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);"> |
style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);"> |
||||
封闭 |
封闭 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
<ButtonGradient class="title-button special-button" style=" |
<ButtonGradient class="title-button special-button" style=" |
||||
background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);"> |
background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);"> |
||||
限行 |
限行 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
</div> |
</div> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue" |
import Card from "@screen/components/Card2/Card.vue"; |
||||
import RadioGroup from '@screen/components/RadioGroup/index.vue'; |
import RadioGroup from '@screen/components/RadioGroup/index.vue'; |
||||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'TrafficControl', |
name: 'TrafficControl', |
||||
components: { |
components: { |
||||
Card, |
Card, |
||||
RadioGroup, |
RadioGroup, |
||||
ButtonGradient |
ButtonGradient |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
radioList: [ |
radioList: [ |
||||
{ key: 'mainlineControl', label: '主线管制' }, |
{ key: 'mainlineControl', label: '主线管制' }, |
||||
{ key: 'tollboothControl', label: '收费站管制' }, |
{ key: 'tollboothControl', label: '收费站管制' }, |
||||
{ key: 'serviceAreaControl', label: '服务区管制' }, |
{ key: 'serviceAreaControl', label: '服务区管制' }, |
||||
{ key: 'hubInterchangeControl', label: '枢纽立交管制' }, |
{ key: 'hubInterchangeControl', label: '枢纽立交管制' }, |
||||
{ key: 'otherControls', label: '其他管制' }, |
{ key: 'otherControls', label: '其他管制' }, |
||||
] |
] |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.TrafficControl { |
.TrafficControl { |
||||
::v-deep { |
::v-deep { |
||||
.content { |
.content { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
gap: 12px; |
gap: 12px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.bottom { |
.bottom { |
||||
display: flex; |
display: flex; |
||||
gap: 9px; |
gap: 9px; |
||||
justify-content: end; |
justify-content: end; |
||||
|
|
||||
.special-button { |
.special-button { |
||||
padding: 0 24px; |
padding: 0 24px; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<div class='DetailCard'> |
||||
|
<div class="header"> |
||||
|
<div class="left"> |
||||
|
<div class="title">{{ data.title || '-' }}</div> |
||||
|
<div class="state">{{ data.state || '-' }}</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>icon</span> |
||||
|
<span>{{ data.time || '-' }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<div class=""> |
||||
|
|
||||
|
</div> |
||||
|
<div class="suffix"></div> |
||||
|
<div class="suffix"></div> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<Button :style="{ background: '#00B3CC', width: '96px' }">审核</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'DetailCard', |
||||
|
components: { |
||||
|
Button |
||||
|
}, |
||||
|
props: { |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
title: "事件详情", |
||||
|
state: 0, |
||||
|
desc: '' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.DetailCard { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: rgba(6, 66, 88, 0.8); |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(180deg, rgba(9, 60, 80, 0), rgba(0, 134, 187, 1)) 1 1; |
||||
|
|
||||
|
>div { |
||||
|
padding: 12px 24px; |
||||
|
} |
||||
|
|
||||
|
>.header { |
||||
|
border-bottom: 2px solid #055670; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
>.body { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
>.footer { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
justify-content: flex-end; |
||||
|
padding: 6px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<Card2 class='AuditDetails' title="审核详情"> |
||||
|
<TimeLine2 :data="timeLine2List" style="flex: 1;" direction="right"> |
||||
|
<template #content="{ data }"> |
||||
|
<DetailCard :data="data" /> |
||||
|
</template> |
||||
|
</TimeLine2> |
||||
|
</Card2> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card2 from "@screen/components/Card2/Card.vue"; |
||||
|
import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index"; |
||||
|
import DetailCard from "./DetailCard.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'AuditDetails', |
||||
|
components: { |
||||
|
Card2, |
||||
|
TimeLine2, |
||||
|
DetailCard |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
timeLine2List: Array.from({ length: 6 }).map(() => ({ |
||||
|
time: "2023-12-21 16:35:44", |
||||
|
name: "甘易玫", |
||||
|
desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字", |
||||
|
posts: '淄博发展公司管理员' |
||||
|
})), |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.AuditDetails {} |
||||
|
</style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<div class='ListItem'> |
||||
|
<img class="prefix" :src="require(`@screen/images/ListItem/${eventTypeIcon[data.type]}.svg`)" /> |
||||
|
<div class="center"> |
||||
|
<div class="header"> |
||||
|
<span class="title">{{ data.title || '-' }}</span> |
||||
|
<span class="state" :style="{ backgroundColor: state[data.state].color }">{{ state[data.state].text }}</span> |
||||
|
</div> |
||||
|
<div class="content">{{ data.desc || '-' }}</div> |
||||
|
</div> |
||||
|
<img class="suffix" :src="require(`@screen/images/ListItem/${state[data.state].icon}.svg`)" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ListItem', |
||||
|
props: { |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
state: 0, |
||||
|
type: 0 |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
eventTypeIcon: { |
||||
|
0: 'AbnormalWeather', |
||||
|
1: 'TrafficControl', |
||||
|
}, |
||||
|
state: { |
||||
|
0: { |
||||
|
color: "#00B1A0", |
||||
|
text: "处理中", |
||||
|
icon: 'ToBeReviewed' |
||||
|
}, |
||||
|
|
||||
|
1: { |
||||
|
color: "#057DD3", |
||||
|
text: "已处理", |
||||
|
icon: 'Reviewed' |
||||
|
}, |
||||
|
2: { |
||||
|
color: "#057DD3", |
||||
|
text: "已处理", |
||||
|
icon: 'Failed' |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.ListItem { |
||||
|
min-height: 88px; |
||||
|
background: rgba(6, 66, 88, 0.8); |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
padding: 21px; |
||||
|
border-image: linear-gradient(180deg, rgba(9, 60, 80, 0), rgba(0, 134, 187, .72)) 1 1; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.center { |
||||
|
flex: 1; |
||||
|
|
||||
|
.header { |
||||
|
margin-bottom: 9px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 9px; |
||||
|
|
||||
|
|
||||
|
.title { |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 600; |
||||
|
color: #E2B066; |
||||
|
line-height: 21px; |
||||
|
} |
||||
|
|
||||
|
.state { |
||||
|
background: #00B1A0; |
||||
|
border-radius: 18px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 16px; |
||||
|
padding: 2px 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 19px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<Card2 class='Auditlists' title="审核列表"> |
||||
|
<InputSearch style="width: 100%;" /> |
||||
|
<div class="body"> |
||||
|
<ListItem v-for="(item, index) in list" :key="index" :data="item" /> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<Pagination :total="90" /> |
||||
|
</div> |
||||
|
</Card2> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card2 from "@screen/components/Card2/Card.vue"; |
||||
|
import Pagination from '@screen/components/Pagination.vue'; |
||||
|
import InputSearch from '@screen/components/InputSearch/index.vue'; |
||||
|
import ListItem from "./ListItem.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Auditlists', |
||||
|
components: { |
||||
|
Card2, |
||||
|
InputSearch, |
||||
|
Pagination, |
||||
|
ListItem |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
list: Array.from({ length: 20 }).map(() => ({ |
||||
|
title: "异常天气", |
||||
|
desc: "2023.12.23 13:00:00 济南方向K100+000 交通事故", |
||||
|
type: (() => { |
||||
|
const min = 0; |
||||
|
const max = 1; |
||||
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
||||
|
})(), |
||||
|
state: (() => { |
||||
|
const min = 0; |
||||
|
const max = 2; |
||||
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
||||
|
})() |
||||
|
})), |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.Auditlists { |
||||
|
::v-deep { |
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.body { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 9px; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,15 +1,34 @@ |
|||||
<template> |
<template> |
||||
<div class='InformationReleaseManagement'> |
<div class='InformationReleaseManagement'> |
||||
InformationReleaseManagement |
<AuditLists class="card" /> |
||||
|
<AuditDetails class="card" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import AuditDetails from "./Cards/AuditDetails/index.vue" |
||||
|
import AuditLists from "./Cards/AuditLists" |
||||
|
|
||||
export default { |
export default { |
||||
name: 'InformationReleaseManagement', |
name: 'InformationReleaseManagement', |
||||
|
components: { |
||||
|
AuditLists, |
||||
|
AuditDetails |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.InformationReleaseManagement {} |
.InformationReleaseManagement { |
||||
|
padding: 24px; |
||||
|
display: grid; |
||||
|
gap: 36px; |
||||
|
grid-template-columns: 0.42fr 1fr; |
||||
|
|
||||
|
.card { |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue