From e17acddfd3dd590106372c49dbc628f2291e6ccb Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Mon, 22 Jan 2024 11:08:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JiHeExpressway/components/Adaptation.vue  |  54 +-
 .../components/Descriptions.vue               |   2 +-
 .../Cards/DispatchLiaison/index.vue           | 148 ++---
 .../Cards/DisposalPlan/index.vue              | 516 +++++++++---------
 .../Cards/AuditLists/index.vue                |   2 +-
 5 files changed, 359 insertions(+), 363 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
index 47f79ff9..08de14d1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
@@ -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;
     }
   }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
index a9da0db4..d6bad9c8 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
@@ -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)">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue
index a1196192..9797ad67 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue
@@ -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>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
index 2311f4a5..b79852d3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue
@@ -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>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue
index ccf1ba2b..6e818cb3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue
@@ -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" />