266 lines
7.6 KiB
Vue
266 lines
7.6 KiB
Vue
<template>
|
||
<Dialog ref="baseDialog" :title="title" width="900px" left="calc(50% - 450px)" top="calc(50% - 360px)"
|
||
:closeCallback="closeCallback">
|
||
<template #content>
|
||
<span class="custom-divider"></span>
|
||
<div class="div-item">
|
||
<div class="row">
|
||
<div class="col">
|
||
<input type="text" placeholder="输入关键字搜索" v-model="keyword" @input="search">
|
||
<button class="btn" style="margin-left: 10px;" @click="exportExcel">导出</button>
|
||
</div>
|
||
<div class="col">
|
||
<span class="label">名称字段选择</span>
|
||
<el-select v-model="entityOptions.field" @change="changeFieId">
|
||
<el-option v-for="item in keyData" :label="item.label" :value="item.key"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="col"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col table-box">
|
||
<div class="table">
|
||
<div class="table-head">
|
||
<div class="tr">
|
||
<div class="th" v-for="field in keyData" :title="field.label">
|
||
<p>{{ field.label }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-body">
|
||
<div class="tr" v-for="item in tableData">
|
||
<div class="td" v-for="td in keyData" :title="item.properties[td.key]">
|
||
<p>{{ item.properties[td.key] }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<Pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<button @click="close">关闭</button>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { inject } from 'vue'
|
||
import { TreeApi } from '@/api/tree'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||
import { useTreeNode } from '../tree/hooks/treeNode'
|
||
const FileSaver = require('file-saver')
|
||
const XLSX = require('xlsx')
|
||
|
||
const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
||
|
||
const baseDialog: any = ref(null)
|
||
const eventBus: any = inject('bus')
|
||
const keyData: any = ref([])
|
||
const keyword: any = ref('')
|
||
const entityOptions: any = ref({});
|
||
let originalOptions: any
|
||
let that: any
|
||
const tableData: any = ref([])
|
||
const total: any = ref(0)
|
||
const pageSize: any = ref(20)
|
||
const pageNum: any = ref(1)
|
||
const maxPageNum: any = ref(0)
|
||
const filterData: any = ref([])
|
||
const title = ref('')
|
||
const closeCallback = () => {
|
||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||
entityOptions.value.reset()
|
||
eventBus.emit("destroyComponent")
|
||
}
|
||
const getKeys = () => {
|
||
for (let key in that.geojson.features[0].properties) {
|
||
let label = key
|
||
for (let index = 0; index < that.options.headTables.length; index++) {
|
||
if (that.options.headTables[index].key === key) {
|
||
label = that.options.headTables[index].label
|
||
break
|
||
}
|
||
}
|
||
keyData.value.push({
|
||
label: label,
|
||
key: key
|
||
})
|
||
}
|
||
}
|
||
let node
|
||
let parentNode
|
||
let features
|
||
const open = async (id: any) => {
|
||
// that = window.earth.entityMap.get(id)
|
||
node = window.treeObj.getNodeByParam("id", id, null);
|
||
that = getThat(node)
|
||
if (that.options.id === id) {
|
||
features = that.geojson.features
|
||
}
|
||
else {
|
||
features = [node.params]
|
||
}
|
||
console.log(features, that, id)
|
||
|
||
let arr = JSON.parse(JSON.stringify(features))
|
||
filterData.value = JSON.parse(JSON.stringify(arr))
|
||
total.value = filterData.value.length
|
||
let spliceData = arrSplice(arr, pageSize.value)
|
||
maxPageNum.value = spliceData.length
|
||
tableData.value = spliceData[pageNum.value - 1]
|
||
title.value = node.sourceName
|
||
getKeys()
|
||
originalOptions = structuredClone(that.options)
|
||
entityOptions.value = that
|
||
baseDialog.value?.open()
|
||
await nextTick()
|
||
}
|
||
const getThat = (n) => {
|
||
if (n) {
|
||
let t = window.earth.entityMap.get(n.id)
|
||
if (t) {
|
||
parentNode = n
|
||
return t
|
||
}
|
||
else {
|
||
if (n.parentId) {
|
||
return getThat(window.treeObj.getNodeByParam("id", n.parentId, null))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const search = () => {
|
||
let val = keyword.value
|
||
|
||
let fuzzySearch = (list, keyWord, attribute: any = []) => {
|
||
const reg = new RegExp(keyWord) // 创建正则表达式
|
||
const arr: any = []
|
||
for (let i = 0; i < list.length; i++) {
|
||
let isFind = false
|
||
for (let j = 0; j < attribute.length; j++) {
|
||
if (list[i].properties[attribute[j].key]) {
|
||
isFind = reg.test(list[i].properties[attribute[j].key])
|
||
if (isFind) {
|
||
arr.push(list[i])
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
console.log(arr)
|
||
return arr
|
||
}
|
||
let arr = fuzzySearch(features, val, keyData.value)
|
||
filterData.value = JSON.parse(JSON.stringify(arr))
|
||
total.value = filterData.value.length
|
||
let spliceData = arrSplice(arr, pageSize.value)
|
||
maxPageNum.value = spliceData.length
|
||
tableData.value = spliceData[pageNum.value - 1]
|
||
}
|
||
const arrSplice = (arr, chunkSize) => {
|
||
//定义一个空数组来接收返回值
|
||
const resSplice: any = []
|
||
while (arr.length > 0) {
|
||
//注意：splice方法的返回值为删除的值，在这边即为原数组中切割掉的index为0-chunkSize的值
|
||
const chunk = arr.splice(0, chunkSize)
|
||
//将返回值添加到resSplice数组
|
||
resSplice.push(chunk)
|
||
}
|
||
//return出去
|
||
return resSplice
|
||
}
|
||
|
||
const getTableList = ({ page, limit }) => {
|
||
pageNum.value = page
|
||
pageSize.value = limit
|
||
let arr = JSON.parse(JSON.stringify(filterData.value))
|
||
let spliceData = arrSplice(arr, pageSize.value)
|
||
maxPageNum.value = spliceData.length
|
||
tableData.value = spliceData[pageNum.value - 1]
|
||
}
|
||
const changeFieId = () => {
|
||
updateNode(parentNode.children, entityOptions.value.field)
|
||
}
|
||
const updateNode = (children, field) => {
|
||
for (let i = 0; i < children.length; i++) {
|
||
if (children[i].children) {
|
||
updateNode(children[i].children, field)
|
||
}
|
||
else {
|
||
if (children[i].params) {
|
||
cusUpdateNode({ "id": children[i].id, "sourceName": children[i].params.properties[field], "params": children[i].params })
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const exportExcel = () => {
|
||
let prepareData: any = [[]]
|
||
for (let m = 0; m < keyData.value.length; m++) {
|
||
prepareData[0].push(keyData.value[m].label)
|
||
}
|
||
for (let i = 0; i < tableData.value.length; i++) {
|
||
let array: any = []
|
||
for (let m = 0; m < keyData.value.length; m++) {
|
||
array.push(tableData.value[i].properties[keyData.value[m].key])
|
||
}
|
||
prepareData.push(array)
|
||
}
|
||
const worksheet = XLSX.utils.aoa_to_sheet(prepareData)
|
||
const workbook = XLSX.utils.book_new()
|
||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
||
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||
const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
|
||
FileSaver.saveAs(data, title.value + '.xlsx')
|
||
}
|
||
const close = () => {
|
||
baseDialog.value?.close()
|
||
}
|
||
defineExpose({
|
||
open,
|
||
close
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.table-box {
|
||
width: 100%;
|
||
overflow: auto;
|
||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
|
||
|
||
.table {
|
||
flex: 0 0 auto;
|
||
min-width: 100%;
|
||
|
||
.table-body {
|
||
height: 420px;
|
||
}
|
||
|
||
.tr {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.tr:last-child {
|
||
border-bottom: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||
}
|
||
|
||
.th,
|
||
.td {
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
min-width: 0px;
|
||
|
||
p {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |