nazw/nnzwminiapp/pages/dataCenterZWTJ/dataCenterZWTJ.js

// 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
				})
			}
		})
	},
})