src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">
    <div class="left-container">
      <div class="panel">
        <div class="panel-title">学历分布</div>
        <div class="panel-body">
          <div class="echart-box" style="height: 35vh" id="echart1"></div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-body">
          <el-calendar v-model="currentDate" style="height: 35vh">
            <template slot="dateCell" slot-scope="{ date, data }">
              <p :class="data.isSelected ? 'is-selected' : ''">
                <el-popover
                  v-if="hasInvitationComputed(date, data).length"
                  placement="top-start"
                  title="今日面试"
                  width="350"
                  trigger="hover"
                >
                  <ul class="popover-list">
                    <li
                      v-for="invitation in hasInvitationComputed(date, data)"
                      :key="invitation.id"
                    >
                      <span style="min-width: 3em">{{
                        invitation.qujian
                      }}</span>
                      <span style="min-width: 4em">{{
                        invitation.fullName
                      }}</span>
                      <span style="min-width: 7em">{{ invitation.phone }}</span>
                      <span style="min-width: 4em">{{
                        invitation.processName
                      }}</span>
                    </li>
                  </ul>
                  <el-badge
                    slot="reference"
                    :value="hasInvitationComputed(date, data).length"
                    class="item"
                    type="primary"
                  >
                    <span>{{ data.day.split("-")[2] }} </span>
                  </el-badge>
                </el-popover>
                <span v-else>{{ data.day.split("-")[2] }} </span>
              </p>
            </template>
          </el-calendar>
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">面试进度</div>
        <div class="panel-body">
          <div id="echart2" style="height: 35vh"></div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">当日面试</div>
        <div class="panel-body">
          <el-table :data="toDayInterviewUsers" :show-header="false">
            <el-table-column>
              <template slot-scope="{ row }">
                <div class="table-td-list">
                  <span>{{ row.fullName }}</span>
                  <span>{{ row.sex }}</span>
                  <span>32</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="{ row }">
                <div class="table-td-list">
                  <span>{{ row.byyx }}</span>
                  <span>{{ row.zhuanye }}</span>
                  <span>{{ row.xueli }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="{ row }">
                <span>{{
                  row.AnswerTime | dateTimeFilter("yyyy/MM/dd HH:mm")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="testpaper"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="right-container">
      <ul class="sta-list">
        <li v-for="item in staList" :key="item.title">
          <div style="justify-content: flex-start">
            <img
              style="height: 20px; margin-right: 10px"
              :src="item.icon"
              alt=""
            />
            <span class="sub-title">{{ item.title }}</span>
          </div>
          <div>
            <h3>{{ item.count }}</h3>
            <img
              src="/static/images/index/icon9.png"
              style="height: 30px"
              alt=""
            />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { GetQuestionTotal, GetTestPaperTotal } from "@/api/index";
import { OrderGetPriceNumber } from "@/api/order.js";
import { mapGetters } from "vuex";
import { GetUserList, GetCompanyInvitation } from "@/api/user";
import {
  GetEducationalBackgroundDistribution,
  GetInterviewProgress,
  GetSameDayInterview,
} from "@/api/dashboard";
import { GetInfo } from "@/api/setting";
import * as echarts from "echarts";
export default {
  data() {
    return {
      currentDate: new Date(),
      invitationList: [], //面试邀请
      staList: [
        {
          title: "入库/人",
          val: "入库",
          count: 0,
          icon: "/static/images/index/icon1.png",
        },
        {
          title: "面试邀请/人",
          val: "面试邀请",
          count: 0,
          icon: "/static/images/index/icon2.png",
        },
        {
          title: "正在面试/人",
          val: "未完成面试",
          count: 0,
          icon: "/static/images/index/icon3.png",
        },
        {
          title: "面试完成/人",
          val: "面试完成",
          count: 0,
          icon: "/static/images/index/icon4.png",
        },
        {
          title: "线下面试/人",
          val: "线下面试",
          count: 0,
          icon: "/static/images/index/icon5.png",
        },
        {
          title: "已录用/人",
          val: "已录用",
          count: 0,
          icon: "/static/images/index/icon6.png",
        },
        {
          title: "未录用/人",
          val: "未录用",
          count: 0,
          icon: "/static/images/index/icon7.png",
        },
        {
          title: "禁用/人",
          val: "禁用",
          count: 0,
          icon: "/static/images/index/icon8.png",
        },
      ],
      echartOption1: {
        legend: {
          top: "bottom",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "学历分布",
            type: "pie",
            radius: [0, "80%"],
            center: ["50%", "50%"],
            // roseType: "area",
            data: [],
          },
        ],
      },
      echartOption2: {
        grid: {
          top: 20,
          bottom: 40,
        },
        tooltip: {},
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#999999",
            interval: 0,
            fontSize: 16,
          },
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
            label: {
              show: true,
              color: "#4e95ff",
              position: "top",
              formatter: "{c}人",
            },
            itemStyle: {
              normal: {
                color: "#4e95ff",
                barBorderRadius: [10, 10, 0, 0],
              },
            },
          },
        ],
      },
      //当日面试
      toDayInterviewUsers: [],
      isAdmin: false,
      imageUrl: "",
      total: {
        questiontotal: 0,
        testpapertotal: 0,
        PriceNumber: 0,
        Count: 0,
      },
      query: {
        UserTypeEnum: 1, //0：管理员，1普通用户
        PageIndex: 1,
        PageSize: 10,
      },
    };
  },
  computed: {
    ...mapGetters(["name"]),
    hasInvitationComputed() {
      return (date, data) => {
        if (!this.invitationList.length) {
          return [];
        }
        return this.invitationList.filter((t) => t.startTime == data.day);
      };
    },
  },
  created() {
    this.initInvitations();
    this.initToDayInterviewUsers();
  },
  mounted() {
    try {
      if (this.$store.state.user.userInfo.UserType == 0) this.isAdmin = true;
    } catch {}
    this.init();
    this.GetTotalHeadler();
  },
  methods: {
    initToDayInterviewUsers() {
      GetSameDayInterview().then((res) => {
        this.toDayInterviewUsers = res.data;
      });
    },
    initInvitations() {
      GetCompanyInvitation({
        PageIndex: 1,
        PageSize: 10000,
      }).then((res) => {
        console.log("GetCompanyInvitation", res);
        this.invitationList = res.data.data.list;
      });
    },
    initEchart() {
      this.initEchartXueli();
      this.initEchartJindu();
    },
    initEchartXueli() {
      let myChart = echarts.init(document.getElementById("echart1"));
      GetEducationalBackgroundDistribution().then((res) => {
        console.log("GetEducationalBackgroundDistribution", res);
        let list = res.data.map((t) => {
          t.name = !t.name ? "未知" : t.name;
          return t;
        });
        this.echartOption1.series[0].data = list.map((t) => {
          return {
            name: t.name,
            value: t.count,
          };
        });
        myChart.setOption(this.echartOption1);
      });
    },
    initEchartJindu() {
      let myChart = echarts.init(document.getElementById("echart2"));
      GetInterviewProgress().then((res) => {
        console.log("GetInterviewProgress", res);
        let list = res.data;
        this.echartOption2.series[0].data = list.map((t) => {
          return {
            name: t.name,
            value: t.count,
          };
        });
        this.echartOption2.xAxis.data = list.map((t) => t.name);
        myChart.setOption(this.echartOption2);
        //右边统计数据
        list.forEach((item) => {
          let index = this.staList.findIndex((t) => t.val == item.name);
          if (index) {
            this.staList[index].count = item.count;
          }
        });
      });
    },
    init() {
      var _this = this;
      GetInfo(1).then((res) => {
        var d = res.data;
        if (d && d.data) {
          if (d.data.home_images) {
            _this.imageUrl = _this.BASE_URL + d.data.home_images;
          }
        }
      });
      this.initEchart();
    },
    GetTotalHeadler() {
      GetQuestionTotal().then((res) => {
        this.total.questiontotal = res.data.data;
      });
      GetTestPaperTotal().then((res) => {
        this.total.testpapertotal = res.data.data;
      });
      OrderGetPriceNumber().then((res) => {
        this.total.PriceNumber = res.data.data;
      });
      GetUserList(this.query).then((res) => {
        this.total.Count = res.data.data.total;
      });
    },
  },
};
</script>
<style scoped>
>>> .el-calendar-table td.next {
  display: none;
}
>>> .el-calendar-day {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
>>> .el-calendar-day p {
  margin: 0;
  text-align: center;
  height: 40px;
  width: 40px;
  line-height: 40px;
}
>>> .el-calendar-table .el-calendar-day:hover {
  background-color: transparent;
}
>>> .el-calendar-table .el-calendar-day:hover p {
  background-color: #f2f8fe;
  border-radius: 30%;
}
>>> .el-calendar-table td.is-selected {
  background-color: transparent;
}
>>> .el-calendar-table td.is-selected .el-calendar-day p {
  background-color: #f2f8fe;
  border-radius: 30%;
}
>>> .el-calendar-table td.is-today .el-calendar-day p {
  color: #fff;
  background-color: #409eff;
  border-radius: 30%;
}
>>> .el-calendar-table td {
  border: none;
}
>>> .el-calendar-table tr td:first-child {
  border-left: none;
}
>>> .el-calendar-table tr:first-child td {
  border: none;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row {
  margin-bottom: 20px;
  margin-top: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 5px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  box-shadow: 0 0 10px #cdcdcd;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 5px;
  min-height: 36px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  .grid-content-number {
    font-size: 40px;
    color: red;
  }
  div {
    font-size: 20px;
    margin-top: 10px;
  }
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<style lang="scss" scoped>
.popover-list {
  padding-left: 10px;
  li {
    list-style: none;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    border-top: 1px dashed #eaeaea;
    span {
      margin-right: 10px;
    }
  }
}
.table-td-list {
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
  }
}
.dashboard-container {
  display: flex;
  justify-content: space-between;
  background-color: #f9f9f9;
  margin: 0;
  padding: 20px;
}
.left-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .panel {
    width: 49%;
    flex: none;
  }
}
.right-container {
}
.panel {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  margin-bottom: 20px;
  .panel-title {
    height: 3em;
    line-height: 3em;
    font-size: 18px;
    font-weight: bold;
  }
}
.sta-list {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  width: 200px;
  flex: none;
  margin: 0;
  li {
    list-style: none;
    background-color: #fff;
    border: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 15px 15px 5px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 9vh;
    .sub-title {
      color: #999;
    }
    & > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    h3 {
      margin: 0;
    }
  }
}
</style>