添加评价进度静态页面

src/views/reviewManagement/ReviewManagementDetail.vue

@@ -18,6 +18,7 @@ import Step3Component from './stepComponent/step3Component/Step3Component.vue';
 import Step4Component from './stepComponent/step4Component/Step4Component.vue';
 import GenerateReviewCode from './stepComponent/step4Component/GenerateReviewCode.vue';
 import Step5Component from './stepComponent/step5Component/Step5Component.vue';
+import Step6Component from './stepComponent/step6Component/Step6Component.vue';
 
 const evaluationManageData = inject('commonStepData');
 
@@ -40,7 +41,7 @@ const curentComponent = computed(()=>{
     case 'parameterSetting':
       return Step5Component
     case 'evaluationProgress':
-      break
+      return Step6Component
     case 'generateAnalysis':
       break
     default:

src/views/reviewManagement/stepComponent/step6Component/ReviewAccountTableData.vue

@@ -0,0 +1,146 @@
+<!-- 评价账号使用统计表 -->
+<template>
+    <div>
+        <div class=" page_search">
+            <div class="search_content">
+                <div class="content_left">
+                    <div class="grade_title">评价账号使用统计表</div>
+                </div>
+                <div class="content_right">
+
+                    <FormSearchGroup :searchList="searchList" 
+                        @searchChange="HandleSearchChange">
+                    </FormSearchGroup>
+                 
+                    <el-button class="el-button-refresh">导出Excel</el-button>
+                </div>
+            </div>
+        </div>
+        <Table :currentPage="currentPage" :pageSize="pageSize" 
+            :tableColumns="reviewAccountUseTableColumns" 
+            :tableData="tableData"
+            :totalNum="totalNum">
+            <template #num="{row,currentIndex}">
+                {{  currentIndex + pageSize * (currentPage - 1) }}
+            </template>
+            <template #status="{row}">
+                <TableRowStatus :statusMsg="statusMsg" :useStatus="row.status">
+                </TableRowStatus>
+            </template>
+        </Table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Table from '@/baseComponents/Table.vue';
+import {  ref } from 'vue';
+
+import {reviewAccountUseTableColumns} from  './table'
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+
+import {searchList} from './formSearchGroup'
+import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
+
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+
+const tableData = ref([
+    {
+        grade: '七年级',    // 年级
+        className: '1班',   // 班级
+        gender: '男',       // 性别
+        code: '272839201',  // 评价码
+        status: '1',        // 状态 1 已提交  0 未使用
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '1',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '1',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '0',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '0',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '1',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '0',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '1',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '1',
+    },
+    {
+        grade: '七年级',
+        className: '1班',
+        gender: '男',
+        code: '272839201',
+        status: '1',
+    }
+])
+
+const statusMsg = ref([
+    {
+        statusFlag:0,
+        title:'未使用',
+        themeClass:'need_summary_icon',  
+    },
+    {
+        statusFlag:1,
+        title:'已提交',
+        themeClass:'normal_icon', 
+    },
+])
+
+
+const searchParams = ref({})
+const HandleSearchChange = (params,key)=>{}
+</script>
+
+
+<style lang="scss" scoped>
+
+.search_content{
+    margin-bottom: 10px;
+}
+
+</style>

src/views/reviewManagement/stepComponent/step6Component/ReviewProcessBarData.vue

@@ -0,0 +1,82 @@
+<!-- 评价进度统计图 -->
+<template>
+    <div>
+        <div class="bar_container">
+            <div class="bar_title">年级评价进度</div>
+
+            <MultipleBarCharts :datax="gradeReviewAccountData.datax" :height="375"
+                :datay="gradeReviewAccountData.datay" :tooltipFormater="tooltipFormater"
+                @HandleChartClick="HandleChartClick" :isClick="true"
+            >
+            </MultipleBarCharts>
+        </div>
+
+        <div class="page_jg_20"></div>
+
+        <div class="bar_container">
+            <div class="bar_title">
+                <span class="parent_title">年级评价进度 / </span>
+                <span>{{currentClickGrade}}</span>
+            </div>
+            <MultipleBarCharts :datax="classReviewAccountData.datax" :height="375"
+                :datay="classReviewAccountData.datay" :tooltipFormater="tooltipFormater">
+            </MultipleBarCharts>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+
+import MultipleBarCharts from '@/baseComponents/MultipleBarCharts.vue';
+
+// 年级评价进度数据
+const currentClickGrade = ref('')
+
+
+// 年级评价进度柱状图
+const gradeReviewAccountData = reactive({
+    datax: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一'],
+    datay: [58,11,17,53,41,100,62,96,48,34]
+})
+
+// 班级评价进度柱状图
+const classReviewAccountData = reactive({
+    // X轴数据：根据图片提取的班级名称
+    datax: [
+        '1班', '2班', '3班', '4班', '5班', '6班', 
+        '7班', '8班', '9班', '10班', '11班', '12班'
+    ],
+    datay: [45, 28,  46, 47, 48,  41, 43, 44, 45, 42,43,43 
+    ]
+})
+const tooltipFormater = (params)=>{
+    const {name,seriesName,value,marker} = params
+    return name + '<br/>' + marker + '评价进度' + `<span style=\"margin-left:10px;\">${value}</span>` ;
+}
+
+const HandleChartClick = (index,xName)=>{
+    console.log('当前点击的内容',index,xName)
+    currentClickGrade.value = xName
+}
+
+
+</script>
+
+
+<style lang="scss" scoped>
+.bar_container{
+    .bar_title{
+        font-weight: 600;
+        font-size: 16px;
+        color: #333333;
+        line-height: 22px;
+        margin-bottom: 20px;
+        .parent_title{
+            color:#999999;
+            font-weight: 400;
+        }
+    }
+}
+
+</style>

src/views/reviewManagement/stepComponent/step6Component/ReviewProcessTableData.vue

@@ -0,0 +1,90 @@
+<!-- 评价进度统计表 -->
+<template>
+    <div class="end_item">
+        <div class="end_item">
+            <div class=" page_search">
+                <div class="search_content">
+                    <div class="content_left">
+                        <div class="grade_title">年级评价进度统计表</div>
+                    </div>
+                    <div class="content_right">
+                        <el-button class="el-button-refresh">导出Excel</el-button>
+                    </div>
+                </div>
+            </div>
+            <Table  :currentPage="1" 
+                :pageSize="20" :tableColumns="reviewProcessTableColumns" :tableData="[]"
+                :totalNum="0">
+            </Table>
+        </div>
+        
+        <div class="page_jg_20"></div>
+        <div class="end_item">
+            <div class=" page_search">
+                <div class="search_content">
+                    <div class="content_left">
+                        <div class="grade_title">班级评价进度统计表</div>
+                    </div>
+                    <div class="content_right">
+                        <el-select 
+                            @change="(val)=>handleSelectChange(val)"
+                            v-model="gradeSearchId"  placeholder="请选择">
+                            <el-option
+                                v-for="selectItem in gradeOptionList"
+                                :key="selectItem.value"
+                                :label="selectItem.label"
+                                :value="selectItem.value"
+                            />
+                        </el-select>
+                        <el-button class="el-button-refresh">导出Excel</el-button>
+                    </div>
+                </div>
+            </div>
+            <Table  :currentPage="1" 
+                :pageSize="20" :tableColumns="reviewProcessTableColumns" :tableData="[]"
+                :totalNum="0">
+            </Table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Table from '@/baseComponents/Table.vue';
+import {  ref } from 'vue';
+
+import {reviewProcessTableColumns} from  './table'
+
+// 年级评价进度数据
+
+const gradeSearchId = ref('1')
+const gradeOptionList = ref([
+    {
+        label:'一年级',
+        value:'1'
+    },
+    {
+        label:'二年级',
+        value:'2'
+    },
+    {
+        label:'三年级',
+        value:'3'
+    },
+    {
+        label:'四年级',
+        value:'4'
+    },
+])
+const handleSelectChange = (val) =>{
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+.search_content{
+    margin-bottom: 10px;
+}
+
+</style>

src/views/reviewManagement/stepComponent/step6Component/Step6Component.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="page_item end_item">
+        <div class="page_search">
+            <div class="search_content">
+            <div class="content_left">
+                <TabSearch tabType="box" :defaultTabKey="defautTabKey" 
+                    :tabList="tabList" @tabChange="HandleTabChange">
+                </TabSearch>
+            </div>
+            <div class="content_right">
+                 评价状态：
+                <el-switch v-model="isOpenReviewTask"  style="--el-switch-on-color: #2E64FA"/>
+                <el-button  class="button_background" @click="FinishQuestionnaireTemplateConfig">评价完成</el-button>
+            </div>
+            </div>
+        </div>
+        <div class="page_jg_20"></div>
+        <ReviewProcessBarData v-if="defautTabKey == 'reviewProcessBarData'"></ReviewProcessBarData>
+        <ReviewProcessTableData v-if="defautTabKey == 'reviewProcessTableData'"></ReviewProcessTableData>
+        <reviewAccountTableData v-if="defautTabKey == 'reviewAccountTableData'"></reviewAccountTableData>
+    </div>
+</template>
+
+
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import TabSearch from '@/baseComponents/TabSearch.vue';
+
+import ReviewProcessBarData from './ReviewProcessBarData.vue';
+import ReviewProcessTableData from './ReviewProcessTableData.vue';
+import reviewAccountTableData from './reviewAccountTableData.vue';
+import  {tabList} from './tabSearch'
+
+
+const isOpenReviewTask = ref(true)  //评价状态
+
+const defautTabKey = ref('reviewAccountTableData')
+const HandleTabChange = (val)=>{
+    defautTabKey.value = val
+}
+
+onMounted(async ()=>{
+   
+})
+</script>
+
+
+
+<style lang="scss" scoped>
+
+
+</style>

src/views/reviewManagement/stepComponent/step6Component/formSearchGroup.ts

@@ -0,0 +1,49 @@
+import { ref } from "vue";
+
+
+export const searchList = ref([
+    {
+        key:'grade',
+        type:'select',
+        placeholder:'请选择',
+        defaultValue:'1',
+        options:[
+            {
+                label:'一年级',
+                value:'1'
+            },
+            {
+                label:'二年级',
+                value:'2'
+            },
+            {
+                label:'三年级',
+                value:'3'
+            },
+            {
+                label:'四年级',
+                value:'4'
+            },
+        ] 
+    },
+    {
+        key:'status',
+        type:'select',
+        placeholder:'请选择',
+        defaultValue:'all',
+        options:[
+            {
+                label:'全部状态',
+                value:'all'
+            },
+            {
+                label:'已提交',
+                value:'1'
+            },
+            {
+                label:'未提交',
+                value:'0'
+            },
+        ] 
+    },
+])

src/views/reviewManagement/stepComponent/step6Component/tabSearch.ts

@@ -0,0 +1,18 @@
+
+import { ref } from "vue";
+
+
+export const  tabList = ref([
+    {
+        label:'评价进度统计图',
+        key:'reviewProcessBarData',
+    },
+    {
+        label:'评价进度统计表',
+        key:'reviewProcessTableData',
+    },
+    {
+        label:'评价账号使用统计表',
+        key:'reviewAccountTableData',
+    },
+])

src/views/reviewManagement/stepComponent/step6Component/table.ts

@@ -0,0 +1,137 @@
+import {ref} from 'vue'
+
+export const reviewProcessTableColumns = ref([
+    {
+        name: 'num',
+        label: '序号',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '', 
+        custom: true,
+        hidden: false,
+    },
+    {
+        name: 'grade',          // 对应字段名建议
+        label: '年级',
+        width: '',              // 可根据需要设置固定宽度
+        fixed: '',
+        align: 'center',        // 或 'left'，视具体排版需求而定
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'generatedAccount', // 对应字段名建议
+        label: '生成账号',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'submitted',      // 对应字段名建议
+        label: '已提交',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'unused',         // 对应字段名建议
+        label: '未使用',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'progress',       // 对应字段名建议
+        label: '进度',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'avgTime',        // 对应字段名建议
+        label: '平均花费时间',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    }
+])
+
+export const reviewAccountUseTableColumns = ref([
+    {
+        name: 'num',
+        label: '序号',
+        width: '80', 
+        fixed: '',
+        align: 'center',
+        minWidth: '', 
+        custom: true,
+        hidden: false,
+    },
+    {
+        name: 'grade',     
+        label: '年级',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'className',  
+        label: '班级',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'gender',    
+        label: '性别',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'code',       
+        label: '评价码',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',   
+        custom: false,
+        hidden: false,
+    },
+    {
+        name: 'status',     
+        label: '状态',
+        width: '',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: true,
+        hidden: false,
+    }
+])