| | |
|---|
| | | background-color: #007bff; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | #biaoti{ |
|---|
| | | color:black; |
|---|
| | | margin-left: 350px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | |
|---|
| | | |
|---|
| | | <!-- 产品大类下拉框 --> |
|---|
| | | <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> |
|---|
| | | |
|---|
| | | <!-- 开始日期 --> |
|---|
| | |
|---|
| | | <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> |
|---|
| | | |
|---|
| | |
|---|
| | | <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> |
|---|
| | | |
|---|
| | |
|---|
| | | 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 = []; |
|---|
| | |
|---|
| | | let shutdownTimes = []; |
|---|
| | | |
|---|
| | | // 检查数据是否存在 |
|---|
| | | // if (this.shuzu && this.shuzu.length > 0) { |
|---|
| | | // 遍历 shuzu 数据提取停机时长数据 |
|---|
| | | for (let i in this.shuzu) { |
|---|
| | | let date = this.shuzu[i]["0_createtime"]; |
|---|
| | |
|---|
| | | 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')); |
|---|
| | | |
|---|
| | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | 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) |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | |
|---|
| | | 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 = { |
|---|
| | |
|---|
| | | }; |
|---|
| | | 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> |
|---|
| | | |
|---|
