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

最终效果如下：