#

luxiaotao1123

2020-11-16 fa29b45fb2f25087b106bfa234a1ec6feebb3f8d

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

@@ -4,12 +4,70 @@
    <meta charset="UTF-8">
    <title>ASRS监控</title>
    <link href="css/monitor.css" rel="stylesheet">
    <link href="css/Pacifico.css" rel="stylesheet">
    <link href="../../static/layui/css/layui.css" rel="stylesheet">
    <link href="css/lunbo.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vincent.js"></script>
    <script src="js/echarts/echarts.min.js"></script>
    <script src="https://api.map.baidu.com/api?v=2.0&ak=pnkdgjAQGCS0nwjFnBjbprCtPrNNvDBe" type="text/javascript"></script>
    <script src="js/echarts/bmap.min.js"></script>
    <script src="js/jquery.countup.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="../../static/layui/layui.js"></script>
    <style>
        .crn-speed {
            width: 100%;
            height: 35%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
        }

        .crn-speed span {
            display:inline-block;
            margin:20px auto;
            font-size:56px;
            font-family:'Pacifico',serif
        }
        .speed-content {
            display: inline-block;
        }


        .scroll-pane {
            width: 100%;
            height: 65%;
        }
        .scroll-bar {
            float: left;
            width: 50%;
            height: 100%;
            text-align: center;
        }

        .scroll-header span {
            font-size:64px;
            font-family:'Pacifico',serif
        }

        .scroll-content {
            animation:anis 10s linear infinite;
            padding: 200px 10px 20px 10px;
            font-family:'Pacifico',serif;
            overflow:hidden;
        }
        .scroll-content:last-child {
            border-left: 1px solid rgba(0, 0, 0, 0.3);
        }
        .scroll-content:hover {
            animation-play-state:paused;
        }
        @keyframes anis {
            100% {
                transform:translateY(-200px)
            }
        }

    </style>
</head>
@@ -115,47 +173,78 @@
        <!--中-->
        <div class="container-element-middle">
            <div class="map-board">
                <div id="map">
                </div>
            </div>
            <div class="station-list">
                <div class="outside">
                    <div class="inside">
                        <div class="image-border image-border1"></div>
                        <div class="image-border image-border2"></div>
                        <div class="image-border image-border3"></div>
                        <div class="image-border image-border4"></div>
                        <div class="station-name">A</div>
                    <div class="image-border image-border1"></div>
                    <div class="image-border image-border2"></div>
                    <div class="image-border image-border3"></div>
                    <div class="image-border image-border4"></div>

                    <!-- 中上 -->
                    <div class="crn-speed">
                        <div class="speed-content">
                            <div>
                                <span>堆垛机走行速度：</span><span class="counter">5.00</span><span>米/秒</span>
                            </div>
                            <div>
                                <span>堆垛机升降速度：</span><span class="counter">5.00</span><span>米/秒</span>
                            </div>
                        </div>
                    </div>

                    <div class="scroll-pane">

                        <div class="layui-carousel" id="test1">
                            <div carousel-item>
                                <div style="background-color: red">条目1</div>
                                <div style="background-color: gold">条目2</div>
                                <div style="background-color: #333333">条目3</div>
                                <div style="background-color: #00FF00">条目4</div>
                                <div style="background-color: #5FB878">条目5</div>
                            </div>
                        </div>

<!--                        &lt;!&ndash; 中左 &ndash;&gt;-->
<!--                        <div class="scroll-bar left-bar">-->
<!--                            <div class="scroll-header">-->
<!--                                <span>入库</span>-->
<!--                                <p class="english">Entering Warehouse</p>-->
<!--                            </div>-->
<!--                            <div class="scroll-content">-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        &lt;!&ndash; 中右 &ndash;&gt;-->
<!--                        <div class="scroll-bar right-bar">-->
<!--                            <div class="scroll-header">-->
<!--                                <span>出库</span>-->
<!--                                <p class="english">Delivery Of Cargo From Storage</p>-->
<!--                            </div>-->
<!--                            <div class="scroll-content">-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

                </div>
                <div class="outside">
                    <div class="inside">
                        <div class="image-border image-border1"></div>
                        <div class="image-border image-border2"></div>
                        <div class="image-border image-border3"></div>
                        <div class="image-border image-border4"></div>
                        <div class="station-name">B</div>
                    </div>
                </div>
                <div class="outside">
                    <div class="inside">
                        <div class="image-border image-border1"></div>
                        <div class="image-border image-border2"></div>
                        <div class="image-border image-border3"></div>
                        <div class="image-border image-border4"></div>
                        <div class="station-name">C</div>
                    </div>
                </div>
                <div class="outside">
                    <div class="inside">
                        <div class="image-border image-border1"></div>
                        <div class="image-border image-border2"></div>
                        <div class="image-border image-border3"></div>
                        <div class="image-border image-border4"></div>
                        <div class="station-name">D</div>
                    </div>
                </div>
                </ul>

            </div>
        </div>

@@ -257,6 +346,17 @@
    </div>
</body>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
    $('.counter').countUp();
    //  遮罩
    let closeBtn = document.getElementById('closeBtn');
    let detailModal = document.getElementById('detail-modal');
@@ -264,109 +364,6 @@
        detailModal.style.display = 'none';
    };
    var data = [];
    var chart = echarts.init(document.getElementById('map'));
    var lastStationId = null;
    var defalutName = '递递叭叭充电桩监控平台';
    var lastName = defalutName;
    function reload(stationId){
        data = [];
        let center = [120.307658, 30.372121];
        let param = {
            stationId: stationId
        };
        http.post("http://localhost:8080/admin/stations.action", param, function (res) {
            res.data.list.map(item => {
                data.push({
                    name: item.name,
                    stationId: item.stationId,
                    value: [item.lon, item.lat]
                })
            });
            option = {
                backgroundColor: 'transparent',
                title: {
                    text: '',
                    subtext: '',
                    sublink: '',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip : {
                    trigger: 'item'
                },
                bmap: {
                    center: stationId==null?center:data[0].value,
                    zoom: stationId==null?12:18,
                    roam: true, // 是否可缩放
                },
                series : [
                    {
                        name: '',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: data,
                        symbolSize: function () {
                            return 18;
                        },
                        showEffectOn: 'emphasis',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: { // 标签
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        itemStyle: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        zlevel: 1
                    },
                ]
            };

            chart.setOption(option);

            var bMap = chart.getModel().getComponent('bmap').getBMap();
            bMap.setMapStyle({
                style : "midnight",
            });

            if (stationId != null) {
                lastStationId = stationId;
                lastName = data[0].name;
            } else {
                lastStationId = null;
                lastName = defalutName;
            }

        }, 'form');
    }

    reload();

    chart.on('click', function (param) {
        reload(param.data.stationId);
        $('.title').html(param.data.name);
    });

    // 返回
    $('.button-left').click(function () {
        reload();
        $('.title').html(defalutName);
    });
    // 刷新
    $('.button-right').click(function () {
        detailModal.style.display = 'block';
        // reload(lastStationId);
        // $('.title').html(lastName);
    });


//    折线图
    let lineCharts = echarts.init(document.getElementById('line-charts'));