index.html 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055
  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 rel="stylesheet" href="/plugins/bootstrap-4.3.1/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
  10. <link href="/Plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
  11. <link rel="stylesheet" href="DashBoard.css?v3" />
  12. <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
  13. <script src="/Plugins/xrequest/xrequest.min.js"></script>
  14. <title>东科软件</title>
  15. </head>
  16. <body>
  17. <!--导航菜单-->
  18. <script src="/main/common/navbar.js"></script>
  19. <!--统计-->
  20. <div class="container-fluid">
  21. <!--页头-->
  22. <div class="row">
  23. <div class="col-4 d-inline-flex align-items-center justify-content-start">
  24. <img src="/Img/dongke_logo_white.png" style="height: 40px;" />
  25. <span class="pl-3" id="报表加载"></span>
  26. </div>
  27. <div class="col-4 d-inline-flex align-items-center justify-content-center">
  28. <h3 class="text-center"><span style="font-weight:600;font-size:36px;">二检(质量)</span></h3>
  29. </div>
  30. <div class="col-4 d-inline-flex align-items-center justify-content-end">
  31. <span id="当前时间"></span>
  32. <a class="pl-2" href="javascript:void(0)" onclick="fullScreen(); $('#navbar').toggle();">
  33. <img src="/Img/hegii_logo_white.png" style="height: 26px;" />
  34. </a>
  35. </div>
  36. </div>
  37. <!--行1-->
  38. <div class="row pt-0">
  39. <div class="col-12 pt-0">
  40. <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:280px">
  41. <!--每小时合格率-->
  42. <div class="d-flex justify-content-center">
  43. <canvas id="canvasHour" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. <!--行2-->
  49. <div class="row pt-0">
  50. <div class="col-12 pt-0">
  51. <div class="p-3 rounded border border-secondary d-flex flex-column" style="height:280px">
  52. <!--每日合格率-->
  53. <div class="d-flex justify-content-center">
  54. <canvas id="canvasDay" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <!--行3-->
  60. <div class="row pt-0">
  61. <div class="col-12 pt-0">
  62. <div class="p-3 rounded border border-secondary d-flex flex-row" style="height:280px">
  63. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%; margin:1px;">
  64. <!--二检当天累计-->
  65. <div style="padding-top:5px;">二检当天累计</div>
  66. <canvas id="piecanvas1" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:220px; width:100%; padding-bottom:5px;"></canvas>
  67. </div>
  68. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%; margin:1px;">
  69. <canvas id="canvasCount1" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  70. </div>
  71. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%;margin:1px;">
  72. <canvas id="canvasCount2" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  73. </div>
  74. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%;margin:1px;">
  75. <canvas id="canvasCount3" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  76. </div>
  77. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%;margin:1px;">
  78. <canvas id="canvasCount4" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="row pt-0">
  84. <div class="col-12 pt-0">
  85. <div class="p-3 rounded border border-secondary d-flex flex-row" style="height:280px">
  86. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%; margin:1px;">
  87. <!--二检当月累计-->
  88. <div style="padding-top:5px;">二检当月累计</div>
  89. <canvas id="piecanvas2" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:220px; width:100%; padding-bottom:5px;"></canvas>
  90. </div>
  91. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%; margin:1px;">
  92. <canvas id="canvasCount11" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  93. </div>
  94. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%;margin:1px;">
  95. <canvas id="canvasCount12" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  96. </div>
  97. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%;margin:1px;">
  98. <canvas id="canvasCount13" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  99. </div>
  100. <div style="flex:1 1 auto;align-self:center;text-align:center;width:20%;height:100%;margin:1px;">
  101. <canvas id="canvasCount14" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:260px;width:100%"></canvas>
  102. </div>
  103. </div>
  104. </div>
  105. <div style="height:300px;"></div>
  106. </div>
  107. <!--行4-->
  108. </div>
  109. <!--版权信息-->
  110. <!--<script src="../common/footer.js"></script>-->
  111. <script src="/Plugins/bootstrap-4.3.1/js/bootstrap.bundle.min.js"></script>
  112. <script src="/Plugins/bootstrap-table/bootstrap-table.min.js"></script>
  113. <script src="/Plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
  114. <script src="/Plugins/sweetalert/sweetalert.min.js"></script>
  115. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  116. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  117. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  118. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  119. <script>
  120. //缺陷统计刷新时间
  121. var refreshTime1 = 60000;
  122. var currentTime1 = 0;
  123. var doGetData;
  124. var doGetTime;
  125. var frameHeight;
  126. var tableHeight;
  127. var offsetHeight = 20;
  128. $(document).ready(function () {
  129. //设置缩放
  130. //xuwell.setScale(1);
  131. //初始化
  132. init();
  133. //首次加载
  134. //loadData();
  135. //定时刷新数据
  136. doGetData = setInterval(function () { timeUpdate(); }, 1000);
  137. //刷新时间
  138. loadServerTime();
  139. doGetTime = setInterval(function () { loadServerTime(); }, 15000);
  140. });
  141. //取服务器时间
  142. function loadServerTime() {
  143. $.get('../api/GetDateTime.ashx', function (data) {
  144. var json = JSON.parse(data);
  145. if (json["success"] == true) {
  146. $('#当前时间').html(json["rows"]["时间"]);
  147. }
  148. });
  149. }
  150. function timeUpdate() {
  151. if (currentTime1 <= 0) {
  152. loadData(function () { currentTime1 = refreshTime1; });
  153. }
  154. else {
  155. if (currentTime1 > 0) {
  156. $('#报表加载').html('刷新:' + currentTime1 / 1000 + ' 秒');
  157. currentTime1 = currentTime1 - 1000;
  158. }
  159. }
  160. }
  161. function loadData(callback) {
  162. //正式数据===========================================================
  163. //加载每小时合格率
  164. $.get("hourCount.ashx", function (data) {
  165. var jsonHourCount = JSON.parse(data);
  166. if (jsonHourCount["success"] == true) {
  167. window.Hour.data.labels = [];
  168. window.Hour.data.datasets[0].data = [];
  169. window.Hour.data.datasets[1].data = [];
  170. window.Hour.data.labels = [];
  171. window.Hour.data.datasets[0].data = [];
  172. window.Hour.data.datasets[1].data = [];
  173. for (var i = 0; i < jsonHourCount["rows"].length; i++) {
  174. window.Hour.data.labels.push(jsonHourCount["rows"][i]["项目"]);
  175. window.Hour.data.datasets[0].data.push(jsonHourCount["rows"][i]["合格目标"]);
  176. window.Hour.data.datasets[1].data.push(jsonHourCount["rows"][i]["合格率"]);
  177. }
  178. window.Hour.update();
  179. }
  180. });
  181. //加载每日合格和报废
  182. $.get("dayCount.ashx", function (data) {
  183. var jsonDayCount = JSON.parse(data);
  184. if (jsonDayCount["success"] == true) {
  185. window.Day.data.labels = [];
  186. window.Day.data.datasets[0].data = [];
  187. window.Day.data.datasets[1].data = [];
  188. window.Day.data.labels = [];
  189. window.Day.data.datasets[0].data = [];
  190. window.Day.data.datasets[1].data = [];
  191. for (var i = 0; i < jsonDayCount["rows"].length; i++) {
  192. window.Day.data.labels.push(jsonDayCount["rows"][i]["项目"]);
  193. window.Day.data.datasets[0].data.push(jsonDayCount["rows"][i]["合格目标"]);
  194. window.Day.data.datasets[1].data.push(jsonDayCount["rows"][i]["合格率"]);
  195. }
  196. window.Day.update();
  197. }
  198. });
  199. //二检当天
  200. var semi2daytotal = $.ajax({ url: "semi2dayCount.ashx?m=total", dataType: "json", type: "get" });
  201. var semi2daydefectname = $.ajax({ url: "semi2dayCount.ashx?m=defectname", dataType: "json", type: "get" });
  202. var semi2daydefectposition = $.ajax({ url: "semi2dayCount.ashx?m=defectposition", dataType: "json", type: "get" });
  203. var semi2daygoodscode = $.ajax({ url: "semi2dayCount.ashx?m=goodscode", dataType: "json", type: "get" });
  204. var semi2daygroutingline = $.ajax({ url: "semi2dayCount.ashx?m=groutingline", dataType: "json", type: "get" });
  205. $.when(semi2daytotal, semi2daydefectname, semi2daydefectposition, semi2daygoodscode, semi2daygroutingline).then(
  206. function (result1,result2, result3, result4, result5) {
  207. //二检当天饼图
  208. var jsonData1 = result1[0];
  209. if (jsonData1["success"] == true) {
  210. var n1 = jsonData1["rows"][0]["NUM1"];
  211. var n2 = jsonData1["rows"][0]["NUM2"];
  212. var n3 = jsonData1["rows"][0]["NUM3"];
  213. var num1 = jsonData1["rows"][0]["QUALIFIED"];
  214. var num2 = jsonData1["rows"][0]["UNQUALIFIED"];
  215. var num3 = jsonData1["rows"][0]["SCRAP"];
  216. window.pieConfig1.data.labels = ["良品:" + n1, "不良:" + n2, "报废:" + n3];
  217. window.pieConfig1.data.datasets[0].data = [num1, num2, num3];
  218. window.pie1.update();
  219. }
  220. //加载二检当天缺陷统计数据
  221. var jsonData2 = result2[0];
  222. if (jsonData2["success"] == true) {
  223. var labelsArray = [];
  224. var datalabelsArray = [];
  225. for (var n = 0; n < jsonData2["rows"].length; n++) {
  226. labelsArray.push(jsonData2["rows"][n]["DEFECTNAME"]);
  227. datalabelsArray.push(jsonData2["rows"][n]["DTOTAL"]);
  228. }
  229. window.Count1.data.labels = labelsArray;
  230. window.Count1.data.datasets[0].data = datalabelsArray;
  231. //window.Count1.data.labels = [jsonData2["rows"][0]["DEFECTNAME"], jsonData2["rows"][1]["DEFECTNAME"], jsonData2["rows"][2]["DEFECTNAME"], jsonData2["rows"][3]["DEFECTNAME"], jsonData2["rows"][4]["DEFECTNAME"]];
  232. //window.Count1.data.datasets[0].data = [jsonData2["rows"][0]["DTOTAL"], jsonData2["rows"][1]["DTOTAL"], jsonData2["rows"][2]["DTOTAL"], jsonData2["rows"][3]["DTOTAL"], jsonData2["rows"][4]["DTOTAL"]];
  233. window.Count1.update();
  234. }
  235. //加载二检当天位置累计数据
  236. var jsonData3 = result3[0];
  237. if (jsonData3["success"] == true) {
  238. var labelsArray = [];
  239. var datalabelsArray = [];
  240. for (var n = 0; n < jsonData3["rows"].length; n++) {
  241. labelsArray.push(jsonData3["rows"][n]["DEFECTPOSITIONNAME"]);
  242. datalabelsArray.push(jsonData3["rows"][n]["PTOTAL"]);
  243. }
  244. window.Count2.data.labels = labelsArray;
  245. window.Count2.data.datasets[0].data = datalabelsArray;
  246. //window.Count2.data.labels = [jsonData3["rows"][0]["DEFECTPOSITIONNAME"], jsonData3["rows"][1]["DEFECTPOSITIONNAME"], jsonData3["rows"][2]["DEFECTPOSITIONNAME"], jsonData3["rows"][3]["DEFECTPOSITIONNAME"], jsonData3["rows"][4]["DEFECTPOSITIONNAME"]];
  247. //window.Count2.data.datasets[0].data = [jsonData3["rows"][0]["PTOTAL"], jsonData3["rows"][1]["PTOTAL"], jsonData3["rows"][2]["PTOTAL"], jsonData3["rows"][3]["PTOTAL"], jsonData3["rows"][4]["PTOTAL"]];
  248. window.Count2.update();
  249. }
  250. //加载二检当天产品累计数据
  251. var jsonData4 = result4[0];
  252. if (jsonData4["success"] == true) {
  253. var labelsArray = [];
  254. var datalabelsArray = [];
  255. for (var n = 0; n < jsonData4["rows"].length; n++) {
  256. labelsArray.push(jsonData4["rows"][n]["GOODSCODE"]);
  257. datalabelsArray.push(jsonData4["rows"][n]["GTOTAL"]);
  258. }
  259. window.Count3.data.labels = labelsArray;
  260. window.Count3.data.datasets[0].data = datalabelsArray;
  261. //window.Count3.data.labels = [jsonData4["rows"][0]["GOODSCODE"], jsonData4["rows"][1]["GOODSCODE"], jsonData4["rows"][2]["GOODSCODE"], jsonData4["rows"][3]["GOODSCODE"], jsonData4["rows"][4]["GOODSCODE"]];
  262. //window.Count3.data.datasets[0].data = [jsonData4["rows"][0]["GTOTAL"], jsonData4["rows"][1]["GTOTAL"], jsonData4["rows"][2]["GTOTAL"], jsonData4["rows"][3]["GTOTAL"], jsonData4["rows"][4]["GTOTAL"]];
  263. window.Count3.update();
  264. }
  265. //加载二检当天线号累计数据
  266. var jsonData5 = result5[0];
  267. if (jsonData5["success"] == true) {
  268. var labelsArray = [];
  269. var datalabelsArray = [];
  270. for (var n = 0; n < jsonData5["rows"].length; n++) {
  271. labelsArray.push(jsonData5["rows"][n]["GROUTINGLINENAME"]);
  272. datalabelsArray.push(jsonData5["rows"][n]["LTOTAL"]);
  273. }
  274. window.Count4.data.labels = labelsArray;
  275. window.Count4.data.datasets[0].data = datalabelsArray;
  276. //window.Count4.data.labels = [jsonData5["rows"][0]["GROUTINGLINENAME"], jsonData5["rows"][1]["GROUTINGLINENAME"], jsonData5["rows"][2]["GROUTINGLINENAME"], jsonData5["rows"][3]["GROUTINGLINENAME"]];
  277. //window.Count4.data.datasets[0].data = [jsonData5["rows"][0]["LTOTAL"], jsonData5["rows"][1]["LTOTAL"], jsonData5["rows"][2]["LTOTAL"], jsonData5["rows"][3]["LTOTAL"]];
  278. window.Count4.update();
  279. }
  280. });
  281. //二检当月
  282. var semi2monthtotal = $.ajax({ url: "semi2monthCount.ashx?m=total", dataType: "json", type: "get" });
  283. var semi2monthdefectname = $.ajax({ url: "semi2monthCount.ashx?m=defectname", dataType: "json", type: "get" });
  284. var semi2monthdefectposition = $.ajax({ url: "semi2monthCount.ashx?m=defectposition", dataType: "json", type: "get" });
  285. var semi2monthgoodscode = $.ajax({ url: "semi2monthCount.ashx?m=goodscode", dataType: "json", type: "get" });
  286. var semi2monthgroutingline = $.ajax({ url: "semi2monthCount.ashx?m=groutingline", dataType: "json", type: "get" });
  287. $.when(semi2monthtotal, semi2monthdefectname, semi2monthdefectposition, semi2monthgoodscode, semi2monthgroutingline).then(
  288. function (result1,result2, result3, result4, result5) {
  289. //二检当月饼图
  290. var jsonData1 = result1[0];
  291. if (jsonData1["success"] == true) {
  292. var n1 = jsonData1["rows"][0]["NUM1"];
  293. var n2 = jsonData1["rows"][0]["NUM2"];
  294. var n3 = jsonData1["rows"][0]["NUM3"];
  295. var num1 = jsonData1["rows"][0]["QUALIFIED"];
  296. var num2 = jsonData1["rows"][0]["UNQUALIFIED"];
  297. var num3 = jsonData1["rows"][0]["SCRAP"];
  298. window.pieConfig2.data.labels = ["良品:" + n1, "不良:" + n2, "报废:" + n3];
  299. window.pieConfig2.data.datasets[0].data = [num1, num2, num3];
  300. window.pie2.update();
  301. }
  302. //加载二检当月缺陷统计数据
  303. var jsonData2 = result2[0];
  304. if (jsonData2["success"] == true) {
  305. var labelsArray = [];
  306. var datalabelsArray = [];
  307. for (var n = 0; n < jsonData2["rows"].length; n++) {
  308. labelsArray.push(jsonData2["rows"][n]["DEFECTNAME"]);
  309. datalabelsArray.push(jsonData2["rows"][n]["DTOTAL"]);
  310. }
  311. window.Count11.data.labels = labelsArray;
  312. window.Count11.data.datasets[0].data = datalabelsArray;
  313. //window.Count11.data.labels = [jsonData2["rows"][0]["DEFECTNAME"], jsonData2["rows"][1]["DEFECTNAME"], jsonData2["rows"][2]["DEFECTNAME"], jsonData2["rows"][3]["DEFECTNAME"], jsonData2["rows"][4]["DEFECTNAME"]];
  314. //window.Count11.data.datasets[0].data = [jsonData2["rows"][0]["DTOTAL"], jsonData2["rows"][1]["DTOTAL"], jsonData2["rows"][2]["DTOTAL"], jsonData2["rows"][3]["DTOTAL"], jsonData2["rows"][4]["DTOTAL"]];
  315. window.Count11.update();
  316. }
  317. //加载二检当月位置累计数据
  318. var jsonData3 = result3[0];
  319. if (jsonData3["success"] == true) {
  320. var labelsArray = [];
  321. var datalabelsArray = [];
  322. for (var n = 0; n < jsonData3["rows"].length; n++) {
  323. labelsArray.push(jsonData3["rows"][n]["DEFECTPOSITIONNAME"]);
  324. datalabelsArray.push(jsonData3["rows"][n]["PTOTAL"]);
  325. }
  326. window.Count12.data.labels = labelsArray;
  327. window.Count12.data.datasets[0].data = datalabelsArray;
  328. //window.Count12.data.labels = [jsonData3["rows"][0]["DEFECTPOSITIONNAME"], jsonData3["rows"][1]["DEFECTPOSITIONNAME"], jsonData3["rows"][2]["DEFECTPOSITIONNAME"], jsonData3["rows"][3]["DEFECTPOSITIONNAME"], jsonData3["rows"][4]["DEFECTPOSITIONNAME"]];
  329. //window.Count12.data.datasets[0].data = [jsonData3["rows"][0]["PTOTAL"], jsonData3["rows"][1]["PTOTAL"], jsonData3["rows"][2]["PTOTAL"], jsonData3["rows"][3]["PTOTAL"], jsonData3["rows"][4]["PTOTAL"]];
  330. window.Count12.update();
  331. }
  332. //加载二检当月产品累计数据
  333. var jsonData4 = result4[0];
  334. if (jsonData4["success"] == true) {
  335. var labelsArray = [];
  336. var datalabelsArray = [];
  337. for (var n = 0; n < jsonData4["rows"].length; n++) {
  338. labelsArray.push(jsonData4["rows"][n]["GOODSCODE"]);
  339. datalabelsArray.push(jsonData4["rows"][n]["GTOTAL"]);
  340. }
  341. window.Count13.data.labels = labelsArray;
  342. window.Count13.data.datasets[0].data = datalabelsArray;
  343. //window.Count13.data.labels = [jsonData4["rows"][0]["GOODSCODE"], jsonData4["rows"][1]["GOODSCODE"], jsonData4["rows"][2]["GOODSCODE"], jsonData4["rows"][3]["GOODSCODE"], jsonData4["rows"][4]["GOODSCODE"]];
  344. //window.Count13.data.datasets[0].data = [jsonData4["rows"][0]["GTOTAL"], jsonData4["rows"][1]["GTOTAL"], jsonData4["rows"][2]["GTOTAL"], jsonData4["rows"][3]["GTOTAL"], jsonData4["rows"][4]["GTOTAL"]];
  345. window.Count13.update();
  346. }
  347. //加载二检当月线号累计数据
  348. var jsonData5 = result5[0];
  349. if (jsonData5["success"] == true) {
  350. var labelsArray = [];
  351. var datalabelsArray = [];
  352. for (var n = 0; n < jsonData5["rows"].length; n++) {
  353. labelsArray.push(jsonData5["rows"][n]["GROUTINGLINENAME"]);
  354. datalabelsArray.push(jsonData5["rows"][n]["LTOTAL"]);
  355. }
  356. window.Count14.data.labels = labelsArray;
  357. window.Count14.data.datasets[0].data = datalabelsArray;
  358. //window.Count14.data.labels = [jsonData5["rows"][0]["GROUTINGLINENAME"], jsonData5["rows"][1]["GROUTINGLINENAME"], jsonData5["rows"][2]["GROUTINGLINENAME"], jsonData5["rows"][3]["GROUTINGLINENAME"]];
  359. //window.Count14.data.datasets[0].data = [jsonData5["rows"][0]["LTOTAL"], jsonData5["rows"][1]["LTOTAL"], jsonData5["rows"][2]["LTOTAL"], jsonData5["rows"][3]["LTOTAL"]];
  360. window.Count14.update();
  361. }
  362. });
  363. //===================================================================
  364. if (typeof callback != 'undefined') callback();
  365. }
  366. function loadTable(id, url, callback) {
  367. }
  368. //日期格式化
  369. function groutingDate(value, row, index) {
  370. var d = new Date(value);
  371. return d.getFullYear() + '-' + d.getMonth() + '-' + d.getDay();
  372. }
  373. function dateFormat(fmt, date) {
  374. let ret;
  375. const opt = {
  376. "Y+": date.getFullYear().toString(), // 年
  377. "m+": (date.getMonth() + 1).toString(), // 月
  378. "d+": date.getDate().toString(), // 日
  379. "H+": date.getHours().toString(), // 时
  380. "M+": date.getMinutes().toString(), // 分
  381. "S+": date.getSeconds().toString() // 秒
  382. // 有其他格式化字符需求可以继续添加,必须转化成字符串
  383. };
  384. for (let k in opt) {
  385. ret = new RegExp("(" + k + ")").exec(fmt);
  386. if (ret) {
  387. fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
  388. };
  389. };
  390. return fmt;
  391. }
  392. </script>
  393. <script>
  394. window.chartColors = {
  395. red: 'rgb(255, 99, 132)',
  396. orange: 'rgb(255, 159, 64)',
  397. yellow: 'rgb(255, 250, 86)',
  398. green: 'rgb(75, 192, 192)',
  399. blue: 'rgb(54, 162, 250)',
  400. purple: 'rgb(153, 102, 255)',
  401. grey: 'rgb(231,233,237)'
  402. };
  403. var color = Chart.helpers.color;
  404. window.randomScalingFactor = function (num) {
  405. return Math.round(Math.random() * num);
  406. }
  407. function init() {
  408. Chart.defaults.global.defaultFontColor = 'white';
  409. Chart.defaults.global.defaultFontSize = 12;
  410. //每小时合格率=========================================
  411. window.configHour = {
  412. data: {
  413. labels: [],
  414. datasets: [{
  415. label: "合格目标",
  416. backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
  417. borderColor: window.chartColors.red,
  418. borderWidth: 2,
  419. pointRadius: 12,
  420. data: [],
  421. fill: false,
  422. }, {
  423. label: "合格率",
  424. fill: false,
  425. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  426. borderColor: window.chartColors.blue,
  427. borderWidth: 2,
  428. pointRadius: 12,
  429. data: []
  430. }]
  431. },
  432. type: 'line',
  433. options: {
  434. responsive: true,
  435. title: {
  436. display: true,
  437. text: '每小时合格率'
  438. },
  439. tooltips: {
  440. mode: 'index',
  441. intersect: false,
  442. },
  443. hover: {
  444. mode: 'nearest',
  445. intersect: true
  446. },
  447. scales: {
  448. xAxes: [{
  449. display: true,
  450. scaleLabel: {
  451. display: false,
  452. labelString: ''
  453. }
  454. }],
  455. yAxes: [{
  456. display: true,
  457. scaleLabel: {
  458. display: false,
  459. labelString: 'Value'
  460. }
  461. }]
  462. }
  463. }
  464. };
  465. var ctxHour = document.getElementById("canvasHour").getContext("2d");
  466. window.Hour = new Chart(ctxHour, configHour);
  467. //====================================================
  468. //每日计合格率=======================================
  469. window.configDay = {
  470. data: {
  471. labels: [],
  472. datasets: [{
  473. label: "合格目标",
  474. backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
  475. borderColor: window.chartColors.red,
  476. borderWidth: 2,
  477. pointRadius: 12,
  478. data: [],
  479. fill: false,
  480. }, {
  481. label: "合格率",
  482. fill: false,
  483. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  484. borderColor: window.chartColors.blue,
  485. borderWidth: 2,
  486. pointRadius: 12,
  487. data: []
  488. }]
  489. },
  490. type: 'line',
  491. options: {
  492. responsive: true,
  493. title: {
  494. display: true,
  495. text: '每日合格率'
  496. },
  497. tooltips: {
  498. mode: 'index',
  499. intersect: false,
  500. },
  501. hover: {
  502. mode: 'nearest',
  503. intersect: true
  504. },
  505. scales: {
  506. xAxes: [{
  507. display: true,
  508. scaleLabel: {
  509. display: false,
  510. labelString: ''
  511. }
  512. }],
  513. yAxes: [{
  514. display: true,
  515. scaleLabel: {
  516. display: false,
  517. labelString: 'Value'
  518. }
  519. }]
  520. }
  521. }
  522. };
  523. var ctxDay = document.getElementById("canvasDay").getContext("2d");
  524. window.Day = new Chart(ctxDay, configDay);
  525. //===================================================
  526. //饼图
  527. window.pieConfig1 = {
  528. data: {
  529. datasets: [{
  530. data: [
  531. 0,
  532. 0,
  533. 0
  534. ],
  535. backgroundColor: [
  536. color(window.chartColors.blue).alpha(0.6).rgbString(),
  537. color(window.chartColors.yellow).alpha(0.6).rgbString(),
  538. color(window.chartColors.red).alpha(0.6).rgbString()
  539. ],
  540. borderColor: [
  541. window.chartColors.blue,
  542. window.chartColors.yellow,
  543. window.chartColors.red
  544. ],
  545. borderWidth: 1,
  546. label: '数据1'
  547. }],
  548. labels: [
  549. "良品",
  550. "不良",
  551. "报废"
  552. ]
  553. },
  554. type: 'pie',
  555. options: {
  556. responsive: true,
  557. legend: {
  558. position: 'top'
  559. }
  560. }
  561. };
  562. var ctxPie1 = document.getElementById("piecanvas1").getContext("2d");
  563. window.pie1 = new Chart(ctxPie1, pieConfig1);
  564. window.pieConfig2 = {
  565. data: {
  566. datasets: [{
  567. data: [
  568. 0,
  569. 0,
  570. 0
  571. ],
  572. backgroundColor: [
  573. color(window.chartColors.blue).alpha(0.6).rgbString(),
  574. color(window.chartColors.yellow).alpha(0.6).rgbString(),
  575. color(window.chartColors.red).alpha(0.6).rgbString()
  576. ],
  577. borderColor: [
  578. window.chartColors.blue,
  579. window.chartColors.yellow,
  580. window.chartColors.red
  581. ],
  582. borderWidth: 1,
  583. label: '数据1'
  584. }],
  585. labels: [
  586. "良品",
  587. "不良",
  588. "报废"
  589. ]
  590. },
  591. type: 'pie',
  592. options: {
  593. responsive: true,
  594. legend: {
  595. position: 'top'
  596. }
  597. }
  598. };
  599. var ctxPie2 = document.getElementById("piecanvas2").getContext("2d");
  600. window.pie2 = new Chart(ctxPie2, pieConfig2);
  601. window.configCount1 = {
  602. data: {
  603. labels: [],
  604. datasets: [{
  605. label: '',
  606. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  607. fill: false,
  608. borderColor: window.chartColors.blue,
  609. borderWidth: 2,
  610. pointRadius: 12,
  611. data: []
  612. }]
  613. },
  614. type: 'horizontalBar',
  615. options: {
  616. legend: {
  617. display: false
  618. },
  619. title: {
  620. display: true,
  621. text: "二检当天缺陷累计"
  622. },
  623. tooltips: {
  624. mode: 'point',
  625. intersect: false
  626. },
  627. responsive: true,
  628. scales: {
  629. xAxes: [{
  630. stacked: false
  631. }],
  632. yAxes: [{
  633. display: true,
  634. stacked: false,
  635. ticks: {
  636. min: 0,
  637. //stepSize: 20,
  638. //max: 20
  639. }
  640. }]
  641. }
  642. }
  643. };
  644. var ctxCount1 = document.getElementById("canvasCount1").getContext("2d");
  645. window.Count1 = new Chart(ctxCount1, configCount1);
  646. window.configCount2 = {
  647. data: {
  648. labels: [],
  649. datasets: [{
  650. label: '',
  651. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  652. fill: false,
  653. borderColor: window.chartColors.blue,
  654. borderWidth: 2,
  655. pointRadius: 12,
  656. data: []
  657. }]
  658. },
  659. type: 'horizontalBar',
  660. options: {
  661. legend: {
  662. display: false
  663. },
  664. title: {
  665. display: true,
  666. text: "二检当天位置累计"
  667. },
  668. tooltips: {
  669. mode: 'point',
  670. intersect: false
  671. },
  672. responsive: true,
  673. scales: {
  674. xAxes: [{
  675. stacked: false
  676. }],
  677. yAxes: [{
  678. display: true,
  679. stacked: false,
  680. ticks: {
  681. min: 0,
  682. //stepSize: 20,
  683. //max: 20
  684. }
  685. }]
  686. }
  687. }
  688. };
  689. var ctxCount2 = document.getElementById("canvasCount2").getContext("2d");
  690. window.Count2 = new Chart(ctxCount2, configCount2);
  691. window.configCount3 = {
  692. data: {
  693. labels: [],
  694. datasets: [{
  695. label: '',
  696. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  697. fill: false,
  698. borderColor: window.chartColors.blue,
  699. borderWidth: 2,
  700. pointRadius: 12,
  701. data: []
  702. }]
  703. },
  704. type: 'horizontalBar',
  705. options: {
  706. legend: {
  707. display: false
  708. },
  709. title: {
  710. display: true,
  711. text: "二检当天产品累计"
  712. },
  713. tooltips: {
  714. mode: 'point',
  715. intersect: false
  716. },
  717. responsive: true,
  718. scales: {
  719. xAxes: [{
  720. stacked: false
  721. }],
  722. yAxes: [{
  723. display: true,
  724. stacked: false,
  725. ticks: {
  726. min: 0,
  727. //stepSize: 20,
  728. //max: 20
  729. }
  730. }]
  731. }
  732. }
  733. };
  734. var ctxCount3 = document.getElementById("canvasCount3").getContext("2d");
  735. window.Count3 = new Chart(ctxCount3, configCount3);
  736. window.configCount4 = {
  737. data: {
  738. labels: [],
  739. datasets: [{
  740. label: '',
  741. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  742. fill: false,
  743. borderColor: window.chartColors.blue,
  744. borderWidth: 2,
  745. pointRadius: 12,
  746. data: []
  747. }]
  748. },
  749. type: 'horizontalBar',
  750. options: {
  751. legend: {
  752. display: false
  753. },
  754. title: {
  755. display: true,
  756. text: "当天成型线号累计"
  757. },
  758. tooltips: {
  759. mode: 'point',
  760. intersect: false
  761. },
  762. responsive: true,
  763. scales: {
  764. xAxes: [{
  765. stacked: false
  766. }],
  767. yAxes: [{
  768. display: true,
  769. stacked: false,
  770. ticks: {
  771. min: 0,
  772. //stepSize: 20,
  773. //max: 20
  774. }
  775. }]
  776. }
  777. }
  778. };
  779. var ctxCount4 = document.getElementById("canvasCount4").getContext("2d");
  780. window.Count4 = new Chart(ctxCount4, configCount4);
  781. window.configCount11 = {
  782. data: {
  783. labels: [],
  784. datasets: [{
  785. label: '',
  786. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  787. fill: false,
  788. borderColor: window.chartColors.blue,
  789. borderWidth: 2,
  790. pointRadius: 12,
  791. data: []
  792. }]
  793. },
  794. type: 'horizontalBar',
  795. options: {
  796. legend: {
  797. display: false
  798. },
  799. title: {
  800. display: true,
  801. text: "二检当月缺陷累计"
  802. },
  803. tooltips: {
  804. mode: 'point',
  805. intersect: false
  806. },
  807. responsive: true,
  808. scales: {
  809. xAxes: [{
  810. stacked: false
  811. }],
  812. yAxes: [{
  813. display: true,
  814. stacked: false,
  815. ticks: {
  816. min: 0,
  817. //stepSize: 20,
  818. //max: 20
  819. }
  820. }]
  821. }
  822. }
  823. };
  824. var ctxCount11 = document.getElementById("canvasCount11").getContext("2d");
  825. window.Count11 = new Chart(ctxCount11, configCount11);
  826. window.configCount12 = {
  827. data: {
  828. labels: [],
  829. datasets: [{
  830. label: '',
  831. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  832. fill: false,
  833. borderColor: window.chartColors.blue,
  834. borderWidth: 2,
  835. pointRadius: 12,
  836. data: []
  837. }]
  838. },
  839. type: 'horizontalBar',
  840. options: {
  841. legend: {
  842. display: false
  843. },
  844. title: {
  845. display: true,
  846. text: "二检当月位置累计"
  847. },
  848. tooltips: {
  849. mode: 'point',
  850. intersect: false
  851. },
  852. responsive: true,
  853. scales: {
  854. xAxes: [{
  855. stacked: false
  856. }],
  857. yAxes: [{
  858. display: true,
  859. stacked: false,
  860. ticks: {
  861. min: 0,
  862. //stepSize: 20,
  863. //max: 20
  864. }
  865. }]
  866. }
  867. }
  868. };
  869. var ctxCount12 = document.getElementById("canvasCount12").getContext("2d");
  870. window.Count12 = new Chart(ctxCount12, configCount12);
  871. window.configCount13 = {
  872. data: {
  873. labels: [],
  874. datasets: [{
  875. label: '',
  876. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  877. fill: false,
  878. borderColor: window.chartColors.blue,
  879. borderWidth: 2,
  880. pointRadius: 12,
  881. data: []
  882. }]
  883. },
  884. type: 'horizontalBar',
  885. options: {
  886. legend: {
  887. display: false
  888. },
  889. title: {
  890. display: true,
  891. text: "二检当月产品累计"
  892. },
  893. tooltips: {
  894. mode: 'point',
  895. intersect: false
  896. },
  897. responsive: true,
  898. scales: {
  899. xAxes: [{
  900. stacked: false
  901. }],
  902. yAxes: [{
  903. display: true,
  904. stacked: false,
  905. ticks: {
  906. min: 0,
  907. //stepSize: 20,
  908. //max: 20
  909. }
  910. }]
  911. }
  912. }
  913. };
  914. var ctxCount13 = document.getElementById("canvasCount13").getContext("2d");
  915. window.Count13 = new Chart(ctxCount13, configCount13);
  916. window.configCount14 = {
  917. data: {
  918. labels: [],
  919. datasets: [{
  920. label: '',
  921. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  922. fill: false,
  923. borderColor: window.chartColors.blue,
  924. borderWidth: 2,
  925. pointRadius: 12,
  926. data: []
  927. }]
  928. },
  929. type: 'horizontalBar',
  930. options: {
  931. legend: {
  932. display: false
  933. },
  934. title: {
  935. display: true,
  936. text: "当月成型线号累计"
  937. },
  938. tooltips: {
  939. mode: 'point',
  940. intersect: false
  941. },
  942. responsive: true,
  943. scales: {
  944. xAxes: [{
  945. stacked: false
  946. }],
  947. yAxes: [{
  948. display: true,
  949. stacked: false,
  950. ticks: {
  951. min: 0,
  952. //stepSize: 20,
  953. //max: 20
  954. }
  955. }]
  956. }
  957. }
  958. };
  959. var ctxCount14 = document.getElementById("canvasCount14").getContext("2d");
  960. window.Count14 = new Chart(ctxCount14, configCount14);
  961. }
  962. </script>
  963. </body>
  964. </html>