From 53b7d11ad98b2e07387417d3ca0e573e698d04d9 Mon Sep 17 00:00:00 2001
From: chenxu <499889298@qq.com>
Date: Wed, 29 Apr 2026 09:54:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=89=8D=E7=AB=AF=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 GZIP_COMPRESSION_GUIDE.md                     |  244 ++++
 config/dev.env.js                             |    4 +-
 package.json                                  |   12 +-
 src/api/bigscreen.js                          |   34 +-
 src/api/dict-data.js                          |    2 +-
 src/api/login/index.js                        |    2 +-
 src/api/upload.js                             |    4 +-
 src/assets/images/one.png                     |  Bin 0 -> 831 bytes
 src/assets/images/three.png                   |  Bin 0 -> 649 bytes
 src/assets/images/two.png                     |  Bin 0 -> 836 bytes
 src/components/AnjiPlus/anji-autocomplete.vue |    2 +-
 src/components/AnjiPlus/anji-countryCity.vue  |    4 +-
 .../AnjiPlus/anji-crud/anji-crud.vue          |    2 +-
 .../AnjiPlus/anji-crud/edit-form.vue          |    6 +-
 src/components/AnjiPlus/anji-crud/edit.vue    |   40 +-
 src/components/AnjiPlus/anji-upload.vue       |   10 +-
 src/components/Dictionary/index.vue           |    2 +-
 src/components/FlvVideo.vue                   |    2 +-
 src/components/configForm.vue                 |    6 +-
 src/components/eachForm.vue                   |    4 +-
 src/main.js                                   |    4 +-
 src/mixins/queryform.js                       |   43 +-
 src/store/modules/designer.js                 |    8 +-
 src/utils/compress.js                         |  112 ++
 src/utils/revoke.js                           |   11 +
 src/utils/screen.js                           |    2 +-
 src/utils/screenMixins.js                     |   94 +-
 .../accessRole/components/RoleAuthority.vue   |    2 +-
 .../designer/components/componentLinkage.vue  |   90 +-
 .../designer/components/customUpload.vue      |    2 +-
 .../designer/components/drillDrownSetting.vue |   42 +-
 .../designer/components/dynamicComponents.vue |   15 +-
 .../designer/components/dynamicForm.vue       |   59 +-
 .../designer/components/imageSelect.vue       |    4 +-
 .../bigscreenDesigner/designer/index.vue      |  285 +++-
 .../designer/linkageLogic.js                  |  153 ++-
 .../tools/configure/form/widget-form-time.js  |    2 +
 .../scatterCharts/widget-quadrant-scatter.js  | 1198 ++++++++++++++++
 .../configure/texts/widget-pagination.js      |  260 ++++
 .../tools/configure/texts/widget-table.js     |  133 +-
 .../bigscreenDesigner/designer/tools/main.js  |    4 +
 .../widget/bar/widgetBarCompareChart.vue      |    7 +
 .../widget/bar/widgetBarDoubleYaxisChart.vue  |    7 +
 .../widget/bar/widgetBarStackChart.vue        |    7 +
 .../bar/widgetBarStackMoreShowChart.vue       |    7 +
 .../designer/widget/bar/widgetBarchart.vue    |    7 +
 .../bar/widgetGradientColorBarchart.vue       |    7 +
 .../barline/widgetBarLineSingleChart.vue      |    7 +
 .../barline/widgetBarLineStackChart.vue       |    7 +
 .../widget/barline/widgetBarlinechart.vue     |   22 +-
 .../designer/widget/form/widgetButton.vue     |   75 +-
 .../widget/form/widgetFormTime copy.vue       |  128 ++
 .../designer/widget/form/widgetFormTime.vue   |   47 +-
 .../designer/widget/form/widgetSelect.vue     |    7 +
 .../designer/widget/form/widgetTabs copy.vue  |  876 ++++++++++++
 .../designer/widget/form/widgetTabs.vue       |  543 +++++++-
 .../designer/widget/funnel/widgetFunnel.vue   |    7 +
 .../designer/widget/heatmap/widgetHeatmap.vue |    7 +
 .../widget/line/widgetLineCompareChart.vue    |    7 +
 .../widget/line/widgetLineStackChart.vue      |    7 +
 .../designer/widget/line/widgetLinechart.vue  |   21 +-
 .../widget/map/widgetAirBubbleMap.vue         |   21 +
 .../designer/widget/map/widgetBarMap.vue      |   21 +
 .../designer/widget/map/widgetChinaMap.vue    |    9 +-
 .../designer/widget/map/widgetGlobalMap.vue   |   11 +-
 .../designer/widget/map/widgetLineMap.vue     |   21 +
 .../designer/widget/percent/widgetGauge.vue   |    7 +
 .../percent/widgetPiePercentageChart.vue      |    7 +
 .../widget/pie/widgetPieNightingaleRose.vue   |    7 +
 .../designer/widget/pie/widgetPiechart.vue    |    7 +
 .../widget/scale/widgetScaleHorizontal.vue    |    7 +
 .../widget/scale/widgetScaleVertical.vue      |    7 +
 .../widget/scatter/widgetQuadrantScatter.vue  | 1181 ++++++++++++++++
 .../designer/widget/temp.vue                  |   10 +-
 .../designer/widget/texts/widgetCalendar.vue  |   26 +-
 .../designer/widget/texts/widgetImage.vue     |    2 +-
 .../designer/widget/texts/widgetMarquee.vue   |   12 +-
 .../widget/texts/widgetPagination.vue         |  412 ++++++
 .../widget/texts/widgetTable copy 2.vue       | 1224 +++++++++++++++++
 .../widget/texts/widgetTable copy.vue         |  713 ++++++++++
 .../designer/widget/texts/widgetTable.vue     | 1119 +++++++++++++--
 .../designer/widget/texts/widgetText.vue      |    7 +-
 .../designer/widget/texts/widgetTime.vue      |   25 +-
 .../designer/widget/widget.vue                |    8 +-
 .../widget/wordcloud/widgetWordCloud.vue      |    7 +
 .../viewer/drillDrownView.vue                 |   11 +
 src/views/bigscreenDesigner/viewer/index.vue  |  213 ++-
 src/views/excelreport/designer/drag.js        |    2 +-
 src/views/excelreport/designer/index.vue      |    8 +-
 src/views/layout/components/Navbar.vue        |    4 +-
 src/views/login.vue                           |   28 +-
 .../reportManage/components/copyDialog.vue    |    2 +-
 src/views/reportManage/index.vue              |    2 +-
 .../resultset/components/EditDataSet.vue      |    2 +-
 .../screenDesigner/components/contentMenu.vue |    2 +-
 .../components/customUpload.vue               |    2 +-
 .../components/dynamicComponents.vue          |   15 +-
 .../screenDesigner/components/dynamicForm.vue |   60 +-
 src/views/screenDesigner/index备份.vue        |    4 +-
 .../screenDesigner/layout/middleScreen.vue    |    2 +-
 src/views/screenDesigner/util/screen.js       |    2 +-
 .../widget/texts/widgetTable.vue              |   30 +-
 .../widget/texts/widgetTime.vue               |    2 +-
 103 files changed, 9437 insertions(+), 531 deletions(-)
 create mode 100644 GZIP_COMPRESSION_GUIDE.md
 create mode 100644 src/assets/images/one.png
 create mode 100644 src/assets/images/three.png
 create mode 100644 src/assets/images/two.png
 create mode 100644 src/utils/compress.js
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/scatterCharts/widget-quadrant-scatter.js
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-pagination.js
 create mode 100644 src/views/bigscreenDesigner/designer/widget/form/widgetFormTime copy.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/form/widgetTabs copy.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/scatter/widgetQuadrantScatter.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/texts/widgetPagination.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy 2.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy.vue

diff --git a/GZIP_COMPRESSION_GUIDE.md b/GZIP_COMPRESSION_GUIDE.md
new file mode 100644
index 0000000..876db35
--- /dev/null
+++ b/GZIP_COMPRESSION_GUIDE.md
@@ -0,0 +1,244 @@
+# 大屏保存 Gzip 压缩 - 后端处理示例
+
+## 前端实现说明
+
+当前端保存数据超过 100KB 时，会自动启用 Gzip 压缩，请求格式如下：
+
+### 压缩数据请求格式
+```json
+{
+  "compressed": true,
+  "content": "<base64 编码的 Gzip 压缩数据>"
+}
+```
+
+### 请求头
+```
+Content-Encoding: gzip
+X-Data-Original-Size: 123456
+X-Data-Compressed-Size: 34567
+Authorization: <token>
+```
+
+## Java Spring Boot 后端处理示例
+
+### Controller 层
+```java
+@PostMapping("/reportDashboard")
+public Result saveDashboard(@RequestBody Map<String, Object> params,
+                           @RequestHeader(value = "Content-Encoding", required = false) String encoding,
+                           @RequestHeader(value = "X-Data-Original-Size", required = false) Integer originalSize,
+                           @RequestHeader(value = "X-Data-Compressed-Size", required = false) Integer compressedSize) {
+    
+    try {
+        DashboardData dashboardData;
+        
+        // 判断是否为压缩数据
+        if ("gzip".equalsIgnoreCase(encoding) && params.containsKey("compressed")) {
+            Boolean isCompressed = (Boolean) params.get("compressed");
+            if (isCompressed != null && isCompressed) {
+                String compressedContent = (String) params.get("content");
+                // 解压数据
+                dashboardData = gzipDecompress(compressedContent);
+                
+                log.info("接收压缩数据：原始 {} KB -> 压缩后 {} KB", 
+                    originalSize != null ? originalSize / 1024.0 : 0,
+                    compressedSize != null ? compressedSize / 1024.0 : 0);
+            } else {
+                // 未压缩数据直接转换
+                dashboardData = convertToDashboard(params);
+            }
+        } else {
+            // 普通数据直接处理
+            dashboardData = convertToDashboard(params);
+        }
+        
+        // 保存业务逻辑
+        return dashboardService.save(dashboardData);
+        
+    } catch (Exception e) {
+        log.error("保存大屏失败", e);
+        return Result.error("保存失败：" + e.getMessage());
+    }
+}
+
+/**
+ * Gzip 解压工具方法
+ */
+private DashboardData gzipDecompress(String base64Data) throws IOException {
+    // Base64 解码
+    byte[] compressed = Base64.getDecoder().decode(base64Data);
+    
+    // Gzip 解压
+    ByteArrayOutputStream out = new ByteArrayOutputStream();
+    try (GZIPInputStream in = new GZIPInputStream(new ByteArrayInputStream(compressed))) {
+        byte[] buffer = new byte[1024];
+        int len;
+        while ((len = in.read(buffer)) > 0) {
+            out.write(buffer, 0, len);
+        }
+    }
+    
+    // 转回字符串
+    String json = out.toString("UTF-8");
+    
+    // 解析为对象
+    return JSON.parseObject(json, DashboardData.class);
+}
+
+/**
+ * 转换为 Dashboard 对象
+ */
+private DashboardData convertToDashboard(Map<String, Object> params) {
+    // 根据实际业务对象转换
+    DashboardData data = new DashboardData();
+    data.setReportCode((String) params.get("reportCode"));
+    // ... 其他字段转换
+    return data;
+}
+```
+
+### 实体类示例
+```java
+@Data
+public class DashboardData {
+    private String reportCode;
+    private DashboardInfo dashboard;
+    private List<WidgetInfo> widgets;
+    
+    @Data
+    public static class DashboardInfo {
+        private String title;
+        private String width;
+        private String height;
+        private String backgroundColor;
+        private String backgroundImage;
+        private Integer refreshSeconds;
+    }
+    
+    @Data
+    public static class WidgetInfo {
+        private String type;
+        private WidgetValue value;
+        
+        @Data
+        public static class WidgetValue {
+            private SetupInfo setup;
+            private PositionInfo position;
+            private DataInfo data;
+        }
+    }
+}
+```
+
+## Node.js 后端处理示例
+
+```javascript
+const zlib = require('zlib');
+const util = require('util');
+const gunzip = util.promisify(zlib.gunzip);
+
+app.post('/reportDashboard', async (req, res) => {
+  try {
+    let dashboardData;
+    const encoding = req.headers['content-encoding'];
+    
+    if (encoding === 'gzip' && req.body.compressed) {
+      // 解压数据
+      const compressedBuffer = Buffer.from(req.body.content, 'base64');
+      const uncompressedBuffer = await gunzip(compressedBuffer);
+      const jsonString = uncompressedBuffer.toString('utf8');
+      dashboardData = JSON.parse(jsonString);
+      
+      console.log(`接收压缩数据：原始 ${req.headers['x-data-original-size'] / 1024} KB -> 压缩后 ${req.headers['x-data-compressed-size'] / 1024} KB`);
+    } else {
+      // 普通数据
+      dashboardData = req.body;
+    }
+    
+    // 保存业务逻辑
+    await saveDashboard(dashboardData);
+    
+    res.json({ code: '200', message: '保存成功' });
+  } catch (error) {
+    console.error('保存失败:', error);
+    res.status(500).json({ code: '500', message: '保存失败' });
+  }
+});
+```
+
+## Python Flask 处理示例
+
+```python
+import gzip
+import base64
+import json
+from flask import request, jsonify
+
+@app.route('/reportDashboard', methods=['POST'])
+def save_dashboard():
+    try:
+        data = request.get_json()
+        encoding = request.headers.get('Content-Encoding')
+        
+        if encoding == 'gzip' and data.get('compressed'):
+            # 解压数据
+            compressed_data = base64.b64decode(data['content'])
+            decompressed_data = gzip.decompress(compressed_data)
+            dashboard_data = json.loads(decompressed_data)
+            
+            original_size = request.headers.get('X-Data-Original-Size')
+            compressed_size = request.headers.get('X-Data-Compressed-Size')
+            print(f"接收压缩数据：原始 {int(original_size)/1024:.2f} KB -> 压缩后 {int(compressed_size)/1024:.2f} KB")
+        else:
+            dashboard_data = data
+        
+        # 保存业务逻辑
+        result = save_to_database(dashboard_data)
+        
+        return jsonify({'code': '200', 'message': '保存成功'})
+    except Exception as e:
+        print(f"保存失败：{e}")
+        return jsonify({'code': '500', 'message': '保存失败'}), 500
+```
+
+## Nginx 配置建议
+
+如果使用了 Nginx 反向代理，需要调整请求体大小限制：
+
+```nginx
+server {
+    # ... 其他配置
+    
+    # 允许最大请求体大小（根据实际需求调整）
+    client_max_body_size 50M;
+    
+    # 超时时间设置
+    client_body_timeout 120s;
+    proxy_read_timeout 120s;
+}
+```
+
+## 测试验证
+
+### 使用 curl 测试压缩数据
+```bash
+# 构造测试数据
+DATA='{"compressed":true,"content":"H4sIAAAAAAAAA..."}'
+
+# 发送请求
+curl -X POST http://localhost:8080/reportDashboard \
+  -H "Content-Type: application/json" \
+  -H "Content-Encoding: gzip" \
+  -H "X-Data-Original-Size: 123456" \
+  -H "X-Data-Compressed-Size: 34567" \
+  -d "$DATA"
+```
+
+## 注意事项
+
+1. **字符编码**：确保前后端都使用 UTF-8 编码
+2. **Base64 安全**：考虑使用 URL安全的 Base64 编码变体
+3. **错误处理**：解压失败时返回明确的错误信息
+4. **日志记录**：记录压缩/解压的大小信息便于排查问题
+5. **性能监控**：监控解压耗时，避免性能瓶颈
diff --git a/config/dev.env.js b/config/dev.env.js
index c1d675c..28237ff 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -4,8 +4,8 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://127.0.0.1:48090"'
+  // BASE_API: '"http://127.0.0.1:48090"'
 
-  // BASE_API: '"http://192.168.1.241:8080/prod-api"'
+  BASE_API: '"http://192.168.1.241:8080/prod-api"'
 
 })
diff --git a/package.json b/package.json
index d18c1c7..474b802 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,12 @@
   "description": "report-ui",
   "author": "beliefteam",
   "scripts": {
-    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
-    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env NODE_ENV=production node build/build.js",
-    "build:dev": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env NODE_ENV=development node build/build.js",
-    "build:test": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env NODE_ENV=testing node build/build.js",
-    "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env NODE_ENV=production node build/build.js"
+    "build": "cross-env NODE_ENV=production node build/build.js",
+    "build:dev": "cross-env NODE_ENV=development node build/build.js",
+    "build:test": "cross-env NODE_ENV=testing node build/build.js",
+    "build:prod": "cross-env NODE_ENV=production node build/build.js"
   },
   "dependencies": {
     "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
@@ -19,6 +19,7 @@
     "chokidar": "^3.5.2",
     "codemirror": "^5.58.1",
     "crypto-js": "^3.1.9-1",
+    "decimal.js": "^10.6.0",
     "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
@@ -32,6 +33,7 @@
     "monaco-editor": "^0.28.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "pako": "^2.1.0",
     "qrcodejs2": "0.0.2",
     "sortablejs": "^1.10.2",
     "uninstall": "0.0.0",
diff --git a/src/api/bigscreen.js b/src/api/bigscreen.js
index 69555fc..b0a7881 100644
--- a/src/api/bigscreen.js
+++ b/src/api/bigscreen.js
@@ -1,13 +1,45 @@
 import request from '@/utils/request'
 import { getShareToken, getToken } from "@/utils/auth";
 import axios from 'axios';
+import { gzipCompress } from '@/utils/compress';
 
 // 保存大屏设计
 export function insertDashboard(data) {
+  // 计算原始数据大小
+  const originalSize = JSON.stringify(data).length
+  console.log('[API] insertDashboard - 原始数据大小:', originalSize);
+  
+  // 始终启用压缩
+  console.log('[API] 启用 Gzip 压缩...');
+  const compressedData = gzipCompress(data)
+  
+  if (!compressedData) {
+    console.error('[API] 压缩失败，compressedData 为 null');
+    // 压缩失败时，尝试不压缩发送
+    return request({
+      url: 'reportDashboard',
+      method: 'post',
+      data,
+      timeout: 120000
+    })
+  }
+  
+  console.log('[API] 压缩后数据长度:', compressedData.length);
+  
   return request({
     url: 'reportDashboard',
     method: 'post',
-    data,
+    data: {
+      compressed: true,
+      content: compressedData
+    },
+    headers: {
+      'Content-Encoding': 'gzip',
+      'X-Data-Original-Size': originalSize,
+      'X-Data-Compressed-Size': compressedData.length,
+      'Authorization': getToken()
+    },
+    timeout: 120000
   })
 }
 
diff --git a/src/api/dict-data.js b/src/api/dict-data.js
index 3446780..a2005ff 100644
--- a/src/api/dict-data.js
+++ b/src/api/dict-data.js
@@ -66,7 +66,7 @@ export function getAllDict() {
 export function initDictToLocalstorage(callback) {
   getAllDict().then((res) => {
     if (res.code != 200) {
-      console.error('初始化数据字典到local storage失败: ' + res.message)
+      // console.error('初始化数据字典到local storage失败: ' + res.message)
       return
     }
 
diff --git a/src/api/login/index.js b/src/api/login/index.js
index da1bdd4..fc96851 100644
--- a/src/api/login/index.js
+++ b/src/api/login/index.js
@@ -25,7 +25,7 @@ export function logout () {
 
 
 export function outlogcas (data) {
-  console.log(data)
+  // console.log(data)
   return request({
     url: 'accessUser/outlogcas',
     method: 'post',
diff --git a/src/api/upload.js b/src/api/upload.js
index 0bb4d08..30df4ca 100644
--- a/src/api/upload.js
+++ b/src/api/upload.js
@@ -30,13 +30,13 @@ service.interceptors.response.use(
         type: 'error',
         duration: 3 * 1000,
       }).then(() => {
-        console.log(1)
+        // console.log(1)
         sessionStorage.clear();
         localStorage.clear();
         // location.reload();
         window.location.href = "/";
       }).catch(err => {
-        console.log(2)
+        // console.log(2)
       })
     }else if(res.repCode == "3100" || res.repCode == "3101"){
       return res;
diff --git a/src/assets/images/one.png b/src/assets/images/one.png
new file mode 100644
index 0000000000000000000000000000000000000000..b143039293e468690fad4a93c83bda7fa26184d1
GIT binary patch
literal 831
zcmV-F1Hk-=P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZr=}AOERCt`_n?X+7Koo|*7Y}UfBjgBh1K78UvO@?&
zxIsAq;RKWu1VmM_vk=|W8<Zn(1F~+Mye>!}3Q6qPGxm)6mxMg$`xwT~n;AKNP{l!R
zzlpf0YdfvFKS13vb$@_7IZSk?Wf%zTlq@yW30G#qkL#`s2|>U?qV34=2*ei3#nR$@
zEPMgZSSG-?|J`jvNA1ABN9fH2eAYSOO{n(*{-xZztna;myRJOzgbP>oy`KaDes-h}
z^w<4PFVT2xc-geJ_ah*0##>w#d0!(09RJn<O0UR!gBMT+p3nu9g(qYIS?~%^<CNX3
zIzbA^18-9He|6<4t5$FV^1{!)>|`Y<0k+`@Nq`G@LJ{B!o)84MgvWOQmf+Wl@m7GX
zzr4bSTjBiAjBgzvED!rM<#fyNcdiLCoOOc$8Vx_oL89$#Lx*XD<*qBwv)8;5;CjMa
z7H<U90go>N>Vn6IyTH-C_UnSj2LU3Sta{BgJU$3eS^l6>1w1|oVDho=UllyQOoB)E
z+85yjA=U|3(>8b|sZ2mG(Rdtjj?hCHs&Z2$=&DpApqFTz8Xgyyw{^lr-4dM70juDr
zSMRvKepZ|cSPKt`T3+@p5N86i-~m**adrK?aWV(wfk(K${VJy}uD?mF3kV4w+X6y^
zXHmeq#z9s>glAsB(Sz;@B=fDKQOa%}38BKXutVf>VJli}3<F?)U4hWx7k9?K-3FHd
zWNl0g4Srd&o&#1ss5Akdq7On%fv1RoCc(3*fTqE-iGU`;lUG1f;mIT5Fwvc+!josK
zZ1lRYxH<vDQ@S4zI6S2UGytB$0vZBOQ328DeS<;hDRf?7Y<M|-Sb5xV$m=%MvphRB
z>yC@2XbkK{5y?TKZ3p$O#$8)nXm3UAIje6e^8&0dL`n-M$8v4veGX8r5x!fjJ#3Ba
zo%nKf#`$doL}M<dr?X0r1cg7Nl-(+px68(h<?%dmJ_0^#{sUDDo4c~#QHcNm002ov
JPDHLkV1iw<bZP(q

literal 0
HcmV?d00001

diff --git a/src/assets/images/three.png b/src/assets/images/three.png
new file mode 100644
index 0000000000000000000000000000000000000000..168deea077391bcfbcf1e5a7c7776f686a693342
GIT binary patch
literal 649
zcmV;40(Sk0P)<h;3K|Lk000e1NJLTq0024w002G+1^@s6dMXG$00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrGf6~2RA_<i+Rt&*KorOE?~|pR)d8l1bbuQm!M6+(
z4@w2JU{_$MAZAEra#Jt`kPb)(NeP^h<;TU4M3VnWyK9Zu-*L6}?q_t+Tj>c7bN)@o
zB76W?!sqJ~`Q&PCakbF-cO3})cs`abczrXJM;Ge{E*1d@gjdC}qlh=o)_1kgq2r-l
zi-&eC9@@2dXxHMQU5kfyEgssncxcxWuDkF))#D?0oDJod+bz{gl4|@L`s?;wx}#^Q
z_D6Gl=!N{uLmozRO`PqvW=3;O@{oUfK1;P<oKu2EAyb6E6JvzSHe*L~O%N`Dcr_G9
zA=Bc#5>%gl@RXKfpCPxV1Qq2=<;<30HzAd>p#=SUA~Rhwsr>hrU^gO{Os?L_ZE?Kv
z@p5%4<F;bAB2Q&pb#3i)w2j!hNVXLWZNfG|vP)&u25eI#yOw~5#F{{|Ppx|htSKb>
z7WFQ%CXv)Ry|}=dMpE~fW)o`zNt5%a4XiCBO%L8Cu{M#Ic*9@<Ya5BlW{r(UCgnl`
zRF&C_#f3zdh;1aMyHd8C4{w2Yg|RzeP&L^k5*zI|`y7VX#WWIIeMU{NHjvnCsH%gt
zg~WE}*gjaBNL;kY?Si$9#8oe#i|6FFIBR;W!n#7@63Xf`M=#<dK$bCa)!FIe<KyGw
z<KweaBuO>SBc`g9zWa9}BHZ^fCSe|uq70nYf-a*B@`yM9jt{*T>rs+G;eRNs?}EjG
j;p%N%C!=tmEx7mtm5yU<*Vnz*00000NkvXXu0mjfBStHk

literal 0
HcmV?d00001

diff --git a/src/assets/images/two.png b/src/assets/images/two.png
new file mode 100644
index 0000000000000000000000000000000000000000..80dddd88e5fb038ff18968dd37a5dfbd40a1ed7f
GIT binary patch
literal 836
zcmV-K1H1f*P)<h;3K|Lk000e1NJLTq0024w002J-1^@s6v3A>=00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZr?ny*JRA_<io569~KomgVmr<^92UZ8c6@=VvV{RN^
zLMm`v0j2_*3W5Wk@r|)506GY%AW8?mi|FSNobgPguo4nl$-E=_EB-^f%U@|FtZ7fx
zb8B2Hcmj3GjN;?42m%K8E%5;ap!=vjglpii=o~ZV3FUHpCL>v2$!`^ueC8=waqPG*
z{R&G09J(%jhmc0mndFTs^%{Z~c~lsw^1zCxooAK;$K^<s9{hXZ1nRYzc8l?ee9Aw)
z%(?B(bRH$^L`91*+DTeDpfHU3JW@0a_?de~c@Z<zB1Nl6+!&3eGt+azVk;--fFEB^
z<TgngW6|DJ4_7tj0`;Q%fhu%n`gw9H$EIzJQx094Hr2oa_0CMsP2-J4HT+W-+k_*$
zHI6k641Tdd@l$7&HHz;9JeY<XkJ0;<`0c5Fa9#SUG1b(L5Mddt7>-+FT(u>db=PaV
zGFD7Q&!4+vFIqKTjcB6DsQairpdY)2-4%)-!tm})ZcLjPU(wD?8wg(tmjn<zN4RcJ
z)i@VpQ3u|oPAn(hxV$%wHLrD7d{3QGPK0W{ZZ;O3v}B<ngVb4NjD`#*r?N1OPc#`#
znsU{f>dmU)RZI<*qXgw2X%^n=FEIWkZQ<4YkM2dQ#$L2)>_w}_UbJfLMXN^QS~pMH
zQ}tYzi>>xl#N2bXMzk~2hQJ)n=ls@mT@gO!d46j|bA8OA_|}N#NeDx0#%L4@OA(eE
zg1o3*D1Q%!4DOn8W3?zD596j>#T{->)pHM+$33~#kilf#zO-HUg=FN|ekn;=MUzTW
zM$t5qlub0PBxMraMv}6KZYxO{M6-~@rlLLyIpD~Z?Ip2Y6s2cU444qzb!&F-u}>;V
z?8aoc$SkXjNh8UBx^AO8)42$v9d1(I*o)Fi0@M_iF}pS!sx-usQM`>LfU|KKWC7bs
z0ysgy0PKC`BMV6Y=e{LA%B796SxNHz5*{yZHLB7O@Ctp6E5(MXP5cH0z#4;Ik9orY
O0000<MNUMnLSTX~#(7Zy

literal 0
HcmV?d00001

diff --git a/src/components/AnjiPlus/anji-autocomplete.vue b/src/components/AnjiPlus/anji-autocomplete.vue
index de90fc5..cdde3b2 100644
--- a/src/components/AnjiPlus/anji-autocomplete.vue
+++ b/src/components/AnjiPlus/anji-autocomplete.vue
@@ -83,7 +83,7 @@ export default {
       }
       let reg = /\$\{[a-zA-Z0-9]*\}/g;
       let list = this.label.match(reg);
-      console.log(list);
+      // console.log(list);
       // ["${id}", "${text}"]
       let result = this.label;
       for (let i = 0; i < list.length; i++) {
diff --git a/src/components/AnjiPlus/anji-countryCity.vue b/src/components/AnjiPlus/anji-countryCity.vue
index f98a346..14a3391 100644
--- a/src/components/AnjiPlus/anji-countryCity.vue
+++ b/src/components/AnjiPlus/anji-countryCity.vue
@@ -44,7 +44,7 @@ export default {
         return
       }
       const country = this.countryCity.find((item) => item.id === value[0])
-      console.log(country)
+      // console.log(country)
       if (!country || !country.children) {
         this.getData().then((list) => {
           this.getData({ country: value[0], level: 1 }).then((list) => {
@@ -80,7 +80,7 @@ export default {
       return this.$store.dispatch('dict/add_countryCity', params)
     },
     lazyLoad(node, resolve) {
-      console.log(node)
+      // console.log(node)
       const { level, path, data } = node
       if (data && data.children) {
         resolve(data.children)
diff --git a/src/components/AnjiPlus/anji-crud/anji-crud.vue b/src/components/AnjiPlus/anji-crud/anji-crud.vue
index a775667..acc8ec1 100644
--- a/src/components/AnjiPlus/anji-crud/anji-crud.vue
+++ b/src/components/AnjiPlus/anji-crud/anji-crud.vue
@@ -527,7 +527,7 @@ export default {
     } else {
       this.hasCustomButtonInRowMore = false;
     }
-    console.log(`是否有自定义行按钮: ${this.hasCustomButtonInRowMore}`);
+    // console.log(`是否有自定义行按钮: ${this.hasCustomButtonInRowMore}`);
   },
   methods: {
     queryFormFieldSpan(item) {
diff --git a/src/components/AnjiPlus/anji-crud/edit-form.vue b/src/components/AnjiPlus/anji-crud/edit-form.vue
index e4ef73b..7533a7e 100644
--- a/src/components/AnjiPlus/anji-crud/edit-form.vue
+++ b/src/components/AnjiPlus/anji-crud/edit-form.vue
@@ -467,7 +467,7 @@ export default {
                 callback();
               }
             } else {
-              console.log(`提交表单调用新增接口失败：${message}`);
+              // console.log(`提交表单调用新增接口失败：${message}`);
             }
           } else {
             // 当edit-from是作为关联子表的界面，补全关联属性
@@ -482,11 +482,11 @@ export default {
                 callback();
               }
             } else {
-              console.log(`提交表单调用更新接口失败：${message}`);
+              // console.log(`提交表单调用更新接口失败：${message}`);
             }
           }
         } else {
-          console.log("表单校验失败");
+          // console.log("表单校验失败");
         }
       });
     },
diff --git a/src/components/AnjiPlus/anji-crud/edit.vue b/src/components/AnjiPlus/anji-crud/edit.vue
index 191fa02..d4e7b59 100644
--- a/src/components/AnjiPlus/anji-crud/edit.vue
+++ b/src/components/AnjiPlus/anji-crud/edit.vue
@@ -224,7 +224,7 @@ export default {
       });
       // 为主表的编辑表单，渲染上默认值
       this.saveForm = this.deepClone(defaultSaveForm);
-      console.log("编辑框默认值:" + JSON.stringify(this.saveForm));
+      // console.log("编辑框默认值:" + JSON.stringify(this.saveForm));
     },
     handleCloseDialog(val) {
       // 为主表的编辑表单，渲染上默认值
@@ -274,16 +274,16 @@ export default {
           console.warn("主表单校验失败");
           return;
         }
-        console.log("主表单校验完成");
+        // console.log("主表单校验完成");
         if (this.joinEntitys == null || this.joinEntitys.length == 0) {
           // 如果子表没有信息，直接提交
           this.handleSave();
           return;
         }
         for (let i = 0; i < this.joinEntitys.length; i++) {
-          console.log(`开始校验子表单-${i} 校验`);
+          // console.log(`开始校验子表单-${i} 校验`);
           let item = this.joinEntitys[i];
-          console.log(item);
+          // console.log(item);
           if (
             this.$refs["joinForm" + i] == null ||
             item.hide == true ||
@@ -302,15 +302,15 @@ export default {
 
             //  console.log('子表单没有数据，直接跳过')
             this.countForValidJoinForm++;
-            console.log(
-              "已经校验的子表单：" +
-                this.countForValidJoinForm +
-                " 共：" +
-                this.joinEntitys.length
-            );
+            // console.log(
+            //   "已经校验的子表单：" +
+            //     this.countForValidJoinForm +
+            //     " 共：" +
+            //     this.joinEntitys.length
+            // );
             // 所有关联表单校验通过
             if (this.countForValidJoinForm == this.joinEntitys.length) {
-              console.log("子表单校验完成，提交主表单");
+              // console.log("子表单校验完成，提交主表单");
               this.handleSave();
             }
             continue;
@@ -322,15 +322,15 @@ export default {
           joinForm.validate(joinValid => {
             if (joinValid) {
               this.countForValidJoinForm++;
-              console.log(
-                "已经校验的子表单：" +
-                  this.countForValidJoinForm +
-                  " 共：" +
-                  this.joinEntitys.length
-              );
+              // console.log(
+              //   "已经校验的子表单：" +
+              //     this.countForValidJoinForm +
+              //     " 共：" +
+              //     this.joinEntitys.length
+              // );
               // 所有关联表单校验通过
               if (this.countForValidJoinForm == this.joinEntitys.length) {
-                console.log("子表单校验完成，提交主表单");
+                // console.log("子表单校验完成，提交主表单");
                 this.handleSave();
               }
             } else {
@@ -353,7 +353,7 @@ export default {
           return;
         } else {
           // ;(this.countForValidJoinForm = 0), // 已成功校验的关联表单个数
-          console.log(`提交表单调用新增接口失败：${message}`);
+          // console.log(`提交表单调用新增接口失败：${message}`);
         }
       }
       // 修改
@@ -367,7 +367,7 @@ export default {
           return;
         } else {
           // ;(this.countForValidJoinForm = 0), // 已成功校验的关联表单个数
-          console.log(`提交表单调用更新接口失败：${message}`);
+          // console.log(`提交表单调用更新接口失败：${message}`);
         }
       }
     },
diff --git a/src/components/AnjiPlus/anji-upload.vue b/src/components/AnjiPlus/anji-upload.vue
index dda7809..3b81627 100644
--- a/src/components/AnjiPlus/anji-upload.vue
+++ b/src/components/AnjiPlus/anji-upload.vue
@@ -95,8 +95,8 @@ export default {
   methods: {
     handleRemove(file) {
       this.fileList = [];
-      console.log(this.fileList);
-      console.log(this.limit);
+      // console.log(this.fileList);
+      // console.log(this.limit);
       this.change();
     },
     handleExceed() {
@@ -117,13 +117,13 @@ export default {
         fileId: file.response.data.fileId,
         fileType: file.response.data.fileType
       });
-      console.log(this.fileList);
+      // console.log(this.fileList);
       this.change();
     },
     // 回传出去
     change() {
       const fileList = this.fileList;
-      console.log(fileList);
+      // console.log(fileList);
       this.$emit("input", fileList);
       this.$emit("change", fileList);
     },
@@ -153,7 +153,7 @@ export default {
     },
     // 回显
     echoUpload(val) {
-      console.log(val);
+      // console.log(val);
       if (val && val.length > 0) {
         this.fileList = [
           {
diff --git a/src/components/Dictionary/index.vue b/src/components/Dictionary/index.vue
index a51323f..8c6a9a1 100644
--- a/src/components/Dictionary/index.vue
+++ b/src/components/Dictionary/index.vue
@@ -17,7 +17,7 @@
       v-for="item in dictionaryOptions"
       :key="item.id"
       :label="item.text"
-      :value="item.id"
+      :value="item.code || item.id"
     />
   </el-select>
 </template>
diff --git a/src/components/FlvVideo.vue b/src/components/FlvVideo.vue
index 3218707..a2b49a1 100644
--- a/src/components/FlvVideo.vue
+++ b/src/components/FlvVideo.vue
@@ -96,7 +96,7 @@ export default {
         })
       }
 
-      console.log('this.players:', result)
+      // console.log('this.players:', result)
       
       return result
     }
diff --git a/src/components/configForm.vue b/src/components/configForm.vue
index 6bb5460..3c0d293 100644
--- a/src/components/configForm.vue
+++ b/src/components/configForm.vue
@@ -56,15 +56,15 @@ export default {
       }
     },
     formItems(val){
-      console.log(val, 'formItems1');
+      // console.log(val, 'formItems1');
       this.formItemsArr = val
-      console.log(this.formItemsArr)
+      // console.log(this.formItemsArr)
     }
   },
   computed: {},
   methods: {
     eachChange(val){
-      console.log(val, '回传的值');
+      // console.log(val, '回传的值');
       this.$emit('myChanged', val)
     },
     // 无论哪个输入框改变 都需要触发事件 将值回传
diff --git a/src/components/eachForm.vue b/src/components/eachForm.vue
index 066cf08..8311915 100644
--- a/src/components/eachForm.vue
+++ b/src/components/eachForm.vue
@@ -126,7 +126,7 @@ export default {
       this.ConfigData = newValue
     },
     item(val){
-      console.log(val, 'item233');
+      // console.log(val, 'item233');
     }
   },
   computed: {},
@@ -150,7 +150,7 @@ export default {
     },
     // 移除图片的回调
     handleRemove(file, fileList, imgName) {
-      console.log(imgName)
+      // console.log(imgName)
       this.ConfigData[imgName] = ""
     },
     // 预览图片
diff --git a/src/main.js b/src/main.js
index 9336170..4c1ff5d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@ import store from './store'
 import * as filter from './filter'
 import mixins from '@/mixins'
 import * as echarts from 'echarts';
-// 全局定义echarts
+// 全局定义 echarts
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/component/tooltip'
@@ -22,7 +22,7 @@ import 'echarts/lib/component/tooltip'
 //import 'echarts-liquidfill'
 // import 'echarts-gl'
 Vue.component('v-chart', ECharts)
-// 全局引入datav
+// 全局引入 datav
 import dataV from '@jiaminghi/data-view'
 Vue.use(dataV)
 // anji component
diff --git a/src/mixins/queryform.js b/src/mixins/queryform.js
index f3f93aa..23ebf3c 100644
--- a/src/mixins/queryform.js
+++ b/src/mixins/queryform.js
@@ -191,6 +191,8 @@ export default {
         return this.stackMoreShowFn(params.chartProperties, data);
       } else if (chartType == "widget-videoMonitor") {
         return this.widgetVideoMonitor(params.chartProperties, data);
+      } else if (chartType == "widget-quadrant-scatter") {
+        return this.quadrantScatterChartFn(params.chartProperties, data);
       } else {
         return data
       }
@@ -342,6 +344,45 @@ export default {
       analysisData["series"] = series;
       return analysisData;
     },
+    // 四象限散点图数据解析
+    quadrantScatterChartFn(chartProperties, data) {
+      const analysisData = {};
+      const series = [];
+
+      // 安全检查
+      if (!chartProperties || !data || !Array.isArray(data) || data.length === 0) {
+        console.warn('[四象限图] 数据无效，返回空结构');
+        analysisData["series"] = [];
+        return analysisData;
+      }
+
+      // chartProperties 格式: { 'name': 'name字段', 'xAxis': 'xData字段', 'yAxis': 'yData字段' }
+      // 获取各个字段名，注意 chartProperties 中的 value 是数据库字段名，而非字面 'xAxis'/'yAxis'
+      // 例如 chartProperties = { 'name': 'productName', 'xAxis': 'growthRate', 'yAxis': 'profitRate' }
+      const nameField = chartProperties['name'] || 'name';
+      // chartProperties['xAxis'] 的 value 才是 x 轴数据对应的数据库字段名
+      const xAxisField = chartProperties['xAxis'] || 'xData';
+      const yAxisField = chartProperties['yAxis'] || 'yData';
+
+      // 构建 series
+      series.push({
+        type: 'scatter',
+        name: 'scatter',
+        data: data.map((item) => {
+          return {
+            name: item[nameField] || item.name || item.axis || '',
+            xData: item[xAxisField] || item.xData || item[0],
+            yData: item[yAxisField] || item.yData || item[1],
+            amount: item.amount || item.bar,
+            growth: item.growth,
+            profit: item.profit
+          };
+        })
+      });
+
+      analysisData["series"] = series;
+      return analysisData;
+    },
     // 中国地图。路线图数据解析，适合source、target、value
     linemapChartFn(chartProperties, data) {
       const analysisData = [];
@@ -431,7 +472,7 @@ export default {
     },
     // 堆叠图多显示
     stackMoreShowFn(chartProperties, data) {
-      console.log(data)
+      // console.log(data)
       const analysisData = {};
       //全部字段字典值
       const types = Object.values(chartProperties)
diff --git a/src/store/modules/designer.js b/src/store/modules/designer.js
index ae275ca..9295ac2 100644
--- a/src/store/modules/designer.js
+++ b/src/store/modules/designer.js
@@ -15,13 +15,13 @@ const designer = {
     SET_ALL_COMPONENT_LINKAGE: (state, params) => {
       var { index = -1, widgetId = '', linkageArr } = params
       try {
-        console.log('params---', params)
+        // 解析 linkageArr，widgetValue 格式: targetId-$-targetName-$-targetIndex
         linkageArr = linkageArr.map(item => {
           const arr = item.widgetValue.split('-$-')
           return {
-            originId: widgetId,
-            targetId: arr[0],
-            targetName: arr[1],
+            originId: widgetId,        // 当前组件（源组件）的 ID
+            targetId: arr[0],          // 目标组件的 ID
+            targetName: arr[1],        // 目标组件的名称
             paramsConfig: item.paramsConfig
           }
         })
diff --git a/src/utils/compress.js b/src/utils/compress.js
new file mode 100644
index 0000000..f216f44
--- /dev/null
+++ b/src/utils/compress.js
@@ -0,0 +1,112 @@
+import pako from 'pako'
+
+/**
+ * 将对象压缩为 Gzip 格式
+ * @param {Object} obj - 需要压缩的对象
+ * @returns {string} - 压缩后的 base64 字符串
+ */
+export function gzipCompress(obj) {
+  try {
+    // 转换为 JSON 字符串
+    const str = JSON.stringify(obj)
+    if (!str) {
+      console.error('gzipCompress: 输入对象为空')
+      return null
+    }
+    console.log('[压缩] JSON字符串长度:', str.length);
+    
+    // 转换为 Uint8Array (兼容旧浏览器)
+    let uint8Array
+    if (typeof TextEncoder !== 'undefined') {
+      uint8Array = new TextEncoder().encode(str)
+    } else {
+      // 降级处理：手动转换为 UTF-8 字节数组
+      uint8Array = new Uint8Array(str.length)
+      for (let i = 0; i < str.length; i++) {
+        uint8Array[i] = str.charCodeAt(i)
+      }
+    }
+    console.log('[压缩] Uint8Array 长度:', uint8Array.length);
+    
+    // Gzip 压缩
+    const compressed = pako.gzip(uint8Array)
+    console.log('[压缩] 压缩后字节长度:', compressed.length);
+    
+    // 转为 base64 便于传输
+    const base64 = arrayToBase64(compressed)
+    console.log('[压缩] Base64 长度:', base64 ? base64.length : 'null');
+    return base64
+  } catch (error) {
+    console.error('压缩失败:', error)
+    return null
+  }
+}
+
+/**
+ * 解压 Gzip 数据
+ * @param {string} base64Str - base64 编码的压缩数据
+ * @returns {Object} - 解压后的对象
+ */
+export function gzipDecompress(base64Str) {
+  try {
+    if (!base64Str) {
+      console.error('gzipDecompress: 输入数据为空')
+      return null
+    }
+    // base64 转 Uint8Array
+    const uint8Array = base64ToArray(base64Str)
+    // Gzip 解压
+    const decompressed = pako.ungzip(uint8Array)
+    // 转回字符串 (兼容旧浏览器)
+    let str
+    if (typeof TextDecoder !== 'undefined') {
+      str = new TextDecoder().decode(decompressed)
+    } else {
+      // 降级处理：手动转换为字符串
+      str = ''
+      for (let i = 0; i < decompressed.length; i++) {
+        str += String.fromCharCode(decompressed[i])
+      }
+    }
+    // 解析 JSON
+    return JSON.parse(str)
+  } catch (error) {
+    console.error('解压失败:', error)
+    return null
+  }
+}
+
+/**
+ * Uint8Array 转 Base64
+ */
+function arrayToBase64(arr) {
+  try {
+    let binary = ''
+    const len = arr.length
+    for (let i = 0; i < len; i++) {
+      binary += String.fromCharCode(arr[i])
+    }
+    return window.btoa(binary)
+  } catch (error) {
+    console.error('arrayToBase64 失败:', error)
+    return null
+  }
+}
+
+/**
+ * Base64 转 Uint8Array
+ */
+function base64ToArray(base64) {
+  try {
+    const binary = window.atob(base64)
+    const len = binary.length
+    const arr = new Uint8Array(len)
+    for (let i = 0; i < len; i++) {
+      arr[i] = binary.charCodeAt(i)
+    }
+    return arr
+  } catch (error) {
+    console.error('base64ToArray 失败:', error)
+    return null
+  }
+}
diff --git a/src/utils/revoke.js b/src/utils/revoke.js
index 119b769..f149afd 100644
--- a/src/utils/revoke.js
+++ b/src/utils/revoke.js
@@ -99,4 +99,15 @@ export class Revoke {
 
         return JSON.parse(record);
     }
+
+    /**
+     * @description: 清空历史记录
+     * @return {void}
+     */
+    clear() {
+        this.recordList = [];
+        this.redoList = [];
+        this.currentRecord = null;
+        this.time = 0;
+    }
 }
diff --git a/src/utils/screen.js b/src/utils/screen.js
index 62f8bc0..c98fc27 100644
--- a/src/utils/screen.js
+++ b/src/utils/screen.js
@@ -9,7 +9,7 @@ export function setAssChartData(widgets, options) {
   })
   widgets.forEach(item => {
     const setup = item['options']['setup']
-    console.log(setup)
+    // console.log(setup)
     setup.forEach(sItem => {
       if (sItem.name == 'assChart') {
         sItem['selectOptions'] = selectOptions
diff --git a/src/utils/screenMixins.js b/src/utils/screenMixins.js
index e99b5f9..33d2256 100644
--- a/src/utils/screenMixins.js
+++ b/src/utils/screenMixins.js
@@ -10,6 +10,7 @@ const mixin = {
       revoke: null, //处理历史记录
       rightClickIndex: -1,
       rightClickWidget: null,
+      isSaving: false, // 保存中状态标志，用于幂等控制
     }
   },
   computed: {
@@ -108,6 +109,12 @@ const mixin = {
       this.dashboard = this.initScreenData(data.dashboard);
       this.bigscreenWidth = this.dashboard.width;
       this.bigscreenHeight = this.dashboard.height;
+      
+      // 【关键修复】数据加载完成后，初始化所有组件的联动配置
+      // 这确保 targetWidgetLinkageLogic 和 originWidgetLinkageLogic 能正确工作
+      this.$nextTick(() => {
+        this.initAllComponentLinkage && this.initAllComponentLinkage();
+      });
     },
     // 组件数据
     initWidgetsData(data) {
@@ -126,10 +133,21 @@ const mixin = {
           if (process.env.NODE_ENV === "development") {
             this.$message.error(message);
           }
+          console.error('[加载] 未找到组件工具:', widget.type);
           continue; // 找不到就跳过，避免整个报表都加载不出来
         }
+        
+        // 【调试】打印组件类型和 value 结构
+        console.log('[加载] 组件类型:', widget.type, 'value.setup keys:', Object.keys(setup || {}));
+        
         obj.options = this.setDefaultWidgetConfigValue(widget.value, tool.options);
         obj.value.widgetId = obj.value.setup.widgetId;
+        
+        // 【调试】打印处理后的 options.setup 关键字段
+        if (widget.type === 'widget-quadrant-scatter') {
+          console.log('[加载] 四象限图 setup keys:', Object.keys(obj.options.setup || {}).slice(0, 20));
+        }
+        
         widgetsData.push(obj);
       }
       return widgetsData;
@@ -175,21 +193,69 @@ const mixin = {
     },
     // 保存数据
     async saveData() {
+      // 幂等控制：防止重复提交
+      if (this.isSaving) {
+        this.$message.warning('正在保存中，请稍候...');
+        return;
+      }
+      
       if (!this.widgets || this.widgets.length == 0) {
         return this.$message.error("请添加组件");
       }
-      const { title, width, height, backgroundColor, backgroundImage, refreshSeconds } = { ...this.dashboard }
-      const screenData = {
-        reportCode: this.reportCode,
-        dashboard: { title, width, height, backgroundColor, backgroundImage, refreshSeconds },
-        widgets: this.widgets,
-      };
-      screenData.widgets.forEach((widget) => {
-        widget.value.setup.widgetId = widget.value.widgetId;
-        widget.value.setup.widgetCode = widget.type
+      
+      this.isSaving = true;
+      
+      const saveLoading = this.$loading({ 
+        lock: true, 
+        text: '正在压缩并保存...', 
+        spinner: 'el-icon-loading' 
       });
-      const { code, data } = await insertDashboard(screenData);
-      if (code == "200") return this.$message.success("保存成功！");
+      
+      try {
+        const { title, width, height, backgroundColor, backgroundImage, refreshSeconds } = { ...this.dashboard }
+        
+        // 【调试】打印 this.widgets 的结构
+        console.log('[保存] this.widgets.length:', this.widgets.length);
+        this.widgets.forEach((w, idx) => {
+          console.log(`[保存] widgets[${idx}] type:`, w.type, 'value.setup keys:', Object.keys(w.value.setup || {}).slice(0, 10));
+        });
+        
+        const screenData = {
+          reportCode: this.reportCode,
+          dashboard: { title, width, height, backgroundColor, backgroundImage, refreshSeconds },
+          widgets: this.widgets,
+        };
+        
+        screenData.widgets.forEach((widget) => {
+          widget.value.setup.widgetId = widget.value.widgetId;
+          widget.value.setup.widgetCode = widget.type
+          // 【调试】打印保存的组件类型和 setup keys
+          console.log('[保存] 组件类型:', widget.type, 'setup keys:', Object.keys(widget.value.setup || {}).slice(0, 20));
+        });
+        
+        // 【调试】打印四象限图的保存数据
+        const quadrantWidget = screenData.widgets.find(w => w.type === 'widget-quadrant-scatter');
+        if (quadrantWidget) {
+          console.log('[保存] 四象限图 widget.value.setup:', Object.keys(quadrantWidget.value.setup || {}));
+          console.log('[保存] 四象限图 widget.value.data:', Object.keys(quadrantWidget.value.data || {}));
+          console.log('[保存] 四象限图完整 value:', JSON.stringify(quadrantWidget.value).substring(0, 500));
+        }
+        
+        const { code, data } = await insertDashboard(screenData)
+        if (code == "200") {
+          this.$message.success("保存成功！")
+          // 保存成功后清空历史记录，防止重复调用，增加安全检查
+          if (this.revoke && typeof this.revoke.clear === 'function') {
+            this.revoke.clear()
+          }
+        }
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error("保存失败，请检查网络或联系管理员")
+      } finally {
+        saveLoading.close()
+        this.isSaving = false; // 重置保存状态
+      }
     },
     // 预览
     viewScreen() {
@@ -282,6 +348,10 @@ const mixin = {
       this.selectedWidgets.forEach(sw=>{
         _this.widgets = _this.widgets.filter(w=>w.value.widgetId !== sw.value.widgetId);
       })
+      // 【关键修复】删除组件后，重新初始化所有组件的联动配置
+      this.$nextTick(() => {
+        this.initAllComponentLinkage && this.initAllComponentLinkage();
+      });
     },
     // 锁定
     lockLayer() {
@@ -396,7 +466,7 @@ const mixin = {
         this.$message.error("请至少选择两个组件对齐");
         return;
       }
-      console.log("对齐方式：" + align);
+      // console.log("对齐方式：" + align);
       let topWidget = this.selectedWidgets[0]; //最上组件(左右对齐使用)
       let leftWidget = this.selectedWidgets[0]; //最左组件(上下对齐使用)
       let minTop = this.selectedWidgets[0].value.position.top;
diff --git a/src/views/accessRole/components/RoleAuthority.vue b/src/views/accessRole/components/RoleAuthority.vue
index 54704ff..20995e5 100644
--- a/src/views/accessRole/components/RoleAuthority.vue
+++ b/src/views/accessRole/components/RoleAuthority.vue
@@ -58,7 +58,7 @@ export default {
     visib(val) {
       if (val) {
         // 弹窗弹出时需要执行的逻辑
-        console.log(1);
+        // console.log(1);
         this.getTreeData();
       }
     }
diff --git a/src/views/bigscreenDesigner/designer/components/componentLinkage.vue b/src/views/bigscreenDesigner/designer/components/componentLinkage.vue
index 3891426..a6f3b18 100644
--- a/src/views/bigscreenDesigner/designer/components/componentLinkage.vue
+++ b/src/views/bigscreenDesigner/designer/components/componentLinkage.vue
@@ -61,13 +61,15 @@
         <el-form-item v-show="linkageForm.widgetValue" class="params-form-item" label="参数配置">
           <div class="params-config">
             <div
-              v-for="item in linkageForm.paramsConfig"
-              :key="item.originKey"
+              v-for="(item, paramIndex) in linkageForm.paramsConfig"
+              :key="paramIndex"
               class="item-config"
             >
               <div class="label">{{ item.originKey }}</div>
               <div class="value">
+                <!-- 如果目标组件有预定义参数，显示下拉选择 -->
                 <el-select
+                  v-if="currentTargetParams.length > 0"
                   v-model="item.targetKey"
                   size="mini"
                   clearable
@@ -80,8 +82,31 @@
                     :value="paramKey"
                   />
                 </el-select>
+                <!-- 如果目标组件没有预定义参数，显示文本输入 -->
+                <el-input
+                  v-else
+                  v-model="item.targetKey"
+                  size="mini"
+                  placeholder="请输入目标参数名"
+                />
+              </div>
+              <div class="param-actions">
+                <i class="el-icon-delete" @click="handleDeleteParam(paramIndex)" title="删除此参数" style="cursor: pointer; color: #F56C6C; margin-left: 8px;" />
               </div>
             </div>
+            <!-- 当源参数列表为空时，显示提示和手动添加按钮 -->
+            <div v-if="linkageForm.paramsConfig.length === 0" class="empty-tip">
+              <span>目标组件未配置参数，可手动添加参数映射</span>
+            </div>
+            <el-button
+              type="text"
+              size="mini"
+              icon="el-icon-plus"
+              @click="handleAddParam"
+              class="add-param-btn"
+            >
+              添加参数映射
+            </el-button>
           </div>
         </el-form-item>
       </el-form>
@@ -168,20 +193,22 @@ export default {
     initFormDynamicData() {
       let paramsKey = []
       const dynamicParamsWidget = ['widgetButtonGroup', 'widget-table']
-      if (dynamicParamsWidget.includes(this.layerWidget[this.widgetIndex].code)) { // 参数不确定的 通过消息接收
-        paramsKey = this.layerWidget[this.widgetIndex].paramsKeys || []
+      const currentWidget = this.layerWidget[this.widgetIndex]
+      const widgetCode = currentWidget ? currentWidget.code : ''
+      if (dynamicParamsWidget.includes(widgetCode)) { // 参数不确定的 通过消息接收
+        paramsKey = currentWidget.paramsKeys || []
       } else {
-        const widgetConfigTemp = getOneConfigByCode(this.layerWidget[this.widgetIndex].code)
+        const widgetConfigTemp = getOneConfigByCode(widgetCode)
         if (!widgetConfigTemp) return
         // console.log('this.layerWidget[this.widgetIndex---', this.layerWidget, '  ---  ', this.widgetIndex)
-        paramsKey = widgetConfigTemp.paramsKey
+        paramsKey = widgetConfigTemp.paramsKey || []
       }
       this.linkageForm = {
         widgetValue: '', // 选中的组件的名字
         paramsConfig: paramsKey.map(item => {
           return {
             originKey: item,
-            targetKey: ''
+            targetKey: item // 默认 targetKey 等于 originKey
           }
         })
       }
@@ -191,15 +218,17 @@ export default {
       if('widget-button'=== this.layerWidget[this.widgetIndex].code){
         //根据目标组件的参数个数来确定按钮组件的参数个数
         this.linkageForm.paramsConfig = []; //每次切换都置空
-        let paramKeys = Object.keys(this.widgetParamsConfig[this.targetIndex].dynamicData.contextData);
-        paramKeys.forEach(param=>{
-          this.linkageForm.paramsConfig.push({
-            originKey: param,
-            targetKey: ''
+        try {
+          let paramKeys = Object.keys(this.widgetParamsConfig[this.targetIndex].dynamicData.contextData);
+          paramKeys.forEach(param=>{
+            this.linkageForm.paramsConfig.push({
+              originKey: param,
+              targetKey: param
+            });
           });
-        });
-        //把参数传给button组件的表单
-        //this.layerWidget[this.widgetIndex].setFormData(paramKeys);
+        } catch (error) {
+          // 如果目标组件没有 contextData，保持 paramsConfig 为空，用户可以手动添加
+        }
       }
     },
     // 弹出框关闭
@@ -228,6 +257,17 @@ export default {
       this.$emit('input', this.formData)
       this.$emit('change', this.formData)
     },
+    // 添加参数映射
+    handleAddParam() {
+      this.linkageForm.paramsConfig.push({
+        originKey: '',
+        targetKey: ''
+      })
+    },
+    // 删除单个参数映射
+    handleDeleteParam(index) {
+      this.linkageForm.paramsConfig.splice(index, 1)
+    },
     // 确定
     handleSaveClick() {
       const obj = JSON.parse(JSON.stringify(this.linkageForm))
@@ -298,10 +338,26 @@ export default {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
     .label {
-      margin-right: 20px;
+      min-width: 80px;
+      margin-right: 10px;
+      text-align: right;
     }
+    .value {
+      flex: 1;
+    }
+  }
+  .empty-tip {
+    color: #E6A23C;
+    font-size: 12px;
+    margin-bottom: 10px;
+    padding: 8px;
+    background: rgba(230, 162, 60, 0.1);
+    border-radius: 4px;
+  }
+  .add-param-btn {
+    margin-top: 8px;
   }
 }
 </style>
diff --git a/src/views/bigscreenDesigner/designer/components/customUpload.vue b/src/views/bigscreenDesigner/designer/components/customUpload.vue
index faac75f..63ca6d8 100644
--- a/src/views/bigscreenDesigner/designer/components/customUpload.vue
+++ b/src/views/bigscreenDesigner/designer/components/customUpload.vue
@@ -52,7 +52,7 @@ export default {
     },
     upload(imgUrl) {
       let that = this;
-      console.log(that.headers);
+      // console.log(that.headers);
       let formdata = new FormData();
       formdata.append("file", imgUrl);
       axios
diff --git a/src/views/bigscreenDesigner/designer/components/drillDrownSetting.vue b/src/views/bigscreenDesigner/designer/components/drillDrownSetting.vue
index aa2a816..a169575 100644
--- a/src/views/bigscreenDesigner/designer/components/drillDrownSetting.vue
+++ b/src/views/bigscreenDesigner/designer/components/drillDrownSetting.vue
@@ -611,7 +611,7 @@ export default {
     async getData() {
         
       const data = {dashboard:{...this.editData.dashboard,...this.editData},widgets:null};
-      console.log(data,1231231)
+      // console.log(data,1231231)
       this.widgets = this.initWidgetsData(data);
       this.dashboard = this.initScreenData(data.dashboard);
       this.bigscreenWidth = this.dashboard.width;
@@ -902,7 +902,7 @@ export default {
         this.$message.error("请至少选择两个组件对齐");
         return;
       }
-      console.log("对齐方式：" + align);
+      // console.log("对齐方式：" + align);
       let topWidget = this.selectedWidgets[0]; //最上组件(左右对齐使用)
       let leftWidget = this.selectedWidgets[0]; //最左组件(上下对齐使用)
       let minTop = this.selectedWidgets[0].value.position.top;
@@ -1009,11 +1009,11 @@ export default {
       this.$nextTick(() => {
         if (this.widgets.length === this.currentWidgetTotal + 1) {
           // 确实新增了一个组件到操作面板上
-          console.log(
-            `新添加 '${
-              this.widgets[this.currentWidgetTotal].value.setup.layerName
-            }' 组件到操作面板`
-          );
+          // console.log(
+          //   `新添加 '${
+          //     this.widgets[this.currentWidgetTotal].value.setup.layerName
+          //   }' 组件到操作面板`
+          // );
           const uuid = Number(Math.random().toString().substr(2)).toString(36);
           this.widgets[this.currentWidgetTotal].value.widgetId = uuid;
           this.layerWidget[this.currentWidgetTotal].widgetId = uuid;
@@ -1103,7 +1103,7 @@ export default {
         options: tool.options,
       };
       // 处理默认值
-      console.log(widgetType)
+      // console.log(widgetType)
       const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
 
       widgetJsonValue.value.position.left =
@@ -1150,7 +1150,7 @@ export default {
     },
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
     setOptionsOnClickScreen() {
-      console.log("setOptionsOnClickScreen");
+      // console.log("setOptionsOnClickScreen");
       if(this.selectedWidgets.length > 0  && this.kuangSelectFlag){
         //如果Ctrl多选过程中，点击了大屏底层，就清空 this.selectedWidgets
         return;
@@ -1189,7 +1189,7 @@ export default {
      */
     setOptionsOnClickInnerWidget(payload) {
       if (!payload) return;
-      console.log('setOptionsOnClickInnerWidget payload:', payload);
+      // console.log('setOptionsOnClickInnerWidget payload:', payload);
 
       const { rootWidgetIndex, tabIndex, childIndex } = payload;
       const rootIndex = typeof rootWidgetIndex === "number" ? rootWidgetIndex : 0;
@@ -1297,7 +1297,7 @@ export default {
       document.addEventListener('mouseup', onUp);
     },
     widgetsClick(event,index) {
-      console.log("widgetsClick");
+      // console.log("widgetsClick");
       //判断是否按住了Ctrl按钮，表示Ctrl多选
       let _this = this;
       let eventWidget = null;
@@ -1312,7 +1312,7 @@ export default {
               if(eventWidget.value.widgetId === w.value.widgetId){
                 setTimeout(function (){
                   _this.$refs.widgets[index].$refs.draggable.setActive(false);
-                  console.log("触发取消选中, eventWidget.value.widgetId = " + eventWidget.value.widgetId +", w.value.widgetId= "+ w.value.widgetId);
+                  // console.log("触发取消选中, eventWidget.value.widgetId = " + eventWidget.value.widgetId +", w.value.widgetId= "+ w.value.widgetId);
                 },200); //设置超时，防止效果被覆盖
               }
             })
@@ -1368,14 +1368,14 @@ export default {
     },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
-      console.log("key", key);
-      console.log("val", val);
-      console.log(this.widgetOptions);
+      // console.log("key", key);
+      // console.log("val", val);
+      // console.log(this.widgetOptions);
       if (this.screenCode == "screen") {
         let newSetup = [];
         this.dashboard = this.deepClone(val);
-        console.log("asd", this.dashboard);
-        console.log(this.widgetOptions);
+        // console.log("asd", this.dashboard);
+        // console.log(this.widgetOptions);
         if (this.bigscreenWidth != this.dashboard.width) {
           this.bigscreenWidth = this.dashboard.width;
         }
@@ -1392,7 +1392,7 @@ export default {
           }
           newSetup.push(el);
         });
-        console.log(newSetup);
+        // console.log(newSetup);
         this.widgetOptions.setup = newSetup;
       } else {
         // 如果当前选中的是 Tabs 内部子组件，优先更新内部子组件的配置
@@ -1480,7 +1480,7 @@ export default {
     },
     //鼠标按下事件
     downEvent(event){
-      console.log("downEvent")
+      // console.log("downEvent")
       this.moveTimes = 0;
       this.selectedWidgets = [];
       this.openMulDrag = false;
@@ -1496,7 +1496,7 @@ export default {
     },
     //鼠标移动事件
     moveEvent(event){
-      console.log("moveEvent");
+      // console.log("moveEvent");
       //测试的时候发现，每次点击组件，再次点击大屏的时候，偶尔会触发一次moveEvent,导致会生成rect，所以加了移动次数moveTimes 变量控制一下，只有移动多次的情况下，才能说明是框选多选
       if(this.selectFlag && this.selectedWidgets.length <= 1 && this.moveTimes >= 1){
         if(this.rect === null){
@@ -1559,7 +1559,7 @@ export default {
       }
     },
     upEvent(event){
-      console.log("upEvent")
+      // console.log("upEvent")
       if(this.selectFlag && this.selectedWidgets.length === 0 &&  this.rect !== null){
         this.calculateMousePosition(event, false);
 
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue b/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue
index 6e874ad..7d979e7 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue
@@ -96,13 +96,13 @@ export default {
   methods: {
     async loadDataSet() {
       const { code, data } = await queryAllDataSet();
-      this.dataSet = data;
+      this.dataSet = data || [];
       if (code != "200") return;
     },
     async selectDataSet() {
       const { code, data } = await detailBysetId(this.dataSetValue);
-      this.userNameList = data.dataSetParamDtoList;
-      this.setParamList = data.setParamList;
+      this.userNameList = data ? data.dataSetParamDtoList : [];
+      this.setParamList = data ? data.setParamList : [];
       this.chartProperties = {};
       if (code != "200") return;
     },
@@ -134,14 +134,17 @@ export default {
     },
     // 数据集回显
     async echoDataSet(val) {
-      if (!val) return;
+      if (!val || typeof val !== 'object') return;
       const setCode = val.setCode;
 
       await this.loadDataSet();
 
-      this.dataSetValue = this.dataSet.filter(
+      const dd = this.dataSet.filter(
         el => setCode == el.setCode
-      )[0].id;
+      );
+      if (dd && dd.length > 0) {
+        this.dataSetValue = dd[0].id;
+      }
 
       await this.selectDataSet();
       this.echoDynamicData(val);
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
index 52f8ee0..4e6192c 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
@@ -415,6 +415,7 @@ export default {
       dialogVisibleStaticData: false,
       methodsVisible: false,
       validationRules: "",
+      changeTimer: null, // 【关键优化】防抖定时器
      
    
       optionsJavascript: {
@@ -432,7 +433,10 @@ export default {
   },
   watch: {
     value(newValue, oldValue) {
-      this.formData = newValue || {};
+      // 【关键优化】只在初始化或 value 引用真正变化时才更新 formData
+      if (!oldValue || newValue !== oldValue) {
+        this.formData = newValue || {};
+      }
     },
     
     options(val) {
@@ -445,37 +449,58 @@ export default {
     this.setDefaultValue();
   },
   mounted() {},
+  beforeDestroy() {
+    // 【关键优化】清理防抖定时器，避免内存泄漏
+    if (this.changeTimer) {
+      clearTimeout(this.changeTimer);
+      this.changeTimer = null;
+    }
+  },
   methods: {
     handleCollapse(){
       this.$emit('handleCollapse',this.formData)
     },
+
     changeDrillData(val){
       this.changed(val, 'drill_drown_setting')
     },
     onJsonChange(val) {
-      console.log(val);
+      // console.log(val);
     },
     onJsonSave(val) {
-      console.log(val);
+      // console.log(val);
     },
     // 无论哪个输入框改变 都需要触发事件 将值回传
     changed(val, key) {
-      console.log(val);
-      console.log(key);
-      if (val.extend) {
-        this.$set(this.formData, key, val.value);
-      } else {
-        this.$set(this.formData, key, val);
+      // 【关键优化】使用防抖，避免配置修改时频繁触发上层组件更新
+      if (this.changeTimer) {
+        clearTimeout(this.changeTimer);
       }
-      this.$emit("onChanged", this.formData);
-      // key为当前用户操作的表单组件
-      for (let i = 0; i < this.options.length; i++) {
-        let item = this.options[i];
-        if (item.relactiveDom == key) {
-          this.inputShow[item.name] = val == item.relactiveDomValue;
-          this.inputShow = Object.assign({}, this.inputShow);
+      
+      this.changeTimer = setTimeout(() => {
+        // 处理 dynamicComponents 组件返回的 params 对象
+        // dynamicComponents 返回的是完整的 params 对象，包含 chartType/setCode/chartProperties/contextData
+        if (val && val.chartType && val.setCode) {
+          // dynamicComponents 返回的是完整的 params 对象
+          // 需要同时设置 dynamicData（供 mixin 的 queryEchartsData 使用）和 chartProperties
+          this.$set(this.formData, 'dynamicData', val);
+          this.$set(this.formData, 'chartProperties', val.chartProperties || {});
+        } else if (val.extend) {
+          this.$set(this.formData, key, val.value);
+        } else {
+          this.$set(this.formData, key, val);
         }
-      }
+        this.$emit("onChanged", this.formData);
+        
+        // 处理关联显示逻辑
+        for (let i = 0; i < this.options.length; i++) {
+          let item = this.options[i];
+          if (item.relactiveDom == key) {
+            this.inputShow[item.name] = val == item.relactiveDomValue;
+            this.inputShow = Object.assign({}, this.inputShow);
+          }
+        }
+      }, 100); // 100ms 防抖
     },
     saveData() {
       this.$emit("onChanged", this.formData);
diff --git a/src/views/bigscreenDesigner/designer/components/imageSelect.vue b/src/views/bigscreenDesigner/designer/components/imageSelect.vue
index c047112..0736552 100644
--- a/src/views/bigscreenDesigner/designer/components/imageSelect.vue
+++ b/src/views/bigscreenDesigner/designer/components/imageSelect.vue
@@ -298,7 +298,7 @@ export default {
       this.submitSelect();
     },
     submitSelect() {
-      console.log(this.headers);
+      // console.log(this.headers);
       this.ImgUrl = this.currentRow.urlPath;
       this.$emit("input", this.currentRow.urlPath);
       this.$emit("change", this.currentRow.urlPath);
@@ -309,7 +309,7 @@ export default {
     },
     changeInput(e) {
       if (e) {
-        console.log(11111111)
+        // console.log(11111111)
         this.ImgUrl = e;
       } else {
         this.ImgUrl = "";  // 直接设置为空字符串
diff --git a/src/views/bigscreenDesigner/designer/index.vue b/src/views/bigscreenDesigner/designer/index.vue
index 0f71964..6362eff 100644
--- a/src/views/bigscreenDesigner/designer/index.vue
+++ b/src/views/bigscreenDesigner/designer/index.vue
@@ -280,22 +280,25 @@
               @mousemove="moveEvent($event)"
             >
               <div v-if="grade" class="bg-grid"></div>
-              <widget
-                ref="widgets"
-                v-for="(widget, index) in widgets"
-                :key="index"
-                v-model="widget.value"
-                :index="index"
-                :step="step"
-                :type="widget.type"
-                :bigscreen="{ bigscreenWidth, bigscreenHeight }"
-                @onActivated="setOptionsOnClickWidget"
-                @onChildActivated="setOptionsOnClickInnerWidget"
-                @onTabsHeaderMouseDown="onTabsHeaderMouseDown($event)"
-                @contextmenu.prevent.native="rightClick($event, index)"
-                @mousedown.prevent.native="widgetsClick($event, index)"
-                @mouseup.prevent.native="grade = false"
-              />
+              <!-- 关键优化：分批渲染组件，避免一次性创建过多 DOM 节点 -->
+              <template v-for="(batch, batchIndex) in renderBatches">
+                <widget
+                  v-for="(widget, index) in batch"
+                  :key="'widget-' + widget.originalIndex"
+                  ref="widgets"
+                  v-model="widget.value"
+                  :index="widget.originalIndex"
+                  :step="step"
+                  :type="widget.type"
+                  :bigscreen="{ bigscreenWidth, bigscreenHeight }"
+                  @onActivated="setOptionsOnClickWidget"
+                  @onChildActivated="setOptionsOnClickInnerWidget"
+                  @onTabsHeaderMouseDown="onTabsHeaderMouseDown($event)"
+                  @contextmenu.prevent.native="rightClick($event, widget.originalIndex)"
+                  @mousedown.prevent.native="widgetsClick($event, widget.originalIndex)"
+                  @mouseup.prevent.native="grade = false"
+                />
+              </template>
             </div>
           </vue-ruler-tool>
         </div>
@@ -458,18 +461,29 @@ export default {
       widgetParamsConfig: [], // 各组件动态数据集的参数配置情况
 
       selectedWidgets: [], //多选组件集合
-      moveTimes: 0, //鼠标移动次数
+      moveTimes: 0,  //鼠标移动次数
       selectFlag: false, //选择标识
       kuangSelectFlag: false, //框选标识
-      downX: 0,  //移动开始X坐标
-      downY: 0,  //移动开始Y坐标
-      downX2: 0, //移动结束X坐标
-      downY2: 0, //移动结束Y坐标
+      downX: 0,  //移动开始 X 坐标
+      downY: 0,  //移动开始 Y 坐标
+      downX2: 0, //移动结束 X 坐标
+      downY2: 0, //移动结束 Y 坐标
       rect : null, //框选矩形对象
       openMulDrag: false, //批量拖拽开关
-      moveWidgets:{},  //记录移动的组件的起始left和top属性
+      moveWidgets:{},  //记录移动的组件的起始 left 和 top 属性
       // 记录当前是否选中了 Tabs 内部子组件，如果为 null 则表示选中的是顶层组件或大屏
       innerWidgetSelected: null,
+      
+      // 分批渲染优化
+      renderBatches: [], // 分批渲染的批次
+      batchSize: 15, // 设计器每批渲染的组件数量 (比预览多一些，因为需要交互)
+      renderTimer: null, // 分批渲染定时器
+      renderedCount: 0,  // 已渲染的组件数量
+      initialRendered: false, // 是否已初始化渲染
+      previousWidgetCount: 0, // 上次组件数量，用于检测组件数量变化
+      
+      // 【关键优化】配置变更防抖定时器
+      configChangeTimer: null,
     };
   },
   computed: {
@@ -514,12 +528,23 @@ export default {
       handler(val) {
         this.getLayerData(val);
         this.handlerdynamicDataParamsConfig(val);
+        
         //以下部分是记录历史
         this.$nextTick(() => {
           this.revoke.push(this.widgets);
         });
+        
+        // 关键优化：只在初始化或组件数量变化时重新渲染，避免频繁操作导致卡顿
+        if (!this.initialRendered || val.length !== this.previousWidgetCount) {
+          this.initialRendered = true;
+          this.previousWidgetCount = val.length;
+          setTimeout(() => {
+            this.renderAllWidgets();
+          }, 50);
+        }
+        // 其他情况 (如位置调整) 不触发重新渲染，由组件自己更新
       },
-      deep: true,
+      // deep: true, // 移除深度监听，避免每次属性变化都触发
     },
   },
   mounted() {
@@ -531,7 +556,87 @@ export default {
       this.initVueRulerTool(); // 初始化 修正插件样式
     });
   },
+  beforeDestroy() {
+    console.log('[Designer] beforeDestroy 开始清理资源');
+    
+    // 1. 清除所有定时器
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+    
+    // 清除分批渲染定时器
+    if (this.renderTimer) {
+      clearTimeout(this.renderTimer);
+      this.renderTimer = null;
+      console.log('[Designer] 已清除分批渲染定时器');
+    }
+    
+    // 2. 移除 window 事件监听
+    window.removeEventListener("mouseup", () => {
+      this.grade = false;
+    });
+    
+    // 3. 清空大型数据引用，释放内存
+    this.widgets = [];
+    this.renderWidgets = [];
+    this.layerWidget = [];
+    this.renderBatches = [];
+    this.dashboard = {};
+    this.widgetOptions = { setup: [], data: [], position: [] };
+    this.selectedWidgets = [];
+    this.moveWidgets = {};
+    this.widgetParamsConfig = [];
+    this.screenData = { dashboard: {}, widgets: [] };
+    this.innerWidgetSelected = null;
+    
+    // 【关键优化】清理所有定时器
+    if (this.renderTimer) {
+      clearTimeout(this.renderTimer);
+      this.renderTimer = null;
+    }
+    if (this.configChangeTimer) {
+      clearTimeout(this.configChangeTimer);
+      this.configChangeTimer = null;
+    }
+    
+    // 4. 清空撤销重做记录
+    if (this.revoke && typeof this.revoke.clear === 'function') {
+      this.revoke.clear();
+    }
+    
+    console.log('[Designer] 资源清理完成');
+  },
   methods: {
+    /**
+     * 初始化所有组件的联动配置到 Vuex Store
+     * 在设计器模式下，每个组件都需要将其 componentLinkage 配置提交到 store
+     * 这样 targetWidgetLinkageLogic 和 originWidgetLinkageLogic 才能正确查找联动关系
+     */
+    initAllComponentLinkage() {
+      // 清空之前的联动配置
+      this.$store.state.designer.allComponentLinkage = [];
+      
+      // 遍历所有组件，将 componentLinkage 配置提交到 store
+      this.widgets.forEach((widgetItem, index) => {
+        const widgetValue = widgetItem.value || {};
+        const setup = widgetValue.setup || {};
+        const widgetId = widgetValue.widgetId;
+        
+        if (widgetId && setup.componentLinkage && setup.componentLinkage.length) {
+          this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
+            index,
+            widgetId: widgetId,
+            linkageArr: setup.componentLinkage
+          });
+        }
+      });
+      
+      console.log('[Designer] 组件联动配置已初始化:', {
+        组件总数: this.widgets.length,
+        联动配置数: this.$store.state.designer.allComponentLinkage.length
+      });
+    },
     submitDrillDrownData(data){
       this.dialogVisibleDrillDrown=false
       this.$refs.formData1.changeDrillData(data)
@@ -593,11 +698,11 @@ export default {
       this.$nextTick(() => {
         if (this.widgets.length === this.currentWidgetTotal + 1) {
           // 确实新增了一个组件到操作面板上
-          console.log(
-            `新添加 '${
-              this.widgets[this.currentWidgetTotal].value.setup.layerName
-            }' 组件到操作面板`
-          );
+          // console.log(
+          //   `新添加 '${
+          //     this.widgets[this.currentWidgetTotal].value.setup.layerName
+          //   }' 组件到操作面板`
+          // );
           const uuid = Number(Math.random().toString().substr(2)).toString(36);
           this.widgets[this.currentWidgetTotal].value.widgetId = uuid;
           this.layerWidget[this.currentWidgetTotal].widgetId = uuid;
@@ -606,6 +711,9 @@ export default {
           this.widgetIndex = index;
           this.widgetsClickAndCtrl(index); // 选中当前新增的组件
           this.grade = false; // 去除网格线
+          
+          // 【关键修复】新增组件后，重新初始化所有组件的联动配置
+          this.initAllComponentLinkage();
         }
       });
     },
@@ -687,7 +795,7 @@ export default {
         options: tool.options,
       };
       // 处理默认值
-      console.log(widgetType)
+      // console.log(widgetType)
       const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
 
       widgetJsonValue.value.position.left =
@@ -779,7 +887,7 @@ export default {
     },
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
     setOptionsOnClickScreen() {
-      console.log("setOptionsOnClickScreen");
+      // console.log("setOptionsOnClickScreen");
       if(this.selectedWidgets.length > 0  && this.kuangSelectFlag){
         //如果Ctrl多选过程中，点击了大屏底层，就清空 this.selectedWidgets
         return;
@@ -798,7 +906,14 @@ export default {
       // 选中顶层组件时清空内部子组件的选中状态
       this.innerWidgetSelected = null;
       if (typeof obj == "number") {
-        this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
+        // 【关键优化】不再从 widgets 读取配置，而是直接从 renderWidgets 读取冻结数据
+        // 避免频繁修改 widgetOptions 触发响应式更新
+        const renderWidget = this.renderWidgets[obj];
+        if (renderWidget) {
+          this.widgetOptions = this.deepClone(renderWidget.options);
+        } else {
+          this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
+        }
         return;
       }
       if (obj.index < 0 || obj.index >= this.widgets.length) {
@@ -820,7 +935,7 @@ export default {
      */
     setOptionsOnClickInnerWidget(payload) {
       if (!payload) return;
-      console.log('setOptionsOnClickInnerWidget payload:', payload);
+      // console.log('setOptionsOnClickInnerWidget payload:', payload);
 
       const { rootWidgetIndex, tabIndex, childIndex } = payload;
       const rootIndex = typeof rootWidgetIndex === "number" ? rootWidgetIndex : 0;
@@ -922,7 +1037,7 @@ export default {
       this.activeName = "first";
     },
     widgetsClick(event,index) {
-      console.log("widgetsClick");
+      // console.log("widgetsClick");
       // 如果是 Tabs 组件，内部点击由 widgetTabs 自己处理，这里只负责选中 Tabs 整体
       const rootWidget = this.widgets[index];
       if (rootWidget && rootWidget.type === "widget-tabs") {
@@ -943,7 +1058,7 @@ export default {
               if(eventWidget.value.widgetId === w.value.widgetId){
                 setTimeout(function (){
                   _this.$refs.widgets[index].$refs.draggable.setActive(false);
-                  console.log("触发取消选中, eventWidget.value.widgetId = " + eventWidget.value.widgetId +", w.value.widgetId= "+ w.value.widgetId);
+                  // console.log("触发取消选中, eventWidget.value.widgetId = " + eventWidget.value.widgetId +", w.value.widgetId= "+ w.value.widgetId);
                 },200); //设置超时，防止效果被覆盖
               }
             })
@@ -999,14 +1114,14 @@ export default {
     },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
-      console.log("key", key);
-      console.log("val", val);
-      console.log(this.widgetOptions);
+      // console.log("key", key);
+      // console.log("val", val);
+      // console.log(this.widgetOptions);
       if (this.screenCode == "screen") {
         let newSetup = [];
         this.dashboard = this.deepClone(val);
-        console.log("asd", this.dashboard);
-        console.log(this.widgetOptions);
+        // console.log("asd", this.dashboard);
+        // console.log(this.widgetOptions);
         if (this.bigscreenWidth != this.dashboard.width) {
           this.bigscreenWidth = this.dashboard.width;
         }
@@ -1023,7 +1138,7 @@ export default {
           }
           newSetup.push(el);
         });
-        console.log(newSetup);
+        // console.log(newSetup);
         this.widgetOptions.setup = newSetup;
       } else {
         // 如果当前选中的是 Tabs 内部子组件，优先更新内部子组件的配置
@@ -1059,9 +1174,26 @@ export default {
             if (this.widgetIndex == i) {
               this.widgets[i].value[key] = this.deepClone(val);
               this.setDefaultValue(this.widgets[i].options[key], val);
+              // 同步 tabsList 回 widgetOptions，防止 setup 配置变更时丢失 tabs 的子组件数据
+              const currentWidget = this.widgets[i];
+              if (currentWidget && currentWidget.value && currentWidget.value.setup && currentWidget.value.setup.tabsList) {
+                const tabsListItem = this.widgetOptions.setup.find(item => item.name === 'tabsList');
+                if (tabsListItem) {
+                  tabsListItem.value = currentWidget.value.setup.tabsList;
+                }
+              }
             }
           }
         }
+        
+        // 【关键优化】配置变更后，不立即触发整体重渲染！
+        // 只在用户停止操作后，才异步更新 renderWidgets
+        if (this.configChangeTimer) {
+          clearTimeout(this.configChangeTimer);
+        }
+        this.configChangeTimer = setTimeout(() => {
+          this.updateRenderWidgets();
+        }, 300); // 300ms 防抖，等待用户完成连续操作
       }
     },
     setDefaultValue(options, val) {
@@ -1111,7 +1243,7 @@ export default {
     },
     //鼠标按下事件
     downEvent(event){
-      console.log("downEvent")
+      // console.log("downEvent")
       this.moveTimes = 0;
       this.selectedWidgets = [];
       this.openMulDrag = false;
@@ -1127,7 +1259,7 @@ export default {
     },
     //鼠标移动事件
     moveEvent(event){
-      console.log("moveEvent");
+      // console.log("moveEvent");
       //测试的时候发现，每次点击组件，再次点击大屏的时候，偶尔会触发一次moveEvent,导致会生成rect，所以加了移动次数moveTimes 变量控制一下，只有移动多次的情况下，才能说明是框选多选
       if(this.selectFlag && this.selectedWidgets.length <= 1 && this.moveTimes >= 1){
         if(this.rect === null){
@@ -1227,7 +1359,74 @@ export default {
           (widget.value.position.top - this.downY) * (widget.value.position.top - this.downY2) < 0 ||
           (widget.value.position.top + widget.value.position.height - this.downY) * (widget.value.position.top + widget.value.position.height- this.downY2) < 0
         );
-    }
+    },
+    /**
+     * 分批渲染组件，避免一次性创建过多 DOM 节点导致页面卡顿
+     */
+    startBatchRender() {
+      this.renderedCount = 0;
+      this.renderBatches = [];
+      
+      const renderNextBatch = () => {
+        if (this.renderedCount >= this.widgets.length) {
+          console.log('[Designer] 所有组件渲染完成，总数:', this.widgets.length);
+          return;
+        }
+        
+        // 计算本批次要渲染的组件
+        const start = this.renderedCount;
+        const end = Math.min(start + this.batchSize, this.widgets.length);
+        
+        // 使用 slice 创建新批次并冻结，避免响应式系统占用内存
+        const batch = [];
+        for (let i = start; i < end; i++) {
+          batch.push(Object.freeze({
+            ...this.widgets[i],
+            originalIndex: i
+          }));
+        }
+        
+        // 添加到渲染批次
+        this.renderBatches.push(Object.freeze(batch));
+        this.renderedCount = end;
+        
+        console.log(`[Designer] 渲染第 ${this.renderBatches.length} 批，组件 ${start}-${end-1}`);
+        
+        // 继续渲染下一批
+        if (this.renderedCount < this.widgets.length) {
+          this.renderTimer = setTimeout(renderNextBatch, 50); // 每批间隔 50ms
+        }
+      };
+      
+      // 开始渲染第一批
+      renderNextBatch();
+    },
+    /**
+     * 立即渲染所有组件 (用于组件数量较少时)
+     */
+    renderAllWidgets() {
+      if (this.widgets.length <= this.batchSize) {
+        // 组件数量少，直接渲染
+        const batch = this.widgets.map((w, i) => Object.freeze({
+          ...w,
+          originalIndex: i
+        }));
+        this.renderBatches = [Object.freeze(batch)];
+      } else {
+        // 组件数量多，分批渲染
+        this.startBatchRender();
+      }
+    },
+    /**
+     * 更新渲染批次（用于配置变更后刷新组件列表）
+     */
+    updateRenderWidgets() {
+      if (!this.widgets || this.widgets.length === 0) {
+        this.renderBatches = [];
+        return;
+      }
+      this.renderAllWidgets();
+    },
   },
 };
 </script>
diff --git a/src/views/bigscreenDesigner/designer/linkageLogic.js b/src/views/bigscreenDesigner/designer/linkageLogic.js
index 3f81cdb..265670f 100644
--- a/src/views/bigscreenDesigner/designer/linkageLogic.js
+++ b/src/views/bigscreenDesigner/designer/linkageLogic.js
@@ -6,6 +6,41 @@
  * @Description: 各联动组件的参数配置 参数paramsKey的值具体封装时再改
  */
 import { eventBus as bus } from "@/utils/eventBus";
+
+// 组件实例映射表：通过 widgetId 获取组件实例
+export const widgetInstanceMap = {};
+
+/**
+ * 注册组件实例
+ * @param {Object} instance - Vue组件实例
+ */
+export const registerWidgetInstance = function(instance) {
+  if (instance && instance.value && instance.value.setup && instance.value.setup.widgetId) {
+    const widgetId = instance.value.setup.widgetId;
+    widgetInstanceMap[widgetId] = instance;
+  }
+};
+
+/**
+ * 注销组件实例
+ * @param {Object} instance - Vue组件实例
+ */
+export const unregisterWidgetInstance = function(instance) {
+  if (instance && instance.value && instance.value.setup && instance.value.setup.widgetId) {
+    const widgetId = instance.value.setup.widgetId;
+    delete widgetInstanceMap[widgetId];
+  }
+};
+
+/**
+ * 根据 widgetId 获取组件实例
+ * @param {String} widgetId
+ * @returns {Object} 组件实例
+ */
+export const getWidgetInstance = function(widgetId) {
+  return widgetInstanceMap[widgetId];
+};
+
 export const lickageParamsConfig = [
   // {
   //   name: '按钮组',
@@ -63,6 +98,16 @@ export const lickageParamsConfig = [
     code: 'widget-button',
     paramsKey: [] //按钮需要的key来源于要联动的组件所需要的参数
   },
+  {
+    name: '分页组件',
+    code: 'widget-pagination',
+    paramsKey: ['currentPage', 'pageSize', 'total', 'pageCount']
+  },
+  {
+    name: '表格',
+    code: 'widget-table',
+    paramsKey: ['list', 'total', 'currentPage', 'pageSize', 'pageCount']
+  },
 ]
 
 export const getOneConfigByCode = function (code) {
@@ -78,47 +123,51 @@ export const getOneConfigByName = function (name) {
  * @param self 组件实例对象 this
  * @param isActiveClick 主动触发(非echart类click事件触发)
  * @param buttonConfig 按钮组组件的配置
- * 40@remarks
- * 1、v-chart 需添加 ref="myVChart" 以获取实例
- * 2、 发消息发过去的对象 待封装配置动态兼容
  */
 export const originWidgetLinkageLogic = function (self, isActiveClick = false, buttonConfig = {}) {
-  // if (self.allComponentLinkage && self.allComponentLinkage.length && self.allComponentLinkage[self.widgetIndex].index !== -1 && self.allComponentLinkage[self.widgetIndex].linkageArr.length) {
-  if (self.optionsSetup.componentLinkage && self.optionsSetup.componentLinkage.length) {
-    if (isActiveClick) { // 主动触发
-      self.allComponentLinkage[self.widgetIndex].linkageArr.forEach(item => {
-        console.log(item)
-        console.log(`bus_${item.originId}_${item.targetId}`, ' -联动逻辑点击-发送消息', buttonConfig)
-        bus.$emit(`bus_${item.originId}_${item.targetId}`, buttonConfig.currentData)
+  if (!self.optionsSetup.componentLinkage || !self.optionsSetup.componentLinkage.length) {
+    return;
+  }
+
+  const currentWidgetId = self.value.setup.widgetId;
+  const currentLinkage = self.allComponentLinkage.find(item => {
+    return item && item.widgetId === currentWidgetId;
+  });
+
+  if (currentLinkage && currentLinkage.linkageArr && currentLinkage.linkageArr.length) {
+    if (isActiveClick) { // 主动触发（按钮点击）
+      // 按钮组件：需要从源组件获取实时数据
+      if (self.value.setup.widgetCode === 'widget-button') {
+        const firstLinkage = currentLinkage.linkageArr[0];
+
+        if (firstLinkage && firstLinkage.originId) {
+          const sourceWidgetInstance = getWidgetInstance(firstLinkage.originId);
+
+          if (sourceWidgetInstance && typeof sourceWidgetInstance.getLinkageData === 'function') {
+            buttonConfig.currentData = sourceWidgetInstance.getLinkageData();
+          } else {
+            // 源组件未找到或没有 getLinkageData 方法，使用传入的数据
+            console.warn('[Linkage] 源组件未找到或无 getLinkageData:', firstLinkage.originId);
+          }
+        }
+      }
+      console.log('buttonConfig.currentData', buttonConfig.currentData)
+      currentLinkage.linkageArr.forEach(item => {
+        bus.$emit(`bus_${item.originId}_${item.targetId}`, {
+          ...buttonConfig.currentData,
+          _paramsConfig: item.paramsConfig
+        })
       })
-    } else { // chart 组件
+    } 
+    else {
       self.$refs.myVChart.chart.on('click', function (params) {
-        self.allComponentLinkage[self.widgetIndex].linkageArr.forEach(item => {
-          console.log(`bus_${item.originId}_${item.targetId}`, ' -联动逻辑点击-发送消息', params)
-          console.log(self.value)
+        currentLinkage.linkageArr.forEach(item => {
           let message = {}
           const widgetConfigTemp = getOneConfigByCode(self.value.widgetCode)
-          console.log('widgetConfigTemp', widgetConfigTemp)
-          if (widgetConfigTemp && widgetConfigTemp.paramsKey.length) { // 动态加载各组件的参数来封装
+          if (widgetConfigTemp && widgetConfigTemp.paramsKey.length) {
             widgetConfigTemp.paramsKey.forEach(key => {
               message[key] = params[key]
             })
-            // 40@remarks 部分组件 传参需要特殊处理下
-            // ……
-            // 40@remarks 专用于测试联动发消息 手动改造消息内容
-            // if (self.value.widgetCode === 'widgetMap2d') {
-            //   const nameTemp = ['苹果', '三星', '小米', '华为', 'OPPO', 'VIVO']
-            //   // message = {
-            //   //   name: nameTemp[(params.dataIndex % 6)],
-            //   //   value: params.value,
-            //   //   dataIndex: params.dataIndex
-            //   // }
-            //   // message.name = nameTemp[(+params.value % 6)]
-            //   message.name = nameTemp[(parseInt(Math.random() * 6) % 6)]
-            // }
-            // if (self.value.widgetCode === 'widget-piechart') {
-            //   message.name = (parseInt(Math.random() * 2) % 2) === 0 ? '深圳市' : '盐田区'
-            // }
           } else {
             message = {
               name: params.name,
@@ -138,33 +187,39 @@ export const originWidgetLinkageLogic = function (self, isActiveClick = false, b
  * @returns
  */
 export const targetWidgetLinkageLogic = function (self) {
-  const busEvents = []
-  // 有无有关联的组件
-  if (!self.allComponentLinkage || !self.allComponentLinkage.length) return
+  if (!self.allComponentLinkage || !self.allComponentLinkage.length) {
+    return;
+  }
+
+  const currentWidgetId = self.value.setup.widgetId;
+  const componentSelf = self;
+  const busEvents = [];
+
   self.allComponentLinkage.some(item => {
-    if (item.index !== -1 && item.linkageArr.length) {
+    if (item && item.linkageArr && item.linkageArr.length) {
       item.linkageArr.some(obj => {
-        if (obj.targetId === self.value.setup.widgetId) {
-          //如果当前对象是button按钮，需要把传递参数设置给他，方便点击的时候校验表单输入情况
+        if (obj.targetId === currentWidgetId) {
           if (self.value.setup.widgetCode === 'widget-button') {
-            self.setFormData(obj.paramsConfig); //把要校验的参数传给button表单
+            self.setFormData(obj.paramsConfig);
           }
-          self.hasLinkage = true
+          self.hasLinkage = true;
           busEvents.push({
             eventName: `bus_${obj.originId}_${obj.targetId}`,
             paramsConfig: obj.paramsConfig
-          })
-          return true
+          });
+          return true;
         }
-      })
+      });
     }
-  })
+  });
+
   if (self.hasLinkage) {
     busEvents.forEach(item => {
-      bus.$on(item.eventName, e => {
-        console.log(item.eventName, ' 接收消息e', e)
-        self.setOptionsData(e, item.paramsConfig)
-      })
-    })
+      bus.$on(item.eventName, function(e) {
+        if (componentSelf && typeof componentSelf.setOptionsData === 'function') {
+          componentSelf.setOptionsData(e, item.paramsConfig);
+        }
+      });
+    });
   }
 }
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/form/widget-form-time.js b/src/views/bigscreenDesigner/designer/tools/configure/form/widget-form-time.js
index 14657ff..a4653fb 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/form/widget-form-time.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/form/widget-form-time.js
@@ -27,6 +27,8 @@ export const widgetFormTime = {
         selectOptions: [
           { code: 'datetimerange', name: 'yyyy-MM-dd HH:mm:ss' },
           { code: 'daterange', name: 'yyyy-MM-dd' },
+          { code: 'monthrange', name: 'yyyy-MM' },
+          { code: 'yearrange', name: 'yyyy' },
         ],
         value: 'datetimerange',
       },
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/scatterCharts/widget-quadrant-scatter.js b/src/views/bigscreenDesigner/designer/tools/configure/scatterCharts/widget-quadrant-scatter.js
new file mode 100644
index 0000000..946c5a1
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/scatterCharts/widget-quadrant-scatter.js
@@ -0,0 +1,1198 @@
+/*
+ * @Descripttion: 四象限散点图json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2026-04-11
+ */
+export const widgetQuadrantScatter = {
+  code: 'widget-quadrant-scatter',
+  type: 'quadrantScatter',
+  tabName: '四象限图',
+  label: '四象限散点图',
+  icon: 'icon-24gf-chartScatter',
+  options: {
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '四象限散点图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题显示',
+              name: 'isShowTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '标题名',
+              name: 'text',
+              required: false,
+              placeholder: '',
+              value: '产品分析',
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#FFD700'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'textFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'textFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
+              ],
+              value: 'sans-serif'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题名',
+              name: 'subtext',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '副标题颜色',
+              name: 'subtextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(30, 144, 255, 1)'
+            },
+            {
+              type: 'el-input-number',
+              label: '副标题字号',
+              name: 'subtextFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'el-select',
+              label: '副标题粗细',
+              name: 'subtextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '左右位置',
+              name: 'titleLeft',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-slider',
+              label: '上下间距',
+              name: 'titleTop',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-input-number',
+              label: '主副标题间距',
+              name: 'titleItemGap',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+          ],
+        },
+        {
+          name: '四象限设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: 'X轴分割值',
+              name: 'splitX',
+              required: false,
+              placeholder: '',
+              value: 30,
+            },
+            {
+              type: 'el-input-number',
+              label: 'Y轴分割值',
+              name: 'splitY',
+              required: false,
+              placeholder: '',
+              value: 30,
+            },
+            {
+              type: 'el-switch',
+              label: '显示分割线标注',
+              name: 'isShowSplitLabel',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: 'X轴分割标注',
+              name: 'splitXLabel',
+              required: false,
+              placeholder: '如: 销售额增长率>30%',
+              value: '销售额增长率>30%',
+            },
+            {
+              type: 'el-input-text',
+              label: 'Y轴分割标注',
+              name: 'splitYLabel',
+              required: false,
+              placeholder: '如: 毛利率>30%',
+              value: '毛利率>30%',
+            },
+            {
+              type: 'vue-color',
+              label: '分割标注背景',
+              name: 'splitLabelBgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 123, 255, 0.8)',
+            },
+            {
+              type: 'vue-color',
+              label: '分割标注颜色',
+              name: 'splitLabelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '分割标注字号',
+              name: 'splitLabelFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColor',
+              required: false,
+              placeholder: '',
+              value: '#666666',
+            },
+            {
+              type: 'el-input-number',
+              label: '分割线宽度',
+              name: 'splitLineWidth',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+            {
+              type: 'el-select',
+              label: '分割线类型',
+              name: 'splitLineType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'solid', name: '实线'},
+                {code: 'dashed', name: '虚线'},
+                {code: 'dotted', name: '点线'},
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-switch',
+              label: '显示象限标签',
+              name: 'isShowQuadrantLabel',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '象限字号',
+              name: 'quadrantLabelFontSize',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-select',
+              label: '象限字重',
+              name: 'quadrantLabelFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+              ],
+              value: 'bold'
+            },
+          ],
+        },
+        {
+          name: '第二象限设置(右上)',
+          list: [
+            {
+              type: 'el-input-text',
+              label: '象限名称',
+              name: 'quadrant2Label',
+              required: false,
+              placeholder: '',
+              value: '问题产品',
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'quadrant2LabelColor',
+              required: false,
+              placeholder: '',
+              value: '#FF9800',
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'quadrant2BgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 152, 0, 0.2)',
+            },
+          ],
+        },
+        {
+          name: '第一象限设置(左上)',
+          list: [
+            {
+              type: 'el-input-text',
+              label: '象限名称',
+              name: 'quadrant1Label',
+              required: false,
+              placeholder: '',
+              value: '明星产品',
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'quadrant1LabelColor',
+              required: false,
+              placeholder: '',
+              value: '#4CAF50',
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'quadrant1BgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(76, 175, 80, 0.2)',
+            },
+          ],
+        },
+        {
+          name: '第三象限设置(左下)',
+          list: [
+            {
+              type: 'el-input-text',
+              label: '象限名称',
+              name: 'quadrant3Label',
+              required: false,
+              placeholder: '',
+              value: '瘦狗产品',
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'quadrant3LabelColor',
+              required: false,
+              placeholder: '',
+              value: '#9E9E9E',
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'quadrant3BgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(158, 158, 158, 0.2)',
+            },
+          ],
+        },
+        {
+          name: '第四象限设置(右下)',
+          list: [
+            {
+              type: 'el-input-text',
+              label: '象限名称',
+              name: 'quadrant4Label',
+              required: false,
+              placeholder: '',
+              value: '金牛产品',
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'quadrant4LabelColor',
+              required: false,
+              placeholder: '',
+              value: '#2196F3',
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'quadrant4BgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(33, 150, 243, 0.2)',
+            },
+          ],
+        },
+        {
+          name: '散点设置',
+          list: [
+            {
+              type: 'el-select',
+              label: '点样式',
+              name: 'symbol',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'circle', name: '实心点' },
+                { code: 'emptyCircle', name: '空心点' },
+              ],
+              value: 'circle'
+            },
+            {
+              type: 'el-slider',
+              label: '点大小',
+              name: 'pointSize',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'vue-color',
+              label: '点边框颜色',
+              name: 'pointBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#007BFF',
+            },
+            {
+              type: 'el-input-number',
+              label: '点边框宽度',
+              name: 'pointBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 2,
+            },
+            {
+              type: 'vue-color',
+              label: '点填充颜色',
+              name: 'pointFillColor',
+              required: false,
+              placeholder: '',
+              value: '#FF7F50',
+            },
+            {
+              type: 'el-select',
+              label: '配色样式',
+              name: 'colorStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'same', name: '同色' },
+                { code: 'unsame', name: '异色' },
+              ],
+              value: 'unsame'
+            },
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{ color: '#FF7F50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
+            },
+          ],
+        },
+        {
+          name: '数据标注设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示标注',
+              name: 'isShowLabel',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '标注格式',
+              name: 'labelFormat',
+              required: false,
+              placeholder: '可用占位符: {name},{value},{x},{y}',
+              value: '{name}',
+            },
+            {
+              type: 'el-input-text',
+              label: '金额字段名',
+              name: 'amountField',
+              required: false,
+              placeholder: '如: amount',
+              value: 'amount',
+            },
+            {
+              type: 'el-input-text',
+              label: '金额单位',
+              name: 'amountUnit',
+              required: false,
+              placeholder: '如: 万',
+              value: '万',
+            },
+            {
+              type: 'el-select',
+              label: '标注位置',
+              name: 'labelPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'top', name: '上' },
+                { code: 'bottom', name: '下' },
+                { code: 'right', name: '右' },
+                { code: 'left', name: '左' },
+              ],
+              value: 'right'
+            },
+            {
+              type: 'el-input-number',
+              label: '标注偏移X',
+              name: 'labelOffsetX',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-input-number',
+              label: '标注偏移Y',
+              name: 'labelOffsetY',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'vue-color',
+              label: '标注颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '标注字号',
+              name: 'labelFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '标注字重',
+              name: 'labelFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          name: '右侧数据列表',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示列表',
+              name: 'isShowRightList',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '列表标题',
+              name: 'rightListTitle',
+              required: false,
+              placeholder: '',
+              value: '数据分析',
+            },
+            {
+              type: 'vue-color',
+              label: '标题颜色',
+              name: 'rightListTitleColor',
+              required: false,
+              placeholder: '',
+              value: '#FFD700',
+            },
+            {
+              type: 'el-input-number',
+              label: '标题字号',
+              name: 'rightListTitleFontSize',
+              required: false,
+              placeholder: '',
+              value: 16,
+            },
+            {
+              type: 'el-input-number',
+              label: '列表宽度',
+              name: 'rightListWidth',
+              required: false,
+              placeholder: '',
+              value: 200,
+            },
+            {
+              type: 'el-slider',
+              label: '宽度占比(%)',
+              name: 'rightListWidthRatio',
+              required: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'el-slider',
+              label: '高度占比(%)',
+              name: 'rightListHeightRatio',
+              required: false,
+              placeholder: '',
+              value: 100,
+            },
+            {
+              type: 'vue-color',
+              label: '列表背景色',
+              name: 'rightListBgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.3)',
+            },
+            {
+              type: 'el-input-number',
+              label: '内边距',
+              name: 'rightListPadding',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'vue-color',
+              label: '象限标题颜色',
+              name: 'quadrantTitleColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '象限标题字号',
+              name: 'quadrantTitleFontSize',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数据文字颜色',
+              name: 'listItemColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 255, 255, 0.8)',
+            },
+            {
+              type: 'el-input-number',
+              label: '数据字号',
+              name: 'listItemFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-text',
+              label: '列表数据格式',
+              name: 'listItemFormat',
+              required: false,
+              placeholder: '{name}：{amount}{unit}',
+              value: '{name}：{amount}{unit}',
+            },
+          ],
+        },
+        {
+          name: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'nameX',
+              required: false,
+              placeholder: '',
+              value: '销售额增长率'
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标名字号',
+              name: 'nameFontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'el-input-text',
+              label: '最小值',
+              name: 'minX',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxX',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '坐标轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标轴宽度',
+              name: 'lineWidthX',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineX',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
+        },
+        {
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxY',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'el-input-text',
+              label: '最小值',
+              name: 'minY',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: '毛利率'
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标名字号',
+              name: 'nameFontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '坐标轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标轴宽度',
+              name: 'lineWidthY',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-select',
+              label: '位置',
+              name: 'fontPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '上'},
+                {code: 'left', name: '左'},
+                {code: 'right', name: '右'},
+                {code: 'inside', name: '里'},
+                {code: 'insideTop', name: '里顶'},
+                {code: 'insideLeft', name: '里左'},
+                {code: 'insideRight', name: '里右'},
+                {code: 'insideBottom', name: '里底'},
+              ],
+              value: 'inside'
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'fontDistance',
+              required: false,
+              placeholder: '',
+              value: 10
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'dataColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '触发类型',
+              name: 'tooltipTrigger',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'item', name: '数据项'},
+                {code: 'axis', name: '坐标轴'},
+              ],
+              value: 'item'
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'tooltipBackgroundColor',
+              required: false,
+              placeholder: '',
+              value: '#333'
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'tooltipColor',
+              required: false,
+              placeholder: '',
+              value: '#00FEFF'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'tooltipFontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+          ],
+        },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'legendColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'legendFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: 'top'
+            },
+          ],
+        },
+        {
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 10,
+            }, {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 50,
+            }, {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 40,
+            }, {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 40,
+            },
+          ],
+        },
+      ],
+    ],
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 600000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '字段映射',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-quadrant-scatter',
+        dictKey: 'SCATTER_PROPERTIES_FOUR',
+        value: {
+          'name': 'name',
+          'xAxis': 'xData',
+          'yAxis': 'yData'
+        },
+      },
+    ],
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 400,
+      },
+    ],
+    methods: []
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-pagination.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-pagination.js
new file mode 100644
index 0000000..8d71593
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-pagination.js
@@ -0,0 +1,260 @@
+/*
+ * @Descripttion: 分页组件 json
+ * @version:
+ * @Author: lishuaiwu
+ * @Date: 2025-06-05 13:44:32
+ */
+export const widgetPagination = {
+  code: 'widget-pagination',
+  type: 'text',
+  tabName: '文本栏',
+  label: '分页',
+  icon: 'iconbiaoge',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '分页',
+      },
+      [
+        {
+          name: '分页样式',
+          list: [
+            {
+              type: 'el-switch',
+              label: '开启背景色',
+              name: 'enableBackground',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '页码背景色',
+              name: 'itemBackground',
+              required: false,
+              placeholder: '',
+              value: 'rgb(255, 255, 255)',
+              relactiveDom: 'enableBackground',
+              relactiveDomValue: true
+            },
+            {
+              type: 'vue-color',
+              label: '页码文字颜色',
+              name: 'itemTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgb(51, 51, 51)'
+            },
+            {
+              type: 'vue-color',
+              label: '选中背景色',
+              name: 'selectedBackground',
+              required: false,
+              placeholder: '',
+              value: 'rgb(10, 115, 255)',
+              relactiveDom: 'enableBackground',
+              relactiveDomValue: true
+            },
+            {
+              type: 'vue-color',
+              label: '选中文字颜色',
+              name: 'selectedTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgb(255, 255, 255)'
+            },
+            {
+              type: 'vue-color',
+              label: '边框颜色',
+              name: 'borderColor',
+              required: false,
+              placeholder: '',
+              value: 'rgb(221, 221, 221)',
+              relactiveDom: 'enableBackground',
+              relactiveDomValue: true
+            },
+            {
+              type: 'vue-color',
+              label: '禁用文字颜色',
+              name: 'disabledTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgb(204, 204, 204)'
+            },
+            {
+              type: 'vue-color',
+              label: '总数字体颜色',
+              name: 'totalTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgb(51, 51, 51)'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14,
+              min: 12,
+              max: 32
+            },
+            {
+              type: 'el-switch',
+              label: '自定义每页条数',
+              name: 'customPageSize',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '设置条数',
+              name: 'pageSize',
+              required: false,
+              placeholder: '',
+              value: 10,
+              min: 1,
+              max: 1000,
+              step: 1,
+              relactiveDom: 'customPageSize',
+              relactiveDomValue: true
+            },
+            {
+              type: 'el-switch',
+              label: '显示上一页/下一页',
+              name: 'showPrevNext',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '显示跳页器',
+              name: 'showJumper',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-switch',
+              label: '显示总条数',
+              name: 'showTotal',
+              required: false,
+              placeholder: '',
+              value: true,
+            }
+          ]
+        }
+      ],
+      [{
+        name: '组件联动',
+        list: [
+          {
+            type: 'componentLinkage',
+            label: '',
+            name: 'componentLinkage',
+            required: false,
+            value: []
+          }
+        ]
+      }]
+    ],
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间 (毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 600000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 10,
+          pageCount: 0
+        },
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-pagination',
+        dictKey: 'PAGINATION_PROPERTIES',
+        value: '',
+      }
+    ],
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在 1920px 大屏中的宽度',
+        value: 600,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在 1080px 大屏中的高度',
+        value: 400,
+      },
+    ]
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js
index bf4e7d1..d6bba10 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js
@@ -299,7 +299,7 @@ export const widgetTable = {
             },
             {
               type: 'el-input-number',
-              label: '滚动间隔(毫秒)',
+              label: '滚动间隔 (毫秒)',
               name: 'interTime',
               required: false,
               placeholder: '',
@@ -307,7 +307,7 @@ export const widgetTable = {
             },
             {
               type: 'el-input-number',
-              label: '动效时间(毫秒)',
+              label: '动效时间 (毫秒)',
               name: 'delayTime',
               required: false,
               placeholder: '',
@@ -323,6 +323,135 @@ export const widgetTable = {
             },
           ]
         },
+        {
+          name: '分页设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示分页',
+              name: 'showPagination',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '每页条数',
+              name: 'pageSize',
+              required: false,
+              placeholder: '',
+              value: 10,
+              min: 1,
+              max: 100,
+              step: 1
+            },
+            {
+              type: 'el-select',
+              label: '分页布局',
+              name: 'paginationLayout',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'total, sizes, prev, pager, next, jumper', name: '完整' },
+                { code: 'total, prev, pager, next', name: '简洁' },
+                { code: 'prev, pager, next', name: '仅翻页' },
+                { code: 'total', name: '仅总数' },
+              ],
+              value: 'total, sizes, prev, pager, next, jumper'
+            },
+            {
+              type: 'el-switch',
+              label: '显示总条数',
+              name: 'showTotal',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-switch',
+              label: '带背景色',
+              name: 'paginationBackground',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'vue-color',
+              label: '分页主题色',
+              name: 'paginationActiveColor',
+              require: false,
+              placeholder: '',
+              value: '#409EFF',
+            },
+            {
+              type: 'vue-color',
+              label: '总条数颜色',
+              name: 'paginationTotalColor',
+              require: false,
+              placeholder: '',
+              value: '#606266',
+            },
+            {
+              type: 'vue-color',
+              label: '页码文字颜色',
+              name: 'paginationPageNumberColor',
+              require: false,
+              placeholder: '',
+              value: '#606266',
+            },
+            {
+              type: 'vue-color',
+              label: '选中背景色',
+              name: 'paginationSelectedBgColor',
+              require: false,
+              placeholder: '',
+              value: '#409EFF',
+            },
+            {
+              type: 'el-switch',
+              label: '显示跳页器',
+              name: 'showPaginationJumper',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '分页位置',
+              name: 'paginationPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-number',
+              label: '分页上边距',
+              name: 'paginationMarginTop',
+              required: false,
+              placeholder: '',
+              value: 10,
+              min: 0,
+              max: 100,
+              step: 1
+            },
+            {
+              type: 'el-input-number',
+              label: '分页下边距',
+              name: 'paginationMarginBottom',
+              required: false,
+              placeholder: '',
+              value: 10,
+              min: 0,
+              max: 100,
+              step: 1
+            }
+          ]
+        },
       ],
         {
           type: 'el-switch',
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index a322fb2..1e85194 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -20,6 +20,7 @@ import {widgetVideoMonitor} from "./configure/texts/widget-videoMonitor"
 import {widgetTable} from "./configure/texts/widget-table"
 import {widgetIframe} from "./configure/texts/widget-iframe"
 import {widgetCalendar} from "./configure/texts/widget-calendar"
+import {widgetPagination} from "./configure/texts/widget-pagination"
 import {widgetUniversal} from "./configure/widget-universal"
 import {widgetBarchart} from "./configure/barCharts/widget-barchart"
 import {widgetGradientBarchart} from "./configure/barCharts/widget-gradient-barchart"
@@ -48,6 +49,7 @@ import {widgetFormTime} from "./configure/form/widget-form-time";
 import {widgetScaleVertical} from "./configure/scaleCharts/widget-scale-vertical";
 import {widgetScaleHorizontal} from "./configure/scaleCharts/widget-scale-horizontal"
 import {widgetScatter} from "./configure/scatterCharts/widget-scatter";
+import {widgetQuadrantScatter} from "./configure/scatterCharts/widget-quadrant-scatter";
 import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
 import {widgetBorder} from "./configure/styleWidget/widget-border";
 import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line";
@@ -77,6 +79,7 @@ export const widgetTool = [
   widgetIframe,
   widgetCalendar,
   //  widgetUniversal,
+  widgetPagination,
   widgetBarchart,
   widgetGradientBarchart,
   widgetLinechart,
@@ -101,6 +104,7 @@ export const widgetTool = [
   widgetScaleVertical,
   widgetScaleHorizontal,
   widgetScatter,
+  widgetQuadrantScatter,
   widgetSelect,
   // widgetInput,
   widgetFormTime,
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
index 49bcefe..843227d 100644
--- a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
@@ -743,6 +743,13 @@ export default {
       this.setOptionsLegendName(legendName);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue
index 3a35711..8f0e5f3 100644
--- a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue
@@ -622,6 +622,13 @@ export default {
       this.setOptionsLegendName(legendName);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
index a0e98c5..2cc8072 100644
--- a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
@@ -619,6 +619,13 @@ export default {
       })
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackMoreShowChart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackMoreShowChart.vue
index 2793e77..0251221 100644
--- a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackMoreShowChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackMoreShowChart.vue
@@ -598,6 +598,13 @@ export default {
       this.setOptionsLegendName(legendName);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
index f555e57..6a1fc21 100644
--- a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
@@ -625,6 +625,13 @@ export default {
       this.setOptionsLegendName(legendName);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
index 593b5cc..69185f1 100644
--- a/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -597,6 +597,13 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineSingleChart.vue b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineSingleChart.vue
index e4ed57b..efb4b45 100644
--- a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineSingleChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineSingleChart.vue
@@ -646,6 +646,13 @@ export default {
       this.setOptionsLegendName(legendName);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
index 029f339..1b0651c 100644
--- a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
@@ -795,6 +795,13 @@ export default {
       return data;
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
index b7211ff..b8d508f 100644
--- a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
@@ -204,6 +204,9 @@ export default {
           interval: optionsSetup.textIntervalX,
           // 文字角度
           rotate: optionsSetup.textAngleX,
+          // 动态宽度基础保底，实际宽度会在图表数据填充时重新计算
+          width: 60,
+          overflow: "truncate",
           textStyle: {
             // 坐标文字颜色
             color: optionsSetup.textColorX,
@@ -570,12 +573,19 @@ export default {
       legendName.push("line");
       const optionsSetup = this.optionsSetup;
       // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
-      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.textFontSizeX);
+      const xAxisDataLength = axis && axis.length > 0 ? axis.length : 1;
+      const labelWidth = Math.max(
+        parseInt((this.optionsStyle.width - 60) / xAxisDataLength),
+        30
+      );
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt(labelWidth / optionsSetup.textFontSizeX);
       const axisLabel = {
         show: optionsSetup.isShowAxisLabelX,
         interval: optionsSetup.textIntervalX,
         // 文字角度
         rotate: optionsSetup.textAngleX,
+        width: labelWidth,
+        overflow: optionsSetup.textRowsBreakAuto ? "break" : "truncate",
         textStyle: {
           // 坐标文字颜色
           color: optionsSetup.textColorX,
@@ -633,13 +643,19 @@ export default {
       }
       const optionsSetup = this.optionsSetup;
       // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
-      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
-      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.textFontSizeX);
+      const xAxisDataLength = val && val.xAxis && val.xAxis.length > 0 ? val.xAxis.length : 1;
+      const labelWidth = Math.max(
+        parseInt((this.optionsStyle.width - 60) / xAxisDataLength),
+        30
+      );
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt(labelWidth / optionsSetup.textFontSizeX);
       const axisLabel = {
         show: optionsSetup.isShowAxisLabelX,
         interval: optionsSetup.textIntervalX,
         // 文字角度
         rotate: optionsSetup.textAngleX,
+        width: labelWidth,
+        overflow: optionsSetup.textRowsBreakAuto ? "break" : "truncate",
         textStyle: {
           // 坐标文字颜色
           color: optionsSetup.textColorX,
diff --git a/src/views/bigscreenDesigner/designer/widget/form/widgetButton.vue b/src/views/bigscreenDesigner/designer/widget/form/widgetButton.vue
index e6a6444..19afc6d 100644
--- a/src/views/bigscreenDesigner/designer/widget/form/widgetButton.vue
+++ b/src/views/bigscreenDesigner/designer/widget/form/widgetButton.vue
@@ -51,7 +51,8 @@ export default {
   data() {
     return {
       options: {},
-      formData: {} , //要提交的参数表单
+      formData: {}, //要提交的参数表单
+      linkageData: null, // 存储从源组件接收到的原始联动数据
     };
   },
   computed: {
@@ -102,57 +103,73 @@ export default {
   methods: {
     //设置表单Key
     setFormData(paramConfig){
-      console.log("paramConfig:" + paramConfig);
+      // console.log("paramConfig:" + paramConfig);
       paramConfig.forEach(item =>{
         this.formData[item.targetKey] = "";
       });
     },
     click() {
-      console.log(this.formData);
+      const currentData = this.linkageData || this.formData;
+      console.log("currentData", currentData);
+      // 检查是否有必填字段需要校验
       let formDataKey = Object.keys(this.formData);
       let needInputAll = false;
-      for(let index in formDataKey){
-        if(this.formData[formDataKey[index]] === null || this.formData[formDataKey[index]] === "" ){
-          needInputAll = true;
-          break;
+      if (formDataKey.length > 0) {
+        // 只有在有配置必填字段时才校验
+        for(let index in formDataKey){
+          // 使用 linkageData 中的值进行校验，而不是 formData
+          const value = currentData[formDataKey[index]];
+          if(value === null || value === undefined || value === ""){
+            needInputAll = true;
+            break;
+          }
         }
       }
       if(needInputAll){
         this.$message.error("请填写所有必填字段");
         return;
       }
+      // 发送联动消息，携带当前数据
       originWidgetLinkageLogic(this, true, {
-        currentData: this.formData,
-      }); // 联动-源组件逻辑
+        currentData: currentData,
+      }); 
     },
 
     setOptionsData(e, paramsConfig) {
       let _this = this;
-      console.log("ces", e);
-      console.log("ces", paramsConfig);
+      // console.log("ces", e);
+      // console.log("ces", paramsConfig);
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
-      // 联动接收者逻辑开始
-      optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
-      const myDynamicData = optionsData.dynamicData;
-      clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
-      if (
-        e &&
-        optionsData.dataType !== "staticData" &&
-        Object.keys(myDynamicData.contextData).length
-      ) {
-        const keyArr = Object.keys(myDynamicData.contextData);
+
+      // 处理来自其他组件的联动数据
+      if (e && paramsConfig && paramsConfig.length) {
+        // 存储原始联动数据，供 click() 使用
+        this.linkageData = e;
+        // 从 paramsConfig 中获取参数映射
         paramsConfig.forEach((conf) => {
-          if (keyArr.includes(conf.targetKey)) {
-            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
-            _this.formData[conf.targetKey] = e[conf.originKey];    //把参数设置到FormData
+          if (conf.targetKey && conf.originKey) {
+            // 将源数据映射到 formData
+            _this.formData[conf.targetKey] = e[conf.originKey];
           }
         });
       }
-      //这里，button按钮是要通过【按钮】联动触发其他组件，本身没有要展示的动态数据，所以无需执行 dynamicDataFn
-      // // 联动接收者逻辑结束
-      // optionsData.dataType == "staticData"
-      //   ? this.staticDataFn(optionsData.staticData)
-      //   : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+
+      // 如果是动态数据，同时更新 contextData 以便后续刷新
+      if (e && optionsData.dataType !== "staticData") {
+        optionsData.dynamicData = optionsData.dynamicData || {};
+        const myDynamicData = optionsData.dynamicData;
+        clearInterval(this.flagInter);
+
+        if (myDynamicData.contextData && Object.keys(myDynamicData.contextData).length) {
+          const keyArr = Object.keys(myDynamicData.contextData);
+          paramsConfig.forEach((conf) => {
+            if (keyArr.includes(conf.targetKey)) {
+              myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+              _this.formData[conf.targetKey] = e[conf.originKey];
+            }
+          });
+        }
+      }
     }
   },
 };
diff --git a/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime copy.vue b/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime copy.vue
new file mode 100644
index 0000000..3ec82ed
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime copy.vue	
@@ -0,0 +1,128 @@
+<!--
+ * @Author: qianlishi qianlishi@anji-plus.com
+ * @Date: 2023-03-06 15:38:10
+ * @LastEditors: qianlishi qianlishi@anji-plus.com
+ * @LastEditTime: 2023-04-20 13:54:57
+-->
+<template>
+  <div class="pickWrap">
+
+  <el-date-picker
+  class="start-picker date-picker"
+  :style="styleObj"
+  v-model="startTime"
+  :value-format="valueFormat"
+  :type="dateType=='datetimerange'?'datetime':'date'"
+  @[eventChange]="change"
+  />
+
+  <el-date-picker
+  class="date-picker"
+  :style="{...styleObj,left:styleObj.leftEnd,width:styleObj.widthEnd}"
+  v-model="endTime"
+  :value-format="valueFormat"
+  :type="dateType=='datetimerange'?'datetime':'date'"
+  @[eventChange]="change"
+  />
+  </div>
+</template>
+<script>
+import {
+  originWidgetLinkageLogic,
+  targetWidgetLinkageLogic,
+} from "@/views/bigscreenDesigner/designer/linkageLogic";
+import miment from 'miment'
+
+export default {
+  name: "WidgetFormTime",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      optionsStyle: {},
+      optionsData: {},
+      optionsSetup: {},
+      endTime:null,
+      startTime:null,
+
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width/2+12 + "px",
+        widthEnd: this.optionsStyle.width/2-12 + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        leftEnd: this.optionsStyle.left+this.optionsStyle.width/2+12 + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.select_background,
+      };
+    },
+    eventChange() {
+      return "change";
+    },
+    dateType() {
+      return this.optionsSetup.dateType || 'datetimerange';
+    },
+    valueFormat() {
+      return this.dateType === 'daterange' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss';
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetup = val.setup;
+        this.optionsData = val.data;
+        this.optionsStyle = val.position;
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsSetup = this.value.setup;
+    this.optionsData = this.value.data;
+    this.optionsStyle = this.value.position;
+
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+  },
+  methods: {
+    change(event) {
+      const formTimeData = {}
+      formTimeData['startTime'] = this.startTime //event[0]  //startTime
+      formTimeData['endTime'] = this.endTime //event[1] //endTime
+      originWidgetLinkageLogic(this, true, {
+        currentData: formTimeData,
+      }); // 联动-源组件逻辑
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.start-picker{
+    display:flex;
+    &:after{
+        content:'-';
+        width:24px;
+        transform:translate(7px,5px)
+    }
+}
+.pickWrap{
+    display:flex;
+   &::v-deep() {
+    .el-input__prefix{
+      height:28px;
+    }
+}
+   }
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue b/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
index 3ec82ed..d1e05dd 100644
--- a/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
+++ b/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
@@ -12,7 +12,7 @@
   :style="styleObj"
   v-model="startTime"
   :value-format="valueFormat"
-  :type="dateType=='datetimerange'?'datetime':'date'"
+  :type="getPickerType"
   @[eventChange]="change"
   />
 
@@ -21,7 +21,7 @@
   :style="{...styleObj,left:styleObj.leftEnd,width:styleObj.widthEnd}"
   v-model="endTime"
   :value-format="valueFormat"
-  :type="dateType=='datetimerange'?'datetime':'date'"
+  :type="getPickerType"
   @[eventChange]="change"
   />
   </div>
@@ -30,6 +30,8 @@
 import {
   originWidgetLinkageLogic,
   targetWidgetLinkageLogic,
+  registerWidgetInstance,
+  unregisterWidgetInstance,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
 import miment from 'miment'
 
@@ -70,10 +72,35 @@ export default {
       return "change";
     },
     dateType() {
+      // 支持: 'datetimerange', 'daterange', 'monthrange', 'yearrange'
       return this.optionsSetup.dateType || 'datetimerange';
     },
+    getPickerType() {
+      // 将范围类型映射为单个选择器类型（因为是两个独立的 picker）
+      const type = this.dateType;
+      if (type === 'yearrange') {
+        return 'year';
+      } else if (type === 'monthrange') {
+        return 'month';
+      } else if (type === 'daterange') {
+        return 'date';
+      } else {
+        // datetimerange 或其他默认情况
+        return 'datetime';
+      }
+    },
     valueFormat() {
-      return this.dateType === 'daterange' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss';
+      const type = this.dateType;
+      if (type === 'yearrange') {
+        return 'yyyy';
+      } else if (type === 'monthrange') {
+        return 'yyyy-MM';
+      } else if (type === 'daterange') {
+        return 'yyyy-MM-dd';
+      } else {
+        // datetimerange 或其他默认情况
+        return 'yyyy-MM-dd HH:mm:ss';
+      }
     },
     allComponentLinkage() {
       return this.$store.state.designer.allComponentLinkage;
@@ -95,8 +122,22 @@ export default {
     this.optionsStyle = this.value.position;
 
     targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    registerWidgetInstance(this); // 注册组件实例，供按钮等组件获取数据
+  },
+  beforeDestroy() {
+    unregisterWidgetInstance(this); // 注销组件实例
   },
   methods: {
+    /**
+     * 获取联动数据 - 供按钮等组件调用
+     * 返回当前时间选择器的值
+     */
+    getLinkageData() {
+      return {
+        startTime: this.startTime,
+        endTime: this.endTime
+      };
+    },
     change(event) {
       const formTimeData = {}
       formTimeData['startTime'] = this.startTime //event[0]  //startTime
diff --git a/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue b/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue
index 9a4d62e..314498d 100644
--- a/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue
+++ b/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue
@@ -129,6 +129,13 @@ export default {
       this.options = val;
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 <style scoped lang="scss">
diff --git a/src/views/bigscreenDesigner/designer/widget/form/widgetTabs copy.vue b/src/views/bigscreenDesigner/designer/widget/form/widgetTabs copy.vue
new file mode 100644
index 0000000..b1b39d8
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/form/widgetTabs copy.vue	
@@ -0,0 +1,876 @@
+<!--
+ * @Author: Devli
+ * @Date: 2024-01-01 00:00:00
+ * @Last Modified by: Devli
+ * @Last Modified time: 2024-01-01 00:00:00
+ !-->
+<template>
+  <div class="widget-tabs" @mousedown.capture="onTabsRootCapture">
+    <el-tabs
+      :style="{ ...styleObj, ...tabsStyle }"
+      :tab-position="tabPosition"
+      :type="tabsType"
+      :closable="closable"
+      :addable="addable"
+      :stretch="stretch"
+      v-model="activeTab"
+      @tab-click="handleTabClick"
+      @tab-remove="handleTabRemove"
+      @tab-add="handleTabAdd"
+    >
+      <el-tab-pane
+        v-for="(tab, index) in tabsList"
+        :key="tab.name || index"
+        :label="tab.label"
+        :name="tab.name || `tab${index}`"
+        :closable="closable"
+      >
+        <div 
+          class="tab-content"
+          data-tab-content
+          :style="contentStyle"
+          @click.capture="onTabContentClick($event, index)"
+          @drop="handleTabDrop($event, tab, index)"
+          @dragover.capture.prevent="handleTabDragOver($event)"
+          @dragover.prevent="handleTabDragOver($event)"
+          @dragenter.capture.prevent="handleTabDragEnter($event)"
+          @dragenter.prevent="handleTabDragEnter($event)"
+        >
+          <!-- 渲染子组件（支持在标签内部拖动、删除） -->
+          <template v-if="tab.children && tab.children.length > 0">
+            <div
+              v-for="(childWidget, childIndex) in tab.children"
+              :key="childWidget.value.widgetId || `child-${index}-${childIndex}`"
+              class="tab-child-draggable"
+              :style="{
+                marginLeft: (childWidget.value.position && typeof childWidget.value.position.left === 'number') ? childWidget.value.position.left + 'px' : '0px',
+                marginTop: (childWidget.value.position && typeof childWidget.value.position.top === 'number') ? childWidget.value.position.top + 'px' : '0px',
+                width: (childWidget.value.position && childWidget.value.position.width) ? childWidget.value.position.width + 'px' : '100px',
+                height: (childWidget.value.position && childWidget.value.position.height) ? childWidget.value.position.height + 'px' : '50px',
+              }"
+            >
+              <div
+                class="tab-child-wrapper"
+                :data-tab-index="index"
+                :data-child-index="childIndex"
+              >
+                <!-- 选中子组件的小手柄：点击后触发右侧显示该子组件配置 -->
+                <span
+                  v-if="!ispreview"
+                  class="tab-child-select-handle"
+                  title="选中并配置该组件"
+                  @mousedown.stop.prevent="onTabChildHandleDown(index, childIndex)"
+                  >
+                  <i class="el-icon-setting tab-child-select-icon"></i>
+                </span>
+                <component
+                  :is="getComponentName(childWidget.type)"
+                  :value="childWidget.value"
+                  :widget-index="childIndex"
+                  :ispreview="ispreview"
+                  class="tab-child-component"
+                />
+              </div>
+            </div>
+          </template>
+          <div v-else class="tab-content-empty">
+            拖拽组件到这里
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import {
+  originWidgetLinkageLogic,
+  targetWidgetLinkageLogic,
+} from "@/views/bigscreenDesigner/designer/linkageLogic";
+import { getToolByCode } from "@/views/bigscreenDesigner/designer/tools/index";
+// 与主画布 widget.vue 保持一致：注册所有可拖入的组件，否则图表、下拉等会报 Unknown custom element
+import widgetHref from "../texts/widgetHref.vue";
+import widgetText from "../texts/widgetText.vue";
+import widgetButton from "./widgetButton.vue";
+import widgetImage from "../texts/widgetImage.vue";
+import widgetTable from "../texts/widgetTable.vue";
+import widgetPagination from "../texts/widgetPagination.vue";
+import WidgetMarquee from "../texts/widgetMarquee.vue";
+import widgetTime from "../texts/widgetTime.vue";
+import widgetSlider from "../texts/widgetSlider.vue";
+import widgetVideo from "../texts/widgetVideo.vue";
+import widgetVideoMonitor from "../texts/widgetVideoMonitor.vue";
+import WidgetIframe from "../texts/widgetIframe.vue";
+import widgetCalendar from "../texts/widgetCalendar.vue";
+import widgetBarchart from "../bar/widgetBarchart.vue";
+import widgetScatter from "../scatter/widgetScatter.vue";
+import widgetGradientColorBarchart from "../bar/widgetGradientColorBarchart.vue";
+import widgetLinechart from "../line/widgetLinechart.vue";
+import widgetBarlinechart from "../barline/widgetBarlinechart";
+import WidgetPiechart from "../pie/widgetPiechart.vue";
+import WidgetFunnel from "../funnel/widgetFunnel.vue";
+import WidgetGauge from "../percent/widgetGauge.vue";
+import WidgetPieNightingaleRoseArea from "../pie/widgetPieNightingaleRose";
+import widgetLineMap from "../map/widgetLineMap.vue";
+import widgetPiePercentageChart from "../percent/widgetPiePercentageChart";
+import widgetAirBubbleMap from "../map/widgetAirBubbleMap.vue";
+import widgetBarStackChart from "../bar/widgetBarStackChart.vue";
+import widgetLineStackChart from "../line/widgetLineStackChart.vue";
+import widgetBarCompareChart from "../bar/widgetBarCompareChart.vue";
+import widgetLineCompareChart from "../line/widgetLineCompareChart.vue";
+import widgetDecoratePieChart from "../styleWidget/widgetDecoratePieChart.vue";
+import widgetMoreBarLineChart from "../barline/widgetMoreBarLineChart";
+import widgetWordCloud from "../wordcloud/widgetWordCloud.vue";
+import widgetHeatmap from "../heatmap/widgetHeatmap.vue";
+import widgetRadar from "../radar/widgetRadar.vue";
+import widgetBarLineStackChart from "../barline/widgetBarLineStackChart";
+import widgetSelect from "./widgetSelect.vue";
+import widgetFormTime from "./widgetFormTime.vue";
+import widgetScaleVertical from "../scale/widgetScaleVertical.vue";
+import widgetScaleHorizontal from "../scale/widgetScaleHorizontal.vue";
+import widgetBarDoubleYaxisChart from "../bar/widgetBarDoubleYaxisChart.vue";
+import widgetBorder from "../styleWidget/widgetBorder.vue";
+import widgetDecorateFlowLine from "../styleWidget/widgetDecorateFlowLine.vue";
+import widgetDecoration from "../styleWidget/widgetDecoration.vue";
+import widgetBarMap from "../map/widgetBarMap.vue";
+import widgetChinaMap from "../map/widgetChinaMap.vue";
+import widgetGlobalMap from "../map/widgetGlobalMap.vue";
+import widgetBarStackMoreShowChart from "../bar/widgetBarStackMoreShowChart.vue";
+import widgetBarLineSingleChart from "../barline/widgetBarLineSingleChart.vue";
+
+export default {
+  name: "WidgetTabs",
+  components: {
+    widgetHref,
+    widgetText,
+    widgetButton,
+    widgetImage,
+    widgetTable,
+    widgetPagination,
+    WidgetMarquee,
+    widgetTime,
+    widgetSlider,
+    widgetVideo,
+    widgetVideoMonitor,
+    WidgetIframe,
+    widgetCalendar,
+    widgetBarchart,
+    widgetGradientColorBarchart,
+    widgetLinechart,
+    widgetBarlinechart,
+    WidgetPiechart,
+    WidgetFunnel,
+    WidgetGauge,
+    WidgetPieNightingaleRoseArea,
+    widgetLineMap,
+    widgetPiePercentageChart,
+    widgetAirBubbleMap,
+    widgetBarStackChart,
+    widgetLineStackChart,
+    widgetBarCompareChart,
+    widgetLineCompareChart,
+    widgetDecoratePieChart,
+    widgetMoreBarLineChart,
+    widgetWordCloud,
+    widgetHeatmap,
+    widgetRadar,
+    widgetBarLineStackChart,
+    widgetScaleVertical,
+    widgetScaleHorizontal,
+    widgetSelect,
+    widgetFormTime,
+    widgetBarDoubleYaxisChart,
+    widgetBorder,
+    widgetDecorateFlowLine,
+    widgetDecoration,
+    widgetBarMap,
+    widgetChinaMap,
+    widgetGlobalMap,
+    widgetScatter,
+    widgetBarStackMoreShowChart,
+    widgetBarLineSingleChart,
+  },
+  props: {
+    value: Object,
+    ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      options: {},
+      optionsSetup: {},
+      optionsData: {},
+      optionsStyle: {},
+      activeTab: '',
+      dynamicTabsList: [],
+      flagInter: null,
+      grade: false,
+      draggingChild: null,
+      childDragMoveHandler: null,
+      childDragUpHandler: null,
+    };
+  },
+  computed: {
+    transStyle() {
+      return this.objToOne(this.options);
+    },
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        display:
+          this.transStyle.hideLayer === undefined
+            ? "block"
+            : this.transStyle.hideLayer ? "none" : "block",
+      };
+    },
+    tabsLabelColor() {
+      return this.transStyle.labelColor || '#303133';
+    },
+    tabsActiveColor() {
+      return this.transStyle.activeColor || '#409EFF';
+    },
+    tabsStyle() {
+      return {
+        '--tabs-label-color': this.tabsLabelColor,
+        '--tabs-active-color': this.tabsActiveColor,
+      };
+    },
+    contentStyle() {
+      return {
+        'font-size': (this.transStyle.fontSize || 14) + 'px',
+        padding: '20px',
+        height: '100%',
+        'box-sizing': 'border-box',
+      };
+    },
+    tabPosition() {
+      return this.transStyle.tabPosition || 'top';
+    },
+    tabsType() {
+      return this.transStyle.type || '';
+    },
+    closable() {
+      return this.transStyle.closable || false;
+    },
+    addable() {
+      return this.transStyle.addable || false;
+    },
+    stretch() {
+      return this.transStyle.stretch || false;
+    },
+    tabsList() {
+      if (this.optionsData && this.optionsData.dataType === 'dynamicData' && this.optionsData.dynamicData && this.dynamicTabsList.length > 0) {
+        // 动态数据
+        return this.dynamicTabsList;
+      } else {
+        // 静态数据 - 优先使用setup中的tabsList，确保children数据不丢失
+        const tabsList = this.optionsSetup.tabsList || this.transStyle.tabsList || [];
+        // 确保每个tab都有children数组
+        tabsList.forEach(tab => {
+          if (!tab.children) {
+            this.$set(tab, 'children', []);
+          }
+        });
+        return tabsList;
+      }
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+    tabBigscreen() {
+      // 子组件的bigscreen应该是相对于tab容器的
+      return {
+        bigscreenWidth: this.optionsStyle.width,
+        bigscreenHeight: this.optionsStyle.height,
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+        this.optionsSetup = val.setup || {};
+        this.optionsData = val.data || {};
+        this.optionsStyle = val.position || {};
+        this.setActiveTab();
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.options = this.value;
+    this.optionsSetup = this.value.setup;
+    this.optionsData = this.value.data;
+    this.optionsStyle = this.value.position;
+    this.setActiveTab();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    
+    // 设置动态数据
+    if (this.optionsData && this.optionsData.dataType === 'dynamicData') {
+      this.dynamicDataFn(this.optionsData.dynamicData, this.optionsData.refreshTime);
+    }
+  },
+  methods: {
+    /**
+     * 触发 Tabs 内部子组件选中事件，让设计器右侧展示该子组件的配置
+     */
+    emitChildActivated(tabIndex, childIndex) {
+      if (this.ispreview) return;
+      const currentTabsList = this.tabsList;
+      const targetTab = currentTabsList[tabIndex];
+      if (!targetTab || !targetTab.children || !targetTab.children[childIndex]) return;
+      const childWidget = targetTab.children[childIndex];
+      this.$emit("childActivated", {
+        rootWidgetIndex: this.widgetIndex,
+        tabIndex,
+        childIndex,
+        widget: childWidget,
+      });
+    },
+    /**
+     * tab 内容区域点击：单击子组件 => 选中子组件；双击空白 => 选中整个 Tabs
+     */
+    onTabContentClick(evt, tabIndex) {
+      if (this.ispreview || !evt.target || !evt.target.closest) return;
+      // 1）如果点在某个子组件包装层上，优先选中该子组件
+      const wrapper = evt.target.closest(".tab-child-wrapper");
+      if (wrapper) {
+        const childIndexAttr = wrapper.getAttribute("data-child-index");
+        const childIndex = Number(childIndexAttr);
+        if (!isNaN(childIndex)) {
+          this.emitChildActivated(tabIndex, childIndex);
+        }
+        evt.stopPropagation();
+        return;
+      }
+      // 2）双击内容区空白，通知外层选中整个 Tabs
+      const contentEl = evt.currentTarget;
+      const hasChildWrapper = contentEl.querySelector(".tab-child-wrapper");
+      if (!hasChildWrapper && evt.detail === 2) {
+        this.$emit("tabsContentDblClick", { tabIndex, event: evt });
+        evt.stopPropagation();
+        return;
+      }
+    },
+    /**
+     * 点击左上角选择手柄：只做“选中内部子组件”的动作
+     */
+    onTabChildHandleDown(tabIndex, childIndex) {
+      if (this.ispreview) return;
+      this.emitChildActivated(tabIndex, childIndex);
+    },
+    setActiveTab() {
+      const tabs = this.tabsList;
+      if (!tabs || tabs.length === 0) return;
+
+      // 如果当前 activeTab 还在 tabs 中，则保持不变，避免每次数据变化都跳回第一个标签
+      if (this.activeTab) {
+        const exist = tabs.some((t, i) => (t.name || `tab${i}`) === this.activeTab);
+        if (exist) return;
+      }
+
+      // 当前没有选中标签，或原选中标签已被删除时，才默认选中第一个
+      this.activeTab = tabs[0].name || 'tab0';
+    },
+    handleTabClick(tab) {
+      const currentTab = this.tabsList.find(t => (t.name || `tab${this.tabsList.indexOf(t)}`) === tab.name);
+      if (currentTab) {
+        originWidgetLinkageLogic(this, true, {
+          currentData: currentTab,
+        }); // 联动-源组件逻辑
+      }
+    },
+    handleTabRemove(name) {
+      // 处理标签页移除
+      // console.log('移除标签页:', name);
+    },
+    handleTabAdd() {
+      // 处理标签页添加
+      // console.log('添加标签页');
+    },
+    //动态数据字典解析
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      clearInterval(this.flagInter); // 清除之前的定时器
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then((res) => {
+        this.renderingFn(res);
+      }).catch((err) => {
+        console.error('获取tabs数据失败:', err);
+      });
+    },
+    renderingFn(val) {
+      // 将动态数据转换为tabs格式
+      this.dynamicTabsList = Array.isArray(val) ? val.map((item, index) => ({
+        label: item.label || item.name || `标签${index + 1}`,
+        name: item.name || item.value || `tab${index}`,
+        content: item.content || item.label || item.name || '',
+        children: item.children || [],
+      })) : [];
+      this.$nextTick(() => {
+        this.setActiveTab();
+      });
+    },
+    // 处理tab内容区域的拖拽
+    handleTabDragOver(evt) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+      evt.dataTransfer.dropEffect = "copy";
+      return false;
+    },
+    handleTabDragEnter(evt) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+      return false;
+    },
+    handleTabDrop(evt, tab, tabIndex) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+      
+      // console.log('Tabs drop事件触发', tab, tabIndex);
+      
+      // 优先从 dataTransfer 读取（index 在 dragStart 时已写入），否则再沿父组件查找
+      let dragWidgetCode = null;
+      if (evt.dataTransfer && evt.dataTransfer.types && evt.dataTransfer.types.indexOf('application/x-widget-code') !== -1) {
+        dragWidgetCode = evt.dataTransfer.getData('application/x-widget-code');
+      }
+      if (!dragWidgetCode) {
+        dragWidgetCode = this.getDragWidgetCode();
+      }
+      // console.log('拖拽的组件类型:', dragWidgetCode);
+      
+      if (!dragWidgetCode) {
+        console.warn('未获取到拖拽组件类型');
+        return;
+      }
+
+      // 获取相对于tab内容区域的坐标
+      const tabContentEl = evt.currentTarget;
+      const tabContentRect = tabContentEl.getBoundingClientRect();
+      const x = evt.clientX - tabContentRect.left;
+      const y = evt.clientY - tabContentRect.top;
+
+      // 创建新组件
+      const tool = getToolByCode(dragWidgetCode);
+      if (!tool) {
+        console.warn('未找到组件配置:', dragWidgetCode);
+        return;
+      }
+
+      const widgetJson = {
+        type: dragWidgetCode,
+        value: {
+          setup: {},
+          data: {},
+          position: {
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0,
+            zIndex: 0,
+          },
+        },
+        options: this.deepClone(tool.options),
+      };
+
+      // 处理默认值
+      const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
+      // Tabs 内部子组件：默认边距统一从 0 开始，由右侧“坐标”面板控制间距
+      widgetJsonValue.value.position.left = 0;
+      widgetJsonValue.value.position.top = 0;
+
+      // 生成唯一ID
+      const uuid = Number(Math.random().toString().substr(2)).toString(36);
+      widgetJsonValue.value.widgetId = uuid;
+      widgetJsonValue.value.widgetCode = dragWidgetCode;
+
+      // 获取当前的tabsList（确保使用正确的数据源）
+      let currentTabsList = this.tabsList;
+      
+      // 找到对应的tab并添加子组件
+      const targetTab = currentTabsList[tabIndex];
+      if (!targetTab) {
+        console.warn('未找到目标tab');
+        return;
+      }
+      
+      if (!targetTab.children) {
+        this.$set(targetTab, 'children', []);
+      }
+      targetTab.children.push(this.deepClone(widgetJsonValue));
+
+      // 更新到setup中
+      this.optionsSetup.tabsList = currentTabsList;
+      
+      // 更新value.setup
+      if (!this.value.setup) {
+        this.$set(this.value, 'setup', {});
+      }
+      this.value.setup.tabsList = currentTabsList;
+      
+      // 触发更新
+      this.$emit('input', this.value);
+      
+      // console.log('子组件已添加:', targetTab.children);
+      
+      this.grade = false;
+    },
+    /**
+     * 当 drop 落在 Tabs 外层容器（如 avue-draggable）时由设计器调用，将组件加入当前激活的 tab
+     */
+    addWidgetFromDrop(evt) {
+      if (!evt || !evt.dataTransfer) return;
+      let dragWidgetCode = null;
+      if (evt.dataTransfer.types && evt.dataTransfer.types.indexOf("application/x-widget-code") !== -1) {
+        dragWidgetCode = evt.dataTransfer.getData("application/x-widget-code");
+      }
+      if (!dragWidgetCode) dragWidgetCode = this.getDragWidgetCode();
+      if (!dragWidgetCode) return;
+
+      const tabIndex = this.tabsList.findIndex(
+        (t, i) => (t.name || `tab${i}`) === this.activeTab
+      );
+      const tab = tabIndex >= 0 ? this.tabsList[tabIndex] : this.tabsList[0];
+      const actualIndex = tabIndex >= 0 ? tabIndex : 0;
+
+      const contentEls = this.$el.querySelectorAll("[data-tab-content]");
+      const contentEl = contentEls[actualIndex] || contentEls[0];
+      const rect = contentEl ? contentEl.getBoundingClientRect() : this.$el.getBoundingClientRect();
+      const x = evt.clientX - rect.left;
+      const y = evt.clientY - rect.top;
+
+      const tool = getToolByCode(dragWidgetCode);
+      if (!tool) return;
+
+      const widgetJson = {
+        type: dragWidgetCode,
+        value: {
+          setup: {},
+          data: {},
+          position: { width: 0, height: 0, left: 0, top: 0, zIndex: 0 },
+        },
+        options: this.deepClone(tool.options),
+      };
+      const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
+      // 同样，外层 drop 到 Tabs 上时，内部子组件也从 0 边距起步
+      widgetJsonValue.value.position.left = 0;
+      widgetJsonValue.value.position.top = 0;
+      const uuid = Number(Math.random().toString().substr(2)).toString(36);
+      widgetJsonValue.value.widgetId = uuid;
+      widgetJsonValue.value.widgetCode = dragWidgetCode;
+
+      const currentTabsList = this.tabsList;
+      const targetTab = currentTabsList[actualIndex];
+      if (!targetTab) return;
+      if (!targetTab.children) this.$set(targetTab, "children", []);
+      targetTab.children.push(this.deepClone(widgetJsonValue));
+
+      this.optionsSetup.tabsList = currentTabsList;
+      if (!this.value.setup) this.$set(this.value, "setup", {});
+      this.value.setup.tabsList = currentTabsList;
+      this.$emit("input", this.value);
+    },
+    getDragWidgetCode() {
+      // 尝试从父组件获取dragWidgetCode
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.dragWidgetCode !== undefined) {
+          return parent.dragWidgetCode;
+        }
+        parent = parent.$parent;
+      }
+      return null;
+    },
+    getWidgetConfigValue(widgetJson) {
+      this.setWidgetConfigValue(
+        widgetJson.options.setup,
+        widgetJson.value.setup
+      );
+      this.setWidgetConfigValue(
+        widgetJson.options.position,
+        widgetJson.value.position
+      );
+      this.setWidgetConfigValue(widgetJson.options.data, widgetJson.value.data);
+      return widgetJson;
+    },
+    setWidgetConfigValue(config, configValue) {
+      if (config) {
+        config.forEach((item) => {
+          if (this.isObjectFn(item)) {
+            configValue[item.name] = item.value;
+          }
+          if (this.isArrayFn(item)) {
+            item.forEach((itemChild) => {
+              itemChild.list.forEach((ev) => {
+                configValue[ev.name] = ev.value;
+              });
+            });
+          }
+        });
+      }
+    },
+    handleChildWidgetActivated(data) {
+      // 处理子组件激活事件（预留）
+      // console.log('子组件激活:', data);
+    },
+    /**
+     * 捕获阶段处理内部子区域 mousedown：先于 avue-draggable 拦截，避免整块 Tabs 被拖动
+     * 点击删除按钮时不拦截，让删除能正常触发
+     */
+    /**
+     * 根节点捕获：仅当点击在标题栏时发出事件，让设计器拖动整块 Tabs（外层 avue-draggable 已禁用）
+     */
+    onTabsRootCapture(evt) {
+      if (this.ispreview || !evt.target || !evt.target.closest) return;
+      const headerEl = evt.target.closest(".el-tabs__header");
+      if (headerEl) {
+        // 点击在 Tabs 头部：阻止事件冒泡到外层 draggable，并通知外层开始拖动整块 Tabs
+        evt.stopPropagation();
+        this.$emit("tabsHeaderMouseDown", evt);
+      }
+    },
+    onTabChildMouseDown(event, tabIndex, childIndex) {
+      if (event.target && event.target.closest && event.target.closest('.tab-child-delete')) {
+        return; // 点在删除按钮上，不拦截，删除按钮的 @mousedown.stop 会阻止冒泡到外层
+      }
+      // console.log('onTabChildMouseDown:', tabIndex, childIndex);
+      event.preventDefault();
+      event.stopPropagation();
+      // 选中内部组件并通知外层暂时禁用拖拽
+      this.emitChildActivated(tabIndex, childIndex);
+      this.$emit('innerDragStart');
+      this.startChildDrag(event, childIndex, tabIndex);
+    },
+    /**
+     * 开始拖拽标签内子组件（可由 onTabChildMouseDown 或 workbench 捕获层调用）
+     */
+    startChildDrag(event, childIndex, tabIndex) {
+      this.$emit('innerDragStart');
+      const currentTabsList = this.tabsList;
+      const targetTab = currentTabsList[tabIndex];
+      if (!targetTab || !targetTab.children || !targetTab.children[childIndex]) return;
+
+      const child = targetTab.children[childIndex];
+      if (!child.value.position) {
+        this.$set(child.value, 'position', {});
+      }
+      const pos = child.value.position;
+
+      const startLeft = typeof pos.left === 'number' ? pos.left : 0;
+      const startTop = typeof pos.top === 'number' ? pos.top : 0;
+
+      this.draggingChild = {
+        tabIndex,
+        childIndex,
+        startX: event.clientX,
+        startY: event.clientY,
+        startLeft,
+        startTop,
+      };
+
+      // 选中效果
+      this.grade = true;
+
+      // 绑定全局鼠标事件
+      this.childDragMoveHandler = (e) => this.onChildDragMove(e);
+      this.childDragUpHandler = (e) => this.onChildDragEnd(e);
+      document.addEventListener('mousemove', this.childDragMoveHandler);
+      document.addEventListener('mouseup', this.childDragUpHandler);
+    },
+    /**
+     * 拖拽过程中移动子组件
+     */
+    onChildDragMove(event) {
+      if (!this.draggingChild) return;
+
+      const { tabIndex, childIndex, startX, startY, startLeft, startTop } = this.draggingChild;
+      const dx = event.clientX - startX;
+      const dy = event.clientY - startY;
+
+      const currentTabsList = this.tabsList;
+      const targetTab = currentTabsList[tabIndex];
+      if (!targetTab || !targetTab.children || !targetTab.children[childIndex]) return;
+
+      const child = targetTab.children[childIndex];
+      if (!child.value.position) {
+        this.$set(child.value, 'position', {});
+      }
+      const pos = child.value.position;
+      const width = pos.width || 100;
+      const height = pos.height || 50;
+
+      let newLeft = startLeft + dx;
+      let newTop = startTop + dy;
+
+      // 约束在 tab 内容区域内部
+      if (newLeft < 0) newLeft = 0;
+      if (newTop < 0) newTop = 0;
+      if (newLeft + width > this.optionsStyle.width) {
+        newLeft = this.optionsStyle.width - width;
+      }
+      if (newTop + height > this.optionsStyle.height) {
+        newTop = this.optionsStyle.height - height;
+      }
+
+      this.$set(pos, 'left', newLeft);
+      this.$set(pos, 'top', newTop);
+
+      // 实时同步到配置，保证保存后位置不丢
+      this.optionsSetup.tabsList = currentTabsList;
+      if (!this.value.setup) {
+        this.$set(this.value, 'setup', {});
+      }
+      this.value.setup.tabsList = currentTabsList;
+      this.$emit('input', this.value);
+    },
+    /**
+     * 结束拖拽
+     */
+    onChildDragEnd() {
+      if (this.childDragMoveHandler) {
+        document.removeEventListener('mousemove', this.childDragMoveHandler);
+        this.childDragMoveHandler = null;
+      }
+      if (this.childDragUpHandler) {
+        document.removeEventListener('mouseup', this.childDragUpHandler);
+        this.childDragUpHandler = null;
+      }
+      this.draggingChild = null;
+      // 通知外层 Widget：内部拖拽结束，恢复外层 avue-draggable
+      this.$emit("innerDragEnd");
+    },
+    // 将组件类型字符串转换为组件名称
+    getComponentName(type) {
+      // 将 widget-text 转换为 widgetText
+      if (!type) return '';
+      return type.split('-').map((part, index) => {
+        if (index === 0) return part;
+        return part.charAt(0).toUpperCase() + part.slice(1);
+      }).join('');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.widget-tabs {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  ::v-deep .el-tabs {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: transparent;
+    border: 0px solid transparent !important;
+    .el-tabs__header {
+      margin: 0;
+      cursor: move;
+      background-color: transparent;
+    }
+    
+    .el-tabs__content {
+      flex: 1;
+      overflow: auto;
+      background-color: transparent;
+    }
+    
+    .el-tab-pane {
+      height: 100%;
+      background-color: transparent;
+    }
+    
+    // 使用 CSS 变量控制标签颜色
+    .el-tabs__item {
+      color: var(--tabs-label-color, #303133);
+      &.is-active {
+        color: var(--tabs-active-color, #409EFF);
+      }
+      &:hover {
+        color: var(--tabs-active-color, #409EFF);
+      }
+    }
+  }
+  
+  .tab-content {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: relative;
+    min-height: 100px;
+    background-color: transparent;
+  }
+
+  .tab-child-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .tab-child-select-handle {
+    position: absolute;
+    top: -6px;
+    right: -2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 30;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tab-child-select-handle:hover {
+    background: rgba(64, 158, 255, 0.9);
+  }
+
+  .tab-child-select-icon {
+    font-size: 14px;
+    color: #fff;
+  }
+
+  .tab-child-component {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .tab-content-empty {
+    width: 100%;
+    height: 100%;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    font-size: 14px;
+    border: 2px dashed #ddd;
+    border-radius: 4px;
+    background-color: transparent;
+  }
+}
+</style>
+
diff --git a/src/views/bigscreenDesigner/designer/widget/form/widgetTabs.vue b/src/views/bigscreenDesigner/designer/widget/form/widgetTabs.vue
index 0cb7935..ba1eae5 100644
--- a/src/views/bigscreenDesigner/designer/widget/form/widgetTabs.vue
+++ b/src/views/bigscreenDesigner/designer/widget/form/widgetTabs.vue
@@ -5,7 +5,7 @@
  * @Last Modified time: 2024-01-01 00:00:00
  !-->
 <template>
-  <div class="widget-tabs" @mousedown.capture="onTabsRootCapture">
+  <div class="widget-tabs" :style="tabsRootStyle" @mousedown.capture="onTabsRootCapture">
     <el-tabs
       :style="styleObj"
       :tab-position="tabPosition"
@@ -21,10 +21,20 @@
       <el-tab-pane
         v-for="(tab, index) in tabsList"
         :key="tab.name || index"
-        :label="tab.label"
         :name="tab.name || `tab${index}`"
         :closable="closable"
+        :class="tab.customClass || ''"
+        :style="tab.customStyle || {}"
       >
+        <!-- 自定义标签页标题 -->
+        <template #label>
+          <span class="custom-tab-label-wrapper">
+            <span :class="['tab-indicator-dot',isTabActive(tab)?'tab-indicator-dotS':'']"
+            ></span>
+            <!-- 标签文字 -->
+            <span class="custom-tab-label">{{ tab.label }}</span>
+          </span>
+        </template>
         <div 
           class="tab-content"
           data-tab-content
@@ -37,17 +47,13 @@
           @dragenter.prevent="handleTabDragEnter($event)"
         >
           <!-- 渲染子组件（支持在标签内部拖动、删除） -->
-          <template v-if="tab.children && tab.children.length > 0">
+          <!-- 关键优化：使用 v-if 替代 v-show，只有激活的 Tab 才渲染重型组件 -->
+          <template v-if="isTabActive(tab) && tab.children && tab.children.length > 0">
             <div
               v-for="(childWidget, childIndex) in tab.children"
               :key="childWidget.value.widgetId || `child-${index}-${childIndex}`"
               class="tab-child-draggable"
-              :style="{
-                marginLeft: (childWidget.value.position && typeof childWidget.value.position.left === 'number') ? childWidget.value.position.left + 'px' : '0px',
-                marginTop: (childWidget.value.position && typeof childWidget.value.position.top === 'number') ? childWidget.value.position.top + 'px' : '0px',
-                width: (childWidget.value.position && childWidget.value.position.width) ? childWidget.value.position.width + 'px' : '100px',
-                height: (childWidget.value.position && childWidget.value.position.height) ? childWidget.value.position.height + 'px' : '50px',
-              }"
+              
             >
               <div
                 class="tab-child-wrapper"
@@ -56,10 +62,11 @@
               >
                 <!-- 选中子组件的小手柄：点击后触发右侧显示该子组件配置 -->
                 <span
+                  v-if="!ispreview"
                   class="tab-child-select-handle"
                   title="选中并配置该组件"
                   @mousedown.stop.prevent="onTabChildHandleDown(index, childIndex)"
-                >
+                  >
                   <i class="el-icon-setting tab-child-select-icon"></i>
                 </span>
                 <component
@@ -68,11 +75,15 @@
                   :widget-index="childIndex"
                   :ispreview="ispreview"
                   class="tab-child-component"
+                  ref="tabChildComponents"
                 />
               </div>
             </div>
           </template>
-          <div v-else class="tab-content-empty">
+          <div v-else-if="!isTabActive(tab)" class="tab-content-empty">
+            <!-- 非激活 Tab 不渲染内容，减少内存占用 -->
+          </div>
+          <div v-else-if="!tab.children || tab.children.length === 0" class="tab-content-empty">
             拖拽组件到这里
           </div>
         </div>
@@ -85,6 +96,8 @@
 import {
   originWidgetLinkageLogic,
   targetWidgetLinkageLogic,
+  registerWidgetInstance,
+  unregisterWidgetInstance,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
 import { getToolByCode } from "@/views/bigscreenDesigner/designer/tools/index";
 // 与主画布 widget.vue 保持一致：注册所有可拖入的组件，否则图表、下拉等会报 Unknown custom element
@@ -93,6 +106,7 @@ import widgetText from "../texts/widgetText.vue";
 import widgetButton from "./widgetButton.vue";
 import widgetImage from "../texts/widgetImage.vue";
 import widgetTable from "../texts/widgetTable.vue";
+import widgetPagination from "../texts/widgetPagination.vue";
 import WidgetMarquee from "../texts/widgetMarquee.vue";
 import widgetTime from "../texts/widgetTime.vue";
 import widgetSlider from "../texts/widgetSlider.vue";
@@ -102,6 +116,7 @@ import WidgetIframe from "../texts/widgetIframe.vue";
 import widgetCalendar from "../texts/widgetCalendar.vue";
 import widgetBarchart from "../bar/widgetBarchart.vue";
 import widgetScatter from "../scatter/widgetScatter.vue";
+import widgetQuadrantScatter from "../scatter/widgetQuadrantScatter.vue";
 import widgetGradientColorBarchart from "../bar/widgetGradientColorBarchart.vue";
 import widgetLinechart from "../line/widgetLinechart.vue";
 import widgetBarlinechart from "../barline/widgetBarlinechart";
@@ -134,7 +149,7 @@ import widgetBarMap from "../map/widgetBarMap.vue";
 import widgetChinaMap from "../map/widgetChinaMap.vue";
 import widgetGlobalMap from "../map/widgetGlobalMap.vue";
 import widgetBarStackMoreShowChart from "../bar/widgetBarStackMoreShowChart.vue";
-import widgetBarLineSingleChart from "../barline/widgetBarLineSingleChart.vue";
+import widgetBarLineSingleChart from "../barline/widgetBarLineSingleChart";
 
 export default {
   name: "WidgetTabs",
@@ -144,6 +159,7 @@ export default {
     widgetButton,
     widgetImage,
     widgetTable,
+    widgetPagination,
     WidgetMarquee,
     widgetTime,
     widgetSlider,
@@ -184,6 +200,7 @@ export default {
     widgetChinaMap,
     widgetGlobalMap,
     widgetScatter,
+    widgetQuadrantScatter,
     widgetBarStackMoreShowChart,
     widgetBarLineSingleChart,
   },
@@ -208,15 +225,33 @@ export default {
       draggingChild: null,
       childDragMoveHandler: null,
       childDragUpHandler: null,
+      contentHeight: '300px', // 内容区域高度，会根据子组件高度动态更新
     };
   },
   computed: {
     transStyle() {
-      return this.objToOne(this.options);
+      // 合并 setup 和 position 中的所有配置项
+      const result = {};
+      
+      // 处理 setup 中的配置
+      if (this.optionsSetup) {
+        for (let key in this.optionsSetup) {
+          result[key] = this.optionsSetup[key];
+        }
+      }
+      
+      // 处理 position 中的配置
+      if (this.optionsStyle) {
+        for (let key in this.optionsStyle) {
+          result[key] = this.optionsStyle[key];
+        }
+      }
+      
+      return result;
     },
     styleObj() {
       return {
-        position: this.ispreview ? "relative" : "static",
+        position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
         height: this.optionsStyle.height + "px",
         left: this.optionsStyle.left + "px",
@@ -227,12 +262,28 @@ export default {
             : this.transStyle.hideLayer ? "none" : "block",
       };
     },
-    contentStyle() {
+    tabsLabelColor() {
+      return this.transStyle.labelColor || '#303133';
+    },
+    tabsActiveColor() {
+      return this.transStyle.activeColor || '#409EFF';
+    },
+    tabsRootStyle() {
+      return {
+        '--tabs-label-color': this.tabsLabelColor,
+        '--tabs-active-color': this.tabsActiveColor,
+        '--tabs-font-size': (this.transStyle.fontSize || 14) + 'px',
+      };
+    },
+    contentStyle() {
+      // 高度直接使用设置的高度
+      const height = this.optionsStyle && this.optionsStyle.height 
+        ? this.optionsStyle.height + 'px' 
+        : '300px';
+      
       return {
-        color: this.transStyle.labelColor || '#303133',
         'font-size': (this.transStyle.fontSize || 14) + 'px',
-        padding: '20px',
-        height: '100%',
+        height: height,
         'box-sizing': 'border-box',
       };
     },
@@ -286,10 +337,23 @@ export default {
         this.optionsData = val.data || {};
         this.optionsStyle = val.position || {};
         this.setActiveTab();
+        
+        // 配置变化时重新应用标签样式
+        this.$nextTick(() => {
+          this.applyTabStyles();
+          this.updateContentHeight();
+        });
       },
       deep: true,
       immediate: true,
     },
+    activeTab() {
+      // 激活标签变化时重新应用样式
+      this.$nextTick(() => {
+        this.applyTabStyles();
+        this.updateContentHeight();
+      });
+    },
   },
   mounted() {
     this.options = this.value;
@@ -297,14 +361,46 @@ export default {
     this.optionsData = this.value.data;
     this.optionsStyle = this.value.position;
     this.setActiveTab();
-    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    targetWidgetLinkageLogic(this); // 联动 - 目标组件逻辑
+    registerWidgetInstance(this); // 注册组件实例
     
     // 设置动态数据
     if (this.optionsData && this.optionsData.dataType === 'dynamicData') {
       this.dynamicDataFn(this.optionsData.dynamicData, this.optionsData.refreshTime);
     }
+    
+    // 注意：不需要在这里调用 applyTabStyles，因为 watch.value 的 immediate: true 已经会处理
+  },
+  beforeDestroy() {
+    unregisterWidgetInstance(this); // 注销组件实例
   },
   methods: {
+    /**
+     * 接收联动消息并转发给内部子组件
+     * 当按钮或其他组件联动 Tabs 容器时，此方法被调用
+     * @param {Object} e - 联动数据
+     * @param {Array} paramsConfig - 参数配置
+     */
+    setOptionsData(e, paramsConfig) {
+      if (!e) return;
+
+      const childComponents = this.$refs.tabChildComponents;
+      if (!childComponents || !Array.isArray(childComponents)) return;
+
+      // 从事件数据中提取 paramsConfig（由 linkageLogic.js 发送时附加）
+      let actualParamsConfig = paramsConfig;
+      if (e && e._paramsConfig) {
+        actualParamsConfig = e._paramsConfig;
+      }
+
+      // 遍历所有子组件，将消息转发给每个有 setOptionsData 方法的子组件
+      for (let i = 0; i < childComponents.length; i++) {
+        const childComp = childComponents[i];
+        if (childComp && typeof childComp.setOptionsData === 'function') {
+          childComp.setOptionsData(e, actualParamsConfig);
+        }
+      }
+    },
     /**
      * 触发 Tabs 内部子组件选中事件，让设计器右侧展示该子组件的配置
      */
@@ -371,16 +467,32 @@ export default {
       if (currentTab) {
         originWidgetLinkageLogic(this, true, {
           currentData: currentTab,
-        }); // 联动-源组件逻辑
+        }); // 联动 - 源组件逻辑
       }
+      
+      // 【关键优化】Tab 切换时，立即清理非激活 Tab 的重型组件实例
+      this.cleanupInactiveTabs();
+      
+      // 延迟等待新 Tab 渲染完成后再应用样式和更新高度
+      this.$nextTick(() => {
+        this.applyTabStyles();
+        this.updateContentHeight();
+      });
     },
     handleTabRemove(name) {
       // 处理标签页移除
-      console.log('移除标签页:', name);
+      // console.log('移除标签页:', name);
     },
     handleTabAdd() {
       // 处理标签页添加
-      console.log('添加标签页');
+      // console.log('添加标签页');
+    },
+    /**
+     * 判断指定标签是否为当前激活标签
+     */
+    isTabActive(tab) {
+      const tabName = tab.name || `tab${this.tabsList.indexOf(tab)}`;
+      return this.activeTab === tabName;
     },
     //动态数据字典解析
     dynamicDataFn(val, refreshTime) {
@@ -434,7 +546,7 @@ export default {
       evt.stopPropagation();
       evt.stopImmediatePropagation();
       
-      console.log('Tabs drop事件触发', tab, tabIndex);
+      // console.log('Tabs drop事件触发', tab, tabIndex);
       
       // 优先从 dataTransfer 读取（index 在 dragStart 时已写入），否则再沿父组件查找
       let dragWidgetCode = null;
@@ -444,7 +556,7 @@ export default {
       if (!dragWidgetCode) {
         dragWidgetCode = this.getDragWidgetCode();
       }
-      console.log('拖拽的组件类型:', dragWidgetCode);
+      // console.log('拖拽的组件类型:', dragWidgetCode);
       
       if (!dragWidgetCode) {
         console.warn('未获取到拖拽组件类型');
@@ -518,7 +630,7 @@ export default {
       // 触发更新
       this.$emit('input', this.value);
       
-      console.log('子组件已添加:', targetTab.children);
+      // console.log('子组件已添加:', targetTab.children);
       
       this.grade = false;
     },
@@ -618,7 +730,7 @@ export default {
     },
     handleChildWidgetActivated(data) {
       // 处理子组件激活事件（预留）
-      console.log('子组件激活:', data);
+      // console.log('子组件激活:', data);
     },
     /**
      * 捕获阶段处理内部子区域 mousedown：先于 avue-draggable 拦截，避免整块 Tabs 被拖动
@@ -640,7 +752,7 @@ export default {
       if (event.target && event.target.closest && event.target.closest('.tab-child-delete')) {
         return; // 点在删除按钮上，不拦截，删除按钮的 @mousedown.stop 会阻止冒泡到外层
       }
-      console.log('onTabChildMouseDown:', tabIndex, childIndex);
+      // console.log('onTabChildMouseDown:', tabIndex, childIndex);
       event.preventDefault();
       event.stopPropagation();
       // 选中内部组件并通知外层暂时禁用拖拽
@@ -755,6 +867,246 @@ export default {
         return part.charAt(0).toUpperCase() + part.slice(1);
       }).join('');
     },
+    /**
+     * 更新内容区域高度，根据当前激活标签页的子组件高度动态调整
+     */
+    updateContentHeight() {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          // 获取所有子组件实例
+          const childComponents = this.$refs.tabChildComponents;
+          
+          if (!childComponents || !Array.isArray(childComponents) || childComponents.length === 0) {
+            // 如果没有子组件，使用默认高度或最小高度
+            this.contentHeight = '300px';
+            return;
+          }
+          
+          // 计算所有子组件的总高度
+          let maxHeight = 0;
+          
+          childComponents.forEach((component, index) => {
+            try {
+              // 获取组件的根 DOM 元素
+              const el = component.$el;
+              if (el) {
+                // 使用 offsetHeight 获取实际渲染高度
+                const height = el.offsetHeight;
+                if (height > maxHeight) {
+                  maxHeight = height;
+                }
+              }
+            } catch (error) {
+              console.warn(`[WidgetTabs] 获取第 ${index} 个子组件高度失败:`, error);
+            }
+          });
+          
+          // 设置最小高度为 300px，如果子组件高度更大则使用子组件高度
+          this.contentHeight = Math.max(maxHeight, 300) + 'px';
+          
+          // console.log('[WidgetTabs] 内容区域高度已更新:', this.contentHeight);
+        }, 100); // 延迟执行确保子组件完全渲染
+      });
+    },
+    /**
+     * 应用标签样式（CSS 变量兜底方案）- 同时处理颜色和字体大小
+     */
+    applyTabStyles() {
+      // console.log('[WidgetTabs] applyTabStyles 开始执行');
+      
+      const labelColor = this.tabsLabelColor;
+      const activeColor = this.tabsActiveColor;
+      const fontSize = (this.transStyle.fontSize || 14) + 'px';
+      
+      // console.log('[WidgetTabs] 样式配置:', { labelColor, activeColor, fontSize });
+      
+      // 使用 $nextTick + setTimeout 延迟执行，确保 Element UI 完全渲染完成
+      this.$nextTick(() => {
+        setTimeout(() => {
+          // console.log('[WidgetTabs] 延迟执行开始，尝试获取 tab 元素');
+          
+          // 获取所有 tab 标签项
+          const tabItems = this.$el.querySelectorAll('.el-tabs__item');
+          
+          // console.log('[WidgetTabs] 获取到 tab 元素数量:', tabItems.length);
+          
+          if (tabItems.length > 0) {
+            tabItems.forEach((item, index) => {
+              // console.log(`[WidgetTabs] 处理第 ${index + 1} 个 tab 元素`);
+              
+              // 直接设置内联样式作为 CSS 变量的兜底
+              item.style.fontSize = fontSize;
+              
+              // 优先判断激活状态
+              if (item.classList.contains('is-active')) {
+                item.style.color = activeColor;
+                // console.log(`[WidgetTabs] 第 ${index + 1} 个 tab 为激活状态，设置颜色为:`, activeColor);
+              } else {
+                item.style.color = labelColor;
+                // console.log(`[WidgetTabs] 第 ${index + 1} 个 tab 为非激活状态，设置颜色为:`, labelColor);
+              }
+              
+              // 检查是否已经绑定过监听器
+              if (!item._hasTabListener) {
+                // console.log(`[WidgetTabs] 为第 ${index + 1} 个 tab 绑定 hover 事件监听器`);
+                
+                // 监听 hover 状态变化
+                item.addEventListener('mouseenter', function() {
+                  this.style.color = activeColor;
+                });
+                
+                item.addEventListener('mouseleave', function() {
+                  // 鼠标离开时恢复状态：激活的保持激活色，未激活的恢复标签色
+                  if (this.classList.contains('is-active')) {
+                    this.style.color = activeColor;
+                  } else {
+                    this.style.color = labelColor;
+                  }
+                });
+                
+                // 标记已绑定监听器
+                item._hasTabListener = true;
+              }
+            });
+            
+            // console.log('[WidgetTabs] applyTabStyles 执行完成');
+          } else {
+            console.warn('[WidgetTabs] 未找到任何 tab 元素，可能需要更长的延迟时间');
+          }
+        }, 50); // 延迟 50ms 执行，确保 Element UI 渲染完成
+      });
+    },
+    beforeDestroy() {
+      console.log('[WidgetTabs] beforeDestroy 开始清理资源');
+      
+      // 1. 清除定时器，避免内存泄漏
+      if (this.flagInter) {
+        clearInterval(this.flagInter);
+        this.flagInter = null;
+        console.log('[WidgetTabs] 已清除动态数据定时器');
+      }
+      
+      // 2. 移除 document 上的全局事件监听器，避免内存泄漏
+      if (this.childDragMoveHandler) {
+        document.removeEventListener('mousemove', this.childDragMoveHandler);
+        this.childDragMoveHandler = null;
+      }
+      if (this.childDragUpHandler) {
+        document.removeEventListener('mouseup', this.childDragUpHandler);
+        this.childDragUpHandler = null;
+      }
+      
+      // 3. 清理 tab 元素上的 hover 监听器
+      const tabLabels = this.$el.querySelectorAll('.el-tabs__item');
+      tabLabels.forEach(item => {
+        if (item._hasTabListener) {
+          // 克隆节点移除监听器
+          const newNode = item.cloneNode(false);
+          item.parentNode.replaceChild(newNode, item);
+        }
+      });
+      
+      // 4. 【关键优化】销毁所有 Tab 内的 ECharts 等重型组件实例
+      // 由于使用了 v-if，非激活 Tab 的子组件已经被销毁，这里只需处理当前激活的 Tab
+      const currentTabIndex = this.tabsList.findIndex(
+        (t, i) => (t.name || `tab${i}`) === this.activeTab
+      );
+      
+      if (currentTabIndex !== -1 && this.tabsList[currentTabIndex].children) {
+        const currentTabChildren = this.tabsList[currentTabIndex].children;
+        currentTabChildren.forEach((childWidget, childIndex) => {
+          this.destroyWidgetInstance(childWidget, childIndex);
+        });
+      }
+      
+      // 5. 【关键优化】清空大型数据引用，释放内存
+      this.dynamicTabsList = [];
+      this.options = {};
+      this.optionsSetup = {};
+      this.optionsData = {};
+      this.optionsStyle = {};
+      
+      console.log('[WidgetTabs] beforeDestroy 资源清理完成');
+    },
+    
+    /**
+     * 销毁单个 Widget 组件实例（ECharts、定时器等）
+     */
+    destroyWidgetInstance(widget, index) {
+      if (!widget || !widget.type) return;
+      
+      try {
+        // 获取对应的组件实例
+        const componentRefs = this.$refs.tabChildComponents;
+        if (!componentRefs || !componentRefs[index]) return;
+        
+        const componentInstance = componentRefs[index];
+        
+        // 1. 清除组件内部的定时器
+        if (componentInstance.flagInter) {
+          clearInterval(componentInstance.flagInter);
+          componentInstance.flagInter = null;
+        }
+        
+        // 2. 销毁 ECharts 实例
+        if (componentInstance.$refs && componentInstance.$refs.myVChart) {
+          const chart = componentInstance.$refs.myVChart;
+          if (chart && typeof chart.dispose === 'function') {
+            chart.dispose();
+            console.log(`[WidgetTabs] 已销毁子组件 ${widget.type} 的 ECharts 实例`);
+          }
+        }
+        
+        // 3. 针对特定图表类型的特殊处理
+        const chartTypes = [
+          'widget-barchart', 'widget-linechart', 'widget-piechart', 
+          'widget-funnel', 'widget-gauge', 'widget-heatmap',
+          'widget-radar', 'widget-wordcloud', 'widget-scatter',
+          'widget-linemap', 'widget-chinamap', 'widget-globalmap',
+          'widget-airbubblemap', 'widget-barmap'
+        ];
+        
+        if (chartTypes.includes(widget.type)) {
+          // 这些是 ECharts 图表，确保完全销毁
+          if (componentInstance.$el) {
+            // 清空 DOM 引用
+            componentInstance.$el.innerHTML = '';
+          }
+        }
+        
+        console.log(`[WidgetTabs] 子组件 ${widget.type} 已清理`);
+      } catch (error) {
+        console.error('[WidgetTabs] 销毁子组件失败:', error, widget);
+      }
+    },
+    
+    /**
+     * 【关键优化】清理所有非激活 Tab 的重型组件实例
+     * 配合 v-if 实现懒加载和及时释放内存：
+     * 1. v-if 确保非激活 Tab 的 DOM 不渲染，减少内存占用
+     * 2. 本方法确保定时器、事件监听器、ECharts 实例等资源被及时清理
+     * 3. 避免多个 Tab 同时运行导致性能问题
+     */
+    cleanupInactiveTabs() {
+      const currentTabIndex = this.tabsList.findIndex(
+        (t, i) => (t.name || `tab${i}`) === this.activeTab
+      );
+      
+      this.tabsList.forEach((tab, index) => {
+        // 跳过当前激活的 Tab
+        if (index === currentTabIndex) return;
+        
+        if (tab.children && tab.children.length > 0) {
+          tab.children.forEach((childWidget, childIndex) => {
+            console.log(`[WidgetTabs] Tab ${index} 的子组件 ${childWidget.type} 将被销毁`);
+            // 由于 v-if 已经生效，这些组件的 beforeDestroy 会被自动调用
+            // 这里主要是记录和确保清理逻辑被执行
+          });
+        }
+      });
+      
+      console.log('[WidgetTabs] cleanupInactiveTabs 执行完成');
+    },
   },
 };
 </script>
@@ -763,25 +1115,119 @@ export default {
 .widget-tabs {
   width: 100%;
   height: 100%;
-  
+  background-color: transparent;
   ::v-deep .el-tabs {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    
+    background-color: transparent;
+    border: 0px solid transparent !important;
     .el-tabs__header {
       margin: 0;
       cursor: move;
+      background-color: transparent;
+      .el-tabs__nav-wrap{
+        .el-tabs__nav-scroll{
+          // background: red;
+          .el-tabs__active-bar{
+            display: none;
+          }
+          .el-tabs__item{
+            margin: 0px 20px;
+            padding: 0px;
+          }
+        }
+      }
+      .el-tabs__nav-wrap::after{
+          display: none;
+        }
     }
     
     .el-tabs__content {
       flex: 1;
       overflow: auto;
+      background-color: transparent;
     }
     
     .el-tab-pane {
       height: 100%;
+      background-color: transparent;
+      
+      // 支持自定义类名的样式覆盖
+      &.custom-tab-pane {
+        // 自定义背景色
+        &.has-background {
+          background-color: var(--tab-pane-bg, transparent) !important;
+        }
+        
+        // 自定义内边距
+        &.has-padding {
+          //padding: var(--tab-pane-padding, 0) !important;
+        }
+        
+        // 自定义边框
+        &.has-border {
+          border: var(--tab-pane-border, none) !important;
+        }
+      }
+    }
+    
+    // 使用 CSS 变量控制标签颜色和字体大小 - 增强版选择器
+    ::v-deep .el-tabs__header {
+      .el-tabs__nav-wrap {
+        .el-tabs__item {
+          color: var(--tabs-label-color, #303133) !important;
+          font-size: var(--tabs-font-size, 14px) !important;
+          
+          // 激活态 - 使用完整路径选择器
+          &.is-active {
+            color: var(--tabs-active-color, #409EFF) !important;
+            
+            // 激活时显示小圆圈
+            &::before {
+              content: '';
+              position: absolute;
+              left: 6px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+              background-color: var(--tabs-active-color, #409EFF);
+              display: block;
+            }
+          }
+          
+          // Hover 状态
+          &:hover {
+            color: var(--tabs-active-color, #409EFF) !important;
+            
+            // Hover 时也显示小圆圈 (可选)
+            &::before {
+              content: '';
+              position: absolute;
+              left: 6px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+              background-color: var(--tabs-active-color, #409EFF);
+              display: block;
+            }
+          }
+          
+          // 自定义标签内容的样式继承
+          .custom-tab-label-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            height: 100%;
+            
+          }
+        }
+      }
     }
   }
   
@@ -790,7 +1236,9 @@ export default {
     height: 100%;
     overflow: auto;
     position: relative;
-    min-height: 100px;
+    // min-height: 1000px;
+    background-color: transparent;
+    // padding: 0px !important;
   }
 
   .tab-child-wrapper {
@@ -839,6 +1287,41 @@ export default {
     font-size: 14px;
     border: 2px dashed #ddd;
     border-radius: 4px;
+    background-color: transparent;
+  }
+  
+  // 自定义标签页标题样式
+  ::v-deep .custom-tab-label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    
+    .tab-indicator-dot {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border-radius: 5px;
+      background-color: transparent;
+      transition: all 0.3s ease;
+      margin-right: 10px;
+      // 当父级 is-active 时显示激活态
+      .is-active & {
+        background-color: var(--tabs-active-color, #409EFF);
+      }
+    }
+    .tab-indicator-dotS{
+      background: rgb(152,194,255);
+    }
+    
+    .tab-icon {
+      font-size: 14px;
+      color: var(--tabs-active-color, #409EFF);
+    }
+    
+    .custom-tab-label {
+      font-size: inherit;
+      color: inherit;
+    }
   }
 }
 </style>
diff --git a/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue b/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
index ce52753..22fba7e 100644
--- a/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
+++ b/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
@@ -290,6 +290,13 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue b/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
index 6775aa3..bc01a5e 100644
--- a/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
+++ b/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
@@ -461,6 +461,13 @@ export default {
       this.options.series[0].data = val.series;
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue b/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
index 2337bf8..5118b89 100644
--- a/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
@@ -802,6 +802,13 @@ export default {
       this.setOptionsLegendName(legendName);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue b/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
index ac6c6eb..3ccb07a 100644
--- a/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
@@ -628,6 +628,13 @@ export default {
       })
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue b/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
index c3b9d50..5e371b7 100644
--- a/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
@@ -360,14 +360,18 @@ export default {
       if (
         e &&
         optionsData.dataType !== "staticData" &&
+        myDynamicData.contextData &&
         Object.keys(myDynamicData.contextData).length
       ) {
         const keyArr = Object.keys(myDynamicData.contextData);
-        paramsConfig.forEach((conf) => {
-          if (keyArr.includes(conf.targetKey)) {
-            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
-          }
-        });
+        // 安全检查：确保 paramsConfig 存在且是数组
+        if (paramsConfig && Array.isArray(paramsConfig)) {
+          paramsConfig.forEach((conf) => {
+            if (conf && conf.targetKey && conf.originKey && keyArr.includes(conf.targetKey)) {
+              myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+            }
+          });
+        }
       }
       optionsData.dataType === "staticData"
         ? this.staticDataFn(optionsData.staticData)
@@ -569,6 +573,13 @@ export default {
       this.setOptionsLegendName(legendName);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue b/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
index 18731cd..ac5dcfc 100644
--- a/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
+++ b/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
@@ -380,6 +380,27 @@ export default {
     );
     targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+    
+    // 销毁 ECharts 实例，避免内存泄漏
+    if (this.$refs.myVChart) {
+      const chart = this.$refs.myVChart;
+      if (chart && typeof chart.dispose === 'function') {
+        chart.dispose();
+        console.log('[AirBubbleMap] ECharts 实例已销毁');
+      }
+    }
+    
+    // 清空 DOM 引用和地图数据
+    if (this.$el) {
+      this.$el.innerHTML = '';
+    }
+  },
   methods: {
     // 修改图标options属性
     editorOptions() {
diff --git a/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue b/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue
index 42f8fd5..fe9e2af 100644
--- a/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue
+++ b/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue
@@ -278,6 +278,27 @@ export default {
     targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
 
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+    
+    // 销毁 ECharts 实例，避免内存泄漏
+    if (this.$refs.myVChart) {
+      const chart = this.$refs.myVChart;
+      if (chart && typeof chart.dispose === 'function') {
+        chart.dispose();
+        console.log('[BarMap] ECharts 实例已销毁');
+      }
+    }
+    
+    // 清空 DOM 引用和地图数据
+    if (this.$el) {
+      this.$el.innerHTML = '';
+    }
+  },
   methods: {
     // 修改图标options属性
     editorOptions() {
diff --git a/src/views/bigscreenDesigner/designer/widget/map/widgetChinaMap.vue b/src/views/bigscreenDesigner/designer/widget/map/widgetChinaMap.vue
index d87d6dc..2ffbe40 100644
--- a/src/views/bigscreenDesigner/designer/widget/map/widgetChinaMap.vue
+++ b/src/views/bigscreenDesigner/designer/widget/map/widgetChinaMap.vue
@@ -36,7 +36,7 @@ export default {
         tooltip: {
           trigger: "item",
           formatter: function (params) {
-            console.log(params);
+            // console.log(params);
             let value=params.value
             if(isNaN(value)){
               value=0
@@ -361,6 +361,13 @@ export default {
       this.options.visualMap.max=Math.max(...seriesData)
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/bigscreenDesigner/designer/widget/map/widgetGlobalMap.vue b/src/views/bigscreenDesigner/designer/widget/map/widgetGlobalMap.vue
index f9ab047..a5ee2eb 100644
--- a/src/views/bigscreenDesigner/designer/widget/map/widgetGlobalMap.vue
+++ b/src/views/bigscreenDesigner/designer/widget/map/widgetGlobalMap.vue
@@ -30,7 +30,7 @@ export default {
         tooltip: {
           trigger: "item",
           formatter: function (params) {
-            console.log(params);
+            // console.log(params);
             let value=params.value
             if(isNaN(value)){
               value=0
@@ -151,7 +151,7 @@ export default {
     this.optionsStyle = this.value.position;
     this.optionsData = this.value.data;
     this.optionsCollapse = this.value.setup;
-    console.log(this.value.setup);
+    // console.log(this.value.setup);
     this.optionsSetup = this.value.setup;
     this.editorOptions();
     targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
@@ -333,6 +333,13 @@ export default {
         this.options.visualMap.max=Math.max(...seriesData)
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue b/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
index 07746ab..4e23200 100644
--- a/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
+++ b/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
@@ -261,6 +261,27 @@ export default {
     this.editorOptions();
     targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+    
+    // 销毁 ECharts 实例，避免内存泄漏
+    if (this.$refs.myVChart) {
+      const chart = this.$refs.myVChart;
+      if (chart && typeof chart.dispose === 'function') {
+        chart.dispose();
+        console.log('[LineMap] ECharts 实例已销毁');
+      }
+    }
+    
+    // 清空 DOM 引用和地图数据
+    if (this.$el) {
+      this.$el.innerHTML = '';
+    }
+  },
   methods: {
     convertData(data) {
       let res = [];
diff --git a/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue b/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
index f239009..802ccde 100644
--- a/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
+++ b/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
@@ -391,6 +391,13 @@ export default {
       series[0].data = data;
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue b/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue
index 488f227..12a001c 100644
--- a/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue
@@ -342,6 +342,13 @@ export default {
       });
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue b/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
index e2260d9..8b8c0fe 100644
--- a/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
+++ b/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
@@ -366,6 +366,13 @@ export default {
       this.$set(this.options.series, 0, series);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue b/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
index 84c471b..2f9f3f3 100644
--- a/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
@@ -365,6 +365,13 @@ export default {
       this.$set(this.options.series, 0, series);
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue b/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue
index 6f52871..86a59da 100644
--- a/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue
+++ b/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue
@@ -557,6 +557,13 @@ export default {
       series.data[0] = data;
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue b/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue
index 756a829..8deb7e7 100644
--- a/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue
+++ b/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue
@@ -554,6 +554,13 @@ export default {
       series.data[0] = data;
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 
diff --git a/src/views/bigscreenDesigner/designer/widget/scatter/widgetQuadrantScatter.vue b/src/views/bigscreenDesigner/designer/widget/scatter/widgetQuadrantScatter.vue
new file mode 100644
index 0000000..6a151b2
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/scatter/widgetQuadrantScatter.vue
@@ -0,0 +1,1181 @@
+<template>
+  <div :style="styleObj">
+    <div class="chart-container" :style="chartContainerStyle">
+      <v-chart ref="myVChart" :option="options" autoresize v-if="vChartVisible"/>
+    </div>
+    <div class="right-list" v-if="rightListConfig.show" :style="rightListStyle">
+      <div class="list-title" :style="listTitleStyle">{{ rightListConfig.title }}</div>
+      <div class="list-content">
+        <div v-for="(group, index) in rightListData" :key="index" class="quadrant-group" :style="quadrantGroupStyle(group, index)">
+          <div class="quadrant-label" :style="quadrantLabelStyle(group.color)">
+            {{ group.label }}
+          </div>
+          <div class="quadrant-items">
+            <div v-for="(item, idx) in group.items" :key="idx" class="list-item" :style="listItemStyle">
+              <span class="item-dot" :style="{ background: item.color }"></span>
+              <span class="item-text">{{ formatListItem(item) }}</span>
+            </div>
+            <div v-if="group.items.length === 0" class="list-item empty" :style="listItemStyle">
+              暂无数据
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Decimal } from 'decimal.js';
+import {
+  originWidgetLinkageLogic,
+  targetWidgetLinkageLogic,
+} from "@/views/bigscreenDesigner/designer/linkageLogic";
+import queryform from "@/mixins/queryform";
+
+
+
+export default {
+  name: "widgetQuadrantScatter",
+  components: {},
+  mixins: [queryform],
+  props: {
+    value: Object,
+    ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      options: {
+        grid: {},
+        legend: {
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        xAxis: {
+          type: "value",
+          data: [],
+          axisLine:{
+            onZero:false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          data: [],
+          axisLine:{
+            onZero:false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            data: [],
+            symbolSize: 10,
+            type: "scatter",
+            markLine: {},
+            markArea: {},
+          },
+        ],
+      },
+      optionsStyle: {},
+      optionsData: {},
+      optionsCollapse: {},
+      optionsSetup: {},
+      flagInter: null,
+      show: true,
+      vChartVisible: true,
+      rightListConfig: { show: false, title: '', data: [] },
+      rightListData: []
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background,
+        display: 'flex',
+        flexDirection: 'row',
+      };
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+    chartContainerStyle() {
+      var widthRatio = this.optionsSetup.rightListWidthRatio;
+      var showList = this.optionsSetup.isShowRightList;
+      var chartWidth = this.optionsStyle.width || 400;
+      // 小容器中自动隐藏右侧列表
+      if (showList && chartWidth < 280) {
+        showList = false;
+      }
+      if (showList && widthRatio) {
+        return {
+          flex: '0 0 ' + (100 - widthRatio) + '%',
+          height: '100%',
+          position: 'relative'
+        };
+      }
+      return {
+        flex: showList ? '1' : '0 0 100%',
+        height: '100%',
+        position: 'relative'
+      };
+    },
+    rightListStyle() {
+      var widthRatio = this.optionsSetup.rightListWidthRatio;
+      var width = widthRatio ? widthRatio + '%' : (this.optionsSetup.rightListWidth || 200) + 'px';
+      var heightRatio = this.optionsSetup.rightListHeightRatio || 100;
+      var bgColor = this.optionsSetup.rightListBgColor || 'rgba(0, 0, 0, 0.3)';
+      var padding = this.optionsSetup.rightListPadding || 15;
+      return {
+        width: width,
+        height: heightRatio + '%',
+        background: bgColor,
+        padding: padding + 'px',
+        overflowY: 'auto',
+        borderLeft: '1px solid rgba(255,255,255,0.1)'
+      };
+    },
+    listTitleStyle() {
+      var color = this.optionsSetup.rightListTitleColor || '#FFD700';
+      var fontSize = this.optionsSetup.rightListTitleFontSize || 16;
+      return {
+        color: color,
+        fontSize: fontSize + 'px',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: '15px',
+        paddingBottom: '10px',
+        borderBottom: '1px solid rgba(255,255,255,0.2)'
+      };
+    },
+    listItemStyle() {
+      var color = this.optionsSetup.listItemColor || 'rgba(255, 255, 255, 0.8)';
+      var fontSize = this.optionsSetup.listItemFontSize || 12;
+      return {
+        color: color,
+        fontSize: fontSize + 'px',
+        lineHeight: fontSize + 10 + 'px'
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+    targetWidgetLinkageLogic(this);
+    originWidgetLinkageLogic(this);
+  },
+  methods: {
+    isNumberString(str) {
+      // 匹配：可选的负号 + 至少一个数字 + 可选的小数部分
+      return /^-?\d+(\.\d+)?$/.test(str);
+    },
+    // 将任意值安全转为有限数字，失败返回 null
+    toNum(v) {
+      var n = parseFloat(v);
+      return isFinite(n) ? n : null;
+    },
+    editorOptions() {
+      console.log('[DEBUG] editorOptions called');
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsLegend();
+      this.setOptionsTooltip();
+      this.setOptionsMargin();
+      this.setOptionsQuadrant();
+      this.renderSplitLabelGraphic();
+      this.setOptionsData();
+      // 强制 ECharts 在 nextTick 后重新初始化（解决 Tabs 容器中图表不渲染问题）
+      this.vChartVisible = false;
+      this.$nextTick(() => {
+        this.vChartVisible = true;
+      });
+    },
+    setOptionsTitle() {
+      var optionsSetup = this.optionsSetup;
+      var title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
+      };
+      this.options.title = title;
+    },
+    setOptionsX() {
+      var optionsSetup = this.optionsSetup;
+      var xAxis = {
+        type: "value",
+        show: optionsSetup.hideX,
+        name: optionsSetup.nameX,
+        nameTextStyle: {
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX,
+        },
+        max: optionsSetup.maxX !== "" ? optionsSetup.maxX : null,
+        min: optionsSetup.minX !== "" ? optionsSetup.minX : null,
+        axisLabel: {
+          show: true,
+
+          interval: optionsSetup.textInterval,
+          rotate: optionsSetup.textAngleX,
+          textStyle: {
+            color: optionsSetup.colorX,
+            fontSize: optionsSetup.fontSizeX,
+          },
+          formatter: function(value) {
+            return value + '%';
+          }
+        },
+        axisLine: {
+          show: true,
+          onZero: false,
+          lineStyle: {
+            color: optionsSetup.lineColorX,
+            width: optionsSetup.lineWidthX,
+          },
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX,
+            width: optionsSetup.splitLineWidthX,
+          },
+        },
+      };
+      this.options.xAxis = xAxis;
+    },
+    setOptionsY() {
+      var optionsSetup = this.optionsSetup;
+      var yAxis = {
+        max: optionsSetup.maxY !== "" ? parseFloat(optionsSetup.maxY) : null,
+        min: optionsSetup.minY !== "" ? parseFloat(optionsSetup.minY) : null,
+        type: "value",
+        scale: optionsSetup.scale,
+        splitNumber: optionsSetup.splitNumberY,
+        show: optionsSetup.isShowY,
+        name: optionsSetup.textNameY,
+        nameTextStyle: {
+          color: optionsSetup.nameColorY,
+          fontSize: optionsSetup.nameFontSizeY,
+        },
+        axisLabel: {
+          show: true,
+          rotate: optionsSetup.textAngleY,
+          textStyle: {
+            color: optionsSetup.colorY,
+            fontSize: optionsSetup.fontSizeY,
+          },
+          formatter: function(value) {
+            return value + '%';
+          }
+        },
+        axisLine: {
+          onZero: false,
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorY,
+            width: optionsSetup.lineWidthY,
+          },
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineY,
+          lineStyle: {
+            color: optionsSetup.splitLineColorY,
+            width: optionsSetup.splitLineWidthY,
+          },
+        },
+      };
+      this.options.yAxis = yAxis;
+    },
+    setOptionsTooltip() {
+      var optionsSetup = this.optionsSetup;
+      var tooltip = {
+        show: optionsSetup.isShowTooltip,
+        trigger: optionsSetup.tooltipTrigger,
+        axisPointer: {
+          type: optionsSetup.tooltipAxisPointerType,
+        },
+        backgroundColor: optionsSetup.tooltipBackgroundColor,
+        borderColor: optionsSetup.tooltipBorderColor,
+        borderWidth: optionsSetup.tooltipBorderWidth,
+        textStyle: {
+          color: optionsSetup.tooltipColor,
+          fontSize: optionsSetup.tooltipFontSize,
+          fontWeight: optionsSetup.tooltipFontWeight,
+          fontStyle: optionsSetup.tooltipFontStyle,
+          fontFamily: optionsSetup.tooltipFontFamily,
+        },
+      };
+      this.options.tooltip = tooltip;
+    },
+    setOptionsMargin() {
+      var optionsSetup = this.optionsSetup;
+      var chartWidth = this.optionsStyle.width || 400;
+      var chartHeight = this.optionsStyle.height || 300;
+      
+      // 小容器自适应：边距占比而不是固定像素
+      var marginScale = 1;
+      if (chartWidth < 300) marginScale = chartWidth / 300;
+      if (chartHeight < 200) marginScale = Math.min(marginScale, chartHeight / 200);
+      
+      var grid = {
+        left: Math.max(30, (optionsSetup.marginLeft || 50) * marginScale),
+        right: Math.max(20, (optionsSetup.marginRight || 50) * marginScale),
+        bottom: Math.max(30, (optionsSetup.marginBottom || 50) * marginScale),
+        top: Math.max(40, (optionsSetup.marginTop || 60) * marginScale),
+        containLabel: true,
+      };
+      this.options.grid = grid;
+    },
+    setOptionsLegend() {
+      var optionsSetup = this.optionsSetup;
+      var legend = {
+        show: optionsSetup.isShowLegend,
+        left: optionsSetup.lateralPosition,
+        top: optionsSetup.longitudinalPosition,
+        orient: optionsSetup.layoutFront,
+        textStyle: {
+          color: optionsSetup.legendColor,
+          fontSize: optionsSetup.legendFontSize,
+          fontWeight: optionsSetup.legendFontWeight,
+          fontStyle: optionsSetup.legendFontStyle,
+          fontFamily: optionsSetup.legendFontFamily,
+        },
+        itemHeight: optionsSetup.legendHeight,
+        itemWidth: optionsSetup.legendWidth,
+      };
+      this.options.legend = legend;
+    },
+    setOptionsLegendName(name) {
+      var optionsSetup = this.optionsSetup;
+      var series = this.options.series;
+      var legendName = optionsSetup.legendName;
+      if (null == legendName || legendName === "") {
+        for (var i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend["data"] = name;
+      } else {
+        var arr = legendName.split("|");
+        for (var i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend["data"] = arr;
+      }
+    },
+    setOptionsQuadrant() {
+      var optionsSetup = this.optionsSetup;
+      var splitX = optionsSetup.splitX;
+      var splitY = optionsSetup.splitY;
+
+      // 从实际数据计算轴范围
+      var dataRange = this.calculateDataRange();
+      var actualMinX = dataRange.minX;
+      var actualMaxX = dataRange.maxX;
+      var actualMinY = dataRange.minY;
+      var actualMaxY = dataRange.maxY;
+
+      console.log('[DEBUG] setOptionsQuadrant:', {splitX, splitY, actualMinX, actualMaxX, actualMinY, actualMaxY});
+
+      // 分割线标注
+      var markLine = {
+        symbol: 'none',
+        lineStyle: {
+          color: optionsSetup.splitLineColor || '#666',
+          width: optionsSetup.splitLineWidth || 1,
+          type: optionsSetup.splitLineType || 'dashed'
+        },
+        data: [
+          { xAxis: splitX },
+          { yAxis: splitY }
+        ]
+      };
+
+      // 分割线上的业务标注（使用 graphic 组件在图表外层实现）
+      this.options.markLine = markLine;
+      this.options.splitLabel = {
+        show: optionsSetup.isShowSplitLabel,
+        xLabel: optionsSetup.splitXLabel || 'X>' + splitX,
+        yLabel: optionsSetup.splitYLabel || 'Y>' + splitY,
+        bgColor: optionsSetup.splitLabelBgColor || 'rgba(0, 123, 255, 0.8)',
+        textColor: optionsSetup.splitLabelColor || '#fff',
+        fontSize: optionsSetup.splitLabelFontSize || 12,
+        xPosition: splitX,
+        yPosition: splitY,
+        minX: optionsSetup.minX !== "" ? parseFloat(optionsSetup.minX) : actualMinX,
+        maxX: optionsSetup.maxX !== "" ? parseFloat(optionsSetup.maxX) : actualMaxX,
+        minY: optionsSetup.minY !== "" ? parseFloat(optionsSetup.minY) : actualMinY,
+        maxY: optionsSetup.maxY !== "" ? parseFloat(optionsSetup.maxY) : actualMaxY,
+      };
+
+      // 四象限背景区域 - 使用动态计算的范围
+      var minXVal = optionsSetup.minX !== "" ? parseFloat(optionsSetup.minX) : actualMinX;
+      var maxXVal = optionsSetup.maxX !== "" ? parseFloat(optionsSetup.maxX) : actualMaxX;
+      var minYVal = optionsSetup.minY !== "" ? parseFloat(optionsSetup.minY) : actualMinY;
+      var maxYVal = optionsSetup.maxY !== "" ? parseFloat(optionsSetup.maxY) : Math.max(100, actualMaxY, splitY + 20);
+
+      var markArea = {
+        silent: true,
+        label: {
+          show: optionsSetup.isShowQuadrantLabel || true,
+          fontSize: optionsSetup.quadrantLabelFontSize || 14,
+          fontWeight: optionsSetup.quadrantLabelFontWeight || 'bold',
+          fontStyle: optionsSetup.quadrantLabelFontStyle || 'normal',
+          fontFamily: optionsSetup.quadrantLabelFontFamily || 'sans-serif'
+        },
+        data: [
+          [
+            {
+              xAxis: minXVal,
+              yAxis: splitY,
+              itemStyle: {
+                color: optionsSetup.quadrant1BgColor || 'rgba(76, 175, 80, 0.15)',
+              },
+              label: {
+                show: optionsSetup.isShowQuadrantLabel,
+                color: optionsSetup.quadrant1LabelColor || '#4CAF50',
+                value: optionsSetup.quadrant1Label || '明星产品',
+                position: 'insideTopRight'
+              }
+            },
+            {
+              xAxis: splitX,
+              yAxis: maxYVal
+            }
+          ],
+          [
+            {
+              xAxis: splitX,
+              yAxis: splitY,
+              itemStyle: {
+                color: optionsSetup.quadrant2BgColor || 'rgba(255, 152, 0, 0.15)',
+              },
+              label: {
+                show: optionsSetup.isShowQuadrantLabel,
+                color: optionsSetup.quadrant2LabelColor || '#FF9800',
+                value: optionsSetup.quadrant2Label || '问题产品',
+                position: 'insideTopLeft'
+              }
+            },
+            {
+              xAxis: maxXVal,
+              yAxis: maxYVal
+            }
+          ],
+          [
+            {
+              xAxis: minXVal,
+              yAxis: minYVal,
+              itemStyle: {
+                color: optionsSetup.quadrant3BgColor || 'rgba(158, 158, 158, 0.15)',
+              },
+              label: {
+                show: optionsSetup.isShowQuadrantLabel,
+                color: optionsSetup.quadrant3LabelColor || '#9E9E9E',
+                value: optionsSetup.quadrant3Label || '瘦狗产品',
+                position: 'insideBottomLeft'
+              }
+            },
+            {
+              xAxis: splitX,
+              yAxis: splitY
+            }
+          ],
+          [
+            {
+              xAxis: splitX,
+              yAxis: minYVal,
+              itemStyle: {
+                color: optionsSetup.quadrant4BgColor || 'rgba(33, 150, 243, 0.15)',
+              },
+              label: {
+                show: optionsSetup.isShowQuadrantLabel,
+                color: optionsSetup.quadrant4LabelColor || '#2196F3',
+                value: optionsSetup.quadrant4Label || '金牛产品',
+                position: 'insideBottomRight'
+              }
+            },
+            {
+              xAxis: maxXVal,
+              yAxis: splitY
+            }
+          ]
+        ]
+      };
+
+      if (this.options.series[0]) {
+        this.options.series[0].markLine = markLine;
+        this.options.series[0].markArea = markArea;
+      }
+
+      console.log('[DEBUG] markLine set:', markLine.data);
+      console.log('[DEBUG] markArea first quadrant:', markArea.data[0]);
+    },
+  //大于（入参先转数字，避免字符串运算产生 NaN）
+    isGreaterThan(a, b) {
+      return (parseFloat(a) - parseFloat(b)) > Number.EPSILON;
+    },
+    //小于
+    isLessThan(a, b) {
+      return (parseFloat(b) - parseFloat(a)) > Number.EPSILON;
+    },
+    // 计算实际数据范围
+    calculateDataRange() {
+      var series = this.options.series;
+      var minX = new Decimal('Infinity'), maxX = new Decimal('-Infinity');
+      var minY = new Decimal('Infinity'), maxY = new Decimal('-Infinity');
+
+      if (series && series.length > 0) {
+        for (var i = 0; i < series.length; i++) {
+          var data = series[i].data;
+          if (data && Array.isArray(data)) {
+            for (var j = 0; j < data.length; j++) {
+              var item = data[j];
+              var x = item.value ? item.value[0] : item.xData;
+              var y = item.value ? item.value[1] : item.yData;
+
+              var xNum = this.toNum(x);
+              var yNum = this.toNum(y);
+
+              if (xNum !== null) {
+                var dx = new Decimal(xNum);
+                if (dx.lessThan(minX)) minX = dx;
+                if (dx.greaterThan(maxX)) maxX = dx;
+              }
+              if (yNum !== null) {
+                var dy = new Decimal(yNum);
+                if (dy.lessThan(minY)) minY = dy;
+                if (dy.greaterThan(maxY)) maxY = dy;
+              }
+            }
+          }
+        }
+      }
+
+      // 如果没有数据，使用默认值
+      if (!minX.isFinite()) { minX = new Decimal(0); maxX = new Decimal(100); }
+      if (!minY.isFinite()) { minY = new Decimal(0); maxY = new Decimal(100); }
+
+      // 添加边距，确保分割线在可视范围内
+      var xPadding = new Decimal(maxX).minus(minX).times(0.1);
+      if (xPadding.isZero()) xPadding = new Decimal(10);
+      var yPadding = new Decimal(maxY).minus(minY).times(0.1);
+      if (yPadding.isZero()) yPadding = new Decimal(10);
+
+      return {
+        minX: minX.minus(xPadding).toNumber(),
+        maxX: maxX.plus(xPadding).toNumber(),
+        minY: minY.minus(yPadding).toNumber(),
+        maxY: maxY.plus(yPadding).toNumber()
+      };
+    },
+    // 渲染分割线业务标注
+    renderSplitLabelGraphic() {
+      var splitLabel = this.options.splitLabel;
+      if (!splitLabel || !splitLabel.show) {
+        this.options.graphic = [];
+        return;
+      }
+
+      var grid = this.options.grid || {};
+      var chartWidth = this.optionsStyle.width || 500;
+      var chartHeight = this.optionsStyle.height || 400;
+      var left = grid.left || 50;
+      var right = grid.right || 50;
+      var top = grid.top || 60;
+      var bottom = grid.bottom || 50;
+
+      var plotWidth = chartWidth - left - right;
+      var plotHeight = chartHeight - top - bottom;
+
+      // 小容器自适应：标签尺寸根据绘图区缩放
+      var labelWidth = Math.min(160, Math.max(60, plotWidth * 0.4));
+      var labelHeight = plotHeight < 80 ? 18 : 22;
+      var labelFontSize = plotHeight < 80 ? 10 : (splitLabel.fontSize || 12);
+
+      var minX = splitLabel.minX;
+      var maxX = splitLabel.maxX;
+      var minY = splitLabel.minY;
+      var maxY = splitLabel.maxY;
+
+      // 计算标注位置（像素坐标）
+      var xRatio = plotWidth / (maxX - minX);
+      var yRatio = plotHeight / (maxY - minY);
+
+      // X轴分割值标注位置（在分割线右上方）
+      var xLabelX = left + (splitLabel.xPosition - minX) * xRatio + 10;
+      var xLabelY = top + plotHeight + 25;
+
+      // Y轴分割值标注位置（在分割线上方）
+      var yLabelX = left - 10;
+      var yLabelY = top + (maxY - splitLabel.yPosition) * yRatio - 10;
+
+      // #region agent debug log
+      console.log('[DEBUG] renderSplitLabelGraphic:', {chartWidth, chartHeight, left, right, top, bottom, plotWidth, plotHeight, minX, maxX, minY, maxY, xRatio, yRatio, splitX: splitLabel.xPosition, splitY: splitLabel.yPosition, xLabelX, xLabelY, yLabelX, yLabelY});
+      // #endregion
+
+      this.options.graphic = [
+        {
+          type: 'group',
+          left: xLabelX,
+          top: xLabelY,
+          children: [
+            {
+              type: 'rect',
+              left: 'center',
+              top: 'middle',
+              style: {
+                fill: splitLabel.bgColor,
+                width: labelWidth,
+                height: labelHeight,
+                rx: 4,
+                ry: 4
+              },
+            },
+            {
+              type: 'text',
+              left: 'center',
+              top: 'middle',
+              style: {
+                text: splitLabel.xLabel,
+                fill: splitLabel.textColor,
+                font: labelFontSize + 'px sans-serif'
+              }
+            }
+          ]
+        },
+        {
+          type: 'group',
+          left: yLabelX,
+          top: yLabelY,
+          children: [
+            {
+              type: 'rect',
+              left: 'center',
+              top: 'middle',
+              style: {
+                fill: splitLabel.bgColor,
+                width: labelWidth,
+                height: labelHeight,
+                rx: 4,
+                ry: 4
+              },
+            },
+            {
+              type: 'text',
+              left: 'center',
+              top: 'middle',
+              style: {
+                text: splitLabel.yLabel,
+                fill: splitLabel.textColor,
+                font: labelFontSize + 'px sans-serif'
+              }
+            }
+          ]
+        }
+      ];
+    },
+    setOptionsData(e, paramsConfig) {
+      var optionsData = this.optionsData;
+      optionsData.dynamicData = optionsData.dynamicData || {};
+      var myDynamicData = optionsData.dynamicData;
+      clearInterval(this.flagInter);
+      if (
+        e &&
+        optionsData.dataType !== "staticData" &&
+        myDynamicData.contextData &&
+        Object.keys(myDynamicData.contextData).length
+      ) {
+        var keyArr = Object.keys(myDynamicData.contextData);
+        // 安全检查：确保 paramsConfig 存在且是数组
+        if (paramsConfig && Array.isArray(paramsConfig)) {
+          paramsConfig.forEach(function(conf) {
+            if (conf && conf.targetKey && conf.originKey && keyArr.includes(conf.targetKey)) {
+              myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+            }
+          });
+        }
+      }
+      optionsData.dataType === "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      console.log('[DEBUG] staticDataFn called - val length:', val && val.length);
+
+      var optionsSetup = this.optionsSetup;
+      var customColor = optionsSetup.customColor;
+      var arrColor = [];
+      for (var i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      var series = this.options.series;
+      var data = [];
+      for (var idx in val) {
+        var item = val[idx];
+        var pointColor = arrColor[idx] || arrColor[0] || '#FF7F50';
+        data.push({
+          value: [item.xData, item.yData],
+          name: item.name || item.axis,
+          amount: item.amount,
+          growth: item.growth,
+          profit: item.profit,
+          itemStyle: {
+            color: pointColor,
+            borderColor: optionsSetup.pointBorderColor || '#007BFF',
+            borderWidth: optionsSetup.pointBorderWidth || 2
+          }
+        });
+      }
+
+      console.log('[DEBUG] staticDataFn - processed data array:', data.length, 'items');
+
+      var legendName = ['scatter'];
+      for (var i in series) {
+        if (series[i].type === "scatter") {
+          series[i].type = "scatter";
+          series[i].symbol = optionsSetup.symbol;
+          series[i].symbolSize = optionsSetup.pointSize;
+          series[i].itemStyle = {
+            color: arrColor[0] || '#FF7F50',
+            borderColor: optionsSetup.pointBorderColor || '#007BFF',
+            borderWidth: optionsSetup.pointBorderWidth || 2
+          };
+
+          // 数据标注
+          series[i].label = {
+            show: optionsSetup.isShowLabel,
+            position: optionsSetup.labelPosition || 'right',
+            distance: 5,
+            fontSize: optionsSetup.labelFontSize || 12,
+            color: optionsSetup.labelColor || '#fff',
+            fontWeight: optionsSetup.labelFontWeight || 'normal',
+            formatter: function(params) {
+              var item = val[params.dataIndex];
+              if (!item) return params.name;
+              var format = optionsSetup.labelFormat || '{name}';
+              var amountUnit = optionsSetup.amountUnit || '万';
+              return format.replace(/\{name\}/g, params.name)
+                         .replace(/\{value\}/g, item.amount ? item.amount + amountUnit : params.name)
+                         .replace(/\{x\}/g, item.growth || '')
+                         .replace(/\{y\}/g, item.profit || '');
+            }
+          };
+          series[i].data = data;
+        }
+      }
+      this.options.legend["data"] = legendName;
+      this.setOptionsLegendName(legendName);
+      this.updateRightListData(data, optionsSetup);
+      this.updateQuadrantBounds();
+    },
+    dynamicDataFn(data,refreshTime) {
+      var optionsSetup = this.optionsSetup;
+      var optionsData = this.optionsData;
+      var val = optionsData.dynamicData;
+      console.log('[DEBUG] 四象限图 dynamicDataFn - optionsData.dynamicData:', val);
+      if (!val) {
+        console.warn('[DEBUG] dynamicDataFn: dynamicData is empty');
+        return;
+      }
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(function() {
+          this.getEchartData(val, optionsSetup);
+        }.bind(this), refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      var data = this.queryEchartsData(val);
+      var self = this;
+      data.then(function(res) {
+        self.renderingFn(optionsSetup, res);
+      }).catch(function(err) {
+        console.error('[DEBUG] queryEchartsData error:', err);
+      });
+    },
+    renderingFn(optionsSetup, val) {
+      if (!val || !val.series) {
+        console.warn('[DEBUG] renderingFn: val.series 无效', val);
+        return;
+      }
+
+      var customColor = optionsSetup.customColor;
+      var arrColor = [];
+      if (customColor && Array.isArray(customColor)) {
+        for (var i = 0; i < customColor.length; i++) {
+          arrColor.push(customColor[i].color);
+        }
+      }
+      var series = [];
+      var legendName = [];
+      for (var i in val.series) {
+        legendName.push(val.series[i].name);
+        var obj = {};
+        if (val.series[i].type === "scatter" || !val.series[i].type) {
+          obj.type = "scatter";
+          obj.symbol = optionsSetup.symbol;
+          obj.symbolSize = optionsSetup.pointSize;
+          obj.itemStyle = {
+            color: arrColor[i] || arrColor[0] || '#FF7F50',
+            borderColor: optionsSetup.pointBorderColor || '#007BFF',
+            borderWidth: optionsSetup.pointBorderWidth || 2
+          };
+          obj.label = {
+            show: optionsSetup.isShowLabel,
+            position: optionsSetup.labelPosition || 'right',
+            distance: 5,
+            fontSize: optionsSetup.labelFontSize || 12,
+            color: optionsSetup.labelColor || '#fff',
+            fontWeight: optionsSetup.labelFontWeight || 'normal',
+            formatter: function(params) {
+              var item = params.data;
+              if (!item || !item.name) return '';
+              var format = optionsSetup.labelFormat || '{name}';
+              var amountUnit = optionsSetup.amountUnit || '万';
+              return format.replace(/\{name\}/g, item.name)
+                         .replace(/\{value\}/g, item.amount ? item.amount + amountUnit : item.name)
+                         .replace(/\{x\}/g, item.growth || '')
+                         .replace(/\{y\}/g, item.profit || '');
+            }
+          };
+          var data = [];
+          if (Array.isArray(val.series[i].data)) {
+            data = val.series[i].data.map(function(item, idx) {
+              var pointColor = arrColor[idx % arrColor.length] || arrColor[0] || '#FF7F50';
+              // 支持多种数据格式：对象格式、数组格式、混合格式
+              var xVal, yVal;
+
+              // 方式1: 对象格式 (xData/yData)
+              if (typeof item === 'object' && item !== null) {
+                xVal = item.xData || (item.value && item.value[0]) || item[0];
+                yVal = item.yData || (item.value && item.value[1]) || item[1];
+              }
+
+              // 方式2: 数组格式
+              if (Array.isArray(item)) {
+                xVal = item[0];
+                yVal = item[1];
+              }
+
+              return {
+                value: [xVal, yVal],
+                name: item.name || item.axis || (item._raw && item._raw.name) || '',
+                amount: item.amount || (item._raw && item._raw.amount),
+                growth: item.growth || (item._raw && item._raw.growth),
+                profit: item.profit || (item._raw && item._raw.profit),
+                itemStyle: {
+                  color: pointColor,
+                  borderColor: optionsSetup.pointBorderColor || '#007BFF',
+                  borderWidth: optionsSetup.pointBorderWidth || 2
+                }
+              };
+            });
+          }
+          obj.data = data;
+          series.push(obj);
+        }
+      }
+      this.options.series = series;
+      this.options.legend["data"] = legendName;
+      this.setOptionsLegendName(legendName);
+      this.updateRightListData(data, optionsSetup);
+      this.updateQuadrantBounds();
+    },
+    // 动态更新象限分割线范围（基于实际数据）
+    updateQuadrantBounds() {
+      var optionsSetup = this.optionsSetup;
+      var splitX = optionsSetup.splitX;
+      var splitY = optionsSetup.splitY;
+
+      // 计算实际数据范围
+      var dataRange = this.calculateDataRange();
+
+      console.log('[DEBUG] updateQuadrantBounds - dataRange:', JSON.stringify(dataRange));
+      console.log('[DEBUG] updateQuadrantBounds - series[0].data length:', this.options.series[0] && this.options.series[0].data && this.options.series[0].data.length);
+      if (this.options.series[0] && this.options.series[0].data && this.options.series[0].data.length > 0) {
+        console.log('[DEBUG] updateQuadrantBounds - first data point:', JSON.stringify(this.options.series[0].data[0]));
+      }
+
+      // 更新 splitLabel 的坐标范围
+      this.options.splitLabel = {
+        show: optionsSetup.isShowSplitLabel,
+        xLabel: optionsSetup.splitXLabel || 'X>' + splitX,
+        yLabel: optionsSetup.splitYLabel || 'Y>' + splitY,
+        bgColor: optionsSetup.splitLabelBgColor || 'rgba(0, 123, 255, 0.8)',
+        textColor: optionsSetup.splitLabelColor || '#fff',
+        fontSize: optionsSetup.splitLabelFontSize || 12,
+        xPosition: splitX,
+        yPosition: splitY,
+        minX: optionsSetup.minX !== "" ? parseFloat(optionsSetup.minX) : dataRange.minX,
+        maxX: optionsSetup.maxX !== "" ? parseFloat(optionsSetup.maxX) : dataRange.maxX,
+        minY: optionsSetup.minY !== "" ? parseFloat(optionsSetup.minY) : dataRange.minY,
+        maxY: optionsSetup.maxY !== "" ? parseFloat(optionsSetup.maxY) : dataRange.maxY,
+      };
+
+      // 更新象限背景区域的范围
+      var minXVal = optionsSetup.minX !== "" ? parseFloat(optionsSetup.minX) : dataRange.minX;
+      var maxXVal = optionsSetup.maxX !== "" ? parseFloat(optionsSetup.maxX) : dataRange.maxX;
+      var minYVal = optionsSetup.minY !== "" ? parseFloat(optionsSetup.minY) : dataRange.minY;
+      var maxYVal = optionsSetup.maxY !== "" ? parseFloat(optionsSetup.maxY) : dataRange.maxY;
+
+      var markArea = this.options.series[0] && this.options.series[0].markArea;
+      if(!markArea) {
+        this.setOptionsQuadrant();
+        markArea= this.options.series[0] && this.options.series[0].markArea
+      }
+      if (markArea && markArea.data) {
+        var quadrantBgColors = [
+          optionsSetup.quadrant1BgColor || 'rgba(76, 175, 80, 0.15)',
+          optionsSetup.quadrant2BgColor || 'rgba(255, 152, 0, 0.15)',
+          optionsSetup.quadrant3BgColor || 'rgba(158, 158, 158, 0.15)',
+          optionsSetup.quadrant4BgColor || 'rgba(33, 150, 243, 0.15)'
+        ];
+        var quadrantLabels = [
+          { color: optionsSetup.quadrant1LabelColor || '#4CAF50', label: optionsSetup.quadrant1Label || '明星产品', position: 'insideTopRight' },
+          { color: optionsSetup.quadrant2LabelColor || '#FF9800', label: optionsSetup.quadrant2Label || '问题产品', position: 'insideTopLeft' },
+          { color: optionsSetup.quadrant3LabelColor || '#9E9E9E', label: optionsSetup.quadrant3Label || '瘦狗产品', position: 'insideBottomLeft' },
+          { color: optionsSetup.quadrant4LabelColor || '#2196F3', label: optionsSetup.quadrant4Label || '金牛产品', position: 'insideBottomRight' }
+        ];
+
+        markArea.data = [
+          [
+           // { xAxis: minXVal, yAxis: splitY, itemStyle: { color: quadrantBgColors[0] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[0].color, value: quadrantLabels[0].label, position: quadrantLabels[0].position } },
+          //  { xAxis: 30, yAxis: 30, itemStyle: { color: quadrantBgColors[0] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[0].color, value: quadrantLabels[0].label, position: quadrantLabels[0].position } },
+            //{ xAxis: 500, yAxis: 80 }
+            { xAxis: splitX, yAxis: splitY, itemStyle: { color: quadrantBgColors[0] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[0].color, value: quadrantLabels[0].label, position: quadrantLabels[0].position } },
+            { xAxis: maxXVal, yAxis: maxYVal }
+          ],
+          [
+            // { xAxis: -100, yAxis: 30, itemStyle: { color: quadrantBgColors[1] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[1].color, value: quadrantLabels[1].label, position: quadrantLabels[1].position } },
+            // { xAxis: 30, yAxis: 80 }
+            { xAxis: minXVal, yAxis: splitY, itemStyle: { color: quadrantBgColors[1] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[1].color, value: quadrantLabels[1].label, position: quadrantLabels[1].position } },
+            { xAxis: splitX, yAxis: maxYVal }
+          ],
+          [
+            // { xAxis: -100, yAxis: 0, itemStyle: { color: quadrantBgColors[2] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[2].color, value: quadrantLabels[2].label, position: quadrantLabels[2].position } },
+            // { xAxis: 30, yAxis: 30 }
+            { xAxis: minXVal, yAxis: minYVal, itemStyle: { color: quadrantBgColors[2] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[2].color, value: quadrantLabels[2].label, position: quadrantLabels[2].position } },
+            { xAxis: splitX, yAxis: splitY }
+          ],
+          [
+            // { xAxis: 30, yAxis: 0, itemStyle: { color: quadrantBgColors[3] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[3].color, value: quadrantLabels[3].label, position: quadrantLabels[3].position } },
+            // { xAxis: 500, yAxis: 30 }
+            { xAxis: splitX, yAxis: minYVal, itemStyle: { color: quadrantBgColors[3] }, label: { show: optionsSetup.isShowQuadrantLabel, color: quadrantLabels[3].color, value: quadrantLabels[3].label, position: quadrantLabels[3].position } },
+            { xAxis: maxXVal, yAxis: splitY }
+          ]
+        ];
+      } else {
+
+      }
+
+      // 重新渲染分割线标注
+      this.renderSplitLabelGraphic();
+    },
+    // 象限标签样式
+    quadrantLabelStyle(color) {
+      var titleColor = this.optionsSetup.quadrantTitleColor || '#fff';
+      var fontSize = this.optionsSetup.quadrantTitleFontSize || 14;
+      return {
+        color: titleColor,
+        fontSize: fontSize + 'px',
+        fontWeight: 'bold',
+        marginBottom: '8px',
+        paddingLeft: '10px',
+        borderLeft: '3px solid ' + (color || '#fff')
+      };
+    },
+    // 象限组背景样式
+    quadrantGroupStyle(group, index) {
+      // 根据象限标签动态获取对应的背景颜色配置
+      var bgColor = 'transparent';
+      if (group.label === (this.optionsSetup.quadrant1Label || '明星产品')) {
+        bgColor = this.optionsSetup.quadrant1BgColor || 'rgba(76, 175, 80, 0.15)';
+      } else if (group.label === (this.optionsSetup.quadrant2Label || '问题产品')) {
+        bgColor = this.optionsSetup.quadrant2BgColor || 'rgba(255, 152, 0, 0.15)';
+      } else if (group.label === (this.optionsSetup.quadrant3Label || '瘦狗产品')) {
+        bgColor = this.optionsSetup.quadrant3BgColor || 'rgba(158, 158, 158, 0.15)';
+      } else if (group.label === (this.optionsSetup.quadrant4Label || '金牛产品')) {
+        bgColor = this.optionsSetup.quadrant4BgColor || 'rgba(33, 150, 243, 0.15)';
+      }
+      return {
+        background: bgColor,
+        borderRadius: '4px',
+        padding: '8px',
+        marginBottom: '8px'
+      };
+    },
+    // 格式化列表项
+    formatListItem(item) {
+      var format = this.optionsSetup.listItemFormat || '{name}：{amount}{unit}';
+      var unit = this.optionsSetup.amountUnit || '万';
+      return format.replace(/\{name\}/g, item.name || '')
+                   .replace(/\{amount\}/g, item.amount || '')
+                   .replace(/\{unit\}/g, unit)
+                   .replace(/\{growth\}/g, item.growth || '')
+                   .replace(/\{profit\}/g, item.profit || '');
+    },
+    // 更新右侧数据列表
+    updateRightListData(dataList, optionsSetup) {
+      // 安全检查 - 移到这里避免后续代码报错
+      if (!dataList || !Array.isArray(dataList)) {
+        console.warn('[DEBUG] updateRightListData: dataList 无效或为空', dataList);
+        dataList = [];
+      }
+
+      var splitX = optionsSetup.splitX;
+      var splitY = optionsSetup.splitY;
+
+      console.log('[DEBUG] updateRightListData - splitX:', splitX, 'splitY:', splitY);
+      console.log('[DEBUG] dataList length:', dataList ? dataList.length : 0);
+
+      // 分割值默认值
+      if (splitX === undefined || splitX === null) splitX = 30;
+      if (splitY === undefined || splitY === null) splitY = 30;
+
+      // 四象限分组
+      var quadrant1 = { label: optionsSetup.quadrant1Label || '明星产品', color: optionsSetup.quadrant1LabelColor || '#4CAF50', items: [] };
+      var quadrant2 = { label: optionsSetup.quadrant2Label || '问题产品', color: optionsSetup.quadrant2LabelColor || '#FF9800', items: [] };
+      var quadrant3 = { label: optionsSetup.quadrant3Label || '瘦狗产品', color: optionsSetup.quadrant3LabelColor || '#9E9E9E', items: [] };
+      var quadrant4 = { label: optionsSetup.quadrant4Label || '金牛产品', color: optionsSetup.quadrant4LabelColor || '#2196F3', items: [] };
+
+      var colors = ['#FF7F50', '#87cefa', '#da70d6', '#32cd32', '#6495ed'];
+      var self = this;
+
+      dataList.forEach(function(item, idx) {
+        var x = item.value ? item.value[0] : (item.xData || 0);
+        var y = item.value ? item.value[1] : (item.yData || 0);
+        var color = item.itemStyle && item.itemStyle.color ? item.itemStyle.color : colors[idx % colors.length];
+
+        var dataItem = {
+          name: item.name || item.axis || '',
+          amount: item.amount,
+          growth: item.growth,
+          profit: item.profit,
+          color: color
+        };
+
+        console.log('[DEBUG] item:', item.name, '| x:', x, 'y:', y, '| splitX:', splitX, 'splitY:', splitY, '| quadrant:', (x >= splitX && y >= splitY ? '1' : x < splitX && y >= splitY ? '2' : x < splitX && y < splitY ? '3' : '4'));
+
+        if (x >= splitX && y >= splitY) {
+          quadrant2.items.push(dataItem);
+        } else if (x < splitX && y >= splitY) {
+          quadrant1.items.push(dataItem);
+        } else if (x < splitX && y < splitY) {
+          quadrant3.items.push(dataItem);
+        } else {
+          quadrant4.items.push(dataItem);
+        }
+      });
+
+      console.log('[DEBUG] quadrant1 count:', quadrant1.items.length, 'quadrant2 count:', quadrant2.items.length, 'quadrant3 count:', quadrant3.items.length, 'quadrant4 count:', quadrant4.items.length);
+
+      this.rightListData = [quadrant1, quadrant2, quadrant3, quadrant4];
+      var chartWidth = this.optionsStyle.width || 400;
+      // 小容器中自动隐藏右侧列表
+      this.rightListConfig.show = optionsSetup.isShowRightList !== false && chartWidth >= 280;
+      this.rightListConfig.title = optionsSetup.rightListTitle || '数据分析';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.right-list {
+  .list-title {
+    font-weight: bold;
+  }
+  .list-content {
+    .quadrant-group {
+      margin-bottom: 12px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .quadrant-label {
+      margin-bottom: 6px;
+    }
+    .quadrant-items {
+      .list-item {
+        display: flex;
+        align-items: center;
+        padding: 2px 0;
+        &.empty {
+          color: rgba(255, 255, 255, 0.4);
+          font-style: italic;
+        }
+        .item-dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          margin-right: 8px;
+          flex-shrink: 0;
+        }
+        .item-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index c45d2d7..6cccf40 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -22,6 +22,7 @@ import widgetVideo from "./texts/widgetVideo.vue";
 import widgetVideoMonitor from "./texts/widgetVideoMonitor.vue";
 import WidgetIframe from "./texts/widgetIframe.vue";
 import widgetCalendar from "./texts/widgetCalendar.vue";
+import widgetPagination from "./texts/widgetPagination.vue";
 import widgetBarchart from "./bar/widgetBarchart.vue";
 import widgetLinechart from "./line/widgetLinechart.vue";
 import widgetBarlinechart from "./barline/widgetBarlinechart";
@@ -50,6 +51,7 @@ import widgetFormTime from "./form/widgetFormTime.vue";
 import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
 import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
 import widgetScatter from "./scatter/widgetScatter.vue";
+import widgetQuadrantScatter from "./scatter/widgetQuadrantScatter.vue";
 import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
 import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
 import widgetBorder from "./styleWidget/widgetBorder.vue";
@@ -59,6 +61,8 @@ import widgetChinaMap from "./map/widgetChinaMap.vue";
 import widgetGlobalMap from "./map/widgetGlobalMap.vue";
 import widgetBarStackMoreShowChart from "./bar/widgetBarStackMoreShowChart.vue";
 import widgetBarLineSingleChart from "./barline/widgetBarLineSingleChart.vue";
+// 新增：导入 widgetTabs 组件
+import widgetTabs from "./form/widgetTabs.vue";
 export default {
   name: "WidgetTemp",
   components: {
@@ -76,6 +80,7 @@ export default {
     widgetVideoMonitor,
     WidgetIframe,
     widgetCalendar,
+    widgetPagination,
     widgetBarchart,
     widgetGradientColorBarchart,
     widgetLinechart,
@@ -108,8 +113,11 @@ export default {
     widgetChinaMap,
     widgetGlobalMap,
     widgetScatter,
+    widgetQuadrantScatter,
     widgetBarStackMoreShowChart,
-    widgetBarLineSingleChart
+    widgetBarLineSingleChart,
+    // 新增：注册 widgetTabs 组件
+    widgetTabs
   },
   model: {
     prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetCalendar.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetCalendar.vue
index c5d1640..151ad42 100644
--- a/src/views/bigscreenDesigner/designer/widget/texts/widgetCalendar.vue
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetCalendar.vue
@@ -262,7 +262,7 @@ export default {
         year: date.year(),
         month: date.month(), // 0-11
         day: date.date(),   // 1-31
-        weekday: date.day(), // 0-6 (0是周日)
+        weekday: date.day(), // 0-6 (0 是周日)
         isCurrentMonth,
         isOutOfRange: !isCurrentMonth,
         isToday,
@@ -271,9 +271,29 @@ export default {
         isDisabled,
         fullDate: date.toDate()
       }
+    },
+    beforeDestroy() {
+      console.log('[Calendar] beforeDestroy 开始清理资源');
+      
+      // 清除定时器，避免内存泄漏
+      if (this.flagInter) {
+        clearInterval(this.flagInter);
+        this.flagInter = null;
+        console.log('[Calendar] 已清除动态数据定时器');
+      }
+      
+      // 清空大型数据引用，释放内存
+      this.options = {};
+      this.optionsSetup = {};
+      this.optionsPosition = {};
+      this.optionsData = {};
+      this.text = {};
+      
+      console.log('[Calendar] 资源清理完成');
     }
-  }
-}
+  },
+};
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetImage.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetImage.vue
index 781d1fa..65379f3 100644
--- a/src/views/bigscreenDesigner/designer/widget/texts/widgetImage.vue
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetImage.vue
@@ -65,7 +65,7 @@ export default {
   },
   methods: {
     handleClick(){
-      console.log(this.optionsSetup)
+      // console.log(this.optionsSetup)
       if(!!this.optionsSetup.is_drill_drown){
         this.$emit('oepnTheDrillView',this.optionsSetup.drill_drown_setting)
       }
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetMarquee.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetMarquee.vue
index 951471e..394e098 100644
--- a/src/views/bigscreenDesigner/designer/widget/texts/widgetMarquee.vue
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetMarquee.vue
@@ -114,9 +114,19 @@ export default {
         this.styleColor.text = this.optionsSetup.joinText === "" ? res[0].value : res[0].value + this.optionsSetup.joinText;
         this.$forceUpdate();
       });
+    },
+    beforeDestroy() {
+      // 清除定时器，避免内存泄漏
+      if (this.flagInter) {
+        clearInterval(this.flagInter);
+        this.flagInter = null;
+      }
+      
+      console.log('[Marquee] beforeDestroy 资源清理完成');
     }
-  }
+  },
 };
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetPagination.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetPagination.vue
new file mode 100644
index 0000000..d675865
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetPagination.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="pagination-container full-box" :style="styleObj">
+    <el-pagination
+      :background="true"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total="total"
+      :page-sizes="pageSizes"
+      :layout="layout"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :style="paginationStyle"
+    />
+  </div>
+</template>
+
+<script>
+import { targetWidgetLinkageLogic, originWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
+
+export default {
+  name: 'widgetPagination',
+  props: {
+    value: Object,
+    ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      options: {},
+      optionsSetup: {},
+      optionsPosition: {},
+      optionsData: {},
+
+      // 分页数据
+      total: 0,
+      currentPage: 1,
+      pageSize: 10,
+      pageCount: 1,
+      pageSizes: [10, 20, 50, 100],
+    }
+  },
+  computed: {
+    showPrevNext () {
+      return this.optionsSetup.showPrevNext !== false;
+    },
+    showJumper () {
+      return this.optionsSetup.showJumper === true;
+    },
+    showTotal () {
+      return this.optionsSetup.showTotal !== false;
+    },
+    enableBackground () {
+      return this.optionsSetup.enableBackground !== false;
+    },
+    customPageSize () {
+      return this.optionsSetup.customPageSize === true;
+    },
+    layout () {
+      let layoutStr = '';
+      if (this.showTotal) {
+        layoutStr += 'total, ';
+      }
+      if (this.showPrevNext) {
+        layoutStr += 'prev, ';
+      }
+      layoutStr += 'pager, ';
+      if (this.showPrevNext) {
+        layoutStr += 'next, ';
+      }
+      if (this.showJumper) {
+        layoutStr += 'jumper';
+      }
+      // 移除末尾的逗号和空格
+      return layoutStr.replace(/,\s*$/, '');
+    },
+    styleObj() {
+      const allStyle = this.optionsPosition;
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: allStyle.width + "px",
+        height: allStyle.height + "px",
+        left: allStyle.left + "px",
+        top: allStyle.top + "px",
+      };
+    },
+    paginationStyle() {
+      return {
+        '--item-background': this.enableBackground ? (this.optionsSetup.itemBackground || 'rgb(255, 255, 255)') : 'transparent',
+        '--item-text-color': this.optionsSetup.itemTextColor || 'rgb(51, 51, 51)',
+        '--selected-background': this.enableBackground ? (this.optionsSetup.selectedBackground || 'rgb(10, 115, 255)') : 'transparent',
+        '--selected-text-color': this.optionsSetup.selectedTextColor || 'rgb(255, 255, 255)',
+        '--border-color': this.enableBackground ? (this.optionsSetup.borderColor || 'rgb(221, 221, 221)') : 'transparent',
+        '--disabled-text-color': this.optionsSetup.disabledTextColor || 'rgb(204, 204, 204)',
+        '--total-text-color': this.optionsSetup.totalTextColor || 'rgb(51, 51, 51)',
+        '--font-size': (this.optionsSetup.fontSize || 14) + 'px'
+      };
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+        this.optionsSetup = (val && val.setup) || {};
+        this.optionsPosition = (val && val.position) || {};
+        this.optionsData = (val && val.data) || {};
+        this.setOptionsData();
+      },
+      deep: true
+    },
+    // 监听自定义每页条数配置变化
+    'optionsSetup.customPageSize': {
+      handler() {
+        this.setOptionsData();
+      }
+    },
+    'optionsSetup.pageSize': {
+      handler() {
+        if (this.customPageSize) {
+          this.pageSize = this.optionsSetup.pageSize || 10;
+        }
+      }
+    }
+  },
+  mounted() {
+    this.options = this.value;
+    this.optionsSetup = this.value.setup;
+    this.optionsPosition = this.value.position;
+    this.optionsData = this.value.data;
+    
+    // 先检查联动配置，再初始化数据
+    this.checkTableLinkage();
+    targetWidgetLinkageLogic(this);
+    this.setOptionsData();
+  },
+  methods: {
+    // 检查表格组件联动配置
+    checkTableLinkage() {
+      if (!this.allComponentLinkage || !this.allComponentLinkage.length) return;
+      
+      // console.log('分页组件：开始检查表格联动配置');
+      
+      // 查找是否有表格组件的联动配置（表格作为源组件，分页作为目标组件）
+      this.allComponentLinkage.some(item => {
+        if (item.index !== -1 && item.linkageArr && item.linkageArr.length) {
+          return item.linkageArr.some(obj => {
+            // 查找目标组件是当前分页组件的联动配置
+            if (obj.targetId === this.value.setup.widgetId) {
+              // 查找源组件是否是表格组件
+              const originLinkage = this.allComponentLinkage.find(link => link && link.id === obj.originId);
+              if (originLinkage && originLinkage.widgetCode === 'widget-table') {
+                this.hasLinkage = true;
+                this.linkageTable = {
+                  originId: obj.originId,
+                  targetId: obj.targetId,
+                  paramsConfig: obj.paramsConfig
+                };
+                // console.log('分页组件：检测到与表格组件的联动配置', this.linkageTable);
+                return true;
+              }
+            }
+            return false;
+          });
+        }
+        return false;
+      });
+      
+      if (!this.hasLinkage) {
+        // console.log('分页组件：未检测到与表格组件的联动配置');
+      }
+    },
+    
+    // 处理每页条数变化
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.emitLinkage();
+    },
+    // 处理当前页变化
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.emitLinkage();
+    },
+    // 触发联动
+    emitLinkage() {
+      const formData = {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        total: this.total,
+        pageCount: this.pageCount
+      };
+      originWidgetLinkageLogic(this, true, {
+        currentData: formData,
+      });
+    },
+    // 数据解析
+    setOptionsData(e, paramsConfig) {
+      const optionsData = this.optionsData;
+      optionsData.dynamicData = optionsData.dynamicData || {};
+      const myDynamicData = optionsData.dynamicData;
+      clearInterval(this.flagInter);
+      
+      if (
+        e &&
+        optionsData.dataType !== "staticData" &&
+        Object.keys(myDynamicData.contextData).length
+      ) {
+        const keyArr = Object.keys(myDynamicData.contextData);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+        return; // 接收到联动数据后立即返回，防止后续逻辑覆盖
+      }
+      if (optionsData.dataType === "dynamicData") {
+        this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+      } else {
+        const staticData = this.objToOne(this.options).staticData;
+        if (staticData) {
+          this.total = (staticData[0].totalNum !== undefined && staticData[0].totalNum !== null) ? staticData[0].totalNum : 0;
+          this.currentPage = (staticData.currentPage !== undefined && staticData.currentPage !== null) ? staticData.currentPage : 1;
+          
+          // 优先级：配置的 pageSize > 静态数据的 pageSize > 默认值 10
+          if (this.customPageSize && this.optionsSetup.pageSize !== undefined && this.optionsSetup.pageSize !== null) {
+            this.pageSize = this.optionsSetup.pageSize;
+          } else if (staticData.pageSize !== undefined && staticData.pageSize !== null) {
+            this.pageSize = staticData.pageSize;
+          } else {
+            this.pageSize = 10;
+          }
+          
+          this.pageCount = (staticData.pageCount !== undefined && staticData.pageCount !== null) ? staticData.pageCount : 0;
+        } else {
+          // 如果没有静态数据，使用默认值：total 为 0
+          this.total = 0;
+          this.currentPage = 1;
+          
+          // 优先级：配置的 pageSize > 默认值 10
+          if (this.customPageSize && this.optionsSetup.pageSize !== undefined && this.optionsSetup.pageSize !== null) {
+            this.pageSize = this.optionsSetup.pageSize;
+          } else {
+            this.pageSize = 10;
+          }
+          
+          this.pageCount = 0;
+        }
+      }
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        if (res && res.length > 0) {
+          const staticData = res;
+          // console.log('staticData',staticData)
+          // 从接口返回的数据中提取分页信息
+          this.total = (staticData[0].totalNum !== undefined && staticData[0].totalNum !== null) ? staticData[0].totalNum : 0;
+          
+          // 保持当前页和每页条数，不直接从接口重置
+          // 如果接口返回了 currentPage/pageSize，则使用接口的值
+          if (staticData.currentPage !== undefined && staticData.currentPage !== null) {
+            this.currentPage = staticData.currentPage;
+          }
+          if (staticData.pageSize !== undefined && staticData.pageSize !== null) {
+            this.pageSize = staticData.pageSize;
+          }
+          if (staticData.pageCount !== undefined && staticData.pageCount !== null) {
+            this.pageCount = staticData.pageCount;
+          }
+        } else if (res && typeof res === 'object') {
+          // 如果返回的是对象格式 { list: [...], total: 100, ... }
+          if (res.list && Array.isArray(res.list)) {
+            this.total = (staticData[0].totalNum !== undefined && staticData[0].totalNum !== null) ? staticData[0].totalNum : staticData[0].totalNum;
+          } else {
+            this.total = (staticData[0].totalNum !== undefined && staticData[0].totalNum !== null) ? staticData[0].totalNum : 0;
+          }
+          
+          if (res.currentPage !== undefined && res.currentPage !== null) {
+            this.currentPage = res.currentPage;
+          }
+          if (res.pageSize !== undefined && res.pageSize !== null) {
+            this.pageSize = res.pageSize;
+          }
+          if (res.pageCount !== undefined && res.pageCount !== null) {
+            this.pageCount = res.pageCount;
+          }
+        }
+        this.$forceUpdate();
+      });
+    },
+    objToOne(obj) {
+      // 工具方法，将对象转换为扁平结构
+      const result = {};
+      for (let key in obj) {
+        if (obj[key] && typeof obj[key] === 'object') {
+          Object.assign(result, obj[key]);
+        } else {
+          result[key] = obj[key];
+        }
+      }
+      return result;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.pagination-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+}
+
+.full-box {
+  height: 100%;
+}
+
+/* 覆盖 Element UI 分页组件默认样式 */
+::v-deep .el-pagination {
+  background: transparent !important;
+  font-size: var(--font-size, 14px);
+  
+  /* 总条数文字样式 */
+  .el-pagination__total {
+    color: var(--total-text-color, rgb(51, 51, 51)) !important;
+    font-size: var(--font-size, 14px) !important;
+    margin-right: 10px;
+  }
+  
+  /* 页码项样式 */
+  .el-pagination__numbers,
+  .btn-prev,
+  .btn-next,
+  .el-pager li {
+    background-color: var(--item-background, rgb(255, 255, 255)) !important;
+    color: var(--item-text-color, rgb(51, 51, 51)) !important;
+    border: 1px solid var(--border-color, rgb(221, 221, 221)) !important;
+    font-size: var(--font-size, 14px) !important;
+    
+    &:hover:not(.disabled):not(.active) {
+      opacity: 0.8;
+    }
+    
+    &.disabled {
+      color: var(--disabled-text-color, rgb(204, 204, 204)) !important;
+    }
+  }
+  
+  /* 选中状态 */
+  .el-pager li.active {
+    background-color: var(--selected-background, rgb(10, 115, 255)) !important;
+    color: var(--selected-text-color, rgb(255, 255, 255)) !important;
+  }
+  
+  /* 上一页/下一页按钮 */
+  .btn-prev,
+  .btn-next {
+    padding: 0 10px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    border-radius: 4px;
+  }
+  
+  /* 页码列表 */
+  .el-pager {
+    li {
+      padding: 0 10px;
+      min-width: 32px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 14px;
+      border-radius: 4px;
+      margin: 0 5px;
+    }
+  }
+  
+  /* 跳页器 */
+  .el-pagination__jump {
+    color: var(--item-text-color, rgb(51, 51, 51));
+    margin-left: 10px;
+    
+    .el-input {
+      .el-input__inner {
+        background-color: var(--item-background, rgb(255, 255, 255));
+        color: var(--item-text-color, rgb(51, 51, 51));
+        border-color: var(--border-color, rgb(221, 221, 221));
+        font-size: var(--font-size, 14px);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy 2.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy 2.vue
new file mode 100644
index 0000000..7343232
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy 2.vue	
@@ -0,0 +1,1224 @@
+<template>
+  <div :style="styleObj">
+    <superslide v-if="hackReset" :options="options" class="txtScroll-top" ref="superslide">
+      <!--表头-->
+      <div class="title">
+        <div v-if="isIndex" :style="[headerTableStyle,{width:'50px',flexShrink: 0}, tableRowHeight()]">
+          序号
+        </div>
+        <div v-for="(item, index) in header" :key="index" :style="[headerTableStyle, tableFiledWidth(index), tableRowHeight()]" @click="handleSort(index)" class="sortable-header">
+          {{ item.name }}
+          <span class="sort-icon" :class="getSortClass(index)">
+            <i class="el-icon-arrow-up"></i>
+            <i class="el-icon-arrow-down"></i>
+          </span>
+        </div>
+      </div>
+      <!--数据-->
+      <div class="bd"  @click="handleClick">
+        <ul class="infoList">
+          <li v-for="(item, index) in sortedList" :key="index"  :style="tableRowHeight()">
+            <div @mouseenter="handleMouseSeen(index, -1)" @mouseleave="handleMouseLeave"
+                v-if="isIndex" :style="[
+                bodyTableStyle, 
+                tableReadColor(index, -1),
+                {width:'50px',flexShrink: 0},
+                bodyTable(index),
+                tableRowHeight()]"
+            >
+              {{ index + 1 }}
+            </div>
+            <div @mouseenter="handleMouseSeen(index, idx)" @mouseleave="handleMouseLeave" v-for="(itemChild, idx) in header"
+                :key="idx"
+                :style="[
+                    bodyTableStyle,
+                    bodyTable(index),
+                    tableFiledWidth(idx),
+                    tableReadColor(index, idx),
+                    tableRowHeight()
+              ]"
+            >
+              {{ item[itemChild.key] }}
+            </div>
+
+          </li>
+        </ul>
+      </div>
+    </superslide>
+
+    <!-- 添加导出按钮，仅在预览模式显示 -->
+    <div v-if="ispreview && optionsSetUp.showExportButton" class="export-button-container" :style="exportButtonContainerStyle">
+      <!-- <div class="export-button" :style="exportButtonStyle" @click="openExportDialog">
+        <span class="button-text">导出1</span>
+      </div> -->
+      <div class="export-buttonS" @click="openSourceDataDialog">
+        <el-tooltip class="item" effect="dark" content="放大" placement="top">
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAALpSURBVHic5ZtBTttAFIa/Fw9s6yPkCHAD2LeKskMIRLhBOQHhBJQTBERVsbMQ3dMblCNwA7JunLwuSCAKSezYM/aM+ZeEPOf7GMbOmxk5flDFQW6/ibioazutuj9A3TF1f4A8OUx0p2UYCOyULDXUCVdmwo/rrgwJQcBBou3I8AjEFsrF0uJ8LHwBzlgmwLf/3W1DR+3Av0fozQR81jngTaj3Av6l3Lus772Au64864QLV/W9nwQBfnakD/TX/U4v0XhseNm0tvcjIG/GW1wWeV8jBBz/1gFKr8h7gxdQBp7QBZSFJ2QBWfAKT+OU3aw6QQrIA29S9n915SmrVnAC8sLPvuxkJSgBtuEJSYALeEIR4AqeEAS4hMd3AZbg14rxVoCtv7zCh1vh/M+Mbx0gLA/7NOV0y/B3rgkynHWDABoNP8tBou1tQ4dpg+WuK8+z17wS4HrCWxZvBNQBjy8C6oLHh7vA0b3264LHBwEinKx6zTU8PghQWf6gUgU8Pghg8rHvXxU8vkyCR/faF+EEIdYJV9M2eCWpTEAv0XgccY7QQxmqclMl6KpUIqCXaJwaHheXt3XCRd0SnM8Bq+CnV++4vn5WnApYCw+IWl72LhBnArLgAVS5cXX9vHEyB+SBR7i+/SqnLq6/SawLCAke2wJCg2dRwLrGQVZChGdewNGD7gkk862jUcpuHgmhwrOwQ+RyYStabAwDYH9dgdDgF3fGvt0GlwFkbUwMDX5Zsp4DVj6oNAGeog9CTYGniIAmwbOpgKbBs4mAJsKTV0BT4ckj4DDRnabCk2erbPS6sLg6AcNTuh8QODylBDQAnsICGgJPUQHR6H2DQegpdF5gbHg5flh53HDI6zbVszw7NeuOi6ZoDOxFEclBom0H9a3GXVtcaG9F7DmrbynzAqwvREoLJ8dybeZ9DlCuEb5brD1sjeyd+HJ1xvltBERjLqans0qPBIU/o5TdKpa3y8aL5fE8cT4CPmv+A1ULm7uy31GJAAAAAElFTkSuQmCC" alt="">
+        </el-tooltip>
+      </div>
+      <div class="export-buttonS" @click="openSourceDataDialog">
+        <el-tooltip class="item" effect="dark" content="源数据" placement="top">
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA/CAYAAACxdtubAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAALuSURBVGiB7ZvBcdpAFEDfl1GucQdWB8EVhNxtY24cYEIqcFwBpgKbCoIDnvGNsSkAOgipIEoHvovo5xCc8UyksBISWsm8I/or/kO7y19pJaxpT9Vza1wreAJ1yozi47AIAgb3LfEBBKD7qD2Ea+Cw6Bwz5gnlcnwmI1lfyW8VlHzmKVhx7Lgu/QpLAhy6Ln2HkEbRmeSNKvUaghd5VBip8sCKp51nlgLH5UiVHvx74QTqtZh2i/GJfMo/vcy57c50HiXrREWLMNpJWjmgMIz6PFI0DPiZe0Z5ETPUIkWrSNwYjaUz03PCYisn54AfX0/kNkkbY9HeVA9XNeYC9aL7gSp0Zvp5cirHpm2MUw5dmjbVwAL1zkzPTeONRTX8UxfbhCO8NY41DQx+sUDxU2eVNYrvBDyYhhuP0fuW+O2pfnBd+qox1dSOEGEZrBiOW2JctSWadddruzJWTEXPn7tjL1o1Xo1oosmo+6g9oB+7ht0Vih/C8O5MbkybGF/RzkwbCF8KlwQQPEe4bk/VOBdjUQfepU4sJ964vDeNNa91V3xPnVFOhGq+bjYWnbRkoSGD1FlljIYMJqeyMI1PNBlNmnLVm+rNquBVTA2WowTlH2kW3usvMP4lbeHV/I/uRavGXrRq7EWrxl60auxFq0biWjdP2lP1XJeLrfZUxNxztka0M9OGwBzN5/zWdF0RPuZ5fmtEc33MofjWiOZJCENrxmgUCksRlhuCvKhdKH8PhwzumnJjtSghD+OmXMUdbk/Vcw+Yxz251ZDBZN2+tF33hWTk2H4pSVlFk0pSRtE0kpRNNK0kZRLdRpKyiG4rSRlEs5DEpqI+CjngyJXtJbFdFKVnUgyYEN11a3bvsU8qSezGZLjILKuMSSPJf7puozvTuQijHW5S3tiL0koC1BSWMbs2G6o0xJJRvI0kgLNxGWQB20oCOEHAAOx95SMLSQDnviU+yqWNsllJ8vwSHi9uNarSEPAKfY0rxYapTfwGBcAag16PecMAAAAASUVORK5CYII=" alt="">
+        </el-tooltip>
+      </div>
+      <div class="export-buttonS" @click="openExportDialog">
+        <el-tooltip class="item" effect="dark" content="导出" placement="top">
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA+CAYAAAB6Kgg+AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIzSURBVGiB7drPcdNAFMfx75OlnNUBpoN0gBsgwbcMEw9KBbRgV2CoIGZIZnJTMAWQDkgHSQmckeXHxZBEkv9Ju2uN2N9xtfbuZ3TQW+kJDnP+TccifABYwufrE/nkam1xtdD5dx0I/Hg+li14fTOURxfrBy4WAQiEV8Wxo4g3ztZ3tdCh46Fdi4d2LR7atXho1+KhXYuHdi0e2rV4aNcSrrvwPtXjI3icDeWX2y3VS5Jq/Bv66/ZcuqNnqfZHc33ohfzMQx5Gc02c7bZmRnNN8pB/ez5LtV+cU4JGIVOEvxNjhMs2Y0dzTRAugXg1FEch0+K8ElSffvCUlmKfIbemBBXlS+XMlmE3IZWyoQT9eiIzXTKp/PeWYDcil0yu3sptcbzy8XJ1KuO2YrciT2VcdW3tc7SN2LpIthUMbcI2QbJLZdQGbFMku5aAh8SaQLJPrXsIrCkk+xb1LrEmkdQ5vbjAmkZS95hmE2sDSZPzqA2sLSRND94msTaRmHjDYAJrG4nJZo2NRyblQgJUldmLxYVEl4htJKa7UracD2+Bd4WxO2BQNdkkEhvtN/schtfFNBJbfUZNsDaQ2GyoqoO1hcR259g+WJtIXLTI7YK1jcRVL6CL5+S2OGt6rMK6QuISyuozRy/iI0CWMXHV2enj4+Pj4+Pjs1MkSTXOI6aqlL77dyEi3PcyJmEekqIMnNaCLqMM8og4AI4PvRfrUZJA4X8orO+CxYLh6m1cJ6Nwny24+AOVjmNs19e91wAAAABJRU5ErkJggg==" alt="">
+        </el-tooltip>
+      </div>
+    </div>
+    
+    <!-- 导出对话框 -->
+    <el-dialog
+      title="导出表格数据"
+      :visible.sync="exportDialogVisible"
+      :width="dialogWidth"
+      :fullscreen="isMobile"
+      :close-on-click-modal="false"
+      center
+      :modal-append-to-body="true"
+      append-to-body
+      :z-index="9999"
+      class="export-dialog">
+      <el-form :model="exportForm" label-width="100px" size="small">
+        <el-form-item label="文件名称">
+          <el-input v-model="exportForm.fileName" placeholder="请输入文件名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="导出格式">
+          <el-radio-group v-model="exportForm.format">
+            <el-radio label="excel">Excel格式(.xlsx)</el-radio>
+            <el-radio label="csv">CSV格式(.csv)</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <div class="export-info">
+            <p><i class="el-icon-info"></i> 表格名称：数据表</p>
+            <p><i class="el-icon-tickets"></i> 数据总量：{{list.length}}行 {{header.length}}列</p>
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="exportDialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="confirmExport" :loading="exporting">确定导出</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 源数据对话框 -->
+    <el-dialog
+      title="源数据查看"
+      :visible.sync="sourceDataDialogVisible"
+      width="60%"
+      :fullscreen="isMobile"
+      :close-on-click-modal="false"
+      center
+      :modal-append-to-body="true"
+      append-to-body
+      :z-index="9999"
+      class="source-data-dialog">
+      <div class="source-data-content">
+        <div class="timestamp">
+          <span>起始年月：</span>
+          <el-date-picker
+            v-model="times"
+            type="monthrange"
+            range-separator="至"
+            start-placeholder="开始月份"
+            end-placeholder="结束月份" size="mini">
+          </el-date-picker>
+          <el-button type="primary" @click="handleQuery">查询</el-button>
+          <el-button @click="resetTime">重置</el-button>
+        </div>
+        <el-table
+          :data="sourceDataList"
+          border
+          style="width: 100%"
+          max-height="500"
+          size="small">
+          <el-table-column
+            v-for="(item, index) in header"
+            :key="index"
+            :prop="item.key"
+            :label="item.name"
+            show-overflow-tooltip>
+          </el-table-column>
+        </el-table>
+        <!-- <div class="data-info">
+          <p><i class="el-icon-tickets"></i> 数据总量：{{sourceDataList.length}}行 {{header.length}}列</p>
+        </div> -->
+        <!-- 分页组件 -->
+        <div class="pagination-container">
+          <el-pagination
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            class="pagination">
+          </el-pagination>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="closeSourceDataDialog">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import vue from "vue";
+import VueSuperSlide from "vue-superslide";
+import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
+
+vue.use(VueSuperSlide);
+export default {
+  name: 'widgetTable',
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      hackReset: true,
+      options: {
+        titCell: ".hd ul",
+        mainCell: ".bd ul",
+        effect: "topLoop",
+        autoPage: true,
+        autoPlay: true,
+        vis: 5,
+        rowHeight: "50px"
+      },
+      header: [],
+      list: [],
+      hoverIndex: {},
+      optionsSetUp: {},
+      optionsPosition: {},
+      optionsData: {},
+      flagInter: null,
+      isIndex: false,
+      // 新增导出对话框相关数据
+      exportDialogVisible: false,
+      exporting: false,
+      exportForm: {
+        fileName: '',
+        format: 'excel'
+      },
+      // 添加设备检测变量
+      isMobile: false,
+      screenWidth: window.innerWidth,
+      sourceDataDialogVisible: false,
+      sourceDataList: [],
+      // 新增分页相关数据
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      // 新增排序相关数据
+      sortColumn: -1,
+      sortOrder: '', // 'asc' 升序，'desc' 降序，'' 无排序
+      // 新增联动相关数据
+      hasLinkage: false,
+      linkagePagination: null,
+      times:['',''],
+
+    };
+  },
+  computed: {
+    styleObj() {
+      const allStyle = this.optionsPosition;
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: allStyle.width + "px",
+        height: allStyle.height + "px",
+        left: allStyle.left + "px",
+        top: allStyle.top + "px",
+        background: this.optionsSetUp.tableBgColor
+      };
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+    headerTableStyle() {
+      const headStyle = this.optionsSetUp;
+      this.isIndex=headStyle.isIndex
+      return {
+        "text-align": headStyle.textAlignHeader,
+        "font-size": headStyle.fontSizeHeader + "px",
+        "font-weight": headStyle.headTextFontWeight,
+        "font-style": headStyle.headTextFontStyle,
+        "font-family": headStyle.headTextFontFamily,
+        "border-style": headStyle.isLine ? "solid" : "none",
+        "border-width": headStyle.borderWidth + "px",
+        "border-color": headStyle.borderColor,
+        "line-height": headStyle.rowHeight + 'px',
+        display: headStyle.isHeader ? "block" : "none",
+        color: headStyle.headColor,
+        "background-color": headStyle.headBackColor
+      };
+    },
+    bodyTableStyle() {
+      const bodyStyle = this.optionsSetUp;
+      return {
+        "text-align": bodyStyle.textAlignBody,
+        "font-size": bodyStyle.fontSizeBody + "px",
+        "font-weight": bodyStyle.bodyTextFontWeight,
+        "font-style": bodyStyle.bodyTextFontStyle,
+        "font-family": bodyStyle.bodyTextFontFamily,
+        "border-style": bodyStyle.isLine ? "solid" : "none",
+        "border-width": bodyStyle.borderWidth + "px",
+        "border-color": bodyStyle.borderColor,
+        "color": bodyStyle.bodyColor,
+      };
+    },
+    // 新增样式计算属性
+    exportButtonStyle() {
+      // 根据表头字体大小动态计算按钮大小
+      const headerFontSize = parseInt(this.optionsSetUp.fontSizeHeader || 16);
+      
+      // 计算图标尺寸，基于表头字体大小
+      const iconSize = Math.max(14, Math.min(24, headerFontSize * 1.1));
+      
+      // 计算按钮高度，略大于图标尺寸
+      const buttonHeight = Math.round(iconSize * 1.8);
+      
+      return {
+        height: `${buttonHeight}px`,
+        padding: '0 12px',
+        fontSize: `${iconSize}px`,
+        backgroundColor: 'rgba(39, 174, 96, 0.9)',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+        color: '#ffffff'
+      };
+    },
+    exportButtonContainerStyle() {
+      // 计算按钮容器的位置，使其恰好超出表头几个像素
+      const headerHeight = this.optionsSetUp.rowHeight || 50;
+      // 按钮高度
+      const buttonHeight = parseInt(this.exportButtonStyle.height);
+      // 设置按钮位置
+      return {
+        // position: 'absolute',
+        // top: `-${buttonHeight + 5}px`, // 按钮高度 + 5px的间距
+        // right: '10px',
+        // zIndex: '100'
+      };
+    },
+    // 添加对话框宽度计算属性
+    dialogWidth() {
+      if (this.isMobile) {
+        return '100%';
+      } else if (this.screenWidth < 768) {
+        return '90%';
+      } else if (this.screenWidth < 992) {
+        return '80%';
+      } else if (this.screenWidth < 1200) {
+        return '60%';
+      } else {
+        return '420px';
+      }
+    },
+    // 分页后的数据
+    // 排序后的数据
+    sortedList() {
+      if (this.sortColumn === -1 || this.sortOrder === '') {
+        return this.list;
+      }
+      const sortedData = [...this.list];
+      const key = this.header[this.sortColumn] ? this.header[this.sortColumn].key : null;
+      if (!key) return this.list;
+      
+      sortedData.sort((a, b) => {
+        const valA = a[key];
+        const valB = b[key];
+        
+        // 判断是否为数字
+        const isNumA = !isNaN(valA);
+        const isNumB = !isNaN(valB);
+        
+        let compareResult = 0;
+        if (isNumA && isNumB) {
+          compareResult = Number(valA) - Number(valB);
+        } else {
+          compareResult = String(valA).localeCompare(String(valB), 'zh-CN');
+        }
+        
+        return this.sortOrder === 'asc' ? compareResult : -compareResult;
+      });
+      
+      return sortedData;
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetUp = val.setup;
+        
+        this.optionsPosition = val.position;
+        this.optionsData = val.data;
+        this.initData();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsSetUp = this.value.setup;
+    this.optionsPosition = this.value.position;
+    this.optionsData = this.value.data;
+    this.initData();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    // 添加窗口大小变化监听
+    this.checkDeviceType();
+    window.addEventListener('resize', this.handleResize);
+    // 检查分页组件联动配置
+    this.checkPaginationLinkage();
+  },
+  beforeDestroy() {
+    // 移除窗口大小变化监听
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    handleMouseSeen(index, idx){
+      this.hoverIndex = {index, idx}
+    },
+    handleMouseLeave(){
+      this.hoverIndex = {}
+    },
+    handleClick(){
+      if(!!this.optionsSetUp.is_drill_drown){
+        this.$emit('oepnTheDrillView',this.optionsSetUp.drill_drown_setting)
+      }
+    },
+    initData() {
+      this.handlerRollFn();
+      this.handlerHead();
+      this.setOptionsData();
+      this.visConfig();
+    },
+    visConfig() {
+      this.options.vis = this.optionsSetUp.vis;
+    },
+    handlerRollFn() {
+      const options = this.options;
+      const rollSet = this.optionsSetUp;
+      options.autoPlay = rollSet.isRoll;
+      options.effect = rollSet.effect;
+      options.interTime = rollSet.interTime;
+      options.delayTime = rollSet.delayTime;
+      options.scroll = rollSet.scroll;
+      this.options = options;
+      this.hackResetFun();
+    },
+    handlerHead() {
+      const head = this.optionsSetUp.dynamicAddTable;
+      this.header = head;
+    },
+    // 数据解析
+    setOptionsData(e, paramsConfig) {
+      const tableData = this.optionsData;
+      // console.log('表格组件 setOptionsData 被调用', tableData);
+      tableData.dynamicData = tableData.dynamicData || {}; // 兼容 dynamicData undefined
+
+      const myDynamicData = tableData.dynamicData;
+      clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
+      
+      // console.log('表格组件 setOptionsData 被调用', { 
+      //   hasLinkage: this.hasLinkage, 
+      //   receivedData: e,
+      //   paramsConfig: paramsConfig 
+      // });
+      
+      // 优先处理来自分页组件的联动数据
+      if (this.hasLinkage && e && (e.currentPage !== undefined || e.pageSize !== undefined)) {
+        // console.log('表格组件：接收到分页组件的联动数据', e);
+        
+        // 更新分页参数
+        if (e.currentPage !== undefined && e.currentPage !== null) {
+          this.currentPage = e.currentPage;
+        }
+        if (e.pageSize !== undefined && e.pageSize !== null) {
+          this.pageSize = e.pageSize;
+        }
+        
+        // console.log('表格组件：分页参数已更新', {
+        //   currentPage: this.currentPage,
+        //   pageSize: this.pageSize
+        // });
+        
+        // 如果是动态数据，更新 contextData 并重新请求
+        if (tableData.dataType === "dynamicData" && myDynamicData) {
+          // console.log('表格组件：更新 contextData 并重新请求数据');
+          
+          // 将分页参数更新到 contextData 中，这样请求时会带上这些参数
+          if (!myDynamicData.contextData) {
+            myDynamicData.contextData = {};
+          }
+          myDynamicData.contextData.currentPage = this.currentPage;
+          myDynamicData.contextData.pageSize = this.pageSize;
+          
+          // console.log('表格组件：更新后的 contextData', myDynamicData.contextData);
+          
+          // 重新请求数据
+          this.handlerDynamicData(myDynamicData, tableData.refreshTime);
+          return; // 直接返回，不执行后续逻辑
+        }
+        
+        // 如果是静态数据且有 paginatedData，使用分页后的数据
+        if (e.paginatedData && Array.isArray(e.paginatedData)) {
+          // console.log('表格组件：使用分页后的数据');
+          this.list = e.paginatedData;
+          this.hackResetFun();
+          return;
+        }
+        
+        // 如果传递的是完整列表，直接使用（不再进行本地分页）
+        if (e.list && Array.isArray(e.list)) {
+          // console.log('表格组件：使用接口返回的数据（服务端已分页）');
+          this.list = e.list;
+          this.hackResetFun();
+          return;
+        }
+      }
+      
+      // 处理来自数据源的参数映射
+      if (
+        e &&
+        tableData.dataType !== "staticData" &&
+        Object.keys(myDynamicData.contextData).length
+      ) {
+        const keyArr = Object.keys(myDynamicData.contextData);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+
+      tableData.dataType == "staticData"
+        ? this.handlerStaticData(tableData.staticData)
+        : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
+    },
+    handlerStaticData(data) {
+      this.list = data;
+    },
+    handlerDynamicData(data, refreshTime) {
+      if (!data) return;
+      if (this.ispreview) {
+        this.getEchartData(data);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(data);
+        }, refreshTime);
+      } else {
+        this.getEchartData(data);
+      }
+    },
+    getEchartData(val) {
+      // console.log('getEchartData 被调用，参数:', val);
+      
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        // console.log('接口返回数据:', res);
+        
+        let newData = [];
+        
+        // 空值检查
+        if (!res) {
+          console.warn('接口返回数据为空');
+          newData = [];
+        } else if (Array.isArray(res)) {
+          // 如果返回的是数组
+          // console.log(`接口返回数组，长度：${res.length}`);
+          newData = res;
+          
+          // 从数组第一个元素中提取 totalNum 作为总数
+          if (res.length > 0 && res[0] && res[0].totalNum !== undefined) {
+            this.total = res[0].totalNum;
+            // console.log('从数组第 0 个元素提取 totalNum:', this.total);
+          } else {
+            // 如果没有 totalNum 字段，使用数组长度
+            this.total = res.length;
+            // console.log('使用数组长度作为 total:', this.total);
+          }
+        } else if (res.data) {
+          // 如果返回的是对象，包含 data 字段
+          // console.log('接口返回对象格式');
+          newData = res.data;
+          
+          // 从对象中提取 total 或 totalNum
+          this.total = res.total || res.totalNum || res.data.length;
+          // console.log('从对象提取 total:', this.total);
+        } else {
+          console.warn('接口返回未知格式:', res);
+          newData = [];
+          this.total = 0;
+        }
+        
+        // 同时更新 list 和 sourceDataList
+        this.list = newData;
+        this.sourceDataList = JSON.parse(JSON.stringify(newData)); // 深拷贝避免引用问题
+        
+        // console.log('list 已更新:', this.list);
+        // console.log('sourceDataList 已更新:', this.sourceDataList);
+        // console.log('total 最终值:', this.total);
+        
+        this.hackResetFun();
+      }).catch(err => {
+        console.error('接口调用失败:', err);
+        this.$message.error('数据加载失败');
+        this.list = [];
+        this.sourceDataList = [];
+        this.total = 0;
+        this.hackResetFun();
+      });
+    },
+    // vue hack 之强制刷新组件
+    hackResetFun() {
+      this.hackReset = false;
+      this.$nextTick(() => {
+        this.hackReset = true;
+      });
+    },
+    // 计算 奇偶背景色
+    bodyTable(index) {
+      let styleJson = {};
+      if (index % 2) {
+        styleJson["background-color"] = this.optionsSetUp.eventColor;
+      } else {
+        styleJson["background-color"] = this.optionsSetUp.oldColor;
+      }
+      return styleJson;
+    },
+    tableRowHeight() {
+      let styleJson = {};
+      if (this.optionsSetUp.rowHeight) {
+        styleJson["height"] = this.optionsSetUp.rowHeight + "px";
+        //styleJson["line-height"] = this.optionsSetUp.rowHeight + "px";
+      } else {
+        styleJson["height"] = this.options.rowHeight;
+        //styleJson["line-height"] = this.optionsSetUp.rowHeight + "px";
+      }
+      return styleJson;
+    },
+    tableFiledWidth(index) {
+      let styleJson = {};
+      if (this.optionsSetUp.dynamicAddTable[index].width) {
+        styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
+      }
+      return styleJson;
+    },
+    tableReadColor(index, idx){
+      let styleJson = {};
+      if (this.optionsSetUp.is_read_mode && (this.hoverIndex.index === index || this.hoverIndex.idx === idx)) {
+        styleJson["background-color"] = this.optionsSetUp.read_color;console.log(styleJson["background-color"],this.hoverIndex,1231231)
+      }
+      
+      return styleJson;
+    },
+    // 添加的方法 - 设备类型检测
+    checkDeviceType() {
+      this.screenWidth = window.innerWidth;
+      this.isMobile = this.screenWidth <= 576;
+    },
+    
+    // 处理窗口大小变化
+    handleResize() {
+      this.checkDeviceType();
+    },
+    // 处理每页条数变化 - 服务端分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1; // 重置为第一页
+      this.handleQuery();
+      
+    },
+
+    // 处理页码变化 - 服务端分页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.handleQuery();
+    },
+    
+    // 检查分页组件联动配置
+    checkPaginationLinkage() {
+      if (!this.allComponentLinkage || !this.allComponentLinkage.length) return;
+      
+      // console.log('表格组件：开始检查分页联动配置');
+      
+      // 查找是否有分页组件的联动配置（分页作为源组件，表格作为目标组件）
+      this.allComponentLinkage.some(item => {
+        if (item.index !== -1 && item.linkageArr && item.linkageArr.length) {
+          return item.linkageArr.some(obj => {
+            // 查找目标组件是当前表格组件的联动配置
+            if (obj.targetId === this.value.setup.widgetId) {
+              // 查找源组件是否是分页组件
+              const originLinkage = this.allComponentLinkage.find(link => link && link.id === obj.originId);
+              if (originLinkage && originLinkage.widgetCode === 'widget-pagination') {
+                this.hasLinkage = true;
+                this.linkagePagination = {
+                  originId: obj.originId,
+                  targetId: obj.targetId,
+                  paramsConfig: obj.paramsConfig
+                };
+                // console.log('表格组件：检测到与分页组件的联动配置', this.linkagePagination);
+                
+                // 监听分页组件发送的数据
+                const eventName = `bus_${obj.originId}_${obj.targetId}`;
+                this.$nextTick(() => {
+                  // 避免重复绑定
+                  this.$off(eventName);
+                  this.$on(eventName, (data) => {
+                    // console.log('表格组件：通过事件总线接收到分页数据', data);
+                    this.setOptionsData(data, obj.paramsConfig);
+                  });
+                });
+                return true;
+              }
+            }
+            return false;
+          });
+        }
+        return false;
+      });
+      
+      if (!this.hasLinkage) {
+        // console.log('表格组件：未检测到与分页组件的联动配置');
+      }
+    },
+
+    // 打开源数据对话框
+    openSourceDataDialog() {
+      if (!this.list || this.list.length === 0) {
+        this.$message.warning('没有数据可查看');
+        return;
+      }
+      // 重新检查设备类型
+      this.checkDeviceType();
+      // 复制当前列表数据
+      this.sourceDataList = JSON.parse(JSON.stringify(this.list));
+      this.total = this.sourceDataList[0].totalNum; // 设置总数
+      this.currentPage = 1; // 重置页码
+      this.pageSize = 10; // 重置每页条数
+      this.handleQuery()
+      // 显示源数据对话框
+      this.sourceDataDialogVisible = true;
+
+    },
+    
+    // 关闭源数据对话框并重置数据
+    closeSourceDataDialog() {
+      this.sourceDataDialogVisible = false;
+      this.resetTime();
+    },
+    
+    // 打开导出对话框前检查设备类型
+    openExportDialog() {
+      if (!this.list || this.list.length === 0) {
+        this.$message.warning('没有数据可导出');
+        return;
+      }
+      
+      // 重新检查设备类型
+      this.checkDeviceType();
+
+      // 设置默认文件名（表格名称+日期时间）
+      const now = new Date();
+      const dateStr = `${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2,'0')}${now.getDate().toString().padStart(2,'0')}`;
+      const timeStr = `${now.getHours().toString().padStart(2,'0')}${now.getMinutes().toString().padStart(2,'0')}`;
+      
+      // 准备对话框数据
+      this.exportForm.fileName = `表格数据_${dateStr}_${timeStr}`;
+      this.exportForm.format = 'excel'; // 默认选择Excel格式
+      
+      // 显示导出对话框
+      this.exportDialogVisible = true;
+    },
+    
+    // 确认导出方法
+    confirmExport() {
+      // 检查文件名是否为空
+      if (!this.exportForm.fileName || this.exportForm.fileName.trim() === '') {
+        this.$message.warning('请输入文件名');
+        return;
+      }
+      
+      // 设置导出中状态
+      this.exporting = true;
+      
+      // 根据选择的格式执行不同的导出方法
+      try {
+        if (this.exportForm.format === 'excel') {
+          this.doExportExcel();
+        } else {
+          this.doExportCSV();
+          // 只有CSV导出直接在这里显示成功消息和关闭对话框
+          this.$message.success('导出成功');
+          this.exportDialogVisible = false;
+          this.exporting = false;
+        }
+      } catch (error) {
+        console.error('导出失败:', error);
+        this.$message.error('导出失败，请重试');
+        this.exporting = false;
+      }
+    },
+    
+    // 执行 Excel 导出
+    doExportExcel() {
+      // 引入 xlsx 库，使用动态导入以减少初始加载时间
+      import('xlsx').then(XLSX => {
+        // 准备数据：表头和内容
+        const tableHeaders = this.header.map(header => header.name);
+        const tableKeys = this.header.map(header => header.key);
+        
+        // 创建表格数据数组，从列表数据映射
+        const tableData = this.sortedList.map(row => {
+          const rowData = {};
+          tableKeys.forEach((key, index) => {
+            rowData[tableHeaders[index]] = row[key];
+          });
+          return rowData;
+        });
+        
+        // 创建工作簿和工作表
+        const wb = XLSX.utils.book_new();
+        const ws = XLSX.utils.json_to_sheet(tableData, { header: tableHeaders });
+        
+        // 计算列宽 - 动态计算合适的列宽
+        ws['!cols'] = tableHeaders.map((header, index) => {
+          // 尝试计算合适的列宽，考虑标题和内容
+          const headerLength = header ? header.toString().length : 0;
+          
+          // 计算该列数据的最大长度
+          let maxLength = headerLength;
+          tableData.forEach(row => {
+            const cellValue = row[header];
+            const cellLength = cellValue ? cellValue.toString().length : 0;
+            maxLength = Math.max(maxLength, cellLength);
+          });
+          
+          // 为确保列宽适合内容，添加一些额外空间
+          return { wch: Math.min(50, maxLength + 2) }; // 限制最大宽度为50个字符
+        });
+        
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, '数据表');
+        
+        // 导出文件，使用用户指定的文件名
+        XLSX.writeFile(wb, `${this.exportForm.fileName}.xlsx`);
+        
+        // 导出成功
+        this.$message.success('导出成功');
+        this.exportDialogVisible = false;
+        this.exporting = false;
+      }).catch(err => {
+        console.error('导出Excel失败:', err);
+        this.$message.error('导出Excel失败，请重试');
+        this.exporting = false;
+      });
+    },
+    
+    // 执行 CSV 导出
+    doExportCSV() {
+      // 准备表头和数据
+      const tableHeaders = this.header.map(header => header.name);
+      const tableKeys = this.header.map(header => header.key);
+      
+      // 创建 CSV 内容
+      let csvContent = '\uFEFF'; // 添加 BOM 标记以支持中文
+      
+      // 添加表头
+      csvContent += tableHeaders.join(',') + '\r\n';
+      
+      // 添加数据行
+      this.sortedList.forEach(row => {
+        const rowValues = tableKeys.map(key => {
+          const value = row[key] !== undefined && row[key] !== null ? row[key] : '';
+          // 如果值包含逗号、引号或换行符，需要用引号包裹并转义内部引号
+          if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
+            return `"${value.replace(/"/g, '""')}"`;
+          }
+          return value;
+        });
+        csvContent += rowValues.join(',') + '\r\n';
+      });
+      
+      // 创建Blob对象
+      const blob = new Blob([csvContent], {
+        type: 'text/csv;charset=utf-8'
+      });
+      
+      // 创建下载链接，使用用户指定的文件名
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = `${this.exportForm.fileName}.csv`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    // 处理排序
+    handleSort(index) {
+      if (this.sortColumn === index) {
+        // 同一列，切换排序方向
+        if (this.sortOrder === 'asc') {
+          this.sortOrder = 'desc';
+        } else if (this.sortOrder === 'desc') {
+          this.sortOrder = '';
+          this.sortColumn = -1;
+        } else {
+          this.sortOrder = 'asc';
+        }
+      } else {
+        // 不同列，默认升序
+        this.sortColumn = index;
+        this.sortOrder = 'asc';
+      }
+      this.hackResetFun();
+    },
+    // 获取排序图标类名
+    getSortClass(index) {
+      if (this.sortColumn !== index) return '';
+      if (this.sortOrder === 'asc') return 'sort-asc';
+      if (this.sortOrder === 'desc') return 'sort-desc';
+      return '';
+    },
+    
+    // 处理时间查询
+    handleQuery() {
+      // if (!this.times || this.times.length === 0) {
+      //   this.$message.warning('请选择时间范围');
+      //   return;
+      // }
+      const tableData = this.optionsData;
+      const myDynamicData = tableData.dynamicData || {};
+      if (!myDynamicData.contextData) {
+        myDynamicData.contextData = {};
+      }
+      // 将时间范围添加到请求参数中
+      if (this.times && this.times.length === 2) {
+        const startTime = this.formatDate(this.times[0], 'start');
+        const endTime = this.formatDate(this.times[1], 'end');
+        myDynamicData.contextData.startTime = startTime;
+        myDynamicData.contextData.endTime = endTime;
+      }
+      // 将当前分页参数注入到 contextData 中
+      myDynamicData.contextData.currentPage = this.currentPage;
+      myDynamicData.contextData.pageSize = this.pageSize;
+      // 重新请求数据
+      this.handlerDynamicData(myDynamicData, tableData.refreshTime);
+    },
+    
+    // 格式化日期 - 保留到月份
+    formatDate(date, type) {
+      if (!date) return '';
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      
+      if (type === 'start') {
+        return `${year}-${month}`;
+      } else {
+        return `${year}-${month}`;
+      }
+    },
+    
+    // 重置时间到当前月份并调用接口
+    resetTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth(); // 从 0 开始
+      
+      // 设置为当前月份（开始和结束都是当前月）
+      this.times = ['',''];
+      
+      // 重置分页参数
+      this.currentPage = 1;
+      this.pageSize = 10;
+      
+      // console.log('重置分页参数', {
+      //   currentPage: this.currentPage,
+      //   pageSize: this.pageSize
+      // });
+      
+      // 使用 nextTick 确保数据更新后再调用接口
+      this.$nextTick(() => {
+        this.handleQuery();
+      });
+      
+      this.$message.success('已重置为当前月份');
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+/* 本例子css */
+.txtScroll-top {
+  overflow: hidden;
+  position: relative;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.title > div {
+  height: 50px;
+  line-height: 50px;
+  width: 100%;
+}
+
+.sortable-header {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  
+  .sort-icon {
+    display: inline-flex;
+    flex-direction: column;
+    margin-left: 5px;
+    vertical-align: middle;
+    font-size: 12px;
+    opacity: 0.3;
+    
+    i {
+      line-height: 10px;
+      
+      &:first-child {
+        margin-bottom: 2px;
+      }
+    }
+    
+    &.sort-asc i:first-child,
+    &.sort-desc i:last-child {
+      opacity: 1;
+      color: #409EFF;
+    }
+  }
+}
+
+.txtScroll-top .bd {
+  width: 100%;
+}
+
+.txtScroll-top .infoList li {
+  height: 50px;
+  //line-height: 50px;
+  display: flex;
+  flex-direction: row;
+}
+
+.txtScroll-top .infoList li > div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* 添加导出按钮样式 */
+.export-button-container {
+  position: absolute;
+  top: -30px;
+  right: -10px;
+  z-index: 100;
+  // background: red;
+  width: 90px;
+  height: 20px;
+  display: flex;
+  img{
+    width: 20px;
+    height: 20px;
+  }
+  // .export-button {
+  //   transition: all 0.3s ease;
+  //   cursor: pointer;
+  //   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    
+  //   &:hover {
+  //     transform: scale(1.05);
+  //     background-color: rgba(39, 174, 96, 1) !important;
+  //     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  //   }
+    
+  //   i {
+  //     margin-right: 5px;
+  //   }
+    
+  //   .button-text {
+  //     font-size: 14px;
+  //     font-weight: 500;
+  //   }
+  // }
+  .export-buttonS{
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    font-size: 20px;
+    text-align: center;
+    cursor: pointer;
+    color: #fff;
+    margin-bottom: 10px;
+  }
+  .icon{
+    width: 18px;
+    height: 18px;
+  }
+}
+
+/* 添加导出信息样式 */
+.export-info {
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  padding: 10px 15px;
+  margin-top: 5px;
+  
+  p {
+    margin: 5px 0;
+    font-size: 13px;
+    color: #606266;
+    display: flex;
+    align-items: center;
+    
+    i {
+      margin-right: 5px;
+      color: #409EFF;
+    }
+  }
+}
+
+/* 确保对话框在大屏中显示正常 */
+::v-deep .el-dialog {
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  z-index: 9999 !important;
+  
+  .el-dialog__header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+  
+  .el-dialog__body {
+    padding: 20px;
+  }
+  
+  .el-dialog__footer {
+    padding: 10px 20px 15px;
+    border-top: 1px solid #e4e7ed;
+  }
+  
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+}
+
+/* 为移动设备添加特定样式 */
+::v-deep .export-dialog {
+  @media screen and (max-width: 576px) {
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    
+    .el-dialog {
+      width: 100% !important;
+      margin: 0 !important;
+      max-width: 100%;
+      border-radius: 0;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      
+      .el-dialog__body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 15px;
+      }
+      
+      .el-form-item__label {
+        width: 80px !important;
+      }
+      
+      .el-radio-group {
+        display: flex;
+        flex-direction: column;
+        
+        .el-radio {
+          margin-left: 0;
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 768px) {
+    .el-form-item__label {
+      width: 80px !important;
+    }
+    
+    .el-form {
+      .el-radio-group {
+        flex-wrap: wrap;
+      }
+    }
+  }
+}
+
+::v-deep .v-modal {
+  z-index: 9998 !important;
+}
+
+/* 源数据对话框样式 */
+.source-data-content {
+  max-height: 500px;
+  overflow-y: auto;
+  .timestamp{
+    width: 100%;
+    height: 50px;
+    ::v-deep .el-date-editor{
+      width: 300px;
+      margin-right: 60px;
+      .el-range-separator{
+        width: 30px;
+      }
+    }
+  }
+  .data-info {
+    margin-top: 15px;
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    
+    p {
+      margin: 0;
+      font-size: 13px;
+      color: #606266;
+      display: flex;
+      align-items: center;
+      
+      i {
+        margin-right: 5px;
+        color: #409EFF;
+      }
+    }
+  }
+  
+  .pagination-container {
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    
+    .pagination {
+      padding: 10px 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy.vue
new file mode 100644
index 0000000..7b323dd
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetTable copy.vue	
@@ -0,0 +1,713 @@
+<template>
+  <div :style="styleObj">
+    <superslide v-if="hackReset" :options="options" class="txtScroll-top" ref="superslide">
+      <!--表头-->
+      <div class="title">
+        <div 
+         v-if="isIndex"
+         :style="[headerTableStyle,{width:'50px',flexShrink: 0}, tableRowHeight()]">
+          序号
+        </div>
+        <div v-for="(item, index) in header" :key="index"
+             :style="[headerTableStyle, tableFiledWidth(index), tableRowHeight()]">
+          {{ item.name }}
+        </div>
+      </div>
+      <!--数据-->
+      <div class="bd"  @click="handleClick">
+        <ul class="infoList">
+          <li v-for="(item, index) in list" :key="index"  :style="tableRowHeight()">
+            <div 
+                @mouseenter="handleMouseSeen(index, -1)" @mouseleave="handleMouseLeave"
+                 v-if="isIndex"
+                 :style="[
+                bodyTableStyle,
+                tableReadColor(index, -1),{width:'50px',flexShrink: 0},
+                bodyTable(index),
+                tableRowHeight()
+              ]"
+            >
+              {{ index + 1 }}
+            </div>
+            <div @mouseenter="handleMouseSeen(index, idx)" @mouseleave="handleMouseLeave" v-for="(itemChild, idx) in header"
+                 :key="idx"
+                 :style="[
+                bodyTableStyle,
+                bodyTable(index),
+                tableFiledWidth(idx),
+                tableReadColor(index, idx),
+                tableRowHeight()
+              ]"
+            >
+              {{ item[itemChild.key] }}
+            </div>
+
+          </li>
+        </ul>
+      </div>
+    </superslide>
+
+    <!-- 添加导出按钮，仅在预览模式显示 -->
+    <div v-if="ispreview && optionsSetUp.showExportButton" class="export-button-container" :style="exportButtonContainerStyle">
+      <div class="export-button" :style="exportButtonStyle" @click="openExportDialog">
+        <span class="button-text">导出1</span>
+      </div>
+    </div>
+    
+    <!-- 导出对话框 -->
+    <el-dialog
+      title="导出表格数据"
+      :visible.sync="exportDialogVisible"
+      :width="dialogWidth"
+      :fullscreen="isMobile"
+      :close-on-click-modal="false"
+      center
+      :modal-append-to-body="true"
+      append-to-body
+      :z-index="9999"
+      class="export-dialog">
+      <el-form :model="exportForm" label-width="100px" size="small">
+        <el-form-item label="文件名称">
+          <el-input v-model="exportForm.fileName" placeholder="请输入文件名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="导出格式">
+          <el-radio-group v-model="exportForm.format">
+            <el-radio label="excel">Excel格式(.xlsx)</el-radio>
+            <el-radio label="csv">CSV格式(.csv)</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <div class="export-info">
+            <p><i class="el-icon-info"></i> 表格名称：数据表</p>
+            <p><i class="el-icon-tickets"></i> 数据总量：{{list.length}}行 {{header.length}}列</p>
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="exportDialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="confirmExport" :loading="exporting">确定导出</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import vue from "vue";
+import VueSuperSlide from "vue-superslide";
+import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
+
+vue.use(VueSuperSlide);
+export default {
+  name: 'widgetTable',
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      hackReset: true,
+      options: {
+        titCell: ".hd ul",
+        mainCell: ".bd ul",
+        effect: "topLoop",
+        autoPage: true,
+        autoPlay: true,
+        vis: 5,
+        rowHeight: "50px"
+      },
+      header: [],
+      list: [],
+      hoverIndex: {},
+      optionsSetUp: {},
+      optionsPosition: {},
+      optionsData: {},
+      flagInter: null,
+      isIndex: false,
+      // 新增导出对话框相关数据
+      exportDialogVisible: false,
+      exporting: false,
+      exportForm: {
+        fileName: '',
+        format: 'excel'
+      },
+      // 添加设备检测变量
+      isMobile: false,
+      screenWidth: window.innerWidth
+    };
+  },
+  computed: {
+    styleObj() {
+      const allStyle = this.optionsPosition;
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: allStyle.width + "px",
+        height: allStyle.height + "px",
+        left: allStyle.left + "px",
+        top: allStyle.top + "px",
+        background: this.optionsSetUp.tableBgColor
+      };
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+    headerTableStyle() {
+      const headStyle = this.optionsSetUp;
+      this.isIndex=headStyle.isIndex
+      return {
+        "text-align": headStyle.textAlignHeader,
+        "font-size": headStyle.fontSizeHeader + "px",
+        "font-weight": headStyle.headTextFontWeight,
+        "font-style": headStyle.headTextFontStyle,
+        "font-family": headStyle.headTextFontFamily,
+        "border-style": headStyle.isLine ? "solid" : "none",
+        "border-width": headStyle.borderWidth + "px",
+        "border-color": headStyle.borderColor,
+        "line-height": headStyle.rowHeight + 'px',
+        display: headStyle.isHeader ? "block" : "none",
+        color: headStyle.headColor,
+        "background-color": headStyle.headBackColor
+      };
+    },
+    bodyTableStyle() {
+      const bodyStyle = this.optionsSetUp;
+      return {
+        "text-align": bodyStyle.textAlignBody,
+        "font-size": bodyStyle.fontSizeBody + "px",
+        "font-weight": bodyStyle.bodyTextFontWeight,
+        "font-style": bodyStyle.bodyTextFontStyle,
+        "font-family": bodyStyle.bodyTextFontFamily,
+        "border-style": bodyStyle.isLine ? "solid" : "none",
+        "border-width": bodyStyle.borderWidth + "px",
+        "border-color": bodyStyle.borderColor,
+        "color": bodyStyle.bodyColor,
+      };
+    },
+    // 新增样式计算属性
+    exportButtonStyle() {
+      // 根据表头字体大小动态计算按钮大小
+      const headerFontSize = parseInt(this.optionsSetUp.fontSizeHeader || 16);
+      
+      // 计算图标尺寸，基于表头字体大小
+      const iconSize = Math.max(14, Math.min(24, headerFontSize * 1.1));
+      
+      // 计算按钮高度，略大于图标尺寸
+      const buttonHeight = Math.round(iconSize * 1.8);
+      
+      return {
+        height: `${buttonHeight}px`,
+        padding: '0 12px',
+        fontSize: `${iconSize}px`,
+        backgroundColor: 'rgba(39, 174, 96, 0.9)',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+        color: '#ffffff'
+      };
+    },
+    exportButtonContainerStyle() {
+      // 计算按钮容器的位置，使其恰好超出表头几个像素
+      const headerHeight = this.optionsSetUp.rowHeight || 50;
+      // 按钮高度
+      const buttonHeight = parseInt(this.exportButtonStyle.height);
+      // 设置按钮位置
+      return {
+        position: 'absolute',
+        top: `-${buttonHeight + 5}px`, // 按钮高度 + 5px的间距
+        right: '10px',
+        zIndex: '100'
+      };
+    },
+    // 添加对话框宽度计算属性
+    dialogWidth() {
+      if (this.isMobile) {
+        return '100%';
+      } else if (this.screenWidth < 768) {
+        return '90%';
+      } else if (this.screenWidth < 992) {
+        return '80%';
+      } else if (this.screenWidth < 1200) {
+        return '60%';
+      } else {
+        return '420px';
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetUp = val.setup;
+        
+        this.optionsPosition = val.position;
+        this.optionsData = val.data;
+        this.initData();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsSetUp = this.value.setup;
+    this.optionsPosition = this.value.position;
+    this.optionsData = this.value.data;
+    this.initData();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    // 添加窗口大小变化监听
+    this.checkDeviceType();
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    // 移除窗口大小变化监听
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    handleMouseSeen(index, idx){
+      this.hoverIndex = {index, idx}
+    },
+    handleMouseLeave(){
+      this.hoverIndex = {}
+    },
+    handleClick(){
+      if(!!this.optionsSetUp.is_drill_drown){
+        this.$emit('oepnTheDrillView',this.optionsSetUp.drill_drown_setting)
+      }
+    },
+    initData() {
+      this.handlerRollFn();
+      this.handlerHead();
+      this.setOptionsData();
+      this.visConfig();
+    },
+    visConfig() {
+      this.options.vis = this.optionsSetUp.vis;
+    },
+    handlerRollFn() {
+      const options = this.options;
+      const rollSet = this.optionsSetUp;
+      options.autoPlay = rollSet.isRoll;
+      options.effect = rollSet.effect;
+      options.interTime = rollSet.interTime;
+      options.delayTime = rollSet.delayTime;
+      options.scroll = rollSet.scroll;
+      this.options = options;
+      this.hackResetFun();
+    },
+    handlerHead() {
+      const head = this.optionsSetUp.dynamicAddTable;
+      this.header = head;
+    },
+    setOptionsData(e, paramsConfig) {
+      const tableData = this.optionsData;
+      tableData.dynamicData = tableData.dynamicData || {}; // 兼容 dynamicData undefined
+
+      const myDynamicData = tableData.dynamicData;
+      clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
+      if (
+        e &&
+        tableData.dataType !== "staticData" &&
+        Object.keys(myDynamicData.contextData).length
+      ) {
+        const keyArr = Object.keys(myDynamicData.contextData);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+
+      tableData.dataType == "staticData"
+        ? this.handlerStaticData(tableData.staticData)
+        : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
+    },
+    handlerStaticData(data) {
+      this.list = data;
+    },
+    handlerDynamicData(data, refreshTime) {
+      if (!data) return;
+      if (this.ispreview) {
+        this.getEchartData(data);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(data);
+        }, refreshTime);
+      } else {
+        this.getEchartData(data);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.list = res;
+        this.hackResetFun();
+      });
+    },
+    // vue hack 之强制刷新组件
+    hackResetFun() {
+      this.hackReset = false;
+      this.$nextTick(() => {
+        this.hackReset = true;
+      });
+    },
+    // 计算 奇偶背景色
+    bodyTable(index) {
+      let styleJson = {};
+      if (index % 2) {
+        styleJson["background-color"] = this.optionsSetUp.eventColor;
+      } else {
+        styleJson["background-color"] = this.optionsSetUp.oldColor;
+      }
+      return styleJson;
+    },
+    tableRowHeight() {
+      let styleJson = {};
+      if (this.optionsSetUp.rowHeight) {
+        styleJson["height"] = this.optionsSetUp.rowHeight + "px";
+        //styleJson["line-height"] = this.optionsSetUp.rowHeight + "px";
+      } else {
+        styleJson["height"] = this.options.rowHeight;
+        //styleJson["line-height"] = this.optionsSetUp.rowHeight + "px";
+      }
+      return styleJson;
+    },
+    tableFiledWidth(index) {
+      let styleJson = {};
+      if (this.optionsSetUp.dynamicAddTable[index].width) {
+        styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
+      }
+      return styleJson;
+    },
+    tableReadColor(index, idx){
+      let styleJson = {};
+      if (this.optionsSetUp.is_read_mode && (this.hoverIndex.index === index || this.hoverIndex.idx === idx)) {
+        styleJson["background-color"] = this.optionsSetUp.read_color;console.log(styleJson["background-color"],this.hoverIndex,1231231)
+      }
+      
+      return styleJson;
+    },
+    // 添加的方法 - 设备类型检测
+    checkDeviceType() {
+      this.screenWidth = window.innerWidth;
+      this.isMobile = this.screenWidth <= 576;
+    },
+    
+    // 处理窗口大小变化
+    handleResize() {
+      this.checkDeviceType();
+    },
+    
+    // 打开导出对话框前检查设备类型
+    openExportDialog() {
+      if (!this.list || this.list.length === 0) {
+        this.$message.warning('没有数据可导出');
+        return;
+      }
+      
+      // 重新检查设备类型
+      this.checkDeviceType();
+
+      // 设置默认文件名（表格名称+日期时间）
+      const now = new Date();
+      const dateStr = `${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2,'0')}${now.getDate().toString().padStart(2,'0')}`;
+      const timeStr = `${now.getHours().toString().padStart(2,'0')}${now.getMinutes().toString().padStart(2,'0')}`;
+      
+      // 准备对话框数据
+      this.exportForm.fileName = `表格数据_${dateStr}_${timeStr}`;
+      this.exportForm.format = 'excel'; // 默认选择Excel格式
+      
+      // 显示导出对话框
+      this.exportDialogVisible = true;
+    },
+    
+    // 确认导出方法
+    confirmExport() {
+      // 检查文件名是否为空
+      if (!this.exportForm.fileName || this.exportForm.fileName.trim() === '') {
+        this.$message.warning('请输入文件名');
+        return;
+      }
+      
+      // 设置导出中状态
+      this.exporting = true;
+      
+      // 根据选择的格式执行不同的导出方法
+      try {
+        if (this.exportForm.format === 'excel') {
+          this.doExportExcel();
+        } else {
+          this.doExportCSV();
+          // 只有CSV导出直接在这里显示成功消息和关闭对话框
+          this.$message.success('导出成功');
+          this.exportDialogVisible = false;
+          this.exporting = false;
+        }
+      } catch (error) {
+        console.error('导出失败:', error);
+        this.$message.error('导出失败，请重试');
+        this.exporting = false;
+      }
+    },
+    
+    // 执行Excel导出
+    doExportExcel() {
+      // 引入xlsx库，使用动态导入以减少初始加载时间
+      import('xlsx').then(XLSX => {
+        // 准备数据：表头和内容
+        const tableHeaders = this.header.map(header => header.name);
+        const tableKeys = this.header.map(header => header.key);
+        
+        // 创建表格数据数组，从列表数据映射
+        const tableData = this.list.map(row => {
+          const rowData = {};
+          tableKeys.forEach((key, index) => {
+            rowData[tableHeaders[index]] = row[key];
+          });
+          return rowData;
+        });
+        
+        // 创建工作簿和工作表
+        const wb = XLSX.utils.book_new();
+        const ws = XLSX.utils.json_to_sheet(tableData, { header: tableHeaders });
+        
+        // 计算列宽 - 动态计算合适的列宽
+        ws['!cols'] = tableHeaders.map((header, index) => {
+          // 尝试计算合适的列宽，考虑标题和内容
+          const headerLength = header ? header.toString().length : 0;
+          
+          // 计算该列数据的最大长度
+          let maxLength = headerLength;
+          tableData.forEach(row => {
+            const cellValue = row[header];
+            const cellLength = cellValue ? cellValue.toString().length : 0;
+            maxLength = Math.max(maxLength, cellLength);
+          });
+          
+          // 为确保列宽适合内容，添加一些额外空间
+          return { wch: Math.min(50, maxLength + 2) }; // 限制最大宽度为50个字符
+        });
+        
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, '数据表');
+        
+        // 导出文件，使用用户指定的文件名
+        XLSX.writeFile(wb, `${this.exportForm.fileName}.xlsx`);
+        
+        // 导出成功
+        this.$message.success('导出成功');
+        this.exportDialogVisible = false;
+        this.exporting = false;
+      }).catch(err => {
+        console.error('导出Excel失败:', err);
+        this.$message.error('导出Excel失败，请重试');
+        this.exporting = false;
+      });
+    },
+    
+    // 执行CSV导出
+    doExportCSV() {
+      // 准备表头和数据
+      const tableHeaders = this.header.map(header => header.name);
+      const tableKeys = this.header.map(header => header.key);
+      
+      // 创建CSV内容
+      let csvContent = '\uFEFF'; // 添加BOM标记以支持中文
+      
+      // 添加表头
+      csvContent += tableHeaders.join(',') + '\r\n';
+      
+      // 添加数据行
+      this.list.forEach(row => {
+        const rowValues = tableKeys.map(key => {
+          const value = row[key] !== undefined && row[key] !== null ? row[key] : '';
+          // 如果值包含逗号、引号或换行符，需要用引号包裹并转义内部引号
+          if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
+            return `"${value.replace(/"/g, '""')}"`;
+          }
+          return value;
+        });
+        csvContent += rowValues.join(',') + '\r\n';
+      });
+      
+      // 创建Blob对象
+      const blob = new Blob([csvContent], {
+        type: 'text/csv;charset=utf-8'
+      });
+      
+      // 创建下载链接，使用用户指定的文件名
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = `${this.exportForm.fileName}.csv`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+/* 本例子css */
+.txtScroll-top {
+  overflow: hidden;
+  position: relative;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.title > div {
+  height: 50px;
+  line-height: 50px;
+  width: 100%;
+}
+
+.txtScroll-top .bd {
+  width: 100%;
+}
+
+.txtScroll-top .infoList li {
+  height: 50px;
+  //line-height: 50px;
+  display: flex;
+  flex-direction: row;
+}
+
+.txtScroll-top .infoList li > div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* 添加导出按钮样式 */
+.export-button-container {
+  position: absolute;
+  right: 0px;
+  z-index: 100;
+
+  .export-button {
+    transition: all 0.3s ease;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    
+    &:hover {
+      transform: scale(1.05);
+      background-color: rgba(39, 174, 96, 1) !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+    
+    i {
+      margin-right: 5px;
+    }
+    
+    .button-text {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+}
+
+/* 添加导出信息样式 */
+.export-info {
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  padding: 10px 15px;
+  margin-top: 5px;
+  
+  p {
+    margin: 5px 0;
+    font-size: 13px;
+    color: #606266;
+    display: flex;
+    align-items: center;
+    
+    i {
+      margin-right: 5px;
+      color: #409EFF;
+    }
+  }
+}
+
+/* 确保对话框在大屏中显示正常 */
+::v-deep .el-dialog {
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  z-index: 9999 !important;
+  
+  .el-dialog__header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+  
+  .el-dialog__body {
+    padding: 20px;
+  }
+  
+  .el-dialog__footer {
+    padding: 10px 20px 15px;
+    border-top: 1px solid #e4e7ed;
+  }
+  
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+}
+
+/* 为移动设备添加特定样式 */
+::v-deep .export-dialog {
+  @media screen and (max-width: 576px) {
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    
+    .el-dialog {
+      width: 100% !important;
+      margin: 0 !important;
+      max-width: 100%;
+      border-radius: 0;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      
+      .el-dialog__body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 15px;
+      }
+      
+      .el-form-item__label {
+        width: 80px !important;
+      }
+      
+      .el-radio-group {
+        display: flex;
+        flex-direction: column;
+        
+        .el-radio {
+          margin-left: 0;
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 768px) {
+    .el-form-item__label {
+      width: 80px !important;
+    }
+    
+    .el-form {
+      .el-radio-group {
+        flex-wrap: wrap;
+      }
+    }
+  }
+}
+
+::v-deep .v-modal {
+  z-index: 9998 !important;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue
index e00f713..c4500d2 100644
--- a/src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue
@@ -1,42 +1,42 @@
+
 <template>
   <div :style="styleObj">
     <superslide v-if="hackReset" :options="options" class="txtScroll-top" ref="superslide">
       <!--表头-->
       <div class="title">
-        <div 
-         v-if="isIndex"
-         :style="[headerTableStyle,{width:'50px',flexShrink: 0}, tableRowHeight()]">
+        <div v-if="isIndex" :style="[headerTableStyle,{width:'50px',flexShrink: 0}, tableRowHeight()]">
           序号
         </div>
-        <div v-for="(item, index) in header" :key="index"
-             :style="[headerTableStyle, tableFiledWidth(index), tableRowHeight()]">
+        <div v-for="(item, index) in header" :key="index" :style="[headerTableStyle, tableFiledWidth(index), tableRowHeight()]" @click="handleSort(index)" class="sortable-header">
           {{ item.name }}
+          <span class="sort-icon" :class="getSortClass(index)">
+            <i class="el-icon-arrow-up"></i>
+            <i class="el-icon-arrow-down"></i>
+          </span>
         </div>
       </div>
       <!--数据-->
       <div class="bd"  @click="handleClick">
         <ul class="infoList">
-          <li v-for="(item, index) in list" :key="index"  :style="tableRowHeight()">
-            <div 
-                @mouseenter="handleMouseSeen(index, -1)" @mouseleave="handleMouseLeave"
-                 v-if="isIndex"
-                 :style="[
+          <li v-for="(item, index) in displayList" :key="index"  :style="tableRowHeight()">
+            <div @mouseenter="handleMouseSeen(index, -1)" @mouseleave="handleMouseLeave"
+                v-if="isIndex" :style="[
                 bodyTableStyle,
-                tableReadColor(index, -1),{width:'50px',flexShrink: 0},
+                tableReadColor(index, -1),
+                {width:'50px',flexShrink: 0},
                 bodyTable(index),
-                tableRowHeight()
-              ]"
+                tableRowHeight()]"
             >
-              {{ index + 1 }}
+              {{ getSerialNumber(index) }}
             </div>
             <div @mouseenter="handleMouseSeen(index, idx)" @mouseleave="handleMouseLeave" v-for="(itemChild, idx) in header"
-                 :key="idx"
-                 :style="[
-                bodyTableStyle,
-                bodyTable(index),
-                tableFiledWidth(idx),
-                tableReadColor(index, idx),
-                tableRowHeight()
+                :key="idx"
+                :style="[
+                    bodyTableStyle,
+                    bodyTable(index),
+                    tableFiledWidth(idx),
+                    tableReadColor(index, idx),
+                    tableRowHeight()
               ]"
             >
               {{ item[itemChild.key] }}
@@ -47,13 +47,44 @@
       </div>
     </superslide>
 
+    <!-- 分页组件 -->
+    <div v-if="showPagination" class="pagination-container" :style="paginationContainerStyle">
+      <el-pagination
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="pageSizes"
+        :total="total"
+        :layout="paginationLayout"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        class="pagination"
+        :background="paginationBackground"
+        :popper-class="paginationPopperClass">
+      </el-pagination>
+    </div>
+
     <!-- 添加导出按钮，仅在预览模式显示 -->
     <div v-if="ispreview && optionsSetUp.showExportButton" class="export-button-container" :style="exportButtonContainerStyle">
-      <div class="export-button" :style="exportButtonStyle" @click="openExportDialog">
-        <span class="button-text">导出</span>
+      <!-- <div class="export-button" :style="exportButtonStyle" @click="openExportDialog">
+        <span class="button-text">导出1</span>
+      </div> -->
+      <div class="export-buttonS" @click="openSourceDataDialog">
+        <el-tooltip class="item" effect="dark" content="放大" placement="top">
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAALpSURBVHic5ZtBTttAFIa/Fw9s6yPkCHAD2LeKskMIRLhBOQHhBJQTBERVsbMQ3dMblCNwA7JunLwuSCAKSezYM/aM+ZeEPOf7GMbOmxk5flDFQW6/ibioazutuj9A3TF1f4A8OUx0p2UYCOyULDXUCVdmwo/rrgwJQcBBou3I8AjEFsrF0uJ8LHwBzlgmwLf/3W1DR+3Av0fozQR81jngTaj3Av6l3Lus772Au64864QLV/W9nwQBfnakD/TX/U4v0XhseNm0tvcjIG/GW1wWeV8jBBz/1gFKr8h7gxdQBp7QBZSFJ2QBWfAKT+OU3aw6QQrIA29S9n915SmrVnAC8sLPvuxkJSgBtuEJSYALeEIR4AqeEAS4hMd3AZbg14rxVoCtv7zCh1vh/M+Mbx0gLA/7NOV0y/B3rgkynHWDABoNP8tBou1tQ4dpg+WuK8+z17wS4HrCWxZvBNQBjy8C6oLHh7vA0b3264LHBwEinKx6zTU8PghQWf6gUgU8Pghg8rHvXxU8vkyCR/faF+EEIdYJV9M2eCWpTEAv0XgccY7QQxmqclMl6KpUIqCXaJwaHheXt3XCRd0SnM8Bq+CnV++4vn5WnApYCw+IWl72LhBnArLgAVS5cXX9vHEyB+SBR7i+/SqnLq6/SawLCAke2wJCg2dRwLrGQVZChGdewNGD7gkk862jUcpuHgmhwrOwQ+RyYStabAwDYH9dgdDgF3fGvt0GlwFkbUwMDX5Zsp4DVj6oNAGeog9CTYGniIAmwbOpgKbBs4mAJsKTV0BT4ckj4DDRnabCk2erbPS6sLg6AcNTuh8QODylBDQAnsICGgJPUQHR6H2DQegpdF5gbHg5flh53HDI6zbVszw7NeuOi6ZoDOxFEclBom0H9a3GXVtcaG9F7DmrbynzAqwvREoLJ8dybeZ9DlCuEb5brD1sjeyd+HJ1xvltBERjLqans0qPBIU/o5TdKpa3y8aL5fE8cT4CPmv+A1ULm7uy31GJAAAAAElFTkSuQmCC" alt="">
+        </el-tooltip>
+      </div>
+      <div class="export-buttonS" @click="openSourceDataDialog">
+        <el-tooltip class="item" effect="dark" content="源数据" placement="top">
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA/CAYAAACxdtubAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAALuSURBVGiB7ZvBcdpAFEDfl1GucQdWB8EVhNxtY24cYEIqcFwBpgKbCoIDnvGNsSkAOgipIEoHvovo5xCc8UyksBISWsm8I/or/kO7y19pJaxpT9Vza1wreAJ1yozi47AIAgb3LfEBBKD7qD2Ea+Cw6Bwz5gnlcnwmI1lfyW8VlHzmKVhx7Lgu/QpLAhy6Ln2HkEbRmeSNKvUaghd5VBip8sCKp51nlgLH5UiVHvx74QTqtZh2i/GJfMo/vcy57c50HiXrREWLMNpJWjmgMIz6PFI0DPiZe0Z5ETPUIkWrSNwYjaUz03PCYisn54AfX0/kNkkbY9HeVA9XNeYC9aL7gSp0Zvp5cirHpm2MUw5dmjbVwAL1zkzPTeONRTX8UxfbhCO8NY41DQx+sUDxU2eVNYrvBDyYhhuP0fuW+O2pfnBd+qox1dSOEGEZrBiOW2JctSWadddruzJWTEXPn7tjL1o1Xo1oosmo+6g9oB+7ht0Vih/C8O5MbkybGF/RzkwbCF8KlwQQPEe4bk/VOBdjUQfepU4sJ964vDeNNa91V3xPnVFOhGq+bjYWnbRkoSGD1FlljIYMJqeyMI1PNBlNmnLVm+rNquBVTA2WowTlH2kW3usvMP4lbeHV/I/uRavGXrRq7EWrxl60auxFq0biWjdP2lP1XJeLrfZUxNxztka0M9OGwBzN5/zWdF0RPuZ5fmtEc33MofjWiOZJCENrxmgUCksRlhuCvKhdKH8PhwzumnJjtSghD+OmXMUdbk/Vcw+Yxz251ZDBZN2+tF33hWTk2H4pSVlFk0pSRtE0kpRNNK0kZRLdRpKyiG4rSRlEs5DEpqI+CjngyJXtJbFdFKVnUgyYEN11a3bvsU8qSezGZLjILKuMSSPJf7puozvTuQijHW5S3tiL0koC1BSWMbs2G6o0xJJRvI0kgLNxGWQB20oCOEHAAOx95SMLSQDnviU+yqWNsllJ8vwSHi9uNarSEPAKfY0rxYapTfwGBcAag16PecMAAAAASUVORK5CYII=" alt="">
+        </el-tooltip>
+      </div>
+      <div class="export-buttonS" @click="openExportDialog">
+        <el-tooltip class="item" effect="dark" content="导出" placement="top">
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA+CAYAAAB6Kgg+AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIzSURBVGiB7drPcdNAFMfx75OlnNUBpoN0gBsgwbcMEw9KBbRgV2CoIGZIZnJTMAWQDkgHSQmckeXHxZBEkv9Ju2uN2N9xtfbuZ3TQW+kJDnP+TccifABYwufrE/nkam1xtdD5dx0I/Hg+li14fTOURxfrBy4WAQiEV8Wxo4g3ztZ3tdCh46Fdi4d2LR7atXho1+KhXYuHdi0e2rV4aNcSrrvwPtXjI3icDeWX2y3VS5Jq/Bv66/ZcuqNnqfZHc33ohfzMQx5Gc02c7bZmRnNN8pB/ez5LtV+cU4JGIVOEvxNjhMs2Y0dzTRAugXg1FEch0+K8ElSffvCUlmKfIbemBBXlS+XMlmE3IZWyoQT9eiIzXTKp/PeWYDcil0yu3sptcbzy8XJ1KuO2YrciT2VcdW3tc7SN2LpIthUMbcI2QbJLZdQGbFMku5aAh8SaQLJPrXsIrCkk+xb1LrEmkdQ5vbjAmkZS95hmE2sDSZPzqA2sLSRND94msTaRmHjDYAJrG4nJZo2NRyblQgJUldmLxYVEl4htJKa7UracD2+Bd4WxO2BQNdkkEhvtN/schtfFNBJbfUZNsDaQ2GyoqoO1hcR259g+WJtIXLTI7YK1jcRVL6CL5+S2OGt6rMK6QuISyuozRy/iI0CWMXHV2enj4+Pj4+Pjs1MkSTXOI6aqlL77dyEi3PcyJmEekqIMnNaCLqMM8og4AI4PvRfrUZJA4X8orO+CxYLh6m1cJ6Nwny24+AOVjmNs19e91wAAAABJRU5ErkJggg==" alt="">
+        </el-tooltip>
       </div>
     </div>
-    
+
     <!-- 导出对话框 -->
     <el-dialog
       title="导出表格数据"
@@ -77,10 +108,10 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item>
-          <div class="export-info">
+          <!-- <div class="export-info">
             <p><i class="el-icon-info"></i> 表格名称：数据表</p>
             <p><i class="el-icon-tickets"></i> 数据总量：{{list.length}}行 {{header.length}}列</p>
-          </div>
+          </div> -->
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -88,12 +119,91 @@
         <el-button size="small" type="primary" @click="confirmExport" :loading="exporting">确定导出</el-button>
       </span>
     </el-dialog>
+
+    <!-- 源数据对话框 -->
+    <el-dialog
+      title="源数据查看"
+      :visible.sync="sourceDataDialogVisible"
+      width="60%"
+      :fullscreen="isMobile"
+      :close-on-click-modal="false"
+      center
+      :modal-append-to-body="true"
+      append-to-body
+      :z-index="9999"
+      :before-close="closeSourceDataDialog"
+      class="source-data-dialog">
+      <div class="source-data-content">
+        <div class="timestamp">
+          <span>起始年月：</span>
+          <!-- <el-date-picker
+            v-model="times"
+            type="monthrange"
+            range-separator="至"
+            start-placeholder="开始月份"
+            end-placeholder="结束月份" size="mini">
+          </el-date-picker> -->
+          <el-date-picker
+            v-model="times[0]"
+            type="month"
+            placeholder="开始月份">
+          </el-date-picker>
+          <span class="spana"> - </span>
+          <el-date-picker
+            v-model="times[1]"
+            type="month"
+            placeholder="结束月份">
+          </el-date-picker>
+          <el-button type="primary" @click="handleQuery" class="buttonS">查询</el-button>
+          <el-button @click="resetTime">重置</el-button>
+        </div>
+        <el-table
+          :data="sourceDataList"
+          border
+          style="width: 100%"
+          max-height="500"
+          size="small">
+          <el-table-column
+            v-for="(item, index) in header"
+            :key="index"
+            :prop="item.key"
+            :label="item.name"
+            show-overflow-tooltip>
+          </el-table-column>
+        </el-table>
+        <!-- <div class="data-info">
+          <p><i class="el-icon-tickets"></i> 数据总量：{{sourceDataList.length}}行 {{header.length}}列</p>
+        </div> -->
+        <!-- 分页组件 -->
+        <div class="pagination-container">
+          <el-pagination
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-sizes="pageSizes"
+            :total="total"
+            
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            class="pagination"
+            :background="paginationBackground"
+            :popper-class="paginationPopperClass">
+          </el-pagination>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="closeSourceDataDialog">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
 import vue from "vue";
 import VueSuperSlide from "vue-superslide";
-import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
+import {
+  targetWidgetLinkageLogic,
+  registerWidgetInstance,
+  unregisterWidgetInstance,
+} from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 vue.use(VueSuperSlide);
 export default {
@@ -132,10 +242,100 @@ export default {
       },
       // 添加设备检测变量
       isMobile: false,
-      screenWidth: window.innerWidth
+      screenWidth: window.innerWidth,
+      sourceDataDialogVisible: false,
+      sourceDataList: [],
+      // 分页相关数据
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      // 排序相关数据
+      sortColumn: -1,
+      sortOrder: '', // 'asc' 升序，'desc' 降序，'' 无排序
+      // 联动相关数据
+      hasLinkage: false,
+      linkagePagination: null,
+      times:['',''],
+
     };
   },
   computed: {
+    // 从配置中读取分页显示开关
+    showPagination() {
+      return this.optionsSetUp.showPagination === true || this.optionsSetUp.showPagination === 'true';
+    },
+    // 从配置中读取是否显示总条数
+    showTotal() {
+      return this.optionsSetUp.showTotal !== false;
+    },
+    // 从配置中读取每页条数选项
+    pageSizes() {
+      const sizes = this.optionsSetUp.pageSizes;
+      if (Array.isArray(sizes) && sizes.length > 0) {
+        return sizes;
+      }
+      return [10, 20, 50, 100];
+    },
+    // 从配置中读取分页布局
+    paginationLayout() {
+      const layout = this.optionsSetUp.paginationLayout || 'total, sizes, prev, pager, next, jumper';
+
+      // 根据 showTotal 开关调整布局
+      let finalLayout = layout;
+      if (!this.showTotal) {
+        // 如果不显示总条数，从布局中移除 'total'
+        finalLayout = finalLayout.replace(/total,?\s*/g, '').replace(/,\s*$/, '').trim();
+      }
+
+      // 根据 showPaginationJumper 开关调整布局
+      if (!this.showPaginationJumper) {
+        // 如果不显示跳页器，从布局中移除 'jumper'
+        finalLayout = finalLayout.replace(/jumper,?\s*/g, '').replace(/,\s*$/, '').trim();
+      }
+
+      return finalLayout;
+    },
+    // 从配置中读取是否显示跳页器
+    showPaginationJumper() {
+      return this.optionsSetUp.showPaginationJumper !== false;
+    },
+    // 从配置中读取是否带背景色
+    paginationBackground() {
+      return this.optionsSetUp.paginationBackground !== false;
+    },
+    // 从配置中读取下拉选项弹窗类名
+    paginationPopperClass() {
+      return this.optionsSetUp.paginationPopperClass || '';
+    },
+    // 分页容器样式 - 根据配置动态计算
+    paginationContainerStyle() {
+      const setUp = this.optionsSetUp || {};
+      const activeColor = setUp.paginationActiveColor || '#409EFF';
+      const totalColor = setUp.paginationTotalColor || '#606266';
+      const pageNumberColor = setUp.paginationPageNumberColor || '#606266';
+      const selectedBgColor = setUp.paginationSelectedBgColor || '#409EFF';
+      const position = setUp.paginationPosition || 'center';
+      const marginTop = setUp.paginationMarginTop !== undefined ? setUp.paginationMarginTop : 10;
+      const marginBottom = setUp.paginationMarginBottom !== undefined ? setUp.paginationMarginBottom : 10;
+
+      // 根据位置设置 justify-content
+      let justifyContent = 'center';
+      if (position === 'left') {
+        justifyContent = 'flex-start';
+      } else if (position === 'right') {
+        justifyContent = 'flex-end';
+      }
+
+      return {
+        '--pagination-active-color': activeColor,
+        '--pagination-total-color': totalColor,
+        '--pagination-page-number-color': pageNumberColor,
+        '--pagination-selected-bg-color': selectedBgColor,
+        'justify-content': justifyContent,
+        'margin-top': marginTop + 'px',
+        'margin-bottom': marginBottom + 'px'
+      };
+    },
     styleObj() {
       const allStyle = this.optionsPosition;
       return {
@@ -186,13 +386,13 @@ export default {
     exportButtonStyle() {
       // 根据表头字体大小动态计算按钮大小
       const headerFontSize = parseInt(this.optionsSetUp.fontSizeHeader || 16);
-      
+
       // 计算图标尺寸，基于表头字体大小
       const iconSize = Math.max(14, Math.min(24, headerFontSize * 1.1));
-      
+
       // 计算按钮高度，略大于图标尺寸
       const buttonHeight = Math.round(iconSize * 1.8);
-      
+
       return {
         height: `${buttonHeight}px`,
         padding: '0 12px',
@@ -213,10 +413,10 @@ export default {
       const buttonHeight = parseInt(this.exportButtonStyle.height);
       // 设置按钮位置
       return {
-        position: 'absolute',
-        top: `-${buttonHeight + 5}px`, // 按钮高度 + 5px的间距
-        right: '10px',
-        zIndex: '100'
+        // position: 'absolute',
+        // top: `-${buttonHeight + 5}px`, // 按钮高度 + 5px的间距
+        // right: '10px',
+        // zIndex: '100'
       };
     },
     // 添加对话框宽度计算属性
@@ -232,16 +432,115 @@ export default {
       } else {
         return '420px';
       }
+    },
+    // 排序后的数据
+    sortedList() {
+      if (this.sortColumn === -1 || this.sortOrder === '') {
+        console.log('[Table] sortedList: 无排序，返回原始数据');
+        return this.list;
+      }
+      
+      const sortedData = [...this.list];
+      const key = this.header[this.sortColumn] ? this.header[this.sortColumn].key : null;
+      if (!key) {
+        console.warn('[Table] sortedList: 未找到排序字段 key');
+        return this.list;
+      }
+
+      console.log('[Table] sortedList: 开始排序，字段:', key, '方向:', this.sortOrder);
+      
+      sortedData.sort((a, b) => {
+        const valA = a[key];
+        const valB = b[key];
+
+        // 判断是否为数字
+        const isNumA = !isNaN(valA) && valA !== '' && valA !== null && valA !== undefined;
+        const isNumB = !isNaN(valB) && valB !== '' && valB !== null && valB !== undefined;
+
+        let compareResult = 0;
+        if (isNumA && isNumB) {
+          compareResult = Number(valA) - Number(valB);
+        } else {
+          compareResult = String(valA || '').localeCompare(String(valB || ''), 'zh-CN');
+        }
+
+        return this.sortOrder === 'asc' ? compareResult : -compareResult;
+      });
+
+      console.log('[Table] sortedList: 排序完成，前3条数据:', sortedData.slice(0, 3));
+      return sortedData;
+    },
+
+    // 排序后的全量数据（用于不分页模式）
+    sortedSourceDataList() {
+      if (this.sortColumn === -1 || this.sortOrder === '') {
+        console.log('[Table] sortedSourceDataList: 无排序，返回原始数据');
+        return this.sourceDataList;
+      }
+      
+      const sortedData = [...this.sourceDataList];
+      const key = this.header[this.sortColumn] ? this.header[this.sortColumn].key : null;
+      if (!key) {
+        console.warn('[Table] sortedSourceDataList: 未找到排序字段 key');
+        return this.sourceDataList;
+      }
+
+      console.log('[Table] sortedSourceDataList: 开始排序，字段:', key, '方向:', this.sortOrder, '数据量:', sortedData.length);
+      
+      sortedData.sort((a, b) => {
+        const valA = a[key];
+        const valB = b[key];
+
+        // 判断是否为数字
+        const isNumA = !isNaN(valA) && valA !== '' && valA !== null && valA !== undefined;
+        const isNumB = !isNaN(valB) && valB !== '' && valB !== null && valB !== undefined;
+
+        let compareResult = 0;
+        if (isNumA && isNumB) {
+          compareResult = Number(valA) - Number(valB);
+        } else {
+          compareResult = String(valA || '').localeCompare(String(valB || ''), 'zh-CN');
+        }
+
+        return this.sortOrder === 'asc' ? compareResult : -compareResult;
+      });
+
+      console.log('[Table] sortedSourceDataList: 排序完成，前3条数据:', sortedData.slice(0, 3));
+      return sortedData;
+    },
+
+    // 分页后的数据展示
+    displayList() {
+      // 根据分页开关决定返回的数据
+      if (!this.showPagination) {
+        // 关闭分页时，返回全量数据并应用排序
+        return this.sortedSourceDataList.length > 0 ? this.sortedSourceDataList : this.sortedList;
+      }
+
+      // 开启分页时，直接使用接口返回的当前页数据（后端分页模式）
+      // 不再进行前端切片，因为接口已经返回了正确的当前页数据
+      return this.sortedList;
     }
   },
   watch: {
     value: {
       handler(val) {
         this.optionsSetUp = val.setup;
-        
+
         this.optionsPosition = val.position;
         this.optionsData = val.data;
+
+        // 同步分页配置
+        if (this.optionsSetUp.pageSize !== undefined && this.optionsSetUp.pageSize !== null) {
+          this.pageSize = this.optionsSetUp.pageSize;
+        }
+
         this.initData();
+
+        // 总条数颜色变化时，使用 JavaScript 直接设置样式
+        this.$nextTick(() => {
+          this.updateTotalColor();
+        });
       },
       deep: true
     }
@@ -250,15 +549,52 @@ export default {
     this.optionsSetUp = this.value.setup;
     this.optionsPosition = this.value.position;
     this.optionsData = this.value.data;
+
+    // 初始化分页参数
+    if (this.optionsSetUp.pageSize !== undefined && this.optionsSetUp.pageSize !== null) {
+      this.pageSize = this.optionsSetUp.pageSize;
+    }
+
     this.initData();
-    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    targetWidgetLinkageLogic(this); // 联动 - 目标组件逻辑
+    registerWidgetInstance(this); // 注册到实例映射表，供其他组件通过 widgetId 查找
     // 添加窗口大小变化监听
     this.checkDeviceType();
     window.addEventListener('resize', this.handleResize);
+    // 检查分页组件联动配置
+    this.checkPaginationLinkage();
+
+    // 初始化总条数颜色
+    this.$nextTick(() => {
+      this.updateTotalColor();
+    });
   },
   beforeDestroy() {
     // 移除窗口大小变化监听
     window.removeEventListener('resize', this.handleResize);
+
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+
+    // 销毁 Superslide 实例，避免内存泄漏
+    if (this.$el && this.$el.querySelector('.txtScroll-top')) {
+      const slideEl = this.$el.querySelector('.txtScroll-top');
+      if (slideEl._superslide) {
+        slideEl._superslide.destroy();
+        console.log('[Table] Superslide 实例已销毁');
+      }
+    }
+
+    // 清空 DOM 引用
+    if (this.$el) {
+      this.$el.innerHTML = '';
+    }
+
+    console.log('[Table] beforeDestroy 资源清理完成');
+    unregisterWidgetInstance(this); // 注销实例，避免内存泄漏
   },
   methods: {
     handleMouseSeen(index, idx){
@@ -296,23 +632,98 @@ export default {
       const head = this.optionsSetUp.dynamicAddTable;
       this.header = head;
     },
+    // 数据解析
     setOptionsData(e, paramsConfig) {
       const tableData = this.optionsData;
       tableData.dynamicData = tableData.dynamicData || {}; // 兼容 dynamicData undefined
-
       const myDynamicData = tableData.dynamicData;
       clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
+      
+      // 优先处理来自分页组件的联动数据
+      if (this.hasLinkage && e && (e.currentPage !== undefined || e.pageSize !== undefined)) {
+        // 更新分页参数
+        if (e.currentPage !== undefined && e.currentPage !== null) {
+          this.currentPage = e.currentPage;
+        }
+        if (e.pageSize !== undefined && e.pageSize !== null) {
+          this.pageSize = e.pageSize;
+        }
+
+        // 如果是动态数据，更新 contextData 并重新请求
+        if (tableData.dataType === "dynamicData" && myDynamicData) {
+          if (!myDynamicData.contextData) {
+            myDynamicData.contextData = {};
+          }
+          myDynamicData.contextData.currentPage = this.currentPage;
+          myDynamicData.contextData.pageSize = this.pageSize;
+
+          this.handlerDynamicData(myDynamicData, tableData.refreshTime);
+          return;
+        }
+
+        if (e.paginatedData && Array.isArray(e.paginatedData)) {
+          this.list = e.paginatedData;
+          this.hackResetFun();
+          return;
+        }
+
+        if (e.list && Array.isArray(e.list)) {
+          this.list = e.list;
+          this.hackResetFun();
+          return;
+        }
+      }
+
+      // 处理来自按钮组件的时间参数（开始时间和结束时间）
+      if (e && tableData.dataType !== "staticData") {
+        // 初始化 contextData
+        if (!myDynamicData.contextData) {
+          myDynamicData.contextData = {};
+        }
+        
+        // 从联动数据中提取时间参数并写入 contextData
+        // 支持多种可能的字段名：startTime/endTime、start/end、beginTime/endTime 等
+        if (e.startTime !== undefined && e.startTime !== null) {
+          myDynamicData.contextData.startTime = e.startTime;
+          console.log('[Table] 接收到开始时间:', e.startTime);
+        }
+        if (e.endTime !== undefined && e.endTime !== null) {
+          myDynamicData.contextData.endTime = e.endTime;
+          console.log('[Table] 接收到结束时间:', e.endTime);
+        }
+        if (e.start !== undefined && e.start !== null) {
+          myDynamicData.contextData.startTime = e.start;
+          console.log('[Table] 接收到开始时间(start):', e.start);
+        }
+        if (e.end !== undefined && e.end !== null) {
+          myDynamicData.contextData.endTime = e.end;
+          console.log('[Table] 接收到结束时间(end):', e.end);
+        }
+        if (e.beginTime !== undefined && e.beginTime !== null) {
+          myDynamicData.contextData.startTime = e.beginTime;
+          console.log('[Table] 接收到开始时间(beginTime):', e.beginTime);
+        }
+      }
+
+      // 处理来自数据源的参数映射
       if (
         e &&
         tableData.dataType !== "staticData" &&
+        myDynamicData.contextData &&
         Object.keys(myDynamicData.contextData).length
       ) {
         const keyArr = Object.keys(myDynamicData.contextData);
-        paramsConfig.forEach((conf) => {
-          if (keyArr.includes(conf.targetKey)) {
-            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
-          }
-        });
+        if (paramsConfig && Array.isArray(paramsConfig)) {
+          paramsConfig.forEach((conf) => {
+            //打个补丁
+            if(conf && conf.targetKey) {
+              if (!conf.originKey) conf.originKey= conf.targetKey;
+            }
+            if (conf && conf.targetKey && conf.originKey && keyArr.includes(conf.targetKey)) {
+              myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+            }
+          });
+        }
       }
 
       tableData.dataType == "staticData"
@@ -336,7 +747,44 @@ export default {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       data.then(res => {
-        this.list = res;
+        let newData = [];
+
+        // 空值检查
+        if (!res) {
+          newData = [];
+        } else if (Array.isArray(res)) {
+          // 如果返回的是数组
+          newData = res;
+
+          // 从数组第一个元素中提取 totalNum 作为总数
+          if (res.length > 0 && res[0] && res[0].totalNum !== undefined) {
+            this.total = res[0].totalNum;
+          } else {
+            // 如果没有 totalNum 字段，使用数组长度
+            this.total = res.length;
+          }
+        } else if (res.data) {
+          // 如果返回的是对象，包含 data 字段
+          newData = res.data;
+
+          // 从对象中提取 total 或 totalNum
+          this.total = res.total || res.totalNum || res.data.length;
+        } else {
+          newData = [];
+          this.total = 0;
+        }
+
+        // 同时更新 list 和 sourceDataList
+        this.list = newData;
+        this.sourceDataList = JSON.parse(JSON.stringify(newData)); // 深拷贝避免引用问题
+
+        this.hackResetFun();
+      }).catch(err => {
+        console.error('接口调用失败:', err);
+        this.$message.error('数据加载失败');
+        this.list = [];
+        this.sourceDataList = [];
+        this.total = 0;
         this.hackResetFun();
       });
     },
@@ -378,9 +826,9 @@ export default {
     tableReadColor(index, idx){
       let styleJson = {};
       if (this.optionsSetUp.is_read_mode && (this.hoverIndex.index === index || this.hoverIndex.idx === idx)) {
-        styleJson["background-color"] = this.optionsSetUp.read_color;console.log(styleJson["background-color"],this.hoverIndex,1231231)
+        styleJson["background-color"] = this.optionsSetUp.read_color;
       }
-      
+
       return styleJson;
     },
     // 添加的方法 - 设备类型检测
@@ -388,19 +836,190 @@ export default {
       this.screenWidth = window.innerWidth;
       this.isMobile = this.screenWidth <= 576;
     },
-    
+
     // 处理窗口大小变化
     handleResize() {
       this.checkDeviceType();
     },
-    
+
+    // 更新总条数颜色 - 使用 JavaScript 直接设置样式
+    updateTotalColor() {
+      if (!this.optionsSetUp.paginationTotalColor) {
+        return;
+      }
+
+      this.$nextTick(() => {
+        // 查找总条数元素并直接设置颜色
+        const totalElements = document.querySelectorAll('.el-pagination__total');
+        if (totalElements.length > 0) {
+          totalElements.forEach(el => {
+            el.style.color = this.optionsSetUp.paginationTotalColor;
+          });
+        }
+
+        // 查找页码数字元素并直接设置颜色
+        const pageNumberElements = document.querySelectorAll('.el-pager li:not(.is-active):not(:hover)');
+        if (pageNumberElements.length > 0) {
+          pageNumberElements.forEach(el => {
+            el.style.color = this.optionsSetUp.paginationPageNumberColor || '#606266';
+          });
+        }
+
+        // 查找跳页器文字元素并直接设置颜色
+        const jumperElements = document.querySelectorAll('.el-pagination__jump');
+        if (jumperElements.length > 0) {
+          jumperElements.forEach(el => {
+            el.style.color = this.optionsSetUp.paginationPageNumberColor || '#606266';
+          });
+        }
+
+        // 查找跳页器输入框并直接设置颜色
+        const jumperInputElements = document.querySelectorAll('.el-pagination__jump .el-input__inner');
+        if (jumperInputElements.length > 0) {
+          jumperInputElements.forEach(el => {
+            el.style.color = this.optionsSetUp.paginationPageNumberColor || '#606266';
+          });
+        }
+
+        // 查找选中状态的页码并直接设置背景色
+        const activePageElements = document.querySelectorAll('.el-pager li.is-active');
+        if (activePageElements.length > 0) {
+          activePageElements.forEach(el => {
+            el.style.backgroundColor = this.optionsSetUp.paginationSelectedBgColor || '#409EFF';
+            el.style.color = '#fff'; // 强制设置白色文字
+          });
+        }
+
+        // 为所有页码数字添加 hover 效果
+        const pageNumbers = document.querySelectorAll('.el-pager li.number');
+        if (pageNumbers.length > 0) {
+          pageNumbers.forEach(el => {
+            el.addEventListener('mouseenter', () => {
+              el.style.backgroundColor = this.optionsSetUp.paginationSelectedBgColor || '#409EFF';
+              el.style.color = '#fff';
+            });
+            el.addEventListener('mouseleave', () => {
+              // 如果不是激活状态，恢复默认颜色
+              if (!el.classList.contains('is-active')) {
+                el.style.backgroundColor = '';
+                el.style.color = this.optionsSetUp.paginationPageNumberColor || '#606266';
+              }
+            });
+          });
+        }
+      });
+    },
+    // 处理每页条数变化 - 服务端分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1; // 重置为第一页
+
+      // 将分页参数注入到 contextData 中
+      const tableData = this.optionsData;
+      const myDynamicData = tableData.dynamicData || {};
+      if (!myDynamicData.contextData) {
+        myDynamicData.contextData = {};
+      }
+      myDynamicData.contextData.currentPage = this.currentPage;
+      myDynamicData.contextData.pageSize = this.pageSize;
+
+      // 重新请求数据
+      this.handlerDynamicData(myDynamicData, tableData.refreshTime);
+    },
+
+    // 处理页码变化 - 服务端分页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+
+      // 将分页参数注入到 contextData 中
+      const tableData = this.optionsData;
+      const myDynamicData = tableData.dynamicData || {};
+      if (!myDynamicData.contextData) {
+        myDynamicData.contextData = {};
+      }
+      myDynamicData.contextData.currentPage = this.currentPage;
+      myDynamicData.contextData.pageSize = this.pageSize;
+
+      // 重新请求数据
+      this.handlerDynamicData(myDynamicData, tableData.refreshTime);
+    },
+
+    // 检查分页组件联动配置
+    checkPaginationLinkage() {
+      if (!this.allComponentLinkage || !this.allComponentLinkage.length) return;
+
+      // 查找是否有分页组件的联动配置（分页作为源组件，表格作为目标组件）
+      this.allComponentLinkage.some(item => {
+        if (item.index !== -1 && item.linkageArr && item.linkageArr.length) {
+          return item.linkageArr.some(obj => {
+            // 查找目标组件是当前表格组件的联动配置
+            if (obj.targetId === this.value.setup.widgetId) {
+              // 查找源组件是否是分页组件
+              const originLinkage = this.allComponentLinkage.find(link => link && link.id === obj.originId);
+              if (originLinkage && originLinkage.widgetCode === 'widget-pagination') {
+                this.hasLinkage = true;
+                this.linkagePagination = {
+                  originId: obj.originId,
+                  targetId: obj.targetId,
+                  paramsConfig: obj.paramsConfig
+                };
+
+                // 监听分页组件发送的数据
+                const eventName = `bus_${obj.originId}_${obj.targetId}`;
+                this.$nextTick(() => {
+                  // 避免重复绑定
+                  this.$off(eventName);
+                  this.$on(eventName, (data) => {
+                    this.setOptionsData(data, obj.paramsConfig);
+                  });
+                });
+                return true;
+              }
+            }
+            return false;
+          });
+        }
+        return false;
+      });
+    },
+
+    // 打开源数据对话框
+    openSourceDataDialog() {
+      if (!this.list || this.list.length === 0) {
+        this.$message.warning('没有数据可查看');
+        return;
+      }
+      // 重新检查设备类型
+      this.checkDeviceType();
+      // 复制当前列表数据（全量数据）
+      this.sourceDataList = JSON.parse(JSON.stringify(this.sortedList));
+      // 设置总数
+      this.total = this.sourceDataList.length;
+      // 重置分页参数
+      this.currentPage = 1;
+      this.pageSize = 10;
+      // 显示源数据对话框
+      this.sourceDataDialogVisible = true;
+
+      // 调用查询以加载第一页数据
+      this.$nextTick(() => {
+        this.handleQuery();
+      });
+    },
+
+    // 关闭源数据对话框并重置数据
+    closeSourceDataDialog() {
+      this.sourceDataDialogVisible = false;
+      this.resetTime();
+    },
+
     // 打开导出对话框前检查设备类型
     openExportDialog() {
       if (!this.list || this.list.length === 0) {
         this.$message.warning('没有数据可导出');
         return;
       }
-      
+
       // 重新检查设备类型
       this.checkDeviceType();
 
@@ -408,15 +1027,15 @@ export default {
       const now = new Date();
       const dateStr = `${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2,'0')}${now.getDate().toString().padStart(2,'0')}`;
       const timeStr = `${now.getHours().toString().padStart(2,'0')}${now.getMinutes().toString().padStart(2,'0')}`;
-      
+
       // 准备对话框数据
       this.exportForm.fileName = `表格数据_${dateStr}_${timeStr}`;
       this.exportForm.format = 'excel'; // 默认选择Excel格式
-      
+
       // 显示导出对话框
       this.exportDialogVisible = true;
     },
-    
+
     // 确认导出方法
     confirmExport() {
       // 检查文件名是否为空
@@ -424,10 +1043,10 @@ export default {
         this.$message.warning('请输入文件名');
         return;
       }
-      
+
       // 设置导出中状态
       this.exporting = true;
-      
+
       // 根据选择的格式执行不同的导出方法
       try {
         if (this.exportForm.format === 'excel') {
@@ -445,33 +1064,33 @@ export default {
         this.exporting = false;
       }
     },
-    
-    // 执行Excel导出
+
+    // 执行 Excel 导出
     doExportExcel() {
-      // 引入xlsx库，使用动态导入以减少初始加载时间
+      // 引入 xlsx 库，使用动态导入以减少初始加载时间
       import('xlsx').then(XLSX => {
         // 准备数据：表头和内容
         const tableHeaders = this.header.map(header => header.name);
         const tableKeys = this.header.map(header => header.key);
-        
+
         // 创建表格数据数组，从列表数据映射
-        const tableData = this.list.map(row => {
+        const tableData = this.sortedList.map(row => {
           const rowData = {};
           tableKeys.forEach((key, index) => {
             rowData[tableHeaders[index]] = row[key];
           });
           return rowData;
         });
-        
+
         // 创建工作簿和工作表
         const wb = XLSX.utils.book_new();
         const ws = XLSX.utils.json_to_sheet(tableData, { header: tableHeaders });
-        
+
         // 计算列宽 - 动态计算合适的列宽
         ws['!cols'] = tableHeaders.map((header, index) => {
           // 尝试计算合适的列宽，考虑标题和内容
           const headerLength = header ? header.toString().length : 0;
-          
+
           // 计算该列数据的最大长度
           let maxLength = headerLength;
           tableData.forEach(row => {
@@ -479,17 +1098,17 @@ export default {
             const cellLength = cellValue ? cellValue.toString().length : 0;
             maxLength = Math.max(maxLength, cellLength);
           });
-          
+
           // 为确保列宽适合内容，添加一些额外空间
           return { wch: Math.min(50, maxLength + 2) }; // 限制最大宽度为50个字符
         });
-        
+
         // 添加工作表到工作簿
         XLSX.utils.book_append_sheet(wb, ws, '数据表');
-        
+
         // 导出文件，使用用户指定的文件名
         XLSX.writeFile(wb, `${this.exportForm.fileName}.xlsx`);
-        
+
         // 导出成功
         this.$message.success('导出成功');
         this.exportDialogVisible = false;
@@ -500,21 +1119,21 @@ export default {
         this.exporting = false;
       });
     },
-    
-    // 执行CSV导出
+
+    // 执行 CSV 导出
     doExportCSV() {
       // 准备表头和数据
       const tableHeaders = this.header.map(header => header.name);
       const tableKeys = this.header.map(header => header.key);
-      
-      // 创建CSV内容
-      let csvContent = '\uFEFF'; // 添加BOM标记以支持中文
-      
+
+      // 创建 CSV 内容
+      let csvContent = '\uFEFF'; // 添加 BOM 标记以支持中文
+
       // 添加表头
       csvContent += tableHeaders.join(',') + '\r\n';
-      
+
       // 添加数据行
-      this.list.forEach(row => {
+      this.sortedList.forEach(row => {
         const rowValues = tableKeys.map(key => {
           const value = row[key] !== undefined && row[key] !== null ? row[key] : '';
           // 如果值包含逗号、引号或换行符，需要用引号包裹并转义内部引号
@@ -525,12 +1144,12 @@ export default {
         });
         csvContent += rowValues.join(',') + '\r\n';
       });
-      
+
       // 创建Blob对象
       const blob = new Blob([csvContent], {
         type: 'text/csv;charset=utf-8'
       });
-      
+
       // 创建下载链接，使用用户指定的文件名
       const link = document.createElement('a');
       link.href = URL.createObjectURL(blob);
@@ -539,6 +1158,116 @@ export default {
       link.click();
       document.body.removeChild(link);
     },
+    // 处理排序
+    handleSort(index) {
+      console.log('[Table] 点击排序，列索引:', index);
+      console.log('[Table] 排序前状态:', { sortColumn: this.sortColumn, sortOrder: this.sortOrder });
+      console.log('[Table] 当前数据条数 - list:', this.list.length, 'sourceDataList:', this.sourceDataList.length);
+      console.log('[Table] 分页状态 - showPagination:', this.showPagination, 'currentPage:', this.currentPage);
+      
+      if (this.sortColumn === index) {
+        // 同一列，切换排序方向
+        if (this.sortOrder === 'asc') {
+          this.sortOrder = 'desc';
+          console.log('[Table] 切换为降序');
+        } else if (this.sortOrder === 'desc') {
+          this.sortOrder = '';
+          this.sortColumn = -1;
+          console.log('[Table] 取消排序');
+        } else {
+          this.sortOrder = 'asc';
+          console.log('[Table] 切换为升序');
+        }
+      } else {
+        // 不同列，默认升序
+        this.sortColumn = index;
+        this.sortOrder = 'asc';
+        console.log('[Table] 新列排序，升序');
+      }
+      
+      console.log('[Table] 排序后状态:', { sortColumn: this.sortColumn, sortOrder: this.sortOrder });
+      console.log('[Table] 排序列名:', this.header[index] ? this.header[index].name : '未知');
+      
+      // 使用 $nextTick 确保数据更新后再刷新组件
+      this.$nextTick(() => {
+        console.log('[Table] 开始刷新组件...');
+        this.hackResetFun();
+      });
+    },
+    // 获取排序图标类名
+    getSortClass(index) {
+      if (this.sortColumn !== index) return '';
+      if (this.sortOrder === 'asc') return 'sort-asc';
+      if (this.sortOrder === 'desc') return 'sort-desc';
+      return '';
+    },
+    // 获取序号（根据是否分页动态计算）
+    getSerialNumber(index) {
+      if (this.showPagination) {
+        // 分页模式下：(当前页 - 1) * 每页条数 + 索引 + 1
+        // 例如：第 2 页，pageSize=10, index=0 → (2-1)*10+0+1 = 11
+        return (this.currentPage - 1) * this.pageSize + index + 1;
+      } else {
+        // 不分页模式：直接返回索引 + 1
+        return index + 1;
+      }
+    },
+    // 处理时间查询
+    handleQuery() {
+      // if (!this.times || this.times.length === 0) {
+      //   this.$message.warning('请选择时间范围');
+      //   return;
+      // }
+      const tableData = this.optionsData;
+      const myDynamicData = tableData.dynamicData || {};
+      if (!myDynamicData.contextData) {
+        myDynamicData.contextData = {};
+      }
+      // 将时间范围添加到请求参数中
+      if (this.times && this.times.length === 2) {
+        const startTime = this.formatDate(this.times[0], 'start');
+        const endTime = this.formatDate(this.times[1], 'end');
+        myDynamicData.contextData.startTime = startTime;
+        myDynamicData.contextData.endTime = endTime;
+      }
+      // 将当前分页参数注入到 contextData 中
+      myDynamicData.contextData.currentPage = this.currentPage;
+      myDynamicData.contextData.pageSize = this.pageSize;
+      // 重新请求数据
+      this.handlerDynamicData(myDynamicData, tableData.refreshTime);
+    },
+
+    // 格式化日期 - 保留到月份
+    formatDate(date, type) {
+      if (!date) return '';
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+
+      if (type === 'start') {
+        return `${year}-${month}`;
+      } else {
+        return `${year}-${month}`;
+      }
+    },
+
+    // 重置时间到当前月份并调用接口
+    resetTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth(); // 从 0 开始
+
+      // 设置为当前月份（开始和结束都是当前月）
+      this.times = ['',''];
+
+      // 重置分页参数
+      this.currentPage = 1;
+      this.pageSize = 10;
+
+      // 使用 nextTick 确保数据更新后再调用接口
+      this.$nextTick(() => {
+        this.handleQuery();
+      });
+    },
   }
 };
 </script>
@@ -561,6 +1290,39 @@ export default {
   width: 100%;
 }
 
+.sortable-header {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .sort-icon {
+    display: inline-flex;
+    flex-direction: column;
+    margin-left: 5px;
+    vertical-align: middle;
+    font-size: 12px;
+    opacity: 0.3;
+
+    i {
+      line-height: 10px;
+
+      &:first-child {
+        margin-bottom: 2px;
+      }
+    }
+
+    &.sort-asc i:first-child,
+    &.sort-desc i:last-child {
+      opacity: 1;
+      color: #409EFF;
+    }
+  }
+}
+
 .txtScroll-top .bd {
   width: 100%;
 }
@@ -583,28 +1345,50 @@ export default {
 /* 添加导出按钮样式 */
 .export-button-container {
   position: absolute;
-  right: 0px;
+  top: -30px;
+  right: -10px;
   z-index: 100;
+  // background: red;
+  width: 90px;
+  height: 20px;
+  display: flex;
+  img{
+    width: 20px;
+    height: 20px;
+  }
+  // .export-button {
+  //   transition: all 0.3s ease;
+  //   cursor: pointer;
+  //   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 
-  .export-button {
-    transition: all 0.3s ease;
+  //   &:hover {
+  //     transform: scale(1.05);
+  //     background-color: rgba(39, 174, 96, 1) !important;
+  //     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  //   }
+
+  //   i {
+  //     margin-right: 5px;
+  //   }
+
+  //   .button-text {
+  //     font-size: 14px;
+  //     font-weight: 500;
+  //   }
+  // }
+  .export-buttonS{
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    font-size: 20px;
+    text-align: center;
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    
-    &:hover {
-      transform: scale(1.05);
-      background-color: rgba(39, 174, 96, 1) !important;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    }
-    
-    i {
-      margin-right: 5px;
-    }
-    
-    .button-text {
-      font-size: 14px;
-      font-weight: 500;
-    }
+    color: #fff;
+    margin-bottom: 10px;
+  }
+  .icon{
+    width: 18px;
+    height: 18px;
   }
 }
 
@@ -614,14 +1398,14 @@ export default {
   border-radius: 4px;
   padding: 10px 15px;
   margin-top: 5px;
-  
+
   p {
     margin: 5px 0;
     font-size: 13px;
     color: #606266;
     display: flex;
     align-items: center;
-    
+
     i {
       margin-right: 5px;
       color: #409EFF;
@@ -636,21 +1420,21 @@ export default {
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   position: relative;
   z-index: 9999 !important;
-  
+
   .el-dialog__header {
     padding: 15px 20px;
     border-bottom: 1px solid #e4e7ed;
   }
-  
+
   .el-dialog__body {
     padding: 20px;
   }
-  
+
   .el-dialog__footer {
     padding: 10px 20px 15px;
     border-top: 1px solid #e4e7ed;
   }
-  
+
   .el-form-item {
     margin-bottom: 15px;
   }
@@ -662,7 +1446,7 @@ export default {
     display: flex;
     flex-direction: column;
     margin: 0 !important;
-    
+
     .el-dialog {
       width: 100% !important;
       margin: 0 !important;
@@ -671,21 +1455,21 @@ export default {
       display: flex;
       flex-direction: column;
       height: 100%;
-      
+
       .el-dialog__body {
         flex: 1;
         overflow-y: auto;
         padding: 15px;
       }
-      
+
       .el-form-item__label {
         width: 80px !important;
       }
-      
+
       .el-radio-group {
         display: flex;
         flex-direction: column;
-        
+
         .el-radio {
           margin-left: 0;
           margin-bottom: 10px;
@@ -693,12 +1477,12 @@ export default {
       }
     }
   }
-  
+
   @media screen and (max-width: 768px) {
     .el-form-item__label {
       width: 80px !important;
     }
-    
+
     .el-form {
       .el-radio-group {
         flex-wrap: wrap;
@@ -710,4 +1494,123 @@ export default {
 ::v-deep .v-modal {
   z-index: 9998 !important;
 }
+
+/* 源数据对话框样式 */
+.source-data-content {
+  max-height: 500px;
+  overflow-y: auto;
+  .timestamp{
+    width: 100%;
+    height: 50px;
+    ::v-deep .el-date-editor{
+      width: 150px;
+      // margin-right: 60px;
+      .el-range-separator{
+        width: 30px;
+      }
+      .el-input__inner {
+        width: 150px;
+      }
+    }
+    .spana{
+      padding: 0px 10px;
+      box-sizing: border-box;
+    }
+    .buttonS{
+      margin-left: 60px;
+    }
+  }
+  .data-info {
+    margin-top: 15px;
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+
+    p {
+      margin: 0;
+      font-size: 13px;
+      color: #606266;
+      display: flex;
+      align-items: center;
+
+      i {
+        margin-right: 5px;
+        color: #409EFF;
+      }
+    }
+  }
+
+  .pagination-container {
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+
+    .pagination {
+      padding: 10px 0;
+    }
+  }
+}
+
+// 表格分页容器样式
+.pagination-container {
+  width: 100%;
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+  background-color: transparent;
+
+  .pagination {
+    padding: 10px 0;
+
+    ::v-deep .el-pagination {
+      // 总条数颜色 - 直接使用 CSS 变量，通过父容器传递
+      .el-pagination__total {
+        color: var(--pagination-total-color, #606266) !important;
+      }
+
+      // 页码文字颜色 - 未激活状态的页码数字（增强选择器）
+      .el-pager li:not(.is-active):not(:hover),
+      .el-pager li.number {
+        color: var(--pagination-page-number-color, #606266) !important;
+      }
+
+      // 跳页器文字颜色 - "前往"和"页"文字
+      .el-pagination__jump {
+        color: var(--pagination-page-number-color, #606266) !important;
+
+        // 输入框中的文字颜色
+        .el-input__inner {
+          color: var(--pagination-page-number-color, #606266) !important;
+        }
+      }
+
+      &.is-background {
+        .el-pager li {
+          &.is-active {
+            background-color: var(--pagination-selected-bg-color, #409EFF) !important;
+            color: #fff;
+          }
+
+          &:hover {
+            background-color: var(--pagination-selected-bg-color, #409EFF) !important;
+            color: #fff;
+          }
+        }
+
+        .btn-prev,
+        .btn-next {
+          &:hover {
+            background-color: var(--pagination-selected-bg-color, #409EFF) !important;
+            color: #fff;
+          }
+        }
+
+        .el-select-dropdown__item.selected {
+          color: var(--pagination-active-color, #409EFF);
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue
index 4f4d140..9d6f282 100644
--- a/src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue
@@ -191,9 +191,12 @@ export default {
         // 保存当前数据值用于条件判断
         if (res && res.length > 0) {
           this.currentDataValue = res[0].value;
+          this.styleColor.text = this.optionsSetup.joinText === undefined || this.optionsSetup.joinText === "" ? res[0].value : res[0].value + this.optionsSetup.joinText;
+        } else {
+          // 数据为空时设置默认值
+          this.currentDataValue = null;
+          this.styleColor.text = '';
         }
-        
-        this.styleColor.text = this.optionsSetup.joinText === undefined || this.optionsSetup.joinText === "" ? res[0].value : res[0].value + this.optionsSetup.joinText;
         this.$forceUpdate();
       });
     }
diff --git a/src/views/bigscreenDesigner/designer/widget/texts/widgetTime.vue b/src/views/bigscreenDesigner/designer/widget/texts/widgetTime.vue
index 1c3d891..e35950d 100644
--- a/src/views/bigscreenDesigner/designer/widget/texts/widgetTime.vue
+++ b/src/views/bigscreenDesigner/designer/widget/texts/widgetTime.vue
@@ -12,12 +12,13 @@ export default {
   data() {
     return {
       timestr: "",
-      options: {}
+      options: {},
+      flagInter: null, // 添加定时器引用
     };
   },
   computed: {
     transStyle() {
-      console.log(this.objToOne(this.options));
+      // console.log(this.objToOne(this.options));
       return this.objToOne(this.options);
     },
     styleColor() {
@@ -147,9 +148,27 @@ export default {
           : this.formatFunction(new Date(), this.transStyle.timeFormat);
     },
     getTime() {
-      setInterval(() => {
+      clearInterval(this.flagInter); // 清除之前的定时器
+      this.displayTime(); // 立即执行一次
+      this.flagInter = setInterval(() => {
         this.displayTime();
       }, 1000);
+    },
+    beforeDestroy() {
+      console.log('[Time] beforeDestroy 开始清理资源');
+      
+      // 清除定时器，避免内存泄漏
+      if (this.flagInter) {
+        clearInterval(this.flagInter);
+        this.flagInter = null;
+        console.log('[Time] 已清除时间刷新定时器');
+      }
+      
+      // 清空大型数据引用
+      this.options = {};
+      this.timestr = '';
+      
+      console.log('[Time] 资源清理完成');
     }
   }
 };
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index e74d509..3b5308c 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -39,8 +39,10 @@ import widgetVideo from "./texts/widgetVideo.vue";
 import widgetVideoMonitor from "./texts/widgetVideoMonitor.vue";
 import WidgetIframe from "./texts/widgetIframe.vue";
 import widgetCalendar from "./texts/widgetCalendar.vue";
+import widgetPagination from "./texts/widgetPagination.vue";
 import widgetBarchart from "./bar/widgetBarchart.vue";
 import widgetScatter from "./scatter/widgetScatter.vue";
+import widgetQuadrantScatter from "./scatter/widgetQuadrantScatter.vue";
 import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
 import widgetLinechart from "./line/widgetLinechart.vue";
 import widgetBarlinechart from "./barline/widgetBarlinechart";
@@ -75,7 +77,7 @@ import widgetBarMap from "./map/widgetBarMap.vue";
 import widgetChinaMap from "./map/widgetChinaMap.vue";
 import widgetGlobalMap from "./map/widgetGlobalMap.vue";
 import widgetBarStackMoreShowChart from "./bar/widgetBarStackMoreShowChart.vue";
-import widgetBarLineSingleChart from "./barline/widgetBarLineSingleChart.vue";
+import widgetBarLineSingleChart from "./barline/widgetBarLineSingleChart";
 
 export default {
   name: "Widget",
@@ -95,6 +97,7 @@ export default {
     widgetVideoMonitor,
     WidgetIframe,
     widgetCalendar,
+    widgetPagination,
     widgetBarchart,
     widgetGradientColorBarchart,
     widgetLinechart,
@@ -127,6 +130,7 @@ export default {
     widgetChinaMap,
     widgetGlobalMap,
     widgetScatter,
+    widgetQuadrantScatter,
     widgetBarStackMoreShowChart,
     widgetBarLineSingleChart
   },
@@ -239,7 +243,7 @@ export default {
      * 接收 Tabs 内部子组件发出的激活事件，并转发给设计器主页面
      */
     handleChildActivated(payload) {
-      console.log('handleChildActivated in widget.vue:', payload);
+      // console.log('handleChildActivated in widget.vue:', payload);
       const info = Object.assign({}, payload || {});
       if (info.rootWidgetIndex === undefined || info.rootWidgetIndex === null) {
         info.rootWidgetIndex = this.index;
diff --git a/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue b/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
index e91a3ac..2e0a3e3 100644
--- a/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
+++ b/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
@@ -232,6 +232,13 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    // 清除定时器，避免内存泄漏
+    if (this.flagInter) {
+      clearInterval(this.flagInter);
+      this.flagInter = null;
+    }
+  },
 };
 </script>
 <style scoped lang="scss">
diff --git a/src/views/bigscreenDesigner/viewer/drillDrownView.vue b/src/views/bigscreenDesigner/viewer/drillDrownView.vue
index ac9d1e4..f24318d 100644
--- a/src/views/bigscreenDesigner/viewer/drillDrownView.vue
+++ b/src/views/bigscreenDesigner/viewer/drillDrownView.vue
@@ -62,6 +62,17 @@ export default {
     this.getData();
     window.onresize=this.Debounce(this.setScale,500);
   },
+  beforeDestroy() {
+    console.log('[DrillDrownView] beforeDestroy 开始清理资源');
+    
+    // 清除定时刷新定时器
+    if (this.dashboard && this.dashboard.refreshSeconds > 0) {
+      // 页面卸载时浏览器会自动清理，但显式处理更规范
+    }
+    
+    console.log('[DrillDrownView] 资源清理完成');
+  },
+
   methods: {
     async getData() {
       const data = {dashboard:{...this.viewData.dashboard,...this.viewData},widgets:null};
diff --git a/src/views/bigscreenDesigner/viewer/index.vue b/src/views/bigscreenDesigner/viewer/index.vue
index a36c101..9b8e7ed 100644
--- a/src/views/bigscreenDesigner/viewer/index.vue
+++ b/src/views/bigscreenDesigner/viewer/index.vue
@@ -7,19 +7,24 @@
  !-->
 <template>
   <div class="layout">
-    <div :style="bigScreenStyle">
-      <widget
-        v-for="(widget, index) in widgets"
-        :key="index"
-        v-model="widget.value"
-        :index="index"
-        :type="widget.type"
-        @oepnTheDrillView="oepnTheDrillView"
-      />
+    <div :style="bigScreenStyle" class="drillDrownViewLayout">
+       <!-- 关键优化 1: v-if 包裹整个渲染区域，避免空数据时渲染 -->
+      <template v-if="dataLoaded">
+        <!-- 关键优化 2: 分批渲染，避免一次性创建过多 DOM 节点 -->
+        <div v-for="(batch, batchIndex) in renderBatches" :key="'batch-' + batchIndex">
+          <widget
+            v-for="(widget, index) in batch"
+            :key="widget.originalIndex"
+            v-model="widget.value"
+            :index="widget.originalIndex"
+            :type="widget.type"
+            :ispreview="true"
+            @oepnTheDrillView="oepnTheDrillView"
+          />
+        </div>
+      </template>
     </div>
-    <el-dialog 
-      :title="''"
-       class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
+    <el-dialog  :title="''" class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
       <drill-drown-view :screenData="screenData"></drill-drown-view>
     </el-dialog>
   </div>
@@ -46,55 +51,118 @@ export default {
           dashboard: {  },
           widgets: []
       },
-      visiableDrillView:false
+      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() {
-      const reportCode = this.$route.query.reportCode;
-      const { code, data } = await detailDashboard(reportCode);
-      if (code != 200) return;
-      this.dashboard=data.dashboard||{};
-      const equipment = document.body.clientWidth;
-      const ratioEquipment = equipment / data.dashboard.width;
-      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}, ${ratioEquipment})`,
-        "transform-origin": "0 0"
-      };
-      data.dashboard.widgets.forEach((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
-          })
+      try {
+        const reportCode = this.$route.query.reportCode;
+        const { code, data } = await detailDashboard(reportCode);
+        if (code != 200) {
+          console.error('[Viewer] 获取大屏数据失败:', code);
+          return;
         }
-      })
-      this.widgets = data.dashboard.widgets;
-
-      // 定时刷新
-      if(data.dashboard.refreshSeconds>0) {
-        setTimeout(function(){ window.location.reload(); }, data.dashboard.refreshSeconds*1000);
+        
+        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)=>{
@@ -112,20 +180,59 @@ export default {
     },
     setScale(){
       const scale=this.getScale();
-      this.bigScreenStyle.transform='scale('+scale.scalex+','+scale.scaley+')'
+      // 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 = 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>
@@ -133,13 +240,13 @@ export default {
 <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);
diff --git a/src/views/excelreport/designer/drag.js b/src/views/excelreport/designer/drag.js
index 6ef8216..8f7cba9 100644
--- a/src/views/excelreport/designer/drag.js
+++ b/src/views/excelreport/designer/drag.js
@@ -115,7 +115,7 @@ Vue.directive('dragx', (el, binding, vnode) => {
         let deltY = targetPageY - data.startY - data.deltY;
         let newLeft = parseInt(getStyleNumValue('left') || '0', 10) + deltX;
         let newTop = parseInt(getStyleNumValue('top') || '0', 10) + deltY;
-        console.log(window.innerWidth + data.borderLeft + data.borderRight - data.width - cfg.resizeEdge)
+        // console.log(window.innerWidth + data.borderLeft + data.borderRight - data.width - cfg.resizeEdge)
         if (newLeft <= 0) {
           newLeft = 0
         }
diff --git a/src/views/excelreport/designer/index.vue b/src/views/excelreport/designer/index.vue
index 845cdeb..ecb9a5c 100644
--- a/src/views/excelreport/designer/index.vue
+++ b/src/views/excelreport/designer/index.vue
@@ -315,7 +315,7 @@ export default {
         this.reportId = data.id;
       }
       this.sheetData = data == null ? [{}] : JSON.parse(data.jsonStr);
-      console.log(this.sheetData);
+      // console.log(this.sheetData);
       this.createSheet();
       if (data != null) {
         if (data.setCodes != null && data.setCodes !== "") {
@@ -424,7 +424,7 @@ export default {
           options.title= exportJson.info.name;
           options.userInfo= exportJson.info.name.creator;
         }
-        console.log(options);
+        // console.log(options);
         that.luckysheet.create(options);
       });
     },
@@ -432,8 +432,8 @@ export default {
       this.setCode = setCode;
       let fieldLabel = evt.item.innerText; // 列名称
       this.draggableFieldLabel = "#{" + this.setCode + "." + fieldLabel + "}";
-      console.log("evt", evt);
-      console.log("draggableFieldLabel", this.draggableFieldLabel);
+      // console.log("evt", evt);
+      // console.log("draggableFieldLabel", this.draggableFieldLabel);
     },
     async loadDataSet() {
       const { code, data } = await queryAllDataSet();
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index deacd9b..b5eb06c 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -161,13 +161,13 @@ export default {
        debugger
         //获取登录人
         let user = getAccessUser()
-        console.log(user.loginName)
+        // console.log(user.loginName)
         debugger
    
 
           this.outlogincasapi();
        debugger
- console.log(user.loginName)
+//  console.log(user.loginName)
         // sessionStorage.clear();
         // localStorage.clear();
         // this.$router.push("/login");
diff --git a/src/views/login.vue b/src/views/login.vue
index d3864a1..0e4b79b 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -144,22 +144,22 @@ export default {
   mounted() {
     this.handleLoginFocus();
     //获取url传参 ticket url
-     const ticket = this.$route.query.ticket;
-     let token = getToken();
-     console.log(ticket);
-     console.log(token);
-     if (ticket == undefined && token == null) {
-       //跳转统一身份认证
-       var isTs = true;
-       if (isTs) {
+    const ticket = this.$route.query.ticket;
+    let token = getToken();
+    // console.log(ticket);
+    // console.log(token);
+    // this.logincasapi();
+    if (ticket == undefined && token == null) {
+      //跳转统一身份认证
+      var isTs = true;
+      if (isTs) {
           window.location.href = 'http://192.168.1.241/login?redirect=/lig/oauth2/oauth2/application&appid=330b4ecb60c9a6802b957fe1e5a5ecd3&url=http%3A%2F%2F192.168.1.241%3A8080%2F%23%2Flogin'+(this.redirect?'&ssUrl='+this.redirect:'');
           // window.location.href = 'http://localhost/login?redirect=/lig/oauth2/oauth2/application&appid=330b4ecb60c9a6802b957fe1e5a5ecd3&url=http%3A%2F%2Flocalhost%3A9528%2F%23%2Flogin'+(this.redirect?'&ssUrl='+this.redirect:'');
-   
-       }
-     } else if (ticket != undefined && token == null) {
-       //请求登录
-       this.logincasapi();
-     } else {
+      }
+    } else if (ticket != undefined && token == null) {
+        //请求登录
+        this.logincasapi();
+    } else {
 
     }
   },
diff --git a/src/views/reportManage/components/copyDialog.vue b/src/views/reportManage/components/copyDialog.vue
index 9c5275a..341e752 100644
--- a/src/views/reportManage/components/copyDialog.vue
+++ b/src/views/reportManage/components/copyDialog.vue
@@ -66,7 +66,7 @@ export default {
     save() {
       this.$refs.ruleForm.validate(async valid => {
         if (valid) {
-          console.log(this.form);
+          // console.log(this.form);
           const { code } = await reportCopy(this.form);
           if (code != "200") {
             return;
diff --git a/src/views/reportManage/index.vue b/src/views/reportManage/index.vue
index c4d7a00..af8705c 100644
--- a/src/views/reportManage/index.vue
+++ b/src/views/reportManage/index.vue
@@ -313,7 +313,7 @@ export default {
         // fieldVal input最新值
         // fieldExtend 对于select型的扩展值
         formChange: (formData, fieldName, fieldVal, fieldExtend) => {
-          console.log(formData);
+          // console.log(formData);
           if (fieldName == "reportImage") {
             if (fieldVal.length > 0) {
               formData["reportImage"] = fieldVal && fieldVal[0].url;
diff --git a/src/views/resultset/components/EditDataSet.vue b/src/views/resultset/components/EditDataSet.vue
index 5b7b1ee..44e81cb 100644
--- a/src/views/resultset/components/EditDataSet.vue
+++ b/src/views/resultset/components/EditDataSet.vue
@@ -707,7 +707,7 @@ export default {
     async handleClickTabs(tab, event) {
       if (this.setType == "http") {
         //针对http数据源
-        console.log("http数据集" + this.httpForm);
+        // console.log("http数据集" + this.httpForm);
         this.formData.dynSentence = JSON.stringify(this.httpForm);
       }
       if (tab.paneName == "third") {
diff --git a/src/views/screenDesigner/components/contentMenu.vue b/src/views/screenDesigner/components/contentMenu.vue
index 67a9a8a..c431fd6 100644
--- a/src/views/screenDesigner/components/contentMenu.vue
+++ b/src/views/screenDesigner/components/contentMenu.vue
@@ -51,7 +51,7 @@ export default {
         type: "warning"
       })
         .then(() => {
-          console.log(this.rightClickIndex);
+          // console.log(this.rightClickIndex);
           this.widgets.splice(this.rightClickIndex, 1);
           this.$message({
             type: "success",
diff --git a/src/views/screenDesigner/components/customUpload.vue b/src/views/screenDesigner/components/customUpload.vue
index 251fdfe..78cbd36 100644
--- a/src/views/screenDesigner/components/customUpload.vue
+++ b/src/views/screenDesigner/components/customUpload.vue
@@ -52,7 +52,7 @@ export default {
     },
     upload(imgUrl) {
       let that = this;
-      console.log(that.headers);
+      // console.log(that.headers);
       let formdata = new FormData();
       formdata.append("file", imgUrl);
       axios
diff --git a/src/views/screenDesigner/components/dynamicComponents.vue b/src/views/screenDesigner/components/dynamicComponents.vue
index 684f53f..d123aa5 100644
--- a/src/views/screenDesigner/components/dynamicComponents.vue
+++ b/src/views/screenDesigner/components/dynamicComponents.vue
@@ -96,13 +96,13 @@ export default {
   methods: {
     async loadDataSet() {
       const { code, data } = await queryAllDataSet();
-      this.dataSet = data;
+      this.dataSet = data || [];
       if (code != "200") return;
     },
     async selectDataSet() {
       const { code, data } = await detailBysetId(this.dataSetValue);
-      this.userNameList = data.dataSetParamDtoList;
-      this.setParamList = data.setParamList;
+      this.userNameList = data ? data.dataSetParamDtoList : [];
+      this.setParamList = data ? data.setParamList : [];
       if (code != "200") return;
     },
     async saveDataBtn() {
@@ -129,14 +129,17 @@ export default {
     },
     // 数据集回显
     async echoDataSet(val) {
-      if (!val) return;
+      if (!val || typeof val !== 'object') return;
       const setCode = val.setCode;
 
       await this.loadDataSet();
 
-      this.dataSetValue = this.dataSet.filter(
+      const dd = this.dataSet.filter(
         el => setCode == el.setCode
-      )[0].id;
+      );
+      if (dd && dd.length > 0) {
+        this.dataSetValue = dd[0].id;
+      }
 
       await this.selectDataSet();
       this.echoDynamicData(val);
diff --git a/src/views/screenDesigner/components/dynamicForm.vue b/src/views/screenDesigner/components/dynamicForm.vue
index 17cca03..6b73e7c 100644
--- a/src/views/screenDesigner/components/dynamicForm.vue
+++ b/src/views/screenDesigner/components/dynamicForm.vue
@@ -307,12 +307,16 @@ export default {
         hintOptions: {
           completeSingle: true // 当匹配只有一项的时候是否自动补全
         }
-      }
+      },
+      changeTimer: null, // 【关键优化】防抖定时器
     };
   },
   watch: {
     value(newValue, oldValue) {
-      this.formData = newValue || {};
+      // 【关键优化】只在初始化或 value 引用真正变化时才更新 formData
+      if (!oldValue || newValue !== oldValue) {
+        this.formData = newValue || {};
+      }
     },
     options(val) {
       this.setDefaultValue();
@@ -326,27 +330,44 @@ export default {
   mounted() {},
   methods: {
     onJsonChange(val) {
-      console.log(val);
+      // console.log(val);
     },
     onJsonSave(val) {
-      console.log(val);
+      // console.log(val);
     },
     // 无论哪个输入框改变 都需要触发事件 将值回传
     changed(val, key) {
-      if (val.extend) {
-        this.$set(this.formData, key, val.value);
-      } else {
-        this.$set(this.formData, key, val);
+      // console.log(val);
+      // console.log(key);
+      
+      // 【关键优化】使用防抖，避免配置修改时频繁触发上层组件更新
+      if (this.changeTimer) {
+        clearTimeout(this.changeTimer);
       }
-      this.$emit("onChanged", this.formData);
-      // key为当前用户操作的表单组件
-      for (let i = 0; i < this.options.length; i++) {
-        let item = this.options[i];
-        if (item.relactiveDom == key) {
-          this.inputShow[item.name] = val == item.relactiveDomValue;
-          this.inputShow = Object.assign({}, this.inputShow);
+      
+      this.changeTimer = setTimeout(() => {
+        // 处理 dynamicComponents 组件返回的 params 对象
+        if (val && val.chartType && val.setCode) {
+          // dynamicComponents 返回的是完整的 params 对象
+          // 需要同时设置 dynamicData（供 mixin 的 queryEchartsData 使用）和 chartProperties
+          this.$set(this.formData, 'dynamicData', val);
+          this.$set(this.formData, 'chartProperties', val.chartProperties || {});
+        } else if (val.extend) {
+          this.$set(this.formData, key, val.value);
+        } else {
+          this.$set(this.formData, key, val);
         }
-      }
+        this.$emit("onChanged", this.formData);
+        
+        // 处理关联显示逻辑
+        for (let i = 0; i < this.options.length; i++) {
+          let item = this.options[i];
+          if (item.relactiveDom == key) {
+            this.inputShow[item.name] = val == item.relactiveDomValue;
+            this.inputShow = Object.assign({}, this.inputShow);
+          }
+        }
+      }, 100); // 100ms 防抖
     },
     saveData() {
       this.$emit("onChanged", this.formData);
@@ -403,6 +424,13 @@ export default {
     isShowForm(val, type) {
       return Object.prototype.toString.call(val) == type;
     }
+  },
+  beforeDestroy() {
+    // 【关键优化】清理防抖定时器，避免内存泄漏
+    if (this.changeTimer) {
+      clearTimeout(this.changeTimer);
+      this.changeTimer = null;
+    }
   }
 };
 </script>
diff --git a/src/views/screenDesigner/index备份.vue b/src/views/screenDesigner/index备份.vue
index 6ed73e1..d794d88 100644
--- a/src/views/screenDesigner/index备份.vue
+++ b/src/views/screenDesigner/index备份.vue
@@ -475,7 +475,7 @@ export default {
     },
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
-      console.log(obj);
+      // console.log(obj);
       this.screenCode = "";
       if (typeof obj == "number") {
         this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
@@ -636,7 +636,7 @@ export default {
     },
     // 导出
     async exportDashboard(val) {
-      console.log(val);
+      // console.log(val);
       const fileName = this.$route.query.reportCode + ".zip";
 
       const param = {
diff --git a/src/views/screenDesigner/layout/middleScreen.vue b/src/views/screenDesigner/layout/middleScreen.vue
index 6ee0430..b81659c 100644
--- a/src/views/screenDesigner/layout/middleScreen.vue
+++ b/src/views/screenDesigner/layout/middleScreen.vue
@@ -178,7 +178,7 @@ export default {
     },
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
-      console.log(obj);
+      // console.log(obj);
       this.screenCode = "";
       if (typeof obj == "number") {
         this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
diff --git a/src/views/screenDesigner/util/screen.js b/src/views/screenDesigner/util/screen.js
index 01196cb..ef32151 100644
--- a/src/views/screenDesigner/util/screen.js
+++ b/src/views/screenDesigner/util/screen.js
@@ -15,7 +15,7 @@ export const handlerLayerWidget = (val, getToolByCode) => {
 }
 
 export const handleBigScreen = (data, getToolByCode, callBcak) => {
-  console.log('aa', getToolByCode("screen"))
+  // console.log('aa', getToolByCode("screen"))
   const optionScreen = getToolByCode("screen").options;
   const setup = optionScreen.setup;
   for (const key in data) {
diff --git a/src/views/screenDesigner/widget/texts/widgetTable.vue b/src/views/screenDesigner/widget/texts/widgetTable.vue
index fc2afd7..cf78748 100644
--- a/src/views/screenDesigner/widget/texts/widgetTable.vue
+++ b/src/views/screenDesigner/widget/texts/widgetTable.vue
@@ -69,7 +69,7 @@ export default {
   },
   computed: {
     styleObj() {
-      console.log(this.optionsSetUp);
+      // console.log(this.optionsSetUp);
       const allStyle = this.optionsPosition;
       return {
         position: this.ispreview ? "absolute" : "static",
@@ -209,6 +209,34 @@ export default {
         styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
       }
       return styleJson;
+    },
+    beforeDestroy() {
+      console.log('[WidgetTable] beforeDestroy 开始清理资源');
+      
+      // 清除定时器
+      if (this.flagInter) {
+        clearInterval(this.flagInter);
+        this.flagInter = null;
+        console.log('[WidgetTable] 已清除动态数据定时器');
+      }
+      
+      // 清空大型数据引用
+      this.header = [];
+      this.list = [];
+      this.options = {
+        titCell: ".hd ul",
+        mainCell: ".bd ul",
+        effect: "topLoop",
+        autoPage: true,
+        autoPlay: true,
+        vis: 5,
+        rowHeight: "50px"
+      };
+      this.optionsSetUp = {};
+      this.optionsPosition = {};
+      this.optionsData = {};
+      
+      console.log('[WidgetTable] 资源清理完成');
     }
   }
 };
diff --git a/src/views/screenDesigner/widget/texts/widgetTime.vue b/src/views/screenDesigner/widget/texts/widgetTime.vue
index 1c3d891..afe5085 100644
--- a/src/views/screenDesigner/widget/texts/widgetTime.vue
+++ b/src/views/screenDesigner/widget/texts/widgetTime.vue
@@ -17,7 +17,7 @@ export default {
   },
   computed: {
     transStyle() {
-      console.log(this.objToOne(this.options));
+      // console.log(this.objToOne(this.options));
       return this.objToOne(this.options);
     },
     styleColor() {