大屏修改

projects/src/main/webapp/vmodules/statics/analysisScreen_four.jsp

@@ -205,7 +205,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>63</span>
+                                    <span id="center-center-light-data1">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -216,7 +216,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>63</span>
+                                    <span id="center-center-light-data2">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -245,7 +245,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>123</span>
+                                    <span id="center-center-light-data3">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -256,7 +256,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>65</span>
+                                    <span id="center-center-light-data4">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -285,7 +285,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>33</span>
+                                    <span id="center-center-light-data5">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -296,7 +296,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>0</span>
+                                    <span id="center-center-light-data6">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -325,7 +325,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>3</span>
+                                    <span id="center-center-light-data7">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -336,7 +336,7 @@
                             </div>
                             <div class="main-detail-bottom-bottom">
                                 <div class="left">
-                                    <span>12</span>
+                                    <span id="center-center-light-data8">63</span>
                                     <span>个</span>
                                 </div>
                                 <div class="right">
@@ -454,7 +454,7 @@
                     <div class="title">储备项目库</div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>123</span>
+                            <span id="bottom-light-data1">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -465,7 +465,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>65</span>
+                            <span id="bottom-light-data2">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -476,7 +476,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>1</span>
+                            <span id="bottom-light-data3">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -493,7 +493,7 @@
                     <div class="title">新建项目库</div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>123</span>
+                            <span id="bottom-light-data4">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -504,7 +504,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>65</span>
+                            <span id="bottom-light-data5">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -515,7 +515,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>1</span>
+                            <span id="bottom-light-data6">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -532,7 +532,7 @@
                     <div class="title">在建项目库</div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>123</span>
+                            <span id="bottom-light-data7">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -543,7 +543,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>65</span>
+                            <span id="bottom-light-data8">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -554,7 +554,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>1</span>
+                            <span id="bottom-light-data9">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -571,7 +571,7 @@
                     <div class="title">投产项目库</div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>123</span>
+                            <span id="bottom-light-data10">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -582,7 +582,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>65</span>
+                            <span id="bottom-light-data11">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -593,7 +593,7 @@
                     </div>
                     <div class="main-detail-bottom-bottom">
                         <div class="left">
-                            <span>1</span>
+                            <span id="bottom-light-data12">123</span>
                             <span>个</span>
                         </div>
                         <div class="right">
@@ -612,6 +612,11 @@
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"></script>
 <script>
+    var checkRate=0; //备案核准率
+    var openRate=0;  //开工率
+    var workRate=0;   //投产率
+    var stockRate=0;  //入规率
+    var hyData=[]// 行业数据
     function loadDpGxjGmData() {
         App.postJson('/api/statics/dp_gxj_gm', {
             varlx: '0',
@@ -637,8 +642,7 @@
 
                 document.querySelector('#right-data7').textContent =  gmData[3].num
                 document.querySelector('#right-data8').textContent =  gmData[3].amt
-
-
+s
             }
         });
     }
@@ -658,26 +662,32 @@
                 addreData = res.data;
                 document.querySelector('#center-center-data1').textContent = addreData[1].num
                 document.querySelector('#center-center-data2').textContent =  addreData[1].amt
+                document.querySelector('#center-center-light-data1').textContent = addreData[1].num_r
+                document.querySelector('#center-center-light-data2').textContent =  addreData[1].num_h
 
                 document.querySelector('#center-center-data3').textContent = addreData[2].num
                 document.querySelector('#center-center-data4').textContent = addreData[2].amt
+                document.querySelector('#center-center-light-data3').textContent = addreData[2].num_r
+                document.querySelector('#center-center-light-data4').textContent =  addreData[2].num_h
 
                 document.querySelector('#center-center-data5').textContent =  addreData[3].num
                 document.querySelector('#center-center-data6').textContent =  addreData[3].amt
+                document.querySelector('#center-center-light-data5').textContent = addreData[3].num_r
+                document.querySelector('#center-center-light-data6').textContent =  addreData[3].num_h
 
                 document.querySelector('#center-center-data7').textContent =  addreData[4].num
                 document.querySelector('#center-center-data8').textContent =  addreData[4].amt
-
+                document.querySelector('#center-center-light-data7').textContent = addreData[3].num_r
+                document.querySelector('#center-center-light-data8').textContent =  addreData[3].num_hs
                 // 更新中间总投资数据
                 const totalAmount = (addreData[1].amt)+(addreData[2].amt)+(addreData[3].amt)+(addreData[4].amt);
                 document.querySelector('#main-data2').textContent =  totalAmount.toFixed(2)
             }
         });
     }
-
-    // 示例：获取 dp_gxj_qt 数据
-    function loadDpGxjQtData() {
-        App.postJson("/api/statics/dp_gxj_qt", {
+    // 示例：获取 dp_gxj_hy 数据
+    function loadDpGxjHyData() {
+        App.postJson('/api/statics/dp_gxj_hy', {
             varlx: '0',
             varyear: '2024',
             varqx: '',
@@ -685,77 +695,24 @@
             vargm: '',
             varhy: '',
             varlogin: 'admin'
-        }, function (res) {
+        }, function(res) {
+            // 绑定数据到页面
             if (res.success) {
-                qtData = res.data[0];
-                console.log(qtData)
-                document.querySelector('#main-top-data1').textContent = qtData.num_total;
-                document.querySelector('#left-data1').textContent = qtData.num_cb;
-                document.querySelector('#left-data2').textContent = qtData.amt_cb;
-
-                document.querySelector('#left-data3').textContent = qtData.num_xj;
-                document.querySelector('#left-data4').textContent = qtData.amt_xj;
-
-                document.querySelector('#left-data5').textContent = qtData.num_zj;
-                document.querySelector('#left-data6').textContent = qtData.amt_zj;
-
+                hyData = res.data.map(item => ({
+                    value: item.zb, // 使用 amt 作为 value
+                    name: item.title, // 使用 title 作为 name
+                }));
 
-            } else {
-                console.error("Failed to load qtData:", res);
+                initHy();
             }
         });
     }
 
-    onload = function () {
-        loadDpGxjGmData()
-        loadDpGxjAddreData()
-        loadDpGxjQtData()
-        var currentDate = new Date();
-        var time = currentDate.getHours().toString().padStart(2, "0") + ":" + currentDate.getMinutes().toString().padStart(2, "0");
-        var date = currentDate.getFullYear() + "." + (currentDate.getMonth() + 1).toString().padStart(2, "0") + "." + currentDate.getDate().toString().padStart(2, "0");
-        document.querySelector('#left-time').innerText = time;
-        document.querySelector('#left-date').innerText = date;
-
-        // 点击把整体全屏
-        // 获取按钮元素
-        const fullscreenButton = document.getElementById('fullscreenButton');
-        const fullscreenElement = document.getElementById('fullscreenElement');
-
-        console.log(fullscreenButton, fullscreenElement)
-        // 处理按钮点击事件，切换全屏与取消全屏
-        fullscreenButton.addEventListener('click', () => {
-            if (!document.fullscreenElement) {
-                // 当前不是全屏，进入全屏
-                if (fullscreenElement.requestFullscreen) {
-                    fullscreenElement.requestFullscreen(); // 标准全屏
-                } else if (fullscreenElement.mozRequestFullScreen) {
-                    fullscreenElement.mozRequestFullScreen(); // Firefox
-                } else if (fullscreenElement.webkitRequestFullscreen) {
-                    fullscreenElement.webkitRequestFullscreen(); // Chrome, Safari, Opera
-                } else if (fullscreenElement.msRequestFullscreen) {
-                    fullscreenElement.msRequestFullscreen(); // IE/Edge
-                }
-                console.log('进入全屏');
-            } else {
-                // 当前已经是全屏，退出全屏
-                if (document.exitFullscreen) {
-                    document.exitFullscreen(); // 标准退出全屏
-                } else if (document.mozCancelFullScreen) {
-                    document.mozCancelFullScreen(); // Firefox
-                } else if (document.webkitExitFullscreen) {
-                    document.webkitExitFullscreen(); // Chrome, Safari, Opera
-                } else if (document.msExitFullscreen) {
-                    document.msExitFullscreen(); // IE/Edge
-                }
-                console.log('退出全屏');
-            }
-        });
-
+    function  initSubjectRate(){
         var myChart1 = echarts.init(document.getElementById('echarts-1'));
         var myChart2 = echarts.init(document.getElementById('echarts-2'));
         var myChart3 = echarts.init(document.getElementById('echarts-3'));
         var myChart4 = echarts.init(document.getElementById('echarts-4'));
-        var myChart5 = echarts.init(document.getElementById('bie-echarts'));
         // 水滴图的配置项
         var liquidFillOption = {
             backgroundColor: 'transparent',
@@ -767,7 +724,7 @@
             },
             series: [{
                 type: 'liquidFill',
-                data: [0.5], // 水滴的填充进度，0到1之间
+                data: [checkRate|0], // 水滴的填充进度，0到1之间
                 radius: '94%',
                 color: ['#A50107'], // 蓝色
                 outline: {
@@ -811,35 +768,88 @@
                 }
             }]
         };
-
         var liquidFillOption2 = JSON.parse(JSON.stringify(liquidFillOption));
         liquidFillOption2.series[0].color = ['#BA3C00']; // 绿色
         liquidFillOption2.series[0].outline.itemStyle.borderColor = '#BA3C00'; // 边框颜色也为绿色
-
+        liquidFillOption2.series[0].data=[openRate|0];
         var liquidFillOption3 = JSON.parse(JSON.stringify(liquidFillOption));
         liquidFillOption3.series[0].color = ['#00939A']; // 红色
         liquidFillOption3.series[0].outline.itemStyle.borderColor = '#00939A'; // 边框颜色也为红色
-
+        liquidFillOption3.series[0].data=[workRate|0];
         var liquidFillOption4 = JSON.parse(JSON.stringify(liquidFillOption));
         liquidFillOption4.series[0].color = ['#7100C3']; // 黄色
         liquidFillOption4.series[0].outline.itemStyle.borderColor = '#7100C3'; // 边框颜色也为黄色
-
+        liquidFillOption4.series[0].data=[stockRate|0];
         // 配置图表
         myChart1.setOption(liquidFillOption);
         myChart2.setOption(liquidFillOption2);
         myChart3.setOption(liquidFillOption3);
         myChart4.setOption(liquidFillOption4);
+        // 监听窗口大小变化，动态调整图表大小
+        window.addEventListener('resize', function() {
+            myChart1.resize();
+            myChart2.resize();
+            myChart3.resize();
+            myChart4.resize();
+            var fontSize = window.innerWidth < 500 ? 12 : 20; // 根据窗口大小调整字体大小
+        });
+    }
+    // 示例：获取 dp_gxj_qt 数据
+    function loadDpGxjQtData() {
+        App.postJson("/api/statics/dp_gxj_qt", {
+            varlx: '0',
+            varyear: '2024',
+            varqx: '',
+            var4k: '',
+            vargm: '',
+            varhy: '',
+            varlogin: 'admin'
+        }, function (res) {
+            if (res.success) {
+                qtData = res.data[0];
+                console.log(qtData)
+                document.querySelector('#main-top-data1').textContent = qtData.num_total;
+                document.querySelector('#left-data1').textContent = qtData.num_cb;
+                document.querySelector('#left-data2').textContent = qtData.amt_cb;
+
+                document.querySelector('#left-data3').textContent = qtData.num_xj;
+                document.querySelector('#left-data4').textContent = qtData.amt_xj;
+
+                document.querySelector('#left-data5').textContent = qtData.num_zj;
+                document.querySelector('#left-data6').textContent = qtData.amt_zj;
 
+                //给各项目库灯赋值
+                document.querySelector('#bottom-light-data1').textContent = qtData.num_cq_2_r;
+                document.querySelector('#bottom-light-data2').textContent = qtData.num_cq_2_h;
+                document.querySelector('#bottom-light-data3').textContent = qtData.num_cq_2_l;
 
+                document.querySelector('#bottom-light-data4').textContent = qtData.num_cq_3_r;
+                document.querySelector('#bottom-light-data5').textContent = qtData.num_cq_3_h;
+                document.querySelector('#bottom-light-data6').textContent = qtData.num_cq_3_l;
+
+                document.querySelector('#bottom-light-data7').textContent = qtData.num_cq_4_r;
+                document.querySelector('#bottom-light-data8').textContent = qtData.num_cq_4_h;
+                document.querySelector('#bottom-light-data9').textContent = qtData.num_cq_4_l;
+
+                document.querySelector('#bottom-light-data10').textContent = qtData.num_cq_5_r;
+                document.querySelector('#bottom-light-data11').textContent = qtData.num_cq_5_h;
+                document.querySelector('#bottom-light-data12').textContent = qtData.num_cq_5_l;
+                initSubjectRate();
+            } else {
+                console.error("Failed to load qtData:", res);
+            }
+        });
+    }
+
+    function  initHy(){
+        var myChart5 = echarts.init(document.getElementById('bie-echarts'));
         var option = {
             tooltip: {
                 trigger: 'item',
                 formatter: '{b}: {c} ({d}%)'
             },
-
             series: [
                 {
-
                     name: '饼图示例',
                     type: 'pie',
                     radius: ['50%', '80%'],
@@ -859,7 +869,6 @@
                         minMargin: 0,
                         edgeDistance: 0,
                         lineHeight: 15,
-
                         rich: {
                             data: {
                                 fontSize: 18,
@@ -880,12 +889,7 @@
                         // borderWidth: 5,
                         // borderColor: '#2971e0',
                     },
-                    data: [
-                        { value: 25, name: '采矿业' },
-                        { value: 25, name: '电力产业' },
-                        { value: 35, name: '数字产业 ' },
-                        { value: 15, name: '制造业' },
-                    ],
+                    data: hyData,
                     emphasis: {
                         itemStyle: {
                             shadowBlur: 200,
@@ -920,25 +924,65 @@
         myChart5.setOption(option);
         // 监听窗口大小变化，动态调整图表大小
         window.addEventListener('resize', function() {
-            myChart1.resize();
-            myChart2.resize();
-            myChart3.resize();
-            myChart4.resize();
             myChart5.resize();
-            var fontSize = window.innerWidth < 500 ? 12 : 20; // 根据窗口大小调整字体大小
-            myChart.setOption({
-                title: {
-                    textStyle: {
-                        fontSize: fontSize
-                    }
-                }
-            });
+            /*            var fontSize = window.innerWidth < 500 ? 12 : 20; // 根据窗口大小调整字体大小
+                        myChart.setOption({
+                            title: {
+                                textStyle: {
+                                    fontSize: fontSize
+                                }
+                            }
+                        });*/
         });
+    }
+    onload = function () {
+        loadDpGxjGmData()
+        loadDpGxjAddreData()
+        loadDpGxjQtData()
+        loadDpGxjHyData()
+        var currentDate = new Date();
+        var time = currentDate.getHours().toString().padStart(2, "0") + ":" + currentDate.getMinutes().toString().padStart(2, "0");
+        var date = currentDate.getFullYear() + "." + (currentDate.getMonth() + 1).toString().padStart(2, "0") + "." + currentDate.getDate().toString().padStart(2, "0");
+        document.querySelector('#left-time').innerText = time;
+        document.querySelector('#left-date').innerText = date;
 
+        // 点击把整体全屏
+        // 获取按钮元素
+        const fullscreenButton = document.getElementById('fullscreenButton');
+        const fullscreenElement = document.getElementById('fullscreenElement');
 
+        console.log(fullscreenButton, fullscreenElement)
+        // 处理按钮点击事件，切换全屏与取消全屏
+        fullscreenButton.addEventListener('click', () => {
+            if (!document.fullscreenElement) {
+                // 当前不是全屏，进入全屏
+                if (fullscreenElement.requestFullscreen) {
+                    fullscreenElement.requestFullscreen(); // 标准全屏
+                } else if (fullscreenElement.mozRequestFullScreen) {
+                    fullscreenElement.mozRequestFullScreen(); // Firefox
+                } else if (fullscreenElement.webkitRequestFullscreen) {
+                    fullscreenElement.webkitRequestFullscreen(); // Chrome, Safari, Opera
+                } else if (fullscreenElement.msRequestFullscreen) {
+                    fullscreenElement.msRequestFullscreen(); // IE/Edge
+                }
+                console.log('进入全屏');
+            } else {
+                // 当前已经是全屏，退出全屏
+                if (document.exitFullscreen) {
+                    document.exitFullscreen(); // 标准退出全屏
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen(); // Firefox
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen(); // Chrome, Safari, Opera
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen(); // IE/Edge
+                }
+                console.log('退出全屏');
+            }
+        });
 
     }
 </script>
 </body>
 
-</html>
+</html>