iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

提交 \| 用户 \| 时间
30566d	1	<template>
H	2	<!-- 搜索 -->
	3	<ContentWrap>
	4	<el-form
	5	class="-mb-15px"
	6	:model="queryParams"
	7	ref="queryFormRef"
	8	:inline="true"
1ae890	9	label-width="40px"
30566d	10	>
H	11	<el-form-item label="品牌" prop="status">
	12	<el-select
	13	v-model="queryParams.brand"
	14	placeholder="品牌"
	15	clearable
1ae890	16	class="!w-140px"
30566d	17	>
H	18	<el-option
	19	v-for="dict in getIntDictOptions(DICT_TYPE.CAMERA_BRAND)"
	20	:key="dict.value"
	21	:label="dict.label"
	22	:value="dict.value"
	23	/>
	24	</el-select>
	25	</el-form-item>
1ae890	26	<el-form-item label="设备类型" prop="device" label-width="68px">
30566d	27	<el-input
1ae890	28	v-model="queryParams.device"
H	29	placeholder="请输入设备类型"
30566d	30	clearable
H	31	@keyup.enter="handleQuery"
1ae890	32	class="!w-140px"
30566d	33	/>
H	34	</el-form-item>
1ae890	35	<el-form-item label="编码" prop="code">
H	36	<el-input
	37	v-model="queryParams.code"
	38	placeholder="请输入编码"
	39	clearable
	40	@keyup.enter="handleQuery"
	41	class="!w-140px"
	42	/>
	43	</el-form-item>
	44	<el-form-item label="IP" prop="ip">
30566d	45	<el-input
H	46	v-model="queryParams.ip"
	47	placeholder="请输入IP"
	48	clearable
	49	@keyup.enter="handleQuery"
1ae890	50	class="!w-140px"
30566d	51	/>
H	52	</el-form-item>
1ae890	53	<el-form-item label="位置" prop="location">
30566d	54	<el-input
1ae890	55	v-model="queryParams.location"
H	56	placeholder="请输入位置"
30566d	57	clearable
H	58	@keyup.enter="handleQuery"
1ae890	59	class="!w-140px"
30566d	60	/>
H	61	</el-form-item>
	62	<el-form-item>
	63	<el-button @click="handleQuery">
aed8e1	64	<Icon icon="ep:search" class="mr-5px"/>
30566d	65	搜索
H	66	</el-button>
	67	<el-button @click="resetQuery">
aed8e1	68	<Icon icon="ep:refresh" class="mr-5px"/>
30566d	69	重置
H	70	</el-button>
	71	<el-button
	72	type="primary"
	73	plain
	74	@click="openForm('create')"
1ae890	75	v-hasPermi="['video:camera:save']"
30566d	76	>
aed8e1	77	<Icon icon="ep:plus" class="mr-5px"/>
30566d	78	新增
H	79	</el-button>
	80	<el-button
	81	type="success"
	82	plain
	83	@click="handleExport"
	84	:loading="exportLoading"
1ae890	85	v-hasPermi="['video:camera:export']"
30566d	86	>
aed8e1	87	<Icon icon="ep:download" class="mr-5px"/>
30566d	88	导出
H	89	</el-button>
	90	</el-form-item>
	91	</el-form>
	92	</ContentWrap>
	93
	94	<!-- 列表 -->
	95	<ContentWrap>
	96	<el-table v-loading="loading" :data="list">
	97	<el-table-column label="品牌" align="center" prop="brand" width="80">
	98	<template #default="scope">
aed8e1	99	<dict-tag :type="DICT_TYPE.CAMERA_BRAND" :value="scope.row.brand"/>
30566d	100	</template>
H	101	</el-table-column>
	102	<el-table-column label="设备类型" align="center" prop="device" width="200"/>
1ae890	103	<el-table-column label="编码" align="center" prop="code" width="200"/>
aed8e1	104	<el-table-column label="IP" align="center" prop="ip"/>
H	105	<el-table-column label="端口" align="center" prop="port" width="80"/>
	106	<el-table-column label="通道" align="center" prop="channel" width="80"/>
30566d	107	<el-table-column label="用户名" align="center" prop="username" width="100"/>
H	108	<el-table-column label="状态" prop="status" width="80">
	109	<template #default="scope">
aed8e1	110	<dict-tag :type="DICT_TYPE.NVR_ONLINE_STATUS" :value="scope.row.status"/>
30566d	111	</template>
H	112	</el-table-column>
aed8e1	113	<el-table-column label="位置" align="center" prop="location"/>
30566d	114	<el-table-column label="备注" align="center" prop="remark" width="150"/>
H	115	<el-table-column label="操作" align="center" min-width="110" fixed="right">
	116	<template #default="scope">
	117	<el-button
	118	link
	119	type="primary"
	120	@click="openForm('update', scope.row.id)"
1ae890	121	v-hasPermi="['video:camera:update']"
30566d	122	>
H	123	编辑
	124	</el-button>
	125	<el-button
	126	link
	127	type="danger"
	128	@click="handleDelete(scope.row.id)"
1ae890	129	v-hasPermi="['video:camera:delete']"
30566d	130	>
H	131	删除
	132	</el-button>
aed8e1	133	<el-button
H	134	link
	135	type="success"
	136	@click="imageHandle(scope.row.id)"
	137	v-hasPermi="['video:image:query']"
	138	>
	139	查看截图
	140	</el-button>
30566d	141	</template>
H	142	</el-table-column>
	143	</el-table>
	144	<!-- 分页 -->
	145	<Pagination
	146	:total="total"
	147	v-model:page="queryParams.pageNo"
	148	v-model:limit="queryParams.pageSize"
	149	@pagination="getList"
	150	/>
	151	</ContentWrap>
	152
	153	<!-- 表单弹窗：添加/修改 -->
aed8e1	154	<CameraForm ref="formRef" @success="getList"/>
30566d	155
aed8e1	156	<CameraImage ref="imageFormRef"/>
30566d	157
H	158	</template>
	159	<script lang="ts" setup>
	160	import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
aed8e1	161	import download from '@/utils/download'
H	162	import * as CameraApi from '@/api/data/video/camera'
	163	import CameraForm from './CameraForm.vue'
	164	import CameraImage from './CameraImage.vue'
30566d	165
H	166
aed8e1	167	defineOptions({name: 'Camera'})
30566d	168
aed8e1	169	const message = useMessage() // 消息弹窗
H	170	const {t} = useI18n() // 国际化
30566d	171
aed8e1	172	const loading = ref(true) // 列表的加载中
H	173	const total = ref(0) // 列表的总页数
	174	const list = ref([]) // 列表的数据
	175	const queryParams = reactive({
	176	pageNo: 1,
	177	pageSize: 10,
	178	type: 1,
	179	brand: undefined,
	180	ip: undefined,
	181	code: undefined,
	182	device: undefined,
	183	location: undefined,
	184	status: undefined
	185	})
	186	const queryFormRef = ref() // 搜索的表单
	187	const exportLoading = ref(false) // 导出的加载中
	188
	189	/** 查询列表 */
	190	const getList = async () => {
	191	loading.value = true
	192	try {
	193	const data = await CameraApi.getCameraPage(queryParams)
	194	list.value = data.list
	195	total.value = data.total
	196	} finally {
	197	loading.value = false
30566d	198	}
aed8e1	199	}
30566d	200
aed8e1	201	/** 搜索按钮操作 */
H	202	const handleQuery = () => {
	203	queryParams.pageNo = 1
	204	getList()
	205	}
30566d	206
aed8e1	207	/** 重置按钮操作 */
H	208	const resetQuery = () => {
	209	queryFormRef.value.resetFields()
	210	queryParams.brand = undefined
	211	handleQuery()
	212	}
30566d	213
aed8e1	214	/** 添加/修改操作 */
H	215	const formRef = ref()
	216	const openForm = (type: string, id?: number) => {
	217	formRef.value.open(type, id)
	218	}
30566d	219
aed8e1	220	/** 删除按钮操作 */
H	221	const handleDelete = async (id: number) => {
	222	try {
	223	// 删除的二次确认
	224	await message.delConfirm()
	225	// 发起删除
	226	await CameraApi.deleteCamera(id)
	227	message.success(t('common.delSuccess'))
	228	// 刷新列表
30566d	229	await getList()
aed8e1	230	} catch {
H	231	}
	232	}
	233
	234	/** 查看截图 */
	235	const imageFormRef = ref()
	236	const imageHandle = (id: string) => {
	237	imageFormRef.value.open(id)
	238	}
	239
	240	/** 导出按钮操作 */
	241	const handleExport = async () => {
	242	try {
	243	// 导出的二次确认
	244	await message.exportConfirm()
	245	// 发起导出
	246	exportLoading.value = true
	247	const data = await CameraApi.exportCamera(queryParams)
	248	download.excel(data, '录像机列表.xls')
	249	} catch {
	250	} finally {
	251	exportLoading.value = false
	252	}
	253	}
	254
	255	/ 初始化 /
	256	onMounted(async () => {
	257	await getList()
	258	})
30566d	259	</script>