diff --git a/packages/xbot/AppCallDetails/AppCallDetails.vue b/packages/xbot/AppCallDetails/AppCallDetails.vue
new file mode 100644
index 00000000..a3108d83
--- /dev/null
+++ b/packages/xbot/AppCallDetails/AppCallDetails.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="AppCallDetails">
+    <keep-alive :include="['List']">
+      <component
+        ref="component"
+        :is="component"
+        @change="onChange"
+        :params="params"
+        :instance="instance"
+        :dict="dict"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from "./components/List";
+import GroupList from "./components/GroupList";
+
+export default {
+  name: "AppCallDetails",
+  label: "调用明细",
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      component: "List",
+      params: {},
+      include: [],
+
+    };
+  },
+  components: {
+    GroupList,
+    List
+  },
+  mounted() {
+    if (this.$route.params.id) {
+      this.component = 'Detail'
+      this.params = {
+        id: this.$route.params.id
+      }
+    }
+  },
+  methods: {
+    onChange(data) {
+      if (data.type === "GroupList") {
+        this.component = "GroupList";
+        this.params = data.params;
+      }
+      if (data.type === "List") {
+        this.component = "List";
+        this.params = data.params;
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getTableData();
+          }
+        });
+      }
+      
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.AppCallDetails {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>
diff --git a/packages/xbot/AppCallDetails/components/GroupList.vue b/packages/xbot/AppCallDetails/components/GroupList.vue
new file mode 100644
index 00000000..ca09915d
--- /dev/null
+++ b/packages/xbot/AppCallDetails/components/GroupList.vue
@@ -0,0 +1,247 @@
+<template>
+  <section class="GroupList">
+    <ai-list>
+      <template slot="title">
+        <ai-title title="调用详情" isShowBottomBorder isShowBack @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <!-- <ai-select v-model="search.matchStatus" :selectList="dict.getDict('xbotGroupMatchStatus')" placeholder="请选择是否匹配" @change="search.current = 1, getTableData()"/>
+            <ai-select v-model="search.status" :selectList="dict.getDict('xbotGroupStatus')" placeholder="请选择群状态" @change="search.current = 1, getTableData()"/>
+            <el-button type="primary" @click="match">自动匹配</el-button> -->
+            <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search.current = 1, getTableData()">
+            </el-date-picker>
+          </template>
+          <template #right>
+            <el-input
+              v-model="search.groupName"
+              size="small"
+              placeholder="群名称"
+              clearable
+              v-throttle="() => {search.current = 1, getTableData()}"
+              @clear="search.current = 1, search.groupName = '', getTableData()"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
+                  @getList="getTableData()" :col-configs="colConfigs">
+          <el-table-column slot="avatar" label="群聊头像"  align="left">
+            <template slot-scope="{ row }">
+              <img :src="row.avatar ? row.avatar : 'https://cdn.cunwuyun.cn/dvcp/group-img.png'" alt="" class="group-avatar">
+            </template>
+          </el-table-column>
+          <el-table-column slot="option" label="操作"  align="center">
+            <template slot-scope="{ row }">
+              <div class="table-options">
+                <el-button type="text" @click="edit(row)">编辑</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <ai-dialog
+      :visible.sync="dialog"
+      width="800px"
+      @close="dialog=false"
+      title="群关联信息"
+      @onConfirm="onConfirm">
+      <el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
+        <el-form-item label="群名称" style="width: 100%;">
+          <div>{{editInfo.nickname}}</div>
+        </el-form-item>
+        <el-form-item label="群主ID" style="width: 100%;">
+          <div>{{editInfo.managerWxid}}</div>
+        </el-form-item>
+        <el-form-item label="人员关联" prop="managerTpUserName" style="width: 100%;" :rules="[{ required: true, message: '请选择人员' }]">
+          <el-input disabled size="small" v-model="editInfo.managerTpUserName" clearable placeholder="请选择人员">
+            <template slot="append">
+              <ai-user-selecter refs="addTags" :isMultiple="false" :instance="instance" v-model="editInfo.user" @change="onChooseUser">
+                <el-button size="small">选择人员</el-button>
+              </ai-user-selecter>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "GroupList",
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        groupName: ''
+      },
+      tableData: [],
+      total: 0,
+      dialog: false,
+      editInfo: {},
+      time: []
+    }
+  },
+  created() {
+    this.dict.load('xbotGroupMatchStatus', 'xbotGroupStatus').then(() => {
+      this.getTableData()
+    })
+  },
+  computed: {
+    ...mapState(['user']),
+    colConfigs() {
+      return [
+        { slot: "avatar", label: '群聊头像'},
+        { prop: "nickname", label: '群名称', align: 'center'},
+        { prop: "managerNickname", label: '群主昵称', align: 'center'},
+        { prop: "aiTotal", label: '累计调用'},
+        { prop: "aiActive", label: '主动调用'},
+        { prop: "aiPassive", label: '被动调用'},
+      ]
+    },
+  },
+  methods: {
+    getTableData() {
+      this.instance.post(`/app/appmasssendingtaskbaidu/infoList`,null,{
+        params: {
+          ...this.search,
+          clientId: this.params.id,
+          beginTime: this.time[0] || '',
+          endTime: this.time[1] || '' ,
+        }
+      }).then(res => {
+        if(res?.data) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+    showDialog(row) {
+      this.dialog = true
+      this.groupInfo = row
+      this.getTableDataGroup()
+    },
+    getTableDataGroup() {
+      this.instance.post(`/app/xbotCallback/groupList`,null,{
+        params: {
+          // ...this.searchGroup,
+          current: 1,
+          managerWxid: this.groupInfo.loginUserId,
+          beginTime: this.time[0] || '',
+          endTime: this.time[1] || '' ,
+        }
+      }).then(res => {
+        if(res?.data) {
+          this.tableDataGroup = JSON.parse(res.data)
+          this.tableDataGroup.map((item) => {
+            item.num = item.member_list.length
+          })
+          // this.totalGroup = res.data.total
+        }
+      })
+    },
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'List',
+        isRefresh: !!isRefresh
+      })
+    },
+    match() {
+      this.instance.post(`/app/xbotCallback/automaticMatch`,null,{
+        params: {
+          managerWxid: this.params.loginUserId
+        }
+      }).then(res => {
+        if(res.code == 0) {
+          this.$message.success('匹配成功!')
+          this.getTableData()
+        }
+      })
+    },
+    edit(row) {
+      this.dialog = true
+      this.editInfo = {...row}
+      this.editInfo.user = [{id: row.managerTpwxid, name: row.managerTpUserName}]
+    },
+    onChooseUser(v) {
+      this.editInfo.wxUserId = v[0].id
+      this.editInfo.managerTpUserName = v[0].name
+      this.editInfo.user = v
+    },
+    onConfirm() {
+      this.$refs.editInfo.validate(v => {
+        if (v) {
+          this.instance.post('/app/xbotCallback/manualMatch', null, {
+            params: {
+              wxUserId: this.editInfo.wxUserId,
+              wxid: this.editInfo.wxid
+            }
+          }).then(res => {
+            if (res?.code == 0) {
+              this.dialog = false
+              this.getTableData()
+              this.$message.success('编辑成功!')
+            }
+          })
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.GroupList {
+  height: 100%;
+
+  .time-select {
+    padding: 0 16px;
+    height: 32px;
+    line-height: 32px;
+    border: 1px solid #d0d4dc;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    .el-icon-arrow-down {
+      line-height: 32px;
+    }
+  }
+
+  :deep .is-error {
+    .time-select {
+      border: 1px solid #f46!important;
+    }
+  }
+  .tips {
+    display: inline-block;
+    color: #999;
+    font-size: 14px;
+    margin-left: 16px;
+  }
+  .group-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+  :deep .ai-dialog__content--wrapper {
+    // height: 1000px;
+    // overflow-y: scroll;
+    .ai-table {
+      // height: 1000px;
+    }
+  }
+}
+</style>
diff --git a/packages/xbot/AppCallDetails/components/List.vue b/packages/xbot/AppCallDetails/components/List.vue
new file mode 100644
index 00000000..f8026cc4
--- /dev/null
+++ b/packages/xbot/AppCallDetails/components/List.vue
@@ -0,0 +1,322 @@
+<template>
+  <section class="List">
+    <ai-list>
+      <template slot="title">
+        <ai-title title="调用明细" isShowBottomBorder></ai-title>
+      </template>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-select v-model="configInfo.id" filterable placeholder="请选择机位" size="small" @change="configChange" clearable>
+              <el-option
+                v-for="item in configList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <ai-area-get
+              style="width: 180px;"
+              placeholder="所属地区"
+              :instance="instance"
+              v-model="search.areaId"
+              @change="getListInit"/>
+              <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getListInit()">
+            </el-date-picker>
+            <!-- <span class="tips">当前机位1有效期为：{{configInfo.validity}}&nbsp;&nbsp;&nbsp;&nbsp;ip地址为：{{configInfo.xbotIp}}</span> -->
+          </template>
+          <template #right>
+            <!-- <ai-download :instance="instance" url="/app/appepidemicbackhomerecord/export" fileName="调用明细" :disabled="tableData.length == 0">
+              <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+            </ai-download> -->
+            <el-input
+              v-model="search.loginUserName"
+              size="small"
+              v-throttle="() => { search.current = 1, getListInit() }"
+              placeholder="姓名/手机号"
+              clearable
+              @clear="search.current = 1, search.loginUserName = '', getListInit()"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
+                  @getList="getTableData()" :col-configs="colConfigs">
+          <el-table-column slot="avatar" label="头像 "  align="left" width="200">
+            <template slot-scope="{ row }">
+              <img :src="row.avatar ? row.avatar : 'https://cdn.cunwuyun.cn/dvcp/group-img.png'" alt="" class="group-avatar">
+            </template>
+          </el-table-column>
+          <el-table-column slot="options" label="操作"  align="center" width="200px">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="toGroup(row)">详情</el-button>
+              <!-- <el-button type="text" @click="toAnnouce(row)">推送任务</el-button> -->
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <ai-dialog
+      title="监控群聊"
+      :visible.sync="dialog"
+      :destroyOnClose="true"
+      width="720px"
+      :customFooter="true">
+        <ai-table :tableData="tableDataGroup" :isShowPagination="false"
+          @getList="getTableDataGroup()" :col-configs="colConfigsGroup">
+          <el-table-column slot="avatar" label="群聊头像"  align="left">
+            <template slot-scope="{ row }">
+              <img :src="row.avatar ? row.avatar : 'https://cdn.cunwuyun.cn/dvcp/group-img.png'" alt="" class="group-avatar">
+            </template>
+          </el-table-column>
+        </ai-table>
+        <div class="dialog-footer" slot="footer">
+          <el-button @click="dialog=false">关闭</el-button>
+        </div>
+    </ai-dialog>
+    <ai-dialog
+      title="所属地区设置"
+      :visible.sync="showArea"
+      :destroyOnClose="true"
+      width="720px"
+      @onConfirm="areaConfirm"
+      >
+      <el-form class="ai-form" :model="areaInfo" label-width="120px" ref="form">
+        <el-form-item prop="areaId" style="width: 100%;" label="所属地区" :rules="[{required: true, message: '请选择所属地区地区', trigger: 'change'}]">
+          <ai-area-get style="width: 400px;" placeholder="所属地区" :instance="instance" v-model="areaInfo.areaId" :name.sync="areaInfo.areaName" />
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "List",
+  props: {
+    instance: Function,
+    dict: Object
+  },
+  data() {
+    return {
+      search: {
+        areaId: '',
+        current: 1,
+        size: 10,
+        loginUserName: ''
+      },
+      tableData: [],
+      total: 0,
+      dialog: false,
+      configList: [],
+      configId: '',
+      configInfo: {id: ''},
+      groupInfo: {},
+      searchGroup: {
+        current: 1,
+        size: 10,
+      },
+      tableDataGroup: [],
+      totalGroup: 0,
+      showArea: false,
+      areaInfo: {},
+      time: []
+    }
+  },
+  created() {
+    this.dict.load('yesOrNo', 'deviceStatus').then(() => {
+      this.getConfigList()
+    })
+  },
+  computed: {
+    ...mapState(['user']),
+    colConfigs() {
+      return [
+        { slot: "avatar"},
+        { prop: "xbotName", label: '机位'},
+        { slot: "loginUserId", label: '用户id'},
+        { prop: "loginUserName", label: '姓名', align: "left"},
+        { prop: "phone", label: '手机号'},
+        { prop: "aiTotal", label: '累计调用'},
+        { prop: "aiActive", label: '主动调用'},
+        { prop: "aiPassive", label: '被动调用'},
+        { prop: "areaName", label: '所属地区'},
+        { slot: "option"},
+      ]
+    },
+    colConfigsGroup() {
+      return [
+        { slot: "avatar", label: '群聊头像'},
+        { prop: "nickname", label: '群聊名称', align: 'center'},
+        { prop: "is_manager", label: '是否管理员', dict: 'yesOrNo', align: 'center'},
+        { prop: "num", label: '群聊成员（人数）', align: 'center'},
+        // { prop: "phone", label: '群主'},
+      ]
+    },
+  },
+  methods: {
+    getConfigList() {
+      this.instance.post(`/app/appxbotconfig/list?size=1000`).then(res => {
+        if(res?.data) {
+          res.data.records.map((item) => {
+            item.label = item.xbotName
+            item.value = item.id
+          })
+          this.configList = res.data.records
+          // this.configInfo = this.configList[0]
+          this.getTableData()
+        }
+      })
+    },
+    configChange(e) {
+      if(e) {
+        this.configList.map((item) => {
+          if(item.id == e) {
+            this.configInfo = {...item}
+          }
+        })
+      }else {
+        this.configInfo = {id: ''}
+      }
+      this.search.current = 1
+      this.getTableData()
+    },
+    openWechat() {
+      this.instance.post(`/app/appxbotconfig/openWechat?id=${this.configInfo.id}`).then(res => {
+        if(res.code === 0) {
+          this.configInfo.status = 0
+          this.$message.success('启动成功!')
+        }
+      })
+    },
+    getListInit() {
+      this.search.current = 1
+      this.getTableData()
+    },
+    getTableData() {
+      this.instance.post(`/app/xbotCallback/list2`,null,{
+        params: {
+          ...this.search,
+          loginUserName: this.search.name,
+          beginTime: this.time[0] || '',
+          endTime: this.time[1] || '' ,
+          xbotId: this.configInfo.id ? this.configInfo.id : ''
+        }
+      }).then(res => {
+        if(res?.data) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+    showDialog(row) {
+      if(row.status == 1) {
+        this.dialog = true
+        this.groupInfo = row
+        this.getTableDataGroup()
+      }
+    },
+    changeArea(row) {
+      this.showArea = true
+      this.areaInfo = {...row}
+      this.$refs['form'].clearValidate();
+    },
+    areaConfirm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.instance.post(`app/xbotCallback/updateArea?id=${this.areaInfo.id}&areaId=${this.areaInfo.areaId}&areaName=${this.areaInfo.areaName}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('所属地区设置成功')
+              this.showArea = false
+              this.getListInit()
+            }
+          })
+        } else {
+          return false
+        }
+      });
+    },
+    getTableDataGroup() {
+      this.tableDataGroup = []
+      this.instance.post(`/app/xbotCallback/groupList`,null,{
+        params: {
+          // ...this.searchGroup,
+          current: 1,
+          managerWxid: this.groupInfo.loginUserId,
+          xbotId: this.groupInfo.xbotId
+        }
+      }).then(res => {
+        if(res?.data) {
+          var tableDataGroup = JSON.parse(res.data)
+          tableDataGroup.map((item) => {
+            item.num = item.member_list.length
+            if(item.total_member > 2) {
+              this.tableDataGroup.push(item)
+            }
+          })
+        }
+      })
+    },
+    toGroup(row) {
+      this.$emit('change', {
+        type: 'GroupList',
+        params:row
+      })
+    },
+    toAnnouce(row) {
+      this.$emit('change', {
+        type: 'AnnounceList',
+        params: row,
+        isRefresh: true
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.List {
+  height: 100%;
+
+  .time-select {
+    padding: 0 16px;
+    height: 32px;
+    line-height: 32px;
+    border: 1px solid #d0d4dc;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    .el-icon-arrow-down {
+      line-height: 32px;
+    }
+  }
+
+  :deep .is-error {
+    .time-select {
+      border: 1px solid #f46!important;
+    }
+  }
+  .tips {
+    display: inline-block;
+    color: #999;
+    font-size: 14px;
+    margin-left: 16px;
+  }
+  .group-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+  :deep .ai-dialog__content--wrapper {
+    // height: 1000px;
+    // overflow-y: scroll;
+    .ai-table {
+      // height: 1000px;
+    }
+  }
+}
+</style>