<template>
|
<div class="property-panel">
|
<div class="w-[370px] bg-white p-3 rounded">
|
<div class="header flex-items-center pb-1.5" style="border-bottom: 1px solid black">
|
<div class="flex-items-center">
|
<span class="ywifont ywicon-guanbi cursor-pointer mr-1.5" @click="closeClick"></span>
|
<span class="text-lg font-bold">{{ propertyTitle }}</span>
|
</div>
|
</div>
|
<div class="content rounded-lg max-h-[700px] overflow-y-auto">
|
<el-collapse v-model="activeNames" @change="handleChange" class="mt-2 h-full">
|
<el-collapse-item v-for="group in propertyGroupList" :key="group.type" :title="group.title" :name="group.type" class="">
|
<el-table
|
class="collapse-table"
|
:data="group.prop_list"
|
style="width: 100%"
|
:showHeader="false"
|
border
|
cellClassName="over-ellipsis"
|
>
|
<el-table-column prop="date" label="Date" min-width="40%" show-overflow-tooltip>
|
<template #default="scope">
|
{{ scope.row.info.title }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="Name">
|
<template #default="scope">
|
<div class="flex-items-center">
|
<el-tooltip :disabled="disableTooltip" effect="dark" :content="scope.row.info.value" placement="top-start">
|
<span class="over-ellipsis mr-2" @mouseover="textMouseOver($event)"> {{ scope.row.info.value }}</span>
|
</el-tooltip>
|
|
<!-- <span class="ywifont ywicon ywicon-tubiao-zhexiantu text-blue-400 ml-auto mr-2 cursor-pointer"></span> -->
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="PropertyPanel">
|
import type { Feature } from 'ol';
|
import { ref } from 'vue';
|
import { useTextOverflow } from '/@/hooks/useOverflow';
|
import { formatDate } from '/@/utils/formatTime';
|
import { getMapValuesByPost } from '/@/api/map';
|
const props = defineProps(['propertyMap', 'propertyConfigMap']);
|
const emit = defineEmits(['close']);
|
const activeNames = ref(['1']);
|
const { disableTooltip, textMouseOver } = useTextOverflow();
|
|
const handleChange = (val) => {};
|
const closeClick = () => {
|
emit('close');
|
};
|
0;
|
const propertyTitle = ref('无选中对象');
|
const propertyGroupList = ref<any[]>([]);
|
|
const getVpropValues = async (config) => {
|
const { otype, oname, vprops } = config;
|
const time = formatDate(new Date());
|
if (!otype || !oname || !vprops) return;
|
const res = await getMapValuesByPost({
|
otype,
|
oname,
|
vprops,
|
time,
|
});
|
const valueMap = res?.values ?? {};
|
for (const group of propertyGroupList.value) {
|
for (const item of group.prop_list ?? []) {
|
if (item.info.hasOwnProperty('value') && item.vprop !== 'ONAME') {
|
item.info.value = valueMap[item.vprop];
|
}
|
}
|
}
|
};
|
const featureClick = (feature: Feature) => {
|
const otype = feature.get('otype');
|
const oname = feature.get('oname');
|
console.log("🚀 ~ feature:", feature)
|
if (!otype) return;
|
const otypeProperty = props.propertyMap?.[otype] ?? {};
|
propertyTitle.value = otypeProperty.title;
|
const vpropsMap = otypeProperty.vprops ?? {};
|
const config = props.propertyConfigMap?.[otype] ?? {};
|
const specialList = ['ONAME', 'OTYPE'];
|
|
const vpropsList: any[] = [];
|
propertyGroupList.value = (config?.['sections']?.['WebGIS'] ?? []).map((group) => {
|
group.prop_list = (group?.prop_list ?? [])
|
?.filter((item) => !['OTYPE'].includes(item.vprop))
|
.map((item) => {
|
let info = {};
|
if (item.vprop === 'ONAME') {
|
info = {
|
title: 'ONAME',
|
unit: null,
|
value: oname,
|
};
|
} else {
|
info = vpropsMap[item.vprop] ?? {};
|
vpropsList.push(item.vprop);
|
info = {
|
...info,
|
value:null
|
}
|
}
|
return {
|
...item,
|
info
|
};
|
});
|
return group;
|
});
|
activeNames.value = [propertyGroupList.value[0]?.type];
|
getVpropValues({
|
otype,
|
oname,
|
vprops: vpropsList.join(','),
|
});
|
};
|
defineExpose({
|
featureClick,
|
});
|
</script>
|
<style scoped lang="scss">
|
.content {
|
.el-collapse {
|
--item-border-radius: 0.8rem;
|
--el-collapse-border-color: black;
|
border-top: unset;
|
border-bottom: unset;
|
.el-collapse-item {
|
:deep(.el-collapse-item__header) {
|
background-color: #e5e5e5;
|
padding-left: 4px;
|
}
|
:deep(.el-collapse-item__content) {
|
padding-bottom: 0;
|
}
|
|
&:first-child {
|
:deep(.el-collapse-item__header) {
|
border-top-left-radius: var(--item-border-radius);
|
border-top-right-radius: var(--item-border-radius);
|
}
|
}
|
&:last-child {
|
:deep(.el-collapse-item__header) {
|
border: unset;
|
}
|
margin-bottom: unset;
|
}
|
|
.el-table {
|
--el-table-border-color: var(--el-border-color-darker);
|
:deep(tbody) {
|
.el-table__row {
|
&:hover {
|
> .el-table__cell {
|
background-color: unset !important; //修改成自己想要的颜色即可
|
}
|
}
|
|
.el-table__cell {
|
border-width: 1.5px;
|
.cell {
|
padding: 0 2px;
|
|
// 溢出显示
|
|
// text-overflow: ellipsis !important;
|
// overflow: hidden !important;
|
// white-space: nowrap !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
