✨ 添加设备日志

src/api/iot/device.js

@@ -71,6 +71,15 @@ export function listDeviceTypeList(query) {
   });
 }
 
+// 获取设备日志
+export function listDeviceLogList(query) {
+  return request({
+    url: "/iot/device/log-list",
+    method: "get",
+    params: query
+  });
+}
+
 // 获取设备类型列表
 export function getDeviceFunList(query) {
   return request({

src/views/iot/device/profile/details.vue

@@ -46,6 +46,16 @@
             <trigger-wrap :sourceId="infoData.deviceId" :deviceInfo="infoData"></trigger-wrap>
           </div>
         </el-tab-pane>
+
+        <el-tab-pane label="日志" name="devLog">
+          <div class="tabs-body">
+            <device-log
+              v-if="activeName === 'devLog'"
+              :pDevcieInfo="infoData"
+              :sourceId="infoData.deviceId"
+            ></device-log>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -54,6 +64,7 @@
 import { getDevice } from "@/api/iot/device";
 import InfoWrap from "./info";
 import ChildDevice from "./childDevice";
+import DeviceLog from "@/views/profile/DeviceDetailsView/deviceLog";
 import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
 import { iotWebSocketBaseUrl } from "@/config/env";
 import TriggerWrap from "@/views/profile/DeviceTrigger/index";
@@ -63,6 +74,7 @@ export default {
   components: {
     InfoWrap,
     ChildDevice,
+    DeviceLog,
     DeviceRunStartsWrap,
     TriggerWrap
   },

src/views/personal/device/profile/details.vue

@@ -40,7 +40,15 @@
             ></child-device>
           </div>
         </el-tab-pane>
-
+        <el-tab-pane label="日志" name="devLog">
+          <div class="tabs-body">
+            <device-log
+              v-if="activeName === 'devLog'"
+              :pDevcieInfo="infoData"
+              :sourceId="infoData.deviceId"
+            ></device-log>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -48,6 +56,7 @@
 <script>
 import { getDevice } from "@/api/personal/device";
 import InfoWrap from "./info";
+import DeviceLog from "@/views/profile/DeviceDetailsView/deviceLog";
 import ChildDevice from "./childDevice";
 import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
 import { iotWebSocketBaseUrl } from "@/config/env";
@@ -56,6 +65,7 @@ export default {
   props: ["sourceId"],
   components: {
     InfoWrap,
+    DeviceLog,
     ChildDevice,
     DeviceRunStartsWrap
   },

src/views/profile/DeviceDetailsView/deviceLog.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="iot-child-device">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="方向" prop="direction">
+        <el-select v-model="queryParams.direction" @change="handleQuery">
+          <el-option v-for="item in direction" :key="item.value" :label="item.label" :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <!--      <el-form-item label="设备名称" prop="deviceName">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.deviceName"-->
+      <!--          placeholder="请输入设备名称"-->
+      <!--          clearable-->
+      <!--          size="small"-->
+      <!--          @keyup.enter.native="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <el-form-item label="时间">
+        <el-date-picker
+          @change="pickerChange"
+          size="small"
+          v-model="pickerValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDeviceLogList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="deviceLogList"
+      :default-sort="{ prop: 'timestamp', order: 'descending' }"
+      @sort-change="sortChange">
+      <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"/>
+      <el-table-column label="设备名称" align="left" prop="deviceName"/>
+      <el-table-column label="用户账号" align="left" prop="userName"/>
+      <el-table-column label="报文" align="left" prop="logData">
+        <template v-slot="scope">
+          <span class="column-part-hide">{{ scope.row.logData }}</span>
+          <span class="copy-link" @click="copyOnClick(scope.row.logData)">复制</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" width="160px" prop="timestamp" sortable="custom" :formatter="dateFormat"/>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getDeviceLogList"
+    />
+
+  </div>
+</template>
+<script>
+import {listDeviceLogList} from "@/api/iot/device";
+import SelectTableWrap from "@/components/SelectTable/index";
+import ParamWrap from "@/components/ParamWrap/deviceParam";
+import {formatDate} from "@/utils";
+
+const direction = [
+  {"label": "上报", "value": "0"},
+  {"label": "下发", "value": "1"}]
+export default {
+  name: 'DeviceLog',
+  props: ['sourceId', 'pDevcieInfo'],
+  components: {
+    SelectTableWrap,
+    ParamWrap
+  },
+  data() {
+    return {
+      direction,
+      // 查询参数
+      pickerValue: null,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderType: 1, // 1升序 2降序
+        deviceId: null,
+        deviceName: null,
+        direction: direction[0].value,
+        beginTime: null,
+        endTime: null
+      },
+      showSearch: true,
+      // 设备表格数据
+      deviceLogList: [],
+      total: 0
+    }
+  },
+  created() {
+    this.getDeviceLogList();
+  },
+  methods: {
+    indexFormatter(val) {
+      return val + 1 + ((this.queryParams.pageNum - 1) * this.queryParams.pageSize);
+    },
+    // 查询设备日志列表
+    getDeviceLogList() {
+      this.loading = true;
+      this.queryParams.deviceId = this.sourceId
+      listDeviceLogList(this.queryParams).then(res => {
+        this.deviceLogList = res.data.records;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      let pickerValue = this.pickerValue
+      if (pickerValue != null) {
+        this.queryParams.beginTime = Date.parse(pickerValue[0]);
+        this.queryParams.endTime = Date.parse(pickerValue[1]);
+      }
+      this.queryParams.pageNum = 1;
+      this.getDeviceLogList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.resetPicker();
+      this.handleQuery();
+    },
+    // 重置 DatePicker 参数
+    resetPicker() {
+      this.pickerValue = null
+      this.queryParams.beginTime = null
+      this.queryParams.endTime = null
+    },
+    pickerChange(val) {
+      if (val == null) {
+        this.resetPicker();
+      }
+    },
+    // 时间戳格式化
+    dateFormat(val) {
+      return formatDate(val.timestamp)
+    },
+    sortChange(column) {
+      const sort = {
+        orderType: column.order === "descending" ? 1 : 2,
+      };
+      this.queryParams = Object.assign(this.queryParams, sort);
+      this.handleQuery();
+    },
+    copyOnClick(val) {
+      let self = this;
+      this.$copyText(val).then(
+        function () {
+          self.$message({
+            message: "复制成功",
+            type: "success",
+          });
+        },
+        function () {
+          self.$message.error("复制失败");
+        }
+      );
+    },
+  },
+}
+</script>
+<style lang="scss">
+.cell {
+  & > .column-part-hide {
+    width: calc(100% - 60px);
+    white-space: nowrap;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+  }
+
+  & > .copy-link {
+    cursor: pointer;
+    position: relative;
+    vertical-align: bottom;
+    right: -10px;
+    color: #3a8ee6;
+  }
+}
+</style>

src/views/profile/DeviceDetailsView/index.vue

@@ -36,10 +36,18 @@
         </el-tab-pane>
         <el-tab-pane label="固件" name="oat">
           <div class="tabs-body protocol-wrap">
-
             <model-oat v-if="activeName === 'oat'" :deviceInfo="infoData" @updateInfo="updateInfo($event)" ></model-oat>
           </div>
         </el-tab-pane>
+        <el-tab-pane label="日志" name="devLog">
+          <div class="tabs-body">
+            <device-log
+              v-if="activeName === 'devLog'"
+              :pDevcieInfo="infoData"
+              :sourceId="infoData.deviceId"
+            ></device-log>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -47,6 +55,7 @@
 <script>
 import { getDevice } from "@/api/iot/device";
 import InfoWrap from "./info";
+import DeviceLog from "./deviceLog";
 import StateManagement from "./stateManagement";
 import TriggerWrap from "@/views/profile/DeviceTrigger/index";
 import DeviceSelect from './deviceSelectNav'
@@ -56,6 +65,7 @@ export default {
   props: ["sourceId"],
   components: {
     InfoWrap,
+    DeviceLog,
     StateManagement,
     TriggerWrap,
     DeviceSelect,

src/views/tenant/device/profile/details.vue

@@ -46,6 +46,15 @@
             <trigger-wrap :sourceId="infoData.deviceId" :deviceInfo="infoData"></trigger-wrap>
           </div>
         </el-tab-pane>
+        <el-tab-pane label="日志" name="devLog">
+          <div class="tabs-body">
+            <device-log
+              v-if="activeName === 'devLog'"
+              :pDevcieInfo="infoData"
+              :sourceId="infoData.deviceId"
+            ></device-log>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -53,6 +62,7 @@
 <script>
 import { getDevice } from "@/api/tenant/device";
 import InfoWrap from "./info";
+import DeviceLog from "@/views/profile/DeviceDetailsView/deviceLog";
 import ChildDevice from "./childDevice";
 import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
 import { iotWebSocketBaseUrl } from "@/config/env";
@@ -62,6 +72,7 @@ export default {
   props: ["sourceId"],
   components: {
     InfoWrap,
+    DeviceLog,
     ChildDevice,
     DeviceRunStartsWrap,
     TriggerWrap