From df90c0c5cfa4de114798015b92120ad8ba8b4826 Mon Sep 17 00:00:00 2001 From: 潘志宝 <979469083@qq.com> Date: 星期五, 22 十一月 2024 10:45:40 +0800 Subject: [PATCH] MEASURE_VALUE_TYPE --- src/views/data/video/camera/index.vue | 197 +++++++++++++++++++++++++++---------------------- 1 files changed, 108 insertions(+), 89 deletions(-) diff --git a/src/views/data/video/camera/index.vue b/src/views/data/video/camera/index.vue index d0fbbe6..add49c5 100644 --- a/src/views/data/video/camera/index.vue +++ b/src/views/data/video/camera/index.vue @@ -61,11 +61,11 @@ </el-form-item> <el-form-item> <el-button @click="handleQuery"> - <Icon icon="ep:search" class="mr-5px" /> + <Icon icon="ep:search" class="mr-5px"/> 搜索 </el-button> <el-button @click="resetQuery"> - <Icon icon="ep:refresh" class="mr-5px" /> + <Icon icon="ep:refresh" class="mr-5px"/> 重置 </el-button> <el-button @@ -74,7 +74,7 @@ @click="openForm('create')" v-hasPermi="['video:camera:save']" > - <Icon icon="ep:plus" class="mr-5px" /> + <Icon icon="ep:plus" class="mr-5px"/> 新增 </el-button> <el-button @@ -84,7 +84,7 @@ :loading="exportLoading" v-hasPermi="['video:camera:export']" > - <Icon icon="ep:download" class="mr-5px" /> + <Icon icon="ep:download" class="mr-5px"/> 导出 </el-button> </el-form-item> @@ -96,20 +96,21 @@ <el-table v-loading="loading" :data="list"> <el-table-column label="品牌" align="center" prop="brand" width="80"> <template #default="scope"> - <dict-tag :type="DICT_TYPE.CAMERA_BRAND" :value="scope.row.brand" /> + <dict-tag :type="DICT_TYPE.CAMERA_BRAND" :value="scope.row.brand"/> </template> </el-table-column> <el-table-column label="设备类型" align="center" prop="device" width="200"/> <el-table-column label="编码" align="center" prop="code" width="200"/> - <el-table-column label="IP" align="center" prop="ip" /> - <el-table-column label="端口" align="center" prop="port" width="100"/> + <el-table-column label="IP" align="center" prop="ip"/> + <el-table-column label="端口" align="center" prop="port" width="80"/> + <el-table-column label="通道" align="center" prop="channel" width="80"/> <el-table-column label="用户名" align="center" prop="username" width="100"/> <el-table-column label="状态" prop="status" width="80"> <template #default="scope"> - <dict-tag :type="DICT_TYPE.NVR_ONLINE_STATUS" :value="scope.row.status" /> + <dict-tag :type="DICT_TYPE.NVR_ONLINE_STATUS" :value="scope.row.status"/> </template> </el-table-column> - <el-table-column label="位置" align="center" prop="location" /> + <el-table-column label="位置" align="center" prop="location"/> <el-table-column label="备注" align="center" prop="remark" width="150"/> <el-table-column label="操作" align="center" min-width="110" fixed="right"> <template #default="scope"> @@ -129,6 +130,14 @@ > 删除 </el-button> + <el-button + link + type="success" + @click="imageHandle(scope.row.id)" + v-hasPermi="['video:image:query']" + > + 查看截图 + </el-button> </template> </el-table-column> </el-table> @@ -142,99 +151,109 @@ </ContentWrap> <!-- 表单弹窗:添加/修改 --> - <CameraForm ref="formRef" @success="getList" /> + <CameraForm ref="formRef" @success="getList"/> + <CameraImage ref="imageFormRef"/> </template> <script lang="ts" setup> import {DICT_TYPE, getIntDictOptions} from '@/utils/dict' - import download from '@/utils/download' - import * as CameraApi from '@/api/data/video/camera' - import CameraForm from './CameraForm.vue' +import download from '@/utils/download' +import * as CameraApi from '@/api/data/video/camera' +import CameraForm from './CameraForm.vue' +import CameraImage from './CameraImage.vue' - defineOptions({name: 'Camera'}) - const message = useMessage() // 消息弹窗 - const {t} = useI18n() // 国际化 +defineOptions({name: 'Camera'}) - const loading = ref(true) // 列表的加载中 - const total = ref(0) // 列表的总页数 - const list = ref([]) // 列表的数据 - const queryParams = reactive({ - pageNo: 1, - pageSize: 10, - type: 1, - brand: undefined, - ip: undefined, - code: undefined, - device: undefined, - location: undefined, - status: undefined - }) - const queryFormRef = ref() // 搜索的表单 - const exportLoading = ref(false) // 导出的加载中 +const message = useMessage() // 消息弹窗 +const {t} = useI18n() // 国际化 - /** 查询列表 */ - const getList = async () => { - loading.value = true - try { - const data = await CameraApi.getCameraPage(queryParams) - list.value = data.list - total.value = data.total - } finally { - loading.value = false - } +const loading = ref(true) // 列表的加载中 +const total = ref(0) // 列表的总页数 +const list = ref([]) // 列表的数据 +const queryParams = reactive({ + pageNo: 1, + pageSize: 10, + type: 1, + brand: undefined, + ip: undefined, + code: undefined, + device: undefined, + location: undefined, + status: undefined +}) +const queryFormRef = ref() // 搜索的表单 +const exportLoading = ref(false) // 导出的加载中 + +/** 查询列表 */ +const getList = async () => { + loading.value = true + try { + const data = await CameraApi.getCameraPage(queryParams) + list.value = data.list + total.value = data.total + } finally { + loading.value = false } +} - /** 搜索按钮操作 */ - const handleQuery = () => { - queryParams.pageNo = 1 - getList() - } +/** 搜索按钮操作 */ +const handleQuery = () => { + queryParams.pageNo = 1 + getList() +} - /** 重置按钮操作 */ - const resetQuery = () => { - queryFormRef.value.resetFields() - handleQuery() - } +/** 重置按钮操作 */ +const resetQuery = () => { + queryFormRef.value.resetFields() + queryParams.brand = undefined + handleQuery() +} - /** 添加/修改操作 */ - const formRef = ref() - const openForm = (type: string, id?: number) => { - formRef.value.open(type, id) - } +/** 添加/修改操作 */ +const formRef = ref() +const openForm = (type: string, id?: number) => { + formRef.value.open(type, id) +} - /** 删除按钮操作 */ - const handleDelete = async (id: number) => { - try { - // 删除的二次确认 - await message.delConfirm() - // 发起删除 - await CameraApi.deleteCamera(id) - message.success(t('common.delSuccess')) - // 刷新列表 - await getList() - } catch { - } - } - - /** 导出按钮操作 */ - const handleExport = async () => { - try { - // 导出的二次确认 - await message.exportConfirm() - // 发起导出 - exportLoading.value = true - const data = await CameraApi.exportCamera(queryParams) - download.excel(data, '录像机列表.xls') - } catch { - } finally { - exportLoading.value = false - } - } - - /** 初始化 **/ - onMounted(async () => { +/** 删除按钮操作 */ +const handleDelete = async (id: number) => { + try { + // 删除的二次确认 + await message.delConfirm() + // 发起删除 + await CameraApi.deleteCamera(id) + message.success(t('common.delSuccess')) + // 刷新列表 await getList() - }) + } catch { + } +} + +/** 查看截图 */ +const imageFormRef = ref() +const imageHandle = (id: string) => { + imageFormRef.value.open(id) +} + +/** 导出按钮操作 */ +const handleExport = async () => { + try { + // 导出的二次确认 + await message.exportConfirm() + // 发起导出 + exportLoading.value = true + const data = await CameraApi.exportCamera(queryParams) + download.excel(data, '录像机列表.xls') + } catch { + } finally { + exportLoading.value = false + } +} + +/** 初始化 **/ +onMounted(async () => { + await getList() +}) </script> -- Gitblit v1.9.3