maintenance_system/src/views/shengchanManage/powerfenxi/components/detaildata.vue

<template>
  <div class="detaildata-container">
    <div class="title-container">
      <div class="title-left">
        <TitleComponent title="发电量同比分析" :font-level="2" />
      </div>
      <div class="title-right">
        <el-input
          placeholder="请输入搜索内容"
          style="width: 200px;"
          prefix-icon="Search"
        />
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column prop="datetime" label="日期" align="center" />
      <el-table-column prop="prbs" label="发电量(Kwh)" align="center">
        <template #default="scope">
          <span>{{ scope.row.prbs }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="prz" label="同比(%)" align="center">
        <template #default="scope">
          <span :class="{
            'text-red': scope.row.prz < 0,
            'text-green': scope.row.prz > 0
          }">
            {{ scope.row.prz > 0 ? '+' : '' }}{{ scope.row.prz }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="prz2" label="环比(%)" align="center">
        <template #default="scope">
          <span :class="{
            'text-red': scope.row.prz2 < 0,
            'text-green': scope.row.prz2 > 0
          }">
            {{ scope.row.prz2 > 0 ? '+' : '' }}{{ scope.row.prz2 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="设备状态" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.status === '正常' ? 'success' : 'warning'"
            size="small"
          >
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click="handleDetail(scope.row)"
            class="text-blue"
          >
            详情
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleExport(scope.row)"
            class="text-blue"
          >
            导出
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义表格数据类型
interface TableRow {
  datetime: string
  prbs: string | number
  prz: number
  prz2: number
  status: string
}

// 响应式数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(293)
const tableData = ref<TableRow[]>([])

// 模拟数据生成函数
  const generateMockData = (page: number, size: number): TableRow[] => {
    const data: TableRow[] = []
    const startIndex = (page - 1) * size
    
    // 生成不同的日期
    const baseDate = new Date(2023, 5, 30)
    
    for (let i = 0; i < size; i++) {
      const index = startIndex + i
      if (index >= total.value) break
      
      // 生成不同的日期
      const currentDate = new Date(baseDate)
      currentDate.setDate(baseDate.getDate() - index)
      const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`
      
      // 随机生成正负数，展示不同颜色效果
      const randomValue1 = (Math.random() - 0.5) * 10
      const randomValue2 = (Math.random() - 0.5) * 10
      
      data.push({
        datetime: dateStr,
        prbs: (Math.random() * 100 + 150).toFixed(1), // 150-250之间的随机数
        prz: Number(randomValue1.toFixed(1)),
        prz2: Number(randomValue2.toFixed(1)),
        status: i % 8 === 2 ? '预警' : '正常'
      })
    }
    
    return data
  }

// 处理分页大小变化
const handleSizeChange = (size: number) => {
  pageSize.value = size
  loadData()
}

// 处理当前页码变化
const handleCurrentChange = (current: number) => {
  currentPage.value = current
  loadData()
}

// 处理详情按钮点击
const handleDetail = (row: TableRow) => {
  ElMessage.info('查看详情: ' + row.datetime)
  // 实际项目中这里应该跳转到详情页或显示详情对话框
}

// 处理导出按钮点击
const handleExport = (row: TableRow) => {
  ElMessage.info('导出数据: ' + row.datetime)
  // 实际项目中这里应该调用导出API
}

// 加载数据
const loadData = () => {
  loading.value = true
  
  // 模拟API请求延迟
  setTimeout(() => {
    tableData.value = generateMockData(currentPage.value, pageSize.value)
    loading.value = false
  }, 500)
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.detaildata-container {
  padding: 16px;
  background: #fff;
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 16px;
}

.title-left {
  display: flex;
  align-items: center;
}

.title-right {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.text-red {
    color: #f56c6c;
  }

  .text-green {
    color: #67c23a;
  }

  .text-blue {
    color: #1890ff;
  }

.el-button--text {
  padding: 0;
  height: auto;
  font-size: 14px;
}

// 响应式布局
@media screen and (max-width: 1200px) {
  .detaildata-container {
    padding: 12px;
  }
  
  .el-table {
    font-size: 13px;
  }
  
  .el-table-column {
    &:not(:first-child):not(:last-child) {
      width: 90px !important;
    }
  }
}
</style>