Haier_MES.git - Gitblit

parent: 0b6edba9 | 补丁 | 提交 | ignore whitespace

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

2023-07-26 0d6766643c504e75c890c2ab2572b5ce5b95f84e

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

3个文件已添加

	gmms/WebContent/jiagongzhongxin/jiagongzhongxin.jsp	847 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/shuidao/shuidao.jsp	847 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/xiapianduiduo/xiapianduiduo.jsp	424 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 gmms/WebContent/jiagongzhongxin/jiagongzhongxin.jsp

New file
@@ -0,0 +1,847 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>加工中心</title>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/echarts.min.js"></script>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;
    font-size: 14px;

  }

  body,
  html {
    width: 100%;
    height: 100%;
    background-color: #00008B;

  }

  #wai {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0px;
    padding: 0px;
    justify-content: center;
  }

  .wai_zs {
    width: 50%;
    height: 49%;
    background-color: #00008B;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
  }

  .wai_ys {
    width: 49%;
    height: 49%;
    background-color: #00008B;
    border-bottom: 1px solid white;
  }

  .wai_zx {
    width: 50%;
    height: 50%;
    background-color: #00008B;
    border-right: 1px solid white;
  }

  .wai_yx {
    width: 49%;
    height: 50%;
    background-color: #00008B;
  }



  .msgtab {
    width: 50%;
    height: 40%;
    border: 1px solid white;
    border-collapse: collapse;
    position: absolute;
    top: 33%;
    left: 25%;
  }

  .one1,
  .one1 input {
    background-color: #F0FFFF;
  }

  .double1,
  .double1 input {
    background-color: #e1f0fd;
  }

  .msgtab tr th {
    color: white;
    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  .msgtab tr td {

    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  #container {
    width: 50%;
    position: absolute;
    top: 17%;
  }



  #chart-wrap {
    width: 50%;
    height: 60%;
    position: relative;
    top: 39%;
    left: 0%
  }

  #chart-suibian {
    width: 50%;
    height: 60%;
    position: relative;
    top: -65%;
    left: 50%
  }

  #chart-youx {
    width: 50%;
    height: 60%;
    position: relative;
    top: -65%;
    left: 0%
  }

  #chart-yous {
    width: 50%;
    height: 60%;
    position: relative;
    top: 39%;
    left: 50%
  }

  #chart-zuoshang {
    width: 50%;
    height: 60%;
    position: relative;
    top: -65%;
    left: 0%
  }

  #chart-zuoxia {
    width: 50%;
    height: 58%;
    position: relative;
    top: 42%;
    left: 50%
  }


  #chart-youshang {
    width: 50%;
    height: 60%;
    position: relative;
    top: -5%;
    left: 50%
  }

  #chart-youxia {
    width: 50%;
    height: 58%;
    position: relative;
    top: -19%;
    left: 0%;
  }

  .centdv_time {
    color: white;
    width: 50%;
    height: 30%;
    position: relative;
    top: -71%;
    left: 0%;
  }

  .centdv_time input {
    height: 25px;
  }

  .btn {
    text-align: center;
    width: 100px;
    height: 29px;
    /*   outline: none; */
    border: none;
    background-color: white;
    box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
  }
</style>
<body>
<div id="wai">
    <div class="wai_zs">
      <div id="chart-wrap"></div>

      <div id="chart-suibian"></div>
    </div>
    <div class="wai_ys">
      <div id="chart-yous"></div>

      <div id="chart-youx"></div>
    </div>
    <div class="wai_zx">
      <div id="chart-zuoxia"></div>

      <div id="chart-zuoshang"></div>
    </div>
    <div class="wai_yx">
      <div id="chart-youshang"></div>

      <div id="chart-youxia"></div>
    </div>

    <div class="centdv_time"><input type="date">~<input type="date">
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button class="btn" type="button">查询</button>
    </div>
    <table class="msgtab">
      <thead>
        <tr>
          <th>设备</th>
          <th>订单号</th>
          <th>已加工数</th>
          <th>未加工数</th>
          <th>破损数</th>
          <th>更换倒计时</th>
          <th>耗材周期</th>
          <th>更换材料</th>
        </tr>
      </thead>
      <tbody>
        <tr class="one1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
        <tr class="double1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
        <tr class="one1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
        <tr class="double1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

<script>
  // 1-下 --------------------------------------------------------------------------------------------------
  function zhutu () {

    var chartDom = document.getElementById('chart-wrap');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu2 () {
    var chartDom = document.getElementById('chart-suibian');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu3 () {
    var chartDom = document.getElementById('chart-yous');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu4 () {
    var chartDom = document.getElementById('chart-youx');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu5 () {
    var chartDom = document.getElementById('chart-zuoxia');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '电耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu6 () {
    var chartDom = document.getElementById('chart-zuoshang');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu7 () {
    var chartDom = document.getElementById('chart-youxia');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu8 () {
    var chartDom = document.getElementById('chart-youshang');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  window.onload = function () {
    zhutu();
    zhutu2();
    zhutu3();
    zhutu4();
    zhutu5();
    zhutu6();
    zhutu7();
    zhutu8();
  }

</script>
</html>

 gmms/WebContent/shuidao/shuidao.jsp

New file
@@ -0,0 +1,847 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>水刀</title>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/echarts.min.js"></script>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;
    font-size: 14px;

  }

  body,
  html {
    width: 100%;
    height: 100%;
    background-color: #00008B;

  }

  #wai {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0px;
    padding: 0px;
    justify-content: center;
  }

  .wai_zs {
    width: 50%;
    height: 49%;
    background-color: #00008B;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
  }

  .wai_ys {
    width: 49%;
    height: 49%;
    background-color: #00008B;
    border-bottom: 1px solid white;
  }

  .wai_zx {
    width: 50%;
    height: 50%;
    background-color: #00008B;
    border-right: 1px solid white;
  }

  .wai_yx {
    width: 49%;
    height: 50%;
    background-color: #00008B;
  }



  .msgtab {
    width: 50%;
    height: 40%;
    border: 1px solid white;
    border-collapse: collapse;
    position: absolute;
    top: 33%;
    left: 25%;
  }

  .one1,
  .one1 input {
    background-color: #F0FFFF;
  }

  .double1,
  .double1 input {
    background-color: #e1f0fd;
  }

  .msgtab tr th {
    color: white;
    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  .msgtab tr td {

    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  #container {
    width: 50%;
    position: absolute;
    top: 17%;
  }



  #chart-wrap {
    width: 50%;
    height: 60%;
    position: relative;
    top: 39%;
    left: 0%
  }

  #chart-suibian {
    width: 50%;
    height: 60%;
    position: relative;
    top: -65%;
    left: 50%
  }

  #chart-youx {
    width: 50%;
    height: 60%;
    position: relative;
    top: -65%;
    left: 0%
  }

  #chart-yous {
    width: 50%;
    height: 60%;
    position: relative;
    top: 39%;
    left: 50%
  }

  #chart-zuoshang {
    width: 50%;
    height: 60%;
    position: relative;
    top: -65%;
    left: 0%
  }

  #chart-zuoxia {
    width: 50%;
    height: 58%;
    position: relative;
    top: 42%;
    left: 50%
  }


  #chart-youshang {
    width: 50%;
    height: 60%;
    position: relative;
    top: -5%;
    left: 50%
  }

  #chart-youxia {
    width: 50%;
    height: 58%;
    position: relative;
    top: -19%;
    left: 0%;
  }

  .centdv_time {
    color: white;
    width: 50%;
    height: 30%;
    position: relative;
    top: -71%;
    left: 0%;
  }

  .centdv_time input {
    height: 25px;
  }

  .btn {
    text-align: center;
    width: 100px;
    height: 29px;
    /*   outline: none; */
    border: none;
    background-color: white;
    box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
  }
</style>
<body>
<div id="wai">
    <div class="wai_zs">
      <div id="chart-wrap"></div>

      <div id="chart-suibian"></div>
    </div>
    <div class="wai_ys">
      <div id="chart-yous"></div>

      <div id="chart-youx"></div>
    </div>
    <div class="wai_zx">
      <div id="chart-zuoxia"></div>

      <div id="chart-zuoshang"></div>
    </div>
    <div class="wai_yx">
      <div id="chart-youshang"></div>

      <div id="chart-youxia"></div>
    </div>

    <div class="centdv_time"><input type="date">~<input type="date">
      &nbsp;&nbsp;&nbsp;&nbsp;
      <button class="btn" type="button">查询</button>
    </div>
    <table class="msgtab">
      <thead>
        <tr>
          <th>设备</th>
          <th>订单号</th>
          <th>已加工数</th>
          <th>未加工数</th>
          <th>破损数</th>
          <th>更换倒计时</th>
          <th>耗材周期</th>
          <th>更换材料</th>
        </tr>
      </thead>
      <tbody>
        <tr class="one1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
        <tr class="double1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
        <tr class="one1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
        <tr class="double1">
          <td>测试</td>
          <td>测试测试测试测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
          <td>测试测试</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

<script>
  // 1-下 --------------------------------------------------------------------------------------------------
  function zhutu () {

    var chartDom = document.getElementById('chart-wrap');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu2 () {
    var chartDom = document.getElementById('chart-suibian');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu3 () {
    var chartDom = document.getElementById('chart-yous');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu4 () {
    var chartDom = document.getElementById('chart-youx');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu5 () {
    var chartDom = document.getElementById('chart-zuoxia');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '电耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu6 () {
    var chartDom = document.getElementById('chart-zuoshang');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu7 () {
    var chartDom = document.getElementById('chart-youxia');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  function zhutu8 () {
    var chartDom = document.getElementById('chart-youshang');
    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: '#87CEFA' } },
          axisLabel: { color: '#87CEFA' },
          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "水耗",
          nameTextStyle: {
            color: "#87CEFA",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#87CEFA",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#87CEFA",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '水耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#87CEFA' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  window.onload = function () {
    zhutu();
    zhutu2();
    zhutu3();
    zhutu4();
    zhutu5();
    zhutu6();
    zhutu7();
    zhutu8();
  }

</script>
</html>

 gmms/WebContent/xiapianduiduo/xiapianduiduo.jsp

New file
@@ -0,0 +1,424 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下片堆垛</title>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/echarts.min.js"></script>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;


  }

  body,
  html {
    width: 100%;
    height: 100%;
    background-color: #00008B;

  }

  #wai {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0px;
    padding: 0px;
    justify-content: center;
  }

  #wai_shang {
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: nowrap;
  }

  #wai_xia {
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: nowrap;
  }

  .shang_zuo {
    height: 100%;
    width: 50%;
  }

  .shang_you {
    height: 100%;
    width: 50%;
  }

  .centdv_time {
    color: white;
    width: 70%;
    height: 10%;
    position: relative;
  }

  .centdv_time input {
    height: 25px;
  }

  .btn {
    text-align: center;
    width: 100px;
    height: 29px;
    /*   outline: none; */
    border: none;
    background-color: white;
    box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
  }

  .msgtab {
    width: 100%;
    height: 90%;
    /* border: 1px solid white; */
    padding: 5px;
  }

  .msgtab1 {
    width: 100%;
    height: 90%;
    /* border: 1px solid white; */
    padding: 5px;
  }

  .one1,
  .one1 input {
    background-color: #F0FFFF;
  }

  .double1,
  .double1 input {
    background-color: #e1f0fd;
  }

  .msgtab tr th {
    color: white;
    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  .msgtab tr td {
    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  .msgtab1 tr th {
    color: white;
    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  .msgtab1 tr td {
    white-space: nowrap;
    text-align: center;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }

  .xia_zuo {
    height: 100%;
    width: 50%;
  }

  .xia_you {
    height: 100%;
    width: 50%;
  }

  #chart-wrap {
    width: 90%;
    height: 80%;
  }

  .title {
    color: white;
    height: 10%;
    font-size: 18px;
  }

  .centdv_time {
    font-size: 18px;
  }

  #tuopan {
    width: 80%;
    height: 90%;
    background-color: white;
    border-radius: 25px 25px 0 0;
    margin: 0 auto;
    transform: rotate(180deg);
  }

  .tuopan_jindu {
    border-radius: 0 0 25px 25px;
    width: 100%;
    height: 80%;
    background-color: #87CEFA;
    transform: rotate(180deg);
  }

  .xptile {
    color: white;
    height: 10%;
    font-size: 18px;
    text-align: center;
  }

  .jindu {
    color: black;
    width: 150px;
    height: 5%;
    font-size: 18px;
    position: relative;
    top: -50%;
    left: 42%
  }
</style>
<body>
 <div id="wai">
    <div id="wai_shang">
      <div class="shang_zuo">
        <div class="title">
          当前生产信息：
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          等待托盘数：
          &nbsp;&nbsp;&nbsp;&nbsp;
          已完工托盘数：

        </div>
        <table class="msgtab">
          <thead>
            <tr>
              <th>订单号</th>
              <th>产品信息</th>
              <th>已加工数</th>
              <th>待加工数</th>
              <th>破损数</th>
            </tr>
          </thead>
          <tbody>
            <tr class="one1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="double1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="one1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="double1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="one1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="double1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="shang_you">
        <div class="centdv_time">
          总产量查询：
          <input type="date">~<input type="date">
          &nbsp;&nbsp;&nbsp;&nbsp;
          <button class="btn" type="button">查询</button>
        </div>
        <table class="msgtab1">
          <thead>
            <tr>
              <th>订单号</th>
              <th>产品信息</th>
              <th>已加工数</th>
              <th>待加工数</th>
              <th>破损数</th>
            </tr>
          </thead>
          <tbody>
            <tr class="one1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="double1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="one1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="double1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="one1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="double1">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
    <div id="wai_xia">
      <div class="xia_zuo">
        <div id="chart-wrap"></div>
      </div>
      <div class="xia_you">

        <div id="tuopan">
          <div class="tuopan_jindu"></div>
        </div>

        <div class="xptile">当前下片进度</div>
        <div class="jindu">数量：40/50</div>

      </div>
    </div>
  </div>
</body>
<script>
  function zhutu () {

    var chartDom = document.getElementById('chart-wrap');
    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: '#FFFFF0' } },
          axisLabel: { color: '#FFFFF0' },
          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "电耗",
          nameTextStyle: {
            color: "#FFFFF0",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: "#FFFFF0",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "#FFFFF0",
            fontSize: 12,
          },
        },

      ],
      series: [
        {
          name: '电耗',
          type: 'bar',
          barWidth: '80%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: { color: '#FFFFF0' }
        },

      ]
    };

    option && myChart.setOption(option);
  }

  window.onload = function () {
    zhutu();
  }
</script>
</html>

New file
			@@ -0,0 +1,847 @@
			<%@ page language="java" contentType="text/html; charset=UTF-8"
			pageEncoding="UTF-8"%>
			<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
			<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<title>加工中心</title>
			<script src="../js/jquery-3.4.1.min.js"></script>
			<script src="../js/echarts.min.js"></script>
			</head>
			<style>
			* {
			margin: 0px;
			padding: 0px;
			font-size: 14px;

			}

			body,
			html {
			width: 100%;
			height: 100%;
			background-color: #00008B;

			}

			#wai {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			margin: 0px;
			padding: 0px;
			justify-content: center;
			}

			.wai_zs {
			width: 50%;
			height: 49%;
			background-color: #00008B;
			border-right: 1px solid white;
			border-bottom: 1px solid white;
			}

			.wai_ys {
			width: 49%;
			height: 49%;
			background-color: #00008B;
			border-bottom: 1px solid white;
			}

			.wai_zx {
			width: 50%;
			height: 50%;
			background-color: #00008B;
			border-right: 1px solid white;
			}

			.wai_yx {
			width: 49%;
			height: 50%;
			background-color: #00008B;
			}



			.msgtab {
			width: 50%;
			height: 40%;
			border: 1px solid white;
			border-collapse: collapse;
			position: absolute;
			top: 33%;
			left: 25%;
			}

			.one1,
			.one1 input {
			background-color: #F0FFFF;
			}

			.double1,
			.double1 input {
			background-color: #e1f0fd;
			}

			.msgtab tr th {
			color: white;
			white-space: nowrap;
			text-align: center;
			height: 20px;
			line-height: 20px;
			overflow: hidden;
			}

			.msgtab tr td {

			white-space: nowrap;
			text-align: center;
			height: 20px;
			line-height: 20px;
			overflow: hidden;
			}

			#container {
			width: 50%;
			position: absolute;
			top: 17%;
			}



			#chart-wrap {
			width: 50%;
			height: 60%;
			position: relative;
			top: 39%;
			left: 0%
			}

			#chart-suibian {
			width: 50%;
			height: 60%;
			position: relative;
			top: -65%;
			left: 50%
			}

			#chart-youx {
			width: 50%;
			height: 60%;
			position: relative;
			top: -65%;
			left: 0%
			}

			#chart-yous {
			width: 50%;
			height: 60%;
			position: relative;
			top: 39%;
			left: 50%
			}

			#chart-zuoshang {
			width: 50%;
			height: 60%;
			position: relative;
			top: -65%;
			left: 0%
			}

			#chart-zuoxia {
			width: 50%;
			height: 58%;
			position: relative;
			top: 42%;
			left: 50%
			}


			#chart-youshang {
			width: 50%;
			height: 60%;
			position: relative;
			top: -5%;
			left: 50%
			}

			#chart-youxia {
			width: 50%;
			height: 58%;
			position: relative;
			top: -19%;
			left: 0%;
			}

			.centdv_time {
			color: white;
			width: 50%;
			height: 30%;
			position: relative;
			top: -71%;
			left: 0%;
			}

			.centdv_time input {
			height: 25px;
			}

			.btn {
			text-align: center;
			width: 100px;
			height: 29px;
			/* outline: none; */
			border: none;
			background-color: white;
			box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
			}
			</style>
			<body>
			<div id="wai">
			<div class="wai_zs">
			<div id="chart-wrap"></div>

			<div id="chart-suibian"></div>
			</div>
			<div class="wai_ys">
			<div id="chart-yous"></div>

			<div id="chart-youx"></div>
			</div>
			<div class="wai_zx">
			<div id="chart-zuoxia"></div>

			<div id="chart-zuoshang"></div>
			</div>
			<div class="wai_yx">
			<div id="chart-youshang"></div>

			<div id="chart-youxia"></div>
			</div>

			<div class="centdv_time"><input type="date">~<input type="date">

			<button class="btn" type="button">查询</button>
			</div>
			<table class="msgtab">
			<thead>
			<tr>
			<th>设备</th>
			<th>订单号</th>
			<th>已加工数</th>
			<th>未加工数</th>
			<th>破损数</th>
			<th>更换倒计时</th>
			<th>耗材周期</th>
			<th>更换材料</th>
			</tr>
			</thead>
			<tbody>
			<tr class="one1">
			<td>测试</td>
			<td>测试测试测试测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			</tr>
			<tr class="double1">
			<td>测试</td>
			<td>测试测试测试测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			</tr>
			<tr class="one1">
			<td>测试</td>
			<td>测试测试测试测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			</tr>
			<tr class="double1">
			<td>测试</td>
			<td>测试测试测试测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			<td>测试测试</td>
			</tr>
			</tbody>
			</table>
			</div>
			</body>

			<script>
			// 1-下 --------------------------------------------------------------------------------------------------
			function zhutu () {

			var chartDom = document.getElementById('chart-wrap');
			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: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '水耗',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu2 () {
			var chartDom = document.getElementById('chart-suibian');
			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: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: 'Direct',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu3 () {
			var chartDom = document.getElementById('chart-yous');
			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: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '水耗',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu4 () {
			var chartDom = document.getElementById('chart-youx');
			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: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: 'Direct',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu5 () {
			var chartDom = document.getElementById('chart-zuoxia');
			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: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '电耗',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu6 () {
			var chartDom = document.getElementById('chart-zuoshang');
			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: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '水耗',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu7 () {
			var chartDom = document.getElementById('chart-youxia');
			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: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: 'Direct',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu8 () {
			var chartDom = document.getElementById('chart-youshang');
			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: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '水耗',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			window.onload = function () {
			zhutu();
			zhutu2();
			zhutu3();
			zhutu4();
			zhutu5();
			zhutu6();
			zhutu7();
			zhutu8();
			}

			</script>
			</html>

New file
			@@ -0,0 +1,424 @@
			<%@ page language="java" contentType="text/html; charset=UTF-8"
			pageEncoding="UTF-8"%>
			<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
			<html>
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<title>下片堆垛</title>
			<script src="../js/jquery-3.4.1.min.js"></script>
			<script src="../js/echarts.min.js"></script>
			</head>
			<style>
			* {
			margin: 0px;
			padding: 0px;


			}

			body,
			html {
			width: 100%;
			height: 100%;
			background-color: #00008B;

			}

			#wai {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			margin: 0px;
			padding: 0px;
			justify-content: center;
			}

			#wai_shang {
			width: 100%;
			height: 50%;
			display: flex;
			flex-wrap: nowrap;
			}

			#wai_xia {
			width: 100%;
			height: 50%;
			display: flex;
			flex-wrap: nowrap;
			}

			.shang_zuo {
			height: 100%;
			width: 50%;
			}

			.shang_you {
			height: 100%;
			width: 50%;
			}

			.centdv_time {
			color: white;
			width: 70%;
			height: 10%;
			position: relative;
			}

			.centdv_time input {
			height: 25px;
			}

			.btn {
			text-align: center;
			width: 100px;
			height: 29px;
			/* outline: none; */
			border: none;
			background-color: white;
			box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
			}

			.msgtab {
			width: 100%;
			height: 90%;
			/* border: 1px solid white; */
			padding: 5px;
			}

			.msgtab1 {
			width: 100%;
			height: 90%;
			/* border: 1px solid white; */
			padding: 5px;
			}

			.one1,
			.one1 input {
			background-color: #F0FFFF;
			}

			.double1,
			.double1 input {
			background-color: #e1f0fd;
			}

			.msgtab tr th {
			color: white;
			white-space: nowrap;
			text-align: center;
			height: 20px;
			line-height: 20px;
			overflow: hidden;
			}

			.msgtab tr td {
			white-space: nowrap;
			text-align: center;
			height: 20px;
			line-height: 20px;
			overflow: hidden;
			}

			.msgtab1 tr th {
			color: white;
			white-space: nowrap;
			text-align: center;
			height: 20px;
			line-height: 20px;
			overflow: hidden;
			}

			.msgtab1 tr td {
			white-space: nowrap;
			text-align: center;
			height: 20px;
			line-height: 20px;
			overflow: hidden;
			}

			.xia_zuo {
			height: 100%;
			width: 50%;
			}

			.xia_you {
			height: 100%;
			width: 50%;
			}

			#chart-wrap {
			width: 90%;
			height: 80%;
			}

			.title {
			color: white;
			height: 10%;
			font-size: 18px;
			}

			.centdv_time {
			font-size: 18px;
			}

			#tuopan {
			width: 80%;
			height: 90%;
			background-color: white;
			border-radius: 25px 25px 0 0;
			margin: 0 auto;
			transform: rotate(180deg);
			}

			.tuopan_jindu {
			border-radius: 0 0 25px 25px;
			width: 100%;
			height: 80%;
			background-color: #87CEFA;
			transform: rotate(180deg);
			}

			.xptile {
			color: white;
			height: 10%;
			font-size: 18px;
			text-align: center;
			}

			.jindu {
			color: black;
			width: 150px;
			height: 5%;
			font-size: 18px;
			position: relative;
			top: -50%;
			left: 42%
			}
			</style>
			<body>
			<div id="wai">
			<div id="wai_shang">
			<div class="shang_zuo">
			<div class="title">
			当前生产信息：

			等待托盘数：

			已完工托盘数：

			</div>
			<table class="msgtab">
			<thead>
			<tr>
			<th>订单号</th>
			<th>产品信息</th>
			<th>已加工数</th>
			<th>待加工数</th>
			<th>破损数</th>
			</tr>
			</thead>
			<tbody>
			<tr class="one1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="double1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="one1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="double1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="one1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="double1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			</tbody>
			</table>
			</div>
			<div class="shang_you">
			<div class="centdv_time">
			总产量查询：
			<input type="date">~<input type="date">

			<button class="btn" type="button">查询</button>
			</div>
			<table class="msgtab1">
			<thead>
			<tr>
			<th>订单号</th>
			<th>产品信息</th>
			<th>已加工数</th>
			<th>待加工数</th>
			<th>破损数</th>
			</tr>
			</thead>
			<tbody>
			<tr class="one1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="double1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="one1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="double1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="one1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			<tr class="double1">
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
			</tbody>
			</table>
			</div>

			</div>
			<div id="wai_xia">
			<div class="xia_zuo">
			<div id="chart-wrap"></div>
			</div>
			<div class="xia_you">

			<div id="tuopan">
			<div class="tuopan_jindu"></div>
			</div>

			<div class="xptile">当前下片进度</div>
			<div class="jindu">数量：40/50</div>

			</div>
			</div>
			</div>
			</body>
			<script>
			function zhutu () {

			var chartDom = document.getElementById('chart-wrap');
			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: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '电耗',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			window.onload = function () {
			zhutu();
			}
			</script>
			</html>