mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

wangqin
yyl 10 months ago
parent
bae7199fdc e17acddfd3
commit
3deb44ecff
5 changed files with 359 additions and 363 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
  2. 2
      ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
  3. 148
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue
  4. 516
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
  5. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue

54
ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
View File

@ -63,14 +63,22 @@ export default {
'--reverse-scale', '--reverse-scale',
'' ''
], ],
[
'--middle-scale',
''
],
]; ];
if (scaleX > scaleY) { if (scaleX > scaleY) {
cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`; // cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`;
cssGlobalVariable[0][1] = `scaleX(${1 - (scaleX - scaleY)})`;
cssGlobalVariable[1][1] = `scaleY(${1 / scaleX})`; cssGlobalVariable[1][1] = `scaleY(${1 / scaleX})`;
cssGlobalVariable[2][1] = `scaleX(${1 - (scaleX - scaleY) / 2})`;
} else { } else {
cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`; // cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`;
cssGlobalVariable[0][1] = `scaleX(${1 - (scaleY - scaleX)})`;
cssGlobalVariable[1][1] = `scaleX(${1 / scaleY})`; cssGlobalVariable[1][1] = `scaleX(${1 / scaleY})`;
cssGlobalVariable[2][1] = `scaleX(${1 - (scaleY - scaleX) / 2})`;
} }
cssGlobalVariable.forEach((data) => { cssGlobalVariable.forEach((data) => {
@ -94,47 +102,35 @@ export default {
body { body {
.keep-ratio { .keep-ratio {
transform: var(--keep-ratio); transform: var(--keep-ratio);
transition: all .15s linear; }
&[origin] {
transform-origin: attr(origin);
}
&-left {
transform-origin: left;
}
&-right {
transform-origin: right;
}
&-bottom { .reverse-ratio {
transform-origin: bottom; transform: var(--reverse-scale);
} }
&-top { .middle-ratio {
transform-origin: top; transform: var(--middle-scale);
}
} }
.reverse-scale { .keep-ratio,
transform: var(--reverse-scale); .reverse-ratio,
.middle-ratio {
transition: all .15s linear; transition: all .15s linear;
&-left { &[origin="left"] {
transform-origin: left; transform-origin: left;
} }
&-right { &[origin="right"] {
transform-origin: right; transform-origin: right;
} }
&-bottom { &[origin="top"] {
transform-origin: bottom; transform-origin: top;
} }
&-top { &[origin="bottom"] {
transform-origin: top; transform-origin: bottom;
} }
} }
} }

2
ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class='Descriptions' :style="getStyle()"> <div class='Descriptions keep-ratio' origin="left" :style="getStyle()">
<div class="item" v-for="(item, index) in list" :key="`${item.key || item.label}${index}`" <div class="item" v-for="(item, index) in list" :key="`${item.key || item.label}${index}`"
:style="[gridStyle(item, index), transformStyle(itemStyle)]"> :style="[gridStyle(item, index), transformStyle(itemStyle)]">
<div class="title text" :style="transformStyle(titleStyle)"> <div class="title text" :style="transformStyle(titleStyle)">

148
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue
View File

@ -1,26 +1,26 @@
<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>
@ -29,62 +29,62 @@ 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>

516
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Card class='DisposalPlan' title="处置预案"> <Card class='DisposalPlan' title="处置预案">
<canvas ref="FlowCanvasRef" /> <canvas ref="FlowCanvasRef" class="keep-ratio" />
</Card> </Card>
</template> </template>
<script> <script>
@ -11,291 +11,291 @@ 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>

2
ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue
View File

@ -2,7 +2,7 @@
<Card2 class='Auditlists' title="审核列表"> <Card2 class='Auditlists' title="审核列表">
<InputSearch style="width: 100%;" /> <InputSearch style="width: 100%;" />
<div class="body"> <div class="body">
<ListItem v-for="item in list" :key="item.id" :data="item" /> <ListItem v-for="item in list" :key="item.id" :data="item" origin="left" class="middle-ratio" />
</div> </div>
<div class="footer"> <div class="footer">
<Pagination :total="90" /> <Pagination :total="90" />

Write Preview
Loading…
Cancel
Save