From a3a14d4ccc29dd830a0925fd08df1843c99f45cf Mon Sep 17 00:00:00 2001
From: hh <2397241381@qq.com>
Date: Wed, 27 Mar 2024 17:08:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cet/cet-ana-1.vue | 261 ++++++++++++++++++------------------
 src/views/cet/cet-ana-2.vue | 261 ++++++++++++++++++------------------
 2 files changed, 258 insertions(+), 264 deletions(-)

diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue
index b19aea6..fc1e5f9 100644
--- a/src/views/cet/cet-ana-1.vue
+++ b/src/views/cet/cet-ana-1.vue
@@ -1,146 +1,143 @@
 <template>
-    <div>
-      <p class="title">中英足球联赛上座情况</p>
+  <div style="background: #ececec; padding: 25px">
+    <a-card title="按学院分析" :bordered="false">
+      <template #extra>
+        <!-- <a-select v-model:value="college" style="width: 300px" :options="collegeOptions"></a-select> -->
+        <a-select v-model:value="batch" style="margin-left: 10px;width: 120px" :options="batchOptions"></a-select>
+        <!-- <a-select v-model:value="level" style="margin-left: 10px;width: 120px" :options="levelOptions"></a-select> -->
+        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
+      </template>
       <a-row :gutter="24">
-        <a-col :xl="12" :style="{ marginBottom: '24px' }">
+        <a-col :xl="24" :style="{ marginBottom: '24px' }">
           <div class="container">
-            <div id="map1" style="width: 660px; height: 400px"></div>
-          </div>
-        </a-col>
-        <a-col :xl="12" :style="{ marginBottom: '24px' }">
-          <div class="container">
-            <div id="map2" style="width: 660px; height: 400px"></div>
+            <div id="map1" style="width: 660px; height: 400px;"></div>
           </div>
         </a-col>
       </a-row>
-    </div>
-  </template>
-  
-  <script>
-  import * as echarts from 'echarts';
-  
-  export default {
-    methods: {
-      map1Chart() {
-        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
-        let myChart = echarts.init(document.getElementById("map1"));
-        // 指定图表的配置项和数据
-        let option = {
-          title: {
-            text: "总上座人数对比",
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          legend: {
-            data: ["英国", "中国"],//上方的标签
-          },
-          xAxis: {
-            data: ["一级", "二级", "三级", "四级"],
-            axisLabel: {
-              interval: 0,
-              // rotate: 30
-            }
-          },
-          yAxis: {
-            name: '总上座人数(万)',
-          },
-          series: [
-            {
-              name: "英国",
-              type: "bar",
-              data: [1450, 1100, 450, 300],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-            {
-              name: "中国",
-              type: "bar",
-              data: [552, 180, 200, 0],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-          ],
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { defHttp } from '/@/utils/http/axios';
+import * as echarts from 'echarts';
+
+export default {
+  name: "Analysis",
+  data() {
+    return {
+      Url: {
+        getBatch: '/cet/getBatch',
+        getCollege: '/cet/getCollege',
+        getRate: '/cet/getRateByBatch'
       },
-      map2Chart() {
-        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
-        let myChart = echarts.init(document.getElementById("map2"));
-        // 指定图表的配置项和数据
-        let option = {
-          title: {
-            text: "平均上座人数对比",
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
+      collegeOptions: [],
+      batchOptions: [],
+      levelOptions: [
+        { value: 'cet4', label: '英语四级' },
+        { value: 'cet6', label: '英语六级' }
+      ],
+      level: null,
+      college: null,
+      batch: null
+    };
+  },
+  methods: {
+    map1Chart() {
+      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
+      let myChart = echarts.init(document.getElementById("map1"));
+      // 指定图表的配置项和数据
+      let option = {
+        title: {
+          text: "总上座人数对比",
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ["英国", "中国"],//上方的标签
+        },
+        xAxis: {
+          data: ["一级", "二级", "三级", "四级"],
+          axisLabel: {
+            interval: 0,
+            // rotate: 30
+          }
+        },
+        yAxis: {
+          name: '总上座人数(万)',
+        },
+        series: [
+          {
+            name: "英国",
+            type: "bar",
+            data: [1450, 1100, 450, 300],
+            label: {
+              formatter: '{@value}'
             }
           },
-          legend: {
-            data: ["英国", "中国"],//上方的标签
-          },
-          xAxis: {
-            data: ["一级", "二级", "三级", "四级"],
-            axisLabel: {
-              interval: 0,
-              // rotate: 30
+          {
+            name: "中国",
+            type: "bar",
+            data: [552, 180, 200, 0],
+            label: {
+              formatter: '{@value}'
             }
           },
-          yAxis: {
-            name: '平均上座人数(千)',
-          },
-          series: [
-            {
-              name: "英国",
-              type: "bar",
-              data: [38, 21, 8, 5],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-            {
-              name: "中国",
-              type: "bar",
-              data: [23, 7, 2, 0],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-          ],
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
-      },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
     },
-    mounted() {
-      this.map1Chart();
-      this.map2Chart();
+    // 获取批次数据
+    async getBatch() {
+      const getBatch = await defHttp.get({ url: this.Url.getBatch });
+      // const getCollege = await defHttp.get({ url: this.Url.getCollege });
+
+      // this.collegeOptions = getCollege.colleges;
+      // 手动添加一个全校字段
+      // this.collegeOptions.unshift({ value: '全校', label: '全校' });
+      // this.college = this.collegeOptions[0].value;
+
+      this.batchOptions = getBatch.batches;
+      this.batch = this.batchOptions[0].value;
+      this.level = this.levelOptions[0].value;
+
+      // this.query();
+    },
+    // 查询数据
+    async query() {
+      let params = {
+        batch: this.batch,
+        level: 'cet4'
+      }
+      const data = await defHttp.get({ url: this.Url.getRate, params });
+      this.$message.info(`查询结果：${JSON.stringify(data)}`);
     }
-  
+  },
+  mounted() {
+    this.getBatch();
+    this.map1Chart();
   }
-  </script>
-  
-  <style lang="less" scoped>
-  .container {
-    display: flex;
-    background-color: #fff;
-    padding: 15px;
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  }
-  
-  .title {
-    font-size: 34px;
-    color: rgb(8, 8, 8);
-    font-weight: bold;
-  }
-  
-  </style>
\ No newline at end of file
+
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  display: flex;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
+
+.title {
+  font-size: 34px;
+  color: rgb(8, 8, 8);
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue
index b19aea6..106e04f 100644
--- a/src/views/cet/cet-ana-2.vue
+++ b/src/views/cet/cet-ana-2.vue
@@ -1,146 +1,143 @@
 <template>
-    <div>
-      <p class="title">中英足球联赛上座情况</p>
+  <div style="background: #ececec; padding: 25px">
+    <a-card title="按学院分析" :bordered="false">
+      <template #extra>
+        <!-- <a-select v-model:value="college" style="width: 300px" :options="collegeOptions"></a-select> -->
+        <a-select v-model:value="batch" style="margin-left: 10px;width: 120px" :options="batchOptions"></a-select>
+        <!-- <a-select v-model:value="level" style="margin-left: 10px;width: 120px" :options="levelOptions"></a-select> -->
+        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
+      </template>
       <a-row :gutter="24">
-        <a-col :xl="12" :style="{ marginBottom: '24px' }">
+        <a-col :xl="24" :style="{ marginBottom: '24px' }">
           <div class="container">
-            <div id="map1" style="width: 660px; height: 400px"></div>
-          </div>
-        </a-col>
-        <a-col :xl="12" :style="{ marginBottom: '24px' }">
-          <div class="container">
-            <div id="map2" style="width: 660px; height: 400px"></div>
+            <div id="map1" style="width: 660px; height: 400px;"></div>
           </div>
         </a-col>
       </a-row>
-    </div>
-  </template>
-  
-  <script>
-  import * as echarts from 'echarts';
-  
-  export default {
-    methods: {
-      map1Chart() {
-        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
-        let myChart = echarts.init(document.getElementById("map1"));
-        // 指定图表的配置项和数据
-        let option = {
-          title: {
-            text: "总上座人数对比",
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          legend: {
-            data: ["英国", "中国"],//上方的标签
-          },
-          xAxis: {
-            data: ["一级", "二级", "三级", "四级"],
-            axisLabel: {
-              interval: 0,
-              // rotate: 30
-            }
-          },
-          yAxis: {
-            name: '总上座人数(万)',
-          },
-          series: [
-            {
-              name: "英国",
-              type: "bar",
-              data: [1450, 1100, 450, 300],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-            {
-              name: "中国",
-              type: "bar",
-              data: [552, 180, 200, 0],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-          ],
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { defHttp } from '/@/utils/http/axios';
+import * as echarts from 'echarts';
+
+export default {
+  name: "Analysis",
+  data() {
+    return {
+      Url: {
+        getBatch: '/cet/getBatch',
+        getCollege: '/cet/getCollege',
+        getRate: '/cet/getRateByBatch'
       },
-      map2Chart() {
-        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
-        let myChart = echarts.init(document.getElementById("map2"));
-        // 指定图表的配置项和数据
-        let option = {
-          title: {
-            text: "平均上座人数对比",
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
+      collegeOptions: [],
+      batchOptions: [],
+      levelOptions: [
+        { value: 'cet4', label: '英语四级' },
+        { value: 'cet6', label: '英语六级' }
+      ],
+      level: null,
+      college: null,
+      batch: null
+    };
+  },
+  methods: {
+    map1Chart() {
+      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
+      let myChart = echarts.init(document.getElementById("map1"));
+      // 指定图表的配置项和数据
+      let option = {
+        title: {
+          text: "总上座人数对比",
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ["英国", "中国"],//上方的标签
+        },
+        xAxis: {
+          data: ["一级", "二级", "三级", "四级"],
+          axisLabel: {
+            interval: 0,
+            // rotate: 30
+          }
+        },
+        yAxis: {
+          name: '总上座人数(万)',
+        },
+        series: [
+          {
+            name: "英国",
+            type: "bar",
+            data: [1450, 1100, 450, 300],
+            label: {
+              formatter: '{@value}'
             }
           },
-          legend: {
-            data: ["英国", "中国"],//上方的标签
-          },
-          xAxis: {
-            data: ["一级", "二级", "三级", "四级"],
-            axisLabel: {
-              interval: 0,
-              // rotate: 30
+          {
+            name: "中国",
+            type: "bar",
+            data: [552, 180, 200, 0],
+            label: {
+              formatter: '{@value}'
             }
           },
-          yAxis: {
-            name: '平均上座人数(千)',
-          },
-          series: [
-            {
-              name: "英国",
-              type: "bar",
-              data: [38, 21, 8, 5],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-            {
-              name: "中国",
-              type: "bar",
-              data: [23, 7, 2, 0],
-              label: {
-                formatter: '{@value}'
-              }
-            },
-          ],
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
-      },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
     },
-    mounted() {
-      this.map1Chart();
-      this.map2Chart();
+    // 获取批次数据
+    async getBatch() {
+      const getBatch = await defHttp.get({ url: this.Url.getBatch });
+      // const getCollege = await defHttp.get({ url: this.Url.getCollege });
+
+      // this.collegeOptions = getCollege.colleges;
+      // 手动添加一个全校字段
+      // this.collegeOptions.unshift({ value: '全校', label: '全校' });
+      // this.college = this.collegeOptions[0].value;
+
+      this.batchOptions = getBatch.batches;
+      this.batch = this.batchOptions[0].value;
+      this.level = this.levelOptions[0].value;
+
+      this.query();
+    },
+    // 查询数据
+    async query() {
+      let params = {
+        batch: this.batch,
+        level: 'cet4'
+      }
+      const data = await defHttp.get({ url: this.Url.getRate, params });
+      this.$message.info(`查询结果：${JSON.stringify(data)}`);
     }
-  
+  },
+  mounted() {
+    this.getBatch();
+    this.map1Chart();
   }
-  </script>
-  
-  <style lang="less" scoped>
-  .container {
-    display: flex;
-    background-color: #fff;
-    padding: 15px;
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  }
-  
-  .title {
-    font-size: 34px;
-    color: rgb(8, 8, 8);
-    font-weight: bold;
-  }
-  
-  </style>
\ No newline at end of file
+
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  display: flex;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
+
+.title {
+  font-size: 34px;
+  color: rgb(8, 8, 8);
+  font-weight: bold;
+}
+</style>