Haier_MES.git - Gitblit

parent: ec524f7c | 补丁 | 提交 | ignore whitespace

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

wuyouming666

2023-07-26 72ecfe19354d60990edd9f28cb3f54739c0d396b

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

# Conflicts:
#	gmms/WebContent/dapingxianshi/dakongdaping.jsp
#	gmms/WebContent/dapingxianshi/tiemotaizu.jsp

4个文件已修改

6个文件已添加

3个文件已删除

	gmms/.settings/org.eclipse.core.resources.prefs	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/WEB-INF/lib/nglib.jar	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/dakongdaping.jsp	253 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp	485 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/siyinceshi.jsp	393 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/siyinxian1.jsp	322 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/tiemotaizu.jsp	512 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/xiacijiance1.jsp	307 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/jiagongzhongxin/jiagongzhongxin.jsp	847 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/login/machinelistcontent.jsp	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/mysqlInsert/toPlc.jsp	6 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/shuidao/shuidao.jsp	847 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/xiapianduiduo/xiapianduiduo.jsp	424 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

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

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

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

Binary files differ

 gmms/WebContent/dapingxianshi/dakongdaping.jsp

File was deleted

 gmms/WebContent/dapingxianshi/ganghuaxiapian.jsp

File was deleted

 gmms/WebContent/dapingxianshi/siyinceshi.jsp

New file
@@ -0,0 +1,393 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="../js/static/css/element.css">
  <link rel="stylesheet" href="../js/static/css/style.css">
  <style >
    .page-scroll {
      height: 100%;
    }
  
    .page-scroll .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    img{  
    width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;     
}
  </style>
</head>
<body>
  <div id="app" >
    <el-container v-loading="loading" >
      <el-header style="margin-top: 3%;height: 3%;">
        <el-button  @click="showFlagFuc" type="primary" round style="float:right;">{{showFlag==false?'返回订单':'新增订单'}}</el-button>
        <el-date-picker  v-show="showFlag"  style="float: left;margin-bottom: 0.3%;"
          v-model="selectdate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
          </el-date-picker>

          <el-button @click="selectTimeOrder"  v-show="showFlag" type="primary" icon="el-icon-search"
            style="float: left;margin-left: 0.2%;margin-bottom: 0.3%;"
            >搜索
          </el-button>

      </el-header>
      <el-main  >
        <el-table v-show="showFlag"
          :data="orderData"
          max-height="600"
          style="width: 100%;">

          
          <el-table-column 
            v-for="(item,keys,index) in tableHead[0]" 
            :key="index"
            :label="item"
            >
            <el-table-column :prop="keys" v-if="index==0" width=130>
              <template slot-scope="scope" v-if="Object.keys(orderData[0]).length!=0">

                <el-button v-if="orderData[scope.$index]['11_order_status']<2"
                  @click.native.prevent="updateOrderState(scope.$index, orderData)"
                  type="text"
                  size="small"
                  v-preventReClick
                  >
                  {{orderData[scope.$index]['11_order_status']==0?'审核':'反审'}}
                </el-button>

                <el-button v-if="orderData[scope.$index]['11_order_status']*1===0"
                  @click.native.prevent="updateRow(scope.$index, orderData)"
                  type="text"
                  size="small">
                          修改
                </el-button>
                <el-button 
                  v-if="orderData[scope.$index]['11_order_status']>1"
                  @click.native.prevent="open(scope.$index, orderData)"
                  type="text"
                  size="small">
                          次破
                </el-button>

                
              </template>
            </el-table-column>

            <el-table-column :prop="keys" v-if="index>0">
              <template slot="header" slot-scope="scope" >
                <el-input v-model="slectOrder[index-1]" @keyup.enter.native="selectSub" type="text"  size="mini" />
              </template>
              
            </el-table-column>
            
          </el-table-column>
        </el-table>
<!-- 新增修改 -->
        
        <el-form v-show="!showFlag" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 25%;margin: auto;">
          <el-form-item>
            <el-button v-show="updateShowFlag" type="primary" @click="updateGlassSub('ruleForm')" v-preventReClick >修改</el-button>
            <el-button v-show="!updateShowFlag" type="primary" @click="submitForm('ruleForm')" v-preventReClick >提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
          
          
          <el-form-item label="小片数量" prop="glassNum">
            <el-input  v-model="ruleForm.glassNum"  autocomplete="off" ></el-input>
          </el-form-item>

          <el-form-item label="配方号" prop="produceid">
            <template>
              <el-select v-model="ruleForm.produceid" placeholder="请选择" clearable filterable>
                <el-option
                  v-for="item in orderProduce"
                  :key="item['0_id']"
                  :label="item['1_val']"
                  :value="item['0_id']">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
  
          
          
        </el-form>
        <el-dialog
          title="刺破"
          :visible.sync="wornGlassFLAG"
          width="30%"
          center>
          <span style="text-align: center;">
            <el-form :model="wornGlass" ref="wornGlass" :rules="rules">
              <el-form-item label="次破数量:" prop="wornNum">
                <el-input for="a" style="width: 50%;"  v-model.number="wornGlass.wornNum"  autocomplete="off" ></el-input>
              </el-form-item>
              <el-form-item label="次破原因:" >
                <el-input  for="b" style="width: 50%;"  v-model.number="wornGlass.reason"  autocomplete="off" ></el-input>
              </el-form-item>
              
              <el-form-item>
                <el-button @click="resetForm('wornGlass');wornGlassFLAG = false">取 消</el-button>
                <el-button v-show="!updateShowFlag" type="primary" @click="wornSub('wornGlass')" v-preventReClick>提交</el-button>
              </el-form-item>
            </el-form>
            
          </span>
          <!-- <span slot="footer" class="dialog-footer">
            
            <el-button type="primary" @click="wornSub">确 定</el-button>
          </span> -->
        </el-dialog>
      </el-main>
      <!-- <el-footer style="background-color: azure;"></el-footer> -->
    </el-container>
  </div>
</body>
  <script src="../js/jquery-3.4.1.min.js"></script>
  
  <script src="../js/static/js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/mixins.js"></script>
  <!-- import JavaScript -->
  <script src="../js/static/js/element.js"></script>
  <script src="../js/static/js/echarts.min.js"></script>
  <script >
    //import * as echarts from '../js/echarts.min.js';
    Vue.prototype.$echarts = echarts
    Vue.prototype.$http= axios
    let app =new Vue({
      el: '#app',
      mixins:[mixin],
      data(){
        var checkNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        }
        setTimeout(() => {
         let reg = new RegExp(`^[0-9]{1,4}(\.[0-9]{0,2})?$`)

          if (!reg.test(value)) { 
            callback(new Error('请输入0.01-9999.99的数字'));
          }else {
              callback();
          }
          
        }, 1000);
      };
        var checkString = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('不能为空'));
          }
          setTimeout(() => {
            if (value.length>255) { 
              callback(new Error('最大长度255'));
            }else {
                callback();
            }
          }, 1000);
        };
      var checkInt = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空或者0'));
        }
        setTimeout(() => {
         let reg = new RegExp(`^[0-9]*[1-9][0-9]*$`)

          if (!reg.test(value)) { 
            callback(new Error('请输入正整数'));
          }else {
              callback();
          }
          
        }, 1000);
      };
      return {
          loading:true,//页面加载flag
          ruleForm: {
          produceid:"",
          glassNum:"",
          creator:'<%= request.getParameter("xingming") %>'
        },
        rules: {
          produceid: [
            { validator: checkInt, trigger: 'blur' }
          ],
          glassNum: [
            { validator: checkInt, trigger: 'blur' }
          ],
          wornNum: [
            { validator: checkInt, trigger: 'blur' }
          ],
          
        },  
        tableHead:[],
        orderData:[],
        showFlag:true,
        updateShowFlag:false,
        updateOrder:{
          id:''
        },
        orderProduce:[],
        fileList:[],
        slectOrder:["","","","","","","","","",""],//筛选参数
        selectdate:["",""],//日期参数
        wornGlassFLAG: false,//次破界面显示标记
        wornGlass:{//破损提交参数
          glassID:'',
          wornNum:'',
          reason:''
        }


      };
        
      },
      methods: {
        submitForm(formName) {//新增订单
        this.$refs[formName].validate((valid) => {
            if (!valid) { 
              return false;
            }
            let sql="{call AXJ_a_order_add(?,?,?,?)}~"+JSON.stringify(this.ruleForm);
            this.connects("订单新增",sql,1,1);
          });
        },
        resetForm(formName) {//清除新增重置
          this.$refs[formName].resetFields();
        },
        showFlagFuc(){//显示订单新增界面
          Object.keys(this.ruleForm).forEach((key) => (this.ruleForm[key] = ''));
          this.showFlag=!this.showFlag
          this.updateShowFlag=false;
        },
        updateRow(index,row){//修改产品数据显示
          this.showFlag=!this.showFlag
          this.updateShowFlag=true;
          let rowObj=row[index]
          this.ruleForm.glassNum=rowObj["5_smallglass_no"]
          this.ruleForm.produceid=rowObj["12_id"]
          this.updateOrder.id=rowObj["0_id"]
          
        },
        updateGlassSub(formName){//订单修改提交
          this.$refs[formName].validate((valid) => {
            if (!valid) { 
              return false;
            }
            let updateGlassObj=this.ruleForm
            updateGlassObj.id=this.updateOrder.id
            let sql="{call AXJ_a_order_update(?,?,?,?,?)}~"+JSON.stringify(updateGlassObj);
            this.connects("产品修改",sql,1,1);
          });
          
        },
        updateOrderState(index,row){//审核订单
          let updateState={}
          updateState.id=row[index]['0_id']
          updateState.state=row[index]['11_order_status']*1===0?1:0
          let sql="{call AXJ_a_order_updateState(?,?,?)}~"+JSON.stringify(updateState);
                this.connects("订单状态审核修改",sql,1,1);
        },
        selectSub:function(){
          let arrObj={}
          let  arrFlag=0
          for(let i in this.slectOrder){
            if(this.slectOrder[i]!=''){
              arrFlag=1
            }
            arrObj[i]=this.slectOrder[i]==''?"n*":this.slectOrder[i]
          }
          if(this.selectdate!=null){
            arrObj.starttime=this.selectdate[0]
            arrObj.endtime=this.selectdate[1]
          }else{
            arrObj.starttime=''
            arrObj.endtime=''
          }

          let sql="{call AXJ_a_order_select(?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj)
          if(arrFlag==0){
            sql="{call AXJ_a_order_select_into()}"
          }
          this.loading=true
          this.loadAjxss('订单查询',sql,2,"orderData")
        },
        selectTimeOrder:function(){
          let arrObj={}
          for(let i in this.slectOrder){
            arrObj[i]='n*'
          }
          let sql=''
          if(this.selectdate!=null){
            arrObj.starttime=this.selectdate[0]
            arrObj.endtime=this.selectdate[1]
            sql="{call AXJ_a_order_select(?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj)
          }else{
            arrObj.starttime=''
            arrObj.endtime=''
            sql="{call AXJ_a_order_select_into()}"
          }
          this.loading=true
          this.loadAjxss('订单查询',sql,2,"orderData")
          //loadAjxs('产品查询',sql,2,"orderData")

        },
        open(index,row) {//打开刺破界面
          this.wornGlassFLAG= true
          this.wornGlass.glassID=row[index]['0_id']
          //wornGlass.wornNum:'',
          //wornGlass.reason:''
        },
        wornSub(formName){//刺破提交
          
          this.$refs[formName].validate((valid) => {
            if (!valid) { 
              return false;
            }
            this.wornGlassFLAG = false
            let sql="{call AXJ_a_order_glassWorn(?,?,?,?)}~"+JSON.stringify(this.wornGlass);
                  this.connects("订单小片破损",sql,1,1);
          });
        }
        
      },
      computed:{
        
      },
      mounted() {//页面还未加载时运行
        let sql="{call AXJ_a_order_select_into()}"
        let flag=2;
        this.loadAjxss('订单初始查询',sql,flag,"orderData")
        
        /* loadAjxs('订单初始查询',sql,flag,"orderData") */
        
        sql="{call AXJ_a_orderHeader_select()}"
        loadAjxs('订单表头',sql,flag,"tableHead")

        sql="{call AXJ_a_order_produce_select()}"
        loadAjxs('订单产品查询',sql,flag,"orderProduce")
        
        
        
        //带参数的
       /*  let arrObj={
            a:1,
            b:2
        } */
        
        // sql="{call AXJ_a_order_select(?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj)
      },

    })
  </script>
</html>

 gmms/WebContent/dapingxianshi/siyinxian1.jsp

New file
@@ -0,0 +1,322 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="builder.Manager"%>
<%@page import="ng.db.*"%>
<!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">

<link rel="stylesheet" href="../js/static/css/element.css">
<link rel="stylesheet" href="../js/static/css/style.css">
<script src="../js/static/js/vue.js"></script>
<script src="../js/mixins.js"></script>
<script src="../js/echarts.min.js"></script>
<!-- import JavaScript -->
<script src="../js/static/js/element.js"></script>
<script src="../js/static/js/echarts.min.js"></script>
<title>丝印线</title>
</head>
<style>
body{
height: 100%;
width:100%;
flex-wrap: nowrap;
}
  .page-scroll {
      height: 100%;
    }
  
    .page-scroll .el-scrollbar__wrap {
      overflow-x: hidden;
    }

.el-table__header
{
height:20%;

} 
#app{
width:100%;
height:100%;
}
#app1{
width:60%;  
position:absolute;
left:2%;
top:3%;  
}
#youtu{
height:50%;
width:30%;
background-color: aliceblue;
position:absolute;
right: 2%;
top:2%;
text-align: center;
line-height: 250px;
}
#time{
height:50%;
width:30%;
position:absolute;
top:50%;
}
#har{
width:100%;
position:absolute;
height:2%;
top:53%;  
background-color: darkgrey;
}   
#app2{
width:60%;
position:absolute;
left:2%;
top:62%;
}
#chart-wrap {
  width:30%;
  height:40%;
  position:absolute;
  right:2%; 
  top:55%;  
}
#time{
  width:50%;
  height:5%;
  position:absolute;
  left:2%; 
  top:35%;  
}
#time2{
  width:50%;
  height:10%;  
  position:absolute;
  left:2%;         
  top:42%;     
}
</style>  
<body>   
<div id='app' style=''>
<div id='app1'>
<el-table border 
      :data="orderData"  
      height='200'
      width='200'
      style="width: 100%;"
       :cell-class-name="tableRowClassName"
      >
      <el-table-column
        prop="name"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="ip"  
        label="已加工数量">
      </el-table-column>
      <el-table-column
        prop="port"
        label="待加工数量">
      </el-table-column>
      <el-table-column
        prop="st"
        label="直通率">
      </el-table-column>
      <el-table-column
        prop="count"
        label="NG数量">
      </el-table-column>
       <el-table-column
        prop="energy"
        label="能耗">
      </el-table-column>
     </el-table>
  </div>
<div id='time'>
 <el-header style="margin-top: 3%;height: 3%;">
      <el-date-picker    style="float: left;margin-bottom: 0.3%;"
          v-model="selectdate1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
          </el-date-picker>
           <el-button @click="selectTimeOrder"  type="primary" icon="el-icon-search"
            style="float: left;margin-left: 0.8%;margin-bottom: 0.3%;"
            >搜索
          </el-button>
 </el-header>  
</div>
<div id='time2'>
 <el-header style="margin-top: 3%;height: 3%;">
      <el-date-picker   style="float: left;margin-bottom: 0.3%;"
          v-model="selectdate2"
          type="daterange"
          range-separator="至"
          start-placeholder="更换日期"
          end-placeholder="建议日期">
          </el-date-picker>
           <el-button @click="selectTimeOrder" type="primary" icon="el-icon-search"
            style="float: left;margin-left: 0.8%;margin-bottom: 0.3%;"
            >更新
          </el-button>   
 </el-header>  
</div>   
<div id='youtu'>
<img alt="" src="">
<p>丝印图</p>
</div>
<div id='har'></div>
<div id='app2' style=''>
<el-table border
      :data="orderData2"
      height='200'
      width='200'
      style="width: 100%;"
       :cell-class-name="tableRowClassName"
      >
      <el-table-column
        prop="name2"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="ip2"  
        label="已加工数量">
      </el-table-column>
      <el-table-column
        prop="port2"
        label="破损数量">
      </el-table-column>
      <el-table-column
        prop="st2"
        label="能耗数">
      </el-table-column>
      <el-table-column
        prop="count2"
        label="直通率">
      </el-table-column>
     
     </el-table> 
     </div>
</div>
<div id="chart-wrap">
</div>
</body>
<script type="text/javascript">

 
Vue.prototype.$echarts = echarts
let app =new Vue({
  el: '#app',
  mixins:[mixin],
  data:{
      orderData:[{
        'name':'NG20230726',
        'ip':21,
        'port':19,
        'st':"98%",
        'count':2, 
        'energy':280
        }],
        orderData2:[{
            'name2':'NG20230726',
            'ip2':21,
            'port2':19,
            'st2':"280",
            'count2':"98%"
        	
            }],
  },
  methods:{
      tableRowClassName({row,column,rowIndex,columnIndex}) {
		  
            if (row['st'] == '未连接' && columnIndex==3 ) {
              return 'success-row';
            }else{
              return '';    
            }  
	        
      }
  }, mounted(){
  }
 })
      
    
    //柱状图
   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: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
          axisLine: { lineStyle: { color: 'rgb(30, 144, 255)' } },
          axisLabel: { color: 'rgb(30, 144, 255)' },
          splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
        }
      ],  
      yAxis: [
        {
          type: "value",
          name: "能耗",
          nameTextStyle: {
            color: "rgb(30, 144, 255)",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: false,
            lineStyle: { //分割线
              color: "rgb(180, 180, 180)",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "rgb(30, 144, 255)",
            fontSize: 12,
          },  
        },

      ],
      series: [
        {
          name: '能耗',
          type: 'bar',
          barWidth: '80%',
          data: [220, 152, 200, 334, 390, 330, 220],
          itemStyle: { color: 'rgb(180, 180, 180)' }
        },

      ]  
    };
        
    option && myChart.setOption(option);
  }
    window.onload = function () {  
        zhutu();
    	
    }
    </script>
  

</html>

 gmms/WebContent/dapingxianshi/tiemotaizu.jsp

File was deleted

 gmms/WebContent/dapingxianshi/xiacijiance1.jsp

New file
@@ -0,0 +1,307 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="builder.Manager"%>
<%@page import="ng.db.*"%>
<!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">

<link rel="stylesheet" href="../js/static/css/element.css">
<link rel="stylesheet" href="../js/static/css/style.css">
<script src="../js/static/js/vue.js"></script>
<script src="../js/mixins.js"></script>
<script src="../js/echarts.min.js"></script>
<!-- import JavaScript -->
<script src="../js/static/js/element.js"></script>
<script src="../js/static/js/echarts.min.js"></script>
<title>瑕疵线</title>
</head>
<style>
body{
height: 100%;
width:100%;
flex-wrap: nowrap;
}
  .page-scroll {
      height: 100%;
    }
  
    .page-scroll .el-scrollbar__wrap {
      overflow-x: hidden;
    }

.el-table__header
{
height:20%;

} 
#app{
width:100%;
height:100%;
}
#app1{
width:60%;  
position:absolute;
left:2%;
top:3%;  
}
#youtu{
height:50%;
width:30%;
background-color: aliceblue;
position:absolute;
right: 2%;
top:2%;
text-align: center;
line-height: 250px;
}
#time{
height:50%;
width:30%;
position:absolute;
top:50%;
}
#har{
width:100%;
position:absolute;
height:2%;
top:53%;  
background-color: darkgrey;
}   
#app2{
width:60%;
position:absolute;
left:2%;
top:62%;
}
#chart-wrap {
  width:30%;
  height:40%;
  position:absolute;
  right:2%; 
  top:55%;  
}
#time{
  width:50%;
  height:5%;
  position:absolute;
  left:2%; 
  top:35%;  
}
#time2{
  width:50%;
  height:10%;  
  position:absolute;
  left:2%;   
  top:40%;     
}
</style>
<body>   
<div id='app' style=''>
<div id='app1'>
<el-table border 
      :data="orderData"
      height='200'
      width='200'
      style="width: 100%;"
      >     
      <el-table-column
        prop="name"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="ip"  
        label="已加工数量">
      </el-table-column>
      <el-table-column
        prop="port"
        label="待加工数量">
      </el-table-column>
      <el-table-column
        prop="st"
        label="直通率">
      </el-table-column>
      <el-table-column
        prop="count"
        label="NG数量">
      </el-table-column>
       <el-table-column
        prop="energy"
        label="能耗">
      </el-table-column>
     </el-table>
  </div>
 <div id='time'>
 <el-header style="margin-top: 3%;height: 3%;">
      <el-date-picker   style="float: left;margin-bottom: 0.3%;"
          v-model="selectdate2"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
          </el-date-picker>
           <el-button @click="selectTimeOrder"  type="primary" icon="el-icon-search"
            style="float: left;margin-left: 0.8%;margin-bottom: 0.3%;"
            >搜索
          </el-button>
 </el-header>  
</div> 

<div id='youtu'>
<img alt="" src="">
<p>产品图</p>
</div>
<div id='har'></div>
<div id='app2' style=''>
<el-table border
      :data="orderData2"
      height='200'
      width='200'
      style="width: 100%;"
      >
      <el-table-column
        prop="name2"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="ip2"  
        label="已加工数量">
      </el-table-column>
      <el-table-column
        prop="port2"
        label="破损数量">
      </el-table-column>
      <el-table-column
        prop="st2"
        label="能耗数">
      </el-table-column>
      <el-table-column
        prop="count2"
        label="直通率">
      </el-table-column>
     
     </el-table> 
     </div>
</div>
<div id="chart-wrap">
</div>
</body>
<script type="text/javascript">

 
   
    Vue.prototype.$echarts = echarts
    let app =new Vue({
      el: '#app',
      mixins:[mixin],
      data:{
          orderData:[{
            'name':'NG20230726',
            'ip':21,
            'port':19,
            'st':"98%",
            'count':2, 
            'energy':280
            }],
            orderData2:[{
                'name2':'NG20230726',
                'ip2':21,
                'port2':19,
                'st2':"280",
                'count2':"98%"
            	
                }],
      },
      methods:{
          tableRowClassName({row,column,rowIndex,columnIndex}) {
    		  
               if (row['st'] == '未连接' && columnIndex==3 ) {
                 return 'success-row';
               }else{
                 return '';    
               }  
   	        
          }
      }, mounted(){
      }
     })
      
    
    //柱状图
   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: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
          axisLine: { lineStyle: { color: 'rgb(30, 144, 255)' } },
          axisLabel: { color: 'rgb(30, 144, 255)' },
          splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
        }
      ],  
      yAxis: [
        {
          type: "value",
          name: "能耗",
          nameTextStyle: {
            color: "rgb(30, 144, 255)",
            fontSize: 12,
            padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: false,
            lineStyle: { //分割线
              color: "rgb(180, 180, 180)",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
            }
          },
          axisLabel: {
            // 轴文字
            color: "rgb(30, 144, 255)",
            fontSize: 12,
          },  
        },

      ],
      series: [
        {
          name: '能耗',
          type: 'bar',
          barWidth: '80%',
          data: [220, 152, 200, 334, 390, 330, 220],
          itemStyle: { color: 'rgb(180, 180, 180)' }
        },

      ]  
    };
        
    option && myChart.setOption(option);
  }
    window.onload = function () {  
        zhutu();
    	
    }
    </script>
  

</html>

 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/login/machinelistcontent.jsp

@@ -75,9 +75,11 @@
               }
               
          }
      }, mounted(){
    	  
      }
     })
    //console.log(app.$data.machine);
    console.log(app.$data.machine);
    </script>
</body>
</html>

 gmms/WebContent/mysqlInsert/toPlc.jsp

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

<<<<<<< HEAD

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

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

%>

 gmms/WebContent/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>

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

New file
			@@ -0,0 +1,393 @@
			<%@ page contentType="text/html;charset=UTF-8"%>
			<!DOCTYPE html>
			<html>
			<head>
			<meta charset="UTF-8">
			<!-- import CSS -->
			<link rel="stylesheet" href="../js/static/css/element.css">
			<link rel="stylesheet" href="../js/static/css/style.css">
			<style >
			.page-scroll {
			height: 100%;
			}

			.page-scroll .el-scrollbar__wrap {
			overflow-x: hidden;
			}
			img{
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
			}
			</style>
			</head>
			<body>
			<div id="app" >
			<el-container v-loading="loading" >
			<el-header style="margin-top: 3%;height: 3%;">
			<el-button @click="showFlagFuc" type="primary" round style="float:right;">{{showFlag==false?'返回订单':'新增订单'}}</el-button>
			<el-date-picker v-show="showFlag" style="float: left;margin-bottom: 0.3%;"
			v-model="selectdate"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
			</el-date-picker>

			<el-button @click="selectTimeOrder" v-show="showFlag" type="primary" icon="el-icon-search"
			style="float: left;margin-left: 0.2%;margin-bottom: 0.3%;"
			>搜索
			</el-button>

			</el-header>
			<el-main >
			<el-table v-show="showFlag"
			:data="orderData"
			max-height="600"
			style="width: 100%;">


			<el-table-column
			v-for="(item,keys,index) in tableHead[0]"
			:key="index"
			:label="item"
			>
			<el-table-column :prop="keys" v-if="index==0" width=130>
			<template slot-scope="scope" v-if="Object.keys(orderData[0]).length!=0">

			<el-button v-if="orderData[scope.$index]['11_order_status']<2"
			@click.native.prevent="updateOrderState(scope.$index, orderData)"
			type="text"
			size="small"
			v-preventReClick
			>
			{{orderData[scope.$index]['11_order_status']==0?'审核':'反审'}}
			</el-button>

			<el-button v-if="orderData[scope.$index]['11_order_status']*1===0"
			@click.native.prevent="updateRow(scope.$index, orderData)"
			type="text"
			size="small">
			修改
			</el-button>
			<el-button
			v-if="orderData[scope.$index]['11_order_status']>1"
			@click.native.prevent="open(scope.$index, orderData)"
			type="text"
			size="small">
			次破
			</el-button>


			</template>
			</el-table-column>

			<el-table-column :prop="keys" v-if="index>0">
			<template slot="header" slot-scope="scope" >
			<el-input v-model="slectOrder[index-1]" @keyup.enter.native="selectSub" type="text" size="mini" />
			</template>

			</el-table-column>

			</el-table-column>
			</el-table>
			<!-- 新增修改 -->

			<el-form v-show="!showFlag" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 25%;margin: auto;">
			<el-form-item>
			<el-button v-show="updateShowFlag" type="primary" @click="updateGlassSub('ruleForm')" v-preventReClick >修改</el-button>
			<el-button v-show="!updateShowFlag" type="primary" @click="submitForm('ruleForm')" v-preventReClick >提交</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>


			<el-form-item label="小片数量" prop="glassNum">
			<el-input v-model="ruleForm.glassNum" autocomplete="off" ></el-input>
			</el-form-item>

			<el-form-item label="配方号" prop="produceid">
			<template>
			<el-select v-model="ruleForm.produceid" placeholder="请选择" clearable filterable>
			<el-option
			v-for="item in orderProduce"
			:key="item['0_id']"
			:label="item['1_val']"
			:value="item['0_id']">
			</el-option>
			</el-select>
			</template>
			</el-form-item>



			</el-form>
			<el-dialog
			title="刺破"
			:visible.sync="wornGlassFLAG"
			width="30%"
			center>
			<span style="text-align: center;">
			<el-form :model="wornGlass" ref="wornGlass" :rules="rules">
			<el-form-item label="次破数量:" prop="wornNum">
			<el-input for="a" style="width: 50%;" v-model.number="wornGlass.wornNum" autocomplete="off" ></el-input>
			</el-form-item>
			<el-form-item label="次破原因:" >
			<el-input for="b" style="width: 50%;" v-model.number="wornGlass.reason" autocomplete="off" ></el-input>
			</el-form-item>

			<el-form-item>
			<el-button @click="resetForm('wornGlass');wornGlassFLAG = false">取消</el-button>
			<el-button v-show="!updateShowFlag" type="primary" @click="wornSub('wornGlass')" v-preventReClick>提交</el-button>
			</el-form-item>
			</el-form>

			</span>
			<!-- <span slot="footer" class="dialog-footer">

			<el-button type="primary" @click="wornSub">确定</el-button>
			</span> -->
			</el-dialog>
			</el-main>
			<!-- <el-footer style="background-color: azure;"></el-footer> -->
			</el-container>
			</div>
			</body>
			<script src="../js/jquery-3.4.1.min.js"></script>

			<script src="../js/static/js/vue.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/mixins.js"></script>
			<!-- import JavaScript -->
			<script src="../js/static/js/element.js"></script>
			<script src="../js/static/js/echarts.min.js"></script>
			<script >
			//import * as echarts from '../js/echarts.min.js';
			Vue.prototype.$echarts = echarts
			Vue.prototype.$http= axios
			let app =new Vue({
			el: '#app',
			mixins:[mixin],
			data(){
			var checkNum = (rule, value, callback) => {
			if (!value) {
			return callback(new Error('不能为空'));
			}
			setTimeout(() => {
			let reg = new RegExp(`^[0-9]{1,4}(\.[0-9]{0,2})?$`)

			if (!reg.test(value)) {
			callback(new Error('请输入0.01-9999.99的数字'));
			}else {
			callback();
			}

			}, 1000);
			};
			var checkString = (rule, value, callback) => {
			if (!value) {
			return callback(new Error('不能为空'));
			}
			setTimeout(() => {
			if (value.length>255) {
			callback(new Error('最大长度255'));
			}else {
			callback();
			}
			}, 1000);
			};
			var checkInt = (rule, value, callback) => {
			if (!value) {
			return callback(new Error('不能为空或者0'));
			}
			setTimeout(() => {
			let reg = new RegExp(`^[0-9][1-9][0-9]$`)

			if (!reg.test(value)) {
			callback(new Error('请输入正整数'));
			}else {
			callback();
			}

			}, 1000);
			};
			return {
			loading:true,//页面加载flag
			ruleForm: {
			produceid:"",
			glassNum:"",
			creator:'<%= request.getParameter("xingming") %>'
			},
			rules: {
			produceid: [
			{ validator: checkInt, trigger: 'blur' }
			],
			glassNum: [
			{ validator: checkInt, trigger: 'blur' }
			],
			wornNum: [
			{ validator: checkInt, trigger: 'blur' }
			],

			},
			tableHead:[],
			orderData:[],
			showFlag:true,
			updateShowFlag:false,
			updateOrder:{
			id:''
			},
			orderProduce:[],
			fileList:[],
			slectOrder:["","","","","","","","","",""],//筛选参数
			selectdate:["",""],//日期参数
			wornGlassFLAG: false,//次破界面显示标记
			wornGlass:{//破损提交参数
			glassID:'',
			wornNum:'',
			reason:''
			}


			};

			},
			methods: {
			submitForm(formName) {//新增订单
			this.$refs[formName].validate((valid) => {
			if (!valid) {
			return false;
			}
			let sql="{call AXJ_a_order_add(?,?,?,?)}~"+JSON.stringify(this.ruleForm);
			this.connects("订单新增",sql,1,1);
			});
			},
			resetForm(formName) {//清除新增重置
			this.$refs[formName].resetFields();
			},
			showFlagFuc(){//显示订单新增界面
			Object.keys(this.ruleForm).forEach((key) => (this.ruleForm[key] = ''));
			this.showFlag=!this.showFlag
			this.updateShowFlag=false;
			},
			updateRow(index,row){//修改产品数据显示
			this.showFlag=!this.showFlag
			this.updateShowFlag=true;
			let rowObj=row[index]
			this.ruleForm.glassNum=rowObj["5_smallglass_no"]
			this.ruleForm.produceid=rowObj["12_id"]
			this.updateOrder.id=rowObj["0_id"]

			},
			updateGlassSub(formName){//订单修改提交
			this.$refs[formName].validate((valid) => {
			if (!valid) {
			return false;
			}
			let updateGlassObj=this.ruleForm
			updateGlassObj.id=this.updateOrder.id
			let sql="{call AXJ_a_order_update(?,?,?,?,?)}~"+JSON.stringify(updateGlassObj);
			this.connects("产品修改",sql,1,1);
			});

			},
			updateOrderState(index,row){//审核订单
			let updateState={}
			updateState.id=row[index]['0_id']
			updateState.state=row[index]['11_order_status']*1===0?1:0
			let sql="{call AXJ_a_order_updateState(?,?,?)}~"+JSON.stringify(updateState);
			this.connects("订单状态审核修改",sql,1,1);
			},
			selectSub:function(){
			let arrObj={}
			let arrFlag=0
			for(let i in this.slectOrder){
			if(this.slectOrder[i]!=''){
			arrFlag=1
			}
			arrObj[i]=this.slectOrder[i]==''?"n*":this.slectOrder[i]
			}
			if(this.selectdate!=null){
			arrObj.starttime=this.selectdate[0]
			arrObj.endtime=this.selectdate[1]
			}else{
			arrObj.starttime=''
			arrObj.endtime=''
			}

			let sql="{call AXJ_a_order_select(?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj)
			if(arrFlag==0){
			sql="{call AXJ_a_order_select_into()}"
			}
			this.loading=true
			this.loadAjxss('订单查询',sql,2,"orderData")
			},
			selectTimeOrder:function(){
			let arrObj={}
			for(let i in this.slectOrder){
			arrObj[i]='n*'
			}
			let sql=''
			if(this.selectdate!=null){
			arrObj.starttime=this.selectdate[0]
			arrObj.endtime=this.selectdate[1]
			sql="{call AXJ_a_order_select(?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj)
			}else{
			arrObj.starttime=''
			arrObj.endtime=''
			sql="{call AXJ_a_order_select_into()}"
			}
			this.loading=true
			this.loadAjxss('订单查询',sql,2,"orderData")
			//loadAjxs('产品查询',sql,2,"orderData")

			},
			open(index,row) {//打开刺破界面
			this.wornGlassFLAG= true
			this.wornGlass.glassID=row[index]['0_id']
			//wornGlass.wornNum:'',
			//wornGlass.reason:''
			},
			wornSub(formName){//刺破提交

			this.$refs[formName].validate((valid) => {
			if (!valid) {
			return false;
			}
			this.wornGlassFLAG = false
			let sql="{call AXJ_a_order_glassWorn(?,?,?,?)}~"+JSON.stringify(this.wornGlass);
			this.connects("订单小片破损",sql,1,1);
			});
			}

			},
			computed:{

			},
			mounted() {//页面还未加载时运行
			let sql="{call AXJ_a_order_select_into()}"
			let flag=2;
			this.loadAjxss('订单初始查询',sql,flag,"orderData")

			/* loadAjxs('订单初始查询',sql,flag,"orderData") */

			sql="{call AXJ_a_orderHeader_select()}"
			loadAjxs('订单表头',sql,flag,"tableHead")

			sql="{call AXJ_a_order_produce_select()}"
			loadAjxs('订单产品查询',sql,flag,"orderProduce")



			//带参数的
			/* let arrObj={
			a:1,
			b:2
			} */

			// sql="{call AXJ_a_order_select(?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj)
			},

			})
			</script>
			</html>

New file
			@@ -0,0 +1,322 @@
			<%@ page language="java" contentType="text/html; charset=UTF-8"
			pageEncoding="UTF-8"%>
			<%@page import="builder.Manager"%>
			<%@page import="ng.db.*"%>
			<!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">

			<link rel="stylesheet" href="../js/static/css/element.css">
			<link rel="stylesheet" href="../js/static/css/style.css">
			<script src="../js/static/js/vue.js"></script>
			<script src="../js/mixins.js"></script>
			<script src="../js/echarts.min.js"></script>
			<!-- import JavaScript -->
			<script src="../js/static/js/element.js"></script>
			<script src="../js/static/js/echarts.min.js"></script>
			<title>丝印线</title>
			</head>
			<style>
			body{
			height: 100%;
			width:100%;
			flex-wrap: nowrap;
			}
			.page-scroll {
			height: 100%;
			}

			.page-scroll .el-scrollbar__wrap {
			overflow-x: hidden;
			}

			.el-table__header
			{
			height:20%;

			}
			#app{
			width:100%;
			height:100%;
			}
			#app1{
			width:60%;
			position:absolute;
			left:2%;
			top:3%;
			}
			#youtu{
			height:50%;
			width:30%;
			background-color: aliceblue;
			position:absolute;
			right: 2%;
			top:2%;
			text-align: center;
			line-height: 250px;
			}
			#time{
			height:50%;
			width:30%;
			position:absolute;
			top:50%;
			}
			#har{
			width:100%;
			position:absolute;
			height:2%;
			top:53%;
			background-color: darkgrey;
			}
			#app2{
			width:60%;
			position:absolute;
			left:2%;
			top:62%;
			}
			#chart-wrap {
			width:30%;
			height:40%;
			position:absolute;
			right:2%;
			top:55%;
			}
			#time{
			width:50%;
			height:5%;
			position:absolute;
			left:2%;
			top:35%;
			}
			#time2{
			width:50%;
			height:10%;
			position:absolute;
			left:2%;
			top:42%;
			}
			</style>
			<body>
			<div id='app' style=''>
			<div id='app1'>
			<el-table border
			:data="orderData"
			height='200'
			width='200'
			style="width: 100%;"
			:cell-class-name="tableRowClassName"
			>
			<el-table-column
			prop="name"
			label="订单号">
			</el-table-column>
			<el-table-column
			prop="ip"
			label="已加工数量">
			</el-table-column>
			<el-table-column
			prop="port"
			label="待加工数量">
			</el-table-column>
			<el-table-column
			prop="st"
			label="直通率">
			</el-table-column>
			<el-table-column
			prop="count"
			label="NG数量">
			</el-table-column>
			<el-table-column
			prop="energy"
			label="能耗">
			</el-table-column>
			</el-table>
			</div>
			<div id='time'>
			<el-header style="margin-top: 3%;height: 3%;">
			<el-date-picker style="float: left;margin-bottom: 0.3%;"
			v-model="selectdate1"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
			</el-date-picker>
			<el-button @click="selectTimeOrder" type="primary" icon="el-icon-search"
			style="float: left;margin-left: 0.8%;margin-bottom: 0.3%;"
			>搜索
			</el-button>
			</el-header>
			</div>
			<div id='time2'>
			<el-header style="margin-top: 3%;height: 3%;">
			<el-date-picker style="float: left;margin-bottom: 0.3%;"
			v-model="selectdate2"
			type="daterange"
			range-separator="至"
			start-placeholder="更换日期"
			end-placeholder="建议日期">
			</el-date-picker>
			<el-button @click="selectTimeOrder" type="primary" icon="el-icon-search"
			style="float: left;margin-left: 0.8%;margin-bottom: 0.3%;"
			>更新
			</el-button>
			</el-header>
			</div>
			<div id='youtu'>
			<img alt="" src="">
			<p>丝印图</p>
			</div>
			<div id='har'></div>
			<div id='app2' style=''>
			<el-table border
			:data="orderData2"
			height='200'
			width='200'
			style="width: 100%;"
			:cell-class-name="tableRowClassName"
			>
			<el-table-column
			prop="name2"
			label="订单号">
			</el-table-column>
			<el-table-column
			prop="ip2"
			label="已加工数量">
			</el-table-column>
			<el-table-column
			prop="port2"
			label="破损数量">
			</el-table-column>
			<el-table-column
			prop="st2"
			label="能耗数">
			</el-table-column>
			<el-table-column
			prop="count2"
			label="直通率">
			</el-table-column>

			</el-table>
			</div>
			</div>
			<div id="chart-wrap">
			</div>
			</body>
			<script type="text/javascript">


			Vue.prototype.$echarts = echarts
			let app =new Vue({
			el: '#app',
			mixins:[mixin],
			data:{
			orderData:[{
			'name':'NG20230726',
			'ip':21,
			'port':19,
			'st':"98%",
			'count':2,
			'energy':280
			}],
			orderData2:[{
			'name2':'NG20230726',
			'ip2':21,
			'port2':19,
			'st2':"280",
			'count2':"98%"

			}],
			},
			methods:{
			tableRowClassName({row,column,rowIndex,columnIndex}) {

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

			}
			}, mounted(){
			}
			})


			//柱状图
			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: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
			axisLine: { lineStyle: { color: 'rgb(30, 144, 255)' } },
			axisLabel: { color: 'rgb(30, 144, 255)' },
			splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "能耗",
			nameTextStyle: {
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: false,
			lineStyle: { //分割线
			color: "rgb(180, 180, 180)",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '能耗',
			type: 'bar',
			barWidth: '80%',
			data: [220, 152, 200, 334, 390, 330, 220],
			itemStyle: { color: 'rgb(180, 180, 180)' }
			},

			]
			};

			option && myChart.setOption(option);
			}
			window.onload = function () {
			zhutu();

			}
			</script>


			</html>

New file
			@@ -0,0 +1,307 @@
			<%@ page language="java" contentType="text/html; charset=UTF-8"
			pageEncoding="UTF-8"%>
			<%@page import="builder.Manager"%>
			<%@page import="ng.db.*"%>
			<!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">

			<link rel="stylesheet" href="../js/static/css/element.css">
			<link rel="stylesheet" href="../js/static/css/style.css">
			<script src="../js/static/js/vue.js"></script>
			<script src="../js/mixins.js"></script>
			<script src="../js/echarts.min.js"></script>
			<!-- import JavaScript -->
			<script src="../js/static/js/element.js"></script>
			<script src="../js/static/js/echarts.min.js"></script>
			<title>瑕疵线</title>
			</head>
			<style>
			body{
			height: 100%;
			width:100%;
			flex-wrap: nowrap;
			}
			.page-scroll {
			height: 100%;
			}

			.page-scroll .el-scrollbar__wrap {
			overflow-x: hidden;
			}

			.el-table__header
			{
			height:20%;

			}
			#app{
			width:100%;
			height:100%;
			}
			#app1{
			width:60%;
			position:absolute;
			left:2%;
			top:3%;
			}
			#youtu{
			height:50%;
			width:30%;
			background-color: aliceblue;
			position:absolute;
			right: 2%;
			top:2%;
			text-align: center;
			line-height: 250px;
			}
			#time{
			height:50%;
			width:30%;
			position:absolute;
			top:50%;
			}
			#har{
			width:100%;
			position:absolute;
			height:2%;
			top:53%;
			background-color: darkgrey;
			}
			#app2{
			width:60%;
			position:absolute;
			left:2%;
			top:62%;
			}
			#chart-wrap {
			width:30%;
			height:40%;
			position:absolute;
			right:2%;
			top:55%;
			}
			#time{
			width:50%;
			height:5%;
			position:absolute;
			left:2%;
			top:35%;
			}
			#time2{
			width:50%;
			height:10%;
			position:absolute;
			left:2%;
			top:40%;
			}
			</style>
			<body>
			<div id='app' style=''>
			<div id='app1'>
			<el-table border
			:data="orderData"
			height='200'
			width='200'
			style="width: 100%;"
			>
			<el-table-column
			prop="name"
			label="订单号">
			</el-table-column>
			<el-table-column
			prop="ip"
			label="已加工数量">
			</el-table-column>
			<el-table-column
			prop="port"
			label="待加工数量">
			</el-table-column>
			<el-table-column
			prop="st"
			label="直通率">
			</el-table-column>
			<el-table-column
			prop="count"
			label="NG数量">
			</el-table-column>
			<el-table-column
			prop="energy"
			label="能耗">
			</el-table-column>
			</el-table>
			</div>
			<div id='time'>
			<el-header style="margin-top: 3%;height: 3%;">
			<el-date-picker style="float: left;margin-bottom: 0.3%;"
			v-model="selectdate2"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
			</el-date-picker>
			<el-button @click="selectTimeOrder" type="primary" icon="el-icon-search"
			style="float: left;margin-left: 0.8%;margin-bottom: 0.3%;"
			>搜索
			</el-button>
			</el-header>
			</div>

			<div id='youtu'>
			<img alt="" src="">
			<p>产品图</p>
			</div>
			<div id='har'></div>
			<div id='app2' style=''>
			<el-table border
			:data="orderData2"
			height='200'
			width='200'
			style="width: 100%;"
			>
			<el-table-column
			prop="name2"
			label="日期">
			</el-table-column>
			<el-table-column
			prop="ip2"
			label="已加工数量">
			</el-table-column>
			<el-table-column
			prop="port2"
			label="破损数量">
			</el-table-column>
			<el-table-column
			prop="st2"
			label="能耗数">
			</el-table-column>
			<el-table-column
			prop="count2"
			label="直通率">
			</el-table-column>

			</el-table>
			</div>
			</div>
			<div id="chart-wrap">
			</div>
			</body>
			<script type="text/javascript">



			Vue.prototype.$echarts = echarts
			let app =new Vue({
			el: '#app',
			mixins:[mixin],
			data:{
			orderData:[{
			'name':'NG20230726',
			'ip':21,
			'port':19,
			'st':"98%",
			'count':2,
			'energy':280
			}],
			orderData2:[{
			'name2':'NG20230726',
			'ip2':21,
			'port2':19,
			'st2':"280",
			'count2':"98%"

			}],
			},
			methods:{
			tableRowClassName({row,column,rowIndex,columnIndex}) {

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

			}
			}, mounted(){
			}
			})


			//柱状图
			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: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
			axisLine: { lineStyle: { color: 'rgb(30, 144, 255)' } },
			axisLabel: { color: 'rgb(30, 144, 255)' },
			splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "能耗",
			nameTextStyle: {
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: false,
			lineStyle: { //分割线
			color: "rgb(180, 180, 180)",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			},
			},

			],
			series: [
			{
			name: '能耗',
			type: 'bar',
			barWidth: '80%',
			data: [220, 152, 200, 334, 390, 330, 220],
			itemStyle: { color: 'rgb(180, 180, 180)' }
			},

			]
			};

			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>

			@@ -75,9 +75,11 @@
			}

			}
			}, mounted(){

			}
			})
			//console.log(app.$data.machine);
			console.log(app.$data.machine);
			</script>
			</body>
			</html>

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

			<<<<<<< HEAD

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

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

			%>

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>