// pages/dataCenterZWTJ/dataCenterZWTJ.js import * as echarts from '../../ec-canvas/echarts'; import { imgUrl } from "../api/request" const baseUrl = "https://www.cqna.gov.cn/data/" const request = (options) => { return new Promise((resolve, reject) => { options.url = baseUrl + options.url wx.request({ // 配置 "wx.request" 请求参数 ...options, header: { 'content-type': 'application/json;charset=UTF-8' }, success: function (res) { // console.log("network-res=>", res); // 返回成功信息 resolve(res.data) }, fail: function (error) { // console.log("network-err=>", error); // 返回错误信息 reject(error) } }) }) } Page({ /** * 页面的初始数据 */ data: { // 图片前缀 imgUrl: imgUrl, // 图表 streetlinechartec: { lazyLoad: true }, // 本周办件数量 weekWork: {}, // 本月办件数量 monthWork: {}, // 本年办件数量 yearWork: {}, // 本月部门办件排序 departmentSort: {}, // 事项排序 matterSort: {}, // 一窗通办 windowList: {}, // 南岸区政务服务事项总数数据 matters: [], // 南岸区政务服务事项总数数据零的数量 mattersZero: 0, // 实时办件详细 backEndDoing: [], // 实时办件详细定时器 detailTimer: '' }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 加载字体 // wx.loadFontFace({ // family: 'DOUYU', // // source: 'url("https://hui.yrslm.com:8089/douyu.ttf")', // source: 'url("https://www.cqna.gov.cn/mnazw/applet/font/douyu.ttf")', // success: function (e) { // console.log(e, '动态加载字体成功') // }, // fail: function (e) { // console.log(e, '动态加载字体失败') // }, // }) // 获取本周办件数量 this.getOfficeNumberByAreaInfo(1); // 获取本月办件数量 this.getOfficeNumberByAreaInfo(2); // 获取本年办件数量 this.getOfficeNumberByAreaInfo(3); // 南岸区政务服务事项总数、一窗通办、部门办件情况 this.queryDepartmentItem(); // 互联网申报情况图表 this.barComponent = this.selectComponent('#annulus'); this.init_bar(); // 好差评图表 this.goodOrBad = this.selectComponent('#goodOrBad'); this.init_goodOrBad(); // 实时办件详细 this.getListMatterRank(); // 开启定时器 this.startTimer(); }, // 根据时间类型获取办件数量 getOfficeNumberByAreaInfo(timeType) { request({ url: '/department/getOfficeNumberByAreaInfo?area=1&timeType=' + timeType, method: 'GET' }).then(res => { if (res.result === 'ok') { switch (timeType) { case 1: this.setData({ weekWork: res.data }); break; case 2: this.setData({ monthWork: res.data }); break; case 3: this.setData({ yearWork: res.data }); break; } } }) }, // 南岸区政务服务事项总数、一窗通办、部门办件情况 queryDepartmentItem() { request({ url: '/department/queryDepartmentItemRankByArea?area=1', method: 'GET' }).then(res => { this.setData({ matters: res.data.conutNumbers, mattersZero: 7 - res.data.listTotal.conutNumber.toString().length, departmentSort: res.data.listRank, matterSort: res.data.listMatterRank, windowList: res.data.listWeb }) }) }, // 开启定时器 startTimer() { let that = this; this.data.detailTimer = setInterval(function () { that.getListMatterRank(); }, 8000) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { // 清除定时器 clearInterval(this.data.detailTimer); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { return { title: '政务服务数据统计分析' } }, // 获取互联网申报情况图表 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()); request({ url: '/department/getOfficeNumberByAreaInfo?area=1&timeType=3', method: 'GET' }).then(res => { if (res.result === 'ok') { barChart.setOption({ series: [{ data: [{ name: '网上申报', value: res.data.applicationNumberNetwork }, { name: '窗口申报', value: res.data.applicationNumberWindow } ] }] }); } }) // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return barChart; }); }, // 好差评图表 init_goodOrBad() { this.goodOrBad.init((canvas, width, height, dpr) => { // 初始化图表 const barChart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); request({ url: '/goodOrbad/getGoodOrBadByYearAndArea?area=1', method: 'GET' }).then(res => { if (res.result === 'ok') { let temp = []; temp.push(res.data.veryDissatisfied); temp.push(res.data.notSatisfied); temp.push(res.data.basicSatisfied); temp.push(res.data.satisfied); temp.push(res.data.great); // 计算最大值,以及分割值 var maxValue = Math.max(...temp) maxValue = parseInt(maxValue/10000 + 1) * 10000 var interval = maxValue / 4 barChart.setOption(this.getGoodOrBadOption(maxValue, interval)); this.setData({ evalutionNum: res.data.goodOrBad, evalutionRate: Math.round(res.data.good / res.data.goodOrBad * 100) }) barChart.setOption({ series: [{ data: temp }] }) } }) // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return barChart; }); }, // 获取互联网申报情况图表 getScaOption() { //请求数据 var series = [{ type: 'pie', radius: ['45%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: false } }, labelLine: { show: false }, data: [] }]; return { tooltip: { trigger: 'item', position: ['12%', '72%'], textStyle: { fontWeight: 'normal', fontSize: 12, padding: 1 } }, legend: "", series: series }; }, // 获取好差评图表 getGoodOrBadOption(maxValue, interval) { //请求数据 var xAxis = { type: 'value', splitNumber: 4, max: maxValue, interval: interval, axisLine: { show: true }, splitLine: { interval: 0 } }, yAxis = { axisTick: { show: false }, type: 'category', data: [ '非常不满意', '不满意', '基本满意', '满意', '非常满意' ] }, grid = { left: '20%', top: '5%', bottom: '20%', right: '20%' }, series = [{ data: [123, 200, 15220, 80333, 1073671], type: 'bar', barWidth: 15, itemStyle: { barBorderRadius: [0, 7, 7, 0], color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#006BFD' }, { offset: 1, color: '#00E9F1' } ]), }, label: { show: true, position: 'right', valueAnimation: true } }] return { backgroundColor: '#FFFFFF', xAxis: xAxis, yAxis: yAxis, grid: grid, series: series, animationDelay: function (idx) { return idx * 50; }, animationEasing: 'elasticOut' }; }, // 实时办件详细 getListMatterRank() { request({ url: '/department/getListMatterRank?area=1', method: 'GET' }).then(res => { if (res.result === 'ok') { this.setData({ backEndDoing: res.data }) } }) }, })