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