<%@ page language="java" import="java.sql.*" 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">
|
<meta http-equiv="expires" content="0">
|
<meta http-equiv="pragma" content="no-cache">
|
<meta http-equiv="cache-control" content="no-cache">
|
<link rel="shortcut icon" href="../img/3.ico" />
|
<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/main.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:37%;
|
display:flex;
|
}
|
#center{
|
height:26%;
|
display:flex;
|
}
|
#bottom{
|
height:37%;
|
display:flex;
|
}
|
.top_div{
|
width:33%;
|
height:100%;
|
}
|
.center_divs{
|
width:100%;
|
height:100%;
|
}
|
.center_div_details{
|
height:50%;
|
width:100%;
|
}
|
.bottom_div{
|
width:33%;
|
height:100%;
|
}
|
img{
|
max-width: 100%;
|
max-height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
}
|
.photo{
|
max-width: 80%;
|
max-height: 80%;
|
|
}
|
|
.imga{
|
position: relative;
|
}
|
#mains{
|
height: 100%;
|
width: 100%;
|
padding: 0;
|
margin: 0;
|
}
|
</style>
|
|
</head>
|
<body>
|
<div id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white" style='background-color:#D5EAFF;width:100%;height: 100%;'>
|
<div id="mains" v-show="this.global.pollingIndex==0">
|
<parts-change></parts-change>
|
<div id="top">
|
<div class="top_div imga"><img class="photo" :src="arr[0]"></div>
|
<div class="top_div" id="Histogram1">打孔机1水耗</div>
|
<div class="top_div" id="Histogram2">打孔机1电耗</div>
|
</div>
|
<div id="center">
|
<div style="width:100%;" class="center_divs">
|
|
<show-table :tablehead="tableHead" :tabledata="tableData"></show-table>
|
</div>
|
</div>
|
<div id="bottom">
|
<div class="bottom_div imga"><img class="photo" :src="arr[0]"></div>
|
<div class="bottom_div" id="Histogram3">打孔机2水耗</div>
|
<div class="bottom_div" id="Histogram4">打孔机2电耗</div>
|
</div>
|
</div>
|
<screen-photo :id="3" :intime="this.global.timer"
|
v-show="this.global.pollingIndex==1"
|
>
|
<parts-change-all
|
:machinetype="'磨边倒角'"
|
v-show="this.global.pollingIndex==2">
|
</parts-change-all>
|
</screen-photo>
|
</div>
|
<script>
|
Vue.prototype.$echarts = echarts
|
Vue.prototype.$http= axios
|
let app = new Vue({
|
el: '#app',
|
mixins: [mixin],
|
data: {
|
|
storage: null,
|
val: {
|
title:{
|
text:'',
|
left:'center'
|
},
|
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: 'white'
|
}
|
},
|
|
]
|
},
|
|
|
tableHead: [{}],
|
selectdate1: '',
|
selectdate2: '',
|
tableData: [{}],
|
show: true,
|
showGlassType: '',
|
showGlassIndex: 0,
|
machineElectric:[{}],
|
machineWater:[{}],
|
loading:true,
|
arr:[]
|
},
|
methods: {
|
echarsInit(type) {
|
|
let HisArr=[]
|
let datas=type==0?this.machineElectric:this.machineWater
|
for(let i=0;i<2;i++){
|
if(type==0){
|
HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+2)));
|
}else{
|
HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+1)));
|
}
|
|
}
|
if(type==0){
|
this.val.yAxis[0].name="电耗";
|
this.val.series[0].name='电耗(kw·h)'
|
this.val.series[0].itemStyle.color='rgb(84,112,198)'
|
}else{
|
this.val.yAxis[0].name="水耗";
|
this.val.series[0].name='水耗(m³)'
|
this.val.series[0].itemStyle.color='#00ff00'
|
}
|
let danwei=type==0?"(kw·h)":'(m³)'
|
for(let i in datas){
|
if(i>1){
|
return
|
}
|
this.val.title.text=datas[i]["0_machine_name"]+danwei
|
this.val.xAxis[0].data=datas[i]["6_shijian"].split(',');
|
this.val.series[0].data=datas[i]["5_jiqidianliang"].split(',');
|
HisArr[i].setOption(this.val);
|
}
|
|
|
},
|
},
|
computed: {
|
|
},
|
watch:{
|
tableData(newVal){
|
newVal.forEach(element => {
|
this.arr.push(element['11_route'])
|
});
|
},
|
machineElectric(){
|
if(Object.keys(this.machineElectric[0]).length==0){
|
return
|
}
|
this.echarsInit(0)
|
this.loading=false
|
},
|
machineWater(){
|
if(Object.keys(this.machineWater[0]).length==0){
|
return
|
}
|
this.echarsInit(1)
|
this.loading=false
|
}
|
},
|
async mounted() {
|
let sql=""
|
let flag=2
|
|
sql="{call AXJ_a_largeScreen_order_tableHead_select()}"
|
await this.loadAjxss('大屏显示磨边机器订单查询',sql,flag,"tableHead")
|
await this.getTableData('磨边倒角') // 磨边倒角
|
await this.getMachineElectric('磨边倒角','2')
|
await this.getMachineWater('磨边倒角','1')
|
this.onmouseMove2()
|
},
|
|
})
|
</script>
|
</body>
|
</html>
|
