From 271cc47789e1adb828ffa598f25b3d96838662bf Mon Sep 17 00:00:00 2001
From: YL <YL@LAPTOP-SE03PLUR>
Date: 星期三, 26 五月 2021 08:41:19 +0800
Subject: [PATCH] 叫料看板加下拉框
---
HDLine.html | 1243 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 669 insertions(+), 574 deletions(-)
diff --git a/HDLine.html b/HDLine.html
index eb02228..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>
@@ -137,8 +139,14 @@
#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%;
@@ -262,10 +270,69 @@
.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='509'//娴佹按绾跨紪鐮�
+ var LineCode=''//娴佹按绾跨紪鐮�
var LineCodeList='509'+','+'510'+','+'511'+','+'512'+','+'513'+','+'514';//娴佹按绾跨湅鏉夸粖鏃ュ叏閮ㄦ祦姘寸嚎缂栫爜:浜х嚎1銆佷骇绾�2銆佷骇绾�3銆佷骇绾�4銆佷骇绾�5銆佷骇绾�6
@@ -305,6 +372,7 @@
});
$(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'));
@@ -314,6 +382,7 @@
DataTable();
// 瀹氭椂鍣�
interval = setInterval(function () {
+ LineCode=$(".selectpicker").val();
hours = [];
hoursqty = [];
CloseProgress = 0; //瀹屽伐鐜�
@@ -325,6 +394,7 @@
Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
}, 20000);
setInterval(function () {
+ LineCode=$(".selectpicker").val();
//num+=1;
//$("#tb_order").bootstrapTable('refreshOptions',{offset:num}); // pageNumber:1, 鎸囧畾椤电爜涓虹1椤�
$("#tb_order").bootstrapTable('refresh');
@@ -340,14 +410,14 @@
})
function Chart(mychart1, mychart2, mychart3, mychart4, mychart5) {
- $.ajax({
- url: "http://localhost:53860/api/loaddata/LineData",
- dataType: "JSON",
- async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
- type: "Get",
- data:{"LineCode":LineCode,"LineCodeList":LineCodeList},
- success: function (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));
@@ -383,572 +453,597 @@
$("#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(data.data[4][1].weekqty / data.data[4][0].weekqty).toFixed(2);
- //鏈湀鍒嗘瀽
- Month = parseFloat(data.data[4][3].weekqty / 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() + '...');
+ // }
+ // });
+
}
- },
- },
- 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: false
- },
- 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杞�
- }
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#00c6ff', //鍧愭爣鍊煎緱鍏蜂綋鐨勯鑹�
- fontSize: '16'
- }
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisLine: {
- show: false,
-
- },
- splitLine: { //缃戞牸绾�
- lineStyle: {
- color: '#00c6ff',
+ CloseProgress = parseFloat(data.data[1][1].qty / data.data[1][0].qty).toFixed(2); //瀹屾垚鐜�
- },
- 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 + '%',
- 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 },
- { 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: false
- },
- 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: 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) {
+ //浠婃棩鍏ㄩ儴娴佹按绾夸骇閲忓姣�
+ $.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: "寰蒋闆呴粦"
+ }
+ },
+ ]
+ }
+
+ 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);
+
+ }
+
+ 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');
+ }
+
+ })
+ }
+ //寰楀埌鏌ヨ鐨勫弬鏁�
+ function queryParams(params) {
+ num += 1;
+ var temp = { //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑
+ LineCode:LineCode,
+ limit: params.limit, //椤甸潰澶у皬
+ offset: num, //椤电爜
+ };
+ return temp;
+ }
+ //閫夋嫨浜嬩欢
+ function selectOnchang(obj) {
+ LineCode=obj.options[obj.selectedIndex].value;
+ Chart(mychart1, mychart2, mychart3, mychart4, mychart5)
+ //DataTable();
+ $('#tb_order').bootstrapTable('refresh');
+ }
+ </script>
+ </head>
- },
- onCheck: function (row, $element) {
+ <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>
- },
- onLoadSuccess: function (row) {
- var num_total = (row.total)/ 10
- if (num >= num_total) {
- num = 0
- }
- //var a = $('#tb_order').bootstrapTable('getSelections');
- }
-
- })
- }
- //寰楀埌鏌ヨ鐨勫弬鏁�
- function queryParams(params) {
- num += 1;
- var temp = { //杩欓噷鐨勯敭鐨勫悕瀛楀拰鎺у埗鍣ㄧ殑鍙橀噺鍚嶅繀椤讳竴鐩达紝杩欒竟鏀瑰姩锛屾帶鍒跺櫒涔熼渶瑕佹敼鎴愪竴鏍风殑
- LineCode:LineCode,
- 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
+ </html>
\ No newline at end of file
--
Gitblit v1.9.1