CRBC-MaaS-Platform-Project
/
LQAgentPlatform


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>施工方案审查结果 - 高级分析工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: #0f172a;
            min-height: 100vh;
            color: #e2e8f0;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 28px;
            color: #f8fafc;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header .subtitle {
            color: #94a3b8;
            font-size: 14px;
        }

        .controls {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
        }

        .btn-secondary {
            background: #334155;
            color: #e2e8f0;
            border: 1px solid #475569;
        }

        .btn-secondary:hover {
            background: #475569;
        }

        .btn-danger {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        input[type="file"] {
            display: none;
        }

        /* Dashboard */
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 24px;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }

        .stat-card.total::before { background: #3b82f6; }
        .stat-card.high::before { background: #ef4444; }
        .stat-card.medium::before { background: #f59e0b; }
        .stat-card.low::before { background: #10b981; }

        .stat-icon {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .stat-value {
            font-size: 36px;
            font-weight: bold;
            color: #f8fafc;
            margin-bottom: 4px;
        }

        .stat-label {
            color: #94a3b8;
            font-size: 14px;
        }

        .stat-change {
            font-size: 12px;
            margin-top: 8px;
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
        }

        .stat-change.positive {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
        }

        .stat-change.negative {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        /* Charts Section */
        .charts-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .chart-card {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 24px;
        }

        .chart-card h3 {
            font-size: 16px;
            color: #f8fafc;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Progress bars */
        .progress-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .progress-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .progress-label {
            font-size: 14px;
            color: #e2e8f0;
        }

        .progress-value {
            font-size: 14px;
            color: #94a3b8;
        }

        .progress-bar {
            height: 8px;
            background: #334155;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .progress-fill.high { background: linear-gradient(90deg, #ef4444, #f87171); }
        .progress-fill.medium { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .progress-fill.low { background: linear-gradient(90deg, #10b981, #34d399); }
        .progress-fill.total { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

        /* Filters */
        .filters {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .filter-group label {
            font-size: 12px;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .filter-group select,
        .filter-group input {
            padding: 10px 16px;
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 8px;
            font-size: 14px;
            color: #e2e8f0;
            min-width: 150px;
        }

        .filter-group select:focus,
        .filter-group input:focus {
            outline: none;
            border-color: #3b82f6;
        }

        /* View Toggle */
        .view-toggle {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .view-btn {
            padding: 10px 20px;
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 8px;
            color: #94a3b8;
            cursor: pointer;
            transition: all 0.3s;
        }

        .view-btn.active {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        /* Cards View */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
            gap: 20px;
        }

        .review-card {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }

        .review-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }

        .review-card.high::before { background: #ef4444; }
        .review-card.medium::before { background: #f59e0b; }
        .review-card.low::before { background: #10b981; }
        .review-card.none::before { background: #64748b; }

        .review-card:hover {
            transform: translateY(-4px);
            border-color: #475569;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }

        .card-header {
            padding: 20px;
            border-bottom: 1px solid #334155;
        }

        .card-header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .chapter-tag {
            padding: 6px 12px;
            background: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
        }

        .risk-tag {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
        }

        .risk-tag.high {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }

        .risk-tag.medium {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .risk-tag.low {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }

        .risk-tag.none {
            background: rgba(100, 116, 139, 0.2);
            color: #94a3b8;
        }

        .check-item-title {
            font-size: 16px;
            font-weight: 600;
            color: #f8fafc;
        }

        .check-item-code {
            font-size: 12px;
            color: #64748b;
            font-family: monospace;
            margin-top: 4px;
        }

        .card-body {
            padding: 20px;
        }

        .info-section {
            margin-bottom: 16px;
        }

        .info-section:last-child {
            margin-bottom: 0;
        }

        .info-label {
            font-size: 11px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .info-content {
            font-size: 14px;
            color: #e2e8f0;
            line-height: 1.6;
            padding: 12px;
            background: #0f172a;
            border-radius: 8px;
            border-left: 3px solid #334155;
        }

        .info-content.location { border-left-color: #3b82f6; }
        .info-content.suggestion { border-left-color: #8b5cf6; }
        .info-content.reason { border-left-color: #ec4899; }
        .info-content.issue { border-left-color: #ef4444; }

        .card-footer {
            padding: 16px 20px;
            background: rgba(15, 23, 42, 0.5);
            border-top: 1px solid #334155;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .status-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
        }

        .status-badge.has-issue {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }

        .status-badge.no-issue {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .status-dot.has-issue {
            background: #ef4444;
            animation: pulse 2s infinite;
        }

        .status-dot.no-issue {
            background: #10b981;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Table View */
        .table-container {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 16px;
            overflow: hidden;
            display: none;
        }

        .table-container.show {
            display: block;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid #334155;
        }

        th {
            background: #0f172a;
            color: #94a3b8;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        td {
            color: #e2e8f0;
            font-size: 14px;
        }

        tr:hover td {
            background: rgba(59, 130, 246, 0.1);
        }

        .table-risk {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }

        .table-risk.high {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }

        .table-risk.medium {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .table-risk.low {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }

        .table-risk.none {
            background: rgba(100, 116, 139, 0.2);
            color: #94a3b8;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 100px 20px;
        }

        .empty-state-icon {
            font-size: 80px;
            margin-bottom: 24px;
            opacity: 0.5;
        }

        .empty-state h2 {
            font-size: 24px;
            color: #f8fafc;
            margin-bottom: 8px;
        }

        .empty-state p {
            color: #64748b;
        }

        /* Toast */
        .toast {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #1e293b;
            border: 1px solid #334155;
            padding: 16px 24px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            transform: translateX(400px);
            transition: transform 0.3s ease;
            z-index: 1000;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast.success { border-left: 4px solid #10b981; }
        .toast.error { border-left: 4px solid #ef4444; }

        /* Export Panel */
        .export-panel {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            display: none;
        }

        .export-panel.show {
            display: block;
        }

        .export-options {
            display: flex;
            gap: 15px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        /* File List */
        .file-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .file-tag {
            padding: 8px 16px;
            background: rgba(59, 130, 246, 0.2);
            border: 1px solid #3b82f6;
            border-radius: 8px;
            font-size: 13px;
            color: #60a5fa;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .file-tag .remove {
            cursor: pointer;
            opacity: 0.7;
        }

        .file-tag .remove:hover {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .cards-container {
                grid-template-columns: 1fr;
            }
            
            .charts-section {
                grid-template-columns: 1fr;
            }
            
            .filters {
                flex-direction: column;
                align-items: stretch;
            }
            
            th, td {
                padding: 12px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔍 施工方案审查结果 - 高级分析工具</h1>
            <p class="subtitle">支持多文件对比、风险分析和数据导出</p>
            
            <div class="controls">
                <label class="btn btn-primary">
                    📁 选择JSON文件
                    <input type="file" id="fileInput" accept=".json" multiple>
                </label>
                <button class="btn btn-secondary" onclick="loadFromDefault()">
                    📂 加载示例数据
                </button>
                <button class="btn btn-success" onclick="toggleExport()">
                    📊 导出报告
                </button>
                <button class="btn btn-danger" onclick="clearAll()">
                    🗑️ 清空数据
                </button>
            </div>

            <div class="file-list" id="fileList"></div>
        </div>

        <div class="export-panel" id="exportPanel">
            <h3>导出选项</h3>
            <div class="export-options">
                <button class="btn btn-primary" onclick="exportToExcel()">📄 导出Excel</button>
                <button class="btn btn-primary" onclick="exportToPDF()">📑 导出PDF</button>
                <button class="btn btn-secondary" onclick="exportToJSON()">📋 导出JSON</button>
            </div>
        </div>

        <div class="dashboard" id="dashboard" style="display: none;">
            <div class="stat-card total">
                <div class="stat-icon">📊</div>
                <div class="stat-value" id="totalCount">0</div>
                <div class="stat-label">总检查项</div>
            </div>
            <div class="stat-card high">
                <div class="stat-icon">🔴</div>
                <div class="stat-value" id="highRiskCount">0</div>
                <div class="stat-label">高风险</div>
            </div>
            <div class="stat-card medium">
                <div class="stat-icon">🟡</div>
                <div class="stat-value" id="mediumRiskCount">0</div>
                <div class="stat-label">中风险</div>
            </div>
            <div class="stat-card low">
                <div class="stat-icon">🟢</div>
                <div class="stat-value" id="lowRiskCount">0</div>
                <div class="stat-label">低风险</div>
            </div>
        </div>

        <div class="charts-section" id="chartsSection" style="display: none;">
            <div class="chart-card">
                <h3>📊 风险分布</h3>
                <div class="progress-list" id="riskDistribution"></div>
            </div>
            <div class="chart-card">
                <h3>📈 章节统计</h3>
                <div class="progress-list" id="chapterDistribution"></div>
            </div>
        </div>

        <div class="filters" id="filters" style="display: none;">
            <div class="filter-group">
                <label>风险等级</label>
                <select id="riskFilter" onchange="applyFilters()">
                    <option value="all">全部</option>
                    <option value="high">高风险</option>
                    <option value="medium">中风险</option>
                    <option value="low">低风险</option>
                    <option value="none">无风险</option>
                </select>
            </div>
            <div class="filter-group">
                <label>章节</label>
                <select id="chapterFilter" onchange="applyFilters()">
                    <option value="all">全部</option>
                </select>
            </div>
            <div class="filter-group">
                <label>问题状态</label>
                <select id="issueFilter" onchange="applyFilters()">
                    <option value="all">全部</option>
                    <option value="has-issue">存在问题</option>
                    <option value="no-issue">无问题</option>
                </select>
            </div>
            <div class="filter-group">
                <label>搜索</label>
                <input type="text" id="searchInput" placeholder="关键词..." oninput="applyFilters()">
            </div>
        </div>

        <div class="view-toggle" id="viewToggle" style="display: none;">
            <button class="view-btn active" onclick="switchView('cards')">🎴 卡片视图</button>
            <button class="view-btn" onclick="switchView('table')">📋 表格视图</button>
        </div>

        <div id="content">
            <div class="empty-state">
                <div class="empty-state-icon">📂</div>
                <h2>请加载审查结果文件</h2>
                <p>支持多文件同时加载进行对比分析</p>
            </div>
        </div>
    </div>

    <div class="toast" id="toast">
        <span class="toast-message">操作成功</span>
    </div>

    <script>
        let allReviewItems = [];
        let filteredItems = [];
        let loadedFiles = [];
        let currentView = 'cards';

        document.getElementById('fileInput').addEventListener('change', handleFileSelect);

        function handleFileSelect(event) {
            const files = Array.from(event.target.files);
            files.forEach(file => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        let content = e.target.result;
                        content = content.replace(/[\x00-\x08\x0b-\x0c\x0e-\x1f]/g, '');
                        const data = JSON.parse(content);
                        processData(data, file.name);
                        addFileToList(file.name);
                        showToast(`已加载: ${file.name}`, 'success');
                    } catch (err) {
                        showToast(`${file.name} 解析失败: ${err.message}`, 'error');
                    }
                };
                reader.readAsText(file);
            });
        }

        function addFileToList(filename) {
            if (!loadedFiles.includes(filename)) {
                loadedFiles.push(filename);
                renderFileList();
            }
        }

        function renderFileList() {
            const container = document.getElementById('fileList');
            container.innerHTML = loadedFiles.map(file => `
                <div class="file-tag">
                    ${file}
                    <span class="remove" onclick="removeFile('${file}')">✕</span>
                </div>
            `).join('');
        }

        function removeFile(filename) {
            loadedFiles = loadedFiles.filter(f => f !== filename);
            renderFileList();
        }

        function loadFromDefault() {
            const sampleFiles = [
                'f926d2ad4428bfcbe12be8702e2c32ce-1773041592.json'
            ];
            
            sampleFiles.forEach(filename => {
                fetch(`../../temp/construction_review/final_result/${filename}`)
                    .then(response => {
                        if (!response.ok) throw new Error('文件加载失败');
                        return response.text();
                    })
                    .then(text => {
                        text = text.replace(/[\x00-\x08\x0b-\x0c\x0e-\x1f]/g, '');
                        const data = JSON.parse(text);
                        processData(data, filename);
                        addFileToList(filename);
                        showToast(`已加载: ${filename}`, 'success');
                    })
                    .catch(err => {
                        showToast('加载失败: ' + err.message, 'error');
                    });
            });
        }

        function processData(data, filename) {
            const aiReviewResult = data.ai_review_result || {};
            const reviewResults = aiReviewResult.review_results || [];
            
            reviewResults.forEach(result => {
                Object.values(result).forEach(unit => {
                    if (unit.review_lists) {
                        unit.review_lists.forEach(item => {
                            allReviewItems.push({
                                ...item,
                                sourceFile: filename
                            });
                        });
                    }
                });
            });

            updateUI();
        }

        function updateUI() {
            populateChapterFilter();
            updateStats();
            updateCharts();
            applyFilters();
            
            document.getElementById('dashboard').style.display = 'grid';
            document.getElementById('chartsSection').style.display = 'grid';
            document.getElementById('filters').style.display = 'flex';
            document.getElementById('viewToggle').style.display = 'flex';
        }

        function populateChapterFilter() {
            const chapters = [...new Set(allReviewItems.map(item => item.chapter_code))];
            const select = document.getElementById('chapterFilter');
            select.innerHTML = '<option value="all">全部章节</option>';
            chapters.forEach(chapter => {
                if (chapter) {
                    const option = document.createElement('option');
                    option.value = chapter;
                    option.textContent = chapter;
                    select.appendChild(option);
                }
            });
        }

        function updateStats() {
            let high = 0, medium = 0, low = 0, none = 0;
            
            allReviewItems.forEach(item => {
                const riskLevel = getRiskLevel(item);
                switch(riskLevel) {
                    case 'high': high++; break;
                    case 'medium': medium++; break;
                    case 'low': low++; break;
                    default: none++; break;
                }
            });

            document.getElementById('totalCount').textContent = allReviewItems.length;
            document.getElementById('highRiskCount').textContent = high;
            document.getElementById('mediumRiskCount').textContent = medium;
            document.getElementById('lowRiskCount').textContent = low;
        }

        function updateCharts() {
            // Risk Distribution
            const riskCounts = { high: 0, medium: 0, low: 0, none: 0 };
            allReviewItems.forEach(item => {
                riskCounts[getRiskLevel(item)]++;
            });

            const total = allReviewItems.length || 1;
            const riskLabels = {
                high: '高风险',
                medium: '中风险',
                low: '低风险',
                none: '无风险'
            };

            document.getElementById('riskDistribution').innerHTML = 
                Object.entries(riskCounts).map(([key, count]) => `
                    <div class="progress-item">
                        <div class="progress-header">
                            <span class="progress-label">${riskLabels[key]}</span>
                            <span class="progress-value">${count} (${Math.round(count/total*100)}%)</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill ${key}" style="width: ${count/total*100}%"></div>
                        </div>
                    </div>
                `).join('');

            // Chapter Distribution
            const chapterCounts = {};
            allReviewItems.forEach(item => {
                const chapter = item.chapter_code || '未知';
                chapterCounts[chapter] = (chapterCounts[chapter] || 0) + 1;
            });

            const sortedChapters = Object.entries(chapterCounts)
                .sort((a, b) => b[1] - a[1])
                .slice(0, 5);

            document.getElementById('chapterDistribution').innerHTML = 
                sortedChapters.map(([chapter, count]) => `
                    <div class="progress-item">
                        <div class="progress-header">
                            <span class="progress-label">${chapter}</span>
                            <span class="progress-value">${count}</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill total" style="width: ${count/total*100}%"></div>
                        </div>
                    </div>
                `).join('');
        }

        function getRiskLevel(item) {
            const riskInfo = item.risk_info || {};
            const riskLevel = (riskInfo.risk_level || '').toLowerCase();
            
            if (riskLevel.includes('高') || riskLevel.includes('high')) return 'high';
            if (riskLevel.includes('中') || riskLevel.includes('medium')) return 'medium';
            if (riskLevel.includes('低') || riskLevel.includes('low')) return 'low';
            return 'none';
        }

        function applyFilters() {
            const riskFilter = document.getElementById('riskFilter').value;
            const chapterFilter = document.getElementById('chapterFilter').value;
            const issueFilter = document.getElementById('issueFilter').value;
            const searchInput = document.getElementById('searchInput').value.toLowerCase();

            filteredItems = allReviewItems.filter(item => {
                if (riskFilter !== 'all' && getRiskLevel(item) !== riskFilter) {
                    return false;
                }

                if (chapterFilter !== 'all' && item.chapter_code !== chapterFilter) {
                    return false;
                }

                if (issueFilter !== 'all') {
                    const hasIssue = item.exist_issue === true;
                    if (issueFilter === 'has-issue' && !hasIssue) return false;
                    if (issueFilter === 'no-issue' && hasIssue) return false;
                }

                if (searchInput) {
                    const searchText = [
                        item.check_item,
                        item.check_item_code,
                        item.chapter_code,
                        item.check_result,
                        item.location,
                        item.suggestion,
                        item.reason
                    ].join(' ').toLowerCase();
                    if (!searchText.includes(searchInput)) return false;
                }

                return true;
            });

            renderContent();
        }

        function renderContent() {
            if (currentView === 'cards') {
                renderCards();
            } else {
                renderTable();
            }
        }

        function switchView(view) {
            currentView = view;
            document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            renderContent();
        }

        function renderCards() {
            const content = document.getElementById('content');
            
            if (filteredItems.length === 0) {
                content.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">🔍</div>
                        <h2>没有找到匹配的结果</h2>
                        <p>请尝试调整筛选条件</p>
                    </div>
                `;
                return;
            }

            const cardsHtml = filteredItems.map(item => {
                const riskLevel = getRiskLevel(item);
                const hasIssue = item.exist_issue === true;
                
                return `
                    <div class="review-card ${riskLevel}">
                        <div class="card-header">
                            <div class="card-header-top">
                                <span class="chapter-tag">${escapeHtml(item.chapter_code || '未知章节')}</span>
                                <span class="risk-tag ${riskLevel}">${getRiskLabel(riskLevel)}</span>
                            </div>
                            <div class="check-item-title">${escapeHtml(item.check_item || '未命名检查项')}</div>
                            <div class="check-item-code">${escapeHtml(item.check_item_code || '')}</div>
                        </div>
                        <div class="card-body">
                            <div class="info-section">
                                <div class="info-label">📍 问题位置</div>
                                <div class="info-content location">${escapeHtml(item.location || item.check_result || '未指定')}</div>
                            </div>
                            
                            ${item.suggestion ? `
                            <div class="info-section">
                                <div class="info-label">💡 修改建议</div>
                                <div class="info-content suggestion">${escapeHtml(item.suggestion)}</div>
                            </div>
                            ` : ''}
                            
                            ${item.reason ? `
                            <div class="info-section">
                                <div class="info-label">📝 审查依据</div>
                                <div class="info-content reason">${escapeHtml(item.reason)}</div>
                            </div>
                            ` : ''}
                        </div>
                        <div class="card-footer">
                            <div class="status-badge ${hasIssue ? 'has-issue' : 'no-issue'}">
                                <span class="status-dot ${hasIssue ? 'has-issue' : 'no-issue'}"></span>
                                <span>${hasIssue ? '存在问题' : '无问题'}</span>
                            </div>
                            <span style="color: #64748b; font-size: 12px;">${item.sourceFile || ''}</span>
                        </div>
                    </div>
                `;
            }).join('');

            content.innerHTML = `<div class="cards-container">${cardsHtml}</div>`;
        }

        function renderTable() {
            const content = document.getElementById('content');
            
            if (filteredItems.length === 0) {
                content.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">🔍</div>
                        <h2>没有找到匹配的结果</h2>
                        <p>请尝试调整筛选条件</p>
                    </div>
                `;
                return;
            }

            const rows = filteredItems.map(item => {
                const riskLevel = getRiskLevel(item);
                const hasIssue = item.exist_issue === true;
                
                return `
                    <tr>
                        <td><span class="chapter-tag">${escapeHtml(item.chapter_code || '-')}</span></td>
                        <td>${escapeHtml(item.check_item || '-')}</td>
                        <td><span class="table-risk ${riskLevel}">${getRiskLabel(riskLevel)}</span></td>
                        <td>${escapeHtml((item.location || item.check_result || '-').substring(0, 50))}...</td>
                        <td>
                            <span class="status-badge ${hasIssue ? 'has-issue' : 'no-issue'}">
                                <span class="status-dot ${hasIssue ? 'has-issue' : 'no-issue'}"></span>
                                ${hasIssue ? '存在问题' : '无问题'}
                            </span>
                        </td>
                        <td style="color: #64748b; font-size: 12px;">${item.sourceFile || '-'}</td>
                    </tr>
                `;
            }).join('');

            content.innerHTML = `
                <div class="table-container show">
                    <table>
                        <thead>
                            <tr>
                                <th>章节</th>
                                <th>检查项</th>
                                <th>风险等级</th>
                                <th>问题描述</th>
                                <th>状态</th>
                                <th>来源文件</th>
                            </tr>
                        </thead>
                        <tbody>${rows}</tbody>
                    </table>
                </div>
            `;
        }

        function getRiskLabel(riskLevel) {
            const labels = {
                high: '高风险',
                medium: '中风险',
                low: '低风险',
                none: '无风险'
            };
            return labels[riskLevel] || '未知';
        }

        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function toggleExport() {
            const panel = document.getElementById('exportPanel');
            panel.classList.toggle('show');
        }

        function exportToExcel() {
            if (filteredItems.length === 0) {
                showToast('没有可导出的数据', 'error');
                return;
            }

            let csv = '\uFEFF章节,检查项,检查项代码,风险等级,问题位置,问题描述,修改建议,审查依据,是否存在问题,来源文件\n';
            
            filteredItems.forEach(item => {
                const row = [
                    item.chapter_code || '',
                    item.check_item || '',
                    item.check_item_code || '',
                    getRiskLabel(getRiskLevel(item)),
                    (item.location || '').replace(/,/g, '，'),
                    (item.check_result || '').replace(/,/g, '，'),
                    (item.suggestion || '').replace(/,/g, '，'),
                    (item.reason || '').replace(/,/g, '，'),
                    item.exist_issue ? '是' : '否',
                    item.sourceFile || ''
                ];
                csv += row.join(',') + '\n';
            });

            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `审查结果_${new Date().toISOString().slice(0,10)}.csv`;
            link.click();
            
            showToast('Excel导出成功', 'success');
        }

        function exportToPDF() {
            showToast('PDF导出功能开发中...', 'success');
        }

        function exportToJSON() {
            if (filteredItems.length === 0) {
                showToast('没有可导出的数据', 'error');
                return;
            }

            const data = {
                exportTime: new Date().toISOString(),
                totalCount: filteredItems.length,
                items: filteredItems
            };

            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `审查结果_${new Date().toISOString().slice(0,10)}.json`;
            link.click();
            
            showToast('JSON导出成功', 'success');
        }

        function clearAll() {
            allReviewItems = [];
            filteredItems = [];
            loadedFiles = [];
            renderFileList();
            
            document.getElementById('dashboard').style.display = 'none';
            document.getElementById('chartsSection').style.display = 'none';
            document.getElementById('filters').style.display = 'none';
            document.getElementById('viewToggle').style.display = 'none';
            document.getElementById('exportPanel').classList.remove('show');
            
            document.getElementById('content').innerHTML = `
                <div class="empty-state">
                    <div class="empty-state-icon">📂</div>
                    <h2>数据已清空</h2>
                    <p>请加载新的审查结果文件</p>
                </div>
            `;
            
            showToast('数据已清空', 'success');
        }

        function showToast(message, type) {
            const toast = document.getElementById('toast');
            toast.className = `toast ${type} show`;
            toast.querySelector('.toast-message').textContent = message;
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
    </script>
</body>
</html>