maintenance_system/src/views/pvSystem/operatingCurve/index.vue

<template>
    <div class="model">
        <!-- 标题栏 -->
        <el-row :gutter="24">
            <el-col :span="12">
                <TitleComponent title="运行参数曲线分析" subtitle="实时监控光伏系统关键运行参数，分析性能趋势" />
            </el-col>
            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
                <!-- 子col1：下拉 -->
                <el-col :span="4">
                    <el-select placeholder="请选择电站">
                        <el-option label="所有电站" value="all"></el-option>
                    </el-select>
                </el-col>
                <!-- 子col2：下拉框容器 -->
                <el-col :span="4">
                    <el-select placeholder="请选择月份">
                        <el-option label="所有月份" value="all"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">
                        导出数据
                        <el-icon class="el-icon--right">
                            <UploadFilled />
                        </el-icon>
                    </el-button>
                </el-col>
            </el-col>
        </el-row>
        <!-- 图示区域1 -->
        <el-row :gutter="24" class="flex-container">
            <el-col :span="16" class="flex-item">
                <el-card>
                    <!-- 状态 -->
                    <statusBox :statusData="mockData.statusData"></statusBox>
                    <!-- 发电量趋势 -->
                    <qushiLine class="qushi" :quShiData="mockData.quShiData"></qushiLine>
                </el-card>
            </el-col>

            <el-col :span="8" class="flex-item">
                <el-card>
                    <!-- 发电量预测对比 -->
                   <powerBar :powerBarData="mockData.powerBarData"></powerBar>
                </el-card>
                <el-card>
                    <!-- 性能分析 -->
                   <duibiPie :duibiPieData="mockData.duibiPieData"></duibiPie>
                </el-card>
            </el-col>
        </el-row>
        <!-- 图示区域2-->
        <el-row :gutter="24" style="margin-top: 20px;" class="flex-container">
            <el-col :span="16">
                <el-card>
                    <!-- 系统效率与日照强度 -->
                      <rizhaoqiangduBar :riZhaoData="mockData.rizhaoqiangduData"></rizhaoqiangduBar>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <!-- 组件温度 -->
                    <temperatureLine class="line" :temperatureData="mockData.temperatureData"></temperatureLine>
                </el-card>
            </el-col>
        </el-row>
        <!-- 图示区域3 -->
        <el-row :gutter="24"  style="margin-top: 20px;">
            <el-col :span="16">
                <el-card>
                    <!-- 逆变器输出与汇流箱电流 -->
                    <nibianqiLine class="line" :nibianqiData="mockData.nibianqiData"></nibianqiLine>
                </el-card>
            </el-col>
            <el-col :span="8">
                <!-- 异常参数预警 -->
                <el-card>
                    <yujing :warningData="mockData.yujingData"></yujing>
                </el-card>
            </el-col>
        </el-row>


    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import TitleComponent from '@/components/TitleComponent/index.vue';
import StatusBox from '@/views/pvSystem/operatingCurve/components/box1/statusBox.vue'
import QushiLine from '@/views/pvSystem/operatingCurve/components/box1/qushiLine.vue'
import powerBar from '@/views/pvSystem/operatingCurve/components/box2/powerBar.vue'
import nibianqiLine from '@/views/pvSystem/operatingCurve/components/nibianqiLine.vue';
import temperatureLine from '@/views/pvSystem/operatingCurve/components/temperatureLine.vue';
import rizhaoqiangduBar from '@/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue';
import duibiPie from '@/views/pvSystem/operatingCurve/components/box2/duibiPie.vue';
import yujing from '@/views/pvSystem/operatingCurve/components/yujing.vue'

// 模拟接口数据
const mockData = ref({
  // 状态卡片数据   
  statusData: {
    totalPower: '3,456.8KWh',
    totalPowerChange: '8.2%',
    efficiency: '18.7%',
    efficiencyChange: '0.3%',
    temperature: '42.3°C',
    temperatureChange: '2.1°C',
    sunlight: '865 W/m²',
    sunlightChange: '12.5%'
  },
  
  // 发电量趋势数据
  quShiData: {
    day: {
      xAxis: ['03-09', '03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16'],
      actualData: [35, 65, 60, 55, 45, 50, 45, 30],
      theoreticalData: [30, 70, 85, 80, 65, 60, 65, 95]
    },
    week: {
      xAxis: ['第1周', '第2周', '第3周', '第4周'],
      actualData: [280, 360, 320, 400],
      theoreticalData: [300, 400, 350, 450]
    },
    month: {
      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
      actualData: [1250, 1420, 1380, 1650, 1520, 1780],
      theoreticalData: [1350, 1500, 1450, 1700, 1600, 1850]
    }
  },
  
  // 发电量预测对比数据
  powerBarData: {
    xAxis: ['上周', '本周'],
    actualData: [4899, 5200],
    forecastData: [5000, 5300]
  },
  
  // 性能比分析数据
  duibiPieData: {
    num: 83,
  },
  
  // 系统效率与日照强度数据
  rizhaoqiangduData: {
    xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
    systemEfficiency: [14, 12, 13, 15, 12, 16, 15, 14, 13, 6],
    solarIrradiance: [100, 556, 413, 115, 510, 115, 317, 118, 14, 7]
  },
  
  // 组件温度数据
  temperatureData: {
    xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
    componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
    ambientTemp: [18, 26, 32, 24, 1, 28, 36, 22, 30]
  },
  
  // 逆变器输出与汇流箱电流数据
  nibianqiData: {
    xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
    inverterData: [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53],
    combinerBoxData: [50, 48, 44, 62, 41, 78, 57, 70, 68, 100, 60, 73]
  },
  
  // 异常参数预警数据
  yujingData: [
    {
      type: 'error',
      title: '逆变器A电压异常',
      time: '今日14:32发生'
    },
    {
      type: 'warning',
      title: '组件温度过高',
      time: '今日13:45发生'
    },
    {
      type: 'info',
      title: '清理维护提醒',
      time: '3天后需要进行组件清洁'
    },
    {
      type: 'warning',
      title: '组件温度过高',
      time: '今日13:45发生'
    },
    {
      type: 'info',
      title: '清理维护提醒',
      time: '3天后需要进行组件清洁'
    },
    {
      type: 'error',
      title: '逆变器B电流异常',
      time: '今日10:22发生'
    },
    {
      type: 'warning',
      title: '散热系统效率降低',
      time: '昨日23:15发生'
    },
    {
      type: 'error',
      title: '汇流箱C通讯中断',
      time: '昨日18:30发生'
    }
  ]
});

// 模拟API调用
const fetchData = () => {
  return new Promise((resolve) => {
    // 模拟网络延迟
    setTimeout(() => {
      resolve(mockData.value);
    }, 500);
  });
};

// 页面加载时获取数据
onMounted(async () => {
  try {
    const data = await fetchData();
    mockData.value = data;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
});
</script>
<style scoped lang="scss">
.model {
    padding: 20px 15px;
    background-color: rgba(242, 248, 252, 1);
}
.flex-container {
  display: flex;
}
.flex-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 水平居中 */
  align-items: stretch; /* 拉伸子元素以填满容器高度 */
}
</style>