Blame view

src/views/index/mainIndex.vue 11.5 KB
c1b532ad   梁保满   权限配置,路由基础设置
1
  <template>
d4283687   梁保满   首页布局完成,页面顶部返回组件
2
    <div class="container">
ee6e7628   梁保满   备题组卷借口数据对接调整
3
      <ul class="nav-list" v-if="type == 'ROLE_XUEXIAO'">
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
4
        <li class="nav-item item1" @click="links('/setUpAccount')">
d4283687   梁保满   首页布局完成,页面顶部返回组件
5
6
7
          <img class="icon" src="../../assets/nav/setUpAccount.png" alt="" />
          <div class="text">
            <p class="p1">账号管理</p>
bb4c8454   阿宝   添加,修改教师
8
            <p class="p2">
225a00b6   梁保满   飞书问题解决
9
10
11
12
13
14
15
16
17
18
              管理
              <template v-if="dataInfo.teacherCourseCount">
                {{ dataInfo.teacherCourseCount }}个任课教师,
              </template>
              <template v-if="dataInfo.classManagerCount">
                {{ dataInfo.classManagerCount }}个班主任,
              </template>
              <template v-if="dataInfo.teacherGradeCount">
                {{ dataInfo.teacherGradeCount }}个备课组长账号信息。
              </template>
bb4c8454   阿宝   添加,修改教师
19
            </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
20
21
          </div>
        </li>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
22
        <li class="nav-item item1" @click="links('/setUpSchool')">
d4283687   梁保满   首页布局完成,页面顶部返回组件
23
24
25
          <img class="icon" src="../../assets/nav/setUpSchool.png" alt="" />
          <div class="text">
            <p class="p1">学校管理</p>
bb4c8454   阿宝   添加,修改教师
26
            <p class="p2">
225a00b6   梁保满   飞书问题解决
27
28
29
30
31
32
33
34
35
36
              管理
              <template v-if="dataInfo.gradeCount"
                >{{ dataInfo.gradeCount }}个年级,
              </template>
              <template v-if="dataInfo.classCount">
                {{ dataInfo.classCount }}个班级,
              </template>
              <template v-if="dataInfo.studentCount">
                {{ dataInfo.studentCount }}名学生信息。
              </template>
bb4c8454   阿宝   添加,修改教师
37
            </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
38
39
          </div>
        </li>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
40
        <li class="nav-item item2" @click="links('/device')">
d4283687   梁保满   首页布局完成,页面顶部返回组件
41
42
43
          <img class="icon" src="../../assets/nav/device.png" alt="" />
          <div class="text">
            <p class="p1">设备状态</p>
bb4c8454   阿宝   添加,修改教师
44
            <p class="p2">
225a00b6   梁保满   飞书问题解决
45
46
47
48
49
50
51
              管理
              <template v-if="dataInfo.stationCount"
                >{{ dataInfo.stationCount }}个基站,</template
              >
              <template v-if="dataInfo.keyboardCount">
                {{ dataInfo.keyboardCount }}套答题器设备。</template
              >
bb4c8454   阿宝   添加,修改教师
52
            </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
53
54
55
          </div>
        </li>
        <li class="item3">
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
56
          <div class="nav-item item1 item-child1" @click="links('/analysis')">
d4283687   梁保满   首页布局完成,页面顶部返回组件
57
58
59
60
61
62
            <img class="icon" src="../../assets/nav/analysis.png" alt="" />
            <div class="text">
              <p class="p1">使用分析</p>
              <p class="p2">按班级、科目等维度分析设备使用频率。</p>
            </div>
          </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
63
          <div class="nav-item item1 item-child2" @click="links('/card')">
d4283687   梁保满   首页布局完成,页面顶部返回组件
64
            <img class="icon" src="../../assets/nav/card.png" alt="" />
e5ff81a1   阿宝   集团管理员接口
65
            <p class="p1">发卡记录</p>
ca39cc52   阿宝   飞书问题处理
66
            <p class="p2">查看发卡、换卡记录信息。</p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
67
          </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
68
          <div class="nav-item item1 item-child2" @click="links('/down')">
d4283687   梁保满   首页布局完成,页面顶部返回组件
69
70
71
72
73
74
            <img class="icon" src="../../assets/nav/down.png" alt="" />
            <p class="p1">软件下载</p>
            <p class="p2">设置参数,下载授课端软件。</p>
          </div>
        </li>
      </ul>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
75
76
      <ul class="nav-list" v-if="type == 'ROLE_JITUAN'">
        <template v-for="item in navList">
bb4c8454   阿宝   添加,修改教师
77
78
79
80
81
82
83
          <li
            v-if="!item.path.includes('dataSync')"
            :key="item.path"
            class="nav-item item4"
            @click="links(item.path)"
          >
            <img class="icon" :src="getImgs(item.path)" alt="" />
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
84
            <div class="text" v-if="item.path == '/setUpConglomerate'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
85
              <p class="p1">学校管理</p>
225a00b6   梁保满   飞书问题解决
86
87
88
89
90
91
92
93
94
              <p class="p2">
                管理
                <template v-if="dataInfo.regionCount"
                  >{{ dataInfo.regionCount }}个区域,</template
                >
                <template v-if="dataInfo.schoolCount"
                  >{{ dataInfo.schoolCount }}个学校。</template
                >
              </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
95
            </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
96
            <div class="text" v-else-if="item.path == '/setUpAccount'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
97
              <p class="p1">账号管理</p>
225a00b6   梁保满   飞书问题解决
98
99
100
101
102
              <p class="p2">
                共{{
                  dataInfo.regionManagerCount + dataInfo.schoolManagerCount
                }}个各层级管理员账号。
              </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
103
            </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
104
            <div class="text" v-else-if="item.path == '/device'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
105
              <p class="p1">设备状态</p>
225a00b6   梁保满   飞书问题解决
106
107
108
109
110
111
112
113
114
              <p class="p2">
                管理
                <template v-if="dataInfo.stationCount"
                  >{{ dataInfo.stationCount }}个基站,</template
                >
                <template v-if="dataInfo.keyboardCount">
                  {{ dataInfo.keyboardCount }}套答题器设备。</template
                >
              </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
115
            </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
116
            <div class="text" v-else-if="item.path == '/analysis'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
117
118
119
              <p class="p1">使用分析</p>
              <p class="p2">按软件功能、题型统计使用频率。</p>
            </div>
bb4c8454   阿宝   添加,修改教师
120
          </li>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
121
        </template>
d4283687   梁保满   首页布局完成,页面顶部返回组件
122
      </ul>
bb4c8454   阿宝   添加,修改教师
123
124
125
126
127
128
129
130
131
132
133
134
      <ul
        class="nav-list"
        v-if="type == 'ROLE_JIAOSHI' || type == 'ROLE_BANZHUREN'"
      >
        <template v-for="item in navList">
          <li
            v-if="!item.path.includes('dataSync')"
            :key="item.path"
            class="nav-item item4"
            @click="links(item.path)"
          >
            <img class="icon" :src="getImgs(item.path)" alt="" />
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
135
            <div class="text" v-if="item.path == '/examinationPaper'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
136
              <p class="p1">备题组卷</p>
225a00b6   梁保满   飞书问题解决
137
138
139
              <p class="p2" v-if="dataInfo.paperCount">
                {{ dataInfo.paperCount }}套答题卡。
              </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
140
            </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
141
            <div class="text" v-else-if="item.path == '/portrait'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
142
              <p class="p1">学生画像</p>
e5ff81a1   阿宝   集团管理员接口
143
              <!-- <p class="p2">共分析{{ dataInfo.imagesCount }}名学生成绩。</p> -->
45504a95   阿宝   即时测页面,以及小题修改答案
144
              <p class="p2">功能开发中。</p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
145
            </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
146
            <div class="text" v-else-if="item.path == '/ask'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
147
              <p class="p1">随堂问报表</p>
225a00b6   梁保满   飞书问题解决
148
              <p class="p2" v-if="dataInfo.classPeriodCount">
e5ff81a1   阿宝   集团管理员接口
149
                对{{ dataInfo.classPeriodCount }}套随堂问答题记录分析。
bb4c8454   阿宝   添加,修改教师
150
              </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
151
            </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
152
            <div class="text" v-else-if="item.path == '/test'">
d4283687   梁保满   首页布局完成,页面顶部返回组件
153
              <p class="p1">即时测报表</p>
225a00b6   梁保满   飞书问题解决
154
155
156
              <p class="p2" v-if="dataInfo.examCount">
                对{{ dataInfo.examCount }}套即时测答题记录分析。
              </p>
d4283687   梁保满   首页布局完成,页面顶部返回组件
157
            </div>
bb4c8454   阿宝   添加,修改教师
158
          </li>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
159
        </template>
d4283687   梁保满   首页布局完成,页面顶部返回组件
160
161
      </ul>
    </div>
c1b532ad   梁保满   权限配置,路由基础设置
162
163
164
  </template>
  
  <script>
c1b532ad   梁保满   权限配置,路由基础设置
165
166
  export default {
    name: "mainIndex",
d4283687   梁保满   首页布局完成,页面顶部返回组件
167
168
    data() {
      return {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
169
170
        type: "",
        navList: [],
e5ff81a1   阿宝   集团管理员接口
171
        dataInfo: {},
d4283687   梁保满   首页布局完成,页面顶部返回组件
172
      };
c1b532ad   梁保满   权限配置,路由基础设置
173
    },
bb4c8454   阿宝   添加,修改教师
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
    watch: {
      "$store.getters.info.showRoleName": function (val) {
        let type = "";
        this.$store.getters.info.permissions.map((item) => {
          if (item.roleName == val) {
            type = item.role;
          }
        });
        this.type = type ? type : this.$store.getters.info.permissions[0].role;
        this.navList = this.$store.getters.addRouters.map((item) => {
          return {
            name: item.name,
            path: item.children[0].path,
          };
        });
      },
bb778c90   阿宝   设备状态
190
    },
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
191
    created() {
bb4c8454   阿宝   添加,修改教师
192
193
194
195
      let type = "";
      this.$store.getters.info.permissions.map((item) => {
        if (item.roleName == this.$store.getters.info.showRoleName) {
          type = item.role;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
196
        }
bb4c8454   阿宝   添加,修改教师
197
198
199
200
201
202
203
204
205
206
      });
      this.type = type ? type : this.$store.getters.info.permissions[0].role;
      this.navList = this.$store.getters.addRouters.map((item) => {
        return {
          name: item.name,
          path: item.children[0].path,
        };
      });
      if (this.type == "ROLE_XUEXIAO") {
        this.schoolIndex();
9309dc5d   梁保满   任课老师接口完成
207
      } else if (this.type == "ROLE_JIAOSHI" ) {
bb4c8454   阿宝   添加,修改教师
208
        this.teacherIndex();
225a00b6   梁保满   飞书问题解决
209
      } else if (this.type == "ROLE_JITUAN") {
e5ff81a1   阿宝   集团管理员接口
210
        this.tenantIndex();
9309dc5d   梁保满   任课老师接口完成
211
212
      }else if (this.type == "ROLE_BANZHUREN") {
        this.classIndex();
23a6dc5f   阿宝   学校管理相关接口简单对接
213
      }
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
214
    },
c1b532ad   梁保满   权限配置,路由基础设置
215
    methods: {
d4283687   梁保满   首页布局完成,页面顶部返回组件
216
      getImgs(path) {
bb4c8454   阿宝   添加,修改教师
217
        return require(`@/assets/nav${path}.png`);
d4283687   梁保满   首页布局完成,页面顶部返回组件
218
219
220
      },
      links(path) {
        this.$router.push({
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
221
          path: path,
d4283687   梁保满   首页布局完成,页面顶部返回组件
222
        });
c1b532ad   梁保满   权限配置,路由基础设置
223
      },
560c12f2   阿宝   学校设置,软件下载
224
225
226
      async teacherIndex() {
        const { data, status, info } = await this.$request.teacherIndex();
        if (status === 0) {
e5ff81a1   阿宝   集团管理员接口
227
          this.dataInfo = { ...data };
560c12f2   阿宝   学校设置,软件下载
228
229
230
231
        } else {
          this.$message.error(info);
        }
      },
23a6dc5f   阿宝   学校管理相关接口简单对接
232
233
234
      async schoolIndex() {
        const { data, status, info } = await this.$request.schoolIndex();
        if (status === 0) {
e5ff81a1   阿宝   集团管理员接口
235
236
237
238
239
240
241
242
243
          this.dataInfo = { ...data };
        } else {
          this.$message.error(info);
        }
      },
      async tenantIndex() {
        const { data, status, info } = await this.$request.tenantIndex();
        if (status === 0) {
          this.dataInfo = { ...data };
23a6dc5f   阿宝   学校管理相关接口简单对接
244
245
        } else {
          this.$message.error(info);
9309dc5d   梁保满   任课老师接口完成
246
247
248
249
250
251
252
253
        }
      },
      async classIndex() {
        const { data, status, info } = await this.$request.classIndex();
        if (status === 0) {
          this.dataInfo = { ...data };
        } else {
          this.$message.error(info);
23a6dc5f   阿宝   学校管理相关接口简单对接
254
255
        }
      },
c1b532ad   梁保满   权限配置,路由基础设置
256
257
258
259
260
    },
  };
  </script>
  
  <style lang="scss">
d4283687   梁保满   首页布局完成,页面顶部返回组件
261
  .container {
c1b532ad   梁保满   权限配置,路由基础设置
262
    display: flex;
d4283687   梁保满   首页布局完成,页面顶部返回组件
263
264
265
266
267
268
269
270
271
272
273
274
275
276
    justify-content: center;
    align-items: center;
    padding: 100px 90px 0 50px;
    .nav-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .nav-item {
        background: #f8f8f8;
        border-radius: 20px;
        box-shadow: 3px 3px 3px #aaaaaa59;
        cursor: pointer;
        &:hover {
          background-color: #ededed;
c1b532ad   梁保满   权限配置,路由基础设置
277
        }
d4283687   梁保满   首页布局完成,页面顶部返回组件
278
279
280
281
        .icon {
          width: 110px;
          height: 110px;
          border-radius: 50%;
c1b532ad   梁保满   权限配置,路由基础设置
282
        }
d4283687   梁保满   首页布局完成,页面顶部返回组件
283
284
285
286
287
288
        .p1 {
          font-size: 18px;
          color: #333;
          line-height: 18px;
          margin-bottom: 12px;
          font-weight: 500;
c1b532ad   梁保满   权限配置,路由基础设置
289
        }
d4283687   梁保满   首页布局完成,页面顶部返回组件
290
291
292
        .p2 {
          font-size: 14px;
          color: #999;
c1b532ad   梁保满   权限配置,路由基础设置
293
        }
d4283687   梁保满   首页布局完成,页面顶部返回组件
294
295
296
297
298
299
300
301
302
      }
      .item1 {
        width: calc(50% - 10px);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
23a6dc5f   阿宝   学校管理相关接口简单对接
303
        padding: 40px 20px 40px 80px;
d4283687   梁保满   首页布局完成,页面顶部返回组件
304
305
        &:nth-child(2) {
          margin-right: 0;
c1b532ad   梁保满   权限配置,路由基础设置
306
        }
d4283687   梁保满   首页布局完成,页面顶部返回组件
307
308
        .icon {
          margin-right: 20px;
c1b532ad   梁保满   权限配置,路由基础设置
309
        }
d4283687   梁保满   首页布局完成,页面顶部返回组件
310
311
312
313
314
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 10px;
c1b532ad   梁保满   权限配置,路由基础设置
315
        }
d4283687   梁保满   首页布局完成,页面顶部返回组件
316
317
318
319
320
321
322
323
324
325
326
327
        .p2 {
          line-height: 24px;
        }
        &.item-child1 {
          width: 100%;
          height: calc(50% - 8px);
          margin-bottom: 16px;
          padding: 0 20px;
          align-items: center;
          .icon {
            width: 80px;
            height: 80px;
c1b532ad   梁保满   权限配置,路由基础设置
328
          }
d4283687   梁保满   首页布局完成,页面顶部返回组件
329
330
331
332
333
        }
        &.item-child2 {
          height: calc(50% - 8px);
          margin-right: 20px;
          flex-wrap: wrap;
23a6dc5f   阿宝   学校管理相关接口简单对接
334
          padding: 12px 0 12px 30px;
d4283687   梁保满   首页布局完成,页面顶部返回组件
335
336
337
          .icon {
            width: 60px;
            height: 60px;
c1b532ad   梁保满   权限配置,路由基础设置
338
          }
d4283687   梁保满   首页布局完成,页面顶部返回组件
339
340
341
342
          .p1 {
            flex: 1;
            line-height: 60px;
            margin-bottom: 0;
c1b532ad   梁保满   权限配置,路由基础设置
343
          }
d4283687   梁保满   首页布局完成,页面顶部返回组件
344
345
          .p2 {
            width: 100%;
c1b532ad   梁保满   权限配置,路由基础设置
346
          }
d4283687   梁保满   首页布局完成,页面顶部返回组件
347
348
          &:last-of-type {
            margin-right: 0;
c1b532ad   梁保满   权限配置,路由基础设置
349
350
351
          }
        }
      }
d4283687   梁保满   首页布局完成,页面顶部返回组件
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
      .item2 {
        width: calc(50% - 10px);
        height: 240px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        box-sizing: border-box;
        padding: 30px 0;
        text-align: center;
        &:last-of-type {
          margin-right: 0;
        }
        .icon {
          margin-bottom: 20px;
        }
        .p2 {
          line-height: 16px;
        }
      }
      .item3 {
        width: calc(50% - 10px);
        height: 240px;
        display: flex;
        flex-wrap: wrap;
      }
      .item4 {
        width: calc(50% - 10px);
        flex-shrink: 0;
        display: flex;
        justify-content: flex-start;
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 40px 80px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .icon {
          margin-right: 20px;
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 10px;
        }
        .p2 {
          line-height: 24px;
        }
      }
c1b532ad   梁保满   权限配置,路由基础设置
405
406
    }
  }
c1b532ad   梁保满   权限配置,路由基础设置
407
  </style>