调整页面

src/views/caller/caller.vue

@@ -144,12 +144,12 @@
             width="120"
             label="车牌号"
           />
-          <el-table-column
+          <!-- <el-table-column
             align="center"
             prop="peerNum"
             width="100"
             label="陪同人数"
-          />
+          /> -->
           <el-table-column
             align="center"
             show-overflow-tooltip

src/views/dataOverview/dataOverview.vue

@@ -86,12 +86,20 @@
         <div class="system_title">
           <h4>学院新生报到情况</h4>
         </div>
+        <div class="total">
+          <span>总数 : </span
+          ><span style="font-size: 20px">{{ studentTotal }}</span>
+        </div>
         <div id="echarts_register"></div>
       </div>
       <div class="echarts_traffic">
         <div class="system_title">
           <h4>交通方式情况</h4>
         </div>
+        <div class="total">
+          <span>总数 : </span
+          ><span style="font-size: 20px">{{ wayTotal }}</span>
+        </div>
         <div id="echarts_traffic"></div>
       </div>
     </div>
@@ -120,6 +128,7 @@ import {
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { dayjs } from "element-plus";
+import { useTransition } from "@vueuse/core";
 import lodash from "lodash";
 import * as echarts from "echarts";
 import { https } from "@/utils/request"; // 绝对路径
@@ -192,9 +201,11 @@ const carSchoolChange = (title) => {
 
 // 学院新生报到情况
 let registerEcharts = null;
+const studentTotal = ref();
 
 // 学院新生报到情况
 let trafficEcharts = null;
+const wayTotal = ref();
 
 // 性别比例
 let genderEcharts = null;
@@ -254,26 +265,6 @@ const callerClick = () => {
   });
 };
 
-// 表格斑马纹颜色修改
-const tableRowClassName = ({ row, rowIndex }) => {
-  if (rowIndex % 2 === 0) {
-    return "even";
-  } else if (rowIndex % 2 !== 0) {
-    return "odd";
-  }
-  return "";
-};
-// 每页显示条数
-const handleSizeChange = (value) => {
-  console.log(value, "每页显示条数");
-  pageSize.value = value;
-};
-// 分页
-const handleCurrentChange = (value) => {
-  // console.log(value);
-  currentPage.value = value;
-};
-
 const register = async () => {
   let dom = document.getElementById("echarts_register");
   registerEcharts = echarts.init(dom);
@@ -283,19 +274,26 @@ const register = async () => {
   );
   console.log(res, "新生报到情况");
   if (res.code == 200) {
+    if (res.data.length) {
+      studentTotal.value = res.data[res.data.length - 1].count;
+    }
     // const data = genData(20);
     const data = {
       legendData: [],
       seriesData: [],
     };
     let arr = res.data.slice(0, -1);
+    let manTotal = 0;
     data.seriesData = arr.map((i) => {
+      manTotal += i.count;
       data.legendData.push(i.collegeName);
       return {
         name: i.collegeName,
         value: i.count,
       };
     });
+    console.log(data.seriesData, "新生报到整合数据");
+
     const option = {
       tooltip: {
         trigger: "item",
@@ -308,15 +306,45 @@ const register = async () => {
         top: 10,
         bottom: 30,
         data: data.legendData,
+        formatter: function (name) {
+          return name;
+        },
       },
+
       series: [
         {
           name: "报到人数",
           type: "pie",
-          radius: "60%",
-          center: ["35%", "50%"],
+          // radius: ["50%", "70%"],
+          radius: "70%",
+          center: ["40%", "50%"],
           data: data.seriesData,
+          label: {
+            // alignTo: "edge",
+            alignTo: "none",
+            formatter: "{name|{b}}\n{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,
@@ -348,7 +376,9 @@ const traffic = async () => {
   console.log(res, "学生交通方式");
   if (res.code == 200) {
     let data = [];
+    wayTotal.value = 0;
     data = res.data.map((i) => {
+      wayTotal.value += i.count;
       return { value: i.count, name: i.trafficMethod };
     });
     option = {
@@ -364,20 +394,21 @@ const traffic = async () => {
         {
           name: "交通方式",
           type: "pie",
+          // radius: "70%",
           radius: ["50%", "70%"],
-          avoidLabelOverlap: false,
-          padAngle: 5,
+          // avoidLabelOverlap: false,// 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
+          padAngle: 4,
           itemStyle: {
-            borderRadius: 10,
+            borderRadius: 4,
           },
           label: {
             show: true,
-            // position: "center",
-            // alignTo: "edge",
-            formatter: "{name|{b}}\n{time|{c} ({d}%)}",
-            // minMargin: 5,
-            // edgeDistance: 10,
-            lineHeight: 18,
+            position: "outside",
+            // alignTo: "none",
+            formatter: "{name|{b}} {time|{c} ({d}%)}",
+            minMargin: 5,
+            edgeDistance: 0,
+            lineHeight: 15,
             rich: {
               time: {
                 // fontSize: 10,
@@ -397,7 +428,7 @@ const traffic = async () => {
             },
           },
           labelLine: {
-            show: false,
+            show: true,
           },
           data: data,
         },
@@ -510,6 +541,7 @@ const gender = async () => {
     });
   }
 };
+
 // 学生住宿情况
 const studentStay = async () => {
   let res = await https.get(
@@ -663,6 +695,12 @@ onBeforeUnmount(() => {
         height: 300px;
         margin: 0 auto;
       }
+      .total {
+        position: relative;
+        top: 0;
+        left: 50px;
+        z-index: 999;
+      }
     }
     .echarts_traffic {
       flex: 1;
@@ -672,6 +710,12 @@ onBeforeUnmount(() => {
         height: 300px;
         margin: 0 auto;
       }
+      .total {
+        position: relative;
+        top: 0;
+        left: 50px;
+        z-index: 999;
+      }
     }
   }
 

src/views/studentInfo/studentInfo.vue

@@ -69,6 +69,17 @@
             </el-select>
           </div>
           <div class="condition">
+            <span>填报状态 :</span>
+            <el-select
+              clearable
+              v-model="searchInput.fillStatus"
+              placeholder="请选择填报状态"
+            >
+              <el-option label="已填报" value="已填报" />
+              <el-option label="未填报" value="未填报" />
+            </el-select>
+          </div>
+          <div class="condition">
             <span>姓名 :</span>
             <el-input
               clearable
@@ -1362,6 +1373,7 @@ const searchInput = reactive({
   major: "",
   classstr: "",
   trafficMethod: "",
+  fillStatus:"",
   name: "",
 }); // 搜索按钮数据
 
@@ -1955,6 +1967,7 @@ const getList = async () => {
     classstrId: searchInput.classstr,
     trafficMethod: searchInput.trafficMethod,
     name: searchInput.name,
+    fillStatus:searchInput.fillStatus
   };
   console.log(params);
 
@@ -1992,6 +2005,7 @@ const resetBtn = lodash.debounce(async () => {
   classstrData.value = null;
   searchInput.trafficMethod = null;
   searchInput.name = null;
+  searchInput.fillStatus=null
   getList();
 }, 300);
 
@@ -2150,7 +2164,11 @@ const updateS = async (row) => {
     majorList(resData.collegeId).then(() => {
       ruleForm.major = `${resData.major},${resData.majorId}`;
       classstrList(resData.majorId).then(() => {
-        ruleForm.classstr = `${resData.classstr},${resData.classstrId}`;
+        if(resData.classstr){
+          ruleForm.classstr = `${resData.classstr},${resData.classstrId}`;
+        }else{
+          ruleForm.classstr = null
+        }
       });
     });
 
@@ -2202,7 +2220,9 @@ const updateS = async (row) => {
       ? resData.arrvieDate.split(" ")[0]
       : "";
 
-    ruleForm.arriveTime =resData.arriveTime? `${resData.arriveTime},${resData.arriveTimeId}`:'';
+    ruleForm.arriveTime = resData.arriveTime
+      ? `${resData.arriveTime},${resData.arriveTimeId}`
+      : "";
 
     // 家庭成员
     ruleForm.familys = resData.fvs;
@@ -2606,6 +2626,7 @@ const buildExportbtn = async () => {
     classstrId: searchInput.classstr,
     trafficMethod: searchInput.trafficMethod,
     name: searchInput.name,
+    fillStatus:searchInput.fillStatus
   };
   let res = await https.getBlob(
     "/welcome/api/welcomeStudent/welcomeStudentExport",