| | |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>智能制造可视化</title> |
|---|
| | | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|---|
| | | <%-- <script src="https://csdn.jsdelivr.net/npm/chart.js"></script>--%> |
|---|
| | | |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | font-family: Arial, sans-serif; |
|---|
| | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div class="container"> |
|---|
| | | <div id="app" class="container"> |
|---|
| | | <!-- Header Section --> |
|---|
| | | <div class="header"> |
|---|
| | | <h1>北玻智能可视化</h1> |
|---|
| | | <div class="date-time"> |
|---|
| | | <span>数据更新时间: 2025-03-31 12:50:52</span> |
|---|
| | | </div> |
|---|
| | | <%-- <div class="date-time">--%> |
|---|
| | | <%-- <span>数据更新时间: 2025-04-31 12:50:52</span>--%> |
|---|
| | | <%-- </div>--%> |
|---|
| | | <!-- 搜索栏 --> |
|---|
| | | <div class="search-bar"> |
|---|
| | | <!-- 产业下拉框 --> |
|---|
| | | <select id="industry-select"> |
|---|
| | | <option value="">选择产业</option> |
|---|
| | | <option value="产业1">产业1</option> |
|---|
| | | <option value="产业2">产业2</option> |
|---|
| | | <option value="产业3">产业3</option> |
|---|
| | | <option value="">莱阳厨电</option> |
|---|
| | | </select> |
|---|
| | | |
|---|
| | | <!-- 产品大类下拉框 --> |
|---|
| | |
|---|
| | | |
|---|
| | | <!-- 工程下拉框 --> |
|---|
| | | <select id="project-select"> |
|---|
| | | <option value="">选择工厂</option> |
|---|
| | | <option value="">莱阳厨电</option> |
|---|
| | | <option value="工程1">工程1</option> |
|---|
| | | <option value="工程2">工程2</option> |
|---|
| | | <option value="工程3">工程3</option> |
|---|
| | | </select> |
|---|
| | | |
|---|
| | | <!-- 开始日期 --> |
|---|
| | |
|---|
| | | <div class="top-blocks"> |
|---|
| | | <div class="top-block"> |
|---|
| | | <div class="title">计划完成率</div> |
|---|
| | | <div class="value">111.26%</div> |
|---|
| | | <div class="value">76.00%</div> |
|---|
| | | </div> |
|---|
| | | <div class="top-block"> |
|---|
| | | <div class="title">工程不良率</div> |
|---|
| | |
|---|
| | | |
|---|
| | | <!-- Chart Section --> |
|---|
| | | <div class="chart-container"> |
|---|
| | | <!-- 第一个趋势图 (柱状图 - 订单计划和订单完成) --> |
|---|
| | | <div class="chart"> |
|---|
| | | <canvas id="trendChart1"></canvas> |
|---|
| | | </div> |
|---|
| | | <!-- 第二个趋势图 (柱状图 - 工程不良台数和工程不良率) --> |
|---|
| | | <div class="chart"> |
|---|
| | | <canvas id="trendChart2"></canvas> |
|---|
| | | </div> |
|---|
| | | <!-- 第三个趋势图 (柱状图 - 停机时长和停机时率) --> |
|---|
| | | <div class="chart"> |
|---|
| | | <canvas id="trendChart3"></canvas> |
|---|
| | | </div> |
|---|
| | | <div id="trendChart1" class="chart"></div> |
|---|
| | | <div id="trendChart2" class="chart"></div> |
|---|
| | | <div id="trendChart3" class="chart"></div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- Table Section --> |
|---|
| | | <div class="side-visual"> |
|---|
| | | <table class="data-table"> |
|---|
| | | <thead> |
|---|
| | | <tr> |
|---|
| | | <th>日期</th> |
|---|
| | | <th>产品名称</th> |
|---|
| | | <th>工厂名称</th> |
|---|
| | | <th>线体</th> |
|---|
| | | <th>订单计划</th> |
|---|
| | | <th>订单完成</th> |
|---|
| | | <th>差异</th> |
|---|
| | | <th>计划完成率</th> |
|---|
| | | </tr> |
|---|
| | | </thead> |
|---|
| | | <tbody id="table-body"> |
|---|
| | | <tr> |
|---|
| | | <td>2025-03-30</td> |
|---|
| | | <td>智能家电</td> |
|---|
| | | <td>菜阳原电</td> |
|---|
| | | <td>清毒桶线</td> |
|---|
| | | <td>7,098</td> |
|---|
| | | <td>7,897</td> |
|---|
| | | <td>799</td> |
|---|
| | | <td>111.26%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>2025-03-30</td> |
|---|
| | | <td>厨房电</td> |
|---|
| | | <td>菜阳原电</td> |
|---|
| | | <td>焊机A线</td> |
|---|
| | | <td>1,898</td> |
|---|
| | | <td>2,478</td> |
|---|
| | | <td>580</td> |
|---|
| | | <td>130.56%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>2025-03-30</td> |
|---|
| | | <td>厨房电</td> |
|---|
| | | <td>菜阳原电</td> |
|---|
| | | <td>焊机B线</td> |
|---|
| | | <td>2,300</td> |
|---|
| | | <td>2,300</td> |
|---|
| | | <td>0</td> |
|---|
| | | <td>100.00%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>2025-03-30</td> |
|---|
| | | <td>厨房电</td> |
|---|
| | | <td>菜阳原电</td> |
|---|
| | | <td>厨房自清洁</td> |
|---|
| | | <td>2,300</td> |
|---|
| | | <td>2,300</td> |
|---|
| | | <td>0</td> |
|---|
| | | <td>100.00%</td> |
|---|
| | | </tr> |
|---|
| | | </tbody> |
|---|
| | | </table> |
|---|
| | | <table class="table table-striped table-hover data-table" style="overflow-x: auto;font-size: 12px;"> |
|---|
| | | <thead> |
|---|
| | | <tr> |
|---|
| | | <th>日期</th> |
|---|
| | | <th>产品名称</th> |
|---|
| | | <th>工厂名称</th> |
|---|
| | | <th>线体</th> |
|---|
| | | <th>订单计划</th> |
|---|
| | | <th>订单完成</th> |
|---|
| | | <th>差异</th> |
|---|
| | | <th>计划完成率</th> |
|---|
| | | </tr> |
|---|
| | | </thead> |
|---|
| | | <tbody> |
|---|
| | | <tr v-for="(item, index) in shuzu" :key="index"> |
|---|
| | | <td>{{ item['0_createtime'] || '暂无数据' }}</td> |
|---|
| | | <td>{{ item['1_type'] || '暂无数据' }}</td> |
|---|
| | | <td>{{ item['2_factory'] || '暂无数据' }}</td> |
|---|
| | | <td>{{ item['3_line'] || '暂无数据' }}</td> |
|---|
| | | <td>{{ item['4_plan'] || 0 }}</td> |
|---|
| | | <td>{{ item['5_overnum'] || 0 }}</td> |
|---|
| | | <td>{{ item['6_difference'] || '暂无数据' }}</td> |
|---|
| | | <td>{{ item['7_plan_completion_rate'] || '暂无数据' }}%</td> |
|---|
| | | </tr> |
|---|
| | | </tbody> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | <!-- Chart.js Script --> |
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script> |
|---|
| | |
|---|
| | | <script src="../js/mixins.js"></script> |
|---|
| | | <script src="../js/echarts.min.js"></script> |
|---|
| | | <script> |
|---|
| | | // 初始化数据 |
|---|
| | | const initialData = { |
|---|
| | | labels: ['2025-03-30', '2025-03-31', '2025-04-01'], |
|---|
| | | datasets: [{ |
|---|
| | | label: '订单计划', |
|---|
| | | data: [7098, 8000, 8500], |
|---|
| | | backgroundColor: 'rgba(54, 162, 235, 0.2)', |
|---|
| | | borderColor: 'rgba(54, 162, 235, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }, { |
|---|
| | | label: '订单完成', |
|---|
| | | data: [7897, 8200, 8700], |
|---|
| | | backgroundColor: 'rgba(75, 192, 192, 0.2)', |
|---|
| | | borderColor: 'rgba(75, 192, 192, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | Vue.prototype.$echarts = echarts; |
|---|
| | | Vue.prototype.$http= axios; |
|---|
| | | let app = new Vue({ |
|---|
| | | el:'#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data:{ |
|---|
| | | shuzu:[{}], |
|---|
| | | shuzu1:[{}], |
|---|
| | | shuzu2:[{}], |
|---|
| | | yield:[{}], |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | val1: { |
|---|
| | | }, |
|---|
| | | |
|---|
| | | const ctx1 = document.getElementById('trendChart1').getContext('2d'); |
|---|
| | | const trendChart1 = new Chart(ctx1, { |
|---|
| | | type: 'bar', |
|---|
| | | data: initialData |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | 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'], |
|---|
| | | |
|---|
| | | const ctx2 = document.getElementById('trendChart2').getContext('2d'); |
|---|
| | | const trendChart2 = new Chart(ctx2, { |
|---|
| | | type: 'bar', |
|---|
| | | data: { |
|---|
| | | labels: ['2025-03-30', '2025-03-31', '2025-04-01'], |
|---|
| | | datasets: [{ |
|---|
| | | label: '工程不良台数', |
|---|
| | | data: [5, 3, 2], |
|---|
| | | backgroundColor: 'rgba(75, 192, 192, 0.2)', |
|---|
| | | borderColor: 'rgba(75, 192, 192, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }, { |
|---|
| | | label: '工程不良率', |
|---|
| | | name: "已完成", |
|---|
| | | itemStyle: { color: '#53a2ff' }, |
|---|
| | | label:{fontSize:30} |
|---|
| | | } |
|---|
| | | let b = { |
|---|
| | | value: this.shuzu1[0]['3_smallglass_processing'], |
|---|
| | | 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); |
|---|
| | | }, |
|---|
| | | echarsInit() { |
|---|
| | | let datashijian = []; |
|---|
| | | let plans = []; |
|---|
| | | let overnums = []; |
|---|
| | | |
|---|
| | | // 遍历 shuzu 数组提取日期、计划数和完成数 |
|---|
| | | for (let i in this.shuzu) { |
|---|
| | | // 这里将 createtime 转换成 "MM/DD" 格式的日期 |
|---|
| | | let date = this.shuzu[i]["0_createtime"]; |
|---|
| | | let day = new Date(date); |
|---|
| | | let formattedDate = (day.getMonth() + 1) + "/" + day.getDate(); // 格式化日期 |
|---|
| | | datashijian.push(formattedDate); |
|---|
| | | |
|---|
| | | plans.push(this.shuzu[i]["4_plan"]); // 提取计划数 |
|---|
| | | overnums.push(this.shuzu[i]["5_overnum"]); // 提取完成数 |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 选择图表容器 |
|---|
| | | let HisArr = this.$echarts.init(document.getElementById('trendChart1')); |
|---|
| | | |
|---|
| | | // 设置 ECharts 配置 |
|---|
| | | let option = { |
|---|
| | | tooltip: { trigger: 'axis' }, |
|---|
| | | legend: { data: ['订单计划', '订单完成'] }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: datashijian |
|---|
| | | }, |
|---|
| | | yAxis: { type: 'value' }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '订单计划', |
|---|
| | | type: 'bar', |
|---|
| | | data: plans, // 使用提取的计划数数据 |
|---|
| | | itemStyle: { color: 'rgba(54, 162, 235, 1)' }, // 设置颜色 |
|---|
| | | barWidth: '40%' // 设置柱状图宽度 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '订单完成', |
|---|
| | | type: 'bar', |
|---|
| | | data: overnums, // 使用提取的完成数数据 |
|---|
| | | itemStyle: { color: 'rgba(75, 192, 192, 1)' }, // 设置颜色 |
|---|
| | | barWidth: '40%' // 设置柱状图宽度 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 设置图表 |
|---|
| | | HisArr.setOption(option); |
|---|
| | | this.loading = false; // 结束加载状态 |
|---|
| | | }, |
|---|
| | | echarsInit3() { |
|---|
| | | let datashijian = []; |
|---|
| | | let shutdownTimes = []; |
|---|
| | | |
|---|
| | | // 检查数据是否存在 |
|---|
| | | // if (this.shuzu && this.shuzu.length > 0) { |
|---|
| | | // 遍历 shuzu 数据提取停机时长数据 |
|---|
| | | for (let i in this.shuzu) { |
|---|
| | | let date = this.shuzu[i]["0_createtime"]; |
|---|
| | | let shutdownNum = this.shuzu[i]["8_shutdownNum"]; |
|---|
| | | |
|---|
| | | // 格式化日期 |
|---|
| | | 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')); |
|---|
| | | |
|---|
| | | let option = { |
|---|
| | | tooltip: { trigger: 'axis' }, |
|---|
| | | legend: { data: ['停机时长(分)'] }, |
|---|
| | | |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: datashijian |
|---|
| | | }, |
|---|
| | | yAxis: { type: 'value' }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '停机时长(分)', |
|---|
| | | type: 'bar', |
|---|
| | | data: shutdownTimes, |
|---|
| | | itemStyle: { color: 'rgba(255, 99, 132, 1)' }, // 可根据需要调整颜色 |
|---|
| | | barWidth: '40%' // 调整柱宽 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | HisArr.setOption(option); |
|---|
| | | // } else { |
|---|
| | | // console.error('shuzu 数据为空或未加载'); |
|---|
| | | // console.log(this.shuzu); |
|---|
| | | // } |
|---|
| | | this.loading = false; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | |
|---|
| | | shuzu(){ |
|---|
| | | this.echarsInit(); |
|---|
| | | this.echarsInit3(); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted: function() { |
|---|
| | | |
|---|
| | | this.shuzu = []; |
|---|
| | | let sql="{call machine_bigScreen(5,'','','')}"; |
|---|
| | | let flag = 2; |
|---|
| | | this.loadAjxss('任务查询成功',sql,flag,"shuzu"); |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | // 初始化 ECharts 图表 |
|---|
| | | const trendChart1 = echarts.init(document.getElementById('trendChart1')); |
|---|
| | | const trendChart2 = echarts.init(document.getElementById('trendChart2')); |
|---|
| | | const trendChart3 = echarts.init(document.getElementById('trendChart3')); |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | // 配置第一个图表 (柱状图 - 订单计划和订单完成) |
|---|
| | | // 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 = { |
|---|
| | | 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: [5, 3, 2], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgba(75, 192, 192, 1)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '工程不良率', |
|---|
| | | type: 'bar', |
|---|
| | | data: [0.01, 0.02, 0.03], |
|---|
| | | backgroundColor: 'rgba(255, 99, 132, 0.2)', |
|---|
| | | borderColor: 'rgba(255, 99, 132, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgba(255, 99, 132, 1)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | trendChart2.setOption(option2); |
|---|
| | | |
|---|
| | | const ctx3 = document.getElementById('trendChart3').getContext('2d'); |
|---|
| | | const trendChart3 = new Chart(ctx3, { |
|---|
| | | type: 'bar', |
|---|
| | | data: { |
|---|
| | | labels: ['2025-03-30', '2025-03-31', '2025-04-01'], |
|---|
| | | datasets: [{ |
|---|
| | | label: '停机时长', |
|---|
| | | data: [1, 2, 3], |
|---|
| | | backgroundColor: 'rgba(255, 159, 64, 0.2)', |
|---|
| | | borderColor: 'rgba(255, 159, 64, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }, { |
|---|
| | | label: '停机时率', |
|---|
| | | data: [0.02, 0.03, 0.04], |
|---|
| | | backgroundColor: 'rgba(153, 102, 255, 0.2)', |
|---|
| | | borderColor: 'rgba(153, 102, 255, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // 配置第三个图表 (柱状图 - 停机时长和停机时率) |
|---|
| | | // 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 params = { |
|---|
| | | startDate: startDate, |
|---|
| | | endDate: endDate, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 示例：假设您已经通过查询筛选了数据，下面模拟更新图表数据 |
|---|
| | | // 更新第一个趋势图 |
|---|
| | | trendChart1.data = { |
|---|
| | | // 模拟新的数据 |
|---|
| | | const newData1 = { |
|---|
| | | labels: ['2025-03-30', '2025-03-31'], |
|---|
| | | datasets: [{ |
|---|
| | | label: '订单计划', |
|---|
| | |
|---|
| | | borderWidth: 1 |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | trendChart2.data = { |
|---|
| | | labels: ['2025-03-30', '2025-03-31'], |
|---|
| | | datasets: [{ |
|---|
| | | label: '工程不良台数', |
|---|
| | | data: [5, 3,], |
|---|
| | | backgroundColor: 'rgba(75, 192, 192, 0.2)', |
|---|
| | | borderColor: 'rgba(75, 192, 192, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }, { |
|---|
| | | label: '工程不良率', |
|---|
| | | data: [0.01, 0.02], |
|---|
| | | backgroundColor: 'rgba(255, 99, 132, 0.2)', |
|---|
| | | borderColor: 'rgba(255, 99, 132, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | trendChart3.data = { |
|---|
| | | labels: ['2025-03-30', '2025-03-31'], |
|---|
| | | datasets: [{ |
|---|
| | | label: '停机时长', |
|---|
| | | data: [1, 2], |
|---|
| | | backgroundColor: 'rgba(255, 159, 64, 0.2)', |
|---|
| | | borderColor: 'rgba(255, 159, 64, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }, { |
|---|
| | | label: '停机时率', |
|---|
| | | data: [0.02, 0.03], |
|---|
| | | backgroundColor: 'rgba(153, 102, 255, 0.2)', |
|---|
| | | borderColor: 'rgba(153, 102, 255, 1)', |
|---|
| | | borderWidth: 1 |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | trendChart1.update(); |
|---|
| | | trendChart2.update(); |
|---|
| | | trendChart3.update(); |
|---|
| | | trendChart1.setOption({ |
|---|
| | | xAxis: { |
|---|
| | | data: newData1.labels |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | data: newData1.datasets[0].data |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | data: newData1.datasets[1].data |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 重置搜索栏 |
|---|
