|
@@ -65,10 +65,13 @@
|
|
|
<el-select
|
|
|
v-model="queryParams.iedrela"
|
|
|
placeholder="请输入IED编码或名称"
|
|
|
- clearable
|
|
|
- ref="selectRef"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ :remote-method="remoteMethod"
|
|
|
+ :loading="loadingsearch"
|
|
|
@clear="showIedList = false"
|
|
|
- v-if="showIedList"
|
|
|
>
|
|
|
<template #header>
|
|
|
<span class="search-header" v-if="searchIedList.length > 0">
|
|
@@ -82,18 +85,19 @@
|
|
|
:value="dict.node_id"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
- <el-input
|
|
|
+ <!-- <el-input
|
|
|
ref="selectInputRef"
|
|
|
v-model="queryParams.iedrela"
|
|
|
placeholder="请输入IED编码或名称"
|
|
|
+ :suffix-icon="Search"
|
|
|
clearable
|
|
|
@change="searchInput"
|
|
|
v-else
|
|
|
- />
|
|
|
+ /> -->
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <el-scrollbar height="54vh" v-loading="loading" v-if="loadDating">
|
|
|
+ <el-scrollbar height="54vh" v-loading="loading" v-if="loadDating">
|
|
|
<div
|
|
|
v-for="(item, index) in voltageLevel"
|
|
|
:key="index"
|
|
@@ -148,7 +152,7 @@ import {
|
|
|
ref,
|
|
|
toRefs,
|
|
|
nextTick,
|
|
|
- provide
|
|
|
+ provide,
|
|
|
} from "vue";
|
|
|
import scdIed from "@/assets/image/instruct/scdIed.png";
|
|
|
import {
|
|
@@ -160,10 +164,12 @@ import {
|
|
|
import { useDataStore } from "@/store/modules/golbal-data";
|
|
|
import scdDialogIndex from "./scdDialogIndex";
|
|
|
import { useRoute } from "vue-router";
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
const userStoreCode = useDataStore();
|
|
|
const route = useRoute();
|
|
|
// const scdIdValue = 1248000337;
|
|
|
const scdIdValue = route.query.id;
|
|
|
+const loadingsearch = ref(false); //快捷搜索
|
|
|
const data = reactive({
|
|
|
queryParams: {
|
|
|
scd_id: scdIdValue,
|
|
@@ -182,7 +188,9 @@ const reset = () => {
|
|
|
device_type_id: null, //装置类型
|
|
|
};
|
|
|
};
|
|
|
-
|
|
|
+const remoteMethod = (value) => {
|
|
|
+ searchInput(value);
|
|
|
+};
|
|
|
const areaData = ref([]); //获取间隔
|
|
|
const allLevel = ref([]); // 获取所有电压
|
|
|
const all = [{ name: "全部", id: "alls" }];
|
|
@@ -203,7 +211,7 @@ const getArea = async () => {
|
|
|
const levelData = [
|
|
|
...new Set(areaRes.data.map((itemlevel) => itemlevel.voltage_level)),
|
|
|
];
|
|
|
- if(!levelData) return;
|
|
|
+ if (!levelData) return;
|
|
|
levelData.forEach((myLevelItem) => {
|
|
|
const findData = allLevel.value.find((allItem) => {
|
|
|
return allItem.id == myLevelItem;
|
|
@@ -213,7 +221,7 @@ const getArea = async () => {
|
|
|
}
|
|
|
});
|
|
|
//处理主界面的数据展示
|
|
|
- if(!voltageLevel.value) return;
|
|
|
+ if (!voltageLevel.value) return;
|
|
|
voltageLevel.value.forEach((item) => {
|
|
|
if (item.id == "alls") return;
|
|
|
item.levelData = [];
|
|
@@ -239,24 +247,30 @@ const showIedList = ref(false);
|
|
|
const searchIedList = ref([]);
|
|
|
const selectRef = ref(null);
|
|
|
const searchInput = (value) => {
|
|
|
- if (value && iedName.value) {
|
|
|
- showIedList.value = true;
|
|
|
- searchIedList.value = Object.values(iedName.value).filter((item) => {
|
|
|
- const lowercaseValue = value.toLowerCase(); //不区分大小写
|
|
|
- const iedNameLower = item.ied_name ? item.ied_name.toLowerCase() : null;
|
|
|
- const descLower = item.desc ? item.desc.toLowerCase() : null;
|
|
|
- return (
|
|
|
- (iedNameLower !== null && iedNameLower.includes(lowercaseValue)) ||
|
|
|
- (descLower !== null && descLower.includes(lowercaseValue))
|
|
|
- );
|
|
|
- });
|
|
|
- // 选择框自动展开
|
|
|
- nextTick(() => {
|
|
|
- selectRef.value.toggleMenu();
|
|
|
- });
|
|
|
- } else {
|
|
|
- showIedList.value = false;
|
|
|
- }
|
|
|
+ loadingsearch.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ if (value && iedName.value) {
|
|
|
+ loadingsearch.value = false;
|
|
|
+ showIedList.value = true;
|
|
|
+ searchIedList.value = Object.values(iedName.value).filter((item) => {
|
|
|
+ const lowercaseValue = value.toLowerCase(); //不区分大小写
|
|
|
+ const iedNameLower = item.ied_name ? item.ied_name.toLowerCase() : null;
|
|
|
+ const descLower = item.desc ? item.desc.toLowerCase() : null;
|
|
|
+ return (
|
|
|
+ (iedNameLower !== null && iedNameLower.includes(lowercaseValue)) ||
|
|
|
+ (descLower !== null && descLower.includes(lowercaseValue))
|
|
|
+ );
|
|
|
+ });
|
|
|
+
|
|
|
+ // 选择框自动展开
|
|
|
+ // nextTick(() => {
|
|
|
+ // selectRef.value.toggleMenu();
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ showIedList.value = false;
|
|
|
+ searchIedList.value = [];
|
|
|
+ }
|
|
|
+ }, 200);
|
|
|
};
|
|
|
const count = ref(0);
|
|
|
const iedNameData = async () => {
|
|
@@ -267,7 +281,7 @@ const iedNameData = async () => {
|
|
|
};
|
|
|
const done = (emits) => {
|
|
|
open.value = emits;
|
|
|
- reset()
|
|
|
+ reset();
|
|
|
dialogData.value = [];
|
|
|
};
|
|
|
//选择电压
|
|
@@ -304,7 +318,7 @@ const changeLevel = async (value, mainValue) => {
|
|
|
}
|
|
|
};
|
|
|
//弹窗=============
|
|
|
-provide('scdId',scdIdValue)
|
|
|
+provide("scdId", scdIdValue);
|
|
|
onMounted(async () => {
|
|
|
iedNameData();
|
|
|
allLevel.value = await userStoreCode.GlobalCodes();
|
|
@@ -430,4 +444,7 @@ onMounted(async () => {
|
|
|
height: 220px;
|
|
|
}
|
|
|
}
|
|
|
+:deep(.el-input .el-input__icon) {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|