syy

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

@@ -1270,13 +1270,14 @@ border-radius: 2px;
 .qkq_bjzs_con{
 	position: relative;
 	background: url(../images/qkq_top.png) no-repeat center;
-	width: 100%;
+	width: 40%;
 	height: 100%;
-	background-size: 40%;
+	background-size: 60%;
+	height: 200px;
 }
 .qkq_bjzs_bg{
 	background: url(../images/qkq_btm.png) no-repeat center;
-	background-size: 47%;
+	background-size: 67%;
 	 content: " ";
 	 width: 100%;
 	 height: 100%;
@@ -1293,13 +1294,13 @@ border-radius: 2px;
 	font-size: 30px;
 	color: #faea12;
 	font-weight: 900;
-	padding-top: 235px;
+	padding-top: 84px;
 }
 .qkq_bjzs_con p{
 	text-align: center;
 	font-size: 18px;
 	color: #fff;
-	padding-top: 50px;
+	padding-top: 28px;
 }
 @keyframes changDeg{
 			0%{
@@ -1311,14 +1312,12 @@ border-radius: 2px;
 		}
 
 .qkq_bjzs_txt{
-	position: absolute;
-	top:80px;
-	left: 2%;
-	width: 96%;
+
+	width: 60%;
 	height: 100%;
 }
 .qkq_bjzs_txt .bjzs_txt{
-	margin-bottom: 45px;
+	margin-bottom: 25px;
 }
 .qkq_bjzs_txt .bjzs_txt p{
 	height: 25px;
@@ -1333,6 +1332,11 @@ padding: 0px;
 padding: 0px;
 color: #00ffff;
 padding-right: 10px;
+}
+.qkq_bjzs_txt_fl{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
 }
 .qkq_bjzs_txt_fr p{
 	text-align: right!important;
@@ -1343,19 +1347,22 @@ padding-right: 10px;
 	flex-direction: row;
 	justify-content: space-between;
 }
-.qkq_bjs_con .qkq_bjs{
+.qkq_bjs{
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin-top: 50px;
 }
-.qkq_bjs_con .qkq_bjs p{
+.qkq_bjs p{
 	color: #fff;
 	line-height: 30px;
+}
+.qkq_bjs img{
+	height: 70px;
 }
-.qkq_bjs_con .qkq_bjs p b{
+.qkq_bjs p b{
 	color: #fff;
-	font-size: 24px;
+	font-size: 20px;
 	padding-right: 10px;
 	color: #bceaf7;
 }
@@ -1364,7 +1371,7 @@ padding-right: 10px;
 	height: 200px;
 }
 #qkq_bj5{
-	width: 50%;
+	width: 100%;
 	height: 200px;
 }
 .qkq_hz2{
@@ -1372,7 +1379,7 @@ padding-right: 10px;
 }
 .qkq_sxtop{
 	height: 200px;
-	overflow-y: scroll;
+	overflow-y: hidden;
 	padding-left: 20px;
 }
 .qkq_sxtop::-webkit-scrollbar{
@@ -1380,8 +1387,8 @@ padding-right: 10px;
 	height: 0px;
 }
 .qkq_sxtop p{
-	height: 35px;
-	line-height: 35px;
+	height: 40px;
+	line-height: 40px;
 	display: flex;
 	flex-direction: row;
 	color: #fff;
@@ -1417,4 +1424,24 @@ display: block;
 }
 .qkq_sxtop p:nth-child(3) i{
 	background: #ffca5e;
-}
+}
+.qkq_gc_div{
+	float: left;
+	width: 33.3%;
+	height: 115px;
+	padding-top: 15px;
+}
+.qkq_gc_div p{
+	text-align: center;
+	color: #fff;
+	margin-bottom: 10px;
+	font-size: 14px;
+}
+.qkq_gc_div p b{
+	font-size: 26px;
+	color: #00ffff;
+	padding-right: 7px;
+}
+.qkq_gc_con{
+	background:#1b232f url(../images/qkq_icon25.png) no-repeat  71px 1px;
+}

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

@@ -32,13 +32,10 @@
       <!--左侧开始-->
       <div class="con_left_e">
         <div class="con_div">
-          <div class="qkq_tit txt_t">2024年上半年办结率统计</div>
+          <div class="qkq_tit txt_t">2024年上半年办理渠道统计</div>
           <div class="qkq_qkq_div clearfix">
-            <div class="qkq_hz qkq_hz2 fl">
-              <p>办件数：<b>{{ CompletionRate.numberOfProcessedItems }}</b></p>
-              <p>办结数：<b>{{ CompletionRate.completedQuantity }}</b></p>
-            </div>
-            <div id="qkq_bj5" class="fr"></div>
+           
+            <div id="qkq_bj5"></div>
           </div>
         </div>
         <div class="con_div">
@@ -52,80 +49,56 @@
           </div>
         </div>
         <div class="con_div">
-          <div class="qkq_tit txt_t">2024年上半年好差评统计</div>
-          <div id="qkq_bj4"></div>
+			<div class="qkq_tit txt_t">2024年上半年新办企业数</div>
+			<div id="qkq_bj1"></div>
+        
         </div>
 
       </div>
       <div class="con_left_f">
-
-        <div class="con_div qkq_bjzs">
-          <div class="qkq_bjzs_con">
+		<div class="con_div">
+			<div class="qkq_tit txt_t">2024年上半年好差评统计</div>
+			<div id="qkq_bj4"></div>
+		</div>
+        <div class="con_div">
+			<div class="qkq_tit txt_t">2024年上半年办结率统计</div>
+          <div class="qkq_bjzs_con fl">
             <h4>{{ HallHandling.hallTotal }}</h4>
             <p>大厅办件总数</p>
             <div class="qkq_bjzs_bg"></div>
-            <div class="qkq_bjzs_txt clearfix">
-              <div class="qkq_bjzs_txt_fl fl">
-                <div class="bjzs_txt">
-                  <p>建设用地(含临时建设</br>用地)规划许可证</p>
-                  <p style="margin-top: 15px"><b>{{ HallHandling.buildLandUse }}</b>件</p>
-                </div>
-                <div class="bjzs_txt">
-                  <p>建设工程(含临时建设</br>工程)规划许可证</p>
-                  <p style="margin-top: 15px"><b>{{ HallHandling.architecturalEngineering }}</b>件</p>
-                </div>
-                <div class="bjzs_txt">
-                  <p>建筑工程施工许可证</p>
-                  <p><b>{{ HallHandling.architecturalLicence }}</b>件</p>
-                </div>
-                <div class="bjzs_txt">
-                  <p>年度平均审批用时</br>项目用时</p>
-                  <p style="margin-top: 15px"><b>{{ HallHandling.projectTime }}</b>件</p>
-                </div>
-              </div>
-              <div class="qkq_bjzs_txt_fr fr">
-                <div class="bjzs_txt">
-                  <p>年度平均审批用时</br>立项用地阶段</p>
-                  <p style="margin-top: 15px"><b>{{ HallHandling.projectApprovalStage }}</b>件</p>
-                </div>
-                <div class="bjzs_txt">
-                  <p>年度平均审批用时</br>工程规划阶段</p>
-                  <p style="margin-top: 15px"><b>{{ HallHandling.planStage }}</b>件</p>
-                </div>
-                <div class="bjzs_txt">
-                  <p>年度平均审批用时</br>施工许可阶段</p>
-                  <p style="margin-top: 15px"><b>{{ HallHandling.permitStage }}</b>件</p>
-                </div>
-                <div class="bjzs_txt">
-                  <p>年度平均审批用时</br>竣工验收阶段</p>
-                  <p style="margin-top: 15px"><b>{{ HallHandling.acceptancePhase }}</b>件</p>
-                </div>
-              </div>
-            </div>
+        
           </div>
+    <div class="qkq_bjzs_txt clearfix fl">
+              <div class="qkq_bjzs_txt_fl">
 
-        </div>
-        <div class="con_div">
-          <div class="qkq_tit txt_t">2024年上半年办理渠道统计</div>
-          <div class="qkq_bjs_con">
-            <div class="qkq_bjs" v-for="(item, index) in channel" :key="index">
-              <img :src="getImgUrl(item.channelName)"/>
-              <div class="qkq_bjs_txt">
-                <p>{{ item.channelName }}</p>
-                <p><b>{{ item.handleNumber }}</b></br>件</p>
+			   <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>
               </div>
+      
+              
+               
+      
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="con_left_g">
-        <div class="con_div">
-          <div class="qkq_tit txt_t">2024年上半年新办企业数</div>
-          <div id="qkq_bj1"></div>
-        </div>
-        <div class="con_div">
-          <div class="qkq_tit txt_t">公安政务服务数据统计</div>
-          <div id="qkq_bj3"></div>
+			<div class="clear"></div>
         </div>
         <div class="con_div">
           <div class="qkq_tit txt_t">2024年上半年高频事项Top10</div>
@@ -134,8 +107,61 @@
               <a><i>{{ index + 1 }}</i>{{ item.eventName }}</a><span>{{ item.eventCount }}件</span>
             </p>
           </div>
+
         </div>
       </div>
+      <div class="con_left_g">
+        <div class="con_div qkq_bjzs">
+          <div class="qkq_tit txt_t">工程建设项目审批</div>
+          <div class="qkq_gc_con clearfix">
+			  <div class="qkq_gc_div">
+				  <p><b>6</b>个</p>
+				  <p>建设用地(含临时建设用地)<br>规划许可证</p>
+			  </div>
+			  <div class="qkq_gc_div">
+			  				  <p><b>11</b>个</p>
+			  				  <p>建设工程(含临时建设工程)<br>规划许可证</p>
+			  </div>
+			  <div class="qkq_gc_div">
+			  				  <p><b>21</b>个</p>
+			  				  <p>建筑工程<br>施工许可证</p>
+			  </div>
+			  <div class="qkq_gc_div">
+			  				  <p><b>52</b>个</p>
+			  				  <p>市政公用<br>办理项目数</p>
+			  </div>
+			  <div class="qkq_gc_div">
+			  				  <p><b>25</b>个</p>
+			  				  <p>联合验收<br>项目数</p>
+			  </div>
+			  <div class="qkq_gc_div">
+				  <p><b>40</b>天</p>
+				  <p>年度平均审批用时<br>项目用时</p>
+			  </div>
+			  <div class="qkq_gc_div">
+				  <p><b>13</b>天</p>
+				  <p>年度平均审批用时<br>立项用地阶段</p>
+			  </div>
+			  <div class="qkq_gc_div">
+				  <p><b>8</b>天</p>
+				  <p>年度平均审批用时<br>工程规划阶段</p>
+			  </div>
+			  <div class="qkq_gc_div">
+				  <p><b>2</b>天</p>
+				  <p>年度平均审批用时<br>施工许可阶段</p>
+			  </div>
+			  <div class="qkq_gc_div">
+				  <p><b>17</b>天</p>
+				  <p>年度平均审批用时<br>竣工验收阶段</p>
+			  </div>
+		  </div>
+        </div>
+        <div class="con_div">
+          <div class="qkq_tit txt_t">公安政务服务数据统计</div>
+          <div id="qkq_bj3"></div>
+        </div>
+       
+      </div>
 
 
       <!--左侧结束-->
@@ -1094,180 +1120,108 @@ export default {
     },
     qkq_bj5(val) {
       var myChart = echarts.init(document.getElementById('qkq_bj5'));
-      var getmax = 100;
-      //要改变的数据
-      var getvalue = val.completionRate;
-
-      var option = {
-        grid: {
-          top: 0,
-          bottom: 0,
-          left: 0
-        },
-        angleAxis: {
-          show: false,
-          max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
-          type: 'value',
-          startAngle: 225, //极坐标初始角度
-          splitLine: {
-            show: false,
+    var data=[3599, 18663, 7346,1940,1];
+    var className=['新版全流程','智慧人社','e窗通','金税三期','其他'];
+    var colorList=['#39B3FF','#47E0E0','#7891D9','#83D978','#C7A530','#FF8439'];
+    var defaultData=[100,100,100,100,100,100];
+   var option = {
+        legend:{
+          data:['渠道'],
+          icon:'circle',
+          bottom:10,
+          textStyle:{
+              color:'#ffffff'
           },
+		  show: false
         },
-        barMaxWidth: 20, //圆环宽度
-        radiusAxis: {
-          show: false,
-          type: 'category',
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            top: '10%',
+            containLabel: true
         },
-        //圆环位置和大小
-        polar: {
-          center: ['50%', '50%'],
-          radius: '170%',
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: function(params) {
+                return params[0].name + '<br/>' +
+                    "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
+                    // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
+                    params[0].seriesName + ' : ' + params[0].value
+            }
         },
-
-        series: [
-          {
-            type: 'bar',
-            data: [
-              {
-                //上层圆环，显示数据
-                value: getvalue,
-                itemStyle: {
-                  color: '#2AD2FB',
-                },
-              },
-            ],
-            barGap: '-100%', //柱间距离,上下两层圆环重合
-            coordinateSystem: 'polar',
-            roundCap: true, //顶端圆角
-            z: 3, //圆环层级，同zindex
-          },
-          {
-            //下层圆环，显示最大值
-            type: 'bar',
-            data: [
-              {
-                value: getmax,
-                itemStyle: {
-                  color: '#164B9F',
-                  opacity: 1,
-                  borderWidth: 0,
-                },
-              },
-            ],
-            barGap: '-100%',
-            coordinateSystem: 'polar',
-            roundCap: true,
-            z: 1,
-          },
-          //仪表盘
-          {
-            type: 'gauge',
-            startAngle: 225, //起始角度，同极坐标
-            endAngle: -45, //终止角度，同极坐标
+        xAxis: {
+            type: 'value',
             axisLine: {
-              show: false,
+                show: false
             },
-            splitLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
+             splitLine: {
+                show: false
             },
+        },
+        yAxis: [{
+            type: 'category',
+            inverse: true,
             axisLabel: {
-              show: false,
+                show: true,
+                textStyle: {
+                    color: '#fff'
+                },
             },
-            splitLabel: {
-              show: false,
+            splitLine: {
+                show: false
             },
-            pointer: {
-              // 分隔线
-              shadowColor: 'auto', //默认透明
-              shadowBlur: 5,
-              length: '50%',
-              width: '2',
-              show: false,
+            axisTick: {
+                show: false
             },
-            itemStyle: {
-              color: '#1598FF',
-              borderColor: '#1598FF',
-              borderWidth: 6,
+            axisLine: {
+                show: false
             },
-            detail: {
-              formatter: function (params) {
-                // return '完成率\n'+getvalue + '%';
-                return `{wcl|办结率\n}{number|${getvalue + '%'}}`;
-              },
-              rich: {
-                number: {
-                  fontSize: 25,
-                  textAlign: 'center',
+            data: className
+        }, {
+            type: 'category',
+            inverse: true,
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#ffffff',
+                    fontSize: '12'
                 },
-                wcl: {
-                  fontSize: 16,
-                  textAlign: 'center',
+                formatter: function(value) {
+                        return value ;
                 },
-              },
-              color: '#fff',
-              lineHeight: 30,
-              offsetCenter: ['0', '0'],
-            },
-            title: {
-              show: false,
             },
-            data: [
-              {
-                value: getvalue,
-              },
-            ],
-          },
-          {
-            name: '外部刻度',
-            type: 'gauge',
-            //  center: ['20%', '50%'],
-            radius: '70%',
-            min: 0, //最小刻度
-            max: 100, //最大刻度
-            splitNumber: 10, //刻度数量
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                color: [[1, 'rgba(0,0,0,0)']],
-              },
-            }, //仪表盘轴线
-            axisLabel: {
-              show: false,
-              color: '#4d5bd1',
-              distance: 25,
-            }, //刻度标签。
-            axisTick: {
-              show: true,
-              splitNumber: 7,
-              lineStyle: {
-                color: '#086CAF', //用颜色渐变函数不起作用
-                width: 2,
-              },
-              length: -8,
-            }, //刻度样式
-            splitLine: {
-              show: false,
-              length: -20,
-              lineStyle: {
-                color: '#C7CBCF', //用颜色渐变函数不起作用
-              },
-            }, //分隔线样式
-            detail: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-          },
-        ],
-      };
-      myChart.setOption(option);
+            data: data
+        }],
+        series: [{
+                name: '渠道',
+                type: 'bar',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: 0,
+                        // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                        //     offset: 0,
+                        //     color: 'rgb(57,89,255,1)'
+                        // }, {
+                        //     offset: 1,
+                        //     color: 'rgb(46,200,207,1)'
+                        // }]),
+                        color: (params) => {
+    					return colorList[params.dataIndex]
+    				}
+                    },
+                },
+                barWidth: 20,
+                data: data
+            }
+        ]
+    };
 
       if (option) {
         myChart.setOption(option);