时间轴加数据库

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysTimelineSegmentController.java

@@ -0,0 +1,81 @@
+package com.ruoyi.web.controller.system;
+
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.core.domain.entity.SysTimelineSegment;
+import com.ruoyi.common.enums.BusinessType;
+import com.ruoyi.system.service.ISysTimelineSegmentService;
+
+@RestController
+@RequestMapping("/system/timeline")
+public class SysTimelineSegmentController extends BaseController
+{
+    @Autowired
+    private ISysTimelineSegmentService segmentService;
+
+    @PreAuthorize("@ss.hasPermi('system:timeline:list')")
+    @GetMapping("/list")
+    public AjaxResult list(SysTimelineSegment segment)
+    {
+        List<SysTimelineSegment> list = segmentService.selectSegmentList(segment);
+        return success(list);
+    }
+
+    @GetMapping("/listByRoomId/{roomId}")
+    public AjaxResult listByRoomId(@PathVariable Long roomId)
+    {
+        List<SysTimelineSegment> list = segmentService.selectSegmentListByRoomId(roomId);
+        return success(list);
+    }
+
+    @PreAuthorize("@ss.hasPermi('system:timeline:query')")
+    @GetMapping(value = "/{segmentId}")
+    public AjaxResult getInfo(@PathVariable Long segmentId)
+    {
+        return success(segmentService.selectSegmentById(segmentId));
+    }
+
+    @PreAuthorize("@ss.hasPermi('system:timeline:add')")
+    @Log(title = "时间轴管理", businessType = BusinessType.INSERT)
+    @PostMapping
+    public AjaxResult add(@RequestBody SysTimelineSegment segment)
+    {
+        return toAjax(segmentService.insertSegment(segment));
+    }
+
+    @PreAuthorize("@ss.hasPermi('system:timeline:edit')")
+    @Log(title = "时间轴管理", businessType = BusinessType.UPDATE)
+    @PutMapping
+    public AjaxResult edit(@RequestBody SysTimelineSegment segment)
+    {
+        return toAjax(segmentService.updateSegment(segment));
+    }
+
+    @PreAuthorize("@ss.hasPermi('system:timeline:remove')")
+    @Log(title = "时间轴管理", businessType = BusinessType.DELETE)
+    @DeleteMapping("/{segmentId}")
+    public AjaxResult remove(@PathVariable Long segmentId)
+    {
+        return toAjax(segmentService.deleteSegmentById(segmentId));
+    }
+
+    @PreAuthorize("@ss.hasPermi('system:timeline:remove')")
+    @Log(title = "时间轴管理", businessType = BusinessType.DELETE)
+    @DeleteMapping("/room/{roomId}")
+    public AjaxResult removeByRoomId(@PathVariable Long roomId)
+    {
+        return toAjax(segmentService.deleteSegmentByRoomId(roomId));
+    }
+}

ruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysTimelineSegment.java

@@ -0,0 +1,89 @@
+package com.ruoyi.common.core.domain.entity;
+
+import javax.validation.constraints.NotBlank;
+import javax.validation.constraints.NotNull;
+import javax.validation.constraints.Size;
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+
+public class SysTimelineSegment
+{
+    private static final long serialVersionUID = 1L;
+
+    private Long segmentId;
+
+    private Long roomId;
+
+    @NotBlank(message = "时间点不能为空")
+    @Size(min = 0, max = 8, message = "时间点长度不能超过8个字符")
+    private String segmentTime;
+
+    @NotBlank(message = "时间段名称不能为空")
+    @Size(min = 0, max = 50, message = "时间段名称长度不能超过50个字符")
+    private String segmentName;
+
+    @Size(max = 500, message = "时间段描述长度不能超过500个字符")
+    private String segmentDesc;
+
+    public Long getSegmentId()
+    {
+        return segmentId;
+    }
+
+    public void setSegmentId(Long segmentId)
+    {
+        this.segmentId = segmentId;
+    }
+
+    @NotNull(message = "房间ID不能为空")
+    public Long getRoomId()
+    {
+        return roomId;
+    }
+
+    public void setRoomId(Long roomId)
+    {
+        this.roomId = roomId;
+    }
+
+    public String getSegmentTime()
+    {
+        return segmentTime;
+    }
+
+    public void setSegmentTime(String segmentTime)
+    {
+        this.segmentTime = segmentTime;
+    }
+
+    public String getSegmentName()
+    {
+        return segmentName;
+    }
+
+    public void setSegmentName(String segmentName)
+    {
+        this.segmentName = segmentName;
+    }
+
+    public String getSegmentDesc()
+    {
+        return segmentDesc;
+    }
+
+    public void setSegmentDesc(String segmentDesc)
+    {
+        this.segmentDesc = segmentDesc;
+    }
+
+    @Override
+    public String toString() {
+        return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
+            .append("segmentId", getSegmentId())
+            .append("roomId", getRoomId())
+            .append("segmentTime", getSegmentTime())
+            .append("segmentName", getSegmentName())
+            .append("segmentDesc", getSegmentDesc())
+            .toString();
+    }
+}

ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysTimelineSegmentMapper.java

@@ -0,0 +1,22 @@
+package com.ruoyi.system.mapper;
+
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+import com.ruoyi.common.core.domain.entity.SysTimelineSegment;
+
+public interface SysTimelineSegmentMapper
+{
+    public List<SysTimelineSegment> selectSegmentList(SysTimelineSegment segment);
+
+    public List<SysTimelineSegment> selectSegmentListByRoomId(@Param("roomId") Long roomId);
+
+    public SysTimelineSegment selectSegmentById(Long segmentId);
+
+    public int insertSegment(SysTimelineSegment segment);
+
+    public int updateSegment(SysTimelineSegment segment);
+
+    public int deleteSegmentById(Long segmentId);
+
+    public int deleteSegmentByRoomId(@Param("roomId") Long roomId);
+}

ruoyi-system/src/main/java/com/ruoyi/system/service/ISysTimelineSegmentService.java

@@ -0,0 +1,21 @@
+package com.ruoyi.system.service;
+
+import java.util.List;
+import com.ruoyi.common.core.domain.entity.SysTimelineSegment;
+
+public interface ISysTimelineSegmentService
+{
+    public List<SysTimelineSegment> selectSegmentList(SysTimelineSegment segment);
+
+    public List<SysTimelineSegment> selectSegmentListByRoomId(Long roomId);
+
+    public SysTimelineSegment selectSegmentById(Long segmentId);
+
+    public int insertSegment(SysTimelineSegment segment);
+
+    public int updateSegment(SysTimelineSegment segment);
+
+    public int deleteSegmentById(Long segmentId);
+
+    public int deleteSegmentByRoomId(Long roomId);
+}

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysTimelineSegmentServiceImpl.java

@@ -0,0 +1,57 @@
+package com.ruoyi.system.service.impl;
+
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.ruoyi.common.core.domain.entity.SysTimelineSegment;
+import com.ruoyi.system.mapper.SysTimelineSegmentMapper;
+import com.ruoyi.system.service.ISysTimelineSegmentService;
+
+@Service
+public class SysTimelineSegmentServiceImpl implements ISysTimelineSegmentService
+{
+    @Autowired
+    private SysTimelineSegmentMapper segmentMapper;
+
+    @Override
+    public List<SysTimelineSegment> selectSegmentList(SysTimelineSegment segment)
+    {
+        return segmentMapper.selectSegmentList(segment);
+    }
+
+    @Override
+    public List<SysTimelineSegment> selectSegmentListByRoomId(Long roomId)
+    {
+        return segmentMapper.selectSegmentListByRoomId(roomId);
+    }
+
+    @Override
+    public SysTimelineSegment selectSegmentById(Long segmentId)
+    {
+        return segmentMapper.selectSegmentById(segmentId);
+    }
+
+    @Override
+    public int insertSegment(SysTimelineSegment segment)
+    {
+        return segmentMapper.insertSegment(segment);
+    }
+
+    @Override
+    public int updateSegment(SysTimelineSegment segment)
+    {
+        return segmentMapper.updateSegment(segment);
+    }
+
+    @Override
+    public int deleteSegmentById(Long segmentId)
+    {
+        return segmentMapper.deleteSegmentById(segmentId);
+    }
+
+    @Override
+    public int deleteSegmentByRoomId(Long roomId)
+    {
+        return segmentMapper.deleteSegmentByRoomId(roomId);
+    }
+}

ruoyi-system/src/main/resources/mapper/system/SysTimelineSegmentMapper.xml

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.system.mapper.SysTimelineSegmentMapper">
+
+	<resultMap type="SysTimelineSegment" id="SysTimelineSegmentResult">
+		<id property="segmentId"     column="segment_id"     />
+		<result property="roomId"       column="room_id"       />
+		<result property="segmentTime"   column="segment_time"   />
+		<result property="segmentName"   column="segment_name"   />
+		<result property="segmentDesc"   column="segment_desc"   />
+	</resultMap>
+
+	<sql id="selectSegmentVo">
+        select s.segment_id, s.room_id, s.segment_time, s.segment_name, s.segment_desc
+        from sys_timeline_segment s
+    </sql>
+
+	<select id="selectSegmentList" parameterType="SysTimelineSegment" resultMap="SysTimelineSegmentResult">
+        <include refid="selectSegmentVo"/>
+        where 1=1
+		<if test="roomId != null and roomId != 0">
+			AND room_id = #{roomId}
+		</if>
+		<if test="segmentName != null and segmentName != ''">
+			AND segment_name like concat('%', #{segmentName}, '%')
+		</if>
+		order by s.segment_time
+    </select>
+
+	<select id="selectSegmentListByRoomId" parameterType="Long" resultMap="SysTimelineSegmentResult">
+        <include refid="selectSegmentVo"/>
+        where room_id = #{roomId}
+		order by s.segment_time
+    </select>
+
+	<select id="selectSegmentById" parameterType="Long" resultMap="SysTimelineSegmentResult">
+		<include refid="selectSegmentVo"/>
+		where segment_id = #{segmentId}
+	</select>
+
+	<insert id="insertSegment" parameterType="SysTimelineSegment">
+ 		insert into sys_timeline_segment(
+ 			room_id,
+ 			segment_time,
+ 			segment_name,
+ 			<if test="segmentDesc != null and segmentDesc != ''">segment_desc,</if>
+ 			segment_id
+ 		)values(
+ 			#{roomId},
+ 			#{segmentTime},
+ 			#{segmentName},
+ 			<if test="segmentDesc != null and segmentDesc != ''">#{segmentDesc},</if>
+ 			#{segmentId}
+ 		)
+	</insert>
+
+	<update id="updateSegment" parameterType="SysTimelineSegment">
+ 		update sys_timeline_segment
+ 		<set>
+ 			<if test="segmentTime != null and segmentTime != ''">segment_time = #{segmentTime},</if>
+ 			<if test="segmentName != null and segmentName != ''">segment_name = #{segmentName},</if>
+ 			<if test="segmentDesc != null">segment_desc = #{segmentDesc},</if>
+ 		</set>
+ 		where segment_id = #{segmentId}
+	</update>
+
+	<delete id="deleteSegmentById" parameterType="Long">
+		delete from sys_timeline_segment where segment_id = #{segmentId}
+	</delete>
+
+	<delete id="deleteSegmentByRoomId" parameterType="Long">
+		delete from sys_timeline_segment where room_id = #{roomId}
+	</delete>
+
+</mapper>

ruoyi-ui/src/api/system/timeline.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+export function listTimelineSegments(query) {
+  return request({
+    url: '/system/timeline/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getTimelineSegmentsByRoomId(roomId) {
+  return request({
+    url: '/system/timeline/listByRoomId/' + roomId,
+    method: 'get'
+  })
+}
+
+export function getTimelineSegment(id) {
+  return request({
+    url: '/system/timeline/' + id,
+    method: 'get'
+  })
+}
+
+export function addTimelineSegment(data) {
+  return request({
+    url: '/system/timeline',
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateTimelineSegment(data) {
+  return request({
+    url: '/system/timeline',
+    method: 'put',
+    data: data
+  })
+}
+
+export function delTimelineSegment(id) {
+  return request({
+    url: '/system/timeline/' + id,
+    method: 'delete'
+  })
+}
+
+export function delTimelineSegmentsByRoomId(roomId) {
+  return request({
+    url: '/system/timeline/room/' + roomId,
+    method: 'delete'
+  })
+}

ruoyi-ui/src/views/cesiumMap/index.vue

@@ -5249,7 +5249,7 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
 }
 
 .map-info-panel.panel-raised {
-  bottom: 65px;
+  bottom: 75px;
 }
 
 /* 比例尺：高德风格，浅色底、圆角、刻度线 */

ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <bottom-timeline ref="timeline" @timeline-hidden="onTimelineHidden" />
+    <bottom-timeline ref="timeline" @timeline-hidden="onTimelineHidden" :room-id="roomId" />
 
     <div class="bottom-left-panel" v-show="showPanel">
       <div class="panel-toggle" @click="togglePanel" :title="isExpanded ? '收起' : '展开'">
@@ -51,6 +51,12 @@ export default {
   components: {
     BottomTimeline
   },
+  props: {
+    roomId: {
+      type: Number,
+      default: null
+    }
+  },
   data() {
     return {
       isExpanded: false,
@@ -209,7 +215,7 @@ export default {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
   backdrop-filter: blur(20px);
   box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
-  padding: 5px 60px 5px 60px;
+  padding: 2px 60px 4px 60px;
   z-index: 1000;
   animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
@@ -253,7 +259,7 @@ export default {
 .steps-bar-container {
   display: flex;
   gap: 12px;
-  height: 40px;
+  height: 62px;
   align-items: center;
 }
 

ruoyi-ui/src/views/childRoom/BottomTimeline.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="bottom-timeline" v-if="isVisible">
     <div class="timeline-header">
-      <el-button type="text" size="mini" @click="openSettingsDialog" icon="el-icon-setting" title="时间轴设置">
-        时间轴设置
+      <div class="timeline-title">
+        <i class="el-icon-time"></i>
+        <span>任务时间轴</span>
+      </div>
+      <div class="header-actions">
+        <el-button type="text" size="mini" @click="openSettingsDialog" title="时间轴设置">
+          <i class="el-icon-setting"></i>
+          <span>设置</span>
         </el-button>
         <el-button type="text" size="mini" @click="closeTimeline" icon="el-icon-close" title="关闭时间轴">
         </el-button>
       </div>
+    </div>
 
     <div class="timeline-bar-container">
       <div class="timeline-bar">
@@ -22,6 +29,10 @@
             :title="segment.time + ' - ' + segment.name"
           >
             <div class="marker-dot"></div>
+            <div class="marker-tooltip">
+              <div class="tooltip-time">{{ segment.time }}</div>
+              <div class="tooltip-name">{{ segment.name }}</div>
+            </div>
           </div>
         </div>
         <div class="timeline-current" :style="{ left: progressWidth + '%' }">
@@ -182,8 +193,16 @@
 </template>
 
 <script>
+import { getTimelineSegmentsByRoomId, addTimelineSegment, updateTimelineSegment, delTimelineSegment } from '@/api/system/timeline'
+
 export default {
   name: 'BottomTimeline',
+  props: {
+    roomId: {
+      type: Number,
+      default: null
+    }
+  },
   data() {
     return {
       isVisible: false,
@@ -206,18 +225,29 @@ export default {
       },
       timer: null,
       audio: null,
-      currentTimeStr: ''
+      currentTimeStr: '',
+      isLoading: false
     }
   },
   mounted() {
     this.initDefaultTime()
-    this.initDefaultSegments()
+    this.loadTimelineSegments()
     this.startTimer()
     this.initAudio()
   },
   beforeDestroy() {
     this.stopTimer()
   },
+  watch: {
+    roomId: {
+      handler(newVal) {
+        if (newVal) {
+          this.loadTimelineSegments()
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     closeTimeline() {
       this.isVisible = false
@@ -248,6 +278,38 @@ export default {
       this.editSegment(this.currentSegment)
     },
 
+    async loadTimelineSegments() {
+      if (!this.roomId) {
+        this.initDefaultSegments()
+        return
+      }
+
+      try {
+        this.isLoading = true
+        const response = await getTimelineSegmentsByRoomId(this.roomId)
+        if (response.code === 200 && response.data && response.data.length > 0) {
+          this.timelineSegments = response.data.map(item => ({
+            segmentId: item.segmentId,
+            time: item.segmentTime,
+            name: item.segmentName,
+            description: item.segmentDesc,
+            active: false,
+            passed: false,
+            position: 0,
+            triggered: false
+          }))
+          this.updateTimeline()
+        } else {
+          this.initDefaultSegments()
+        }
+      } catch (error) {
+        console.error('加载时间轴数据失败:', error)
+        this.initDefaultSegments()
+      } finally {
+        this.isLoading = false
+      }
+    },
+
     initDefaultTime() {
       const now = new Date()
       this.startTime = new Date(now)
@@ -433,16 +495,33 @@ export default {
       this.showSegmentDialog = true
     },
 
-    saveSegment() {
+    async saveSegment() {
       if (!this.segmentForm.time || !this.segmentForm.name) {
         this.$message.warning('请填写完整信息')
         return
       }
 
+      const segmentData = {
+        roomId: this.roomId,
+        segmentTime: this.formatTime(this.segmentForm.time),
+        segmentName: this.segmentForm.name,
+        segmentDesc: this.segmentForm.description
+      }
+
+      try {
+        if (this.isEditMode && this.timelineSegments[this.editIndex].segmentId) {
+          segmentData.segmentId = this.timelineSegments[this.editIndex].segmentId
+          await updateTimelineSegment(segmentData)
+        } else {
+          const response = await addTimelineSegment(segmentData)
+          segmentData.segmentId = response.data
+        }
+
         const segment = {
-        time: this.formatTime(this.segmentForm.time),
-        name: this.segmentForm.name,
-        description: this.segmentForm.description,
+          segmentId: segmentData.segmentId,
+          time: segmentData.segmentTime,
+          name: segmentData.segmentName,
+          description: segmentData.segmentDesc,
           active: false,
           passed: false,
           triggered: false,
@@ -462,17 +541,30 @@ export default {
         this.updateTimeline()
         this.showSegmentDialog = false
         this.$message.success(this.isEditMode ? '编辑成功' : '添加成功')
+      } catch (error) {
+        console.error('保存时间段失败:', error)
+        this.$message.error('保存失败，请重试')
+      }
     },
 
-    deleteSegment(index) {
+    async deleteSegment(index) {
       this.$confirm('确定要删除这个时间段吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
+      }).then(async () => {
+        try {
+          const segment = this.timelineSegments[index]
+          if (segment.segmentId && this.roomId) {
+            await delTimelineSegment(segment.segmentId)
+          }
           this.timelineSegments.splice(index, 1)
           this.updateTimeline()
           this.$message.success('删除成功')
+        } catch (error) {
+          console.error('删除时间段失败:', error)
+          this.$message.error('删除失败，请重试')
+        }
       }).catch(() => {})
     },
 
@@ -509,49 +601,89 @@ export default {
   left: 0;
   right: 0;
   z-index: 1000;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  border-top: 1px solid #e4e7ed;
-  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
-  padding: 4px 12px 6px 12px;
+  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
+  padding: 2px 20px 4px;
+  border-radius: 12px 12px 0 0;
+  overflow: visible;
 }
 
 .timeline-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 16px;
-  margin-bottom: 3px;
+  min-height: 24px;
+  margin-bottom: 2px;
+}
+
+.timeline-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e293b;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.timeline-title i {
+  color: #008aff;
+  font-size: 16px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-actions .el-button {
+  color: #008aff;
+  transition: all 0.3s ease;
+  font-size: 15px;
+  padding: 4px 8px;
+}
+
+.header-actions .el-button:hover {
+  color: #0078e5;
+  transform: translateY(-1px);
 }
 
 .timeline-bar {
   position: relative;
-  height: 8px;
-  background: #f5f7fa;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid #e4e7ed;
+  height: 14px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 8px;
+  overflow: visible;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
 .timeline-bar-container {
   position: relative;
-  margin-bottom: 0;
+  margin-bottom: 2px;
+  overflow: visible;
 }
 
 .timeline-scale {
   position: relative;
-  height: 14px;
-  margin-top: 3px;
+  height: 20px;
+  margin-top: 2px;
   display: flex;
   align-items: center;
 }
 
 .scale-label {
   position: absolute;
-  font-size: 12px;
-  color: #909399;
+  font-size: 13px;
+  color: #64748b;
   transform: translateX(-50%);
   white-space: nowrap;
+  font-weight: 500;
+  padding: 3px 8px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
 .timeline-progress {
@@ -559,9 +691,10 @@ export default {
   top: 0;
   left: 0;
   height: 100%;
-  background: linear-gradient(90deg, #409EFF 0%, #67c23a 100%);
-  transition: width 0.5s ease;
-  border-radius: 6px;
+  background: linear-gradient(90deg, #008aff 0%, #66b8ff 100%);
+  transition: width 0.5s ease-in-out;
+  border-radius: 8px;
+  box-shadow: 0 0 8px rgba(0, 138, 255, 0.3);
 }
 
 .timeline-markers {
@@ -574,102 +707,132 @@ export default {
 
 .timeline-marker {
   position: absolute;
-  top: 0;
-  transform: translateX(-50%);
+  top: 50%;
+  transform: translate(-50%, -50%);
   cursor: pointer;
   z-index: 10;
-  height: 100%;
-  display: flex;
-  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.timeline-marker:hover {
+  transform: translate(-50%, -50%) translateY(-3px);
 }
 
 .timeline-marker:hover .marker-dot {
-  transform: scale(1.3);
-  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.3);
+  transform: scale(1.5);
+  box-shadow: 0 0 0 6px rgba(0, 138, 255, 0.2);
+}
+
+.timeline-marker:hover .marker-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(-12px);
 }
 
 .timeline-marker.active .marker-dot {
-  background: #E6A23C;
-  box-shadow: 0 0 0 3px rgba(230, 162, 60, 0.4);
-  animation: pulse 1.5s infinite;
+  background: #f59e0b;
+  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.3);
+  animation: pulse 2s infinite ease-in-out;
 }
 
 .timeline-marker.passed .marker-dot {
-  background: #67c23a;
-  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.3);
+  background: #10b981;
+  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
 }
 
 .marker-dot {
-  width: 6px;
-  height: 6px;
-  background: #409EFF;
+  width: 12px;
+  height: 12px;
+  background: #008aff;
   border-radius: 50%;
-  border: 1px solid white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: all 0.3s;
+  border: 2px solid white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}
+
+.marker-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(0);
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  padding: 8px 12px;
+  min-width: 140px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 20;
+  border: 1px solid #e2e8f0;
+}
+
+.tooltip-time {
+  font-size: 16px;
+  color: #008aff;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.tooltip-name {
+  font-size: 15px;
+  color: #1e293b;
+  font-weight: 500;
 }
 
 .timeline-current {
   position: absolute;
   top: 0;
-  width: 2px;
+  width: 4px;
   height: 100%;
-  background: #F56C6C;
+  background: #ef4444;
   transform: translateX(-50%);
   z-index: 20;
-  transition: left 0.5s ease;
+  transition: left 0.5s ease-in-out;
+  border-radius: 4px;
 }
 
 .current-indicator {
   position: absolute;
-  top: 0;
-  left: -4px;
-  width: 8px;
-  height: 8px;
-  background: #F56C6C;
+  top: 50%;
+  left: -6px;
+  width: 14px;
+  height: 14px;
+  background: #ef4444;
   border-radius: 50%;
-  border: 1px solid white;
-  box-shadow: 0 1px 3px rgba(245, 108, 108, 0.4);
-  animation: currentPulse 2s infinite;
+  border: 2px solid white;
+  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
+  transform: translateY(-50%);
+  animation: currentPulse 1.5s infinite ease-in-out;
 }
 
 .current-time {
   position: absolute;
-  top: -14px;
-  left: 0;
+  top: -26px;
+  left: 50%;
   transform: translateX(-50%);
-  font-size: 12px;
-  color: #F56C6C;
+  font-size: 13px;
+  color: #ef4444;
   white-space: nowrap;
-  font-weight: 500;
+  font-weight: 600;
   z-index: 25;
+  padding: 4px 10px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
 }
 
 @keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+  0% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.4); opacity: 0.8; }
+  100% { transform: scale(1); opacity: 1; }
 }
 
 @keyframes currentPulse {
-  0% {
-    box-shadow: 0 1px 3px rgba(245, 108, 108, 0.4);
-  }
-  50% {
-    box-shadow: 0 1px 6px rgba(245, 108, 108, 0.6);
-  }
-  100% {
-    box-shadow: 0 1px 3px rgba(245, 108, 108, 0.4);
-  }
+  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
 }
 
 .settings-content {
@@ -679,8 +842,9 @@ export default {
 .time-settings {
   margin-bottom: 20px;
   padding: 15px;
-  background: #f5f7fa;
-  border-radius: 6px;
+  background: #f8fafc;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
 .setting-row {
@@ -698,7 +862,7 @@ export default {
 
 .setting-label {
   font-size: 13px;
-  color: #606266;
+  color: #334155;
   font-weight: 500;
   white-space: nowrap;
   min-width: 60px;
@@ -714,13 +878,13 @@ export default {
   align-items: center;
   margin-bottom: 15px;
   padding-bottom: 10px;
-  border-bottom: 1px solid #dcdfe6;
+  border-bottom: 1px solid #e2e8f0;
 }
 
 .section-header h4 {
   margin: 0;
   font-size: 14px;
-  color: #303133;
+  color: #1e293b;
   font-weight: 600;
 }
 
@@ -732,31 +896,32 @@ export default {
 .segment-item {
   display: flex;
   align-items: center;
-  padding: 12px;
+  padding: 12px 16px;
   background: white;
-  border: 1px solid #dcdfe6;
-  border-radius: 6px;
-  margin-bottom: 10px;
-  transition: all 0.3s;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  transition: all 0.3s ease;
 }
 
 .segment-item:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  transform: translateY(-1px);
 }
 
 .segment-item.active {
-  background: linear-gradient(135deg, rgba(230, 162, 60, 0.05) 0%, rgba(230, 162, 60, 0.1) 100%);
-  border-color: #E6A23C;
+  background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, rgba(245,158,11,0.1) 100%);
+  border-color: #f59e0b;
 }
 
 .segment-item.passed {
-  background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(103, 194, 58, 0.1) 100%);
-  border-color: #67c23a;
+  background: linear-gradient(135deg, rgba(16,185,129,0.05) 0%, rgba(16,185,129,0.1) 100%);
+  border-color: #10b981;
 }
 
 .segment-time {
   font-size: 13px;
-  color: #409EFF;
+  color: #008aff;
   font-weight: 700;
   min-width: 80px;
 }
@@ -769,13 +934,13 @@ export default {
 .segment-name {
   font-size: 14px;
   font-weight: 600;
-  color: #303133;
+  color: #1e293b;
   margin-bottom: 3px;
 }
 
 .segment-desc {
   font-size: 12px;
-  color: #909399;
+  color: #64748b;
 }
 
 .segment-status {
@@ -799,13 +964,13 @@ export default {
 
 .detail-row label {
   font-weight: 600;
-  color: #303133;
+  color: #1e293b;
   min-width: 80px;
   flex-shrink: 0;
 }
 
 .detail-row span {
-  color: #606266;
+  color: #334155;
   line-height: 1.5;
 }
 
@@ -823,35 +988,49 @@ export default {
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   margin: 0 !important;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+  border: none;
 }
 
 .bottom-timeline .el-dialog__header {
-  background: #409EFF;
+  background: linear-gradient(90deg, #008aff 0%, #66b8ff 100%);
   color: white;
+  padding: 12px 20px;
 }
 
 .bottom-timeline .el-dialog__title {
   color: white;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
 }
 
 .bottom-timeline .el-dialog__headerbtn .el-dialog__close {
   color: white;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.bottom-timeline .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #e0e7ff;
+  transform: rotate(90deg);
 }
 
 .bottom-timeline .el-dialog__body {
-  padding: 20px;
+  padding: 24px;
+  background: #f8fafc;
 }
 
 .bottom-timeline .el-dialog__footer {
-  padding: 15px 20px;
-  border-top: 1px solid #dcdfe6;
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  background: white;
 }
 
 .timeline-settings-dialog.el-dialog {
   position: fixed !important;
-  bottom: 60px !important;
+  bottom: 130px !important;
   top: auto !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
@@ -861,7 +1040,7 @@ export default {
 
 .timeline-segment-dialog.el-dialog {
   position: fixed !important;
-  bottom: 60px !important;
+  bottom: 130px !important;
   top: auto !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
@@ -871,7 +1050,7 @@ export default {
 
 .timeline-detail-dialog.el-dialog {
   position: fixed !important;
-  bottom: 60px !important;
+  bottom: 130px !important;
   top: auto !important;
   left: 50% !important;
   transform: translateX(-50%) !important;

ruoyi-ui/src/views/childRoom/index.vue

@@ -192,7 +192,7 @@
       @open-import-dialog="showImportDialog = true"
     />
     <!-- 左下角工具面板 -->
-    <bottom-left-panel v-show="!screenshotMode" @bottom-panel-visible="handleBottomPanelVisible" />
+    <bottom-left-panel v-show="!screenshotMode" @bottom-panel-visible="handleBottomPanelVisible" :room-id="currentRoomId" />
     <!-- 底部时间轴（最初版本的样式）- 蓝色主题 -->
     <div
       v-show="!screenshotMode"

sql/sys_timeline_segment.sql

@@ -0,0 +1,22 @@
+-- ----------------------------
+-- 时间轴信息表
+-- ----------------------------
+drop table if exists sys_timeline_segment;
+create table sys_timeline_segment (
+  segment_id        bigint(20)      not null auto_increment    comment '时间段ID',
+  room_id           bigint(20)      not null                   comment '房间ID',
+  segment_time      varchar(8)       not null                   comment '时间点（HH:mm:ss）',
+  segment_name      varchar(50)     not null                   comment '时间段名称',
+  segment_desc      varchar(500)    default ''                 comment '时间段描述',
+  primary key (segment_id),
+  key idx_room_id (room_id)
+) engine=innodb auto_increment=100 comment = '时间轴信息表';
+
+-- ----------------------------
+-- 初始化时间轴信息表数据（示例数据）
+-- ----------------------------
+insert into sys_timeline_segment values(1, 1, '08:00:00', '任务准备', '开始准备任务所需的资源和设备');
+insert into sys_timeline_segment values(2, 1, '10:00:00', '资源调配', '完成资源的调配和分配');
+insert into sys_timeline_segment values(3, 1, '12:00:00', '任务执行', '开始执行主要任务');
+insert into sys_timeline_segment values(4, 1, '14:00:00', '任务监控', '监控任务执行进度');
+insert into sys_timeline_segment values(5, 1, '16:00:00', '任务完成', '任务完成，进行总结');