admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/details/propInfo.vue

<template>
    <div class="propInfo" v-if="show">
        <div class="top">
            <el-form :inline="false" label-width="auto">
                <el-form-item label=" 筛选数据">
                    <el-input v-model="value" size="small" clearable placeholder="请输入关键字进行筛选"></el-input>
                </el-form-item>
                <!-- <el-form-item label="电网标志">
                    <el-select v-model="powerFlag" placeholder="请选择电网标志">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="电网侧" value="1"></el-option>
                        <el-option label="非电网侧" value="2"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <Close class="ico" @click="show = false" />
        </div>
        <vxe-table
            height="200px"
            :data="filterDataByKeyword(dataList, value)"
            size="mini"
            border
            ref="tableRef"
            align="center"
            showOverflow
            v-loading="loading"
            :row-config="{ isCurrent: true, isHover: true }"
            :columnConfig="{ resizable: true }"
            @cell-click="currentChangeEvent"
            style="z-index: 0"
        >
            <vxe-column type="seq" title="序号" width="70px"></vxe-column>
            <vxe-column field="gdName" title="供电公司"></vxe-column>
            <vxe-column field="subName" title="变电站名称"></vxe-column>
            <!-- <vxe-column field="deviceName" title="终端名称"></vxe-column> -->
            <!-- <vxe-column field="ip" title="IP"></vxe-column> -->
            <vxe-column field="lineName" title="监测点名称"></vxe-column>
            <vxe-column field="powerFlag" title="电网标志">
                <template #default="{ row }">
                    {{ row.powerFlag == 0 ? '电网侧' : '非电网侧' }}
                </template>
            </vxe-column>
            <!-- <vxe-column field="loadType" title="干扰源"></vxe-column> -->
            <vxe-column field="loadType" title="干扰源类型"></vxe-column>
            <vxe-column field="objName" title="监测对象"></vxe-column>
        </vxe-table>
    </div>
</template>
<script setup lang="ts">
import { onMounted, nextTick, ref, provide } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { Close } from '@element-plus/icons-vue'
const emit = defineEmits(['flyTo'])
const value = ref('')
const tableRef = ref()
const dataList = ref([])
const loading = ref(false)
const powerFlag = ref('0')
const open = (data: any) => {
    dataList.value = []
    loading.value = true
    show.value = true
    setTimeout(() => {
        dataList.value = data.sort((a, b) => b.vharmonicValue - a.vharmonicValue)
        loading.value = false
    }, 1000)
}

/**
 * 根据关键字过滤数据，匹配gdName/subName/deviceName字段
 * @param {Array} data - 原始数据数组
 * @param {string} keyword - 过滤关键字（支持多关键字空格分隔，忽略大小写）
 * @returns {Array} 过滤后的结果数组
 */
function filterDataByKeyword(data, keyword) {
    // 空关键字直接返回全部数据
    if (!keyword || keyword.trim() === '') {
        return [...data] // 返回新数组，避免修改原数据
    }

    // 处理关键字：转小写、去除首尾空格、拆分多关键字（空格分隔）
    const keywords = keyword
        .trim()
        .toLowerCase()
        .split(/\s+/)
        .filter(k => k)

    // 无有效关键字时返回全部
    if (keywords.length === 0) {
        return [...data]
    }

    // 过滤逻辑
    return data.filter(item => {
        // 提取需要匹配的三个字段，统一转小写（忽略大小写）
        const gdName = (item.gdName || '').toLowerCase()
        const subName = (item.subName || '').toLowerCase()
        const deviceName = (item.deviceName || '').toLowerCase()
        const ip = (item.ip || '').toLowerCase()
        const lineName = (item.lineName || '').toLowerCase()

        // 多关键字需全部匹配（逻辑与）
        return keywords.every(key => {
            // 只要有一个字段包含关键字，就匹配成功
            return (
                gdName.includes(key) ||
                subName.includes(key) ||
                deviceName.includes(key) ||
                ip.includes(key) ||
                lineName.includes(key)
            )
        })
    })
}
const currentChangeEvent = () => {
    // tableRef.value.getCurrentRecord()
   // console.log('🚀 ~ currentChangeEvent ~  tableRef.value.getCurrentRecord():', tableRef.value.getCurrentRecord())
    let data = tableRef.value.getCurrentRecord()
    emit('flyTo', { coordinate: [data.lng, data.lat] }, 16)
}

const show = ref(false)
defineExpose({ open, show })
</script>
<style lang="scss" scoped>
.propInfo {
    position: absolute;
    width: 48%;
    bottom: 10px;
    left: 26%;
    background-color: #fff;
    padding: 10px;
    // z-index: 1;
}
.vxe-table--render-default.size--mini .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default.size--mini .vxe-footer--column:not(.col--ellipsis),
.vxe-table--render-default.size--mini .vxe-header--column:not(.col--ellipsis) {
    padding: 5px;
}
.top {
    width: 100%;
    height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .ico {
        height: 20px;
        cursor: pointer;
        margin-top: 8px;
    }
}
</style>