| | |
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%> |
|---|
| | | <!DOCTYPE html> |
|---|
| | | |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta 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> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | html,body{ |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | #header1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 7%; |
|---|
| | | background-color: white; |
|---|
| | | display: inline-block; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 50px; |
|---|
| | | } |
|---|
| | | #header { |
|---|
| | | width: 100%; |
|---|
| | | height: 90%; |
|---|
| | | background-color: white; |
|---|
| | | margin-top: 2%; |
|---|
| | | } |
|---|
| | | #footer { |
|---|
| | | width: 100%; |
|---|
| | | height: 70%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | #main3 { |
|---|
| | | width: 100%; |
|---|
| | | height: 70%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | #main2 { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main4 { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | #main1-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | font-size: 40px; |
|---|
| | | } |
|---|
| | | #main1-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | font-size: 50px; |
|---|
| | | } |
|---|
| | | #main3-1 { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | #main3-2 { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main4-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main4-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main4-3 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main1-1-1 { |
|---|
| | | font-size: 50px; |
|---|
| | | margin-top: 2%; |
|---|
| | | } |
|---|
| | | #main1-2-1 { |
|---|
| | | font-size: 50px; |
|---|
| | | margin-top: 2%; |
|---|
| | | } |
|---|
| | | #main3-1-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | #main3-1-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 80%; |
|---|
| | | } |
|---|
| | | #main3-2-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | #main3-2-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 80%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | body { |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | } |
|---|
| | | #divhead{ |
|---|
| | | float: left; |
|---|
| | | margin-top: 3%; |
|---|
| | | width: 98%; |
|---|
| | | margin-left: 1%; |
|---|
| | | } |
|---|
| | | #divBody{ |
|---|
| | | margin-top: 4%; |
|---|
| | | float: left; |
|---|
| | | width: 100%; |
|---|
| | | height: 60%; |
|---|
| | | } |
|---|
| | | #orderData{ |
|---|
| | | float: left; |
|---|
| | | height: 98%; |
|---|
| | | width: 55%; |
|---|
| | | background-color: blanchedalmond; |
|---|
| | | } |
|---|
| | | #chart-wrap{ |
|---|
| | | float: left; |
|---|
| | | margin-left: 0; |
|---|
| | | height: 98%; |
|---|
| | | width: 44%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | </style> |
|---|
| | | <title>大屏显示</title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white" style="height: 99%;"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0" > |
|---|
| | | <h3>钢化</h3> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="divhead"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | <div id="divBody"> |
|---|
| | | <div id="orderData"> |
|---|
| | | <screen-order :tablehead="orderHead" :tabledata="orderData"></screen-order> |
|---|
| | | </div> |
|---|
| | | <div id="app" style="width: 99%;height: 99%;background-color: white;"> |
|---|
| | | <div id="header1" v-for='items1 in shuzu1'><span>{{items1['5_machineType']}}工序</span></div> |
|---|
| | | <div id="header"> |
|---|
| | | <div id="main1" v-for='items1 in shuzu1'> |
|---|
| | | <div id="main1-1">当前订单号： |
|---|
| | | <div id="main1-1-1" >{{items1['0_order_id']}}</div> |
|---|
| | | </div> |
|---|
| | | <div id="main1-2">当前产品号： |
|---|
| | | <div id="main1-2-1">{{items1['1_recipe_no']}}</div> |
|---|
| | | </div> |
|---|
| | | <div id="main1-2">当班计划数量： |
|---|
| | | <div id="main1-2-1">{{items1['8_smallglass_sum']}}</div> |
|---|
| | | </div> |
|---|
| | | <div id="main1-2">当班完成数量： |
|---|
| | | <div id="main1-2-1">{{items1['2_smallglass_completed']}} </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="main3"> |
|---|
| | | <div id="main4"></div> |
|---|
| | | <div id="main2"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | <div id="chart-wrap"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="11" :intime="this.global.timer" v-show="this.global.pollingIndex==1"></screen-photo> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
|---|
| | | <script src="../js/vue.min.js"></script> |
|---|
| | | <script src="../js/axios.min.js"></script> |
|---|
| | | <script src="../js/mixins.js"></script> |
|---|
| | | <script src="../js/echarts.min.js"></script> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableHead: [{}], |
|---|
| | | tableData: [{}], |
|---|
| | | machineElectric:[{}], |
|---|
| | | Vue.prototype.$echarts = echarts; |
|---|
| | | Vue.prototype.$http= axios; |
|---|
| | | let app = new Vue({ |
|---|
| | | el:'#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data:{ |
|---|
| | | shuzu:[{}], |
|---|
| | | shuzu1:[{}], |
|---|
| | | shuzu2:[{}], |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | orderHead:[{}], |
|---|
| | | orderData:[{}], |
|---|
| | | loading:true, |
|---|
| | | 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)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | val1: { |
|---|
| | | borderColor:'#082352', |
|---|
| | | title: { |
|---|
| | | // text: '成品库存', |
|---|
| | | // left: '290px', |
|---|
| | | // top: '0px' |
|---|
| | | text:'合格率',//主标题文本 |
|---|
| | | left:'center', |
|---|
| | | top:'45%', |
|---|
| | | left:'50%', |
|---|
| | | textStyle:{ |
|---|
| | | color:'#454c5c', |
|---|
| | | align:'center' |
|---|
| | | }, |
|---|
| | | subtextStyle:{ |
|---|
| | | fontFamily : "微软雅黑", |
|---|
| | | color:'#6c7a89', |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | textStyle:{ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | // orient: 'vertical', |
|---|
| | | left: 'left', |
|---|
| | | textStyle:{ |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | textStyle:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | |
|---|
| | | type: 'pie', |
|---|
| | | radius : ['40%','70%'], |
|---|
| | | center: ['50%', '50%'], |
|---|
| | | minAngle:'15', |
|---|
| | | label: { |
|---|
| | | // position: 'inside', |
|---|
| | | show: true, |
|---|
| | | formatter(param) { |
|---|
| | | // correct the percentage |
|---|
| | | return param.name + ' (' + param.percent + '%)'; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { value: 300, name: '成品',itemStyle:{color:'#53a2ff'} }, |
|---|
| | | { value: 700, name: '次品',itemStyle:{color:'darkseagreen'} } |
|---|
| | | ], |
|---|
| | | itemStyle: { |
|---|
| | | normal:{ |
|---|
| | | label:{ |
|---|
| | | show:true, |
|---|
| | | //formatter: "{b} :\n {c} \n ({d}%)", |
|---|
| | | formatter: "{b} :\n ({d}%)", |
|---|
| | | position:"inner" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | |
|---|
| | | dingdanxiangqing(){ |
|---|
| | | let HisArr=""; |
|---|
| | | HisArr = this.$echarts.init(document.getElementById('main2')); |
|---|
| | | let a = { |
|---|
| | | value: this.shuzu1[0]['6_qualified'], |
|---|
| | | |
|---|
| | | name: "成品", |
|---|
| | | itemStyle: { color: '#53a2ff' }, |
|---|
| | | label:{fontSize:30} |
|---|
| | | |
|---|
| | | } |
|---|
| | | let b = { |
|---|
| | | value: this.shuzu1[0]['7_qualified_not'], |
|---|
| | | name: "次品", |
|---|
| | | itemStyle: { color: 'darkseagreen' }, |
|---|
| | | label:{fontSize:30} |
|---|
| | | |
|---|
| | | } |
|---|
| | | this.val1.title.text="合格率" |
|---|
| | | this.val1.title.top="45%" |
|---|
| | | this.val1.title.left="45%" |
|---|
| | | this.val1.title.textStyle.fontSize=30 |
|---|
| | | this.val1.series[0].data[0]=a |
|---|
| | | this.val1.series[0].data[1]=b |
|---|
| | | |
|---|
| | | |
|---|
| | | HisArr.setOption(this.val1); |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | dingdanxiangqing1(){ |
|---|
| | | let HisArr=""; |
|---|
| | | HisArr = this.$echarts.init(document.getElementById('main4')); |
|---|
| | | let a = { |
|---|
| | | value: this.shuzu1[0]['2_smallglass_completed'], |
|---|
| | | |
|---|
| | | name: "已完成", |
|---|
| | | itemStyle: { color: '#53a2ff' }, |
|---|
| | | label:{fontSize:30} |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | let b = { |
|---|
| | | value: this.shuzu1[0]['3_smallglass_processing'], |
|---|
| | | name: "未完成", |
|---|
| | | itemStyle: { color: 'darkseagreen' }, |
|---|
| | | label:{fontSize:30} |
|---|
| | | |
|---|
| | | } |
|---|
| | | this.val1.title.text="订单加工" |
|---|
| | | this.val1.title.top="45%" |
|---|
| | | this.val1.title.left="45%" |
|---|
| | | this.val1.title.textStyle.fontSize=30 |
|---|
| | | this.val1.series[0].data[0]=a |
|---|
| | | this.val1.series[0].data[1]=b |
|---|
| | | HisArr.setOption(this.val1); |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | 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·h)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | danwei="(kw·h)" |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | this.val.title.text='钢化'+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); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | shuzu1(){ |
|---|
| | | this.dingdanxiangqing(), |
|---|
| | | this.dingdanxiangqing1() |
|---|
| | | } |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | |
|---|
| | | }, |
|---|
| | | async mounted(){ |
|---|
| | | |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大屏显示机器表头',sql,flag,"tableHead") |
|---|
| | | sql="{call AXJ_a_largeScreen_orderRatio_tableHead_select()}" |
|---|
| | | await this.loadAjxss('贴膜检测以及钢化大屏比例表头',sql,flag,"orderHead") |
|---|
| | | await this.getTableData('钢化') |
|---|
| | | await this.getMachineElectric('钢化',7) |
|---|
| | | let getOrderData=await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_orderRatio_tableData_select()}" |
|---|
| | | this.interValLoadAjxs('贴膜检测以及钢化大屏比例数据',sql,flag,"orderData",getOrderData) |
|---|
| | | },5000) |
|---|
| | | this.onmouseMove() |
|---|
| | | sql="{call AXJ_dapingxianshi_dingdanshuju2('钢化')}" |
|---|
| | | this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1") |
|---|
| | | |
|---|
| | | await setInterval(()=>{ |
|---|
| | | |
|---|
| | | sql="{call AXJ_dapingxianshi_dingdanshuju2('钢化')}" |
|---|
| | | this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1") |
|---|
| | | },5000) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
