# 显示屏

whycq

2023-09-01 1ff7a3df69e7b3d64a9241aa70a1e46c8a863c18

# 显示屏

 src/main/webapp/views/monitor/index.html

@@ -23,7 +23,7 @@
                <div class="box">
                    <div class="box-title">测试状态</div>
                    <div class="box-body">
                        <div class="table-head" style="display: flex"><div style="flex: 1">库位号</div><div style="flex: 1">库位状态</div><div style="flex: 1">测试状态</div></div>
                        <div class="table-head" style="display: flex"><div style="flex: 1">库位号</div><div style="flex: 1">库位状态</div><div style="flex: 1">包号</div><div style="flex: 1">测试状态</div></div>
                        <div class="swiper" style="height: 85%">
                            <div class="swiper-wrapper table-item">
                            </div>
@@ -31,7 +31,7 @@
                    </div>
                </div>
                <div class="box">
                    <div class="box-title">早8晚8</div>
                    <div class="box-title">12小时入出库统计</div>
                    <div class="box-body" id="smoothedLineChart"></div>
                </div>
            </div>
@@ -43,11 +43,11 @@
                <div class="box">
                    <div class="box-title">合格率</div>
                    <div style="display: flex;"class="box-body">
                        <div class="box-body2" id="barLabelRotation"></div>
                        <div class="box-body3" >
                            <div class="percentage" id="thisWeek">60%</div>
                            <div class="percentage" id="lastWeek">40%</div>
                        </div>
                        <div class="box-body" id="barLabelRotation"></div>
                        <!--<div class="box-body3" >-->
                        <!--    <div class="percentage" id="thisWeek">60%</div>-->
                        <!--    <div class="percentage" id="lastWeek">40%</div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
@@ -56,7 +56,7 @@
</body>
</html>
<script>
    let url = 'http://127.0.0.1:8080/fnwms'
    let url = 'http://192.168.4.34:8080/fnwms'
    var item = []
    var year = '2020';
    var month = '05';
@@ -72,7 +72,6 @@
    setInterval(()=>{
        initUsageRate();
        initQualified();
        initMorning();
        initEvening();
        getDate();
        setDate();
@@ -88,6 +87,7 @@
            el = "<div class='swiper-slide table-td'><div style='flex: 1'>"
                + item[i].locNo + "</div><div style='flex: 1'>"
                + item[i].locSts  + "</div><div style='flex: 1'>"
                + item[i].mk  + "</div><div style='flex: 1'>"
                + item[i].packStatus$
                + "</div></div>"
            box = box + el
@@ -163,7 +163,7 @@
                        color: '#FFF'
                    }
                },
                data: ['未知', '测试库位', '静置库位', '测试前暂存库为', '测试失败库位']
                data: ['其他', '测试库位', '静置库位', '测试前暂存库为', '测试失败库位']
            }
        ],
        yAxis: [
@@ -224,7 +224,7 @@
    var barLabelRotationOption;

    barLabelRotationOption = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        color: ['#80FFA5', '#FFBF00','#00DDFF', '#37A2FF', '#FF0087', ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
@@ -234,30 +234,28 @@
        legend: {
            textStyle:{color:'#FFF'},
        },
        grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '10%',
        grid: {
            left: '3%',
            right: '5%',
            bottom: '0%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFF'
                }
            },
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#FFF'
                }
            },
            data: ['本周', '上周']
            data: ['未知', '测试库位', '静置库位', '测试前暂存库为', '测试失败库位']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFF'
                }
            },
        },
        series: [
            {
@@ -267,7 +265,7 @@
                  normal: {
                      label: {
                          show: true,
                          position: 'right'
                          position: 'top'
                      }
                  }
                },
@@ -280,7 +278,7 @@
                    normal: {
                        label: {
                            show: true,
                            position: 'right'
                            position: 'top'
                        }
                    }
                },
@@ -299,7 +297,7 @@
        color: ['rgb(225,5,85)', 'rgb(255,72,31)', 'rgb(0,146,252)', 'rgb(13,46,207)', '#FFBF00'],
        legend: {
            icon: 'roundRect',
            data: ['8-20出库', '8-20入库', '20-8出库', '20-8入库'],
            data: ['出库', '入库'],
            textStyle:{color:'#FFF'},
        },
        grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
@@ -329,31 +327,7 @@
        },
        series: [
            {
                name: '8-20出库',
                type: 'line',
                lineStyle: {
                    width: 0,
                    normal: {
                        width: 4
                    }
                },
                smooth: true,
                data: [10, 15, 8, 10, 10, 10, 10]
            },
            {
                name: '8-20入库',
                type: 'line',
                lineStyle: {
                    width: 0,
                    normal: {
                        width: 4
                    }
                },
                smooth: true,
                data: [12, 20, 7, 10, 10, 10, 10]
            },
            {
                name: '20-8出库',
                name: '出库',
                type: 'line',
                lineStyle: {
                    normal: {
@@ -364,7 +338,7 @@
                data: [8, 7, 10, 6, 10, 10, 10]
            },
            {
                name: '20-8入库',
                name: '入库',
                type: 'line',
                lineStyle: {
                    normal: {
@@ -402,7 +376,9 @@
            success: function (res) {
                var qualifieds = []
                if (res.code === 200) {
                    res.data.reverse()
                    for (var i = 0; i < res.data.length; i++) {
                        barLabelRotationOption.xAxis.data[i] = res.data[i].week
                        barLabelRotationOption.series[0].data[i] = res.data[i].qualified
                        barLabelRotationOption.series[1].data[i] = res.data[i].unqualified
                        var qualified = res.data[i].qualified / res.data[i].total
@@ -416,31 +392,18 @@
            }
        });
    }
    function initMorning() {
        $.ajax({
            url: url+"/mobile/pack/morning/v2",
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    smoothedLineChartOption.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),
                        getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)];
                    smoothedLineChartOption.series[0].data=res.data.rows[0].data;
                    smoothedLineChartOption.series[1].data=res.data.rows[1].data;
                    smoothedLineChart.setOption(smoothedLineChartOption)
                }
            }
        });
    }
    function initEvening() {
        $.ajax({
            url: url+"/mobile/pack/evening/v2",
            url: url+"/mobile/pack/evening",
            method: 'POST',
            success: function (res) {
                res.data.reverse()
                if (res.code === 200) {
                    smoothedLineChartOption.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),
                        getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)];
                    smoothedLineChartOption.series[3].data=res.data.rows[0].data;
                    smoothedLineChartOption.series[2].data=res.data.rows[1].data;
                    for (var i = 0; i < res.data.length;i++) {
                        smoothedLineChartOption.xAxis.data[i] = res.data[i].week
                        smoothedLineChartOption.series[0].data[i]=res.data[i].unqualified
                        smoothedLineChartOption.series[1].data[i]=res.data[i].qualified
                    }
                    smoothedLineChart.setOption(smoothedLineChartOption)
                }
            }