行车诱导 设备操作提交

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

@@ -3,8 +3,8 @@
     <template v-for="(item, index) in formList">
       <ElFormItem class="formItem" :rules="getRules(item)" v-if="formItemVisible(item)" :key="item.key"
         :label="item.label" :style="gridStyle(item, index)">
-        <slot :name="item.key" :data="item" :formData="formData">
+        <slot :name="item.key" :data="item" :formData="modelFormData">
-          <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]"
+          <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="modelFormData[item.key]"
             v-on="resolveListeners(item.ons)" />
         </slot>
       </ElFormItem>
@@ -67,15 +67,28 @@ export default {
       default: "3"
     }
   },
+  model: {
+    prop: 'value',
+    event: "update:value"
+  },
   data() {
     return {
-      formData: {}
+      formData: this.value || {}
     }
   },
   created() {
     this.reset();
   },
   computed: {
+    modelFormData: {
+      get() {
+        return this.formData;
+      },
+      set(data) {
+        this.formData = data;
+        this.$emit('update:value', this.formData);
+      }
+    },
     gridStyle() {
       return (item, index) => ({
         gridRow: `span ${item.gridRow || 1}`,
@@ -84,7 +97,7 @@ export default {
     },
     formItemVisible() {
       return item => {
-        const result = item.visible ? item.visible(this.formData) : true;
+        const result = item.visible ? item.visible(this.modelFormData) : true;
 
         // if (!result) {
         //   delete this.formData[item.key];
@@ -102,13 +115,13 @@ export default {
       const result = {};
 
       for (const key in callbacks) {
-        result[key] = (...args) => callbacks[key](...args, this.formData, this)
+        result[key] = (...args) => callbacks[key](...args, this.modelFormData, this)
       }
 
       return result
     },
     reset() {
-      return this.formData = reduceDefaultValue(this.formList);
+      return this.modelFormData = reduceDefaultValue(this.formList);
     },
     getStyle() {
       return {

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

@@ -12,13 +12,17 @@ export default {
       type: String,
       default: null
     },
+    pileNum: {
+      type: String,
+      default: null
+    },
     url: {
       type: String,
       default: null
     }
   },
   mounted() {
-    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url });
+    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum });
 
     this.$once("hook:beforeDestroy", () => player.destroy());
   }

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

@@ -12,7 +12,7 @@
         <div class="btn">全屏</div>
       </div>
     </div>
-    <Video class="video-stream" />
+    <Video class="video-stream" :pileNum="pileNum" :camId="camId" :url="url" />
   </div>
 </template>
 
@@ -29,6 +29,10 @@ export default {
       type: String,
       default: null
     },
+    pileNum: {
+      type: String,
+      default: null
+    },
     url: {
       type: String,
       default: null

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

@@ -1,5 +1,8 @@
 import flvJs from "flv.js";
-import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import {
+  getCameraStream,
+  getNearCamera,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 
 /**
  *
@@ -56,28 +59,32 @@ export class HttpLivePlayer {
 
   constructor(container, options) {
     this.container = container;
-    console.log("--- 视频 1 ---");
 
     this.getUrl(options).then(() => {
-      console.log("--- 视频 3 ---");
       this.initLiveVideo();
     });
   }
 
-  async getUrl({ camId, url } = {}) {
+  async getUrl({ camId, url, pileNum } = {}) {
-    console.log("--- 视频 2 ---");
+    this.url = url;
+
+    if (pileNum) {
+      const { code, data } = await getNearCamera(pileNum).catch(() => ({}));
+      if (code != 200 || !data?.length) return;
+
+      camId = data[0].camId;
+    }
+
     if (camId) {
       const { code, data } = await getCameraStream(camId).catch(() => ({}));
-      console.log("--- 视频 2.4 ---");
       if (code != 200) return;
 
       url = data.liveUrl;
     }
 
-    console.log("--- 视频 2.7 ---");
     if (!url) return Promise.reject("获取 url 失败!");
 
-    return (this.url = url);
+    return;
   }
 
   destroy() {
@@ -91,12 +98,12 @@ export class HttpLivePlayer {
   }
 
   initLiveVideo() {
-    console.log("--- 视频 4 ---");
-
     this.destroy();
 
     this.lastDecodedFrames = null;
 
+    if (!this.url) return;
+
     this.player = flvJs.createPlayer(
       {
         type: "flv",

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue

@@ -1,17 +1,26 @@
 <template>
   <Dialog v-model="modelVisible" title="设备操作">
     <div class='DeviceControlDialog'>
-      <Form class="form" ref="FormConfigRef" :formList="formList" column="1" style="flex: 1;" labelWidth="120px" />
+
-
+      <Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="120px" />
-      <div class="footer">
+
-        <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false">
+      <div class="tips" v-if="formData.controlType === '01'">
-          取消
+        说明: 定时控制模式下,诱导灯在开始时间自动打开,结束时间自动关闭
-        </Button>
-        <Button @click.native="handleSubmit" :loading="submitting">
-          确定
-        </Button>
       </div>
+      <div class="tips" v-if="formData.controlType === '02'">
+        说明: 万年历自动模式下,诱导灯在白天会自动关闭,夜晚会自动打开
+      </div>
+
     </div>
+
+    <template #footer>
+      <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false">
+        取消
+      </Button>
+      <Button @click.native="handleSubmit" :loading="submitting">
+        确定
+      </Button>
+    </template>
   </Dialog>
 </template>
 
@@ -70,6 +79,7 @@ export default {
   data() {
     return {
       submitting: false,
+      formData: {},
       formList: [
         {
           label: "类型:",
@@ -236,6 +246,11 @@ export default {
 
       if (!formData.onWorkStatus || !formData.inWorkStatus) return Message.error(`工作状态不能为空!`);
 
+      if (["01", "02"].includes(result.mode)) {
+        if (["04", "00"].includes(formData.onWorkStatus)) return Message.error(`上行工作状态不能选择当前类型!`);
+        if (["04", "00"].includes(formData.inWorkStatus)) return Message.error(`下行工作状态不能选择当前类型!`);
+      }
+
       result.onWorkStatus = formData.onWorkStatus;
       result.inWorkStatus = formData.inWorkStatus;
 
@@ -298,11 +313,8 @@ export default {
   flex-direction: column;
   gap: 15px;
 
-  .footer {
+  .tips {
-    display: flex;
+    font-size: 12px;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 9px;
   }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <Dialog v-model="obverseVisible" title="行车诱导">
     <div class="DrivingGuidance">
-      <Video class="video-stream" :camId="dialogData.iotDeviceId" />
+      <Video class="video-stream" :pileNum="dialogData.stakeMarkId" />
 
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
         <ElTabPane label="详细设计" name="first">

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

@@ -19,6 +19,21 @@ export function getCameraStream(camId, media = 1) {
   });
 }
 
+/**
+ *
+ * @param {*} pileNum
+ * @returns
+ */
+export function getNearCamera(pileNum) {
+  return request({
+    url: "/video/nearCamListPileNum",
+    method: "get",
+    params: {
+      pileNum,
+    },
+  });
+}
+
 /**
  *  球机进行控制
  * @param {string} camId 相机 ID