zhangchao/Visualize-electronic-fences
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 搭建页面

Browse Source
This commit is contained in:
Ironsp
2026-05-18 17:40:36 +08:00
parent d4129d66b1
commit 36d7cdd155
9 changed files with 1132 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/fileList/list.vue
View File

@@ -4,17 +4,24 @@
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="设备选择" prop="userName">
<el-select v-model="queryParams.userName" placeholder="请选择" clearable style="width: 160px">
<el-option label="绑定的设备" :value="0" />
</el-select>
</el-form-item>
<el-form-item label="报警编号" prop="deviceId">
<el-input v-model="queryParams.deviceId" placeholder="请输入设备编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备选择" prop="userName">
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 160px">
<el-option label="绑定的设备1" :value="0" />
<el-option label="绑定的设备2" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="日期" prop="alarmTime">
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
<el-form-item label="报警时间" prop="queryTime">
<el-date-picker
v-model="queryTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -44,19 +51,19 @@
</el-row>
</template> -->
<el-table v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
<el-table class="monitor-dialog" v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="录像编号" align="center" prop="deviceId" width="90" />
<el-table-column label="文件名曾" align="center" prop="alarmTime" min-width="170" />
<el-table-column label="所属设备" align="center" prop="userName" min-width="120" show-overflow-tooltip />
<el-table-column label="报警编号" align="center" prop="monitoringArea" min-width="120" show-overflow-tooltip />
<el-table-column label="录像开始时间" align="center" prop="monitoringArea" min-width="120" show-overflow-tooltip />
<el-table-column label="录像结束时间" align="center" prop="monitoringArea" min-width="120" show-overflow-tooltip />
<el-table-column label="录像时长" align="center" prop="monitoringArea" min-width="120" show-overflow-tooltip />
<el-table-column label="录像编号" align="center" prop="code" width="90" />
<el-table-column label="文件名称" align="center" prop="videoName" min-width="170" />
<el-table-column label="所属设备" align="center" prop="deviceName" min-width="120" show-overflow-tooltip />
<el-table-column label="报警编号" align="center" prop="alarmId" min-width="120" show-overflow-tooltip />
<el-table-column label="录像开始时间" align="center" prop="startTime" min-width="120" show-overflow-tooltip />
<el-table-column label="录像结束时间" align="center" prop="endTime" min-width="120" show-overflow-tooltip />
<el-table-column label="录像时长" align="center" prop="duration" min-width="120" show-overflow-tooltip />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
<template #default="scope">
<el-button v-hasPermi="['demo:demo:edit']" type="primary" @click="handleUpdate(scope.row)">播放</el-button>
<el-button v-hasPermi="['demo:demo:edit']" type="primary" @click="handleUpdate(scope.row)">下载至本地</el-button>
<el-button type="primary" @click="handleUpdate(scope.row)">播放</el-button>
<el-button type="primary" @click="handleUpload(scope.row)">下载至本地</el-button>
</template>
</el-table-column>
</el-table>
@@ -64,41 +71,28 @@
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
</el-card>
<!-- 添加或修改测试单对话框 -->
<!-- <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
<el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="部门id" prop="deptId">
<el-input v-model="form.deptId" placeholder="请输入部门id" />
</el-form-item>
<el-form-item label="用户id" prop="userId">
<el-input v-model="form.userId" placeholder="请输入用户id" />
</el-form-item>
<el-form-item label="排序号" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序号" />
</el-form-item>
<el-form-item label="key键" prop="testKey">
<el-input v-model="form.testKey" placeholder="请输入key键" />
</el-form-item>
<el-form-item label="值" prop="value">
<el-input v-model="form.value" placeholder="请输入值" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body fullscreen destroy-on-close>
<template #header>
<div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
<span class="truncate">实时监控-北门出入门监控</span>
</div>
</template>
</el-dialog> -->
<div class="monitor-video-wrap">
<div class="monitor-video-stack">
<video ref="monitorVideoRef" class="monitor-video" controls preload="metadata" :src="monitorVideoUrl">您的浏览器不支持视频播放</video>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup name="Demo" lang="ts">
import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/fileList/index';
//import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const demoList = ref<DemoVO[]>([]);
const demoList = ref<any[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
@@ -106,6 +100,7 @@ const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const monitorVideoUrl = 'http://192.168.0.214:8088/5a0db047943df198aff98b650ac9e001.mp4';
const queryFormRef = ref<ElFormInstance>();
const demoFormRef = ref<ElFormInstance>();
@@ -115,7 +110,7 @@ const dialog = reactive<DialogOption>({
title: ''
});
const initFormData: DemoForm = {
const initFormData = {
id: undefined,
deptId: undefined,
userId: undefined,
@@ -123,16 +118,14 @@ const initFormData: DemoForm = {
testKey: undefined,
value: undefined
};
const data = reactive<PageData<DemoForm, DemoQuery>>({
const data = reactive<any>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
deptId: undefined,
userId: undefined,
orderNum: undefined,
testKey: undefined,
value: undefined
userName: undefined,
deviceId: undefined,
queryTime: undefined
},
rules: {
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
@@ -180,7 +173,7 @@ const resetQuery = () => {
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: DemoVO[]) => {
const handleSelectionChange = (selection: any[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
@@ -194,13 +187,22 @@ const handleAdd = () => {
};
/** 修改按钮操作 */
const handleUpdate = async (row?: DemoVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getDemo(_id);
Object.assign(form.value, res.data);
const handleUpdate = async (row?: any) => {
// reset();
// const _id = row?.id || ids.value[0];
// const res = await getDemo(_id);
// Object.assign(form.value, res.data);
// dialog.visible = true;
// dialog.title = '修改测试单';
if (!row || !row.videoUrl) {
proxy?.$modal.msgError('视频地址不存在');
return;
}
dialog.visible = true;
dialog.title = '修改测试单';
};
const handleUpload = async (row?: any) => {
console.log('点击下载');
};
/** 提交按钮 */
@@ -221,7 +223,7 @@ const submitForm = () => {
};
/** 删除按钮操作 */
const handleDelete = async (row?: DemoVO) => {
const handleDelete = async (row?: any) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delDemo(_ids);
@@ -244,3 +246,12 @@ onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
/* 全屏监控弹窗：占满视口、禁止外层滚动，视频在可视区内尽可能放大 */
.monitor-video-stack {
display: flex;
justify-content: center;
align-items: center;
}
</style>