baoman / Ezquiz_Platform

Blame view

src/views/device/log.vue 8.93 KB
Edit Raw Normal View History
db11048f   阿宝   设备状态，学校管理 
1
2
3
4
5
6
 
  <template>
    <div>
      <back-box>
        <template slot="title">
          <span>设备日志</span>
        </template>
db11048f   阿宝   设备状态，学校管理 
7
 
      </back-box>
23a6dc5f   阿宝   学校管理相关接口简单对接 
8
9
 
      <div class="page-content">
        <el-descriptions :column="3" border>
1b9bae95   梁保满   级联选择器调整，日志接口调整 
10
11
12
 
          <el-descriptions-item label="设备编码">{{
            device.sn
          }}</el-descriptions-item>
1b9bae95   梁保满   级联选择器调整，日志接口调整 
13
14
15
16
17
18
19
20
 
          <el-descriptions-item label="配对码">{{
            device.pairingCode
          }}</el-descriptions-item>
          <el-descriptions-item label="关联班级">
            <span v-for="item in device.classList" :key="item.classId">{{
              item.className
            }}</span>
          </el-descriptions-item>
280e7dfe   梁保满   设备日志显示选项 
21
22
 
          <el-descriptions-item label="操作时间">{{
            device.modifiedTime
1b9bae95   梁保满   级联选择器调整，日志接口调整 
23
 
          }}</el-descriptions-item>
4eb3e41b   梁保满   设备日志显示选项 
24
25
 
          <el-descriptions-item v-if="type == 1" label="所在教室">{{
            device.roomName
1b9bae95   梁保满   级联选择器调整，日志接口调整 
26
 
          }}</el-descriptions-item>
280e7dfe   梁保满   设备日志显示选项 
27
28
29
30
31
32
 
          <el-descriptions-item v-if="type == 1" label="固件版本号">{{
            device.otaVersionName
          }}</el-descriptions-item>
          <el-descriptions-item v-if="type == 2" label="电量">{{
            device.electricity
          }}</el-descriptions-item>
4eb3e41b   梁保满   设备日志显示选项 
33
34
35
 
          <el-descriptions-item v-if="type == 2" label="答题次数">{{
            device.answerTimes
          }}</el-descriptions-item>
23a6dc5f   阿宝   学校管理相关接口简单对接 
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
 
        </el-descriptions>
      </div>
      <div class="answer-header">
        <div class="sel-box">
          <div class="d1">
            <el-date-picker
              v-model="query.startDay"
              type="date"
              @change="handleChangeTimeStart"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            ~
            <el-date-picker
              v-model="query.endDay"
              type="date"
              placeholder="选择日期时间"
              @change="handleChangeTimeEnd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <p class="p1">
            <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']"
              >今天</span
            >
            <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']"
              >本周</span
            >
            <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']"
              >本月</span
            >
            <span @click="setDate(4)" :class="[date == 4 ? 'active' : '', 's1']"
              >本季度</span
            >
          </p>
280e7dfe   梁保满   设备日志显示选项 
73
74
75
 
          <el-button type="primary" class="serach-box" round @click="_QueryData"
            >筛选</el-button
          >
23a6dc5f   阿宝   学校管理相关接口简单对接 
76
77
 
        </div>
      </div>
1b9bae95   梁保满   级联选择器调整，日志接口调整 
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
      <div class="table-box">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="operationType"
            label="请求类型"
            align="center"
            width="200"
            ><template slot-scope="scoped">{{
              setOperationType(scoped.row.operationType)
            }}</template></el-table-column
          >
          <el-table-column
            prop="operationTime"
            label="时间"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="日志内容"
            align="center"
          ></el-table-column>
4eb3e41b   梁保满   设备日志显示选项 
100
101
102
103
104
105
106
107
108
109
110
111
 
          <el-table-column
          v-if="type == 2"
            prop="submit"
            label="提交次数"
            align="center"
          ></el-table-column>
          <el-table-column
          v-if="type == 2"
            prop="electricity"
            label="电量"
            align="center"
          ></el-table-column>
1b9bae95   梁保满   级联选择器调整，日志接口调整 
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination
          small=""
          layout="total,prev, pager, next"
          :hide-on-single-page="true"
          :total="total"
          @current-change="changePage"
          :current-page="page"
          :page-size="size"
        >
        </el-pagination>
      </div>
db11048f   阿宝   设备状态，学校管理 
126
127
128
129
 
    </div>
  </template>
  
  <script>
23a6dc5f   阿宝   学校管理相关接口简单对接 
130
 
  import { formatDate } from "utils";
db11048f   阿宝   设备状态，学校管理 
131
132
133
 
  export default {
    data() {
      return {
280e7dfe   梁保满   设备日志显示选项 
134
 
        type: 1,
1b9bae95   梁保满   级联选择器调整，日志接口调整 
135
 
        id: "",
23a6dc5f   阿宝   学校管理相关接口简单对接 
136
137
138
139
140
141
142
 
        date: "", //今天-昨天-本周
        query: {
          //搜索条件
          startDay: "",
          endDay: "",
          day: "",
        },
1b9bae95   梁保满   级联选择器调整，日志接口调整 
143
144
145
146
147
148
 
        tableData: [],
        device: {
          sn: "",
          electricity: "",
          pairingCode: "",
          classList: [],
280e7dfe   梁保满   设备日志显示选项 
149
 
          modifiedTime: "",
1b9bae95   梁保满   级联选择器调整，日志接口调整 
150
 
          answerTimes: "",
4eb3e41b   梁保满   设备日志显示选项 
151
 
          roomName: "",
280e7dfe   梁保满   设备日志显示选项 
152
 
          otaVersionName:""
1b9bae95   梁保满   级联选择器调整，日志接口调整 
153
154
155
156
 
        },
        total: 0,
        page: 1,
        size: 20,
db11048f   阿宝   设备状态，学校管理 
157
158
 
      };
    },
23a6dc5f   阿宝   学校管理相关接口简单对接 
159
 
    created() {
1b9bae95   梁保满   级联选择器调整，日志接口调整 
160
 
      this.id = this.$route.query.id;
280e7dfe   梁保满   设备日志显示选项 
161
 
      this.type = this.$route.query.type;
1b9bae95   梁保满   级联选择器调整，日志接口调整 
162
163
 
      this._QueryDetail();
      this.setDate(1);
23a6dc5f   阿宝   学校管理相关接口简单对接 
164
165
166
167
168
169
170
 
      let startDay = this.query?.startDay;
      if (!startDay) {
        this.query.startDay = new Date();
        this.query.endDay = new Date();
      }
    },
    methods: {
1b9bae95   梁保满   级联选择器调整，日志接口调整 
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
 
      setOperationType(type) {
        let txt;
        switch (type) {
          case 0:
            txt = "连接异常";
            break;
          case 1:
            txt = "问";
            break;
          case 2:
            txt = "测";
            break;
          case 3:
            txt = "考";
            break;
          case 4:
            txt = "抢答";
            break;
          case 5:
            txt = "抽答";
            break;
          case 6:
            txt = "再答";
            break;
          case 7:
            txt = "签到";
            break;
        }
        return txt;
      },
23a6dc5f   阿宝   学校管理相关接口简单对接 
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
 
      setDate(index) {
        const that = this;
        this.date = index == this.date ? "" : index;
        let aYear = new Date().getFullYear();
        let aMonth = new Date().getMonth() + 1;
        that.query.day = "";
        that.query.startDay = "";
        that.query.endDay = "";
        switch (index) {
          case 1:
            that.query.day = formatDate(new Date(), "yyyy-MM-dd");
            that.query.startDay = that.query.day;
            that.query.endDay = that.query.day;
            break;
          case 2:
            let day = new Date().getDay();
            if (day == 0) {
              //中国式星期天是一周的最后一天
              day = 7;
            }
d32e461c   梁保满   备题组卷 
221
 
            day--;
23a6dc5f   阿宝   学校管理相关接口简单对接 
222
223
224
225
226
227
228
229
230
231
 
            let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
            that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
          case 3:
            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
          case 4:
6d7bd862   梁保满   飞书bug 
232
 
            if (aMonth > 0 && aMonth < 4) {
e3b0e3e7   梁保满   季度时间格式调整 
233
 
              aMonth = "1";
23a6dc5f   阿宝   学校管理相关接口简单对接 
234
 
            } else if (aMonth > 3 && aMonth < 7) {
e3b0e3e7   梁保满   季度时间格式调整 
235
 
              aMonth = "4";
23a6dc5f   阿宝   学校管理相关接口简单对接 
236
 
            } else if (aMonth > 6 && aMonth < 10) {
e3b0e3e7   梁保满   季度时间格式调整 
237
 
              aMonth = "7";
23a6dc5f   阿宝   学校管理相关接口简单对接 
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
 
            } else {
              aMonth = "10";
            }
  
            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
        }
        this.page = 1;
        this._QueryData();
      },
      handleChangeTimeStart(val) {
        this.query.day = "";
        this.date = "";
        if (this.query.endDay) {
          if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.startDay = "";
          }
        }
      },
      handleChangeTimeEnd(val) {
        this.query.day = "";
        this.date = "";
        if (this.query.startDay) {
          if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.endDay = "";
          }
        }
      },
1b9bae95   梁保满   级联选择器调整，日志接口调整 
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
 
      changePage(page) {
        this.page = page;
        this._QueryData();
      },
      async _QueryDetail() {
        const { data, status, info } = await this.$request.deviceDetail({
          deviceId: this.id,
        });
        if (status === 0) {
          this.device = { ...data };
          for (let key in this.device) {
            this.device[key] = data[key];
          }
        } else {
          this.$message.error(info);
        }
      },
23a6dc5f   阿宝   学校管理相关接口简单对接 
287
288
289
290
291
292
 
      async _QueryData() {
        this.loading = true;
        //多课时对比
        let query = {};
        for (let key in this.query) {
          if (this.query[key] != "") {
1b9bae95   梁保满   级联选择器调整，日志接口调整 
293
294
295
296
297
 
            if (key == "day" || key == "startDay" || key == "endDay") {
              query[key] = this.query[key].split("-").join("");
            } else {
              query[key] = this.query[key];
            }
23a6dc5f   阿宝   学校管理相关接口简单对接 
298
299
 
          }
        }
1b9bae95   梁保满   级联选择器调整，日志接口调整 
300
301
302
303
304
 
        const {
          data = {},
          status,
          info,
        } = await this.$request.deviceLogList({
23a6dc5f   阿宝   学校管理相关接口简单对接 
305
 
          ...query,
1b9bae95   梁保满   级联选择器调整，日志接口调整 
306
307
308
 
          deviceId: Number(this.id),
          page: this.page,
          size: this.size,
23a6dc5f   阿宝   学校管理相关接口简单对接 
309
310
311
 
        });
        this.loading = false;
        if (status === 0) {
d32e461c   梁保满   备题组卷 
312
 
          this.tableData = (data?.list && [...data?.list]) || [];
1b9bae95   梁保满   级联选择器调整，日志接口调整 
313
 
          this.total = data.count;
23a6dc5f   阿宝   学校管理相关接口简单对接 
314
315
316
317
318
 
        } else {
          this.$message.error(info);
        }
      },
    },
db11048f   阿宝   设备状态，学校管理 
319
320
321
 
  };
  </script>
23a6dc5f   阿宝   学校管理相关接口简单对接 
322
323
324
325
 
  <style lang="scss" scoped>
  .page-content {
    padding: 20px;
  }
d32e461c   梁保满   备题组卷 
326
327
328
 
  .table-box {
    padding: 0 20px;
  }
280e7dfe   梁保满   设备日志显示选项 
329
330
 
  .serach-box {
    margin-left: 20px;
1b9bae95   梁保满   级联选择器调整，日志接口调整 
331
 
  }
db11048f   阿宝   设备状态，学校管理 
332
 
  </style>