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 | 240 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 170 insertions(+), 70 deletions(-)
diff --git a/src/views/model/pre/item/MmPredictItemForm.vue b/src/views/model/pre/item/MmPredictItemForm.vue
index b9ba042..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,16 +101,69 @@
</el-form-item>
</el-col>
</el-row>
- <el-row v-if="dataForm.itemtypename === 'MergeItem'">
- <el-col :span="12">
- <el-form-item label="预测长度" prop="mmPredictItem.predictlength">
- <el-input
- @change="changePredictLength"
- 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'">
@@ -136,7 +189,7 @@
<Icon icon="ep:upload"/>
上传模型
</el-button>
- <el-button type="primary"plain @click="setReplaceModelOnly(true)">
+ <el-button type="primary" plain @click="setReplaceModelOnly(true)">
<Icon icon="ep:upload"/>
更新模型
</el-button>
@@ -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,7 @@
<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>
@@ -313,36 +398,24 @@
</el-table-column>
<el-table-column prop="" label="参数名称" align="center">
<template #default="scope">
- <el-select v-if="scope.row.modelparamtype === 'NormalItem'"
+ <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)"
- style="width: 100%">
- <el-option-group
- v-for="group in modelparamListMap['NormalItem']"
- :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>
- <el-select v-else
+ :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
- @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"
+ />
</template>
</el-table-column>
<el-table-column prop="" label="参数长度" width="120" align="center">
@@ -356,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, scope.row, dataForm.mmModelParamList)"
- type="text"
- size="mini">
+ type="text">
删除
</el-button>
</template>
@@ -385,11 +456,11 @@
v-model="scope.row.point"
placeholder="请选择"
filterable
- :no-data-text="'无数据（predictlength：' + dataForm.mmPredictItem.predictlength + '）'"
+ :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.predictlength == dataForm.mmPredictItem.predictlength)"
+ v-for="group in modelparamListMap['NormalItem'].filter(e => e.moduleid === dataForm.dmModuleItem.moduleid)"
:key="group.value"
:label="group.label"
>
@@ -458,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()
@@ -477,7 +549,6 @@
const pointList = ref([])
const pointMap = ref({})
const modelparamListMap = ref({})
-const modelparamMap = ref({})
const expressionList = ref([])
const fileList = ref([])
const operatorList = ['+', '-']
@@ -504,7 +575,7 @@
predictphase: undefined,
workchecked: 0,
unittransfactor: undefined,
- saveindex: undefined
+ saveindex: undefined,
},
dmModuleItem: {
id: undefined,
@@ -543,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'}],
@@ -559,6 +634,7 @@
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'}],
@@ -596,7 +672,7 @@
mpkProjectList.value = await ProjectApi.list()
// 获取数据点列表
- pointNoList.value = await DaPoint.getPointList(queryParams)
+ pointNoList.value = await DaPoint.getPointSimpleList(queryParams)
if (pointNoList.value.length > 0) {
pointList.value = []
pointNoList.value.forEach(function (value) {
@@ -625,6 +701,13 @@
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
+ //校验累计配置
+ if (dataForm.value.iscumulant === 1) {
+ if (dataForm.value.cumuldivisor == undefined) {
+ message.error("累计除数不为空")
+ return
+ }
+ }
//校验模型输出
if (dataForm.value.itemtypename === 'NormalItem') {
if (dataForm.value.mmItemOutputList == undefined || dataForm.value.mmItemOutputList.length <= 0) {
@@ -632,15 +715,30 @@
return
}
- let flag = false
dataForm.value.mmItemOutputList.forEach(e => {
- if (e.resultstr == undefined || e.resultstr === '' || e.resultType == undefined || e.resultType === '' || (e.resultType === 2 && (e.resultIndex == undefined || e.resultIndex === ''))) {
- message.error("模型输出数据异常")
- flag = true
- return
+ 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('输出数据异常');
}
})
- if (flag) return
+
+ //校验模型输入
+ 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) {
@@ -650,7 +748,7 @@
let flag = false
expressionList.value.forEach((e,index) => {
- if (e.point == undefined || e.point === '' || e.operator == undefined || (e.operator === '' && index != expressionList.value.length - 1)) {
+ if (e.point == undefined || e.point === '' || ((e.operator == undefined || e.operator === '') && index != expressionList.value.length - 1)) {
message.error("表达式数据异常")
flag = true
return
@@ -658,7 +756,6 @@
})
if (flag) return
}
-
// 提交请求
formLoading.value = true
@@ -809,10 +906,6 @@
function uploadModelError(file, err, fileList) {
}
-function changeModelparam(row) {
- row.modelparamname = modelparamMap[row.modelparamid]
-}
-
function changeItemtype(value) {
dataForm.value.itemtypename = itemTypeMap[value]
}
@@ -882,6 +975,10 @@
row.resultIndex = 0
}
}
+function iscumulantChange(row) {
+ row.cumuldivisor = undefined
+ row.cumulpoint = undefined
+}
function orderRow(rows) {
let modelparamorder = 0
@@ -915,7 +1012,7 @@
fileList.value = []
}
-const changePredictLength = (value) => {
+const clearExpressionList = (value) => {
expressionList.value = [{
point: '',
operator: ''
@@ -942,7 +1039,7 @@
predictphase: '',
workchecked: 0,
unittransfactor: '',
- saveindex: ''
+ saveindex: '',
},
dmModuleItem: {
id: '',
@@ -978,7 +1075,10 @@
itemid: '',
expression: '',
num: ''
- }
+ },
+ iscumulant: 0,
+ cumuldivisor: undefined,
+ cumulpoint: '',
}
formRef.value?.resetFields()
}
--
Gitblit v1.9.3