!126 update 1.1.0

Merge pull request !126 from Foming/dev

doc/docs/.vuepress/config.js

@@ -34,6 +34,7 @@ module.exports = {
                     collapsable: false,
                     children: [
                         {title: 'V1.0.0', path: '/guide/releases/1.0.0'},
+                        {title: 'V1.1.0', path: '/guide/releases/1.1.0'},
                     ]
                 },
                 {

doc/docs/guide/charts.md

@@ -54,6 +54,20 @@
 
 当超链接和视频链接无效的时候，请尝试使用内联框架。 <br>
 
+## 样式组件
+
+### 边框
+
+![img42](../picture/charts/img_42.png) <br>
+
+### 装饰
+
+![img43](../picture/charts/img_43.png) <br>
+
+### 装饰饼图
+
+![img12](../picture/charts/img_12.png) <br>
+
 ## 柱状图
 
 ### 柱状图
@@ -265,13 +279,6 @@
 
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
-## 装饰图
-
-### 装饰饼图
-
-装饰用，可单独使用或者配合文本框等图表组件来使整个大屏立体、丰满。<br>
-![img12](../picture/charts/img_12.png) <br>
-
 ## 词云图
 
 ### 词云图

doc/docs/guide/chartsLinkage.md

@@ -1,12 +1,38 @@
 ## 简要说明
 
 现有系统联动的本质是数据集查询参数“示例值”的替换， 现在联动有两种。<br>
+除下文介绍的示例外，还可去数据集、体验地址去查看示例。<br>
 
 - 表单联动 <br>
   目前支持的有下拉框、时间筛选器。<br>
+  V1.0.0 支持被联动的组件有：<br>
+    - 文本栏 - V1.1.0
+      - 文本
+      - 滚动文本
+      - 表格
+    - 柱状图（包含全部）
+    - 折线图（包含全部）
+    - 柱线图（包含全部）
+    - 饼图（包含全部）
+    - 漏斗图（包含全部）
+    - 百分比（包含全部）-V1.1.0
+    - 中国地图（包含全部）
+    - 词云图（包含全部）-V1.1.0
+    - 热力图（包含全部）
+    - 雷达图（包含全部）
+    - 刻度尺（包含全部）-V1.1.0
 
 - 图表联动：<br>
   目前联动主要集中在柱状图、折线图、饼图等这种二维图表，二维图表是指图表只支持2个字段的数据集，当然并不是说需要3个字段的堆叠图（柱状/折线）不支持联动，而是这种三维图表去联动二维图表会带来一些问题，反之二维的去联动三维的同样存在问题，因此目前源代码中只添加了部分二维图表的联动。<br>
+  V1.0.0 支持联动的组件有：<br>
+    - 柱状图
+        - 柱状图
+        - 柱状图-渐变色
+    - 折线图
+        - 折线图
+    - 饼图
+        - 饼图
+        - 南丁格尔玫瑰图
 
 **注：**
 没有多级联动，联动都是一对一的。例如，时间筛选器绑定了A柱图，A柱图绑定了B饼图，当使用时间筛选器更改时间后，只会更新绑定的A柱图，A绑定的B饼图并不会更新数据。<br>

doc/docs/guide/dataset.md

@@ -51,26 +51,54 @@
 
 自定义JS，这里的JS是java的scriptengine执行的，支持ES5的写法。
 
+- 示例一 <br>
+  返回yyyyy-MM-dd类型的当前时间
+
 ```js
-//返回yyyyy-MM-dd类型的当前时间
-function verification(data){
-	//自定义脚本内容
-	//获取当前时间
-	var date = new Date();
-	var year = date.getFullYear();
-	var month = date.getMonth() + 1;
-	var day = date.getDate();
-	if (month < 10) {
-		month = "0" + month;
-	}
-	if (day < 10) {
-		day = "0" + day;
-	}
-	var nowDate = year + "-" + month + "-" + day;
-	return nowDate;
+// 返回yyyyy-MM-dd类型的当前时间
+function verification(data) {
+    //自定义脚本内容
+    //获取当前时间
+    var date = new Date();
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    if (month < 10) {
+        month = "0" + month;
+    }
+    if (day < 10) {
+        day = "0" + day;
+    }
+    var nowDate = year + "-" + month + "-" + day;
+    return nowDate;
 }
 ```
 
+- 示例二 <br>
+  不传参则查询全部
+
+```sql
+// sql可以这么写
+SELECT DATE_FORMAT(create_time, '%Y-%m-%d') create_time, sum(nums) sum_nums
+FROM aj_report_city ${city_name}
+group by create_time;
+```
+
+```js
+// 不传参则查询全部
+function verification(data) {
+    // 获取示例值
+    data = data.sampleItem;
+    if (data == null || data == '') {
+        return ''
+    }
+    data = 'where city_name = "' + data + '" '
+    return data;
+}
+```
+
+**注：** 当前V1.0.0版本示例值是不可为空的，所以实际使用可能会麻烦点
+
 ### 数据转换
 
 数据转换是在执行完 sql 之后进行的数据清洗操作。
@@ -82,26 +110,26 @@ function verification(data){
 
 ```js
 // 根据sql查询出的结果进行数据清洗
-function dataTransform(data){
-	//自定义脚本内容
-	
-	//1.遍历测试预览中的java.util.ArrayList<java.lang.Object>
-	for(j = 0, len = data.length; j < len; j++){
-		//获取一行数据
-		var row = data[j]
-		//比如对brand字段进行拆分,例如A-100，B-50
-		var brand = row['brand']
-		var split = brand.split('-')
-		//新增两个字段
-		var model = split[0]
-		var series = split[1]
-
-		//对原始对象赋值
-		data[j]['model'] = model
-		data[j]['series'] = series
-
-	}
-	return data;
+function dataTransform(data) {
+    //自定义脚本内容
+
+    //1.遍历测试预览中的java.util.ArrayList<java.lang.Object>
+    for (j = 0, len = data.length; j < len; j++) {
+        //获取一行数据
+        var row = data[j]
+        //比如对brand字段进行拆分,例如A-100，B-50
+        var brand = row['brand']
+        var split = brand.split('-')
+        //新增两个字段
+        var model = split[0]
+        var series = split[1]
+
+        //对原始对象赋值
+        data[j]['model'] = model
+        data[j]['series'] = series
+
+    }
+    return data;
 }
 ```
 

doc/docs/guide/releases/1.1.0.md

@@ -0,0 +1,24 @@
+## 注意事项
+
+- 之前版本更新至本版本时，可能会遇到图表不显示静态、动态数据，需对该图表重新配置；如果已对旧版本进行二次开发，请谨慎更新。<br>
+  跨版本更新可查对应版本的[releases](https://gitee.com/anji-plus/report/releases)。<br>
+
+## 新增/优化
+
+- 1、引入datav依赖，新增样式组件，装饰边框+装饰图 贡献人：wenqindong@wenqindong
+- 2、大屏图表-文本组件增加对多行的支持 贡献人：StefanZhu@stefanZhu
+- 3、Excel报表支持pdf导出 贡献人：陈旭光@chen-xuguang
+- 4、大屏文本栏组件-文本、滚动文本、表格支持被联动
+- 5、大屏刻度尺组件-被联动，词云组件-被联动，仪表盘被联动
+
+## 修复
+
+- 1、部分图表的副标题和数值设定颜色冲突
+- 2、当数据集第一条数据中存在null值时被自动过滤导致未能解析
+- 3、大屏图表-仪表盘的配置项冲突重复
+- 4、大屏图片-饼图图例位置不正确问题
+- 5、装饰饼图不显示问题
+
+## 其他
+
+- 1、文档更新

report-core/pom.xml

@@ -166,6 +166,18 @@
             <version>3.0.9</version>
         </dependency>
 
+        <dependency>
+            <groupId>org.xhtmlrenderer</groupId>
+            <artifactId>core-renderer</artifactId>
+            <version>R8</version>
+        </dependency>
+
+        <dependency>
+            <groupId>com.itextpdf.tool</groupId>
+            <artifactId>xmlworker</artifactId>
+            <version>5.5.13</version>
+        </dependency>
+
     </dependencies>
 
     <developers>

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/service/impl/DataSetServiceImpl.java

@@ -1,8 +1,11 @@
 
 package com.anjiplus.template.gaea.business.modules.dataset.service.impl;
 
+import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
+import com.alibaba.fastjson.parser.Feature;
+import com.alibaba.fastjson.serializer.SerializerFeature;
 import com.anji.plus.gaea.constant.Enabled;
 import com.anji.plus.gaea.curd.mapper.GaeaBaseMapper;
 import com.anji.plus.gaea.exception.BusinessExceptionBuilder;
@@ -27,6 +30,7 @@ import com.anjiplus.template.gaea.business.util.JdbcConstants;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
+import com.fasterxml.jackson.annotation.JsonFormat;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.BeanUtils;
@@ -39,10 +43,10 @@ import java.util.*;
 import java.util.stream.Collectors;
 
 /**
-* @desc DataSet 数据集服务实现
-* @author Raod
-* @date 2021-03-18 12:11:31.150755900
-**/
+ * @author Raod
+ * @desc DataSet 数据集服务实现
+ * @date 2021-03-18 12:11:31.150755900
+ **/
 @Service
 //@RequiredArgsConstructor
 @Slf4j
@@ -62,7 +66,7 @@ public class DataSetServiceImpl implements DataSetService {
 
     @Override
     public GaeaBaseMapper<DataSet> getMapper() {
-      return dataSetMapper;
+        return dataSetMapper;
     }
 
     /**
@@ -113,9 +117,9 @@ public class DataSetServiceImpl implements DataSetService {
 
         List<DataSetTransform> dataSetTransformList = dataSetTransformService.list(
                 new QueryWrapper<DataSetTransform>()
-                    .lambda()
-                    .eq(DataSetTransform::getSetCode, setCode)
-                    .orderByAsc(DataSetTransform::getOrderNum)
+                        .lambda()
+                        .eq(DataSetTransform::getSetCode, setCode)
+                        .orderByAsc(DataSetTransform::getOrderNum)
         );
         List<DataSetTransformDto> dataSetTransformDtoList = new ArrayList<>();
         dataSetTransformList.forEach(dataSetTransform -> {
@@ -131,7 +135,7 @@ public class DataSetServiceImpl implements DataSetService {
                 JSONObject jsonObject = jsonArray.getJSONObject(0);
                 dto.setSetParamList(jsonObject.keySet());
             } catch (Exception e) {
-                log.error("error",e);
+                log.error("error", e);
             }
         }
         return dto;
@@ -159,7 +163,7 @@ public class DataSetServiceImpl implements DataSetService {
                     Object o = objects.get(0);
                     objects = new JSONArray();
                     objects.add(o);
-                    dataSet.setCaseResult(objects.toJSONString());
+                    dataSet.setCaseResult(JSON.toJSONString(objects, SerializerFeature.WriteMapNullValue));
                 }
             } catch (Exception e) {
                 log.info("结果集只保留一行数据失败...{}", e.getMessage());
@@ -180,7 +184,7 @@ public class DataSetServiceImpl implements DataSetService {
      * @param dto
      */
     @Override
-    @Transactional
+    @Transactional(rollbackFor = Exception.class)
     public void updateSet(DataSetDto dto) {
         List<DataSetParamDto> dataSetParamDtoList = dto.getDataSetParamDtoList();
         List<DataSetTransformDto> dataSetTransformDtoList = dto.getDataSetTransformDtoList();
@@ -194,7 +198,7 @@ public class DataSetServiceImpl implements DataSetService {
                     Object o = objects.get(0);
                     objects = new JSONArray();
                     objects.add(o);
-                    dataSet.setCaseResult(objects.toJSONString());
+                    dataSet.setCaseResult(JSON.toJSONString(objects, SerializerFeature.WriteMapNullValue));
                 }
             } catch (Exception e) {
                 log.info("结果集只保留一行数据失败...{}", e.getMessage());
@@ -266,12 +270,12 @@ public class DataSetServiceImpl implements DataSetService {
             String body = JSONObject.parseObject(dynSentence).getString("body");
             if (StringUtils.isNotBlank(body)) {
                 dynSentence = body;
-            }else {
+            } else {
                 dynSentence = "{}";
             }
 
-        }else {
-            dataSource  = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode());
+        } else {
+            dataSource = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode());
         }
 
         //3.参数替换
@@ -322,12 +326,12 @@ public class DataSetServiceImpl implements DataSetService {
             String body = JSONObject.parseObject(dynSentence).getString("body");
             if (StringUtils.isNotBlank(body)) {
                 dynSentence = body;
-            }else {
+            } else {
                 dynSentence = "{}";
             }
 
-        }else {
-          dataSource  = dataSourceService.selectOne("source_code", sourceCode);
+        } else {
+            dataSource = dataSourceService.selectOne("source_code", sourceCode);
         }
 
         //3.参数替换
@@ -374,7 +378,7 @@ public class DataSetServiceImpl implements DataSetService {
         return dataSetMapper.selectList(wrapper);
     }
 
-    public void dataSetParamBatch(List<DataSetParamDto> dataSetParamDtoList,String setCode){
+    public void dataSetParamBatch(List<DataSetParamDto> dataSetParamDtoList, String setCode) {
         dataSetParamService.delete(
                 new QueryWrapper<DataSetParam>()
                         .lambda()
@@ -396,7 +400,7 @@ public class DataSetServiceImpl implements DataSetService {
 
     }
 
-    public void dataSetTransformBatch(List<DataSetTransformDto> dataSetTransformDtoList,String setCode){
+    public void dataSetTransformBatch(List<DataSetTransformDto> dataSetTransformDtoList, String setCode) {
         dataSetTransformService.delete(
                 new QueryWrapper<DataSetTransform>()
                         .lambda()
@@ -420,10 +424,11 @@ public class DataSetServiceImpl implements DataSetService {
 
     /**
      * dataSetParamDtoList转map
+     *
      * @param dataSetParamDtoList
      * @return
      */
-    public Map<String, Object> setContextData(List<DataSetParamDto> dataSetParamDtoList){
+    public Map<String, Object> setContextData(List<DataSetParamDto> dataSetParamDtoList) {
         Map<String, Object> map = new HashMap<>();
         if (null != dataSetParamDtoList && dataSetParamDtoList.size() > 0) {
             dataSetParamDtoList.forEach(dataSetParamDto -> map.put(dataSetParamDto.getParamName(), dataSetParamDto.getSampleItem()));

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/dto/CellStyleDto.java

@@ -0,0 +1,20 @@
+package com.anjiplus.template.gaea.business.modules.reportexcel.controller.dto;
+
+import lombok.Data;
+
+/**
+ * @author chenxg
+ * @date 2023/8/1 10:37
+ */
+@Data
+public class CellStyleDto {
+    /**
+     * 格式名称
+     */
+    private String fa;
+
+    /**
+     * 格式类型
+     */
+    private String t;
+}

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/dto/CommentDto.java

@@ -0,0 +1,42 @@
+package com.anjiplus.template.gaea.business.modules.reportexcel.controller.dto;
+
+
+import lombok.Data;
+
+/**
+ * @author chenxg
+ * @date 2023/8/1 10:37
+ */
+@Data
+public class CommentDto {
+    /**
+     * 批注框左边距
+     */
+    private int left;
+
+    /**
+     * 批注框上边距
+     */
+    private int top;
+
+    /**
+     * 批注框宽度
+     */
+    private int width;
+
+    /**
+     * 批注框高度
+     */
+    private int height;
+
+    /**
+     * 批注内容
+     */
+    private String value;
+
+    /**
+     * 批注框是否显示
+     */
+    private boolean isshow;
+}
+

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/dto/ReportExcelDto.java

@@ -5,6 +5,7 @@ import com.anji.plus.gaea.curd.dto.GaeaBaseDTO;
 import lombok.Data;
 
 import java.io.Serializable;
+import java.util.List;
 
 
 /**
@@ -58,4 +59,9 @@ public class ReportExcelDto extends GaeaBaseDTO implements Serializable {
      */
     private String exportType;
 
+    /**
+     * 报表总体数据
+     */
+    private String rowDatas;
+
 }

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/dto/ReportExcelStyleDto.java

@@ -0,0 +1,97 @@
+
+package com.anjiplus.template.gaea.business.modules.reportexcel.controller.dto;
+
+import com.anji.plus.gaea.curd.dto.GaeaBaseDTO;
+import lombok.Data;
+
+import java.io.Serializable;
+
+
+/**
+ * @author chenxg
+ * @date 2023/8/1 10:37
+ */
+@Data
+public class ReportExcelStyleDto extends GaeaBaseDTO implements Serializable {
+    /**
+     * 单元格值格式
+     */
+    private CellStyleDto ct;
+
+    /**
+     * 内容的原始值
+     */
+    private String v;
+
+    /**
+     * 内容的显示值
+     */
+    private String m;
+
+    /**
+     * 背景颜色
+     */
+    private String bg;
+
+    /**
+     * 字体编号
+     */
+    private String ff;
+
+    /**
+     * 字体颜色
+     */
+    private String fc;
+
+    /**
+     * 是否加粗
+     */
+    private boolean bl;
+
+    /**
+     * 是否斜体
+     */
+    private boolean it;
+
+    /**
+     * 字体大小
+     */
+    private int fs;
+
+    /**
+     * 是否删除线
+     */
+    private boolean cl;
+
+    /**
+     * 水平对齐方式
+     */
+    private int ht;
+
+    /**
+     * 垂直对齐方式
+     */
+    private int vt;
+
+    /**
+     * 文字旋转角度
+     */
+    private int tr;
+
+    /**
+     * 是否自动换行
+     */
+    private int tb;
+
+    /**
+     * 批注信息
+     */
+    private CommentDto ps;
+
+    /**
+     * 单元格公式
+     */
+    private String f;
+
+
+}

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/service/impl/ReportExcelServiceImpl.java

@@ -19,29 +19,40 @@ import com.anjiplus.template.gaea.business.modules.file.service.GaeaFileService;
 import com.anjiplus.template.gaea.business.modules.report.dao.ReportMapper;
 import com.anjiplus.template.gaea.business.modules.report.dao.entity.Report;
 import com.anjiplus.template.gaea.business.modules.reportexcel.controller.dto.ReportExcelDto;
+import com.anjiplus.template.gaea.business.modules.reportexcel.controller.dto.ReportExcelStyleDto;
 import com.anjiplus.template.gaea.business.modules.reportexcel.dao.ReportExcelMapper;
 import com.anjiplus.template.gaea.business.modules.reportexcel.dao.entity.ReportExcel;
 import com.anjiplus.template.gaea.business.modules.reportexcel.service.ReportExcelService;
 import com.anjiplus.template.gaea.business.modules.reportexcel.util.CellType;
 import com.anjiplus.template.gaea.business.modules.reportexcel.util.XlsUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.itextpdf.text.*;
+import com.itextpdf.text.Font;
+import com.itextpdf.text.pdf.BaseFont;
+import com.itextpdf.text.pdf.PdfPCell;
+import com.itextpdf.text.pdf.PdfPTable;
+import com.itextpdf.text.pdf.PdfWriter;
+import com.itextpdf.tool.xml.XMLWorkerHelper;
+import com.lowagie.text.DocumentException;
+import io.swagger.models.auth.In;
 import org.apache.commons.lang3.StringUtils;
+import org.apache.poi.ss.usermodel.*;
+import org.apache.poi.xssf.usermodel.XSSFWorkbook;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
+import org.xhtmlrenderer.pdf.ITextRenderer;
 
-import java.io.File;
-import java.io.IOException;
-import java.io.OutputStream;
+import java.io.*;
 import java.nio.file.Files;
 import java.nio.file.Paths;
-import java.util.ArrayList;
-import java.util.HashMap;
+import java.util.*;
 import java.util.List;
 import java.util.Map;
+import java.util.stream.Collectors;
 
 /**
  * TODO
@@ -136,43 +147,286 @@ public class ReportExcelServiceImpl implements ReportExcelService {
 
     @Override
     public Boolean exportExcel(ReportExcelDto reportExcelDto) {
+        logger.error("导出...");
+        exportExcelCore(reportExcelDto);
+        return true;
+    }
+    /**
+     * 抽取导出Excel核心逻辑
+     */
+    public void exportExcelCore(ReportExcelDto reportExcelDto)
+    {
         String reportCode = reportExcelDto.getReportCode();
         String exportType = reportExcelDto.getExportType();
-        logger.error("导出...");
-        if (exportType.equals(ExportTypeEnum.GAEA_TEMPLATE_EXCEL.getCodeValue())) {
-            ReportExcelDto report = detailByReportCode(reportCode);
-            reportExcelDto.setJsonStr(report.getJsonStr());
-            String jsonStr = analysisReportData(reportExcelDto);
-            List<JSONObject> lists=(List<JSONObject> ) JSON.parse(jsonStr);
-            OutputStream out = null;
-            File file = null;
-            try {
-                String fileName = report.getReportCode();
-                File dir = new File(dictPath + ZIP_PATH);
-                if (!dir.exists()){
-                    dir.mkdirs();
-                }
-                String filePath = dir.getAbsolutePath() + File.separator + fileName + ".xlsx";
-                file = new File(filePath);
-                out = Files.newOutputStream(Paths.get(filePath));
-                XlsUtil.exportXlsFile(out, true, lists);
+        List<List<ReportExcelStyleDto>> reportExcelStyleList = new ArrayList<>();
+        JSONObject rowData= JSON.parseObject(reportExcelDto.getRowDatas());
+        // 将JSONObject对象转换为列表
+        List<Integer> dataNumList = rowData.keySet().stream().map(Integer::parseInt).sorted().collect(Collectors.toList());
+        for (Integer i : dataNumList) {
+            JSONArray jsonArray = rowData.getJSONArray(i.toString());
+            List<ReportExcelStyleDto> reportExcelStyleDtos = jsonArray.toJavaList(ReportExcelStyleDto.class);
+            reportExcelStyleList.add(reportExcelStyleDtos);
+        }
+        ReportExcelDto report = detailByReportCode(reportCode);
+        reportExcelDto.setJsonStr(report.getJsonStr());
+        String jsonStr = analysisReportData(reportExcelDto);
+        List<JSONObject> lists=(List<JSONObject> ) JSON.parse(jsonStr);
+        OutputStream out = null;
+        File file = null;
+        File pdfFile = null;
+        try {
+            String fileName = report.getReportCode();
+            File dir = new File(dictPath + ZIP_PATH);
+            if (!dir.exists()){
+                dir.mkdirs();
+            }
+            String filePath = dir.getAbsolutePath() + File.separator + fileName + ".xlsx";
+            file = new File(filePath);
+            out = Files.newOutputStream(Paths.get(filePath));
+            XlsUtil.exportXlsFile(out, true, lists);
+            if (exportType.equals(ExportTypeEnum.GAEA_TEMPLATE_EXCEL.getCodeValue())) {
                 gaeaFileService.upload(file);
+            }
+            else if(exportType.equals(ExportTypeEnum.GAEA_TEMPLATE_PDF.getCodeValue()))
+            {
+                // 将Excel文件转换为PDF
+                String pdfFileName = fileName + ".pdf";
+                String pdfFilePath = dir.getAbsolutePath() + File.separator + pdfFileName;
+                pdfFile = convertExcelToPdf(filePath, pdfFilePath,reportExcelStyleList);
+                gaeaFileService.upload(pdfFile);
+            }
 
+        } catch (IOException e) {
+            logger.error("导出失败", e);
+        }finally {
+            try {
+                out.close();
+                file.delete();
+                if(!Objects.isNull(pdfFile))
+                {
+                    pdfFile.delete();
+                }
             } catch (IOException e) {
-                logger.error("导出失败", e);
-            }finally {
-                try {
-                    out.close();
-                    file.delete();
-                } catch (IOException e) {
-                    throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage());
+                throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage());
+            }
+
+        }
+    }
+    // 将Excel文件转换为PDF
+    public File convertExcelToPdf(String excelFilePath, String pdfFilePath, List<List<ReportExcelStyleDto>> reportExcelStyleList) {
+        try {
+            // 读取Excel文件
+            Workbook workbook = new XSSFWorkbook(excelFilePath);
+            Sheet sheet = workbook.getSheetAt(0);
+
+            // 创建PDF文档
+            Document document = new Document(PageSize.A4);
+            PdfWriter pdfWriter = PdfWriter.getInstance(document, new FileOutputStream(pdfFilePath));
+            document.open();
+
+            // 创建PDF表格
+            PdfPTable table = new PdfPTable(sheet.getRow(0).getLastCellNum());
+            table.setWidthPercentage(100);
+
+            // 设置中文字体
+            BaseFont baseFont = BaseFont.createFont("STSong-Light", "UniGB-UCS2-H", BaseFont.NOT_EMBEDDED);
+            Font font = new Font(baseFont, 10, Font.NORMAL);
+
+            // 设置表头
+            Row headerRow = sheet.getRow(0);
+            for (int i = 0; i < headerRow.getLastCellNum(); i++) {
+                Cell headerCell = headerRow.getCell(i);
+
+                // 获取单元格样式
+                PdfPCell tableCell = new PdfPCell();
+                tableCell.setPhrase(new Phrase(getStringValue(headerCell), font));
+                ReportExcelStyleDto reportExcelStyleDto = reportExcelStyleList.get(0).get(i);
+                if(!Objects.isNull(reportExcelStyleDto))
+                {
+                    processCellStyle(reportExcelStyleDto,tableCell,font);
                 }
+                table.addCell(tableCell);
+            }
 
+            // 遍历Excel表格的行和列
+            for (int i = 1; i <= sheet.getLastRowNum(); i++) {
+                Row row = sheet.getRow(i);
+                if (row == null) {
+                    // 如果行为空，创建一个空的行并添加到PDF表格中
+                    row = sheet.createRow(i);
+                }
+                for (int j = 0; j < headerRow.getLastCellNum(); j++) {
+                    Cell cell = row.getCell(j, Row.MissingCellPolicy.CREATE_NULL_AS_BLANK);
+                    if (cell.getCellType() == org.apache.poi.ss.usermodel.CellType.BLANK) {
+                        cell.setCellValue(" ");
+                    }
+                    PdfPCell tableCell = new PdfPCell();
+                    tableCell.setPhrase(new Phrase(getStringValue(cell), font));
+                    ReportExcelStyleDto reportExcelStyleDto = reportExcelStyleList.get(i).get(j);
+                    if(!Objects.isNull(reportExcelStyleDto))
+                    {
+                        processCellStyle(reportExcelStyleDto,tableCell,font);
+                    }
+                    table.addCell(tableCell);
+                }
             }
+
+            // 将表格添加到PDF文档中
+            document.add(table);
+
+            document.close();
+            workbook.close();
+
+            System.out.println("Excel转换为PDF成功！");
+
+            return new File(pdfFilePath);
+        } catch (IOException e) {
+            e.printStackTrace();
+        } catch (com.itextpdf.text.DocumentException e) {
+            e.printStackTrace();
         }
-        return true;
+
+        return null;
     }
 
+    /**
+     * 处理导出pdf文件样式
+     * @param tableCell
+     */
+    public void processCellStyle(ReportExcelStyleDto reportExcelStyleDto,PdfPCell tableCell,Font font)
+    {
+        // 处理单元格背景颜色
+        String bg = reportExcelStyleDto.getBg();
+        java.awt.Color color = null;
+        if(!Objects.isNull(bg))
+        {
+            color = parseRGB(bg);
+            tableCell.setBackgroundColor(new BaseColor(color.getRed(), color.getGreen(), color.getBlue()));
+        }
+        // 处理字体
+        String fc = reportExcelStyleDto.getFc();
+        Integer fs = reportExcelStyleDto.getFs();
+        String ff = reportExcelStyleDto.getFf();
+        Boolean bl = reportExcelStyleDto.isBl();
+        Boolean it = reportExcelStyleDto.isIt();
+        Boolean cl = reportExcelStyleDto.isCl();
+        Integer ht = reportExcelStyleDto.getHt();
+        Integer vt = reportExcelStyleDto.getVt();
+
+
+        // 设置字体颜色
+        if(!Objects.isNull(fc))
+        {
+            color = parseRGB(fc);
+            font.setColor(new BaseColor(color.getRed(), color.getGreen(), color.getBlue()));
+        }
+        // 设置字体
+        if(!Objects.isNull(ff) && !Objects.equals("0",ff))
+        {
+            font.setFamily(ff.toString());
+        }
+        // 设置字体大小
+        if(!Objects.isNull(fs) && !Objects.equals(0,fs))
+        {
+            font.setSize(fs);
+        }
+        // 设置字体加粗
+        if(Objects.equals(Boolean.TRUE,bl))
+        {
+            font.setStyle(Font.BOLD);
+        }
+        // 设置字体斜体
+        if(Objects.equals(Boolean.TRUE,it))
+        {
+            font.setStyle(Font.ITALIC);
+        }
+        // 设置字体加粗且斜体
+        if(Objects.equals(Boolean.TRUE,bl) && Objects.equals(Boolean.TRUE,it))
+        {
+            font.setStyle(Font.BOLDITALIC);
+        }
+        // 是否删除线
+        if(Objects.equals(Boolean.TRUE,cl))
+        {
+            // 如果是粗体且斜体
+            if (font.getStyle() == Font.BOLDITALIC)
+            {
+                font.setStyle(Font.BOLDITALIC | Font.STRIKETHRU);
+            }
+            // 如果是粗体
+            else if(font.getStyle() == Font.BOLD)
+            {
+                font.setStyle(Font.BOLD | Font.STRIKETHRU);
+            }
+            // 如果是斜体
+            else if(font.getStyle() == Font.ITALIC)
+            {
+                font.setStyle(Font.ITALIC | Font.STRIKETHRU);
+            }
+            else
+            {
+                font.setStyle(Font.STRIKETHRU);
+            }
+        }
+        // 水平对齐
+        if(!Objects.isNull(ht))
+        {
+            if(Objects.equals(ht,0))
+            {
+                tableCell.setHorizontalAlignment(Element.ALIGN_CENTER);
+            }
+            else if(Objects.equals(ht,1))
+            {
+                tableCell.setHorizontalAlignment(Element.ALIGN_LEFT);
+            }
+            else if(Objects.equals(ht,2))
+            {
+                tableCell.setHorizontalAlignment(Element.ALIGN_RIGHT);
+            }
+        }
+        // 垂直对齐
+        if(!Objects.isNull(vt))
+        {
+            if(Objects.equals(ht,0))
+            {
+                tableCell.setVerticalAlignment(com.itextpdf.text.Element.ALIGN_MIDDLE);
+            }
+            else if(Objects.equals(ht,1))
+            {
+                tableCell.setVerticalAlignment(Element.ALIGN_TOP);
+            }
+            else if(Objects.equals(ht,2))
+            {
+                tableCell.setVerticalAlignment(Element.ALIGN_BOTTOM);
+            }
+        }
+        Phrase phrase = tableCell.getPhrase();
+        tableCell.setPhrase(new Paragraph(phrase.getContent(), font));
+        //处理字体
+        tableCell.setBorderColor(BaseColor.BLACK);
+
+    }
+
+        public static java.awt.Color parseRGB(String rgb) {
+            try {
+                String[] components = rgb.substring(rgb.indexOf("(") + 1, rgb.indexOf(")")).split(",");
+                int red = Integer.parseInt(components[0].trim());
+                int green = Integer.parseInt(components[1].trim());
+                int blue = Integer.parseInt(components[2].trim());
+
+                return new java.awt.Color(red, green, blue);
+            } catch (Exception e) {
+                e.printStackTrace();
+                return null; // 解析失败，返回null
+            }
+        }
+
+    private String getStringValue(Cell cell) {
+        if (cell == null)
+            return "";
+        else
+            return cell.toString();
+    }
     /**
      * 解析报表数据，动态插入列表数据和对象数据
      */

report-ui/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
+    "@jiaminghi/data-view": "^2.10.0",
     "@smallwei/avue": "^2.8.23",
     "axios": "0.18.0",
     "chokidar": "^3.5.2",

report-ui/src/main.js

@@ -22,7 +22,9 @@ import 'echarts/lib/component/tooltip'
 //import 'echarts-liquidfill'
 // import 'echarts-gl'
 Vue.component('v-chart', ECharts)
-
+// 全局引入datav
+import dataV from '@jiaminghi/data-view'
+Vue.use(dataV)
 // anji component
 import anjiCrud from '@/components/AnjiPlus/anji-crud/anji-crud'
 import anjiSelect from '@/components/AnjiPlus/anji-select'

report-ui/src/views/bigscreenDesigner/designer/index.vue

@@ -65,7 +65,7 @@
       :style="{ width: widthLeftForToolsHideButton + 'px' }"
       @click="toolIsShow = !toolIsShow"
     >
-      <i class="el-icon-arrow-right" />
+      <i class="el-icon-arrow-right"/>
     </div>
 
     <div
@@ -130,7 +130,7 @@
             content="缩小"
             placement="bottom"
           >
-            <i class="el-icon-minus" style="font-size: 16px" />
+            <i class="el-icon-minus" style="font-size: 16px"/>
           </el-tooltip>
         </span>
         <span
@@ -165,7 +165,7 @@
             content="放大"
             placement="bottom"
           >
-            <i class="el-icon-plus" style="font-size: 16px" />
+            <i class="el-icon-plus" style="font-size: 16px"/>
           </el-tooltip>
         </span>
 
@@ -349,7 +349,7 @@
 </template>
 
 <script>
-import { widgetTools, getToolByCode } from "./tools/index";
+import {widgetTools, getToolByCode} from "./tools/index";
 import mixin from "@/utils/screenMixins";
 import widget from "./widget/widget.vue";
 import dynamicForm from "./components/dynamicForm.vue";
@@ -598,18 +598,21 @@ export default {
       return widgetJson;
     },
     setWidgetConfigValue(config, configValue) {
-      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;
+      // 循环遍历前非空判断
+      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;
+              });
             });
-          });
-        }
-      });
+          }
+        });
+      }
     },
     layerClick(index) {
       this.widgetIndex = index;

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js

@@ -593,7 +593,7 @@ export const widgetBarCompare = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js

@@ -631,12 +631,12 @@ export const widgetBarDoubleYaxis = {
           ],
         },
         {
-          name: '折线数值设定',
+          name: '数值设定',
           list: [
             {
               type: 'el-switch',
               label: '显示',
-              name: 'isShowLine',
+              name: 'isShow',
               required: false,
               placeholder: '',
               value: false
@@ -644,7 +644,7 @@ export const widgetBarDoubleYaxis = {
             {
               type: 'el-input-number',
               label: '距离',
-              name: 'distanceLine',
+              name: 'distance',
               required: false,
               placeholder: '',
               value: 5
@@ -652,7 +652,7 @@ export const widgetBarDoubleYaxis = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'fontSizeLine',
+              name: 'fontSize',
               required: false,
               placeholder: '',
               value: 14
@@ -660,7 +660,7 @@ export const widgetBarDoubleYaxis = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColorLine',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'
@@ -668,58 +668,7 @@ export const widgetBarDoubleYaxis = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'fontWeightLine',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'bold', name: '粗体' },
-                { code: 'bolder', name: '特粗体' },
-                { code: 'lighter', name: '细体' }
-              ],
-              value: 'normal'
-            },
-          ],
-        },
-        {
-          name: '柱体数值设定',
-          list: [
-            {
-              type: 'el-switch',
-              label: '显示',
-              name: 'isShowBar',
-              required: false,
-              placeholder: '',
-              value: false
-            },
-            {
-              type: 'el-input-number',
-              label: '距离',
-              name: 'distanceBar',
-              required: false,
-              placeholder: '',
-              value: 5
-            },
-            {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'fontSizeBar',
-              required: false,
-              placeholder: '',
-              value: 14
-            },
-            {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'subTextColorBar',
-              required: false,
-              placeholder: '',
-              value: '#fff'
-            },
-            {
-              type: 'el-select',
-              label: '字体粗细',
-              name: 'fontWeightBar',
+              name: 'fontWeight',
               required: false,
               placeholder: '',
               selectOptions: [

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js

@@ -547,7 +547,7 @@ export const widgetBarStack = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js

@@ -469,7 +469,7 @@ export const widgetBarchart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js

@@ -445,7 +445,7 @@ export const widgetGradientBarchart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js

@@ -376,7 +376,7 @@ export const widgetHeatmap = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js

@@ -656,7 +656,7 @@ export const widgetLineCompare = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js

@@ -579,7 +579,7 @@ export const widgetLineStack = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js

@@ -489,7 +489,7 @@ export const widgetLinechart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js

@@ -233,6 +233,14 @@ export const widgetGauge = {
               placeholder: '',
               value: 0,
             },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
             {
               type: 'el-input-number',
               label: '字号',
@@ -242,12 +250,31 @@ export const widgetGauge = {
               value: 10,
             },
             {
-              type: 'vue-color',
-              label: '颜色',
-              name: 'labelColor',
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'labelFontWeight',
               required: false,
               placeholder: '',
-              value: '#fff',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'labelFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
             },
           ]
         },
@@ -257,7 +284,7 @@ export const widgetGauge = {
             {
               type: 'vue-color',
               label: '颜色',
-              name: 'labelColor',
+              name: 'detailColor',
               required: false,
               placeholder: '',
               value: '#fff',
@@ -265,7 +292,7 @@ export const widgetGauge = {
             {
               type: 'el-input-number',
               label: '字号',
-              name: 'labelFontSize',
+              name: 'detailFontSize',
               require: false,
               placeholder: '',
               value: 14,
@@ -273,7 +300,7 @@ export const widgetGauge = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'labelFontWeight',
+              name: 'detailFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -284,6 +311,19 @@ export const widgetGauge = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'detailFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
           ]
         },
       ],

report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js

@@ -162,18 +162,6 @@ export const widgetPiePercentage = {
               value: '#173164'
             },
           ]
-        },
-        {
-          name: '组件联动',
-          list: [
-            {
-              type: 'componentLinkage',
-              label: '',
-              name: 'componentLinkage',
-              required: false,
-              value: []
-            }
-          ]
         }
       ],
     ],

report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js

@@ -210,7 +210,7 @@ export const widgetPieNightingale = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: ''

report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js

@@ -210,7 +210,7 @@ export const widgetPiechart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: ''

report-ui/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js

@@ -387,7 +387,7 @@ export const widgetRadar = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'dataColor',
               required: false,
               placeholder: '',
               value: '#fff'

report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-border.js

@@ -0,0 +1,74 @@
+/**
+ * author:wenqindong
+ * date:2023-05-31
+ */
+let selectOptions = []
+for(let i=1;i<14;i++){
+    selectOptions.push({code: 'dv-border-Box-'+i, name: '样式'+i})
+}
+export const widgetBorder =  {
+    code: 'widget-border',
+    type: 'border',
+    tabName: '样式组件',
+    label: '边框',
+    icon: 'icontupian1',
+    options: {
+      // 配置
+      setup: [
+        {
+          type: 'el-input-text',
+          label: '图层名称',
+          name: 'layerName',
+          required: false,
+          placeholder: '',
+          value: '边框',
+        },
+        {
+          type: 'el-select',
+          label: '样式',
+          name: 'showtype',
+          required: false,
+          placeholder: '',
+          selectOptions: selectOptions,
+          value: 'dv-border-Box-1'
+        },
+      ],
+      // 数据
+      data: [],
+      // 坐标
+      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: 400,
+        },
+        {
+          type: 'el-input-number',
+          label: '高度',
+          name: 'height',
+          required: false,
+          placeholder: '该容器在1080px大屏中的高度',
+          value: 300,
+        },
+      ],
+    }
+  }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js → report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-pie.js

@@ -8,8 +8,8 @@
  */
 export const widgetDecoratePie = {
   code: 'widgetDecoratePieChart',
-  type: 'decorate',
-  tabName: '装饰图',
+  type: 'border',
+  tabName: '样式组件',
   label: '装饰饼图',
   icon: 'iconicon_tubiao_bingtu',
   options: {
@@ -407,6 +407,7 @@ export const widgetDecoratePie = {
         },
       ],
     ],
+    data: [],
     // 坐标
     position: [
       {

report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decoration.js

@@ -0,0 +1,74 @@
+/**
+ * author:wenqindong
+ * date:2023-05-31
+ */
+let selectOptions = []
+for(let i=1;i<13;i++){
+    selectOptions.push({code: 'dv-decoration-'+i, name: '装饰'+i})
+}
+export const widgetDecoration =  {
+    code: 'widget-decoration',
+    type: 'border',
+    tabName: '样式组件',
+    label: '装饰',
+    icon: 'icontupian1',
+    options: {
+      // 配置
+      setup: [
+        {
+          type: 'el-input-text',
+          label: '图层名称',
+          name: 'layerName',
+          required: false,
+          placeholder: '',
+          value: '装饰',
+        },
+        {
+          type: 'el-select',
+          label: '样式',
+          name: 'showtype',
+          required: false,
+          placeholder: '',
+          selectOptions: selectOptions,
+          value: 'dv-decoration-1'
+        },
+      ],
+      // 数据
+      data: [],
+      // 坐标
+      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: 400,
+        },
+        {
+          type: 'el-input-number',
+          label: '高度',
+          name: 'height',
+          required: false,
+          placeholder: '该容器在1080px大屏中的高度',
+          value: 150,
+        },
+      ],
+    }
+  }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js

@@ -24,7 +24,7 @@ export const widgetText = {
         value: '文本框',
       },
       {
-        type: 'el-input-text',
+        type: 'el-input-textarea',
         label: '文本内容',
         name: 'text',
         required: false,
@@ -90,6 +90,14 @@ export const widgetText = {
         ],
         value: 'center'
       },
+      {
+        type: 'el-switch',
+        label: '识别换行符',
+        name: 'whiteSpace',
+        required: false,
+        placeholder: '',
+        value: true,
+      }
     ],
     // 数据
     data: [

report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js

@@ -73,7 +73,7 @@ export const widgetTime = {
         name: 'background',
         required: false,
         placeholder: '',
-        value: 'rgba(115,170,229,.5)'
+        value: ''
       },
       {
         type: 'el-select',

report-ui/src/views/bigscreenDesigner/designer/tools/main.js

@@ -32,7 +32,7 @@ import { widgetBarStack } from "./configure/barCharts/widget-bar-stack"
 import { widgetLineStack } from "./configure/lineCharts/widget-line-stack"
 import { widgetBarCompare } from "./configure/barCharts/widget-bar-compare"
 import { widgetLineCompare } from "./configure/lineCharts/widget-line-compare"
-import { widgetDecoratePie } from "./configure/decorateCharts/widget-decorate-pie";
+import { widgetDecoratePie } from "./configure/styleWidget/widget-decorate-pie";
 import { widgetMoreBarLine } from "./configure/barlineCharts/widget-more-bar-line";
 import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud";
 import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
@@ -44,10 +44,14 @@ 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 {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
+import {widgetBorder} from "./configure/styleWidget/widget-border";
+import {widgetDecoration} from "./configure/styleWidget/widget-decoration";
 
 export const widgetTool = [
   // type=html类型的组件
   widgetText,
+  widgetBorder,
+  widgetDecoration,
   widgetMarquee,
   widgetHref,
   widgetTime,

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -14,7 +14,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -435,7 +434,7 @@ export default {
               position: "insideLeft",
               textStyle: {
                 fontSize: optionsSetup.fontSize,
-                color: optionsSetup.subTextColor,
+                color: optionsSetup.dataColor,
                 fontWeight: optionsSetup.fontWeight,
               },
             },
@@ -450,7 +449,7 @@ export default {
                 position: "insideRight",
                 textStyle: {
                   fontSize: optionsSetup.fontSize,
-                  color: optionsSetup.subTextColor,
+                  color: optionsSetup.dataColor,
                   fontWeight: optionsSetup.fontWeight,
                 },
               },
@@ -597,10 +596,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
     },
     //去重
     setUnique(arr) {

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue

@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -98,6 +97,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -141,7 +141,6 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
-      //this.setOptionsLine();
       this.setOptionsBar();
       this.setOptionsTooltip();
       this.setOptionsData();
@@ -306,41 +305,6 @@ export default {
       ];
       this.options.yAxis = yAxis;
     },
-    // 折线设置 数值设置
-    setOptionsLine() {
-      const optionsSetup = this.optionsSetup;
-      const series = this.options.series;
-      for (const key in series) {
-        if (series[key].type == "line") {
-          series[key].symbol = optionsSetup.symbol;
-          series[key].showSymbol = optionsSetup.markPoint;
-          series[key].symbolSize = optionsSetup.pointSize;
-          series[key].smooth = optionsSetup.smoothCurve;
-          if (optionsSetup.area) {
-            series[key].areaStyle = {
-              opacity: optionsSetup.areaThickness / 100,
-            };
-          } else {
-            series[key].areaStyle = {
-              opacity: 0,
-            };
-          }
-          series[key].lineStyle = {
-            width: optionsSetup.lineWidth,
-          };
-          series[key].itemStyle.borderRadius = optionsSetup.radius;
-          series[key].label = {
-            show: optionsSetup.isShowLine,
-            position: "top",
-            distance: optionsSetup.distanceLine,
-            fontSize: optionsSetup.fontSizeLine,
-            color: optionsSetup.subTextColorLine,
-            fontWeight: optionsSetup.fontWeightLine,
-          };
-        }
-      }
-      this.options.series = series;
-    },
     // 柱体设置 数值设置
     setOptionsBar() {
       const optionsSetup = this.optionsSetup;
@@ -348,12 +312,12 @@ export default {
       for (const key in series) {
         if (series[key].type == "bar") {
           series[key].label = {
-            show: optionsSetup.isShowBar,
+            show: optionsSetup.isShow,
             position: "top",
-            distance: optionsSetup.distanceBar,
-            fontSize: optionsSetup.fontSizeBar,
-            color: optionsSetup.subTextColorBar,
-            fontWeight: optionsSetup.fontWeightBar,
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
           };
           series[key].barWidth = optionsSetup.maxWidth;
           series[key].barMinHeight = optionsSetup.minHeight;

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue

@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -368,7 +367,7 @@ export default {
             position: "top",
             distance: 10,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           },
           //颜色，圆角属性
@@ -449,7 +448,7 @@ export default {
               position: "top",
               distance: 10,
               fontSize: optionsSetup.fontSize,
-              color: optionsSetup.subTextColor,
+              color: optionsSetup.dataColor,
               fontWeight: optionsSetup.fontWeight,
             },
             //颜色，圆角属性

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue

@@ -237,7 +237,7 @@ export default {
             distance: optionsSetup.distance,
             textStyle: {
               fontSize: optionsSetup.fontSize,
-              color: optionsSetup.subTextColor,
+              color: optionsSetup.dataColor,
               fontWeight: optionsSetup.fontWeight,
             },
           };
@@ -247,7 +247,7 @@ export default {
             position: "top",
             distance: optionsSetup.distance,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           };
         }

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue

@@ -16,6 +16,7 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
+    flagInter: null,
     widgetIndex: {
       type: Number,
       default: 0,
@@ -311,7 +312,7 @@ export default {
             position: "right",
             distance: optionsSetup.distance,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           };
         } else {
@@ -320,7 +321,7 @@ export default {
             position: "top",
             distance: optionsSetup.distance,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           };
         }

report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue

@@ -98,6 +98,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {

report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue

@@ -157,6 +157,10 @@ export default {
           },
         ],
       },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {

report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue

@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -78,6 +77,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {

report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue

@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -106,6 +105,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -258,7 +258,7 @@ export default {
         show: optionsSetup.isShow,
         textStyle: {
           fontSize: optionsSetup.fontSize,
-          color: optionsSetup.subTextColor,
+          color: optionsSetup.dataColor,
           fontWeight: optionsSetup.fontWeight,
         },
       };

report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue

@@ -14,7 +14,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -496,7 +495,7 @@ export default {
           position: "top",
           distance: 10,
           show: optionsSetup.isShow,
-          color: optionsSetup.subTextColor,
+          color: optionsSetup.dataColor,
           fontSize: optionsSetup.fontSize,
           fontWeight: optionsSetup.fontWeight,
         };
@@ -504,7 +503,7 @@ export default {
           position: "bottom",
           distance: 10,
           show: optionsSetup.isShow,
-          color: optionsSetup.subTextColor,
+          color: optionsSetup.dataColor,
           fontSize: optionsSetup.fontSize,
           fontWeight: optionsSetup.fontWeight,
         };

report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue

@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -393,13 +392,13 @@ export default {
             color: arrColor[i],
           },
           areaStyle: this.getOptionArea(),
-          //标题部分
+          //数值设定
           label: {
             show: optionsSetup.isShow,
             position: "top",
             distance: 10,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           },
         });
@@ -481,13 +480,13 @@ export default {
               color: arrColor[i],
             },
             areaStyle: this.getOptionArea(),
-            // 标题部分
+            // 数值设定
             label: {
               show: optionsSetup.isShow,
               position: "top",
               distance: 10,
               fontSize: optionsSetup.fontSize,
-              color: optionsSetup.subTextColor,
+              color: optionsSetup.dataColor,
               fontWeight: optionsSetup.fontWeight,
             },
           });

report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue

@@ -70,6 +70,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -258,7 +259,7 @@ export default {
             position: "top",
             distance: 10,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           };
         }

report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue

@@ -211,7 +211,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -395,6 +394,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {

report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue

@@ -133,7 +133,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -293,6 +292,7 @@ export default {
         ],
       },
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {

report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue

@@ -1,11 +1,13 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
 <script>
 import echarts from "echarts";
+import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "WidgetGauge",
   components: {},
@@ -125,6 +127,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -138,6 +141,9 @@ export default {
         background: this.optionsSetup.background,
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
@@ -158,6 +164,9 @@ export default {
     this.optionsSetup = this.value.setup;
     this.editorOptions();
   },
+  mounted() {
+    targetWidgetLinkageLogic(this);
+  },
   methods: {
     editorOptions() {
       this.setOptions();
@@ -244,19 +253,53 @@ export default {
             width: optionsSetup.splitWidth,
           },
         };
+        const axisLabel = {
+          show: optionsSetup.labelShow,
+          color: optionsSetup.labelColor,
+          distance: optionsSetup.labelDistance,
+          fontSize: optionsSetup.labelFontSize,
+          fontWeight: optionsSetup.labelFontWeight,
+          fontStyle: optionsSetup.labelFontStyle,
+        };
+        const detail = {
+          valueAnimation: true,
+          formatter: "{value} %",
+          color: optionsSetup.detailColor,
+          fontSize: optionsSetup.detailFontSize,
+          fontWeight: optionsSetup.detailFontWeight,
+          fontStyle: optionsSetup.detailFontStyle,
+        };
         series[0].axisLine = axisLine;
         series[0].axisTick = axisTick;
         series[0].splitLine = splitLine;
+        series[0].axisLabel = axisLabel;
+        series[0].detail = detail;
       }
     },
-    setOptionsData() {
+    setOptionsData(e, 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);
+        paramsConfig.forEach((conf) => {
+          if (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) {
-      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       const num = val[0]["num"];
       const data = [
@@ -264,15 +307,7 @@ export default {
           value: num,
         },
       ];
-      const detail = {
-        valueAnimation: true,
-        formatter: "{value} %",
-        color: optionsSetup.labelColor,
-        fontSize: optionsSetup.labelFontSize,
-        fontWeight: optionsSetup.labelFontWeight,
-      };
       series[0].data = data;
-      series[0].detail = detail;
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -292,22 +327,13 @@ export default {
       });
     },
     renderingFn(val) {
-      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       const data = [
         {
           value: val[0].value,
         },
       ];
-      const detail = {
-        valueAnimation: true,
-        formatter: "{value} %",
-        color: optionsSetup.labelColor,
-        fontSize: optionsSetup.labelFontSize,
-        fontWeight: optionsSetup.labelFontWeight,
-      };
       series[0].data = data;
-      series[0].detail = detail;
     },
   },
 };

report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue

@@ -316,6 +316,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -16,7 +16,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -48,6 +47,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -135,7 +135,7 @@ export default {
         rich: {
           a: {
             padding: [-30, 15, -20, 15],
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontSize: optionsSetup.fontSize,
             fontWeight: optionsSetup.fontWeight,
           },
@@ -181,11 +181,11 @@ export default {
       const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
-      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.left = optionsSetup.lateralPosition;
+      legend.right = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue

@@ -145,7 +145,7 @@ export default {
         rich: {
           a: {
             padding: [-30, 15, -20, 15],
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontSize: optionsSetup.fontSize,
             fontWeight: optionsSetup.fontWeight,
           },
@@ -179,11 +179,11 @@ export default {
       const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
-      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.left = optionsSetup.lateralPosition;
+      legend.right = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,

report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue

@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -29,6 +28,7 @@ export default {
       optionsSetup: {},
       optionsPosition: {},
       optionsData: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -251,7 +251,7 @@ export default {
             position: "top",
             distance: 10,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           },
           lineStyle: {
@@ -333,7 +333,7 @@ export default {
             position: "top",
             distance: 10,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.subTextColor,
+            color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
           },
           lineStyle: {

report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue

@@ -1,12 +1,12 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
 <script>
 import echarts from "echarts";
-import {eventBusParams} from "@/utils/screen";
+import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 let scale = [];
 let max;
@@ -193,6 +193,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -206,6 +207,9 @@ export default {
         background: this.optionsSetup.background,
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
@@ -225,13 +229,7 @@ export default {
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
-    eventBusParams(
-      this.optionsSetup,
-      this.optionsData,
-      (dynamicData, optionsSetup) => {
-        this.getEchartData(dynamicData, optionsSetup);
-      }
-    );
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
   },
   methods: {
     // 修改图标options属性
@@ -448,8 +446,24 @@ export default {
       };
       this.options.grid = grid;
     },
-    setOptionsData() {
+    setOptionsData(e, 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);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue

@@ -1,11 +1,12 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
 <script>
 import echarts from "echarts";
+import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 let scale = [];
 let max;
@@ -190,6 +191,7 @@ export default {
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -203,6 +205,9 @@ export default {
         background: this.optionsSetup.background,
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
@@ -222,6 +227,7 @@ export default {
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
   },
   methods: {
     // 修改图标options属性
@@ -435,8 +441,24 @@ export default {
       };
       this.options.grid = grid;
     },
-    setOptionsData() {
+    setOptionsData(e, 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);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetBorder.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :style="styleObj">
+    <component :is="value.setup.showtype" :value="value"/>
+  </div>
+</template>
+<script>
+export default ({
+  name: "widgetBorder",
+  components: {},
+  data() {
+    return {
+      optionsStyle: {}, // 样式
+    }
+  },
+  props: {
+    value: Object,
+    ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    }, // 当前组件，在工作区变量widgetInWorkbench中的索引
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+      },
+      deep: true,
+    },
+  },
+  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",
+      };
+    },
+  }
+})
+</script>
+<style scoped lang="scss">
+</style>

report-ui/src/views/bigscreenDesigner/designer/widget/decorate/widgetDecoratePieChart.vue → report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoratePieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize />
   </div>
 </template>
 

report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :style="styleObj">
+    <component :is="value.setup.showtype" :value="value" :style="styleObj"/>
+  </div>
+</template>
+<script>
+export default ({
+  name: "widgetDecoration",
+  components: {},
+  data() {
+    return {
+      optionsStyle: {}, // 样式
+    }
+  },
+  props: {
+    value: Object,
+    ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    }, // 当前组件，在工作区变量widgetInWorkbench中的索引
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+      },
+      deep: true,
+    },
+  },
+  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",
+      };
+    },
+  }
+})
+</script>
+<style scoped lang="scss"></style>

report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue

@@ -34,7 +34,7 @@ import widgetBarStackChart from "./bar/widgetBarStackChart";
 import widgetLineStackChart from "./line/widgetLineStackChart";
 import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
-import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
+import widgetDecoratePieChart from "./styleWidget/widgetDecoratePieChart.vue";
 import widgetMoreBarLineChart from "./barline/widgetMoreBarLineChart";
 import widgetWordCloud from "./wordcloud/widgetWordCloud";
 import widgetHeatmap from "./heatmap/widgetHeatmap";
@@ -46,12 +46,16 @@ import widgetFormTime from "./form/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 widgetDecoration from "./styleWidget/widgetDecoration.vue";
 
 export default {
   name: "WidgetTemp",
   components: {
     widgetHref,
     widgetText,
+    widgetBorder,
+    widgetDecoration,
     WidgetMarquee,
     widgetTime,
     widgetImage,

report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetMarquee.vue

@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "WidgetMarquee",
   components: {},
@@ -16,7 +18,8 @@ export default {
   },
   data() {
     return {
-      options: {}
+      options: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -42,6 +45,9 @@ export default {
         styleColor: this.transStyle.marqueeQuit
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
     isBehavior() {
       return this.styleColor.marqueeSet ? "start()" : "stop()";
     }
@@ -51,6 +57,7 @@ export default {
       handler(val) {
         this.options = val;
         this.optionsData = val.data;
+        targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
         this.setOptionsData();
       },
       deep: true
@@ -63,8 +70,25 @@ export default {
   },
   methods: {
     // 数据解析
-    setOptionsData() {
+    setOptionsData(e, 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);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+      // 联动接收者逻辑结束
       if (optionsData.dataType == "dynamicData") {
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
       } else {};

report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue

@@ -40,12 +40,15 @@
 <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
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -64,7 +67,8 @@ export default {
       list: [],
       optionsSetUp: {},
       optionsPosition: {},
-      optionsData: {}
+      optionsData: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -80,6 +84,9 @@ export default {
         background: this.optionsSetUp.tableBgColor
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
     headerTableStlye() {
       const headStyle = this.optionsSetUp;
       return {
@@ -122,12 +129,13 @@ export default {
     this.optionsPosition = this.value.position;
     this.optionsData = this.value.data;
     this.initData();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
   },
   methods: {
     initData() {
       this.handlerRollFn();
       this.handlerHead();
-      this.handlerData();
+      this.setOptionsData();
       this.visConfig();
     },
     visConfig() {
@@ -148,8 +156,25 @@ export default {
       const head = this.optionsSetUp.dynamicAddTable;
       this.header = head;
     },
-    handlerData() {
+    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);

report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue

@@ -7,8 +7,9 @@
 <template>
   <div class="text" :style="styleColor">{{ styleColor.text }}</div>
 </template>
-
 <script>
+import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "WidgetText",
   components: {},
@@ -19,7 +20,8 @@ export default {
   data() {
     return {
       options: {},
-      optionsData: {}
+      optionsData: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -40,9 +42,13 @@ export default {
         height: this.transStyle.height + "px",
         left: this.transStyle.left + "px",
         top: this.transStyle.top + "px",
-        right: this.transStyle.right + "px"
+        right: this.transStyle.right + "px",
+        whiteSpace: this.transStyle.whiteSpace ? "pre-line": "normal"
       };
-    }
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
@@ -57,12 +63,30 @@ export default {
   mounted() {
     this.options = this.value;
     this.optionsData = this.value.data;
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
     this.setOptionsData();
   },
   methods: {
     // 数据解析
-    setOptionsData() {
+    setOptionsData(e, 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);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+      // 联动接收者逻辑结束
       if (optionsData.dataType == "dynamicData") {
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
       } else {};

report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue

@@ -41,7 +41,7 @@ import widgetBarStackChart from "./bar/widgetBarStackChart";
 import widgetLineStackChart from "./line/widgetLineStackChart";
 import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
-import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
+import widgetDecoratePieChart from "./styleWidget/widgetDecoratePieChart.vue";
 import widgetMoreBarLineChart from "./barline/widgetMoreBarLineChart";
 import widgetWordCloud from "./wordcloud/widgetWordCloud";
 import widgetHeatmap from "./heatmap/widgetHeatmap";
@@ -53,12 +53,16 @@ import widgetFormTime from "./form/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 widgetDecoration from "./styleWidget/widgetDecoration.vue";
 
 export default {
   name: "Widget",
   components: {
     widgetHref,
     widgetText,
+    widgetBorder,
+    widgetDecoration,
     WidgetMarquee,
     widgetTime,
     widgetImage,

report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue

@@ -1,10 +1,12 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize />
   </div>
 </template>
 <script>
 import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js";
+import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "widgetWordCloud",
   components: {},
@@ -67,6 +69,9 @@ export default {
         background: this.optionsSetup.background,
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
@@ -86,6 +91,7 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
   },
   methods: {
     // 修改图标options属性
@@ -148,8 +154,25 @@ export default {
       this.options.tooltip = tooltip;
     },
     // 数据解析
-    setOptionsData() {
+    setOptionsData(e, 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);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

report-ui/src/views/excelreport/viewer/index.vue

@@ -108,16 +108,17 @@ export default {
       this.createSheet();
     },
     async download(val) {
-      if (val == "gaea_template_pdf") {
-        this.$message("暂不支持pdf");
-        return;
-      }
+      // if (val == "gaea_template_pdf") {
+      //   this.$message("暂不支持pdf");
+      //   return;
+      // }
       const result = {};
       result["reportCode"] = this.reportCode;
       result["setParam"] = JSON.stringify(this.params.setParam);
       if (val != "") {
         result["exportType"] = val;
       }
+      this.getCellStyleData(result);
       const { code, message } = await exportExcel(result);
       if (code != 200) return;
       this.$message.success(message);
@@ -192,7 +193,22 @@ export default {
       $(function() {
         luckysheet.create(options);
       });
-    }
+    },
+    getCellStyleData(result) {
+      const sheetData = luckysheet.getluckysheetfile(); // 获取整个表格的数据
+      const rowDatas = {};
+
+      for (let sheetIndex in sheetData) {
+        const sheet = sheetData[sheetIndex];
+        if (sheet && sheet.data) {
+          for (let rowIndex in sheet.data) {
+            const row = sheet.data[rowIndex];
+            rowDatas[rowIndex]=row;
+          }
+        }
+      }
+      result["rowDatas"] = JSON.stringify(rowDatas);;
+    },
   }
 };
 </script>

report-ui/src/views/layout/components/Sidebar/index.vue

@@ -3,7 +3,7 @@
     <div class="admin-title" @click="goBigScreen">
       <div class="con">
         <img src="../../../../../static/logo-dp.png" width="50" />
-        <span class="version">V1.0.0</span>
+        <span class="version">V1.1.0</span>
       </div>
     </div>
     <el-menu