lc_frontend/src/views/screen/components/WeatherWarningExample.vue

<template>
  <div class="weather-example">
    <h2>WeatherWarning 组件使用示例</h2>

    <!-- 基础用法 -->
    <div class="example-section">
      <h3>1. 基础用法</h3>
      <WeatherWarning />
    </div>

    <!-- 自定义配置 -->
    <div class="example-section">
      <h3>2. 自定义配置</h3>
      <WeatherWarning :scroll-speed="2" :auto-fetch="false" :update-interval="10" :custom-data="customWeatherData" />
    </div>

    <!-- 通过ref调用方法 -->
    <div class="example-section">
      <h3>3. 通过ref调用方法</h3>
      <WeatherWarning ref="weatherRef" />
      <div class="button-group">
        <button @click="updateData">更新数据</button>
        <button @click="startScroll">开始滚动</button>
        <button @click="stopScroll">停止滚动</button>
        <button @click="fetchData">获取数据</button>
      </div>
    </div>

    <!-- 控制面板 -->
    <div class="example-section">
      <h3>4. 控制面板</h3>
      <div class="control-panel">
        <label>
          滚动速度:
          <input v-model.number="scrollSpeed" type="range" min="0.5" max="3" step="0.1" />
          {{ scrollSpeed }}
        </label>
        <label>
          更新间隔(分钟):
          <input v-model.number="updateInterval" type="range" min="1" max="30" step="1" />
          {{ updateInterval }}
        </label>
        <label>
          <input v-model="autoFetch" type="checkbox" />
          自动获取数据
        </label>
      </div>
      <WeatherWarning :scroll-speed="scrollSpeed" :auto-fetch="autoFetch" :update-interval="updateInterval" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import WeatherWarning from './WeatherWarning.vue'

// 自定义天气数据
const customWeatherData = [
  {
    content: '自定义预警1: 今日天气晴朗，适合户外活动......',
    level: 'low'
  },
  {
    content: '自定义预警2: 明日可能有小雨，请携带雨具......',
    level: 'medium'
  },
  {
    content: '自定义预警3: 后天将有强降雨，请注意防范......',
    level: 'high'
  }
]

// 控制面板数据
const scrollSpeed = ref(1)
const updateInterval = ref(5)
const autoFetch = ref(true)

// ref引用
const weatherRef = ref()

// 更新数据
const updateData = () => {
  const newData = [
    {
      content: '动态更新的天气预警信息1......',
      level: 'high'
    },
    {
      content: '动态更新的天气预警信息2......',
      level: 'medium'
    }
  ]
  weatherRef.value?.updateWeatherData(newData)
}

// 开始滚动
const startScroll = () => {
  weatherRef.value?.startWeatherScroll()
}

// 停止滚动
const stopScroll = () => {
  weatherRef.value?.stopWeatherScroll()
}

// 获取数据
const fetchData = () => {
  weatherRef.value?.fetchWeatherData()
}
</script>

<style scoped lang="scss">
// 响应式设计
@media (width <=768px) {
  .weather-example {
    padding: 10px;

    .example-section {
      padding: 15px;
    }

    .button-group {
      flex-direction: column;

      button {
        width: 100%;
      }
    }

    .control-panel {
      label {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
      }
    }
  }
}

.weather-example {
  max-width: 1200px;
  padding: 20px;
  margin: 0 auto;

  h2 {
    margin-bottom: 30px;
    color: #333;
    text-align: center;
  }

  .example-section {
    padding: 20px;
    margin-bottom: 40px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;

    h3 {
      padding-bottom: 10px;
      margin-bottom: 15px;
      color: #555;
      border-bottom: 2px solid #007bff;
    }
  }

  .button-group {
    display: flex;
    margin-top: 15px;
    gap: 10px;
    flex-wrap: wrap;

    button {
      padding: 8px 16px;
      color: white;
      cursor: pointer;
      background: #007bff;
      border: none;
      border-radius: 4px;
      transition: background 0.3s;

      &:hover {
        background: #0056b3;
      }
    }
  }

  .control-panel {
    padding: 15px;
    margin-bottom: 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;

    label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-weight: 500;

      input[type="range"] {
        width: 150px;
      }

      input[type="checkbox"] {
        margin: 0;
      }
    }
  }
}
</style>