liankao/src/pages/ksfx/cjfx_pjflcfx.vue

<template>
  <div class="cjfx_pjflcfx">
    <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>

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

        <div class="w-full h-auto tableList">
           <div class="h-50px rounded flex flex-nowrap tableList_title">
            <div class="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="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.xx }}</div>
            <div class="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.pjf }}</div>
            <div class="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.zjf }}</div>
            <div class="h-60px rounded  mt-2px  singleTSec " :class="{'singleTSecDif':index%2==1}">{{ item.jflc }}</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 {normalSchool_list,normalSubject_list,normalClassroom_list,cjfx_pjflcfx_list } from './apiItem';
import { useRouter } from "vue-router";
const router = useRouter();

let normal_subject = $ref("");
let normal_school = $ref("");
let normal_teacher = $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-4');

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

let ecahrtData = {
  xAxis_data: ['蒙阴县市级中小学', '蒙阴县市级中小学', '蒙阴县市级中小学', '蒙阴县市级中小学', '蒙阴县市级中小学', '蒙阴县市级中小学', '蒙阴县市级中小学'],
  series:[
    {
      name: 'Income',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [1.23, 1.23, -1.23, 1.23, 1.23, 1.23, 1.23]
    },
    {
      name: 'Expenses',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'left'
      },
      emphasis: {
        focus: 'series'
      },
      data: [-1.23, -1.23, 1.23, -1.23, -1.23, -1.23, -1.23]
    }
  ]
}

let classArr = ref([
  "学校",
  "平均分",
  "总均分",
  "均分差离",
]);

let classBaseInfoArr = ref([
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
  {
    xx: "临沂市蒙阴县乡镇小学",
    pjf:12,
    zjf:12,
    jflc:1,
  },
]);

onMounted(() => {
  initData();

})

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

const initChart = (item) => {
  const colors=['#9CFF68','#FE6868']
  var myChart = echarts.init(document.getElementById('echartData'));
  myChart.setOption({
  title: {
    text: '平均分',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      data: item.xAxis_data
    }
  ],
  yAxis: [
    {
      type: 'value'
    }

  ],
  series: item.series,

});
}



</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{
  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>