From 23a0802841eb14b2c007f6f4b495194d2d920750 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 10 二月 2025 15:08:34 +0800
Subject: [PATCH] 界面调整
---
/dev/null | 84 ---------------------
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/types.ts | 2
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue | 83 ++++++++++++++------
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue | 21 +++--
4 files changed, 70 insertions(+), 120 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
index 158a571..c89a8a8 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
+++ b/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);
}
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue
index f4a54d2..43942d1 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue
+++ b/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;
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl copy.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl copy.vue
deleted file mode 100644
index 26872d4..0000000
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl copy.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
- <div class="layer-control bg-white">
- <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">涓婚</span>
- </div>
- </div>
- </div>
- <div class="content rounded-lg max-h-[700px] overflow-y-auto min-h-[600px]">
- <el-collapse v-model="activeNames" class="mt-2 h-full">
- <el-collapse-item v-for="group in themeInfo" :key="group.id" :title="group.title" :name="group.id" class="">
- <pre>
- {{ group.children }}
- </pre
- >
- </el-collapse-item>
- </el-collapse>
- </div>
- </div>
-</template>
-
-<script setup lang="ts" name="ThemeControl">
-import { computed, ref } from 'vue';
-import type { OLMap } from '/@/model/map/OLMap';
-const props = defineProps(['olMap']);
-
-const emit = defineEmits(['close']);
-const activeNames = ref(['1']);
-
-const closeClick = () => {
- emit('close');
-};
-
-const themeList = ref([
- {
- id: 't1',
- group: '鍒嗙粍1',
- title: '涓婚1',
- },
- {
- id: 't2',
- group: '鍒嗙粍2',
- title: '涓婚2',
- },
-]);
-
-const themeInfo = computed(() => (props.olMap as OLMap).themeInfo.value);
-</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;
- }
-
-
- }
- }
-}
-</style>
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/types.ts b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/types.ts
index 6c2cf2f..1202e55 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/types.ts
+++ b/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]: '灞炴��',
};
--
Gitblit v1.9.3