iailab-plat-ui-vue3.git

dongyukun

2024-11-11 e1e01358530ea0cae9bd09aab1b6e2c371f2dd1c

提交 \| 用户 \| 时间
9ec4bd	1	<template>
潘	2	<Dialog v-model="dialogVisible" :title="dialogTitle">
	3	<el-form
	4	class="-mb-15px"
	5	:model="formData"
	6	ref="formRef"
	7	:inline="true"
	8	:rules="formRules"
	9	label-width="68px"
	10	v-loading="formLoading"
	11	>
	12	<el-form-item style="width: 100%">
	13	<el-divider content-position="left">模型信息</el-divider>
	14	</el-form-item>
de019e	15	<el-row>
D	16	<el-col :span="24">
	17	<el-form-item label="全类名" style="width: 100%" prop="className">
	18	<el-input v-model="formData.className" placeholder=""/>
	19	</el-form-item>
	20	</el-col>
	21	</el-row>
	22	<el-row>
	23	<el-col :span="24">
	24	<el-form-item label="方法名" prop="methodName">
	25	<el-select v-model="formData.methodName" @change="methodChange" style="width: 240px">
	26	<el-option
	27	v-for="item in methodList"
	28	:key="item.id"
	29	:label="item.methodName"
	30	:value="item.methodName"
	31	/>
	32	</el-select>
	33	</el-form-item>
	34	</el-col>
	35	</el-row>
9ec4bd	36	<el-divider content-position="left">模型参数信息</el-divider>
潘	37	<el-row :gutter="20">
	38	<el-col :span="2" style="margin-bottom: 10px;margin-left: 20px">
	39	<el-button tag="a" href="/template/模型参数导入模板.xlsx" download="模型参数导入模板.xlsx" style="text-decoration: none;" type="primary" size="small" link>模板下载</el-button>
	40	</el-col>
	41	<el-col :span="2" style="margin-bottom: 10px;">
	42	<el-upload
	43	ref="uploadRef"
	44	v-model:file-list="fileList"
	45	:show-file-list="false"
	46	:action="importUrl"
	47	:auto-upload="true"
	48	:disabled="formLoading"
	49	:before-upload="beforeUpload"
	50	:headers="uploadHeaders"
	51	:on-error="submitFormError"
	52	:on-success="submitFormSuccess"
	53	accept=".xlsx"
	54	>
	55	<el-button type="primary" size="small" link>参数导入</el-button>
	56	</el-upload>
	57	</el-col>
	58	</el-row>
de019e	59	<el-row v-for="(item,index) in datas" :key="index" :gutter="20">
D	60	<el-col :span="24">
9ec4bd	61	<el-form-item :label="'参数_' + (index)" required style="width: 100%">
de019e	62	<el-input type="textarea" :disabled="true" :rows="3" v-model="datas[index]" placeholder="" />
9ec4bd	63	</el-form-item>
潘	64	</el-col>
	65	</el-row>
	66	<el-row v-if="hasModel" :gutter="20">
	67	<el-col :span="20">
	68	<el-form-item label="model" required style="width: 100%">
	69	<el-input v-model="formData.model" placeholder="" />
	70	</el-form-item>
	71	</el-col>
	72	</el-row>
	73	<el-divider content-position="left">模型设置信息</el-divider>
de019e	74	<!-- <el-row :gutter="20">-->
D	75	<!-- <el-col :span="4">-->
	76	<!-- <el-button type="primary" size="small" @click="addRow()">新增</el-button>-->
	77	<!-- </el-col>-->
	78	<!-- </el-row>-->
9ec4bd	79	<el-table :data="formData.modelSettings" border>
潘	80	<el-table-column
	81	prop=""
	82	label="参数key"
	83	align="center">
	84	<template #default="scope">
de019e	85	<el-input size="small" v-model="scope.row.settingKey" :disabled="true" maxlength="50" clearable />
9ec4bd	86	</template>
潘	87	</el-table-column>
	88	<el-table-column
	89	prop=""
	90	label="参数value"
	91	align="center">
	92	<template #default="scope">
	93	<el-input size="small" v-model="scope.row.settingValue" maxlength="50" clearable />
	94	</template>
	95	</el-table-column>
	96	<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
	97	<template #default="scope">
	98	<el-button
	99	@click="deleteRow(scope.$index)"
	100	key="danger"
	101	type="danger"
	102	link
	103	>删除</el-button>
	104	</template>
	105	</el-table-column>
	106	</el-table>
	107	<el-divider content-position="left">模型运行结果</el-divider>
	108	<el-input v-model="modelRunResult" placeholder="" rows="4" type="textarea" />
	109	<div style="display: flex;flex-direction: row;justify-content: end;margin-top: 16px">
	110	<el-button :loading="modelRunloading" type="primary" @click="modelRun()">运行</el-button>
	111	</div>
	112	</el-form>
	113	</Dialog>
	114	</template>
	115	<script lang="ts" setup>
aff5c9	116	import * as MpkApi from '@/api/model/mpk/mpk'
9ec4bd	117	import {FormRules} from "element-plus";
潘	118	import {getAccessToken, getTenantId} from "@/utils/auth";
	119
	120	const { t } = useI18n() // 国际化
	121	const message = useMessage() // 消息弹窗
	122
	123	const dialogVisible = ref(false) // 弹窗的是否展示
	124	const dialogTitle = ref('模型运行') // 弹窗的标题
	125
	126	const formData = reactive({
2bff3e	127	pyName: '',
9ec4bd	128	className: '',
潘	129	methodName: '',
de019e	130	uuids: [],
9ec4bd	131	modelSettings: [],
潘	132	model: undefined
	133	})
de019e	134
D	135	const datas = ref([])
9ec4bd	136
潘	137	// 模型方法下拉列表
	138	const methodList = ref([])
	139	const hasModel = ref(false)
	140
	141	/** 打开弹窗 */
	142	const open = async (row) => {
	143	dialogVisible.value = true
	144	formData.className = row.pkgName + '.impl.' + row.pyName + 'Impl';
2bff3e	145	formData.pyName = row.pyName;
9ec4bd	146	const mpk = await MpkApi.getMpk(row.id)
潘	147	methodList.value = mpk.modelMethods
	148	formData.methodName = mpk.modelMethods[0].methodName
de019e	149	datas.value = []
D	150	formData.uuids = [];
9ec4bd	151	for (let i = 0 ; i < mpk.modelMethods[0].dataLength ; i++) {
de019e	152	datas.value[i] = '[[]]';
D	153	formData.uuids[i] = '';
9ec4bd	154	}
潘	155	hasModel.value = mpk.modelMethods[0].model === 1
631da1	156
D	157	// 回显参数
	158	if (mpk.modelMethods[0].methodSettings && mpk.modelMethods[0].methodSettings.length > 0) {
	159	formData.modelSettings = mpk.modelMethods[0].methodSettings.map(e => {
de019e	160	e.settingValue = e.value;
D	161	return e;
631da1	162	})
D	163	}
9ec4bd	164	}
潘	165	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	166
	167	const formRules = reactive<FormRules>({
	168	methodName: [
	169	{required: true, message: '方法名不能为空', trigger: 'blur'}
	170	],
	171	className: [
	172	{required: true, message: '全类名不能为空', trigger: 'blur'}
	173	]
	174	})
	175
	176	const addRow = function () {
	177	formData.modelSettings.push({
	178	settingKey: '',
	179	settingValue: ''
	180	})
	181	}
	182	const deleteRow = function (index) {
	183	formData.modelSettings.splice(index, 1)
	184	}
	185	const methodChange = function (value) {
de019e	186	datas.value = []
D	187	formData.uuids = [];
631da1	188	var method = methodList.value.find(e => e.methodName === value);
D	189	for (let i = 0 ; i < method?.dataLength ; i++) {
de019e	190	datas.value[i] = '[[]]';
D	191	formData.uuids[i] = '';
9ec4bd	192	}
631da1	193	hasModel.value = method?.model === 1
D	194	// 回显参数
	195	if (method.methodSettings && method.methodSettings.length > 0) {
	196	formData.modelSettings = method.methodSettings.map(e => {
de019e	197	e.settingValue = e.value;
D	198	return e;
631da1	199	})
D	200	}else {
	201	formData.modelSettings = []
	202	}
9ec4bd	203	}
潘	204
	205	const fileList = ref([]) // 文件列表
	206	const importUrl =
	207	import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/model/mpk/api/import'
	208	const formLoading = ref(false) // 表单的加载中
	209	const uploadHeaders = ref() // 上传 Header 头
	210	/** 上传错误提示 */
	211	const submitFormError = (): void => {
	212	message.error('导入失败，请检查导入文件！')
	213	formLoading.value = false
	214	}
	215	const submitFormSuccess = (response: any) => {
de019e	216	try {
D	217	if (response.code !== 0) {
	218	message.error(response.msg)
	219	return
	220	}
	221	const data = response.data;
	222	if (datas.value.length > data.length) {
	223	message.error("导入数据长度为" + data.length + ",应≥" + datas.value.length)
	224	return
	225	}
	226	for (let i = 0; i < datas.value.length; i++) {
	227	datas.value[i] = data[i].data
	228	formData.uuids[i] = data[i].uuid;
	229	}
	230	message.success('导入成功')
	231	} finally {
9ec4bd	232	formLoading.value = false
潘	233	}
	234	}
	235	const beforeUpload = function (file) {
	236	// 提交请求
	237	uploadHeaders.value = {
	238	Authorization: 'Bearer ' + getAccessToken(),
	239	'tenant-id': getTenantId()
	240	}
	241	formLoading.value = true
	242	return true;
	243	}
	244
	245	// 模型运行结果
	246	const modelRunResult = ref('')
	247	// 模型运行loading
	248	const modelRunloading = ref(false)
	249	// 表单 Ref
	250	const formRef = ref()
	251	// 运行
	252	const modelRun = async () => {
afc4d5	253	modelRunResult.value = ''
9ec4bd	254	// 校验表单
潘	255	if (!formRef) return
	256	const valid = await formRef.value.validate()
	257	if (!valid) return
	258	// 提交请求
	259	modelRunloading.value = true
	260	try {
	261	const data = {
	262	...formData
	263	}
	264
	265	//处理modelSettings
de019e	266	// let settingsPredict = {};
D	267	// data.modelSettings.forEach(e => {
	268	// settingsPredict[e.settingKey] = e.settingValue;
	269	// })
	270	// data.modelSettings = settingsPredict
9ec4bd	271	data.hasModel = hasModel.value
潘	272	if (data.hasModel && data.model) {
de019e	273	data.model = JSON.parse(data.model)
9ec4bd	274	}else {
潘	275	data.model = undefined
	276	}
	277
	278	modelRunResult.value = await MpkApi.modelRun(data)
	279	message.success('运行成功')
	280	} finally {
	281	modelRunloading.value = false
	282	}
	283	}
	284	</script>