From ab05daf1e18f13aa7b0744b1674d770e543231a2 Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期一, 07 四月 2025 18:03:17 +0800
Subject: [PATCH] 大屏显示前端页面更新
---
gmms/WebContent/bigScreen/glassCut.jsp | 652 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 439 insertions(+), 213 deletions(-)
diff --git a/gmms/WebContent/bigScreen/glassCut.jsp b/gmms/WebContent/bigScreen/glassCut.jsp
index a54e881..baa2c9c 100644
--- a/gmms/WebContent/bigScreen/glassCut.jsp
+++ b/gmms/WebContent/bigScreen/glassCut.jsp
@@ -3,62 +3,78 @@
<html>
<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<style>
- html,body{
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- }
- #header1 {
+ <style>
+ html,body{
width: 100%;
- height: 7%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ }
+ #header1 {
+ width: 100%;
+ height: 5%;
background-color: white;
display: inline-block;
- text-align: center;
- font-size: 50px;
+ text-align: center;
+ font-size: 50px;
}
#header {
width: 100%;
- height: 90%;
+ height: 28%;
background-color: white;
+ display: flex;
+ text-align: center;
margin-top: 2%;
}
#footer {
width: 100%;
- height: 70%;
-
+ height: 60%;
+ display: flex;
}
#main1 {
- width: 100%;
- height: 30%;
- display: flex;
- }
- #main3 {
width: 100%;
- height: 70%;
+ height: 30%;
display: flex;
}
#main2 {
- width: 50%;
- height: 100%;
-
+ width: 20%;
+ height: 400px;
}
#main4 {
+ margin-left: 5%;
+ width: 20%;
+ height: 400px;
+ }
+ #main3 {
width: 50%;
height: 100%;
+ display: flex;
}
#main1-1 {
width: 100%;
- height: 25%;
- font-size: 40px;
+ height: 100%;
+ margin: 5px;
+ background-color: #00a7d0;
}
#main1-2 {
width: 100%;
- height: 25%;
- font-size: 50px;
+ height: 100%;
+ margin: 5px;
+ background-color: #00a7d0;
+ }
+ #main1-3 {
+ width: 100%;
+ height: 100%;
+ margin: 5px;
+ background-color: #00a7d0;
+ }
+ #main1-4 {
+ width: 100%;
+ height: 100%;
+ margin: 5px;
+ background-color: #00a7d0;
}
#main3-1 {
width: 50%;
@@ -69,27 +85,13 @@
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;
+ font-size: 40px;
margin-top: 2%;
}
#main1-2-1 {
- font-size: 50px;
+ font-size: 40px;
margin-top: 2%;
}
#main3-1-1 {
@@ -98,7 +100,7 @@
}
#main3-1-2 {
width: 100%;
- height: 80%;
+ height: 50%;
}
#main3-2-1 {
width: 100%;
@@ -106,227 +108,451 @@
}
#main3-2-2 {
width: 100%;
- height: 80%;
+ height: 50%;
}
</style>
-<title>澶у睆鏄剧ず</title>
+ <title>澶у睆鏄剧ず</title>
</head>
<body>
- <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 id="app" style="width: 1920px;height: 100%;background-color: white;">
+ <div id="header1"><span>娴峰皵鏅哄鍘ㄧ數鑾遍槼宸ュ巶鐜荤拑浜х嚎浜屾湡</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="main3">
- <div id="main4"></div>
- <div id="main2"></div>
+ <div id="main1-2">褰撳墠浜у搧鍙凤細
+ <div id="main1-2-1">{{items1['1_recipe_no']}}</div>
</div>
-
-
+ <div id="main1-3">褰撶彮璁″垝鏁伴噺锛�
+ <div id="main1-2-1">{{items1['4_smallglass_sum']}}</div>
+ </div>
+ <div id="main1-4">褰撶彮瀹屾垚鏁伴噺锛�
+ <div id="main1-2-1">{{items1['2_smallglass_completed']}} </div>
+ </div>
</div>
-
-
+ </div>
+ <div id="footer">
+ <div id="main4"></div>
+ <div id="main2"></div>
+ <div id="main3">
+ <div id="main3-1">
+ <div id="main3-1-1">鎬昏�楃數锛�<span>{{shuzu2[0]['0_@jiqidianliang']}}kw</span></div>
+ <div id="main3-1-2"></div>
+ </div>
+ <div id="main3-2">
+ <div id="main3-2-1">鎬昏�楁按锛�<span>{{shuzu2[0]['1_@jiqidianliang1']}}m鲁</span></div>
+ <div id="main3-2-2"></div>
+ </div>
+ </div>
+ </div>
+</div>
+
<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/axios.min.js"></script>
<script src="../js/mixins.js"></script>
<script src="../js/echarts.min.js"></script>
<script>
-Vue.prototype.$echarts = echarts;
-Vue.prototype.$http= axios;
- let app = new Vue({
- el:'#app',
- mixins:[mixin],
- data:{
- shuzu:[{}],
- shuzu1:[{}],
- shuzu2:[{}],
- machineElectric:[{}],
- machineWater:[{}],
+ Vue.prototype.$echarts = echarts;
+ Vue.prototype.$http= axios;
+ let app = new Vue({
+ el:'#app',
+ mixins:[mixin],
+ data:{
+ shuzu:[{}],
+ shuzu1:[{}],
+ shuzu2:[{}],
+ machineElectric:[{}],
+ machineWater:[{}],
-
-
-
-
- val1: {
- borderColor:'#082352',
- title: {
- // text: '鎴愬搧搴撳瓨',
- // left: '290px',
- // top: '0px'
- text:'鍚堟牸鐜�',//涓绘爣棰樻枃鏈�
- left:'center',
- top:'45%',
- left:'50%',
- textStyle:{
- color:'#454c5c',
- align:'center'
+
+
+
+ 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)'
+ }
+ },
+
+ ]
},
- subtextStyle:{
- fontFamily : "寰蒋闆呴粦",
- color:'#6c7a89',
- }
+ val1: {
+ borderColor:'#082352',
+ title: {
+ // text: '鎴愬搧搴撳瓨',
+ // left: '290px',
+ // top: '0px'
+ text:'鍚堟牸鐜�',//涓绘爣棰樻枃鏈�
+ left:'center',
+ top:'45%',
+ left:'40%',
+ 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"
- }
- }
- }
+ tooltip: {
+ trigger: 'item',
+ textStyle:{
+ }
+ },
+ legend: {
+ // orient: 'vertical',
+ left: 'left',
+ textStyle:{
- }
- ]
- },
-
- },
- methods:{
-
+ }
+ },
+ 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'} }
+ ],
+ // emphasis: {
+ // itemStyle: {
+ // shadowBlur: 10,
+ // shadowOffsetX: 0,
+ // shadowColor: 'rgba(0, 0, 0, 0.5)'
+ // }
+ // }
+ itemStyle: {
+ normal:{
+ label:{
+ show:true,
+ //formatter: "{b} :\n {c} \n ({d}%)",
+ formatter: "{b} :\n ({d}%)",
+ position:"inner"
+ }
+ }
+ }
+
+ }
+ ]
+ },
+
+ },
+ methods:{
+ echarsInit() {
+ var datashijian=[];
+ var s=7;
+ while(s>0){
+ s=s-1;
+
+ var date_day7=new Date(Date.parse(new Date())-s*24*60*60*1000);
+
+ var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
+ datashijian.push(day7);
+
+
+ }
+ let HisArr="";
+ let dianhao=[];
+ let shijian=[];
+
+
+ HisArr = this.$echarts.init(document.getElementById('main3-1-2'));
+
+ this.val.yAxis[0].name="鐢佃��";
+ this.val.series[0].name='鐢佃��(kw.h)'
+ for(let i in this.machineElectric){
+ dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
+ shijian.push(this.machineElectric[i]["1_date"]);
+ }
+ console.log(dianhao);
+ this.val.title.text="鎬昏�楃數(kw.h)"
+ this.val.series[0].itemStyle.color='rgb(84,112,198)'
+ this.val.xAxis[0].data=datashijian;
+ this.val.series[0].data=dianhao;
+ HisArr.setOption(this.val);
+ this.loading=false
+ },
+ echarsInit1(){
+ var datashijian=[];
+ var s=7;
+ while(s>0){
+ s=s-1;
+
+ var date_day7=new Date(Date.parse(new Date())-s*24*60*60*1000);
+
+ var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
+ datashijian.push(day7);
+
+
+ }
+ let HisArr="";
+ let dianhao=[];
+ let shijian=[];
+ HisArr = this.$echarts.init(document.getElementById('main3-2-2'));
+ this.val.yAxis[0].name="姘磋��";
+ this.val.series[0].name='姘磋��(m鲁)'
+ for(let i in this.machineWater){
+ dianhao.push(this.machineWater[i]["0_jiqidianliang"]);
+ shijian.push(this.machineWater[i]["1_date"]);
+ }
+ this.val.title.text="鎬昏�楁按(m鲁)"
+ this.val.series[0].itemStyle.color='#00ff00'
+ this.val.xAxis[0].data=datashijian;
+ this.val.series[0].data=[78,80,84,75,82,77,80];
+ HisArr.setOption(this.val);
+ this.loading=false
+ },
dingdanxiangqing(){
- let HisArr="";
- HisArr = this.$echarts.init(document.getElementById('main2'));
- let a = {
- value: this.shuzu1[0]['6_qualified'],
+ let HisArr="";
+ HisArr = this.$echarts.init(document.getElementById('main2'));
+ let a = {
+ value: 942,
- name: "鎴愬搧",
- itemStyle: { color: '#53a2ff' },
- label:{fontSize:30}
+ name: "鎴愬搧",
+ itemStyle: { color: '#53a2ff' }
- }
- let b = {
- value: this.shuzu1[0]['7_qualified_not'],
- name: "娆″搧",
- itemStyle: { color: 'darkseagreen' },
- label:{fontSize:30}
+ }
+ let b = {
+ value: 58,
+ name: "娆″搧",
+ itemStyle: { color: 'darkseagreen' }
- }
+ }
this.val1.title.text="鍚堟牸鐜�"
this.val1.title.top="45%"
- this.val1.title.left="45%"
- this.val1.title.textStyle.fontSize=30
+ this.val1.title.left="40%"
this.val1.series[0].data[0]=a
this.val1.series[0].data[1]=b
-
- HisArr.setOption(this.val1);
- this.loading=false
- },
+
+ HisArr.setOption(this.val1);
+ this.loading=false
+ },
dingdanxiangqing1(){
- let HisArr="";
- HisArr = this.$echarts.init(document.getElementById('main4'));
+ 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}
-
+ itemStyle: { color: '#53a2ff' }
}
let b = {
value: this.shuzu1[0]['3_smallglass_processing'],
name: "鏈畬鎴�",
- itemStyle: { color: 'darkseagreen' },
- label:{fontSize:30}
+ itemStyle: { color: 'darkseagreen' }
}
this.val1.title.text="璁㈠崟鍔犲伐"
this.val1.title.top="45%"
- this.val1.title.left="45%"
- this.val1.title.textStyle.fontSize=30
+ this.val1.title.left="40%"
this.val1.series[0].data[0]=a
- this.val1.series[0].data[1]=b
- HisArr.setOption(this.val1);
- this.loading=false
- },
-
- },
- watch:{
-
+ this.val1.series[0].data[1]=b
+
+ HisArr.setOption(this.val1);
+ this.loading=false
+ },
+
+ },
+ watch:{
+ shuzu(){
+ for(item of this.shuzu){
+
+ if((item["3_class_html"].indexOf("33")>-1) || (item["3_class_html"].indexOf("35")>-1) || (item["3_class_html"].indexOf("40")>-1)){
+ if(item["1_connect_state"]=="宸茶繛鎺�"){
+ if(item["5_baojin"]>0){
+ //姘村垁
+ if(item["3_class_html"].indexOf("35")>-1){
+ if(item["5_baojin"]>1){
+ item["6_class"]='divYellow';
+ }else{
+ item["4_shuliang"]==4?item["6_class"]='divGrenn':item["6_class"]='divnull';
+ }
+
+ }else{
+ item["6_class"]='divYellow';
+ }
+
+ }else{
+
+ //閽诲瓟 鍔犲伐涓績
+ item["4_shuliang"]==2?item["6_class"]='divGrenn':item["6_class"]='divnull';
+
+
+ }
+ }else{
+ item["6_class"]='divRed';
+ }
+ }
+ else{
+ if(item["1_connect_state"]=="宸茶繛鎺�"){
+ if(item["5_baojin"]>0){
+ item["6_class"]='divYellow';
+ }else{
+ if((item["0_machine_id"]==76)||(item["0_machine_id"]==77)||(item["0_machine_id"]==26)||(item["0_machine_id"]==53)){
+
+ item["6_class"]='divGrenn';
+ }else{
+ item["4_shuliang"]>0?item["6_class"]='divGrenn':item["6_class"]='divnull';}
+ }
+ }else{
+ item["6_class"]='divRed';
+ }
+
+ }
+
+ }
+ },
+ machineElectric(){
+ this.echarsInit()
+ },
+ machineWater(){
+ this.echarsInit1()
+ },
shuzu1(){
- this.dingdanxiangqing(),
- this.dingdanxiangqing1()
- }
-
- },
- async mounted(){
+ this.dingdanxiangqing(),
+ this.dingdanxiangqing1()
+ }
- let sql=""
- let flag=2
- sql="{call AXJ_dapingxianshi_dingdanshuju2('鍒囧壊')}"
- this.loadAjxss('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
-
- await setInterval(()=>{
-
- sql="{call AXJ_dapingxianshi_dingdanshuju2('鍒囧壊')}"
- this.interValLoadAjxs('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
- },5000)
-
+ },
+ async mounted(){
-
-
- }
-})
+ let sql=""
+ let flag=2
+ sql="{call AXJ_dapingxianshijiqishuju()}"
+ this.loadAjxss('澶у睆鏄剧ず',sql,flag,"shuzu")
+ sql="{call AXJ_dapingxianshi_dingdanshuju()}"
+ this.loadAjxss('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
+ sql="{call AXJ_a_largeScreen_sumelectric_select()}"
+ this.loadAjxss('澶у睆鎬荤數鑰楁暟鎹�',sql,flag,"machineElectric")
+ sql="{call AXJ_a_largeScreen_sumselect()}"
+ this.loadAjxss('澶у睆鎬昏兘鑰楁�绘暟鎹�',sql,flag,"shuzu2")
+ sql="{call AXJ_a_largeScreen_sumwater_select()}"
+ this.loadAjxss('澶у睆鎬绘按鑰楁暟鎹�',sql,flag,"machineWater")
+
+
+ await setInterval(()=>{
+
+ sql="{call AXJ_dapingxianshijiqishuju()}"
+ this.interValLoadAjxs('澶у睆鏄剧ず',sql,flag,"shuzu")
+ },5000)
+ await setInterval(()=>{
+
+ sql="{call AXJ_dapingxianshi_dingdanshuju()}"
+ this.interValLoadAjxs('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
+ },5000)
+ await setInterval(()=>{
+ sql="{call AXJ_a_largeScreen_sumelectric_select()}"
+ this.interValLoadAjxs('澶у睆鎬荤數鑰楁暟鎹�',sql,flag,"machineElectric")
+ },5000)
+ await setInterval(()=>{
+ sql="{call AXJ_a_largeScreen_sumselect()}"
+ this.interValLoadAjxs('澶у睆鎬昏兘鑰楁�绘暟鎹�',sql,flag,"shuzu2")
+ },5000)
+ await setInterval(()=>{
+ sql="{call AXJ_a_largeScreen_sumwater_select()}"
+ this.interValLoadAjxs('澶у睆鎬绘按鑰楁暟鎹�',sql,flag,"machineWater")
+ },5000)
+
+
+
+
+ }
+
+ })
+
--
Gitblit v1.8.0