Haier_MES.git - Gitblit

parent: 9e998981 | 补丁 | 提交 | show whitespace

clll

2023-08-01 47763fb6eb1276f3b62f9327d98c9cd84766cdfd

将界面修改为VUE框架

3个文件已修改

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

 gmms/WebContent/dapingxianshi/jiagongzhongxin.jsp

@@ -1,12 +1,20 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

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

    <link rel="stylesheet" href="../img/3.ico">

    <link rel="shortcut icon" href="${ctx}/img/3.ico" />

    <link rel="stylesheet" href="../js/static/css/element.css">

    <link rel="stylesheet" href="../js/static/css/style.css">

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

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

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

</head>

<style>

  * {

@@ -20,7 +28,7 @@
  html {

    width: 100%;

    height: 100%;

    background-color: #00008B;

      background-color: #D5EAFF;



  }



@@ -38,7 +46,7 @@
  .wai_zs {

    width: 50%;

    height: 49%;

    background-color: #00008B;

      background-color: #D5EAFF;

    border-right: 1px solid white;

    border-bottom: 1px solid white;

  }

@@ -46,23 +54,22 @@
  .wai_ys {

    width: 49%;

    height: 49%;

    background-color: #00008B;

      background-color: #D5EAFF;

    border-bottom: 1px solid white;

  }



  .wai_zx {

    width: 50%;

    height: 50%;

    background-color: #00008B;

      background-color: #D5EAFF;

    border-right: 1px solid white;

  }



  .wai_yx {

    width: 49%;

    height: 50%;

    background-color: #00008B;

      background-color: #D5EAFF;

  }







  .msgtab {

@@ -74,6 +81,8 @@
    top: 33%;

    left: 25%;

  }



    /*   


  .one1,

  .one1 input {

@@ -101,7 +110,7 @@
    height: 20px;

    line-height: 20px;

    overflow: hidden;

  }

  } */



  #container {

    width: 50%;

@@ -195,11 +204,13 @@
    height: 29px;

    /*   outline: none; */

    border: none;

    background-color: white;

      background-color: #5CADFE;

    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="app">

<div id="wai">

    <div class="wai_zs">

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

@@ -226,74 +237,22 @@
      &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 class="msgtab">

          <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>

  </div>

      </div>

    </div>



</body>



<script>

  // 1-下 --------------------------------------------------------------------------------------------------

  function zhutu () {



    var chartDom = document.getElementById('chart-wrap');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

    Vue.prototype.$echarts = echarts

    let app = new Vue({

      el: '#app',

      mixins: [mixin],

      data: {

        storage: null,

        val: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -310,9 +269,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -320,7 +279,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -328,14 +287,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -347,21 +306,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu2 () {

    var chartDom = document.getElementById('chart-suibian');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valzs: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -378,9 +328,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -388,7 +338,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -396,14 +346,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -415,21 +365,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu3 () {

    var chartDom = document.getElementById('chart-yous');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valys: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -446,9 +387,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -456,7 +397,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -464,14 +405,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -483,21 +424,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu4 () {

    var chartDom = document.getElementById('chart-youx');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valyx: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -514,9 +446,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -524,7 +456,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -532,14 +464,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -551,21 +483,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu5 () {

    var chartDom = document.getElementById('chart-zuoxia');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valzuoxia: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -582,9 +505,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -592,7 +515,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -600,14 +523,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -619,21 +542,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu6 () {

    var chartDom = document.getElementById('chart-zuoshang');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valzuoshang: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -650,9 +564,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -660,7 +574,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -668,14 +582,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -687,21 +601,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu7 () {

    var chartDom = document.getElementById('chart-youxia');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valyouxia: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -718,9 +623,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -728,7 +633,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -736,14 +641,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -755,21 +660,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu8 () {

    var chartDom = document.getElementById('chart-youshang');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valyoushang: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -786,9 +682,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -796,7 +692,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -804,14 +700,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -823,25 +719,96 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };

        },



    option && myChart.setOption(option);

  }



  window.onload = function () {

    zhutu();

    zhutu2();

    zhutu3();

    zhutu4();

    zhutu5();

    zhutu6();

    zhutu7();

    zhutu8();

  }



        tableHead: ['设备', '订单号', '已加工数', '未加工数', '破损数', '更换倒计时', '耗材周期', '更换材料'],

        selectDate: '',

        tableData: [

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

        ],

        show: true,

        showGlassType: '',

        showGlassIndex: 0





      },

      methods: {

        echarsInit () {

          //console.log(1)

          let a = this.$echarts.init(document.getElementById('chart-wrap'))

          a.setOption(this.val)

          let b = this.$echarts.init(document.getElementById('chart-suibian'))

          b.setOption(this.valzs)

          let c = this.$echarts.init(document.getElementById('chart-yous'))

          c.setOption(this.valys)

          let d = this.$echarts.init(document.getElementById('chart-youx'))

          d.setOption(this.valyx)

          let e = this.$echarts.init(document.getElementById('chart-zuoxia'))

          e.setOption(this.valzuoxia)

          let f = this.$echarts.init(document.getElementById('chart-zuoshang'))

          f.setOption(this.valzuoshang)

          let g = this.$echarts.init(document.getElementById('chart-youxia'))

          g.setOption(this.valyouxia)

          let h = this.$echarts.init(document.getElementById('chart-youshang'))

          h.setOption(this.valyoushang)

        },

      },

      computed: {



      },

      async mounted () {



        await this.echarsInit()



      },



    })



</script>



</html>

 gmms/WebContent/dapingxianshi/shuidao.jsp

@@ -1,12 +1,20 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

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

    <link rel="stylesheet" href="../img/3.ico">

    <link rel="shortcut icon" href="${ctx}/img/3.ico" />

    <link rel="stylesheet" href="../js/static/css/element.css">

    <link rel="stylesheet" href="../js/static/css/style.css">

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

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

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

</head>

<style>

  * {

@@ -20,7 +28,7 @@
  html {

    width: 100%;

    height: 100%;

    background-color: #00008B;

      background-color: #D5EAFF;



  }



@@ -38,7 +46,7 @@
  .wai_zs {

    width: 50%;

    height: 49%;

    background-color: #00008B;

      background-color: #D5EAFF;

    border-right: 1px solid white;

    border-bottom: 1px solid white;

  }

@@ -46,23 +54,22 @@
  .wai_ys {

    width: 49%;

    height: 49%;

    background-color: #00008B;

      background-color: #D5EAFF;

    border-bottom: 1px solid white;

  }



  .wai_zx {

    width: 50%;

    height: 50%;

    background-color: #00008B;

      background-color: #D5EAFF;

    border-right: 1px solid white;

  }



  .wai_yx {

    width: 49%;

    height: 50%;

    background-color: #00008B;

      background-color: #D5EAFF;

  }







  .msgtab {

@@ -74,6 +81,8 @@
    top: 33%;

    left: 25%;

  }



    /*   


  .one1,

  .one1 input {

@@ -101,7 +110,7 @@
    height: 20px;

    line-height: 20px;

    overflow: hidden;

  }

  } */



  #container {

    width: 50%;

@@ -195,11 +204,13 @@
    height: 29px;

    /*   outline: none; */

    border: none;

    background-color: white;

      background-color: #5CADFE;

    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="app">

<div id="wai">

    <div class="wai_zs">

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

@@ -226,74 +237,22 @@
      &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 class="msgtab">

          <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>

  </div>

      </div>

    </div>



</body>



<script>

  // 1-下 --------------------------------------------------------------------------------------------------

  function zhutu () {



    var chartDom = document.getElementById('chart-wrap');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

    Vue.prototype.$echarts = echarts

    let app = new Vue({

      el: '#app',

      mixins: [mixin],

      data: {

        storage: null,

        val: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -310,9 +269,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -320,7 +279,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -328,14 +287,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -347,21 +306,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu2 () {

    var chartDom = document.getElementById('chart-suibian');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valzs: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -378,9 +328,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -388,7 +338,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -396,14 +346,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -415,21 +365,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu3 () {

    var chartDom = document.getElementById('chart-yous');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valys: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -446,9 +387,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -456,7 +397,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -464,14 +405,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -483,21 +424,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu4 () {

    var chartDom = document.getElementById('chart-youx');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valyx: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -514,9 +446,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -524,7 +456,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -532,14 +464,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -551,21 +483,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu5 () {

    var chartDom = document.getElementById('chart-zuoxia');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valzuoxia: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -582,9 +505,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -592,7 +515,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -600,14 +523,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -619,21 +542,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu6 () {

    var chartDom = document.getElementById('chart-zuoshang');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valzuoshang: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -650,9 +564,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -660,7 +574,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -668,14 +582,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -687,21 +601,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu7 () {

    var chartDom = document.getElementById('chart-youxia');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valyouxia: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -718,9 +623,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#00CED1' } },

              axisLabel: { color: '#00CED1' },

              splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -728,7 +633,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -736,14 +641,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#00CED1",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#00CED1",

            fontSize: 12,

          },

        },

@@ -755,21 +660,12 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#00CED1' }

        },



      ]

    };



    option && myChart.setOption(option);

  }



  function zhutu8 () {

    var chartDom = document.getElementById('chart-youshang');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

        },

        valyoushang: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -786,9 +682,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#87CEFA' } },

          axisLabel: { color: '#87CEFA' },

          splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#5CADFE' } },

              axisLabel: { color: '#5CADFE' },

              splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -796,7 +692,7 @@
          type: "value",

          name: "水耗",

          nameTextStyle: {

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -804,14 +700,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#87CEFA",

                  color: "#5CADFE",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#87CEFA",

                color: "#5CADFE",

            fontSize: 12,

          },

        },

@@ -823,25 +719,96 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#87CEFA' }

              itemStyle: { color: '#5CADFE' }

        },



      ]

    };

        },



    option && myChart.setOption(option);

  }



  window.onload = function () {

    zhutu();

    zhutu2();

    zhutu3();

    zhutu4();

    zhutu5();

    zhutu6();

    zhutu7();

    zhutu8();

  }



        tableHead: ['设备', '订单号', '已加工数', '未加工数', '破损数', '更换倒计时', '耗材周期', '更换材料'],

        selectDate: '',

        tableData: [

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

          {

            0: '切割机',

            1: 'NG12221111',

            2: '123',

            3: '1341',

            4: '11',

            5: '2023-7-31 09:25:14',

            6: '2023-7-31 09:25:21',

            7: '更换'

          },

        ],

        show: true,

        showGlassType: '',

        showGlassIndex: 0





      },

      methods: {

        echarsInit () {

          //console.log(1)

          let a = this.$echarts.init(document.getElementById('chart-wrap'))

          a.setOption(this.val)

          let b = this.$echarts.init(document.getElementById('chart-suibian'))

          b.setOption(this.valzs)

          let c = this.$echarts.init(document.getElementById('chart-yous'))

          c.setOption(this.valys)

          let d = this.$echarts.init(document.getElementById('chart-youx'))

          d.setOption(this.valyx)

          let e = this.$echarts.init(document.getElementById('chart-zuoxia'))

          e.setOption(this.valzuoxia)

          let f = this.$echarts.init(document.getElementById('chart-zuoshang'))

          f.setOption(this.valzuoshang)

          let g = this.$echarts.init(document.getElementById('chart-youxia'))

          g.setOption(this.valyouxia)

          let h = this.$echarts.init(document.getElementById('chart-youshang'))

          h.setOption(this.valyoushang)

        },

      },

      computed: {



      },

      async mounted () {



        await this.echarsInit()



      },



    })



</script>



</html>

 gmms/WebContent/dapingxianshi/xiapianduiduo.jsp

@@ -1,12 +1,18 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

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

    <link rel="stylesheet" href="../js/static/css/element.css">

    <link rel="stylesheet" href="../js/static/css/style.css">

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

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

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

</head>

<style>

  * {

@@ -20,8 +26,13 @@
  html {

    width: 100%;

    height: 100%;

    background-color: #00008B;

      background-color: #D5EAFF;



    }



    #app {

      width: 100%;

      height: 100%;

  }



  #wai {

@@ -37,7 +48,7 @@


  #wai_shang {

    width: 100%;

    height: 50%;

      height: 48%;

    display: flex;

    flex-wrap: nowrap;

  }

@@ -60,7 +71,6 @@
  }



  .centdv_time {

    color: white;

    width: 70%;

    height: 10%;

    position: relative;

@@ -76,67 +86,23 @@
    height: 29px;

    /*   outline: none; */

    border: none;

    background-color: white;

      background-color: #5CADFE;

    box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);

  }



  .msgtab {

    width: 100%;

      width: 99%;

    height: 90%;

    /* border: 1px solid white; */

    padding: 5px;



  }



  .msgtab1 {

    width: 100%;

      width: 99%;

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

@@ -154,7 +120,7 @@
  }



  .title {

    color: white;

      color: black;

    height: 10%;

    font-size: 18px;

  }

@@ -166,22 +132,21 @@
  #tuopan {

    width: 80%;

    height: 90%;

    background-color: white;

      background-color: #696969;

    border-radius: 25px 25px 0 0;

    margin: 0 auto;

    transform: rotate(180deg);

  }



  .tuopan_jindu {

    #tuopan_jindu {

    border-radius: 0 0 25px 25px;

    width: 100%;

    height: 80%;

    background-color: #87CEFA;

      /* height: 75%; */

      background-color: #5CADFE;

    transform: rotate(180deg);

  }



  .xptile {

    color: white;

    height: 10%;

    font-size: 18px;

    text-align: center;

@@ -189,15 +154,24 @@


  .jindu {

    color: black;

    width: 150px;

      width: 100px;

    height: 5%;

    font-size: 18px;

    position: relative;

    top: -50%;

    left: 42%

      top: -55%;

      left: 36%

    }



    #jindu_zhi {

      border: none;

      background-color: transparent;

      height: 100%;

      font-size: 18px;

  }

</style>



<body>

    <div id="app">

 <div id="wai">

    <div id="wai_shang">

      <div class="shang_zuo">

@@ -209,61 +183,10 @@
          已完工托盘数：



        </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 class="msgtab">

              <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>

            </div>

      </div>

      <div class="shang_you">

        <div class="centdv_time">

@@ -272,61 +195,9 @@
          &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 class="msgtab1">

              <show-table :tablehead="tableHeads" :tabledata="tableDatas"></show-table>

            </div>

      </div>



    </div>

@@ -337,24 +208,25 @@
      <div class="xia_you">



        <div id="tuopan">

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

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

        </div>



        <div class="xptile">当前下片进度</div>

        <div class="jindu">数量：40/50</div>

            <div class="jindu"><input type="text" id="jindu_zhi"></div>



          </div>

      </div>

    </div>

  </div>

</body>

<script>

  function zhutu () {



    var chartDom = document.getElementById('chart-wrap');

    var myChart = echarts.init(chartDom);

    var option;



    option = {

    Vue.prototype.$echarts = echarts

    let app = new Vue({

      el: '#app',

      mixins: [mixin],

      data: {

        storage: null,

        val: {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

@@ -371,9 +243,9 @@
        {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

          axisLine: { lineStyle: { color: '#FFFFF0' } },

          axisLabel: { color: '#FFFFF0' },

          splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }

              axisLine: { lineStyle: { color: '#696969' } },

              axisLabel: { color: '#696969' },

              splitLine: { lineStyle: { color: '#696969', type: 'dashed' } }

        }

      ],

      yAxis: [

@@ -381,7 +253,7 @@
          type: "value",

          name: "电耗",

          nameTextStyle: {

            color: "#FFFFF0",

                color: "#696969",

            fontSize: 12,

            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左

          },

@@ -389,14 +261,14 @@
            // 网格线

            show: true,

            lineStyle: { //分割线

              color: "#FFFFF0",

                  color: "#696969",

              width: 1,

              type: "dashed" //dotted：虚线 solid:实线

            }

          },

          axisLabel: {

            // 轴文字

            color: "#FFFFF0",

                color: "#696969",

            fontSize: 12,

          },

        },

@@ -408,17 +280,129 @@
          type: 'bar',

          barWidth: '80%',

          data: [10, 52, 200, 334, 390, 330, 220],

          itemStyle: { color: '#FFFFF0' }

              itemStyle: { color: '#696969' }

        },



      ]

    };

        },

        tableHead: ['订单号', '产品信息', '已加工数', '待加工数', '破损数'],

        selectDate: '',

        tableData: [

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          },

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          },

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          }

          ,

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          }

        ],

        tableHeads: ['订单号', '产品信息', '已加工数', '待加工数', '破损数'],

        selectDate: '',

        tableDatas: [

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          },

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          },

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          }

          ,

          {

            0: 'NG10000231',

            1: '12mm超白平钢',

            2: '123',

            3: '1331',

            4: '12',

          }

        ],

        show: true,

        showGlassType: '',

        showGlassIndex: 0,

        gao: 50



    option && myChart.setOption(option);



      },

      methods: {

        echarsInit () {

          let a = this.$echarts.init(document.getElementById('chart-wrap'))

          a.setOption(this.val)

        },

        jindu () {

          let myDiv = document.getElementById("tuopan_jindu");

          let gao = 45;



          $("#jindu_zhi").val("数量：45 / 50");

          if (gao >= 40 && gao <= 45) {

            myDiv.style.height = "85%";

          }

          else if (gao > 45 && gao <= 49) {

            myDiv.style.height = "95%";

          }

          else if (gao > 30 && gao < 40) {

            myDiv.style.height = "77%";

          }

          else if (gao > 20 && gao <= 30) {

            myDiv.style.height = "57%";

          }

          else if (gao > 10 && gao <= 20) {

            myDiv.style.height = "37%";

          }

          else if (gao >= 0 && gao <= 10) {

            myDiv.style.height = "17%";

          }

          else {

            myDiv.style.height = "100%";

  }



  window.onload = function () {

    zhutu();

  }

      },

      computed: {



      },

      async mounted () {



        await this.echarsInit();

        this.jindu();

      },



    })



</script>



</html>

			@@ -1,12 +1,20 @@
			<%@ page language="java" contentType="text/html; charset=UTF-8"
			pageEncoding="UTF-8"%>
			<%@ 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>
			<link rel="stylesheet" href="../img/3.ico">
			<link rel="shortcut icon" href="${ctx}/img/3.ico" />
			<link rel="stylesheet" href="../js/static/css/element.css">
			<link rel="stylesheet" href="../js/static/css/style.css">
			<script src="../js/jquery-3.4.1.min.js"></script>
			<script src="../js/echarts.min.js"></script>
			<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>
			</head>
			<style>
			* {
			@@ -20,7 +28,7 @@
			html {
			width: 100%;
			height: 100%;
			background-color: #00008B;
			background-color: #D5EAFF;

			}

			@@ -38,7 +46,7 @@
			.wai_zs {
			width: 50%;
			height: 49%;
			background-color: #00008B;
			background-color: #D5EAFF;
			border-right: 1px solid white;
			border-bottom: 1px solid white;
			}
			@@ -46,23 +54,22 @@
			.wai_ys {
			width: 49%;
			height: 49%;
			background-color: #00008B;
			background-color: #D5EAFF;
			border-bottom: 1px solid white;
			}

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

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



			.msgtab {
			@@ -74,6 +81,8 @@
			top: 33%;
			left: 25%;
			}

			/*

			.one1,
			.one1 input {
			@@ -101,7 +110,7 @@
			height: 20px;
			line-height: 20px;
			overflow: hidden;
			}
			} */

			#container {
			width: 50%;
			@@ -195,11 +204,13 @@
			height: 29px;
			/* outline: none; */
			border: none;
			background-color: white;
			background-color: #5CADFE;
			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="app">
			<div id="wai">
			<div class="wai_zs">
			<div id="chart-wrap"></div>
			@@ -226,74 +237,22 @@

			<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 class="msgtab">
			<show-table :tablehead="tableHead" :tabledata="tableData"></show-table>
			</div>
			</div>
			</div>

			</body>

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

			var chartDom = document.getElementById('chart-wrap');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			Vue.prototype.$echarts = echarts
			let app = new Vue({
			el: '#app',
			mixins: [mixin],
			data: {
			storage: null,
			val: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -310,9 +269,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#5CADFE' } },
			axisLabel: { color: '#5CADFE' },
			splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -320,7 +279,7 @@
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -328,14 +287,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			color: "#5CADFE",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			},
			},
			@@ -347,21 +306,12 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			itemStyle: { color: '#5CADFE' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu2 () {
			var chartDom = document.getElementById('chart-suibian');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			},
			valzs: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -378,9 +328,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#00CED1' } },
			axisLabel: { color: '#00CED1' },
			splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -388,7 +338,7 @@
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -396,14 +346,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			color: "#00CED1",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			},
			},
			@@ -415,21 +365,12 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			itemStyle: { color: '#00CED1' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu3 () {
			var chartDom = document.getElementById('chart-yous');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			},
			valys: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -446,9 +387,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#5CADFE' } },
			axisLabel: { color: '#5CADFE' },
			splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -456,7 +397,7 @@
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -464,14 +405,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			color: "#5CADFE",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			},
			},
			@@ -483,21 +424,12 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			itemStyle: { color: '#5CADFE' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu4 () {
			var chartDom = document.getElementById('chart-youx');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			},
			valyx: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -514,9 +446,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#00CED1' } },
			axisLabel: { color: '#00CED1' },
			splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -524,7 +456,7 @@
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -532,14 +464,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			color: "#00CED1",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			},
			},
			@@ -551,21 +483,12 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			itemStyle: { color: '#00CED1' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu5 () {
			var chartDom = document.getElementById('chart-zuoxia');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			},
			valzuoxia: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -582,9 +505,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }
			axisLine: { lineStyle: { color: '#00CED1' } },
			axisLabel: { color: '#00CED1' },
			splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -592,7 +515,7 @@
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -600,14 +523,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			color: "#00CED1",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			},
			},
			@@ -619,21 +542,12 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			itemStyle: { color: '#00CED1' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu6 () {
			var chartDom = document.getElementById('chart-zuoshang');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			},
			valzuoshang: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -650,9 +564,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#5CADFE' } },
			axisLabel: { color: '#5CADFE' },
			splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -660,7 +574,7 @@
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -668,14 +582,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			color: "#5CADFE",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			},
			},
			@@ -687,21 +601,12 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			itemStyle: { color: '#5CADFE' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu7 () {
			var chartDom = document.getElementById('chart-youxia');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			},
			valyouxia: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -718,9 +623,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#00CED1' } },
			axisLabel: { color: '#00CED1' },
			splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -728,7 +633,7 @@
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -736,14 +641,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			color: "#00CED1",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			color: "#00CED1",
			fontSize: 12,
			},
			},
			@@ -755,21 +660,12 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			itemStyle: { color: '#00CED1' }
			},

			]
			};

			option && myChart.setOption(option);
			}

			function zhutu8 () {
			var chartDom = document.getElementById('chart-youshang');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			},
			valyoushang: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -786,9 +682,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#87CEFA' } },
			axisLabel: { color: '#87CEFA' },
			splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#5CADFE' } },
			axisLabel: { color: '#5CADFE' },
			splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -796,7 +692,7 @@
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -804,14 +700,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#87CEFA",
			color: "#5CADFE",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#87CEFA",
			color: "#5CADFE",
			fontSize: 12,
			},
			},
			@@ -823,25 +719,96 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#87CEFA' }
			itemStyle: { color: '#5CADFE' }
			},

			]
			};
			},

			option && myChart.setOption(option);
			}

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

			tableHead: ['设备', '订单号', '已加工数', '未加工数', '破损数', '更换倒计时', '耗材周期', '更换材料'],
			selectDate: '',
			tableData: [
			{
			0: '切割机',
			1: 'NG12221111',
			2: '123',
			3: '1341',
			4: '11',
			5: '2023-7-31 09:25:14',
			6: '2023-7-31 09:25:21',
			7: '更换'
			},
			{
			0: '切割机',
			1: 'NG12221111',
			2: '123',
			3: '1341',
			4: '11',
			5: '2023-7-31 09:25:14',
			6: '2023-7-31 09:25:21',
			7: '更换'
			},
			{
			0: '切割机',
			1: 'NG12221111',
			2: '123',
			3: '1341',
			4: '11',
			5: '2023-7-31 09:25:14',
			6: '2023-7-31 09:25:21',
			7: '更换'
			},
			{
			0: '切割机',
			1: 'NG12221111',
			2: '123',
			3: '1341',
			4: '11',
			5: '2023-7-31 09:25:14',
			6: '2023-7-31 09:25:21',
			7: '更换'
			},
			],
			show: true,
			showGlassType: '',
			showGlassIndex: 0


			},
			methods: {
			echarsInit () {
			//console.log(1)
			let a = this.$echarts.init(document.getElementById('chart-wrap'))
			a.setOption(this.val)
			let b = this.$echarts.init(document.getElementById('chart-suibian'))
			b.setOption(this.valzs)
			let c = this.$echarts.init(document.getElementById('chart-yous'))
			c.setOption(this.valys)
			let d = this.$echarts.init(document.getElementById('chart-youx'))
			d.setOption(this.valyx)
			let e = this.$echarts.init(document.getElementById('chart-zuoxia'))
			e.setOption(this.valzuoxia)
			let f = this.$echarts.init(document.getElementById('chart-zuoshang'))
			f.setOption(this.valzuoshang)
			let g = this.$echarts.init(document.getElementById('chart-youxia'))
			g.setOption(this.valyouxia)
			let h = this.$echarts.init(document.getElementById('chart-youshang'))
			h.setOption(this.valyoushang)
			},
			},
			computed: {

			},
			async mounted () {

			await this.echarsInit()

			},

			})

			</script>

			</html>

			@@ -1,12 +1,18 @@
			<%@ page language="java" contentType="text/html; charset=UTF-8"
			pageEncoding="UTF-8"%>
			<%@ 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>
			<link rel="stylesheet" href="../js/static/css/element.css">
			<link rel="stylesheet" href="../js/static/css/style.css">
			<script src="../js/jquery-3.4.1.min.js"></script>
			<script src="../js/echarts.min.js"></script>
			<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>
			</head>
			<style>
			* {
			@@ -20,8 +26,13 @@
			html {
			width: 100%;
			height: 100%;
			background-color: #00008B;
			background-color: #D5EAFF;

			}

			#app {
			width: 100%;
			height: 100%;
			}

			#wai {
			@@ -37,7 +48,7 @@

			#wai_shang {
			width: 100%;
			height: 50%;
			height: 48%;
			display: flex;
			flex-wrap: nowrap;
			}
			@@ -60,7 +71,6 @@
			}

			.centdv_time {
			color: white;
			width: 70%;
			height: 10%;
			position: relative;
			@@ -76,67 +86,23 @@
			height: 29px;
			/* outline: none; */
			border: none;
			background-color: white;
			background-color: #5CADFE;
			box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
			}

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

			}

			.msgtab1 {
			width: 100%;
			width: 99%;
			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%;
			@@ -154,7 +120,7 @@
			}

			.title {
			color: white;
			color: black;
			height: 10%;
			font-size: 18px;
			}
			@@ -166,22 +132,21 @@
			#tuopan {
			width: 80%;
			height: 90%;
			background-color: white;
			background-color: #696969;
			border-radius: 25px 25px 0 0;
			margin: 0 auto;
			transform: rotate(180deg);
			}

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

			.xptile {
			color: white;
			height: 10%;
			font-size: 18px;
			text-align: center;
			@@ -189,15 +154,24 @@

			.jindu {
			color: black;
			width: 150px;
			width: 100px;
			height: 5%;
			font-size: 18px;
			position: relative;
			top: -50%;
			left: 42%
			top: -55%;
			left: 36%
			}

			#jindu_zhi {
			border: none;
			background-color: transparent;
			height: 100%;
			font-size: 18px;
			}
			</style>

			<body>
			<div id="app">
			<div id="wai">
			<div id="wai_shang">
			<div class="shang_zuo">
			@@ -209,61 +183,10 @@
			已完工托盘数：

			</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 class="msgtab">
			<show-table :tablehead="tableHead" :tabledata="tableData"></show-table>
			</div>
			</div>
			<div class="shang_you">
			<div class="centdv_time">
			@@ -272,61 +195,9 @@

			<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 class="msgtab1">
			<show-table :tablehead="tableHeads" :tabledata="tableDatas"></show-table>
			</div>
			</div>

			</div>
			@@ -337,24 +208,25 @@
			<div class="xia_you">

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

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

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

			var chartDom = document.getElementById('chart-wrap');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
			Vue.prototype.$echarts = echarts
			let app = new Vue({
			el: '#app',
			mixins: [mixin],
			data: {
			storage: null,
			val: {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -371,9 +243,9 @@
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#FFFFF0' } },
			axisLabel: { color: '#FFFFF0' },
			splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
			axisLine: { lineStyle: { color: '#696969' } },
			axisLabel: { color: '#696969' },
			splitLine: { lineStyle: { color: '#696969', type: 'dashed' } }
			}
			],
			yAxis: [
			@@ -381,7 +253,7 @@
			type: "value",
			name: "电耗",
			nameTextStyle: {
			color: "#FFFFF0",
			color: "#696969",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			@@ -389,14 +261,14 @@
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#FFFFF0",
			color: "#696969",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#FFFFF0",
			color: "#696969",
			fontSize: 12,
			},
			},
			@@ -408,17 +280,129 @@
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#FFFFF0' }
			itemStyle: { color: '#696969' }
			},

			]
			};
			},
			tableHead: ['订单号', '产品信息', '已加工数', '待加工数', '破损数'],
			selectDate: '',
			tableData: [
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			},
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			},
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			}
			,
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			}
			],
			tableHeads: ['订单号', '产品信息', '已加工数', '待加工数', '破损数'],
			selectDate: '',
			tableDatas: [
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			},
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			},
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			}
			,
			{
			0: 'NG10000231',
			1: '12mm超白平钢',
			2: '123',
			3: '1331',
			4: '12',
			}
			],
			show: true,
			showGlassType: '',
			showGlassIndex: 0,
			gao: 50

			option && myChart.setOption(option);

			},
			methods: {
			echarsInit () {
			let a = this.$echarts.init(document.getElementById('chart-wrap'))
			a.setOption(this.val)
			},
			jindu () {
			let myDiv = document.getElementById("tuopan_jindu");
			let gao = 45;

			$("#jindu_zhi").val("数量：45 / 50");
			if (gao >= 40 && gao <= 45) {
			myDiv.style.height = "85%";
			}
			else if (gao > 45 && gao <= 49) {
			myDiv.style.height = "95%";
			}
			else if (gao > 30 && gao < 40) {
			myDiv.style.height = "77%";
			}
			else if (gao > 20 && gao <= 30) {
			myDiv.style.height = "57%";
			}
			else if (gao > 10 && gao <= 20) {
			myDiv.style.height = "37%";
			}
			else if (gao >= 0 && gao <= 10) {
			myDiv.style.height = "17%";
			}
			else {
			myDiv.style.height = "100%";
			}

			window.onload = function () {
			zhutu();
			}
			},
			computed: {

			},
			async mounted () {

			await this.echarsInit();
			this.jindu();
			},

			})

			</script>

			</html>