<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header><div class="card-header"><span>风情数据</span></div></template>
      <el-form :inline="true" size="small">
        <el-form-item label="日期"><el-input v-model="queryDate" placeholder="yyyy-MM-dd HH" style="width:160px" /></el-form-item>
        <el-form-item><el-button type="primary" @click="loadData">查询</el-button></el-form-item>
      </el-form>
      <el-table :data="list" stripe v-loading="loading" border>
        <el-table-column prop="STNM" label="站名" width="100" />
        <el-table-column prop="MAXWNDV" label="最大风速" width="80" />
        <el-table-column prop="MAXWNDDIR" label="最大风向" width="80" />
        <el-table-column prop="WNDV" label="风速" width="60" />
        <el-table-column prop="WNDPWR" label="风力" width="60" />
        <el-table-column prop="AVGWNDV" label="平均风速" width="80" />
        <el-table-column prop="AVGWNDDIR" label="平均风向" width="80" />
        <el-table-column prop="TM" label="时间" width="160" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup name="Wind">
import { getWindList } from '@/api/slgc/wind/index'
const loading = ref(true); const list = ref([]); const queryDate = ref('')
function loadData() {
  loading.value = true
  getWindList({ date: queryDate.value }).then(res => {
    list.value = res.data || res.rows || []
    loading.value = false
  })
}
onMounted(() => loadData())
</script>
<style scoped>.card-header { font-weight:600;font-size:16px; }</style>
