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

增加缩放

wangqin
Joe 10 months ago
parent
38ce135998
commit
e17acddfd3
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
Split 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',
''
],
[
'--middle-scale',
''
],
];
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[2][1] = `scaleX(${1 - (scaleX - scaleY) / 2})`;
} 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[2][1] = `scaleX(${1 - (scaleY - scaleX) / 2})`;
}
cssGlobalVariable.forEach((data) => {
@ -94,47 +102,35 @@ export default {
body {
.keep-ratio {
transform: var(--keep-ratio);
transition: all .15s linear;
&[origin] {
transform-origin: attr(origin);
}
&-left {
transform-origin: left;
}
&-right {
transform-origin: right;
}
}
&-bottom {
transform-origin: bottom;
}
.reverse-ratio {
transform: var(--reverse-scale);
}
&-top {
transform-origin: top;
}
.middle-ratio {
transform: var(--middle-scale);
}
.reverse-scale {
transform: var(--reverse-scale);
.keep-ratio,
.reverse-ratio,
.middle-ratio {
transition: all .15s linear;
&-left {
&[origin="left"] {
transform-origin: left;
}
&-right {
&[origin="right"] {
transform-origin: right;
}
&-bottom {
transform-origin: bottom;
&[origin="top"] {
transform-origin: top;
}
&-top {
transform-origin: top;
&[origin="bottom"] {
transform-origin: bottom;
}
}
}

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

@ -1,5 +1,5 @@
<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}`"
:style="[gridStyle(item, index), transformStyle(itemStyle)]">
<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>
<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>
@ -29,62 +29,62 @@ 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>

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

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

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

@ -2,7 +2,7 @@
<Card2 class='Auditlists' title="审核列表">
<InputSearch style="width: 100%;" />
<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 class="footer">
<Pagination :total="90" />

Write Preview
Loading…
Cancel
Save