onlinenew_manage/src/views/dataOverview/dataOverview.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <div class="cameratxt">数据总览</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 id="echarts_register"></div>
      </div>
      <div class="echarts_traffic">
        <div class="system_title">
          <h4>交通方式情况</h4>
        </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>
  </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 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 } = 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;

// 学院新生报到情况
let trafficEcharts = null;

// 性别比例
let genderEcharts = null;

// 处置情况
const studentOverview = async () => {
  let res = await https.get(
    "/welcome/api/welcomeStudent/studentOverview",
    "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,
        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 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);
  let res = await https.get(
    "/welcome/api/welcomeStudent/studentRegister",
    "params"
  );
  console.log(res, "新生报到情况");
  if (res.code == 200) {
    // const data = genData(20);
    const data = {
      legendData: [],
      seriesData: [],
    };
    let arr = res.data.slice(0, -1);
    data.seriesData = arr.map((i) => {
      data.legendData.push(i.collegeName);
      return {
        name: i.collegeName,
        value: i.count,
      };
    });
    const option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}人 ({d}%)",
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        right: "10%",
        top: 10,
        bottom: 30,
        data: data.legendData,
      },
      series: [
        {
          name: "报到人数",
          type: "pie",
          radius: "60%",
          center: ["35%", "50%"],
          data: data.seriesData,
          emphasis: {
            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 traffic = async () => {
  var chartDom = document.getElementById("echarts_traffic");
  trafficEcharts = echarts.init(chartDom);
  var option;

  let res = await https.get(
    "/welcome/api/welcomeStudent/studentTraffic",
    "params"
  );
  console.log(res, "学生交通方式");
  if (res.code == 200) {
    let data = [];
    data = res.data.map((i) => {
      return { value: i.count, name: i.trafficMethod };
    });
    option = {
      tooltip: {
        trigger: "item",
      },
      // legend: {
      //   top: "5%",
      //   left: "center",
      // },

      series: [
        {
          name: "交通方式",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: {
            borderRadius: 10,
          },
          label: {
            show: true,
            // position: "center",
            // alignTo: "edge",
            formatter: "{name|{b}}\n{time|{c} ({d}%)}",
            // minMargin: 5,
            // edgeDistance: 10,
            lineHeight: 18,
            rich: {
              time: {
                // fontSize: 10,
                color: "#999",
              },
              percent: {
                // fontSize: 10,
                color: "#999",
              },
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          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 res = await https.get(
    "/welcome/api/welcomeStudent/studentSexRatio",
    "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,
        },
      },
      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 res = await https.get(
    "/welcome/api/welcomeStudent/studentStay",
    "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 (trafficEcharts) {
    trafficEcharts.resize();
  }
  if (genderEcharts) {
    genderEcharts.resize();
  }
};
onMounted(() => {
  studentOverview();
  register();
  traffic();
  gender();
  studentStay();
  window.addEventListener("resize", updateChartSize);
});

onBeforeMount(() => {
  // studentOverview();
  // studentRegister();
  // studentTraffic();
  // studentSexRatio();
  // studentStay();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
onBeforeUnmount(() => {
  if (registerEcharts) {
    registerEcharts.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 30px;
    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 {
      flex: 1;
      margin: 0 10px;
      height: 133px;
      border: 1px solid rgba(143, 143, 143, 1);
      border-radius: 6.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;
    .echarts_register {
      flex: 1;
      #echarts_register {
        width: calc(100% - 60px);
        height: 300px;
        margin: 0 auto;
      }
    }
    .echarts_traffic {
      flex: 1;

      #echarts_traffic {
        width: calc(100% - 60px);
        height: 300px;
        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;
        }
      }
    }
  }
}
</style>