班主任业绩排行

src/components/achievement/index.vue

 <template>
-    <div>业绩排行</div>
+  <div>
+    <h2 class="title">班主任业绩排行</h2>
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="业绩总排行" name="first">
+        <el-form ref="searchFirstFrom" inline :model="searchFirstFrom" label-width="100px">
+          <el-form-item label="起止日期">
+            <el-date-picker
+              v-model="searchFirstFrom.dateValue"
+              unlink-panels
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="searchFirstPage">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="">
+            <el-button type="primary" @click="searchFirstPage()">
+              搜索
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <el-table
+          :data="firstList"
+          style="width: 100%">
+          <el-table-column
+            prop="teacher_name"
+            label="班主任名字"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="total_money"
+            label="销售额"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="three_month"
+            label="季课"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="one_year"
+            label="年课"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="two_year"
+            label="2年课"
+          >
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="业绩按天排行" name="second">
+        <el-form ref="searchSecondFrom" inline :model="searchSecondFrom" label-width="100px">
+          <el-form-item label="起止日期">
+            <el-date-picker
+              v-model="searchSecondFrom.dateValue"
+              unlink-panels
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="searchSecondPage">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="">
+            <el-button type="primary" @click="searchSecondPage()">
+              搜索
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <el-table
+          :data="secondList"
+          style="width: 100%">
+          <el-table-column
+            prop="teacher_name"
+            label="班主任名字"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="total_money"
+            label="销售额"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="three_month"
+            label="季课"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="one_year"
+            label="年课"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="two_year"
+            label="2年课"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cur_date"
+            label="时间"
+          >
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script>
+    import {getTeacherRankListApi,getTeacherDayRankListApi} from "../../service/api";
     export default {
-        name: "index"
+      name: "index",
+      data(){
+        return {
+          activeName: 'first',
+          firstList: [],
+          secondList: [],
+          searchFirstFrom: {
+            dateValue:[]
+          },
+          searchSecondFrom:{
+            dateValue:[]
+          }
+        }
+      },
+      mounted(){
+        this.searchFirstPage();
+      },
+      methods: {
+        handleClick(tab) {
+          let _name = tab.name
+          if (_name === 'first') {
+            this.searchFirstPage();
+          } else {
+            this.searchSecondPage();
+          }
+        },
+        searchFirstPage(){
+          let json = {}
+          if(this.searchFirstFrom.dateValue){
+            json = {
+              start_at:this.searchFirstFrom.dateValue[0],
+              end_at:this.searchFirstFrom.dateValue[1]
+            };
+          }
+          getTeacherRankListApi(json).then(res=>{
+            this.firstList = res;
+          })
+        },
+        searchSecondPage(){
+          let json = {}
+          if(this.searchSecondFrom.dateValue){
+            json = {
+              start_at:this.searchSecondFrom.dateValue[0],
+              end_at:this.searchSecondFrom.dateValue[1]
+            };
+          }
+          getTeacherDayRankListApi(json).then(res=>{
+            this.secondList = res;
+          })
+        }
+      }
     }
 </script>
 
 <style scoped>
-
+  .title {
+    font-size: 26px;
+    font-weight: 400;
+    line-height: 1;
+    margin: 40px;
+  }
 </style>

src/service/api.js

@@ -729,3 +729,13 @@ const payToUserUrl = 'api/admin/bill/pay/to/user';
 export const payToUserApi = function (json) {
   return Vue.prototype.$post(payToUserUrl,json)
 };
+// 获取班主任业绩总排行
+const getTeacherRankListUrl = 'api/admin/teacher/performance';
+export const getTeacherRankListApi = function (json) {
+  return Vue.prototype.$fetch(`${getTeacherRankListUrl}`,json)
+};
+// 班主任业绩排行按天
+const getTeacherDayRankListUrl = 'api/admin/teacher/performance/day';
+export const getTeacherDayRankListApi = function (json) {
+  return Vue.prototype.$fetch(`${getTeacherDayRankListUrl}`,json)
+};