mirror of
https://github.com/dataease/dataease.git
synced 2025-02-24 19:42:56 +08:00
Merge remote-tracking branch 'origin/dev' into fix_panel_edit_attr-auto-save
# Conflicts: # frontend/src/components/canvas/components/RectangleAttr.vue
This commit is contained in:
wangjiahao
commit
a2425538fa
@ -13,6 +13,8 @@ public class ChartViewWithBLOBs extends ChartView implements Serializable {
|
||||
|
||||
private String yAxis;
|
||||
|
||||
private String extStack;
|
||||
|
||||
private String customAttr;
|
||||
|
||||
private String customStyle;
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs">
|
||||
<result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
|
||||
<result column="y_axis" jdbcType="LONGVARCHAR" property="yAxis" />
|
||||
<result column="ext_stack" jdbcType="LONGVARCHAR" property="extStack" />
|
||||
<result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" />
|
||||
<result column="custom_style" jdbcType="LONGVARCHAR" property="customStyle" />
|
||||
<result column="custom_filter" jdbcType="LONGVARCHAR" property="customFilter" />
|
||||
@ -84,7 +85,7 @@
|
||||
style_priority
|
||||
</sql>
|
||||
<sql id="Blob_Column_List">
|
||||
x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot
|
||||
x_axis, y_axis, ext_stack, custom_attr, custom_style, custom_filter, snapshot
|
||||
</sql>
|
||||
<select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
|
||||
select
|
||||
@ -139,14 +140,14 @@
|
||||
table_id, `type`, title,
|
||||
create_by, create_time, update_time,
|
||||
style_priority, x_axis, y_axis,
|
||||
custom_attr, custom_style, custom_filter,
|
||||
snapshot)
|
||||
ext_stack, custom_attr, custom_style,
|
||||
custom_filter, snapshot)
|
||||
values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR},
|
||||
#{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR},
|
||||
#{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
|
||||
#{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR},
|
||||
#{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR},
|
||||
#{snapshot,jdbcType=LONGVARCHAR})
|
||||
#{extStack,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR},
|
||||
#{customFilter,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR})
|
||||
</insert>
|
||||
<insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
|
||||
insert into chart_view
|
||||
@ -187,6 +188,9 @@
|
||||
<if test="yAxis != null">
|
||||
y_axis,
|
||||
</if>
|
||||
<if test="extStack != null">
|
||||
ext_stack,
|
||||
</if>
|
||||
<if test="customAttr != null">
|
||||
custom_attr,
|
||||
</if>
|
||||
@ -237,6 +241,9 @@
|
||||
<if test="yAxis != null">
|
||||
#{yAxis,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
<if test="extStack != null">
|
||||
#{extStack,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
<if test="customAttr != null">
|
||||
#{customAttr,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
@ -296,6 +303,9 @@
|
||||
<if test="record.yAxis != null">
|
||||
y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
<if test="record.extStack != null">
|
||||
ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
<if test="record.customAttr != null">
|
||||
custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
@ -327,6 +337,7 @@
|
||||
style_priority = #{record.stylePriority,jdbcType=VARCHAR},
|
||||
x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
|
||||
y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
|
||||
ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
|
||||
custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
|
||||
custom_style = #{record.customStyle,jdbcType=LONGVARCHAR},
|
||||
custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
|
||||
@ -387,6 +398,9 @@
|
||||
<if test="yAxis != null">
|
||||
y_axis = #{yAxis,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
<if test="extStack != null">
|
||||
ext_stack = #{extStack,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
<if test="customAttr != null">
|
||||
custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
|
||||
</if>
|
||||
@ -415,6 +429,7 @@
|
||||
style_priority = #{stylePriority,jdbcType=VARCHAR},
|
||||
x_axis = #{xAxis,jdbcType=LONGVARCHAR},
|
||||
y_axis = #{yAxis,jdbcType=LONGVARCHAR},
|
||||
ext_stack = #{extStack,jdbcType=LONGVARCHAR},
|
||||
custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
|
||||
custom_style = #{customStyle,jdbcType=LONGVARCHAR},
|
||||
custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
package io.dataease.map.dto.entity;
|
||||
|
||||
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||
import lombok.Builder;
|
||||
import lombok.Data;
|
||||
|
||||
@ -10,6 +11,7 @@ import java.util.Optional;
|
||||
|
||||
@Data
|
||||
@Builder
|
||||
@JsonInclude(JsonInclude.Include.NON_NULL)
|
||||
public class AreaEntity implements Serializable {
|
||||
|
||||
private static final long serialVersionUID = -1326667005437020282L;
|
||||
|
||||
@ -5,6 +5,7 @@ import io.dataease.map.api.MapApi;
|
||||
import io.dataease.map.dto.entity.AreaEntity;
|
||||
import io.dataease.map.service.MapService;
|
||||
import io.dataease.map.utils.MapUtils;
|
||||
import org.apache.commons.lang3.StringUtils;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import javax.annotation.Resource;
|
||||
@ -40,7 +41,9 @@ public class MapServer implements MapApi {
|
||||
@Override
|
||||
public List<AreaEntity> areaEntitys(@PathVariable String pcode) {
|
||||
List<AreaEntity> areaEntities = mapService.areaEntities();
|
||||
|
||||
if (StringUtils.equals(pcode, "0")) {
|
||||
return areaEntities;
|
||||
}
|
||||
return mapService.entitysByPid(areaEntities, pcode);
|
||||
}
|
||||
|
||||
|
||||
@ -36,10 +36,23 @@ public abstract class QueryProvider {
|
||||
|
||||
public abstract String getSQLAsTmp(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
|
||||
|
||||
public abstract String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack);
|
||||
|
||||
public abstract String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack);
|
||||
|
||||
public abstract String searchTable(String table);
|
||||
|
||||
public abstract String getSQLSummary(String table, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
|
||||
|
||||
/**
|
||||
* 单指标汇总
|
||||
*
|
||||
* @param sql
|
||||
* @param yAxis
|
||||
* @param customFilter
|
||||
* @param extFilterRequestList
|
||||
* @return
|
||||
*/
|
||||
public abstract String getSQLSummaryAsTmp(String sql, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
|
||||
|
||||
public abstract String wrapSql(String sql);
|
||||
|
||||
@ -263,6 +263,104 @@ public class DorisQueryProvider extends QueryProvider {
|
||||
return getSQL("(" + sql + ")", xAxis, yAxis, customFilter, extFilterRequestList);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
SQLObj tableObj = SQLObj.builder()
|
||||
.tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(DorisConstants.KEYWORD_TABLE, table))
|
||||
.tableAlias(String.format(TABLE_ALIAS_PREFIX, 0))
|
||||
.build();
|
||||
List<SQLObj> xFields = new ArrayList<>();
|
||||
List<SQLObj> xWheres = new ArrayList<>();
|
||||
List<SQLObj> xOrders = new ArrayList<>();
|
||||
List<ChartViewFieldDTO> xList = new ArrayList<>();
|
||||
xList.addAll(xAxis);
|
||||
xList.addAll(extStack);
|
||||
if (CollectionUtils.isNotEmpty(xList)) {
|
||||
for (int i = 0; i < xList.size(); i++) {
|
||||
ChartViewFieldDTO x = xList.get(i);
|
||||
String originField = String.format(DorisConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getDataeaseName());
|
||||
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
|
||||
// 处理横轴字段
|
||||
xFields.add(getXFields(x, originField, fieldAlias));
|
||||
// 处理横轴过滤
|
||||
xWheres.addAll(getXWheres(x, originField, fieldAlias));
|
||||
// 处理横轴排序
|
||||
if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
|
||||
xOrders.add(SQLObj.builder()
|
||||
.orderField(originField)
|
||||
.orderAlias(fieldAlias)
|
||||
.orderDirection(x.getSort())
|
||||
.build());
|
||||
}
|
||||
}
|
||||
}
|
||||
List<SQLObj> yFields = new ArrayList<>();
|
||||
List<SQLObj> yWheres = new ArrayList<>();
|
||||
List<SQLObj> yOrders = new ArrayList<>();
|
||||
if (CollectionUtils.isNotEmpty(yAxis)) {
|
||||
for (int i = 0; i < yAxis.size(); i++) {
|
||||
ChartViewFieldDTO y = yAxis.get(i);
|
||||
String originField = String.format(DorisConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getDataeaseName());
|
||||
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
|
||||
// 处理纵轴字段
|
||||
yFields.add(getYFields(y, originField, fieldAlias));
|
||||
// 处理纵轴过滤
|
||||
yWheres.addAll(getYWheres(y, originField, fieldAlias));
|
||||
// 处理纵轴排序
|
||||
if (StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none")) {
|
||||
yOrders.add(SQLObj.builder()
|
||||
.orderField(originField)
|
||||
.orderAlias(fieldAlias)
|
||||
.orderDirection(y.getSort())
|
||||
.build());
|
||||
}
|
||||
}
|
||||
}
|
||||
// 处理视图中字段过滤
|
||||
List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
|
||||
// 处理仪表板字段过滤
|
||||
List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
|
||||
// 构建sql所有参数
|
||||
List<SQLObj> fields = new ArrayList<>();
|
||||
fields.addAll(xFields);
|
||||
fields.addAll(yFields);
|
||||
List<SQLObj> wheres = new ArrayList<>();
|
||||
wheres.addAll(xWheres);
|
||||
if (customWheres != null) wheres.addAll(customWheres);
|
||||
if (extWheres != null) wheres.addAll(extWheres);
|
||||
List<SQLObj> groups = new ArrayList<>();
|
||||
groups.addAll(xFields);
|
||||
// 外层再次套sql
|
||||
List<SQLObj> orders = new ArrayList<>();
|
||||
orders.addAll(xOrders);
|
||||
orders.addAll(yOrders);
|
||||
List<SQLObj> aggWheres = new ArrayList<>();
|
||||
aggWheres.addAll(yWheres);
|
||||
|
||||
STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
|
||||
ST st_sql = stg.getInstanceOf("querySql");
|
||||
if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
|
||||
if (CollectionUtils.isNotEmpty(yFields)) st_sql.add("aggregators", yFields);
|
||||
if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
|
||||
if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
|
||||
String sql = st_sql.render();
|
||||
|
||||
ST st = stg.getInstanceOf("querySql");
|
||||
SQLObj tableSQL = SQLObj.builder()
|
||||
.tableName(String.format(DorisConstants.BRACKETS, sql))
|
||||
.tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
|
||||
.build();
|
||||
if (CollectionUtils.isNotEmpty(aggWheres)) st.add("filters", aggWheres);
|
||||
if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
|
||||
if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
|
||||
return st.render();
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
return getSQLStack("(" + table + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String searchTable(String table) {
|
||||
return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
|
||||
@ -471,10 +569,14 @@ public class DorisQueryProvider extends QueryProvider {
|
||||
} else if (StringUtils.containsIgnoreCase(request.getOperator(), "like")) {
|
||||
whereValue = "'%" + value.get(0) + "%'";
|
||||
} else if (StringUtils.containsIgnoreCase(request.getOperator(), "between")) {
|
||||
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
String startTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(0))));
|
||||
String endTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(1))));
|
||||
whereValue = String.format(DorisConstants.WHERE_BETWEEN, startTime, endTime);
|
||||
if (request.getDatasetTableField().getDeType() == 1) {
|
||||
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
String startTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(0))));
|
||||
String endTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(1))));
|
||||
whereValue = String.format(DorisConstants.WHERE_BETWEEN, startTime, endTime);
|
||||
} else {
|
||||
whereValue = String.format(MySQLConstants.WHERE_BETWEEN, value.get(0), value.get(1));
|
||||
}
|
||||
} else {
|
||||
whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value.get(0));
|
||||
}
|
||||
|
||||
@ -254,6 +254,123 @@ public class MysqlQueryProvider extends QueryProvider {
|
||||
return getSQL("(" + sqlFix(sql) + ")", xAxis, yAxis, customFilter, extFilterRequestList);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
SQLObj tableObj = SQLObj.builder()
|
||||
.tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(MySQLConstants.KEYWORD_TABLE, table))
|
||||
.tableAlias(String.format(TABLE_ALIAS_PREFIX, 0))
|
||||
.build();
|
||||
List<SQLObj> xFields = new ArrayList<>();
|
||||
List<SQLObj> xWheres = new ArrayList<>();
|
||||
List<SQLObj> xOrders = new ArrayList<>();
|
||||
List<ChartViewFieldDTO> xList = new ArrayList<>();
|
||||
xList.addAll(xAxis);
|
||||
xList.addAll(extStack);
|
||||
if (CollectionUtils.isNotEmpty(xList)) {
|
||||
for (int i = 0; i < xList.size(); i++) {
|
||||
ChartViewFieldDTO x = xList.get(i);
|
||||
String originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
|
||||
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
|
||||
// 处理横轴字段
|
||||
xFields.add(getXFields(x, originField, fieldAlias));
|
||||
// 处理横轴过滤
|
||||
xWheres.addAll(getXWheres(x, originField, fieldAlias));
|
||||
// 处理横轴排序
|
||||
if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
|
||||
xOrders.add(SQLObj.builder()
|
||||
.orderField(originField)
|
||||
.orderAlias(fieldAlias)
|
||||
.orderDirection(x.getSort())
|
||||
.build());
|
||||
}
|
||||
}
|
||||
}
|
||||
List<SQLObj> yFields = new ArrayList<>();
|
||||
List<SQLObj> yWheres = new ArrayList<>();
|
||||
List<SQLObj> yOrders = new ArrayList<>();
|
||||
if (CollectionUtils.isNotEmpty(yAxis)) {
|
||||
for (int i = 0; i < yAxis.size(); i++) {
|
||||
ChartViewFieldDTO y = yAxis.get(i);
|
||||
String originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getOriginName());
|
||||
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
|
||||
// 处理纵轴字段
|
||||
yFields.add(getYFields(y, originField, fieldAlias));
|
||||
// 处理纵轴过滤
|
||||
yWheres.addAll(getYWheres(y, originField, fieldAlias));
|
||||
// 处理纵轴排序
|
||||
if (StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none")) {
|
||||
yOrders.add(SQLObj.builder()
|
||||
.orderField(originField)
|
||||
.orderAlias(fieldAlias)
|
||||
.orderDirection(y.getSort())
|
||||
.build());
|
||||
}
|
||||
}
|
||||
}
|
||||
List<SQLObj> stackFields = new ArrayList<>();
|
||||
List<SQLObj> stackOrders = new ArrayList<>();
|
||||
if (CollectionUtils.isNotEmpty(extStack)) {
|
||||
for (int i = 0; i < extStack.size(); i++) {
|
||||
ChartViewFieldDTO stack = extStack.get(i);
|
||||
String originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), stack.getOriginName());
|
||||
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
|
||||
// 处理横轴字段
|
||||
stackFields.add(getXFields(stack, originField, fieldAlias));
|
||||
// 处理横轴排序
|
||||
if (StringUtils.isNotEmpty(stack.getSort()) && !StringUtils.equalsIgnoreCase(stack.getSort(), "none")) {
|
||||
stackOrders.add(SQLObj.builder()
|
||||
.orderField(originField)
|
||||
.orderAlias(fieldAlias)
|
||||
.orderDirection(stack.getSort())
|
||||
.build());
|
||||
}
|
||||
}
|
||||
}
|
||||
// 处理视图中字段过滤
|
||||
List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
|
||||
// 处理仪表板字段过滤
|
||||
List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
|
||||
// 构建sql所有参数
|
||||
List<SQLObj> fields = new ArrayList<>();
|
||||
fields.addAll(xFields);
|
||||
fields.addAll(yFields);
|
||||
List<SQLObj> wheres = new ArrayList<>();
|
||||
wheres.addAll(xWheres);
|
||||
if (customWheres != null) wheres.addAll(customWheres);
|
||||
if (extWheres != null) wheres.addAll(extWheres);
|
||||
List<SQLObj> groups = new ArrayList<>();
|
||||
groups.addAll(xFields);
|
||||
// 外层再次套sql
|
||||
List<SQLObj> orders = new ArrayList<>();
|
||||
orders.addAll(xOrders);
|
||||
orders.addAll(yOrders);
|
||||
List<SQLObj> aggWheres = new ArrayList<>();
|
||||
aggWheres.addAll(yWheres);
|
||||
|
||||
STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
|
||||
ST st_sql = stg.getInstanceOf("querySql");
|
||||
if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
|
||||
if (CollectionUtils.isNotEmpty(yFields)) st_sql.add("aggregators", yFields);
|
||||
if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
|
||||
if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
|
||||
String sql = st_sql.render();
|
||||
|
||||
ST st = stg.getInstanceOf("querySql");
|
||||
SQLObj tableSQL = SQLObj.builder()
|
||||
.tableName(String.format(MySQLConstants.BRACKETS, sql))
|
||||
.tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
|
||||
.build();
|
||||
if (CollectionUtils.isNotEmpty(aggWheres)) st.add("filters", aggWheres);
|
||||
if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
|
||||
if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
|
||||
return st.render();
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
return getSQLStack("(" + sqlFix(table) + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String searchTable(String table) {
|
||||
return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
|
||||
@ -459,10 +576,14 @@ public class MysqlQueryProvider extends QueryProvider {
|
||||
} else if (StringUtils.containsIgnoreCase(request.getOperator(), "like")) {
|
||||
whereValue = "'%" + value.get(0) + "%'";
|
||||
} else if (StringUtils.containsIgnoreCase(request.getOperator(), "between")) {
|
||||
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
String startTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(0))));
|
||||
String endTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(1))));
|
||||
whereValue = String.format(MySQLConstants.WHERE_BETWEEN, startTime, endTime);
|
||||
if (request.getDatasetTableField().getDeType() == 1) {
|
||||
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
String startTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(0))));
|
||||
String endTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(1))));
|
||||
whereValue = String.format(MySQLConstants.WHERE_BETWEEN, startTime, endTime);
|
||||
} else {
|
||||
whereValue = String.format(MySQLConstants.WHERE_BETWEEN, value.get(0), value.get(1));
|
||||
}
|
||||
} else {
|
||||
whereValue = String.format(MySQLConstants.WHERE_VALUE_VALUE, value.get(0));
|
||||
}
|
||||
|
||||
@ -7,6 +7,8 @@ import io.dataease.dto.chart.ChartViewFieldDTO;
|
||||
import io.dataease.dto.sqlObj.SQLObj;
|
||||
import io.dataease.provider.QueryProvider;
|
||||
import io.dataease.provider.SQLConstants;
|
||||
import io.dataease.provider.doris.DorisConstants;
|
||||
import io.dataease.provider.mysql.MySQLConstants;
|
||||
import org.apache.commons.collections4.CollectionUtils;
|
||||
import org.apache.commons.lang3.ObjectUtils;
|
||||
import org.apache.commons.lang3.StringUtils;
|
||||
@ -107,8 +109,7 @@ public class OracleQueryProvider extends QueryProvider {
|
||||
}
|
||||
|
||||
|
||||
|
||||
private List<SQLObj> xFields(String table, List<DatasetTableField> fields){
|
||||
private List<SQLObj> xFields(String table, List<DatasetTableField> fields) {
|
||||
SQLObj tableObj = SQLObj.builder()
|
||||
.tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(OracleConstants.KEYWORD_TABLE, table))
|
||||
.tableAlias(String.format(OracleConstants.ALIAS_FIX, String.format(TABLE_ALIAS_PREFIX, 0)))
|
||||
@ -155,6 +156,7 @@ public class OracleQueryProvider extends QueryProvider {
|
||||
}
|
||||
return xFields;
|
||||
}
|
||||
|
||||
private String sqlColumn(List<SQLObj> xFields) {
|
||||
String[] array = xFields.stream().map(f -> {
|
||||
return f.getFieldAlias();
|
||||
@ -287,6 +289,104 @@ public class OracleQueryProvider extends QueryProvider {
|
||||
return getSQL("(" + sqlFix(sql) + ")", xAxis, yAxis, customFilter, extFilterRequestList);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
SQLObj tableObj = SQLObj.builder()
|
||||
.tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(OracleConstants.KEYWORD_TABLE, table))
|
||||
.tableAlias(String.format(OracleConstants.ALIAS_FIX, String.format(TABLE_ALIAS_PREFIX, 0)))
|
||||
.build();
|
||||
List<SQLObj> xFields = new ArrayList<>();
|
||||
List<SQLObj> xWheres = new ArrayList<>();
|
||||
List<SQLObj> xOrders = new ArrayList<>();
|
||||
List<ChartViewFieldDTO> xList = new ArrayList<>();
|
||||
xList.addAll(xAxis);
|
||||
xList.addAll(extStack);
|
||||
if (CollectionUtils.isNotEmpty(xList)) {
|
||||
for (int i = 0; i < xList.size(); i++) {
|
||||
ChartViewFieldDTO x = xList.get(i);
|
||||
String originField = String.format(OracleConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
|
||||
String fieldAlias = String.format(OracleConstants.ALIAS_FIX, String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i));
|
||||
// 处理横轴字段
|
||||
xFields.add(getXFields(x, originField, fieldAlias));
|
||||
// 处理横轴过滤
|
||||
xWheres.addAll(getXWheres(x, originField, fieldAlias));
|
||||
// 处理横轴排序
|
||||
if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
|
||||
xOrders.add(SQLObj.builder()
|
||||
.orderField(originField)
|
||||
.orderAlias(fieldAlias)
|
||||
.orderDirection(x.getSort())
|
||||
.build());
|
||||
}
|
||||
}
|
||||
}
|
||||
List<SQLObj> yFields = new ArrayList<>();
|
||||
List<SQLObj> yWheres = new ArrayList<>();
|
||||
List<SQLObj> yOrders = new ArrayList<>();
|
||||
if (CollectionUtils.isNotEmpty(yAxis)) {
|
||||
for (int i = 0; i < yAxis.size(); i++) {
|
||||
ChartViewFieldDTO y = yAxis.get(i);
|
||||
String originField = String.format(OracleConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getOriginName());
|
||||
String fieldAlias = String.format(OracleConstants.ALIAS_FIX, String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i));
|
||||
// 处理纵轴字段
|
||||
yFields.add(getYFields(y, originField, fieldAlias));
|
||||
// 处理纵轴过滤
|
||||
yWheres.addAll(getYWheres(y, originField, fieldAlias));
|
||||
// 处理纵轴排序
|
||||
if (StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none")) {
|
||||
yOrders.add(SQLObj.builder()
|
||||
.orderField(originField)
|
||||
.orderAlias(fieldAlias)
|
||||
.orderDirection(y.getSort())
|
||||
.build());
|
||||
}
|
||||
}
|
||||
}
|
||||
// 处理视图中字段过滤
|
||||
List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
|
||||
// 处理仪表板字段过滤
|
||||
List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
|
||||
// 构建sql所有参数
|
||||
List<SQLObj> fields = new ArrayList<>();
|
||||
fields.addAll(xFields);
|
||||
fields.addAll(yFields);
|
||||
List<SQLObj> wheres = new ArrayList<>();
|
||||
wheres.addAll(xWheres);
|
||||
if (customWheres != null) wheres.addAll(customWheres);
|
||||
if (extWheres != null) wheres.addAll(extWheres);
|
||||
List<SQLObj> groups = new ArrayList<>();
|
||||
groups.addAll(xFields);
|
||||
// 外层再次套sql
|
||||
List<SQLObj> orders = new ArrayList<>();
|
||||
orders.addAll(xOrders);
|
||||
orders.addAll(yOrders);
|
||||
List<SQLObj> aggWheres = new ArrayList<>();
|
||||
aggWheres.addAll(yWheres);
|
||||
|
||||
STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
|
||||
ST st_sql = stg.getInstanceOf("querySql");
|
||||
if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
|
||||
if (CollectionUtils.isNotEmpty(yFields)) st_sql.add("aggregators", yFields);
|
||||
if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
|
||||
if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
|
||||
String sql = st_sql.render();
|
||||
|
||||
ST st = stg.getInstanceOf("querySql");
|
||||
SQLObj tableSQL = SQLObj.builder()
|
||||
.tableName(String.format(OracleConstants.BRACKETS, sql))
|
||||
.tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
|
||||
.build();
|
||||
if (CollectionUtils.isNotEmpty(aggWheres)) st.add("filters", aggWheres);
|
||||
if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
|
||||
if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
|
||||
return st.render();
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
return getSQLStack("(" + sqlFix(table) + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String searchTable(String table) {
|
||||
return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
|
||||
@ -486,10 +586,14 @@ public class OracleQueryProvider extends QueryProvider {
|
||||
} else if (StringUtils.containsIgnoreCase(request.getOperator(), "like")) {
|
||||
whereValue = "'%" + value.get(0) + "%'";
|
||||
} else if (StringUtils.containsIgnoreCase(request.getOperator(), "between")) {
|
||||
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
String startTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(0))));
|
||||
String endTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(1))));
|
||||
whereValue = String.format(OracleConstants.WHERE_BETWEEN, startTime, endTime);
|
||||
if (request.getDatasetTableField().getDeType() == 1) {
|
||||
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
String startTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(0))));
|
||||
String endTime = simpleDateFormat.format(new Date(Long.parseLong(value.get(1))));
|
||||
whereValue = String.format(OracleConstants.WHERE_BETWEEN, startTime, endTime);
|
||||
} else {
|
||||
whereValue = String.format(MySQLConstants.WHERE_BETWEEN, value.get(0), value.get(1));
|
||||
}
|
||||
} else {
|
||||
whereValue = String.format(OracleConstants.WHERE_VALUE_VALUE, value.get(0));
|
||||
}
|
||||
|
||||
@ -271,6 +271,16 @@ public class SqlserverQueryProvider extends QueryProvider {
|
||||
return getSQL(" (" + sqlFix(sql) + ") AS tmp ", xAxis, yAxis, customFilter, extFilterRequestList);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String searchTable(String table) {
|
||||
return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
|
||||
|
||||
@ -134,6 +134,8 @@ public class ChartViewService {
|
||||
}.getType());
|
||||
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
|
||||
}.getType());
|
||||
List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
|
||||
}.getType());
|
||||
List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
|
||||
}.getType());
|
||||
List<ChartCustomFilterDTO> customFilter = fieldCustomFilter.stream().map(ele -> {
|
||||
@ -145,24 +147,19 @@ public class ChartViewService {
|
||||
return dto;
|
||||
}).collect(Collectors.toList());
|
||||
|
||||
// if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
|
||||
// xAxis = new ArrayList<>();
|
||||
// if (CollectionUtils.isEmpty(yAxis)) {
|
||||
// ChartViewDTO dto = new ChartViewDTO();
|
||||
// BeanUtils.copyBean(dto, view);
|
||||
// return dto;
|
||||
// }
|
||||
// } else {
|
||||
// if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
|
||||
// ChartViewDTO dto = new ChartViewDTO();
|
||||
// BeanUtils.copyBean(dto, view);
|
||||
// return dto;
|
||||
// }
|
||||
// }
|
||||
if (CollectionUtils.isEmpty(xAxis) && CollectionUtils.isEmpty(yAxis)) {
|
||||
ChartViewDTO dto = new ChartViewDTO();
|
||||
BeanUtils.copyBean(dto, view);
|
||||
return dto;
|
||||
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
|
||||
xAxis = new ArrayList<>();
|
||||
if (CollectionUtils.isEmpty(yAxis)) {
|
||||
ChartViewDTO dto = new ChartViewDTO();
|
||||
BeanUtils.copyBean(dto, view);
|
||||
return dto;
|
||||
}
|
||||
} else {
|
||||
if (CollectionUtils.isEmpty(xAxis) && CollectionUtils.isEmpty(yAxis)) {
|
||||
ChartViewDTO dto = new ChartViewDTO();
|
||||
BeanUtils.copyBean(dto, view);
|
||||
return dto;
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤来自仪表板的条件
|
||||
@ -204,12 +201,16 @@ public class ChartViewService {
|
||||
datasourceRequest.setTable(dataTableInfoDTO.getTable());
|
||||
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
|
||||
datasourceRequest.setQuery(qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, customFilter, extFilterList));
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
|
||||
datasourceRequest.setQuery(qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extStack));
|
||||
} else {
|
||||
datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList));
|
||||
}
|
||||
} else if (StringUtils.equalsIgnoreCase(table.getType(), "sql")) {
|
||||
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
|
||||
datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(dataTableInfoDTO.getSql(), yAxis, customFilter, extFilterList));
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
|
||||
datasourceRequest.setQuery(qp.getSQLAsTmpStack(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extStack));
|
||||
} else {
|
||||
datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList));
|
||||
}
|
||||
@ -219,6 +220,8 @@ public class ChartViewService {
|
||||
String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
|
||||
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
|
||||
datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(sql, yAxis, customFilter, extFilterList));
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
|
||||
datasourceRequest.setQuery(qp.getSQLAsTmpStack(sql, xAxis, yAxis, customFilter, extFilterList, extStack));
|
||||
} else {
|
||||
datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, customFilter, extFilterList));
|
||||
}
|
||||
@ -245,6 +248,8 @@ public class ChartViewService {
|
||||
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
|
||||
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
|
||||
datasourceRequest.setQuery(qp.getSQLSummary(tableName, yAxis, customFilter, extFilterList));
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
|
||||
datasourceRequest.setQuery(qp.getSQLStack(tableName, xAxis, yAxis, customFilter, extFilterList, extStack));
|
||||
} else {
|
||||
datasourceRequest.setQuery(qp.getSQL(tableName, xAxis, yAxis, customFilter, extFilterList));
|
||||
}
|
||||
@ -279,67 +284,24 @@ public class ChartViewService {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if (StringUtils.containsIgnoreCase(view.getType(), "pie") && data.size() > 1000) {
|
||||
data = data.subList(0, 1000);
|
||||
}
|
||||
|
||||
Map<String, Object> map = new TreeMap<>();
|
||||
// 图表组件可再扩展
|
||||
List<String> x = new ArrayList<>();
|
||||
List<Series> series = new ArrayList<>();
|
||||
for (ChartViewFieldDTO y : yAxis) {
|
||||
Series series1 = new Series();
|
||||
series1.setName(y.getName());
|
||||
series1.setType(view.getType());
|
||||
series1.setData(new ArrayList<>());
|
||||
series.add(series1);
|
||||
Map<String, Object> mapChart;
|
||||
if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
|
||||
mapChart = transStackChartData(xAxis, yAxis, view, data, extStack);
|
||||
} else {
|
||||
mapChart = transChartData(xAxis, yAxis, view, data);
|
||||
}
|
||||
for (String[] d : data) {
|
||||
StringBuilder a = new StringBuilder();
|
||||
for (int i = 0; i < xAxis.size(); i++) {
|
||||
if (i == xAxis.size() - 1) {
|
||||
a.append(d[i]);
|
||||
} else {
|
||||
a.append(d[i]).append("\n");
|
||||
}
|
||||
}
|
||||
x.add(a.toString());
|
||||
for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
|
||||
int j = i - xAxis.size();
|
||||
try {
|
||||
series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
|
||||
} catch (Exception e) {
|
||||
series.get(j).getData().add(new BigDecimal(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
// table组件
|
||||
List<ChartViewFieldDTO> fields = new ArrayList<>();
|
||||
List<Map<String, Object>> tableRow = new ArrayList<>();
|
||||
if (ObjectUtils.isNotEmpty(xAxis) && !StringUtils.equalsIgnoreCase("text", view.getType()) && !StringUtils.equalsIgnoreCase("gauge", view.getType())) {
|
||||
fields.addAll(xAxis);
|
||||
}
|
||||
fields.addAll(yAxis);
|
||||
data.forEach(ele -> {
|
||||
Map<String, Object> d = new HashMap<>();
|
||||
for (int i = 0; i < fields.size(); i++) {
|
||||
ChartViewFieldDTO chartViewFieldDTO = fields.get(i);
|
||||
if (chartViewFieldDTO.getDeType() == 0 || chartViewFieldDTO.getDeType() == 1) {
|
||||
d.put(fields.get(i).getDataeaseName(), StringUtils.isEmpty(ele[i]) ? "" : ele[i]);
|
||||
} else if (chartViewFieldDTO.getDeType() == 2 || chartViewFieldDTO.getDeType() == 3) {
|
||||
d.put(fields.get(i).getDataeaseName(), new BigDecimal(StringUtils.isEmpty(ele[i]) ? "0" : ele[i]).setScale(2, RoundingMode.HALF_UP));
|
||||
}
|
||||
}
|
||||
tableRow.add(d);
|
||||
});
|
||||
// table组件，明细表，也用于导出数据
|
||||
Map<String, Object> mapTableNormal = transTableNormal(xAxis, yAxis, view, data, extStack);
|
||||
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
map.put("x", x);
|
||||
map.put("series", series);
|
||||
map.put("fields", fields);
|
||||
map.put("tableRow", tableRow);
|
||||
map.putAll(mapChart);
|
||||
map.putAll(mapTableNormal);
|
||||
|
||||
ChartViewDTO dto = new ChartViewDTO();
|
||||
BeanUtils.copyBean(dto, view);
|
||||
@ -384,6 +346,166 @@ public class ChartViewService {
|
||||
return result;
|
||||
}
|
||||
|
||||
private Map<String, Object> transChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data) {
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
|
||||
List<String> x = new ArrayList<>();
|
||||
List<Series> series = new ArrayList<>();
|
||||
for (ChartViewFieldDTO y : yAxis) {
|
||||
Series series1 = new Series();
|
||||
series1.setName(y.getName());
|
||||
series1.setType(view.getType());
|
||||
series1.setData(new ArrayList<>());
|
||||
series.add(series1);
|
||||
}
|
||||
for (String[] d : data) {
|
||||
StringBuilder a = new StringBuilder();
|
||||
for (int i = 0; i < xAxis.size(); i++) {
|
||||
if (i == xAxis.size() - 1) {
|
||||
a.append(d[i]);
|
||||
} else {
|
||||
a.append(d[i]).append("\n");
|
||||
}
|
||||
}
|
||||
x.add(a.toString());
|
||||
for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
|
||||
int j = i - xAxis.size();
|
||||
try {
|
||||
series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
|
||||
} catch (Exception e) {
|
||||
series.get(j).getData().add(new BigDecimal(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
map.put("x", x);
|
||||
map.put("series", series);
|
||||
return map;
|
||||
}
|
||||
|
||||
private Map<String, Object> transStackChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, List<ChartViewFieldDTO> extStack) {
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
|
||||
List<String> x = new ArrayList<>();
|
||||
List<String> stack = new ArrayList<>();
|
||||
List<Series> series = new ArrayList<>();
|
||||
|
||||
if (CollectionUtils.isNotEmpty(extStack)) {
|
||||
BigDecimal defaultValue = StringUtils.containsIgnoreCase(view.getType(), "line") ? new BigDecimal(0) : null;
|
||||
// 构建横轴
|
||||
for (String[] d : data) {
|
||||
StringBuilder a = new StringBuilder();
|
||||
for (int i = 0; i < xAxis.size(); i++) {
|
||||
if (i == xAxis.size() - 1) {
|
||||
a.append(d[i]);
|
||||
} else {
|
||||
a.append(d[i]).append("\n");
|
||||
}
|
||||
}
|
||||
x.add(a.toString());
|
||||
}
|
||||
x = x.stream().distinct().collect(Collectors.toList());
|
||||
// 构建堆叠
|
||||
for (String[] d : data) {
|
||||
stack.add(d[xAxis.size()]);
|
||||
}
|
||||
stack = stack.stream().distinct().collect(Collectors.toList());
|
||||
for (String s : stack) {
|
||||
Series series1 = new Series();
|
||||
series1.setName(s);
|
||||
series1.setType(view.getType());
|
||||
List<BigDecimal> list = new ArrayList<>();
|
||||
for (int i = 0; i < x.size(); i++) {
|
||||
list.add(defaultValue);
|
||||
}
|
||||
series1.setData(list);
|
||||
series.add(series1);
|
||||
}
|
||||
for (Series ss : series) {
|
||||
for (int i = 0; i < x.size(); i++) {
|
||||
for (String[] row : data) {
|
||||
String stackColumn = row[xAxis.size()];
|
||||
if (StringUtils.equals(ss.getName(), stackColumn)) {
|
||||
StringBuilder a = new StringBuilder();
|
||||
for (int j = 0; j < xAxis.size(); j++) {
|
||||
if (j == xAxis.size() - 1) {
|
||||
a.append(row[j]);
|
||||
} else {
|
||||
a.append(row[j]).append("\n");
|
||||
}
|
||||
}
|
||||
if (StringUtils.equals(a.toString(), x.get(i))) {
|
||||
ss.getData().set(i, new BigDecimal(row[xAxis.size() + extStack.size()]));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (ChartViewFieldDTO y : yAxis) {
|
||||
Series series1 = new Series();
|
||||
series1.setName(y.getName());
|
||||
series1.setType(view.getType());
|
||||
series1.setData(new ArrayList<>());
|
||||
series.add(series1);
|
||||
}
|
||||
for (String[] d : data) {
|
||||
StringBuilder a = new StringBuilder();
|
||||
for (int i = 0; i < xAxis.size(); i++) {
|
||||
if (i == xAxis.size() - 1) {
|
||||
a.append(d[i]);
|
||||
} else {
|
||||
a.append(d[i]).append("\n");
|
||||
}
|
||||
}
|
||||
x.add(a.toString());
|
||||
for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
|
||||
int j = i - xAxis.size();
|
||||
try {
|
||||
series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
|
||||
} catch (Exception e) {
|
||||
series.get(j).getData().add(new BigDecimal(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
map.put("x", x);
|
||||
map.put("series", series);
|
||||
return map;
|
||||
}
|
||||
|
||||
private Map<String, Object> transTableNormal(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, List<ChartViewFieldDTO> extStack) {
|
||||
Map<String, Object> map = new TreeMap<>();
|
||||
List<ChartViewFieldDTO> fields = new ArrayList<>();
|
||||
List<Map<String, Object>> tableRow = new ArrayList<>();
|
||||
if (ObjectUtils.isNotEmpty(xAxis)) {
|
||||
fields.addAll(xAxis);
|
||||
}
|
||||
if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
|
||||
if (ObjectUtils.isNotEmpty(extStack)) {
|
||||
fields.addAll(extStack);
|
||||
}
|
||||
}
|
||||
fields.addAll(yAxis);
|
||||
data.forEach(ele -> {
|
||||
Map<String, Object> d = new HashMap<>();
|
||||
for (int i = 0; i < fields.size(); i++) {
|
||||
ChartViewFieldDTO chartViewFieldDTO = fields.get(i);
|
||||
if (chartViewFieldDTO.getDeType() == 0 || chartViewFieldDTO.getDeType() == 1) {
|
||||
d.put(fields.get(i).getDataeaseName(), StringUtils.isEmpty(ele[i]) ? "" : ele[i]);
|
||||
} else if (chartViewFieldDTO.getDeType() == 2 || chartViewFieldDTO.getDeType() == 3) {
|
||||
d.put(fields.get(i).getDataeaseName(), new BigDecimal(StringUtils.isEmpty(ele[i]) ? "0" : ele[i]).setScale(2, RoundingMode.HALF_UP));
|
||||
}
|
||||
}
|
||||
tableRow.add(d);
|
||||
});
|
||||
map.put("fields", fields);
|
||||
map.put("tableRow", tableRow);
|
||||
return map;
|
||||
}
|
||||
|
||||
private void checkName(ChartViewWithBLOBs chartView) {
|
||||
// if (StringUtils.isEmpty(chartView.getId())) {
|
||||
// return;
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
ALTER TABLE `chart_view` ADD COLUMN `ext_stack` LONGTEXT COMMENT '堆叠项' AFTER `y_axis`;
|
||||
|
||||
UPDATE `chart_view` SET `ext_stack` = '[]';
|
||||
UPDATE `chart_view` SET `custom_filter` = '[]';
|
||||
2938
backend/src/main/resources/db/migration/V17__area_mapping.sql
Normal file
2938
backend/src/main/resources/db/migration/V17__area_mapping.sql
Normal file
File diff suppressed because it is too large
Load Diff
@ -64,7 +64,7 @@
|
||||
|
||||
<!--要生成的数据库表 -->
|
||||
|
||||
<!-- <table tableName="datasource"/>-->
|
||||
<table tableName="chart_view"/>
|
||||
<!-- <table tableName="sys_dict"/>-->
|
||||
<!-- <table tableName="sys_dict_item"/>-->
|
||||
<!-- <table tableName="dataset_table_field"/>-->
|
||||
@ -74,9 +74,9 @@
|
||||
<!-- </table>-->
|
||||
<!-- <table tableName="v_dataset"/>-->
|
||||
<!-- <table tableName="sys_auth_detail"/>-->
|
||||
<table tableName="dataset_table_task">
|
||||
<columnOverride column="extra_data" javaType="java.lang.String" jdbcType="VARCHAR" />
|
||||
</table>
|
||||
<!-- <table tableName="dataset_table_task">-->
|
||||
<!-- <columnOverride column="extra_data" javaType="java.lang.String" jdbcType="VARCHAR" />-->
|
||||
<!-- </table>-->
|
||||
|
||||
|
||||
</context>
|
||||
|
||||
17
frontend/src/api/map/map.js
Normal file
17
frontend/src/api/map/map.js
Normal file
@ -0,0 +1,17 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export const areaMapping = () => {
|
||||
return request({
|
||||
url: '/api/map/areaEntitys/0',
|
||||
method: 'get',
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
|
||||
export function geoJson(areaCode) {
|
||||
return request({
|
||||
url: '/api/map/resourceFull/' + areaCode,
|
||||
method: 'get',
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
@ -623,7 +623,7 @@ export default {
|
||||
elementMouseDown(e) {
|
||||
// private 设置当前组件数据及状态
|
||||
this.$store.commit('setClickComponentStatus', true)
|
||||
if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search') {
|
||||
if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-number-range') {
|
||||
e.preventDefault()
|
||||
}
|
||||
// 阻止冒泡事件
|
||||
|
||||
@ -226,7 +226,7 @@ export default {
|
||||
|
||||
handleMouseDownOnShape(e) {
|
||||
this.$store.commit('setClickComponentStatus', true)
|
||||
if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search') {
|
||||
if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-number-range') {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
|
||||
159
frontend/src/components/widget/DeWidget/DeNumberRange.vue
Normal file
159
frontend/src/components/widget/DeWidget/DeNumberRange.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
|
||||
<el-form v-if="options!== null && 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="options.attrs.placeholder" @change="handleMinChange" />
|
||||
</el-form-item>
|
||||
<span>~</span>
|
||||
<el-form-item prop="max">
|
||||
<el-input v-model="form.max" :placeholder="options.attrs.placeholder" @change="handleMaxChange" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const MIN_NUMBER = -2147483648
|
||||
const MAX_NUMBER = 2147483647
|
||||
export default {
|
||||
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inDraw: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
options: null,
|
||||
operator: 'between',
|
||||
values: null,
|
||||
canEdit: false,
|
||||
|
||||
form: { min: '', max: '' },
|
||||
rules: {
|
||||
min: [
|
||||
{ required: true, message: this.$t('denumberrange.please_key_min'), trigger: 'blur' },
|
||||
{ validator: this.validateCom, trigger: 'blur' },
|
||||
{ validator: this.validateMin, trigger: 'blur' }
|
||||
],
|
||||
max: [
|
||||
{ required: true, message: this.$t('denumberrange.please_key_max'), trigger: 'blur' },
|
||||
{ validator: this.validateCom, trigger: 'blur' },
|
||||
{ validator: this.validateMax, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
changeIndex: 0,
|
||||
timeMachine: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
handler(value) {
|
||||
this.destryTimeMachine()
|
||||
this.changeIndex++
|
||||
this.searchWithKey(this.changeIndex)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.options = this.element.options
|
||||
},
|
||||
methods: {
|
||||
searchWithKey(index) {
|
||||
this.timeMachine = setTimeout(() => {
|
||||
if (index === this.changeIndex) {
|
||||
this.search()
|
||||
}
|
||||
this.destryTimeMachine()
|
||||
}, 1000)
|
||||
},
|
||||
destryTimeMachine() {
|
||||
this.timeMachine && clearTimeout(this.timeMachine)
|
||||
this.timeMachine = null
|
||||
},
|
||||
getFormData() {
|
||||
const ret = {}
|
||||
this.$refs.form.validate((valid) => {
|
||||
ret.valid = valid
|
||||
ret.form = this.form
|
||||
})
|
||||
return ret
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
handleMinChange() {
|
||||
this.$refs.form.validateField('max')
|
||||
},
|
||||
handleMaxChange() {
|
||||
this.$refs.form.validateField('min')
|
||||
},
|
||||
validateCom(rule, value, callback) {
|
||||
const one = Number(value)
|
||||
if (Number.isInteger(one)) {
|
||||
if (one < MIN_NUMBER) {
|
||||
return callback(new Error(this.$t('denumberrange.out_of_min')))
|
||||
} else if (one > MAX_NUMBER) {
|
||||
return callback(new Error(this.$t('denumberrange.out_of_max')))
|
||||
}
|
||||
return callback()
|
||||
}
|
||||
return callback(new Error(this.$t('denumberrange.must_int')))
|
||||
},
|
||||
validateMin(rule, value, callback) {
|
||||
const one = Number(value)
|
||||
const max = Number(this.form.max)
|
||||
if (!max || one < max) {
|
||||
return callback()
|
||||
}
|
||||
return callback(new Error(this.$t('denumberrange.min_out_max')))
|
||||
},
|
||||
validateMax(rule, value, callback) {
|
||||
const one = Number(value)
|
||||
const min = Number(this.form.min)
|
||||
if (!min || one > min) {
|
||||
return callback()
|
||||
}
|
||||
return callback(new Error(this.$t('denumberrange.max_out_min')))
|
||||
},
|
||||
|
||||
search() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
this.setCondition()
|
||||
})
|
||||
},
|
||||
setCondition() {
|
||||
const param = {
|
||||
component: this.element,
|
||||
// value: !this.values ? [] : Array.isArray(this.values) ? this.values : [this.values],
|
||||
value: [this.form.min, this.form.max],
|
||||
operator: this.operator
|
||||
}
|
||||
this.inDraw && this.$store.commit('addViewFilter', param)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.de-number-range-container {
|
||||
display: inline;
|
||||
>>>div.el-form-item {
|
||||
width: calc(50% - 5px) !important;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* fieldId 字段ID
|
||||
* value 字段值
|
||||
* operator 操作[eq, ne, gt, ge, lt, le, in, not in, like, not like]
|
||||
* operator 操作[eq, ne, gt, ge, lt, le, in, not in, like, not like, between]
|
||||
* viewIds 过滤视图范围
|
||||
*/
|
||||
export class Condition {
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-zuoce-qujian',
|
||||
label: '数值区间',
|
||||
defaultClass: 'text-filter'
|
||||
}
|
||||
|
||||
const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
placeholder: '请输入整数',
|
||||
viewIds: []
|
||||
},
|
||||
value: ''
|
||||
},
|
||||
defaultClass: 'text-filter',
|
||||
component: 'de-number-range'
|
||||
}
|
||||
const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 500,
|
||||
// height: 45.5,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
letterSpacing: 0,
|
||||
textAlign: '',
|
||||
color: ''
|
||||
},
|
||||
component: 'de-number-range'
|
||||
}
|
||||
|
||||
class NumberRangeServiceImpl extends WidgetService {
|
||||
constructor(options = {}) {
|
||||
Object.assign(options, { name: 'numberRangeWidget' })
|
||||
super(options)
|
||||
this.filterDialog = true
|
||||
this.showSwitch = false
|
||||
}
|
||||
|
||||
initLeftPanel() {
|
||||
const value = JSON.parse(JSON.stringify(leftPanel))
|
||||
return value
|
||||
}
|
||||
|
||||
initFilterDialog() {
|
||||
const value = JSON.parse(JSON.stringify(dialogPanel))
|
||||
return value
|
||||
}
|
||||
|
||||
initDrawPanel() {
|
||||
const value = JSON.parse(JSON.stringify(drawPanel))
|
||||
return value
|
||||
}
|
||||
|
||||
filterFieldMethod(fields) {
|
||||
return fields.filter(field => {
|
||||
return field['deType'] === 2
|
||||
})
|
||||
}
|
||||
}
|
||||
const numberRangeServiceImpl = new NumberRangeServiceImpl()
|
||||
export default numberRangeServiceImpl
|
||||
1
frontend/src/icons/svg/map.svg
Normal file
1
frontend/src/icons/svg/map.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1626859344070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="819" width="200" height="200"><path d="M948.3 170.5c-7.2-6.1-17.4-8.7-26.6-7.2l-237.1 42-60.4-20c-17.4-5.6-35.8 3.6-41.5 20.5-5.6 16.9 3.6 35.8 20.5 41.5l68.6 22.5c1.5 0.5 3.1 1 4.6 1v265.7L541.2 495c-11.8-3.6-23.6 3.1-27.1 14.3s3.1 23.6 14.3 27.1l148 45.6v273.9L392.8 776V652.8c0-12.3-9.7-22-22-22s-22 9.7-22 22v123.9L130.7 811V195.1c0-17.9-14.8-32.8-32.8-32.8s-32.8 14.8-32.8 32.8v654.3c0 9.7 4.1 18.4 11.3 25.1 7.2 6.1 16.9 9.2 26.1 7.7l270.8-42.5 304.1 85.5c3.1 1 5.6 1 8.7 1 2 0 4.1 0 5.6-0.5l240.1-43.5c15.4-3.1 26.6-16.4 26.6-32.3V195.6c1.7-9.7-2.9-19-10.1-25.1z" p-id="820"></path><path d="M376.4 97.8c-102.4 0-185.3 82.9-185.3 185.3 0 28.2 6.7 55.8 20.5 82.9 10.8 21 109.1 159.7 138.8 201.7 6.1 8.7 15.9 13.8 26.6 13.8 10.8 0 20.5-5.1 26.6-13.8 29.7-42.5 127.5-181.8 137.7-201.2 13.3-25.6 20.5-54.8 20.5-83.5 0-102.3-83-185.2-185.4-185.2z m0.5 240.1c-30.2 0-54.8-24.6-54.8-54.8s24.1-54.8 54.8-54.8c30.2 0 54.8 24.6 54.8 54.8s-24.6 54.8-54.8 54.8z" p-id="821"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
frontend/src/icons/svg/sort-asc.svg
Normal file
1
frontend/src/icons/svg/sort-asc.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1626861945234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5279" width="200" height="200"><path d="M0 0h307.2v122.88H0V0z m0 460.8h614.4v122.88H0V460.8z m0 440.32h1024V1024H0v-122.88z" p-id="5280"></path></svg>
|
||||
|
After Width: | Height: | Size: 267 B |
1
frontend/src/icons/svg/sort-desc.svg
Normal file
1
frontend/src/icons/svg/sort-desc.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1626861978178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4648" width="200" height="200"><path d="M0 0h1024v122.88H0V0z m0 460.8h614.4v122.88H0V460.8z m0 440.32h307.2V1024H0v-122.88z" p-id="4649"></path></svg>
|
||||
|
After Width: | Height: | Size: 267 B |
@ -750,6 +750,7 @@ export default {
|
||||
chart_funnel: 'Funnel',
|
||||
chart_radar: 'Radar',
|
||||
chart_gauge: 'Gauge',
|
||||
chart_map: 'Map',
|
||||
dateStyle: 'Date Style',
|
||||
datePattern: 'Date Format',
|
||||
y: 'Year',
|
||||
@ -817,7 +818,11 @@ export default {
|
||||
drag_block_funnel_width: 'Funnel Width',
|
||||
drag_block_funnel_split: 'Funnel Split',
|
||||
drag_block_radar_length: 'Branch Length',
|
||||
drag_block_radar_label: 'Branch Label'
|
||||
drag_block_radar_label: 'Branch Label',
|
||||
stack_item: 'Stack Item',
|
||||
map_range: 'Map range',
|
||||
select_map_range: 'Please select map range',
|
||||
area: 'Area'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
@ -1282,5 +1287,14 @@ export default {
|
||||
i18n_msg_type_dataset_sync_faild: 'Dataset synchronization failed',
|
||||
i18n_msg_type_all: 'All type',
|
||||
channel_inner_msg: 'On site news'
|
||||
},
|
||||
denumberrange: {
|
||||
please_key_min: 'Please key min value',
|
||||
please_key_max: 'Please key max value',
|
||||
out_of_min: 'The min value cannot be less than the min integer -2³²',
|
||||
out_of_max: 'The max value cannot be more than the max integer 2³²-1',
|
||||
must_int: 'Please key interger',
|
||||
min_out_max: 'The min value must be less than the max value',
|
||||
max_out_min: 'The max value must be more than the min value'
|
||||
}
|
||||
}
|
||||
|
||||
@ -750,6 +750,7 @@ export default {
|
||||
chart_funnel: '漏鬥圖',
|
||||
chart_radar: '雷達圖',
|
||||
chart_gauge: '儀表盤',
|
||||
chart_map: '地圖',
|
||||
dateStyle: '日期顯示',
|
||||
datePattern: '日期格式',
|
||||
y: '年',
|
||||
@ -817,7 +818,11 @@ export default {
|
||||
drag_block_funnel_width: '漏鬥層寬',
|
||||
drag_block_funnel_split: '漏鬥分層',
|
||||
drag_block_radar_length: '分支長度',
|
||||
drag_block_radar_label: '分支標簽'
|
||||
drag_block_radar_label: '分支標簽',
|
||||
map_range: '地圖範圍',
|
||||
select_map_range: '請選擇地圖範圍',
|
||||
area: '地區',
|
||||
stack_item: '堆疊項'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個sheet頁面，默認抽取第一個',
|
||||
@ -1121,7 +1126,7 @@ export default {
|
||||
lineHeight: '行高',
|
||||
letterSpacing: '字間距',
|
||||
textAlign: '左右對齊',
|
||||
opacity: '透明度',
|
||||
opacity: '不透明度',
|
||||
verticalAlign: '上下對齊',
|
||||
text_align_left: '左對齊',
|
||||
text_align_center: '左右居中',
|
||||
@ -1282,5 +1287,14 @@ export default {
|
||||
i18n_msg_type_dataset_sync_faild: '數據集同步失敗',
|
||||
i18n_msg_type_all: '全部類型',
|
||||
channel_inner_msg: '站內消息'
|
||||
},
|
||||
denumberrange: {
|
||||
please_key_min: '請輸入最小值',
|
||||
please_key_max: '請輸入最大值',
|
||||
out_of_min: '最小值不能小于最小整數-2³²',
|
||||
out_of_max: '最大值不能大于最大整數2³²-1',
|
||||
must_int: '請輸入整數',
|
||||
min_out_max: '最小值必須小于最大值',
|
||||
max_out_min: '最大值必須大于最小值'
|
||||
}
|
||||
}
|
||||
|
||||
@ -750,6 +750,7 @@ export default {
|
||||
chart_funnel: '漏斗图',
|
||||
chart_radar: '雷达图',
|
||||
chart_gauge: '仪表盘',
|
||||
chart_map: '地图',
|
||||
dateStyle: '日期显示',
|
||||
datePattern: '日期格式',
|
||||
y: '年',
|
||||
@ -817,7 +818,11 @@ export default {
|
||||
drag_block_funnel_width: '漏斗层宽',
|
||||
drag_block_funnel_split: '漏斗分层',
|
||||
drag_block_radar_length: '分支长度',
|
||||
drag_block_radar_label: '分支标签'
|
||||
drag_block_radar_label: '分支标签',
|
||||
map_range: '地图范围',
|
||||
select_map_range: '请选择地图范围',
|
||||
area: '地区',
|
||||
stack_item: '堆叠项'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
@ -1122,7 +1127,7 @@ export default {
|
||||
lineHeight: '行高',
|
||||
letterSpacing: '字间距',
|
||||
textAlign: '左右对齐',
|
||||
opacity: '透明度',
|
||||
opacity: '不透明度',
|
||||
verticalAlign: '上下对齐',
|
||||
text_align_left: '左对齐',
|
||||
text_align_center: '左右居中',
|
||||
@ -1284,5 +1289,14 @@ export default {
|
||||
i18n_msg_type_dataset_sync_faild: '数据集同步失败',
|
||||
i18n_msg_type_all: '全部类型',
|
||||
channel_inner_msg: '站内消息'
|
||||
},
|
||||
denumberrange: {
|
||||
please_key_min: '请输入最小值',
|
||||
please_key_max: '请输入最大值',
|
||||
out_of_min: '最小值不能小于最小整数-2³²',
|
||||
out_of_max: '最大值不能大于最大整数2³²-1',
|
||||
must_int: '请输入整数',
|
||||
min_out_max: '最小值必须小于最大值',
|
||||
max_out_min: '最大值必须大于最小值'
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,6 +54,18 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">透明</div>
|
||||
<div class="code-name">&#xe642;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">弧度</div>
|
||||
<div class="code-name">&#xe61a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">放大</div>
|
||||
@ -282,9 +294,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1626147352097') format('woff2'),
|
||||
url('iconfont.woff?t=1626147352097') format('woff'),
|
||||
url('iconfont.ttf?t=1626147352097') format('truetype');
|
||||
src: url('iconfont.woff2?t=1626919869905') format('woff2'),
|
||||
url('iconfont.woff?t=1626919869905') format('woff'),
|
||||
url('iconfont.ttf?t=1626919869905') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -310,6 +322,24 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-touming"></span>
|
||||
<div class="name">
|
||||
透明
|
||||
</div>
|
||||
<div class="code-name">.icon-touming
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-fangxing-"></span>
|
||||
<div class="name">
|
||||
弧度
|
||||
</div>
|
||||
<div class="code-name">.icon-fangxing-
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-fangda"></span>
|
||||
<div class="name">
|
||||
@ -652,6 +682,22 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-touming"></use>
|
||||
</svg>
|
||||
<div class="name">透明</div>
|
||||
<div class="code-name">#icon-touming</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-fangxing-"></use>
|
||||
</svg>
|
||||
<div class="name">弧度</div>
|
||||
<div class="code-name">#icon-fangxing-</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-fangda"></use>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2459092 */
|
||||
src: url('iconfont.woff2?t=1626147352097') format('woff2'),
|
||||
url('iconfont.woff?t=1626147352097') format('woff'),
|
||||
url('iconfont.ttf?t=1626147352097') format('truetype');
|
||||
src: url('iconfont.woff2?t=1626919869905') format('woff2'),
|
||||
url('iconfont.woff?t=1626919869905') format('woff'),
|
||||
url('iconfont.ttf?t=1626919869905') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-touming:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-fangxing-:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-fangda:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "4454064",
|
||||
"name": "透明",
|
||||
"font_class": "touming",
|
||||
"unicode": "e642",
|
||||
"unicode_decimal": 58946
|
||||
},
|
||||
{
|
||||
"icon_id": "7311866",
|
||||
"name": "弧度",
|
||||
"font_class": "fangxing-",
|
||||
"unicode": "e61a",
|
||||
"unicode_decimal": 58906
|
||||
},
|
||||
{
|
||||
"icon_id": "20921234",
|
||||
"name": "放大",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -211,17 +211,19 @@ div:focus {
|
||||
}
|
||||
.custom-component-class {
|
||||
width: 100%;
|
||||
|
||||
div:not(.de-number-range-container ) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
div.el-input-group__append {
|
||||
width: 10% !important;
|
||||
}
|
||||
div {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
%field-icon{
|
||||
font-size: 13px;
|
||||
margin: 0 3px 0 0;
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
.field-icon-text{
|
||||
@extend %field-icon;
|
||||
@ -239,6 +241,12 @@ div:focus {
|
||||
@extend %field-icon;
|
||||
color: #F56C6C;
|
||||
}
|
||||
.field-icon-sort{
|
||||
font-size: 10px;
|
||||
@extend %field-icon;
|
||||
color: #999999;
|
||||
margin: 0 2px 1px 0;
|
||||
}
|
||||
.ds-icon-scene{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
|
||||
@ -528,3 +528,37 @@ export const BASE_CHART = {
|
||||
},
|
||||
customFilter: []
|
||||
}
|
||||
|
||||
export const BASE_MAP = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {},
|
||||
visualMap: {
|
||||
min: 50,
|
||||
max: 52,
|
||||
text: ['High', 'Low'],
|
||||
realtime: false,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['lightskyblue', 'yellow', 'orangered']
|
||||
}
|
||||
},
|
||||
// legend: {},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'map',
|
||||
map: 'HK',
|
||||
roam: true,
|
||||
// label: {
|
||||
// show: true
|
||||
// },
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ export function componentStyle(chart_option, chart) {
|
||||
customStyle.text.isBolder ? style.fontWeight = 'bold' : style.fontWeight = 'normal'
|
||||
chart_option.title.textStyle = style
|
||||
}
|
||||
if (customStyle.legend) {
|
||||
if (customStyle.legend && chart_option.legend) {
|
||||
chart_option.legend.show = customStyle.legend.show
|
||||
// 水平方向
|
||||
if (customStyle.legend.hPosition === 'left') {
|
||||
|
||||
59
frontend/src/views/chart/chart/map/map.js
Normal file
59
frontend/src/views/chart/chart/map/map.js
Normal file
@ -0,0 +1,59 @@
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { componentStyle } from '../common/common'
|
||||
|
||||
export function baseMapOption(chart_option, chart) {
|
||||
// 处理shape attr
|
||||
let customAttr = {}
|
||||
if (chart.customAttr) {
|
||||
customAttr = JSON.parse(chart.customAttr)
|
||||
if (customAttr.color) {
|
||||
chart_option.color = customAttr.color.colors
|
||||
}
|
||||
// tooltip
|
||||
if (customAttr.tooltip) {
|
||||
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
|
||||
const reg = new RegExp('\n', 'g')
|
||||
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
|
||||
chart_option.tooltip = tooltip
|
||||
}
|
||||
}
|
||||
// 处理data
|
||||
if (chart.data) {
|
||||
chart_option.title.text = chart.title
|
||||
if (chart.data.series.length > 0) {
|
||||
chart_option.series[0].name = chart.data.series[0].name
|
||||
// size
|
||||
if (customAttr.size) {
|
||||
chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
|
||||
}
|
||||
// label
|
||||
if (customAttr.label) {
|
||||
chart_option.series[0].label = customAttr.label
|
||||
chart_option.series[0].labelLine = customAttr.label.labelLine
|
||||
}
|
||||
// visualMap
|
||||
const valueArr = chart.data.series[0].data
|
||||
chart_option.visualMap.min = Math.min(...valueArr)
|
||||
chart_option.visualMap.max = Math.max(...valueArr)
|
||||
if (customAttr.color && customAttr.color.colors) {
|
||||
chart_option.visualMap.inRange.color = customAttr.color.colors
|
||||
}
|
||||
for (let i = 0; i < valueArr.length; i++) {
|
||||
const y = {
|
||||
name: chart.data.x[i],
|
||||
value: valueArr[i]
|
||||
}
|
||||
// color
|
||||
y.itemStyle = {
|
||||
color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha),
|
||||
borderRadius: 0
|
||||
}
|
||||
chart_option.series[0].data.push(y)
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log(chart_option);
|
||||
componentStyle(chart_option, chart)
|
||||
return chart_option
|
||||
}
|
||||
|
||||
@ -5,15 +5,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE } from '../chart/chart'
|
||||
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE, BASE_MAP } from '../chart/chart'
|
||||
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
|
||||
import { baseLineOption, stackLineOption } from '../chart/line/line'
|
||||
import { basePieOption, rosePieOption } from '../chart/pie/pie'
|
||||
import { baseMapOption } from '../chart/map/map'
|
||||
import { baseFunnelOption } from '../chart/funnel/funnel'
|
||||
import { baseRadarOption } from '../chart/radar/radar'
|
||||
import { baseGaugeOption } from '../chart/gauge/gauge'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
// import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import { geoJson } from '@/api/map/map'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponent',
|
||||
@ -93,6 +95,29 @@ export default {
|
||||
} else if (chart.type === 'gauge') {
|
||||
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
|
||||
}
|
||||
|
||||
if (chart.type === 'map') {
|
||||
const customAttr = JSON.parse(chart.customAttr)
|
||||
if (!customAttr.areaCode) return
|
||||
|
||||
let areaJson
|
||||
if ((areaJson = localStorage.getItem('areaJson' + customAttr.areaCode)) !== null) {
|
||||
this.initMapChart(areaJson, chart)
|
||||
return
|
||||
}
|
||||
geoJson(customAttr.areaCode).then(res => {
|
||||
this.initMapChart(res.data, chart)
|
||||
// localStorage最大容量只有5M，先取消缓存
|
||||
// localStorage.setItem('areaJson' + customAttr.areaCode, res.data)
|
||||
})
|
||||
return
|
||||
}
|
||||
this.myEcharts(chart_option)
|
||||
},
|
||||
initMapChart(geoJson, chart) {
|
||||
this.$echarts.registerMap('HK', geoJson)
|
||||
const base_json = JSON.parse(JSON.stringify(BASE_MAP))
|
||||
const chart_option = baseMapOption(base_json, chart)
|
||||
this.myEcharts(chart_option)
|
||||
},
|
||||
myEcharts(option) {
|
||||
|
||||
156
frontend/src/views/chart/components/drag-item/ChartDragItem.vue
Normal file
156
frontend/src/views/chart/components/drag-item/ChartDragItem.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
||||
</el-tag>
|
||||
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
<el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
||||
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
|
||||
</el-tag>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>
|
||||
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
|
||||
<span class="el-dropdown-link inner-dropdown-menu">
|
||||
<span>
|
||||
<i class="el-icon-sort" />
|
||||
<span>{{ $t('chart.sort') }}</span>
|
||||
<span class="summary-span">({{ $t('chart.'+item.sort) }})</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
|
||||
<span>{{ $t('chart.delete') }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</span>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartDragItem',
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
clickItem(param) {
|
||||
if (!param) {
|
||||
return
|
||||
}
|
||||
switch (param.type) {
|
||||
case 'remove':
|
||||
this.removeItem()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
beforeClickItem(type) {
|
||||
return {
|
||||
type: type
|
||||
}
|
||||
},
|
||||
sort(param) {
|
||||
// console.log(param)
|
||||
this.item.sort = param.type
|
||||
this.$emit('onItemChange', this.item)
|
||||
},
|
||||
beforeSort(type) {
|
||||
return {
|
||||
type: type
|
||||
}
|
||||
},
|
||||
removeItem() {
|
||||
this.item.index = this.index
|
||||
this.$emit('onItemRemove', this.item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-axis {
|
||||
padding: 1px 6px;
|
||||
margin: 0 3px 2px 3px;
|
||||
text-align: left;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
width: 159px;
|
||||
}
|
||||
|
||||
.item-axis:hover {
|
||||
background-color: #fdfdfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.summary-span{
|
||||
margin-left: 4px;
|
||||
color: #878d9f;;
|
||||
}
|
||||
|
||||
.inner-dropdown-menu{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.item-span-style{
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,26 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
|
||||
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
||||
</el-tag>
|
||||
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
<el-tag size="small" class="item-axis">
|
||||
<el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
||||
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
|
||||
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
@ -11,7 +11,7 @@
|
||||
</el-tag>
|
||||
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
<el-tag size="small" class="item-axis">
|
||||
<el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
|
||||
@ -1,23 +1,27 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
|
||||
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
||||
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
|
||||
</el-tag>
|
||||
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
<el-tag size="small" class="item-axis">
|
||||
<el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
|
||||
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
|
||||
</span>
|
||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
||||
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
|
||||
@ -30,7 +34,7 @@
|
||||
<span>
|
||||
<i class="el-icon-notebook-2" />
|
||||
<span>{{ $t('chart.summary') }}</span>
|
||||
<span class="summary-span">({{ $t('chart.'+item.summary) }})</span>
|
||||
<span class="summary-span-item">({{ $t('chart.'+item.summary) }})</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
@ -52,7 +56,7 @@
|
||||
<!-- <span>-->
|
||||
<!-- <i class="el-icon-s-grid" />-->
|
||||
<!-- <span>{{ $t('chart.quick_calc') }}</span>-->
|
||||
<!-- <span class="summary-span">(无)</span>-->
|
||||
<!-- <span class="summary-span-item">(无)</span>-->
|
||||
<!-- </span>-->
|
||||
<!-- <i class="el-icon-arrow-right el-icon--right" />-->
|
||||
<!-- </span>-->
|
||||
@ -67,7 +71,7 @@
|
||||
<span>
|
||||
<i class="el-icon-sort" />
|
||||
<span>{{ $t('chart.sort') }}</span>
|
||||
<span class="summary-span">({{ $t('chart.'+item.sort) }})</span>
|
||||
<span class="summary-span-item">({{ $t('chart.'+item.sort) }})</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
@ -212,9 +216,16 @@ export default {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.summary-span-item{
|
||||
margin-left: 4px;
|
||||
color: #878d9f;
|
||||
}
|
||||
|
||||
.summary-span{
|
||||
margin-left: 4px;
|
||||
color: #878d9f;;
|
||||
color: #878d9f;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.inner-dropdown-menu{
|
||||
@ -226,7 +237,7 @@ export default {
|
||||
|
||||
.item-span-style{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
width: 70px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@ -741,6 +741,9 @@ export default {
|
||||
background: DEFAULT_BACKGROUND_COLOR,
|
||||
split: DEFAULT_SPLIT
|
||||
})
|
||||
view.xaxis = JSON.stringify([])
|
||||
view.yaxis = JSON.stringify([])
|
||||
view.extStack = JSON.stringify([])
|
||||
view.customFilter = JSON.stringify([])
|
||||
post('/chart/view/save', view).then(response => {
|
||||
this.closeCreateChart()
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
@add="moveToDimension"
|
||||
>
|
||||
<transition-group>
|
||||
<span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
|
||||
<span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
@ -77,7 +77,7 @@
|
||||
@add="moveToQuota"
|
||||
>
|
||||
<transition-group>
|
||||
<span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
|
||||
<span v-for="item in quotaData" :key="item.id" class="item-quota" :title="item.name">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
@ -190,6 +190,11 @@
|
||||
<svg-icon icon-class="gauge" class="chart-icon" />
|
||||
</span>
|
||||
</el-radio>
|
||||
<el-radio value="map" label="map">
|
||||
<span :title="$t('chart.chart_map')">
|
||||
<svg-icon icon-class="map" class="chart-icon" />
|
||||
</span>
|
||||
</el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
</div>
|
||||
@ -212,13 +217,30 @@
|
||||
</div>
|
||||
<div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
|
||||
<el-row style="height: 100%;">
|
||||
<el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
|
||||
<el-row v-if="view.type ==='map'" class="padding-lr">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
|
||||
<span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_type_axis') }}</span>
|
||||
<span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
|
||||
<span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
|
||||
<span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
|
||||
<span>{{ $t('chart.map_range') }}</span>
|
||||
</span>
|
||||
<span class="tree-select-span">
|
||||
<treeselect
|
||||
ref="mapSelector"
|
||||
v-model="view.customAttr.areaCode"
|
||||
:options="places"
|
||||
:placeholder="$t('chart.select_map_range')"
|
||||
:normalizer="normalizer"
|
||||
@input="save"
|
||||
@deselect="save"
|
||||
/>
|
||||
</span>
|
||||
</el-row>
|
||||
<el-row v-if="view.type !=='text' && view.type !== 'gauge'" class="padding-lr">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
|
||||
<span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line'))">{{ $t('chart.drag_block_type_axis') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('map')">{{ $t('chart.area') }}</span>
|
||||
/
|
||||
<span>{{ $t('chart.dimension') }}</span>
|
||||
</span>
|
||||
@ -228,7 +250,7 @@
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
class="drag-block-style"
|
||||
@add="addXaxis"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
@ -238,13 +260,14 @@
|
||||
</el-row>
|
||||
<el-row class="padding-lr" style="margin-top: 6px;">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
|
||||
<span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_value_axis') }}</span>
|
||||
<span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
|
||||
<span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
|
||||
<span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
|
||||
<span v-else-if="chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
|
||||
<span v-else-if="chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
|
||||
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
|
||||
<span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line'))">{{ $t('chart.drag_block_value_axis') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('map')">{{ $t('chart.chart_data') }}</span>
|
||||
/
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
</span>
|
||||
@ -254,7 +277,7 @@
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
class="drag-block-style"
|
||||
@add="addYaxis"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
@ -262,6 +285,26 @@
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</el-row>
|
||||
<el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('chart.stack_item') }}</span>
|
||||
/
|
||||
<span>{{ $t('chart.dimension') }}</span>
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.extStack"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-block-style"
|
||||
@add="addStack"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<chart-drag-item v-for="(item,index) in view.extStack" :key="item.id" :param="param" :index="index" :item="item" @onItemChange="stackItemChange" @onItemRemove="stackItemRemove" />
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</el-row>
|
||||
<div class="padding-lr filter-class" style="margin-top: 6px;">
|
||||
<span>{{ $t('chart.result_filter') }}</span>
|
||||
<!-- <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
|
||||
@ -301,7 +344,7 @@
|
||||
<span>{{ $t('chart.shape_attr') }}</span>
|
||||
<el-row>
|
||||
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
|
||||
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
|
||||
<size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
|
||||
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
|
||||
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
|
||||
</el-row>
|
||||
@ -309,11 +352,11 @@
|
||||
<el-row class="padding-lr">
|
||||
<span>{{ $t('chart.module_style') }}</span>
|
||||
<el-row>
|
||||
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
|
||||
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
|
||||
<split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
|
||||
<x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
|
||||
<y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
|
||||
<split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
|
||||
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
|
||||
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
|
||||
<legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
|
||||
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
|
||||
</el-row>
|
||||
</el-row>
|
||||
@ -434,6 +477,7 @@ import draggable from 'vuedraggable'
|
||||
import DimensionItem from '../components/drag-item/DimensionItem'
|
||||
import QuotaItem from '../components/drag-item/QuotaItem'
|
||||
import FilterItem from '../components/drag-item/FilterItem'
|
||||
import ChartDragItem from '../components/drag-item/ChartDragItem'
|
||||
import ResultFilterEditor from '../components/filter/ResultFilterEditor'
|
||||
import ChartComponent from '../components/ChartComponent'
|
||||
import bus from '@/utils/bus'
|
||||
@ -465,10 +509,10 @@ import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
|
||||
import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
|
||||
import TableNormal from '../components/table/TableNormal'
|
||||
import LabelNormal from '../components/normal/LabelNormal'
|
||||
import html2canvas from 'html2canvasde'
|
||||
// import html2canvas from 'html2canvasde'
|
||||
import TableSelector from './TableSelector'
|
||||
import FieldEdit from '../../dataset/data/FieldEdit'
|
||||
|
||||
import { areaMapping } from '@/api/map/map'
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: {
|
||||
@ -494,7 +538,8 @@ export default {
|
||||
ChartComponent,
|
||||
QuotaItem,
|
||||
DimensionItem,
|
||||
draggable
|
||||
draggable,
|
||||
ChartDragItem
|
||||
},
|
||||
props: {
|
||||
param: {
|
||||
@ -513,6 +558,7 @@ export default {
|
||||
view: {
|
||||
xaxis: [],
|
||||
yaxis: [],
|
||||
extStack: [],
|
||||
show: true,
|
||||
type: 'bar',
|
||||
title: '',
|
||||
@ -563,7 +609,8 @@ export default {
|
||||
searchField: '',
|
||||
editDsField: false,
|
||||
changeDsTitle: '',
|
||||
filterItem: {}
|
||||
filterItem: {},
|
||||
places: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -587,6 +634,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
this.initAreas()
|
||||
},
|
||||
mounted() {
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
@ -667,6 +715,11 @@ export default {
|
||||
ele.filter = []
|
||||
}
|
||||
})
|
||||
view.extStack.forEach(function(ele) {
|
||||
if (!ele.sort || ele.sort === '') {
|
||||
ele.sort = 'none'
|
||||
}
|
||||
})
|
||||
if (view.type.startsWith('pie') || view.type.startsWith('funnel') || view.type.startsWith('text') || view.type.startsWith('gauge')) {
|
||||
if (view.yaxis.length > 1) {
|
||||
view.yaxis.splice(1, view.yaxis.length)
|
||||
@ -688,6 +741,7 @@ export default {
|
||||
view.customAttr = JSON.stringify(view.customAttr)
|
||||
view.customStyle = JSON.stringify(view.customStyle)
|
||||
view.customFilter = JSON.stringify(view.customFilter)
|
||||
view.extStack = JSON.stringify(view.extStack)
|
||||
post('/chart/view/save', view).then(response => {
|
||||
// this.get(response.data.id);
|
||||
// this.getData(response.data.id)
|
||||
@ -707,67 +761,67 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
saveSnapshot() {
|
||||
if (this.view.title && this.view.title.length > 50) {
|
||||
this.$warning(this.$t('chart.title_limit'))
|
||||
return
|
||||
}
|
||||
if (this.loading) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
html2canvas(this.$refs.imageWrapper).then(canvas => {
|
||||
const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
|
||||
if (snapshot !== '') {
|
||||
const view = JSON.parse(JSON.stringify(this.view))
|
||||
view.id = this.view.id
|
||||
view.sceneId = this.view.sceneId
|
||||
view.name = this.view.name ? this.view.name : this.table.name
|
||||
view.tableId = this.view.tableId
|
||||
view.xaxis.forEach(function(ele) {
|
||||
// if (!ele.summary || ele.summary === '') {
|
||||
// ele.summary = 'sum'
|
||||
// }
|
||||
if (!ele.sort || ele.sort === '') {
|
||||
ele.sort = 'none'
|
||||
}
|
||||
if (!ele.filter) {
|
||||
ele.filter = []
|
||||
}
|
||||
})
|
||||
view.yaxis.forEach(function(ele) {
|
||||
if (!ele.summary || ele.summary === '') {
|
||||
if (ele.id === 'count') {
|
||||
ele.summary = 'count'
|
||||
} else {
|
||||
ele.summary = 'sum'
|
||||
}
|
||||
}
|
||||
if (!ele.sort || ele.sort === '') {
|
||||
ele.sort = 'none'
|
||||
}
|
||||
if (!ele.filter) {
|
||||
ele.filter = []
|
||||
}
|
||||
})
|
||||
if (view.type.startsWith('pie') || view.type.startsWith('funnel') || view.type.startsWith('gauge')) {
|
||||
if (view.yaxis.length > 1) {
|
||||
view.yaxis.splice(1, view.yaxis.length)
|
||||
}
|
||||
}
|
||||
view.xaxis = JSON.stringify(view.xaxis)
|
||||
view.yaxis = JSON.stringify(view.yaxis)
|
||||
view.customAttr = JSON.stringify(view.customAttr)
|
||||
view.customStyle = JSON.stringify(view.customStyle)
|
||||
view.customFilter = JSON.stringify(view.customFilter)
|
||||
view.snapshot = snapshot
|
||||
post('/chart/view/save', view).then(response => {
|
||||
this.loading = false
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// saveSnapshot() {
|
||||
// if (this.view.title && this.view.title.length > 50) {
|
||||
// this.$warning(this.$t('chart.title_limit'))
|
||||
// return
|
||||
// }
|
||||
// if (this.loading) {
|
||||
// return
|
||||
// }
|
||||
// this.loading = true
|
||||
// html2canvas(this.$refs.imageWrapper).then(canvas => {
|
||||
// const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
|
||||
// if (snapshot !== '') {
|
||||
// const view = JSON.parse(JSON.stringify(this.view))
|
||||
// view.id = this.view.id
|
||||
// view.sceneId = this.view.sceneId
|
||||
// view.name = this.view.name ? this.view.name : this.table.name
|
||||
// view.tableId = this.view.tableId
|
||||
// view.xaxis.forEach(function(ele) {
|
||||
// // if (!ele.summary || ele.summary === '') {
|
||||
// // ele.summary = 'sum'
|
||||
// // }
|
||||
// if (!ele.sort || ele.sort === '') {
|
||||
// ele.sort = 'none'
|
||||
// }
|
||||
// if (!ele.filter) {
|
||||
// ele.filter = []
|
||||
// }
|
||||
// })
|
||||
// view.yaxis.forEach(function(ele) {
|
||||
// if (!ele.summary || ele.summary === '') {
|
||||
// if (ele.id === 'count') {
|
||||
// ele.summary = 'count'
|
||||
// } else {
|
||||
// ele.summary = 'sum'
|
||||
// }
|
||||
// }
|
||||
// if (!ele.sort || ele.sort === '') {
|
||||
// ele.sort = 'none'
|
||||
// }
|
||||
// if (!ele.filter) {
|
||||
// ele.filter = []
|
||||
// }
|
||||
// })
|
||||
// if (view.type.startsWith('pie') || view.type.startsWith('funnel') || view.type.startsWith('gauge')) {
|
||||
// if (view.yaxis.length > 1) {
|
||||
// view.yaxis.splice(1, view.yaxis.length)
|
||||
// }
|
||||
// }
|
||||
// view.xaxis = JSON.stringify(view.xaxis)
|
||||
// view.yaxis = JSON.stringify(view.yaxis)
|
||||
// view.customAttr = JSON.stringify(view.customAttr)
|
||||
// view.customStyle = JSON.stringify(view.customStyle)
|
||||
// view.customFilter = JSON.stringify(view.customFilter)
|
||||
// view.snapshot = snapshot
|
||||
// post('/chart/view/save', view).then(response => {
|
||||
// this.loading = false
|
||||
// this.$success(this.$t('commons.save_success'))
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
closeEdit() {
|
||||
if (this.view.title && this.view.title.length > 50) {
|
||||
this.$warning(this.$t('chart.title_limit'))
|
||||
@ -787,6 +841,7 @@ export default {
|
||||
this.view = JSON.parse(JSON.stringify(response.data))
|
||||
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
|
||||
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
|
||||
this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
|
||||
this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
|
||||
this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
|
||||
this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
|
||||
@ -815,6 +870,7 @@ export default {
|
||||
this.view = JSON.parse(JSON.stringify(response.data))
|
||||
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
|
||||
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
|
||||
this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
|
||||
this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
|
||||
this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
|
||||
this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
|
||||
@ -1201,12 +1257,53 @@ export default {
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
this.save(true)
|
||||
},
|
||||
|
||||
initAreas() {
|
||||
let mapping
|
||||
if ((mapping = localStorage.getItem('areaMapping')) !== null) {
|
||||
this.places = JSON.parse(mapping)
|
||||
return
|
||||
}
|
||||
Object.keys(this.places).length === 0 && areaMapping().then(res => {
|
||||
this.places = res.data
|
||||
localStorage.setItem('areaMapping', JSON.stringify(res.data))
|
||||
})
|
||||
},
|
||||
|
||||
normalizer(node) {
|
||||
const resultNode = {
|
||||
id: node.code,
|
||||
label: node.name
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
resultNode.children = node.children
|
||||
}
|
||||
|
||||
if (resultNode.children && (!node.children || node.children.length === 0)) {
|
||||
delete resultNode.children
|
||||
}
|
||||
return resultNode
|
||||
},
|
||||
addStack(e) {
|
||||
this.dragCheckType(this.dimensionData, 'd')
|
||||
if (this.view.extStack && this.view.extStack.length > 1) {
|
||||
this.view.extStack = [this.view.extStack[0]]
|
||||
}
|
||||
this.save(true)
|
||||
},
|
||||
stackItemChange(item) {
|
||||
this.save(true)
|
||||
},
|
||||
stackItemRemove(item) {
|
||||
this.view.extStack.splice(item.index, 1)
|
||||
this.save(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang='scss' scoped>
|
||||
.padding-lr {
|
||||
padding: 0 6px;
|
||||
}
|
||||
@ -1240,7 +1337,7 @@ export default {
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
.item-dimension {
|
||||
padding: 2px 10px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
@ -1250,13 +1347,23 @@ export default {
|
||||
background-color: white;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-on-move {
|
||||
.item-dimension + .item-dimension {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.item-dimension:hover {
|
||||
color: #1890ff;
|
||||
background: #e8f4ff;
|
||||
border-color: #a3d3ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-quota {
|
||||
padding: 2px 10px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
@ -1264,20 +1371,21 @@ export default {
|
||||
color: #606266;
|
||||
/*background-color: rgba(35,46,64,.05);*/
|
||||
background-color: white;
|
||||
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
.item-quota + .item-quota {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
color: #1890ff;
|
||||
background: #e8f4ff;
|
||||
border-color: #a3d3ff;
|
||||
.item-quota:hover {
|
||||
color: #67c23a;
|
||||
background: #f0f9eb;
|
||||
border-color: #b2d3a3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1413,4 +1521,21 @@ export default {
|
||||
line-height: 40px;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.tree-select-span {
|
||||
>>>div.vue-treeselect__control {
|
||||
height: 32px !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
.drag-block-style{
|
||||
padding:2px 0 0 0;
|
||||
width:100%;
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DCDFE6;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -97,6 +97,7 @@
|
||||
<div
|
||||
id="canvasInfo"
|
||||
class="content this_canvas"
|
||||
:class="{'border-hidden':canvasStyleData.selfAdaption}"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@ -826,4 +827,9 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.border-hidden {
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -54,7 +54,8 @@ export default {
|
||||
'textInputWidget'
|
||||
],
|
||||
'数字过滤组件': [
|
||||
'numberSelectWidget'
|
||||
'numberSelectWidget',
|
||||
'numberRangeWidget'
|
||||
]
|
||||
// '按钮': [
|
||||
// 'buttonSureWidget'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user