业绩查询功能

package-lock.json

@@ -14877,6 +14877,14 @@
         }
       }
     },
+    "vue-hash-calendar": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npm.taobao.org/vue-hash-calendar/download/vue-hash-calendar-1.2.12.tgz",
+      "integrity": "sha1-3TyXG2GpV8ZwavJS9FGVmpsHsoY=",
+      "requires": {
+        "vue": "^2.5.17"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",

package.json

@@ -30,6 +30,7 @@
     "vant": "2.2.0",
     "vee-validate": "^2.2.14",
     "vue": "^2.6.10",
+    "vue-hash-calendar": "^1.2.12",
     "vue-pdf": "^4.0.7",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1",

src/api/ebiz/attendance/attendance.js

@@ -0,0 +1,27 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+//打卡情况续期列表查询
+export function attendance(data) {
+    return request({
+      url: getUrl(`/agent/Performance/attendance`, 1),
+      method: 'post',
+      data
+    })
+  }
+//日期查询
+  export function getDayDetail(data) {
+    return request({
+      url: getUrl(`/agent/Performance/getDayDetail`, 1),
+      method: 'post',
+      data
+    })
+  }
+  //月历查询
+  export function getMonthDetail(data) {
+    return request({
+      url: getUrl(`/agent/Performance/getMonthDetail`, 1),
+      method: 'post',
+      data
+    })
+  }

src/api/ebiz/performance/performance.js

@@ -1,2 +1,36 @@
 import request from '@/assets/js/utils/request'
-import getUrl from '@/assets/js/utils/get-url'
+import getUrl from '@/assets/js/utils/get-url'
+
+//代理人功能获取
+export function getBaseAgentInfo(data) {
+    return request({
+      url: getUrl(`/agent/agent/getBaseAgentInfo`, 1),
+      method: 'post',
+      data
+    })
+  }
+  //代理人关系获取
+  export function getBranchInfos(data) {
+    return request({
+      url: getUrl(`/agent/branch/getBranchInfos`, 1),
+      method: 'post',
+      data
+    })
+  }
+  //获取信息
+    export function getPerformanceDetail(data) {
+    return request({
+      url: getUrl(`/agent/Performance/getPerformanceDetail`, 1),
+      method: 'post',
+      data
+    })
+  }
+  //获取代理人下级头像
+  // http://139.199.50.151:7000/api/v1/agent/branch/getAllAgentByAgent
+  export function getPerformanceHeader(data) {
+    return request({
+      url: getUrl(`/agent/branch/getAllAgentByAgent`, 1),
+      method: 'post',
+      data
+    })
+  }

src/main.js

@@ -9,8 +9,9 @@ import Jump from '@/assets/js/utils/jump'
 import utils from '@/assets/js/business-common'
 import config from '@/config'
 import noMoreClick from '@/directive/noMoreClick'
+import vueHashCalendar from 'vue-hash-calendar'
+import 'vue-hash-calendar/lib/vue-hash-calendar.css'
 
-//全局注册vant常用组件
 import {
   Toast,
   Button,
@@ -19,7 +20,7 @@ import {
 } from 'vant'
 
 Vue.use(Icon)
-
+Vue.use(vueHashCalendar)
 Vue.use(Toast)
 Vue.use(Button)
 Vue.use(Dialog)

src/router/ebiz/attendance.js

@@ -1,6 +1,7 @@
 const attendance = () => import('@/views/ebiz/attendance/Attendance')
 const monthly = () => import('@/views/ebiz/attendance/Monthly')
 
+
 export default [
     {
       path: '/attendance/Attendance',

src/router/ebiz/performance.js

@@ -1,4 +1,6 @@
 const performance = () => import('@/views/ebiz/performance/Performance')
+const attendanceInfo = () => import('@/views/ebiz/performance/AttendanceInfo')
+const PerformanceList = () => import('@/views/ebiz/performance/PerformanceList')
 
 export default [
     {
@@ -10,13 +12,31 @@ export default [
         index: 1
       }
     },
-    // {
-    //   path: '/poster/posterPreview',
-    //   name: 'posterPreview',
-    //   component: posterPreview,
-    //   meta: {
-    //     title: '海报预览',
-    //     index: 2
-    //   }
-    // }
+    {
+      path: '/performance/Performance/:parmas',
+      name: 'Performance',
+      component: performance,
+      meta: {
+        title: '业绩查询',
+        index: 1
+      }
+    },
+    {
+      path: '/performance/AttendanceInfo',
+      name: 'AttendanceInfo',
+      component: attendanceInfo,
+      meta: {
+        title: '考勤统计',
+        index: 3
+      }
+    },
+    {
+      path: '/performance/PerformanceList/:obj',
+      name: 'PerformanceList',
+      component: PerformanceList,
+      meta: {
+        title: '考勤统计',
+        index: 3
+      }
+    }
   ]

src/views/ebiz/attendance/Attendance.vue

@@ -1,114 +1,155 @@
 <template>
-    <div>
-        <div class='border-gb  header mh-auto  h50 flex align-items-c  bg-white'>
-            <van-button  round @click="goDetail(order)" size="small" class="ml15" type="danger" v-no-more-click="1000">当月</van-button>
-             <div @click="timePopup" class="fs12 red ml15">2019-05
-                <img src="@/assets/images/u79.png" alt="" class="absolute mt2 ml5">
-            </div>
-            <van-popup v-model="dateShow" position="bottom">
-                <van-datetime-picker
-                    v-model="currentDate" 
-                    type="year-month"
-                    title="选择年月日"
-                    :min-date="minDate"
-                    :max-date="maxDate" 
-                    @cancel="handleCancel"
-                    @confirm="handleEndDateConfirm"
-                />
-            </van-popup>
-       </div>
-       <div class="mt10 bg-white">
-           <div class="flex h70 align-items-c border-gb">
-              <img src="@/assets/images/u1203.png" alt="" class="h40 w40 ml15"/>
-              <span class="ml10 fs14">王昭君</span>
-              <div class="absolute right20 flex" @click="month">
-                <div class="mt10">
-                    <img src="@/assets/images/u1188.png" alt="" class="" />
-                </div>
-                <div class="fs14 red mt10">打卡月历</div>
-              </div>
-             
-           </div>
-           <div class="flex h50 border-gb ml15 align-items-c">
-               <div>应出勤天数</div>
-               <div class='absolute right30'>20天</div>
-           </div>
-           <div class="flex h50 border-gb ml15 align-items-c">
-               <div>实际出勤天数</div>
-               <div class='absolute right30'>20天</div>
-           </div>
-           <div class="flex h50 border-gb ml15 align-items-c">
-               <div>实时出勤率</div>
-               <div class='absolute right30'>20%</div>
-           </div>
-           <div class="flex h50 border-gb ml15 align-items-c fwb">
-               <div>迟到</div>
-               <div class='absolute right30 c-gray-base '>0次</div>
-           </div>
-           <div class="flex h50 border-gb ml15 align-items-c fwb">
-               <div>早退</div>
-               <div class='absolute right30 red'>1次，共307分钟</div>
-           </div>
-           <div class="flex h50 border-gb ml15 align-items-c fwb">
-               <div>缺卡</div>
-               <div class='absolute right30 red'>1次</div>
-           </div>
-           <div class="flex h50 ml15 align-items-c fwb">
-               <div>旷工</div>
-               <div class='absolute right30 red'>1天</div>
-           </div>
-       </div>
-       <div class="fs13 red mt10 ml15">
-           注：本出勤率只统计工作日出勤情况
-       </div>
+  <div>
+    <div class="border-gb header mh-auto h50 flex align-items-c bg-white">
+      <van-button
+        round
+        @click="goDetail(order)"
+        size="small"
+        class="ml15"
+        type="danger"
+        v-no-more-click="1000"
+      >当月</van-button>
+      <div @click="timePopup" class="fs12 red ml15">
+        {{titleTime}}
+        <img src="@/assets/images/u79.png" alt class="absolute mt2 ml5" />
+      </div>
+      <van-popup v-model="dateShow" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="year-month"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @cancel="handleCancel"
+          @confirm="handleEndDateConfirm"
+        />
+      </van-popup>
     </div>
+    <div class="mt10 bg-white">
+      <div class="flex h70 align-items-c border-gb">
+        <img src="@/assets/images/u1203.png" alt class="h40 w40 ml15" />
+        <span class="ml10 fs14">王昭君</span>
+        <div class="absolute right20 flex" @click="month">
+          <div class="mt10">
+            <img src="@/assets/images/u1188.png" alt class />
+          </div>
+          <div class="fs14 red mt10">打卡月历</div>
+        </div>
+      </div>
+      <div class="flex h50 border-gb ml15 align-items-c">
+        <div>应出勤天数</div>
+        <div class="absolute right30">{{mustWorkDay}}天</div>
+      </div>
+      <div class="flex h50 border-gb ml15 align-items-c">
+        <div>实际出勤天数</div>
+        <div class="absolute right30">{{workDay}}天</div>
+      </div>
+      <div class="flex h50 border-gb ml15 align-items-c">
+        <div>实时出勤率</div>
+        <div class="absolute right30">{{workRate}}%</div>
+      </div>
+      <div class="flex h50 border-gb ml15 align-items-c fwb">
+        <div>迟到</div>
+        <div class="absolute right30 c-gray-base">{{lateNum}}次</div>
+      </div>
+      <div class="flex h50 border-gb ml15 align-items-c fwb">
+        <div>早退</div>
+        <div class="absolute right30 red">{{earllyNum}}次，共{{earllyTime}}分钟</div>
+      </div>
+      <div class="flex h50 border-gb ml15 align-items-c fwb">
+        <div>缺卡</div>
+        <div class="absolute right30 red">{{forgetNum}}次</div>
+      </div>
+      <div class="flex h50 ml15 align-items-c fwb">
+        <div>旷工</div>
+        <div class="absolute right30 red">{{dontWork}}天</div>
+      </div>
+    </div>
+    <div class="fs13 red mt10 ml15">注：本出勤率只统计工作日出勤情况</div>
+  </div>
 </template>
 <script>
-    import {  Popup,DatetimePicker } from 'vant';
-    export default {
-        name: 'attendance',
-        components: {
-            [Popup.name]: Popup,
-            [DatetimePicker.name]: DatetimePicker,
-        },
-        data() {
-            return {
-                currentDate: new Date(),
-                dateShow: false,
-                minDate: new Date(2020, 0, 1),
-                maxDate: new Date(2025, 10, 1),
-            }
-        },
-        created() {
-
-        },
-        methods:{
-            timePopup(){
-                this.dateShow = true;
-            },
-            handleCancel () {
-                this.dateShow = false;
-            },
-            //开始时间
-            handleEndDateConfirm (e) {
-                this.dateShow = false;
-                console.log(e)
-                // this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
-            },
-            month(){
-                this.$jump({
-                    flag: 'h5',
-                    extra: {
-                    url: location.origin + `/#/attendance/Monthly`
-                    },
-                    routerInfo: {
-                    path: `/attendance/Monthly`
-                    }
-                })
-            }
-        }
+import { Popup, DatetimePicker } from 'vant'
+import { attendance } from '@/api/ebiz/attendance/attendance'
+import utils from '@/assets/js/utils/date-utils'
+export default {
+  name: 'attendance',
+  components: {
+    [Popup.name]: Popup,
+    [DatetimePicker.name]: DatetimePicker
+  },
+  data() {
+    return {
+      currentDate: new Date(),
+      dateShow: false,
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(),
+      mustWorkDay: '',
+      workDay: 1,
+      workRate: '0.0',
+      lateNum: 0,
+      lateTime: 0,
+      earllyNum: 0,
+      earllyTime: 0,
+      forgetNum: 0,
+      dontWork: 20,
+      titleTime: ''
     }
+  },
+  created() {
+    this.attendance1(), this.formatDate1()
+  },
+  methods: {
+    timePopup() {
+      this.dateShow = true
+    },
+    handleCancel() {
+      this.dateShow = false
+    },
+    //开始时间
+    handleEndDateConfirm(e) {
+      this.dateShow = false
+      console.log(e)
+      this.titleTime = utils.formatDate(e, 'yyyy-MM')
+    },
+    month() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/attendance/Monthly`
+        },
+        routerInfo: {
+          path: `/attendance/Monthly`
+        }
+      })
+    },
+    attendance1() {
+      //测试数据
+      let date1 = {
+        date: '2020-07-01'
+      }
+      attendance(date1).then(res => {
+        console.log(res)
+        if (res.result == 0) {
+          ;(this.mustWorkDay = res.content.mustWorkDay),
+            (this.workDay = res.content.workDay),
+            (this.workRate = res.content.workRate),
+            (this.lateNum = res.content.lateNum),
+            (this.lateTime = res.content.lateTime),
+            (this.earllyNum = res.content.earllyNum),
+            (this.earllyTime = res.content.earllyTime),
+            (this.forgetNum = res.content.forgetNum),
+            (this.dontWork = res.content.dontWork)
+        }
+      })
+    },
+    formatDate1() {
+      // console.log(utils.formatDate("2020-1-1"))
+      this.titleTime = utils.formatDate(this.currentDate, 'yyyy-MM')
+      console.log(this.titleTime)
+    }
+  }
+}
 </script>
 <style  scoped>
-
 </style>

src/views/ebiz/attendance/Monthly.vue

@@ -1,45 +1,158 @@
 <template>
-    <div>
-        <div class="bg-white">
-              <div class="flex h70 align-items-c border-gb">
-              <img src="@/assets/images/u1203.png" alt="" class="h40 w40 ml15"/>
-              <span class="ml10 fs14">王昭君</span>
-              <div class="absolute right20 flex" >
-                  2020-06-01 星期一
-              </div>
-             
-           </div> 
+  <div>
+    <div class="bg-white absolute header">
+      <div class="flex h70 align-items-c border-gb">
+        <img src="@/assets/images/u1203.png" alt class="h40 w40 ml15" />
+        <span class="ml10 fs14">王昭君</span>
+        <div class="absolute right20 flex">{{time}} 星期{{week}}</div>
+        <div class="CalendarDiv"></div>
+      </div>
+    </div>
+    <div class="calendar pt20">
+      <vue-hash-calendar
+        :visible.sync="isShowCalendar"
+        @change="change"
+        :markDate="mask"
+        :showTodayButton="showTodayButton"
+        @click="timeDate"
+        :disabledWeekView="disable"
+      ></vue-hash-calendar>
+    </div>
+    <div class="footer">
+      <div class="fs12 c-gray-base h30 line-height">班次：正常 09:00-18:00</div>
+      <div class=" h40 flex align-items-c border-gb">
+        <img class="h15 w15 ml15" src="@/assets/images/u20046.png" alt />
+        <div class="fs14 ml5">今日打卡{{count}}次，工时共计{{amount}}小时</div>
+      </div>
+      <div class=" flex pt10">
+        <div class="text-center ml10">
+            <div class="w18 h18 fs12 bg-gray radius50">上</div>
+            <div class="lin"></div>
+            <div class="w18 h18 fs12 bg-gray radius50">下</div>
         </div>
         <div>
-            <van-cell title="选择单个日期" :value="date" @click="show = true" />
-            <van-calendar v-model="show" @confirm="onConfirm" />
+          <div class="fs14 fw500 ml15">
+            打卡时间 {{workTime}}
+            <span class="c-gray-base">(上班 时间 09:00)</span>
+          </div>
+          <img class="w30 h20 ml15" src="@/assets/images/u1213.png" alt />
+          <div class="fs14 fw500 ml15 mt50">
+            打卡时间 {{workTimeOff}}
+            <span class="c-gray-base">(下班 时间 18:00)</span>
+          </div>
+          <img class="w30 h20 ml15" src="@/assets/images/u1213.png" alt />
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-    import { Calendar } from 'vant';
-    export default {
-        name:'monthly',
-        components: {
-            [Calendar.name]: Calendar,
-        },
-        data() {
-            return {
-                date: '',
-                show: false,
-            };
-        },
-        methods: {
-            formatDate(date) {
-                return `${date.getMonth() + 1}/${date.getDate()}`;
-            },
-            onConfirm(date) {
-                this.show = false;
-                this.date = this.formatDate(date);
-            },
-        },
+import vueHashCalendar from 'vue-hash-calendar';
+import { getDayDetail,getMonthDetail } from '@/api/ebiz/attendance/attendance';
+import utils from '@/assets/js/utils/date-utils'
+export default {
+  name: 'monthly',
+  components: {
+    [vueHashCalendar.name]: vueHashCalendar
+  },
+  data() {
+    return {
+      currentDate: new Date(),
+      date: '',
+      show: false,
+      isShowCalendar: true,
+      showTodayButton: false,
+      mask: [{ color: 'red', date: ['2020-07-25','2020-07-11','2020-07-20'] }, { color: 'orange', type: 'dot', date: ['2020-07-20'] }, '2020/07/21'],
+      workTime:'',
+      workTimeOff:'',
+      count:'',
+      amount:'',
+      time:'',
+      week:'',
+      nomal:[],
+      disable:true
     }
+  },
+  created(){
+      this.getMonthDetail1();
+      this.time=utils.formatDate(this.currentDate, 'yyyy-MM-dd')
+  },
+  methods: {
+    onConfirm(date) {
+      this.show = false
+    },
+    change(e) {
+      this.time=utils.formatDate(e, 'yyyy-MM-dd')
+      this.week=String(new Date(e).getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")
+        let date={
+            date:String(this.time)
+        }
+        getDayDetail(date).then(res=>{
+            // console.log(res)
+            if(res.result == 0){
+                this.workTime=res.content.workTime,
+                this.workTimeOff=res.content.workTimeoff,
+                this.count=res.content.count,
+                this.amount=res.content.amount
+            }
+        })
+    },
+    timeDate(date){
+      this.time = utils.formatDate(date, 'yyyy-MM-dd')
+      this.week=String(new Date(date).getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")
+    },
+    getMonthDetail1(){
+         let date={
+            date:"2020-07-01"
+        }
+        getMonthDetail(date).then(res=>{
+            console.log(res)
+            if(res.result == 0){
+              this.normal=res.content.normal,
+              this.rest=res.content.rest
+              let mask=[]
+              let obj={}
+              let arr=[]
+              for(let i=0;i<this.normal.length;i++){
+                  let nomal=this.normal[i].split('T')
+                  let nomal1=nomal[0]
+                  arr.push(nomal1)
+                  obj.color='blue',
+                  obj.date=arr
+                  mask.push(obj)
+              }
+              for(let i=0;i<this.normal.length;i++){
+                  let nomal=this.normal[i].split('T')
+                  let nomal1=nomal[0]
+                  arr.push(nomal1)
+                  obj.color='blue',
+                  obj.date=arr
+                  mask.push(obj)
+              }
+              console.log(mask)
+              // this.mask=mask
+            }
+        })
+    }
+  }
+}
 </script>
-<style  scoped>
-
+<style scoped>
+.header {
+  width: 100%;
+  z-index: 100;
+}
+.calendar {
+  z-index: -1;
+  width: 100%;
+}
+.calendar_title[data-v-f3b38220] {
+  display: none;
+}
+.lin{
+    width: 1px;
+    height: 75px;
+    border-right: 1px solid #ccc;
+    margin-left:7px;
+}
 </style>

src/views/ebiz/performance/AttendanceInfo.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div class="border-gb header mh-auto h50 flex align-items-c ">
+      <van-button
+        round
+        @click="goDetail(order)"
+        size="small"
+        class="ml15"
+        type="danger"
+        v-no-more-click="1000"
+      >当月</van-button>
+      <div @click="timePopup" class="fs12 red ml15">
+        2019-05
+        <img src="@/assets/images/u79.png" alt class="absolute mt2 ml5" />
+      </div>
+      <van-popup v-model="dateShow" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="year-month"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @cancel="handleCancel"
+          @confirm="handleEndDateConfirm"
+        />
+      </van-popup>
+    </div>
+    <div class="c-gray-base fs13 ml25 mt10">
+      所在机构：
+      <span>大直辖一</span>
+    </div>
+    <div class="crew-list-container ml15">
+      <van-sticky>
+        <table class="top-table fw500">
+          <tr>
+            <td>
+              <div class="status">直辖部</div>
+            </td>
+            <td>
+              <div class="name">承保标保（元）</div>
+            </td>
+            <td>
+              <div class="date">寿险承保件数</div>
+            </td>
+            <td>
+              <div class="date">寿险承保件数</div>
+            </td>
+            <td>
+              <div class="date">承保FYC（元）</div>
+            </td>
+            <td>
+              <div class="date">合格人力</div>
+            </td>
+            <td>
+              <div class="date">综合开拓承保保费（元）</div>
+            </td>
+            <td>
+              <div class="date">本月预收标保</div>
+            </td>
+            <td>
+              <div class="date">本月预收件数</div>
+            </td>
+            <td>
+              <div class="date">本月预收FYC（元）</div>
+            </td>
+            <td>
+              <div class="date">操作</div>
+            </td>
+          </tr>
+        </table>
+      </van-sticky>
+      <table class="main-table">
+        <tr>
+          <td>
+            <div class="status">1</div>
+          </td>
+          <td>
+            <div class="name">2</div>
+          </td>
+          <td>
+            <div class="date">3</div>
+          </td>
+           <td>
+            <div class="date">4</div>
+          </td>
+           <td>
+            <div class="date">5</div>
+          </td>
+           <td>
+            <div class="date">6</div>
+          </td>
+           <td>
+            <div class="date">7</div>
+          </td>
+           <td>
+            <div class="date">8</div>
+          </td>
+           <td>
+            <div class="date">9</div>
+          </td>
+           <td>
+            <div class="date">0</div>
+          </td>
+          <td>
+            <div class="date">查看</div>
+          </td>
+        </tr>
+         
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import { Popup, DatetimePicker, Sticky } from 'vant'
+export default {
+  name: 'attendance',
+  components: {
+    [Popup.name]: Popup,
+    [DatetimePicker.name]: DatetimePicker,
+    [Sticky.name]: Sticky
+  },
+  data() {
+    return {
+      currentDate: new Date(),
+      dateShow: false,
+      minDate: new Date(2019,1),
+      maxDate: new Date(),
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 0]
+    }
+  },
+  created() {},
+  methods: {
+    timePopup() {
+      this.dateShow = true
+    },
+    handleCancel() {
+      this.dateShow = false
+    },
+    //开始时间
+    handleEndDateConfirm(e) {
+      this.dateShow = false
+      console.log(e)
+      // this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
+    },
+    month() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/attendance/Monthly`
+        },
+        routerInfo: {
+          path: `/attendance/Monthly`
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss"  scoped>
+.crew-list-container {
+  // overflow: hidden;
+  padding-top: 10px;
+}
+.top-table,
+.main-table {
+  margin: 0 auto;
+  border-collapse: collapse;
+  td {
+    border: 1px solid #ccc;
+  }
+  .status,
+  .name,
+  .date {
+    height: 27px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 27px;
+  }
+  .status,
+  .name {
+    width: 99px;
+  }
+  .date {
+    width: 154px;
+  }
+}
+.main-table {
+  tr:nth-child(even) div {
+    border:1px solid #ccc;
+  }
+}
+</style>

src/views/ebiz/performance/Performance.vue

@@ -1,142 +1,314 @@
 <template>
-    <div>
-       <div class='border-gb mt20 header mh-auto van-cell:not(:last-child)::after h50 flex align-items-c'>
-            <van-button  round @click="goDetail(order)" size="small" class="ml15" type="danger" v-no-more-click="1000">当月</van-button>
-            <div @click="timePopup" class="fs12 red ml15">2019-05
-                <img src="@/assets/images/u79.png" alt="" class="absolute mt2 ml5">
-            </div>
-            <van-popup v-model="dateShow" position="bottom">
-                <van-datetime-picker
-                    v-model="currentDate" 
-                    type="year-month"
-                    title="选择年月日"
-                    :min-date="minDate"
-                    :max-date="maxDate" 
-                    @cancel="handleCancel"
-                    @confirm="handleEndDateConfirm"
-                />
-            </van-popup>
-       </div>
-        <div class='mt20'>
-            <div class='h50  bg-white content mh-auto  fs13 fw500'>
-                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
-                    <div >个人承保标保（元）</div>
-                    <div class='red'>230000:00</div>
-                </div>
-            </div>
-            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
-                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
-                    <div >寿险承保件</div>
-                    <div class='red'>230000:00</div>
-                </div>
-            </div>
-            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
-                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
-                    <div >承保FYC（元）</div>
-                    <div class='red'>230000:00</div>
-                </div>
-            </div>
-            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
-                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
-                    <div >综合开拓承保保费（元）</div>
-                    <div class='red'>230000:00</div>
-                </div>
-            </div>
-            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
-                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
-                    <div >本月预收标保（元）</div>
-                    <div class='red'>230000:00</div>
-                </div>
-            </div>
-            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
-                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
-                    <div >本月预收件数</div>
-                    <div class='red'>230000:00</div>
-                </div>
-            </div>
-            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
-                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
-                    <div >本月预收FYC（元）</div>
-                    <div class='red'>230000:00</div>
-                </div>
-            </div>
-        </div>
-        <div class='mt10 mh-auto content fs12 red'>
-            注：统计截至时间：2020-01-12  16：30
-        </div>
+  <div>
+    <div
+      class="border-gb mt20 header mh-auto van-cell:not(:last-child)::after h50 flex align-items-c"
+    >
+      <van-button
+        round
+        @click="goDetail(order)"
+        size="small"
+        class="ml15"
+        type="danger"
+        v-no-more-click="1000"
+      >当月</van-button>
+      <div @click="timePopup" class="fs12 red ml15">
+        {{titleTime}}
+        <img src="@/assets/images/u79.png" alt class="absolute mt2 ml5" />
+      </div>
+      <van-popup v-model="dateShow" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="year-month"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @cancel="handleCancel"
+          @confirm="handleEndDateConfirm"
+        />
+      </van-popup>
     </div>
+    <div class="c-gray-base fs13 ml25 mt10" v-if="mask=='1'">
+      所在机构：
+      <span>大直辖一</span>
+    </div>
+    <div class="flex align-items-c h86 content1 bg-white mt10" v-if="mask=='1'">
+      <div class="w40 h60 ml15 text-center" v-for="item in headerList">
+        <img v-if="item.agentHeadUrl!==null" class="h40 w40" :src="item.agentHeadUrl" alt />
+        <img v-if="item.agentHeadUrl == null" class="h40 w40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">{{item.agentName}}</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声及</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声及</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声及</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+      </div>
+    </div>
+    <div class="mt20">
+      <div class="h50 bg-white content mh-auto fs13 fw500">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>个人承保标保（元）</div>
+          <div class="red">{{cbbb}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>寿险承保件数</div>
+          <div class="red">{{cbjs}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>承保FYC（元）</div>
+          <div class="red">{{cfyc}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>综合开拓承保保费（元）</div>
+          <div class="red">{{zcbf}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收标保（元）</div>
+          <div class="red">{{ysbb}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收件数</div>
+          <div class="red">{{ysjs}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收FYC（元）</div>
+          <div class="red">{{yfyc}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="mt10 mh-auto content fs12 red">注：统计截至时间：2020-01-12 16：30</div>
+    <div
+      v-if="mask!=='1'"
+      class="h40 bg-red footer absolute bottom0 text-center fs14 fw500 white"
+      @click="checkTeam(obj)"
+    >查看团队业绩</div>
+  </div>
 </template>
 <script>
-    import {  Popup,DatetimePicker } from 'vant';
-    export default {
-        name: 'performance',
-        components: {
-            [Popup.name]: Popup,
-            [DatetimePicker.name]: DatetimePicker,
-        },
-        data() {
-            return {
-                currentDate: new Date(),
-                dateShow: false,
-                minDate: new Date(2020, 0, 1),
-                maxDate: new Date(2025, 10, 1),
-            }
-        },
-        created() {
-             setTimeout(() => {
-                // eslint-disable-next-line no-undef
-                EWebBridge.webCallAppInJs('webview_right_button', {
-                    btns: [
-                    {
-                        title: "考勤记录",
-                        route: { flag: '', extra: {} }
-                    }
-                    ]
-                })
-            }, 1000)
-        },
-         mounted() {
-            window.appCallBack = this.appCallBack
-        },
-        methods:{
-             appCallBack(data) {
-                if (data.trigger == 'right_button_click') {
-                    this.$jump({
-                    flag: 'h5',
-                    extra: {
-                        url: location.origin + `/#/performance/Performance`
-                    },
-                    routerInfo: {
-                        path: `/performance/Performance`
-                    }
-                    })
-                }
-                if (data.trigger == 'left_button_click') {
-                    this.$jump({
-                    flag: 'home'
-                    })
-                }
-            },
-            timePopup(){
-                this.dateShow = true;
-            },
-            handleCancel () {
-                this.dateShow = false;
-            },
-            //开始时间
-            handleEndDateConfirm (e) {
-                this.dateShow = false;
-                console.log(e)
-                // this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
-            },
-        }
+import { getBaseAgentInfo,getPerformanceHeader,getPerformanceDetail } from '@/api/ebiz/performance/performance'
+import utils from '@/assets/js/utils/date-utils'
+import { Popup, DatetimePicker } from 'vant'
+export default {
+  name: 'performance',
+  components: {
+    [Popup.name]: Popup,
+    [DatetimePicker.name]: DatetimePicker,
+  },
+  data() {
+    return {
+      currentDate: new Date(),
+      dateShow: false,
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(),
+      titleTime: '',
+      date1: {
+        date: '2020-07-01',
+      },
+      agentGrade: '',
+      isShow: true,
+      obj:{},
+      agentCode:'',
+      cbbb:'',
+      cbjs:'',
+      ysjs:'',
+      cfyc:'0.00',
+      zcbf:'0.00',
+      ysbb:'0.00',
+      yfyc:'0.00',
+      timeCode:'',
+      mask:'',
+      headerList:[]
     }
+  },
+  created() {
+    // console.log('=======' + this.$route.params.parmas)
+    if(this.$route.params.parmas!==undefined){
+      this.mask = JSON.parse(this.$route.params.parmas).mask
+      this.titleTime=JSON.parse(this.$route.params.parmas).date.slice(0,7),
+      this.dateTime=JSON.parse(this.$route.params.parmas).date
+    }
+    
+    if (this.mask !== '1') {
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('webview_right_button', {
+          btns: [
+            {
+              title: '考勤记录',
+              route: { flag: '', extra: {} },
+            },
+          ],
+        })
+      }, 1000)
+    }
+
+    // this.performanceData()
+    this.getPerformanceHeader1()
+    this.formatDate1()
+    this.getBaseAgentInfo1()
+  },
+  mounted() {
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    appCallBack(data) {
+      if (data.trigger == 'right_button_click') {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#/attendance/Attendance`,
+          },
+          routerInfo: {
+            path: `/attendance/Attendance`,
+          },
+        })
+      }
+      if (data.trigger == 'left_button_click') {
+        this.$jump({
+          flag: 'home',
+        })
+      }
+    },
+    timePopup() {
+      this.dateShow = true
+    },
+    handleCancel() {
+      this.dateShow = false
+    },
+    //开始时间
+    handleEndDateConfirm(e) {
+      this.dateShow = false
+      this.titleTime = utils.formatDate(e, 'yyyy-MM')
+      this.timeCode=utils.formatDate(e, 'yyyy-MM-dd')
+       this.obj.date=this.timeCode
+       this.getPerformanceDetailC()
+      if (this.titleTime !== utils.formatDate(this.currentDate, 'yyyy-MM')) {
+        this.isShow = false
+      } else {
+        this.isShow = true
+      }
+    },
+    formatDate1() {
+      // console.log(utils.formatDate("2020-1-1"))
+      if(this.$route.params.parmas!==undefined){
+        this.titleTime=JSON.parse(this.$route.params.parmas).date.slice(0,7),
+        this.timeCode=JSON.parse(this.$route.params.parmas).date
+      }else{
+         this.titleTime = utils.formatDate(this.currentDate, 'yyyy-MM')
+         this.timeCode=utils.formatDate(this.currentDate, 'yyyy-MM-dd')
+      }
+      this.obj.date=this.timeCode
+      // console.log(this.titleTime)
+    },
+    checkTeam(obj) {
+      console.log(obj)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/performance/PerformanceList/${JSON.stringify(obj)}`,
+        },
+        routerInfo: {
+          path: `/performance/PerformanceList/${JSON.stringify(obj)}`,
+        },
+      })
+    },
+    //获取代理人关系
+    getBaseAgentInfo1() {
+      let date = {}
+      getBaseAgentInfo(date).then(res => {
+        // console.log(res)
+        if (res.result == 0) {
+          this.agentGrade = res.agentGrade,
+          this.unitName=res.unitName,
+          this.agentCode=res.jobNo,
+          this.obj.agentGrade=this.agentGrade,
+          this.obj.agentCode=this.agentCode
+          if (this.agentGrade == 'A101') {
+            this.mask = 1
+          }
+         this.getPerformanceDetailC()
+        }
+      })
+    },
+    //获取代理人下级头像
+    getPerformanceHeader1(){
+      let date = {}
+      getPerformanceHeader(date).then(res=>{
+          console.log(res)
+          if(res.result==0){
+            this.headerList=res.content
+          }
+      })
+    },
+     //获取代理人相关信息
+  getPerformanceDetailC(){
+    // console.log(this.agentCode)
+      let code = {
+        date: this.timeCode,
+        agentCode:this.agentCode
+      }
+      getPerformanceDetail(code).then((res) => {
+        // console.log(res)
+        if(res.result==0){
+            this.cbbb=res.content.list[0].cbbb,
+            this.cbjs=res.content.list[0].cbjs,
+            this.ysjs=res.content.list[0].ysjs,
+            this.agentCode=res.content.list[0].code
+        }
+      })
+    }
+  },
+}
 </script>
 <style scoped>
-    .header{
-        width:92%;
-    }
-    .content{
-        width:80%;
-    }
+.header {
+  width: 92%;
+}
+.content {
+  width: 86%;
+}
+.footer {
+  width: 100%;
+  line-height: 40px;
+}
+.content1 {
+  width: 100%;
+  overflow-x: scroll;
+}
 </style>

src/views/ebiz/performance/PerformanceList.vue

@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <div
+      class="border-gb mt20 header mh-auto van-cell:not(:last-child)::after h50 flex align-items-c"
+    >
+      <van-button
+        round
+        @click="goDetail(order)"
+        size="small"
+        class="ml15"
+        type="danger"
+        v-no-more-click="1000"
+      >当月</van-button>
+      <div @click="timePopup" class="fs12 red ml15">
+        {{titleTime}}
+        <img src="@/assets/images/u79.png" alt class="absolute mt2 ml5" />
+      </div>
+      <van-popup v-model="dateShow" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="year-month"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @cancel="handleCancel"
+          @confirm="handleEndDateConfirm"
+        />
+      </van-popup>
+      <div class="absolute right30 fs13 red" @click="checkDetails(parmas)">查看明细>></div>
+    </div>
+    <div class="c-gray-base fs13 ml25 mt10">所在机构：张伟组</div>
+    <div class="mt20">
+      <div class="h50 bg-white content mh-auto fs13 fw500">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>{{teamName}}承保标保（元）</div>
+          <div class="red">{{cbbb}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>{{teamName}}寿险承保件数</div>
+          <div class="red">{{cbjs}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>{{teamName}}承保FYC（元）</div>
+          <div class="red">{{cfyc}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>{{teamName}}综合开拓承保保费（元）</div>
+          <div class="red">{{zcbf}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收标保（元）</div>
+          <div class="red">{{ysbb}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收件数</div>
+          <div class="red">{{ysjs}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收FYC（元）</div>
+          <div class="red">{{yfyc}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="mt10 mh-auto content fs12 red">注：统计截至时间：2020-01-12 16：30</div>
+  </div>
+</template>
+<script>
+import { getBaseAgentInfo, getBranchInfos, getPerformanceDetail } from '@/api/ebiz/performance/performance'
+import utils from '@/assets/js/utils/date-utils'
+import common from '@/assets/js/common'
+import { Popup, DatetimePicker } from 'vant'
+export default {
+  name: 'performance',
+  components: {
+    [Popup.name]: Popup,
+    [DatetimePicker.name]: DatetimePicker,
+  },
+  data() {
+    return {
+      currentDate: new Date(),
+      dateShow: false,
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(),
+      titleTime: '',
+      code: 'A201',
+      isShow: true,
+      mask: '1',
+      cbbb:'',
+      cbjs:'',
+      ysjs:'',
+      cfyc:'0.00',
+      zcbf:'0.00',
+      ysbb:'0.00',
+      yfyc:'0.00',
+      teamName:'',
+      parmas:{}
+    }
+  },
+  created() {
+    console.log(JSON.parse(this.$route.params.obj))
+    //代理人编码
+    this.agentGrade = JSON.parse(this.$route.params.obj).agentGrade,
+    this.agentCode=JSON.parse(this.$route.params.obj).agentCode,
+    this.titleTime=JSON.parse(this.$route.params.obj).date.slice(0,7),
+    this.dateTime=JSON.parse(this.$route.params.obj).date
+    this.parmas.date=JSON.parse(this.$route.params.obj).date
+    this.parmas.mask=this.mask
+    console.log(typeof(this.titleTime))
+    console.log(this.agentGrade.slice(0,2))
+    if(this.agentGrade.slice(0,2)=='A2'){
+        this.teamName='直辖组'
+    }else if(this.agentGrade.slice(0,2)=='A3'){
+        this.teamName='直辖部'
+    }else if(this.agentGrade.slice(0,2)=='A4'){
+        this.teamName='大直辖'
+    }
+    if (this.titleTime !== String(utils.formatDate(this.currentDate, 'yyyy-MM'))) {
+        this.isShow = false
+      } else {
+        this.isShow = true
+      }
+    setTimeout(() => {
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('webview_right_button', {
+        btns: [
+          {
+            title: '考勤记录',
+            route: { flag: '', extra: {} },
+          },
+        ],
+      })
+    }, 1000)
+    // this.performanceData()
+    this.formatDate1()
+    this.getBranchInfos1()
+    this.getPerformanceDetail1()
+  },
+  mounted() {
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    timePopup() {
+      this.dateShow = true
+    },
+    handleCancel() {
+      this.dateShow = false
+    },
+    //开始时间
+    handleEndDateConfirm(e) {
+      this.dateShow = false
+      console.log(e)
+      this.titleTime = utils.formatDate(e, 'yyyy-MM')
+      console.log(this.titleTime)
+      this.dateTime=utils.formatDate(e, 'yyyy-MM-dd')
+      this.parmas.date=this.dateTime
+       this.getPerformanceDetail1()
+      // console.log(this.titleTime)
+      if (this.titleTime !== String(utils.formatDate(this.currentDate, 'yyyy-MM'))) {
+        this.isShow = false
+      } else {
+        this.isShow = true
+      }
+    },
+    formatDate1() {
+      // console.log(utils.formatDate("2020-1-1"))
+      // this.titleTime = utils.formatDate(this.currentDate, 'yyyy-MM')
+      // this.dateTime=utils.formatDate(this.currentDate, 'yyyy-MM-dd')       
+      console.log(this.dateTime)
+    },
+    checkDetails(parmas) {
+      if (this.code === 'A201') {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#/performance/Performance/${JSON.stringify(parmas)}`,
+          },
+          routerInfo: {
+            path: `/performance/Performance/${JSON.stringify(parmas)}`,
+          },
+        })
+      } else if (this.code === 'A301') {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#/performance/AttendanceInfo`,
+          },
+          routerInfo: {
+            path: `/performance/AttendanceInfo`,
+          },
+        })
+      }
+    },
+    getBranchInfos1(code) {
+      getBranchInfos(code).then((res) => {
+        // console.log(res)
+      })
+    },
+    getPerformanceDetail1() {
+      let code = {
+        date: this.dateTime,
+        agentCode: this.agentCode,
+      }
+      getPerformanceDetail(code).then((res) => {
+        console.log(res)
+        if(res.result==0){
+            this.cbbb=res.content.list[0].cbbb,
+            this.cbjs=res.content.list[0].cbjs,
+            this.ysjs=res.content.list[0].ysjs,
+            this.agentCode=res.content.list[0].code
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.header {
+  width: 92%;
+}
+.content {
+  width: 86%;
+}
+</style>