八项作业添加监控播放

src/views/eightwork_videomanager/components/add.vue

@@ -1,49 +1,49 @@
 <template>
   <el-dialog v-model="visible" title="视频列表" width="1200px">
-        <el-form
-                :model="searchForm"
-                label-width="100px"
-                @submit.prevent="fnResetPagination"
-        >
-          <el-row>
-            <el-col :span="6">
-              <el-form-item label="关键字查询" prop="KEYWORDS">
-                <el-input
-                        v-model="searchForm.KEYWORDS"
-                        placeholder="请输入关键字"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label-width="10px">
-                <el-button type="primary" native-type="submit">搜索</el-button>
-                <el-button native-type="reset" @click="fnResetPagination">
-                  重置
-                </el-button>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <layout-table
-                :data="list"
-                v-model:pagination="pagination"
-                @get-data="fnGetData"
-        >
-          <el-table-column label="序号" width="70">
-            <template v-slot="{ $index }">
-              {{ serialNumber(pagination, $index) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="GBS_NUM" label="视频设备编号" />
-          <el-table-column prop="VIDEONAME" label="视频名称" />
-          <el-table-column label="操作" width="80">
-            <template v-slot="{ row }">
-              <el-button type="primary" text link @click="fnSubmit(row)">
-                加入
-              </el-button>
-            </template>
-          </el-table-column>
-        </layout-table>
+    <el-form
+      :model="searchForm"
+      label-width="100px"
+      @submit.prevent="fnResetPagination"
+    >
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="关键字查询" prop="KEYWORDS">
+            <el-input
+              v-model="searchForm.KEYWORDS"
+              placeholder="请输入关键字"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label-width="10px">
+            <el-button type="primary" native-type="submit">搜索</el-button>
+            <el-button native-type="reset" @click="fnResetPagination">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <layout-table
+      :data="list"
+      v-model:pagination="pagination"
+      @get-data="fnGetData"
+    >
+      <el-table-column label="序号" width="70">
+        <template v-slot="{ $index }">
+          {{ serialNumber(pagination, $index) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="GBS_NUM" label="视频设备编号" />
+      <el-table-column prop="VIDEONAME" label="视频名称" />
+      <el-table-column label="操作" width="80">
+        <template v-slot="{ row }">
+          <el-button type="primary" text link @click="fnSubmit(row)">
+            加入
+          </el-button>
+        </template>
+      </el-table-column>
+    </layout-table>
 
     <template #footer>
       <el-button @click="visible = false">关闭</el-button>
@@ -52,46 +52,53 @@
 </template>
 
 <script setup>
-  import { serialNumber } from "@/assets/js/utils";
-  import useListData from "@/assets/js/useListData";
-  import {
-    getVideoManagerList, setEightWorkVideoManagerDelete,
-    setEightWorkVideoManagerList,
-    setVideoManagerList
-  } from "@/request/eightwork_videomanager";
-  import {useVModel} from "@vueuse/core";
-  import {debounce} from "throttle-debounce";
-  import {ElMessage, ElMessageBox} from "element-plus";
-  const props = defineProps({
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    checkNo: {
-      type: String,
-      required: true,
-      default: '',
-    },
-  });
-  const emits = defineEmits(["update:visible",'get-data']);
-  const visible = useVModel(props, "visible", emits);
-  const { list, pagination,searchForm, fnGetData, fnResetPagination } =
-          useListData(getVideoManagerList);
-  const fnSubmit = debounce(
-          1000,
-          async (row) => {
-            const resData = await setVideoManagerList({VIDEOMANAGER_ID:row.VIDEOMANAGER_ID})
-            if(resData.pd){
-              await setEightWorkVideoManagerDelete({EIGHTWORKVIDEOMANAGER_ID:resData.pd.EIGHTWORKVIDEOMANAGER_ID})
-              await ElMessageBox.confirm("该监控已绑定其他作业，是否更改？", { type: "warning" });
-            }
-            await setEightWorkVideoManagerList({...row, CHECK_NO: props.checkNo})
-            ElMessage.success("操作成功");
-            emits('get-data')
-          },
-          { atBegin: true }
-  );
+import { serialNumber } from "@/assets/js/utils";
+import useListData from "@/assets/js/useListData";
+import {
+  getVideoManagerList,
+  setEightWorkVideoManagerDelete,
+  setEightWorkVideoManagerList,
+  setVideoManagerList,
+} from "@/request/eightwork_videomanager";
+import { useVModel } from "@vueuse/core";
+import { debounce } from "throttle-debounce";
+import { ElMessage, ElMessageBox } from "element-plus";
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  checkNo: {
+    type: String,
+    required: true,
+    default: "",
+  },
+});
+const emits = defineEmits(["update:visible", "get-data"]);
+const visible = useVModel(props, "visible", emits);
+const { list, pagination, searchForm, fnGetData, fnResetPagination } =
+  useListData(getVideoManagerList);
+const fnSubmit = debounce(
+  1000,
+  async (row) => {
+    const resData = await setVideoManagerList({
+      VIDEOMANAGER_ID: row.VIDEOMANAGER_ID,
+    });
+    if (resData.pd) {
+      await setEightWorkVideoManagerDelete({
+        EIGHTWORKVIDEOMANAGER_ID: resData.pd.EIGHTWORKVIDEOMANAGER_ID,
+      });
+      await ElMessageBox.confirm("该监控已绑定其他作业，是否更改？", {
+        type: "warning",
+      });
+    }
+    await setEightWorkVideoManagerList({ ...row, CHECK_NO: props.checkNo });
+    ElMessage.success("操作成功");
+    emits("get-data");
+  },
+  { atBegin: true }
+);
 </script>
 
 <style scoped lang="scss"></style>

src/views/eightwork_videomanager/components/video.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-dialog v-model="visible" title="播放视频">
+    <iframe :src="src" style="width: 100%; height: 500px" />
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+
+const prosp = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  src: {
+    type: String,
+    required: true,
+    default: "",
+  },
+});
+const emits = defineEmits(["update:visible"]);
+const visible = useVModel(prosp, "visible", emits);
+</script>
+
+<style scoped lang="scss"></style>

src/views/eightwork_videomanager/index.vue

@@ -57,16 +57,16 @@
           <el-button type="primary" @click="fnAdd"> 新增 </el-button>
         </template>
       </layout-table>
-      <layout-video
-        :src="data.videoDialog.src"
-        v-model:visible="data.videoDialog.visible"
-      />
     </layout-card>
     <add
       v-model:visible="data.addDialog.Visible"
       :check-no="data.addDialog.checkNo"
       @get-data="fnResetPagination"
     />
+    <video-view
+      v-model:visible="data.videoDialog.visible"
+      :src="data.videoDialog.src"
+    />
   </div>
 </template>
 
@@ -81,10 +81,10 @@ import { reactive } from "vue";
 import Add from "./components/add.vue";
 import { useRoute } from "vue-router";
 import { ElMessageBox } from "element-plus";
-import LayoutVideo from "@/components/video/index.vue";
+import VideoView from "./components/video.vue";
+
 const route = useRoute();
 const { CHECK_NO } = route.query;
-
 const { list, pagination, searchForm, fnGetData, fnResetPagination } =
   useListData(getEightWorkVideoManagerList, {
     otherParams: { CHECK_NO },