iailab-plat-ui-vue3.git

dengzedong

2024-11-06 31bb5fe0278d2f8132c535f8129354bfad56b7b1

提交 \| 用户 \| 时间
24d32b	1	<template>
潘	2	<el-drawer
	3	v-model="drawer"
	4	size="50%"
	5	title="Opcua Tag"
	6	:direction="direction"
	7	:before-close="handleClose"
	8	>
	9	<!-- 搜索 -->
	10	<ContentWrap>
	11	<el-form
	12	class="-mb-15px"
	13	:model="queryParams"
	14	ref="queryFormRef"
	15	:inline="true"
	16	label-width="68px"
	17	>
	18	<el-form-item label="Tag名称" prop="tagName">
	19	<el-input
	20	v-model="queryParams.tagName"
	21	placeholder="请输入Tag名称"
	22	clearable
	23	@keyup.enter="handleQuery"
	24	class="!w-240px"
	25	/>
	26	</el-form-item>
	27	<el-form-item label="地址" prop="address">
	28	<el-input
	29	v-model="queryParams.address"
	30	placeholder="请输入地址"
	31	clearable
	32	@keyup.enter="handleQuery"
	33	class="!w-240px"
	34	/>
	35	</el-form-item>
	36	<el-form-item>
	37	<el-button @click="handleQuery">
	38	<Icon icon="ep:search" class="mr-5px" />
	39	搜索
	40	</el-button>
	41	<el-button @click="resetQuery">
	42	<Icon icon="ep:refresh" class="mr-5px" />
	43	重置
	44	</el-button>
	45	<el-button
	46	type="primary"
	47	plain
	48	@click="openForm('create')"
	49	v-hasPermi="['data:channel-opcua:create']"
	50	>
	51	<Icon icon="ep:plus" class="mr-5px" />
	52	新增
	53	</el-button>
6c2636	54	<el-button
J	55	type="warning"
	56	plain
	57	@click="handleImport"
	58	v-hasPermi="['data:channel-opcua-tag:import']">
	59	<Icon icon="ep:upload" /> 导入
	60	</el-button>
	61	<el-button
	62	type="success"
	63	plain
	64	@click="handleExport"
	65	:loading="exportLoading"
	66	v-hasPermi="['data:channel-opcua-tag:export']">
	67	<Icon icon="ep:download" />导出
	68	</el-button>
24d32b	69	</el-form-item>
潘	70	</el-form>
	71	</ContentWrap>
	72	<!-- 列表 -->
	73	<ContentWrap>
	74	<el-table v-loading="loading" :data="list">
	75	<el-table-column
	76	prop="tagName"
	77	label="Tag名称"
	78	header-align="center"
	79	align="left"
	80	min-width="150"
	81	/>
	82	<el-table-column
	83	prop="dataType"
	84	label="数据类型"
	85	header-align="center"
	86	align="center"
	87	/>
	88	<el-table-column
	89	prop="address"
	90	label="地址"
	91	header-align="center"
	92	align="center"
	93	/>
	94	<el-table-column
	95	prop="samplingRate"
	96	label="采集频率"
	97	header-align="center"
	98	align="center"
	99	/>
	100	<el-table-column
	101	prop="enabled"
	102	label="是否启用"
	103	header-align="center"
	104	align="center"
	105	>
	106	<template #default="scope">
6c2636	107	<el-tag v-if="scope.row.enabled === 1" size="small">是</el-tag>
24d32b	108	<el-tag v-else size="small" type="danger">否</el-tag>
潘	109	</template>
	110	</el-table-column>
93ce03	111	<el-table-column
D	112	prop="dataValue"
	113	label="数据值"
	114	header-align="center"
	115	align="center"
	116	:formatter="(row) => {if (row.dataValue === -2.0) {return '--';}return row.dataValue;}"
	117	/>
	118	<el-table-column
	119	prop="quality"
	120	label="数据质量"
	121	header-align="center"
	122	align="center"
	123	>
	124	<template #default="scope">
	125	<el-tag v-if="scope.row.dataValue === Number(-2.0)" type="danger" size="small">bad</el-tag>
	126	<el-tag v-else size="small">good</el-tag>
	127	</template>
	128	</el-table-column>
24d32b	129	<el-table-column label="操作" align="center" min-width="110" fixed="right">
潘	130	<template #default="scope">
	131	<el-button
	132	link
	133	type="primary"
	134	@click="openForm('update', scope.row.id)"
	135	v-hasPermi="['data:channel-opcua:update']"
	136	>
	137	编辑
	138	</el-button>
	139	<el-button
	140	link
	141	type="danger"
	142	@click="handleDelete(scope.row.id)"
	143	v-hasPermi="['data:channel-opcua:delete']"
	144	>
	145	删除
	146	</el-button>
	147	</template>
	148	</el-table-column>
	149	</el-table>
	150	<!-- 分页 -->
	151	<Pagination
	152	:total="total"
	153	v-model:page="queryParams.pageNo"
	154	v-model:limit="queryParams.pageSize"
	155	@pagination="getList"
	156	/>
	157	</ContentWrap>
	158	<!-- 表单弹窗：添加/修改 -->
	159	<TagForm ref="formRef" @success="getList" />
6c2636	160	<TagImportForm ref="importFormRef" @success="getList" />
24d32b	161	</el-drawer>
潘	162	</template>
	163	<script lang="ts" setup>
	164	import type { DrawerProps } from 'element-plus'
6c2636	165	import * as OpcUaTagApi from "@/api/data/channel/opcua/tag";
24d32b	166	import TagForm from './TagForm.vue'
6c2636	167	import download from "@/utils/download";
J	168	import {ref,reactive} from "vue";
	169	import TagImportForm from '../../common/tag/TagImportForm.vue'
24d32b	170
潘	171	defineOptions({name: 'OpcuaTag'})
	172
	173	const message = useMessage() // 消息弹窗
	174	const {t} = useI18n() // 国际化
	175
	176	const drawer = ref(false)
	177	const direction = ref<DrawerProps['direction']>('rtl')
	178	const loading = ref(true) // 列表的加载中
	179	const total = ref(0) // 列表的总页数
	180	const list = ref([]) // 列表的数据
	181	const queryParams = reactive({
	182	pageNo: 1,
	183	pageSize: 10,
	184	device: undefined,
93ce03	185	deviceId: undefined,
24d32b	186	tagName: undefined,
潘	187	address: undefined
	188	})
	189	const queryFormRef = ref() // 搜索的表单
	190	const exportLoading = ref(false) // 导出的加载中
	191
	192	/** 查询列表 */
	193	const getList = async () => {
	194	loading.value = true
	195	try {
6c2636	196	const page = await OpcUaTagApi.getOpcuaTagPage(queryParams)
24d32b	197	list.value = page.list
潘	198	total.value = page.total
	199	} finally {
	200	loading.value = false
	201	}
	202	}
	203
	204	/** 搜索按钮操作 */
	205	const handleQuery = () => {
	206	queryParams.pageNo = 1
	207	getList()
	208	}
	209
	210	/** 重置按钮操作 */
	211	const resetQuery = () => {
	212	queryFormRef.value.resetFields()
	213	handleQuery()
	214	}
	215
	216	/** 添加/修改操作 */
	217	const formRef = ref()
	218	const openForm = (type: string, id?: number) => {
	219	formRef.value.open(type, id, queryParams.device)
	220	}
	221
	222	/** 删除按钮操作 */
	223	const handleDelete = async (id: number) => {
	224	try {
	225	// 删除的二次确认
	226	await message.delConfirm()
	227	// 发起删除
6c2636	228	await OpcUaTagApi.deleteOpcuaTag(id)
24d32b	229	message.success(t('common.delSuccess'))
潘	230	// 刷新列表
	231	await getList()
	232	} catch {
	233	}
	234	}
	235
	236	/** 打开弹窗 */
93ce03	237	const open = async (deviceId?: string,device?: string) => {
24d32b	238	resetForm()
潘	239	drawer.value = true
	240	queryParams.device = device
93ce03	241	queryParams.deviceId = deviceId
24d32b	242	if (device) {
潘	243	getList()
	244	}
	245	}
	246	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	247
	248	/** 重置表单 */
	249	const resetForm = () => {
	250	queryParams.pageNo = 1
	251	queryParams.pageSize = 10
	252	queryParams.device = ''
	253	queryParams.tagName = ''
	254	queryParams.address = ''
	255	}
	256
	257	const handleClose = (done: () => void) => {
	258	drawer.value = false
	259	}
6c2636	260
J	261	/** tag导入 */
	262	const importFormRef = ref()
	263	const handleImport = () => {
	264	if(queryParams.device){
	265	importFormRef.value.open(queryParams.device, '/data/channel/opcua/tag/import',OpcUaTagApi.importOpcUaTagTemplate(), 'OpcUa', queryParams.device)
	266	}
	267	}
	268
	269	/** 导出按钮操作 */
	270	const handleExport = async () => {
	271	try {
	272	// 导出的二次确认
	273	await message.exportConfirm()
	274	// 发起导出
	275	exportLoading.value = true
	276	const data = await OpcUaTagApi.exportOpcUaTag(queryParams)
	277	download.excel(data, 'OpcUa_' + queryParams.device + '_Tag列表.xlsx')
	278	} catch {
	279	} finally {
	280	exportLoading.value = false
	281	}
	282	}
24d32b	283	</script>