{"title":"Thông tin chi tiết dự án đầu tư","content":"\r\n<div class=\"row\">\r\n    <div class=\"col-lg-12\">\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table table-bordered table-sm\">\r\n                <tr>\r\n                    <th>Tên dự án</th>\r\n                    <td>Dự án xây dựng phòng thí nghiệm </td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tên chủ đầu tư</th>\r\n                    <td>Trung tâm nghiên cứu Triển khai Khu Công nghệ cao</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Địa điểm thực hiện</th>\r\n                    <td>Thành Phố Thủ Đức</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng mức đầu tư</th>\r\n                    <td>72.428 (triệu đồng)</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Lũy kế giải ngân đến hết 2020</th>\r\n                    <td>56.687 (triệu đồng)</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng KHTH 2021-2025</th>\r\n                    <td>12.879 (triệu đồng)</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n        <h3 class=\"content-heading\">Tình hình giải ngân</h3>\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table table-bordered table-sm\">\r\n                <tr>\r\n                    <th class=\"text-center\">Năm</th>\r\n                    <th class=\"text-center\">Đã giao</th>\r\n                    <th class=\"text-center\">Kế hoạch thực hiện</th>\r\n                    <th class=\"text-center\">Thực hiện giải ngân</th>\r\n                    <th class=\"text-center\">Tỉ lệ giải ngân</th>\r\n                </tr>\r\n                <tr>\r\n                    <th class=\"text-center\">2024</th>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0,00 (%)</td>\r\n                </tr>\r\n                <tr>\r\n                    <th class=\"text-center\">2025</th>\r\n                    <td>8.288 (triệu đồng)</td>\r\n                    <td>4.330 (triệu đồng)</td>\r\n                    <td>0 (triệu đồng)</td>\r\n                    <td>0,00 (%)</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n        <div id=\"chart-container\" style=\"width:100%;height:60vh\"></div>\r\n    </div>\r\n</div>\r\n\r\n<script>\r\n    $('#ajaxCrudModal').on('shown.bs.modal', function() {\r\n        // 1. Dữ liệu (Giữ nguyên)\r\n        const singleProjectData = {\r\n            name: 'Dự án xây dựng phòng thí nghiệm ',\r\n            dagiao2024: 0.0,\r\n            plan2024: 0.0,\r\n            actual2024: 0.0,\r\n            dagiao2025: 8288.0,\r\n            plan2025: 4330.0,\r\n            actual2025: 0.0        };\r\n\r\n        // 2. Cấu hình ECharts\r\n        var chartDom = document.getElementById('chart-container');\r\n        var myChart = echarts.init(chartDom);\r\n        var option;\r\n\r\n        // Hàm format tiền tệ (1.000.000)\r\n        const formatCurrency = (value) => {\r\n            return value ? value.toLocaleString('vi-VN') : '0';\r\n        };\r\n\r\n        option = {\r\n            textStyle: {\r\n                fontFamily: 'Nunito, sans-serif'\r\n            },\r\n            title: {\r\n                text: 'Tiến độ thực hiện vốn dự án',\r\n                subtext: singleProjectData.name,\r\n                left: 'center',\r\n                top: 0\r\n            },\r\n\r\n            // --- NÂNG CẤP TOOLTIP ---\r\n            tooltip: {\r\n                trigger: 'axis',\r\n                axisPointer: {\r\n                    type: 'shadow'\r\n                },\r\n                formatter: function(params) {\r\n                    // params[0].dataIndex: 0 là năm 2024, 1 là năm 2025\r\n                    let index = params[0].dataIndex;\r\n                    let yearLabel = params[0].name; // \"Năm 2024\" hoặc \"Năm 2025\"\r\n\r\n                    // 1. Lấy số liệu thô để tính toán\r\n                    let assigned = index === 0 ? singleProjectData.dagiao2024 : singleProjectData.dagiao2025;\r\n                    let plan = index === 0 ? singleProjectData.plan2024 : singleProjectData.plan2025;\r\n                    let actual = index === 0 ? singleProjectData.actual2024 : singleProjectData.actual2025;\r\n\r\n                    // 2. Tính tỷ lệ % (Tránh chia cho 0)\r\n                    let ratePlan = plan > 0 ? ((actual / plan) * 100).toFixed(1) : 0;\r\n                    let rateAssigned = assigned > 0 ? ((actual / assigned) * 100).toFixed(1) : 0;\r\n\r\n                    // 3. Xây dựng nội dung Tooltip\r\n                    let result = `<div style=\"min-width: 200px;\"><b>${yearLabel}</b><hr style=\"margin: 5px 0; border-color: #ddd\"/>`;\r\n\r\n                    // Vòng lặp hiển thị các dòng giá trị (Đảo ngược để cái to nhất xuống dưới)\r\n                    [...params].reverse().forEach(item => {\r\n                        let value = formatCurrency(item.value);\r\n                        result += `<div style=\"display: flex; justify-content: space-between;\">\r\n                                <span>${item.marker} ${item.seriesName}:</span>\r\n                                <span style=\"font-weight: bold; margin-left: 15px;\">${value} triệu đồng</span>\r\n                               </div>`;\r\n                    });\r\n\r\n                    // Thêm phần tính toán tỷ lệ vào cuối\r\n                    result += `<hr style=\"margin: 5px 0; border-color: #ddd\"/>\r\n                           <div style=\"color: #333;\">\r\n                               • Đạt so với KH: <b style=\"color: ${ratePlan >= 50 ? 'green' : 'red'}\">${ratePlan}%</b><br/>\r\n                               • Đạt so với Giao: <b>${rateAssigned}%</b>\r\n                           </div>\r\n                           </div>`;\r\n\r\n                    return result;\r\n                }\r\n            },\r\n            legend: {\r\n                data: ['Kinh phí được giao', 'Kế hoạch giải ngân', 'Giải ngân thực tế'],\r\n                bottom: 0\r\n            },\r\n            grid: {\r\n                left: '3%',\r\n                right: '10%',\r\n                bottom: '12%', // Tăng bottom chút để legend không bị dính\r\n                containLabel: true\r\n            },\r\n\r\n            // --- NÂNG CẤP XAXIS (Group phần ngàn) ---\r\n            xAxis: {\r\n                type: 'value',\r\n                axisLabel: {\r\n                    formatter: function(value) {\r\n                        // Hiển thị đầy đủ số có dấu chấm (1.000.000)\r\n                        return value.toLocaleString('vi-VN');\r\n                    },\r\n                    rotate: 0, // Nếu số quá dài có thể chỉnh rotate: 30 để nghiêng chữ\r\n                    hideOverlap: true // Tự ẩn nếu chữ đè lên nhau\r\n                }\r\n            },\r\n            yAxis: {\r\n                type: 'category',\r\n                data: ['Năm 2024', 'Năm 2025'],\r\n                inverse: true,\r\n                axisTick: {\r\n                    show: false\r\n                }\r\n            },\r\n            series: [\r\n                // LỚP 1: NỀN\r\n                {\r\n                    name: 'Kinh phí được giao',\r\n                    type: 'bar',\r\n                    data: [singleProjectData.dagiao2024, singleProjectData.dagiao2025],\r\n                    barWidth: 60,\r\n                    z: 0,\r\n                    itemStyle: {\r\n                        color: '#1cc0c0ff',\r\n                        borderRadius: [0, 5, 5, 0]\r\n                    },\r\n                    label: {\r\n                        show: true,\r\n                        position: 'right',\r\n                        formatter: function(p) {\r\n                            return formatCurrency(p.value);\r\n                        },\r\n                        color: '#073f52ff'\r\n                    }\r\n                },\r\n                // LỚP 2: KẾ HOẠCH\r\n                {\r\n                    name: 'Kế hoạch giải ngân',\r\n                    type: 'bar',\r\n                    data: [singleProjectData.plan2024, singleProjectData.plan2025],\r\n                    barWidth: 40,\r\n                    barGap: '-100%',\r\n                    z: 1,\r\n                    itemStyle: {\r\n                        color: '#FAC858',\r\n                        borderRadius: [0, 5, 5, 0]\r\n                    },\r\n                    label: {\r\n                        show: true,\r\n                        position: 'insideRight',\r\n                        formatter: function(p) {\r\n                            return formatCurrency(p.value);\r\n                        },\r\n                        color: '#000',\r\n                        fontWeight: 'bold'\r\n                    }\r\n                },\r\n                // LỚP 3: GIẢI NGÂN\r\n                {\r\n                    name: 'Giải ngân thực tế',\r\n                    type: 'bar',\r\n                    data: [singleProjectData.actual2024, singleProjectData.actual2025],\r\n                    barWidth: 20,\r\n                    barGap: '-100%',\r\n                    z: 2,\r\n                    itemStyle: {\r\n                        color: '#5470C6',\r\n                        borderRadius: [0, 5, 5, 0]\r\n                    },\r\n                    label: {\r\n                        show: true,\r\n                        position: 'right', // Đã chỉnh lại position right cho dễ nhìn\r\n                        formatter: function(p) {\r\n                            return p.value > 0 ? formatCurrency(p.value) : '';\r\n                        },\r\n                        color: '#5470C6',\r\n                        fontWeight: 'bold'\r\n                    }\r\n                }\r\n            ]\r\n        };\r\n\r\n        option && myChart.setOption(option);\r\n\r\n        setTimeout(function() {\r\n            myChart.resize();\r\n        }, 200);\r\n    });\r\n</script><script src=\"/assets/ff42df01/js/echarts.min.js?v=1761556697\"></script>","footer":"<button type=\"button\" class=\"btn btn-light float-end\" data-bs-dismiss=\"modal\">Đóng</button>"}