292 lines
7.0 KiB
Plaintext
292 lines
7.0 KiB
Plaintext
<template>
|
||
<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="事件详情" :xloading="true" @right-click="onMore">
|
||
<template v-slot:right>
|
||
<x-icon name="more-fill" color="#6B7280" font-size="18"></x-icon>
|
||
</template>
|
||
|
||
<view class="hr-body">
|
||
|
||
<!-- ============ 事件 hero ============ -->
|
||
<view class="evt-head">
|
||
<view class="evt-head-c1"></view>
|
||
<view class="evt-head-c2"></view>
|
||
<text class="evt-head-t">{{ detail.name }}</text>
|
||
<text class="evt-head-s">{{ detail.sub }}</text>
|
||
|
||
<view class="eh-team">
|
||
<text class="eh-team-k">{{ detail.teamKey }}</text>
|
||
<view class="eh-team-line"></view>
|
||
<text class="eh-team-v">{{ detail.teamValue }}</text>
|
||
</view>
|
||
|
||
<view class="evt-tags">
|
||
<view v-for="(tg, i) in detail.tags" :key="i" class="evt-tag">
|
||
<text class="evt-tag-t">{{ tg }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="evt-kpi">
|
||
<view class="evt-kpi-cell">
|
||
<text class="evt-kpi-b">{{ detail.victimTotal }}</text>
|
||
<text class="evt-kpi-s">伤员总数</text>
|
||
</view>
|
||
<view class="evt-kpi-sep"></view>
|
||
<view class="evt-kpi-cell">
|
||
<text class="evt-kpi-b">{{ detail.transferred }}</text>
|
||
<text class="evt-kpi-s">已转运</text>
|
||
</view>
|
||
<view class="evt-kpi-sep"></view>
|
||
<view class="evt-kpi-cell">
|
||
<text class="evt-kpi-b">{{ detail.pending }}</text>
|
||
<text class="evt-kpi-s">待处置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ============ 4 色分级计数条（常驻） ============ -->
|
||
<view style="margin-top:10px">
|
||
<hr-wband :red="detail.redCount" :amber="detail.amberCount" :green="detail.greenCount"
|
||
:black="detail.blackCount"></hr-wband>
|
||
</view>
|
||
|
||
<!-- ============ 工作台 ============ -->
|
||
<hr-sec title="工作台" more="4 个入口 ›"></hr-sec>
|
||
<view class="ws-grid">
|
||
<view v-for="(w, i) in works" :key="i" class="ws-item"
|
||
:class="i == works.length - 1 ? 'ws-item-last' : ''" @click="onWorkClick(i)">
|
||
<view class="ws-ic" :style="{ backgroundColor: w.bg }">
|
||
<x-icon :name="w.icon" :color="w.color" font-size="36rpx"></x-icon>
|
||
</view>
|
||
<text class="ws-t">{{ w.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ============ 救援团队 ============ -->
|
||
<hr-sec title="救援团队" more="5 人"></hr-sec>
|
||
<hr-card>
|
||
<x-avatar-group :list="teamAvatars" size="88rpx" round="28rpx" gutter="18rpx" :max-count="5"
|
||
:show-count="false" :flat="true" :random-bg-color="true" font-size="30rpx"></x-avatar-group>
|
||
<text class="tm-line">组长 张明远 · 检伤 李承志 · 转运 王志远</text>
|
||
</hr-card>
|
||
|
||
<!-- ============ 事件时间线 ============ -->
|
||
<hr-sec title="事件时间线"></hr-sec>
|
||
<hr-card>
|
||
<hr-timeline :nodes="detail.timeline"></hr-timeline>
|
||
</hr-card>
|
||
|
||
<view style="height:14px"></view>
|
||
</view>
|
||
</hr-page>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { eventDetail } from '@/mock/index.uts'
|
||
import { navTo } from '@/utils/nav.uts'
|
||
|
||
/**
|
||
* s34 事件详情（执行态工作台）
|
||
* 工作台由 8 入口精简为 4 入口：检伤建档 / 伤员查询 / 批量处置 / 批量转运。
|
||
* 4 色分级计数条常驻 hero 下方。救援端不开放事件上报入口（救援员是接单方）。
|
||
*/
|
||
type WorkItem = { icon : string, name : string, bg : string, color : string, url : string }
|
||
|
||
const detail = eventDetail
|
||
|
||
/** xAvatarGroup 需要 string[] */
|
||
const teamAvatars : string[] = ['张', '李', '王', '陈', '赵']
|
||
|
||
const works : WorkItem[] = [
|
||
{ icon: 'heart-pulse-line', name: '检伤建档', bg: '#FEF2F2', color: '#DC2626', url: '/pages/triage/create' } as WorkItem,
|
||
{ icon: 'file-list-3-line', name: '伤员查询', bg: '#EFF6FF', color: '#2563EB', url: '/pages/triage/victims' } as WorkItem,
|
||
{ icon: 'clipboard-line', name: '批量处置', bg: '#ECFDF5', color: '#059669', url: '/pages/triage/batch-treat' } as WorkItem,
|
||
{ icon: 'arrow-left-right-line', name: '批量转运', bg: '#FFFBEB', color: '#D97706', url: '/pages/triage/batch-transfer' } as WorkItem
|
||
]
|
||
|
||
function onWorkClick(i : number) : void {
|
||
navTo(works[i].url)
|
||
}
|
||
|
||
function onMore() : void {
|
||
uni.showToast({ title: '事件归档 / 分享 / 报错', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* ---------- hero ---------- */
|
||
.evt-head {
|
||
background-image: linear-gradient(to bottom right, #1E3A8A, #2563EB);
|
||
border-radius: 32rpx;
|
||
padding: 28rpx 28rpx 28rpx 28rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.evt-head-c1 {
|
||
position: absolute;
|
||
right: -68rpx;
|
||
top: -88rpx;
|
||
width: 252rpx;
|
||
height: 252rpx;
|
||
border-radius: 126rpx;
|
||
background-color: rgba(255, 255, 255, 0.10);
|
||
}
|
||
|
||
.evt-head-c2 {
|
||
position: absolute;
|
||
right: 52rpx;
|
||
bottom: -96rpx;
|
||
width: 156rpx;
|
||
height: 156rpx;
|
||
border-radius: 78rpx;
|
||
background-color: rgba(255, 255, 255, 0.07);
|
||
}
|
||
|
||
.evt-head-t {
|
||
font-size: 34.8rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.evt-head-s {
|
||
font-size: 25.8rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.eh-team {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.14);
|
||
border: 2rpx solid rgba(255, 255, 255, 0.22);
|
||
border-radius: 20rpx;
|
||
padding: 18rpx 22rpx 18rpx 22rpx;
|
||
}
|
||
|
||
.eh-team-k {
|
||
font-size: 22.4rpx;
|
||
font-weight: bold;
|
||
color: rgba(255, 255, 255, 0.78);
|
||
}
|
||
|
||
.eh-team-line {
|
||
width: 2rpx;
|
||
height: 24rpx;
|
||
background-color: rgba(255, 255, 255, 0.28);
|
||
margin-left: 18rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.eh-team-v {
|
||
flex: 1;
|
||
font-size: 26.8rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.evt-tags {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.evt-tag {
|
||
background-color: rgba(255, 255, 255, 0.18);
|
||
border-radius: 14rpx;
|
||
padding: 6rpx 18rpx 6rpx 18rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.evt-tag-t {
|
||
font-size: 23.6rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.evt-kpi {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.evt-kpi-cell {
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.evt-kpi-b {
|
||
font-size: 42.6rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.evt-kpi-s {
|
||
font-size: 22.4rpx;
|
||
color: rgba(255, 255, 255, 0.82);
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.evt-kpi-sep {
|
||
width: 2rpx;
|
||
height: 60rpx;
|
||
background-color: rgba(255, 255, 255, 0.22);
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
/* ---------- 工作台 ---------- */
|
||
.ws-grid {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.ws-item {
|
||
flex: 1;
|
||
background-color: #FFFFFF;
|
||
border: 2rpx solid #E5E7EB;
|
||
border-radius: 26rpx;
|
||
padding: 28rpx 8rpx 28rpx 8rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.ws-item-last {
|
||
margin-right: 0rpx;
|
||
}
|
||
|
||
.ws-ic {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.ws-ic-t {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ws-t {
|
||
font-size: 25.8rpx;
|
||
color: #1F2937;
|
||
}
|
||
|
||
/* ---------- 团队 ---------- */
|
||
.tm-avt {
|
||
margin-right: 18rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.tm-line {
|
||
font-size: 25.8rpx;
|
||
color: #6B7280;
|
||
margin-top: 8rpx;
|
||
}
|
||
</style>
|