Haier_MES.git - Gitblit

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

2023-07-26 faf439a3f7859e1582e3d61464ee7d86e1c85427

大屏瑕疵线和丝印线

2个文件已添加

	gmms/WebContent/dapingxianshi/siyinxian1.jsp	308 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/dapingxianshi/xiacijiance1.jsp	294 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 gmms/WebContent/dapingxianshi/siyinxian1.jsp

New file
@@ -0,0 +1,308 @@
<%@ 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="machine"
      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%;background-color:black">
      <el-date-picker  v-show="showFlag"  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"  v-show="showFlag" type="primary" icon="el-icon-search"
            style="float: left;margin-left: 0.2%;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"  v-show="showFlag" type="primary" icon="el-icon-search"
            style="float: left;margin-left: 0.2%;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="machine2"
      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:{
        machine:<%out.print(  Manager.getDevice().toString());%>,
      },
      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,294 @@
<%@ 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="machine"
      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="selectdate2"
          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>  
</div>

<div id='youtu'>
<img alt="" src="">
<p>产品图</p>
</div>
<div id='har'></div>
<div id='app2' style=''>
<el-table border
      :data="machine2"
      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:{
        machine:<%out.print(  Manager.getDevice().toString());%>,
      },
      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,308 @@
			<%@ 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="machine"
			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%;background-color:black">
			<el-date-picker v-show="showFlag" 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" v-show="showFlag" type="primary" icon="el-icon-search"
			style="float: left;margin-left: 0.2%;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" v-show="showFlag" type="primary" icon="el-icon-search"
			style="float: left;margin-left: 0.2%;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="machine2"
			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:{
			machine:<%out.print( Manager.getDevice().toString());%>,
			},
			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,294 @@
			<%@ 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="machine"
			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="selectdate2"
			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>
			</div>

			<div id='youtu'>
			<img alt="" src="">
			<p>产品图</p>
			</div>
			<div id='har'></div>
			<div id='app2' style=''>
			<el-table border
			:data="machine2"
			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:{
			machine:<%out.print( Manager.getDevice().toString());%>,
			},
			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>