Haier_MES_II.git

			@@ -139,6 +139,10 @@
			background-color: #007bff;
			color: white;
			}
			#biaoti{
			color:black;
			margin-left: 350px;
			}
			</style>
			</head>
			<body>
			@@ -158,16 +162,16 @@

			<!-- 产品大类下拉框 -->
			<select id="product-category-select">
			<option value="">选择产品大类</option>
			<option value="产品大类1">产品大类1</option>
			<option value="产品大类2">产品大类2</option>
			<option value="产品大类3">产品大类3</option>
			<option value="">全部</option>
			<option value="1">消毒柜</option>
			<option value="2">蒸烤箱</option>
			<option value="3">烟机</option>
			</select>

			<!-- 工程下拉框 -->
			<select id="project-select">
			<option value="">莱阳厨电</option>
			<option value="工程1">工程1</option>

			</select>

			<!-- 开始日期 -->
			@@ -177,10 +181,10 @@
			<input type="date" id="end-date" />

			<!-- 查询按钮 -->
			<button onclick="filterData()">查询</button>

			<button @click="filterData()">查询</button>
			<h2 id="biaoti">{{title}}</h2>
			<!-- 重置按钮 -->
			<button class="reset-btn" onclick="resetFilters()">重置</button>
			<%-- <button class="reset-btn" onclick="resetFilters()">重置</button>--%>
			</div>
			</div>

			@@ -213,6 +217,8 @@
			<div id="trendChart1" class="chart"></div>
			<div id="trendChart2" class="chart"></div>
			<div id="trendChart3" class="chart"></div>
			<!-- 显示曲线图 -->
			<div id="trendChart4" class="chart"></div>

			</div>

			@@ -271,59 +277,42 @@
			yield:[{}],
			machineElectric:[{}],
			machineWater:[{}],
			val1: {
			},
			val1: {},
			title:"<%= request.getParameter("name") %>",

			},
			methods:{
			dingdanxiangqing(){
			let HisArr="";
			// HisArr = this.$echarts.init(document.getElementById('main2'));
			let a = {
			value: this.shuzu1[0]['6_qualified'],
			name: "成品",
			itemStyle: { color: '#53a2ff' },
			label:{fontSize:30}
			}
			let b = {
			value: this.shuzu1[0]['7_qualified_not'],
			name: "次品",
			itemStyle: { color: 'darkseagreen' },
			label:{fontSize:30}
			}
			this.val1.title.text="合格率"
			this.val1.title.top="45%"
			this.val1.title.left="45%"
			this.val1.title.textStyle.fontSize=30
			this.val1.series[0].data[0]=a
			this.val1.series[0].data[1]=b
			HisArr.setOption(this.val1);
			},
			dingdanxiangqing1(){
			let HisArr="";
			// HisArr = this.$echarts.init(document.getElementById('main4'));
			let a = {
			value: this.shuzu1[0]['2_smallglass_completed'],
			// 提交一次查询刷新
			filterData() {
			// 获取产品类别
			const type = document.getElementById('product-category-select').value;
			// 获取日期选择器的值
			const startDate = document.getElementById('start-date').value;
			const endDate = document.getElementById('end-date').value;

			name: "已完成",
			itemStyle: { color: '#53a2ff' },
			label:{fontSize:30}
			}
			let b = {
			value: this.shuzu1[0]['3_smallglass_processing'],
			name: "未完成",
			itemStyle: { color: 'darkseagreen' },
			label:{fontSize:30}
			// 构造查询参数
			let canshu1={
			line:<%= request.getParameter("id") %>,
			type: type,
			startDate: startDate,
			endDate: endDate
			}
			// 清空当前数据
			this.shuzu = [];
			this.shuzu1 = [];
			// console.log("输出");
			// console.log(canshu1);
			// 拼接SQL查询语句
			let sql="{call machine_bigScreen('"+canshu1.line+"','"+canshu1.startDate+"','"+canshu1.endDate+"','"+canshu1.type+"')}";
			let flag = 2;
			this.loadAjxss('任务查询成功', sql, flag, "shuzu");
			let sql1="{call machine_bigScreen24('"+canshu.line+"')}";
			let flag1 = 2;
			// 调用数据加载函数（例如AJAX请求）
			this.loadAjxss('任务查询成功', sql1, flag1, "shuzu1");
			//console.log(this.shuzu);
			},

			}
			this.val1.title.text="订单加工"
			this.val1.title.top="45%"
			this.val1.title.left="45%"
			this.val1.title.textStyle.fontSize=30
			this.val1.series[0].data[0]=a
			this.val1.series[0].data[1]=b
			HisArr.setOption(this.val1);
			},
			echarsInit() {
			let datashijian = [];
			let plans = [];
			@@ -380,7 +369,6 @@
			let shutdownTimes = [];

			// 检查数据是否存在
			// if (this.shuzu && this.shuzu.length > 0) {
			// 遍历 shuzu 数据提取停机时长数据
			for (let i in this.shuzu) {
			let date = this.shuzu[i]["0_createtime"];
			@@ -390,14 +378,9 @@
			let day = new Date(date);
			let formattedDate = (day.getMonth() + 1) + "/" + day.getDate();
			datashijian.push(formattedDate);

			// 停机时长
			shutdownTimes.push(shutdownNum);
			}

			console.log('日期:', datashijian);
			console.log('停机时长:', shutdownTimes);

			// 初始化图表
			let HisArr = this.$echarts.init(document.getElementById('trendChart3'));

			@@ -421,28 +404,105 @@
			]
			};

			HisArr.setOption(option);
			// } else {
			// console.error('shuzu 数据为空或未加载');
			// console.log(this.shuzu);
			// }
			HisArr.setOption(option);
			this.loading = false;
			},
			updateLineChart() {
			let datatime = [];
			let sum = [];
			let hourFormatted
			for (let i in this.shuzu1) {
			let hours = this.shuzu1[i]["0_hour"];
			let production = this.shuzu1[i]["1_total_num"];
			hourFormatted = new Date(hours).getHours().toString().padStart(2, '0') + ":00";
			datatime.push(hourFormatted);
			sum.push(production);

			}
			let HisArr = this.$echarts.init(document.getElementById('trendChart4'));
			const option = {
			xAxis: {
			type: 'category',
			data: datatime,
			axisLabel: {
			formatter: '{value}:00'
			}
			},
			yAxis: {
			type: 'value'
			},
			series: [{
			data: sum,
			type: 'line',
			smooth: true,
			lineStyle: {
			color: 'blue'
			}
			}]
			};

			// 使用新数据更新曲线图
			HisArr.setOption(option);
			HisArr.resize();
			this.loading = false;
			}

			},
			watch:{

			shuzu(){
			this.echarsInit();
			this.echarsInit3();
			this.updateLineChart();
			},
			},
			mounted: function() {
			async mounted(){

			// 获取选中的产品类别
			const type = document.getElementById('product-category-select').value;
			// 获取日期选择器的值
			const startDate = document.getElementById('start-date').value;
			const endDate = document.getElementById('end-date').value;
			let canshu={
			line:<%= request.getParameter("id") %>,
			type: type,
			startDate: startDate,
			endDate: endDate
			}
			this.shuzu = [];
			let sql="{call machine_bigScreen(5,'','','')}";
			let sql="{call machine_bigScreen('"+canshu.line+"','"+canshu.startDate+"','"+canshu.endDate+"','"+canshu.type+"')}";
			let flag = 2;
			this.loadAjxss('任务查询成功',sql,flag,"shuzu");

			this.shuzu1 = [];
			let sql1="{call machine_bigScreen24('"+canshu.line+"')}";
			let flag1 = 2;
			this.loadAjxss('任务查询成功',sql1,flag1,"shuzu1");





			await setInterval(()=>{
			// 获取选中的产品类别
			const type = document.getElementById('product-category-select').value;
			// 获取日期选择器的值
			const startDate = document.getElementById('start-date').value;
			const endDate = document.getElementById('end-date').value;
			let canshu={
			line:<%= request.getParameter("id") %>,
			type: type,
			startDate: startDate,
			endDate: endDate
			}
			// console.log("输出：");
			// console.log(canshu);
			sql="{call machine_bigScreen('"+canshu.line+"','"+canshu.startDate+"','"+canshu.endDate+"','"+canshu.type+"')}";
			this.interValLoadAjxs('任务查询成功',sql,flag,"shuzu")

			sql1="{call machine_bigScreen24('"+canshu.line+"')}";
			this.loadAjxss('24小时产量查询',sql1,flag1,"shuzu1");
			},5000)
			}

			})
			@@ -450,43 +510,21 @@
			const trendChart1 = echarts.init(document.getElementById('trendChart1'));
			const trendChart2 = echarts.init(document.getElementById('trendChart2'));
			const trendChart3 = echarts.init(document.getElementById('trendChart3'));
			const trendChart4 = echarts.init(document.getElementById('trendChart4'));
			// 获取当前日期
			const currentDate = new Date();

			// 设置结束日期为明天
			// currentDate.setDate(currentDate.getDate() + 1);
			// const endDate = currentDate.toISOString().split('T')[0];
			// document.getElementById('end-date').value = endDate;
			//
			// // 设置开始日期为三天前
			// currentDate.setDate(currentDate.getDate() - 3); // 恢复到三天前
			// const startDate = currentDate.toISOString().split('T')[0];
			// document.getElementById('start-date').value = startDate;



			// 配置第一个图表 (柱状图 - 订单计划和订单完成)
			// const option1 = {
			// tooltip: {
			// trigger: 'axis'
			// },
			// legend: {
			// data: ['订单计划', '订单完成']
			// },
			// xAxis: {
			// type: 'category',
			// data: dates
			// },
			// yAxis: {
			// type: 'value'
			// },
			// series: [{
			// name: '订单计划',
			// type: 'bar',
			// data: plans,
			// itemStyle: {
			// color: 'rgba(54, 162, 235, 1)'
			// }
			// },
			// {
			// name: '订单完成',
			// type: 'bar',
			// data: overnums,
			// itemStyle: {
			// color: 'rgba(75, 192, 192, 1)'
			// }
			// }
			// ]
			// };
			// trendChart1.setOption(option1);

			// 配置第二个图表 (柱状图 - 工程不良台数和工程不良率)
			const option2 = {
			@@ -523,81 +561,11 @@
			};
			trendChart2.setOption(option2);

			// 配置第三个图表 (柱状图 - 停机时长和停机时率)
			// const option3 = {
			// tooltip: {
			// trigger: 'axis'
			// },
			// legend: {
			// data: ['停机时长', '停机时率']
			// },
			// xAxis: {
			// type: 'category',
			// data: ['2025-03-30', '2025-03-31', '2025-04-01']
			// },
			// yAxis: {
			// type: 'value'
			// },
			// series: [{
			// name: '停机时长',
			// type: 'bar',
			// data: [1, 2, 3],
			// itemStyle: {
			// color: 'rgba(255, 159, 64, 1)'
			// }
			// },
			// {
			// name: '停机时率',
			// type: 'bar',
			// data: [0.02, 0.03, 0.04],
			// itemStyle: {
			// color: 'rgba(153, 102, 255, 1)'
			// }
			// }
			// ]
			// };
			// trendChart3.setOption(option3);

			// 根据日期范围过滤数据
			function filterData() {
			const startDate = document.getElementById('start-date').value;
			const endDate = document.getElementById('end-date').value;
			// 模拟新的数据
			const newData1 = {
			labels: ['2025-03-30', '2025-03-31'],
			datasets: [{
			label: '订单计划',
			data: [7098, 8000],
			backgroundColor: 'rgba(54, 162, 235, 0.2)',
			borderColor: 'rgba(54, 162, 235, 1)',
			borderWidth: 1
			}, {
			label: '订单完成',
			data: [7897, 8200],
			backgroundColor: 'rgba(75, 192, 192, 0.2)',
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 1
			}]
			};
			trendChart1.setOption({
			xAxis: {
			data: newData1.labels
			},
			series: [{
			data: newData1.datasets[0].data
			},
			{
			data: newData1.datasets[1].data
			}
			]
			});
			}

			// 重置搜索栏
			function resetFilters() {
			document.getElementById('start-date').value = '';
			document.getElementById('end-date').value = '';
			}




			</script>

	gmms/WebContent/bigScreen/twoglassCut.jsp	322 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/qiegeguanli/qiegerenwu.jsp	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -260,6 +260,7 @@
			}
			let sql="{call AXJ_qiegeguanli_peifanghao_cahxun(?,?)}~"+JSON.stringify(para);
			this.loadAjxss('配方号查询',sql,2,"peifanhao")

			},
			getMSg(){
			//this.getMSgs();