demo.html 65 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <link rel="shortcut icon" href="/img/logo.png" />
  7. <link rel="bookmark" href="/img/logo.png" />
  8. <link href="/Plugins/animate/animate.min.css" rel="stylesheet" />
  9. <link rel="stylesheet" href="../DashBoard.css?v3" />
  10. <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
  11. <script src="/Plugins/animate/xanimate.js"></script>
  12. <script src="/Plugins/xrequest/xrequest.min.js"></script>
  13. <title>东科软件</title>
  14. <style>
  15. .container {
  16. display: flex;
  17. flex-direction: column; /* 设置子元素竖排排列 */
  18. width: 500px;
  19. }
  20. .containerson {
  21. height: 500px;
  22. }
  23. </style>
  24. </head>
  25. <body style="background-color:black;">
  26. <div class="box_1920_1080">
  27. <div class="box_title" style="display:flex;flex-direction:row;">
  28. <div style="width:30%;text-align:left;"></div>
  29. <div style="width: 40%; text-align: center; font-size: 38px; font-weight: 700">施釉车间看板</div>
  30. <div style="width:30%;text-align:right;"><span class="box_title_loading" style="font-size:32px;" id="报表加载"></span></div>
  31. </div>
  32. <div class="box_body" style="display: flex; flex-direction: column;">
  33. <!--注浆数据表格-->
  34. <div style="width:1840px;height:680px;display:flex;flex-direction:row;">
  35. <!--施釉设备重要数据-->
  36. <!--<div style="width: 48%; height: 680px;">
  37. <table cellspacing="0" cellpadding="0" border="0" style="width: 99.8%;">
  38. <tr class="tr_title_warning">
  39. <td colspan="10" style="color: white;">施釉设备重要数据</td>
  40. </tr>
  41. <tr class="tr_title_warning" style="height: 50px;">
  42. <td style="width: 12%; font-size: 10px; padding: 0px 0px 0px 0px;">产品条码</td>
  43. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">产品型号</td>
  44. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">施釉产线</td>
  45. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">施釉前重</td>
  46. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">施釉后重</td>
  47. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">施釉房号</td>
  48. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">施釉流量</td>
  49. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">施釉喷幅</td>
  50. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">釉浆温度</td>
  51. <td style="width: 8%; font-size: 10px; padding: 0px 0px 0px 0px; ">施釉压力</td>
  52. </tr>
  53. </table>
  54. <div style=" height: 522px; overflow: hidden; width: 100%;">
  55. <div>
  56. <table id="dayTable_template" style="display:none;">
  57. <tr class="tr_title_warning" style="height: 50px;">
  58. <td style="width: 12%; font-size: 10px; padding: 0px 0px 0px 0px;">{产品条码}</td>
  59. <td style="width: 10%; font-size: 10px;">{产品型号}</td>
  60. <td style="width: 10%; font-size: 10px; ">{施釉产线}</td>
  61. <td style="width: 10%; font-size: 10px; ">{施釉前重}</td>
  62. <td style="width: 10%; font-size: 10px; ">{施釉后重}</td>
  63. <td style="width: 10%; font-size: 10px; ">{施釉房号}</td>
  64. <td style="width: 10%; font-size: 10px; ">{施釉流量}</td>
  65. <td style="width: 10%; font-size: 10px; ">{施釉喷幅}</td>
  66. <td style="width: 10%; font-size: 10px; ">{釉浆温度}</td>
  67. <td style="width: 8%; font-size: 10px;">{施釉压力}</td>
  68. </tr>
  69. </table>
  70. </div>
  71. <table id="dayTable" style="width: 100%; ">
  72. </table>
  73. </div>
  74. </div>-->
  75. <div class="container">
  76. <div class="containerson">
  77. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉每日成品合格率</div>
  78. <canvas id="canvasDayZLA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  79. </div>
  80. <div class="containerson">
  81. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉每月成品合格率</div>
  82. <canvas id="canvasDayZLB" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  83. </div>
  84. <div class="containerson">
  85. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉每日成品冷补缺陷率</div>
  86. <canvas id="canvasDayZLC" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  87. </div>
  88. <div class="containerson">
  89. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉每日半成品损坯率</div>
  90. <canvas id="canvasDayZL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  91. </div>
  92. </div>
  93. <div style="width: 70%; height: 340px; position: absolute; right: 40px; ">
  94. <div class="d-flex justify-content-center">
  95. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉线24小时产量</div>
  96. <canvas id="canvasHourCL" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:340px;width:100%"></canvas>
  97. </div>
  98. </div>
  99. <div style="width: 30%; height: 340px; margin-top:365px;margin-left:200px;">
  100. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉工号产量</div>
  101. <canvas id="canvasDayCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 280px; width: 100%;margin-top:-38px;"></canvas>
  102. </div>
  103. <div style="width: 30%; height: 380px; right: 40px; margin-top: 365px; ">
  104. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉七日产量</div>
  105. <canvas id="canvasDayCC" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 280px; width: 100%;margin-top:-38px;"></canvas>
  106. </div>
  107. </div>
  108. <!--缺陷统计-->
  109. <div style="max-width: 1340px; height: 230px; display: flex; flex-direction: row; margin-left: auto; ">
  110. <!--<div style="width: 25%; height: 230px;">
  111. <div style="color:white;font-size:20px;font-weight:600; text-align:center">施釉质量七日趋势图</div>
  112. <canvas id="canvasDayZL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  113. </div>-->
  114. <div style="width: 25%; height: 230px;">
  115. <div style="color:white;font-size:20px;font-weight:600; text-align:center">归属施釉缺陷(今日TOP3)</div>
  116. <canvas id="canvasDefectA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  117. </div>
  118. <div style="width: 25%; height: 230px;">
  119. <div style="color:white;font-size:15px;font-weight:600; text-align:center">SSY001-SSY005</div>
  120. <div style="color:white;font-size:20px;font-weight:600; text-align:center">日成品缺陷(今日TOP5)</div>
  121. <canvas id="canvasDefectC" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  122. </div>
  123. <div style="width: 25%; height: 230px;">
  124. <div style="color:white;font-size:15px;font-weight:600; text-align:center">SSY002-SSY004</div>
  125. <div style="color:white;font-size:20px;font-weight:600; text-align:center">日成品缺陷(今日TOP5)</div>
  126. <canvas id="canvasDefectD" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  127. </div>
  128. <div style="width: 25%; height: 230px;">
  129. <div style="color:white;font-size:20px;font-weight:600; text-align:center">釉坯库库存</div>
  130. <canvas id="canvasDefectB" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  131. </div>
  132. <div style="width: 25%; height: 230px;">
  133. <div style="color:white;font-size:20px;font-weight:600; text-align:center;">精坯库库存</div>
  134. <canvas id="canvasJPKC" style="margin-top:15px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. <script>
  140. var mainInterval;
  141. var mainRowCount = 0;
  142. function loadMainTable() {
  143. if (mainInterval) {
  144. clearInterval(mainInterval);
  145. //console.log("Interval Stop!");
  146. }
  147. //$.get("demo.ashx?m=MonthTable", function (data){
  148. // var json = JSON.parse(data);
  149. // if (json["success"] == true) {
  150. // $("#dayTable").html("");
  151. // for (var i = 0; i < json["rows"].length; i++) {
  152. // var temp = $("#dayTable_template").html();
  153. // //temp = temp.replace("<tbody>", "").replace("</tbody>", "");
  154. // temp = temp.replace('{产品条码}', json["rows"][i]['产品条码']);
  155. // temp = temp.replace('{产品型号}', json["rows"][i]['产品型号']);
  156. // temp = temp.replace('{施釉产线}', json["rows"][i]['施釉产线']);
  157. // temp = temp.replace('{施釉前重}', json["rows"][i]['施釉前重']);
  158. // temp = temp.replace('{施釉后重}', json["rows"][i]['施釉后重']);
  159. // temp = temp.replace('{施釉房号}', json["rows"][i]['施釉房号']);
  160. // temp = temp.replace('{施釉流量}', json["rows"][i]['施釉流量']);
  161. // temp = temp.replace('{施釉喷幅}', json["rows"][i]['施釉喷幅']);
  162. // temp = temp.replace('{釉浆温度}', json["rows"][i]['釉浆温度']);
  163. // temp = temp.replace('{施釉压力}', json["rows"][i]['施釉压力']);
  164. // $("#dayTable").append(temp);
  165. // }
  166. // mainRowCount = json["rows"].length;
  167. // mainInterval = setInterval(mainScroll, 3000);
  168. // }
  169. //});
  170. }
  171. function mainScroll() {
  172. var scrollHeight = $("#dayTable").find("tr").outerHeight();
  173. $("#dayTable").animate({ marginTop: -scrollHeight, }, 500,
  174. function () {
  175. $(this).css({ marginTop: "0px", }).find("tr:first").appendTo(this);
  176. if (--mainRowCount == -1) loadMainTable();
  177. }
  178. );
  179. }
  180. $(document).ready(function () {
  181. initData();
  182. loadMainTable();
  183. setInterval(function () { loadMainTable(); }, 600000);
  184. DdfectData();
  185. setInterval(function () { DdfectData(); }, 600000);
  186. DdfectDataB();
  187. setInterval(function () { DdfectDataB(); }, 600000);
  188. //ZxData();
  189. //setInterval(function () { ZxData(); }, 180000);
  190. ClData();
  191. setInterval(function () { ClData(); }, 600000);
  192. ZxDataH();
  193. setInterval(function () { ZxDataH(); }, 600000);
  194. CCData();
  195. setInterval(function () { CCData(); }, 600000);
  196. DataKC();
  197. setInterval(function () { DataKC(); }, 600000);
  198. DailypassrateDayData();
  199. setInterval(function () { DailypassrateDayData(); }, 600000);
  200. DailypassrateMonthData();
  201. setInterval(function () { DailypassrateMonthDataNew(); }, 600000);
  202. setInterval(function () { DailypassrateMonthData(); }, 86400000);
  203. DailypassrateRepairData();
  204. setInterval(function () { DailypassrateRepairData(); }, 600000);
  205. DailypassrateSemifinishedData();
  206. setInterval(function () { DailypassrateSemifinishedData(); }, 600000);
  207. });
  208. //精坯库库存
  209. function DataKC() {
  210. $.get("demo.ashx?m=kc", function (data) {
  211. var json = JSON.parse(data);
  212. if (json["success"] == true) {
  213. var count1 = parseFloat(json["rows"][0]["数量"]);
  214. var count2 = parseFloat(json["rows"][1]["数量"]);
  215. var goodtype1 = json["rows"][0]["产品类别"];
  216. var goodtype2 = json["rows"][1]["产品类别"];
  217. window.Defectjpkc.data.datasets[0].data = [count1, count2];
  218. window.Defectjpkc.data.labels = [goodtype1, goodtype2]
  219. window.Defectjpkc.update();
  220. }
  221. });
  222. }
  223. ////施釉七日趋势图
  224. //function ZxData(){
  225. // $.get("demo.ashx?m=zx", function (data) {
  226. // var json = JSON.parse(data);
  227. // if (json["success"] == true) {
  228. // var BJ1 = parseFloat(json["rows"][0]["施釉合格率"]);
  229. // var BJ2 = parseFloat(json["rows"][1]["施釉合格率"]);
  230. // var BJ3 = parseFloat(json["rows"][2]["施釉合格率"]);
  231. // var BJ4 = parseFloat(json["rows"][3]["施釉合格率"]);
  232. // var BJ5 = parseFloat(json["rows"][4]["施釉合格率"]);
  233. // var BJ6 = parseFloat(json["rows"][5]["施釉合格率"]);
  234. // var BJ7 = parseFloat(json["rows"][6]["施釉合格率"]);
  235. // var day1 = json["rows"][0]["日期"];
  236. // var day2 = json["rows"][1]["日期"];
  237. // var day3 = json["rows"][2]["日期"];
  238. // var day4 = json["rows"][3]["日期"];
  239. // var day5 = json["rows"][4]["日期"];
  240. // var day6 = json["rows"][5]["日期"];
  241. // var day7 = json["rows"][6]["日期"];
  242. // var count1 = parseFloat(json["rows"][0]["出窑数"]);
  243. // var count2 = parseFloat(json["rows"][1]["出窑数"]);
  244. // var count3 = parseFloat(json["rows"][2]["出窑数"]);
  245. // var count4 = parseFloat(json["rows"][3]["出窑数"]);
  246. // var count5 = parseFloat(json["rows"][4]["出窑数"]);
  247. // var count6 = parseFloat(json["rows"][5]["出窑数"]);
  248. // var count7 = parseFloat(json["rows"][6]["出窑数"]);
  249. // window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
  250. // window.DayZL.data.datasets[1].data = [count1, count2, count3, count4, count5, count6, count7];
  251. // window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
  252. // window.DayZL.update();
  253. // }
  254. // });
  255. //}
  256. //施釉每日成品合格率
  257. function DailypassrateDayData() {
  258. $.get("demo.ashx?m=Dailypassrate&type=day&repair=false", function (data) {
  259. var json = JSON.parse(data);
  260. if (json["success"] == true) {
  261. console.log(json, '施釉每日成品合格率')
  262. // 存储施釉合格率
  263. let bjRates = [];
  264. // 存储出窑数
  265. let counts = [];
  266. // 存储日期
  267. let days = [];
  268. for (let i = 0; i < json["rows"].length; i++) {
  269. let row = json["rows"][i];
  270. // 添加施釉合格率
  271. bjRates.push(parseFloat(row["施釉合格率"]));
  272. // 添加出窑数
  273. counts.push(parseFloat(row["出窑数"]));
  274. // 添加日期
  275. days.push(row["日期"]);
  276. }
  277. window.DayZLA.data.datasets[0].data = bjRates;
  278. window.DayZLA.data.datasets[1].data = counts;
  279. window.DayZLA.data.labels = days;
  280. window.DayZLA.update();
  281. }
  282. });
  283. }
  284. //施釉每月成品合格率(当月)
  285. function DailypassrateMonthDataNew() {
  286. $.get("demo.ashx?m=Dailypassratenew", function (data) {
  287. var json = JSON.parse(data);
  288. if (json["success"] == true) {
  289. console.log(json, '施釉每月成品合格率')
  290. // 存储施釉合格率
  291. let bjRates = window.DayZLB.data.datasets[0].data;
  292. // 存储出窑数
  293. let counts = window.DayZLB.data.datasets[1].data;
  294. // 存储日期
  295. let days = window.DayZLB.data.labels;
  296. for (let i = 0; i < json["rows"].length; i++) {
  297. let row = json["rows"][i];
  298. if (bjRates.length == 7) {
  299. bjRates.pop();
  300. }
  301. if (counts.length == 7) {
  302. counts.pop();
  303. days.pop();
  304. }
  305. // 添加施釉合格率
  306. bjRates.push(parseFloat(row["施釉合格率"]));
  307. // 添加出窑数
  308. counts.push(parseFloat(row["出窑数"]));
  309. // 添加日期
  310. days.push(row["日期"]);
  311. }
  312. window.DayZLB.data.datasets[0].data = bjRates;
  313. window.DayZLB.data.datasets[1].data = counts;
  314. window.DayZLB.data.labels = days;
  315. window.DayZLB.update();
  316. }
  317. });
  318. }
  319. //施釉每月成品合格率
  320. function DailypassrateMonthData() {
  321. $.get("demo.ashx?m=Dailypassrate&type=month&repair=false", function (data) {
  322. var json = JSON.parse(data);
  323. if (json["success"] == true) {
  324. console.log(json, '施釉每月成品合格率')
  325. // 存储施釉合格率
  326. let bjRates = [];
  327. // 存储出窑数
  328. let counts = [];
  329. // 存储日期
  330. let days = [];
  331. for (let i = 0; i < json["rows"].length; i++) {
  332. let row = json["rows"][i];
  333. // 添加施釉合格率
  334. bjRates.push(parseFloat(row["施釉合格率"]));
  335. // 添加出窑数
  336. counts.push(parseFloat(row["出窑数"]));
  337. // 添加日期
  338. days.push(row["日期"]);
  339. }
  340. window.DayZLB.data.datasets[0].data = bjRates;
  341. window.DayZLB.data.datasets[1].data = counts;
  342. window.DayZLB.data.labels = days;
  343. window.DayZLB.update();
  344. }
  345. });
  346. }
  347. //施釉每日成品冷补缺陷率
  348. function DailypassrateRepairData() {
  349. $.get("demo.ashx?m=Dailypassrate&type=day&repair=true", function (data) {
  350. var json = JSON.parse(data);
  351. if (json["success"] == true) {
  352. console.log(json, '施釉每日成品冷补缺陷率')
  353. // 存储施釉合格率
  354. let bjRates = [];
  355. // 存储出窑数
  356. let counts = [];
  357. // 存储日期
  358. let days = [];
  359. for (let i = 0; i < json["rows"].length; i++) {
  360. let row = json["rows"][i];
  361. // 添加施釉合格率
  362. bjRates.push(parseFloat(row["施釉合格率"]));
  363. // 添加出窑数
  364. counts.push(parseFloat(row["出窑数"]));
  365. // 添加日期
  366. days.push(row["日期"]);
  367. }
  368. window.DayZLC.data.datasets[0].data = bjRates;
  369. window.DayZLC.data.datasets[1].data = counts;
  370. window.DayZLC.data.labels = days;
  371. window.DayZLC.update();
  372. }
  373. });
  374. }
  375. //施釉每日半成品损坯率
  376. function DailypassrateSemifinishedData() {
  377. $.get("demo.ashx?m=DailypassrateSemifinished", function (data) {
  378. var json = JSON.parse(data);
  379. if (json["success"] == true) {
  380. console.log(json, '施釉每日半成品损坯率')
  381. // 存储施釉合格率
  382. let bjRates = [];
  383. // 存储出窑数
  384. let counts = [];
  385. // 存储日期
  386. let days = [];
  387. for (let i = 0; i < json["rows"].length; i++) {
  388. let row = json["rows"][i];
  389. // 添加施釉合格率
  390. bjRates.push(parseFloat(row["损坯率"]));
  391. // 添加出窑数
  392. counts.push(parseFloat(row["出窑数"]));
  393. // 添加日期
  394. days.push(row["日期"]);
  395. }
  396. window.DayZL.data.datasets[0].data = bjRates;
  397. window.DayZL.data.datasets[1].data = counts;
  398. window.DayZL.data.labels = days;
  399. window.DayZL.update();
  400. }
  401. });
  402. }
  403. //每小时产量折线图
  404. function ZxDataH() {
  405. $.get("demo.ashx?m=h", function (data) {
  406. var json = JSON.parse(data);
  407. if (json["success"] == true) {
  408. var SY1 = parseFloat(json["rows"][0]["一线施釉数量"]);
  409. var SY2 = parseFloat(json["rows"][1]["一线施釉数量"]);
  410. var SY3 = parseFloat(json["rows"][2]["一线施釉数量"]);
  411. var SY4 = parseFloat(json["rows"][3]["一线施釉数量"]);
  412. var SY5 = parseFloat(json["rows"][4]["一线施釉数量"]);
  413. var SY6 = parseFloat(json["rows"][5]["一线施釉数量"]);
  414. var SY7 = parseFloat(json["rows"][6]["一线施釉数量"]);
  415. var SY8 = parseFloat(json["rows"][7]["一线施釉数量"]);
  416. var SY9 = parseFloat(json["rows"][8]["一线施釉数量"]);
  417. var SY10 = parseFloat(json["rows"][9]["一线施釉数量"]);
  418. var SY11 = parseFloat(json["rows"][10]["一线施釉数量"]);
  419. var SY12 = parseFloat(json["rows"][11]["一线施釉数量"]);
  420. var SY13 = parseFloat(json["rows"][12]["一线施釉数量"]);
  421. var SY14 = parseFloat(json["rows"][13]["一线施釉数量"]);
  422. var SY15 = parseFloat(json["rows"][14]["一线施釉数量"]);
  423. var SY16 = parseFloat(json["rows"][15]["一线施釉数量"]);
  424. var SY17 = parseFloat(json["rows"][16]["一线施釉数量"]);
  425. var SY18 = parseFloat(json["rows"][17]["一线施釉数量"]);
  426. var SY19 = parseFloat(json["rows"][18]["一线施釉数量"]);
  427. var SY20 = parseFloat(json["rows"][19]["一线施釉数量"]);
  428. var SY21 = parseFloat(json["rows"][20]["一线施釉数量"]);
  429. var SY22 = parseFloat(json["rows"][21]["一线施釉数量"]);
  430. var SY23 = parseFloat(json["rows"][22]["一线施釉数量"]);
  431. var SY24 = parseFloat(json["rows"][23]["一线施釉数量"]);
  432. var SYX1 = parseFloat(json["rows"][0]["二线施釉数量"]);
  433. var SYX2 = parseFloat(json["rows"][1]["二线施釉数量"]);
  434. var SYX3 = parseFloat(json["rows"][2]["二线施釉数量"]);
  435. var SYX4 = parseFloat(json["rows"][3]["二线施釉数量"]);
  436. var SYX5 = parseFloat(json["rows"][4]["二线施釉数量"]);
  437. var SYX6 = parseFloat(json["rows"][5]["二线施釉数量"]);
  438. var SYX7 = parseFloat(json["rows"][6]["二线施釉数量"]);
  439. var SYX8 = parseFloat(json["rows"][7]["二线施釉数量"]);
  440. var SYX9 = parseFloat(json["rows"][8]["二线施釉数量"]);
  441. var SYX10 = parseFloat(json["rows"][9]["二线施釉数量"]);
  442. var SYX11 = parseFloat(json["rows"][10]["二线施釉数量"]);
  443. var SYX12 = parseFloat(json["rows"][11]["二线施釉数量"]);
  444. var SYX13 = parseFloat(json["rows"][12]["二线施釉数量"]);
  445. var SYX14 = parseFloat(json["rows"][13]["二线施釉数量"]);
  446. var SYX15 = parseFloat(json["rows"][14]["二线施釉数量"]);
  447. var SYX16 = parseFloat(json["rows"][15]["二线施釉数量"]);
  448. var SYX17 = parseFloat(json["rows"][16]["二线施釉数量"]);
  449. var SYX18 = parseFloat(json["rows"][17]["二线施釉数量"]);
  450. var SYX19 = parseFloat(json["rows"][18]["二线施釉数量"]);
  451. var SYX20 = parseFloat(json["rows"][19]["二线施釉数量"]);
  452. var SYX21 = parseFloat(json["rows"][20]["二线施釉数量"]);
  453. var SYX22 = parseFloat(json["rows"][21]["二线施釉数量"]);
  454. var SYX23 = parseFloat(json["rows"][22]["二线施釉数量"]);
  455. var SYX24 = parseFloat(json["rows"][23]["二线施釉数量"]);
  456. var day1 = json["rows"][0]["日期"];
  457. var day2 = json["rows"][1]["日期"];
  458. var day3 = json["rows"][2]["日期"];
  459. var day4 = json["rows"][3]["日期"];
  460. var day5 = json["rows"][4]["日期"];
  461. var day6 = json["rows"][5]["日期"];
  462. var day7 = json["rows"][6]["日期"];
  463. var day8 = json["rows"][7]["日期"];
  464. var day9 = json["rows"][8]["日期"];
  465. var day10 = json["rows"][9]["日期"];
  466. var day11 = json["rows"][10]["日期"];
  467. var day12 = json["rows"][11]["日期"];
  468. var day13 = json["rows"][12]["日期"];
  469. var day14 = json["rows"][13]["日期"];
  470. var day15 = json["rows"][14]["日期"];
  471. var day16 = json["rows"][15]["日期"];
  472. var day17 = json["rows"][16]["日期"];
  473. var day18 = json["rows"][17]["日期"];
  474. var day19 = json["rows"][18]["日期"];
  475. var day20 = json["rows"][19]["日期"];
  476. var day21 = json["rows"][20]["日期"];
  477. var day22 = json["rows"][21]["日期"];
  478. var day23 = json["rows"][22]["日期"];
  479. var day24 = json["rows"][23]["日期"];
  480. window.DayCLH.data.datasets[0].data = [SY1, SY2, SY3, SY4, SY5, SY6, SY7, SY8, SY9, SY10, SY11, SY12, SY13, SY14, SY15, SY16, SY17, SY18, SY19, SY20, SY21, SY22, SY23, SY24];
  481. window.DayCLH.data.datasets[1].data = [SYX1, SYX2, SYX3, SYX4, SYX5, SYX6, SYX7, SYX8, SYX9, SYX10, SYX11, SYX12, SYX13, SYX14, SYX15, SYX16, SYX17, SYX18, SYX19, SYX20, SYX21, SYX22, SYX23, SYX24];
  482. window.DayCLH.data.labels = [day1, day2, day3, day4, day5, day6, day7, day8, day9, day10, day11, day12, day13, day14, day15, day16, day17, day18, day19, day20, day21, day22, day23, day24];
  483. window.DayCLH.update();
  484. }
  485. });
  486. }
  487. //吹尘工号产量
  488. function CCData() {
  489. $.get("demo.ashx?m=cc", function (data) {
  490. var json = JSON.parse(data);
  491. let a = [];
  492. let b = [];
  493. if (json["success"] == true) {
  494. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  495. var num = parseInt(json["rows"].length);
  496. for (var i = 0; i < num; i++) {
  497. a.push(parseInt(json["rows"][i]["产量"]));
  498. b.push(json["rows"][i]["日期"]);
  499. }
  500. window.DayCC.data.datasets[0].data = a;
  501. window.DayCC.data.labels = b;
  502. window.DayCC.update();
  503. }
  504. });
  505. }
  506. //施釉工号产量
  507. function ClData() {
  508. $.get("demo.ashx?m=cl", function (data) {
  509. var json = JSON.parse(data);
  510. let a = [];
  511. let b = [];
  512. if (json["success"] == true) {
  513. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  514. var num = parseInt(json["rows"].length);
  515. for (var i = 0; i < num; i++) {
  516. a.push(parseInt(json["rows"][i]["产量"]));
  517. b.push(json["rows"][i]["工号"]);
  518. }
  519. window.DayCL.data.datasets[0].data = a;
  520. window.DayCL.data.labels = b;
  521. window.DayCL.update();
  522. }
  523. });
  524. }
  525. /**
  526. * 归属施釉缺陷(今日TOP3)
  527. * SY001 - SSY005 月成品缺陷(每月TOP5)
  528. * SSY002-SSY004 月成品缺陷(每月TOP5)
  529. * **/
  530. function DdfectData() {
  531. $.get("demo.ashx?m=defect", function (data) {
  532. var json = JSON.parse(data);
  533. let a1 = [];
  534. let b1 = [];
  535. let a2 = [];
  536. let b2 = [];
  537. let a3 = [];
  538. let b3 = [];
  539. if (json["success"] == true) {
  540. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  541. //归属施釉缺陷(今日TOP3)数据装载
  542. var num1 = parseInt(json["rows"]["Table1"].length);
  543. for (var i = 0; i < num1; i++) {
  544. a1.push(parseInt(json["rows"]["Table1"][i]["数量"]));
  545. b1.push(json["rows"]["Table1"][i]["缺陷名称"]);
  546. }
  547. window.DefectA.data.datasets[0].data = a1;
  548. window.DefectA.data.labels = b1;
  549. window.DefectA.update();
  550. //SSY001-SSY005 月成品缺陷(每月TOP5)数据装载
  551. var num2 = parseInt(json["rows"]["Table2"].length);
  552. for (var i = 0; i < num2; i++) {
  553. a2.push(parseInt(json["rows"]["Table2"][i]["数量"]));
  554. b2.push(json["rows"]["Table2"][i]["缺陷名称"]);
  555. }
  556. window.DefectC.data.datasets[0].data = a2;
  557. window.DefectC.data.labels = b2;
  558. window.DefectC.update();
  559. //SSY002-SSY004 月成品缺陷(每月TOP5)数据装载
  560. var num3 = parseInt(json["rows"]["Table3"].length);
  561. for (var i = 0; i < num3; i++) {
  562. a3.push(parseInt(json["rows"]["Table3"][i]["数量"]));
  563. b3.push(json["rows"]["Table3"][i]["缺陷名称"]);
  564. }
  565. window.DefectD.data.datasets[0].data = a3;
  566. window.DefectD.data.labels = b3;
  567. window.DefectD.update();
  568. }
  569. });
  570. }
  571. function DdfectDataB() {
  572. $.get("demo.ashx?m=defectb", function (data) {
  573. var json = JSON.parse(data);
  574. if (json["success"] == true) {
  575. var count1 = parseFloat(json["rows"][0]["数量"]);
  576. var count2 = parseFloat(json["rows"][1]["数量"]);
  577. var goodtype1 = json["rows"][0]["产品类别"];
  578. var goodtype2 = json["rows"][1]["产品类别"];
  579. window.DefectB.data.datasets[0].data = [count1, count2];
  580. window.DefectB.data.labels = [goodtype1, goodtype2]
  581. window.DefectB.update();
  582. }
  583. });
  584. }
  585. function initData() {
  586. window.chartColors = {
  587. red: 'rgb(255, 99, 132)',
  588. orange: 'rgb(255, 159, 64)',
  589. yellow: 'rgb(255, 250, 86)',
  590. green: 'rgb(75, 192, 192)',
  591. blue: 'rgb(54, 162, 250)',
  592. purple: 'rgb(153, 102, 255)',
  593. grey: 'rgb(231,233,237)'
  594. };
  595. var color = Chart.helpers.color;
  596. window.randomScalingFactor = function (num) {
  597. return Math.round(Math.random() * num);
  598. }
  599. Chart.defaults.global.defaultFontColor = 'white';
  600. Chart.defaults.global.defaultFontSize = 18;
  601. Chart.defaults.global.legend.display = false;
  602. //半检一检各项趋势图=====================================
  603. window.configDayZLA = {
  604. data: {
  605. labels: ["01", "02", "03", "04", "05", "06", "07"],
  606. datasets: [{
  607. type: 'line',
  608. label: "合格率",
  609. yAxesGroup: 'A',
  610. yAxisID: 'A',
  611. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  612. borderColor: window.chartColors.red,
  613. borderWidth: 2,
  614. pointRadius: 15,
  615. data: [0, 0, 0, 0, 0, 0, 0],
  616. fill: false
  617. }, {
  618. label: '产量',
  619. yAxesGroup: 'B',
  620. yAxisID: 'B',
  621. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  622. borderColor: window.chartColors.blue,
  623. borderWidth: 1,
  624. data: [0, 0, 0, 0, 0, 0, 0],
  625. fill: false
  626. }]
  627. },
  628. type: 'bar',
  629. options: {
  630. legend: {
  631. display: true
  632. },
  633. title: {
  634. display: false,
  635. text: '质量统计'
  636. },
  637. tooltips: {
  638. mode: 'index',
  639. intersect: false,
  640. },
  641. hover: {
  642. mode: 'nearest',
  643. intersect: true
  644. },
  645. scales: {
  646. xAxes: [{
  647. display: true,
  648. scaleLabel: {
  649. display: false,
  650. labelString: ''
  651. }
  652. }],
  653. yAxes: [{
  654. display: true,
  655. id: 'B',
  656. name: 'B',
  657. scalePositionLeft: true,
  658. position: 'left',
  659. scaleLabel: {
  660. display: false,
  661. labelString: 'Value'
  662. },
  663. ticks: {
  664. min: 0,
  665. stepSize: 500,
  666. max: 3000
  667. }
  668. }
  669. , {
  670. display: true,
  671. id: 'A',
  672. name: 'A',
  673. scalePositionLeft: false,
  674. position: 'right',
  675. scaleLabel: {
  676. display: false,
  677. labelString: 'Value2'
  678. },
  679. ticks: {
  680. min: 80,
  681. stepSize: 5,
  682. max: 100
  683. }
  684. }]
  685. }
  686. }
  687. };
  688. var ctxDayZLA = document.getElementById("canvasDayZLA").getContext("2d");
  689. window.DayZLA = new Chart(ctxDayZLA, configDayZLA);
  690. window.configDayZLB = {
  691. data: {
  692. labels: ["01", "02", "03", "04", "05", "06", "07"],
  693. datasets: [{
  694. type: 'line',
  695. label: "合格率",
  696. yAxesGroup: 'A',
  697. yAxisID: 'A',
  698. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  699. borderColor: window.chartColors.red,
  700. borderWidth: 2,
  701. pointRadius: 15,
  702. data: [0, 0, 0, 0, 0, 0, 0],
  703. fill: false
  704. }, {
  705. label: '产量',
  706. yAxesGroup: 'B',
  707. yAxisID: 'B',
  708. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  709. borderColor: window.chartColors.blue,
  710. borderWidth: 1,
  711. data: [0, 0, 0, 0, 0, 0, 0],
  712. fill: false
  713. }]
  714. },
  715. type: 'bar',
  716. options: {
  717. legend: {
  718. display: true
  719. },
  720. title: {
  721. display: false,
  722. text: '质量统计'
  723. },
  724. tooltips: {
  725. mode: 'index',
  726. intersect: false,
  727. },
  728. hover: {
  729. mode: 'nearest',
  730. intersect: true
  731. },
  732. scales: {
  733. xAxes: [{
  734. display: true,
  735. scaleLabel: {
  736. display: false,
  737. labelString: ''
  738. }
  739. }],
  740. yAxes: [{
  741. display: true,
  742. id: 'B',
  743. name: 'B',
  744. scalePositionLeft: true,
  745. position: 'left',
  746. scaleLabel: {
  747. display: false,
  748. labelString: 'Value'
  749. },
  750. ticks: {
  751. min: 0,
  752. stepSize: 15000,
  753. max: 90000
  754. }
  755. }
  756. , {
  757. display: true,
  758. id: 'A',
  759. name: 'A',
  760. scalePositionLeft: false,
  761. position: 'right',
  762. scaleLabel: {
  763. display: false,
  764. labelString: 'Value2'
  765. },
  766. ticks: {
  767. min: 80,
  768. stepSize: 5,
  769. max: 100
  770. }
  771. }]
  772. }
  773. }
  774. };
  775. var ctxDayZLB = document.getElementById("canvasDayZLB").getContext("2d");
  776. window.DayZLB = new Chart(ctxDayZLB, configDayZLB);
  777. window.configDayZLC = {
  778. data: {
  779. labels: ["01", "02", "03", "04", "05", "06", "07"],
  780. datasets: [{
  781. type: 'line',
  782. label: "合格率",
  783. yAxesGroup: 'A',
  784. yAxisID: 'A',
  785. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  786. borderColor: window.chartColors.red,
  787. borderWidth: 2,
  788. pointRadius: 15,
  789. data: [0, 0, 0, 0, 0, 0, 0],
  790. fill: false
  791. }, {
  792. label: '产量',
  793. yAxesGroup: 'B',
  794. yAxisID: 'B',
  795. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  796. borderColor: window.chartColors.blue,
  797. borderWidth: 1,
  798. data: [0, 0, 0, 0, 0, 0, 0],
  799. fill: false
  800. }]
  801. },
  802. type: 'bar',
  803. options: {
  804. legend: {
  805. display: true
  806. },
  807. title: {
  808. display: false,
  809. text: '质量统计'
  810. },
  811. tooltips: {
  812. mode: 'index',
  813. intersect: false,
  814. },
  815. hover: {
  816. mode: 'nearest',
  817. intersect: true
  818. },
  819. scales: {
  820. xAxes: [{
  821. display: true,
  822. scaleLabel: {
  823. display: false,
  824. labelString: ''
  825. }
  826. }],
  827. yAxes: [{
  828. display: true,
  829. id: 'B',
  830. name: 'B',
  831. scalePositionLeft: true,
  832. position: 'left',
  833. scaleLabel: {
  834. display: false,
  835. labelString: 'Value'
  836. },
  837. ticks: {
  838. min: 0,
  839. stepSize: 500,
  840. max: 3000
  841. }
  842. }
  843. , {
  844. display: true,
  845. id: 'A',
  846. name: 'A',
  847. scalePositionLeft: false,
  848. position: 'right',
  849. scaleLabel: {
  850. display: false,
  851. labelString: 'Value2'
  852. },
  853. ticks: {
  854. min: 80,
  855. stepSize: 5,
  856. max: 100
  857. }
  858. }]
  859. }
  860. }
  861. };
  862. var ctxDayZLC = document.getElementById("canvasDayZLC").getContext("2d");
  863. window.DayZLC = new Chart(ctxDayZLC, configDayZLC);
  864. window.configDayZL = {
  865. data: {
  866. labels: ["01", "02", "03", "04", "05", "06", "07"],
  867. datasets: [{
  868. type: 'line',
  869. label: "合格率",
  870. yAxesGroup: 'A',
  871. yAxisID: 'A',
  872. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  873. borderColor: window.chartColors.red,
  874. borderWidth: 2,
  875. pointRadius: 15,
  876. data: [0, 0, 0, 0, 0, 0, 0],
  877. fill: false
  878. }, {
  879. label: '产量',
  880. yAxesGroup: 'B',
  881. yAxisID: 'B',
  882. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  883. borderColor: window.chartColors.blue,
  884. borderWidth: 1,
  885. data: [0, 0, 0, 0, 0, 0, 0],
  886. fill: false
  887. }]
  888. },
  889. type: 'bar',
  890. options: {
  891. legend: {
  892. display: true
  893. },
  894. title: {
  895. display: false,
  896. text: '质量统计'
  897. },
  898. tooltips: {
  899. mode: 'index',
  900. intersect: false,
  901. },
  902. hover: {
  903. mode: 'nearest',
  904. intersect: true
  905. },
  906. scales: {
  907. xAxes: [{
  908. display: true,
  909. scaleLabel: {
  910. display: false,
  911. labelString: ''
  912. }
  913. }],
  914. yAxes: [{
  915. display: true,
  916. id: 'B',
  917. name: 'B',
  918. scalePositionLeft: true,
  919. position: 'left',
  920. scaleLabel: {
  921. display: false,
  922. labelString: 'Value'
  923. },
  924. ticks: {
  925. min: 0,
  926. stepSize: 500,
  927. max: 3000
  928. }
  929. }
  930. , {
  931. display: true,
  932. id: 'A',
  933. name: 'A',
  934. scalePositionLeft: false,
  935. position: 'right',
  936. scaleLabel: {
  937. display: false,
  938. labelString: 'Value2'
  939. },
  940. ticks: {
  941. min: 80,
  942. stepSize: 5,
  943. max: 100
  944. }
  945. }]
  946. }
  947. }
  948. };
  949. var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
  950. window.DayZL = new Chart(ctxDayZL, configDayZL);
  951. //===================================================
  952. //归属施釉缺陷(今日TOP3===========================================
  953. window.configDefectA = {
  954. data: {
  955. labels: ['1', '2', '3'],
  956. datasets: [{
  957. label: '工序',
  958. backgroundColor: [
  959. color(window.chartColors.red).alpha(0.35).rgbString(),
  960. color(window.chartColors.blue).alpha(0.35).rgbString(),
  961. color(window.chartColors.green).alpha(0.35).rgbString(),
  962. color(window.chartColors.orange).alpha(0.35).rgbString(),
  963. color(window.chartColors.purple).alpha(0.35).rgbString()
  964. ],
  965. fill: false,
  966. borderColor: [
  967. window.chartColors.red,
  968. window.chartColors.blue,
  969. window.chartColors.green,
  970. window.chartColors.orange,
  971. window.chartColors.purple
  972. ],
  973. borderWidth: 2,
  974. pointRadius: 30,
  975. data: [0, 0, 0]
  976. }]
  977. },
  978. type: 'pie',
  979. options: {
  980. legend: {
  981. display: true
  982. },
  983. title: {
  984. display: false,
  985. text: "甲班缺陷"
  986. },
  987. tooltips: {
  988. mode: 'point',
  989. intersect: false
  990. },
  991. responsive: true
  992. }
  993. };
  994. var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
  995. window.DefectA = new Chart(ctxDefectA, configDefectA);
  996. //SSY001-SSY005 月成品缺陷(每月TOP5)===========================================
  997. window.configDefectC = {
  998. data: {
  999. labels: ['1', '2', '3', '4', '5'],
  1000. datasets: [{
  1001. label: '工序',
  1002. backgroundColor: [
  1003. color(window.chartColors.red).alpha(0.35).rgbString(),
  1004. color(window.chartColors.blue).alpha(0.35).rgbString(),
  1005. color(window.chartColors.green).alpha(0.35).rgbString(),
  1006. color(window.chartColors.orange).alpha(0.35).rgbString(),
  1007. color(window.chartColors.purple).alpha(0.35).rgbString()
  1008. ],
  1009. fill: false,
  1010. borderColor: [
  1011. window.chartColors.red,
  1012. window.chartColors.blue,
  1013. window.chartColors.green,
  1014. window.chartColors.orange,
  1015. window.chartColors.purple
  1016. ],
  1017. borderWidth: 2,
  1018. pointRadius: 30,
  1019. data: [0, 0, 0, 0, 0]
  1020. }]
  1021. },
  1022. type: 'pie',
  1023. options: {
  1024. legend: {
  1025. display: true
  1026. },
  1027. title: {
  1028. display: false,
  1029. text: "甲班缺陷"
  1030. },
  1031. tooltips: {
  1032. mode: 'point',
  1033. intersect: false
  1034. },
  1035. responsive: true
  1036. }
  1037. };
  1038. var ctxDefectC = document.getElementById("canvasDefectC").getContext("2d");
  1039. window.DefectC = new Chart(ctxDefectC, configDefectC);
  1040. //SSY002-SSY004 月成品缺陷(每月TOP5)==============================================
  1041. window.configDefectD = {
  1042. data: {
  1043. labels: ['1', '2', '3', '4', '5'],
  1044. datasets: [{
  1045. label: '工序',
  1046. backgroundColor: [
  1047. color(window.chartColors.red).alpha(0.35).rgbString(),
  1048. color(window.chartColors.blue).alpha(0.35).rgbString(),
  1049. color(window.chartColors.green).alpha(0.35).rgbString(),
  1050. color(window.chartColors.orange).alpha(0.35).rgbString(),
  1051. color(window.chartColors.purple).alpha(0.35).rgbString()
  1052. ],
  1053. fill: false,
  1054. borderColor: [
  1055. window.chartColors.red,
  1056. window.chartColors.blue,
  1057. window.chartColors.green,
  1058. window.chartColors.orange,
  1059. window.chartColors.purple
  1060. ],
  1061. borderWidth: 2,
  1062. pointRadius: 30,
  1063. data: [0, 0, 0, 0, 0]
  1064. }]
  1065. },
  1066. type: 'pie',
  1067. options: {
  1068. legend: {
  1069. display: true
  1070. },
  1071. title: {
  1072. display: false,
  1073. text: "甲班缺陷"
  1074. },
  1075. tooltips: {
  1076. mode: 'point',
  1077. intersect: false
  1078. },
  1079. responsive: true
  1080. }
  1081. };
  1082. var ctxDefectD = document.getElementById("canvasDefectD").getContext("2d");
  1083. window.DefectD = new Chart(ctxDefectD, configDefectD);
  1084. //===================================================
  1085. //成检缺陷TOP5===========================================
  1086. window.configDefectB = {
  1087. data: {
  1088. labels: ['缺陷1', '缺陷2', '缺陷3'],
  1089. datasets: [{
  1090. label: '工序',
  1091. backgroundColor: [
  1092. color(window.chartColors.red).alpha(0.35).rgbString(),
  1093. color(window.chartColors.blue).alpha(0.35).rgbString(),
  1094. color(window.chartColors.green).alpha(0.35).rgbString(),
  1095. color(window.chartColors.orange).alpha(0.35).rgbString(),
  1096. color(window.chartColors.purple).alpha(0.35).rgbString()
  1097. ],
  1098. fill: false,
  1099. borderColor: [
  1100. window.chartColors.red,
  1101. window.chartColors.blue,
  1102. window.chartColors.green,
  1103. window.chartColors.orange,
  1104. window.chartColors.purple
  1105. ],
  1106. borderWidth: 2,
  1107. pointRadius: 30,
  1108. data: [0, 0, 0]
  1109. }]
  1110. },
  1111. type: 'pie',
  1112. options: {
  1113. legend: {
  1114. display: true
  1115. },
  1116. title: {
  1117. display: false,
  1118. text: "甲班缺陷"
  1119. },
  1120. tooltips: {
  1121. mode: 'point',
  1122. intersect: false
  1123. },
  1124. responsive: true
  1125. }
  1126. };
  1127. var ctxDefectB = document.getElementById("canvasDefectB").getContext("2d");
  1128. window.DefectB = new Chart(ctxDefectB, configDefectB);
  1129. //===================================================
  1130. //侧漏气产量柱状图=====================================
  1131. window.canvasDayCL = {
  1132. data: {
  1133. labels: ["01", "02", "03", "04", "05", "06", "07"],
  1134. datasets: [
  1135. {
  1136. label: "产量",
  1137. fill: false,
  1138. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  1139. borderColor: window.chartColors.blue,
  1140. borderWidth: 2,
  1141. pointRadius: 15,
  1142. data: [0, 0, 0, 0, 0, 0, 0, 0]
  1143. }
  1144. ]
  1145. },
  1146. type: 'bar',
  1147. options: {
  1148. legend: {
  1149. display: true
  1150. },
  1151. title: {
  1152. display: true,
  1153. text: ""
  1154. },
  1155. tooltips: {
  1156. mode: 'point',
  1157. intersect: false
  1158. },
  1159. responsive: true,
  1160. scales: {
  1161. xAxes: [{
  1162. stacked: false,
  1163. barThickness: 40
  1164. }],
  1165. yAxes: [{
  1166. display: true,
  1167. stacked: false,
  1168. ticks: {
  1169. min: 0,
  1170. //stepSize: 200,
  1171. //max: 1000
  1172. }
  1173. }]
  1174. }
  1175. }
  1176. };
  1177. var ctxDayCL = document.getElementById("canvasDayCL").getContext("2d");
  1178. window.DayCL = new Chart(ctxDayCL, canvasDayCL);
  1179. //===================================================
  1180. //每小时产量=========================================
  1181. window.canvasHourCL = {
  1182. data: {
  1183. labels: [],
  1184. datasets: [{
  1185. label: "施釉4+1",
  1186. fill: false,
  1187. backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
  1188. borderColor: window.chartColors.red,
  1189. borderWidth: 2,
  1190. pointRadius: 12,
  1191. data: []
  1192. }, {
  1193. label: "施釉6+1",
  1194. fill: false,
  1195. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  1196. borderColor: window.chartColors.blue,
  1197. borderWidth: 2,
  1198. pointRadius: 12,
  1199. data: []
  1200. }]
  1201. },
  1202. type: 'line',
  1203. options: {
  1204. responsive: true,
  1205. legend: {
  1206. display: true
  1207. },
  1208. title: {
  1209. display: true,
  1210. text: '每小时产量'
  1211. },
  1212. tooltips: {
  1213. mode: 'index',
  1214. intersect: false,
  1215. },
  1216. hover: {
  1217. mode: 'nearest',
  1218. intersect: true
  1219. },
  1220. scales: {
  1221. xAxes: [{
  1222. display: true,
  1223. scaleLabel: {
  1224. display: false,
  1225. labelString: ''
  1226. }
  1227. }],
  1228. yAxes: [{
  1229. display: true,
  1230. scaleLabel: {
  1231. display: false,
  1232. labelString: 'Value'
  1233. },
  1234. ticks: {
  1235. min: 0,
  1236. stepSize: 50,
  1237. max: 300
  1238. }
  1239. }]
  1240. }
  1241. }
  1242. };
  1243. var ctxHourCL = document.getElementById("canvasHourCL").getContext("2d");
  1244. window.DayCLH = new Chart(ctxHourCL, canvasHourCL);
  1245. //===================================================
  1246. //吹尘产量===========================================
  1247. window.canvasDayCC = {
  1248. barWidth: 10,
  1249. data: {
  1250. barWidth: 10,
  1251. labels: ["01", "02", "03", "04", "05", "06", "07"],
  1252. datasets: [
  1253. {
  1254. label: "产量",
  1255. fill: false,
  1256. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  1257. borderColor: window.chartColors.blue,
  1258. borderWidth: 2,
  1259. pointRadius: 15,
  1260. barWidth: 10,
  1261. categoryPercentage: 0.5,
  1262. data: [0, 0, 0, 0, 0, 0, 0, 0]
  1263. }
  1264. ]
  1265. },
  1266. type: 'bar',
  1267. barWidth: 10,
  1268. options: {
  1269. legend: {
  1270. display: true
  1271. },
  1272. barWidth: 10,
  1273. title: {
  1274. display: true,
  1275. text: ""
  1276. },
  1277. tooltips: {
  1278. mode: 'point',
  1279. intersect: false
  1280. },
  1281. responsive: true,
  1282. scales: {
  1283. xAxes: [{
  1284. barWidth: 10,
  1285. stacked: false,
  1286. barThickness: 40
  1287. }],
  1288. yAxes: [{
  1289. display: true,
  1290. stacked: false,
  1291. ticks: {
  1292. min: 0,
  1293. //barWidth: 10,
  1294. //stepSize: 200,
  1295. //max: 1000
  1296. }
  1297. }]
  1298. }
  1299. }
  1300. };
  1301. var ctxDayCC = document.getElementById("canvasDayCC").getContext("2d");
  1302. window.DayCC = new Chart(ctxDayCC, canvasDayCC);
  1303. //===================================================
  1304. //精坯库库存===========================================
  1305. window.canvasJPKC = {
  1306. data: {
  1307. labels: ['1', '2', '3'],
  1308. datasets: [{
  1309. label: '工序',
  1310. backgroundColor: [
  1311. color(window.chartColors.red).alpha(0.35).rgbString(),
  1312. color(window.chartColors.blue).alpha(0.35).rgbString(),
  1313. color(window.chartColors.green).alpha(0.35).rgbString(),
  1314. color(window.chartColors.orange).alpha(0.35).rgbString(),
  1315. color(window.chartColors.purple).alpha(0.35).rgbString()
  1316. ],
  1317. fill: false,
  1318. borderColor: [
  1319. window.chartColors.red,
  1320. window.chartColors.blue,
  1321. window.chartColors.green,
  1322. window.chartColors.orange,
  1323. window.chartColors.purple
  1324. ],
  1325. borderWidth: 2,
  1326. pointRadius: 30,
  1327. data: [0, 0, 0]
  1328. }]
  1329. },
  1330. type: 'pie',
  1331. options: {
  1332. legend: {
  1333. display: true
  1334. },
  1335. title: {
  1336. display: false,
  1337. text: "甲班缺陷"
  1338. },
  1339. tooltips: {
  1340. mode: 'point',
  1341. intersect: false
  1342. },
  1343. responsive: true
  1344. }
  1345. };
  1346. var ctxDefectJpkc = document.getElementById("canvasJPKC").getContext("2d");
  1347. window.Defectjpkc = new Chart(ctxDefectJpkc, canvasJPKC);
  1348. //===================================================
  1349. }
  1350. </script>
  1351. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  1352. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  1353. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  1354. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  1355. </body>
  1356. </html>