liankao/src/pages/ksfx/cjfx_cjd.vue

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

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

      <div class="w-942 p-4 blueBg">

        <div class="flex items-center">

          <!-- <statisticsSchool :normal_school="normal_school" :school_list="school_list" /> -->

          <el-select class="mr-10px" v-model="normal_school" placeholder="请选择学校" size="large" @change="handelSchool">
            <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_classroom" placeholder="请选择班级" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in classroom_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="mt-4 exportBtn">
          <el-button color="#003eee" type="primary" size="large" @click="exportBtn">导出</el-button>
        </div>

        <div class="h-218px mt-5px  bg-gray-500 py-4 pl-150px pr-100px perfectShow">
          <div class="h-full  flex justify-between">
            <div class="h-full bg-opacity-20 rounded singlepart" v-for="(item, index) in rangeData" :key="index">
              <div class="h-1/3 text-center py-4  RankLabel">
                <img :src="'../../src/assets/ksfx/one'+(index+1)+'.png'" alt="">
              </div>
              <div class="text-sm p-5px RankBaseInfo">
                <p class="h-1/4">考号：{{ item.kh }}</p>
                <p class="h-1/4">成绩：{{item.cj}}分</p>
                <p class="h-1/4">名次：{{ item.mc }}</p>
                <p class="h-1/4">学校：{{ item.xx }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="h-auto mt-9px listMain" >
          <div class="h-74px flex flex-wrap flex-grow justify-between rounded px-4 listMain_title" >
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.kh }}</div>
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.xm }}</div>
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.bj }}</div>

            <div class="h-full singleD" v-for="(secItem, secIndex) in listTitleShow.subInfo" :key="secIndex">
              <div class="h-1/2 text-center">{{ secItem.subTitle }}</div>
              <div class="h-1/2 flex flex-wrap flex-grow justify-between">
                <div class="secFullWidth">{{ secItem.fs }}</div>
                <div class="secFullWidth">{{ secItem.bp }}</div>
                <div class="secFullWidth">{{ secItem.np }}</div>
              </div>
            </div>

          </div>

          <div class="h-60px flex flex-wrap flex-grow justify-between px-4" :class="{ 'whiteBG': (index + 1) % 2 != 1 }"
            v-for="(item, index) in listShow" :key="index">

            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.kh }}</div>
            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.xm }}</div>
            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.bj }}</div>
            <div class="h-full singleDSec" v-for="(secItem, secIndex) in item.subInfo" :key="secIndex">
              <div class="h-full flex flex-wrap flex-grow justify-between">
                <div class="secFullWidth">{{ secItem.fs }}</div>
                <div class="secFullWidth">{{ secItem.bp }}</div>
                <div class="secFullWidth">{{ secItem.np }}</div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </div>

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

let allData = ref("");
let normal_subject = $ref("");

let normal_classroom = $ref("");
let normal_school = $ref("");


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

let classroom_list = [{
  value: '1',
  label: '初一（1）班'
}, {
  value: '2',
  label: '初一（2）班'
}, {
  value: '3',
  label: '初一（3）班'
}
];

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

// 侧边栏点击
const activeIndex =ref('1-1');
const parentClick = (val) => {
  activeIndex.value = val;
}

let rangeData = [
  {
    kh: "033055697",
    cj: "13.0",
    mc: "第一名",
    xx: "博智实验学校",

  },
  {
    kh: "033055697",
    cj: "13.0",
    mc: "第一名",
    xx: "博智实验学校",

  },
  {
    kh: "033055697",
    cj: "13.0",
    mc: "第一名",
    xx: "博智实验学校",

  },
  {
    kh: "033055697",
    cj: "13.0",
    mc: "第一名",
    xx: "博智实验学校",

  },
  {
    kh: "033055697",
    cj: "13.0",
    mc: "第一名",
    xx: "博智实验学校",

  }
]
let listTitleShow = ref({
  "kh": "考号",
  "xm": "姓名",
  "bj": "班级",
  "subInfo": [
    {
      "subTitle": "语文",
      "fs": "分数",
      "bp": "班排",
      "np": "年排",
    },
    {
      "subTitle": "数学",
      "fs": "分数",
      "bp": "班排",
      "np": "年排",
    }
  ]
});
let listShow = ref([
  {
    "kh": "2345443211",
    "xm": "迪丽热巴",
    "bj": "初一（2）班",
    "subInfo": [
      {
        "subTitle": "语文",
        "fs": "87.45",
        "bp": "1",
        "np": "1",
      },
      {
        "subTitle": "数学",
        "fs": "87.45",
        "bp": "1",
        "np": "1",
      },

    ]
  },
]);


onMounted(() => {
  initData();
})


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


const exportBtn = () => {
  console.log("导出");
}

const handelSchool = (item) => {
  let tempIn = allData.value.filter(item => item.sm_id == item);
  // classroom_list.value=
  console.log(item);
}
</script>

<style lang="scss" scoped>

::v-deep .el-sub-menu__title {
  background: #003eee;
  color: #fff;
}

.blueBg {
  background: #F1F7FF;
}

.whiteBG {
  background: #fff;
}

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

.listMain {
  max-height: 600px;
  overflow-y: auto;
}

.listMain_title {
  font-size: 16px;
  color: #fff;
  background: #003eee;
  overflow-y: auto;
}

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

.singleD {
  flex: 1;
}

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

.singleDSec {
  flex: 1;
  line-height: 60px;
}

.secFullWidth {
  width: fit-content;
  flex: 1;
  text-align: center;
}
.perfectShow{
  background: url("@/assets/ksfx/big_bg.png") no-repeat left top;
  background-size:cover;
}
.RankLabel{
  text-align: center;
  img{
    display: inline-block;
    width: 30%;
  }
}
</style>