From 6e2e473725cbafdd2378f4ae8aeb64c2125df312 Mon Sep 17 00:00:00 2001
From: "DESKTOP-AD8UBUJ\\ling" <1874467086@qq.com>
Date: Fri, 15 May 2026 00:14:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E9=94=80=E5=94=AE=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |    9 +
 .../viewer/components/saleStatic.vue          | 1312 +++++++++++++++++
 .../bigscreenDesigner/viewer/saleStatic.vue   |  259 ++++
 3 files changed, 1580 insertions(+)
 create mode 100644 src/views/bigscreenDesigner/viewer/components/saleStatic.vue
 create mode 100644 src/views/bigscreenDesigner/viewer/saleStatic.vue

diff --git a/src/router/index.js b/src/router/index.js
index d3fa47e..7ef0867 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -262,6 +262,15 @@ export const constantRouterMap = [
       requireAuth: true,
       keepAlive: true,
     }
+  },
+   {
+    path: '/bigscreen/viewer/saleStatic',
+    component: () => import('@/views/bigscreenDesigner/viewer/saleStatic'),
+    hidden: true,
+    meta: {
+      requireAuth: true,
+      keepAlive: true,
+    }
   },
   {
     path: '/bigscreen/designer',
diff --git a/src/views/bigscreenDesigner/viewer/components/saleStatic.vue b/src/views/bigscreenDesigner/viewer/components/saleStatic.vue
new file mode 100644
index 0000000..0172a09
--- /dev/null
+++ b/src/views/bigscreenDesigner/viewer/components/saleStatic.vue
@@ -0,0 +1,1312 @@
+<template>
+  <div class="sales-dashboard">
+    <div class="background-layer"></div>
+    
+    <header class="dashboard-header">
+    国瑞药业销售分析
+    </header>
+
+    <section class="dashboard-content">
+      <aside class="left-panel">
+        <div class="panel-card overview-card">
+         
+          <div class="overview-content">
+            <div class="ring-main">
+              <div ref="mainRingChart" class="main-ring"></div>
+            </div>
+            <div class="overview-stats">
+              <div class="stat-row">
+                <span class="stat-label">市场渗透率</span>
+                
+              </div>
+              <div class="stat-wrapper">
+                <span class="stat-value"><span>121</span>%</span>
+                <div class="stat-bar">
+                  <div class="bar-fill" style="width: 85%"></div>
+                </div>
+              </div>
+              <div class="stat-row">
+                <span class="stat-label">回款率</span>
+              </div>
+               <div class="stat-wrapper">
+                <span class="stat-value"><span>62</span>%</span>
+                <div class="stat-bar">
+                  <div class="bar-fill" style="width: 62%"></div>
+                </div>
+              </div>
+              <div class="stat-row">
+                <span class="stat-label">目标达成率</span>
+              </div>
+              <div class="stat-wrapper">
+                <span class="stat-value"><span>62</span>%</span>
+                <div class="stat-bar">
+                  <div class="bar-fill" style="width: 62%"></div>
+                </div>
+              </div>
+             
+            </div>
+          </div>
+        </div>
+
+        <div class="panel-card pie-card">
+          <div class="card-header">
+            <span class="card-title">商品交易占比（按疗效）</span>
+          </div>
+          <div class="pie-content">
+            <div ref="pieChart1" class="pie-chart"></div>
+           
+          </div>
+        </div>
+
+        <div class="panel-card pie-card">
+          <div class="card-header">
+            <span class="card-title">商品交易占比（按剂型）</span>
+          </div>
+          <div class="form-content">
+            <div class="form-item">
+              <span class="form-label">冻干粉针剂</span>
+              <div class="form-dots">
+                <span class="dot active"></span>
+                <span class="dot active"></span>
+                <span class="dot active"></span>
+                <span class="dot active"></span>
+                <span class="dot"></span>
+              </div>
+            </div>
+            <div class="form-value">27,143</div>
+            <div class="form-item">
+              <span class="form-label">冻干粉针剂</span>
+              <div class="form-dots">
+                <span class="dot active"></span>
+                <span class="dot active"></span>
+                <span class="dot active"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+              </div>
+            </div>
+            <div class="form-value">3,722</div>
+            <div class="form-item">
+              <span class="form-label">协调节点总数</span>
+              <div class="form-dots">
+                <span class="dot active"></span>
+                <span class="dot active"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+              </div>
+              
+            </div>
+            <div class="form-value">8,372</div>
+            <div class="form-item">
+              <span class="form-label">冷数据节点总数</span>
+              <div class="form-dots">
+                <span class="dot active"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+              </div>
+              
+            </div>
+            <div class="form-value">187</div>
+          </div>
+        </div>
+      </aside>
+
+      <section class="center-panel">
+        <div class="panel-card map-card">
+          <div class="card-header">
+            <span class="card-title">重点区域分析</span>
+          </div>
+          <div ref="mapChart" class="map-container"></div>
+      
+        </div>
+
+        <div class="panel-card bar-card">
+          <div ref="barChart" class="bar-container"></div>
+        </div>
+
+        <div class="panel-card line-card">
+          <div class="card-header">
+            <span class="card-title">重点客户分析</span>
+          </div>
+          <div ref="lineChart" class="line-container"></div>
+        </div>
+      </section>
+
+      <aside class="right-panel">
+        <div class="panel-card product-card">
+          <div class="card-header">
+            <span class="card-title">重点产品分析</span>
+          </div>
+          <div ref="productBarChart" class="product-bar"></div>
+        </div>
+
+        <div class="panel-card product-card">
+          <div class="card-header">
+            <span class="card-title">重点产品分析</span>
+          </div>
+          <div ref="productLineChart" class="product-line"></div>
+        </div>
+
+        <div class="panel-card product-card">
+          <div class="card-header">
+            <span class="card-title">重点产品分析</span>
+          </div>
+          <div ref="trendChart" class="trend-container"></div>
+        </div>
+      </aside>
+    </section>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'SalesDashboard',
+  data() {
+    return {
+      charts: {}
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    Object.values(this.charts).forEach(chart => {
+      if (chart) chart.dispose()
+    })
+  },
+  methods: {
+    handleResize() {
+      Object.keys(this.charts).forEach(key => {
+        if (this.charts[key]) {
+          this.charts[key].resize()
+        }
+      })
+    },
+    
+    initCharts() {
+      this.initMainRingChart()
+      this.initPieChart1()
+      this.initMapChart()
+      this.initBarChart()
+      this.initLineChart()
+      this.initProductBarChart()
+      this.initProductLineChart()
+      this.initTrendChart()
+    },
+    
+    initMainRingChart() {
+      const chart = echarts.init(this.$refs.mainRingChart)
+      const option = {
+        backgroundColor: 'transparent', 
+        legend: {
+          orient: "vertical",
+          right: '80px',
+          top: "center",
+          itemWidth: 6,
+          itemHeight: 6,
+          textStyle: {
+            color: '#fff'
+          },
+          data: ["销售额", "毛利", "完后率"]
+        },
+        grid: {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0
+        },
+        series: [{
+          label: { show: true,position:'center' ,formatter: '{b|{name}}\n{a|{value}}',
+          rich: {
+            b: {
+              color: '#fff'
+            },
+            a: {
+              fontSize: 16,   // 数字放大字号
+              color: '#fff'
+            }
+          },
+          },
+          type: 'pie',
+          silent: true,
+          center: ['30px + 50%', '50%'],
+          emphasis: {
+              focus: 'none',
+              scale: false,
+              label: {
+                show: false, 
+              }
+          },
+          color: ["#109BDC", "#FBB900", "#FF4D4F"],
+          radius: ['65%', '60%'],
+          data: [{ value: 1600,name:'销售额' },{ value: 1008,name:'毛利' },{ value: 98,name:'完后率' }]
+          
+        }]
+      }
+      chart.setOption(option)
+      this.charts.mainRing = chart
+      // 数据列表
+      const dataList = [
+        { name: '销售额', target: 1600 },
+        { name: '毛利', target: 1008 },
+        { name: '完成率', target: 98 }
+      ]
+
+      let curIndex = 0
+      let timer = null
+      let animateTimer = null
+
+      // 数字滚动动画：从0加到目标值
+      function numAnimation(target, name) {
+        let now = 0
+        const step = Math.ceil(target / 30) // 动画步数
+        clearInterval(animateTimer)
+
+        animateTimer = setInterval(() => {
+          now += step
+          if (now >= target) {
+            now = target
+            clearInterval(animateTimer)
+          }
+          // 更新中心label富文本
+          chart.setOption({
+            series: [{
+              label: {
+               formatter: `{a|${now+(name=='完成率'?'%':'万')}}\n\n{b|${name}}`
+              }
+            }]
+          })
+        }, 30)
+      }
+
+      // 每2秒切换一项
+      function loopSwitch() {
+        const item = dataList[curIndex]
+        numAnimation(item.target, item.name)
+
+        curIndex = (curIndex + 1) % dataList.length
+      }
+
+      // 立即执行一次
+      loopSwitch()
+      // 每2秒轮播
+      timer = setInterval(loopSwitch, 2000)
+
+    },
+    
+    initPieChart1() {
+      const chart = echarts.init(this.$refs.pieChart1)
+      const option = {
+        backgroundColor: 'transparent',
+        legend: {
+          orient: 'vertical',
+          right: '80px',      // 距离右侧距离
+          top: 'center',      // 垂直居中
+          itemWidth: 6,       // 圆点宽度
+          itemHeight: 6,      // 圆点高度
+          itemGap: 15,        // 每项间距
+          textStyle: {
+            color: '#fff',    // 文字颜色
+            fontSize: 12
+          },
+          emphasis: { disabled: true },
+          selectedMode: false,
+          itemGap: 30,
+          data: [
+            {
+              name: '清热解毒',
+              icon: 'circle',
+              itemStyle: { color: '#2A09BA' }
+            },
+            {
+              name: '心脑血管',
+              icon: 'circle',
+              itemStyle: { color: '#FFFFFF' }
+            },
+            {
+              name: '消化内科',
+              icon: 'circle',
+              itemStyle: { color: '#006FA4' }
+            }
+          ],
+          
+        },
+        graphic: [
+          {
+            type: 'text',
+            right: 10,
+            top: '16px',
+            style: {
+              text: '2324',
+              fill: '#fff',
+              fontSize: 16
+            },
+            dy: -22
+          },
+          {
+            type: 'text',
+            right: 10,
+            top: '60px',
+            style: {
+              text: '2374',
+              fill: '#fff',
+              fontSize: 16
+            },
+            dy: 0
+          },
+          {
+            type: 'text',
+            right: 10,
+            top: '104px',
+            style: {
+              text: '2334',
+              fill: '#fff',
+              fontSize: 16
+            },
+            dy: 22
+          }
+        ],
+        series: [{
+          type: 'pie',
+          radius: ['74%', '80%'],
+          center: ['20px + 50%', '50%'],
+          silent: true,
+          label: { show: true,position:'center' ,formatter: '{b|{name}}\n{a|{value}}',
+            rich: {
+              b: {
+                color: '#fff'
+              },
+              a: {
+                fontSize: 16,   // 数字放大字号
+                color: '#fff'
+              }
+            },
+          },
+          data: [
+            {
+              value: 2324,
+              name: '清热解毒',
+              itemStyle: {
+                // ECharts 渐变写法
+                color: {
+                  type: 'linear',
+                  x: 0, y: 0, x2: 1, y2: 0,
+                  colorStops: [
+                    { offset: 0, color: '#2A09BA' },
+                    { offset: 0.5, color: 'rgba(42,9,186,0.5)' },
+                    { offset: 1, color: 'rgba(0,0,0,0.1)' }
+                  ]
+                }
+              }
+            },
+            {
+              value: 2374,
+              name: '心脑血管',
+              itemStyle: {
+                color: {
+                  type: 'linear',
+                  x: 1, y: 0, x2: 0, y2: 0,
+                  colorStops: [
+                    { offset: 0, color: '#ffffff' },
+                    { offset: 0.5, color: 'rgba(255,255,255,0.5)' },
+                    { offset: 1, color: 'rgba(0,0,0,0.1)' }
+                  ]
+                }
+              }
+            },
+            {
+              value: 2334,
+              name: '消化内科',
+              itemStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0, y: 0, x2: 1, y2: 0,
+                  colorStops: [
+                    { offset: 0, color: '#006FA4' },
+                    { offset: 0.5, color: 'rgba(0,111,164,0.5)' },
+                    { offset: 1, color: 'rgba(0,0,0,0.1)' }
+                  ]
+                }
+              }
+            }
+          ]
+        }]
+      }
+      chart.setOption(option)
+      this.charts.pie1 = chart
+      // 数据列表
+      const dataList = [
+        { name: '清热解毒', target: 2324 },
+        { name: '心脑血管', target: 2374 },
+        { name: '消化内科', target: 2334 }
+      ]
+
+      let curIndex = 0
+      let timer = null
+      let animateTimer = null
+
+      // 数字滚动动画：从0加到目标值
+      function numAnimation(target, name) {
+        let now = 0
+        const step = Math.ceil(target / 30) // 动画步数
+        clearInterval(animateTimer)
+
+        animateTimer = setInterval(() => {
+          now += step
+          if (now >= target) {
+            now = target
+            clearInterval(animateTimer)
+          }
+          // 更新中心label富文本
+          chart.setOption({
+            series: [{
+              label: {
+               formatter: `{a|${now+(name=='完成率'?'%':'万')}}\n\n{b|${name}}`
+              }
+            }]
+          })
+        }, 30)
+      }
+
+      // 每2秒切换一项
+      function loopSwitch() {
+        const item = dataList[curIndex]
+        numAnimation(item.target, item.name)
+
+        curIndex = (curIndex + 1) % dataList.length
+      }
+
+      // 立即执行一次
+      loopSwitch()
+      // 每2秒轮播
+      timer = setInterval(loopSwitch, 2000)
+    },
+    
+    initMapChart() {
+      const chart = echarts.init(this.$refs.mapChart)
+      const option = {
+        backgroundColor: 'transparent',
+        geo: {
+          map: 'world',
+          roam: false,
+          itemStyle: {
+            areaColor: 'rgba(45, 65, 85, 0.6)',
+            borderColor: 'rgba(107, 140, 174, 0.3)',
+            borderWidth: 1
+          },
+          emphasis: {
+            itemStyle: {
+              areaColor: 'rgba(24, 144, 255, 0.3)'
+            }
+          },
+          label: { show: false }
+        },
+        series: [{
+          type: 'effectScatter',
+          coordinateSystem: 'geo',
+          data: [
+            { name: '北京', value: [116.46, 39.92, 100], itemStyle: { color: '#1890ff' } },
+            { name: '上海', value: [121.48, 31.22, 80], itemStyle: { color: '#1890ff' } },
+            { name: '广州', value: [113.23, 23.16, 70], itemStyle: { color: '#1890ff' } },
+            { name: '深圳', value: [114.07, 22.62, 60], itemStyle: { color: '#1890ff' } },
+            { name: '东京', value: [139.69, 35.69, 50], itemStyle: { color: '#ffc107' } },
+            { name: '纽约', value: [-74.00, 40.71, 90], itemStyle: { color: '#ffc107' } },
+            { name: '伦敦', value: [-0.12, 51.51, 40], itemStyle: { color: '#ffc107' } },
+            { name: '巴黎', value: [2.35, 48.86, 35], itemStyle: { color: '#ffc107' } },
+            { name: '新加坡', value: [103.82, 1.35, 55], itemStyle: { color: '#1890ff' } },
+            { name: '悉尼', value: [151.21, -33.87, 30], itemStyle: { color: '#ffc107' } }
+          ],
+          symbolSize: (val) => val[2] / 10,
+          showEffectOn: 'render',
+          rippleEffect: {
+            brushType: 'stroke'
+          }
+        }, {
+          type: 'lines',
+          coordinateSystem: 'geo',
+          data: [
+            { coords: [[116.46, 39.92], [121.48, 31.22]], lineStyle: { color: '#ffc107', opacity: 0.4 } },
+            { coords: [[116.46, 39.92], [113.23, 23.16]], lineStyle: { color: '#ffc107', opacity: 0.4 } },
+            { coords: [[121.48, 31.22], [114.07, 22.62]], lineStyle: { color: '#ffc107', opacity: 0.4 } },
+            { coords: [[116.46, 39.92], [139.69, 35.69]], lineStyle: { color: '#ffc107', opacity: 0.3 } },
+            { coords: [[116.46, 39.92], [-74.00, 40.71]], lineStyle: { color: '#ffc107', opacity: 0.3 } },
+            { coords: [[113.23, 23.16], [103.82, 1.35]], lineStyle: { color: '#ffc107', opacity: 0.3 } },
+            { coords: [[121.48, 31.22], [151.21, -33.87]], lineStyle: { color: '#ffc107', opacity: 0.2 } },
+            { coords: [[-74.00, 40.71], [-0.12, 51.51]], lineStyle: { color: '#ffc107', opacity: 0.3 } },
+            { coords: [[-0.12, 51.51], [2.35, 48.86]], lineStyle: { color: '#ffc107', opacity: 0.3 } },
+            { coords: [[139.69, 35.69], [151.21, -33.87]], lineStyle: { color: '#ffc107', opacity: 0.2 } }
+          ],
+          lineStyle: {
+            width: 1,
+            curveness: 0.2
+          },
+          effect: {
+            show: true,
+            constantSpeed: 50,
+            trailLength: 0.5,
+            color: '#ffc107'
+          }
+        }]
+      }
+      chart.setOption(option)
+      this.charts.map = chart
+    },
+    
+    initBarChart() {
+      const chart = echarts.init(this.$refs.barChart)
+      const regions = ['北区', '南区', '东区', '西区', '华东', '华南', '华北', '西南', '西北', '东北', '华中', '海外']
+      const salesData = [68, 65, 62, 58, 55, 52, 48, 45, 42, 38, 35, 30]
+      const profitData = [25, 22, 18, 15, 12, 8, 5, 3, 2, 1, 0, 0]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        grid: {
+          left: '0',
+          right: '0',
+         top: '30px',
+          bottom: '10px',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: 'rgba(255,255,255,0.2)',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: '{b}<br/>{a0}：{c0}<br/>{a1}：{c1}'
+        },
+        xAxis: {
+          type: 'category',
+          data: regions,
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisTick: { show: false },
+          axisLabel: { color: '#6b8cae', fontSize: 10 }
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        legend: {
+           top: '0',
+           left: 'center',
+           itemWidth: 8,
+           itemHeight: 8,
+           itemGap: 20,
+           textStyle: {
+             color: '#fff',
+             fontSize: 12
+           },
+           data: [
+             { name: '本年营收', itemStyle: { color: '#1890ff' } },
+             { name: '上年营收', itemStyle: { color: '#ffc107' } }
+           ]
+         },
+        series: [
+          {
+            name: '本年营收',
+            type: 'bar',
+            data: salesData,
+            itemStyle: {
+              color: '#1890ff',
+              borderRadius: [2, 2, 0, 0]
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color: '#1890ff',
+              fontSize: 10
+            },
+            barWidth: '16%'
+          },
+          {
+            name: '上年营收',
+            type: 'bar',
+            data: profitData,
+            itemStyle: {
+              color: '#ffc107',
+              borderRadius: [2, 2, 0, 0]
+            },
+             label: {
+              show: true,
+              position: 'top',
+              color: '#ffc107',
+              fontSize: 10
+            },
+            barWidth: '16%'
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.bar = chart
+    },
+    
+    initLineChart() {
+      const chart = echarts.init(this.$refs.lineChart)
+      const dates = ['2019/07/01', '2019/07/02', '2019/07/03', '2019/07/04', '2019/07/05', '2019/07/06', '2019/07/07', '2019/07/08', '2019/07/09', '2019/07/10']
+      const salesData = [1, 3350, 3280, 3420, 3380, 3500, 3450, 3520, 3480, 3550]
+      const profitData = [4, 2950, 2880, 3020, 2980, 3100, 3050, 3120, 3080, 3150]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        grid: {
+          left: '10px',
+          right: '10px',
+          top: '40px',
+          bottom: '15%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: 'rgba(255,255,255,0.2)',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: '{b}<br/>{a0}：{c0}<br/>{a1}：{c1}'
+        },
+        xAxis: {
+          type: 'category',
+          data: dates,
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisTick: { show: false },
+          axisLabel: { color: '#fff', fontSize: 12 }
+        },
+        legend: {
+          top: '10px',
+          left: 'center',
+          itemWidth: 8,
+          itemHeight: 8,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          },
+          data: ['销售额', '毛利']
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: { 
+            show: false  // 关闭横向网格线（关键）
+          },  
+          axisLabel: { color: '#fff', fontSize: 12 }
+        },
+        series: [
+          {
+            type: 'line',
+            name: '销售额',
+            data: salesData,
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(24, 144, 255, 0.1)' },
+                  { offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
+                ]
+              }
+            },
+            itemStyle: { color: '#1890ff' },
+            lineStyle: { width: 2 },
+            symbol: 'circle',
+            symbolSize: 0
+          },
+          {
+            type: 'line',
+            name: '毛利',
+            data: profitData,
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(24, 144, 255, 0.1)' },
+                  { offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
+                ]
+              }
+            },
+            itemStyle: { color: '#ff4d4f' },
+            lineStyle: { width: 2 },
+            symbol: 'circle',
+            symbolSize: 0
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.line = chart
+    },
+    
+    initProductBarChart() {
+      const chart = echarts.init(this.$refs.productBarChart)
+      const products = ['胶囊', '片剂', '针', '14', '4', '粉剂', '2#', '4#', '8#', '9#', '10#']
+      const values = [50, 80, 45, 120, 90, 150, 200, 280, 320, 380, 520]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        grid: {
+          left: '20px',
+          right: '10px',
+          top: '20px',
+          bottom: '0',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: 'rgba(255,255,255,0.2)',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: '{b}<br/>{a0}：{c0}'
+        },
+        xAxis: {
+          type: 'category',
+          data: products,
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisTick: { show: false },
+          axisLabel: { color: '#fff', fontSize: 12 }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisLabel: { color: '#fff', fontSize: 12 },
+          splitLine: { 
+            show: true,  // 显示横线
+            lineStyle: { color: 'rgba(107, 140, 174, 0.2)' },
+            
+          }
+        },
+        series: [{
+          type: 'bar',
+          name: '销售量',
+          stack: 'a',
+          data: values,
+          itemStyle: {
+            color: '#1890ff',
+            borderRadius: [2, 2, 0, 0]
+          },
+          barWidth: '10%'
+        },
+        {
+          type: 'line',
+          name: '销售量',
+          data: [null,null,null, 120, 90, 150, 200, 280, 320, 380, 520],
+          itemStyle: {
+            color: '#C93536',
+          },
+          lineStyle: { 
+            type: 'dashed',  // 虚线（关键）
+            width: 1
+          },  
+        }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.productBar = chart
+    },
+    
+    initProductLineChart() {
+      const chart = echarts.init(this.$refs.productLineChart)
+      const hours = ['0','1','2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '18', '24']
+      const data1 = [20, 45, 65, 80, 95, 85, 70, 55, 45, 50, 60, 75, 85, 90, 88, 80, 70, 60, 50, 45, 40, 35, 30, 25]
+      const data2 = [15, 30, 45, 55, 70, 65, 55, 45, 40, 42, 50, 62, 72, 78, 75, 68, 58, 48, 42, 38, 35, 32, 28, 22]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        grid: {
+          left: '10px',
+          right: '10px',
+          top: '30px',
+          bottom: '0',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: 'rgba(255,255,255,0.2)',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: '{b}<br/>{a0}：{c0}<br/>{a1}：{c1}'
+        },
+        xAxis: {
+          type: 'category',
+          data: hours,
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisTick: { show: false },
+          axisLabel: { color: '#fff', fontSize: 12 }
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        series: [
+          {
+            type: 'line',
+            name: '销售额',
+            data: data1,
+            itemStyle: { color: '#1890ff' },
+            lineStyle: { width: 2 },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(24,144,255, 0.3)' },
+                  { offset: 1, color: 'rgba(24,144,255, 0.05)' }
+                ]
+              }
+            },
+            symbol: 'none'
+          },
+          {
+            type: 'line',
+            name: '销售量',
+            data: data2,
+            itemStyle: { color: '#ff4d4f' },
+            lineStyle: { width: 2 },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(255,77,79, 0.3)' },
+                  { offset: 1, color: 'rgba(255,77,79, 0.05)' }
+                ]
+              }
+            },
+            symbol: 'none'
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.productLine = chart
+    },
+    
+    initTrendChart() {
+      const chart = echarts.init(this.$refs.trendChart)
+      const days = ['1', '2', '3', '4', '5', '6', '7']
+      const data1 = [350, 200, 150, 100, 450, 200, 150]
+      const data2 = [200, 220, 180, 100, 250, 200, 125]
+      
+      const option = {
+        backgroundColor: 'transparent',
+        grid: {
+          left: '10px',
+          right: '10px',
+          top: '20px',
+          bottom: '10px',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: 'rgba(255,255,255,0.2)',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: '{b}<br/>{a0}：{c0}<br/>{a1}：{c1}'
+        },
+        xAxis: {
+          type: 'category',
+          data: days,
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisTick: { show: false },
+          axisLabel: { color: '#fff', fontSize: 12 }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { lineStyle: { color: 'rgba(107, 140, 174, 0.3)' } },
+          axisLabel: { color: '#fff', fontSize: 12 },
+          splitLine: { 
+            show: true,  // 显示横线
+            lineStyle: { color: 'rgba(107, 140, 174, 0.2)' },
+            
+          }
+        },
+        series: [
+          {
+            type: 'line',
+            name: '销售额',
+            data: data1,
+            itemStyle: { color: '#20AFB1' },
+            lineStyle: { width: 2 },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(32,175,177, 0.3)' },
+                  { offset: 1, color: 'rgba(32,175,177, 0.05)' }
+                ]
+              }
+            },
+            symbol: 'circle',
+            symbolSize: 4
+          },
+          {
+            type: 'line',
+            name: '销售量',
+            data: data2,
+            itemStyle: { color: '#ff9f43' },
+            lineStyle: { width: 2 },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(255, 159, 67, 0.3)' },
+                  { offset: 1, color: 'rgba(255, 159, 67, 0.05)' }
+                ]
+              }
+            },
+            symbol: 'circle',
+            symbolSize: 4
+          }
+        ]
+      }
+      chart.setOption(option)
+      this.charts.trend = chart
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sales-dashboard {
+  width: 100%;
+  height: 100%;
+  background: #1a2234;
+  position: relative;
+  padding: 15px;
+  padding-top: 0;
+  box-sizing: border-box;
+  color: #fff;
+  overflow: hidden;
+}
+
+.background-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #15181B;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.dashboard-header {
+  padding: 10px 20px 15px;
+  margin: 0 -15px;
+  margin-bottom: 15px;
+  position: relative;
+  background-color: #202128;
+  z-index: 10;
+  text-align: left;
+  font-size: 24px;
+}
+
+.header-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+  margin: 0;
+}
+
+.dashboard-content {
+  display: flex;
+  gap: 15px;
+ height: 100%;
+  position: relative;
+  z-index: 10;
+}
+
+.left-panel {
+  width: 318px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.center-panel {
+  width: 830px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.right-panel {
+  width: 730px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.panel-card {
+  background: #202128;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(107, 140, 174, 0.15);
+}
+
+.card-title {
+  font-size: 16px;
+  color: #fff;
+}
+
+.card-legend {
+  display: flex;
+  gap: 8px;
+  font-size: 10px;
+}
+
+
+.overview-content {
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ring-main {
+  position: relative;
+  height: 160px;
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.main-ring {
+  width: 100%;
+  height: 100%;
+}
+
+.ring-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.ring-value {
+  display: block;
+  font-size: 24px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.ring-label {
+  font-size: 10px;
+  color: #6b8cae;
+}
+
+.overview-stats {
+  width: 100%;
+}
+
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  margin-top: 20px;
+  background-color: #25262E;
+  padding: 6px 0;
+}
+
+.stat-label {
+  font-size: 12px;
+  width: 100%;
+  display: block;
+  color: #fff;
+  text-align: center;
+  padding-right: 70px;
+}
+
+.stat-value {
+  font-size: 12px;
+  font-weight: bold;
+  color: #fff;
+  flex: 1;
+  span{
+    font-size: 22px;
+  }
+}
+.stat-wrapper{
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.stat-bar {
+  height: 4px;
+  background: rgba(107, 140, 174, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+  flex: 1.8;
+}
+
+.bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #1890ff, #73d5ff);
+  border-radius: 2px;
+}
+
+.pie-content {
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.pie-chart {
+  width: 100%;
+  height: 140px;
+}
+
+.legend-text {
+  flex: 1;
+  font-size: 11px;
+  color: #6b8cae;
+}
+
+.legend-value {
+  font-size: 11px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.form-content {
+  padding: 15px;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  
+}
+
+.form-label {
+  font-size: 11px;
+  color: #fff;
+  width: 120px;
+  font-size: 14px;
+  text-align: left;
+}
+
+.form-dots {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+}
+
+.form-dots .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(107, 140, 174, 0.3);
+}
+
+.form-dots .dot.active {
+  background: #1890ff;
+  box-shadow: 0 0 3px 3px rgba(24,144,255, 0.4) !important;
+}
+.form-dots .dot:nth-of-type(1).active {
+  background: #E23C62;
+   box-shadow: 0 0 3px 3px rgba(226, 60, 98, 0.4) !important;
+}
+.form-dots .dot:nth-of-type(3).active {
+  background: #F5B500;
+  box-shadow: 0 0 3px 3px rgba(245,181,0, 0.4) !important;
+}
+.form-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 20px;
+  margin-top: 6px;
+  text-align: left;
+}
+
+.map-card {
+  flex: 1;
+  min-height: 474px;
+}
+
+.map-container {
+  width: 100%;
+  height: 450px;
+}
+
+.map-legend {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  padding: 10px;
+  border-top: 1px solid rgba(107, 140, 174, 0.15);
+}
+
+.map-legend .legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.map-legend .legend-color.blue { background: #1890ff; }
+.map-legend .legend-color.yellow { background: #ffc107; }
+.map-legend .legend-text { font-size: 11px; color: #6b8cae; }
+
+.bar-card {
+  height: 200px;
+  margin-top: -20px;
+}
+
+.bar-container {
+  width: 100%;
+  height: 100%;
+}
+
+.line-card {
+  flex: 1;
+  height: 150px;
+}
+
+.line-container {
+  width: 100%;
+  height: calc(100% - 45px);
+}
+
+.product-card {
+  height: 328px;
+}
+
+.product-bar {
+  width: 100%;
+  height:280px;
+}
+
+.product-line {
+  width: 100%;
+  height: calc(100% - 45px);
+}
+
+.trend-container {
+  width: 100%;
+  height: calc(100% - 45px);
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/bigscreenDesigner/viewer/saleStatic.vue b/src/views/bigscreenDesigner/viewer/saleStatic.vue
new file mode 100644
index 0000000..83754df
--- /dev/null
+++ b/src/views/bigscreenDesigner/viewer/saleStatic.vue
@@ -0,0 +1,259 @@
+<!--
+ * @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 :dashboard="dashboard"></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/saleStatic";
+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 = 'salesAnalysis2026';
+        const { code, data } = await detailDashboard(reportCode);
+        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>