半检看板拆分折线图

wwwroot/main/Procedure/HalfCheckKanban/HalfCheckKanban.html

@@ -27,14 +27,18 @@
         <div class="box_body" style="display: flex; flex-direction: column;">
 
             <!--31天产量曲线图-->
-            <div style="width:1840px;height:30%;display:flex;flex-direction:row;">
-                <div style="width: 80%; height: 300px;">
-                   
-                    <canvas id="canvasDayCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 330px; width: 80% "></canvas>
+            <div style="width: 1840px; height: 30%; display: flex; flex-direction: row; margin-top: 15px">
+                <div style="width: 80%; height: 200px;">
+                    <canvas id="canvasDayCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 220px; width: 100% "></canvas>
+                </div>
+            </div>
+            <div style="width:1840px;height:40%;display:flex;flex-direction:row; margin-top:-4%">
+                <div style="width: 80%; height: 180px; ">
+                    <canvas id="canvasMonthDayCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%;"></canvas>
                 </div>
             </div>
             <div>
-                <table rules="none" align="right" style="width: 20%; height: 270px; margin-left:80%;margin-top:-291px ">
+                <table rules="none" align="right" style="width: 20%; height: 270px; margin-left:80%;margin-top:-635px ">
                     <tr class="tr_bg_dark_warning">
                         <td style="width: 8%; height: 60px; font-size: 30px; text-align: left" colspan="2"><strong><span id="sj" style="color:white;">2023-4-30 00:00:00</span></strong></td>
                     </tr>
@@ -53,7 +57,7 @@
                 </table>
             </div>
             <!--表格-->
-            <div style="width: 98%; height: 530px; display: flex; flex-direction: row; margin-top: 4%">
+            <div style="width: 98%; height: 530px; display: flex; flex-direction: row; margin-top: -10%">
                 <div style="width: 100%; height: 530px; ">
                     <table cellspacing="0" cellpadding="0" border="0" style="width:50%;">
                         <tr class="tr_title_warning">
@@ -160,17 +164,20 @@
         $(document).ready(function () {
             initData();
             clearData();
+			initData2();
+			clearData2();
 			MonthSum();
             DefectDetails();
             doGetData = setInterval(function () { loadServerTime(); }, 5000);//系统时间
              doGetData = setInterval(function () { timeUpdate(); }, 10000);
-            loadDayTable();
+            
             StaffTable();
         });
 		function timeUpdate() {
 			Alltotal();//一烧出窑 和半检缺陷率
             DefectDetails();//前四缺陷
             loadData();//折线图 饼形图
+			loadData2();
 			MonthSum();
         }
 
@@ -268,15 +275,22 @@
 				}
 			});
         }
-        function clearData() {
-            //清除数据
-            window.DayCL.data.labels = [];
-            //window.DayCL.data.datasets[0].data = [0, 0, 0, 0, 0, 0, 0];
+
+		function clearData() {
+			//清除数据
+			window.DayCL.data.labels = [];
             window.DayCL.data.datasets[0].data = [];
-            //window.DayCL.data.datasets[1].data = [0, 0, 0, 0, 0, 0, 0];
-            window.DayCL.data.datasets[1].data = [];
-            window.DayCL.update();
-        }
+			window.DayCL.data.datasets[1].data = [];
+			window.DayCL.update();
+
+		}
+
+		function clearData2() {
+			//清除数据
+			window.MonthDayCL.data.labels = [];
+			window.MonthDayCL.data.datasets[0].data = [];
+			window.MonthDayCL.update();
+		}
 
        
 
@@ -287,7 +301,8 @@
 					$('#sj').html(json["sj"]);
 				}
 			});
-		}
+        }
+
 		function DefectDetails() {
 			$.get('HalfCheckKanban.ashx?m=DefectDetail', function (data) {
                 var json = JSON.parse(data);
@@ -327,13 +342,24 @@
 						window.DayCL.data.labels.push(json["rows"][n]["SJ"]);
 						window.DayCL.data.datasets[0].data[n] = (json["rows"][n]["入库"]);
 						window.DayCL.data.datasets[1].data[n] = (json["rows"][n]["出库"]);
-						window.DayCL.data.datasets[2].data[n] = (json["rows"][n]["检验"]);
 					}
 				}
 				window.DayCL.update();
 			});
         }
-
+		function loadData2() {
+			$.get("HalfCheckKanban.ashx?m=rate", function (data) {
+				clearData2();
+				var json = JSON.parse(data);
+				if (json["success"] == true) {
+					for (var n = 0; n < json["rows"].length; n++) {
+						window.MonthDayCL.data.labels.push(json["rows"][n]["SJ"]);
+						window.MonthDayCL.data.datasets[0].data[n] = (json["rows"][n]["检验"]);
+					}
+				}
+				window.MonthDayCL.update();
+			});
+		}
         function initData() {
             window.chartColors = {
                 red: 'rgb(255, 99, 132)',
@@ -351,7 +377,7 @@
                 return Math.round(Math.random() * num);
             }
             Chart.defaults.global.defaultFontColor = 'white';
-            Chart.defaults.global.defaultFontSize = 16;
+			Chart.defaults.global.defaultFontSize = 13;
             Chart.defaults.global.legend.display = false;
 
             //每小时产量=========================================
@@ -363,7 +389,7 @@
                         backgroundColor: color(window.chartColors.orange).alpha(0.6).rgbString(),
                         borderColor: window.chartColors.orange,
                         borderWidth: 3,
-						pointRadius: 15,
+						pointRadius: 14,
                         data: [],
                         fill: false,
                     }, {
@@ -372,16 +398,8 @@
                         backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
                         borderColor: window.chartColors.blue,
                         borderWidth: 3,
-						pointRadius: 15,
+						pointRadius: 14,
                         data: []
-						}, {
-						label: "检验量",
-							fill: false,
-						backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
-							borderColor: window.chartColors.red,
-							borderWidth: 3,
-							pointRadius: 15,
-							data: []
 						}]
                 },
                 type: 'line',
@@ -423,6 +441,81 @@
             var ctxDayCL = document.getElementById("canvasDayCL").getContext("2d");
             window.DayCL = new Chart(ctxDayCL, configDayCL);
         }
+
+		function initData2() {
+			window.chartColors = {
+				red: 'rgb(255, 99, 132)',
+				orange: 'rgb(255, 159, 64)',
+				yellow: 'rgb(255, 250, 86)',
+				green: 'rgb(75, 192, 192)',
+				blue: 'rgb(54, 162, 250)',
+				purple: 'rgb(153, 102, 255)',
+				grey: 'rgb(231,233,237)'
+			};
+
+			var color = Chart.helpers.color;
+
+			window.randomScalingFactor = function (num) {
+				return Math.round(Math.random() * num);
+			}
+
+			Chart.defaults.global.defaultFontColor = 'white';
+			Chart.defaults.global.defaultFontSize = 13;
+			Chart.defaults.global.legend.display = false;
+
+			//每小时产量=========================================
+			window.configMonthDayCL = {
+				data: {
+					labels: [],
+					datasets: [{
+						label: "检验量",
+						fill: false,
+						backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
+						borderColor: window.chartColors.red,
+						borderWidth: 3,
+						pointRadius: 14,
+						data: []
+					}]
+				},
+				type: 'line',
+				options: {
+					responsive: true,
+					legend: {
+						display: true
+					},
+					title: {
+						display: false,
+						text: '每小时产量'
+					},
+					tooltips: {
+						mode: 'index',
+						intersect: false,
+					},
+					hover: {
+						mode: 'nearest',
+						intersect: true
+					},
+					scales: {
+						xAxes: [{
+							display: true,
+							scaleLabel: {
+								display: false,
+								labelString: ''
+							}
+						}],
+						yAxes: [{
+							display: true,
+							scaleLabel: {
+								display: false,
+								labelString: 'Value'
+							}
+						}]
+					}
+				}
+			};
+			var ctxMonthDayCL = document.getElementById("canvasMonthDayCL").getContext("2d");
+			window.MonthDayCL = new Chart(ctxMonthDayCL, configMonthDayCL);
+		}
     </script>
 
     <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>