Blame view

src/views/standard/test/contrast.vue 16.8 KB
4295ede6   梁保满   即使测报表对比页面开发
1
2
3
4
  <template>
    <div ref="main" class="page-container">
      <back-box>
        <template slot="title">
ee00775c   梁保满   测试bug
5
          <span>多班_{{ subjectNames }}_{{ title }}_测练成绩对比分析</span>
4295ede6   梁保满   即使测报表对比页面开发
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        </template>
      </back-box>
      <div class="page-content">
        <div class="content-header">
          <div class="tab-box">
            <span
              v-for="(item, index) in tabList"
              :key="item"
              class="tab-item"
              :class="type == index ? 'active' : ''"
              @click="setType(index)"
              >{{ item }}</span
            >
          </div>
ca630320   梁保满   中天挑的问题
20
          <el-button class="setMinScore" @click="openDia" round size="small"
4295ede6   梁保满   即使测报表对比页面开发
21
22
23
24
25
26
27
28
29
30
31
32
33
34
            >对比成绩等级设置</el-button
          >
        </div>
        <div id="print-content" class="table-box" v-loading="loading">
          <el-table
            :max-height="tableMaxHeight"
            v-show="type == 0"
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
ee00775c   梁保满   测试bug
35
              fixed
4295ede6   梁保满   即使测报表对比页面开发
36
37
38
39
40
41
42
43
              align="center"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="className"
              label="班级"
              align="center"
              fixed
ee00775c   梁保满   测试bug
44
            ></el-table-column>
e5f407d6   梁保满   测试问题
45
46
47
48
49
50
51
            <el-table-column label="测验人数/班级人数" align="center" width="84">
              <template slot-scope="scope">
                <p v-for="(item, index) in scope.row.count.split('/')">
                  {{ item }}{{ index == 0 ? "/" : "" }}
                </p>
              </template>
            </el-table-column>
4295ede6   梁保满   即使测报表对比页面开发
52
53
            <el-table-column
              prop="percent"
4295ede6   梁保满   即使测报表对比页面开发
54
55
56
57
              label="参与度"
              align="center"
            ></el-table-column>
            <el-table-column
4295ede6   梁保满   即使测报表对比页面开发
58
59
60
61
62
              prop="avg"
              label="班平均分"
              align="center"
            ></el-table-column>
            <el-table-column
4295ede6   梁保满   即使测报表对比页面开发
63
64
65
66
67
68
              prop="max"
              label="班最高分"
              sortable
              align="center"
            ></el-table-column>
            <el-table-column
4295ede6   梁保满   即使测报表对比页面开发
69
70
71
72
73
74
75
              prop="min"
              label="班最低分"
              sortable
              align="center"
            ></el-table-column>
  
            <el-table-column
ee00775c   梁保满   测试bug
76
77
              v-for="(item, index) in defaultLevels.levels"
              :label="item[0] + '数(率)'"
4295ede6   梁保满   即使测报表对比页面开发
78
              align="center"
ee00775c   梁保满   测试bug
79
80
81
82
              ><template slot-scope="scoped">
                <p class="p1">{{ scoped.row.levels[index].people }}</p>
                <p class="p1">({{ scoped.row.levels[index].percent }})</p>
              </template></el-table-column
4295ede6   梁保满   即使测报表对比页面开发
83
84
85
86
87
88
89
90
91
92
            >
          </el-table>
          <el-table
            v-show="type == 1"
            :max-height="tableMaxHeight"
            :data="tableData2"
            border
            style="width: 100%"
          >
            <el-table-column
ee00775c   梁保满   测试bug
93
              prop="rank"
4295ede6   梁保满   即使测报表对比页面开发
94
              label="排名"
da9346ee   梁保满   全选和排序问题
95
              sortable
4295ede6   梁保满   即使测报表对比页面开发
96
97
98
99
100
101
102
103
104
105
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="className"
              label="班级"
4295ede6   梁保满   即使测报表对比页面开发
106
107
108
109
110
111
112
113
114
115
116
              align="center"
            ></el-table-column>
            <el-table-column
              prop="score"
              label="总分"
              sortable
              align="center"
            ></el-table-column>
            <el-table-column
              prop="levelName"
              label="成绩等级"
4295ede6   梁保满   即使测报表对比页面开发
117
118
119
120
121
122
123
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div class="down">
          <div>
            <el-button
ee00775c   梁保满   测试bug
124
              v-loading="exportLoading"
4295ede6   梁保满   即使测报表对比页面开发
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
              @click="exportData"
              type="primary"
              plain
              round
              icon="fa fa-cloud-download"
              >导出报表</el-button
            >
            <el-button
              v-if="!this.$store.getters.code"
              @click="print"
              type="primary"
              plain
              round
              icon="el-icon-printer"
              >打印</el-button
            >
          </div>
        </div>
  
        <el-dialog
          :close-on-click-modal="false"
          title="等级设置"
          :visible.sync="diaLogBox"
ca630320   梁保满   中天挑的问题
148
          width="800px"
4295ede6   梁保满   即使测报表对比页面开发
149
150
151
152
153
154
155
156
157
158
          @closed="closeDia"
        >
          <el-form class="use-form">
            <el-form-item class="use-form-item-box">
              <el-form-item label="等级名称:" class="use-form-item">
                <el-select
                  size="small"
                  v-model="fromData.type"
                  @change="changeType"
                >
ca630320   梁保满   中天挑的问题
159
160
161
                  <el-option label="优良合格不合格" :value="0"></el-option>
                  <el-option label="ABCD" :value="1"></el-option>
                  <el-option label="自定义" :value="2"></el-option>
4295ede6   梁保满   即使测报表对比页面开发
162
163
164
                </el-select>
              </el-form-item>
              <el-form-item label="等级设置模式:" class="use-form-item">
ee00775c   梁保满   测试bug
165
166
167
                <el-select size="small" v-model="fromData.levelType">
                  <el-option label="按分数比例" :value="0"></el-option>
                  <el-option label="按已考人数比例" :value="1"></el-option>
4295ede6   梁保满   即使测报表对比页面开发
168
169
170
171
172
173
174
175
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <div class="dia-tab-box">
                <p class="dia-tab-tit">
                  <span class="item1">编号</span>
                  <span class="item2"><i>*</i>等级名称</span>
e5f407d6   梁保满   测试问题
176
177
178
                  <span class="item3"><i>*</i>等级最高</span>
                  <span class="item3"><i>*</i>等级最低</span>
                  <span class="item"></span>
4295ede6   梁保满   即使测报表对比页面开发
179
180
181
182
183
184
185
186
187
188
189
                </p>
                <div
                  class="dia-tab-item"
                  v-for="(item, index) in fromData.levels"
                >
                  <span class="item1">{{ index + 1 }}</span>
                  <p class="item2">
                    <el-input
                      class="score-ipt"
                      v-model="item[0]"
                      :maxlength="12"
ee00775c   梁保满   测试bug
190
                      @keydown.native="keydownRange($event)"
4295ede6   梁保满   即使测报表对比页面开发
191
192
                    ></el-input>
                  </p>
e5f407d6   梁保满   测试问题
193
                  <p class="item3">
4295ede6   梁保满   即使测报表对比页面开发
194
195
196
197
198
                    <el-input
                      class="score-ipt"
                      type="number"
                      v-model="item[1]"
                      :min="item[2]"
ca630320   梁保满   中天挑的问题
199
                      :max="index == 0 ? 100 : fromData.levels[index - 1][2]"
ee00775c   梁保满   测试bug
200
                      @keydown.native="keydownRange($event)"
4295ede6   梁保满   即使测报表对比页面开发
201
                    ></el-input>
e5f407d6   梁保满   测试问题
202
203
                    %
                    <template v-if="fromData.levelType == 0">
f6fc4301   梁保满   等级调整
204
                      ({{ index != 0 ? "不含" : ""
ca630320   梁保满   中天挑的问题
205
                      }}{{
e5f407d6   梁保满   测试问题
206
207
208
                        Number(((item[1] / 100) * examPaperScore).toFixed(1))
                      }}分)
                    </template>
f6fc4301   梁保满   等级调整
209
                    <template v-else>{{ index != 0 ? "不含" : "" }}</template>
4295ede6   梁保满   即使测报表对比页面开发
210
                  </p>
e5f407d6   梁保满   测试问题
211
212
                  <p>~</p>
                  <p class="item3">
4295ede6   梁保满   即使测报表对比页面开发
213
214
215
216
217
                    <el-input
                      class="score-ipt"
                      type="number"
                      v-model="item[2]"
                      :min="0"
ca630320   梁保满   中天挑的问题
218
                      :max="item[1]"
ee00775c   梁保满   测试bug
219
                      @keydown.native="keydownRange($event)"
4295ede6   梁保满   即使测报表对比页面开发
220
                    ></el-input>
e5f407d6   梁保满   测试问题
221
222
                    %
                    <template v-if="fromData.levelType == 0">
f6fc4301   梁保满   等级调整
223
                      ({{
e5f407d6   梁保满   测试问题
224
225
226
                        Number(((item[2] / 100) * examPaperScore).toFixed(1))
                      }}分)
                    </template>
4295ede6   梁保满   即使测报表对比页面开发
227
                  </p>
e5f407d6   梁保满   测试问题
228
                  <p class="item">
4295ede6   梁保满   即使测报表对比页面开发
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
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
                    <el-link
                      type="danger"
                      :underline="false"
                      @click="fromData.levels.splice(index, 1)"
                      >删除</el-link
                    >
                  </p>
                </div>
                <div class="add">
                  <p @click="fromData.levels.push(['', '', ''])">
                    <el-button
                      size="mini"
                      icon="el-icon-plus"
                      circle
                      type="primary"
                    ></el-button
                    >添加一行
                  </p>
                </div>
              </div>
            </el-form-item>
          </el-form>
  
          <div class="dialog-footer" slot="footer" align="center">
            <el-button type="danger" @click="savefrom">保存</el-button>
            <el-button @click="diaLogBox = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { downloadFile, tablePrint } from "@/utils";
  export default {
    data() {
      return {
        ids: "",
        title: "",
        subjectNames: "",
        tabList: ["班级对比情况", "学生成绩排名"],
        type: 0,
        loading: false,
ee00775c   梁保满   测试bug
272
        exportLoading: false,
4295ede6   梁保满   即使测报表对比页面开发
273
274
        diaLogBox: false,
        fromData: {
ca630320   梁保满   中天挑的问题
275
          type: 0,
4295ede6   梁保满   即使测报表对比页面开发
276
277
278
279
280
281
282
283
          levelType: 0,
          levels: [
            ["优秀", 100, 90],
            ["良好", 89.9, 70],
            ["合格", 69.9, 60],
            ["不合格", 59.9, 0],
          ],
        },
ee00775c   梁保满   测试bug
284
285
286
287
        defaultLevels: {
          levelType: 0,
          levels: [],
        },
4295ede6   梁保满   即使测报表对比页面开发
288
289
290
        tableMaxHeight: 600,
        tableData: [],
        tableData2: [],
e5f407d6   梁保满   测试问题
291
        examPaperScore: 100, //卷面最高分
4295ede6   梁保满   即使测报表对比页面开发
292
293
      };
    },
e5f407d6   梁保满   测试问题
294
    async created() {
4295ede6   梁保满   即使测报表对比页面开发
295
      this.ids = this.$route.query.ids;
e5f407d6   梁保满   测试问题
296
297
      await this._QueryData();
      await this._QueryDefaultLevels();
4295ede6   梁保满   即使测报表对比页面开发
298
    },
ee00775c   梁保满   测试bug
299
300
301
    destroyed() {
      sessionStorage.setItem("levelFromData", "");
    },
4295ede6   梁保满   即使测报表对比页面开发
302
    methods: {
ee00775c   梁保满   测试bug
303
304
305
306
307
308
      // 禁止输入负数
      keydownRange(event) {
        if (event.key == "-" || event.key == "e") {
          event.returnValue = "";
        }
      },
4295ede6   梁保满   即使测报表对比页面开发
309
      print() {
ee00775c   梁保满   测试bug
310
311
312
313
        tablePrint(
          "print-content",
          `多班_${this.subjectNames}_${this.title}_测练成绩对比分析`
        );
4295ede6   梁保满   即使测报表对比页面开发
314
315
316
317
318
319
      },
      setType(type) {
        console.log(this.$refs.main.offsetHeight - 50);
        this.tableMaxHeight = this.$refs.main.offsetHeight;
        this.type = type;
      },
ca630320   梁保满   中天挑的问题
320
321
322
      openDia() {
        this.diaLogBox = true;
      },
4295ede6   梁保满   即使测报表对比页面开发
323
      closeDia() {
ee00775c   梁保满   测试bug
324
325
326
327
328
329
330
        let levelFromData = sessionStorage.getItem("levelFromData");
        if (levelFromData) {
          levelFromData = JSON.parse(levelFromData);
          this.fromData.type = levelFromData.type;
          this.fromData.levelType = levelFromData.levelType;
          this.fromData.levels = [...levelFromData.levels];
        } else {
ca630320   梁保满   中天挑的问题
331
          this.fromData.type = 0;
ee00775c   梁保满   测试bug
332
333
334
          this.fromData.levelType = this.defaultLevels.levelType;
          this.fromData.levels = [...this.defaultLevels.levels];
        }
4295ede6   梁保满   即使测报表对比页面开发
335
336
      },
      changeType(val) {
ca630320   梁保满   中天挑的问题
337
        if (val == this.defaultLevels.type) {
ee00775c   梁保满   测试bug
338
          this.fromData.levels = [...this.defaultLevels.levels];
4295ede6   梁保满   即使测报表对比页面开发
339
        } else {
ca630320   梁保满   中天挑的问题
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
          this.fromData.levels = this.fromData.levels.splice(0, 4);
          if (val == 0) {
            this.fromData.levels = this.fromData.levels.map((item, index) => {
              let arrTxt = ["优秀", "良好", "合格", "不合格"];
              return [arrTxt[index], item[1], item[2]];
            });
          } else if (val == 1) {
            this.fromData.levels = this.fromData.levels.map((item, index) => {
              let arrTxt = ["A", "B", "C", "D"];
              return [arrTxt[index], item[1], item[2]];
            });
          } else {
            this.fromData.levels = this.fromData.levels.map((item, index) => {
              return ["", item[1], item[2]];
            });
          }
4295ede6   梁保满   即使测报表对比页面开发
356
357
        }
      },
4295ede6   梁保满   即使测报表对比页面开发
358
      savefrom() {
4295ede6   梁保满   即使测报表对比页面开发
359
360
361
362
363
364
        for (let i = 0; i < this.fromData.levels.length; i++) {
          if (this.fromData.levels[i].includes("")) {
            this.$message.warning("请补全编号" + (i + 1) + "设置信息!");
            return;
          }
        }
31436559   梁保满   多班级样式问题,成绩登记设置问题
365
366
        if (this.fromData.levels.length == 0) {
          this.$message.warning("请添加等级设置!");
e5f407d6   梁保满   测试问题
367
368
369
370
371
372
373
374
375
          return;
        }
        let nums = [];
        let ERR_OK = false;
        this.fromData.levels.map((item) => {
          nums.push(Number(item[1]));
          nums.push(Number(item[2]));
        });
        for (let i = 0; i < nums.length; i++) {
ca630320   梁保满   中天挑的问题
376
          if (nums[i + 1] && nums[i + 1] > nums[i]) {
e5f407d6   梁保满   测试问题
377
378
379
380
            ERR_OK = true;
            this.$message.warning("高等级比例不能低于低等级比例!请检查");
            break;
          }
31436559   梁保满   多班级样式问题,成绩登记设置问题
381
        }
e5f407d6   梁保满   测试问题
382
        if (ERR_OK) return;
31436559   梁保满   多班级样式问题,成绩登记设置问题
383
384
        this.tableData = [];
        this.tableData2 = [];
ca630320   梁保满   中天挑的问题
385
        this.defaultLevels.type = this.fromData.type;
ee00775c   梁保满   测试bug
386
387
388
389
        this.defaultLevels.levelType = this.fromData.levelType;
        this.defaultLevels.levels = [...this.fromData.levels];
        sessionStorage.setItem("levelFromData", JSON.stringify(this.fromData));
        this.diaLogBox = false;
4295ede6   梁保满   即使测报表对比页面开发
390
391
392
393
394
395
        this._QueryData({
          levelType: this.fromData.levelType,
          levels: this.fromData.levels,
        });
      },
  
ee00775c   梁保满   测试bug
396
397
398
399
      async _QueryDefaultLevels() {
        const { data, info, status } = await this.$request.defaultLevels();
        if (status === 0) {
          this.defaultLevels = { ...data } || {
ee00775c   梁保满   测试bug
400
401
402
403
404
405
406
407
            levelType: 0,
            levels: [
              ["优秀", 100, 90],
              ["良好", 89.9, 70],
              ["合格", 69.9, 60],
              ["不合格", 59.9, 0],
            ],
          };
f6fc4301   梁保满   等级调整
408
          this.defaultLevels.type = 0
ee00775c   梁保满   测试bug
409
410
          this.fromData.levelType = this.defaultLevels.levelType;
          this.fromData.levels = [...this.defaultLevels.levels];
ca630320   梁保满   中天挑的问题
411
412
413
414
          sessionStorage.setItem(
            "levelFromData",
            JSON.stringify(this.defaultLevels)
          );
ee00775c   梁保满   测试bug
415
416
417
418
        } else {
          this.$message.error(info);
        }
      },
4295ede6   梁保满   即使测报表对比页面开发
419
420
421
      async _QueryData(params) {
        let query = {};
        if (params) {
15537b36   梁保满   等级优化
422
423
424
          let paramObj = JSON.parse(JSON.stringify(params))
          if (paramObj.levelType == 0) {
            paramObj.levels = paramObj.levels.map((item) => {
e5f407d6   梁保满   测试问题
425
426
427
428
429
              item[1] = ((item[1] / 100) * this.examPaperScore).toFixed(1);
              item[2] = ((item[2] / 100) * this.examPaperScore).toFixed(1);
              return item;
            });
          }
15537b36   梁保满   等级优化
430
          query = { ...paramObj };
4295ede6   梁保满   即使测报表对比页面开发
431
432
433
434
435
        }
        const { data, info, status } = await this.$request.examMultiClassReport({
          examIds: this.ids,
          ...query,
        });
ee00775c   梁保满   测试bug
436
437
        if (status === 0) {
          this.title = data.title;
e5f407d6   梁保满   测试问题
438
          this.examPaperScore = data.examPaperScore || 100;
ee00775c   梁保满   测试bug
439
440
          this.subjectNames = data.subjectName;
          this.tableData = data.classes || [];
da9346ee   梁保满   全选和排序问题
441
442
443
444
445
          this.tableData2 =
            data.students.map((item) => {
              item.score = Number(item.score);
              return item;
            }) || [];
4295ede6   梁保满   即使测报表对比页面开发
446
447
448
449
450
451
452
453
454
        } else {
          this.$message.error(info);
        }
      },
  
      //导出
      async exportData() {
        if (this.exportLoading == true) return;
        this.exportLoading = true;
0074e60a   梁保满   导出报表参数设置
455
456
457
458
459
460
461
462
463
        let params = { ...this.fromData };
        if (params.levelType == 0) {
          params.levels = params.levels.map((item) => {
            console.log(item);
            item[1] = ((item[1] / 100) * this.examPaperScore).toFixed(1);
            item[2] = ((item[2] / 100) * this.examPaperScore).toFixed(1);
            return item;
          });
        }
4295ede6   梁保满   即使测报表对比页面开发
464
        const data = await this.$request.exportExamMultiReport({
ee00775c   梁保满   测试bug
465
          examIds: this.ids,
0074e60a   梁保满   导出报表参数设置
466
467
          levels: params.levels,
          levelType: params.levelType,
4295ede6   梁保满   即使测报表对比页面开发
468
469
470
471
472
473
        });
        this.exportLoading = false;
        if (data) {
          let blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
ee00775c   梁保满   测试bug
474
475
476
477
          downloadFile(
            `多班_${this.subjectNames}_${this.title}_测练成绩对比分析`,
            blob
          );
4295ede6   梁保满   即使测报表对比页面开发
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
        } else {
          this.$message.error("下载失败");
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    position: relative;
    height: 100%;
    .table-box {
      min-height: 100%;
    }
    &.active {
      overflow: hidden;
    }
    .content-header {
      width: 100%;
      position: relative;
      .setMinScore {
        position: absolute;
        bottom: 0;
0074e60a   梁保满   导出报表参数设置
502
        right: 0;
4295ede6   梁保满   即使测报表对比页面开发
503
504
505
506
507
508
509
      }
    }
    .page-content {
      padding: 20px 20px 0;
    }
  }
  .tab-box {
0074e60a   梁保满   导出报表参数设置
510
    width: 400px;
4295ede6   梁保满   即使测报表对比页面开发
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
    margin: 0 auto 12px;
    background: #f8f8f8;
    border-radius: 20px;
    display: flex;
    user-select: none;
    .tab-item {
      flex: 1;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #666;
      font-weight: 500;
      background: transparent;
      border-radius: 20px;
      cursor: pointer;
      &.active {
        background: #667ffd;
        color: #fff;
      }
    }
  }
  .down {
    padding-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .use-form {
    padding: 0 12px;
    .use-form-item-box {
      :deep(.el-form-item__content) {
        display: flex;
      }
      .use-form-item {
        width: 40%;
        margin-right: 20px;
      }
    }
  }
  .dia-tab-box {
    .dia-tab-tit,
    .dia-tab-item {
      margin-bottom: 10px;
      i {
        color: #f30;
        padding-right: 5px;
      }
      display: flex;
e5f407d6   梁保满   测试问题
560
561
562
      .item {
        width: 40px;
      }
4295ede6   梁保满   即使测报表对比页面开发
563
564
      .item1 {
        padding-left: 10px;
e5f407d6   梁保满   测试问题
565
        width: 10%;
4295ede6   梁保满   即使测报表对比页面开发
566
567
      }
      .item2 {
e5f407d6   梁保满   测试问题
568
569
570
571
        width: 18%;
      }
      .item3 {
        padding-left: 12px;
4295ede6   梁保满   即使测报表对比页面开发
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
        flex: 1;
      }
      .score-ipt {
        width: 100px;
      }
    }
    .dia-tab-tit {
      background: rgba(243, 243, 243, 1);
    }
    .add {
      display: flex;
      justify-content: center;
      margin: 0 auto;
      p {
        cursor: pointer;
      }
      .el-button {
        margin-right: 6px;
      }
    }
  }
da9346ee   梁保满   全选和排序问题
593
594
  .p1 {
    line-height: 18px;
ee00775c   梁保满   测试bug
595
  }
4295ede6   梁保满   即使测报表对比页面开发
596
  </style>