refactor: 解决冲突

Dockerfile

@@ -1,4 +1,15 @@
-FROM registry.cn-qingdao.aliyuncs.com/dataease/fabric8-java-alpine-openjdk8-jre
+FROM registry.cn-qingdao.aliyuncs.com/dataease/fabric8-java-alpine-openjdk8-jre:3.15.0
+
+RUN echo -e 'http://mirrors.aliyun.com/alpine/v3.15/main/\nhttp://mirrors.aliyun.com/alpine/v3.15/community/' > /etc/apk/repositories 
+
+RUN apk add chromium chromium-chromedriver fontconfig --no-cache --allow-untrusted
+
+ADD simsun.ttc /usr/share/fonts/
+
+RUN cd /usr/share/fonts/ \
+    && mkfontscale \
+    && mkfontdir \
+    && fc-cache -fv
 
 ARG IMAGE_TAG
 

backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java

@@ -12,12 +12,12 @@ public class ShiroServiceImpl implements ShiroService {
 
     private final static String ANON = "anon";
 
-
     @Override
     public Map<String, String> loadFilterChainDefinitionMap() {
         // 权限控制map
         Map<String, String> filterChainDefinitionMap = new LinkedHashMap<>();
-        // 配置过滤:不会被拦截的链接 -> 放行 start ----------------------------------------------------------
+        // 配置过滤:不会被拦截的链接 -> 放行 start
+        // ----------------------------------------------------------
         // 放行Swagger2页面，需要放行这些
 
         filterChainDefinitionMap.put("/doc.html**", "doc");
@@ -42,17 +42,20 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/index.html", ANON);
         filterChainDefinitionMap.put("/link.html", ANON);
 
-
+        // 获取主题信息
-        //获取主题信息
         filterChainDefinitionMap.put("/plugin/theme/themes", ANON);
         filterChainDefinitionMap.put("/plugin/theme/items/**", ANON);
 
-        //验证链接
+        // 验证链接
         filterChainDefinitionMap.put("/api/link/validate**", ANON);
         filterChainDefinitionMap.put("/api/map/areaEntitys/**", ANON);
         filterChainDefinitionMap.put("/dataset/field/fieldValues/**", ANON);
         filterChainDefinitionMap.put("/linkJump/queryPanelJumpInfo/**", ANON);
 
+        filterChainDefinitionMap.put("/tempMobileLink/**", ANON);
+        filterChainDefinitionMap.put("/de-app/**", ANON);
+        filterChainDefinitionMap.put("/app.html", ANON);
+
         filterChainDefinitionMap.put("/**/*.json", ANON);
         filterChainDefinitionMap.put("/system/ui/**", ANON);
         filterChainDefinitionMap.put("/**/*.js", ANON);
@@ -70,7 +73,6 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/plugin/oidc/authInfo", ANON);
         filterChainDefinitionMap.put("/sso/callBack*", ANON);
 
-
         filterChainDefinitionMap.put("/unauth", ANON);
         filterChainDefinitionMap.put("/display/**", ANON);
         filterChainDefinitionMap.put("/tokenExpired", ANON);
@@ -82,7 +84,6 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/api/link/resourceDetail/**", "link");
         filterChainDefinitionMap.put("/api/link/viewDetail/**", "link");
 
-
         filterChainDefinitionMap.put("/**", "authc");
 
         filterChainDefinitionMap.put("/**", "jwt");
@@ -90,9 +91,9 @@ public class ShiroServiceImpl implements ShiroService {
         return filterChainDefinitionMap;
     }
 
-
     @Override
-    public void updatePermission(ShiroFilterFactoryBean shiroFilterFactoryBean, Integer roleId, Boolean isRemoveSession) {
+    public void updatePermission(ShiroFilterFactoryBean shiroFilterFactoryBean, Integer roleId,
+            Boolean isRemoveSession) {
 
     }
 

backend/src/main/java/io/dataease/base/domain/PanelGroup.java

@@ -1,36 +1,35 @@
 package io.dataease.base.domain;
 
 import java.io.Serializable;
-
-import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
 @Data
 public class PanelGroup implements Serializable {
-    @ApiModelProperty("ID")
     private String id;
-    @ApiModelProperty("名称")
+
     private String name;
-    @ApiModelProperty("父ID")
+
     private String pid;
-    @ApiModelProperty("级别")
+
     private Integer level;
-    @ApiModelProperty("节点类型")
+
     private String nodeType;
-    @ApiModelProperty("创建者")
+
     private String createBy;
-    @ApiModelProperty("创建时间")
+
     private Long createTime;
-    @ApiModelProperty("类型")
+
     private String panelType;
-    @ApiModelProperty("源")
+
     private String source;
-    @ApiModelProperty("拓展1")
+
     private String extend1;
-    @ApiModelProperty("拓展2")
+
     private String extend2;
-    @ApiModelProperty("重新标记")
+
     private String remark;
 
+    private Boolean mobileLayout;
+
     private static final long serialVersionUID = 1L;
 }

backend/src/main/java/io/dataease/base/domain/PanelGroupExample.java

@@ -923,6 +923,66 @@ public class PanelGroupExample {
             addCriterion("remark not between", value1, value2, "remark");
             return (Criteria) this;
         }
+
+        public Criteria andMobileLayoutIsNull() {
+            addCriterion("mobile_layout is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutIsNotNull() {
+            addCriterion("mobile_layout is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutEqualTo(Boolean value) {
+            addCriterion("mobile_layout =", value, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutNotEqualTo(Boolean value) {
+            addCriterion("mobile_layout <>", value, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutGreaterThan(Boolean value) {
+            addCriterion("mobile_layout >", value, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutGreaterThanOrEqualTo(Boolean value) {
+            addCriterion("mobile_layout >=", value, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutLessThan(Boolean value) {
+            addCriterion("mobile_layout <", value, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutLessThanOrEqualTo(Boolean value) {
+            addCriterion("mobile_layout <=", value, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutIn(List<Boolean> values) {
+            addCriterion("mobile_layout in", values, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutNotIn(List<Boolean> values) {
+            addCriterion("mobile_layout not in", values, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutBetween(Boolean value1, Boolean value2) {
+            addCriterion("mobile_layout between", value1, value2, "mobileLayout");
+            return (Criteria) this;
+        }
+
+        public Criteria andMobileLayoutNotBetween(Boolean value1, Boolean value2) {
+            addCriterion("mobile_layout not between", value1, value2, "mobileLayout");
+            return (Criteria) this;
+        }
     }
 
     public static class Criteria extends GeneratedCriteria {

backend/src/main/java/io/dataease/base/domain/PanelGroupWithBLOBs.java

@@ -1,8 +1,6 @@
 package io.dataease.base.domain;
 
 import java.io.Serializable;
-
-import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 import lombok.ToString;
@@ -11,9 +9,8 @@ import lombok.ToString;
 @EqualsAndHashCode(callSuper = true)
 @ToString(callSuper = true)
 public class PanelGroupWithBLOBs extends PanelGroup implements Serializable {
-    @ApiModelProperty("仪表板样式")
     private String panelStyle;
-    @ApiModelProperty("仪表板数据")
+
     private String panelData;
 
     private static final long serialVersionUID = 1L;

backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.xml

@@ -14,6 +14,7 @@
     <result column="extend1" jdbcType="VARCHAR" property="extend1" />
     <result column="extend2" jdbcType="VARCHAR" property="extend2" />
     <result column="remark" jdbcType="VARCHAR" property="remark" />
+    <result column="mobile_layout" jdbcType="BIT" property="mobileLayout" />
   </resultMap>
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.PanelGroupWithBLOBs">
     <result column="panel_style" jdbcType="LONGVARCHAR" property="panelStyle" />
@@ -79,7 +80,7 @@
   </sql>
   <sql id="Base_Column_List">
     id, `name`, pid, `level`, node_type, create_by, create_time, panel_type, `source`, 
-    extend1, extend2, remark
+    extend1, extend2, remark, mobile_layout
   </sql>
   <sql id="Blob_Column_List">
     panel_style, panel_data
@@ -137,12 +138,14 @@
       `level`, node_type, create_by, 
       create_time, panel_type, `source`, 
       extend1, extend2, remark, 
-      panel_style, panel_data)
+      mobile_layout, panel_style, panel_data
+      )
     values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{pid,jdbcType=VARCHAR}, 
       #{level,jdbcType=INTEGER}, #{nodeType,jdbcType=VARCHAR}, #{createBy,jdbcType=VARCHAR}, 
       #{createTime,jdbcType=BIGINT}, #{panelType,jdbcType=VARCHAR}, #{source,jdbcType=VARCHAR}, 
       #{extend1,jdbcType=VARCHAR}, #{extend2,jdbcType=VARCHAR}, #{remark,jdbcType=VARCHAR}, 
-      #{panelStyle,jdbcType=LONGVARCHAR}, #{panelData,jdbcType=LONGVARCHAR})
+      #{mobileLayout,jdbcType=BIT}, #{panelStyle,jdbcType=LONGVARCHAR}, #{panelData,jdbcType=LONGVARCHAR}
+      )
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
     insert into panel_group
@@ -183,6 +186,9 @@
       <if test="remark != null">
         remark,
       </if>
+      <if test="mobileLayout != null">
+        mobile_layout,
+      </if>
       <if test="panelStyle != null">
         panel_style,
       </if>
@@ -227,6 +233,9 @@
       <if test="remark != null">
         #{remark,jdbcType=VARCHAR},
       </if>
+      <if test="mobileLayout != null">
+        #{mobileLayout,jdbcType=BIT},
+      </if>
       <if test="panelStyle != null">
         #{panelStyle,jdbcType=LONGVARCHAR},
       </if>
@@ -280,6 +289,9 @@
       <if test="record.remark != null">
         remark = #{record.remark,jdbcType=VARCHAR},
       </if>
+      <if test="record.mobileLayout != null">
+        mobile_layout = #{record.mobileLayout,jdbcType=BIT},
+      </if>
       <if test="record.panelStyle != null">
         panel_style = #{record.panelStyle,jdbcType=LONGVARCHAR},
       </if>
@@ -305,6 +317,7 @@
       extend1 = #{record.extend1,jdbcType=VARCHAR},
       extend2 = #{record.extend2,jdbcType=VARCHAR},
       remark = #{record.remark,jdbcType=VARCHAR},
+      mobile_layout = #{record.mobileLayout,jdbcType=BIT},
       panel_style = #{record.panelStyle,jdbcType=LONGVARCHAR},
       panel_data = #{record.panelData,jdbcType=LONGVARCHAR}
     <if test="_parameter != null">
@@ -324,7 +337,8 @@
       `source` = #{record.source,jdbcType=VARCHAR},
       extend1 = #{record.extend1,jdbcType=VARCHAR},
       extend2 = #{record.extend2,jdbcType=VARCHAR},
-      remark = #{record.remark,jdbcType=VARCHAR}
+      remark = #{record.remark,jdbcType=VARCHAR},
+      mobile_layout = #{record.mobileLayout,jdbcType=BIT}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -365,6 +379,9 @@
       <if test="remark != null">
         remark = #{remark,jdbcType=VARCHAR},
       </if>
+      <if test="mobileLayout != null">
+        mobile_layout = #{mobileLayout,jdbcType=BIT},
+      </if>
       <if test="panelStyle != null">
         panel_style = #{panelStyle,jdbcType=LONGVARCHAR},
       </if>
@@ -387,6 +404,7 @@
       extend1 = #{extend1,jdbcType=VARCHAR},
       extend2 = #{extend2,jdbcType=VARCHAR},
       remark = #{remark,jdbcType=VARCHAR},
+      mobile_layout = #{mobileLayout,jdbcType=BIT},
       panel_style = #{panelStyle,jdbcType=LONGVARCHAR},
       panel_data = #{panelData,jdbcType=LONGVARCHAR}
     where id = #{id,jdbcType=VARCHAR}
@@ -403,7 +421,8 @@
       `source` = #{source,jdbcType=VARCHAR},
       extend1 = #{extend1,jdbcType=VARCHAR},
       extend2 = #{extend2,jdbcType=VARCHAR},
-      remark = #{remark,jdbcType=VARCHAR}
+      remark = #{remark,jdbcType=VARCHAR},
+      mobile_layout = #{mobileLayout,jdbcType=BIT}
     where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>

backend/src/main/java/io/dataease/controller/IndexController.java

@@ -19,6 +19,7 @@ import java.io.IOException;
 @RequestMapping
 public class IndexController {
 
+    private static final int FOR_EVER = 3600 * 24 * 30 * 12 * 10; // 10 years in second
     @Resource
     private DefaultLicenseService defaultLicenseService;
 
@@ -35,7 +36,6 @@ public class IndexController {
         return "index.html";
     }
 
-
     @GetMapping("/deApi")
     public String deApi() {
         F2CLicenseResponse f2CLicenseResponse = defaultLicenseService.validateLicense();
@@ -59,5 +59,20 @@ public class IndexController {
         }
     }
 
+    @GetMapping("/tempMobileLink/{id}/{token}")
+    public void tempMobileLink(@PathVariable("id") String id, @PathVariable("token") String token) {
+        String url = "http://localhost:8081/#preview/" + id;
+        HttpServletResponse response = ServletUtils.response();
+        Cookie cookie = new Cookie("Authorization", token);
+        cookie.setPath("/");
+        cookie.setMaxAge(FOR_EVER);
+        response.addCookie(cookie);
+        try {
+            response.sendRedirect(url);
+        } catch (IOException e) {
+            LogUtil.error(e.getMessage());
+            DEException.throwException(e);
+        }
+    }
 
 }

backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java

@@ -12,6 +12,7 @@ import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
 import java.util.List;
+import java.util.stream.Collectors;
 
 /**
  * @Author gin
@@ -75,4 +76,11 @@ public class DataSetTableFieldController {
     public List<Object> fieldValues(@PathVariable String fieldId) {
         return dataSetFieldService.fieldValues(fieldId);
     }
+
+    @ApiOperation("多字段值枚举")
+    @PostMapping("multFieldValues")
+    public List<Object> multFieldValues(@RequestBody List<String> fieldIds) {
+        List<Object> results = fieldIds.stream().map(fieldId -> dataSetFieldService.fieldValues(fieldId)).flatMap(list -> list.stream()).distinct().collect(Collectors.toList());
+        return results;
+    }
 }

backend/src/main/java/io/dataease/dto/chart/ChartFieldCustomFilterDTO.java

@@ -17,4 +17,6 @@ public class ChartFieldCustomFilterDTO extends ChartViewFieldBaseDTO implements
     private List<ChartCustomFilterItemDTO> filter;
 
     private DatasetTableField field;
+
+    private List<String> enumCheckField;
 }

backend/src/main/java/io/dataease/dto/chart/ChartViewFieldBaseDTO.java

@@ -48,4 +48,6 @@ public class ChartViewFieldBaseDTO implements Serializable {
     private ChartFieldCompareDTO compareCalc;
 
     private String logic;
+
+    private String filterType;
 }

backend/src/main/java/io/dataease/provider/query/mysql/MysqlQueryProvider.java

@@ -735,62 +735,74 @@ public class MysqlQueryProvider extends QueryProvider {
         for (ChartFieldCustomFilterDTO request : requestList) {
             List<SQLObj> list = new ArrayList<>();
             DatasetTableField field = request.getField();
-            List<ChartCustomFilterItemDTO> filter = request.getFilter();
+
-            for (ChartCustomFilterItemDTO filterItemDTO : filter) {
+            if (ObjectUtils.isEmpty(field)) {
-                if (ObjectUtils.isEmpty(field)) {
+                continue;
-                    continue;
+            }
+            String whereName = "";
+            String originName;
+            if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 2) {
+                // 解析origin name中有关联的字段生成sql表达式
+                originName = calcFieldRegex(field.getOriginName(), tableObj);
+            } else if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 1) {
+                originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
+            } else {
+                originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
+            }
+            if (field.getDeType() == 1) {
+                if (field.getDeExtractType() == 0 || field.getDeExtractType() == 5) {
+                    whereName = String.format(MySQLConstants.STR_TO_DATE, originName, MySQLConstants.DEFAULT_DATE_FORMAT);
                 }
-                String value = filterItemDTO.getValue();
+                if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) {
-                String whereName = "";
+                    String cast = String.format(MySQLConstants.CAST, originName, MySQLConstants.DEFAULT_INT_FORMAT) + "/1000";
-                String whereTerm = transMysqlFilterTerm(filterItemDTO.getTerm());
+                    whereName = String.format(MySQLConstants.FROM_UNIXTIME, cast, MySQLConstants.DEFAULT_DATE_FORMAT);
-                String whereValue = "";
-                String originName;
-                if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 2) {
-                    // 解析origin name中有关联的字段生成sql表达式
-                    originName = calcFieldRegex(field.getOriginName(), tableObj);
-                } else if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 1) {
-                    originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
-                } else {
-                    originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
                 }
-                if (field.getDeType() == 1) {
+                if (field.getDeExtractType() == 1) {
-                    if (field.getDeExtractType() == 0 || field.getDeExtractType() == 5) {
-                        whereName = String.format(MySQLConstants.STR_TO_DATE, originName, MySQLConstants.DEFAULT_DATE_FORMAT);
-                    }
-                    if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) {
-                        String cast = String.format(MySQLConstants.CAST, originName, MySQLConstants.DEFAULT_INT_FORMAT) + "/1000";
-                        whereName = String.format(MySQLConstants.FROM_UNIXTIME, cast, MySQLConstants.DEFAULT_DATE_FORMAT);
-                    }
-                    if (field.getDeExtractType() == 1) {
-                        whereName = originName;
-                    }
-                } else {
                     whereName = originName;
                 }
-                if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "null")) {
+            } else {
-                    whereValue = "";
+                whereName = originName;
-                } else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_null")) {
-                    whereValue = "";
-                } else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "empty")) {
-                    whereValue = "''";
-                } else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_empty")) {
-                    whereValue = "''";
-                } else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "in")) {
-                    whereValue = "('" + StringUtils.join(value, "','") + "')";
-                } else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "like")) {
-                    whereValue = "'%" + value + "%'";
-                } else {
-                    whereValue = String.format(MySQLConstants.WHERE_VALUE_VALUE, value);
-                }
-                list.add(SQLObj.builder()
-                        .whereField(whereName)
-                        .whereTermAndValue(whereTerm + whereValue)
-                        .build());
             }
-            List<String> strList = new ArrayList<>();
+
-            list.forEach(ele -> strList.add(ele.getWhereField() + " " + ele.getWhereTermAndValue()));
+            if (StringUtils.equalsIgnoreCase(request.getFilterType(), "enum")) {
-            if (CollectionUtils.isNotEmpty(list)) {
+                if (CollectionUtils.isNotEmpty(request.getEnumCheckField())) {
-                res.add("(" + String.join(" " + getLogic(request.getLogic()) + " ", strList) + ")");
+                    res.add("(" + whereName + " IN ('" + String.join("','", request.getEnumCheckField()) + "'))");
+                }
+            } else {
+                List<ChartCustomFilterItemDTO> filter = request.getFilter();
+                for (ChartCustomFilterItemDTO filterItemDTO : filter) {
+                    if (ObjectUtils.isEmpty(field)) {
+                        continue;
+                    }
+                    String value = filterItemDTO.getValue();
+                    String whereTerm = transMysqlFilterTerm(filterItemDTO.getTerm());
+                    String whereValue = "";
+
+                    if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "null")) {
+                        whereValue = "";
+                    } else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_null")) {
+                        whereValue = "";
+                    } else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "empty")) {
+                        whereValue = "''";
+                    } else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_empty")) {
+                        whereValue = "''";
+                    } else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "in")) {
+                        whereValue = "('" + StringUtils.join(value, "','") + "')";
+                    } else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "like")) {
+                        whereValue = "'%" + value + "%'";
+                    } else {
+                        whereValue = String.format(MySQLConstants.WHERE_VALUE_VALUE, value);
+                    }
+                    list.add(SQLObj.builder()
+                            .whereField(whereName)
+                            .whereTermAndValue(whereTerm + whereValue)
+                            .build());
+                }
+                List<String> strList = new ArrayList<>();
+                list.forEach(ele -> strList.add(ele.getWhereField() + " " + ele.getWhereTermAndValue()));
+                if (CollectionUtils.isNotEmpty(list)) {
+                    res.add("(" + String.join(" " + getLogic(request.getLogic()) + " ", strList) + ")");
+                }
             }
         }
         return CollectionUtils.isNotEmpty(res) ? "(" + String.join(" AND ", res) + ")" : null;

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -245,19 +245,29 @@ public class ChartViewService {
 
         // 过滤来自仪表板的条件
         List<ChartExtFilterRequest> extFilterList = new ArrayList<>();
-
         //组件过滤条件
         if (ObjectUtils.isNotEmpty(requestList.getFilter())) {
             for (ChartExtFilterRequest request : requestList.getFilter()) {
-                DatasetTableField datasetTableField = dataSetTableFieldsService.get(request.getFieldId());
+                // 解析多个fieldId,fieldId是一个逗号分隔的字符串
-                request.setDatasetTableField(datasetTableField);
+                String fieldId = request.getFieldId();
-                if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
+                if (StringUtils.isNotEmpty(fieldId)) {
-                    if (CollectionUtils.isNotEmpty(request.getViewIds())) {
+                    String[] fieldIds = fieldId.split(",");
-                        if (request.getViewIds().contains(view.getId())) {
+                    for (String fId : fieldIds) {
-                            extFilterList.add(request);
+                        ChartExtFilterRequest filterRequest = new ChartExtFilterRequest();
+                        BeanUtils.copyBean(filterRequest, request);
+                        filterRequest.setFieldId(fId);
+
+                        DatasetTableField datasetTableField = dataSetTableFieldsService.get(fId);
+                        filterRequest.setDatasetTableField(datasetTableField);
+                        if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
+                            if (CollectionUtils.isNotEmpty(filterRequest.getViewIds())) {
+                                if (filterRequest.getViewIds().contains(view.getId())) {
+                                    extFilterList.add(filterRequest);
+                                }
+                            } else {
+                                extFilterList.add(filterRequest);
+                            }
                         }
-                    } else {
-                        extFilterList.add(request);
                     }
                 }
             }

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -78,7 +78,8 @@ public class PanelGroupService {
     @Transactional
     public PanelGroup saveOrUpdate(PanelGroupRequest request) {
         try {
-            panelViewService.syncPanelViews(request);
+            Boolean mobileLayout = panelViewService.syncPanelViews(request);
+            request.setMobileLayout(mobileLayout);
         } catch (Exception e) {
             e.printStackTrace();
             LOGGER.error("更新panelView出错panelId：{}", request.getId());

backend/src/main/java/io/dataease/service/panel/PanelViewService.java

@@ -73,7 +73,8 @@ public class PanelViewService {
     }
 
     @Transactional(propagation=Propagation.REQUIRES_NEW)
-    public void syncPanelViews(PanelGroupWithBLOBs panelGroup){
+    public Boolean syncPanelViews(PanelGroupWithBLOBs panelGroup){
+        Boolean mobileLayout = false;
         String panelId = panelGroup.getId();
         Assert.notNull(panelId, "panelId cannot be null");
         String panelData = panelGroup.getPanelData();
@@ -85,12 +86,16 @@ public class PanelViewService {
                 if("view".equals(jsonObject.getString("type"))){
                     panelViewInsertDTOList.add(new PanelViewInsertDTO(jsonObject.getJSONObject("propValue").getString("viewId"),panelId));
                 }
+                if(jsonObject.getBoolean("mobileSelected")!=null&&jsonObject.getBoolean("mobileSelected")){
+                    mobileLayout = true;
+                }
             }
             extPanelViewMapper.deleteWithPanelId(panelId);
             if(CollectionUtils.isNotEmpty(panelViewInsertDTOList)){
                 extPanelViewMapper.savePanelView(panelViewInsertDTOList);
             }
         }
+        return mobileLayout;
     }
 
     public List<PanelViewTableDTO> detailList(String panelId){

backend/src/main/resources/db/migration/V29__de1.6.sql

@@ -10,9 +10,13 @@ CREATE TABLE `dataset_row_permissions` (
    PRIMARY KEY (`id`)
 )ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;
 
+
 ALTER TABLE `panel_link` ADD COLUMN `user_id` BIGINT(20) NULL DEFAULT NULL ;
 
 ALTER TABLE `panel_link_mapping` ADD COLUMN `user_id` BIGINT(20) NULL DEFAULT NULL ;
 
 ALTER TABLE `panel_link`CHANGE COLUMN `user_id` `user_id` BIGINT(20) NOT NULL ,DROP PRIMARY KEY;
 
+ALTER TABLE `panel_group`
+ADD COLUMN `mobile_layout` tinyint(1) NULL DEFAULT 0 COMMENT '启用移动端布局' AFTER `remark`;
+

backend/src/main/resources/generatorConfig.xml

@@ -62,7 +62,6 @@
         <!--要生成的数据库表 -->
         <table tableName="panel_link_mapping">
         </table>
-
+        <table tableName="panel_group"/>
-
     </context>
 </generatorConfiguration>

frontend/src/api/dataset/dataset.js

@@ -138,6 +138,15 @@ export function fieldValues(fieldId) {
   })
 }
 
+export function multFieldValues(data) {
+  return request({
+    url: '/dataset/field/multFieldValues',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
 export function isKettleRunning(showLoading = true) {
   return request({
     url: '/dataset/group/isKettleRunning',

frontend/src/components/DeDrag/index.vue

@@ -9,6 +9,7 @@
         [classNameResizable]: resizable,
         [classNameRotating]: rotating,
         [classNameRotatable]: rotatable,
+        [classNameActive]: enabled ,
         ['linkageSetting']:linkageActive,
         ['positionChange']:!(dragging || resizing||rotating)
       },
@@ -22,7 +23,7 @@
     <div
       :class="[
         {
-          [classNameActive]: enabled ,
+          ['de-drag-active-inner']:enabled,
           [classNameMouseOn]: mouseOn || active
         },
         className
@@ -1809,7 +1810,10 @@ export default {
 }
 
 .de-drag-active{
-  outline: 1px solid #70c0ff;
   user-select: none;
 }
+
+.de-drag-active-inner{
+  outline: 1px solid #70c0ff;
+}
 </style>

frontend/src/components/canvas/components/Editor/CloseBar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="bar-main">
+    <div style="margin-right: -1px;width: 18px">
+      <i class="icon iconfont icon-guanbi" @click.stop="closePreview" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
+import LinkageField from '@/components/canvas/components/Editor/LinkageField'
+
+export default {
+  components: { },
+
+  props: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    closePreview() {
+      this.$emit('closePreview')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .bar-main{
+    position: absolute;
+    right: 0px;
+    float:right;
+    z-index: 2;
+    border-radius:2px;
+    padding-left: 5px;
+    padding-right: 2px;
+    cursor:pointer!important;
+    background-color: #0a7be0;
+  }
+  .bar-main i{
+    color: white;
+    float: right;
+    margin-right: 3px;
+  }
+
+</style>

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -6,6 +6,7 @@
     @mousedown="elementMouseDown"
   >
     <edit-bar v-if="componentActiveFlag" :element="config" @showViewDetails="showViewDetails" />
+    <close-bar v-if="previewVisible" @closePreview="closePreview" />
     <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"
@@ -14,6 +15,7 @@
       :out-style="config.style"
       :element="config"
       :in-screen="inScreen"
+      :h="config.style.height"
     />
     <component
       :is="config.component"
@@ -28,6 +30,7 @@
       :search-count="searchCount"
       :h="config.style.height"
       :edit-mode="'preview'"
+      :terminal="terminal"
     />
   </div>
 </template>
@@ -40,9 +43,10 @@ import { mapState } from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
+import CloseBar from '@/components/canvas/components/Editor/CloseBar'
 
 export default {
-  components: { MobileCheckBar, DeOutWidget, EditBar },
+  components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
   mixins: [mixins],
   props: {
     config: {
@@ -64,11 +68,20 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    terminal: {
+      type: String,
+      default: 'pc'
+    }
+  },
+  data() {
+    return {
+      previewVisible: false
     }
   },
   computed: {
     componentActiveFlag() {
-      return this.curComponent && this.config === this.curComponent
+      return (this.curComponent && this.config === this.curComponent) && !this.previewVisible
     },
     curGap() {
       return this.config.auxiliaryMatrix ? this.componentGap : 0
@@ -156,7 +169,14 @@ export default {
       this.$store.commit('setCurComponent', { component: this.config, index: this.index })
     },
     showViewDetails() {
-      this.$refs.wrapperChild.openChartDetailsDialog()
+      if (this.terminal === 'pc') {
+        this.$refs.wrapperChild.openChartDetailsDialog()
+      } else {
+        this.previewVisible = true
+      }
+    },
+    closePreview() {
+      this.previewVisible = false
     }
   }
 }

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bar-main">
-    <div v-if="linkageSettingStatus&&element!==curLinkageView&&element.type==='view'" style="margin-right: -1px;width: 18px">
+    <div v-if="linkageAreaShow" style="margin-right: -1px;width: 18px">
       <el-checkbox v-model="linkageInfo.linkageActive" />
       <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
     </div>
-    <div v-else-if="!linkageSettingStatus">
+    <div v-if="normalAreaShow">
       <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet">
         <span slot="icon" :title="$t('panel.setting')">
           <i class="icon iconfont icon-shezhi" style="margin-top:2px" />
@@ -26,7 +26,6 @@
         <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
       </span>
     </div>
-
   </div>
 </template>
 
@@ -54,6 +53,10 @@ export default {
       type: String,
       required: false,
       default: 'preview'
+    },
+    previewVisible: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -70,6 +73,14 @@ export default {
   mounted() {
   },
   computed: {
+    // 联动区域按钮显示
+    linkageAreaShow() {
+      return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view'
+    },
+    // 编辑或预览区域显示
+    normalAreaShow() {
+      return !this.linkageSettingStatus
+    },
     existLinkage() {
       let linkageFiltersCount = 0
       this.componentData.forEach(item => {
@@ -102,6 +113,9 @@ export default {
   beforeDestroy() {
   },
   methods: {
+    closePreview() {
+      this.$emit('closePreview')
+    },
     createTimer() {
       if (!this.timer) {
         this.timer = setInterval(() => {

frontend/src/components/canvas/components/Editor/LinkageField.vue

@@ -51,7 +51,7 @@
                   <svg-icon v-if="item.deType === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
                   <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
                 </span>
-                <span style="float: left; color: #8492a6; font-size: 12px">{{ itemLinkage.targetField }}-{{ item.name }}</span>
+                <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
               </el-option>
             </el-select>
           </div>

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -19,6 +19,7 @@
           :config="item"
           :search-count="searchCount"
           :in-screen="inScreen"
+          :terminal="terminal"
         />
         <!--视图详情-->
         <el-dialog
@@ -36,6 +37,17 @@
           </span>
           <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
+
+        <!--手机视图详情-->
+        <el-dialog
+          :title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
+          :visible.sync="mobileChartDetailsVisible"
+          :fullscreen="true"
+          class="mobile-dialog-css"
+          :destroy-on-close="true"
+        >
+          <UserViewMobileDialog :chart="showChartInfo" :chart-table="showChartTableInfo" />
+        </el-dialog>
       </div>
     </div>
   </div>
@@ -52,9 +64,10 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
 
 export default {
-  components: { ComponentWrapper, UserViewDialog, CanvasOptBar },
+  components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
   model: {
     prop: 'show',
     event: 'change'
@@ -102,6 +115,7 @@ export default {
       mainHeight: '100%',
       searchCount: 0,
       chartDetailsVisible: false,
+      mobileChartDetailsVisible: false,
       showChartInfo: {},
       showChartTableInfo: {},
       // 布局展示 1.pc pc端布局 2.mobile 移动端布局
@@ -215,6 +229,7 @@ export default {
       const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
       this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比
       this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
+      this.$store.commit('setPreviewCanvasScale', (this.scaleWidth / 100), (this.scaleHeight / 100))
       this.handleScaleChange()
     },
     resetID(data) {
@@ -248,7 +263,11 @@ export default {
     openChartDetailsDialog(chartInfo) {
       this.showChartInfo = chartInfo.chart
       this.showChartTableInfo = chartInfo.tableChart
-      this.chartDetailsVisible = true
+      if (this.terminal === 'pc') {
+        this.chartDetailsVisible = true
+      } else {
+        this.mobileChartDetailsVisible
+      }
     },
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
@@ -308,9 +327,16 @@ export default {
     padding: 10px 20px 20px;
   }
 
+  .mobile-dialog-css > > > .el-dialog__body {
+    padding: 0px;
+  }
   ::-webkit-scrollbar {
     width: 0px!important;
     height: 0px!important;
   }
 
+  ::v-deep .el-tabs__nav{
+   z-index: 0;
+  }
+
 </style>

frontend/src/components/canvas/components/Editor/index.vue

@@ -80,6 +80,7 @@
         :element="item"
         :out-style="getShapeStyleInt(item.style)"
         :active="item === curComponent"
+        :h="getShapeStyleIntDeDrag(item.style,'height')"
       />
       <component
         :is="item.component"
@@ -1194,6 +1195,7 @@ export default {
             matrixStyleOriginWidth: this.matrixStyle.originWidth,
             matrixStyleOriginHeight: this.matrixStyle.originHeight
           })
+        this.$store.commit('setPreviewCanvasScale', this.scalePointWidth, this.scalePointHeight)
       }
     },
     getShapeStyleIntDeDrag(style, prop) {
@@ -1567,13 +1569,6 @@ export default {
    padding:3px;
 }
 
-// 拖拽组件样式
-
-.de-drag-active{
-  outline: 1px solid #70c0ff;
-  user-select: none;
-}
-
 .ref-line {
   position: absolute;
   background-color: #70c0ff;;

frontend/src/components/canvas/custom-component/UserView.vue

@@ -69,6 +69,7 @@ import DrillPath from '@/views/chart/view/DrillPath'
 import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 import EditBarView from '@/components/canvas/components/Editor/EditBarView'
+import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
 
 export default {
   name: 'UserView',
@@ -108,6 +109,10 @@ export default {
       type: Boolean,
       require: false,
       default: true
+    },
+    terminal: {
+      type: String,
+      default: 'pc'
     }
   },
   data() {
@@ -125,12 +130,23 @@ export default {
         msg: ''
       },
       timeMachine: null,
+      scaleTimeMachine: null,
       changeIndex: 0,
+      changeScaleIndex: 0,
       pre: null,
-      preCanvasPanel: null
+      preCanvasPanel: null,
+      sourceCustomAttrStr: null,
+      sourceCustomStyleStr: null
     }
   },
   computed: {
+    scaleCoefficient() {
+      if (this.terminal === 'pc') {
+        return 1.1
+      } else {
+        return 4
+      }
+    },
     editBarViewShowFlag() {
       return this.active && this.inTab
     },
@@ -210,7 +226,8 @@ export default {
       'canvasStyleData',
       'nowPanelTrackInfo',
       'nowPanelJumpInfo',
-      'publicLinkStatus'
+      'publicLinkStatus',
+      'previewCanvasScale'
     ])
   },
 
@@ -269,6 +286,16 @@ export default {
       if (newVal === 'map' && newVal !== oldVal) {
         this.initAreas()
       }
+    },
+    // 监控缩放比例
+    previewCanvasScale: {
+      handler(newVal, oldVal) {
+        console.log('previewCanvasScale:' + JSON.stringify(this.previewCanvasScale))
+        this.destroyScaleTimeMachine()
+        this.changeScaleIndex++
+        this.chartScale(this.changeScaleIndex)
+      },
+      deep: true
     }
   },
   created() {
@@ -278,6 +305,24 @@ export default {
     }
   },
   methods: {
+    // 根据仪表板的缩放比例，修改视图内部参数
+    mergeScale() {
+      const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
+      const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
+      const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
+      recursionTransObj(customAttrTrans, customAttrChart, scale)
+      recursionTransObj(customStyleTrans, customStyleChart, scale)
+      this.chart = {
+        ...this.chart,
+        customAttr: JSON.stringify(customAttrChart),
+        customStyle: JSON.stringify(customStyleChart)
+      }
+      // console.log('customAttrChartSource:' + JSON.stringify(JSON.parse(this.sourceCustomAttrStr)))
+      // console.log('customAttrChart:' + JSON.stringify(customAttrChart))
+      // console.log('customStyleChartSource:' + JSON.stringify(JSON.parse(this.sourceCustomStyleStr)))
+      // console.log('customStyleChart:' + JSON.stringify(customStyleChart))
+      this.mergeStyle()
+    },
     mergeStyle() {
       if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
         const customAttrChart = JSON.parse(this.chart.customAttr)
@@ -319,6 +364,8 @@ export default {
           // 将视图传入echart组件
           if (response.success) {
             this.chart = response.data
+            this.sourceCustomAttrStr = this.chart.customAttr
+            this.sourceCustomStyleStr = this.chart.customStyle
             this.chart.drillFields = this.chart.drillFields ? JSON.parse(this.chart.drillFields) : []
             if (!response.data.drill) {
               this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
@@ -327,7 +374,7 @@ export default {
             this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : []))
             this.drillFields = JSON.parse(JSON.stringify(response.data.drillFields))
             this.requestStatus = 'merging'
-            this.mergeStyle()
+            this.mergeScale()
             this.requestStatus = 'success'
             this.httpRequest.status = true
           } else {
@@ -534,6 +581,10 @@ export default {
       this.timeMachine && clearTimeout(this.timeMachine)
       this.timeMachine = null
     },
+    destroyScaleTimeMachine() {
+      this.scaleTimeMachine && clearTimeout(this.scaleTimeMachine)
+      this.scaleTimeMachine = null
+    },
 
     // 边框变化
     chartResize(index) {
@@ -547,6 +598,18 @@ export default {
       }
     },
 
+    // 边框变化 修改视图内部参数
+    chartScale(index) {
+      if (this.$refs[this.element.propValue.id]) {
+        this.scaleTimeMachine = setTimeout(() => {
+          if (index === this.changeScaleIndex) {
+            this.mergeScale()
+          }
+          this.destroyScaleTimeMachine()
+        }, 100)
+      }
+    },
+
     renderComponent() {
       return this.chart.render
     }

frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue

@@ -0,0 +1,90 @@
+<template>
+  <de-container>
+    <de-main-container v-if="!chart.type.includes('table')" :style="customStyle" class="full-div">
+      <chart-component v-if="!chart.type.includes('text') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
+      <chart-component-g2 v-if="!chart.type.includes('text') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
+      <label-normal v-if="chart.type.includes('text')" :chart="chart" class="table-class" />
+    </de-main-container>
+    <de-main-container v-else>
+      <table-normal :chart="chartTable" :show-summary="false" class="table-class" />
+    </de-main-container>
+  </de-container>
+</template>
+
+<script>
+
+import ChartComponent from '@/views/chart/components/ChartComponent.vue'
+import TableNormal from '@/views/chart/components/table/TableNormal'
+import LabelNormal from '@/views/chart/components/normal/LabelNormal'
+import { mapState } from 'vuex'
+import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+
+export default {
+  name: 'UserViewMobileDialog',
+  components: { DeContainer, DeMainContainer, ChartComponentG2, ChartComponent, TableNormal, LabelNormal },
+  props: {
+    chart: {
+      type: Object,
+      default: null
+    },
+    chartTable: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      refId: null
+    }
+  },
+  computed: {
+    customStyle() {
+      let style = {
+      }
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+          style = {
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            ...style
+          }
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+          style = {
+            background: this.canvasStyleData.panel.color,
+            ...style
+          }
+        }
+      }
+      if (!style.background) {
+        style.background = '#FFFFFF'
+      }
+      return style
+    },
+    ...mapState([
+      'isClickComponent',
+      'curComponent',
+      'componentData',
+      'canvasStyleData'
+    ])
+  },
+  methods: {
+
+    renderComponent() {
+      return this.chart.render
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .ms-main-container {
+    border: 0px;
+  }
+  .chart-class{
+    height: 100%;
+  }
+  .table-class{
+    height: 100%;
+  }
+</style>

frontend/src/components/canvas/custom-component/component-list.js

@@ -85,7 +85,7 @@ export const assistList = [
     component: 'rect-shape',
     type: 'rect-shape',
     label: '矩形',
-    icon: 'iconfont icon-juxing',
+    icon: 'iconfont icon-juxing1',
     defaultClass: 'text-filter'
   },
   {

frontend/src/components/canvas/utils/style.js

@@ -75,7 +75,7 @@ export function colorRgb(color, opacity) {
       sColor = sColorNew
     }
     // 处理六位的颜色值
-    var sColorChange = []
+    const sColorChange = []
     for (let i = 1; i < 7; i += 2) {
       sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
     }
@@ -88,3 +88,100 @@ export function colorRgb(color, opacity) {
     return sColor
   }
 }
+
+export const customAttrTrans = {
+  'size': [
+    'barWidth',
+    'lineWidth',
+    'lineSymbolSize',
+    'pieInnerRadius',
+    'pieOuterRadius',
+    'funnelWidth', // 漏斗图 最大宽度
+    'tableTitleFontSize',
+    'tableItemFontSize',
+    'tableTitleHeight',
+    'tableItemHeight',
+    'dimensionFontSize',
+    'quotaFontSize',
+    'spaceSplit', // 间隔
+    'scatterSymbolSize', // 气泡大小，散点图
+    'treemapWidth', // 矩形树图
+    'treemapHeight',
+    'radarSize'// 雷达占比
+  ],
+  'label': [
+    'fontSize'
+  ],
+  'tooltip': {
+    'textStyle': ['fontSize']
+  }
+}
+export const customStyleTrans = {
+  'text': ['fontSize'],
+  'legend': {
+    'textStyle': ['fontSize']
+  },
+  'xAxis': {
+    'nameTextStyle': ['fontSize'],
+    'axisLabel': ['fontSize'],
+    'splitLine': {
+      'lineStyle': ['width']
+    }
+  },
+  'yAxis': {
+    'nameTextStyle': ['fontSize'],
+    'axisLabel': ['fontSize'],
+    'splitLine': {
+      'lineStyle': ['width']
+    }
+  },
+  'split': {
+    'name': ['fontSize'],
+    'axisLine': {
+      'lineStyle': ['width']
+    },
+    'axisTick': {
+      'lineStyle': ['width']
+    },
+    'axisLabel': ['margin', 'fontSize'],
+    'splitLine': {
+      'lineStyle': ['width']
+    }
+  }
+}
+
+export function getScaleValue(propValue, scale) {
+  const propValueTemp = Math.round(propValue * scale)
+  return propValueTemp > 1 ? propValueTemp : 1
+}
+
+export function recursionTransObj(template, infoObj, scale) {
+  // console.log('recursionObj++')
+  for (const templateKey in template) {
+    // 如果是数组 进行赋值计算
+    if (template[templateKey] instanceof Array) {
+      template[templateKey].forEach(templateProp => {
+        if (infoObj[templateKey] && infoObj[templateKey][templateProp]) {
+          const afterValue = getScaleValue(infoObj[templateKey][templateProp], scale)
+          console.log(templateKey + '.' + templateProp + '=' + infoObj[templateKey][templateProp] + ';scale:' + scale + ',after:' + afterValue)
+          infoObj[templateKey][templateProp] = afterValue
+        }
+      })
+    } else {
+      // 如果是对象 继续进行递归
+      if (infoObj[templateKey]) {
+        recursionTransObj(template[templateKey], infoObj[templateKey], scale)
+      }
+    }
+  }
+}
+
+export function componentScalePublic(chartInfo, heightScale, widthScale) {
+  const scale = Math.min(heightScale, widthScale)
+  // attr 缩放转换
+  recursionTransObj(this.customAttrTrans, chartInfo.customAttr, scale)
+  // style 缩放转换
+  recursionTransObj(this.customStyleTrans, chartInfo.customStyle, scale)
+  return chartInfo
+}
+

frontend/src/components/canvas/utils/utils.js

@@ -51,7 +51,7 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
     top: mobileSource.style.top
   }
   mainSource.mobileStyle.x = mobileSource.x
-  mainSource.mobileStyle.y = mobileSource.x
+  mainSource.mobileStyle.y = mobileSource.y
   mainSource.mobileStyle.sizex = mobileSource.sizex
   mainSource.mobileStyle.sizey = mobileSource.sizey
 }

frontend/src/components/dataease/DeOutWidget.vue

@@ -23,6 +23,7 @@
                 :element="element"
                 :in-draw="inDraw"
                 :in-screen="inScreen"
+                :size="sizeInfo"
               />
             </div>
           </div>
@@ -39,7 +40,7 @@ export default {
   props: {
     element: {
       type: Object,
-      default: null
+      default: () => {}
     },
     inDraw: {
       type: Boolean,
@@ -49,16 +50,37 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    h: {
+      type: Number,
+      default: 50
     }
   },
   data() {
     return {
+      inputMaxSize: 46,
+      inputLargeSize: 42,
+      inputSmallSize: 38,
+      inputMiniSize: 34,
       options: null,
       showNumber: false,
       mainClass: ''
     }
   },
-
+  computed: {
+    sizeInfo() {
+      let size
+      if (this.h > this.inputMaxSize) {
+      } else if (this.h > this.inputLargeSize) {
+        size = 'medium'
+      } else if (this.h > this.inputSmallSize) {
+        size = 'small'
+      } else {
+        size = 'mini'
+      }
+      return size
+    }
+  },
   mounted() {
     this.watchSize()
   },

frontend/src/components/widget/DeWidget/DeButton.vue

@@ -4,6 +4,7 @@
     v-if="options!== null && options.attrs!==null"
     :type="options.attrs.type"
     :round="options.attrs.round"
+    :size="size"
   >
     {{ options.value }}
   </el-button>
@@ -20,7 +21,8 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -1,21 +1,23 @@
 <template>
   <el-date-picker
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null"
     ref="dateRef"
     v-model="values"
-    :type="options.attrs.type"
+    :type="element.options.attrs.type"
-    :range-separator="$t(options.attrs.rangeSeparator)"
+    :range-separator="$t(element.options.attrs.rangeSeparator)"
-    :start-placeholder="$t(options.attrs.startPlaceholder)"
+    :start-placeholder="$t(element.options.attrs.startPlaceholder)"
-    :end-placeholder="$t(options.attrs.endPlaceholder)"
+    :end-placeholder="$t(element.options.attrs.endPlaceholder)"
-    :placeholder="$t(options.attrs.placeholder)"
+    :placeholder="$t(element.options.attrs.placeholder)"
     :append-to-body="inScreen"
-    style="min-height: 36px;"
     value-format="timestamp"
+    :size="size"
+    :editable="false"
     @change="dateChange"
   />
 </template>
 
 <script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
 import { timeSection } from '@/utils'
 export default {
 
@@ -32,24 +34,62 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {
-      options: null,
       operator: 'between',
       values: null
     }
   },
-  created() {
+  computed: {
-    this.options = this.element.options
+    defaultoptions() {
-
+      if (!this.element || !this.element.options || !this.element.options.attrs.default) return ''
-    if (this.options.value) {
+      return JSON.stringify(this.element.options.attrs.default)
-      if (this.options.attrs.type !== 'daterange') {
+    },
-        this.values = Array.isArray(this.options.value) ? this.options.value[0] : this.options.value
+    defaultValueStr() {
-      } else {
+      if (!this.element || !this.element.options || !this.element.options.value) return ''
-        this.values = this.options.value
+      return this.element.options.value.toString()
+    }
+  },
+  watch: {
+    'defaultValueStr': function(value, old) {
+      if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+        // 如果设置了动态时间 不做任何操作
+        return
       }
+      if (value === old) return
+      this.values = this.fillValueDerfault()
+      this.dateChange(value)
+    },
+    'defaultoptions': function(val, old) {
+      // console.log('default chaneg')
+      if (this.element.serviceName !== 'timeDateWidget') {
+        if (!this.element.options.attrs.default.isDynamic) {
+          this.values = this.fillValueDerfault()
+          this.dateChange(this.values)
+          return
+        }
+      }
+      if (val === old) return
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      this.values = widget.dynamicDateFormNow(this.element)
+      this.dateChange(this.values)
+    }
+  },
+  created() {
+    if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+      if (this.element.options.attrs.default) {
+        const widget = ApplicationContext.getService(this.element.serviceName)
+        this.values = widget.dynamicDateFormNow(this.element)
+        this.dateChange(this.values)
+      }
+      return
+    }
+    if (this.element.options.value) {
+      this.values = this.fillValueDerfault()
+      this.dateChange(this.values)
     }
   },
   methods: {
@@ -57,32 +97,35 @@ export default {
       this.setCondition()
     },
     setCondition() {
-      if (this.values) {
-        if (this.options.attrs.type !== 'daterange') {
-          this.options.value = Array.isArray(this.values) ? this.values[0] : this.values
-        } else {
-          this.options.value = this.values
-        }
-      } else {
-        this.options.value = []
-      }
       const param = {
         component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: this.formatFilterValue(),
         operator: this.operator
       }
       param.value = this.formatValues(param.value)
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
     dateChange(value) {
+      if (!this.inDraw) {
+        if (value === null) {
+          this.element.options.value = ''
+        } else {
+          this.element.options.value = Array.isArray(value) ? value.join() : value.toString()
+        }
+      }
       this.setCondition()
       this.styleChange()
     },
+    formatFilterValue() {
+      if (this.values === null) return []
+      if (Array.isArray(this.values)) return this.values
+      return [this.values]
+    },
     formatValues(values) {
       if (!values || values.length === 0) {
         return []
       }
-      if (this.options.attrs.type === 'daterange') {
+      if (this.element.options.attrs.type === 'daterange') {
         if (values.length !== 2) {
           return null
         }
@@ -94,11 +137,21 @@ export default {
         return results
       } else {
         const value = values[0]
-        return timeSection(value, this.options.attrs.type)
+        return timeSection(parseFloat(value), this.element.options.attrs.type)
       }
     },
     styleChange() {
       this.$store.commit('recordStyleChange')
+    },
+    fillValueDerfault() {
+      const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
+      if (this.element.options.attrs.type === 'daterange') {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
+        return defaultV.split(',').map(item => parseFloat(item))
+      } else {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
+        return parseFloat(defaultV.split(',')[0])
+      }
     }
   }
 }

frontend/src/components/widget/DeWidget/DeInputSearch.vue

@@ -1,12 +1,14 @@
 <template>
 
   <el-input
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null"
     v-model="value"
     resize="vertical"
-    :placeholder="$t(options.attrs.placeholder)"
+    :placeholder="$t(element.options.attrs.placeholder)"
+    @input="valueChange"
     @keypress.enter.native="search"
     @dblclick="setEdit"
+    :size="size"
   >
 
     <el-button slot="append" icon="el-icon-search" @click="search" />
@@ -25,42 +27,51 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {
-      options: null,
       operator: 'like',
       value: null,
       canEdit: false
     }
   },
+  watch: {
+    'element.options.value': function(value, old) {
+      if (value === old) return
+      this.value = value
+      this.search()
+    }
+  },
   created() {
-    this.options = this.element.options
+    if (this.element.options.value) {
-    if (this.inDraw && this.options.value && this.options.value.length > 0) {
+      this.value = this.element.options.value
-      this.value = this.options.value[0]
+      this.search()
     }
   },
   methods: {
     search() {
-    //   this.options.value && this.setCondition()
+      if (!this.inDraw) {
-      this.options.value = []
+        this.element.options.value = this.value
-      if (this.inDraw && this.value) {
-        this.options.value = [this.value]
       }
-
       this.setCondition()
     },
     setCondition() {
       const param = {
         component: this.element,
-        value: !this.options.value ? [] : Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: !this.value ? [] : [this.value],
         operator: this.operator
       }
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
     setEdit() {
       this.canEdit = true
+    },
+    valueChange(val) {
+      if (!this.inDraw) {
+        this.element.options.value = val
+      }
     }
   }
 }

frontend/src/components/widget/DeWidget/DeNumberRange.vue

@@ -1,13 +1,13 @@
 <template>
 
-  <el-form v-if="options!== null && options.attrs!==null" ref="form" :model="form" :rules="rules">
+  <el-form v-if="element.options!== null && element.options.attrs!==null" ref="form" :model="form" :rules="rules">
     <div class="de-number-range-container">
       <el-form-item prop="min">
-        <el-input v-model="form.min" :placeholder="$t(options.attrs.placeholder_min)" @change="handleMinChange" />
+        <el-input v-model="form.min" :placeholder="$t(element.options.attrs.placeholder_min)" @input="inputChange" @change="handleMinChange" :size="size"/>
       </el-form-item>
       <span>{{ $t('denumberrange.split_placeholder') }}</span>
       <el-form-item prop="max">
-        <el-input v-model="form.max" :placeholder="$t(options.attrs.placeholder_max)" @change="handleMaxChange" />
+        <el-input v-model="form.max" :placeholder="$t(element.options.attrs.placeholder_max)" @input="inputChange" @change="handleMaxChange" :size="size"/>
       </el-form-item>
     </div>
   </el-form>
@@ -27,12 +27,12 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
 
   data() {
     return {
-      options: null,
       operator: 'between',
       values: null,
       canEdit: false,
@@ -54,7 +54,24 @@ export default {
       timeMachine: null
     }
   },
+  computed: {
+    defaultvalues() {
+      if (!this.element.options.value) {
+        return JSON.stringify([])
+      }
+      return JSON.stringify(this.element.options.value)
+    }
+  },
   watch: {
+    'defaultvalues': function(value, old) {
+      if (value === old) return
+      const values = this.element.options.value
+      this.form.min = values[0]
+      if (values.length > 1) {
+        this.form.max = values[1]
+      }
+      this.search()
+    },
     form: {
       handler(value) {
         this.destryTimeMachine()
@@ -65,12 +82,13 @@ export default {
     }
   },
   created() {
-    this.options = this.element.options
+    if (this.element.options.value && this.element.options.value.length > 0) {
-    if (this.inDraw && this.options.value && this.options.value.length > 0) {
+      const values = this.element.options.value
-      this.form.min = this.options.value[0]
+      this.form.min = values[0]
-      if (this.options.value.length > 1) {
+      if (values.length > 1) {
-        this.form.max = this.options.value[1]
+        this.form.max = values[1]
       }
+      this.search()
     }
   },
   methods: {
@@ -136,13 +154,15 @@ export default {
     },
 
     search() {
-      this.$refs.form.validate(valid => {
+      this.$nextTick(() => {
-        if (!valid) {
+        this.$refs.form.validate(valid => {
-          return false
+          if (!valid) {
-        }
+            return false
+          }
 
-        this.setCondition()
+          this.setCondition()
-        this.$store.commit('recordStyleChange')
+          this.$store.commit('recordStyleChange')
+        })
       })
     },
     setCondition() {
@@ -153,7 +173,6 @@ export default {
         operator: this.operator
       }
 
-      this.inDraw && (this.options.value = param.value)
       if (this.form.min && this.form.max) {
         this.inDraw && this.$store.commit('addViewFilter', param)
         return
@@ -178,6 +197,13 @@ export default {
     },
     styleChange() {
       this.$store.commit('recordStyleChange')
+    },
+
+    inputChange(val) {
+      if (!this.inDraw) {
+        const values = [this.form.min, this.form.max]
+        this.element.options.value = values
+      }
     }
   }
 }
@@ -186,6 +212,7 @@ export default {
 <style lang="scss" scoped>
 .de-number-range-container {
   display: inline;
+  max-height: 40px;
   >>>div.el-form-item {
     width: calc(50% - 10px) !important;
     display: inline-block;

frontend/src/components/widget/DeWidget/DeQuarter.vue

@@ -2,8 +2,9 @@
   <el-quarter
     v-if="options!== null && options.attrs!==null"
     v-model="options.value"
-
     :placeholder="options.attrs.placeholder"
+    :size="size"
+    :editable="false"
   />
 </template>
 
@@ -18,7 +19,8 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -1,38 +1,39 @@
 <template>
 
   <el-select
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null && show"
     ref="deSelect"
-    v-model="options.value"
+    v-model="value"
     :collapse-tags="showNumber"
-    :clearable="!options.attrs.multiple"
+    :clearable="!element.options.attrs.multiple"
-    :multiple="options.attrs.multiple"
+    :multiple="element.options.attrs.multiple"
-    :placeholder="$t(options.attrs.placeholder)"
+    :placeholder="$t(element.options.attrs.placeholder)"
     :popper-append-to-body="inScreen"
+    :size="size"
     @change="changeValue"
     @focus="setOptionWidth"
   >
     <el-option
-      v-for="item in options.attrs.datas"
+      v-for="item in datas"
-      :key="item[options.attrs.key]"
+      :key="item[element.options.attrs.key]"
       :style="{width:selectOptionWidth}"
-      :label="item[options.attrs.label]"
+      :label="item[element.options.attrs.label]"
-      :value="item[options.attrs.value]"
+      :value="item[element.options.attrs.value]"
     >
-      <span :title="item[options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[options.attrs.label] }}</span>
+      <span :title="item[element.options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[element.options.attrs.label] }}</span>
     </el-option>
   </el-select>
 
 </template>
 
 <script>
-import { fieldValues } from '@/api/dataset/dataset'
+import { multFieldValues } from '@/api/dataset/dataset'
 export default {
 
   props: {
     element: {
       type: Object,
-      default: null
+      default: () => {}
     },
     inDraw: {
       type: Boolean,
@@ -42,58 +43,89 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {
-      options: null,
       showNumber: false,
-      selectOptionWidth: 0
+      selectOptionWidth: 0,
+      show: true,
+      value: null,
+      datas: []
     }
   },
   computed: {
     operator() {
-      return this.options.attrs.multiple ? 'in' : 'eq'
+      return this.element.options.attrs.multiple ? 'in' : 'eq'
+    },
+    defaultValueStr() {
+      if (!this.element || !this.element.options || !this.element.options.value) return ''
+      return this.element.options.value.toString()
     }
   },
+
   watch: {
-    'options.attrs.multiple': function(value) {
+    'defaultValueStr': function(value, old) {
-      const sourceValue = this.options.value
+      if (value === old) return
-      const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
+      this.value = this.fillValueDerfault()
-      if (value) {
+      this.changeValue(value)
-        !sourceValid && (this.options.value = [])
+    },
-        sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
+    'element.options.attrs.fieldId': function(value, old) {
-        !this.inDraw && (this.options.value = [])
+      if (typeof value === 'undefined' || value === old) return
-      } else {
+      this.datas = []
-        !sourceValid && (this.options.value = null)
+      this.element.options.attrs.fieldId &&
-        sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
+      this.element.options.attrs.fieldId.length > 0 &&
-        !this.inDraw && (this.options.value = null)
+      multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+        this.datas = this.optionDatas(res.data)
+      }) || (this.element.options.value = '')
+    },
+    'element.options.attrs.multiple': function(value, old) {
+      if (typeof old === 'undefined' || value === old) return
+      if (!this.inDraw) {
+        this.value = value ? [] : null
+        this.element.options.value = ''
       }
-    }
+
-  },
+      this.show = false
-  created() {
+      this.$nextTick(() => {
-    this.options = this.element.options
+        this.show = true
-    if (this.options.attrs.fieldId) {
-      fieldValues(this.options.attrs.fieldId).then(res => {
-        this.options.attrs.datas = this.optionDatas(res.data)
       })
     }
 
-    // this.setCondition()
   },
-  mounted() {
+  created() {
-    // this.$nextTick(() => {
+    this.initLoad()
-    //   this.options && this.options.value && this.changeValue(this.options.value)
-    // })
-    this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.changeValue(this.options.value)
   },
+
   methods: {
+    initLoad() {
+      this.value = this.fillValueDerfault()
+      this.datas = []
+      if (this.element.options.attrs.fieldId) {
+        multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+          this.datas = this.optionDatas(res.data)
+        })
+      }
+      if (this.element.options.value) {
+        this.value = this.fillValueDerfault()
+        this.changeValue(this.value)
+      }
+    },
     changeValue(value) {
+      if (!this.inDraw) {
+        if (value === null) {
+          this.element.options.value = ''
+        } else {
+          this.element.options.value = Array.isArray(value) ? value.join() : value
+        }
+      }
       this.setCondition()
       this.styleChange()
       this.showNumber = false
+
       this.$nextTick(() => {
-        if (!this.$refs.deSelect.$refs.tags || !this.options.attrs.multiple) {
+        if (!this.element.options.attrs.multiple || !this.$refs.deSelect || !this.$refs.deSelect.$refs.tags) {
           return
         }
         const kids = this.$refs.deSelect.$refs.tags.children[0].children
@@ -108,11 +140,26 @@ export default {
     setCondition() {
       const param = {
         component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: this.formatFilterValue(),
         operator: this.operator
       }
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
+    formatFilterValue() {
+      if (this.value === null) return []
+      if (Array.isArray(this.value)) return this.value
+      return this.value.split(',')
+    },
+    fillValueDerfault() {
+      const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
+      if (this.element.options.attrs.multiple) {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
+        return defaultV.split(',')
+      } else {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
+        return defaultV.split(',')[0]
+      }
+    },
     styleChange() {
       this.$store.commit('recordStyleChange')
     },

frontend/src/components/widget/DeWidget/DeSelectGrid.vue

@@ -1,39 +1,24 @@
 <template>
 
-  <div v-if="options!== null && options.attrs!==null" class="de-select-grid-class">
+  <div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
     <div class="de-select-grid-search">
-      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
+      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" :size="size" prefix-icon="el-icon-search" clearable />
     </div>
     <div class="list">
-      <el-tree
+
-        v-if="options!== null && options.attrs!==null"
+      <div v-if="element.options.attrs.multiple" class="checkbox-group-container">
-        ref="deSelectGrid"
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('commons.all') }}</el-checkbox>
-        :data="(options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas).filter(node => node.text.includes(keyWord))"
+
-        :props="defaultProp"
+        <el-checkbox-group v-model="value" @change="handleCheckedChange">
-        :indent="0"
+          <el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
-        class="de-filter-tree"
+        </el-checkbox-group>
-        default-expand-all
+      </div>
-      >
+
-        <span slot-scope="{ node, data }" class="custom-tree-node-list father">
+      <div v-else class="radio-group-container">
-          <span style="display: flex;flex: 1;width: 0;">
+        <el-radio-group v-model="value" @change="changeRadioBox">
-            <el-radio v-if="!options.attrs.multiple" v-model="options.value" :label="data.id" @change="changeRadioBox"><span> {{ node.label }} </span></el-radio>
+          <el-radio v-for="(item, index) in datas" :key="index" :label="item.id">{{ item.id }}</el-radio>
-            <el-checkbox v-if="options.attrs.multiple && data.id !== allNode.id" v-model="data.checked" :label="data.id" @change="changeCheckBox(data)"><span> {{ node.label }} </span></el-checkbox>
+        </el-radio-group>
-            <el-checkbox v-if="options.attrs.multiple && data.id === allNode.id" v-model="data.checked" :indeterminate="data.indeterminate" :label="data.id" @change="allCheckChange(data)"><span> {{ node.label }} </span></el-checkbox>
+      </div>
-          </span>
-          <span v-if="!options.attrs.multiple && options.value && options.value === data.id" class="child">
-            <span style="margin-left: 12px;" @click.stop>
-              <span class="el-dropdown-link">
-                <el-button
-                  icon="el-icon-circle-close"
-                  type="text"
-                  size="small"
-                  @click="cancelRadio(data)"
-                />
-              </span>
-            </span>
-          </span>
-        </span>
-      </el-tree>
 
     </div>
 
@@ -42,7 +27,7 @@
 </template>
 
 <script>
-import { fieldValues } from '@/api/dataset/dataset'
+import { multFieldValues } from '@/api/dataset/dataset'
 export default {
 
   props: {
@@ -58,12 +43,12 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {
-      options: null,
+      value: null,
-      // value: null,
       checked: null,
       defaultProp: {
         id: 'id',
@@ -76,157 +61,113 @@ export default {
         text: this.$t('commons.all'),
         checked: false,
         indeterminate: false
-      }
+      },
+      show: true,
+      datas: [],
+      isIndeterminate: false,
+      checkAll: false
     }
   },
   computed: {
     operator() {
-      return this.options.attrs.multiple ? 'in' : 'eq'
+      return this.element.options.attrs.multiple ? 'in' : 'eq'
+    },
+    defaultValueStr() {
+      if (!this.element || !this.element.options || !this.element.options.value) return ''
+      return this.element.options.value.toString()
     }
   },
   watch: {
-    'options.attrs.multiple': function(value) {
+
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
+    'defaultValueStr': function(value, old) {
-      this.options.attrs.datas = []
+      if (value === old) return
-      this.options.attrs.datas = datas
+      this.value = this.fillValueDerfault()
-      const sourceValue = this.options.value
+      this.changeValue(value)
-      const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
+
-      if (value) {
+      if (this.element.options.attrs.multiple) {
-        !sourceValid && (this.options.value = [])
+        this.checkAll = this.value.length === this.datas.length
-        sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
+        this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
-        !this.inDraw && (this.options.value = [])
-        if (!this.inDraw) {
-          this.options.value = []
-          this.allNode.indeterminate = false
-          this.allNode.checked = false
-        }
-        // this.setMutiBox()
-      } else {
-        !sourceValid && (this.options.value = null)
-        sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
-        !this.inDraw && (this.options.value = null)
       }
+    },
+    'element.options.attrs.fieldId': function(value, old) {
+      if (typeof value === 'undefined' || value === old) return
+      this.datas = []
+      this.element.options.attrs.fieldId &&
+      this.element.options.attrs.fieldId.length > 0 &&
+      multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+        this.datas = this.optionDatas(res.data)
+      }) || (this.element.options.value = '')
+    },
+    'element.options.attrs.multiple': function(value, old) {
+      if (typeof old === 'undefined' || value === old) return
+      if (!this.inDraw) {
+        this.value = value ? [] : null
+        this.element.options.value = ''
+      }
+
+      this.show = false
+      this.$nextTick(() => {
+        this.show = true
+      })
     }
-    // keyWord(val) {
-    //   console.log(val)
-    //   this.$refs.deSelectGrid.filter(val)
-    // }
   },
   created() {
-    this.options = this.element.options
+    this.initLoad()
-    if (this.options.attrs.fieldId) {
-      fieldValues(this.options.attrs.fieldId).then(res => {
-        this.options.attrs.datas = this.optionDatas(res.data)
-        this.setMutiBox()
-        this.setRadioBox()
-      })
-    } else {
-      this.setMutiBox()
-      this.setRadioBox()
-    }
-  },
-  mounted() {
-    // this.$nextTick(() => {
-    //   this.options && this.options.value && this.changeValue(this.options.value)
-    // })
-    this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.initValue(this.options.value)
   },
+
   methods: {
-    initValue(value) {
+    initLoad() {
-      // this.options.value = [value]
+      this.value = this.element.options.attrs.multiple ? [] : null
-      this.setCondition()
+      if (this.element.options.attrs.fieldId) {
-    },
+        multFieldValues(this.element.options.attrs.fieldId.split()).then(res => {
-    setMutiBox() {
+          this.datas = this.optionDatas(res.data)
-      if (this.options && this.options.attrs.multiple) {
+          if (this.element.options.attrs.multiple) {
-        this.options.attrs.datas.forEach(data => {
+            this.checkAll = this.value.length === this.datas.length
-          data.checked = (this.options.value && this.options.value.includes(data.id))
+            this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
+          }
         })
-        this.setAllNodeStatus()
+      }
+      if (this.element.options.value) {
+        this.value = this.fillValueDerfault()
+        this.changeValue(this.value)
       }
     },
-    setRadioBox() {
+    changeValue(value) {
-      if (this.options && !this.options.attrs.multiple) {
+      if (!this.inDraw) {
-        if (Array.isArray(this.options.value) && this.options.value.length > 0) {
+        if (value === null) {
-          // this.value = this.options.value.length[0]
+          this.element.options.value = ''
+        } else {
+          this.element.options.value = Array.isArray(value) ? value.join() : value
         }
       }
+      this.setCondition()
+      this.styleChange()
     },
 
     setCondition() {
       const param = {
         component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: this.formatFilterValue(),
         operator: this.operator
       }
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
-    changeCheckBox(data) {
+    formatFilterValue() {
-      const values = Array.isArray(this.options.value) ? this.options.value : this.options.value ? [this.options.value] : []
+      if (this.value === null) return []
-      const index = values.indexOf(data.id)
+      if (Array.isArray(this.value)) return this.value
-      if (index < 0 && data.checked) {
+      return this.value.split(',')
-        values.push(data.id)
-      }
-      if (index >= 0 && !data.checked) {
-        values.splice(index, 1)
-      }
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      datas.forEach(item => {
-        if (item.id === data.id) {
-          item.checked = data.checked
-        }
-      })
-      this.options.attrs.datas = datas
-
-      this.setAllNodeStatus()
-
-      this.options.value = values
-      this.setCondition()
-      this.styleChange()
     },
-    // 勾选数据项 会影响全选节点的状态
+    fillValueDerfault() {
-    setAllNodeStatus() {
+      const defaultV = this.element.options.value
-      const nodeSize = this.options.attrs.datas.length
+      if (this.element.options.attrs.multiple) {
-      const checkedSize = this.options.attrs.datas.filter(item => item.checked).length
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
-      if (nodeSize === checkedSize) {
+        return defaultV.split(',')
-        this.allNode.checked = true
-        this.allNode.indeterminate = false
-      } else if (checkedSize === 0) {
-        this.allNode.checked = false
-        this.allNode.indeterminate = false
       } else {
-        this.allNode.checked = false
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
-        this.allNode.indeterminate = true
+        return defaultV.split(',')[0]
       }
     },
-    allCheckChange(data) {
+
-      data.indeterminate = false
-      const values = []
-      this.options.value = []
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      datas.forEach(item => {
-        item.checked = data.checked
-        // data.checked && this.options.value.push(item.id)
-        data.checked && values.push(item.id)
-      })
-      this.options.attrs.datas = datas
-      this.options.value = values
-      this.setCondition()
-    },
-    changeRadioBox(value) {
-      // this.options.value = []
-      // if (this.value) this.options.value = [this.value]
-      this.setCondition()
-    },
-    cancelRadio(data) {
-      this.options.value = null
-      this.changeRadioBox()
-    },
-    // filterNode(value, data) {
-    //   if (!value) return true
-    //   return data[this.defaultProp.label].indexOf(value) !== -1
-    // },
     styleChange() {
       this.$store.commit('recordStyleChange')
     },
@@ -238,6 +179,20 @@ export default {
           text: item
         }
       })
+    },
+    changeRadioBox(value) {
+      this.changeValue(value)
+    },
+    handleCheckAllChange(val) {
+      this.value = val ? this.datas.map(item => item.id) : []
+      this.isIndeterminate = false
+      this.changeValue(this.value)
+    },
+    handleCheckedChange(values) {
+      const checkedCount = values.length
+      this.checkAll = checkedCount === this.datas.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.datas.length
+      this.changeValue(values)
     }
 
   }
@@ -245,28 +200,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.custom-tree-node-list {
+
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding:0 8px;
-  }
-  .father .child {
-    /*display: none;*/
-    visibility: hidden;
-  }
-  .father:hover .child {
-    /*display: inline;*/
-    visibility: visible;
-  }
-.de-filter-tree {
-  >>>span.is-leaf {
-    width: 5px !important;
-    padding: 6px 0 !important;
-  }
-}
 .de-select-grid-search {
   >>>input {
     border-radius: 0px;
@@ -281,4 +215,23 @@ export default {
     bottom: 0;
   }
 }
+
+.radio-group-container > .el-radio-group > label {
+    display: block !important;
+    margin: 10px !important;
+}
+
+.checkbox-group-container{
+  label.el-checkbox {
+    display: block !important;
+    margin: 10px !important;
+  }
+
+  .el-checkbox-group > label {
+    display: block !important;
+    margin: 10px !important;
+  }
+
+}
+
 </style>

frontend/src/components/widget/DeWidget/DeTreeSelect.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <el-select v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" :popper-append-to-body="inScreen" @change="changeValue">
+  <el-select :size="size" v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" :popper-append-to-body="inScreen" @change="changeValue">
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"
@@ -28,7 +28,8 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js

@@ -11,7 +11,9 @@ const dialogPanel = {
     attrs: {
       placeholder_min: 'denumberrange.please_key_min',
       placeholder_max: 'denumberrange.please_key_max',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js

@@ -16,7 +16,9 @@ const dialogPanel = {
       datas: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js

@@ -13,9 +13,12 @@ const dialogPanel = {
       multiple: false,
       placeholder: 'denumberselect.placeholder',
       datas: [],
+      viewIds: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js

@@ -10,7 +10,9 @@ const dialogPanel = {
   options: {
     attrs: {
       placeholder: 'deinputsearch.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
 
     },
     value: ''

frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js

@@ -16,7 +16,9 @@ const dialogPanel = {
       datas: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js

@@ -16,7 +16,9 @@ const dialogPanel = {
       datas: [],
       key: 'id',
       label: 'text',
-      value: 'id'
+      value: 'id',
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js

@@ -13,7 +13,9 @@ const dialogPanel = {
       rangeSeparator: 'dedaterange.split_placeholder',
       startPlaceholder: 'dedaterange.from_placeholder',
       endPlaceholder: 'dedaterange.to_placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js

@@ -11,7 +11,16 @@ const dialogPanel = {
     attrs: {
       type: 'date',
       placeholder: 'dedate.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        dynamicPrefix: 1,
+        dynamicInfill: 'day',
+        dynamicSuffix: 'before'
+      }
     },
     value: ''
   },
@@ -62,6 +71,69 @@ class TimeDateServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  dynamicDateFormNow(element) {
+    if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
+
+    if (element.options.attrs.default.dkey === 0) {
+      return Date.now()
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      const oneday = 24 * 3600 * 1000
+      return Date.now() - oneday
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      const now = new Date()
+      const nowMonth = now.getMonth()
+      var nowYear = now.getFullYear()
+      return new Date(nowYear, nowMonth, 1).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 3) {
+      const dynamicPrefix = element.options.attrs.default.dynamicPrefix
+      const dynamicInfill = element.options.attrs.default.dynamicInfill
+      const dynamicSuffix = element.options.attrs.default.dynamicSuffix
+
+      if (dynamicInfill === 'day') {
+        const oneday = 24 * 3600 * 1000
+        const step = oneday * dynamicPrefix
+        return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
+      }
+      if (dynamicInfill === 'week') {
+        const oneday = 24 * 3600 * 1000
+        const step = oneday * dynamicPrefix * 7
+        return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
+      }
+      if (dynamicInfill === 'month') {
+        const now = new Date()
+        const nowMonth = now.getMonth()
+        const nowYear = now.getFullYear()
+        const nowDate = now.getDate()
+
+        const tarYear = nowYear
+        if (dynamicSuffix === 'before') {
+          const deffMonth = nowMonth - dynamicPrefix
+          let diffYear = deffMonth / 12
+          if (deffMonth < 0) {
+            diffYear -= 1
+          }
+          return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
+        } else {
+          const deffMonth = nowMonth + dynamicPrefix
+          const diffYear = deffMonth / 12
+          return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
+        }
+      }
+      if (dynamicInfill === 'year') {
+        const now = new Date()
+        const nowMonth = now.getMonth()
+        const nowYear = now.getFullYear()
+        const nowDate = now.getDate()
+        return new Date(nowYear - 1, nowMonth, nowDate).getTime()
+      }
+    }
+  }
 }
 const timeDateServiceImpl = new TimeDateServiceImpl({ name: 'timeDateWidget' })
 export default timeDateServiceImpl

frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js

@@ -11,7 +11,9 @@ const dialogPanel = {
     attrs: {
       type: 'month',
       placeholder: 'deyearmonth.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js

@@ -11,7 +11,9 @@ const dialogPanel = {
     attrs: {
       type: 'year',
       placeholder: 'deyear.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
     },
     value: ''
   },

frontend/src/lang/en.js

@@ -994,7 +994,11 @@ export default {
     data_percent: 'Percent',
     compare_calc_expression: 'Expression',
     and: 'And',
-    or: 'Or'
+    or: 'Or',
+    logic_exp: 'Logic',
+    enum_exp: 'Enum',
+    pls_slc: 'Please Select',
+    filter_exp: 'Filter Value'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -994,7 +994,11 @@ export default {
     data_percent: '差值百分比',
     compare_calc_expression: '計算公式',
     and: '與',
-    or: '或'
+    or: '或',
+    logic_exp: '邏輯條件',
+    enum_exp: '枚舉條件',
+    pls_slc: '請選擇',
+    filter_exp: '過濾條件'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -997,7 +997,11 @@ export default {
     data_percent: '差值百分比',
     compare_calc_expression: '计算公式',
     and: '与',
-    or: '或'
+    or: '或',
+    logic_exp: '逻辑条件',
+    enum_exp: '枚举条件',
+    pls_slc: '请选择',
+    filter_exp: '过滤条件'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/store/index.js

@@ -57,6 +57,11 @@ const data = {
     curComponent: null,
     curCanvasScale: null,
     curComponentIndex: null,
+    // 预览仪表板缩放信息
+    previewCanvasScale: {
+      scalePointWidth: 1,
+      scalePointHeight: 1
+    },
     // 点击画布时是否点中组件，主要用于取消选中组件用。
     // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
     isClickComponent: false,
@@ -135,7 +140,14 @@ const data = {
     setCurCanvasScale(state, curCanvasScale) {
       state.curCanvasScale = curCanvasScale
     },
-
+    setPreviewCanvasScale(state, scaleWidth, scaleHeight) {
+      if (scaleWidth) {
+        state.previewCanvasScale.scalePointWidth = scaleWidth
+      }
+      if (scaleHeight) {
+        state.previewCanvasScale.scalePointHeight = scaleHeight
+      }
+    },
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
       if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
       if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">关闭</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xe67e;</span>
+                <div class="name">矩形</div>
+                <div class="code-name">&amp;#xe67e;</div>
+              </li>
+
             <li class="dib">
               <span class="icon iconfont">&#xe653;</span>
                 <div class="name">移动端</div>
@@ -90,12 +102,6 @@
                 <div class="code-name">&amp;#xe91b;</div>
               </li>
 
-            <li class="dib">
-              <span class="icon iconfont">&#xe9a8;</span>
-                <div class="name">tabs</div>
-                <div class="code-name">&amp;#xe9a8;</div>
-              </li>
-          
             <li class="dib">
               <span class="icon iconfont">&#xe665;</span>
                 <div class="name">时间</div>
@@ -156,6 +162,12 @@
                 <div class="code-name">&amp;#xe8e6;</div>
               </li>
 
+            <li class="dib">
+              <span class="icon iconfont">&#xe62a;</span>
+                <div class="name">44.tabs</div>
+                <div class="code-name">&amp;#xe62a;</div>
+              </li>
+
             <li class="dib">
               <span class="icon iconfont">&#xe619;</span>
                 <div class="name">洗浴</div>
@@ -468,9 +480,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1636516993563') format('woff2'),
+  src: url('iconfont.woff2?t=1639622225820') format('woff2'),
-       url('iconfont.woff?t=1636516993563') format('woff'),
+       url('iconfont.woff?t=1639622225820') format('woff'),
-       url('iconfont.ttf?t=1636516993563') format('truetype');
+       url('iconfont.ttf?t=1639622225820') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -496,6 +508,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
 
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-juxing1"></span>
+            <div class="name">
+              矩形
+            </div>
+            <div class="code-name">.icon-juxing1
+            </div>
+          </li>
+
           <li class="dib">
             <span class="icon iconfont icon-yidongduan"></span>
             <div class="name">
@@ -550,15 +580,6 @@
             </div>
           </li>
 
-          <li class="dib">
-            <span class="icon iconfont icon-tabs"></span>
-            <div class="name">
-              tabs
-            </div>
-            <div class="code-name">.icon-tabs
-            </div>
-          </li>
-          
           <li class="dib">
             <span class="icon iconfont icon-shijian"></span>
             <div class="name">
@@ -649,6 +670,15 @@
             </div>
           </li>
 
+          <li class="dib">
+            <span class="icon iconfont icon-tabs"></span>
+            <div class="name">
+              44.tabs
+            </div>
+            <div class="code-name">.icon-tabs
+            </div>
+          </li>
+
           <li class="dib">
             <span class="icon iconfont icon-xiyu"></span>
             <div class="name">
@@ -1117,6 +1147,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juxing1"></use>
+                </svg>
+                <div class="name">矩形</div>
+                <div class="code-name">#icon-juxing1</div>
+            </li>
+
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-yidongduan"></use>
@@ -1165,14 +1211,6 @@
                 <div class="code-name">#icon-padding</div>
             </li>
 
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-tabs"></use>
-                </svg>
-                <div class="name">tabs</div>
-                <div class="code-name">#icon-tabs</div>
-            </li>
-          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-shijian"></use>
@@ -1253,6 +1291,14 @@
                 <div class="code-name">#icon-xuanfuanniu</div>
             </li>
 
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tabs"></use>
+                </svg>
+                <div class="name">44.tabs</div>
+                <div class="code-name">#icon-tabs</div>
+            </li>
+
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-xiyu"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1636516993563') format('woff2'),
+  src: url('iconfont.woff2?t=1639622225820') format('woff2'),
-       url('iconfont.woff?t=1636516993563') format('woff'),
+       url('iconfont.woff?t=1639622225820') format('woff'),
-       url('iconfont.ttf?t=1636516993563') format('truetype');
+       url('iconfont.ttf?t=1639622225820') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-guanbi:before {
+  content: "\e60d";
+}
+
+.icon-juxing1:before {
+  content: "\e67e";
+}
+
 .icon-yidongduan:before {
   content: "\e653";
 }
@@ -37,10 +45,6 @@
   content: "\e91b";
 }
 
-.icon-tabs:before {
-  content: "\e9a8";
-}
-
 .icon-shijian:before {
   content: "\e665";
 }
@@ -81,6 +85,10 @@
   content: "\e8e6";
 }
 
+.icon-tabs:before {
+  content: "\e62a";
+}
+
 .icon-xiyu:before {
   content: "\e619";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1367318",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "23446403",
+      "name": "矩形",
+      "font_class": "juxing1",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
     {
       "icon_id": "11799014",
       "name": "移动端",
@@ -47,13 +61,6 @@
       "unicode": "e91b",
       "unicode_decimal": 59675
     },
-    {
-      "icon_id": "11982148",
-      "name": "tabs",
-      "font_class": "tabs",
-      "unicode": "e9a8",
-      "unicode_decimal": 59816
-    },
     {
       "icon_id": "658039",
       "name": "时间",
@@ -124,6 +131,13 @@
       "unicode": "e8e6",
       "unicode_decimal": 59622
     },
+    {
+      "icon_id": "15196968",
+      "name": "44.tabs",
+      "font_class": "tabs",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
     {
       "icon_id": "23570269",
       "name": "洗浴",

frontend/src/styles/index.scss

@@ -1,4 +1,3 @@
-
 /* $--font-path: '~element-ui/lib/theme-chalk/fonts'; */
 
 
@@ -149,17 +148,20 @@ div:focus {
   .el-tabs__header {
     margin: 0 0 0 0 !important;
   }
+
   .el-tabs__content {
     height: calc(100% - 55px) !important;
+
     .el-tab-pane {
-        height: 100% !important;
+      height: 100% !important;
     }
   }
 }
 
 .de-search-header {
   .el-tabs__header {
-    display: none !important;;
+    display: none !important;
+    ;
   }
 }
 
@@ -205,7 +207,7 @@ div:focus {
 }
 
 .de-filter-data-table {
-  .el-table__body-wrapper > table > {
+  .el-table__body-wrapper>table> {
     tbody {
       .el-table__row {
         :hover {
@@ -221,7 +223,7 @@ div:focus {
 }
 
 .de-msg-data-table {
-  .el-table__body-wrapper > table > {
+  .el-table__body-wrapper>table> {
     tbody {
       .el-table__row {
         :hover {
@@ -247,13 +249,14 @@ div:focus {
 .custom-component-class {
   width: 100%;
 
-  div:not(.de-number-range-container ) {
+  div:not(.de-number-range-container) {
     width: 100% !important;
   }
 
   div.el-input-group__append {
     width: 10% !important;
   }
+
   .de-select-grid-class {
     .list {
       position: relative !important;
@@ -340,7 +343,7 @@ div:focus {
   margin: 0 2px 0 0;
 }
 
-.ds-icon-union{
+.ds-icon-union {
   width: 14px;
   height: 14px;
   color: #a479e7;
@@ -389,58 +392,63 @@ div:focus {
 }
 
 .el-color-dropdown__link-btn {
-  display: none!important;
+  display: none !important;
 }
 
 .el-table {
+  background-color: var(--TableBG) !important;
+
+  tr {
     background-color: var(--TableBG) !important;
-    tr {
+  }
-        background-color: var(--TableBG) !important;
+
-    }
+  th {
-    th {
+    background-color: var(--TableBG) !important;
-        background-color: var(--TableBG) !important;
+  }
-    }
 }
 
 .blackTheme .el-textarea__inner {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
 }
+
 .blackTheme .el-textarea__inner:not(:focus) {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
-    border-color: var(--border-color-input) !important;
+  border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input__inner {
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
 }
+
 .blackTheme .el-input__inner:not(:focus) {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
-    border-color: var(--border-color-input) !important;
+  border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input-number__decrease {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
-    border: none !important;
+  border: none !important;
 }
+
 .blackTheme .el-input-number__increase {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
-    border: none !important;
+  border: none !important;
 }
 
 .blackTheme .el-picker-panel__footer {
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
 }
 
 
 .el-pagination {
-    button:disabled {
+  button:disabled {
-        color: var(--TableColor) !important;
+    color: var(--TableColor) !important;
-        background-color: var(--MainBG) !important;
+    background-color: var(--MainBG) !important;
-    }
+  }
 }
 
 /* .blackTheme .el-pager li {
@@ -453,26 +461,29 @@ div:focus {
 } */
 
 .fu-search-bar-button {
-    background-color: var(--Main) !important;
+  background-color: var(--Main) !important;
 }
 
 .blackTheme .fu-quick-search input {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
 }
+
 .blackTheme .vue-treeselect__single-value {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
 }
+
 .blackTheme .el-tag.el-tag--info {
-    background-color: var(--ContentBG);
+  background-color: var(--ContentBG);
-    border-color: var(--TableBorderColor);
+  border-color: var(--TableBorderColor);
-    color: var(--TableColor) !important;  ;
+  color: var(--TableColor) !important;
+  ;
 }
 
 .blackTheme .vue-treeselect__control {
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
-    border-color: var(--border-color-input) !important;
+  border-color: var(--border-color-input) !important;
 }
 
 /* .blackTheme .el-popover {
@@ -480,93 +491,105 @@ div:focus {
 } */
 
 .blackTheme .main-area-input {
-    input.el-input__inner {
+  input.el-input__inner {
-        color: var(--TableColor) !important;
+    color: var(--TableColor) !important;
-        background-color: var(--ContentBG) !important;
+    background-color: var(--ContentBG) !important;
-    }
+  }
-    .el-input-group__append {
+
-        background-color: var(--ContentBG) !important;
+  .el-input-group__append {
-        border-color: var(--ContentBG) !important;
+    background-color: var(--ContentBG) !important;
-    }
+    border-color: var(--ContentBG) !important;
+  }
 }
 
 .blackTheme .el-tree {
-    background-color: var(--SiderBG) !important;
+  background-color: var(--SiderBG) !important;
 }
 
 .blackTheme .el-tree-node__content:hover {
-    background-color: var(--MenuHovorBG) !important;
+  background-color: var(--MenuHovorBG) !important;
 }
 
-.blackTheme .is-current > .el-tree-node__content {
+.blackTheme .is-current>.el-tree-node__content {
-    background-color: var(--MenuActiveBG) !important;
+  background-color: var(--MenuActiveBG) !important;
 }
+
 .blackTheme .el-collapse-item__header {
-    background-color: var(--ContentBG) !important;
+  background-color: var(--ContentBG) !important;
-    color: var(--TextPrimary) !important;
+  color: var(--TextPrimary) !important;
-    border: none !important;
+  border: none !important;
 }
+
 .blackTheme .el-collapse-item__wrap {
-    background-color: var(--ContentBG) !important;
+  background-color: var(--ContentBG) !important;
-    border: none !important;
+  border: none !important;
 }
+
 .blackTheme .content-container__header {
-    color: var(--TextPrimary);
+  color: var(--TextPrimary);
 }
+
 .blackTheme .el-button--default {
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
-    color: var(--Main) !important;
+  color: var(--Main) !important;
 }
+
 /* .blackTheme .el-dialog {
     background: var(--ContentBG) !important;
     color: var(--TextPrimary) !important;
 }
  */
 .blackTheme .el-dialog__title {
-    color: #ffffff !important;
+  color: #ffffff !important;
 }
 
 .blackTheme .title-text {
-    color: var(--TextPrimary) !important;
+  color: var(--TextPrimary) !important;
 }
 
 .blackTheme .el-tabs__item:not(.is-active) {
-    color: var(--TextPrimary) !important;
+  color: var(--TextPrimary) !important;
 }
-.blackTheme .el-tabs__item:hover{
+
-    color: var(--Main) !important;
+.blackTheme .el-tabs__item:hover {
+  color: var(--Main) !important;
 }
 
 .blackTheme:not(.in-panel) .elx-table--main-wrapper {
 
-    .body--wrapper {
+  .body--wrapper {
-        background-color: var(--TableBG) !important;
+    background-color: var(--TableBG) !important;
-    }
+  }
 }
+
 .blackTheme:not(.in-panel) .elx-table {
-    color: var(--TableColor) !important;
+  color: var(--TableColor) !important;
 }
 
 .blackTheme:not(.in-panel) .elx-body--column {
-    background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
+  background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
 }
+
 .blackTheme:not(.in-panel) .elx-header--column {
-    background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
+  background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
 }
+
 .blackTheme:not(.in-panel) tr.row--current {
-    background-color: var(--MainBG) !important;
+  background-color: var(--MainBG) !important;
 }
+
 .blackTheme:not(.in-panel) tr.elx-body--row:hover {
-    background-color: var(--TableBG) !important;
+  background-color: var(--TableBG) !important;
 }
 
 .blackTheme:not(.in-panel) .elx-table--header-border-line {
-    border-color: var(--TableBorderColor) !important;
+  border-color: var(--TableBorderColor) !important;
 }
 
 .el-collapse-item__content {
-  padding-bottom: 0!important;
+  padding-bottom: 0 !important;
 }
+
 .el-collapse-item__header {
   height: 34px !important;
   line-height: 34px !important;
@@ -576,105 +599,110 @@ div:focus {
 }
 
 .blackTheme .el-submenu__title {
-    color: var(--TextPrimary) ;
+  color: var(--TextPrimary);
 }
+
 .blackTheme .el-drawer__body {
-    background-color: var(--ContentBG);
+  background-color: var(--ContentBG);
 }
 
 .blackTheme .el-select-dropdown__item.hover {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
+
 .blackTheme .el-select-dropdown__item:hover {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
 
 .blackTheme .el-dropdown-menu__item:not(.is-disabled):hover {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
 
 .blackTheme .el-dropdown-menu__item:focus {
-    background-color: #171B22 !important;
+  background-color: #171B22 !important;
 }
 
 
 .blackTheme .el-dropdown-menu__item--divided:before {
-    background-color: #000000 !important;
+  background-color: #000000 !important;
 }
 
 
 .blackTheme .el-card__header {
-    border-color: var(--TableBorderColor) !important;
+  border-color: var(--TableBorderColor) !important;
 }
 
 .blackTheme .CodeMirror {
-    background-color: #000000 ;
+  background-color: #000000;
-    color: #ffffff;
+  color: #ffffff;
 }
+
 .blackTheme .CodeMirror-code {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 .blackTheme .CodeMirror-gutters {
-    background-color: #000000 ;
+  background-color: #000000;
 }
 
 .blackTheme .CodeMirror-line {
-    background-color: #000000 !important;
+  background-color: #000000 !important;
 }
 
 .blackTheme .el-radio-button__inner {
-    background-color: var(--TableBG);
+  background-color: var(--TableBG);
-    color: var(--TableColor);
+  color: var(--TableColor);
-    border: var(--TableBorder);
+  border: var(--TableBorder);
 }
 
 .blackTheme .el-loading-mask {
-    background-color: rgb(135 131 131 / 70%);
+  background-color: rgb(135 131 131 / 70%);
 }
 
-.blackTheme >>> ::-webkit-scrollbar-thumb {
+.blackTheme>>> ::-webkit-scrollbar-thumb {
-    background: #38393a !important;
+  background: #38393a !important;
 }
 
 .blackTheme .el-message-box__content {
-    color:#F2F6FC;
+  color: #F2F6FC;
 }
 
 .blackTheme .el-message-box__btns {
-    .el-button--default:not(.el-button--primary) {
+  .el-button--default:not(.el-button--primary) {
-        background-color: #171b22 ;
+    background-color: #171b22;
-        color: #2681ff;
+    color: #2681ff;
-    }
+  }
-    .el-button--primary {
+
-        color: #21333b;
+  .el-button--primary {
-        background-color: #2681ff;
+    color: #21333b;
-        border-color: #2681ff;
+    background-color: #2681ff;
-    }
+    border-color: #2681ff;
+  }
 }
 
 .blackTheme .vue-treeselect__menu {
-    border: 1px solid var(--TableBorderColor, #cfcfcf);
+  border: 1px solid var(--TableBorderColor, #cfcfcf);
-    background: var(--MainBG, #fff);
+  background: var(--MainBG, #fff);
 }
 
 .blackTheme .vue-treeselect__option:not(.vue-treeselect__option--highlight) {
-    color: #606266;
+  color: #606266;
-}
-.blackTheme .vue-treeselect__option--highlight {
-    color: #2681ff;
-    background-color: #000000;
 }
 
-.blackTheme .el-table__body tr.current-row > td {
+.blackTheme .vue-treeselect__option--highlight {
-    background-color: #324f62;
+  color: #2681ff;
+  background-color: #000000;
+}
+
+.blackTheme .el-table__body tr.current-row>td {
+  background-color: #324f62;
 }
 
 .blue-color {
-    color: var(--Main, #0000ff);
+  color: var(--Main, #0000ff);
 }
 
-.link-date-picker-class > .el-picker-panel__footer > .el-button--text:first-child{
+.link-date-picker-class>.el-picker-panel__footer>.el-button--text:first-child {
   display: none;
 }
 
@@ -684,41 +712,48 @@ div:focus {
 
 
 .el-color-svpanel__black {
-  background: linear-gradient(to top, #000, rgba(0,0,0,0)) !important;
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) !important;
 }
 
 .el-color-svpanel__white {
-  background: linear-gradient(to right, #fff, rgba(255,255,255,0)) !important;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)) !important;
 }
 
 
-.rate-date-class > .el-picker-panel__footer > .el-button--text:first-child{
+.rate-date-class>.el-picker-panel__footer>.el-button--text:first-child {
   display: none;
 }
-.rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
+
+.rate-date-class>.el-picker-panel__body-wrapper>.el-picker-panel__body {
   >.el-date-picker__header {
     display: none;
   }
-  >.el-picker-panel__content{
+
-    >table > tbody {
+  >.el-picker-panel__content {
+    >table>tbody {
       >tr:first-child {
         display: none;
       }
-      >tr >td.prev-month,td.next-month {
+
+      >tr>td.prev-month,
+      td.next-month {
         display: none;
       }
     }
   }
 }
-.rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
+
+.rate-day-class>.el-picker-panel__footer>.el-button--text:first-child {
   display: none;
 }
-.rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
+
+.rate-day-class>.el-picker-panel__body-wrapper>.el-picker-panel__body {
   >.el-date-picker__header {
     display: none;
   }
-  >.el-picker-panel__content{
+
-    >table > tbody {
+  >.el-picker-panel__content {
+    >table>tbody {
       >tr:not(:nth-child(3)) {
         display: none;
       }
@@ -726,30 +761,36 @@ div:focus {
   }
 }
 
-.chart-type .el-radio__input{
+.chart-type .el-radio__input {
-  display: none!important;
+  display: none !important;
 }
 
-.chart-type .el-radio__label{
+.chart-type .el-radio__label {
-  padding-left: 0!important;
+  padding-left: 0 !important;
 }
 
-.chart-type .radio-row .radio-style{
+.chart-type .radio-row .radio-style {
   width: 80px;
   height: 60px;
   padding: 0;
 }
 
-.el-color-predefine__color-selector{
+.el-color-predefine__color-selector {
-  border: 1px solid #999999!important;
+  border: 1px solid #999999 !important;
-  margin: 0 0 6px 6px!important;
+  margin: 0 0 6px 6px !important;
 }
+
 .de-checkbox {
   width: 100%;
   margin-left: 0px !important;
+
   .el-checkbox__input {
     padding: 0 0 8px 0 !important;
   }
 }
 
-
+.no-label-item {
+  .el-form-item__content {
+    margin-left: 10px !important;
+  }
+}

frontend/src/utils/request.js

@@ -1,18 +1,17 @@
 import axios from 'axios'
 import store from '@/store'
-import {$alert, $error} from './message'
+import { $alert, $error } from './message'
-import {getToken, getIdToken} from '@/utils/auth'
+import { getToken, getIdToken } from '@/utils/auth'
 import Config from '@/settings'
 import i18n from '@/lang'
-import {tryShowLoading, tryHideLoading} from './loading'
+import { tryShowLoading, tryHideLoading } from './loading'
-import {getLinkToken, setLinkToken} from '@/utils/auth'
+import { getLinkToken, setLinkToken } from '@/utils/auth'
 
 const TokenKey = Config.TokenKey
 const RefreshTokenKey = Config.RefreshTokenKey
 const LinkTokenKey = Config.LinkTokenKey
 import Cookies from 'js-cookie'
 
-
 const getTimeOut = () => {
   let time = 10
   const url = '/system/requestTimeOut'

frontend/src/views/chart/components/filter/ResultFilterEditor.vue

@@ -1,52 +1,84 @@
 <template>
   <el-col>
-    <div style="display: inline-block;">
+    <div v-if="item.deType === 0 || item.deType === 5">
-      <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
       <el-radio-group
-        v-model="logic"
+        v-model="filterType"
         size="mini"
-        style="margin-left: 10px;"
+        style="margin-bottom: 10px;"
-        @change="logicChange"
+        @change="filterTypeChange"
       >
-        <el-radio-button label="and">{{ $t('chart.and') }}</el-radio-button>
+        <el-radio label="logic">{{ $t('chart.logic_exp') }}</el-radio>
-        <el-radio-button label="or">{{ $t('chart.or') }}</el-radio-button>
+        <el-radio label="enum">{{ $t('chart.enum_exp') }}</el-radio>
       </el-radio-group>
     </div>
 
-    <div style="max-height: 50vh;overflow-y: auto;">
+    <div v-if="((item.deType === 0 || item.deType === 5) && filterType === 'logic') || item.deType === 1 || item.deType === 2 || item.deType === 3">
-      <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
+      <div style="display: inline-block;">
-        <el-col :span="4">
+        <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
-          <span>{{ item.name }}</span>
+        <el-radio-group
-        </el-col>
+          v-model="logic"
-        <el-col :span="8">
+          size="mini"
-          <el-select v-model="f.term" size="mini">
+          style="margin-left: 10px;"
-            <el-option-group
+          @change="logicChange"
-              v-for="(group,idx) in options"
+        >
-              :key="idx"
+          <el-radio-button label="and">{{ $t('chart.and') }}</el-radio-button>
-              :label="group.label"
+          <el-radio-button label="or">{{ $t('chart.or') }}</el-radio-button>
-            >
+        </el-radio-group>
-              <el-option
+      </div>
-                v-for="opt in group.options"
+      <div style="max-height: 50vh;overflow-y: auto;">
-                :key="opt.value"
+        <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
-                :label="opt.label"
+          <el-col :span="4">
-                :value="opt.value"
+            <span>{{ item.name }}</span>
-              />
+          </el-col>
-            </el-option-group>
+          <el-col :span="8">
-          </el-select>
+            <el-select v-model="f.term" size="mini">
-        </el-col>
+              <el-option-group
-        <el-col :span="6">
+                v-for="(group,idx) in options"
-          <el-input v-show="!f.term.includes('null') && !f.term.includes('empty')" v-model="f.value" class="value-item" :placeholder="$t('chart.condition')" size="mini" clearable />
+                :key="idx"
-        </el-col>
+                :label="group.label"
-        <el-col :span="6">
+              >
-          <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" />
+                <el-option
-        </el-col>
+                  v-for="opt in group.options"
-      </el-row>
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-option-group>
+            </el-select>
+          </el-col>
+          <el-col :span="6">
+            <el-input v-show="!f.term.includes('null') && !f.term.includes('empty')" v-model="f.value" class="value-item" :placeholder="$t('chart.condition')" size="mini" clearable />
+          </el-col>
+          <el-col :span="6">
+            <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" />
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+
+    <div v-if="(item.deType === 0 || item.deType === 5) && filterType === 'enum'">
+      <span style="margin-right: 10px;">{{ $t('chart.filter_exp') }}</span>
+      <el-select
+        v-model="enumCheckField"
+        filterable
+        multiple
+        :placeholder="$t('chart.pls_slc')"
+        size="mini"
+        @change="enumChange"
+      >
+        <el-option
+          v-for="field in fieldOptions"
+          :key="field.id"
+          :label="field.text"
+          :value="field.id"
+        />
+      </el-select>
     </div>
   </el-col>
 </template>
 
 <script>
-// import { fieldList } from '../../../../api/dataset/dataset'
+import { multFieldValues } from '@/api/dataset/dataset'
 
 export default {
   name: 'ResultFilterEditor',
@@ -169,7 +201,10 @@ export default {
         }
       ],
       options: [],
-      logic: ''
+      logic: '',
+      filterType: '',
+      enumCheckField: [],
+      fieldOptions: []
     }
   },
   watch: {
@@ -195,6 +230,21 @@ export default {
     },
     init() {
       this.logic = this.item.logic
+      this.filterType = this.item.filterType
+      this.enumCheckField = this.item.enumCheckField
+      // 查找枚举的
+      multFieldValues([this.item.id]).then(res => {
+        this.fieldOptions = this.optionDatas(res.data)
+      })
+    },
+    optionDatas(datas) {
+      if (!datas) return null
+      return datas.filter(item => !!item).map(item => {
+        return {
+          id: item,
+          text: item
+        }
+      })
     },
     addFilter() {
       this.item.filter.push({
@@ -208,25 +258,31 @@ export default {
     },
     logicChange(val) {
       this.item.logic = val
+    },
+    filterTypeChange(val) {
+      this.item.filterType = val
+    },
+    enumChange(val) {
+      this.item.enumCheckField = this.enumCheckField
     }
   }
 }
 </script>
 
 <style scoped>
-.filter-item{
+  .filter-item{
-  width: 100%;
+    width: 100%;
-  border-radius: 4px;
+    border-radius: 4px;
-  border: 1px solid #DCDFE6;
+    border: 1px solid #DCDFE6;
-  padding: 4px 14px;
+    padding: 4px 14px;
-  margin-bottom: 10px;
+    margin-bottom: 10px;
-  display: flex;
+    display: flex;
-  justify-content: left;
+    justify-content: left;
-  align-items: center;
+    align-items: center;
-}
+  }
-.form-item>>>.el-form-item__label{
+  .form-item>>>.el-form-item__label{
-  font-size: 12px;
+    font-size: 12px;
-}
+  }
   span{
     font-size: 12px;
   }

frontend/src/views/chart/view/ChartEdit.vue

@@ -1656,25 +1656,39 @@ export default {
       if (!this.filterItem.logic) {
         this.filterItem.logic = 'and'
       }
+      if (!this.filterItem.filterType) {
+        this.filterItem.filterType = 'logic'
+      }
+      if (!this.filterItem.enumCheckField) {
+        this.filterItem.enumCheckField = []
+      }
       this.resultFilterEdit = true
     },
     closeResultFilter() {
       this.resultFilterEdit = false
     },
     saveResultFilter() {
-      for (let i = 0; i < this.filterItem.filter.length; i++) {
+      if (((this.filterItem.deType === 0 || this.filterItem.deType === 5) && this.filterItem.filterType !== 'enum') ||
-        const f = this.filterItem.filter[i]
+          this.filterItem.deType === 1 ||
-        if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
+          this.filterItem.deType === 2 ||
-          this.$message({
+          this.filterItem.deType === 3) {
-            message: this.$t('chart.filter_value_can_null'),
+        for (let i = 0; i < this.filterItem.filter.length; i++) {
-            type: 'error',
+          const f = this.filterItem.filter[i]
-            showClose: true
+          if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
-          })
+            this.$message({
-          return
+              message: this.$t('chart.filter_value_can_null'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
         }
       }
+
       this.view.customFilter[this.filterItem.index].filter = this.filterItem.filter
       this.view.customFilter[this.filterItem.index].logic = this.filterItem.logic
+      this.view.customFilter[this.filterItem.index].filterType = this.filterItem.filterType
+      this.view.customFilter[this.filterItem.index].enumCheckField = this.filterItem.enumCheckField
       this.calcData(true)
       this.closeResultFilter()
     },

frontend/src/views/panel/edit/ComponentWaitItem.vue

@@ -11,6 +11,7 @@
       :style="getComponentStyleDefault(config.style)"
       :out-style="outStyle"
       :element="config"
+      :in-screen="true"
     />
     <component
       :is="config.component"
@@ -30,10 +31,11 @@
 import { mapState } from 'vuex'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import { getStyle } from '@/components/canvas/utils/style'
+import DeOutWidget from '@/components/dataease/DeOutWidget'
 
 export default {
   name: 'ComponentWaitItem',
-  components: { MobileCheckBar },
+  components: { DeOutWidget, MobileCheckBar },
   props: {
     config: {
       type: Object,
@@ -87,6 +89,7 @@ export default {
 
 <style scoped>
   .component-custom {
+    position: relative!important;
     outline: none;
     width: 100% !important;
     height: 100%;

frontend/src/views/panel/edit/index.vue

@@ -146,20 +146,18 @@
       custom-class="de-filter-dialog"
       @close="cancelFilter"
     >
-      <filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" :component-info="currentFilterCom" @re-fresh-component="reFreshComponent">
+      <filter-dialog
-        <component
+        v-if="filterVisible && currentWidget"
-          :is="currentFilterCom.component"
+        :ref="'filter-setting-' + currentFilterCom.id"
-          :id="'component' + currentFilterCom.id"
+        :widget-info="currentWidget"
-          class="component"
+        :element="currentFilterCom"
-          :style="currentFilterCom.style"
+        @sure-button-status="sureStatusChange"
-          :element="currentFilterCom"
+        @re-fresh-component="reFreshComponent"
-          :in-draw="false"
+      />
-        />
-      </filter-dialog>
       <div style="text-align: end !important;margin: 0 15px 10px !important;">
         <span slot="footer">
           <el-button size="mini" @click="cancelFilter">{{ $t('commons.cancel') }}</el-button>
-          <el-button :disabled="!currentFilterCom.options.attrs.fieldId" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
+          <el-button :disabled="!enableSureButton" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
         </span>
       </div>
     </el-dialog>
@@ -217,9 +215,7 @@ import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
 import { findOne } from '@/api/panel/panel'
 import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
-import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
 import Preview from '@/components/canvas/components/Editor/Preview'
-import AttrList from '@/components/canvas/components/AttrList'
 import AttrListExtend from '@/components/canvas/components/AttrListExtend'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
@@ -234,9 +230,7 @@ import FilterDialog from '../filter/filterDialog'
 import toast from '@/components/canvas/utils/toast'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
-import RectangleAttr from '@/components/canvas/components/RectangleAttr'
 import TextAttr from '@/components/canvas/components/TextAttr'
-import FilterTextAttr from '@/components/canvas/components/FilterTextAttr'
 import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 import ComponentWait from '@/views/panel/edit/ComponentWait'
 
@@ -253,16 +247,12 @@ export default {
     Toolbar,
     FilterDialog,
     SubjectSetting,
-    PreviewFullScreen,
     Preview,
-    AttrList,
     AttrListExtend,
     AssistComponent,
     PanelTextEditor,
-    RectangleAttr,
     TextAttr,
-    ChartGroup,
+    ChartGroup
-    FilterTextAttr
   },
   data() {
     return {
@@ -295,7 +285,6 @@ export default {
         width: null,
         height: null
       },
-      beforeDialogValue: [],
       styleDialogVisible: false,
       currentDropElement: null,
       adviceGroupId: null,
@@ -312,7 +301,8 @@ export default {
         'rect-shape',
         'de-show-date',
         'de-video'
-      ]
+      ],
+      enableSureButton: false
     }
   },
 
@@ -674,11 +664,9 @@ export default {
       }
     },
     openFilterDialog() {
-      this.beforeDialogValue = []
       this.filterVisible = true
     },
     closeFilter() {
-      this.beforeDialogValue = []
       this.filterVisible = false
       this.currentWidget = null
       this.clearCurrentInfo()
@@ -688,9 +676,10 @@ export default {
       bus.$emit('onRemoveLastItem')
     },
     sureFilter() {
-      this.currentFilterCom.options.value = []
+      this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
       this.$store.commit('setComponentWithId', this.currentFilterCom)
       this.$store.commit('recordSnapshot', 'sureFilter')
+      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
       this.closeFilter()
     },
     reFreshComponent(component) {
@@ -701,9 +690,9 @@ export default {
       if (this.curComponent && this.curComponent.serviceName) {
         const serviceName = this.curComponent.serviceName
         this.currentWidget = ApplicationContext.getService(serviceName)
+        this.currentFilterCom = this.curComponent
+        this.openFilterDialog()
       }
-      this.currentFilterCom = this.curComponent
-      this.openFilterDialog()
     },
     closeLeftPanel() {
       this.show = false
@@ -880,6 +869,9 @@ export default {
       e.preventDefault()
       e.dataTransfer.dropEffect = 'copy'
       this.$refs.canvasEditor.handleDragOver(e)
+    },
+    sureStatusChange(status) {
+      this.enableSureButton = status
     }
   }
 }

frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue

@@ -0,0 +1,129 @@
+<template>
+  <div v-if="element">
+    <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
+
+      <el-form-item label="设定默认值">
+        <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
+          <el-radio :label="false">固定时间</el-radio>
+          <el-radio :label="true">动态时间</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" label="相对当前时间">
+
+        <el-select v-model="element.options.attrs.default.dkey" placeholder="" class="relative-time" @change="dkeyChange">
+          <el-option label="今天" :value="0" />
+          <el-option label="昨天" :value="1" />
+          <el-option label="本月首日" :value="2" />
+          <el-option label="自定义" :value="3" />
+        </el-select>
+
+      </el-form-item>
+
+      <div class="inline">
+
+        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="">
+          <el-input v-model="element.options.attrs.default.dynamicPrefix" type="number" size="mini" :min="1" :max="10" @input="dynamicPrefixChange" />
+        </el-form-item>
+
+        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
+          <el-select v-model="element.options.attrs.default.dynamicInfill" size="mini" placeholder="" @change="dynamicInfillChange">
+            <el-option label="天" value="day" />
+            <el-option label="周" value="week" />
+            <el-option label="月" value="month" />
+            <el-option label="年" value="year" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
+
+          <el-select v-model="element.options.attrs.default.dynamicSuffix" size="mini" placeholder="" @change="dynamicSuffixChange">
+            <el-option label="前" value="before" />
+            <el-option label="后" value="after" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" label="预览">
+        <el-date-picker
+          v-model="dval"
+          type="date"
+          disabled
+          placeholder=""
+          class="relative-time"
+        />
+      </el-form-item>
+
+      <el-form-item v-else label="设置">
+        <component
+          :is="element.component"
+          :id="'component' + element.id"
+          class="relative-time"
+          :style="element.style"
+          :element="element"
+          :in-draw="false"
+        />
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
+export default {
+  name: 'DeDateDefault',
+  props: {
+
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dval: null
+    }
+  },
+  created() {
+    this.setDval()
+  },
+  methods: {
+    dynamicChange(value) {
+      this.setDval()
+    },
+    dkeyChange(value) {
+      this.setDval()
+    },
+
+    dynamicPrefixChange(value) {
+      this.setDval()
+    },
+    dynamicInfillChange(value) {
+      this.setDval()
+    },
+    dynamicSuffixChange(value) {
+      this.setDval()
+    },
+    setDval() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      const time = widget.dynamicDateFormNow(this.element)
+      this.dval = time
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inline {
+  display: flex;
+  >>>.el-input--mini {
+      min-width: 70px;
+  }
+}
+.relative-time {
+    width: 100%;
+}
+
+</style>

frontend/src/views/panel/filter/filterDialog.vue

@@ -40,7 +40,6 @@
                   @node-click="handleNodeClick"
                 >
                   <div slot-scope="{ node, data }" class="custom-tree-node">
-                    <!-- <el-button v-if="data.type === 'db'" icon="el-icon-s-data" type="text" size="mini" /> -->
                     <span>
                       <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
                       <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
@@ -59,19 +58,17 @@
                 <div v-if="showDomType === 'field'">
                   <draggable
                     v-model="fieldDatas"
-                    :disabled="selectField.length !== 0"
                     :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
                     animation="300"
                     :move="onMove"
                     class="drag-list"
-                    @end="end1"
+                    @end="end"
-                    @start="start1"
                   >
                     <transition-group>
                       <div
                         v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))"
                         :key="item.id"
-                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        :class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
                         class="filter-db-row"
                       >
                         <i class="el-icon-s-data" />
@@ -134,19 +131,17 @@
                 <div v-else-if="comShowDomType === 'field'">
                   <draggable
                     v-model="comFieldDatas"
-                    :disabled="selectField.length !== 0"
                     :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
                     animation="300"
                     :move="onMove"
                     class="drag-list"
-                    @end="end1"
+                    @end="end"
-                    @start="start1"
                   >
                     <transition-group>
                       <div
                         v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
                         :key="item.id"
-                        :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
+                        :class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
                         class="filter-db-row"
                       >
                         <i class="el-icon-s-data" />
@@ -163,138 +158,13 @@
     </de-aside-container>
 
     <de-main-container class="ms-main-container">
-      <div>
+      <div v-if="currentElement.options && currentElement.options.attrs">
-        <el-row>
+        <filter-head :element="currentElement" />
-          <el-col :span="24">
-            <div class="filter-field">
-              <div class="field-content">
-                <!-- <div class="field-content-left">
-                  <div class="field-content-text">{{ $t('panel.field') }} </div>
-                </div> -->
 
-                <div class="field-content-right">
+        <filter-control :element="currentElement" :widget="widget" :control-attrs="myAttrs" :child-views="childViews" />
-                  <el-row style="display:flex;height: 32px;">
-                    <draggable
-                      v-model="selectField"
-                      group="dimension"
-                      animation="300"
-                      :move="onMove"
-                      class="theme-drag"
-                      style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
-                      @end="end2"
-                    >
-                      <transition-group class="list-group" :data-value="$t('panel.drag_here')">
-                        <drag-item
-                          v-for="(item,index) in selectField"
-                          :key="item.id"
-                          :item="item"
-                          :index="index"
-                          @closeItem="closeItem"
-                        />
-                      </transition-group>
-                    </draggable>
-                  </el-row>
-                </div>
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <div class="filter-options-left">
-              <el-switch
-                v-if="widget.showSwitch"
-                v-model="componentInfo.options.attrs.multiple"
-                :active-text="$t('panel.multiple_choice')"
-                :inactive-text="$t('panel.single_choice')"
-                @change="multipleChange"
-              />
-            </div>
-          </el-col>
-          <el-col :span="16">
-            <div class="filter-options-right">
-              <span style="padding-right: 10px;">
-                <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题
-                </el-checkbox>
-                <el-popover
-                  v-model="titlePopovervisible"
-                  placement="bottom-end"
-                  :disabled="!componentInfo.options.attrs.showTitle"
-                  width="200"
-                >
-                  <div
-                    style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;"
-                  >
-                    <el-input
-                      v-model="componentInfo.options.attrs.title"
-                      placeholder="请输入标题"
-                      type="textarea"
-                      maxlength="15"
-                      show-word-limit
-                    />
-                  </div>
 
-                  <i
+        <filter-foot :element="currentElement" />
-                    slot="reference"
-                    :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}"
-                    class="el-icon-setting i-filter"
-                  />
-                </el-popover>
-              </span>
-              <span style="padding-left: 10px;">
-                <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>
-                  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
 
-                <el-popover
-                  v-model="popovervisible"
-                  placement="bottom-end"
-                  :disabled="!componentInfo.options.attrs.enableRange"
-                  width="200"
-                >
-                  <div class="view-container-class">
-                    <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
-                      <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" class="de-checkbox">
-                        <div class="span-div">
-                          <svg-icon :icon-class="item.type" class="chart-icon" />
-                          <span
-                            v-if="item.name && item.name.length <= 7"
-                            style="margin-left: 6px"
-                          >{{ item.name }}</span>
-                          <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
-                            <span style="margin-left: 6px">{{ item.name }}</span>
-                          </el-tooltip>
-                        </div>
-
-                      </el-checkbox>
-                    </el-checkbox-group>
-                  </div>
-
-                  <i
-                    slot="reference"
-                    :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}"
-                    class="el-icon-setting i-filter"
-                  />
-                </el-popover>
-              </span>
-            </div>
-
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <div class="filter-content">
-              <el-card class="box-card">
-                <div style="margin-bottom: 10px;">
-                  <span> {{ widget.label }}</span>
-                </div>
-                <div class="custom-component-class">
-                  <slot />
-                </div>
-              </el-card>
-
-            </div>
-          </el-col>
-        </el-row>
       </div>
     </de-main-container>
   </de-container>
@@ -305,15 +175,16 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
-import DragItem from '@/components/DragItem'
+import FilterHead from './filterMain/FilterHead'
+import FilterControl from './filterMain/FilterControl'
+import FilterFoot from './filterMain/FilterFoot'
+
 import {
   mapState
 } from 'vuex'
-  // import { ApplicationContext } from '@/utils/ApplicationContext'
 import {
   groupTree,
   fieldList,
-  fieldValues,
   post
 } from '@/api/dataset/dataset'
 import {
@@ -329,7 +200,9 @@ export default {
     DeContainer,
     DeAsideContainer,
     draggable,
-    DragItem
+    FilterHead,
+    FilterControl,
+    FilterFoot
   },
   props: {
 
@@ -337,9 +210,10 @@ export default {
       type: Object,
       default: null
     },
-    componentInfo: {
+
+    element: {
       type: Object,
-      default: null
+      default: () => {}
     }
   },
 
@@ -370,7 +244,6 @@ export default {
         id: 'id',
         parentId: 'pid'
       },
-      selectField: [],
       widget: null,
       fieldValues: [],
       popovervisible: false,
@@ -390,48 +263,36 @@ export default {
       expandedArray: [],
       viewKeyWord: '',
       titlePopovervisible: false,
-      fieldsParent: null
+      fieldsParent: null,
+
+      myAttrs: null,
+
+      childViews: {
+        viewInfos: []
+      },
+      currentElement: null
     }
   },
   computed: {
-    panelInfo() {
+
-      return this.$store.state.panel.panelInfo
-    },
     ...mapState([
-      'componentData',
+      'componentData'
-      'curComponent',
-      'isClickComponent',
-      'canvasStyleData',
-      'curComponentIndex'
     ])
   },
 
   watch: {
-    selectField(values) {
+    'myAttrs.dragItems'(values) {
       if (values && values.length > 0) {
-        const value = values[0]
+        const fieldIds = values.map(val => val.id)
-        const fieldId = value.id
+        this.myAttrs.fieldId = fieldIds.join()
-        if (this.widget && this.widget.optionDatas) {
+        // this.myAttrs.dragItems = values
-          fieldValues(fieldId).then(res => {
+        this.myAttrs.activeName = this.activeName
-            this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
+        this.myAttrs.fieldsParent = this.fieldsParent
-            this.componentInfo.options.attrs.fieldId = fieldId
+      } else if (this.myAttrs && this.myAttrs.fieldId) {
-            this.componentInfo.options.attrs.dragItems = values
+        this.myAttrs.fieldId = null
-            this.componentInfo.options.attrs.activeName = this.activeName
+        this.myAttrs.activeName = null
-            this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
-            this.$emit('re-fresh-component', this.componentInfo)
-          })
-        } else {
-          this.componentInfo.options.attrs.fieldId = fieldId
-          this.componentInfo.options.attrs.dragItems = values
-          this.componentInfo.options.attrs.activeName = this.activeName
-          this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
-          this.$emit('re-fresh-component', this.componentInfo)
-        }
-      } else if (this.componentInfo && this.componentInfo.options.attrs.fieldId) {
-        this.componentInfo.options.attrs.fieldId = null
-        this.componentInfo.options.attrs.activeName = null
-        this.$emit('re-fresh-component', this.componentInfo)
       }
+      this.enableSureButton()
     },
     keyWord(val) {
       this.expandedArray = []
@@ -447,12 +308,13 @@ export default {
     }
   },
   created() {
-    // this.widget = ApplicationContext.getService(this.widgetId)
     this.widget = this.widgetInfo
+    this.currentElement = JSON.parse(JSON.stringify(this.element))
+    this.myAttrs = this.currentElement.options.attrs
     this.treeNode(this.groupForm)
 
-    if (this.componentInfo && this.componentInfo.options.attrs.dragItems) {
+    if (this.myAttrs && this.myAttrs.dragItems) {
-      this.selectField = this.componentInfo.options.attrs.dragItems
+      this.enableSureButton()
     }
     this.initWithField()
     this.loadViews()
@@ -460,10 +322,10 @@ export default {
 
   methods: {
     initWithField() {
-      if (this.componentInfo && this.componentInfo.options.attrs.activeName) {
+      if (this.myAttrs && this.myAttrs.activeName) {
-        this.activeName = this.componentInfo.options.attrs.activeName
+        this.activeName = this.myAttrs.activeName
-        if (this.componentInfo.options.attrs.fieldsParent) {
+        if (this.myAttrs.fieldsParent) {
-          this.fieldsParent = this.componentInfo.options.attrs.fieldsParent
+          this.fieldsParent = this.myAttrs.fieldsParent
           this.$nextTick(() => {
             this.activeName === 'dataset' && this.showFieldDatas(this.fieldsParent)
             this.activeName !== 'dataset' && this.comShowFieldDatas(this.fieldsParent)
@@ -525,6 +387,7 @@ export default {
       viewIds && viewIds.length > 0 && viewsWithIds(viewIds).then(res => {
         const datas = res.data
         this.viewInfos = datas
+        this.childViews.viewInfos = datas
       })
     },
     handleNodeClick(data) {
@@ -598,19 +461,12 @@ export default {
           return
         }
       }
-      //   this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
-      //   this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
     },
     comRemoveTail() {
       this.componentSetBreads = this.componentSetBreads.slice(0, this.componentSetBreads.length - 1)
       this.componentSetBreads[this.componentSetBreads.length - 1]['link'] = false
     },
     backToLink(bread) {
-      //   if (bread.type === 'field') {
-      //     this.showDomType = 'db'
-      //   } else {
-      //     this.showDomType = 'tree'
-      //   }
       this.showDomType = 'tree'
 
       this.removeTail(bread)
@@ -626,14 +482,6 @@ export default {
       this.viewKeyWord = ''
       this.comRemoveTail()
     },
-    // loadTable(sceneId) {
-    //   loadTable({ sceneId: sceneId, sort: 'type asc,create_time desc,name asc' }).then(res => {
-    //     res && res.data && (this.sceneDatas = res.data.map(tb => {
-    //       tb.type = 'db'
-    //       return tb
-    //     }))
-    //   })
-    // },
 
     loadField(tableId) {
       fieldList(tableId).then(res => {
@@ -673,20 +521,12 @@ export default {
       this.moveId = e.draggedContext.element.id
       return true
     },
-    start1() {
 
-    },
+    end(e) {
-    end1(e) {
       this.refuseMove(e)
       this.removeCheckedKey(e)
-      this.save()
     },
-    save() {
 
-    },
-    end2(e) {
-      this.refuseMove(e)
-    },
     refuseMove(e) {
       const that = this
       const xItems = this.fieldDatas.filter(function(m) {
@@ -699,43 +539,25 @@ export default {
     },
     removeCheckedKey(e) {
       const that = this
-      const xItems = this.selectField.filter(function(m) {
+      if (!this.currentElement.options.attrs.dragItems) return
+      const xItems = this.currentElement.options.attrs.dragItems.filter(function(m) {
         return m.id === that.moveId
       })
 
       if (xItems && xItems.length > 1) {
-        this.selectField.splice(e.newDraggableIndex, 1)
+        this.currentElement.options.attrs.dragItems.splice(e.newDraggableIndex, 1)
       }
     },
-    closeItem(tag) {
-      const index = tag.index
-      this.selectField.splice(index, 1)
-    },
 
-    multipleChange(value) {
+    enableSureButton() {
-      // this.componentInfo.options.attrs.multiple = value
+      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems.length > 0
-      //   this.componentInfo.options.value = null
+      this.$emit('sure-button-status', enable)
-      this.$emit('re-fresh-component', this.componentInfo)
     },
 
-    checkedViewsChange(values) {
+    getElementInfo() {
-      // this.componentInfo.options.attrs.viewIds = values
+      return this.currentElement
-      this.$emit('re-fresh-component', this.componentInfo)
-    },
-    enableRangeChange(value) {
-      if (!value) {
-        this.componentInfo.options.attrs.viewIds = []
-      }
-      // this.componentInfo.options.attrs.enableRange = value
-      this.$emit('re-fresh-component', this.componentInfo)
-    },
-    showTitleChange(value) {
-      if (!value) {
-        this.componentInfo.options.attrs.title = ''
-        this.componentInfo.style.backgroundColor = ''
-      }
-      this.$emit('re-fresh-component', this.componentInfo)
     }
+
   }
 }
 
@@ -768,81 +590,6 @@ export default {
     padding: 5px 10px;
   }
 
-  .filter-field {
-    //   background: #99a9bf;
-    border-radius: 4px;
-    height: 45px;
-
-    .field-content {
-      position: relative;
-      display: table;
-      width: 100%;
-      height: 100%;
-      white-space: nowrap;
-
-      .field-content-left {
-        width: 50px;
-        max-width: 50px;
-        position: relative;
-        display: table-cell;
-        vertical-align: middle;
-        margin: 0px;
-        padding: 8px;
-        height: 100%;
-        border-right: none;
-        border: 1px solid var(--TableBorderColor, #E6E6E6);
-        ;
-
-        .field-content-text {
-          box-sizing: border-box;
-          overflow: hidden;
-          overflow-x: hidden;
-          overflow-y: hidden;
-          word-break: break-all;
-        }
-      }
-
-      .field-content-right {
-        border-left: none;
-        color: #9ea6b2;
-        border: 1px solid var(--TableBorderColor, #E6E6E6);
-        width: 0%;
-        max-width: 0%;
-        position: relative;
-        display: table-cell;
-        vertical-align: middle;
-        margin: 0px;
-        padding: 0 0 0 0;
-        height: 100%;
-      }
-    }
-
-  }
-
-  .filter-options-left {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-    height: 50px;
-  }
-
-  .filter-options-right {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    flex-wrap: nowrap;
-    height: 50px;
-  }
-
-  .filter-content {
-    height: calc(50vh - 120px);
-    top: 160px;
-
-  }
-
   .filter-dialog-tabs {
     border: 1px solid var(--TableBorderColor, #E6E6E6);
     padding: 10px;
@@ -913,59 +660,4 @@ export default {
     height: calc(100% - 6px);
   }
 
-  .box-card {
-    width: 100%;
-    height: 100%;
-  }
-
-  .i-filter {
-    text-align: center;
-    margin-left: 5px;
-    margin-top: 1px;
-  }
-
-  .i-filter-inactive {
-    color: #9ea6b2 !important;
-    cursor: not-allowed !important;
-  }
-
-  .i-filter-active {
-    cursor: pointer !important;
-  }
-
-  .view-container-class {
-
-    min-height: 150px;
-    max-height: 200px;
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    word-break: break-all;
-    position: relative;
-
-  }
-
-  .list-group:empty,
-  .list-group>div:empty {
-    display: inline-block;
-    width: 100%;
-    height: calc(100% - 13px);
-  }
-
-  .list-group:empty:before,
-  .list-group>div:empty:before {
-    content: attr(data-value);
-  }
-
-  .blackTheme .theme-drag {
-    background-color: var(--MainBG, #fff);
-  }
-
-  .span-div {
-    width: 135px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
 </style>

frontend/src/views/panel/filter/filterMain/FilterControl.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-row>
+    <el-col :span="8">
+      <div class="filter-options-left">
+        <el-switch
+          v-if="widget.showSwitch"
+          v-model="attrs.multiple"
+          :active-text="$t('panel.multiple_choice')"
+          :inactive-text="$t('panel.single_choice')"
+          @change="multipleChange"
+        />
+      </div>
+    </el-col>
+    <el-col :span="16">
+      <div class="filter-options-right">
+        <span style="padding-right: 10px;">
+          <el-checkbox v-model="attrs.showTitle" @change="showTitleChange">显示标题
+          </el-checkbox>
+          <el-popover v-model="titlePopovervisible" placement="bottom-end" :disabled="!attrs.showTitle" width="200">
+            <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
+              <el-input v-model="attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
+            </div>
+
+            <i
+              slot="reference"
+              :class="{'i-filter-active': attrs.showTitle, 'i-filter-inactive': !attrs.showTitle}"
+              class="el-icon-setting i-filter"
+            />
+          </el-popover>
+        </span>
+        <span style="padding-left: 10px;">
+          <el-checkbox v-model="attrs.enableRange" @change="enableRangeChange"><span>
+            {{ $t('panel.custom_scope') }} </span> </el-checkbox>
+
+          <el-popover v-model="popovervisible" placement="bottom-end" :disabled="!attrs.enableRange" width="200">
+            <div class="view-container-class">
+              <el-checkbox-group v-model="attrs.viewIds" @change="checkedViewsChange">
+                <el-checkbox
+                  v-for="(item ) in childViews.viewInfos"
+                  :key="item.id"
+                  :label="item.id"
+                  class="de-checkbox"
+                >
+                  <div class="span-div">
+                    <svg-icon :icon-class="item.type" class="chart-icon" />
+                    <span v-if="item.name && item.name.length <= 7" style="margin-left: 6px">{{ item.name }}</span>
+                    <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
+                      <span style="margin-left: 6px">{{ item.name }}</span>
+                    </el-tooltip>
+                  </div>
+
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+
+            <i
+              slot="reference"
+              :class="{'i-filter-active': attrs.enableRange, 'i-filter-inactive': !attrs.enableRange}"
+              class="el-icon-setting i-filter"
+            />
+          </el-popover>
+        </span>
+      </div>
+
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'FilterControl',
+  props: {
+    widget: {
+      type: Object,
+      default: null
+    },
+    controlAttrs: {
+      type: Object,
+      default: null
+    },
+
+    childViews: {
+      type: Object,
+      default: () => {}
+    },
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      attrs: null,
+      titlePopovervisible: false,
+      popovervisible: false
+
+    }
+  },
+
+  created() {
+    this.attrs = this.controlAttrs
+  },
+  methods: {
+    multipleChange(value) {
+      this.fillAttrs2Filter()
+    },
+    checkedViewsChange(values) {
+      this.fillAttrs2Filter()
+    },
+    enableRangeChange(value) {
+      if (!value) {
+        this.attrs.viewIds = []
+      }
+      this.fillAttrs2Filter()
+    },
+    showTitleChange(value) {
+      if (!value) {
+        this.attrs.title = ''
+        // this.componentInfo.style.backgroundColor = ''
+      }
+      this.fillAttrs2Filter()
+    },
+
+    fillAttrs2Filter() {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .filter-options-left {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    height: 50px;
+  }
+
+  .filter-options-right {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    height: 50px;
+  }
+
+  .i-filter {
+    text-align: center;
+    margin-left: 5px;
+    margin-top: 1px;
+  }
+
+  .i-filter-inactive {
+    color: #9ea6b2 !important;
+    cursor: not-allowed !important;
+  }
+
+  .i-filter-active {
+    cursor: pointer !important;
+  }
+
+  .view-container-class {
+
+    min-height: 150px;
+    max-height: 200px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    word-break: break-all;
+    position: relative;
+
+  }
+
+  .span-div {
+    width: 135px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+</style>

frontend/src/views/panel/filter/filterMain/FilterFoot.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-row>
+    <el-col :span="24">
+      <div class="filter-content">
+        <el-card v-if="element.serviceName && element.serviceName !== 'timeDateWidget'" class="box-card">
+          <div style="margin-bottom: 10px;">
+            <span>默认值设置</span>
+          </div>
+          <div class="custom-component-class">
+            <component
+              :is="element.component"
+              :id="'component' + element.id"
+              class="component"
+              :style="element.style"
+              :element="element"
+              :in-draw="false"
+            />
+          </div>
+
+        </el-card>
+
+        <el-card v-if="element.serviceName && element.serviceName === 'timeDateWidget'" class="box-card">
+          <de-date-default v-if="element.serviceName && element.serviceName === 'timeDateWidget'" :element="element" />
+        </el-card>
+
+      </div>
+    </el-col>
+  </el-row>
+
+</template>
+
+<script>
+import DeDateDefault from '@/views/panel/filter/defaultValue/DeDateDefault'
+export default {
+  name: 'FilterFoot',
+  components: {
+    DeDateDefault
+  },
+  props: {
+
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  methods: {
+
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .filter-content {
+    height: calc(50vh - 120px);
+    top: 160px;
+
+  }
+
+  .box-card {
+    width: 100%;
+    height: 100%;
+  }
+
+</style>

frontend/src/views/panel/filter/filterMain/FilterHead.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-row>
+    <el-col :span="24">
+      <div class="filter-field">
+        <div class="field-content">
+
+          <div class="field-content-right">
+            <el-row style="display:flex;height: 32px;">
+              <draggable
+                v-model="element.options.attrs.dragItems"
+                group="dimension"
+                animation="300"
+                :move="onMove"
+                class="theme-drag"
+                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
+                @end="end2"
+              >
+                <div class="list-group-container">
+                  <drag-item
+                    v-for="(item,index) in element.options.attrs.dragItems"
+                    :key="item.id"
+                    :item="item"
+                    :index="index"
+                    @closeItem="closeItem"
+                  />
+                </div>
+                <transition-group class="list-group" :data-value="$t('panel.drag_here')" />
+              </draggable>
+            </el-row>
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import DragItem from '@/components/DragItem'
+export default {
+  name: 'FilterHead',
+  components: {
+    draggable,
+    DragItem
+  },
+  props: {
+    element: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      targets: []
+    }
+  },
+
+  watch: {
+
+  },
+  created() {
+  },
+  methods: {
+    onMove(e, originalEvent) {
+      // this.moveId = e.draggedContext.element.id
+      return true
+    },
+    end2(e) {},
+
+    closeItem(tag) {
+      const index = tag.index
+      this.element.options.attrs.dragItems.splice(index, 1)
+    }
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+  .filter-field {
+    border-radius: 4px;
+    height: 45px;
+
+    .field-content {
+      position: relative;
+      display: table;
+      width: 100%;
+      height: 100%;
+      white-space: nowrap;
+
+      .field-content-left {
+        width: 50px;
+        max-width: 50px;
+        position: relative;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0px;
+        padding: 8px;
+        height: 100%;
+        border-right: none;
+        border: 1px solid var(--TableBorderColor, #E6E6E6);
+        ;
+
+        .field-content-text {
+          box-sizing: border-box;
+          overflow: hidden;
+          overflow-x: hidden;
+          overflow-y: hidden;
+          word-break: break-all;
+        }
+      }
+
+      .field-content-right {
+        border-left: none;
+        color: #9ea6b2;
+        border: 1px solid var(--TableBorderColor, #E6E6E6);
+        width: 0%;
+        max-width: 0%;
+        position: relative;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0px;
+        padding: 0 0 0 0;
+        height: 100%;
+      }
+    }
+
+  }
+  .list-group-container:empty,.list-group-container>div:empty {
+      display: none;
+  }
+  .list-group:empty,
+  .list-group>div:empty {
+    display: inline-block;
+    width: 100%;
+    height: calc(100% - 13px);
+  }
+
+  .list-group:empty:before,
+  .list-group>div:empty:before {
+    content: attr(data-value);
+  }
+
+    .blackTheme .theme-drag {
+    background-color: var(--MainBG, #fff);
+  }
+
+</style>