baoshi-was/resources/views/station/monitor/visual.blade.php

@extends('layouts.app')
@section('title')料箱分布 - 监视器@endsection

@section('content')
    <div class="container-fluid d-none" id="container">
        <div class="row bg-dark">
            <div class="col-6 row mt-2 mb-2" v-for="(arr,i) in data">
                <div class="offset-1 col-10 row">
                    <div style="width: 12.5%" v-for="(val,j) in arr">
                        <div class="progress mr-2" v-if="val===undefined">
                            <div class="w-100 text-center d-inline-block"><i class="fa fa-spinner fa-pulse"></i></div>
                        </div>
                        <div class="progress mr-2" style="cursor: pointer" v-else>
                            <div class="progress-bar bg-danger" :style="{width:(100-val)+'%'}">@{{(100-val)+'%'}}</div>
                            <div class="progress-bar bg-success" :style="{width:val+'%'}">@{{ val+'%' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                rowSize:8, //单排大小：X列
                columnSize:4,//单列大小 X竖
                heightSize:10,//高度大小 X行
                maxLoadSize:18,//最大加载大小 X排
                data:[],//数据池
                prefix:"HAI",
            },
            mounted() {
                let data = [];
                for (let i=this.maxLoadSize;i>0;i--){
                    let arr = [];
                    for (let j=0;j<this.rowSize;j++){
                        arr.push(undefined);
                    }
                    data.push(arr);
                    loadData
                }
                this.data = data;
                $("#container").removeClass("d-none");
            },
            methods:{
                loadData(row){
                    let size = this.rowSize*this.columnSize;
                    if (row%2!==0)size *= 2;
                },
            }
        });
    </script>
@endsection