From c78ca14a00e1072c557967a9a0ba732e48720811 Mon Sep 17 00:00:00 2001
From: Cool <747682928@qq.com>
Date: Thu, 30 Nov 2023 16:03:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86web=E7=AB=AF=E4=B8=8E=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=A0=B7=E5=BC=8F=E5=88=86=E5=BC=80=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9web=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/office/cet/CetEnglishList.vue | 791 ++++++++++++++++++++----
 1 file changed, 675 insertions(+), 116 deletions(-)

diff --git a/src/views/office/cet/CetEnglishList.vue b/src/views/office/cet/CetEnglishList.vue
index 51d5496..2d25b00 100644
--- a/src/views/office/cet/CetEnglishList.vue
+++ b/src/views/office/cet/CetEnglishList.vue
@@ -1,129 +1,450 @@
 <template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div>
-      <a-button type="primary" @click="visible = true">打开筛选项</a-button>
-    </div>
+  <div v-if=divIsShow>
+    <div class="pc">
 
-    <a-drawer placement="right" :visible="visible" width="90%" :closable="false">
-      <template slot="title">
-        <span>CET查询筛选项</span>
-      </template>
-      <a-descriptions bordered>
-        <a-descriptions-item label="学院" :span="3">
+      <div class="pc-left">
+        <a-card :bordered="false">
+          <!-- 查询区域 -->
+          <div>
+            <a-button type="primary" @click="visible = true">打开筛选项</a-button>
+          </div>
 
-          <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" />
+          <a-drawer placement="right" :visible="visible" width="90%" :closable="false">
+            <template slot="title">
+              <span>CET查询筛选项</span>
+            </template>
+            <a-descriptions bordered>
+              <a-descriptions-item label="学院" :span="3">
 
-            <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" />
+                <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.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" />
+                  <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" />
 
 
+                </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>
 
 
-        </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>
+        <div id="passrate"></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 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>
+
+  </div>
+  <div v-else>
+    <a-card :bordered="false">
+      <!-- 查询区域 -->
+      <div>
+        <a-button type="primary" @click="visible = true">打开筛选项</a-button>
+      </div>
+
+      <a-drawer placement="right" :visible="visible" width="90%" :closable="false">
+        <template slot="title">
+          <span>CET查询筛选项</span>
+        </template>
+        <a-descriptions bordered>
+          <a-descriptions-item label="学院" :span="3">
+
+            <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>
 
 <script>
 import { getAction, postAction } from '@/api/manage'
 import '@/assets/less/TableExpand.less'
 import * as echarts from 'echarts';
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+
+
 
 export default {
 
+  mixins: [mixin, mixinDevice],
   name: 'CetEnglishList',
   data() {
     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,
       isSeach: false,
       activeKey: 0,
@@ -279,13 +600,26 @@ export default {
     getPassRate: function () {
       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: {
     //切换tab，获取当前的学院，绘制折线图
     darwLine() {
@@ -325,10 +659,16 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: dates
+          data: dates,
+          axisLabel: {
+            interval: 0, // 设置横轴标签全部显示
+          }
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLabel: {
+            margin: 30 // 调整 Y 轴标签和图表之间的间距
+          }
         },
         series: drawData
       };
@@ -374,6 +714,7 @@ export default {
         });
         //收集折线图的数据
         this.getDrawData(data);
+        this.drawPic()
         this.isSeach = false
       },
 
@@ -395,8 +736,8 @@ export default {
               name: item.college,
               type: 'line',
               data: [],
-              tooltip:{
-                show:true,
+              tooltip: {
+                show: true,
               },
               label: {
                 show: true,
@@ -409,16 +750,14 @@ export default {
               data: [],
               //宽度
               barWidth: 50,
-              tooltip:{
-                show:false,
+              tooltip: {
+                show: false,
               },
               //透明度
               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.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>
-<style scoped>
+<style scoped >
 @import '~@assets/less/common.less';
 
 .title {
@@ -496,6 +1008,29 @@ export default {
   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 {
   width: 100%;
   height: 400px;
@@ -503,6 +1038,13 @@ export default {
 
 }
 
+.CircleChart {
+  width: 100%;
+  height: 400px;
+  padding: 10px;
+  display: flex;
+}
+
 .buttons {
   float: right;
   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 {
   display: block;
   width: 100%;