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