From 4427240765bea364f1588e14e59329bbfadbaa20 Mon Sep 17 00:00:00 2001
From: dengzedong <dengzedong@email>
Date: 星期二, 11 三月 2025 13:39:54 +0800
Subject: [PATCH] element-plus 版本升级到2.9.2 模型编辑页面下拉列表替换为 虚拟化选择器，解决页面dom加载压力过大页面卡顿
---
src/views/model/pre/item/MmPredictItemForm.vue | 324 ++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 240 insertions(+), 84 deletions(-)
diff --git a/src/views/model/pre/item/MmPredictItemForm.vue b/src/views/model/pre/item/MmPredictItemForm.vue
index 2ee0b2e..6f0ea99 100644
--- a/src/views/model/pre/item/MmPredictItemForm.vue
+++ b/src/views/model/pre/item/MmPredictItemForm.vue
@@ -1,5 +1,5 @@
<template>
- <Dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
+ <Dialog v-model="dialogVisible" :title="dialogTitle" width="75%">
<el-form
ref="formRef"
v-loading="formLoading"
@@ -78,7 +78,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="管网" prop="dmModuleItem.moduleid">
- <el-select v-model="dataForm.dmModuleItem.moduleid" placeholder="请选择">
+ <el-select v-model="dataForm.dmModuleItem.moduleid" placeholder="请选择" @change="clearExpressionList">
<el-option
v-for="item in moduleList"
:key="item.id"
@@ -101,15 +101,69 @@
</el-form-item>
</el-col>
</el-row>
- <el-row v-if="dataForm.itemtypename === 'MergeItem'">
- <el-col :span="12">
- <el-form-item label="预测长度">
- <el-input
- v-model="dataForm.mmPredictItem.predictlength" placeholder="预测长度"
- maxlength="5"/>
- </el-form-item>
- </el-col>
- </el-row>
+ <div v-if="dataForm.itemtypename === 'MergeItem'">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="预测长度" prop="mmPredictItem.predictlength">
+ <el-input
+ v-model="dataForm.mmPredictItem.predictlength" placeholder="预测长度"
+ maxlength="5"/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="真实数据点">
+ <el-select
+ v-model="dataForm.pointId"
+ filterable
+ clearable
+ placeholder="请选择">
+ <el-option
+ v-for="item in pointList"
+ :key="item.id"
+ :label="item.pointName"
+ :value="item.id"/>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-divider content-position="left">累计配置</el-divider>
+ <el-row>
+ <el-col :span="6">
+ <el-form-item label="是否累计" prop="iscumulant">
+ <el-select v-model="dataForm.iscumulant" placeholder="请选择" @change="(value) => iscumulantChange(dataForm)">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6">
+ <el-form-item label="累计除数" prop="cumuldivisor">
+ <el-input-number v-model="dataForm.cumuldivisor" style="width: 100%" :disabled="dataForm.iscumulant !== 1"
+ :min="1" :max="60"
+ :controls="false"/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="累计测点">
+ <el-select
+ v-model="dataForm.cumulpoint" :disabled="dataForm.iscumulant !== 1"
+ filterable
+ clearable
+ placeholder="请选择">
+ <el-option
+ v-for="item in pointList.filter(e => e.pointType === 'CUMULATE')"
+ :key="item.id"
+ :label="item.pointName"
+ :value="item.id"/>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
<el-divider content-position="left" v-if="dataForm.itemtypename === 'NormalItem'">模型信息
</el-divider>
<el-row :gutter="8" v-if="dataForm.itemtypename === 'NormalItem'">
@@ -135,9 +189,7 @@
<Icon icon="ep:upload"/>
上传模型
</el-button>
- <el-button
- size="small" type="primary" @click="setReplaceModelOnly(true)"
- v-if="formType.value === 'update'">
+ <el-button type="primary" plain @click="setReplaceModelOnly(true)">
<Icon icon="ep:upload"/>
更新模型
</el-button>
@@ -146,7 +198,7 @@
</el-row>
<el-row v-if="dataForm.itemtypename === 'NormalItem'">
<el-col :span="12">
- <el-form-item label="关联项目">
+ <el-form-item label="关联项目" prop="mmPredictModel.mpkprojectid">
<el-select v-model="dataForm.mmPredictModel.mpkprojectid" placeholder="请选择">
<el-option
v-for="item in mpkProjectList"
@@ -201,7 +253,8 @@
<el-divider content-position="left" v-if="dataForm.itemtypename === 'NormalItem'">模型输出
</el-divider>
<el-button
- @click="addItemOutput(dataForm.mmItemOutputList)"
+ v-if="dataForm.itemtypename === 'NormalItem'"
+ @click="addItemOutput()"
type="primary"
size="small">
添加
@@ -246,17 +299,49 @@
</el-table-column>
<el-table-column label="数据点" align="center">
<template #default="scope">
- <el-select
+ <el-select-v2
v-model="scope.row.pointid"
+ :options="pointList || []"
+ placeholder="请选择"
+ :props="{value:'id',label:'pointName'}"
+ clearable
filterable
@change="(value) => changeOutputPoint(value,scope.row)"
- placeholder="请选择">
+ :fit-input-width="false"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="是否累计" align="center" width="150px">
+ <template #default="scope">
+ <el-select v-model="scope.row.iscumulant" placeholder="请选择" @change="(value) => iscumulantChange(scope.row)">
<el-option
- v-for="item in pointList"
- :key="item.id"
- :label="item.pointName"
- :value="item.id"/>
+ v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
</el-select>
+ </template>
+ </el-table-column>
+ <el-table-column label="累计除数" align="center" width="100px">
+ <template #default="scope">
+ <el-input-number v-model="scope.row.cumuldivisor" style="width: 100%"
+ :min="1" :max="60" :disabled="scope.row.iscumulant !== 1"
+ :controls="false"/>
+ </template>
+ </el-table-column>
+ <el-table-column label="累计数据点" align="center">
+ <template #default="scope">
+ <el-select-v2
+ v-model="scope.row.cumulpoint"
+ :options="pointList.filter(e => e.pointType === 'CUMULATE') || []"
+ placeholder="请选择"
+ :props="{value:'id',label:'pointName'}"
+ clearable
+ filterable
+ :fit-input-width="false"
+ :disabled="scope.row.iscumulant !== 1"
+ />
</template>
</el-table-column>
<el-table-column prop="" label="操作" width="80" align="center">
@@ -282,7 +367,8 @@
<el-table-column prop="valuetype" label="类型" align="center" min-width="150"/>
<el-table-column prop="" label="值" align="center" min-width="200">
<template #default="scope">
- <el-input size="mini" v-model="scope.row.value" maxlength="256"
+ <el-input v-model="scope.row.value" maxlength="1000"
+ :disabled="scope.row.key === 'pyFile'"
style="width:100%;height:100%"/>
</template>
</el-table-column>
@@ -312,17 +398,24 @@
</el-table-column>
<el-table-column prop="" label="参数名称" align="center">
<template #default="scope">
- <el-select
+ <el-select-v2 v-if="scope.row.modelparamtype === 'NormalItem'"
v-model="scope.row.modelparamid"
+ :options="modelparamListMap['NormalItem'] || []"
+ placeholder="请选择"
+ :props="{value:'value',label:'label',options:'children'}"
+ clearable
filterable
- @change="changeModelparam(scope.row)"
- placeholder="请选择">
- <el-option
- v-for="(item, index) in modelparamListMap[scope.row.modelparamtype]"
- :key="index"
- :label="item.name"
- :value="item.id"/>
- </el-select>
+ :fit-input-width="false"
+ />
+ <el-select-v2 v-else
+ v-model="scope.row.modelparamid"
+ :options="modelparamListMap[scope.row.modelparamtype] || []"
+ placeholder="请选择"
+ :props="{value:'id',label:'name'}"
+ clearable
+ filterable
+ :fit-input-width="false"
+ />
</template>
</el-table-column>
<el-table-column prop="" label="参数长度" width="120" align="center">
@@ -336,14 +429,12 @@
<template #default="scope">
<el-button
@click="addRow(scope.$index, dataForm.mmModelParamList)"
- type="text"
- size="mini">
+ type="text">
添加
</el-button>
<el-button
- @click="deleteRow(scope.$index, dataForm.mmModelParamList)"
- type="text"
- size="mini">
+ @click="deleteRow(scope.$index, scope.row, dataForm.mmModelParamList)"
+ type="text">
删除
</el-button>
</template>
@@ -358,18 +449,28 @@
style="width: 100%; margin-top: 5px;">
<el-table-column
prop=""
- label="预测项"
+ label="预测项(NormalItem)"
align="center">
<template #default="scope">
<el-select
v-model="scope.row.point"
+ placeholder="请选择"
filterable
- placeholder="请选择">
- <el-option
- v-for="(item, index) in predictItemList"
- :key="index"
- :label="item.itemname"
- :value="item.itemno"/>
+ :no-data-text="'无数据（管网：' + moduleList.find(e => e.id === dataForm.dmModuleItem.moduleid)?.modulename + '）'"
+ @change="changeNormalItemSelect"
+ style="width: 100%">
+ <el-option-group
+ v-for="group in modelparamListMap['NormalItem'].filter(e => e.moduleid === dataForm.dmModuleItem.moduleid)"
+ :key="group.value"
+ :label="group.label"
+ >
+ <el-option
+ v-for="item in group.children"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-option-group>
</el-select>
</template>
</el-table-column>
@@ -428,6 +529,7 @@
import * as DaPoint from '@/api/data/da/point'
import {useUpload} from '@/api/model/pre/item'
import * as ScheduleModelApi from '@/api/model/sche/model'
+import {getPointSimpleList} from "@/api/data/da/point";
const {uploadUrl, httpRequest} = useUpload()
@@ -446,9 +548,7 @@
const pointNoList = ref([])
const pointList = ref([])
const pointMap = ref({})
-const predictItemList = ref([])
const modelparamListMap = ref({})
-const modelparamMap = ref({})
const expressionList = ref([])
const fileList = ref([])
const operatorList = ['+', '-']
@@ -475,7 +575,7 @@
predictphase: undefined,
workchecked: 0,
unittransfactor: undefined,
- saveindex: undefined
+ saveindex: undefined,
},
dmModuleItem: {
id: undefined,
@@ -514,7 +614,11 @@
num: undefined
},
mmModelArithSettingsList: [],
- mmModelParamList: []
+ mmModelParamList: [],
+ pointId: undefined,
+ iscumulant: 0,
+ cumuldivisor: undefined,
+ cumulpoint: undefined,
})
const formRules = reactive({
'mmPredictItem.itemname': [{required: true, message: '预测项名不能为空', trigger: 'blur'}],
@@ -530,8 +634,11 @@
trigger: 'blur'
}],
'mmPredictItem.status': [{required: true, message: '是否启用不能为空', trigger: 'blur'}],
+ 'iscumulant': [{required: true, message: '是否累计不能为空', trigger: 'blur'}],
'dmModuleItem.moduleid': [{required: true, message: '管网不能为空', trigger: 'blur'}],
'dmModuleItem.itemorder': [{required: true, message: '排序不能为空', trigger: 'blur'}],
+ 'mmPredictItem.predictlength': [{required: true, message: '预测长度不能为空', trigger: 'blur'}],
+ 'mmPredictModel.mpkprojectid': [{required: true, message: '关联项目不能为空', trigger: 'blur'}],
})
const formRef = ref() // 表单 Ref
@@ -547,7 +654,7 @@
setDefaultFields()
// 加载参数列表
- modelparamListMap.value = await ScheduleModelApi.getModelParamList()
+ modelparamListMap.value = await ScheduleModelApi.getModelParamList(id)
// 获取预测项类型列表
itemTypeList.value = await MmItemType.getItemTypeList()
@@ -564,13 +671,8 @@
// 获取mpk项目列表
mpkProjectList.value = await ProjectApi.list()
- // 获取normal列表
- predictItemList.value = await MmPredictItem.getMmPredictItemList({
- itemtypename: 'NormalItem'
- })
-
// 获取数据点列表
- pointNoList.value = await DaPoint.getPointList(queryParams)
+ pointNoList.value = await DaPoint.getPointSimpleList(queryParams)
if (pointNoList.value.length > 0) {
pointList.value = []
pointNoList.value.forEach(function (value) {
@@ -599,21 +701,61 @@
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
-
- //校验模型输出
- if (dataForm.value.mmItemOutputList == undefined || dataForm.value.mmItemOutputList.length <= 0) {
- message.error("模型输出不为空")
- return
- }
-
- let flag = false
- dataForm.value.mmItemOutputList.forEach(e => {
- if (e.resultstr == undefined || e.resultstr === '' || e.resultType == undefined || e.resultType === '' || e.pointid == undefined || e.pointid === '' || (e.resultType === 2 && (e.resultIndex == undefined || e.resultIndex === ''))) {
- message.error("模型输出数据异常")
- flag = true
+ //校验累计配置
+ if (dataForm.value.iscumulant === 1) {
+ if (dataForm.value.cumuldivisor == undefined) {
+ message.error("累计除数不为空")
+ return
}
- })
- if (flag) return
+ }
+ //校验模型输出
+ if (dataForm.value.itemtypename === 'NormalItem') {
+ if (dataForm.value.mmItemOutputList == undefined || dataForm.value.mmItemOutputList.length <= 0) {
+ message.error("模型输出不为空")
+ return
+ }
+
+ dataForm.value.mmItemOutputList.forEach(e => {
+ if (e.resultstr == undefined || e.resultstr === '' || e.resultType == undefined || e.resultType === ''
+ || (e.resultType === 2 && (e.resultIndex == undefined || e.resultIndex === ''))
+ || (e.iscumulant === 1 && e.cumuldivisor == undefined)
+ ) {
+ message.error("输出数据异常")
+ throw new Error('输出数据异常');
+ }
+ })
+
+ //校验模型输入
+ dataForm.value.mmModelParamList.forEach(e => {
+ if (e.modelparamid == undefined || e.modelparamid == '') {
+ message.error("输入数据异常")
+ throw new Error('输入数据异常');
+ }
+ // ind_ascii类型输出的序号必须是1，且所在端口序号最大为1（一个ind_ascii类型输入独占一个端口）
+ if (e.modelparamtype === 'IND_ASCII') {
+ if (e.modelparamorder != 1 || dataForm.value.mmModelParamList.filter(p => p.modelparamportorder === e.modelparamportorder).length != 1) {
+ message.error("输入数据异常：IND_ASCII类型输入独占一个端口")
+ throw new Error('输入数据异常：IND_ASCII类型输入独占一个端口');
+ }
+ }
+ })
+ }
+ if (dataForm.value.itemtypename === 'MergeItem') {
+ if (expressionList.value == undefined || expressionList.value.length <= 1) {
+ message.error("表达式长度低于2")
+ return
+ }
+
+ let flag = false
+ expressionList.value.forEach((e,index) => {
+ if (e.point == undefined || e.point === '' || ((e.operator == undefined || e.operator === '') && index != expressionList.value.length - 1)) {
+ message.error("表达式数据异常")
+ flag = true
+ return
+ }
+ })
+ if (flag) return
+ }
// 提交请求
formLoading.value = true
@@ -631,7 +773,7 @@
}
if (dataForm.value.mmModelArithSettingsList) {
for (let item of dataForm.value.mmModelArithSettingsList) {
- if (item.key === 'lenpredict') {
+ if (item.key === 'predictLength') {
dataForm.value.mmPredictItem.predictlength = item.value
}
}
@@ -679,7 +821,7 @@
let endIndex = (indexSub == -1 || (indexPlus < indexSub && indexPlus !== -1)) ? indexPlus : indexSub
expressionList.value.push({
point: expression.substring(0, endIndex),
- operator: expression.substring(endIndex, 1)
+ operator: expression.substring(endIndex, endIndex + 1)
})
expression = expression.substring(endIndex + 1)
} else {
@@ -719,7 +861,8 @@
dataForm.value.mmPredictModel.modelparamstructure = ''
if (response.data.loadFieldSetList && response.data.loadFieldSetList[0].propertyList) {
response.data.loadFieldSetList[0].propertyList.forEach(function (value) {
- if (value.key !== 'data1') {
+ //匹配 data数字
+ if (!/^data\d+$/.test(value.key)) {
dataForm.value.mmModelArithSettingsList.push({
key: value.key,
name: value.name,
@@ -763,10 +906,6 @@
function uploadModelError(file, err, fileList) {
}
-function changeModelparam(row) {
- row.modelparamname = modelparamMap[row.modelparamid]
-}
-
function changeItemtype(value) {
dataForm.value.itemtypename = itemTypeMap[value]
}
@@ -788,9 +927,9 @@
rows.splice(index, 0, row)
}
-function deleteRow(index: string, rows) {
- if (!rows || rows.length === 1) {
- message.error('不能全部删除!')
+function deleteRow(index, row, rows) {
+ if (!rows || rows.length === 1 || rows.filter(e => e.modelparamportorder === row.modelparamportorder).length === 1) {
+ message.error('不可删除！')
return
}
rows.splice(index, 1)
@@ -803,9 +942,12 @@
orderRow(rows)
}
-function addItemOutput(list) {
- list.push({})
- orderItemOutput(list)
+function addItemOutput() {
+ if (!dataForm.value.mmItemOutputList) {
+ dataForm.value.mmItemOutputList = []
+ }
+ dataForm.value.mmItemOutputList.push({})
+ orderItemOutput(dataForm.value.mmItemOutputList)
}
function deleteItemOutput(index: string, rows) {
@@ -832,6 +974,10 @@
} else if (value === 2) {
row.resultIndex = 0
}
+}
+function iscumulantChange(row) {
+ row.cumuldivisor = undefined
+ row.cumulpoint = undefined
}
function orderRow(rows) {
@@ -866,6 +1012,13 @@
fileList.value = []
}
+const clearExpressionList = (value) => {
+ expressionList.value = [{
+ point: '',
+ operator: ''
+ }]
+}
+
/** 重置表单 */
const resetForm = () => {
dataForm.value = {
@@ -886,7 +1039,7 @@
predictphase: '',
workchecked: 0,
unittransfactor: '',
- saveindex: ''
+ saveindex: '',
},
dmModuleItem: {
id: '',
@@ -922,7 +1075,10 @@
itemid: '',
expression: '',
num: ''
- }
+ },
+ iscumulant: 0,
+ cumuldivisor: undefined,
+ cumulpoint: '',
}
formRef.value?.resetFields()
}
--
Gitblit v1.9.3