迁移

src/views/pvSystem/operatingCurve/components/box1/qushiLine.vue

@@ -0,0 +1,363 @@
+<template>
+    <div class="chart-container">
+        <!-- 图表标题和时间范围选择器 -->
+        <div class="chart-header">
+            <h2>发电量趋势 (kWh)</h2>
+            <div class="chart-actions">
+                <button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">日发电</button>
+                <button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">周发电</button>
+                <button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">月发电</button>
+            </div>
+        </div>
+        <!-- 图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, computed } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  quShiData: {
+    type: Object,
+    default: () => ({
+      day: {
+        xAxis: [],
+        actualData: [],
+        theoreticalData: []
+      },
+      week: {
+        xAxis: [],
+        actualData: [],
+        theoreticalData: []
+      },
+      month: {
+        xAxis: [],
+        actualData: [],
+        theoreticalData: []
+      }
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 时间范围状态
+const timeRange = ref('day');
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#2A82E4';
+const THEORETICAL_COLOR = '#67C23A';
+
+// 根据时间范围计算当前显示的数据
+const chartData = computed(() => {
+  // 使用传入的数据，如果不存在则使用默认数据
+  const dataForRange = props.quShiData[timeRange.value] || props.quShiData.day;
+  return {
+    xAxis: dataForRange.xAxis,
+    actualData: dataForRange.actualData,
+    theoreticalData: dataForRange.theoreticalData
+  };
+});
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    const data = chartData.value;
+
+    const option = {
+        
+        tooltip: {
+            trigger: 'axis',
+            // 悬停线相关设置
+            axisPointer: {
+                type: 'cross',
+                lineStyle: {
+                    color: '#2A82E4',
+                    width: 2
+                }
+            },
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            borderColor: '#e8e8e8',
+            borderWidth:2 ,
+            textStyle: {
+                color: '#333'
+            },
+            formatter: function (params) {
+                const date = params[0].axisValue;
+                const actualValue = params[0].value;
+                const theoreticalValue = params[1].value;
+
+                return `
+                      <div style="font-weight: bold;">${date}</div>
+                      <div style="color: ${ACTUAL_COLOR};">实际发电量: ${actualValue}</div>
+                      <div style="color: ${THEORETICAL_COLOR};">理论发电量: ${theoreticalValue}</div>
+                    `;
+            }
+        },
+        legend: {
+            right: 'center',
+            data: ['实际发电', '理论发电'],
+            top: 0,
+            itemWidth: 10,
+            itemHeight: 10,
+            icon: 'stack',
+            textStyle: {
+                fontSize: 12,
+                color: '#666'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '10%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.xAxis,
+            axisLine: {
+                lineStyle: {
+                    color: '#dcdfe6'
+                }
+            },
+            axisLabel: {
+                color: '#3E4954',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            splitLine: {
+                show: true,  //显示分割线
+                lineStyle: {
+                    type: 'dashed'  // 设置分割线为虚线
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: '#dcdfe6'
+                }
+            },
+            axisLabel: {
+                color: '#3E4954',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+            splitLine: {
+                show: true,  //显示分割线
+                lineStyle: {
+                    type: 'dashed'  // 设置分割线为虚线
+                }
+            }
+        },
+        series: [
+            {
+                name: '实际发电',
+                type: 'line',
+                data: data.actualData,
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 6,
+                // 开始不显示拐点， 鼠标经过显示
+                showSymbol: false,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: ACTUAL_COLOR
+                },
+                lineStyle: {
+                    color: ACTUAL_COLOR,
+                    width: 3
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: '#2A82E4',
+                        borderColor: '#fff',
+                        borderWidth: 3
+                    }
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.2)`
+                        },
+                        {
+                            offset: 1,
+                            color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.05)`
+                        }
+                    ])
+                }
+            },
+            {
+                name: '理论发电',
+                type: 'line',
+                data: data.theoreticalData,
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 6,
+                itemStyle: {
+                    color: THEORETICAL_COLOR
+                },
+                lineStyle: {
+                    color: THEORETICAL_COLOR,
+                    width: 3
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: '#67C23A',
+                        borderColor: '#fff',
+                        borderWidth: 3
+                    }
+                },
+                // 开始不显示拐点， 鼠标经过显示
+                showSymbol: false,
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.2)`
+                        },
+                        {
+                            offset: 1,
+                            color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.05)`
+                        }
+                    ])
+                }
+            },
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+// 监听时间范围变化，更新图表
+watch(timeRange, () => {
+    initChart();
+});
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 500px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 450px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 400px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>

src/views/pvSystem/operatingCurve/components/box2/duibiPie.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2>性能比分析</h2>
+      <p>当前系统性能比为83%，高于同行水平（78%），表明系统运行状态良好。</p>
+    </div>
+    <div ref="chartRef" class="chart-content"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+// 引入 ECharts 核心模块
+import * as echarts from 'echarts';
+import 'echarts-liquidfill'
+// 接收从父组件传入的数据
+const props = defineProps({
+  duibiPieData: {
+    type: Number,
+    default: () => ({
+      num:0
+    })
+  }
+});
+
+const chartRef = ref(null);
+let myChart = null;
+
+onMounted(() => {
+  // 组件挂载后初始化图表
+  initChart();
+});
+
+const initChart = () => {
+  // 获取 DOM 容器
+  const chartDom = chartRef.value;
+  // 初始化 ECharts 实例
+  myChart = echarts.init(chartDom);
+
+  // 使用传入的数据，如果不存在则使用默认数据
+  const { num } = props.duibiPieData;
+
+  // 配置图表参数
+  const option = {
+    title: {
+      show: true,
+      text: '性能比',
+      x: '50%',
+      y: '60%',
+      z: 10,
+      textAlign: 'center',
+      textStyle: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: 500
+      },
+    },
+    series: [
+      {
+        type: "liquidFill",
+        z: 2,
+        radius: "85%",
+        center: ["50%", "50%"],
+        data: [num/100],
+        label: {
+          fontSize: 30, // 设置数据字体大小
+          color: "#165DFF", // 设置数据字体颜色
+        },
+        backgroundStyle: {
+          color: "#fff",
+        },
+        outline: {
+          show: true,
+          itemStyle: {
+            borderWidth: 3, // 设置外边框的大小
+            borderColor: "#165DFF",// 设置外边框的颜色
+          },
+          borderDistance: 0,
+        },
+        color: [
+          {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 1,
+                color: "rgba(22, 93, 255,0.8)", //下
+              },
+              {
+                offset: 0,
+                color: "rgba(22, 93, 255,0.2)",
+              },
+            ],
+            globalCoord: false,
+          },
+        ],
+      },
+    ],
+  };
+
+  // 将配置项设置到图表实例
+  myChart.setOption(option);
+};
+
+// 组件卸载时，销毁图表实例（避免内存泄漏）
+onUnmounted(() => {
+  if (myChart) {
+    myChart.dispose();
+  }
+});
+</script>
+<style scoped lang="scss">
+.chart-container {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.chart-header {
+  margin-bottom: 16px;
+}
+
+.chart-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.chart-header p {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+}
+
+.chart-content {
+  width: 100%;
+  height: calc(100% - 80px);
+  min-height: 200px;
+}
+
+@media (max-width: 768px) {
+  .chart-container {
+    padding: 12px;
+  }
+
+  .chart-content {
+    height: calc(100% - 70px);
+    min-height: 280px;
+  }
+}
+
+@media (max-width: 480px) {
+  .chart-container {
+    padding: 10px;
+  }
+
+  .chart-header h2 {
+    font-size: 16px;
+  }
+
+  .chart-header p {
+    font-size: 11px;
+  }
+
+  .chart-content {
+    height: calc(100% - 65px);
+    min-height: 250px;
+  }
+}
+</style>

src/views/pvSystem/operatingCurve/components/box2/powerBar.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2>发电量预测对比</h2>
+      <p>实际发电量与预测值偏差在u±5%以内，处于合理范围，预测模型准确度较高。</p>
+    </div>
+    <div class="chart-content" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  powerBarData: {
+    type: Object,
+    default: () => ({
+      xAxis: ['上周', '本周'],
+      actualData: [],
+      forecastData: []
+    })
+  }
+});
+
+const chartRef = ref<HTMLDivElement>();
+let chartInstance: echarts.ECharts | null = null;
+
+// 初始化图表
+const initChart = async () => {
+  await nextTick();
+  if (!chartRef.value) return;
+  
+  // 销毁已存在的图表实例
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  
+  // 创建新的图表实例
+  chartInstance = echarts.init(chartRef.value);
+  
+  // 使用传入的数据，如果不存在则使用默认数据
+  const data = props.powerBarData;
+  
+  // 图表配置
+  const option = {
+    tooltip: {
+      backgroundColor: 'rgba(13, 64, 71, 0.50)',
+      borderColor: 'rgba(143, 225, 252, 0.60)',
+      textStyle: {
+        color: '#fff'
+      },
+      padding: 10,
+      borderRadius: 4,
+    },
+    legend: {
+      data: ['实际发电量', '预测发电量'],
+      itemWidth: 14,
+      itemHeight: 10,
+      itemGap: 4,
+      textStyle: {
+         fontSize: 12,
+         color: '#666'
+      }
+   },
+    xAxis: {
+      type: 'category',
+      data: data.xAxis,
+      axisPointer: {
+            type: 'shadow'
+         },
+          axisLabel: {
+            textStyle: {
+               color: '#3E4954',  
+               fontSize: 12     
+            }
+         },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      },
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 10000,
+      interval: 5000,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [
+      {
+        name: '实际发电量',
+        type: 'bar',
+        data: data.actualData,
+        itemStyle: {
+          color: '#1a77dd',
+          borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
+        },
+        barWidth: 60
+      },
+      {
+        name: '预测发电量',
+        type: 'bar',
+        data: data.forecastData,
+        itemStyle: {
+          color: '#7c3aed',
+          borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#6d28d9' // 悬停时的颜色
+          }
+        },
+        barWidth: 60
+      }
+    ]
+  };
+  
+  // 设置图表配置
+  chartInstance.setOption(option);
+};
+
+// 窗口大小改变时重新调整图表
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+// 生命周期钩子
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.chart-header {
+  margin-bottom: 16px;
+}
+
+.chart-header h2 {
+ font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-header p {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+}
+
+.chart-content {
+  width: 100%;
+  height: calc(100% - 80px);
+  min-height: 200px;
+}
+
+@media (max-width: 768px) {
+  .chart-container {
+    padding: 12px;
+  }
+  
+  .chart-content {
+    height: calc(100% - 70px);
+    min-height: 280px;
+  }
+}
+
+@media (max-width: 480px) {
+  .chart-container {
+    padding: 10px;
+  }
+  
+  .chart-header h2 {
+    font-size: 16px;
+  }
+  
+  .chart-header p {
+    font-size: 11px;
+  }
+  
+  .chart-content {
+    height: calc(100% - 65px);
+    min-height: 250px;
+  }
+}
+</style>

src/views/pvSystem/operatingCurve/components/nibianqiLine.vue

@@ -0,0 +1,340 @@
+<template>
+    <div class="chart-container">
+        <!-- 逆变器输出与汇流箱电流  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  nibianqiData: {
+    type: Object,
+    default: () => ({
+      xAxis: [],
+      inverterData: [],
+      combinerBoxData: []
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#7948EA';
+const THEORETICAL_COLOR = '#0DFFEF';
+
+// 十六进制颜色转rgba工具函数
+const hexToRgba = (hex, opacity) => {
+  // 移除#号
+  hex = hex.replace('#', '');
+  
+  // 解析RGB值
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    // 使用传入的数据，如果不存在则使用默认数据
+    const { xAxis, inverterData, combinerBoxData } = props.nibianqiData;
+
+    const option = {
+        title: {
+            text: '逆变器输出与汇流箱电流',
+            top: 5,
+            textStyle: {
+                color: '#111111', // 标题颜色
+                fontWeight: 'bold',
+                fontSize: 16,
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(33,56,77,1)',
+            borderColor: 'rgba(33,56,77,1)',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            }
+        },
+        legend: {
+            right: 'center',
+            top: 4,
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            icon: 'stack',
+        },
+        grid: {
+            top: '30%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#3E4954',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+        },
+        yAxis: [
+            {
+                name: '逆变器输出:KW',
+                position: 'left',
+                type: 'value',
+                min: 0,      // 统一最小刻度
+                max: 120,    // 统一最大刻度
+                axisLabel: {
+                    textStyle: {
+                        color: '#3E4954',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+                splitLine: {
+                    show: false,// y轴分割线
+                }
+            },
+            {
+                name: '汇流箱电流',
+                position: 'right',
+                type: 'value',
+                min: 0,      // 统一最小刻度
+                max: 120,    // 统一最大刻度
+                axisLabel: {
+                    textStyle: {
+                        color: '#3E4954',
+                        fontSize: 12
+                    }
+                },
+
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+
+                splitLine: {
+                    show: false,// y轴分割线
+                }
+            },
+        ],
+
+        series: [
+            {
+                name: '逆变器输出',
+                smooth: true,
+                type: 'line',
+                yAxisIndex: 1, // 关联到右侧y轴
+                lineStyle: {
+                    width: 4       // 线条宽度，单位是 px
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 拐点
+                showSymbol: true,
+                symbolSize: 10,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: ACTUAL_COLOR
+                },
+                data: inverterData
+            },
+            {
+                name: '汇流箱电流',
+                smooth: true,
+                type: 'line',
+                lineStyle: {
+                    width: 4       // 线条宽度，单位是 px
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 拐点
+                showSymbol: true,
+                symbolSize: 10,
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: THEORETICAL_COLOR
+                },
+                data: combinerBoxData
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    /* padding: 10px; */
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>

src/views/pvSystem/operatingCurve/components/rizhaoqiangduBar.vue

@@ -0,0 +1,261 @@
+<template>
+    <div class="chart-container">
+        <!--系统效率与日照强度 图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  riZhaoData: {
+    type: Object,
+    default: () => ({
+      xAxis: [],
+      systemEfficiency: [],
+      solarIrradiance: []
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const SYSTEM_EFFICIENCY_COLOR = '#FFD700'; // 黄色 - 系统效率
+const SOLAR_IRRADIANCE_COLOR = '#1890FF'; // 蓝色 - 日照强度
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    // 使用传入的数据，如果不存在则使用默认数据
+    const { xAxis, systemEfficiency, solarIrradiance } = props.riZhaoData;
+
+    const option = {
+        title: {
+            text: '系统效率与日照强度',
+            top: 5,
+            align: 'left',
+            textStyle: {
+                color: '#111111',
+                fontWeight: 'bold',
+                fontSize: 16,
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(255,255,255,1)',
+            borderColor: '#ddd',
+            borderWidth: 1,
+            textStyle: {
+                color: '#333',
+                fontSize: 14
+            },
+            formatter: function(params) {
+                const systemEfficiency = params[0].value;
+                const solarIrradiance = params[1].value;
+                return `
+                    <div style="padding: 5px;">
+                        <div style="color: ${params[0].color};">系统效率: ${systemEfficiency}%</div>
+                        <div style="color: ${params[1].color};">日照强度: ${solarIrradiance}</div>
+                    </div>
+                `;
+            }
+        },
+        legend: {
+            top: 30,
+            left: 'center',
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            data: ['系统效率', '日照强度'],
+            textStyle: {
+                color: '#666',
+                fontSize: 12
+            }
+        },
+        grid: {
+            top: '30%',
+            right: '10%',
+            bottom: '10%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#666',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#ddd'
+                }
+            }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '系统效率(%)',
+                nameTextStyle: {
+                    color: '#666',
+                    fontSize: 12
+                },
+                min: 0,
+                max: 20,
+                interval: 5,
+                axisLabel: {
+                    textStyle: {
+                        color: '#666',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: '#f0f0f0',
+                        type: 'dashed'
+                    }
+                }
+            },
+            {
+                type: 'value',
+                name: '日照强度',
+                nameTextStyle: {
+                    color: '#666',
+                    fontSize: 12
+                },
+                min: 0,
+                max: 800,
+                interval: 200,
+                axisLabel: {
+                    textStyle: {
+                        color: '#666',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
+                }
+            }
+        ],
+        series: [
+            {
+                name: '系统效率',
+                type: 'line',
+                smooth: true,
+                showSymbol: false,
+                symbol: 'circle',
+                symbolSize: 6,
+                emphasis: {
+                    showSymbol: true,
+                    symbolSize: 10
+                },
+                yAxisIndex: 0,
+                lineStyle: {
+                    width: 2,
+                    color: SYSTEM_EFFICIENCY_COLOR
+                },
+                itemStyle: {
+                    color: SYSTEM_EFFICIENCY_COLOR,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                data: systemEfficiency
+            },
+            {
+                name: '日照强度',
+                type: 'bar',
+                yAxisIndex: 1,
+                barWidth: '40%',
+                itemStyle: {
+                    color: SOLAR_IRRADIANCE_COLOR
+                },
+                data: solarIrradiance
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-content {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+}
+</style>

src/views/pvSystem/operatingCurve/components/temperatureLine.vue

@@ -0,0 +1,317 @@
+<template>
+    <div class="chart-container">
+        <!--组件温度（℃）  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  temperatureData: {
+    type: Object,
+    default: () => ({
+      xAxis: [],
+      componentTemp: [],
+      ambientTemp: []
+    })
+  }
+});
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 定义颜色常量
+const ACTUAL_COLOR = '#FF5733';
+const THEORETICAL_COLOR = '#FF8D1A';
+
+// 十六进制颜色转rgba工具函数
+const hexToRgba = (hex, opacity) => {
+  // 移除#号
+  hex = hex.replace('#', '');
+  
+  // 解析RGB值
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+
+    // 使用传入的数据，如果不存在则使用默认数据
+    const { xAxis, componentTemp, ambientTemp } = props.temperatureData;
+
+    const option = {
+        title: {
+            text: '组件温度（℃）',
+            top: 5,
+            textStyle: {
+                color: '#111111', // 标题颜色
+                fontWeight: 'bold',
+                fontSize: 16,
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(33,56,77,1)',
+            borderColor: 'rgba(33,56,77,1)',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            }
+        },
+        legend: {
+            right: '5%',
+            top: 4,
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            icon: 'stack',
+            data: ['组件温度', '环境温度']
+        },
+        grid: {
+            top: '20%',
+            right: '4%',
+            bottom: '4%',
+            left: '6%',
+            containLabel: true
+        },
+        xAxis: {
+            data: xAxis,
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                textStyle: {
+                    color: '#3E4954',
+                    fontSize: 12
+                }
+            },
+            axisTick: {
+                show: false // 去除刻度线
+            },
+        },
+        yAxis: 
+            {
+                type: 'value',
+                min: 0,
+                max: 50,
+                axisLabel: {
+                    formatter: '{value} ℃',
+                    textStyle: {
+                        color: '#3E4954',
+                        fontSize: 12
+                    }
+                },
+                axisTick: {
+                    show: false // 去除刻度线
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#f0f0f0',
+                        type: 'dashed'
+                    }
+                }
+            },
+        series: [
+            {
+                name: '组件温度',
+                type: 'line',
+                 smooth: true,
+                showSymbol: false, // 取消点显示
+                lineStyle: {
+                    width: 4,       // 线条宽度，单位是 px
+                    color: ACTUAL_COLOR
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                // 设置拐点颜色以及边框
+                itemStyle: {
+                    color: ACTUAL_COLOR
+                },
+                data: componentTemp
+            },
+            {
+                name: '环境温度',
+                type: 'line',
+                 smooth: true,
+                showSymbol: false, // 取消点显示
+                lineStyle: {
+                    width: 4,       // 线条宽度，单位是 px
+                    color: THEORETICAL_COLOR
+                },
+                // 填充颜色设置
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [
+                            {
+                                offset: 0,
+                                color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
+                            },
+                            {
+                                offset: 0.9,
+                                color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
+                            }
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                itemStyle: {
+                    color: THEORETICAL_COLOR
+                },
+                data: ambientTemp
+            }
+        ]
+    };
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.chart-actions button {
+    background: none;
+    border: 1px solid #e0e0e0;
+    padding: 5px 12px;
+    border-radius: 4px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.chart-actions button.active {
+    background-color: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.chart-content {
+    width: 100%;
+    height: calc(100% - 54px);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>

src/views/pvSystem/operatingCurve/components/yujing.vue

@@ -0,0 +1,238 @@
+<template>
+    <div class="warning-container">
+        <!-- 标题区域 -->
+        <h2 class="main-title">异常参数预警</h2>
+
+        <!-- 预警列表容器，设置最大高度和滚动 -->
+        <div class="warning-list">
+            <!-- 循环渲染预警项 -->
+            <div v-for="(warning, index) in warnings" :key="index"
+                :class="['warning-item', getWarningClass(warning.type)]">
+                <!-- 预警图标 -->
+                <el-icon :class="getIconClass(warning.type)">
+                    <template v-if="warning.type === 'error'">
+                        <CircleCloseFilled />
+                    </template>
+                    <template v-if="warning.type === 'warning'">
+                        <WarningFilled />
+                    </template>
+                    <template v-if="warning.type === 'info'">
+                        <Odometer />
+                    </template>
+                </el-icon>
+
+                <!-- 预警内容 -->
+                <div class="warning-content">
+                    <div :class="['warning-title', getTitleClass(warning.type)]">{{ warning.title }}</div>
+                    <div class="warning-time">{{ warning.time }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { CircleCloseFilled, InfoFilled, WarningFilled, Odometer } from '@element-plus/icons-vue';
+
+// 接收从父组件传入的数据
+const props = defineProps({
+  warningData: {
+    type: Array,
+    default: () => [
+      {
+        type: 'error',
+        title: '无',
+        time: '无'
+      }
+    ]
+  }
+});
+
+// 使用传入的预警数据
+const warnings = ref(props.warningData);
+
+// 根据预警类型获取样式类
+const getWarningClass = (type) => {
+    return `warning-${type}`;
+};
+
+// 根据预警类型获取图标样式类
+const getIconClass = (type) => {
+    return `${type}-icon`;
+};
+
+// 根据预警类型获取标题样式类，确保标题颜色与图标一致
+const getTitleClass = (type) => {
+    return `${type}-title`;
+};
+
+// 监听窗口大小变化，调整组件高度
+let resizeObserver = null;
+
+onMounted(() => {
+    // 设置响应式高度
+    const setResponsiveHeight = () => {
+        const warningContainer = document.querySelector('.warning-container');
+        const screenWidth = window.innerWidth;
+        let maxHeight = 400; // 默认高度，与line1组件一致
+
+        if (screenWidth <= 768) {
+            maxHeight = 350;
+        }
+        if (screenWidth <= 480) {
+            maxHeight = 300;
+        }
+
+        if (warningContainer) {
+            warningContainer.style.height = `${maxHeight}px`;
+        }
+    };
+
+    // 初始设置
+    setResponsiveHeight();
+
+    // 创建ResizeObserver监听窗口大小变化
+    if (window.ResizeObserver) {
+        resizeObserver = new ResizeObserver(setResponsiveHeight);
+        resizeObserver.observe(document.documentElement);
+    } else {
+        // 降级方案：使用窗口resize事件
+        window.addEventListener('resize', setResponsiveHeight);
+    }
+});
+
+onUnmounted(() => {
+    // 清理监听器，避免内存泄漏
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    } else {
+        window.removeEventListener('resize', () => { });
+    }
+});
+</script>
+
+<style scoped>
+.warning-container {
+    height: 400px;
+    /* 与line1组件一致的高度 */
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.main-title {
+    color: '#111111';
+    font-weight:bold;
+    font-size: 16px;
+    margin-bottom: 20px;
+
+
+}
+
+.warning-list {
+    overflow-y: auto;
+    padding-right: 10px;
+    /* 为滚动条预留空间 */
+    flex: 1;
+}
+
+/* 滚动条样式优化 */
+.warning-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.warning-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.warning-list::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+}
+
+.warning-list::-webkit-scrollbar-thumb:hover {
+    background: #aaa;
+}
+
+/* 响应式设计 - 与line1组件保持一致 */
+@media (max-width: 768px) {
+    .warning-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .warning-container {
+        height: 300px;
+    }
+}
+
+.warning-item {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    transition: transform 0.2s ease;
+}
+
+.warning-item:hover {
+    transform: translateY(-2px);
+}
+
+/* 不同类型预警的背景色 */
+.warning-error {
+    background-color: #fff1f0;
+}
+
+.warning-warning {
+    background-color: #fffbe6;
+}
+
+.warning-info {
+    background-color: #e6f7ff;
+}
+
+/* 图标和标题颜色保持一致 */
+.error-icon,
+.error-title {
+    color: #f5222d !important;
+    /* 红色，使用 !important 确保优先级 */
+}
+
+.warning-icon,
+.warning-title {
+    color: #faad14;
+}
+
+.info-icon,
+.info-title {
+    color: #00BAAD;
+}
+
+/* 图标通用样式 */
+.el-icon {
+    font-size: 20px;
+    margin-right: 12px;
+}
+
+.warning-content {
+    flex: 1;
+}
+
+.warning-content .warning-title {
+    font-size: 16px;
+    margin-bottom: 4px;
+    font-weight: bold;
+    /* 颜色由动态类名（如.error-title）控制，不设置固定颜色 */
+}
+
+.warning-content .warning-time {
+    font-size: 14px;
+    color: #666;
+}
+</style>