From 31e9e8edba779b727c26a1da60b840682710ab83 Mon Sep 17 00:00:00 2001
From: zouyiqing <854938661@qq.com>
Date: Mon, 22 Jan 2024 09:28:26 +0800
Subject: [PATCH] =?UTF-8?q?win=E4=BB=A3=E7=A0=81=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/radarStatus/radarStatus.html       | 168 +++++-------------
 1 file changed, 48 insertions(+), 120 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/system/radarStatus/radarStatus.html b/ruoyi-admin/src/main/resources/templates/system/radarStatus/radarStatus.html
index 187b581..c506a70 100644
--- a/ruoyi-admin/src/main/resources/templates/system/radarStatus/radarStatus.html
+++ b/ruoyi-admin/src/main/resources/templates/system/radarStatus/radarStatus.html
@@ -3,160 +3,88 @@
 <head>
     <th:block th:include="include :: header('自定义视图分页')"/>
     <meta charset="UTF-8">
+    <script src="/js/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <!-- 引入样式 -->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+    <!-- 引入组件库 -->
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 </head>
 <body class="gray-bg">
-
-
-
-<div id="vm">
-    <div class="row">
-        <div class="col-sm-12 select-table table-striped">
-            <table id="bootstrap-table">
-                <tbody>
-                <tr v-for="item in tableData" :key="item.radarIp">
-                    <td v-for="(value, key) in item" :key="key">{{ key }}</td>
-                </tr>
-                </tbody>
-            </table>
+<div id="vm" style="padding: 24px">
+    <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;background: white">
+        <div  v-for="item in tableData" style="height:100px;width: 100px;margin-left: 10px;margin-top: 20px">
+            <img class="cell_image" alt="image"  :src="getImageUrl(item.status)">
+            <p class="cell_p">{{item.radarIp}}</p>
+            <p class="cell_p">{{item.radarLocation}}</p>
         </div>
     </div>
 </div>
-
-<!--    <template id="profileTemplate">-->
-<!--        <div class="col-sm-4">-->
-<!--            <div class="contact-box">-->
-
-<!--                    <div class="col-sm-4">-->
-<!--                        <div class="text-center" >-->
-<!--                            <img alt="image" class="img-circle m-t-xs img-responsive" src="%IMAGE%">-->
-<!--                            <div class="m-t-xs font-bold">%radarIp%</div>-->
-<!--                        </div>-->
-<!--                    </div>-->
-<!--                    <div class="col-sm-8">-->
-<!--                        <h3><strong>%radarLocation%</strong></h3>-->
-<!--                    </div>-->
-<!--                    <div class="clearfix"></div>-->
-
-<!--             </div>-->
-<!--        </div>-->
-<!--    </template>-->
-
 <div th:include="include :: footer"></div>
-<th:block th:include="include :: bootstrap-table-custom-view-js"/>
-
-<script src="/js/vue.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
 <script th:inline="javascript">
-    // var prefix = ctx + "system/radarStatus";
-    // var datas = [[${@dict.getType('sys_normal_disable')}]];
-
     new Vue({
         el: '#vm',
         data() {
             return {
                 tableData: [],
-                total: 0,
-                socketUrl: 'ws://localhost/websocket', // WebSocket服务器地址
-                reconnectInterval: 5000, // 重连间隔时间
-                reconnectionAttempts: Infinity,
             }
         },
         mounted() {
             axios.post('http://localhost/system/radarStatus/list', {})
                 .then((data) => {
                     this.tableData = data.data.rows
-                    this.total = data.data.total
-                    console.log(this.tableData)
-                    console.log(this.total)
                 })
         },
-
-
         created() {
             var socket = new WebSocket("ws://localhost/websocket");
 
-            socket.onopen = function(event) {
+            socket.onopen = function (event) {
                 console.log("WebSocket连接已打开");
             };
 
-            socket.onmessage =  (event)=> {
+            socket.onmessage = (event) => {
                 var data = JSON.parse(event.data);
-                console.log("接收到数据：" + data);
-                console.log(this.tableData)
-                this.tableData = [data]
-                // console.log(this.tableData)
+                console.log("接收到数据：" + JSON.stringify(data));
+                this.tableData.forEach(item => {
+                    if (item.radarIp === data.radarIp) {
+                        item.status = data.status
+                    }
+                })
             };
 
-            socket.onclose = function(event) {
+            socket.onclose = function (event) {
                 console.log("WebSocket连接已关闭");
             };
         },
+        methods: {
+            getImageUrl(status) {
+                if (status === 1) {
+                    return "http://localhost/img/radarGreen.png";
+                } else if (status === 0) {
+                    return "http://localhost/img/radarRed.jpg";
+                }
+            }
+        }
     });
-
-    // var tableData = [];
-    //
-    // $(function() {
-    //     var options = {
-    //         url: prefix + "/list",
-    //         showSearch: false,
-    //         showRefresh: false,
-    //         showToggle: false,
-    //         showColumns: false,
-    //         showExport: true,
-    //         columns: [
-    // 		{
-    // 			field : 'radarIp',
-    // 			title : '雷达ip'
-    // 		},
-    // 		{
-    // 			field : 'radarLocation',
-    // 			title : '用户手机'
-    // 		},
-    // 		{
-    //             field: 'status',
-    //             title: '用户状态',
-    //             align: 'center',
-    //             formatter: function(value, row, index) {
-    //             	return $.table.selectDictLabel(datas, value);
-    //             }
-    //         },
-    //         {
-    //             title: '操作',
-    //             align: 'center',
-    //             formatter: function(value, row, index) {
-    //             	var actions = [];
-    //             	actions.push('<a class="btn btn-success btn-xs" href="javascript:;"><i class="fa fa-edit"></i>编辑</a> ');
-    //                 actions.push('<a class="btn btn-danger btn-xs" href="javascript:;"><i class="fa fa-remove"></i>删除</a>');
-    // 				return actions.join('');
-    //             }
-    //         }]
-    //     };
-    //     $.table.init(options);
-    // });
-    //
-
-    // function customViewFormatter (data) {
-    //     $.tableData = data
-    //     var template = $('#profileTemplate').html()
-    //     var view = ''
-    //     $.each(data, function (i, row) {
-    //       view += template
-    //         .replace('%IMAGE%', getImageUrl(row.status))
-    //         .replace('%radarIp%', row.radarIp)
-    //         .replace('%radarLocation%', row.radarLocation)
-    //     })
-    //
-    //     return `<div class="row mx-0">${view}</div>`
-    //   }
-    // function getImageUrl(status) {
-    //     if (status === 1) {
-    //
-    //         return "http://localhost/img/radarGreen.png";
-    //     } else if (status === 0) {
-    //         return "http://localhost/img/radarRed.jpg";
-    //     }
-    // }
 </script>
 </body>
+
+<style>
+    .cell_image{
+        vertical-align: middle;
+        width: 100%;
+        height: 60%;
+    }
+    .cell_p{
+        font-size: 14px;
+        font-weight: 600;
+        vertical-align: middle;
+        text-align: center;
+        width: 100%;
+        height: 20%;
+        margin: 0;
+    }
+</style>
+
 </html>
\ No newline at end of file
