Haier_MES.git - Gitblit

parent: 72ecfe19 | 补丁 | 提交 | ignore whitespace

wuyouming666

2023-07-26 c2179826c5b95c56bb8bde3a3f33e334c91740f8

2个文件已添加

	gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp	485 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/tiemotaizu.jsp	518 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp

New file
@@ -0,0 +1,485 @@
<%@ page contentType="text/html;charset=UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>钢化下片</title>



<link rel="stylesheet" href="../js/bootstrap.min.css">

<script src="../js/jquery-3.4.1.min.js"></script>

<script src="../js/popper.min.js"></script>

<script src="../js/bootstrap.min.js"></script>

<script src="../js/echarts.min.js"></script>

<script src="../js/static/js/vue.js"></script>

<script src="../js/axios.min.js"></script>

<script src="../js/mixins.js"></script>









<style>

html, body {

    height: 100%;

    width: 100%;

}



.table td, .table th {

    font-size: 14px;

    vertical-align: middle;

}



body {

    background-color: #D5EAFF;

    overflow-x: hidden;

    overflow-y: hidden;

}



.table {

    margin: 0 auto;

}



.container-fluid {

    min-height: 100%;

}



td img {

    transition: all .2s ease-in-out; /* 添加渐变效果 */

}



td.zoom {

    z-index: 1; /* 定义叠放顺序 */

    position: relative; /* 定位方式 */

}



td.zoom img:hover {

    transform: scale(2.8); /* 放大图片 */

}



.row {

    margin-top: 20px;

}



#container, #container2 {

    height: 400px;

    width: 50%;

    margin-top: 20px;

}

</style>

</head>

<body>

    <div="container-fluid">





    <div id="app2">

  <div class="row">

    <div class="col-lg-12">

      <table class="table table-striped table-bordered">

        <thead>

          <tr>

            <th>订单号</th>

            <th>产品数据图片</th>

            <th>加工进度</th>

            <th>已加工数量</th>

            <th>待加工数量</th>

            <th>破损数量</th>

            <th>直通率</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>{{ order.orderId }}</td>

            <td>

              <img :src="order.imageSrc" alt="Image"   @mouseover="zoomIn($event)"

                @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">

            </td>

            <td>

              <div class="progress">

                <div class="progress-bar" role="progressbar"

                  :style="{ width: order.progress + '%' }"

                  :aria-valuenow="order.progress" aria-valuemin="0" aria-valuemax="100">{{ order.progress }}%

                </div>

              </div>

            </td>

            <td>{{ order.processed }}</td>

            <td>{{ order.pending }}</td>

            <td>{{ order.damaged }}</td>

            <td>{{ order.passRate }}</td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>



            <div class="row">

                <div class="col-lg-6" style="height: 100%;">

                    <table class="table table-striped table-bordered">

                        <thead>

                            <tr>

                                <th>订单号</th>

                                <th>加工状态</th>

                                <th>加工进度</th>

                                <th>产品图片</th>

                                <th>建立时间</th>

								
                            </tr>

                        </thead>

                        <tbody>

                            <tr v-for="item in orders" :key="item.orderId">

                                <td>{{ item.orderId }}</td>

                                <td>{{ item.processStatus }}</td>

                                <td>

                                    <div class="progress">

                                        <div class="progress-bar" role="progressbar"

                                            :style="{ width: item.progress + '%' }"

                                            :aria-valuenow="item.progress" aria-valuemin="0"

                                            aria-valuemax="100">{{ item.progress }}%</div>

                                    </div>

                                </td>

                                <td><img

                                    style="width: 80%; height: 30px; background-position: 50%;"

                                    :src="item.deviceImage" alt="Image"     @mouseover="zoomIn2($event)"

                @mouseout="zoomOut2($event)" /></td>

                <td>{{ item.jianlitime }}</td>

                            </tr>

                        </tbody>

                    </table>

                </div>



                <div class="col-lg-6"  style="height: 100%;">

                    <div class="col-lg-24"  >

                        <div class="row">

                            <div class="col-md-4">

                                <label for="start-date" style="font-size: 16px;">起始日期</label> <input

                                    type="date" class="form-control" id="start-date">

                            </div>

                            <div class="col-md-4">

                                <label for="end-date" style="font-size: 16px;">截止日期</label> <input

                                    type="date" class="form-control" id="end-date">

                            </div>

                            <div class="col-md-4">

                                <br>

                                <button class="btn btn-primary" id="filter-btn"

                                    style="font-size: 12px;">筛选</button>

                            </div>

                        </div>

                    </div>

                    <div id="container" style="height: 200%; width: 100%;"></div>

                    <div id="container2"

                        style="height: 200%; width: 100%; margin-top: 1%;"></div>

                </div>

            </div>

        </div>





    </div>









        <script>





let app2 = new Vue({

      el: '#app2',

      data() {

        return {

          order: {

            orderId: 'NG2302020101',

            imageSrc: '数据图.png',

            progress: 100,

            processed: 10,

            pending: 5,

            damaged: 1,

            passRate: '100%',

          },

          orders: [

{

    orderId: 'NG2302020201',

    processStatus: '进行中',

    progress: 70,

    deviceImage: '数据图.png',

    jianlitime:"2023-07-01",

  },

  {

    orderId: 'NG2302020202',

    processStatus: '已完成',

    progress: 100,

    deviceImage: '数据图.png',

    jianlitime:"2023-07-01",

  },

  {

    orderId: 'NG2302020203',

    processStatus: '未开始',

    progress: 0,

    deviceImage: '数据图.png',

    jianlitime:"2023-07-01",

  },

  {

      orderId: 'NG2302020204',

      processStatus: '未开始',

      progress: 0,

      deviceImage: '数据图.png',

      jianlitime:"2023-07-01",

    },

    {

        orderId: 'NG2302020205',

        processStatus: '未开始',

        progress: 0,

        deviceImage: '数据图.png',

        jianlitime:"2023-07-01",

      },

      {

          orderId: 'NG2302020206',

          processStatus: '未开始',

          progress: 0,

          deviceImage: '数据图.png',

          jianlitime:"2023-07-01",

        },

      ],

        };

      },

      methods: {

            zoomIn(event) {

              event.target.style.transform = 'scale(2.2)';

            },

            zoomOut(event) {

              event.target.style.transform = 'scale(1)';

            },

            zoomIn2(event) {

                  event.target.style.transform = 'scale(6.2)';

                },

                zoomOut2(event) {

                  event.target.style.transform = 'scale(1)';

                },

          }

    });

	
/* function zoomIn(element) {

    element.classList.add("zoom"); 
  }

  
  function zoomOut(element) {

    element.classList.remove("zoom"); 
  } */

	
      var dom = document.getElementById('container');

        var myChart = echarts.init(dom, null, {

            renderer: 'canvas',

            useDirtyRect: false

        });

	    
        var dom2 = document.getElementById('container2');

        var myChart2 = echarts.init(dom2, null, {

            renderer: 'canvas',

            useDirtyRect: false

        });



	 


        var data = [{

                date: '2023-07-20',

                waterUsage: 10,

                electricityUsage: 5

            },

            {

                date: '2023-07-21',

                waterUsage: 52,

                electricityUsage: 26

            },

            {

                date: '2023-07-22',

                waterUsage: 200,

                electricityUsage: 100

            },

            {

                date: '2023-07-23',

                waterUsage: 334,

                electricityUsage: 167

            },

            {

                date: '2023-07-24',

                waterUsage: 390,

                electricityUsage: 195

            },

            {

                date: '2023-07-25',

                waterUsage: 330,

                electricityUsage: 165

            },

            {

                date: '2023-07-26',

                waterUsage: 390,

                electricityUsage: 195

            },

            {

                date: '2023-07-27',

                waterUsage: 330,

                electricityUsage: 165

            }

        ];



        var startInput = document.getElementById('start-date');

        var endInput = document.getElementById('end-date');

        var filterBtn = document.getElementById('filter-btn');



        function filterData() {

            var filteredData = [];

            var startDate = new Date(startInput.value);

            var endDate = new Date(endInput.value);



            data.forEach(function (item) {

                var itemDate = new Date(item.date);

                if (itemDate >= startDate && itemDate <= endDate) {

                    filteredData.push(item);

                }

            });



            renderChart(filteredData);

        }



        filterBtn.addEventListener('click', filterData);



        function renderChart(data) {

            var option;



            // 第一个柱形图（水耗）

            option = {

                title: {

                    text: '钢化下片水耗',

                    left: 'center',

                    subtext: ''

                },

                toolbox: {

                    show: true,

                    feature: {

                        dataView: {

                            show: true,

                            readOnly: true

                        },

                        saveAsImage: {

                            show: true

                        }

                    }

                },

                tooltip: {

                    trigger: 'axis',

                    axisPointer: {

                        type: ''

                    },

                    formatter: function (params) {

                        var date = params[0].name;

                        var waterUsage = params[0].value;

                        return date + '<br/>' + '水耗: ' + waterUsage + ' m³';

                    }

                },

                grid: {

                    left: '3%',

                    right: '4%',

                    bottom: '3%',

                    containLabel: true

                },

                xAxis: [{

                    type: 'category',

                    data: data.map(function (item) {

                        return item.date;

                    }),

                    axisTick: {

                        alignWithLabel: true

                    },

                    axisLabel: {

                        fontSize: 12

                    }

                }],

                yAxis: [{

                    type: 'value',

                    name: '水耗(m³)'

                }],

                series: [{

                    name: '水耗',

                    type: 'bar',

                    data: data.map(function (item) {

                        return item.waterUsage;

                    }),

                    itemStyle: {

                        color: '#00ff00' // 设置柱形图的颜色为绿色

                    }

      
        
                }]

            };



            // 第二个柱形图（电耗）

            var option2 = {

                title: {

                    text: '钢化下片电耗',

                    left: 'center',

                    subtext: ''

                },

                toolbox: {

                    show: true,

                    feature: {

                        dataView: {

                            show: true,

                            readOnly: true

	                       
                        },

                        saveAsImage: {

                            show: true

                        }

                    }

                },

                tooltip: {

                    trigger: 'axis',

                    axisPointer: {

                        type: ''

                    },

                    formatter: function (params) {

                        var date = params[0].name;

                        var electricityUsage = params[0].value;

                        return date + '<br/>' + '电耗: ' + electricityUsage + ' kWh';

                    }

                },

                grid: {

                    left: '3%',

                    right: '4%',

                    bottom: '3%',

                    containLabel: true

                },

                xAxis: [{

                    type: 'category',

                    data: data.map(function (item) {

                        return item.date;

                    }),

                    axisTick: {

                        alignWithLabel: true

                    },

                    axisLabel: {

                        fontSize: 12

                    }

                }],

                yAxis: [{

                    type: 'value',

                    name: '电耗(kWh)'

                }],

                series: [{

                    name: '电耗',

                    type: 'bar',

                    data: data.map(function (item) {

                        return item.electricityUsage;

                    })

                }]

            };



            myChart.setOption(option);

            myChart2.setOption(option2);

        }

        startInput.value = data[0].date;

        endInput.value = data[data.length - 1].date;

        renderChart(data);

    
    


        
    </script>

</body>

</html>

 gmms/WebContent/dapingxianshi/tiemotaizu.jsp

New file
@@ -0,0 +1,518 @@
<%@page import="ng.db.DBHelper"%>

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<title>贴膜台组</title>



<link rel="stylesheet" href="../js/bootstrap.min.css">

<script src="../js/jquery-3.4.1.min.js"></script>

<script src="../js/popper.min.js"></script>

<script src="../js/bootstrap.min.js"></script>

<script src="../js/echarts.min.js"></script>





  
  <script src="../js/static/js/vue.js"></script>

  <script src="../js/axios.min.js"></script>

  <script src="../js/mixins.js"></script>









<style>

html, body {

    height: 100%;

    width: 100%;

}



.table td, .table th {

    font-size: 14px;

    vertical-align: middle;

}



body {

    background-color: #D5EAFF;

    overflow-x: hidden;

    overflow-y: hidden;

}



.table {

    margin: 0 auto;

}



.container-fluid {

    min-height: 100%;

}



td img {

    transition: all .2s ease-in-out; /* 添加渐变效果 */

}



td.zoom {

    z-index: 1; /* 定义叠放顺序 */

    position: relative; /* 定位方式 */

}



td.zoom img:hover {

    transform: scale(2.8); /* 放大图片 */

}



.row {

    margin-top: 20px;

}





</style>

</head>

<body>

    <div="container-fluid">





        <div id="app2">

        <div class="row">

  <div class="col-lg-12">

    <table class="table table-striped table-bordered">

      <thead>

        <tr>

          <th>订单号</th>

          <th>产品数据图片</th>

          <th>已加工数量</th>

          <th>待加工数量</th>

          <th>破损数量</th>

          <th>直通率</th>

          <th style='width:140px;'>耗材本次更新时间</th>

          <th style='width:120px;'>更新周期时间</th>

          <th style='width:180px;'>耗材更换倒计时间</th>

          <th>更新</th>

        </tr>

      </thead>

      <tbody>

        <tr v-for="order in orders" :key="order.orderNo">

          <td>{{ order.orderNo }}</td>

          <td>

              <img :src="order.imageSrc" alt="Image"   @mouseover="zoomIn($event)"

                @mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">

            </td>

          <td>{{ order.processedQty }}</td>

          <td>{{ order.pendingQty }}</td>

          <td>{{ order.damagedQty }}</td>

          <td>{{ order.passRate }}</td>

          <td>{{ order.updateTime }}</td>

          <td>{{ order.updateCycle }}</td>

          <td>{{ order.countdown }}</td>

          <td>

            <button class="btn btn-primary" @click="showModal()">更新</button>

          </td>

        </tr>

      </tbody>

    </table>

  </div>

</div>





	
            <div class="row">

                <div class="col-lg-6" style="height: 100%;">

                    <table class="table table-striped table-bordered">

                        <thead>

                            <tr>

                                <th>订单号</th>

                                <th>加工状态</th>

                                <th>加工进度</th>

                                <th>产品图片</th>

                                <th>建立日期</th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr v-for="item in orders2" :key="item.orderId">

                                <td>{{ item.orderId }}</td>

                                <td>{{ item.processStatus }}</td>

                                <td>

                                    <div class="progress">

                                        <div class="progress-bar" role="progressbar"

                                            :style="{ width: item.progress + '%' }"

                                            :aria-valuenow="item.progress" aria-valuemin="0"

                                            aria-valuemax="100">{{ item.progress }}%</div>

                                    </div>

                                </td>

                                <td><img

                                    style="width: 80%; height: 30px; background-position: 50%;"

                                    :src="item.deviceImage" alt="Image"     @mouseover="zoomIn2($event)"

                @mouseout="zoomOut($event)" /></td>

                <td>{{ item.jianlitime }}</td>

                            </tr>

                        </tbody>

                    </table>

                </div>



                <div class="col-lg-6"  style="height: 100%;">

                    <div class="col-lg-24"  >

                        <div class="row">

                            <div class="col-md-4">

                                <label for="start-date" style="font-size: 16px;">起始日期</label> <input

                                    type="date" class="form-control" id="start-date">

                            </div>

                            <div class="col-md-4">

                                <label for="end-date" style="font-size: 16px;">截止日期</label> <input

                                    type="date" class="form-control" id="end-date">

                            </div>

                            <div class="col-md-4">

                                <br>

                                <button class="btn btn-primary" id="filter-btn"

                                    style="font-size: 12px;">筛选</button>

                            </div>

                        </div>

                    </div>

                     <div id="container" style="height: 200%; width: 100%;"></div>

                    <div id="container2"

                        style="height: 200%; width: 100%; margin-top: 1%;"></div> 
                </div>

            </div>

        </div>



              
              <!--   <div id="container" ></div> -->

             


    </div>









        <script>

         Vue.prototype.$http= axios





let app2 = new Vue({

      el: '#app2',

      mixins:[mixin],

      data() {

        return {

             orders2: [

{

    orderId: 'NG2302020201',

    processStatus: '进行中',

    progress: 70,

    deviceImage: '数据图.png',

    jianlitime:"2023-07-01",

  },

  {

    orderId: 'NG2302020202',

    processStatus: '已完成',

    progress: 100,

    deviceImage: '数据图.png',

    jianlitime:"2023-07-01",

  },

  {

    orderId: 'NG2302020203',

    processStatus: '未开始',

    progress: 0,

    deviceImage: '数据图.png',

    jianlitime:"2023-07-01",

  },

  {

      orderId: 'NG2302020204',

      processStatus: '未开始',

      progress: 0,

      deviceImage: '数据图.png',

      jianlitime:"2023-07-01",

    },

    {

        orderId: 'NG2302020205',

        processStatus: '未开始',

        progress: 0,

        deviceImage: '数据图.png',

        jianlitime:"2023-07-01",

      },

      {

          orderId: 'NG2302020206',

          processStatus: '未开始',

          progress: 0,

          deviceImage: '数据图.png',

          jianlitime:"2023-07-01",

        },

      ],

	    	
             orders: [

                      {

                        orderNo: 'NG2302020101',

                        imageSrc: '数据图.png',

                        processedQty: 10,

                        pendingQty: 5,

                        damagedQty: 1,

                        passRate: '100%',

                        updateTime: '23:44',

                        updateCycle: '5',

                        countdown: ''

                      } 
                    ] 
        };

	   
      },

	 
		   
	  
      methods: {

		  
          zoomIn(event) {

              event.target.style.transform = 'scale(2.2)';

            },

            zoomOut(event) {

              event.target.style.transform = 'scale(1)';

            },

            zoomIn2(event) {

                  event.target.style.transform = 'scale(6.2)';

                },

			    
		  
	 
          startCountdown() {

            setInterval(() => {

              this.orders2.forEach(order => {

                if (order.countdown > 0) {

                  order.countdown--;

                } else {

                  order.countdown = order.updateCycle * 60;

                }

              });

            }, 1000);

          }

        },

        mounted() {

          this.startCountdown();

	
          let sql="{call AXJ_dapingtiemodingdanchaxun()}"

                let flag=2;

		
                this.loadAjxs('贴膜订单初始查询',sql,flag,"orders")

		
        }

    });

	
	
	
/* function zoomIn(element) {

    element.classList.add("zoom"); 
  }

  
  function zoomOut(element) {

    element.classList.remove("zoom"); 
  } */

	
      var dom = document.getElementById('container');

        var myChart = echarts.init(dom, null, {

            renderer: 'canvas',

            useDirtyRect: false

        });

	    
        var dom2 = document.getElementById('container2');

        var myChart2 = echarts.init(dom2, null, {

            renderer: 'canvas',

            useDirtyRect: false

        });



	 


        var data = [{

                date: '2023-07-20',

                waterUsage: 10,

                electricityUsage: 5

            },

            {

                date: '2023-07-21',

                waterUsage: 52,

                electricityUsage: 26

            },

            {

                date: '2023-07-22',

                waterUsage: 200,

                electricityUsage: 100

            },

            {

                date: '2023-07-23',

                waterUsage: 334,

                electricityUsage: 167

            },

            {

                date: '2023-07-24',

                waterUsage: 390,

                electricityUsage: 195

            },

            {

                date: '2023-07-25',

                waterUsage: 330,

                electricityUsage: 165

            },

            {

                date: '2023-07-26',

                waterUsage: 390,

                electricityUsage: 195

            }

	        
        ];



        var startInput = document.getElementById('start-date');

        var endInput = document.getElementById('end-date');

        var filterBtn = document.getElementById('filter-btn');



        function filterData() {

            var filteredData = [];

            var startDate = new Date(startInput.value);

            var endDate = new Date(endInput.value);



            data.forEach(function (item) {

                var itemDate = new Date(item.date);

                if (itemDate >= startDate && itemDate <= endDate) {

                    filteredData.push(item);

                }

            });



            renderChart(filteredData);

        }



        filterBtn.addEventListener('click', filterData);



        function renderChart(data) {

            var option;



            // 第一个柱形图（水耗）

            option = {

                title: {

                    text: '贴膜台组水耗',

                    left: 'center',

                    subtext: ''

                },

                toolbox: {

                    show: true,

                    feature: {

                        dataView: {

                            show: true,

                            readOnly: true

                        },

                        saveAsImage: {

                            show: true

                        }

                    }

                },

                tooltip: {

                    trigger: 'axis',

                    axisPointer: {

                        type: ''

                    },

                    formatter: function (params) {

                        var date = params[0].name;

                        var waterUsage = params[0].value;

                        return date + '<br/>' + '水耗: ' + waterUsage + ' m³';

                    }

                },

                grid: {

                    left: '3%',

                    right: '4%',

                    bottom: '3%',

                    containLabel: true

                },

                xAxis: [{

                    type: 'category',

                    data: data.map(function (item) {

                        return item.date;

                    }),

                    axisTick: {

                        alignWithLabel: true

                    },

                    axisLabel: {

                        fontSize: 12

                    }

                }],

                yAxis: [{

                    type: 'value',

                    name: '水耗(m³)'

                }],

                series: [{

                    name: '水耗',

                    type: 'bar',

                    data: data.map(function (item) {

                        return item.waterUsage;

                    }),

                    itemStyle: {

                        color: '#00ff00' // 设置柱形图的颜色为绿色

                    }

      
        
                }]

            };



            // 第二个柱形图（电耗）

            var option2 = {

                title: {

                    text: '贴膜台组电耗',

                    left: 'center',

                    subtext: ''

                },

                toolbox: {

                    show: true,

                    feature: {

                        dataView: {

                            show: true,

                            readOnly: true

	                       
                        },

                        saveAsImage: {

                            show: true

                        }

                    }

                },

                tooltip: {

                    trigger: 'axis',

                    axisPointer: {

                        type: ''

                    },

                    formatter: function (params) {

                        var date = params[0].name;

                        var electricityUsage = params[0].value;

                        return date + '<br/>' + '电耗: ' + electricityUsage + ' kWh';

                    }

                },

                grid: {

                    left: '3%',

                    right: '4%',

                    bottom: '3%',

                    containLabel: true

                },

                xAxis: [{

                    type: 'category',

                    data: data.map(function (item) {

                        return item.date;

                    }),

                    axisTick: {

                        alignWithLabel: true

                    },

                    axisLabel: {

                        fontSize: 12

                    }

                }],

                yAxis: [{

                    type: 'value',

                    name: '电耗(kWh)'

                }],

                series: [{

                    name: '电耗',

                    type: 'bar',

                    data: data.map(function (item) {

                        return item.electricityUsage;

                    })

                }]

            };



            myChart.setOption(option);

            myChart2.setOption(option2);

        }

        startInput.value = data[0].date;

        endInput.value = data[data.length - 1].date;

        renderChart(data);

    
    


        
    </script>

</body>

</html>

New file
			@@ -0,0 +1,485 @@
			<%@ page contentType="text/html;charset=UTF-8"%>
			<!DOCTYPE html>
			<html>
			<head>
			<meta charset="utf-8">
			<title>钢化下片</title>

			<link rel="stylesheet" href="../js/bootstrap.min.css">
			<script src="../js/jquery-3.4.1.min.js"></script>
			<script src="../js/popper.min.js"></script>
			<script src="../js/bootstrap.min.js"></script>
			<script src="../js/echarts.min.js"></script>
			<script src="../js/static/js/vue.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/mixins.js"></script>




			<style>
			html, body {
			height: 100%;
			width: 100%;
			}

			.table td, .table th {
			font-size: 14px;
			vertical-align: middle;
			}

			body {
			background-color: #D5EAFF;
			overflow-x: hidden;
			overflow-y: hidden;
			}

			.table {
			margin: 0 auto;
			}

			.container-fluid {
			min-height: 100%;
			}

			td img {
			transition: all .2s ease-in-out; /* 添加渐变效果 */
			}

			td.zoom {
			z-index: 1; /* 定义叠放顺序 */
			position: relative; /* 定位方式 */
			}

			td.zoom img:hover {
			transform: scale(2.8); /* 放大图片 */
			}

			.row {
			margin-top: 20px;
			}

			#container, #container2 {
			height: 400px;
			width: 50%;
			margin-top: 20px;
			}
			</style>
			</head>
			<body>
			<div="container-fluid">


			<div id="app2">
			<div class="row">
			<div class="col-lg-12">
			<table class="table table-striped table-bordered">
			<thead>
			<tr>
			<th>订单号</th>
			<th>产品数据图片</th>
			<th>加工进度</th>
			<th>已加工数量</th>
			<th>待加工数量</th>
			<th>破损数量</th>
			<th>直通率</th>
			</tr>
			</thead>
			<tbody>
			<tr>
			<td>{{ order.orderId }}</td>
			<td>
			<img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
			@mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
			</td>
			<td>
			<div class="progress">
			<div class="progress-bar" role="progressbar"
			:style="{ width: order.progress + '%' }"
			:aria-valuenow="order.progress" aria-valuemin="0" aria-valuemax="100">{{ order.progress }}%
			</div>
			</div>
			</td>
			<td>{{ order.processed }}</td>
			<td>{{ order.pending }}</td>
			<td>{{ order.damaged }}</td>
			<td>{{ order.passRate }}</td>
			</tr>
			</tbody>
			</table>
			</div>
			</div>

			<div class="row">
			<div class="col-lg-6" style="height: 100%;">
			<table class="table table-striped table-bordered">
			<thead>
			<tr>
			<th>订单号</th>
			<th>加工状态</th>
			<th>加工进度</th>
			<th>产品图片</th>
			<th>建立时间</th>

			</tr>
			</thead>
			<tbody>
			<tr v-for="item in orders" :key="item.orderId">
			<td>{{ item.orderId }}</td>
			<td>{{ item.processStatus }}</td>
			<td>
			<div class="progress">
			<div class="progress-bar" role="progressbar"
			:style="{ width: item.progress + '%' }"
			:aria-valuenow="item.progress" aria-valuemin="0"
			aria-valuemax="100">{{ item.progress }}%</div>
			</div>
			</td>
			<td><img
			style="width: 80%; height: 30px; background-position: 50%;"
			:src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
			@mouseout="zoomOut2($event)" /></td>
			<td>{{ item.jianlitime }}</td>
			</tr>
			</tbody>
			</table>
			</div>

			<div class="col-lg-6" style="height: 100%;">
			<div class="col-lg-24" >
			<div class="row">
			<div class="col-md-4">
			<label for="start-date" style="font-size: 16px;">起始日期</label> <input
			type="date" class="form-control" id="start-date">
			</div>
			<div class="col-md-4">
			<label for="end-date" style="font-size: 16px;">截止日期</label> <input
			type="date" class="form-control" id="end-date">
			</div>
			<div class="col-md-4">
			<br>
			<button class="btn btn-primary" id="filter-btn"
			style="font-size: 12px;">筛选</button>
			</div>
			</div>
			</div>
			<div id="container" style="height: 200%; width: 100%;"></div>
			<div id="container2"
			style="height: 200%; width: 100%; margin-top: 1%;"></div>
			</div>
			</div>
			</div>


			</div>




			<script>


			let app2 = new Vue({
			el: '#app2',
			data() {
			return {
			order: {
			orderId: 'NG2302020101',
			imageSrc: '数据图.png',
			progress: 100,
			processed: 10,
			pending: 5,
			damaged: 1,
			passRate: '100%',
			},
			orders: [
			{
			orderId: 'NG2302020201',
			processStatus: '进行中',
			progress: 70,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020202',
			processStatus: '已完成',
			progress: 100,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020203',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020204',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020205',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020206',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			],
			};
			},
			methods: {
			zoomIn(event) {
			event.target.style.transform = 'scale(2.2)';
			},
			zoomOut(event) {
			event.target.style.transform = 'scale(1)';
			},
			zoomIn2(event) {
			event.target.style.transform = 'scale(6.2)';
			},
			zoomOut2(event) {
			event.target.style.transform = 'scale(1)';
			},
			}
			});

			/* function zoomIn(element) {
			element.classList.add("zoom");
			}

			function zoomOut(element) {
			element.classList.remove("zoom");
			} */

			var dom = document.getElementById('container');
			var myChart = echarts.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
			});

			var dom2 = document.getElementById('container2');
			var myChart2 = echarts.init(dom2, null, {
			renderer: 'canvas',
			useDirtyRect: false
			});



			var data = [{
			date: '2023-07-20',
			waterUsage: 10,
			electricityUsage: 5
			},
			{
			date: '2023-07-21',
			waterUsage: 52,
			electricityUsage: 26
			},
			{
			date: '2023-07-22',
			waterUsage: 200,
			electricityUsage: 100
			},
			{
			date: '2023-07-23',
			waterUsage: 334,
			electricityUsage: 167
			},
			{
			date: '2023-07-24',
			waterUsage: 390,
			electricityUsage: 195
			},
			{
			date: '2023-07-25',
			waterUsage: 330,
			electricityUsage: 165
			},
			{
			date: '2023-07-26',
			waterUsage: 390,
			electricityUsage: 195
			},
			{
			date: '2023-07-27',
			waterUsage: 330,
			electricityUsage: 165
			}
			];

			var startInput = document.getElementById('start-date');
			var endInput = document.getElementById('end-date');
			var filterBtn = document.getElementById('filter-btn');

			function filterData() {
			var filteredData = [];
			var startDate = new Date(startInput.value);
			var endDate = new Date(endInput.value);

			data.forEach(function (item) {
			var itemDate = new Date(item.date);
			if (itemDate >= startDate && itemDate <= endDate) {
			filteredData.push(item);
			}
			});

			renderChart(filteredData);
			}

			filterBtn.addEventListener('click', filterData);

			function renderChart(data) {
			var option;

			// 第一个柱形图（水耗）
			option = {
			title: {
			text: '钢化下片水耗',
			left: 'center',
			subtext: ''
			},
			toolbox: {
			show: true,
			feature: {
			dataView: {
			show: true,
			readOnly: true
			},
			saveAsImage: {
			show: true
			}
			}
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: ''
			},
			formatter: function (params) {
			var date = params[0].name;
			var waterUsage = params[0].value;
			return date + '<br/>' + '水耗: ' + waterUsage + ' m³';
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [{
			type: 'category',
			data: data.map(function (item) {
			return item.date;
			}),
			axisTick: {
			alignWithLabel: true
			},
			axisLabel: {
			fontSize: 12
			}
			}],
			yAxis: [{
			type: 'value',
			name: '水耗(m³)'
			}],
			series: [{
			name: '水耗',
			type: 'bar',
			data: data.map(function (item) {
			return item.waterUsage;
			}),
			itemStyle: {
			color: '#00ff00' // 设置柱形图的颜色为绿色
			}


			}]
			};

			// 第二个柱形图（电耗）
			var option2 = {
			title: {
			text: '钢化下片电耗',
			left: 'center',
			subtext: ''
			},
			toolbox: {
			show: true,
			feature: {
			dataView: {
			show: true,
			readOnly: true

			},
			saveAsImage: {
			show: true
			}
			}
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: ''
			},
			formatter: function (params) {
			var date = params[0].name;
			var electricityUsage = params[0].value;
			return date + '<br/>' + '电耗: ' + electricityUsage + ' kWh';
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [{
			type: 'category',
			data: data.map(function (item) {
			return item.date;
			}),
			axisTick: {
			alignWithLabel: true
			},
			axisLabel: {
			fontSize: 12
			}
			}],
			yAxis: [{
			type: 'value',
			name: '电耗(kWh)'
			}],
			series: [{
			name: '电耗',
			type: 'bar',
			data: data.map(function (item) {
			return item.electricityUsage;
			})
			}]
			};

			myChart.setOption(option);
			myChart2.setOption(option2);
			}
			startInput.value = data[0].date;
			endInput.value = data[data.length - 1].date;
			renderChart(data);




			</script>
			</body>
			</html>

New file
			@@ -0,0 +1,518 @@
			<%@page import="ng.db.DBHelper"%>
			<%@ page language="java" contentType="text/html; charset=utf-8"
			pageEncoding="utf-8"%>
			<c:set var="ctx" value="${pageContext.request.contextPath}" />
			<title>贴膜台组</title>

			<link rel="stylesheet" href="../js/bootstrap.min.css">
			<script src="../js/jquery-3.4.1.min.js"></script>
			<script src="../js/popper.min.js"></script>
			<script src="../js/bootstrap.min.js"></script>
			<script src="../js/echarts.min.js"></script>



			<script src="../js/static/js/vue.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/mixins.js"></script>




			<style>
			html, body {
			height: 100%;
			width: 100%;
			}

			.table td, .table th {
			font-size: 14px;
			vertical-align: middle;
			}

			body {
			background-color: #D5EAFF;
			overflow-x: hidden;
			overflow-y: hidden;
			}

			.table {
			margin: 0 auto;
			}

			.container-fluid {
			min-height: 100%;
			}

			td img {
			transition: all .2s ease-in-out; /* 添加渐变效果 */
			}

			td.zoom {
			z-index: 1; /* 定义叠放顺序 */
			position: relative; /* 定位方式 */
			}

			td.zoom img:hover {
			transform: scale(2.8); /* 放大图片 */
			}

			.row {
			margin-top: 20px;
			}


			</style>
			</head>
			<body>
			<div="container-fluid">


			<div id="app2">
			<div class="row">
			<div class="col-lg-12">
			<table class="table table-striped table-bordered">
			<thead>
			<tr>
			<th>订单号</th>
			<th>产品数据图片</th>
			<th>已加工数量</th>
			<th>待加工数量</th>
			<th>破损数量</th>
			<th>直通率</th>
			<th style='width:140px;'>耗材本次更新时间</th>
			<th style='width:120px;'>更新周期时间</th>
			<th style='width:180px;'>耗材更换倒计时间</th>
			<th>更新</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="order in orders" :key="order.orderNo">
			<td>{{ order.orderNo }}</td>
			<td>
			<img :src="order.imageSrc" alt="Image" @mouseover="zoomIn($event)"
			@mouseout="zoomOut($event)" style="width: 60%; height: 100px; background-position: 50%;">
			</td>
			<td>{{ order.processedQty }}</td>
			<td>{{ order.pendingQty }}</td>
			<td>{{ order.damagedQty }}</td>
			<td>{{ order.passRate }}</td>
			<td>{{ order.updateTime }}</td>
			<td>{{ order.updateCycle }}</td>
			<td>{{ order.countdown }}</td>
			<td>
			<button class="btn btn-primary" @click="showModal()">更新</button>
			</td>
			</tr>
			</tbody>
			</table>
			</div>
			</div>



			<div class="row">
			<div class="col-lg-6" style="height: 100%;">
			<table class="table table-striped table-bordered">
			<thead>
			<tr>
			<th>订单号</th>
			<th>加工状态</th>
			<th>加工进度</th>
			<th>产品图片</th>
			<th>建立日期</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="item in orders2" :key="item.orderId">
			<td>{{ item.orderId }}</td>
			<td>{{ item.processStatus }}</td>
			<td>
			<div class="progress">
			<div class="progress-bar" role="progressbar"
			:style="{ width: item.progress + '%' }"
			:aria-valuenow="item.progress" aria-valuemin="0"
			aria-valuemax="100">{{ item.progress }}%</div>
			</div>
			</td>
			<td><img
			style="width: 80%; height: 30px; background-position: 50%;"
			:src="item.deviceImage" alt="Image" @mouseover="zoomIn2($event)"
			@mouseout="zoomOut($event)" /></td>
			<td>{{ item.jianlitime }}</td>
			</tr>
			</tbody>
			</table>
			</div>

			<div class="col-lg-6" style="height: 100%;">
			<div class="col-lg-24" >
			<div class="row">
			<div class="col-md-4">
			<label for="start-date" style="font-size: 16px;">起始日期</label> <input
			type="date" class="form-control" id="start-date">
			</div>
			<div class="col-md-4">
			<label for="end-date" style="font-size: 16px;">截止日期</label> <input
			type="date" class="form-control" id="end-date">
			</div>
			<div class="col-md-4">
			<br>
			<button class="btn btn-primary" id="filter-btn"
			style="font-size: 12px;">筛选</button>
			</div>
			</div>
			</div>
			<div id="container" style="height: 200%; width: 100%;"></div>
			<div id="container2"
			style="height: 200%; width: 100%; margin-top: 1%;"></div>
			</div>
			</div>
			</div>


			<!-- <div id="container" ></div> -->


			</div>




			<script>
			Vue.prototype.$http= axios


			let app2 = new Vue({
			el: '#app2',
			mixins:[mixin],
			data() {
			return {
			orders2: [
			{
			orderId: 'NG2302020201',
			processStatus: '进行中',
			progress: 70,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020202',
			processStatus: '已完成',
			progress: 100,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020203',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020204',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020205',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			{
			orderId: 'NG2302020206',
			processStatus: '未开始',
			progress: 0,
			deviceImage: '数据图.png',
			jianlitime:"2023-07-01",
			},
			],

			orders: [
			{
			orderNo: 'NG2302020101',
			imageSrc: '数据图.png',
			processedQty: 10,
			pendingQty: 5,
			damagedQty: 1,
			passRate: '100%',
			updateTime: '23:44',
			updateCycle: '5',
			countdown: ''
			}
			]
			};

			},



			methods: {

			zoomIn(event) {
			event.target.style.transform = 'scale(2.2)';
			},
			zoomOut(event) {
			event.target.style.transform = 'scale(1)';
			},
			zoomIn2(event) {
			event.target.style.transform = 'scale(6.2)';
			},



			startCountdown() {
			setInterval(() => {
			this.orders2.forEach(order => {
			if (order.countdown > 0) {
			order.countdown--;
			} else {
			order.countdown = order.updateCycle * 60;
			}
			});
			}, 1000);
			}
			},
			mounted() {
			this.startCountdown();

			let sql="{call AXJ_dapingtiemodingdanchaxun()}"
			let flag=2;

			this.loadAjxs('贴膜订单初始查询',sql,flag,"orders")

			}
			});



			/* function zoomIn(element) {
			element.classList.add("zoom");
			}

			function zoomOut(element) {
			element.classList.remove("zoom");
			} */

			var dom = document.getElementById('container');
			var myChart = echarts.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
			});

			var dom2 = document.getElementById('container2');
			var myChart2 = echarts.init(dom2, null, {
			renderer: 'canvas',
			useDirtyRect: false
			});



			var data = [{
			date: '2023-07-20',
			waterUsage: 10,
			electricityUsage: 5
			},
			{
			date: '2023-07-21',
			waterUsage: 52,
			electricityUsage: 26
			},
			{
			date: '2023-07-22',
			waterUsage: 200,
			electricityUsage: 100
			},
			{
			date: '2023-07-23',
			waterUsage: 334,
			electricityUsage: 167
			},
			{
			date: '2023-07-24',
			waterUsage: 390,
			electricityUsage: 195
			},
			{
			date: '2023-07-25',
			waterUsage: 330,
			electricityUsage: 165
			},
			{
			date: '2023-07-26',
			waterUsage: 390,
			electricityUsage: 195
			}

			];

			var startInput = document.getElementById('start-date');
			var endInput = document.getElementById('end-date');
			var filterBtn = document.getElementById('filter-btn');

			function filterData() {
			var filteredData = [];
			var startDate = new Date(startInput.value);
			var endDate = new Date(endInput.value);

			data.forEach(function (item) {
			var itemDate = new Date(item.date);
			if (itemDate >= startDate && itemDate <= endDate) {
			filteredData.push(item);
			}
			});

			renderChart(filteredData);
			}

			filterBtn.addEventListener('click', filterData);

			function renderChart(data) {
			var option;

			// 第一个柱形图（水耗）
			option = {
			title: {
			text: '贴膜台组水耗',
			left: 'center',
			subtext: ''
			},
			toolbox: {
			show: true,
			feature: {
			dataView: {
			show: true,
			readOnly: true
			},
			saveAsImage: {
			show: true
			}
			}
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: ''
			},
			formatter: function (params) {
			var date = params[0].name;
			var waterUsage = params[0].value;
			return date + '<br/>' + '水耗: ' + waterUsage + ' m³';
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [{
			type: 'category',
			data: data.map(function (item) {
			return item.date;
			}),
			axisTick: {
			alignWithLabel: true
			},
			axisLabel: {
			fontSize: 12
			}
			}],
			yAxis: [{
			type: 'value',
			name: '水耗(m³)'
			}],
			series: [{
			name: '水耗',
			type: 'bar',
			data: data.map(function (item) {
			return item.waterUsage;
			}),
			itemStyle: {
			color: '#00ff00' // 设置柱形图的颜色为绿色
			}


			}]
			};

			// 第二个柱形图（电耗）
			var option2 = {
			title: {
			text: '贴膜台组电耗',
			left: 'center',
			subtext: ''
			},
			toolbox: {
			show: true,
			feature: {
			dataView: {
			show: true,
			readOnly: true

			},
			saveAsImage: {
			show: true
			}
			}
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: ''
			},
			formatter: function (params) {
			var date = params[0].name;
			var electricityUsage = params[0].value;
			return date + '<br/>' + '电耗: ' + electricityUsage + ' kWh';
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [{
			type: 'category',
			data: data.map(function (item) {
			return item.date;
			}),
			axisTick: {
			alignWithLabel: true
			},
			axisLabel: {
			fontSize: 12
			}
			}],
			yAxis: [{
			type: 'value',
			name: '电耗(kWh)'
			}],
			series: [{
			name: '电耗',
			type: 'bar',
			data: data.map(function (item) {
			return item.electricityUsage;
			})
			}]
			};

			myChart.setOption(option);
			myChart2.setOption(option2);
			}
			startInput.value = data[0].date;
			endInput.value = data[data.length - 1].date;
			renderChart(data);




			</script>
			</body>
			</html>