<%@page import="ng.db.DBHelper"%>
|
<%@ page contentType="text/html;charset=UTF-8"%>
|
<%-- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> --%>
|
<c:set var="ctx" value="${pageContext.request.contextPath}" />
|
<html>
|
<head>
|
<title>打孔大屏</title>
|
|
<!-- Font Awesome -->
|
<link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
|
<!-- Ionicons -->
|
<link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
|
<!-- Theme style -->
|
<link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">
|
<link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">
|
<link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
<style type="text/css">
|
@IMPORT url("../static/global/showtask/showtask.css");
|
</style>
|
|
<script>
|
var contextPath = "${pageContext.request.contextPath}";
|
</script>
|
|
<link type="text/css" rel="stylesheet"
|
href="../static/css/dataTables.bootstrap.css" />
|
<link type="text/css" rel="stylesheet"
|
href="../static/css/dataTables.tableTools.css" />
|
|
<script src="../js/jquery-3.4.1.min.js"></script>
|
<script src="../js/echarts.min.js"></script>
|
<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>
|
<!-- import JavaScript -->
|
|
<script src="../js/static/js/element.js"></script>
|
<script src="../js/static/js/echarts.min.js"></script>
|
<script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>
|
<script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>
|
<script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>
|
<script type="text/javascript" src="../static/js/moment.js"></script>
|
<script type="text/javascript" src="../static/js/sucaijiayuan.js"></script>
|
<script type="text/javascript" src="../static/laydate/laydate.js"></script>
|
<script type="text/javascript" src="../static/util/utilAlert.js"></script>
|
<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
<style>
|
*{
|
margin:0;
|
padding:0;
|
}
|
#top{
|
height:25%;
|
display:flex;
|
}
|
#center{
|
height:50%;
|
display:flex;
|
}
|
#bottom{
|
height:25%;
|
display:flex;
|
}
|
.top_div{
|
width:25%;
|
htight:100%;
|
}
|
.center_div{
|
width:28%;
|
htight:100%;
|
display:flex;
|
flex-wrap: wrap;
|
}
|
.center_divs{
|
width:46%;
|
htight:100%;
|
}
|
.center_div_details{
|
height:50%;
|
width:100%;
|
}
|
.bottom_div{
|
width:25%;
|
htight:100%;
|
}
|
</style>
|
|
</head>
|
<body>
|
<div id='app' style='background-color:#D5EAFF;width:100%;height: 100%;'>
|
<div id="top">
|
<div class="top_div">打孔机1产品图</div>
|
<div class="top_div" id="Histogram1">打孔机1电耗</div>
|
<div class="top_div" id="Histogram2">打孔机2电耗</div>
|
<div class="top_div">打孔机2产品图</div>
|
</div>
|
<div id="center">
|
<div class="center_div">
|
<div class="center_div_details" id="Histogram5">打孔机1用水</div>
|
<div class="center_div_details" id="Histogram6">打孔机3用水</div>
|
</div>
|
<div id="app" style="display:width:100%" class="center_divs">
|
<el-table border
|
:data="machine"
|
height='100%'
|
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="破损数量">
|
</el-table-column>
|
<el-table-column
|
prop="count"
|
label="更换周期">
|
</el-table-column>
|
<el-table-column
|
prop="count"
|
label="更换倒计时">
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="center_div">
|
<div class="center_div_details" id="Histogram7">打孔机2用水</div>
|
<div class="center_div_details" id="Histogram8">打孔机4用水</div>
|
</div>
|
</div>
|
<div id="bottom">
|
<div class="bottom_div">打孔机1产品图</div>
|
<div class="bottom_div" id="Histogram3">打孔机1电耗</div>
|
<div class="bottom_div" id="Histogram4">打孔机2电耗</div>
|
<div class="bottom_div">打孔机2产品图</div>
|
</div>
|
</div>
|
<script>
|
Vue.prototype.$echarts = echarts
|
let app =new Vue({
|
el: '#app',
|
mixins:[mixin],
|
data:{
|
machine:"",
|
},
|
methods:{
|
tableRowClassName({row,column,rowIndex,columnIndex}) {
|
|
if (row['st'] == '未连接' && columnIndex==3 ) {
|
return 'success-row';
|
}else{
|
return '';
|
}
|
|
}
|
}
|
})
|
window.onload=function(){
|
zhutu("Histogram1",[10, 52, 200, 334, 390, 330, 220],"电耗");
|
zhutu("Histogram2",[10, 52, 200, 334, 390, 330, 220],"电耗");
|
zhutu("Histogram3",[10, 52, 200, 334, 390, 330, 220],"电耗");
|
zhutu("Histogram4",[10, 52, 200, 334, 390, 330, 220],"电耗");
|
zhutu("Histogram5",[10, 52, 200, 334, 390, 330, 220],"水耗");
|
zhutu("Histogram6",[10, 52, 200, 334, 390, 330, 220],"水耗");
|
zhutu("Histogram7",[10, 52, 200, 334, 390, 330, 220],"水耗");
|
zhutu("Histogram8",[10, 52, 200, 334, 390, 330, 220],"水耗");
|
}
|
function zhutu (Cname,datas,Tname) {
|
|
var chartDom = document.getElementById(Cname);
|
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: 'rgb(30, 144, 255)' } },
|
axisLabel: { color: 'rgb(30, 144, 255)' },
|
splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
|
}
|
],
|
yAxis: [
|
{
|
type: "value",
|
name: Tname,
|
nameTextStyle: {
|
color: "rgb(30, 144, 255)",
|
fontSize: 12,
|
padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
},
|
splitLine: {
|
// 网格线
|
show: true,
|
lineStyle: { //分割线
|
color: "rgb(30, 144, 255)",
|
width: 1,
|
type: "dashed" //dotted：虚线 solid:实线
|
}
|
},
|
axisLabel: {
|
// 轴文字
|
color: "rgb(30, 144, 255)",
|
fontSize: 12,
|
},
|
},
|
|
],
|
series: [
|
{
|
name: '电耗',
|
type: 'bar',
|
barWidth: '80%',
|
data: datas,
|
itemStyle: { color: 'rgb(30, 144, 255)' }
|
},
|
|
]
|
};
|
|
option && myChart.setOption(option);
|
}
|
</script>
|
</body>
|
</html>
|
