From 71e37a955986086c979d703d55d83e1147737435 Mon Sep 17 00:00:00 2001
From: "DESKTOP-AD8UBUJ\\ling" <1874467086@qq.com>
Date: Mon, 11 May 2026 09:45:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E5=A4=A7=E5=B1=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../viewer/components/static.vue              | 1328 +++++++++++++++++
 src/views/bigscreenDesigner/viewer/static.vue |  260 ++++
 2 files changed, 1588 insertions(+)
 create mode 100644 src/views/bigscreenDesigner/viewer/components/static.vue
 create mode 100644 src/views/bigscreenDesigner/viewer/static.vue

diff --git a/src/views/bigscreenDesigner/viewer/components/static.vue b/src/views/bigscreenDesigner/viewer/components/static.vue
new file mode 100644
index 0000000..bc60a92
--- /dev/null
+++ b/src/views/bigscreenDesigner/viewer/components/static.vue
@@ -0,0 +1,1328 @@
+<template>
+  <div class="energy-platform">
+    <div class="background-layer"></div>
+    
+    <header class="header">
+      <div class="logo-section">
+        <div class="logo-icon"></div>
+        <div class="title-text">
+          <h1 class="main-title">驾驶仓总屏-销售分析-生产组态</h1>
+          <span class="sub-title">Energy consumption monitoring platform-visualization of carbon peak indicatorsm</span>
+        </div>
+      </div>
+      <div class="time-display">{{ currentTime }}</div>
+    </header>
+
+    <section class="main-content">
+      <aside class="left-panel">
+        <div class="stats-card">
+          <div class="stats-grid">
+            <div v-for="(stat, index) in topStats" :key="index" class="stat-item">
+              <div class="stat-value">
+                {{ Number(stat.value).toLocaleString() }} 
+                <span class="stat-unit">{{ stat.unit }}</span>
+              </div>
+              <div class="stat-label">
+                <span class="icon-label" />{{ stat.label }}
+                <span v-if="stat.change!==undefined" :class="['stat-change', stat.changeType]">
+                    同比
+                    <span class="change-icon" :class="['change-icon', stat.changeType]"></span>
+                    {{ stat.change }}</span>
+              </div>
+              
+            </div>
+          </div>
+        </div>
+
+        <div class="map-card">
+        </div>
+
+        <div class="bottom-left-cards">
+          <div class="bottom-card carbon-card">
+            <div class="card-header">
+              <span class="card-title">碳中和比率</span>
+            </div>
+            <div class="carbon-content">
+              <div class="carbon-left">
+                <div ref="sunburstChart" class="chart-container-small"></div>
+                <div class="chart-label">能耗分布结构</div>
+              </div>
+              <div class="carbon-right">
+                <div ref="ganttChart" class="chart-container-small"></div>
+                <div class="chart-label">任务时间安排</div>
+              </div>
+            </div>
+            <div class="carbon-desc">
+              <div class="desc-item">
+                <span class="desc-label">碳中和进度</span>
+                <span class="desc-value">60%</span>
+              </div>
+              <div class="desc-item">
+                <span class="desc-label">年减排目标</span>
+                <span class="desc-value">254.50t</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="bottom-card energy-card">
+            <div class="card-header">
+                <span class="icon-label" />
+            <span class="card-title">产销协同
+            </span>
+                <img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
+            </div>
+            <div class="energy-content">
+              <div class="energy-left">
+                <div ref="roseChart" class="chart-container"></div>
+              </div>
+              <div class="energy-right">
+                <div class="energy-item">
+                  <span class="energy-color" style="background: #1890ff;"></span>
+                  <span class="energy-label">生产</span>
+                  <span class="energy-value">35%</span>
+                </div>
+                <div class="energy-item">
+                  <span class="energy-color" style="background: #73d5ff;"></span>
+                  <span class="energy-label">动力</span>
+                  <span class="energy-value">28%</span>
+                </div>
+                <div class="energy-item">
+                  <span class="energy-color" style="background: #b3e0ff;"></span>
+                  <span class="energy-label">照明</span>
+                  <span class="energy-value">22%</span>
+                </div>
+                <div class="energy-item">
+                  <span class="energy-color" style="background: #d9edff;"></span>
+                  <span class="energy-label">空调</span>
+                  <span class="energy-value">15%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <aside class="right-panel">
+        <div class="panel-card ring-card">
+          <div class="card-header">
+            <span class="icon-label" />
+            <span class="card-title">能源数据
+            </span>
+                <img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
+    
+          </div>
+          <div class="ring-content">
+            <div class="ring-item-wrapper" v-for="item in powerData" :key="item.name">
+              <div  class="ring-icon">{{ item.name }}</div>
+              <div class="ring-desc">
+                
+                <div class="ring-value" >{{ item.value}}
+                    <div class="ring-unit"> 当日用{{ item.name }}量</div>
+                </div>
+                <div class="ring-value">{{ item.zrValue}}
+                    <div class="ring-unit"> 昨日用{{ item.name }}量</div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel-card peak-card">
+          <div class="card-header">
+             <span class="icon-label" />
+            <span class="card-title">财务分析</span>
+             <img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
+          </div>
+          <div class="peak-content">
+            <div ref="scatterChart" class="scatter-chart"></div>
+          </div>
+        </div>
+
+        <div class="panel-card trend-card">
+          <div class="card-header">
+            <span class="card-title">市场分析</span>
+            <div class="card-actions trend-tabs">
+              <button :class="['action-btn', { active: trendTab === '7' }]" @click="trendTab = '7'">过去7天</button>
+              <button :class="['action-btn', { active: trendTab === '15' }]" @click="trendTab = '15'">过去15天</button>
+              <button :class="['action-btn', { active: trendTab === '30' }]" @click="trendTab = '30'">过去30天</button>
+            </div>
+          </div>
+          <div ref="trendChart" class="trend-chart"></div>
+        </div>
+
+        <div class="panel-card park-card">
+          <div class="card-header">
+            <span class="card-title">销售收入排行</span>
+          </div>
+          <div class="park-content">
+            <div ref="parkChart" class="park-chart"></div>
+            <div class="park-legend">
+              <div class="legend-item">
+                <span class="legend-color" style="background: #ff6b46;"></span>
+                <span class="legend-label">生产</span>
+                <span class="legend-value">254.50</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background: #ff9f43;"></span>
+                <span class="legend-label">动力</span>
+                <span class="legend-value">180.30</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background: #ffeaa7;"></span>
+                <span class="legend-label">照明</span>
+                <span class="legend-value">125.60</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background: #4ecdc4;"></span>
+                <span class="legend-label">空调</span>
+                <span class="legend-value">98.20</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background: #96ceb4;"></span>
+                <span class="legend-label">其他</span>
+                <span class="legend-value">56.80</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </section>
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {getData} from '@/api/bigscreen'
+export default {
+  name: 'EnergyPlatform',
+  data() {
+    return {
+      currentTime: '',
+      trendTab: '7',
+      charts: {},
+      powerData: [],
+      topStats: [
+        { value: '2425', unit: 'kw.h', label: '当日用电量', change: '+12%', changeType: 'up' },
+        { value: '101441', unit: 'kw.h', label: '当月用电量', change: '+24%', changeType: 'up' },
+        { value: '987414', unit: 'kw.h', label: '当年用电量', change: '+28%', changeType: 'up' },
+        { value: '2425', unit: 't', label: '当日用水量', change: '+31%', changeType: 'up' },
+      
+      ]
+    }
+  },
+  mounted() {
+    this.updateTimes()
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+    window.addEventListener('resize', this.handleResize)
+    setInterval(() => {
+      this.updateTimes()
+    }, 1000)
+    this.getPowerData()
+    this.getTopStatsData()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    Object.values(this.charts).forEach(chart => {
+      if (chart) chart.dispose()
+    })
+  },
+  methods: {
+    async getPowerData(){
+         let params={"chartProperties":{"dzr":"text"},"setCode":"nhsj","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
+         const {code, data} = await getData(params);
+         if(code != 200){
+            console.error('[Viewer] 获取大屏数据失败:', code);
+            return;
+         }
+         let names={'电':'d','气':'q','水':'s','煤':'bzm'}
+         Object.keys(names).forEach((item) => {
+            this.powerData.push({
+               name: item,
+               value: data[0][names[item]+'dr'],
+               zrValue: data[0][names[item]+'zr'],
+            })
+         })         
+    },
+    async getTopStatsData(){
+        let params={"chartProperties":{"营收":"text"},"setCode":"zp_zb","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
+        let paramsTb={"chartProperties":{"本月毛利同比_百分比":"text"},"setCode":"ben_maoli_tongbi","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
+         const {code, data} = await getData(params);
+         const res = await getData(paramsTb);
+
+         if(code != 200){
+            console.error('[Viewer] 获取大屏数据失败:', code);
+            return;
+         }
+         const topStatsUnit = {
+            "营收": '亿',
+            "本月毛利": '万',
+            "负债总额": '亿元',
+            "资产总额":  '亿元',
+        }
+        const tbChange = {'本月毛利':res.data[0]['本月毛利同比_百分比']}
+         this.topStats = Object.keys(topStatsUnit).map((item) => ({
+            value: data[0][item],
+            unit: topStatsUnit[item],
+            label: item,
+            change:tbChange[item],
+            changeType: tbChange[item]>0?'up':'down'
+         }))
+    },
+    updateTimes() {
+      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')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+    
+    handleResize() {
+      Object.keys(this.charts).forEach(key => {
+        if (this.charts[key]) {
+          this.charts[key].resize()
+        }
+      })
+    },
+    
+    initCharts() {
+      this.initSunburstChart()
+      this.initGanttChart()
+      this.initRoseChart()
+      this.initScatterChart()
+      this.initTrendChart()
+      this.initParkChart()
+    },
+    
+    initSunburstChart() {
+      if (!this.$refs.sunburstChart) return
+      const chart = echarts.init(this.$refs.sunburstChart)
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(15, 42, 66, 0.9)',
+          borderColor: '#61c8ee',
+          textStyle: { color: '#fff' }
+        },
+        series: [
+          {
+            type: 'sunburst',
+            radius: ['5%', '90%'],
+            itemStyle: {
+              borderRadius: 3,
+              borderColor: 'rgba(15, 42, 66, 1)',
+              borderWidth: 1
+            },
+            label: {
+              color: '#fff',
+              fontSize: 8,
+              rotate: 'radial'
+            },
+            levels: [
+              {},
+              {
+                r0: '5%',
+                r: '30%',
+                itemStyle: { borderWidth: 2 },
+                label: { fontSize: 9 }
+              },
+              {
+                r0: '30%',
+                r: '60%',
+                itemStyle: { borderWidth: 1 },
+                label: { fontSize: 8, align: 'center' }
+              },
+              {
+                r0: '60%',
+                r: '90%',
+                label: { position: 'outside', padding: 1, fontSize: 7, silent: false },
+                itemStyle: { borderWidth: 1 }
+              }
+            ],
+            data: [
+              {
+                name: '电力',
+                itemStyle: { color: '#1890ff' },
+                children: [
+                  { name: '生产', value: 35, itemStyle: { color: '#1890ff' } },
+                  { name: '照明', value: 20, itemStyle: { color: '#73d5ff' } },
+                  { name: '动力', value: 25, itemStyle: { color: '#b3e0ff' } }
+                ]
+              },
+              {
+                name: '水资源',
+                itemStyle: { color: '#ff4d4f' },
+                children: [
+                  { name: '生产', value: 20, itemStyle: { color: '#ff4d4f' } },
+                  { name: '生活', value: 15, itemStyle: { color: '#ff7875' } }
+                ]
+              },
+              {
+                name: '气热',
+                itemStyle: { color: '#8c8c8c' },
+                children: [
+                  { name: '采暖', value: 18, itemStyle: { color: '#8c8c8c' } },
+                  { name: '制冷', value: 12, itemStyle: { color: '#bfbfbf' } }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.sunburst = chart
+    },
+    
+    initGanttChart() {
+      if (!this.$refs.ganttChart) return
+      const chart = echarts.init(this.$refs.ganttChart)
+      
+      const values = [947, 340, 36]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(15, 42, 66, 0.9)',
+          borderColor: '#61c8ee',
+          textStyle: { color: '#fff' },
+          formatter: '{b}: {c}'
+        },
+        grid: {
+          left: '15%',
+          right: '25%',
+          top: '10%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false,
+          max: 100
+        },
+        yAxis: {
+          type: 'category',
+          data: ['照明', '动力', '生产'],
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { 
+            color: '#fff', 
+            fontSize: 12,
+            fontFamily: 'Microsoft YaHei'
+          }
+        },
+        graphic: [
+          {
+            type: 'text',
+            left: '80%',
+            top: '12%',
+            style: {
+              text: '36',
+              fill: '#fff',
+              fontSize: 16,
+              fontWeight: 'bold'
+            }
+          },
+          {
+            type: 'text',
+            left: '80%',
+            top: '45%',
+            style: {
+              text: '340',
+              fill: '#fff',
+              fontSize: 16,
+              fontWeight: 'bold'
+            }
+          },
+          {
+            type: 'text',
+            left: '80%',
+            top: '78%',
+            style: {
+              text: '947',
+              fill: '#fff',
+              fontSize: 16,
+              fontWeight: 'bold'
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            stack: 'total',
+            barWidth: 18,
+            itemStyle: {
+              color: '#ff4d4f',
+              borderRadius: [0, 0, 0, 0]
+            },
+            data: [10, 8, 15]
+          },
+          {
+            type: 'bar',
+            stack: 'total',
+            barWidth: 18,
+            itemStyle: {
+              color: '#ff9f43',
+              borderRadius: [0, 0, 0, 0]
+            },
+            data: [5, 3, 5]
+          },
+          {
+            type: 'bar',
+            stack: 'total',
+            barWidth: 18,
+            itemStyle: {
+              color: '#1890ff',
+              borderRadius: [0, 4, 4, 0]
+            },
+            data: [85, 89, 80]
+          }
+        ]
+      }
+      
+      chart.setOption(option)
+      this.charts.gantt = chart
+    },
+    
+    initRoseChart() {
+      if (!this.$refs.roseChart) return
+      const chart = echarts.init(this.$refs.roseChart)
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(15, 42, 66, 0.9)',
+          borderColor: '#61c8ee',
+          textStyle: { color: '#fff' },
+          formatter: '{b}: {c}%'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['10%', '70%'],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            itemStyle: {
+              borderRadius: 4,
+              borderColor: 'rgba(15, 42, 66, 1)',
+              borderWidth: 2
+            },
+            label: { show: false },
+            data: [
+              { value: 35, name: '生产', itemStyle: { color: '#1890ff' } },
+              { value: 28, name: '动力', itemStyle: { color: '#73d5ff' } },
+              { value: 22, name: '照明', itemStyle: { color: '#b3e0ff' } },
+              { value: 15, name: '空调', itemStyle: { color: '#d9edff' } }
+            ]
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.rose = chart
+    },
+    
+    initScatterChart() {
+      if (!this.$refs.scatterChart) return
+      const chart = echarts.init(this.$refs.scatterChart)
+      const hours = Array.from({ length: 24 }, (_, i) => `${i}`)
+      const scatterData = []
+      
+      for (let i = 0; i < 30; i++) {
+        const hour = Math.floor(Math.random() * 24)
+        const value = Math.random() * 60 + 40
+        let size = value / 8
+        let color
+        if (size > 10) {
+          color = '#1890ff'
+        } else if (size > 6) {
+          color = '#73d5ff'
+        } else {
+          color = '#ff4d4f'
+        }
+        scatterData.push([hour, 50, size, color])
+      }
+      
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(15, 42, 66, 0.9)',
+          borderColor: '#61c8ee',
+          textStyle: { color: '#fff' },
+          formatter: (params) => {
+            return `时间: ${params.value[0]}:00<br/>功率: ${params.value[2].toFixed(2)} kw`
+          }
+        },
+        grid: {
+          left: '12%',
+          right: '3%',
+          top: '5%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: hours,
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisTick: { show: false },
+          axisLabel: { color: '#6b8cae', fontSize: 8, interval: 3 }
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+          max: 100
+        },
+        series: [
+          {
+            type: 'scatter',
+            data: scatterData,
+            symbolSize: (val) => val[2] * 2,
+            itemStyle: {
+              color: (params) => params.value[3],
+              opacity: 0.85
+            }
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.scatter = chart
+    },
+    
+    initTrendChart() {
+      if (!this.$refs.trendChart) return
+      const chart = echarts.init(this.$refs.trendChart)
+      const dates = ['23', '24', '25', '26', '27', '28', '29', '30', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16']
+      const lineData = [200, 250, 220, 300, 280, 350, 320, 290, 260, 310, 270, 240, 280, 340, 360, 320, 280, 300, 250, 220, 270, 310, 290, 260]
+      const barData = [180, 220, 200, 280, 250, 320, 290, 270, 240, 290, 250, 220, 260, 320, 340, 300, 260, 280, 230, 200, 250, 290, 270, 240]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(15, 42, 66, 0.9)',
+          borderColor: '#61c8ee',
+          textStyle: { color: '#fff' }
+        },
+        grid: {
+          left: '8%',
+          right: '3%',
+          top: '12%',
+          bottom: '12%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: dates,
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisTick: { show: false },
+          axisLabel: { color: '#6b8cae', fontSize: 8 }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            position: 'left',
+            splitLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.1)' } },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { color: '#6b8cae', fontSize: 8 }
+          },
+          {
+            type: 'value',
+            position: 'right',
+            splitLine: { show: false },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { color: '#6b8cae', fontSize: 8 }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            name: '用电量统计',
+            data: barData,
+            yAxisIndex: 0,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(24, 144, 255, 1)' },
+                  { offset: 1, color: 'rgba(24, 144, 255, 0.1)' }
+                ]
+              },
+              borderRadius: [3, 3, 0, 0]
+            },
+            barWidth: 7
+          },
+          {
+            type: 'line',
+            name: '用电量趋势',
+            data: lineData,
+            smooth: true,
+            yAxisIndex: 1,
+            itemStyle: { color: '#ff4d4f' },
+            lineStyle: { width: 2 },
+            symbol: 'circle',
+            symbolSize: 3
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.trend = chart
+    },
+    
+    initParkChart() {
+      if (!this.$refs.parkChart) return
+      const chart = echarts.init(this.$refs.parkChart)
+      
+      const parkData = [
+        { name: '园区2#', value: 1000 },
+        { name: '园区3#', value: 720 },
+        { name: '园区4#', value: 610 },
+        { name: '园区5#', value: 500 },
+        { name: '园区6#', value: 430 },
+        { name: '园区7#', value: 310 },
+        { name: '园区8#', value: 220 },
+        { name: '园区9#', value: 130 }
+      ]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(15, 42, 66, 0.95)',
+          borderColor: '#61c8ee',
+          textStyle: { color: '#fff' },
+          formatter: '{b}: {c}'
+        },
+        grid: {
+          left: '8%',
+          right: '28%',
+          bottom: '15%',
+          top: '8%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: parkData.map(d => d.name),
+          axisLine: {
+            lineStyle: { 
+              color: '#555'
+            }
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            color: '#cccccc',
+            fontSize: 12,
+            margin: 8
+          }
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+          max: 1200
+        },
+        series: [
+          {
+            name: '能耗',
+            type: 'pictorialBar',
+            symbol: 'diamond',
+            symbolSize: ['70%', '100%'],
+            symbolPosition: 'end',
+            symbolOffset: [0, '50%'],
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(54, 176, 248, 1)' },
+                  { offset: 1, color: 'rgba(54, 176, 248, 0.1)' }
+                ]
+              }
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color: '#ff6f46',
+              fontSize: 14,
+              fontWeight: 'bold',
+              formatter: '{c}'
+            },
+            data: parkData.map(d => d.value)
+          }
+        ]
+      }
+      
+      chart.setOption(option)
+      this.charts.park = chart
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.energy-platform {
+  width: 100%;
+  min-height: 100vh;
+  background: #0a1628;
+  position: relative;
+  padding:0 15px;
+  box-sizing: border-box;
+  color: #fff;
+  overflow-x: hidden;
+}
+
+.background-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:  #121212;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+  background: url('http://192.168.1.243:48090/file/download/466f2a5b-bc4f-448a-b6b5-698453c9e730') no-repeat center center / cover;
+  background-size: cover;
+  width: 1895px;
+  position: relative;
+  z-index: 10;
+}
+
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.logo-icon {
+  width: 50px;
+  height: 40px;
+  background: url('http://192.168.1.243:48090/file/download/8cb172c1-e124-4185-b8d8-648bede36e27') no-repeat;
+  background-size: 30px 30px;
+  background-position: center center;
+  border: 1px solid #fff;
+  position: relative;
+}
+
+
+
+.title-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.main-title {
+  font-size:24px;
+  font-weight: bold;
+  margin: 0;
+
+  background-clip: text;
+}
+
+.sub-title {
+  font-size: 10px;
+
+  letter-spacing: 1px;
+}
+
+.time-display {
+  font-size: 14px;
+  font-weight: bold;
+  font-family: 'Courier New', monospace;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.main-content {
+  display: flex;
+  gap: 15px;
+  position: relative;
+  z-index: 10;
+  height: calc(100vh - 160px);
+}
+
+.left-panel {
+    width: 1255px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.stats-card {
+    background:rgb(32, 37, 43);
+    border: 2px solid rgb(49, 56, 66);
+    border-radius: 5px;
+    align-items: center;
+    height: 98px;
+    padding:10px 20px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+}
+
+.stat-item {
+    text-align: left;
+}
+
+
+
+.stat-item .stat-value {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  display: block;
+  font-size: 36px;
+
+}
+
+.stat-item .stat-unit {
+  font-size: 16px;
+}
+
+.stat-item .stat-label {
+  margin-top: 5px;
+  display: block;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  margin-top: 6px;
+ 
+}
+ .icon-label{
+    background:url('http://192.168.1.243:48090/file/download/12ef9b80-97e2-4de1-87a3-eba45b35d82d') no-repeat;
+    background-size: 12px 12px;
+    background-position: center center;
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    display: inline-block;
+    border: 1px solid #fff;
+  }
+.stat-item .stat-change {
+  font-size: 10px;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-top: 5px;
+  display: inline-block;
+}
+
+.stat-change.up {
+  color: #26de81;
+ 
+}
+
+.stat-change.down {
+  color: #ff6b6b;
+
+}
+
+.map-card {
+  height: 530px;
+  background: rgba(15, 42, 66, 0.6);
+  border: 1px solid rgba(97, 200, 238, 0.2);
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 280px;
+}
+
+.bottom-left-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.bottom-card {
+  background: rgba(15, 42, 66, 0.6);
+  border: 1px solid rgba(97, 200, 238, 0.2);
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 260px;
+}
+
+.card-header {
+  display: flex;
+ 
+  align-items: center;
+  padding: 10px 12px;
+  position: relative;
+  img{
+    margin-left: 20px;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 16px;
+    opacity: 0.6;
+    width: calc(100% - 140px);
+  }
+}
+
+.card-title {
+    font-size: 16px;
+  color: #fff;
+
+}
+
+.card-actions {
+  display: flex;
+  gap: 5px;
+}
+
+.action-btn {
+  font-size: 10px;
+  padding: 3px 8px;
+  border: none;
+  background: rgba(97, 200, 238, 0.1);
+  color: #6b8cae;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  background: rgba(97, 200, 238, 0.2);
+}
+
+.action-btn.active {
+  background: rgba(97, 200, 238, 0.3);
+  color: #fff;
+}
+
+.carbon-content {
+  display: flex;
+  height: 170px;
+  padding: 8px;
+  gap: 8px;
+}
+
+.carbon-left, .carbon-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.chart-container-small {
+  width: 100%;
+  height: 140px;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+.chart-label {
+  font-size: 9px;
+  color: #6b8cae;
+  margin-top: 5px;
+}
+
+.carbon-desc {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px;
+  border-top: 1px solid rgba(97, 200, 238, 0.1);
+}
+
+.desc-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.desc-label {
+  font-size: 9px;
+  color: #6b8cae;
+}
+
+.desc-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.energy-content {
+  display: flex;
+  height: 200px;
+  padding: 10px;
+}
+
+.energy-left {
+  flex: 1;
+}
+
+.energy-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+  padding-left: 15px;
+}
+
+.energy-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.energy-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.energy-label {
+  flex: 1;
+  font-size: 12px;
+  color: #fff;
+}
+
+.energy-value {
+  font-size: 14px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.right-panel {
+  width: 620px;
+  display: flex;
+  flex-direction: column;
+  
+
+}
+.ring-card{
+  background: rgb(32, 37, 43);
+ border: 2px solid rgb(49, 56, 66);
+        border-radius-top-left: 5px;
+        border-radius-top-right: 5px;
+        border-bottom: 0;
+
+}
+.panel-card {
+  overflow: hidden;
+}
+
+.ring-content {
+  display: flex;
+  justify-content: space-around;
+  padding: 15px 0;
+ flex-wrap: wrap;
+}
+
+.ring-item-wrapper {
+  display: flex;
+  
+  margin-bottom: 16px;
+}
+
+.ring-icon {
+  width:60px;
+  height: 60px;
+  font-size: 28px;
+  line-height: 60px;
+  border: 1px solid rgb(90, 90, 90);
+
+}
+
+.ring-desc {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.ring-value {
+  font-size: 12px;
+  margin-left: 10px;
+  font-weight: bold;
+  text-align: left;
+  .ring-unit{
+    font-weight: normal;
+    word-spacing: 2px;
+    font-size: 10px;
+    margin-top: 2px;
+  }
+}
+
+.ring-label {
+  font-size: 10px;
+  color: #6b8cae;
+}
+.peak-card{
+  background: rgb(32, 37, 43);
+ border: 2px solid rgb(49, 56, 66);
+        border-radius-bottom-left: 5px;
+        border-radius-bottom-right: 5px;
+        border-top: 0;
+        margin-bottom: 15px;
+}
+.peak-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.peak-stats {
+  padding: 10px 15px;
+}
+
+.peak-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.peak-unit {
+  font-size: 12px;
+  color: #6b8cae;
+  margin-left: 4px;
+}
+
+.peak-time {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 5px 0;
+}
+
+.time-item {
+  font-size: 14px;
+  color: #fff;
+  font-weight: bold;
+}
+
+.time-divider {
+  color: #6b8cae;
+}
+
+.date-range {
+  font-size: 10px;
+  color: #6b8cae;
+}
+
+.scatter-chart {
+  height: 70px;
+  padding: 0 10px 10px;
+}
+
+.trend-tabs {
+  gap: 3px;
+}
+
+.trend-chart {
+  height: 150px;
+  padding: 5px;
+}
+
+.park-content {
+  display: flex;
+  padding: 10px;
+}
+
+.park-chart {
+  flex: 1;
+  height: 160px;
+}
+
+.park-legend {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  padding-left: 12px;
+  border-left: 1px solid rgba(97, 200, 238, 0.1);
+  margin-left: 8px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.legend-label {
+  font-size: 10px;
+  color: #6b8cae;
+  width: 30px;
+}
+
+.legend-value {
+  font-size: 11px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 30px;
+  background: rgba(15, 42, 66, 0.8);
+  border: 1px solid rgba(97, 200, 238, 0.2);
+  border-radius: 8px;
+  margin-top: 15px;
+  position: relative;
+  z-index: 10;
+}
+
+.footer-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #e74c3c;
+}
+
+.status-dot.online {
+  background: #27ae60;
+  animation: statusPulse 2s infinite;
+}
+
+@keyframes statusPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.status-text {
+  font-size: 12px;
+  color: #6b8cae;
+}
+
+.footer-info {
+  font-size: 12px;
+  color: #6b8cae;
+}
+
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/bigscreenDesigner/viewer/static.vue b/src/views/bigscreenDesigner/viewer/static.vue
new file mode 100644
index 0000000..4b24742
--- /dev/null
+++ b/src/views/bigscreenDesigner/viewer/static.vue
@@ -0,0 +1,260 @@
+<!--
+ * @Descripttion: 大屏设计器 -- 预览
+ * @Author: Devli
+ * @Date: 2021-3-13 11:04:24
+ * @Last Modified by:   Raod
+ * @Last Modified time: 2022-5-6 11:04:24
+ !-->
+<template>
+  <div class="layout">
+    <div :style="bigScreenStyle" class="drillDrownViewLayout">
+       <!-- 关键优化 1: v-if 包裹整个渲染区域，避免空数据时渲染 -->
+      <template v-if="dataLoaded">
+        <!-- 关键优化 2: 分批渲染，避免一次性创建过多 DOM 节点 -->
+        <static-content :screenData="screenData"></static-content>
+      </template>
+    </div>
+    <el-dialog  :title="''" class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
+      <drill-drown-view :screenData="screenData"></drill-drown-view>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import staticContent from "./components/static";
+import DrillDrownView from "./drillDrownView";
+
+import { detailDashboard } from "@/api/bigscreen";
+export default {
+  name: "Login",
+  components: {
+  staticContent,
+    DrillDrownView
+  },
+  data() {
+    return {
+      bigScreenStyle: {},
+      dashboard:{},
+      widgets: [],
+      screenData:{
+          dashboard: {  },
+          widgets: []
+      },
+      visiableDrillView:false,
+      dataLoaded: false, // 数据加载标志
+      refreshTimer: null, // 定时刷新定时器
+      renderBatches: [], // 分批渲染的批次
+      batchSize: 10, // 每批渲染的组件数量 (轻量级)
+      renderTimer: null, // 分批渲染定时器
+      renderedCount: 0 // 已渲染的组件数量
+    };
+  },
+  mounted() {
+    this.getData();
+    window.onresize=this.Debounce(this.setScale,500);
+  },
+  beforeDestroy() {
+    console.log('[Viewer] beforeDestroy 开始清理资源');
+    
+    // 1. 清除定时刷新定时器
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+      this.refreshTimer = null;
+      console.log('[Viewer] 已清除定时刷新定时器');
+    }
+    
+    // 2. 清除分批渲染定时器
+    if (this.renderTimer) {
+      clearTimeout(this.renderTimer);
+      this.renderTimer = null;
+      console.log('[Viewer] 已清除分批渲染定时器');
+    }
+    
+    // 3. 清空大型数据引用，释放内存
+    this.widgets = [];
+    this.renderBatches = [];
+    this.dashboard = {};
+    this.screenData = { dashboard: {}, widgets: [] };
+    
+    // 4. 移除 window 事件监听
+    if (window.onresize) {
+      window.onresize = null;
+    }
+    
+    console.log('[Viewer] 资源清理完成');
+  },
+
+  methods: {
+    oepnTheDrillView(val){
+      this.screenData=val
+      this.visiableDrillView=true
+    },
+    async getData() {
+      try {
+        const reportCode = 'demotest';
+        const { code, data } = await detailDashboard(reportCode);
+        console.log(data)
+        if (code != 200) {
+          console.error('[Viewer] 获取大屏数据失败:', code);
+          return;
+        }
+        
+        this.dashboard = data.dashboard || {};
+        const equipment = document.body.clientWidth;
+        const ratioEquipment = equipment / data.dashboard.width;
+        const ratioEquipmentHeight = window.innerHeight / data.dashboard.height;
+        this.bigScreenStyle = {
+          width: data.dashboard.width + "px",
+          height: data.dashboard.height + "px",
+          "background-color": data.dashboard.backgroundColor,
+          "background-image": "url(" + data.dashboard.backgroundImage + ")",
+          "background-position": "0% 0%",
+          "background-size": "100% 100%",
+          "background-repeat": "initial",
+          "background-attachment": "initial",
+          "background-origin": "initial",
+          "background-clip": "initial",
+          transform: `scale(${ratioEquipment}, ${ratioEquipmentHeight})`,
+          "transform-origin": "0 0"
+        };
+        
+        // 关键优化：冻结组件数据，避免 Vue 的响应式系统占用大量内存
+        const frozenWidgets = Object.freeze(data.dashboard.widgets.map((item, index) => {
+          item.value.widgetId = item.value.setup.widgetId;
+          item.value.widgetCode = item.value.setup.widgetCode;
+          if (item.value.setup.componentLinkage && item.value.setup.componentLinkage.length) {
+            this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
+              index,
+              widgetId: item.value.widgetId,
+              linkageArr: item.value.setup.componentLinkage
+            });
+          }
+          return item;
+        }));
+        
+        // 赋值给 widgets 用于分批渲染
+        this.widgets = frozenWidgets;
+        
+        console.log(`[Viewer] 数据加载完成，共 ${this.widgets.length} 个组件，开始分批渲染`);
+        
+        // 标记数据已加载
+        this.dataLoaded = true;
+        
+        // 开始分批渲染组件
+        this.startBatchRender();
+        
+        // 定时刷新 - 保存定时器引用以便清理
+        if(data.dashboard.refreshSeconds > 0) {
+          this.refreshTimer = setTimeout(() => { 
+            console.log('[Viewer] 定时刷新触发');
+            window.location.reload(); 
+          }, data.dashboard.refreshSeconds * 1000);
+        }
+      } catch (error) {
+        console.error('[Viewer] 获取数据异常:', error);
+        this.dataLoaded = false;
+      }
+    },
+    Debounce:(fn,t)=>{
+      const delay=t||500;
+      let timer=null;
+      return(...args)=>{
+        if(timer){
+          clearTimeout(timer);
+        }
+        const context=this
+        timer=setTimeout(()=>{
+          fn.apply(context,args);
+        },delay);
+      }
+    },
+    setScale(){
+      const scale=this.getScale();
+      // this.bigScreenStyle.transform='scale('+scale.scalex+','+scale.scaley+')'
+      this.bigScreenStyle.transform = `scale(${scale.scalex},${scale.scaley})`
+    },
+    getScale(){
+      let width = this.dashboard.width
+      let height = this.dashboard.height
+      // 固定宽度比例
+      const scalex = window.innerWidth / width
+      // // 高度按相同比例缩放，但允许超出屏幕高度
+      // const scaley = scalex
+      // 高度按屏幕高度比例
+      const scaley = window.innerHeight / height
+
+      return {
+        scalex,
+        scaley
+      }
+    },
+    /**
+     * 分批渲染组件，避免一次性创建过多 DOM 节点导致页面卡顿
+     */
+    startBatchRender() {
+      this.renderedCount = 0;
+      this.renderBatches = [];
+      
+      const renderNextBatch = () => {
+        if (this.renderedCount >= this.widgets.length) {
+          console.log('[Viewer] 所有组件渲染完成，总数:', this.widgets.length);
+          return;
+        }
+        
+        // 计算本批次要渲染的组件
+        const start = this.renderedCount;
+        const end = Math.min(start + this.batchSize, this.widgets.length);
+        
+        // 使用 slice 创建新批次，避免引用原数组
+        const batch = Object.freeze(this.widgets.slice(start, end));
+        
+        // 添加到渲染批次
+        this.renderBatches.push(batch);
+        this.renderedCount = end;
+        
+        console.log(`[Viewer] 渲染第 ${this.renderBatches.length} 批，组件 ${start}-${end-1}`);
+        
+        // 继续渲染下一批
+        if (this.renderedCount < this.widgets.length) {
+          this.renderTimer = setTimeout(renderNextBatch, 100); // 每批间隔 100ms
+        }
+      };
+      
+      // 开始渲染第一批
+      renderNextBatch();
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+.layout {
+  width: 100%;
+  height: 100vh;
+  text-align: center;
+}
+.dialogDrillDrownView .el-dialog{
+  width:auto;
+  margin-top:0 !important;
+  transform: scale(0.6, 0.6);
+  .el-dialog__body{
+    padding:0;
+    max-height:calc(100vh - 34px);
+    overflow:auto;
+    &::-webkit-scrollbar {
+      display: none; /* 隐藏滚动条 */
+      }
+  }
+   .el-dialog__header .el-dialog__headerbtn{
+  top: 6px;
+}
+}
+.bottom-text {
+  width: 100%;
+  color: #a0a0a0;
+  position: fixed;
+  bottom: 16px;
+  z-index: 9999;
+}
+</style>