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);
        }

最终效果如下:

相关推荐
Hao想睡觉4 分钟前
CNN卷积神经网络之VggNet和GoogleNet经典网络模型(四)
网络·人工智能·cnn
PineappleCoder6 分钟前
JS 作用域链拆解:变量查找的 “俄罗斯套娃” 规则
前端·javascript·面试
我不是小upper11 分钟前
anaconda、conda、pip、pytorch、torch、tensorflow到底是什么?它们之间有何联系与区别?
人工智能·pytorch·深度学习·conda·tensorflow·pip
知识分享小能手12 分钟前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
凹凸曼说我是怪兽y12 分钟前
python后端之DRF框架(上篇)
开发语言·后端·python
533_18 分钟前
[echarts] 更新数据
前端·javascript·echarts
_iop9919 分钟前
pandas实战1:淘宝用户行为分析
python
l1t21 分钟前
修改DeepSeek翻译得不对的V语言字符串文本排序程序
c语言·开发语言·python·v语言
讨厌吃蛋黄酥25 分钟前
利用Mock实现前后端联调的解决方案
前端·javascript·后端