调解室UI

This commit is contained in:
tdg930622 2025-01-02 17:43:29 +08:00
parent 755a1415e4
commit 6ce7b705e3
15 changed files with 455 additions and 233 deletions

View File

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.81836 6.75043C6.99469 6.24918 7.34272 5.82651 7.80083 5.55728C8.25893 5.28805 8.79753 5.18963 9.32124 5.27946C9.84495 5.36929 10.32 5.64157 10.6622 6.04807C11.0044 6.45458 11.1917 6.96907 11.1909 7.50043C11.1909 9.00043 8.94086 9.75043 8.94086 9.75043" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 12.75H9.0075" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 752 B

View File

@ -1,11 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 7.5V10.5" stroke="currentColor" stroke-linecap="round"/>
<path d="M11 3V6" stroke="currentColor" stroke-linecap="round"/>
<path d="M11 12V15" stroke="currentColor" stroke-linecap="round"/>
<path d="M3 9H7" stroke="currentColor" stroke-linecap="round"/>
<path d="M15 4.5H13" stroke="currentColor" stroke-linecap="round"/>
<path d="M15 13.5H13" stroke="currentColor" stroke-linecap="round"/>
<path d="M9 9H15" stroke="currentColor" stroke-linecap="round"/>
<path d="M11 4.5H3" stroke="currentColor" stroke-linecap="round"/>
<path d="M11 13.5H3" stroke="currentColor" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 705 B

View File

@ -1,7 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 1.5H4.5C4.10218 1.5 3.72064 1.65804 3.43934 1.93934C3.15804 2.22064 3 2.60218 3 3V15C3 15.3978 3.15804 15.7794 3.43934 16.0607C3.72064 16.342 4.10218 16.5 4.5 16.5H13.5C13.8978 16.5 14.2794 16.342 14.5607 16.0607C14.842 15.7794 15 15.3978 15 15V6L10.5 1.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 1.5V6H15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 9.75H6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 12.75H6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.5 6.75H6.75H6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 826 B

View File

@ -1,7 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 6V9" stroke="currentColor" stroke-linecap="round"/>
<rect x="7" y="3" width="4" height="3" rx="0.5" stroke="currentColor"/>
<rect x="3" y="12" width="4" height="3" rx="0.5" stroke="currentColor"/>
<rect x="11" y="12" width="4" height="3" rx="0.5" stroke="currentColor"/>
<path d="M5 12V10C5 9.44772 5.44772 9 6 9H9H12C12.5523 9 13 9.44772 13 10V12" stroke="currentColor" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 511 B

View File

@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.25 6.75L9 1.5L15.75 6.75V15C15.75 15.3978 15.592 15.7794 15.3107 16.0607C15.0294 16.342 14.6478 16.5 14.25 16.5H3.75C3.35218 16.5 2.97064 16.342 2.68934 16.0607C2.40804 15.7794 2.25 15.3978 2.25 15V6.75Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.75 16.5V9H11.25V16.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 496 B

View File

@ -1,8 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4.5H15.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 9H15.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 13.5H15.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.25 4.5H2.2575" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.25 9H2.2575" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.25 13.5H2.2575" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 677 B

View File

@ -1,6 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3075 6.25C11.5875 7.30627 10.3747 7.99979 9 7.99979C7.62525 7.99979 6.41249 7.30627 5.69248 6.25C4.65459 7.16618 4 8.50654 4 9.99979C6.20914 9.99979 8 11.7907 8 13.9998C8 14.3019 7.96651 14.5961 7.90305 14.8791C8.25605 14.9581 8.62316 14.9998 9 14.9998C9.37684 14.9998 9.74395 14.9581 10.097 14.8791C10.0335 14.5961 10 14.3019 10 13.9998C10 11.7907 11.7909 9.99979 14 9.99979C14 8.50654 13.3454 7.16618 12.3075 6.25Z" stroke="currentColor"/>
<circle cx="9" cy="4" r="1.5" stroke="currentColor"/>
<circle cx="4" cy="14" r="1.5" stroke="currentColor"/>
<circle cx="14" cy="14" r="1.5" stroke="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 723 B

View File

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15.75V14.25C12 13.4544 11.6839 12.6913 11.1213 12.1287C10.5587 11.5661 9.79565 11.25 9 11.25H3.75C2.95435 11.25 2.19129 11.5661 1.62868 12.1287C1.06607 12.6913 0.75 13.4544 0.75 14.25V15.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.375 8.25C8.03185 8.25 9.375 6.90685 9.375 5.25C9.375 3.59315 8.03185 2.25 6.375 2.25C4.71815 2.25 3.375 3.59315 3.375 5.25C3.375 6.90685 4.71815 8.25 6.375 8.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.75 8.25L14.25 9.75L17.25 6.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 739 B

View File

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15.75V14.25C12 13.4544 11.6839 12.6913 11.1213 12.1287C10.5587 11.5661 9.79565 11.25 9 11.25H3.75C2.95435 11.25 2.19129 11.5661 1.62868 12.1287C1.06607 12.6913 0.75 13.4544 0.75 14.25V15.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.375 8.25C8.03185 8.25 9.375 6.90685 9.375 5.25C9.375 3.59315 8.03185 2.25 6.375 2.25C4.71815 2.25 3.375 3.59315 3.375 5.25C3.375 6.90685 4.71815 8.25 6.375 8.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.25 8.25H12.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 723 B

View File

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 15V7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 15V3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 15V10.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 380 B

View File

@ -1,6 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.25 3H3.75C2.92157 3 2.25 3.67157 2.25 4.5V15C2.25 15.8284 2.92157 16.5 3.75 16.5H14.25C15.0784 16.5 15.75 15.8284 15.75 15V4.5C15.75 3.67157 15.0784 3 14.25 3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 1.5V4.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 1.5V4.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.25 7.5H15.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 630 B

View File

@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.55 11.25C14.4502 11.4762 14.4204 11.7271 14.4645 11.9704C14.5086 12.2137 14.6246 12.4382 14.7975 12.615L14.8425 12.66C14.982 12.7993 15.0926 12.9647 15.1681 13.1468C15.2436 13.3289 15.2824 13.5241 15.2824 13.7213C15.2824 13.9184 15.2436 14.1136 15.1681 14.2957C15.0926 14.4778 14.982 14.6432 14.8425 14.7825C14.7032 14.922 14.5378 15.0326 14.3557 15.1081C14.1736 15.1836 13.9784 15.2224 13.7812 15.2224C13.5841 15.2224 13.3889 15.1836 13.2068 15.1081C13.0247 15.0326 12.8593 14.922 12.72 14.7825L12.675 14.7375C12.4982 14.5646 12.2737 14.4486 12.0304 14.4045C11.7871 14.3604 11.5362 14.3902 11.31 14.49C11.0882 14.5851 10.899 14.7429 10.7657 14.9442C10.6325 15.1454 10.561 15.3812 10.56 15.6225V15.75C10.56 16.1478 10.402 16.5294 10.1207 16.8107C9.83936 17.092 9.45782 17.25 9.06 17.25C8.66218 17.25 8.28064 17.092 7.99934 16.8107C7.71804 16.5294 7.56 16.1478 7.56 15.75V15.6825C7.55419 15.4343 7.47384 15.1935 7.32938 14.9915C7.18493 14.7896 6.98305 14.6357 6.75 14.55C6.52379 14.4502 6.27286 14.4204 6.02956 14.4645C5.78626 14.5086 5.56176 14.6246 5.385 14.7975L5.34 14.8425C5.20069 14.982 5.03526 15.0926 4.85316 15.1681C4.67106 15.2436 4.47587 15.2824 4.27875 15.2824C4.08163 15.2824 3.88644 15.2436 3.70434 15.1681C3.52224 15.0926 3.35681 14.982 3.2175 14.8425C3.07804 14.7032 2.9674 14.5378 2.89191 14.3557C2.81642 14.1736 2.77757 13.9784 2.77757 13.7812C2.77757 13.5841 2.81642 13.3889 2.89191 13.2068C2.9674 13.0247 3.07804 12.8593 3.2175 12.72L3.2625 12.675C3.4354 12.4982 3.55139 12.2737 3.5955 12.0304C3.63962 11.7871 3.60984 11.5362 3.51 11.31C3.41493 11.0882 3.25707 10.899 3.05585 10.7657C2.85463 10.6325 2.61884 10.561 2.3775 10.56H2.25C1.85218 10.56 1.47064 10.402 1.18934 10.1207C0.908035 9.83936 0.75 9.45782 0.75 9.06C0.75 8.66218 0.908035 8.28064 1.18934 7.99934C1.47064 7.71804 1.85218 7.56 2.25 7.56H2.3175C2.56575 7.55419 2.8065 7.47384 3.00847 7.32938C3.21045 7.18493 3.36429 6.98305 3.45 6.75C3.54984 6.52379 3.57962 6.27286 3.5355 6.02956C3.49139 5.78626 3.3754 5.56176 3.2025 5.385L3.1575 5.34C3.01804 5.20069 2.9074 5.03526 2.83191 4.85316C2.75642 4.67106 2.71757 4.47587 2.71757 4.27875C2.71757 4.08163 2.75642 3.88644 2.83191 3.70434C2.9074 3.52224 3.01804 3.35681 3.1575 3.2175C3.29681 3.07804 3.46224 2.9674 3.64434 2.89191C3.82644 2.81642 4.02163 2.77757 4.21875 2.77757C4.41587 2.77757 4.61106 2.81642 4.79316 2.89191C4.97526 2.9674 5.14069 3.07804 5.28 3.2175L5.325 3.2625C5.50176 3.4354 5.72626 3.55139 5.96956 3.5955C6.21285 3.63962 6.46379 3.60984 6.69 3.51H6.75C6.97183 3.41493 7.16101 3.25707 7.29427 3.05585C7.42753 2.85463 7.49904 2.61884 7.5 2.3775V2.25C7.5 1.85218 7.65804 1.47064 7.93934 1.18934C8.22064 0.908035 8.60218 0.75 9 0.75C9.39782 0.75 9.77936 0.908035 10.0607 1.18934C10.342 1.47064 10.5 1.85218 10.5 2.25V2.3175C10.501 2.55884 10.5725 2.79463 10.7057 2.99585C10.839 3.19707 11.0282 3.35493 11.25 3.45C11.4762 3.54984 11.7271 3.57962 11.9704 3.5355C12.2137 3.49139 12.4382 3.3754 12.615 3.2025L12.66 3.1575C12.7993 3.01804 12.9647 2.9074 13.1468 2.83191C13.3289 2.75642 13.5241 2.71757 13.7213 2.71757C13.9184 2.71757 14.1136 2.75642 14.2957 2.83191C14.4778 2.9074 14.6432 3.01804 14.7825 3.1575C14.922 3.29681 15.0326 3.46224 15.1081 3.64434C15.1836 3.82644 15.2224 4.02163 15.2224 4.21875C15.2224 4.41587 15.1836 4.61106 15.1081 4.79316C15.0326 4.97526 14.922 5.14069 14.7825 5.28L14.7375 5.325C14.5646 5.50176 14.4486 5.72626 14.4045 5.96956C14.3604 6.21285 14.3902 6.46379 14.49 6.69V6.75C14.5851 6.97183 14.7429 7.16101 14.9442 7.29427C15.1454 7.42753 15.3812 7.49904 15.6225 7.5H15.75C16.1478 7.5 16.5294 7.65804 16.8107 7.93934C17.092 8.22064 17.25 8.60218 17.25 9C17.25 9.39782 17.092 9.77936 16.8107 10.0607C16.5294 10.342 16.1478 10.5 15.75 10.5H15.6825C15.4412 10.501 15.2054 10.5725 15.0042 10.7057C14.8029 10.839 14.6451 11.0282 14.55 11.25V11.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 15.75V14.25C15 13.4544 14.6839 12.6913 14.1213 12.1287C13.5587 11.5661 12.7956 11.25 12 11.25H6C5.20435 11.25 4.44129 11.5661 3.87868 12.1287C3.31607 12.6913 3 13.4544 3 14.25V15.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 8.25C10.6569 8.25 12 6.90685 12 5.25C12 3.59315 10.6569 2.25 9 2.25C7.34315 2.25 6 3.59315 6 5.25C6 6.90685 7.34315 8.25 9 8.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 583 B

View File

@ -120,9 +120,15 @@ html{
.color-165DFF{
color: #165DFF;
}
.color-52ABF2{
color: #52ABF2;
}
.color-F53F3F{
color: #F53F3F;
}
.color-4E5969{
color: #4E5969;
}
.color-text-primary{
color: $color-text-primary;
@ -188,6 +194,9 @@ html{
.padding-0{
padding: 0 !important;
}
.pl-4{
padding-left: 4px;
}
.pt-6{
padding-top: 6px;
}

View File

@ -335,132 +335,271 @@
</div>
</div>
<!-- 右边 -->
<div class="layout-center-right-wrap">
<!-- 沟通记录 -->
<div v-if="rightActive == 1" class="case-communication-record flex-column">
<div class="flex-row justify-content-between">
<span class="btn-communication background-color-fff f-weight500"><i class="el-icon-plus"></i>新增沟通记录</span>
<div>
<span class="btn-communication"><i class="el-icon-refresh"></i>刷新</span>
<span class="btn-communication">已视频1</span>
<span class="btn-communication">电话沟通2</span>
<div class="layout-center-right-wrap flex-row">
<div class="right-wrap-left">
<div class="right-wrap-left-title f22 pl-16 f-weight600">人物画像</div>
<div class="flex-row">
<div class="right-wrap-left-tab" :style="'height:'+`${rightContentHeight}`+'px'">
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
placement="right">
<div class="left-tab-icon flex-row justify-content-center align-items-center"
@click="rightActive = 1" :class="rightActive == 1 ?'active':''">
<svg-icon
:icon-class="rightActive == 1 ? `hx-1-active` : 'hx-1'"
className="tabs-svg" />
</div>
</el-tooltip>
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
placement="right">
<div class="left-tab-icon flex-row justify-content-center align-items-center"
@click="rightActive = 2" :class="rightActive == 2 ?'active':''">
<svg-icon
:icon-class="rightActive == 2 ? `hx-2-active` : 'hx-2'"
className="tabs-svg" />
</div>
</el-tooltip>
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
placement="right">
<div class="left-tab-icon flex-row justify-content-center align-items-center"
@click="rightActive = 3" :class="rightActive == 3 ?'active':''">
<svg-icon
:icon-class="rightActive == 3 ? `hx-3-active` : 'hx-3'"
className="tabs-svg" />
</div>
</el-tooltip>
</div>
<div class="right-wrap-left-content">
<div class="hx-1-content" v-if="rightActive == 1">
<div class="f12 pl-16 pt-16 pb-6">人物画像标签</div>
<div class="pl-16 pr-16">
<div class="echartsWordCloud" id="echartsWordCloud"></div>
</div>
<el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
<div class="flex-row justify-content-between p-16">
<div class="character-info theme-blue">
<div class="character-info-title">基本信息</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
</div>
<div class="character-info theme-yellow">
<div class="character-info-title">基本信息</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
<div class="character-info-details flex-row">
<div class="character-info-details-label">姓名</div>
<div class="character-info-details-text">陈继平</div>
</div>
</div>
</div>
</el-scrollbar>
</div>
</div>
</div>
<el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
<div class="flex-column case-communication-cont background-color-fff">
<div class="flex-row justify-content-between">
<div>
<span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
</div>
<span class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
</div>
<div class="case-lable">
<a class="case-status0">半失联客户</a>
</div>
<div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
<div>
<span>被申请人</span>
<span class="ml-8">李四</span>
<span class="ml-8">1388888888888</span>
</div>
<div>
<span>通话44秒</span>
<span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
</div>
</div>
<div class="flex-row pt-16">
<span>沟通备注</span>
<span>李四</span>
</div>
</div>
<div class="flex-column case-communication-cont background-color-fff">
<div class="flex-row justify-content-between">
<div>
<span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
</div>
<span class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
</div>
<div class="case-lable">
<a class="case-status0">重点客户</a>
</div>
<div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
<div>
<span>被申请人</span>
<span class="ml-8">李四</span>
<span class="ml-8">1388888888888</span>
</div>
<div>
<span>通话44秒</span>
<span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
</div>
</div>
<div class="flex-row pt-16">
<span>沟通备注</span>
<span>李四</span>
</div>
</div>
</el-scrollbar>
</div>
<!-- 案件文书 -->
<div v-if="rightActive == 2" class="case-office-record">
<div class="flex-row justify-content-between background-color-fff p-16 border-radius-8">
<span class="width120px f-weight500">文书类型</span>
<span class="width200px f-weight500">文书</span>
<span class="width120px f-weight500">是否签章</span>
<span class="width120px f-weight500">是否完成签字</span>
<span class="width200px f-weight500">签字人</span>
<span class="width180px f-weight500">操作</span>
</div>
<el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
<div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
<span class="width120px">调解申请书</span>
<span class="width200px">dsadasdsadada.pdf</span>
<span class="width120px">未签章</span>
<span class="width120px">未签字</span>
<span class="width200px">--</span>
<span class="width180px flex-row">
<a>预览</a>
<a>下载模板</a>
<a>上传</a>
<a>文书生成</a>
</span>
</div>
<div class="right-wrap-right p-16">
<div class="line-height-30 f22 f-weight600">沟通记录</div>
</el-scrollbar>
</div>
<!-- 案件材料 -->
<div v-if="rightActive == 3" class="case-materials-record">
<caseMaterial :caseId="caseId" />
</div>
<!-- 案件日志 -->
<div v-if="rightActive == 5" class="case-log-record">
<div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-8 p-32 width100">
<el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<p>王小虎 提交于 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<p>王小虎 提交于 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<p>王小虎 提交于 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</el-scrollbar>
<div class="flex-row justify-content-between align-items-center pt-16 pb-16">
<el-select v-model="communicationRecord" placeholder="请选择">
<el-option label="111" value="222"></el-option>
</el-select>
<el-button plain icon="el-icon-plus">新增沟通记录</el-button>
</div>
<el-timeline class="padding-0">
<el-timeline-item timestamp="2018/4/12" placement="top" type="primary">
<el-card shadow="never">
<div class="flex-row justify-content-between timeline-layout">
<div class="timeline-layout-w">
<div class="flex-row align-items-center">
<div>17:15:05</div>
<div class="pl-8 pr-8">李小山</div>
<div class="text-center icon-bg icon-phone"><i class="el-icon-phone"></i></div>
</div>
<div class="timeline-layout-w-records mt-8 mb-8">
<div class="flex-row align-items-center">
<div class="pr-8">陈继平</div>
<div class="pr-8">134****9447</div>
<el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
<el-tag size="small" effect="plain">重点客户</el-tag>
</div>
<div class="flex-row align-items-center pt-6">
<div>通话44秒</div>
<el-divider direction="vertical"></el-divider>
<div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
</div>
</div>
<div>
沟通备注
<span class="color-FF7D00">客户承诺本月底还款</span>
<i class="ml-8 f14 el-icon-edit cursor-pointer"></i>
</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-item timestamp="2018/4/13" placement="top" type="primary">
<el-card shadow="never">
<div class="flex-row justify-content-between timeline-layout">
<div class="timeline-layout-w">
<div class="flex-row align-items-center">
<div>17:15:05</div>
<div class="pl-8 pr-8">李小山</div>
<div class="text-center icon-bg icon-video"><i class="el-icon-video-camera-solid"></i></div>
</div>
<div class="timeline-layout-w-records mt-8 mb-8">
<div class="flex-row align-items-center">
<div class="pr-8">陈继平</div>
<div class="pr-8">134****9447</div>
<el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
<el-tag size="small" effect="plain">重点客户</el-tag>
</div>
<div class="flex-row align-items-center pt-6">
<div>通话44秒</div>
<el-divider direction="vertical"></el-divider>
<div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
</div>
</div>
<div>
沟通备注
<span class="color-FF7D00">客户说忙下次在沟通客户说忙下次在沟通客户说忙下次在沟通</span>
<i class="ml-8 f14 el-icon-edit cursor-pointer"></i>
</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>
</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">
<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>
<div class="flex-row justify-content-between align-items-center cursor-pointer">
<i class="f24 el-icon-document-remove 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-s-check 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-s-claim 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-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>
<div class="flex-row justify-content-between align-items-center cursor-pointer">
<i class="f24 el-icon-s-management color-4E5969"></i>
<div class="pl-4 f14">协办</div>
</div>
</div>
</div>
<!-- 视频预约 -->
<VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
</div>
@ -484,6 +623,7 @@ export default {
eventDialog: {caseId: this.$route.query.caseId},
leftActive: 1,
rightActive: 1,
fileList: [],
mediationRecord: [],//
baseInfo: {},//
@ -542,6 +682,8 @@ export default {
{pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
],
},
communicationRecord: ''
};
},
computed: {
@ -550,15 +692,10 @@ export default {
let oh = document.documentElement.clientHeight;
return oh - 100
},
//
centerContentHeight() {
let oh = document.documentElement.clientHeight;
return oh - 56 - 112 - 65 - 48
},
//
rightContentHeight() {
let oh = document.documentElement.clientHeight;
return oh - 56 - 56 - 65 - 20
return oh - 57
},
// drawer
OfficecontentHeight() {
@ -567,7 +704,7 @@ export default {
},
CommunicationcontentHeight() {
let oh = document.documentElement.clientHeight;
return oh - 150
return oh - 57 - 48 - 38 -308
},
},
async created() {
@ -675,7 +812,45 @@ export default {
}
};
</script>
<style lang="scss">
.my-label {
background: #E1F3D8;
}
.my-content {
background: #FDE2E2;
}
</style>
<style lang="scss" scoped>
.ai-logo-img{
width: 29px;
height: 29px;
background: url('~@/assets/image/ai-logo.png') no-repeat;
background-size: 100%,100%;
}
.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;
@ -698,12 +873,7 @@ export default {
.wrap-btn-left-dial{
background-color: #FFF2F0;
border-radius: 20px;
.ai-logo-img{
width: 29px;
height: 29px;
background: url('~@/assets/image/ai-logo.png') no-repeat;
background-size: 100%,100%;
}
}
}
}
@ -712,9 +882,6 @@ export default {
height: 100%;
// .background-color-fff{
// background-color: #fff;
// }
.background-color-F5F5F5 {
background-color: #F5F5F5;
}
@ -740,6 +907,7 @@ export default {
background-size: 100% 100%;
width: 540px;
height: 100%;
border-right: 1px solid var(--fill-3, #E5E6EB);
.layout-center-left1-wrap {
width: 80px;
@ -904,38 +1072,160 @@ export default {
background-size: 100% 100%;
width: calc(100% - 540px);
height: 100%;
padding: 30px;
.case-communication-record {
.btn-communication {
padding: 5px 15px;
border-radius: 8px;
cursor: pointer;
.right-wrap-left{
width: 367px;
.right-wrap-left-title{
width: 100%;
line-height: 47px;
border-bottom: 1px solid var(--fill-3, #E5E6EB);
background-color: #F7F8FA;
}
.right-wrap-left-tab{
width: 48px;
background-color: #F7F8FA;
.left-tab-icon{
width: 100%;
height: 40px;
.tabs-svg{
width: 24px;
height: 24px;
}
}
.active {
background-color: #ffffff;
}
}
.right-wrap-left-content{
width: 318px;
background-color: #FFFFFF;
.case-communication-cont {
// background: ;
padding: 20px;
border-radius: 8px;
margin-top: 15px;
.hx-1-content{
.echartsWordCloud{
width: 286px;
height: 300px;
background: url('~@/assets/image/mediate/rwhx.png') no-repeat;
background-size: 100% 100%;
}
.character-info{
width: calc(50% - 5px);
border: 1px solid;
padding: 4px;
color: #4E5969;
.character-info-title{
line-height: 20px;
font-size: 12px;
}
.character-info-details{
margin-bottom: 2px;
font-size: 10px;
.character-info-details-label{
width: 40%;
text-align: right;
line-height: 16px;
padding-right: 4px;
}
.character-info-details-text{
width: 60%;
text-align: left;
line-height: 16px;
padding-left: 4px;
}
}
}
.theme-blue{
border-color: #E1EDF4;
.character-info-title{
color: #4787F0;
}
.character-info-details{
.character-info-details-label{
background-color: #BBD3FB;
}
.character-info-details-text{
background-color: #ECF2FE;
}
}
}
.theme-yellow{
border-color: #FFE2B9;
.character-info-title{
color: #ED7B2F;
}
.character-info-details{
.character-info-details-label{
background-color: #FFCF8B;
}
.character-info-details-text{
background-color: #FFF7E8;
}
}
}
}
}
}
.case-office-record, .case-materials-record {
span a {
color: #C66A5B;
margin-right: 13px;
cursor: pointer;
}
span a:last-child {
margin-right: 0;
.right-wrap-right{
width: calc(100% - 367px);
.timeline-layout{
.timeline-layout-w{
width: calc(50% - 8px);
.icon-bg{
width: 20px;
height: 20px;
border-radius: 4px;
color: #FFFFFF;
}
.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%);
}
}
}
//.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;
// }
//}
}
}