数据总览 自适应

src/views/dataOverview/dataOverview.vue

@@ -84,15 +84,23 @@
     <div class="echarts">
       <div class="echarts_register">
         <div class="system_title">
-          <h4>学院新生报到情况</h4>
+          <h4>学院新生报到统计</h4>
         </div>
         <div
           class="total"
           style="width: 88%; display: flex; justify-content: space-between"
         >
           <span>
-            <span>总数 : </span>
-            <span style="font-size: 20px">{{ studentTotal }} / {{ studentTotalP }}%</span>
+            <span
+              >现场报到人数 :
+              <span style="font-size: 20px; margin-right: 20px">{{
+                studentTotal
+              }}</span></span
+            >
+            <span
+              >现场报到率 :
+              <span style="font-size: 20px">{{ studentTotalP }}%</span></span
+            >
           </span>
           <el-select
             @change="collegeChange"
@@ -113,7 +121,53 @@
       </div>
       <div class="echarts_traffic">
         <div class="system_title">
-          <h4>交通方式情况</h4>
+          <h4>新生报到层次统计</h4>
+        </div>
+        <div
+          class="total"
+          style="width: 88%; display: flex; justify-content: space-between"
+        >
+          <span>
+            <span
+              >本科现场报到率 :
+              <span style="font-size: 20px; margin-right: 20px"
+                >{{ levelRate[2] }}%</span
+              ></span
+            >
+            <span
+              >专升本现场报到率 :
+              <span style="font-size: 20px; margin-right: 20px"
+                >{{ levelRate[1] }}%</span
+              ></span
+            >
+            <span
+              >专科现场报到率 :
+              <span style="font-size: 20px">{{ levelRate[0] }}%</span></span
+            >
+          </span>
+          <!-- <el-select
+            @change="collegeChange"
+            v-model="searchInput.college"
+            placeholder="请选择院系"
+            clearable
+            style="width: 250px"
+          >
+            <el-option
+              v-for="i in collegeData"
+              :key="i.id"
+              :label="i.name"
+              :value="i.id"
+            />
+          </el-select> -->
+        </div>
+        <div id="echarts_levelRegister"></div>
+      </div>
+    </div>
+
+    <div class="echarts">
+      <div class="echarts_traffic">
+        <div class="system_title">
+          <h4>新生报到交通方式统计</h4>
         </div>
         <div class="total">
           <span>总数 : </span
@@ -121,14 +175,15 @@
         </div>
         <div id="echarts_traffic"></div>
       </div>
-    </div>
-
-    <!-- 性别比例 -->
-    <div class="system_title">
-      <h4>学院新生性别比例</h4>
-    </div>
-    <div class="gender">
-      <div id="gender" ref="genderRef"></div>
+      <div class="echarts_register">
+        <!-- 性别比例 -->
+        <div class="system_title">
+          <h4>学院新生性别统计</h4>
+        </div>
+        <div class="gender">
+          <div id="gender" ref="genderRef"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -224,7 +279,7 @@ const searchInput = reactive({
   college: "",
 });
 const studentTotal = ref();
-const studentTotalP=ref()
+const studentTotalP = ref();
 // 学院
 const collegeData = ref([]);
 const collegeList = async () => {
@@ -247,6 +302,10 @@ const collegeList = async () => {
 let trafficEcharts = null;
 const wayTotal = ref();
 
+// 新生报到层次统计
+let levelRegisterEcharts = null;
+const levelRate = ref([]);
+
 // 性别比例
 let genderEcharts = null;
 
@@ -348,7 +407,7 @@ const register = async () => {
       legend: {
         type: "scroll",
         orient: "vertical",
-        right: "10%",
+        left: "75%",
         top: 10,
         bottom: 30,
         data: data.legendData,
@@ -410,9 +469,178 @@ const register = async () => {
     });
   }
 };
-const collegeChange=()=>{
-  register()
-} 
+const collegeChange = () => {
+  register();
+};
+
+// 新生报到层次统计
+const levelRegister = async () => {
+  let dom = document.getElementById("echarts_levelRegister");
+  levelRegisterEcharts = echarts.init(dom);
+  let res = await https.get(
+    "/welcome/api/welcomeStudent/levelRegister",
+    "params"
+  );
+  console.log(res, "新生报到层次统计");
+  if (res.code == 200) {
+    const data = {
+      name: [],
+      count: [],
+      totalCount: [],
+    };
+    levelRate.value = [];
+    let arr = res.data.slice(0, -1).reverse();
+    let manTotal = 0;
+    arr.forEach((i) => {
+      manTotal += i.count;
+      data.name.push(i.name);
+      data.count.push(i.count);
+      data.totalCount.push(i.totalCount);
+      levelRate.value.push(i.rate);
+    });
+    console.log(data, levelRate.value, "新生报到整合数据");
+    const option = {
+      // title: {
+      //   text: `本科现场报到率${levelRate.value[0]}%、专升本现场报到率、专科现场报到率`,
+      // },
+      legend: {
+        right: "5%",
+        padding: [
+          15, // 上
+          10, // 右
+          5, // 下
+          10, // 左
+        ],
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+      },
+      grid: {
+        left: "5%",
+        right: "5%",
+        top: "10%",
+        bottom: "5%",
+        containLabel: true,
+      },
+      xAxis: {
+        name: "人",
+        type: "value",
+        boundaryGap: [0, 0.01],
+      },
+      yAxis: {
+        type: "category",
+        data: data.name,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: "总人数",
+          type: "bar",
+          data: data.totalCount,
+          label: {
+            // 关键：把 label 打开
+            show: true,
+            position: "center", // 'inside' 在柱子内部，'top' 在柱子顶端
+            formatter: "{c}", // {c} 就是当前柱子的数值
+            position: "right", // 关键：把数值放在柱子右边
+          },
+        },
+        {
+          name: "已报到人数",
+          type: "bar",
+          data: data.count,
+          label: {
+            // 关键：把 label 打开
+            show: true,
+            position: "center", // 'inside' 在柱子内部，'top' 在柱子顶端
+            formatter: "{c}", // {c} 就是当前柱子的数值
+            position: "right", // 关键：把数值放在柱子右边
+          },
+        },
+      ],
+    };
+    // const option = {
+    //   tooltip: {
+    //     trigger: "item",
+    //     formatter: "{a} <br/>{b} : {c}人 ({d}%)",
+    //   },
+    //   legend: {
+    //     type: "scroll",
+    //     orient: "vertical",
+    //     left: "75%",
+    //     top: 10,
+    //     bottom: 30,
+    //     data: data.legendData,
+    //     formatter: function (name) {
+    //       return name;
+    //     },
+    //   },
+
+    //   series: [
+    //     {
+    //       name: "报到人数",
+    //       type: "pie",
+    //       radius: ["50%", "68%"],
+    //       // radius: "70%",
+    //       center: ["40%", "60%"],
+    //       padAngle: 4,
+    //       itemStyle: {
+    //         borderRadius: 4,
+    //       },
+    //       data: data.seriesData,
+    //       label: {
+    //         // alignTo: "edge",
+    //         alignTo: "none",
+    //         formatter: "{name|{b}} {value|{c} ({d}%)}",
+    //         position: "outside",
+    //         minMargin: 5,
+    //         // edgeDistance: 100,
+    //         // edgeDistance: "25%",
+    //         lineHeight: 20,
+    //         rich: {
+    //           value: {
+    //             fontSize: 12,
+    //             color: "#000",
+    //           },
+    //           percent: {
+    //             fontSize: 10,
+    //             color: "#999",
+    //           },
+    //         },
+    //       },
+    //       emphasis: {
+    //         label: {
+    //           show: true,
+    //           fontSize: 20,
+    //           fontWeight: "bold",
+    //         },
+    //         itemStyle: {
+    //           shadowBlur: 10,
+    //           shadowOffsetX: 0,
+    //           shadowColor: "rgba(0, 0, 0, 0.5)",
+    //         },
+    //       },
+    //     },
+    //   ],
+    // };
+    levelRegisterEcharts.setOption(option);
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.message,
+      center: true,
+    });
+  }
+};
 
 const traffic = async () => {
   var chartDom = document.getElementById("echarts_traffic");
@@ -435,10 +663,17 @@ const traffic = async () => {
       tooltip: {
         trigger: "item",
       },
-      // legend: {
-      //   top: "5%",
-      //   left: "center",
-      // },
+      legend: {
+        type: "scroll",
+        orient: "vertical",
+        left: "75%",
+        top: 10,
+        bottom: 30,
+        data: data.legendData,
+        formatter: function (name) {
+          return name;
+        },
+      },
 
       series: [
         {
@@ -446,6 +681,7 @@ const traffic = async () => {
           type: "pie",
           // radius: "70%",
           radius: ["50%", "70%"],
+          center: ["40%", "50%"],
           // avoidLabelOverlap: false,// 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
           padAngle: 4,
           itemStyle: {
@@ -615,6 +851,9 @@ const updateChartSize = () => {
   if (registerEcharts) {
     registerEcharts.resize();
   }
+  if (levelRegisterEcharts) {
+    levelRegisterEcharts.resize();
+  }
   if (trafficEcharts) {
     trafficEcharts.resize();
   }
@@ -625,6 +864,7 @@ const updateChartSize = () => {
 onMounted(() => {
   studentOverview();
   register();
+  levelRegister();
   traffic();
   gender();
   studentStay();
@@ -646,6 +886,9 @@ onBeforeUnmount(() => {
   if (registerEcharts) {
     registerEcharts.dispose();
   }
+  if (levelRegisterEcharts) {
+    levelRegisterEcharts.dispose();
+  }
   if (trafficEcharts) {
     trafficEcharts.dispose();
   }
@@ -687,7 +930,7 @@ onBeforeUnmount(() => {
     opacity: 1;
     border-radius: 0px 12px 0px 0px;
     background: rgb(243, 249, 255);
-    margin: 15px 30px;
+    margin: 15px 20px;
     display: flex;
     align-items: center;
     // justify-content: center;
@@ -708,8 +951,11 @@ onBeforeUnmount(() => {
     list-style: none;
     padding: 0;
     li {
-      flex: 1;
-      margin: 0 10px;
+      // max-width: 385px;
+      min-width: 345px;
+      width: 24%;
+      // flex: 1;
+      // margin: 0 10px;
       height: 133px;
       border: 1px solid rgba(143, 143, 143, 1);
       border-radius: 0.98px;
@@ -739,10 +985,11 @@ onBeforeUnmount(() => {
   // 学院新生报到情况
   .echarts {
     display: flex;
+    // justify-content: space-around;
     .echarts_register {
-      flex: 1;
+      width: 50%;
       #echarts_register {
-        width: calc(100% - 60px);
+        width: calc(100% - 20px);
         height: 300px;
         margin: 0 auto;
       }
@@ -754,10 +1001,10 @@ onBeforeUnmount(() => {
       }
     }
     .echarts_traffic {
-      flex: 1;
+      width: 50%;
 
       #echarts_traffic {
-        width: calc(100% - 60px);
+        width: calc(100% - 0px);
         height: 300px;
         margin: 0 auto;
       }
@@ -767,6 +1014,11 @@ onBeforeUnmount(() => {
         left: 50px;
         z-index: 999;
       }
+      #echarts_levelRegister {
+        width: calc(100% - 0px);
+        height: 350px;
+        margin: 0 auto;
+      }
     }
   }
 
@@ -889,5 +1141,63 @@ onBeforeUnmount(() => {
       }
     }
   }
+  @media (max-width: 1050px) {
+    .dispose {
+      flex-wrap: wrap;
+      li {
+        width: 98%;
+        margin: 10px 0 0;
+        .el-icon {
+        }
+        .dispose_content {
+        }
+        .yuyue {
+        }
+      }
+    }
+  }
+  @media (min-width: 1051px) and (max-width: 1399px) {
+    .dispose {
+      flex-wrap: wrap;
+      li {
+        width: 49%;
+        margin: 10px 0 0;
+        .el-icon {
+        }
+        .dispose_content {
+        }
+        .yuyue {
+        }
+      }
+    }
+  }
+  @media (min-width: 1400px) and (max-width: 1750px) {
+    // 处置情况
+    .dispose {
+      flex-wrap: wrap;
+      li {
+        width: 32%;
+        margin: 10px 0 0;
+        .el-icon {
+        }
+        .dispose_content {
+        }
+        .yuyue {
+        }
+      }
+    }
+  }
+
+  @media(max-width: 1650px){
+    .echarts {
+      flex-wrap: wrap;
+      .echarts_register {
+        width: 98%;
+      }
+      .echarts_traffic {
+        width: 98%;
+      }
+    }
+  }
 }
 </style>

src/views/studentInfo/studentInfo.vue

@@ -286,7 +286,7 @@
             width="160"
             align="center"
             prop="isRegistered"
-            label="现在报到"
+            label="现场报到"
           >
             <template #default="{ row }">
               <span v-if="row.isRegistered == 1" style="color: #2279ec">已报到</span>