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

ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue

@@ -11,7 +11,7 @@
           <span>{{ item.label }}: </span>
           <span>
             <slot :name="`form-${item.key}`" :data="cardData">
-              {{ getValue(item.key) }}{{ item.suffix }}
+              {{ getValue(item) }}{{ item.suffix }}
             </slot>
           </span>
         </p>
@@ -106,8 +106,12 @@ export default {
     };
   },
   methods: {
-    getValue(key) {
+    getValue(item) {
-      return pathGet(this.cardData, key) ?? "-";
+      let value = pathGet(this.cardData, item.key) ?? "-";
+      if (item.value) {
+        value = item.value(this.cardData);
+      }
+      return value;
     },
 
     onClick() {

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;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <Card class='DeviceControl' title="设备管控">
+    TODO
+  </Card>
+</template>
+
+<script>
+import Card from "@screen/components/Card2/Card.vue";;
+
+import { merge } from "lodash";
+import { provideMixin } from "./../../mixin"
+
+
+
+export default {
+  name: 'DeviceControl',
+  mixins: [provideMixin],
+  components: {
+    Card
+  },
+  data() {
+    return {
+      data: null
+    }
+  },
+  watch: {
+    data() {
+      
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    
+  },
+
+}
+</script>
+
+<style lang='scss' scoped>
+.DeviceControl {
+  ::v-deep {
+    .content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+}
+</style>

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);
+  }
+}

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/index.vue

@@ -13,12 +13,13 @@
 
     <div class="road-lane">
       <div v-for="i in 11">
-        <img v-if="i != 6" src="./images/normal.svg">
+        <!-- <img v-if="i != 6" :src="'./images/'+(detailData.lang.indexOf((i+1).toString())===-1?'normal.svg':'congestion.svg')"> -->
-        <!-- <img v-if="i != 6" src="./images/congestion.svg"> -->
+        <img v-if="i != 6 && !detailData.lang.includes((i).toString()) " src="./images/normal.svg">
+        <img v-if="i != 6 && detailData.lang.includes((i).toString())" src="./images/congestion.svg">
       </div>
     </div>
     <div class="bottom-info">
-      <div class="tag" >{{ detailData.eventLevel || '暂无事件等级' }}</div>
+      <div class="tag" >{{ detailData.eventLevel?`${detailData.eventCause+['','一','二','三','四','五'][detailData.eventLevel]}级事件` : '暂无事件等级' }}</div>
     </div>
 
     <EditEventInformationDialog v-model="editEventInformationDialogVisible" />
@@ -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;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue

@@ -13,7 +13,7 @@
       </template>
     </Form>
 
-    <div class="line"></div>
+    <!-- <div class="line"></div>
 
     <Descriptions :list="list" style="flex: 1;" column="1" titleStyle="align-self: flex-start;">
       <template #content-informationBoard>
@@ -22,15 +22,15 @@
           <img src="./images/add.svg" />
         </div>
       </template>
-    </Descriptions>
+    </Descriptions> -->
 
     <div class="bottom">
       <ButtonGradient class="title-button special-button">
         一键发布
       </ButtonGradient>
-      <ButtonGradient class="title-button special-button">
+      <!-- <ButtonGradient class="title-button special-button">
         发布预案
-      </ButtonGradient>
+      </ButtonGradient> -->
     </div>
   </Card>
 </template>
@@ -76,8 +76,7 @@ export default {
         options: {
           type: "textarea",
           autosize: true,
-          maxlength: 200,
+          autosize: { minRows: 4, maxRows: 4 },
-          autosize: { minRows: 9, maxRows: 9 },
           showWordLimit: true
         }
       },

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",
+  EventInformation: "1 / 1 / span 9 / 1", // 事件信息（左1）
-  DispatchLiaison: "10 / 1 / span 7 / 2",
+  DispatchLiaison: "10 / 1 / span 9 / 2", // 调度联络（左2）
-  DisposalPlan: "17 / 1 / span 9 / 2",
+  TrafficControl: "19 / 1 / span 7 / 2", //交通管制（右3）
-  CrowdnessIndicatorRankings: "1 / 2 / span 11 / 2",
+  CrowdnessIndicatorRankings: "1 / 2 / span 11 / 2", //地图 / 拥挤指数排名情况（中1）
-  DisposalProcess: "12 / 2 / span 14 / 2",
+  DisposalProcess: "12 / 2 / span 14 / 2", //处置过程（中2）
-  RealTimeVideo: "1 / 3 / span 6 / 3",
+  RealTimeVideo: "1 / 3 / span 7 / 3", //实时视频（右1）
-  ReleaseInformation: "7 / 3 / span 14 / 3",
+  ReleaseInformation: "8 / 3 / span 7 / 3", //信息发布（右2）
-  TrafficControl: "21 / 3 / span 5 / 3",
+  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) => {});
     },