DK-MES-2.0
/
HEGII.ss.mes.dashboard


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!doctype html>
<html lang="en" data-bs-theme="auto">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/app/images/dongke-logo.png">
    <link href="/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <title>东科软件</title>
</head>
<body @vue:mounted="store.getDashboardList" class="p-3 m-0 border-0 m-0 border-0">

    <!-- 导航条 -->
    <div v-scope="navbar({})"></div>


    <!--主体页面-->
    <div v-scope="chartJS()" @vue:mounted="start" class="pt-2">
        <ul class="list-group  text-center">
            <li class="list-group-item">
                电子看板 {{currentTime}}
            </li>
            <li class="list-group-item">
                <canvas id="canvasHourCL" height="200"></canvas>
            </li>
        </ul>
    </div>


    <!--版权信息-->
    <div v-scope="footer({})"></div>

    <script src="/plugins/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/plugins/vue/petite-vue.iife.js"></script>
    <script src="/plugins/axios/axios.min.js"></script>
    <script src="/plugins/chartjs/chart.min.js"></script>
    <script src="/plugins/chartjs/utils.js"></script>
    <script src="/app/common/navbar.js"></script>
    <script src="/app/common/footer.js"></script>

    <script>

        function chartJS() {
            return {
                refreshTime: 5,
                currentTime: -1,
                //计时器
                start() {
                    let self = this;
                    setInterval(function () { self.refresh(); }, 1000);
                },
                refresh() {
                    let self = this;
                    if (self.currentTime == -1) self.initData();
                    if (self.currentTime > 0)
                        self.currentTime--;
                    else {
                        self.loadData();
                        self.currentTime = self.refreshTime;
                    }
                },
                //加载数据
                loadData() {
                    let self = this;
                    axios.get('index.ashx')
                        .then(function (response) {
                            for (var i = 0; i < response.data[0].length; i++) {
                                window.HourCL.data.datasets[0].data[i] = response.data[0][i];
                                window.HourCL.data.datasets[1].data[i] = response.data[1][i];
                            }
                            window.HourCL.update();
                        })
                        .catch(function (error) {

                        });
                },
                //初始化图表
                initData() {
                    window.chartColors = {
                        red: 'rgb(255, 99, 132)',
                        orange: 'rgb(255, 159, 64)',
                        yellow: 'rgb(255, 250, 86)',
                        green: 'rgb(75, 192, 192)',
                        blue: 'rgb(54, 162, 250)',
                        purple: 'rgb(153, 102, 255)',
                        grey: 'rgb(231,233,237)'
                    };

                    var color = Chart.helpers.color;

                    window.randomScalingFactor = function (num) {
                        return Math.round(Math.random() * num);
                    }

                    window.configHourCL = {
                        data: {
                            labels: ["00-01", "01-02", "02-03", "03-04", "04-05"],
                            datasets: [{
                                label: "甲班产量",
                                backgroundColor: color(window.chartColors.orange).alpha(0.6).rgbString(),
                                borderColor: window.chartColors.orange,
                                borderWidth: 2,
                                pointRadius: 15,
                                data: [10, 20, 15, 25, 30],
                                fill: false,
                            }, {
                                label: "乙班产量",
                                fill: false,
                                backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
                                borderColor: window.chartColors.blue,
                                borderWidth: 2,
                                pointRadius: 15,
                                data: [5, 7, 18, 12, 15]
                            }]
                        },
                        type: 'line',
                        options: {
                            responsive: true,
                            legend: {
                                display: true
                            },
                            title: {
                                display: false,
                                text: '每小时产量'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false,
                            },
                            hover: {
                                mode: 'nearest',
                                intersect: true
                            }
                        }
                    };
                    var ctxHourCL = document.getElementById("canvasHourCL").getContext("2d");
                    window.HourCL = new Chart(ctxHourCL, configHourCL);
                }
                
            }
        }
        PetiteVue.createApp().mount();
    </script>

</body>
</html>