静态大屏布局-接口对接-未完成

src/views/bigscreenDesigner/viewer/components/static.vue

@@ -27,7 +27,7 @@
                 <span v-if="stat.change!==undefined" :class="['stat-change', stat.changeType]">
                     同比
                     <span class="change-icon" :class="['change-icon', stat.changeType]"></span>
-                    {{ stat.change }}</span>
+                    {{ stat.change }}%</span>
               </div>
               
             </div>
@@ -39,64 +39,34 @@
 
         <div class="bottom-left-cards">
           <div class="bottom-card carbon-card">
-            <div class="card-header">
+           <div class="card-header">
-              <span class="card-title">碳中和比率</span>
+                <span class="icon-label" />
+            <span class="card-title">生产数据分析
+            </span>
+                <img style="width:calc(100% - 160px);" src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
             </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 class="card-title">主要产品销售情况(毛利率)
             </span>
-                <img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
+                <img style="width:calc(100% - 260px);" 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>
@@ -129,59 +99,48 @@
         <div class="panel-card peak-card">
           <div class="card-header">
              <span class="icon-label" />
-            <span class="card-title">财务分析</span>
+            <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-desc">
+            <div class="desc-item">
+              <div class="desc-label">产销率</div>
+              <div class="desc-value">{{peakData['产销率']}}%</div>
+               <div class="desc-label">周转率</div>
+              <div class="desc-value">{{peakData['周转率']}}%</div>
+            </div>
+            <div class="desc-item">
+              <div class="desc-label">平均交付周期</div>
+              <div class="desc-value">{{peakData['平均交付周期']}}天</div>
+               <div class="desc-label">订单准时率</div>
+              <div class="desc-value">{{peakData['订单准时率']}}</div>
+            </div>
+          </div>
           <div class="peak-content">
+            <div class="peak-cai-icon" title="财务分析">财</div>
             <div ref="scatterChart" class="scatter-chart"></div>
           </div>
         </div>
 
         <div class="panel-card trend-card">
           <div class="card-header">
-            <span class="card-title">市场分析</span>
+             <span class="icon-label" />
-            <div class="card-actions trend-tabs">
+            <span class="card-title">产能分析</span>
-              <button :class="['action-btn', { active: trendTab === '7' }]" @click="trendTab = '7'">过去7天</button>
+             <img src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
-              <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="icon-label" />
             <span class="card-title">销售收入排行</span>
+             <img style="width: calc(100% - 160px);" src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
           </div>
-          <div class="park-content">
+          <div class="park-content" style="position:relative;margin-top:10px">
+            <span style="position:absolute;top:-10px;font-size:11px;">单位：万</span>
             <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>
@@ -195,18 +154,21 @@ import * as echarts from 'echarts'
 import {getData} from '@/api/bigscreen'
 export default {
   name: 'EnergyPlatform',
+  props: {
+    dashboard: {
+      type: Object,
+      default: ()=>{}
+    }
+  },
   data() {
     return {
       currentTime: '',
       trendTab: '7',
       charts: {},
       powerData: [],
+      peakData: {},
       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' },
-      
       ]
     }
   },
@@ -221,6 +183,7 @@ export default {
     }, 1000)
     this.getPowerData()
     this.getTopStatsData()
+    this.getPeakData()
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize)
@@ -229,6 +192,29 @@ export default {
     })
   },
   methods: {
+    async getPeakData(){
+      const params={"chartProperties":{"本年存货周期":"text"},"setCode":"zp_cxxt_zb","chartType":"widget-text","contextData":{"qyear":"2026","reportCode":"ddddd"}}
+      const params2={"chartProperties":{"平均销售交付周期_天":"text"},"setCode":"ping_jun_xiao_tian","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
+      const {code, data} = await getData(params);
+      const res = await getData(params2);
+      if(code != 200){
+            console.error('[Viewer] 获取大屏数据失败:', code);
+            return;
+         }
+         this.peakData ={
+          '产销率' :data[0]['本年产销率'],
+          '周转率' : data[0]['本年存货周转率'],
+          '订单准时率' : res.data[0]['平均销售交付周期_天'],
+         } 
+        const {widgets} = this.dashboard
+        if(widgets && widgets.length > 0){
+        widgets.forEach(widget => {
+          if(widget.value.widgetId === "fiauqt0od7"){
+           this.peakData['订单准时率'] = widget.value.setup.text+widget.value.setup.joinText
+          }
+        })
+      }
+    },
     async getPowerData(){
          let params={"chartProperties":{"dzr":"text"},"setCode":"nhsj","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
          const {code, data} = await getData(params);
@@ -248,9 +234,14 @@ export default {
     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"}}
+        let paramsTb2={"chartProperties":{"本年毛利":"text","本年营业额":"text"},"setCode":"local_year","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
+        let paramsKcje={"chartProperties":{"库存金额":"text"},"setCode":"zp_kcje","chartType":"widget-text","contextData":{"reportCode":"ddddd"}}
+        let paramsCxxtZb={"chartProperties":{"本年存货周期":"text"},"setCode":"zp_cxxt_zb","chartType":"widget-text","contextData":{"qyear":"2026","reportCode":"ddddd"}}
          const {code, data} = await getData(params);
          const res = await getData(paramsTb);
-
+        const res2 = await getData(paramsTb2);  
+        const res3 = await getData(paramsKcje);
+        const res4 = await getData(paramsCxxtZb);
          if(code != 200){
             console.error('[Viewer] 获取大屏数据失败:', code);
             return;
@@ -260,10 +251,13 @@ export default {
             "本月毛利": '万',
             "负债总额": '亿元',
             "资产总额":  '亿元',
+            '库存金额': '万',
+            '存货周期': '天',
         }
-        const tbChange = {'本月毛利':res.data[0]['本月毛利同比_百分比']}
+        const tbChange = {'本月毛利':res.data[0]['本月毛利同比_百分比'],'营收':res2.data[0]['本年营业额']}
+        
          this.topStats = Object.keys(topStatsUnit).map((item) => ({
-            value: data[0][item],
+            value: data[0][item]||res3.data[0][item]||res4.data[0]['本年'+item],
             unit: topStatsUnit[item],
             label: item,
             change:tbChange[item],
@@ -381,9 +375,30 @@ export default {
     initGanttChart() {
       if (!this.$refs.ganttChart) return
       const chart = echarts.init(this.$refs.ganttChart)
-      
+    
-      const values = [947, 340, 36]
+      let yData = []
-      
+      const {widgets} = this.dashboard
+      const values=[]
+      let seriesData=[]
+      let colors=[]
+      if(widgets && widgets.length > 0){
+        widgets.forEach(widget => {
+          if(widget.value.widgetId === "24q62cb3ywe"){
+           yData=[...new Set(widget.value.data.staticData.map(item => item.axis))]
+          seriesData=[...new Set(widget.value.data.staticData.map(item => item.name))].map(item=>{return {name:item,values:[],axis:[]}})
+          colors=widget.value.setup.customColor.map(item=>item.color)
+          widget.value.data.staticData.forEach(item=>{
+            seriesData.forEach(series=>{
+              if(series.name===item.name){
+                series.values.push(item.data)
+                series.axis.push(item.axis)
+              }
+            })
+
+          })
+          }
+        })
+      }
       const option = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -391,23 +406,35 @@ export default {
           backgroundColor: 'rgba(15, 42, 66, 0.9)',
           borderColor: '#61c8ee',
           textStyle: { color: '#fff' },
-          formatter: '{b}: {c}'
+          formatter: (params) => {
+            let result = `${params.seriesName}<br/>`;
+            seriesData.forEach((series,index1)=>{
+                series.values.forEach((item,index)=>{
+                  if(series.axis[index]===params.name){
+                    result += ` <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${colors[index1]};margin-right:6px;"></span>
+                    ${series.name}：${item}万元<br/>`;
+                  }
+                })
+              
+            })
+            return result;
+          }
         },
         grid: {
-          left: '15%',
+          left: '0',
-          right: '25%',
+          right:'0',
-          top: '10%',
+          top:'0',
-          bottom: '10%',
+          bottom: '0',
           containLabel: true
         },
         xAxis: {
           type: 'value',
           show: false,
-          max: 100
+          max: 2000
         },
         yAxis: {
           type: 'category',
-          data: ['照明', '动力', '生产'],
+          data: yData,
           axisLine: { show: false },
           axisTick: { show: false },
           axisLabel: { 
@@ -417,108 +444,148 @@ export default {
           }
         },
         graphic: [
-          {
+         
-            type: 'text',
+        ],
-            left: '80%',
+        series: [
-            top: '12%',
+        ]
-            style: {
+      }
-              text: '36',
+      option.series=seriesData.map((item,index)=>{
-              fill: '#fff',
+        return {
-              fontSize: 16,
+          type: 'bar',
-              fontWeight: 'bold'
+          stack: 'total',
+          barWidth: 8,
+          itemStyle: {
+            color: colors[index],
+            
+          },
+          data: item.values,
+          name: item.name,
+        }
+      })
+      chart.setOption(option)
+      this.charts.gantt = chart
+    },
+    
+    async initRoseChart() {
+      if (!this.$refs.roseChart) return
+      const chart = echarts.init(this.$refs.roseChart)
+       let dates = []
+      let lineData = []
+      let barData = []
+      let barData2=[]
+      
+      let params={"chartProperties":{"本年累计毛利(万)":"bar","毛利同比变动":"line","去年累计毛利(万)":"bar","货品名称":"xAxis"},"setCode":"zhuyao_maoli_zongcang","chartType":"widget-barlinechart","contextData":{"startTime":"","endTime":"","reportCode":"ddddd"}}
+      const {code,data}=await getData(params)
+      if(code!=200){
+        return
+      }
+      console.log(data)
+      dates=data.map(item=>{return item['货品名称']})
+      lineData=data.map(item=>{return item['毛利同比变动']})
+      barData=data.map(item=>{return item['去年累计毛利(万)']})
+      barData2=data.map(item=>{return item['本年累计毛利(万)']})
+      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: '#cccccc',
+            hideOverlap: false,
+            interval: 0,
+            fontSize: 12,
+            margin: 8,
+            // 👇 核心：超出自动省略 + 鼠标悬浮显示完整
+            formatter: function (value) {
+              if (value.length > 5) {
+                return value.slice(0,5) + '...';
+              }
+              return value;
             }
           },
+        },
+        yAxis: [
           {
-            type: 'text',
+            type: 'value',
-            left: '80%',
+            position: 'left',
-            top: '45%',
+            splitLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.1)' } },
-            style: {
+            axisLine: { show: false },
-              text: '340',
+            axisTick: { show: false },
-              fill: '#fff',
+            axisLabel: { color: '#6b8cae', fontSize: 8 }
-              fontSize: 16,
-              fontWeight: 'bold'
-            }
           },
           {
-            type: 'text',
+            type: 'value',
-            left: '80%',
+            position: 'right',
-            top: '78%',
+            splitLine: { show: false },
-            style: {
+            axisLine: { show: false },
-              text: '947',
+            axisTick: { show: false },
-              fill: '#fff',
+            axisLabel: { color: '#6b8cae', fontSize: 8 }
-              fontSize: 16,
-              fontWeight: 'bold'
-            }
           }
         ],
         series: [
           {
             type: 'bar',
-            stack: 'total',
+            name: '本年累计毛利',
-            barWidth: 18,
+            data: barData2,
+            yAxisIndex: 0,
             itemStyle: {
-              color: '#ff4d4f',
+              color: {
-              borderRadius: [0, 0, 0, 0]
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(255,127,80, 1)' },
+                  { offset: 1, color: 'rgba(255,127,80, 0.1)' }
+                ]
+              },
+              borderRadius: [3, 3, 0, 0]
             },
-            data: [10, 8, 15]
+            barWidth: 7
           },
           {
             type: 'bar',
-            stack: 'total',
+            name: '去年累计毛利',
-            barWidth: 18,
+            data: barData,
+            yAxisIndex: 0,
             itemStyle: {
-              color: '#ff9f43',
+              color: {
-              borderRadius: [0, 0, 0, 0]
+                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]
             },
-            data: [5, 3, 5]
+            barWidth: 7
           },
+          
           {
-            type: 'bar',
+            type: 'line',
-            stack: 'total',
+            name: '毛利同比变动',
-            barWidth: 18,
+            data: lineData,
-            itemStyle: {
+            smooth: true,
-              color: '#1890ff',
+            yAxisIndex: 1,
-              borderRadius: [0, 4, 4, 0]
+            itemStyle: { color: '#ff4d4f' },
-            },
+            lineStyle: { width: 2 },
-            data: [85, 89, 80]
+            symbol: 'circle',
-          }
+            symbolSize: 3
-        ]
-      }
-      
-      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' } }
-            ]
           }
         ]
       }
@@ -529,23 +596,26 @@ export default {
     initScatterChart() {
       if (!this.$refs.scatterChart) return
       const chart = echarts.init(this.$refs.scatterChart)
-      const hours = Array.from({ length: 24 }, (_, i) => `${i}`)
+      let hours = []
-      const scatterData = []
       
-      for (let i = 0; i < 30; i++) {
+      let scatterData = []
-        const hour = Math.floor(Math.random() * 24)
+       let lineData = []
-        const value = Math.random() * 60 + 40
+      const {widgets} = this.dashboard
-        let size = value / 8
+      const colors={
-        let color
+        50:'#1890ff',
-        if (size > 10) {
+        60:'#73d5ff',
-          color = '#1890ff'
+        70:'#ff4d4f',
-        } else if (size > 6) {
-          color = '#73d5ff'
-        } else {
-          color = '#ff4d4f'
-        }
-        scatterData.push([hour, 50, size, color])
       }
+      if(widgets && widgets.length > 0){
+        widgets.forEach(widget => {
+          if(widget.value.widgetId === "1vsidsxecdg"){
+           lineData = widget.value.data.staticData.map(item => item.line)
+           hours=widget.value.data.staticData.map(item => item.axis)
+           scatterData =  widget.value.data.staticData.map(item => [item.axis, 50, (item.bar/5).toFixed(2), colors[item.bar > 70 ? 70 : item.bar > 60 ? 60 : 50]])
+          }
+        })
+      }
+
       
       const option = {
         backgroundColor: 'transparent',
@@ -555,14 +625,33 @@ export default {
           borderColor: '#61c8ee',
           textStyle: { color: '#fff' },
           formatter: (params) => {
-            return `时间: ${params.value[0]}:00<br/>功率: ${params.value[2].toFixed(2)} kw`
+            // params 是当前鼠标所在的系列数据（散点 或 折线）
+            // 获取当前 X 轴坐标索引
+            const dataIndex = params.dataIndex;
+  
+            // // 从图表实例中拿到所有系列的原始数据
+            const scatterVal = parseFloat((scatterData[dataIndex][2]*5).toFixed(2)); // 散点数据
+            const scatterColor = scatterData[dataIndex] ? scatterData[dataIndex][3] : '#ccc';
+            const lineVal = lineData[dataIndex];       // 折线数据
+             const lineColor = '#ff4d4f';
+            const hour = hours[dataIndex];              // X轴时间
+            let result = `${hour}<br/>`;
+            if (scatterVal) {
+              result += ` <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${scatterColor};margin-right:6px;"></span>
+              毛利：${scatterVal}万元<br/>`;
+            }
+
+            // // 显示折线（净利润）信息
+            result += `<span style="display:inline-block;width:10px;height:2px;background-color:${lineColor};margin-right:6px;"></span>净利润：${lineVal ? lineVal : '--'}万元`;
+
+            return result;
           }
         },
         grid: {
-          left: '12%',
+          left: '0',
-          right: '3%',
+          right: '0',
-          top: '5%',
+          top: '0',
-          bottom: '15%',
+          bottom: '0',
           containLabel: true
         },
         xAxis: {
@@ -570,7 +659,7 @@ export default {
           data: hours,
           axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
           axisTick: { show: false },
-          axisLabel: { color: '#6b8cae', fontSize: 8, interval: 3 }
+          axisLabel: { color: '#fff', fontSize: 14,  }
         },
         yAxis: {
           type: 'value',
@@ -581,14 +670,26 @@ export default {
           {
             type: 'scatter',
             data: scatterData,
+            name:'毛利',
             symbolSize: (val) => val[2] * 2,
             itemStyle: {
               color: (params) => params.value[3],
               opacity: 0.85
             }
+          },
+           {
+            type: 'line',
+            name: '净利利润',
+            data: lineData,
+            smooth: true,
+            itemStyle: { color: '#ff4d4f' },
+            lineStyle: { width: 2 },
+            symbol: 'circle',
+            symbolSize: 3
           }
         ]
       }
+      
       chart.setOption(option)
       this.charts.scatter = chart
     },
@@ -676,21 +777,19 @@ export default {
       this.charts.trend = chart
     },
     
-    initParkChart() {
+    async initParkChart() {
       if (!this.$refs.parkChart) return
       const chart = echarts.init(this.$refs.parkChart)
-      
+      const params ={"chartProperties":{},"setCode":"xssrph","chartType":"widget-table","contextData":{"month":"3","year":"2026","pageSize":"20","currentPage":"1","reportCode":"ddddd"}}
-      const parkData = [
+      const {code,data} = await getData(params);
-        { name: '园区2#', value: 1000 },
+        if(code != 200){
-        { name: '园区3#', value: 720 },
+            console.error('[Viewer] 获取大屏数据失败:', code);
-        { name: '园区4#', value: 610 },
+            return;
-        { name: '园区5#', value: 500 },
+         }
-        { name: '园区6#', value: 430 },
+      const parkData = data.map(d => ({
-        { name: '园区7#', value: 310 },
+        name: d.hpmc,
-        { name: '园区8#', value: 220 },
+        value: d.xse
-        { name: '园区9#', value: 130 }
+      })).splice(0, 10)
-      ]
-      
       const option = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -698,18 +797,19 @@ export default {
           backgroundColor: 'rgba(15, 42, 66, 0.95)',
           borderColor: '#61c8ee',
           textStyle: { color: '#fff' },
-          formatter: '{b}: {c}'
+          formatter: '{b}: {c}万'
         },
         grid: {
-          left: '8%',
+          left: '0',
-          right: '28%',
+          right: '0',
-          bottom: '15%',
+          bottom: '0',
-          top: '8%',
+          top: '0',
           containLabel: true
         },
         xAxis: {
           type: 'category',
           data: parkData.map(d => d.name),
+          
           axisLine: {
             lineStyle: { 
               color: '#555'
@@ -718,23 +818,62 @@ export default {
           axisTick: { show: false },
           axisLabel: {
             color: '#cccccc',
+            hideOverlap: false,
+            interval: 0,
             fontSize: 12,
-            margin: 8
+            margin: 8,
-          }
+            // 👇 核心：超出自动省略 + 鼠标悬浮显示完整
+            formatter: function (value) {
+              if (value.length > 3) {
+                return value.slice(0,3) + '...';
+              }
+              return value;
+            }
+          },
+          axisPointer: {
+            show: true
+          },
+          dataZoom: [
+             {
+               type: 'slider',    // 底部滑动条
+               show: false,       // 隐藏滑动条（只保留滚动能力）
+               xAxisIndex: [0],
+               start: 0,
+               end: 100
+             },
+             {
+               type: 'inside',    // 内置滚动（鼠标滚轮/拖拽滚动）
+               xAxisIndex: [0],
+               start: 0,
+               end: 100,
+               zoomLock: true     // 禁止缩放，只允许滚动
+             }
+           ]
         },
         yAxis: {
           type: 'value',
-          show: false,
+          show: true,
-          max: 1200
+          max: parkData[0].value+300,
+         
+          splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.15)', // 柔和的浅色线（可改颜色）
+                width: 1,
+                type: 'solid'
+              }
+            }
         },
         series: [
           {
-            name: '能耗',
+            name: '销售额',
             type: 'pictorialBar',
             symbol: 'diamond',
-            symbolSize: ['70%', '100%'],
+            symbolSize: ['180%', '100%'],
             symbolPosition: 'end',
-            symbolOffset: [0, '50%'],
+            
+             symbolRepeat: false,
+             symbol:  'path://M0,0 Q-5,85 -50,100 L50,100 Q5,85  0,0 Z',
             itemStyle: {
               color: {
                 type: 'linear',
@@ -749,8 +888,7 @@ export default {
               show: true,
               position: 'top',
               color: '#ff6f46',
-              fontSize: 14,
+              fontSize: 10,
-              fontWeight: 'bold',
               formatter: '{c}'
             },
             data: parkData.map(d => d.value)
@@ -872,9 +1010,9 @@ export default {
 }
 
 .stats-grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(4, 1fr);
+  justify-content: space-between;
-  gap: 15px;
+
 }
 
 .stat-item {
@@ -916,7 +1054,7 @@ export default {
     border: 1px solid #fff;
   }
 .stat-item .stat-change {
-  font-size: 10px;
+  font-size: 12px;
   font-weight: bold;
   padding: 2px 6px;
   border-radius: 10px;
@@ -1005,7 +1143,12 @@ export default {
   background: rgba(97, 200, 238, 0.3);
   color: #fff;
 }
-
+.carbon-card{
+  background: rgb(32, 37, 43);
+ border: 2px solid rgb(49, 56, 66);
+        border-radius: 5px;
+        border-bottom: 0;
+}
 .carbon-content {
   display: flex;
   height: 170px;
@@ -1059,7 +1202,11 @@ export default {
   font-weight: bold;
   color: #fff;
 }
-
+.energy-card{
+    background: rgb(32, 37, 43);
+ border: 2px solid rgb(49, 56, 66);
+        border-radius: 5px;
+}
 .energy-content {
   display: flex;
   height: 200px;
@@ -1174,10 +1321,39 @@ export default {
         border-radius-bottom-right: 5px;
         border-top: 0;
         margin-bottom: 15px;
+        .peak-desc{
+          display: flex;
+          color: #fff;
+          padding: 10px 15px;
+          .desc-item{
+            flex: 1;
+            align-items: flex-start;
+            line-height: 1.5;
+            .desc-label{
+              text-align:left;
+              font-size: 14px;
+                color: #fff;
+            }
+             .desc-value{
+              font-size: 20px;
+             }
+          }
+        }
 }
 .peak-content {
   display: flex;
-  flex-direction: column;
+  padding: 0 15px ;
+  align-items: center;
+  .peak-cai-icon{
+    font-size: 26px;
+    color: #fff;
+    border: 1px solid #fff;
+    height: 60px;
+    width: 60px;
+    line-height: 58px;
+    text-align: center;
+
+  }
 }
 
 .peak-stats {
@@ -1189,7 +1365,11 @@ export default {
   font-weight: bold;
   color: #1890ff;
 }
-
+.park-card{
+  background: rgb(32, 37, 43);
+ border: 2px solid rgb(49, 56, 66);
+        border-radius: 5px;
+}
 .peak-unit {
   font-size: 12px;
   color: #6b8cae;
@@ -1219,10 +1399,16 @@ export default {
 }
 
 .scatter-chart {
-  height: 70px;
+  height: 120px;
   padding: 0 10px 10px;
+  width: calc(100% - 60px);
+}
+.trend-card{
+  background: rgb(32, 37, 43);
+ border: 2px solid rgb(49, 56, 66);
+        border-radius: 5px;
+        margin-bottom: 15px;
 }
-
 .trend-tabs {
   gap: 3px;
 }
@@ -1240,6 +1426,7 @@ export default {
 .park-chart {
   flex: 1;
   height: 160px;
+  width: 100%;
 }
 
 .park-legend {

src/views/bigscreenDesigner/viewer/static.vue

@@ -11,7 +11,7 @@
        <!-- 关键优化 1: v-if 包裹整个渲染区域，避免空数据时渲染 -->
       <template v-if="dataLoaded">
         <!-- 关键优化 2: 分批渲染，避免一次性创建过多 DOM 节点 -->
-        <static-content :screenData="screenData"></static-content>
+        <static-content :dashboard="dashboard"></static-content>
       </template>
     </div>
     <el-dialog  :title="''" class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
@@ -94,7 +94,6 @@ export default {
       try {
         const reportCode = 'demotest';
         const { code, data } = await detailDashboard(reportCode);
-        console.log(data)
         if (code != 200) {
           console.error('[Viewer] 获取大屏数据失败:', code);
           return;