TripGenie:畅游济南旅行规划助手:个人工作纪实(二十二)

这周,我进行了历史记录的设计与制作,我对于每一个用户与智能体交互得出的历史行程的数据进行了存储与可视化展示。

首先,我设置了一个csv文件存储每一个得出的行程规划,注意这里的地图我设置了一个全路径进行存储,这样可以保证url路径可以被可视化到前端页面。csv文件中的标题为data、itinerary、mappath灯,存储相应的行程规划信息。

在js文件中,我从后端获取存入的csv文件,并且对文件内容进行了切分。

这里我对行程规划得到的行程规划、总体理由、行程设计进行展示,同时我设置了一个iframe框架来展示地图。

复制代码
 try {
            // 尝试解析 Itinerary 字段中的 JSON 数据
            const itineraryInfo = JSON.parse(record.fullContent.replace(/'/g, '"'));

            // 提取行程规划
            const itineraryParts = itineraryInfo.itinerary || '行程规划信息暂无';

            // 提取总体理由
            const reasonParts = itineraryInfo['总体理由'] || '总体理由暂无';

            // 提取景点详细描述并格式化
            let poisHtml = '<div><strong>详细景点描述:</strong></div>';
            if (itineraryInfo.pois && typeof itineraryInfo.pois === 'object') {
                for (const key in itineraryInfo.pois) {
                    poisHtml += `<div>${itineraryInfo.pois[key]}</div>`;
                }
            } else {
                poisHtml += '<div>景点描述暂无</div>';
            }

            // 创建历史记录卡片
            const historyCard = document.createElement('div');
            historyCard.className = 'history-card';
            historyCard.innerHTML = `
                <div class="history-card-header">
                    <h3>${record.title}</h3>
                </div>
                <div class="history-card-body">
                    <div class="history-date">${record.date}</div>
                    <div class="history-summary">${itineraryParts}</div>
                    <button class="history-toggle" onclick="toggleHistoryDetails(${record.id})">
                        <i class="fas fa-chevron-down"></i> 查看详情
                    </button>
                    <div class="history-details" id="details-${record.id}" style="display: none;">
                        <div class="history-full-content">
                            <div><strong>行程规划:</strong>${itineraryParts}</div>
                            ${poisHtml}
                            <div><strong>总体理由:</strong>${reasonParts}</div>
                        </div>
                        <iframe class="history-map" src="${record.mapUrl}" frameborder="0"></iframe>
                    </div>
                </div>
            `;
            historyCardsContainer.appendChild(historyCard);
        } catch (e) {
            console.error('解析历史记录失败:', e);
            // 如果解析失败,仍然显示基本的历史记录卡片
            const historyCard = document.createElement('div');
            historyCard.className = 'history-card';
            historyCard.innerHTML = `
                <div class="history-card-header">
                    <h3>${record.title}</h3>
                </div>
                <div class="history-card-body">
                    <div class="history-date">${record.date}</div>
                    <div class="history-summary">行程规划信息暂无</div>
                    <button class="history-toggle" onclick="toggleHistoryDetails(${record.id})">
                        <i class="fas fa-chevron-down"></i> 查看详情
                    </button>
                    <div class="history-details" id="details-${record.id}" style="display: none;">
                        <div class="history-full-content">
                            <div>行程规划:暂无详细信息</div>
                            <div>详细景点描述:暂无详细信息</div>
                            <div>总体理由:暂无详细信息</div>
                        </div>
                        <iframe class="history-map" src="${record.mapUrl}" frameborder="0"></iframe>
                    </div>
                </div>
            `;
            historyCardsContainer.appendChild(historyCard);
        }

最终效果如下:

相关推荐
深圳多奥智能一卡(码、脸)通系统12 分钟前
智能二维码QR\刷IC卡\人脸AI识别梯控系统功能设计需基于模块化架构,整合物联网、生物识别、权限控制等技术,以下是多奥分层次的系统设计框架
人工智能·门禁·电梯门禁·二维码梯控·梯控·电梯
批量小王子14 分钟前
2025-08-19利用opencv检测图片中文字及图片的坐标
人工智能·opencv·计算机视觉
WSSWWWSSW29 分钟前
Seaborn数据可视化实战:Seaborn时间序列可视化入门
python·信息可视化·数据分析·matplotlib·seaborn
云天徽上1 小时前
【数据可视化-96】使用 Pyecharts 绘制主题河流图(ThemeRiver):步骤与数据组织形式
开发语言·python·信息可视化·数据分析·pyecharts
没有梦想的咸鱼185-1037-16631 小时前
SWMM排水管网水力、水质建模及在海绵与水环境中的应用
数据仓库·人工智能·数据挖掘·数据分析
codeyanwu1 小时前
nanoGPT 部署
python·深度学习·机器学习
即兴小索奇1 小时前
【无标题】
人工智能·ai·商业·ai商业洞察·即兴小索奇
国际学术会议-杨老师1 小时前
2025年计算机视觉与图像国际会议(ICCVI 2025)
人工智能·计算机视觉
欧阳小猜2 小时前
深度学习②【优化算法(重点!)、数据获取与模型训练全解析】
人工智能·深度学习·算法
fsnine2 小时前
深度学习——神经网络
人工智能·深度学习·神经网络