<%@ page language="java" 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">
|
<title>下片堆垛</title>
|
<script src="../js/main.js"></script>
|
</head>
|
<style>
|
* {
|
margin: 0px;
|
padding: 0px;
|
|
|
}
|
|
body,
|
html {
|
width: 100%;
|
height: 100%;
|
background-color: #D5EAFF;
|
|
}
|
|
#app {
|
width: 100%;
|
height: 100%;
|
}
|
|
#wai {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
position: relative;
|
margin: 0px;
|
padding: 0px;
|
justify-content: center;
|
}
|
|
#wai_shang {
|
width: 100%;
|
height: 48%;
|
display: flex;
|
flex-wrap: nowrap;
|
}
|
|
#wai_xia {
|
width: 100%;
|
height: 50%;
|
display: flex;
|
flex-wrap: nowrap;
|
}
|
|
.shang_zuo {
|
height: 100%;
|
width: 50%;
|
}
|
|
.shang_you {
|
height: 100%;
|
width: 50%;
|
}
|
|
.centdv_time {
|
width: 70%;
|
height: 10%;
|
position: relative;
|
}
|
|
.centdv_time input {
|
height: 25px;
|
}
|
|
.btn {
|
text-align: center;
|
width: 100px;
|
height: 29px;
|
/* outline: none; */
|
border: none;
|
background-color: #5CADFE;
|
box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
|
}
|
|
.msgtab {
|
width: 99%;
|
height: 90%;
|
/* border: 1px solid white; */
|
|
}
|
|
.msgtab1 {
|
width: 99%;
|
height: 88%;
|
/* border: 1px solid white; */
|
}
|
|
|
.xia_zuo {
|
height: 100%;
|
width: 50%;
|
}
|
|
.xia_you {
|
height: 100%;
|
width: 50%;
|
}
|
|
#chart-wrap {
|
width: 90%;
|
height: 80%;
|
}
|
|
.title {
|
color: black;
|
height: 10%;
|
font-size: 18px;
|
}
|
|
.centdv_time {
|
font-size: 18px;
|
}
|
|
#tuopan {
|
width: 80%;
|
height: 90%;
|
background-color: #696969;
|
border-radius: 25px 25px 0 0;
|
margin: 0 auto;
|
transform: rotate(180deg);
|
}
|
|
#tuopan_jindu {
|
border-radius: 0 0 25px 25px;
|
width: 100%;
|
/* height: 75%; */
|
background-color: #5CADFE;
|
transform: rotate(180deg);
|
}
|
|
.xptile {
|
height: 10%;
|
font-size: 18px;
|
text-align: center;
|
}
|
|
.jindu {
|
color: black;
|
width: 100px;
|
height: 5%;
|
font-size: 18px;
|
position: relative;
|
top: -55%;
|
left: 36%
|
}
|
|
#jindu_zhi {
|
border: none;
|
background-color: transparent;
|
height: 100%;
|
font-size: 18px;
|
}
|
</style>
|
|
<body>
|
<div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white">
|
<div id="mains" v-show="this.global.pollingIndex==0">
|
<div id="wai">
|
<div id="wai_shang">
|
<div class="shang_zuo">
|
<div class="title">
|
当前生产信息：
|
|
等待托盘数：
|
|
已完工托盘数：
|
|
</div>
|
|
<div class="msgtab">
|
<show-table :tablehead="tableHead" :tabledata="tableData"></show-table>
|
</div>
|
</div>
|
<div class="shang_you">
|
<div class="centdv_time">
|
<el-date-picker style="float: left;margin-bottom: 0.3%;"
|
v-model="selectDate"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
|
<el-button type="primary" icon="el-icon-search"
|
style="float: left;margin-left: 0.2%;margin-bottom: 0.3%;"
|
@click="selectSub()"
|
>历史订单搜索</el-button>
|
</div>
|
<div class="msgtab1">
|
<show-table :tablehead="tableHead" :tabledata="tableDatas"></show-table>
|
</div>
|
</div>
|
|
</div>
|
<div id="wai_xia">
|
<div class="xia_zuo">
|
<div id="chart-wrap"></div>
|
</div>
|
<div class="xia_you">
|
|
<div id="tuopan">
|
<div id="tuopan_jindu"></div>
|
</div>
|
|
<div class="xptile">当前下片进度{{bar}}%</div>
|
<div class="jindu"><input type="text" id="jindu_zhi" :value="GlassNum+'/'+150"></div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<screen-photo :id="14" :intime="this.global.timer"
|
v-show="this.global.pollingIndex==1"
|
>
|
</screen-photo>
|
</div>
|
</body>
|
<script>
|
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: [],
|
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)'
|
}
|
},
|
|
]
|
},
|
tableHead: [{
|
0:'订单号', 1:'产品信息', 2:'已加工数', 3:'待加工数', 4:'破损数'
|
}],
|
selectDate:['',''],
|
tableData: [{}],
|
tableDatas: [{}],
|
show: true,
|
showGlassType: '',
|
showGlassIndex: 0,
|
gao: 50,
|
machineElectric:[{}],
|
getGlassNum:null,
|
GlassNum:null,
|
bar:null,
|
loading:true
|
|
|
},
|
methods: {
|
echarsInit(type) {
|
let HisArr=[]
|
let datas=this.machineElectric
|
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=this.machineElectric[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);
|
}
|
},
|
jindu () {
|
let myDiv = document.getElementById("tuopan_jindu");
|
myDiv.style.height = this.bar+"%";
|
|
|
},
|
selectSub(){
|
let arrObj={
|
type:1,
|
stateData:this.selectDate[0],
|
endeData:this.selectDate[1]
|
}
|
sql="{call AXJ_a_largeScreen_batchOffData_select(?,?,?,?)}~"+JSON.stringify(arrObj)
|
this.loadAjxss('下片订单参数',sql,2,"tableDatas")
|
}
|
|
},
|
computed: {
|
|
},
|
watch:{
|
machineElectric(){
|
if(Object.keys(this.machineElectric[0]).length==0){
|
return
|
}
|
//this.echarsInit(0)
|
this.loading=false
|
},
|
getGlassNum(newval){
|
this.GlassNum=newval[0]['0_content_value']%150
|
this.bar=parseInt(parseInt(this.GlassNum/150*100))
|
this.jindu()
|
}
|
},
|
async mounted () {
|
let sql=""
|
let flag=2
|
sql="{call AXJ_a_largeScreen_batchOffHead_select()}"
|
await this.loadAjxss('下片堆垛订单',sql,flag,"tableHead")
|
await this.getMachineElectric('下片',7)
|
//this.jindu();
|
|
let timer1=await setInterval(()=>{
|
let arrObj={
|
type:0,
|
stateData:'',
|
endeData:''
|
}
|
sql="{call AXJ_a_largeScreen_batchOffData_select(?,?,?,?)}~"+JSON.stringify(arrObj)
|
this.interValLoadAjxs('下片订单参数',sql,flag,"tableData",timer1)
|
},5000)
|
let arrObj={
|
type:1,
|
stateData:'',
|
endeData:''
|
}
|
sql="{call AXJ_a_largeScreen_batchOffData_select(?,?,?,?)}~"+JSON.stringify(arrObj)
|
this.loadAjxss('下片订单参数',sql,flag,"tableDatas")
|
|
sql="{call AXJ_a_largeScreen_batchOffHandNum_select()}"
|
this.loadAjxss()
|
|
let timer2=await setInterval(()=>{
|
sql="{call AXJ_a_largeScreen_batchOffHandNum_select()}"
|
this.interValLoadAjxs('下片机械手数量',sql,flag,"getGlassNum",timer2)
|
},5000)
|
this.onmouseMove()
|
|
},
|
|
})
|
|
</script>
|
|
</html>
|
