Haier_MES_II.git

parent: 1d0a4978 | 补丁 | 提交 | ignore whitespace

2025-04-07 ab05daf1e18f13aa7b0744b1674d770e543231a2

大屏显示前端页面更新

4个文件已修改

1个文件已添加

	gmms/WebContent/bigScreen/glassCut.jsp	652 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/bigScreen/twoglassCut.jsp	442 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/bigScreen/xiapianduiduo.jsp	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/login/run.jsp	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/mysqlInsert/mysql_connect.jsp	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 gmms/WebContent/bigScreen/glassCut.jsp

@@ -3,62 +3,78 @@
<html>
<head>

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

<style>
      html,body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #header1 {
    <style>
        html,body{
            width: 100%;
            height: 7%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #header1 {
            width: 100%;
            height: 5%;
            background-color: white;
            display: inline-block;
                text-align: center;
               font-size: 50px;
            text-align: center;
            font-size: 50px;
        }
        #header {
            width: 100%;
            height: 90%;
            height: 28%;
            background-color: white;
            display: flex;
            text-align: center;
            margin-top: 2%;
        }
        #footer {
            width: 100%;
            height: 70%;
            
            height: 60%;
            display: flex;
        }
        #main1 {
                width: 100%;
    height: 30%;
    display: flex;
        }
        #main3 {
            width: 100%;
            height: 70%;
            height: 30%;
            display: flex;
        }
        #main2 {
            width: 50%;
            height: 100%;
            
            width: 20%;
            height: 400px;
        }
        #main4 {
            margin-left: 5%;
            width: 20%;
            height: 400px;
        }
        #main3 {
            width: 50%;
            height: 100%;
            display: flex;
        }
        #main1-1 {
            width: 100%;
            height: 25%;
            font-size: 40px;
            height: 100%;
            margin: 5px;
            background-color: #00a7d0;
        }
        #main1-2 {
            width: 100%;
            height: 25%;
            font-size: 50px;
            height: 100%;
            margin: 5px;
            background-color: #00a7d0;
        }
        #main1-3 {
            width: 100%;
            height: 100%;
            margin: 5px;
            background-color: #00a7d0;
        }
        #main1-4 {
            width: 100%;
            height: 100%;
            margin: 5px;
            background-color: #00a7d0;
        }
        #main3-1 {
            width: 50%;
@@ -69,27 +85,13 @@
            height: 100%;

        }
        #main4-1 {
            width: 100%;
            height: 30%;

        }
        #main4-2 {
            width: 100%;
            height: 30%;

        }
        #main4-3 {
            width: 100%;
            height: 30%;

        }
        #main1-1-1 {
            font-size: 50px;
            font-size: 40px;
            margin-top: 2%;
        }
        #main1-2-1 {
            font-size: 50px;
            font-size: 40px;
            margin-top: 2%;
        }
        #main3-1-1 {
@@ -98,7 +100,7 @@
        }
        #main3-1-2 {
            width: 100%;
            height: 80%;
            height: 50%;
        }
        #main3-2-1 {
            width: 100%;
@@ -106,227 +108,451 @@
        }
        #main3-2-2 {
            width: 100%;
            height: 80%;
            height: 50%;
        }



    </style>
<title>大屏显示</title>
    <title>大屏显示</title>
</head>
<body>
    <div id="app" style="width: 99%;height: 99%;background-color: white;">
    <div id="header1" v-for='items1 in shuzu1'><span>{{items1['5_machineType']}}工序</span></div>
        <div id="header">
            <div id="main1" v-for='items1 in shuzu1'>
                <div id="main1-1">当前订单号：
                  <div id="main1-1-1" >{{items1['0_order_id']}}</div>
                </div>
                <div id="main1-2">当前产品号：
                  <div id="main1-2-1">{{items1['1_recipe_no']}}</div>
                </div>
          <div id="main1-2">当班计划数量：
                    <div id="main1-2-1">{{items1['8_smallglass_sum']}}</div>
                </div>
                <div id="main1-2">当班完成数量：
                    <div id="main1-2-1">{{items1['2_smallglass_completed']}}    </div>
                </div>
<div id="app" style="width: 1920px;height: 100%;background-color: white;">
    <div id="header1"><span>海尔智家厨电莱阳工厂玻璃产线二期</span></div>
    <div id="header">
        <div id="main1" v-for='items1 in shuzu1'>
            <div id="main1-1">当前订单号：
                <div id="main1-1-1" >{{items1['0_order_id']}}</div>
            </div>
            <div id="main3">
                <div id="main4"></div>
                <div id="main2"></div>
            <div id="main1-2">当前产品号：
                <div id="main1-2-1">{{items1['1_recipe_no']}}</div>
            </div>
            
           
            <div id="main1-3">当班计划数量：
                <div id="main1-2-1">{{items1['4_smallglass_sum']}}</div>
            </div>
            <div id="main1-4">当班完成数量：
                <div id="main1-2-1">{{items1['2_smallglass_completed']}}    </div>
            </div>
        </div>
       

    
    </div>
    <div id="footer">
        <div id="main4"></div>
        <div id="main2"></div>
        <div id="main3">
            <div id="main3-1">
                <div id="main3-1-1">总耗电：<span>{{shuzu2[0]['0_@jiqidianliang']}}kw</span></div>
                <div id="main3-1-2"></div>
            </div>
            <div id="main3-2">
                <div id="main3-2-1">总耗水：<span>{{shuzu2[0]['1_@jiqidianliang1']}}m³</span></div>
                <div id="main3-2-2"></div>
            </div>
        </div>
    </div>
</div>



<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/mixins.js"></script>
<script src="../js/echarts.min.js"></script>

<script>
Vue.prototype.$echarts = echarts;
Vue.prototype.$http= axios;
 let app = new Vue({
      el:'#app',
      mixins:[mixin],
      data:{
          shuzu:[{}],
          shuzu1:[{}],
          shuzu2:[{}],
          machineElectric:[{}],
            machineWater:[{}],
    Vue.prototype.$echarts = echarts;
    Vue.prototype.$http= axios;
    let app = new Vue({
        el:'#app',
        mixins:[mixin],
        data:{
            shuzu:[{}],
            shuzu1:[{}],
            shuzu2:[{}],
            machineElectric:[{}],
            machineWater:[{}],

		  
		  
		  
    
    val1: {
          borderColor:'#082352',
  title: {
    // text: '成品库存',
    // left: '290px',
    // top: '0px'
    text:'合格率',//主标题文本
            left:'center',
            top:'45%',
            left:'50%',
            textStyle:{
            color:'#454c5c',
            align:'center'



            val: {
                title:{
                    text:'',
                    left:'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [],
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(30, 144, 255)'
                        }
                    },
                    axisLabel: {
                        color: 'rgb(30, 144, 255)'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgb(30, 144, 255)',
                            type: 'dashed'
                        }
                    }
                }],
                yAxis: [{
                    type: "value",
                    name: "能耗",
                    nameTextStyle: {
                        color: "rgb(30, 144, 255)",
                        fontSize: 12,
                        padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
                    },
                    splitLine: {
                        // 网格线
                        show: false,
                        lineStyle: { //分割线
                            color: "rgb(180, 180, 180)",
                            width: 1,
                            type: "dashed" //dotted：虚线 solid:实线
                        }
                    },
                    axisLabel: {
                        // 轴文字
                        color: "rgb(30, 144, 255)",
                        fontSize: 12,
                    },
                },

                ],
                series: [{
                    name: '电耗',
                    type: 'bar',
                    barWidth: '80%',
                    data: [220, 152, 200, 334, 390, 330, 220],
                    itemStyle: {
                        color: 'rgb(180, 180, 180)'
                    }
                },

                ]
            },
            subtextStyle:{
                fontFamily : "微软雅黑",
                color:'#6c7a89',
            }
            val1: {
                borderColor:'#082352',
                title: {
                    // text: '成品库存',
                    // left: '290px',
                    // top: '0px'
                    text:'合格率',//主标题文本
                    left:'center',
                    top:'45%',
                    left:'40%',
                    textStyle:{
                        color:'#454c5c',
                        align:'center'
                    },
                    subtextStyle:{
                        fontFamily : "微软雅黑",
                        color:'#6c7a89',
                    }

  },
  
  tooltip: {
    trigger: 'item',
    textStyle:{   
    }
  },
  legend: {
    // orient: 'vertical',
    left: 'left',
    textStyle:{   
        
    }
  },
  textStyle:{
    
  },
  series: [
    {
                },

    type: 'pie',
    radius : ['40%','70%'],
    center: ['50%', '50%'],
    minAngle:'15',
    label: {
        // position: 'inside',
        show: true,
        formatter(param) {
          // correct the percentage
          return param.name + ' (' + param.percent + '%)';
        }
    },
    data: [
        { value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
        { value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
    ],
      itemStyle: {
        normal:{
        label:{
            show:true,
                //formatter: "{b} :\n  {c} \n ({d}%)",
                formatter: "{b} :\n   ({d}%)",
                    position:"inner"
                 }
            }
        }
                tooltip: {
                    trigger: 'item',
                    textStyle:{
                    }
                },
                legend: {
                    // orient: 'vertical',
                    left: 'left',
                    textStyle:{

    }
  ]
    },
		  
      },
      methods:{
		 
                    }
                },
                textStyle:{

                },
                series: [
                    {

                        type: 'pie',
                        radius : ['40%','70%'],
                        center: ['50%', '50%'],
                        minAngle:'15',
                        label: {
                            // position: 'inside',
                            show: true,
                            formatter(param) {
                                // correct the percentage
                                return param.name + ' (' + param.percent + '%)';
                            }
                        },
                        data: [
                            { value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
                            { value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
                        ],
                        //   emphasis: {
                        //     itemStyle: {
                        //       shadowBlur: 10,
                        //       shadowOffsetX: 0,
                        //       shadowColor: 'rgba(0, 0, 0, 0.5)'
                        //     }
                        //   }
                        itemStyle: {
                            normal:{
                                label:{
                                    show:true,
                                    //formatter: "{b} :\n  {c} \n ({d}%)",
                                    formatter: "{b} :\n   ({d}%)",
                                    position:"inner"
                                }
                            }
                        }

                    }
                ]
            },

        },
        methods:{
            echarsInit() {
                var datashijian=[];
                var s=7;
                while(s>0){
                    s=s-1;

                    var date_day7=new Date(Date.parse(new Date())-s*24*60*60*1000);

                    var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
                    datashijian.push(day7);


                }
                let HisArr="";
                let dianhao=[];
                let shijian=[];


                HisArr = this.$echarts.init(document.getElementById('main3-1-2'));

                this.val.yAxis[0].name="电耗";
                this.val.series[0].name='电耗(kw.h)'
                for(let i in this.machineElectric){
                    dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
                    shijian.push(this.machineElectric[i]["1_date"]);
                }
                console.log(dianhao);
                this.val.title.text="总耗电(kw.h)"
                this.val.series[0].itemStyle.color='rgb(84,112,198)'
                this.val.xAxis[0].data=datashijian;
                this.val.series[0].data=dianhao;
                HisArr.setOption(this.val);
                this.loading=false
            },
            echarsInit1(){
                var datashijian=[];
                var s=7;
                while(s>0){
                    s=s-1;

                    var date_day7=new Date(Date.parse(new Date())-s*24*60*60*1000);

                    var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
                    datashijian.push(day7);


                }
                let HisArr="";
                let dianhao=[];
                let shijian=[];
                HisArr = this.$echarts.init(document.getElementById('main3-2-2'));
                this.val.yAxis[0].name="水耗";
                this.val.series[0].name='水耗(m³)'
                for(let i in this.machineWater){
                    dianhao.push(this.machineWater[i]["0_jiqidianliang"]);
                    shijian.push(this.machineWater[i]["1_date"]);
                }
                this.val.title.text="总耗水(m³)"
                this.val.series[0].itemStyle.color='#00ff00'
                this.val.xAxis[0].data=datashijian;
                this.val.series[0].data=[78,80,84,75,82,77,80];
                HisArr.setOption(this.val);
                this.loading=false
            },
            dingdanxiangqing(){
                let HisArr="";
                HisArr = this.$echarts.init(document.getElementById('main2'));
                let a = {
                        value: this.shuzu1[0]['6_qualified'],
                let HisArr="";
                HisArr = this.$echarts.init(document.getElementById('main2'));
                let a = {
                    value: 942,

                        name: "成品",
                        itemStyle: { color: '#53a2ff' },
                        label:{fontSize:30}
                    name: "成品",
                    itemStyle: { color: '#53a2ff' }

                    }
                    let b = {
                        value: this.shuzu1[0]['7_qualified_not'],
                        name: "次品",
                        itemStyle: { color: 'darkseagreen' },
                        label:{fontSize:30}
                }
                let b = {
                    value: 58,
                    name: "次品",
                    itemStyle: { color: 'darkseagreen' }

                    }
                }
                this.val1.title.text="合格率"
                this.val1.title.top="45%"
                this.val1.title.left="45%"
                this.val1.title.textStyle.fontSize=30
                this.val1.title.left="40%"
                this.val1.series[0].data[0]=a
                this.val1.series[0].data[1]=b

					
                    HisArr.setOption(this.val1);
                this.loading=false
            },

                HisArr.setOption(this.val1);
                this.loading=false
            },
            dingdanxiangqing1(){
                let HisArr="";
                HisArr = this.$echarts.init(document.getElementById('main4'));
                let HisArr="";
                HisArr = this.$echarts.init(document.getElementById('main4'));
                let a = {
                    value: this.shuzu1[0]['2_smallglass_completed'],

                    name: "已完成",
                    itemStyle: { color: '#53a2ff' },
                    label:{fontSize:30}
                
                    itemStyle: { color: '#53a2ff' }

                }
                let b = {
                    value: this.shuzu1[0]['3_smallglass_processing'],
                    name: "未完成",
                    itemStyle: { color: 'darkseagreen' },
                    label:{fontSize:30}
                    itemStyle: { color: 'darkseagreen' }

                }
                this.val1.title.text="订单加工"
                this.val1.title.top="45%"
                this.val1.title.left="45%"
                this.val1.title.textStyle.fontSize=30
                this.val1.title.left="40%"
                this.val1.series[0].data[0]=a
                this.val1.series[0].data[1]=b	
                HisArr.setOption(this.val1);
                this.loading=false
            },
		  
      },
      watch:{
			
                this.val1.series[0].data[1]=b

                HisArr.setOption(this.val1);
                this.loading=false
            },

        },
        watch:{
            shuzu(){
                for(item of this.shuzu){

                    if((item["3_class_html"].indexOf("33")>-1) || (item["3_class_html"].indexOf("35")>-1) || (item["3_class_html"].indexOf("40")>-1)){
                        if(item["1_connect_state"]=="已连接"){
                            if(item["5_baojin"]>0){
                                //水刀
                                if(item["3_class_html"].indexOf("35")>-1){
                                    if(item["5_baojin"]>1){
                                        item["6_class"]='divYellow';
                                    }else{
                                        item["4_shuliang"]==4?item["6_class"]='divGrenn':item["6_class"]='divnull';
                                    }

                                }else{
                                    item["6_class"]='divYellow';
                                }

                            }else{

                                //钻孔 加工中心
                                item["4_shuliang"]==2?item["6_class"]='divGrenn':item["6_class"]='divnull';


                            }
                        }else{
                            item["6_class"]='divRed';
                        }
                    }
                    else{
                        if(item["1_connect_state"]=="已连接"){
                            if(item["5_baojin"]>0){
                                item["6_class"]='divYellow';
                            }else{
                                if((item["0_machine_id"]==76)||(item["0_machine_id"]==77)||(item["0_machine_id"]==26)||(item["0_machine_id"]==53)){

                                    item["6_class"]='divGrenn';
                                }else{
                                    item["4_shuliang"]>0?item["6_class"]='divGrenn':item["6_class"]='divnull';}
                            }
                        }else{
                            item["6_class"]='divRed';
                        }

                    }

                }
            },
            machineElectric(){
                this.echarsInit()
            },
            machineWater(){
                this.echarsInit1()
            },
            shuzu1(){
                this.dingdanxiangqing(),
                this.dingdanxiangqing1()
            }
            
        },
      async mounted(){
                this.dingdanxiangqing(),
                    this.dingdanxiangqing1()
            }

        let sql=""
        let flag=2
        sql="{call AXJ_dapingxianshi_dingdanshuju2('切割')}"
        this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")     
           
        await setInterval(()=>{
            
                sql="{call AXJ_dapingxianshi_dingdanshuju2('切割')}"
                this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
            },5000)
		
        },
        async mounted(){

				
		 
      }

})
            let sql=""
            let flag=2
            sql="{call AXJ_dapingxianshijiqishuju()}"
            this.loadAjxss('大屏显示',sql,flag,"shuzu")
            sql="{call AXJ_dapingxianshi_dingdanshuju()}"
            this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")
            sql="{call AXJ_a_largeScreen_sumelectric_select()}"
            this.loadAjxss('大屏总电耗数据',sql,flag,"machineElectric")
            sql="{call AXJ_a_largeScreen_sumselect()}"
            this.loadAjxss('大屏总能耗总数据',sql,flag,"shuzu2")
            sql="{call AXJ_a_largeScreen_sumwater_select()}"
            this.loadAjxss('大屏总水耗数据',sql,flag,"machineWater")


            await setInterval(()=>{

                sql="{call AXJ_dapingxianshijiqishuju()}"
                this.interValLoadAjxs('大屏显示',sql,flag,"shuzu")
            },5000)
            await setInterval(()=>{

                sql="{call AXJ_dapingxianshi_dingdanshuju()}"
                this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
            },5000)
            await setInterval(()=>{
                sql="{call AXJ_a_largeScreen_sumelectric_select()}"
                this.interValLoadAjxs('大屏总电耗数据',sql,flag,"machineElectric")
            },5000)
            await setInterval(()=>{
                sql="{call AXJ_a_largeScreen_sumselect()}"
                this.interValLoadAjxs('大屏总能耗总数据',sql,flag,"shuzu2")
            },5000)
            await setInterval(()=>{
                sql="{call AXJ_a_largeScreen_sumwater_select()}"
                this.interValLoadAjxs('大屏总水耗数据',sql,flag,"machineWater")
            },5000)




        }

    })





 gmms/WebContent/bigScreen/twoglassCut.jsp

New file
@@ -0,0 +1,442 @@
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能制造可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .container {
            width: 90%;
            margin: 20px auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            background-color: #007bff;
            color: white;
            padding: 15px;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
        }

        .date-time {
            font-size: 14px;
        }

        /* 搜索栏样式 */
        .header .search-bar {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border-radius: 20px;
            padding: 5px 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            width: 70%;
        }

        .search-bar select, .search-bar input {
            margin: 0 10px;
            padding: 8px;
            font-size: 14px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .search-bar button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            font-size: 14px;
            border-radius: 20px;
            cursor: pointer;
        }

        .search-bar button.reset-btn {
            background-color: #ccc;
            margin-left: 10px;
        }

        /* 主内容部分 */
        .dashboard {
            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }

        .main-content {
            width: 100%;
            padding: 20px;
        }

        /* 四个数据显示的方块 */
        .top-blocks {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .top-block {
            width: 23%;
            background-color: #ffffff;
            padding: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .top-block .title {
            font-size: 16px;
            color: #333;
        }

        .top-block .value {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
        }

        /* 图表容器 */
        .chart-container {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .chart {
            width: 30%;
            height: 300px;
        }

        /* 表格样式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .data-table th, .data-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        .data-table th {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- Header Section -->
    <div class="header">
        <h1>北玻智能可视化</h1>
        <div class="date-time">
            <span>数据更新时间: 2025-03-31 12:50:52</span>
        </div>
        <!-- 搜索栏 -->
        <div class="search-bar">
            <!-- 产业下拉框 -->
            <select id="industry-select">
                <option value="">选择产业</option>
                <option value="产业1">产业1</option>
                <option value="产业2">产业2</option>
                <option value="产业3">产业3</option>
            </select>

            <!-- 产品大类下拉框 -->
            <select id="product-category-select">
                <option value="">选择产品大类</option>
                <option value="产品大类1">产品大类1</option>
                <option value="产品大类2">产品大类2</option>
                <option value="产品大类3">产品大类3</option>
            </select>

            <!-- 工程下拉框 -->
            <select id="project-select">
                <option value="">选择工厂</option>
                <option value="工程1">工程1</option>
                <option value="工程2">工程2</option>
                <option value="工程3">工程3</option>
            </select>

            <!-- 开始日期 -->
            <input type="date" id="start-date" />

            <!-- 结束日期 -->
            <input type="date" id="end-date" />

            <!-- 查询按钮 -->
            <button onclick="filterData()">查询</button>

            <!-- 重置按钮 -->
            <button class="reset-btn" onclick="resetFilters()">重置</button>
        </div>
    </div>

    <!-- Dashboard Section -->
    <div class="dashboard">
        <!-- Main Content -->
        <div class="main-content">
            <!-- Top Data Blocks -->
            <div class="top-blocks">
                <div class="top-block">
                    <div class="title">计划完成率</div>
                    <div class="value">111.26%</div>
                </div>
                <div class="top-block">
                    <div class="title">工程不良率</div>
                    <div class="value">0.00%</div>
                </div>
                <div class="top-block">
                    <div class="title">停机率</div>
                    <div class="value">0.00%</div>
                </div>
                <div class="top-block">
                    <div class="title">停机时长</div>
                    <div class="value">0</div>
                </div>
            </div>

            <!-- Chart Section -->
            <div class="chart-container">
                <!-- 第一个趋势图 (柱状图 - 订单计划和订单完成) -->
                <div class="chart">
                    <canvas id="trendChart1"></canvas>
                </div>
                <!-- 第二个趋势图 (柱状图 - 工程不良台数和工程不良率) -->
                <div class="chart">
                    <canvas id="trendChart2"></canvas>
                </div>
                <!-- 第三个趋势图 (柱状图 - 停机时长和停机时率) -->
                <div class="chart">
                    <canvas id="trendChart3"></canvas>
                </div>
            </div>

            <!-- Table Section -->
            <div class="side-visual">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>日期</th>
                        <th>产品名称</th>
                        <th>工厂名称</th>
                        <th>线体</th>
                        <th>订单计划</th>
                        <th>订单完成</th>
                        <th>差异</th>
                        <th>计划完成率</th>
                    </tr>
                    </thead>
                    <tbody id="table-body">
                    <tr>
                        <td>2025-03-30</td>
                        <td>智能家电</td>
                        <td>菜阳原电</td>
                        <td>清毒桶线</td>
                        <td>7,098</td>
                        <td>7,897</td>
                        <td>799</td>
                        <td>111.26%</td>
                    </tr>
                    <tr>
                        <td>2025-03-30</td>
                        <td>厨房电</td>
                        <td>菜阳原电</td>
                        <td>焊机A线</td>
                        <td>1,898</td>
                        <td>2,478</td>
                        <td>580</td>
                        <td>130.56%</td>
                    </tr>
                    <tr>
                        <td>2025-03-30</td>
                        <td>厨房电</td>
                        <td>菜阳原电</td>
                        <td>焊机B线</td>
                        <td>2,300</td>
                        <td>2,300</td>
                        <td>0</td>
                        <td>100.00%</td>
                    </tr>
                    <tr>
                        <td>2025-03-30</td>
                        <td>厨房电</td>
                        <td>菜阳原电</td>
                        <td>厨房自清洁</td>
                        <td>2,300</td>
                        <td>2,300</td>
                        <td>0</td>
                        <td>100.00%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js Script -->
<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>
    // 初始化数据
    const initialData = {
        labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
        datasets: [{
            label: '订单计划',
            data: [7098, 8000, 8500],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }, {
            label: '订单完成',
            data: [7897, 8200, 8700],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    };

    const ctx1 = document.getElementById('trendChart1').getContext('2d');
    const trendChart1 = new Chart(ctx1, {
        type: 'bar',
        data: initialData
    });

    const ctx2 = document.getElementById('trendChart2').getContext('2d');
    const trendChart2 = new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
            datasets: [{
                label: '工程不良台数',
                data: [5, 3, 2],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }, {
                label: '工程不良率',
                data: [0.01, 0.02, 0.03],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        }
    });

    const ctx3 = document.getElementById('trendChart3').getContext('2d');
    const trendChart3 = new Chart(ctx3, {
        type: 'bar',
        data: {
            labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
            datasets: [{
                label: '停机时长',
                data: [1, 2, 3],
                backgroundColor: 'rgba(255, 159, 64, 0.2)',
                borderColor: 'rgba(255, 159, 64, 1)',
                borderWidth: 1
            }, {
                label: '停机时率',
                data: [0.02, 0.03, 0.04],
                backgroundColor: 'rgba(153, 102, 255, 0.2)',
                borderColor: 'rgba(153, 102, 255, 1)',
                borderWidth: 1
            }]
        }
    });

    //根据日期范围过滤数据
    function filterData() {
        const startDate = document.getElementById('start-date').value;
        const endDate = document.getElementById('end-date').value;
        // 构建请求的参数
        const params = {
            startDate: startDate,
            endDate: endDate,
        };

        // 示例：假设您已经通过查询筛选了数据，下面模拟更新图表数据
        // 更新第一个趋势图
        trendChart1.data = {
            labels: ['2025-03-30', '2025-03-31'],
            datasets: [{
                label: '订单计划',
                data: [7098, 8000],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }, {
                label: '订单完成',
                data: [7897, 8200],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };
        trendChart2.data = {
            labels: ['2025-03-30', '2025-03-31'],
            datasets: [{
                label: '工程不良台数',
                data: [5, 3,],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }, {
                label: '工程不良率',
                data: [0.01, 0.02],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        };
        trendChart3.data = {
            labels: ['2025-03-30', '2025-03-31'],
            datasets: [{
                label: '停机时长',
                data: [1, 2],
                backgroundColor: 'rgba(255, 159, 64, 0.2)',
                borderColor: 'rgba(255, 159, 64, 1)',
                borderWidth: 1
            }, {
                label: '停机时率',
                data: [0.02, 0.03],
                backgroundColor: 'rgba(153, 102, 255, 0.2)',
                borderColor: 'rgba(153, 102, 255, 1)',
                borderWidth: 1
            }]
        };
        trendChart1.update();
        trendChart2.update();
        trendChart3.update();
    }

    // 重置搜索栏
    function resetFilters() {
        document.getElementById('start-date').value = '';
        document.getElementById('end-date').value = '';
    }

</script>


</body>
</html>

 gmms/WebContent/bigScreen/xiapianduiduo.jsp

@@ -147,7 +147,7 @@
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/mixins.js"></script>
<script src="../js/echarts.min.js"></script>


 gmms/WebContent/login/run.jsp

@@ -3,7 +3,8 @@
<%@page import="toTcp.TcpMain"%>
<%@include file="../mysqlInsert/mysql_connect.jsp"%>
<%
ThreadHttpServer.mains();
  ThreadHttpServer.mains(); 
 
//TcpMain.getElectric();
//Manager.appStart(new String[]{url,user,password });


 gmms/WebContent/mysqlInsert/mysql_connect.jsp

@@ -13,10 +13,10 @@
//连接数据库
String ip="localhost:3306";
 String driverClass = "com.mysql.cj.jdbc.Driver";
String url="jdbc:mysql://"+ip+"/haier?serverTimezone=GMT%2B8";
String url="jdbc:mysql://"+ip+"/gmms?serverTimezone=GMT%2B8";
String user = "root"; 
 String password = "beibo.123/";   
String url1 = "jdbc:mysql://"+ip+"/haier";
String url1 = "jdbc:mysql://"+ip+"/gmms";

String urlglass="jdbc:mysql://"+ip+"/mesgglass?serverTimezone=GMT%2B8";
String url3="jdbc:mysql://"+ip+"/glog?serverTimezone=GMT%2B8";

			@@ -3,62 +3,78 @@
			<html>
			<head>

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

			<style>
			html,body{
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			}
			#header1 {
			<style>
			html,body{
			width: 100%;
			height: 7%;
			height: 100%;
			padding: 0;
			margin: 0;
			}
			#header1 {
			width: 100%;
			height: 5%;
			background-color: white;
			display: inline-block;
			text-align: center;
			font-size: 50px;
			text-align: center;
			font-size: 50px;
			}
			#header {
			width: 100%;
			height: 90%;
			height: 28%;
			background-color: white;
			display: flex;
			text-align: center;
			margin-top: 2%;
			}
			#footer {
			width: 100%;
			height: 70%;

			height: 60%;
			display: flex;
			}
			#main1 {
			width: 100%;
			height: 30%;
			display: flex;
			}
			#main3 {
			width: 100%;
			height: 70%;
			height: 30%;
			display: flex;
			}
			#main2 {
			width: 50%;
			height: 100%;

			width: 20%;
			height: 400px;
			}
			#main4 {
			margin-left: 5%;
			width: 20%;
			height: 400px;
			}
			#main3 {
			width: 50%;
			height: 100%;
			display: flex;
			}
			#main1-1 {
			width: 100%;
			height: 25%;
			font-size: 40px;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main1-2 {
			width: 100%;
			height: 25%;
			font-size: 50px;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main1-3 {
			width: 100%;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main1-4 {
			width: 100%;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main3-1 {
			width: 50%;
			@@ -69,27 +85,13 @@
			height: 100%;

			}
			#main4-1 {
			width: 100%;
			height: 30%;

			}
			#main4-2 {
			width: 100%;
			height: 30%;

			}
			#main4-3 {
			width: 100%;
			height: 30%;

			}
			#main1-1-1 {
			font-size: 50px;
			font-size: 40px;
			margin-top: 2%;
			}
			#main1-2-1 {
			font-size: 50px;
			font-size: 40px;
			margin-top: 2%;
			}
			#main3-1-1 {
			@@ -98,7 +100,7 @@
			}
			#main3-1-2 {
			width: 100%;
			height: 80%;
			height: 50%;
			}
			#main3-2-1 {
			width: 100%;
			@@ -106,227 +108,451 @@
			}
			#main3-2-2 {
			width: 100%;
			height: 80%;
			height: 50%;
			}



			</style>
			<title>大屏显示</title>
			<title>大屏显示</title>
			</head>
			<body>
			<div id="app" style="width: 99%;height: 99%;background-color: white;">
			<div id="header1" v-for='items1 in shuzu1'><span>{{items1['5_machineType']}}工序</span></div>
			<div id="header">
			<div id="main1" v-for='items1 in shuzu1'>
			<div id="main1-1">当前订单号：
			<div id="main1-1-1" >{{items1['0_order_id']}}</div>
			</div>
			<div id="main1-2">当前产品号：
			<div id="main1-2-1">{{items1['1_recipe_no']}}</div>
			</div>
			<div id="main1-2">当班计划数量：
			<div id="main1-2-1">{{items1['8_smallglass_sum']}}</div>
			</div>
			<div id="main1-2">当班完成数量：
			<div id="main1-2-1">{{items1['2_smallglass_completed']}} </div>
			</div>
			<div id="app" style="width: 1920px;height: 100%;background-color: white;">
			<div id="header1"><span>海尔智家厨电莱阳工厂玻璃产线二期</span></div>
			<div id="header">
			<div id="main1" v-for='items1 in shuzu1'>
			<div id="main1-1">当前订单号：
			<div id="main1-1-1" >{{items1['0_order_id']}}</div>
			</div>
			<div id="main3">
			<div id="main4"></div>
			<div id="main2"></div>
			<div id="main1-2">当前产品号：
			<div id="main1-2-1">{{items1['1_recipe_no']}}</div>
			</div>


			<div id="main1-3">当班计划数量：
			<div id="main1-2-1">{{items1['4_smallglass_sum']}}</div>
			</div>
			<div id="main1-4">当班完成数量：
			<div id="main1-2-1">{{items1['2_smallglass_completed']}} </div>
			</div>
			</div>



			</div>
			<div id="footer">
			<div id="main4"></div>
			<div id="main2"></div>
			<div id="main3">
			<div id="main3-1">
			<div id="main3-1-1">总耗电：<span>{{shuzu2[0]['0_@jiqidianliang']}}kw</span></div>
			<div id="main3-1-2"></div>
			</div>
			<div id="main3-2">
			<div id="main3-2-1">总耗水：<span>{{shuzu2[0]['1_@jiqidianliang1']}}m³</span></div>
			<div id="main3-2-2"></div>
			</div>
			</div>
			</div>
			</div>



			<script src="../js/jquery-3.4.1.min.js"></script>
			<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
			<script src="../js/vue.min.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/mixins.js"></script>
			<script src="../js/echarts.min.js"></script>

			<script>
			Vue.prototype.$echarts = echarts;
			Vue.prototype.$http= axios;
			let app = new Vue({
			el:'#app',
			mixins:[mixin],
			data:{
			shuzu:[{}],
			shuzu1:[{}],
			shuzu2:[{}],
			machineElectric:[{}],
			machineWater:[{}],
			Vue.prototype.$echarts = echarts;
			Vue.prototype.$http= axios;
			let app = new Vue({
			el:'#app',
			mixins:[mixin],
			data:{
			shuzu:[{}],
			shuzu1:[{}],
			shuzu2:[{}],
			machineElectric:[{}],
			machineWater:[{}],





			val1: {
			borderColor:'#082352',
			title: {
			// text: '成品库存',
			// left: '290px',
			// top: '0px'
			text:'合格率',//主标题文本
			left:'center',
			top:'45%',
			left:'50%',
			textStyle:{
			color:'#454c5c',
			align:'center'



			val: {
			title:{
			text:'',
			left:'center'
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow'
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [{
			type: 'category',
			data: [],
			axisLine: {
			lineStyle: {
			color: 'rgb(30, 144, 255)'
			}
			},
			axisLabel: {
			color: 'rgb(30, 144, 255)'
			},
			splitLine: {
			lineStyle: {
			color: 'rgb(30, 144, 255)',
			type: 'dashed'
			}
			}
			}],
			yAxis: [{
			type: "value",
			name: "能耗",
			nameTextStyle: {
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: false,
			lineStyle: { //分割线
			color: "rgb(180, 180, 180)",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			},
			},

			],
			series: [{
			name: '电耗',
			type: 'bar',
			barWidth: '80%',
			data: [220, 152, 200, 334, 390, 330, 220],
			itemStyle: {
			color: 'rgb(180, 180, 180)'
			}
			},

			]
			},
			subtextStyle:{
			fontFamily : "微软雅黑",
			color:'#6c7a89',
			}
			val1: {
			borderColor:'#082352',
			title: {
			// text: '成品库存',
			// left: '290px',
			// top: '0px'
			text:'合格率',//主标题文本
			left:'center',
			top:'45%',
			left:'40%',
			textStyle:{
			color:'#454c5c',
			align:'center'
			},
			subtextStyle:{
			fontFamily : "微软雅黑",
			color:'#6c7a89',
			}

			},

			tooltip: {
			trigger: 'item',
			textStyle:{
			}
			},
			legend: {
			// orient: 'vertical',
			left: 'left',
			textStyle:{

			}
			},
			textStyle:{

			},
			series: [
			{
			},

			type: 'pie',
			radius : ['40%','70%'],
			center: ['50%', '50%'],
			minAngle:'15',
			label: {
			// position: 'inside',
			show: true,
			formatter(param) {
			// correct the percentage
			return param.name + ' (' + param.percent + '%)';
			}
			},
			data: [
			{ value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
			{ value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
			],
			itemStyle: {
			normal:{
			label:{
			show:true,
			//formatter: "{b} :\n {c} \n ({d}%)",
			formatter: "{b} :\n ({d}%)",
			position:"inner"
			}
			}
			}
			tooltip: {
			trigger: 'item',
			textStyle:{
			}
			},
			legend: {
			// orient: 'vertical',
			left: 'left',
			textStyle:{

			}
			]
			},

			},
			methods:{

			}
			},
			textStyle:{

			},
			series: [
			{

			type: 'pie',
			radius : ['40%','70%'],
			center: ['50%', '50%'],
			minAngle:'15',
			label: {
			// position: 'inside',
			show: true,
			formatter(param) {
			// correct the percentage
			return param.name + ' (' + param.percent + '%)';
			}
			},
			data: [
			{ value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
			{ value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
			],
			// emphasis: {
			// itemStyle: {
			// shadowBlur: 10,
			// shadowOffsetX: 0,
			// shadowColor: 'rgba(0, 0, 0, 0.5)'
			// }
			// }
			itemStyle: {
			normal:{
			label:{
			show:true,
			//formatter: "{b} :\n {c} \n ({d}%)",
			formatter: "{b} :\n ({d}%)",
			position:"inner"
			}
			}
			}

			}
			]
			},

			},
			methods:{
			echarsInit() {
			var datashijian=[];
			var s=7;
			while(s>0){
			s=s-1;

			var date_day7=new Date(Date.parse(new Date())-s2460601000);

			var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
			datashijian.push(day7);


			}
			let HisArr="";
			let dianhao=[];
			let shijian=[];


			HisArr = this.$echarts.init(document.getElementById('main3-1-2'));

			this.val.yAxis[0].name="电耗";
			this.val.series[0].name='电耗(kw.h)'
			for(let i in this.machineElectric){
			dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
			shijian.push(this.machineElectric[i]["1_date"]);
			}
			console.log(dianhao);
			this.val.title.text="总耗电(kw.h)"
			this.val.series[0].itemStyle.color='rgb(84,112,198)'
			this.val.xAxis[0].data=datashijian;
			this.val.series[0].data=dianhao;
			HisArr.setOption(this.val);
			this.loading=false
			},
			echarsInit1(){
			var datashijian=[];
			var s=7;
			while(s>0){
			s=s-1;

			var date_day7=new Date(Date.parse(new Date())-s2460601000);

			var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
			datashijian.push(day7);


			}
			let HisArr="";
			let dianhao=[];
			let shijian=[];
			HisArr = this.$echarts.init(document.getElementById('main3-2-2'));
			this.val.yAxis[0].name="水耗";
			this.val.series[0].name='水耗(m³)'
			for(let i in this.machineWater){
			dianhao.push(this.machineWater[i]["0_jiqidianliang"]);
			shijian.push(this.machineWater[i]["1_date"]);
			}
			this.val.title.text="总耗水(m³)"
			this.val.series[0].itemStyle.color='#00ff00'
			this.val.xAxis[0].data=datashijian;
			this.val.series[0].data=[78,80,84,75,82,77,80];
			HisArr.setOption(this.val);
			this.loading=false
			},
			dingdanxiangqing(){
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main2'));
			let a = {
			value: this.shuzu1[0]['6_qualified'],
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main2'));
			let a = {
			value: 942,

			name: "成品",
			itemStyle: { color: '#53a2ff' },
			label:{fontSize:30}
			name: "成品",
			itemStyle: { color: '#53a2ff' }

			}
			let b = {
			value: this.shuzu1[0]['7_qualified_not'],
			name: "次品",
			itemStyle: { color: 'darkseagreen' },
			label:{fontSize:30}
			}
			let b = {
			value: 58,
			name: "次品",
			itemStyle: { color: 'darkseagreen' }

			}
			}
			this.val1.title.text="合格率"
			this.val1.title.top="45%"
			this.val1.title.left="45%"
			this.val1.title.textStyle.fontSize=30
			this.val1.title.left="40%"
			this.val1.series[0].data[0]=a
			this.val1.series[0].data[1]=b


			HisArr.setOption(this.val1);
			this.loading=false
			},

			HisArr.setOption(this.val1);
			this.loading=false
			},
			dingdanxiangqing1(){
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main4'));
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main4'));
			let a = {
			value: this.shuzu1[0]['2_smallglass_completed'],

			name: "已完成",
			itemStyle: { color: '#53a2ff' },
			label:{fontSize:30}

			itemStyle: { color: '#53a2ff' }

			}
			let b = {
			value: this.shuzu1[0]['3_smallglass_processing'],
			name: "未完成",
			itemStyle: { color: 'darkseagreen' },
			label:{fontSize:30}
			itemStyle: { color: 'darkseagreen' }

			}
			this.val1.title.text="订单加工"
			this.val1.title.top="45%"
			this.val1.title.left="45%"
			this.val1.title.textStyle.fontSize=30
			this.val1.title.left="40%"
			this.val1.series[0].data[0]=a
			this.val1.series[0].data[1]=b
			HisArr.setOption(this.val1);
			this.loading=false
			},

			},
			watch:{

			this.val1.series[0].data[1]=b

			HisArr.setOption(this.val1);
			this.loading=false
			},

			},
			watch:{
			shuzu(){
			for(item of this.shuzu){

			if((item["3_class_html"].indexOf("33")>-1) \|\| (item["3_class_html"].indexOf("35")>-1) \|\| (item["3_class_html"].indexOf("40")>-1)){
			if(item["1_connect_state"]=="已连接"){
			if(item["5_baojin"]>0){
			//水刀
			if(item["3_class_html"].indexOf("35")>-1){
			if(item["5_baojin"]>1){
			item["6_class"]='divYellow';
			}else{
			item["4_shuliang"]==4?item["6_class"]='divGrenn':item["6_class"]='divnull';
			}

			}else{
			item["6_class"]='divYellow';
			}

			}else{

			//钻孔加工中心
			item["4_shuliang"]==2?item["6_class"]='divGrenn':item["6_class"]='divnull';


			}
			}else{
			item["6_class"]='divRed';
			}
			}
			else{
			if(item["1_connect_state"]=="已连接"){
			if(item["5_baojin"]>0){
			item["6_class"]='divYellow';
			}else{
			if((item["0_machine_id"]==76)\|\|(item["0_machine_id"]==77)\|\|(item["0_machine_id"]==26)\|\|(item["0_machine_id"]==53)){

			item["6_class"]='divGrenn';
			}else{
			item["4_shuliang"]>0?item["6_class"]='divGrenn':item["6_class"]='divnull';}
			}
			}else{
			item["6_class"]='divRed';
			}

			}

			}
			},
			machineElectric(){
			this.echarsInit()
			},
			machineWater(){
			this.echarsInit1()
			},
			shuzu1(){
			this.dingdanxiangqing(),
			this.dingdanxiangqing1()
			}

			},
			async mounted(){
			this.dingdanxiangqing(),
			this.dingdanxiangqing1()
			}

			let sql=""
			let flag=2
			sql="{call AXJ_dapingxianshi_dingdanshuju2('切割')}"
			this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")

			await setInterval(()=>{

			sql="{call AXJ_dapingxianshi_dingdanshuju2('切割')}"
			this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
			},5000)

			},
			async mounted(){



			}

			})
			let sql=""
			let flag=2
			sql="{call AXJ_dapingxianshijiqishuju()}"
			this.loadAjxss('大屏显示',sql,flag,"shuzu")
			sql="{call AXJ_dapingxianshi_dingdanshuju()}"
			this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")
			sql="{call AXJ_a_largeScreen_sumelectric_select()}"
			this.loadAjxss('大屏总电耗数据',sql,flag,"machineElectric")
			sql="{call AXJ_a_largeScreen_sumselect()}"
			this.loadAjxss('大屏总能耗总数据',sql,flag,"shuzu2")
			sql="{call AXJ_a_largeScreen_sumwater_select()}"
			this.loadAjxss('大屏总水耗数据',sql,flag,"machineWater")


			await setInterval(()=>{

			sql="{call AXJ_dapingxianshijiqishuju()}"
			this.interValLoadAjxs('大屏显示',sql,flag,"shuzu")
			},5000)
			await setInterval(()=>{

			sql="{call AXJ_dapingxianshi_dingdanshuju()}"
			this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
			},5000)
			await setInterval(()=>{
			sql="{call AXJ_a_largeScreen_sumelectric_select()}"
			this.interValLoadAjxs('大屏总电耗数据',sql,flag,"machineElectric")
			},5000)
			await setInterval(()=>{
			sql="{call AXJ_a_largeScreen_sumselect()}"
			this.interValLoadAjxs('大屏总能耗总数据',sql,flag,"shuzu2")
			},5000)
			await setInterval(()=>{
			sql="{call AXJ_a_largeScreen_sumwater_select()}"
			this.interValLoadAjxs('大屏总水耗数据',sql,flag,"machineWater")
			},5000)




			}

			})

New file
			@@ -0,0 +1,442 @@
			<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
			<!DOCTYPE html>
			<html lang="zh-CN">
			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>智能制造可视化</title>
			<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
			<style>
			body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f4f4f4;
			}

			.container {
			width: 90%;
			margin: 20px auto;
			}

			.header {
			display: flex;
			justify-content: space-between;
			background-color: #007bff;
			color: white;
			padding: 15px;
			align-items: center;
			}

			.header h1 {
			font-size: 24px;
			}

			.date-time {
			font-size: 14px;
			}

			/* 搜索栏样式 */
			.header .search-bar {
			display: flex;
			align-items: center;
			background-color: #ffffff;
			border-radius: 20px;
			padding: 5px 10px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			width: 70%;
			}

			.search-bar select, .search-bar input {
			margin: 0 10px;
			padding: 8px;
			font-size: 14px;
			border-radius: 5px;
			border: 1px solid #ccc;
			}

			.search-bar button {
			background-color: #007bff;
			color: white;
			border: none;
			padding: 8px 15px;
			font-size: 14px;
			border-radius: 20px;
			cursor: pointer;
			}

			.search-bar button.reset-btn {
			background-color: #ccc;
			margin-left: 10px;
			}

			/* 主内容部分 */
			.dashboard {
			display: flex;
			flex-direction: column;
			margin-top: 20px;
			}

			.main-content {
			width: 100%;
			padding: 20px;
			}

			/* 四个数据显示的方块 */
			.top-blocks {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;
			}

			.top-block {
			width: 23%;
			background-color: #ffffff;
			padding: 20px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			text-align: center;
			}

			.top-block .title {
			font-size: 16px;
			color: #333;
			}

			.top-block .value {
			font-size: 24px;
			font-weight: bold;
			color: #007bff;
			}

			/* 图表容器 */
			.chart-container {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			}

			.chart {
			width: 30%;
			height: 300px;
			}

			/* 表格样式 */
			.data-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
			}

			.data-table th, .data-table td {
			border: 1px solid #ddd;
			padding: 10px;
			text-align: center;
			}

			.data-table th {
			background-color: #007bff;
			color: white;
			}
			</style>
			</head>
			<body>
			<div class="container">
			<!-- Header Section -->
			<div class="header">
			<h1>北玻智能可视化</h1>
			<div class="date-time">
			<span>数据更新时间: 2025-03-31 12:50:52</span>
			</div>
			<!-- 搜索栏 -->
			<div class="search-bar">
			<!-- 产业下拉框 -->
			<select id="industry-select">
			<option value="">选择产业</option>
			<option value="产业1">产业1</option>
			<option value="产业2">产业2</option>
			<option value="产业3">产业3</option>
			</select>

			<!-- 产品大类下拉框 -->
			<select id="product-category-select">
			<option value="">选择产品大类</option>
			<option value="产品大类1">产品大类1</option>
			<option value="产品大类2">产品大类2</option>
			<option value="产品大类3">产品大类3</option>
			</select>

			<!-- 工程下拉框 -->
			<select id="project-select">
			<option value="">选择工厂</option>
			<option value="工程1">工程1</option>
			<option value="工程2">工程2</option>
			<option value="工程3">工程3</option>
			</select>

			<!-- 开始日期 -->
			<input type="date" id="start-date" />

			<!-- 结束日期 -->
			<input type="date" id="end-date" />

			<!-- 查询按钮 -->
			<button onclick="filterData()">查询</button>

			<!-- 重置按钮 -->
			<button class="reset-btn" onclick="resetFilters()">重置</button>
			</div>
			</div>

			<!-- Dashboard Section -->
			<div class="dashboard">
			<!-- Main Content -->
			<div class="main-content">
			<!-- Top Data Blocks -->
			<div class="top-blocks">
			<div class="top-block">
			<div class="title">计划完成率</div>
			<div class="value">111.26%</div>
			</div>
			<div class="top-block">
			<div class="title">工程不良率</div>
			<div class="value">0.00%</div>
			</div>
			<div class="top-block">
			<div class="title">停机率</div>
			<div class="value">0.00%</div>
			</div>
			<div class="top-block">
			<div class="title">停机时长</div>
			<div class="value">0</div>
			</div>
			</div>

			<!-- Chart Section -->
			<div class="chart-container">
			<!-- 第一个趋势图 (柱状图 - 订单计划和订单完成) -->
			<div class="chart">
			<canvas id="trendChart1"></canvas>
			</div>
			<!-- 第二个趋势图 (柱状图 - 工程不良台数和工程不良率) -->
			<div class="chart">
			<canvas id="trendChart2"></canvas>
			</div>
			<!-- 第三个趋势图 (柱状图 - 停机时长和停机时率) -->
			<div class="chart">
			<canvas id="trendChart3"></canvas>
			</div>
			</div>

			<!-- Table Section -->
			<div class="side-visual">
			<table class="data-table">
			<thead>
			<tr>
			<th>日期</th>
			<th>产品名称</th>
			<th>工厂名称</th>
			<th>线体</th>
			<th>订单计划</th>
			<th>订单完成</th>
			<th>差异</th>
			<th>计划完成率</th>
			</tr>
			</thead>
			<tbody id="table-body">
			<tr>
			<td>2025-03-30</td>
			<td>智能家电</td>
			<td>菜阳原电</td>
			<td>清毒桶线</td>
			<td>7,098</td>
			<td>7,897</td>
			<td>799</td>
			<td>111.26%</td>
			</tr>
			<tr>
			<td>2025-03-30</td>
			<td>厨房电</td>
			<td>菜阳原电</td>
			<td>焊机A线</td>
			<td>1,898</td>
			<td>2,478</td>
			<td>580</td>
			<td>130.56%</td>
			</tr>
			<tr>
			<td>2025-03-30</td>
			<td>厨房电</td>
			<td>菜阳原电</td>
			<td>焊机B线</td>
			<td>2,300</td>
			<td>2,300</td>
			<td>0</td>
			<td>100.00%</td>
			</tr>
			<tr>
			<td>2025-03-30</td>
			<td>厨房电</td>
			<td>菜阳原电</td>
			<td>厨房自清洁</td>
			<td>2,300</td>
			<td>2,300</td>
			<td>0</td>
			<td>100.00%</td>
			</tr>
			</tbody>
			</table>
			</div>
			</div>
			</div>
			</div>

			<!-- Chart.js Script -->
			<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>
			// 初始化数据
			const initialData = {
			labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
			datasets: [{
			label: '订单计划',
			data: [7098, 8000, 8500],
			backgroundColor: 'rgba(54, 162, 235, 0.2)',
			borderColor: 'rgba(54, 162, 235, 1)',
			borderWidth: 1
			}, {
			label: '订单完成',
			data: [7897, 8200, 8700],
			backgroundColor: 'rgba(75, 192, 192, 0.2)',
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 1
			}]
			};

			const ctx1 = document.getElementById('trendChart1').getContext('2d');
			const trendChart1 = new Chart(ctx1, {
			type: 'bar',
			data: initialData
			});

			const ctx2 = document.getElementById('trendChart2').getContext('2d');
			const trendChart2 = new Chart(ctx2, {
			type: 'bar',
			data: {
			labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
			datasets: [{
			label: '工程不良台数',
			data: [5, 3, 2],
			backgroundColor: 'rgba(75, 192, 192, 0.2)',
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 1
			}, {
			label: '工程不良率',
			data: [0.01, 0.02, 0.03],
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			borderColor: 'rgba(255, 99, 132, 1)',
			borderWidth: 1
			}]
			}
			});

			const ctx3 = document.getElementById('trendChart3').getContext('2d');
			const trendChart3 = new Chart(ctx3, {
			type: 'bar',
			data: {
			labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
			datasets: [{
			label: '停机时长',
			data: [1, 2, 3],
			backgroundColor: 'rgba(255, 159, 64, 0.2)',
			borderColor: 'rgba(255, 159, 64, 1)',
			borderWidth: 1
			}, {
			label: '停机时率',
			data: [0.02, 0.03, 0.04],
			backgroundColor: 'rgba(153, 102, 255, 0.2)',
			borderColor: 'rgba(153, 102, 255, 1)',
			borderWidth: 1
			}]
			}
			});

			//根据日期范围过滤数据
			function filterData() {
			const startDate = document.getElementById('start-date').value;
			const endDate = document.getElementById('end-date').value;
			// 构建请求的参数
			const params = {
			startDate: startDate,
			endDate: endDate,
			};

			// 示例：假设您已经通过查询筛选了数据，下面模拟更新图表数据
			// 更新第一个趋势图
			trendChart1.data = {
			labels: ['2025-03-30', '2025-03-31'],
			datasets: [{
			label: '订单计划',
			data: [7098, 8000],
			backgroundColor: 'rgba(54, 162, 235, 0.2)',
			borderColor: 'rgba(54, 162, 235, 1)',
			borderWidth: 1
			}, {
			label: '订单完成',
			data: [7897, 8200],
			backgroundColor: 'rgba(75, 192, 192, 0.2)',
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 1
			}]
			};
			trendChart2.data = {
			labels: ['2025-03-30', '2025-03-31'],
			datasets: [{
			label: '工程不良台数',
			data: [5, 3,],
			backgroundColor: 'rgba(75, 192, 192, 0.2)',
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 1
			}, {
			label: '工程不良率',
			data: [0.01, 0.02],
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			borderColor: 'rgba(255, 99, 132, 1)',
			borderWidth: 1
			}]
			};
			trendChart3.data = {
			labels: ['2025-03-30', '2025-03-31'],
			datasets: [{
			label: '停机时长',
			data: [1, 2],
			backgroundColor: 'rgba(255, 159, 64, 0.2)',
			borderColor: 'rgba(255, 159, 64, 1)',
			borderWidth: 1
			}, {
			label: '停机时率',
			data: [0.02, 0.03],
			backgroundColor: 'rgba(153, 102, 255, 0.2)',
			borderColor: 'rgba(153, 102, 255, 1)',
			borderWidth: 1
			}]
			};
			trendChart1.update();
			trendChart2.update();
			trendChart3.update();
			}

			// 重置搜索栏
			function resetFilters() {
			document.getElementById('start-date').value = '';
			document.getElementById('end-date').value = '';
			}

			</script>


			</body>
			</html>

			@@ -147,7 +147,7 @@
			<script src="../js/jquery-3.4.1.min.js"></script>
			<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
			<script src="../js/vue.min.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/mixins.js"></script>
			<script src="../js/echarts.min.js"></script>

			@@ -3,7 +3,8 @@
			<%@page import="toTcp.TcpMain"%>
			<%@include file="../mysqlInsert/mysql_connect.jsp"%>
			<%
			ThreadHttpServer.mains();
			ThreadHttpServer.mains();

			//TcpMain.getElectric();
			//Manager.appStart(new String[]{url,user,password });

			@@ -13,10 +13,10 @@
			//连接数据库
			String ip="localhost:3306";
			String driverClass = "com.mysql.cj.jdbc.Driver";
			String url="jdbc:mysql://"+ip+"/haier?serverTimezone=GMT%2B8";
			String url="jdbc:mysql://"+ip+"/gmms?serverTimezone=GMT%2B8";
			String user = "root";
			String password = "beibo.123/";
			String url1 = "jdbc:mysql://"+ip+"/haier";
			String url1 = "jdbc:mysql://"+ip+"/gmms";

			String urlglass="jdbc:mysql://"+ip+"/mesgglass?serverTimezone=GMT%2B8";
			String url3="jdbc:mysql://"+ip+"/glog?serverTimezone=GMT%2B8";