warehouse_chart.html 69 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="keywords" content="dongke,mes,ibossmes">
  6. <meta name="description" content="制造企业生产过程执行管理系统">
  7. <meta name="author" content="xuwei">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9. <title>东科软件</title>
  10. <script src="/plugins/xeasyui/xeasyui.min.js"></script>
  11. <script src="/plugins/chartjs/chart.min.js"></script>
  12. <script src="/plugins/chartjs/utils.js"></script>
  13. <script src="/plugins/xcountto/xcountTo.min.js"></script>
  14. <script src="/Plugins/bootstrap-4.3.1/js/bootstrap.bundle.min.js"></script>
  15. <script src="/Plugins/bootstrap-table/bootstrap-table.min.js"></script>
  16. <script src="/Plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
  17. <script src="/Plugins/sweetalert/sweetalert.min.js"></script>
  18. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  19. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  20. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  21. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  22. <link rel="shortcut icon" href="/img/logo.png" />
  23. <link rel="bookmark" href="/img/logo.png" />
  24. <link href="/Plugins/animate/animate.min.css" rel="stylesheet" />
  25. <link rel="stylesheet" href="../DashBoard.css?v3" />
  26. <!--<script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>-->
  27. <script src="/Plugins/animate/xanimate.js"></script>
  28. <script src="/Plugins/xrequest/xrequest.min.js"></script>
  29. <style type="text/css">
  30. .panel-title {
  31. -webkit-text-size-adjust: none;
  32. white-space: nowrap;
  33. font-size: 12px;
  34. -webkit-transform-origin-x: 0;
  35. -webkit-transform: scale(0.80);
  36. }
  37. .panel-body {
  38. background-color: #444;
  39. }
  40. @keyframes blink {
  41. 0% {
  42. opacity: 1;
  43. }
  44. 100% {
  45. opacity: 0;
  46. }
  47. }
  48. @-webkit-keyframes blink {
  49. 0% {
  50. opacity: 1;
  51. }
  52. 100% {
  53. opacity: 0;
  54. }
  55. }
  56. @-moz-keyframes blink {
  57. 0% {
  58. opacity: 1;
  59. }
  60. 100% {
  61. opacity: 0;
  62. }
  63. }
  64. @-ms-keyframes blink {
  65. 0% {
  66. opacity: 1;
  67. }
  68. 100% {
  69. opacity: 0;
  70. }
  71. }
  72. @-o-keyframes blink {
  73. 0% {
  74. opacity: 1;
  75. }
  76. 100% {
  77. opacity: 0;
  78. }
  79. }
  80. .blink {
  81. background-color: red;
  82. animation: blink 1s linear infinite;
  83. -webkit-animation: blink 1s linear infinite;
  84. -moz-animation: blink 1s linear infinite;
  85. -ms-animation: blink 1s linear infinite;
  86. -o-animation: blink 1s linear infinite;
  87. }
  88. .blinkwait {
  89. background-color: #444;
  90. animation: blink 1s linear infinite;
  91. -webkit-animation: blink 1s linear infinite;
  92. -moz-animation: blink 1s linear infinite;
  93. -ms-animation: blink 1s linear infinite;
  94. -o-animation: blink 1s linear infinite;
  95. }
  96. </style>
  97. </head>
  98. <body style="width:100%;color:white;background-color:#666">
  99. <script type="text/javascript">
  100. var refreshTime = 60;
  101. var currentTime = 0;
  102. var doLoadData;
  103. var mainInterval;
  104. var mainRowCount = 0;
  105. $(document).ready(function () {
  106. //doLoadData = setInterval(function () { loadTime(); }, 1000);
  107. initData();
  108. loadMainTable();
  109. loadData();
  110. DefectDataW();
  111. setInterval(function () { DefectDataW(); }, 5000);
  112. setInterval(function () { DdfectData(); }, 5000);
  113. DdfectDataB();
  114. setInterval(function () { DdfectDataB(); }, 5000);
  115. ZxData();
  116. setInterval(function () { ZxData(); }, 5000);
  117. });
  118. function loadMainTable() {
  119. if (mainInterval) {
  120. clearInterval(mainInterval);
  121. //console.log("Interval Stop!");
  122. }
  123. $.get("warehouse.ashx?m=MonthTable", function (data) {
  124. var json = JSON.parse(data);
  125. if (json["success"] == true) {
  126. $("#dayTabletwo").html("");
  127. for (var i = 0; i < json["rows"].length; i++) {
  128. var temp = $("#dayTable_templatetwo").html();
  129. temp = temp.replace("<tbody>", "").replace("</tbody>", "");
  130. temp = temp.replace('{包装工单号}', json["rows"][i]['包装工单号']);
  131. temp = temp.replace('{包装产线}', json["rows"][i]['包装产线']);
  132. temp = temp.replace('{包装状态}', json["rows"][i]['包装状态']);
  133. temp = temp.replace('{包装数量}', json["rows"][i]['包装数量']);
  134. temp = temp.replace('{完成情况}', json["rows"][i]['完成情况']);
  135. temp = temp.replace('{完成时间}', json["rows"][i]['完成时间']);
  136. temp = temp.replace('{推送状态}', json["rows"][i]['推送状态']);
  137. temp = temp.replace('{推送时间}', json["rows"][i]['推送时间']);
  138. $("#dayTabletwo").append(temp);
  139. }
  140. mainRowCount = json["rows"].length;
  141. mainInterval = setInterval(mainScroll, 3000);
  142. }
  143. });
  144. }
  145. function mainScroll() {
  146. var scrollHeight = $("#dayTabletwo").find("tr").outerHeight();
  147. $("#dayTabletwo").animate({ marginTop: -scrollHeight, }, 500,
  148. function () {
  149. $(this).css({ marginTop: "0px", }).find("tr:first").appendTo(this);
  150. if (--mainRowCount == -1) loadMainTable();
  151. }
  152. );
  153. }
  154. function DefectDataW() {
  155. $.get("warehouse.ashx?m=defectw", function (data) {
  156. var json = JSON.parse(data);
  157. if (json["success"] == true) {
  158. var defect1 = parseFloat(json["rows"][0]["缺陷数量"]);
  159. var defect2 = parseFloat(json["rows"][1]["缺陷数量"]);
  160. var defect3 = parseFloat(json["rows"][2]["缺陷数量"]);
  161. var defectname1 = json["rows"][0]["缺陷位置"];
  162. var defectname2 = json["rows"][1]["缺陷位置"];
  163. var defectname3 = json["rows"][2]["缺陷位置"];
  164. window.DefectW.data.datasets[0].data = [defect1, defect2, defect3];
  165. window.DefectW.data.labels = [defectname1, defectname2, defectname3]
  166. window.DefectW.update();
  167. }
  168. });
  169. }
  170. function DdfectData() {
  171. $.get("warehouse.ashx?m=defect", function (data) {
  172. var json = JSON.parse(data);
  173. if (json["success"] == true) {
  174. var defect1 = parseFloat(json["rows"][0]["数量"]);
  175. var defect2 = parseFloat(json["rows"][1]["数量"]);
  176. var defect3 = parseFloat(json["rows"][2]["数量"]);
  177. var defectname1 = json["rows"][0]["缺陷名称"];
  178. var defectname2 = json["rows"][1]["缺陷名称"];
  179. var defectname3 = json["rows"][2]["缺陷名称"];
  180. window.DefectA.data.datasets[0].data = [defect1, defect2, defect3];
  181. window.DefectA.data.labels = [defectname1, defectname2, defectname3]
  182. window.DefectA.update();
  183. }
  184. });
  185. }
  186. function DdfectDataB() {
  187. $.get("warehouse.ashx?m=defectb", function (data) {
  188. var json = JSON.parse(data);
  189. if (json["success"] == true) {
  190. var defect1 = parseFloat(json["rows"][0]["数量"]);
  191. var defect2 = parseFloat(json["rows"][1]["数量"]);
  192. var defect3 = parseFloat(json["rows"][2]["数量"]);
  193. var defectname1 = json["rows"][0]["缺陷名称"];
  194. var defectname2 = json["rows"][1]["缺陷名称"];
  195. var defectname3 = json["rows"][2]["缺陷名称"];
  196. window.DefectB.data.datasets[0].data = [defect1, defect2, defect3];
  197. window.DefectB.data.labels = [defectname1, defectname2, defectname3]
  198. window.DefectB.update();
  199. }
  200. });
  201. }
  202. function ZxData() {
  203. $.get("warehouse.ashx?m=zx", function (data) {
  204. var json = JSON.parse(data);
  205. if (json["success"] == true) {
  206. var BJ1 = parseFloat(json["rows"][0]["合格率"]);
  207. var BJ2 = parseFloat(json["rows"][1]["合格率"]);
  208. var BJ3 = parseFloat(json["rows"][2]["合格率"]);
  209. var BJ4 = parseFloat(json["rows"][3]["合格率"]);
  210. var BJ5 = parseFloat(json["rows"][4]["合格率"]);
  211. var BJ6 = parseFloat(json["rows"][5]["合格率"]);
  212. var BJ7 = parseFloat(json["rows"][6]["合格率"]);
  213. var day1 = parseFloat(json["rows"][0]["日期"]);
  214. var day2 = parseFloat(json["rows"][1]["日期"]);
  215. var day3 = parseFloat(json["rows"][2]["日期"]);
  216. var day4 = parseFloat(json["rows"][3]["日期"]);
  217. var day5 = parseFloat(json["rows"][4]["日期"]);
  218. var day6 = parseFloat(json["rows"][5]["日期"]);
  219. var day7 = parseFloat(json["rows"][6]["日期"]);
  220. var count1 = parseFloat(json["rows"][0]["本烧合格数"]);
  221. var count2 = parseFloat(json["rows"][1]["本烧合格数"]);
  222. var count3 = parseFloat(json["rows"][2]["本烧合格数"]);
  223. var count4 = parseFloat(json["rows"][3]["本烧合格数"]);
  224. var count5 = parseFloat(json["rows"][4]["本烧合格数"]);
  225. var count6 = parseFloat(json["rows"][5]["本烧合格数"]);
  226. var count7 = parseFloat(json["rows"][6]["本烧合格数"]);
  227. window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
  228. window.DayZL.data.datasets[1].data = [count1, count2, count3, count4, count5, count6, count7];
  229. window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
  230. window.DayZL.update();
  231. }
  232. });
  233. }
  234. function loadTime() {
  235. if (currentTime > 0) {
  236. $('#timer').html(" <font color='gray'>刷新倒计时:" + currentTime + " 秒</font>");
  237. currentTime--;
  238. }
  239. else {
  240. loadData();
  241. currentTime = refreshTime;
  242. }
  243. }
  244. function loadData() {
  245. $.get('warehouse.ashx?m=outing', function (data) {
  246. var outingData = JSON.parse(data);
  247. //var isFull = $('#allFull').checkbox('options').checked ? 1 : 0;
  248. $.get('warehouse.ashx?m=all&allFull=0', function (data) {
  249. var json = JSON.parse(data);
  250. var znColumn = 0;
  251. var znCount = 0;
  252. var ltColumn = 0;
  253. var ltCount = 0;
  254. if (json["success"] == true) {
  255. for (var i = 0; i < json["rows"].length; i++) {
  256. var id = json["rows"][i]["LayerID"] + "_" + json["rows"][i]["ColumnID"];
  257. //设置数量
  258. $("#p" + id).attr('data-to', json["rows"][i]["GoodsCount"]);
  259. $("#p" + id).countTo();
  260. $("#t" + id).panel('setTitle', json["rows"][i]["GoodsType"].split("#")[0]);
  261. $("#t" + id).parent().attr('title', json["rows"][i]["GoodsType"]);
  262. //正在出库的设置样式
  263. if (outingData["rows"].length > 0) {
  264. for (var j = 0; j < outingData["rows"].length; j++) {
  265. if (outingData["rows"][j]["STATUS"] == 1 && json["rows"][i]["GoodsType"] == outingData["rows"][j]["GOODSCODE"] + "#" + outingData["rows"][j]["MATNR"]) {
  266. $("#t" + id).removeClass("blinkwait");
  267. $("#t" + id).addClass("blink");
  268. }
  269. else if (outingData["rows"][j]["STATUS"] == 0 && json["rows"][i]["GoodsType"] == outingData["rows"][j]["GOODSCODE"] + "#" + outingData["rows"][j]["MATNR"]) {
  270. $("#t" + id).removeClass("blink");
  271. $("#t" + id).addClass("blinkwait");
  272. }
  273. }
  274. }
  275. //设置智能和连体显示
  276. if (json["rows"][i]["GoodsSeries"] == "1") {
  277. $("#p" + id).css("color", "yellow");
  278. znCount += json["rows"][i]["GoodsCount"];
  279. znColumn++;
  280. }
  281. if (json["rows"][i]["GoodsSeries"] == "2") {
  282. $("#p" + id).css("color", "white");
  283. ltCount += json["rows"][i]["GoodsCount"];
  284. ltColumn++;
  285. }
  286. }
  287. $("#all").html("占用 " + (znColumn + ltColumn) + " 巷道 " + (znCount + ltCount) + " 件");
  288. $("#zn").html("占用 " + znColumn + " 巷道 " + znCount + " 件");
  289. $("#lt").html("占用 " + ltColumn + " 巷道 " + ltCount + " 件");
  290. }
  291. else {
  292. //clearInterval(doLoadData);
  293. $.messager.alert('数据错误', json["message"], 'error');
  294. }
  295. });
  296. });
  297. }
  298. function initData() {
  299. window.chartColors = {
  300. red: 'rgb(255, 99, 132)',
  301. orange: 'rgb(255, 159, 64)',
  302. yellow: 'rgb(255, 250, 86)',
  303. green: 'rgb(75, 192, 192)',
  304. blue: 'rgb(54, 162, 250)',
  305. purple: 'rgb(153, 102, 255)',
  306. grey: 'rgb(231,233,237)'
  307. };
  308. var color = Chart.helpers.color;
  309. window.randomScalingFactor = function (num) {
  310. return Math.round(Math.random() * num);
  311. }
  312. Chart.defaults.global.defaultFontColor = 'white';
  313. Chart.defaults.global.defaultFontSize = 18;
  314. Chart.defaults.global.legend.display = false;
  315. //成检合格率各项趋势图=====================================
  316. window.configDayZL = {
  317. data: {
  318. labels: ["01", "02", "03", "04", "05", "06", "07"],
  319. datasets: [{
  320. type: 'line',
  321. label: "合格率",
  322. yAxesGroup: 'A',
  323. yAxisID: 'A',
  324. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  325. borderColor: window.chartColors.red,
  326. borderWidth: 2,
  327. pointRadius: 15,
  328. data: [0, 0, 0, 0, 0, 0, 0],
  329. fill: false
  330. }, {
  331. label: '产量',
  332. yAxesGroup: 'B',
  333. yAxisID: 'B',
  334. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  335. borderColor: window.chartColors.blue,
  336. borderWidth: 1,
  337. data: [100, 100, 100, 100, 100, 100, 100],
  338. fill: false
  339. }]
  340. },
  341. type: 'bar',
  342. options: {
  343. legend: {
  344. display: true
  345. },
  346. title: {
  347. display: false,
  348. text: '质量统计'
  349. },
  350. tooltips: {
  351. mode: 'index',
  352. intersect: false,
  353. },
  354. hover: {
  355. mode: 'nearest',
  356. intersect: true
  357. },
  358. scales: {
  359. xAxes: [{
  360. display: true,
  361. scaleLabel: {
  362. display: false,
  363. labelString: ''
  364. }
  365. }],
  366. yAxes: [{
  367. display: true,
  368. id: 'B',
  369. name: 'B',
  370. scalePositionLeft: true,
  371. position: 'left',
  372. scaleLabel: {
  373. display: false,
  374. labelString: 'Value'
  375. },
  376. ticks: {
  377. min: 0,
  378. stepSize: 1000,
  379. max: 5000
  380. }
  381. }
  382. , {
  383. display: true,
  384. id: 'A',
  385. name: 'A',
  386. scalePositionLeft: false,
  387. position: 'right',
  388. scaleLabel: {
  389. display: false,
  390. labelString: 'Value2'
  391. },
  392. ticks: {
  393. min: 50,
  394. stepSize: 10,
  395. max: 100
  396. }
  397. }]
  398. }
  399. }
  400. };
  401. var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
  402. window.DayZL = new Chart(ctxDayZL, configDayZL);
  403. //===================================================
  404. //成检缺陷TOP5===========================================
  405. window.configDefectA = {
  406. data: {
  407. labels: ['1', '2', '3'],
  408. datasets: [{
  409. label: '工序',
  410. backgroundColor: [
  411. color(window.chartColors.red).alpha(0.35).rgbString(),
  412. color(window.chartColors.blue).alpha(0.35).rgbString(),
  413. color(window.chartColors.green).alpha(0.35).rgbString(),
  414. color(window.chartColors.orange).alpha(0.35).rgbString(),
  415. color(window.chartColors.purple).alpha(0.35).rgbString()
  416. ],
  417. fill: false,
  418. borderColor: [
  419. window.chartColors.red,
  420. window.chartColors.blue,
  421. window.chartColors.green,
  422. window.chartColors.orange,
  423. window.chartColors.purple
  424. ],
  425. borderWidth: 2,
  426. pointRadius: 30,
  427. data: [0, 0, 0]
  428. }]
  429. },
  430. type: 'pie',
  431. options: {
  432. legend: {
  433. display: true
  434. },
  435. title: {
  436. display: false,
  437. text: "甲班缺陷"
  438. },
  439. tooltips: {
  440. mode: 'point',
  441. intersect: false
  442. },
  443. responsive: true
  444. }
  445. };
  446. var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
  447. window.DefectA = new Chart(ctxDefectA, configDefectA);
  448. //===================================================
  449. //成检缺陷位置TOP5===========================================
  450. window.configDefectW = {
  451. data: {
  452. labels: ['1', '2', '3'],
  453. datasets: [{
  454. label: '工序',
  455. backgroundColor: [
  456. color(window.chartColors.red).alpha(0.35).rgbString(),
  457. color(window.chartColors.blue).alpha(0.35).rgbString(),
  458. color(window.chartColors.green).alpha(0.35).rgbString(),
  459. color(window.chartColors.orange).alpha(0.35).rgbString(),
  460. color(window.chartColors.purple).alpha(0.35).rgbString()
  461. ],
  462. fill: false,
  463. borderColor: [
  464. window.chartColors.red,
  465. window.chartColors.blue,
  466. window.chartColors.green,
  467. window.chartColors.orange,
  468. window.chartColors.purple
  469. ],
  470. borderWidth: 2,
  471. pointRadius: 30,
  472. data: [0, 0, 0]
  473. }]
  474. },
  475. type: 'pie',
  476. options: {
  477. legend: {
  478. display: true
  479. },
  480. title: {
  481. display: false,
  482. text: "甲班缺陷"
  483. },
  484. tooltips: {
  485. mode: 'point',
  486. intersect: false
  487. },
  488. responsive: true
  489. }
  490. };
  491. var ctxDefectW = document.getElementById("canvasDefectW").getContext("2d");
  492. window.DefectW = new Chart(ctxDefectW, configDefectW);
  493. //===================================================
  494. //成检缺陷TOP5===========================================
  495. window.configDefectB = {
  496. data: {
  497. labels: ['缺陷1', '缺陷2', '缺陷3'],
  498. datasets: [{
  499. label: '工序',
  500. backgroundColor: [
  501. color(window.chartColors.red).alpha(0.35).rgbString(),
  502. color(window.chartColors.blue).alpha(0.35).rgbString(),
  503. color(window.chartColors.green).alpha(0.35).rgbString(),
  504. color(window.chartColors.orange).alpha(0.35).rgbString(),
  505. color(window.chartColors.purple).alpha(0.35).rgbString()
  506. ],
  507. fill: false,
  508. borderColor: [
  509. window.chartColors.red,
  510. window.chartColors.blue,
  511. window.chartColors.green,
  512. window.chartColors.orange,
  513. window.chartColors.purple
  514. ],
  515. borderWidth: 2,
  516. pointRadius: 30,
  517. data: [0, 0, 0]
  518. }]
  519. },
  520. type: 'pie',
  521. options: {
  522. legend: {
  523. display: true
  524. },
  525. title: {
  526. display: false,
  527. text: "甲班缺陷"
  528. },
  529. tooltips: {
  530. mode: 'point',
  531. intersect: false
  532. },
  533. responsive: true
  534. }
  535. };
  536. var ctxDefectB = document.getElementById("canvasDefectB").getContext("2d");
  537. window.DefectB = new Chart(ctxDefectB, configDefectB);
  538. //===================================================
  539. //甲班缺陷===========================================
  540. window.configMonthCL = {
  541. data: {
  542. labels: ['实际产量', '目标产量'],
  543. datasets: [{
  544. label: '工序',
  545. backgroundColor: [
  546. color(window.chartColors.red).alpha(0.35).rgbString(),
  547. color(window.chartColors.blue).alpha(0.35).rgbString(),
  548. color(window.chartColors.green).alpha(0.35).rgbString(),
  549. color(window.chartColors.orange).alpha(0.35).rgbString(),
  550. color(window.chartColors.purple).alpha(0.35).rgbString()
  551. ],
  552. fill: false,
  553. borderColor: [
  554. window.chartColors.red,
  555. window.chartColors.blue,
  556. window.chartColors.green,
  557. window.chartColors.orange,
  558. window.chartColors.purple
  559. ],
  560. borderWidth: 2,
  561. pointRadius: 30,
  562. data: [0, 0]
  563. }]
  564. },
  565. type: 'doughnut',
  566. options: {
  567. legend: {
  568. display: true
  569. },
  570. title: {
  571. display: false,
  572. text: ""
  573. },
  574. tooltips: {
  575. mode: 'point',
  576. intersect: false
  577. },
  578. responsive: true
  579. }
  580. };
  581. var ctxMonthCL = document.getElementById("canvasMonthCL").getContext("2d");
  582. window.MonthCL = new Chart(ctxMonthCL, configMonthCL);
  583. //===================================================
  584. }
  585. </script>
  586. <div class="box_1920_1080">
  587. <div class="box_title" style="display:flex;flex-direction:row;">
  588. <div style="width:30%;text-align:left;"></div>
  589. <div style="width: 40%; text-align: center; font-size: 38px; font-weight: 700">成检包装看板</div>
  590. <div style="width:30%;text-align:right;"><span class="box_title_loading" style="font-size:32px;" id="报表加载"></span></div>
  591. </div>
  592. <!--<div class="box_body" style="display: flex; flex-direction: column;">-->
  593. <div style="width:100%;height:560px;padding-left:30px;padding-top:10px;">
  594. <div style="float:left;">
  595. <div style="float: left; padding:5px;">
  596. <div id="t5_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  597. <div style="padding:10px;text-align:center">
  598. <div id="p5_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  599. </div>
  600. </div>
  601. </div>
  602. <div style="float: left; padding:5px;">
  603. <div id="t5_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  604. <div style="padding:10px;text-align:center">
  605. <div id="p5_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  606. </div>
  607. </div>
  608. </div>
  609. <div style="float: left; padding:5px;">
  610. <div id="t5_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  611. <div style="padding:10px;text-align:center">
  612. <div id="p5_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  613. </div>
  614. </div>
  615. </div>
  616. <div style="float: left; padding:5px;">
  617. <div id="t5_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  618. <div style="padding:10px;text-align:center">
  619. <div id="p5_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  620. </div>
  621. </div>
  622. </div>
  623. <div style="float: left; padding:5px;">
  624. <div id="t5_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  625. <div style="padding:10px;text-align:center">
  626. <div id="p5_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  627. </div>
  628. </div>
  629. </div>
  630. <div style="float: left; padding:5px;">
  631. <div id="t5_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  632. <div style="padding:10px;text-align:center">
  633. <div id="p5_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  634. </div>
  635. </div>
  636. </div>
  637. <div style="float: left; padding:5px;">
  638. <div id="t5_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  639. <div style="padding:10px;text-align:center">
  640. <div id="p5_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  641. </div>
  642. </div>
  643. </div>
  644. <div style="float: left; padding:5px;">
  645. <div id="t5_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  646. <div style="padding:10px;text-align:center">
  647. <div id="p5_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  648. </div>
  649. </div>
  650. </div>
  651. <div style="float: left; padding:5px;">
  652. <div id="t5_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  653. <div style="padding:10px;text-align:center">
  654. <div id="p5_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  655. </div>
  656. </div>
  657. </div>
  658. <div style="float: left; padding:5px;">
  659. <div id="t5_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  660. <div style="padding:10px;text-align:center">
  661. <div id="p5_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  662. </div>
  663. </div>
  664. </div>
  665. <div style="float: left; padding:5px;">
  666. <div id="t5_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  667. <div style="padding:10px;text-align:center">
  668. <div id="p5_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  669. </div>
  670. </div>
  671. </div>
  672. <div style="float: left; padding:5px;">
  673. <div id="t5_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  674. <div style="padding:10px;text-align:center">
  675. <div id="p5_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  676. </div>
  677. </div>
  678. </div>
  679. <div style="float: left; padding:5px;">
  680. <div id="t5_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  681. <div style="padding:10px;text-align:center">
  682. <div id="p5_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  683. </div>
  684. </div>
  685. </div>
  686. <div style="float: left; padding:5px;">
  687. <div id="t5_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  688. <div style="padding:10px;text-align:center">
  689. <div id="p5_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  690. </div>
  691. </div>
  692. </div>
  693. <div style="float: left; padding:5px;">
  694. <div id="t5_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  695. <div style="padding:10px;text-align:center">
  696. <div id="p5_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  697. </div>
  698. </div>
  699. </div>
  700. <div style="float: left; padding:5px;">
  701. <div id="t5_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  702. <div style="padding:10px;text-align:center">
  703. <div id="p5_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  704. </div>
  705. </div>
  706. </div>
  707. </div>
  708. <div style="float:left;">
  709. <div style="float: left; padding:5px;">
  710. <div id="t4_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  711. <div style="padding:10px;text-align:center">
  712. <div id="p4_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  713. </div>
  714. </div>
  715. </div>
  716. <div style="float: left; padding:5px;">
  717. <div id="t4_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  718. <div style="padding:10px;text-align:center">
  719. <div id="p4_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  720. </div>
  721. </div>
  722. </div>
  723. <div style="float: left; padding:5px;">
  724. <div id="t4_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  725. <div style="padding:10px;text-align:center">
  726. <div id="p4_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  727. </div>
  728. </div>
  729. </div>
  730. <div style="float: left; padding:5px;">
  731. <div id="t4_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  732. <div style="padding:10px;text-align:center">
  733. <div id="p4_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  734. </div>
  735. </div>
  736. </div>
  737. <div style="float: left; padding:5px;">
  738. <div id="t4_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  739. <div style="padding:10px;text-align:center">
  740. <div id="p4_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  741. </div>
  742. </div>
  743. </div>
  744. <div style="float: left; padding:5px;">
  745. <div id="t4_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  746. <div style="padding:10px;text-align:center">
  747. <div id="p4_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  748. </div>
  749. </div>
  750. </div>
  751. <div style="float: left; padding:5px;">
  752. <div id="t4_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  753. <div style="padding:10px;text-align:center">
  754. <div id="p4_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  755. </div>
  756. </div>
  757. </div>
  758. <div style="float: left; padding:5px;">
  759. <div id="t4_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  760. <div style="padding:10px;text-align:center">
  761. <div id="p4_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  762. </div>
  763. </div>
  764. </div>
  765. <div style="float: left; padding:5px;">
  766. <div id="t4_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  767. <div style="padding:10px;text-align:center">
  768. <div id="p4_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  769. </div>
  770. </div>
  771. </div>
  772. <div style="float: left; padding:5px;">
  773. <div id="t4_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  774. <div style="padding:10px;text-align:center">
  775. <div id="p4_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  776. </div>
  777. </div>
  778. </div>
  779. <div style="float: left; padding:5px;">
  780. <div id="t4_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  781. <div style="padding:10px;text-align:center">
  782. <div id="p4_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  783. </div>
  784. </div>
  785. </div>
  786. <div style="float: left; padding:5px;">
  787. <div id="t4_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  788. <div style="padding:10px;text-align:center">
  789. <div id="p4_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  790. </div>
  791. </div>
  792. </div>
  793. <div style="float: left; padding:5px;">
  794. <div id="t4_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  795. <div style="padding:10px;text-align:center">
  796. <div id="p4_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  797. </div>
  798. </div>
  799. </div>
  800. <div style="float: left; padding:5px;">
  801. <div id="t4_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  802. <div style="padding:10px;text-align:center">
  803. <div id="p4_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  804. </div>
  805. </div>
  806. </div>
  807. <div style="float: left; padding:5px;">
  808. <div id="t4_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  809. <div style="padding:10px;text-align:center">
  810. <div id="p4_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  811. </div>
  812. </div>
  813. </div>
  814. <div style="float: left; padding:5px;">
  815. <div id="t4_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  816. <div style="padding:10px;text-align:center">
  817. <div id="p4_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  818. </div>
  819. </div>
  820. </div>
  821. </div>
  822. <div style="float:left;">
  823. <div style="float: left; padding:5px;">
  824. <div id="t3_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  825. <div style="padding:10px;text-align:center">
  826. <div id="p3_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  827. </div>
  828. </div>
  829. </div>
  830. <div style="float: left; padding:5px;">
  831. <div id="t3_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  832. <div style="padding:10px;text-align:center">
  833. <div id="p3_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  834. </div>
  835. </div>
  836. </div>
  837. <div style="float: left; padding:5px;">
  838. <div id="t3_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  839. <div style="padding:10px;text-align:center">
  840. <div id="p3_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  841. </div>
  842. </div>
  843. </div>
  844. <div style="float: left; padding:5px;">
  845. <div id="t3_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  846. <div style="padding:10px;text-align:center">
  847. <div id="p3_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  848. </div>
  849. </div>
  850. </div>
  851. <div style="float: left; padding:5px;">
  852. <div id="t3_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  853. <div style="padding:10px;text-align:center">
  854. <div id="p3_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  855. </div>
  856. </div>
  857. </div>
  858. <div style="float: left; padding:5px;">
  859. <div id="t3_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  860. <div style="padding:10px;text-align:center">
  861. <div id="p3_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  862. </div>
  863. </div>
  864. </div>
  865. <div style="float: left; padding:5px;">
  866. <div id="t3_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  867. <div style="padding:10px;text-align:center">
  868. <div id="p3_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  869. </div>
  870. </div>
  871. </div>
  872. <div style="float: left; padding:5px;">
  873. <div id="t3_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  874. <div style="padding:10px;text-align:center">
  875. <div id="p3_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  876. </div>
  877. </div>
  878. </div>
  879. <div style="float: left; padding:5px;">
  880. <div id="t3_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  881. <div style="padding:10px;text-align:center">
  882. <div id="p3_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  883. </div>
  884. </div>
  885. </div>
  886. <div style="float: left; padding:5px;">
  887. <div id="t3_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  888. <div style="padding:10px;text-align:center">
  889. <div id="p3_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  890. </div>
  891. </div>
  892. </div>
  893. <div style="float: left; padding:5px;">
  894. <div id="t3_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  895. <div style="padding:10px;text-align:center">
  896. <div id="p3_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  897. </div>
  898. </div>
  899. </div>
  900. <div style="float: left; padding:5px;">
  901. <div id="t3_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  902. <div style="padding:10px;text-align:center">
  903. <div id="p3_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  904. </div>
  905. </div>
  906. </div>
  907. <div style="float: left; padding:5px;">
  908. <div id="t3_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  909. <div style="padding:10px;text-align:center">
  910. <div id="p3_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  911. </div>
  912. </div>
  913. </div>
  914. <div style="float: left; padding:5px;">
  915. <div id="t3_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  916. <div style="padding:10px;text-align:center">
  917. <div id="p3_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  918. </div>
  919. </div>
  920. </div>
  921. <div style="float: left; padding:5px;">
  922. <div id="t3_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  923. <div style="padding:10px;text-align:center">
  924. <div id="p3_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  925. </div>
  926. </div>
  927. </div>
  928. <div style="float: left; padding:5px;">
  929. <div id="t3_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  930. <div style="padding:10px;text-align:center">
  931. <div id="p3_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  932. </div>
  933. </div>
  934. </div>
  935. </div>
  936. <div style="float:left;">
  937. <div style="float: left; padding:5px;">
  938. <div id="t2_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  939. <div style="padding:10px;text-align:center">
  940. <div id="p2_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  941. </div>
  942. </div>
  943. </div>
  944. <div style="float: left; padding:5px;">
  945. <div id="t2_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  946. <div style="padding:10px;text-align:center">
  947. <div id="p2_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  948. </div>
  949. </div>
  950. </div>
  951. <div style="float: left; padding:5px;">
  952. <div id="t2_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  953. <div style="padding:10px;text-align:center">
  954. <div id="p2_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  955. </div>
  956. </div>
  957. </div>
  958. <div style="float: left; padding:5px;">
  959. <div id="t2_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  960. <div style="padding:10px;text-align:center">
  961. <div id="p2_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  962. </div>
  963. </div>
  964. </div>
  965. <div style="float: left; padding:5px;">
  966. <div id="t2_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  967. <div style="padding:10px;text-align:center">
  968. <div id="p2_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  969. </div>
  970. </div>
  971. </div>
  972. <div style="float: left; padding:5px;">
  973. <div id="t2_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  974. <div style="padding:10px;text-align:center">
  975. <div id="p2_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  976. </div>
  977. </div>
  978. </div>
  979. <div style="float: left; padding:5px;">
  980. <div id="t2_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  981. <div style="padding:10px;text-align:center">
  982. <div id="p2_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  983. </div>
  984. </div>
  985. </div>
  986. <div style="float: left; padding:5px;">
  987. <div id="t2_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  988. <div style="padding:10px;text-align:center">
  989. <div id="p2_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  990. </div>
  991. </div>
  992. </div>
  993. <div style="float: left; padding:5px;">
  994. <div id="t2_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  995. <div style="padding:10px;text-align:center">
  996. <div id="p2_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  997. </div>
  998. </div>
  999. </div>
  1000. <div style="float: left; padding:5px;">
  1001. <div id="t2_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1002. <div style="padding:10px;text-align:center">
  1003. <div id="p2_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1004. </div>
  1005. </div>
  1006. </div>
  1007. <div style="float: left; padding:5px;">
  1008. <div id="t2_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1009. <div style="padding:10px;text-align:center">
  1010. <div id="p2_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1011. </div>
  1012. </div>
  1013. </div>
  1014. <div style="float: left; padding:5px;">
  1015. <div id="t2_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1016. <div style="padding:10px;text-align:center">
  1017. <div id="p2_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1018. </div>
  1019. </div>
  1020. </div>
  1021. <div style="float: left; padding:5px;">
  1022. <div id="t2_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1023. <div style="padding:10px;text-align:center">
  1024. <div id="p2_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1025. </div>
  1026. </div>
  1027. </div>
  1028. <div style="float: left; padding:5px;">
  1029. <div id="t2_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1030. <div style="padding:10px;text-align:center">
  1031. <div id="p2_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1032. </div>
  1033. </div>
  1034. </div>
  1035. <div style="float: left; padding:5px;">
  1036. <div id="t2_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1037. <div style="padding:10px;text-align:center">
  1038. <div id="p2_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1039. </div>
  1040. </div>
  1041. </div>
  1042. <div style="float: left; padding:5px;">
  1043. <div id="t2_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1044. <div style="padding:10px;text-align:center">
  1045. <div id="p2_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1046. </div>
  1047. </div>
  1048. </div>
  1049. </div>
  1050. <div style="float:left;">
  1051. <div style="float: left; padding:5px;">
  1052. <div id="t1_1" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1053. <div style="padding:10px;text-align:center">
  1054. <div id="p1_1" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1055. </div>
  1056. </div>
  1057. </div>
  1058. <div style="float: left; padding:5px;">
  1059. <div id="t1_2" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1060. <div style="padding:10px;text-align:center">
  1061. <div id="p1_2" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1062. </div>
  1063. </div>
  1064. </div>
  1065. <div style="float: left; padding:5px;">
  1066. <div id="t1_3" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1067. <div style="padding:10px;text-align:center">
  1068. <div id="p1_3" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1069. </div>
  1070. </div>
  1071. </div>
  1072. <div style="float: left; padding:5px;">
  1073. <div id="t1_4" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1074. <div style="padding:10px;text-align:center">
  1075. <div id="p1_4" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1076. </div>
  1077. </div>
  1078. </div>
  1079. <div style="float: left; padding:5px;">
  1080. <div id="t1_5" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1081. <div style="padding:10px;text-align:center">
  1082. <div id="p1_5" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1083. </div>
  1084. </div>
  1085. </div>
  1086. <div style="float: left; padding:5px;">
  1087. <div id="t1_6" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1088. <div style="padding:10px;text-align:center">
  1089. <div id="p1_6" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1090. </div>
  1091. </div>
  1092. </div>
  1093. <div style="float: left; padding:5px;">
  1094. <div id="t1_7" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1095. <div style="padding:10px;text-align:center">
  1096. <div id="p1_7" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1097. </div>
  1098. </div>
  1099. </div>
  1100. <div style="float: left; padding:5px;">
  1101. <div id="t1_8" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1102. <div style="padding:10px;text-align:center">
  1103. <div id="p1_8" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1104. </div>
  1105. </div>
  1106. </div>
  1107. <div style="float: left; padding:5px;">
  1108. <div id="t1_9" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1109. <div style="padding:10px;text-align:center">
  1110. <div id="p1_9" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1111. </div>
  1112. </div>
  1113. </div>
  1114. <div style="float: left; padding:5px;">
  1115. <div id="t1_10" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1116. <div style="padding:10px;text-align:center">
  1117. <div id="p1_10" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1118. </div>
  1119. </div>
  1120. </div>
  1121. <div style="float: left; padding:5px;">
  1122. <div id="t1_11" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1123. <div style="padding:10px;text-align:center">
  1124. <div id="p1_11" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1125. </div>
  1126. </div>
  1127. </div>
  1128. <div style="float: left; padding:5px;">
  1129. <div id="t1_12" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1130. <div style="padding:10px;text-align:center">
  1131. <div id="p1_12" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1132. </div>
  1133. </div>
  1134. </div>
  1135. <div style="float: left; padding:5px;">
  1136. <div id="t1_13" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1137. <div style="padding:10px;text-align:center">
  1138. <div id="p1_13" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1139. </div>
  1140. </div>
  1141. </div>
  1142. <div style="float: left; padding:5px;">
  1143. <div id="t1_14" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1144. <div style="padding:10px;text-align:center">
  1145. <div id="p1_14" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1146. </div>
  1147. </div>
  1148. </div>
  1149. <div style="float: left; padding:5px;">
  1150. <div id="t1_15" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1151. <div style="padding:10px;text-align:center">
  1152. <div id="p1_15" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1153. </div>
  1154. </div>
  1155. </div>
  1156. <div style="float: left; padding:5px;">
  1157. <div id="t1_16" class="easyui-panel" title=" " data-options="collapsible:false,width:64">
  1158. <div style="padding:10px;text-align:center">
  1159. <div id="p1_16" data-speed="2000" style="font-size:32px;">&nbsp;</div>
  1160. </div>
  1161. </div>
  1162. </div>
  1163. </div>
  1164. <div style="float:left;padding:0;margin:0;font-size:6px;">
  1165. <div style="float:left; padding:0 5px 0 5px;">
  1166. <div style="width:64px;text-align:center;color:darkgray">1</div>
  1167. </div>
  1168. <div style="float: left; padding:0 5px 0 5px;">
  1169. <div style="width:64px;text-align:center;color:darkgray">2</div>
  1170. </div>
  1171. <div style="float: left; padding:0 5px 0 5px;">
  1172. <div style="width:64px;text-align:center;color:darkgray">3</div>
  1173. </div>
  1174. <div style="float: left; padding:0 5px 0 5px;">
  1175. <div style="width:64px;text-align:center;color:darkgray">4</div>
  1176. </div>
  1177. <div style="float: left; padding:0 5px 0 5px;">
  1178. <div style="width:64px;text-align:center;color:darkgray">5</div>
  1179. </div>
  1180. <div style="float: left; padding:0 5px 0 5px;">
  1181. <div style="width:64px;text-align:center;color:darkgray">6</div>
  1182. </div>
  1183. <div style="float: left; padding:0 5px 0 5px;">
  1184. <div style="width:64px;text-align:center;color:darkgray">7</div>
  1185. </div>
  1186. <div style="float: left; padding:0 5px 0 5px;">
  1187. <div style="width:64px;text-align:center;color:darkgray">8</div>
  1188. </div>
  1189. <div style="float: left; padding:0 5px 0 5px;">
  1190. <div style="width:64px;text-align:center;color:darkgray">9</div>
  1191. </div>
  1192. <div style="float: left; padding:0 5px 0 5px;">
  1193. <div style="width:64px;text-align:center;color:darkgray">10</div>
  1194. </div>
  1195. <div style="float: left; padding:0 5px 0 5px;">
  1196. <div style="width:64px;text-align:center;color:darkgray">11</div>
  1197. </div>
  1198. <div style="float: left; padding:0 5px 0 5px;">
  1199. <div style="width:64px;text-align:center;color:darkgray">12</div>
  1200. </div>
  1201. <div style="float: left; padding:0 5px 0 5px;">
  1202. <div style="width:64px;text-align:center;color:darkgray">13</div>
  1203. </div>
  1204. <div style="float: left; padding:0 5px 0 5px;">
  1205. <div style="width:64px;text-align:center;color:darkgray">14</div>
  1206. </div>
  1207. <div style="float: left; padding:0 5px 0 5px;">
  1208. <div style="width:64px;text-align:center;color:darkgray">15</div>
  1209. </div>
  1210. <div style="float: left; padding:0 5px 0 5px;">
  1211. <div style="width:64px;text-align:center;color:darkgray">16</div>
  1212. </div>
  1213. </div>
  1214. <div style="width: 650px; height: 500px; position: absolute; right: 40px; ">
  1215. <table cellspacing="0" cellpadding="0" border="0" style="width:99.8%;">
  1216. <!--<tr class="tr_title_warning">
  1217. <td colspan="10" style="color: white;">修复产品外观检验统计</td>
  1218. </tr>-->
  1219. <tr class="tr_title_warning" style="height: 50px;">
  1220. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">包装工单号</td>
  1221. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">包装产线</td>
  1222. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">包装状态</td>
  1223. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">包装数量</td>
  1224. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">完成情况</td>
  1225. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">完成时间</td>
  1226. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">推送状态</td>
  1227. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">推送时间</td>
  1228. </tr>
  1229. </table>
  1230. <div style=" height: 522px; overflow: hidden; width: 100%;">
  1231. <div>
  1232. <table id="dayTable_templatetwo" style="display:none;">
  1233. <tr class="tr_title_warning" style="height: 50px;">
  1234. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">{包装工单号}</td>
  1235. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{包装产线}</td>
  1236. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{包装状态}</td>
  1237. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{包装数量}</td>
  1238. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{完成情况}</td>
  1239. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{完成时间}</td>
  1240. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{推送状态}</td>
  1241. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{推送时间}</td>
  1242. </tr>
  1243. </table>
  1244. </div>
  1245. <table id="dayTabletwo" style="width: 100%; ">
  1246. </table>
  1247. </div>
  1248. </div>
  1249. </div>
  1250. <div style="float:left;padding-bottom:10px;padding-left:30px;">
  1251. <div style="float: left; padding:5px;width:100%">
  1252. <div style="font-size:14px;">
  1253. <span>数据汇总:</span><span id="all">0</span>,智能:<span id="zn" style="color:yellow">0</span>,连体:<span id="lt">0</span> <span id="timer"></span> <span> 【<a href="###" onclick="loadData()">点击刷新</a>】</span>
  1254. </div>
  1255. </div>
  1256. </div>
  1257. <div style="float:left;">
  1258. <div style="float: left; padding:5px;">
  1259. </div>
  1260. <div style="float: left; padding:5px;">
  1261. </div>
  1262. </div>
  1263. <div style="width:1840px;height:200px;display:flex;flex-direction:row;margin-top:100px;">
  1264. <div style="width: 30%; height: 200px;">
  1265. <div style="color:white;font-size:20px;font-weight:600; text-align:center">产成品质量七日趋势图</div>
  1266. <canvas id="canvasDayZL" style="-moz-user-select: none; padding-left: 30px; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  1267. </div>
  1268. <div style="width: 18%; height: 200px;">
  1269. <div style="color:white;font-size:20px;font-weight:600; text-align:center">品管巡检质量分析</div>
  1270. <canvas id="canvasDefectA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  1271. </div>
  1272. <div style="width: 18%; height: 200px;">
  1273. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成检包装设备状态</div>
  1274. <canvas id="canvasDefectW" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  1275. </div>
  1276. <div style="width: 18%; height: 200px;">-
  1277. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成检包装设备状态</div>
  1278. <canvas id="canvasDefectB" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  1279. </div>
  1280. <div style="width: 18%; height: 200px;">
  1281. <div style="color:white;font-size:20px;font-weight:600; text-align:center">包装工单进度</div>
  1282. <canvas id="canvasMonthCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  1283. </div>
  1284. </div>
  1285. </div>
  1286. </body>
  1287. </html>