forked from integrated_whb/integrated_whb_vue
视频监控列表
chenxinying
parent
ae9707dc6c
commit
fcb5dd3908
|
|
@ -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",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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 }">
|
||||
|
|
|
|||
|
|
@ -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 }">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue