From b8dc9eeb53ce361f3142ea8de2c46244ecd9d5d6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 16 七月 2024 16:16:51 +0800
Subject: [PATCH] map 类型
---
src/components/chat/chatComponents/mapCom/MapCom.vue | 19 ++++++
src/model/map/GaoDeMap.ts | 67 ++++++++++++++++++++++
src/components/chat/Chat.vue | 42 ++++++++++---
src/components/chat/chatComponents/htmlCom/HTMLCom.vue | 2
package-lock.json | 11 +++
package.json | 1
src/components/chat/chatComponents/common.ts | 2
src/components/chat/model/types.ts | 3
src/components/chat/chatComponents/summaryCom/SummaryCom.vue | 9 ++-
src/main.ts | 2
10 files changed, 141 insertions(+), 17 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index d524cf5..56b27f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"license": "MIT",
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
+ "@amap/amap-jsapi-types": "^0.0.15",
"@element-plus/icons-vue": "^2.1.0",
"@icon-park/vue-next": "^1.4.2",
"@iframe-resizer/vue": "^5.1.5",
@@ -100,6 +101,11 @@
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+ },
+ "node_modules/@amap/amap-jsapi-types": {
+ "version": "0.0.15",
+ "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-types/-/amap-jsapi-types-0.0.15.tgz",
+ "integrity": "sha512-oqyRqHpVDZh5bUe2mAJh41ZsziSj0eUzwcfIbiaBNB0eiTJnZNhKsTdk77VOklOjwuwNfsblpKW9LjmWNpeQ7A=="
},
"node_modules/@babel/parser": {
"version": "7.23.9",
@@ -5714,6 +5720,11 @@
"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
},
+ "@amap/amap-jsapi-types": {
+ "version": "0.0.15",
+ "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-types/-/amap-jsapi-types-0.0.15.tgz",
+ "integrity": "sha512-oqyRqHpVDZh5bUe2mAJh41ZsziSj0eUzwcfIbiaBNB0eiTJnZNhKsTdk77VOklOjwuwNfsblpKW9LjmWNpeQ7A=="
+ },
"@babel/parser": {
"version": "7.23.9",
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.9.tgz",
diff --git a/package.json b/package.json
index 4b27459..7cc159d 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
+ "@amap/amap-jsapi-types": "^0.0.15",
"@element-plus/icons-vue": "^2.1.0",
"@icon-park/vue-next": "^1.4.2",
"@iframe-resizer/vue": "^5.1.5",
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index e419ab1..e128e77 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -1,14 +1,28 @@
<template>
<div class="flex flex-col h-full">
<div class="h-full flex flex-col items-center overflow-y-auto">
- <div ref="chatListDom" class="h-full w-[100ch]">
- <div class="group flex px-4 py-4 hover:bg-slate-100 rounded-lg" v-for="(item, index) of computedMessageList" :key="index">
- <img class="rounded-full size-12 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" />
+ <div ref="chatListDom" class="h-full" :style="{width:chatWidth}">
+ <div
+ class="group flex px-4 py-6 hover:bg-slate-100 rounded-lg"
+ :class="{ 'flex-row-reverse': item.role === RoleEnum.user }"
+ v-for="(item, index) of computedMessageList"
+ :key="index"
+ >
+ <img
+ class="rounded-full size-12 mr-4"
+ :class="{ 'mr-4': item.role === RoleEnum.assistant, 'ml-4': item.role === RoleEnum.user }"
+ :src="roleImageMap[item.role]"
+ alt=""
+ srcset=""
+ />
- <div class="flex">
- <div class="relative" v-if="item.content?.values">
- <div class="text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch] bg-white">
- <component class="max-w-[100ch]" :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :error="item.content.error"/>
+ <div class="flex" :class="{ 'w-full': item.role === RoleEnum.assistant }">
+ <div class="relative w-full" v-if="item.content?.values">
+ <div
+ class="text-sm rounded-[6px] p-4 leading-relaxed "
+ :style="{backgroundColor:item.role ===RoleEnum.user? 'rgb(197 224 255)':'white'}"
+ >
+ <component :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :error="item.content.error" />
</div>
<div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 mr-2 mt-2 space-x-2">
@@ -42,7 +56,7 @@
</div>
<div class="sticky bottom-0 w-full p-6 pb-8 bg-[rgb(247,248,250)] flex justify-center">
- <PlayBar :isTalking="isTalking" v-model="messageContent.values" @sendClick="sendChatMessage" />
+ <PlayBar :isTalking="isTalking" v-model="messageContent.values" @sendClick="sendChatMessage" :style="{width:chatWidth}"></PlayBar>
</div>
</div>
</template>
@@ -59,6 +73,8 @@
import router from '/@/router';
import { activeChatRoom, activeLLMId, activeRoomId, activeSampleId, activeSectionAId, roomConfig } from '/@/stores/chatRoom';
import { v4 as uuidv4 } from 'uuid';
+
+const chatWidth = '75%';
let isTalking = ref(false);
let messageContent = ref<ChatContent>({
@@ -103,7 +119,13 @@
content = {
type: AnswerType.Summary,
values: res.summary,
- error: res.error ?? res.json_msg ,
+ error: res.error ?? res.json_msg,
+ };
+ break;
+ case AnswerType.Url:
+ content = {
+ type: AnswerType.Url,
+ values: res.url,
};
break;
default:
@@ -172,7 +194,7 @@
}
clearQueryProcess();
queryProcess();
- const res = await QuestionAi(params).finally(()=>{
+ const res = await QuestionAi(params).finally(() => {
clearQueryProcess();
});
questionRes = res;
diff --git a/src/components/chat/chatComponents/common.ts b/src/components/chat/chatComponents/common.ts
index 5c367d3..62f6760 100644
--- a/src/components/chat/chatComponents/common.ts
+++ b/src/components/chat/chatComponents/common.ts
@@ -36,7 +36,7 @@
'path://M445.7 609.8c0 19.4 10.3 37.3 27.1 46.9 16.8 9.7 37.4 9.7 54.2 0 16.8-9.7 27.1-27.6 27.1-46.9 0-29.9-24.3-54.2-54.2-54.2s-54.2 24.3-54.2 54.2z m0 0M179.2 613.8c-42.2 0-76.5 34.3-76.5 76.5s34.3 76.5 76.5 76.5 76.5-34.3 76.5-76.5-34.3-76.5-76.5-76.5z m0 0M144.9 401.1c0 29 23.5 52.5 52.5 52.5s52.5-23.5 52.5-52.5-23.5-52.5-52.5-52.5-52.5 23.5-52.5 52.5z m0 0M598.7 404c0 42.2 34.3 76.5 76.5 76.5 42.3 0 76.5-34.3 76.5-76.5 0-42.3-34.3-76.5-76.5-76.5-42.3 0-76.5 34.3-76.5 76.5z m0 0M849.3 169.2c-42.2 0-76.5 34.3-76.5 76.5s34.3 76.5 76.5 76.5 76.5-34.3 76.5-76.5-34.3-76.5-76.5-76.5z m0 0M261.6 583.1c0 13.2 7.1 25.5 18.5 32.1 11.5 6.6 25.6 6.6 37.1 0s18.5-18.9 18.5-32.1c0-20.5-16.6-37.1-37.1-37.1-20.4 0.1-37 16.7-37 37.1z m0 0M276.8 425.1c0 42.3 34.3 76.5 76.5 76.5 42.3 0 76.5-34.3 76.5-76.5s-34.3-76.5-76.5-76.5-76.5 34.3-76.5 76.5z m0 0M445.7 421.4c0 18.5 9.9 35.5 25.8 44.8 16 9.2 35.7 9.2 51.7 0s25.8-26.3 25.8-44.8c0-28.5-23.1-51.7-51.7-51.7-28.5 0-51.6 23.2-51.6 51.7z m0 0M398.2 208.8c0 42.3 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-42.3-34.3-76.5-76.5-76.5s-76.5 34.3-76.5 76.5z m0 0M693.7 599.2c0 42.3 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5-34.3-76.5-76.5-76.5c-42.3 0-76.5 34.3-76.5 76.5z m0 0M62.1 828.9H959v60.7H62.1z',
bar: 'path://M580.8 228.8h-136v500.8h136V228.8z m-40 460.8h-56V268.8h56v420.8zM788.8 420.8h-136v308.8h136V420.8z m-40 268.8h-56V460.8h56v228.8zM372.8 326.4h-136v401.6h136V326.4z m-40 363.2h-56V366.4h56v323.2zM208 788.8h608v40H208z',
- line:'path://M1007.983701 110.874633c0-52.132765-42.296642-94.429407-94.429407-94.429407s-94.4284 42.296642-94.4284 94.429407c0 31.415385 15.491719 59.048963 39.099826 76.170806L720.086025 646.403197c-12.542593 0.613185-24.346143 3.627757-35.104561 8.606734L371.263584 335.728082c4.61147-11.065513 7.193087-23.207372 7.193087-35.994635 0-52.131759-42.295635-94.429407-94.4284-94.429407-52.132765 0-94.429407 42.297648-94.429407 94.429407 0 30.523298 14.692263 57.35742 37.1324 74.604115L90.189473 835.321416c-49.796824 2.643037-89.449422 43.528045-89.449422 93.937047 0 52.132765 42.295635 94.430414 94.429407 94.430414 52.132765 0 94.4284-42.297648 94.4284-94.430414 0-31.413372-15.491719-58.955324-39.0374-76.168793l136.049431-459.172494c15.368881-0.461147 29.569791-4.673896 42.235222-11.527667l311.2591 316.82307c-6.147955 12.480167-9.836124 26.311556-9.836124 41.191097 0 52.129745 42.295635 94.427393 94.4284 94.427393 52.131759 0 94.4284-42.297648 94.4284-94.427393 0-31.294561-15.369887-58.713675-38.791723-75.924123l138.201115-459.66586C968.331103 202.16965 1007.983701 161.286655 1007.983701 110.874633z'
+ line:'path://M664.1 783c-3.8 0-7.6-0.2-11.3-0.5-36.3-3.1-68.9-20.6-96.9-52.1-28.4-32-52.5-79.4-71.4-140.8-32.4-105-66.1-182.6-100.3-230.6-25.5-35.8-50.2-54-73.4-54h-0.4c-38.8 0.4-84.8 51-129.3 142.7-37 76.2-59.4 153-59.7 153.8L64 582.6c1-3.4 24.3-83.1 63.7-164.3 56.8-117 118.1-176.6 182.1-177.3h1c43 0 83.8 26.7 121.2 79.3 38.2 53.7 75.1 137.5 109.5 249.3 29.3 94.9 68.3 145.1 116 149.1 21.3 1.8 45.6-5.2 72.2-20.9 24.5-14.4 50.3-35.8 76.8-63.5 49.6-51.9 87.7-111.9 100.1-137.6L960 526c-14.6 30.4-56.4 96.4-111.4 154-30.4 31.8-60.6 56.6-89.9 73.9-32.8 19.3-64.6 29.1-94.6 29.1z'
};
export const SCATTER_SYMBOL_SIZE = 4
\ No newline at end of file
diff --git a/src/components/chat/chatComponents/htmlCom/HTMLCom.vue b/src/components/chat/chatComponents/htmlCom/HTMLCom.vue
index 06a3ea5..366546e 100644
--- a/src/components/chat/chatComponents/htmlCom/HTMLCom.vue
+++ b/src/components/chat/chatComponents/htmlCom/HTMLCom.vue
@@ -16,8 +16,6 @@
<script setup lang="ts">
import IframeResizer from '@iframe-resizer/vue/iframe-resizer.vue';
-import { ref } from 'vue';
-
defineProps(['data']);
</script>
<style scoped lang="scss">
diff --git a/src/components/chat/chatComponents/mapCom/MapCom.vue b/src/components/chat/chatComponents/mapCom/MapCom.vue
new file mode 100644
index 0000000..95c7c7d
--- /dev/null
+++ b/src/components/chat/chatComponents/mapCom/MapCom.vue
@@ -0,0 +1,19 @@
+<template>
+ <div ref="containerRef" class="h-[70vh]"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { GaoDeMap } from '/@/model/map/GaoDeMap';
+let gaoDeMap = new GaoDeMap();
+const containerRef = ref<HTMLDivElement>(null);
+
+onMounted(async () => {
+ await gaoDeMap.init({
+ container: containerRef.value,
+ });
+ gaoDeMap.zoomToRect([116.319665, 39.855919], [116.468324, 39.9756]);
+ gaoDeMap.applyBasicPlugins();
+});
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
index 05c781f..3c9ea77 100644
--- a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
+++ b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
@@ -1,5 +1,5 @@
<template>
- <div style="width: calc(100ch - 28px)">
+ <div class="w-full">
<template v-if="data && data.length > 0">
<template v-if="summaryList && summaryList.length > 0">
<div class="w-full" v-for="(item, idx) in summaryList" :key="idx">
@@ -19,7 +19,7 @@
:class="{ 'mt-10': summaryList && summaryList.length > 0 }"
v-if="recordSetList && recordSetList.length > 0"
>
- <div class="min-h-[48rem] flex-auto w-full">
+ <div class="h-[20rem] flex-auto w-full">
<div ref="chartRefList" v-for="(item, index) in recordSetList" :key="index"></div>
</div>
</div>
@@ -29,6 +29,7 @@
v-for="(item, index) in urlList"
:key="index"
></HTMLCom>
+ <MapCom />
</div>
</template>
<div v-else class="text-red-500">{{ error }}</div>
@@ -45,6 +46,8 @@
import { PATH_ICON, SCATTER_SYMBOL_SIZE, timeDataOptionToContent } from '../common';
import { AnswerType } from '../../model/types';
import HTMLCom from '../htmlCom/HTMLCom.vue';
+import MapCom from '../mapCom/MapCom.vue';
+
const props = defineProps(['data', 'error']);
const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line);
@@ -149,7 +152,7 @@
grid: {
// bottom: 120,
// right: '15%',
- bottom: '5%',
+ bottom: '8%',
},
toolbox: {
show: true,
diff --git a/src/components/chat/model/types.ts b/src/components/chat/model/types.ts
index 67f1e76..6c62a81 100644
--- a/src/components/chat/model/types.ts
+++ b/src/components/chat/model/types.ts
@@ -11,6 +11,7 @@
Text = 'text',
Summary = 'summary',
Url = 'url',
+ Map = 'map',
}
export const answerTypeMapCom = {
@@ -36,7 +37,7 @@
export type ChatContent = {
type: AnswerType;
values: any;
- error?:string;
+ error?: string;
};
export interface ChatMessage {
diff --git a/src/main.ts b/src/main.ts
index 110afce..a681408 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,6 +11,8 @@
import VueGridLayout from 'vue-grid-layout';
import { initBackEndControlRoutes } from './router/backEnd';
import '/@/theme/index.scss';
+import "@amap/amap-jsapi-types";
+
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
diff --git a/src/model/map/GaoDeMap.ts b/src/model/map/GaoDeMap.ts
new file mode 100644
index 0000000..5374dde
--- /dev/null
+++ b/src/model/map/GaoDeMap.ts
@@ -0,0 +1,67 @@
+import AMapLoader from '@amap/amap-jsapi-loader';
+import _ from 'lodash';
+
+export type AMapInstance = typeof AMap;
+export type GaoDePosition = [number, number];
+export type GaoDeMapOption = {
+ key?: string;
+ version?: string;
+ plugins?: string[];
+ container: string | HTMLDivElement;
+ aMapOption?: Partial<AMap.MapOptions>;
+};
+
+export class GaoDeMap {
+ map: AMap.Map;
+ private viewBound: AMap.Bounds;
+ async init(option: GaoDeMapOption) {
+ const gaoDeOption = _.defaultsDeep(option, {
+ key: '3627ed9deaac2622e26a7169f0c36b1b', // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
+ version: '2.0', // 鎸囧畾瑕佸姞杞界殑 JSAPI 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
+ plugins: [
+ 'AMap.ToolBar',
+ 'AMap.Scale',
+ // 'AMap.HawkEye',
+ // 'AMap.MapType',
+ // 'AMap.MouseTool',
+ // 'AMap.MarkerCluster',
+ // 'AMap.InfoWindow',
+ ], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
+
+ aMapOption: {
+ viewMode: '2D', //榛樿浣跨敤 2D 妯″紡
+ zoom: 5, //鍦板浘绾у埆
+ center: [116.397428, 39.90923], //鍦板浘涓績鐐�
+ } as Partial<AMap.MapOptions>,
+ } as Partial<GaoDeMapOption>) as GaoDeMapOption;
+ try {
+ const AMap = await AMapLoader.load({
+ key: gaoDeOption.key,
+ version: gaoDeOption.version,
+ plugins: gaoDeOption.plugins,
+ });
+ this.map = new AMap.Map(gaoDeOption.container, gaoDeOption.aMapOption);
+ } catch (error) {
+ // console.error(error);
+ }
+ }
+ constructor() {}
+
+ zoomToRect(southWest: GaoDePosition, northEast: GaoDePosition) {
+ if (!this.viewBound) {
+ this.viewBound = new AMap.Bounds(southWest, northEast);
+ } else {
+ this.viewBound.northEast = new AMap.LngLat(northEast[0], northEast[1]);
+ this.viewBound.southWest = new AMap.LngLat(southWest[0], southWest[1]);
+ }
+ this.map.setBounds(this.viewBound);
+ }
+
+
+ applyBasicPlugins(){
+ // const scale = new AMap.Scale();
+ // this.map.addControl(scale)
+ // const toolbar = new AMap.ToolBar();
+ // this.map.addControl(toolbar)
+ }
+}
--
Gitblit v1.9.3