baoman / Ezquiz_Platform

Blame view

src/views/device/log.vue 8.48 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>
280e7dfe   梁保满   设备日志显示选项 
24
 
          <el-descriptions-item v-if="type == 2" label="答题次数">{{
1b9bae95   梁保满   级联选择器调整，日志接口调整 
25
26
 
            device.answerTimes
          }}</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>
23a6dc5f   阿宝   学校管理相关接口简单对接 
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
 
        </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   梁保满   设备日志显示选项 
70
71
72
 
          <el-button type="primary" class="serach-box" round @click="_QueryData"
            >筛选</el-button
          >
23a6dc5f   阿宝   学校管理相关接口简单对接 
73
74
 
        </div>
      </div>
1b9bae95   梁保满   级联选择器调整，日志接口调整 
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
      <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>
        </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   阿宝   设备状态，学校管理 
111
112
113
114
 
    </div>
  </template>
  
  <script>
23a6dc5f   阿宝   学校管理相关接口简单对接 
115
 
  import { formatDate } from "utils";
db11048f   阿宝   设备状态，学校管理 
116
117
118
 
  export default {
    data() {
      return {
280e7dfe   梁保满   设备日志显示选项 
119
 
        type: 1,
1b9bae95   梁保满   级联选择器调整，日志接口调整 
120
 
        id: "",
23a6dc5f   阿宝   学校管理相关接口简单对接 
121
122
123
124
125
126
127
 
        date: "", //今天-昨天-本周
        query: {
          //搜索条件
          startDay: "",
          endDay: "",
          day: "",
        },
1b9bae95   梁保满   级联选择器调整，日志接口调整 
128
129
130
131
132
133
 
        tableData: [],
        device: {
          sn: "",
          electricity: "",
          pairingCode: "",
          classList: [],
280e7dfe   梁保满   设备日志显示选项 
134
 
          modifiedTime: "",
1b9bae95   梁保满   级联选择器调整，日志接口调整 
135
 
          answerTimes: "",
280e7dfe   梁保满   设备日志显示选项 
136
 
          otaVersionName:""
1b9bae95   梁保满   级联选择器调整，日志接口调整 
137
138
139
140
 
        },
        total: 0,
        page: 1,
        size: 20,
db11048f   阿宝   设备状态，学校管理 
141
142
 
      };
    },
23a6dc5f   阿宝   学校管理相关接口简单对接 
143
 
    created() {
1b9bae95   梁保满   级联选择器调整，日志接口调整 
144
 
      this.id = this.$route.query.id;
280e7dfe   梁保满   设备日志显示选项 
145
 
      this.type = this.$route.query.type;
1b9bae95   梁保满   级联选择器调整，日志接口调整 
146
147
 
      this._QueryDetail();
      this.setDate(1);
23a6dc5f   阿宝   学校管理相关接口简单对接 
148
149
150
151
152
153
154
 
      let startDay = this.query?.startDay;
      if (!startDay) {
        this.query.startDay = new Date();
        this.query.endDay = new Date();
      }
    },
    methods: {
1b9bae95   梁保满   级联选择器调整，日志接口调整 
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
 
      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   阿宝   学校管理相关接口简单对接 
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
 
      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   梁保满   备题组卷 
205
 
            day--;
23a6dc5f   阿宝   学校管理相关接口简单对接 
206
207
208
209
210
211
212
213
214
215
 
            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 
216
 
            if (aMonth > 0 && aMonth < 4) {
e3b0e3e7   梁保满   季度时间格式调整 
217
 
              aMonth = "1";
23a6dc5f   阿宝   学校管理相关接口简单对接 
218
 
            } else if (aMonth > 3 && aMonth < 7) {
e3b0e3e7   梁保满   季度时间格式调整 
219
 
              aMonth = "4";
23a6dc5f   阿宝   学校管理相关接口简单对接 
220
 
            } else if (aMonth > 6 && aMonth < 10) {
e3b0e3e7   梁保满   季度时间格式调整 
221
 
              aMonth = "7";
23a6dc5f   阿宝   学校管理相关接口简单对接 
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
 
            } 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   梁保满   级联选择器调整，日志接口调整 
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
 
      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   阿宝   学校管理相关接口简单对接 
271
272
273
274
275
276
 
      async _QueryData() {
        this.loading = true;
        //多课时对比
        let query = {};
        for (let key in this.query) {
          if (this.query[key] != "") {
1b9bae95   梁保满   级联选择器调整，日志接口调整 
277
278
279
280
281
 
            if (key == "day" || key == "startDay" || key == "endDay") {
              query[key] = this.query[key].split("-").join("");
            } else {
              query[key] = this.query[key];
            }
23a6dc5f   阿宝   学校管理相关接口简单对接 
282
283
 
          }
        }
1b9bae95   梁保满   级联选择器调整，日志接口调整 
284
285
286
287
288
 
        const {
          data = {},
          status,
          info,
        } = await this.$request.deviceLogList({
23a6dc5f   阿宝   学校管理相关接口简单对接 
289
 
          ...query,
1b9bae95   梁保满   级联选择器调整，日志接口调整 
290
291
292
 
          deviceId: Number(this.id),
          page: this.page,
          size: this.size,
23a6dc5f   阿宝   学校管理相关接口简单对接 
293
294
295
 
        });
        this.loading = false;
        if (status === 0) {
d32e461c   梁保满   备题组卷 
296
 
          this.tableData = (data?.list && [...data?.list]) || [];
1b9bae95   梁保满   级联选择器调整，日志接口调整 
297
 
          this.total = data.count;
23a6dc5f   阿宝   学校管理相关接口简单对接 
298
299
300
301
302
 
        } else {
          this.$message.error(info);
        }
      },
    },
db11048f   阿宝   设备状态，学校管理 
303
304
305
 
  };
  </script>
23a6dc5f   阿宝   学校管理相关接口简单对接 
306
307
308
309
 
  <style lang="scss" scoped>
  .page-content {
    padding: 20px;
  }
d32e461c   梁保满   备题组卷 
310
311
312
 
  .table-box {
    padding: 0 20px;
  }
280e7dfe   梁保满   设备日志显示选项 
313
314
 
  .serach-box {
    margin-left: 20px;
1b9bae95   梁保满   级联选择器调整，日志接口调整 
315
 
  }
db11048f   阿宝   设备状态，学校管理 
316
 
  </style>