demo.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
  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. </head>
  15. <body style="background-color:black;">
  16. <div class="box_1920_1080">
  17. <div class="box_title" style="display:flex;flex-direction:row;">
  18. <div style="width:30%;text-align:left;"></div>
  19. <div style="width: 40%; text-align: center; font-size: 38px; font-weight: 700">改洗车间看板</div>
  20. <div style="width:30%;text-align:right;"><span class="box_title_loading" style="font-size:32px;" id="报表加载"></span></div>
  21. </div>
  22. <div class="box_body" style="display: flex; flex-direction: column;">
  23. <div style="width:1840px;height:680px;flex-direction:row;">
  24. <div style="width: 100%; height: 340px;">
  25. <div class="d-flex justify-content-center">
  26. <canvas id="canvasDayCL" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:340px;width:100%"></canvas>
  27. </div>
  28. </div>
  29. <div style="width: 75%; height: 340px;">
  30. <div class="d-flex justify-content-center">
  31. <canvas id="canvasHourCL" style="-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; height:340px;width:100%"></canvas>
  32. </div>
  33. </div>
  34. <div style="width: 25%; height: 340px; margin-left: 1380px;margin-top:-300px;">
  35. <div style="color:white;font-size:20px;font-weight:600; text-align:center;">毛坯库库存</div>
  36. <canvas id="canvasDefectKC" style="margin-top:15px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  37. </div>
  38. </div>
  39. <!--缺陷统计-->
  40. <div style="width:1840px;height:230px;display:flex;flex-direction:row;">
  41. <div style="width: 25%; height: 230px;">
  42. <div style="color:white;font-size:20px;font-weight:600; text-align:center">改洗七日趋势图</div>
  43. <canvas id="canvasDayZL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 250px; width: 100%;"></canvas>
  44. </div>
  45. <div style="width: 50%; height: 230px;">
  46. <div style="color:white;font-size:20px;font-weight:600; text-align:center">工号产量</div>
  47. <canvas id="canvasDayCLUser" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 280px; width: 100%; margin-top: -38px;"></canvas>
  48. </div>
  49. <div style="width: 25%; height: 230px;">
  50. <div style="color:white;font-size:20px;font-weight:600; text-align:center">改洗缺陷(今日TOP3)</div>
  51. <canvas id="canvasDefectA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <script>
  57. $(document).ready(function (){
  58. initData();
  59. setTimeout(function () { GxData();}, 3000);
  60. setInterval(function () { GxData(); }, 180000);
  61. ClData();
  62. setInterval(function () { ClData(); }, 180000);
  63. ZxDataH();
  64. setInterval(function () { ZxDataH(); }, 180000);
  65. DataKC();
  66. setInterval(function () { DataKC(); }, 180000);
  67. ZxData();
  68. setInterval(function () { ZxData(); }, 180000);
  69. DdfectData();
  70. setInterval(function () { DdfectData(); }, 180000);
  71. });
  72. //改洗缺陷
  73. function DdfectData() {
  74. $.get("demo.ashx?m=Gdefect", function (data) {
  75. var json = JSON.parse(data);
  76. if (json["success"] == true) {
  77. let a = [];
  78. let b = [];
  79. if (json["success"] == true) {
  80. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  81. var num = parseInt(json["rows"].length);
  82. for (var i = 0; i < num; i++) {
  83. a.push(parseInt(json["rows"][i]["数量"]));
  84. b.push(json["rows"][i]["缺陷名称"]);
  85. }
  86. window.DefectA.data.datasets[0].data = a;
  87. window.DefectA.data.labels = b;
  88. window.DefectA.update();
  89. }
  90. }
  91. });
  92. }
  93. //近30日改洗数量
  94. function GxData() {
  95. $.get("demo.ashx?m=gx", function (data) {
  96. var json = JSON.parse(data);
  97. let a = [];
  98. let b = [];
  99. let c = [];
  100. if (json["success"] == true) {
  101. var num = parseInt(json["rows"].length);
  102. for (var i = 0; i < num; i++) {
  103. a.push(parseFloat(json["rows"][i]["预期数量"]));
  104. b.push(json["rows"][i]["日期"]);
  105. c.push(parseFloat(json["rows"][i]["改洗数量"]));
  106. }
  107. window.DayCL.data.datasets[0].data = a;
  108. window.DayCL.data.datasets[1].data = c;
  109. window.DayCL.data.labels = b;
  110. window.DayCL.update();
  111. }
  112. });
  113. }
  114. //半检一件七日趋势图
  115. function ZxData() {
  116. $.get("demo.ashx?m=zx", function (data) {
  117. var json = JSON.parse(data);
  118. if (json["success"] == true) {
  119. var BJ1 = parseFloat(json["rows"][0]["改洗合格率"]);
  120. var BJ2 = parseFloat(json["rows"][1]["改洗合格率"]);
  121. var BJ3 = parseFloat(json["rows"][2]["改洗合格率"]);
  122. var BJ4 = parseFloat(json["rows"][3]["改洗合格率"]);
  123. var BJ5 = parseFloat(json["rows"][4]["改洗合格率"]);
  124. var BJ6 = parseFloat(json["rows"][5]["改洗合格率"]);
  125. var BJ7 = parseFloat(json["rows"][6]["改洗合格率"]);
  126. var day1 = json["rows"][0]["日期"];
  127. var day2 = json["rows"][1]["日期"];
  128. var day3 = json["rows"][2]["日期"];
  129. var day4 = json["rows"][3]["日期"];
  130. var day5 = json["rows"][4]["日期"];
  131. var day6 = json["rows"][5]["日期"];
  132. var day7 = json["rows"][6]["日期"];
  133. var count1 = parseFloat(json["rows"][0]["出窑数"]);
  134. var count2 = parseFloat(json["rows"][1]["出窑数"]);
  135. var count3 = parseFloat(json["rows"][2]["出窑数"]);
  136. var count4 = parseFloat(json["rows"][3]["出窑数"]);
  137. var count5 = parseFloat(json["rows"][4]["出窑数"]);
  138. var count6 = parseFloat(json["rows"][5]["出窑数"]);
  139. var count7 = parseFloat(json["rows"][6]["出窑数"]);
  140. window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
  141. window.DayZL.data.datasets[1].data = [count1, count2, count3, count4, count5, count6, count7];
  142. window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
  143. window.DayZL.update();
  144. }
  145. });
  146. }
  147. //毛坯库库存
  148. function DataKC() {
  149. $.get("demo.ashx?m=kc", function (data) {
  150. var json = JSON.parse(data);
  151. if (json["success"] == true) {
  152. var count1 = parseFloat(json["rows"][0]["数量"]);
  153. var count2 = parseFloat(json["rows"][1]["数量"]);
  154. var goodtype1 = json["rows"][0]["产品类别"];
  155. var goodtype2 = json["rows"][1]["产品类别"];
  156. window.Defectkc.data.datasets[0].data = [count1, count2];
  157. window.Defectkc.data.labels = [goodtype1, goodtype2]
  158. window.Defectkc.update();
  159. }
  160. });
  161. }
  162. //每小时产量折线图
  163. function ZxDataH() {
  164. $.get("demo.ashx?m=h", function (data) {
  165. var json = JSON.parse(data);
  166. if (json["success"] == true) {
  167. var BJ1 = parseFloat(json["rows"][0]["改洗数量"]);
  168. var BJ2 = parseFloat(json["rows"][1]["改洗数量"]);
  169. var BJ3 = parseFloat(json["rows"][2]["改洗数量"]);
  170. var BJ4 = parseFloat(json["rows"][3]["改洗数量"]);
  171. var BJ5 = parseFloat(json["rows"][4]["改洗数量"]);
  172. var BJ6 = parseFloat(json["rows"][5]["改洗数量"]);
  173. var BJ7 = parseFloat(json["rows"][6]["改洗数量"]);
  174. var BJ8 = parseFloat(json["rows"][7]["改洗数量"]);
  175. var BJ9 = parseFloat(json["rows"][8]["改洗数量"]);
  176. var BJ10 = parseFloat(json["rows"][9]["改洗数量"]);
  177. var BJ11 = parseFloat(json["rows"][10]["改洗数量"]);
  178. var BJ12 = parseFloat(json["rows"][11]["改洗数量"]);
  179. var BJ13 = parseFloat(json["rows"][12]["改洗数量"]);
  180. var YQ1 = parseFloat(json["rows"][0]["预期产量"]);
  181. var YQ2 = parseFloat(json["rows"][1]["预期产量"]);
  182. var YQ3 = parseFloat(json["rows"][2]["预期产量"]);
  183. var YQ4 = parseFloat(json["rows"][3]["预期产量"]);
  184. var YQ5 = parseFloat(json["rows"][4]["预期产量"]);
  185. var YQ6 = parseFloat(json["rows"][5]["预期产量"]);
  186. var YQ7 = parseFloat(json["rows"][6]["预期产量"]);
  187. var YQ8 = parseFloat(json["rows"][7]["预期产量"]);
  188. var YQ9 = parseFloat(json["rows"][8]["预期产量"]);
  189. var YQ10 = parseFloat(json["rows"][9]["预期产量"]);
  190. var YQ11 = parseFloat(json["rows"][10]["预期产量"]);
  191. var YQ12 = parseFloat(json["rows"][11]["预期产量"]);
  192. var YQ13 = parseFloat(json["rows"][12]["预期产量"]);
  193. var YQ14 = parseFloat(json["rows"][13]["预期产量"]);
  194. var day1 = json["rows"][0]["日期"];
  195. var day2 = json["rows"][1]["日期"];
  196. var day3 = json["rows"][2]["日期"];
  197. var day4 = json["rows"][3]["日期"];
  198. var day5 = json["rows"][4]["日期"];
  199. var day6 = json["rows"][5]["日期"];
  200. var day7 = json["rows"][6]["日期"];
  201. var day8 = json["rows"][7]["日期"];
  202. var day9 = json["rows"][8]["日期"];
  203. var day10 = json["rows"][9]["日期"];
  204. var day11 = json["rows"][10]["日期"];
  205. var day12 = json["rows"][11]["日期"];
  206. var day13 = json["rows"][12]["日期"];
  207. window.DayCLH.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7, BJ8, BJ9, BJ10, BJ11, BJ12, BJ13];
  208. window.DayCLH.data.datasets[1].data = [YQ1, YQ2, YQ3, YQ4, YQ5, YQ6, YQ7, YQ8, YQ9, YQ10, YQ11, YQ12, YQ13, YQ14];
  209. window.DayCLH.data.labels = [day1, day2, day3, day4, day5, day6, day7, day8, day9, day10, day11, day12, day13];
  210. window.DayCLH.update();
  211. }
  212. });
  213. }
  214. //一检工号产量
  215. function ClData() {
  216. $.get("demo.ashx?m=cl", function (data) {
  217. var json = JSON.parse(data);
  218. let a = [];
  219. let b = [];
  220. if (json["success"] == true) {
  221. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  222. var num = parseInt(json["rows"].length);
  223. for (var i = 0; i < num; i++) {
  224. a.push(parseInt(json["rows"][i]["产量"]));
  225. b.push(json["rows"][i]["工号"]);
  226. }
  227. window.DayCLUser.data.datasets[0].data = a;
  228. window.DayCLUser.data.labels = b;
  229. window.DayCLUser.update();
  230. }
  231. });
  232. }
  233. function initData() {
  234. window.chartColors = {
  235. red: 'rgb(255, 99, 132)',
  236. orange: 'rgb(255, 159, 64)',
  237. yellow: 'rgb(255, 250, 86)',
  238. green: 'rgb(75, 192, 192)',
  239. blue: 'rgb(54, 162, 250)',
  240. purple: 'rgb(153, 102, 255)',
  241. grey: 'rgb(231,233,237)'
  242. };
  243. var color = Chart.helpers.color;
  244. window.randomScalingFactor = function (num) {
  245. return Math.round(Math.random() * num);
  246. }
  247. Chart.defaults.global.defaultFontColor = 'white';
  248. Chart.defaults.global.defaultFontSize = 18;
  249. Chart.defaults.global.legend.display = false;
  250. //半检一检各项趋势图=====================================
  251. window.configDayZL = {
  252. data: {
  253. labels: ["01", "02", "03", "04", "05", "06", "07"],
  254. datasets: [{
  255. type: 'line',
  256. label: "合格率",
  257. yAxesGroup: 'A',
  258. yAxisID: 'A',
  259. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  260. borderColor: window.chartColors.red,
  261. borderWidth: 2,
  262. pointRadius: 15,
  263. data: [0, 0, 0, 0, 0, 0, 0],
  264. fill: false
  265. }, {
  266. label: '产量',
  267. yAxesGroup: 'B',
  268. yAxisID: 'B',
  269. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  270. borderColor: window.chartColors.blue,
  271. borderWidth: 1,
  272. data: [100, 100, 100, 100, 100, 100, 100],
  273. fill: false
  274. }]
  275. },
  276. type: 'bar',
  277. options: {
  278. legend: {
  279. display: true
  280. },
  281. title: {
  282. display: false,
  283. text: '质量统计'
  284. },
  285. tooltips: {
  286. mode: 'index',
  287. intersect: false,
  288. },
  289. hover: {
  290. mode: 'nearest',
  291. intersect: true
  292. },
  293. scales: {
  294. xAxes: [{
  295. display: true,
  296. scaleLabel: {
  297. display: false,
  298. labelString: ''
  299. }
  300. }],
  301. yAxes: [{
  302. display: true,
  303. id: 'B',
  304. name: 'B',
  305. scalePositionLeft: true,
  306. position: 'left',
  307. scaleLabel: {
  308. display: false,
  309. labelString: 'Value'
  310. },
  311. ticks: {
  312. min: 0,
  313. stepSize: 500,
  314. max: 3000
  315. }
  316. }
  317. , {
  318. display: true,
  319. id: 'A',
  320. name: 'A',
  321. scalePositionLeft: false,
  322. position: 'right',
  323. scaleLabel: {
  324. display: false,
  325. labelString: 'Value2'
  326. },
  327. ticks: {
  328. min: 90,
  329. stepSize: 2,
  330. max: 100
  331. }
  332. }]
  333. }
  334. }
  335. };
  336. var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
  337. window.DayZL = new Chart(ctxDayZL, configDayZL);
  338. //===================================================
  339. //甲班缺陷===========================================
  340. //window.configMonthCL = {
  341. // data: {
  342. // labels: ['实际产量', '目标产量'],
  343. // datasets: [{
  344. // label: '工序',
  345. // backgroundColor: [
  346. // color(window.chartColors.red).alpha(0.35).rgbString(),
  347. // color(window.chartColors.blue).alpha(0.35).rgbString(),
  348. // color(window.chartColors.green).alpha(0.35).rgbString(),
  349. // color(window.chartColors.orange).alpha(0.35).rgbString(),
  350. // color(window.chartColors.purple).alpha(0.35).rgbString()
  351. // ],
  352. // fill: false,
  353. // borderColor: [
  354. // window.chartColors.red,
  355. // window.chartColors.blue,
  356. // window.chartColors.green,
  357. // window.chartColors.orange,
  358. // window.chartColors.purple
  359. // ],
  360. // borderWidth: 2,
  361. // pointRadius: 30,
  362. // data: [0, 0]
  363. // }]
  364. // },
  365. // type: 'doughnut',
  366. // options: {
  367. // legend: {
  368. // display: true
  369. // },
  370. // title: {
  371. // display: false,
  372. // text: ""
  373. // },
  374. // tooltips: {
  375. // mode: 'point',
  376. // intersect: false
  377. // },
  378. // responsive: true
  379. // }
  380. //};
  381. //var ctxMonthCL = document.getElementById("canvasMonthCL").getContext("2d");
  382. //window.MonthCL = new Chart(ctxMonthCL, configMonthCL);
  383. //===================================================
  384. //工号产量柱状图=====================================
  385. window.canvasDayCLUser = {
  386. data: {
  387. labels: ["01", "02", "03", "04", "05", "06", "07"],
  388. datasets: [
  389. {
  390. label: "产量",
  391. fill: false,
  392. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  393. borderColor: window.chartColors.blue,
  394. borderWidth: 2,
  395. pointRadius: 15,
  396. data: [0, 0, 0, 0, 0, 0, 0, 0]
  397. }
  398. ]
  399. },
  400. type: 'bar',
  401. options: {
  402. legend: {
  403. display: true
  404. },
  405. title: {
  406. display: true,
  407. text: ""
  408. },
  409. tooltips: {
  410. mode: 'point',
  411. intersect: false
  412. },
  413. responsive: true,
  414. scales: {
  415. xAxes: [{
  416. stacked: false
  417. }],
  418. yAxes: [{
  419. display: true,
  420. stacked: false,
  421. ticks: {
  422. min: 0,
  423. stepSize: 50,
  424. max: 300
  425. }
  426. }]
  427. }
  428. }
  429. };
  430. var ctxDayCL = document.getElementById("canvasDayCLUser").getContext("2d");
  431. window.DayCLUser = new Chart(ctxDayCL, canvasDayCLUser);
  432. //===================================================
  433. //改洗缺陷TOP5===========================================
  434. window.configDefectA = {
  435. data: {
  436. labels: [],
  437. datasets: [{
  438. label: '工序',
  439. backgroundColor: [
  440. color(window.chartColors.red).alpha(0.35).rgbString(),
  441. color(window.chartColors.blue).alpha(0.35).rgbString(),
  442. color(window.chartColors.green).alpha(0.35).rgbString(),
  443. color(window.chartColors.orange).alpha(0.35).rgbString(),
  444. color(window.chartColors.purple).alpha(0.35).rgbString()
  445. ],
  446. fill: false,
  447. borderColor: [
  448. window.chartColors.red,
  449. window.chartColors.blue,
  450. window.chartColors.green,
  451. window.chartColors.orange,
  452. window.chartColors.purple
  453. ],
  454. borderWidth: 2,
  455. pointRadius: 30,
  456. data: [0, 0, 0]
  457. }]
  458. },
  459. type: 'pie',
  460. options: {
  461. legend: {
  462. display: true
  463. },
  464. title: {
  465. display: false,
  466. text: "甲班缺陷"
  467. },
  468. tooltips: {
  469. mode: 'point',
  470. intersect: false
  471. },
  472. responsive: true
  473. }
  474. };
  475. var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
  476. window.DefectA = new Chart(ctxDefectA, configDefectA);
  477. //===================================================
  478. //每小时产量=========================================
  479. window.canvasHourCL = {
  480. data: {
  481. labels: [],
  482. datasets: [{
  483. label: "实际产量",
  484. fill: false,
  485. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  486. borderColor: window.chartColors.blue,
  487. borderWidth: 2,
  488. pointRadius: 12,
  489. data: []
  490. }, {
  491. label: "预期产量",
  492. fill: false,
  493. backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
  494. borderColor: window.chartColors.red,
  495. borderWidth: 2,
  496. pointRadius: 12,
  497. data: []
  498. }]
  499. },
  500. type: 'line',
  501. options: {
  502. responsive: true,
  503. legend: {
  504. display: true
  505. },
  506. title: {
  507. display: true,
  508. text: '每小时产量'
  509. },
  510. tooltips: {
  511. mode: 'index',
  512. intersect: false,
  513. },
  514. hover: {
  515. mode: 'nearest',
  516. intersect: true
  517. },
  518. scales: {
  519. xAxes: [{
  520. display: true,
  521. scaleLabel: {
  522. display: false,
  523. labelString: ''
  524. }
  525. }],
  526. yAxes: [{
  527. display: true,
  528. scaleLabel: {
  529. display: false,
  530. labelString: 'Value'
  531. },
  532. ticks: {
  533. min: 0,
  534. stepSize: 50,
  535. max: 300
  536. }
  537. }]
  538. }
  539. }
  540. };
  541. var ctxHourCL = document.getElementById("canvasHourCL").getContext("2d");
  542. window.DayCLH = new Chart(ctxHourCL, canvasHourCL);
  543. //===================================================
  544. //毛坯库库存===========================================
  545. window.canvasDefectKC = {
  546. data: {
  547. labels: ['1', '2', '3'],
  548. datasets: [{
  549. label: '工序',
  550. backgroundColor: [
  551. color(window.chartColors.red).alpha(0.35).rgbString(),
  552. color(window.chartColors.blue).alpha(0.35).rgbString(),
  553. color(window.chartColors.green).alpha(0.35).rgbString(),
  554. color(window.chartColors.orange).alpha(0.35).rgbString(),
  555. color(window.chartColors.purple).alpha(0.35).rgbString()
  556. ],
  557. fill: false,
  558. borderColor: [
  559. window.chartColors.red,
  560. window.chartColors.blue,
  561. window.chartColors.green,
  562. window.chartColors.orange,
  563. window.chartColors.purple
  564. ],
  565. borderWidth: 2,
  566. pointRadius: 30,
  567. data: [0, 0, 0]
  568. }]
  569. },
  570. type: 'pie',
  571. options: {
  572. legend: {
  573. display: true
  574. },
  575. title: {
  576. display: false,
  577. text: "甲班缺陷"
  578. },
  579. tooltips: {
  580. mode: 'point',
  581. intersect: false
  582. },
  583. responsive: true
  584. }
  585. };
  586. var ctxDefectKc = document.getElementById("canvasDefectKC").getContext("2d");
  587. window.Defectkc = new Chart(ctxDefectKc, canvasDefectKC);
  588. //===================================================
  589. //每日计划达成=======================================
  590. window.configDayCL = {
  591. data: {
  592. labels: [],
  593. datasets: [{
  594. type: 'line',
  595. label: '计划产量',
  596. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  597. fill: false,
  598. borderColor: window.chartColors.red,
  599. borderWidth: 2,
  600. pointRadius: 12,
  601. data: []
  602. }, {
  603. label: '实际产量',
  604. fill: false,
  605. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  606. borderColor: window.chartColors.blue,
  607. borderWidth: 1,
  608. data: []
  609. }]
  610. },
  611. type: 'bar',
  612. options: {
  613. responsive: true,
  614. legend: {
  615. display: true
  616. },
  617. title: {
  618. display: true,
  619. text: "每日产量达成"
  620. },
  621. tooltips: {
  622. mode: 'point',
  623. intersect: false
  624. },
  625. responsive: true,
  626. scales: {
  627. xAxes: [{
  628. stacked: false
  629. }],
  630. yAxes: [{
  631. display: true,
  632. stacked: false,
  633. ticks: {
  634. min: 0,
  635. stepSize: 600,
  636. max: 3000
  637. }
  638. }]
  639. }
  640. }
  641. };
  642. var ctxDayCL = document.getElementById("canvasDayCL").getContext("2d");
  643. window.DayCL = new Chart(ctxDayCL, configDayCL);
  644. //===================================================
  645. }
  646. </script>
  647. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  648. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  649. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  650. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  651. </body>
  652. </html>