@{
	ViewBag.Title = "DesktopDefault";
	Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="~/lib/echarts/echarts.min.js"></script>
<style>
	body {
		padding: 10px;
		background: #f8f8f8;
	}

	.lr-desktop-panel {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #fff;
		border: 1px solid #ccc;
		padding: 0px 22px;
		border-radius: 2px;
		overflow-y: auto;
	}

	.lr-uitheme-accordion .lr-desktop-panel {
		border-radius: 0px;
	}

	.lr-uitheme-windos .lr-desktop-panel {
		border-radius: 3px;
	}

	.lr-uitheme-default .lr-desktop-panel {
		border-radius: 3px;
	}

	.portal-panel-title {
		padding-top: 10px;
		line-height: 45px;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		color: #4a4a4a;
		font-weight: 300;
		font-size: 14px;
	}

	.portal-panel-content {
		position: relative;
		width: 100%;
		padding: 20px 5px 5px 5px;
	}

	.lr-item-20 {
		position: relative;
		float: left;
		width: 260px;
		padding: 10px;
	}

		.lr-item-20 .task-stat {
			background: #578ebe;
		}

		.lr-item-20:nth-of-type(5n +1) .task-stat {
			background: #578ebe;
		}

		.lr-item-20:nth-of-type(5n +2) .task-stat {
			background: #e35b5a;
		}

		.lr-item-20:nth-of-type(5n +3) .task-stat {
			background: #44b6ae;
		}

		.lr-item-20:nth-of-type(5n +4) .task-stat {
			background: #8775a7;
		}

		.lr-item-20:nth-of-type(5n) .task-stat {
			background: #3598dc;
		}

		.lr-item-20:nth-of-type(5n +1) .more {
			background: #4884b8;
		}

		.lr-item-20:nth-of-type(5n +2) .more {
			background: #e04a49;
		}

		.lr-item-20:nth-of-type(5n +3) .more {
			background: #3ea7a0;
		}

		.lr-item-20:nth-of-type(5n +4) .more {
			background: #7c699f;
		}

		.lr-item-20:nth-of-type(5n) .more {
			background: #258fd7;
		}

	.task-stat {
		position: relative;
		height: 104px;
		width: 100%;
		border-radius: 5px;
		font-family: "Open Sans", sans-serif;
		overflow: hidden;
		color: #FFFFFF;
	}

		.task-stat .visual {
			position: absolute;
			top: 0;
			left: 0;
			padding: 10px 0 0 10px;
		}

			.task-stat .visual > i {
				color: #FFFFFF;
				opacity: 0.4;
				filter: alpha(opacity=10);
				font-size: 60px;
				line-height: 65px;
			}

		.task-stat .details {
			position: absolute;
			right: 10px;
			top: 10px;
		}

			.task-stat .details .number {
				text-align: right;
				font-size: 32px;
				line-height: 36px;
				letter-spacing: -1px;
				margin-bottom: 0px;
				font-weight: 300;
			}

			.task-stat .details .desc {
				text-align: right;
				font-size: 15px;
				padding-top: 5px;
			}

		.task-stat .more {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			clear: both;
			padding: 4px 10px;
			text-transform: uppercase;
			font-weight: 300;
			font-size: 12px;
			opacity: 0.8;
			filter: alpha(opacity=70);
			text-decoration: none;
			color: #FFFFFF;
			cursor: pointer;
		}

			.task-stat .more > i {
				display: inline-block;
				margin-top: 0px;
				float: right;
				font-size: 15px;
				color: #fff;
				opacity: 0.8;
			}

			.task-stat .more:hover {
				text-decoration: none;
				opacity: 0.9;
				filter: alpha(opacity=90);
			}

	.lr-msg-line {
		position: relative;
		width: 100%;
		line-height: 39px;
		border-bottom: 1px solid #ccc;
	}

		.lr-msg-line > a {
			cursor: pointer;
			color: #333;
			font-size: 12px;
		}

		.lr-msg-line > label {
			position: absolute;
			top: 0;
			right: 0;
			margin-bottom: 0px;
			color: #333;
			font-size: 12px;
			font-weight: 400;
		}

	.lr-chart-container {
		position: relative;
		height: 400px;
		width: 100%;
	}

	.portal-panel-title .menu {
		float: right;
		display: flex;
		width: 26px;
		background: transparent;
		justify-content: space-between;
		cursor: pointer;
		margin: 22px 20px 0 0;
	}

		.portal-panel-title .menu .point {
			display: inline-block;
			width: 4px;
			height: 4px;
			border: 1px solid #979797;
			border-radius: 50%;
		}
</style>

<div class="lr-desktop-panel">
	<div class="col-xs-12">
		<div class="portal-panel-title">
			<i class="fa fa-balance-scale"></i>&nbsp;&nbsp;统计指标
		</div>
		<div class="portal-panel-content" id="lr_target">
		</div>
	</div>
	<div id="lr-list" style="        display: none;"></div>
	<div id="lr-chart" style="        display: none;"></div>
</div>
<script>
	var bootstrap = function ($, learun) {
		"use strict";
		var targetMap = {};
		var listMap = {};
		// 统计指标显示
		function target(data) {
			if (data.length > 0) {// 计算每块统计区域宽度
				// 滚动条优化
				$('#lr_target').lrscroll();
				var itemW = 210;
				var allw = 0;

				var w = $('#lr_target').width() - 10;
				var itemW = w / data.length;
				if (itemW < 210) {
					itemW = 210;
				}
				allw = itemW * data.length;
				var $target = $('#lr_target .lr-scroll-box');
				$target.css('width', allw);
				$.each(data, function (_index, _item) {
					targetMap[_item.F_Id] = _item;
					var _html = '\
				<div class="lr-item-20">\
					<div class="task-stat" >\
						<div class="visual">\
							<i class="'+ _item.F_Icon + '"></i>\
						</div>\
						<div class="details">\
							<div class="number" data-value="'+ _item.F_Id + '"></div>\
							<div class="desc">'+ _item.F_Name + '</div>\
						</div>';
					if (_item.F_Url) {
						_html += '<a class="more" data-Id="' + _item.F_Id + '" >\
							查看更多 <i class="fa fa-arrow-circle-right"></i>\
						</a>';
					}
					_html += '</div>\
				</div>';

					$target.append(_html);
					// 向后台请求数据

					top.learun.httpAsync('Post', top.$.rootUrl + '/LR_SystemModule/DataSource/GetDataTableBySql', { code: _item.F_DataSourceId, sql: _item.F_Sql }, function (data) {
						if (data) {
							for (var key in data[0]) {
								$target.find('[data-value="' + _item.F_Id + '"]').text(data[0][key] || "");
							}
						}
					});
				});
				$target.find('.lr-item-20 .more').on('click', function () {
					var Id = $(this).attr('data-Id');
					top.learun.frameTab.open({ F_ModuleId: Id, F_FullName: targetMap[Id].F_Name, F_UrlAddress: targetMap[Id].F_Url });
					return false;
				});
				$target.find('.lr-item-20').css('width', itemW);
				$('#lr_target').resize(function () {
					var w = $('#lr_target').width() - 10;
					var itemW = w / data.length;
					if (itemW < 210) {
						itemW = 210;
					}
					allw = itemW * data.length;
					$target.css('width', allw);
					$target.find('.lr-item-20').css('width', itemW);
				});
			}
		}
		// 消息列表
		function list(data) {
			if (data.length > 0) {
				var $list = $('#lr-list');
				$.each(data, function (_index, _item) {
					listMap[_item.F_Id] = _item;
					var _html = '\
				<div class="col-xs-6" data-Id="'+ _item.F_Id + '">\
					<div class="portal-panel-title">\
						<i class="'+ _item.F_Icon + '"></i>&nbsp;&nbsp;' + _item.F_Name + '\
						<span class="menu" title="更多">\
						<span class="point"></span>\
						<span class="point"></span>\
						<span class="point"></span>\
						</span>\
					</div>\
					<div class="portal-panel-content" style="overflow: hidden; padding-top: 20px; padding-left: 30px; padding-right: 50px;height:225px;" data-value="'+ _item.F_Id + '" >\
					</div>\
				</div>';
					$list.before(_html);

					if (!_item.F_Url) {
						$('[ data-Id="' + _item.F_Id + '"] .menu').hide();
					}

					// 向后台请求数据
					top.learun.httpAsync('Post', top.$.rootUrl + '/LR_SystemModule/DataSource/GetDataTableBySql', { code: _item.F_DataSourceId, sql: _item.F_Sql }, function (data) {
						if (data) {
							var $content = $('[data-value="' + _item.F_Id + '"]');
							$.each(data, function (_index, _item) {
								var _html = '\
							<div class="lr-msg-line">\
								<a href="#" style="text-decoration: none;" >' + _item.f_title + '</a>\
								<label>'+ _item.f_time + '</label>\
							</div>';

								var _$html = $(_html);
								_$html.find('a')[0].item = _item;
								$content.append(_$html);
							});

							$content.find('.lr-msg-line>a').on('click', function () {
								var $p = $(this).parents('.col-xs-6');
								var id = $p.attr('data-Id');
								var item = $(this)[0].item;

								if (listMap[id].F_ItemUrl) {
									top.learun.frameTab.open({ F_ModuleId: 'dtlist' + item.f_id, F_FullName: item.f_title, F_UrlAddress: listMap[id].F_ItemUrl + item.f_id });
								}
								else {
									top['dtlist' + item.f_id] = item;
									top.learun.frameTab.open({ F_ModuleId: 'dtlist' + item.f_id, F_FullName: item.f_title, F_UrlAddress: '/Utility/ListContentIndex?id=' + item.f_id });
								}
								return false;
							});
						}
					});
				});
				$('.portal-panel-title>.menu').on('click', function () {
					var $p = $(this).parents('.col-xs-6');
					var id = $p.attr('data-Id');
					top.learun.frameTab.open({ F_ModuleId: id, F_FullName: listMap[id].F_Name, F_UrlAddress: listMap[id].F_Url });
					return false;
				});
				if (data.length % 2 > 0) {
					$list.find('[data-value="' + data[data.length - 1].F_Id + '"]').css('height', 425);
				}
			}
		}

		var chartMap = {};

		// 图表
		function chart(data) {
			if (data.length > 0) {
				var $chart = $('#lr-chart');
				$.each(data, function (_index, _item) {
					var _html = '\
				<div class="col-xs-'+ (12 / parseInt(_item.F_Proportion1)) + '">\
					<div class="portal-panel-title">\
						<i class="'+ _item.F_Icon + '"></i>&nbsp;&nbsp;' + _item.F_Name + '\
					</div>\
					<div class="portal-panel-content">\
						<div id="'+ _item.F_Id + '" class="lr-chart-container" data-type="' + _item.F_Type + '"   ></div>\
					</div>\
				</div>';

					$chart.before(_html);

					chartMap[_item.F_Id] = echarts.init(document.getElementById(_item.F_Id));

					// 向后台请求数据
					top.learun.httpAsync('Post', top.$.rootUrl + '/LR_SystemModule/DataSource/GetDataTableBySql', { code: _item.F_DataSourceId, sql: _item.F_Sql }, function (data) {
						if (data) {
							var type = $('#' + _item.F_Id).attr('data-type');
							var legendData = [];
							var valueData = [];
							$.each(data, function (_index, _item) {
								legendData.push(_item.name);
								valueData.push(_item.value);
							});

							var option = {};
							switch (type) {
								case '0'://饼图
									option.legend = {
										bottom: 'bottom',
										data: legendData
									};
									option.series = [{
										name: '占比',
										type: 'pie',
										radius: '75%',
										center: ['50%', '50%'],
										label: {
											normal: {
												formatter: '{b}:{c}: ({d}%)',
												textStyle: {
													fontWeight: 'normal',
													fontSize: 12,
													color: '#333'
												}
											}
										},
										data: data,
										itemStyle: {
											emphasis: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
										}
									}];
									option.color = ['#df4d4b', '#304552', '#52bbc8', 'rgb(224,134,105)', '#8dd5b4', '#5eb57d', '#d78d2f'];
									break;
								case '1'://折线图
									option.tooltip = {
										trigger: 'axis'
									};
									option.grid = {
										bottom: '8%',
										containLabel: true
									};
									option.xAxis = {
										type: 'category',
										boundaryGap: false,
										data: legendData
									};
									option.yAxis = {
										type: 'value'
									}
									option.series = [{
										type: 'line',
										data: valueData
									}];

									break;
								case '2'://柱状图
									option.tooltip = {
										trigger: 'axis'
									};
									option.grid = {
										bottom: '8%',
										containLabel: true
									};
									option.xAxis = {
										type: 'category',
										boundaryGap: false,
										data: legendData
									};
									option.yAxis = {
										type: 'value'
									}
									option.series = [{
										type: 'bar',
										data: valueData
									}];
									break;
							}
							chartMap[_item.F_Id].setOption(option);
						}
					});

				});
				window.onresize = function (e) {
					e = e || window.event;
					$.each(chartMap, function (id, obj) {
						obj.resize(e);
					});
				}
			}
		}
		// 获取配置数据
		learun.httpAsync('GET', top.$.rootUrl + '/LR_Desktop/DTTarget/GetList', {}, function (data) {
			target(data || []);
		});
		learun.httpAsync('GET', top.$.rootUrl + '/LR_Desktop/DTList/GetList', {}, function (data) {
			list(data || []);
		});
		learun.httpAsync('GET', top.$.rootUrl + '/LR_Desktop/DTChart/GetList', {}, function (data) {
			chart(data || []);
		});

	}</script>