dianshang-qianduan/src/views/teacherEnd/index.vue

<!-- 成绩总览 -->
<template>
  <div class="content">
      <!-- log -->
      <!-- <div class="log"></div> -->
      <el-row>
              <el-col :span="24">
              <img src="../../assets/images/下载1.png" alt="">
              <span class="spanCen1">成绩情况</span>
              </el-col>
          </el-row>
      <!-- 同步搜索 -->
      <div class="select">
          <el-form :model="params">
              <el-row typ="flex">
                  <el-form-item label="用户名：">
                      <div class="conter" style="display: flex;height: 31px;">
                      <el-input style="width:224px" v-model="params.name" class="w-50 m-2" size="small" ></el-input>
                      </div>
                  </el-form-item>
                  <div class="serlog" @click="getDigitalCurrencyScore"></div>
                  <div style="width: 20px;"></div>
                  <el-form-item label="学号">
                      <div class="conter" style="display: flex;height: 31px;">
                      <el-input style="width:224px" v-model="params.studentId" class="w-50 m-2" size="small"
                         ></el-input>
                      </div>
                  </el-form-item>
                  <div class="serlog" @click="getDigitalCurrencyScore"></div>
                  <div style="width: 20px;"></div>
                  <el-form-item label="班级">
                      <el-select  style="width:224px;height: 31px;" clearable v-model="params.className" placeholder="全部" class="w-50 m-2" size="small" @change="getDigitalCurrencyScore">
                          <el-option  v-for="item in classData" :label="item" :value="item" />
                      </el-select>
                      <!-- <el-input v-model="formSearch.className" class="w-50 m-2" size="small"></el-input> -->
                  </el-form-item>
                  <div style="margin: 4px 0 0 10px;">
                      <el-button type="primary" size="small" @click="generalViewExport" class="daochu"> 导出 </el-button>
                      <el-button type="primary" size="small" @click="getResultsOverviewWeight">权重设置</el-button>
                  </div>
              </el-row>
          </el-form>
      </div>

      <!-- 表格数据 -->
      <div class="tab" >
      <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
          <el-table-column prop="name" label="用户名" align="center" width="135" />
          <el-table-column prop="studentId" label="学号" align="center" width="130" />
          <el-table-column prop="className" label="班级" align="center" width="130" />

          <el-table-column label="知识概要" align="center">
              <el-table-column prop="summaryKnowledgeWeight" label="权重" align="center" />
              <el-table-column prop="summaryKnowledgeScore" label="成绩" align="center" />
          </el-table-column>

          <el-table-column label="资源学习" align="center">
              <el-table-column prop="resourceWeiht" label="权重" align="center" />
              <el-table-column prop="resourceScore" label="成绩" align="center" />
          </el-table-column>

          <el-table-column label="学习测评" align="center">
              <el-table-column prop="learningAssessmentWeiht" label="权重" align="center" />
              <el-table-column prop="learningAssessmentScore" label="成绩" align="center" />
          </el-table-column>

          <el-table-column label="实验实训" align="center">
              <el-table-column prop="experimentTrainingWeith" label="权重" align="center" />
              <el-table-column prop="experimentTrainingScore" label="成绩" align="center" />
          </el-table-column>

          <el-table-column label="实验报告" align="center">
              <el-table-column prop="testReportWeith" label="权重" align="center" />
              <el-table-column prop="testReportSocre" label="成绩" align="center" />
          </el-table-column>
          <el-table-column label="总成绩" align="center">
              <el-table-column prop="totalScore" label="综合得分" align="center" />
              <el-table-column prop="totalRank" label="排名" align="center" />

          </el-table-column>
      </el-table>

  </div>
      <pagination class="paginationClass" v-show="total > 0" :total="total" v-model:page="params.index"
      v-model:limit="params.size" @pagination="getDigitalCurrencyScore" />
      <div class="practical">
            <div class="rows">
                <div class="log1"></div>
                <span class="spanCen">实训报告</span>
            </div>
            <!-- 表格数据  实训报告 -->
            <div class="tab">
            <el-table :data="practicalData" style="width: 100%" stripe>
                <el-table-column prop="name" label="用户名" align="center" />
                <el-table-column prop="studentId" label="学号" align="center" />
                <el-table-column prop="className" label="班级" align="center" />
                <el-table-column prop="module" label="归属模块" align="center" />
                <el-table-column prop="fileName" label="报告名称" align="center" width="300"/>
                <el-table-column prop="createTime" label="上传时间" align="center" />
                <el-table-column prop="fileSize" label="报告大小" align="center">
                    <template v-slot="{ row }">
                        <span>{{ (row.fileSize/100000).toFixed(2) }}</span><span v-if="row.fileSize">KB</span>
                    </template>
                </el-table-column>
                <el-table-column prop="rating" label="教师评分" align="center" />
                <el-table-column prop="handle" label="操作" align="center" v-slot="{ row }">
                    <el-link type="success" :underline="false" @click="reviewSkip(row)">
                        <img src="../../assets/images/评价_评审.png" alt="">评阅</el-link>
                </el-table-column>
            </el-table>
            </div>
            <pagination 
            v-show="total3 > 0" 
            :total="total3" 
            v-model:page="practicalParams.page"
            v-model:limit="practicalParams.size"
            @pagination="getReportBySchool" />
        </div>
      <!-- 权重设置弹窗 -->
      <el-dialog v-model="dialogFormVisible" title="权重设置" width="30%">
          <el-form :model="form" label-position="left" ref="ruleFormRef" :rules="rules">

              <el-form-item v-for="(item, index) in weightData" :key="index" :label="item.name">

                  <div style="display: flex;justify-content: end;width: 100%;">
                      <el-input v-model="item.value" autocomplete="off" class="inputmax" @input="validateInput">
                      </el-input>
                      <span style="margin-left: 10px;">%</span>
                  </div>

              </el-form-item>


              <el-form-item label="权重合计：">
                  <div style="display: flex;justify-content: end;width: 100%;">
                      <div style="margin-right: 20px;">{{ doubleCount }}</div>
                      <span style="margin-left: 10px;">%</span>

                  </div>
              </el-form-item>

          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <div style="text-align: center;">
                      <el-button @click="dialogconfirm" class="determine">确定</el-button>
                      <el-button class="cancel" @click="dialogFormVisible = false">
                          取消
                      </el-button>
                  </div>
              </span>
          </template>
      </el-dialog>

  </div>
</template>

<script setup>
import { watch, ref, reactive, onMounted, computed } from 'vue'
import * as teacher from '@/api/teacher'
import { getUserInfo } from '@/utils/auth'
import {formatDate} from '@/utils/index.js'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
import { ElMessage } from 'element-plus'
import { useRoute ,useRouter} from 'vue-router'
const router = useRouter();
const { proxy } = getCurrentInstance()
const schoolId = ref(JSON.parse(getUserInfo()).schoolId); //本地学校id
const userId = ref(JSON.parse(getUserInfo()).userId)  //本地userid

// 表格数据
const tableData = ref([])
// 实训表格数据
const practicalData = ref([])
// 头部搜索
const formSearch = ref({
  name: '',   //院校 学号 班级
  studentId: '',
  className: '',
})
const queryParams = ref({
pageNum: 1,
pageSize: 10,
});
const total = ref(0)
onMounted(() => {
  // console.log(userId.value, schoolId.value, 'userid,schoolid');
  getDigitalCurrencyScore()
  getclassList()
  getReportBySchool()
});

const rules = reactive({
  name: [
      { reactive: true, message: '错误', trigger: 'blur' },
      { type: 'number', message: '必须为数字值' }
  ]
})

// 页码
const page = reactive({
  index: 1,
  size: 10,
  schoolId: schoolId.value
});

// 成绩总览params
const params = reactive({
  index: 1,
  size: 10,
  schoolId: schoolId.value,
  name:'',
  className:'',
  studentId:''
})
// 成绩总览 v
const getDigitalCurrencyScore = async () => {
  try{
      const res = await teacher.getDigitalCurrencyScoreAPI(params)
      tableData.value = res.data.list
      total.value = res.data.total
      tableData.value.forEach(item=>{
      item.summaryKnowledgeWeight=item.summaryKnowledgeWeight*100+'%'
      item.resourceWeiht=item.resourceWeiht*100+'%'
      item.learningAssessmentWeiht=item.learningAssessmentWeiht*100+'%'
      item.experimentTrainingWeith=item.experimentTrainingWeith*100+'%'
      item.testReportWeith=item.testReportWeith*100+'%'
      // item.technologyWeight=item.technologyWeight*100+'%'
      // item.traceabilityAndAntiCounterfeitingWeight=item.traceabilityAndAntiCounterfeitingWeight*100+'%'
      // item.ticketResultsWeight=item.ticketResultsWeight*100+'%'
  })
  // console.log(res, '总览数据');
  }catch(e){
      console.log(e);
  }
 
}
// 搜索 v
const getGeneralView = async () => {
  const res = await teacher.getDigitalCurrencyScoreAPI({
      schoolId: schoolId.value,
      index: 1,
      size: 10,
      name: formSearch.value.name,
      className: formSearch.value.className,
      studentId: formSearch.value.studentId
  })
  tableData.value = res.data.list
}

// 导出
const generalViewExport = async () => {
  window.open(`https://szyx.sztzjy.com:8042/api/tch/grades/generalViewExport?schoolId=${schoolId.value}`)
  // window.open(`http://120.79.54.255:8800/api/tch/generalView/generalViewExport?schoolId=${schoolId.value}`)
}

// 弹窗
const dialogFormVisible = ref(false)

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 权重表格数据  我循环这个数组 然后渲染  下面那个监听器是计算的  下面有一个获取数据回显
const weightData = ref([
  {
      name: '知识概要成绩权重',
      property: 'summaryOfKnowledgeWeight',
      value: ''
  }, {
      name: '资源学习成绩权重',
      property: 'resourceLearningWeight',
      value: ''
  }, {
      name: '学习测评成绩权重',
      property: 'learningAssessmentWeight',
      value: ''

  }, {
      name: '实验实训成绩权重',
      property: 'experimentalTrainingWeight',
      value: ''
  }, 
  {
      name: '实验报告成绩权重',
      property: 'reportWeight',
      value: ''
  }, 
])


let sum = ref(0)
// 权重弹窗计算 累加
// watch(() => weightData.value.map((item) => item.value), (newValue, oldValue) => {
//     // console.log(newValue, oldValue, '--------------');
//     sum.value = weightData.value.reduce((prev, item) => {

//         if (sum.value >= 100) {
//             return 100
//         }
//         return prev + Number(item.value)
//     }, 0);

// })
const doubleCount=computed(()=>{
  sum.value=0
  weightData.value.forEach(item=>{
      sum.value+=Number(item.value)
  })
  return sum
})


// 权重弹窗  数据回显 v
const getResultsOverviewWeight = async () => {
  dialogFormVisible.value = true
  const res = await teacher.getResultsOverviewWeightAPI({
      schoolId: schoolId.value
  })
  let backData = res.data;
  weightData.value.forEach((item, index) => {
      for (let key in backData) {
          if (key == item.property) {
              item.value = backData[key]*100
          }
      }
  })
  // console.log(res, '弹窗回显');
}

const loading = ref(false)
// 权重修改 v
const dialogconfirm = async () => {
  let backParams = { schoolId: schoolId.value };
  let sumWeights=0
  weightData.value.forEach((item, index) => {
      if(item.value===null||item.value===''){
          item.value = 0
      }
      sumWeights+=parseFloat(item.value)
      // backParams[item.property] = parseFloat(item.value)/100
      if(item.property==='summaryOfKnowledgeWeight'){
        backParams.summaryKnowledgeWeight=parseFloat(item.value)/100
      }
      if(item.property==='resourceLearningWeight'){
        backParams.resourceWeiht=parseFloat(item.value)/100
      }
      if(item.property==='learningAssessmentWeight'){
        backParams.learningAssessmentWeiht=parseFloat(item.value)/100
      }
      if(item.property==='experimentalTrainingWeight'){
        backParams.experimentTrainingWeith=parseFloat(item.value)/100
      }
      if(item.property==='reportWeight'){
        backParams.testReportWeith=parseFloat(item.value)/100
      }
  })
  if(sumWeights!==100){
      proxy.$modal.msgError(`权重合计必须为100%`);
      return
  }

  let isTure = weightData.value.every(i => {
      return !isNaN(Number(sum.value)) && !isNaN(Number(i.value))
  })
  if (!isTure) {
      ElMessage({
          message: '请输入合法数字',
          type: 'warning',
      })
  } else {
      try{
          dialogFormVisible.value = false;
          loading.value = true
          const res = await teacher.setResultsOverviewWeight(backParams)
          if (res.code == 200) {
              loading.value = false
              // 调用列表接口；   
              ElMessage({
                  message: '权重设置设置成功',
                  type: 'success',
              })
              getDigitalCurrencyScore()
          }
          }catch(e){
              console.log(e);
          }
  }
}
//我找找


// 分页
const currentPage3 = ref(1)
const pageSize3 = ref(100)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)


// 分页 v
const handleCurrentChange = async (val) => {
  const res = await teacher.getDigitalCurrencyScoreAPI({
      index: val,
      size: page.size,
      schoolId: schoolId.value
  })
  tableData.value = res.data.list
}
const classData = ref(null)
// 获取班级数据
const getclassList =  () => {
   teacher.getClassAPI({ schoolId:schoolId.value}).then(res=>{
      classData.value=res.data
   })
}
const total3 = ref(0)
// 实验报告parasm
const practicalParams = reactive({
  page: 1,
    size: 10,
    schoolId: schoolId.value,
});
// 获取实训报告 
const getReportBySchool =  () => {
 teacher.getReportBySchoolAPI(practicalParams).then(res=>{
    practicalData.value = res.data.list
    practicalData.value.forEach(item=>{
      item.createTime=formatDate(item.createTime)
    })
    console.log(res, '实训报告');
    total3.value = res.data.total
 })
 
}

const reviewSkip = (val) => {
    router.push({
        path: 'pl',
        query:{
            className:val.className,
            userName:val.name,
            id:val.studentId,
            module:val.module,
            reportId:val.reportId,
            userId:val.userId
        }
    })
}
</script>

<style lang="scss" scoped>
:deep(.tab){
  border: 1px solid #516BF6;
  .el-table td.el-table__cell{
      border-right:1px solid #516BF6 !important;
    }
    .el-table thead tr:first-child th:nth-child(-n+11){
      border-right:1px solid #516BF6 !important;
    }
    .el-table thead tr:nth-child(2) th:nth-child(-n+16){
      border-right:1px solid #516BF6 !important;
    }
}
.content {
  margin: 10px;
  padding: 20px 10px;
  background: #FFFFFF;
  // border: 1px solid #ccc;
  box-shadow: 0px 0px 13px 0px #D6E0FE;
  border-radius: 10px;
  .log {
      width: 40px;
      height: 40px;

      background-image: url();
  }

  .select {
      display: flex;
      margin-top: 5px;


      .serlog {
          width: 26px;
          height: 25px;
          line-height: 25px;
          background: #003A81;
          border-radius: 2px;
          background-image: url(../../assets/images/搜索.png);
          margin: 3px 5px;
          cursor: pointer;
      }
  }

  .demo-pagination-block {
      margin-top: 20px !important;
  }

  .inputmax {
      width: 60px !important;
      height: 29px !important;
      margin-right: 10px;

  }
}
:deep(.el-table thead tr:first-child th:nth-child(-n+11)) {
  background: #0099FA !important;
  color: white;
}

:deep(.el-table thead tr:nth-child(2) th:nth-child(-n+16)) {
  background: #D8E8FF !important;
  color: #0E65FE;
}

:deep(.el-table tr) {
  background: white !important;
}

:deep(.el-table tr.el-table__row--striped td.el-table__cell) {
  background: #D8E8FF !important;
}

:deep(.el-form--default .el-button--primary:nth-of-type(1)) {
  background-color: #007E51 !important;
  border: 0;
}

:deep(.el-form--default .el-button--primary:nth-of-type(2)) {
  background-color: #007E51 !important;
  border: 0;
}

:deep(.el-row .serlog) {
  background-color: #007E51 !important;
}

:deep(.el-overlay .el-overlay-dialog .el-dialog__header) {
  background-color: #007E51 !important;
}

:deep(.dialog-footer .el-button--default:nth-of-type(1)) {
  background-color: #007E51 !important;
  border: 0;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white !important;
}

// :deep(.el-form div.el-form-item) {
//     background-color: red !important;
// }
:deep(.el-dialog){
  border-radius: 16px !important;
  .el-dialog__header{
      border-radius: 16px 16px 0 0 !important;
      margin-right:0 !important;
  }
}
:deep(.el-dialog__title){
    color:#FFFFFF;
}
:deep(.w-50){
  .el-input--small{
      height: 31px !important;
  }
}
:deep(.el-form--default .el-button--primary:nth-of-type(-n+2)) {
  background-color: #007E51 !important;
  border: 0;
  width: 120px;
  height: 27px;
}
.btntext {
      width: 88px !important;
      height: 22px !important;
  }
.spanCen1 {
  margin-left: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30px;
}
.cancel{
  color:#333333;
}
.determine{
  color:#333333;
}
:deep(.pagination-container .el-pagination__total){
  color:#333333 !important;
}
.practical {
        margin-top: 30px;
    }
    
    .rows {
        display: flex;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
    }
</style>