feat(health-consult): 优化咨询对话弹窗交互
- 移除二级页面跳转，改为模态弹窗展示对话内容 - 弹窗顶部添加咨询基本信息栏（员工、专家、医院、科室、时间等） - 支持点击关闭按钮或背景遮罩关闭弹窗 - 对话内容采用气泡样式，区分用户和专家/助手 - 应用于三个页面：员工咨询专家、员工咨询小助手、用户评价 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Haiku 4.5
@@ -0,0 +1,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询 - 员工咨询小助手记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.page-header{margin-bottom:20px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.question-preview{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.org-select-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:40px;left:0;z-index:300;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(0,0,0,0.12);width:420px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:240px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:8px 14px;font-size:var(--font-xs);color:#999;background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:9px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:#E6F7FF;color:var(--primary);font-weight:500;}
|
||||
.org-item svg{flex-shrink:0;opacity:.45;}
|
||||
.org-item.active svg{opacity:1;}
|
||||
.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;}
|
||||
.modal.open{display:flex;}
|
||||
.modal-content{background:#fff;border-radius:var(--radius-md);width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.15);}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal-title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
|
||||
.modal-close:hover{color:var(--text-primary);}
|
||||
.modal-info{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
|
||||
.modal-info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.modal-info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.modal-info-value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.modal-body{padding:24px;}
|
||||
.chat-message{display:flex;margin-bottom:16px;gap:12px;}
|
||||
.chat-message.user{flex-direction:row-reverse;}
|
||||
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);flex-shrink:0;}
|
||||
.chat-message.user .chat-avatar{background:#E8E8E8;color:var(--text-primary);}
|
||||
.chat-bubble{max-width:70%;padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
|
||||
.chat-message.user .chat-bubble{background:var(--primary);color:#fff;}
|
||||
.chat-time{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;text-align:center;margin-bottom:12px;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</div>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">咨询数据</div>
|
||||
<a href="history-expert.html" class="sidebar-item sidebar-item--parent open">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▲</span>
|
||||
</a>
|
||||
<a href="history-expert.html" class="sidebar-subitem">员工咨询专家</a>
|
||||
<a href="history-assistant.html" class="sidebar-subitem active">员工咨询小助手</a>
|
||||
<a href="history-evaluation.html" class="sidebar-subitem">用户评价</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label style="white-space:nowrap;">所属单位部门</label>
|
||||
<div class="org-select-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="orgUnitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" data-unit="" onclick="selectUnit(this,'全部单位/部门','')">
|
||||
全部单位/部门
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy1" onclick="selectUnit(this,'采油一厂','cy1')">
|
||||
采油一厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy2" onclick="selectUnit(this,'采油二厂','cy2')">
|
||||
采油二厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy3" onclick="selectUnit(this,'采油三厂','cy3')">
|
||||
采油三厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="kfyj" onclick="selectUnit(this,'勘探开发研究院','kfyj')">
|
||||
勘探开发研究院
|
||||
</div>
|
||||
<div class="org-item" data-unit="jgsh" onclick="selectUnit(this,'机关事务服务中心','jgsh')">
|
||||
机关事务服务中心
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-col" id="orgDeptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" data-dept="" onclick="selectDept(this,'全部部门','')">
|
||||
全部部门
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>发起咨询时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<!-- [交互] 点击导出列表数据 -->
|
||||
<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>
|
||||
<!-- [交互] 点击查看导出任务列表 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<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);">共 38,920 条</div>
|
||||
</div>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>心血管科</td>
|
||||
<td>健康小助手</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td>2026-04-09 08:30</td>
|
||||
<td>2026-04-09 08:35</td>
|
||||
<td>2026-04-09 08:38</td>
|
||||
<td>8分钟</td>
|
||||
<td><span class="link" onclick="openChat('张伟','健康小助手','2026-04-09 08:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002</td>
|
||||
<td>采油二厂</td>
|
||||
<td>内分泌科</td>
|
||||
<td>健康小助手</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-09 09:45</td>
|
||||
<td>2026-04-09 09:50</td>
|
||||
<td>—</td>
|
||||
<td>15分钟</td>
|
||||
<td><span class="link" onclick="openChat('李明','健康小助手','2026-04-09 09:45')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>医学研究部</td>
|
||||
<td>健康小助手</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td>2026-04-09 10:12</td>
|
||||
<td>2026-04-09 10:14</td>
|
||||
<td>2026-04-09 10:15</td>
|
||||
<td>3分钟</td>
|
||||
<td><span class="link" onclick="openChat('王芳','健康小助手','2026-04-09 10:12')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产部</td>
|
||||
<td>健康小助手</td>
|
||||
<td><span class="tag tag-orange">待回复</span></td>
|
||||
<td>2026-04-08 14:55</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>6分钟</td>
|
||||
<td><span class="link" onclick="openChat('刘洋','健康小助手','2026-04-08 14:55')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵静</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005</td>
|
||||
<td>机关事务服务中心</td>
|
||||
<td>行政部</td>
|
||||
<td>健康小助手</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td>2026-04-08 16:20</td>
|
||||
<td>2026-04-08 16:22</td>
|
||||
<td>2026-04-08 16:24</td>
|
||||
<td>4分钟</td>
|
||||
<td><span class="link" onclick="openChat('赵静','健康小助手','2026-04-08 16:20')">查看对话</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 38,920 条</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>
|
||||
<span>...</span>
|
||||
<button class="page-btn">3892</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>
|
||||
</main>
|
||||
<div class="modal" id="chatModal" onclick="if(event.target===this)closeChat()">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">咨询对话</div>
|
||||
<button class="modal-close" onclick="closeChat()">✕</button>
|
||||
</div>
|
||||
<div class="modal-info" id="chatInfo"></div>
|
||||
<div class="modal-body" id="chatContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 部门数据映射
|
||||
const deptMap = {
|
||||
'cy1': ['心血管科', '内分泌科', '神经内科'],
|
||||
'cy2': ['骨科', '消化内科', '呼吸科'],
|
||||
'cy3': ['生产部', '技术部', '安全部'],
|
||||
'kfyj': ['医学研究部', '数据分析部'],
|
||||
'jgsh': ['行政部', '人力资源部']
|
||||
};
|
||||
|
||||
function toggleOrg() {
|
||||
const panel = document.getElementById('orgPanel');
|
||||
const trigger = document.getElementById('orgTrigger');
|
||||
panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectUnit(elem, unitName, unitCode) {
|
||||
// 更新单位列表的active状态
|
||||
document.querySelectorAll('#orgUnitCol .org-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
elem.classList.add('active');
|
||||
|
||||
// 更新部门列表
|
||||
const deptCol = document.getElementById('orgDeptCol');
|
||||
const depts = deptMap[unitCode] || [];
|
||||
|
||||
let deptHtml = '<div class="org-col__title">部门</div>';
|
||||
deptHtml += '<div class="org-item active" data-dept="" onclick="selectDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
|
||||
depts.forEach(dept => {
|
||||
deptHtml += `<div class="org-item" data-dept="${dept}" onclick="selectDept(this,'${dept}','${dept}')">${dept}</div>`;
|
||||
});
|
||||
|
||||
deptCol.innerHTML = deptHtml;
|
||||
}
|
||||
|
||||
function selectDept(elem, deptName, deptCode) {
|
||||
// 更新部门列表的active状态
|
||||
document.querySelectorAll('#orgDeptCol .org-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
elem.classList.add('active');
|
||||
}
|
||||
|
||||
function openChat(name, assistant, time) {
|
||||
const chatInfo = document.getElementById('chatInfo');
|
||||
chatInfo.innerHTML = `
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">员工姓名</div>
|
||||
<div class="modal-info-value">${name}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">咨询小助手</div>
|
||||
<div class="modal-info-value">${assistant}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">发起咨询时间</div>
|
||||
<div class="modal-info-value">${time}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const chatContent = document.getElementById('chatContent');
|
||||
chatContent.innerHTML = `
|
||||
<div class="chat-time">2026-04-09 08:30</div>
|
||||
<div class="chat-message user">
|
||||
<div class="chat-avatar">我</div>
|
||||
<div class="chat-bubble">最近睡眠不好，有什么办法改善吗？</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-09 08:35</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">助</div>
|
||||
<div class="chat-bubble">您好，改善睡眠可以尝试以下方法：1.保持规律的作息时间 2.避免睡前使用电子产品 3.适度运动 4.放松身心，可以尝试冥想或深呼吸</div>
|
||||
</div>
|
||||
<div class="chat-message user">
|
||||
<div class="chat-avatar">我</div>
|
||||
<div class="chat-bubble">谢谢，我会试试看</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-09 08:38</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">助</div>
|
||||
<div class="chat-bubble">不客气，希望能帮到您。如果问题持续，建议咨询专业医生。</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('chatModal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeChat() {
|
||||
document.getElementById('chatModal').classList.remove('open');
|
||||
}
|
||||
|
||||
// 点击外部关闭下拉框
|
||||
document.addEventListener('click', function(e) {
|
||||
const orgWrap = document.getElementById('orgWrap');
|
||||
if (orgWrap && !orgWrap.contains(e.target)) {
|
||||
const panel = document.getElementById('orgPanel');
|
||||
const trigger = document.getElementById('orgTrigger');
|
||||
panel.classList.remove('open');
|
||||
trigger.classList.remove('open');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询 - 用户评价 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.page-header{margin-bottom:20px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px;}
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:28px;font-weight:700;margin-top:8px;}
|
||||
.stat-card__sub{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.stars{color:#FAAD14;font-size:var(--font-base);letter-spacing:1px;}
|
||||
.stars-gray{color:#E8E8E8;}
|
||||
.eval-text{max-width:320px;line-height:1.6;color:var(--text-secondary);}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.score-big{font-size:48px;font-weight:700;color:var(--warning);line-height:1;}
|
||||
.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;}
|
||||
.modal.open{display:flex;}
|
||||
.modal-content{background:#fff;border-radius:var(--radius-md);width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.15);}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal-title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
|
||||
.modal-close:hover{color:var(--text-primary);}
|
||||
.modal-info{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
|
||||
.modal-info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.modal-info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.modal-info-value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.modal-body{padding:24px;}
|
||||
.chat-message{display:flex;margin-bottom:16px;gap:12px;}
|
||||
.chat-message.user{flex-direction:row-reverse;}
|
||||
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);flex-shrink:0;}
|
||||
.chat-message.user .chat-avatar{background:#E8E8E8;color:var(--text-primary);}
|
||||
.chat-bubble{max-width:70%;padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
|
||||
.chat-message.user .chat-bubble{background:var(--primary);color:#fff;}
|
||||
.chat-time{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;text-align:center;margin-bottom:12px;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</div>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">咨询数据</div>
|
||||
<a href="history-expert.html" class="sidebar-item sidebar-item--parent open">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▲</span>
|
||||
</a>
|
||||
<a href="history-expert.html" class="sidebar-subitem">员工咨询专家</a>
|
||||
<a href="history-assistant.html" class="sidebar-subitem">员工咨询小助手</a>
|
||||
<a href="history-evaluation.html" class="sidebar-subitem active">用户评价</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>评分筛选</label>
|
||||
<select class="filter-select">
|
||||
<option>全部评分</option>
|
||||
<option>5星</option>
|
||||
<option>4星</option>
|
||||
<option>3星</option>
|
||||
<option>2星及以下（差评）</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>评价时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<button class="btn btn-default" style="margin-left:auto;">
|
||||
<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">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">评价列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 9,823 条</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>咨询专家</th>
|
||||
<th>专家医院</th>
|
||||
<th>专家科室</th>
|
||||
<th>评分</th>
|
||||
<th>评价内容</th>
|
||||
<th>评价时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001023</td>
|
||||
<td>李医生</td>
|
||||
<td>北京协和医院</td>
|
||||
<td>心血管内科</td>
|
||||
<td><span class="stars">★★★★★</span></td>
|
||||
<td><div class="eval-text">专家回复很专业，解答了我的疑惑，建议也很实用，非常感谢！</div></td>
|
||||
<td>2026-04-09 09:40</td>
|
||||
<td><span class="link" onclick="openChat('张伟','李医生','北京协和医院','心血管内科','2026-04-09 09:40')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002187</td>
|
||||
<td>王医生</td>
|
||||
<td>上海瑞金医院</td>
|
||||
<td>内分泌科</td>
|
||||
<td><span class="stars">★★★★</span><span class="stars-gray">★</span></td>
|
||||
<td><div class="eval-text">回复比较及时，解释也清楚，就是感觉有点简短。</div></td>
|
||||
<td>2026-04-09 11:20</td>
|
||||
<td><span class="link" onclick="openChat('李明','王医生','上海瑞金医院','内分泌科','2026-04-09 11:20')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003456</td>
|
||||
<td>陈医生</td>
|
||||
<td>广州中山医院</td>
|
||||
<td>骨科</td>
|
||||
<td><span class="stars">★★★</span><span class="stars-gray">★★</span></td>
|
||||
<td><div class="eval-text">回复有点慢，等了将近一天才收到回复。</div></td>
|
||||
<td>2026-04-08 15:10</td>
|
||||
<td><span class="link" onclick="openChat('刘洋','陈医生','广州中山医院','骨科','2026-04-08 15:10')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈磊</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004891</td>
|
||||
<td>李医生</td>
|
||||
<td>北京协和医院</td>
|
||||
<td>心血管内科</td>
|
||||
<td><span class="stars">★★★★★</span></td>
|
||||
<td><div class="eval-text">非常专业，给出了详细的检查建议，很放心。</div></td>
|
||||
<td>2026-04-07 10:30</td>
|
||||
<td><span class="link" onclick="openChat('陈磊','李医生','北京协和医院','心血管内科','2026-04-07 10:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孙丽</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005234</td>
|
||||
<td>孙医生</td>
|
||||
<td>杭州邵逸夫医院</td>
|
||||
<td>消化内科</td>
|
||||
<td><span class="stars">★</span><span class="stars-gray">★★★★</span></td>
|
||||
<td>
|
||||
<div class="eval-text" style="color:var(--danger);">回复内容完全不对症，感觉没有认真看我的问题。</div>
|
||||
<span class="tag tag-red" style="margin-top:4px;">差评</span>
|
||||
</td>
|
||||
<td>2026-04-06 14:55</td>
|
||||
<td><span class="link" onclick="openChat('孙丽','孙医生','杭州邵逸夫医院','消化内科','2026-04-06 14:55')">查看对话</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 9,823 条</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>
|
||||
<span>...</span>
|
||||
<button class="page-btn">983</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>
|
||||
</main>
|
||||
<div class="modal" id="chatModal" onclick="if(event.target===this)closeChat()">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">咨询对话</div>
|
||||
<button class="modal-close" onclick="closeChat()">✕</button>
|
||||
</div>
|
||||
<div class="modal-info" id="chatInfo"></div>
|
||||
<div class="modal-body" id="chatContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openChat(name, expert, hospital, dept, time) {
|
||||
const chatInfo = document.getElementById('chatInfo');
|
||||
chatInfo.innerHTML = `
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">员工姓名</div>
|
||||
<div class="modal-info-value">${name}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">咨询专家</div>
|
||||
<div class="modal-info-value">${expert}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">专家医院</div>
|
||||
<div class="modal-info-value">${hospital}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">专家科室</div>
|
||||
<div class="modal-info-value">${dept}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">评价时间</div>
|
||||
<div class="modal-info-value">${time}</div>
|
||||
</div>
|
||||
`;
|
||||
const chatContent = document.getElementById('chatContent');
|
||||
chatContent.innerHTML = `
|
||||
<div class="chat-time">2026-04-09 09:12</div>
|
||||
<div class="chat-message user">
|
||||
<div class="chat-avatar">我</div>
|
||||
<div class="chat-bubble">您好，我最近感觉心悸，请问需要做什么检查？</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-09 09:25</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">医</div>
|
||||
<div class="chat-bubble">您好，根据您的描述，建议先做心电图和心脏彩超检查，排除器质性心脏病。同时要注意休息，避免过度劳累。</div>
|
||||
</div>
|
||||
<div class="chat-message user">
|
||||
<div class="chat-avatar">我</div>
|
||||
<div class="chat-bubble">好的，谢谢医生。那这些检查大概需要多少费用？</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-09 09:35</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">医</div>
|
||||
<div class="chat-bubble">心电图大约100-200元，心脏彩超大约300-500元，具体费用可能因医院而异。建议您到当地医院咨询。</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('chatModal').classList.add('open');
|
||||
}
|
||||
function closeChat() {
|
||||
document.getElementById('chatModal').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,646 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家咨询 - 员工咨询专家记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.page-header{margin-bottom:20px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.stars{color:#FAAD14;font-size:var(--font-sm);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.filter-bar__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-bar__row.hidden{display:none;}
|
||||
.filter-bar__expand{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
|
||||
.filter-bar__expand-btn{background:none;border:none;color:var(--primary);cursor:pointer;font-size:var(--font-sm);padding:0;display:flex;align-items:center;gap:4px;transition:all .2s;}
|
||||
.filter-bar__expand-btn:hover{color:#40a9ff;}
|
||||
.filter-bar__expand-btn svg{width:14px;height:14px;transition:transform .2s;}
|
||||
.filter-bar__expand-btn.expanded svg{transform:rotate(180deg);}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.org-select-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:40px;left:0;z-index:300;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:420px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:240px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:8px 14px;font-size:var(--font-xs);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:9px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:#E6F7FF;color:var(--primary);font-weight:500;}
|
||||
.org-item.selected{color:var(--primary);}
|
||||
.org-item svg{flex-shrink:0;opacity:.45;}
|
||||
.org-item.active svg{opacity:1;}
|
||||
.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;}
|
||||
.modal.open{display:flex;}
|
||||
.modal-content{background:#fff;border-radius:var(--radius-md);width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.15);}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal-title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
|
||||
.modal-close:hover{color:var(--text-primary);}
|
||||
.modal-info{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
|
||||
.modal-info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.modal-info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.modal-info-value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.modal-body{padding:24px;}
|
||||
.chat-message{display:flex;margin-bottom:16px;gap:12px;}
|
||||
.chat-message.user{flex-direction:row-reverse;}
|
||||
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);flex-shrink:0;}
|
||||
.chat-message.user .chat-avatar{background:#E8E8E8;color:var(--text-primary);}
|
||||
.chat-bubble{max-width:70%;padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
|
||||
.chat-message.user .chat-bubble{background:var(--primary);color:#fff;}
|
||||
.chat-time{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;text-align:center;margin-bottom:12px;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</div>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">咨询数据</div>
|
||||
<a href="history-expert.html" class="sidebar-item sidebar-item--parent open">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▲</span>
|
||||
</a>
|
||||
<a href="history-expert.html" class="sidebar-subitem active">员工咨询专家</a>
|
||||
<a href="history-assistant.html" class="sidebar-subitem">员工咨询小助手</a>
|
||||
<a href="history-evaluation.html" class="sidebar-subitem">用户评价</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-bar__row">
|
||||
<div class="filter-item">
|
||||
<label>姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询类型</label>
|
||||
<select class="filter-select" id="consultTypeSelect" onchange="updateConsultStatus()">
|
||||
<option value="">全部类型</option>
|
||||
<option value="text">图文咨询</option>
|
||||
<option value="video">视频咨询</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询状态</label>
|
||||
<select class="filter-select" id="consultStatusSelect">
|
||||
<option>全部状态</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label style="white-space:nowrap;">所属单位部门</label>
|
||||
<div class="org-select-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="orgUnitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" data-unit="" onclick="selectUnit(this,'全部单位/部门','')">
|
||||
全部单位/部门
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy1" onclick="selectUnit(this,'采油一厂','cy1')">
|
||||
采油一厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy2" onclick="selectUnit(this,'采油二厂','cy2')">
|
||||
采油二厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy3" onclick="selectUnit(this,'采油三厂','cy3')">
|
||||
采油三厂
|
||||
</div>
|
||||
<div class="org-item" data-unit="kfyj" onclick="selectUnit(this,'勘探开发研究院','kfyj')">
|
||||
勘探开发研究院
|
||||
</div>
|
||||
<div class="org-item" data-unit="jgsh" onclick="selectUnit(this,'机关事务服务中心','jgsh')">
|
||||
机关事务服务中心
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-col" id="orgDeptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" data-dept="" onclick="selectDept(this,'全部部门','')">
|
||||
全部部门
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-bar__row hidden" id="filterExpanded">
|
||||
<div class="filter-item">
|
||||
<label>专家姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家医院</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家医院">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家科室</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家科室">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部类型</option>
|
||||
<option>收费专家</option>
|
||||
<option>免费专家</option>
|
||||
<option>其他专家</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>发起咨询时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>首次回复时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-bar__row">
|
||||
<button class="filter-bar__expand-btn" id="expandBtn" onclick="toggleFilter()" style="background:none;border:none;color:var(--primary);cursor:pointer;font-size:var(--font-sm);padding:0;display:flex;align-items:center;gap:4px;transition:all .2s;">
|
||||
<span>更多条件</span>
|
||||
<svg viewBox="0 0 14 14" fill="none" style="width:14px;height:14px;transition:transform .2s;"><path d="M2 5l5 5 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<!-- [交互] 点击导出列表数据 -->
|
||||
<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>
|
||||
<!-- [交互] 点击查看导出任务列表 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<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);">共 12,567 条</div>
|
||||
</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>
|
||||
<th>咨询时长</th>
|
||||
<th>评分</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>心血管科</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td>李医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>心血管内科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-04-09 09:12</td>
|
||||
<td>2026-04-09 09:25</td>
|
||||
<td>2026-04-09 09:35</td>
|
||||
<td>23分钟</td>
|
||||
<td><span class="stars">★★★★★</span></td>
|
||||
<td><span class="link" onclick="openChat('张伟','李医生','长庆医院','心血管内科','2026-04-09 09:12')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002</td>
|
||||
<td>采油二厂</td>
|
||||
<td>内分泌科</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td>王医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>内分泌科</td>
|
||||
<td><span class="tag tag-green">免费专家</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-04-09 10:30</td>
|
||||
<td>2026-04-09 10:45</td>
|
||||
<td>2026-04-09 11:15</td>
|
||||
<td>45分钟</td>
|
||||
<td><span class="stars">★★★★☆</span></td>
|
||||
<td><span class="link" onclick="openChat('李明','王医生','长庆医院','内分泌科','2026-04-09 10:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>医学研究部</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td>张医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>神经内科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-09 11:05</td>
|
||||
<td>2026-04-09 11:15</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><span class="link" onclick="openChat('王芳','张医生','长庆医院','神经内科','2026-04-09 11:05')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产部</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td>陈医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>骨科</td>
|
||||
<td><span class="tag tag-green">其他专家</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-04-08 14:22</td>
|
||||
<td>2026-04-08 14:35</td>
|
||||
<td>2026-04-08 14:40</td>
|
||||
<td>18分钟</td>
|
||||
<td><span class="stars">★★★☆☆</span></td>
|
||||
<td><span class="link" onclick="openChat('刘洋','陈医生','长庆医院','骨科','2026-04-08 14:22')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵静</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005</td>
|
||||
<td>机关事务服务中心</td>
|
||||
<td>行政部</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td>孙医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>消化内科</td>
|
||||
<td><span class="tag tag-green">免费专家</span></td>
|
||||
<td><span class="tag tag-red">已拒绝</span></td>
|
||||
<td>2026-04-08 16:40</td>
|
||||
<td>—</td>
|
||||
<td>2026-04-08 16:42</td>
|
||||
<td>32分钟</td>
|
||||
<td>—</td>
|
||||
<td><span class="link" onclick="openChat('赵静','孙医生','长庆医院','消化内科','2026-04-08 16:40')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈磊</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP006</td>
|
||||
<td>采油一厂</td>
|
||||
<td>技术部</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td>李医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>心血管内科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-04-07 09:55</td>
|
||||
<td>2026-04-07 10:05</td>
|
||||
<td>2026-04-07 10:20</td>
|
||||
<td>15分钟</td>
|
||||
<td><span class="stars">★★★★★</span></td>
|
||||
<td><span class="link" onclick="openChat('陈磊','李医生','长庆医院','心血管内科','2026-04-07 09:55')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>周华</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP007</td>
|
||||
<td>采油一厂</td>
|
||||
<td>安全部</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td>刘医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>呼吸科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td><span class="tag tag-orange">待回复</span></td>
|
||||
<td>2026-04-09 14:30</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><span class="link" onclick="openChat('周华','刘医生','长庆医院','呼吸科','2026-04-09 14:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>吴娟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP008</td>
|
||||
<td>采油二厂</td>
|
||||
<td>技术部</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td>王医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>内分泌科</td>
|
||||
<td><span class="tag tag-green">免费专家</span></td>
|
||||
<td><span class="tag tag-blue">待确认</span></td>
|
||||
<td>2026-04-09 15:10</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><span class="link" onclick="openChat('吴娟','王医生','长庆医院','内分泌科','2026-04-09 15:10')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>何军</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP009</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>数据分析部</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td>张医生</td>
|
||||
<td>长庆医院</td>
|
||||
<td>神经内科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td><span class="tag tag-green">待开始</span></td>
|
||||
<td>2026-04-09 16:00</td>
|
||||
<td>2026-04-09 16:05</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><span class="link" onclick="openChat('何军','张医生','长庆医院','神经内科','2026-04-09 16:00')">查看对话</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 12,567 条</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>
|
||||
<span>...</span>
|
||||
<button class="page-btn">1257</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>
|
||||
</main>
|
||||
<div class="modal" id="chatModal" onclick="if(event.target===this)closeChat()">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">咨询对话</div>
|
||||
<button class="modal-close" onclick="closeChat()">✕</button>
|
||||
</div>
|
||||
<div class="modal-info" id="chatInfo">
|
||||
<!-- 咨询基本信息将动态插入 -->
|
||||
</div>
|
||||
<div class="modal-body" id="chatContent">
|
||||
<!-- 对话内容将动态插入 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function toggleFilter() {
|
||||
const expandedRow = document.getElementById('filterExpanded');
|
||||
const expandBtn = document.getElementById('expandBtn');
|
||||
|
||||
expandedRow.classList.toggle('hidden');
|
||||
expandBtn.classList.toggle('expanded');
|
||||
|
||||
if (expandBtn.classList.contains('expanded')) {
|
||||
expandBtn.innerHTML = '<span>收起条件</span><svg viewBox="0 0 14 14" fill="none"><path d="M2 5l5 5 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
} else {
|
||||
expandBtn.innerHTML = '<span>更多条件</span><svg viewBox="0 0 14 14" fill="none"><path d="M2 5l5 5 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
// 部门数据映射
|
||||
const deptMap = {
|
||||
'cy1': ['心血管科', '内分泌科', '神经内科'],
|
||||
'cy2': ['骨科', '消化内科', '呼吸科'],
|
||||
'cy3': ['生产部', '技术部', '安全部'],
|
||||
'kfyj': ['医学研究部', '数据分析部'],
|
||||
'jgsh': ['行政部', '人力资源部']
|
||||
};
|
||||
|
||||
// 咨询状态映射
|
||||
const consultStatusMap = {
|
||||
'text': ['待回复', '进行中', '已完成'],
|
||||
'video': ['待确认', '待开始', '已拒绝', '已完成']
|
||||
};
|
||||
|
||||
function updateConsultStatus() {
|
||||
const typeSelect = document.getElementById('consultTypeSelect');
|
||||
const statusSelect = document.getElementById('consultStatusSelect');
|
||||
const selectedType = typeSelect.value;
|
||||
|
||||
let statusOptions = '<option>全部状态</option>';
|
||||
|
||||
if (selectedType === 'text') {
|
||||
consultStatusMap['text'].forEach(status => {
|
||||
statusOptions += `<option>${status}</option>`;
|
||||
});
|
||||
} else if (selectedType === 'video') {
|
||||
consultStatusMap['video'].forEach(status => {
|
||||
statusOptions += `<option>${status}</option>`;
|
||||
});
|
||||
}
|
||||
|
||||
statusSelect.innerHTML = statusOptions;
|
||||
}
|
||||
|
||||
|
||||
function toggleOrg() {
|
||||
const panel = document.getElementById('orgPanel');
|
||||
const trigger = document.getElementById('orgTrigger');
|
||||
panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectUnit(elem, unitName, unitCode) {
|
||||
// 更新单位列表的active状态
|
||||
document.querySelectorAll('#orgUnitCol .org-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
elem.classList.add('active');
|
||||
|
||||
// 更新部门列表
|
||||
const deptCol = document.getElementById('orgDeptCol');
|
||||
const depts = deptMap[unitCode] || [];
|
||||
|
||||
let deptHtml = '<div class="org-col__title">部门</div>';
|
||||
deptHtml += '<div class="org-item active" data-dept="" onclick="selectDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
|
||||
depts.forEach(dept => {
|
||||
deptHtml += `<div class="org-item" data-dept="${dept}" onclick="selectDept(this,'${dept}','${dept}')">${dept}</div>`;
|
||||
});
|
||||
|
||||
deptCol.innerHTML = deptHtml;
|
||||
}
|
||||
|
||||
function selectDept(elem, deptName, deptCode) {
|
||||
// 更新部门列表的active状态
|
||||
document.querySelectorAll('#orgDeptCol .org-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
elem.classList.add('active');
|
||||
}
|
||||
|
||||
function openChat(name, expert, hospital, dept, time) {
|
||||
const chatInfo = document.getElementById('chatInfo');
|
||||
chatInfo.innerHTML = `
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">员工姓名</div>
|
||||
<div class="modal-info-value">${name}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">咨询专家</div>
|
||||
<div class="modal-info-value">${expert}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">专家医院</div>
|
||||
<div class="modal-info-value">${hospital}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">专家科室</div>
|
||||
<div class="modal-info-value">${dept}</div>
|
||||
</div>
|
||||
<div class="modal-info-item">
|
||||
<div class="modal-info-label">发起咨询时间</div>
|
||||
<div class="modal-info-value">${time}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const chatContent = document.getElementById('chatContent');
|
||||
chatContent.innerHTML = `
|
||||
<div class="chat-time">2026-04-09 09:12</div>
|
||||
<div class="chat-message user">
|
||||
<div class="chat-avatar">我</div>
|
||||
<div class="chat-bubble">您好，我最近感觉心悸，请问需要做什么检查？</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-09 09:25</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">医</div>
|
||||
<div class="chat-bubble">您好，根据您的描述，建议先做心电图和心脏彩超检查，排除器质性心脏病。同时要注意休息，避免过度劳累。</div>
|
||||
</div>
|
||||
<div class="chat-message user">
|
||||
<div class="chat-avatar">我</div>
|
||||
<div class="chat-bubble">好的，谢谢医生。那这些检查大概需要多少费用？</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-09 09:35</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">医</div>
|
||||
<div class="chat-bubble">心电图大约100-200元，心脏彩超大约300-500元，具体费用可能因医院而异。建议您到当地医院咨询。</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('chatModal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeChat() {
|
||||
document.getElementById('chatModal').classList.remove('open');
|
||||
}
|
||||
|
||||
// 点击外部关闭下拉框
|
||||
document.addEventListener('click', function(e) {
|
||||
const orgWrap = document.getElementById('orgWrap');
|
||||
if (orgWrap && !orgWrap.contains(e.target)) {
|
||||
const panel = document.getElementById('orgPanel');
|
||||
const trigger = document.getElementById('orgTrigger');
|
||||
panel.classList.remove('open');
|
||||
trigger.classList.remove('open');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user