<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <div class="cameratxt">
        数据总览
        <el-select
          @change="collegeChange"
          v-model="searchInput.college"
          placeholder="请选择院系"
          clearable
          style="width: 250px; margin-left: 20px"
        >
          <el-option
            v-for="i in collegeData"
            :key="i.id"
            :label="i.name"
            :value="i.id"
          />
        </el-select>
        <el-select
          @change="yearChange"
          clearable
          v-model="searchInput.yearId"
          placeholder="请选择年份"
          style="width: 250px; margin-left: 20px"
        >
          <el-option
            v-for="i in yearData"
            :key="i.id"
            :label="i.name"
            :value="i.id"
          />
        </el-select>
      </div>
    </div>
    <!-- 处置情况 -->
    <!-- <div class="system_title">
      <h4>处置情况</h4>
    </div> -->
    <ul class="dispose" style="margin-top: 20px">
      <li v-for="i in disposeList" :key="i.icon">
        <SvgIcon :name="i.icon" color="#fff" size="55"></SvgIcon>
        <div class="dispose_content">
          <p style="color: rgba(128, 128, 128, 1); font-size: 18px">
            {{ i.title }}
          </p>

          <p style="font-weight: 600; font-size: 30px">
            <span>{{ i.num }}</span>
            <span v-if="i.numTotal">&nbsp;/&nbsp;</span>
            <span v-if="i.numTotal">{{ i.numTotal }}</span>
          </p>
        </div>
      </li>
      <li v-if="carSchool == 'huang'">
        <SvgIcon name="carNum" color="#fff" size="55"></SvgIcon>
        <div class="dispose_content">
          <p
            class="yuyue"
            style="color: rgba(128, 128, 128, 1); font-size: 18px"
          >
            <span @click="carSchoolChange('mo')" style="margin-right: 20px"
              >墨轩湖</span
            >
            <span @click="carSchoolChange('huang')" class="active">黄家湖</span>
          </p>
          <p style="color: rgba(128, 128, 128, 1); font-size: 18px">
            今日约车牌数 / 剩余车位数
          </p>
          <p style="font-weight: 600; font-size: 30px">
            <span
              @click="callerClick"
              style="color: rgba(0, 97, 255, 1); cursor: pointer"
              >{{ carArr.huang.num }}</span
            >
            <span>&nbsp;/&nbsp;</span>
            <span>{{ carArr.huang.numTotal }}</span>
          </p>
        </div>
      </li>
      <li v-if="carSchool == 'mo'">
        <SvgIcon name="carNum" color="#fff" size="55"></SvgIcon>
        <div class="dispose_content">
          <p
            class="yuyue"
            style="color: rgba(128, 128, 128, 1); font-size: 18px"
          >
            <span
              class="active"
              @click="carSchoolChange('mo')"
              style="margin-right: 20px"
              >墨轩湖</span
            >
            <span @click="carSchoolChange('huang')">黄家湖</span>
          </p>
          <p style="color: rgba(128, 128, 128, 1); font-size: 18px">
            今日约车牌数 / 剩余车位数
          </p>
          <p style="font-weight: 600; font-size: 30px">
            <span
              @click="callerClick"
              style="color: rgba(0, 97, 255, 1); cursor: pointer"
              >{{ carArr.mo.num }}</span
            >
            <span>&nbsp;/&nbsp;</span>
            <span>{{ carArr.mo.numTotal }}</span>
          </p>
        </div>
      </li>
    </ul>

    <!-- 学院新生报到 -->
    <div class="echarts">
      <div class="echarts_register">
        <div class="system_title">
          <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">{{
                studentTotal
              }}</span></span
            >
            <span
              >现场报到率 :
              <span style="font-size: 20px">{{ studentTotalP }}%</span></span
            >
          </span>
        </div>
        <div id="echarts_register"></div>
      </div>
      <div class="echarts_traffic">
        <div class="system_title">
          <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[0] }}%</span
              ></span
            >
            <span
              >专升本现场报到率 :
              <span style="font-size: 20px; margin-right: 20px"
                >{{ levelRate[1] }}%</span
              ></span
            >
            <span
              >专科现场报到率 :
              <span style="font-size: 20px">{{ levelRate[2] }}%</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
          ><span style="font-size: 20px">{{ wayTotal }}</span>
        </div>
        <div id="echarts_traffic"></div>
      </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>

<script setup>
import {
  ref,
  watch,
  reactive,
  nextTick,
  onMounted,
  onBeforeMount,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
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"; // 绝对路径

import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";
import { right } from "@popperjs/core";

const api = ref("");
const router = useRouter();
const store = useCounterStore();

const tableData = reactive({
  list: [],
});
const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(0); // 当前总数

// 为避免解构时失去响应性
const { name, age, isCollapse, realAge, collegeRole } = storeToRefs(store);

// 处置情况
const disposeList = ref([
  {
    icon: "luqu",
    num: 1,
    title: "录取人数",
  },
  {
    icon: "yubao",
    num: 1,
    title: "预报到人数/缴费率",
  },
  {
    icon: "jiaofei",
    num: 1,
    title: "已缴费人数",
  },
  {
    icon: "ruzhu",
    num: "1 / 10",
    title: "入住寝室数/总数",
  },
  {
    icon: "yuyue",
    num: "2 / 12",
    title: "今日预约车牌数/总数",
  },
]);
const carSchool = ref("mo");
const carArr = reactive({
  huang: {},
  mo: {},
});
const carSchoolChange = (title) => {
  carSchool.value = title;
  console.log(disposeList.value);

  disposeList.value.forEach((i) => {
    if (i.icon == "carNum") {
      if (carSchool.value == "huang") {
        i = carArr.huang;
      } else if (carSchool.value == "mo") {
        i = carArr.mo;
      }
    }
  });
};

// 学院新生报到情况
let registerEcharts = null;
const searchInput = reactive({
  college: "",
  yearId:"",
});
const studentTotal = ref();
const studentTotalP = ref();
// 学院
const collegeData = ref([]);
const collegeList = async () => {
  // collegeData.value = collegeRole.value;
  let res = await https.get("/welcome/api/welcomeOrg/getColleges", "params");
  console.log(res, "学院数据");
  if (res.code == 200) {
    collegeData.value = res.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

const yearData=ref([])
const yearList = async () => {
  let res = await https.get("/welcome/api/systemSetting/yearDatas", "params");
  console.log(res, "年份数据");
  if (res.code == 200) {
    yearData.value = res.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

// 学院新生报到情况
let trafficEcharts = null;
const wayTotal = ref();

// 新生报到层次统计
let levelRegisterEcharts = null;
const levelRate = ref([]);

// 性别比例
let genderEcharts = null;

// 处置情况
const studentOverview = async () => {
  let params = {
    // accountId: sessionStorage.getItem("accountId"),
    collegeId: searchInput.college,
    yearId:searchInput.yearId
  };
  let res = await https.get(
    "/welcome/api/welcomeStudent/studentOverview",
    "params",
    params,
  );
  console.log(res, "处置情况");
  if (res.code == 200) {
    carArr.huang = {
      icon: "carNum",
      num: res.data.hvisitorTotal,
      numTotal: res.data.hcarTotal,
      title: "今日约车牌数 / 剩余车位数",
    };
    carArr.mo = {
      icon: "carNum",
      num: res.data.mvisitorTotal,
      numTotal: res.data.mcarTotal,
      title: "今日约车牌数 / 剩余车位数",
    };

    disposeList.value = [
      {
        icon: "luqu",
        num: res.data.enrollmentTotal,
        title: "录取人数",
      },
      {
        icon: "jiaofei",
        num: res.data.payCount,
        numTotal: `${res.data.payRate}%`,
        title: "已缴费人数 / 缴费率",
      },
      {
        icon: "ruzhu",
        num: res.data.checkInBedTotal,
        numTotal: `${res.data.registrationRate}%`,
        title: "已入住床位数 / 入住率",
      },
    ];
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

// 跳转到访客信息管理
const callerClick = () => {
  router.push({
    path: `/caller`,
  });
};

const register = async () => {
  let dom = document.getElementById("echarts_register");
  registerEcharts = echarts.init(dom);
  let params = {
    collegeId: searchInput.college,
    yearId:searchInput.yearId
    // accountId: sessionStorage.getItem("accountId"),
  };
  let res = await https.get(
    "/welcome/api/welcomeStudent/studentRegister",
    "params",
    params,
  );
  console.log(res, "新生报到情况");
  if (res.code == 200) {
    if (res.data.length) {
      studentTotal.value = res.data[res.data.length - 1].count;
      studentTotalP.value = res.data[res.data.length - 1].rate;
    }
    // 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.name);
      return {
        name: i.name,
        value: i.count,
      };
    });
    console.log(data.seriesData, "新生报到整合数据");

    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%", "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,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    registerEcharts.setOption(option);
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

const collegeChange = () => {
  studentOverview();
  register();
  levelRegister();
  traffic();
  gender();
};
const yearChange = () => {
  studentOverview();
  register();
  levelRegister();
  traffic();
  gender();
};

// 新生报到层次统计
const levelRegister = async () => {
  let dom = document.getElementById("echarts_levelRegister");
  levelRegisterEcharts = echarts.init(dom);
  let params = {
    // accountId: sessionStorage.getItem("accountId"),
    collegeId: searchInput.college,
    yearId:searchInput.yearId
  };
  let res = await https.get(
    "/welcome/api/welcomeStudent/levelRegister",
    "params",
    params,
  );
  console.log(res, "新生报到层次统计");
  if (res.code == 200) {
    const data = {
      name: [],
      count: [],
      totalCount: [],
    };
    levelRate.value = [];
    // let arr = res.data.slice(0, -1).reverse();
    let sortedData = res.data.slice(0, -1);

    // 定义自定义排序顺序
    const customOrder = ["本科", "专升本", "专科"];

    // 对数据进行排序
    const arr = sortedData.sort((a, b) => {
      return customOrder.indexOf(a.name) - customOrder.indexOf(b.name);
    });
    console.log(sortedData, "整合数据");

    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");
  trafficEcharts = echarts.init(chartDom);
  var option;
  let params = {
    // accountId: sessionStorage.getItem("accountId"),
    collegeId: searchInput.college,
    yearId:searchInput.yearId
  };
  let res = await https.get(
    "/welcome/api/welcomeStudent/studentTraffic",
    "params",
    params,
  );
  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 = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        left: "75%",
        top: 10,
        bottom: 30,
        data: data.legendData,
        formatter: function (name) {
          return name;
        },
      },

      series: [
        {
          name: "交通方式",
          type: "pie",
          // radius: "70%",
          radius: ["50%", "70%"],
          center: ["40%", "50%"],
          // avoidLabelOverlap: false,// 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
          padAngle: 4,
          itemStyle: {
            borderRadius: 4,
          },
          label: {
            show: true,
            position: "outside",
            // alignTo: "none",
            formatter: "{name|{b}} {time|{c} ({d}%)}",
            minMargin: 5,
            edgeDistance: 0,
            lineHeight: 15,
            rich: {
              time: {
                // fontSize: 10,
                color: "#000",
              },
              percent: {
                // fontSize: 10,
                color: "#999",
              },
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: true,
          },
          data: data,
        },
      ],
    };

    trafficEcharts.setOption(option);
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};
const gender = async () => {
  var chartDom = document.getElementById("gender");
  genderEcharts = echarts.init(chartDom);
  let params = {
    // accountId: sessionStorage.getItem("accountId"),
    collegeId: searchInput.college,
    yearId:searchInput.yearId
  };
  let res = await https.get(
    "/welcome/api/welcomeStudent/studentSexRatio",
    "params",
    params,
  );
  console.log(res, "学生性别比例");
  if (res.code == 200) {
    let data = [];
    res.data.slice(0, -1).forEach((i) => {
      if (!i.girlCount) {
        i.girlCount = 0;
      } else if (!i.manCount) {
        i.manCount = 0;
      }
      if (i) {
        data.push(i);
      }
    });
    console.log(data);

    const option = {
      legend: {
        right: "5%",
        padding: [
          10, // 上
          10, // 右
          5, // 下
          10, // 左
        ],
      },
      tooltip: {},
      grid: {
        left: "5%",
        right: "5%",
        top: "18%",
        bottom: "2%",
        containLabel: true,
      },
      dataset: {
        dimensions: ["collegeName", "manCount", "girlCount"],
        source: data,
      },
      xAxis: {
        type: "category",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0, // 0 = 一个都不省略
          // rotate: 45
        },
      },
      yAxis: {
        name: "人",
        // nameLocation:""
      },
      series: [
        {
          type: "bar",
          name: "男",
          barMinWidth: 20,
          barMaxWidth: 30,
          label: {
            show: true,
            position: "top",
          },
          itemStyle: {
            color: "rgba(0, 97, 255, 1)",
          },
        },
        {
          type: "bar",
          name: "女",
          barMinWidth: 20,
          barMaxWidth: 30,
          label: {
            show: true,
            position: "top",
          },
          itemStyle: {
            color: "rgba(0, 186, 173, 1)",
          },
        },
      ],
    };
    genderEcharts.setOption(option);
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

// 学生住宿情况
const studentStay = async () => {
  let params = {
    // accountId: sessionStorage.getItem("accountId"),
    collegeId: searchInput.college,
    yearId:searchInput.yearId
  };
  let res = await https.get(
    "/welcome/api/welcomeStudent/studentStay",
    "params",
    params,
  );
  console.log(res, "学生住宿情况");
  if (res.code == 200) {
    tableData.list = res.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.message,
      center: true,
    });
  }
};

const updateChartSize = () => {
  if (registerEcharts) {
    registerEcharts.resize();
  }
  if (levelRegisterEcharts) {
    levelRegisterEcharts.resize();
  }
  if (trafficEcharts) {
    trafficEcharts.resize();
  }
  if (genderEcharts) {
    genderEcharts.resize();
  }
};
onMounted(() => {
  studentOverview();
  register();
  levelRegister();
  traffic();
  gender();
  studentStay();
  collegeList();
  yearList()
  window.addEventListener("resize", updateChartSize);
});

onBeforeMount(() => {
  // studentOverview();
  // studentRegister();
  // studentTraffic();
  // studentSexRatio();
  // studentStay();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
onBeforeUnmount(() => {
  if (registerEcharts) {
    registerEcharts.dispose();
  }
  if (levelRegisterEcharts) {
    levelRegisterEcharts.dispose();
  }
  if (trafficEcharts) {
    trafficEcharts.dispose();
  }
  if (genderEcharts) {
    genderEcharts.dispose();
  }
  window.removeEventListener("resize", updateChartSize);
});
</script>

<style scoped lang="scss">
.content-box {
  // min-width: calc(100% - 40px);
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .left {
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;

    .cameratxt {
      margin-right: 15px;
      height: 60px;
      line-height: 60px;
    }
  }
  .system_title {
    // width: 100%;
    height: 45px;
    opacity: 1;
    border-radius: 0px 12px 0px 0px;
    background: rgb(243, 249, 255);
    margin: 15px 20px;
    display: flex;
    align-items: center;
    // justify-content: center;
    h4 {
      font-size: 15px;
      padding: 0 5px 0 20px;
    }
    .wain {
      font-size: 13px;
      color: rgba(212, 48, 48, 1);
    }
  }
  // 处置情况
  .dispose {
    margin: 0 30px;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    li {
      // 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;
      background: rgba(250, 252, 255, 1);
      display: flex;
      align-items: center;
      // justify-content: space-around;
      .el-icon {
        margin: 0 30px;
      }
      .dispose_content {
        p {
          margin: 15px 0;
        }
      }
      .yuyue {
        span {
          cursor: pointer;
        }
        .active {
          color: rgb(248, 130, 11);
        }
      }
    }
  }

  // 学院新生报到情况
  .echarts {
    display: flex;
    // justify-content: space-around;
    .echarts_register {
      width: 50%;
      #echarts_register {
        width: calc(100% - 20px);
        height: 300px;
        margin: 0 auto;
      }
      .total {
        display: inline-block;
        position: relative;
        top: 0;
        left: 50px;
        z-index: 999;
      }
    }
    .echarts_traffic {
      width: 50%;

      #echarts_traffic {
        width: calc(100% - 0px);
        height: 300px;
        margin: 0 auto;
      }
      .total {
        display: inline-block;
        position: relative;
        top: 0;
        left: 50px;
        z-index: 999;
      }
      #echarts_levelRegister {
        width: calc(100% - 0px);
        height: 350px;
        margin: 0 auto;
      }
    }
  }

  .gender {
    width: calc(100% - 60px);
    height: 300px;
    margin: 0 auto 10px;
    #gender {
      width: 100%;
      height: 300px;
    }
  }

  .footer {
    width: 100%;
    margin-bottom: 25px;
    .el-table--fit {
      width: calc(100% - 60px);
      margin: 0 auto;
      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 15px;
        color: #000;
        .cell {
          color: #000;
        }
      }
      :deep(.el-table__row) {
        height: 50px;
        font-size: 15px;
        color: #000;
      }
      :deep(.el-table__row td) {
        padding: 0;
        border: 0;
      }

      .el-button--primary {
        margin-left: 5px;
      }
      :deep(.el-table__body .even) {
        background-color: #fff;
      }
      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }
      :deep(.options) {
        display: flex;
        justify-content: center;
        align-items: center;
        .edit {
          margin: 0 15px 0 0;
          color: rgba(0, 186, 173, 1);
          cursor: pointer;
        }
        .delete {
          color: rgba(212, 48, 48, 1);
          cursor: pointer;
        }
      }
    }

    .pageSize {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 30px;
      height: 60px;

      span {
        color: #000;
      }

      .el-pagination {
        // width: 1600px;
        :deep(.el-pagination__total) {
          color: #000;
        }

        :deep(.el-pagination__goto) {
          color: #000;
        }

        :deep(.el-pagination__classifier) {
          color: #000;
        }

        :deep(.el-input__wrapper) {
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          box-shadow: none;
        }

        :deep(.el-pager li) {
          margin: 0 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        :deep(.el-pager li.is-active) {
          // background-color: rgba(0, 97, 255, 0.8);
          border: 1px solid rgba(0, 97, 255, 1);
          color: rgba(0, 97, 255, 1);
        }

        :deep(.btn-prev) {
          margin-right: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        :deep(.btn-next) {
          margin-left: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }
      }
    }
  }
  @media (max-width: 1050px) {
    .dispose {
      flex-wrap: wrap;
      li {
        width: 98%;
        margin: 10px 0 0;
      }
    }
  }
  @media (min-width: 1051px) and (max-width: 1399px) {
    .dispose {
      flex-wrap: wrap;
      li {
        width: 49%;
        margin: 10px 0 0;
      }
    }
  }
  @media (min-width: 1400px) and (max-width: 1750px) {
    // 处置情况
    .dispose {
      flex-wrap: wrap;
      li {
        width: 32%;
        margin: 10px 0 0;
      }
    }
  }

  @media (max-width: 1650px) {
    .echarts {
      flex-wrap: wrap;
      .echarts_register {
        width: 98%;
      }
      .echarts_traffic {
        width: 98%;
      }
    }
  }
}
</style>
