|
|
@@ -118,10 +118,12 @@
|
|
|
|
|
|
<!-- 视角显示区域 -->
|
|
|
<div class="view-display">
|
|
|
- <img v-if="selectedView === 'map'" src="/src/assets/images/Heilin/导航.png" alt="地图视角" class="view-image" />
|
|
|
- <img v-else-if="selectedView === 'robot'" src="/src/assets/images/Heilin/机器人视角.png" alt="机器人视角" class="view-image" />
|
|
|
- <div v-else class="view-placeholder">
|
|
|
- 请选择巡查视角
|
|
|
+ <div class="view-image-wrapper">
|
|
|
+ <img v-if="selectedView === 'map'" src="/src/assets/images/Heilin/导航.png" alt="地图视角" class="view-image" />
|
|
|
+ <img v-else-if="selectedView === 'robot'" src="/src/assets/images/Heilin/机器人视角.png" alt="机器人视角" class="view-image" />
|
|
|
+ <div v-else class="view-placeholder">
|
|
|
+ 请选择巡查视角
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -165,95 +167,64 @@
|
|
|
<div class="task-location">当前位置-水位自己台</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 右侧面板 2：预警成果 -->
|
|
|
- <div class="data-card data-card-2">
|
|
|
- <div class="panel-header">
|
|
|
- <h3>预警成果</h3>
|
|
|
- </div>
|
|
|
- <div class="panel-content">
|
|
|
- <!-- 预警报警信息 -->
|
|
|
- <div class="warning-section">
|
|
|
- <h4>预警报警信息</h4>
|
|
|
- <div class="warning-list">
|
|
|
- <div class="warning-item urgent">
|
|
|
- <div class="warning-id">预警编号：W20260311001</div>
|
|
|
- <div class="warning-info">
|
|
|
- <span>类型：流量异常</span>
|
|
|
- <span>位置：1号监测断面</span>
|
|
|
- <span>时间：2026-03-11 08:30</span>
|
|
|
- <span>等级：紧急</span>
|
|
|
- </div>
|
|
|
- <div class="warning-status">未处置</div>
|
|
|
- </div>
|
|
|
- <div class="warning-item normal">
|
|
|
- <div class="warning-id">预警编号：W20260311002</div>
|
|
|
- <div class="warning-info">
|
|
|
- <span>类型：传感器异常</span>
|
|
|
- <span>位置：测验设备区</span>
|
|
|
- <span>时间：2026-03-11 07:15</span>
|
|
|
- <span>等级：一般</span>
|
|
|
- </div>
|
|
|
- <div class="warning-status">已处置</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 成果展示 -->
|
|
|
- <div class="result-section" style="margin-top: 20px;">
|
|
|
- <h4>成果展示</h4>
|
|
|
-
|
|
|
- <!-- 异常成果 -->
|
|
|
- <div class="result-group">
|
|
|
- <h5>异常成果</h5>
|
|
|
- <div class="abnormal-list">
|
|
|
- <div class="abnormal-item">
|
|
|
- <div class="abnormal-id">异常编号：A20260311001</div>
|
|
|
- <div class="abnormal-info">
|
|
|
- <span>类型：流速传感器数据漂移</span>
|
|
|
- <span>位置：1号监测断面</span>
|
|
|
- <span>时间：2026-03-11 06:45</span>
|
|
|
- </div>
|
|
|
- <div class="abnormal-image">
|
|
|
- <img src="/src/assets/images/Heilin/图5.jpeg" alt="异常现场" class="abnormal-img" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 历史任务表格 -->
|
|
|
+ <div class="history-table-header">
|
|
|
+ <div class="history-table-col history-id-col">任务编号</div>
|
|
|
+ <div class="history-table-col history-area-col">巡检区域</div>
|
|
|
+ <div class="history-table-col history-time-col">执行时间</div>
|
|
|
+ <div class="history-table-col history-status-col">完成状态</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 数据成果 -->
|
|
|
- <div class="result-group" style="margin-top: 15px;">
|
|
|
- <h5>数据成果</h5>
|
|
|
- <div class="data-result">
|
|
|
- <div class="data-item">
|
|
|
- <span class="data-label">实时瞬时流量：</span>
|
|
|
- <span class="data-value">0.28 m³/s</span>
|
|
|
+ <div class="history-table-container">
|
|
|
+ <div class="history-table">
|
|
|
+ <div class="history-table-body">
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260310001</div>
|
|
|
+ <div class="history-table-col history-area-col">全部区域</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-10 14:00</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
+ </div>
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260310002</div>
|
|
|
+ <div class="history-table-col history-area-col">测验设备区</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-10 09:30</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
</div>
|
|
|
- <div class="data-item">
|
|
|
- <span class="data-label">当日平均流量：</span>
|
|
|
- <span class="data-value">0.25 m³/s</span>
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260309001</div>
|
|
|
+ <div class="history-table-col history-area-col">1号监测断面</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-09 16:00</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
</div>
|
|
|
- <div class="data-item">
|
|
|
- <span class="data-label">巡检周期流量汇总：</span>
|
|
|
- <span class="data-value">6.0 m³</span>
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260308001</div>
|
|
|
+ <div class="history-table-col history-area-col">汇水区</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-08 11:00</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
</div>
|
|
|
- <div class="data-item">
|
|
|
- <span class="data-label">水位：</span>
|
|
|
- <span class="data-value">32.15 m</span>
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260307001</div>
|
|
|
+ <div class="history-table-col history-area-col">全部区域</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-07 15:30</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
</div>
|
|
|
- <div class="data-item">
|
|
|
- <span class="data-label">pH值：</span>
|
|
|
- <span class="data-value normal">7.2（正常）</span>
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260306001</div>
|
|
|
+ <div class="history-table-col history-area-col">测验设备区</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-06 10:00</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
</div>
|
|
|
- <div class="data-item">
|
|
|
- <span class="data-label">浊度：</span>
|
|
|
- <span class="data-value normal">15 NTU（正常）</span>
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260305001</div>
|
|
|
+ <div class="history-table-col history-area-col">1号监测断面</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-05 13:00</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
</div>
|
|
|
- <div class="data-item">
|
|
|
- <span class="data-label">溶解氧：</span>
|
|
|
- <span class="data-value normal">8.5 mg/L（正常）</span>
|
|
|
+ <div class="history-table-row">
|
|
|
+ <div class="history-table-col history-id-col">T20260304001</div>
|
|
|
+ <div class="history-table-col history-area-col">汇水区</div>
|
|
|
+ <div class="history-table-col history-time-col">2026-03-04 09:00</div>
|
|
|
+ <div class="history-table-col history-status-col">已完成</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -261,43 +232,24 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 右侧面板 3：历史任务 -->
|
|
|
- <div class="data-card data-card-3">
|
|
|
+ <!-- 右侧面板 2：测流结果 -->
|
|
|
+ <div class="data-card data-card-2">
|
|
|
<div class="panel-header">
|
|
|
- <h3>历史任务</h3>
|
|
|
+ <h3>测流结果</h3>
|
|
|
</div>
|
|
|
<div class="panel-content">
|
|
|
- <div class="history-list">
|
|
|
- <div class="history-item">
|
|
|
- <div class="history-id">任务编号：T20260310001</div>
|
|
|
- <div class="history-info">
|
|
|
- <span>巡检区域：全部区域</span>
|
|
|
- <span>执行时间：2026-03-10 14:00</span>
|
|
|
- <span>完成状态：已完成</span>
|
|
|
- <span>核心成果：无异常</span>
|
|
|
- </div>
|
|
|
- <button class="history-btn">查看详情</button>
|
|
|
- </div>
|
|
|
- <div class="history-item">
|
|
|
- <div class="history-id">任务编号：T20260310002</div>
|
|
|
- <div class="history-info">
|
|
|
- <span>巡检区域：测验设备区</span>
|
|
|
- <span>执行时间：2026-03-10 09:30</span>
|
|
|
- <span>完成状态：已完成</span>
|
|
|
- <span>核心成果：发现传感器异常</span>
|
|
|
- </div>
|
|
|
- <button class="history-btn">查看详情</button>
|
|
|
- </div>
|
|
|
- <div class="history-item">
|
|
|
- <div class="history-id">任务编号：T20260309001</div>
|
|
|
- <div class="history-info">
|
|
|
- <span>巡检区域：1号监测断面</span>
|
|
|
- <span>执行时间：2026-03-09 16:00</span>
|
|
|
- <span>完成状态：已完成</span>
|
|
|
- <span>核心成果：无异常</span>
|
|
|
- </div>
|
|
|
- <button class="history-btn">查看详情</button>
|
|
|
- </div>
|
|
|
+ <!-- 任务选择 -->
|
|
|
+ <div class="task-selection">
|
|
|
+ <select v-model="selectedTask" class="task-select" @change="updateFlowChart">
|
|
|
+ <option value="task1">任务1 - 2026-03-11 08:00</option>
|
|
|
+ <option value="task2">任务2 - 2026-03-11 10:30</option>
|
|
|
+ <option value="task3">任务3 - 2026-03-11 14:00</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 测流成果图表 -->
|
|
|
+ <div class="flow-chart-container">
|
|
|
+ <div ref="flowChart" class="flow-chart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -414,7 +366,7 @@ const router = useRouter()
|
|
|
const showDetailModal = ref(false)
|
|
|
|
|
|
// 视觉巡查相关变量
|
|
|
-const selectedView = ref('')
|
|
|
+const selectedView = ref('robot')
|
|
|
const selectView = (view) => {
|
|
|
selectedView.value = view
|
|
|
}
|
|
|
@@ -429,6 +381,11 @@ const taskItems = ref({
|
|
|
water: true
|
|
|
})
|
|
|
|
|
|
+// 测流结果相关变量
|
|
|
+const selectedTask = ref('task1')
|
|
|
+const flowChart = ref(null)
|
|
|
+let flowChartInstance = null
|
|
|
+
|
|
|
const goBack = () => {
|
|
|
router.push('/')
|
|
|
}
|
|
|
@@ -460,6 +417,132 @@ const issueTask = () => {
|
|
|
alert('任务下达成功！')
|
|
|
}
|
|
|
|
|
|
+// 任务选择变化时更新图表
|
|
|
+const updateFlowChart = () => {
|
|
|
+ if (flowChartInstance) {
|
|
|
+ const option = getFlowChartOption(selectedTask.value)
|
|
|
+ flowChartInstance.setOption(option)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 获取测流图表配置
|
|
|
+const getFlowChartOption = (taskId) => {
|
|
|
+ // 不同任务的流量数据（虚构的波动较大的数据）
|
|
|
+ const flowData = {
|
|
|
+ task1: [120, 190, 300, 250, 400, 350, 280, 420, 380, 500, 450, 320],
|
|
|
+ task2: [80, 200, 150, 300, 220, 400, 300, 250, 350, 280, 420, 380],
|
|
|
+ task3: [150, 250, 200, 350, 280, 450, 320, 300, 400, 350, 480, 420]
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '流量 (m³/s)',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#00d5ff'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.6)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ffffff'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.2)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '流量',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: 'rgba(0, 212, 255, 0.5)' },
|
|
|
+ { offset: 1, color: 'rgba(0, 212, 255, 0.1)' }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: '#00d5ff',
|
|
|
+ width: 3,
|
|
|
+ shadowColor: 'rgba(0, 212, 255, 0.5)',
|
|
|
+ shadowBlur: 10
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00d5ff',
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ data: flowData[taskId]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化测流图表
|
|
|
+const initFlowChart = () => {
|
|
|
+ if (flowChart.value) {
|
|
|
+ // 清理旧实例
|
|
|
+ if (flowChartInstance) {
|
|
|
+ flowChartInstance.dispose()
|
|
|
+ flowChartInstance = null
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化ECharts实例
|
|
|
+ flowChartInstance = echarts.init(flowChart.value)
|
|
|
+
|
|
|
+ // 设置图表选项
|
|
|
+ const option = getFlowChartOption(selectedTask.value)
|
|
|
+ flowChartInstance.setOption(option)
|
|
|
+
|
|
|
+ // 监听窗口大小变化
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ if (flowChartInstance) {
|
|
|
+ flowChartInstance.resize()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
let taskGaugeChart = null
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -468,6 +551,11 @@ onMounted(() => {
|
|
|
|
|
|
// 初始化仪表盘
|
|
|
initTaskGauge()
|
|
|
+
|
|
|
+ // 初始化测流图表
|
|
|
+ setTimeout(() => {
|
|
|
+ initFlowChart()
|
|
|
+ }, 100)
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
@@ -476,6 +564,11 @@ onUnmounted(() => {
|
|
|
taskGaugeChart.dispose()
|
|
|
taskGaugeChart = null
|
|
|
}
|
|
|
+
|
|
|
+ if (flowChartInstance) {
|
|
|
+ flowChartInstance.dispose()
|
|
|
+ flowChartInstance = null
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const initTaskGauge = () => {
|
|
|
@@ -771,6 +864,8 @@ const initTaskGauge = () => {
|
|
|
|
|
|
.data-card-1 .panel-content {
|
|
|
padding: 10px 15px 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.station-intro {
|
|
|
@@ -1359,75 +1454,153 @@ const initTaskGauge = () => {
|
|
|
color: #ff4444;
|
|
|
}
|
|
|
|
|
|
-/* 历史任务区域 */
|
|
|
-.history-list {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
+/* 测流结果区域 */
|
|
|
+.task-selection {
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
-.history-item {
|
|
|
- background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+.task-select {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
|
|
|
+ color: #ffffff !important;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.4);
|
|
|
border-radius: 6px;
|
|
|
- padding: 12px;
|
|
|
- border-left: 3px solid #00d5ff;
|
|
|
- border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 8px;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
transition: all 0.3s ease;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-.history-item:hover {
|
|
|
- border-color: rgba(0, 212, 255, 0.5);
|
|
|
+.task-select:hover {
|
|
|
+ border-color: rgba(0, 212, 255, 0.8);
|
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
-.history-id {
|
|
|
- color: #00ff88;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+.task-select:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: rgba(0, 212, 255, 0.8);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.task-select option {
|
|
|
+ background: rgba(0, 20, 40, 0.9);
|
|
|
+ color: #ffffff !important;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.flow-chart-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.flow-chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
-.history-info {
|
|
|
+/* 历史任务区域 */
|
|
|
+.history-table-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 5px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.history-info span {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 12px;
|
|
|
+.history-table-header {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.3);
|
|
|
+ border-radius: 6px 6px 0 0;
|
|
|
+ padding: 7px;
|
|
|
+ z-index: 10;
|
|
|
}
|
|
|
|
|
|
-.history-info span::before {
|
|
|
- content: '▸';
|
|
|
- font-size: 10px;
|
|
|
+.history-table-col {
|
|
|
+ flex: 1;
|
|
|
color: #00d5ff;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-id-col {
|
|
|
+ flex: 1.5;
|
|
|
}
|
|
|
|
|
|
-.history-btn {
|
|
|
- background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(0, 66, 122, 0.2));
|
|
|
+.history-area-col {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.history-time-col {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.history-status-col {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-body {
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.3);
|
|
|
+ border-top: none;
|
|
|
+ border-radius: 0 0 6px 6px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-row {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-row:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-row:hover {
|
|
|
+ background: linear-gradient(135deg, rgba(0, 30, 60, 0.6), rgba(0, 20, 40, 0.6));
|
|
|
+ border-color: rgba(0, 212, 255, 0.5);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-row .history-table-col {
|
|
|
color: #ffffff;
|
|
|
- border: 1px solid rgba(0, 212, 255, 0.4);
|
|
|
- border-radius: 6px;
|
|
|
- padding: 8px 16px;
|
|
|
+ text-align: center;
|
|
|
font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- align-self: flex-end;
|
|
|
- text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
|
|
}
|
|
|
|
|
|
-.history-btn:hover {
|
|
|
- background: linear-gradient(90deg, rgba(0, 212, 255, 0.4), rgba(0, 66, 122, 0.4));
|
|
|
- border-color: rgba(0, 212, 255, 0.8);
|
|
|
- box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
|
|
- transform: translateY(-1px);
|
|
|
+/* 自定义滚动条样式 */
|
|
|
+.history-table-container::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-container::-webkit-scrollbar-track {
|
|
|
+ background: rgba(0, 20, 40, 0.3);
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-container::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(0, 212, 255, 0.5);
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-table-container::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: rgba(0, 212, 255, 0.8);
|
|
|
}
|
|
|
|
|
|
/* 中间空间 */
|
|
|
@@ -1772,15 +1945,11 @@ const initTaskGauge = () => {
|
|
|
}
|
|
|
|
|
|
.data-card-1 {
|
|
|
- min-height: 250px;
|
|
|
+ min-height: 450px;
|
|
|
}
|
|
|
|
|
|
.data-card-2 {
|
|
|
- min-height: 200px;
|
|
|
-}
|
|
|
-
|
|
|
-.data-card-3 {
|
|
|
- min-height: 290px;
|
|
|
+ min-height: 350px;
|
|
|
}
|
|
|
|
|
|
/* 任务详情相关样式 */
|
|
|
@@ -1806,7 +1975,7 @@ const initTaskGauge = () => {
|
|
|
}
|
|
|
|
|
|
.task-status {
|
|
|
- font-size: 25px;
|
|
|
+ font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #00d5ff;
|
|
|
text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
|
|
|
@@ -1921,10 +2090,20 @@ const initTaskGauge = () => {
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
|
|
|
+.view-image-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
.view-image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
+ object-position: center;
|
|
|
}
|
|
|
|
|
|
.view-placeholder {
|
BAI