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 | 77 +++++++++----------------
package.json | 2
src/views/model/sche/scheme/ScheduleSchemeForm.vue | 2
src/views/model/sche/model/ScheduleModelForm.vue | 91 +++++++++++++-----------------
4 files changed, 70 insertions(+), 102 deletions(-)
diff --git a/package.json b/package.json
index f904721..bc1fe5f 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
"driver.js": "^1.3.1",
"echarts": "^5.5.0",
"echarts-wordcloud": "^2.1.0",
- "element-plus": "2.9.1",
+ "element-plus": "2.9.2",
"fast-xml-parser": "^4.3.2",
"highlight.js": "^11.9.0",
"jsencrypt": "^3.3.2",
diff --git a/src/views/model/pre/item/MmPredictItemForm.vue b/src/views/model/pre/item/MmPredictItemForm.vue
index a583075..6f0ea99 100644
--- a/src/views/model/pre/item/MmPredictItemForm.vue
+++ b/src/views/model/pre/item/MmPredictItemForm.vue
@@ -299,18 +299,16 @@
</el-table-column>
<el-table-column label="数据点" align="center">
<template #default="scope">
- <el-select
+ <el-select-v2
v-model="scope.row.pointid"
- filterable
+ :options="pointList || []"
+ placeholder="请选择"
+ :props="{value:'id',label:'pointName'}"
clearable
+ filterable
@change="(value) => changeOutputPoint(value,scope.row)"
- placeholder="请选择">
- <el-option
- v-for="item in pointList"
- :key="item.id"
- :label="item.pointName"
- :value="item.id"/>
- </el-select>
+ :fit-input-width="false"
+ />
</template>
</el-table-column>
<el-table-column label="是否累计" align="center" width="150px">
@@ -334,18 +332,16 @@
</el-table-column>
<el-table-column label="累计数据点" align="center">
<template #default="scope">
- <el-select
+ <el-select-v2
v-model="scope.row.cumulpoint"
- :disabled="scope.row.iscumulant !== 1"
- filterable
+ :options="pointList.filter(e => e.pointType === 'CUMULATE') || []"
+ placeholder="请选择"
+ :props="{value:'id',label:'pointName'}"
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>
+ filterable
+ :fit-input-width="false"
+ :disabled="scope.row.iscumulant !== 1"
+ />
</template>
</el-table-column>
<el-table-column prop="" label="操作" width="80" align="center">
@@ -402,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">
@@ -565,7 +549,6 @@
const pointList = ref([])
const pointMap = ref({})
const modelparamListMap = ref({})
-const modelparamMap = ref({})
const expressionList = ref([])
const fileList = ref([])
const operatorList = ['+', '-']
@@ -921,10 +904,6 @@
}
function uploadModelError(file, err, fileList) {
-}
-
-function changeModelparam(row) {
- row.modelparamname = modelparamMap[row.modelparamid]
}
function changeItemtype(value) {
diff --git a/src/views/model/sche/model/ScheduleModelForm.vue b/src/views/model/sche/model/ScheduleModelForm.vue
index 5cdf9e9..fe9722d 100644
--- a/src/views/model/sche/model/ScheduleModelForm.vue
+++ b/src/views/model/sche/model/ScheduleModelForm.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"
@@ -138,34 +138,24 @@
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
- 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
- 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
@@ -267,10 +257,10 @@
style="width: 100%; margin-top: 5px;">
<el-table-column prop="resultKey" label="输出key" align="center" min-width="100">
<template #default="scope">
- <el-input size="mini" v-model="scope.row.resultKey" style="width:100%;height:100%"/>
+ <el-input size="small" v-model="scope.row.resultKey" style="width:100%;height:100%"/>
</template>
</el-table-column>
- <el-table-column prop="resultType" label="数据类型" align="center" min-width="150">
+ <el-table-column prop="resultType" label="数据类型" align="center" width="150">
<template #default="scope">
<el-select v-model="scope.row.resultType" placeholder="请选择">
<el-option
@@ -282,17 +272,17 @@
</el-select>
</template>
</el-table-column>
- <el-table-column prop="resultPort" label="角标1" align="center" min-width="100">
+ <el-table-column prop="resultPort" label="角标1" align="center" width="100">
<template #default="scope">
- <el-input-number :min="0" clearable controls-position="right" size="mini" v-model="scope.row.resultPort" style="width:100%;height:100%"/>
+ <el-input-number :min="0" clearable controls-position="right" size="small" v-model="scope.row.resultPort" style="width:100%;height:100%"/>
</template>
</el-table-column>
- <el-table-column prop="resultIndex" label="角标2" align="center" min-width="100">
+ <el-table-column prop="resultIndex" label="角标2" align="center" width="100">
<template #default="scope">
- <el-input-number :min="0" clearable controls-position="right" size="mini" v-model="scope.row.resultIndex" style="width:100%;height:100%"/>
+ <el-input-number :min="0" clearable controls-position="right" size="small" v-model="scope.row.resultIndex" style="width:100%;height:100%"/>
</template>
</el-table-column>
- <el-table-column prop="isWrite" label="是否下发" align="center" min-width="100">
+ <el-table-column prop="isWrite" label="是否下发" align="center" width="100">
<template #default="scope">
<el-switch size="small" v-model="scope.row.isWrite" :active-value="1"
:inactive-value="0"/>
@@ -303,29 +293,28 @@
label="测点名称"
align="center" min-width="200">
<template #default="scope">
- <el-select v-model="scope.row.pointNo"
- filterable
- placeholder="请选择">
- <el-option
- v-for="(item, index) in modelparamListMap['DATAPOINT']"
- :key="index"
- :label="item.name"
- :value="item.itemNo"/>
- </el-select>
+ <el-select-v2
+ v-model="scope.row.pointNo"
+ :options="modelparamListMap['DATAPOINT'] || []"
+ placeholder="请选择"
+ :props="{value:'itemNo',label:'name'}"
+ clearable
+ filterable
+ :fit-input-width="false"
+ />
</template>
</el-table-column>
<el-table-column prop="disturbancePointNo’" label="无扰切换点位" align="center" min-width="200">
<template #default="scope">
- <el-select v-model="scope.row.disturbancePointNo"
- clearable
- filterable
- placeholder="请选择">
- <el-option
- v-for="(item, index) in modelparamListMap['DATAPOINT']"
- :key="index"
- :label="item.name"
- :value="item.itemNo"/>
- </el-select>
+ <el-select-v2
+ v-model="scope.row.disturbancePointNo"
+ :options="modelparamListMap['DATAPOINT'] || []"
+ placeholder="请选择"
+ :props="{value:'itemNo',label:'name'}"
+ clearable
+ filterable
+ :fit-input-width="false"
+ />
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
@@ -443,7 +432,7 @@
}
}
// 加载参数列表
- modelparamListMap.value = await ScheduleModelApi.getModelParamList()
+ modelparamListMap.value = await ScheduleModelApi.getModelParamList(id)
// 加载调度模型列表
getScheduleModelList()
}
diff --git a/src/views/model/sche/scheme/ScheduleSchemeForm.vue b/src/views/model/sche/scheme/ScheduleSchemeForm.vue
index 9ee1e84..ce6f86a 100644
--- a/src/views/model/sche/scheme/ScheduleSchemeForm.vue
+++ b/src/views/model/sche/scheme/ScheduleSchemeForm.vue
@@ -58,7 +58,7 @@
</el-col>
<el-col :span="12">
<el-form-item label="调度模型" prop="modelId">
- <el-select v-model="formData.modelId" clearable placeholder="请选择调度模型">
+ <el-select v-model="formData.modelId" clearable filterable placeholder="请选择调度模型">
<el-option
v-for="item in scheduleModelList"
:key="item.id"
--
Gitblit v1.9.3