forked from integrated_whb/integrated_whb_vue
122 lines
3.4 KiB
Vue
122 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-card>
|
|
<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>
|
|
</el-card>
|
|
<layout-card>
|
|
<layout-table
|
|
v-model:pagination="pagination"
|
|
:data="list"
|
|
@get-data="fnGetData"
|
|
>
|
|
<el-table-column label="序号" width="70">
|
|
<template #default="{ $index }">
|
|
{{ serialNumber(pagination, $index) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="CODE" label="监控设备编码" />
|
|
<el-table-column prop="VIDEONAME" label="视频名称" />
|
|
<el-table-column label="操作" width="250">
|
|
<template #default="{ row }">
|
|
<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="fnAdd"> 新增 </el-button>
|
|
</template>
|
|
</layout-table>
|
|
</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>
|
|
|
|
<script setup>
|
|
import { serialNumber } from "@/assets/js/utils";
|
|
import useListData from "@/assets/js/useListData.js";
|
|
import {
|
|
getEightWorkVideoManagerList,
|
|
setEightWorkVideoManagerDelete,
|
|
} from "@/request/eightwork_videomanager";
|
|
import { reactive } from "vue";
|
|
import Add from "./components/add.vue";
|
|
import { useRoute } from "vue-router";
|
|
import { ElMessageBox } from "element-plus";
|
|
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 },
|
|
});
|
|
const data = reactive({
|
|
addDialog: {
|
|
Visible: false,
|
|
checkNo: "",
|
|
},
|
|
videoDialog: {
|
|
visible: false,
|
|
src: "",
|
|
},
|
|
});
|
|
const fnAdd = () => {
|
|
data.addDialog.Visible = true;
|
|
data.addDialog.checkNo = CHECK_NO;
|
|
};
|
|
const fnDeleteVideo = async (row) => {
|
|
if (row) {
|
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
|
await setEightWorkVideoManagerDelete({
|
|
EIGHTWORKVIDEOMANAGER_ID: row.EIGHTWORKVIDEOMANAGER_ID,
|
|
});
|
|
fnResetPagination();
|
|
}
|
|
};
|
|
const fnPreviewVideo = (VIDEOURL) => {
|
|
data.videoDialog.visible = true;
|
|
data.videoDialog.src = VIDEOURL;
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|