feat: 专家统计页增加咨询记录明细弹窗，点击咨询数可查看专家详细咨询记录列表
This commit is contained in:
liuyunqin
@@ -84,6 +84,28 @@
|
||||
.col-fixed-3{left:220px;}
|
||||
.col-fixed-end{right:0;min-width:100px;box-shadow:-2px 0 4px rgba(0,0,0,0.04);}
|
||||
.col-fixed-3::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;background:linear-gradient(to right,rgba(0,0,0,0.04),transparent);pointer-events:none;}
|
||||
.count-link{font-weight:600;color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
|
||||
.count-link:hover{color:#40a9ff;}
|
||||
/* 咨询记录弹窗 */
|
||||
.record-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;}
|
||||
.record-modal.open{display:flex;}
|
||||
.record-modal__box{background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.15);width:95%;max-width:1100px;max-height:90vh;display:flex;flex-direction:column;}
|
||||
.record-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.record-modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.record-modal__close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .15s;}
|
||||
.record-modal__close:hover{background:rgba(0,0,0,0.06);color:var(--text-primary);}
|
||||
.record-modal__expert{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;flex-shrink:0;}
|
||||
.record-modal__expert-avatar{width:48px;height:48px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:600;font-size:var(--font-lg);flex-shrink:0;}
|
||||
.record-modal__expert-info{display:flex;flex-direction:column;gap:4px;flex:1;}
|
||||
.record-modal__expert-name{font-size:var(--font-base);font-weight:600;}
|
||||
.record-modal__expert-meta{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.record-modal__expert-stats{display:flex;gap:24px;flex-shrink:0;}
|
||||
.record-modal__stat-item{text-align:center;}
|
||||
.record-modal__stat-value{font-size:var(--font-lg);font-weight:600;color:var(--primary);}
|
||||
.record-modal__stat-label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;}
|
||||
.record-modal__body{flex:1;overflow:auto;padding:0;}
|
||||
.record-modal__body .table-card{border-radius:0;box-shadow:none;}
|
||||
.record-modal__body .table-card__header{padding:12px 24px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -211,7 +233,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="col-fixed col-fixed-3">CQ医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">1,234</td>
|
||||
<td><span class="count-link" onclick="openRecordModal('李医生','心血管内科','主任医师','CQ医院','1,234','3','986','248','4.9','98%')">1,234</span></td>
|
||||
<td><span class="tag tag-blue">3</span></td>
|
||||
<td>986</td>
|
||||
<td>248</td>
|
||||
@@ -240,7 +262,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="col-fixed col-fixed-3">中心医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">987</td>
|
||||
<td><span class="count-link" onclick="openRecordModal('王医生','内分泌科','副主任医师','中心医院','987','2','756','231','4.8','95%')">987</span></td>
|
||||
<td><span class="tag tag-blue">2</span></td>
|
||||
<td>756</td>
|
||||
<td>231</td>
|
||||
@@ -269,7 +291,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="col-fixed col-fixed-3">人民医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">756</td>
|
||||
<td><span class="count-link" onclick="openRecordModal('张医生','神经内科','主治医师','人民医院','756','1','612','144','4.7','92%')">756</span></td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>612</td>
|
||||
<td>144</td>
|
||||
@@ -298,7 +320,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="col-fixed col-fixed-3">CQ医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">543</td>
|
||||
<td><span class="count-link" onclick="openRecordModal('陈医生','骨科','副主任医师','CQ医院','543','0','489','54','4.5','88%')">543</span></td>
|
||||
<td><span class="tag tag-blue">0</span></td>
|
||||
<td>489</td>
|
||||
<td>54</td>
|
||||
@@ -327,7 +349,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="col-fixed col-fixed-3">中心医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">312</td>
|
||||
<td><span class="count-link" onclick="openRecordModal('孙医生','消化内科','主治医师','中心医院','312','1','278','34','3.8','75%')">312</span></td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>278</td>
|
||||
<td>34</td>
|
||||
@@ -360,5 +382,161 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 咨询记录弹窗 -->
|
||||
<div class="record-modal" id="recordModal" onclick="if(event.target===this)closeRecordModal()">
|
||||
<div class="record-modal__box">
|
||||
<div class="record-modal__header">
|
||||
<div class="record-modal__title">咨询记录明细</div>
|
||||
<button class="record-modal__close" onclick="closeRecordModal()">✕</button>
|
||||
</div>
|
||||
<div class="record-modal__expert" id="recordExpertInfo">
|
||||
<!-- 动态填充 -->
|
||||
</div>
|
||||
<div class="record-modal__body">
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">咨询记录列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);" id="recordTotal">共 0 条</div>
|
||||
</div>
|
||||
<div style="padding:12px 24px 0;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th>员工工号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>咨询类型</th>
|
||||
<th>咨询状态</th>
|
||||
<th>发起咨询时间</th>
|
||||
<th>首次回复时间</th>
|
||||
<th>咨询完成时间</th>
|
||||
<th>咨询时长</th>
|
||||
<th>评分</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recordTableBody">
|
||||
<!-- 动态填充 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span id="recordPaginationInfo">共 0 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 模拟咨询记录数据（按专家名字索引）
|
||||
var mockRecords = {
|
||||
'李医生': [
|
||||
{no:'ZJ20260409001',name:'张伟',empNo:'EMP001',unit:'采油一厂',dept:'心血管科',type:'图文咨询',status:'已完成',startTime:'2026-04-09 09:12',firstReply:'2026-04-09 09:25',endTime:'2026-04-09 09:35',duration:'23分钟',score:'★★★★★'},
|
||||
{no:'ZJ20260407007',name:'陈磊',empNo:'EMP006',unit:'采油一厂',dept:'技术部',type:'图文咨询',status:'已超时',startTime:'2026-04-07 09:55',firstReply:'2026-04-07 10:05',endTime:'2026-04-07 10:20',duration:'15分钟',score:'★★★★★'},
|
||||
{no:'ZJ20260409011',name:'马丽',empNo:'EMP011',unit:'采油三厂',dept:'技术部',type:'视频咨询',status:'进行中',startTime:'2026-04-09 16:30',firstReply:'2026-04-09 16:35',endTime:'—',duration:'—',score:'—'},
|
||||
{no:'ZJ20260405001',name:'赵刚',empNo:'EMP015',unit:'采油一厂',dept:'行政部',type:'图文咨询',status:'已完成',startTime:'2026-04-05 14:10',firstReply:'2026-04-05 14:22',endTime:'2026-04-05 14:35',duration:'25分钟',score:'★★★★☆'},
|
||||
{no:'ZJ20260403002',name:'周丽',empNo:'EMP020',unit:'采油二厂',dept:'安全部',type:'视频咨询',status:'已完成',startTime:'2026-04-03 10:00',firstReply:'2026-04-03 10:12',endTime:'2026-04-03 10:55',duration:'55分钟',score:'★★★★★'},
|
||||
],
|
||||
'王医生': [
|
||||
{no:'ZJ20260409002',name:'李明',empNo:'EMP002',unit:'采油二厂',dept:'内分泌科',type:'视频咨询',status:'已完成',startTime:'2026-04-09 10:30',firstReply:'2026-04-09 10:45',endTime:'2026-04-09 11:15',duration:'45分钟',score:'★★★★☆'},
|
||||
{no:'ZJ20260409009',name:'吴娟',empNo:'EMP008',unit:'采油二厂',dept:'技术部',type:'视频咨询',status:'待确认',startTime:'2026-04-09 15:10',firstReply:'—',endTime:'—',duration:'—',score:'—'},
|
||||
{no:'ZJ20260406003',name:'郑强',empNo:'EMP012',unit:'采油三厂',dept:'生产部',type:'图文咨询',status:'已完成',startTime:'2026-04-06 08:45',firstReply:'2026-04-06 08:55',endTime:'2026-04-06 09:05',duration:'20分钟',score:'★★★★★'},
|
||||
],
|
||||
'张医生': [
|
||||
{no:'ZJ20260409003',name:'王芳',empNo:'EMP003',unit:'勘探开发研究院',dept:'医学研究部',type:'图文咨询',status:'进行中',startTime:'2026-04-09 11:05',firstReply:'2026-04-09 11:15',endTime:'—',duration:'—',score:'—'},
|
||||
{no:'ZJ20260409010',name:'何军',empNo:'EMP009',unit:'勘探开发研究院',dept:'数据分析部',type:'视频咨询',status:'待开始',startTime:'2026-04-09 16:00',firstReply:'2026-04-09 16:05',endTime:'—',duration:'—',score:'—'},
|
||||
{no:'ZJ20260404004',name:'林涛',empNo:'EMP018',unit:'采油一厂',dept:'心血管科',type:'图文咨询',status:'已完成',startTime:'2026-04-04 09:30',firstReply:'2026-04-04 09:42',endTime:'2026-04-04 09:55',duration:'25分钟',score:'★★★★☆'},
|
||||
],
|
||||
'陈医生': [
|
||||
{no:'ZJ20260408004',name:'刘洋',empNo:'EMP004',unit:'采油三厂',dept:'生产部',type:'图文咨询',status:'已完成',startTime:'2026-04-08 14:22',firstReply:'2026-04-08 14:35',endTime:'2026-04-08 14:40',duration:'18分钟',score:'★★★☆☆'},
|
||||
{no:'ZJ20260407006',name:'孙丽',empNo:'EMP010',unit:'采油二厂',dept:'技术部',type:'视频咨询',status:'已取消',startTime:'2026-04-07 08:20',firstReply:'—',endTime:'2026-04-07 08:45',duration:'—',score:'—'},
|
||||
],
|
||||
'孙医生': [
|
||||
{no:'ZJ20260408005',name:'赵静',empNo:'EMP005',unit:'机关事务服务中心',dept:'行政部',type:'视频咨询',status:'已拒绝',startTime:'2026-04-08 16:40',firstReply:'—',endTime:'2026-04-08 16:42',duration:'32分钟',score:'—'},
|
||||
{no:'ZJ20260402005',name:'黄敏',empNo:'EMP022',unit:'机关事务服务中心',dept:'人力资源部',type:'图文咨询',status:'已完成',startTime:'2026-04-02 11:00',firstReply:'2026-04-02 11:20',endTime:'2026-04-02 11:35',duration:'35分钟',score:'★★★☆☆'},
|
||||
]
|
||||
};
|
||||
|
||||
function getStatusTag(status) {
|
||||
var map = {
|
||||
'已完成': 'tag-green',
|
||||
'进行中': 'tag-blue',
|
||||
'待回复': 'tag-orange',
|
||||
'待确认': 'tag-blue',
|
||||
'待开始': 'tag-green',
|
||||
'已超时': 'tag-gray',
|
||||
'已取消': 'tag-gray',
|
||||
'已拒绝': 'tag-red'
|
||||
};
|
||||
return map[status] || 'tag-blue';
|
||||
}
|
||||
|
||||
function openRecordModal(name, dept, title, hospital, total, inProgress, textCount, videoCount, satisfaction, replyRate) {
|
||||
// 填充专家信息
|
||||
var expertHtml = '<div class="record-modal__expert-avatar">' + name.charAt(0) + '</div>';
|
||||
expertHtml += '<div class="record-modal__expert-info">';
|
||||
expertHtml += '<div class="record-modal__expert-name">' + name + '</div>';
|
||||
expertHtml += '<div class="record-modal__expert-meta">' + dept + ' · ' + title + ' ｜ ' + hospital + '</div>';
|
||||
expertHtml += '</div>';
|
||||
expertHtml += '<div class="record-modal__expert-stats">';
|
||||
expertHtml += '<div class="record-modal__stat-item"><div class="record-modal__stat-value">' + total + '</div><div class="record-modal__stat-label">总咨询</div></div>';
|
||||
expertHtml += '<div class="record-modal__stat-item"><div class="record-modal__stat-value">' + textCount + '</div><div class="record-modal__stat-label">图文</div></div>';
|
||||
expertHtml += '<div class="record-modal__stat-item"><div class="record-modal__stat-value">' + videoCount + '</div><div class="record-modal__stat-label">视频</div></div>';
|
||||
expertHtml += '<div class="record-modal__stat-item"><div class="record-modal__stat-value">' + satisfaction + '</div><div class="record-modal__stat-label">满意度</div></div>';
|
||||
expertHtml += '</div>';
|
||||
document.getElementById('recordExpertInfo').innerHTML = expertHtml;
|
||||
|
||||
// 填充咨询记录列表
|
||||
var records = mockRecords[name] || [];
|
||||
document.getElementById('recordTotal').textContent = '共 ' + records.length + ' 条';
|
||||
document.getElementById('recordPaginationInfo').textContent = '共 ' + records.length + ' 条';
|
||||
|
||||
var tbodyHtml = '';
|
||||
for (var i = 0; i < records.length; i++) {
|
||||
var r = records[i];
|
||||
tbodyHtml += '<tr>';
|
||||
tbodyHtml += '<td>' + (i + 1) + '</td>';
|
||||
tbodyHtml += '<td style="font-family:monospace;color:var(--text-secondary);">' + r.no + '</td>';
|
||||
tbodyHtml += '<td>' + r.name + '</td>';
|
||||
tbodyHtml += '<td style="font-family:monospace;color:var(--text-secondary);">' + r.empNo + '</td>';
|
||||
tbodyHtml += '<td>' + r.unit + '</td>';
|
||||
tbodyHtml += '<td>' + r.dept + '</td>';
|
||||
tbodyHtml += '<td><span class="tag ' + (r.type === '图文咨询' ? 'tag-blue' : 'tag-orange') + '">' + r.type + '</span></td>';
|
||||
tbodyHtml += '<td><span class="tag ' + getStatusTag(r.status) + '">' + r.status + '</span></td>';
|
||||
tbodyHtml += '<td>' + r.startTime + '</td>';
|
||||
tbodyHtml += '<td>' + r.firstReply + '</td>';
|
||||
tbodyHtml += '<td>' + r.endTime + '</td>';
|
||||
tbodyHtml += '<td>' + r.duration + '</td>';
|
||||
tbodyHtml += '<td><span class="stars">' + r.score + '</span></td>';
|
||||
tbodyHtml += '</tr>';
|
||||
}
|
||||
document.getElementById('recordTableBody').innerHTML = tbodyHtml;
|
||||
|
||||
document.getElementById('recordModal').classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeRecordModal() {
|
||||
document.getElementById('recordModal').classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user