wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
							<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>征收补偿安置征地变化趋势</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入mui样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<!-- 引入弹窗及选择器样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<!-- 引入app样式 -->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" href="../css/app.new.css">
		<!-- 引入字体 -->
		<link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-time.css" />
	</head>
	<body>
		<div class="jt-count-echarts-panel">
			<div class="jt-title">征收土地年度变化趋势</div>
			<div class="jt-content" id="divCountLineDL_YEAR"></div>
			<div class="jt-title">
				<button class="jt-select" id="selYear" value="2021">2021</button>
				年度镇街征地变化统计
			</div>
			<div class="jt-content" id="divCountBarDL_SSXZ" style="height: 600px;"></div>
			<div class="jt-title">
				<button class="jt-select" id="selSankeyYear" value="2021">2021</button>
				年度地类流量
			</div>
			<div class="jt-content" id="divCountSankey_DL" style="height: 600px;"></div>
		</div>
	</body>
</html>
<!-- 引入mui脚本 -->
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入弹窗及选择器脚本 -->
<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jQuery脚本 -->
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入通用脚本 -->
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<!-- 进入webview脚本 -->
<script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入存储脚本 -->
<script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入ajax脚本 -->
<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
<!-- 图表脚本 -->
<script src="../js/ECharts/echarts.js" type="text/javascript" charset="utf-8"></script>
<!-- 自定义图表脚本 -->
<script src="../js/CRECharts.js" type="text/javascript" charset="utf-8"></script>
<!-- 本页独有脚本 -->
<script type="text/javascript">
	/* mui初始化 */
	mui.init();
	/* 页面尺寸 */
	var pageSize = getPageSize();
	/* 初始化完成 */
	plusInit(function() {
		/* 重置图表的尺寸 */
		echartsSizeInit();
		/* 绑定选择器 */
		bindListenerToSelectButton('selYear', 'view_app_zd_dkxx_collection', 'year', onSelectYEAR);
		bindListenerToSelectButton('selSankeyYear', 'view_app_zd_dkxx_collection', 'year', onSelectSankeyYEAR);
		/* 获取初始化值 */
		querySimpleFieldInfo('view_app_zd_dkxx_collection', 'year', function(res) {
			let text = res[res.length - 1].text;
			let value = res[res.length - 1].value;
			setSelectControlValue('selYear', text, value);
			setSelectControlValue('selSankeyYear', text, value);
			/* 统计 */
			countLandCategoryByYear(value);
		})
	});

	/**
	 * 年度选择器选择事件
	 * @param {string} text 文本
	 * @param {string} value 值
	 */
	function onSelectYEAR(text, value) {
		countTownLandCategoryByYear(text);
	}

	/**
	 * 流量年度选择器选择事件
	 * @param {string} text 文本
	 * @param {string} value 值
	 */
	function onSelectSankeyYEAR(text, value) {
		countLandCategoryFluxByYear(text);
	}

	/**
	 * 征收土地面积年度变化趋势
	 * @param {string} year 年度
	 */
	function countLandCategoryByYear(year) {
		var iData = {
			type: 'year',
			year: '',
		}
		sendAjax({
			url: 'appCountZdTrendCategoryByYear',
			waitMessage: '分析中...',
			data: iData,
			success: function(resData) {
				showLandCategoryByYear(resData);
				countTownLandCategoryByYear(year);
			},
			error: function(err) {
				muiAlertError(err);
			}
		})
	}

	/**
	 * 某一年度征收土地地类各乡镇变化趋势
	 * @param {string} year 年份
	 */
	function countTownLandCategoryByYear(year) {
		var iData = {
			type: 'town',
			year: year,
		}
		sendAjax({
			url: 'appCountZdTrendCategoryByYear',
			waitMessage: '分析中...',
			data: iData,
			success: function(resData) {
				showTownLandCategoryByYear(resData);
				countLandCategoryFluxByYear(year);
			},
			error: function(err) {
				muiAlertError(err);
			}
		})
	}

	/**
	 * 某一年度征地地类面积流量统计
	 * @param {string} year 年份
	 */
	function countLandCategoryFluxByYear(year) {
		var iData = {
			type: 'flux',
			year: year,
		}
		sendAjax({
			url: 'appCountZdTrendCategoryByYear',
			waitMessage: '分析中...',
			data: iData,
			success: function(resData) {
				showLandCategoryFluxByYear(resData);
			},
			error: function(err) {
				muiAlertError(err);
			}
		})
	}

	/* 控件定义 */
	var CountLineDL_YEAR = undefined;
	var CountBarDL_SSXZ = undefined;
	var CountSankey_DL = undefined;

	/**
	 * 释放图表资源
	 * @param {Object} obj 图表控件
	 */
	function eChartsDispose(obj) {
		if (obj != null && obj != "" && obj != undefined) obj.dispose();
	}

	/**
	 * 展示征地地类面积年度变化趋势
	 * @param {JSON} jsonData 数据集
	 */
	function showLandCategoryByYear(jsonData) {
		var labels = [];
		var datas = [];
		var units = [];
		/* 组装数据 */
		for (var i in jsonData) {
			var dataItem = jsonData[i];
			labels.push(dataItem.groupName);
			for (var idx in dataItem.groupDataList) {
				var dataValue = dataItem.groupDataList[idx];
				var isExists = false;
				for (var dIdx in datas) {
					var data = datas[dIdx];
					if (data.name == dataValue.selCode) {
						data.values.push(dataValue.selName);
						isExists = true;
						break;
					}
				}
				/* 如果不存在则追加 */
				if (!isExists) {
					datas.push({
						name: dataValue.selCode,
						values: [dataValue.selName],
					});
					units.push('公顷');
				}
			}
		}
		var bbsData = {
			labels: labels,
			datas: datas,
			gridLeft: 50,
			gridBottom: 50,
			xrotate: 45,
		}
		/* 展示图表 */
		eChartsDispose(CountLineDL_YEAR)
		CountLineDL_YEAR = new CrCharts({
			domId: 'divCountLineDL_YEAR',
			labelColor: 'rgb(255,255,255)',
			legendTextColor: 'rgb(255,255,255)',
			xAxisLineColor: 'rgba(255,255,255,1.0)',
			yAxisLineColor: 'rgb(133, 215, 253)',
			splitLineColor: 'rgba(255,255,255,0.3)',
			xAxisLabel: {
				color: "rgba(255,255,255,1.0)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
				interval: 0,
			},
			yAxisLabel: {
				color: "rgb(133, 215, 253)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
				interval: 0,
			}
		});
		CountLineDL_YEAR.createLine(bbsData, units);
	}

	/**
	 * 展示某一年度征收土地面积乡镇统计结果
	 * @param {JSON} jsonData 数据集
	 */
	function showTownLandCategoryByYear(jsonData) {
		var labels = [];
		var datas = [];
		var units = [];
		for (var i in jsonData) {
			var dataItem = jsonData[i];
			labels.push(dataItem.groupName);
			for (var idx in dataItem.groupDataList) {
				var dataValue = dataItem.groupDataList[idx];
				var isExists = false;
				for (var dIdx in datas) {
					var data = datas[dIdx];
					if (data.name == dataValue.selCode) {
						data.values.push(dataValue.selName);
						isExists = true;
						break;
					}
				}
				if (!isExists) {
					datas.push({
						name: dataValue.selCode,
						values: [dataValue.selName],
						lblPosition: 'right',
					})
					units.push('公顷');
				}
			}
		}
		eChartsDispose(CountBarDL_SSXZ);
		CountBarDL_SSXZ = new CrCharts({
			domId: 'divCountBarDL_SSXZ',
			labelColor: 'rgb(255,255,255)',
			legendTextColor: 'rgb(255,255,255)',
			xAxisLineColor: 'rgba(255,255,255,1.0)',
			yAxisLineColor: 'rgb(133, 215, 253)',
			splitLineColor: 'rgba(255,255,255,0.3)',
			xAxisLabel: {
				color: "rgba(255,255,255,1.0)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
				interval: 0,
			},
			yAxisLabel: {
				color: "rgb(133, 215, 253)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
				interval: 0,
			},

		});
		CountBarDL_SSXZ.createHorizontalBar({
			labels: labels,
			datas: datas,
			enabledAria: false,
			dataZoomY: true,
			zoomEndValue: 1,
			grid: {
				left: 60,
				top: 30,
				bottom: 40,
				right: 60
			}
		}, units);
	}

	/**
	 * 展示某一年度征地地类面积流量统计
	 * @param {JSON} jsonData 数据集
	 */
	function showLandCategoryFluxByYear(jsonData) {
		var datas = [{
			name: '建设用地',
			value: 0,
			childs: []
		}];
		for (var i in jsonData) {
			var itemData = jsonData[i];
			var childs = [];
			var allValue = 0;
			for (var idx in itemData.groupDataList) {
				var itemChild = itemData.groupDataList[idx];
				datas[0].value += parseFloat(itemChild.selName);
				allValue += parseFloat(itemChild.selName);
				childs.push({
					name: itemChild.selCode,
					value: itemChild.selName,
				});
			}
			datas[0].childs.push({
				name: itemData.groupName,
				value: allValue,
				childs: childs,
			})
		}
		eChartsDispose(CountSankey_DL);
		CountSankey_DL = new CrCharts({
			domId: 'divCountSankey_DL',
		});
		CountSankey_DL.createSankey({
			data: datas,
			labelWidth: 120,
			nodeGap: 15
		}, '公顷');
	}
</script>