Jelajahi Sumber

增加了一个无数据状态

wangguoxi 6 bulan lalu
induk
melakukan
a749871d6b

+ 2 - 2
src/App.vue

@@ -18,8 +18,8 @@ export default {
     },
     methods: {
         SubmitLogin() {
-            const username = '99689820198800';
-            const password = '123456';
+            const username = '50002100001';
+            const password = '100001';
             const type = '2';
             sessionStorage.setItem('schoolType', type);
             user.loginEmailPass({

+ 25 - 0
src/views/analysisReport/wrongQuestion/NoData/NoData.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="no-data">暂无数据</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.no-data {
+    min-height: 400px;
+    background-image: url('./no_content_bg.png');
+    background-repeat: no-repeat;
+    background-size: 360px auto;
+    background-position: 50% 30%;
+    color: #999;
+    font-size: 14px;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>

TEMPAT SAMPAH
src/views/analysisReport/wrongQuestion/NoData/no_content_bg.png


+ 131 - 124
src/views/analysisReport/wrongQuestion/index.vue

@@ -17,161 +17,166 @@
 
             <Download :visible.sync="downloadDialogVisible" :examId="examId" :subjectCode="subjectCode" />
 
-            <div v-for="(question, index) in questionList" :key="question.questionId">
-                <div class="question_card">
-                    <div class="card_top">
-                        <div class="card_top_info">
-                            <div class="left">
-                                <span class="number">{{ index + 1 }}</span>
-                                <span class="gray">试题类型:</span>
-                                <span class="black">{{ question.questionType }}</span>
-                                <span class="tag">高频错题</span>
+            <template v-if="questionList.length > 0">
+                <div v-for="(question, index) in questionList" :key="question.questionId">
+                    <div class="question_card">
+                        <div class="card_top">
+                            <div class="card_top_info">
+                                <div class="left">
+                                    <span class="number">{{ index + 1 }}</span>
+                                    <span class="gray">试题类型:</span>
+                                    <span class="black">{{ question.questionType }}</span>
+                                    <span class="tag">高频错题</span>
+                                </div>
                             </div>
-                        </div>
-
-                        <div class="question_content" v-if="question.sourceType === 1"
-                            v-html="question.questionData.questionStem"></div>
-                        <div class="question_content" v-if="question.sourceType === 2">
-                            <img :src="question.questionImg" alt="" width="100%">
-                        </div>
 
-                        <div class="card_footer" style="margin-bottom: 20px;">
-                            <div class="footer_item">
-                                <span class="gray">满分:</span>
-                                <span class="blue">{{ question.fullScore }}</span>
-                                <span class="gray">分</span>
+                            <div class="question_content" v-if="question.sourceType === 1"
+                                v-html="question.questionData.questionStem"></div>
+                            <div class="question_content" v-if="question.sourceType === 2">
+                                <img :src="question.questionImg" alt="" width="100%">
                             </div>
-                            <div class="footer_item">
-                                <span class="gray">我的得分:</span>
-                                <span class="blue">{{ question.score }}</span>
-                                <span class="gray">分</span>
+
+                            <div class="card_footer" style="margin-bottom: 20px;">
+                                <div class="footer_item">
+                                    <span class="gray">满分:</span>
+                                    <span class="blue">{{ question.fullScore }}</span>
+                                    <span class="gray">分</span>
+                                </div>
+                                <div class="footer_item">
+                                    <span class="gray">我的得分:</span>
+                                    <span class="blue">{{ question.score }}</span>
+                                    <span class="gray">分</span>
+                                </div>
+                                <div class="footer_item">
+                                    <span class="gray">难度</span>
+                                    <span class="blue">一般</span>
+                                </div>
                             </div>
-                            <div class="footer_item">
-                                <span class="gray">难度</span>
-                                <span class="blue">一般</span>
+
+                            <div class="card_footer">
+                                <div class="gray">知识点:</div>
+                                <template v-if="question.knowledgePoint && question.knowledgePoint.length > 0">
+                                    <el-tag type="success" size="small" v-for="(know, index) in question.knowledgePoint"
+                                        :key="index">
+                                        {{ know }}
+                                    </el-tag>
+                                </template>
                             </div>
                         </div>
 
-                        <div class="card_footer">
-                            <div class="gray">知识点:</div>
-                            <template v-if="question.knowledgePoint && question.knowledgePoint.length > 0">
-                                <el-tag type="success" size="small" v-for="(know, index) in question.knowledgePoint"
-                                    :key="index">
-                                    {{ know }}
-                                </el-tag>
-                            </template>
-                        </div>
-                    </div>
+                        <div class="card_buttom">
+                            <div class="btn_box">
+                                <span class="black" size="small" @click="question.answerShow = !question.answerShow">
+                                    我的答案
+                                </span>
+                                <span class="black" size="small" @click="question.parseShow = !question.parseShow">
+                                    查看解析
+                                </span>
 
-                    <div class="card_buttom">
-                        <div class="btn_box">
-                            <span class="black" size="small" @click="question.answerShow = !question.answerShow">
-                                我的答案
-                            </span>
-                            <span class="black" size="small" @click="question.parseShow = !question.parseShow">
-                                查看解析
-                            </span>
-
-                            <template v-if="question.errorStatus === 0">
-                                <template v-if="errorType === -1 || errorType === 0">
-                                    <span class="black" size="small" @click="_markStudentErrorQuestion(question, 1)">
-                                        标记为已掌握
-                                    </span>
-                                    <span class="black" size="small" @click="_markStudentErrorQuestion(question, 2)">
-                                        加入复习本
-                                    </span>
+                                <template v-if="question.errorStatus === 0">
+                                    <template v-if="errorType === -1 || errorType === 0">
+                                        <span class="black" size="small"
+                                            @click="_markStudentErrorQuestion(question, 1)">
+                                            标记为已掌握
+                                        </span>
+                                        <span class="black" size="small"
+                                            @click="_markStudentErrorQuestion(question, 2)">
+                                            加入复习本
+                                        </span>
+                                    </template>
                                 </template>
-                            </template>
 
-                            <template v-if="errorType === 1 || question.errorStatus === 1">
-                                <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
-                                    标记为未掌握
-                                </span>
-                            </template>
+                                <template v-if="errorType === 1 || question.errorStatus === 1">
+                                    <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
+                                        标记为未掌握
+                                    </span>
+                                </template>
 
-                            <template v-if="errorType === 2 || question.errorStatus === 2">
-                                <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
-                                    移除复习本
-                                </span>
-                            </template>
-                        </div>
+                                <template v-if="errorType === 2 || question.errorStatus === 2">
+                                    <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
+                                        移除复习本
+                                    </span>
+                                </template>
+                            </div>
 
-                        <div class="content" v-if="question.parseShow">
-                            <div class="content_inner" v-if="question.sourceType === 1"
-                                v-html="question.questionData.analysis"></div>
-                            <div class="content_inner" v-if="question.sourceType === 2">
-                                <img :src="question.parseImg" alt="" width="100%" />
+                            <div class="content" v-if="question.parseShow">
+                                <div class="content_inner" v-if="question.sourceType === 1"
+                                    v-html="question.questionData.analysis"></div>
+                                <div class="content_inner" v-if="question.sourceType === 2">
+                                    <img :src="question.parseImg" alt="" width="100%" />
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="content" v-if="question.answerShow">
-                            <div class="content_inner" v-if="question.sourceType === 1"
-                                v-html="question.questionData.answer"></div>
-                            <div class="content_inner" v-if="question.sourceType === 2">
-                                <img :src="question.answerImg" alt="" width="100%" />
+                            <div class="content" v-if="question.answerShow">
+                                <div class="content_inner" v-if="question.sourceType === 1"
+                                    v-html="question.questionData.answer"></div>
+                                <div class="content_inner" v-if="question.sourceType === 2">
+                                    <img :src="question.answerImg" alt="" width="100%" />
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
 
-                <div class="question_card" v-if="question.variationQuestion">
-                    <!-- TODO: 这个地方后端暂无数据 -->
-                    <div class="card_top">
-                        <div class="card_top_info">
-                            <div class="left">
-                                <span class="number">1</span>
-                                <span class="gray">试题类型:</span>
-                                <span class="black">选择题</span>
-                                <span class="tag">高频错题</span>
-                            </div>
-                            <div class="right">
-                                <span class="gray">来源:</span>
-                                <span class="black">这是一场考试名称</span>
+                    <div class="question_card" v-if="question.variationQuestion">
+                        <!-- TODO: 这个地方后端暂无数据 -->
+                        <div class="card_top">
+                            <div class="card_top_info">
+                                <div class="left">
+                                    <span class="number">1</span>
+                                    <span class="gray">试题类型:</span>
+                                    <span class="black">选择题</span>
+                                    <span class="tag">高频错题</span>
+                                </div>
+                                <div class="right">
+                                    <span class="gray">来源:</span>
+                                    <span class="black">这是一场考试名称</span>
+                                </div>
                             </div>
-                        </div>
-
-                        <div class="question_content">这是题目内容</div>
 
-                        <div class="yuwen">
+                            <div class="question_content">这是题目内容</div>
 
-                            <span class="btn_span active">1</span>
-                            <span class="btn_span">2</span>
+                            <div class="yuwen">
 
-                            <div class="question_list"></div>
-                        </div>
+                                <span class="btn_span active">1</span>
+                                <span class="btn_span">2</span>
 
-                        <div class="card_footer">
-                            <div class="footer_item">
-                                <span class="gray">满分:</span>
-                                <span class="blue">5.0</span>
-                                <span class="gray">分</span>
-                            </div>
-                            <div class="footer_item">
-                                <span class="gray">我的得分:</span>
-                                <span class="blue">5.0</span>
-                                <span class="gray">分</span>
+                                <div class="question_list"></div>
                             </div>
-                            <div class="footer_item">
-                                <span class="gray">难度</span>
-                                <span class="blue">一般</span>
+
+                            <div class="card_footer">
+                                <div class="footer_item">
+                                    <span class="gray">满分:</span>
+                                    <span class="blue">5.0</span>
+                                    <span class="gray">分</span>
+                                </div>
+                                <div class="footer_item">
+                                    <span class="gray">我的得分:</span>
+                                    <span class="blue">5.0</span>
+                                    <span class="gray">分</span>
+                                </div>
+                                <div class="footer_item">
+                                    <span class="gray">难度</span>
+                                    <span class="blue">一般</span>
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="card_footer">
-                            <div class="gray">知识点:</div>
-                            <el-tag type="success" size="small">标签二</el-tag>
+                            <div class="card_footer">
+                                <div class="gray">知识点:</div>
+                                <el-tag type="success" size="small">标签二</el-tag>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div style="text-align: right;">
-                <el-pagination background layout="prev, pager, next" :total="pageParam.total"
-                    :page-size="pageParam.pageSize" :current-page="pageParam.pageNum"
-                    @current-change="handleCurrentChange">
-                </el-pagination>
-            </div>
+                <div style="text-align: right;">
+                    <el-pagination background layout="prev, pager, next" :total="pageParam.total"
+                        :page-size="pageParam.pageSize" :current-page="pageParam.pageNum"
+                        @current-change="handleCurrentChange">
+                    </el-pagination>
+                </div>
+            </template>
 
+            <NoData v-else>暂无数据</NoData>
         </div>
     </div>
 </template>
@@ -185,9 +190,11 @@ import {
 import Download from './Download.vue';
 import loadImg from './loadImg.js'
 import { Loading } from 'element-ui';
+import NoData from './NoData/NoData.vue';
 export default {
     components: {
         Download,
+        NoData,
     },
 
     data() {