Haier_MES.git - Gitblit

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

2023-07-26 2af132917ab76f12ee94008bd5de49664a88b43c

大屏显示瑕疵，丝印

3个文件已添加

	gmms/WebContent/dapingxianshi/siyinceshi.jsp	393 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/siyinxian1.jsp	322 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/xiacijiance1.jsp	307 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

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

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>