<%@ 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">
|
<meta http-equiv="expires" content="0">
|
<meta http-equiv="pragma" content="no-cache">
|
<meta http-equiv="cache-control" content="no-cache">
|
<script src="../js/main.js"></script>
|
|
<title>瑕疵检测</title>
|
</head>
|
<style>
|
*{
|
padding: 0;
|
margin: 0;
|
}
|
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%;
|
}
|
|
#chart-wrap {
|
height: 40%;
|
width: 30%;
|
position: absolute;
|
right: 2%;
|
top: 2%;
|
text-align: center;
|
line-height: 275px;
|
}
|
|
#har {
|
width: 99%;
|
position: absolute;
|
height: 2%;
|
top: 43%;
|
background-color: darkgrey;
|
}
|
|
#picture1 {
|
width: 50%;
|
position: absolute;
|
height:100%;
|
|
padding: 0;
|
margin: 0;
|
}
|
|
#picture2 {
|
width: 50%;
|
height:100%;
|
|
|
|
}
|
#pictue{
|
position: absolute;
|
top: 50%;
|
width: 99%;
|
height:48vh;
|
padding: 0;
|
margin: 0;
|
}
|
img{
|
max-width: 100%;
|
max-height: 100%;
|
}
|
</style>
|
|
<body>
|
<div id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white">
|
<div id="mains" v-show="this.global.pollingIndex==0">
|
<parts-change></parts-change>
|
<div id='app1' style="width: 60%;height:30%;float: right;padding: 0;background-color: white;">
|
<show-table :tablehead="tableHead" :tabledata="tableData1"></show-table>
|
</div>
|
<div id='chart-wrap'>
|
</div>
|
<div id='har'></div>
|
<div id="pictue">
|
<div id='picture1' >
|
<img class="imgCenter" style="float: right;" :src="pictures[0]" alt="">
|
</div>
|
<div id="picture2" style="float:right">
|
<img class="imgCenter" style="float: left;" :src="pictures[1]" alt="">
|
</div>
|
|
</div>
|
</div>
|
<screen-photo :id="this.machineScreen" :intime="this.global.timer"
|
v-show="this.global.pollingIndex==1 "
|
>
|
</screen-photo>
|
</div>
|
|
</body>
|
<script type="text/javascript">
|
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
axisLine: { lineStyle: { color: '#5CADFE' } },
|
axisLabel: { color: '#5CADFE' },
|
splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
}
|
],
|
yAxis: [
|
{
|
type: "value",
|
name: "水耗",
|
nameTextStyle: {
|
color: "#5CADFE",
|
fontSize: 12,
|
padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
},
|
splitLine: {
|
// 网格线
|
show: true,
|
lineStyle: { //分割线
|
color: "#5CADFE",
|
width: 1,
|
type: "dashed" //dotted：虚线 solid:实线
|
}
|
},
|
axisLabel: {
|
// 轴文字
|
color: "#5CADFE",
|
fontSize: 12,
|
},
|
},
|
|
],
|
series: [
|
{
|
name: '水耗',
|
type: 'bar',
|
barWidth: '80%',
|
data: [10, 52, 200, 334, 390, 330, 220],
|
itemStyle: { color: '#5CADFE' }
|
},
|
|
]
|
},
|
|
tableHead: [{}],
|
selectdate1: '',
|
selectdate2: '',
|
tableData: [{}],
|
tableData1:[{}],
|
tableHead2: [{}],
|
tableData2: [{}],
|
show: true,
|
showGlassType: '',
|
showGlassIndex: 0,
|
machineLocal:<%= request.getParameter("local")%>,
|
machineScreen:null,
|
machineElectric:[{}],
|
loading:true,
|
machineIp:null,
|
picture:[{}],
|
pictures:['',''],
|
getPhoto:null
|
|
|
},
|
methods: {
|
echarsInit(type) {
|
let HisArr=[]
|
let datas=this.machineElectric
|
datas=[datas[this.machineLocal]]
|
HisArr[0] = this.$echarts.init(document.getElementById('chart-wrap'));
|
|
this.val.yAxis[0].name="电耗";
|
this.val.series[0].name='电耗(kw)'
|
this.val.series[0].itemStyle.color='rgb(84,112,198)'
|
danwei="(kw)"
|
|
for(let i in datas){
|
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(newdate,olddate){
|
this.tableData1=[this.tableData[this.machineLocal]]
|
},
|
machineElectric(){
|
if(Object.keys(this.machineElectric[0]).length==0){
|
return
|
}
|
this.echarsInit(0)
|
this.loading=false
|
},
|
picture(newval){
|
this.pictures[0]=newval[0]['A0']
|
this.pictures[1]=newval[0]['A1']
|
}
|
},
|
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('瑕疵检测','4')
|
|
let param = new URLSearchParams();
|
param.append("ip",this.machineIp);
|
this.getPhoto = await setInterval(()=>{
|
this.$http.post( '../mysqlInsert/getPicture.jsp',param)
|
.then(function (response) {
|
app.$data.picture= response.data
|
}).catch(function (error) {
|
clearInterval(this.getPhoto);
|
//alert('Error: ' + "提取图片发生错误,请关闭界面重新打开！");
|
|
});
|
},30000)
|
|
|
this.onmouseMove()
|
},
|
created() {
|
switch (this.machineLocal) {
|
case 0:
|
this.machineScreen=7*1
|
this.machineIp="192.168.10.196"
|
break;
|
case 1:
|
this.machineScreen=10*1
|
this.machineIp="192.168.20.51"
|
break;
|
default:
|
this.machineScreen=12*1
|
this.machineIp="192.168.20.107"
|
break;
|
//
|
}
|
},
|
|
})
|
</script>
|
|
|
</html>
|
