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() { 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; 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 00000000..dc1fc869 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/images/lane.jpg differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue index 505bb1dc..7b49b40c 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue @@ -13,12 +13,13 @@
- - + + +
-
{{ 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) => {}); },