界面调整

wujingjing

2025-02-10 23a0802841eb14b2c007f6f4b495194d2d920750

界面调整

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue

@@ -4,45 +4,79 @@
            <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">图层</span>
                    <span class="text-lg font-bold">图层及背景地图</span>
                </div>
            </div>
        </div>
        <div class="content rounded-lg flex-auto overflow-y-auto">
            <el-tree
                class="w-full"
                :data="layerInfo"
                :props="defaultProps"
                show-checkbox
                node-key="id"
                default-expand-all
                ref="checkTreeRef"
                @check="handleCheck"
                @node-click="handleNodeClick"
            >
                <template #default="{ node, data }">
                    <span>{{ node.label }}</span>
                </template>
            </el-tree>
            <div class="theme-item">
                <div class="theme-item-title h-fit flex-items-center gap-2 mb-1">
                    <div class="w-1 h-4 bg-[#1677ff]"></div>
                    <span class="font-bold">图层</span>
                </div>
                <div>
                    <el-tree
                        class="w-full"
                        :data="layerInfo"
                        :props="defaultProps"
                        show-checkbox
                        node-key="id"
                        default-expand-all
                        ref="checkTreeRef"
                        @check="handleCheck"
                        @node-click="handleNodeClick"
                    >
                        <template #default="{ node, data }">
                            <span>{{ node.label }}</span>
                        </template>
                    </el-tree>
                </div>
            </div>

            <div class="theme-item">
                <div class="theme-item-title h-fit flex-items-center gap-2 mb-1">
                    <div class="w-1 h-4 bg-[#1677ff]"></div>
                    <span class="font-bold">背景地图</span>
                </div>
                <div>
                    <el-radio-group v-model="activeSourceType" class="w-full" @change="changeSourceType">
                        <div class="flex w-full">
                            <el-radio :label="GaoDeSourceType.Vector" class="flex-1">{{ gaoDeSourceTypeMap[GaoDeSourceType.Vector] }}</el-radio>
                            <el-radio :label="GaoDeSourceType.Satellite" class="flex-1">{{
                                gaoDeSourceTypeMap[GaoDeSourceType.Satellite]
                            }}</el-radio>
                        </div>
                        <div class="flex w-full">
                            <el-radio :label="GaoDeSourceType.SatelliteRoad" class="flex-1">{{
                                gaoDeSourceTypeMap[GaoDeSourceType.SatelliteRoad]
                            }}</el-radio>
                        </div>
                    </el-radio-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="LayerControl">
import { computed, ref, watch, watchEffect } from 'vue';
import type { OLMap } from '/@/model/map/OLMap';
import { ElTree } from 'element-plus';
import { computed, ref, watch } from 'vue';
import type { OLMap } from '/@/model/map/OLMap';
import { GaoDeSourceType, gaoDeSourceTypeMap } from '/@/model/map/OLMap';
import { travelTree } from '/@/utils/util';

const props = defineProps(['olMap']);
const emit = defineEmits(['close']);

const activeSourceType = ref(props.olMap.activeSourceType);
const defaultProps = {
    children: 'children',
    label: 'title',
};
const closeClick = () => {
    emit('close');
};

const changeSourceType = (val: GaoDeSourceType) => {
    props.olMap.applySourceType(val);
};
const checkTreeRef = ref<InstanceType<typeof ElTree>>();

@@ -64,9 +98,7 @@

const handleNodeClick = () => {};
const layerInfo = computed(() => {
	
	
    const info =(props.olMap as OLMap).layerInfo.value
    const info = (props.olMap as OLMap).layerInfo.value;
    return info;
    const result = info.concat([
        {
@@ -76,9 +108,8 @@

            type: 'equip',
        },
    ])
    ]);
    return result;

});

watch(
@@ -90,7 +121,7 @@
        }
        const keys = [];
        travelTree(val, (item) => {
            if (item.type === 'layer'|| item.type === 'equip') {
            if (item.type === 'layer' || item.type === 'equip') {
                if (item.isVisible) {
                    keys.push(item.id);
                }

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue

@@ -1,10 +1,10 @@
<template>
    <div class="property-panel bg-white flex-col" style="display: flex">
        <div class=" bg-white rounded flex-0">
        <div class="bg-white rounded flex-0">
            <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 class="flex-items-center w-full">
                    <span class="ywifont ywicon-guanbi cursor-pointer mr-1.5 flex-0" @click="closeClick"></span>
                    <span class="text-lg font-bold over-ellipsis flex-auto">{{ propertyTitle }}</span>
                </div>
            </div>
            <div class="content rounded-lg max-h-[700px] overflow-y-auto min-h-[600px]">
@@ -89,14 +89,14 @@
    const otype = feature.get('otype');
    const oname = feature.get('oname');
    if (!otype) return;
	

    const otypeProperty = props.propertyMap?.[otype] ?? {};
    console.log("🚀 ~ otypeProperty:", otypeProperty)
    propertyTitle.value = otypeProperty.title;
    console.log('🚀 ~ otypeProperty:', otypeProperty);
    propertyTitle.value = `${otypeProperty.title}: ${oname}`;
    const vpropsMap = otypeProperty.vprops ?? {};
    console.log("🚀 ~ vpropsMap:", vpropsMap)
    console.log('🚀 ~ vpropsMap:', vpropsMap);
    const config = props.propertyConfigMap?.[otype] ?? {};
    console.log("🚀 ~ config:", config)
    console.log('🚀 ~ config:', config);
    const specialList = ['ONAME', 'OTYPE'];

    const vpropsList: any[] = [];
@@ -145,6 +145,9 @@
        border-top: unset;
        border-bottom: unset;
        .el-collapse-item {
            :deep(.el-collapse-item__wrap) {
                border: none;
            }
            :deep(.el-collapse-item__header) {
                background-color: #e5e5e5;
                padding-left: 4px;

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl copy.vue

ÎļþÒÑɾ³ý

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/types.ts

@@ -5,7 +5,7 @@
}

export const mapPanelToolMap = {
    [MapPanelTool.Layer]: '图层',
    [MapPanelTool.Layer]: '图层及背景',
    [MapPanelTool.Theme]: '主题',
    [MapPanelTool.Property]: '属性',
};