php+echarts实现数据可视化实例2

news2024/11/16 17:56:50

效果:

代码

php

<?php
include('includes/session.inc');
include('includes/SQL_CommonFunctions.inc');
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/e-kanban/kanban.css">
    <script src="./js/jquery-2.1.0.js" type="text/javascript"></script>
    <script src="./js/echarts.js" type="text/javascript"></script>
    <title>电子看板</title>
</head>

<body>
    <div class="kanban_all">
        <div class="kanban_all_position">
            <div class="kanban_line">
                <div class="kanban_title">
                    工序待生产工时统计
                </div>
                <div class="kanban_content">
                    <table>
                        <tr>
                            <td>
                                <div id="poruku" style="width:100%;height:220px;"></div>
                            </td>
                            <td>
                                <div style="width: 30px; height:220px;"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="kanban_line">
                <div class="kanban_title">
                    近半年良率、不良率
                </div>
                <div class="kanban_content">
                    <?php
                    $sql5 = "SELECT 
                                months.month,
                                SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,
                                SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,
                                CASE
                                    WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
                                    ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
                                END AS good_rate,
                                CASE
                                    WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
                                    ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
                                END AS bad_rate
                            FROM 
                                (
                                    SELECT DATE_FORMAT(DATE_SUB(LAST_DAY(CURDATE()), INTERVAL n.num MONTH), '%Y-%m') AS month
                                    FROM (SELECT 0 AS num UNION ALL SELECT 1 UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION ALL SELECT 5) n
                                ) months
                            LEFT JOIN wip_transactions ON DATE_FORMAT(FROM_UNIXTIME(transaction_date), '%Y-%m') = months.month
                            GROUP BY 
                                months.month
                            ORDER BY 
                                months.month ASC";
                    $result5 = DB_query($sql5, $db);
                    // 检查查询是否成功
                    if ($result5) {
                        // 检查查询结果是否为空
                        if (mysqli_num_rows($result5) > 0) {
                    ?>
                            <table class="table">
                                <tr>
                                    <th>月份</th>
                                    <th>良品数量</th>
                                    <th>不良数量</th>
                                    <th>良品率 (%)</th>
                                    <th>不良率 (%)</th>
                                </tr>
                                <?php
                                while ($row = mysqli_fetch_assoc($result5)) {
                                ?>
                                    <tr>
                                        <?php if ($row['bad_rate'] != 0) : ?>
                                            <td style="color: red;"><?php echo $row['month']; ?></td>
                                        <?php else : ?>
                                            <td><?php echo $row['month']; ?></td>
                                        <?php endif; ?>
                                        <td><?php echo $row['total_transaction_quantity']; ?></td>
                                        <td><?php echo $row['total_bad_quantity']; ?></td>
                                        <td><?php echo $row['good_rate']; ?></td>
                                        <?php if ($row['bad_rate'] != 0) : ?>
                                            <td style="color: red;"><?php echo $row['bad_rate']; ?></td>
                                        <?php else : ?>
                                            <td><?php echo $row['bad_rate']; ?></td>
                                        <?php endif; ?>
                                    </tr>
                                <?php
                                }
                                ?>
                            </table>
                    <?php
                        } else {
                            echo "No results found.";
                        }
                    } else {
                        echo "Query failed.";
                    }
                    ?>
                </div>
            </div>
            <div class="kanban_line">
                <div class="kanban_line_double">
                    <div class="left">
                        <div class="kanban_title">
                            近半年良品、不良率总计
                        </div>
                        <div class="kanban_content">
                            <table>
                                <tr>
                                    <td>
                                        <div id="poruku2" style="width:100%;height:220px;"></div>
                                    </td>
                                    <td>
                                        <div style="width: 30px; height:220px;"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="middle"></div>
                    <div class="right">
                        <div class="kanban_title">
                            全部良品、不良比率
                        </div>
                        <div class="kanban_content">
                            <table>
                                <tr>
                                    <td>
                                        <div id="poruku3" style="width:100%;height:220px;"></div>
                                    </td>
                                    <td>
                                        <div style="width: 30px; height:220px;"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kanban_line">
                <div class="kanban_title">
                    站别良品、不良率
                </div>
                <div class="kanban_content">
                    <table>
                        <tr>
                            <td>
                                <div id="poruku1" style="width:100%;height:220px;"></div>
                            </td>
                            <td>
                                <div style="width: 30px; height:220px;"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="kanban_line">
                <div class="kanban_title">
                    员工良品、不良比率
                </div>
                <div class="kanban_content">
                    <table>
                        <tr>
                            <td>
                                <div id="poruku4" style="width:100%;height:220px;"></div>
                            </td>
                            <td>
                                <div style="width: 30px; height:220px;"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- <div class="kanban_line">
                <div class="kanban_title">
                    员工工时
                </div>
                <div class="kanban_content">
                    <table>
                        <tr>
                            <td>
                                <div id="poruku6" style="width:100%;height:220px;"></div>
                            </td>
                            <td>
                                <div style="width: 30px; height:220px;"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div> -->


        </div>
    </div>
</body>

</html>




<?php

//按站别分的良率和不良率
$sql1 = "SELECT 
            operation_code,
            SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,
            SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,
            CASE
                WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
                ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
            END AS good_rate,
            CASE
                WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
                ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
            END AS bad_rate
        FROM wip_transactions
        GROUP BY operation_code
        ORDER BY bad_rate desc
";
$result1 = DB_query($sql1, $db);
while ($array1 = mysqli_fetch_assoc($result1)) {
    $arrays1[] = $array1;
}

if (is_array($arrays1)) {
    foreach ($arrays1 as $key => $value) {
        $goodnum1[]  = $value['total_transaction_quantity'];
        $badnum1[]  = $value['total_bad_quantity'];
        $arr_good_quantity1[]  = $value['good_rate'];
        $arr_bad_quantity1[]  = $value['bad_rate'];
        $arrvendor1[]  = $value['operation_code'];
    }
} else {
    $goodnum1[]  = 0;
    $badnum1[]  = 0;
    $arr_good_quantity1[]  = 0;
    $arr_bad_quantity1[]  = 0;
    $arrvendor1[]  = 0;
}
echo "<script>";
echo ";   var goodnum1 = ";
echo json_encode($goodnum1);
echo ";   var badnum1 = ";
echo json_encode($badnum1);
echo ";   var good_rate1 = ";
echo json_encode($arr_good_quantity1);
echo ";   var bad_rate1 = ";
echo json_encode($arr_bad_quantity1);
echo "; var x1 = ";
echo json_encode($arrvendor1);
echo "; 
    var ydata = []
    var myChart1 = echarts.init(document.getElementById('poruku1')); 
    option1 = {
        //滚动显示
        dataZoom: [{
            type: 'slider',  // 滑动条型式的dataZoom组件
            show: true,  // 显示dataZoom组件
            start: 0,  // 默认数据窗口范围的起始位置为0
            end: 30,  // 默认数据窗口范围的结束位置为30
            xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引，默认为第一个x轴
            filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式
            height: 15 // 设置滑动条型式的高度为20像素
        }, {
            type: 'inside',  // 内置型式的dataZoom组件
            start: 0,  // 默认数据窗口范围的起始位置为0
            end: 30,  // 默认数据窗口范围的结束位置为30
            xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引，默认为第一个x轴
            filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式
            height: 15 
        }],
        //图形颜色
        color: ['#5571c8','#91cc75'],
        //提示框，鼠标悬停在图形上的注解
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function(params) {
                var index = params[0].dataIndex;
                var goodnum = goodnum1[index];
                var badnum = badnum1[index];
                var goodrate = params[0].value;
                var badrate = params[1].value;
                return '良品数量：' + goodnum + '<br>' +
                    '不良数量：' + badnum + '<br>' +
                    '良品率：' + goodrate + '%' + '<br>' +
                    '不良率：' + badrate + '%';
            }
        },
        //配置网格组件，用于定义图表的位置和大小
        grid: {
            top: '15%',  // 增加top的值来创建间距
            left: '3%',
            right: '3%',
            bottom: '20%',  // 增加bottom的值来创建间距
            containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
        },
        //横坐标
         xAxis: {
            name: '时间',
            nameTextStyle: {
                padding: [0, 0, -25, -25]    // 横坐标名称与原位置的边距
            },
            type: 'category', //横坐标数据类型为类别型，适用于离散的数据
            data: x1, //设置横坐标的数据，使用变量x1中的数据。
            axisLabel: {
                interval: 0, // 设置横坐标刻度的显示间隔，默认为0表示全部显示
                // 如果刻度标签太长，可以使用rotate进行旋转
                textStyle: {
                    fontSize: 14
                }
            }
        },
        //比例
        yAxis: [
            {
                name: '比例',
                type: 'value', //数据类型为数值型。
                axisLabel: {
                    formatter: '{value}%'
                },
                 splitLine: {
                    show: false  // 隐藏纵坐标轴的背景横线
                },
            },
            
        ],
        series: [
            {
                name:'良品率',
                type: 'bar',
                data: good_rate1,
                barWidth: '30%', // 设置柱状图的宽度为整个类目宽度的40%
                barGap: '20%', // 设置柱状图之间的间距为整个类目宽度的20%
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%',
                            textStyle: {
                                color: 'black',
                                fontSize: 10
                            }
                        }
                    }
                }
            },
            {
                name:'不良率',
                type: 'bar',
                data: bad_rate1,
                barWidth: '30%', // 设置柱状图的宽度为整个类目宽度的40%
                barGap: '20%', // 设置柱状图之间的间距为整个类目宽度的20%
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%',
                            textStyle: {
                                color: 'black',
                                fontSize: 10
                            }
                        }
                    }
                }
            }
        ]
    };
    myChart1.setOption(option1);    
    </script>";

//计算机半年内的总良品和不良
$sql2 = "SELECT 
            SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,
            SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,
            CASE
                WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
                ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
            END AS good_rate,
            CASE
                WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
                ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
            END AS bad_rate,
            DATE(DATE_SUB(DATE_FORMAT(NOW(), '%Y-%m-%d'), INTERVAL 6 MONTH)) AS six_months_ago
        FROM 
            wip_transactions
        WHERE 
            transaction_date >= UNIX_TIMESTAMP(DATE_SUB(DATE_FORMAT(NOW(), '%Y-%m-%d'), INTERVAL 6 MONTH))
            AND transaction_date <= UNIX_TIMESTAMP(DATE_FORMAT(NOW(), '%Y-%m-%d'));
        ";
$result2 = DB_query($sql2, $db);
if ($array2 = mysqli_fetch_assoc($result2)) {
    $good_rate2 = $array2['good_rate'];
    $bad_rate2 = $array2['bad_rate'];
    $six_months_ago2 = $array2['six_months_ago'];
} else {
    $good_rate2 = 0;
    $bad_rate2 = 0;
    $six_months_ago2 = 0;
}
$array2 = array(
    (object)array('value' => $good_rate2, 'name' => '良品率'),
    (object)array('value' => $bad_rate2, 'name' => '不良率')
);

echo "<script>";
echo ";   var array2 = ";
echo json_encode($array2);
echo "; 
    var ydata = []
    var myChart2 = echarts.init(document.getElementById('poruku2')); 
    option2 = {
        title: {
            left: 'center',
            top: 'center'
        },
        color:[
            '#e5924b','#00c5d4'
        ],  
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%'  // 设置提示框内容格式，b代表数据项名称，c代表数据项值
        },
          series: [
    {
      type: 'pie',
      data: array2,
      radius: ['40%', '70%']
    }
  ]
    };
    myChart2.setOption(option2);    
    </script>";

//计算总的良品和不良
$sql3 = "SELECT 
        SUM( IFNULL( transaction_quantity, 0 ) ) AS total_transaction_quantity, 
        SUM( IFNULL( bad_quantity, 0 ) ) AS total_bad_quantity, 
        CASE
            WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
            ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
        END AS good_rate,
        CASE
            WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
            ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
        END AS bad_rate
        FROM wip_transactions";
$result3 = DB_query($sql3, $db);
if ($array3 = mysqli_fetch_assoc($result3)) {
    $good_rate3 = $array3['good_rate'];
    $bad_rate3 = $array3['bad_rate'];
} else {
    $good_rate3 = 0;
    $bad_rate3 = 0;
}
$array3 = array(
    (object)array('value' => $good_rate3, 'name' => '良品率'),
    (object)array('value' => $bad_rate3, 'name' => '不良率')
);

echo "<script>";
echo ";   var array3 = ";
echo json_encode($array3);
echo "; 
    var ydata = []
    var myChart3 = echarts.init(document.getElementById('poruku3')); 
    option3 = {
        title: {
            left: 'center',
            top: 'center'
        },
        color:[
            '#fc6696','#985afb'
        ],  
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%'  // 设置提示框内容格式，b代表数据项名称，c代表数据项值
        },
          series: [
    {
      type: 'pie',
      data: array3,
      radius: ['40%', '70%']
    }
  ]
    };
    myChart3.setOption(option3);    
    </script>";


//计算总的良品和不良
$sql4 = "SELECT 
    wt.employee_num,
    he.employee_name,
    SUM(IFNULL(wt.transaction_quantity, 0)) AS total_transaction_quantity,
    SUM(IFNULL(wt.bad_quantity, 0)) AS total_bad_quantity,
    CASE
        WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
        ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
    END AS good_rate,
    CASE
        WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
        ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
    END AS bad_rate
FROM 
    wip_transactions wt, hr_employees he
WHERE 
    wt.employee_num = he.employee_num
    -- AND transaction_date >= UNIX_TIMESTAMP(DATE_SUB(DATE_FORMAT(NOW(), '%Y-%m-%d'), INTERVAL 6 MONTH))
    -- AND transaction_date <= UNIX_TIMESTAMP(DATE_FORMAT(NOW(), '%Y-%m-%d'))
GROUP BY
    wt.employee_num
ORDER BY
    bad_rate desc
";
$result4 = DB_query($sql4, $db);
while ($array4 = mysqli_fetch_assoc($result4)) {
    $arrays4[] = $array4;
}

if (is_array($arrays4)) {
    foreach ($arrays4 as $key => $value) {
        $good_rate4[]  = $value['good_rate'];
        $bad_rate4[]  = $value['bad_rate'];
        $goodnum4[]  = $value['total_transaction_quantity'];
        $badnum4[]  = $value['total_bad_quantity'];
        $employee_name[]  = $value['employee_name'];
    }
} else {
    $good_rate4[]  = 0;
    $bad_rate4[]  = 0;
    $goodnum4[]  = 0;
    $badnum4[]  = 0;
    $employee_name[]  = 0;
}
echo "<script>";
echo ";   var goodnum4 = ";
echo json_encode($goodnum4);
echo "; var badnum4 = ";
echo json_encode($badnum4);
echo ";   var good_rate4 = ";
echo json_encode($good_rate4);
echo "; var bad_rate4 = ";
echo json_encode($bad_rate4);
echo "; var employee_name = ";
echo json_encode($employee_name);
echo "; 
    var ydata = []
    var myChart4 = echarts.init(document.getElementById('poruku4')); 
    option4 = {
        //滚动显示
        dataZoom: [{
            type: 'slider',  // 滑动条型式的dataZoom组件
            show: true,  // 显示dataZoom组件
            start: 0,  // 默认数据窗口范围的起始位置为0
            end: 10,  // 默认数据窗口范围的结束位置为30
            xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引，默认为第一个x轴
            filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式
            height:15
        }, {
            type: 'inside',  // 内置型式的dataZoom组件
            start: 0,  // 默认数据窗口范围的起始位置为0
            end: 10,  // 默认数据窗口范围的结束位置为30
            xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引，默认为第一个x轴
            filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式
            height:15
        }],
        //配置网格组件，用于定义图表的位置和大小
        grid: {
            top: '12%',  // 增加top的值来创建间距
            left: '2%',
            right: '5%',
            bottom: '20%',  // 增加bottom的值来创建间距
            containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
        },
        //横坐标
         xAxis: {
            name: '员工',
            data: employee_name, //设置横坐标的数据，使用变量employee_name中的数据。
        },
        //纵坐标
        yAxis: {
            axisLabel: {
                formatter: '{value}%',
            },
            splitLine: {
                show: false  // 隐藏纵坐标轴的背景横线
            },
        },
        //图形颜色
        color: [
            '#b381dd','#31a3ff'
        ],
        //提示框，鼠标悬停在图形上的注解
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function(params) {
                var index = params[0].dataIndex;
                var goodnum = goodnum4[index];
                var badnum = badnum4[index];
                var goodrate = params[0].value;
                var badrate = params[1].value;
                return employee_name[index] + '<br>' +
                    '良品数量：' + goodnum + '<br>' +
                    '不良数量：' + badnum + '<br>' +
                    '良品率：' + goodrate + '%' + '<br>' +
                    '不良率：' + badrate + '%';
            }
        },
        series: [
            {
                name:'良品率',
                data:good_rate4,
                type:'bar',
                stack:'x',  
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '良率:{c}%',
                            textStyle: {
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                }
            },
            {
                name:'不良率',
                data:bad_rate4,
                type:'bar',
                stack:'x',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '不良率:{c}%',
                            textStyle: {
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                }
            },
        ],
    };
    myChart4.setOption(option4);    
    </script>";

//查询站别的良率、不良率
// $sql5 = "SELECT 
//     operation_code,
//     SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,
//     SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,
//     CASE
//         WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
//         ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
//     END AS good_rate,
//     CASE
//         WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
//         ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
//     END AS bad_rate
// FROM wip_transactions
// GROUP BY operation_code";
// $result5 = DB_query($sql5, $db);

//员工工时
$sql6 = "SELECT 
  wt.employee_num,he.employee_name,
  SUM((end_date - begin_date) / 3600) AS total_hours,
  SUM((end_date - begin_date) / (3600 * 24)) AS total_days,
  SUM((end_date - begin_date) / (3600 * 24 * 365)) AS total_years
FROM wip_transactions wt, hr_employees he
WHERE wt.employee_num = he.employee_num
GROUP BY wt.employee_num";
$result6 = DB_query($sql6, $db);
while ($array6 = mysqli_fetch_assoc($result6)) {
    $arrays6[] = $array6;
}
if (is_array($arrays6)) {
    foreach ($arrays6 as $key => $value) {
        $total_hours6[]  = $value['total_hours'];
        $total_days6[]  = $value['total_days'];
        $total_years6[]  = $value['total_years'];
        $employee_name6[]  = $value['employee_name'];
    }
} else {
    $total_hours6[]  = 0;
    $total_days6[]  = 0;
    $total_years6[]  = 0;
    $employee_name6[]  = 0;
}
echo "<script>";
echo ";   var employee_name6 = ";
echo json_encode($employee_name6);
echo ";   var total_hours6 = ";
echo json_encode($total_hours6);

echo "; 
    var data = []; 
    var myChart6 = echarts.init(document.getElementById('poruku6')); 
    option6 = {
        yAxis: {
            data: employee_name6
        },
        xAxis: {
            
        },
        series: [
            {
                type: 'bar',
                data: total_hours6
            }
        ]
    };


    myChart6.setOption(option6);    
    </script>";



// 待生产工时统计
$sql7 = "SELECT   a.operation_code,operation_name,sum(begin_quantity*standard_time) as paipei,sum(a.output_quantity*standard_time) wancheng,sum((begin_quantity-a.output_quantity)*standard_time) wait
		  from wip_operation_plan a,bom_parameters b,wip_jobs_all c
	     where  a.operation_code=b.operation_code 
         and begin_quantity>a.output_quantity 
		 and standard_time>0
		 and a.wip_entity_name=c.wip_entity_name 
	     GROUP BY a.operation_code,operation_name
		 order by a.operation_code desc";
$result7 = DB_query($sql7, $db);

while ($array7 = mysqli_fetch_assoc($result7)) {
    $arrays7[] = $array7;
}

if (is_array($arrays7)) {
    foreach ($arrays7 as $key => $value) {
        $arramount7[]  = $value['wait'];
        $arrvendor7[]  = $value['operation_name'];
    }
} else {
    $arramount7[]  = 0;
    $arrvendor7[]  = 0;
}
echo "<script>";
echo ";   var num7 = ";
echo json_encode($arramount7);
echo "; var customer7 = ";
echo json_encode($arrvendor7);
echo "; 
    var ydata = []
    var myChart7 = echarts.init(document.getElementById('poruku')); 
    option7 = {
        //滚动显示
        dataZoom: [{
            type: 'slider',  // 滑动条型式的dataZoom组件
            show: true,  // 显示dataZoom组件
            start: 0,  // 默认数据窗口范围的起始位置为0
            end: 30,  // 默认数据窗口范围的结束位置为30
            xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引，默认为第一个x轴
            filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式
            height: 15 // 设置滑动条型式的高度为20像素
        }, {
            type: 'inside',  // 内置型式的dataZoom组件
            start: 0,  // 默认数据窗口范围的起始位置为0
            end: 30,  // 默认数据窗口范围的结束位置为30
            xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引，默认为第一个x轴
            filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式
            height: 15 
        }],
        //标题
        // title: {
        //     text: '工序待生产工时统计'
        // },
        //图形颜色
        color: [
            '#3398DB'
        ],
        //提示框，鼠标悬停在图形上的注解
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        //配置网格组件，用于定义图表的位置和大小
        grid: {
            top: '20%',  // 增加top的值来创建间距
            left: '3%',
            right: '3%',
            bottom: '20%',  // 增加bottom的值来创建间距
            containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
        },
        //横坐标
         xAxis: {
            name: '工序',
            nameTextStyle: {
                padding: [0, 0, -25, -25]    // 横坐标名称与原位置的边距
            },
            type: 'category', //横坐标数据类型为类别型，适用于离散的数据
            data: customer7, //设置横坐标的数据，使用变量customer7中的数据。
             axisLabel: {
                interval: 0, // 设置横坐标刻度的显示间隔，默认为0表示全部显示
                // 如果刻度标签太长，可以使用rotate进行旋转
                textStyle: {
                    fontSize: 14
                }
            }
        },
        //纵坐标
        yAxis: [
            {
                name: '工时',
                type: 'value', //数据类型为数值型。
                axisLabel: {
                    interval: 0, // 设置横坐标刻度的显示间隔，默认为0表示全部显示
                    // 如果刻度标签太长，可以使用rotate进行旋转
                    textStyle: {
                        fontSize: 14
                    }
                },
                 splitLine: {
                    show: false  // 隐藏纵坐标轴的背景横线
                },
            },
            
        ],
        series: [
            {
                name: '工时',
                type: 'bar',
                barWidth: '25%',
                data: num7,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                }
            },
        ],
    };
    myChart7.setOption(option7);    
    </script>";

css

body {
    background-color: #f3f6fb;
    padding: 0px;
    margin: 0px;
}

.kanban_all {
    /* border: 1px solid black; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kanban_all_position {
    /* border: 1px solid black; */
    width: 98%;
    display: flex;
    flex-wrap: wrap;
}

.kanban_line {
    /* border: 1px solid black; */
    width: calc(50% - 2%);
    margin: 1% 1% 0 1%;
    background-color: #fff;
}

.kanban_title {
    background-color: #fff;
    padding: 2%;
    font-size: 120%;
    font-weight: bold;
    font-family: '华文细黑';
    border-left: 4px solid #75b2fa;
    border-bottom: 1px solid #f3f6fb;
}

.kanban_content {
    padding: 1%;
    background-color: #fff;
}

.kanban_content table {
    width: 100%;
    /* border: 1px solid green; */
}

.kanban_content table td {
    width: 100%;
    /* 或者您可以根据需求设置其他百分比值，例如33.33% */
}

.kanban_line_double {
    /* border: 1px solid blue; */
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.kanban_line_double .left {
    /* border: 1px solid red; */
    width: 48%;
    height: 100%;
}

.kanban_line_double .left .kanban_title {
    padding: 4%;
}

/* 
.kanban_line_double .left .kanban_content {
    padding: 2%;
} */

.kanban_line_double .middle {
    background-color: #f3f6fb;
    width: 4%;
}

.kanban_line_double .right {
    /* border: 1px solid black; */
    width: 48%;
    height: 100%;
}

.kanban_line_double .right .kanban_title {
    padding: 4%;
}

/*
.kanban_line_double .right .kanban_content {
    padding: 2%;
} */

/* 表格 */
.table {
    text-align: center;
    /* border: 1px solid black; */
    border-collapse: collapse;
}

.table tr th {
    width: 20%;
    /* border: 1px solid black; */
    color: #5a5a5a;
    font-weight: bold;
}

.table tr td {
    width: 20%;
    text-align: center;
    padding-top: 1%;
    color: #5a5a5a;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/889133.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

notepad++正则表达式匹配方括号及里面的内容

notepad++正则表达式匹配方括号及里面的内容

可以用于去除注释 在notepad也可以直接使用 (\[.*?\])
阅读更多...
【Redis】Redis 的学习教程（五）之 SpringBoot 集成 Redis

【Redis】Redis 的学习教程（五）之 SpringBoot 集成 Redis

在前几篇文章中&#xff0c;我们详细介绍了 Redis 的一些功能特性以及主流的 java 客户端 api 使用方法。 在当前流行的微服务以及分布式集群环境下&#xff0c;Redis 的使用场景可以说非常的广泛&#xff0c;能解决集群环境下系统中遇到的不少技术问题&#xff0c;在此列举几…
阅读更多...
【项目管理】PMP备考宝典-第三章《人》

【项目管理】PMP备考宝典-第三章《人》

文章目录 第一节&#xff1a;概述1.项目涉及的人2.项目经理3.团队4.干系人 第二节&#xff1a;原则1.有效的干系人参与2.成为勤勉尊重关心他人的管家3.创建协作的项目团队环境4.展现领导力行为 第三节&#xff1a;任务1.定义团队的基本原则2.建设团队3.领导团队4.管理冲突5.凝聚…
阅读更多...
2022年工作架构分析

2022年工作架构分析

mpmw自动化流程工具 schema动态数据 Schema 本身是一个JSON &#xff0c;Schema 通过一些特定字段描述和定义 JSON的数据结构。 最常见的表单通过类XML语法定义。一些库支持通过一些特定结构的 JSON (Schema)来生成类XML标签。 formily 是其中实现之一。 表单设计器通过可视…
阅读更多...
S03-快速填充，批量提取和组合数据的神奇

S03-快速填充，批量提取和组合数据的神奇

视频教程 快速填充&#xff08;Ctrl➕E&#xff09; 作用&#xff1a;对数据进行拆分重组合并 方式 1 CtrlE 2 双击加号选择智能填充 快速填充数据<>智能填充 开始☞填充☞快速填充&#xff08;注意附近一个单元格&#xff0c;是一定要有数据的&#xff0c;不能出现单独…
阅读更多...
前后端分离-毕业生就业服务平台SpringBoot+Redis+Vue校园实习招聘指导java jsp源代码

前后端分离-毕业生就业服务平台SpringBoot+Redis+Vue校园实习招聘指导java jsp源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 前后端分离-毕业生就业服务平台SpringBootRedisVue 系…
阅读更多...
招生老师如何制作发布录取通知书文案？这个开发教程一看就会

招生老师如何制作发布录取通知书文案？这个开发教程一看就会

作为一名负责招生的老师&#xff0c;录取通知的公布是整个招生环节最重要的一环&#xff0c;如何快速搞定这项工作&#xff1f;传统的公布方式需要设及技术开发、服务器搭建等&#xff0c;一起来看看传统方法制作录取通知查询系统的教程&#xff08;结尾有惊喜&#xff09;&…
阅读更多...
高忆管理：股票T+0交易是什么意思？t+0交易有什么好处？

高忆管理：股票T+0交易是什么意思？t+0交易有什么好处？

股票的买卖准则有很多种&#xff0c;T0买卖便是其中之一。那么股票T0买卖是什么意思&#xff1f;t0买卖有什么优点&#xff1f;高忆管理也为大家预备了相关内容&#xff0c;以供参考。 股票T0买卖是什么意思&#xff1f; T0买卖准则是指出资者当天买入的股票能够在当天卖出&am…
阅读更多...
C++ 好用的包管理工具--vcpkg

C++ 好用的包管理工具--vcpkg

背景 Windows 下开发 C/C 程序&#xff0c;少不了编译开源的第三方库&#xff0c;使用这些库开发极大的方便了程序员&#xff0c;使得我们不必重复造轮子。 由于开源库绝大部分都来源于 Linux 系统、将其移植到 Windows 的 VC 开发环境下编译比较复杂和麻烦&#xff1b;而且我…
阅读更多...
Hi-TRS：骨架点视频序列的层级式建模及层级式自监督学习

Hi-TRS：骨架点视频序列的层级式建模及层级式自监督学习

论文题目&#xff1a;Hierarchically Self-Supervised Transformer for Human Skeleton Representation Learning 论文下载地址&#xff1a;https://www.ecva.net/papers/eccv_2022/papers_ECCV/papers/136860181.pdf 代码地址&#xff1a;https://github.com/yuxiaochen1103…
阅读更多...
K8S用户管理体系介绍

K8S用户管理体系介绍

1 K8S账户体系介绍 在k8s中&#xff0c;有两类用户&#xff0c;service account和user&#xff0c;我们可以通过创建role或clusterrole&#xff0c;再将账户和role或clusterrole进行绑定来给账号赋予权限&#xff0c;实现权限控制&#xff0c;两类账户的作用如下。 server acc…
阅读更多...
解决方案 | 电子签优化医药企业管理流程

解决方案 | 电子签优化医药企业管理流程

疫情过后&#xff0c;居民健康意识显著增强&#xff0c;国家相继出台的健康行业的鼓励政策&#xff0c;也让整个医药行业得到了稳定持续的发展。但机遇往往意味着挑战&#xff0c;医药行业在迎来巨大发展的同时&#xff0c;也面临着内外部行业合规风险的挑战&#xff1a;从行业…
阅读更多...
bug记录：微信小程序 给button使用all: initial重置样式

bug记录：微信小程序 给button使用all: initial重置样式

场景&#xff1a;通过uniapp开发微信小程序 &#xff0c;使用uview的u-popup弹窗&#xff0c;里面内嵌了一个原生button标签&#xff0c;因为微信小程序的button是有默认样式的&#xff0c;所以通过all: initial重置样式 。但是整个弹窗的点击事件都会被button上面的点击事件覆…
阅读更多...
28、springboot的静态模版（前端页面）重加载和 devtools开发者工具

28、springboot的静态模版（前端页面）重加载和 devtools开发者工具

springboot的静态模版重加载和 devtools开发者工具 总结&#xff1a;实现静态模板重加载的两个方法 方法1&#xff1a;在 yml 配置文件&#xff0c;关闭页面模板缓存&#xff0c; 再按 ctrlf9 重新构建 方法2&#xff1a;直接添加 devtools 依赖&#xff0c;再按 ctrlf9 重新构…
阅读更多...
c#设计模式-结构型模式 之 代理模式

c#设计模式-结构型模式 之 代理模式

前言 由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时&#xff0c;访问对象不适合或者不能直接 引用目标对象&#xff0c;代理对象作为访问对象和目标对象之间的中介。在学习代理模式的时候&#xff0c;可以去了解一下Aop切面编程AOP切面编程_aop编程…
阅读更多...
编程练习（2）

编程练习（2）

一.选择题 第一题&#xff1a; 考察转义字符和strlen函数求解字符串长度 进一步在VS中可以智能看出哪些字符是转义字符&#xff1a; 因此本体答案选择B 第二题&#xff1a; 本体较为简单&#xff0c;宏定义了三个数N,M,NUM,N值为2,M值为3&#xff0c;因此NUM值为8&#xff0c;…
阅读更多...
iTOP-RK3588开发板安装TFTP服务端

iTOP-RK3588开发板安装TFTP服务端

首先在 ubuntu 中执行以下命令安装 TFTP 服务&#xff1a; apt-get install tftp-hpa tftpd-hpa 安装完成以后创建 TFTP 服务器工作目录,并对 TFTP 的服务配置文件进行修改,具体步骤如下&#xff1a; 输入以下命令在家目录创建 tftpboot 文件夹&#xff0c;如下图所示&#x…
阅读更多...
LeetCode[274]H指数

LeetCode[274]H指数

难度&#xff1a;Medium 题目&#xff1a; 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义&#xff1a;h 代表“高引用次数” &#xff0c;一名科研人员的 h 指…
阅读更多...
SAP 打印条形码

SAP 打印条形码

SAP 打印条形码 一 字体维护 1.SE73 2. 3. 4. 5. 6. 7. 二将第一步创建的字体应用到样式 1.SMARTFORMS 2. 三将第二步创建的字符格式应用到表单 1.SMARTFORMS
阅读更多...
【24择校指南】中国海洋大学计算机考研考情分析

【24择校指南】中国海洋大学计算机考研考情分析

中国海洋大学(B) 考研难度&#xff08;☆☆☆☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、院校概况、23专业目录、23复试详情、各科目及专业考情分析。 正文986字&#xff0c;含表格预计阅读&#xff1a;3分钟。 2023考情概况 中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023