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

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2021-10-20 17:44:27 +08:00
commit 9ce5192386
48 changed files with 456 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/io/dataease/base/domain/PanelLink.java
View File

@ -13,5 +13,7 @@ public class PanelLink implements Serializable {
private String pwd;
private Long overTime;
private static final long serialVersionUID = 1L;
}

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

@ -363,6 +363,66 @@ public class PanelLinkExample {
addCriterion("pwd not between", value1, value2, "pwd");
return (Criteria) this;
}
public Criteria andOverTimeIsNull() {
addCriterion("over_time is null");
return (Criteria) this;
}
public Criteria andOverTimeIsNotNull() {
addCriterion("over_time is not null");
return (Criteria) this;
}
public Criteria andOverTimeEqualTo(Long value) {
addCriterion("over_time =", value, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeNotEqualTo(Long value) {
addCriterion("over_time <>", value, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeGreaterThan(Long value) {
addCriterion("over_time >", value, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeGreaterThanOrEqualTo(Long value) {
addCriterion("over_time >=", value, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeLessThan(Long value) {
addCriterion("over_time <", value, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeLessThanOrEqualTo(Long value) {
addCriterion("over_time <=", value, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeIn(List<Long> values) {
addCriterion("over_time in", values, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeNotIn(List<Long> values) {
addCriterion("over_time not in", values, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeBetween(Long value1, Long value2) {
addCriterion("over_time between", value1, value2, "overTime");
return (Criteria) this;
}
public Criteria andOverTimeNotBetween(Long value1, Long value2) {
addCriterion("over_time not between", value1, value2, "overTime");
return (Criteria) this;
}
}
public static class Criteria extends GeneratedCriteria {

25
backend/src/main/java/io/dataease/base/mapper/PanelLinkMapper.xml
View File

@ -6,6 +6,7 @@
<result column="valid" jdbcType="BIT" property="valid" />
<result column="enable_pwd" jdbcType="BIT" property="enablePwd" />
<result column="pwd" jdbcType="VARCHAR" property="pwd" />
<result column="over_time" jdbcType="BIGINT" property="overTime" />
</resultMap>
<sql id="Example_Where_Clause">
<where>
@ -66,7 +67,7 @@
</where>
</sql>
<sql id="Base_Column_List">
resource_id, `valid`, enable_pwd, pwd
resource_id, `valid`, enable_pwd, pwd, over_time
</sql>
<select id="selectByExample" parameterType="io.dataease.base.domain.PanelLinkExample" resultMap="BaseResultMap">
select
@ -100,9 +101,9 @@
</delete>
<insert id="insert" parameterType="io.dataease.base.domain.PanelLink">
insert into panel_link (resource_id, `valid`, enable_pwd,
pwd)
pwd, over_time)
values (#{resourceId,jdbcType=VARCHAR}, #{valid,jdbcType=BIT}, #{enablePwd,jdbcType=BIT},
#{pwd,jdbcType=VARCHAR})
#{pwd,jdbcType=VARCHAR}, #{overTime,jdbcType=BIGINT})
</insert>
<insert id="insertSelective" parameterType="io.dataease.base.domain.PanelLink">
insert into panel_link
@ -119,6 +120,9 @@
<if test="pwd != null">
pwd,
</if>
<if test="overTime != null">
over_time,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="resourceId != null">
@ -133,6 +137,9 @@
<if test="pwd != null">
#{pwd,jdbcType=VARCHAR},
</if>
<if test="overTime != null">
#{overTime,jdbcType=BIGINT},
</if>
</trim>
</insert>
<select id="countByExample" parameterType="io.dataease.base.domain.PanelLinkExample" resultType="java.lang.Long">
@ -156,6 +163,9 @@
<if test="record.pwd != null">
pwd = #{record.pwd,jdbcType=VARCHAR},
</if>
<if test="record.overTime != null">
over_time = #{record.overTime,jdbcType=BIGINT},
</if>
</set>
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
@ -166,7 +176,8 @@
set resource_id = #{record.resourceId,jdbcType=VARCHAR},
`valid` = #{record.valid,jdbcType=BIT},
enable_pwd = #{record.enablePwd,jdbcType=BIT},
pwd = #{record.pwd,jdbcType=VARCHAR}
pwd = #{record.pwd,jdbcType=VARCHAR},
over_time = #{record.overTime,jdbcType=BIGINT}
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
</if>
@ -183,6 +194,9 @@
<if test="pwd != null">
pwd = #{pwd,jdbcType=VARCHAR},
</if>
<if test="overTime != null">
over_time = #{overTime,jdbcType=BIGINT},
</if>
</set>
where resource_id = #{resourceId,jdbcType=VARCHAR}
</update>
@ -190,7 +204,8 @@
update panel_link
set `valid` = #{valid,jdbcType=BIT},
enable_pwd = #{enablePwd,jdbcType=BIT},
pwd = #{pwd,jdbcType=VARCHAR}
pwd = #{pwd,jdbcType=VARCHAR},
over_time = #{overTime,jdbcType=BIGINT}
where resource_id = #{resourceId,jdbcType=VARCHAR}
</update>
</mapper>

11
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.java Normal file
View File

@ -0,0 +1,11 @@
package io.dataease.base.mapper.ext;
import org.apache.ibatis.annotations.Param;
import io.dataease.controller.request.panel.link.OverTimeRequest;
public interface ExtPanelLinkMapper {
void updateOverTime(@Param("request") OverTimeRequest request);
}

17
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.xml Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="io.dataease.base.mapper.ext.ExtPanelLinkMapper">
<update id="updateOverTime" >
update panel_link set over_time = #{request.overTime} where resource_id = #{request.resourceId}
</update>
</mapper>

5
backend/src/main/java/io/dataease/controller/panel/api/LinkApi.java
View File

@ -6,6 +6,7 @@ import io.dataease.controller.ResultHolder;
import io.dataease.controller.request.chart.ChartExtRequest;
import io.dataease.controller.request.panel.link.EnablePwdRequest;
import io.dataease.controller.request.panel.link.LinkRequest;
import io.dataease.controller.request.panel.link.OverTimeRequest;
import io.dataease.controller.request.panel.link.PasswordRequest;
import io.dataease.dto.panel.link.GenerateDto;
import io.dataease.dto.panel.link.ValidateDto;
@ -29,6 +30,10 @@ public interface LinkApi {
@PostMapping("/enablePwd")
void enablePwd(EnablePwdRequest request);
@ApiOperation("过期时间")
@PostMapping("/resetOverTime")
void resetOverTime(OverTimeRequest request);
@ApiOperation("启用/禁用链接分享")
@PostMapping("/switchLink")
void switchLink(LinkRequest request);

10
backend/src/main/java/io/dataease/controller/panel/server/LinkServer.java
View File

@ -8,6 +8,7 @@ import io.dataease.controller.panel.api.LinkApi;
import io.dataease.controller.request.chart.ChartExtRequest;
import io.dataease.controller.request.panel.link.EnablePwdRequest;
import io.dataease.controller.request.panel.link.LinkRequest;
import io.dataease.controller.request.panel.link.OverTimeRequest;
import io.dataease.controller.request.panel.link.PasswordRequest;
import io.dataease.controller.request.panel.link.ValidateRequest;
import io.dataease.dto.panel.link.GenerateDto;
@ -46,6 +47,14 @@ public class LinkServer implements LinkApi {
panelLinkService.changeEnablePwd(request);
}
@Override
public void resetOverTime(@RequestBody OverTimeRequest request) {
panelLinkService.overTime(request);
}
@Override
public void switchLink(@RequestBody LinkRequest request) {
panelLinkService.changeValid(request);
@ -74,6 +83,7 @@ public class LinkServer implements LinkApi {
dto.setValid(one.getValid());
dto.setEnablePwd(one.getEnablePwd());
dto.setPassPwd(panelLinkService.validateHeads(one));
dto.setExpire(panelLinkService.isExpire(one));
return dto;
}

19
backend/src/main/java/io/dataease/controller/request/panel/link/OverTimeRequest.java Normal file
View File

@ -0,0 +1,19 @@
package io.dataease.controller.request.panel.link;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.Getter;
import lombok.Setter;
@Data
@Getter
@Setter
public class OverTimeRequest {
@ApiModelProperty("资源ID")
private String resourceId;
@ApiModelProperty("过期时间")
private Long overTime;
}

2
backend/src/main/java/io/dataease/dto/panel/link/GenerateDto.java
View File

@ -14,4 +14,6 @@ public class GenerateDto {
private String uri;
@ApiModelProperty("密码")
private String pwd;
@ApiModelProperty("有效期")
private Long overTime;
}

3
backend/src/main/java/io/dataease/dto/panel/link/ValidateDto.java
View File

@ -6,6 +6,9 @@ import lombok.Data;
@Data
public class ValidateDto {
@ApiModelProperty("是否过期")
private boolean expire;
@ApiModelProperty("是否可用")
private boolean valid;
@ApiModelProperty("是否启用密码")

22
backend/src/main/java/io/dataease/service/panel/PanelLinkService.java
View File

@ -9,10 +9,12 @@ import io.dataease.base.domain.PanelGroupWithBLOBs;
import io.dataease.base.domain.PanelLink;
import io.dataease.base.mapper.PanelGroupMapper;
import io.dataease.base.mapper.PanelLinkMapper;
import io.dataease.base.mapper.ext.ExtPanelLinkMapper;
import io.dataease.commons.utils.ServletUtils;
import io.dataease.controller.ResultHolder;
import io.dataease.controller.request.panel.link.EnablePwdRequest;
import io.dataease.controller.request.panel.link.LinkRequest;
import io.dataease.controller.request.panel.link.OverTimeRequest;
import io.dataease.controller.request.panel.link.PasswordRequest;
import io.dataease.dto.panel.link.GenerateDto;
import org.apache.commons.lang3.ObjectUtils;
@ -45,6 +47,9 @@ public class PanelLinkService {
@Resource
private PanelGroupMapper panelGroupMapper;
@Resource
private ExtPanelLinkMapper extPanelLinkMapper;
public void changeValid(LinkRequest request){
PanelLink po = new PanelLink();
po.setResourceId(request.getResourceId());
@ -66,6 +71,14 @@ public class PanelLinkService {
mapper.updateByPrimaryKeySelective(po);
}
public void overTime(OverTimeRequest request) {
/* PanelLink po = new PanelLink();
po.setResourceId(request.getResourceId());
po.setOverTime(request.getOverTime());
mapper.updateByPrimaryKeySelective(po); */
extPanelLinkMapper.updateOverTime(request);
}
public PanelLink findOne(String resourceId){
PanelLink panelLink = mapper.selectByPrimaryKey(resourceId);
return panelLink;
@ -123,6 +136,7 @@ public class PanelLinkService {
result.setEnablePwd(linl.getEnablePwd());
result.setPwd(linl.getPwd());
result.setUri(baseUrl+buildLinkParam(linl.getResourceId()));
result.setOverTime(linl.getOverTime());
return result;
}
@ -144,6 +158,14 @@ public class PanelLinkService {
return verify;
}
// 验证链接是否过期
public Boolean isExpire(PanelLink panelLink) {
if (ObjectUtils.isEmpty(panelLink.getOverTime())) {
return false;
}
return System.currentTimeMillis() > panelLink.getOverTime();
}
public boolean validatePwd(PasswordRequest request) throws Exception {
String password = decryptParam(request.getPassword());
String resourceId = request.getResourceId();

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

@ -1,3 +1,7 @@
ALTER TABLE `chart_view` ADD COLUMN `render` varchar(50) COMMENT '视图渲染方式' AFTER `type`;
UPDATE `chart_view` SET `render` = 'echarts' WHERE `type` != 'liquid';
UPDATE `chart_view` SET `render` = 'antv' WHERE `type` = 'liquid';
ALTER TABLE `panel_link` ADD COLUMN `over_time` bigint(13) NULL DEFAULT NULL COMMENT '有效截止时间' AFTER `pwd`;

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

@ -65,7 +65,7 @@
<!--要生成的数据库表 -->
<table tableName="chart_view"/>
<table tableName="panel_link"/>
<!-- <table tableName="sys_dict_item"/>-->
<!-- <table tableName="dataset_table_field"/>-->

2
frontend/package.json
View File

@ -22,7 +22,7 @@
"core-js": "^2.6.5",
"echarts": "^5.0.1",
"element-resize-detector": "^1.2.3",
"element-ui": "2.13.0",
"element-ui": "2.15.6",
"file-save": "^0.2.0",
"file-saver": "^2.0.5",
"fit2cloud-ui": "1.5.0-beta.0",

8
frontend/src/api/link/index.js
View File

@ -26,6 +26,14 @@ export function setPwd(data) {
})
}
export function setOverTime(data) {
return request({
url: 'api/link/resetOverTime',
method: 'post',
data
})
}
export function switchValid(data) {
return request({
url: 'api/link/switchLink',

1
frontend/src/icons/svg/more_v.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1634698675666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="200" height="200"><path d="M437.333333 224C437.333333 183.466667 471.466667 149.333333 512 149.333333s74.666667 34.133333 74.666667 74.666667S552.533333 298.666667 512 298.666667s-74.666667-34.133333-74.666667-74.666667zM439.466667 512c0-40.533333 34.133333-74.666667 74.666666-74.666667s74.666667 34.133333 74.666667 74.666667-34.133333 74.666667-74.666667 74.666667-74.666667-34.133333-74.666666-74.666667zM437.333333 800c0-40.533333 34.133333-74.666667 74.666667-74.666667s74.666667 34.133333 74.666667 74.666667S552.533333 874.666667 512 874.666667s-74.666667-34.133333-74.666667-74.666667z" p-id="2281"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 750 B

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

@ -1180,6 +1180,8 @@ export default {
passwd_protect: 'Password Protect',
link: 'Link',
link_share: 'Share Link',
over_time: 'Over time',
link_expire: 'Link is expire',
link_share_desc: 'After opening the link, anyone can access the dashboard through this link.',
share: 'Share',
datalist: 'Chart List',

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

@ -1183,6 +1183,8 @@ export default {
passwd_protect: '密碼保護',
link: '鏈接',
link_share: '鏈接分享',
over_time: '有效期',
link_expire: '鏈接已過期！',
link_share_desc: '開啓鏈接後，任何人可通過此鏈接訪問儀表板。',
share: '分享',
datalist: '視圖列表',
@ -1535,6 +1537,23 @@ export default {
deyear: {
label: '年份',
placeholder: '請選擇年份'
},
deshowdate: {
label: '時間',
show_week: '顯示星期',
show_date: '顯示日期',
time_format: '時間格式',
date_format: '日期格式',
custom: '自定義格式',
open_mode: '展示風格',
m_default: '簡單風格',
m_elec: '電子時鐘',
m_simple: '簡單錶盤',
m_complex: '複雜錶盤',
select_openMode: '請選擇展示風格',
select_time_format: '請選擇時間各式',
select_date_format: '請選擇日期格式'
}
}

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

@ -1187,6 +1187,8 @@ export default {
copy_short_link_passwd: '复制短链接及密码',
passwd_protect: '密码保护',
link: '链接',
over_time: '有效期',
link_expire: '链接已过期！',
link_share: '链接分享',
link_share_desc: '开启链接后，任何人可通过此链接访问仪表板。',
share: '分享',
@ -1558,7 +1560,7 @@ export default {
m_complex: '复杂表盘',
select_openMode: '请选择展示风格',
select_time_format: '请选择时间格式',
select_date_format: '请选择时间格式'
select_date_format: '请选择日期格式'
}
}

2
frontend/src/link/link.js
View File

@ -9,7 +9,7 @@ import '@/components/canvas/custom-component' // 注册自定义组件
import widgets from '@/components/widget'
import * as echarts from 'echarts'
import UmyUi from 'umy-ui'
import '@/utils/DateUtil'
Vue.use(UmyUi)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

13
frontend/src/views/chart/chart/chart.js
View File

@ -853,3 +853,16 @@ export const BASE_MIX = {
}
]
}
export const COLOR_PANEL = [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'#999999',
'#ffffff',
'#000000'
]

3
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -22,7 +22,6 @@ import { baseGaugeOptionAntV } from '@/views/chart/chart/gauge/gauge_antv'
import { baseFunnelOptionAntV } from '@/views/chart/chart/funnel/funnel_antv'
import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
export default {
name: 'ChartComponentG2',
@ -145,8 +144,6 @@ export default {
this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'scatter') {
this.myChart = baseScatterOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'chart-mix') {
this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'radar') {
this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'gauge') {

7
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
View File

@ -3,7 +3,7 @@
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="colorForm.color" class="color-picker-style" @change="changeBackgroundStyle" />
<el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />
</el-form-item>
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
@ -18,7 +18,7 @@
</template>
<script>
import { DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
export default {
name: 'BackgroundColorSelector',
@ -34,7 +34,8 @@ export default {
},
data() {
return {
colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
predefineColors: COLOR_PANEL
}
},
watch: {

7
frontend/src/views/chart/components/component-style/LegendSelector.vue
View File

@ -28,7 +28,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
@ -51,7 +51,7 @@
</template>
<script>
import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
export default {
name: 'LegendSelector',
@ -77,7 +77,8 @@ export default {
{ name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {

7
frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
View File

@ -28,7 +28,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
@ -51,7 +51,7 @@
</template>
<script>
import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
export default {
name: 'LegendSelectorAntV',
@ -75,7 +75,8 @@ export default {
{ name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {

13
frontend/src/views/chart/components/component-style/SplitSelector.vue
View File

@ -6,7 +6,7 @@
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
@ -17,13 +17,13 @@
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
@ -34,7 +34,7 @@
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.split_color')" class="form-item">
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
@ -45,7 +45,7 @@
</template>
<script>
import { DEFAULT_SPLIT } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
export default {
name: 'SplitSelector',
@ -63,7 +63,8 @@ export default {
return {
splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

9
frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
View File

@ -6,7 +6,7 @@
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
@ -17,7 +17,7 @@
<!-- <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
</el-form-item>
<!-- <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
@ -45,7 +45,7 @@
</template>
<script>
import { DEFAULT_SPLIT } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
export default {
name: 'SplitSelectorAntV',
@ -63,7 +63,8 @@ export default {
return {
splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

7
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -22,7 +22,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@ -49,7 +49,7 @@
</template>
<script>
import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
export default {
name: 'TitleSelector',
@ -67,7 +67,8 @@ export default {
return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {

7
frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
View File

@ -22,7 +22,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@ -42,7 +42,7 @@
</template>
<script>
import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
export default {
name: 'TitleSelectorAntV',
@ -60,7 +60,8 @@ export default {
return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {

11
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
@ -78,7 +78,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
export default {
name: 'XAxisSelector',
@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

11
frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
View File

@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
@ -71,7 +71,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
@ -89,7 +89,7 @@
</template>
<script>
import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
export default {
name: 'XAxisSelectorAntV',
@ -107,7 +107,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

11
frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
View File

@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@ -78,7 +78,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
export default {
name: 'YAxisExtSelector',
@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

11
frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
View File

@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@ -71,7 +71,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@ -89,7 +89,7 @@
</template>
<script>
import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
export default {
name: 'YAxisExtSelectorAntV',
@ -107,7 +107,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

11
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@ -59,7 +59,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@ -78,7 +78,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
export default {
name: 'YAxisSelector',
@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

11
frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
View File

@ -16,7 +16,7 @@
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@ -70,7 +70,7 @@
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@ -82,7 +82,7 @@
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@ -100,7 +100,7 @@
</template>
<script>
import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
export default {
name: 'YAxisSelectorAntV',
@ -118,7 +118,8 @@ export default {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false,
fontSize: []
fontSize: [],
predefineColors: COLOR_PANEL
}
},
watch: {

17
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -36,7 +36,7 @@
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label" />
<span>
<el-color-picker v-model="customColor" class="color-picker-style" @change="switchColorCase" />
<el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
</span>
</div>
</div>
@ -47,21 +47,21 @@
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
</div>
<div v-if="sourceType==='view' || sourceType==='panelTable'">
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" @change="changeColorCase" />
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
</el-form-item>
<!-- 暂时不支持该功能-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
@ -78,7 +78,7 @@
</template>
<script>
import { DEFAULT_COLOR_CASE } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
export default {
name: 'ColorSelector',
@ -183,7 +183,8 @@ export default {
],
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
customColor: null,
colorIndex: 0
colorIndex: 0,
predefineColors: COLOR_PANEL
}
},
watch: {

9
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -15,7 +15,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@ -49,7 +49,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
@ -65,7 +65,7 @@
</template>
<script>
import { DEFAULT_LABEL } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
export default {
name: 'LabelSelector',
@ -92,7 +92,8 @@ export default {
{ name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
{ name: this.$t('chart.text_pos_left'), value: 'left' },
{ name: this.$t('chart.text_pos_right'), value: 'right' }
]
],
predefineColors: COLOR_PANEL
}
},
watch: {

9
frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
View File

@ -15,7 +15,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@ -35,7 +35,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
</el-form>
</el-col>
@ -43,7 +43,7 @@
</template>
<script>
import { DEFAULT_LABEL } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
export default {
name: 'LabelSelectorAntV',
@ -70,7 +70,8 @@ export default {
{ name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
{ name: this.$t('chart.text_pos_left'), value: 'left' },
{ name: this.$t('chart.text_pos_right'), value: 'right' }
]
],
predefineColors: COLOR_PANEL
}
},
watch: {

7
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -18,7 +18,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
@ -53,7 +53,7 @@
</template>
<script>
import { DEFAULT_TOOLTIP } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
export default {
name: 'TooltipSelector',
@ -71,7 +71,8 @@ export default {
return {
tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {

7
frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
View File

@ -12,7 +12,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
</el-form-item>
</div>
</el-form>
@ -21,7 +21,7 @@
</template>
<script>
import { DEFAULT_TOOLTIP } from '../../chart/chart'
import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
export default {
name: 'TooltipSelectorAntV',
@ -39,7 +39,8 @@ export default {
return {
tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
fontSize: [],
isSetting: false
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {

7
frontend/src/views/chart/group/Group.vue
View File

@ -880,11 +880,14 @@ export default {
// if (this.tDs && this.tDs.type === 'group') {
// return
// }
this.dsForm.sceneId = this.tDs.id
const oldSceneId = this.dsForm.sceneId
const newSceneId = this.tDs.id
this.dsForm.sceneId = newSceneId
post('/chart/view/save', this.dsForm).then(res => {
this.closeMoveDs()
// this.tableTree()
this.refreshNodeBy(this.dsForm.sceneId)
this.refreshNodeBy(oldSceneId)
this.refreshNodeBy(newSceneId)
})
},
targetDs(val) {

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

@ -3,6 +3,7 @@
<!-- <span v-show="false">{{ vId }}</span>-->
<!-- <el-row style="height: 40px;background-color: white" class="padding-lr"> -->
<el-row style="height: 40px;" class="padding-lr">
<span class="title-text" style="line-height: 40px;">{{ view.name }}</span>
<el-popover
placement="right-start"
width="400"
@ -11,7 +12,8 @@
@hide="hideTab"
>
<dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
<span slot="reference" class="title-text" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
<!-- <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />-->
<i slot="reference" class="el-icon-warning icon-class" style="margin-left: 4px;cursor: pointer;" />
</el-popover>
<span style="float: right;line-height: 40px;">
<!-- <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
@ -927,6 +929,7 @@ export default {
view.extStack = JSON.stringify(view.extStack)
view.drillFields = JSON.stringify(view.drillFields)
view.extBubble = JSON.stringify(view.extBubble)
delete view.data
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
// this.getData(response.data.id)
@ -1866,5 +1869,11 @@ export default {
background-color: var(--MainBG) !important;
border-color: var(--TableBorderColor) !important;
}
.icon-class{
color:#6c6c6c;
}
.blackTheme .icon-class{
color: #cccccc;
}
</style>

26
frontend/src/views/chart/view/ChartType.vue
View File

@ -56,16 +56,16 @@
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="chart-mix" label="chart-mix">
<span :title="$t('chart.chart_mix')">
<svg-icon icon-class="chart-mix" 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="chart-mix" label="chart-mix">-->
<!-- <span :title="$t('chart.chart_mix')">-->
<!-- <svg-icon icon-class="chart-mix" 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="radar" label="radar">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
@ -81,8 +81,6 @@
<svg-icon icon-class="pie" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="pie-rose" label="pie-rose">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
@ -93,6 +91,8 @@
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="treemap" label="treemap">
<span :title="$t('chart.chart_treemap')">
<svg-icon icon-class="treemap" class="chart-icon" />
@ -104,6 +104,8 @@
</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>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<div v-else-if="chart.render && chart.render === 'echarts'">

14
frontend/src/views/dataset/data/ViewTable.vue
View File

@ -2,6 +2,9 @@
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
<!-- <span v-show="false">{{ tableRefresh }}</span>-->
<el-row style="height: 26px;">
<span class="title-text" style="line-height: 26px;">
{{ table.name }}
</span>
<el-popover
placement="right-start"
width="400"
@ -10,9 +13,8 @@
@hide="hideTab"
>
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
<span slot="reference" class="title-text" style="line-height: 26px;cursor: pointer;">
{{ table.name }}
</span>
<!-- <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />-->
<i slot="reference" class="el-icon-warning icon-class" style="margin-left: 4px;cursor: pointer;font-size: 14px;" />
</el-popover>
<el-row v-if="hasDataPermission('manage',param.privileges)" style="float: right">
<el-dropdown v-if="table.type ==='excel'" style="margin-right: 10px;" size="small" trigger="click" @command="clickEditExcel">
@ -226,4 +228,10 @@ export default {
.form-item {
margin-bottom: 6px;
}
.icon-class{
color:#6c6c6c;
}
.blackTheme .icon-class{
color: #cccccc;
}
</style>

7
frontend/src/views/dataset/group/Group.vue
View File

@ -770,11 +770,14 @@ export default {
}
},
saveMoveDs() {
this.dsForm.sceneId = this.tDs.id
const oldSceneId = this.dsForm.sceneId
const newSceneId = this.tDs.id
this.dsForm.sceneId = newSceneId
this.dsForm.isRename = true
alter(this.dsForm).then(res => {
this.closeMoveDs()
this.refreshNodeBy(this.dsForm.sceneId)
this.refreshNodeBy(oldSceneId)
this.refreshNodeBy(newSceneId)
})
},
targetDs(val) {

81
frontend/src/views/link/generate/index.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="createOrganization" inline :model="form" size="small" label-width="80px">
<el-form-item :label="$t('panel.link_share')">
<el-form-item ref="form" :label="$t('panel.link_share')">
<el-switch
v-model="valid"
style="width: 370px;"
@ -22,6 +22,19 @@
/>
</el-form-item>
<el-form-item v-if="valid" :label="$t('panel.over_time')">
<el-date-picker
v-model="form.overTime"
type="datetime"
placeholder="选择日期时间"
align="right"
value-format="timestamp"
:picker-options="pickerOptions"
default-time="23:59:59"
@change="resetOverTime"
/>
</el-form-item>
<el-form-item v-if="valid" label=" ">
<el-checkbox v-model="form.enablePwd" @change="resetEnablePwd">{{ $t('panel.passwd_protect') }} </el-checkbox>
@ -45,7 +58,7 @@
</template>
<script>
import { loadGenerate, setPwd, switchValid, switchEnablePwd, shortUrl } from '@/api/link'
import { loadGenerate, setPwd, switchValid, switchEnablePwd, shortUrl, setOverTime } from '@/api/link'
import { encrypt, decrypt } from '@/utils/rsaEncrypt'
export default {
@ -65,7 +78,28 @@ export default {
valid: false,
form: {},
newUrl: null,
defaultForm: { enablePwd: false, pwd: null, uri: null }
defaultForm: { enablePwd: false, pwd: null, uri: null },
pickerOptions: {
disabledDate: time => {
return time < (Date.now() - 8.64e7)
},
shortcuts: [{
text: '一天',
onClick: function(picker) {
picker.$emit('pick', this.limitDate('day'))
}.bind(this)
}, {
text: '一周',
onClick: (picker) => {
picker.$emit('pick', this.limitDate('week'))
}
}, {
text: '一月',
onClick: (picker) => {
picker.$emit('pick', this.limitDate('month'))
}
}]
}
}
},
computed: {
@ -80,12 +114,14 @@ export default {
methods: {
currentGenerate() {
loadGenerate(this.resourceId).then(res => {
const { valid, enablePwd, pwd, uri } = res.data
const { valid, enablePwd, pwd, uri, overTime } = res.data
this.valid = valid
this.form.enablePwd = enablePwd
this.form.uri = uri ? (this.origin + uri) : uri
// 返回的密码是共钥加密后的 所以展示需要私钥解密一波
pwd && (this.form.pwd = decrypt(pwd))
/* overTime && (this.form.overTime = overTime) */
overTime && (this.$set(this.form, 'overTime', overTime))
this.requestShort()
})
},
@ -122,6 +158,16 @@ export default {
value && !this.form.pwd && this.resetPwd()
})
},
resetOverTime(value) {
const param = {
resourceId: this.resourceId,
overTime: value
}
setOverTime(param).then(res => {
// this.form.overTime = value
this.$forceUpdate()
})
},
onCopy(e) {
// alert('You just copied: ' + e.text)
@ -152,6 +198,33 @@ export default {
this.newUrl = res.data
}
})
},
limitDate(type) {
const now = new Date()
const nowTime = now.getTime()
const oneDay = 24 * 60 * 60 * 1000
if (type === 'day') {
const tom = new Date(nowTime + oneDay)
return new Date(tom.format('yyyy-MM-dd') + ' 23:59:59')
}
if (type === 'week') {
const tom = new Date(nowTime + oneDay * 7)
return new Date(tom.format('yyyy-MM-dd') + ' 23:59:59')
}
if (type === 'month') {
const result = new Date()
const curMonth = now.getMonth() + 1
if (curMonth === 12) {
result.setYear(now.getYear() + 1)
result.setMonth(0)
} else {
result.setMonth(curMonth)
}
return new Date(result.format('yyyy-MM-dd') + ' 23:59:59')
}
return null
}
}
}

14
frontend/src/views/link/index.vue
View File

@ -3,6 +3,7 @@
<link-error v-if="showIndex===0" :resource-id="resourceId" />
<link-pwd v-if="showIndex===1" :resource-id="resourceId" @fresh-token="refreshToken" />
<link-view v-if="showIndex===2" :resource-id="resourceId" />
<link-expire v-if="showIndex===3" :resource-id="resourceId" />
</div>
</template>
<script>
@ -11,9 +12,10 @@ import { validate } from '@/api/link'
import LinkView from './view'
import LinkError from './error'
import LinkPwd from './pwd'
import LinkExpire from './overtime'
export default {
components: {
LinkError, LinkPwd, LinkView
LinkError, LinkPwd, LinkView, LinkExpire
},
data() {
return {
@ -31,7 +33,7 @@ export default {
loadInit() {
this.link = getQueryVariable(this.PARAMKEY)
validate({ link: this.link }).then(res => {
const { resourceId, valid, enablePwd, passPwd } = res.data
const { resourceId, valid, enablePwd, passPwd, expire } = res.data
this.resourceId = resourceId
// 如果链接无效 直接显示无效页面
if (!valid || !resourceId) {
@ -39,6 +41,11 @@ export default {
return
}
if (expire) {
this.showExpire()
return
}
if (enablePwd && !passPwd) {
this.showPwd()
return
@ -64,6 +71,9 @@ export default {
// 显示仪表板
showView() {
this.showIndex = 2
},
showExpire() {
this.showIndex = 3
}
}
}

3
frontend/src/views/link/overtime/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<el-empty :description="$t('panel.link_expire')" />
</template>