ASRS-3D.git - Gitblit

			@@ -26,7 +26,7 @@
			/特效/
			background: rgba(255,255,255,0.3);
			border-radius: 5px;
			color: #f0f8ff;
			color: #ffffff;
			}
			#sidebar h1{
			font-family: Fantasy;
			@@ -34,31 +34,211 @@
			text-indent: 5%;
			}
			#baobiao1{
			width: 400px;
			height: 300px;
			width: 99%;
			height: 260px;
			}
			#baobiao2 {
			width: 99%;
			height: 260px;
			}
			.tablebox {
			height: 25%;
			overflow: hidden;
			position: relative;
			width: 95%;
			margin: 30px auto;
			/background-color: rgba(6,26,103,1);/
			}
			.tbl-header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			}
			.tbl-body {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			}
			.tablebox table {
			width: 100%;
			}
			.tablebox table th,
			.tablebox table td {
			font-size: 12px;
			color: #ffffff;
			line-height: 15px;
			text-align: center;
			}
			.tablebox table tr th {
			background-color: rgba(255,255,255,0.3);
			cursor: pointer;
			}
			.tablebox table tr td {
			background-color: transparent;
			}
			.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
			background-color: rgba(214, 214, 224, 0.5);
			}
			.tablebox table tr td span,
			.tablebox table tr td span {
			font-size: 24px;
			}


			</style>
			<script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
			</head>
			<body style="position: relative">
			<div id="sidebar">
			<h1>中扬-立体仓库</h1>
			<div id="baobiao1"></div>
			<div id="baobiao2"></div>
			<div class="tablebox">

			<div class="tbl-header">
			<table border="0" cellspacing="0" cellpadding="0" >
			<thead>
			<tr>
			<th>排名</th>
			<th>地市</th>
			<th>销售收入(万元)</th>
			<th>同比(%)</th>
			</tr>
			</thead>
			<tbody style="opacity:0;" ></tbody>
			</table>
			</div>

			<div class="tbl-body">
			<table border="0" cellspacing="0" cellpadding="0">
			<thead>
			<tr>
			<th>排名</th>
			<th>地市</th>
			<th>销售收入(万元)</th>
			<th>同比(%)</th>
			</tr>
			</thead>
			<tbody></tbody>
			</table>
			</div>
			</div>
			</div>
			<script type="text/javascript">
			var MyMarhq = '';
			clearInterval(MyMarhq);
			$('.tbl-body tbody').empty();
			$('.tbl-header tbody').empty();
			var Items = [{"Ranking":"1","City":"保定","SaleIncome":"2506734.43","An":"53.00",},
			{"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","An":"65.00",},
			{"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","An":"34.00",},
			{"Ranking":"4","City":"衡水","SaleIncome":"972451.15","An":"15.00",},
			{"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","An":"-57.00",},
			{"Ranking":"6","City":"邢台","SaleIncome":"774274.70","An":"-20.00",},
			{"Ranking":"7","City":"唐山","SaleIncome":"680456.79","An":"-29.00",},
			{"Ranking":"8","City":"张家口","SaleIncome":"613319.87","An":"2.00",},
			{"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","An":"35.00",},
			{"Ranking":"10","City":"承德","SaleIncome":"589048.12","An":"30.00",},
			{"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","An":"-48.00",},
			{"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","An":"128.00",},
			{"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","An":"-24.00",},
			{"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","An":"19.00",},
			{"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","An":"-74.00",},
			{"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","An":"-64.00",}]
			$.each(Items,function (i, item) {
			str = '<tr>'+
			'<td>'+item.Ranking+'</td>'+
			'<td>'+item.City+'</td>'+
			'<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
			'<td>'+(+item.An).toFixed(2)+'</td>'
			// '<td>'+(+item.Mom).toFixed(2)+'</td>'+
			// '<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+
			// '<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+
			'</tr>'

			$('.tbl-body tbody').append(str);
			$('.tbl-header tbody').append(str);
			});
			if(Items.length > 10){
			$('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
			$('.tbl-body').css('top', '0');
			var tblTop = 0;
			var speedhq = 50; // 数值越大越慢
			var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
			function Marqueehq(){
			if(tblTop <= -outerHeight*Items.length){
			tblTop = 0;
			} else {
			tblTop -= 1;
			}
			$('.tbl-body').css('top', tblTop+'px');
			}

			MyMarhq = setInterval(Marqueehq,speedhq);

			// 鼠标移上去取消事件
			$(".tbl-header tbody").hover(function (){
			clearInterval(MyMarhq);
			},function (){
			clearInterval(MyMarhq);
			MyMarhq = setInterval(Marqueehq,speedhq);
			})

			}
			$.each(Items,function (i, item) {
			str = '<tr>'+
			'<td>'+item.Ranking+'</td>'+
			'<td>'+item.City+'</td>'+
			'<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
			'<td>'+(+item.An).toFixed(2)+'</td>'+
			'</tr>'

			$('.tbl-body tbody').append(str);
			$('.tbl-header tbody').append(str);
			});
			if(Items.length > 10){
			$('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
			$('.tbl-body').css('top', '0');
			var tblTop = 0;
			var speedhq = 50; // 数值越大越慢
			var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
			function Marqueehq(){
			if(tblTop <= -outerHeight*Items.length){
			tblTop = 0;
			} else {
			tblTop -= 1;
			}
			$('.tbl-body').css('top', tblTop+'px');
			}

			MyMarhq = setInterval(Marqueehq,speedhq);
			}

			</script>
			<div id="container"></div>
			<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
			<script type="text/javascript">
			var dom = document.getElementById("baobiao1");
			var dom1 = document.getElementById("baobiao1");
			var myChart1 = echarts.init(dom1);
			window.addEventListener('resize',function () {
			myChart1.resize();
			})
			var app1 = {};

			var dom = document.getElementById("baobiao2");
			var myChart = echarts.init(dom);
			window.addEventListener('resize',function () {
			myChart.resize();
			})
			var app = {};

			var option;

			var option1;


			option = {
			option1 = {
			title: {
			text: '年度进/出货量',
			textStyle:{
			@@ -99,16 +279,33 @@
			calculable: true,
			xAxis: [
			{
			color:'#ffffff',
			color:'#975a5a',
			type: 'category',
			axisTick:{
			show:false,
			},
			axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
			interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
			rotate: 0 ,// 横坐标上label的倾斜度
			textStyle: {
			color:'#fff'
			}
			},
			axisLine:{
			lineStyle: {
			color: '#fff',
			// width: 8,
			}},
			// prettier-ignore
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			}
			],
			yAxis: [
			{
			// show:false,
			type: 'value'
			type: 'value',
			offset: -4,
			// interval: 35
			}
			],
			series: [
			@@ -117,7 +314,7 @@
			name: '进货',
			type: 'bar',
			data: [
			2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
			204.5, 65.5, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
			],
			// markPoint: {
			// data: [
			@@ -134,7 +331,7 @@
			name: '出货',
			type: 'bar',
			data: [
			2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
			210, 72.2, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
			],
			// markPoint: {
			// data: [
			@@ -150,12 +347,78 @@

			};

			if (option1 && typeof option1 === 'object') {
			myChart1.setOption(option1);
			}

			let base = +new Date(1988, 9, 3);
			let oneDay = 24 * 3600 * 1000;
			let data = [[base, Math.random() * 300]];
			for (let i = 1; i < 20000; i++) {
			let now = new Date((base += oneDay));
			data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
			}
			option = {
			tooltip: {
			trigger: 'axis',
			position: function (pt) {
			return [pt[0], '10%'];
			}
			},
			title: {
			left: 'left',
			text: '销售件数',
			textStyle:{
			color:'#F8F8FF',
			},
			},
			toolbox: {
			show:false,
			feature: {
			dataZoom: {
			yAxisIndex: 'none'
			},
			restore: {},
			saveAsImage: {}
			}
			},
			xAxis: {
			type: 'time',
			boundaryGap: false
			},
			yAxis: {
			type: 'value',
			boundaryGap: [0, '100%']
			},
			dataZoom: [
			{
			type: 'inside',
			start: 0,
			end: 20
			},
			{
			start: 0,
			end: 20
			}
			],
			series: [
			{
			name: 'Fake Data',
			type: 'line',
			smooth: true,
			symbol: 'none',
			areaStyle: {},
			data: data
			}
			]
			};

			if (option && typeof option === 'object') {
			myChart.setOption(option);
			}


			</script>
			<script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../static/js/common.js"></script>
			<script type="text/javascript" src="../static/js/data/Warehouse.js"></script>
			<script type="text/javascript" src="../static/js/object/Cube.js"></script>