fix: 维护模式重复进入失败与按钮灰死 + Broker 并发验证用例

wenxiangchao

3 天以前 b544d5cccd76735e034c8055918a50927b437474

 Plugin.DataBoard/Libs/Static/test.html

@@ -6,6 +6,140 @@
<head>
    <title>Simple Surface</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 对 loading  整体布局*/
        .loading-wrapper {
            padding: 16px;
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.5);
        }


        /* loading 动画图像父级的布局 */
        .loading-view {
            height: 40px;
            position: relative;
        }

        .loading-msg {
            font-size: 14px;
            margin: 8px 0 0 0;
            position: relative;
        }

        .container1,
        .container2 {
            width: 40px;
            height: 40px;
            position: absolute;
            /* border: 1px solid #ff0000; */
            top: 0;
            left: 50%;
            margin-left: -20px;
            position: absolute;
        }

        .container2 {
            transform: rotate(45deg);
        }

        /* 第1种动画和第二种的相同部分，其中的 animation 也相同 */
        .circle,
        .bounce {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            /* 设置小球动画 */
            animation: loading 1.2s both infinite;
        }

        .circle {
            position: absolute;
        }

        /* 设置小球的相对位置 */
        .circle1 {
            top: 0;
            left: 0;
        }

        .circle2 {
            top: 0;
            right: 0;
        }

        .circle3 {
            bottom: 0;
            right: 0;
        }

        .circle4 {
            bottom: 0;
            left: 0;
        }

        /* 设置延时 */
        .container1 .circle1 {
            animation-delay: 0s;
        }

        .container2 .circle1 {
            animation-delay: 0.2s;
        }

        .container1 .circle2 {
            animation-delay: 0.3s;
        }

        .container2 .circle2 {
            animation-delay: 0.4s;
        }

        .container1 .circle3 {
            animation-delay: 0.5s;
        }

        .container2 .circle3 {
            animation-delay: 0.6s;
        }

        .container1 .circle4 {
            animation-delay: 0.7s;
        }

        .container2 .circle5 {
            animation-delay: 0.8s;
        }

        @keyframes loading {
            0% {
                transform: scale(0);
            }

            40% {
                transform: scale(1);
            }

            80% {
                transform: scale(0);
            }

            100% {
                transform: scale(0);
            }
        }
    </style>
    <script src="echarts.min.js"></script>
    <script type="text/javascript">
        const color = ['#22448b'];
@@ -37,12 +171,15 @@
        .chart {
            height: 100%;
            width: 25%;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="chart0" class="chart"></div>
        <div id="chart0" class="chart">
            
        </div>
        <div id="chart1" class="chart"></div>
        <div id="chart2" class="chart"></div>
        <div id="chart3" class="chart"></div>
@@ -71,13 +208,44 @@
                {
                    data: [],
                    type: 'bar',
                    label: {
                        show: true,
                        formatter: '{c}',
                        distance: 5,
                        fontSize: 14,
                        position: 'inside'
                    },
                    barMaxWidth: 50
                }
            ]
        };
        var chart0 = echarts.init(dom0);
        var chart0 = null;
        function loading0(msg) {
            if (chart0 != null) {
                chart0.dispose();
                chart0 = null;
            }
            dom0.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart0(fields, data) {
            chart0 = echarts.init(dom0);
            opt0.xAxis.data = fields;
            opt0.series[0].data = data;
            chart0.setOption(opt0);
@@ -97,6 +265,12 @@
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            label: {
                alignTo: 'edge',
                formatter: '{b}\n计数:{c}\n占比:{d}%',
                fontSize: 16,
                lineHeight: 18
            },
            series: [
                {
@@ -125,9 +299,33 @@
                }
            ]
        };
        var chart1 = echarts.init(dom1);
        var chart1 = null;
        function loading1(msg) {
            if (chart1 != null) {
                chart1.dispose();
                chart1 = null;
            }
            dom1.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart1(data) {
            chart1 = echarts.init(dom1);
            opt1.series[0].data = data;
            chart1.setOption(opt1);
        }
@@ -165,19 +363,53 @@
                    itemStyle: {
                        color: 'red'
                    },
                    label: {
                        show: true,
                        position: 'bottom',
                        formatter: (param) => param.value.toFixed(2) + '%'
                    },
                },
                {
                    data: [],
                    itemStyle: {
                        color: '#22448b'
                    },
                    type: 'line'
                    type: 'line',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (param) => param.value.toFixed(2)+'%'
                    },
                }
            ]
        };
        var chart2 = echarts.init(dom2);
        var chart2 = null;
        function loading2(msg) {
            if (chart2 != null) {
                chart2.dispose();
                chart2 = null;
            }
            dom2.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart2(label, names, data0, data1) {
            chart2 = echarts.init(dom2)
            opt2.xAxis.data = label;
            opt2.series[0].name = names[0];
            opt2.series[0].data = data0;
@@ -232,7 +464,7 @@
                    data: [],
                    label: {
                        show: true,
                        formatter: '{b}',
                        formatter: '{b} 计数:{c}',
                        distance: 10,
                        fontSize: 14,
                        position: 'insideLeft'
@@ -242,9 +474,34 @@
                }
            ]
        };
        var chart3 = echarts.init(dom3);
        var chart3 = null;

        function loading3(msg) {
            if (chart3 != null) {
                chart3.dispose();
                chart3 = null;
            }
            dom3.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart3(label, data) {
            chart3 = echarts.init(dom3);
            opt3.yAxis.data = label;
            opt3.series[0].data = data;
            chart3.setOption(opt3);