From bf387de9fa2ce54130bd22470168b2721939bc42 Mon Sep 17 00:00:00 2001
From: tdg930622 <51816549+tdg930622@users.noreply.github.com>
Date: Fri, 10 Jan 2025 17:31:30 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/dxjl-yx.svg              |   3 +
 .../mediation-page/components/SidebarTool.vue | 225 ++++++++++++++++--
 2 files changed, 206 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/icons/svg/dxjl-yx.svg

diff --git a/src/assets/icons/svg/dxjl-yx.svg b/src/assets/icons/svg/dxjl-yx.svg
new file mode 100644
index 0000000..e32ff5a
--- /dev/null
+++ b/src/assets/icons/svg/dxjl-yx.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.35312 3.19922L7.37916 8.82318C7.72743 9.14798 8.27256 9.14798 8.62083 8.82318L14.6469 3.19922H1.35312ZM0.533325 3.89297V12.7992H15.4667V3.89297L9.34895 9.60338C8.97082 9.95645 8.48533 10.1326 7.99999 10.1326C7.51466 10.1326 7.02917 9.95645 6.65103 9.60338L0.533325 3.89297Z" fill="#F0B76E"/>
+</svg>
diff --git a/src/pages/mediation-page/components/SidebarTool.vue b/src/pages/mediation-page/components/SidebarTool.vue
index d3c4724..5545cb0 100644
--- a/src/pages/mediation-page/components/SidebarTool.vue
+++ b/src/pages/mediation-page/components/SidebarTool.vue
@@ -23,8 +23,8 @@
       <div v-if="rightActive === 2">
         <div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
         <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
-          <div class="timeline-layout pt-16">
-            <div class="timeline-layout-100">
+          <div class="timeline-layout pt-8">
+            <div class="timeline-layout-100 mb-16">
               <div class="flex-row justify-content-between">
                 <div class="flex-row">
                   <div>17:15:00</div>
@@ -102,41 +102,195 @@
                 <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 class="pt-8 f12">
                 由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
               </div>
             </div>
           </div>
-
         </el-scrollbar>
       </div>
 
       <div v-if="rightActive === 3">
-        <div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
+        <div class="tab-content-title f16 f-weight600 pb-8">短信记录</div>
         <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
-
+          <el-card shadow="never" class="mt-8">
+            <div class="flex-row align-items-center pb-6">
+              <div class="mr-8"><svg-icon icon-class="dxjl-yx" className="dxjl-svg" /></div>
+              <div class="f-weight600">向被申请人发送通知短信</div>
+            </div>
+            <div class="flex-row align-items-center pb-6 f-weight600">
+              李四 134****9447
+              <el-tag class="ml-8" size="small" effect="danger">失败</el-tag>
+            </div>
+            <div class="pb-6 color-4E5969 f12">原因：描述描述描述描述描述描述描述描述描述描述描述</div>
+            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
+            <div class="flex-row justify-content-between border-radius-2 f12 color-000 short-message-btn">
+              <span class="cursor-pointer">修改手机号</span>
+              <span class="cursor-pointer">重发</span>
+              <span class="cursor-pointer">忽略</span>
+            </div>
+          </el-card>
+          <el-card shadow="never" class="mt-8">
+            <div class="flex-row align-items-center pb-6">
+              <div class="mr-8"><svg-icon icon-class="dxjl-yx" className="dxjl-svg" /></div>
+              <div class="f-weight600">向被申请人发送通知短信</div>
+            </div>
+            <div class="flex-row align-items-center pb-6 f-weight600">
+              李四 134****9447
+              <el-tag class="ml-8" size="small" effect="success">成功</el-tag>
+            </div>
+            <div class="pb-6 color-4E5969 f12">原因：描述描述描述描述描述描述描述描述描述描述描述</div>
+            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
+            <div class="flex-row justify-content-between border-radius-2 f12 color-000 short-message-btn">
+              <span class="cursor-pointer">修改手机号</span>
+              <span class="cursor-pointer">重发</span>
+              <span class="cursor-pointer">忽略</span>
+            </div>
+          </el-card>
         </el-scrollbar>
       </div>
+
       <div v-if="rightActive === 4">
-        <div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
+        <div class="tab-content-title f16 f-weight600 pb-8">视频记录</div>
         <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
+          <div class="timeline-layout pt-8">
+            <div class="timeline-layout-100 mb-16">
+              <div class="flex-row justify-content-between">
+                <div class="flex-row">
+                  <div>17:15:00</div>
+                  <div class="pl-8 pr-8">
+                    陈陈陈
+                  </div>
+                  <!-- 视频 -->
+                  <div class="text-center icon-bg icon-phone">
+                    <i class="callvideo-icon"></i>
+                  </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"><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>
+                      陈继平 134****9447
+                      <el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
+                    </span>
+                  </div>
+                  <el-tag size="small" effect="plain">重点客户</el-tag>
+                  <!--                  <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.labelName}}</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 class="flex-row align-items-center pt-6">
+                  <div >视频1秒</div>
+                  <el-divider direction="vertical"></el-divider>
+                  <div class="text-el-icon-video-play"><i class="f14 el-icon-video-play"></i> 播放视频</div>
+                </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 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>视频{{itemrecord.linkedDuration}}秒</div>-->
+                <!--                  <el-divider 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">-->
+                <!--                  &lt;!&ndash; <div>通话44秒</div> &ndash;&gt;-->
+                <!--                  <el-divider direction="vertical"></el-divider>-->
+                <!--                  <div class="text-center cursor-pointer">查看文件</div>-->
+                <!--                </div>-->
+              </div>
+              <div>沟通备注：<span class="color-FF7D00">111</span></div>
+            </div>
+            <div class="timeline-layout-100 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 f12">
+                由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
+              </div>
+            </div>
+          </div>
         </el-scrollbar>
       </div>
+
       <div v-if="rightActive === 5">
-        <div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
+        <div class="tab-content-title f16 f-weight600 pb-8">签字记录</div>
         <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
-
+          <el-card shadow="never" class="mt-8">
+            <div class="f-weight600 pb-6">(2022)川092701民诉02号</div>
+            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
+            <div class="mb-8 flex-row align-items-center border-radius-4 agreement-pdf">
+              <a class="case-img"><img :src="imgPdf"/></a>
+              <div class="ml-8">调解协议.PDF</div>
+            </div>
+            <div class="flex-row align-items-center">
+              <div class="flex-row align-items-center mr-16">张三<el-tag class="ml-8" size="small" effect="danger">未签</el-tag></div>
+              <div class="flex-row align-items-center">李四<el-tag class="ml-8" size="small" effect="success">已签</el-tag></div>
+            </div>
+          </el-card>
+          <el-card shadow="never" class="mt-8">
+            <div class="f-weight600 pb-6">(2022)川092701民诉02号</div>
+            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
+            <div class="mb-8 flex-row align-items-center border-radius-4 agreement-pdf">
+              <a class="case-img"><img :src="imgPdf"/></a>
+              <div class="ml-8">调解协议.PDF</div>
+            </div>
+            <div class="flex-row align-items-center">
+              <div class="flex-row align-items-center mr-16">张三<el-tag class="ml-8" size="small" effect="danger">未签</el-tag></div>
+              <div class="flex-row align-items-center">李四<el-tag class="ml-8" size="small" effect="success">已签</el-tag></div>
+            </div>
+          </el-card>
         </el-scrollbar>
       </div>
+
       <div v-if="rightActive === 6">
-        <div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
+        <div class="tab-content-title f16 f-weight600 pb-8">调解日志</div>
         <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
-
+          <el-timeline class="padding-2">
+            <el-timeline-item timestamp="2024-12-09" placement="top" type="primary">
+              <el-card shadow="never">
+                <div class="mb-8">09:36 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:还款计划通知</div>
+                <div class="mb-8">09:33 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:调解通知</div>
+              </el-card>
+            </el-timeline-item>
+            <el-timeline-item timestamp="2024-12-08" placement="top" type="primary">
+              <el-card shadow="never">
+                <div>09:27 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:还款计划通知</div>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
         </el-scrollbar>
       </div>
+
       <div v-if="rightActive === 7">
-        <div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
+        <div class="tab-content-title f16 f-weight600 pb-8">质检评价</div>
         <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
 
         </el-scrollbar>
@@ -145,7 +299,7 @@
     <el-tooltip
         popper-class="custom-tooltip"
         effect="dark"
-        content="XXX"
+        content="触达记录"
         placement="left">
       <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
            @click="handleToggle(1)"
@@ -156,7 +310,7 @@
     <el-tooltip
         popper-class="custom-tooltip"
         effect="dark"
-        content="XXX"
+        content="沟通记录"
         placement="left">
       <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
            @click="handleToggle(2)"
@@ -167,7 +321,7 @@
     <el-tooltip
         popper-class="custom-tooltip"
         effect="dark"
-        content="XXX"
+        content="短信记录"
         placement="left">
       <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
            @click="handleToggle(3)"
@@ -178,7 +332,7 @@
     <el-tooltip
         popper-class="custom-tooltip"
         effect="dark"
-        content="XXX"
+        content="视频记录"
         placement="left">
       <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
            @click="handleToggle(4)"
@@ -189,7 +343,7 @@
     <el-tooltip
         popper-class="custom-tooltip"
         effect="dark"
-        content="XXX"
+        content="签字记录"
         placement="left">
       <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
            @click="handleToggle(5)"
@@ -200,7 +354,7 @@
     <el-tooltip
         popper-class="custom-tooltip"
         effect="dark"
-        content="XXX"
+        content="调解日志"
         placement="left">
       <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
            @click="handleToggle(6)"
@@ -211,7 +365,7 @@
     <el-tooltip
         popper-class="custom-tooltip"
         effect="dark"
-        content="XXX"
+        content="质检评价"
         placement="left">
       <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
            @click="handleToggle(7)"
@@ -241,7 +395,7 @@ export default {
   data(){
     return{
       rightActive: 0,
-
+      imgPdf: require('@/assets/image/util/pdf_img.jpg')
     }
   },
   computed: {
@@ -257,7 +411,8 @@ export default {
       }else {
         this.rightActive = val;
       }
-    }
+    },
+
   }
 }
 </script>
@@ -290,7 +445,7 @@ export default {
     background-color: #ffffff;
   }
 }
-
+//
 .timeline-layout{
   border-top: 1px solid #F2F3F5;
   .timeline-layout-100{
@@ -352,4 +507,30 @@ export default {
   }
 }
 
+// 短信记录
+.dxjl-svg{
+  width: 18px;
+  height: 18px;
+}
+.short-message-btn{
+  padding: 8px 16px;
+  background-color: #F2F3F5;
+}
+
+// 签字记录
+.agreement-pdf{
+  background-color: #F2F3F5;
+  padding: 6px 12px;
+  .case-img {
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
 </style>
\ No newline at end of file