数据中心政务统计

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/dataCenterZWTJ/dataCenterZWTJ.js

@@ -1,18 +1,34 @@
 // pages/dataCenterZWTJ/dataCenterZWTJ.js
+
+import * as echarts from '../../ec-canvas/echarts';
+
+import {
+  imgUrl
+} from "../api/request"
+
 Page({
 
 	/**
 	 * 页面的初始数据
 	 */
 	data: {
+    imgUrl:imgUrl,
+    ec:{
 
+    },
+    matters: [0, 0, 0, 2, 6, 3, 0],
+    // 南岸区政务服务事项总数数据零的数量
+    mattersZero: 3
 	},
 
 	/**
 	 * 生命周期函数--监听页面加载
 	 */
 	onLoad(options) {
-
+    this.barComponent = this.selectComponent('#annulus');
+    this.init_bar();
+    this.barComponent3 = this.selectComponent('#streetlinechart3');
+    this.init_bar3();
 	},
 
 	/**
@@ -62,5 +78,116 @@ Page({
 	 */
 	onShareAppMessage() {
 
-	}
+  },
+  init_bar() {
+    this.barComponent.init((canvas, width, height, dpr) => {
+      // 初始化图表
+      const barChart = echarts.init(canvas, null, {
+        width: width,
+        height: height,
+        devicePixelRatio: dpr
+      });
+      barChart.setOption(this.getScaOption());
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+      return barChart;
+    });
+  },
+  init_bar3() {
+    this.barComponent3.init((canvas, width, height, dpr) => {
+      // 初始化图表
+      const barChart = echarts.init(canvas, null, {
+        width: width,
+        height: height,
+        devicePixelRatio: dpr
+      });
+      barChart.setOption(this.getScaOption3());
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+      return barChart;
+    });
+  },
+
+  getScaOption() {
+    //请求数据 
+  var data = [
+    { value: 1048 },
+    { value: 735 }
+  ]
+   var series= [
+    {
+      type: 'pie',
+      radius: ['45%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: false
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: data
+    }
+  ];
+    return {
+      tooltip: "",
+      legend: "",
+      series: series
+    };
+  },
+  getScaOption3() {
+    //请求数据 
+    var xAxis = {
+        type: 'value',
+        min: 0,
+        max: 150000,
+      },
+      yAxis = {
+        type: 'category',
+        data: [
+          '非常不满意', '不满意', '基本满意', '满意', '非常满意'
+        ]
+      },
+      grid = {
+        left: '20%',
+        top: '10%',
+        bottom: '10%'
+      },
+      series = [{
+        data: [123, 200, 15220, 80333, 1073671],
+        type: 'bar',
+        barWidth: 14,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+              offset: 0,
+              color: '#3977E6'
+            },
+            {
+              offset: 1,
+              color: '#37BBF8'
+            }
+          ]),
+          // emphasis: {
+          //   barBorderRadius: 7
+          // },
+          // normal: {
+          //   barBorderRadius: 7
+          // }
+        }
+      }]
+    return {
+      backgroundColor: '#FFFFFF',
+      xAxis: xAxis,
+      yAxis: yAxis,
+      grid: grid,
+      series: series,
+      animationDelay: function (idx) {
+        return idx * 50;
+      },
+      animationEasing: 'elasticOut'
+    };
+  },
 })

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/dataCenterZWTJ/dataCenterZWTJ.json

@@ -1,4 +1,8 @@
 {
   "navigationBarTitleText": "政务服务数据统计分析",
-	"usingComponents": {}
+  "navigationBarBackgroundColor": "#508FF4",
+  "navigationBarTextStyle": "white",
+	"usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
 }

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/dataCenterZWTJ/dataCenterZWTJ.wxml

@@ -138,18 +138,158 @@ https://s1.ax1x.com/2022/10/14/xwEGPH.png
 https://s1.ax1x.com/2022/10/14/xwE3Ie.png -->
   <view class="chuangBoxGourps">
     <view class="chuangbox" style="background-image: url(https://s1.ax1x.com/2022/10/14/xwEGPH.png);">
-      <view>申请数</view>
-      <view>967件</view>
+      <view class="chuangboxtext1">申请数</view>
+      <view class="chuangboxtext2">967件</view>
+    </view>
+    <view class="chuangbox" style="background-image: url(https://s1.ax1x.com/2022/10/14/xwE3Ie.png);">
+      <view class="chuangboxtext1">办件数</view>
+      <view class="chuangboxtext2">967件</view>
+    </view>
+    <view class="chuangbox" style="background-image: url(https://s1.ax1x.com/2022/10/14/xwEYRA.png);">
+      <view class="chuangboxtext1">不予受理数</view>
+      <view class="chuangboxtext2">967件</view>
+    </view>
+    <view class="chuangbox" style="background-image: url(https://s1.ax1x.com/2022/10/14/xwEJGd.png);">
+      <view class="chuangboxtext1">办结数</view>
+      <view class="chuangboxtext2">967件</view>
     </view>
-    <view class="chuangbox" style="background-image: url(https://s1.ax1x.com/2022/10/14/xwE3Ie.png);"></view>
-    <view class="chuangbox" style="background-image: url(https://s1.ax1x.com/2022/10/14/xwEYRA.png);"></view>
-    <view class="chuangbox" style="background-image: url(https://s1.ax1x.com/2022/10/14/xwEJGd.png);"></view>
   </view>
 </view>
-<view class="box"></view>
-<view class="box"></view>
-<view class="box"></view>
-<view class="box"></view>
+<view class="box">
+  <view class="box2Title">
+    <image class="box2TitleIcon" src="/pages/images/box2TitleIcon.png"></image>
+    <text>互联网申报情况</text>
+  </view>
+  <view class="box2Crossline">
+  </view>
+  <view class="sbboxcontent">
+    <view class="sbboxleft">
+      <ec-canvas class="m-container" id="annulus" canvas-id="annulus" ec="{{ec}}"></ec-canvas>
+    </view>
+    <view class="sbboxright">
+      <view class="item1" style=" background-image: url('{{imgUrl}}textBox1.png')">
+        <view class="oneThing" style="display: flex;">
+          <view>网上申报 <text style="font-size: 40rpx;">1633</text> 件</view>
+        </view>
+      </view>
+      <view class="item1" style=" margin-top: 40rpx; background-image: url('{{imgUrl}}textBox1.png')">
+        <view class="oneThing" style="display: flex;">
+          <view>网上申报 <text style="font-size: 40rpx;">1633</text> 件</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+<view class="box">
+  <view class="box2Title">
+    <image class="box2TitleIcon" src="/pages/images/box2TitleIcon.png"></image>
+    <text>好差评</text>
+  </view>
+  <view class="box2Crossline">
+  </view>
+  
+  <view style=" margin-top: 20rpx; display: flex;justify-content: space-between;padding: 0 40rpx;">
+          <!-- 评价总量 -->
+          <view style="height: 100rpx;width:310rpx;display: flex;background-color: #E5F4FE;">
+            <!-- 图标 -->
+            <view style="width: 100rpx;height: 100%;display: flex;align-items:center;justify-content:center;">
+              <image src="{{imgUrl}}index-evalution.png" style="height:64rpx;width:64rpx;"></image>
+            </view>
+            <!-- 数据 -->
+            <view style="width: 210rpx;height: 100%;display:flex;flex-direction: column;justify-content:center">
+              <view style="font-size: 19rpx;color: #999999;padding-bottom:8rpx">本年评价总量</view>
+              <view style="display:flex;justify-content:left;align-items:center;color: #333333;">
+                <view style="font-size: 26rpx;font-weight: bold;">{{evalutionNum}}</view>
+                <view style="font-size:20rpx;padding-left:5rpx">条</view>
+              </view>
+            </view>
+          </view>
+          <!-- 满意度 -->
+          <view style="height: 100rpx;width:310rpx;display: flex;background-color: #E5F4FE;">
+            <!-- 图标 -->
+            <view style="width: 100rpx;height: 100%;display: flex;align-items:center;justify-content:center">
+              <image src="{{imgUrl}}index-good-blud.png" style="height:64rpx;width:70rpx;"></image>
+            </view>
+            <!-- 数据 -->
+            <view style="width: 210rpx;height: 100%;display:flex;flex-direction: column;justify-content:center">
+              <view style="font-size: 19rpx;color: #999999;padding-bottom:8rpx">满意度</view>
+              <view style="display:flex;justify-content:left;align-items:center;color: #333333;">
+                <view style="font-size: 26rpx;font-weight: bold;">{{evalutionRate}}</view>
+                <view style="font-size:20rpx;padding-left:5rpx">%</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view style="width: 100%;height: 500rpx; margin-bottom: 40rpx;">
+          <ec-canvas id="streetlinechart3" canvas-id="streetlinechart3" ec="{{ streetlinechartec }}" />
+        </view>
+        <view style=" display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 40rpx">
+          <view class="evaluate">评价我的办件</view>
+          <view class="evaluate">评价窗口人员</view>
+          <view class="evaluate">评价办事指南</view>
+          <view class="evaluate" style="width: 250rpx;">评价服务应用</view>
+          <view class="evaluate" style="width: 316rpx;">评价电子证照</view>
+        </view>
+</view>
+<view class="box">
+  <view class="box2Title">
+    <image class="box2TitleIcon" src="/pages/images/box2TitleIcon.png"></image>
+    <text>南岸区政务服务事项总数</text>
+  </view>
+  <view class="box2Crossline">
+  </view>
+  <view style="height: 170rpx; margin-top: 20rpx; margin-bottom: 20rpx; display: flex;justify-content: space-between;padding: 0 30rpx;">
+    <view class="matters {{mattersZero > index ? 'default' : '' }}" wx:for="{{matters}}" wx:key="index">{{item}}</view>
+    <view style="width: 27rpx;height: 26rpx;font-size: 28rpx;font-weight: 500;color: #999999;margin-top: 80rpx;">项</view>
+  </view>
+</view>
+<view class="box">
+  <view class="box2Title">
+    <image class="box2TitleIcon" src="/pages/images/box2TitleIcon.png"></image>
+    <text>一件事一次办</text>
+  </view>
+  <view class="box2Crossline">
+  </view>
+  <view style="margin-top: 20rpx; display: flex;justify-content: space-between;padding: 0 40rpx 40rpx 20rpx">
+          <view style="position: relative;">
+            <image src="{{imgUrl}}textBox4.png" style="width: 290rpx;height: 278rpx;" />
+            <view class="oneThing-left-top">套餐总数</view>
+            <view class="oneThing-left-bottom">
+              <view>254</view>
+              <view style="font-size: 25rpx;margin: 23rpx 0 0 10rpx;">件</view>
+            </view>
+          </view>
+          <view>
+            <view style="background-image: url('{{imgUrl}}textBox1.png');background-repeat: round;width: 314rpx;height: 93rpx;display: flex;justify-content: space-between;padding: 0 20rpx;">
+              <view class="triangles"></view>
+              <view style="width: 50rpx;height: 25rpx;"></view>
+              <view class="oneThing">减环节</view>
+              <view class="oneThing" style="display: flex;">
+                <view style="font-size: 34rpx;font-weight: 500;margin-right: 10rpx;">1622</view>
+                <view>件</view>
+              </view>
+            </view>
+            <view style="background-image: url('{{imgUrl}}textBox2.png');background-repeat: round;width: 314rpx;height: 93rpx;display: flex;justify-content: space-between;padding: 0 20rpx;">
+              <view class="triangles" style="border-left: 18rpx solid #156FA6;"></view>
+              <view style="width: 50rpx;height: 25rpx;"></view>
+              <view class="oneThing" style="color: #156FA6;">减跑动</view>
+              <view class="oneThing" style="display: flex;color: #156FA6;">
+                <view style="font-size: 34rpx;font-weight: 500;margin-right: 10rpx;">799</view>
+                <view>件</view>
+              </view>
+            </view>
+            <view style="background-image: url('{{imgUrl}}textBox3.png');background-repeat: round;width: 314rpx;height: 93rpx;display: flex;justify-content: space-between;padding: 0 20rpx;">
+              <view class="triangles" style="border-left: 18rpx solid #DF6866;"></view>
+              <view style="width: 50rpx;height: 25rpx;"></view>
+              <view class="oneThing" style="color: #DF6866;">减材料</view>
+              <view class="oneThing" style="display: flex;color: #DF6866;">
+                <view style="font-size: 34rpx;font-weight: 500;margin-right: 10rpx;">465</view>
+                <view>件</view>
+              </view>
+            </view>
+          </view>
+        </view>
+</view>
 <view class="box"></view>
 <view class="foot"></view>
 

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/dataCenterZWTJ/dataCenterZWTJ.wxss

@@ -1,6 +1,6 @@
 /* pages/dataCenterZWTJ/dataCenterZWTJ.wxss */
 page{
-  height: 100%;
+  /* height: 100%; */
   width: 100%;
   background-color: #F5F5F5;
 
@@ -204,6 +204,118 @@ page{
   background-repeat: no-repeat;
   background-size: 100%;
 }
+.chuangboxtext1{
+  color: #FFFFFF;
+  font-size: 27rpx;
+  width: 150rpx;
+  text-align: left;
+  margin-top: 20rpx;
+  margin-left: 25rpx;
+}
+.chuangboxtext2{
+  color: #FFFFFF;
+  font-weight: bold;
+  width: 150rpx;
+  text-align: center;
+
+}
+.sbboxcontent{
+  width: 100%;
+  height: 400rpx;
+  margin: auto 0;
+}
+.sbboxleft{
+  width: 380rpx;
+  height: 380rpx;
+  float: left;
+}
+
+.sbboxright{
+  margin-top: 80rpx;
+  width: 150rpx;
+  float: left;
+}
+.sbboxright .item1{
+  background-repeat: no-repeat;
+  width: 314rpx;
+  height: 93rpx;
+  background-size: 100%;
+}
+
+.oneThing {
+  margin-left: 20rpx;
+  line-height: 93rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #0B868E;
+  float: left;
+}
+
+.evaluate {
+  width: 205rpx;
+  height: 50rpx;
+  background: #F2F7FF;
+  border: 1rpx solid #508FF4;
+  border-radius: 10rpx;
+  font-weight: 500;
+  color: #508FF4;
+  font-size: 24rpx;
+  line-height: 50rpx;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.matters {
+  width: 85rpx;
+  height: 110rpx;
+  background: #F2F7FF;
+  border: 1rpx solid #508FF4;
+  border-radius: 4rpx;
+  font-size: 58rpx;
+  font-weight: 500;
+  color: #508FF4;
+  line-height: 110rpx;
+  text-align: center;
+}
+
+/* 南岸区政务服务事项总数 */
+.matters.default {
+  color: #D1DFF5;
+}
+
+/* 一件事情一次办左上部文本 */
+.oneThing-left-top {
+  position: absolute;
+  top: 82rpx;
+  left: 50%;
+  font-size: 28rpx;
+  color: #72A1DC;
+  transform: translate(-50%, 0);
+}
+
+/* 一件事情一次办左下部文本 */
+.oneThing-left-bottom {
+  position: absolute;
+    display: flex;
+    left: 50%;
+    transform: translate(-50%, 0);
+    top: 127rpx;
+    color: #1E71D2;
+    font-size: 46rpx;
+}
+
+.triangles {
+  width: 0;
+  height: 0;
+  position: relative;
+  left: 20rpx;
+  top: 50%;
+  transform: translate(0, -50%);
+  line-height: 93rpx;
+  border-bottom: 18rpx solid transparent;
+  border-left: 18rpx solid #0B868E;
+  border-top: 18rpx solid transparent;
+}
 
 
 .foot{