视频监控列表

src/assets/js/asyncRouter.js

@@ -1166,4 +1166,17 @@ export default [
       },
     ],
   },
+  {
+    path: "/video_manager",
+    redirect: "/video_manager/video_manager",
+    meta: { title: "企业视频监控管理", model: MODEL["4"] },
+    component: "children",
+    children: [
+      {
+        path: "/video_manager/video_manager",
+        meta: { title: "视频设备列表", isSubMenu: false },
+        component: "video_manager/video_manager/index",
+      },
+    ],
+  },
 ];

src/request/video_manager.js

@@ -0,0 +1,13 @@
+import { post } from "@/request/axios.js";
+
+export const getVideoManagerList = (params) =>
+  post("/videomanager/list", params); // 视频列表
+
+export const setVideoManagerAdd = (params) => post("/videomanager/add", params); // 台账列表
+
+export const getVideoManagerView = (params) =>
+  post("/videomanager/goEdit", params); // 台账添加
+export const setVideoManagerDelete = (params) =>
+  post("/videomanager/delete", params); // 删除
+export const setVideoManagerEdit = (params) =>
+  post("/videomanager/edit", params);

src/views/eightwork_videomanager/components/add.vue

@@ -34,7 +34,7 @@
           {{ serialNumber(pagination, $index) }}
         </template>
       </el-table-column>
-      <el-table-column prop="GBS_NUM" label="视频设备编号" />
+      <el-table-column prop="CODE" label="监控设备编码" />
       <el-table-column prop="VIDEONAME" label="视频名称" />
       <el-table-column label="操作" width="80">
         <template v-slot="{ row }">

src/views/eightwork_videomanager/index.vue

@@ -37,7 +37,7 @@
             {{ serialNumber(pagination, $index) }}
           </template>
         </el-table-column>
-        <el-table-column prop="GBS_NUM" label="视频设备编号" />
+        <el-table-column prop="CODE" label="监控设备编码" />
         <el-table-column prop="VIDEONAME" label="视频名称" />
         <el-table-column label="操作" width="250">
           <template v-slot="{ row }">

src/views/video_manager/video_manager/components/add.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form ref="formRef" :rules="rules" :model="form" label-width="150px">
+      <el-form-item label="视频名称" prop="VIDEONAME">
+        <el-input v-model="form.VIDEONAME" />
+      </el-form-item>
+      <el-form-item label="播放地址" prop="VIDEOURL">
+        <el-input v-model="form.VIDEOURL" />
+      </el-form-item>
+      <el-form-item label="监控设备编码" prop="CODE">
+        <el-input v-model="form.CODE" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="fnClose">取消</el-button>
+      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/assets/js/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import {
+  setVideoManagerAdd,
+  setVideoManagerEdit,
+} from "@/request/video_manager.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+});
+
+const emits = defineEmits(["update:visible", "update:form", "get-data"]);
+const { visible, form } = useVModels(props, emits);
+const rules = {
+  VIDEONAME: [{ required: true, message: "视频名称不能为空", trigger: "blur" }],
+  VIDEOURL: [
+    { required: true, message: "播放地址不能为空", trigger: "change" },
+  ],
+  CODE: [
+    { required: true, message: "监控设备编码不能为空", trigger: "change" },
+  ],
+};
+const formRef = ref(null);
+
+const fnClose = () => {
+  formRef.value.resetFields();
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await useFormValidate(formRef);
+    props.type === "add"
+      ? await setVideoManagerAdd({ ...form.value })
+      : await setVideoManagerEdit({ ...form.value });
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("get-data");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped lang="scss"></style>

src/views/video_manager/video_manager/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/video_manager/video_manager/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="50px"
+        @submit.prevent="fnResetPagination"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item 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>
+    </el-card>
+    <layout-card>
+      <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="VIDEONAME" label="视频名称" />
+        <el-table-column prop="CODE" label="监控设备编码" />
+        <el-table-column label="操作" width="250">
+          <template v-slot="{ row }">
+            <el-button
+              type="primary"
+              text
+              link
+              @click="fnAddOrEdit(row.VIDEOMANAGER_ID, 'edit')"
+            >
+              修改
+            </el-button>
+            <el-button type="primary" text link @click="fnDeleteVideo(row)">
+              删除
+            </el-button>
+            <el-button
+              link
+              type="primary"
+              @click="fnPreviewVideo(row.VIDEOURL)"
+            >
+              播放
+            </el-button>
+          </template>
+        </el-table-column>
+        <template #button>
+          <el-button type="primary" @click="fnAddOrEdit('', 'add')">
+            新增
+          </el-button>
+        </template>
+      </layout-table>
+    </layout-card>
+    <add
+      v-model:visible="data.addDialog.Visible"
+      v-model:form="data.addDialog.form"
+      :type="data.addDialog.type"
+      @get-data="fnResetPagination"
+    />
+    <video-view
+      v-model:visible="data.videoDialog.visible"
+      :src="data.videoDialog.src"
+    />
+  </div>
+</template>
+
+<script setup>
+import { serialNumber } from "@/assets/js/utils.js";
+import useListData from "@/assets/js/useListData.js";
+import {
+  getVideoManagerList,
+  getVideoManagerView,
+  setVideoManagerDelete,
+} from "@/request/video_manager.js";
+import Add from "./components/add.vue";
+import { nextTick, reactive } from "vue";
+import { ElMessageBox } from "element-plus";
+import VideoView from "./components/video.vue";
+import { setVideoManagerList } from "@/request/eightwork_videomanager.js";
+
+const data = reactive({
+  addDialog: {
+    Visible: false,
+    type: "",
+    form: {
+      VIDEONAME: "",
+      VIDEOURL: "",
+      CODE: "",
+    },
+  },
+  videoDialog: {
+    visible: false,
+    src: "",
+  },
+});
+
+const { list, pagination, searchForm, fnGetData, fnResetPagination } =
+  useListData(getVideoManagerList);
+const fnDeleteVideo = async (row) => {
+  if (row) {
+    const resData = await setVideoManagerList({
+      VIDEOMANAGER_ID: row.VIDEOMANAGER_ID,
+    });
+    if (resData.pd) {
+      ElMessageBox.alert("该监控已在八项作业中绑定，无法删除");
+      return;
+    }
+    await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+    await setVideoManagerDelete({
+      VIDEOMANAGER_ID: row.VIDEOMANAGER_ID,
+    });
+    fnResetPagination();
+  }
+};
+const fnAddOrEdit = async (VIDEOMANAGER_ID, type) => {
+  data.addDialog.Visible = true;
+  await nextTick();
+  data.addDialog.type = type;
+  if (type === "edit") {
+    const resData = await getVideoManagerView({ VIDEOMANAGER_ID });
+    data.addDialog.form = resData.pd;
+  }
+};
+const fnPreviewVideo = (VIDEOURL) => {
+  data.videoDialog.visible = true;
+  data.videoDialog.src = VIDEOURL;
+};
+</script>
+
+<style scoped></style>