{"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 hệ thống trang thiết bị phòng thí nghiệm phục vụ công tác bảo tồn, lai tạo và phát triển nguồn giống nấm phục vụ sản xuất nông nghiệp và xử lý môi trường </td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tên chủ đầu tư</th>\r\n                    <td>Ban Quản lý Khu Nông nghiệp Công nghệ cao Thành phố Hồ Chí Minh</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Địa điểm thực hiện</th>\r\n                    <td>Xã Nhuận Đức, TPHCM</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng mức đầu tư</th>\r\n                    <td>92.100 (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>0 (triệu đồng)</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng KHTH 2021-2025</th>\r\n                    <td>0 (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>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            </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 hệ thống trang thiết bị phòng thí nghiệm phục vụ công tác bảo tồn, lai tạo và phát triển nguồn giống nấm phục vụ sản xuất nông nghiệp và xử lý môi trường ',\r\n            dagiao2024: ,\r\n            plan2024: ,\r\n            actual2024: ,\r\n            dagiao2025: ,\r\n            plan2025: ,\r\n            actual2025:         };\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>"}