screen

src/components/BigDataPopup/index.vue

@@ -1,31 +1,7 @@
 <template>
-  <el-dialog
-    :fullscreen="true"
-    :append-to-body="true"
-    :visible.sync="show"
-    :show-close="false"
-    top="0"
-    custom-class="big-data-dialog"
-  >
-    <div class="swiper-container">
-      <div class="swiper-icon left-icon" v-show="imgIndex > 0">
-        <i class="el-icon-d-arrow-left icon" @click="toLeft"></i>
-      </div>
-      <div v-show="showRightIcon" class="swiper-icon right-icon">
-        <i class="el-icon-d-arrow-right icon" @click="toRight"></i>
-      </div>
-      <div
-        class="img-container"
-        :style="{ transform: 'translateX(' + imgIndex * -100 + 'vw)' }"
-      >
-        <img
-          v-for="index in maxImgNumber"
-          :key="'swiperImg' + index"
-          :src="require(`@/assets/images/ems/bigData-${index}.png`)"
-          alt=""
-        />
-      </div>
-    </div>
+  <el-dialog :fullscreen="true" :append-to-body="true" :visible.sync="show" :show-close="false" top="0"
+             custom-class="big-data-dialog">
+    <img src="@/assets/images/ems/bigData.png" alt="">
     <div class="close-btn" @click="show=false">
       <i class="el-icon-close"></i>
     </div>
@@ -38,54 +14,15 @@
   top: 10px;
   font-size: 23px;
   line-height: 20px;
-  color: rgba(217, 242, 255, 1);
+  color: rgba(176, 228, 255, 0.7);
   cursor: pointer;
 }
-.swiper-container {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-  .swiper-icon {
-    color: rgba(217, 242, 255, 1);
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 20;
-    cursor: pointer;
-    font-size: 30px;
-    padding: 20px;
-    background: transparent;
-    &.left-icon {
-      left: 20px;
-    }
-    &.right-icon {
-      right: 20px;
-    }
-    &:hover {
-      .icon {
-        opacity: 1;
-      }
-    }
-    .icon {
-      transition: all 0.6s;
-      opacity: 0;
-    }
-  }
-  .img-container {
-    height: 100%;
-    transition: all 1s;
-    display: flex;
-    flex-direction: row;
-    z-index: 0;
+
 img {
-      width: 100vw;
   height: 100vh;
+  width: 100vw;
   display: block;
   margin: 0;
-      flex-shrink: 0;
-    }
-  }
 }
 </style>
 <style lang="scss">
@@ -105,33 +42,8 @@
 export default {
   data() {
     return {
-      show: false,
-      imgIndex: 0,
-      maxImgNumber: 3,
-    };
-  },
-  computed: {
-    showRightIcon() {
-      return this.imgIndex < this.maxImgNumber - 1;
-    },
-  },
-  watch: {
-    show: {
-      handler(newValue) {
-        if (!newValue) this.imgIndex = 0;
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    toLeft() {
-      if (this.imgIndex === 0) return;
-      this.imgIndex -= 1;
-    },
-    toRight() {
-      if (this.imgIndex >= this.maxImgNumber - 1) return;
-      this.imgIndex += 1;
-    },
-  },
-};
+      show: false
+    }
+  }
+}
 </script>

src/layout/components/Navbar.vue

@@ -41,7 +41,6 @@
         <svg-icon icon-class="more-up"/>
       </div>
     </div>
-    <BigDataPopup ref="bigDataPopup"/>
   </div>
 </template>
 
@@ -53,7 +52,6 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-import BigDataPopup from '@/components/BigDataPopup'
 
 export default {
   emits: ['setLayout'],
@@ -63,8 +61,7 @@ export default {
     Hamburger,
     Screenfull,
     SizeSelect,
-    Search,
-    BigDataPopup
+    Search
   },
   computed: {
     ...mapGetters([
@@ -86,7 +83,10 @@ export default {
   },
   methods: {
     showBigDataImg() {
-      this.$refs.bigDataPopup.show = true
+      const routeUrl = this.$router.resolve({
+        path: '/screen'
+      })
+      window.open(routeUrl.href, '_blank')
     },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')

src/router/index.js

@@ -52,6 +52,11 @@ export const constantRoutes = [
     component: () => import('@/views/register'),
     hidden: true
   },
+  {
+    path: '/screen',
+    component: () => import('@/views/screen/index'),
+    hidden: true
+  },
   {
     path: '/404',
     component: () => import('@/views/error/404'),

src/views/ems/dzjk/gzgj/index.vue

@@ -1,19 +1,16 @@
+
 <template>
   <el-card  v-loading="loading" gshadow="always" class="common-card-container common-card-container-no-title-bg">
     <!--    搜索栏-->
     <el-form :inline="true" class="select-container">
       <el-form-item label="设备清单">
-        <el-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading"
-                   loading-text="正在加载数据">
-          <el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions"
-                     :key="key+'deviceIdOptions'"></el-option>
+        <el-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions" :key="key+'deviceIdOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="告警等级">
-        <el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading"
-                   loading-text="正在加载数据" style="width: 130px">
-          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions"
-                     :key="key+'alarmLevelOptions'"></el-option>
+        <el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="时间选择">
@@ -39,9 +36,7 @@
       <el-row style="">
         <el-col :xs="24" :sm="24" :lg="24">
           <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"
-                       :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{ item.name }}
-            </el-button>
+            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
           </el-button-group>
         </el-col>
       </el-row>
@@ -85,10 +80,7 @@
           <el-table-column
             label="状态">
             <template slot-scope="scope">
-            <span
-                :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{
-                $store.state.ems.alarmStatusOptions[scope.row.status]
-              }}</span>
+              <span :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{$store.state.ems.alarmStatusOptions[scope.row.status]}}</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -97,9 +89,7 @@
             width="250"
           >
             <template slot-scope="scope">
-            <el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">
-              已生成工单(工单号:{{ scope.row.ticketNo }})
-            </el-button>
+              <el-button type="text" size="mini"  v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
               <el-button type="primary" size="mini" v-else @click="createTicket(scope.row.id)">生成工单</el-button>
             </template>
           </el-table-column>
@@ -123,11 +113,10 @@
 
 
 <script>
-import {createTicketNo, getAlarmDetailList} from '@/api/ems/dzjk'
+import {getAlarmDetailList,createTicketNo} from'@/api/ems/dzjk'
 import {getDeviceList} from'@/api/ems/site'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { formatDate } from '@/filters/ems'
-
 export default {
   name:'DzjkGzgj',
   mixins:[getQuerySiteId],
@@ -165,9 +154,7 @@ export default {
       this.loading = true
       createTicketNo({id}).then(response=>{
         response?.data && this.toTicket()
-      }).finally(() => {
-        this.loading = false
-      })
+      }).finally(()=>{this.loading = false})
     },
     // 判断是否是同一天
     isSameDay(day1, day2) {
@@ -217,21 +204,10 @@ export default {
       const {siteId,pageNum,pageSize,activeBtn} =this
       const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
       let status = activeBtn === 'today' ? '0' : '1,2'
-      getAlarmDetailList({
-        status,
-        deviceId,
-        alarmLevel,
-        siteId,
-        pageSize,
-        pageNum,
-        alarmStartTime: formatDate(alarmStartTime),
-        alarmEndTime: formatDate(alarmEndTime)
-      }).then(response => {
+      getAlarmDetailList({status,deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(alarmStartTime),alarmEndTime:formatDate(alarmEndTime)}).then(response => {
         this.tableData=response?.rows || [];
         this.totalSize = response?.total || 0
-      }).finally(() => {
-        this.loading = false
-      })
+      }).finally(() => {this.loading=false})
     },
     getDeviceOptions(){
       getDeviceList(this.siteId).then(response => {

src/views/ems/dzjk/tjbb/dbbb/index.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div style="width:100%" v-loading="loading">
     <!--    搜索栏-->
@@ -21,9 +22,6 @@
       <el-form-item>
         <el-button @click="onReset" native-type="button">重置</el-button>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="exportTable" native-type="button">导出</el-button>
-      </el-form-item>
     </el-form>
     <!--表格-->
     <el-table
@@ -124,7 +122,6 @@
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { getAmmeterData} from '@/api/ems/dzjk'
 import {formatDate} from "@/filters/ems";
-
 export default {
   name:'DzjkTjbbDbbb',
   mixins: [getQuerySiteId],
@@ -145,16 +142,6 @@ export default {
     }
   },
   methods:{
-    // 导出表格
-    exportTable() {
-      if (!this.dateRange?.length) return
-      const [startTime, endTime] = this.dateRange
-      this.download('ems/statsReport/exportAmmeterData', {
-        siteId: this.siteId,
-        startTime,
-        endTime,
-      }, `电表报表_${startTime}-${endTime}.xlsx`)
-    },
     // 搜索
     onSearch(){
       this.pageNum =1//每次搜索从1开始搜索
@@ -197,9 +184,10 @@ export default {
       this.totalSize=0
       this.pageSize=10
       this.pageNum = 1
-      let now = new Date(), lastDay = now.getTime(), firstDay = new Date(now.setDate(1)).getTime();
-      this.defaultDateRange = [formatDate(firstDay), formatDate(lastDay)];
-      this.dateRange = [formatDate(firstDay), formatDate(lastDay)];
+      const now = new Date().getTime();
+      const lastMonth = new Date(now-30 * 24 * 60 * 60 * 1000).getTime();
+      this.defaultDateRange = [formatDate(lastMonth), formatDate(now)];
+      this.dateRange=[formatDate(lastMonth), formatDate(now)];
       this.getData()
     },
   },

src/views/ems/dzjk/tjbb/dcdqx/index.vue

@@ -16,8 +16,7 @@
           size="mini"
           :class="{ activeBtn: activeBtn === item.id }"
           @click="changeDataType(item.id)"
-        >{{ item.name }}
-        </el-button
+          >{{ item.name }}</el-button
         >
       </el-button-group>
       <div id="dcdEchart" style="height: 310px"></div>
@@ -29,10 +28,9 @@
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getStackData} from "@/api/ems/dzjk";
+import { getStackData, getStackNameList } from "@/api/ems/dzjk";
 import { formatDate } from "@/filters/ems";
 import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
-
 export default {
   name: "DzjkTjbbDcdqx",
   components: { DateRangeSelect },
@@ -144,7 +142,7 @@ export default {
           },
           legend: {
             left: "center",
-              top: "10",
+            bottom: "15",
           },
           tooltip: {
             trigger: "axis",
@@ -162,25 +160,10 @@ export default {
           yAxis: {
             type: "value",
           },
-            dataZoom: [
-              {
-                type: "inside",
-                start: 0,
-                end: 100,
-              },
-              {
-                start: 0,
-                end: 100,
-              },
-            ],
           dataset: { source },
           series: source[0].slice(1).map((item) => {
             return {
               type: "line",
-                smooth: true,
-                areaStyle: {
-                  opacity: 0.7,
-                },
             };
           }),
         },
@@ -193,7 +176,7 @@ export default {
     init() {
       this.$nextTick(() => {
         this.initChart();
-        this.$refs.dateRangeSelect.init(true);
+        this.$refs.dateRangeSelect.init();
       });
     },
   },

src/views/ems/dzjk/tjbb/glqx/index.vue

@@ -8,6 +8,7 @@
       <span class="card-title">功率曲线</span>
       <date-range-select
         ref="dateRangeSelect"
+        @reset="resetTime"
         @updateDate="updateDate"
       />
     </div>
@@ -21,10 +22,9 @@
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getPowerData} from "@/api/ems/dzjk";
+import { getPcsNameList, getPowerData } from "@/api/ems/dzjk";
 import { formatDate } from "@/filters/ems";
 import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
-
 export default {
   name: "DzjkTjbbGlqx",
   components: { DateRangeSelect },
@@ -38,6 +38,7 @@ export default {
       },
       dateRange: [],
       loading: false,
+      dateRangeInit: true,
     };
   },
   methods: {
@@ -46,11 +47,19 @@ export default {
       this.dateRange = data || [];
       this.getData();
     },
+    resetTime() {
+      this.dateRangeInit = true;
+    },
     getData() {
       const { siteId } = this;
       let [start = "", end = ""] = this.dateRange || [];
       //接口调用完成之后 设置图表、结束loading
       this.loading = true;
+      if (this.dateRangeInit) {
+        start = "";
+        end = "";
+        this.dateRangeInit = false;
+      }
       getPowerData({
         siteId,
         startDate: formatDate(start),
@@ -81,7 +90,7 @@ export default {
           },
           legend: {
             left: "center",
-              top: "10",
+            bottom: "15",
           },
           tooltip: {
             trigger: "axis",
@@ -100,45 +109,18 @@ export default {
             type: "value",
           },
           dataset: { source },
-            dataZoom: [
-              {
-                type: "inside",
-                start: 0,
-                end: 100,
-              },
-              {
-                start: 0,
-                end: 100,
-              },
-            ],
           series: [
             {
               type: "line",
-                smooth: true,
-                areaStyle: {
-                  opacity: 0.7,
-                },
             },
             {
               type: "line",
-                smooth: true,
-                areaStyle: {
-                  opacity: 0.7,
-                },
             },
             {
               type: "line",
-                smooth: true,
-                areaStyle: {
-                  opacity: 0.7,
-                },
             },
             {
               type: "line",
-                smooth: true,
-                areaStyle: {
-                  opacity: 0.7,
-                },
             },
           ],
         },
@@ -151,6 +133,7 @@ export default {
     },
     init() {
       this.$nextTick(() => {
+        this.dateRangeInit = true;
         this.initChart();
         this.$refs.dateRangeSelect.init();
       });

src/views/ems/dzjk/tjbb/pcsqx/index.vue

@@ -16,8 +16,7 @@
           size="mini"
           :class="{ activeBtn: activeBtn === item.id }"
           @click="changeDataType(item.id)"
-        >{{ item.name }}
-        </el-button
+          >{{ item.name }}</el-button
         >
       </el-button-group>
       <div id="pcsEchart" style="height: 310px"></div>
@@ -29,10 +28,9 @@
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getPCSData} from "@/api/ems/dzjk";
+import { getPCSData, getPcsNameList } from "@/api/ems/dzjk";
 import { formatDate } from "@/filters/ems";
 import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
-
 export default {
   name: "DzjkTjbbPcsqx",
   components: { DateRangeSelect },
@@ -160,7 +158,7 @@ export default {
           },
           legend: {
             left: "center",
-              top: "10",
+            bottom: "15",
           },
           tooltip: {
             trigger: "axis",
@@ -178,25 +176,10 @@ export default {
           yAxis: {
             type: "value",
           },
-            dataZoom: [
-              {
-                type: "inside",
-                start: 0,
-                end: 100,
-              },
-              {
-                start: 0,
-                end: 100,
-              },
-            ],
           dataset: { source },
           series: source[0].slice(1).map((item) => {
             return {
               type: "line",
-                smooth: true,
-                areaStyle: {
-                  opacity: 0.7,
-                },
             };
           }),
         },
@@ -209,7 +192,7 @@ export default {
     init() {
       this.$nextTick(() => {
         this.initChart();
-        this.$refs.dateRangeSelect.init(true);
+        this.$refs.dateRangeSelect.init();
       });
     },
   },

src/views/ems/dzjk/tjbb/sybb/index.vue

@@ -21,9 +21,6 @@
       <el-form-item>
         <el-button @click="onReset" native-type="button">重置</el-button>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="exportTable" native-type="button">导出</el-button>
-      </el-form-item>
     </el-form>
     <!--表格-->
     <el-table
@@ -147,16 +144,6 @@ export default {
     }
   },
   methods: {
-    // 导出表格
-    exportTable() {
-      if (!this.dateRange?.length) return
-      const [startTime, endTime] = this.dateRange
-      this.download('ems/statsReport/exportAmmeterRevenueData', {
-        siteId: this.siteId,
-        startTime,
-        endTime,
-      }, `收益报表_${startTime}-${endTime}.xlsx`)
-    },
     // 搜索
     onSearch() {
       this.pageNum = 1//每次搜索从1开始搜索

src/views/screen/index.vue

@@ -0,0 +1,418 @@
+<template>
+  <div class="big-screen-container">
+    <!-- 背景容器 -->
+    <div class="bg-wrapper">
+      <!-- 右侧功率曲线图表 -->
+      <div class="chart-box power-chart">
+        <div ref="powerChart" class="chart-content"></div>
+      </div>
+
+      <!-- 底部中间电力需求曲线图表（width:980px, bottom:26px） -->
+      <div class="chart-box demand-chart">
+        <div ref="demandChart" class="chart-content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getPointData } from '@/api/ems/dzjk'
+
+export default {
+  name: 'PowerCurveScreen',
+  data() {
+    return {
+      powerChartInstance: null, // 功率曲线实例
+      demandChartInstance: null, // 电力需求曲线实例
+      timer: null,
+      siteId: '021_DDS_01',
+    }
+  },
+  mounted() {
+    this.initPowerChart() // 初始化功率曲线
+    this.initDemandChart() // 初始化电力需求曲线
+    
+    // Initial fetch
+    this.fetchData()
+    // Polling every 5 seconds
+    this.timer = setInterval(() => {
+      this.fetchData()
+    }, 5000)
+
+    window.addEventListener('resize', this.resizeAllCharts)
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+    // 销毁两个图表实例
+    if (this.powerChartInstance) {
+      this.powerChartInstance.dispose()
+      this.powerChartInstance = null
+    }
+    if (this.demandChartInstance) {
+      this.demandChartInstance.dispose()
+      this.demandChartInstance = null
+    }
+    window.removeEventListener('resize', this.resizeAllCharts)
+  },
+  methods: {
+    getTodayDate() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    fetchData() {
+      const today = this.getTodayDate()
+      getPointData({
+        siteId: this.siteId,
+        startDate: today,
+        endDate: today
+      }).then(response => {
+        if (response.code === 200 && response.data) {
+          this.updateCharts(response.data)
+        }
+      }).catch(error => {
+        console.error('Failed to fetch point data:', error)
+      })
+    },
+    updateCharts(data) {
+      if (!data || !Array.isArray(data)) return
+      const source = [['日期', '电网功率', '负载功率', '储能功率', '光伏功率']];
+      const demandSource = [['日期', '电网功率', '负载功率']]
+
+      data.forEach(item => {
+        source.push([
+          item.statisDate,
+          item.gridPower,
+          item.loadPower,
+          item.storagePower,
+          item.pvPower
+        ]);
+        demandSource.push([
+          item.statisDate,
+          item.gridPower,  // Mapping Grid Power to Plan Demand (or just as 2nd series)
+          item.loadPower, // Mapping Load Power to Actual Demand
+        ])
+      })
+
+      if (this.powerChartInstance) {
+        this.powerChartInstance.setOption({
+          dataset: {
+            source: source
+          }
+        })
+      }
+
+      if (this.demandChartInstance) {
+        this.demandChartInstance.setOption({
+          dataset: {
+            source: demandSource
+          }
+        })
+      }
+    },
+    // 初始化右侧功率曲线
+    initPowerChart() {
+      this.powerChartInstance = echarts.init(this.$refs.powerChart)
+      
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          confine: true,
+          backgroundColor: 'rgba(0, 30, 60, 0.9)',
+          borderColor: '#00ccff',
+          textStyle: { color: '#fff' },
+          axisPointer: { 
+            type: 'line',
+            lineStyle: {
+              color: 'rgba(0, 204, 255, 0.5)',
+              type: 'dashed'
+            }
+          }
+        },
+        legend: {
+          textStyle: { color: '#00ccff', fontSize: 10 },
+          bottom: 0,
+          left: 'center',
+          itemWidth: 9,
+          itemHeight: 9,
+          itemGap: 8,
+          padding: [0, 0, 0, 0]
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '15%',
+          bottom: '12%',
+          containLabel: true
+        },
+        dataset: {
+          source: [] // Initial empty source
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: { 
+            color: '#00ccff', 
+            fontSize: 10, 
+            rotate: 0, // 取消旋转，因为标签较少
+            margin: 10,
+          },
+          axisLine: { 
+            show: true,
+            lineStyle: { color: '#006699', width: 1.5 } 
+          },
+          splitLine: { show: false },
+          axisTick: { show: true }
+        },
+        yAxis: {
+          type: 'value',
+          min: 0, // Remove fixed min/max to let it auto-scale
+          max: 350,
+          interval: 50,
+          axisLabel: { 
+            color: '#00ccff', 
+            fontSize: 12,
+            margin: 10,
+            fontWeight: 'bold'
+          },
+          axisLine: { 
+            show: false,
+            lineStyle: { color: '#006699', width: 1.5 } 
+          },
+          splitLine: { lineStyle: { color: 'rgba(0, 100, 150, 0.2)' } },
+          axisTick: { show: false }
+        },
+        series: [
+          {
+            // name: '电网功率', // Removed, auto-matched from dataset header
+            type: 'line',
+            // data: [], // Removed
+            smooth: true,
+            symbol: 'none',
+            lineStyle: { color: '#0099ff', width: 2 },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0, 153, 255, 0.4)' },
+                { offset: 1, color: 'rgba(0, 153, 255, 0.05)' }
+              ])
+            }
+          },
+          {
+            // name: '负载功率',
+            type: 'line',
+            // data: [],
+            smooth: true,
+            symbol: 'none',
+            lineStyle: { color: '#00cc66', width: 2 },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0, 204, 102, 0.4)' },
+                { offset: 1, color: 'rgba(0, 204, 102, 0.05)' }
+              ])
+            }
+          },
+          {
+            // name: '储能功率',
+            type: 'line',
+            // data: [],
+            smooth: true,
+            symbol: 'none',
+            lineStyle: { color: '#ffcc00', width: 2 },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255, 204, 0, 0.4)' },
+                { offset: 1, color: 'rgba(255, 204, 0, 0.05)' }
+              ])
+            }
+          },
+          {
+            // name: '光伏功率',
+            type: 'line',
+            // data: [],
+            smooth: true,
+            symbol: 'none',
+            lineStyle: { color: '#ff3333', width: 2 },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255, 51, 51, 0.4)' },
+                { offset: 1, color: 'rgba(255, 51, 51, 0.05)' }
+              ])
+            }
+          }
+        ]
+      }
+      this.powerChartInstance.setOption(option)
+    },
+
+    // 初始化底部中间电力需求曲线（适配980px宽度+130px高度+bottom:26px，两条曲线区分配色）
+    initDemandChart() {
+      this.demandChartInstance = echarts.init(this.$refs.demandChart)
+      
+      const option = {
+        backgroundColor: 'transparent', // 透明背景
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 30, 60, 0.9)',
+          borderColor: '#00ccff', // 匹配图片主色
+          textStyle: { color: '#fff' },
+          axisPointer: { type: 'shadow' },
+          confine: true,
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '5%',
+          bottom: '8%',
+          containLabel: true
+        },
+        dataset: {
+          source: [] // Initial empty
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          // data: [], // Handled by dataset
+          axisLabel: { 
+            color: '#00ccff', // 匹配图片主色
+            fontSize: 10,
+            margin: 10,
+          },
+          axisLine: { 
+            show: true,
+            lineStyle: { color: '#006699', width: 1.5 } 
+          },
+          splitLine: { show: false },
+          axisTick: { show: true }
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 300,
+          interval: 50,
+          axisLabel: { 
+            color: '#00ccff', // 匹配图片主色
+            fontSize: 12,
+            margin: 10,
+            fontWeight: 'bold'
+          },
+          axisLine: { 
+            show: false,
+            // lineStyle: { color: '#006699', width: 1.5 } 
+          },
+          splitLine: { lineStyle: { color: 'rgba(0, 100, 150, 0.2)' } },
+          axisTick: { show: false }
+        },
+        series: [
+                    {
+            type: 'line',
+            // data: [],
+            smooth: true, // 平滑曲线
+            symbol: 'none', // 无数据点
+            // lineStyle: { color: '#00F2FF', width: 2.5 }, // 匹配图片主题色
+            // areaStyle: {
+            //   // 匹配图片的线性渐变：#00F2FF 从100%不透明到0%不透明
+            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     { offset: 0, color: 'rgba(0, 242, 255, 1)' },    // 0%位置：#00F2FF 100%不透明
+            //     { offset: 1, color: 'rgba(0, 242, 255, 0)' }     // 100%位置：#00F2FF 0%不透明
+            //   ])
+            // }
+                        lineStyle: { color: '#0099ff', width: 2 },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0, 153, 255, 0.4)' },
+                { offset: 1, color: 'rgba(0, 153, 255, 0.05)' }
+              ])
+            }
+          },
+          {
+            // name: '负载功率',
+            type: 'line',
+            // data: [],
+            smooth: true,
+            symbol: 'none',
+            lineStyle: { color: '#00cc66', width: 2 },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0, 204, 102, 0.4)' },
+                { offset: 1, color: 'rgba(0, 204, 102, 0.05)' }
+              ])
+            }
+          },
+        ]
+      }
+      this.demandChartInstance.setOption(option)
+    },
+
+    // 统一处理窗口缩放（适配两个图表）
+    resizeAllCharts() {
+      if (this.powerChartInstance) this.powerChartInstance.resize()
+      if (this.demandChartInstance) this.demandChartInstance.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 大屏容器：固定1920x1080尺寸 */
+.big-screen-container {
+  width: 1920px;
+  height: 1080px;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+/* 背景容器：相对路径 ./background.png */
+.bg-wrapper {
+  width: 100%;
+  height: 100%;
+  background-image: url("./background.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+/* 通用图表容器样式 */
+.chart-box {
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+  z-index: 10;
+}
+
+/* 右侧功率曲线图表定位+尺寸 */
+.power-chart {
+  position: absolute;
+  top: 143px;
+  right: 40px;
+  width: 380px;
+  height: 270px;
+}
+
+/* 底部中间电力需求曲线图表（核心修改：width:980px, bottom:26px, height:130px） */
+.demand-chart {
+  position: absolute;
+  bottom: 26px;    /* 修改为26px底部间距 */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 980px;    /* 修改为980px宽度 */
+  height: 130px;   /* 保持130px高度不变 */
+}
+
+/* 图表内容区：填满容器 */
+.chart-content {
+  width: 100%;
+  height: 100%;
+}
+</style>