iailab-plat-ui-vue3.git

dengzedong

2024-11-06 31bb5fe0278d2f8132c535f8129354bfad56b7b1

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