Junjie
2025-05-22 ec5665919f48d4a251b5e41336a6347263e44c98
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title>系统监视</title>
        <link rel="stylesheet" href="../static/css/element.css">
        <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="../static/js/common.js"></script>
        <script type="text/javascript" src="../static/js/vue.min.js"></script>
        <script type="text/javascript" src="../static/js/element.js"></script>
        <style>
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
 
            .box-card {
                width: 480px;
                margin: 10px;
            }
        </style>
    </head>
 
    <body>
        <div id="app">
            <div class="container" v-if="watchData != undefined && watchData != null && watchData.length > 0">
                <el-card class="box-card" v-for="item in watchData" :key="item">
                    <div>
                        {{ item.key }}
                    </div>
                    <div>
                        {{ item.msg }}
                    </div>
                </el-card>
            </div>
            <div v-else>
                <el-empty description="无异常"></el-empty>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    watchData: [],
                },
                created() {
                    this.init()
                },
                methods: {
                    init() {
                        let that = this;
                        this.getWatchData()
 
                        setInterval(() => {
                            that.getWatchData()
                        }, 1000);
                    },
                    getWatchData() {
                        let that = this;
                        $.ajax({
                            url: baseUrl + "/watch/findAll",
                            headers: {
                                'token': localStorage.getItem('token')
                            },
                            data: {},
                            dataType: 'json',
                            contentType: 'application/json;charset=UTF-8',
                            method: 'GET',
                            success: function(res) {
                                if (res.code == 200) {
                                    that.watchData = res.data;
                                } else if (res.code === 403) {
                                    top.location.href = baseUrl + "/";
                                } else {
                                    that.$message({
                                        message: res.msg,
                                        type: 'error'
                                    });
                                }
                            }
                        });
                    },
                }
            })
        </script>
    </body>
 
</html>