feat: 应急就医模块新增工单/大病就医表单页，重构多角色导航与详情页交互
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"chrome-devtools": {
|
||||
"command": "npx",
|
||||
"args": ["chrome-devtools-mcp@latest"]
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 49 KiB |
@@ -86,7 +86,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">图文待回复</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">视频进行中</div></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">视频待确认</div></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@@ -103,6 +103,20 @@
|
||||
background: linear-gradient(135deg, #e8f4ff, #bdd7ff);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24px; flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.pause-badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
background: #fff1f0;
|
||||
border: 1px solid #ffccc7;
|
||||
color: #ff4d4f;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.expert-info { flex: 1; }
|
||||
.expert-info .name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
@@ -223,7 +237,7 @@
|
||||
|
||||
<!-- [交互] 专家卡片3：王志远，点击跳转专家详情页 -->
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html?from=index'">
|
||||
<div class="expert-avatar">👨⚕️</div>
|
||||
<div class="expert-avatar">👨⚕️<span class="pause-badge">暂停服务</span></div>
|
||||
<div class="expert-info">
|
||||
<div class="name">王志远 <span style="font-size:12px;font-weight:400;color:#666;">主任医师</span></div>
|
||||
<div class="dept">广州中山医院 · 骨科</div>
|
||||
@@ -237,8 +251,7 @@
|
||||
<div class="rating">⭐ 4.9</div>
|
||||
<div class="count">咨询 3,105次</div>
|
||||
<div class="reply">回复率 97%</div>
|
||||
<!-- [交互] 咨询按钮 -->
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html?from=index'">咨询</button>
|
||||
<button class="consult-btn" style="background:#d9d9d9;color:#fff;cursor:not-allowed;" disabled>咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -151,57 +151,58 @@
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">西安应急中心</td>
|
||||
<td class="link" href="#">12</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">350</td>
|
||||
<td class="link" href="#">280</td>
|
||||
<td class="link" href="#">630</td>
|
||||
<td class="link" href="#">580</td>
|
||||
<td class="link" href="#">50</td>
|
||||
<td >12</td>
|
||||
<td >8</td>
|
||||
<td >350</td>
|
||||
<td >280</td>
|
||||
<td >630</td>
|
||||
<td >580</td>
|
||||
<td >50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">庆阳应急中心</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
<td>8</td>
|
||||
<td>5</td>
|
||||
<td >200</td>
|
||||
<td>160</td>
|
||||
<td>360</td>
|
||||
<td>330</td>
|
||||
<td >30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">延安应急中心</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
<!-- <td class="link" href="#">8</td>-->
|
||||
<td>8</td>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
<td >200</td>
|
||||
<td>160</td>
|
||||
<td>360</td>
|
||||
<td>330</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">榆林应急中心</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
<td>8</td>
|
||||
<td>5</td>
|
||||
<td >200</td>
|
||||
<td>160</td>
|
||||
<td>360</td>
|
||||
<td>330</td>
|
||||
<td >30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">银川应急中心</td>
|
||||
<td class="link" href="#">8</td>
|
||||
<td class="link" href="#">5</td>
|
||||
<td class="link" href="#">200</td>
|
||||
<td class="link" href="#">160</td>
|
||||
<td class="link" href="#">360</td>
|
||||
<td class="link" href="#">330</td>
|
||||
<td class="link" href="#">30</td>
|
||||
<td>8</td>
|
||||
<td>5</td>
|
||||
<td >200</td>
|
||||
<td>160</td>
|
||||
<td>360</td>
|
||||
<td>330</td>
|
||||
<td >30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -0,0 +1,391 @@
|
||||
<!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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--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;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back-nav{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back-nav: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;letter-spacing:.5px;}
|
||||
.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:8px;margin-bottom:16px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb .sep{color:var(--text-placeholder);}
|
||||
.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);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.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:140px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.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);}
|
||||
.detail-title{font-size:var(--font-lg);font-weight:600;margin-bottom:4px;}
|
||||
.detail-meta{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
</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="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back-nav" 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>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<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"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" 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="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
<a href="archive-center.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><path d="M6 14v-4h4v4" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
应急中心报表数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="sep">/</span>
|
||||
<span>公司机关</span>
|
||||
<span class="sep">/</span>
|
||||
<span>大病就医预约</span>
|
||||
</div>
|
||||
<div class="detail-title">公司机关 — 大病就医预约详情</div>
|
||||
<div class="detail-meta">2026年 · 总人数 1,000</div>
|
||||
|
||||
<!-- [交互] Tab 切换次数 / 人数 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('times',this)">次数（30次）</div>
|
||||
<div class="tab-item" onclick="switchTab('people',this)">人数（28人）</div>
|
||||
</div>
|
||||
|
||||
<!-- 次数面板 — 表头参考 center-serious-illness.html -->
|
||||
<div class="tab-panel active" id="panel-times">
|
||||
<div class="filter-bar">
|
||||
<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">查询</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>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">大病就医预约列表（按次数）</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 30 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>就医员工</th>
|
||||
<th>员工编号</th>
|
||||
<th>员工部门</th>
|
||||
<th>预约医院</th>
|
||||
<th>挂号类别</th>
|
||||
<th>预约科室</th>
|
||||
<th>预约医生</th>
|
||||
<th>期望预约时间</th>
|
||||
<th>驻场人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>完成时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">张丽华-女-45</td>
|
||||
<td>EMP20220089</td>
|
||||
<td>综合管理部</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>普通号</td>
|
||||
<td>神经内科</td>
|
||||
<td>赵国强</td>
|
||||
<td>2026-04-12 14:20</td>
|
||||
<td>赵文博</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-04-11 09:32:47</td>
|
||||
<td>2026-04-13 10:15:22</td>
|
||||
<td><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">李明辉-男-50</td>
|
||||
<td>EMP20210178</td>
|
||||
<td>安全环保部</td>
|
||||
<td>西安交大一附院</td>
|
||||
<td>专家号</td>
|
||||
<td>心内科</td>
|
||||
<td>张明远</td>
|
||||
<td>2026-03-28 09:30</td>
|
||||
<td>李晓明</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>2026-03-26 16:05:18</td>
|
||||
<td>—</td>
|
||||
<td><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">王秀兰-女-55</td>
|
||||
<td>EMP20200234</td>
|
||||
<td>财务部</td>
|
||||
<td>北京协和医院</td>
|
||||
<td>专家号</td>
|
||||
<td>肿瘤科</td>
|
||||
<td>王海涛</td>
|
||||
<td>2026-03-20 08:45</td>
|
||||
<td>王晓峰</td>
|
||||
<td><span class="tag tag-orange">待确认</span></td>
|
||||
<td>2026-03-18 14:50:33</td>
|
||||
<td>—</td>
|
||||
<td><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">赵德明-男-49</td>
|
||||
<td>EMP20200312</td>
|
||||
<td>人力资源部</td>
|
||||
<td>兰州大学第一医院</td>
|
||||
<td>急诊号</td>
|
||||
<td>骨科</td>
|
||||
<td>孙立平</td>
|
||||
<td>2026-03-15 11:05</td>
|
||||
<td>孙伟</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-03-14 22:18:05</td>
|
||||
<td>2026-03-17 09:15:33</td>
|
||||
<td><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">张丽华-女-45</td>
|
||||
<td>EMP20220089</td>
|
||||
<td>综合管理部</td>
|
||||
<td>西安交大二附院</td>
|
||||
<td>普通号</td>
|
||||
<td>消化内科</td>
|
||||
<td>刘文杰</td>
|
||||
<td>2026-02-20 16:30</td>
|
||||
<td>赵文博</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>2026-02-18 10:25:41</td>
|
||||
<td>2026-02-22 11:08:22</td>
|
||||
<td><a class="link" href="center-serious-illness-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 30 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人数面板 -->
|
||||
<div class="tab-panel" id="panel-people">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<option>人力资源部</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</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>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">大病就医预约人员列表（按人数）</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 28 条</span>
|
||||
</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>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">张丽华-女-45</td>
|
||||
<td>EMP20220089</td>
|
||||
<td>综合管理部</td>
|
||||
<td>2</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>神经内科</td>
|
||||
<td>2026-04-12 14:20</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">李明辉-男-50</td>
|
||||
<td>EMP20210178</td>
|
||||
<td>安全环保部</td>
|
||||
<td>1</td>
|
||||
<td>西安交大一附院</td>
|
||||
<td>心内科</td>
|
||||
<td>2026-03-28 09:30</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">王秀兰-女-55</td>
|
||||
<td>EMP20200234</td>
|
||||
<td>财务部</td>
|
||||
<td>1</td>
|
||||
<td>北京协和医院</td>
|
||||
<td>肿瘤科</td>
|
||||
<td>2026-03-20 08:45</td>
|
||||
<td><span class="tag tag-orange">待确认</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">赵德明-男-49</td>
|
||||
<td>EMP20200312</td>
|
||||
<td>人力资源部</td>
|
||||
<td>1</td>
|
||||
<td>兰州大学第一医院</td>
|
||||
<td>骨科</td>
|
||||
<td>2026-03-15 11:05</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function switchTab(key, el) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t){t.classList.remove('active');});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p){p.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-'+key).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,410 @@
|
||||
<!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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--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;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.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:#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;letter-spacing:.5px;}
|
||||
.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:8px;margin-bottom:16px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb .sep{color:var(--text-placeholder);}
|
||||
.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);}
|
||||
.tab-item.active{color:var(--primary);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.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;}
|
||||
.filter-date{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:140px;}
|
||||
.filter-date: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-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;}
|
||||
.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-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.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);}
|
||||
.detail-title{font-size:var(--font-lg);font-weight:600;margin-bottom:4px;}
|
||||
.detail-meta{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
</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="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</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>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<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"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" 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="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
<a href="archive-center.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><path d="M6 14v-4h4v4" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
应急中心报表数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit.html">单位报表数据</a>
|
||||
<span class="sep">/</span>
|
||||
<span>公司机关</span>
|
||||
<span class="sep">/</span>
|
||||
<span>拨打120</span>
|
||||
</div>
|
||||
<div class="detail-title">公司机关 — 拨打120 详情</div>
|
||||
<div class="detail-meta">2026年 · 总人数 1,000</div>
|
||||
|
||||
<!-- [交互] Tab 切换次数 / 人数 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('times',this)">次数（100次）</div>
|
||||
<div class="tab-item" onclick="switchTab('people',this)">人数（80人）</div>
|
||||
</div>
|
||||
<!-- 次数面板 — 表头参考 center-work-order.html，固定求助方式为"拨打120" -->
|
||||
<div class="tab-panel active" id="panel-times">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>工单编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入工单编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>求助员工</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>进行中</option>
|
||||
<option>已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<input class="filter-date" type="date" value="2026-01-01">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-date" type="date" value="2026-04-23">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</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>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">拨打120工单列表（按次数）</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 100 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>应急工单编号</th>
|
||||
<th>求助员工</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属部门</th>
|
||||
<th>求助时间</th>
|
||||
<th>应急中心</th>
|
||||
<th>专业人员</th>
|
||||
<th>操作人员</th>
|
||||
<th>驻场人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>工单类型</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">WO-20260418-003</td>
|
||||
<td>王建军-男-45</td>
|
||||
<td>EMP100231</td>
|
||||
<td>综合管理部</td>
|
||||
<td>2026-04-18 09:15:32</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>张医生</td>
|
||||
<td>李操作</td>
|
||||
<td>赵驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">WO-20260415-008</td>
|
||||
<td>张丽萍-女-38</td>
|
||||
<td>EMP100456</td>
|
||||
<td>安全环保部</td>
|
||||
<td>2026-04-15 14:22:10</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>刘医生</td>
|
||||
<td>王操作</td>
|
||||
<td>陈驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">WO-20260412-012</td>
|
||||
<td>陈伟东-男-52</td>
|
||||
<td>EMP100789</td>
|
||||
<td>财务部</td>
|
||||
<td>2026-04-12 22:05:47</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>陈医生</td>
|
||||
<td>赵操作</td>
|
||||
<td>吴驻场</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">WO-20260410-005</td>
|
||||
<td>刘志强-男-41</td>
|
||||
<td>EMP100102</td>
|
||||
<td>人力资源部</td>
|
||||
<td>2026-04-10 18:30:12</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>王医生</td>
|
||||
<td>李操作</td>
|
||||
<td>郑驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">WO-20260408-019</td>
|
||||
<td>赵国庆-男-36</td>
|
||||
<td>EMP100335</td>
|
||||
<td>综合管理部</td>
|
||||
<td>2026-04-08 16:12:55</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>马医生</td>
|
||||
<td>王操作</td>
|
||||
<td>黄驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="center-work-order-detail.html">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 100 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">…</button>
|
||||
<button class="page-btn">10</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人数面板 — 按去重人员维度展示 -->
|
||||
<div class="tab-panel" id="panel-people">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<option>人力资源部</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</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>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">拨打120人员列表（按人数）</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 80 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属部门</th>
|
||||
<th>拨打次数</th>
|
||||
<th>最近拨打时间</th>
|
||||
<th>最近工单状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">王建军-男-45</td>
|
||||
<td>EMP100231</td>
|
||||
<td>综合管理部</td>
|
||||
<td>3</td>
|
||||
<td>2026-04-18 09:15:32</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">张丽萍-女-38</td>
|
||||
<td>EMP100456</td>
|
||||
<td>安全环保部</td>
|
||||
<td>2</td>
|
||||
<td>2026-04-15 14:22:10</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">陈伟东-男-52</td>
|
||||
<td>EMP100789</td>
|
||||
<td>财务部</td>
|
||||
<td>2</td>
|
||||
<td>2026-04-12 22:05:47</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">刘志强-男-41</td>
|
||||
<td>EMP100102</td>
|
||||
<td>人力资源部</td>
|
||||
<td>1</td>
|
||||
<td>2026-04-10 18:30:12</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">赵国庆-男-36</td>
|
||||
<td>EMP100335</td>
|
||||
<td>综合管理部</td>
|
||||
<td>1</td>
|
||||
<td>2026-04-08 16:12:55</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 80 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">…</button>
|
||||
<button class="page-btn">8</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* Tab 切换交互 */
|
||||
function switchTab(key, el) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t){t.classList.remove('active');});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p){p.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-'+key).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
[交互说明]
|
||||
本页为"拨打120"类型的详情示例。
|
||||
若点击的是"应急视频"或"应急电话"，表头结构与本页相同（参考 center-work-order.html），仅面包屑和标题文字不同。
|
||||
若点击的是"大病就医预约"，表头应替换为 center-serious-illness.html 的结构：
|
||||
序号 | 就医员工 | 员工编号 | 员工部门 | 预约医院 | 挂号类别 | 预约科室 | 预约医生 | 期望预约时间 | 驻场人员 | 工单状态 | 创建时间 | 完成时间 | 操作
|
||||
-->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -50,8 +50,8 @@
|
||||
.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;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:center;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
@@ -160,17 +160,23 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>单位</th>
|
||||
<th>总人数</th>
|
||||
<th>应急视频次数 ↕</th>
|
||||
<th>应急视频人数 ↕</th>
|
||||
<th>拨打120次数 ↕</th>
|
||||
<th>拨打120人数 ↕</th>
|
||||
<th>应急电话次数 ↕</th>
|
||||
<th>应急电话人数 ↕</th>
|
||||
<th>大病就医次数 ↕</th>
|
||||
<th>大病就医人数 ↕</th>
|
||||
<th rowspan="2">序号</th>
|
||||
<th rowspan="2">单位</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th colspan="2" style="text-align:center;">拨打120</th>
|
||||
<th colspan="2" style="text-align:center;">应急视频</th>
|
||||
<th colspan="2" style="text-align:center;">应急电话</th>
|
||||
<th colspan="2" style="text-align:center;">大病就医预约</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -178,79 +184,79 @@
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">公司机关</td>
|
||||
<td>1000</td>
|
||||
<td><a class="link" href="#">100</a></td>
|
||||
<td><a class="link" href="#">80</a></td>
|
||||
<td><a class="link" href="#">50</a></td>
|
||||
<td><a class="link" href="#">45</a></td>
|
||||
<td><a class="link" href="#">120</a></td>
|
||||
<td><a class="link" href="#">95</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">100</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">80</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">50</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">45</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">120</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">95</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">30</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">28</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">采油一厂</td>
|
||||
<td>2500</td>
|
||||
<td><a class="link" href="#">200</a></td>
|
||||
<td><a class="link" href="#">160</a></td>
|
||||
<td><a class="link" href="#">80</a></td>
|
||||
<td><a class="link" href="#">70</a></td>
|
||||
<td><a class="link" href="#">180</a></td>
|
||||
<td><a class="link" href="#">150</a></td>
|
||||
<td><a class="link" href="#">45</a></td>
|
||||
<td><a class="link" href="#">40</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">200</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">160</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">80</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">70</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">180</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">150</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">45</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">40</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">采油二厂</td>
|
||||
<td>1800</td>
|
||||
<td><a class="link" href="#">150</a></td>
|
||||
<td><a class="link" href="#">120</a></td>
|
||||
<td><a class="link" href="#">60</a></td>
|
||||
<td><a class="link" href="#">55</a></td>
|
||||
<td><a class="link" href="#">140</a></td>
|
||||
<td><a class="link" href="#">110</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">150</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">120</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">60</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">55</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">140</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">110</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">35</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">30</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">采气一厂</td>
|
||||
<td>1200</td>
|
||||
<td><a class="link" href="#">90</a></td>
|
||||
<td><a class="link" href="#">75</a></td>
|
||||
<td><a class="link" href="#">40</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">100</a></td>
|
||||
<td><a class="link" href="#">85</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">90</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">75</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">40</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">35</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">100</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">85</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">20</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">18</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">第一采油厂</td>
|
||||
<td>3000</td>
|
||||
<td><a class="link" href="#">250</a></td>
|
||||
<td><a class="link" href="#">200</a></td>
|
||||
<td><a class="link" href="#">100</a></td>
|
||||
<td><a class="link" href="#">90</a></td>
|
||||
<td><a class="link" href="#">220</a></td>
|
||||
<td><a class="link" href="#">180</a></td>
|
||||
<td><a class="link" href="#">55</a></td>
|
||||
<td><a class="link" href="#">50</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">250</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">200</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">100</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">90</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">220</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">180</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">55</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">50</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">输油处</td>
|
||||
<td>800</td>
|
||||
<td><a class="link" href="#">60</a></td>
|
||||
<td><a class="link" href="#">50</a></td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">70</a></td>
|
||||
<td><a class="link" href="#">55</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">60</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">50</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">25</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">20</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">70</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">55</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">15</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">12</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -330,18 +336,24 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>所属单位</th>
|
||||
<th>部门名称</th>
|
||||
<th>总人数</th>
|
||||
<th>应急视频次数 ↕</th>
|
||||
<th>应急视频人数 ↕</th>
|
||||
<th>拨打120次数 ↕</th>
|
||||
<th>拨打120人数 ↕</th>
|
||||
<th>应急电话次数 ↕</th>
|
||||
<th>应急电话人数 ↕</th>
|
||||
<th>大病就医次数 ↕</th>
|
||||
<th>大病就医人数 ↕</th>
|
||||
<th rowspan="2">序号</th>
|
||||
<th rowspan="2">所属单位</th>
|
||||
<th rowspan="2">部门名称</th>
|
||||
<th rowspan="2">总人数</th>
|
||||
<th colspan="2" style="text-align:center;">应急视频</th>
|
||||
<th colspan="2" style="text-align:center;">拨打120</th>
|
||||
<th colspan="2" style="text-align:center;">应急电话</th>
|
||||
<th colspan="2" style="text-align:center;">大病就医预约</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
<th>次数 ↕</th>
|
||||
<th>人数 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -350,112 +362,112 @@
|
||||
<td>采油一厂</td>
|
||||
<td style="font-weight:500;">作业一区</td>
|
||||
<td>186</td>
|
||||
<td><a class="link" href="#">42</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">38</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">8</a></td>
|
||||
<td><a class="link" href="#">7</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">42</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">35</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">18</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">15</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">38</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">30</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">8</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">7</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>采油一厂</td>
|
||||
<td style="font-weight:500;">作业二区</td>
|
||||
<td>174</td>
|
||||
<td><a class="link" href="#">38</a></td>
|
||||
<td><a class="link" href="#">32</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
<td><a class="link" href="#">6</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">38</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">32</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">15</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">12</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">35</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">28</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">6</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">5</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>采油二厂</td>
|
||||
<td style="font-weight:500;">注水站</td>
|
||||
<td>163</td>
|
||||
<td><a class="link" href="#">35</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">10</a></td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
<td><a class="link" href="#">4</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">35</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">28</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">12</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">10</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">30</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">25</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">5</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">4</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>采气一厂</td>
|
||||
<td style="font-weight:500;">集输站</td>
|
||||
<td>158</td>
|
||||
<td><a class="link" href="#">30</a></td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">10</a></td>
|
||||
<td><a class="link" href="#">8</a></td>
|
||||
<td><a class="link" href="#">28</a></td>
|
||||
<td><a class="link" href="#">22</a></td>
|
||||
<td><a class="link" href="#">4</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">30</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">25</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">10</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">8</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">28</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">22</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">4</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">3</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>公司机关</td>
|
||||
<td style="font-weight:500;">综合管理部</td>
|
||||
<td>142</td>
|
||||
<td><a class="link" href="#">25</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">8</a></td>
|
||||
<td><a class="link" href="#">7</a></td>
|
||||
<td><a class="link" href="#">22</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">25</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">20</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">8</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">7</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">22</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">18</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">3</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">3</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>采油一厂</td>
|
||||
<td style="font-weight:500;">安全环保部</td>
|
||||
<td>136</td>
|
||||
<td><a class="link" href="#">22</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">7</a></td>
|
||||
<td><a class="link" href="#">6</a></td>
|
||||
<td><a class="link" href="#">20</a></td>
|
||||
<td><a class="link" href="#">16</a></td>
|
||||
<td><a class="link" href="#">3</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">22</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">18</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">7</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">6</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">20</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">16</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">3</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">2</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>油田总医院</td>
|
||||
<td style="font-weight:500;">急诊科</td>
|
||||
<td>128</td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">6</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
<td><a class="link" href="#">18</a></td>
|
||||
<td><a class="link" href="#">14</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">18</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">15</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">6</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">5</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">18</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">14</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">2</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">2</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>采油二厂</td>
|
||||
<td style="font-weight:500;">维修班</td>
|
||||
<td>115</td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">5</a></td>
|
||||
<td><a class="link" href="#">4</a></td>
|
||||
<td><a class="link" href="#">15</a></td>
|
||||
<td><a class="link" href="#">12</a></td>
|
||||
<td><a class="link" href="#">2</a></td>
|
||||
<td><a class="link" href="#">1</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">15</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">12</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">5</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">4</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">15</a></td>
|
||||
<td><a class="link" href="archive-unit-detail.html">12</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">2</a></td>
|
||||
<td><a class="link" href="archive-unit-detail-illness.html">1</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -51,6 +51,12 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
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;}
|
||||
.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;min-width:130px;width:130px;}
|
||||
.col-fixed-3{left:190px;min-width:100px;width:100px;}
|
||||
.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);}
|
||||
@@ -216,8 +222,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<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>
|
||||
@@ -232,8 +239,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</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);">TH20260420001</td>
|
||||
<td class="col-fixed col-fixed-3">王建军</td>
|
||||
<td>EMP-20198</td>
|
||||
<td>采油一厂/生产运行科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
@@ -246,8 +254,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>08:12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</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);">TH20260420002</td>
|
||||
<td class="col-fixed col-fixed-3">张丽萍</td>
|
||||
<td>EMP-30142</td>
|
||||
<td>第五采气厂/安全环保科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
@@ -260,8 +269,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>03:35</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</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);">TH20260419003</td>
|
||||
<td class="col-fixed col-fixed-3">陈伟东</td>
|
||||
<td>EMP-10087</td>
|
||||
<td>油气工艺研究院/试验中心</td>
|
||||
<td>西安基地应急中心</td>
|
||||
@@ -274,8 +284,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>12:18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</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);">TH20260419004</td>
|
||||
<td class="col-fixed col-fixed-3">刘志强</td>
|
||||
<td>EMP-20456</td>
|
||||
<td>采油二厂/工程技术科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
@@ -288,8 +299,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</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);">TH20260419005</td>
|
||||
<td class="col-fixed col-fixed-3">赵国庆</td>
|
||||
<td>EMP-40321</td>
|
||||
<td>长庆工程监督处/质量监督科</td>
|
||||
<td>西安基地应急中心</td>
|
||||
@@ -302,8 +314,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>06:42</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</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);">TH20260419006</td>
|
||||
<td class="col-fixed col-fixed-3">孙明亮</td>
|
||||
<td>EMP-10234</td>
|
||||
<td>采油三厂/综合管理科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
@@ -316,8 +329,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</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);">TH20260419007</td>
|
||||
<td class="col-fixed col-fixed-3">周文博</td>
|
||||
<td>EMP-50178</td>
|
||||
<td>勘探开发研究院/地质所</td>
|
||||
<td>西安基地应急中心</td>
|
||||
@@ -330,8 +344,9 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<td>03:15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</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);">TH20260419008</td>
|
||||
<td class="col-fixed col-fixed-3">吴海涛</td>
|
||||
<td>EMP-20789</td>
|
||||
<td>第二采气厂/生产运行科</td>
|
||||
<td>长庆油田应急中心</td>
|
||||
@@ -359,6 +374,27 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var role=params.get('role');
|
||||
if(role==='operator'){
|
||||
document.title='应急就医 - 通话记录 | 健康长庆原型';
|
||||
document.querySelector('.top-bar__logo').lastChild.textContent='\u00a0应急就医–操作人员';
|
||||
document.querySelector('.top-bar__nav').innerHTML=
|
||||
'<a href="../operator/emergency-active.html">正在应急</a>'+
|
||||
'<a href="center-work-order.html?role=operator">应急工单</a>'+
|
||||
'<a href="center-call-record.html?role=operator" class="active">通话记录</a>'+
|
||||
'<a href="center-serious-illness.html?role=operator">大病就医</a>'+
|
||||
'<a href="center-schedule.html?role=operator">值班小组</a>';
|
||||
document.querySelector('.avatar').textContent='操';
|
||||
document.querySelector('.top-bar__right span:last-child').textContent='操作人员 ▾';
|
||||
var sidebar=document.querySelector('.sidebar');
|
||||
if(sidebar)sidebar.style.display='none';
|
||||
document.querySelector('.main').style.marginLeft='0';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -220,6 +220,27 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 角色判断 */
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var role=params.get('role');
|
||||
if(role==='operator'){
|
||||
document.title='应急就医 - 值班小组 | 健康长庆原型';
|
||||
document.querySelector('.top-bar__logo').lastChild.textContent='\u00a0应急就医–操作人员';
|
||||
document.querySelector('.top-bar__nav').innerHTML=
|
||||
'<a href="../operator/emergency-active.html">正在应急</a>'+
|
||||
'<a href="center-work-order.html?role=operator">应急工单</a>'+
|
||||
'<a href="center-call-record.html?role=operator">通话记录</a>'+
|
||||
'<a href="center-serious-illness.html?role=operator">大病就医</a>'+
|
||||
'<a href="center-schedule.html?role=operator" class="active">值班小组</a>';
|
||||
document.querySelector('.avatar').textContent='操';
|
||||
document.querySelector('.top-bar__right span:last-child').textContent='操作人员 ▾';
|
||||
var sidebar=document.querySelector('.sidebar');
|
||||
if(sidebar)sidebar.style.display='none';
|
||||
document.querySelector('.main').style.marginLeft='0';
|
||||
}
|
||||
})();
|
||||
|
||||
var editing=false,activeCell=null;
|
||||
var opList=['1号工位','2号工位','3号工位','4号工位','5号工位','6号工位'];
|
||||
var proList=['张婧','张明','李医生','王护士','赵主任','刘护士长'];
|
||||
|
||||
@@ -0,0 +1,280 @@
|
||||
<!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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.page-header{background:#fff;border-bottom:1px solid var(--border);padding:16px 32px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;}
|
||||
.page-header__back{width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,0.04);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
|
||||
.page-header__back:hover{background:rgba(0,0,0,0.08);}
|
||||
.page-header__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.form-wrap{max-width:1080px;margin:32px auto;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:40px 48px 48px;}
|
||||
.form-section{margin-bottom:32px;}
|
||||
.form-section__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:8px;}
|
||||
.form-section__title::before{content:'';width:3px;height:16px;background:var(--primary);border-radius:2px;}
|
||||
.form-row{margin-bottom:20px;}
|
||||
.form-group{display:flex;align-items:flex-start;gap:8px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;min-width:110px;text-align:right;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-control-wrap{flex:1;max-width:480px;}
|
||||
.form-control-wrap--wide{max-width:100%;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;font-family:inherit;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{width:100%;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;font-family:inherit;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{width:100%;min-height:120px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;line-height:1.6;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
/* 单选组 */
|
||||
.radio-group{display:flex;align-items:center;gap:24px;height:36px;}
|
||||
.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);cursor:pointer;color:var(--text-primary);}
|
||||
.radio-item input{display:none;}
|
||||
.radio-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);position:relative;transition:border-color .15s;}
|
||||
.radio-item input:checked+.radio-dot{border-color:var(--primary);}
|
||||
.radio-item input:checked+.radio-dot::after{content:'';position:absolute;top:3px;left:3px;width:6px;height:6px;border-radius:50%;background:var(--primary);}
|
||||
/* 可搜索下拉 */
|
||||
.select-search{position:relative;}
|
||||
.select-search__input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 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='12' height='12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;font-family:inherit;}
|
||||
.select-search__input:focus{border-color:var(--primary);}
|
||||
.select-search__drop{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:20;max-height:220px;overflow-y:auto;}
|
||||
.select-search__drop.open{display:block;}
|
||||
.select-search__option{padding:10px 12px;cursor:pointer;transition:background .12s;border-bottom:1px solid #f5f5f5;}
|
||||
.select-search__option:last-child{border-bottom:none;}
|
||||
.select-search__option:hover{background:var(--primary-light);}
|
||||
.select-search__option.selected{background:var(--primary-light);color:var(--primary);}
|
||||
.select-search__name{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.select-search__sub{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;}
|
||||
.select-search__empty{padding:16px;text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
/* 员工信息卡片 */
|
||||
.emp-card{background:#FAFAFA;border:1px solid #f0f0f0;border-radius:var(--radius-md);padding:14px 16px;margin-top:10px;display:none;gap:20px;flex-wrap:wrap;}
|
||||
.emp-card.show{display:flex;}
|
||||
.emp-card__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);}
|
||||
.emp-card__label{color:var(--text-secondary);}
|
||||
.emp-card__value{color:var(--text-primary);font-weight:500;}
|
||||
/* 提交 */
|
||||
.form-footer{margin-top:40px;text-align:center;}
|
||||
.btn-submit{width:240px;height:44px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-base);font-weight:500;cursor:pointer;transition:background .15s;}
|
||||
.btn-submit:hover{background:#40a9ff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<button class="page-header__back" onclick="history.back()">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M11 4L6 9l5 5" stroke="#333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span class="page-header__title">新增大病就医</span>
|
||||
</div>
|
||||
|
||||
<div class="form-wrap">
|
||||
<!-- 就医员工信息 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">就医员工信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>员工类型：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item"><input type="radio" name="empType" value="oil" checked onchange="switchEmpType('oil')"><span class="radio-dot"></span>油田员工</label>
|
||||
<label class="radio-item"><input type="radio" name="empType" value="non" onchange="switchEmpType('non')"><span class="radio-dot"></span>非油田员工</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 油田员工 -->
|
||||
<div id="oilEmpBlock">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>就医员工：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="select-search" id="empSelect">
|
||||
<input class="select-search__input" id="empInput" placeholder="姓名/编号搜索" autocomplete="off" onclick="toggleEmpDrop()" oninput="filterEmps()">
|
||||
<div class="select-search__drop" id="empDrop"></div>
|
||||
</div>
|
||||
<div class="emp-card" id="empCard">
|
||||
<div class="emp-card__item"><span class="emp-card__label">单位：</span><span class="emp-card__value" id="ecOrg"></span></div>
|
||||
<div class="emp-card__item"><span class="emp-card__label">部门：</span><span class="emp-card__value" id="ecDept"></span></div>
|
||||
<div class="emp-card__item"><span class="emp-card__label">联系电话：</span><span class="emp-card__value" id="ecTel"></span></div>
|
||||
<div class="emp-card__item"><span class="emp-card__label">身份证号：</span><span class="emp-card__value" id="ecIdCard"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 非油田员工 -->
|
||||
<div id="nonEmpBlock" style="display:none">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>姓名：</label>
|
||||
<div class="form-control-wrap"><input class="form-input" placeholder="请输入姓名"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>身份证号：</label>
|
||||
<div class="form-control-wrap"><input class="form-input" placeholder="请输入身份证号"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>手机号：</label>
|
||||
<div class="form-control-wrap"><input class="form-input" placeholder="请输入手机号"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">身份信息：</label>
|
||||
<div class="form-control-wrap"><input class="form-input" placeholder="如：员工家属、外协人员等"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预约信息 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">预约信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>预约医院：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="select-search" id="hospSelect">
|
||||
<input class="select-search__input" id="hospInput" placeholder="输入医院名称搜索" autocomplete="off" onclick="toggleHospDrop()" oninput="filterHosps()">
|
||||
<div class="select-search__drop" id="hospDrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">就诊卡号：</label>
|
||||
<div class="form-control-wrap"><input class="form-input" placeholder="请输入就诊卡号"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>挂号类别：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item"><input type="radio" name="regType" checked><span class="radio-dot"></span>专家号</label>
|
||||
<label class="radio-item"><input type="radio" name="regType"><span class="radio-dot"></span>急诊号</label>
|
||||
<label class="radio-item"><input type="radio" name="regType"><span class="radio-dot"></span>普通号</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>期望预约时间：</label>
|
||||
<div class="form-control-wrap" style="display:flex;gap:8px;">
|
||||
<input class="form-input" type="date" style="flex:1;">
|
||||
<input class="form-input" type="time" style="flex:1;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">预约科室：</label>
|
||||
<div class="form-control-wrap"><input class="form-input" placeholder="请输入预约科室"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">预约医生：</label>
|
||||
<div class="form-control-wrap"><input class="form-input" placeholder="请输入预约医生"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">病情描述：</label>
|
||||
<div class="form-control-wrap form-control-wrap--wide">
|
||||
<textarea class="form-textarea" placeholder="请描述病情情况"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button class="btn-submit" onclick="alert('【交互说明】提交新增大病就医，返回列表')">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 员工类型切换 */
|
||||
function switchEmpType(type){
|
||||
document.getElementById('oilEmpBlock').style.display=type==='oil'?'':'none';
|
||||
document.getElementById('nonEmpBlock').style.display=type==='non'?'':'none';
|
||||
if(type==='oil'){document.getElementById('empCard').classList.remove('show');document.getElementById('empInput').value='';_selectedEmp=null;}
|
||||
}
|
||||
|
||||
/* 油田员工搜索 */
|
||||
var _emps=[
|
||||
{name:'王建国',code:'EMP20230156',org:'采油一厂',dept:'作业一区',tel:'138-9201-1001',idCard:'610102197201******'},
|
||||
{name:'张丽华',code:'EMP20220089',org:'公司机关',dept:'综合管理部',tel:'138-9201-2002',idCard:'610103198105******'},
|
||||
{name:'刘志强',code:'EMP20210234',org:'采油二厂',dept:'注水站',tel:'138-9201-3003',idCard:'610104198308******'},
|
||||
{name:'陈秀英',code:'EMP20230312',org:'采气一厂',dept:'集输站',tel:'138-9201-4004',idCard:'620102196802******'},
|
||||
{name:'赵德明',code:'EMP20200178',org:'采油一厂',dept:'作业二区',tel:'138-9201-5005',idCard:'610105197506******'},
|
||||
{name:'徐萱',code:'56895',org:'第一采油厂',dept:'消防大队',tel:'138-9201-6006',idCard:'610106199201******'},
|
||||
{name:'李娜',code:'EMP10035',org:'采油一厂',dept:'安全环保部',tel:'138-9201-7007',idCard:'610107199003******'},
|
||||
{name:'杨帆',code:'EMP10091',org:'第一采气厂',dept:'集气站',tel:'138-9201-8008',idCard:'620103199205******'}
|
||||
];
|
||||
var _selectedEmp=null;
|
||||
function renderEmpDrop(kw){
|
||||
var drop=document.getElementById('empDrop');kw=(kw||'').toLowerCase();var html='',c=0;
|
||||
_emps.forEach(function(e,i){
|
||||
if(kw&&e.name.toLowerCase().indexOf(kw)<0&&e.code.toLowerCase().indexOf(kw)<0)return;
|
||||
var sel=(_selectedEmp&&_selectedEmp.code===e.code)?' selected':'';
|
||||
html+='<div class="select-search__option'+sel+'" onclick="pickEmp('+i+')"><div class="select-search__name">'+e.name+'<span style="font-weight:400;color:var(--text-placeholder);margin-left:6px;">'+e.code+'</span></div><div class="select-search__sub">'+e.org+' · '+e.dept+'</div></div>';c++;
|
||||
});
|
||||
if(!c)html='<div class="select-search__empty">无匹配员工</div>';
|
||||
drop.innerHTML=html;
|
||||
}
|
||||
function toggleEmpDrop(){var d=document.getElementById('empDrop');if(d.classList.contains('open')){d.classList.remove('open');return;}renderEmpDrop(document.getElementById('empInput').value);d.classList.add('open');}
|
||||
function filterEmps(){renderEmpDrop(document.getElementById('empInput').value);document.getElementById('empDrop').classList.add('open');}
|
||||
function pickEmp(idx){
|
||||
_selectedEmp=_emps[idx];
|
||||
document.getElementById('empInput').value=_selectedEmp.name+' ('+_selectedEmp.code+')';
|
||||
document.getElementById('empDrop').classList.remove('open');
|
||||
document.getElementById('ecOrg').textContent=_selectedEmp.org;
|
||||
document.getElementById('ecDept').textContent=_selectedEmp.dept;
|
||||
document.getElementById('ecTel').textContent=_selectedEmp.tel;
|
||||
document.getElementById('ecIdCard').textContent=_selectedEmp.idCard;
|
||||
document.getElementById('empCard').classList.add('show');
|
||||
}
|
||||
document.addEventListener('click',function(e){if(!document.getElementById('empSelect').contains(e.target))document.getElementById('empDrop').classList.remove('open');if(!document.getElementById('hospSelect').contains(e.target))document.getElementById('hospDrop').classList.remove('open');});
|
||||
|
||||
/* 医院搜索 */
|
||||
var _hosps=[
|
||||
{name:'空军军医大学西京医院',addr:'陕西省西安市长乐西路127号',level:'三级甲等'},
|
||||
{name:'西安交大一附院',addr:'陕西省西安市雁塔西路277号',level:'三级甲等'},
|
||||
{name:'西安交大二附院',addr:'陕西省西安市西五路157号',level:'三级甲等'},
|
||||
{name:'庆阳市人民医院',addr:'甘肃省庆阳市西峰区安定东路1号',level:'三级乙等'},
|
||||
{name:'兰州大学第一医院',addr:'甘肃省兰州市城关区东岗西路1号',level:'三级甲等'},
|
||||
{name:'北京协和医院',addr:'北京市东城区帅府园1号',level:'三级甲等'},
|
||||
{name:'长庆油田职工医院',addr:'陕西省西安市未央区凤城四路',level:'二级甲等'},
|
||||
{name:'西安市中心医院',addr:'陕西省西安市西五路161号',level:'三级甲等'}
|
||||
];
|
||||
var _selectedHosp=null;
|
||||
function renderHospDrop(kw){
|
||||
var drop=document.getElementById('hospDrop');kw=(kw||'').toLowerCase();var html='',c=0;
|
||||
_hosps.forEach(function(h,i){
|
||||
if(kw&&h.name.toLowerCase().indexOf(kw)<0&&h.addr.toLowerCase().indexOf(kw)<0)return;
|
||||
var sel=(_selectedHosp&&_selectedHosp.name===h.name)?' selected':'';
|
||||
html+='<div class="select-search__option'+sel+'" onclick="pickHosp('+i+')"><div class="select-search__name">'+h.name+'<span style="font-weight:400;color:var(--primary);margin-left:8px;font-size:var(--font-xs);">'+h.level+'</span></div><div class="select-search__sub">'+h.addr+'</div></div>';c++;
|
||||
});
|
||||
if(!c)html='<div class="select-search__empty">无匹配医院</div>';
|
||||
drop.innerHTML=html;
|
||||
}
|
||||
function toggleHospDrop(){var d=document.getElementById('hospDrop');if(d.classList.contains('open')){d.classList.remove('open');return;}renderHospDrop(document.getElementById('hospInput').value);d.classList.add('open');}
|
||||
function filterHosps(){renderHospDrop(document.getElementById('hospInput').value);document.getElementById('hospDrop').classList.add('open');}
|
||||
function pickHosp(idx){
|
||||
_selectedHosp=_hosps[idx];
|
||||
document.getElementById('hospInput').value=_selectedHosp.name;
|
||||
document.getElementById('hospDrop').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -132,10 +132,10 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
|
||||
<!-- 工单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">工单信息</div>
|
||||
<div class="card__title">基本信息</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">工单状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">预约状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
|
||||
<div class="info-cell"><span class="info-cell__label">申请时间：</span><span class="info-cell__value">2026-06-24 12:30:30</span></div>
|
||||
|
||||
@@ -144,10 +144,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="info-cell"><span class="info-cell__label">派单说明：</span><span class="info-cell__value">请尽快挂号</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">驻场人员：</span><span class="info-cell__value">王希(15899655523)</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">完成时间：</span><span class="info-cell__value">2026-06-24 12:30:30</span></div>
|
||||
|
||||
<div class="info-cell"><span class="info-cell__label">驻场说明：</span><span class="info-cell__value">张希医生6.24不值班，挂了其他医生的号</span></div>
|
||||
<div class="photo-row"><span class="photo-row__label">驻场图片：</span><div class="photo-list"><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>挂号单</div></div></div><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>就诊现场</div></div></div><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>诊断报告</div></div></div></div></div>
|
||||
|
||||
<div class="photo-row"><span class="photo-row__label">驻场补充信息：</span><div class="photo-list"><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>挂号单</div></div></div><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>就诊现场</div></div></div><div class="photo-item"><div class="photo-item__placeholder"><div class="photo-item__icon"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="9.5" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 17l5-4 3 2 5-5 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>诊断报告</div></div></div></div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -169,10 +167,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">挂号类别：</span><span class="info-cell__value">专家号</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">期望预约时间：</span><span class="info-cell__value">2026-06-24 17:30</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">病情描述：</span><span class="info-cell__value">头晕不舒服</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">备注：</span><span class="info-cell__value">请快点安排！！！！</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">病情描述：</span><span class="info-cell__value">头晕不舒服</span></div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="info-row">-->
|
||||
@@ -197,6 +194,30 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var role=params.get('role');
|
||||
if(role==='operator'){
|
||||
document.title='应急就医 - 大病就医详情 | 健康长庆原型';
|
||||
document.querySelector('.top-bar__logo').lastChild.textContent='\u00a0应急就医–操作人员';
|
||||
document.querySelector('.top-bar__nav').innerHTML=
|
||||
'<a href="../operator/emergency-active.html">正在应急</a>'+
|
||||
'<a href="center-work-order.html?role=operator">应急工单</a>'+
|
||||
'<a href="center-call-record.html?role=operator">通话记录</a>'+
|
||||
'<a href="center-serious-illness.html?role=operator" class="active">大病就医</a>'+
|
||||
'<a href="center-schedule.html?role=operator">值班小组</a>';
|
||||
document.querySelector('.avatar').textContent='操';
|
||||
document.querySelector('.top-bar__right span:last-child').textContent='操作人员 ▾';
|
||||
var sidebar=document.querySelector('.sidebar');
|
||||
if(sidebar)sidebar.style.display='none';
|
||||
document.querySelector('.main').style.marginLeft='0';
|
||||
var bc=document.querySelector('.breadcrumb a');
|
||||
if(bc)bc.href='center-serious-illness.html?role=operator';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -159,6 +159,16 @@
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select" type="text" value="2025" >
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label>就医员工</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名" style="min-width:140px;">
|
||||
@@ -179,7 +189,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态</label>
|
||||
<label>预约状态</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>待确认</option>
|
||||
@@ -195,7 +205,11 @@
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<div id="actionBar" style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" id="btnAddIllness" style="display:none;" onclick="location.href='center-serious-illness-add.html?role=operator'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" 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"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
@@ -223,7 +237,7 @@
|
||||
<th>预约医生</th>
|
||||
<th>期望预约时间</th>
|
||||
<th>驻场人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>预约状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>完成时间</th>
|
||||
<th class="col-fixed col-fixed-end">操作</th>
|
||||
@@ -382,6 +396,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var role=params.get('role');
|
||||
if(role==='operator'){
|
||||
document.title='应急就医 - 大病就医 | 健康长庆原型';
|
||||
document.querySelector('.top-bar__logo').lastChild.textContent='\u00a0应急就医–操作人员';
|
||||
document.querySelector('.top-bar__nav').innerHTML=
|
||||
'<a href="../operator/emergency-active.html">正在应急</a>'+
|
||||
'<a href="center-work-order.html?role=operator">应急工单</a>'+
|
||||
'<a href="center-call-record.html?role=operator">通话记录</a>'+
|
||||
'<a href="center-serious-illness.html?role=operator" class="active">大病就医</a>'+
|
||||
'<a href="center-schedule.html?role=operator">值班小组</a>';
|
||||
document.querySelector('.avatar').textContent='操';
|
||||
document.querySelector('.top-bar__right span:last-child').textContent='操作人员 ▾';
|
||||
var sidebar=document.querySelector('.sidebar');
|
||||
if(sidebar)sidebar.style.display='none';
|
||||
document.querySelector('.main').style.marginLeft='0';
|
||||
document.getElementById('btnAddIllness').style.display='';
|
||||
document.querySelectorAll('a.link[href="center-serious-illness-detail.html"]').forEach(function(a){
|
||||
a.href='center-serious-illness-detail.html?role=operator';
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,444 @@
|
||||
<!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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 页面头 */
|
||||
.page-header{background:#fff;border-bottom:1px solid var(--border);padding:16px 32px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;}
|
||||
.page-header__back{width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,0.04);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
|
||||
.page-header__back:hover{background:rgba(0,0,0,0.08);}
|
||||
.page-header__title{font-size:var(--font-lg);font-weight:600;}
|
||||
/* 表单容器 */
|
||||
.form-wrap{max-width:1080px;margin:32px auto;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:40px 48px 48px;}
|
||||
/* 只读信息 */
|
||||
.form-readonly{display:flex;gap:48px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #f0f0f0;}
|
||||
.form-readonly__item{display:flex;align-items:center;gap:4px;font-size:var(--font-sm);}
|
||||
.form-readonly__label{color:var(--text-secondary);}
|
||||
.form-readonly__value{color:var(--text-primary);font-weight:500;}
|
||||
/* 表单行 - 单列 */
|
||||
.form-row{margin-bottom:20px;}
|
||||
.form-group{display:flex;align-items:flex-start;gap:8px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;min-width:96px;text-align:right;line-height:36px;}
|
||||
.form-label .required{color:var(--danger);margin-right:2px;}
|
||||
.form-control-wrap{flex:1;max-width:480px;}
|
||||
.form-control-wrap--wide{max-width:100%;}
|
||||
/* 模块分区 */
|
||||
.form-section{margin-bottom:32px;}
|
||||
.form-section__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:8px;}
|
||||
.form-section__title::before{content:'';width:3px;height:16px;background:var(--primary);border-radius:2px;}
|
||||
/* 补充小结列表 */
|
||||
.summary-list{display:flex;flex-direction:column;gap:10px;}
|
||||
.summary-item{display:flex;align-items:flex-start;gap:8px;}
|
||||
.summary-item__index{width:24px;height:36px;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);color:var(--text-secondary);flex-shrink:0;}
|
||||
.summary-item__input{flex:1;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;font-family:inherit;}
|
||||
.summary-item__input:focus{border-color:var(--primary);}
|
||||
.summary-item__del{width:32px;height:36px;border:none;background:none;cursor:pointer;color:var(--text-placeholder);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s;}
|
||||
.summary-item__del:hover{color:var(--danger);}
|
||||
.summary-add{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-size:var(--font-sm);cursor:pointer;margin-top:8px;border:none;background:none;padding:0;}
|
||||
.summary-add:hover{color:#40a9ff;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;font-family:inherit;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{width:100%;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;font-family:inherit;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{width:100%;min-height:140px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;line-height:1.6;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
/* 单选组 */
|
||||
.radio-group{display:flex;align-items:center;gap:24px;height:36px;}
|
||||
.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);cursor:pointer;color:var(--text-primary);}
|
||||
.radio-item input{display:none;}
|
||||
.radio-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);position:relative;transition:border-color .15s;}
|
||||
.radio-item input:checked+.radio-dot{border-color:var(--primary);}
|
||||
.radio-item input:checked+.radio-dot::after{content:'';position:absolute;top:3px;left:3px;width:6px;height:6px;border-radius:50%;background:var(--primary);}
|
||||
/* 照片 */
|
||||
.photo-list{display:flex;gap:12px;flex-wrap:wrap;}
|
||||
.photo-add{width:80px;height:80px;border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--text-placeholder);cursor:pointer;transition:border-color .15s;}
|
||||
.photo-add:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.photo-item{width:80px;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;position:relative;color:var(--text-placeholder);}
|
||||
.photo-item svg{width:36px;height:36px;}
|
||||
.photo-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.45);color:#fff;font-size:10px;text-align:center;padding:2px 0;border-radius:0 0 3px 3px;}
|
||||
.photo-count{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:6px;}
|
||||
/* 按钮 */
|
||||
.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;}
|
||||
/* 可搜索下拉 */
|
||||
.select-search{position:relative;}
|
||||
.select-search__input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 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='12' height='12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;font-family:inherit;}
|
||||
.select-search__input:focus{border-color:var(--primary);}
|
||||
.select-search__drop{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:20;max-height:220px;overflow-y:auto;}
|
||||
.select-search__drop.open{display:block;}
|
||||
.select-search__option{padding:10px 12px;cursor:pointer;transition:background .12s;border-bottom:1px solid #f5f5f5;}
|
||||
.select-search__option:last-child{border-bottom:none;}
|
||||
.select-search__option:hover{background:var(--primary-light);}
|
||||
.select-search__option.selected{background:var(--primary-light);color:var(--primary);}
|
||||
.select-search__name{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.select-search__sub{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;}
|
||||
.select-search__empty{padding:16px;text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
/* 员工信息卡片 */
|
||||
.emp-card{background:#FAFAFA;border:1px solid #f0f0f0;border-radius:var(--radius-md);padding:14px 16px;margin-top:10px;display:none;gap:20px;flex-wrap:wrap;}
|
||||
.emp-card.show{display:flex;}
|
||||
.emp-card__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);}
|
||||
.emp-card__label{color:var(--text-secondary);}
|
||||
.emp-card__value{color:var(--text-primary);font-weight:500;}
|
||||
/* 驾驶人信息卡片 */
|
||||
.amb-driver{background:#FAFAFA;border:1px solid #f0f0f0;border-radius:var(--radius-md);padding:14px 16px;margin-top:10px;display:none;gap:20px;flex-wrap:wrap;}
|
||||
.amb-driver.show{display:flex;}
|
||||
.amb-driver__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);}
|
||||
.amb-driver__label{color:var(--text-secondary);}
|
||||
.amb-driver__value{color:var(--text-primary);font-weight:500;}
|
||||
.amb-driver__value a{color:var(--primary);text-decoration:none;}
|
||||
.amb-driver__value a:hover{text-decoration:underline;}
|
||||
/* 提交 */
|
||||
.form-footer{margin-top:40px;text-align:center;}
|
||||
.btn-submit{width:240px;height:44px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-base);font-weight:500;cursor:pointer;transition:background .15s;}
|
||||
.btn-submit:hover{background:#40a9ff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<button class="page-header__back" onclick="history.back()">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M11 4L6 9l5 5" stroke="#333" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span class="page-header__title">新增应急工单</span>
|
||||
</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-wrap">
|
||||
<!-- 只读信息行 -->
|
||||
<div class="form-readonly">
|
||||
<div class="form-readonly__item"><span class="form-readonly__label">工单类型：</span><span class="form-readonly__value">事后补单</span></div>
|
||||
<div class="form-readonly__item"><span class="form-readonly__label">应急中心：</span><span class="form-readonly__value">西安应急中心</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 表单字段 -->
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">基本信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>求助员工：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="select-search" id="empSelect">
|
||||
<input class="select-search__input" id="empInput" placeholder="姓名/编号搜索" autocomplete="off" onclick="toggleEmpDrop()" oninput="filterEmps()">
|
||||
<div class="select-search__drop" id="empDrop"></div>
|
||||
</div>
|
||||
<div class="emp-card" id="empCard">
|
||||
<div class="emp-card__item"><span class="emp-card__label">姓名：</span><span class="emp-card__value" id="ecName"></span></div>
|
||||
<div class="emp-card__item"><span class="emp-card__label">编号：</span><span class="emp-card__value" id="ecCode"></span></div>
|
||||
<div class="emp-card__item"><span class="emp-card__label">单位：</span><span class="emp-card__value" id="ecOrg"></span></div>
|
||||
<div class="emp-card__item"><span class="emp-card__label">部门：</span><span class="emp-card__value" id="ecDept"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>求助方式：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item"><input type="radio" name="helpType" checked><span class="radio-dot"></span>拨打120</label>
|
||||
<label class="radio-item"><input type="radio" name="helpType"><span class="radio-dot"></span>应急视频</label>
|
||||
<label class="radio-item"><input type="radio" name="helpType"><span class="radio-dot"></span>应急电话</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>求助时间：</label>
|
||||
<div class="form-control-wrap" style="display:flex;gap:8px;">
|
||||
<input class="form-input" type="date" style="flex:1;">
|
||||
<input class="form-input" type="time" style="flex:1;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label"><span class="required">*</span>操作人员：</label>
|
||||
<div class="form-control-wrap">
|
||||
<select class="form-select"><option value="">请选择</option><option>张操作</option><option>李操作</option><option>王操作</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">专业人员：</label>
|
||||
<div class="form-control-wrap">
|
||||
<select class="form-select"><option value="">请选择</option><option>李医生</option><option>陈医生</option><option>赵医生</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">完成时间：</label>
|
||||
<div class="form-control-wrap" style="display:flex;gap:8px;">
|
||||
<input class="form-input" type="date" style="flex:1;">
|
||||
<input class="form-input" type="time" style="flex:1;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">救助意见：</label>
|
||||
<div class="form-control-wrap form-control-wrap--wide">
|
||||
<textarea class="form-textarea" style="min-height:80px;" placeholder="请输入救助意见"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">救助结果：</label>
|
||||
<div class="form-control-wrap form-control-wrap--wide">
|
||||
<textarea class="form-textarea" style="min-height:80px;" placeholder="请输入救助结果"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">相关照片：</label>
|
||||
<div class="form-control-wrap form-control-wrap--wide">
|
||||
<div class="photo-list">
|
||||
<div class="photo-add" title="上传照片">+</div>
|
||||
<div class="photo-item"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="photo-label">图片</div></div>
|
||||
<div class="photo-item"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="photo-label">图片</div></div>
|
||||
</div>
|
||||
<div class="photo-count">2/6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">补充小结：</label>
|
||||
<div class="form-control-wrap form-control-wrap--wide">
|
||||
<div class="summary-list" id="summaryList">
|
||||
<div class="summary-item">
|
||||
<span class="summary-item__index">1.</span>
|
||||
<input class="summary-item__input" placeholder="请输入小结内容" value="患者已送达长庆油田职工医院急诊科">
|
||||
<button class="summary-item__del" onclick="delSummary(this)" title="删除">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="summary-add" onclick="addSummary()">+ 新增小结</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 派单信息 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">派单信息</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">派单时间：</label>
|
||||
<div class="form-control-wrap" style="display:flex;gap:8px;">
|
||||
<input class="form-input" type="date" style="flex:1;">
|
||||
<input class="form-input" type="time" style="flex:1;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">派单说明：</label>
|
||||
<div class="form-control-wrap form-control-wrap--wide">
|
||||
<textarea class="form-textarea" style="min-height:80px;" placeholder="请输入派单说明"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">驻场人员：</label>
|
||||
<div class="form-control-wrap">
|
||||
<select class="form-select"><option value="">请选择</option><option>王旭</option><option>刘鑫</option><option>陈浩</option><option>赵旭</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">结束时间：</label>
|
||||
<div class="form-control-wrap" style="display:flex;gap:8px;">
|
||||
<input class="form-input" type="date" style="flex:1;">
|
||||
<input class="form-input" type="time" style="flex:1;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">驻场说明：</label>
|
||||
<div class="form-control-wrap form-control-wrap--wide">
|
||||
<textarea class="form-textarea" style="min-height:80px;" placeholder="请输入驻场说明"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救护车支援 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">救护车支援</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">选择救护车：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="select-search" id="ambSelect2">
|
||||
<input class="select-search__input" id="ambInput2" placeholder="车牌号/医疗点/机构搜索" autocomplete="off" onclick="toggleAmbDrop2()" oninput="filterAmbs2()">
|
||||
<div class="select-search__drop" id="ambDrop2"></div>
|
||||
</div>
|
||||
<div class="amb-driver" id="ambDriverCard">
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">所属医疗点：</span><span class="amb-driver__value" id="ac_station"></span></div>
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">所属机构：</span><span class="amb-driver__value" id="ac_org"></span></div>
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">驾驶人：</span><span class="amb-driver__value" id="ac_driver"></span></div>
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">驾驶人电话：</span><span class="amb-driver__value"><a id="ac_driverTel" href=""></a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">随行人：</label>
|
||||
<div class="form-control-wrap">
|
||||
<input class="form-input" placeholder="请输入随行人姓名">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">随行人电话：</label>
|
||||
<div class="form-control-wrap">
|
||||
<input class="form-input" placeholder="请输入电话号码">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<div class="form-footer">
|
||||
<button class="btn-submit" onclick="alert('【交互说明】提交新增应急工单，返回工单列表')">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var _emps=[
|
||||
{name:'张伟',code:'EMP-10021',org:'采油一厂',dept:'生产部'},
|
||||
{name:'李娜',code:'EMP-10035',org:'采油一厂',dept:'安全环保部'},
|
||||
{name:'王强',code:'EMP-10048',org:'采油二厂',dept:'作业区'},
|
||||
{name:'赵敏',code:'EMP-10062',org:'长庆油田机关',dept:'人力资源部'},
|
||||
{name:'刘洋',code:'EMP-10079',org:'采油三厂',dept:'生产运行部'},
|
||||
{name:'陈磊',code:'EMP-10083',org:'采油一厂',dept:'技术中心'},
|
||||
{name:'杨帆',code:'EMP-10091',org:'第一采气厂',dept:'集气站'},
|
||||
{name:'周涛',code:'EMP-10105',org:'采油二厂',dept:'注水站'},
|
||||
{name:'吴婷',code:'EMP-10112',org:'长庆油田机关',dept:'信息中心'},
|
||||
{name:'孙浩',code:'EMP-10128',org:'第一采气厂',dept:'安全环保部'}
|
||||
];
|
||||
var _selectedEmp=null;
|
||||
function renderEmpDrop(kw){
|
||||
var drop=document.getElementById('empDrop');
|
||||
kw=(kw||'').toLowerCase();
|
||||
var html='',count=0;
|
||||
_emps.forEach(function(e,i){
|
||||
if(kw&&e.name.toLowerCase().indexOf(kw)<0&&e.code.toLowerCase().indexOf(kw)<0)return;
|
||||
var sel=(_selectedEmp&&_selectedEmp.code===e.code)?' selected':'';
|
||||
html+='<div class="select-search__option'+sel+'" onclick="pickEmp('+i+')">'
|
||||
+'<div class="select-search__name">'+e.name+'<span style="font-weight:400;color:var(--text-placeholder);margin-left:6px;">'+e.code+'</span></div>'
|
||||
+'<div class="select-search__sub">'+e.org+' · '+e.dept+'</div></div>';
|
||||
count++;
|
||||
});
|
||||
if(!count)html='<div class="select-search__empty">无匹配员工</div>';
|
||||
drop.innerHTML=html;
|
||||
}
|
||||
function toggleEmpDrop(){
|
||||
var drop=document.getElementById('empDrop');
|
||||
if(drop.classList.contains('open')){drop.classList.remove('open');return;}
|
||||
renderEmpDrop(document.getElementById('empInput').value);
|
||||
drop.classList.add('open');
|
||||
}
|
||||
function filterEmps(){
|
||||
renderEmpDrop(document.getElementById('empInput').value);
|
||||
document.getElementById('empDrop').classList.add('open');
|
||||
}
|
||||
function pickEmp(idx){
|
||||
_selectedEmp=_emps[idx];
|
||||
document.getElementById('empInput').value=_selectedEmp.name+' ('+_selectedEmp.code+')';
|
||||
document.getElementById('empDrop').classList.remove('open');
|
||||
document.getElementById('ecName').textContent=_selectedEmp.name;
|
||||
document.getElementById('ecCode').textContent=_selectedEmp.code;
|
||||
document.getElementById('ecOrg').textContent=_selectedEmp.org;
|
||||
document.getElementById('ecDept').textContent=_selectedEmp.dept;
|
||||
document.getElementById('empCard').classList.add('show');
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('#empSelect'))document.getElementById('empDrop').classList.remove('open');
|
||||
});
|
||||
/* 补充小结 */
|
||||
var _summaryIdx=1;
|
||||
function reindexSummary(){
|
||||
var items=document.querySelectorAll('#summaryList .summary-item');
|
||||
items.forEach(function(el,i){el.querySelector('.summary-item__index').textContent=(i+1)+'.';});
|
||||
_summaryIdx=items.length;
|
||||
}
|
||||
function addSummary(){
|
||||
_summaryIdx++;
|
||||
var div=document.createElement('div');div.className='summary-item';
|
||||
div.innerHTML='<span class="summary-item__index">'+_summaryIdx+'.</span><input class="summary-item__input" placeholder="请输入小结内容"><button class="summary-item__del" onclick="delSummary(this)" title="删除">×</button>';
|
||||
document.getElementById('summaryList').appendChild(div);
|
||||
div.querySelector('.summary-item__input').focus();
|
||||
}
|
||||
function delSummary(btn){
|
||||
var list=document.getElementById('summaryList');
|
||||
if(list.children.length<=1)return;
|
||||
btn.closest('.summary-item').remove();
|
||||
reindexSummary();
|
||||
}/* 救护车搜索选择 */
|
||||
var _ambs2=[
|
||||
{plate:'陕A·120-01',station:'长庆油田职工医疗点',org:'长庆油田职工医院',driver:'李强',driverTel:'138-9101-2001'},
|
||||
{plate:'陕A·120-02',station:'采油一厂医疗点',org:'宝石花医院',driver:'张磊',driverTel:'138-9101-2002'},
|
||||
{plate:'陕A·120-03',station:'采油一厂医疗点',org:'长庆油田职工医院',driver:'王刚',driverTel:'138-9101-2003'},
|
||||
{plate:'陕A·120-05',station:'采油一厂医疗点',org:'宝石花医院',driver:'赵鹏',driverTel:'138-9101-2005'},
|
||||
{plate:'陕A·120-06',station:'采油一厂医疗点',org:'西安交通大学第一附属医院',driver:'孙涛',driverTel:'138-9101-2006'}
|
||||
];
|
||||
var _selectedAmb2=null;
|
||||
function renderAmbDrop2(kw){
|
||||
var drop=document.getElementById('ambDrop2');
|
||||
kw=(kw||'').toLowerCase();
|
||||
var html='',count=0;
|
||||
_ambs2.forEach(function(a,i){
|
||||
if(kw&&a.plate.toLowerCase().indexOf(kw)<0&&a.station.toLowerCase().indexOf(kw)<0&&a.org.toLowerCase().indexOf(kw)<0)return;
|
||||
var sel=(_selectedAmb2&&_selectedAmb2.plate===a.plate)?' selected':'';
|
||||
html+='<div class="select-search__option'+sel+'" onclick="pickAmb2('+i+')">'
|
||||
+'<div class="select-search__name">'+a.plate+'<span style="font-weight:400;color:var(--text-placeholder);margin-left:6px;">'+a.station+'</span></div>'
|
||||
+'<div class="select-search__sub">'+a.org+'</div></div>';
|
||||
count++;
|
||||
});
|
||||
if(!count)html='<div class="select-search__empty">无匹配救护车</div>';
|
||||
drop.innerHTML=html;
|
||||
}
|
||||
function toggleAmbDrop2(){
|
||||
var drop=document.getElementById('ambDrop2');
|
||||
if(drop.classList.contains('open')){drop.classList.remove('open');return;}
|
||||
renderAmbDrop2(document.getElementById('ambInput2').value);
|
||||
drop.classList.add('open');
|
||||
}
|
||||
function filterAmbs2(){
|
||||
renderAmbDrop2(document.getElementById('ambInput2').value);
|
||||
document.getElementById('ambDrop2').classList.add('open');
|
||||
}
|
||||
function pickAmb2(idx){
|
||||
_selectedAmb2=_ambs2[idx];
|
||||
document.getElementById('ambInput2').value=_selectedAmb2.plate;
|
||||
document.getElementById('ambDrop2').classList.remove('open');
|
||||
document.getElementById('ac_station').textContent=_selectedAmb2.station;
|
||||
document.getElementById('ac_org').textContent=_selectedAmb2.org;
|
||||
document.getElementById('ac_driver').textContent=_selectedAmb2.driver;
|
||||
var telEl=document.getElementById('ac_driverTel');
|
||||
telEl.textContent=_selectedAmb2.driverTel;telEl.href='tel:'+_selectedAmb2.driverTel.replace(/-/g,'');
|
||||
document.getElementById('ambDriverCard').classList.add('show');
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(!e.target.closest('#ambSelect2'))document.getElementById('ambDrop2').classList.remove('open');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -71,6 +71,57 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
|
||||
/* 补充小结可编辑列表 */
|
||||
.summary-list{list-style:none;padding:0;margin:0;}
|
||||
.summary-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:var(--font-sm);}
|
||||
.summary-item__idx{color:var(--text-secondary);min-width:20px;flex-shrink:0;}
|
||||
.summary-item__text{flex:1;color:var(--text-primary);line-height:1.8;}
|
||||
.summary-item__input{flex:1;border:1px solid var(--primary);border-radius:var(--radius-sm);padding:4px 8px;font-size:var(--font-sm);outline:none;font-family:inherit;line-height:1.8;}
|
||||
.summary-item__btn{width:26px;height:26px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);flex-shrink:0;transition:all .15s;}
|
||||
.summary-item__btn:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.summary-item__btn--danger:hover{background:#fff1f0;color:var(--danger);}
|
||||
.summary-item__btn--ok{color:var(--primary);}
|
||||
.summary-item__btn--ok:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.summary-add{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--border);background:none;padding:4px 14px;border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;margin-top:8px;transition:all .15s;}
|
||||
.summary-add:hover{border-color:var(--primary);color:var(--primary);}
|
||||
|
||||
/* 卡片标题带操作按钮 */
|
||||
.card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.card__header .card__title{margin-bottom:0;padding-bottom:0;border-bottom:none;}
|
||||
.card__header-btn{height:28px;padding:0 12px;border:1px solid var(--primary);border-radius:var(--radius-sm);background:#fff;color:var(--primary);font-size:var(--font-xs);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s;}
|
||||
.card__header-btn:hover{background:var(--primary-light);}
|
||||
|
||||
/* 表单样式(编辑模式) */
|
||||
.form-row{margin-bottom:20px;}
|
||||
.form-group{display:flex;align-items:flex-start;gap:8px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;min-width:96px;text-align:right;line-height:36px;}
|
||||
.form-control-wrap{flex:1;max-width:480px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;font-family:inherit;background:#fff;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.select-search{position:relative;}
|
||||
.select-search__input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 32px 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='12' height='12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;font-family:inherit;}
|
||||
.select-search__input:focus{border-color:var(--primary);}
|
||||
.select-search__drop{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:20;max-height:220px;overflow-y:auto;}
|
||||
.select-search__drop.open{display:block;}
|
||||
.select-search__option{padding:10px 12px;cursor:pointer;transition:background .12s;border-bottom:1px solid #f5f5f5;}
|
||||
.select-search__option:last-child{border-bottom:none;}
|
||||
.select-search__option:hover{background:var(--primary-light);}
|
||||
.select-search__option.selected{background:var(--primary-light);color:var(--primary);}
|
||||
.select-search__name{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.select-search__sub{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:2px;}
|
||||
.select-search__empty{padding:16px;text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.amb-driver{background:#FAFAFA;border:1px solid #f0f0f0;border-radius:var(--radius-md);padding:14px 16px;margin-top:10px;display:none;gap:20px;flex-wrap:wrap;}
|
||||
.amb-driver.show{display:flex;}
|
||||
.amb-driver__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);}
|
||||
.amb-driver__label{color:var(--text-secondary);}
|
||||
.amb-driver__value{color:var(--text-primary);font-weight:500;}
|
||||
.form-footer-inline{margin-top:20px;display:flex;gap:12px;}
|
||||
.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{border-color:var(--primary);color:var(--primary);}
|
||||
|
||||
/* 位置链接 */
|
||||
.location-link{color:var(--primary);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
|
||||
.location-link:hover{text-decoration:underline;}
|
||||
@@ -171,32 +222,18 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<span>工单详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 员工信息 -->
|
||||
<!-- 基本信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">员工信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">姓名：</span><span class="info-cell__value">王旭</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">性别：</span><span class="info-cell__value">男</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">年龄：</span><span class="info-cell__value">53</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">员工编号：</span><span class="info-cell__value">56985</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属单位：</span><span class="info-cell__value">公司机关</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属部门：</span><span class="info-cell__value">健康科</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">手机号：</span><span class="info-cell__value">18566985523</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">身份证号：</span><span class="info-cell__value">430626196500236</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">工单信息</div>
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">工单编号：</span><span class="info-cell__value">YJ5633256</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">工单类型：</span><span class="info-cell__value">正常派单</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">工单状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">应急中心：</span><span class="info-cell__value">西安应急中心</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">求助员工：</span><span class="info-cell__value">王旭（EMP-56985）</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属单位：</span><span class="info-cell__value">公司机关</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属部门：</span><span class="info-cell__value">健康科</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">求助方式：</span><span class="info-cell__value">应急视频</span></div>
|
||||
@@ -204,46 +241,141 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="info-cell"><span class="info-cell__label">位置信息：</span><span class="info-cell__value"><span class="location-link" onclick="openMap()"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省西安市雁塔区电子一路56号</span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">应急中心：</span><span class="info-cell__value">西安应急中心</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">操作人员：</span><span class="info-cell__value">刘旭</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">专业人员：</span><span class="info-cell__value">刘旭</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">工单状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">完成时间：</span><span class="info-cell__value">2026-03-21 16:45:00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救助信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议立即送往最近医院急诊科进行头颅CT检查，排除脑血管意外可能。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">补充说明：</div>
|
||||
<div class="desc-block__text">接到应急求助后立即抵达现场，查看员工突发头晕伴恶心呕吐，现场监测体征异常、症状无缓解，现场初步处置无效。第一时间联系驻场人员陪同医院急诊，完成挂号就诊、头颅CT拍片检查；目前已陪同完成CT检测，报告待医生解读，员工由同事留守陪护，已同步告知家属及部门负责人，现场隐患排查完毕，本次应急阶段性处置完成，后续跟进诊疗结果归档。</div>
|
||||
<div class="desc-block__label">救助结果：</div>
|
||||
<div class="desc-block__text">员工已送达长庆油田职工医院急诊科，完成头颅CT检查，排除脑出血，诊断为高血压引起的眩晕，已开具降压药物并留观。</div>
|
||||
</div>
|
||||
<div class="photo-block">
|
||||
<span class="photo-block__label">现场照片：</span>
|
||||
<span class="photo-block__label">相关照片：</span>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 1</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 2</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 3</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">补充小结：</div>
|
||||
<ul class="summary-list" id="summaryList">
|
||||
<li class="summary-item" data-idx="0">
|
||||
<span class="summary-item__idx">1.</span>
|
||||
<span class="summary-item__text">接到应急求助后立即抵达现场，员工突发头晕伴恶心呕吐</span>
|
||||
<button class="summary-item__btn" title="编辑" onclick="editSummary(this)"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg></button>
|
||||
<button class="summary-item__btn summary-item__btn--danger" title="删除" onclick="delSummary(this)"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></button>
|
||||
</li>
|
||||
<li class="summary-item" data-idx="1">
|
||||
<span class="summary-item__idx">2.</span>
|
||||
<span class="summary-item__text">现场监测体征异常，初步处置无效，联系驻场人员陪同就医</span>
|
||||
<button class="summary-item__btn" title="编辑" onclick="editSummary(this)"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg></button>
|
||||
<button class="summary-item__btn summary-item__btn--danger" title="删除" onclick="delSummary(this)"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></button>
|
||||
</li>
|
||||
<li class="summary-item" data-idx="2">
|
||||
<span class="summary-item__idx">3.</span>
|
||||
<span class="summary-item__text">已完成头颅CT检测，员工由同事留守陪护，已告知家属及部门负责人</span>
|
||||
<button class="summary-item__btn" title="编辑" onclick="editSummary(this)"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg></button>
|
||||
<button class="summary-item__btn summary-item__btn--danger" title="删除" onclick="delSummary(this)"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></button>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="summary-add" onclick="addSummary()"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>新增小结</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 驻场派单信息 -->
|
||||
<!-- 派单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">驻场派单信息</div>
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">派单时间：</span><span class="info-cell__value">2026-03-21 16:12:21</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">驻场人员：</span><span class="info-cell__value">王希（15899655523）</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">派单时间：</span><span class="info-cell__value">2026-03-21 15:18:00</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">驻场人员：</span><span class="info-cell__value">王希（138-9201-3001）</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">派单状态：</span><span class="info-cell__value status status--done">已完成</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">结束时间：</span><span class="info-cell__value">2026-03-21 16:40:00</span></div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">派单说明：</div>
|
||||
<div class="desc-block__text">给这个员工紧急挂号就诊，需要拍头颅CT</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<div class="desc-block__text">已经挂号并且开了胸部CT检查单，已陪同就诊</div>
|
||||
<div class="desc-block__text">已经挂号并且开了头颅CT检查单，已陪同就诊完毕，员工状态稳定</div>
|
||||
</div>
|
||||
<div class="photo-block">
|
||||
<span class="photo-block__label">现场照片：</span>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 1</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 2</div></div>
|
||||
<div class="photo-item"><div class="photo-item__placeholder">现场照片 3</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 救护车支援 -->
|
||||
<div class="card">
|
||||
<div class="card__header">
|
||||
<div class="card__title">救护车支援</div>
|
||||
<button class="card__header-btn" id="ambEditBtn" onclick="editAmb()"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>编辑</button>
|
||||
</div>
|
||||
<!-- 只读视图 -->
|
||||
<div id="ambInfoView">
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">车牌号：</span><span class="info-cell__value" id="av_plate">陕A·120-01</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属医疗点：</span><span class="info-cell__value" id="av_station">长庆油田职工医疗点</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">所属机构：</span><span class="info-cell__value" id="av_org">长庆油田职工医院</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">驾驶人：</span><span class="info-cell__value" id="av_driver">李强</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">驾驶人电话：</span><span class="info-cell__value" id="av_driverTel">138-9101-2001</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-cell"><span class="info-cell__label">随行人：</span><span class="info-cell__value" id="av_escort">张伟</span></div>
|
||||
<div class="info-cell"><span class="info-cell__label">随行人电话：</span><span class="info-cell__value" id="av_escortTel">138-9201-5001</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 编辑视图 -->
|
||||
<div id="ambEditView" style="display:none">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">选择救护车：</label>
|
||||
<div class="form-control-wrap">
|
||||
<div class="select-search" id="ambSelect">
|
||||
<input class="select-search__input" id="ambInput" placeholder="车牌号/医疗点/机构搜索" autocomplete="off" onclick="toggleAmbDrop()" oninput="filterAmbs()">
|
||||
<div class="select-search__drop" id="ambDrop"></div>
|
||||
</div>
|
||||
<div class="amb-driver" id="ambDriverCard">
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">所属医疗点：</span><span class="amb-driver__value" id="ad_station"></span></div>
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">所属机构：</span><span class="amb-driver__value" id="ad_org"></span></div>
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">驾驶人：</span><span class="amb-driver__value" id="ad_driver"></span></div>
|
||||
<div class="amb-driver__item"><span class="amb-driver__label">驾驶人电话：</span><span class="amb-driver__value" id="ad_driverTel"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">随行人：</label>
|
||||
<div class="form-control-wrap">
|
||||
<input class="form-input" id="ambEscort" placeholder="请输入随行人姓名">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">随行人电话：</label>
|
||||
<div class="form-control-wrap">
|
||||
<input class="form-input" id="ambEscortTel" placeholder="请输入电话号码">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-footer-inline">
|
||||
<button class="btn btn-primary" onclick="saveAmb()">保存</button>
|
||||
<button class="btn btn-default" onclick="cancelAmb()">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -281,6 +413,173 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<script>
|
||||
function openMap(){document.getElementById('mapModal').classList.add('open');}
|
||||
function closeMap(){document.getElementById('mapModal').classList.remove('open');}
|
||||
|
||||
/* ===== 救护车支援编辑 ===== */
|
||||
var _ambs=[
|
||||
{plate:'陕A·120-01',station:'长庆油田职工医疗点',org:'长庆油田职工医院',driver:'李强',driverTel:'138-9101-2001'},
|
||||
{plate:'陕A·120-02',station:'采油一厂医疗点',org:'采油一厂职工医院',driver:'王磊',driverTel:'138-9102-3002'},
|
||||
{plate:'陕A·120-03',station:'采油二厂医疗点',org:'采油二厂职工医院',driver:'赵刚',driverTel:'138-9103-4003'},
|
||||
{plate:'陕A·120-05',station:'第一采气厂医疗点',org:'第一采气厂职工医院',driver:'孙涛',driverTel:'138-9105-6005'}
|
||||
];
|
||||
var _selectedAmb=null;
|
||||
function renderAmbDrop(kw){
|
||||
var drop=document.getElementById('ambDrop');kw=(kw||'').toLowerCase();var html='',c=0;
|
||||
_ambs.forEach(function(a,i){
|
||||
if(kw&&a.plate.toLowerCase().indexOf(kw)<0&&a.station.toLowerCase().indexOf(kw)<0&&a.org.toLowerCase().indexOf(kw)<0)return;
|
||||
var sel=(_selectedAmb&&_selectedAmb.plate===a.plate)?' selected':'';
|
||||
html+='<div class="select-search__option'+sel+'" onclick="pickAmb('+i+')"><div class="select-search__name">'+a.plate+'</div><div class="select-search__sub">'+a.station+' · '+a.org+'</div></div>';c++;
|
||||
});
|
||||
if(!c)html='<div class="select-search__empty">无匹配救护车</div>';
|
||||
drop.innerHTML=html;
|
||||
}
|
||||
function toggleAmbDrop(){var d=document.getElementById('ambDrop');if(d.classList.contains('open')){d.classList.remove('open');return;}renderAmbDrop(document.getElementById('ambInput').value);d.classList.add('open');}
|
||||
function filterAmbs(){renderAmbDrop(document.getElementById('ambInput').value);document.getElementById('ambDrop').classList.add('open');}
|
||||
function pickAmb(idx){
|
||||
_selectedAmb=_ambs[idx];
|
||||
document.getElementById('ambInput').value=_selectedAmb.plate;
|
||||
document.getElementById('ambDrop').classList.remove('open');
|
||||
document.getElementById('ad_station').textContent=_selectedAmb.station;
|
||||
document.getElementById('ad_org').textContent=_selectedAmb.org;
|
||||
document.getElementById('ad_driver').textContent=_selectedAmb.driver;
|
||||
document.getElementById('ad_driverTel').textContent=_selectedAmb.driverTel;
|
||||
document.getElementById('ambDriverCard').classList.add('show');
|
||||
}
|
||||
function editAmb(){
|
||||
document.getElementById('ambInfoView').style.display='none';
|
||||
document.getElementById('ambEditView').style.display='block';
|
||||
document.getElementById('ambEditBtn').style.display='none';
|
||||
// 回填当前数据
|
||||
var plate=document.getElementById('av_plate').textContent;
|
||||
document.getElementById('ambInput').value=plate;
|
||||
_selectedAmb=null;
|
||||
for(var i=0;i<_ambs.length;i++){if(_ambs[i].plate===plate){_selectedAmb=_ambs[i];break;}}
|
||||
if(_selectedAmb){
|
||||
document.getElementById('ad_station').textContent=_selectedAmb.station;
|
||||
document.getElementById('ad_org').textContent=_selectedAmb.org;
|
||||
document.getElementById('ad_driver').textContent=_selectedAmb.driver;
|
||||
document.getElementById('ad_driverTel').textContent=_selectedAmb.driverTel;
|
||||
document.getElementById('ambDriverCard').classList.add('show');
|
||||
}
|
||||
document.getElementById('ambEscort').value=document.getElementById('av_escort').textContent;
|
||||
document.getElementById('ambEscortTel').value=document.getElementById('av_escortTel').textContent;
|
||||
}
|
||||
function saveAmb(){
|
||||
if(_selectedAmb){
|
||||
document.getElementById('av_plate').textContent=_selectedAmb.plate;
|
||||
document.getElementById('av_station').textContent=_selectedAmb.station;
|
||||
document.getElementById('av_org').textContent=_selectedAmb.org;
|
||||
document.getElementById('av_driver').textContent=_selectedAmb.driver;
|
||||
document.getElementById('av_driverTel').textContent=_selectedAmb.driverTel;
|
||||
}
|
||||
document.getElementById('av_escort').textContent=document.getElementById('ambEscort').value;
|
||||
document.getElementById('av_escortTel').textContent=document.getElementById('ambEscortTel').value;
|
||||
document.getElementById('ambInfoView').style.display='';
|
||||
document.getElementById('ambEditView').style.display='none';
|
||||
document.getElementById('ambEditBtn').style.display='';
|
||||
}
|
||||
function cancelAmb(){
|
||||
document.getElementById('ambInfoView').style.display='';
|
||||
document.getElementById('ambEditView').style.display='none';
|
||||
document.getElementById('ambEditBtn').style.display='';
|
||||
document.getElementById('ambDriverCard').classList.remove('show');
|
||||
_selectedAmb=null;
|
||||
}
|
||||
document.addEventListener('click',function(e){if(!document.getElementById('ambSelect').contains(e.target))document.getElementById('ambDrop').classList.remove('open');});
|
||||
|
||||
var _editSvg='<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
|
||||
var _delSvg='<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
|
||||
var _okSvg='<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.5 3.5L13 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
|
||||
function reindexSummary(){
|
||||
var items=document.querySelectorAll('#summaryList .summary-item');
|
||||
items.forEach(function(li,i){li.querySelector('.summary-item__idx').textContent=(i+1)+'.';});
|
||||
}
|
||||
function editSummary(btn){
|
||||
var li=btn.closest('.summary-item');
|
||||
var span=li.querySelector('.summary-item__text');
|
||||
var val=span.textContent;
|
||||
var input=document.createElement('input');
|
||||
input.className='summary-item__input';
|
||||
input.value=val;
|
||||
span.replaceWith(input);
|
||||
input.focus();
|
||||
li.querySelectorAll('.summary-item__btn').forEach(function(b){b.style.display='none';});
|
||||
var okBtn=document.createElement('button');
|
||||
okBtn.className='summary-item__btn summary-item__btn--ok';
|
||||
okBtn.title='确认';
|
||||
okBtn.innerHTML=_okSvg;
|
||||
okBtn.onclick=function(){confirmEdit(li,input);};
|
||||
li.appendChild(okBtn);
|
||||
input.addEventListener('keydown',function(e){if(e.key==='Enter')confirmEdit(li,input);});
|
||||
}
|
||||
function confirmEdit(li,input){
|
||||
var val=input.value.trim();
|
||||
if(!val)return;
|
||||
var span=document.createElement('span');
|
||||
span.className='summary-item__text';
|
||||
span.textContent=val;
|
||||
input.replaceWith(span);
|
||||
var okBtn=li.querySelector('.summary-item__btn--ok');
|
||||
if(okBtn)okBtn.remove();
|
||||
li.querySelectorAll('.summary-item__btn').forEach(function(b){b.style.display='';});
|
||||
}
|
||||
function delSummary(btn){
|
||||
btn.closest('.summary-item').remove();
|
||||
reindexSummary();
|
||||
}
|
||||
function addSummary(){
|
||||
var list=document.getElementById('summaryList');
|
||||
var count=list.children.length+1;
|
||||
var li=document.createElement('li');
|
||||
li.className='summary-item';
|
||||
li.innerHTML='<span class="summary-item__idx">'+count+'.</span><input class="summary-item__input" placeholder="请输入小结内容"><button class="summary-item__btn summary-item__btn--ok" title="确认" onclick="confirmEdit(this.closest(\'.summary-item\'),this.closest(\'.summary-item\').querySelector(\'.summary-item__input\'))">'+_okSvg+'</button><button class="summary-item__btn summary-item__btn--danger" title="删除" onclick="delSummary(this)" style="display:none">'+_delSvg+'</button>';
|
||||
list.appendChild(li);
|
||||
li.querySelector('.summary-item__input').focus();
|
||||
var okBtn=li.querySelector('.summary-item__btn--ok');
|
||||
var origConfirm=function(){
|
||||
var inp=li.querySelector('.summary-item__input');
|
||||
var val=inp.value.trim();
|
||||
if(!val){li.remove();reindexSummary();return;}
|
||||
var span=document.createElement('span');
|
||||
span.className='summary-item__text';
|
||||
span.textContent=val;
|
||||
inp.replaceWith(span);
|
||||
okBtn.remove();
|
||||
var editBtn=document.createElement('button');
|
||||
editBtn.className='summary-item__btn';
|
||||
editBtn.title='编辑';
|
||||
editBtn.innerHTML=_editSvg;
|
||||
editBtn.onclick=function(){editSummary(editBtn);};
|
||||
var delBtn=li.querySelector('.summary-item__btn--danger');
|
||||
delBtn.style.display='';
|
||||
li.insertBefore(editBtn,delBtn);
|
||||
};
|
||||
okBtn.onclick=origConfirm;
|
||||
li.querySelector('.summary-item__input').addEventListener('keydown',function(e){if(e.key==='Enter')origConfirm();});
|
||||
}
|
||||
|
||||
/* 角色检测：操作人员视角 */
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var role=params.get('role');
|
||||
if(role==='operator'){
|
||||
document.title='应急就医 - 工单详情 | 健康长庆原型';
|
||||
document.querySelector('.top-bar__logo').lastChild.textContent='\u00a0应急就医–操作人员';
|
||||
document.querySelector('.top-bar__nav').innerHTML=
|
||||
'<a href="../operator/emergency-active.html">正在应急</a>'+
|
||||
'<a href="center-work-order.html?role=operator" class="active">应急工单</a>'+
|
||||
'<a href="center-call-record.html?role=operator">通话记录</a>'+
|
||||
'<a href="center-serious-illness.html?role=operator">大病就医</a>'+
|
||||
'<a href="center-schedule.html?role=operator">值班小组</a>';
|
||||
document.querySelector('.avatar').textContent='操';
|
||||
document.querySelector('.top-bar__right span:last-child').textContent='操作人员 ▾';
|
||||
var sidebar=document.querySelector('.sidebar');
|
||||
if(sidebar)sidebar.style.display='none';
|
||||
document.querySelector('.main').style.marginLeft='0';
|
||||
var bc=document.querySelector('.breadcrumb a');
|
||||
if(bc)bc.href='center-work-order.html?role=operator';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -213,7 +213,11 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<div id="actionBar" style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary" id="btnAddOrder" style="display:none;" onclick="location.href='center-work-order-add.html?role=operator'">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" 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 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
@@ -401,6 +405,38 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var role=params.get('role');
|
||||
if(role==='operator'){
|
||||
/* 标题 */
|
||||
document.title='应急就医 - 应急工单 | 健康长庆原型';
|
||||
/* Logo */
|
||||
document.querySelector('.top-bar__logo').lastChild.textContent='\u00a0应急就医–操作人员';
|
||||
/* 顶部导航 */
|
||||
document.querySelector('.top-bar__nav').innerHTML=
|
||||
'<a href="../operator/emergency-active.html">正在应急</a>'+
|
||||
'<a href="center-work-order.html?role=operator" class="active">应急工单</a>'+
|
||||
'<a href="center-call-record.html?role=operator">通话记录</a>'+
|
||||
'<a href="center-serious-illness.html?role=operator">大病就医</a>'+
|
||||
'<a href="center-schedule.html?role=operator">值班小组</a>';
|
||||
/* 右侧角色 */
|
||||
document.querySelector('.avatar').textContent='操';
|
||||
document.querySelector('.top-bar__right span:last-child').textContent='操作人员 ▾';
|
||||
/* 隐藏侧边栏，调整主内容区 */
|
||||
var sidebar=document.querySelector('.sidebar');
|
||||
if(sidebar)sidebar.style.display='none';
|
||||
document.querySelector('.main').style.marginLeft='0';
|
||||
/* 显示新增应急工单按钮 */
|
||||
document.getElementById('btnAddOrder').style.display='';
|
||||
/* 详情链接指向操作人员路径 */
|
||||
document.querySelectorAll('a.link[href="center-work-order-detail.html"]').forEach(function(a){
|
||||
a.href='center-work-order-detail.html?role=operator';
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -73,6 +73,28 @@
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.desc-box{background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:var(--font-sm);color:#7C5800;line-height:1.7;}
|
||||
.desc-box strong{color:#5C3D00;}
|
||||
/* 弹窗 */
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:500;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:780px;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__header h3{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:20px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
|
||||
.detail-grid--3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 32px;}
|
||||
.detail-section{margin-bottom:20px;}
|
||||
.detail-section:last-child{margin-bottom:0;}
|
||||
.detail-section__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:16px;}
|
||||
.detail-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.detail-item .label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.detail-item .value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
.detail-item .value.mono{font-family:monospace;color:var(--text-secondary);}
|
||||
.detail-item--full{grid-column:1/-1;}
|
||||
.tag-status{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-status--ok{background:#F6FFED;color:var(--success);}
|
||||
.tag-status--fail{background:#FFF1F0;color:var(--danger);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -114,17 +136,26 @@
|
||||
|
||||
<!-- 说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>异常数据定义：</strong>应急工单异常（>1个月未完成）、云坐席通话记录异常（未查询到员工信息）等情形。
|
||||
<strong>异常数据定义：</strong>工单超时（应急工单状态>1个月未完成）、通话异常（云坐席通话未查询到员工信息）等情形。
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<select class="filter-select" type="text" value="2025" >
|
||||
<option>2026</option>
|
||||
<option>2025</option>
|
||||
<option>2024</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label>异常类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>工单超时</option>
|
||||
<option>设备异常</option>
|
||||
<option>通话异常</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -137,15 +168,6 @@
|
||||
<option>延安应急中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>处理状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>待处理</option>
|
||||
<option>已处理</option>
|
||||
<option>已忽略</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围：</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
@@ -175,113 +197,86 @@
|
||||
<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>1</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420001</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420035</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>工单处理超时，已超过30分钟未响应</td>
|
||||
<td>王建国</td>
|
||||
<td>2026-04-20 09:15</td>
|
||||
<td><span class="tag tag-red">待处理</span></td>
|
||||
<td>—</td>
|
||||
<td><div class="action-btns"><span class="link">处理</span><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openWoDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420001</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420035</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>工单处理超时，已超过30分钟未响应</td>
|
||||
<td>王建国</td>
|
||||
<td>2026-04-20 09:15</td>
|
||||
<td><span class="tag tag-red">待处理</span></td>
|
||||
<td>—</td>
|
||||
<td><div class="action-btns"><span class="link">处理</span><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openWoDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419003</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419045</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>应急通话中断，持续时间不足1分钟</td>
|
||||
<td>005</td>
|
||||
<td>2026-04-19 16:30</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>王建国</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openCallDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419004</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419012</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>工单派单超时，超过15分钟未分配</td>
|
||||
<td>王建国</td>
|
||||
<td>2026-04-19 14:20</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>李晓明</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openWoDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419003</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419045</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>应急通话中断，持续时间不足1分钟</td>
|
||||
<td>008</td>
|
||||
<td>2026-04-19 16:30</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>王建国</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openCallDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260418006</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260418023</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>通话录音失败，未能保存通话记录</td>
|
||||
<td>020</td>
|
||||
<td>2026-04-18 09:33</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>张明</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openCallDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260417007</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260417056</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>工单关闭超时，已超过2小时未完结</td>
|
||||
<td>王建国</td>
|
||||
<td>2026-04-17 15:48</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td>陈刚</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openWoDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419003</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419045</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>应急通话中断，持续时间不足1分钟</td>
|
||||
<td>090</td>
|
||||
<td>2026-04-19 16:30</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>王建国</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
<td><div class="action-btns"><span class="link" onclick="openCallDetail(this)">详情</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -298,5 +293,141 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 通话异常详情弹窗 -->
|
||||
<div class="modal-mask" id="callDetailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>通话异常详情</h3>
|
||||
<button class="modal__close" onclick="closeCallDetail()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><span class="label">通话编号</span><span class="value mono" id="md_callNo">—</span></div>
|
||||
<div class="detail-item"><span class="label">员工姓名</span><span class="value" id="md_name">—</span></div>
|
||||
<div class="detail-item"><span class="label">员工编号</span><span class="value mono" id="md_empNo">—</span></div>
|
||||
<div class="detail-item"><span class="label">单位部门</span><span class="value" id="md_dept">—</span></div>
|
||||
<div class="detail-item"><span class="label">呼叫中心</span><span class="value" id="md_center">—</span></div>
|
||||
<div class="detail-item"><span class="label">坐席工号</span><span class="value mono" id="md_seat">—</span></div>
|
||||
<div class="detail-item"><span class="label">接入电话</span><span class="value mono" id="md_phone">—</span></div>
|
||||
<div class="detail-item"><span class="label">拨打时间</span><span class="value" id="md_dialTime">—</span></div>
|
||||
<div class="detail-item"><span class="label">接听状态</span><span class="value" id="md_status">—</span></div>
|
||||
<div class="detail-item"><span class="label">接听时间</span><span class="value" id="md_answerTime">—</span></div>
|
||||
<div class="detail-item"><span class="label">结束时间</span><span class="value" id="md_endTime">—</span></div>
|
||||
<div class="detail-item"><span class="label">通话时长</span><span class="value" id="md_duration">—</span></div>
|
||||
<div class="detail-item"><span class="label">异常原因</span><span class="value" id="md_reason" style="color:var(--danger);">—</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工单超时详情弹窗 -->
|
||||
<div class="modal-mask" id="woDetailModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h3>工单超时详情</h3>
|
||||
<button class="modal__close" onclick="closeWoDetail()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="detail-section">
|
||||
<div class="detail-section__title">员工信息</div>
|
||||
<div class="detail-grid--3">
|
||||
<div class="detail-item"><span class="label">姓名</span><span class="value" id="wo_name">—</span></div>
|
||||
<div class="detail-item"><span class="label">性别</span><span class="value" id="wo_gender">—</span></div>
|
||||
<div class="detail-item"><span class="label">年龄</span><span class="value" id="wo_age">—</span></div>
|
||||
<div class="detail-item"><span class="label">员工编号</span><span class="value mono" id="wo_empNo">—</span></div>
|
||||
<div class="detail-item"><span class="label">所属单位</span><span class="value" id="wo_company">—</span></div>
|
||||
<div class="detail-item"><span class="label">所属部门</span><span class="value" id="wo_dept">—</span></div>
|
||||
<div class="detail-item"><span class="label">手机号</span><span class="value mono" id="wo_phone">—</span></div>
|
||||
<div class="detail-item"><span class="label">身份证号</span><span class="value mono" id="wo_idCard">—</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<div class="detail-section__title">工单信息</div>
|
||||
<div class="detail-grid--3">
|
||||
<div class="detail-item"><span class="label">工单编号</span><span class="value mono" id="wo_orderNo">—</span></div>
|
||||
<div class="detail-item"><span class="label">工单类型</span><span class="value" id="wo_type">—</span></div>
|
||||
<div class="detail-item"><span class="label">工单状态</span><span class="value" id="wo_status">—</span></div>
|
||||
<div class="detail-item"><span class="label">求助方式</span><span class="value" id="wo_helpType">—</span></div>
|
||||
<div class="detail-item"><span class="label">求助时间</span><span class="value" id="wo_helpTime">—</span></div>
|
||||
<div class="detail-item"><span class="label">位置信息</span><span class="value" id="wo_location" style="color:var(--primary);">—</span></div>
|
||||
<div class="detail-item"><span class="label">应急中心</span><span class="value" id="wo_center">—</span></div>
|
||||
<div class="detail-item"><span class="label">操作人员</span><span class="value" id="wo_operator">—</span></div>
|
||||
<div class="detail-item"><span class="label">专业人员</span><span class="value" id="wo_professional">—</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 通话异常模拟数据（按坐席工号索引）
|
||||
var callMockData={
|
||||
'005':{callNo:'TH20260419010',name:'—',empNo:'—',dept:'-',center:'西安应急中心',seat:'005',phone:'138****2210',dialTime:'2026-04-19 16:28',status:'未接听',answerTime:'—',endTime:'2026-04-19 16:30',duration:'0秒',reason:'云坐席通话未查询到员工信息'},
|
||||
'008':{callNo:'TH20260419011',name:'—',empNo:'—',dept:'-',center:'西安应急中心',seat:'008',phone:'159****7731',dialTime:'2026-04-19 16:25',status:'已接听',answerTime:'2026-04-19 16:26',endTime:'2026-04-19 16:30',duration:'4分12秒',reason:'云坐席通话未查询到员工信息'},
|
||||
'020':{callNo:'TH20260418015',name:'—',empNo:'—',dept:'-',center:'庆阳应急中心',seat:'020',phone:'186****0053',dialTime:'2026-04-18 09:30',status:'未接听',answerTime:'—',endTime:'2026-04-18 09:33',duration:'0秒',reason:'云坐席通话未查询到员工信息'},
|
||||
'090':{callNo:'TH20260419012',name:'—',empNo:'—',dept:'-',center:'西安应急中心',seat:'090',phone:'177****4409',dialTime:'2026-04-19 16:27',status:'已接听',answerTime:'2026-04-19 16:28',endTime:'2026-04-19 16:30',duration:'2分05秒',reason:'云坐席通话未查询到员工信息'}
|
||||
};
|
||||
|
||||
function openCallDetail(linkEl){
|
||||
var tr=linkEl.closest('tr');
|
||||
var typeTag=tr.querySelector('.tag');
|
||||
if(!typeTag||typeTag.textContent.trim()!=='通话异常')return;
|
||||
var seatNo=tr.cells[4].textContent.trim();
|
||||
var data=callMockData[seatNo]||{callNo:'—',name:'—',empNo:'—',dept:'—',center:tr.cells[3].textContent.trim(),seat:seatNo,phone:'—',dialTime:tr.cells[5].textContent.trim(),status:'—',answerTime:'—',endTime:'—',duration:'—',reason:'云坐席通话未查询到员工信息'};
|
||||
document.getElementById('md_callNo').textContent=data.callNo;
|
||||
document.getElementById('md_name').textContent=data.name;
|
||||
document.getElementById('md_empNo').textContent=data.empNo;
|
||||
document.getElementById('md_dept').textContent=data.dept;
|
||||
document.getElementById('md_center').textContent=data.center;
|
||||
document.getElementById('md_seat').textContent=data.seat;
|
||||
document.getElementById('md_phone').textContent=data.phone;
|
||||
document.getElementById('md_dialTime').textContent=data.dialTime;
|
||||
var statusEl=document.getElementById('md_status');
|
||||
statusEl.innerHTML=data.status==='已接听'?'<span class="tag-status tag-status--ok">已接听</span>':'<span class="tag-status tag-status--fail">未接听</span>';
|
||||
document.getElementById('md_answerTime').textContent=data.answerTime;
|
||||
document.getElementById('md_endTime').textContent=data.endTime;
|
||||
document.getElementById('md_duration').textContent=data.duration;
|
||||
document.getElementById('md_reason').textContent=data.reason;
|
||||
document.getElementById('callDetailModal').classList.add('show');
|
||||
}
|
||||
function closeCallDetail(){document.getElementById('callDetailModal').classList.remove('show');}
|
||||
document.getElementById('callDetailModal').addEventListener('click',function(e){if(e.target===this)closeCallDetail();});
|
||||
|
||||
// 工单超时模拟数据（按工单编号索引）
|
||||
var woMockData={
|
||||
'WO20260420035':{name:'王旭',gender:'男',age:'53',empNo:'56985',company:'公司机关',dept:'健康科',phone:'18566985523',idCard:'430626196500236',orderNo:'YJ5633256',type:'正常派单',status:'未完成',helpType:'应急视频',helpTime:'2026-03-21 15:12:21',location:'陕西省西安市雁塔区电子一路56号',center:'西安应急中心',operator:'刘旭',professional:'刘旭'},
|
||||
'WO20260419012':{name:'李明辉',gender:'男',age:'47',empNo:'32156',company:'采油二厂',dept:'生产运行科',phone:'13709125587',idCard:'610402197902156',orderNo:'YJ5633102',type:'正常派单',status:'未完成',helpType:'电话求助',helpTime:'2026-03-18 10:35:40',location:'甘肃省庆阳市西峰区长庆大道128号',center:'延安应急中心',operator:'王建国',professional:'张婧'},
|
||||
'WO20260417056':{name:'赵志刚',gender:'男',age:'51',empNo:'41023',company:'采油三厂',dept:'工程技术科',phone:'15891034421',idCard:'610502197503087',orderNo:'YJ5632890',type:'正常派单',status:'未完成',helpType:'一键求助',helpTime:'2026-03-15 08:22:15',location:'陕西省延安市宝塔区长青路89号',center:'延安应急中心',operator:'王建国',professional:'张明'}
|
||||
};
|
||||
|
||||
function openWoDetail(linkEl){
|
||||
var tr=linkEl.closest('tr');
|
||||
var typeTag=tr.querySelector('.tag');
|
||||
if(!typeTag||(typeTag.textContent.trim()!=='工单超时'&&typeTag.textContent.trim()!=='应急工单状态异常'))return;
|
||||
var woNo=tr.cells[2].textContent.trim();
|
||||
var data=woMockData[woNo]||woMockData['WO20260420035'];
|
||||
document.getElementById('wo_name').textContent=data.name;
|
||||
document.getElementById('wo_gender').textContent=data.gender;
|
||||
document.getElementById('wo_age').textContent=data.age;
|
||||
document.getElementById('wo_empNo').textContent=data.empNo;
|
||||
document.getElementById('wo_company').textContent=data.company;
|
||||
document.getElementById('wo_dept').textContent=data.dept;
|
||||
document.getElementById('wo_phone').textContent=data.phone;
|
||||
document.getElementById('wo_idCard').textContent=data.idCard;
|
||||
document.getElementById('wo_orderNo').textContent=data.orderNo;
|
||||
document.getElementById('wo_type').textContent=data.type;
|
||||
document.getElementById('wo_status').innerHTML='<span class="tag-status tag-status--fail">未完成</span>';
|
||||
document.getElementById('wo_helpType').textContent=data.helpType;
|
||||
document.getElementById('wo_helpTime').textContent=data.helpTime;
|
||||
document.getElementById('wo_location').textContent=data.location;
|
||||
document.getElementById('wo_center').textContent=data.center;
|
||||
document.getElementById('wo_operator').textContent=data.operator;
|
||||
document.getElementById('wo_professional').textContent=data.professional;
|
||||
document.getElementById('woDetailModal').classList.add('show');
|
||||
}
|
||||
function closeWoDetail(){document.getElementById('woDetailModal').classList.remove('show');}
|
||||
document.getElementById('woDetailModal').addEventListener('click',function(e){if(e.target===this)closeWoDetail();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,241 +2,8 @@
|
||||
<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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);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:#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-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;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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;}
|
||||
/* 标签 */
|
||||
.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-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.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);}
|
||||
</style>
|
||||
<script>window.location.replace('../admin/center-call-record.html?role=operator');</script>
|
||||
</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="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>通话编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入通话编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>通话类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围：</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<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 style="font-size:var(--font-sm);color:var(--text-secondary);">共 230 条</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>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260420001</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td><span class="link">WO20260420003</span></td>
|
||||
<td>张伟</td>
|
||||
<td>2026-04-20 09:10</td>
|
||||
<td>15:23</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260420002</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td><span class="link">WO20260420005</span></td>
|
||||
<td>李明</td>
|
||||
<td>2026-04-20 09:02</td>
|
||||
<td>08:45</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260420003</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td><span class="link">WO20260420008</span></td>
|
||||
<td>王芳</td>
|
||||
<td>2026-04-20 08:45</td>
|
||||
<td>22:10</td>
|
||||
<td><span class="tag tag-blue">通话中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260419004</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td><span class="link">WO20260419012</span></td>
|
||||
<td>赵刚</td>
|
||||
<td>2026-04-19 16:20</td>
|
||||
<td>05:30</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260419005</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td><span class="link">WO20260419015</span></td>
|
||||
<td>陈小红</td>
|
||||
<td>2026-04-19 14:58</td>
|
||||
<td>12:08</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260419006</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td><span class="link">WO20260419018</span></td>
|
||||
<td>孙磊</td>
|
||||
<td>2026-04-19 11:32</td>
|
||||
<td>03:42</td>
|
||||
<td><span class="tag tag-red">未接通</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 230 条</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">23</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>
|
||||
</body>
|
||||
</html>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@@ -2,261 +2,8 @@
|
||||
<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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);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:#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-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;}
|
||||
/* 标签 */
|
||||
.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-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 值班小组卡片网格 */
|
||||
.group-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.group-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px 24px;}
|
||||
.group-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.group-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.group-card__status{font-size:var(--font-xs);}
|
||||
.member-list{display:flex;flex-direction:column;gap:12px;}
|
||||
.member-item{display:flex;align-items:center;gap:12px;padding:8px 0;}
|
||||
.member-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:500;flex-shrink:0;}
|
||||
.member-info{flex:1;}
|
||||
.member-name{font-size:var(--font-sm);font-weight:500;}
|
||||
.member-role{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.member-status{font-size:var(--font-xs);}
|
||||
/* 页面标题 */
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
</style>
|
||||
<script>window.location.replace('../admin/center-schedule.html?role=operator');</script>
|
||||
</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="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-header__title">值班小组</div>
|
||||
<div class="page-header__desc">当前值班分组信息总览 · 2026-04-20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 值班小组卡片网格 -->
|
||||
<div class="group-grid">
|
||||
<!-- A组 - 值班中 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">A组</div>
|
||||
<div class="group-card__status"><span class="tag tag-green">值班中</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">王</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">王建国</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">李</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">李晓明</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">张</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">张华</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">刘</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">刘洋</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-orange">忙碌</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- B组 - 待命 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">B组</div>
|
||||
<div class="group-card__status"><span class="tag tag-blue">待命</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">赵</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">赵伟</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">陈</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">陈刚</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">周</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">周婷</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C组 - 休息 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">C组</div>
|
||||
<div class="group-card__status"><span class="tag tag-gray">休息</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">孙</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">孙磊</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">吴</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">吴强</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">郑</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">郑明</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- D组 - 待命 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">D组</div>
|
||||
<div class="group-card__status"><span class="tag tag-blue">待命</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">何</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">何军</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">马</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">马超</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">黄</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">黄亮</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">杨</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">杨洋</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,218 +2,8 @@
|
||||
<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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);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:#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-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;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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;}
|
||||
/* 标签 */
|
||||
.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-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.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);}
|
||||
</style>
|
||||
<script>window.location.replace('../admin/center-serious-illness.html?role=operator');</script>
|
||||
</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="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>就医状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>就医中</option>
|
||||
<option>已完成</option>
|
||||
</select>
|
||||
</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 style="font-size:var(--font-sm);color:var(--text-secondary);">共 45 条</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>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>急性心肌梗死</td>
|
||||
<td>西安交通大学第一附属医院</td>
|
||||
<td>2026-04-20 10:00</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP035</td>
|
||||
<td>脑出血</td>
|
||||
<td>陕西省人民医院</td>
|
||||
<td>2026-04-19 14:30</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP102</td>
|
||||
<td>肺癌(早期)</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>2026-04-18 09:15</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>赵刚</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP078</td>
|
||||
<td>腰椎间盘突出(重度)</td>
|
||||
<td>西安交通大学第一附属医院</td>
|
||||
<td>2026-04-17 16:45</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>陈小红</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP156</td>
|
||||
<td>冠状动脉粥样硬化</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>2026-04-16 11:20</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 45 条</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>
|
||||
</body>
|
||||
</html>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@@ -2,259 +2,8 @@
|
||||
<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;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--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__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);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:#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-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;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.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;}
|
||||
/* 标签 */
|
||||
.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-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.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);}
|
||||
</style>
|
||||
<script>window.location.replace('../admin/center-work-order.html?role=operator');</script>
|
||||
</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="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>工单编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入工单编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部状态</option>
|
||||
<option>待处理</option>
|
||||
<option>处理中</option>
|
||||
<option>已完成</option>
|
||||
<option>已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>求助方式：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
<option>拨打120</option>
|
||||
</select>
|
||||
</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 style="font-size:var(--font-sm);color:var(--text-secondary);">共 128 条</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>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420001</td>
|
||||
<td>张伟</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-20 09:10</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420002</td>
|
||||
<td>李明</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td>2026-04-20 09:02</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>工伤事故</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420003</td>
|
||||
<td>王芳</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-20 08:45</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420004</td>
|
||||
<td>赵刚</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>2026-04-20 08:30</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419005</td>
|
||||
<td>陈小红</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td>2026-04-19 16:20</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>工伤事故</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419006</td>
|
||||
<td>孙磊</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-19 14:55</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419007</td>
|
||||
<td>周婷</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>2026-04-19 11:30</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260418008</td>
|
||||
<td>吴强</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td>2026-04-18 09:45</td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>误报</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 128 条</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">13</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>
|
||||
</body>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@@ -18,18 +18,22 @@
|
||||
.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:#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-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;}
|
||||
/* 顶部导航菜单 */
|
||||
.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);}
|
||||
/* 主内容区 - IM布局 */
|
||||
.main{margin-left:240px;margin-top:56px;height:calc(100vh - 56px);display:flex;overflow:hidden;}
|
||||
.main{margin-top:56px;height:calc(100vh - 56px);display:flex;overflow:hidden;}
|
||||
/* IM左侧面板 - 联系人列表 */
|
||||
.im-left{width:320px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
|
||||
.im-left__search{padding:16px;border-bottom:1px solid var(--border);}
|
||||
.im-left__search input{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;}
|
||||
.im-left__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);}
|
||||
.im-left__search input{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;}
|
||||
.im-left__search input:focus{border-color:var(--primary);}
|
||||
.im-left__list{flex:1;overflow-y:auto;}
|
||||
.contact-item{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid #f5f5f5;position:relative;}
|
||||
@@ -44,7 +48,7 @@
|
||||
.contact-msg{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.contact-badge{position:absolute;top:12px;right:16px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;}
|
||||
/* IM右侧面板 - 对话区 */
|
||||
.im-right{flex:1;display:flex;flex-direction:column;background:#fff;}
|
||||
.im-right{flex:1;display:flex;flex-direction:column;background:#fff;min-width:0;border-right:1px solid var(--border);}
|
||||
.im-right__header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.im-right__patient{display:flex;align-items:center;gap:16px;}
|
||||
.im-right__patient-name{font-size:var(--font-base);font-weight:600;}
|
||||
@@ -73,12 +77,184 @@
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:var(--danger);color:#fff;border:none;}
|
||||
.btn-danger:hover{background:#ff7875;}
|
||||
.btn-sm{height:30px;padding:0 12px;font-size:var(--font-xs);}
|
||||
.btn-warning{background:var(--warning);color:#fff;border:none;}
|
||||
.btn-warning:hover{background:#ffc53d;}
|
||||
.im-right__input{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;}
|
||||
.im-right__input input{flex:1;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 16px;font-size:var(--font-sm);outline:none;}
|
||||
.im-right__input input:focus{border-color:var(--primary);}
|
||||
.im-right__input .btn{height:40px;}
|
||||
.im-right__input{padding:12px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;background:#fff;}
|
||||
.chat-toolbar{display:flex;gap:8px;}
|
||||
.toolbar-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;gap:4px;font-size:var(--font-xs);padding:4px 8px;border-radius:var(--radius-sm);transition:all .15s;}
|
||||
.toolbar-btn:hover{background:#F5F5F5;color:var(--primary);}
|
||||
.toolbar-btn svg{width:16px;height:16px;}
|
||||
.toolbar-btn--call{color:var(--success);}
|
||||
.toolbar-btn--call:hover{background:#F6FFED;color:var(--success);}
|
||||
.toolbar-btn--video{color:var(--primary);}
|
||||
.toolbar-btn--video:hover{background:var(--primary-light);color:var(--primary);}
|
||||
/* 常用语弹出面板 */
|
||||
.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);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:#F5F7FA;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;}
|
||||
.phrase-pop__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.phrase-pop::after{content:'';position:absolute;bottom:-6px;left:24px;width:10px;height:10px;background:#fff;transform:rotate(45deg);box-shadow:2px 2px 4px rgba(0,0,0,0.06);}
|
||||
.chat-input-wrap{display:flex;gap:8px;align-items:flex-end;}
|
||||
.chat-input{flex:1;min-height:80px;max-height:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:none;font-family:inherit;line-height:1.6;}
|
||||
.chat-input:focus{border-color:var(--primary);}
|
||||
/* 地图弹窗 */
|
||||
.map-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;}
|
||||
.map-modal.open{display:flex;}
|
||||
.map-modal__box{background:#fff;border-radius:var(--radius-md);width:1080px;max-height:90vh;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.18);position:relative;display:flex;flex-direction:column;}
|
||||
.map-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
|
||||
.map-modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.map-modal__close{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;transition:all .15s;}
|
||||
.map-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
|
||||
.map-modal__body{display:flex;flex:1;overflow:hidden;}
|
||||
.map-modal__left{flex:1;display:flex;flex-direction:column;min-width:0;}
|
||||
.map-modal__right{width:340px;border-left:1px solid var(--border);display:flex;flex-direction:column;background:#FAFAFA;}
|
||||
.map-modal__map{width:100%;height:320px;background:#E8F4FD;position:relative;overflow:hidden;}
|
||||
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);background-size:40px 40px;}
|
||||
.map-road{position:absolute;background:rgba(255,255,255,0.7);}
|
||||
.map-road--h{height:3px;left:0;right:0;}
|
||||
.map-road--v{width:3px;top:0;bottom:0;}
|
||||
.map-label{position:absolute;font-size:11px;color:#999;pointer-events:none;}
|
||||
.map-pin{position:absolute;top:42%;left:52%;transform:translate(-50%,-50%);z-index:10;width:40px;height:40px;background:rgba(255,77,79,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:pulse 1.5s ease-out infinite;}
|
||||
.map-pin::after{content:'';width:12px;height:12px;background:var(--danger);border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.3);}
|
||||
@keyframes pulse{0%{transform:translateX(-50%) scale(1);opacity:1;}100%{transform:translateX(-50%) scale(2.5);opacity:0;}}
|
||||
.map-building{position:absolute;background:rgba(24,144,255,0.08);border:1px solid rgba(24,144,255,0.2);border-radius:4px;font-size:10px;color:var(--primary);display:flex;align-items:center;justify-content:center;padding:4px;}
|
||||
.map-modal__info{padding:14px 20px;display:flex;flex-direction:column;gap:8px;}
|
||||
.map-info-row{display:flex;align-items:flex-start;gap:8px;font-size:var(--font-sm);}
|
||||
.map-info-row__label{color:var(--text-secondary);flex-shrink:0;min-width:70px;}
|
||||
.map-info-row__value{color:var(--text-primary);font-weight:500;}
|
||||
/* 右侧资源面板 */
|
||||
.res-panel__title{padding:14px 16px 10px;font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.res-panel__tabs{display:flex;gap:6px;padding:0 16px 12px;flex-wrap:wrap;}
|
||||
.res-tab{font-size:var(--font-xs);padding:3px 10px;border-radius:10px;cursor:pointer;background:#fff;color:var(--text-secondary);border:1px solid var(--border);transition:all .15s;white-space:nowrap;}
|
||||
.res-tab:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.res-tab.active{background:var(--primary-light);color:var(--primary);border-color:var(--primary);}
|
||||
.res-panel__list{flex:1;overflow-y:auto;padding:0 16px 16px;}
|
||||
.res-card{display:flex;gap:12px;padding:12px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:10px;transition:box-shadow .15s;}
|
||||
.res-card:hover{box-shadow:var(--shadow-sm);}
|
||||
.res-card__img{width:56px;height:56px;border-radius:var(--radius-sm);background:#E8F4FD;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
|
||||
.res-card__img svg{width:28px;height:28px;color:var(--primary);}
|
||||
.res-card__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
|
||||
.res-card__name{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.res-card__unit{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.res-card__dist{font-size:var(--font-xs);color:var(--primary);font-weight:500;}
|
||||
.res-card__addr{font-size:var(--font-xs);color:var(--text-placeholder);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.res-card__tel{font-size:var(--font-xs);color:var(--text-secondary);display:flex;align-items:center;gap:3px;}
|
||||
.res-card__tel svg{width:12px;height:12px;color:var(--success);flex-shrink:0;}
|
||||
.res-card__tel a{color:var(--primary);text-decoration:none;}
|
||||
.res-card__tel a:hover{text-decoration:underline;}
|
||||
.res-card.active{border-color:var(--primary);background:var(--primary-light);}
|
||||
/* 资源地图标记 */
|
||||
.res-marker{position:absolute;z-index:8;transform:translate(-50%,-100%);cursor:pointer;transition:transform .15s;}
|
||||
.res-marker:hover{transform:translate(-50%,-100%) scale(1.15);}
|
||||
.res-marker.active{transform:translate(-50%,-100%) scale(1.2);z-index:9;}
|
||||
.res-marker__pin{width:28px;height:36px;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.25));}
|
||||
.res-marker__label{position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;background:rgba(0,0,0,0.7);color:#fff;padding:2px 6px;border-radius:3px;pointer-events:none;}
|
||||
/* 结束应急弹窗 */
|
||||
.end-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;}
|
||||
.end-modal.open{display:flex;}
|
||||
.end-modal__box{background:#fff;border-radius:var(--radius-md);width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 24px rgba(0,0,0,0.18);position:relative;}
|
||||
.end-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.end-modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.end-modal__close{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;transition:all .15s;}
|
||||
.end-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
|
||||
.end-modal__body{padding:24px;}
|
||||
.end-modal__patient{font-size:var(--font-sm);color:var(--text-secondary);padding-bottom:16px;border-bottom:1px solid var(--border);display:flex;gap:32px;}
|
||||
.end-modal__warn{margin-top:20px;font-size:var(--font-base);font-weight:600;color:var(--text-primary);line-height:1.8;}
|
||||
.end-modal__hint{margin-top:8px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.end-modal__label{margin-top:20px;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;}
|
||||
.end-modal__label .required{color:var(--danger);margin-left:2px;}
|
||||
.end-modal__textarea{width:100%;min-height:100px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;line-height:1.6;}
|
||||
.end-modal__textarea:focus{border-color:var(--primary);}
|
||||
.end-modal__photos{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
|
||||
.end-modal__photo{width:80px;height:80px;border-radius:var(--radius-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#FAFAFA;position:relative;}
|
||||
.end-modal__photo svg{width:24px;height:24px;color:#bbb;}
|
||||
.end-modal__photo-label{font-size:var(--font-xs);color:var(--text-secondary);text-align:center;}
|
||||
.end-modal__photo-add{width:80px;height:80px;border-radius:var(--radius-sm);border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#bbb;font-size:28px;transition:all .15s;}
|
||||
.end-modal__photo-add:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.end-modal__photo-count{font-size:var(--font-xs);color:var(--text-secondary);margin-top:8px;}
|
||||
.end-modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px;}
|
||||
/* 应急结束卡片 */
|
||||
.end-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow-sm);min-width:180px;}
|
||||
.end-card__icon{width:44px;height:44px;border-radius:10px;background:var(--danger);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||||
.end-card__icon svg{width:24px;height:24px;}
|
||||
.end-card__text{font-size:var(--font-base);color:var(--text-primary);font-weight:600;margin-top:4px;}
|
||||
.end-card__time{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
/* 救助意见卡片消息 */
|
||||
.advice-card{width:320px;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 2px 12px rgba(24,144,255,0.15);border:1px solid #d6f0d6;}
|
||||
.advice-card__head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(135deg,#52C41A,#389e0d);color:#fff;}
|
||||
.advice-card__icon{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||||
.advice-card__icon svg{width:16px;height:16px;}
|
||||
.advice-card__title{font-size:var(--font-sm);font-weight:600;letter-spacing:0.5px;}
|
||||
.advice-card__body{padding:12px 14px;background:#f6ffed;font-size:var(--font-sm);line-height:1.7;color:var(--text-primary);word-break:break-word;}
|
||||
.advice-card__foot{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#f6ffed;border-top:1px dashed #d6f0d6;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.advice-card__doctor{display:flex;align-items:center;gap:4px;}
|
||||
/* 右侧值班面板 */
|
||||
.duty-panel{width:320px;flex-shrink:0;background:#fff;display:flex;flex-direction:column;overflow-y:auto;}
|
||||
.duty-panel__title{padding:16px 16px 12px;font-size:var(--font-sm);font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
/* 统计卡片 2x2 */
|
||||
.duty-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;}
|
||||
.duty-stat{background:#FAFAFA;border-radius:var(--radius-md);padding:12px;text-align:center;border:1px solid #f0f0f0;}
|
||||
.duty-stat__value{font-size:var(--font-xl);font-weight:700;color:var(--primary);line-height:1.2;}
|
||||
.duty-stat__value--danger{color:var(--danger);}
|
||||
.duty-stat__value--success{color:var(--success);}
|
||||
.duty-stat__value--warning{color:var(--warning);}
|
||||
.duty-stat__label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;}
|
||||
.duty-stat__unit{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
/* 月视图日历 */
|
||||
.duty-calendar{padding:12px 16px 16px;}
|
||||
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
|
||||
.cal-header__month{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.cal-header__nav{display:flex;gap:4px;}
|
||||
.cal-header__btn{width:24px;height:24px;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);font-size:12px;transition:all .15s;}
|
||||
.cal-header__btn:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:4px;}
|
||||
.cal-week span{padding:4px 0;}
|
||||
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px;}
|
||||
.cal-day{position:relative;padding:6px 0;font-size:var(--font-xs);color:var(--text-primary);border-radius:var(--radius-sm);cursor:default;line-height:1;}
|
||||
.cal-day--other{color:var(--text-placeholder);}
|
||||
.cal-day--today{background:var(--primary);color:#fff;border-radius:50%;font-weight:600;}
|
||||
.cal-day--today .cal-dot{background:#fff;}
|
||||
.cal-dot{width:4px;height:4px;border-radius:50%;background:var(--primary);margin:2px auto 0;display:block;}
|
||||
.cal-dot--danger{background:var(--danger);}
|
||||
/* 值班详情 */
|
||||
.duty-detail{padding:0 16px 16px;}
|
||||
.duty-detail__title{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:8px;}
|
||||
.duty-detail__item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#FAFAFA;border-radius:var(--radius-sm);margin-bottom:6px;font-size:var(--font-xs);}
|
||||
.duty-detail__avatar{width:28px;height:28px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0;}
|
||||
.duty-detail__name{color:var(--text-primary);font-weight:500;}
|
||||
.duty-detail__role{color:var(--text-placeholder);margin-left:auto;}
|
||||
.advice-card__doctor svg{width:12px;height:12px;color:var(--success);}
|
||||
/* 救助意见弹窗 */
|
||||
.advice-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;}
|
||||
.advice-modal.open{display:flex;}
|
||||
.advice-modal__box{background:#fff;border-radius:var(--radius-md);width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 24px rgba(0,0,0,0.18);position:relative;}
|
||||
.advice-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.advice-modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.advice-modal__close{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;transition:all .15s;}
|
||||
.advice-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
|
||||
.advice-modal__body{padding:24px;}
|
||||
.advice-patient{background:#F9FAFB;border-radius:var(--radius-sm);padding:16px;margin-bottom:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
|
||||
.advice-patient__item{display:flex;align-items:center;gap:8px;font-size:var(--font-sm);}
|
||||
.advice-patient__label{color:var(--text-secondary);flex-shrink:0;}
|
||||
.advice-patient__value{color:var(--text-primary);font-weight:500;}
|
||||
.advice-field{margin-bottom:16px;}
|
||||
.advice-field__label{font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.advice-field__label .required{color:var(--danger);margin-left:2px;}
|
||||
.advice-field__select{width:100%;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;}
|
||||
.advice-field__select:focus{border-color:var(--primary);}
|
||||
.advice-field__textarea{width:100%;min-height:120px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;line-height:1.6;}
|
||||
.advice-field__textarea:focus{border-color:var(--primary);}
|
||||
.advice-field__input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.advice-field__input:focus{border-color:var(--primary);}
|
||||
.advice-modal__footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -88,6 +264,9 @@
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–专业人员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="professional.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>
|
||||
@@ -98,20 +277,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="professional.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区：IM对话界面 -->
|
||||
<main class="main">
|
||||
<!-- 左侧联系人面板 -->
|
||||
<div class="im-left">
|
||||
<div class="im-left__search">
|
||||
<input type="text" placeholder="搜索患者...">
|
||||
<div class="im-left__search-row">
|
||||
<input type="text" placeholder="搜索员工">
|
||||
<button class="btn-refresh" title="刷新列表" onclick="this.classList.add('spinning');var b=this;setTimeout(function(){b.classList.remove('spinning')},500)">
|
||||
<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>
|
||||
<div class="im-left__list">
|
||||
<!-- 联系人1 - 选中状态 -->
|
||||
@@ -157,7 +333,17 @@
|
||||
<div class="im-right__header">
|
||||
<div class="im-right__patient">
|
||||
<div class="im-right__patient-name">张伟</div>
|
||||
<div class="im-right__patient-info">员工编号: EMP001 | 采油一厂 · 生产部 | 既往史: 高血压(3年)</div>
|
||||
<div class="im-right__patient-info">男 43岁 | 员工编号: EMP001 | 采油一厂 · 生产部 </div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-shrink:0;">
|
||||
<button class="btn btn-primary btn-sm" onclick="openAdvice()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v5l3 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.5 7.5A5 5 0 1 0 7 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M1 5h3v3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
救助意见
|
||||
</button>
|
||||
<button class="btn btn-danger btn-sm" onclick="openEndEmergency()">
|
||||
<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>
|
||||
|
||||
@@ -211,17 +397,590 @@
|
||||
|
||||
<!-- 操作按钮行 -->
|
||||
<div class="im-right__actions">
|
||||
<button class="btn btn-danger">结束会诊</button>
|
||||
<button class="btn btn-warning">添加诊断</button>
|
||||
<button class="btn btn-default">查看病历</button>
|
||||
<!-- <button class="btn btn-danger">结束会诊</button>-->
|
||||
<!-- <button class="btn btn-warning">查看体检报告</button>-->
|
||||
<button class="btn btn-default" onclick="document.getElementById('mapModal').classList.add('open');document.body.style.overflow='hidden'">查看员工求助位置</button>
|
||||
</div>
|
||||
|
||||
<!-- 发送输入框 -->
|
||||
<div class="im-right__input">
|
||||
<input type="text" placeholder="输入医嘱或指导信息...">
|
||||
<button class="btn btn-primary">发送</button>
|
||||
<div class="chat-toolbar">
|
||||
<div class="phrase-wrap">
|
||||
<button class="toolbar-btn" onclick="togglePhrase(event)">
|
||||
<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"/><path d="M5 7l2 2 4-4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
常用语
|
||||
</button>
|
||||
<div class="phrase-pop" id="phrasePop">
|
||||
<div class="phrase-pop__title">选择常用语</div>
|
||||
<div class="phrase-pop__tabs">
|
||||
<span class="phrase-tab active" onclick="filterPhrase('all',this)">全部</span>
|
||||
<!-- <span class="phrase-tab" onclick="filterPhrase('calm',this)">其他</span>-->
|
||||
<span class="phrase-tab" onclick="filterPhrase('first',this)">注意事项</span>
|
||||
<span class="phrase-tab" onclick="filterPhrase('ask',this)">问候语</span>
|
||||
<span class="phrase-tab" onclick="filterPhrase('end',this)">结束语</span>
|
||||
</div>
|
||||
<div class="phrase-pop__list">
|
||||
<div class="phrase-pop__item" data-cat="calm" onclick="sendPhrase(this)">请保持冷静，急救团队正在赶来。</div>
|
||||
<div class="phrase-pop__item" data-cat="calm" onclick="sendPhrase(this)">不要紧张，我会一直在线指导您。</div>
|
||||
<div class="phrase-pop__item" data-cat="first" onclick="sendPhrase(this)">请立即停止活动，就地平卧休息。</div>
|
||||
<div class="phrase-pop__item" data-cat="first" onclick="sendPhrase(this)">请解开衣领和腰带，保持呼吸通畅。</div>
|
||||
<div class="phrase-pop__item" data-cat="first" onclick="sendPhrase(this)">如有出血，请用干净布料按压伤口止血。</div>
|
||||
<div class="phrase-pop__item" data-cat="first" onclick="sendPhrase(this)">如身边有阿司匹林，请嚼碎服用300mg。</div>
|
||||
<div class="phrase-pop__item" data-cat="ask" onclick="sendPhrase(this)">请描述您目前的症状变化。</div>
|
||||
<div class="phrase-pop__item" data-cat="ask" onclick="sendPhrase(this)">疼痛是持续性的还是间断性的？</div>
|
||||
<div class="phrase-pop__item" data-cat="ask" 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>
|
||||
<button class="toolbar-btn toolbar-btn--call">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M6.2 7.4a6.5 6.5 0 0 0 2.4 2.4l.8-.8a.7.7 0 0 1 .7-.2c.8.3 1.6.4 2.4.4a.7.7 0 0 1 .7.7v2.4a.7.7 0 0 1-.7.7A11.4 11.4 0 0 1 1 1.7.7.7 0 0 1 1.7 1H4a.7.7 0 0 1 .7.7c0 .8.2 1.6.4 2.4a.7.7 0 0 1-.2.7l-.7.6z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
语音通话
|
||||
</button>
|
||||
<button class="toolbar-btn toolbar-btn--video">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1.5" y="3.5" width="9" height="9" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M10.5 6.5l4-2v7l-4-2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
视频通话
|
||||
</button>
|
||||
</div>
|
||||
<div class="chat-input-wrap">
|
||||
<textarea class="chat-input" rows="4" placeholder="输入医嘱或指导信息..."></textarea>
|
||||
<button class="btn btn-primary">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧值班面板 -->
|
||||
<div class="duty-panel">
|
||||
<div class="duty-panel__title">值班信息</div>
|
||||
<!-- 统计卡片 2x2 -->
|
||||
<div class="duty-stats">
|
||||
<div class="duty-stat">
|
||||
<div class="duty-stat__value duty-stat__value--danger">3</div>
|
||||
<div class="duty-stat__label">当日应急人数</div>
|
||||
<!-- <div class="duty-stat__unit">人</div>-->
|
||||
</div>
|
||||
<div class="duty-stat">
|
||||
<div class="duty-stat__value">47</div>
|
||||
<div class="duty-stat__label">当月应急人数</div>
|
||||
<!-- <div class="duty-stat__unit">人</div>-->
|
||||
</div>
|
||||
<div class="duty-stat">
|
||||
<div class="duty-stat__value duty-stat__value--success">96.8%</div>
|
||||
<div class="duty-stat__label">应急响应及时率</div>
|
||||
</div>
|
||||
<div class="duty-stat">
|
||||
<div class="duty-stat__value duty-stat__value--warning">91.5%</div>
|
||||
<div class="duty-stat__label">应急任务完成率</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 月视图日历 -->
|
||||
<div class="duty-calendar">
|
||||
<div class="cal-header">
|
||||
<span class="cal-header__month" id="calMonth"></span>
|
||||
<div class="cal-header__nav">
|
||||
<button class="cal-header__btn" onclick="changeMonth(-1)">‹</button>
|
||||
<button class="cal-header__btn" onclick="changeMonth(1)">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
|
||||
<div class="cal-grid" id="calGrid"></div>
|
||||
</div>
|
||||
<!-- 今日值班详情 -->
|
||||
<div class="duty-detail">
|
||||
<div class="duty-detail__title">今日值班人员</div>
|
||||
<div class="duty-detail__item">
|
||||
<div class="duty-detail__avatar">李</div>
|
||||
<span class="duty-detail__name">李想</span>
|
||||
<span class="duty-detail__role">操作人员</span>
|
||||
</div>
|
||||
<div class="duty-detail__item">
|
||||
<div class="duty-detail__avatar">陈</div>
|
||||
<span class="duty-detail__name">陈旭 · 主治医师</span>
|
||||
<span class="duty-detail__role">专业人员</span>
|
||||
</div>
|
||||
<div class="duty-detail__item">
|
||||
<div class="duty-detail__avatar">王</div>
|
||||
<span class="duty-detail__name">王旭</span>
|
||||
<span class="duty-detail__role">操作人员</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 地图弹窗 -->
|
||||
<div class="map-modal" id="mapModal" onclick="if(event.target===this){this.classList.remove('open');document.body.style.overflow=''}">
|
||||
<div class="map-modal__box">
|
||||
<div class="map-modal__header">
|
||||
<span class="map-modal__title">患者位置</span>
|
||||
<button class="map-modal__close" onclick="document.getElementById('mapModal').classList.remove('open');document.body.style.overflow=''">✕</button>
|
||||
</div>
|
||||
<div class="map-modal__body">
|
||||
<!-- 左侧：地图+患者信息 -->
|
||||
<div class="map-modal__left">
|
||||
<div class="map-modal__map">
|
||||
<div class="map-grid"></div>
|
||||
<div class="map-road map-road--h" style="top:35%"></div>
|
||||
<div class="map-road map-road--h" style="top:65%"></div>
|
||||
<div class="map-road map-road--v" style="left:30%"></div>
|
||||
<div class="map-road map-road--v" style="left:70%"></div>
|
||||
<div class="map-building" style="top:12%;left:8%;width:80px;height:50px;">住宅区</div>
|
||||
<div class="map-building" style="top:40%;left:35%;width:100px;height:60px;">采油一厂<br>办公楼</div>
|
||||
<div class="map-building" style="top:15%;left:55%;width:70px;height:45px;">食堂</div>
|
||||
<div class="map-building" style="top:70%;left:60%;width:90px;height:50px;">设备库房</div>
|
||||
<div class="map-building" style="top:72%;left:12%;width:75px;height:45px;">宿舍楼</div>
|
||||
<div class="map-label" style="top:32%;left:42%;">长庆大道</div>
|
||||
<div class="map-label" style="top:62%;left:15%;">兴隆路</div>
|
||||
<div class="map-label" style="top:18%;left:28%;transform:rotate(90deg);">油田北路</div>
|
||||
<div class="map-pin"></div>
|
||||
<!-- 资源标记容器 -->
|
||||
<div id="resMarkers"></div>
|
||||
</div>
|
||||
<div class="map-modal__info">
|
||||
<div class="map-info-row">
|
||||
<span class="map-info-row__label">患者：</span>
|
||||
<span class="map-info-row__value">张伟·男·32岁</span>
|
||||
</div>
|
||||
<div class="map-info-row">
|
||||
<span class="map-info-row__label">详细地址：</span>
|
||||
<span class="map-info-row__value">陕西省西安市未央区 · 长庆油田采油一厂办公楼 3层 生产调度室</span>
|
||||
</div>
|
||||
<div class="map-info-row">
|
||||
<span class="map-info-row__label">求助时间：</span>
|
||||
<span class="map-info-row__value">2026-04-20 09:08:32</span>
|
||||
</div>
|
||||
<div class="map-info-row">
|
||||
<span class="map-info-row__label">坐标信息：</span>
|
||||
<span class="map-info-row__value" style="color:var(--text-secondary);font-weight:400;">108.9432°E, 34.3651°N</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧：附近医疗资源 -->
|
||||
<div class="map-modal__right">
|
||||
<div class="res-panel__title">附近医疗资源</div>
|
||||
<div class="res-panel__tabs">
|
||||
<span class="res-tab active" onclick="switchResTab('hospital',this)">油田医院</span>
|
||||
<span class="res-tab" onclick="switchResTab('partner',this)">合作医院</span>
|
||||
<span class="res-tab" onclick="switchResTab('clinic',this)">医疗点</span>
|
||||
<span class="res-tab" onclick="switchResTab('ambulance',this)">救护车</span>
|
||||
<span class="res-tab" onclick="switchResTab('aed',this)">AED</span>
|
||||
<span class="res-tab" onclick="switchResTab('kit',this)">急救包</span>
|
||||
</div>
|
||||
<div class="res-panel__list">
|
||||
<!-- 油田医院 -->
|
||||
<div class="res-card" data-res="hospital" data-pos="22%;78%" data-label="长庆油田职工医院" data-color="#1890FF">
|
||||
<div class="res-card__img"><svg viewBox="0 0 24 24" fill="none"><path d="M3 21V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14" stroke="currentColor" stroke-width="1.5"/><path d="M9 21V13h6v8" stroke="currentColor" stroke-width="1.5"/><path d="M12 5v4M10 7h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">长庆油田职工医院</div>
|
||||
<div class="res-card__unit">长庆油田分公司</div>
|
||||
<div class="res-card__dist">距离 1.2 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86831120">029-86831120</a></div>
|
||||
<div class="res-card__addr">西安市未央区长庆路68号</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="res-card" data-res="hospital" data-pos="80%;20%" data-label="采油一厂卫生所" data-color="#1890FF">
|
||||
<div class="res-card__img"><svg viewBox="0 0 24 24" fill="none"><path d="M3 21V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14" stroke="currentColor" stroke-width="1.5"/><path d="M9 21V13h6v8" stroke="currentColor" stroke-width="1.5"/><path d="M12 5v4M10 7h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">采油一厂卫生所</div>
|
||||
<div class="res-card__unit">采油一厂</div>
|
||||
<div class="res-card__dist">距离 0.3 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86835678">029-86835678</a></div>
|
||||
<div class="res-card__addr">采油一厂生活区A栋1层</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 合作医院 -->
|
||||
<div class="res-card" data-res="partner" style="display:none;" data-pos="8%;88%" data-label="西安交大一附院" data-color="#722ED1">
|
||||
<div class="res-card__img"><svg viewBox="0 0 24 24" fill="none"><path d="M3 21V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14" stroke="currentColor" stroke-width="1.5"/><path d="M9 21V13h6v8" stroke="currentColor" stroke-width="1.5"/><path d="M12 5v4M10 7h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">西安交通大学第一附属医院</div>
|
||||
<div class="res-card__unit">西安交大医学部</div>
|
||||
<div class="res-card__dist">距离 8.5 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-85323112">029-85323112</a></div>
|
||||
<div class="res-card__addr">西安市雁塔区雁塔西路277号</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="res-card" data-res="partner" style="display:none;" data-pos="88%;85%" data-label="陕西省人民医院" data-color="#722ED1">
|
||||
<div class="res-card__img"><svg viewBox="0 0 24 24" fill="none"><path d="M3 21V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14" stroke="currentColor" stroke-width="1.5"/><path d="M9 21V13h6v8" stroke="currentColor" stroke-width="1.5"/><path d="M12 5v4M10 7h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">陕西省人民医院</div>
|
||||
<div class="res-card__unit">陕西省卫健委</div>
|
||||
<div class="res-card__dist">距离 12.3 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-85251331">029-85251331</a></div>
|
||||
<div class="res-card__addr">西安市碑林区友谊西路256号</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 医疗点 -->
|
||||
<div class="res-card" data-res="clinic" style="display:none;" data-pos="48%;40%" data-label="医疗急救站" data-color="#13C2C2">
|
||||
<div class="res-card__img"><svg viewBox="0 0 24 24" fill="none"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">采油一厂医疗急救站</div>
|
||||
<div class="res-card__unit">采油一厂安全环保部</div>
|
||||
<div class="res-card__dist">距离 0.15 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86836120">029-86836120</a></div>
|
||||
<div class="res-card__addr">采油一厂办公楼1层大厅</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="res-card" data-res="clinic" style="display:none;" data-pos="60%;75%" data-label="3号区医疗点" data-color="#13C2C2">
|
||||
<div class="res-card__img"><svg viewBox="0 0 24 24" fill="none"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">3号生产区医疗点</div>
|
||||
<div class="res-card__unit">采油一厂生产部</div>
|
||||
<div class="res-card__dist">距离 0.8 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86837890">029-86837890</a></div>
|
||||
<div class="res-card__addr">3号生产区值班室旁</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 救护车 -->
|
||||
<div class="res-card" data-res="ambulance" style="display:none;" data-pos="30%;62%" data-label="陕A·120-03" data-color="#FAAD14">
|
||||
<div class="res-card__img" style="background:#FFF7E6;"><svg viewBox="0 0 24 24" fill="none" style="color:var(--warning);"><rect x="1" y="6" width="15" height="12" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M16 10h4l3 4v4h-7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="6" cy="19" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="18" cy="19" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M9 10v4M7 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">陕A·120-03 急救车</div>
|
||||
<div class="res-card__unit">长庆油田职工医院</div>
|
||||
<div class="res-card__dist">距离 1.5 km · 预计3分钟到达</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:13891012003">138-9101-2003</a></div>
|
||||
<div class="res-card__addr">当前位置：长庆大道与油田北路交叉口</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="res-card" data-res="ambulance" style="display:none;" data-pos="10%;15%" data-label="陕A·120-07" data-color="#FAAD14">
|
||||
<div class="res-card__img" style="background:#FFF7E6;"><svg viewBox="0 0 24 24" fill="none" style="color:var(--warning);"><rect x="1" y="6" width="15" height="12" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M16 10h4l3 4v4h-7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="6" cy="19" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="18" cy="19" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M9 10v4M7 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">陕A·120-07 急救车</div>
|
||||
<div class="res-card__unit">西安急救中心</div>
|
||||
<div class="res-card__dist">距离 9.2 km · 预计15分钟到达</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:13572012007">135-7201-2007</a></div>
|
||||
<div class="res-card__addr">当前位置：未央路与凤城五路交叉口</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- AED -->
|
||||
<div class="res-card" data-res="aed" style="display:none;" data-pos="47%;42%" data-label="AED-001" data-color="#FF4D4F">
|
||||
<div class="res-card__img" style="background:#FFF1F0;"><svg viewBox="0 0 24 24" fill="none" style="color:var(--danger);"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">AED-001 办公楼大厅</div>
|
||||
<div class="res-card__unit">采油一厂</div>
|
||||
<div class="res-card__dist">距离 0.05 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86836110">029-86836110</a></div>
|
||||
<div class="res-card__addr">采油一厂办公楼1层前台右侧</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="res-card" data-res="aed" style="display:none;" data-pos="20%;58%" data-label="AED-002" data-color="#FF4D4F">
|
||||
<div class="res-card__img" style="background:#FFF1F0;"><svg viewBox="0 0 24 24" fill="none" style="color:var(--danger);"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">AED-002 食堂入口</div>
|
||||
<div class="res-card__unit">采油一厂</div>
|
||||
<div class="res-card__dist">距离 0.4 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86836115">029-86836115</a></div>
|
||||
<div class="res-card__addr">采油一厂食堂正门左侧墙面</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 急救包 -->
|
||||
<div class="res-card" data-res="kit" style="display:none;" data-pos="40%;48%" data-label="3层急救箱" data-color="#52C41A">
|
||||
<div class="res-card__img" style="background:#F6FFED;"><svg viewBox="0 0 24 24" fill="none" style="color:var(--success);"><rect x="2" y="6" width="20" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="1.5"/><path d="M12 10v6M9 13h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">3层走廊急救箱</div>
|
||||
<div class="res-card__unit">采油一厂办公楼</div>
|
||||
<div class="res-card__dist">距离 0.02 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86836112">029-86836112</a></div>
|
||||
<div class="res-card__addr">办公楼3层电梯间旁</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="res-card" data-res="kit" style="display:none;" data-pos="43%;50%" data-label="调度室急救箱" data-color="#52C41A">
|
||||
<div class="res-card__img" style="background:#F6FFED;"><svg viewBox="0 0 24 24" fill="none" style="color:var(--success);"><rect x="2" y="6" width="20" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="1.5"/><path d="M12 10v6M9 13h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">生产调度室急救箱</div>
|
||||
<div class="res-card__unit">采油一厂生产部</div>
|
||||
<div class="res-card__dist">距离 0.01 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86836113">029-86836113</a></div>
|
||||
<div class="res-card__addr">办公楼3层生产调度室内</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="res-card" data-res="kit" style="display:none;" data-pos="52%;38%" data-label="安保岗亭急救箱" data-color="#52C41A">
|
||||
<div class="res-card__img" style="background:#F6FFED;"><svg viewBox="0 0 24 24" fill="none" style="color:var(--success);"><rect x="2" y="6" width="20" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="1.5"/><path d="M12 10v6M9 13h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name">1层安保岗亭急救箱</div>
|
||||
<div class="res-card__unit">采油一厂</div>
|
||||
<div class="res-card__dist">距离 0.1 km</div>
|
||||
<div class="res-card__tel"><svg viewBox="0 0 12 12" fill="none"><path d="M4.6 5.5a4.8 4.8 0 0 0 1.9 1.9l.6-.6a.5.5 0 0 1 .5-.1c.6.2 1.2.3 1.8.3a.5.5 0 0 1 .5.5v1.8a.5.5 0 0 1-.5.5A8.5 8.5 0 0 1 1 1.4.5.5 0 0 1 1.5 1h1.7a.5.5 0 0 1 .5.5c0 .6.1 1.2.3 1.8a.5.5 0 0 1-.1.5l-.3.7z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg><a href="tel:029-86836100">029-86836100</a></div>
|
||||
<div class="res-card__addr">办公楼1层正门安保岗亭</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救助意见弹窗 -->
|
||||
<div class="advice-modal" id="adviceModal" onclick="if(event.target===this)closeAdvice()">
|
||||
<div class="advice-modal__box">
|
||||
<div class="advice-modal__header">
|
||||
<span class="advice-modal__title">填写救助意见</span>
|
||||
<button class="advice-modal__close" onclick="closeAdvice()">✕</button>
|
||||
</div>
|
||||
<div class="advice-modal__body">
|
||||
<!-- 求助员工基本信息 -->
|
||||
<div class="advice-patient">
|
||||
<div class="advice-patient__item">
|
||||
<span class="advice-patient__label">求助员工：</span>
|
||||
<span class="advice-patient__value">张伟·男·43岁</span>
|
||||
</div>
|
||||
<div class="advice-patient__item">
|
||||
<span class="advice-patient__label">员工编号：</span>
|
||||
<span class="advice-patient__value">EMP001</span>
|
||||
</div>
|
||||
<div class="advice-patient__item">
|
||||
<span class="advice-patient__label">所属单位：</span>
|
||||
<span class="advice-patient__value">采油一厂 · 生产部</span>
|
||||
</div>
|
||||
<div class="advice-patient__item">
|
||||
<span class="advice-patient__label">求助时间：</span>
|
||||
<span class="advice-patient__value">2026-04-20 09:08</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 救助意见表单 -->
|
||||
<!-- <div class="advice-field">-->
|
||||
<!-- <div class="advice-field__label">初步判断<span class="required">*</span></div>-->
|
||||
<!-- <select class="advice-field__select" id="adviceDiagnosis">-->
|
||||
<!-- <option value="">请选择初步判断</option>-->
|
||||
<!-- <option>疑似急性冠脉综合征</option>-->
|
||||
<!-- <option>疑似脑血管意外</option>-->
|
||||
<!-- <option>外伤出血</option>-->
|
||||
<!-- <option>骨折/关节损伤</option>-->
|
||||
<!-- <option>中暑/热射病</option>-->
|
||||
<!-- <option>中毒</option>-->
|
||||
<!-- <option>过敏反应</option>-->
|
||||
<!-- <option>其他</option>-->
|
||||
<!-- </select>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="advice-field">-->
|
||||
<!-- <div class="advice-field__label">紧急程度<span class="required">*</span></div>-->
|
||||
<!-- <select class="advice-field__select" id="adviceLevel">-->
|
||||
<!-- <option value="">请选择紧急程度</option>-->
|
||||
<!-- <option>危急 — 需立即送医抢救</option>-->
|
||||
<!-- <option>紧急 — 需尽快就医</option>-->
|
||||
<!-- <option>一般 — 建议就近就医</option>-->
|
||||
<!-- <option>轻微 — 可自行处理或观察</option>-->
|
||||
<!-- </select>-->
|
||||
<!-- </div>-->
|
||||
<div class="advice-field">
|
||||
<div class="advice-field__label">救助意见<span class="required">*</span></div>
|
||||
<textarea class="advice-field__textarea" id="adviceContent" placeholder="请输入专业救助意见，包括现场急救指导、用药建议、转运注意事项等"></textarea>
|
||||
</div>
|
||||
<!-- <div class="advice-field">-->
|
||||
<!-- <div class="advice-field__label">建议送往医院</div>-->
|
||||
<!-- <input class="advice-field__input" type="text" id="adviceHospital" placeholder="请输入建议送往的医院名称">-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="advice-modal__footer">
|
||||
<button class="btn btn-default" onclick="closeAdvice()">取消</button>
|
||||
<button class="btn btn-primary" onclick="submitAdvice()">提交意见</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结束应急确认弹窗 -->
|
||||
<div class="end-modal" id="endModal" onclick="if(event.target===this)closeEndEmergency()">
|
||||
<div class="end-modal__box">
|
||||
<div class="end-modal__header">
|
||||
<span class="end-modal__title">结束应急</span>
|
||||
<button class="end-modal__close" onclick="closeEndEmergency()">✕</button>
|
||||
</div>
|
||||
<div class="end-modal__body">
|
||||
<div class="end-modal__patient">
|
||||
<span>求助员工：张伟–男–43岁</span>
|
||||
<span>单位部门：采油一厂–生产部</span>
|
||||
</div>
|
||||
<div class="end-modal__warn">请务必确认：现场人员已妥善救助、安全风险已完全解除、周边隐患已排查到位。</div>
|
||||
<div class="end-modal__hint">请如实填写以下信息，提交后工单将直接标记为已完成</div>
|
||||
<div class="end-modal__label">补充说明：<span class="required">*</span></div>
|
||||
<textarea class="end-modal__textarea" id="endNote" placeholder="请输入"></textarea>
|
||||
<div class="end-modal__label">补充照片：</div>
|
||||
<div class="end-modal__photos">
|
||||
<div class="end-modal__photo-add" title="上传照片">+</div>
|
||||
<div class="end-modal__photo"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div style="position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.45);color:#fff;font-size:10px;text-align:center;padding:2px 0;">图片</div></div>
|
||||
<div class="end-modal__photo"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="8.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M3 16l5-4 3 3 4-5 6 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg><div style="position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.45);color:#fff;font-size:10px;text-align:center;padding:2px 0;">图片</div></div>
|
||||
</div>
|
||||
<div class="end-modal__photo-count">2/6</div>
|
||||
</div>
|
||||
<div class="end-modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEndEmergency()">取消</button>
|
||||
<button class="btn btn-danger" onclick="confirmEndEmergency()">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 月视图日历 */
|
||||
var _calYear,_calMonth;
|
||||
// 有排班的日期（模拟数据：工作日有排班）
|
||||
var _dutyDays={2026:{4:[1,2,3,7,8,9,10,14,15,16,17,21,22,23,24,28,29,30]}};
|
||||
function initCalendar(){
|
||||
var d=new Date();_calYear=d.getFullYear();_calMonth=d.getMonth()+1;
|
||||
renderCalendar();
|
||||
}
|
||||
function changeMonth(dir){
|
||||
_calMonth+=dir;
|
||||
if(_calMonth<1){_calMonth=12;_calYear--;}
|
||||
if(_calMonth>12){_calMonth=1;_calYear++;}
|
||||
renderCalendar();
|
||||
}
|
||||
function renderCalendar(){
|
||||
document.getElementById('calMonth').textContent=_calYear+'年'+_calMonth+'月';
|
||||
var grid=document.getElementById('calGrid');grid.innerHTML='';
|
||||
var firstDay=new Date(_calYear,_calMonth-1,1).getDay();
|
||||
var daysInMonth=new Date(_calYear,_calMonth,0).getDate();
|
||||
var prevDays=new Date(_calYear,_calMonth-1,0).getDate();
|
||||
var today=new Date();var isThisMonth=(_calYear===today.getFullYear()&&_calMonth===today.getMonth()+1);
|
||||
var duties=(_dutyDays[_calYear]&&_dutyDays[_calYear][_calMonth])||[];
|
||||
// 上月补位
|
||||
for(var i=firstDay-1;i>=0;i--){
|
||||
var el=document.createElement('div');el.className='cal-day cal-day--other';el.textContent=prevDays-i;grid.appendChild(el);
|
||||
}
|
||||
// 当月
|
||||
for(var d=1;d<=daysInMonth;d++){
|
||||
var el=document.createElement('div');el.className='cal-day';
|
||||
if(isThisMonth&&d===today.getDate())el.className+=' cal-day--today';
|
||||
el.textContent=d;
|
||||
if(duties.indexOf(d)>=0){
|
||||
var dot=document.createElement('span');
|
||||
dot.className=(isThisMonth&&d===today.getDate())?'cal-dot':'cal-dot';
|
||||
el.appendChild(dot);
|
||||
}
|
||||
grid.appendChild(el);
|
||||
}
|
||||
// 下月补位
|
||||
var total=firstDay+daysInMonth;var remain=total%7===0?0:7-total%7;
|
||||
for(var i=1;i<=remain;i++){
|
||||
var el=document.createElement('div');el.className='cal-day cal-day--other';el.textContent=i;grid.appendChild(el);
|
||||
}
|
||||
}
|
||||
initCalendar();
|
||||
/* 常用语弹出 */
|
||||
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 area=document.querySelector('.im-right__chat');
|
||||
var now=new Date();
|
||||
var time=now.getHours().toString().padStart(2,'0')+':'+now.getMinutes().toString().padStart(2,'0');
|
||||
var html='<div class="chat-message right"><div class="chat-avatar">专</div><div class="chat-body"><div class="chat-name">李医生(心内科副主任)</div><div class="chat-bubble">'+text+'</div></div></div>';
|
||||
area.insertAdjacentHTML('beforeend',html);
|
||||
area.scrollTop=area.scrollHeight;
|
||||
document.getElementById('phrasePop').classList.remove('open');
|
||||
}
|
||||
document.addEventListener('click',function(){document.getElementById('phrasePop').classList.remove('open');});
|
||||
/* 资源Tab切换 */
|
||||
function switchResTab(cat,el){
|
||||
document.querySelectorAll('.res-tab').forEach(function(t){t.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.res-card').forEach(function(c){
|
||||
c.style.display=c.getAttribute('data-res')===cat?'':'none';
|
||||
c.classList.remove('active');
|
||||
});
|
||||
renderResMarkers(cat);
|
||||
}
|
||||
function renderResMarkers(cat){
|
||||
var container=document.getElementById('resMarkers');
|
||||
container.innerHTML='';
|
||||
document.querySelectorAll('.res-card[data-res="'+cat+'"]').forEach(function(card,i){
|
||||
var pos=card.getAttribute('data-pos');if(!pos)return;
|
||||
var parts=pos.split(';');
|
||||
var color=card.getAttribute('data-color')||'#1890FF';
|
||||
var label=card.getAttribute('data-label')||'';
|
||||
var m=document.createElement('div');
|
||||
m.className='res-marker';
|
||||
m.style.top=parts[0];m.style.left=parts[1];
|
||||
m.innerHTML='<svg class="res-marker__pin" viewBox="0 0 28 36" fill="none"><path d="M14 0C6.27 0 0 6.27 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.27 21.73 0 14 0z" fill="'+color+'"/><circle cx="14" cy="14" r="5" fill="#fff"/></svg><div class="res-marker__label">'+label+'</div>';
|
||||
m.setAttribute('data-idx',i);
|
||||
m.onclick=function(){highlightResCard(cat,i);};
|
||||
container.appendChild(m);
|
||||
});
|
||||
}
|
||||
function highlightResCard(cat,idx){
|
||||
document.querySelectorAll('.res-card').forEach(function(c){c.classList.remove('active');});
|
||||
document.querySelectorAll('.res-marker').forEach(function(m){m.classList.remove('active');});
|
||||
var cards=document.querySelectorAll('.res-card[data-res="'+cat+'"]');
|
||||
if(cards[idx]){cards[idx].classList.add('active');cards[idx].scrollIntoView({block:'nearest',behavior:'smooth'});}
|
||||
var markers=document.querySelectorAll('.res-marker');
|
||||
if(markers[idx])markers[idx].classList.add('active');
|
||||
}
|
||||
/* 卡片点击高亮 */
|
||||
document.addEventListener('click',function(e){
|
||||
var card=e.target.closest('.res-card');
|
||||
if(!card)return;
|
||||
var cat=card.getAttribute('data-res');
|
||||
var cards=Array.prototype.slice.call(document.querySelectorAll('.res-card[data-res="'+cat+'"]'));
|
||||
var idx=cards.indexOf(card);
|
||||
if(idx>=0)highlightResCard(cat,idx);
|
||||
});
|
||||
/* 弹窗打开时默认渲染油田医院标记 */
|
||||
var _origOpenMap=document.querySelector('.btn-default[onclick*="mapModal"]');
|
||||
if(_origOpenMap){
|
||||
var _origFn=_origOpenMap.getAttribute('onclick');
|
||||
_origOpenMap.setAttribute('onclick',_origFn+';setTimeout(function(){renderResMarkers("hospital")},0)');
|
||||
}
|
||||
document.getElementById('phrasePop').addEventListener('click',function(e){e.stopPropagation();});
|
||||
/* 结束应急弹窗 */
|
||||
function openEndEmergency(){document.getElementById('endModal').classList.add('open');document.body.style.overflow='hidden';}
|
||||
function closeEndEmergency(){document.getElementById('endModal').classList.remove('open');document.body.style.overflow='';}
|
||||
/* 救助意见弹窗 */
|
||||
function openAdvice(){document.getElementById('adviceModal').classList.add('open');document.body.style.overflow='hidden';}
|
||||
function closeAdvice(){document.getElementById('adviceModal').classList.remove('open');document.body.style.overflow='';}
|
||||
function submitAdvice(){
|
||||
var c=document.getElementById('adviceContent').value.trim();
|
||||
if(!c){document.getElementById('adviceContent').style.borderColor='var(--danger)';document.getElementById('adviceContent').setAttribute('placeholder','救助意见为必填项');document.getElementById('adviceContent').focus();return;}
|
||||
document.getElementById('adviceContent').style.borderColor='';
|
||||
closeAdvice();
|
||||
/* 在聊天区追加救助意见消息 */
|
||||
var msgArea=document.querySelector('.im-right__messages');
|
||||
var now=new Date();
|
||||
var ts=now.getFullYear()+'-'+String(now.getMonth()+1).padStart(2,'0')+'-'+String(now.getDate()).padStart(2,'0')+' '+String(now.getHours()).padStart(2,'0')+':'+String(now.getMinutes()).padStart(2,'0');
|
||||
var html='<div class="chat-time">'+ts+'</div>';
|
||||
html+='<div class="chat-message right"><div class="chat-avatar">专</div><div class="chat-body"><div class="chat-name">李医生(心内科副主任)</div>';
|
||||
html+='<div class="advice-card">';
|
||||
html+='<div class="advice-card__head"><div class="advice-card__icon"><svg viewBox="0 0 16 16" fill="none"><path d="M7 3h2v10H7z" fill="#fff"/><path d="M3 7h10v2H3z" fill="#fff"/></svg></div><span class="advice-card__title">专业救助意见</span></div>';
|
||||
html+='<div class="advice-card__body">'+c.replace(/\n/g,'<br>')+'</div>';
|
||||
html+='<div class="advice-card__foot"><div class="advice-card__doctor"><svg viewBox="0 0 12 12" fill="none"><circle cx="6" cy="4" r="2.5" stroke="currentColor" stroke-width="1.2"/><path d="M1.5 11c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>李医生 · 心内科副主任</div><span>'+ts+'</span></div>';
|
||||
html+='</div></div></div>';
|
||||
msgArea.insertAdjacentHTML('beforeend',html);
|
||||
msgArea.scrollTop=msgArea.scrollHeight;
|
||||
}
|
||||
function confirmEndEmergency(){
|
||||
var note=document.getElementById('endNote').value.trim();
|
||||
if(!note){document.getElementById('endNote').style.borderColor='var(--danger)';document.getElementById('endNote').setAttribute('placeholder','补充说明为必填项');document.getElementById('endNote').focus();return;}
|
||||
closeEndEmergency();
|
||||
/* 追加"本次应急已结束"卡片消息 */
|
||||
var now=new Date();
|
||||
var timeStr=now.getFullYear()+'-'+String(now.getMonth()+1).padStart(2,'0')+'-'+String(now.getDate()).padStart(2,'0')+' '+String(now.getHours()).padStart(2,'0')+':'+String(now.getMinutes()).padStart(2,'0');
|
||||
var msgArea=document.querySelector('.im-right__messages');
|
||||
var endHtml='<div class="chat-message right"><div class="chat-avatar">专</div><div class="chat-body"><div class="chat-name">李医生(心内科副主任)</div><div class="end-card"><div class="end-card__icon"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="1.8"/><path d="M8 8l8 8M16 8l-8 8" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg></div><div class="end-card__text">本次应急已结束</div><div class="end-card__time">'+timeStr+'</div></div></div></div>';
|
||||
msgArea.insertAdjacentHTML('beforeend',endHtml);
|
||||
msgArea.scrollTop=msgArea.scrollHeight;
|
||||
/* "结束应急"按钮置灰 */
|
||||
var btn=document.querySelector('.im-right__header .btn-danger');
|
||||
btn.disabled=true;btn.style.background='#F5F5F5';btn.style.color='#bbb';btn.style.cursor='not-allowed';btn.onclick=null;
|
||||
/* 隐藏底部操作按钮行和输入区 */
|
||||
document.querySelector('.im-right__actions').style.display='none';
|
||||
document.querySelector('.im-right__input').style.display='none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user