liankao/src/pages/ksfx/cjfx_fsdtj.vue

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

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

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

        <div class="flex items-center">
          <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>

          <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_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>


        </div>
        <div class="flex justify-between mt-4 exportBtn">
          <div>
            <el-button color="#003eee" type="primary" size="large">导出</el-button>
          </div>

        </div>

        <div class="h-150px mt-20px overflow-x-auto echartData" id="echartData"></div>

        <div class="w-980px h-auto tableList">
           <div class="h-50px rounded flex flex-nowrap tableList_title">
            <div class="w-11/12 bg-opacity-0 singleT"></div>
            <div class="w-11/12 singleT" v-for="(item,index) in classArr" :key="index">{{item}}</div>
          </div>

          <div class="h-auto flex flex-nowrap tableList_content" v-for="(item,index) in classBaseInfoArr" :key="index">
            <div class="w-11/12 h-60px rounded  mt-2px  singleTSec singleTSecDif" >{{ item.period }}</div>
            <div class="w-11/12 h-60px mt-2px singleTSec " v-for="(secItem,index) in item.detailNum">{{ secItem }}</div>
          </div>
        </div>

      </div>




    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import * as echarts from 'echarts';

import { useRouter } from "vue-router";
const router = useRouter();

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


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

let classroom_list = [{
  value: '1',
  label: '英语'
}, {
  value: '2',
  label: '体育'
}, {
  value: '3',
  label: '音乐'
}
];

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

onMounted(() => {
  initChart()
})

const initChart = () => {
  var myChart = echarts.init(document.getElementById('echartData'));
  myChart.setOption({
    title: {
      text: '人数',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      data: ['[0-10]', '[10-20]', '[20-30]', '[30-40]', '[40-50]', '[50-60]', '[60-70]']
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: '40',
        itemStyle: {
          normal: {
            barBorderRadius: [20, 20, 0, 0],
            color: '#6897FF',
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: 'black',
                fontSize: 16
              }
            }
          }
        },
        data: [120,200,200,150,80,70,110,130],
      }
    ]
  });
}


let classArr = [
  "初一（1）班",
  "初一（2）班",
  "初一（3）班",
  "初一（4）班",
  "初一（5）班",
  "初一（6）班",
  "初一（7）班",
  "初一（8）班",
  "初一（9）班",

];

let classBaseInfoArr = [
  {
    period: "[0-10]",
    detailNum:["13","13","13","13","13","13","13","13","13"]
  },
  {
    period: "[10-20]",
    detailNum:["13","13","13","13","13","13","13","13","13"]
  },
  {
    period: "[20-30]",
    detailNum:["13","13","13","13","13","13","13","13","13"]
  },
  {
    period: "[30-40]",
    detailNum:["13","13","13","13","13","13","13","13","13"]
  }
];


</script>


<style lang="scss" scoped>
::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{
  background-color: transparent!important;
}


.singleD {
  flex: 1;
}

.singleTSec {
  width: fit-content;
  flex: 1;
  line-height: 60px;
  text-align: center;
}
.singleTSecDif{
  color: #fff;
  background-color: #6897FF;
}
</style>