首页数据对接

yangzhi
1 parent ef132976
Showing 3 changed files with 231 additions and 88 deletions
src/api/dashboard.js
src/common/mixins.js
src/views/dashboard/index.vue
+import request from '@/utils/request'
+
+//学历分布
+export function GetEducationalBackgroundDistribution() {
+    return request({
+        url: `/DashBoard/EducationalBackgroundDistribution`,
+        method: 'get',
+    })
+}
+
+//面试进度
+export function GetInterviewProgress() {
+    return request({
+        url: `/DashBoard/InterviewProgress`,
+        method: 'get',
+    })
+}
+
+//当日面试
+export function GetSameDayInterview(data) {
+    return request({
+        url: `/DashBoard/SameDayInterview`,
+        method: 'get',
+        data,
+        params: data
+    })
+}
 \ No newline at end of file
@@ -2,6 +2,7 @@ import {
     getToken
 } from '@/utils/auth'
 import { BASE_URL } from '@/common/config'
+import { formatTime } from '@/utils/util'
 export default {
     data() {
         return {
@@ -13,6 +14,11 @@ export default {
     created() {
         this.Authorization = getToken();
     },
+    filters: {
+        dateTimeFilter(val, formatter) {
+            return formatTime(val, formatter)
+        },
+    },
     methods: {
  
     }
@@ -9,15 +9,45 @@
       </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' : ''">
-					{{ data.day.split('-')[2] }} 
-				</p>
-			</template>
-		</el-calendar>
+          <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">
@@ -29,30 +59,31 @@
       <div class="panel">
         <div class="panel-title">当日面试</div>
         <div class="panel-body">
-          <el-table :data="userList" :show-header="false">
-            <el-table-column width="120">
-              <template>
+          <el-table :data="toDayInterviewUsers" :show-header="false">
+            <el-table-column >
+              <template slot-scope="{row}">
                 <div class="table-td-list">
-                  <span>张三</span>
-                  <span>男</span>
+                  <span>{{row.fullName}}</span>
+                  <span>{{ row.sex }}</span>
                   <span>32</span>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column width="280">
-              <template>
+            <el-table-column>
+              <template slot-scope="{row}">
                 <div class="table-td-list">
-                  <span>西南石油大学</span>
-                  <span>计算机科学与技术</span>
-                  <span>本科</span>
+                  <span>{{ row.byyx }}</span>
+                  <span>{{ row.zhuanye }}</span>
+                  <span>{{ row.xueli }}</span>
                 </div>
               </template>
             </el-table-column>
             <el-table-column>
-              <template> 2022/11/23 17:20 </template>
+				<template slot-scope="{row}">
+					<span>{{ row.AnswerTime | dateTimeFilter('yyyy/MM/dd HH:mm') }}</span>
+				</template>
             </el-table-column>
-            <el-table-column>
-              <template> 面试前端岗位 </template>
+            <el-table-column prop="testpaper">
             </el-table-column>
           </el-table>
         </div>
@@ -87,7 +118,13 @@
 import { GetQuestionTotal, GetTestPaperTotal } from "@/api/index";
 import { OrderGetPriceNumber } from "@/api/order.js";
 import { mapGetters } from "vuex";
-import { GetUserList } from "@/api/user";
+import { GetUserList, GetCompanyInvitation } from "@/api/user";
+
+import {
+  GetEducationalBackgroundDistribution,
+  GetInterviewProgress,
+  GetSameDayInterview,
+} from "@/api/dashboard";
  
 import { GetInfo } from "@/api/setting";
  
@@ -97,66 +134,69 @@ export default {
   data() {
     return {
       currentDate: new Date(),
+
+      invitationList: [], //面试邀请
+
       staList: [
         {
           title: "入库/人",
-          count: 198,
+		  val:'入库',
+          count: 0,
           icon: "/static/images/index/icon1.png",
         },
         {
           title: "面试邀请/人",
-          count: 123,
+		  val:'面试邀请',
+          count: 0,
           icon: "/static/images/index/icon2.png",
         },
         {
           title: "正在面试/人",
-          count: 21,
+		  val:'未完成面试',
+          count: 0,
           icon: "/static/images/index/icon3.png",
         },
         {
           title: "面试完成/人",
-          count: 100,
+		  val:'面试完成',
+          count: 0,
           icon: "/static/images/index/icon4.png",
         },
         {
           title: "线下面试/人",
-          count: 98,
+		  val:'线下面试',
+          count: 0,
           icon: "/static/images/index/icon5.png",
         },
         {
           title: "已录用/人",
-          count: 898,
+		  val:'已录用',
+          count: 0,
           icon: "/static/images/index/icon6.png",
         },
         {
           title: "未录用/人",
-          count: 1088,
+		  val:'未录用',
+          count: 0,
           icon: "/static/images/index/icon7.png",
         },
-        { title: "禁用/人", count: 39, icon: "/static/images/index/icon8.png" },
+        { title: "禁用/人",val:'禁用', count: 0, icon: "/static/images/index/icon8.png" },
       ],
-      userList: [{}, {}, {}, {}, {}, {}	],
       echartOption1: {
         legend: {
           top: "bottom",
         },
+        tooltip: {
+          trigger: "item",
+        },
         series: [
           {
             name: "学历分布",
             type: "pie",
             radius: [0, "80%"],
             center: ["50%", "50%"],
-            roseType: "area",
-            data: [
-              { value: 40, name: "博士" },
-              { value: 38, name: "硕士" },
-              { value: 32, name: "本科" },
-              { value: 30, name: "大专" },
-              { value: 28, name: "中专" },
-              { value: 26, name: "高中" },
-              { value: 22, name: "初中" },
-              { value: 18, name: "小学" },
-            ],
+            // roseType: "area",
+            data: [],
           },
         ],
       },
@@ -170,17 +210,11 @@ export default {
           type: "category",
           axisLabel: {
             color: "#999999",
+			interval:0,
             fontSize: 16,
           },
           data: [
-            "入库",
-            "面试邀请",
-            "正在面试",
-            "面试完成",
-            "线下面试",
-            "已录用",
-            "未录用",
-            "禁用",
+            
           ],
         },
         yAxis: {
@@ -188,7 +222,7 @@ export default {
         },
         series: [
           {
-            data: [120, 150, 150, 80, 70, 110, 130, 90],
+            data: [],
             type: "bar",
             label: {
               show: true,
@@ -206,6 +240,9 @@ export default {
         ],
       },
  
+	  //当日面试
+	  toDayInterviewUsers:[],
+
       isAdmin: false,
       imageUrl: "",
       total: {
@@ -223,8 +260,19 @@ export default {
   },
   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();
   },
-  created() {},
   mounted() {
     try {
       if (this.$store.state.user.userInfo.UserType == 0) this.isAdmin = true;
@@ -233,17 +281,65 @@ export default {
     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"));
-      myChart.setOption(this.echartOption1);
+      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"));
-      myChart.setOption(this.echartOption2);
+      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;
@@ -276,49 +372,49 @@ export default {
 </script>
  
 <style scoped>
->>>.el-calendar-table td.next{
-	display: none;
+>>> .el-calendar-table td.next {
+  display: none;
 }
->>>.el-calendar-day{
-	height: auto;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+>>> .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-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 {
+  background-color: transparent;
 }
->>>.el-calendar-table .el-calendar-day:hover p{
-	background-color: #F2F8FE;
-	border-radius: 30%;
+>>> .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 {
+  background-color: transparent;
 }
->>>.el-calendar-table td.is-selected .el-calendar-day p{
-	background-color: #F2F8FE;
-	border-radius: 30%;
+>>> .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.is-today .el-calendar-day p {
+  color: #fff;
+  background-color: #409eff;
+  border-radius: 30%;
 }
->>>.el-calendar-table td{
-	border: none;
+>>> .el-calendar-table td {
+  border: none;
 }
->>>.el-calendar-table tr td:first-child{
-	border-left: none;
+>>> .el-calendar-table tr td:first-child {
+  border-left: none;
 }
->>>.el-calendar-table tr:first-child td{
-	border: none;
+>>> .el-calendar-table tr:first-child td {
+  border: none;
 }
 </style>
 <style lang="scss" scoped>
@@ -383,6 +479,20 @@ export default {
 }
 </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;