完成电量分析部分图表

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

@@ -0,0 +1,225 @@
+<template>
+  <div class="detaildata-container">
+    <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;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.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>