syy

zhsq_qk-ui/src/assets/images/qkq_sprh.css

@@ -1365,7 +1365,13 @@ padding-right: 10px;
 	font-size: 20px;
 	padding-right: 10px;
 	color: #bceaf7;
-}
+}
+/* .qkq_bjs:nth-child(1){
+	width: 60%;
+}
+.qkq_bjs:nth-child(2){
+	width: 40%;
+} */
 #qkq_bj4{
 	width: 100%;
 	height: 200px;
@@ -1427,12 +1433,13 @@ display: block;
 }
 .qkq_gc_div{
 	float: left;
-	width: 33.3%;
-	height: 115px;
+	width: 50%;
+	height: 90px;
 	padding-top: 15px;
+	padding-left: 3%;
 }
 .qkq_gc_div p{
-	text-align: center;
+	text-align: left;
 	color: #fff;
 	margin-bottom: 10px;
 	font-size: 14px;
@@ -1443,5 +1450,13 @@ display: block;
 	padding-right: 7px;
 }
 .qkq_gc_con{
-	background:#1b232f url(../images/qkq_icon25.png) no-repeat  71px 1px;
+	background:#1b232f;
+}
+#qkq_bjs_01{
+	width: 700px;
+	height: 200px;
+}
+#qkq_bjs_02{
+	width: 100%;
+	height: 200px;
 }

zhsq_qk-ui/src/views/fusion/bjzshz.vue

@@ -62,36 +62,21 @@
 		</div>
         <div class="con_div">
 			<div class="qkq_tit txt_t">2024年上半年办结率统计</div>
-          <div class="qkq_bjzs_con fl">
+        <!--  <div class="qkq_bjzs_con fl">
             <h4>{{ HallHandling.hallTotal }}</h4>
             <p>大厅办件总数</p>
             <div class="qkq_bjzs_bg"></div>
         
-          </div>
+          </div> -->
     <div class="qkq_bjzs_txt clearfix fl">
               <div class="qkq_bjzs_txt_fl">
-
-			   <div class="qkq_bjs" >
-			     <img src="../../assets/images/qkq_icon20.png"/>
-			     <div class="qkq_bjs_txt">
-			       <p>办件数</p>
-			       <p><b>1062</b>件</p>
-			     </div>
-			   </div>
+				
 			   <div class="qkq_bjs" >
-			     <img src="../../assets/images/qkq_icon23.png"/>
-			     <div class="qkq_bjs_txt">
-			       <p>办结数</p>
-			       <p><b>8066</b>件</p>
-			     </div>
-			   </div>
-			   <div class="qkq_bjs" >
-			     <img src="../../assets/images/qkq_icon24.png"/>
-			     <div class="qkq_bjs_txt">
-			       <p>办结率</p>
-			       <p><b>98%</b></p>
-			     </div>
+			    <div id="qkq_bjs_01"></div>
+			    
 			   </div>
+			   
+			  
               </div>
       
               
@@ -116,43 +101,47 @@
           <div class="qkq_gc_con clearfix">
 			  <div class="qkq_gc_div">
 				  <p><b>6</b>个</p>
-				  <p>建设用地(含临时建设用地)<br>规划许可证</p>
+				  <p>建设用地(含临时建设用地)规划许可证</p>
 			  </div>
 			  <div class="qkq_gc_div">
-			  				  <p><b>11</b>个</p>
-			  				  <p>建设工程(含临时建设工程)<br>规划许可证</p>
+			  				  <p><b>40</b>天</p>
+			  				  <p>年度平均审批用时项目用时</p>
 			  </div>
 			  <div class="qkq_gc_div">
-			  				  <p><b>21</b>个</p>
-			  				  <p>建筑工程<br>施工许可证</p>
+			  				  <p><b>11</b>个</p>
+			  				  <p>建设工程(含临时建设工程)规划许可证</p>
 			  </div>
 			  <div class="qkq_gc_div">
-			  				  <p><b>52</b>个</p>
-			  				  <p>市政公用<br>办理项目数</p>
+			  				  <p><b>13</b>天</p>
+			  				  <p>年度平均审批用时立项用地阶段</p>
 			  </div>
 			  <div class="qkq_gc_div">
-			  				  <p><b>25</b>个</p>
-			  				  <p>联合验收<br>项目数</p>
+			  				  <p><b>21</b>个</p>
+			  				  <p>建筑工程施工许可证</p>
 			  </div>
 			  <div class="qkq_gc_div">
-				  <p><b>40</b>天</p>
-				  <p>年度平均审批用时<br>项目用时</p>
+			  				  <p><b>8</b>天</p>
+			  				  <p>年度平均审批用时工程规划阶段</p>
 			  </div>
 			  <div class="qkq_gc_div">
-				  <p><b>13</b>天</p>
-				  <p>年度平均审批用时<br>立项用地阶段</p>
+			  				  <p><b>52</b>个</p>
+			  				  <p>市政公用办理项目数</p>
 			  </div>
 			  <div class="qkq_gc_div">
-				  <p><b>8</b>天</p>
-				  <p>年度平均审批用时<br>工程规划阶段</p>
+			  				  <p><b>2</b>天</p>
+			  				  <p>年度平均审批用时施工许可阶段</p>
 			  </div>
 			  <div class="qkq_gc_div">
-				  <p><b>2</b>天</p>
-				  <p>年度平均审批用时<br>施工许可阶段</p>
+			  				  <p><b>25</b>个</p>
+			  				  <p>联合验收项目数</p>
 			  </div>
+			  
+			  
+			 
+			
 			  <div class="qkq_gc_div">
 				  <p><b>17</b>天</p>
-				  <p>年度平均审批用时<br>竣工验收阶段</p>
+				  <p>年度平均审批用时竣工验收阶段</p>
 			  </div>
 		  </div>
         </div>
@@ -271,6 +260,8 @@ export default {
     // this.qkq_bj3();
     // this.qkq_bj4();
     // this.qkq_bj5();
+	
+	this.qkq_bjs_01();
 
     this.getCurrentTime();
 
@@ -1227,6 +1218,196 @@ export default {
         myChart.setOption(option);
       }
     },
+	qkq_bjs_01(){
+		var myChart = echarts.init(document.getElementById('qkq_bjs_01'));
+		var dataStyle = {
+		    normal: {
+		        label: {
+		            show: false
+		        },
+		        labelLine: {
+		            show: false
+		        },
+		        shadowBlur: 0,
+		        shadowColor: '#203665'
+		    }
+		};
+		var option = {
+		    series: [{
+		        name: '第一个圆环',
+		        type: 'pie',
+		        clockWise: false,
+		        radius: [70, 80],
+		        itemStyle: dataStyle,
+		        hoverAnimation: false,
+		        center: ['15%', '50%'],
+		        data: [{
+		            value: 25,
+		            label: {
+		                normal: {
+		                    rich: {
+		                        a: {
+		                            color: '#3a7ad5',
+		                            align: 'center',
+		                            fontSize: 20,
+		                            fontWeight: "bold"
+		                        },
+		                        b: {
+		                            color: '#fff',
+		                            align: 'center',
+		                            fontSize: 16
+		                        }
+		                    },
+		                    formatter: function(params){
+		                        return "{b|办件数}\n\n"+"{a|"+params.value+"个}";
+		                    },
+		                    position: 'center',
+		                    show: true,
+		                    textStyle: {
+		                        fontSize: '14',
+		                        fontWeight: 'normal',
+		                        color: '#fff'
+		                    }
+		                }
+		            },
+		            itemStyle: {
+		                normal: {
+		                    color: '#2c6cc4',
+		                    shadowColor: '#2c6cc4',
+		                    shadowBlur: 0
+		                }
+		            }
+		        }, {
+		            value: 75,
+		            name: 'invisible',
+		            itemStyle: {
+		                normal: {
+		                    color: '#24375c'
+		                },
+		                emphasis: {
+		                    color: '#24375c'
+		                }
+		            }
+		        }]
+		    }, {
+		        name: '第二个圆环',
+		        type: 'pie',
+		        clockWise: false,
+		        radius: [70, 80],
+		        itemStyle: dataStyle,
+		        hoverAnimation: false,
+		        center: ['50%', '50%'],
+		        data: [{
+		            value: 50,
+		            label: {
+		                normal: {
+		                    rich: {
+		                        a: {
+		                            color: '#d03e93',
+		                            align: 'center',
+		                            fontSize: 20,
+		                            fontWeight: "bold"
+		                        },
+		                        b: {
+		                            color: '#fff',
+		                            align: 'center',
+		                            fontSize: 16
+		                        }
+		                    },
+		                    formatter: function(params){
+		                        return "{b|办结数}\n\n"+"{a|"+params.value+"个}";
+		                    },
+		                    position: 'center',
+		                    show: true,
+		                    textStyle: {
+		                        fontSize: '14',
+		                        fontWeight: 'normal',
+		                        color: '#fff'
+		                    }
+		                }
+		            },
+		            itemStyle: {
+		                normal: {
+		                    color: '#ef45ac',
+		                    shadowColor: '#ef45ac',
+		                    shadowBlur: 0
+		                }
+		            }
+		        }, {
+		            value: 50,
+		            name: 'invisible',
+		            itemStyle: {
+		                normal: {
+		                    color: '#412a4e'
+		                },
+		                emphasis: {
+		                    color: '#412a4e'
+		                }
+		            }
+		        }]
+		    }, {
+		        name: '第三个圆环',
+		        type: 'pie',
+		        clockWise: false,
+		        radius: [70, 80],
+		        itemStyle: dataStyle,
+		        hoverAnimation: false,
+		        center: ['85%', '50%'],
+		        data: [{
+		            value: 75,
+		            label: {
+		                normal: {
+		                    rich: {
+		                        a: {
+		                            color: '#603dd0',
+		                            align: 'center',
+		                            fontSize: 20,
+		                            fontWeight: "bold"
+		                        },
+		                        b: {
+		                            color: '#fff',
+		                            align: 'center',
+		                            fontSize: 16
+		                        }
+		                    },
+		                    formatter: function(params){
+		                        return "{b|办结率}\n\n"+"{a|"+params.value+"%}";
+		                    },
+		                    position: 'center',
+		                    show: true,
+		                    textStyle: {
+		                        fontSize: '14',
+		                        fontWeight: 'normal',
+		                        color: '#fff'
+		                    }
+		                }
+		            },
+		            itemStyle: {
+		                normal: {
+		                    color: '#613fd1',
+		                    shadowColor: '#613fd1',
+		                    shadowBlur: 0
+		                }
+		            }
+		        }, {
+		            value: 25,
+		            name: 'invisible',
+		            itemStyle: {
+		                normal: {
+		                    color: '#453284'
+		                },
+		                emphasis: {
+		                    color: '#453284'
+		                }
+		            }
+		        }]
+		    }]
+		}
+		  
+		if (option) {
+		  myChart.setOption(option);
+		}
+	},
 
     getCurrentTime() {
       const now = new Date();