dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
taojinlong 2022-06-25 15:33:56 +08:00
commit be11424539
95 changed files with 2639 additions and 986 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
backend/src/main/java/io/dataease/plugins/server/SSOServer.java
View File

@ -5,7 +5,6 @@ import java.net.URLEncoder;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
@ -46,13 +45,13 @@ public class SSOServer {
@GetMapping("/callBack")
public ModelAndView callBack(@RequestParam("code") String code, @RequestParam("state") String state) {
ModelAndView modelAndView = new ModelAndView("redirect:/");
HttpServletResponse response = ServletUtils.response();
ModelAndView modelAndView = new ModelAndView("redirect:/");
HttpServletResponse response = ServletUtils.response();
OidcXpackService oidcXpackService = null;
String idToken = null;
try {
Map<String, OidcXpackService> beansOfType = SpringContextUtil.getApplicationContext().getBeansOfType((OidcXpackService.class));
if(beansOfType.keySet().size() == 0) {
if (beansOfType.keySet().size() == 0) {
DEException.throwException("缺少oidc插件");
}
oidcXpackService = SpringContextUtil.getBean(OidcXpackService.class);
@ -60,17 +59,18 @@ public class SSOServer {
if (!suuportOIDC) {
DEException.throwException("未开启oidc");
}
Map<String, String> config = config(oidcXpackService);
Map<String, String> config = config(oidcXpackService);
SSOToken ssoToken = oidcXpackService.requestSsoToken(config, code, state);
idToken = ssoToken.getIdToken();
Cookie cookie_id_token = new Cookie("IdToken", ssoToken.getIdToken());cookie_id_token.setPath("/");
Cookie cookie_id_token = new Cookie("IdToken", ssoToken.getIdToken());
cookie_id_token.setPath("/");
response.addCookie(cookie_id_token);
SSOUserInfo ssoUserInfo = oidcXpackService.requestUserInfo(config, ssoToken.getAccessToken());
SysUserEntity sysUserEntity = authUserService.getUserBySub(ssoUserInfo.getSub());
if(null == sysUserEntity){
if (null == sysUserEntity) {
sysUserService.validateExistUser(ssoUserInfo.getUsername(), ssoUserInfo.getNickName(), ssoUserInfo.getEmail());
sysUserService.saveOIDCUser(ssoUserInfo);
sysUserEntity = authUserService.getUserBySub(ssoUserInfo.getSub());
@ -79,17 +79,19 @@ public class SSOServer {
String realPwd = CodingUtil.md5(sysUserService.defaultPWD());
String token = JWTUtils.sign(tokenInfo, realPwd);
ServletUtils.setToken(token);
Cookie cookie_token = new Cookie("Authorization", token);cookie_token.setPath("/");
Cookie cookie_ac_token = new Cookie("AccessToken", ssoToken.getAccessToken());cookie_ac_token.setPath("/");
Cookie cookie_token = new Cookie("Authorization", token);
cookie_token.setPath("/");
Cookie cookie_ac_token = new Cookie("AccessToken", ssoToken.getAccessToken());
cookie_ac_token.setPath("/");
response.addCookie(cookie_token);
response.addCookie(cookie_ac_token);
}catch(Exception e) {
} catch (Exception e) {
String msg = e.getMessage();
if (null != e.getCause()) {
msg = e.getCause().getMessage();
@ -107,19 +109,18 @@ public class SSOServer {
} catch (UnsupportedEncodingException e1) {
e.printStackTrace();
}
}
}
return modelAndView;
}
private Map<String, String> config(OidcXpackService oidcXpackService) {
List<SysSettingDto> sysSettingDtos = oidcXpackService.oidcSettings();
Map<String, String> config = sysSettingDtos.stream().collect(HashMap::new,(m, v)->m.put(v.getParamKey(), v.getParamValue()), HashMap::putAll);
Map<String, String> config = sysSettingDtos.stream().collect(HashMap::new, (m, v) -> m.put(v.getParamKey(), v.getParamValue()), HashMap::putAll);
return config;
}
}

33
backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
View File

@ -533,7 +533,7 @@ public class DataSetTableService {
.checked(Boolean.TRUE).build();
List<DatasetTableField> fields = dataSetTableFieldsService.list(datasetTableField);
if (CollectionUtils.isNotEmpty(extFields)) {
fields.addAll(extFields);
fields = extFields;
}
if (CollectionUtils.isEmpty(fields)) {
map.put("fields", fields);
@ -749,7 +749,7 @@ public class DataSetTableService {
conditionEntities.add(entity2);
request.setConditions(conditionEntities);
List<DataSetTaskLogDTO> dataSetTaskLogDTOS = dataSetTableTaskLogService.listTaskLog(request, "excel");
if(CollectionUtils.isNotEmpty(dataSetTaskLogDTOS)){
if (CollectionUtils.isNotEmpty(dataSetTaskLogDTOS)) {
dataSetTaskLogDTOS.get(0).getStatus().equalsIgnoreCase(JobStatus.Underway.name());
sycnStatus = dataSetTaskLogDTOS.get(0).getStatus();
}
@ -943,14 +943,15 @@ public class DataSetTableService {
List<SqlVariableDetails> sqlVariableDetails = new ArrayList<>();
datasetTables.forEach(datasetTable -> {
if (StringUtils.isNotEmpty(datasetTable.getSqlVariableDetails())) {
sqlVariableDetails.addAll(new Gson().fromJson(datasetTable.getSqlVariableDetails(), new TypeToken<List<SqlVariableDetails>>() {}.getType()));
sqlVariableDetails.addAll(new Gson().fromJson(datasetTable.getSqlVariableDetails(), new TypeToken<List<SqlVariableDetails>>() {
}.getType()));
}
});
return sqlVariableDetails;
}
public String handleVariableDefaultValue(String sql, String sqlVariableDetails){
public String handleVariableDefaultValue(String sql, String sqlVariableDetails) {
if (StringUtils.isEmpty(sql)) {
DataEaseException.throwException(Translator.get("i18n_sql_not_empty"));
}
@ -958,7 +959,8 @@ public class DataSetTableService {
Matcher matcher = pattern.matcher(sql);
while (matcher.find()) {
SqlVariableDetails defaultsSqlVariableDetail = null;
List<SqlVariableDetails> defaultsSqlVariableDetails = new Gson().fromJson(sqlVariableDetails, new TypeToken<List<SqlVariableDetails>>() {}.getType());
List<SqlVariableDetails> defaultsSqlVariableDetails = new Gson().fromJson(sqlVariableDetails, new TypeToken<List<SqlVariableDetails>>() {
}.getType());
for (SqlVariableDetails sqlVariableDetail : defaultsSqlVariableDetails) {
if (matcher.group().substring(2, matcher.group().length() - 1).equalsIgnoreCase(sqlVariableDetail.getVariableName())) {
defaultsSqlVariableDetail = sqlVariableDetail;
@ -969,11 +971,11 @@ public class DataSetTableService {
sql = sql.replace(matcher.group(), defaultsSqlVariableDetail.getDefaultValue());
}
}
try {
sql = removeVariables(sql);
}catch (Exception e){
e.printStackTrace();
}
try {
sql = removeVariables(sql);
} catch (Exception e) {
e.printStackTrace();
}
return sql;
}
@ -985,7 +987,7 @@ public class DataSetTableService {
hasVariables = true;
sql = sql.replace(matcher.group(), SubstitutedParams);
}
if(!hasVariables){
if (!hasVariables) {
return sql;
}
CCJSqlParserUtil.parse(sql, parser -> parser.withSquareBracketQuotation(true));
@ -993,15 +995,15 @@ public class DataSetTableService {
Select select = (Select) statement;
PlainSelect plainSelect = ((PlainSelect) select.getSelectBody());
Expression expr = plainSelect.getWhere();
if(expr == null){
if (expr == null) {
return sql;
}
StringBuilder stringBuilder = new StringBuilder();
BinaryExpression binaryExpression = (BinaryExpression)expr;
BinaryExpression binaryExpression = (BinaryExpression) expr;
if(!(binaryExpression.getLeftExpression() instanceof BinaryExpression) && !(binaryExpression.getRightExpression() instanceof BinaryExpression) && hasVarible(binaryExpression.toString())){
if (!(binaryExpression.getLeftExpression() instanceof BinaryExpression) && !(binaryExpression.getRightExpression() instanceof BinaryExpression) && hasVarible(binaryExpression.toString())) {
stringBuilder.append(SubstitutedSql);
}else {
} else {
expr.accept(getExpressionDeParser(stringBuilder));
}
plainSelect.setWhere(CCJSqlParserUtil.parseCondExpression(stringBuilder.toString()));
@ -2626,6 +2628,7 @@ public class DataSetTableService {
};
return expressionDeParser;
}
static private boolean hasVarible(String sql) {
return sql.contains(SubstitutedParams);
}

15
backend/src/main/java/io/dataease/service/dataset/impl/direct/DirectFieldService.java
View File

@ -4,6 +4,7 @@ import com.google.gson.Gson;
import io.dataease.commons.exception.DEException;
import io.dataease.commons.model.BaseTreeNode;
import io.dataease.commons.utils.BeanUtils;
import io.dataease.commons.utils.LogUtil;
import io.dataease.commons.utils.TreeUtils;
import io.dataease.dto.dataset.DeSortDTO;
import io.dataease.plugins.common.base.domain.DatasetTable;
@ -86,6 +87,8 @@ public class DirectFieldService implements DataSetFieldService {
List<DeSortField> deSortFields = buildSorts(fields, sortDTO);
Boolean needSort = CollectionUtils.isNotEmpty(deSortFields);
final List<String> allTableFieldIds = fields.stream().map(DatasetTableField::getId).collect(Collectors.toList());
boolean multi = fieldIds.stream().anyMatch(item -> !allTableFieldIds.contains(item));
if (multi && needMapping) {
@ -136,22 +139,22 @@ public class DirectFieldService implements DataSetFieldService {
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
if (StringUtils.equalsIgnoreCase(datasetTable.getType(), DatasetType.DB.toString())) {
datasourceRequest.setTable(dataTableInfoDTO.getTable());
datasourceRequest.setQuery(qp.createQuerySQL(dataTableInfoDTO.getTable(), permissionFields, false, ds, customFilter, deSortFields));
datasourceRequest.setQuery(qp.createQuerySQL(dataTableInfoDTO.getTable(), permissionFields, !needSort, ds, customFilter, deSortFields));
} else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), DatasetType.SQL.toString())) {
String sql = dataTableInfoDTO.getSql();
if (rowAndColumnMgm) {
sql = dataSetTableService.removeVariables(sql);
}
datasourceRequest.setQuery(qp.createQuerySQLAsTmp(sql, permissionFields, false, customFilter, deSortFields));
datasourceRequest.setQuery(qp.createQuerySQLAsTmp(sql, permissionFields, !needSort, customFilter, deSortFields));
} else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), DatasetType.CUSTOM.toString())) {
DataTableInfoDTO dt = new Gson().fromJson(datasetTable.getInfo(), DataTableInfoDTO.class);
List<DataSetTableUnionDTO> listUnion = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId());
String sql = dataSetTableService.getCustomSQLDatasource(dt, listUnion, ds);
datasourceRequest.setQuery(qp.createQuerySQLAsTmp(sql, permissionFields, false, customFilter, deSortFields));
datasourceRequest.setQuery(qp.createQuerySQLAsTmp(sql, permissionFields, !needSort, customFilter, deSortFields));
} else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), DatasetType.UNION.toString())) {
DataTableInfoDTO dt = new Gson().fromJson(datasetTable.getInfo(), DataTableInfoDTO.class);
String sql = (String) dataSetTableService.getUnionSQLDatasource(dt, ds).get("sql");
datasourceRequest.setQuery(qp.createQuerySQLAsTmp(sql, permissionFields, false, customFilter, deSortFields));
datasourceRequest.setQuery(qp.createQuerySQLAsTmp(sql, permissionFields, !needSort, customFilter, deSortFields));
}
} else if (datasetTable.getMode() == 1) {// 抽取
// 连接doris，构建doris数据源查询
@ -162,9 +165,9 @@ public class DirectFieldService implements DataSetFieldService {
String tableName = "ds_" + datasetTable.getId().replaceAll("-", "_");
datasourceRequest.setTable(tableName);
QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
datasourceRequest.setQuery(qp.createQuerySQL(tableName, permissionFields, false, null, customFilter));
datasourceRequest.setQuery(qp.createQuerySQL(tableName, permissionFields, !needSort, null, customFilter, deSortFields));
}
System.out.println(datasourceRequest.getQuery());
LogUtil.info(datasourceRequest.getQuery());
List<String[]> rows = datasourceProvider.getData(datasourceRequest);
if (!needMapping) {
List<Object> results = rows.stream().map(row -> row[0]).distinct().collect(Collectors.toList());

11
backend/src/main/resources/db/migration/V37__1.12.sql
View File

@ -26,4 +26,13 @@ ALTER TABLE `dataset_table` ADD COLUMN `sql_variable_details` LONGTEXT NULL AFTE
INSERT INTO `my_plugin` (`name`, `store`, `free`, `cost`, `category`, `descript`, `version`, `creator`, `load_mybatis`,
`install_time`, `module_name`, `ds_type`)
VALUES ('达梦数据源插件', 'default', '0', '0', 'datasource', '达梦数据源插件', '1.0-SNAPSHOT', 'DATAEASE', '0',
'1650765903630', 'dm-backend', 'dm');
'1650765903630', 'dm-backend', 'dm');
update sys_user set nick_name='示例用户' where user_id =2;
DROP VIEW IF EXISTS `v_auth_model`;
CREATE ALGORITHM = UNDEFINED SQL SECURITY DEFINER VIEW `v_auth_model` AS select `sys_user`.`user_id` AS `id`,concat(`sys_user`.`nick_name`,'（',`sys_user`.`username`,'）') AS `name`,`sys_user`.`username` AS `label`,'0' AS `pid`,'leaf' AS `node_type`,'user' AS `model_type`,'user' AS `model_inner_type`,'target' AS `auth_type`,`sys_user`.`create_by` AS `create_by`,0 AS `level`,0 AS `mode`,'0' AS `data_source_id` from `sys_user` where (`sys_user`.`is_admin` <> 1) union all select `sys_role`.`role_id` AS `id`,`sys_role`.`name` AS `name`,`sys_role`.`name` AS `label`,'0' AS `pid`,'leaf' AS `node_type`,'role' AS `model_type`,'role' AS `model_inner_type`,'target' AS `auth_type`,`sys_role`.`create_by` AS `create_by`,0 AS `level`,0 AS `mode`,'0' AS `data_source_id` from `sys_role` union all select `sys_dept`.`dept_id` AS `id`,`sys_dept`.`name` AS `name`,`sys_dept`.`name` AS `lable`,(cast(`sys_dept`.`pid` as char charset utf8mb4) collate utf8mb4_general_ci) AS `pid`,if((`sys_dept`.`sub_count` = 0),'leaf','spine') AS `node_type`,'dept' AS `model_type`,'dept' AS `model_inner_type`,'target' AS `auth_type`,`sys_dept`.`create_by` AS `create_by`,0 AS `level`,0 AS `mode`,'0' AS `data_source_id` from `sys_dept` union all select `datasource`.`id` AS `id`,`datasource`.`name` AS `NAME`,`datasource`.`name` AS `label`,'0' AS `pid`,'leaf' AS `node_type`,'link' AS `model_type`,`datasource`.`type` AS `model_inner_type`,'source' AS `auth_type`,`datasource`.`create_by` AS `create_by`,0 AS `level`,0 AS `mode`,'0' AS `data_source_id` from `datasource` union all select `dataset_group`.`id` AS `id`,`dataset_group`.`name` AS `NAME`,`dataset_group`.`name` AS `lable`,if(isnull(`dataset_group`.`pid`),'0',`dataset_group`.`pid`) AS `pid`,'spine' AS `node_type`,'dataset' AS `model_type`,`dataset_group`.`type` AS `model_inner_type`,'source' AS `auth_type`,`dataset_group`.`create_by` AS `create_by`,`dataset_group`.`level` AS `level`,0 AS `mode`,'0' AS `data_source_id` from `dataset_group` union all select `dataset_table`.`id` AS `id`,`dataset_table`.`name` AS `NAME`,`dataset_table`.`name` AS `lable`,`dataset_table`.`scene_id` AS `pid`,'leaf' AS `node_type`,'dataset' AS `model_type`,`dataset_table`.`type` AS `model_inner_type`,'source' AS `auth_type`,`dataset_table`.`create_by` AS `create_by`,0 AS `level`,`dataset_table`.`mode` AS `mode`,`dataset_table`.`data_source_id` AS `data_source_id` from `dataset_table` union all select `panel_group`.`id` AS `id`,`panel_group`.`name` AS `NAME`,`panel_group`.`name` AS `label`,(case `panel_group`.`id` when 'panel_list' then '0' when 'default_panel' then '0' else `panel_group`.`pid` end) AS `pid`,if((`panel_group`.`node_type` = 'folder'),'spine','leaf') AS `node_type`,'panel' AS `model_type`,`panel_group`.`panel_type` AS `model_inner_type`,'source' AS `auth_type`,`panel_group`.`create_by` AS `create_by`,0 AS `level`,0 AS `mode`,'0' AS `data_source_id` from `panel_group` union all select `sys_menu`.`menu_id` AS `menu_id`,`sys_menu`.`title` AS `name`,`sys_menu`.`title` AS `label`,`sys_menu`.`pid` AS `pid`,if((`sys_menu`.`sub_count` > 0),'spine','leaf') AS `node_type`,'menu' AS `model_type`,(case `sys_menu`.`type` when 0 then 'folder' when 1 then 'menu' when 2 then 'button' end) AS `model_inner_type`,'source' AS `auth_type`,`sys_menu`.`create_by` AS `create_by`,0 AS `level`,0 AS `mode`,'0' AS `data_source_id` from `sys_menu` where ((`sys_menu`.`i_frame` <> 1) or isnull(`sys_menu`.`i_frame`)) union all select `plugin_sys_menu`.`menu_id` AS `menu_id`,`plugin_sys_menu`.`title` AS `name`,`plugin_sys_menu`.`title` AS `label`,`plugin_sys_menu`.`pid` AS `pid`,if((`plugin_sys_menu`.`sub_count` > 0),'spine','leaf') AS `node_type`,'menu' AS `model_type`,(case `plugin_sys_menu`.`type` when 0 then 'folder' when 1 then 'menu' when 2 then 'button' end) AS `model_inner_type`,'source' AS `auth_type`,`plugin_sys_menu`.`create_by` AS `create_by`,0 AS `level`,0 AS `mode`,'0' AS `data_source_id` from `plugin_sys_menu` where ((`plugin_sys_menu`.`i_frame` <> 1) or isnull(`plugin_sys_menu`.`i_frame`));
delete from panel_subject;
INSERT INTO `panel_subject` (`id`, `name`, `type`, `details`, `create_time`, `create_by`, `update_time`, `update_by`) VALUES ('system_2', '系统主题_深色', 'system', '{\"width\":1600,\"height\":900,\"scale\":100,\"scaleWidth\":100,\"scaleHeight\":100,\"selfAdaption\":true,\"auxiliaryMatrix\":true,\"openCommonStyle\":true,\"panel\":{\"themeColor\":\"dark\",\"color\":\"#030B2E\",\"imageUrl\":{},\"backgroundType\":\"color\",\"gap\":\"yes\",\"resultMode\":\"all\",\"resultCount\":1000},\"aidedDesign\":{\"showGrid\":false,\"matrixBase\":4},\"refreshViewLoading\":true,\"refreshUnit\":\"minute\",\"refreshTime\":5,\"themeId\":\"b32bb6c0-f381-11ec-8f96-ef9d1b285eec\",\"chartInfo\":{\"chartTitle\":{\"show\":true,\"fontSize\":\"18\",\"color\":\"#FFFFFF\",\"hPosition\":\"left\",\"vPosition\":\"top\",\"isItalic\":false,\"isBolder\":true},\"chartColor\":{\"value\":\"default\",\"colors\":[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\",\"#3ba272\",\"#fc8452\",\"#9a60b4\",\"#ea7ccc\"],\"alpha\":100,\"tableHeaderBgColor\":\"#4E81BB\",\"tableItemBgColor\":\"#131E42\",\"tableFontColor\":\"#ffffff\",\"tableStripe\":true,\"dimensionColor\":\"#ffffff\",\"quotaColor\":\"#4E81BB\",\"tableBorderColor\":\"#CCCCCC\",\"seriesColors\":[]},\"chartCommonStyle\":{\"backgroundColorSelect\":true,\"color\":\"#131E42\",\"alpha\":100,\"borderRadius\":5,\"innerPadding\":0},\"filterStyle\":{\"horizontal\":\"left\",\"vertical\":\"top\",\"color\":\"#FFFFFF\",\"brColor\":\"#4E4B4B\",\"wordColor\":\"#4E4B4B\",\"innerBgColor\":\"#131E42\"}}}', 1656049892765, NULL, NULL, NULL);
INSERT INTO `panel_subject` (`id`, `name`, `type`, `details`, `create_time`, `create_by`, `update_time`, `update_by`) VALUES ('system_1', '系统主题_浅色', 'system', '{\"width\":1600,\"height\":900,\"scale\":100,\"scaleWidth\":100,\"scaleHeight\":100,\"selfAdaption\":true,\"auxiliaryMatrix\":true,\"openCommonStyle\":true,\"panel\":{\"themeColor\":\"light\",\"color\":\"#F1F3F5\",\"imageUrl\":{},\"backgroundType\":\"color\",\"gap\":\"yes\",\"resultMode\":\"all\",\"resultCount\":1000},\"aidedDesign\":{\"showGrid\":false,\"matrixBase\":4},\"refreshViewLoading\":true,\"refreshUnit\":\"minute\",\"refreshTime\":5,\"themeId\":\"b1b1c0f0-f381-11ec-8f96-ef9d1b285eec\",\"chartInfo\":{\"chartTitle\":{\"show\":true,\"fontSize\":\"18\",\"color\":\"#000000\",\"hPosition\":\"left\",\"vPosition\":\"top\",\"isItalic\":false,\"isBolder\":true},\"chartColor\":{\"value\":\"default\",\"colors\":[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\",\"#3ba272\",\"#fc8452\",\"#9a60b4\",\"#ea7ccc\"],\"alpha\":100,\"tableHeaderBgColor\":\"#6D9A49\",\"tableItemBgColor\":\"#FFFFFF\",\"tableFontColor\":\"#000000\",\"tableStripe\":true,\"dimensionColor\":\"#000000\",\"quotaColor\":\"#4E81BB\",\"tableBorderColor\":\"#E6E7E4\",\"seriesColors\":[]},\"chartCommonStyle\":{\"backgroundColorSelect\":true,\"color\":\"#FFFFFF\",\"alpha\":100,\"borderRadius\":5,\"innerPadding\":0},\"filterStyle\":{\"horizontal\":\"left\",\"vertical\":\"top\",\"color\":\"#000000\",\"brColor\":\"\",\"wordColor\":\"\",\"innerBgColor\":\"\"}}}', 1656049890290, NULL, NULL, NULL);

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

@ -30,8 +30,8 @@
<!-- 弹出框 -->
<el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
<!-- 是否显示搜索框 -->
<el-input v-if="treeParams.filterable" v-model="keywords" size="mini" class="input-with-select mb10" @change="_searchFun">
<el-button slot="append" icon="el-icon-search" />
<el-input v-if="treeParams.filterable" v-model="keywords" size="mini" class="input-with-select mb10">
<el-button slot="append" icon="el-icon-search" @click="_searchFun" />
</el-input>
<el-scrollbar tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
<!-- 树列表 -->
@ -48,6 +48,7 @@
:render-content="treeRenderFun"
@node-click="_treeNodeClickFun"
@check="_treeCheckFun"
@check-change="_treeCheckChange"
/>
<!-- 暂无数据 -->
<div v-if="data.length === 0" class="no-data">暂无数据</div>
@ -282,6 +283,9 @@ export default {
off(document, 'mouseup', this._popoverHideFun)
},
methods: {
_treeCheckChange() {
this.$emit("treeCheckChange")
},
// 根据类型判断单选，多选
_setMultipleFun() {
let multiple = false

166
frontend/src/components/ElVisualSelect/index.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<el-select
ref="visualSelect"
v-model="selectValue"
:class="classId"
popper-class="VisualSelects"
v-bind="$attrs"
v-on="$listeners"
@visible-change="popChange"
>
<el-option v-for="item in options" :key="item.id" :label="item.text" :value="item.id" />
</el-select>
</template>
<script>
import { uuid } from 'vue-uuid'
export default {
name: 'ElVisualSelect',
model: {
prop: 'value', // 绑定的值，通过父组件传递
event: 'update' // 自定义名
},
props: {
classId: {
type: String,
require: true,
default: uuid.v1()
},
list: {
type: Array,
default: () => {
return []
}
},
value: {
type: [String, Number, Array],
default: ''
}
},
data() {
return {
newList: [],
selectValue: this.value,
options: [],
domList: null,
slectBoxDom: null,
scrollbar: null,
startIndex: 0,
endIndex: 0,
maxLength: 9, // 弹出框最大支持9个条目
itemHeight: 34, // select组件选项高度
maxHeightDom: null,
defaultFirst: false
}
},
watch: {
selectValue(val) {
this.$emit('update', val)
if (!val) {
this.resetList()
this.maxHeightDom.style.height = this.newList.length * 34 + 'px'
this.domList.style.paddingTop = 0 + 'px'
}
},
list() {
this.resetList()
this.init()
}
},
mounted() {
this.resetList()
this.init()
},
methods: {
addScrollDiv(selectDom) {
this.maxHeightDom = document.createElement('div')
this.maxHeightDom.className = 'el-select-height'
selectDom.insertBefore(this.maxHeightDom, this.domList)
},
reCacularHeight() {
this.maxHeightDom.style.height = this.newList.length * this.itemHeight + 'px'
},
resetList(arrys) {
if (Array.isArray(arrys)) {
this.newList = arrys.slice()
this.domList.style.paddingTop = 0 + 'px'
this.scrollbar.scrollTop = 0
this.callback()
} else {
this.newList = this.list.slice()
}
this.options = this.newList.slice(0, this.maxLength)
},
init() {
if (this.defaultFirst && this.list.length > 0) {
this.selectValue = this.list[0].value
}
const selectDom = document.querySelector(
`.${this.classId} .el-select-dropdown .el-select-dropdown__wrap`
)
this.scrollbar = document.querySelector(`.${this.classId} .el-select-dropdown .el-scrollbar`)
this.slectBoxDom = document.querySelector(`.${this.classId} .el-select-dropdown__wrap`)
this.slectBoxDom.style.display = 'flex'
this.slectBoxDom.style.flexDirection = 'row'
this.domList = selectDom.querySelector(
`.${this.classId} .el-select-dropdown__wrap .el-select-dropdown__list`
)
this.addScrollDiv(this.slectBoxDom)
this.scrollFn()
},
scrollFn() {
this.scrollbar.addEventListener('scroll', this.callback, false)
},
callback() {
const scrollTop = this.scrollbar.scrollTop
this.startIndex = parseInt(scrollTop / this.itemHeight)
this.endIndex = this.startIndex + this.maxLength
this.options = this.newList.slice(this.startIndex, this.endIndex)
this.domList.style.paddingTop = scrollTop - (scrollTop % this.itemHeight) + 'px'
},
popChange() {
this.domList.style.paddingTop = 0 + 'px'
this.resetList()
this.reCacularHeight()
}
}
}
</script>
<style lang="scss">
.VisualSelects {
.el-scrollbar {
position: relative;
height: 251px;
overflow: inherit;
overflow-x: hidden;
content-visibility: auto;
}
::-webkit-scrollbar {
background: #ffffff !important;
}
.el-select-height {
width: 1px;
position: absolute;
top: 0;
left: 0;
}
.el-select-dropdown__list {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.el-select-dropdown__wrap {
height: 0;
}
}
</style>

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

@ -43,7 +43,7 @@
top="5vh"
>
<span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
<el-button v-if="showChartInfoType==='enlarge'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
<el-button v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
{{ $t('chart.export_img') }}
</el-button>
<el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">

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

@ -144,7 +144,7 @@
top="5vh"
>
<span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
<el-button v-if="showChartInfoType==='enlarge'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
<el-button v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
{{ $t('chart.export_img') }}
</el-button>
<el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">

55
frontend/src/components/canvas/components/TextAttr.vue
View File

@ -105,7 +105,7 @@
</div>
<div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="边框颜色">
<el-tooltip :content="$t('panel.border_color')">
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
@ -115,7 +115,7 @@
<div v-if="attrShow('backgroundColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<el-tooltip :content="$t('panel.background_color')">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
@ -123,58 +123,70 @@
</div>
</div>
<div v-if="attrShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="视频信息">
<el-tooltip :content="$t('panel.video_info')">
<VideoLinks :link-info="curComponent.videoLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="流媒体信息">
<el-tooltip :content="$t('panel.stream_media_info')">
<StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="网页地址">
<el-tooltip :content="$t('panel.web_addr')">
<FrameLinks :link-info="curComponent.frameLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="日期格式">
<el-tooltip :content="$t('panel.data_format')">
<date-format :format-info="curComponent.formatInfo" />
</el-tooltip>
</div>
<div v-if="attrShow('deTabStyle')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="tab内部样式">
<el-tooltip :content="$t('panel.tab_inner_style')">
<tab-style :style-info="styleInfo" />
</el-tooltip>
</div>
<div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="标题位置">
<title-postion :show-vertical="showVertical" :style-info="styleInfo" />
<el-tooltip :content="$t('panel.title_position')">
<title-postion :element-type="elementType" :show-vertical="showVertical" :style-info="styleInfo" />
</el-tooltip>
</div>
<!--tab 内部组件样式-->
<div v-if="attrTabShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="视频信息">
<el-tooltip :content="$t('panel.video_info')">
<VideoLinks :attr-position="'tab'" :link-info="curActiveTabInner.videoLinks" />
</el-tooltip>
</div>
<div v-if="attrTabShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="流媒体信息">
<el-tooltip :content="$t('panel.stream_media_info')">
<StreamMediaLinks :attr-position="'tab'" :link-info="curActiveTabInner.streamMediaLinks" />
</el-tooltip>
</div>
<div v-if="attrTabShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="网页地址">
<el-tooltip :content="$t('panel.web_addr')">
<FrameLinks :attr-position="'tab'" :link-info="curActiveTabInner.frameLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('adaptation')" style="width: 100px;margin-top: 2px;margin-right:2px;float: left">
<el-tooltip :content="$t('panel.pic_size')">
<el-select v-model="styleInfo.adaptation" size="mini" @change="styleChange">
<el-option
v-for="item in pictureAdaptation"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-tooltip>
</div>
</div>
</el-card>
</template>
@ -257,12 +269,23 @@ export default {
value: '5',
label: '5'
}],
pictureAdaptation: [{
value: 'adaptation',
label: this.$t('panel.pic_adaptation')
}, {
value: 'equiratio',
label: this.$t('panel.pic_equiratio')
}, {
value: 'original',
label: this.$t('panel.pic_original')
}],
// 矩形组件显示的属性
'picture-add': [
'borderStyle',
'borderWidth',
'borderColor',
'hyperlinks'
'hyperlinks',
'adaptation'
],
// 过滤组件显示的属性
'custom': [
@ -345,13 +368,16 @@ export default {
mainStyle() {
const style = {
left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop + 25) + 'px'
}
return style
},
styleInfo() {
return this.$store.state.curComponent.style
},
elementType() {
return this.$store.state.curComponent.component
},
canvasWidth() {
return this.canvasStyleData.width * this.curCanvasScale.scalePointWidth
},
@ -477,6 +503,7 @@ export default {
.el-card-main {
height: 34px;
z-index: 10;
padding-right: 2px;
position: absolute;
}

412
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -3,12 +3,10 @@
<div class="switch-position">
<el-radio-group v-model="mobileLayoutInitStatus" size="mini" @change="openMobileLayout">
<el-radio-button :label="false">
<span style="float: left;">
<i class="el-icon-monitor" />
</span>
<svg-icon icon-class="icon_pc_outlined" class="toolbar-icon-active text16" />
</el-radio-button>
<el-radio-button :label="true">
<span class="icon iconfont icon-yidongduan" />
<svg-icon icon-class="icon_phone_outlined" class="toolbar-icon-active text16" />
</el-radio-button>
</el-radio-group>
</div>
@ -28,69 +26,73 @@
<div v-show="!editControlButton" class="toolbar">
<div class="panel-info-area">
<el-tooltip :content="$t('panel.back') ">
<span class="icon iconfont icon-jiantou insert" @click="closePanelEdit" />
</el-tooltip>
<span class="text">
<svg-icon
icon-class="icon_left_outlined"
class="toolbar-icon-active icon20 margin-left20"
@click="closePanelEdit"
/>
<span class="text16 margin-left12">
{{ panelInfo.name }}
</span>
</div>
<el-tooltip :content="$t('panel.undo') ">
<span class="icon iconfont icon-outline-undo insert" @click="undo" />
<svg-icon icon-class="icon_undo_outlined" class="toolbar-icon-active icon16 margin-right20" @click="undo" />
</el-tooltip>
<el-tooltip :content="$t('panel.redo') ">
<span class="icon iconfont icon-outline-redo insert" @click="redo" />
<svg-icon icon-class="icon_redo_outlined" class="toolbar-icon-active icon16 margin-right20" @click="redo" />
</el-tooltip>
<el-tooltip :content="$t('panel.fullscreen_preview')">
<span class="icon iconfont icon-fangda insert" @click="clickPreview" />
<svg-icon icon-class="icon_magnify_outlined" class="toolbar-icon-active icon16" @click="clickPreview" />
</el-tooltip>
<el-divider direction="vertical" />
<el-divider style="margin-left: 20px" direction="vertical" />
<span class="button_self">
<el-dropdown :hide-on-click="false" trigger="click" placement="bottom-start" size="mini">
<span class="icon iconfont icon-gengduo insert de-icon-base"><span class="icon-font-margin">{{ $t('panel.more') }}</span></span>
<el-dropdown :hide-on-click="false" trigger="click" placement="bottom-start">
<span class="icon iconfont icon-gengduo insert margin-right20">
<span class="icon-font-margin">{{ $t('panel.more') }}</span>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-dropdown placement="right-start" size="mini" style="width: 100%">
<el-dropdown placement="right-start">
<span>
<span
class="icon iconfont"
:class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']"
/>
<span class="icon-font-margin" style="font-size: 12px">{{ $t('panel.new_element_distribution') }}</span>
<i class="el-icon-arrow-right el-icon--right" />
<svg-icon icon-class="icon_moments-categories_outlined" class="toolbar-icon-active text16" @click="clickPreview" />
<span class="text14 margin-left8">{{ $t('panel.new_element_distribution') }}</span>
<svg-icon icon-class="icon_right_outlined" class="icon16 margin-left8" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="auxiliaryMatrixChange">
<span :class="[!canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.suspension') }} </span>
<i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
<el-dropdown-item @click.native="auxiliaryMatrixChange(false)">
<span class="text14"> {{ $t('panel.suspension') }} </span>
<i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check margin-left52" />
</el-dropdown-item>
<el-dropdown-item @click.native="auxiliaryMatrixChange">
<span :class="[canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.matrix') }} </span>
<i v-if="canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
<el-dropdown-item @click.native="auxiliaryMatrixChange(true)">
<span class="text14"> {{ $t('panel.matrix') }} </span>
<i v-if="canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check margin-left52" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item>
<span class="icon iconfont-tb" :class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']" />
<span class="icon-font-margin">{{ $t('panel.aided_grid') }}</span>
<el-switch v-model="showGridSwitch" size="mini" @change="showGridChange" />
<svg-icon icon-class="icon_dialpad_outlined" class="icon16" />
<span class="text14 margin-left8">{{ $t('panel.aided_grid') }}</span>
<el-switch v-model="showGridSwitch" class="margin-left8" size="mini" @change="showGridChange" />
</el-dropdown-item>
<el-dropdown-item @click.native="openOuterParamsSet">
<span class="icon iconfont-tb icon-canshu" />
<span class="icon-font-margin">{{ $t('panel.params_setting') }}</span>
<svg-icon icon-class="icon-quicksetting" class="icon16" />
<span class="text14 margin-left8">{{ $t('panel.params_setting') }}</span>
</el-dropdown-item>
<el-dropdown-item @click.native="clearCanvas">
<span class="icon iconfont-tb icon-qingkong" />
<span class="icon-font-margin">{{ $t('panel.clean_canvas') }}</span>
<svg-icon icon-class="icon_clear_outlined" class="icon16" />
<span class="text14 margin-left8">{{ $t('panel.clean_canvas') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<span class="icon iconfont icon-magic-line insert" @click="showPanel"><span class="icon-font-margin">{{ $t('panel.panel_style') }}</span></span>
<span class="icon iconfont icon-piliang-copy insert" @click="batchOption"><span class="icon-font-margin">{{ $t('panel.batch_opt') }}</span></span>
<span style="float: right;margin-left: 10px">
<span class="icon iconfont icon-magic-line insert margin-right20" @click="showPanel">
<span class="icon-font-margin">{{ $t('panel.panel_style') }}</span>
</span>
<span class="icon iconfont icon-piliang-copy insert margin-right20" @click="batchOption"><span
class="icon-font-margin"
>{{ $t('panel.batch_opt') }}</span></span>
<span style="float: right;margin-right: 24px">
<el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
{{ $t('commons.save') }}
</el-button>
@ -110,7 +112,9 @@
<svg-icon icon-class="warn-tre" style="width: 20px;height: 20px;float: right" />
</el-col>
<el-col :span="20">
<span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_save_warn_tips') }}</span>
<span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{
$t('panel.panel_save_warn_tips')
}}</span>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
@ -435,8 +439,8 @@ export default {
cancelLinkageSettingStatus() {
this.$store.commit('clearLinkageSettingInfo')
},
auxiliaryMatrixChange() {
this.canvasStyleData.auxiliaryMatrix = !this.canvasStyleData.auxiliaryMatrix
auxiliaryMatrixChange(value) {
this.canvasStyleData.auxiliaryMatrix = value
},
showGridChange() {
this.$store.state.styleChangeTimes++
@ -496,141 +500,237 @@ export default {
</script>
<style lang="scss" scoped>
.toolbar {
float: right;
height: 56px;
line-height: 56px;
min-width: 400px;
.toolbar {
float: right;
height: 56px;
line-height: 56px;
min-width: 400px;
.canvas-config {
display: inline-block;
.canvas-config {
display: inline-block;
margin-left: 10px;
font-size: 14px;
input {
width: 50px;
margin-left: 10px;
font-size: 14px;
input {
width: 50px;
margin-left: 10px;
outline: none;
padding: 0 5px;
border: 1px solid #ddd;
}
span {
margin-left: 10px;
}
outline: none;
padding: 0 5px;
border: 1px solid #ddd;
}
.insert {
display: inline-block;
font-weight: 400 !important;
font-size: 14px !important;
font-family: PingFang SC;
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: var(--TextPrimary, #606266);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
span {
margin-left: 10px;
}
}
.insert {
display: inline-block;
font-weight: 400 !important;
font-size: 16px;
font-family: PingFang SC;
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: var(--TextPrimary, #1F2329);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: .1s;
padding: 2px 4px;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
margin: 0;
transition: .1s;
padding: 5px 5px;
border-radius: 3px;
margin-left: 5px;
}
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
&:hover {
background-color: #ecf5ff;
color: #3a8ee6;
}
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6;
}
}
}
.button-show {
background-color: #ebf2fe !important;
.button-show {
background-color: #ebf2fe !important;
}
.button-closed {
background-color: #ffffff !important;
}
::v-deep .el-switch__core {
width: 30px !important;
height: 15px;
}
/*设置圆*/
::v-deep .el-switch__core::after {
width: 14px;
height: 14px;
margin-top: -1px;
margin-bottom: 2px;
}
.iconfont-tb {
font-family: "iconfont" !important;
font-size: 12px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.switch-position {
position: absolute;
top: 13px;
right: 50%;
width: 100px;
}
.button_self {
margin-right: 5px;
}
.button_self ::v-deep .el-button--mini {
padding: 7px 7px !important;
}
.font-active {
font-color: #3a8ee6 !important;
}
.icon-active {
color: #3a8ee6;
}
.icon-unactivated {
display: none;
}
.panel-info-area {
position: absolute;
line-height: 56px;
left: 0px;
}
.icon-font-margin {
margin-left: 4px;
font-size: 14px !important;
}
.margin-left8 {
margin-left: 8px;
}
.toolbar-icon-active {
cursor: pointer;
transition: .1s;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
.button-closed {
background-color: #ffffff !important;
}
::v-deep .el-switch__core {
width: 30px !important;
height: 15px;
}
/*设置圆*/
::v-deep .el-switch__core::after {
width: 14px;
height: 14px;
margin-top: -1px;
margin-bottom: 2px;
}
.iconfont-tb {
font-family: "iconfont" !important;
font-size: 12px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.switch-position {
position: absolute;
top: 13px;
right: 50%;
width: 100px;
}
.button_self {
margin-right: 5px;
}
.button_self ::v-deep .el-button--mini {
padding: 7px 7px !important;
}
.font-active {
font-color: #3a8ee6 !important;
}
.icon-active {
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6;
}
}
.icon-unactivated {
display: none;
.toolbar-icon-middle {
font-size: 16px;
color: var(--TextPrimary, #1F2329);
cursor: pointer;
transition: .1s;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
.panel-info-area {
position: absolute;
left: 10px;
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6;
}
}
.text {
margin-left: 15px;
font-size: 16px;
font-weight: 500;
color: var(--TextPrimary, #606266);
}
;
.icon-back {
font-size: 20px;
font-weight: bold;
color: var(--MenuActiveBG, #409EFF);
}
.toolbar-icon {
font-size: 20px;
color: var(--TextPrimary, #1F2329);
cursor: pointer;
transition: .1s;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
.icon-font-margin{
margin-left: 2px;
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6 !important;
}
}
.margin-left20 {
margin-left: 20px !important;
}
.margin-right20 {
margin-right: 20px !important;
}
.margin-right12 {
margin-right: 12px !important;
}
.icon20 {
font-size: 20px;
color: var(--TextPrimary, #1F2329);
}
.icon16 {
font-size: 16px;
color: var(--TextPrimary, #1F2329);
}
.text16 {
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: var(--TextPrimary, #1F2329);
}
.text14 {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: var(--TextPrimary, #1F2329);
}
.margin-left52 {
margin-left: 52px !important;
}
.margin-left12 {
margin-left: 12px !important;
}
.el-divider--vertical {
margin: 0 20px 0 20px
}
.el-dropdown-menu__item{
line-height: 32px;
}
</style>

25
frontend/src/components/canvas/custom-component/Picture.vue
View File

@ -1,8 +1,8 @@
<template>
<div style="overflow: hidden;width: 100%;height: 100%;">
<img v-if="!showLink" :src="element.propValue">
<img v-if="!showLink" :style="imageAdapter" :src="element.propValue">
<a v-if="showLink" :title="element.hyperlinks.content " :target="element.hyperlinks.openMode " :href="element.hyperlinks.content ">
<img :src="element.propValue">
<img :style="imageAdapter" :src="element.propValue">
</a>
</div>
</template>
@ -23,14 +23,29 @@ export default {
computed: {
showLink() {
return this.editMode === 'preview' && this.element && this.element.hyperlinks && this.element.hyperlinks.enable
},
imageAdapter() {
const style = {
position: 'relative',
width: '100%',
height: '100%'
}
if (this.element.style.adaptation === 'original') {
style.width = 'auto'
style.height = 'auto'
} else if (this.element.style.adaptation === 'equiratio') {
style.height = 'auto'
}
return style
}
}
}
</script>
<style lang="scss" scoped>
img {
width: 100%;
height: 100%;
.pic-main{
overflow: hidden;
width: 100%;
height: 100%;
}
</style>

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

@ -33,6 +33,7 @@
:search-count="searchCount"
:terminal-type="scaleCoefficientType"
:scale="scale"
:theme-style="element.commonBackground"
class="chart-class"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
@ -47,6 +48,7 @@
:search-count="searchCount"
:terminal-type="scaleCoefficientType"
:scale="scale"
:theme-style="element.commonBackground"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
@ -119,7 +121,7 @@ import DrillPath from '@/views/chart/view/DrillPath'
import { areaMapping } from '@/api/map/map'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
import EditBarView from '@/components/canvas/components/Editor/EditBarView'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
@ -204,7 +206,6 @@ export default {
changeIndex: 0,
changeScaleIndex: 0,
pre: null,
preCanvasPanel: null,
// string
sourceCustomAttrStr: null,
// obj
@ -313,6 +314,9 @@ export default {
resultCount() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.resultCount || null
},
gap() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.gap || null
},
innerPadding() {
return this.element.commonBackground && this.element.commonBackground.innerPadding || 0
},
@ -351,21 +355,14 @@ export default {
},
deep: true
},
// deep监听panel 如果改变 提交到 store
canvasStyleData: {
handler(newVal, oldVla) {
this.mergeStyle()
// 如果视图结果模式模式 或者 视图结果获取数量改变 刷新视图
if (!this.preCanvasPanel || this.preCanvasPanel.resultCount !== newVal.panel.resultCount || this.preCanvasPanel.resultMode !== newVal.panel.resultMode) {
this.getData(this.element.propValue.viewId, false)
}
// 如果gap有变化刷新
if (this.preCanvasPanel && this.preCanvasPanel.gap !== newVal.panel.gap) {
this.resizeChart()
}
this.preCanvasPanel = deepCopy(newVal.panel)
},
deep: true
resultCount: function() {
this.getData(this.element.propValue.viewId, false)
},
resultMode: function() {
this.getData(this.element.propValue.viewId, false)
},
gap: function() {
this.resizeChart()
},
// 监听外部的样式变化 （非实时性要求）
'hw': {
@ -421,31 +418,44 @@ export default {
},
batchOptChange(param) {
if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
this.$store.state.styleChangeTimes++
// stylePriority change to 'view'
const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
// view's title use history
// if (param.property === 'text') {
// param.value.title = sourceCustomStyle.text.title
// }
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
}
viewPropsSave(this.panelInfo.id, updateParams)
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
this.optFromBatchSingleProp(param)
}
},
optFromBatchSingleProp(param) {
this.$store.state.styleChangeTimes++
const updateParams = { 'id': this.chart.id }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
}
viewPropsSave(this.panelInfo.id, updateParams)
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
},
optFromBatchThemeChange(changeType) {
const updateParams = { 'id': this.chart.id }
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
adaptCurTheme(sourceCustomStyle, sourceCustomAttr)
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
viewPropsSave(this.panelInfo.id, updateParams)
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
},
resizeChart() {
if (this.chart.type === 'map') {
this.destroyTimeMachine()
@ -473,6 +483,15 @@ export default {
bus.$on('batch-opt-change', param => {
this.batchOptChange(param)
})
bus.$on('onSubjectChange', () => {
this.optFromBatchThemeChange('subject')
})
bus.$on('onThemeColorChange', () => {
this.optFromBatchThemeChange('themeColor')
})
bus.$on('onThemeAttrChange', (param) => {
this.optFromBatchSingleProp(param)
})
},
addViewTrackFilter(linkageParam) {
@ -485,7 +504,6 @@ export default {
const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
// 移动端地图标签不显示
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
customAttrChart.label.show = false
@ -495,32 +513,6 @@ export default {
customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customStyleChart)
}
this.mergeStyle()
},
mergeStyle() {
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
const customAttrChart = JSON.parse(this.chart.customAttr)
const customStyleChart = JSON.parse(this.chart.customStyle)
const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
if (customStyleChart.background) {
// 组件样式-背景设置
customStyleChart.background = customStylePanel.background
}
// 图形属性-颜色设置
if (this.chart.type.includes('table')) {
customAttrChart.color = customAttrPanel.tableColor
} else {
customAttrChart.color['value'] = customAttrPanel.color['value']
customAttrChart.color['colors'] = customAttrPanel.color['colors']
customAttrChart.color['alpha'] = customAttrPanel.color['alpha']
}
this.chart = {
...this.chart,
customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customStyleChart)
}
}
},
getData(id, cache = true, dataBroadcast = false) {
if (id) {

11
frontend/src/components/canvas/custom-component/UserViewDialog.vue
View File

@ -1,5 +1,5 @@
<template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" :class="isAbsoluteContainer ? 'abs-container' : ''">
<de-main-container v-show="showChartCanvas">
<div id="chartCanvas" class="canvas-class" :style="customStyle">
<div class="canvas-class" :style="commonStyle">
@ -66,7 +66,9 @@ export default {
}
},
computed: {
isAbsoluteContainer() {
return this.chart.type === 'symbol-map'
},
showChartCanvas() {
return this.openType === 'enlarge'
},
@ -229,4 +231,9 @@ export default {
height: 100%;
background-size: 100% 100% !important;
}
.abs-container {
position: absolute;
width: 100%;
margin-left: -20px;
}
</style>

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

@ -17,18 +17,23 @@ export const BASE_MOBILE_STYLE = {
}
// 组件仪表板样式
export const COMMON_BACKGROUND = {
enable: false,
export const COMMON_BACKGROUND_BASE = {
backgroundColorSelect: true,
backgroundType: 'innerImage',
color: '#FFFFFF',
innerImage: 'board/blue_1.svg',
outerImage: null,
alpha: 100,
borderRadius: 5,
innerPadding: 0
}
// 组件仪表板样式
export const COMMON_BACKGROUND = {
...COMMON_BACKGROUND_BASE,
enable: false,
backgroundType: 'innerImage',
innerImage: 'board/blue_1.svg',
outerImage: null
}
// 空组件仪表板样式
export const COMMON_BACKGROUND_NONE = {
enable: false,
@ -51,6 +56,11 @@ export const commonStyle = {
borderRadius: 0
}
export const PIC_STYLE = {
...commonStyle,
adaptation: 'adaptation'
}
export const commonAttr = {
animations: [],
events: {},
@ -158,7 +168,7 @@ export const assistList = [
export const pictureList = [
{
id: '20001',
component: 'picture-add',
component: 'Picture',
type: 'picture-add',
label: '图片',
icon: 'iconfont icon-picture',
@ -452,7 +462,7 @@ const list = [
},
{
id: '20001',
component: 'picture-add',
component: 'Picture',
type: 'picture-add',
label: '图片',
icon: 'iconfont icon-picture',
@ -461,7 +471,8 @@ const list = [
hyperlinks: HYPERLINKS,
style: {
width: 400,
height: 200
height: 200,
adaptation: 'adaptation'
},
x: 1,
y: 1,

1
frontend/src/components/canvas/store/snapshot.js
View File

@ -34,6 +34,7 @@ export default {
recordSnapshot(state) {
state.changeTimes++
state.styleChangeTimes++
// 添加新的快照
state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
state.snapshotStyleData[state.snapshotIndex] = deepCopy(state.canvasStyleData)

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

@ -1,4 +1,15 @@
import { sin, cos } from '@/components/canvas/utils/translate'
import store from '@/store'
export const LIGHT_THEME_COLOR_MAIN = '#000000'
export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
export const LIGHT_THEME_PANEL_BACKGROUND = '#F1F3F5'
export const LIGHT_THEME_COMPONENT_BACKGROUND = '#FFFFFF'
export const DARK_THEME_COLOR_MAIN = '#FFFFFF'
export const DARK_THEME_COLOR_SLAVE1 = '#CCCCCC'
export const DARK_THEME_PANEL_BACKGROUND = '#030B2E'
export const DARK_THEME_COMPONENT_BACKGROUND = '#131E42'
export function getStyle(style, filter = []) {
const needUnit = [
@ -148,6 +159,104 @@ export const customStyleTrans = {
}
}
export const THEME_STYLE_TRANS_MAIN_BACK = {
'legend': {
'textStyle': ['color']
},
'xAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
},
'yAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
},
'yAxisExt': {
'nameTextStyle': ['color'],
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
},
'split': {
'name': ['color'],
'axisLine': {
'lineStyle': ['color']
},
'axisTick': {
'lineStyle': ['color']
},
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
}
}
export const THEME_STYLE_TRANS_MAIN = {
'legend': {
'textStyle': ['color']
},
'xAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color']
},
'yAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color']
},
'yAxisExt': {
'nameTextStyle': ['color'],
'axisLabel': ['color']
},
'split': {
'name': ['color'],
'axisLine': {
'lineStyle': ['color']
},
'axisTick': {
'lineStyle': ['color']
},
'axisLabel': ['color']
}
}
export const THEME_STYLE_TRANS_SLAVE1 = {
'xAxis': {
'splitLine': {
'lineStyle': ['color']
}
},
'yAxis': {
'splitLine': {
'lineStyle': ['color']
}
},
'yAxisExt': {
'splitLine': {
'lineStyle': ['color']
}
},
'split': {
'splitLine': {
'lineStyle': ['color']
}
}
}
export const THEME_ATTR_TRANS_MAIN = {
'label': ['color'],
'tooltip': {
'textStyle': ['color']
}
}
// 移动端特殊属性
export const mobileSpecialProps = {
'lineWidth': 3, // 线宽固定值
@ -182,6 +291,24 @@ export function recursionTransObj(template, infoObj, scale, terminal) {
}
}
export function recursionThemTransObj(template, infoObj, color) {
for (const templateKey in template) {
// 如果是数组 进行赋值计算
if (template[templateKey] instanceof Array) {
template[templateKey].forEach(templateProp => {
if (infoObj[templateKey] && infoObj[templateKey][templateProp]) {
infoObj[templateKey][templateProp] = color
}
})
} else {
// 如果是对象 继续进行递归
if (infoObj[templateKey]) {
recursionThemTransObj(template[templateKey], infoObj[templateKey], color)
}
}
}
}
export function componentScalePublic(chartInfo, heightScale, widthScale) {
const scale = Math.min(heightScale, widthScale)
// attr 缩放转换
@ -191,3 +318,58 @@ export function componentScalePublic(chartInfo, heightScale, widthScale) {
return chartInfo
}
export function adaptCurTheme(customStyle, customAttr) {
const canvasStyle = store.state.canvasStyleData
const themeColor = canvasStyle.panel.themeColor
if (themeColor === 'light') {
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, LIGHT_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
} else {
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
}
customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
if (customStyle.background) {
delete customStyle.background
}
}
export function adaptCurThemeCommonStyle(component) {
const commonStyle = store.state.canvasStyleData.chartInfo.chartCommonStyle
for (const key in commonStyle) {
component.commonBackground[key] = commonStyle[key]
}
if (isFilterComponent(component.component)) {
const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle
for (const styleKey in filterStyle) {
component.style[styleKey] = filterStyle[styleKey]
}
}
return component
}
export function adaptCurThemeCommonStyleAll() {
const componentData = store.state.componentData
componentData.forEach((item) => {
adaptCurThemeCommonStyle(item)
})
}
export function adaptCurThemeFilterStyleAll(styleKey) {
const componentData = store.state.componentData
const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle
componentData.forEach((item) => {
if (isFilterComponent(item.component)) {
item.style[styleKey] = filterStyle[styleKey]
}
})
console.log('componentData=' + JSON.stringify(componentData))
}
export function isFilterComponent(component) {
return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(component)
}

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

@ -8,7 +8,7 @@ import {
} from '@/utils/ApplicationContext'
import { uuid } from 'vue-uuid'
import store from '@/store'
import { AIDED_DESIGN } from '@/views/panel/panel'
import { AIDED_DESIGN, PANEL_CHART_INFO } from '@/views/panel/panel'
import html2canvas from 'html2canvasde'
export function deepCopy(target) {
@ -81,6 +81,9 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
componentStyle.chartInfo = (componentStyle.chartInfo || deepCopy(PANEL_CHART_INFO))
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
componentData.forEach((item, index) => {
if (item.component && item.component === 'de-date') {
if (item.options.attrs &&
@ -120,6 +123,10 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
item.commonBackground.enable = false
item.commonBackground.backgroundType = 'innerImage'
}
// picture component
if (item.component && item.component === 'Picture') {
item.style.adaptation = item.style.adaptation || 'adaptation'
}
})
// 初始化密度为最高密度
componentStyle.aidedDesign.matrixBase = 4

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

@ -27,8 +27,8 @@
:is="element.component"
v-if="element.type==='custom'"
:id="'component' + element.id"
class="component-custom"
ref="deOutWidget"
class="component-custom"
:out-style="element.style"
:element="element"
:in-draw="inDraw"
@ -105,31 +105,29 @@ export default {
'curCanvasScale'
]),
deSelectGridBg() {
if (this.element.component !== 'de-select-grid') return null;
const { backgroundColorSelect, color } = this.element.commonBackground;
if (this.element.component !== 'de-select-grid') return null
const { backgroundColorSelect, color } = this.element.commonBackground
return {
background: backgroundColorSelect ? color : '#fff',
background: backgroundColorSelect ? color : '#fff',
border: backgroundColorSelect ? 'none' : '1px solid #d7dae2'
}
},
isFilterComponent() {
return ['de-select', 'de-select-grid', 'de-date', "de-input-search", "de-number-range", "de-select-tree"].includes(this.element.component)
return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(this.element.component)
}
},
watch: {
'element.style': {
handler(val) {
this.handlerPositionChange(val);
this.handlerPositionChange(val)
},
deep: true,
immediate: true
}
},
mounted() {
// this.watchSize()
},
created() {
// console.log('aaaaaa')
const { horizontal, vertical, brColor, wordColor, innerBgColor } = this.element.style
this.$set(this.element.style, 'horizontal', horizontal || 'left')
this.$set(this.element.style, 'vertical', vertical || 'center')
@ -147,7 +145,7 @@ export default {
this.outsideStyle = {
flexWrap: 'wrap'
}
if (vertical !== 'top') {
if (vertical !== 'top' && this.element.component !== 'de-select-grid') {
this.titleStyle = null
this.outsideStyle = {
flexDirection: horizontal === 'right' ? 'row-reverse' : '',

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

@ -1,9 +1,10 @@
<template>
<el-select
v-if="element.options!== null && element.options.attrs!==null && show"
<component
:is="mode"
v-if="element.options!== null && element.options.attrs!==null && show "
ref="deSelect"
v-model="value"
:class-id="'visual-' + element.id + '-' + inDraw + '-' + inScreen"
:collapse-tags="showNumber"
:clearable="!element.options.attrs.multiple"
:multiple="element.options.attrs.multiple"
@ -11,14 +12,14 @@
:popper-append-to-body="inScreen"
:size="size"
:filterable="true"
class="de-select-tag"
popper-class="coustom-de-select"
:list="datas"
@change="changeValue"
@focus="setOptionWidth"
@blur="onBlur"
>
<el-option
v-for="item in datas"
v-for="item in templateDatas || datas"
:key="item[element.options.attrs.key]"
:style="{width:selectOptionWidth}"
:label="item[element.options.attrs.label]"
@ -26,17 +27,20 @@
>
<span :title="item[element.options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[element.options.attrs.label] }}</span>
</el-option>
</el-select>
</component>
</template>
<script>
import ElVisualSelect from '@/components/ElVisualSelect'
import { multFieldValues, linkMultFieldValues } from '@/api/dataset/dataset'
import bus from '@/utils/bus'
import { getLinkToken, getToken } from '@/utils/auth'
import customInput from '@/components/widget/DeWidget/customInput'
import { textSelectWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
export default {
components: { ElVisualSelect },
mixins: [customInput],
props: {
element: {
@ -65,6 +69,16 @@ export default {
}
},
computed: {
mode() {
let result = 'el-select'
if (this.element.options && this.element.options.attrs && this.element.options.attrs.visual) {
result = 'el-visual-select'
}
return result
},
templateDatas() {
return this.mode === 'el-visual-select' ? [] : null
},
operator() {
return this.element.options.attrs.multiple ? 'in' : 'eq'
},
@ -173,6 +187,11 @@ export default {
onBlur() {
this.onFocus = false
},
handleElTagStyle() {
setTimeout(() => {
textSelectWidget(this.$refs["deSelect"].$el, this.element.style)
}, 50)
},
initLoad() {
this.value = this.fillValueDerfault()
this.datas = []
@ -216,6 +235,7 @@ export default {
contentWidth += kid.offsetWidth
})
this.showNumber = contentWidth > ((this.$refs.deSelect.$refs.tags.clientWidth - 30) * 0.9)
this.handleElTagStyle()
})
},
@ -270,6 +290,7 @@ export default {
<style lang="scss">
.coustom-de-select {
background-color: var(--BgSelectColor, #FFFFFF) !important;
border-color: var(--BrSelectColor, #E4E7ED) !important;
// .popper__arrow::after{
// border-bottom-color: var(--BgSelectColor, #FFFFFF) !important;
// }
@ -292,20 +313,13 @@ export default {
background-color: rgb(245, 247, 250, .5);
}
}
.de-select-tag {
.el-select__tags {
.el-tag {
background-color: var(--BgSelectColor, #f4f4f5) !important;
border-color: var(--BrSelectColor, #e9e9eb) !important;
color: var(--SelectColor, #909399) !important;
i {
color: var(--SelectColor, #909399) !important;
}
}
.el-icon-close {
background-color: var(--BgSelectColor, #C0C4CC) !important;
}
.coustom-de-select.is-multiple {
.el-select-dropdown__item.selected {
background-color: rgb(245, 247, 250, .5) !important;
}
.el-select-dropdown__item.hover {
background-color: rgb(245, 247, 250, .5) !important;
}
}
</style>
</style>

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

@ -3,10 +3,10 @@
<div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
<div class="de-select-grid-search">
<el-input
ref="de-select-grid"
v-model="keyWord"
:placeholder="$t('deinputsearch.placeholder')"
:size="size"
ref="de-select-grid"
prefix-icon="el-icon-search"
clearable
/>
@ -78,7 +78,7 @@ export default {
show: true,
datas: [],
isIndeterminate: false,
checkAll: false,
checkAll: false
}
},
computed: {
@ -100,8 +100,8 @@ export default {
return this.$store.state.panel.panelInfo
},
cssArr() {
const { brColor, wordColor, innerBgColor } = this.element.style;
return { brColor, wordColor, innerBgColor }
const { brColor, wordColor, innerBgColor } = this.element.style
return { brColor, wordColor, innerBgColor }
}
},
watch: {
@ -137,6 +137,10 @@ export default {
method(param).then(res => {
this.datas = this.optionDatas(res.data)
this.changeInputStyle()
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.datas.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
}
}) || (this.element.options.value = '')
},
'element.options.attrs.multiple': function(value, old) {
@ -155,7 +159,7 @@ export default {
this.checkAll = this.value.length === this.datas.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
}
this.changeInputStyle();
this.changeInputStyle()
})
},
'element.options.attrs.sort': function(value, old) {
@ -176,11 +180,15 @@ export default {
method(param).then(res => {
this.datas = this.optionDatas(res.data)
this.changeInputStyle()
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.datas.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
}
}) || (this.element.options.value = '')
},
cssArr: {
handler: 'changeInputStyle',
deep: true
handler: 'changeInputStyle',
deep: true
},
keyWord: 'changeInputStyle'
},
@ -206,21 +214,21 @@ export default {
methods: {
changeInputStyle() {
if (!this.$parent.handlerInputStyle) return;
if (!this.$parent.handlerInputStyle) return
this.$nextTick(() => {
this.handlerInputStyle(this.element.style)
this.handlerInputStyle(this.element.style)
})
},
handlerInputStyle(newValue) {
let nodeCache = '';
let nodeCache = ''
if (!this.$refs['de-select-grid']) return
styleAttrs.forEach(ele => {
if (!nodeCache) {
nodeCache = this.$refs['de-select-grid'].$el.querySelector('.el-input__inner')
}
nodeCache.style[attrsMap[ele]] = newValue[ele];
this.textSelectGridWidget(this.$el, ele, newValue[ele])
})
styleAttrs.forEach(ele => {
if (!nodeCache) {
nodeCache = this.$refs['de-select-grid'].$el.querySelector('.el-input__inner')
}
nodeCache.style[attrsMap[ele]] = newValue[ele]
this.textSelectGridWidget(this.$el, ele, newValue[ele])
})
},
textSelectGridWidget: textSelectGridWidget,
initLoad() {

9
frontend/src/components/widget/DeWidget/DeSelectTree.vue
View File

@ -16,6 +16,7 @@
@check="changeCheckNode"
@select-clear="selectClear"
@onFoucs="onFoucs"
@treeCheckChange="change"
/>
</template>
@ -26,6 +27,7 @@ import bus from '@/utils/bus'
import { getLinkToken, getToken } from '@/utils/auth'
import ElTreeSelect from '@/components/ElTreeSelect'
import customInput from '@/components/widget/DeWidget/customInput'
import { textSelectWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
export default {
components: { ElTreeSelect },
@ -217,6 +219,12 @@ export default {
this.handleCoustomStyle()
})
},
change() {
setTimeout(() => {
console.log(123, this.$refs.deSelectTree.$refs.select.$el);
textSelectWidget(this.$refs.deSelectTree.$refs.select.$el, this.element.style)
}, 50)
},
selectClear() {
this.changeValue(this.value)
},
@ -366,6 +374,7 @@ export default {
<style lang="scss">
.test-class-wrap {
background: var(--BgSelectTreeColor, #FFFFFF) !important;
border-color: var(--BrSelectTreeColor, #E4E7ED) !important;
.popper__arrow,
.popper__arrow::after {

8
frontend/src/components/widget/DeWidget/TitlePostion.vue
View File

@ -9,7 +9,7 @@
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="styleInfo.horizontal" size="mini">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button :disabled="styleInfo.vertical === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button :disabled="styleInfo.vertical === 'center' && this.elementType !== 'de-select-grid'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
@ -40,7 +40,11 @@ export default {
showVertical: {
type: Boolean,
default: false
}
},
elementType: {
type: String,
default: ''
},
}
}

16
frontend/src/components/widget/DeWidget/inputStyleMixin.js
View File

@ -26,11 +26,27 @@ export default {
},
deep: true
},
multiple: {
handler() {
if (!['de-select-tree', 'de-select'].includes(this.element.component)) return;
const time = setTimeout(() => {
clearTimeout(time)
this.typeTransform().forEach(ele => {
this.handlerInputStyle(ele, this.cssArr)
})
}, 100)
},
deep: true
}
},
computed: {
cssArr() {
const { brColor, wordColor, innerBgColor } = this.element.style;
return { brColor, wordColor, innerBgColor }
},
multiple() {
const { multiple = false } = this.element.options.attrs
return multiple;
}
},
mounted() {

38
frontend/src/components/widget/DeWidget/serviceNameFn.js
View File

@ -37,10 +37,48 @@ function textSelectGridWidget (nodeCache, name, value) {
}
}
}
function textSelectTreeWidget(nodeCache, style) {
textSelectWidget(nodeCache, style)
}
function textSelectWidget(nodeCache, style) {
let elTag = nodeCache.querySelectorAll('.el-tag.el-tag--info')
if (elTag.length) {
elTag.forEach(item => {
item.style.flexWrap = 'wrap'
item.style.padding = '0'
const textNode = item.querySelector('.el-select__tags-text');
const closeNode = item.querySelector('.el-tag__close');
textNode.style.width = '100%';
item.style.position = 'relative';
textNode.style.padding = '0 20px 0 8px';
textNode.style.borderRadius = '3px';
if (closeNode) {
closeNode.style.position = 'absolute';
closeNode.style.top = '60%';
closeNode.style.transform = 'translateY(-50%)';
closeNode.style.right = '2px';
}
styleAttrs.forEach((ele) => {
if (ele !== 'brColor' && closeNode) {
closeNode.style[attrsMap[ele]] = style[ele];
} else {
item.style[attrsMap[ele]] = style[ele];
}
textNode.style[attrsMap[ele]] = style[ele];
})
});
}
}
export {
attrsMap,
styleAttrs,
timeDateRangeWidget,
textInputWidget,
textSelectGridWidget,
textSelectTreeWidget,
textSelectWidget
}

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

@ -19,7 +19,8 @@ const dialogPanel = {
value: 'id',
fieldId: '',
dragItems: [],
sort: {}
sort: {},
visual: false
},
value: '',
manualModify: false
@ -52,6 +53,7 @@ class TextSelectServiceImpl extends WidgetService {
super(options)
this.filterDialog = true
this.showSwitch = true
this.showVisual = true
}
initLeftPanel() {

3
frontend/src/icons/svg/icon-more.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 8.75L16.6667 8.75C16.7214 8.75 16.7756 8.76078 16.8261 8.78172C16.8767 8.80266 16.9226 8.83335 16.9613 8.87204C17 8.91073 17.0307 8.95666 17.0516 9.00721C17.0726 9.05777 17.0833 9.11195 17.0833 9.16667L17.0833 10.8333C17.0833 10.888 17.0726 10.9422 17.0516 10.9928C17.0307 11.0433 17 11.0893 16.9613 11.128C16.9226 11.1667 16.8767 11.1973 16.8261 11.2183C16.7756 11.2392 16.7214 11.25 16.6667 11.25L15 11.25C14.8895 11.25 14.7835 11.2061 14.7054 11.128C14.6272 11.0498 14.5833 10.9438 14.5833 10.8333L14.5833 9.16667C14.5833 9.11195 14.5941 9.05777 14.615 9.00721C14.636 8.95666 14.6667 8.91073 14.7054 8.87204C14.7441 8.83335 14.79 8.80266 14.8405 8.78172C14.8911 8.76078 14.9453 8.75 15 8.75V8.75ZM3.33333 8.75L5 8.75C5.05471 8.75 5.1089 8.76078 5.15945 8.78172C5.21 8.80266 5.25593 8.83335 5.29462 8.87204C5.33332 8.91073 5.36401 8.95666 5.38495 9.00722C5.40589 9.05777 5.41666 9.11195 5.41666 9.16667L5.41666 10.8333C5.41666 10.9438 5.37277 11.0498 5.29463 11.128C5.21648 11.2061 5.1105 11.25 5 11.25L3.33333 11.25C3.27861 11.25 3.22443 11.2392 3.17388 11.2183C3.12333 11.1973 3.07739 11.1667 3.0387 11.128C3.00001 11.0893 2.96932 11.0433 2.94838 10.9928C2.92744 10.9422 2.91666 10.8881 2.91666 10.8333L2.91666 9.16667C2.91666 9.11195 2.92744 9.05777 2.94838 9.00722C2.96932 8.95666 3.00001 8.91073 3.0387 8.87204C3.07739 8.83335 3.12333 8.80266 3.17388 8.78172C3.22443 8.76078 3.27861 8.75 3.33333 8.75V8.75ZM9.16666 8.75L10.8333 8.75C10.888 8.75 10.9422 8.76078 10.9928 8.78172C11.0433 8.80266 11.0893 8.83335 11.128 8.87204C11.1666 8.91073 11.1973 8.95666 11.2183 9.00721C11.2392 9.05777 11.25 9.11195 11.25 9.16667L11.25 10.8333C11.25 10.8881 11.2392 10.9422 11.2183 10.9928C11.1973 11.0433 11.1666 11.0893 11.128 11.128C11.0893 11.1667 11.0433 11.1973 10.9928 11.2183C10.9422 11.2392 10.888 11.25 10.8333 11.25L9.16666 11.25C9.05616 11.25 8.95018 11.2061 8.87204 11.128C8.7939 11.0498 8.75 10.9438 8.75 10.8333L8.75 9.16667C8.75 9.11195 8.76078 9.05777 8.78171 9.00722C8.80265 8.95666 8.83334 8.91073 8.87204 8.87204C8.91073 8.83335 8.95666 8.80266 9.00721 8.78172C9.05777 8.76078 9.11195 8.75 9.16666 8.75Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

3
frontend/src/icons/svg/icon-quicksetting.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 14.1667H17.7992C17.9849 14.1667 18.0523 14.1861 18.1202 14.2224C18.1881 14.2587 18.2414 14.312 18.2777 14.3799C18.314 14.4478 18.3333 14.5152 18.3333 14.7009V15.2993C18.3333 15.485 18.314 15.5524 18.2777 15.6203C18.2414 15.6882 18.1881 15.7414 18.1202 15.7778C18.0523 15.8141 17.9849 15.8334 17.7992 15.8334H13.75V17.7993C13.75 17.985 13.7307 18.0524 13.6943 18.1203C13.658 18.1882 13.6047 18.2414 13.5368 18.2778C13.4689 18.3141 13.4016 18.3334 13.2159 18.3334H12.6175C12.4317 18.3334 12.3644 18.3141 12.2965 18.2778C12.2286 18.2414 12.1753 18.1882 12.139 18.1203C12.1027 18.0524 12.0833 17.985 12.0833 17.7993V15.8334H2.20081C2.01508 15.8334 1.94773 15.8141 1.87983 15.7778C1.81192 15.7414 1.75863 15.6882 1.72232 15.6203C1.68601 15.5524 1.66667 15.485 1.66667 15.2993V14.7009C1.66667 14.5152 1.68601 14.4478 1.72232 14.3799C1.75863 14.312 1.81192 14.2587 1.87983 14.2224C1.94773 14.1861 2.01508 14.1667 2.20081 14.1667H12.0833V12.2009C12.0833 12.0152 12.1027 11.9478 12.139 11.8799C12.1753 11.812 12.2286 11.7587 12.2965 11.7224C12.3644 11.6861 12.4317 11.6667 12.6175 11.6667H13.2159C13.4016 11.6667 13.4689 11.6861 13.5368 11.7224C13.6047 11.7587 13.658 11.812 13.6943 11.8799C13.7307 11.9478 13.75 12.0152 13.75 12.2009V14.1667ZM6.25 4.16675V2.20089C6.25 2.01516 6.26934 1.94781 6.30565 1.87991C6.34197 1.812 6.39526 1.75871 6.46316 1.7224C6.53106 1.68609 6.59841 1.66675 6.78414 1.66675H7.38253C7.56826 1.66675 7.63561 1.68609 7.70351 1.7224C7.77141 1.75871 7.8247 1.812 7.86102 1.87991C7.89733 1.94781 7.91667 2.01516 7.91667 2.20089V4.16675H17.7992C17.9849 4.16675 18.0523 4.18609 18.1202 4.2224C18.1881 4.25871 18.2414 4.312 18.2777 4.37991C18.314 4.44781 18.3333 4.51516 18.3333 4.70089V5.29927C18.3333 5.48501 18.314 5.55236 18.2777 5.62026C18.2414 5.68816 18.1881 5.74145 18.1202 5.77776C18.0523 5.81408 17.9849 5.83341 17.7992 5.83341H7.91667V7.79927C7.91667 7.98501 7.89733 8.05236 7.86102 8.12026C7.8247 8.18816 7.77141 8.24145 7.70351 8.27776C7.63561 8.31408 7.56826 8.33342 7.38253 8.33342H6.78414C6.59841 8.33342 6.53106 8.31408 6.46316 8.27776C6.39526 8.24145 6.34197 8.18816 6.30565 8.12026C6.26934 8.05236 6.25 7.98501 6.25 7.79927V5.83341H2.20081C2.01508 5.83341 1.94773 5.81408 1.87983 5.77776C1.81192 5.74145 1.75863 5.68816 1.72232 5.62026C1.68601 5.55236 1.66667 5.48501 1.66667 5.29927V4.70089C1.66667 4.51516 1.68601 4.44781 1.72232 4.37991C1.75863 4.312 1.81192 4.25871 1.87983 4.2224C1.94773 4.18609 2.01508 4.16675 2.20081 4.16675H6.25Z" fill="#646A73"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

3
frontend/src/icons/svg/icon_clear_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 5.99996H3C2.44772 5.99996 2 6.44767 2 6.99996V14.6666C2 15.0348 2.29848 15.3333 2.66667 15.3333H13.3333C13.7015 15.3333 14 15.0348 14 14.6666V6.99996C14 6.44767 13.5523 5.99996 13 5.99996H10V1.33329C10 0.965103 9.70152 0.666626 9.33333 0.666626H6.66667C6.29848 0.666626 6 0.965103 6 1.33329V5.99996ZM7.33333 7.33329V1.99996H8.66667V7.33329H12.6667V9.33329H3.33333V7.33329H7.33333ZM3.33333 14V10.6666H12.6667V14H11.3333V12.6666H10V14H8.66667V12H7.33333V14H6V12.6666H4.66667V14H3.33333Z" fill="#646A73"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 618 B

11
frontend/src/icons/svg/icon_dialpad_outlined.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.66667 4.00004C3.40305 4.00004 4 3.40309 4 2.66671C4 1.93033 3.40305 1.33337 2.66667 1.33337C1.93029 1.33337 1.33334 1.93033 1.33334 2.66671C1.33334 3.40309 1.93029 4.00004 2.66667 4.00004Z" fill="#646A73"/>
<path d="M2.66667 9.33337C3.40305 9.33337 4 8.73642 4 8.00004C4 7.26366 3.40305 6.66671 2.66667 6.66671C1.93029 6.66671 1.33334 7.26366 1.33334 8.00004C1.33334 8.73642 1.93029 9.33337 2.66667 9.33337Z" fill="#646A73"/>
<path d="M4 13.3334C4 14.0698 3.40305 14.6667 2.66667 14.6667C1.93029 14.6667 1.33334 14.0698 1.33334 13.3334C1.33334 12.597 1.93029 12 2.66667 12C3.40305 12 4 12.597 4 13.3334Z" fill="#646A73"/>
<path d="M8 4.00004C8.73638 4.00004 9.33334 3.40309 9.33334 2.66671C9.33334 1.93033 8.73638 1.33337 8 1.33337C7.26362 1.33337 6.66667 1.93033 6.66667 2.66671C6.66667 3.40309 7.26362 4.00004 8 4.00004Z" fill="#646A73"/>
<path d="M9.33334 8.00004C9.33334 8.73642 8.73638 9.33337 8 9.33337C7.26362 9.33337 6.66667 8.73642 6.66667 8.00004C6.66667 7.26366 7.26362 6.66671 8 6.66671C8.73638 6.66671 9.33334 7.26366 9.33334 8.00004Z" fill="#646A73"/>
<path d="M8 14.6667C8.73638 14.6667 9.33334 14.0698 9.33334 13.3334C9.33334 12.597 8.73638 12 8 12C7.26362 12 6.66667 12.597 6.66667 13.3334C6.66667 14.0698 7.26362 14.6667 8 14.6667Z" fill="#646A73"/>
<path d="M13.3333 4.00004C14.0697 4.00004 14.6667 3.40309 14.6667 2.66671C14.6667 1.93033 14.0697 1.33337 13.3333 1.33337C12.597 1.33337 12 1.93033 12 2.66671C12 3.40309 12.597 4.00004 13.3333 4.00004Z" fill="#646A73"/>
<path d="M14.6667 8.00004C14.6667 8.73642 14.0697 9.33337 13.3333 9.33337C12.597 9.33337 12 8.73642 12 8.00004C12 7.26366 12.597 6.66671 13.3333 6.66671C14.0697 6.66671 14.6667 7.26366 14.6667 8.00004Z" fill="#646A73"/>
<path d="M13.3333 14.6667C14.0697 14.6667 14.6667 14.0698 14.6667 13.3334C14.6667 12.597 14.0697 12 13.3333 12C12.597 12 12 12.597 12 13.3334C12 14.0698 12.597 14.6667 13.3333 14.6667Z" fill="#646A73"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

4
frontend/src/icons/svg/icon_effects_outlined.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.43723 2.46185C2.64288 2.2562 2.94086 2.17264 3.22344 2.24138L8.3228 3.48176L12.2925 0.880912C12.545 0.71548 12.8672 0.699535 13.1348 0.839231C13.4024 0.978926 13.5736 1.25242 13.5822 1.55416L13.719 6.34135L17.5636 9.63677C17.7855 9.82697 17.8916 10.1195 17.8431 10.4077C17.7946 10.696 17.5987 10.9377 17.3267 11.0448L12.8025 12.8271L11.0202 17.3514C10.9131 17.6233 10.6713 17.8192 10.3831 17.8677C10.0949 17.9162 9.80236 17.8102 9.61215 17.5882L6.31673 13.7436L1.52955 13.6068C1.2278 13.5982 0.954309 13.4271 0.814613 13.1595C0.674918 12.8919 0.690863 12.5696 0.856295 12.3171L3.45715 8.34741L2.21676 3.24806C2.14802 2.96547 2.23158 2.66749 2.43723 2.46185ZM4.15978 4.1844L5.16203 8.30476C5.21654 8.52884 5.17575 8.7655 5.04936 8.95841L3.06746 11.9834L6.73313 12.0881C6.96801 12.0949 7.18913 12.2004 7.34205 12.3788L9.97683 15.4527L11.3846 11.8791C11.4693 11.6641 11.6395 11.4939 11.8545 11.4092L15.4281 10.0014L12.3542 7.36666C12.1758 7.21375 12.0702 6.99262 12.0635 6.75775L11.9588 3.09208L8.93379 5.07398C8.74088 5.20036 8.50423 5.24116 8.28014 5.18665L4.15978 4.1844Z" fill="#1F2329"/>
<path d="M13.6479 14.851L17.4634 18.6665C17.6261 18.8293 17.8899 18.8293 18.0527 18.6665L18.6419 18.0773C18.8046 17.9146 18.8046 17.6507 18.6419 17.488L14.8264 13.6725L13.981 14.0056L13.6479 14.851Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
frontend/src/icons/svg/icon_left_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.36341 10.0001L13.1398 16.7765C13.3026 16.9392 13.3026 17.2031 13.1398 17.3658L12.5506 17.955C12.3879 18.1178 12.1241 18.1178 11.9613 17.955L4.59564 10.5893C4.2702 10.2639 4.2702 9.73627 4.59564 9.41083L11.9613 2.04513C12.1241 1.88242 12.3879 1.88242 12.5506 2.04513L13.1398 2.63439C13.3026 2.79711 13.3026 3.06093 13.1398 3.22365L6.36341 10.0001Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 480 B

3
frontend/src/icons/svg/icon_magnify_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.1518 11.5968C7.31452 11.4341 7.57834 11.4341 7.74106 11.5968L8.33031 12.186C8.49303 12.3487 8.49303 12.6126 8.33031 12.7753L4.99587 16.1086H7.36621C7.59633 16.1086 7.78288 16.2952 7.78288 16.5253V17.3586C7.78288 17.5887 7.59633 17.7753 7.36621 17.7753H3.05555C2.82544 17.7753 2.6171 17.682 2.4663 17.5312C2.3155 17.3804 2.22222 17.1721 2.22222 16.9419V12.6421C2.22222 12.412 2.40877 12.2255 2.63889 12.2255H3.47222C3.70234 12.2255 3.88889 12.412 3.88889 12.6421V14.8586L7.1518 11.5968ZM16.9367 2.22217C17.1668 2.22217 17.3751 2.31544 17.5259 2.46625C17.6767 2.61705 17.77 2.82538 17.77 3.0555V7.35531C17.77 7.58543 17.5835 7.77198 17.3533 7.77198H16.52C16.2899 7.77198 16.1033 7.58543 16.1033 7.35531V5.13888L12.8404 8.40068C12.6777 8.5634 12.4139 8.5634 12.2512 8.40068L11.6619 7.81142C11.4992 7.6487 11.4992 7.38489 11.6619 7.22217L14.9964 3.88883H12.626C12.3959 3.88883 12.2094 3.70229 12.2094 3.47217V2.63883C12.2094 2.40872 12.3959 2.22217 12.626 2.22217H16.9367Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
frontend/src/icons/svg/icon_moments-categories_outlined.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.17896 1.78051L14.8914 6.05207C15.0972 6.18305 15.0972 6.48353 14.8914 6.61451L8.17896 10.8861C8.06977 10.9556 7.93023 10.9556 7.82104 10.8861L1.10858 6.61451C0.902751 6.48353 0.90275 6.18305 1.10858 6.05207L7.82104 1.78051C7.93023 1.71102 8.06977 1.71102 8.17896 1.78051ZM3.15017 6.33329L8 9.41954L12.8498 6.33329L8 3.24704L3.15017 6.33329Z" fill="#646A73"/>
<path d="M1.73096 9.25737C1.57401 9.16114 1.36878 9.21035 1.27255 9.3673L0.924074 9.93564C0.827845 10.0926 0.877063 10.2978 1.03401 10.394L7.13744 14.1363C7.56569 14.3989 8.10095 14.3989 8.52919 14.1363L14.6326 10.394C14.7896 10.2978 14.8388 10.0926 14.7426 9.93564L14.3941 9.3673C14.2979 9.21035 14.0926 9.16114 13.9357 9.25737L7.92044 12.9456C7.86698 12.9784 7.79965 12.9784 7.7462 12.9456L1.73096 9.25737Z" fill="#646A73"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 901 B

3
frontend/src/icons/svg/icon_pc_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3333 1.33325H1.66667C1.29848 1.33325 1 1.63173 1 1.99992V11.3333C1 11.7014 1.29848 11.9999 1.66667 11.9999H14.3333C14.7015 11.9999 15 11.7014 15 11.3333V1.99992C15 1.63173 14.7015 1.33325 14.3333 1.33325ZM2.33333 8.66659V2.66659H13.6667V8.66659H2.33333ZM2.33333 9.99992H13.6667V10.6666H2.33333V9.99992ZM4.66667 13.3333H11.3333V14.6666H4.66667V13.3333Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 486 B

5
frontend/src/icons/svg/icon_phone_outlined.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66666 3.66667H9.33332V5H6.66666V3.66667Z" fill="#1F2329"/>
<path d="M8.99999 11H6.99999V12.3333H8.99999V11Z" fill="#1F2329"/>
<path d="M3.33332 1C2.96513 1 2.66666 1.29848 2.66666 1.66667V14.3333C2.66666 14.7015 2.96513 15 3.33332 15H12.6667C13.0348 15 13.3333 14.7015 13.3333 14.3333V1.66667C13.3333 1.29848 13.0348 1 12.6667 1H3.33332ZM3.99999 2.33333H12V13.6667H3.99999V2.33333Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 515 B

3
frontend/src/icons/svg/icon_redo_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0036 1.80702L14.272 5.07542C14.4108 5.21428 14.4108 5.4394 14.272 5.57826L10.6893 9.16093C10.5505 9.29978 10.3253 9.29978 10.1865 9.16093L9.7465 8.72095C9.60765 8.5821 9.60765 8.35698 9.7465 8.21812L12.1858 5.77755L6.44444 5.77783C4.60349 5.77783 3.1111 7.27021 3.1111 9.11116C3.1111 10.9521 4.60349 12.4445 6.44444 12.4445H8.97777C9.17414 12.4445 9.33333 12.6037 9.33333 12.8V13.4223C9.33333 13.6186 9.17414 13.7778 8.97777 13.7778H6.22222C3.74827 13.6568 1.77777 11.6141 1.77777 9.11116C1.77777 6.6082 3.74827 4.56548 6.22259 4.44967L6.22222 4.44449L11.7555 4.44421L10.0608 2.74983C9.92192 2.61098 9.92192 2.38585 10.0608 2.247L10.5008 1.80702C10.6396 1.66817 10.8647 1.66817 11.0036 1.80702Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 829 B

3
frontend/src/icons/svg/icon_right_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8521 8.00004L5.43097 2.57889C5.30079 2.44872 5.30079 2.23766 5.43097 2.10749L5.90237 1.63608C6.03254 1.50591 6.2436 1.50591 6.37377 1.63608L12.2663 7.52864C12.5267 7.78899 12.5267 8.2111 12.2663 8.47145L6.37377 14.364C6.2436 14.4942 6.03254 14.4942 5.90237 14.364L5.43097 13.8926C5.30079 13.7624 5.30079 13.5514 5.43097 13.4212L10.8521 8.00004Z" fill="#8F959E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 479 B

3
frontend/src/icons/svg/icon_undo_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.43791 2.26348L2.3524 6.34898C2.17884 6.52255 2.17884 6.80395 2.3524 6.97752L6.83075 11.4559C7.00431 11.6294 7.28572 11.6294 7.45929 11.4559L8.00926 10.9059C8.18283 10.7323 8.18283 10.4509 8.00926 10.2774L4.9589 7.22552L12.2222 7.22219V7.22698C14.5234 7.22698 16.3889 9.09246 16.3889 11.3937C16.3889 13.6948 14.5234 15.5603 12.2222 15.5603V15.5555L8.9696 15.5597C8.72436 15.5601 8.52573 15.759 8.52573 16.0042V16.782C8.52573 16.9967 8.67808 17.1759 8.8806 17.2174L8.97075 17.2264L12 17.2214L12.2222 17.227C15.4439 17.227 18.0556 14.6153 18.0556 11.3937C18.0556 8.17199 15.4439 5.56032 12.2222 5.56032V5.55552L5.4989 5.55886L7.61642 3.44199C7.78999 3.26842 7.78999 2.98701 7.61642 2.81345L7.06645 2.26348C6.89288 2.08991 6.61148 2.08991 6.43791 2.26348Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 885 B

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

@ -1473,6 +1473,28 @@ export default {
sure_bt: 'Confirm'
},
panel: {
pic_adaptation: 'Adaptation',
pic_equiratio: 'Equiratio',
pic_original: 'Original',
pic_size: 'Image Size',
web_addr: 'Web Address',
stream_media_info: 'Stream Media Info',
video_info: 'Video Info',
title_position: 'Title Position',
tab_inner_style: 'Tab Inner Style',
data_format: 'Data Format',
border_color: 'Border Color',
theme_change_warn: 'Subject Change',
theme_change_tips: 'Changing the theme will overwrite the view related theme attributes. It is recommended to back up in advance. Do you want to continue the replacement?',
theme_color_change_warn: 'Theme Color Change',
theme_color_change_tips: 'Theme Color change will overwrite the original view properties',
theme_color: 'Theme Color',
theme_color_dark: 'Dark',
theme_color_light: 'Light',
refresh_frequency: 'Refresh Frequency',
card_color_matching: 'Card Color Matching',
table_color_matching: 'Table Color Matching',
background_color: 'Background Color',
more: 'More',
level: 'Level',
enlarge: 'Enlarge',
@ -1713,7 +1735,7 @@ export default {
web_url: 'Web URL',
video_add_tips: 'Please Add Video Info...',
web_add_tips: 'Please Add Web Url Info...',
panel_view_result_show: 'View Result Show',
panel_view_result_show: 'View Result',
panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000',
timeout_refresh: 'Timeout，Will Refresh...',
mobile_layout: 'Mobile Layout',

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

@ -666,9 +666,9 @@ export default {
cas_reset: 'CAS切換回默認登錄方式訪問API：'
},
chart: {
view_reset: '视图重置',
view_reset_tips: '放弃对视图的修改？',
export_img: '导出图片',
view_reset: '視圖重置',
view_reset_tips: '放棄對視圖的修改？',
export_img: '導出圖片',
title_repeat: '當前標題已存在',
save_snapshot: '保存縮略圖',
datalist: '視圖',
@ -1271,7 +1271,7 @@ export default {
exec: '執行一次',
confirm_exec: '手動觸發執行？',
change_success: '狀態切換成功',
excel_replace_msg: '可能會影響計算欄位、自定義數据集、關聯數据集、儀錶板等，確認替換？',
excel_replace_msg: '可能會影響計算欄位、自定義數據集、關聯數據集、儀錶板等，確認替換？',
effect_ext_field: '會影響計算欄位'
},
field_group_type: '分類',
@ -1474,10 +1474,32 @@ export default {
sure_bt: '確定'
},
panel: {
pic_adaptation: '适应组件',
pic_equiratio: '等比适应',
pic_original: '原始尺寸',
pic_size: '图片尺寸',
web_addr: '网页地址',
stream_media_info: '流媒体信息',
video_info: '视频信息',
title_position: '标题位置',
tab_inner_style: 'tab内部样式',
data_format: '日期格式',
border_color: '边框颜色',
theme_change_warn: '主題更換',
theme_change_tips: '更換主題將會覆蓋視圖相關主題屬性建議提前備份,是否繼續更換？',
theme_color_change_warn: '主題色更換',
theme_color_change_tips: '主題色變更將會覆蓋原有視圖屬性',
theme_color: '主題色',
theme_color_dark: '深色',
theme_color_light: '淺色',
refresh_frequency: '刷新頻率',
card_color_matching: '卡片配色',
table_color_matching: '表格配色',
background_color: '背景顏色',
more: '更多',
level: '层级',
level: '層級',
enlarge: '放大',
panel_style: '仪表板样式',
panel_style: '儀表板樣式',
multiplexing: '復用',
panel_off: '儀表板已下架',
batch_opt: '批量操作',
@ -1714,7 +1736,7 @@ export default {
web_url: '網頁地址',
video_add_tips: '請點擊添加配置視頻信息...',
web_add_tips: '請點擊添加網頁信息...',
panel_view_result_show: '視圖結果展示',
panel_view_result_show: '視圖結果',
panel_view_result_tips: '選擇儀錶闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
timeout_refresh: '請求超時，稍後刷新...',
mobile_layout: '移動端佈局',
@ -1927,7 +1949,7 @@ export default {
placeholder: '請選擇'
},
detextselectTree: {
label: '下拉树',
label: '下拉樹',
placeholder: '請選擇'
},
detextgridselect: {

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

@ -1481,6 +1481,28 @@ export default {
sure_bt: '确定'
},
panel: {
pic_adaptation: '适应组件',
pic_equiratio: '等比适应',
pic_original: '原始尺寸',
pic_size: '图片尺寸',
web_addr: '网页地址',
stream_media_info: '流媒体信息',
video_info: '视频信息',
title_position: '标题位置',
tab_inner_style: 'tab内部样式',
data_format: '日期格式',
border_color: '边框颜色',
theme_change_warn: '主题更换',
theme_change_tips: '更换主题将会覆盖视图相关主题属性建议提前备份,是否继续更换？',
theme_color_change_warn: '主题色更换',
theme_color_change_tips: '主题色变更将会覆盖原有视图属性',
theme_color: '主题色',
theme_color_dark: '深色',
theme_color_light: '浅色',
refresh_frequency: '刷新频率',
card_color_matching: '卡片配色',
table_color_matching: '表格配色',
background_color: '背景颜色',
more: '更多',
level: '层级',
enlarge: '放大',
@ -1723,7 +1745,7 @@ export default {
web_url: '网页地址',
video_add_tips: '请点击添加配置视频信息...',
web_add_tips: '请点击添加网页信息...',
panel_view_result_show: '视图结果展示',
panel_view_result_show: '视图结果',
panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000',
timeout_refresh: '请求超时，稍后刷新...',
mobile_layout: '移动端布局',

1
frontend/src/store/modules/user.js
View File

@ -140,7 +140,6 @@ const actions = {
const method = param && param.casEnable ? deLogout : logout
return new Promise((resolve, reject) => {
method(state.token).then(res => {
debugger
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')

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

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe777;</span>
<div class="name">italic</div>
<div class="code-name">&amp;#xe777;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">箭头</div>
@ -642,9 +648,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1655262548061') format('woff2'),
url('iconfont.woff?t=1655262548061') format('woff'),
url('iconfont.ttf?t=1655262548061') format('truetype');
src: url('iconfont.woff2?t=1655779264671') format('woff2'),
url('iconfont.woff?t=1655779264671') format('woff'),
url('iconfont.ttf?t=1655779264671') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -670,6 +676,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-italic"></span>
<div class="name">
italic
</div>
<div class="code-name">.icon-italic
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou"></span>
<div class="name">
@ -1552,6 +1567,14 @@
<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-italic"></use>
</svg>
<div class="name">italic</div>
<div class="code-name">#icon-italic</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou"></use>

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

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1655262548061') format('woff2'),
url('iconfont.woff?t=1655262548061') format('woff'),
url('iconfont.ttf?t=1655262548061') format('truetype');
src: url('iconfont.woff2?t=1655779264671') format('woff2'),
url('iconfont.woff?t=1655779264671') format('woff'),
url('iconfont.ttf?t=1655779264671') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-italic:before {
content: "\e777";
}
.icon-jiantou:before {
content: "\e622";
}

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

File diff suppressed because one or more lines are too long

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

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "2958392",
"name": "italic",
"font_class": "italic",
"unicode": "e777",
"unicode_decimal": 59255
},
{
"icon_id": "1115048",
"name": "箭头",

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

9
frontend/src/views/chart/chart/bar/bar.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '../util.js'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseBarOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseBarOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data
@ -77,6 +82,10 @@ export function horizontalBarOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -2,13 +2,27 @@ export const DEFAULT_COLOR_CASE = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
alpha: 100,
tableHeaderBgColor: '#e1eaff',
tableItemBgColor: '#ffffff',
tableHeaderBgColor: '#6D9A49',
tableItemBgColor: '#FFFFFF',
tableFontColor: '#000000',
tableStripe: true,
dimensionColor: '#000000',
quotaColor: '#000000',
tableBorderColor: '#cfdaf4',
quotaColor: '#4E81BB',
tableBorderColor: '#E6E7E4',
seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
}
export const DEFAULT_COLOR_CASE_DARK = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
alpha: 100,
tableHeaderBgColor: '#4E81BB',
tableItemBgColor: '#131E42',
tableFontColor: '#ffffff',
tableStripe: true,
dimensionColor: '#ffffff',
quotaColor: '#4E81BB',
tableBorderColor: '#CCCCCC',
seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
}
export const DEFAULT_SIZE = {
@ -88,7 +102,8 @@ export const DEFAULT_TOOLTIP = {
fontSize: '10',
color: '#909399'
},
formatter: ''
formatter: '',
backgroundColor: '#ffffff'
}
export const DEFAULT_TOTAL = {
row: {
@ -125,12 +140,23 @@ export const DEFAULT_TOTAL = {
export const DEFAULT_TITLE_STYLE = {
show: true,
fontSize: '18',
color: '#303133',
hPosition: 'center',
color: '#000000',
hPosition: 'left',
vPosition: 'top',
isItalic: false,
isBolder: false
isBolder: true
}
export const DEFAULT_TITLE_STYLE_DARK = {
show: true,
fontSize: '18',
color: '#FFFFFF',
hPosition: 'left',
vPosition: 'top',
isItalic: false,
isBolder: true
}
export const DEFAULT_LEGEND_STYLE = {
show: true,
hPosition: 'center',
@ -748,6 +774,7 @@ export const BASE_MAP = {
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
},
textStyle: {},
right: 0
},
series: [

6
frontend/src/views/chart/chart/common/common.js
View File

@ -306,3 +306,9 @@ const yExtFormatter = function(value) {
return valueFormatter(value, yExtAxisLabelFormatter)
}
}
export const reverseColor = colorValue => {
colorValue = '0x' + colorValue.replace(/#/g, '')
const str = '000000' + (0xFFFFFF - colorValue).toString(16)
return '#' + str.substring(str.length - 6, str.length)
}

6
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -11,7 +11,7 @@ export function getPadding(chart) {
// color,label,tooltip,axis,legend,background
export function getTheme(chart) {
const colors = []
let bgColor, labelFontsize, labelColor, tooltipColor, tooltipFontsize, legendColor, legendFontsize
let bgColor, labelFontsize, labelColor, tooltipColor, tooltipFontsize, tooltipBackgroundColor, legendColor, legendFontsize
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
@ -33,6 +33,7 @@ export function getTheme(chart) {
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
tooltipColor = t.textStyle.color
tooltipFontsize = t.textStyle.fontSize
tooltipBackgroundColor = t.backgroundColor
}
}
@ -84,7 +85,8 @@ export function getTheme(chart) {
domStyles: {
'g2-tooltip': {
color: tooltipColor,
fontSize: tooltipFontsize + 'px'
fontSize: tooltipFontsize + 'px',
background: tooltipBackgroundColor
}
}
},

5
frontend/src/views/chart/chart/funnel/funnel.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseFunnelOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseFunnelOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

5
frontend/src/views/chart/chart/line/line.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseLineOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseLineOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

14
frontend/src/views/chart/chart/map/map.js
View File

@ -1,7 +1,8 @@
// import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { componentStyle, reverseColor } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMapOption(chart_option, chart) {
export function baseMapOption(chart_option, chart, themeStyle) {
// 处理shape attr
let customAttr = {}
if (chart.customAttr) {
@ -21,6 +22,10 @@ export function baseMapOption(chart_option, chart) {
return text.replace(new RegExp('{a}', 'g'), a).replace(new RegExp('{b}', 'g'), b).replace(new RegExp('{c}', 'g'), c)
}
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data
@ -64,6 +69,11 @@ export function baseMapOption(chart_option, chart) {
chart_option.visualMap.inRange.color = customAttr.color.colors
chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
}
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
const reverseValue = reverseColor(panelColor)
chart_option.visualMap.textStyle = { color: reverseValue }
}
for (let i = 0; i < valueArr.length; i++) {
const y = valueArr[i]
y.name = chart.data.x[i]

5
frontend/src/views/chart/chart/mix/mix.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMixOption(chart_option, chart) {
// 处理shape attr
@ -16,6 +17,10 @@ export function baseMixOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

9
frontend/src/views/chart/chart/pie/pie.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function basePieOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function basePieOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data
@ -63,6 +68,10 @@ export function rosePieOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

5
frontend/src/views/chart/chart/radar/radar.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseRadarOption(chart_option, chart) {
// 处理shape attr
@ -20,6 +21,10 @@ export function baseRadarOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

5
frontend/src/views/chart/chart/scatter/scatter.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
let bubbleArray = []
let terminalType = 'pc'
@ -19,6 +20,10 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

5
frontend/src/views/chart/chart/treemap/treemap.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseTreemapOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseTreemapOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

11
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -120,6 +120,11 @@ export default {
type: Number,
required: false,
default: 1
},
themeStyle: {
type: Object,
required: false,
default: null
}
},
data() {
@ -279,7 +284,11 @@ export default {
this.$echarts.registerMap('MAP', geoJson)
// this.$echarts.getMap('MAP') || this.$echarts.registerMap('MAP', geoJson)
const base_json = JSON.parse(JSON.stringify(BASE_MAP))
const chart_option = baseMapOption(base_json, chart)
let themeStyle = null
if (this.themeStyle) {
themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
}
const chart_option = baseMapOption(base_json, chart, themeStyle)
this.myEcharts(chart_option)
const opt = this.myChart.getOption()
if (opt && opt.series) {

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

@ -79,7 +79,7 @@ export default {
textAlign: 'left',
fontStyle: 'normal',
fontWeight: 'normal',
background: hexColorToRGBA('#ffffff', 0)
background: ''
},
title_show: true,
antVRenderStatus: false

2
frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -87,7 +87,7 @@ export default {
textAlign: 'left',
fontStyle: 'normal',
fontWeight: 'normal',
background: hexColorToRGBA('#ffffff', 0)
background: ''
},
container_bg_class: {
background: hexColorToRGBA('#ffffff', 0)

4
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -361,6 +361,10 @@ export default {
},
changeBarSizeCase(modifyName) {
this.sizeForm['modifyName'] = modifyName
if (this.sizeForm.gaugeMax <= this.sizeForm.gaugeMin) {
this.$message.error(this.$t('chart.max_more_than_mix'))
return
}
this.$emit('onSizeChange', this.sizeForm)
},
showProperty(property) {

4
frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
View File

@ -552,6 +552,10 @@ export default {
},
changeBarSizeCase(modifyName) {
this.sizeForm['modifyName'] = modifyName
if (this.sizeForm.gaugeMax <= this.sizeForm.gaugeMin) {
this.$message.error(this.$t('chart.max_more_than_mix'))
return
}
this.$emit('onSizeChange', this.sizeForm)
},
showProperty(property) {

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

@ -20,6 +20,9 @@
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
<el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
<el-form-item v-show="showProperty('formatter')" class="form-item">
<span slot="label">
<span class="span-box">
@ -101,6 +104,8 @@ export default {
}
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
this.tooltipForm.backgroundColor = this.tooltipForm.backgroundColor ? this.tooltipForm.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
}
}
},

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

@ -14,6 +14,9 @@
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
<el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
</div>
</el-form>
</el-col>
@ -73,6 +76,8 @@ export default {
}
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
this.tooltipForm.backgroundColor = this.tooltipForm.backgroundColor ? this.tooltipForm.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
}
}
},

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

@ -315,6 +315,7 @@ import {
DEFAULT_TOTAL
} from '../chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { adaptCurTheme } from '@/components/canvas/utils/style'
export default {
name: 'Group',
@ -792,22 +793,26 @@ export default {
view.render = this.view.render
view.resultMode = 'custom'
view.resultCount = 1000
view.customAttr = JSON.stringify({
const customAttr = {
color: DEFAULT_COLOR_CASE,
tableColor: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP,
totalCfg: DEFAULT_TOTAL
})
view.customStyle = JSON.stringify({
}
const customStyle = {
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
split: DEFAULT_SPLIT
})
}
// 新建的视图应用当前主题
adaptCurTheme(customStyle, customAttr)
view.customAttr = JSON.stringify(customAttr)
view.customStyle = JSON.stringify(customStyle)
view.senior = JSON.stringify({
functionCfg: DEFAULT_FUNCTION_CFG,
assistLine: [],
@ -824,6 +829,7 @@ export default {
view.extBubble = JSON.stringify([])
view.viewFields = JSON.stringify([])
this.setChartDefaultOptions(view)
const _this = this
post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => {
this.closeCreateChart()

41
frontend/src/views/chart/view/CalcChartFieldEdit.vue
View File

@ -11,7 +11,17 @@
<el-col :span="14" style="height: 100%">
<el-row>
<el-row v-show="mode === 'normal'">
<span>{{ $t('dataset.field_exp') }}</span>
<span>
{{ $t('dataset.field_exp') }}
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
表达式语法请遵循该数据源对应的数据库语法。
<br>
字段类型将使用原始类型，如有需要，请在表达式中自行转换。
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
<codemirror
ref="myCm"
v-model="fieldForm.originName"
@ -25,7 +35,15 @@
<el-row style="margin-top: 10px;">
<el-form ref="form" :model="fieldForm" size="mini" class="row-style">
<el-form-item>
<span style="width: 80px;font-size: 12px">{{ $t('dataset.data_type') }}</span>
<span style="width: 80px;font-size: 12px">
{{ $t('dataset.data_type') }}
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
若字段表达式中使用聚合函数，则字段不能设置为维度使用。
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
<el-radio-group v-model="fieldForm.groupType" size="mini">
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
@ -97,14 +115,14 @@
:title="item.name"
@click="insertFieldToCodeMirror('['+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.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon
v-if="item.deType === 2 || item.deType === 3"
v-if="item.deExtractType === 2 || item.deExtractType === 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.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
{{ item.name }}
</span>
</transition-group>
@ -127,14 +145,14 @@
:title="item.name"
@click="insertFieldToCodeMirror('['+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.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon
v-if="item.deType === 2 || item.deType === 3"
v-if="item.deExtractType === 2 || item.deExtractType === 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.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
<span>{{ item.name }}</span>
</span>
</transition-group>
@ -427,8 +445,7 @@ export default {
this.fieldForm.columnIndex = 0
this.fieldForm.chartId = this.param.id
}
this.fieldForm.originName = this.setNameIdTrans('name', 'id', originName)
post('/chart/field/save/' + this.panelInfo.id, this.fieldForm).then(response => {
post('/chart/field/save/' + this.panelInfo.id, { ...this.fieldForm, originName: this.setNameIdTrans('name', 'id', originName) }).then(response => {
this.closeCalcField()
})
},

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

@ -765,6 +765,7 @@
:obj="{chart}"
:chart-id="chart.id"
:chart="chart"
:theme-style="curComponent.commonBackground"
class="chart-class"
@onChartClick="chartClick"
/>
@ -774,6 +775,7 @@
:chart-id="chart.id"
:chart="chart"
class="chart-class"
:theme-style="curComponent.commonBackground"
@onChartClick="chartClick"
/>
<chart-component-g2
@ -1075,7 +1077,6 @@ import { pluginTypes } from '@/api/chart/chart'
import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
import ChartStyle from '@/views/chart/view/ChartStyle'
import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
import { delGroup } from '@/api/panel/panel'
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
@ -2482,7 +2483,6 @@ export default {
reset() {
const _this = this
this.$confirm(this.$t('chart.view_reset_tips'), this.$t('chart.view_reset'), {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
@ -2664,12 +2664,12 @@ export default {
background-color: #f7f8fa;
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 75px);
height: calc(100vh - 96px);
}
.view-panel-Mask {
display: flex;
height: calc(100vh - 60px);
height: calc(100vh - 80px);
background-color: rgba(92,94,97, 0.7);
position:absolute;
top:0px;
@ -2828,7 +2828,7 @@ span {
}
.attr-style {
height: calc(100vh - 56px - 60px - 40px - 40px);
height: calc(100vh - 76px - 60px - 40px - 40px);
}
.blackTheme .attr-style {

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

@ -141,7 +141,18 @@
<span v-if="scope.row.extField === 2" class="from-type-span">{{ $t('chart.calc_field') }}</span>
</template>
</el-table-column>
<el-table-column property="groupType" :label="$t('dataset.d_q_trans')" width="120">
<el-table-column property="groupType" width="120">
<template slot="header">
<span style="font-size: 12px;">
{{ $t('dataset.d_q_trans') }}
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
若字段表达式中使用聚合函数，则字段不能设置为维度使用。
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
</template>
<template slot-scope="scope">
<el-button
icon="el-icon-sort"
@ -284,7 +295,18 @@
<span v-if="scope.row.extField === 2" class="from-type-span">{{ $t('chart.calc_field') }}</span>
</template>
</el-table-column>
<el-table-column property="groupType" :label="$t('dataset.d_q_trans')" width="120">
<el-table-column property="groupType" width="120">
<template slot="header">
<span style="font-size: 12px;">
{{ $t('dataset.d_q_trans') }}
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
若字段表达式中使用聚合函数，则字段不能设置为维度使用。
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
</template>
<template slot-scope="scope">
<el-button
icon="el-icon-sort"

14
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -12,20 +12,6 @@
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class"
>
<el-row v-if="!batchOptStatus" class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<el-row>
<el-radio-group
v-model="view.stylePriority"
class="radio-span"
size="mini"
@change="calcStyle"
>
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-row>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse">

4
frontend/src/views/chart/view/ChartStyleBatchSet.vue
View File

@ -121,11 +121,11 @@ export default {
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 35px);
height: calc(100vh - 56px);
}
.batch-opt-main{
height: calc(100vh - 35px);
height: calc(100vh - 56px);
overflow-y: hidden;
width: 100%;
border-left: 1px solid #E6E6E6

31
frontend/src/views/dataset/data/CalcFieldEdit.vue
View File

@ -11,7 +11,17 @@
<el-col :span="14" style="height: 100%">
<el-row>
<el-row>
<span>{{ $t('dataset.field_exp') }}</span>
<span>
{{ $t('dataset.field_exp') }}
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
表达式语法请遵循该数据源对应的数据库语法。
<br>
数据集中不支持聚合运算。
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
<codemirror
ref="myCm"
v-model="fieldForm.originName"
@ -361,12 +371,15 @@ export default {
pre[next[from]] = next[to]
return pre
}, {})
originName.match(/(?<=\[).+?(?=\])/g).forEach(ele => {
if (name2Auto) {
name2Auto.push(nameIdMap[ele])
}
name2Id = name2Id.replace(ele, nameIdMap[ele])
})
const on = originName.match(/(?<=\[).+?(?=\])/g)
if (on) {
on.forEach(ele => {
if (name2Auto) {
name2Auto.push(nameIdMap[ele])
}
name2Id = name2Id.replace(ele, nameIdMap[ele])
})
}
return name2Id
},
@ -382,8 +395,8 @@ export default {
this.fieldForm.tableId = this.param.id
this.fieldForm.columnIndex = this.tableFields.dimensionList.length + this.tableFields.quotaList.length
}
this.fieldForm.originName = this.setNameIdTrans('name', 'id', originName)
post('/dataset/field/save', this.fieldForm).then(response => {
post('/dataset/field/save', { ...this.fieldForm, originName: this.setNameIdTrans('name', 'id', originName) }).then(response => {
localStorage.setItem('reloadDsData', 'true')
this.closeCalcField()
})
},

4
frontend/src/views/dataset/data/FieldEdit.vue
View File

@ -346,8 +346,10 @@ export default {
post('/dataset/field/save', item).then(response => {
this.initField()
localStorage.setItem('reloadDsData', 'true')
}).catch(res => {
this.initField()
localStorage.setItem('reloadDsData', 'true')
})
},
@ -398,6 +400,7 @@ export default {
showClose: true
})
this.initField()
localStorage.setItem('reloadDsData', 'true')
})
}).catch(() => {
})
@ -411,6 +414,7 @@ export default {
}).then(() => {
this.isSyncField = true
post('/dataset/table/syncField/' + this.param.id, null).then(response => {
localStorage.setItem('reloadDsData', 'true')
setTimeout(() => {
this.isSyncField = false
this.initField()

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

@ -14,14 +14,22 @@
@show="showTab"
@hide="hideTab"
>
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus"/>
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
<!-- <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;"/>
<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">
<el-dropdown
v-if="table.type ==='excel'"
style="margin-right: 10px;"
size="small"
trigger="click"
@command="clickEditExcel"
>
<el-button size="mini">
{{ $t('dataset.edit_excel') }}
</el-button>
@ -45,53 +53,80 @@
</el-button>
</el-row>
</el-row>
<el-divider/>
<el-divider />
<el-tabs v-model="tabActive" @tab-click="tabClick">
<el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
<tab-data-preview :param="param" :table="table" :fields="fields" :data="data" :page="page"
:form="tableViewRowForm" @reSearch="reSearch"/>
<tab-data-preview
:param="param"
:table="table"
:fields="fields"
:data="data"
:page="page"
:form="tableViewRowForm"
@reSearch="reSearch"
/>
</el-tab-pane>
<el-tab-pane :label="$t('dataset.field_manage')" :lazy="true" name="fieldEdit">
<field-edit v-if="tabActive === 'fieldEdit'" :param="param" :table="table"/>
<field-edit v-if="tabActive === 'fieldEdit'" :param="param" :table="table" />
</el-tab-pane>
<el-tab-pane
v-if="!hideCustomDs && table.type !== 'union' && table.type !== 'custom' && !(table.type === 'sql' && table.mode === 0)"
:label="$t('dataset.join_view')" name="joinView">
<union-view :param="param" :table="table"/>
:label="$t('dataset.join_view')"
name="joinView"
>
<union-view :param="param" :table="table" />
</el-tab-pane>
<el-tab-pane
v-if="table.mode === 1 && (table.type === 'excel' || table.type === 'db' || table.type === 'sql' || table.type === 'api')"
:label="$t('dataset.update_info')" name="updateInfo">
<update-info v-if="tabActive=='updateInfo'" :param="param" :table="table"/>
:label="$t('dataset.update_info')"
name="updateInfo"
>
<update-info v-if="tabActive=='updateInfo'" :param="param" :table="table" />
</el-tab-pane>
<el-tab-pane v-if="isPluginLoaded && hasDataPermission('manage',param.privileges)" :lazy="true"
:label="$t('dataset.row_permissions')" name="rowPermissions">
<plugin-com v-if="isPluginLoaded && tabActive=='rowPermissions'" ref="RowPermissions"
component-name="RowPermissions" :obj="table"/>
<el-tab-pane
v-if="isPluginLoaded && hasDataPermission('manage',param.privileges)"
:lazy="true"
:label="$t('dataset.row_permissions')"
name="rowPermissions"
>
<plugin-com
v-if="isPluginLoaded && tabActive=='rowPermissions'"
ref="RowPermissions"
component-name="RowPermissions"
:obj="table"
/>
</el-tab-pane>
<el-tab-pane v-if="isPluginLoaded && hasDataPermission('manage',param.privileges)" :lazy="true"
:label="$t('dataset.column_permissions')" name="columnPermissions">
<plugin-com v-if="isPluginLoaded && tabActive=='columnPermissions'" ref="ColumnPermissions"
component-name="ColumnPermissions" :obj="table"/>
<el-tab-pane
v-if="isPluginLoaded && hasDataPermission('manage',param.privileges)"
:lazy="true"
:label="$t('dataset.column_permissions')"
name="columnPermissions"
>
<plugin-com
v-if="isPluginLoaded && tabActive=='columnPermissions'"
ref="ColumnPermissions"
component-name="ColumnPermissions"
:obj="table"
/>
</el-tab-pane>
</el-tabs>
</el-row>
</template>
<script>
import {post} from '@/api/dataset/dataset'
import { post } from '@/api/dataset/dataset'
import TabDataPreview from './TabDataPreview'
import UpdateInfo from './UpdateInfo'
import DatasetChartDetail from '../common/DatasetChartDetail'
import UnionView from './UnionView'
import FieldEdit from './FieldEdit'
import {pluginLoaded} from '@/api/user'
import { pluginLoaded } from '@/api/user'
import PluginCom from '@/views/system/plugin/PluginCom'
export default {
name: 'ViewTable',
components: {FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview, PluginCom},
components: { FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview, PluginCom },
props: {
param: {
type: Object,
@ -121,12 +156,12 @@ export default {
}
},
computed: {
hideCustomDs: function () {
hideCustomDs: function() {
return this.$store.getters.hideCustomDs
}
},
watch: {
'param': function () {
'param': function() {
this.tabActive = 'dataPreview'
this.initTable(this.param.id)
}
@ -168,7 +203,7 @@ export default {
this.table = response.data
this.initPreviewData(this.page)
}).catch(res => {
this.$emit('switchComponent', {name: ''})
this.$emit('switchComponent', { name: '' })
})
}
},
@ -202,25 +237,25 @@ export default {
},
edit() {
this.$emit('switchComponent', {name: 'FieldEdit', param: {table: this.table}})
this.$emit('switchComponent', { name: 'FieldEdit', param: { table: this.table }})
},
editSql() {
this.$emit('switchComponent', {
name: 'AddSQL',
param: {id: this.table.sceneId, tableId: this.table.id, table: this.table}
param: { id: this.table.sceneId, tableId: this.table.id, table: this.table }
})
},
editCustom() {
this.$emit('switchComponent', {
name: 'AddCustom',
param: {id: this.table.sceneId, tableId: this.table.id, table: this.table}
param: { id: this.table.sceneId, tableId: this.table.id, table: this.table }
})
},
editUnion() {
this.$emit('switchComponent', {
name: 'AddUnion',
param: {id: this.table.sceneId, tableId: this.table.id, table: this.table}
param: { id: this.table.sceneId, tableId: this.table.id, table: this.table }
})
},
@ -241,13 +276,13 @@ export default {
case '0':
this.$emit('switchComponent', {
name: 'AddExcel',
param: {id: this.table.sceneId, tableId: this.table.id, editType: 0, table: this.table}
param: { id: this.table.sceneId, tableId: this.table.id, editType: 0, table: this.table }
})
break
case '1':
this.$emit('switchComponent', {
name: 'AddExcel',
param: {id: this.table.sceneId, tableId: this.table.id, editType: 1, table: this.table}
param: { id: this.table.sceneId, tableId: this.table.id, editType: 1, table: this.table }
})
break
}
@ -273,7 +308,11 @@ export default {
tabClick() {
if (this.tabActive === 'dataPreview') {
this.initTable(this.param.id)
const reload = localStorage.getItem('reloadDsData')
if (reload === 'true') {
localStorage.setItem('reloadDsData', 'false')
this.initTable(this.param.id)
}
}
}
}

1
frontend/src/views/dataset/index.vue
View File

@ -49,6 +49,7 @@ export default {
},
methods: {
initDs() {
localStorage.setItem('reloadDsData', 'false')
checkCustomDs().then(res => {
this.$store.dispatch('dataset/setHideCustomDs', res.data)
})

187
frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
View File

@ -1,47 +1,50 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="250"
trigger="click"
>
<el-col>
<el-row>
<el-col :span="6">
<el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
</el-col>
<el-col :span="18">
<el-color-picker v-model="panel.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
<el-col :span="6">
<el-radio v-model="panel.backgroundType" label="image" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
</el-col>
<el-col :span="18">
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif"
class="avatar-uploader"
list-type="picture-card"
:http-request="upload"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }} <i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
<div style="width: 100%;">
<el-form ref="overallSettingForm" :model="overallSettingForm" size="mini">
<el-col style="padding-bottom: 10px;">
<el-row>
<el-col class="custom-item">
<el-radio v-model="panel.backgroundType" label="color" style="float: right" @change="onChangeType">
<span style="font-size: 12px">{{ $t('chart.color') }}</span>
</el-radio>
</el-col>
<el-col :span="10">
<el-color-picker
v-model="panel.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
@change="onChangeType"
/>
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
<el-col class="custom-item">
<el-radio v-model="panel.backgroundType" label="image" style="float: right" @change="onChangeType">
<span style="font-size: 12px">{{ $t('panel.photo') }}</span>
</el-radio>
</el-col>
<el-col :span="15">
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif"
class="avatar-uploader"
list-type="picture-card"
:http-request="upload"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
</el-col>
</el-form>
</div>
</template>
@ -61,8 +64,8 @@ export default {
dialogVisible: false,
uploadDisabled: false,
panel: null,
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
overallSettingForm: {}
}
},
computed: mapState([
@ -111,40 +114,62 @@ export default {
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.avatar-uploader {
margin-left: 10px;
}
.avatar-uploader ::v-deep .el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader ::v-deep .el-upload-list li {
width: 100px !important;
height: 60px !important;
}
.disabled ::v-deep .el-upload--picture-card {
display: none;
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.color-picker-custom {
margin-left: 10px;
cursor: pointer;
z-index: 1004;
}
.custom-item{
width: 70px;
}
</style>

73
frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div style="width: 100%">
<el-row>
<el-col class="custom-item el-form-item">
<el-checkbox v-model="componentStyleForm.backgroundColorSelect" style="margin-right: 10px;float: right" @change="themeChange('backgroundColorSelect')">
<span style="font-size: 12px">{{ $t('panel.color') }}</span>
</el-checkbox>
</el-col>
<el-col :span="10">
<el-color-picker v-model="componentStyleForm.color" :disabled="!componentStyleForm.backgroundColorSelect" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('color')" />
</el-col>
</el-row>
<el-form ref="componentStyleForm" :model="componentStyleForm" label-width="70px" size="mini">
<el-form-item :label="$t('panel.opacity')" class="form-item">
<el-slider v-model="componentStyleForm.alpha" :disabled="!componentStyleForm.backgroundColorSelect" show-input :show-input-controls="false" input-size="mini" @change="themeChange('alpha')" />
</el-form-item>
<el-form-item :label="$t('panel.board_radio')" class="form-item">
<el-slider v-model="componentStyleForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="themeChange('borderRadius')" />
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import bus from '@/utils/bus'
export default {
name: 'ComponentStyle',
data() {
return {
predefineColors: COLOR_PANEL,
componentStyleForm: {}
}
},
computed: mapState([
'canvasStyleData',
'componentData'
]),
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
methods: {
initForm() {
this.componentStyleForm = this.canvasStyleData.chartInfo.chartCommonStyle
},
themeChange(modifyName) {
this.componentData.forEach((item, index) => {
item.commonBackground[modifyName] = this.componentStyleForm[modifyName]
})
this.$store.commit('recordSnapshot')
}
}
}
</script>
<style scoped>
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.custom-item{
width: 70px;
}
.custom-item-value{
width: calc(100% - 70px);;
}
</style>

131
frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="filterForm" :model="filterForm" label-width="80px" size="mini">
<div>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="filterForm.horizontal" size="mini" @change="themeChange('horizontal')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button :disabled="filterForm.vertical === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="filterForm.vertical" size="mini" @change="themeChange('vertical')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button :disabled="filterForm.horizontal === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="'标题颜色'" class="form-item">
<el-color-picker v-model="filterForm.color" class="color-picker-style" :predefine="predefineColors" @change="themeChange('color')" />
</el-form-item>
<el-divider>输入框样式(颜色)</el-divider>
<el-row style="height: 40px;overflow: hidden;">
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
边框
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.brColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('brColor')" />
</el-col>
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
文字
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.wordColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('wordColor')" />
</el-col>
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
背景
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.innerBgColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('innerBgColor')" />
</el-col>
</el-row>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { adaptCurThemeFilterStyleAll } from '@/components/canvas/utils/style'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default {
name: 'FilterStyleSelector',
props: {
},
data() {
return {
filterForm: {},
fontSize: [],
isSetting: false,
predefineColors: COLOR_PANEL
}
},
computed: {
...mapState([
'canvasStyleData'
])
},
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
mounted() {
},
methods: {
initForm() {
this.filterForm = this.canvasStyleData.chartInfo.filterStyle
},
themeChange(styleKey) {
adaptCurThemeFilterStyleAll(styleKey)
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.el-divider__text{
font-size: 8px;
font-weight: 400;
color: rgb(144, 147, 153);
}
</style>

166
frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="overallSettingForm" :model="overallSettingForm" label-width="70px" size="mini">
<el-form-item :label="$t('panel.theme_color')" class="form-item">
<el-radio-group v-model="overallSettingForm.panel.themeColor" @change="themeChange('themeColor')">
<el-radio label="light">{{ $t('panel.theme_color_light') }}</el-radio>
<el-radio label="dark">{{ $t('panel.theme_color_dark') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.component_gap')" class="form-item">
<el-radio-group v-model="overallSettingForm.panel.gap" size="mini" @change="themeChange()">
<el-radio label="yes">{{ $t('panel.gap') }}</el-radio>
<el-radio label="no">{{ $t('panel.no_gap') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
<el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
<el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit margin-left4" @change="themeChange">
<el-option :label="$t('panel.minute')" :value="'minute'" />
<el-option :label="$t('panel.second')" :value="'second'" />
</el-select>
<el-checkbox v-model="overallSettingForm.refreshViewLoading" class="el-input-refresh-loading" @change="themeChange">提示</el-checkbox>
</el-form-item>
<el-form-item :label="$t('panel.panel_view_result_show')" class="form-item form-item-result">
<div style="width: 100%;">
<el-row>
<el-col :span="16">
<el-radio-group v-model="overallSettingForm.panel.resultMode" class="radio-span" size="mini" @change="themeChange">
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
<el-radio label="custom">
<span>{{ $t('panel.panel') }} </span>
</el-radio>
</el-radio-group>
</el-col>
<el-col :span="8" class="slider-area">
<el-slider
v-model="overallSettingForm.panel.resultCount"
:disabled="overallSettingForm.panel.resultMode==='all'"
style="margin-left: 5px"
show-input
:show-input-controls="false"
:show-tooltip="false"
input-size="mini"
:min="1"
:max="10000"
@change="themeChange"
/>
</el-col>
</el-row>
</div>
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { mapState } from 'vuex'
import {
adaptCurThemeCommonStyleAll,
DARK_THEME_COMPONENT_BACKGROUND,
DARK_THEME_PANEL_BACKGROUND,
LIGHT_THEME_COMPONENT_BACKGROUND,
LIGHT_THEME_PANEL_BACKGROUND
} from '@/components/canvas/utils/style'
import bus from '@/utils/bus'
import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'OverallSetting',
data() {
return {
colorIndex: 0,
overallSettingForm: {}
}
},
watch: {
},
computed: {
...mapState([
'canvasStyleData'
])
},
created() {
this.initForm()
},
methods: {
initForm() {
this.overallSettingForm = this.canvasStyleData
},
themeChange(modifyName) {
if (modifyName === 'themeColor') {
// 主题变更
this.canvasStyleData.chartInfo.chartCommonStyle.backgroundColorSelect = true
this.canvasStyleData.panel.backgroundType = 'color'
if (this.overallSettingForm.panel.themeColor === 'light') {
this.canvasStyleData.panel.color = deepCopy(LIGHT_THEME_PANEL_BACKGROUND)
this.canvasStyleData.chartInfo.chartCommonStyle.color = deepCopy(LIGHT_THEME_COMPONENT_BACKGROUND)
this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE)
this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE)
this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE)
} else {
this.canvasStyleData.panel.color = deepCopy(DARK_THEME_PANEL_BACKGROUND)
this.canvasStyleData.chartInfo.chartCommonStyle.color = deepCopy(DARK_THEME_COMPONENT_BACKGROUND)
this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE_DARK)
this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE_DARK)
this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE_DARK)
}
adaptCurThemeCommonStyleAll()
bus.$emit('onThemeColorChange')
}
this.$store.commit('recordSnapshot')
}
}
}
</script>
<style scoped>
.el-input-refresh-time{
width: 55px!important;
}
.el-input-refresh-unit{
width: 55px!important;
}
.el-input-refresh-loading{
margin-left: 4px;
font-size: 12px;
}
.margin-left4{
margin-left: 4px;
}
::v-deep .el-input__inner{
padding: 0px 5px!important;
}
::v-deep .el-slider__input{
width: 50px;
margin-top: 0px;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.slider-area ::v-deep .el-slider__runway {
display: none;
}
.result-count {
width: 80px;
}
.form-item-result ::v-deep .el-radio{
margin-right: 5px;
}
</style>

7
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
View File

@ -11,13 +11,6 @@
<el-form-item :label="'辅助网格'" class="form-item form-item-slider">
<el-checkbox v-model="aidedDesign.showGrid" size="mini" @change="onChangePanelStyle" />
</el-form-item>
<!-- <el-form-item :label="'矩阵密度'" class="form-item form-item-slider">-->
<!-- <el-radio-group v-model="aidedDesign.matrixBase" size="mini" @change="onChangePanelStyle">-->
<!-- <el-radio-button :label="1">普通</el-radio-button>-->
<!-- <el-radio-button :label="2">适中</el-radio-button>-->
<!-- <el-radio-button :label="4">密集</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">辅助设计 <i

353
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
View File

@ -1,86 +1,309 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<color-selector :chart="chart" :property-inner="propertyInner" @onColorChange="onColorChange" />
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
<div style="width: 100%">
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<div>
<el-form-item :label="$t('chart.color_case')" class="form-item">
<el-popover
placement="bottom"
width="400"
trigger="click"
>
<div style="padding: 6px 10px;">
<div>
<span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
<el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
</div>
<!--自定义配色方案-->
<div>
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label">{{ $t('chart.custom_case') }}</span>
<span>
<el-radio-group v-model="customColor" class="color-type">
<el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</el-radio>
</el-radio-group>
</span>
</div>
<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" :predefine="predefineColors" @change="switchColorCase" />
</span>
</div>
</div>
</div>
<div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
<span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</div>
</el-popover>
</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="changeColorCase('alpha')" />
</el-form-item>
<el-divider>{{ $t('panel.card_color_matching') }}</el-divider>
<el-form-item :label="$t('chart.quota_color')" class="form-item">
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('quotaColor')" />
</el-form-item>
<el-form-item :label="$t('chart.dimension_color')" class="form-item">
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('dimensionColor')" />
</el-form-item>
</div>
<el-divider>{{ $t('panel.table_color_matching') }}</el-divider>
<div>
<el-form-item :label="$t('chart.table_header_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderBgColor')" />
</el-form-item>
<el-form-item :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
</el-form-item>
<el-form-item :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
</el-form-item>
<el-form-item :label="$t('chart.table_border_color')" class="form-item">
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableBorderColor')" />
</el-form-item>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
import bus from "@/utils/bus";
export default {
components: { ColorSelector },
name: 'ColorSelector',
props: {
chart: {
type: Object,
required: true
},
sourceType: {
type: String,
default: 'view',
required: false
}
},
data() {
return {
propertyInner: [
'value',
'alpha'
]
colorCases: [
{
name: this.$t('chart.color_default'),
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
{
name: this.$t('chart.color_retro'),
value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_elegant'),
value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
},
{
name: this.$t('chart.color_future'),
value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
},
{
name: this.$t('chart.color_gradual'),
value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
},
{
name: this.$t('chart.color_simple'),
value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_business'),
value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
},
{
name: this.$t('chart.color_gentle'),
value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
},
{
name: this.$t('chart.color_technology'),
value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_light'),
value: 'light',
colors: ['#884898', '#808080', '#82ae46', '#00a3af', '#ef8b07', '#007bbb', '#9d775f', '#fae800', '#5f9b3c']
},
{
name: this.$t('chart.color_classical'),
value: 'classical',
colors: ['#007bbb', '#ffdb4f', '#dd4b4b', '#2ca9e1', '#ef8b07', '#4a488e', '#82ae46', '#dd4b4b', '#bb9581']
},
{
name: this.$t('chart.color_fresh'),
value: 'fresh',
colors: ['#5f9b3c', '#75c24b', '#83d65f', '#aacf53', '#c7dc68', '#d8e698', '#e0ebaf', '#bbc8e6', '#e5e5e5']
},
{
name: this.$t('chart.color_energy'),
value: 'energy',
colors: ['#ef8b07', '#2a83a2', '#f07474', '#c55784', '#274a78', '#7058a3', '#0095d9', '#75c24b', '#808080']
},
{
name: this.$t('chart.color_red'),
value: 'red',
colors: ['#ff0000', '#ef8b07', '#4c6cb3', '#f8e944', '#69821b', '#9c5ec3', '#00ccdf', '#f07474', '#bb9581']
},
{
name: this.$t('chart.color_fast'),
value: 'fast',
colors: ['#fae800', '#00c039', '#0482dc', '#bb9581', '#ff7701', '#9c5ec3', '#00ccdf', '#00c039', '#ff7701']
},
{
name: this.$t('chart.color_spiritual'),
value: 'spiritual',
colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
}
],
colorForm: {},
customColor: null,
colorIndex: 0,
predefineColors: COLOR_PANEL
}
},
computed: mapState([
'canvasStyleData'
]),
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
mounted() {
},
methods: {
onColorChange(colorForm) {
this.$emit('onColorChange', colorForm)
initForm() {
this.colorForm = this.canvasStyleData.chartInfo.chartColor
},
changeColorOption(modifyName = 'value') {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value
})
this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
// reset custom color
this.colorForm.seriesColors = []
this.changeColorCase(modifyName)
},
changeColorCase(modifyName) {
this.colorForm['modifyName'] = modifyName
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
},
switchColor(index) {
this.colorIndex = index
},
switchColorCase() {
this.colorForm.colors[this.colorIndex] = this.customColor
this.colorForm['modifyName'] = 'value'
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
},
resetCustomColor() {
this.changeColorOption()
},
switchCustomColor(index) {
this.colorForm.seriesColors[index].isCustom = true
this.switchColorCase()
}
}
}
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.color-label{
display: inline-block;
width: 60px;
}
.color-type>>>.el-radio__input{
display: none;
}
.el-radio{
margin:0 2px 0 0!important;
border: 1px solid transparent;
}
.el-radio>>>.el-radio__label{
padding-left: 0;
}
.el-radio.is-checked{
border: 1px solid #0a7be0;
}
.span-label {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
padding: 0 8px;
}
.custom-color-style {
height: 300px;
overflow-y: auto;
padding: 4px 12px;
border: 1px solid #e6e6e6;
}
.el-divider__text{
font-size: 8px;
font-weight: 400;
color: rgb(144, 147, 153);
}
</style>

106
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelRefreshTime.vue
View File

@ -1,106 +0,0 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="colorForm" label-width="110px" size="mini">
<el-form-item :label="'视图加载提示'" class="form-item form-item-slider">
<el-checkbox v-model="canvasStyleData.refreshViewLoading" @change="onChangePanelStyle" />
</el-form-item>
<el-form-item :label="'刷新时间单位'" class="form-item form-item-slider">
<el-radio-group v-model="canvasStyleData.refreshUnit" @change="onChangePanelStyle">
<el-radio label="second">秒</el-radio>
<el-radio label="minute">分</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="'刷新时间频率'" class="form-item form-item-slider">
<el-slider
v-model="canvasStyleData.refreshTime"
show-input
:show-input-controls="false"
input-size="mini"
:min="1"
:max="3600"
@change="onChangePanelStyle"
/>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i
class="el-icon-setting el-icon--right"
/></el-button>
</el-popover>
</div>
</div>
</template>
<script>
export default {
name: 'PanelRefreshTime',
props: {},
computed: {
canvasStyleData() {
return this.$store.state.canvasStyleData
}
},
created() {
},
methods: {
onChangePanelStyle() {
this.$store.state.styleChangeTimes++
}
}
}
</script>
<style scoped>
.avatar-uploader >>> .el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader >>> .el-upload-list li {
width: 100px !important;
height: 60px !important;
}
.disabled >>> .el-upload--picture-card {
display: none;
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider >>> .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item >>> .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
</style>

54
frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div style="width: 100%;">
<el-form ref="viewAttributeForm" :model="viewAttributeForm" label-width="70px" size="mini">background_color
<el-form-item :label="$t('panel.background_color')" class="form-item">
<el-color-picker v-model="viewAttributeForm.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="viewAttributeChange" />
</el-form-item>
<el-form-item :label="$t('panel.opacity')" class="form-item">
<el-slider v-model="viewAttributeForm.alpha" show-input :show-input-controls="false" input-size="mini" />
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'ViewAttribute',
data() {
return {
predefineColors: COLOR_PANEL,
viewAttributeForm: {
color: '#FFFFFF',
alpha: 100
}
}
},
computed: mapState([
'canvasStyleData'
]),
watch: {
// deep监听panel 如果改变 提交到 store
},
created() {
},
methods: {
viewAttributeChange() {
}
}
}
</script>
<style scoped>
.form-item>>>.el-form-item__label{
font-size: 12px;
}
</style>

67
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelViewResult.vue → frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
View File

@ -1,44 +1,35 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-row>
<el-col :span="16">
<el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
<el-radio label="custom">
<span>{{ $t('panel.panel') }} </span>
</el-radio>
</el-radio-group>
</el-col>
<el-col :span="8" class="slider-area">
<el-slider
v-model="panel.resultCount"
:disabled="panel.resultMode==='all'"
style="margin-left: 5px"
show-input
:show-input-controls="false"
:show-tooltip="false"
input-size="mini"
:min="1"
:max="10000"
@change="onChangePanelStyle"
/>
</el-col>
</el-row>
<el-row>
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips: {{ $t('panel.panel_view_result_tips') }}
</span>
</el-row>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.panel_view_result_show') }}<i
class="el-icon-setting el-icon--right"
/></el-button>
</el-popover>
<el-row>
<el-col :span="16">
<el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
<el-radio label="custom">
<span>{{ $t('panel.panel') }} </span>
</el-radio>
</el-radio-group>
</el-col>
<el-col :span="8" class="slider-area">
<el-slider
v-model="panel.resultCount"
:disabled="panel.resultMode==='all'"
style="margin-left: 5px"
show-input
:show-input-controls="false"
:show-tooltip="false"
input-size="mini"
:min="1"
:max="10000"
@change="onChangePanelStyle"
/>
</el-col>
</el-row>
<el-row>
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips: {{ $t('panel.panel_view_result_tips') }}
</span>
</el-row>
</div>
</div>
</template>

130
frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</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" :predefine="predefineColors" @change="changeTitleStyle('color')" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle('vPosition')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default {
name: 'TitleSelector',
props: {
},
data() {
return {
titleForm: {},
fontSize: [],
isSetting: false,
predefineColors: COLOR_PANEL
}
},
computed: mapState([
'canvasStyleData'
]),
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
mounted() {
this.init()
},
methods: {
initForm() {
this.titleForm = this.canvasStyleData.chartInfo.chartTitle
},
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeTitleStyle(modifyName) {
this.titleForm['modifyName'] = modifyName
this.$emit('onTextChange', this.titleForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style>

7
frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
View File

@ -81,6 +81,9 @@
import SubjectTemplateItem from './SubjectTemplateItem'
import { querySubjectWithGroup, saveOrUpdateSubject, deleteSubject } from '@/api/panel/panel'
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import { uuid } from 'vue-uuid'
export default {
name: 'Slider',
@ -138,8 +141,10 @@ export default {
})
},
saveSelfSubject() {
const canvasStyle = deepCopy(this.canvasStyleData)
canvasStyle.themeId = uuid.v1()
const request = {
details: JSON.stringify(this.canvasStyleData)
details: JSON.stringify(canvasStyle)
}
this.slidersLoading = true
saveOrUpdateSubject(request).then(response => {

83
frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
View File

@ -1,8 +1,16 @@
<template>
<div class="subject-template">
<div class="vertical-layout" @click.stop="subjectChange">
<div
:class="[
{
['vertical-layout-selected']: themeSelected
},
'vertical-layout'
]"
@click.stop="subjectChange"
>
<i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
<!-- <i class="el-icon-edit" />-->
<span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
<!-- 背景-->
<div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
<!-- 视图组件 背景-->
@ -66,6 +74,7 @@ import { chartTransStr2Object } from '@/views/panel/panel'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
import { saveOrUpdateSubject } from '@/api/panel/panel'
import { resetViewCacheCallBack } from '@/api/chart/chart'
export default {
name: 'StyleTemplateItem',
@ -111,8 +120,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.color.colors[0]
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.colors[0]
}
}
return style
@ -121,8 +130,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.color.colors[1]
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.colors[1]
}
}
return style
@ -131,8 +140,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.color.colors[2]
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.colors[2]
}
}
return style
@ -141,8 +150,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.tableColor.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.tableColor.tableHeaderBgColor
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.tableHeaderBgColor
}
}
return style
@ -151,21 +160,24 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
background: this.subjectItemDetails.chart.customAttr.tableColor.tableFontColor
background: this.subjectItemDetails.chartInfo.chartColor.tableFontColor
}
}
return style
},
chartBackground() {
let style = {}
if (this.subjectItemDetails && this.subjectItemDetails.chart.customStyle.background) {
if (this.subjectItemDetails && this.subjectItemDetails.chartInfo.chartCommonStyle.backgroundColorSelect) {
style = {
background: this.subjectItemDetails.chart.customStyle.background.color,
opacity: this.subjectItemDetails.chart.customStyle.background.alpha / 100
background: this.subjectItemDetails.chartInfo.chartCommonStyle.color,
opacity: this.subjectItemDetails.chartInfo.chartCommonStyle.alpha / 100
}
}
return style
},
themeSelected() {
return this.subjectItemDetails && this.subjectItemDetails.themeId === this.canvasStyleData.themeId
},
...mapState([
'canvasStyleData'
])
@ -187,19 +199,21 @@ export default {
methods: {
subjectDelete() {
this.$emit('subjectDelete', this.subjectItem.id)
// this.$alert('是否删除主题：' + this.subjectItem.name + '？', '', {
// confirmButtonText: '确认',
// callback: (action) => {
// if (action === 'confirm') {
// this.$emit('subjectDelete', this.subjectItem.id)
// }
// }
// })
},
subjectChange() {
this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
this.$store.commit('recordSnapshot', 'subjectChange')
bus.$emit('onSubjectChange')
if (!this.themeSelected) {
this.$confirm(this.$t('panel.theme_change_tips'), this.$t('panel.theme_change_warn'), {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: 'warning'
}).then(() => {
this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
this.$store.commit('recordSnapshot', 'subjectChange')
bus.$emit('onSubjectChange')
}).catch(() => {
// Do Nothing
})
}
},
templateEdit() {
this.$emit('templateEdit', this.template)
@ -283,6 +297,11 @@ export default {
border-radius: 3px;
}
.vertical-layout-selected{
border: solid 2px #4b8fdf;
border-radius: 3px;
}
.vertical-layout:hover {
border: solid 1px #4b8fdf;
border-radius: 3px;
@ -305,16 +324,16 @@ export default {
z-index: 10;
display:block;
}
.vertical-layout:hover > .el-icon-edit {
z-index: 10;
display:block;
}
.vertical-layout>>>.el-icon-error {
display:none
}
.vertical-layout>>>.el-icon-edit {
display:none
.theme-selected-icon {
z-index: 2;
font-size: 16px;
position: absolute;
bottom: 0px;
right: 0px;
color: #4b8fdf;
}
</style>

233
frontend/src/views/panel/SubjectSetting/index.vue
View File

@ -1,60 +1,38 @@
<template>
<el-row class="slider-container">
<div
style="height: 40px; padding-left: 15px; text-align: left; white-space: pre; text-overflow: ellipsis; left: 0px; right: 0px; top: 0px; font-weight: 700"
>
<div class="theme-slider-main">
{{ $t('panel.dashboard_theme') }}
</div>
<div
style="height: 1px; position: absolute; left: 15px; right: 15px; top: 40px; box-sizing:border-box;border-bottom: 1px solid #e8eaed"
/>
<div class="theme-slider-position" />
<div>
<slider v-if="sliderShow" @reload="sliderReload" />
</div>
<!--折叠面板-->
<div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item :title="$t('panel.panel')" name="panel">
<el-row class="selector-div">
<background-selector class="attr-selector" />
<!-- <panel-aided-design class="attr-selector" />-->
<component-gap class="attr-selector" />
<panel-refresh-time class="attr-selector" />
<panel-view-result class="attr-selector" />
</el-row>
</el-collapse-item>
<!-- <el-collapse-item :title="$t('chart.module_style')" name="component">-->
<!-- <el-row class="selector-div">-->
<!-- <panel-background-color-selector-->
<!-- v-if="chart"-->
<!-- class="attr-selector"-->
<!-- :chart="chart"-->
<!-- @onChangeBackgroundForm="onChangeBackgroundForm"-->
<!-- />-->
<!-- </el-row>-->
<!-- </el-collapse-item>-->
<el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
<el-row class="selector-div">
<panel-color-selector
:source-type="'panelEchart'"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
</el-row>
</el-collapse-item>
<el-collapse-item :title="$t('panel.table')" name="table">
<el-row class="selector-div">
<panel-color-selector
index="10002"
:source-type="'panelTable'"
class="attr-selector"
:chart="tableChart"
@onColorChange="onTableColorChange"
/>
</el-row>
</el-collapse-item>
</el-collapse>
<div>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item :title="'整体配置'" name="panel">
<el-row class="selector-div">
<overall-setting />
</el-row>
</el-collapse-item>
<el-collapse-item :title="'仪表板背景'" name="panelBackground">
<background-selector />
</el-collapse-item>
<el-collapse-item :title="'组件样式'" name="componentStyle">
<component-style />
</el-collapse-item>
<el-collapse-item :title="'组件配色'" name="graphical">
<panel-color-selector @onColorChange="onColorChange" />
</el-collapse-item>
<el-collapse-item :title="'图表标题'" name="table">
<view-title @onTextChange="onTextChange" />
</el-collapse-item>
<el-collapse-item :title="'过滤组件'" name="filterComponent">
<FilterStyleSelector />
</el-collapse-item>
</el-collapse>
</div>
</div>
</el-row>
</template>
@ -62,40 +40,36 @@
<script>
import slider from './PreSubject/Slider'
import BackgroundSelector from './PanelStyle/BackgroundSelector'
import PanelBackgroundColorSelector from './PanelStyle/PanelBackgroundColorSelector'
import PanelColorSelector from './PanelStyle/PanelColorSelector'
import ComponentGap from './PanelStyle/ComponentGap'
import PanelRefreshTime from './PanelStyle/PanelRefreshTime'
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import bus from '@/utils/bus'
import PanelViewResult from '@/views/panel/SubjectSetting/PanelStyle/PanelViewResult'
import PanelAidedDesign from '@/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign'
import OverallSetting from '@/views/panel/SubjectSetting/PanelStyle/OverallSetting'
import ViewTitle from '@/views/panel/SubjectSetting/PanelStyle/ViewTitle'
import ComponentStyle from '@/views/panel/SubjectSetting/PanelStyle/ComponentStyle'
import { adaptCurThemeCommonStyleAll } from '@/components/canvas/utils/style'
import FilterStyleSelector from '@/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector'
export default {
components: {
PanelAidedDesign,
PanelViewResult,
FilterStyleSelector,
ComponentStyle,
ViewTitle,
slider,
BackgroundSelector,
ComponentGap,
PanelColorSelector,
PanelBackgroundColorSelector,
PanelRefreshTime
OverallSetting
},
data() {
return {
sliderShow: true,
panelInfo: this.$store.state.panel.panelInfo,
activeNames: ['panel'],
chart: null,
tableChart: null,
collapseShow: true
}
},
computed: mapState([
'canvasStyleData'
'canvasStyleData',
'componentData'
]),
watch: {},
@ -105,6 +79,7 @@ export default {
this.collapseShow = false
this.$nextTick(() => {
this.init()
this.dataMerge()
this.collapseShow = true
})
})
@ -120,93 +95,93 @@ export default {
this.sliderShow = true
})
},
dataMerge() {
adaptCurThemeCommonStyleAll()
this.$store.commit('recordSnapshot')
},
init() {
// 初始化赋值
const chart = deepCopy(this.canvasStyleData.chart)
if (chart.xaxis) {
chart.xaxis = JSON.parse(chart.xaxis)
}
if (chart.yaxis) {
chart.yaxis = JSON.parse(chart.yaxis)
}
chart.customAttr = JSON.parse(chart.customAttr)
chart.customStyle = JSON.parse(chart.customStyle)
chart.customFilter = JSON.parse(chart.customFilter)
this.chart = chart
// 因为 table 的color 设置和view的共用 所以单独设置一个对象
this.tableChart = deepCopy(this.chart)
this.tableChart.customAttr.color = this.tableChart.customAttr.tableColor
},
handleChange(val) {
},
onChangePanelStyle(parma) {
},
onColorChange(val) {
this.chart.customAttr.color = val
this.save()
},
onTableColorChange(val) {
this.chart.customAttr.tableColor = val
this.save()
this.themeAttrChange('customAttr', 'color', val)
},
onTextChange(val) {
this.chart.customStyle.text = val
this.save()
},
onChangeBackgroundForm(val) {
this.chart.customStyle.background = val
this.save()
},
save() {
const canvasStyleData = deepCopy(this.canvasStyleData)
const chart = deepCopy(this.chart)
chart.xaxis = JSON.stringify(this.chart.xaxis)
chart.yaxis = JSON.stringify(this.chart.yaxis)
chart.customAttr = JSON.stringify(this.chart.customAttr)
chart.customStyle = JSON.stringify(this.chart.customStyle)
chart.customFilter = JSON.stringify(this.chart.customFilter)
canvasStyleData.chart = chart
this.$store.commit('setCanvasStyle', canvasStyleData)
this.$store.commit('recordSnapshot', 'save')
this.themeAttrChange('customStyle', 'text', val)
},
styleChange() {
this.$store.state.styleChangeTimes++
},
themeAttrChange(custom, property, value) {
bus.$emit('onThemeAttrChange', {
'custom': custom,
'property': property,
'value': value
})
this.$store.commit('recordSnapshot', 'save')
}
}
}
</script>
<style lang="scss" scoped>
.slider-container {
width: 100%;
overflow: hidden auto;
min-height: 24px;
padding-top: 0px;
padding-bottom: 0px;
position: relative;
max-height: 976px;
color: #3d4d66;
font-size: 12px;
}
.slider-container {
width: 100%;
min-height: 24px;
padding-top: 0px;
padding-bottom: 0px;
position: relative;
max-height: 976px;
color: #3d4d66;
font-size: 12px;
}
.attr-selector {
background-color: white;
height: 32px;
margin: 5px 5px 5px 5px;
padding: 0 4px;
display: flex;
align-items: center;
z-index: 10001;
}
.attr-selector {
background-color: white;
height: 32px;
margin: 5px 5px 5px 5px;
padding: 0 4px;
display: flex;
align-items: center;
z-index: 10001;
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.selector-div {
background-color: var(--MainBG, #f7f8fa);
margin: 5px
}
.selector-div {
background-color: var(--MainBG);
margin: 5px
}
.padding-lr {
padding: 0 6px;
}
.theme-slider-main {
height: 40px;
padding-left: 15px;
text-align: left;
white-space: pre;
text-overflow: ellipsis;
left: 0px;
right: 0px;
top: 0px;
font-weight: 700
}
.theme-slider-position{
height: 1px;
position: absolute;
left: 15px;
right: 15px;
top: 40px;
box-sizing:border-box;
border-bottom: 1px solid #e8eaed
}
</style>

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

@ -126,7 +126,6 @@
</div>
</div>
</de-aside-container>
<!--画布区域-->
<de-main-container id="canvasInfo-main">
<!--左侧抽屉-->
@ -141,12 +140,12 @@
:close-on-press-escape="false"
:modal-append-to-body="true"
>
<!-- <view-select v-show=" show && showIndex===0" @newChart="newChart" />-->
<filter-group v-show=" show &&showIndex===1" />
<subject-setting v-show=" show &&showIndex===2" />
<assist-component v-show=" show &&showIndex===3" />
<div style="width: 295px">
<filter-group v-show=" show &&showIndex===1" />
<subject-setting v-show=" show &&showIndex===2" />
<assist-component v-show=" show &&showIndex===3" />
</div>
</el-drawer>
<!--PC端画布区域-->
<div
v-if="!previewVisible&&!mobileLayoutStatus"
@ -342,7 +341,7 @@ import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
import componentList, {
BASE_MOBILE_STYLE,
COMMON_BACKGROUND,
HYPERLINKS
HYPERLINKS, PIC_STYLE
} from '@/components/canvas/custom-component/component-list' // 左侧列表数据
import { mapState } from 'vuex'
import { uuid } from 'vue-uuid'
@ -369,6 +368,7 @@ import OuterParamsSet from '@/views/panel/OuterParamsSet/index'
import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet'
import Multiplexing from '@/views/panel/ViewSelect/multiplexing'
import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
export default {
name: 'PanelEdit',
components: {
@ -733,7 +733,8 @@ export default {
const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
const shujujuzhen = evt.target.closest('.icon-shujujuzhen')
const suffix = evt.target.closest('.el-input__suffix')
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen && !suffix) {
const elButton = evt.target.closest('.el-button')
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen && !suffix && !elButton) {
this.show = false
window.removeEventListener('click', this.closeSidebar)
this.showIndex = -1
@ -764,7 +765,6 @@ export default {
component = deepCopy(componentTemp)
}
})
if (component.type === 'picture-add') {
this.goFile()
this.clearCurrentInfo()
@ -849,6 +849,7 @@ export default {
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'handleDrop')
}
adaptCurThemeCommonStyle(component)
this.clearCurrentInfo()
},
clearCurrentInfo() {
@ -887,6 +888,7 @@ export default {
},
sureFilter() {
this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
adaptCurThemeCommonStyle(this.currentFilterCom)
this.$store.commit('setComponentWithId', this.currentFilterCom)
this.$store.commit('recordSnapshot', 'sureFilter')
this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
@ -965,7 +967,7 @@ export default {
propValue: fileResult,
commonBackground: deepCopy(COMMON_BACKGROUND),
style: {
...commonStyle
...PIC_STYLE
}
}
component.auxiliaryMatrix = false
@ -1036,6 +1038,8 @@ export default {
component.id = newComponentId
// 统一设置背景信息
component.commonBackground = deepCopy(COMMON_BACKGROUND)
// 适配当前主题
adaptCurThemeCommonStyle(component)
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'newViewInfo')
this.clearCurrentInfo()
@ -1139,6 +1143,7 @@ export default {
.de-header {
height: 56px !important;
padding: 0px!important;
border-bottom: 1px solid #E6E6E6;
background-color: var(--SiderBG, white);
}

12
frontend/src/views/panel/filter/filterMain/FilterControl.vue
View File

@ -9,8 +9,13 @@
:inactive-text="$t('panel.single_choice')"
@change="multipleChange"
/>
<span v-if="widget.showVisual" style="padding-left: 20px;">
<el-checkbox v-model="attrs.visual" @change="showVisualChange">虚拟化</el-checkbox>
</span>
</div>
</el-col>
<el-col :span="16">
<div class="filter-options-right">
<span style="padding-right: 10px;">
@ -64,7 +69,7 @@
<el-checkbox v-model="attrs.enableParameters" @change="enableParametersChange"><span>
{{ $t('panel.binding_parameters') }} </span> </el-checkbox>
<el-popover placement="bottom-end" :disabled="!attrs.enableParameters" width="200">
<el-popover placement="bottom-end" :disabled="!attrs.enableParameters" width="200">
<div class="view-container-class">
<el-checkbox-group v-model="attrs.parameters">
<el-checkbox
@ -99,7 +104,7 @@
</template>
<script>
import {mapState} from "vuex";
import { mapState } from 'vuex'
export default {
name: 'FilterControl',
@ -163,6 +168,9 @@ export default {
}
this.fillAttrs2Filter()
},
showVisualChange(value) {
this.fillAttrs2Filter()
},
fillAttrs2Filter() {}
}

3
frontend/src/views/panel/filter/index.vue
View File

@ -1,12 +1,9 @@
<template>
<div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
<div v-for="(item, key) in widgetSubjects" :key="key" class="widget-subject">
<div class="filter-header">
<div class="filter-header-text"> {{ key }} </div>
</div>
<div class="filter-widget-content">
<div
v-for="(widget, index) in item"

77
frontend/src/views/panel/panel.js
View File

@ -1,8 +1,28 @@
// eslint-disable-next-line no-unused-vars
import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { deepCopy } from '@/components/canvas/utils/utils'
import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/component-list'
export const FILTER_COMMON_STYLE = {
horizontal: 'left',
vertical: 'top',
color: '#000000',
brColor: '',
wordColor: '',
innerBgColor: ''
}
export const FILTER_COMMON_STYLE_DARK = {
horizontal: 'left',
vertical: 'top',
color: '#FFFFFF',
brColor: '#4E4B4B',
wordColor: '#4E4B4B',
innerBgColor: '#131E42'
}
export const DEFAULT_PANEL_STYLE = {
themeColor: 'light',
color: '#ffffff',
imageUrl: null,
backgroundType: 'image',
@ -11,6 +31,13 @@ export const DEFAULT_PANEL_STYLE = {
resultCount: 1000 // 视图结果显示条数
}
export const PANEL_CHART_INFO = {
chartTitle: DEFAULT_TITLE_STYLE,
chartColor: DEFAULT_COLOR_CASE,
chartCommonStyle: COMMON_BACKGROUND_BASE,
filterStyle: FILTER_COMMON_STYLE
}
export const CANVAS_STYLE = {
width: 1600,
height: 900,
@ -27,7 +54,9 @@ export const CANVAS_STYLE = {
}, // 辅助设计
refreshViewLoading: true, // 仪表板视图loading提示
refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
refreshTime: 5 // 仪表板刷新时间 默认5分钟
refreshTime: 5, // 仪表板刷新时间 默认5分钟
themeId: 'system_1', // 当前所选主题ID 默认系统主题1
chartInfo: PANEL_CHART_INFO
}
export const AIDED_DESIGN = {
@ -35,57 +64,17 @@ export const AIDED_DESIGN = {
matrixBase: 1 // 当前matrix的基数 （是pcMatrixCount的几倍）
}
// export const AIDED_DESIGN_NEW = {
// showGrid: true,
// matrixBase: 4 // 当前matrix的基数 （是pcMatrixCount的几倍）
// }
export const DEFAULT_COMMON_CANVAS_STYLE_STRING = {
...CANVAS_STYLE,
chart: BASE_CHART_STRING
...CANVAS_STYLE
}
export function chartTransStr2Object(targetIn, copy) {
const target = copy === 'Y' ? deepCopy(targetIn) : targetIn
if (target.chart) {
if (target.chart.xaxis && typeof target.chart.xaxis === 'string') {
target.chart.xaxis = JSON.parse(target.chart.xaxis)
}
if (target.chart.yaxis && typeof target.chart.yaxis === 'string') {
target.chart.yaxis = JSON.parse(target.chart.yaxis)
}
if (target.chart.customAttr && typeof target.chart.customAttr === 'string') {
target.chart.customAttr = JSON.parse(target.chart.customAttr)
}
if (target.chart.customStyle && typeof target.chart.customStyle === 'string') {
target.chart.customStyle = JSON.parse(target.chart.customStyle)
}
if (target.chart.customFilter && typeof target.chart.customFilter === 'string') {
target.chart.customFilter = JSON.parse(target.chart.customFilter)
}
}
return target
}
export function chartTransObject2Str(targetIn, deepCopy) {
export function chartTransObject2Str(targetIn, copy) {
// eslint-disable-next-line no-undef
const target = copy === 'Y' ? deepCopy(targetIn) : targetIn
if (target.chart) {
if (target.chart.xaxis && typeof target.chart.xaxis !== 'string') {
target.chart.xaxis = JSON.stringify(target.chart.xaxis)
}
if (target.chart.yaxis && typeof target.chart.yaxis !== 'string') {
target.chart.yaxis = JSON.stringify(target.chart.yaxis)
}
if (target.chart.customAttr && typeof target.chart.customAttr !== 'string') {
target.chart.customAttr = JSON.stringify(target.chart.customAttr)
}
if (target.chart.customStyle && typeof target.chart.customStyle !== 'string') {
target.chart.customStyle = JSON.stringify(target.chart.customStyle)
}
if (target.chart.customFilter && typeof target.chart.customFilter !== 'string') {
target.chart.customFilter = JSON.stringify(target.chart.customFilter)
}
}
return target
}