{"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 Đầu tư trang thiết bị hỗ trợ hoạt động ươm tạo doanh nghiệp, ươm tạo công nghệ về sản xuất một số loại nhuyễn thể cá nước lợ, nước mặn và thức ăn, cây thủy sinh, chế phẩm sinh học trong thủy sản tại huyện Cần Giờ</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tên chủ đầu tư</th>\r\n                    <td>Trung tâm Ươm tạo Doanh nghiệp Nông nghiệp 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>Xã Cần Giờ, TPHCM</td>\r\n                </tr>\r\n                <tr>\r\n                    <th>Tổng mức đầu tư</th>\r\n                    <td>45.264 (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 Đầu tư trang thiết bị hỗ trợ hoạt động ươm tạo doanh nghiệp, ươm tạo công nghệ về sản xuất một số loại nhuyễn thể cá nước lợ, nước mặn và thức ăn, cây thủy sinh, chế phẩm sinh học trong thủy sản tại huyện Cần Giờ',\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>"}