electripper-v2-ui/src/views/bst/areaSub/components/PlaybackPanel.vue

<template>
  <el-card class="playback-panel" header="轨迹控制台">
    <el-row class="device-info">
      <el-col :span="24" class="info-item">
        <span class="label">时间：</span>
        <span class="value">{{ currentLog ? currentLog.at : '-' }}</span>
      </el-col>
      <el-col :span="24" class="info-item">
        <span class="label">位置：</span>
        <span class="value">{{ currentLog ? `${currentLog.longitude}, ${currentLog.latitude}` : '-' }}</span>
      </el-col>
      <el-col :span="12" class="info-item">
        <span class="label">速度：</span>
        <span class="value">{{ currentSpeed }} Km/h</span>
      </el-col>
      <el-col :span="12" class="info-item">
        <span class="label">电压：</span>
        <span class="value">{{ currentLog ? currentLog.voltage + 'V' : '-' }}</span>
      </el-col>
      <el-col :span="12" class="info-item">
        <span class="label">信号：</span>
        <span class="value">{{ currentLog ? currentLog.signal : '-' }}</span>
      </el-col>
      <el-col :span="12" class="info-item">
        <span class="label">卫星：</span>
        <span class="value">{{ currentLog ? currentLog.satellites : '-' }}</span>
      </el-col>
      <el-col :span="12" class="info-item">
        <span class="label">状态：</span>
        <span class="value"><dict-tag :options="dict.type.device_status" :value="currentLog.status" size="mini"/></span>
      </el-col>
      <el-col :span="12" class="info-item">
        <span class="label">锁状态：</span>
        <span class="value"><dict-tag :options="dict.type.device_lock_status" :value="currentLog.lockStatus" size="mini"/></span>
      </el-col>
      <el-col :span="12" class="info-item">
        <span class="label">电门：</span>
        <span class="value"><dict-tag :options="dict.type.device_quality" :value="currentLog.quality" size="mini"/></span>
      </el-col>
    </el-row>

    <div class="playback-controls">
      <el-slider
        v-model="currentIndex"
        :max="maxIndex"
        :show-tooltip="false"
        @input="handleSliderChange">
      </el-slider>
      
      <div class="control-buttons">
        <el-button-group>
          <el-button size="mini" :icon="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'" @click="togglePlay">
            {{ isPlaying ? '暂停' : '播放' }}
          </el-button>
          <el-button 
            v-for="speed in [1, 2, 4, 8]" 
            :key="speed"
            size="mini"
            :type="playbackSpeed === speed ? 'primary' : ''"
            @click="setPlaybackSpeed(speed)">
            {{ speed }}x
          </el-button>
        </el-button-group>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'PlaybackPanel',
  dicts: ['device_status', 'device_lock_status', 'device_quality'],
  props: {
    currentLog: {
      type: Object,
      default: () => ({})
    },
    currentSpeed: {
      type: Number,
      default: 0
    },
    maxIndex: {
      type: Number,
      default: 0
    },
    isPlaying: {
      type: Boolean,
      default: false
    },
    playbackSpeed: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  watch: {
    currentLog(newVal) {
      // 同步外部传入的当前日志索引
      if (newVal && newVal.index !== undefined) {
        this.currentIndex = newVal.index;
      }
    }
  },
  methods: {
    handleSliderChange(index) {
      this.$emit('slider-change', index);
    },
    togglePlay() {
      this.$emit('toggle-play');
    },
    setPlaybackSpeed(speed) {
      this.$emit('speed-change', speed);
    }
  }
}
</script>

<style lang="scss" scoped>
.playback-panel {
  position: absolute;
  top: 60px;
  right: 15px;
  transform: none;
  z-index: 100;
  width: 400px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .device-info {
    padding: 8px;
    margin-bottom: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;

    .info-item {
      font-size: 12px;
      line-height: 1.4;

      .label {
        color: #606266;
      }

      .value {
        color: #303133;
        font-weight: 500;
      }
    }
  }

  .playback-controls {
    .el-slider {
      margin-bottom: 15px;
    }

    .control-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;

      .el-button {
        padding: 7px 12px;
      }
    }
  }
}
</style>