antissoft / antissoft.dati.admin

  <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: 3em">{{

                          invitation.fullName
                        }}</span>
                        <span style="min-width: 7em">{{ invitation.phone }}</span>

                        <span style="min-width: 5em">{{

                          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: {

          textStyle: {
            fontSize: 16,
          },

          legend: {
            top: "bottom",
          },

          tooltip: {
            trigger: "item",
          },

          series: [
            {
              name: "学历分布",
              type: "pie",
              radius: [0, "80%"],
              center: ["50%", "50%"],

              // roseType: "area",
              data: [],

            },
          ],
        },
        echartOption2: {

          textStyle: {
            fontSize: 16,
          },

          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: 30px;

    width: 40px;

    line-height: 30px;

  }

  >>> .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: 100%;

    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;

    padding-right: 10px;

    li {
      list-style: none;
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      border-top: 1px dashed #eaeaea;

      font-size: 16px;
      padding-right: 20px;

      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: 22px;

      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>