1.0求BUG

src/router/index.js

@@ -6,6 +6,7 @@ import Users from "../views/users/users";
 import Devices from "../views/devices/devices";
 import Map from "../views/map/map";
 import Set from "../views/devices/set";
+import MqttLogs from "../views/mqttLogs/logs";
 
 Vue.use(VueRouter);
 
@@ -29,6 +30,11 @@ const routes = [{
             name: "Map",
             component: Map
         },
+        {
+            path: "/logs",
+            name: "MqttLogs",
+            component: MqttLogs
+        },
         {
             path: "/set",
             name: "Set",

src/static/js/global.js

@@ -11,6 +11,11 @@ const URL = {
     //获取设备列表
     getDeviceList: server + "device/getListPage.do",
 
+    //查询mqtt日志
+    getMqttLogs: server + "logs/listPage.do",
+    //查询所有的指令
+    getAllInstruction: server + "logs/getInstruction.do",
+
     //查询基本设置
     getBaseSet: server + "set/baseSet.do",
     //查询设备详情

src/views/layout/layout.vue

@@ -25,6 +25,13 @@
                         <span slot="title">设备管理</span>
                     </el-menu-item>
                 </router-link>
+
+                <router-link to="/logs">
+                    <el-menu-item index="4">
+                        <i class="el-icon-chat-line-square"></i>
+                        <span slot="title">收发日志</span>
+                    </el-menu-item>
+                </router-link>
             </el-menu>
         </el-aside>
         <el-container>

src/views/mqttLogs/logs.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="zy-template">
+        <div class="zy-module zy-template_search">
+            <el-form ref="form" :model="condition" label-width="60px">
+                <el-form-item label="设备ID:" class="form-item">
+                    <el-input v-model="condition.deviceId" size="small"></el-input>
+                </el-form-item>
+
+                <el-form-item label="类型:" class="form-item">
+                    <el-select v-model="condition.tag" size="small" value="">
+                        <el-option value="1" label="发送(服务器)"/>
+                        <el-option value="0" label="接收(服务器)"/>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="指令:" class="form-item">
+                    <el-select v-model="condition.instruction" size="small" value="">
+                        <el-option :value="item.id" :label="item.val" v-for="item in instructionList"/>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item class="form-item">
+                    <el-button type="primary" size="small" @click="submit">查询</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <div class="zy-template_table">
+            <el-table :data="page.records" max-height="600" stripe size="small" header-cell-class-name="header-cell"
+                      style="width: 100%;">
+
+                <el-table-column prop="deviceId" label="设备ID" width="270" min-width="10%"/>
+                <el-table-column prop="tag" label="类型" width="60" min-width="10%">
+                    <template #default="scope">{{scope.row.tag===0?'接收':'发送'}}</template>
+                </el-table-column>
+                <el-table-column label="指令" width="60" min-width="10%">
+                    <template #default="scope">
+                        <el-tooltip effect="dark" :content="mapInstruction(scope.row.instruction)" placement="right">
+                            <div>{{scope.row.instruction}}</div>
+                        </el-tooltip>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="content" label="内容" min-width="10%"/>
+                <el-table-column prop="createTime" label="时间" width="150"/>
+            </el-table>
+            <el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
+                           :total="page.total" :page-size="page.size" @current-change="pagination"/>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                condition: {
+                    deviceId: null,
+                    tag: null,
+                    instruction: null
+                },
+                page: {
+                    current: 1,
+                    size: 20,
+                },
+                instructionMap: {},//指令对应Map
+                instructionList: [],//指令对应集合
+            };
+        },
+        mounted: function () {
+            this.getListPage();
+            this.getAllInstruction();
+        },
+        methods: {
+            /**
+             * 提交查询条件
+             */
+            submit: function () {
+                const param = {
+                    current: 1,
+                    size: this.page.size,
+                    deviceId: this.condition.deviceId,
+                    tag: this.condition.tag,
+                    instruction: this.condition.instruction,
+                };
+                this.getListPage(param);
+            },
+            /**
+             * 分页点击事件
+             */
+            pagination: function (current) {
+                const param = {
+                    current: current,
+                    size: this.page.size,
+                    deviceId: this.condition.deviceId,
+                    tag: this.condition.tag,
+                    instruction: this.condition.instruction,
+                };
+                this.getListPage(param);
+            },
+            /**
+             * 获取日志列表
+             */
+            getListPage: function (params) {
+                const that = this;
+                this.Post(this.Global.getMqttLogs, params).then(res => {
+                    console.log(res.data);
+                    that.page = res.data;
+                })
+            },
+            /**
+             * 获取日志列表
+             */
+            getAllInstruction: function () {
+                this.Get(this.Global.getAllInstruction, {}).then(res => {
+                    this.instructionMap = res.data;
+                    let arr = [];
+                    for (let key  in  res.data) {
+                        arr.push({id: key, val: res.data[key]});
+                    }
+                    this.instructionList = arr;
+                })
+            },
+            /**
+             * 映射指令集
+             */
+            mapInstruction: function (key) {
+                return this.instructionMap[key]
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .header-cell {
+        background: #f3f5f9 !important;
+    }
+
+    .zy-template {
+        width: 100%;
+
+        &_search {
+            overflow: hidden;
+
+            & .form-item {
+                margin-bottom: 0;
+                float: left;
+                width: 230px;
+            }
+        }
+
+        &_table {
+            border-radius: 5px;
+            width: 100%;
+            background: white;
+            box-sizing: border-box;
+            padding: 20px;
+        }
+
+        & .pagination {
+            margin-top: 20px;
+        }
+    }
+</style>