From a850b67f642ed640612bcc6194797f7cd6f3b954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9C=8B?= Date: Fri, 12 Apr 2024 11:25:31 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E6=A1=86=E5=BC=B9=E4=B8=8D=E5=87=BA=E6=9D=A5=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue index 6291baa9..7a574411 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue @@ -113,7 +113,7 @@ export default { height: 100%; background: rgba(0, 0, 0, 0.36); border-radius: 0px 0px 0px 0px; - z-index: 2100; + z-index: 1100; // display: flex; // align-items: center; // justify-content: center; From 85d66d9cc6b3f9dfd275121071947fdc49b7a9aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9C=8B?= Date: Fri, 12 Apr 2024 11:26:40 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=A2=9E=E5=8A=A0value=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/JiHeExpressway/components/Card1/index.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue index f218b3fc..7860b65d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue @@ -11,7 +11,7 @@ {{ item.label }}: - {{ getValue(item.key) }}{{ item.suffix }} + {{ getValue(item) }}{{ item.suffix }}

@@ -106,8 +106,12 @@ export default { }; }, methods: { - getValue(key) { - return pathGet(this.cardData, key) ?? "-"; + getValue(item) { + let value = pathGet(this.cardData, item.key) ?? "-"; + if (item.value) { + value = item.value(this.cardData); + } + return value; }, onClick() { From d589423b523db04de33801f3bb4d96496623487e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=92=A6?= <360013221@qq.com> Date: Fri, 12 Apr 2024 15:47:40 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=8C=89=E7=85=A7=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E8=87=AA=E5=8A=A8=E5=88=87=E6=8D=A2=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Cards/DeviceControl/index.vue | 51 +++++ .../Cards/DeviceControl/utils.js | 207 ++++++++++++++++++ .../Cards/EventInformation/images/lane.jpg | Bin 0 -> 2026 bytes .../Cards/EventInformation/index.vue | 11 +- .../Cards/ReleaseInformation/index.vue | 11 +- .../control/event/commandDispatch/index.vue | 33 ++- 6 files changed, 293 insertions(+), 20 deletions(-) create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/utils.js create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/images/lane.jpg diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue new file mode 100644 index 00000000..58a00de3 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/utils.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/utils.js new file mode 100644 index 00000000..b97f50e7 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/utils.js @@ -0,0 +1,207 @@ +export function getQuadrant(angle) { + angle %= 360.0; + if (angle < 0) angle += 360.0; + var quadrant = Math.floor(angle / 90) + 1; + return quadrant; +} + +export function calcPoint(x0, y0, width, height, angle) { + const parseAngle = parseFloat(angle); + + angle = (Math.PI / 180) * parseFloat(parseAngle); + + x0 += width / 2; + y0 += height / 2; + + const hypotenuse = width / 2 > height / 2 ? width / 2 : height / 2; + + // 对边 + let oppositeEdge = Math.abs(hypotenuse * Math.sin(angle)); + + // 邻边 + let adjacentEdge = Math.abs(hypotenuse * Math.cos(angle)); + + let point0 = [], + point1 = []; + + switch (parseFloat(parseAngle) % 360.0) { + case 180: + oppositeEdge = adjacentEdge; + adjacentEdge = 0; + break; + case 90: + case 270: + adjacentEdge = oppositeEdge; + oppositeEdge = 0; + break; + } + + switch (getQuadrant(parseAngle)) { + case 1: + point0 = [x0 - adjacentEdge, y0 + oppositeEdge]; + point1 = [x0 + adjacentEdge, y0 - oppositeEdge]; + break; + case 2: + point0 = [x0 - adjacentEdge, y0 - oppositeEdge]; + point1 = [x0 + adjacentEdge, y0 + oppositeEdge]; + break; + case 3: + point0 = [x0 + adjacentEdge, y0 - oppositeEdge]; + point1 = [x0 - adjacentEdge, y0 + oppositeEdge]; + break; + case 4: + point0 = [x0 + adjacentEdge, y0 + oppositeEdge]; + point1 = [x0 - adjacentEdge, y0 - oppositeEdge]; + break; + } + + return angle > 0 ? [point0, point1] : [point1, point0]; +} + +export class CanvasFlow { + canvas = null; + context = null; + zoom = 3; + constructor(canvas) { + this.canvas = canvas; + this.context = canvas.getContext("2d"); + + this.canvas.width = canvas.clientWidth * this.zoom; + this.canvas.height = canvas.clientHeight * this.zoom; + } + + drawRectangle({ + x, + y, + width, + height, + borderWidth, + borderColor, + backgroundColor, + radius, + }) { + this.context.beginPath(); + + if (backgroundColor) this.context.fillStyle = backgroundColor; + + x *= this.zoom; + y *= this.zoom; + width *= this.zoom; + height *= this.zoom; + + if (radius) { + this.context.roundRect(x, y, width, height, radius); + this.context.fill(); + } else { + this.context.fillRect(x, y, width, height); + } + + if (typeof borderWidth === "number") { + borderWidth *= this.zoom; + + this.context.lineWidth = borderWidth; + this.context.strokeStyle = borderColor; + + this.context.stroke(); + } + } + + transformCssLinearGradient(x, y, width, height, linearGradient) { + const [_, deg, ...stopStrings] = linearGradient.match(/[^,()]+/g); + + const stops = stopStrings.map((stop) => { + const [color, offset] = stop.trim().split(" "); + + return { + color, + offset: parseFloat(offset) * 0.01, + }; + }); + + const [point0, point1] = calcPoint(x, y, width, height, deg); + + return [ + { + x0: point0[0], + y0: point0[1], + x1: point1[0], + y1: point1[1], + }, + stops, + ]; + } + + setLinearGradient({ x0, y0, x1, y1 }, stops) { + x0 *= this.zoom; + x1 *= this.zoom; + y0 *= this.zoom; + y1 *= this.zoom; + + const gradient = this.context.createLinearGradient(x0, y0, x1, y1); + + stops.forEach(({ offset, color }) => { + gradient.addColorStop(offset, color); + }); + + this.context.fillStyle = gradient; + } + + drawLine({ x, y, color, lineWidth = 1 }, vertices) { + x *= this.zoom; + y *= this.zoom; + + this.context.beginPath(); + + this.context.moveTo(x, y); + + vertices.forEach(({ x, y }) => { + this.context.lineTo(x * this.zoom, y * this.zoom); + }); + + this.context.strokeStyle = color; + + this.context.lineWidth = lineWidth; + + this.context.stroke(); + } + + fillText( + text, + { + x, + y, + fontSize = 15, + color, + align = "center", + fontWeight = "normal", + fontFamily = "微软雅黑", + } = {}, + { width: rectWidth = 0, height: rectHeight = 0 } = {} + ) { + this.context.beginPath(); + + this.context.font = `${fontWeight} ${fontSize * this.zoom}px ${fontFamily}`; + + this.context.textBaseline = "middle"; + + const textWidth = this.context.measureText(text).width; + + x *= this.zoom; + + switch (align) { + case "center": + x += (rectWidth * this.zoom - textWidth) / 2; + + y += rectHeight / 2; + break; + } + + this.context.fillStyle = color; + + this.context.fillText(text, x, y * this.zoom); + } + + clear() { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/images/lane.jpg b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/images/lane.jpg new file mode 100644 index 0000000000000000000000000000000000000000..dc1fc869a3232accaed5fb29abc8c4b51fba7bf7 GIT binary patch literal 2026 zcmb7Fdsxz08vbFcmZr92&FqF3q#ey0sEj(IXqwwt>n%qoFPIlZ#S1w62oy6$+46DI zQB$U&iE>6QvC+yTBJ+Yx>xLIhO+g`do+vMiT1ikc=t4EKyU)`$&;0S8>-WCj`Of*y zITg{7pIDgfGy?#@Vt-g@3;;ly^lkcPBYnxpzfz$efD&TkDe)2EXdEdYk(NP9$0G{! z3-t2<5D-*YkcP{}Q()=%ECLY&U+LY_ z;6Z_A0flJ2Kt7(51}n_ZBZBBc4E&WYTHiJdBjK=DCX`$ZJU${CwwFZ4!+a1P2oHFm z87zRDk%^88-S>v9?_uEC6iNXaiKNkJ2pS4OB4;5z{rvop9$rW7hK1{Mcp3_MS zhW*=85S9P}fcbj{K*r?9egXiKBl|;xV++qN$vsKdSvCVt8BcyZDWvB1)sDak^};`f z)H@`!Ok1#wA3#vZ22{AR1oHh8%bRhwF1(o2^gS)CvewPs|M)6Q*or&z2jlsIf1cSE z*RR%{KgXCAXPi*bss-Ao0fC@cCTlA;3BUg@e_zL+EG`mf&x>k-y|rxVtd=@Tv+Q|! z=LB1>TPOt)N3k1^2d^^JGnW~iSsZ7(t?N!@$D!R<=oVZqT=5x!Oy%^cpvwceFV+(X8j?y=Ux z=p6{zz6RWq>(;Y4|3w^90$~lmf*MzU?kDT!%P0?@cY6y#47MM<*I>zE7cQSXm{#=d@#(9d0 zfg0|kW03GrpU@K1Q5?_|9b@-qI`Fssanf;G`3L?GN%^Qr)rmi$EP?-&7T-WDi>~? z>*`f@+~bETprhx-`R6HTKa%u%S@1NbNtI@S1`=1PwlW!LZ5vagET(@>wiZEo`2@&K}QRQCXQ*YtH#A?4a`7$<
- - + + +
-
{{ detailData.eventLevel || '暂无事件等级' }}
+
{{ detailData.eventLevel?`${detailData.eventCause+['','一','二','三','四','五'][detailData.eventLevel]}级事件` : '暂无事件等级' }}
@@ -95,10 +96,10 @@ export default { } .road-lane { - background-image: url(./images/lane.svg); + background-image: url(./images/lane.jpg); flex: 1; background-repeat: no-repeat; - background-size: 100% auto; + background-size: 100% 100%; // background-size: auto auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr .5fr 1fr 1fr 1fr 1fr 1fr; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue index 76c82e27..d70830b0 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue @@ -13,7 +13,7 @@ -
+
一键发布 - +
@@ -76,8 +76,7 @@ export default { options: { type: "textarea", autosize: true, - maxlength: 200, - autosize: { minRows: 9, maxRows: 9 }, + autosize: { minRows: 4, maxRows: 4 }, showWordLimit: true } }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue index ddb1518d..fcad6514 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue @@ -23,14 +23,15 @@ const components = files.keys().reduce((components, key) => { }, {}); const originGridArea = { - EventInformation: "1 / 1 / span 9 / 1", - DispatchLiaison: "10 / 1 / span 7 / 2", - DisposalPlan: "17 / 1 / span 9 / 2", - CrowdnessIndicatorRankings: "1 / 2 / span 11 / 2", - DisposalProcess: "12 / 2 / span 14 / 2", - RealTimeVideo: "1 / 3 / span 6 / 3", - ReleaseInformation: "7 / 3 / span 14 / 3", - TrafficControl: "21 / 3 / span 5 / 3", + EventInformation: "1 / 1 / span 9 / 1", // 事件信息（左1） + DispatchLiaison: "10 / 1 / span 9 / 2", // 调度联络（左2） + TrafficControl: "19 / 1 / span 7 / 2", //交通管制（右3） + CrowdnessIndicatorRankings: "1 / 2 / span 11 / 2", //地图 / 拥挤指数排名情况（中1） + DisposalProcess: "12 / 2 / span 14 / 2", //处置过程（中2） + RealTimeVideo: "1 / 3 / span 7 / 3", //实时视频（右1） + ReleaseInformation: "8 / 3 / span 7 / 3", //信息发布（右2） + DeviceControl: "15 / 3 / span 11 / 3", //设备管控（右3） + // DisposalPlan: "17 / 1 / span 9 / 2", //处置预案（作废） }; export default { @@ -41,7 +42,7 @@ export default { props: { detailId: { type: [String, Number], - default: 2, + default: '96b9918efc01488cb22fa1d9d3236dfd', }, }, provide() { @@ -72,7 +73,21 @@ export default { }) .then((result) => { if (result.code != 200) return; + console.log(result.data) this.provideData.detail = result.data; + if(['设备设施隐患','非法上路','施工建设','服务区异常'].includes(result.data.eventName)){ + const gridArea = {...originGridArea} + // 第一列变化 + gridArea['DispatchLiaison'] = '10 / 1 / span 16 / 2' + delete gridArea.TrafficControl; + if(['设备设施隐患','非法上路'].includes(result.data.eventName)){ + // 第三列变化 + gridArea['RealTimeVideo'] = '1 / 3 / span 13 / 3' + delete gridArea.ReleaseInformation; + } + + this.gridAreaMap = gridArea; + } }) .catch((err) => {}); },