将web端与移动端样式分开，修改web端样式

src/views/office/cet/CetEnglishList.vue

@@ -1,4 +1,8 @@
 <template>
+  <div v-if=divIsShow>
+    <div class="pc">
+
+      <div class="pc-left">
         <a-card :bordered="false">
           <!-- 查询区域 -->
           <div>
@@ -112,18 +116,335 @@
 
 
         </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>
+        <div id="passrate"></div>
+      </div>
+
+    </div>
+
+
+  </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" />
+
+
+            </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() {
+  },
+  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")
+  },
   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,14 +750,12 @@ 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%;