Haier_MES.git - Gitblit

parent: 2af13291 | 补丁 | 提交 | ignore whitespace

Merge branch 'master' of http://10.153.19.150:10101/r/Haier_MES

2023-07-26 90a2c33d3153d7a8f5298f3f927b4561f8759e7e

Merge branch 'master' of http://10.153.19.150:10101/r/Haier_MES

5个文件已修改

1个文件已添加

	gmms/.settings/org.eclipse.core.resources.prefs	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/WEB-INF/lib/nglib.jar	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/dakongdaping.jsp	253 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/ganhuaxiapian/ganghuaxiapian.jsp	968 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/mysqlInsert/toPlc.jsp	6 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/tiemotaizu/tiemotaizu.jsp	1034 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 gmms/.settings/org.eclipse.core.resources.prefs

@@ -1,2 +1,3 @@
eclipse.preferences.version=1
encoding//WebContent/dapingxianshi/dakongdaping.jsp=UTF-8
encoding//WebContent/login/machinelistcontent.jsp=UTF-8

 gmms/WebContent/WEB-INF/lib/nglib.jar

Binary files differ

 gmms/WebContent/dapingxianshi/dakongdaping.jsp

New file
@@ -0,0 +1,253 @@
<%@page import="ng.db.DBHelper"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%-- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> --%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>打孔大屏</title>

<!-- Font Awesome -->
<link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">
<link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
@IMPORT url("../static/global/showtask/showtask.css");
</style>

<script>
    var contextPath = "${pageContext.request.contextPath}";
</script>

<link type="text/css" rel="stylesheet"
    href="../static/css/dataTables.bootstrap.css" />
<link type="text/css" rel="stylesheet"
    href="../static/css/dataTables.tableTools.css" />

<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/echarts.min.js"></script>
<link rel="stylesheet" href="../js/static/css/element.css">
<!-- <link rel="stylesheet" href="../js/static/css/style.css"> -->
<script src="../js/static/js/vue.js"></script>
<script src="../js/mixins.js"></script>
<!-- import JavaScript -->

<script src="../js/static/js/element.js"></script>
<script src="../js/static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>
<script type="text/javascript" src="../static/js/moment.js"></script>
<script type="text/javascript" src="../static/js/sucaijiayuan.js"></script>
<script type="text/javascript" src="../static/laydate/laydate.js"></script>
<script type="text/javascript" src="../static/util/utilAlert.js"></script>
<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
    *{
        margin:0;
        padding:0;
    }
    #top{
        height:25%;
        display:flex;
    }
    #center{
        height:50%;
        display:flex;
    }
    #bottom{
        height:25%;
        display:flex;
    }
    .top_div{
        width:25%;
        htight:100%;
    }
    .center_div{
        width:28%;
        htight:100%;
        display:flex;
        flex-wrap: wrap;
    }
    .center_divs{
        width:46%;
        htight:100%;
    }
    .center_div_details{
        height:50%;
        width:100%;
    }
    .bottom_div{
        width:25%;
        htight:100%;
    }
</style>

</head>
<body>
    <div  id='app' style='background-color:#D5EAFF;width:100%;height: 100%;'>
        <div id="top">
            <div class="top_div">打孔机1产品图</div>
            <div class="top_div" id="Histogram1">打孔机1电耗</div>
            <div class="top_div" id="Histogram2">打孔机2电耗</div>
            <div class="top_div">打孔机2产品图</div>
        </div>
        <div id="center">
            <div class="center_div">
                <div class="center_div_details" id="Histogram5">打孔机1用水</div>
                <div class="center_div_details" id="Histogram6">打孔机3用水</div>
            </div>
                <div id="app" style="display:width:100%" class="center_divs">
                     <el-table border
                      :data="machine"
                      height='100%'
                      style="width: 100%;"
                       :cell-class-name="tableRowClassName"
                      >
                      <el-table-column
                        prop="name"
                        label="设备">
                      </el-table-column>
                      <el-table-column
                        prop="ip"
                        label="订单号">
                      </el-table-column>
                      <el-table-column
                        prop="port"
                        label="已加工数量">
                      </el-table-column>
                      <el-table-column
                        prop="st"
                        label="待加工数量">
                      </el-table-column>
                      <el-table-column
                        prop="count"
                        label="破损数量">
                      </el-table-column>
                      <el-table-column
                        prop="count"
                        label="更换周期">
                      </el-table-column>
                      <el-table-column
                        prop="count"
                        label="更换倒计时">
                      </el-table-column>
                     </el-table>
                </div>
            <div class="center_div">
                <div class="center_div_details" id="Histogram7">打孔机2用水</div>
                <div class="center_div_details" id="Histogram8">打孔机4用水</div>
            </div>
        </div>
        <div id="bottom">
            <div class="bottom_div">打孔机1产品图</div>
            <div class="bottom_div" id="Histogram3">打孔机1电耗</div>
            <div class="bottom_div" id="Histogram4">打孔机2电耗</div>
            <div class="bottom_div">打孔机2产品图</div>
        </div>
    </div>
    <script>
    Vue.prototype.$echarts = echarts
    let app =new Vue({
      el: '#app',
      mixins:[mixin],
      data:{
        machine:"",
      },
      methods:{
          tableRowClassName({row,column,rowIndex,columnIndex}) {
    		  
               if (row['st'] == '未连接' && columnIndex==3 ) {
                 return 'success-row';
               }else{
                 return ''; 
               }
   	        
          }
      }
     })
    window.onload=function(){
        zhutu("Histogram1",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram2",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram3",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram4",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram5",[10, 52, 200, 334, 390, 330, 220],"水耗");
        zhutu("Histogram6",[10, 52, 200, 334, 390, 330, 220],"水耗");
        zhutu("Histogram7",[10, 52, 200, 334, 390, 330, 220],"水耗");
        zhutu("Histogram8",[10, 52, 200, 334, 390, 330, 220],"水耗");
    }
    function zhutu (Cname,datas,Tname) {

            var chartDom = document.getElementById(Cname);
            var myChart = echarts.init(chartDom);
            var option;

            option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                  axisLine: { lineStyle: { color: 'rgb(30, 144, 255)' } },
                  axisLabel: { color: 'rgb(30, 144, 255)' },
                  splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
                }
              ],
              yAxis: [
                {
                  type: "value",
                  name: Tname,
                  nameTextStyle: {
                    color: "rgb(30, 144, 255)",
                    fontSize: 12,
                    padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
                  },
                  splitLine: {
                    // 网格线
                    show: true,
                    lineStyle: { //分割线
                      color: "rgb(30, 144, 255)",
                      width: 1,
                      type: "dashed" //dotted：虚线 solid:实线
                    }
                  },
                  axisLabel: {
                    // 轴文字
                    color: "rgb(30, 144, 255)",
                    fontSize: 12,
                  },
                },

              ],
              series: [
                {
                  name: '电耗',
                  type: 'bar',
                  barWidth: '80%',
                  data: datas,
                  itemStyle: { color: 'rgb(30, 144, 255)' }
                },

              ]
            };

            option && myChart.setOption(option);
          }
    </script>
</body>
</html>

 gmms/WebContent/ganhuaxiapian/ganghuaxiapian.jsp

@@ -1,485 +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>

<%@ 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/mysqlInsert/toPlc.jsp

@@ -1,6 +1,11 @@
<%@page import="builder.Manager"%>
<%

<<<<<<< HEAD

Manager.sendtoPLC(76,20,4,new byte[]{0,1,0,1},0);
Manager.sendtoPLC(77,20,4,new byte[]{0,1,0,1},0);
=======
String zt=request.getParameter("zt");
String peifanhao=request.getParameter("peifanhao");

@@ -14,5 +19,6 @@
 }else if(zts==3){
     Manager.sendtoPLC(76,20,4,new byte[]{0,0,0,0},0);
 }
>>>>>>> 09a05342f4c60c834c3ee17a13529cd91c624f34

%>

 gmms/WebContent/tiemotaizu/tiemotaizu.jsp

@@ -1,518 +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>

<%@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>

			@@ -1,2 +1,3 @@
			eclipse.preferences.version=1
			encoding//WebContent/dapingxianshi/dakongdaping.jsp=UTF-8
			encoding//WebContent/login/machinelistcontent.jsp=UTF-8

New file
			@@ -0,0 +1,253 @@
			<%@page import="ng.db.DBHelper"%>
			<%@ page contentType="text/html;charset=UTF-8"%>
			<%-- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> --%>
			<c:set var="ctx" value="${pageContext.request.contextPath}" />
			<html>
			<head>
			<title>打孔大屏</title>

			<!-- Font Awesome -->
			<link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
			<!-- Ionicons -->
			<link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
			<!-- Theme style -->
			<link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">
			<link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">
			<link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
			<style type="text/css">
			@IMPORT url("../static/global/showtask/showtask.css");
			</style>

			<script>
			var contextPath = "${pageContext.request.contextPath}";
			</script>

			<link type="text/css" rel="stylesheet"
			href="../static/css/dataTables.bootstrap.css" />
			<link type="text/css" rel="stylesheet"
			href="../static/css/dataTables.tableTools.css" />

			<script src="../js/jquery-3.4.1.min.js"></script>
			<script src="../js/echarts.min.js"></script>
			<link rel="stylesheet" href="../js/static/css/element.css">
			<!-- <link rel="stylesheet" href="../js/static/css/style.css"> -->
			<script src="../js/static/js/vue.js"></script>
			<script src="../js/mixins.js"></script>
			<!-- import JavaScript -->

			<script src="../js/static/js/element.js"></script>
			<script src="../js/static/js/echarts.min.js"></script>
			<script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>
			<script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>
			<script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>
			<script type="text/javascript" src="../static/js/moment.js"></script>
			<script type="text/javascript" src="../static/js/sucaijiayuan.js"></script>
			<script type="text/javascript" src="../static/laydate/laydate.js"></script>
			<script type="text/javascript" src="../static/util/utilAlert.js"></script>
			<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>

			<style>
			*{
			margin:0;
			padding:0;
			}
			#top{
			height:25%;
			display:flex;
			}
			#center{
			height:50%;
			display:flex;
			}
			#bottom{
			height:25%;
			display:flex;
			}
			.top_div{
			width:25%;
			htight:100%;
			}
			.center_div{
			width:28%;
			htight:100%;
			display:flex;
			flex-wrap: wrap;
			}
			.center_divs{
			width:46%;
			htight:100%;
			}
			.center_div_details{
			height:50%;
			width:100%;
			}
			.bottom_div{
			width:25%;
			htight:100%;
			}
			</style>

			</head>
			<body>
			<div id='app' style='background-color:#D5EAFF;width:100%;height: 100%;'>
			<div id="top">
			<div class="top_div">打孔机1产品图</div>
			<div class="top_div" id="Histogram1">打孔机1电耗</div>
			<div class="top_div" id="Histogram2">打孔机2电耗</div>
			<div class="top_div">打孔机2产品图</div>
			</div>
			<div id="center">
			<div class="center_div">
			<div class="center_div_details" id="Histogram5">打孔机1用水</div>
			<div class="center_div_details" id="Histogram6">打孔机3用水</div>
			</div>
			<div id="app" style="display:width:100%" class="center_divs">
			<el-table border
			:data="machine"
			height='100%'
			style="width: 100%;"
			:cell-class-name="tableRowClassName"
			>
			<el-table-column
			prop="name"
			label="设备">
			</el-table-column>
			<el-table-column
			prop="ip"
			label="订单号">
			</el-table-column>
			<el-table-column
			prop="port"
			label="已加工数量">
			</el-table-column>
			<el-table-column
			prop="st"
			label="待加工数量">
			</el-table-column>
			<el-table-column
			prop="count"
			label="破损数量">
			</el-table-column>
			<el-table-column
			prop="count"
			label="更换周期">
			</el-table-column>
			<el-table-column
			prop="count"
			label="更换倒计时">
			</el-table-column>
			</el-table>
			</div>
			<div class="center_div">
			<div class="center_div_details" id="Histogram7">打孔机2用水</div>
			<div class="center_div_details" id="Histogram8">打孔机4用水</div>
			</div>
			</div>
			<div id="bottom">
			<div class="bottom_div">打孔机1产品图</div>
			<div class="bottom_div" id="Histogram3">打孔机1电耗</div>
			<div class="bottom_div" id="Histogram4">打孔机2电耗</div>
			<div class="bottom_div">打孔机2产品图</div>
			</div>
			</div>
			<script>
			Vue.prototype.$echarts = echarts
			let app =new Vue({
			el: '#app',
			mixins:[mixin],
			data:{
			machine:"",
			},
			methods:{
			tableRowClassName({row,column,rowIndex,columnIndex}) {

			if (row['st'] == '未连接' && columnIndex==3 ) {
			return 'success-row';
			}else{
			return '';
			}

			}
			}
			})
			window.onload=function(){
			zhutu("Histogram1",[10, 52, 200, 334, 390, 330, 220],"电耗");
			zhutu("Histogram2",[10, 52, 200, 334, 390, 330, 220],"电耗");
			zhutu("Histogram3",[10, 52, 200, 334, 390, 330, 220],"电耗");
			zhutu("Histogram4",[10, 52, 200, 334, 390, 330, 220],"电耗");
			zhutu("Histogram5",[10, 52, 200, 334, 390, 330, 220],"水耗");
			zhutu("Histogram6",[10, 52, 200, 334, 390, 330, 220],"水耗");
			zhutu("Histogram7",[10, 52, 200, 334, 390, 330, 220],"水耗");
			zhutu("Histogram8",[10, 52, 200, 334, 390, 330, 220],"水耗");
			}
			function zhutu (Cname,datas,Tname) {

			var chartDom = document.getElementById(Cname);
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow'
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: 'rgb(30, 144, 255)' } },
			axisLabel: { color: 'rgb(30, 144, 255)' },
			splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: Tname,
			nameTextStyle: {
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "rgb(30, 144, 255)",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '电耗',
			type: 'bar',
			barWidth: '80%',
			data: datas,
			itemStyle: { color: 'rgb(30, 144, 255)' }
			},

			]
			};

			option && myChart.setOption(option);
			}
			</script>
			</body>
			</html>

			@@ -1,485 +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>
			<%@ 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>

			@@ -1,6 +1,11 @@
			<%@page import="builder.Manager"%>
			<%

			<<<<<<< HEAD

			Manager.sendtoPLC(76,20,4,new byte[]{0,1,0,1},0);
			Manager.sendtoPLC(77,20,4,new byte[]{0,1,0,1},0);
			=======
			String zt=request.getParameter("zt");
			String peifanhao=request.getParameter("peifanhao");

			@@ -14,5 +19,6 @@
			}else if(zts==3){
			Manager.sendtoPLC(76,20,4,new byte[]{0,0,0,0},0);
			}
			>>>>>>> 09a05342f4c60c834c3ee17a13529cd91c624f34

			%>

			@@ -1,518 +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>
			<%@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>