From 970e2e0e5b8210e3127382821ac3bb87fb368344 Mon Sep 17 00:00:00 2001 From: yangle <admin@YINMOU> Date: 星期二, 21 三月 2023 17:17:28 +0800 Subject: [PATCH] 1 --- HDLine.html | 1361 ++++++++++++++++++++++++++++++++-------------------------- 1 files changed, 749 insertions(+), 612 deletions(-) diff --git a/HDLine.html b/HDLine.html index a86aed5..201c50a 100644 --- a/HDLine.html +++ b/HDLine.html @@ -8,11 +8,13 @@ <title>闊╃數娴佹按绾跨湅鏉�</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css"> + <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <script src="js/jquery.min.js"></script> <script src='js/echarts.min.js'></script> <script src="js/bootstrap.min.js"></script> <script src='js/bootstrap-table.min.js'></script> + <script src='js/bootstrap-select.min.js'></script> <script src='js/bootstrap-table-zh-CN.min.js'></script> <script src="js/jquery.SuperSlide.2.1.3.js"></script> <script src='js/template.js'></script> @@ -27,9 +29,9 @@ margin-top: -75px; margin-right: 5px; color: #09d1ea; - + } - + .clock { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size: 20px; @@ -39,16 +41,16 @@ margin-top: -75px; margin-right: 5px; color: #09d1ea; - + } - + .clock #Date { text-align: center; text-shadow: 0 0 0px #00c6ff; - - + + } - + .clock ul { width: 450px; margin: 0 auto; @@ -58,7 +60,7 @@ margin-left: 15px; position: relative; } - + .clock ul li { display: inline; font-size: 24px; @@ -66,14 +68,14 @@ font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow: 0 0 0px #00c6ff; } - + body { padding-left: 50px; padding-right: 50px; } - + .title { - + font-size: 44px; font-family: PingFangSC; font-weight: 500; @@ -82,14 +84,14 @@ background: url(img/img_little_new.png) center no-repeat; margin-bottom: 30px; } - + .col-sm-12 { position: relative; min-height: 1px; padding-right: 0px; padding-left: 0px; } - + .col-sm-8, .col-sm-6, .col-sm-4, @@ -98,7 +100,7 @@ /* border: 1px solid #00c6ff; */ height: 450px; } - + #cTitle { width: 50px; height: 450px; @@ -107,7 +109,7 @@ color: #00c6ff; border: 1px solid #333 } - + .col-sm-12, .col-sm-2, .col-sm-3, @@ -119,7 +121,7 @@ padding-right: 0px; padding-left: 0px; } - + #mychart1, #mychart2, #mychart3, @@ -129,27 +131,33 @@ border: none; height: 450px; } - + #cList { margin: 0% auto; color: #00c6ff; } - + #cList li { margin: 26px auto; + white-space:nowrap; + overflow: hidden; + text-overflow:ellipsis; } - + #cList li span{ + word-wrap: break-word;word-break: break-all;overflow: hidden; + + } #cList0 { height: 450px; width: 3%; /* border: 1px solid #00c6ff; */ float: left; } - + #cList1 { float: left; } - + #cList1 li { float: left; height: 450px; @@ -159,27 +167,27 @@ text-align: center; /*display: flex;*/ } - + #cList1 li span { /*鏂囧瓧灞呬腑*/ display: inline-block; height: 100%; /*鏂囧瓧灞呬腑*/ - + /*鏂囧瓧绔栨帓*/ writing-mode: vertical-lr; /*浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: vertical-rl;*/ writing-mode: tb-lr; /*IE娴忚鍣ㄧ殑浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄� writing-mode: tb-rl锛�*/ } - + #cList2 { height: 450px; width: 97%; /* border: 1px solid #00c6ff; */ float: left; } - + table tr td { text-align: center; vertical-align: middle !important; @@ -191,7 +199,7 @@ font-family: Arial; border: none; } - + .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, @@ -200,16 +208,16 @@ .table>thead:first-child>tr:first-child>th { background-color: #000; color: #3bff72; - + } - + .fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner { font-size: 15px; color: #09d1ea; padding: 20px 0 15px 0; } - + #tb_order tr td { text-align: center; height: 32px; @@ -221,49 +229,114 @@ /* border: 1px solid #464646; */ border: none; } - + .bootstrap-table .table { border-radius: none } - + th { background-color: transparent !important; } - + td { background-color: transparent; } - + tr { background-color: transparent } - + #tb_order tr:nth-child(even) { background: #080c1c; } - + .fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner { text-align: left; } - + .progress { background-color: darkblue; } - + #tb_order tr:nth-child(even) { background: #000000; } - - .pull-right { + + .pull-right,.fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination { display: none; } - + .col-sm-3 { width: 20%; } + .bootstrap-select.form-control:not([class*=col-]) { + width: 220px; + /* float: right; */ + } + .bootstrap-select>.dropdown-toggle.bs-placeholder, + .bootstrap-select>.dropdown-toggle.bs-placeholder:active, + .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, + .bootstrap-select>.dropdown-toggle.bs-placeholder:hover { + border-color: #080E2D!important; + background-color: #000!important; + color: #09d1ea!important; + } + + .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text { + color: #09d1ea!important; + } + + .bootstrap-select.btn-group .dropdown-menu { + background-color: #000!important; + } + + .form-control { + background-color: #000!important; + } + + .form-control:focus { + border-color: #09d1ea!important; + } + + .form-control:hover { + border-color: #000!important; + } + + .btn-default:hover { + border-color: #09d1ea!important; + } + + .bootstrap-select.btn-group .dropdown-menu li a:hover { + background-color:rgba(255, 255, 255, 0.3)!important; + } + + .btn-default { + border-color: #09d1ea!important; + color: #09d1ea!important; + background-color: #000!important; + } + + .bootstrap-select.form-control:hover { + background-color: #000!important; + } + + .btn-default:hover { + background-color: #000!important; + border-color: #09d1ea!important; + color: #09d1ea!important; + } + .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover{ + background-color:rgba(255, 255, 255, 0.3)!important; + } </style> <script type="text/javascript"> + //閰嶇疆鍙傛暟 + var LineCode=''//娴佹按绾跨紪鐮� + var LineCodeList='509'+','+'510'+','+'511'+','+'512'+','+'513'+','+'514';//娴佹按绾跨湅鏉夸粖鏃ュ叏閮ㄦ祦姘寸嚎缂栫爜:浜х嚎1銆佷骇绾�2銆佷骇绾�3銆佷骇绾�4銆佷骇绾�5銆佷骇绾�6 + + + var interval;//璁℃椂鍣� var interval1;//璁℃椂鍣� var num = 0; @@ -288,17 +361,18 @@ var ss = date1.getSeconds(); var dayNames = new Array("鏄熸湡鏃�", "鏄熸湡涓�", "鏄熸湡浜�", "鏄熸湡涓�", "鏄熸湡鍥�", "鏄熸湡浜�", "鏄熸湡鍏�"); var Stamp = new Date(); - - + + $('#Date').html(year + " 骞�" + " " + monthNames[month] + ' ' + day + " 鏃� " + ' ' + dayNames[Stamp.getDay()]); $("#hours").html((hh < 10 ? ("0" + hh) : hh)); $("#min").html((mm < 10 ? ("0" + mm) : mm)); $("#sec").html((ss < 10 ? ("0" + ss) : ss)); - + }, 1000); - + }); $(function () { + LineCode=$(".selectpicker").val(); var mychart1 = echarts.init(document.getElementById('mychart1')); var mychart2 = echarts.init(document.getElementById('mychart2')); var mychart3 = echarts.init(document.getElementById('mychart3')); @@ -308,11 +382,23 @@ DataTable(); // 瀹氭椂鍣� interval = setInterval(function () { + LineCode=$(".selectpicker").val(); + hours = []; + hoursqty = []; + CloseProgress = 0; //瀹屽伐鐜� + LineName = []; //娴佹按绾挎暟缁� + LineOrderQty = []; //娴佹按绾垮綋澶╄鍗曟�讳换鍔℃暟閲忔暟缁� + LineOrderCloseQty = []; //娴佹按绾垮綋澶╄鍗曟�诲畬鎴愭暟閲忔暟缁� + Week = 0; //鏈懆鍒嗘瀽 + Month = 0; //鏈湀鍒嗘瀽 Chart(mychart1, mychart2, mychart3, mychart4, mychart5); - }, 120000); - interval1 = setInterval(function () { - DataTable(); - }, 120000); + }, 20000); + setInterval(function () { + LineCode=$(".selectpicker").val(); + //num+=1; + //$("#tb_order").bootstrapTable('refreshOptions',{offset:num}); // pageNumber:1, 鎸囧畾椤电爜涓虹1椤� + $("#tb_order").bootstrapTable('refresh'); + }, 10000); //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣 window.onresize = function () { myChart1.resize(); @@ -322,19 +408,20 @@ myChart5.resize(); } }) - + function Chart(mychart1, mychart2, mychart3, mychart4, mychart5) { - $.ajax({ - url: "http://localhost:12298/api/loaddata/LineData", - dataType: "JSON", - async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮� - type: "Get", - success: function (data) { - console.log(data); + // $.ajax({ + // url: "http://localhost:53860/api/loaddata/LineData", + // dataType: "JSON", + // async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮� + // type: "Get", + // data:{"LineCode":LineCode,"LineCodeList":LineCodeList}, + // success: function (data) { + var data= {"code":200,"data":[[{"hour":7,"Count":29.0000000000},{"hour":8,"Count":67.0000000000},{"hour":9,"Count":49.0000000000},{"hour":10,"Count":95.0000000000},{"hour":11,"Count":18.0000000000},{"hour":12,"Count":51.0000000000},{"hour":13,"Count":66.0000000000},{"hour":14,"Count":0.0000000000},{"hour":15,"Count":0.0000000000},{"hour":16,"Count":0.0000000000},{"hour":17,"Count":0.0000000000},{"hour":18,"Count":0.0000000000},{"hour":19,"Count":0.0000000000}],[{"qty":25608.0000000000,"FNAME":"","FSPECIFICATION":""},{"qty":5227.0000000000,"FNAME":"","FSPECIFICATION":""},{"qty":15922.0000000000,"FNAME":"","FSPECIFICATION":""},{"qty":375.0000000000,"FNAME":"","FSPECIFICATION":""}],[{"FBILLNO":"SCHBD00004252","FNAME":"鍟嗘爣KEG\\BCD315W\\鑾叞鐏�","FSPECIFICATION":"BCD276WCP\\鑾叞鐏�(GS-0012)\\娣辩伆鑹瞈\闊╃數\\CCC","FSTATUS":"6"}],[{"FNAME":"涓�绾�","qty":30.0000000000,"inqty":0.0000000000},{"FNAME":"浜岀嚎","qty":271.0000000000,"inqty":0.0000000000},{"FNAME":"涓夌嚎","qty":100.0000000000,"inqty":0.0000000000},{"FNAME":"浜旂嚎","qty":8.0000000000,"inqty":0.0000000000},{"FNAME":"鍏嚎","qty":20.0000000000,"inqty":0.0000000000}],[{"weekqty":3828.0000000000},{"weekqty":4063.0000000000},{"weekqty":25226.0000000000},{"weekqty":14099.0000000000}]]} $.each(data.data[0], function (index, val) { hours.push(val.hour + '鐐�'); hoursqty.push(parseFloat(val.Count).toFixed(2)); - + }); if (data.data[1].length > 0) { $("#OrderQty").html(parseFloat(data.data[1][0].qty).toFixed(2)); //鎬昏鍗� @@ -347,566 +434,616 @@ $("#SumDay").html(data.data[1][3].qty.toFixed(2)); //浠婃棩璁㈠崟姹囨�� } if (data.data[2].length > 0) { + if(data.data[2][0].FSTATUS==1){ + $("#LineStus").html("璁″垝"); + }if(data.data[2][0].FSTATUS==2){ + $("#LineStus").html("璁″垝纭"); + }if(data.data[2][0].FSTATUS==3){ + $("#LineStus").html("涓嬭揪"); + }if(data.data[2][0].FSTATUS==4){ + $("#LineStus").html("寮�宸�"); + }if(data.data[2][0].FSTATUS==5){ + $("#LineStus").html("瀹屽伐"); + }if(data.data[2][0].FSTATUS==6){ + $("#LineStus").html("缁撴"); + } + if(data.data[2][0].FSTATUS==7){ + $("#LineStus").html("缁撶畻"); + } $("#OrderWork").html(data.data[2][0].FBILLNO);//褰撳墠璁㈠崟 $("#PartName").html(data.data[2][0].FNAME); //褰撳墠鐗╂枡鍚嶇О $("#PartSpec").html(data.data[2][0].FSPECIFICATION);//褰撳墠鐗╂枡瑙勬牸 - - } - CloseProgress = parseFloat(data.data[1][1].qty / data.data[1][0].qty).toFixed(2); //瀹屾垚鐜� - - //浠婃棩鍏ㄩ儴娴佹按绾夸骇閲忓姣� - $.each(data.data[3], function (index, val) { - LineName.push(val.FNAME); - LineOrderQty.push(parseFloat(val.qty).toFixed(2)); - LineOrderCloseQty.push(parseFloat(val.inqty).toFixed(2)); - - }); - - //鏈懆鍒嗘瀽 - Week = parseFloat(25000 / data.data[4][0].weekqty).toFixed(2); - //鏈湀鍒嗘瀽 - Month = parseFloat(20000 / data.data[4][2].weekqty).toFixed(2); - }, - error: function (data) { - - } - }) - - - option1 = { - tooltip: { - trigger: 'item', - formatter: "{a} <br/>{b}鏈� : {c}涓�" - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: hours, //鏃堕棿鐐规暟鎹� - axisLine: { - show: true, - lineStyle: { - color: '#00c6ff', - }, - }, - axisTick: { - show: true, - }, - axisLabel: { - textStyle: { - color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� - fontSize: '16' - } - } - }, - yAxis: [{ - type: 'value', - axisLine: { - show: true, - lineStyle: { - color: '#00c6ff', - width: 0, //闅愯棌y杞� - } - }, - splitLine: { //缃戞牸绾� - lineStyle: { - type: 'dotted', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎 - }, - show: false //闅愯棌鎴栨樉绀� - }, - axisTick: { - show: false, - }, - axisLabel: { - textStyle: { - color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� - fontSize: '16' - } - }, - splitNumber: 5 - }], - title: { - show: true, - text: '鐢熶骇鏁堢巼鍒嗘瀽', - x: 'left', - textStyle: { - color: '#00c6ff', - fontSize: 18, - fotweight: 'normal', - fontFamily: "寰蒋闆呴粦" - } - }, - legend: { - icon: 'line', - data: ['灏忔椂浜ц兘'], - textStyle: { - color: '#00c6ff', - fontSize: 20, - fontFamily: "寰蒋闆呴粦" - } - }, - series: [ - { - name: '灏忔椂浜ц兘', - data: hoursqty, //鏃堕棿鐐瑰�� - type: 'line', - smooth: true, - itemStyle: { - normal: { - color: 'orange', - lineStyle: { - width: 4, //璁剧疆绾挎潯绮楃粏 - shadowColor: 'rgba(255, 94, 91,.1)', - shadowOffsetX: 3, - shadowOffsetY: 5, + // $("#PartName").each(function() { + // var maxwidth =36;//鏄剧ず澶氬皯瀛楃 + // if ($(this).text().length > maxwidth) { + // $(this).text($(this).text().substring(0, maxwidth)); + // $(this).html($(this).html() + '...'); + // } + // }); + + } + CloseProgress = parseFloat(data.data[1][1].qty / data.data[1][0].qty).toFixed(2); //瀹屾垚鐜� + + + //浠婃棩鍏ㄩ儴娴佹按绾夸骇閲忓姣� + $.each(data.data[3], function (index, val) { + LineName.push(val.FNAME); + LineOrderQty.push(parseFloat(val.qty).toFixed(2)); + LineOrderCloseQty.push(parseFloat(val.inqty).toFixed(2)); + + }); + + //鏈懆鍒嗘瀽 + Week = parseFloat(data.data[4][1].weekqty / data.data[4][0].weekqty).toFixed(2); + console.log(Week); + //鏈湀鍒嗘瀽 + Month = parseFloat(data.data[4][3].weekqty / data.data[4][2].weekqty).toFixed(2); + console.log(Month); + // }, + // error: function (data) { + + // } + // }) + + + option1 = { + tooltip: { + trigger: 'item', + formatter: "{a} <br/>{b}鏈� : {c}涓�" + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: hours, //鏃堕棿鐐规暟鎹� + axisLine: { + show: true, + lineStyle: { + color: '#00c6ff', + }, + }, + axisTick: { + show: true, + }, + axisLabel: { + textStyle: { + color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� + fontSize: '16' + } + } + }, + yAxis: [{ + type: 'value', + axisLine: { + show: true, + lineStyle: { + color: '#00c6ff', + width: 0, //闅愯棌y杞� + } + }, + splitLine: { //缃戞牸绾� + lineStyle: { + type: 'dotted', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎 + }, + show: false //闅愯棌鎴栨樉绀� + }, + axisTick: { + show: false, + }, + axisLabel: { + textStyle: { + color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� + fontSize: '16' + } + }, + splitNumber: 5 + }], + title: { + show: true, + text: '鐢熶骇鏁堢巼鍒嗘瀽', + x: 'left', + textStyle: { + color: '#00c6ff', + fontSize: 18, + fotweight: 'normal', + fontFamily: "寰蒋闆呴粦" + } + }, + legend: { + icon: 'line', + data: ['灏忔椂浜ц兘'], + textStyle: { + color: '#00c6ff', + fontSize: 20, + fontFamily: "寰蒋闆呴粦" + } + }, + series: [ + { + name: '灏忔椂浜ц兘', + data: hoursqty, //鏃堕棿鐐瑰�� + type: 'line', + smooth: true, + itemStyle: { + normal: { + color: 'orange', + lineStyle: { + width: 4, //璁剧疆绾挎潯绮楃粏 + shadowColor: 'rgba(255, 94, 91,.1)', + shadowOffsetX: 3, + shadowOffsetY: 5, + } + }, + }, + textStyle: { + fontFamily: "寰蒋闆呴粦" + } + }, + ] } - }, - }, - textStyle: { - fontFamily: "寰蒋闆呴粦" - } - }, - ] - } - - const colorList = ['#47A2FF ', '#FBD444'] - - option2 = { - title: { - text: '鎬诲畬宸ョ巼', - subtext: CloseProgress * 100 + '%', - textStyle: { - fontSize: 20, - color: '#00c6ff', - lineHeight: 20, - fontFamily: "寰蒋闆呴粦" - }, - subtextStyle: { - fontSize: 18, - color: '#00c6ff' - }, - textAlign: 'center', - left: '50%', - top: '70%' - }, - tooltip: { - trigger: 'item', - }, - legend: { - type: 'scroll', - icon: 'pin', - show: false - }, - color: colorList, - series: [ - { - name: '鍗犳瘮', - type: 'pie', - radius: [50, 80], - center: ['50%', '50%'], - label: { - show: false - }, - labelLine: { - show: true - }, - itemStyle: { - borderWidth: 3, - borderColor: '#000000' - }, - data: [ - { name: '鎬诲畬宸ョ巼', value: CloseProgress }, - { name: '鏈畬宸ョ巼', value: 1 - CloseProgress } - ], - } - ] - }; - - option3 = { - title: { - text: '浠婃棩鍏ㄩ儴娴佹按绾夸骇閲忓姣�', - left: '0', - top: 2, - textStyle: { - fontSize: 20, - color: '#00c6ff', - fontFamily: "寰蒋闆呴粦" - }, - }, - color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'], - tooltip: { - - }, - grid: { - left: '3%', - right: '4%', - bottom: '10%', - containLabel: true - }, - legend: { - left: 'right', - data: ['浠诲姟鏁�', '瀹屾垚鏁�'], - textStyle: { - color: '#00c6ff', - fontSize: 16, - fontFamily: "寰蒋闆呴粦" - } - - }, - xAxis: [ - { - type: 'category', - data: LineName, - axisTick: { - alignWithLabel: true - }, - - axisLine: { - show: true, - lineStyle: { - color: '#00c6ff', - type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎 - width: 1, //闅愯棌y杞� + + const colorList = ['#47A2FF ', '#FBD444'] + + option2 = { + title: { + text: '鎬诲畬宸ョ巼', + subtext: (CloseProgress * 100).toFixed(0) + '%', + textStyle: { + fontSize: 20, + color: '#00c6ff', + lineHeight: 20, + fontFamily: "寰蒋闆呴粦" + }, + subtextStyle: { + fontSize: 18, + color: '#00c6ff' + }, + textAlign: 'center', + left: '50%', + top: '70%' + }, + tooltip: { + trigger: 'item', + }, + legend: { + type: 'scroll', + icon: 'pin', + show: false + }, + color: colorList, + series: [ + { + name: '鍗犳瘮', + type: 'pie', + radius: [50, 80], + center: ['50%', '50%'], + label: { + show: false + }, + labelLine: { + show: false + }, + itemStyle: { + borderWidth: 3, + borderColor: '#000000' + }, + data: [ + { name: '鎬诲畬宸ョ巼', value: CloseProgress >1?1:CloseProgress}, + { name: '鏈畬宸ョ巼', value: CloseProgress>1?0:1-CloseProgress } + ], + } + ] + }; + + option3 = { + title: { + text: '浠婃棩鍏ㄩ儴娴佹按绾夸骇閲忓姣�', + left: '0', + top: 2, + textStyle: { + fontSize: 20, + color: '#00c6ff', + fontFamily: "寰蒋闆呴粦" + }, + }, + color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'], + tooltip: { + + }, + grid: { + left: '3%', + right: '4%', + bottom: '10%', + containLabel: true + }, + legend: { + left: 'right', + data: ['浠诲姟鏁�', '瀹屾垚鏁�'], + textStyle: { + color: '#00c6ff', + fontSize: 16, + fontFamily: "寰蒋闆呴粦" + } + + }, + xAxis: [ + { + type: 'category', + data: LineName, + axisTick: { + alignWithLabel: true + }, + + axisLine: { + show: true, + lineStyle: { + color: '#00c6ff', + type: 'solid', //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎 + width: 1, //闅愯棌y杞� + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� + fontSize: '16' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false, + + }, + splitLine: { //缃戞牸绾� + lineStyle: { + color: '#00c6ff', + + }, + show: true //闅愯棌鎴栨樉绀� + }, + axisLabel: { + textStyle: { + color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� + fontSize: '16' + } + } + } + ], + series: [ + { + name: '浠诲姟鏁�', + type: 'bar', + data: LineOrderQty + }, + { + name: '瀹屾垚鏁�', + type: 'bar', + data: LineOrderCloseQty + } + ] + }; + + option4 = { + title: [ + { + text: '杈炬垚鐜�', + subtext: (Week * 100).toFixed(0) + '%', + textStyle: { + fontSize: 16, + color: '#999', + lineHeight: 20 + }, + subtextStyle: { + fontSize: 28, + color: '#00c6ff' + }, + textAlign: 'center', + left: '50%', + top: '70%' + }, + { + show: true, + text: '鏈懆鍒嗘瀽', + textStyle: { + color: '#00c6ff', + fontSize: '16', + }, + textAlign: 'center', + left: '50%', + top: '5%' + } + ], + tooltip: { + trigger: 'item', + }, + legend: { + type: 'scroll', + icon: 'pin', + show: false + }, + color: colorList, + series: [ + { + name: '濮撳悕', + type: 'pie', + radius: [50, 80], + center: ['50%', '50%'], + label: { + show: false + }, + labelLine: { + show: false + }, + itemStyle: { + borderWidth: 3, + borderColor: '#000000' + }, + data: [ + { name: '杈炬垚鐜�', value: Week>1?1:Week }, + { name: '鏈揪鎴愮巼', value: Week>1?0:1-Week } + ], + } + ] + }; + + option5 = { + title: [ + { + text: '杈炬垚鐜�', + subtext: (Month * 100).toFixed(0) + '%', + textStyle: { + fontSize: 16, + color: '#999', + lineHeight: 20 + }, + subtextStyle: { + fontSize: 28, + color: '#00c6ff' + }, + textAlign: 'center', + left: '50%', + top: '70%' + }, + { + show: true, + text: '鏈湀鍒嗘瀽', + textStyle: { + color: '#00c6ff', + fontSize: '16', + }, + textAlign: 'center', + left: '50%', + top: '5%' + } + ], + tooltip: { + trigger: 'item', + }, + legend: { + type: 'scroll', + icon: 'pin', + show: false + }, + color: colorList, + series: [ + { + name: '濮撳悕', + type: 'pie', + radius: [50, 80], + center: ['50%', '50%'], + label: { + show: false + }, + labelLine: { + show: false + }, + itemStyle: { + borderWidth: 3, + borderColor: '#000000' + }, + data: [ + { name: '杈炬垚鐜�', value: Month>1?1:Month}, + { name: '鏈揪鎴愮巼', value: Month>1?0:1-WeeMonthk} + ], + } + ] + }; + + + mychart1.setOption(option1); + mychart2.setOption(option2); + mychart3.setOption(option3); + mychart4.setOption(option4); + mychart5.setOption(option5); + } - }, - axisLabel: { - show: true, - textStyle: { - color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� - fontSize: '16' + + function DataTable() { + $('#tb_order').bootstrapTable({ + url: 'http://localhost:12298/api/loaddata/LineTableData', + //data: dataJson, + method: 'get', //璇锋眰鏂瑰紡锛�*锛� + dataType: "json", + queryParams :queryParams, + striped: false, //鏄惁鏄剧ず琛岄棿闅旇壊 + cache: false, //鏄惁浣跨敤缂撳瓨锛岄粯璁や负true锛屾墍浠ヤ竴鑸儏鍐典笅闇�瑕佽缃竴涓嬭繖涓睘鎬э紙*锛� + pagination: true, //鏄惁鏄剧ず鍒嗛〉锛�*锛� + sortable: false, //鏄惁鍚敤鎺掑簭 + sortable: false, //鏄惁鍚敤鎺掑簭 + search: false, //鏄惁鍚敤鎼滅储妗� + sidePagination: "server", //鍒嗛〉鏂瑰紡锛歝lient瀹㈡埛绔垎椤碉紝server鏈嶅姟绔垎椤碉紙*锛� + pageNumber: 1, //鍒濆鍖栧姞杞界涓�椤碉紝榛樿绗竴椤� + pageSize: 10, //姣忛〉鐨勮褰曡鏁帮紙*锛� + pageList: [10], //鍙緵閫夋嫨鐨勬瘡椤电殑琛屾暟锛�*锛� + strictSearch: false, //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱� + clickToSelect: true, //鏄惁鍚敤鐐瑰嚮閫変腑琛� + singleSelect: true, //璁剧疆True 灏嗙姝㈠閫� + uniqueId: "ID", //姣忎竴琛岀殑鍞竴鏍囪瘑锛屼竴鑸负涓婚敭鍒� + cardView: false, //鏄惁鏄剧ず璇︾粏瑙嗗浘 + detailView: false, //鏄惁鏄剧ず鐖跺瓙琛� + + columns: [ + { field: 'FBILLNO', title: '鐢熶骇璁㈠崟鍙�', align: "left" }, + { field: 'FNUMBER', title: '浜у搧缂栫爜', align: "left" }, + { field: 'FNAME', title: '浜у搧鍚嶇О', align: "left" }, + { + field: 'FQTY', title: '浠诲姟鏁伴噺', align: "left", width: 100, formatter: function (value, row, index) { + return parseFloat(value).toFixed(2); + } + }, + { + field: 'FRepQuaAuxQty', title: '瀹屾垚鏁伴噺', align: "left", width: 100, formatter: function (value, row, index) { + return parseFloat(value).toFixed(2); + } + }, + { + field: 'FSTOCKINQUAAUXQTY', title: '鍏ュ簱鏁伴噺', align: "left", width: 100, formatter: function (value, row, index) { + return parseFloat(value).toFixed(2); + } + }, + { + field: 'FSTATUS', title: '鐘舵��', align: "left", width: 100, formatter: function (value, row, index) { + switch (value) { + case '1': + "璁″垝"; + break; + case '2': + "璁″垝纭"; + break; + case '3': + "涓嬭揪"; + break; + case '4': + "寮�宸�"; + break; + case '5': + "瀹屽伐"; + break; + case '6': + "缁撴"; + break; + case '7': + "缁撶畻"; + default: + + } + } + }, + { + field: 'Progress', title: '杩涘害', align: "left", formatter: function (value, row, index) { + var res = 100 * row.FRepQuaAuxQty / row.FQTY; + //return ["<div class='progress'> <div class='progress-bar' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%'>" + res.toFixed(2) + "</div> </div>"]; + return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>"; + } + } + ], + onClickRow: function (row, $element) { + + }, + onCheck: function (row, $element) { + + }, + onLoadSuccess: function (row) { + var num_total = (row.total)/ 10 + if (num >= num_total) { + num = 0 + } + //var a = $('#tb_order').bootstrapTable('getSelections'); + } + + }) } - } - } - ], - yAxis: [ - { - type: 'value', - axisLine: { - show: false, - - }, - splitLine: { //缃戞牸绾� - lineStyle: { - color: '#00c6ff', - - }, - show: true //闅愯棌鎴栨樉绀� - }, - axisLabel: { - textStyle: { - color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹� - fontSize: '16' + //寰楀埌鏌ヨ鐨勫弬鏁� + function queryParams(params) { + num += 1; + var temp = { //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑 + LineCode:LineCode, + limit: params.limit, //椤甸潰澶у皬 + offset: num, //椤电爜 + }; + return temp; } - } - } - ], - series: [ - { - name: '浠诲姟鏁�', - type: 'bar', - data: LineOrderQty - }, - { - name: '瀹屾垚鏁�', - type: 'bar', - data: LineOrderCloseQty - } - ] - }; - - option4 = { - title: [ - { - text: '杈炬垚鐜�', - subtext: Week * 100 + '%', - textStyle: { - fontSize: 16, - color: '#999', - lineHeight: 20 - }, - subtextStyle: { - fontSize: 28, - color: '#00c6ff' - }, - textAlign: 'center', - left: '50%', - top: '70%' - }, - { - show: true, - text: '鏈懆鍒嗘瀽', - textStyle: { - color: '#00c6ff', - fontSize: '16', - }, - textAlign: 'center', - left: '50%', - top: '5%' - } - ], - tooltip: { - trigger: 'item', - }, - legend: { - type: 'scroll', - icon: 'pin', - show: false - }, - color: colorList, - series: [ - { - name: '濮撳悕', - type: 'pie', - radius: [50, 80], - center: ['50%', '50%'], - label: { - show: false - }, - labelLine: { - show: true - }, - itemStyle: { - borderWidth: 3, - borderColor: '#000000' - }, - data: [ - { name: '杈炬垚鐜�', value: Week }, - { name: '鏈揪鎴愮巼', value: 1 - Week } - ], - } - ] - }; - - option5 = { - title: [ - { - text: '杈炬垚鐜�', - subtext: Month * 100 + '%', - textStyle: { - fontSize: 16, - color: '#999', - lineHeight: 20 - }, - subtextStyle: { - fontSize: 28, - color: '#00c6ff' - }, - textAlign: 'center', - left: '50%', - top: '70%' - }, - { - show: true, - text: '鏈湀鍒嗘瀽', - textStyle: { - color: '#00c6ff', - fontSize: '16', - }, - textAlign: 'center', - left: '50%', - top: '5%' - } - ], - tooltip: { - trigger: 'item', - }, - legend: { - type: 'scroll', - icon: 'pin', - show: false - }, - color: colorList, - series: [ - { - name: '濮撳悕', - type: 'pie', - radius: [50, 80], - center: ['50%', '50%'], - label: { - show: false - }, - labelLine: { - show: true - }, - itemStyle: { - borderWidth: 3, - borderColor: '#000000' - }, - data: [ - { name: '杈炬垚鐜�', value: Month }, - { name: '鏈揪鎴愮巼', value: 1 - Month } - ], - } - ] - }; - - - mychart1.setOption(option1); - mychart2.setOption(option2); - mychart3.setOption(option3); - mychart4.setOption(option4); - mychart5.setOption(option5); - - } - - function DataTable() { - $('#tb_order').bootstrapTable({ - url: 'http://localhost:12298/api/loaddata/LineTableData', - //data: dataJson, - method: 'get', //璇锋眰鏂瑰紡锛�*锛� - dataType: "json", - queryParams: queryParams,//浼犻�掑弬鏁帮紙*锛� - striped: false, //鏄惁鏄剧ず琛岄棿闅旇壊 - cache: false, //鏄惁浣跨敤缂撳瓨锛岄粯璁や负true锛屾墍浠ヤ竴鑸儏鍐典笅闇�瑕佽缃竴涓嬭繖涓睘鎬э紙*锛� - pagination: true, //鏄惁鏄剧ず鍒嗛〉锛�*锛� - sortable: false, //鏄惁鍚敤鎺掑簭 - sortable: false, //鏄惁鍚敤鎺掑簭 - search: false, //鏄惁鍚敤鎼滅储妗� - sidePagination: "server", //鍒嗛〉鏂瑰紡锛歝lient瀹㈡埛绔垎椤碉紝server鏈嶅姟绔垎椤碉紙*锛� - pageNumber: 1, //鍒濆鍖栧姞杞界涓�椤碉紝榛樿绗竴椤� - pageSize: 8, //姣忛〉鐨勮褰曡鏁帮紙*锛� - pageList: [8], //鍙緵閫夋嫨鐨勬瘡椤电殑琛屾暟锛�*锛� - strictSearch: false, //璁剧疆涓� true鍚敤 鍏ㄥ尮閰嶆悳绱紝鍚﹀垯涓烘ā绯婃悳绱� - clickToSelect: true, //鏄惁鍚敤鐐瑰嚮閫変腑琛� - singleSelect: true, //璁剧疆True 灏嗙姝㈠閫� - uniqueId: "ID", //姣忎竴琛岀殑鍞竴鏍囪瘑锛屼竴鑸负涓婚敭鍒� - cardView: false, //鏄惁鏄剧ず璇︾粏瑙嗗浘 - detailView: false, //鏄惁鏄剧ず鐖跺瓙琛� - - columns: [ - { field: 'FBILLNO', title: '鐢熶骇璁㈠崟鍙�', align: "left" }, - { field: 'FNUMBER', title: '浜у搧缂栫爜', align: "left" }, - { field: 'FNAME', title: '浜у搧鍚嶇О', align: "left" }, - { - field: 'FQTY', title: '浠诲姟鏁伴噺', align: "left", width: 100, formatter: function (value, row, index) { - return parseFloat(value).toFixed(2); - } - }, - { - field: 'FRepQuaAuxQty', title: '瀹屾垚鏁伴噺', align: "left", width: 100, formatter: function (value, row, index) { - return parseFloat(value).toFixed(2); - } - }, - { - field: 'FSTOCKINQUAAUXQTY', title: '鍏ュ簱鏁伴噺', align: "left", width: 100, formatter: function (value, row, index) { - return parseFloat(value).toFixed(2); - } - }, - { - field: 'FSTATUS', title: '鐘舵��', align: "left", width: 100, formatter: function (value, row, index) { - switch (value) { - case '1': - return "璁″垝"; - break; - case '2': - return "璁″垝纭"; - break; - case '3': - return "涓嬭揪"; - break; - case '4': - return "寮�宸�"; - break; - case '5': - return "瀹屽伐"; - break; - case '6': - return "缁撴"; - default: - + //閫夋嫨浜嬩欢 + function selectOnchang(obj) { + LineCode=obj.options[obj.selectedIndex].value; + Chart(mychart1, mychart2, mychart3, mychart4, mychart5) + //DataTable(); + $('#tb_order').bootstrapTable('refresh'); } - } - }, - { - field: 'Progress', title: '杩涘害', align: "left", formatter: function (value, row, index) { - var res = 100 * row.FRepQuaAuxQty / row.FQTY; - //return ["<div class='progress'> <div class='progress-bar' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%'>" + res.toFixed(2) + "</div> </div>"]; - return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>"; - } - } - ], - onClickRow: function (row, $element) { - - }, - onCheck: function (row, $element) { - - }, - onLoadSuccess: function (row) { - var a = $('#tb_order').bootstrapTable('getSelections'); - } - - }) - } - //寰楀埌鏌ヨ鐨勫弬鏁� - function queryParams(params) { - num += 1; - var temp = { //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑 - limit: params.limit, //椤甸潰澶у皬 - offset: num, //椤电爜 - }; - return temp; - } - </script> -</head> - -<body> - <div class='title'>闊╃數娴佹按绾跨湅鏉�</div> - <div class="clock0">1#娴佹按绾�</div> - <div class="clock"> - <ul> - <li id="Date"></li> - <li id="hours"> </li> - <li id="point">:</li> - <li id="min"> </li> - <li id="point">:</li> - <li id="sec"> </li> - </ul> - - </div> - <div class="col-sm-8"> - <div class="col-sm-7"> - <div id="mychart1"></div> - </div> - <div class="col-sm-3"> - <ul id="cList"> - <li>鏈嚎鐘舵�侊細<span id="LineStus">鎵ц涓�</span></li> - <li>鎬昏鍗曪細<span id="OrderQty">0</span></li> - <li>宸插叆搴擄細<span id="OrderInQty">0</span></li> - <li>杩斿伐鏁帮細<span id="FGQty">0</span></li> - <li>缈诲寘鐜囷細<span id="FBprogress">0%</span></li> - <li>褰撳墠璁㈠崟锛�<span id="OrderWork"></span></li> - <li>褰撳墠鐗╂枡鍚嶇О锛�<span id="PartName"></span></li> - <li>褰撳墠瑙勬牸锛�<span id="PartSpec"></span></li> - <li>浠婃棩鎬绘眹鎶ワ細<span id="SumDay">0</span></li> - - - - </ul> - </div> - <div class="col-sm-2"> - <div id="mychart2"></div> - </div> - </div> - <div class="col-sm-4"> - <div id="mychart3"></div> - </div> - <div class="col-sm-8"> - <div id="cList0"> - <ul id="cList1"> - <li><span>鏈嚎褰撴棩鍏ㄩ儴璁㈠崟</span></li> - </ul> - </div> - <div id="cList2"> - <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table> - </div> - </div> - <div class="col-sm-4"> - <div class="col-sm-6"> - <div id="mychart4"></div> - </div> - <div class="col-sm-6"> - <div id="mychart5"></div> - </div> - </div> -</body> - -</html> \ No newline at end of file + </script> + </head> + + <body> + <div class='title'>闊╃數娴佹按绾跨湅鏉�</div> + <div class="clock0"> + <select class="selectpicker show-tick form-control" data-live-search="true" title="鎼滅储鎴栭�夋嫨娴佹按绾�" style="float: left;" onchange="selectOnchang(this)"> + <option value='509' selected="selected">1#娴佹按绾�</option> + <option value='510'>2#娴佹按绾�</option> + <option value='511'>3#娴佹按绾�</option> + <option value='512'>4#娴佹按绾�</option> + <option value='513'>5#娴佹按绾�</option> + <option value='514'>6#娴佹按绾�</option> + </select> + </div> + <div class="clock"> + <ul> + <li id="Date"></li> + <li id="hours"> </li> + <li id="point">:</li> + <li id="min"> </li> + <li id="point">:</li> + <li id="sec"> </li> + </ul> + + </div> + <div class="col-sm-8"> + <div class="col-sm-7"> + <div id="mychart1"></div> + </div> + <div class="col-sm-3"> + <ul id="cList"> + <li><span>鏈嚎鐘舵�侊細</span><span id="LineStus"></span></li> + <li><span>鎬昏鍗曪細</span><span id="OrderQty">0</span></li> + <li><span>宸插畬宸ワ細</span><span id="OrderInQty">0</span></li> + <li><span>杩斿伐鏁帮細</span><span id="FGQty">0</span></li> + <li><span>缈诲寘鐜囷細</span><span id="FBprogress">0%</span></li> + <li><span>褰撳墠璁㈠崟锛�</span><span id="OrderWork"></span></li> + <li><span>褰撳墠鐗╂枡鍚嶇О锛�</span><span id="PartName"></span></li> + <li><span>褰撳墠瑙勬牸锛�</span><span id="PartSpec"></span></li> + <li><span>浠婃棩鎬绘眹鎶ワ細</span><span id="SumDay">0</span></li> + + + + </ul> + </div> + <div class="col-sm-2"> + <div id="mychart2"></div> + </div> + </div> + <div class="col-sm-4"> + <div id="mychart3"></div> + </div> + <div class="col-sm-8"> + <div id="cList0"> + <ul id="cList1"> + <li><span>鏈嚎褰撴棩鍏ㄩ儴璁㈠崟</span></li> + </ul> + </div> + <div id="cList2"> + <table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table> + </div> + </div> + <div class="col-sm-4"> + <div class="col-sm-6"> + <div id="mychart4"></div> + </div> + <div class="col-sm-6"> + <div id="mychart5"></div> + </div> + </div> + </body> + + </html> \ No newline at end of file -- Gitblit v1.9.1