修改冀北现场问题

2025-12-14 12:47:53 +08:00
parent ff2b9db7b8
commit 0b61c4b7ba
55 changed files with 2679 additions and 951 deletions
--- a/src/views/pqs/qualityInspeection/panorama/components/details/propInfo.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/propInfo.vue
@@ -0,0 +1,140 @@
+<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>
+            <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 }"
+            @current-change="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="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 open = (data: any) => {
+    dataList.value = []
+    loading.value = true
+    show.value = true
+    setTimeout(() => {
+        dataList.value = data
+        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>