海尔mes项目
parent: 59e7fbd7 | 补丁 | 提交 | ignore whitespace
wu
2024-12-31 1edefcae08fe7c8df6a177e5dbbc8ab8f8194187 
更改启动项目设置
19个文件已修改
1个文件已添加
6122 ■■■■■ 已修改文件
gmms/.classpath 1 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/.settings/org.eclipse.core.resources.prefs 1 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/allGlassflash.jsp 70 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/allGlassflashVice.jsp 4 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/dakongdaping.jsp 593 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/ganghuaxiapian.jsp 498 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/glassCut.jsp 486 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/jiagongzhongxin.jsp 728 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/mobiandaojiao.jsp 608 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/shuidao.jsp 689 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/siyinxian1.jsp 611 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/tiemotaizu.jsp 502 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/xiacijiance1.jsp 600 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/bigScreen/xiapianduiduo.jsp 715 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/js/components.js 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/js/global.js 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/login/quanxian.jsp 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gmms/WebContent/mysqlInsert/mysql_connect.jsp 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
nglib/.idea/encodings.xml 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
nglib/.idea/vcs.xml 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 gmms/.classpath


@@ -13,5 +13,6 @@


    </classpathentry>


    <classpathentry kind="con" path="org.eclipse.jst.j2ee.internal.web.container"/>


    <classpathentry kind="con" path="org.eclipse.jst.j2ee.internal.module.container"/>


    <classpathentry kind="lib" path="D:/Mes/s7connector-2.1.jar"/>


    <classpathentry kind="output" path="build/classes"/>


</classpath>




 gmms/.settings/org.eclipse.core.resources.prefs


@@ -1,6 +1,5 @@


eclipse.preferences.version=1


encoding//WebContent/bigScreen/allGlassflashVice.jsp=UTF-8


encoding//WebContent/bigScreen/dakongdaping.jsp=UTF-8


encoding//WebContent/bigScreen/glassStorage.jsp=UTF-8


encoding//WebContent/login/machinelistcontent.jsp=UTF-8


encoding//WebContent/mysqlInsert/getPicture.jsp=UTF-8




 gmms/WebContent/bigScreen/allGlassflash.jsp


@@ -50,11 +50,11 @@


        }


        #main1-1 {


            width: 100%;


            height: 50%;


            height: 25%;


        }


        #main1-2 {


            width: 100%;


            height: 50%;


            height: 25%;


        }


        #main3-1 {


            width: 50%;


@@ -81,12 +81,12 @@




        }


        #main1-1-1 {


            font-size: 35px;


            margin-top: 10%;


            font-size: 25px;


            margin-top: 2%;


        }


        #main1-2-1 {


            font-size: 35px;


            margin-top: 10%;


            font-size: 25px;


            margin-top: 2%;


        }


        #main3-1-1 {


            width: 100%;


@@ -1144,7 +1144,7 @@


</head>


<body>


    <div id="app" style="width: 1920px;height: 1080px;background-color: #7f817cdd;">


    <div id="header1"><span>海尔智家厨电莱阳工厂玻璃产线数字化显示</span></div>


    <div id="header1"><span>海尔智家厨电莱阳工厂玻璃产线</span></div>


        <div id="header">


            <div id="main1" v-for='items1 in shuzu1'>


                <div id="main1-1">当前订单号：


@@ -1152,6 +1152,12 @@


                </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['4_smallglass_sum']}}</div>


                </div>


                <div id="main1-2">当班完成数量：


                    <div id="main1-2-1">{{items1['2_smallglass_completed']}}    </div>


                </div>


            </div>


            <div id="main4"></div>


@@ -1355,7 +1361,18 @@


      },


      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=[];


@@ -1372,12 +1389,24 @@


                console.log(dianhao);


                this.val.title.text="总耗电(kw.h)"


                    this.val.series[0].itemStyle.color='rgb(84,112,198)'


                    this.val.xAxis[0].data=shijian;


                    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=[];


@@ -1390,8 +1419,8 @@


                }


                this.val.title.text="总耗水(m³)"


                    this.val.series[0].itemStyle.color='#00ff00'


                    this.val.xAxis[0].data=shijian;


                    this.val.series[0].data=dianhao;


                    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


            },


@@ -1399,14 +1428,14 @@


                let HisArr="";


                HisArr = this.$echarts.init(document.getElementById('main2'));


                let a = {


                    value: this.shuzu1[0]['2_smallglass_completed'],


                    value: 942,




                    name: "成品",


                    itemStyle: { color: '#53a2ff' }




                }


                let b = {


                    value: this.shuzu1[0]['4_smallglass_worn'],


                    value: 58,


                    name: "次品",


                    itemStyle: { color: 'darkseagreen' }




@@ -1416,6 +1445,7 @@


                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


@@ -1520,6 +1550,8 @@


        //             vals:"shuzu1"


        //         }


        //  this.shuzu1=await this.returnloadAjxss(canshu1);


		


 


        let sql=""


        let flag=2


        sql="{call AXJ_dapingxianshijiqishuju()}"


@@ -1567,21 +1599,7 @@








var datashijian=[];


 function shijian() {


     datashijian=[];


    var s=14;


    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);


        


        


    }


}




// function drawLine2(){






 gmms/WebContent/bigScreen/allGlassflashVice.jsp


@@ -1,12 +1,12 @@


<%@ page contentType="text/html;charset=UTF-8"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>


<html style="width:100%;height:100%;">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<title>大屏副屏</title>


<script src="../js/main.js"></script>


</head>


<body>


<body style="width:100%;height:100%;">


  <div id="app"   >


    <screen-photo :id="15" :intime="this.global.timer" 


        >




 gmms/WebContent/bigScreen/dakongdaping.jsp


@@ -1,308 +1,335 @@


<%@ page contentType="text/html;charset=UTF-8"%>




<%@ 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">  




<link rel="shortcut icon"  href="../img/3.ico" />


<title>打孔大屏</title>




<!-- Font Awesome -->


<link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">


<!-- Ionicons -->


<link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">


<!-- Theme style -->


<link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">


<link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">


<link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">


<style type="text/css">


@IMPORT url("../static/global/showtask/showtask.css");


</style>




<script>


    var contextPath = "${pageContext.request.contextPath}";


</script>




<link type="text/css" rel="stylesheet"


    href="../static/css/dataTables.bootstrap.css" />


<link type="text/css" rel="stylesheet"


    href="../static/css/dataTables.tableTools.css" />




<script src="../js/main.js"></script>








<script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>


<script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>


<script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>


<script type="text/javascript" src="../static/js/moment.js"></script>


<script type="text/javascript" src="../static/js/sucaijiayuan.js"></script>


<script type="text/javascript" src="../static/laydate/laydate.js"></script>


<script type="text/javascript" src="../static/util/utilAlert.js"></script>


<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">




<style>


    *{


        margin:0;


        padding:0;


    }


    #top{


        height:30%;


        display:flex;


    }


    #center{


        height:40%;


        display:flex;


    }


    #bottom{


        height:30%;


        display:flex;


    }


    .top_div{


        width:25%;


        height:100%;


    }


    .center_div{


        width:25%;


        height:100%;


        display:flex;


        flex-wrap: wrap;


    }


    .center_divs{


        width:50%;


        height:100%;


    }


    .center_div_details{


        height:50%;


        width:100%;


    }


    .bottom_div{


        width:25%;


        height:100%;


    }


    img{


        max-width: 100%;


        max-height: 100%;


        position: absolute;


        top: 0;


        left: 0;


        right: 0;


        bottom: 0;


        margin: auto;


    }


</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%;


        }








    </style>


<title>大屏显示</title>


</head>


<body>


    <div  id='app'  @mousemove="onmouseMove"  v-loading="loading" element-loading-background="white" style='background-color:#D5EAFF;width:100%;height: 100%;'>


        <div id="mains" v-show="this.global.pollingIndex==0">


            <parts-change></parts-change>


            <div id="top">


                <div class="top_div">


                    <!-- <img :src="arr[0]"> -->


                    <h2>打孔大屏</h2>


                </div>


                <div class="top_div" id="Histogram1"></div>


                <div class="top_div" id="Histogram2"></div>


                <div class="top_div"></div>


            </div>


            <div id="center">


                <div class="center_div">


                    <div class="center_div_details" id="Histogram5"></div>


                    <div class="center_div_details" id="Histogram6"></div>


                </div>


                    <div  style="width:100%;" class="center_divs">


                    <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>


                    </div>


                <div class="center_div">


                    <div class="center_div_details" id="Histogram7"></div>


                    <div class="center_div_details" id="Histogram8"></div>


                </div>


            </div>


            <div id="bottom">


                <div class="bottom_div"></div>


                <div class="bottom_div" id="Histogram3"></div>


                <div class="bottom_div" id="Histogram4"></div>


                <div class="bottom_div"></div>


            </div>


        </div>


        <screen-photo :id="4" :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>


    <script>


         Vue.prototype.$echarts = echarts


      Vue.prototype.$http= axios


      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,


                },


              },


    <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>


       




            ],


            series: [{


                name: '电耗',


                type: 'bar',


                barWidth: '80%',


                data: [220, 152, 200, 334, 390, 330, 220],


                itemStyle: {


                  color: 'rgb(180, 180, 180)'


                }


              },




            ]


          },


    






          tableHead: [{}],


          selectdate1: '',


          selectdate2: '',


          tableData: [{}],


          show: true,


          showGlassType: '',


          showGlassIndex: 0,


                machineElectric:[{}],


                machineWater:[{}],


                loading:true,


                arr:[]


<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>




        },


        methods: {


          echarsInit() {


<script>


Vue.prototype.$echarts = echarts;


Vue.prototype.$http= axios;


 let app = new Vue({


      el:'#app',


      mixins:[mixin],


      data:{


          shuzu:[{}],


          shuzu1:[{}],


          shuzu2:[{}],


          machineElectric:[{}],


            machineWater:[{}],




                    let HisArr=[]


		  


		  


		  


    


    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',


            }




                    for(let i=0;i<4;i++){


                        HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i+1)));


                    }


                    this.val.yAxis[0].name="电耗";


                    this.val.series[0].name='电耗(kw·h)'


                    for(let i in this.machineElectric){


                        this.val.title.text=this.machineElectric[i]["0_machine_name"]+"(kw·h)"


                        this.val.series[0].itemStyle.color='rgb(84,112,198)'


                        this.val.xAxis[0].data=this.machineElectric[i]["6_shijian"].split(',');


                        this.val.series[0].data=this.machineElectric[i]["5_jiqidianliang"].split(',');


                        HisArr[i].setOption(this.val);


                    }


                    this.loading=false


          },


                echarsInit1(){


                    let HisArr=[]


  },


  


  tooltip: {


    trigger: 'item',


    textStyle:{   


    }


  },


  legend: {


    // orient: 'vertical',


    left: 'left',


    textStyle:{   


        


    }


  },


  textStyle:{


    


  },


  series: [


    {




                    for(let i=0;i<4;i++){


                        HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i+5)));


                    }


                    this.val.yAxis[0].name="水耗";


                    this.val.series[0].name='水耗(m³)'


                    for(let i in this.machineWater){


                        this.val.title.text=this.machineWater[i]["0_machine_name"]+"(m³)"


                        this.val.series[0].itemStyle.color='#00ff00'


                        this.val.xAxis[0].data=this.machineWater[i]["6_shijian"].split(',');


                        this.val.series[0].data=this.machineWater[i]["5_jiqidianliang"].split(',');


                        HisArr[i].setOption(this.val);


                    }


                    this.loading=false


                }


        },


        computed: {


    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"


                 }


            }


        }




        },


            watch: {


                tableData(newVal){


                    newVal.forEach(element => {


                        this.arr.push(element['11_route'])


                    });


                },


                machineElectric(){


                    this.echarsInit()


                },


                machineWater(){


                    this.echarsInit1()


                }


    }


  ]


    },


		  


      },


      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


            },


        async mounted() {


                let sql=""


            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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      async mounted(){




        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)


		




                


                sql="{call AXJ_a_largeScreen_order_tableHead_select()}"


        await this.loadAjxss('大屏显示钻孔机器订单查询',sql,flag,"tableHead")


		 


      }




                await this.getTableData('钻孔') 


                await this.getMachineElectric('钻孔','3')


                await this.getMachineWater('钻孔','1')


                this.onmouseMove2();


})




        },




      })


    </script>




</script>


</body>


</html>




 gmms/WebContent/bigScreen/ganghuaxiapian.jsp


@@ -1,215 +1,335 @@


<%@ 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>




 gmms/WebContent/bigScreen/glassCut.jsp


@@ -1,173 +1,335 @@


<%@ 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">


<%@ page contentType="text/html;charset=UTF-8"%>




<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>




<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%;


        }








    </style>


<title>大屏显示</title>


</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="手动破损：">


    <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>


            


            <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() {


           


        </div>


       




          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 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>


<script>


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'


            },


            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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      async mounted(){




        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)


		




				


		 


      }




})








</script>


</body>


</html>




 gmms/WebContent/bigScreen/jiagongzhongxin.jsp


@@ -1,415 +1,335 @@


<%@ 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>


<%@ page contentType="text/html;charset=UTF-8"%>




  <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;


      font-size: 14px;


<html>


<head>




    }


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">




    body,


    html {


      width: 100%;


      height: 100%;


      background-color: #D5EAFF;




    }




    #wai {


      width: 100%;


      height: 100%;


      display: flex;


      flex-wrap: wrap;


      position: relative;


      margin: 0px;


      padding: 0px;


      justify-content: center;


    }




    .wai_zs {


      width: 50%;


      height: 49%;


      background-color: #D5EAFF;


      border-right: 1px solid white;


      border-bottom: 1px solid white;


    }




    .wai_ys {


      width: 49%;


      height: 49%;


      background-color: #D5EAFF;


      border-bottom: 1px solid white;


    }




    .wai_zx {


      width: 50%;


      height: 50%;


      background-color: #D5EAFF;


      border-right: 1px solid white;


    }




    .wai_yx {


      width: 49%;


      height: 50%;


      background-color: #D5EAFF;


    }






    .msgtab {


      width: 50%;


      height: 35%;


      border: 1px solid white;


      border-collapse: collapse;


      position: absolute;


      top: 33%;


      left: 25%;


    }




    /*   




  .one1,


  .one1 input {


    background-color: #F0FFFF;


  }




  .double1,


  .double1 input {


    background-color: #e1f0fd;


  }




  .msgtab tr th {


    color: white;


    white-space: nowrap;


    text-align: center;


    height: 20px;


    line-height: 20px;


    overflow: hidden;


  }




  .msgtab tr td {




    white-space: nowrap;


    text-align: center;


    height: 20px;


    line-height: 20px;


    overflow: hidden;


  } */




    #container {


      width: 50%;


      position: absolute;


      top: 17%;


    }








    #Histogram1 {


      width: 50%;


      height: 60%;


      position: relative;


      top: 39%;


      left: 0%


    }




    #Histogram2 {


      width: 50%;


      height: 60%;


      position: relative;


      top: -60%;


      left: 50%


    }




    #Histogram4{


      width: 50%;


      height: 60%;


      position: relative;


      top: -60%;


      left: 0%


    }




    #Histogram3 {


      width: 50%;


      height: 60%;


      position: relative;


      top: 39%;


      left: 50%


    }




    #Histogram6 {


      


      width: 50%;


      height: 58%;


      position: relative;


      top: 42%;


      left: 50%;


      top: -19%;


    }




    #Histogram5 {


      width: 50%;


      height: 60%;


      position: relative;


      left: 0%


    }






    #Histogram7 {


      width: 50%;


      height: 60%;


      position: relative;


      left: 50%


    }




    #Histogram8 {


      width: 50%;


      height: 58%;


      position: relative;


      top: -19%;


      left: 0%;


    }




    .centdv_time {


      color: white;


      width: 50%;


      height: 30%;


      position: relative;


      top: -71%;


      left: 0%;


    }




    .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);


    }


  </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="wai">


          <div class="wai_zs">


            <div id="Histogram1"></div>




            <div id="Histogram2"></div>


          </div>


          <div class="wai_ys">


            <div id="Histogram3"></div>




            <div id="Histogram4"></div>


          </div>


          <div class="wai_zx">


            <div id="Histogram5"></div>




            <div id="Histogram6"></div>


          </div>


          <div class="wai_yx">


            <div id="Histogram7"></div>




            <div id="Histogram8"></div>


          </div>




          <!-- <div class="centdv_time">


          <el-date-picker  style="float: center;margin-bottom: 0.3%;"


          v-model="selectDate"


          type="daterange"


          range-separator="至"


          start-placeholder="开始日期"


          end-placeholder="结束日期">


          </el-date-picker>


      


          <el-button type="primary" icon="el-icon-search"


            style="float: center;margin-left: 0.2%;margin-bottom: 0.3%;"


            >搜索</el-button>


          </div> -->


          <div class="msgtab">


            <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>


          </div>


        </div>


      </div>


      <screen-photo :id="6" :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: {


        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: [{}],


        selectDate: '',


        tableData: [{}],


        show: true,


        showGlassType: '',


        showGlassIndex: 0,


        machineElectric:[{}],


                machineWater:[{}],


                loading:true




      },


      methods: {


        echarsInit(type) {




          let HisArr=[]


          let datas=type==0?this.machineElectric:this.machineWater


          for(let i=0;i<datas.length;i++){


            if(type==0){


              HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+2)));


            }else{


              HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+1)));


            }


          }




          if(type==0){


            this.val.yAxis[0].name="电耗";


            this.val.series[0].name='电耗(kw·h)'


            this.val.series[0].itemStyle.color='rgb(84,112,198)'


          }else{


            this.val.yAxis[0].name="水耗";


            this.val.series[0].name='水耗(m³)'


            this.val.series[0].itemStyle.color='#00ff00'


          }


          let danwei=type==0?"(kw·h)":'(m³)'


          


          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);


          }




<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%;


            


        },


      },


      computed: {


        }


        #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%;




      },


      watch:{


                machineElectric(){


                    if(Object.keys(this.machineElectric[0]).length==0){


                        return 


                    }


                    this.echarsInit(0)


                    this.loading=false


                },


                machineWater(){


                    if(Object.keys(this.machineWater[0]).length==0){


                        return 


                    }


                    this.echarsInit(1)


                    this.loading=false


                }


        }


        #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%;


        }








    </style>


<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>


            <div id="main3">


                <div id="main4"></div>


                <div id="main2"></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/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:[{}],




		  


		  


		  


    


    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


            },


        async mounted() {


                let sql=""


            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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      async mounted(){




        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)


		




                


                sql="{call AXJ_a_largeScreen_order_tableHead_select()}"


        await this.loadAjxss('大屏加工中心订单查询',sql,flag,"tableHead")


                await this.getTableData('加工中心') // 磨边倒角


                await this.getMachineElectric('加工中心','1')


                await this.getMachineWater('加工中心','1')


        this.onmouseMove2()


        },


		 


      }




    })


})




  </script>




  </html>




</script>


</body>


</html>




 gmms/WebContent/bigScreen/mobiandaojiao.jsp


@@ -1,307 +1,335 @@


<%@ 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">


<%@ page contentType="text/html;charset=UTF-8"%>




<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">  


<link rel="shortcut icon"  href="../img/3.ico" />


<title>磨边倒角</title>


<!-- Font Awesome -->


<link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">


<!-- Ionicons -->


<link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">


<!-- Theme style -->


<link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">


<link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">


<link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">


<style type="text/css">


@IMPORT url("../static/global/showtask/showtask.css");


</style>




<script>


    var contextPath = "${pageContext.request.contextPath}";


</script>




<link type="text/css" rel="stylesheet"


    href="../static/css/dataTables.bootstrap.css" />


<link type="text/css" rel="stylesheet"


    href="../static/css/dataTables.tableTools.css" />




<script src="../js/main.js"></script>








<script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>


<script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>


<script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>


<script type="text/javascript" src="../static/js/moment.js"></script>


<script type="text/javascript" src="../static/js/sucaijiayuan.js"></script>


<script type="text/javascript" src="../static/laydate/laydate.js"></script>


<script type="text/javascript" src="../static/util/utilAlert.js"></script>


<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">




<style>


    *{


        margin:0;


        padding:0;


    }


    #top{


        height:37%;


        display:flex;


    }


    #center{


        height:26%;


        display:flex;


    }


    #bottom{


        height:37%;


        display:flex;


    }


    .top_div{


        width:33%;


        height:100%;


    }


    .center_divs{


        width:100%;


        height:100%;


    }


    .center_div_details{


        height:50%;


        width:100%;


    }


    .bottom_div{


        width:33%;


        height:100%;


    }


    img{


        max-width: 100%;


        max-height: 100%;


        position: absolute;


        top: 0;


        left: 0;


        right: 0;


        bottom: 0;


        margin: auto;


    }


    .photo{


        max-width: 80%;


        max-height: 80%;


		


    }


	


    .imga{


        position: relative;


    }


    #mains{


  height: 100%;


    width: 100%;


  padding: 0;


  margin: 0;


}


</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%;


        }








    </style>


<title>大屏显示</title>


</head>


<body>


    <div  id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white" style='background-color:#D5EAFF;width:100%;height: 100%;'>


        <div id="mains" v-show="this.global.pollingIndex==0">


            <parts-change></parts-change>


            <div id="top">


                <div class="top_div imga"><img class="photo" :src="arr[0]"></div>


                <div class="top_div" id="Histogram1">打孔机1水耗</div>


                <div class="top_div" id="Histogram2">打孔机1电耗</div>


            </div>


            <div id="center">


                    <div style="width:100%;" class="center_divs">


    <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>


       




                    <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>


                    </div>


            </div>


            <div id="bottom">


                <div class="bottom_div imga"><img class="photo" :src="arr[0]"></div>


                <div class="bottom_div" id="Histogram3">打孔机2水耗</div>


                <div class="bottom_div" id="Histogram4">打孔机2电耗</div>


            </div>


        </div>


        <screen-photo :id="3" :intime="this.global.timer" 


            v-show="this.global.pollingIndex==1"


        >


        <parts-change-all 


                :machinetype="'磨边倒角'" 


                v-show="this.global.pollingIndex==2">


        </parts-change-all>


        </screen-photo> 


    </div>


    <script>


        Vue.prototype.$echarts = echarts


    Vue.prototype.$http= axios


      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: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],


              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: 'white'


                }


              },




            ]


          },


    






          tableHead: [{}],


          selectdate1: '',


          selectdate2: '',


          tableData: [{}],


          show: true,


          showGlassType: '',


          showGlassIndex: 0,


                machineElectric:[{}],


                machineWater:[{}],


                loading:true,


                arr:[]


        },


        methods: {


          echarsInit(type) {


<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>




                    let HisArr=[]


                    let datas=type==0?this.machineElectric:this.machineWater


                    for(let i=0;i<2;i++){


                        if(type==0){


                            HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+2)));


                        }else{


                            HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+1)));


                        }


						


                    }


                    if(type==0){


                        this.val.yAxis[0].name="电耗";


                        this.val.series[0].name='电耗(kw·h)'


                        this.val.series[0].itemStyle.color='rgb(84,112,198)'


                    }else{


                        this.val.yAxis[0].name="水耗";


                        this.val.series[0].name='水耗(m³)'


                        this.val.series[0].itemStyle.color='#00ff00'


                    }


                    let danwei=type==0?"(kw·h)":'(m³)'


                    for(let i in datas){


                        if(i>1){


                            return


                        }


                        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);


                    }


<script>


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'


            },


            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




                    


						


                },


        },


        computed: {




        },


            watch:{


                tableData(newVal){


                    newVal.forEach(element => {


                        this.arr.push(element['11_route'])


                    });


                },


                machineElectric(){


                    if(Object.keys(this.machineElectric[0]).length==0){


                        return 


                    }


                    this.echarsInit(0)


                    this.loading=false


                },


                machineWater(){


                    if(Object.keys(this.machineWater[0]).length==0){


                        return 


                    }


                    this.echarsInit(1)


                    this.loading=false


                }


                    HisArr.setOption(this.val1);


                this.loading=false


            },


        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('磨边倒角','2')


                await this.getMachineWater('磨边倒角','1')


                this.onmouseMove2()


        },


            dingdanxiangqing1(){


                let HisArr="";


                HisArr = this.$echarts.init(document.getElementById('main4'));


                let a = {


                    value: this.shuzu1[0]['2_smallglass_completed'],




      })


    </script>


                    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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      async mounted(){




        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)


		




				


		 


      }




})








</script>


</body>


</html>




 gmms/WebContent/bigScreen/shuidao.jsp


@@ -1,408 +1,335 @@


<%@ 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>


<%@ page contentType="text/html;charset=UTF-8"%>




  <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;


      font-size: 14px;


<html>


<head>




    }


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">




    body,


    html {


      width: 100%;


      height: 100%;


      background-color: #D5EAFF;


<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%;




    #wai {


      width: 100%;


      height: 100%;


      display: flex;


      flex-wrap: wrap;


      position: relative;


      margin: 0px;


      padding: 0px;


      justify-content: center;


    }


        }


        #main4-2 {


            width: 100%;


            height: 30%;




    .wai_zs {


      width: 50%;


      height: 49%;


      background-color: #D5EAFF;


      border-right: 1px solid white;


      border-bottom: 1px solid white;


    }


        }


        #main4-3 {


            width: 100%;


            height: 30%;




    .wai_ys {


      width: 49%;


      height: 49%;


      background-color: #D5EAFF;


      border-bottom: 1px solid white;


    }




    .wai_zx {


      width: 50%;


      height: 50%;


      background-color: #D5EAFF;


      border-right: 1px solid white;


    }




    .wai_yx {


      width: 49%;


      height: 50%;


      background-color: #D5EAFF;


    }






    .msgtab {


      width: 50%;


      height: 35%;


      border: 1px solid white;


      border-collapse: collapse;


      position: absolute;


      top: 33%;


      left: 25%;


    }




    /*   




  .one1,


  .one1 input {


    background-color: #F0FFFF;


  }




  .double1,


  .double1 input {


    background-color: #e1f0fd;


  }




  .msgtab tr th {


    color: white;


    white-space: nowrap;


    text-align: center;


    height: 20px;


    line-height: 20px;


    overflow: hidden;


  }




  .msgtab tr td {




    white-space: nowrap;


    text-align: center;


    height: 20px;


    line-height: 20px;


    overflow: hidden;


  } */




    #container {


      width: 50%;


      position: absolute;


      top: 17%;


    }


        }


        #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%;


        }








    #Histogram1 {


      width: 50%;


      height: 60%;


      position: relative;


      top: 39%;


      left: 0%


    }




    #Histogram2 {


      width: 50%;


      height: 60%;


      position: relative;


      top: -60%;


      left: 50%


    }




    #Histogram4{


      width: 50%;


      height: 60%;


      position: relative;


      top: -60%;


      left: 0%


    }




    #Histogram3 {


      width: 50%;


      height: 60%;


      position: relative;


      top: 39%;


      left: 50%


    }




    #Histogram6 {


      


      width: 50%;


      height: 58%;


      position: relative;


      top: 42%;


      left: 50%;


      top: -19%;


    }




    #Histogram5 {


      width: 50%;


      height: 60%;


      position: relative;


      left: 0%


    }






    #Histogram7 {


      width: 50%;


      height: 60%;


      position: relative;


      left: 50%


    }




    #Histogram8 {


      width: 50%;


      height: 58%;


      position: relative;


      top: -19%;


      left: 0%;


    }




    .centdv_time {


      color: white;


      width: 50%;


      height: 30%;


      position: relative;


      top: -71%;


      left: 0%;


    }




    .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);


    }


  </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="wai">


          <div class="wai_zs">


            <div id="Histogram1"></div>




            <div id="Histogram2"></div>


          </div>


          <div class="wai_ys">


            <div id="Histogram3"></div>




            <div id="Histogram4"></div>


          </div>


          <div class="wai_zx">


            <div id="Histogram5"></div>




            <div id="Histogram6"></div>


          </div>


          <div class="wai_yx">


            <div id="Histogram7"></div>




            <div id="Histogram8"></div>


          </div>




          <!-- <div class="centdv_time">


          <el-date-picker  style="float: center;margin-bottom: 0.3%;"


          v-model="selectDate"


          type="daterange"


          range-separator="至"


          start-placeholder="开始日期"


          end-placeholder="结束日期">


          </el-date-picker>


      


          <el-button type="primary" icon="el-icon-search"


            style="float: center;margin-left: 0.2%;margin-bottom: 0.3%;"


            >搜索</el-button>


          </div> -->


          <div class="msgtab">


            <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>


          </div>


    </style>


<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>


            <div id="main3">


                <div id="main4"></div>


                <div id="main2"></div>


            </div>


            


           


        </div>


      </div>


       




      <screen-photo :id="5" :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: ['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,


              },


<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>


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'


            },


            subtextStyle:{


                fontFamily : "微软雅黑",


                color:'#6c7a89',


            }




          ],


          series: [


            {


              name: '水耗',


              type: 'bar',


              barWidth: '80%',


              data: [10, 52, 200, 334, 390, 330, 220],


              itemStyle: { color: '#5CADFE' }


            },


  },


  


  tooltip: {


    trigger: 'item',


    textStyle:{   


    }


  },


  legend: {


    // orient: 'vertical',


    left: 'left',


    textStyle:{   


        


    }


  },


  textStyle:{


    


  },


  series: [


    {




          ]


        },








        tableHead: [{}],


        selectDate: '',


        tableData: [{}],


    type: 'pie',


    radius : ['40%','70%'],


    center: ['50%', '50%'],


    minAngle:'15',


    label: {


        // position: 'inside',


        show: true,


        showGlassType: '',


        showGlassIndex: 0,


        machineElectric:[{}],


                machineWater:[{}],


                loading:true




      },


      methods: {


        echarsInit(type) {


          let HisArr=[]


          let datas=type==0?this.machineElectric:this.machineWater


          for(let i=0;i<datas.length;i++){


            if(type==0){


              HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+2)));


            }else{


              HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+1)));


        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"


                 }


            }


          }


        }




          if(type==0){


            this.val.yAxis[0].name="电耗";


            this.val.series[0].name='电耗(kw·h)'


            this.val.series[0].itemStyle.color='rgb(84,112,198)'


          }else{


            this.val.yAxis[0].name="水耗";


            this.val.series[0].name='水耗(m³)'


            this.val.series[0].itemStyle.color='#00ff00'


          }


          let danwei=type==0?"(kw·h)":'(m³)'


          


          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: {


    }


  ]


    },


		  


      },


      methods:{


		 


            dingdanxiangqing(){


                let HisArr="";


                HisArr = this.$echarts.init(document.getElementById('main2'));


                let a = {


                        value: this.shuzu1[0]['6_qualified'],




      },


      watch:{


                machineElectric(){


                    if(Object.keys(this.machineElectric[0]).length==0){


                        return 


                    }


                    this.echarsInit(0)


                    this.loading=false


                },


                machineWater(){


                    if(Object.keys(this.machineWater[0]).length==0){


                        return 


                    }


                    this.echarsInit(1)


                    this.loading=false


                }


                        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


            },


        async mounted() {


                let sql=""


            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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      async mounted(){




        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)


		




                


                sql="{call AXJ_a_largeScreen_order_tableHead_select()}"


        await this.loadAjxss('大屏显示水刀机器订单查询',sql,flag,"tableHead")


                await this.getTableData('水刀') // 磨边倒角


                await this.getMachineElectric('水刀','3')


                await this.getMachineWater('水刀','1')


        this.onmouseMove()


        },


		 


      }




    })


})




  </script>




  </html>




</script>


</body>


</html>




 gmms/WebContent/bigScreen/siyinxian1.jsp


@@ -1,321 +1,344 @@


<%@ 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">


<%@ page contentType="text/html;charset=UTF-8"%>




<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>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">




<style>


  body {


    height: 100%;


    width: 100%;


    flex-wrap: nowrap;


  }


      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%;




  .page-scroll {


    height: 100%;


  }


        }


        #main4-1 {


            width: 100%;


            height: 30%;




  .page-scroll .el-scrollbar__wrap {


    overflow-x: hidden;


  }


        }


        #main4-2 {


            width: 100%;


            height: 30%;




  .el-table__header {


    height: 20%;


        }


        #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%;


        }




  #app {


    width: 100%;


    height: 100%;


  }




  #app1 {


    width: 60%;


    position: absolute;


    left: 2%;


    top: 3%;


  }




  #youtu {


    height: 50%;


    width: 30%;


    position: absolute;


    right: 2%;


    top: 2%;


    text-align: center;


    line-height: 275px;


  }




  #time {


    height: 50%;


    width: 30%;


    position: absolute;


    top: 50%;


  }




  #har {


    width: 99%;


    position: absolute;


    height: 2%;


    top: 53%;


    background-color: darkgrey;


  }




  #app2 {


    width: 96%;


    height: 36%;


    position: absolute;


    left: 2%;


    top: 62%;


  }




  .chart-wrap {


    width: 50%;


    height: 100%;


    float: left;


  }




  #time {


    width: 50%;


    height: 5%;


    position: absolute;


    left: 2%;


    top: 35%;


  }




  #time2 {


    width: 50%;


    height: 10%;


    position: absolute;


    left: 2%;


    top: 42%;


  }


</style>




    </style>


<title>大屏显示</title>


</head>


<body>


  <div id='app' @mousemove="onmouseMove"  v-loading="loading" element-loading-background="white">


    <div id="mains" v-show="this.global.pollingIndex==0">


      <div id='app1' style="width: 60%;height:33%;float: right;padding: 0;background-color: white;">


          <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>


        


      </div>


      <div id='time'>


        <div style="margin-top: 5%;height: 3%;">


          当前进度：<el-progress :text-inside="true" :stroke-width="26" :percentage="ratio"></el-progress>


    <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>


      <div id='youtu'>


        <img class="imgCenter" alt="" :src="tableData[0]['11_route']">


      </div>


      <div id='har'></div>


      <div id='app2' >


        <!-- <show-table :tablehead="tableHead2" :tabledata="tableData2"></show-table> -->


        <div id="chart-wrap0" class="chart-wrap"></div>


        <div id="chart-wrap1" class="chart-wrap"></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: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],


          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)'


            }


          },


<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>




        ]


      },


      machineLocal:<%=  request.getParameter("local")%>,


      machineScreen:null,




      tableHead: [{}],


      selectdate1: '',


      selectdate2: '',


      tableData: [{}],


      show: true,


      showGlassType: '',


      showGlassIndex: 0,


      machineElectric:[{}],


<script>


Vue.prototype.$echarts = echarts;


Vue.prototype.$http= axios;


 let app = new Vue({


      el:'#app',


      mixins:[mixin],


      data:{


          shuzu:[{}],


          shuzu1:[{}],


          shuzu2:[{}],


          machineElectric:[{}],


            machineWater:[{}],


      loading:true,


      ratio:0


            type:'',


			


		  


		  


		  


    


    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',


            }




    },


    methods: {


      echarsInit(type) {


        let HisArr=[]


        let datas=type==0?this.machineElectric:this.machineWater


        for(let i=0;i<datas.length;i++){


          if(i>1){


            break


          }


          if(type==0){


            HisArr[i] = this.$echarts.init(document.getElementById('chart-wrap'+i));


          }else{


            HisArr[i] = this.$echarts.init(document.getElementById('chart-wrap'));


          }


        }


        if(type==0){


          this.val.yAxis[0].name="电耗";


          this.val.series[0].name='电耗(kw·h)'


          this.val.series[0].itemStyle.color='rgb(84,112,198)'


        }else{


          this.val.yAxis[0].name="水耗";


          this.val.series[0].name='水耗(m³)'


          this.val.series[0].itemStyle.color='#00ff00'


        }


        let danwei=type==0?"(kw·h)":'(m³)'




        for(let i in datas){


          if(i>1){


            break


          }


          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:{


      machineElectric(){


        if(Object.keys(this.machineElectric[0]).length==0){


          return 


        }


  },


  


  tooltip: {


    trigger: 'item',


    textStyle:{   


    }


  },


  legend: {


    // orient: 'vertical',


    left: 'left',


    textStyle:{   


        


        this.echarsInit(0)


        this.loading=false


      },


      tableHead(newVal,oldVal){


        delete newVal[0]['7_parts_change']


        delete newVal[0]['0_machine_name']


    }


  },


  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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      async mounted(){


        let type=''


        let machineLocal=<%=  request.getParameter("local")%>


        if (machineLocal==0) {


            type='丝印1'


        }else{


            type='丝印2'


        }


        let sql=""


        let flag=2


        sql="{call AXJ_dapingxianshi_dingdanshuju2('"+type+"')}"


        this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")   


		


           


        await setInterval(()=>{


            


                sql="{call AXJ_dapingxianshi_dingdanshuju2('"+type+"')}"


                this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")


            },5000)


		




				


		 


        


        newVal[0]['8_ratio']='直通率'


        //newVal[0]['9_work_state']='状态'


      },


      tableData(){


        this.ratio=this.tableData[0]['8_ratio']*1


        


      }


    },


    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('丝印','5')


      this.onmouseMove()


      }




    },


    created() {


      switch (this.machineLocal) {


        case 0:


          this.machineScreen=8


          break;


        case 1:


          this.machineScreen=8


          break;


      }


    },




  })


})








 


</script>






</body>


</html>




 gmms/WebContent/bigScreen/tiemotaizu.jsp


@@ -1,213 +1,335 @@


<%@ 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 v-show="this.global.pollingIndex==0" id="mains">


            <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="13" :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=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);


            }  


     },


						


    },


    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=""


        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('贴膜','6')


        let timer1=await setInterval(()=>{


            sql="{call AXJ_a_largeScreen_orderRatio_tableData_select()}"


            this.interValLoadAjxs('贴膜以及钢化大屏比例数据',sql,flag,"orderData",timer1)


        },5000)


        this.onmouseMove()


				


    }


});     


</script>


            


        },


      async mounted(){




        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)


		




				


		 


      }




})








</script>


</body>


</html>




 gmms/WebContent/bigScreen/xiacijiance1.jsp


@@ -1,304 +1,346 @@


<%@ 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">


<%@ page contentType="text/html;charset=UTF-8"%>




<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>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">




<style>


*{


  padding: 0;


    margin: 0;


}


  body {


    height: 100%;


    width: 100%;


    flex-wrap: nowrap;


  }


      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%;




  .page-scroll {


    height: 100%;


  }


        }


        #main4-1 {


            width: 100%;


            height: 30%;




  .page-scroll .el-scrollbar__wrap {


    overflow-x: hidden;


  }


        }


        #main4-2 {


            width: 100%;


            height: 30%;




  .el-table__header {


    height: 20%;


        }


        #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%;


        }




  #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>




    </style>


<title>大屏显示</title>


</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='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 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="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,


              },


    






<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>


Vue.prototype.$echarts = echarts;


Vue.prototype.$http= axios;


 let app = new Vue({


      el:'#app',


      mixins:[mixin],


      data:{


          shuzu:[{}],


          shuzu1:[{}],


          shuzu2:[{}],


          machineElectric:[{}],


            machineWater:[{}],


            type:'',


			


		  


		  


		  


    


    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',


            }




          ],


          series: [


            {


              name: '水耗',


              type: 'bar',


              barWidth: '80%',


              data: [10, 52, 200, 334, 390, 330, 220],


              itemStyle: { color: '#5CADFE' }


            },


  },


  


  tooltip: {


    trigger: 'item',


    textStyle:{   


    }


  },


  legend: {


    // orient: 'vertical',


    left: 'left',


    textStyle:{   


        


    }


  },


  textStyle:{


    


  },


  series: [


    {




          ]


        },




      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






    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 + '%)';


        }


    },


    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);


          }  


      },


    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"


                 }


            }


        }




    }


  ]


    },


    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


		  


      },


      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


            },


      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')


            dingdanxiangqing1(){


                let HisArr="";


                HisArr = this.$echarts.init(document.getElementById('main4'));


                let a = {


                    value: this.shuzu1[0]['2_smallglass_completed'],




      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) 


      


                    name: "已完成",


                    itemStyle: { color: '#53a2ff' },


                    label:{fontSize:30}


                




      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;


        //


      }


    },


                }


                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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      async mounted(){


        let type=''


        let machineLocal=<%=  request.getParameter("local")%>


        if (machineLocal==0) {


            type='瑕疵1'


        }else if(machineLocal==1){


            type='瑕疵2'


        }else if(machineLocal==2){


            type='瑕疵3'


        }


        let sql=""


        let flag=2


        sql="{call AXJ_dapingxianshi_dingdanshuju2('"+type+"')}"


        this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")   


		


           


        await setInterval(()=>{


            


                sql="{call AXJ_dapingxianshi_dingdanshuju2('"+type+"')}"


                this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")


            },5000)


		




				


		 


        


      }




})








</script>






</body>


</html>




 gmms/WebContent/bigScreen/xiapianduiduo.jsp


@@ -1,422 +1,335 @@


<%@ 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>


<%@ page contentType="text/html;charset=UTF-8"%>




  <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;


<html>


<head>




<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,


    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">


                当前生产信息：


                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                等待托盘数：


                &nbsp;&nbsp;&nbsp;&nbsp;


                已完工托盘数：




              </div>




              <div class="msgtab">


                <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>


              </div>


    </style>


<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>


            <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 id="main3">


                <div id="main4"></div>


                <div id="main2"></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+"%";


          


<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>




        },


        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")


        }


<script>


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'


            },


            subtextStyle:{


                fontFamily : "微软雅黑",


                color:'#6c7a89',


            }




  },


  


  tooltip: {


    trigger: 'item',


    textStyle:{   


    }


  },


  legend: {


    // orient: 'vertical',


    left: 'left',


    textStyle:{   


        


      },


      computed: {


    }


  },


  textStyle:{


    


  },


  series: [


    {




      },


      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()


    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 + '%)';


        }


      },


      async mounted () {


    },


    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:{


			


            shuzu1(){


                this.dingdanxiangqing(),


                this.dingdanxiangqing1()


            }


            


        },


      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_dapingxianshi_dingdanshuju2('下片')}"


        this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")     


           


        await setInterval(()=>{


            


                sql="{call AXJ_dapingxianshi_dingdanshuju2('下片')}"


                this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")


            },5000)


		




        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>


</script>


</body>


</html>




 gmms/WebContent/js/components.js


@@ -184,7 +184,7 @@


  props: ['id','intime'],


  // 同样也可以在 vm 实例中像 "this.message" 这样使用


  template: `<div  style='width:100%;height:100%;max-width=100%;max-height=100%;position: relative;'>


              <img class="imgCenter" :src="url"/>


              <img style="width:100%;height:100%;" class="imgCenter" :src="url"/>


            </div>`,


  mixins: [mixin],


  data(){




 gmms/WebContent/js/global.js


@@ -1,7 +1,7 @@


Vue.prototype.global={


  polling:null,


  pollingIndex:0,


  timer:5000,//触发定时器时间


  timer:10000,//触发定时器时间


  errorFlag:0,


  val: {


    title:{




 gmms/WebContent/login/quanxian.jsp


@@ -77,7 +77,7 @@


                 css.setString(1, id);


                 css.setInt(2, mid);


                 css.setString(3, cn);


               css.setString(4, request.getRemoteAddr());


                 css.setString(4, request.getRemoteAddr());


                 ResultSet rss = css.executeQuery();


                 while(rss.next()){


                     String caidanname=rss.getString(1);




 gmms/WebContent/mysqlInsert/mysql_connect.jsp


@@ -11,7 +11,7 @@




    <%


//连接数据库


String ip="localhost:3307";


String ip="localhost:3306";


 String driverClass = "com.mysql.cj.jdbc.Driver";


String url="jdbc:mysql://"+ip+"/gmms?serverTimezone=GMT%2B8";


String user = "root"; 




 nglib/.idea/encodings.xml


@@ -4,5 +4,7 @@


    <file url="file://$PROJECT_DIR$/src/builder/HttpHandlerDemo.java" charset="GBK" />


    <file url="file://$PROJECT_DIR$/src/builder/MachineManager.java" charset="GBK" />


    <file url="file://$PROJECT_DIR$/src/builder/Manager.java" charset="GBK" />


    <file url="file://$PROJECT_DIR$/src/toTcp/TCPClient.java" charset="GBK" />


    <file url="PROJECT" charset="GBK" />


  </component>


</project>




 nglib/.idea/vcs.xml


New file


@@ -0,0 +1,6 @@


<?xml version="1.0" encoding="UTF-8"?>


<project version="4">


  <component name="VcsDirectoryMappings">


    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />


  </component>


</project>