feat: 新增单位报表明细页，批量优化管理端健康咨询页面
- 新增 archive-unit-detail.html 单位报表明细二级页面 - archive-unit.html 查看明细添加跳转逻辑 - 新增员工明细、视频详情、结算等多个页面 - 批量优化管理端现有页面交互和布局细节 - 同步更新导航页 SITE_MAP 和 CHANGELOG Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,489 @@
|
||||
<!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;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.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;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:20px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb__sep{color:#ccc;}
|
||||
.breadcrumb__cur{color:var(--text-primary);font-weight:500;}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;display:flex;align-items:center;gap:32px;}
|
||||
.info-card__left{display:flex;align-items:center;gap:16px;flex:1;}
|
||||
.info-avatar{width:56px;height:56px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:600;flex-shrink:0;}
|
||||
.info-name{font-size:var(--font-xl);font-weight:600;margin-bottom:8px;}
|
||||
.info-meta{display:flex;align-items:center;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.info-meta__item{padding:0 12px;border-right:1px solid var(--border);}
|
||||
.info-meta__item:first-child{padding-left:0;}
|
||||
.info-meta__item:last-child{border-right:none;}
|
||||
.info-card__right{display:flex;align-items:center;gap:40px;padding-left:32px;border-left:1px solid var(--border);flex-shrink:0;}
|
||||
.stat-item{text-align:center;}
|
||||
.stat-num{font-size:28px;font-weight:700;line-height:1.2;}
|
||||
.stat-num--blue{color:var(--primary);}
|
||||
.stat-num--green{color:var(--success);}
|
||||
.stat-label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;}
|
||||
.tab-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.tab-bar{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 24px;}
|
||||
.tab-item{padding:14px 20px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.filter-bar{padding:16px 24px;border-bottom:1px solid var(--border);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-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;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.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);}
|
||||
.tab-pane{display:none;}
|
||||
.tab-pane.active{display:block;}
|
||||
.table-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
table{width:100%;border-collapse:collapse;white-space:nowrap;}
|
||||
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;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-no{left:0;min-width:56px;width:56px;}
|
||||
.col-end{right:0;min-width:100px;box-shadow:-2px 0 4px rgba(0,0,0,0.04);}
|
||||
.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);}
|
||||
.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);}
|
||||
.page-ellipsis{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.overlay-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;}
|
||||
.overlay-modal.open{display:flex;}
|
||||
.overlay-modal__box{background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.15);position:relative;display:flex;flex-direction:column;}
|
||||
.overlay-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.04);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999;z-index:10;transition:all .15s;}
|
||||
.overlay-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
|
||||
.overlay-modal iframe{border:none;display:block;}
|
||||
</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">
|
||||
<!-- [交互] 档案 active，点击其他跳转对应页面 -->
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</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>
|
||||
<!-- [交互] 个人咨询数据 active -->
|
||||
<a href="archive-personal.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-6 6-6s6 2.686 6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人咨询数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="6" width="12" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M5 6V4a3 3 0 016 0v2" stroke="currentColor" stroke-width="1.4"/><path d="M6 10h4M8 9v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
单位咨询数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
|
||||
<!-- ① 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<!-- [交互] 点击返回列表页 -->
|
||||
<a href="archive-personal.html">个人咨询数据</a>
|
||||
<span class="breadcrumb__sep">›</span>
|
||||
<span class="breadcrumb__cur">张伟</span>
|
||||
</div>
|
||||
|
||||
<!-- ② 员工信息卡片 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__left">
|
||||
<div class="info-avatar">张</div>
|
||||
<div>
|
||||
<div class="info-name">张伟</div>
|
||||
<div class="info-meta">
|
||||
<span class="info-meta__item">员工编号 EMP001</span>
|
||||
<span class="info-meta__item">性别 男</span>
|
||||
<span class="info-meta__item">年龄 35岁</span>
|
||||
<span class="info-meta__item">所属单位 采油一厂</span>
|
||||
<span class="info-meta__item">所属部门 安全生产部</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ③ Tab 切换区 + 筛选栏 + 表格 -->
|
||||
<div class="tab-card">
|
||||
<!-- Tab 栏 -->
|
||||
<div class="tab-bar">
|
||||
<!-- [交互] 点击切换 tab，调用 switchTab() -->
|
||||
<div class="tab-item active" onclick="switchTab('expert')">咨询专家</div>
|
||||
<div class="tab-item" onclick="switchTab('assistant')">咨询小助手</div>
|
||||
</div>
|
||||
|
||||
<!-- 咨询专家 筛选栏 -->
|
||||
<div class="filter-bar" id="filter-expert">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="">全部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询类型</label>
|
||||
<select class="filter-select">
|
||||
<option value="">全部</option>
|
||||
<option value="text">图文咨询</option>
|
||||
<option value="video">视频咨询</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询状态</label>
|
||||
<select class="filter-select">
|
||||
<option value="">全部</option>
|
||||
<option value="done">已完成</option>
|
||||
<option value="ongoing">进行中</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
<option value="rejected">已拒绝</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 咨询小助手 筛选栏（默认隐藏） -->
|
||||
<div class="filter-bar" id="filter-assistant" style="display:none;">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="">全部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询状态</label>
|
||||
<select class="filter-select">
|
||||
<option value="">全部</option>
|
||||
<option value="ended">已结束</option>
|
||||
<option value="ongoing">进行中</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- ④ 咨询专家 Tab 内容 -->
|
||||
<div class="tab-pane active" id="pane-expert">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-fixed col-no">序号</th>
|
||||
<th style="min-width:140px;">咨询单号</th>
|
||||
<th style="min-width:90px;">咨询类型</th>
|
||||
<th style="min-width:90px;">咨询状态</th>
|
||||
<th style="min-width:80px;">咨询专家</th>
|
||||
<th style="min-width:90px;">专家职称</th>
|
||||
<th style="min-width:110px;">专家医院</th>
|
||||
<th style="min-width:100px;">专家科室</th>
|
||||
<th style="min-width:90px;">专家类型</th>
|
||||
<th style="min-width:140px;">发起咨询时间</th>
|
||||
<th style="min-width:140px;">首次回复时间</th>
|
||||
<th style="min-width:140px;">咨询完成时间</th>
|
||||
<th style="min-width:80px;">咨询时长</th>
|
||||
<th style="min-width:90px;">评分</th>
|
||||
<th class="col-fixed col-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">1</td>
|
||||
<td>ZJ20260409001</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>李医生</td>
|
||||
<td>主任医师</td>
|
||||
<td>长庆医院</td>
|
||||
<td>心血管内科</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>
|
||||
<!-- [交互] 图文咨询-已完成：查看对话，加载 history-expert-detail.html -->
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openExpertChat('ZJ20260409001')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">2</td>
|
||||
<td>ZJ20260408002</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>王医生</td>
|
||||
<td>副主任医师</td>
|
||||
<td>长庆医院</td>
|
||||
<td>内分泌科</td>
|
||||
<td><span class="tag tag-blue">免费专家</span></td>
|
||||
<td>2026-04-08 10:30</td>
|
||||
<td>2026-04-08 10:45</td>
|
||||
<td>2026-04-08 11:15</td>
|
||||
<td>45分钟</td>
|
||||
<td><span class="stars">★★★★☆</span></td>
|
||||
<!-- [交互] 视频咨询-已完成：查看详情，加载 video-detail-completed.html -->
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openExpertDetail('ZJ20260408002','completed')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">3</td>
|
||||
<td>ZJ20260407003</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>陈医生</td>
|
||||
<td>主治医师</td>
|
||||
<td>西安交大一附院</td>
|
||||
<td>骨科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td>2026-04-07 14:00</td>
|
||||
<td>2026-04-07 14:10</td>
|
||||
<td>2026-04-07 14:30</td>
|
||||
<td>30分钟</td>
|
||||
<td><span class="stars">★★★★★</span></td>
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openExpertChat('ZJ20260407003')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">4</td>
|
||||
<td>ZJ20260401004</td>
|
||||
<td><span class="tag tag-blue">图文咨询</span></td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>赵医生</td>
|
||||
<td>主任医师</td>
|
||||
<td>长庆医院</td>
|
||||
<td>神经内科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td>2026-04-01 09:00</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<!-- [交互] 已取消：查看详情，加载 video-detail-cancelled.html -->
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openExpertDetail('ZJ20260401004','cancelled')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">5</td>
|
||||
<td>ZJ20260320005</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>孙医生</td>
|
||||
<td>副主任医师</td>
|
||||
<td>西安市中心医院</td>
|
||||
<td>消化内科</td>
|
||||
<td><span class="tag tag-blue">免费专家</span></td>
|
||||
<td>2026-03-20 15:00</td>
|
||||
<td>2026-03-20 15:12</td>
|
||||
<td>2026-03-20 15:50</td>
|
||||
<td>50分钟</td>
|
||||
<td><span class="stars">★★★☆☆</span></td>
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openExpertDetail('ZJ20260320005','completed')">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 12 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ⑤ 咨询小助手 Tab 内容（默认隐藏） -->
|
||||
<div class="tab-pane" id="pane-assistant">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-fixed col-no">序号</th>
|
||||
<th style="min-width:140px;">咨询单号</th>
|
||||
<th style="min-width:90px;">咨询状态</th>
|
||||
<th style="min-width:140px;">发起咨询时间</th>
|
||||
<th style="min-width:140px;">首次回复时间</th>
|
||||
<th style="min-width:140px;">咨询完成时间</th>
|
||||
<th style="min-width:80px;">咨询时长</th>
|
||||
<th class="col-fixed col-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">1</td>
|
||||
<td>ZX20260414001</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td>2026-04-14 08:30</td>
|
||||
<td>2026-04-14 08:35</td>
|
||||
<td>2026-04-14 08:38</td>
|
||||
<td>8分钟</td>
|
||||
<!-- [交互] 查看对话，加载 history-assistant-detail.html -->
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260414001')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">2</td>
|
||||
<td>ZX20260413002</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td>2026-04-13 09:45</td>
|
||||
<td>2026-04-13 09:50</td>
|
||||
<td>2026-04-13 10:05</td>
|
||||
<td>20分钟</td>
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260413002')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">3</td>
|
||||
<td>ZX20260412003</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-04-12 14:00</td>
|
||||
<td>2026-04-12 14:02</td>
|
||||
<td>—</td>
|
||||
<td>35分钟</td>
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260412003')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">4</td>
|
||||
<td>ZX20260410004</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td>2026-04-10 10:12</td>
|
||||
<td>2026-04-10 10:14</td>
|
||||
<td>2026-04-10 10:15</td>
|
||||
<td>3分钟</td>
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260410004')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">5</td>
|
||||
<td>ZX20260409005</td>
|
||||
<td><span class="tag tag-gray">已结束</span></td>
|
||||
<td>2026-04-09 16:00</td>
|
||||
<td>2026-04-09 16:01</td>
|
||||
<td>2026-04-09 16:08</td>
|
||||
<td>8分钟</td>
|
||||
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260409005')">查看对话</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 45 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span class="page-ellipsis">...</span>
|
||||
<button class="page-btn">9</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /tab-card -->
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ⑥ overlay 弹窗 -->
|
||||
<!-- [交互] 点击查看对话/查看详情时弹出，iframe 加载对应详情页 -->
|
||||
<div class="overlay-modal" id="overlayModal">
|
||||
<div class="overlay-modal__box" style="width:1100px;height:85vh;">
|
||||
<button class="overlay-modal__close" onclick="closeOverlay()">✕</button>
|
||||
<iframe id="overlayFrame" src="" width="1100" style="height:85vh;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// [交互] Tab 切换
|
||||
function switchTab(tab) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(el, i) {
|
||||
el.classList.toggle('active', (i === 0 && tab === 'expert') || (i === 1 && tab === 'assistant'));
|
||||
});
|
||||
document.getElementById('pane-expert').classList.toggle('active', tab === 'expert');
|
||||
document.getElementById('pane-assistant').classList.toggle('active', tab === 'assistant');
|
||||
document.getElementById('filter-expert').style.display = tab === 'expert' ? 'flex' : 'none';
|
||||
document.getElementById('filter-assistant').style.display = tab === 'assistant' ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
// [交互] 打开图文咨询对话弹窗
|
||||
function openExpertChat(no) {
|
||||
document.getElementById('overlayFrame').src = 'history-expert-detail.html';
|
||||
document.getElementById('overlayModal').classList.add('open');
|
||||
}
|
||||
|
||||
// [交互] 打开视频/取消咨询详情弹窗
|
||||
function openExpertDetail(no, status) {
|
||||
var page = status === 'cancelled' ? 'video-detail-cancelled.html' : 'video-detail-completed.html';
|
||||
document.getElementById('overlayFrame').src = page;
|
||||
document.getElementById('overlayModal').classList.add('open');
|
||||
}
|
||||
|
||||
// [交互] 打开小助手对话弹窗
|
||||
function openAssistantChat(no) {
|
||||
document.getElementById('overlayFrame').src = 'history-assistant-detail.html';
|
||||
document.getElementById('overlayModal').classList.add('open');
|
||||
}
|
||||
|
||||
// [交互] 关闭弹窗，清空 iframe src 防止后台播放
|
||||
function closeOverlay() {
|
||||
document.getElementById('overlayModal').classList.remove('open');
|
||||
document.getElementById('overlayFrame').src = '';
|
||||
}
|
||||
|
||||
// [交互] 点击遮罩层关闭弹窗
|
||||
document.getElementById('overlayModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeOverlay();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -69,8 +69,17 @@
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
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);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:130px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
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);}
|
||||
@@ -131,29 +140,7 @@
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">员工总人数</div>
|
||||
<div class="stat-card__value">3,842</div>
|
||||
<div class="stat-card__trend">截至今日</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年咨询专家总次数</div>
|
||||
<div class="stat-card__value blue">12,567</div>
|
||||
<div class="stat-card__trend">2026年度</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年咨询小助手总次数</div>
|
||||
<div class="stat-card__value green">38,920</div>
|
||||
<div class="stat-card__trend">2026年度</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">有咨询记录员工数</div>
|
||||
<div class="stat-card__value">2,109</div>
|
||||
<div class="stat-card__trend">本年度活跃</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<!-- 双列面板级联选择器样式 -->
|
||||
@@ -239,19 +226,20 @@
|
||||
</button>
|
||||
<button class="btn btn-default" style="white-space:nowrap;flex-shrink:0;" onclick="resetOrg()">重置</button>
|
||||
</div>
|
||||
<!-- 第二行：导出操作 -->
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-top:12px;">
|
||||
<!-- [交互] 点击导出列表数据 -->
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -330,11 +318,13 @@
|
||||
<div class="table-card__title">员工咨询数据列表</div>
|
||||
<div class="table-card__actions"></div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">姓名</th>
|
||||
<th class="col-fixed col-fixed-3">员工编号</th>
|
||||
<th>性别</th>
|
||||
<th>年龄</th>
|
||||
<th>单位</th>
|
||||
@@ -342,13 +332,14 @@
|
||||
<th>咨询专家次数</th>
|
||||
<th>咨询小助手次数</th>
|
||||
<th>最近咨询时间</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张伟</td>
|
||||
<td>CQ001234</td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2">张伟</td>
|
||||
<td class="col-fixed col-fixed-3">CQ001234</td>
|
||||
<td>男</td>
|
||||
<td>34</td>
|
||||
<td>采油一厂</td>
|
||||
@@ -356,12 +347,13 @@
|
||||
<td><span class="tag tag-blue">12次</span></td>
|
||||
<td><span class="tag tag-green">45次</span></td>
|
||||
<td>2026-04-08</td>
|
||||
<!-- [交互] 点击查看该员工历年咨询明细 -->
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<!-- [交互] 点击跳转到该员工咨询明细页 -->
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李明</td>
|
||||
<td>CQ002571</td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2">李明</td>
|
||||
<td class="col-fixed col-fixed-3">CQ002571</td>
|
||||
<td>男</td>
|
||||
<td>41</td>
|
||||
<td>采油二厂</td>
|
||||
@@ -369,11 +361,12 @@
|
||||
<td><span class="tag tag-blue">8次</span></td>
|
||||
<td><span class="tag tag-green">32次</span></td>
|
||||
<td>2026-04-07</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王芳</td>
|
||||
<td>CQ003388</td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2">王芳</td>
|
||||
<td class="col-fixed col-fixed-3">CQ003388</td>
|
||||
<td>女</td>
|
||||
<td>29</td>
|
||||
<td>勘探开发研究院</td>
|
||||
@@ -381,11 +374,12 @@
|
||||
<td><span class="tag tag-blue">5次</span></td>
|
||||
<td><span class="tag tag-green">28次</span></td>
|
||||
<td>2026-04-06</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>刘洋</td>
|
||||
<td>CQ004102</td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2">刘洋</td>
|
||||
<td class="col-fixed col-fixed-3">CQ004102</td>
|
||||
<td>男</td>
|
||||
<td>38</td>
|
||||
<td>采油三厂</td>
|
||||
@@ -393,11 +387,12 @@
|
||||
<td><span class="tag tag-blue">3次</span></td>
|
||||
<td><span class="tag tag-green">19次</span></td>
|
||||
<td>2026-04-05</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵静</td>
|
||||
<td>CQ005667</td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2">赵静</td>
|
||||
<td class="col-fixed col-fixed-3">CQ005667</td>
|
||||
<td>女</td>
|
||||
<td>32</td>
|
||||
<td>机关事务服务中心</td>
|
||||
@@ -405,11 +400,12 @@
|
||||
<td><span class="tag tag-blue">0次</span></td>
|
||||
<td><span class="tag tag-green">7次</span></td>
|
||||
<td>2026-03-28</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈磊</td>
|
||||
<td>CQ006890</td>
|
||||
<td class="col-fixed col-fixed-1">6</td>
|
||||
<td class="col-fixed col-fixed-2">陈磊</td>
|
||||
<td class="col-fixed col-fixed-3">CQ006890</td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
<td>采油一厂</td>
|
||||
@@ -417,11 +413,12 @@
|
||||
<td><span class="tag tag-blue">16次</span></td>
|
||||
<td><span class="tag tag-green">53次</span></td>
|
||||
<td>2026-04-09</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孙丽</td>
|
||||
<td>CQ007234</td>
|
||||
<td class="col-fixed col-fixed-1">7</td>
|
||||
<td class="col-fixed col-fixed-2">孙丽</td>
|
||||
<td class="col-fixed col-fixed-3">CQ007234</td>
|
||||
<td>女</td>
|
||||
<td>27</td>
|
||||
<td>采油二厂</td>
|
||||
@@ -429,11 +426,12 @@
|
||||
<td><span class="tag tag-blue">2次</span></td>
|
||||
<td><span class="tag tag-green">11次</span></td>
|
||||
<td>2026-04-03</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>周强</td>
|
||||
<td>CQ008456</td>
|
||||
<td class="col-fixed col-fixed-1">8</td>
|
||||
<td class="col-fixed col-fixed-2">周强</td>
|
||||
<td class="col-fixed col-fixed-3">CQ008456</td>
|
||||
<td>男</td>
|
||||
<td>36</td>
|
||||
<td>采油三厂</td>
|
||||
@@ -441,10 +439,11 @@
|
||||
<td><span class="tag tag-blue">9次</span></td>
|
||||
<td><span class="tag tag-green">24次</span></td>
|
||||
<td>2026-04-08</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='archive-personal-detail.html'">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 3842 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
|
||||
@@ -0,0 +1,299 @@
|
||||
<!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;--font-xxl:24px;--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;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.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;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:20px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb__sep{color:#ccc;}
|
||||
.breadcrumb__cur{color:var(--text-primary);font-weight:500;}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;display:flex;align-items:center;gap:32px;}
|
||||
.info-card__left{display:flex;align-items:center;gap:16px;flex:1;}
|
||||
.info-icon{width:56px;height:56px;border-radius:12px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||||
.info-icon svg{width:28px;height:28px;color:var(--primary);}
|
||||
.info-name{font-size:var(--font-xl);font-weight:600;margin-bottom:8px;}
|
||||
.info-meta{display:flex;align-items:center;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.info-meta__item{padding:0 12px;border-right:1px solid var(--border);}
|
||||
.info-meta__item:first-child{padding-left:0;}
|
||||
.info-meta__item:last-child{border-right:none;}
|
||||
.info-card__right{display:flex;align-items:center;gap:40px;padding-left:32px;border-left:1px solid var(--border);flex-shrink:0;}
|
||||
.stat-item{text-align:center;}
|
||||
.stat-num{font-size:28px;font-weight:700;line-height:1.2;}
|
||||
.stat-num--blue{color:var(--primary);}
|
||||
.stat-num--green{color:var(--success);}
|
||||
.stat-num--orange{color:var(--warning);}
|
||||
.stat-label{font-size:var(--font-xs);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:160px;}
|
||||
.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;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
.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-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-no{left:0;min-width:56px;width:56px;}
|
||||
.col-end{right:0;min-width:120px;box-shadow:-2px 0 4px rgba(0,0,0,0.04);}
|
||||
.amount{font-weight:600;color:var(--text-primary);}
|
||||
.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);}
|
||||
.overlay-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;}
|
||||
.overlay-modal.open{display:flex;}
|
||||
.overlay-modal__box{background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.15);position:relative;display:flex;flex-direction:column;}
|
||||
.overlay-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.04);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999;z-index:10;transition:all .15s;}
|
||||
.overlay-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
|
||||
.overlay-modal iframe{border:none;display:block;}
|
||||
</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" class="active">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</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="archive-personal.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-6 6-6s6 2.686 6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人咨询数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="6" width="12" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M5 6V4a3 3 0 016 0v2" stroke="currentColor" stroke-width="1.4"/><path d="M6 10h4M8 9v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
单位咨询数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
|
||||
<!-- ① 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="breadcrumb__sep">›</span>
|
||||
<span class="breadcrumb__cur">采油一厂</span>
|
||||
</div>
|
||||
|
||||
<!-- ② 单位信息卡片 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__left">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect x="4" y="8" width="20" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M9 8V6a5 5 0 0110 0v2" stroke="currentColor" stroke-width="1.8"/><path d="M10 16h8M14 14v5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info-name">采油一厂</div>
|
||||
<div class="info-meta">
|
||||
<span class="info-meta__item">员工人数 623人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ③ 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option value="">全部部门</option>
|
||||
<option>生产一队</option>
|
||||
<option>生产二队</option>
|
||||
<option>综合管理部</option>
|
||||
<option>安全环保部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" placeholder="请输入员工姓名" style="min-width:140px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" placeholder="请输入员工姓名" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- ④ 员工咨询数据列表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工咨询数据明细</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-fixed col-no">序号</th>
|
||||
<th style="min-width:80px;">员工姓名</th>
|
||||
<th style="min-width:100px;">员工编号</th>
|
||||
<th style="min-width:110px;">所属部门</th>
|
||||
<th style="min-width:110px;">咨询专家次数</th>
|
||||
<th style="min-width:120px;">咨询小助手次数</th>
|
||||
<th style="min-width:110px;">咨询费用（元）</th>
|
||||
<!-- <th class="col-fixed col-end">操作</th>-->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">1</td>
|
||||
<td>张伟</td><td>EMP001</td><td>安全生产部</td>
|
||||
<td>18</td><td>42</td><td><span class="amount">¥ 360</span></td>
|
||||
<!-- [交互] 点击查看个人明细，弹窗加载 archive-personal-detail.html -->
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP001')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">2</td>
|
||||
<td>李娜</td><td>EMP015</td><td>生产一队</td>
|
||||
<td>15</td><td>38</td><td><span class="amount">¥ 300</span></td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP015')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">3</td>
|
||||
<td>王强</td><td>EMP023</td><td>生产二队</td>
|
||||
<td>12</td><td>35</td><td><span class="amount">¥ 240</span></td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP023')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">4</td>
|
||||
<td>赵敏</td><td>EMP034</td><td>综合管理部</td>
|
||||
<td>10</td><td>28</td><td><span class="amount">¥ 200</span></td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP034')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">5</td>
|
||||
<td>刘洋</td><td>EMP045</td><td>安全环保部</td>
|
||||
<td>9</td><td>25</td><td><span class="amount">¥ 180</span></td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP045')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">6</td>
|
||||
<td>陈静</td><td>EMP056</td><td>生产一队</td>
|
||||
<td>8</td><td>22</td><td><span class="amount">¥ 160</span></td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP056')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">7</td>
|
||||
<td>孙磊</td><td>EMP067</td><td>生产二队</td>
|
||||
<td>7</td><td>19</td><td><span class="amount">¥ 140</span></td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP067')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-no">8</td>
|
||||
<td>周芳</td><td>EMP078</td><td>综合管理部</td>
|
||||
<td>6</td><td>16</td><td><span class="amount">¥ 120</span></td>
|
||||
<!-- <td class="col-fixed col-end"><span class="link" onclick="openPersonDetail('EMP078')">查看个人明细</span></td>-->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 623 条</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 class="page-ellipsis" style="width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-sm);color:var(--text-secondary);">...</span>
|
||||
<button class="page-btn">63</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- overlay 弹窗 -->
|
||||
<div class="overlay-modal" id="overlayModal">
|
||||
<div class="overlay-modal__box" style="width:1100px;height:85vh;">
|
||||
<button class="overlay-modal__close" onclick="closeOverlay()">✕</button>
|
||||
<iframe id="overlayFrame" src="" width="1100" style="height:85vh;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// [交互] 查看个人明细，弹窗加载 archive-personal-detail.html
|
||||
function openPersonDetail(empNo) {
|
||||
document.getElementById('overlayFrame').src = 'archive-personal-detail.html';
|
||||
document.getElementById('overlayModal').classList.add('open');
|
||||
}
|
||||
|
||||
function closeOverlay() {
|
||||
document.getElementById('overlayModal').classList.remove('open');
|
||||
document.getElementById('overlayFrame').src = '';
|
||||
}
|
||||
|
||||
document.getElementById('overlayModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeOverlay();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- BODY_CONTINUE -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -57,13 +57,22 @@
|
||||
.orange{color:var(--warning);}
|
||||
.stat-card__trend{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
.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);}
|
||||
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);white-space:nowrap;}
|
||||
thead th.sortable{cursor:pointer;}
|
||||
thead th.sortable:hover{color:var(--primary);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.rank-num{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:700;}
|
||||
@@ -77,6 +86,10 @@
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* Tab */
|
||||
.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);}
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
@@ -123,28 +136,7 @@
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">统计单位数</div>
|
||||
<div class="stat-card__value">28</div>
|
||||
<div class="stat-card__trend">全部所属单位</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年度咨询专家总次数</div>
|
||||
<div class="stat-card__value blue">12,567</div>
|
||||
<div class="stat-card__trend">2026年度汇总</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年度咨询小助手总次数</div>
|
||||
<div class="stat-card__value green">38,920</div>
|
||||
<div class="stat-card__trend">2026年度汇总</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年度咨询总费用</div>
|
||||
<div class="stat-card__value orange">¥ 248,600</div>
|
||||
<div class="stat-card__trend">2026年度汇总</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- [交互] Tab 切换单位维度 / 部门维度 -->
|
||||
<div class="tab-bar">
|
||||
@@ -183,91 +175,101 @@
|
||||
查询
|
||||
</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>
|
||||
<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 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>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>单位名称</th>
|
||||
<th>员工人数</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">单位名称</th>
|
||||
<th class="col-fixed col-fixed-3">员工人数</th>
|
||||
<th class="sortable">咨询专家次数 ↕</th>
|
||||
<th class="sortable">咨询小助手次数 ↕</th>
|
||||
<th>咨询占比</th>
|
||||
<th class="sortable">咨询费用（元）↕</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-1">1</span></td>
|
||||
<td>采油一厂</td><td>623</td><td>2,341</td><td>7,820</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-1">1</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">623</td><td>2,341</td><td>7,820</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:72%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">72%</span></div></td>
|
||||
<td><span class="amount">¥ 46,820</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-2">2</span></td>
|
||||
<td>采油二厂</td><td>558</td><td>1,986</td><td>6,540</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-2">2</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油二厂</td><td class="col-fixed col-fixed-3">558</td><td>1,986</td><td>6,540</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:65%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">65%</span></div></td>
|
||||
<td><span class="amount">¥ 39,720</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-3">3</span></td>
|
||||
<td>采油三厂</td><td>502</td><td>1,675</td><td>5,890</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-3">3</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油三厂</td><td class="col-fixed col-fixed-3">502</td><td>1,675</td><td>5,890</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:58%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">58%</span></div></td>
|
||||
<td><span class="amount">¥ 33,500</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">4</span></td>
|
||||
<td>勘探开发研究院</td><td>389</td><td>1,203</td><td>4,210</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">4</span></td>
|
||||
<td class="col-fixed col-fixed-2">勘探开发研究院</td><td class="col-fixed col-fixed-3">389</td><td>1,203</td><td>4,210</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:45%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">45%</span></div></td>
|
||||
<td><span class="amount">¥ 24,060</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">5</span></td>
|
||||
<td>机关事务服务中心</td><td>312</td><td>876</td><td>3,150</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">5</span></td>
|
||||
<td class="col-fixed col-fixed-2">机关事务服务中心</td><td class="col-fixed col-fixed-3">312</td><td>876</td><td>3,150</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:38%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">38%</span></div></td>
|
||||
<td><span class="amount">¥ 17,520</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">6</span></td>
|
||||
<td>天然气开采厂</td><td>278</td><td>743</td><td>2,680</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">6</span></td>
|
||||
<td class="col-fixed col-fixed-2">天然气开采厂</td><td class="col-fixed col-fixed-3">278</td><td>743</td><td>2,680</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:32%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">32%</span></div></td>
|
||||
<td><span class="amount">¥ 14,860</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">7</span></td>
|
||||
<td>长庆石化公司</td><td>245</td><td>612</td><td>2,190</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">7</span></td>
|
||||
<td class="col-fixed col-fixed-2">长庆石化公司</td><td class="col-fixed col-fixed-3">245</td><td>612</td><td>2,190</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:28%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">28%</span></div></td>
|
||||
<td><span class="amount">¥ 12,240</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">8</span></td>
|
||||
<td>工程技术研究院</td><td>198</td><td>487</td><td>1,730</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">8</span></td>
|
||||
<td class="col-fixed col-fixed-2">工程技术研究院</td><td class="col-fixed col-fixed-3">198</td><td>487</td><td>1,730</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:22%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">22%</span></div></td>
|
||||
<td><span class="amount">¥ 9,740</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
@@ -324,92 +326,102 @@
|
||||
查询
|
||||
</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>
|
||||
<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 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>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>所属单位</th>
|
||||
<th>部门名称</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">所属单位</th>
|
||||
<th class="col-fixed col-fixed-3">部门名称</th>
|
||||
<th>员工人数</th>
|
||||
<th class="sortable">咨询专家次数 ↕</th>
|
||||
<th class="sortable">咨询小助手次数 ↕</th>
|
||||
<th>咨询占比</th>
|
||||
<th class="sortable">咨询费用（元）↕</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-1">1</span></td>
|
||||
<td>采油一厂</td><td>生产一队</td><td>186</td><td>712</td><td>2,430</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-1">1</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">生产一队</td><td>186</td><td>712</td><td>2,430</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:68%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">68%</span></div></td>
|
||||
<td><span class="amount">¥ 14,240</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-2">2</span></td>
|
||||
<td>采油一厂</td><td>生产二队</td><td>174</td><td>658</td><td>2,180</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-2">2</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">生产二队</td><td>174</td><td>658</td><td>2,180</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:63%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">63%</span></div></td>
|
||||
<td><span class="amount">¥ 13,160</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-3">3</span></td>
|
||||
<td>采油二厂</td><td>生产一队</td><td>163</td><td>598</td><td>1,960</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-3">3</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油二厂</td><td class="col-fixed col-fixed-3">生产一队</td><td>163</td><td>598</td><td>1,960</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:57%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">57%</span></div></td>
|
||||
<td><span class="amount">¥ 11,960</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">4</span></td>
|
||||
<td>采油三厂</td><td>生产二队</td><td>158</td><td>543</td><td>1,820</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">4</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油三厂</td><td class="col-fixed col-fixed-3">生产二队</td><td>158</td><td>543</td><td>1,820</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:52%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">52%</span></div></td>
|
||||
<td><span class="amount">¥ 10,860</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">5</span></td>
|
||||
<td>勘探开发研究院</td><td>地质研究室</td><td>142</td><td>487</td><td>1,640</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">5</span></td>
|
||||
<td class="col-fixed col-fixed-2">勘探开发研究院</td><td class="col-fixed col-fixed-3">地质研究室</td><td>142</td><td>487</td><td>1,640</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:47%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">47%</span></div></td>
|
||||
<td><span class="amount">¥ 9,740</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">6</span></td>
|
||||
<td>采油一厂</td><td>安全环保部</td><td>136</td><td>432</td><td>1,450</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">6</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油一厂</td><td class="col-fixed col-fixed-3">安全环保部</td><td>136</td><td>432</td><td>1,450</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:43%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">43%</span></div></td>
|
||||
<td><span class="amount">¥ 8,640</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">7</span></td>
|
||||
<td>采油二厂</td><td>综合管理部</td><td>128</td><td>378</td><td>1,260</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">7</span></td>
|
||||
<td class="col-fixed col-fixed-2">采油二厂</td><td class="col-fixed col-fixed-3">综合管理部</td><td>128</td><td>378</td><td>1,260</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:38%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">38%</span></div></td>
|
||||
<td><span class="amount">¥ 7,560</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">8</span></td>
|
||||
<td>机关事务服务中心</td><td>综合管理部</td><td>115</td><td>312</td><td>1,080</td>
|
||||
<td class="col-fixed col-fixed-1"><span class="rank-num rank-n">8</span></td>
|
||||
<td class="col-fixed col-fixed-2">机关事务服务中心</td><td class="col-fixed col-fixed-3">综合管理部</td><td>115</td><td>312</td><td>1,080</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:32%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">32%</span></div></td>
|
||||
<td><span class="amount">¥ 6,240</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="viewDetail(this)">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 142 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
@@ -430,6 +442,11 @@
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-'+key).classList.add('active');
|
||||
}
|
||||
|
||||
// [交互] 查看明细，跳转到单位明细页
|
||||
function viewDetail(unitName) {
|
||||
window.location.href = 'archive-unit-detail.html';
|
||||
}
|
||||
</script>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -30,9 +30,13 @@
|
||||
.msg-list__header{padding:16px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;}
|
||||
.msg-list__search{flex:1;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px 0 36px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23999' stroke-width='1.4'/%3E%3Cpath d='M10 10l2.5 2.5' stroke='%23999' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;}
|
||||
.msg-list__search:focus{border-color:var(--primary);}
|
||||
.btn-contacts{height:36px;padding:0 14px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:1px solid var(--primary);background:#fff;color:var(--primary);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:all .2s;}
|
||||
.btn-contacts{width:36px;height:36px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--primary);background:#fff;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
|
||||
.btn-contacts:hover{background:var(--primary);color:#fff;}
|
||||
.btn-contacts svg{width:16px;height:16px;}
|
||||
.btn-refresh{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);flex-shrink:0;transition:all .2s;}
|
||||
.btn-refresh:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-refresh svg{width:16px;height:16px;transition:transform .4s ease;}
|
||||
.btn-refresh.spinning svg{transform:rotate(360deg);}
|
||||
.msg-list__body{flex:1;overflow-y:auto;}
|
||||
.msg-item{display:flex;gap:12px;padding:14px 16px;cursor:pointer;border-bottom:1px solid #F5F5F5;transition:background .15s;}
|
||||
.msg-item:hover{background:#FAFAFA;}
|
||||
@@ -128,11 +132,14 @@
|
||||
<!-- 左侧：消息列表 -->
|
||||
<div class="msg-list">
|
||||
<div class="msg-list__header">
|
||||
<input class="msg-list__search" type="text" placeholder="搜索联系人">
|
||||
<input class="msg-list__search" type="text" placeholder="搜索对话列表">
|
||||
<!-- [交互] 点击打开通讯录弹窗 -->
|
||||
<button class="btn-contacts" onclick="openOverlay('contacts-dialog.html',640,560)">
|
||||
<button class="btn-contacts" title="通讯录" onclick="openOverlay('contacts-dialog.html',640,560)">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 3h12v10H2z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/><circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M4 12c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/><path d="M13 5h1M13 8h1M13 11h1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
通讯录
|
||||
</button>
|
||||
<!-- [交互] 点击刷新消息列表 -->
|
||||
<button class="btn-refresh" title="刷新" onclick="refreshMsgList(this)">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M13.5 8a5.5 5.5 0 1 1-1.3-3.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.5 2.5v3h-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="msg-list__body" id="msgListBody">
|
||||
@@ -189,7 +196,7 @@
|
||||
<span class="msg-info__name">孙主任</span>
|
||||
<span class="msg-info__time">04-08</span>
|
||||
</div>
|
||||
<div class="msg-info__mid"><span class="role-tag role-tag--admin">管理员</span></div>
|
||||
<div class="msg-info__mid"><span class="role-tag role-tag--admin">健康管理员</span></div>
|
||||
<div class="msg-info__preview">本月咨询结算数据请尽快整理</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -278,7 +285,7 @@ var msgData = [
|
||||
{name:'周丽',role:'操作人员',roleClass:'operator',char:'周',detail:'长庆油田应急救援中心'},
|
||||
{name:'林护士',role:'专业人员',roleClass:'professional',char:'林',detail:'主管护师'},
|
||||
{name:'赵刚',role:'驻场人员',roleClass:'onsite',char:'赵',detail:'长庆油田总医院'},
|
||||
{name:'孙主任',role:'管理员',roleClass:'admin',char:'孙',detail:'长庆油田 · 健康管理部'}
|
||||
{name:'孙主任',role:'健康管理员',roleClass:'admin',char:'孙',detail:'长庆油田 · 健康管理部'}
|
||||
];
|
||||
|
||||
function selectMsg(el, idx) {
|
||||
@@ -296,12 +303,18 @@ function selectMsg(el, idx) {
|
||||
}
|
||||
}
|
||||
|
||||
/* 刷新消息列表 */
|
||||
function refreshMsgList(btn) {
|
||||
btn.classList.add('spinning');
|
||||
setTimeout(function(){ btn.classList.remove('spinning'); }, 500);
|
||||
}
|
||||
|
||||
/* 接收通讯录弹窗消息，添加联系人到列表 */
|
||||
window.addEventListener('message', function(e) {
|
||||
if (e.data === 'close-dialog') { closeOverlay(); return; }
|
||||
if (e.data && e.data.type === 'add-contact') {
|
||||
var c = e.data;
|
||||
var roleClassMap = {'咨询专家':'expert','操作人员':'operator','专业人员':'professional','驻场人员':'onsite','管理员':'admin'};
|
||||
var roleClassMap = {'咨询专家':'expert','操作人员':'operator','专业人员':'professional','驻场人员':'onsite','健康管理员':'admin'};
|
||||
var rc = roleClassMap[c.role] || 'operator';
|
||||
var ch = c.name.charAt(0);
|
||||
/* 检查是否已存在 */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,265 @@
|
||||
<!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;--font-xxl:24px;--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);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.main{margin-top:56px;padding:24px;padding-bottom:80px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-input--short{min-width:120px;width:120px;}
|
||||
.form-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:150px;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.radio-group{display:flex;align-items:center;gap:20px;font-size:var(--font-sm);}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-primary);}
|
||||
.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);}
|
||||
.btn-link{background:none;border:none;color:var(--primary);cursor:pointer;font-size:var(--font-sm);padding:0;}.btn-link:hover{text-decoration:underline;}
|
||||
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:10px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}.link-danger:hover{text-decoration:underline;}
|
||||
.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
</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="#52C41A"/><path d="M9 14.5l3 3 7-7" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询–小助手</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html" class="active">咨询结算</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><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>返回首页</a>
|
||||
<div class="avatar">助</div><span style="color:rgba(255,255,255,0.65);">健康小助手 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
<span>/</span>
|
||||
<span>新增结算</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">结算名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入结算名称" style="min-width:400px;">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">是否产生通讯费用</div>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="hasTelFee" value="no" checked onchange="toggleTelFee()"> 否</label>
|
||||
<label><input type="radio" name="hasTelFee" value="yes" onchange="toggleTelFee()"> 是</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" id="telFeeRow" style="display:none;">
|
||||
<div class="form-label">通讯费用</div>
|
||||
<input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结算费用设置 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">结算费用设置</div>
|
||||
<table id="feeTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:160px;">费用类型</th>
|
||||
<th style="width:200px;">结算对象</th>
|
||||
<th style="width:160px;">图文咨询费用（元）</th>
|
||||
<th style="width:160px;">视频咨询费用（元）</th>
|
||||
<th style="width:80px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="feeBody">
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select" style="min-width:130px;" onchange="onFeeTypeChange(this)">
|
||||
<option value="">请选择</option>
|
||||
<option value="title">职称</option>
|
||||
<option value="individual">单独设置</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="fee-target-cell">
|
||||
<select class="form-select" style="min-width:170px;" disabled>
|
||||
<option>请先选择费用类型</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td>
|
||||
<td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td>
|
||||
<td><span class="link-danger" onclick="removeFeeRow(this)">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="padding:12px 16px;">
|
||||
<button class="btn-link" onclick="addFeeRow()">+ 新增费用规则</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 结算周期设置 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">结算周期设置</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">开始月份</div>
|
||||
<input class="form-input" id="cycleStart" type="month" style="min-width:180px;" onchange="generateCycleRows()">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">结束月份</div>
|
||||
<input class="form-input" id="cycleEnd" type="month" style="min-width:180px;" onchange="generateCycleRows()">
|
||||
</div>
|
||||
<div id="cycleTableWrap" style="display:none;margin-top:16px;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:140px;">月份</th>
|
||||
<th style="width:180px;">范围类型</th>
|
||||
<th>自定义范围</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="cycleBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" style="min-width:100px;" onclick="location.href='consult-settle.html'">确认</button>
|
||||
<button class="btn btn-default" style="min-width:100px;" onclick="location.href='consult-settle.html'">取消</button>
|
||||
</div>
|
||||
<script>
|
||||
var params=new URLSearchParams(location.search);
|
||||
var pageMode=params.get('mode')||'add';
|
||||
var mockData={
|
||||
name:'2026年4月专家咨询结算',
|
||||
hasTelFee:true,
|
||||
telFee:'5.00',
|
||||
fees:[
|
||||
{type:'title',target:'主任医师',textFee:'50',videoFee:'100'},
|
||||
{type:'title',target:'副主任医师',textFee:'40',videoFee:'80'},
|
||||
{type:'individual',target:'李医生',textFee:'60',videoFee:'120'}
|
||||
],
|
||||
cycleStart:'2026-04',
|
||||
cycleEnd:'2026-04',
|
||||
cycles:[{month:'2026-04',rangeType:'natural'}]
|
||||
};
|
||||
var titleMap={add:'新增结算',edit:'编辑配置',view:'查看配置'};
|
||||
document.querySelector('.breadcrumb span:last-child').textContent=titleMap[pageMode];
|
||||
document.title='专家咨询·小助手 - '+titleMap[pageMode]+' | 健康长庆原型';
|
||||
window.addEventListener('DOMContentLoaded',function(){
|
||||
if(pageMode==='edit'||pageMode==='view') fillData();
|
||||
if(pageMode==='view') disableAll();
|
||||
});
|
||||
function fillData(){
|
||||
var d=mockData;
|
||||
document.querySelector('.form-input[placeholder="请输入结算名称"]').value=d.name;
|
||||
if(d.hasTelFee){
|
||||
document.querySelector('input[name="hasTelFee"][value="yes"]').checked=true;
|
||||
toggleTelFee();
|
||||
document.querySelector('#telFeeRow .form-input').value=d.telFee;
|
||||
}
|
||||
var feeBody=document.getElementById('feeBody');
|
||||
feeBody.innerHTML='';
|
||||
d.fees.forEach(function(f){
|
||||
var tr=document.createElement('tr');
|
||||
var targetOpts='';
|
||||
if(f.type==='title'){
|
||||
targetOpts='<option value="">请选择职称</option><option'+(f.target==='主任医师'?' selected':'')+'>主任医师</option><option'+(f.target==='副主任医师'?' selected':'')+'>副主任医师</option><option'+(f.target==='主治医师'?' selected':'')+'>主治医师</option><option'+(f.target==='住院医师'?' selected':'')+'>住院医师</option>';
|
||||
}else{
|
||||
targetOpts='<option value="">请选择医生</option><option'+(f.target==='李医生'?' selected':'')+'>李医生</option><option'+(f.target==='王医生'?' selected':'')+'>王医生</option><option'+(f.target==='张医生'?' selected':'')+'>张医生</option><option'+(f.target==='陈医生'?' selected':'')+'>陈医生</option><option'+(f.target==='孙医生'?' selected':'')+'>孙医生</option>';
|
||||
}
|
||||
tr.innerHTML='<td><select class="form-select" style="min-width:130px;" onchange="onFeeTypeChange(this)"><option value="">请选择</option><option value="title"'+(f.type==='title'?' selected':'')+'>职称</option><option value="individual"'+(f.type==='individual'?' selected':'')+'>单独设置</option></select></td><td class="fee-target-cell"><select class="form-select" style="min-width:170px;">'+targetOpts+'</select></td><td><input class="form-input form-input--short" type="number" value="'+f.textFee+'"></td><td><input class="form-input form-input--short" type="number" value="'+f.videoFee+'"></td><td><span class="link-danger" onclick="removeFeeRow(this)">删除</span></td>';
|
||||
feeBody.appendChild(tr);
|
||||
});
|
||||
document.getElementById('cycleStart').value=d.cycleStart;
|
||||
document.getElementById('cycleEnd').value=d.cycleEnd;
|
||||
generateCycleRows();
|
||||
}
|
||||
function disableAll(){
|
||||
document.querySelectorAll('input,select,textarea').forEach(function(el){el.disabled=true;});
|
||||
document.querySelectorAll('.btn-link,.link-danger').forEach(function(el){el.style.display='none';});
|
||||
var bar=document.querySelector('.bottom-bar');
|
||||
bar.innerHTML='<button class="btn btn-default" style="min-width:100px;" onclick="location.href=\'consult-settle.html\'">返回</button>';
|
||||
}
|
||||
function toggleTelFee(){
|
||||
var v=document.querySelector('input[name="hasTelFee"]:checked').value;
|
||||
document.getElementById('telFeeRow').style.display=v==='yes'?'flex':'none';
|
||||
}
|
||||
function onFeeTypeChange(sel){
|
||||
var td=sel.closest('tr').querySelector('.fee-target-cell');
|
||||
if(sel.value==='title'){
|
||||
td.innerHTML='<select class="form-select" style="min-width:170px;"><option value="">请选择职称</option><option>主任医师</option><option>副主任医师</option><option>主治医师</option><option>住院医师</option></select>';
|
||||
}else if(sel.value==='individual'){
|
||||
td.innerHTML='<select class="form-select" style="min-width:170px;"><option value="">请选择医生</option><option>李医生</option><option>王医生</option><option>张医生</option><option>陈医生</option><option>孙医生</option></select>';
|
||||
}else{
|
||||
td.innerHTML='<select class="form-select" style="min-width:170px;" disabled><option>请先选择费用类型</option></select>';
|
||||
}
|
||||
}
|
||||
function addFeeRow(){
|
||||
var tr=document.createElement('tr');
|
||||
tr.innerHTML='<td><select class="form-select" style="min-width:130px;" onchange="onFeeTypeChange(this)"><option value="">请选择</option><option value="title">职称</option><option value="individual">单独设置</option></select></td><td class="fee-target-cell"><select class="form-select" style="min-width:170px;" disabled><option>请先选择费用类型</option></select></td><td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td><td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td><td><span class="link-danger" onclick="removeFeeRow(this)">删除</span></td>';
|
||||
document.getElementById('feeBody').appendChild(tr);
|
||||
}
|
||||
function removeFeeRow(el){
|
||||
var tbody=document.getElementById('feeBody');
|
||||
if(tbody.rows.length>1) el.closest('tr').remove();
|
||||
}
|
||||
function generateCycleRows(){
|
||||
var s=document.getElementById('cycleStart').value;
|
||||
var e=document.getElementById('cycleEnd').value;
|
||||
var wrap=document.getElementById('cycleTableWrap');
|
||||
var body=document.getElementById('cycleBody');
|
||||
if(!s||!e){wrap.style.display='none';return;}
|
||||
var sp=s.split('-'),ep=e.split('-');
|
||||
var sy=+sp[0],sm=+sp[1],ey=+ep[0],em=+ep[1];
|
||||
if(sy*12+sm>ey*12+em){wrap.style.display='none';return;}
|
||||
body.innerHTML='';
|
||||
var y=sy,m=sm;
|
||||
while(y*12+m<=ey*12+em){
|
||||
var label=y+'-'+(m<10?'0':'')+m;
|
||||
var tr=document.createElement('tr');
|
||||
tr.innerHTML='<td>'+label+'</td><td><select class="form-select" style="min-width:150px;" onchange="onRangeTypeChange(this)"><option value="natural">自然月</option><option value="custom">自定义日期</option></select></td><td class="custom-range-cell"><span style="color:var(--text-secondary);font-size:var(--font-sm);">—</span></td>';
|
||||
body.appendChild(tr);
|
||||
m++;if(m>12){m=1;y++;}
|
||||
}
|
||||
wrap.style.display='block';
|
||||
}
|
||||
function onRangeTypeChange(sel){
|
||||
var td=sel.closest('tr').querySelector('.custom-range-cell');
|
||||
if(sel.value==='custom'){
|
||||
td.innerHTML='<div style="display:flex;align-items:center;gap:8px;"><input class="form-input" type="date" style="min-width:140px;"><span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span><input class="form-input" type="date" style="min-width:140px;"></div>';
|
||||
}else{
|
||||
td.innerHTML='<span style="color:var(--text-secondary);font-size:var(--font-sm);">—</span>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,205 @@
|
||||
<!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;--font-xxl:24px;--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);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.main{margin-top:56px;padding:24px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.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-x:auto;}
|
||||
.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;min-width:1200px;}
|
||||
thead th{background:#FAFAFA;padding:10px 8px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:10px 8px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.amount{font-weight:600;color:var(--warning);}
|
||||
.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);}
|
||||
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;}
|
||||
.modal-overlay.open{display:flex;align-items:center;justify-content:center;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:90vw;max-width:1400px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;}.modal__close:hover{color:var(--text-primary);}
|
||||
.modal__body{overflow-x:auto;overflow-y:auto;flex:1;padding:0;}
|
||||
.modal__body table{min-width:1300px;}
|
||||
.modal__body thead th,.modal__body tbody td{white-space:nowrap;padding:10px 8px;}
|
||||
.modal__footer{padding:12px 24px;border-top:1px solid var(--border);text-align:right;flex-shrink:0;}
|
||||
.tag-text{color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.tag-video{color:#722ED1;background:#F9F0FF;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.tag-status-done{color:var(--success);background:#F6FFED;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.tag-status-cancel{color:var(--text-secondary);background:#F5F5F5;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.star{color:var(--warning);}
|
||||
.sortable{cursor:pointer;user-select:none;}.sortable:hover{color:var(--primary);}
|
||||
.sort-icon{display:inline-flex;flex-direction:column;vertical-align:middle;margin-left:4px;line-height:1;gap:1px;}
|
||||
.sort-icon .up,.sort-icon .down{font-size:8px;color:#ccc;line-height:1;}
|
||||
.sortable.asc .sort-icon .up{color:var(--primary);}
|
||||
.sortable.desc .sort-icon .down{color:var(--primary);}
|
||||
</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="#52C41A"/><path d="M9 14.5l3 3 7-7" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询–小助手</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="current-consult.html">当前咨询</a>
|
||||
<a href="chat-message.html">对话消息</a>
|
||||
<a href="history-consult.html">历史咨询</a>
|
||||
<a href="expert-manage.html">专家管理</a>
|
||||
<a href="checkup-standard.html">体检标准化</a>
|
||||
<a href="sms-send.html">短信发送</a>
|
||||
<a href="consult-settle.html" class="active">咨询结算</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html"><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>返回首页</a>
|
||||
<div class="avatar">助</div><span style="color:rgba(255,255,255,0.65);">健康小助手 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="consult-settle.html">咨询结算</a>
|
||||
<span>/</span>
|
||||
<span>结算报表</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>专家编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家编号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家名称" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家医院</label>
|
||||
<select class="filter-select" style="min-width:200px;">
|
||||
<option>全部医院</option>
|
||||
<option>西安交通大学第一附属医院</option>
|
||||
<option>长庆油田职工医院</option>
|
||||
<option>陕西省人民医院</option>
|
||||
<option>西北妇女儿童医院</option>
|
||||
<option>庆阳市人民医院</option>
|
||||
</select>
|
||||
</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">专家结算明细 — 2026年3月专家咨询结算</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 42 位专家</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>专家编号</th>
|
||||
<th>专家姓名</th>
|
||||
<th>专家职称</th>
|
||||
<th>专家医院</th>
|
||||
<th>图文咨询单价(元)</th>
|
||||
<th>视频咨询单价(元)</th>
|
||||
<th class="sortable" onclick="toggleSort(this)">图文咨询次数<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">视频咨询次数<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">总咨询费(元)<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th class="sortable" onclick="toggleSort(this)">结算费(元)<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>EXP-20250001</td><td style="font-weight:500;">李医生</td><td>主任医师</td><td>西安交通大学第一附属医院</td><td>50.00</td><td>100.00</td><td>52</td><td>34</td><td>6,000.00</td><td><span class="amount">5,300.00</span></td><td><span class="link" onclick="openDetail(this)">咨询详情</span></td></tr>
|
||||
<tr><td>EXP-20250002</td><td style="font-weight:500;">王医生</td><td>副主任医师</td><td>长庆油田职工医院</td><td>40.00</td><td>80.00</td><td>38</td><td>24</td><td>3,440.00</td><td><span class="amount">3,440.00</span></td><td><span class="link" onclick="openDetail(this)">咨询详情</span></td></tr>
|
||||
<tr><td>EXP-20250003</td><td style="font-weight:500;">张医生</td><td>主治医师</td><td>陕西省人民医院</td><td>40.00</td><td>80.00</td><td>30</td><td>15</td><td>2,400.00</td><td><span class="amount">2,600.00</span></td><td><span class="link" onclick="openDetail(this)">咨询详情</span></td></tr>
|
||||
<tr><td>EXP-20250004</td><td style="font-weight:500;">陈医生</td><td>主任医师</td><td>西北妇女儿童医院</td><td>50.00</td><td>100.00</td><td>25</td><td>13</td><td>2,550.00</td><td><span class="amount">2,900.00</span></td><td><span class="link" onclick="openDetail(this)">咨询详情</span></td></tr>
|
||||
<tr><td>EXP-20250005</td><td style="font-weight:500;">孙医生</td><td>住院医师</td><td>庆阳市人民医院</td><td>30.00</td><td>60.00</td><td>18</td><td>10</td><td>1,140.00</td><td><span class="amount">1,140.00</span></td><td><span class="link" onclick="openDetail(this)">咨询详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</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">4</button>
|
||||
<button class="page-btn">5</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-overlay" id="detailModal" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="modalTitle">咨询详情 — 李医生</div>
|
||||
<button class="modal__close" onclick="closeDetail()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>ZX20260301001</td><td>张三</td><td>EMP001</td><td>长庆油田</td><td>采油一厂</td><td><span class="tag-text">图文咨询</span></td><td><span class="tag-status-done">已完成</span></td><td>2026-03-01 09:15</td><td>2026-03-01 09:22</td><td>2026-03-01 09:45</td><td>30分钟</td><td><span class="star">★★★★★</span></td></tr>
|
||||
<tr><td>ZX20260302015</td><td>李四</td><td>EMP042</td><td>长庆油田</td><td>采油二厂</td><td><span class="tag-video">视频咨询</span></td><td><span class="tag-status-done">已完成</span></td><td>2026-03-02 14:00</td><td>2026-03-02 14:05</td><td>2026-03-02 14:35</td><td>35分钟</td><td><span class="star">★★★★</span>☆</td></tr>
|
||||
<tr><td>ZX20260305008</td><td>王五</td><td>EMP078</td><td>长庆油田</td><td>机械制造公司</td><td><span class="tag-text">图文咨询</span></td><td><span class="tag-status-done">已完成</span></td><td>2026-03-05 10:30</td><td>2026-03-05 10:38</td><td>2026-03-05 11:10</td><td>40分钟</td><td><span class="star">★★★★★</span></td></tr>
|
||||
<tr><td>ZX20260310022</td><td>赵六</td><td>EMP103</td><td>长庆油田</td><td>油气工艺研究院</td><td><span class="tag-text">图文咨询</span></td><td><span class="tag-status-done">已完成</span></td><td>2026-03-10 08:50</td><td>2026-03-10 09:00</td><td>2026-03-10 09:25</td><td>35分钟</td><td><span class="star">★★★</span>☆☆</td></tr>
|
||||
<tr><td>ZX20260315036</td><td>孙七</td><td>EMP156</td><td>长庆油田</td><td>采气一厂</td><td><span class="tag-video">视频咨询</span></td><td><span class="tag-status-cancel">已取消</span></td><td>2026-03-15 16:20</td><td>—</td><td>—</td><td>—</td><td>—</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var name=tr.querySelectorAll('td')[1].textContent.trim();
|
||||
document.getElementById('modalTitle').textContent='咨询详情 — '+name;
|
||||
document.getElementById('detailModal').classList.add('open');
|
||||
}
|
||||
function closeDetail(){
|
||||
document.getElementById('detailModal').classList.remove('open');
|
||||
}
|
||||
function toggleSort(th){
|
||||
var wasAsc=th.classList.contains('asc');
|
||||
document.querySelectorAll('.sortable').forEach(function(s){s.classList.remove('asc','desc');});
|
||||
th.classList.add(wasAsc?'desc':'asc');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -19,11 +19,6 @@
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.main{margin-top:56px;padding:24px;}
|
||||
.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:var(--font-xxl);font-weight:700;margin-top:8px;}
|
||||
.stat-card__sub{font-size:var(--font-xs);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;}
|
||||
@@ -37,20 +32,25 @@
|
||||
.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-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:160px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
.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-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.amount-total{font-weight:700;color:var(--warning);font-size:var(--font-base);}
|
||||
.expert-info{display:flex;align-items:center;gap:10px;}
|
||||
.expert-avatar{width:36px;height:36px;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-sm);flex-shrink:0;}
|
||||
.expert-name{font-weight:500;}
|
||||
.expert-dept{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.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);}
|
||||
@@ -84,73 +84,158 @@
|
||||
</div>
|
||||
</div>
|
||||
<main class="main">
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card"><div class="stat-card__label">本月待结算金额</div><div class="stat-card__value" style="color:var(--warning);">¥ 32,450</div><div class="stat-card__sub">2026年4月</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">本月已结算金额</div><div class="stat-card__value" style="color:var(--success);">¥ 18,200</div><div class="stat-card__sub">已完成结算</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">本年累计结算</div><div class="stat-card__value" style="color:var(--primary);">¥ 248,600</div><div class="stat-card__sub">2026年度</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">待结算专家数</div><div class="stat-card__value">28</div><div class="stat-card__sub">本月待处理</div></div>
|
||||
</div>
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>结算周期</label>
|
||||
<select class="filter-select" style="min-width:140px;"><option>2026年4月</option><option>2026年3月</option><option>2026年2月</option><option>2026年1月</option></select>
|
||||
<div class="filter-item"><label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="">全部年份</option>
|
||||
</select>
|
||||
</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 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>
|
||||
<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-success" style="margin-left:auto;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4.5 6.5L7 9l2.5-2.5M2 10v2h10v-2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>生成结算报表</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"><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-success" onclick="location.href='consult-settle-add.html'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
新增结算
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7a4.5 4.5 0 0 1 8.3-2.4M11.5 7a4.5 4.5 0 0 1-8.3 2.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M10.8 2v2.6h-2.6M3.2 12v-2.6h2.6" 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"><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">结算明细列表（2026年4月）</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 42 位专家</div>
|
||||
<div class="table-card__title">结算列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 5 条</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></tr></thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">结算名称</th>
|
||||
<th class="col-fixed col-fixed-3">结算开始月份</th>
|
||||
<th>结算结束月份</th>
|
||||
<th>结算状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>结算开始时间</th>
|
||||
<th>结算结束时间</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="expert-info"><div class="expert-avatar">李</div><div><div class="expert-name">李医生</div><div class="expert-dept">心血管内科</div></div></div></td>
|
||||
<td>312</td><td>¥ 30</td><td>86</td><td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 16,240</span></td>
|
||||
<td><span class="tag tag-orange">待结算</span></td><td>—</td>
|
||||
<td><span class="link" onclick="openOverlay('report-detail-dialog.html',680,640)">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2">2026年4月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-04</td>
|
||||
<td>2026-04</td>
|
||||
<td><span class="tag tag-orange">待结算</span></td>
|
||||
<td>2026-04-15 09:30</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">开始结算</span>
|
||||
<span class="link" onclick="location.href='consult-settle-add.html?mode=edit&id=1'">编辑配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="expert-info"><div class="expert-avatar">王</div><div><div class="expert-name">王医生</div><div class="expert-dept">内分泌科</div></div></div></td>
|
||||
<td>245</td><td>¥ 30</td><td>62</td><td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 12,310</span></td>
|
||||
<td><span class="tag tag-green">已结算</span></td><td>2026-04-05</td>
|
||||
<td><span class="link" onclick="openOverlay('report-detail-dialog.html',680,640)">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2">2026年3月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-03</td>
|
||||
<td>2026-03</td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-03-31 10:00</td>
|
||||
<td>2026-04-01 09:00</td>
|
||||
<td>2026-04-03 17:20</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='consult-settle-report.html?id=2'">查看报表</span>
|
||||
<span class="link" onclick="location.href='consult-settle-add.html?mode=view&id=2'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="expert-info"><div class="expert-avatar">张</div><div><div class="expert-name">张医生</div><div class="expert-dept">神经内科</div></div></div></td>
|
||||
<td>198</td><td>¥ 30</td><td>45</td><td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 9,540</span></td>
|
||||
<td><span class="tag tag-blue">结算中</span></td><td>—</td>
|
||||
<td><span class="link" onclick="openOverlay('report-detail-dialog.html',680,640)">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2">2026年2月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-02</td>
|
||||
<td>2026-02</td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-02-28 14:15</td>
|
||||
<td>2026-03-01 09:00</td>
|
||||
<td>2026-03-04 16:45</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='consult-settle-report.html?id=3'">查看报表</span>
|
||||
<span class="link" onclick="location.href='consult-settle-add.html?mode=view&id=3'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="expert-info"><div class="expert-avatar">陈</div><div><div class="expert-name">陈医生</div><div class="expert-dept">骨科</div></div></div></td>
|
||||
<td>156</td><td>¥ 30</td><td>18</td><td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 6,120</span></td>
|
||||
<td><span class="tag tag-orange">待结算</span></td><td>—</td>
|
||||
<td><span class="link" onclick="openOverlay('report-detail-dialog.html',680,640)">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2">2026年1月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-01</td>
|
||||
<td>2026-01</td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-01-31 11:00</td>
|
||||
<td>2026-02-01 09:00</td>
|
||||
<td>2026-02-03 15:30</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='consult-settle-report.html?id=4'">查看报表</span>
|
||||
<span class="link" onclick="location.href='consult-settle-add.html?mode=view&id=4'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="expert-info"><div class="expert-avatar">孙</div><div><div class="expert-name">孙医生</div><div class="expert-dept">消化内科</div></div></div></td>
|
||||
<td>89</td><td>¥ 30</td><td>12</td><td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 3,630</span></td>
|
||||
<td><span class="tag tag-green">已结算</span></td><td>2026-04-06</td>
|
||||
<td><span class="link" onclick="openOverlay('report-detail-dialog.html',680,640)">查看明细</span></td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2">2025年Q4专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2025-10</td>
|
||||
<td>2025-12</td>
|
||||
<td><span class="tag tag-blue">结算中</span></td>
|
||||
<td>2025-12-31 16:00</td>
|
||||
<td>2026-01-02 09:00</td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" style="color:var(--text-secondary);opacity:0.5;cursor:not-allowed;">查看报表</span>
|
||||
<span class="link" onclick="location.href='consult-settle-add.html?mode=view&id=5'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
<option value="操作人员">操作人员</option>
|
||||
<option value="专业人员">专业人员</option>
|
||||
<option value="驻场人员">驻场人员</option>
|
||||
<option value="管理员">管理员</option>
|
||||
<option value="健康管理员">健康管理员</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,8 +88,8 @@ var contacts = [
|
||||
{name:'郑营养师',role:'专业人员',roleClass:'professional',detail:'高级营养师'},
|
||||
{name:'赵刚',role:'驻场人员',roleClass:'onsite',detail:'长庆油田总医院'},
|
||||
{name:'钱磊',role:'驻场人员',roleClass:'onsite',detail:'庆阳市人民医院'},
|
||||
{name:'孙主任',role:'管理员',roleClass:'admin',detail:'长庆油田 · 健康管理部'},
|
||||
{name:'马处长',role:'管理员',roleClass:'admin',detail:'长庆油田 · 安全环保部'}
|
||||
{name:'孙主任',role:'健康管理员',roleClass:'admin',detail:'长庆油田 · 健康管理部'},
|
||||
{name:'马处长',role:'健康管理员',roleClass:'admin',detail:'长庆油田 · 安全环保部'}
|
||||
];
|
||||
var selectedIdx = -1;
|
||||
|
||||
|
||||
@@ -28,6 +28,11 @@
|
||||
/* ===== 左侧对话列表 ===== */
|
||||
.conv-list{width:320px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
|
||||
.conv-list__header{padding:16px;border-bottom:1px solid var(--border);}
|
||||
.conv-list__search-row{display:flex;gap:8px;align-items:center;}
|
||||
.btn-refresh{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);flex-shrink:0;transition:all .2s;}
|
||||
.btn-refresh:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-refresh svg{width:16px;height:16px;transition:transform .4s ease;}
|
||||
.btn-refresh.spinning svg{transform:rotate(360deg);}
|
||||
.conv-list__search{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px 0 36px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23999' stroke-width='1.4'/%3E%3Cpath d='M10 10l2.5 2.5' stroke='%23999' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;}
|
||||
.conv-list__search:focus{border-color:var(--primary);}
|
||||
.conv-list__filters{display:flex;gap:16px;padding:10px 10px 0;font-size:var(--font-sm);}
|
||||
@@ -44,14 +49,19 @@
|
||||
.conv-info__time{font-size:var(--font-xs);color:#bbb;}
|
||||
.conv-info__msg{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.conv-badge{width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
|
||||
.conv-type-tag{font-size:10px;padding:1px 6px;border-radius:8px;white-space:nowrap;margin-left:6px;font-weight:400;}
|
||||
.conv-type-tag--expert{background:var(--primary-light);color:var(--primary);}
|
||||
.conv-type-tag--asst{background:#F6FFED;color:var(--success);}
|
||||
|
||||
/* ===== 右侧聊天区 ===== */
|
||||
.chat-area{flex:1;display:flex;flex-direction:column;background:#F5F7FA;}
|
||||
.chat-header{height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;}
|
||||
.chat-header__left{display:flex;align-items:center;gap:12px;}
|
||||
.chat-header{min-height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;}
|
||||
.chat-header__left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
|
||||
.chat-header__name{font-size:var(--font-base);font-weight:600;}
|
||||
.chat-header__tag{font-size:var(--font-xs);padding:2px 8px;border-radius:10px;background:#F6FFED;color:var(--success);}
|
||||
.chat-header__tag--ended{background:#F5F5F5;color:#999;}
|
||||
.chat-expert-info{display:flex;align-items:center;gap:6px;font-size:var(--font-xs);color:var(--text-secondary);width:100%;margin-top:2px;}
|
||||
.chat-expert-info span{white-space:nowrap;}
|
||||
/* 咨询结束卡片（员工侧发出） */
|
||||
.end-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm);}
|
||||
.end-card__icon{width:36px;height:36px;border-radius:50%;background:#FFF1F0;color:var(--danger);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
@@ -98,7 +108,10 @@
|
||||
.phrase-wrap{position:relative;}
|
||||
.phrase-pop{display:none;position:absolute;bottom:calc(100% + 8px);left:0;width:260px;background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);z-index:50;overflow:hidden;}
|
||||
.phrase-pop.open{display:block;}
|
||||
.phrase-pop__title{padding:10px 14px;font-size:var(--font-xs);color:var(--text-secondary);border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.phrase-pop__title{padding:10px 14px;font-size:var(--font-xs);color:var(--text-secondary);border-bottom:none;font-weight:500;}
|
||||
.phrase-pop__tabs{display:flex;gap:6px;padding:4px 14px 8px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
|
||||
.phrase-tab{font-size:12px;padding:2px 10px;border-radius:10px;cursor:pointer;background:var(--bg-page);color:var(--text-secondary);border:1px solid var(--border);}
|
||||
.phrase-tab.active{background:var(--primary-light);color:var(--primary);border-color:var(--primary);}
|
||||
.phrase-pop__list{max-height:220px;overflow-y:auto;}
|
||||
.phrase-pop__item{padding:9px 14px;font-size:var(--font-sm);cursor:pointer;transition:background .12s;border-bottom:1px solid #F5F5F5;}
|
||||
.phrase-pop__item:last-child{border-bottom:none;}
|
||||
@@ -155,7 +168,13 @@
|
||||
<!-- 左侧：对话列表 -->
|
||||
<div class="conv-list">
|
||||
<div class="conv-list__header">
|
||||
<input class="conv-list__search" type="text" placeholder="搜索员工姓名/工号">
|
||||
<div class="conv-list__search-row">
|
||||
<input class="conv-list__search" type="text" placeholder="搜索员工姓名/工号">
|
||||
<!-- [交互] 点击刷新对话列表 -->
|
||||
<button class="btn-refresh" title="刷新列表" onclick="refreshConvList(this)">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M13.5 8a5.5 5.5 0 1 1-1.3-3.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.5 2.5v3h-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="conv-list__filters">
|
||||
<label><input type="checkbox"> 咨询专家</label>
|
||||
<label><input type="checkbox"> 咨询小助手</label>
|
||||
@@ -168,7 +187,7 @@
|
||||
<div class="conv-avatar">李</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-info__top">
|
||||
<span class="conv-info__name">李明</span>
|
||||
<span class="conv-info__name">李明</span><span class="conv-type-tag conv-type-tag--expert">咨询专家</span>
|
||||
<span class="conv-info__time">10:32</span>
|
||||
</div>
|
||||
<div class="conv-info__msg">我体检报告显示空腹血糖6.8，这是糖尿病吗？</div>
|
||||
@@ -179,7 +198,7 @@
|
||||
<div class="conv-avatar">张</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-info__top">
|
||||
<span class="conv-info__name">张伟</span>
|
||||
<span class="conv-info__name">张伟</span><span class="conv-type-tag conv-type-tag--expert">咨询专家</span>
|
||||
<span class="conv-info__time">09:58</span>
|
||||
</div>
|
||||
<div class="conv-info__msg">最近总是头疼，需要做什么检查？</div>
|
||||
@@ -189,7 +208,7 @@
|
||||
<div class="conv-avatar">王</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-info__top">
|
||||
<span class="conv-info__name">王芳</span>
|
||||
<span class="conv-info__name">王芳</span><span class="conv-type-tag conv-type-tag--asst">咨询小助手</span>
|
||||
<span class="conv-info__time">09:45</span>
|
||||
</div>
|
||||
<div class="conv-info__msg">请问体检套餐B包含哪些项目？</div>
|
||||
@@ -199,7 +218,7 @@
|
||||
<div class="conv-avatar">赵</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-info__top">
|
||||
<span class="conv-info__name">赵静</span>
|
||||
<span class="conv-info__name">赵静</span><span class="conv-type-tag conv-type-tag--asst">咨询小助手</span>
|
||||
<span class="conv-info__time">昨天</span>
|
||||
</div>
|
||||
<div class="conv-info__msg">我想了解一下高血压的日常注意事项</div>
|
||||
@@ -209,7 +228,7 @@
|
||||
<div class="conv-avatar">刘</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-info__top">
|
||||
<span class="conv-info__name">刘洋</span>
|
||||
<span class="conv-info__name">刘洋</span><span class="conv-type-tag conv-type-tag--expert">咨询专家</span>
|
||||
<span class="conv-info__time">昨天</span>
|
||||
</div>
|
||||
<div class="conv-info__msg">帮我推荐一个心血管方面的专家</div>
|
||||
@@ -220,7 +239,7 @@
|
||||
<div class="conv-avatar">陈</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-info__top">
|
||||
<span class="conv-info__name">陈强</span>
|
||||
<span class="conv-info__name">陈强</span><span class="conv-type-tag conv-type-tag--asst">咨询小助手</span>
|
||||
<span class="conv-info__time">04-08</span>
|
||||
</div>
|
||||
<div class="conv-info__msg">我的体检报告有几项异常，帮我看看</div>
|
||||
@@ -231,9 +250,10 @@
|
||||
|
||||
<!-- 右侧：聊天区 -->
|
||||
<div class="chat-area">
|
||||
<div class="chat-header">
|
||||
<div class="chat-header" style="flex-wrap:wrap;">
|
||||
<div class="chat-header__left">
|
||||
<span class="chat-header__name" id="chatName">李明</span>
|
||||
<span class="conv-type-tag conv-type-tag--expert" id="chatType">咨询专家</span>
|
||||
<span class="chat-header__tag" id="chatTag">咨询中</span>
|
||||
</div>
|
||||
<div class="chat-header__actions">
|
||||
@@ -242,12 +262,25 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="5" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M2 13c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
咨询人档案
|
||||
</button>
|
||||
<!-- [交互] 点击结束当前咨询 -->
|
||||
<button class="btn btn-default btn-sm" style="color:var(--danger);border-color:var(--danger);">
|
||||
<!-- [交互] 仅咨询专家时显示，点击发送短信 -->
|
||||
<button class="btn btn-default btn-sm" id="btnSendSms">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1.5 3.5h11v7.5h-11z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/><path d="M1.5 3.5L7 8l5.5-4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
发送短信
|
||||
</button>
|
||||
<!-- [交互] 点击结束当前咨询；已结束时置灰不可点 -->
|
||||
<button class="btn btn-default btn-sm" id="btnEndConsult" style="color:var(--danger);border-color:var(--danger);">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.2"/><path d="M5 5l4 4M9 5l-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
结束咨询
|
||||
</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:16px;align-items:center;width:100%;" id="chatMetaRow">
|
||||
<div class="chat-expert-info" id="chatEmpInfo">
|
||||
<span>员工：李明</span><span>·</span><span>男</span><span>·</span><span>35岁</span><span>·</span><span>采油二厂</span><span>·</span><span>生产运行科</span>
|
||||
</div>
|
||||
<div class="chat-expert-info" id="chatExpertInfo">
|
||||
<span>专家：王建国</span><span>·</span><span>主任医师</span><span>·</span><span>内分泌科</span><span>·</span><span>北京协和医院</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-body" id="chatBody">
|
||||
<div class="system-msg">会话开始 · 2026-04-10 10:20</div>
|
||||
@@ -320,21 +353,38 @@
|
||||
</button>
|
||||
<div class="phrase-pop" id="phrasePop">
|
||||
<div class="phrase-pop__title">选择常用语</div>
|
||||
<div class="phrase-pop__tabs" id="phraseTabs">
|
||||
<span class="phrase-tab active" onclick="filterPhrase('all',this)">全部</span>
|
||||
<span class="phrase-tab" onclick="filterPhrase('greet',this)">问候语</span>
|
||||
<span class="phrase-tab" onclick="filterPhrase('guide',this)">引导语</span>
|
||||
<span class="phrase-tab" onclick="filterPhrase('notice',this)">注意事项</span>
|
||||
<span class="phrase-tab" onclick="filterPhrase('end',this)">结束语</span>
|
||||
</div>
|
||||
<div class="phrase-pop__list">
|
||||
<div class="phrase-pop__item" onclick="sendPhrase(this)">您好，我是健康咨询小助手，请问有什么可以帮您？</div>
|
||||
<div class="phrase-pop__item" onclick="sendPhrase(this)">请您稍等，我为您查询一下相关信息。</div>
|
||||
<div class="phrase-pop__item" onclick="sendPhrase(this)">根据您的体检报告，建议您进一步咨询专科医生。</div>
|
||||
<div class="phrase-pop__item" onclick="sendPhrase(this)">我为您推荐一位擅长该领域的专家，请查看。</div>
|
||||
<div class="phrase-pop__item" onclick="sendPhrase(this)">建议您保持健康饮食，适量运动，定期复查。</div>
|
||||
<div class="phrase-pop__item" onclick="sendPhrase(this)">您的咨询已记录，如有需要可随时联系我们。</div>
|
||||
<div class="phrase-pop__item" onclick="sendPhrase(this)">感谢您的咨询，祝您身体健康！</div>
|
||||
<div class="phrase-pop__item" data-cat="greet" onclick="sendPhrase(this)">您好，我是健康咨询小助手，请问有什么可以帮您？</div>
|
||||
<div class="phrase-pop__item" data-cat="greet" onclick="sendPhrase(this)">您好，欢迎使用健康咨询服务，请描述您的问题。</div>
|
||||
<div class="phrase-pop__item" data-cat="guide" onclick="sendPhrase(this)">请您稍等，我为您查询一下相关信息。</div>
|
||||
<div class="phrase-pop__item" data-cat="guide" onclick="sendPhrase(this)">根据您的体检报告，建议您进一步咨询专科医生。</div>
|
||||
<div class="phrase-pop__item" data-cat="guide" onclick="sendPhrase(this)">我为您推荐一位擅长该领域的专家，请查看。</div>
|
||||
<div class="phrase-pop__item" data-cat="notice" onclick="sendPhrase(this)">建议您保持健康饮食，适量运动，定期复查。</div>
|
||||
<div class="phrase-pop__item" data-cat="notice" onclick="sendPhrase(this)">请注意按时服药，如有不适请及时就医。</div>
|
||||
<div class="phrase-pop__item" data-cat="end" onclick="sendPhrase(this)">您的咨询已记录，如有需要可随时联系我们。</div>
|
||||
<div class="phrase-pop__item" data-cat="end" onclick="sendPhrase(this)">感谢您的咨询，祝您身体健康！</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="toolbar-btn">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.2"/><circle cx="6" cy="7" r="0.8" fill="currentColor"/><circle cx="10" cy="7" r="0.8" fill="currentColor"/><path d="M5.5 10c.5 1.2 2 2 2.5 2s2-0.8 2.5-2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
表情
|
||||
</button>
|
||||
<button class="toolbar-btn">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.2"/><circle cx="5.5" cy="6" r="1" fill="currentColor"/><path d="M2 11l3-3 2 2 3-3 4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
图片
|
||||
</button>
|
||||
<button class="toolbar-btn">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M9 2H4.5A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14h7a1.5 1.5 0 0 0 1.5-1.5V6L9 2z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/><path d="M9 2v4h4" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
|
||||
文件
|
||||
</button>
|
||||
</div>
|
||||
<div class="chat-input-wrap">
|
||||
<textarea class="chat-input" rows="4" placeholder="输入消息..."></textarea>
|
||||
@@ -387,12 +437,12 @@ convContents[1] = ''
|
||||
|
||||
/* 各对话的状态配置：tag文字 + 是否已结束 */
|
||||
var convStatus = {
|
||||
0: { text: '咨询中', ended: false },
|
||||
1: { text: '已结束', ended: true },
|
||||
2: { text: '咨询中', ended: false },
|
||||
3: { text: '咨询中', ended: false },
|
||||
4: { text: '咨询中', ended: false },
|
||||
5: { text: '咨询中', ended: false }
|
||||
0: { text: '咨询中', ended: false, type: 'expert', typeText: '咨询专家', expert: '王建国 · 主任医师 · 内分泌科 · 北京协和医院', emp: '李明 · 男 · 35岁 · 采油二厂 · 生产运行科' },
|
||||
1: { text: '已结束', ended: true, type: 'expert', typeText: '咨询专家', expert: '李慧敏 · 副主任医师 · 神经内科 · 西京医院', emp: '张伟 · 男 · 42岁 · 钻井工程公司 · 技术管理部' },
|
||||
2: { text: '咨询中', ended: false, type: 'asst', typeText: '咨询小助手', expert: '', emp: '王芳 · 女 · 29岁 · 长庆油田总医院 · 护理部' },
|
||||
3: { text: '咨询中', ended: false, type: 'asst', typeText: '咨询小助手', expert: '', emp: '赵静 · 女 · 38岁 · 第五采气厂 · 综合管理科' },
|
||||
4: { text: '咨询中', ended: false, type: 'expert', typeText: '咨询专家', expert: '张明远 · 主任医师 · 心血管内科 · 阜外医院', emp: '刘洋 · 男 · 45岁 · 勘探开发研究院 · 地质研究所' },
|
||||
5: { text: '咨询中', ended: false, type: 'asst', typeText: '咨询小助手', expert: '', emp: '陈强 · 男 · 31岁 · 采油三厂 · 安全环保科' }
|
||||
};
|
||||
|
||||
var currentConvIdx = 0;
|
||||
@@ -411,13 +461,47 @@ function selectConv(el, idx) {
|
||||
|
||||
/* 切换状态标签 */
|
||||
var tag = document.getElementById('chatTag');
|
||||
var status = convStatus[idx] || { text: '咨询中', ended: false };
|
||||
var typeTag = document.getElementById('chatType');
|
||||
var status = convStatus[idx] || { text: '咨询中', ended: false, type: 'asst', typeText: '咨询小助手' };
|
||||
tag.textContent = status.text;
|
||||
if (status.ended) {
|
||||
tag.classList.add('chat-header__tag--ended');
|
||||
} else {
|
||||
tag.classList.remove('chat-header__tag--ended');
|
||||
}
|
||||
typeTag.textContent = status.typeText;
|
||||
typeTag.className = 'conv-type-tag conv-type-tag--' + status.type;
|
||||
var expertInfo = document.getElementById('chatExpertInfo');
|
||||
if (status.expert) {
|
||||
var parts = status.expert.split(' · ');
|
||||
expertInfo.innerHTML = '<span>专家：' + parts[0] + '</span><span>·</span><span>' + parts[1] + '</span><span>·</span><span>' + parts[2] + '</span><span>·</span><span>' + parts[3] + '</span>';
|
||||
expertInfo.style.display = 'flex';
|
||||
} else {
|
||||
expertInfo.style.display = 'none';
|
||||
}
|
||||
var empInfo = document.getElementById('chatEmpInfo');
|
||||
if (status.emp) {
|
||||
var ep = status.emp.split(' · ');
|
||||
empInfo.innerHTML = '<span>员工：' + ep[0] + '</span><span>·</span><span>' + ep[1] + '</span><span>·</span><span>' + ep[2] + '</span><span>·</span><span>' + ep[3] + '</span><span>·</span><span>' + ep[4] + '</span>';
|
||||
empInfo.style.display = 'flex';
|
||||
} else {
|
||||
empInfo.style.display = 'none';
|
||||
}
|
||||
document.getElementById('btnSendSms').style.display = status.type === 'expert' ? '' : 'none';
|
||||
var btnEnd = document.getElementById('btnEndConsult');
|
||||
if (status.ended) {
|
||||
btnEnd.disabled = true;
|
||||
btnEnd.style.color = '#bbb';
|
||||
btnEnd.style.borderColor = '#E8E8E8';
|
||||
btnEnd.style.cursor = 'not-allowed';
|
||||
btnEnd.style.background = '#fafafa';
|
||||
} else {
|
||||
btnEnd.disabled = false;
|
||||
btnEnd.style.color = 'var(--danger)';
|
||||
btnEnd.style.borderColor = 'var(--danger)';
|
||||
btnEnd.style.cursor = '';
|
||||
btnEnd.style.background = '';
|
||||
}
|
||||
|
||||
/* 切换聊天内容 */
|
||||
var body = document.getElementById('chatBody');
|
||||
@@ -434,6 +518,13 @@ function togglePhrase(e) {
|
||||
e.stopPropagation();
|
||||
document.getElementById('phrasePop').classList.toggle('open');
|
||||
}
|
||||
function filterPhrase(cat, el) {
|
||||
document.querySelectorAll('.phrase-tab').forEach(function(t){ t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.phrase-pop__item').forEach(function(item){
|
||||
item.style.display = (cat === 'all' || item.getAttribute('data-cat') === cat) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
function sendPhrase(el) {
|
||||
var text = el.textContent;
|
||||
var body = document.getElementById('chatBody');
|
||||
@@ -453,6 +544,14 @@ function sendPhrase(el) {
|
||||
document.addEventListener('click', function() {
|
||||
document.getElementById('phrasePop').classList.remove('open');
|
||||
});
|
||||
document.getElementById('phrasePop').addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
/* 刷新对话列表 */
|
||||
function refreshConvList(btn) {
|
||||
btn.classList.add('spinning');
|
||||
setTimeout(function(){ btn.classList.remove('spinning'); }, 500);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -28,6 +28,18 @@
|
||||
|
||||
.sub-title{font-size:var(--font-sm);font-weight:600;color:#333;margin:20px 0 10px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
.sub-title:first-child{margin-top:0;}
|
||||
|
||||
.archive-block{border:1px solid var(--border);border-radius:var(--radius-sm);}
|
||||
.archive-row{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);font-size:var(--font-sm);}
|
||||
.archive-row:last-child{border-bottom:none;}
|
||||
.archive-row--top{align-items:flex-start;}
|
||||
.archive-label{color:var(--primary);width:70px;flex-shrink:0;}
|
||||
.archive-value{color:#333;flex:1;}
|
||||
.archive-tag{display:inline-block;background:var(--primary-light);color:var(--primary);border-radius:20px;padding:2px 12px;font-size:var(--font-xs);}
|
||||
.archive-files{display:flex;gap:12px;flex-wrap:wrap;}
|
||||
.file-card{width:100px;height:72px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);cursor:pointer;}
|
||||
.file-card--blue{background:#E6F7FF;color:var(--primary);border:1px solid #BAE7FF;}
|
||||
.file-card--yellow{background:#FFFBE6;color:#FA8C16;border:1px solid #FFE58F;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -106,8 +118,42 @@
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="sub-title">本次档案</div>
|
||||
<div class="archive-block">
|
||||
<div class="archive-row">
|
||||
<span class="archive-label">问题描述</span>
|
||||
<span class="archive-value">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</span>
|
||||
</div>
|
||||
<div class="archive-row">
|
||||
<span class="archive-label">持续时间</span>
|
||||
<span class="archive-tag">1-2周</span>
|
||||
</div>
|
||||
<div class="archive-row archive-row--top">
|
||||
<span class="archive-label">检查资料</span>
|
||||
<div class="archive-files">
|
||||
<div class="file-card file-card--blue">检查报告</div>
|
||||
<div class="file-card file-card--yellow">患处照片</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="archive-row archive-row--divided">
|
||||
<span class="archive-label">医院名称</span>
|
||||
<span class="archive-value">北京协和医院</span>
|
||||
<span class="archive-label" style="margin-left:auto;">科室</span>
|
||||
<span class="archive-value">骨科</span>
|
||||
</div>
|
||||
<div class="archive-row archive-row--divided">
|
||||
<span class="archive-label">疾病名称</span>
|
||||
<span class="archive-value">腰肌劳损</span>
|
||||
</div>
|
||||
<div class="archive-row">
|
||||
<span class="archive-label">期望帮助</span>
|
||||
<span class="archive-value">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tab: 配偶 -->
|
||||
<div class="tab-panel" id="tabPanel1">
|
||||
<div class="sub-title">基本信息</div>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item" onclick="openOverlay('expert-schedule-dialog.html',720,560)">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -153,7 +153,7 @@
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item" onclick="openOverlay('expert-schedule-dialog.html',720,560)">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -168,7 +168,7 @@
|
||||
<td>
|
||||
<span class="link" style="color:var(--success)">开启咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item" onclick="openOverlay('expert-schedule-dialog.html',720,560)">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -183,7 +183,7 @@
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item" onclick="openOverlay('expert-schedule-dialog.html',720,560)">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -198,7 +198,7 @@
|
||||
<td>
|
||||
<span class="link-warning">关闭咨询</span><span class="op-divider">|</span>
|
||||
<span class="link" onclick="location.href='expert-detail-dialog.html'">详情</span><span class="op-divider">|</span>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item">排班配置</span></div></div>
|
||||
<div class="dropdown"><span class="dropdown__trigger" onclick="toggleDropdown(this)">更多></span><div class="dropdown__menu"><span class="dropdown__item" onclick="location.href='expert-detail-dialog.html'">编辑</span><span class="dropdown__item">重置密码</span><span class="dropdown__item" onclick="openOverlay('expert-schedule-dialog.html',720,560)">排班配置</span></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
<!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:#fff;color:#333;}
|
||||
: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;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 弹窗整体 */
|
||||
.dialog{display:flex;flex-direction:column;height:100vh;}
|
||||
.dialog__header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
|
||||
.dialog__title{font-size:var(--font-base);font-weight:600;}
|
||||
.dialog__body{flex:1;overflow-y:auto;padding:20px 24px;}
|
||||
.dialog__footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;}
|
||||
|
||||
/* 专家信息卡片 */
|
||||
.expert-card{display:flex;align-items:center;gap:14px;background:#F8FBFF;border:1px solid #D6E8FF;border-radius:var(--radius-md);padding:14px 18px;margin-bottom:20px;}
|
||||
.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:700;font-size:18px;flex-shrink:0;}
|
||||
.expert-main{flex:1;}
|
||||
.expert-name{font-size:var(--font-base);font-weight:600;margin-bottom:4px;}
|
||||
.expert-meta{display:flex;gap:16px;flex-wrap:wrap;}
|
||||
.expert-meta span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.expert-meta span b{color:var(--text-primary);font-weight:500;}
|
||||
.tag-blue{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);background:var(--primary-light);color:var(--primary);}
|
||||
|
||||
/* 视频咨询开关行 */
|
||||
.video-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);margin-bottom:20px;}
|
||||
.video-row__label{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);}
|
||||
.video-row__hint{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
|
||||
/* Toggle */
|
||||
.toggle{position:relative;width:40px;height:22px;background:#ccc;border-radius:11px;cursor:pointer;transition:background .2s;display:inline-block;vertical-align:middle;flex-shrink:0;}
|
||||
.toggle.on{background:var(--primary);}
|
||||
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s;}
|
||||
.toggle.on::after{left:20px;}
|
||||
|
||||
/* 排班表格 */
|
||||
.schedule-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.schedule-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
|
||||
table.schedule{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
table.schedule thead th{background:#FAFAFA;padding:10px 14px;text-align:center;color:var(--text-secondary);font-weight:500;border:1px solid var(--border);}
|
||||
table.schedule thead th:first-child{text-align:left;width:80px;}
|
||||
table.schedule tbody td{padding:12px 14px;border:1px solid var(--border);vertical-align:middle;}
|
||||
table.schedule tbody td:first-child{font-weight:500;color:var(--text-primary);text-align:center;background:#FAFAFA;}
|
||||
table.schedule tbody tr:hover td{background:#F8FBFF;}
|
||||
table.schedule tbody tr:hover td:first-child{background:#EEF5FF;}
|
||||
|
||||
/* 时段单元格 */
|
||||
.slot-cell{display:flex;align-items:center;gap:10px;}
|
||||
.slot-toggle-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0;}
|
||||
.slot-toggle-label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;min-width:36px;}
|
||||
.slot-toggle-label.on{color:var(--success);}
|
||||
.slot-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;}
|
||||
.slot-quota{display:flex;align-items:center;gap:6px;flex-shrink:0;}
|
||||
.slot-quota label{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.slot-quota input{width:60px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 8px;font-size:var(--font-sm);text-align:center;outline:none;color:var(--text-primary);}
|
||||
.slot-quota input:focus{border-color:var(--primary);}
|
||||
.slot-quota input:disabled{background:#F5F5F5;color:#bbb;cursor:not-allowed;}
|
||||
.slot-quota span{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:34px;padding:0 18px;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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<span class="dialog__title">排班配置</span>
|
||||
</div>
|
||||
|
||||
<div class="dialog__body">
|
||||
<!-- 专家基本信息 -->
|
||||
<div class="expert-card">
|
||||
<div class="expert-avatar">郭</div>
|
||||
<div class="expert-main">
|
||||
<div class="expert-name">郭建强 <span class="tag-blue">副主任医师</span></div>
|
||||
<div class="expert-meta">
|
||||
<span><b>专家编号：</b>CQZJ20250018</span>
|
||||
<span><b>医院：</b>西安市第九医院</span>
|
||||
<span><b>科室：</b>心脏内科</span>
|
||||
<span><b>收费类型：</b>免费专家</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开启视频咨询 -->
|
||||
<div class="video-row">
|
||||
<span class="video-row__label">开启视频咨询</span>
|
||||
<span class="toggle on" id="videoToggle" onclick="toggleVideo(this)"></span>
|
||||
<span class="video-row__hint" id="videoHint">已开启 — 患者可预约视频咨询</span>
|
||||
</div>
|
||||
|
||||
<!-- 排班表格 -->
|
||||
<div class="schedule-section__title">每周排班设置</div>
|
||||
<table class="schedule" id="scheduleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>星期</th>
|
||||
<th>上午</th>
|
||||
<th>下午</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="scheduleBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.parent.postMessage('close-dialog','*')">取消</button>
|
||||
<button class="btn btn-primary" onclick="handleSave()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var days = ['周一','周二','周三','周四','周五','周六','周日'];
|
||||
|
||||
// 初始数据：前5天默认开诊，周末默认关闭
|
||||
var scheduleData = days.map(function(d, i) {
|
||||
var isWeekend = i >= 5;
|
||||
return {
|
||||
day: d,
|
||||
am: { open: !isWeekend, quota: isWeekend ? 0 : 10 },
|
||||
pm: { open: !isWeekend, quota: isWeekend ? 0 : 8 }
|
||||
};
|
||||
});
|
||||
|
||||
function renderTable() {
|
||||
var tbody = document.getElementById('scheduleBody');
|
||||
tbody.innerHTML = '';
|
||||
scheduleData.forEach(function(row, i) {
|
||||
var tr = document.createElement('tr');
|
||||
tr.innerHTML =
|
||||
'<td>' + row.day + '</td>' +
|
||||
'<td>' + slotHtml(i, 'am', row.am) + '</td>' +
|
||||
'<td>' + slotHtml(i, 'pm', row.pm) + '</td>';
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
function slotHtml(dayIdx, period, slot) {
|
||||
var id = 'slot_' + dayIdx + '_' + period;
|
||||
var labelText = slot.open ? '开诊' : '休诊';
|
||||
var labelClass = slot.open ? 'slot-toggle-label on' : 'slot-toggle-label';
|
||||
var toggleClass = slot.open ? 'toggle on' : 'toggle';
|
||||
var disabled = slot.open ? '' : 'disabled';
|
||||
return '<div class="slot-cell">' +
|
||||
'<div class="slot-toggle-wrap">' +
|
||||
'<span class="' + toggleClass + '" id="' + id + '_toggle" onclick="toggleSlot(' + dayIdx + ',\'' + period + '\',this)"></span>' +
|
||||
'<span class="' + labelClass + '" id="' + id + '_label">' + labelText + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="slot-divider"></div>' +
|
||||
'<div class="slot-quota">' +
|
||||
'<label>预约上限</label>' +
|
||||
'<input type="number" id="' + id + '_quota" min="0" max="999" value="' + slot.quota + '" ' + disabled + ' oninput="updateQuota(' + dayIdx + ',\'' + period + '\',this.value)">' +
|
||||
'<span>人</span>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
function toggleSlot(dayIdx, period, el) {
|
||||
var slot = scheduleData[dayIdx][period];
|
||||
slot.open = !slot.open;
|
||||
var id = 'slot_' + dayIdx + '_' + period;
|
||||
var toggleEl = document.getElementById(id + '_toggle');
|
||||
var labelEl = document.getElementById(id + '_label');
|
||||
var quotaEl = document.getElementById(id + '_quota');
|
||||
if (slot.open) {
|
||||
toggleEl.classList.add('on');
|
||||
labelEl.textContent = '开诊';
|
||||
labelEl.className = 'slot-toggle-label on';
|
||||
quotaEl.disabled = false;
|
||||
if (!slot.quota) { slot.quota = 10; quotaEl.value = 10; }
|
||||
} else {
|
||||
toggleEl.classList.remove('on');
|
||||
labelEl.textContent = '休诊';
|
||||
labelEl.className = 'slot-toggle-label';
|
||||
quotaEl.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateQuota(dayIdx, period, val) {
|
||||
scheduleData[dayIdx][period].quota = parseInt(val) || 0;
|
||||
}
|
||||
|
||||
function toggleVideo(el) {
|
||||
el.classList.toggle('on');
|
||||
var on = el.classList.contains('on');
|
||||
document.getElementById('videoHint').textContent = on
|
||||
? '已开启 — 患者可预约视频咨询'
|
||||
: '已关闭 — 患者不可预约视频咨询';
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
window.parent.postMessage('close-dialog', '*');
|
||||
}
|
||||
|
||||
renderTable();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -65,6 +65,32 @@
|
||||
.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);}
|
||||
|
||||
/* Tab 切换 */
|
||||
.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);margin-bottom:0;border-bottom:1px solid var(--border);overflow:hidden;}
|
||||
.page-tab{padding:14px 28px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;transition:all .2s;user-select:none;}
|
||||
.page-tab:hover{color:var(--primary);}
|
||||
.page-tab.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);background:#fff;}
|
||||
.tab-panel{display:block;padding-top:16px;}
|
||||
.tab-panel.hidden{display:none;}
|
||||
/* 专家筛选展开 */
|
||||
.filter-bar__rows{display:flex;flex-direction:column;gap:12px;width:100%;}
|
||||
.filter-bar__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-bar__row.hidden{display:none;}
|
||||
.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;}
|
||||
.filter-bar__expand-btn svg{width:14px;height:14px;transition:transform .2s;}
|
||||
.filter-bar__expand-btn.expanded svg{transform:rotate(180deg);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.stars{color:#FAAD14;font-size:var(--font-sm);}
|
||||
/* 固定列 */
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
tbody tr:hover .col-fixed{background:#F8FBFF;}
|
||||
.col-f1{left:0;min-width:56px;width:56px;}
|
||||
.col-f2{left:56px;min-width:120px;}
|
||||
.col-f3{left:176px;min-width:80px;}
|
||||
.col-f3::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;background:linear-gradient(to right,rgba(0,0,0,0.06),transparent);pointer-events:none;}
|
||||
.col-fend{right:0;min-width:80px;box-shadow:-2px 0 4px rgba(0,0,0,0.05);}
|
||||
table{min-width:100%;}
|
||||
/* 模态弹窗（iframe覆盖层） */
|
||||
.overlay-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;}
|
||||
.overlay-modal.open{display:flex;}
|
||||
@@ -96,6 +122,206 @@
|
||||
</div>
|
||||
</div>
|
||||
<main class="main">
|
||||
<!-- [交互] Tab切换：咨询专家 / 咨询小助手 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" id="tab-btn-expert" onclick="switchTab('expert')">咨询专家</div>
|
||||
<div class="page-tab" id="tab-btn-assistant" onclick="switchTab('assistant')">咨询小助手</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Tab 1: 咨询专家 ===== -->
|
||||
<div class="tab-panel" id="tab-expert">
|
||||
<div class="filter-bar" style="flex-direction:column;align-items:flex-start;">
|
||||
<div class="filter-bar__rows">
|
||||
<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="请输入姓名" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>员工编号</label><input class="filter-input" type="text" placeholder="请输入员工编号" style="min-width:140px;"></div>
|
||||
<div class="filter-item">
|
||||
<label style="white-space:nowrap;">所属单位部门</label>
|
||||
<div class="org-select-wrap" id="orgWrap2">
|
||||
<div class="org-trigger" id="orgTrigger2" onclick="toggleOrg2()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel2">
|
||||
<div class="org-col" id="orgUnitCol2">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" onclick="selectUnit2(this,'全部单位/部门','')">全部单位/部门</div>
|
||||
<div class="org-item" onclick="selectUnit2(this,'采油一厂','cy1')">采油一厂</div>
|
||||
<div class="org-item" onclick="selectUnit2(this,'采油二厂','cy2')">采油二厂</div>
|
||||
<div class="org-item" onclick="selectUnit2(this,'采油三厂','cy3')">采油三厂</div>
|
||||
<div class="org-item" onclick="selectUnit2(this,'勘探开发研究院','kfyj')">勘探开发研究院</div>
|
||||
<div class="org-item" onclick="selectUnit2(this,'机关事务服务中心','jgsh')">机关事务服务中心</div>
|
||||
</div>
|
||||
<div class="org-col" id="orgDeptCol2">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item active" onclick="selectDept2(this,'全部部门','')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询类型</label>
|
||||
<select class="filter-select" id="expertTypeSelect" onchange="updateExpertStatus()">
|
||||
<option value="">全部类型</option><option value="text">图文咨询</option><option value="video">视频咨询</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询状态</label>
|
||||
<select class="filter-select" id="expertStatusSelect"><option>全部状态</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-bar__row hidden" id="expertFilterExpanded">
|
||||
<div class="filter-item"><label>专家姓名</label><input class="filter-input" type="text" placeholder="请输入专家姓名" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>专家医院</label><input class="filter-input" type="text" placeholder="请输入专家医院" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>专家科室</label><input class="filter-input" type="text" placeholder="请输入专家科室" style="min-width:140px;"></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" placeholder="请选择" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" placeholder="请选择" style="min-width:140px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-bar__row">
|
||||
<button class="filter-bar__expand-btn" id="expertExpandBtn" onclick="toggleExpertFilter()">
|
||||
<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>
|
||||
</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>
|
||||
<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 class="col-fixed col-f1">序号</th><th class="col-fixed col-f2">咨询单号</th><th class="col-fixed col-f3">姓名</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 class="col-fixed col-fend">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">1</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409001</td><td class="col-fixed col-f3">张伟</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>李医生</td><td>主任医师</td><td>长庆医院</td><td>心血管内科</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 class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">2</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409002</td><td class="col-fixed col-f3">李明</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>王医生</td><td>副主任医师</td><td>长庆医院</td><td>内分泌科</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 class="col-fixed col-fend"><span class="link" onclick="openDetail('李明','王医生','副主任医师','长庆医院','内分泌科','2026-04-09 10:30','已完成')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">3</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409003</td><td class="col-fixed col-f3">王芳</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><span class="tag tag-blue">进行中</span></td>
|
||||
<td>张医生</td><td>主治医师</td><td>长庆医院</td><td>神经内科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td>2026-04-09 11:05</td><td>2026-04-09 11:15</td><td>—</td><td>—</td><td>—</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">4</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260408004</td><td class="col-fixed col-f3">刘洋</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>陈医生</td><td>副主任医师</td><td>长庆医院</td><td>骨科</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 class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">5</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260408005</td><td class="col-fixed col-f3">赵静</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><span class="tag tag-red">已拒绝</span></td>
|
||||
<td>孙医生</td><td>主任医师</td><td>长庆医院</td><td>消化内科</td>
|
||||
<td><span class="tag tag-green">免费专家</span></td>
|
||||
<td>2026-04-08 16:40</td><td>—</td><td>2026-04-08 16:42</td><td>—</td><td>—</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openDetail('赵静','孙医生','主任医师','长庆医院','消化内科','2026-04-08 16:40','已拒绝')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">6</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260407006</td><td class="col-fixed col-f3">孙丽</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP010</td><td>采油二厂</td><td>技术部</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td><td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>陈医生</td><td>副主任医师</td><td>长庆医院</td><td>骨科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td>2026-04-07 08:20</td><td>—</td><td>2026-04-07 08:45</td><td>—</td><td>—</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openDetail('孙丽','陈医生','副主任医师','长庆医院','骨科','2026-04-07 08:20','已取消')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">7</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260407007</td><td class="col-fixed col-f3">陈磊</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>李医生</td><td>主任医师</td><td>长庆医院</td><td>心血管内科</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 class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">8</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409008</td><td class="col-fixed col-f3">周华</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><span class="tag tag-orange">待回复</span></td>
|
||||
<td>刘医生</td><td>主治医师</td><td>长庆医院</td><td>呼吸科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td>2026-04-09 14:30</td><td>—</td><td>—</td><td>—</td><td>—</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">9</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409009</td><td class="col-fixed col-f3">吴娟</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><span class="tag tag-blue">待确认</span></td>
|
||||
<td>王医生</td><td>副主任医师</td><td>长庆医院</td><td>内分泌科</td>
|
||||
<td><span class="tag tag-green">免费专家</span></td>
|
||||
<td>2026-04-09 15:10</td><td>—</td><td>—</td><td>—</td><td>—</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openDetail('吴娟','王医生','副主任医师','长庆医院','内分泌科','2026-04-09 15:10','待确认')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-f1">10</td><td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409010</td><td class="col-fixed col-f3">何军</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><span class="tag tag-green">待开始</span></td>
|
||||
<td>张医生</td><td>主治医师</td><td>长庆医院</td><td>神经内科</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 class="col-fixed col-fend"><span class="link" onclick="openDetail('何军','张医生','主治医师','长庆医院','神经内科','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>
|
||||
</div><!-- /tab-expert -->
|
||||
|
||||
<!-- ===== Tab 2: 咨询小助手 ===== -->
|
||||
<div class="tab-panel hidden" id="tab-assistant">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>咨询单号</label>
|
||||
@@ -132,9 +358,9 @@
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>发起咨询时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<input class="filter-input" type="date" placeholder="请选择" 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;">
|
||||
<input class="filter-input" type="date" placeholder="请选择" 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>
|
||||
@@ -152,8 +378,9 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th class="col-fixed col-f1">序号</th>
|
||||
<th class="col-fixed col-f2">咨询单号</th>
|
||||
<th class="col-fixed col-f3">姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
@@ -163,79 +390,59 @@
|
||||
<th>首次回复时间</th>
|
||||
<th>咨询完成时间</th>
|
||||
<th>咨询时长</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fend">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td class="col-fixed col-f1">1</td>
|
||||
<td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td class="col-fixed col-f3">张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>心血管科</td>
|
||||
<td>健康小助手</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="openOverlay('chat-detail-dialog.html',720,680)">查看对话</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 class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td>李明</td>
|
||||
<td class="col-fixed col-f1">2</td>
|
||||
<td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td class="col-fixed col-f3">李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002</td>
|
||||
<td>采油二厂</td>
|
||||
<td>内分泌科</td>
|
||||
<td>健康小助手</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="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
<td>2026-04-09 09:45</td><td>2026-04-09 09:50</td><td>—</td><td>15分钟</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409003</td>
|
||||
<td>王芳</td>
|
||||
<td class="col-fixed col-f1">3</td>
|
||||
<td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409003</td>
|
||||
<td class="col-fixed col-f3">王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>医学研究部</td>
|
||||
<td>健康小助手</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="openOverlay('chat-detail-dialog.html',720,680)">查看对话</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 class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408004</td>
|
||||
<td>刘洋</td>
|
||||
<td class="col-fixed col-f1">4</td>
|
||||
<td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZX20260408004</td>
|
||||
<td class="col-fixed col-f3">刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产部</td>
|
||||
<td>健康小助手</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="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
<td>2026-04-08 14:55</td><td>—</td><td>—</td><td>6分钟</td>
|
||||
<td class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408005</td>
|
||||
<td>赵静</td>
|
||||
<td class="col-fixed col-f1">5</td>
|
||||
<td class="col-fixed col-f2" style="font-family:monospace;color:var(--text-secondary);">ZX20260408005</td>
|
||||
<td class="col-fixed col-f3">赵静</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005</td>
|
||||
<td>机关事务服务中心</td>
|
||||
<td>行政部</td>
|
||||
<td>健康小助手</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="openOverlay('chat-detail-dialog.html',720,680)">查看对话</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 class="col-fixed col-fend"><span class="link" onclick="openOverlay('chat-detail-dialog.html',720,680)">查看对话</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -252,6 +459,7 @@
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /tab-assistant -->
|
||||
</main>
|
||||
|
||||
<!-- 模态弹窗容器 -->
|
||||
@@ -262,6 +470,110 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* Tab 切换 */
|
||||
function switchTab(tab) {
|
||||
document.getElementById('tab-expert').classList.toggle('hidden', tab !== 'expert');
|
||||
document.getElementById('tab-assistant').classList.toggle('hidden', tab !== 'assistant');
|
||||
document.getElementById('tab-btn-expert').classList.toggle('active', tab === 'expert');
|
||||
document.getElementById('tab-btn-assistant').classList.toggle('active', tab === 'assistant');
|
||||
}
|
||||
|
||||
/* 专家筛选展开/收起 */
|
||||
function toggleExpertFilter() {
|
||||
var row = document.getElementById('expertFilterExpanded');
|
||||
var btn = document.getElementById('expertExpandBtn');
|
||||
var expanded = !row.classList.contains('hidden');
|
||||
row.classList.toggle('hidden', expanded);
|
||||
btn.classList.toggle('expanded', !expanded);
|
||||
btn.querySelector('span').textContent = expanded ? '更多条件' : '收起条件';
|
||||
}
|
||||
|
||||
/* 专家咨询状态联动 */
|
||||
var expertStatusMap = {
|
||||
'text': ['待回复','进行中','已完成'],
|
||||
'video': ['待确认','待开始','已完成','已取消','已拒绝']
|
||||
};
|
||||
function updateExpertStatus() {
|
||||
var type = document.getElementById('expertTypeSelect').value;
|
||||
var sel = document.getElementById('expertStatusSelect');
|
||||
var opts = '<option>全部状态</option>';
|
||||
(expertStatusMap[type] || []).forEach(function(s){ opts += '<option>' + s + '</option>'; });
|
||||
sel.innerHTML = opts;
|
||||
}
|
||||
|
||||
/* 专家 Tab 单位部门级联 */
|
||||
var deptMap = {
|
||||
'cy1':['心血管科','内分泌科','神经内科'],
|
||||
'cy2':['骨科','消化内科','呼吸科'],
|
||||
'cy3':['生产部','技术部','安全部'],
|
||||
'kfyj':['医学研究部','数据分析部'],
|
||||
'jgsh':['行政部','人力资源部']
|
||||
};
|
||||
function toggleOrg2() {
|
||||
document.getElementById('orgPanel2').classList.toggle('open');
|
||||
document.getElementById('orgTrigger2').classList.toggle('open');
|
||||
}
|
||||
function selectUnit2(elem, name, code) {
|
||||
document.querySelectorAll('#orgUnitCol2 .org-item').forEach(function(i){ i.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
document.getElementById('orgTrigger2').textContent = name;
|
||||
var depts = deptMap[code] || [];
|
||||
var html = '<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept2(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
depts.forEach(function(d){ html += '<div class="org-item" onclick="selectDept2(this,\'' + d + '\',\'' + d + '\')">' + d + '</div>'; });
|
||||
document.getElementById('orgDeptCol2').innerHTML = html;
|
||||
}
|
||||
function selectDept2(elem, name, code) {
|
||||
document.querySelectorAll('#orgDeptCol2 .org-item').forEach(function(i){ i.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
}
|
||||
|
||||
/* 小助手 Tab 单位部门级联 */
|
||||
function toggleOrg() {
|
||||
document.getElementById('orgPanel').classList.toggle('open');
|
||||
document.getElementById('orgTrigger').classList.toggle('open');
|
||||
}
|
||||
function selectUnit(elem, unitName, unitCode) {
|
||||
document.querySelectorAll('#orgUnitCol .org-item').forEach(function(i){ i.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
var depts = deptMap[unitCode] || [];
|
||||
var html = '<div class="org-col__title">部门</div><div class="org-item active" onclick="selectDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
depts.forEach(function(d){ html += '<div class="org-item" onclick="selectDept(this,\'' + d + '\',\'' + d + '\')">' + d + '</div>'; });
|
||||
document.getElementById('orgDeptCol').innerHTML = html;
|
||||
}
|
||||
function selectDept(elem, deptName, deptCode) {
|
||||
document.querySelectorAll('#orgDeptCol .org-item').forEach(function(i){ i.classList.remove('active'); });
|
||||
elem.classList.add('active');
|
||||
}
|
||||
|
||||
/* 点击外部关闭下拉 */
|
||||
document.addEventListener('click', function(e) {
|
||||
['orgWrap','orgWrap2'].forEach(function(id) {
|
||||
var wrap = document.getElementById(id);
|
||||
if (wrap && !wrap.contains(e.target)) {
|
||||
var suffix = id === 'orgWrap2' ? '2' : '';
|
||||
var panel = document.getElementById('orgPanel' + suffix);
|
||||
var trigger = document.getElementById('orgTrigger' + suffix);
|
||||
if (panel) panel.classList.remove('open');
|
||||
if (trigger) trigger.classList.remove('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* 视频咨询详情 */
|
||||
function openDetail(name, expert, title, hospital, dept, time, status) {
|
||||
var fileMap = {
|
||||
'待确认': '../video-detail-pending-confirm.html',
|
||||
'待开始': '../video-detail-pending-start.html',
|
||||
'已完成': '../video-detail-completed.html',
|
||||
'已拒绝': '../video-detail-rejected.html',
|
||||
'已取消': '../video-detail-cancelled.html'
|
||||
};
|
||||
var url = fileMap[status];
|
||||
if (!url) return;
|
||||
openOverlay(url, 560, 560);
|
||||
}
|
||||
|
||||
/* iframe 弹窗 */
|
||||
function openOverlay(url, w, h) {
|
||||
var box = document.getElementById('overlayBox');
|
||||
box.style.width = w + 'px';
|
||||
@@ -280,41 +592,6 @@ function closeOverlay() {
|
||||
window.addEventListener('message', function(e) {
|
||||
if (e.data === 'close-dialog') closeOverlay();
|
||||
});
|
||||
|
||||
// 单位部门级联选择
|
||||
const deptMap = {
|
||||
'cy1': ['心血管科', '内分泌科', '神经内科'],
|
||||
'cy2': ['骨科', '消化内科', '呼吸科'],
|
||||
'cy3': ['生产部', '技术部', '安全部'],
|
||||
'kfyj': ['医学研究部', '数据分析部'],
|
||||
'jgsh': ['行政部', '人力资源部']
|
||||
};
|
||||
function toggleOrg() {
|
||||
document.getElementById('orgPanel').classList.toggle('open');
|
||||
document.getElementById('orgTrigger').classList.toggle('open');
|
||||
}
|
||||
function selectUnit(elem, unitName, unitCode) {
|
||||
document.querySelectorAll('#orgUnitCol .org-item').forEach(i => i.classList.remove('active'));
|
||||
elem.classList.add('active');
|
||||
var depts = deptMap[unitCode] || [];
|
||||
var html = '<div class="org-col__title">部门</div>';
|
||||
html += '<div class="org-item active" data-dept="" onclick="selectDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
depts.forEach(function(d) {
|
||||
html += '<div class="org-item" data-dept="' + d + '" onclick="selectDept(this,\'' + d + '\',\'' + d + '\')">' + d + '</div>';
|
||||
});
|
||||
document.getElementById('orgDeptCol').innerHTML = html;
|
||||
}
|
||||
function selectDept(elem, deptName, deptCode) {
|
||||
document.querySelectorAll('#orgDeptCol .org-item').forEach(i => i.classList.remove('active'));
|
||||
elem.classList.add('active');
|
||||
}
|
||||
document.addEventListener('click', function(e) {
|
||||
var wrap = document.getElementById('orgWrap');
|
||||
if (wrap && !wrap.contains(e.target)) {
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -20,6 +20,21 @@
|
||||
.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;}
|
||||
|
||||
/* 可搜索下拉 */
|
||||
.cs-wrap{position:relative;display:inline-block;}
|
||||
.cs-trigger{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;user-select:none;}
|
||||
.cs-trigger:hover,.cs-wrap.open .cs-trigger{border-color:var(--primary);}
|
||||
.cs-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:100;}
|
||||
.cs-wrap.open .cs-panel{display:block;}
|
||||
.cs-search{padding:8px;border-bottom:1px solid #F0F0F0;}
|
||||
.cs-search input{width:100%;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);outline:none;}
|
||||
.cs-search input:focus{border-color:var(--primary);}
|
||||
.cs-list{max-height:200px;overflow-y:auto;}
|
||||
.cs-option{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;white-space:nowrap;}
|
||||
.cs-option:hover{background:#F5F5F5;}
|
||||
.cs-option.active{color:var(--primary);background:var(--primary-light);}
|
||||
.cs-empty{padding:12px;font-size:var(--font-sm);color:var(--text-secondary);text-align:center;}
|
||||
|
||||
/* 专家列表 */
|
||||
.expert-list{padding:0 24px;}
|
||||
.expert-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #F5F5F5;cursor:pointer;transition:background .15s;margin:0 -24px;padding-left:24px;padding-right:24px;}
|
||||
@@ -55,29 +70,38 @@
|
||||
</div>
|
||||
<div class="filter-bar">
|
||||
<input class="filter-input" type="text" placeholder="搜索专家姓名、医院、科室">
|
||||
<select class="filter-select">
|
||||
<option>全部科室</option>
|
||||
<option>内分泌科</option>
|
||||
<option>心血管内科</option>
|
||||
<option>神经内科</option>
|
||||
<option>骨科</option>
|
||||
<option>消化内科</option>
|
||||
</select>
|
||||
<select class="filter-select" style="min-width:100px;">
|
||||
<option>全部状态</option>
|
||||
<option>在线</option>
|
||||
<option>离线</option>
|
||||
</select>
|
||||
<select class="filter-select" style="min-width:130px;">
|
||||
<option>擅长疾病类型</option>
|
||||
<option>糖尿病</option>
|
||||
<option>甲状腺</option>
|
||||
<option>高血压</option>
|
||||
<option>冠心病</option>
|
||||
<option>头痛/眩晕</option>
|
||||
<option>颈椎病/腰椎</option>
|
||||
<option>胃病/肝胆</option>
|
||||
</select>
|
||||
<!-- 可搜索下拉：全部科室 -->
|
||||
<div class="cs-wrap" id="cs-dept" style="min-width:120px;">
|
||||
<div class="cs-trigger" onclick="csToggle('cs-dept')">全部科室</div>
|
||||
<div class="cs-panel">
|
||||
<div class="cs-search"><input type="text" placeholder="搜索科室" oninput="csFilter('cs-dept',this.value)"></div>
|
||||
<div class="cs-list">
|
||||
<div class="cs-option active" onclick="csSelect('cs-dept',this)">全部科室</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-dept',this)">内分泌科</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-dept',this)">心血管内科</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-dept',this)">神经内科</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-dept',this)">骨科</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-dept',this)">消化内科</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可搜索下拉：擅长疾病类型 -->
|
||||
<div class="cs-wrap" id="cs-disease" style="min-width:130px;">
|
||||
<div class="cs-trigger" onclick="csToggle('cs-disease')">擅长疾病类型</div>
|
||||
<div class="cs-panel">
|
||||
<div class="cs-search"><input type="text" placeholder="搜索疾病" oninput="csFilter('cs-disease',this.value)"></div>
|
||||
<div class="cs-list">
|
||||
<div class="cs-option active" onclick="csSelect('cs-disease',this)">擅长疾病类型</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-disease',this)">糖尿病</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-disease',this)">甲状腺</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-disease',this)">高血压</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-disease',this)">冠心病</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-disease',this)">头痛/眩晕</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-disease',this)">颈椎病/腰椎</div>
|
||||
<div class="cs-option" onclick="csSelect('cs-disease',this)">胃病/肝胆</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="expert-list">
|
||||
<!-- [交互] 点击选中专家，高亮显示 -->
|
||||
@@ -87,7 +111,6 @@
|
||||
<div class="expert-name">王医生 · 主任医师</div>
|
||||
<div class="expert-detail">北京协和医院 · 内分泌科</div>
|
||||
<div class="expert-tags">
|
||||
<span class="tag tag-green">在线</span>
|
||||
<span class="tag tag-blue">糖尿病</span>
|
||||
<span class="tag tag-blue">甲状腺</span>
|
||||
</div>
|
||||
@@ -103,7 +126,6 @@
|
||||
<div class="expert-name">李医生 · 主任医师</div>
|
||||
<div class="expert-detail">西京医院 · 心血管内科</div>
|
||||
<div class="expert-tags">
|
||||
<span class="tag tag-green">在线</span>
|
||||
<span class="tag tag-blue">高血压</span>
|
||||
<span class="tag tag-blue">冠心病</span>
|
||||
</div>
|
||||
@@ -119,7 +141,6 @@
|
||||
<div class="expert-name">张医生 · 副主任医师</div>
|
||||
<div class="expert-detail">唐都医院 · 神经内科</div>
|
||||
<div class="expert-tags">
|
||||
<span class="tag tag-green">在线</span>
|
||||
<span class="tag tag-blue">头痛</span>
|
||||
<span class="tag tag-blue">眩晕</span>
|
||||
</div>
|
||||
@@ -135,7 +156,6 @@
|
||||
<div class="expert-name">陈医生 · 主治医师</div>
|
||||
<div class="expert-detail">长庆医院 · 骨科</div>
|
||||
<div class="expert-tags">
|
||||
<span class="tag tag-gray">离线</span>
|
||||
<span class="tag tag-blue">颈椎病</span>
|
||||
<span class="tag tag-blue">腰椎间盘</span>
|
||||
</div>
|
||||
@@ -151,7 +171,6 @@
|
||||
<div class="expert-name">孙医生 · 副主任医师</div>
|
||||
<div class="expert-detail">西安交大一附院 · 消化内科</div>
|
||||
<div class="expert-tags">
|
||||
<span class="tag tag-green">在线</span>
|
||||
<span class="tag tag-blue">胃病</span>
|
||||
<span class="tag tag-blue">肝胆</span>
|
||||
</div>
|
||||
@@ -174,6 +193,37 @@ function selectExpert(el) {
|
||||
el.classList.add('selected');
|
||||
document.getElementById('selectedName').textContent = el.querySelector('.expert-name').textContent.split('·')[0].trim();
|
||||
}
|
||||
|
||||
/* 可搜索下拉 */
|
||||
function csToggle(id) {
|
||||
const wrap = document.getElementById(id);
|
||||
const isOpen = wrap.classList.contains('open');
|
||||
document.querySelectorAll('.cs-wrap.open').forEach(w => { w.classList.remove('open'); w.querySelector('.cs-search input').value = ''; csFilter(w.id, ''); });
|
||||
if (!isOpen) { wrap.classList.add('open'); wrap.querySelector('.cs-search input').focus(); }
|
||||
}
|
||||
function csSelect(id, el) {
|
||||
const wrap = document.getElementById(id);
|
||||
wrap.querySelectorAll('.cs-option').forEach(o => o.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
wrap.querySelector('.cs-trigger').textContent = el.textContent;
|
||||
wrap.classList.remove('open');
|
||||
wrap.querySelector('.cs-search input').value = '';
|
||||
csFilter(id, '');
|
||||
}
|
||||
function csFilter(id, kw) {
|
||||
const wrap = document.getElementById(id);
|
||||
const opts = wrap.querySelectorAll('.cs-option');
|
||||
let any = false;
|
||||
opts.forEach(o => { const show = o.textContent.includes(kw); o.style.display = show ? '' : 'none'; if (show) any = true; });
|
||||
let empty = wrap.querySelector('.cs-empty');
|
||||
if (!any) { if (!empty) { empty = document.createElement('div'); empty.className = 'cs-empty'; empty.textContent = '无匹配结果'; wrap.querySelector('.cs-list').appendChild(empty); } empty.style.display = ''; }
|
||||
else if (empty) { empty.style.display = 'none'; }
|
||||
}
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.cs-wrap')) {
|
||||
document.querySelectorAll('.cs-wrap.open').forEach(w => { w.classList.remove('open'); w.querySelector('.cs-search input').value = ''; csFilter(w.id, ''); });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -81,95 +81,90 @@
|
||||
</div>
|
||||
</div>
|
||||
<main class="main">
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card"><div class="stat-card__label">本月发送总量</div><div class="stat-card__value" style="color:var(--primary);">1,286</div><div class="stat-card__sub">2026年4月</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">发送成功</div><div class="stat-card__value" style="color:var(--success);">1,245</div><div class="stat-card__sub">成功率 96.8%</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">发送失败</div><div class="stat-card__value" style="color:var(--danger);">41</div><div class="stat-card__sub">需关注</div></div>
|
||||
<div class="stat-card"><div class="stat-card__label">待发送</div><div class="stat-card__value" style="color:var(--warning);">12</div><div class="stat-card__sub">定时任务</div></div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>发送状态</label>
|
||||
<select class="filter-select"><option>全部状态</option><option>已发送</option><option>发送失败</option><option>待发送</option></select>
|
||||
<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="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 class="filter-item"><label>发送状态：</label>
|
||||
<select class="filter-select"><option>请选择</option><option>已发布</option><option>发送中</option><option>发送失败</option></select>
|
||||
</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-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-success" style="margin-left:auto;" onclick="openOverlay('send-dialog.html',640,680)">
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-success">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.4" 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);">共 256 条</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 5 条</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></tr></thead>
|
||||
<thead><tr><th>序号</th><th>标题</th><th>通知对象</th><th>发送状态</th><th>发送人</th><th>创建时间</th><th>发布进度</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">SMS20260410001</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">【健康长庆】您的体检报告已出，请登录APP查看详情。</td>
|
||||
<td>采油一厂</td><td>326</td>
|
||||
<td><span style="color:var(--success);">320</span> / <span style="color:var(--danger);">6</span></td>
|
||||
<td><span class="tag tag-green">已发送</span></td>
|
||||
<td>2026-04-10 09:00</td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">查看详情</span></td>
|
||||
<td>1</td>
|
||||
<td>20260413</td>
|
||||
<td>全体员工</td>
|
||||
<td><span class="link" style="cursor:default;">已发布</span></td>
|
||||
<td>管理员</td>
|
||||
<td>2026-04-13 16:59:40</td>
|
||||
<td><span style="color:var(--success);">446/446</span></td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">详情</span> <span class="link" style="color:var(--danger);">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">SMS20260409002</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">【健康长庆】温馨提醒：您预约的专家咨询将于明日10:00开始。</td>
|
||||
<td>指定人员（15人）</td><td>15</td>
|
||||
<td><span style="color:var(--success);">15</span> / <span style="color:var(--danger);">0</span></td>
|
||||
<td><span class="tag tag-green">已发送</span></td>
|
||||
<td>2026-04-09 16:30</td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">查看详情</span></td>
|
||||
<td>2</td>
|
||||
<td>2026042</td>
|
||||
<td>全体员工</td>
|
||||
<td><span class="link" style="cursor:default;">已发布</span></td>
|
||||
<td>管理员</td>
|
||||
<td>2026-04-02 08:39:51</td>
|
||||
<td><span style="color:var(--success);">8/8</span></td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">详情</span> <span class="link" style="color:var(--danger);">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">SMS20260409003</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">【健康长庆】春季健康讲座通知：4月15日下午2点，主题"职场压力管理"。</td>
|
||||
<td>全部员工</td><td>2,860</td>
|
||||
<td><span style="color:var(--success);">2,831</span> / <span style="color:var(--danger);">29</span></td>
|
||||
<td><span class="tag tag-green">已发送</span></td>
|
||||
<td>2026-04-09 10:00</td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">查看详情</span></td>
|
||||
<td>3</td>
|
||||
<td>测试下短信的长度</td>
|
||||
<td>指定员工</td>
|
||||
<td><span class="link" style="cursor:default;">已发布</span></td>
|
||||
<td>管理员</td>
|
||||
<td>2026-04-01 17:57:39</td>
|
||||
<td><span style="color:var(--success);">49/47</span></td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">详情</span> <span class="link" style="color:var(--danger);">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">SMS20260411004</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">【健康长庆】您的健康评估报告已更新，请及时查看。</td>
|
||||
<td>采油二厂</td><td>280</td>
|
||||
<td>— / —</td>
|
||||
<td><span class="tag tag-orange">待发送</span></td>
|
||||
<td>2026-04-11 08:00（定时）</td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">查看详情</span></td>
|
||||
<td>4</td>
|
||||
<td>测试</td>
|
||||
<td>全体员工</td>
|
||||
<td><span class="link" style="cursor:default;">已发布</span></td>
|
||||
<td>管理员</td>
|
||||
<td>2026-04-01 17:37:04</td>
|
||||
<td><span style="color:var(--success);">8/8</span></td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">详情</span> <span class="link" style="color:var(--danger);">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">SMS20260408005</td>
|
||||
<td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;">【健康长庆】体检预约提醒：请于4月12日前完成年度体检预约。</td>
|
||||
<td>勘探开发研究院</td><td>156</td>
|
||||
<td><span style="color:var(--success);">150</span> / <span style="color:var(--danger);">6</span></td>
|
||||
<td><span class="tag tag-green">已发送</span></td>
|
||||
<td>2026-04-08 14:00</td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">查看详情</span></td>
|
||||
<td>5</td>
|
||||
<td>测试</td>
|
||||
<td>指定员工</td>
|
||||
<td><span class="link" style="cursor:default;">已发布</span></td>
|
||||
<td>管理员</td>
|
||||
<td>2026-04-01 17:23:58</td>
|
||||
<td><span style="color:var(--success);">10/10</span></td>
|
||||
<td><span class="link" onclick="openOverlay('sms-detail-dialog.html',640,600)">详情</span> <span class="link" style="color:var(--danger);">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 256 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<span>共 5 条</span>
|
||||
<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">26</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>
|
||||
|
||||
@@ -43,9 +43,18 @@
|
||||
.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-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
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);}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:160px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
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);}
|
||||
@@ -234,84 +243,95 @@
|
||||
<div class="table-card__title">科室列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 32 个科室</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>科室名称</th>
|
||||
<th>科室分类</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">科室名称</th>
|
||||
<th class="col-fixed col-fixed-3">科室分类</th>
|
||||
<th>关联专家数</th>
|
||||
<th>置顶</th>
|
||||
<th>排序</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:500;">心血管内科</td>
|
||||
<td>内科</td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">心血管内科</td>
|
||||
<td class="col-fixed col-fixed-3">内科</td>
|
||||
<td><span class="expert-count">12 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')" title="点击切换置顶状态"></div></td>
|
||||
<td>1</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">神经内科</td>
|
||||
<td>内科</td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">神经内科</td>
|
||||
<td class="col-fixed col-fixed-3">内科</td>
|
||||
<td><span class="expert-count">8 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>2</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">骨科</td>
|
||||
<td>外科</td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">骨科</td>
|
||||
<td class="col-fixed col-fixed-3">外科</td>
|
||||
<td><span class="expert-count">6 位专家</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>3</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">消化内科</td>
|
||||
<td>内科</td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">消化内科</td>
|
||||
<td class="col-fixed col-fixed-3">内科</td>
|
||||
<td><span class="expert-count">9 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>4</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">内分泌科</td>
|
||||
<td>内科</td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">内分泌科</td>
|
||||
<td class="col-fixed col-fixed-3">内科</td>
|
||||
<td><span class="expert-count">5 位专家</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>5</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">眼科</td>
|
||||
<td>五官科</td>
|
||||
<td class="col-fixed col-fixed-1">6</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">眼科</td>
|
||||
<td class="col-fixed col-fixed-3">五官科</td>
|
||||
<td><span class="expert-count">4 位专家</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>6</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">妇科</td>
|
||||
<td>妇产科</td>
|
||||
<td class="col-fixed col-fixed-1">7</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">妇科</td>
|
||||
<td class="col-fixed col-fixed-3">妇产科</td>
|
||||
<td><span class="expert-count">7 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>7</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">皮肤科</td>
|
||||
<td>外科</td>
|
||||
<td class="col-fixed col-fixed-1">8</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">皮肤科</td>
|
||||
<td class="col-fixed col-fixed-3">外科</td>
|
||||
<td><span class="expert-count">3 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>8</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
<td class="col-fixed col-fixed-end"><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer('edit',this)">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 32 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
@@ -326,11 +346,33 @@
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function openDrawer(){
|
||||
function openDrawer(mode,triggerEl){
|
||||
const drawer=document.getElementById('dept-drawer');
|
||||
const overlay=document.getElementById('dept-drawer-overlay');
|
||||
const title=drawer.querySelector('.drawer__title');
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
var nameInput=drawer.querySelector('.form-input[type="text"]');
|
||||
var catSelect=drawer.querySelector('.form-select');
|
||||
var textarea=drawer.querySelector('.form-textarea');
|
||||
var sortInput=drawer.querySelector('.num-input__val');
|
||||
if(mode==='edit'&&triggerEl){
|
||||
title.textContent='编辑科室';
|
||||
var tr=triggerEl.closest('tr');
|
||||
var cells=tr.querySelectorAll('td');
|
||||
nameInput.value=cells[1].textContent.trim();
|
||||
var cat=cells[2].textContent.trim();
|
||||
for(var i=0;i<catSelect.options.length;i++){
|
||||
if(catSelect.options[i].text===cat){catSelect.selectedIndex=i;break;}
|
||||
}
|
||||
sortInput.value=cells[5].textContent.trim();
|
||||
}else{
|
||||
title.textContent='新增科室';
|
||||
nameInput.value='';
|
||||
catSelect.selectedIndex=0;
|
||||
if(textarea)textarea.value='';
|
||||
sortInput.value='1';
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer(){
|
||||
|
||||
@@ -48,8 +48,8 @@
|
||||
.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);}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
@@ -98,6 +98,16 @@
|
||||
.switch-row .switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch-row .switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -238,91 +248,93 @@
|
||||
<div class="table-card__title">疾病列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 86 条疾病</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排序序号</th>
|
||||
<th>疾病名称</th>
|
||||
<th>所属科室</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">疾病名称</th>
|
||||
<th class="col-fixed col-fixed-3">所属科室</th>
|
||||
<th>置顶</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">高血压</td>
|
||||
<td><span class="tag tag-blue">心血管内科</span></td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">高血压</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">心血管内科</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">糖尿病</td>
|
||||
<td><span class="tag tag-blue">内分泌科</span></td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">糖尿病</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">内分泌科</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">冠心病</td>
|
||||
<td><span class="tag tag-blue">心血管内科</span></td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">冠心病</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">心血管内科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">脑梗死</td>
|
||||
<td><span class="tag tag-blue">神经内科</span></td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">脑梗死</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">神经内科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">颈椎病</td>
|
||||
<td><span class="tag tag-blue">骨科</span></td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">颈椎病</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">骨科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">慢性胃炎</td>
|
||||
<td><span class="tag tag-blue">消化内科</span></td>
|
||||
<td class="col-fixed col-fixed-1">6</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">慢性胃炎</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">消化内科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 86 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
@@ -338,14 +350,31 @@
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function openDrawer(type) {
|
||||
function openDrawer(type,triggerEl) {
|
||||
const drawer = document.getElementById('drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
const title = document.getElementById('drawer-title');
|
||||
var nameInput=drawer.querySelector('.form-input[type="text"]');
|
||||
var deptSelect=drawer.querySelector('.form-select');
|
||||
var sortInput=drawer.querySelector('.form-input[type="number"]');
|
||||
|
||||
title.innerText = type === 'add' ? '新增疾病' : '编辑疾病';
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
|
||||
if(type==='edit'&&triggerEl){
|
||||
var tr=triggerEl.closest('tr');
|
||||
var cells=tr.querySelectorAll('td');
|
||||
nameInput.value=cells[1].textContent.trim();
|
||||
var dept=cells[2].textContent.trim();
|
||||
for(var i=0;i<deptSelect.options.length;i++){
|
||||
if(deptSelect.options[i].text===dept){deptSelect.selectedIndex=i;break;}
|
||||
}
|
||||
}else{
|
||||
nameInput.value='';
|
||||
deptSelect.selectedIndex=0;
|
||||
sortInput.value='99';
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
|
||||
@@ -44,11 +44,20 @@
|
||||
.btn-danger-ghost:hover{background:#FFF1F0;}
|
||||
.btn-sm{height:30px;padding:0 10px;font-size:var(--font-xs);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
.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);}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
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);}
|
||||
@@ -284,119 +293,121 @@
|
||||
<div class="table-card__title">医院列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 48 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>医院名称</th>
|
||||
<th>图片</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">医院名称</th>
|
||||
<th class="col-fixed col-fixed-3">图片</th>
|
||||
<th>等级</th>
|
||||
<th>地址</th>
|
||||
<th>院内科室数量</th>
|
||||
<th>置顶</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">西安交通大学第一附属医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">西安交通大学第一附属医院</td>
|
||||
<td class="col-fixed col-fixed-3"><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市雁塔区</td>
|
||||
<td>12</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')" title="点击切换置顶状态"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')" title="点击切换显示状态"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">长庆油田职工医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">长庆油田职工医院</td>
|
||||
<td class="col-fixed col-fixed-3"><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省西安市未央区</td>
|
||||
<td>8</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">陕西省人民医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">陕西省人民医院</td>
|
||||
<td class="col-fixed col-fixed-3"><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市碑林区</td>
|
||||
<td>15</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">西北妇女儿童医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">西北妇女儿童医院</td>
|
||||
<td class="col-fixed col-fixed-3"><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市雁塔区</td>
|
||||
<td>6</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">庆阳市人民医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">庆阳市人民医院</td>
|
||||
<td class="col-fixed col-fixed-3"><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-2">二级甲等</span></td>
|
||||
<td>甘肃省庆阳市西峰区</td>
|
||||
<td>5</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">延安大学附属医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td class="col-fixed col-fixed-1">6</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-weight:500;">延安大学附属医院</td>
|
||||
<td class="col-fixed col-fixed-3"><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省延安市宝塔区</td>
|
||||
<td>10</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
@@ -439,12 +450,28 @@ const deptData=[
|
||||
|
||||
let selectedDepts=new Set();
|
||||
|
||||
function openDrawer(){
|
||||
function openDrawer(mode,triggerEl){
|
||||
const drawer=document.getElementById('hospital-drawer');
|
||||
const overlay=document.getElementById('hospital-drawer-overlay');
|
||||
const title=drawer.querySelector('.drawer__title');
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
initCascadeSelect();
|
||||
if(mode==='edit'&&triggerEl){
|
||||
title.textContent='编辑医院';
|
||||
var tr=triggerEl.closest('tr');
|
||||
var cells=tr.querySelectorAll('td');
|
||||
var name=cells[1].textContent.trim();
|
||||
var select=document.getElementById('hospital-select');
|
||||
for(var i=0;i<select.options.length;i++){
|
||||
if(select.options[i].text===name){select.selectedIndex=i;break;}
|
||||
}
|
||||
onHospitalChange();
|
||||
}else{
|
||||
title.textContent='新增医院';
|
||||
document.getElementById('hospital-select').selectedIndex=0;
|
||||
document.getElementById('hospital-info').classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer(){
|
||||
|
||||
@@ -201,8 +201,8 @@
|
||||
<div class="preview-phone__title" id="preview-title-text">图文咨询须知</div>
|
||||
<div class="preview-phone__content" id="preview-content-text"></div>
|
||||
<div class="preview-phone__btns">
|
||||
<div class="preview-phone__btn preview-phone__btn--cancel">不同意</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--ok">同意并继续</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--cancel">忽略</div>
|
||||
<div class="preview-phone__btn preview-phone__btn--ok">知晓并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,11 +42,20 @@
|
||||
.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__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:280px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
.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;}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
@@ -226,77 +235,79 @@
|
||||
<div class="table-card__title">常用语列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 24 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>常用语内容</th>
|
||||
<th>分类</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">常用语内容</th>
|
||||
<th class="col-fixed col-fixed-3">分类</th>
|
||||
<th>适用角色</th>
|
||||
<th>使用次数</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td><div class="phrase-text">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div></td>
|
||||
<td><span class="tag tag-blue">问候语</span></td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="phrase-text">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div></td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">问候语</span></td>
|
||||
<td><span class="tag tag-green">咨询小助手</span></td>
|
||||
<td>1,234</td>
|
||||
<td>2025-06-01</td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td><div class="phrase-text">您好，我是您的健康咨询专家，请详细描述您的症状，包括发病时间、症状表现及既往病史。</div></td>
|
||||
<td><span class="tag tag-blue">问候语</span></td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="phrase-text">您好，我是您的健康咨询专家，请详细描述您的症状，包括发病时间、症状表现及既往病史。</div></td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">问候语</span></td>
|
||||
<td><span class="tag tag-purple">咨询专家</span></td>
|
||||
<td>876</td>
|
||||
<td>2025-06-01</td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td><div class="phrase-text">建议您尽快前往医院进行进一步检查，以便获得更准确的诊断和治疗方案。</div></td>
|
||||
<td><span class="tag tag-blue">注意事项</span></td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="phrase-text">建议您尽快前往医院进行进一步检查，以便获得更准确的诊断和治疗方案。</div></td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">注意事项</span></td>
|
||||
<td><span class="tag tag-green">通用</span></td>
|
||||
<td>654</td>
|
||||
<td>2025-07-15</td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td><div class="phrase-text">感谢您的咨询！如有其他健康问题，欢迎随时联系我们。祝您身体健康！</div></td>
|
||||
<td><span class="tag tag-blue">结束语</span></td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="phrase-text">感谢您的咨询！如有其他健康问题，欢迎随时联系我们。祝您身体健康！</div></td>
|
||||
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">结束语</span></td>
|
||||
<td><span class="tag tag-green">通用</span></td>
|
||||
<td>543</td>
|
||||
<td>2025-07-15</td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link" onclick="openDrawer('edit',this)">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 24 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
@@ -310,14 +321,36 @@
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function openDrawer(type) {
|
||||
function openDrawer(type,triggerEl) {
|
||||
const drawer = document.getElementById('drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
const title = document.getElementById('drawer-title');
|
||||
var textarea=drawer.querySelector('.form-textarea');
|
||||
var selects=drawer.querySelectorAll('.form-select');
|
||||
var catSelect=selects[0];
|
||||
var roleSelect=selects[1];
|
||||
|
||||
title.innerText = type === 'add' ? '新增常用语' : '编辑常用语';
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
|
||||
if(type==='edit'&&triggerEl){
|
||||
var tr=triggerEl.closest('tr');
|
||||
var cells=tr.querySelectorAll('td');
|
||||
textarea.value=cells[1].textContent.trim();
|
||||
var cat=cells[2].textContent.trim();
|
||||
for(var i=0;i<catSelect.options.length;i++){
|
||||
if(catSelect.options[i].text===cat){catSelect.selectedIndex=i;break;}
|
||||
}
|
||||
var role=cells[3].textContent.trim();
|
||||
for(var j=0;j<roleSelect.options.length;j++){
|
||||
if(roleSelect.options[j].text===role){roleSelect.selectedIndex=j;break;}
|
||||
}
|
||||
}else{
|
||||
textarea.value='';
|
||||
catSelect.selectedIndex=0;
|
||||
roleSelect.selectedIndex=0;
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
|
||||
@@ -50,10 +50,17 @@
|
||||
.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;}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:160px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
.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);}
|
||||
@@ -193,8 +200,9 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>头像</th>
|
||||
<th>姓名</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">头像</th>
|
||||
<th class="col-fixed col-fixed-3">姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>性别</th>
|
||||
<th>年龄</th>
|
||||
@@ -202,13 +210,14 @@
|
||||
<th>部门</th>
|
||||
<th>手机号</th>
|
||||
<th>咨询人数量</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">张</div></td>
|
||||
<td>张伟</td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">张</div></td>
|
||||
<td class="col-fixed col-fixed-3">张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ001234</td>
|
||||
<td>男</td>
|
||||
<td>38</td>
|
||||
@@ -217,11 +226,12 @@
|
||||
<td>13800138000</td>
|
||||
<td style="font-weight:500;">3人</td>
|
||||
<!-- [交互] 点击跳转至: ./consult-record-detail.html -->
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">李</div></td>
|
||||
<td>李明</td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">李</div></td>
|
||||
<td class="col-fixed col-fixed-3">李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ002571</td>
|
||||
<td>男</td>
|
||||
<td>42</td>
|
||||
@@ -229,11 +239,12 @@
|
||||
<td>内分泌科</td>
|
||||
<td>13800138001</td>
|
||||
<td style="font-weight:500;">1人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">刘</div></td>
|
||||
<td>刘洋</td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">刘</div></td>
|
||||
<td class="col-fixed col-fixed-3">刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ004102</td>
|
||||
<td>男</td>
|
||||
<td>35</td>
|
||||
@@ -241,11 +252,12 @@
|
||||
<td>生产部</td>
|
||||
<td>13800138002</td>
|
||||
<td style="font-weight:500;">5人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">陈</div></td>
|
||||
<td>陈磊</td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">陈</div></td>
|
||||
<td class="col-fixed col-fixed-3">陈磊</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ006890</td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
@@ -253,11 +265,12 @@
|
||||
<td>技术部</td>
|
||||
<td>13800138003</td>
|
||||
<td style="font-weight:500;">8人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">王</div></td>
|
||||
<td>王芳</td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2"><div class="avatar" style="width:36px;height:36px;font-size:var(--font-base);">王</div></td>
|
||||
<td class="col-fixed col-fixed-3">王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CQ003388</td>
|
||||
<td>女</td>
|
||||
<td>32</td>
|
||||
@@ -265,7 +278,7 @@
|
||||
<td>医学研究部</td>
|
||||
<td>13800138004</td>
|
||||
<td style="font-weight:500;">2人</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# 专家咨询（管理端）变更记录
|
||||
|
||||
## 2026-04-16
|
||||
|
||||
### feat: 新增单位报表明细页，支持从列表页跳转
|
||||
|
||||
新增单位报表数据二级明细页面，展示单位下员工咨询数据列表，支持按部门/姓名筛选，点击可弹窗查看个人明细。
|
||||
|
||||
**涉及文件：**
|
||||
|
||||
- `archive-unit-detail.html` — 新增，单位报表明细页
|
||||
- 面包屑导航返回列表页
|
||||
- 单位信息卡片（名称、人数、咨询次数、费用汇总）
|
||||
- 筛选栏（年份、部门、员工姓名）
|
||||
- 员工咨询数据表格，操作列弹窗加载个人明细
|
||||
- `archive-unit.html` — 修改，所有"查看明细"添加 onclick 跳转到明细页
|
||||
- `index.html` — 导航页 SITE_MAP 新增明细页条目
|
||||
|
||||
## 2026-04-13
|
||||
|
||||
### refactor: 重构咨询须知配置页面
|
||||
|
||||
@@ -56,8 +56,16 @@
|
||||
.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;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.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;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#FFF8F8;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
@@ -102,7 +110,7 @@
|
||||
<div class="sidebar-group-title">异常事件</div>
|
||||
<a href="exception-dirty.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L2 13h12L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v4M8 11.5v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
系统脏数据
|
||||
异常数据
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
@@ -157,11 +165,13 @@
|
||||
<button class="btn btn-default" style="height:30px;font-size:var(--font-xs);">批量忽略</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>异常类型</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">咨询单号</th>
|
||||
<th class="col-fixed col-fixed-3">异常类型</th>
|
||||
<th>咨询员工</th>
|
||||
<th>员工编号</th>
|
||||
<th>咨询专家</th>
|
||||
@@ -172,8 +182,9 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409088</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409088</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>张三</td>
|
||||
<td>EMP001</td>
|
||||
<td>李医生</td>
|
||||
@@ -182,8 +193,9 @@
|
||||
<td>2026-04-09 11:23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409102</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409102</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>李四</td>
|
||||
<td>EMP002</td>
|
||||
<td>王医生</td>
|
||||
@@ -192,8 +204,9 @@
|
||||
<td>2026-04-09 11:45</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408215</td>
|
||||
<td><span class="dirty-type">评分溢出</span></td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260408215</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="dirty-type">评分溢出</span></td>
|
||||
<td>王五</td>
|
||||
<td>EMP003</td>
|
||||
<td>张医生</td>
|
||||
@@ -202,8 +215,9 @@
|
||||
<td>2026-04-09 10:12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407088</td>
|
||||
<td><span class="dirty-type">评分溢出</span></td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260407088</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="dirty-type">评分溢出</span></td>
|
||||
<td>赵六</td>
|
||||
<td>EMP004</td>
|
||||
<td>陈医生</td>
|
||||
@@ -212,8 +226,9 @@
|
||||
<td>2026-04-08 16:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407055</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260407055</td>
|
||||
<td class="col-fixed col-fixed-3"><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>孙七</td>
|
||||
<td>EMP005</td>
|
||||
<td>孙医生</td>
|
||||
@@ -223,6 +238,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 23 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
|
||||
@@ -50,10 +50,10 @@
|
||||
.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);}
|
||||
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);white-space:nowrap;}
|
||||
thead th.sortable{cursor:pointer;}
|
||||
thead th.sortable:hover{color:var(--primary);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
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);}
|
||||
@@ -75,6 +75,15 @@
|
||||
.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);}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -171,11 +180,13 @@
|
||||
<div class="table-card__title">专家统计数据</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 42 位专家</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>专家信息</th>
|
||||
<th>专家医院</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">专家信息</th>
|
||||
<th class="col-fixed col-fixed-3">专家医院</th>
|
||||
<th class="sortable">总咨询次数 ↕</th>
|
||||
<th>进行中</th>
|
||||
<th class="sortable">图文咨询 ↕</th>
|
||||
@@ -186,7 +197,8 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2">
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">李</div>
|
||||
<div>
|
||||
@@ -195,7 +207,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>长庆医院</td>
|
||||
<td class="col-fixed col-fixed-3">长庆医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">1,234</td>
|
||||
<td><span class="tag tag-blue">3</span></td>
|
||||
<td>986</td>
|
||||
@@ -214,7 +226,8 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2">
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">王</div>
|
||||
<div>
|
||||
@@ -223,7 +236,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>中心医院</td>
|
||||
<td class="col-fixed col-fixed-3">中心医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">987</td>
|
||||
<td><span class="tag tag-blue">2</span></td>
|
||||
<td>756</td>
|
||||
@@ -242,7 +255,8 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2">
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">张</div>
|
||||
<div>
|
||||
@@ -251,7 +265,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>人民医院</td>
|
||||
<td class="col-fixed col-fixed-3">人民医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">756</td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>612</td>
|
||||
@@ -270,7 +284,8 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2">
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">陈</div>
|
||||
<div>
|
||||
@@ -279,7 +294,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>长庆医院</td>
|
||||
<td class="col-fixed col-fixed-3">长庆医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">543</td>
|
||||
<td><span class="tag tag-blue">0</span></td>
|
||||
<td>489</td>
|
||||
@@ -298,7 +313,8 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2">
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">孙</div>
|
||||
<div>
|
||||
@@ -307,7 +323,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>中心医院</td>
|
||||
<td class="col-fixed col-fixed-3">中心医院</td>
|
||||
<td style="font-weight:600;color:var(--primary);">312</td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>278</td>
|
||||
@@ -327,6 +343,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
|
||||
@@ -50,6 +50,14 @@
|
||||
.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-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
@@ -143,6 +151,15 @@
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="">全部年份</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询单号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入咨询单号">
|
||||
@@ -223,8 +240,9 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">咨询单号</th>
|
||||
<th class="col-fixed col-fixed-3">姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
@@ -234,13 +252,14 @@
|
||||
<th>首次回复时间</th>
|
||||
<th>咨询完成时间</th>
|
||||
<th>咨询时长</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td class="col-fixed col-fixed-3">张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>采油一厂</td>
|
||||
<td>心血管科</td>
|
||||
@@ -250,11 +269,12 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('张伟','健康小助手','2026-04-09 08:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td>李明</td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td class="col-fixed col-fixed-3">李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002</td>
|
||||
<td>采油二厂</td>
|
||||
<td>内分泌科</td>
|
||||
@@ -264,11 +284,12 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('李明','健康小助手','2026-04-09 09:45')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409003</td>
|
||||
<td>王芳</td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409003</td>
|
||||
<td class="col-fixed col-fixed-3">王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>医学研究部</td>
|
||||
@@ -278,11 +299,12 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('王芳','健康小助手','2026-04-09 10:12')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408004</td>
|
||||
<td>刘洋</td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260408004</td>
|
||||
<td class="col-fixed col-fixed-3">刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产部</td>
|
||||
@@ -292,11 +314,12 @@
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>6分钟</td>
|
||||
<td><span class="link" onclick="openChat('刘洋','健康小助手','2026-04-08 14:55')">查看对话</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('刘洋','健康小助手','2026-04-08 14:55')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408005</td>
|
||||
<td>赵静</td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260408005</td>
|
||||
<td class="col-fixed col-fixed-3">赵静</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005</td>
|
||||
<td>机关事务服务中心</td>
|
||||
<td>行政部</td>
|
||||
@@ -306,7 +329,7 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('赵静','健康小助手','2026-04-08 16:20')">查看对话</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -55,7 +55,15 @@
|
||||
.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-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
@@ -138,6 +146,15 @@
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="">全部年份</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询单号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入咨询单号">
|
||||
@@ -197,8 +214,9 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">咨询单号</th>
|
||||
<th class="col-fixed col-fixed-3">姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>咨询专家</th>
|
||||
<th>专家医院</th>
|
||||
@@ -206,13 +224,14 @@
|
||||
<th>评分</th>
|
||||
<th>评价内容</th>
|
||||
<th>评价时间</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409001</td>
|
||||
<td class="col-fixed col-fixed-3">张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001023</td>
|
||||
<td>李医生</td>
|
||||
<td>北京协和医院</td>
|
||||
@@ -220,11 +239,12 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('张伟','李医生','北京协和医院','心血管内科','2026-04-09 09:40')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td>李明</td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260409002</td>
|
||||
<td class="col-fixed col-fixed-3">李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP002187</td>
|
||||
<td>王医生</td>
|
||||
<td>上海瑞金医院</td>
|
||||
@@ -232,11 +252,12 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('李明','王医生','上海瑞金医院','内分泌科','2026-04-09 11:20')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408003</td>
|
||||
<td>刘洋</td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260408003</td>
|
||||
<td class="col-fixed col-fixed-3">刘洋</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP003456</td>
|
||||
<td>陈医生</td>
|
||||
<td>广州中山医院</td>
|
||||
@@ -244,11 +265,12 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('刘洋','陈医生','广州中山医院','骨科','2026-04-08 15:10')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407004</td>
|
||||
<td>陈磊</td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260407004</td>
|
||||
<td class="col-fixed col-fixed-3">陈磊</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP004891</td>
|
||||
<td>李医生</td>
|
||||
<td>北京协和医院</td>
|
||||
@@ -256,11 +278,12 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('陈磊','李医生','北京协和医院','心血管内科','2026-04-07 10:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260406005</td>
|
||||
<td>孙丽</td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260406005</td>
|
||||
<td class="col-fixed col-fixed-3">孙丽</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP005234</td>
|
||||
<td>孙医生</td>
|
||||
<td>杭州邵逸夫医院</td>
|
||||
@@ -271,7 +294,7 @@
|
||||
<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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('孙丽','孙医生','杭州邵逸夫医院','消化内科','2026-04-06 14:55')">查看对话</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -50,8 +50,8 @@
|
||||
.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);}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
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);}
|
||||
@@ -76,6 +76,13 @@
|
||||
.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;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:180px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
.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);}
|
||||
@@ -109,6 +116,13 @@
|
||||
.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;}
|
||||
/* overlay 弹窗 */
|
||||
.overlay-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;}
|
||||
.overlay-modal.open{display:flex;}
|
||||
.overlay-modal__box{background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.15);position:relative;max-height:90vh;display:flex;flex-direction:column;}
|
||||
.overlay-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.04);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999;z-index:10;transition:all .15s;}
|
||||
.overlay-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
|
||||
.overlay-modal iframe{border:none;display:block;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
@@ -155,6 +169,15 @@
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-bar__row">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="">全部年份</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>咨询单号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入咨询单号">
|
||||
@@ -285,215 +308,237 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>咨询单号</th>
|
||||
<th>姓名</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">咨询单号</th>
|
||||
<th class="col-fixed col-fixed-3">姓名</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>评分</th>
|
||||
<th>操作</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409001</td>
|
||||
<td class="col-fixed col-fixed-3">张伟</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>李医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('张伟','李医生','长庆医院','心血管内科','2026-04-09 09:12')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409002</td>
|
||||
<td>李明</td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409002</td>
|
||||
<td class="col-fixed col-fixed-3">李明</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>王医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openDetail('李明','王医生','副主任医师','长庆医院','内分泌科','2026-04-09 10:30','已完成')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409003</td>
|
||||
<td>王芳</td>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409003</td>
|
||||
<td class="col-fixed col-fixed-3">王芳</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><span class="tag tag-blue">进行中</span></td>
|
||||
<td>张医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('王芳','张医生','长庆医院','神经内科','2026-04-09 11:05')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260408004</td>
|
||||
<td>刘洋</td>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260408004</td>
|
||||
<td class="col-fixed col-fixed-3">刘洋</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>陈医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('刘洋','陈医生','长庆医院','骨科','2026-04-08 14:22')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260408005</td>
|
||||
<td>赵静</td>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260408005</td>
|
||||
<td class="col-fixed col-fixed-3">赵静</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><span class="tag tag-red">已拒绝</span></td>
|
||||
<td>孙医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openDetail('赵静','孙医生','主任医师','长庆医院','消化内科','2026-04-08 16:40','已拒绝')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260407006</td>
|
||||
<td>孙丽</td>
|
||||
<td class="col-fixed col-fixed-1">6</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260407006</td>
|
||||
<td class="col-fixed col-fixed-3">孙丽</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP010</td>
|
||||
<td>采油二厂</td>
|
||||
<td>技术部</td>
|
||||
<td><span class="tag tag-orange">视频咨询</span></td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>陈医生</td>
|
||||
<td>副主任医师</td>
|
||||
<td>长庆医院</td>
|
||||
<td>骨科</td>
|
||||
<td><span class="tag tag-green">收费专家</span></td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>2026-04-07 08:20</td>
|
||||
<td>—</td>
|
||||
<td>2026-04-07 08:45</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><span class="link" onclick="openChat('孙丽','陈医生','长庆医院','骨科','2026-04-07 08:20')">查看对话</span></td>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openDetail('孙丽','陈医生','副主任医师','长庆医院','骨科','2026-04-07 08:20','已取消')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260407007</td>
|
||||
<td>陈磊</td>
|
||||
<td class="col-fixed col-fixed-1">7</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260407007</td>
|
||||
<td class="col-fixed col-fixed-3">陈磊</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><span class="tag tag-green">已完成</span></td>
|
||||
<td>李医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('陈磊','李医生','长庆医院','心血管内科','2026-04-07 09:55')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409008</td>
|
||||
<td>周华</td>
|
||||
<td class="col-fixed col-fixed-1">8</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409008</td>
|
||||
<td class="col-fixed col-fixed-3">周华</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><span class="tag tag-orange">待回复</span></td>
|
||||
<td>刘医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openChat('周华','刘医生','长庆医院','呼吸科','2026-04-09 14:30')">查看对话</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409009</td>
|
||||
<td>吴娟</td>
|
||||
<td class="col-fixed col-fixed-1">9</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409009</td>
|
||||
<td class="col-fixed col-fixed-3">吴娟</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><span class="tag tag-blue">待确认</span></td>
|
||||
<td>王医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openDetail('吴娟','王医生','副主任医师','长庆医院','内分泌科','2026-04-09 15:10','待确认')">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZJ20260409010</td>
|
||||
<td>何军</td>
|
||||
<td class="col-fixed col-fixed-1">10</td>
|
||||
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZJ20260409010</td>
|
||||
<td class="col-fixed col-fixed-3">何军</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><span class="tag tag-green">待开始</span></td>
|
||||
<td>张医生</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>
|
||||
<td class="col-fixed col-fixed-end"><span class="link" onclick="openDetail('何军','张医生','主治医师','长庆医院','神经内科','2026-04-09 16:00','待开始')">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -511,10 +556,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- overlay 弹窗容器 -->
|
||||
<div class="overlay-modal" id="overlayModal" onclick="if(event.target===this)closeOverlay()">
|
||||
<div class="overlay-modal__box" id="overlayBox">
|
||||
<button class="overlay-modal__close" onclick="closeOverlay()">✕</button>
|
||||
<iframe id="overlayFrame" src=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图文咨询对话弹窗 -->
|
||||
<div class="modal" id="chatModal" onclick="if(event.target===this)closeChat()">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">咨询对话</div>
|
||||
<div class="modal-title" id="modalTitle">咨询对话</div>
|
||||
<button class="modal-close" onclick="closeChat()">✕</button>
|
||||
</div>
|
||||
<div class="modal-info" id="chatInfo">
|
||||
@@ -612,7 +665,33 @@ function selectDept(elem, deptName, deptCode) {
|
||||
elem.classList.add('active');
|
||||
}
|
||||
|
||||
function openDetail(name, expert, title, hospital, dept, time, status) {
|
||||
var fileMap = {
|
||||
'待确认': 'video-detail-pending-confirm.html',
|
||||
'待开始': 'video-detail-pending-start.html',
|
||||
'已完成': 'video-detail-completed.html',
|
||||
'已拒绝': 'video-detail-rejected.html',
|
||||
'已取消': 'video-detail-cancelled.html'
|
||||
};
|
||||
var url = fileMap[status];
|
||||
if (!url) return;
|
||||
var box = document.getElementById('overlayBox');
|
||||
box.style.width = '560px';
|
||||
var frame = document.getElementById('overlayFrame');
|
||||
frame.style.width = '560px';
|
||||
frame.style.height = '560px';
|
||||
frame.src = url;
|
||||
document.getElementById('overlayModal').classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
function closeOverlay() {
|
||||
document.getElementById('overlayModal').classList.remove('open');
|
||||
document.getElementById('overlayFrame').src = '';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function openChat(name, expert, hospital, dept, time) {
|
||||
document.getElementById('modalTitle').textContent = '咨询对话';
|
||||
const chatInfo = document.getElementById('chatInfo');
|
||||
chatInfo.innerHTML = `
|
||||
<div class="modal-info-item">
|
||||
|
||||
@@ -0,0 +1,324 @@
|
||||
<!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;--font-xxl:24px;--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;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* --- 表单样式 --- */
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
|
||||
.form-label{width:130px;text-align:right;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;}
|
||||
.form-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:320px;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-input--short{min-width:120px;width:120px;}
|
||||
.form-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:150px;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.radio-group{display:flex;align-items:center;gap:20px;font-size:var(--font-sm);}
|
||||
.radio-group label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-primary);}
|
||||
.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);}
|
||||
.btn-link{background:none;border:none;color:var(--primary);cursor:pointer;font-size:var(--font-sm);padding:0;}
|
||||
.btn-link:hover{text-decoration:underline;}
|
||||
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:10px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{text-decoration:underline;}
|
||||
.bottom-bar{position:fixed;bottom:0;left:240px;right:0;height:60px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;gap:16px;z-index:50;}
|
||||
.main{padding-bottom:80px;}
|
||||
</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">
|
||||
<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="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 active">
|
||||
<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="breadcrumb">
|
||||
<a href="settlement.html">咨询结算</a>
|
||||
<span>/</span>
|
||||
<span>新增结算</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">结算名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入结算名称" style="min-width:400px;">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">是否产生通讯费用</div>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="hasTelFee" value="no" checked onchange="toggleTelFee()"> 否</label>
|
||||
<label><input type="radio" name="hasTelFee" value="yes" onchange="toggleTelFee()"> 是</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" id="telFeeRow" style="display:none;">
|
||||
<div class="form-label">通讯费用</div>
|
||||
<input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结算费用设置 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">结算费用设置</div>
|
||||
<table id="feeTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:160px;">费用类型</th>
|
||||
<th style="width:200px;">结算对象</th>
|
||||
<th style="width:160px;">图文咨询费用（元）</th>
|
||||
<th style="width:160px;">视频咨询费用（元）</th>
|
||||
<th style="width:80px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="feeBody">
|
||||
<tr>
|
||||
<td>
|
||||
<select class="form-select" style="min-width:130px;" onchange="onFeeTypeChange(this)">
|
||||
<option value="">请选择</option>
|
||||
<option value="title">职称</option>
|
||||
<option value="individual">单独设置</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="fee-target-cell">
|
||||
<select class="form-select" style="min-width:170px;" disabled>
|
||||
<option>请先选择费用类型</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td>
|
||||
<td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td>
|
||||
<td><span class="link-danger" onclick="removeFeeRow(this)">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="padding:12px 16px;">
|
||||
<button class="btn-link" onclick="addFeeRow()">+ 新增费用规则</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结算周期设置 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">结算周期设置</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">开始月份</div>
|
||||
<input class="form-input" id="cycleStart" type="month" style="min-width:180px;" onchange="generateCycleRows()">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-label">结束月份</div>
|
||||
<input class="form-input" id="cycleEnd" type="month" style="min-width:180px;" onchange="generateCycleRows()">
|
||||
</div>
|
||||
<div id="cycleTableWrap" style="display:none;margin-top:16px;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:140px;">月份</th>
|
||||
<th style="width:180px;">范围类型</th>
|
||||
<th>自定义范围</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="cycleBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<div class="bottom-bar">
|
||||
<button class="btn btn-primary" style="min-width:100px;" onclick="location.href='settlement.html'">确认</button>
|
||||
<button class="btn btn-default" style="min-width:100px;" onclick="location.href='settlement.html'">取消</button>
|
||||
</div>
|
||||
<script>
|
||||
/* URL 参数解析 */
|
||||
var params=new URLSearchParams(location.search);
|
||||
var pageMode=params.get('mode')||'add'; // add | edit | view
|
||||
|
||||
/* 模拟数据（编辑/查看时预填） */
|
||||
var mockData={
|
||||
name:'2026年4月专家咨询结算',
|
||||
hasTelFee:true,
|
||||
telFee:'5.00',
|
||||
fees:[
|
||||
{type:'title',target:'主任医师',textFee:'50',videoFee:'100'},
|
||||
{type:'title',target:'副主任医师',textFee:'40',videoFee:'80'},
|
||||
{type:'individual',target:'李医生',textFee:'60',videoFee:'120'}
|
||||
],
|
||||
cycleStart:'2026-04',
|
||||
cycleEnd:'2026-04',
|
||||
cycles:[{month:'2026-04',rangeType:'natural'}]
|
||||
};
|
||||
|
||||
/* 页面标题与面包屑 */
|
||||
var titleMap={add:'新增结算',edit:'编辑配置',view:'查看配置'};
|
||||
document.querySelector('.breadcrumb span:last-child').textContent=titleMap[pageMode];
|
||||
document.title='专家咨询 - '+titleMap[pageMode]+' | 健康长庆原型';
|
||||
|
||||
/* 初始化 */
|
||||
window.addEventListener('DOMContentLoaded',function(){
|
||||
if(pageMode==='edit'||pageMode==='view') fillData();
|
||||
if(pageMode==='view') disableAll();
|
||||
});
|
||||
|
||||
/* 预填数据 */
|
||||
function fillData(){
|
||||
var d=mockData;
|
||||
document.querySelector('.form-input[placeholder="请输入结算名称"]').value=d.name;
|
||||
if(d.hasTelFee){
|
||||
document.querySelector('input[name="hasTelFee"][value="yes"]').checked=true;
|
||||
toggleTelFee();
|
||||
document.querySelector('#telFeeRow .form-input').value=d.telFee;
|
||||
}
|
||||
/* 费用行 */
|
||||
var feeBody=document.getElementById('feeBody');
|
||||
feeBody.innerHTML='';
|
||||
d.fees.forEach(function(f){
|
||||
var tr=document.createElement('tr');
|
||||
var targetOpts='';
|
||||
if(f.type==='title'){
|
||||
targetOpts='<option value="">请选择职称</option><option'+(f.target==='主任医师'?' selected':'')+'>主任医师</option><option'+(f.target==='副主任医师'?' selected':'')+'>副主任医师</option><option'+(f.target==='主治医师'?' selected':'')+'>主治医师</option><option'+(f.target==='住院医师'?' selected':'')+'>住院医师</option>';
|
||||
}else{
|
||||
targetOpts='<option value="">请选择医生</option><option'+(f.target==='李医生'?' selected':'')+'>李医生</option><option'+(f.target==='王医生'?' selected':'')+'>王医生</option><option'+(f.target==='张医生'?' selected':'')+'>张医生</option><option'+(f.target==='陈医生'?' selected':'')+'>陈医生</option><option'+(f.target==='孙医生'?' selected':'')+'>孙医生</option>';
|
||||
}
|
||||
tr.innerHTML='<td><select class="form-select" style="min-width:130px;" onchange="onFeeTypeChange(this)"><option value="">请选择</option><option value="title"'+(f.type==='title'?' selected':'')+'>职称</option><option value="individual"'+(f.type==='individual'?' selected':'')+'>单独设置</option></select></td><td class="fee-target-cell"><select class="form-select" style="min-width:170px;">'+targetOpts+'</select></td><td><input class="form-input form-input--short" type="number" value="'+f.textFee+'"></td><td><input class="form-input form-input--short" type="number" value="'+f.videoFee+'"></td><td><span class="link-danger" onclick="removeFeeRow(this)">删除</span></td>';
|
||||
feeBody.appendChild(tr);
|
||||
});
|
||||
/* 周期 */
|
||||
document.getElementById('cycleStart').value=d.cycleStart;
|
||||
document.getElementById('cycleEnd').value=d.cycleEnd;
|
||||
generateCycleRows();
|
||||
}
|
||||
|
||||
/* 查看模式：禁用所有控件 */
|
||||
function disableAll(){
|
||||
document.querySelectorAll('input,select,textarea').forEach(function(el){el.disabled=true;});
|
||||
document.querySelectorAll('.btn-link,.link-danger').forEach(function(el){el.style.display='none';});
|
||||
var bar=document.querySelector('.bottom-bar');
|
||||
bar.innerHTML='<button class="btn btn-default" style="min-width:100px;" onclick="location.href=\'settlement.html\'">返回</button>';
|
||||
}
|
||||
|
||||
/* 通讯费用开关 */
|
||||
function toggleTelFee(){
|
||||
var v=document.querySelector('input[name="hasTelFee"]:checked').value;
|
||||
document.getElementById('telFeeRow').style.display=v==='yes'?'flex':'none';
|
||||
}
|
||||
|
||||
/* 费用类型切换 → 结算对象 */
|
||||
function onFeeTypeChange(sel){
|
||||
var td=sel.closest('tr').querySelector('.fee-target-cell');
|
||||
if(sel.value==='title'){
|
||||
td.innerHTML='<select class="form-select" style="min-width:170px;"><option value="">请选择职称</option><option>主任医师</option><option>副主任医师</option><option>主治医师</option><option>住院医师</option></select>';
|
||||
}else if(sel.value==='individual'){
|
||||
td.innerHTML='<select class="form-select" style="min-width:170px;"><option value="">请选择医生</option><option>李医生</option><option>王医生</option><option>张医生</option><option>陈医生</option><option>孙医生</option></select>';
|
||||
}else{
|
||||
td.innerHTML='<select class="form-select" style="min-width:170px;" disabled><option>请先选择费用类型</option></select>';
|
||||
}
|
||||
}
|
||||
|
||||
/* 新增费用行 */
|
||||
function addFeeRow(){
|
||||
var tr=document.createElement('tr');
|
||||
tr.innerHTML='<td><select class="form-select" style="min-width:130px;" onchange="onFeeTypeChange(this)"><option value="">请选择</option><option value="title">职称</option><option value="individual">单独设置</option></select></td><td class="fee-target-cell"><select class="form-select" style="min-width:170px;" disabled><option>请先选择费用类型</option></select></td><td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td><td><input class="form-input form-input--short" type="number" placeholder="0.00" min="0" step="0.01"></td><td><span class="link-danger" onclick="removeFeeRow(this)">删除</span></td>';
|
||||
document.getElementById('feeBody').appendChild(tr);
|
||||
}
|
||||
function removeFeeRow(el){
|
||||
var tbody=document.getElementById('feeBody');
|
||||
if(tbody.rows.length>1) el.closest('tr').remove();
|
||||
}
|
||||
|
||||
/* 结算周期 → 生成月份列表 */
|
||||
function generateCycleRows(){
|
||||
var s=document.getElementById('cycleStart').value;
|
||||
var e=document.getElementById('cycleEnd').value;
|
||||
var wrap=document.getElementById('cycleTableWrap');
|
||||
var body=document.getElementById('cycleBody');
|
||||
if(!s||!e){wrap.style.display='none';return;}
|
||||
var sp=s.split('-'),ep=e.split('-');
|
||||
var sy=+sp[0],sm=+sp[1],ey=+ep[0],em=+ep[1];
|
||||
if(sy*12+sm>ey*12+em){wrap.style.display='none';return;}
|
||||
body.innerHTML='';
|
||||
var y=sy,m=sm;
|
||||
while(y*12+m<=ey*12+em){
|
||||
var label=y+'-'+(m<10?'0':'')+m;
|
||||
var tr=document.createElement('tr');
|
||||
tr.innerHTML='<td>'+label+'</td><td><select class="form-select" style="min-width:150px;" onchange="onRangeTypeChange(this)"><option value="natural">自然月</option><option value="custom">自定义日期</option></select></td><td class="custom-range-cell"><span style="color:var(--text-secondary);font-size:var(--font-sm);">—</span></td>';
|
||||
body.appendChild(tr);
|
||||
m++;if(m>12){m=1;y++;}
|
||||
}
|
||||
wrap.style.display='block';
|
||||
}
|
||||
|
||||
/* 范围类型切换 */
|
||||
function onRangeTypeChange(sel){
|
||||
var td=sel.closest('tr').querySelector('.custom-range-cell');
|
||||
if(sel.value==='custom'){
|
||||
td.innerHTML='<div style="display:flex;align-items:center;gap:8px;"><input class="form-input" type="date" style="min-width:140px;"><span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span><input class="form-input" type="date" style="min-width:140px;"></div>';
|
||||
}else{
|
||||
td.innerHTML='<span style="color:var(--text-secondary);font-size:var(--font-sm);">—</span>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,398 @@
|
||||
<!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;--font-xxl:24px;--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);}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.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-x:auto;}
|
||||
.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;min-width:1200px;}
|
||||
thead th{background:#FAFAFA;padding:10px 8px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:10px 8px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.amount{font-weight:600;color:var(--warning);}
|
||||
.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);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;}
|
||||
.modal-overlay.open{display:flex;align-items:center;justify-content:center;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:90vw;max-width:1400px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;}
|
||||
.modal__close:hover{color:var(--text-primary);}
|
||||
.modal__body{overflow-x:auto;overflow-y:auto;flex:1;padding:0;}
|
||||
.modal__body table{min-width:1300px;}
|
||||
.modal__body thead th,.modal__body tbody td{white-space:nowrap;padding:10px 8px;}
|
||||
.modal__footer{padding:12px 24px;border-top:1px solid var(--border);text-align:right;flex-shrink:0;}
|
||||
.tag-text{color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.tag-video{color:#722ED1;background:#F9F0FF;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.tag-status-done{color:var(--success);background:#F6FFED;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.tag-status-cancel{color:var(--text-secondary);background:#F5F5F5;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);}
|
||||
.star{color:var(--warning);}
|
||||
.sortable{cursor:pointer;user-select:none;}
|
||||
.sortable:hover{color:var(--primary);}
|
||||
.sort-icon{display:inline-flex;flex-direction:column;vertical-align:middle;margin-left:4px;line-height:1;gap:1px;}
|
||||
.sort-icon .up,.sort-icon .down{font-size:8px;color:#ccc;line-height:1;}
|
||||
.sortable.asc .sort-icon .up{color:var(--primary);}
|
||||
.sortable.desc .sort-icon .down{color:var(--primary);}
|
||||
</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">
|
||||
<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="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 active">
|
||||
<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="breadcrumb">
|
||||
<a href="settlement.html">咨询结算</a>
|
||||
<span>/</span>
|
||||
|
||||
|
||||
|
||||
<span>结算报表</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>专家编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家编号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家名称" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家医院</label>
|
||||
<select class="filter-select" style="min-width:200px;">
|
||||
<option>全部医院</option>
|
||||
<option>西安交通大学第一附属医院</option>
|
||||
<option>长庆油田职工医院</option>
|
||||
<option>陕西省人民医院</option>
|
||||
<option>西北妇女儿童医院</option>
|
||||
<option>庆阳市人民医院</option>
|
||||
</select>
|
||||
</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">专家结算明细 — 2026年3月专家咨询结算</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 42 位专家</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>专家编号</th>
|
||||
<th>专家姓名</th>
|
||||
<th>专家职称</th>
|
||||
<th>专家医院</th>
|
||||
<th>图文咨询单价(元)</th>
|
||||
<th>视频咨询单价(元)</th>
|
||||
<th class="sortable" data-col="6" onclick="toggleSort(this)">图文咨询次数<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th class="sortable" data-col="7" onclick="toggleSort(this)">视频咨询次数<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th class="sortable" data-col="8" onclick="toggleSort(this)">总咨询费(元)<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th class="sortable" data-col="9" onclick="toggleSort(this)">结算费(元)<span class="sort-icon"><span class="up">▲</span><span class="down">▼</span></span></th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>EXP-20250001</td>
|
||||
<td style="font-weight:500;">李医生</td>
|
||||
<td>主任医师</td>
|
||||
<td>西安交通大学第一附属医院</td>
|
||||
<td>50.00</td>
|
||||
<td>100.00</td>
|
||||
<td>52</td>
|
||||
<td>34</td>
|
||||
<td>6,000.00</td>
|
||||
<td><span class="amount">5,300.00</span></td>
|
||||
<td><span class="link" onclick="openDetail(this)">咨询详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EXP-20250002</td>
|
||||
<td style="font-weight:500;">王医生</td>
|
||||
<td>副主任医师</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>40.00</td>
|
||||
<td>80.00</td>
|
||||
<td>38</td>
|
||||
<td>24</td>
|
||||
<td>3,440.00</td>
|
||||
<td><span class="amount">3,440.00</span></td>
|
||||
<td><span class="link" onclick="openDetail(this)">咨询详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EXP-20250003</td>
|
||||
<td style="font-weight:500;">张医生</td>
|
||||
<td>主治医师</td>
|
||||
<td>陕西省人民医院</td>
|
||||
<td>40.00</td>
|
||||
<td>80.00</td>
|
||||
<td>30</td>
|
||||
<td>15</td>
|
||||
<td>2,400.00</td>
|
||||
<td><span class="amount">2,600.00</span></td>
|
||||
<td><span class="link" onclick="openDetail(this)">咨询详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EXP-20250004</td>
|
||||
<td style="font-weight:500;">陈医生</td>
|
||||
<td>主任医师</td>
|
||||
<td>西北妇女儿童医院</td>
|
||||
<td>50.00</td>
|
||||
<td>100.00</td>
|
||||
<td>25</td>
|
||||
<td>13</td>
|
||||
<td>2,550.00</td>
|
||||
<td><span class="amount">2,900.00</span></td>
|
||||
<td><span class="link" onclick="openDetail(this)">咨询详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EXP-20250005</td>
|
||||
<td style="font-weight:500;">孙医生</td>
|
||||
<td>住院医师</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>30.00</td>
|
||||
<td>60.00</td>
|
||||
<td>18</td>
|
||||
<td>10</td>
|
||||
<td>1,140.00</td>
|
||||
<td><span class="amount">1,140.00</span></td>
|
||||
<td><span class="link" onclick="openDetail(this)">咨询详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</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">4</button>
|
||||
<button class="page-btn">5</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-overlay" id="detailModal" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title" id="modalTitle">咨询详情 — 李医生</div>
|
||||
<button class="modal__close" onclick="closeDetail()">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ZX20260301001</td>
|
||||
<td>张三</td>
|
||||
<td>EMP001</td>
|
||||
<td>长庆油田</td>
|
||||
<td>采油一厂</td>
|
||||
<td><span class="tag-text">图文咨询</span></td>
|
||||
<td><span class="tag-status-done">已完成</span></td>
|
||||
<td>2026-03-01 09:15</td>
|
||||
<td>2026-03-01 09:22</td>
|
||||
<td>2026-03-01 09:45</td>
|
||||
<td>30分钟</td>
|
||||
<td><span class="star">★★★★★</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ZX20260302015</td>
|
||||
<td>李四</td>
|
||||
<td>EMP042</td>
|
||||
<td>长庆油田</td>
|
||||
<td>采油二厂</td>
|
||||
<td><span class="tag-video">视频咨询</span></td>
|
||||
<td><span class="tag-status-done">已完成</span></td>
|
||||
<td>2026-03-02 14:00</td>
|
||||
<td>2026-03-02 14:05</td>
|
||||
<td>2026-03-02 14:35</td>
|
||||
<td>35分钟</td>
|
||||
<td><span class="star">★★★★</span>☆</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ZX20260305008</td>
|
||||
<td>王五</td>
|
||||
<td>EMP078</td>
|
||||
<td>长庆油田</td>
|
||||
<td>机械制造公司</td>
|
||||
<td><span class="tag-text">图文咨询</span></td>
|
||||
<td><span class="tag-status-done">已完成</span></td>
|
||||
<td>2026-03-05 10:30</td>
|
||||
<td>2026-03-05 10:38</td>
|
||||
<td>2026-03-05 11:10</td>
|
||||
<td>40分钟</td>
|
||||
<td><span class="star">★★★★★</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ZX20260310022</td>
|
||||
<td>赵六</td>
|
||||
<td>EMP103</td>
|
||||
<td>长庆油田</td>
|
||||
<td>油气工艺研究院</td>
|
||||
<td><span class="tag-text">图文咨询</span></td>
|
||||
<td><span class="tag-status-done">已完成</span></td>
|
||||
<td>2026-03-10 08:50</td>
|
||||
<td>2026-03-10 09:00</td>
|
||||
<td>2026-03-10 09:25</td>
|
||||
<td>35分钟</td>
|
||||
<td><span class="star">★★★</span>☆☆</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ZX20260315036</td>
|
||||
<td>孙七</td>
|
||||
<td>EMP156</td>
|
||||
<td>长庆油田</td>
|
||||
<td>采气一厂</td>
|
||||
<td><span class="tag-video">视频咨询</span></td>
|
||||
<td><span class="tag-status-cancel">已取消</span></td>
|
||||
<td>2026-03-15 16:20</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var name=tr.querySelectorAll('td')[1].textContent.trim();
|
||||
document.getElementById('modalTitle').textContent='咨询详情 — '+name;
|
||||
document.getElementById('detailModal').classList.add('open');
|
||||
}
|
||||
function closeDetail(){
|
||||
document.getElementById('detailModal').classList.remove('open');
|
||||
}
|
||||
function toggleSort(th){
|
||||
var wasAsc=th.classList.contains('asc');
|
||||
document.querySelectorAll('.sortable').forEach(function(s){s.classList.remove('asc','desc');});
|
||||
th.classList.add(wasAsc?'desc':'asc');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -56,11 +56,20 @@
|
||||
.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-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
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);}
|
||||
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);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.col-fixed{position:sticky;z-index:2;background:#fff;}
|
||||
thead .col-fixed{background:#FAFAFA;z-index:3;}
|
||||
.col-fixed-1{left:0;min-width:60px;width:60px;}
|
||||
.col-fixed-2{left:60px;}
|
||||
.col-fixed-3{left:160px;}
|
||||
.col-fixed-end{right:0;min-width:120px;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;}
|
||||
.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-orange{background:#FFF7E6;color:var(--warning);}
|
||||
@@ -118,27 +127,26 @@
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option value="2026" selected>2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="">全部年份</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>结算周期</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>2026年4月</option>
|
||||
<option>2026年3月</option>
|
||||
<option>2026年2月</option>
|
||||
<option>2026年1月</option>
|
||||
<option>2025年12月</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>专家姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入专家姓名">
|
||||
<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>
|
||||
<option>已结算</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
@@ -146,13 +154,18 @@
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<!-- [交互] 点击生成本月结算报表 -->
|
||||
<button class="btn btn-success" style="margin-left:auto;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4.5 6.5L7 9l2.5-2.5M2 10v2h10v-2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
生成结算报表
|
||||
</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<!-- [交互] 点击新增结算，跳转到新增结算页面 -->
|
||||
<button class="btn btn-success" onclick="location.href='settlement-add.html'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
新增结算
|
||||
</button>
|
||||
<!-- [交互] 点击刷新列表 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7a4.5 4.5 0 0 1 8.3-2.4M11.5 7a4.5 4.5 0 0 1-8.3 2.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M10.8 2v2.6h-2.6M3.2 12v-2.6h2.6" 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"><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>
|
||||
@@ -163,140 +176,117 @@
|
||||
<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>
|
||||
</button>
|
||||
<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">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">结算明细列表（2026年4月）</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 42 位专家</div>
|
||||
<div class="table-card__title">结算列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 5 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>专家信息</th>
|
||||
<th>图文咨询次数</th>
|
||||
<th>图文单价</th>
|
||||
<th>视频咨询次数</th>
|
||||
<th>视频单价</th>
|
||||
<th>应结算金额</th>
|
||||
<th class="col-fixed col-fixed-1">序号</th>
|
||||
<th class="col-fixed col-fixed-2">结算名称</th>
|
||||
<th class="col-fixed col-fixed-3">结算开始月份</th>
|
||||
<th>结算结束月份</th>
|
||||
<th>结算状态</th>
|
||||
<th>结算时间</th>
|
||||
<th>操作</th>
|
||||
<th>创建时间</th>
|
||||
<th>结算开始时间</th>
|
||||
<th>结算结束时间</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">李</div>
|
||||
<div>
|
||||
<div class="expert-name">李医生</div>
|
||||
<div class="expert-dept">心血管内科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>312</td>
|
||||
<td>¥ 30</td>
|
||||
<td>86</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 16,240</span></td>
|
||||
<td class="col-fixed col-fixed-1">1</td>
|
||||
<td class="col-fixed col-fixed-2">2026年4月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-04</td>
|
||||
<td>2026-04</td>
|
||||
<td><span class="tag tag-orange">待结算</span></td>
|
||||
<td>2026-04-15 09:30</td>
|
||||
<td>—</td>
|
||||
<td>
|
||||
<td>—</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看明细</span>
|
||||
<!-- [交互] 点击标记为已结算 -->
|
||||
<span class="link" style="color:var(--success);">确认结算</span>
|
||||
<span class="link">开始结算</span>
|
||||
<span class="link" onclick="location.href='settlement-add.html?mode=edit&id=1'">编辑配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">王</div>
|
||||
<div>
|
||||
<div class="expert-name">王医生</div>
|
||||
<div class="expert-dept">内分泌科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>245</td>
|
||||
<td>¥ 30</td>
|
||||
<td>62</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 12,310</span></td>
|
||||
<td class="col-fixed col-fixed-1">2</td>
|
||||
<td class="col-fixed col-fixed-2">2026年3月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-03</td>
|
||||
<td>2026-03</td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-04-05</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">张</div>
|
||||
<div>
|
||||
<div class="expert-name">张医生</div>
|
||||
<div class="expert-dept">神经内科</div>
|
||||
</div>
|
||||
<td>2026-03-31 10:00</td>
|
||||
<td>2026-04-01 09:00</td>
|
||||
<td>2026-04-03 17:20</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='settlement-report.html?id=2'">查看报表</span>
|
||||
<span class="link" onclick="location.href='settlement-add.html?mode=view&id=2'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>198</td>
|
||||
<td>¥ 30</td>
|
||||
<td>45</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 9,540</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">3</td>
|
||||
<td class="col-fixed col-fixed-2">2026年2月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-02</td>
|
||||
<td>2026-02</td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-02-28 14:15</td>
|
||||
<td>2026-03-01 09:00</td>
|
||||
<td>2026-03-04 16:45</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='settlement-report.html?id=3'">查看报表</span>
|
||||
<span class="link" onclick="location.href='settlement-add.html?mode=view&id=3'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">4</td>
|
||||
<td class="col-fixed col-fixed-2">2026年1月专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2026-01</td>
|
||||
<td>2026-01</td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-01-31 11:00</td>
|
||||
<td>2026-02-01 09:00</td>
|
||||
<td>2026-02-03 15:30</td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='settlement-report.html?id=4'">查看报表</span>
|
||||
<span class="link" onclick="location.href='settlement-add.html?mode=view&id=4'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-fixed col-fixed-1">5</td>
|
||||
<td class="col-fixed col-fixed-2">2025年Q4专家咨询结算</td>
|
||||
<td class="col-fixed col-fixed-3">2025-10</td>
|
||||
<td>2025-12</td>
|
||||
<td><span class="tag tag-blue">结算中</span></td>
|
||||
<td>2025-12-31 16:00</td>
|
||||
<td>2026-01-02 09:00</td>
|
||||
<td>—</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">陈</div>
|
||||
<div>
|
||||
<div class="expert-name">陈医生</div>
|
||||
<div class="expert-dept">骨科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>156</td>
|
||||
<td>¥ 30</td>
|
||||
<td>18</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 6,120</span></td>
|
||||
<td><span class="tag tag-orange">待结算</span></td>
|
||||
<td>—</td>
|
||||
<td>
|
||||
<td class="col-fixed col-fixed-end">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看明细</span>
|
||||
<span class="link" style="color:var(--success);">确认结算</span>
|
||||
<span class="link" style="color:var(--text-secondary);opacity:0.5;cursor:not-allowed;">查看报表</span>
|
||||
<span class="link" onclick="location.href='settlement-add.html?mode=view&id=5'">查看配置</span>
|
||||
<span class="link" style="color:var(--danger);">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">孙</div>
|
||||
<div>
|
||||
<div class="expert-name">孙医生</div>
|
||||
<div class="expert-dept">消化内科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>89</td>
|
||||
<td>¥ 30</td>
|
||||
<td>12</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 3,630</span></td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-04-06</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
<!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:#fff;color:#333;}
|
||||
:root{--border:#E8E8E8;--text-secondary:#666;--font-xs:11px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.title{font-size:var(--font-base);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);background:#F5F5F5;color:#999;}
|
||||
.info-grid{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:3px;}
|
||||
.info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-value{font-size:var(--font-sm);font-weight:500;}
|
||||
.body{padding:32px 24px;text-align:center;}
|
||||
.status-icon{margin:0 auto 16px;}
|
||||
.status-title{font-size:var(--font-base);font-weight:500;margin-bottom:20px;}
|
||||
.reason-card{text-align:left;background:#F5F5F5;border:1px solid var(--border);border-radius:6px;padding:16px;margin-bottom:20px;}
|
||||
.reason-card__title{font-size:var(--font-sm);font-weight:500;color:#666;margin-bottom:8px;}
|
||||
.reason-card__text{font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
.suggest-card{text-align:left;background:#FAFAFA;border:1px solid var(--border);border-radius:6px;padding:16px;}
|
||||
.suggest-card__title{font-size:var(--font-sm);font-weight:500;margin-bottom:8px;}
|
||||
.suggest-card__text{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.7;}
|
||||
.timeline{margin-top:20px;text-align:left;border-top:1px solid var(--border);padding-top:20px;}
|
||||
.timeline-title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;}
|
||||
.timeline-item{display:flex;gap:12px;margin-bottom:12px;font-size:var(--font-sm);}
|
||||
.timeline-dot{width:8px;height:8px;border-radius:50%;background:#52C41A;margin-top:5px;flex-shrink:0;}
|
||||
.timeline-dot.cancel{background:#999;}
|
||||
.timeline-text{color:#333;}
|
||||
.timeline-time{color:var(--text-secondary);font-size:var(--font-xs);margin-top:2px;}
|
||||
/* 咨询人档案 */
|
||||
.archive-wrap{border:1px solid var(--border);border-radius:6px;margin-bottom:20px;overflow:hidden;}
|
||||
.archive-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:#FAFAFA;user-select:none;}
|
||||
.archive-toggle:hover{background:#F0F8FF;}
|
||||
.archive-toggle-title{font-size:var(--font-sm);font-weight:500;}
|
||||
.archive-toggle-arrow{font-size:12px;color:var(--text-secondary);transition:transform .2s;}
|
||||
.archive-toggle-arrow.open{transform:rotate(180deg);}
|
||||
.archive-body{display:none;}
|
||||
.archive-body.open{display:block;}
|
||||
.archive-section{border-top:1px solid var(--border);}
|
||||
.archive-section-title{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--font-xs);font-weight:500;color:#333;background:#fff;}
|
||||
.archive-section-title::before{content:'';width:3px;height:13px;background:#999;border-radius:2px;display:inline-block;}
|
||||
.archive-table{width:100%;border-collapse:collapse;}
|
||||
.archive-table td{padding:9px 16px;font-size:var(--font-sm);border-top:1px solid #F5F5F5;vertical-align:middle;}
|
||||
.archive-table td.lbl{color:#666;width:90px;white-space:nowrap;}
|
||||
.archive-table td.val{color:#333;}
|
||||
.archive-attach{display:flex;gap:10px;padding:10px 16px 14px;}
|
||||
.attach-card{width:88px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:500;cursor:pointer;}
|
||||
.attach-card.blue{background:#E6F7FF;color:#1890FF;}
|
||||
.attach-card.orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.archive-desc{padding:10px 16px 14px;font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">视频咨询详情</div>
|
||||
<span class="tag">已取消</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-label">员工姓名</div><div class="info-value">孙丽</div></div>
|
||||
<div class="info-item"><div class="info-label">咨询专家</div><div class="info-value">陈医生（副主任医师）</div></div>
|
||||
<div class="info-item"><div class="info-label">专家医院</div><div class="info-value">长庆医院</div></div>
|
||||
<div class="info-item"><div class="info-label">专家科室</div><div class="info-value">骨科</div></div>
|
||||
<div class="info-item"><div class="info-label">发起时间</div><div class="info-value">2026-04-07 08:20</div></div>
|
||||
<div class="info-item"><div class="info-label">预约时间</div><div class="info-value">2026-04-08 08:45</div></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
|
||||
<div class="reason-card">
|
||||
<div class="reason-card__title">取消人</div>
|
||||
<div class="reason-card__text">员工</div>
|
||||
<div class="reason-card__title">取消时间</div>
|
||||
<div class="reason-card__text">2026-04-07 08:45。</div>
|
||||
<div class="reason-card__title">取消原因</div>
|
||||
<div class="reason-card__text">员工主动取消预约</div>
|
||||
</div>
|
||||
|
||||
<div class="archive-wrap">
|
||||
<div class="archive-toggle" onclick="toggleArchive(this)">
|
||||
<span class="archive-toggle-title">咨询人信息</span>
|
||||
<span class="archive-toggle-arrow open">▼</span>
|
||||
</div>
|
||||
<div class="archive-body open">
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">基本信息</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">咨询人姓名</td><td class="val">孙丽母亲</td><td class="lbl">性别</td><td class="val">女</td></tr>
|
||||
<tr><td class="lbl">出生日期</td><td class="val">1962-09-30</td><td class="lbl">与本人关系</td><td class="val">母亲</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">生活习惯</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">是否抽烟</td><td class="val">否</td><td class="lbl">是否饮酒</td><td class="val">偶尔</td></tr>
|
||||
<tr><td class="lbl">饮食喜好</td><td class="val">清淡</td><td class="lbl">睡眠质量</td><td class="val">一般</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">身体情况</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">身高</td><td class="val">158cm</td><td class="lbl">体重</td><td class="val">60kg</td></tr>
|
||||
<tr><td class="lbl">过敏史</td><td class="val">无</td><td class="lbl">遗传史</td><td class="val">无</td></tr>
|
||||
<tr><td class="lbl">既往史</td><td class="val">骨质疏松</td><td class="lbl">其他疾病</td><td class="val">无</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">本次档案</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">问题描述</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</div></td></tr>
|
||||
<tr><td class="lbl">持续时间</td><td class="val" colspan="3"><span style="display:inline-block;margin:2px 0;padding:2px 10px;background:#F5F5F5;color:#666;border-radius:10px;font-size:var(--font-xs);">1-2周</span></td></tr>
|
||||
</table>
|
||||
<div style="padding:4px 16px 2px;font-size:var(--font-xs);color:var(--text-secondary);">检查资料</div>
|
||||
<div class="archive-attach">
|
||||
<div class="attach-card blue">检查报告</div>
|
||||
<div class="attach-card orange">患处照片</div>
|
||||
</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">医院名称</td><td class="val">北京协和医院</td><td class="lbl">科室</td><td class="val">骨科</td></tr>
|
||||
<tr><td class="lbl">疾病名称</td><td class="val" colspan="3">腰肌劳损</td></tr>
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">期望帮助</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</div></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function toggleArchive(el) {
|
||||
el.querySelector('.archive-toggle-arrow').classList.toggle('open');
|
||||
el.nextElementSibling.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,146 @@
|
||||
<!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:#fff;color:#333;}
|
||||
:root{--primary:#1890FF;--success:#52C41A;--border:#E8E8E8;--text-secondary:#666;--font-xs:11px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.title{font-size:var(--font-base);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);background:#F6FFED;color:var(--success);}
|
||||
.info-grid{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:3px;}
|
||||
.info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-value{font-size:var(--font-sm);font-weight:500;}
|
||||
.body{padding:24px;}
|
||||
.section-title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;}
|
||||
.summary-card{background:#F6FFED;border:1px solid #B7EB8F;border-radius:6px;padding:16px;margin-bottom:20px;}
|
||||
.summary-card p{font-size:var(--font-sm);color:#555;line-height:1.8;margin-bottom:6px;}
|
||||
.summary-card p:last-child{margin-bottom:0;}
|
||||
.summary-label{font-weight:500;color:#333;}
|
||||
.stats-row{display:flex;gap:16px;margin-bottom:20px;}
|
||||
.stat-item{flex:1;background:#FAFAFA;border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;}
|
||||
.stat-num{font-size:18px;font-weight:600;color:var(--primary);}
|
||||
.stat-label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;}
|
||||
.stars{color:#FAAD14;font-size:16px;letter-spacing:2px;}
|
||||
.timeline{border-top:1px solid var(--border);padding-top:20px;}
|
||||
.timeline-title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;}
|
||||
.timeline-item{display:flex;gap:12px;margin-bottom:12px;font-size:var(--font-sm);}
|
||||
.timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--success);margin-top:5px;flex-shrink:0;}
|
||||
.timeline-text{color:#333;}
|
||||
.timeline-time{color:var(--text-secondary);font-size:var(--font-xs);margin-top:2px;}
|
||||
/* 咨询人档案 */
|
||||
.archive-wrap{border:1px solid var(--border);border-radius:6px;margin-bottom:20px;overflow:hidden;}
|
||||
.archive-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:#FAFAFA;user-select:none;}
|
||||
.archive-toggle:hover{background:#F0F8FF;}
|
||||
.archive-toggle-title{font-size:var(--font-sm);font-weight:500;}
|
||||
.archive-toggle-arrow{font-size:12px;color:var(--text-secondary);transition:transform .2s;}
|
||||
.archive-toggle-arrow.open{transform:rotate(180deg);}
|
||||
.archive-body{display:none;}
|
||||
.archive-body.open{display:block;}
|
||||
.archive-section{border-top:1px solid var(--border);}
|
||||
.archive-section-title{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--font-xs);font-weight:500;color:#333;background:#fff;}
|
||||
.archive-section-title::before{content:'';width:3px;height:13px;background:var(--primary);border-radius:2px;display:inline-block;}
|
||||
.archive-table{width:100%;border-collapse:collapse;}
|
||||
.archive-table td{padding:9px 16px;font-size:var(--font-sm);border-top:1px solid #F5F5F5;vertical-align:middle;}
|
||||
.archive-table td.lbl{color:var(--primary);width:90px;white-space:nowrap;}
|
||||
.archive-table td.val{color:#333;}
|
||||
.archive-attach{display:flex;gap:10px;padding:10px 16px 14px;}
|
||||
.attach-card{width:88px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:500;cursor:pointer;}
|
||||
.attach-card.blue{background:#E6F7FF;color:var(--primary);}
|
||||
.attach-card.orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.archive-desc{padding:10px 16px 14px;font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
|
||||
.reason-card{text-align:left;background:#F6FFED;border:1px solid #52C41A;border-radius:6px;padding:16px;margin-bottom:20px;}
|
||||
.reason-card__title{font-size:var(--font-sm);font-weight:500;color:var(--danger);margin-bottom:8px;}
|
||||
.reason-card__text{font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">视频咨询详情</div>
|
||||
<span class="tag">已完成</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-label">员工姓名</div><div class="info-value">李明</div></div>
|
||||
<div class="info-item"><div class="info-label">咨询专家</div><div class="info-value">王医生（副主任医师）</div></div>
|
||||
<div class="info-item"><div class="info-label">专家医院</div><div class="info-value">长庆医院</div></div>
|
||||
<div class="info-item"><div class="info-label">专家科室</div><div class="info-value">内分泌科</div></div>
|
||||
<div class="info-item"><div class="info-label">发起时间</div><div class="info-value">2026-04-09 10:30</div></div>
|
||||
<div class="info-item"><div class="info-label">预约时间</div><div class="info-value">2026-04-09 11:15</div></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="stats-row">
|
||||
<div class="stat-item"><div class="stat-num">45分钟</div><div class="stat-label">咨询时长</div></div>
|
||||
<div class="stat-item"><div class="stat-num stars">★★★★☆</div><div class="stat-label">员工评分</div></div>
|
||||
</div>
|
||||
|
||||
<div class="reason-card">
|
||||
<div class="reason-card__title">拨打时间</div>
|
||||
<div class="reason-card__text">2026-04-08 16:40</div>
|
||||
<div class="reason-card__title">结束时间</div>
|
||||
<div class="reason-card__text">2026-04-08 16:40</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="archive-wrap">
|
||||
<div class="archive-toggle" onclick="toggleArchive(this)">
|
||||
<span class="archive-toggle-title">咨询人信息</span>
|
||||
<!-- <span class="archive-toggle-arrow open">▼</span>-->
|
||||
</div>
|
||||
<div class="archive-body open">
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">基本信息</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">咨询人姓名</td><td class="val">李明父亲</td><td class="lbl">性别</td><td class="val">男</td></tr>
|
||||
<tr><td class="lbl">出生日期</td><td class="val">1958-06-12</td><td class="lbl">与本人关系</td><td class="val">父亲</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">生活习惯</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">是否抽烟</td><td class="val">否</td><td class="lbl">是否饮酒</td><td class="val">偶尔</td></tr>
|
||||
<tr><td class="lbl">饮食喜好</td><td class="val">清淡</td><td class="lbl">睡眠质量</td><td class="val">一般</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">身体情况</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">身高</td><td class="val">172cm</td><td class="lbl">体重</td><td class="val">68kg</td></tr>
|
||||
<tr><td class="lbl">过敏史</td><td class="val">无</td><td class="lbl">遗传史</td><td class="val">糖尿病家族史</td></tr>
|
||||
<tr><td class="lbl">既往史</td><td class="val">无</td><td class="lbl">其他疾病</td><td class="val">无</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">本次档案</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">问题描述</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</div></td></tr>
|
||||
<tr><td class="lbl">持续时间</td><td class="val" colspan="3"><span style="display:inline-block;margin:2px 0;padding:2px 10px;background:#E6F7FF;color:var(--primary);border-radius:10px;font-size:var(--font-xs);">1-2周</span></td></tr>
|
||||
</table>
|
||||
<div style="padding:4px 16px 2px;font-size:var(--font-xs);color:var(--text-secondary);">检查资料</div>
|
||||
<div class="archive-attach">
|
||||
<div class="attach-card blue">检查报告</div>
|
||||
<div class="attach-card orange">患处照片</div>
|
||||
</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">医院名称</td><td class="val">北京协和医院</td><td class="lbl">科室</td><td class="val">骨科</td></tr>
|
||||
<tr><td class="lbl">疾病名称</td><td class="val" colspan="3">腰肌劳损</td></tr>
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">期望帮助</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</div></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function toggleArchive(el) {
|
||||
el.querySelector('.archive-toggle-arrow').classList.toggle('open');
|
||||
el.nextElementSibling.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!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:#fff;color:#333;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--warning:#FAAD14;--border:#E8E8E8;--text-secondary:#666;--font-xs:11px;--font-sm:13px;--font-base:15px;--radius-sm:4px;--radius-md:8px;}
|
||||
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.title{font-size:var(--font-base);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);background:#FFF7E6;color:var(--warning);}
|
||||
.info-grid{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:3px;}
|
||||
.info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-value{font-size:var(--font-sm);font-weight:500;}
|
||||
.body{padding:32px 24px;text-align:center;}
|
||||
.status-icon{margin:0 auto 16px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
|
||||
.status-title{font-size:var(--font-base);font-weight:500;margin-bottom:8px;}
|
||||
.status-desc{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.7;}
|
||||
.timeline{margin-top:24px;text-align:left;border-top:1px solid var(--border);padding-top:20px;}
|
||||
.timeline-title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;}
|
||||
.timeline-item{display:flex;gap:12px;margin-bottom:12px;font-size:var(--font-sm);}
|
||||
.timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--warning);margin-top:5px;flex-shrink:0;}
|
||||
.timeline-dot.done{background:#52C41A;}
|
||||
.timeline-text{color:#333;}
|
||||
.timeline-time{color:var(--text-secondary);font-size:var(--font-xs);margin-top:2px;}
|
||||
|
||||
.info-card{margin-top:0px;text-align:left;background:#F0F8FF;border:1px solid #BAE0FF;border-radius:6px;padding:16px;}
|
||||
.info-card__title{font-size:var(--font-sm);font-weight:500;color:var(--primary);margin-bottom:10px;}
|
||||
.info-card__row{display:flex;justify-content:space-between;font-size:var(--font-sm);margin-bottom:6px;}
|
||||
.info-card__row:last-child{margin-bottom:0;}
|
||||
.info-card__label{color:var(--text-secondary);}
|
||||
|
||||
/* 咨询人档案 */
|
||||
.archive-wrap{border:1px solid var(--border);border-radius:6px;margin-bottom:20px;overflow:hidden;}
|
||||
.archive-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:#FAFAFA;user-select:none;}
|
||||
.archive-toggle:hover{background:#F0F8FF;}
|
||||
.archive-toggle-title{font-size:var(--font-sm);font-weight:500;}
|
||||
.archive-toggle-arrow{font-size:12px;color:var(--text-secondary);transition:transform .2s;}
|
||||
.archive-toggle-arrow.open{transform:rotate(180deg);}
|
||||
.archive-body{display:none;}
|
||||
.archive-body.open{display:block;}
|
||||
.archive-section{border-top:1px solid var(--border);}
|
||||
.archive-section-title{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--font-xs);font-weight:500;color:#333;background:#fff;}
|
||||
.archive-section-title::before{content:'';width:3px;height:13px;background:var(--primary);border-radius:2px;display:inline-block;}
|
||||
.archive-table{width:100%;border-collapse:collapse;}
|
||||
.archive-table td{padding:9px 16px;font-size:var(--font-sm);border-top:1px solid #F5F5F5;vertical-align:middle;}
|
||||
.archive-table td.lbl{color:var(--primary);width:90px;white-space:nowrap;}
|
||||
.archive-table td.val{color:#333;}
|
||||
.archive-attach{display:flex;gap:10px;padding:10px 16px 14px;}
|
||||
.attach-card{width:88px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:500;cursor:pointer;}
|
||||
.attach-card.blue{background:#E6F7FF;color:var(--primary);}
|
||||
.attach-card.orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.archive-desc{padding:10px 16px 14px;font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">视频咨询详情</div>
|
||||
<span class="tag">待确认</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-label">员工姓名</div><div class="info-value">吴娟</div></div>
|
||||
<div class="info-item"><div class="info-label">咨询专家</div><div class="info-value">王医生（副主任医师）</div></div>
|
||||
<div class="info-item"><div class="info-label">专家医院</div><div class="info-value">长庆医院</div></div>
|
||||
<div class="info-item"><div class="info-label">专家科室</div><div class="info-value">内分泌科</div></div>
|
||||
<div class="info-item"><div class="info-label">发起时间</div><div class="info-value">2026-04-09 15:10</div></div>
|
||||
<div class="info-item"><div class="info-label">预约时间</div><div class="info-value">2026-04-10 15:10</div></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
|
||||
|
||||
<div class="archive-wrap">
|
||||
<div class="archive-toggle" onclick="toggleArchive(this)">
|
||||
<span class="archive-toggle-title">咨询人信息</span>
|
||||
|
||||
</div>
|
||||
<div class="archive-body open">
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">基本信息</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">咨询人姓名</td><td class="val">吴娟本人</td><td class="lbl">性别</td><td class="val">女</td></tr>
|
||||
<tr><td class="lbl">出生日期</td><td class="val">1990-03-22</td><td class="lbl">与本人关系</td><td class="val">本人</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">生活习惯</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">是否抽烟</td><td class="val">否</td><td class="lbl">是否饮酒</td><td class="val">否</td></tr>
|
||||
<tr><td class="lbl">饮食喜好</td><td class="val">均衡</td><td class="lbl">睡眠质量</td><td class="val">良好</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">身体情况</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">身高</td><td class="val">163cm</td><td class="lbl">体重</td><td class="val">55kg</td></tr>
|
||||
<tr><td class="lbl">过敏史</td><td class="val">无</td><td class="lbl">遗传史</td><td class="val">无</td></tr>
|
||||
<tr><td class="lbl">既往史</td><td class="val">无</td><td class="lbl">其他疾病</td><td class="val">无</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">本次档案</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">问题描述</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</div></td></tr>
|
||||
<tr><td class="lbl">持续时间</td><td class="val" colspan="3"><span style="display:inline-block;margin:2px 0;padding:2px 10px;background:#E6F7FF;color:var(--primary);border-radius:10px;font-size:var(--font-xs);">1-2周</span></td></tr>
|
||||
</table>
|
||||
<div style="padding:4px 16px 2px;font-size:var(--font-xs);color:var(--text-secondary);">检查资料</div>
|
||||
<div class="archive-attach">
|
||||
<div class="attach-card blue">检查报告</div>
|
||||
<div class="attach-card orange">患处照片</div>
|
||||
</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">医院名称</td><td class="val">北京协和医院</td><td class="lbl">科室</td><td class="val">骨科</td></tr>
|
||||
<tr><td class="lbl">疾病名称</td><td class="val" colspan="3">腰肌劳损</td></tr>
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">期望帮助</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</div></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function toggleArchive(el) {
|
||||
el.querySelector('.archive-toggle-arrow').classList.toggle('open');
|
||||
el.nextElementSibling.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!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:#fff;color:#333;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--border:#E8E8E8;--text-secondary:#666;--font-xs:11px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.title{font-size:var(--font-base);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);background:var(--primary-light);color:var(--primary);}
|
||||
.info-grid{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:3px;}
|
||||
.info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-value{font-size:var(--font-sm);font-weight:500;}
|
||||
.body{padding:32px 24px;text-align:center;}
|
||||
.status-icon{margin:0 auto 16px;}
|
||||
.status-title{font-size:var(--font-base);font-weight:500;margin-bottom:8px;}
|
||||
.status-desc{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.7;}
|
||||
.info-card{margin-top:24px;text-align:left;background:#F0F8FF;border:1px solid #BAE0FF;border-radius:6px;padding:16px;}
|
||||
.info-card__title{font-size:var(--font-sm);font-weight:500;color:var(--primary);margin-bottom:10px;}
|
||||
.info-card__row{display:flex;justify-content:space-between;font-size:var(--font-sm);margin-bottom:6px;}
|
||||
.info-card__row:last-child{margin-bottom:0;}
|
||||
.info-card__label{color:var(--text-secondary);}
|
||||
.timeline{margin-top:20px;text-align:left;border-top:1px solid var(--border);padding-top:20px;}
|
||||
.timeline-title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;}
|
||||
.timeline-item{display:flex;gap:12px;margin-bottom:12px;font-size:var(--font-sm);}
|
||||
.timeline-dot{width:8px;height:8px;border-radius:50%;background:#52C41A;margin-top:5px;flex-shrink:0;}
|
||||
.timeline-dot.pending{background:var(--primary);}
|
||||
.timeline-dot.todo{background:#E8E8E8;}
|
||||
.timeline-text{color:#333;}
|
||||
.timeline-time{color:var(--text-secondary);font-size:var(--font-xs);margin-top:2px;}
|
||||
/* 咨询人档案 */
|
||||
.archive-wrap{border:1px solid var(--border);border-radius:6px;margin-bottom:20px;overflow:hidden;}
|
||||
.archive-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:#FAFAFA;user-select:none;}
|
||||
.archive-toggle:hover{background:#F0F8FF;}
|
||||
.archive-toggle-title{font-size:var(--font-sm);font-weight:500;}
|
||||
.archive-toggle-arrow{font-size:12px;color:var(--text-secondary);transition:transform .2s;}
|
||||
.archive-toggle-arrow.open{transform:rotate(180deg);}
|
||||
.archive-body{display:none;}
|
||||
.archive-body.open{display:block;}
|
||||
.archive-section{border-top:1px solid var(--border);}
|
||||
.archive-section-title{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--font-xs);font-weight:500;color:#333;background:#fff;}
|
||||
.archive-section-title::before{content:'';width:3px;height:13px;background:var(--primary);border-radius:2px;display:inline-block;}
|
||||
.archive-table{width:100%;border-collapse:collapse;}
|
||||
.archive-table td{padding:9px 16px;font-size:var(--font-sm);border-top:1px solid #F5F5F5;vertical-align:middle;}
|
||||
.archive-table td.lbl{color:var(--primary);width:90px;white-space:nowrap;}
|
||||
.archive-table td.val{color:#333;}
|
||||
.archive-attach{display:flex;gap:10px;padding:10px 16px 14px;}
|
||||
.attach-card{width:88px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:500;cursor:pointer;}
|
||||
.attach-card.blue{background:#E6F7FF;color:var(--primary);}
|
||||
.attach-card.orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.archive-desc{padding:10px 16px 14px;font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">视频咨询详情</div>
|
||||
<span class="tag">待开始</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-label">员工姓名</div><div class="info-value">何军</div></div>
|
||||
<div class="info-item"><div class="info-label">咨询专家</div><div class="info-value">张医生（主治医师）</div></div>
|
||||
<div class="info-item"><div class="info-label">专家医院</div><div class="info-value">长庆医院</div></div>
|
||||
<div class="info-item"><div class="info-label">专家科室</div><div class="info-value">神经内科</div></div>
|
||||
<div class="info-item"><div class="info-label">发起时间</div><div class="info-value">2026-04-09 16:00</div></div>
|
||||
<div class="info-item"><div class="info-label">预约时间</div><div class="info-value">2026-04-10 15:10</div></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
|
||||
|
||||
<div class="archive-wrap">
|
||||
<div class="archive-toggle" onclick="toggleArchive(this)">
|
||||
<span class="archive-toggle-title">咨询人信息</span>
|
||||
</div>
|
||||
<div class="archive-body open">
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">基本信息</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">咨询人姓名</td><td class="val">何军本人</td><td class="lbl">性别</td><td class="val">男</td></tr>
|
||||
<tr><td class="lbl">出生日期</td><td class="val">1985-11-08</td><td class="lbl">与本人关系</td><td class="val">本人</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">生活习惯</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">是否抽烟</td><td class="val">偶尔</td><td class="lbl">是否饮酒</td><td class="val">偶尔</td></tr>
|
||||
<tr><td class="lbl">饮食喜好</td><td class="val">偏咸</td><td class="lbl">睡眠质量</td><td class="val">一般</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">身体情况</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">身高</td><td class="val">178cm</td><td class="lbl">体重</td><td class="val">80kg</td></tr>
|
||||
<tr><td class="lbl">过敏史</td><td class="val">无</td><td class="lbl">遗传史</td><td class="val">高血压家族史</td></tr>
|
||||
<tr><td class="lbl">既往史</td><td class="val">无</td><td class="lbl">其他疾病</td><td class="val">无</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">本次档案</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">问题描述</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</div></td></tr>
|
||||
<tr><td class="lbl">持续时间</td><td class="val" colspan="3"><span style="display:inline-block;margin:2px 0;padding:2px 10px;background:#E6F7FF;color:var(--primary);border-radius:10px;font-size:var(--font-xs);">1-2周</span></td></tr>
|
||||
</table>
|
||||
<div style="padding:4px 16px 2px;font-size:var(--font-xs);color:var(--text-secondary);">检查资料</div>
|
||||
<div class="archive-attach">
|
||||
<div class="attach-card blue">检查报告</div>
|
||||
<div class="attach-card orange">患处照片</div>
|
||||
</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">医院名称</td><td class="val">北京协和医院</td><td class="lbl">科室</td><td class="val">骨科</td></tr>
|
||||
<tr><td class="lbl">疾病名称</td><td class="val" colspan="3">腰肌劳损</td></tr>
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">期望帮助</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</div></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function toggleArchive(el) {
|
||||
el.querySelector('.archive-toggle-arrow').classList.toggle('open');
|
||||
el.nextElementSibling.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,134 @@
|
||||
<!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:#fff;color:#333;}
|
||||
:root{--danger:#FF4D4F;--border:#E8E8E8;--text-secondary:#666;--font-xs:11px;--font-sm:13px;--font-base:15px;--radius-sm:4px;}
|
||||
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.title{font-size:var(--font-base);font-weight:600;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:10px;font-size:var(--font-xs);background:#FFF1F0;color:var(--danger);}
|
||||
.info-grid{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:3px;}
|
||||
.info-label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-value{font-size:var(--font-sm);font-weight:500;}
|
||||
.body{padding:32px 24px;text-align:center;}
|
||||
.status-icon{margin:0 auto 16px;}
|
||||
.status-title{font-size:var(--font-base);font-weight:500;margin-bottom:20px;}
|
||||
.reason-card{text-align:left;background:#FFF2F0;border:1px solid #FFCCC7;border-radius:6px;padding:16px;margin-bottom:20px;}
|
||||
.reason-card__title{font-size:var(--font-sm);font-weight:500;color:var(--danger);margin-bottom:8px;}
|
||||
.reason-card__text{font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
.suggest-card{text-align:left;background:#FAFAFA;border:1px solid var(--border);border-radius:6px;padding:16px;}
|
||||
.suggest-card__title{font-size:var(--font-sm);font-weight:500;margin-bottom:8px;}
|
||||
.suggest-card__text{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.7;}
|
||||
.timeline{margin-top:20px;text-align:left;border-top:1px solid var(--border);padding-top:20px;}
|
||||
.timeline-title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;}
|
||||
.timeline-item{display:flex;gap:12px;margin-bottom:12px;font-size:var(--font-sm);}
|
||||
.timeline-dot{width:8px;height:8px;border-radius:50%;background:#52C41A;margin-top:5px;flex-shrink:0;}
|
||||
.timeline-dot.reject{background:var(--danger);}
|
||||
.timeline-text{color:#333;}
|
||||
.timeline-time{color:var(--text-secondary);font-size:var(--font-xs);margin-top:2px;}
|
||||
/* 咨询人档案 */
|
||||
.archive-wrap{border:1px solid var(--border);border-radius:6px;margin-bottom:20px;overflow:hidden;}
|
||||
.archive-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:#FAFAFA;user-select:none;}
|
||||
.archive-toggle:hover{background:#F0F8FF;}
|
||||
.archive-toggle-title{font-size:var(--font-sm);font-weight:500;}
|
||||
.archive-toggle-arrow{font-size:12px;color:var(--text-secondary);transition:transform .2s;}
|
||||
.archive-toggle-arrow.open{transform:rotate(180deg);}
|
||||
.archive-body{display:none;}
|
||||
.archive-body.open{display:block;}
|
||||
.archive-section{border-top:1px solid var(--border);}
|
||||
.archive-section-title{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--font-xs);font-weight:500;color:#333;background:#fff;}
|
||||
.archive-section-title::before{content:'';width:3px;height:13px;background:#FF4D4F;border-radius:2px;display:inline-block;}
|
||||
.archive-table{width:100%;border-collapse:collapse;}
|
||||
.archive-table td{padding:9px 16px;font-size:var(--font-sm);border-top:1px solid #F5F5F5;vertical-align:middle;}
|
||||
.archive-table td.lbl{color:var(--danger);width:90px;white-space:nowrap;}
|
||||
.archive-table td.val{color:#333;}
|
||||
.archive-attach{display:flex;gap:10px;padding:10px 16px 14px;}
|
||||
.attach-card{width:88px;height:64px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:500;cursor:pointer;}
|
||||
.attach-card.blue{background:#E6F7FF;color:#1890FF;}
|
||||
.attach-card.orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.archive-desc{padding:10px 16px 14px;font-size:var(--font-sm);color:#555;line-height:1.7;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">视频咨询详情</div>
|
||||
<span class="tag">已拒绝</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-label">员工姓名</div><div class="info-value">赵静</div></div>
|
||||
<div class="info-item"><div class="info-label">咨询专家</div><div class="info-value">孙医生（主任医师）</div></div>
|
||||
<div class="info-item"><div class="info-label">专家医院</div><div class="info-value">长庆医院</div></div>
|
||||
<div class="info-item"><div class="info-label">专家科室</div><div class="info-value">消化内科</div></div>
|
||||
<div class="info-item"><div class="info-label">发起时间</div><div class="info-value">2026-04-08 16:40</div></div>
|
||||
<div class="info-item"><div class="info-label">预约时间</div><div class="info-value">2026-04-08 16:42</div></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
|
||||
<div class="reason-card">
|
||||
<div class="reason-card__title">拒绝时间</div>
|
||||
<div class="reason-card__text">2026-04-08 16:40</div>
|
||||
<div class="reason-card__title">拒绝原因</div>
|
||||
<div class="reason-card__text">专家当前日程已满，无法在该时间段接诊，建议重新选择其他专家或调整预约时间。</div>
|
||||
</div>
|
||||
|
||||
<div class="archive-wrap">
|
||||
<div class="archive-toggle" onclick="toggleArchive(this)">
|
||||
<span class="archive-toggle-title">咨询人信息</span>
|
||||
</div>
|
||||
<div class="archive-body open">
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">基本信息</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">咨询人姓名</td><td class="val">赵静本人</td><td class="lbl">性别</td><td class="val">女</td></tr>
|
||||
<tr><td class="lbl">出生日期</td><td class="val">1992-07-15</td><td class="lbl">与本人关系</td><td class="val">本人</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">生活习惯</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">是否抽烟</td><td class="val">否</td><td class="lbl">是否饮酒</td><td class="val">否</td></tr>
|
||||
<tr><td class="lbl">饮食喜好</td><td class="val">清淡</td><td class="lbl">睡眠质量</td><td class="val">良好</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">身体情况</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">身高</td><td class="val">160cm</td><td class="lbl">体重</td><td class="val">52kg</td></tr>
|
||||
<tr><td class="lbl">过敏史</td><td class="val">无</td><td class="lbl">遗传史</td><td class="val">无</td></tr>
|
||||
<tr><td class="lbl">既往史</td><td class="val">无</td><td class="lbl">其他疾病</td><td class="val">无</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="archive-section">
|
||||
<div class="archive-section-title">本次档案</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">问题描述</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">久坐后腰部持续酸痛，弯腰时加重，近两周症状明显，影响日常工作和休息。</div></td></tr>
|
||||
<tr><td class="lbl">持续时间</td><td class="val" colspan="3"><span style="display:inline-block;margin:2px 0;padding:2px 10px;background:#E6F7FF;color:#1890FF;border-radius:10px;font-size:var(--font-xs);">1-2周</span></td></tr>
|
||||
</table>
|
||||
<div style="padding:4px 16px 2px;font-size:var(--font-xs);color:var(--text-secondary);">检查资料</div>
|
||||
<div class="archive-attach">
|
||||
<div class="attach-card blue">检查报告</div>
|
||||
<div class="attach-card orange">患处照片</div>
|
||||
</div>
|
||||
<table class="archive-table">
|
||||
<tr><td class="lbl">医院名称</td><td class="val">北京协和医院</td><td class="lbl">科室</td><td class="val">骨科</td></tr>
|
||||
<tr><td class="lbl">疾病名称</td><td class="val" colspan="3">腰肌劳损</td></tr>
|
||||
<tr><td class="lbl" style="vertical-align:top;padding-top:12px;">期望帮助</td><td class="val" colspan="3"><div class="archive-desc" style="padding:12px 0 4px;">希望了解腰部疼痛的具体病因，是否需要进一步检查，以及日常缓解和治疗方案建议。</div></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function toggleArchive(el) {
|
||||
el.querySelector('.archive-toggle-arrow').classList.toggle('open');
|
||||
el.nextElementSibling.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user