重置样式 更改 实时视频 增加

ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormInput.vue

@@ -21,18 +21,21 @@ export default {
   height: 100%;
 
   ::v-deep {
-    .el-input__inner {
+    // .el-input__inner {
-      background-color: #0D5F79;
+    //   background-color: #0D5F79;
-      color: #fff;
+    //   color: #fff;
-      border-radius: 2px;
+    //   border-radius: 2px;
-      border: 0;
+    //   border: 0;
-      height: fit-content;
+    //   height: 100%;
-      line-height: unset;
+    //   min-height: fit-content;
+    //   line-height: unset;
 
-      &::placeholder {
+    //   font-size: 12px;
-        color: #fff;
+
-      }
+    //   &::placeholder {
-    }
+    //     color: #fff;
+    //   }
+    // }
 
     .el-textarea__inner {
       background: #0A3E54;

ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormSelect.vue

@@ -46,5 +46,19 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-.FormSelect {}
+.FormSelect {
+  ::v-deep {
+    .el-input {
+      .el-input__inner {
+        font-size: 12px;
+      }
+
+      .el-input__suffix {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
 </style>

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

@@ -118,6 +118,7 @@ export default {
       .el-form-item__content {
         margin: 0 !important;
         flex: 1;
+        height: 100%;
 
         .el-input__prefix {
           color: #fff;

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

@@ -0,0 +1,28 @@
+<template>
+  <video controls class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
+</template>
+
+<script>
+import { openVideoStream } from "./videoStream.js"
+
+export default {
+  name: 'Video',
+  props: {
+    camId: {
+      type: String,
+      default: null
+    },
+    url: {
+      type: String,
+      default: null
+    }
+  },
+  mounted() {
+    openVideoStream(this.$refs.videoContainerRef, { camId: this.camId, url: this.url })
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.video-stream {}
+</style>

ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js

@@ -0,0 +1,41 @@
+import flvJs from "flv.js";
+import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+
+/**
+ *
+ * @param {HTMLElement} container 容器
+ * @param {{camId?: string; url?: string}?} options {camId: 相机ID; url: 直播地址}
+ * @returns
+ */
+export async function openVideoStream(container, { camId, url } = {}) {
+  if (camId) {
+    const { code, data } = await getCameraStream(camId).catch(() => ({}));
+
+    if (code != 200) return;
+
+    url = data.liveUrl;
+  }
+
+  if (!url) return;
+
+  const flvPlayer = flvJs.createPlayer({
+    type: "flv",
+    url: url,
+    isLive: true,
+    hasVideo: true,
+    hasAudio: true,
+  });
+
+  console.log(
+    "%c [ flvPlayer ]-26-「videoStream.js」",
+    "font-size:15px; background:#b2b540; color:#f6f984;",
+    flvPlayer
+  );
+
+  flvPlayer.attachMediaElement(container);
+
+  flvPlayer.load();
+  flvPlayer.play();
+
+  return flvPlayer;
+}

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

@@ -32,48 +32,8 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="scss" scope src="./scss/index.scss"></style>
-body {
+<style scoped lang="scss">
-
-  input,
-  textarea {
-    caret-color: white;
-  }
-
-  div {
-
-    /* 滚动条整体部分 */
-    &::-webkit-scrollbar {
-      width: 6px !important;
-      height: 6px !important;
-      padding: 15px;
-    }
-
-    /* 滚动条的轨道 */
-    &::-webkit-scrollbar-track {
-      background: rgba(17, 72, 90, .4);
-      border-radius: 4px;
-    }
-
-    /* 滚动条的滑块按钮 */
-    &::-webkit-scrollbar-thumb {
-      background: #3785A0;
-      border-radius: 4px;
-    }
-
-    /* 上下箭头 */
-    &::-webkit-scrollbar-button {
-      display: none;
-    }
-
-    /* 滚动条角 */
-    &::-webkit-scrollbar-corner {
-      display: none;
-    }
-  }
-}
-</style>
-<style scoped lang="less">
 .pageBox {
   background: #13272F;
   position: relative;

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue

@@ -6,7 +6,7 @@
         <img src="@screen/images/dialog/icon-video.png" />
       </div>
 
-      <video controls class="video-stream" ref="videoContainerRef" />
+      <Video class="video-stream" :camId="dialogData.camId" />
 
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
         <ElTabPane label="详细设计" name="first">
@@ -26,8 +26,9 @@
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue"
-import { openVideoStream } from "@screen/pages/Home/components/RoadAndEvents/utils/videoStream.js"
+import Video from "@screen/components/Video"
 import Descriptions from "./Descriptions.vue"
+
 import { dialogDelayVisible } from "./../mixin"
 
 // 摄像机 G35 K094+079
@@ -37,18 +38,14 @@ export default {
   components: {
     Dialog,
     Button,
-    Descriptions
+    Descriptions,
+    Video
   },
   data() {
     return {
       activeName: 'first'
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      openVideoStream(this.dialogData.camId, this.$refs.videoContainerRef)
-    })
-  },
   methods: {
     handleClickTabs() { }
   }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue

@@ -14,7 +14,7 @@
             <div class="btn">全屏</div>
           </div>
         </div>
-        <video controls class="videoStream" ref="videoContainerRef" />
+        <Video class="videoStream" :camId="dialogData.camId" />
       </div>
 
       <div class="content">
@@ -81,18 +81,20 @@
 <script>
 import Dialog from "@screen/components/Dialog/index.vue"
 import Button from "@screen/components/Buttons/Button.vue"
+import Video from "@screen/components/Video";
+
 import { dialogDelayVisible } from "./../mixin"
 import { CameraStatusEnum, CameraDirectionEnum } from "@screen/utils/enum.js"
 import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 import { throttle } from "lodash"
-import { openVideoStream } from "@screen/pages/Home/components/RoadAndEvents/utils/videoStream.js"
 
 export default {
   name: 'ControlCamera',
   mixins: [dialogDelayVisible],
   components: {
     Dialog,
-    Button
+    Button,
+    Video
   },
   data() {
     return {
@@ -120,11 +122,6 @@ export default {
       ]
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      openVideoStream(this.dialogData.camId, this.$refs.videoContainerRef)
-    })
-  },
   methods: {
     controlClick: throttle(function (type) {
       controlCamera(this.dialogData.camId, type)

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/videoStream.js

@@ -1,47 +0,0 @@
-import flvJs from "flv.js";
-import { getCameraStream } from "./httpList";
-
-/**
- *
- * @param {string} camId 相机ID
- * @param {HTMLElement} container 容器
- * @param {DPlayerOptions?} options 配置项
- * @returns
- */
-export async function openVideoStream(camId, container) {
-  const { code, data } = await getCameraStream(camId).catch(() => ({}));
-
-  if (code != 200) return;
-
-  const flvPlayer = flvJs.createPlayer({
-    type: "flv",
-    url: data.liveUrl,
-    isLive: true,
-    hasVideo: true,
-    hasAudio: true,
-  });
-
-  console.log(
-    "%c [ flvPlayer ]-26-「videoStream.js」",
-    "font-size:15px; background:#b2b540; color:#f6f984;",
-    flvPlayer
-  );
-
-  flvPlayer.attachMediaElement(container);
-
-  flvPlayer.load();
-  flvPlayer.play();
-
-  return flvPlayer;
-  // return new DPlayer({
-  //   container,
-  //   autoplay: true,
-  //   ...options,
-  //   hotkey: false,
-  //   video: {
-  //     url: data.liveUrl,
-  //     type: "hls",
-  //     // type: "flv",
-  //   },
-  // });
-}

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

@@ -8,7 +8,7 @@
 import Card from "./../../components/Card.vue";
 import { CanvasFlow } from "./utils";
 
-import { merge } from "lodash"
+import { merge } from "lodash";
 
 function getDefaultBlockOption() {
   return {
@@ -38,6 +38,12 @@ function getDefaultLegendOption() {
   }
 }
 
+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%)`,
+}
+
 export default {
   name: 'DisposalPlan',
   components: {
@@ -45,7 +51,12 @@ export default {
   },
   data() {
     return {
-      // list: []
+      data: null
+    }
+  },
+  watch: {
+    data() {
+      this.draw();
     }
   },
   mounted() {

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

@@ -1,20 +1,37 @@
 <template>
   <Card class='RealTimeVideo' title="实时视频">
-    RealTimeVideo
+    <Video class="item-video" />
+    <Video class="item-video" />
   </Card>
 </template>
 
 <script>
-import Card from "./../../components/Card.vue"
+import Card from "./../../components/Card.vue";
-
+import Video from "@screen/components/Video"
 export default {
   name: 'RealTimeVideo',
   components: {
-    Card
+    Card,
+    Video
   }
 }
 </script>
 
 <style lang='scss' scoped>
-.RealTimeVideo {}
+.RealTimeVideo {
+  ::v-deep {
+    .content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 9px;
+    }
+  }
+
+  .item-video {
+    flex: 1;
+    width: calc(50% - 4.5px);
+    height: 100%;
+  }
+}
 </style>

ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss

@@ -0,0 +1,150 @@
+div.el-popper {
+  background: #123542;
+  box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.08),
+    1px 1px 2px 0px rgba(82, 90, 102, 0.04);
+  border-radius: 4px 4px 4px 4px;
+  opacity: 1;
+  border: 0;
+
+  .el-select-dropdown__list {
+    .el-select-dropdown__item {
+      font-size: 15px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      /**
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      */
+      &:hover {
+        background: #0d5f79;
+      }
+      &.hover {
+        background: #0d5f79;
+      }
+    }
+  }
+
+  &[x-placement^="top"] {
+    div.popper__arrow {
+      border-top-color: #00799f;
+
+      &::after {
+        border-top-color: #00799f;
+      }
+    }
+  }
+  &[x-placement^="left"] {
+    div.popper__arrow {
+      border-left-color: #00799f;
+
+      &::after {
+        border-left-color: #00799f;
+      }
+    }
+  }
+  &[x-placement^="right"] {
+    div.popper__arrow {
+      border-right-color: #00799f;
+
+      &::after {
+        border-right-color: #00799f;
+      }
+    }
+  }
+  &[x-placement^="bottom"] {
+    div.popper__arrow {
+      border-bottom-color: #00799f;
+
+      &::after {
+        border-bottom-color: #00799f;
+      }
+    }
+  }
+  &.el-select-dropdown {
+    &[x-placement^="top"] {
+      div.popper__arrow {
+        border-top-color: #1a3442;
+
+        &::after {
+          border-top-color: #1a3442;
+        }
+      }
+    }
+    &[x-placement^="left"] {
+      div.popper__arrow {
+        border-left-color: #1a3442;
+
+        &::after {
+          border-left-color: #1a3442;
+        }
+      }
+    }
+    &[x-placement^="right"] {
+      div.popper__arrow {
+        border-right-color: #1a3442;
+
+        &::after {
+          border-right-color: #1a3442;
+        }
+      }
+    }
+    &[x-placement^="bottom"] {
+      div.popper__arrow {
+        border-bottom-color: #1a3442;
+
+        &::after {
+          border-bottom-color: #1a3442;
+        }
+      }
+    }
+  }
+}
+
+div.el-scrollbar {
+  .el-scrollbar__wrap {
+    /**
+      overflow: auto;
+    */
+    overflow-x: hidden;
+  }
+}
+
+body {
+  input.el-input__inner {
+    background-color: #0d5f79;
+    color: #fff;
+    border-radius: 2px;
+    border: 0;
+    height: 100%;
+    min-height: fit-content;
+    line-height: unset;
+
+    &::placeholder {
+      color: #fff;
+    }
+  }
+
+  div.el-input {
+    input.el-input__inner {
+      font-size: 12px;
+    }
+  }
+  div.el-textarea {
+    textarea.el-textarea__inner {
+      background: #0a3e54;
+      border-radius: 5px;
+      opacity: 1;
+      border: 1px solid rgba(98, 224, 254, 0.6);
+    }
+
+    .el-input__count {
+      background-color: rgba(0, 0, 0, 0);
+      font-size: 12px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #3de8ff;
+      line-height: 14px;
+    }
+  }
+}

ruoyi-ui/src/views/JiHeExpressway/scss/index.scss

@@ -0,0 +1,39 @@
+@import url(./el-reset.scss);
+
+body {
+  input,
+  textarea {
+    caret-color: white;
+  }
+
+  div {
+    /* 滚动条整体部分 */
+    &::-webkit-scrollbar {
+      width: 6px !important;
+      height: 6px !important;
+      padding: 15px;
+    }
+
+    /* 滚动条的轨道 */
+    &::-webkit-scrollbar-track {
+      background: rgba(17, 72, 90, 0.4);
+      border-radius: 4px;
+    }
+
+    /* 滚动条的滑块按钮 */
+    &::-webkit-scrollbar-thumb {
+      background: #3785a0;
+      border-radius: 4px;
+    }
+
+    /* 上下箭头 */
+    &::-webkit-scrollbar-button {
+      display: none;
+    }
+
+    /* 滚动条角 */
+    &::-webkit-scrollbar-corner {
+      display: none;
+    }
+  }
+}