<%@ 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">
|
<title>切割大屏</title>
|
<!-- <link rel="stylesheet" href="../js/static/css/element.css">
|
<link rel="stylesheet" href="../js/static/css/style.css">
|
<script src="../js/jquery-3.4.1.min.js"></script>
|
<script src="../js/static/js/vue.js"></script>
|
<script src="../js/axios.min.js"></script>
|
<script src="../js/mixins.js"></script>
|
<script src="../js/static/js/element.js"></script>
|
<script src="../js/static/js/echarts.min.js"></script> -->
|
<script src="../js/main.js"></script>
|
<style >
|
.page-scroll {
|
height: 100%;
|
}
|
|
.page-scroll .el-scrollbar__wrap {
|
overflow-x: hidden;
|
}
|
.imgs{
|
width: auto;
|
height: auto;
|
max-width: 80%;
|
max-height: 80%;
|
}
|
</style>
|
</head>
|
<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="left" style="width:69%;height: 100%;float: left;margin-right: 1%;">
|
<div style="width: 100%;height: 15%;margin-top: 1%;">
|
<h3 style="text-align: left;font-size: larger;margin: 0;">玻璃切割:</h3>
|
<!-- <h3 style="text-align: left;font-size: small;margin: 0;">工作状态:
|
<el-tag v-if="order['9_work_state']!='正在工作'">空闲</el-tag>
|
<el-tag v-else= type="success">正在工作</el-tag>
|
</h3> -->
|
</div>
|
|
<div style="width:100%;height: 85%;float: left;position: relative;">
|
<!-- <el-image
|
|
src="../static/imgs/test.jpg"
|
></el-image> -->
|
<img class="imgs" :src="picture" alt="">
|
</div>
|
|
</div>
|
<div v-if="Object.keys(order).length!=0" id="main" style="width:30%;height: 100%;float: left;">
|
<el-descriptions style="height: 50%;width: 98%;margin-top: 5%;" title="玻璃属性（单位：mm）" :column="1" border >
|
<el-descriptions-item colon label="订单编号/序号：">{{order['1_order_id']}}</el-descriptions-item>
|
<el-descriptions-item colon label="玻璃厚度：" label-class-name="my-label" content-class-name="my-content">{{order['2_thickness']}}</el-descriptions-item>
|
<el-descriptions-item colon label="玻璃色种：">{{order['3_color']}}</el-descriptions-item>
|
<el-descriptions-item colon label="小片宽高：">{{order['4_width']+'*'+order['5_height']}}</el-descriptions-item>
|
<el-descriptions-item colon label="原片宽高：">
|
{{order['7_original_width']+'*'+order['8_original_height']}}
|
</el-descriptions-item>
|
|
<!-- <el-descriptions-item colon label="所用能耗：">
|
{{order['13_electric']}} (kw·h)
|
</el-descriptions-item> -->
|
|
<!-- <el-descriptions-item colon label="总数/已完成/破损：">
|
{{order['10_smallglass_no']+'/'+order['11_smallglass_completed']+'/'+order['12_smallglass_worn']}}
|
</el-descriptions-item> -->
|
<el-descriptions-item colon label="耗材更换：">
|
<el-button type="text" @click="openParts" :style="order['14_parts_count']==1?textColor:null" >更换</el-button>
|
</el-descriptions-item>
|
<!-- <el-descriptions-item colon label="手动破损：">
|
|
<el-button type="text">破损</el-button>
|
</el-descriptions-item> -->
|
</el-descriptions>
|
<div class="top_div" style="width: 100%;height: 30vh;" id="Histogram1"></div>
|
</div>
|
</div>
|
<screen-photo :id="2" :intime="this.global.timer"
|
v-show="this.global.pollingIndex==1"
|
></screen-photo>
|
<parts-change-all
|
:machinetype="'切割'"
|
v-show="this.global.pollingIndex==2">
|
</parts-change-all>
|
</div>
|
</body>
|
|
|
<script>
|
let app= new Vue({
|
el: '#app',
|
mixins:[mixin],
|
data:{
|
machineElectric:[{}],
|
glassCutInfo:{},
|
picture:null,
|
order:{},
|
loading:true,
|
textColor:{
|
color:'orange'
|
}
|
},
|
methods: {
|
openParts(){
|
this.$emit('dialogvisible',
|
{
|
'show':true,
|
'machineid':4
|
}
|
)
|
},
|
echarsInit() {
|
|
let HisArr=[]
|
|
for(let i=0;i<1;i++){
|
HisArr[i] = this.$echarts.init(document.getElementById('Histogram1'));
|
}
|
let val=this.global.val
|
val.yAxis[0].name="电耗";
|
val.series[0].name='电耗(kw·h)'
|
|
|
for(let i in this.machineElectric){
|
val.title.text=this.machineElectric[i]["0_machine_name"]+"(kw·h)"
|
val.series[0].itemStyle.color='rgb(84,112,198)'
|
val.xAxis[0].data=this.machineElectric[i]["6_shijian"].split(',');
|
val.series[0].data=this.machineElectric[i]["5_jiqidianliang"].split(',');
|
HisArr[i].setOption(val);
|
}
|
},
|
|
},
|
computed:{
|
|
},
|
watch:{
|
glassCutInfo(){
|
this.picture=this.glassCutInfo[0]['6_route']
|
this.order=this.glassCutInfo[0]
|
this.loading=false
|
},
|
machineElectric(){
|
this.echarsInit()
|
}
|
},
|
async mounted() {
|
let sql="{call AXJ_a_largeScreen_glassCut_select()}"
|
let flag=2
|
let glassCutInfoTimer=await setInterval(()=>{
|
this.interValLoadAjxs('大屏显示切割',sql,flag,"glassCutInfo",glassCutInfoTimer)
|
},3000)
|
|
await this.getMachineElectric('切割','2')
|
this.onmouseMove2()
|
|
|
},
|
})
|
|
|
|
|
</script>
|
</html>
|
