liankao/src/pages/ksfx/cjfx_jstj.vue

<template>
  <div class="cjfx_jstj">
    <NavHeader />
    <bread-crumb />

    <div class="w-1200px m-auto flex flex-row justify-between">
      <div class="w-188px">
        <leftSider :activeIndex="activeIndex"  @parentClick="parentClick"/>
      </div>

      <div class="w-1012px p-4 blueBg">

        <div class="flex items-center">

          <el-select class="mr-10px" v-model="normal_school" placeholder="请选择学校" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in school_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <el-select class="mr-10px" v-model="normal_subject" placeholder="请选择学科" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in subject_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

        </div>
        <div class="flex justify-between mt-4 exportBtn">
          <div>
            <el-button color="#003eee" type="primary" size="large">导出</el-button>
          </div>
          <div>
            <el-input v-model="searchVal" class="w-50 m-2" placeholder="请输入搜索内容" :prefix-icon="Search" />
          </div>

        </div>

        <div class="min-h-600px h-200 mt-20px ">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="xx" label="学校" show-overflow-tooltip width="200" />
            <el-table-column prop="js" label="教师" width="120" />
            <el-table-column prop="xk" label="学科" />
            <el-table-column prop="pm" label="排名" />
            <el-table-column prop="xpm" label="校排名" />
            <el-table-column prop="bj" label="班级" show-overflow-tooltip width="300" />
            <el-table-column prop="pjf" label="平均分" />
            <el-table-column prop="skrs" label="实考人数" />
            <el-table-column prop="zgf" label="最高分" />
            <el-table-column prop="yxrs" label="优秀人数" />
            <el-table-column prop="yxl" label="优秀率" />
            <el-table-column prop="jgrs" label="及格人数" />
            <el-table-column prop="jgl" label="及格率" />
            <el-table-column prop="dfrs" label="低分人数" />
            <el-table-column prop="dfl" label="低分率" />
          </el-table>

          <div class="mt-4" >
            <el-pagination background layout="prev, pager, next " :total="1000" style="justify-content: right;" />
          </div>

        </div>

      </div>

    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import {normalSchool_list,normalSubject_list,normalClassroom_list,cjfx_jstj_list } from './api';
import { useRouter } from "vue-router";
const router = useRouter();


let normal_subject = $ref("");
let normal_school = $ref("");
let searchVal = $ref('');

let subject_list = [{
  value: '1',
  label: '语文'
}, {
  value: '2',
  label: '数学'
}]


let school_list = [{
  value: '1',
  label: '学校1'
}, {
  value: '2',
  label: '学校2'
}]

const activeIndex =ref('1-6');

const parentClick = (val) => {
  activeIndex.value = val;
}


const tableData = ref([
  {
    xx: "临沂市蒙阴县乡镇小学",
    js: "热巴",
    xk: "语文",
    pm: "1",
    xpm: "23",
    bj: "初一（2）班、初一（3）班初一（4）班",
    pjf: "123.23",
    skrs: "1234",
    zgf: "132.22",
    yxrs: "2637",
    yxl: "23.34%",
    jgrs: "4323",
    jgl: '23.34%',
    dfrs: "23.43%",
    dfl: "23.34%",
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    js: "热巴",
    xk: "语文",
    pm: "1",
    xpm: "23",
    bj: "初一（2）班、初一（3）班初一（4）班",
    pjf: "123.23",
    skrs: "1234",
    zgf: "132.22",
    yxrs: "2637",
    yxl: "23.34%",
    jgrs: "4323",
    jgl: '23.34%',
    dfrs: "23.43%",
    dfl: "23.34%",
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    js: "热巴",
    xk: "语文",
    pm: "1",
    xpm: "23",
    bj: "初一（2）班、初一（3）班初一（4）班",
    pjf: "123.23",
    skrs: "1234",
    zgf: "132.22",
    yxrs: "2637",
    yxl: "23.34%",
    jgrs: "4323",
    jgl: '23.34%',
    dfrs: "23.43%",
    dfl: "23.34%",
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    js: "热巴",
    xk: "语文",
    pm: "1",
    xpm: "23",
    bj: "初一（2）班、初一（3）班初一（4）班",
    pjf: "123.23",
    skrs: "1234",
    zgf: "132.22",
    yxrs: "2637",
    yxl: "23.34%",
    jgrs: "4323",
    jgl: '23.34%',
    dfrs: "23.43%",
    dfl: "23.34%",
  }
]);


onMounted(() => {
  initData();

})

const initData =() => {
  let transObj = {
    xueke_id: '',
    grade_id: '',
    school_id: ''
  }
  cjfx_jstj_list(transObj)
    .then(res => {
      if (res.code == "1") {
        tableData.value = res.data.data.tableData;
      }
    })
  .catch(error=>{console.log(error)})
}


</script>


<style lang="scss" scoped>
@import '@/styles/ksfx.css';
::v-deep .el-sub-menu__title {
  background: #003eee;
  color: #fff;
}

::v-deep .el-table__header thead tr th {
  background: #003eee !important;
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-weight: normal;
}

::v-deep .el-table__header thead tr th:first-child {
  border-top-left-radius: 9px;
}

::v-deep .el-table__body tbody .el-table__row td {
  background-color: transparent;
}

::v-deep .el-dialog__footer {
  text-align: center;
}

.blueBg {
  background: #F1F7FF;
}

.whiteBG {
  background: #fff;
}

.singlepart {
  background-color: rgba($color: #ffffff, $alpha: 0.2);
  color: #fff;
}

.tableList {
  overflow-x: scroll;
}

.tableList_title {
  font-size: 14px;
  color: #fff;
}

.singleT {
  flex: 1;
  font-size: 14px;
  line-height: 50px;
  width: fit-content;
  text-align: center;
  background: #003eee;
}

.singleT:first-child {
  border-top-left-radius: 5px;
}

.singleT:last-child {
  border-top-right-radius: 5px;
}

.singleD {
  flex: 1;
}

.singleTSec {
  width: fit-content;
  flex: 1;
  line-height: 60px;
  text-align: center;
}

.singleTSecDif {
  background-color: #fff;
}
</style>