Haier_MES_II.git

parent: 2f8ea37f | 补丁 | 提交 | ignore whitespace

2025-04-21 f1a82707519730abda914f1220d2169d5e13f31a

停机时间统计更新

4个文件已修改

	gmms/WebContent/bigScreen/allGlassflash.jsp	14 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/bigScreen/twoglassCut.jsp	558 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/js/mixins.js	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	gmms/WebContent/qiegeguanli/qiegerenwu.jsp	19 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 gmms/WebContent/bigScreen/allGlassflash.jsp

@@ -1277,7 +1277,15 @@
          itemStyle: {
            color: 'rgb(180, 180, 180)'
          }
        },
        },{
          name: '电耗2',
          type: 'bar',
          barWidth: '40%',
          data: [220, 152, 200, 334, 390, 330, 220],
          itemStyle: {
              color: 'rgb(30, 144, 255)'
          }
      },

      ]
    },
@@ -1382,6 +1390,7 @@
                
                this.val.yAxis[0].name="电耗";
                this.val.series[0].name='电耗(kw.h)'
                this.val.series[1].name='电耗(kw.h)1'
                for(let i in this.machineElectric){
                    dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
                    shijian.push(this.machineElectric[i]["1_date"]);
@@ -1391,9 +1400,10 @@
                    this.val.series[0].itemStyle.color='rgb(84,112,198)'
                    this.val.xAxis[0].data=datashijian;
                    this.val.series[0].data=dianhao;
                    this.val.series[1].data=dianhao;
                    HisArr.setOption(this.val);
                this.loading=false
    },
          },
            echarsInit1(){
            var datashijian=[];
            var s=7;

 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;
@@ -140,13 +142,13 @@
    </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">
            <!-- 产业下拉框 -->
@@ -190,7 +192,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 +210,46 @@

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

            <!-- 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-31</td>
                        <td>厨房电</td>
                        <td>菜阳原电</td>
                        <td>厨电二期</td>
                        <td>1,898</td>
                        <td>2,478</td>
                        <td>580</td>
                        <td>130.56%</td>
                    </tr>
                    <tr>
                        <td>2025-04-1</td>
                        <td>厨房电</td>
                        <td>菜阳原电</td>
                        <td>厨电二期</td>
                        <td>2,300</td>
                        <td>2,300</td>
                        <td>0</td>
                        <td>100.00%</td>
                    </tr>
                    <tr>
                        <td>2025-04-2</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,103 +268,28 @@
            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"
                                }
                            }
                        }

                    }
                ]
            },

        },
        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%"
@@ -406,10 +297,7 @@
                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="";
@@ -420,8 +308,6 @@
                    name: "已完成",
                    itemStyle: { color: '#53a2ff' },
                    label:{fontSize:30}


                }
                let b = {
                    value: this.shuzu1[0]['3_smallglass_processing'],
@@ -437,116 +323,247 @@
                this.val1.series[0].data[0]=a
                this.val1.series[0].data[1]=b
                HisArr.setOption(this.val1);
                this.loading=false
            },
            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 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(option);
                this.loading = false;  // 结束加载状态
            },
            echarsInit3() {
                let datashijian = [];
                let shutdownTimes = [];

                // 检查数据是否存在
                // if (this.shuzu && this.shuzu.length > 0) {
                    // 遍历 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);
                    }

                    console.log('日期:', datashijian);
                    console.log('停机时长:', shutdownTimes);

                    // 初始化图表
                    let HisArr = this.$echarts.init(document.getElementById('trendChart3'));

                    let option = {
                        tooltip: { trigger: 'axis' },
                        legend: { data: ['停机时长(分)'] },

                        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);
                // } else {
                //     console.error('shuzu 数据为空或未加载');
                //     console.log(this.shuzu);
                // }
                this.loading = false;
            },
        },
        watch:{

            shuzu1(){
                // this.dingdanxiangqing(),
                //     this.dingdanxiangqing1()
            }

            shuzu(){
                this.echarsInit();
                this.echarsInit3();
            },
        },
        async mounted(){
        mounted: function() {

            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)



            this.shuzu = [];
            let sql="{call machine_bigScreen(5,'','','')}";
            let flag = 2;
            this.loadAjxss('任务查询成功',sql,flag,"shuzu");

        }

    })
    // 初始化数据
    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 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: '工程不良率',

    // 配置第一个图表 (柱状图 - 订单计划和订单完成)
    // const option1 = {
    //     tooltip: {
    //         trigger: 'axis'
    //     },
    //     legend: {
    //         data: ['订单计划', '订单完成']
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: dates
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         name: '订单计划',
    //         type: 'bar',
    //         data: plans,
    //         itemStyle: {
    //             color: 'rgba(54, 162, 235, 1)'
    //         }
    //     },
    //         {
    //             name: '订单完成',
    //             type: 'bar',
    //             data: overnums,
    //             itemStyle: {
    //                 color: 'rgba(75, 192, 192, 1)'
    //             }
    //         }
    //     ]
    // };
    // trendChart1.setOption(option1);

    // 配置第二个图表 (柱状图 - 工程不良台数和工程不良率)
    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
            }]
        }
    });
    // 配置第三个图表 (柱状图 - 停机时长和停机时率)
    // const option3 = {
    //     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: [1, 2, 3],
    //         itemStyle: {
    //             color: 'rgba(255, 159, 64, 1)'
    //         }
    //     },
    //         {
    //             name: '停机时率',
    //             type: 'bar',
    //             data: [0.02, 0.03, 0.04],
    //             itemStyle: {
    //                 color: 'rgba(153, 102, 255, 1)'
    //             }
    //         }
    //     ]
    // };
    // trendChart3.setOption(option3);

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

        // 示例：假设您已经通过查询筛选了数据，下面模拟更新图表数据
        // 更新第一个趋势图
        trendChart1.data = {
        // 模拟新的数据
        const newData1 = {
            labels: ['2025-03-30', '2025-03-31'],
            datasets: [{
                label: '订单计划',
@@ -562,41 +579,18 @@
                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();
        trendChart1.setOption({
            xAxis: {
                data: newData1.labels
            },
            series: [{
                data: newData1.datasets[0].data
            },
                {
                    data: newData1.datasets[1].data
                }
            ]
        });
    }

    // 重置搜索栏

 gmms/WebContent/js/mixins.js

@@ -59,6 +59,7 @@
            
      },
        async loadAjxss(gongneng,sql,flag,vals){
			
          let param = new URLSearchParams(); 
          param.append("yemian","123"); 
          param.append("gongneng",gongneng);
@@ -67,9 +68,11 @@
          param.append("anquanma","anquanma1");
        await this.$http.post( '../mysqlInsert/mysql.jsp',param)
            .then(function (response) {

                if(flag==2){
                    let result=response.data;
                    let index = result.indexOf("[{");
                    //console.log('....'+index);
                    if(index>-1){
                        result=result.substring(index).trim();
                        app.$data[vals]=JSON.parse(result);

 gmms/WebContent/qiegeguanli/qiegerenwu.jsp

@@ -15,8 +15,6 @@

<link rel="stylesheet" href="../static/css/element.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	
<script type="text/javascript">
/*   var interval = setInterval('refreshStatus()', 20000);
   $(document).ready(function(){
@@ -86,7 +84,7 @@
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in shuzu" style="height: 51px;">
                            <tr v-for="(item, index) in shuzu" :key="index" style="height: 51px;">
                                <td>{{item['1_order_id']}}</td>
                                <td>{{item['2_largeglass_length']}}</td>
                                <td>{{item['3_largeglass_width']}}</td>
@@ -110,8 +108,8 @@
                                    手动完成
                                </td>
                                <td v-else>
									 
									 


                                </td>
                                <td>{{item['12_order_maker']}}</td>
                                <td  v-if="item['11_order_status']==1">
@@ -120,7 +118,7 @@
                                    <button @click="dainjishijian('手动完成',item['0_id'])" style='background-color: #5CADFE' class='btn btn-large btn-success' >手动完成</button>
                                </td>
                                <td  v-else-if="item['11_order_status']==2">
									

                                    <button @click="dainjishijian('结束任务',item['0_id'])" style='background-color: red' class='btn btn-large btn-success' >结束任务</button>
                                    &nbsp;&nbsp;&nbsp;
                                    <button @click="dainjishijian('取消任务',item['0_id'])" style='background-color: #5CADFE' class='btn btn-large btn-success' >取消任务</button>
@@ -129,7 +127,7 @@
                                    <button @click="dainjishijian('重新下发',item[0])" style='background-color: #5CADFE' class='btn btn-large btn-success' >重新下发</button>
                                </td> -->
                                <td v-else>
									

                                </td>
                            </tr>
                        </tbody>
@@ -365,10 +363,11 @@
         let canshu={
                 line:<%= request.getParameter("id") %>
         }
         this.shuzu="";
          let sql="{call AXJ_qiegeguanli_threelinetask_list1()}";
         // this.shuzu="";
         let sql="{call AXJ_qiegeguanli_threelinetask_list1()}";
         let flag=2;
         this.loadAjxss('任务查询成功',sql,flag,"shuzu"); 
         this.loadAjxss('任务查询成功',sql,flag,"shuzu");
         console.log("sql:",this.shuzu);
         /* sql="{call AXJ_qiegeguanli_peifanghao_cahxun()}";
         loadAjxs('配方号查询',sql,flag,"peifanhao");  */
      }

			@@ -1277,7 +1277,15 @@
			itemStyle: {
			color: 'rgb(180, 180, 180)'
			}
			},
			},{
			name: '电耗2',
			type: 'bar',
			barWidth: '40%',
			data: [220, 152, 200, 334, 390, 330, 220],
			itemStyle: {
			color: 'rgb(30, 144, 255)'
			}
			},

			]
			},
			@@ -1382,6 +1390,7 @@

			this.val.yAxis[0].name="电耗";
			this.val.series[0].name='电耗(kw.h)'
			this.val.series[1].name='电耗(kw.h)1'
			for(let i in this.machineElectric){
			dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
			shijian.push(this.machineElectric[i]["1_date"]);
			@@ -1391,9 +1400,10 @@
			this.val.series[0].itemStyle.color='rgb(84,112,198)'
			this.val.xAxis[0].data=datashijian;
			this.val.series[0].data=dianhao;
			this.val.series[1].data=dianhao;
			HisArr.setOption(this.val);
			this.loading=false
			},
			},
			echarsInit1(){
			var datashijian=[];
			var s=7;

			@@ -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;
			@@ -140,13 +142,13 @@
			</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">
			<!-- 产业下拉框 -->
			@@ -190,7 +192,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 +210,46 @@

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

			<!-- 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-31</td>
			<td>厨房电</td>
			<td>菜阳原电</td>
			<td>厨电二期</td>
			<td>1,898</td>
			<td>2,478</td>
			<td>580</td>
			<td>130.56%</td>
			</tr>
			<tr>
			<td>2025-04-1</td>
			<td>厨房电</td>
			<td>菜阳原电</td>
			<td>厨电二期</td>
			<td>2,300</td>
			<td>2,300</td>
			<td>0</td>
			<td>100.00%</td>
			</tr>
			<tr>
			<td>2025-04-2</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,103 +268,28 @@
			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"
			}
			}
			}

			}
			]
			},

			},
			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%"
			@@ -406,10 +297,7 @@
			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="";
			@@ -420,8 +308,6 @@
			name: "已完成",
			itemStyle: { color: '#53a2ff' },
			label:{fontSize:30}


			}
			let b = {
			value: this.shuzu1[0]['3_smallglass_processing'],
			@@ -437,116 +323,247 @@
			this.val1.series[0].data[0]=a
			this.val1.series[0].data[1]=b
			HisArr.setOption(this.val1);
			this.loading=false
			},
			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 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(option);
			this.loading = false; // 结束加载状态
			},
			echarsInit3() {
			let datashijian = [];
			let shutdownTimes = [];

			// 检查数据是否存在
			// if (this.shuzu && this.shuzu.length > 0) {
			// 遍历 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);
			}

			console.log('日期:', datashijian);
			console.log('停机时长:', shutdownTimes);

			// 初始化图表
			let HisArr = this.$echarts.init(document.getElementById('trendChart3'));

			let option = {
			tooltip: { trigger: 'axis' },
			legend: { data: ['停机时长(分)'] },

			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);
			// } else {
			// console.error('shuzu 数据为空或未加载');
			// console.log(this.shuzu);
			// }
			this.loading = false;
			},
			},
			watch:{

			shuzu1(){
			// this.dingdanxiangqing(),
			// this.dingdanxiangqing1()
			}

			shuzu(){
			this.echarsInit();
			this.echarsInit3();
			},
			},
			async mounted(){
			mounted: function() {

			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)



			this.shuzu = [];
			let sql="{call machine_bigScreen(5,'','','')}";
			let flag = 2;
			this.loadAjxss('任务查询成功',sql,flag,"shuzu");

			}

			})
			// 初始化数据
			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 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: '工程不良率',

			// 配置第一个图表 (柱状图 - 订单计划和订单完成)
			// const option1 = {
			// tooltip: {
			// trigger: 'axis'
			// },
			// legend: {
			// data: ['订单计划', '订单完成']
			// },
			// xAxis: {
			// type: 'category',
			// data: dates
			// },
			// yAxis: {
			// type: 'value'
			// },
			// series: [{
			// name: '订单计划',
			// type: 'bar',
			// data: plans,
			// itemStyle: {
			// color: 'rgba(54, 162, 235, 1)'
			// }
			// },
			// {
			// name: '订单完成',
			// type: 'bar',
			// data: overnums,
			// itemStyle: {
			// color: 'rgba(75, 192, 192, 1)'
			// }
			// }
			// ]
			// };
			// trendChart1.setOption(option1);

			// 配置第二个图表 (柱状图 - 工程不良台数和工程不良率)
			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
			}]
			}
			});
			// 配置第三个图表 (柱状图 - 停机时长和停机时率)
			// const option3 = {
			// 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: [1, 2, 3],
			// itemStyle: {
			// color: 'rgba(255, 159, 64, 1)'
			// }
			// },
			// {
			// name: '停机时率',
			// type: 'bar',
			// data: [0.02, 0.03, 0.04],
			// itemStyle: {
			// color: 'rgba(153, 102, 255, 1)'
			// }
			// }
			// ]
			// };
			// trendChart3.setOption(option3);

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

			// 示例：假设您已经通过查询筛选了数据，下面模拟更新图表数据
			// 更新第一个趋势图
			trendChart1.data = {
			// 模拟新的数据
			const newData1 = {
			labels: ['2025-03-30', '2025-03-31'],
			datasets: [{
			label: '订单计划',
			@@ -562,41 +579,18 @@
			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();
			trendChart1.setOption({
			xAxis: {
			data: newData1.labels
			},
			series: [{
			data: newData1.datasets[0].data
			},
			{
			data: newData1.datasets[1].data
			}
			]
			});
			}

			// 重置搜索栏

			@@ -59,6 +59,7 @@

			},
			async loadAjxss(gongneng,sql,flag,vals){

			let param = new URLSearchParams();
			param.append("yemian","123");
			param.append("gongneng",gongneng);
			@@ -67,9 +68,11 @@
			param.append("anquanma","anquanma1");
			await this.$http.post( '../mysqlInsert/mysql.jsp',param)
			.then(function (response) {

			if(flag==2){
			let result=response.data;
			let index = result.indexOf("[{");
			//console.log('....'+index);
			if(index>-1){
			result=result.substring(index).trim();
			app.$data[vals]=JSON.parse(result);

			@@ -15,8 +15,6 @@

			<link rel="stylesheet" href="../static/css/element.css">
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


			<script type="text/javascript">
			/* var interval = setInterval('refreshStatus()', 20000);
			$(document).ready(function(){
			@@ -86,7 +84,7 @@
			</tr>
			</thead>
			<tbody>
			<tr v-for="item in shuzu" style="height: 51px;">
			<tr v-for="(item, index) in shuzu" :key="index" style="height: 51px;">
			<td>{{item['1_order_id']}}</td>
			<td>{{item['2_largeglass_length']}}</td>
			<td>{{item['3_largeglass_width']}}</td>
			@@ -110,8 +108,8 @@
			手动完成
			</td>
			<td v-else>




			</td>
			<td>{{item['12_order_maker']}}</td>
			<td v-if="item['11_order_status']==1">
			@@ -120,7 +118,7 @@
			<button @click="dainjishijian('手动完成',item['0_id'])" style='background-color: #5CADFE' class='btn btn-large btn-success' >手动完成</button>
			</td>
			<td v-else-if="item['11_order_status']==2">


			<button @click="dainjishijian('结束任务',item['0_id'])" style='background-color: red' class='btn btn-large btn-success' >结束任务</button>

			<button @click="dainjishijian('取消任务',item['0_id'])" style='background-color: #5CADFE' class='btn btn-large btn-success' >取消任务</button>
			@@ -129,7 +127,7 @@
			<button @click="dainjishijian('重新下发',item[0])" style='background-color: #5CADFE' class='btn btn-large btn-success' >重新下发</button>
			</td> -->
			<td v-else>


			</td>
			</tr>
			</tbody>
			@@ -365,10 +363,11 @@
			let canshu={
			line:<%= request.getParameter("id") %>
			}
			this.shuzu="";
			let sql="{call AXJ_qiegeguanli_threelinetask_list1()}";
			// this.shuzu="";
			let sql="{call AXJ_qiegeguanli_threelinetask_list1()}";
			let flag=2;
			this.loadAjxss('任务查询成功',sql,flag,"shuzu");
			this.loadAjxss('任务查询成功',sql,flag,"shuzu");
			console.log("sql:",this.shuzu);
			/* sql="{call AXJ_qiegeguanli_peifanghao_cahxun()}";
			loadAjxs('配方号查询',sql,flag,"peifanhao"); */
			}