From c8055a34023614d76efd5bfa3ebe57a2a7184a94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=81?= <18339727226@163.com>
Date: Sun, 26 May 2024 20:49:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=96=E6=B6=88=E8=87=AA=E5=8A=A8=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=EF=BC=8C=E5=8A=A0=E4=B8=8A=E7=BC=B4=E8=B4=B9=E4=BA=BA?=
 =?UTF-8?q?=E6=95=B0=E9=80=89=E6=8B=A9=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index/right-bottom.vue  | 11 +++--
 src/views/index/right-center.vue  | 71 +++++++++++++++++++++++++++----
 src/views/index/right-top-two.vue | 14 +++---
 3 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/src/views/index/right-bottom.vue b/src/views/index/right-bottom.vue
index 95c89e3..d85650d 100644
--- a/src/views/index/right-bottom.vue
+++ b/src/views/index/right-bottom.vue
@@ -762,17 +762,17 @@ onMounted(() => {
       <div class="title-item">专科</div>
       <div class="title-item">专升本</div>
     </div>
-    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
-      <component :is="comName" :list="state.list" v-model="state.scroll"
+    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': true }">
+      <!-- <component :is="comName" :list="state.list" v-model="state.scroll"
         :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
         :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
-        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel">
+        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
         <div class="table-row" v-for="(item, i) in state.list">
           <div class="row-item">{{ i + 1 }}</div>
           <div class="row-item">{{ item.provinceName }}</div>
           <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
         </div>
-      </component>
+      <!-- </component> -->
     </div>
   </div>
 </template>
@@ -827,4 +827,7 @@ onMounted(() => {
 .overflow-y-auto {
   overflow-y: auto;
 }
+::-webkit-scrollbar {
+  width: 0px;
+}
 </style>
diff --git a/src/views/index/right-center.vue b/src/views/index/right-center.vue
index ca9b9b7..e1c9104 100644
--- a/src/views/index/right-center.vue
+++ b/src/views/index/right-center.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
 import { ElMessage } from "element-plus";
+const activeTab = ref(0);
+const tabs = [
+  { title: '本科', value: 3900 ,dateList : ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"],numList: [1, 5, 2, 4, 9, 6]},
+  { title: '专科', value: 4500 ,dateList : ['1-6', '1-7', '1-8', '1-9', '1-10', "1-11"],numList: [4, 9, 6,1, 5, 2]},
+  { title: '专升本', value: 6000 ,dateList : ['2-6', '2-7', '2-8', '2-9', '2-10', "2-11"],numList: [1, 6,5, 2, 4, 9,]},
+];
+
+const changeTab = (index: number) => {
+  activeTab.value = index;
+  setOption(tabs[index].dateList,tabs[index].numList)
+};
 
 const option = ref({});
 const getData = () => {
-  let dateList = ['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', "2022-04"]
+  let dateList = ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"]
   let numList = [1, 5, 2, 4, 9, 6]
-  let numList2 = [6, 5, 4, 3, 2, 1]
-  setOption(dateList, numList, numList2)
+  setOption(dateList, numList)
 };
-const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
+const setOption = async (xData: any[], yData: any[]) => {
   option.value = {
     xAxis: {
       type: "category",
@@ -64,7 +74,7 @@ const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
       left: "10px",
       right: "30px",
       bottom: "0px",
-      top: "100px",
+      top: "30px",
       containLabel: true,
       // borderColor: "#1F63A3",
     },
@@ -74,10 +84,10 @@ const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
         type: "line",
         smooth: false,
         symbol: "circle", // 拐点样式 -- 这里是个圆
-        symbolSize:7, // 拐点大小
+        symbolSize: 7, // 拐点大小
         name: "当日缴费人数",
         // color: "rgba(9,202,243,.7)",
-        color:'#fff',
+        color: '#fff',
         markPoint: {
           data: [
             {
@@ -97,7 +107,7 @@ const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
                 borderRadius: 6,
                 borderColor: "rgba(9,202,243,.5)",
                 padding: [7, 14],
-                formatter: "报警2：{c}",
+                // formatter: "报警2：{c}",
                 borderWidth: 0.5,
               },
             },
@@ -145,7 +155,50 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="tabs">
+    <div class="no-tab">
+      <p>当日缴费总人数</p>
+      <p> 12,000 </p>
+    </div>
+    <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
+      <p>{{ tab.title }}</p>
+      <p>{{ tab.value }}</p>
+    </div>
+  </div>
+  <!-- <div class="tab-content"> -->
+  <!-- <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index"> -->
   <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
+  <!-- </div> -->
+  <!-- </div> -->
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.tabs {
+  display: flex;
+  justify-content: space-between;
+
+  div {
+    width: 80px;
+    padding: 10px;
+    cursor: pointer;
+    background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(145, 175, 207, 0.4) 100%);
+    border-top: 2px solid rgb(152, 194, 221);
+  }
+
+  div.active {
+    // background-color: #ccc;
+    background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(0, 155, 228, 0.6) 100%);
+    border-top: 2px solid #00A2FF;
+  }
+
+  .no-tab {
+    width: 160px;
+    height: 80px;
+    cursor: default;
+  }
+}
+
+.chart {
+  height: 250px;
+}
+</style>
diff --git a/src/views/index/right-top-two.vue b/src/views/index/right-top-two.vue
index 91cfd6e..d335d8b 100644
--- a/src/views/index/right-top-two.vue
+++ b/src/views/index/right-top-two.vue
@@ -188,20 +188,21 @@ onMounted(() => {
       <div class="title-item">总人数</div>
       <div class="title-item">报到率</div>
     </div>
-    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
-      <component :is="comName" :list="state.list" v-model="state.scroll"
+    <!-- <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }"> -->
+    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': true }">
+      <!-- <component :is="comName" :list="state.list" v-model="state.scroll"
         :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
         :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
-        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel">
+        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
         <div class="table-row" v-for="(item, i) in state.list">
           <div class="row-item">{{ i + 1 }}</div>
-          <div class="row-item">{{ item.collegeName }}</div>
+          <div class="row-item" :title=item.collegeName >{{ item.collegeName }}</div>
           <div class="row-item">{{ item.reportNumber }}</div>
           <div class="row-item">{{ item.totalNumber }}</div>
           <div class="row-item">{{ '0%' }}</div>
           <!-- <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div> -->
         </div>
-      </component>
+      <!-- </component> -->
     </div>
   </div>
 </template>
@@ -257,4 +258,7 @@ onMounted(() => {
 .overflow-y-auto {
   overflow-y: auto;
 }
+::-webkit-scrollbar {
+  width: 0px;
+}
 </style>