将web端与移动端样式分开，修改web端样式
This commit is contained in:
parent
e0b0792dc8
commit
c78ca14a00
|
|
@ -1,129 +1,450 @@
|
||||||
<template>
|
<template>
|
||||||
<a-card :bordered="false">
|
<div v-if=divIsShow>
|
||||||
<!-- 查询区域 -->
|
<div class="pc">
|
||||||
<div>
|
|
||||||
<a-button type="primary" @click="visible = true">打开筛选项</a-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a-drawer placement="right" :visible="visible" width="90%" :closable="false">
|
<div class="pc-left">
|
||||||
<template slot="title">
|
<a-card :bordered="false">
|
||||||
<span>CET查询筛选项</span>
|
<!-- 查询区域 -->
|
||||||
</template>
|
<div>
|
||||||
<a-descriptions bordered>
|
<a-button type="primary" @click="visible = true">打开筛选项</a-button>
|
||||||
<a-descriptions-item label="学院" :span="3">
|
</div>
|
||||||
|
|
||||||
<div class="collegeDesc">
|
<a-drawer placement="right" :visible="visible" width="90%" :closable="false">
|
||||||
<a-checkbox :indeterminate="college.liberalData.indeterminate" :checked="college.liberalData.checkAll"
|
<template slot="title">
|
||||||
@change="liberalCheckAllOptions($event)">
|
<span>CET查询筛选项</span>
|
||||||
{{ college.liberalData.label }}
|
</template>
|
||||||
</a-checkbox>
|
<a-descriptions bordered>
|
||||||
<!-- <hr class="objectHr"> -->
|
<a-descriptions-item label="学院" :span="3">
|
||||||
<a-checkbox-group v-model="college.liberalData.liberalCheckList"
|
|
||||||
:options="college.liberalData.liberalOptions" />
|
|
||||||
|
|
||||||
<hr class="objectHr">
|
<div class="collegeDesc">
|
||||||
<a-checkbox :indeterminate="college.scienceData.indeterminate" :checked="college.scienceData.checkAll"
|
<a-checkbox :indeterminate="college.liberalData.indeterminate" :checked="college.liberalData.checkAll"
|
||||||
@change="scienceCheckAllOptions($event)">
|
@change="liberalCheckAllOptions($event)">
|
||||||
{{ college.scienceData.label }}
|
{{ college.liberalData.label }}
|
||||||
</a-checkbox>
|
</a-checkbox>
|
||||||
<!-- <hr class="objectHr"> -->
|
<!-- <hr class="objectHr"> -->
|
||||||
<a-checkbox-group v-model="college.scienceData.scienceCheckList"
|
<a-checkbox-group v-model="college.liberalData.liberalCheckList"
|
||||||
:options="college.scienceData.scienceOpitons" />
|
:options="college.liberalData.liberalOptions" />
|
||||||
|
|
||||||
<hr class="objectHr">
|
<hr class="objectHr">
|
||||||
<a-checkbox :indeterminate="college.artsData.indeterminate" :checked="college.artsData.checkAll"
|
<a-checkbox :indeterminate="college.scienceData.indeterminate" :checked="college.scienceData.checkAll"
|
||||||
@change="artsCheckAllOptions($event)">
|
@change="scienceCheckAllOptions($event)">
|
||||||
{{ college.artsData.label }}
|
{{ college.scienceData.label }}
|
||||||
</a-checkbox>
|
</a-checkbox>
|
||||||
<!-- <hr class="objectHr"> -->
|
<!-- <hr class="objectHr"> -->
|
||||||
<br>
|
<a-checkbox-group v-model="college.scienceData.scienceCheckList"
|
||||||
<a-checkbox-group v-model="college.artsData.artsCheckList" :options="college.artsData.artsOptions" />
|
:options="college.scienceData.scienceOpitons" />
|
||||||
|
|
||||||
|
<hr class="objectHr">
|
||||||
|
<a-checkbox :indeterminate="college.artsData.indeterminate" :checked="college.artsData.checkAll"
|
||||||
|
@change="artsCheckAllOptions($event)">
|
||||||
|
{{ college.artsData.label }}
|
||||||
|
</a-checkbox>
|
||||||
|
<!-- <hr class="objectHr"> -->
|
||||||
|
<br>
|
||||||
|
<a-checkbox-group v-model="college.artsData.artsCheckList" :options="college.artsData.artsOptions" />
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="批次" :span="3">
|
||||||
|
<a-checkbox-group v-model="batch.checkedList" :options="batch.plainOptions" />
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="级别" :span="3">
|
||||||
|
<a-radio-group v-model="selectedLevel" size="large">
|
||||||
|
<a-radio-button v-for="option in levelOptions" :key="option.value" :value="option.value">
|
||||||
|
{{ option.label }}
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="培养层次" :span="3">
|
||||||
|
<a-radio-group v-model="selectedCultivationLevel" size="large">
|
||||||
|
<a-radio-button v-for="option in cultivationLevelOptions" :key="option.value" :value="option.value"
|
||||||
|
:disabled="(option.value === '研究生' && (selectedExamGrade === '大一' || selectedExamGrade === '大二' || selectedExamGrade === '大三' || selectedExamGrade === '大四')) || ((option.value === '本科') && selectedExamGrade === '研究生')">
|
||||||
|
{{ option.label }}
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="考试时年级" :span="3">
|
||||||
|
<a-radio-group v-model="selectedExamGrade" size="large">
|
||||||
|
<a-radio-button v-for="option in examGradeOptions" :key="option.value" :value="option.value"
|
||||||
|
:disabled="(option.value === '研究生' && selectedCultivationLevel === '本科') || ((option.value === '大一' || option.value === '大二' || option.value === '大三' || option.value === '大四') && selectedCultivationLevel === '研究生')">
|
||||||
|
{{ option.label }}
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
|
||||||
|
</a-descriptions-item>
|
||||||
|
|
||||||
|
</a-descriptions>
|
||||||
|
<div class="buttons">
|
||||||
|
<a-button type="primary" style="margin-right: 5px;" @click="visible = false" icon="close">取消</a-button>
|
||||||
|
<a-button type="primary" @click="seachClick" icon="search">查询</a-button>
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
|
<a-descriptions bordered style="margin-top:10px;">
|
||||||
|
<a-descriptions-item label="总人数">
|
||||||
|
{{ totalEntries }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="总通过数">
|
||||||
|
{{ totalPassCount }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="总通过率">
|
||||||
|
{{ totalPassRate }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
<div v-if="isSeach">
|
||||||
|
正在加载中 <a-spin />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="colleges.length > 0 && loading === false">
|
||||||
|
<div class="title">各学院通过率变化</div>
|
||||||
|
<a-tabs v-model:activeKey="activeKey" type="card" @change="darwLine">
|
||||||
|
<a-tab-pane v-for="(college, index) in colleges" :key="index" :tab="college">
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="LineChart">
|
||||||
|
<div id="LineChart"></div>
|
||||||
|
</div>
|
||||||
|
<a-table :dataSource="dataSource" :columns="columns" bordered style="margin-top:10px;" :loading="loading"
|
||||||
|
v-if="colleges.length > 0">
|
||||||
|
<template slot="passRate" slot-scope="text">
|
||||||
|
{{ text }}%
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
<div class="pc-right">
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a-tabs type="card" v-model:activeKey="objectKey" @change="drawPic">
|
||||||
|
<a-tab-pane v-for="(object, index) in objectList" :key="index" :tab="object.label"></a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
<div class="pie">
|
||||||
|
<div class="CircleChart">
|
||||||
|
<div id="registered"></div>
|
||||||
|
<div id="passed"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</a-descriptions-item>
|
</div>
|
||||||
<a-descriptions-item label="批次" :span="3">
|
<div id="passrate"></div>
|
||||||
<a-checkbox-group v-model="batch.checkedList" :options="batch.plainOptions" />
|
|
||||||
</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="级别" :span="3">
|
|
||||||
<a-radio-group v-model="selectedLevel" size="large">
|
|
||||||
<a-radio-button v-for="option in levelOptions" :key="option.value" :value="option.value">
|
|
||||||
{{ option.label }}
|
|
||||||
</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="培养层次" :span="3">
|
|
||||||
<a-radio-group v-model="selectedCultivationLevel" size="large">
|
|
||||||
<a-radio-button v-for="option in cultivationLevelOptions" :key="option.value" :value="option.value"
|
|
||||||
:disabled="(option.value === '研究生' && (selectedExamGrade === '大一' || selectedExamGrade === '大二' || selectedExamGrade === '大三' || selectedExamGrade === '大四')) || ((option.value === '本科') && selectedExamGrade === '研究生')">
|
|
||||||
{{ option.label }}
|
|
||||||
</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="考试时年级" :span="3">
|
|
||||||
<a-radio-group v-model="selectedExamGrade" size="large">
|
|
||||||
<a-radio-button v-for="option in examGradeOptions" :key="option.value" :value="option.value"
|
|
||||||
:disabled="(option.value === '研究生' && selectedCultivationLevel === '本科') || ((option.value === '大一' || option.value === '大二' || option.value === '大三' || option.value === '大四') && selectedCultivationLevel === '研究生')">
|
|
||||||
{{ option.label }}
|
|
||||||
</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
|
|
||||||
</a-descriptions-item>
|
|
||||||
|
|
||||||
</a-descriptions>
|
|
||||||
<div class="buttons">
|
|
||||||
<a-button type="primary" style="margin-right: 5px;" @click="visible = false" icon="close">取消</a-button>
|
|
||||||
<a-button type="primary" @click="seachClick" icon="search">查询</a-button>
|
|
||||||
</div>
|
</div>
|
||||||
</a-drawer>
|
|
||||||
<a-descriptions bordered style="margin-top:10px;">
|
|
||||||
<a-descriptions-item label="总人数">
|
|
||||||
{{ totalEntries }}
|
|
||||||
</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="总通过数">
|
|
||||||
{{ totalPassCount }}
|
|
||||||
</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="总通过率">
|
|
||||||
{{ totalPassRate }}
|
|
||||||
</a-descriptions-item>
|
|
||||||
</a-descriptions>
|
|
||||||
<div v-if="isSeach">
|
|
||||||
正在加载中 <a-spin />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="colleges.length > 0 && loading === false">
|
|
||||||
<div class="title">各学院通过率变化</div>
|
</div>
|
||||||
<a-tabs v-model:activeKey="activeKey" type="card" @change="darwLine">
|
<div v-else>
|
||||||
<a-tab-pane v-for="(college, index) in colleges" :key="index" :tab="college">
|
<a-card :bordered="false">
|
||||||
</a-tab-pane>
|
<!-- 查询区域 -->
|
||||||
</a-tabs>
|
<div>
|
||||||
</div>
|
<a-button type="primary" @click="visible = true">打开筛选项</a-button>
|
||||||
<div class="LineChart">
|
</div>
|
||||||
<div id="LineChart"></div>
|
|
||||||
</div>
|
<a-drawer placement="right" :visible="visible" width="90%" :closable="false">
|
||||||
<a-table :dataSource="dataSource" :columns="columns" bordered style="margin-top:10px;" :loading="loading"
|
<template slot="title">
|
||||||
v-if="colleges.length > 0">
|
<span>CET查询筛选项</span>
|
||||||
<template slot="passRate" slot-scope="text">
|
</template>
|
||||||
{{ text }}%
|
<a-descriptions bordered>
|
||||||
</template>
|
<a-descriptions-item label="学院" :span="3">
|
||||||
</a-table>
|
|
||||||
|
<div class="collegeDesc">
|
||||||
|
<a-checkbox :indeterminate="college.liberalData.indeterminate" :checked="college.liberalData.checkAll"
|
||||||
|
@change="liberalCheckAllOptions($event)">
|
||||||
|
{{ college.liberalData.label }}
|
||||||
|
</a-checkbox>
|
||||||
|
<!-- <hr class="objectHr"> -->
|
||||||
|
<a-checkbox-group v-model="college.liberalData.liberalCheckList"
|
||||||
|
:options="college.liberalData.liberalOptions" />
|
||||||
|
|
||||||
|
<hr class="objectHr">
|
||||||
|
<a-checkbox :indeterminate="college.scienceData.indeterminate" :checked="college.scienceData.checkAll"
|
||||||
|
@change="scienceCheckAllOptions($event)">
|
||||||
|
{{ college.scienceData.label }}
|
||||||
|
</a-checkbox>
|
||||||
|
<!-- <hr class="objectHr"> -->
|
||||||
|
<a-checkbox-group v-model="college.scienceData.scienceCheckList"
|
||||||
|
:options="college.scienceData.scienceOpitons" />
|
||||||
|
|
||||||
|
<hr class="objectHr">
|
||||||
|
<a-checkbox :indeterminate="college.artsData.indeterminate" :checked="college.artsData.checkAll"
|
||||||
|
@change="artsCheckAllOptions($event)">
|
||||||
|
{{ college.artsData.label }}
|
||||||
|
</a-checkbox>
|
||||||
|
<!-- <hr class="objectHr"> -->
|
||||||
|
<br>
|
||||||
|
<a-checkbox-group v-model="college.artsData.artsCheckList" :options="college.artsData.artsOptions" />
|
||||||
|
|
||||||
|
|
||||||
</a-card>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="批次" :span="3">
|
||||||
|
<a-checkbox-group v-model="batch.checkedList" :options="batch.plainOptions" />
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="级别" :span="3">
|
||||||
|
<a-radio-group v-model="selectedLevel" size="large">
|
||||||
|
<a-radio-button v-for="option in levelOptions" :key="option.value" :value="option.value">
|
||||||
|
{{ option.label }}
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="培养层次" :span="3">
|
||||||
|
<a-radio-group v-model="selectedCultivationLevel" size="large">
|
||||||
|
<a-radio-button v-for="option in cultivationLevelOptions" :key="option.value" :value="option.value"
|
||||||
|
:disabled="(option.value === '研究生' && (selectedExamGrade === '大一' || selectedExamGrade === '大二' || selectedExamGrade === '大三' || selectedExamGrade === '大四')) || ((option.value === '本科') && selectedExamGrade === '研究生')">
|
||||||
|
{{ option.label }}
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="考试时年级" :span="3">
|
||||||
|
<a-radio-group v-model="selectedExamGrade" size="large">
|
||||||
|
<a-radio-button v-for="option in examGradeOptions" :key="option.value" :value="option.value"
|
||||||
|
:disabled="(option.value === '研究生' && selectedCultivationLevel === '本科') || ((option.value === '大一' || option.value === '大二' || option.value === '大三' || option.value === '大四') && selectedCultivationLevel === '研究生')">
|
||||||
|
{{ option.label }}
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
|
||||||
|
</a-descriptions-item>
|
||||||
|
|
||||||
|
</a-descriptions>
|
||||||
|
<div class="buttons">
|
||||||
|
<a-button type="primary" style="margin-right: 5px;" @click="visible = false" icon="close">取消</a-button>
|
||||||
|
<a-button type="primary" @click="seachClick" icon="search">查询</a-button>
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
|
<a-descriptions bordered style="margin-top:10px;">
|
||||||
|
<a-descriptions-item label="总人数">
|
||||||
|
{{ totalEntries }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="总通过数">
|
||||||
|
{{ totalPassCount }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="总通过率">
|
||||||
|
{{ totalPassRate }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
<div v-if="isSeach">
|
||||||
|
正在加载中 <a-spin />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="colleges.length > 0 && loading === false">
|
||||||
|
<div class="title">各学院通过率变化</div>
|
||||||
|
<a-tabs v-model:activeKey="activeKey" type="card" @change="darwLine">
|
||||||
|
<a-tab-pane v-for="(college, index) in colleges" :key="index" :tab="college">
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="LineChart">
|
||||||
|
<div id="LineChart"></div>
|
||||||
|
</div>
|
||||||
|
<a-table :dataSource="dataSource" :columns="columns" bordered style="margin-top:10px;" :loading="loading"
|
||||||
|
v-if="colleges.length > 0">
|
||||||
|
<template slot="passRate" slot-scope="text">
|
||||||
|
{{ text }}%
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getAction, postAction } from '@/api/manage'
|
import { getAction, postAction } from '@/api/manage'
|
||||||
import '@/assets/less/TableExpand.less'
|
import '@/assets/less/TableExpand.less'
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
|
mixins: [mixin, mixinDevice],
|
||||||
name: 'CetEnglishList',
|
name: 'CetEnglishList',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
objectList: [
|
||||||
|
{
|
||||||
|
label: '文科',
|
||||||
|
childrenObject: [
|
||||||
|
{
|
||||||
|
label: '东语学院',
|
||||||
|
registrations: 2210,
|
||||||
|
passed: 357,
|
||||||
|
passrate: 16.15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '法学院',
|
||||||
|
registrations: 1595,
|
||||||
|
passed: 314,
|
||||||
|
passrate: 19.69
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '管理学院',
|
||||||
|
registrations: 5394,
|
||||||
|
passed: 1025,
|
||||||
|
passrate: 19.00
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '教师教育学院',
|
||||||
|
registrations: 1406,
|
||||||
|
passed: 183,
|
||||||
|
passrate: 13.02,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: '教育科学学院',
|
||||||
|
registrations: 5911,
|
||||||
|
passed: 1104,
|
||||||
|
passrate: 18.68,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '经济学院',
|
||||||
|
registrations: 5809,
|
||||||
|
passed: 1049,
|
||||||
|
passrate: 18.06,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '历史文化学院',
|
||||||
|
registrations: 4352,
|
||||||
|
passed: 772,
|
||||||
|
passrate: 17.74,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '马克思主义学院',
|
||||||
|
registrations: 2466,
|
||||||
|
passed: 492,
|
||||||
|
passrate: 19.95,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '西语学院',
|
||||||
|
registrations: 5888,
|
||||||
|
passed: 2717,
|
||||||
|
passrate: 46.14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '公共英语教研部',
|
||||||
|
registrations: 56,
|
||||||
|
passed: 32,
|
||||||
|
passrate: 57.14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '国际教育学院',
|
||||||
|
registrations: 175,
|
||||||
|
passed: 28,
|
||||||
|
passrate: 16.00,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '斯拉夫语学院',
|
||||||
|
registrations: 1083,
|
||||||
|
passed: 204,
|
||||||
|
passrate: 18.84,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '文学院',
|
||||||
|
registrations: 7183,
|
||||||
|
passed: 1599,
|
||||||
|
passrate: 22.26,
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '理科',
|
||||||
|
childrenObject: [
|
||||||
|
{
|
||||||
|
label: '物理与电子工程学院',
|
||||||
|
registrations: 5586,
|
||||||
|
passed: 929,
|
||||||
|
passrate: 16.63
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '生命科学与技术学院',
|
||||||
|
registrations: 5022,
|
||||||
|
passed: 829,
|
||||||
|
passrate: 16.51
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数学科学学院',
|
||||||
|
registrations: 7230,
|
||||||
|
passed: 1373,
|
||||||
|
passrate: 18.99
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '计算机科学与信息工程学院',
|
||||||
|
registrations: 5708,
|
||||||
|
passed: 861,
|
||||||
|
passrate: 15.08,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: '化学化工学院',
|
||||||
|
registrations: 5346,
|
||||||
|
passed: 998,
|
||||||
|
passrate: 18.67,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '地理科学学院',
|
||||||
|
registrations: 6999,
|
||||||
|
passed: 1190,
|
||||||
|
passrate: 17.00,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '光电带隙材料教育部重点实验室',
|
||||||
|
registrations: 87,
|
||||||
|
passed: 5,
|
||||||
|
passrate: 5.75,
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '艺体',
|
||||||
|
childrenObject: [
|
||||||
|
{
|
||||||
|
label: '传媒学院',
|
||||||
|
registrations: 5097,
|
||||||
|
passed: 615,
|
||||||
|
passrate: 12.07
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '国际美术学院',
|
||||||
|
registrations: 308,
|
||||||
|
passed: 11,
|
||||||
|
passrate: 3.57
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '音乐学院',
|
||||||
|
registrations: 2413,
|
||||||
|
passed: 138,
|
||||||
|
passrate: 5.72
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '美术学院',
|
||||||
|
registrations: 5122,
|
||||||
|
passed: 427,
|
||||||
|
passrate: 8.34,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: '体育科学学院',
|
||||||
|
registrations: 1360,
|
||||||
|
passed: 75,
|
||||||
|
passrate: 5.51,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
objectKey: 0,
|
||||||
|
divIsShow: true,
|
||||||
indeterminate: false,
|
indeterminate: false,
|
||||||
isSeach: false,
|
isSeach: false,
|
||||||
activeKey: 0,
|
activeKey: 0,
|
||||||
|
|
@ -279,13 +600,26 @@ export default {
|
||||||
getPassRate: function () {
|
getPassRate: function () {
|
||||||
return `${window._CONFIG['domianURL']}/${this.url.getPassRate}`
|
return `${window._CONFIG['domianURL']}/${this.url.getPassRate}`
|
||||||
|
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// const cancelButton = document.querySelector('.cancelButton');
|
||||||
|
// const width = cancelButton.getBoundingClientRect().width;
|
||||||
|
// cancelButton.style.marginRight = `${width}px`;
|
||||||
|
if (this.isMobile()) {
|
||||||
|
this.divIsShow = false
|
||||||
|
console.log(this.divIsShow, 321)
|
||||||
|
} else {
|
||||||
|
this.divIsShow = true
|
||||||
|
console.log(this.divIsShow, 123)
|
||||||
|
}
|
||||||
|
// this.drawPic()
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
create() {
|
||||||
|
console.log("abcreate")
|
||||||
},
|
},
|
||||||
// mounted() {
|
|
||||||
// const cancelButton = document.querySelector('.cancelButton');
|
|
||||||
// const width = cancelButton.getBoundingClientRect().width;
|
|
||||||
// cancelButton.style.marginRight = `${width}px`;
|
|
||||||
// },
|
|
||||||
methods: {
|
methods: {
|
||||||
//切换tab，获取当前的学院，绘制折线图
|
//切换tab，获取当前的学院，绘制折线图
|
||||||
darwLine() {
|
darwLine() {
|
||||||
|
|
@ -325,10 +659,16 @@ export default {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: dates
|
data: dates,
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0, // 设置横轴标签全部显示
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30 // 调整 Y 轴标签和图表之间的间距
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: drawData
|
series: drawData
|
||||||
};
|
};
|
||||||
|
|
@ -374,6 +714,7 @@ export default {
|
||||||
});
|
});
|
||||||
//收集折线图的数据
|
//收集折线图的数据
|
||||||
this.getDrawData(data);
|
this.getDrawData(data);
|
||||||
|
this.drawPic()
|
||||||
this.isSeach = false
|
this.isSeach = false
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -395,8 +736,8 @@ export default {
|
||||||
name: item.college,
|
name: item.college,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [],
|
data: [],
|
||||||
tooltip:{
|
tooltip: {
|
||||||
show:true,
|
show: true,
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|
@ -409,16 +750,14 @@ export default {
|
||||||
data: [],
|
data: [],
|
||||||
//宽度
|
//宽度
|
||||||
barWidth: 50,
|
barWidth: 50,
|
||||||
tooltip:{
|
tooltip: {
|
||||||
show:false,
|
show: false,
|
||||||
},
|
},
|
||||||
//透明度
|
//透明度
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
color: 'rgba(84,122,198,0.9)',
|
||||||
color: 'rgba(84,122,198,0.9)'
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -483,11 +822,184 @@ export default {
|
||||||
this.college.artsData.indeterminate = false
|
this.college.artsData.indeterminate = false
|
||||||
this.college.artsData.checkAll = e.target.checked
|
this.college.artsData.checkAll = e.target.checked
|
||||||
},
|
},
|
||||||
|
drawPic() {
|
||||||
|
// this.drawCircle(this.objectKey)
|
||||||
|
this.drawPassedCircle(this.objectKey)
|
||||||
|
this.drawregisteredCircle(this.objectKey)
|
||||||
|
this.drawPassRateBar(this.objectKey)
|
||||||
|
},
|
||||||
|
|
||||||
|
drawPassedCircle(objectKey) {
|
||||||
|
console.log("drawCircle")
|
||||||
|
let fatherData = this.objectList[objectKey]
|
||||||
|
let data = fatherData.childrenObject.map(item => {
|
||||||
|
return {
|
||||||
|
name: item.label,
|
||||||
|
value: item.passed
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let circleChart = document.getElementById("passed");
|
||||||
|
if (circleChart) {
|
||||||
|
circleChart = echarts.getInstanceByDom(circleChart)
|
||||||
|
if (circleChart) {
|
||||||
|
circleChart.dispose();
|
||||||
|
}
|
||||||
|
circleChart = echarts.init(document.getElementById("passed"))
|
||||||
|
console.log("被绘制了")
|
||||||
|
let circleOption = {
|
||||||
|
title: {
|
||||||
|
text: '通过人数',
|
||||||
|
subtext: fatherData.label,
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '通过人数',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: data,
|
||||||
|
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
circleChart.setOption(circleOption);
|
||||||
|
}
|
||||||
|
// if (circleChart != null && circleChart != undefined) {
|
||||||
|
// circleChart.dispose();
|
||||||
|
// circleChart = echarts.init(document.getElementById(type))
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
drawregisteredCircle(objectKey) {
|
||||||
|
console.log("drawCircle")
|
||||||
|
let fatherData = this.objectList[objectKey]
|
||||||
|
let registeredData = fatherData.childrenObject.map(item => {
|
||||||
|
return {
|
||||||
|
name: item.label,
|
||||||
|
value: item.registrations
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let circleChart = document.getElementById("registered");
|
||||||
|
if (circleChart) {
|
||||||
|
circleChart = echarts.getInstanceByDom(circleChart)
|
||||||
|
if (circleChart) {
|
||||||
|
circleChart.dispose();
|
||||||
|
}
|
||||||
|
circleChart = echarts.init(document.getElementById("registered"))
|
||||||
|
console.log("被绘制了")
|
||||||
|
let circleOption = {
|
||||||
|
title: {
|
||||||
|
text: '报名人数',
|
||||||
|
subtext: fatherData.label,
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '报名人数',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: registeredData,
|
||||||
|
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
circleChart.setOption(circleOption);
|
||||||
|
}
|
||||||
|
// if (circleChart != null && circleChart != undefined) {
|
||||||
|
// circleChart.dispose();
|
||||||
|
// circleChart = echarts.init(document.getElementById(type))
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
drawPassRateBar(objectKey) {
|
||||||
|
let fatherData = this.objectList[objectKey]
|
||||||
|
let passrateXData = fatherData.childrenObject.map(item => {
|
||||||
|
return item.label
|
||||||
|
})
|
||||||
|
let passrateYData = fatherData.childrenObject.map(item => {
|
||||||
|
return item.passrate
|
||||||
|
})
|
||||||
|
let BarChart = echarts.getInstanceByDom(document.getElementById('passrate'));
|
||||||
|
if (BarChart != null && BarChart != undefined) {
|
||||||
|
BarChart.dispose();
|
||||||
|
}
|
||||||
|
BarChart = echarts.init(document.getElementById('passrate'));
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: '各学院通过率'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// data: registeredData.label
|
||||||
|
// },
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: passrateXData,
|
||||||
|
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
margin: 0 // 调整 Y 轴标签和图表之间的间距
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
name: passrateXData,
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Total',
|
||||||
|
data: passrateYData
|
||||||
|
},
|
||||||
|
};
|
||||||
|
BarChart.setOption(option);
|
||||||
|
|
||||||
|
}
|
||||||
|
// if (circleChart != null && circleChart != undefined) {
|
||||||
|
// circleChart.dispose();
|
||||||
|
// circleChart = echarts.init(document.getElementById(type))
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped >
|
||||||
@import '~@assets/less/common.less';
|
@import '~@assets/less/common.less';
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
@ -496,6 +1008,29 @@ export default {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pie {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-left {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-right {
|
||||||
|
width: 50%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
.LineChart {
|
.LineChart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
|
@ -503,6 +1038,13 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CircleChart {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
@ -515,6 +1057,23 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#passed {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#registered {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#passrate {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
.collegeDesc {
|
.collegeDesc {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue