iailab-plat-ui-vue3.git

潘志宝

7 天以前 c021e1b0dd2090439cdb625605a61388d9ab6a02

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