From a8fd706ff4f0ad0c2fb565bb45b61c9b83c9cdd2 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期五, 10 十二月 2021 11:12:38 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
views/index.html | 318 ++++++++++++++++++++++++++++++++++++++++++++++++++---
static/js/object/baobiao1.html | 10 +
2 files changed, 310 insertions(+), 18 deletions(-)
diff --git a/static/js/object/baobiao1.html b/static/js/object/baobiao1.html
new file mode 100644
index 0000000..566549b
--- /dev/null
+++ b/static/js/object/baobiao1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
index 9685af0..ca60737 100644
--- a/views/index.html
+++ b/views/index.html
@@ -6,8 +6,10 @@
<meta name="generator" content="Three.js Editor">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
+
body {
font-family: sans-serif;
+ /*font-weight: bold;*/
font-size: 11px;
background-color: #000;
margin: 0;
@@ -26,39 +28,236 @@
/*鐗规晥*/
background: rgba(255,255,255,0.3);
border-radius: 5px;
- color: #f0f8ff;
+ color: #ffffff;
}
- #sidebar h1{
- font-family: Fantasy;
- font-size: 36px;
- text-indent: 5%;
+ #sidebar p1{
+ height: 24px;
+ font-family: FZChaoCuHei-M10S;
+ font-weight: bold;
+ font-size: 24px;
+ text-indent: 2.5%;
+ letter-spacing:1px;
+ line-height: 25px;
+ margin-top: 15px;
+ margin-left: 2.5%;
}
+ #sidebar p2{
+ height: 10px;
+ font-family: FZChaoCuHei-M10S;
+ font-weight: bold;
+ text-indent: 2.5%;
+ letter-spacing:2px;
+ line-height: 8px;
+ }
+
#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>
+<!-- <h1>涓壃-绔嬩綋浠撳簱</h1>-->
+ <p1>骞垮窞甯�-骞垮窞濉斿晢鍦�</p1>
+ <p2>ZhongYang Automated warehouse</p2>
<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 +298,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 +333,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 +350,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 +366,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>
--
Gitblit v1.9.1