nazw/nnzwminiapp/pages/dataCenterXXTJ/dataCenterXXTJ.js

// pages/dataCenterXXTJ/dataCenterXXTJ.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,
		},
		// 本年度公开信箱办理情况
		leaveAMessage: {},
		// 详细数据
		detailList: [],
		// 分页参数
		page: 1,
		// 按钮是否隐藏
		moreBtn: false
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	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.queryLeaveAMessage();
		// 本年度公开信箱办理情况图表
		this.treeDiagram = this.selectComponent('#treeDiagram');
		this.init_treeDiagram();
		// 近90天办理类别统计
		this.processingCategory = this.selectComponent('#processingCategory');
		this.init_processingCategory();
		// 近90天公开信箱领域统计
		this.publicMailbox = this.selectComponent('#publicMailbox');
		this.init_publicMailbox();
		// 详细数据获取
		this.queryDetailedData(this.data.page);
	},
	// 本年度公开信箱办理情况
	queryLeaveAMessage() {
		request({
			url: '/mail/queryLeaveAMessage',
			method: 'GET'
		}).then(res => {
			this.setData({
				leaveAMessage: res.data
			})
		})
	},
	// 本年度公开信箱办理情况图表
	init_treeDiagram() {
		this.treeDiagram.init((canvas, width, height, dpr) => {
			// 初始化图表
			const barChart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr
			});
			barChart.setOption(this.getTreeDiagramOption());
			request({
				url: '/mail/queryToType?type=1',
				method: 'GET'
			}).then(res => {
				if (res.result) {
					barChart.setOption({
						series: [{
							data: res.data.accept
						}, {
							data: res.data.handle
						}]
					})
				}
			})
			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
			return barChart;
		});
	},
	// 近90天办理类别统计
	init_processingCategory() {
		this.processingCategory.init((canvas, width, height, dpr) => {
			// 初始化图表
			const barChart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr
			});
			barChart.setOption(this.getStatisticsOption());
			request({
				url: '/mail/queryToType?type=3',
				method: 'GET'
			}).then(res => {
				if (res.result) {
					barChart.setOption({
						series: [{
							data: res.data
						}],
						legend: {
							formatter: function (name) {
								let data = res.data
								let tarValue
								for (let i = 0; i < data.length; i++) {
									if (data[i].name == name) {
										tarValue = data[i].value
									}
								}
								let v = tarValue + ' 件'
								return `${name}  ${v}`
							}
						}
					})
				}
			})
			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
			return barChart;
		});
	},
	// 近90天公开信箱领域统计
	init_publicMailbox() {
		this.publicMailbox.init((canvas, width, height, dpr) => {
			// 初始化图表
			const barChart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr
			});
			barChart.setOption(this.getStatisticsOption());
			request({
				url: '/mail/queryToType?type=2',
				method: 'GET'
			}).then(res => {
				if (res.result) {
					barChart.setOption({
						series: [{
							data: res.data
						}],
						legend: {
							formatter: function (name) {
								let data = res.data
								let tarValue
								for (let i = 0; i < data.length; i++) {
									if (data[i].name == name) {
										tarValue = data[i].value
									}
								}
								let v = tarValue + ' 件'
								return `${name}  ${v}`
							}
						}
					})
				}
			})
			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
			return barChart;
		});
	},
	// 本年度公开信箱办理情况图表
	getTreeDiagramOption() {
		//请求数据 
		let months = [];
		let currYear = new Date().getFullYear();
		for (let i = 1; i <= 12; i++) {
			let month = i;
			month = currYear + "年" + month + "月";
			months.push(month);
		}
		var xAxis = {
				type: 'category',
				data: months,
				splitLine: {
					show: true,
					alignWithLabel: true,
					interval: 0
				},
				axisLabel: {
					interval: 0,
					textStyle: {
						fontSize: 9
					}
				},
				axisTick: {
					show: false
				},
			},
			yAxis = {
				type: 'value',
				name: '单位：件',
				splitLine: {
					show: false
				},
				axisLine: {
					show: true
				},
			},
			tooltip = {
				trigger: 'axis'
			},
			dataZoom = [{
				type: 'inside',
				show: true,
				start: 0,
				end: 40,
			}],
			legend = {
				data: ['受理数', '办结数'],
				itemHeight: 10,
				itemWidth: 10,
			},
			grid = {
				left: '5%',
				bottom: '5%',
				containLabel: true
			},
			series = [{
					name: '受理数',
					type: 'bar',
					data: [],
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 1,
								color: '#45D1FF'
							},
							{
								offset: 0,
								color: '#0B8FFF'
							}
						])
					}
				},
				{
					name: '办结数',
					type: 'bar',
					data: [],
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 1,
								color: '#84D16A'
							},
							{
								offset: 0.5,
								color: '#7EDFA2'
							},
							{
								offset: 0,
								color: '#13AC9C'
							}
						])
					}
				}
			]
		return {
			backgroundColor: '#FFFFFF',
			xAxis: xAxis,
			yAxis: yAxis,
			dataZoom: dataZoom,
			tooltip: tooltip,
			legend: legend,
			grid: grid,
			series: series,
			animationDelay: function (idx) {
				return idx * 50;
			},
			animationEasing: 'elasticOut'
		};
	},
	// 获取本年度公开信息办理图表
	getStatisticsOption() {
		//请求数据 
		let legend = {
				top: 'middle',
				orient: 'vertical',
				right: '10%',
				itemHeight: 10,
				itemWidth: 10,
			},
			tooltip = {
				trigger: 'item'
			},
			series = [{
				type: 'pie',
				left: '-40%',
				radius: ['40%', '60%'],
				label: {
					show: false,
					position: 'center'
				},
				data: []
			}]
		return {
			backgroundColor: '#FFFFFF',
			legend: legend,
			series: series,
			tooltip: tooltip,
			animationDelay: function (idx) {
				return idx * 50;
			},
			animationEasing: 'elasticOut'
		};
	},
	// 分页获取详细数据
	queryDetailedData(page) {
		request({
			url: '/mail/queryDetailedData?limit=10&page=' + page
		}).then(res => {
			if (res.msg === 'SUCCESS') {
				if (res.count > 0) {
					let temp = this.data.detailList;
					for (let index = 0; index < res.data.length; index++) {
						res.data[index].inquiry = res.data[index].咨询;
						res.data[index].suggestion = res.data[index].建议;
						res.data[index].complain = res.data[index].投诉;
						res.data[index].other = res.data[index].其他;
						res.data[index].comment = res.data[index].意见;
						let ym = res.data[index].month.split("-");
						res.data[index].month = ym[0] + "年" + ym[1] + "月";
						temp.push(res.data[index]);
					}
					this.setData({
						detailList: temp
					})
				}
			} else {
				wx.showToast({
					title: '没有更多了',
					icon: 'none',
					duration: 2000
				});
				this.setData({
					moreBtn: true
				})
			}
		})
	},
	queryDetailedDataPage() {
		this.setData({
			page: this.data.page + 1
		})
		this.queryDetailedData(this.data.page);
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {

	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {

	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage() {
		return {
			title: '公开信箱统计数据'
		}
	}
})