center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor: 解决冲突

Browse Source
This commit is contained in:
taojinlong 2021-12-19 14:50:02 +08:00
commit 50d3a1c37f
70 changed files with 2408 additions and 1258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Dockerfile
View File

@ -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

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

@ -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) {
}

27
backend/src/main/java/io/dataease/base/domain/PanelGroup.java
View File

@ -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;
}

60
backend/src/main/java/io/dataease/base/domain/PanelGroupExample.java
View File

@ -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 {

5
backend/src/main/java/io/dataease/base/domain/PanelGroupWithBLOBs.java
View File

@ -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;

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

@ -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>

17
backend/src/main/java/io/dataease/controller/IndexController.java
View File

@ -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);
}
}
}

8
backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
View File

@ -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;
}
}

2
backend/src/main/java/io/dataease/dto/chart/ChartFieldCustomFilterDTO.java
View File

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

2
backend/src/main/java/io/dataease/dto/chart/ChartViewFieldBaseDTO.java
View File

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

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

@ -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)) {
continue;
if (ObjectUtils.isEmpty(field)) {
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();
String whereName = "";
String whereTerm = transMysqlFilterTerm(filterItemDTO.getTerm());
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.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.getDeType() == 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 {
if (field.getDeExtractType() == 1) {
whereName = originName;
}
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());
} else {
whereName = originName;
}
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) + ")");
if (StringUtils.equalsIgnoreCase(request.getFilterType(), "enum")) {
if (CollectionUtils.isNotEmpty(request.getEnumCheckField())) {
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;

28
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -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());
request.setDatasetTableField(datasetTableField);
if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
if (CollectionUtils.isNotEmpty(request.getViewIds())) {
if (request.getViewIds().contains(view.getId())) {
extFilterList.add(request);
// 解析多个fieldId,fieldId是一个逗号分隔的字符串
String fieldId = request.getFieldId();
if (StringUtils.isNotEmpty(fieldId)) {
String[] fieldIds = fieldId.split(",");
for (String fId : fieldIds) {
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);
}
}
}

3
backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
View File

@ -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());

7
backend/src/main/java/io/dataease/service/panel/PanelViewService.java
View File

@ -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){

4
backend/src/main/resources/db/migration/V29__de1.6.sql
View File

@ -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`;

3
backend/src/main/resources/generatorConfig.xml
View File

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

9
frontend/src/api/dataset/dataset.js
View File

@ -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',

8
frontend/src/components/DeDrag/index.vue
View File

@ -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>

59
frontend/src/components/canvas/components/Editor/CloseBar.vue Normal file
View File

@ -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>

26
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -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
}
}
}

20
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -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(() => {

2
frontend/src/components/canvas/components/Editor/LinkageField.vue
View File

@ -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>

30
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -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>

9
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -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;;

69
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -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
}

90
frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue Normal file
View File

@ -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>

2
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -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'
},
{

99
frontend/src/components/canvas/utils/style.js
View File

@ -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
}

2
frontend/src/components/canvas/utils/utils.js
View File

@ -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
}

26
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -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()
},

4
frontend/src/components/widget/DeWidget/DeButton.vue
View File

@ -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 {

111
frontend/src/components/widget/DeWidget/DeDate.vue
View File

@ -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"
:range-separator="$t(options.attrs.rangeSeparator)"
:start-placeholder="$t(options.attrs.startPlaceholder)"
:end-placeholder="$t(options.attrs.endPlaceholder)"
:placeholder="$t(options.attrs.placeholder)"
:type="element.options.attrs.type"
:range-separator="$t(element.options.attrs.rangeSeparator)"
:start-placeholder="$t(element.options.attrs.startPlaceholder)"
:end-placeholder="$t(element.options.attrs.endPlaceholder)"
: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() {
this.options = this.element.options
if (this.options.value) {
if (this.options.attrs.type !== 'daterange') {
this.values = Array.isArray(this.options.value) ? this.options.value[0] : this.options.value
} else {
this.values = this.options.value
computed: {
defaultoptions() {
if (!this.element || !this.element.options || !this.element.options.attrs.default) return ''
return JSON.stringify(this.element.options.attrs.default)
},
defaultValueStr() {
if (!this.element || !this.element.options || !this.element.options.value) return ''
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])
}
}
}
}

37
frontend/src/components/widget/DeWidget/DeInputSearch.vue
View File

@ -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.inDraw && this.options.value && this.options.value.length > 0) {
this.value = this.options.value[0]
if (this.element.options.value) {
this.value = this.element.options.value
this.search()
}
},
methods: {
search() {
// this.options.value && this.setCondition()
this.options.value = []
if (this.inDraw && this.value) {
this.options.value = [this.value]
if (!this.inDraw) {
this.element.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
}
}
}
}

61
frontend/src/components/widget/DeWidget/DeNumberRange.vue
View File

@ -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.inDraw && this.options.value && this.options.value.length > 0) {
this.form.min = this.options.value[0]
if (this.options.value.length > 1) {
this.form.max = this.options.value[1]
if (this.element.options.value && this.element.options.value.length > 0) {
const values = this.element.options.value
this.form.min = values[0]
if (values.length > 1) {
this.form.max = values[1]
}
this.search()
}
},
methods: {
@ -136,13 +154,15 @@ export default {
},
search() {
this.$refs.form.validate(valid => {
if (!valid) {
return false
}
this.$nextTick(() => {
this.$refs.form.validate(valid => {
if (!valid) {
return false
}
this.setCondition()
this.$store.commit('recordStyleChange')
this.setCondition()
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;

6
frontend/src/components/widget/DeWidget/DeQuarter.vue
View File

@ -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 {

131
frontend/src/components/widget/DeWidget/DeSelect.vue
View File

@ -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"
:multiple="options.attrs.multiple"
:placeholder="$t(options.attrs.placeholder)"
:clearable="!element.options.attrs.multiple"
:multiple="element.options.attrs.multiple"
: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"
:key="item[options.attrs.key]"
v-for="item in datas"
:key="item[element.options.attrs.key]"
:style="{width:selectOptionWidth}"
:label="item[options.attrs.label]"
:value="item[options.attrs.value]"
:label="item[element.options.attrs.label]"
: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) {
const sourceValue = this.options.value
const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
if (value) {
!sourceValid && (this.options.value = [])
sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
!this.inDraw && (this.options.value = [])
} else {
!sourceValid && (this.options.value = null)
sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
!this.inDraw && (this.options.value = null)
'defaultValueStr': function(value, old) {
if (value === old) return
this.value = this.fillValueDerfault()
this.changeValue(value)
},
'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 = ''
}
}
},
created() {
this.options = this.element.options
if (this.options.attrs.fieldId) {
fieldValues(this.options.attrs.fieldId).then(res => {
this.options.attrs.datas = this.optionDatas(res.data)
this.show = false
this.$nextTick(() => {
this.show = true
})
}
// this.setCondition()
},
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.changeValue(this.options.value)
created() {
this.initLoad()
},
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')
},

307
frontend/src/components/widget/DeWidget/DeSelectGrid.vue
View File

@ -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"
ref="deSelectGrid"
:data="(options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas).filter(node => node.text.includes(keyWord))"
:props="defaultProp"
:indent="0"
class="de-filter-tree"
default-expand-all
>
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex;flex: 1;width: 0;">
<el-radio v-if="!options.attrs.multiple" v-model="options.value" :label="data.id" @change="changeRadioBox"><span> {{ node.label }} </span></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-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>
</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 v-if="element.options.attrs.multiple" class="checkbox-group-container">
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('commons.all') }}</el-checkbox>
<el-checkbox-group v-model="value" @change="handleCheckedChange">
<el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
</el-checkbox-group>
</div>
<div v-else class="radio-group-container">
<el-radio-group v-model="value" @change="changeRadioBox">
<el-radio v-for="(item, index) in datas" :key="index" :label="item.id">{{ item.id }}</el-radio>
</el-radio-group>
</div>
</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))
this.options.attrs.datas = []
this.options.attrs.datas = datas
const sourceValue = this.options.value
const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
if (value) {
!sourceValid && (this.options.value = [])
sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
!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)
'defaultValueStr': function(value, old) {
if (value === old) return
this.value = this.fillValueDerfault()
this.changeValue(value)
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.datas.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
}
},
'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
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)
this.initLoad()
},
methods: {
initValue(value) {
// this.options.value = [value]
this.setCondition()
},
setMutiBox() {
if (this.options && this.options.attrs.multiple) {
this.options.attrs.datas.forEach(data => {
data.checked = (this.options.value && this.options.value.includes(data.id))
initLoad() {
this.value = this.element.options.attrs.multiple ? [] : null
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.attrs.multiple) {
this.checkAll = this.value.length === this.datas.length
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() {
if (this.options && !this.options.attrs.multiple) {
if (Array.isArray(this.options.value) && this.options.value.length > 0) {
// this.value = this.options.value.length[0]
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()
},
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) {
const values = Array.isArray(this.options.value) ? this.options.value : this.options.value ? [this.options.value] : []
const index = values.indexOf(data.id)
if (index < 0 && data.checked) {
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()
formatFilterValue() {
if (this.value === null) return []
if (Array.isArray(this.value)) return this.value
return this.value.split(',')
},
// 勾选数据项 会影响全选节点的状态
setAllNodeStatus() {
const nodeSize = this.options.attrs.datas.length
const checkedSize = this.options.attrs.datas.filter(item => item.checked).length
if (nodeSize === checkedSize) {
this.allNode.checked = true
this.allNode.indeterminate = false
} else if (checkedSize === 0) {
this.allNode.checked = false
this.allNode.indeterminate = false
fillValueDerfault() {
const defaultV = this.element.options.value
if (this.element.options.attrs.multiple) {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
return defaultV.split(',')
} else {
this.allNode.checked = false
this.allNode.indeterminate = true
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
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>

5
frontend/src/components/widget/DeWidget/DeTreeSelect.vue
View File

@ -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 {

4
frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
View File

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

4
frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
View File

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

5
frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
View File

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

4
frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
View File

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

4
frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
View File

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

4
frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
View File

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

4
frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
View File

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

74
frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
View File

@ -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

4
frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
View File

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

4
frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
View File

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

6
frontend/src/lang/en.js
View File

@ -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',

6
frontend/src/lang/tw.js
View File

@ -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 頁，默認抽取第一個',

6
frontend/src/lang/zh.js
View File

@ -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 页，默认抽取第一个',

14
frontend/src/store/index.js
View File

@ -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

500
frontend/src/styles/deicon/demo_index.html
View File

File diff suppressed because it is too large Load Diff

22
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1636516993563') format('woff2'),
url('iconfont.woff?t=1636516993563') format('woff'),
url('iconfont.ttf?t=1636516993563') format('truetype');
src: url('iconfont.woff2?t=1639622225820') format('woff2'),
url('iconfont.woff?t=1639622225820') format('woff'),
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";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

28
frontend/src/styles/deicon/iconfont.json
View File

@ -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": "洗浴",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.

317
frontend/src/styles/index.scss
View File

@ -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 {
background-color: var(--TableBG) !important;
}
}
th {
background-color: var(--TableBG) !important;
}
}
.blackTheme .el-textarea__inner {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
.blackTheme .el-textarea__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-input__inner {
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
}
.blackTheme .el-input__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-input-number__decrease {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
}
.blackTheme .el-input-number__increase {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
}
.blackTheme .el-picker-panel__footer {
background-color: var(--MainBG) !important;
background-color: var(--MainBG) !important;
}
.el-pagination {
button:disabled {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
button:disabled {
color: var(--TableColor) !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;
background-color: var(--MainBG) !important;
color: var(--TableColor) !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);
border-color: var(--TableBorderColor);
color: var(--TableColor) !important; ;
background-color: var(--ContentBG);
border-color: var(--TableBorderColor);
color: var(--TableColor) !important;
;
}
.blackTheme .vue-treeselect__control {
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
background-color: var(--MainBG) !important;
color: var(--TableColor) !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 {
color: var(--TableColor) !important;
background-color: var(--ContentBG) !important;
}
.el-input-group__append {
background-color: var(--ContentBG) !important;
border-color: var(--ContentBG) !important;
}
input.el-input__inner {
color: var(--TableColor) !important;
background-color: var(--ContentBG) !important;
}
.el-input-group__append {
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 {
background-color: var(--MenuActiveBG) !important;
.blackTheme .is-current>.el-tree-node__content {
background-color: var(--MenuActiveBG) !important;
}
.blackTheme .el-collapse-item__header {
background-color: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
border: none !important;
background-color: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
border: none !important;
}
.blackTheme .el-collapse-item__wrap {
background-color: var(--ContentBG) !important;
border: none !important;
background-color: var(--ContentBG) !important;
border: none !important;
}
.blackTheme .content-container__header {
color: var(--TextPrimary);
color: var(--TextPrimary);
}
.blackTheme .el-button--default {
background-color: var(--MainBG) !important;
color: var(--Main) !important;
background-color: var(--MainBG) !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 {
background-color: var(--TableBG) !important;
}
.body--wrapper {
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 ;
color: #ffffff;
background-color: #000000;
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);
color: var(--TableColor);
border: var(--TableBorder);
background-color: var(--TableBG);
color: var(--TableColor);
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 {
background: #38393a !important;
.blackTheme>>> ::-webkit-scrollbar-thumb {
background: #38393a !important;
}
.blackTheme .el-message-box__content {
color:#F2F6FC;
color: #F2F6FC;
}
.blackTheme .el-message-box__btns {
.el-button--default:not(.el-button--primary) {
background-color: #171b22 ;
color: #2681ff;
}
.el-button--primary {
color: #21333b;
background-color: #2681ff;
border-color: #2681ff;
}
.el-button--default:not(.el-button--primary) {
background-color: #171b22;
color: #2681ff;
}
.el-button--primary {
color: #21333b;
background-color: #2681ff;
border-color: #2681ff;
}
}
.blackTheme .vue-treeselect__menu {
border: 1px solid var(--TableBorderColor, #cfcfcf);
background: var(--MainBG, #fff);
border: 1px solid var(--TableBorderColor, #cfcfcf);
background: var(--MainBG, #fff);
}
.blackTheme .vue-treeselect__option:not(.vue-treeselect__option--highlight) {
color: #606266;
}
.blackTheme .vue-treeselect__option--highlight {
color: #2681ff;
background-color: #000000;
color: #606266;
}
.blackTheme .el-table__body tr.current-row > td {
background-color: #324f62;
.blackTheme .vue-treeselect__option--highlight {
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{
display: none!important;
.chart-type .el-radio__input {
display: none !important;
}
.chart-type .el-radio__label{
padding-left: 0!important;
.chart-type .el-radio__label {
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{
border: 1px solid #999999!important;
margin: 0 0 6px 6px!important;
.el-color-predefine__color-selector {
border: 1px solid #999999 !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;
}
}

9
frontend/src/utils/request.js
View File

@ -1,18 +1,17 @@
import axios from 'axios'
import store from '@/store'
import {$alert, $error} from './message'
import {getToken, getIdToken} from '@/utils/auth'
import { $alert, $error } from './message'
import { getToken, getIdToken } from '@/utils/auth'
import Config from '@/settings'
import i18n from '@/lang'
import {tryShowLoading, tryHideLoading} from './loading'
import {getLinkToken, setLinkToken} from '@/utils/auth'
import { tryShowLoading, tryHideLoading } from './loading'
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'

156
frontend/src/views/chart/components/filter/ResultFilterEditor.vue
View File

@ -1,52 +1,84 @@
<template>
<el-col>
<div style="display: inline-block;">
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<div v-if="item.deType === 0 || item.deType === 5">
<el-radio-group
v-model="logic"
v-model="filterType"
size="mini"
style="margin-left: 10px;"
@change="logicChange"
style="margin-bottom: 10px;"
@change="filterTypeChange"
>
<el-radio-button label="and">{{ $t('chart.and') }}</el-radio-button>
<el-radio-button label="or">{{ $t('chart.or') }}</el-radio-button>
<el-radio label="logic">{{ $t('chart.logic_exp') }}</el-radio>
<el-radio label="enum">{{ $t('chart.enum_exp') }}</el-radio>
</el-radio-group>
</div>
<div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
<el-col :span="4">
<span>{{ item.name }}</span>
</el-col>
<el-col :span="8">
<el-select v-model="f.term" size="mini">
<el-option-group
v-for="(group,idx) in options"
:key="idx"
:label="group.label"
>
<el-option
v-for="opt in group.options"
: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 v-if="((item.deType === 0 || item.deType === 5) && filterType === 'logic') || item.deType === 1 || item.deType === 2 || item.deType === 3">
<div style="display: inline-block;">
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<el-radio-group
v-model="logic"
size="mini"
style="margin-left: 10px;"
@change="logicChange"
>
<el-radio-button label="and">{{ $t('chart.and') }}</el-radio-button>
<el-radio-button label="or">{{ $t('chart.or') }}</el-radio-button>
</el-radio-group>
</div>
<div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
<el-col :span="4">
<span>{{ item.name }}</span>
</el-col>
<el-col :span="8">
<el-select v-model="f.term" size="mini">
<el-option-group
v-for="(group,idx) in options"
:key="idx"
:label="group.label"
>
<el-option
v-for="opt in group.options"
: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{
width: 100%;
border-radius: 4px;
border: 1px solid #DCDFE6;
padding: 4px 14px;
margin-bottom: 10px;
display: flex;
justify-content: left;
align-items: center;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.filter-item{
width: 100%;
border-radius: 4px;
border: 1px solid #DCDFE6;
padding: 4px 14px;
margin-bottom: 10px;
display: flex;
justify-content: left;
align-items: center;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
span{
font-size: 12px;
}

32
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -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++) {
const f = this.filterItem.filter[i]
if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
this.$message({
message: this.$t('chart.filter_value_can_null'),
type: 'error',
showClose: true
})
return
if (((this.filterItem.deType === 0 || this.filterItem.deType === 5) && this.filterItem.filterType !== 'enum') ||
this.filterItem.deType === 1 ||
this.filterItem.deType === 2 ||
this.filterItem.deType === 3) {
for (let i = 0; i < this.filterItem.filter.length; i++) {
const f = this.filterItem.filter[i]
if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
this.$message({
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()
},

5
frontend/src/views/panel/edit/ComponentWaitItem.vue
View File

@ -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%;

46
frontend/src/views/panel/edit/index.vue
View File

@ -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">
<component
:is="currentFilterCom.component"
:id="'component' + currentFilterCom.id"
class="component"
:style="currentFilterCom.style"
:element="currentFilterCom"
:in-draw="false"
/>
</filter-dialog>
<filter-dialog
v-if="filterVisible && currentWidget"
:ref="'filter-setting-' + currentFilterCom.id"
:widget-info="currentWidget"
:element="currentFilterCom"
@sure-button-status="sureStatusChange"
@re-fresh-component="reFreshComponent"
/>
<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,
FilterTextAttr
ChartGroup
},
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
}
}
}

129
frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue Normal file
View File

@ -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>

422
frontend/src/views/panel/filter/filterDialog.vue
View File

@ -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"
@start="start1"
@end="end"
>
<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"
@start="start1"
@end="end"
>
<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>
<el-row>
<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 v-if="currentElement.options && currentElement.options.attrs">
<filter-head :element="currentElement" />
<div class="field-content-right">
<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>
<filter-control :element="currentElement" :widget="widget" :control-attrs="myAttrs" :child-views="childViews" />
<i
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>
<filter-foot :element="currentElement" />
<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',
'curComponent',
'isClickComponent',
'canvasStyleData',
'curComponentIndex'
'componentData'
])
},
watch: {
selectField(values) {
'myAttrs.dragItems'(values) {
if (values && values.length > 0) {
const value = values[0]
const fieldId = value.id
if (this.widget && this.widget.optionDatas) {
fieldValues(fieldId).then(res => {
this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
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 {
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)
const fieldIds = values.map(val => val.id)
this.myAttrs.fieldId = fieldIds.join()
// this.myAttrs.dragItems = values
this.myAttrs.activeName = this.activeName
this.myAttrs.fieldsParent = this.fieldsParent
} else if (this.myAttrs && this.myAttrs.fieldId) {
this.myAttrs.fieldId = null
this.myAttrs.activeName = null
}
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) {
this.selectField = this.componentInfo.options.attrs.dragItems
if (this.myAttrs && this.myAttrs.dragItems) {
this.enableSureButton()
}
this.initWithField()
this.loadViews()
@ -460,10 +322,10 @@ export default {
methods: {
initWithField() {
if (this.componentInfo && this.componentInfo.options.attrs.activeName) {
this.activeName = this.componentInfo.options.attrs.activeName
if (this.componentInfo.options.attrs.fieldsParent) {
this.fieldsParent = this.componentInfo.options.attrs.fieldsParent
if (this.myAttrs && this.myAttrs.activeName) {
this.activeName = this.myAttrs.activeName
if (this.myAttrs.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() {
},
end1(e) {
end(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) {
// this.componentInfo.options.attrs.multiple = value
// this.componentInfo.options.value = null
this.$emit('re-fresh-component', this.componentInfo)
enableSureButton() {
const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems.length > 0
this.$emit('sure-button-status', enable)
},
checkedViewsChange(values) {
// this.componentInfo.options.attrs.viewIds = values
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)
getElementInfo() {
return this.currentElement
}
}
}
@ -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>

183
frontend/src/views/panel/filter/filterMain/FilterControl.vue Normal file
View File

@ -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>

71
frontend/src/views/panel/filter/filterMain/FilterFoot.vue Normal file
View File

@ -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>

147
frontend/src/views/panel/filter/filterMain/FilterHead.vue Normal file
View File

@ -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>