From adc4f901b8d5501cc605edad351c80e7cf962d17 Mon Sep 17 00:00:00 2001
From: liuxi <357439530@qq.com>
Date: Mon, 13 Jan 2025 18:28:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=88=E4=BB=B6=E8=B0=83=E8=A7=A3=E5=AE=A4?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LayoutContentNew.vue           | 760 ++++++------------
 .../components/MediationRoom.vue              | 739 +++++++++++++++++
 src/pages/mediation-page/index.vue            |   4 +-
 src/pages/workbench/index.vue                 |   2 +-
 4 files changed, 980 insertions(+), 525 deletions(-)
 create mode 100644 src/pages/mediation-page/components/MediationRoom.vue

diff --git a/src/pages/mediation-page/components/LayoutContentNew.vue b/src/pages/mediation-page/components/LayoutContentNew.vue
index 8f740ff..fa64d7f 100644
--- a/src/pages/mediation-page/components/LayoutContentNew.vue
+++ b/src/pages/mediation-page/components/LayoutContentNew.vue
@@ -1,513 +1,294 @@
 <template>
-  <div style=" height: 100%;">
-    <div class="layout-center-wrap flex-column">
-      <!-- 上部数据 -->
-      <div class="layout-center-top-wrap flex-row justify-content-between">
-        <div class="top-wrap-title flex-row justify-content-between"></div>
-        <div class="top-wrap-btn-left flex-row justify-content-between">
-          <div class="flex-row justify-content-between align-items-center mr-16">
-            <el-button class="bg-F2F3F5" icon="el-icon-arrow-left" circle></el-button>
-            <div class="ml-16 mr-16 flex-row justify-content-between align-items-center">
-              <div class="mr-8 f16">{{ baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name }}</div>
-              <div class="mr-8">
-                <el-tag size="small" type="warning">{{ baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').addr }}</el-tag>
-              </div>
-              <div class="mr-8 f16 color-FF7D00"><i class="el-icon-warning"></i></div>
-              <div class="f16 color-165DFF"><i class="el-icon-success"></i></div>
-            </div>
-            <el-button class="bg-F2F3F5" icon="el-icon-arrow-right" circle></el-button>
-          </div>
+   
+  <!-- 中间数据 -->
+  <div class="layout-center-center-wrap flex-row justify-content-between">
+    <!-- 左边数据 -->
+    <div class="layout-center-left-wrap flex-row justify-content-between">
+      <div class="layout-center-left1-wrap flex-column justify-content-start">
+        <span class="left-rbobot">
+            <img src="../../../assets/image/mediate/m-info-robot.png"/>
+        </span>
+        <span class="separation"></span>
 
-          <el-button type="warning" icon="el-icon-message" circle></el-button>
-
-          <div class="wrap-btn-left-dial pl-22 pr-24 f14 flex-row justify-content-between ml-16">
-            <div class="mr-24 flex-row justify-content-between align-items-center">
-              <div class="mr-8 f16 color-F53F3F"><i class="el-icon-video-pause"></i></div>
-              <div class="mr-8">暂停拨打</div>
-              <div class="mr-8 f12 color-000">01:00</div>
-              <div class="mr-8 f20"><i class="el-icon-phone-outline"></i></div>
-              <div class="mr-8 f20"><i class="el-icon-microphone"></i></div>
-              <div class="mr-8 ai-logo-img"></div>
-            </div>
-            <div class="flex-row justify-content-between align-items-center f14">
-              <div class="flex-row justify-content-between align-items-center mr-24">
-                <div class="mr-8 f16"><i class="el-icon-s-operation"></i></div>
-                <div>队列 <span class="color-000">200</span></div>
-              </div>
-              <div class="mr-24">已拨打 <span class="color-000">200</span></div>
-              <div class="mr-24">已接通 <span class="color-000">200</span></div>
-              <div>未接通 <span class="color-000">200</span></div>
-            </div>
-          </div>
-        </div>
-        <div class="flex-row justify-content-between">
-          <el-button icon="el-icon-setting" circle></el-button>
-          <el-button icon="el-icon-switch-button" circle @click="handleBack"></el-button>
-        </div>
+        <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @click="leftActive = 1">
+            <img src="../../../assets/image/mediate/m-info1.png"/>
+            <a>基本信息</a>
+        </span>
+        <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @click="leftActive = 2">
+            <img src="../../../assets/image/mediate/m-info2.png"/>
+            <a>联系人</a>
+        </span>
+        <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @click="leftActive = 3">
+            <img src="../../../assets/image/mediate/m-info3.png"/>
+            <a>案件材料</a>
+        </span>
+        <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @click="leftActive = 4">
+            <img src="../../../assets/image/mediate/m-info4.png"/>
+            <a>案件文书</a>
+        </span>
+        <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @click="leftActive = 5">
+            <img src="../../../assets/image/mediate/m-info5.png"/>
+            <a>还款计划</a>
+        </span>
+        <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @click="leftActive = 6">
+            <img src="../../../assets/image/mediate/m-info6.png"/>
+            <a>还款凭证</a>
+        </span>
       </div>
-      <!-- 中间数据 -->
-      <div class="layout-center-center-wrap flex-row justify-content-between">
-        <!-- 左边数据 -->
-        <div class="layout-center-left-wrap flex-row justify-content-between">
-          <div class="layout-center-left1-wrap flex-column justify-content-start">
-            <span class="left-rbobot">
-                <img src="../../../assets/image/mediate/m-info-robot.png"/>
-            </span>
-            <span class="separation"></span>
+      <div class="layout-center-left2-wrap">
+        <el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
+          <!-- 债务信息 -->
+          <div v-if="leftActive == 1" class="case-debt-info">
+            <div class="descriptions-t">
+              <div class="f16 f-weight600 descriptions-t-title">基本信息</div>
+              <div class="flex-row descriptions-t-item">
+                <div class="descriptions-t-item-l color-86909C">案件包名称:</div>
+                <div class="descriptions-t-item-r">{{baseInfo.casePkg}}</div>
+              </div>
+              <div class="flex-row descriptions-t-item bgColor-F7F8FA">
+                <div class="descriptions-t-item-l color-86909C">金融产品名称:</div>
+                <div class="descriptions-t-item-r">{{baseInfo.productTypeId}}</div>
+              </div>
+              <div class="flex-row descriptions-t-item">
+                <div class="descriptions-t-item-l color-86909C">金融机构名称:</div>
+                <div class="descriptions-t-item-r">{{baseInfo.financialOrgName}}</div>
+              </div>
+              <div class="flex-row descriptions-t-item bgColor-F7F8FA">
+                <div class="descriptions-t-item-l color-86909C">案件编号:</div>
+                <div class="descriptions-t-item-r">{{baseInfo.caseNo}}</div>
+              </div>
+              <div class="flex-row descriptions-t-item">
+                <div class="descriptions-t-item-l color-86909C">合同名称:</div>
+                <div class="descriptions-t-item-r">{{baseInfo.fields.find(item => item.fieldKey == 'contactName').fieldValue}}</div>
+              </div>
+              <div class="flex-row descriptions-t-item bgColor-F7F8FA">
+                <div class="descriptions-t-item-l color-86909C">被申请人姓名:</div>
+                <div class="descriptions-t-item-r color-1960F4">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name}}</div>
+              </div>
+              <div class="flex-row descriptions-t-item">
+                <div class="descriptions-t-item-l color-86909C">被申请人手机号码:</div>
+                <div class="descriptions-t-item-r">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').phone}}</div>
+              </div>
+            </div>
 
-            <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @click="leftActive = 1">
-                <img src="../../../assets/image/mediate/m-info1.png"/>
-                <a>基本信息</a>
-            </span>
-            <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @click="leftActive = 2">
-                <img src="../../../assets/image/mediate/m-info2.png"/>
-                <a>联系人</a>
-            </span>
-            <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @click="leftActive = 3">
-                <img src="../../../assets/image/mediate/m-info3.png"/>
-                <a>案件材料</a>
-            </span>
-            <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @click="leftActive = 4">
-                <img src="../../../assets/image/mediate/m-info4.png"/>
-                <a>案件文书</a>
-            </span>
-            <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @click="leftActive = 5">
-                <img src="../../../assets/image/mediate/m-info5.png"/>
-                <a>还款计划</a>
-            </span>
-            <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @click="leftActive = 6">
-                <img src="../../../assets/image/mediate/m-info6.png"/>
-                <a>还款凭证</a>
-            </span>
-          </div>
-          <div class="layout-center-left2-wrap">
-            <el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
-              <!-- 债务信息 -->
-              <div v-if="leftActive == 1" class="case-debt-info">
-                <div class="descriptions-t">
-                  <div class="f16 f-weight600 descriptions-t-title">基本信息</div>
-                  <div class="flex-row descriptions-t-item">
-                    <div class="descriptions-t-item-l color-86909C">案件包名称:</div>
-                    <div class="descriptions-t-item-r">{{baseInfo.casePkg}}</div>
-                  </div>
-                  <div class="flex-row descriptions-t-item bgColor-F7F8FA">
-                    <div class="descriptions-t-item-l color-86909C">金融产品名称:</div>
-                    <div class="descriptions-t-item-r">{{baseInfo.productTypeId}}</div>
-                  </div>
-                  <div class="flex-row descriptions-t-item">
-                    <div class="descriptions-t-item-l color-86909C">金融机构名称:</div>
-                    <div class="descriptions-t-item-r">{{baseInfo.financialOrgName}}</div>
-                  </div>
-                  <div class="flex-row descriptions-t-item bgColor-F7F8FA">
-                    <div class="descriptions-t-item-l color-86909C">案件编号:</div>
-                    <div class="descriptions-t-item-r">{{baseInfo.caseNo}}</div>
-                  </div>
-                  <div class="flex-row descriptions-t-item">
-                    <div class="descriptions-t-item-l color-86909C">合同名称:</div>
-                    <div class="descriptions-t-item-r">{{baseInfo.fields.find(item => item.fieldKey == 'contactName').fieldValue}}</div>
-                  </div>
-                  <div class="flex-row descriptions-t-item bgColor-F7F8FA">
-                    <div class="descriptions-t-item-l color-86909C">被申请人姓名:</div>
-                    <div class="descriptions-t-item-r color-1960F4">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name}}</div>
-                  </div>
-                  <div class="flex-row descriptions-t-item">
-                    <div class="descriptions-t-item-l color-86909C">被申请人手机号码:</div>
-                    <div class="descriptions-t-item-r">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').phone}}</div>
-                  </div>
-                </div>
+            <div class="case-debt-info-call flex-row justify-content-between align-items-center">
+              <div class="flex-row align-items-center cursor-pointer">
+                <div class="f32 color-1960F4 mr-8"><i class="el-icon-phone"></i></div>
+                <div>呼叫被申请人</div>
+              </div>
+              <el-divider direction="vertical"></el-divider>
 
-                <div class="case-debt-info-call flex-row justify-content-between align-items-center">
-                  <div class="flex-row align-items-center cursor-pointer">
-                    <div class="f32 color-1960F4 mr-8"><i class="el-icon-phone"></i></div>
-                    <div>呼叫被申请人</div>
-                  </div>
-                  <el-divider direction="vertical"></el-divider>
-
-                  <el-popover
-                    placement="top"
-                    width="500"
-                    v-model="singlesmsvisible"
-                    title="发送短信"
-                    trigger="click">
-                    <singlesmsPopover :caseId="caseId" :singlesmsvisible.sync="singlesmsvisible"/>
-                    <span slot="reference" class="flex-row align-items-center cursor-pointer">
-                      <div class="f32 color-FF7D00 mr-8"><i class="el-icon-message"></i></div>
-                          <div>发送短信</div>
-                    </span>
-                </el-popover>
-
-                  <!-- <div class="flex-row align-items-center cursor-pointer">
+              <el-popover
+                  placement="top"
+                  width="500"
+                  v-model="singlesmsvisible"
+                  title="发送短信"
+                  trigger="click">
+                  <singlesmsPopover :caseId="caseId" :singlesmsvisible.sync="singlesmsvisible"/>
+                  <span slot="reference" class="flex-row align-items-center cursor-pointer">
                     <div class="f32 color-FF7D00 mr-8"><i class="el-icon-message"></i></div>
-                    <div>发送短信</div>
-                  </div> -->
-                </div>
+                        <div>发送短信</div>
+                  </span>
+              </el-popover>
 
-                <div class="descriptions-t mt-16">
-                  <div class="f16 f-weight600 descriptions-t-title">债务信息</div>
-                  <div class="flex-row descriptions-t-item">
-                    <div class="descriptions-t-item-l color-86909C">当前逾期金额:</div>
-                    <div class="descriptions-t-item-r color-F53F3F">{{baseInfo.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</div>
-                  </div>
+              <!-- <div class="flex-row align-items-center cursor-pointer">
+                <div class="f32 color-FF7D00 mr-8"><i class="el-icon-message"></i></div>
+                <div>发送短信</div>
+              </div> -->
+            </div>
 
-                  <div v-for="(item,index) in baseInfo.fields.filter(item => item.fieldGroup == 'DEBTINFO')" 
-                    :key="index" class="flex-row descriptions-t-item " :class="index % 2 === 0 ? 'bgColor-F7F8FA':''">
-                    <div class="descriptions-t-item-l color-86909C">{{item.name}}:</div>
-                    <div class="descriptions-t-item-r">{{item.fieldValue}}</div>
-                  </div>
-                  
-                </div>
+            <div class="descriptions-t mt-16">
+              <div class="f16 f-weight600 descriptions-t-title">债务信息</div>
+              <div class="flex-row descriptions-t-item">
+                <div class="descriptions-t-item-l color-86909C">当前逾期金额:</div>
+                <div class="descriptions-t-item-r color-F53F3F">{{baseInfo.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</div>
               </div>
 
-              <!-- 联系人信息 -->
-              <div v-if="leftActive == 2" class="case-contact-person">
-                <contactPerson :caseId="caseId" />
-                
+              <div v-for="(item,index) in baseInfo.fields.filter(item => item.fieldGroup == 'DEBTINFO')" 
+                :key="index" class="flex-row descriptions-t-item " :class="index % 2 === 0 ? 'bgColor-F7F8FA':''">
+                <div class="descriptions-t-item-l color-86909C">{{item.name}}:</div>
+                <div class="descriptions-t-item-r">{{item.fieldValue}}</div>
               </div>
-
-              <!-- 案件材料 -->
-              <div v-if="leftActive == 3" class="case-materials-person">
-                <caseMaterialLeft :caseId="caseId" />
-                
-              </div>
-
-              <!-- 案件文书 -->
-              <div v-if="leftActive == 4" class="case-office-person">
-                <cassWrit :caseId="caseId" />
-
-              </div>
-
-              <!-- 还款计划 -->
-              <div v-if="leftActive == 5" class="case-repayment-schedule">
-                <RepaymentSchedule :eventDialog.sync="eventDialog"/>
-              </div>
-              <!-- 还款凭证 -->
-              <div v-if="leftActive == 6" class="case-repayment-certificate">
-                <RepaymentCertificate :eventDialog.sync="eventDialog"/>
-              </div>
-
-            </el-scrollbar>
-
-          </div>
-        </div>
-        <!-- 右边 -->
-        <div class="layout-center-right-wrap flex-row">
-          <div class="right-wrap-left">
-            <!-- 人物画像  -->
-            <portraitPerson :caseId="caseId" />
-          </div>
-          <div class="right-wrap-right p-16">
-            <div class="line-height-30 f22 f-weight600">沟通记录</div>
-
-            <div class="flex-row justify-content-between align-items-center pt-16 pb-16">
-              <el-select v-model="mediaterecordpm.linkedWay" placeholder="请选择" @change="getmediate_record">
-                <el-option label="全部沟通" value=""></el-option>
-                <el-option label="电话沟通" value="1"></el-option>
-                <el-option label="视频沟通" value="2"></el-option>
-              </el-select>
-              <span>
-                <el-button plain icon="el-icon-plus" @click="visiblemediatRecord = true;visiblemediatRecordObj = null">新增沟通记录</el-button>
-
-                <el-button plain icon="el-icon-edit">个人调解备注</el-button>
-              </span>
               
             </div>
+          </div>
 
-            <el-scrollbar :style="'height:'+`${MediationrecordHeight}`+'px;padding:2px'">
-              <el-timeline class="padding-0">
-                <el-timeline-item v-for="(item,index) in communicationRecord" :key="index" :timestamp="item.recordDate" placement="top" type="primary">
-                  <el-card shadow="never" class="mt-8" v-for="(itemrecord,index) in item.records" :key="index">
-                    <div class="flex-row justify-content-between timeline-layout">
-                      <div class="timeline-layout-w">
-                        <div class="flex-row justify-content-between">
-                          <div class="flex-row">
-                            <div>{{ itemrecord.createAt | formaDate('hh:mm:ss')  }}</div>
-                            <div class="pl-8 pr-8">
-                              {{itemrecord.mediator}}
-                            </div>
-                            <!-- 电话 -->
-                            <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">
-                              <i v-if="itemrecord.callWay == 1" class="callphone-icon"></i>
-                              <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation != 1" class="callbackphone-icon"></i>
-                              <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation == 1" class="nocallphone-icon"></i>
-                            </div>
-                            <!-- 视频 -->
-                            <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 2">
-                              <i class="callvideo-icon"></i>
-                            </div>
-                            <!-- 微信 -->
-                            <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 3">
-                              <i class="callwechat-icon"></i>
-                            </div>
-                          </div>
-                          <span class="cursor-pointer" @click="visiblemediatRecord = true;visiblemediatRecordObj = itemrecord"><i class="ml-8 f14 el-icon-edit"></i></span>
-                        </div>
-                        <div class="timeline-layout-w-records mt-8 mb-8">
-                          <div class="flex-row align-items-center">
-                            <div>
-                              <span class="pr-8" v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index">
-                                {{ itemperson.name}}
-                                {{ itemrecord.linkedWay == 1 ? itemperson.phone :''}}
-                                <el-tag class="mr-8" size="small" effect="plain" style="height: 22px;">{{itemperson.type}}</el-tag>
-                              </span>
-                            </div>
-                            
-                            <el-tag size="small" effect="plain" style="height: 22px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>
-                          </div>
-                          <!-- 电话 -->
-                          <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">
-                            <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>
-                            <el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
-                            <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
-                          </div>
-                          <!-- 视频 -->
-                          <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">
-                            <div v-if="itemrecord.linkedType == 1">视频{{itemrecord.linkedDuration}}秒</div>
-                            <el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
-                            <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div>
-                          </div>
-                          <!-- 微信 -->
-                          <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">
-                            <!-- <div>通话44秒</div> -->
-                            <div class="text-center cursor-pointer">查看文件</div>
-                          </div>
-
-                        </div>
-
-                        <div>
-                          沟通备注：
-                          <span class="color-FF7D00">{{itemrecord.communicationRemarks}}</span>
-                          
-                        </div>
-                      </div>
-                      <div class="timeline-layout-w timeline-layout-ai">
-                        <div class="flex-row align-items-center">
-                          <div class="mr-8 ai-logo-img"></div>
-                          <div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
-                        </div>
-                        <div class="pt-8">
-                          由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
-                        </div>
-                      </div>
-                    </div>
-                  </el-card>
-                </el-timeline-item>
-              </el-timeline>
-            </el-scrollbar>
+          <!-- 联系人信息 -->
+          <div v-if="leftActive == 2" class="case-contact-person">
+            <contactPerson :caseId="caseId" />
             
+          </div>
+
+          <!-- 案件材料 -->
+          <div v-if="leftActive == 3" class="case-materials-person">
+            <caseMaterialLeft :caseId="caseId" />
+            
+          </div>
+
+          <!-- 案件文书 -->
+          <div v-if="leftActive == 4" class="case-office-person">
+            <cassWrit :caseId="caseId" />
 
           </div>
-          <div class="right-wrap-side">
-            <SidebarTool :caseId="caseId" />
+
+          <!-- 还款计划 -->
+          <div v-if="leftActive == 5" class="case-repayment-schedule">
+            <RepaymentSchedule :eventDialog.sync="eventDialog"/>
+          </div>
+          <!-- 还款凭证 -->
+          <div v-if="leftActive == 6" class="case-repayment-certificate">
+            <RepaymentCertificate :eventDialog.sync="eventDialog"/>
           </div>
-        </div>
 
-      </div>
-
-    </div>
-
-    <div class="flex-row align-items-center pl-24 pr-24 btn-group-controls">
-      <div class="pt-16 pb-16 flex-row justify-content-between align-items-center btn-group-real-time">
-        <el-badge :value="3" class="item">
-          <i class="f24 el-icon-phone cursor-pointer color-52ABF2"></i>
-        </el-badge>
-        <el-badge :value="3" class="item">
-          <i class="f24 el-icon-video-camera cursor-pointer color-52ABF2"></i>
-        </el-badge>
-      </div>
-      <div class="ml-24 mr-24 btn-group-interval"></div>
-      <div class="flex-row justify-content-between align-items-center btn-group-processing-event">
-
-        <div class="flex-row justify-content-between align-items-center cursor-pointer" @click="visiblePopover={caseId: caseId}">
-          <i class="f24 el-icon-video-camera color-4E5969"></i>
-          <div class="pl-4 f14">预约</div>
-        </div>
-
-        <div class="flex-row justify-content-between align-items-center cursor-pointer">
-          <i class="f24 el-icon-document color-4E5969"></i>
-          <div class="pl-4 f14">协议</div>
-        </div>
-
-        <el-popover 
-            placement="top"
-            width="500"
-            v-model="singleofficevisible"
-            title="发起签字"
-            trigger="click">
-            <singleofficeWritPopover :caseId="caseId" :singleofficevisible.sync="singleofficevisible"/>
-            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
-              <i class="f24 el-icon-document-remove color-4E5969"></i>
-              <a class="pl-4 f14">签字</a>
-            </span>
-        </el-popover>
-
-        
-        <el-popover 
-            placement="top"
-            width="500"
-            v-model="singlesealvisible"
-            title="发起签章"
-            trigger="click">
-            <singleofficeSealPopover :caseId="caseId" :singlesealvisible.sync="singlesealvisible"/>
-            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
-              <i class="f24 el-icon-s-check color-4E5969"></i>
-              <a class="pl-4 f14">签章</a>
-            </span>
-        </el-popover>
-
-        <el-popover 
-            placement="top"
-            width="500"
-            v-model="singledeliveryvisible"
-            title="发起送达"
-            trigger="click">
-            <singleofficeDeliveryPopover :caseId="caseId" :singledeliveryvisible.sync="singledeliveryvisible"/>
-            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
-              <i class="f24 el-icon-s-claim color-4E5969"></i>
-              <a class="pl-4 f14">送达</a>
-            </span>
-        </el-popover>
-        
-        
-        <div class="flex-row justify-content-between align-items-center cursor-pointer">
-          <i class="f24 el-icon-wallet color-4E5969"></i>
-          <div class="pl-4 f14">类案</div>
-        </div>
-        <div class="flex-row justify-content-between align-items-center cursor-pointer">
-          <i class="f24 el-icon-document-checked color-4E5969"></i>
-          <div class="pl-4 f14">办结</div>
-        </div>
-        <div class="flex-row justify-content-between align-items-center cursor-pointer">
-          <i class="f24 el-icon-document-delete color-4E5969"></i>
-          <div class="pl-4 f14">失败</div>
-        </div>
-        <div class="flex-row justify-content-between align-items-center cursor-pointer">
-          <i class="f24 el-icon-user-solid color-4E5969"></i>
-          <div class="pl-4 f14">帮扶</div>
-        </div>
-
-        <el-popover
-            placement="top"
-            width="400"
-            v-model="singlejointlyvisible"
-            title="案件协办"
-            trigger="click">
-            <singleJointlyPopover :caseId="caseId" :singlejointlyvisible.sync="singlejointlyvisible" @handleSubmit="getCaseInfoById()"/>
-            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
-              <i class="f24 el-icon-s-management color-4E5969"></i>
-              <a class="pl-4 f14">协办</a>
-            </span>
-        </el-popover>
+        </el-scrollbar>
 
       </div>
     </div>
+    <!-- 右边 -->
+    <div class="layout-center-right-wrap flex-row">
+      <div class="right-wrap-left">
+        <!-- 人物画像  -->
+        <portraitPerson :caseId="caseId" />
+      </div>
+      <div class="right-wrap-right p-16">
+        <div class="line-height-30 f22 f-weight600">沟通记录</div>
+
+        <div class="flex-row justify-content-between align-items-center pt-16 pb-16">
+          <el-select v-model="mediaterecordpm.linkedWay" placeholder="请选择" @change="getmediate_record">
+            <el-option label="全部沟通" value=""></el-option>
+            <el-option label="电话沟通" value="1"></el-option>
+            <el-option label="视频沟通" value="2"></el-option>
+          </el-select>
+          <span>
+            <el-button plain icon="el-icon-plus" @click="visiblemediatRecord = true;visiblemediatRecordObj = null">新增沟通记录</el-button>
+
+            <el-button plain icon="el-icon-edit">个人调解备注</el-button>
+          </span>
+          
+        </div>
+
+        <el-scrollbar :style="'height:'+`${MediationrecordHeight}`+'px;padding:2px'">
+          <el-timeline class="padding-0">
+            <el-timeline-item v-for="(item,index) in communicationRecord" :key="index" :timestamp="item.recordDate" placement="top" type="primary">
+              <el-card shadow="never" class="mt-8" v-for="(itemrecord,index) in item.records" :key="index">
+                <div class="flex-row justify-content-between timeline-layout">
+                  <div class="timeline-layout-w">
+                    <div class="flex-row justify-content-between">
+                      <div class="flex-row">
+                        <div>{{ itemrecord.createAt | formaDate('hh:mm:ss')  }}</div>
+                        <div class="pl-8 pr-8">
+                          {{itemrecord.mediator}}
+                        </div>
+                        <!-- 电话 -->
+                        <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">
+                          <i v-if="itemrecord.callWay == 1" class="callphone-icon"></i>
+                          <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation != 1" class="callbackphone-icon"></i>
+                          <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation == 1" class="nocallphone-icon"></i>
+                        </div>
+                        <!-- 视频 -->
+                        <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 2">
+                          <i class="callvideo-icon"></i>
+                        </div>
+                        <!-- 微信 -->
+                        <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 3">
+                          <i class="callwechat-icon"></i>
+                        </div>
+                      </div>
+                      <span class="cursor-pointer" @click="visiblemediatRecord = true;visiblemediatRecordObj = itemrecord"><i class="ml-8 f14 el-icon-edit"></i></span>
+                    </div>
+                    <div class="timeline-layout-w-records mt-8 mb-8">
+                      <div class="flex-row align-items-center">
+                        <div>
+                          <span class="pr-8" v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index">
+                            {{ itemperson.name}}
+                            {{ itemrecord.linkedWay == 1 ? itemperson.phone :''}}
+                            <el-tag class="mr-8" size="small" effect="plain" style="height: 22px;">{{itemperson.type}}</el-tag>
+                          </span>
+                        </div>
+                        
+                        <el-tag size="small" effect="plain" style="height: 22px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>
+                      </div>
+                      <!-- 电话 -->
+                      <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">
+                        <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>
+                        <el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
+                        <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
+                      </div>
+                      <!-- 视频 -->
+                      <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">
+                        <div v-if="itemrecord.linkedType == 1">视频{{itemrecord.linkedDuration}}秒</div>
+                        <el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
+                        <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div>
+                      </div>
+                      <!-- 微信 -->
+                      <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">
+                        <!-- <div>通话44秒</div> -->
+                        <div class="text-center cursor-pointer">查看文件</div>
+                      </div>
+
+                    </div>
+
+                    <div>
+                      沟通备注：
+                      <span class="color-FF7D00">{{itemrecord.communicationRemarks}}</span>
+                      
+                    </div>
+                  </div>
+                  <div class="timeline-layout-w timeline-layout-ai">
+                    <div class="flex-row align-items-center">
+                      <div class="mr-8 ai-logo-img"></div>
+                      <div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
+                    </div>
+                    <div class="pt-8">
+                      由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
+                    </div>
+                  </div>
+                </div>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-scrollbar>
+        
+
+      </div>
+      <div class="right-wrap-side">
+        <SidebarTool :caseId="caseId" />
+      </div>
+    </div>
 
-    <caseVideoReservationDialog v-if="visiblePopover" :visible-popover.sync="visiblePopover" />
     <MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecordObj="visiblemediatRecordObj" :caseId="caseId" :visiblemediatRecord.sync="visiblemediatRecord" />
-    <!--  视频房间  -->
-    <VideoRoom v-if="VideoCallDialog" :eventDialog.sync="VideoCallDialog" />
   </div>
 
 </template>
 <script>
 import api from "@/services/caseManagement";
-import eventTracingApi from "@/services/eventTracingApi";
-import videoTelephone from "@/services/videoTelephone";
 export default {
   components: {
-    uploadFile: () => import('@/components/uploadFile.vue'),//上传
     RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
     RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
     caseMaterial: () => import('./caseMaterial'),//
     caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
     contactPerson: () => import('./contactPerson'),//联系人左
     cassWrit: () => import('./cassWrit'),//
-    caseVideoReservationDialog: () => import('./caseVideoReservationDialog'),//
     portraitPerson: () => import('./portraitPerson.vue'),//人物画像
     SidebarTool: () => import('./SidebarTool'),
-
-    singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
-    singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
-    singleofficeDeliveryPopover: () => import('./singleofficeDeliveryPopover.vue'),//发起送达
-    MediationRecordDialog: () => import('./MediationRecordDialog.vue'),//调解记录
-    singleJointlyPopover: () => import('./singleJointlyPopover.vue'),//案件协办
     singlesmsPopover: () => import('./singlesmsPopover.vue'),//发送短信
-    VideoRoom: () => import('./VideoRoom'),
+    MediationRecordDialog: () => import('./MediationRecordDialog.vue'),//调解记录
   },
   data() {
     return {
       singlesmsvisible:false,
-      singlejointlyvisible:false,
       visiblemediatRecord:false,
       visiblemediatRecordObj:null,
-      singledeliveryvisible:false,
-      singlesealvisible:false,
-      singleofficevisible:false,
       eventDialog: {caseId: this.$route.query.caseId},
       leftActive: 1,
-      rightActive: 1,
       fileList: [],
       mediationRecord: [],//调解记录
       baseInfo: {},//基本信息
       obligorInfo: [],//债务人信息
       caseId: '',//案件id
-      // 联系人
-      contactAddObj: {},
-      contactAddFlag: false,
-      contactObj: {},
-      contactUpdate: false,
-      relationOptions: [{label: '本人', value: '本人'}, {label: '父母', value: '父母'}, {label: '配偶', value: '配偶'},
-        {label: '子女', value: '子女'}, {label: '其他', value: '其他'}, {label: '朋友', value: '朋友'}, {
-          label: '兄弟',
-          value: '兄弟'
-        },
-        {label: '同事', value: '同事'}, {label: '同学', value: '同学'}],
-      // 还款计划
-      repaymentObj: {
-        type: 'ALL'
-      },
-      RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
-        label: '全部分期',
-        value: 'STAGES'
-      }, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
-      rulesClientRepayment: {
-        type: [
-          {required: true, message: '请选择还款方式', trigger: 'change',},
-        ],
-        totalAmount: [
-          {required: true, message: '请输入还款金额', trigger: 'change',},
-          {
-            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
-            message: '请输入2位小数金额',
-            trigger: ['blur', 'change']
-          }
-        ],
-        paybackDate: [
-          {required: true, message: '请选择还款截止日期', trigger: 'change',},
-        ],
-        stagesDay: [
-          {required: true, message: '请选择每期还款日期', trigger: 'change',},
-        ],
-        partAmount: [
-          {required: true, message: '请输入分期前偿还金额	', trigger: 'change',},
-          {
-            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
-            message: '请输入2位小数金额',
-            trigger: ['blur', 'change']
-          }
-        ],
-        partDate: [
-          {required: true, message: '请选择分期前偿还日期', trigger: 'change',},
-        ],
-        stagesNum: [
-          {required: true, message: '请输入分期期数', trigger: 'change',},
-          {pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
-        ],
-      },
-
       communicationRecord: [],
 
-      visiblePopover: null,
-      VideoCallDialog: null,
       mediaterecordpm:{
         caseId:this.$route.query.caseId,
         linkedWay:''
@@ -526,20 +307,7 @@ export default {
       let oh = document.documentElement.clientHeight;
       return oh - 100
     },
-    // 获取右侧滚动高度
-    rightContentHeight() {
-      let oh = document.documentElement.clientHeight;
-      return oh - 57
-    },
-    // 获取抽屉drawer的内容高度
-    OfficecontentHeight() {
-      let oh = document.documentElement.clientHeight;
-      return oh - 185
-    },
-    CommunicationcontentHeight() {
-      let oh = document.documentElement.clientHeight;
-      return oh - 57 - 48 - 38 -308
-    },
+    
     MediationrecordHeight() {
       let oh = document.documentElement.clientHeight;
       return oh - 57 - 128
@@ -633,58 +401,7 @@ export default {
   background-size: 100%,100%;
 }
 
-.bg-F2F3F5{
-  background-color: #F2F3F5;
-}
-
-.btn-group-controls{
-  width: 864px;
-  height: 56px;
-  border-radius: 16px;
-  background-color: #fff;
-  position: fixed;
-  bottom: 20px;
-  left: calc(50% - 432px);
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-  .btn-group-real-time{
-    width: 64px;
-  }
-  .btn-group-interval{
-    width: 1px;
-    height: 40px;
-    background-color: #C9CDD4;
-  }
-  .btn-group-processing-event{
-    width: calc(100% - 64px - 1px - 48px);
-  }
-}
-
-.layout-center-wrap {
-  height: 100%;
-  font-size: 14px;
-
-  .layout-center-top-wrap {
-    padding: 8px 16px;
-    border-bottom: solid 1px #E5E6EB;
-
-    .top-wrap-title{
-      width: 223px;
-      height: 32px;
-      background: url('~@/assets/image/logo-tjs.png');
-      background-size:  100%,100%;
-      margin-top: 4px;
-    }
-
-    .top-wrap-btn-left{
-      //width: 55%;
-      min-width: 1034px;
-      .wrap-btn-left-dial{
-        background-color: #FFF2F0;
-        border-radius: 20px;
-
-      }
-    }
-  }
+  
 
   .layout-center-center-wrap {
 
@@ -990,5 +707,4 @@ export default {
 
   }
 
-}
 </style>
diff --git a/src/pages/mediation-page/components/MediationRoom.vue b/src/pages/mediation-page/components/MediationRoom.vue
new file mode 100644
index 0000000..6361166
--- /dev/null
+++ b/src/pages/mediation-page/components/MediationRoom.vue
@@ -0,0 +1,739 @@
+<template>
+  <div style=" height: 100%;">
+    <div class="layout-center-wrap flex-column">
+      <!-- 上部数据 -->
+      <div class="layout-center-top-wrap flex-row justify-content-between">
+        <div class="top-wrap-title flex-row justify-content-between"></div>
+        <div class="top-wrap-btn-left flex-row justify-content-between">
+          <div class="flex-row justify-content-between align-items-center mr-16">
+            <el-button class="bg-F2F3F5" icon="el-icon-arrow-left" circle></el-button>
+            <div class="ml-16 mr-16 flex-row justify-content-between align-items-center">
+              <div class="mr-8 f16">{{ baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name }}</div>
+              <div class="mr-8">
+                <el-tag size="small" type="warning">{{ baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').addr }}</el-tag>
+              </div>
+              <div class="mr-8 f16 color-FF7D00"><i class="el-icon-warning"></i></div>
+              <div class="f16 color-165DFF"><i class="el-icon-success"></i></div>
+            </div>
+            
+            <el-button class="bg-F2F3F5" icon="el-icon-arrow-right" circle></el-button>
+          </div>
+
+          <el-popover
+              placement="top"
+              width="500"
+              v-model="singlesmsvisible"
+              title="发送短信"
+              trigger="click">
+              <singlesmsPopover :caseId="caseId" :singlesmsvisible.sync="singlesmsvisible"/>
+              <el-button slot="reference" type="warning" icon="el-icon-message" circle></el-button>
+          </el-popover>
+
+          <div class="wrap-btn-left-dial pl-22 pr-24 f14 flex-row justify-content-between ml-16">
+            <div class="mr-24 flex-row justify-content-between align-items-center">
+              <div class="mr-8 f16 color-F53F3F"><i class="el-icon-video-pause"></i></div>
+              <div class="mr-8">暂停拨打</div>
+              <div class="mr-8 f12 color-000">01:00</div>
+              <div class="mr-8 f20"><i class="el-icon-phone-outline"></i></div>
+              <div class="mr-8 f20"><i class="el-icon-microphone"></i></div>
+              <div class="mr-8 ai-logo-img"></div>
+            </div>
+            <div class="flex-row justify-content-between align-items-center f14">
+              <div class="flex-row justify-content-between align-items-center mr-24">
+                <div class="mr-8 f16"><i class="el-icon-s-operation"></i></div>
+                <div>队列 <span class="color-000">200</span></div>
+              </div>
+              <div class="mr-24">已拨打 <span class="color-000">200</span></div>
+              <div class="mr-24">已接通 <span class="color-000">200</span></div>
+              <div>未接通 <span class="color-000">200</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="flex-row justify-content-between">
+          <el-button icon="el-icon-setting" circle></el-button>
+          <el-button icon="el-icon-switch-button" circle @click="handleBack"></el-button>
+        </div>
+      </div>
+      
+      <!-- 中间数据 -->
+      <LayoutContentNew :caseId="caseId" />
+
+    </div>
+
+    <div class="flex-row align-items-center pl-24 pr-24 btn-group-controls">
+      <div class="pt-16 pb-16 flex-row justify-content-between align-items-center btn-group-real-time">
+        <el-badge :value="3" class="item">
+          <i class="f24 el-icon-phone cursor-pointer color-52ABF2"></i>
+        </el-badge>
+        <el-badge :value="3" class="item">
+          <i class="f24 el-icon-video-camera cursor-pointer color-52ABF2"></i>
+        </el-badge>
+      </div>
+      <div class="ml-24 mr-24 btn-group-interval"></div>
+      <div class="flex-row justify-content-between align-items-center btn-group-processing-event">
+
+        <div class="flex-row justify-content-between align-items-center cursor-pointer" @click="visiblePopover={caseId: caseId}">
+          <i class="f24 el-icon-video-camera color-4E5969"></i>
+          <div class="pl-4 f14">预约</div>
+        </div>
+
+        <div class="flex-row justify-content-between align-items-center cursor-pointer">
+          <i class="f24 el-icon-document color-4E5969"></i>
+          <div class="pl-4 f14">协议</div>
+        </div>
+
+        <el-popover 
+            placement="top"
+            width="500"
+            v-model="singleofficevisible"
+            title="发起签字"
+            trigger="click">
+            <singleofficeWritPopover :caseId="caseId" :singleofficevisible.sync="singleofficevisible"/>
+            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
+              <i class="f24 el-icon-document-remove color-4E5969"></i>
+              <a class="pl-4 f14">签字</a>
+            </span>
+        </el-popover>
+
+        
+        <el-popover 
+            placement="top"
+            width="500"
+            v-model="singlesealvisible"
+            title="发起签章"
+            trigger="click">
+            <singleofficeSealPopover :caseId="caseId" :singlesealvisible.sync="singlesealvisible"/>
+            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
+              <i class="f24 el-icon-s-check color-4E5969"></i>
+              <a class="pl-4 f14">签章</a>
+            </span>
+        </el-popover>
+
+        <el-popover 
+            placement="top"
+            width="500"
+            v-model="singledeliveryvisible"
+            title="发起送达"
+            trigger="click">
+            <singleofficeDeliveryPopover :caseId="caseId" :singledeliveryvisible.sync="singledeliveryvisible"/>
+            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
+              <i class="f24 el-icon-s-claim color-4E5969"></i>
+              <a class="pl-4 f14">送达</a>
+            </span>
+        </el-popover>
+        
+        
+        <div class="flex-row justify-content-between align-items-center cursor-pointer">
+          <i class="f24 el-icon-wallet color-4E5969"></i>
+          <div class="pl-4 f14">类案</div>
+        </div>
+        <div class="flex-row justify-content-between align-items-center cursor-pointer">
+          <i class="f24 el-icon-document-checked color-4E5969"></i>
+          <div class="pl-4 f14">办结</div>
+        </div>
+        <div class="flex-row justify-content-between align-items-center cursor-pointer">
+          <i class="f24 el-icon-document-delete color-4E5969"></i>
+          <div class="pl-4 f14">失败</div>
+        </div>
+        <div class="flex-row justify-content-between align-items-center cursor-pointer">
+          <i class="f24 el-icon-user-solid color-4E5969"></i>
+          <div class="pl-4 f14">帮扶</div>
+        </div>
+
+        <el-popover
+            placement="top"
+            width="400"
+            v-model="singlejointlyvisible"
+            title="案件协办"
+            trigger="click">
+            <singleJointlyPopover :caseId="caseId" :singlejointlyvisible.sync="singlejointlyvisible" @handleSubmit="getCaseInfoById()"/>
+            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
+              <i class="f24 el-icon-s-management color-4E5969"></i>
+              <a class="pl-4 f14">协办</a>
+            </span>
+        </el-popover>
+
+      </div>
+    </div>
+
+    <caseVideoReservationDialog v-if="visiblePopover" :visible-popover.sync="visiblePopover" />
+    
+    <!--  视频房间  -->
+    <VideoRoom v-if="VideoCallDialog" :eventDialog.sync="VideoCallDialog" />
+    
+  </div>
+
+</template>
+<script>
+import api from "@/services/caseManagement";
+export default {
+  components: {
+    caseVideoReservationDialog: () => import('./caseVideoReservationDialog'),//
+
+    singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
+    singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
+    singleofficeDeliveryPopover: () => import('./singleofficeDeliveryPopover.vue'),//发起送达
+    
+    singleJointlyPopover: () => import('./singleJointlyPopover.vue'),//案件协办
+    singlesmsPopover: () => import('./singlesmsPopover.vue'),//发送短信
+    VideoRoom: () => import('./VideoRoom'),
+    LayoutContentNew: () => import('./LayoutContentNew'),//调解数据
+  },
+  data() {
+    return {
+      singlesmsvisible:false,
+      singlejointlyvisible:false,
+      visiblemediatRecord:false,
+      singledeliveryvisible:false,
+      singlesealvisible:false,
+      singleofficevisible:false,
+      eventDialog: {caseId: this.$route.query.caseId},
+      leftActive: 1,
+      rightActive: 1,
+      fileList: [],
+      mediationRecord: [],//调解记录
+      baseInfo: {},//基本信息
+      obligorInfo: [],//债务人信息
+      caseId: '',//案件id
+      // 联系人
+      contactAddObj: {},
+      contactAddFlag: false,
+      contactObj: {},
+      contactUpdate: false,
+      relationOptions: [{label: '本人', value: '本人'}, {label: '父母', value: '父母'}, {label: '配偶', value: '配偶'},
+        {label: '子女', value: '子女'}, {label: '其他', value: '其他'}, {label: '朋友', value: '朋友'}, {
+          label: '兄弟',
+          value: '兄弟'
+        },
+        {label: '同事', value: '同事'}, {label: '同学', value: '同学'}],
+      // 还款计划
+      repaymentObj: {
+        type: 'ALL'
+      },
+      RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
+        label: '全部分期',
+        value: 'STAGES'
+      }, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
+      rulesClientRepayment: {
+        type: [
+          {required: true, message: '请选择还款方式', trigger: 'change',},
+        ],
+        totalAmount: [
+          {required: true, message: '请输入还款金额', trigger: 'change',},
+          {
+            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
+            message: '请输入2位小数金额',
+            trigger: ['blur', 'change']
+          }
+        ],
+        paybackDate: [
+          {required: true, message: '请选择还款截止日期', trigger: 'change',},
+        ],
+        stagesDay: [
+          {required: true, message: '请选择每期还款日期', trigger: 'change',},
+        ],
+        partAmount: [
+          {required: true, message: '请输入分期前偿还金额	', trigger: 'change',},
+          {
+            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
+            message: '请输入2位小数金额',
+            trigger: ['blur', 'change']
+          }
+        ],
+        partDate: [
+          {required: true, message: '请选择分期前偿还日期', trigger: 'change',},
+        ],
+        stagesNum: [
+          {required: true, message: '请输入分期期数', trigger: 'change',},
+          {pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
+        ],
+      },
+
+      communicationRecord: [],
+
+      visiblePopover: null,
+      VideoCallDialog: null,
+      mediaterecordpm:{
+        caseId:this.$route.query.caseId,
+        linkedWay:''
+      },
+      materialTypeOptions: [
+        {label:'承诺账户',value:'1'},{label:'重点账户',value:'2'},{label:'拒联账户',value:'3'},{label:'已结清客户',value:'4'},
+        {label:'疑难账户',value:'5'},{label:'失联账户',value:'6'},{label:'半失联账户',value:'7'},{label:'部分还款账户',value:'8'},
+        {label:'适诉案件',value:'9'},{label:'可联账户',value:'10'},{label:'投诉倾向客户',value:'11'},{label:'分期客户',value:'12'},
+        {label:'其他/无标签',value:'13'}
+      ],
+    };
+  },
+  computed: {
+    // 左侧
+    leftContentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 100
+    },
+    // 获取右侧滚动高度
+    rightContentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 57
+    },
+    // 获取抽屉drawer的内容高度
+    OfficecontentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 185
+    },
+    CommunicationcontentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 57 - 48 - 38 -308
+    },
+    MediationrecordHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 57 - 128
+    },
+  },
+  async created() {
+    this.caseId = this.$route.query.caseId
+    this.getCaseInfoById();//获取详情
+    this.getmediate_record()
+  },
+  beforeDestroy() {
+    // if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
+    //     clearInterval(this.timer); //关闭
+    // }
+  },
+  methods: {
+    debtorEntityCardNo(datalist, len) {
+      let datacardno = ''
+      let dataphone = ''
+      datalist.forEach((item, index) => {
+        if (index == 0) {
+          datacardno = item.cardNo
+          dataphone = item.phone
+        } else {
+          datacardno += ',' + item.cardNo
+          dataphone += ',' + item.phone
+        }
+      })
+
+      return {cardNo: datacardno.substring(0, len), phone: dataphone.substring(0, len)};
+    },
+    // 获取详情
+    getCaseInfoById() {
+      let _that = this
+      api.getCaseInfoById(this.caseId).then(res => {
+        if (!res.code) {
+          this.baseInfo = res
+          // 材料
+          // console.log('获取图片',res.caseFileEntityList)
+          let caseFileEntityList = []
+          res.caseFileEntityList.forEach((item) => {
+            caseFileEntityList.push({name: item.name, fileName: item.name, url: item.url})
+          })
+          _that.fileList = caseFileEntityList
+        }
+      })
+    },
+    // 获取上一件案件
+    getFrontCaseById() {
+      if (!this.$clickThrottle()) {
+        return
+      }//防止重复点击
+      api.getFrontCaseById({id: this.caseId}).then(res => {
+        if (!res.code) {
+          // let caseChangeData = res
+          this.detailData(res)
+        }
+      })
+    },
+    // 获取下一件案件
+    getNextCaseById() {
+      if (!this.$clickThrottle()) {
+        return
+      }//防止重复点击
+      api.getNextCaseById({id: this.caseId}).then(res => {
+        if (!res.code) {
+          this.detailData(res)
+        }
+      })
+    },
+    handleBack() {
+      // this.$route.query.sourcePage == 'mediationManagement'
+      this.$router.push('/mediation-management')
+    },
+    // 获取调解记录
+    getmediate_record() {
+      api.mediate_record_list(this.mediaterecordpm).then(res => {
+        if (!res.code) {
+          this.communicationRecord = res
+        }
+      })
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.ai-logo-img{
+  width: 29px;
+  height: 29px;
+  background: url('~@/assets/image/ai-logo.png') no-repeat;
+  background-size: 100%,100%;
+}
+
+.bg-F2F3F5{
+  background-color: #F2F3F5;
+}
+
+.btn-group-controls{
+  width: 864px;
+  height: 56px;
+  border-radius: 16px;
+  background-color: #fff;
+  position: fixed;
+  bottom: 20px;
+  left: calc(50% - 432px);
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  .btn-group-real-time{
+    width: 64px;
+  }
+  .btn-group-interval{
+    width: 1px;
+    height: 40px;
+    background-color: #C9CDD4;
+  }
+  .btn-group-processing-event{
+    width: calc(100% - 64px - 1px - 48px);
+  }
+}
+
+.layout-center-wrap {
+  height: 100%;
+  font-size: 14px;
+
+  .layout-center-top-wrap {
+    padding: 8px 16px;
+    border-bottom: solid 1px #E5E6EB;
+
+    .top-wrap-title{
+      width: 223px;
+      height: 32px;
+      background: url('~@/assets/image/logo-tjs.png');
+      background-size:  100%,100%;
+      margin-top: 4px;
+    }
+
+    .top-wrap-btn-left{
+      //width: 55%;
+      min-width: 1034px;
+      .wrap-btn-left-dial{
+        background-color: #FFF2F0;
+        border-radius: 20px;
+
+      }
+    }
+  }
+
+  .layout-center-center-wrap {
+
+    height: 100%;
+
+    .background-color-F5F5F5 {
+      background-color: #F5F5F5;
+    }
+
+    .border-E5E6EB {
+      border: solid 1px #E5E6EB;
+    }
+
+    .width120px {
+      width: 140px;
+    }
+
+    .width180px {
+      width: 220px;
+    }
+
+    .width200px {
+      width: calc(50% - 320px);
+    }
+
+    .layout-center-left-wrap {
+      background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat;
+      background-size: 100% 100%;
+      width: 540px;
+      height: 100%;
+      border-right: 1px solid var(--fill-3, #E5E6EB);
+
+      .layout-center-left1-wrap {
+        width: 80px;
+        height: 100%;
+        text-align: center;
+
+        .left-rbobot {
+          width: 100%;
+          height: 80px;
+          text-align: center;
+          margin: 30px 0 0 0;
+
+          img {
+            width: 64px;
+          }
+        }
+
+        .separation {
+          width: 50px;
+          margin: 15px 0 0 15px;
+          border-bottom: solid 1px #dedfe4;
+        }
+
+        .left-img-info {
+          margin-top: 15px;
+          width: 100%;
+          font-size: 12px;
+          cursor: pointer;
+
+          img {
+            width: 48px;
+            margin-left: 15px;
+          }
+
+          a {
+            margin-top: 5px;
+          }
+        }
+
+        .left-img-info.active {
+          background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
+          background-size: 15px 30px;
+          background-position: 68px 10px;
+        }
+
+        .left-img-info:hover {
+          background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
+          background-size: 15px 30px;
+          background-position: 68px 10px;
+        }
+      }
+
+      .layout-center-left2-wrap {
+        width: 460px;
+        height: 100%;
+        background-color: #fff;
+        // border-radius: 25px 0px 0px 25px;
+        padding: 20px 30px;
+
+
+        .case-debt-info{
+          .descriptions-t{
+            .descriptions-t-title{
+              //margin-bottom: 5px;
+            }
+            .descriptions-t-item-l{
+              padding: 12px 10px;
+              text-align: right;
+              width: 40%;
+            }
+            .descriptions-t-item-r{
+              padding: 12px 10px;
+              text-align: left;
+              width: 60%;
+            }
+            .bgColor-F7F8FA{
+              background-color: #F7F8FA;
+            }
+          }
+
+          .case-debt-info-call{
+            padding: 12px 42px;
+          }
+        }
+
+        .case-contact-person{
+          .contact-person-type{
+            background-color: #F2F3F5;
+            padding:5px 15px;
+            border-radius: 8px;
+            margin: 0 5px;
+            cursor: pointer;
+          }
+        }
+
+        .case-detail-des {
+          border: solid 1px #E5E6EB;
+          padding: 10px 15px;
+          border-radius: 8px;
+          font-size: 14px;
+
+          span {
+            margin: 3px 0;
+            padding: 3px 10px;
+            // a:first-child{width: 120px;display: inline-block;text-align: right;}
+          }
+
+          span:nth-child(even) {
+            background-color: #F7F8FA;
+          }
+
+          .case-img {
+            width: 50px;
+            height: 50px;
+            text-align: center;
+            line-height: 50px;
+
+            img {
+              max-width: 50px;
+              max-height: 50px;
+            }
+          }
+
+        }
+
+        .case-materials-person {
+          .case-detail-des {
+            i {
+              margin-right: 4px;
+            }
+          }
+        }
+
+        .case-office-person {
+
+          .case-detail-des {
+            .case-img {
+              width: 55px;
+              height: 55px;
+              text-align: center;
+              line-height: 55px;
+
+              img {
+                max-width: 55px;
+                max-height: 55px;
+              }
+            }
+
+            i {
+              margin-right: 4px;
+            }
+          }
+        }
+
+      }
+
+
+    }
+
+    .layout-center-right-wrap {
+      background: #F2F3FA;
+      // background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat;
+      background-size: 100% 100%;
+      width: calc(100% - 540px);
+      height: 100%;
+      .right-wrap-left{
+        width: 367px;
+        height: 100%;
+      }
+
+      .right-wrap-right{
+        width: calc(100% - 367px - 40px);
+        .timeline-layout{
+          .timeline-layout-w{
+            width: calc(50% - 8px);
+            .icon-bg{
+              width: 20px;
+              height: 20px;
+              // border-radius: 4px;
+              // color: #FFFFFF;
+
+              .callphone-icon{
+                background: url('~@/assets/image/mediate/callphone.png') no-repeat;
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-size: 100% 100%;
+              }
+              .callbackphone-icon{
+                background: url('~@/assets/image/mediate/callbackphone.png') no-repeat;
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-size: 100% 100%;
+              }
+              .nocallphone-icon{
+                background: url('~@/assets/image/mediate/nocallbackphone.png') no-repeat;
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-size: 100% 100%;
+              }
+
+              .callvideo-icon{
+                background: url('~@/assets/image/mediate/callvideo.png') no-repeat;
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-size: 100% 100%;
+              }
+              .callwechat-icon{
+                background: url('~@/assets/image/mediate/WeChat.png') no-repeat;
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-size: 100% 100%;
+              }
+            }
+            // .icon-phone{
+            //   background-color: #52ABF2;
+            // }
+            .icon-video{
+              background-color: #FF7D00;
+            }
+            .timeline-layout-w-records{
+              background-color: #F5F5F5;
+              border-radius: 4px;
+              padding: 8px 12px 12px 12px;
+            }
+          }
+          .timeline-layout-ai{
+            padding: 6px 16px;
+            border-radius: 4px;
+            background: linear-gradient(270deg, #F1F4FE 0%, #FFF2F8 100%);
+          }
+        }
+      }
+
+      .right-wrap-side{
+        width: 40px;
+        height: 100%;
+        background-color: #F7F8FA;
+      }
+
+      //.case-communication-record {
+      //  .btn-communication {
+      //    padding: 5px 15px;
+      //    border-radius: 8px;
+      //    cursor: pointer;
+      //  }
+      //
+      //  .case-communication-cont {
+      //    // background: ;
+      //    padding: 20px;
+      //    border-radius: 8px;
+      //    margin-top: 15px;
+      //  }
+      //}
+      //.case-office-record, .case-materials-record {
+      //
+      //  span a {
+      //    color: #C66A5B;
+      //    margin-right: 13px;
+      //    cursor: pointer;
+      //  }
+      //
+      //  span a:last-child {
+      //    margin-right: 0;
+      //  }
+      //}
+    }
+
+  }
+
+}
+</style>
diff --git a/src/pages/mediation-page/index.vue b/src/pages/mediation-page/index.vue
index 53c53ed..734b46a 100644
--- a/src/pages/mediation-page/index.vue
+++ b/src/pages/mediation-page/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="layout-wrap">
         <!-- <LayoutHeader /> -->
-        <LayoutContent />
+        <MediationRoom />
     </div>
 </template>
 <script>
@@ -9,7 +9,7 @@
         components: {
             // LayoutHeader: () => import('@/pages/layout/components/LayoutHeader'),
             // LayoutContent: () => import('./components/LayoutContent.vue'),
-          LayoutContent: () => import('./components/LayoutContentNew.vue'),
+            MediationRoom: () => import('./components/MediationRoom.vue'),
         },
         data() {
             return {
diff --git a/src/pages/workbench/index.vue b/src/pages/workbench/index.vue
index f120064..781ff6a 100644
--- a/src/pages/workbench/index.vue
+++ b/src/pages/workbench/index.vue
@@ -113,7 +113,7 @@
                                     <div class="flex-row justify-content-end mb-8">
                                         <el-button size="mini" type="primary" @click="handleCaseAllocation(item)">案件分配</el-button>
                                         <!-- <el-button size="mini" @click="handleEdit(scope)">预设还款方案</el-button> -->
-                                        <el-button size="mini" @click="handleDelete(item)">删除</el-button>
+                                        <!-- <el-button size="mini" @click="handleDelete(item)">删除</el-button> -->
                                     </div>
                                 </div>
                             </el-scrollbar>