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