海尔二期
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
wu
2025-05-09 d3b1328cd9c2bf029229cc9a8e8ac445450055b8 
 gmms/WebContent/bigScreen/twoglassCut.jsp


@@ -5,7 +5,9 @@


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


<%--    <script src="https://csdn.jsdelivr.net/npm/chart.js"></script>--%>






    <style>


        body {


            font-family: Arial, sans-serif;


@@ -137,16 +139,20 @@


            background-color: #007bff;


            color: white;


        }


        #biaoti{


            color:black;


            margin-left: 350px;


        }


    </style>


</head>


<body>


<div class="container">


<div id="app" class="container">


    <!-- Header Section -->


    <div class="header">


        <h1>北玻智能可视化</h1>


        <div class="date-time">


            <span>数据更新时间: 2025-03-31 12:50:52</span>


        </div>


<%--        <div class="date-time">--%>


<%--            <span>数据更新时间: 2025-04-31 12:50:52</span>--%>


<%--        </div>--%>


        <!-- 搜索栏 -->


        <div class="search-bar">


            <!-- 产业下拉框 -->


@@ -156,16 +162,16 @@




            <!-- 产品大类下拉框 -->


            <select id="product-category-select">


                <option value="">选择产品大类</option>


                <option value="产品大类1">产品大类1</option>


                <option value="产品大类2">产品大类2</option>


                <option value="产品大类3">产品大类3</option>


                <option value="">全部</option>


                <option value="1">消毒柜</option>


                <option value="2">蒸烤箱</option>


                <option value="3">烟机</option>


            </select>




            <!-- 工程下拉框 -->


            <select id="project-select">


                <option value="">莱阳厨电</option>


                <option value="工程1">工程1</option>




            </select>




            <!-- 开始日期 -->


@@ -175,10 +181,10 @@


            <input type="date" id="end-date" />




            <!-- 查询按钮 -->


            <button onclick="filterData()">查询</button>




            <button @click="filterData()">查询</button>


            <h2 id="biaoti">{{title}}</h2>


            <!-- 重置按钮 -->


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


<%--            <button class="reset-btn" onclick="resetFilters()">重置</button>--%>


        </div>


    </div>




@@ -190,7 +196,7 @@


            <div class="top-blocks">


                <div class="top-block">


                    <div class="title">计划完成率</div>


                    <div class="value">111.26%</div>


                    <div class="value">76.00%</div>


                </div>


                <div class="top-block">


                    <div class="title">工程不良率</div>


@@ -208,82 +214,48 @@




            <!-- 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 id="trendChart1" class="chart"></div>


                <div id="trendChart2" class="chart"></div>


                <div id="trendChart3" class="chart"></div>


                <!-- 显示曲线图 -->


                <div id="trendChart4" class="chart"></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>


                    <table class="table table-striped table-hover data-table" style="overflow-x: auto;font-size: 12px;">


                        <thead>


                        <tr>


                            <th>日期</th>


                            <th>产品名称</th>


                            <th>工厂名称</th>


                            <th>线体</th>


                            <th>订单计划</th>


                            <th>订单完成</th>


                            <th>差异</th>


                            <th>计划完成率</th>


                        </tr>


                        </thead>


                        <tbody>


                        <tr v-for="(item, index) in shuzu" :key="index">


                            <td>{{ item['0_createtime'] || '暂无数据' }}</td>


                            <td>{{ item['1_type'] || '暂无数据' }}</td>


                            <td>{{ item['2_factory'] || '暂无数据' }}</td>


                            <td>{{ item['3_line'] || '暂无数据' }}</td>


                            <td>{{ item['4_plan'] || 0 }}</td>


                            <td>{{ item['5_overnum'] || 0 }}</td>


                            <td>{{ item['6_difference'] || '暂无数据' }}</td>


                            <td>{{ item['7_plan_completion_rate'] || '暂无数据' }}%</td>


                        </tr>


                        </tbody>


                    </table>


                </div>




            </div>


        </div>


    </div>


</div>






<!-- Chart.js Script -->


<script src="../js/jquery-3.4.1.min.js"></script>


@@ -302,308 +274,298 @@


            shuzu:[{}],


            shuzu1:[{}],


            shuzu2:[{}],


            yield:[{}],


            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"


                                }


                            }


                        }




                    }


                ]


            },


            val1: {},


            title:"<%= request.getParameter("name") %>",




        },


        methods:{


            // 提交一次查询刷新


              filterData() {


                 // 获取产品类别


                 const type = document.getElementById('product-category-select').value;


                 // 获取日期选择器的值


                 const startDate = document.getElementById('start-date').value;


                 const endDate = document.getElementById('end-date').value;




            dingdanxiangqing(){


                let HisArr="";


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


                let a = {


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


                 // 构造查询参数


                  let canshu1={


                      line:<%= request.getParameter("id") %>,


                      type: type,


                      startDate: startDate,


                      endDate: endDate


                  }


                 // 清空当前数据


                 this.shuzu = [];


                 this.shuzu1 = [];


                 // console.log("输出");


                 // console.log(canshu1);


                 // 拼接SQL查询语句


                 let sql="{call machine_bigScreen('"+canshu1.line+"','"+canshu1.startDate+"','"+canshu1.endDate+"','"+canshu1.type+"')}";


                 let flag = 2;


                 this.loadAjxss('任务查询成功', sql, flag, "shuzu");


                 let sql1="{call machine_bigScreen24('"+canshu.line+"')}";


                 let flag1 = 2;


                 // 调用数据加载函数（例如AJAX请求）


                  this.loadAjxss('任务查询成功', sql1, flag1, "shuzu1");


                 //console.log(this.shuzu);


    },




                    name: "成品",


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


                    label:{fontSize:30}


            echarsInit() {


                let datashijian = [];


                let plans = [];


                let overnums = [];




                // 遍历 shuzu 数组提取日期、计划数和完成数


                for (let i in this.shuzu) {


                    // 这里将 createtime 转换成 "MM/DD" 格式的日期


                    let date = this.shuzu[i]["0_createtime"];


                    let day = new Date(date);


                    let formattedDate = (day.getMonth() + 1) + "/" + day.getDate(); // 格式化日期


                    datashijian.push(formattedDate);




                    plans.push(this.shuzu[i]["4_plan"]);  // 提取计划数


                    overnums.push(this.shuzu[i]["5_overnum"]);  // 提取完成数


                }


                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


                // 选择图表容器


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




                // 设置 ECharts 配置


                let option = {


                    tooltip: { trigger: 'axis' },


                    legend: { data: ['订单计划', '订单完成'] },


                    xAxis: {


                        type: 'category',


                        data: datashijian


                    },


                    yAxis: { type: 'value' },


                    series: [


                        {


                            name: '订单计划',


                            type: 'bar',


                            data: plans,  // 使用提取的计划数数据


                            itemStyle: { color: 'rgba(54, 162, 235, 1)' },  // 设置颜色


                            barWidth: '40%'  // 设置柱状图宽度


                        },


                        {


                            name: '订单完成',


                            type: 'bar',


                            data: overnums,  // 使用提取的完成数数据


                            itemStyle: { color: 'rgba(75, 192, 192, 1)' },  // 设置颜色


                            barWidth: '40%'  // 设置柱状图宽度


                        }


                    ]


                };




                HisArr.setOption(this.val1);


                this.loading=false


                // 设置图表


                HisArr.setOption(option);


                this.loading = false;  // 结束加载状态


            },


            dingdanxiangqing1(){


                let HisArr="";


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


                let a = {


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


            echarsInit3() {


                let datashijian = [];


                let shutdownTimes = [];




                    name: "已完成",


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


                    label:{fontSize:30}


                // 检查数据是否存在


                    // 遍历 shuzu 数据提取停机时长数据


                    for (let i in this.shuzu) {


                        let date = this.shuzu[i]["0_createtime"];


                        let shutdownNum = this.shuzu[i]["8_shutdownNum"];




                        // 格式化日期


                        let day = new Date(date);


                        let formattedDate = (day.getMonth() + 1) + "/" + day.getDate();


                        datashijian.push(formattedDate);


                        // 停机时长


                        shutdownTimes.push(shutdownNum);


                    }


                    // 初始化图表


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




                }


                let b = {


                    value: this.shuzu1[0]['3_smallglass_processing'],


                    name: "未完成",


                    itemStyle: { color: 'darkseagreen' },


                    label:{fontSize:30}


                    let option = {


                        tooltip: { trigger: 'axis' },


                        legend: { data: ['停机时长(分)'] },




                }


                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


                        xAxis: {


                            type: 'category',


                            data: datashijian


                        },


                        yAxis: { type: 'value' },


                        series: [


                            {


                                name: '停机时长(分)',


                                type: 'bar',


                                data: shutdownTimes,


                                itemStyle: { color: 'rgba(255, 99, 132, 1)' },  // 可根据需要调整颜色


                                barWidth: '40%'  // 调整柱宽


                            }


                        ]


                    };




                HisArr.setOption(option);


                this.loading = false;


            },


            updateLineChart() {


                let datatime = [];


                let sum = [];


                let hourFormatted


                for (let i in this.shuzu1) {


                    let hours = this.shuzu1[i]["0_hour"];


                    let production = this.shuzu1[i]["1_total_num"];


                    hourFormatted = new Date(hours).getHours().toString().padStart(2, '0') + ":00";


                datatime.push(hourFormatted);


                sum.push(production);




                }


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


                const option = {


                    xAxis: {


                        type: 'category',


                        data: datatime,


                        axisLabel: {


                            formatter: '{value}:00'


                        }


                    },


                    yAxis: {


                        type: 'value'


                    },


                    series: [{


                        data: sum,


                        type: 'line',


                        smooth: true,


                        lineStyle: {


                            color: 'blue'


                        }


                    }]


                };




                // 使用新数据更新曲线图


                HisArr.setOption(option);


                HisArr.resize();


                this.loading = false;


            }




        },


        watch:{




            shuzu1(){


                // this.dingdanxiangqing(),


                //     this.dingdanxiangqing1()


            }




            shuzu(){


                this.echarsInit();


                this.echarsInit3();


                this.updateLineChart();


            },


        },


        async mounted(){




            let sql=""


            let flag=2


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


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


            // 获取选中的产品类别


            const type = document.getElementById('product-category-select').value;


            // 获取日期选择器的值


            const startDate = document.getElementById('start-date').value;


            const endDate = document.getElementById('end-date').value;


            let canshu={


                line:<%= request.getParameter("id") %>,


                type: type,


                startDate: startDate,


                endDate: endDate


        }


            this.shuzu = [];


            let sql="{call machine_bigScreen('"+canshu.line+"','"+canshu.startDate+"','"+canshu.endDate+"','"+canshu.type+"')}";


            let flag = 2;


            this.loadAjxss('任务查询成功',sql,flag,"shuzu");




            this.shuzu1 = [];


            let sql1="{call machine_bigScreen24('"+canshu.line+"')}";


            let flag1 = 2;


            this.loadAjxss('任务查询成功',sql1,flag1,"shuzu1");












            await setInterval(()=>{


                // 获取选中的产品类别


                const type = document.getElementById('product-category-select').value;


                // 获取日期选择器的值


                const startDate = document.getElementById('start-date').value;


                const endDate = document.getElementById('end-date').value;


                let canshu={


                    line:<%= request.getParameter("id") %>,


                    type: type,


                    startDate: startDate,


                    endDate: endDate


                }


                // console.log("输出：");


                // console.log(canshu);


                sql="{call machine_bigScreen('"+canshu.line+"','"+canshu.startDate+"','"+canshu.endDate+"','"+canshu.type+"')}";


                this.interValLoadAjxs('任务查询成功',sql,flag,"shuzu")




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


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


                sql1="{call machine_bigScreen24('"+canshu.line+"')}";


                this.loadAjxss('24小时产量查询',sql1,flag1,"shuzu1");


            },5000)










        }




    })


    // 初始化数据


    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


        }]


    };


    // 初始化 ECharts 图表


    const trendChart1 = echarts.init(document.getElementById('trendChart1'));


    const trendChart2 = echarts.init(document.getElementById('trendChart2'));


    const trendChart3 = echarts.init(document.getElementById('trendChart3'));


    const trendChart4 = echarts.init(document.getElementById('trendChart4'));


    // 获取当前日期


    const currentDate = new Date();




    const ctx1 = document.getElementById('trendChart1').getContext('2d');


    const trendChart1 = new Chart(ctx1, {


        type: 'bar',


        data: initialData


    });


    // 设置结束日期为明天


    // currentDate.setDate(currentDate.getDate() + 1);


    // const endDate = currentDate.toISOString().split('T')[0];


    // document.getElementById('end-date').value = endDate;


    //


    // // 设置开始日期为三天前


    // currentDate.setDate(currentDate.getDate() - 3);  // 恢复到三天前


    // const startDate = currentDate.toISOString().split('T')[0];


    // document.getElementById('start-date').value = startDate;




    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: '工程不良率',






    // 配置第二个图表 (柱状图 - 工程不良台数和工程不良率)


    const option2 = {


        tooltip: {


            trigger: 'axis'


        },


        legend: {


            data: ['工程不良台数', '工程不良率']


        },


        xAxis: {


            type: 'category',


            data: ['2025-03-30', '2025-03-31', '2025-04-01']


        },


        yAxis: {


            type: 'value'


        },


        series: [{


            name: '工程不良台数',


            type: 'bar',


            data: [5, 3, 2],


            itemStyle: {


                color: 'rgba(75, 192, 192, 1)'


            }


        },


            {


                name: '工程不良率',


                type: 'bar',


                data: [0.01, 0.02, 0.03],


                backgroundColor: 'rgba(255, 99, 132, 0.2)',


                borderColor: 'rgba(255, 99, 132, 1)',


                borderWidth: 1


            }]


        }


    });


                itemStyle: {


                    color: 'rgba(255, 99, 132, 1)'


                }


            }


        ]


    };


    trendChart2.setOption(option2);




    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>