469 lines
17 KiB
Vue
469 lines
17 KiB
Vue
<!-- 服务设施管理 -->
|
||
<template>
|
||
<view class="emergency-details">
|
||
<view class="emergency-details-header facilities-theme">
|
||
<button class="emergency-back-btn" @tap="closeFacilitiesPage">←</button>
|
||
<text class="h1">🏪 服务设施管理</text>
|
||
<text class="current-area">设备状态监控与维护</text>
|
||
</view>
|
||
|
||
<!-- 宣传横幅 -->
|
||
<view class="promo-banner" @tap="viewServiceDetails">
|
||
<view class="promo-image">
|
||
<text>🏞️</text>
|
||
<view class="promo-content">
|
||
<view class="promo-title">阳澄湖服务区</view>
|
||
<view class="promo-subtitle">品质服务 · 舒适体验 · 安全便民</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 概览 -->
|
||
<view class="section m15">
|
||
<view class="section-header">📊 设施状态概览</view>
|
||
<view class="stats-grid p15 noMargin">
|
||
<view class="stat-card">
|
||
<view class="stat-number ok">7</view>
|
||
<view class="stat-label">正常运行</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<view class="stat-number warn">1</view>
|
||
<view class="stat-label">维护中</view>
|
||
</view>
|
||
<view class="stat-card">
|
||
<view class="stat-number danger">0</view>
|
||
<view class="stat-label">故障停用</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设施列表 -->
|
||
<view class="facilities-section">
|
||
<view class="facilities-header">🏪 服务设施详情</view>
|
||
<view class="event-list noPad">
|
||
<!-- 加油站 -->
|
||
<view class="event-item left-ok">
|
||
<view class="event-header">
|
||
<view class="event-title">⛽ 加油站服务</view>
|
||
<view class="event-meta">
|
||
<view class="event-priority priority-low ok">运行正常</view>
|
||
</view>
|
||
</view>
|
||
<view class="event-content">
|
||
<view class="event-description">
|
||
<text class="line">• 92#汽油：7.8元/升 95#汽油：8.3元/升</text>
|
||
<text class="line">• 0#柴油：7.2元/升</text>
|
||
<text class="line">• 24小时营业，支持现金、刷卡、手机支付</text>
|
||
</view>
|
||
<view class="event-actions">
|
||
<button class="event-action-btn btn-primary" @tap="checkFuelStock">库存查询</button>
|
||
<button class="event-action-btn btn-success" @tap="contactFuelStaff">联系加油员</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 充电桩 -->
|
||
<view class="event-item left-ok">
|
||
<view class="event-header">
|
||
<view class="event-title">🔌 新能源充电桩</view>
|
||
<view class="event-meta">
|
||
<view class="event-priority priority-low ok">运行正常</view>
|
||
</view>
|
||
</view>
|
||
<view class="event-content">
|
||
<view class="event-description">
|
||
<text class="line">• 快充桩：8个（60kW） 慢充桩：4个（7kW）</text>
|
||
<text class="line">• 当前使用：6个桩在充电中</text>
|
||
<text class="line">• 支持国标充电接口，扫码即充</text>
|
||
</view>
|
||
<view class="event-actions">
|
||
<button class="event-action-btn btn-primary" @tap="checkChargingStatus">充电状态</button>
|
||
<button class="event-action-btn btn-warning" @tap="reportChargingIssue">故障上报</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 餐厅 -->
|
||
<view class="event-item left-ok">
|
||
<view class="event-header">
|
||
<view class="event-title">🍽️ 餐厅服务</view>
|
||
<view class="event-meta">
|
||
<view class="event-priority priority-low ok">营业中</view>
|
||
</view>
|
||
</view>
|
||
<view class="event-content">
|
||
<view class="event-description">
|
||
<text class="line">• 营业时间：06:00-23:00</text>
|
||
<text class="line">• 特色：苏式小笼包、阳澄湖大闸蟹套餐</text>
|
||
<text class="line">• 座位：80个，当前客流量适中</text>
|
||
</view>
|
||
<view class="event-actions">
|
||
<button class="event-action-btn btn-primary" @tap="viewMenu">查看菜单</button>
|
||
<button class="event-action-btn btn-success" @tap="contactChef">联系厨房</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 便利店 -->
|
||
<view class="event-item left-ok">
|
||
<view class="event-header">
|
||
<view class="event-title">🛒 便利店</view>
|
||
<view class="event-meta">
|
||
<view class="event-priority priority-low ok">营业中</view>
|
||
</view>
|
||
</view>
|
||
<view class="event-content">
|
||
<view class="event-description">
|
||
<text class="line">• 24小时营业</text>
|
||
<text class="line">• 商品：日用品、零食饮料、汽车用品、纪念品</text>
|
||
<text class="line">• 特色：阳澄湖特产、江南小食</text>
|
||
</view>
|
||
<view class="event-actions">
|
||
<button class="event-action-btn btn-primary" @tap="checkInventory">库存管理</button>
|
||
<button class="event-action-btn btn-success" @tap="contactCashier">联系收银</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 停车场 -->
|
||
<view class="event-item left-warn">
|
||
<view class="event-header">
|
||
<view class="event-title">🅿️ 停车场</view>
|
||
<view class="event-meta">
|
||
<view class="event-priority priority-medium">部分维护</view>
|
||
</view>
|
||
</view>
|
||
<view class="event-content">
|
||
<view class="event-description">
|
||
<text class="line">• 总车位：200个 大车位：50个</text>
|
||
<text class="line">• 当前可用：180个（B区20个车位灯光维修中）</text>
|
||
<text class="line">• 免费停车，24小时开放</text>
|
||
</view>
|
||
<view class="event-actions">
|
||
<button class="event-action-btn btn-warning"
|
||
@tap="contactMaintenance('parking')">联系维修</button>
|
||
<button class="event-action-btn btn-primary" @tap="checkParkingStatus">车位状态</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他设施 -->
|
||
<view class="event-item left-ok">
|
||
<view class="event-header">
|
||
<view class="event-title">🏢 其他设施服务</view>
|
||
<view class="event-meta">
|
||
<view class="event-priority priority-low ok">服务正常</view>
|
||
</view>
|
||
</view>
|
||
<view class="event-content">
|
||
<view class="event-description">
|
||
<text class="line">• 🚻 洗手间：24小时开放，含无障碍设施</text>
|
||
<text class="line">• 📶 免费WiFi：全区覆盖，密码：YCH888</text>
|
||
<text class="line">• 🔧 汽修服务：8:00-18:00，应急救援24小时</text>
|
||
</view>
|
||
<view class="event-actions">
|
||
<button class="event-action-btn btn-primary" @tap="viewAllServices">查看详情</button>
|
||
<button class="event-action-btn btn-success" @tap="contactService">联系服务</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<style lang="less" scoped>
|
||
@bg: #f8f9fa;
|
||
@muted: #666;
|
||
@card: #fff;
|
||
@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
@primary: #27B25F;
|
||
@primary2: #4CCC7F;
|
||
@ok: #2ed573;
|
||
@warn: #ff9f43;
|
||
@danger: #ff4757;
|
||
|
||
.emergency-details {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
max-width: 750rpx;
|
||
height: 100%;
|
||
background: @bg;
|
||
z-index: 1000;
|
||
overflow-y: auto;
|
||
|
||
.emergency-details-header {
|
||
background: linear-gradient(135deg, @danger, #ff3838);
|
||
color: #fff;
|
||
padding: 40rpx;
|
||
position: relative;
|
||
box-shadow: @shadow;
|
||
|
||
&.facilities-theme {
|
||
background: linear-gradient(135deg, #20bf6b, #0fb9b1);
|
||
}
|
||
|
||
.emergency-back-btn {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 30rpx;
|
||
background: rgba(255, 255, 255, .2);
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.h1 {
|
||
text-align: center;
|
||
display: block;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.current-area {
|
||
text-align: center;
|
||
display: block;
|
||
opacity: .9;
|
||
}
|
||
}
|
||
|
||
.event-list {
|
||
padding: 30rpx;
|
||
|
||
.event-item {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 30rpx;
|
||
overflow: hidden;
|
||
box-shadow: @shadow;
|
||
border-left: 8rpx solid @danger;
|
||
|
||
&.warning {
|
||
border-left-color: @warn;
|
||
}
|
||
|
||
&.resolved {
|
||
border-left-color: @ok;
|
||
opacity: .85;
|
||
}
|
||
|
||
&.left-ok {
|
||
border-left-color: @ok;
|
||
}
|
||
|
||
&.left-warn {
|
||
border-left-color: @warn;
|
||
}
|
||
|
||
.event-header {
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f1f3f4;
|
||
background: #fff;
|
||
|
||
.event-title {
|
||
font-weight: 700;
|
||
font-size: 32rpx;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.event-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: @muted;
|
||
|
||
.event-time {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.event-priority {
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
|
||
&.priority-high {
|
||
background: #ffe6e6;
|
||
color: #d32f2f;
|
||
}
|
||
|
||
&.priority-medium {
|
||
background: #fff3e0;
|
||
color: #f57c00;
|
||
}
|
||
|
||
&.priority-low {
|
||
background: #e8f5e8;
|
||
color: #388e3c;
|
||
}
|
||
|
||
&.ok {
|
||
background: #e8f5e8;
|
||
color: #2e7d32;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-content {
|
||
padding: 30rpx;
|
||
|
||
.event-description {
|
||
margin-bottom: 24rpx;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
|
||
.line {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.event-actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 16rpx;
|
||
|
||
.event-action-btn {
|
||
padding: 16rpx 24rpx;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
|
||
&.btn-primary {
|
||
background: @primary;
|
||
}
|
||
|
||
&.btn-success {
|
||
background: @ok;
|
||
}
|
||
|
||
&.btn-warning {
|
||
background: @warn;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
font-size: 24rpx;
|
||
margin-top: 10rpx;
|
||
padding: 16rpx 20rpx;
|
||
background: @bg;
|
||
border-radius: 12rpx;
|
||
|
||
.status-dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 50%;
|
||
|
||
&.status-processing {
|
||
background: @warn;
|
||
}
|
||
|
||
&.status-resolved {
|
||
background: @ok;
|
||
}
|
||
|
||
&.status-pending {
|
||
background: @danger;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-event-btn {
|
||
position: fixed;
|
||
bottom: 160rpx;
|
||
right: 40rpx;
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient(135deg, @primary, @primary2);
|
||
border-radius: 50%;
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, .4);
|
||
}
|
||
|
||
.promo-banner {
|
||
margin: 30rpx;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: @shadow;
|
||
|
||
.promo-image {
|
||
width: 100%;
|
||
height: 240rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 48rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.promo-content {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, .7));
|
||
padding: 40rpx 30rpx 30rpx;
|
||
color: #fff;
|
||
|
||
.promo-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.promo-subtitle {
|
||
font-size: 24rpx;
|
||
opacity: .9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.facilities-section {
|
||
margin: 30rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: @shadow;
|
||
|
||
.facilities-header {
|
||
background: linear-gradient(135deg, #20bf6b, #0fb9b1);
|
||
color: #fff;
|
||
padding: 30rpx;
|
||
font-weight: 700;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |