|
|
@@ -37,28 +37,99 @@
|
|
|
<div class="center-panel">
|
|
|
<div class="image-section">
|
|
|
<img :src="currentTask.image" alt="现场图片" class="main-image" />
|
|
|
- <div class="image-nav">
|
|
|
- <span class="nav-info">1 / 6</span>
|
|
|
- </div>
|
|
|
- <!-- 标注框 -->
|
|
|
- <div
|
|
|
- v-for="(tag, index) in currentTask.tags"
|
|
|
- :key="index"
|
|
|
- :style="{ top: tag.top, left: tag.left }"
|
|
|
- class="tag-box"
|
|
|
- @click="selectTag(tag)"
|
|
|
- >
|
|
|
- {{ tag.label }}
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="ai-section">
|
|
|
<div class="section-header">
|
|
|
<span class="section-title">隐患提示说明</span>
|
|
|
- <!-- <span class="ai-badge">AI安全提醒</span> -->
|
|
|
</div>
|
|
|
<div class="ai-content">
|
|
|
- <p>{{ currentTask.aiWarning }}</p>
|
|
|
+ <div class="report-overview">
|
|
|
+ <h4>一、报告概述</h4>
|
|
|
+ <p>本报告基于提供的当前附件内容，对识别到的关键场景要素（加油机、加油机输油软管、防撞栏、加油枪）及关联的潜在安全隐患进行了系统梳理。报告旨在从隐患识别的视角，提供一份结构化的核查汇总，以便快速定位和对照整改。</p>
|
|
|
+ </div>
|
|
|
+ <div class="report-hazards">
|
|
|
+ <h4>二、识别的要素及隐患汇总</h4>
|
|
|
+ <div class="hazard-item">
|
|
|
+ <div class="hazard-title">
|
|
|
+ <span class="hazard-icon">⛽</span>
|
|
|
+ <span>加油机</span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>加油机外观不整洁，有明显油污</li>
|
|
|
+ <li>机座地脚螺栓/紧固件连接明显松动</li>
|
|
|
+ <li>底部填沙潮湿或明显油迹</li>
|
|
|
+ <li>油品管线连接处有明显渗漏</li>
|
|
|
+ <li>过滤器有明显油污和渗漏</li>
|
|
|
+ <li>加油机底部未设置截断阀</li>
|
|
|
+ <li>加油枪密封不良，工作时渗漏</li>
|
|
|
+ <li>加油机静电接地失效</li>
|
|
|
+ <li>防爆挠性管连接松动，接线盒静电接地不合规</li>
|
|
|
+ </ul>
|
|
|
+ <div class="risk-tag high">风险：设备稳定性不足、油品泄漏风险、火灾爆炸风险</div>
|
|
|
+ </div>
|
|
|
+ <div class="hazard-item">
|
|
|
+ <div class="hazard-title">
|
|
|
+ <span class="hazard-icon">🔧</span>
|
|
|
+ <span>加油机输油软管</span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>加油软管上未设置安全拉断阀</li>
|
|
|
+ <li>存在油污、渗漏、连接松动等问题</li>
|
|
|
+ </ul>
|
|
|
+ <div class="risk-tag medium">风险：车辆误拉扯导致软管断裂，引发泄漏</div>
|
|
|
+ </div>
|
|
|
+ <div class="hazard-item">
|
|
|
+ <div class="hazard-title">
|
|
|
+ <span class="hazard-icon">🛡️</span>
|
|
|
+ <span>防撞栏及周边设施</span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>靠近岛端部的加油机未设置防撞柱或防撞柱松动破损</li>
|
|
|
+ <li>加油站进口/进站口减速带缺失、破损失效</li>
|
|
|
+ <li>地面破损、凹陷，或环保沟盖板破损凸起</li>
|
|
|
+ <li>地面未按规范划线</li>
|
|
|
+ <li>雨水排水设施破损或堵塞</li>
|
|
|
+ </ul>
|
|
|
+ <div class="risk-tag medium">风险：车辆撞击风险、交通秩序混乱、通行障碍</div>
|
|
|
+ </div>
|
|
|
+ <div class="hazard-item">
|
|
|
+ <div class="hazard-title">
|
|
|
+ <span class="hazard-icon">🔫</span>
|
|
|
+ <span>加油枪</span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>加油枪密封不良，工作时渗漏</li>
|
|
|
+ <li>汽油加油枪无集气罩或集气罩破损</li>
|
|
|
+ </ul>
|
|
|
+ <div class="risk-tag high">风险：操作点直接泄漏风险、火灾危险</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="report-suggestions">
|
|
|
+ <h4>三、优先整改建议</h4>
|
|
|
+ <div class="suggestion-list">
|
|
|
+ <div class="suggestion-item high">
|
|
|
+ <span class="priority">高</span>
|
|
|
+ <span>泄漏风险：立即核查加油枪、管线连接处、油气回收系统的任何渗漏迹象</span>
|
|
|
+ </div>
|
|
|
+ <div class="suggestion-item high">
|
|
|
+ <span class="priority">高</span>
|
|
|
+ <span>静电与火源管控：确保加油机静电接地有效、作业人员规范穿戴防静电装备</span>
|
|
|
+ </div>
|
|
|
+ <div class="suggestion-item medium">
|
|
|
+ <span class="priority">中</span>
|
|
|
+ <span>结构/机械完整性：紧固松动的螺栓、修复或安装防撞柱</span>
|
|
|
+ </div>
|
|
|
+ <div class="suggestion-item medium">
|
|
|
+ <span class="priority">中</span>
|
|
|
+ <span>交通与现场秩序：修复损坏的减速带、地面和划线</span>
|
|
|
+ </div>
|
|
|
+ <div class="suggestion-item base">
|
|
|
+ <span class="priority">基</span>
|
|
|
+ <span>标识与可视化：清洁加油机、涂刷警示色、确保铭牌清晰</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -95,7 +166,7 @@ const taskList = ref([
|
|
|
time: '6月12日 17:12',
|
|
|
status: 'completed',
|
|
|
statusText: '已完成',
|
|
|
- image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=gas%20station%20outdoor%20view&image_size=landscape_4_3',
|
|
|
+ image: '/demo1.png',
|
|
|
aiWarning: '综合安全风险提示：图中出现加油机、加油枪、防撞柱、加油机输油管、配电箱、灭火器等关键设备设施。经AI图像智能分析，识别出以下安全隐患风险点：加油机周边地面存在疑似油污痕迹，需及时清理以防人员滑倒；配电箱外部存在轻微破损，建议检查内部线路防护状况；消防灭火器放置位置虽符合规范，但需确认压力值是否在正常范围；防撞柱反光标识存在局部褪色，建议定期更换以保障夜间警示效果。综合评估当前场景整体安全状况为中等风险，建议立即安排专业人员对上述隐患点进行逐一排查整改，确保加油站运营安全。',
|
|
|
tags: [
|
|
|
{ label: '加油机', top: '55%', left: '32%' },
|
|
|
@@ -120,7 +191,7 @@ const taskList = ref([
|
|
|
time: '6月12日 15:53',
|
|
|
status: 'processing',
|
|
|
statusText: '处理中',
|
|
|
- image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=tunnel%20construction%20site&image_size=landscape_4_3',
|
|
|
+ image: '/demo1.png',
|
|
|
aiWarning: '隧道施工风险提示：检测到隧道内存在施工设备、临时支护结构等，建议关注支护稳定性、通风系统运行状态及照明设施完好情况。',
|
|
|
tags: [],
|
|
|
checklist: []
|
|
|
@@ -131,7 +202,7 @@ const taskList = ref([
|
|
|
time: '6月12日 15:52',
|
|
|
status: 'processing',
|
|
|
statusText: '处理中',
|
|
|
- image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=gas%20station%20outdoor%20view%202&image_size=landscape_4_3',
|
|
|
+ image: '/demo1.png',
|
|
|
aiWarning: '综合安全风险提示：检测到多个加油机位、消防设施及电气设备，建议全面检查设备运行状态及安全防护措施。',
|
|
|
tags: [],
|
|
|
checklist: []
|
|
|
@@ -142,7 +213,7 @@ const taskList = ref([
|
|
|
time: '6月12日 15:49',
|
|
|
status: 'pending',
|
|
|
statusText: '待处理',
|
|
|
- image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=gas%20station%20equipment&image_size=landscape_4_3',
|
|
|
+ image: '/demo1.png',
|
|
|
aiWarning: '',
|
|
|
tags: [],
|
|
|
checklist: []
|
|
|
@@ -153,7 +224,7 @@ const taskList = ref([
|
|
|
time: '6月12日 15:48',
|
|
|
status: 'pending',
|
|
|
statusText: '待处理',
|
|
|
- image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=gas%20station%20fuel%20dispenser&image_size=landscape_4_3',
|
|
|
+ image: '/demo1.png',
|
|
|
aiWarning: '',
|
|
|
tags: [],
|
|
|
checklist: []
|
|
|
@@ -164,7 +235,7 @@ const taskList = ref([
|
|
|
time: '6月12日 15:48',
|
|
|
status: 'pending',
|
|
|
statusText: '待处理',
|
|
|
- image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=bridge%20construction%20site&image_size=landscape_4_3',
|
|
|
+ image: '/demo1.png',
|
|
|
aiWarning: '',
|
|
|
tags: [],
|
|
|
checklist: []
|
|
|
@@ -363,7 +434,8 @@ const toggleCheck = (index) => {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20px;
|
|
|
- overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 8px;
|
|
|
}
|
|
|
|
|
|
.image-section {
|
|
|
@@ -372,13 +444,16 @@ const toggleCheck = (index) => {
|
|
|
border-radius: 12px;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
|
|
- height: calc(100vh * 5 / 7);
|
|
|
- flex-shrink: 0;
|
|
|
+ min-height: 400px;
|
|
|
+ background: #f5f5f5 url('/demo1.png') center center no-repeat;
|
|
|
+ background-size: contain;
|
|
|
|
|
|
.main-image {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
+ max-height: 600px;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.image-nav {
|
|
|
@@ -424,32 +499,154 @@ const toggleCheck = (index) => {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
}
|
|
|
-
|
|
|
- .ai-badge {
|
|
|
- padding: 2px 8px;
|
|
|
- background: #f6ffed;
|
|
|
- color: #52c41a;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.ai-content {
|
|
|
- background: #f6ffed;
|
|
|
- padding: 12px 16px;
|
|
|
- border-radius: 8px;
|
|
|
+ h4 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
p {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 13px;
|
|
|
color: #666;
|
|
|
line-height: 1.6;
|
|
|
- margin: 0;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .report-overview {
|
|
|
+ background: #f6ffed;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ color: #52c41a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hazard-item {
|
|
|
+ background: #fffbf0;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ border-left: 3px solid #faad14;
|
|
|
+
|
|
|
+ .hazard-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .hazard-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ margin: 0;
|
|
|
+ padding-left: 24px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .risk-tag {
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 8px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 11px;
|
|
|
+
|
|
|
+ &.high {
|
|
|
+ background: #fff1f0;
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.medium {
|
|
|
+ background: #fffbe6;
|
|
|
+ color: #faad14;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.low {
|
|
|
+ background: #f6ffed;
|
|
|
+ color: #52c41a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .suggestion-list {
|
|
|
+ .suggestion-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 10px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .priority {
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 500;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:last-child {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.high {
|
|
|
+ background: #fff1f0;
|
|
|
+
|
|
|
+ .priority {
|
|
|
+ background: #ff4d4f;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.medium {
|
|
|
+ background: #fffbe6;
|
|
|
+
|
|
|
+ .priority {
|
|
|
+ background: #faad14;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.base {
|
|
|
+ background: #f6ffed;
|
|
|
+
|
|
|
+ .priority {
|
|
|
+ background: #52c41a;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
