diff --git a/src/api/serveDetail/index.js b/src/api/serveDetail/index.js
index 6efb266..5d8a0f8 100644
--- a/src/api/serveDetail/index.js
+++ b/src/api/serveDetail/index.js
@@ -7,3 +7,11 @@ export function getList(params){
     params
   })
 }
+
+export function serveList(params){
+  return request({
+    method:'get',
+    url:'/api/admin/serve-detail/serve-list',
+    params
+  })
+}
diff --git a/src/views/finance/component/detailServe.vue b/src/views/finance/component/detailServe.vue
index 0fc560b..eb3aa9e 100644
--- a/src/views/finance/component/detailServe.vue
+++ b/src/views/finance/component/detailServe.vue
@@ -100,6 +100,7 @@ export default {
         this.getDetail()
       }else{
         this.id = ''
+        this.$emit('close')
       }
     }
   }
@@ -115,4 +116,5 @@ export default {
     padding: 10px 0;
   }
 }
+
 </style>
diff --git a/src/views/finance/component/serveDraw.vue b/src/views/finance/component/serveDraw.vue
new file mode 100644
index 0000000..8ebbc94
--- /dev/null
+++ b/src/views/finance/component/serveDraw.vue
@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <el-drawer
+      size="46%"
+      :title="row.name || ''"
+      :visible.sync="isShow"
+      direction="rtl">
+      <template>
+        <div class="draw-title">用户信息</div>
+        <div style="margin-left: 2%;">
+          <div style="margin-bottom: 8px;">
+            <span class="info-title">性别</span>
+            <span class="info-content">{{ row.sex }}</span>
+          </div>
+          <div style="margin-bottom: 8px;">
+            <span class="info-title">身份证号</span>
+            <span class="info-content">{{ row.idcard }}</span>
+          </div>
+          <div style="margin-bottom: 8px;">
+            <span class="info-title">电话</span>
+            <span class="info-content">{{ row.phone }}</span>
+          </div>
+          <div style="margin-bottom: 8px;">
+            <span class="info-title">联系人</span>
+            <span class="info-content">{{ row.contact_name }} / {{ row.contact_phone }}</span>
+          </div>
+        </div>
+        <div class="draw-title">服务记录</div>
+        <div style="padding: 0 10px;">
+          <xy-table :is-page="false" :list="list" :table-item="table">
+            <template v-slot:btns>
+            </template>
+          </xy-table>
+        </div>
+      </template>
+    </el-drawer>
+
+    <detail ref="detail" @close="isShow = true"></detail>
+  </div>
+</template>
+
+<script>
+import {getList} from '@/api/serveDetail'
+import moment from "moment";
+
+import detail from './detailServe'
+export default {
+  components:{
+    detail
+  },
+  data() {
+    return {
+      isShow:false,
+      row:{},
+
+      select:{
+        page: 1,
+        page_size:9999,
+        customer_id:'',
+        year:'',
+        month:''
+      },
+      list:[],
+      table:[
+        {
+          prop:'nurse.name',
+          label:'护工',
+          width: 124
+        },
+        {
+          prop:'customer_address.address',
+          label:'上门地址',
+          minWidth: 160,
+          align:'left'
+        },
+        {
+          label:'服务时间',
+          width: 200,
+          customFn:(row) => {
+            return (
+              <div>{ moment(row.start_time).format('YYYY-MM-DD HH:mm') }~{ moment(row.end_time).format('HH:mm') }</div>
+            )
+          }
+        },
+        {
+          label:'状态',
+          width: 80,
+          customFn:(row) => {
+            let map1 = new Map([
+              [0,'待护理'],
+              [1,'进行中'],
+              [2,'已完成']
+            ])
+            let map2 = new Map([
+              [0,'blue'],
+              [1,'red'],
+              [2,'green']
+            ])
+            return (
+              <div style={{'color':map2.get(row.status)}}>
+                {map1.get(row.status)}
+              </div>
+            )
+          }
+        },
+        {
+          label:'详情',
+          width: 74,
+          customFn:(row) => {
+            let _this = this
+            return (
+              <div>
+                <Button
+                  type="primary"
+                  size="small"
+                  on={
+                    {
+                      ['click']:() => {
+                        _this.$refs['detail'].time =  moment(row.start_time).format('YYYY-MM-DD HH:mm') + '~' + moment(row.end_time).format('HH:mm')
+                        _this.$refs['detail'].id = row.id
+                        _this.$refs['detail'].isShow = true
+                        _this.isShow = false
+                      }
+                    }
+                  }>查看</Button>
+              </div>
+            )
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    async getList(){
+      const res = await getList(this.select)
+      this.list = res.data
+      console.log(this.list)
+    }
+  },
+  watch:{
+    isShow(val){
+      if(val){
+        this.getList()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.draw-title{
+  letter-spacing: 2px;
+  font-weight: 600;
+
+  position: relative;
+  padding: 10px 8px 10px 30px;
+  &::after{
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background: #B3241D;
+
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    left: 10px;
+  }
+}
+
+.info-title{
+  font-weight: 600;
+}
+.info-content{
+
+  padding-left: 10px;
+}
+
+::v-deep .el-drawer__header > :first-child{
+  font-size: 18px;
+  font-weight: 600;
+}
+</style>
diff --git a/src/views/finance/serveDetail.vue b/src/views/finance/serveDetail.vue
index f6c823e..636f05f 100644
--- a/src/views/finance/serveDetail.vue
+++ b/src/views/finance/serveDetail.vue
@@ -4,7 +4,33 @@
       <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="服务明细">
         <div slot="content"></div>
         <slot>
-          <div>
+          <div style="display: flex;align-items: center">
+            <el-radio-group v-model="datePickMode" size="small" style="margin-right: 10px;">
+              <el-radio-button :label="0">年</el-radio-button>
+              <el-radio-button :label="1">月</el-radio-button>
+            </el-radio-group>
+            <template v-if="datePickMode">
+              <el-date-picker
+                size="small"
+                placeholder="请选择时间"
+                style="width: 200px;margin-right: 10px;"
+                v-model="select.month"
+                type="month"
+                value-format="yyyy-MM"
+                @change="datePick">
+              </el-date-picker>
+            </template>
+            <template v-else>
+              <el-date-picker
+                size="small"
+                placeholder="请选择时间"
+                style="width: 200px;margin-right: 10px;"
+                v-model="select.year"
+                type="year"
+                value-format="yyyy"
+                @change="datePick">
+              </el-date-picker>
+            </template>
             <Input v-model="select.keyword" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
             <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getList()">查询</Button>
           </div>
@@ -27,27 +53,30 @@
       </template>
     </xy-table>
 
-    <detailServe ref="detailServe"></detailServe>
+    <serveDraw ref="serveDraw"></serveDraw>
   </div>
 </template>
 
 <script>
-import {getList} from '@/api/serveDetail'
-import {parseTime} from "@/utils"
+import {serveList} from '@/api/serveDetail'
+import {parseTime,getAgeByIdcard} from "@/utils"
 
-import detailServe from "@/views/finance/component/detailServe";
+import serveDraw from "@/views/finance/component/serveDraw";
 export default {
   components:{
-    detailServe
+    serveDraw
   },
   data() {
     return {
+      isShowDraw:false,
       isShowDetail:false,
+      datePickMode:1,//0为年1为月
       select:{
         page:1,
         page_size:10,
-        area_id:'',
-        keyword:''
+        keyword:'',
+        year:`${new Date().getFullYear()}`,
+        month:`${new Date().getFullYear()}-${new Date().getMonth()+1}`,
       },
       types:[],
 
@@ -55,71 +84,69 @@ export default {
       list:[],
       table:[
         {
-          prop:'nurse.name',
-          label:'护工',
-          width:200
+          prop:'name',
+          label:'客户姓名',
+          width: 140
         },
         {
-          prop:'date',
-          label:'服务日期',
-          width: 200
+          prop:'idcard',
+          label:'年龄',
+          width: 80,
+          formatter:(cell,data,value) => {
+            return getAgeByIdcard(value)
+          }
         },
         {
-          label:'时间段',
-          width: 170,
-          customFn:(row) => {
-            return (
-              <div>{parseTime(new Date(row.start_time),'{h}:{i}')}~{parseTime(new Date(row.end_time),'{h}:{i}')}</div>
-            )
-          }
+          prop:'sex',
+          label:'性别',
+          width: 80
         },
         {
-          label:'订单编号',
-          prop:'no',
-          width: 240
+          prop:'idcard',
+          label:'身份证号',
+          width: 170
         },
         {
-          prop:'customer.name',
-          label:'服务对象',
-          width: 200
+          prop:'phone',
+          label:'手机号',
+          width: 140
         },
         {
-          label:'上门地址',
-          minWidth:300,
-          align:'left',
-          prop:'customer_address.address'
+          prop:'server_total',
+          label:'服务次数',
+          width: 120
         },
         {
-          label:'服务状态',
-          prop:'status',
-          width: 180,
-          formatter:(cell,data,value) => {
-            switch (value){
-              case 0:
-                return '已排班未服务'
-                break;
-              case 1:
-                return '已排班未服务'
-                break;
-              case 2:
-                return '已服务'
-                break;
-              default:
-                return value
-            }
-          }
+          prop:'server_time',
+          label:'服务时长',
+          width: 120
+        },
+        {
+          prop:'remark',
+          label:'备注',
+          minWidth: 200
         }
-      ]
+      ],
     }
   },
   methods: {
+    datePick(){
+      if(this.datePickMode){
+        this.select.year = ''
+      }else{
+        this.select.month = ''
+      }
+    },
+
     detail(scope){
-      this.$refs['detailServe'].time = `${parseTime(new Date(scope.row.start_time),'{h}:{i}')} ~ ${parseTime(new Date(scope.row.end_time),'{h}:{i}')}`
-      this.$refs['detailServe'].id = scope.row.id
-      this.$refs['detailServe'].isShow = true
+      this.$refs['serveDraw'].row = scope.row
+      this.$refs['serveDraw'].select.customer_id = scope.row.id
+      this.$refs['serveDraw'].select.year = this.select.year
+      this.$refs['serveDraw'].select.month = this.select.month
+      this.$refs['serveDraw'].isShow = true
     },
     async getList(){
-      const res = await getList(this.select)
+      const res = await serveList(this.select)
       this.total = res.total
       this.list = res.data
       console.log(this.list)