root
/
f1-jxyh-php-8525


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据分析</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
		<link rel="stylesheet" href="../../demos/css/console2.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md8">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">
								快捷菜单
							</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space10">
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home1" data-title="主页" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-home"></i>
										</div>
										<span class="pear-card-title">主页</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home2" data-title="弹层" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-camera"></i>
										</div>
										<span class="pear-card-title">弹层</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home2" data-title="聊天" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-star"></i>
										</div>
										<span class="pear-card-title">聊天</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home3" data-title="相机" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-camera"></i>
										</div>
										<span class="pear-card-title">相机</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home4" data-title="表单" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-console"></i>
										</div>
										<span class="pear-card-title">表单</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home5" data-title="安全" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-auz"></i>
										</div>
										<span class="pear-card-title">安全</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home6" data-title="公告" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-cart"></i>
										</div>
										<span class="pear-card-title">公告</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="pear-card" data-id="home7" data-title="更多" data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-app"></i>
										</div>
										<span class="pear-card-title">更多</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">
								代办任务
							</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space10">
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">待审评论</div>
											<div class="count pear-text">21</div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">待审帖子</div>
											<div class="count pear-text">32</div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">待审文章</div>
											<div class="count pear-text">14</div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="pear-card2">
											<div class="title">待审用户</div>
											<div class="count pear-text">63</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-body">
								<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
									<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
								</div>
							</div>
						</div>
						<div class="layui-card">
							<div class="layui-card-header">
								使用记录
							</div>
							<div class="layui-card-body">
								<table id="role-table" lay-filter="role-table"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md4">
				<div class="layui-card">
					<div class="layui-card-header">留言板</div>
					<div class="layui-card-body">
						<ul class="pear-card-status">
							<li>
								<p>要不要作为我的家人，搬来我家。</p>
								<span>12月25日 19:92</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>夏天真的来了，尽管它还有些犹豫。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
								<span>5月12日 01:25</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							</li>
							<li>
								<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
								<span>6月11日 15:33</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>一切都在不可避免的走向庸俗。</p>
								<span>2月09日 13:40</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>路上没有灯火的时候，就点亮自己的头颅。</p>
								<span>3月11日 12:30</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							
							<li>
								<p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							</li>
							<li>
								<p>接近，是我对一切的态度，是我对一切态度的距离</p>
								<span>6月11日 15:33</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
							<li>
								<p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
								<span>2月09日 13:40</span>
								<a href="javascript:;" data-id="1" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--</div>-->
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					echarts = layui.echarts,
					table = layui.table,
					carousel = layui.carousel;

				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: '角色名',
							field: 'roleName',
							align: 'center',
							width: 100
						},
						{
							title: 'Key值',
							field: 'roleCode',
							align: 'center'
						},
						{
							title: '描述',
							field: 'details',
							align: 'center'
						},
						{
							title: '是否可用',
							field: 'enable',
							align: 'center',
							templet: '#role-enable'
						}
					]
				]

				table.render({
					elem: '#role-table',
					url: '../../demos/data/role.json',
					page: true,
					cols: cols,
					skin: 'line'
				});


				var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

				$("body").on("click", "[data-url]", function() {
					parent.layui.tab.addTabOnlyByElem("content", {
						id: $(this).attr("data-id"),
						title: $(this).attr("data-title"),
						url: $(this).attr("data-url"),
						close: true
					})
				})


				let bgColor = "#fff";
				let color = [
					"#0090FF",
					"#36CE9E",
					"#FFC005",
					"#FF515A",
					"#8B5CFF",
					"#00CA69"
				];
				let echartData = [{
						name: "1",
						value1: 100,
						value2: 233
					},
					{
						name: "2",
						value1: 138,
						value2: 233
					},
					{
						name: "3",
						value1: 350,
						value2: 200
					},
					{
						name: "4",
						value1: 173,
						value2: 180
					},
					{
						name: "5",
						value1: 180,
						value2: 199
					},
					{
						name: "6",
						value1: 150,
						value2: 233
					},
					{
						name: "7",
						value1: 180,
						value2: 210
					},
					{
						name: "8",
						value1: 230,
						value2: 180
					}
				];

				let xAxisData = echartData.map(v => v.name);
				//  ["1", "2", "3", "4", "5", "6", "7", "8"]
				let yAxisData1 = echartData.map(v => v.value1);
				// [100, 138, 350, 173, 180, 150, 180, 230]
				let yAxisData2 = echartData.map(v => v.value2);
				// [233, 233, 200, 180, 199, 233, 210, 180]
				const hexToRgba = (hex, opacity) => {
					let rgbaColor = "";
					let reg = /^#[\da-f]{6}$/i;
					if (reg.test(hex)) {
						rgbaColor =
							`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
					      "0x" + hex.slice(3, 5)
					    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
					}
					return rgbaColor;
				}

				option = {
					backgroundColor: bgColor,
					color: color,
					legend: {
						right: 10,
						top: 10
					},
					tooltip: {
						trigger: "axis",
						formatter: function(params) {
							let html = '';
							params.forEach(v => {
								console.log(v)
								html +=
									`<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                万元`;
							})


							return html
						},
						extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: '#ffffff',
								shadowColor: 'rgba(225,225,225,1)',
								shadowBlur: 5
							}
						}
					},
					grid: {
						top: 100,
						containLabel: true
					},
					xAxis: [{
						type: "category",
						boundaryGap: false,
						axisLabel: {
							formatter: '{value}月',
							textStyle: {
								color: "#333"
							}
						},
						axisLine: {
							lineStyle: {
								color: "#D9D9D9"
							}
						},
						data: xAxisData
					}],
					yAxis: [{
						type: "value",
						name: '单位：万千瓦时',
						axisLabel: {
							textStyle: {
								color: "#666"
							}
						},
						nameTextStyle: {
							color: "#666",
							fontSize: 12,
							lineHeight: 40
						},
						splitLine: {
							lineStyle: {
								type: "dashed",
								color: "#E9E9E9"
							}
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						}
					}],
					series: [{
						name: "2018",
						type: "line",
						smooth: true,
						// showSymbol: false,/
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[0],
								shadowBlur: 3,
								shadowColor: hexToRgba(color[0], 0.5),
								shadowOffsetY: 8
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: hexToRgba(color[0], 0.3)
										},
										{
											offset: 1,
											color: hexToRgba(color[0], 0.1)
										}
									],
									false
								),
								shadowColor: hexToRgba(color[0], 0.1),
								shadowBlur: 10
							}
						},
						data: yAxisData1
					}, {
						name: "2019",
						type: "line",
						smooth: true,
						// showSymbol: false,
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[1],
								shadowBlur: 3,
								shadowColor: hexToRgba(color[1], 0.5),
								shadowOffsetY: 8
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: hexToRgba(color[1], 0.3)
										},
										{
											offset: 1,
											color: hexToRgba(color[1], 0.1)
										}
									],
									false
								),
								shadowColor: hexToRgba(color[1], 0.1),
								shadowBlur: 10
							}
						},
						data: yAxisData2
					}]
				};

				echartsRecords.setOption(option);

				window.onresize = function() {
					echartsRecords.resize();
				}

			});
		</script>
	</body>
</html>