|
|
@ -1,15 +1,15 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px"> |
|
|
|
<el-form-item label="设备编号" prop="deviceUuid"> |
|
|
|
<!-- <el-form-item label="设备编号" prop="deviceUuid"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.deviceUuid" |
|
|
|
placeholder="请输入设备编号" |
|
|
|
clearable |
|
|
|
@keyup.enter="handleQuery" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备名称" prop="deviceName"> |
|
|
|
</el-form-item> --> |
|
|
|
<el-form-item label="设备名称模糊" prop="deviceName"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.deviceName" |
|
|
|
placeholder="请输入设备名称" |
|
|
@ -17,6 +17,17 @@ |
|
|
|
@keyup.enter="handleQuery" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备名称多选" prop="deviceUuid"> |
|
|
|
<el-select v-model="queryParams.deviceUuid" placeholder="请选择设备" clearable multiple |
|
|
|
class="custom-select"> |
|
|
|
<el-option |
|
|
|
v-for="dict in listDeviceAll" |
|
|
|
:key="dict.uuid" |
|
|
|
:label="dict.deviceName" |
|
|
|
:value="dict.uuid" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="参数编号" prop="paramCode"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.paramCode" |
|
|
@ -74,11 +85,21 @@ |
|
|
|
.blueTheButton{ |
|
|
|
color:blue |
|
|
|
} |
|
|
|
// 在你的重置样式表内加入这段代码即可 |
|
|
|
.custom-select { |
|
|
|
display: inline-block; |
|
|
|
overflow: hidden; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.app-container .el-select__tags { |
|
|
|
white-space: nowrap!important; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
<script setup> |
|
|
|
import { ref, reactive } from 'vue'; |
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
|
|
|
|
import { listDeviceNoPage } from "@/api/model/device"; |
|
|
|
const heatapiContentList = ref([]); |
|
|
|
const oldData = ref(""); |
|
|
|
const loading = ref(false); |
|
|
@ -86,6 +107,7 @@ const showSearch = ref(true); |
|
|
|
const currentPage = ref(1); |
|
|
|
const pageSize = ref(10); |
|
|
|
const expandRowKeys = ref([]); |
|
|
|
const listDeviceAll = ref([]); |
|
|
|
const queryParams = reactive({ |
|
|
|
deviceUuid: null, |
|
|
|
deviceName: null, |
|
|
@ -116,14 +138,23 @@ function handleQuery() { |
|
|
|
// 根据查询参数对 heatapiContentList 进行过滤 |
|
|
|
const filteredHeatapiContentList = JSON.parse(oldData.value).filter((item) => { |
|
|
|
// 根据查询参数进行条件匹配,可以使用正则表达式或其他匹配方式 |
|
|
|
|
|
|
|
let flagb = true; |
|
|
|
// 判断是否匹配到了外层表格的数据 |
|
|
|
let flag = (!queryParams.deviceUuid || item.deviceId?.includes(queryParams.deviceUuid)) && |
|
|
|
(!queryParams.deviceName || item.name?.toLowerCase().includes(queryParams.deviceName.toLowerCase())); |
|
|
|
|
|
|
|
if(!flag){ |
|
|
|
if (!queryParams.deviceUuid || typeof queryParams.deviceUuid !== 'string') { |
|
|
|
const deviceUuids = queryParams.deviceUuid; |
|
|
|
// 对拆分后的每个值进行匹配 |
|
|
|
flagb = deviceUuids.some(uuid => !uuid || item.deviceId == uuid) && |
|
|
|
(!queryParams.deviceName || item.name?.toLowerCase().includes(queryParams.deviceName.toLowerCase())); |
|
|
|
if(!flagb){ |
|
|
|
return false; |
|
|
|
} |
|
|
|
}else{ |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 这里以设备编号、设备名称、参数编号和参数名称为例进行示范 |
|
|
|
const matchedParams = item.params.filter((param) => { |
|
|
@ -140,8 +171,7 @@ function handleQuery() { |
|
|
|
const hasMatchedParams = matchedParams.length > 0; |
|
|
|
|
|
|
|
// 根据是否有内层表格的匹配结果进行判断 |
|
|
|
flag = flag && (queryParams.paramCode || queryParams.paramName) ? hasMatchedParams : flag; |
|
|
|
|
|
|
|
flag = flagb && (queryParams.paramCode || queryParams.paramName) ? hasMatchedParams : flagb; |
|
|
|
return flag; |
|
|
|
}); |
|
|
|
|
|
|
@ -202,4 +232,11 @@ function collapseAllRows() { |
|
|
|
expandRowKeys.value = []; |
|
|
|
} |
|
|
|
|
|
|
|
function getDevicesAll(){ |
|
|
|
listDeviceNoPage().then(response => { |
|
|
|
listDeviceAll.value = response.data; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
getDevicesAll(); |
|
|
|
</script> |
|
|
|