行车诱导设备操作提交

1 year ago · 708a24a165
7 changed files with 88 additions and 33 deletions
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
+++ b/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">
-          <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]"
+        <slot :name="item.key" :data="item" :formData="modelFormData">
+          <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 {
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue
+++ b/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());
  }
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
+++ b/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
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
+++ b/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 } = {}) {
-    console.log("--- 视频 2 ---");
+  async getUrl({ camId, url, pileNum } = {}) {
+    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",
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
+++ b/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" />
-
-      <div class="footer">
-        <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false">
-          取消
-        </Button>
-        <Button @click.native="handleSubmit" :loading="submitting">
-          确定
-        </Button>
+
+      <Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="120px" />
+
+      <div class="tips" v-if="formData.controlType === '01'">
+        说明: 定时控制模式下,诱导灯在开始时间自动打开,结束时间自动关闭
      </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 {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 9px;
+  .tips {
+    font-size: 12px;
  }
 }
 </style>
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
+++ b/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">
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
+++ b/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