Merge remote-tracking branch 'origin/dev' into fix_panel_edit_attr-auto-save
# Conflicts: # frontend/src/components/canvas/components/RectangleAttr.vue # frontend/src/views/Tinymce/RectangleAttr.vue # frontend/src/views/system/task/TaskRecord.vue # frontend/src/views/system/task/dataset.vue
This commit is contained in:
wangjiahao
commit
35c9802381
@ -16,6 +16,7 @@
|
||||
SELECT dataset_table_task_log.*, dataset_table_task.name
|
||||
FROM dataset_table_task_log
|
||||
LEFT JOIN dataset_table_task ON dataset_table_task_log.task_id = dataset_table_task.id
|
||||
LEFT JOIN dataset_table ON dataset_table_task_log.table_id = dataset_table.id
|
||||
<if test="_parameter != null">
|
||||
<include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
|
||||
</if>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
package io.dataease.commons.constants;
|
||||
|
||||
public enum TaskStatus {
|
||||
Underway, Stopped
|
||||
Underway, Stopped, Pending, Exec
|
||||
}
|
||||
|
||||
@ -11,9 +11,9 @@ public class MysqlConfigration extends JdbcDTO {
|
||||
|
||||
public String getJdbc() {
|
||||
// 连接参数先写死，后边要把编码、时区等参数放到数据源的设置中
|
||||
return "jdbc:mysql://HOSTNAME:PORT/DATABASE?characterEncoding=UTF-8"
|
||||
return "jdbc:mysql://HOSTNAME:PORT/DATABASE?characterEncoding=UTF-8&connectTimeout=5000&socketTimeout=5000"
|
||||
.replace("HOSTNAME", getHost())
|
||||
.replace("PORT", getPort().toString())
|
||||
.replace("DATABASE", getDataBase());
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -401,6 +401,7 @@ public class JdbcProvider extends DatasourceProvider {
|
||||
String driver = null;
|
||||
String jdbcurl = null;
|
||||
DatasourceTypes datasourceType = DatasourceTypes.valueOf(datasourceRequest.getDatasource().getType());
|
||||
Properties props = new Properties();
|
||||
switch (datasourceType) {
|
||||
case mysql:
|
||||
MysqlConfigration mysqlConfigration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), MysqlConfigration.class);
|
||||
@ -429,13 +430,14 @@ public class JdbcProvider extends DatasourceProvider {
|
||||
password = oracleConfigration.getPassword();
|
||||
driver = oracleConfigration.getDriver();
|
||||
jdbcurl = oracleConfigration.getJdbc();
|
||||
props.put( "oracle.net.CONNECT_TIMEOUT" , "5000") ;
|
||||
props.put( "oracle.jdbc.ReadTimeout" , "5000" ) ;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
Class.forName(driver);
|
||||
Properties props = new Properties();
|
||||
props.setProperty("user", username);
|
||||
if (StringUtils.isNotBlank(password)) {
|
||||
props.setProperty("password", password);
|
||||
|
||||
@ -120,6 +120,13 @@ public class DatasourceService {
|
||||
datasourceProvider.checkStatus(datasourceRequest);
|
||||
}
|
||||
|
||||
public void validate(String datasourceId) throws Exception {
|
||||
if(StringUtils.isEmpty(datasourceId)){
|
||||
return;
|
||||
}
|
||||
Datasource datasource = datasourceMapper.selectByPrimaryKey(datasourceId);
|
||||
validate(datasource);
|
||||
}
|
||||
public List<String> getSchema(Datasource datasource) throws Exception {
|
||||
DatasourceProvider datasourceProvider = ProviderFactory.getProvider(datasource.getType());
|
||||
DatasourceRequest datasourceRequest = new DatasourceRequest();
|
||||
@ -132,6 +139,7 @@ public class DatasourceService {
|
||||
DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
|
||||
DatasourceRequest datasourceRequest = new DatasourceRequest();
|
||||
datasourceRequest.setDatasource(ds);
|
||||
datasourceProvider.checkStatus(datasourceRequest);
|
||||
List<String> tables = datasourceProvider.getTables(datasourceRequest);
|
||||
|
||||
// 获取当前数据源下的db类型数据集
|
||||
|
||||
@ -15,4 +15,5 @@ public class DataSetTaskDTO extends DatasetTableTask {
|
||||
private String datasetName;
|
||||
private Long nextExecTime;
|
||||
private String taskStatus;
|
||||
private String msg;
|
||||
}
|
||||
|
||||
@ -180,10 +180,10 @@ public class ChartViewService {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取数据集
|
||||
// 获取数据集,需校验权限
|
||||
DatasetTable table = dataSetTableService.get(view.getTableId());
|
||||
if (ObjectUtils.isEmpty(table)) {
|
||||
throw new RuntimeException(Translator.get("i18n_dataset_delete"));
|
||||
throw new RuntimeException(Translator.get("i18n_dataset_delete_or_no_permission"));
|
||||
}
|
||||
// 判断连接方式，直连或者定时抽取 table.mode
|
||||
DatasourceRequest datasourceRequest = new DatasourceRequest();
|
||||
|
||||
@ -299,6 +299,12 @@ public class DataSetTableService {
|
||||
datasetTableField.setTableId(dataSetTableRequest.getId());
|
||||
datasetTableField.setChecked(Boolean.TRUE);
|
||||
List<DatasetTableField> fields = dataSetTableFieldsService.list(datasetTableField);
|
||||
if (CollectionUtils.isEmpty(fields)) {
|
||||
map.put("fields", fields);
|
||||
map.put("data", new ArrayList<>());
|
||||
map.put("page", new DataSetPreviewPage());
|
||||
return map;
|
||||
}
|
||||
String[] fieldArray = fields.stream().map(DatasetTableField::getDataeaseName).toArray(String[]::new);
|
||||
|
||||
DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class);
|
||||
@ -1392,9 +1398,8 @@ public class DataSetTableService {
|
||||
List<String> taskIds = datasetTableTaskLogMapper.selectByExample(datasetTableTaskLogExample).stream().map(DatasetTableTaskLog::getTaskId).collect(Collectors.toList());
|
||||
datasetTableTaskLogMapper.updateByExampleSelective(datasetTableTaskLog, datasetTableTaskLogExample);
|
||||
|
||||
DatasetTableTask datasetTableTask = new DatasetTableTask();
|
||||
datasetTableTask.setLastExecStatus(JobStatus.Error.name());
|
||||
dataSetTableTaskService.update(taskIds, datasetTableTask);
|
||||
dataSetTableTaskService.updateTaskStatus(taskIds, JobStatus.Error);
|
||||
//TODO check task status
|
||||
|
||||
for (DatasetTable jobStoppeddDatasetTable : jobStoppeddDatasetTables) {
|
||||
extractDataService.deleteFile("all_scope", jobStoppeddDatasetTable.getId());
|
||||
|
||||
@ -95,6 +95,7 @@ public class DataSetTableTaskLogService {
|
||||
if(CollectionUtils.isNotEmpty(datasetTableTaskLogs)){
|
||||
dataSetTaskDTO.setLastExecStatus(datasetTableTaskLogs.get(0).getStatus());
|
||||
dataSetTaskDTO.setLastExecTime(datasetTableTaskLogs.get(0).getCreateTime());
|
||||
dataSetTaskDTO.setMsg(datasetTableTaskLogs.get(0).getInfo());
|
||||
}
|
||||
return dataSetTaskDTO;
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import io.dataease.base.domain.*;
|
||||
import io.dataease.base.mapper.DatasetTableMapper;
|
||||
import io.dataease.base.mapper.DatasetTableTaskMapper;
|
||||
import io.dataease.base.mapper.ext.ExtDataSetTaskMapper;
|
||||
import io.dataease.base.mapper.ext.UtilMapper;
|
||||
import io.dataease.base.mapper.ext.query.GridExample;
|
||||
import io.dataease.commons.constants.JobStatus;
|
||||
import io.dataease.commons.constants.ScheduleType;
|
||||
@ -48,12 +49,11 @@ public class DataSetTableTaskService {
|
||||
@Lazy
|
||||
private DataSetTableService dataSetTableService;
|
||||
@Resource
|
||||
private ExtractDataService extractDataService;
|
||||
@Resource
|
||||
private ExtDataSetTaskMapper extDataSetTaskMapper;
|
||||
@Resource
|
||||
private DatasetTableMapper datasetTableMapper;
|
||||
|
||||
@Resource
|
||||
private UtilMapper utilMapper;
|
||||
|
||||
public DatasetTableTask save(DataSetTaskRequest dataSetTaskRequest) throws Exception {
|
||||
checkName(dataSetTaskRequest);
|
||||
@ -82,22 +82,21 @@ public class DataSetTableTaskService {
|
||||
if (StringUtils.isEmpty(datasetTableTask.getId())) {
|
||||
datasetTableTask.setId(UUID.randomUUID().toString());
|
||||
datasetTableTask.setCreateTime(System.currentTimeMillis());
|
||||
datasetTableTask.setStatus(TaskStatus.Underway.name());
|
||||
if (StringUtils.equalsIgnoreCase(datasetTableTask.getRate(), ScheduleType.SIMPLE.toString())){
|
||||
datasetTableTask.setStatus(TaskStatus.Exec.name());
|
||||
}else {
|
||||
datasetTableTask.setStatus(TaskStatus.Underway.name());
|
||||
}
|
||||
datasetTableTaskMapper.insert(datasetTableTask);
|
||||
} else {
|
||||
datasetTableTaskMapper.updateByPrimaryKeySelective(datasetTableTask);
|
||||
}
|
||||
|
||||
// simple
|
||||
if (datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString()) && datasetTableTask.getStatus().equalsIgnoreCase(TaskStatus.Underway.name())) { // SIMPLE 类型，提前占位
|
||||
if (datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())) { // SIMPLE 类型，提前占位
|
||||
execNow(datasetTableTask);
|
||||
scheduleService.addSchedule(datasetTableTask);
|
||||
}
|
||||
//cron、simple_cron
|
||||
if(!datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.name())){
|
||||
scheduleService.addSchedule(datasetTableTask);
|
||||
}
|
||||
|
||||
scheduleService.addSchedule(datasetTableTask);
|
||||
return datasetTableTask;
|
||||
}
|
||||
|
||||
@ -122,6 +121,7 @@ public class DataSetTableTaskService {
|
||||
if(!existSyncTask){
|
||||
datasetTableTask.setLastExecTime(System.currentTimeMillis());
|
||||
datasetTableTask.setLastExecStatus(JobStatus.Underway.name());
|
||||
datasetTableTask.setStatus(TaskStatus.Exec.name());
|
||||
update(datasetTableTask);
|
||||
DatasetTableTaskLog datasetTableTaskLog = new DatasetTableTaskLog();
|
||||
datasetTableTaskLog.setTableId(datasetTableTask.getTableId());
|
||||
@ -159,17 +159,36 @@ public class DataSetTableTaskService {
|
||||
return datasetTableTaskMapper.selectByPrimaryKey(id);
|
||||
}
|
||||
|
||||
public void update(DatasetTableTask datasetTableTask) {
|
||||
datasetTableTaskMapper.updateByPrimaryKeySelective(datasetTableTask);
|
||||
}
|
||||
|
||||
public void update(List<String> taskIds, DatasetTableTask datasetTableTask) {
|
||||
public void updateTaskStatus(List<String> taskIds, JobStatus lastExecStatus) {
|
||||
if (CollectionUtils.isEmpty(taskIds)){
|
||||
return;
|
||||
}
|
||||
DatasetTableTaskExample example = new DatasetTableTaskExample();
|
||||
example.createCriteria().andIdIn(taskIds);
|
||||
datasetTableTaskMapper.updateByExampleSelective(datasetTableTask, example);
|
||||
List<DatasetTableTask> datasetTableTasks = datasetTableTaskMapper.selectByExample(example);
|
||||
for (DatasetTableTask tableTask : datasetTableTasks) {
|
||||
updateTaskStatus(tableTask, lastExecStatus);
|
||||
}
|
||||
}
|
||||
|
||||
public void updateTaskStatus(DatasetTableTask datasetTableTask, JobStatus lastExecStatus){
|
||||
datasetTableTask.setLastExecStatus(lastExecStatus.name());
|
||||
if(datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.name())){
|
||||
datasetTableTask.setStatus(TaskStatus.Stopped.name());
|
||||
}else {
|
||||
if(StringUtils.isNotEmpty(datasetTableTask.getEnd()) && datasetTableTask.getEnd().equalsIgnoreCase("1")){
|
||||
if(utilMapper.currentTimestamp() > datasetTableTask.getEndTime()){
|
||||
datasetTableTask.setStatus(TaskStatus.Stopped.name());
|
||||
}
|
||||
}else {
|
||||
datasetTableTask.setStatus(TaskStatus.Underway.name());
|
||||
}
|
||||
}
|
||||
update(datasetTableTask);
|
||||
}
|
||||
|
||||
public void update(DatasetTableTask datasetTableTask) {
|
||||
datasetTableTaskMapper.updateByPrimaryKeySelective(datasetTableTask);
|
||||
}
|
||||
|
||||
public List<DatasetTableTask> list(DatasetTableTask datasetTableTask) {
|
||||
@ -217,12 +236,11 @@ public class DataSetTableTaskService {
|
||||
|
||||
public void execTask(DatasetTableTask datasetTableTask) throws Exception{
|
||||
execNow(datasetTableTask);
|
||||
if(datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.CRON.toString())){
|
||||
if(!datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())){
|
||||
scheduleService.fireNow(datasetTableTask);
|
||||
}
|
||||
if(datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())){
|
||||
scheduleService.addSchedule(datasetTableTask);
|
||||
}
|
||||
|
||||
// if(datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())){
|
||||
// scheduleService.addSchedule(datasetTableTask);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import io.dataease.base.mapper.DatasetTableMapper;
|
||||
import io.dataease.base.mapper.DatasetTableTaskMapper;
|
||||
import io.dataease.base.mapper.DatasourceMapper;
|
||||
import io.dataease.base.mapper.ext.ExtChartViewMapper;
|
||||
import io.dataease.base.mapper.ext.UtilMapper;
|
||||
import io.dataease.commons.constants.*;
|
||||
import io.dataease.commons.model.AuthURD;
|
||||
import io.dataease.commons.utils.*;
|
||||
@ -15,6 +16,7 @@ import io.dataease.datasource.provider.DatasourceProvider;
|
||||
import io.dataease.datasource.provider.JdbcProvider;
|
||||
import io.dataease.datasource.provider.ProviderFactory;
|
||||
import io.dataease.datasource.request.DatasourceRequest;
|
||||
import io.dataease.datasource.service.DatasourceService;
|
||||
import io.dataease.dto.dataset.DataTableInfoDTO;
|
||||
import io.dataease.exception.DataEaseException;
|
||||
import io.dataease.listener.util.CacheUtils;
|
||||
@ -22,8 +24,8 @@ import io.dataease.provider.QueryProvider;
|
||||
import io.dataease.service.message.DeMsgutil;
|
||||
import org.apache.commons.collections4.CollectionUtils;
|
||||
import org.apache.commons.io.FileUtils;
|
||||
import org.apache.commons.lang3.ObjectUtils;
|
||||
import org.apache.commons.lang3.StringUtils;
|
||||
import org.apache.commons.lang3.exception.ExceptionUtils;
|
||||
import org.apache.http.HttpResponse;
|
||||
import org.apache.http.client.methods.HttpGet;
|
||||
import org.apache.http.impl.client.CloseableHttpClient;
|
||||
@ -90,9 +92,12 @@ public class ExtractDataService {
|
||||
private DatasetTableMapper datasetTableMapper;
|
||||
@Resource
|
||||
private DatasetTableTaskMapper datasetTableTaskMapper;
|
||||
|
||||
@Resource
|
||||
private DatasourceService datasourceService;
|
||||
@Resource
|
||||
private ExtChartViewMapper extChartViewMapper;
|
||||
@Resource
|
||||
private UtilMapper utilMapper;
|
||||
|
||||
private static String lastUpdateTime = "${__last_update_time__}";
|
||||
private static String currentUpdateTime = "${__current_update_time__}";
|
||||
@ -128,25 +133,26 @@ public class ExtractDataService {
|
||||
"fi\n" +
|
||||
"rm -rf %s\n";
|
||||
|
||||
public synchronized boolean existSyncTask(DatasetTable datasetTable, DatasetTableTask datasetTableTask){
|
||||
public synchronized boolean existSyncTask(DatasetTable datasetTable, DatasetTableTask datasetTableTask) {
|
||||
datasetTable.setSyncStatus(JobStatus.Underway.name());
|
||||
DatasetTableExample example = new DatasetTableExample();
|
||||
example.createCriteria().andIdEqualTo(datasetTable.getId()).andSyncStatusNotEqualTo(JobStatus.Underway.name());
|
||||
example.or(example.createCriteria().andIdEqualTo(datasetTable.getId()).andSyncStatusIsNull());
|
||||
Boolean existSyncTask = datasetTableMapper.updateByExampleSelective(datasetTable, example) == 0;
|
||||
if(existSyncTask){
|
||||
if (existSyncTask) {
|
||||
DatasetTableTaskLog datasetTableTaskLog = new DatasetTableTaskLog();
|
||||
datasetTableTaskLog.setTaskId(datasetTableTask.getId());
|
||||
datasetTableTaskLog.setTableId(datasetTable.getId());
|
||||
datasetTableTaskLog.setStatus(JobStatus.Underway.name());
|
||||
List<DatasetTableTaskLog> datasetTableTaskLogs = dataSetTableTaskLogService.select(datasetTableTaskLog);
|
||||
if(CollectionUtils.isNotEmpty(datasetTableTaskLogs) && datasetTableTaskLogs.get(0).getTriggerType().equalsIgnoreCase(TriggerType.Custom.name())){
|
||||
if (CollectionUtils.isNotEmpty(datasetTableTaskLogs) && datasetTableTaskLogs.get(0).getTriggerType().equalsIgnoreCase(TriggerType.Custom.name())) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}else {
|
||||
} else {
|
||||
datasetTableTask.setLastExecTime(System.currentTimeMillis());
|
||||
datasetTableTask.setLastExecStatus(JobStatus.Underway.name());
|
||||
datasetTableTask.setStatus(TaskStatus.Exec.name());
|
||||
dataSetTableTaskService.update(datasetTableTask);
|
||||
return false;
|
||||
}
|
||||
@ -189,12 +195,12 @@ public class ExtractDataService {
|
||||
extractData(datasetTable, "all_scope");
|
||||
replaceTable(DorisTableUtils.dorisName(datasetTableId));
|
||||
saveSucessLog(datasetTableTaskLog);
|
||||
sendWebMsg(datasetTable, null, true);
|
||||
// sendWebMsg(datasetTable, null, true);
|
||||
deleteFile("all_scope", datasetTableId);
|
||||
updateTableStatus(datasetTableId, datasetTable, JobStatus.Completed, execTime);
|
||||
} catch (Exception e) {
|
||||
saveErrorLog(datasetTableId, null, e);
|
||||
sendWebMsg(datasetTable, null, false);
|
||||
// sendWebMsg(datasetTable, null, false);
|
||||
updateTableStatus(datasetTableId, datasetTable, JobStatus.Error, null);
|
||||
dropDorisTable(DorisTableUtils.dorisTmpName(DorisTableUtils.dorisName(datasetTableId)));
|
||||
deleteFile("all_scope", datasetTableId);
|
||||
@ -224,7 +230,7 @@ public class ExtractDataService {
|
||||
}
|
||||
//侵入式清除下属视图缓存
|
||||
List<String> viewIds = extChartViewMapper.allViewIds(datasetTableId);
|
||||
if (CollectionUtils.isNotEmpty(viewIds)){
|
||||
if (CollectionUtils.isNotEmpty(viewIds)) {
|
||||
viewIds.forEach(viewId -> {
|
||||
CacheUtils.remove(JdbcConstants.VIEW_CACHE_KEY, viewId);
|
||||
});
|
||||
@ -233,26 +239,26 @@ public class ExtractDataService {
|
||||
|
||||
public void extractData(String datasetTableId, String taskId, String type, JobExecutionContext context) {
|
||||
DatasetTable datasetTable = getDatasetTable(datasetTableId);
|
||||
if(datasetTable == null){
|
||||
if (datasetTable == null) {
|
||||
LogUtil.error("Can not find DatasetTable: " + datasetTableId);
|
||||
return;
|
||||
}
|
||||
DatasetTableTask datasetTableTask = datasetTableTaskMapper.selectByPrimaryKey(taskId);
|
||||
if(datasetTableTask == null){
|
||||
if (datasetTableTask == null) {
|
||||
return;
|
||||
}
|
||||
if(datasetTableTask.getStatus().equalsIgnoreCase(TaskStatus.Stopped.name())){
|
||||
if (datasetTableTask.getStatus().equalsIgnoreCase(TaskStatus.Stopped.name()) || datasetTableTask.getStatus().equalsIgnoreCase(TaskStatus.Pending.name())) {
|
||||
LogUtil.info("Skip synchronization task, task ID : " + datasetTableTask.getId());
|
||||
return;
|
||||
}
|
||||
if(existSyncTask(datasetTable, datasetTableTask)){
|
||||
if (existSyncTask(datasetTable, datasetTableTask)) {
|
||||
LogUtil.info("Skip synchronization task for dataset, dataset ID : " + datasetTableId);
|
||||
return;
|
||||
}
|
||||
|
||||
DatasetTableTaskLog datasetTableTaskLog = new DatasetTableTaskLog();
|
||||
UpdateType updateType = UpdateType.valueOf(type);
|
||||
if(context != null){
|
||||
if (context != null) {
|
||||
datasetTable.setQrtzInstance(context.getFireInstanceId());
|
||||
datasetTableMapper.updateByPrimaryKeySelective(datasetTable);
|
||||
}
|
||||
@ -276,19 +282,19 @@ public class ExtractDataService {
|
||||
|
||||
switch (updateType) {
|
||||
case all_scope: // 全量更新
|
||||
try{
|
||||
if(datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.CRON.toString())) {
|
||||
try {
|
||||
if (datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.CRON.toString())) {
|
||||
datasetTableTaskLog = writeDatasetTableTaskLog(datasetTableTaskLog, datasetTableId, taskId);
|
||||
}
|
||||
if(datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())) {
|
||||
if (datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())) {
|
||||
datasetTableTaskLog = getDatasetTableTaskLog(datasetTableTaskLog, datasetTableId, taskId);
|
||||
}
|
||||
createDorisTable(DorisTableUtils.dorisName(datasetTableId), dorisTablColumnSql);
|
||||
createDorisTable(DorisTableUtils.dorisTmpName(DorisTableUtils.dorisName(datasetTableId)), dorisTablColumnSql);
|
||||
generateTransFile("all_scope", datasetTable, datasource, datasetTableFields, null);
|
||||
if(datasetTable.getType().equalsIgnoreCase("sql")){
|
||||
if (datasetTable.getType().equalsIgnoreCase("sql")) {
|
||||
generateJobFile("all_scope", datasetTable, fetchSqlField(new Gson().fromJson(datasetTable.getInfo(), DataTableInfoDTO.class).getSql(), datasource));
|
||||
}else {
|
||||
} else {
|
||||
generateJobFile("all_scope", datasetTable, String.join(",", datasetTableFields.stream().map(DatasetTableField::getDataeaseName).collect(Collectors.toList())));
|
||||
}
|
||||
Long execTime = System.currentTimeMillis();
|
||||
@ -296,24 +302,24 @@ public class ExtractDataService {
|
||||
replaceTable(DorisTableUtils.dorisName(datasetTableId));
|
||||
saveSucessLog(datasetTableTaskLog);
|
||||
|
||||
sendWebMsg(datasetTable, taskId,true);
|
||||
sendWebMsg(datasetTable, datasetTableTask, true);
|
||||
|
||||
deleteFile("all_scope", datasetTableId);
|
||||
|
||||
updateTableStatus(datasetTableId, datasetTable, JobStatus.Completed, execTime);
|
||||
datasetTableTask.setLastExecStatus(JobStatus.Completed.name());
|
||||
dataSetTableTaskService.update(datasetTableTask);
|
||||
|
||||
}catch (Exception e){
|
||||
dataSetTableTaskService.updateTaskStatus(datasetTableTask, JobStatus.Completed);
|
||||
|
||||
} catch (Exception e) {
|
||||
saveErrorLog(datasetTableId, taskId, e);
|
||||
datasetTableTask.setLastExecStatus(JobStatus.Error.name());
|
||||
dataSetTableTaskService.update(datasetTableTask);
|
||||
|
||||
sendWebMsg(datasetTable, taskId,false);
|
||||
dataSetTableTaskService.updateTaskStatus(datasetTableTask, JobStatus.Error);
|
||||
|
||||
sendWebMsg(datasetTable, datasetTableTask, false);
|
||||
updateTableStatus(datasetTableId, datasetTable, JobStatus.Error, null);
|
||||
dropDorisTable(DorisTableUtils.dorisTmpName(DorisTableUtils.dorisName(datasetTableId)));
|
||||
deleteFile("all_scope", datasetTableId);
|
||||
}finally {
|
||||
} finally {
|
||||
}
|
||||
break;
|
||||
|
||||
@ -330,10 +336,10 @@ public class ExtractDataService {
|
||||
return;
|
||||
}
|
||||
|
||||
if(datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.CRON.toString())) {
|
||||
if (datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.CRON.toString())) {
|
||||
datasetTableTaskLog = writeDatasetTableTaskLog(datasetTableTaskLog, datasetTableId, taskId);
|
||||
}
|
||||
if(datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())) {
|
||||
if (datasetTableTask != null && datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())) {
|
||||
datasetTableTaskLog = getDatasetTableTaskLog(datasetTableTaskLog, datasetTableId, taskId);
|
||||
}
|
||||
Long execTime = System.currentTimeMillis();
|
||||
@ -354,29 +360,34 @@ public class ExtractDataService {
|
||||
}
|
||||
saveSucessLog(datasetTableTaskLog);
|
||||
|
||||
sendWebMsg(datasetTable, taskId,true);
|
||||
sendWebMsg(datasetTable, datasetTableTask, true);
|
||||
|
||||
deleteFile("incremental_add", datasetTableId);
|
||||
deleteFile("incremental_delete", datasetTableId);
|
||||
|
||||
updateTableStatus(datasetTableId, datasetTable, JobStatus.Completed, execTime);
|
||||
datasetTableTask.setLastExecStatus(JobStatus.Completed.name());
|
||||
dataSetTableTaskService.update(datasetTableTask);
|
||||
}catch (Exception e){
|
||||
|
||||
dataSetTableTaskService.updateTaskStatus(datasetTableTask, JobStatus.Completed);
|
||||
} catch (Exception e) {
|
||||
saveErrorLog(datasetTableId, taskId, e);
|
||||
sendWebMsg(datasetTable, taskId,false);
|
||||
sendWebMsg(datasetTable, datasetTableTask, false);
|
||||
updateTableStatus(datasetTableId, datasetTable, JobStatus.Error, null);
|
||||
datasetTableTask.setLastExecStatus(JobStatus.Error.name());
|
||||
dataSetTableTaskService.update(datasetTableTask);
|
||||
|
||||
dataSetTableTaskService.updateTaskStatus(datasetTableTask, JobStatus.Error);
|
||||
|
||||
deleteFile("incremental_add", datasetTableId);
|
||||
deleteFile("incremental_delete", datasetTableId);
|
||||
}finally {
|
||||
} finally {
|
||||
if (datasetTableTask.getRate().equalsIgnoreCase(ScheduleType.SIMPLE.toString())) {
|
||||
datasetTableTask.setStatus(TaskStatus.Stopped.name());
|
||||
dataSetTableTaskService.update(datasetTableTask);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
//侵入式清除下属视图缓存
|
||||
List<String> viewIds = extChartViewMapper.allViewIds(datasetTableId);
|
||||
if (CollectionUtils.isNotEmpty(viewIds)){
|
||||
if (CollectionUtils.isNotEmpty(viewIds)) {
|
||||
viewIds.forEach(viewId -> {
|
||||
CacheUtils.remove(JdbcConstants.VIEW_CACHE_KEY, viewId);
|
||||
});
|
||||
@ -384,7 +395,8 @@ public class ExtractDataService {
|
||||
|
||||
}
|
||||
|
||||
private void sendWebMsg(DatasetTable datasetTable, String taskId, Boolean status) {
|
||||
private void sendWebMsg(DatasetTable datasetTable, DatasetTableTask datasetTableTask, Boolean status) {
|
||||
String taskId = datasetTableTask.getId();
|
||||
String msg = status ? "成功" : "失败";
|
||||
Long typeId = status ? 5L : 6L;
|
||||
String id = datasetTable.getId();
|
||||
@ -392,18 +404,22 @@ public class ExtractDataService {
|
||||
Set<Long> userIds = AuthUtils.userIdsByURD(authURD);
|
||||
Gson gson = new Gson();
|
||||
userIds.forEach(userId -> {
|
||||
Map<String,Object> param = new HashMap<>();
|
||||
Map<String, Object> param = new HashMap<>();
|
||||
param.put("tableId", id);
|
||||
if(StringUtils.isNotEmpty(taskId)){
|
||||
param.put("taskId", taskId);
|
||||
}
|
||||
DeMsgutil.sendMsg(userId, typeId, 1L, "数据集【"+datasetTable.getName()+"】同步"+msg, gson.toJson(param));
|
||||
if (StringUtils.isNotEmpty(taskId)) {
|
||||
param.put("taskId", taskId);
|
||||
}
|
||||
String content = "数据集【" + datasetTable.getName() + "】同步" + msg;
|
||||
if (ObjectUtils.isNotEmpty(datasetTableTask) && ObjectUtils.isNotEmpty(datasetTableTask.getName())) {
|
||||
content += " 任务名称【" + datasetTableTask.getName() + "】";
|
||||
}
|
||||
DeMsgutil.sendMsg(userId, typeId, 1L, content, gson.toJson(param));
|
||||
});
|
||||
}
|
||||
|
||||
private void updateTableStatus(String datasetTableId, DatasetTable datasetTable, JobStatus completed, Long execTime) {
|
||||
datasetTable.setSyncStatus(completed.name());
|
||||
if(execTime != null){
|
||||
if (execTime != null) {
|
||||
datasetTable.setLastUpdateTime(execTime);
|
||||
}
|
||||
DatasetTableExample example = new DatasetTableExample();
|
||||
@ -417,16 +433,16 @@ public class ExtractDataService {
|
||||
dataSetTableTaskLogService.save(datasetTableTaskLog);
|
||||
}
|
||||
|
||||
private void saveErrorLog(String datasetTableId, String taskId, Exception e){
|
||||
private void saveErrorLog(String datasetTableId, String taskId, Exception e) {
|
||||
LogUtil.error("Extract data error: " + datasetTableId, e);
|
||||
DatasetTableTaskLog datasetTableTaskLog = new DatasetTableTaskLog();
|
||||
datasetTableTaskLog.setTableId(datasetTableId);
|
||||
datasetTableTaskLog.setStatus(JobStatus.Underway.name());
|
||||
if(StringUtils.isNotEmpty(taskId)){
|
||||
if (StringUtils.isNotEmpty(taskId)) {
|
||||
datasetTableTaskLog.setTaskId(taskId);
|
||||
}
|
||||
List<DatasetTableTaskLog> datasetTableTaskLogs = dataSetTableTaskLogService.select(datasetTableTaskLog);
|
||||
if(CollectionUtils.isNotEmpty(datasetTableTaskLogs)){
|
||||
List<DatasetTableTaskLog> datasetTableTaskLogs = dataSetTableTaskLogService.select(datasetTableTaskLog);
|
||||
if (CollectionUtils.isNotEmpty(datasetTableTaskLogs)) {
|
||||
datasetTableTaskLog = datasetTableTaskLogs.get(0);
|
||||
datasetTableTaskLog.setStatus(JobStatus.Error.name());
|
||||
datasetTableTaskLog.setInfo(e.getMessage());
|
||||
@ -445,7 +461,7 @@ public class ExtractDataService {
|
||||
if (datasetTableField.getSize() > 65533 || datasetTableField.getSize() * 3 > 65533) {
|
||||
Column_Fields = Column_Fields + "varchar(65533)" + ",`";
|
||||
} else {
|
||||
Column_Fields = Column_Fields + "varchar(lenth)".replace("lenth", String.valueOf(datasetTableField.getSize()*3)) + ",`";
|
||||
Column_Fields = Column_Fields + "varchar(lenth)".replace("lenth", String.valueOf(datasetTableField.getSize() * 3)) + ",`";
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
@ -488,7 +504,8 @@ public class ExtractDataService {
|
||||
datasourceRequest.setDatasource(dorisDatasource);
|
||||
datasourceRequest.setQuery(dropTableSql.replace("TABLE_NAME", dorisTableName));
|
||||
jdbcProvider.exec(datasourceRequest);
|
||||
}catch (Exception ignore){}
|
||||
} catch (Exception ignore) {
|
||||
}
|
||||
}
|
||||
|
||||
private void replaceTable(String dorisTableName) throws Exception {
|
||||
@ -501,14 +518,15 @@ public class ExtractDataService {
|
||||
jdbcProvider.exec(datasourceRequest);
|
||||
}
|
||||
|
||||
private DatasetTable getDatasetTable(String datasetTableId){
|
||||
for (int i=0;i<5;i++){
|
||||
DatasetTable datasetTable = dataSetTableService.get(datasetTableId);
|
||||
if(datasetTable == null){
|
||||
private DatasetTable getDatasetTable(String datasetTableId) {
|
||||
for (int i = 0; i < 5; i++) {
|
||||
DatasetTable datasetTable = dataSetTableService.get(datasetTableId);
|
||||
if (datasetTable == null) {
|
||||
try {
|
||||
Thread.sleep(1000);
|
||||
}catch (Exception ignore){}
|
||||
}else {
|
||||
} catch (Exception ignore) {
|
||||
}
|
||||
} else {
|
||||
return datasetTable;
|
||||
}
|
||||
}
|
||||
@ -521,11 +539,11 @@ public class ExtractDataService {
|
||||
datasetTableTaskLog.setStatus(JobStatus.Underway.name());
|
||||
datasetTableTaskLog.setTriggerType(TriggerType.Cron.name());
|
||||
List<DatasetTableTaskLog> datasetTableTaskLogs = dataSetTableTaskLogService.select(datasetTableTaskLog);
|
||||
if(CollectionUtils.isEmpty(datasetTableTaskLogs)){
|
||||
if (CollectionUtils.isEmpty(datasetTableTaskLogs)) {
|
||||
datasetTableTaskLog.setStartTime(System.currentTimeMillis());
|
||||
dataSetTableTaskLogService.save(datasetTableTaskLog);
|
||||
return datasetTableTaskLog;
|
||||
}else {
|
||||
} else {
|
||||
return datasetTableTaskLogs.get(0);
|
||||
}
|
||||
}
|
||||
@ -534,14 +552,15 @@ public class ExtractDataService {
|
||||
datasetTableTaskLog.setTableId(datasetTableId);
|
||||
datasetTableTaskLog.setTaskId(taskId);
|
||||
datasetTableTaskLog.setStatus(JobStatus.Underway.name());
|
||||
for (int i=0;i<5;i++){
|
||||
for (int i = 0; i < 5; i++) {
|
||||
List<DatasetTableTaskLog> datasetTableTaskLogs = dataSetTableTaskLogService.select(datasetTableTaskLog);
|
||||
if(CollectionUtils.isNotEmpty(datasetTableTaskLogs)){
|
||||
if (CollectionUtils.isNotEmpty(datasetTableTaskLogs)) {
|
||||
return datasetTableTaskLogs.get(0);
|
||||
}
|
||||
try {
|
||||
Thread.sleep(1000);
|
||||
}catch (Exception ignore){}
|
||||
} catch (Exception ignore) {
|
||||
}
|
||||
}
|
||||
datasetTableTaskLog.setStartTime(System.currentTimeMillis());
|
||||
dataSetTableTaskLogService.save(datasetTableTaskLog);
|
||||
@ -549,6 +568,7 @@ public class ExtractDataService {
|
||||
}
|
||||
|
||||
private void extractData(DatasetTable datasetTable, String extractType) throws Exception {
|
||||
datasourceService.validate(datasetTable.getDataSourceId());
|
||||
KettleFileRepository repository = CommonBeanFactory.getBean(KettleFileRepository.class);
|
||||
RepositoryDirectoryInterface repositoryDirectoryInterface = repository.loadRepositoryDirectoryTree();
|
||||
JobMeta jobMeta = null;
|
||||
@ -694,7 +714,7 @@ public class ExtractDataService {
|
||||
datasourceRequest.setDatasource(ds);
|
||||
datasourceRequest.setQuery(qp.wrapSql(sql));
|
||||
List<String> dorisFileds = new ArrayList<>();
|
||||
datasourceProvider.fetchResultField(datasourceRequest).stream().map(TableFiled::getFieldName).forEach(filed ->{
|
||||
datasourceProvider.fetchResultField(datasourceRequest).stream().map(TableFiled::getFieldName).forEach(filed -> {
|
||||
dorisFileds.add(DorisTableUtils.columnName(filed));
|
||||
});
|
||||
return String.join(",", dorisFileds);
|
||||
@ -716,7 +736,7 @@ public class ExtractDataService {
|
||||
case mysql:
|
||||
MysqlConfigration mysqlConfigration = new Gson().fromJson(datasource.getConfiguration(), MysqlConfigration.class);
|
||||
dataMeta = new DatabaseMeta("db", "MYSQL", "Native", mysqlConfigration.getHost(), mysqlConfigration.getDataBase(), mysqlConfigration.getPort().toString(), mysqlConfigration.getUsername(), mysqlConfigration.getPassword());
|
||||
dataMeta.addExtraOption("MYSQL","characterEncoding", "UTF-8");
|
||||
dataMeta.addExtraOption("MYSQL", "characterEncoding", "UTF-8");
|
||||
transMeta.addDatabase(dataMeta);
|
||||
selectSQL = getSelectSQL(extractType, datasetTable, datasource, datasetTableFields, selectSQL);
|
||||
inputStep = inputStep(transMeta, selectSQL);
|
||||
@ -732,13 +752,13 @@ public class ExtractDataService {
|
||||
break;
|
||||
case oracle:
|
||||
OracleConfigration oracleConfigration = new Gson().fromJson(datasource.getConfiguration(), OracleConfigration.class);
|
||||
if(oracleConfigration.getConnectionType().equalsIgnoreCase("serviceName")){
|
||||
if (oracleConfigration.getConnectionType().equalsIgnoreCase("serviceName")) {
|
||||
String database = "(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST = ORACLE_HOSTNAME)(PORT = ORACLE_PORT))(CONNECT_DATA = (SERVER = DEDICATED)(SERVICE_NAME = ORACLE_SERVICE_NAME )))".replace("ORACLE_HOSTNAME", oracleConfigration.getHost()).replace("ORACLE_PORT", oracleConfigration.getPort().toString()).replace("ORACLE_SERVICE_NAME", oracleConfigration.getDataBase());
|
||||
dataMeta = new DatabaseMeta("db", "ORACLE", "Native", "", database, "-1", oracleConfigration.getUsername(), oracleConfigration.getPassword());
|
||||
}else {
|
||||
} else {
|
||||
dataMeta = new DatabaseMeta("db", "ORACLE", "Native", oracleConfigration.getHost(), oracleConfigration.getDataBase(), oracleConfigration.getPort().toString(), oracleConfigration.getUsername(), oracleConfigration.getPassword());
|
||||
}
|
||||
transMeta.addDatabase(dataMeta);
|
||||
transMeta.addDatabase(dataMeta);
|
||||
|
||||
selectSQL = getSelectSQL(extractType, datasetTable, datasource, datasetTableFields, selectSQL);
|
||||
inputStep = inputStep(transMeta, selectSQL);
|
||||
@ -794,12 +814,12 @@ public class ExtractDataService {
|
||||
selectSQL = qp.createRawQuerySQL(tableName, datasetTableFields);
|
||||
}
|
||||
|
||||
if(extractType.equalsIgnoreCase("all_scope") && datasetTable.getType().equalsIgnoreCase("sql")){
|
||||
if (extractType.equalsIgnoreCase("all_scope") && datasetTable.getType().equalsIgnoreCase("sql")) {
|
||||
selectSQL = new Gson().fromJson(datasetTable.getInfo(), DataTableInfoDTO.class).getSql();
|
||||
QueryProvider qp = ProviderFactory.getQueryProvider(datasource.getType());
|
||||
selectSQL = qp.createRawQuerySQLAsTmp(selectSQL, datasetTableFields);
|
||||
}
|
||||
if(!extractType.equalsIgnoreCase("all_scope")){
|
||||
if (!extractType.equalsIgnoreCase("all_scope")) {
|
||||
QueryProvider qp = ProviderFactory.getQueryProvider(datasource.getType());
|
||||
selectSQL = qp.createRawQuerySQLAsTmp(selectSQL, datasetTableFields);
|
||||
}
|
||||
@ -822,23 +842,25 @@ public class ExtractDataService {
|
||||
ExcelInputMeta excelInputMeta = new ExcelInputMeta();
|
||||
if (StringUtils.equalsIgnoreCase(suffix, "xlsx")) {
|
||||
excelInputMeta.setSpreadSheetType(SpreadSheetType.SAX_POI);
|
||||
try{
|
||||
try {
|
||||
InputStream inputStream = new FileInputStream(filePath);
|
||||
XSSFWorkbook xssfWorkbook = new XSSFWorkbook(inputStream);
|
||||
XSSFSheet sheet0 = xssfWorkbook.getSheetAt(0);
|
||||
excelInputMeta.setSheetName(new String[]{sheet0.getSheetName()});
|
||||
}catch (Exception e){
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
if (StringUtils.equalsIgnoreCase(suffix, "xls")) {
|
||||
excelInputMeta.setSpreadSheetType(SpreadSheetType.JXL);
|
||||
try{
|
||||
try {
|
||||
InputStream inputStream = new FileInputStream(filePath);
|
||||
HSSFWorkbook workbook = new HSSFWorkbook(inputStream);
|
||||
HSSFSheet sheet0 = workbook.getSheetAt(0);
|
||||
excelInputMeta.setSheetName(new String[]{sheet0.getSheetName()});
|
||||
}catch (Exception e){e.printStackTrace();}
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
excelInputMeta.setPassword("Encrypted");
|
||||
excelInputMeta.setFileName(new String[]{filePath});
|
||||
@ -848,10 +870,10 @@ public class ExtractDataService {
|
||||
for (int i = 0; i < datasetTableFields.size(); i++) {
|
||||
ExcelInputField field = new ExcelInputField();
|
||||
field.setName(datasetTableFields.get(i).getOriginName());
|
||||
if(datasetTableFields.get(i).getDeExtractType() == 1){
|
||||
if (datasetTableFields.get(i).getDeExtractType() == 1) {
|
||||
field.setType("String");
|
||||
field.setFormat("yyyy-MM-dd HH:mm:ss");
|
||||
}else {
|
||||
} else {
|
||||
field.setType("String");
|
||||
}
|
||||
fields[i] = field;
|
||||
@ -892,14 +914,14 @@ public class ExtractDataService {
|
||||
|
||||
tmp_code = tmp_code.replace("handleWraps", handleWraps);
|
||||
String Column_Fields = "";
|
||||
if(datasourceType.equals(DatasourceTypes.excel) || datasourceType.equals(DatasourceTypes.oracle)){
|
||||
if (datasourceType.equals(DatasourceTypes.excel) || datasourceType.equals(DatasourceTypes.oracle)) {
|
||||
Column_Fields = String.join(",", datasetTableFields.stream().map(DatasetTableField::getOriginName).collect(Collectors.toList()));
|
||||
}else {
|
||||
} else {
|
||||
Column_Fields = String.join(",", datasetTableFields.stream().map(DatasetTableField::getDataeaseName).collect(Collectors.toList()));
|
||||
}
|
||||
if(datasourceType.equals(DatasourceTypes.excel)){
|
||||
if (datasourceType.equals(DatasourceTypes.excel)) {
|
||||
tmp_code = tmp_code.replace("handleExcelIntColumn", handleExcelIntColumn).replace("Column_Fields", Column_Fields);
|
||||
}else {
|
||||
} else {
|
||||
tmp_code = tmp_code.replace("handleExcelIntColumn", "").replace("Column_Fields", Column_Fields);
|
||||
}
|
||||
UserDefinedJavaClassDef userDefinedJavaClassDef = new UserDefinedJavaClassDef(UserDefinedJavaClassDef.ClassType.TRANSFORM_CLASS, "Processor", tmp_code);
|
||||
@ -914,7 +936,7 @@ public class ExtractDataService {
|
||||
return userDefinedJavaClassStep;
|
||||
}
|
||||
|
||||
public void deleteFile(String type, String dataSetTableId){
|
||||
public void deleteFile(String type, String dataSetTableId) {
|
||||
String transName = null;
|
||||
String jobName = null;
|
||||
String fileName = null;
|
||||
@ -929,7 +951,7 @@ public class ExtractDataService {
|
||||
transName = "trans_add_" + DorisTableUtils.dorisName(dataSetTableId);
|
||||
jobName = "job_add_" + DorisTableUtils.dorisName(dataSetTableId);
|
||||
fileName = DorisTableUtils.dorisAddName(dataSetTableId);
|
||||
break;
|
||||
break;
|
||||
case "incremental_delete":
|
||||
transName = "trans_delete_" + DorisTableUtils.dorisName(dataSetTableId);
|
||||
jobName = "job_delete_" + DorisTableUtils.dorisName(dataSetTableId);
|
||||
@ -938,28 +960,31 @@ public class ExtractDataService {
|
||||
default:
|
||||
break;
|
||||
}
|
||||
try{
|
||||
try {
|
||||
File file = new File(root_path + fileName + "." + extention);
|
||||
FileUtils.forceDelete(file);
|
||||
}catch (Exception e){}
|
||||
try{
|
||||
} catch (Exception e) {
|
||||
}
|
||||
try {
|
||||
File file = new File(root_path + jobName + ".kjb");
|
||||
FileUtils.forceDelete(file);
|
||||
}catch (Exception e){}
|
||||
try{
|
||||
} catch (Exception e) {
|
||||
}
|
||||
try {
|
||||
File file = new File(root_path + transName + ".ktr");
|
||||
FileUtils.forceDelete(file);
|
||||
}catch (Exception e){}
|
||||
} catch (Exception e) {
|
||||
}
|
||||
}
|
||||
|
||||
public boolean isKettleRunning() {
|
||||
try {
|
||||
if (!InetAddress.getByName(carte).isReachable(1000)) {
|
||||
return false;
|
||||
}
|
||||
}catch (Exception e){
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
if (!InetAddress.getByName(carte).isReachable(1000)) {
|
||||
return false;
|
||||
}
|
||||
} catch (Exception e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
HttpGet getMethod = new HttpGet("http://" + carte + ":" + port);
|
||||
HttpClientManager.HttpClientBuilderFacade clientBuilder = HttpClientManager.getInstance().createBuilder();
|
||||
|
||||
@ -56,9 +56,9 @@ BEGIN;
|
||||
INSERT INTO `sys_msg_type` VALUES (1, 0, 'i18n_msg_type_panel_share', 'panel', 'to-msg-share');
|
||||
INSERT INTO `sys_msg_type` VALUES (2, 1, 'i18n_msg_type_panel_share', 'panel', 'to-msg-share');
|
||||
INSERT INTO `sys_msg_type` VALUES (3, 1, 'i18n_msg_type_panel_share_cacnel', 'panel', 'to-msg-share');
|
||||
INSERT INTO `sys_msg_type` VALUES (4, 0, 'i18n_msg_type_dataset_sync', 'dataset', 'to-msg-dataset');
|
||||
INSERT INTO `sys_msg_type` VALUES (5, 4, 'i18n_msg_type_dataset_sync_success', 'dataset', 'to-msg-dataset');
|
||||
INSERT INTO `sys_msg_type` VALUES (6, 4, 'i18n_msg_type_dataset_sync_faild', 'dataset', 'to-msg-dataset');
|
||||
INSERT INTO `sys_msg_type` VALUES (4, 0, 'i18n_msg_type_dataset_sync', 'sys-task-dataset', 'to-msg-dataset');
|
||||
INSERT INTO `sys_msg_type` VALUES (5, 4, 'i18n_msg_type_dataset_sync_success', 'sys-task-dataset', 'to-msg-dataset');
|
||||
INSERT INTO `sys_msg_type` VALUES (6, 4, 'i18n_msg_type_dataset_sync_faild', 'sys-task-dataset', 'to-msg-dataset');
|
||||
COMMIT;
|
||||
|
||||
-- ----------------------------
|
||||
|
||||
@ -1,15 +1,26 @@
|
||||
INSERT INTO `sys_menu` VALUES (57, 1, 3, 1, '任务管理', 'sys-task', 'system/task/index', 2000, 'task', 'system-task', b'0', b'0', b'0', NULL, NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `sys_menu` VALUES (58, 57, 0, 1, '数据集任务', 'sys-task-dataset', 'system/task/dataset', 1, 'task', 'dataset', b'0', b'0', b'0', NULL, NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `sys_menu` VALUES (58, 1, 0, 1, 'i18n_timed_task', 'sys-task-dataset', 'system/task/dataset', 1001, 'task', 'dataset', b'0', b'0', b'0', NULL, NULL, NULL, NULL, NULL);
|
||||
|
||||
ALTER TABLE `dataset_table_task`
|
||||
ADD COLUMN `last_exec_time` BIGINT(13) NULL DEFAULT NULL COMMENT '上次执行时间' AFTER `create_time`,
|
||||
ADD COLUMN `status` VARCHAR(50) NULL DEFAULT NULL COMMENT '任务状态' AFTER `last_exec_time`,
|
||||
ADD COLUMN `last_exec_status` VARCHAR(50) NULL DEFAULT NULL COMMENT '上次执行结果' AFTER `last_exec_time`;
|
||||
|
||||
update dataset_table_task set status='Underway';
|
||||
update dataset_table_task set rate='SIMPLE' where rate='SIMPLE_COMPLETE';
|
||||
|
||||
update dataset_table_task set status='Stopped' where rate='SIMPLE';
|
||||
update dataset_table_task set status='Underway' where rate='CRON';
|
||||
|
||||
|
||||
UPDATE dataset_table_task
|
||||
SET dataset_table_task.last_exec_time = (SELECT dataset_table_task_log.start_time FROM dataset_table_task_log WHERE dataset_table_task_log.task_id = dataset_table_task.id limit 1);
|
||||
|
||||
UPDATE dataset_table_task
|
||||
SET dataset_table_task.last_exec_status = (SELECT dataset_table_task_log.status FROM dataset_table_task_log WHERE dataset_table_task_log.task_id = dataset_table_task.id limit 1);
|
||||
|
||||
|
||||
ALTER TABLE `dataset_table_task_log` ADD COLUMN `trigger_type` VARCHAR(45) NULL AFTER `create_time`;
|
||||
ALTER TABLE `dataset_table_task` ADD COLUMN `extra_data` LONGTEXT NULL AFTER `last_exec_status`;
|
||||
|
||||
update dataset_table_task_log set trigger_type='Cron';
|
||||
|
||||
ALTER TABLE `dataset_table_task` ADD COLUMN `extra_data` LONGTEXT NULL AFTER `last_exec_status`;
|
||||
|
||||
|
||||
@ -251,7 +251,7 @@ i18n_datasource_not_allow_delete_msg= datasets are using this data source and ca
|
||||
i18n_task_name_repeat=Name is used in same data set
|
||||
i18n_id_or_pwd_error=Invalid ID or password
|
||||
i18n_datasource_delete=Data source is delete
|
||||
i18n_dataset_delete=Data set is delete
|
||||
i18n_dataset_delete_or_no_permission=Data set is delete or no permission
|
||||
i18n_chart_delete=Chart is delete
|
||||
i18n_not_exec_add_sync=There is no completed synchronization task. Incremental synchronization cannot be performed
|
||||
i18n_excel_header_empty=Excel first row can not empty
|
||||
@ -273,4 +273,5 @@ i18n_msg_type_dataset_sync=Data set synchronization
|
||||
i18n_msg_type_dataset_sync_success=Dataset synchronization successful
|
||||
i18n_msg_type_dataset_sync_faild=Dataset synchronization failed
|
||||
i18n_data_not_sync=Please sync data first
|
||||
i18n_excel_colume_change=The column name of Excel is inconsistent with the original data set
|
||||
i18n_excel_colume_change=The column name of Excel is inconsistent with the original data set
|
||||
i18n_timed_task=Timed Task
|
||||
@ -250,7 +250,7 @@ i18n_datasource_not_allow_delete_msg= 个数据集正在使用此数据源，无
|
||||
i18n_task_name_repeat=同一数据集下任务名称已被使用
|
||||
i18n_id_or_pwd_error=无效的ID或密码
|
||||
i18n_datasource_delete=当前用到的数据源已被删除
|
||||
i18n_dataset_delete=当前用到的数据集已被删除
|
||||
i18n_dataset_delete_or_no_permission=当前用到的数据集没有权限或已被删除
|
||||
i18n_chart_delete=当前用到的视图已被删除
|
||||
i18n_not_exec_add_sync=没有已完成的同步任务，无法进行增量同步
|
||||
i18n_excel_header_empty=Excel第一行为空
|
||||
@ -273,3 +273,4 @@ i18n_msg_type_dataset_sync_success=数据集同步成功
|
||||
i18n_msg_type_dataset_sync_faild=数据集同步失败
|
||||
i18n_data_not_sync=请先完成数据同步
|
||||
i18n_excel_colume_change=Excel的列名与原数据集不一致
|
||||
i18n_timed_task=定时任务
|
||||
@ -253,7 +253,7 @@ i18n_datasource_not_allow_delete_msg= 個數據集正在使用此數據源，無
|
||||
i18n_task_name_repeat=同一數據集下任務名稱已被使用
|
||||
i18n_id_or_pwd_error=無效的ID或密碼
|
||||
i18n_datasource_delete=當前用到的數據源已被刪除
|
||||
i18n_dataset_delete=當前用到的數據集已被刪除
|
||||
i18n_dataset_delete_or_no_permission=當前用到的數據集沒有權限或已被刪除
|
||||
i18n_chart_delete=當前用到的視圖已被刪除
|
||||
i18n_not_exec_add_sync=沒有已經完成的同步任務，無法進行增量同步
|
||||
i18n_excel_header_empty=Excel第一行為空
|
||||
@ -275,4 +275,5 @@ i18n_msg_type_dataset_sync=數據集同步
|
||||
i18n_msg_type_dataset_sync_success=數據集同步成功
|
||||
i18n_msg_type_dataset_sync_faild=數據集同步失敗
|
||||
i18n_data_not_sync=請先完成數據同步
|
||||
i18n_excel_colume_change=Excel的列名與原數據集不一致
|
||||
i18n_excel_colume_change=Excel的列名與原數據集不一致
|
||||
i18n_timed_task=定時任務
|
||||
@ -1448,6 +1448,7 @@ export default {
|
||||
},
|
||||
// 记录当前样式
|
||||
recordCurStyle() {
|
||||
debugger
|
||||
const style = {
|
||||
...this.defaultStyle
|
||||
}
|
||||
@ -1462,6 +1463,7 @@ export default {
|
||||
|
||||
// 记录当前样式 矩阵处理
|
||||
recordMatrixCurStyle() {
|
||||
debugger
|
||||
const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
|
||||
@ -122,7 +122,8 @@ const list = [
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
borderColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
ref="dateRef"
|
||||
v-model="options.value"
|
||||
:type="options.attrs.type"
|
||||
:range-separator="options.attrs.rangeSeparator"
|
||||
:start-placeholder="options.attrs.startPlaceholder"
|
||||
:end-placeholder="options.attrs.endPlaceholder"
|
||||
:placeholder="options.attrs.placeholder"
|
||||
:range-separator="$t(options.attrs.rangeSeparator)"
|
||||
:start-placeholder="$t(options.attrs.startPlaceholder)"
|
||||
:end-placeholder="$t(options.attrs.endPlaceholder)"
|
||||
:placeholder="$t(options.attrs.placeholder)"
|
||||
style="min-height: 36px;"
|
||||
@change="dateChange"
|
||||
/>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
v-if="options!== null && options.attrs!==null"
|
||||
v-model="values"
|
||||
resize="vertical"
|
||||
:placeholder="options.attrs.placeholder"
|
||||
:placeholder="$t(options.attrs.placeholder)"
|
||||
@keypress.enter.native="search"
|
||||
@dblclick="setEdit"
|
||||
>
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
<el-form v-if="options!== null && options.attrs!==null" ref="form" :model="form" :rules="rules">
|
||||
<div class="de-number-range-container">
|
||||
<el-form-item prop="min">
|
||||
<el-input v-model="form.min" :placeholder="options.attrs.placeholder" @change="handleMinChange" />
|
||||
<el-input v-model="form.min" :placeholder="$t(options.attrs.placeholder_min)" @change="handleMinChange" />
|
||||
</el-form-item>
|
||||
<span>~</span>
|
||||
<span>{{ $t('denumberrange.split_placeholder') }}</span>
|
||||
<el-form-item prop="max">
|
||||
<el-input v-model="form.max" :placeholder="options.attrs.placeholder" @change="handleMaxChange" />
|
||||
<el-input v-model="form.max" :placeholder="$t(options.attrs.placeholder_max)" @change="handleMaxChange" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -40,12 +40,12 @@ export default {
|
||||
form: { min: '', max: '' },
|
||||
rules: {
|
||||
min: [
|
||||
{ required: true, message: this.$t('denumberrange.please_key_min'), trigger: 'blur' },
|
||||
// { required: true, message: this.$t('denumberrange.please_key_min'), trigger: 'blur' },
|
||||
{ validator: this.validateCom, trigger: 'blur' },
|
||||
{ validator: this.validateMin, trigger: 'blur' }
|
||||
],
|
||||
max: [
|
||||
{ required: true, message: this.$t('denumberrange.please_key_max'), trigger: 'blur' },
|
||||
// { required: true, message: this.$t('denumberrange.please_key_max'), trigger: 'blur' },
|
||||
{ validator: this.validateCom, trigger: 'blur' },
|
||||
{ validator: this.validateMax, trigger: 'blur' }
|
||||
]
|
||||
@ -98,6 +98,7 @@ export default {
|
||||
this.$refs.form.validateField('min')
|
||||
},
|
||||
validateCom(rule, value, callback) {
|
||||
if (!value) return callback()
|
||||
const one = Number(value)
|
||||
if (Number.isInteger(one)) {
|
||||
if (one < MIN_NUMBER) {
|
||||
@ -110,6 +111,7 @@ export default {
|
||||
return callback(new Error(this.$t('denumberrange.must_int')))
|
||||
},
|
||||
validateMin(rule, value, callback) {
|
||||
if (!value) return callback()
|
||||
const one = Number(value)
|
||||
const max = Number(this.form.max)
|
||||
if (!max || one < max) {
|
||||
@ -118,6 +120,7 @@ export default {
|
||||
return callback(new Error(this.$t('denumberrange.min_out_max')))
|
||||
},
|
||||
validateMax(rule, value, callback) {
|
||||
if (!value) return callback()
|
||||
const one = Number(value)
|
||||
const min = Number(this.form.min)
|
||||
if (!min || one > min) {
|
||||
@ -141,7 +144,27 @@ export default {
|
||||
value: [this.form.min, this.form.max],
|
||||
operator: this.operator
|
||||
}
|
||||
this.inDraw && this.$store.commit('addViewFilter', param)
|
||||
if (this.form.min && this.form.max) {
|
||||
this.inDraw && this.$store.commit('addViewFilter', param)
|
||||
return
|
||||
}
|
||||
if (!this.form.min && !this.form.max) {
|
||||
param.value = []
|
||||
this.inDraw && this.$store.commit('addViewFilter', param)
|
||||
return
|
||||
}
|
||||
if (this.form.min) {
|
||||
param.value = [this.form.min]
|
||||
param.operator = 'ge'
|
||||
this.inDraw && this.$store.commit('addViewFilter', param)
|
||||
return
|
||||
}
|
||||
if (this.form.max) {
|
||||
param.value = [this.form.max]
|
||||
param.operator = 'le'
|
||||
this.inDraw && this.$store.commit('addViewFilter', param)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,7 +174,7 @@ export default {
|
||||
.de-number-range-container {
|
||||
display: inline;
|
||||
>>>div.el-form-item {
|
||||
width: calc(50% - 5px) !important;
|
||||
width: calc(50% - 10px) !important;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
:collapse-tags="showNumber"
|
||||
:clearable="!options.attrs.multiple"
|
||||
:multiple="options.attrs.multiple"
|
||||
:placeholder="options.attrs.placeholder"
|
||||
:placeholder="$t(options.attrs.placeholder)"
|
||||
:popper-append-to-body="inScreen"
|
||||
@change="changeValue"
|
||||
>
|
||||
|
||||
@ -2,14 +2,15 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-zuoce-qujian',
|
||||
label: '数值区间',
|
||||
label: 'denumberrange.label',
|
||||
defaultClass: 'text-filter'
|
||||
}
|
||||
|
||||
const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
placeholder: '请输入整数',
|
||||
placeholder_min: 'denumberrange.please_key_min',
|
||||
placeholder_max: 'denumberrange.please_key_max',
|
||||
viewIds: []
|
||||
},
|
||||
value: ''
|
||||
|
||||
@ -3,7 +3,7 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-xialakuang',
|
||||
label: '数字下拉',
|
||||
label: 'denumberselect.label',
|
||||
defaultClass: 'text-filter'
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
multiple: false,
|
||||
placeholder: '请选择',
|
||||
placeholder: 'denumberselect.placeholder',
|
||||
datas: [],
|
||||
key: 'id',
|
||||
label: 'text',
|
||||
|
||||
@ -2,14 +2,14 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-shuru',
|
||||
label: '文本搜索',
|
||||
label: 'deinputsearch.label',
|
||||
defaultClass: 'text-filter'
|
||||
}
|
||||
|
||||
const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
placeholder: '请输入关键字',
|
||||
placeholder: 'deinputsearch.placeholder',
|
||||
viewIds: []
|
||||
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-xialakuang',
|
||||
label: '文本下拉',
|
||||
label: 'detextselect.label',
|
||||
defaultClass: 'text-filter'
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
multiple: false,
|
||||
placeholder: '请选择',
|
||||
placeholder: 'detextselect.placeholder',
|
||||
viewIds: [],
|
||||
datas: [],
|
||||
key: 'id',
|
||||
|
||||
@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-riqi',
|
||||
label: '日期范围',
|
||||
label: 'dedaterange.label',
|
||||
defaultClass: 'time-filter'
|
||||
}
|
||||
|
||||
@ -10,9 +10,9 @@ const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
type: 'daterange',
|
||||
rangeSeparator: '至',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
rangeSeparator: 'dedaterange.split_placeholder',
|
||||
startPlaceholder: 'dedaterange.to_placeholder',
|
||||
endPlaceholder: 'dedaterange.from_placeholder',
|
||||
viewIds: []
|
||||
},
|
||||
value: ''
|
||||
|
||||
@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-ri',
|
||||
label: '日期',
|
||||
label: 'dedate.label',
|
||||
defaultClass: 'time-filter'
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
type: 'date',
|
||||
placeholder: '请选择日期',
|
||||
placeholder: 'dedate.placeholder',
|
||||
viewIds: []
|
||||
},
|
||||
value: ''
|
||||
|
||||
@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-yue',
|
||||
label: '年月',
|
||||
label: 'deyearmonth.label',
|
||||
defaultClass: 'time-filter'
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
type: 'month',
|
||||
placeholder: '请选择年月',
|
||||
placeholder: 'deyearmonth.placeholder',
|
||||
viewIds: []
|
||||
},
|
||||
value: ''
|
||||
|
||||
@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
icon: 'iconfont icon-nian',
|
||||
label: '年份',
|
||||
label: 'deyear.label',
|
||||
defaultClass: 'time-filter'
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ const dialogPanel = {
|
||||
options: {
|
||||
attrs: {
|
||||
type: 'year',
|
||||
placeholder: '请选择年份',
|
||||
placeholder: 'deyear.placeholder',
|
||||
viewIds: []
|
||||
},
|
||||
value: ''
|
||||
|
||||
@ -827,6 +827,7 @@ export default {
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
datalist: 'Data Set',
|
||||
name: 'DataSet Name',
|
||||
add_group: 'Add Group',
|
||||
add_scene: 'Add Scene',
|
||||
group: 'Group',
|
||||
@ -961,9 +962,10 @@ export default {
|
||||
task_status: 'Task status',
|
||||
dataset: 'Data set',
|
||||
search_by_name: 'Search by name',
|
||||
underway: 'Running',
|
||||
stopped: 'Stopped',
|
||||
exec: 'Execute',
|
||||
underway: 'Waiting for execution',
|
||||
stopped: 'End',
|
||||
pending: 'Pause',
|
||||
exec: 'Execute Once',
|
||||
confirm_exec: 'Manual trigger execution？',
|
||||
change_success: 'State switch successful'
|
||||
},
|
||||
@ -1289,6 +1291,8 @@ export default {
|
||||
channel_inner_msg: 'On site news'
|
||||
},
|
||||
denumberrange: {
|
||||
label: 'Number range',
|
||||
split_placeholder: 'To',
|
||||
please_key_min: 'Please key min value',
|
||||
please_key_max: 'Please key max value',
|
||||
out_of_min: 'The min value cannot be less than the min integer -2³²',
|
||||
@ -1296,5 +1300,35 @@ export default {
|
||||
must_int: 'Please key interger',
|
||||
min_out_max: 'The min value must be less than the max value',
|
||||
max_out_min: 'The max value must be more than the min value'
|
||||
},
|
||||
denumberselect: {
|
||||
label: 'Number selector',
|
||||
placeholder: 'Please select'
|
||||
},
|
||||
deinputsearch: {
|
||||
label: 'Text search',
|
||||
placeholder: 'Please key keyword'
|
||||
},
|
||||
detextselect: {
|
||||
label: 'Text selector',
|
||||
placeholder: 'Please select'
|
||||
},
|
||||
dedaterange: {
|
||||
label: 'Date range',
|
||||
to_placeholder: 'End date',
|
||||
from_placeholder: 'Start date',
|
||||
split_placeholder: 'To'
|
||||
},
|
||||
dedate: {
|
||||
label: 'Date',
|
||||
placeholder: 'Please select date'
|
||||
},
|
||||
deyearmonth: {
|
||||
label: 'Month',
|
||||
placeholder: 'Please select month'
|
||||
},
|
||||
deyear: {
|
||||
label: 'Year',
|
||||
placeholder: 'Please select year'
|
||||
}
|
||||
}
|
||||
|
||||
@ -827,6 +827,7 @@ export default {
|
||||
dataset: {
|
||||
sheet_warn: '有多個sheet頁面，默認抽取第一個',
|
||||
datalist: '數據集',
|
||||
name: '數據集名稱',
|
||||
add_group: '添加分組',
|
||||
add_scene: '添加場景',
|
||||
group: '分組',
|
||||
@ -961,9 +962,10 @@ export default {
|
||||
task_status: '任務狀態',
|
||||
dataset: '數據集',
|
||||
search_by_name: '根據名稱搜索',
|
||||
underway: '運行中',
|
||||
stopped: '停止',
|
||||
exec: '執行',
|
||||
underway: '等待執行',
|
||||
stopped: '執行结束',
|
||||
pending: '暫停',
|
||||
exec: '執行一次',
|
||||
confirm_exec: '手動觸發執行？',
|
||||
change_success: '狀態切換成功'
|
||||
},
|
||||
@ -1289,6 +1291,8 @@ export default {
|
||||
channel_inner_msg: '站內消息'
|
||||
},
|
||||
denumberrange: {
|
||||
label: '數值區間',
|
||||
split_placeholder: '至',
|
||||
please_key_min: '請輸入最小值',
|
||||
please_key_max: '請輸入最大值',
|
||||
out_of_min: '最小值不能小于最小整數-2³²',
|
||||
@ -1296,5 +1300,35 @@ export default {
|
||||
must_int: '請輸入整數',
|
||||
min_out_max: '最小值必須小于最大值',
|
||||
max_out_min: '最大值必須大于最小值'
|
||||
},
|
||||
denumberselect: {
|
||||
label: '數字下拉',
|
||||
placeholder: '請選擇'
|
||||
},
|
||||
deinputsearch: {
|
||||
label: '文本搜索',
|
||||
placeholder: '請輸入關鍵字'
|
||||
},
|
||||
detextselect: {
|
||||
label: '文本下拉',
|
||||
placeholder: '請選擇'
|
||||
},
|
||||
dedaterange: {
|
||||
label: '日期範圍',
|
||||
to_placeholder: '結束日期',
|
||||
from_placeholder: '開始日期',
|
||||
split_placeholder: '至'
|
||||
},
|
||||
dedate: {
|
||||
label: '日期',
|
||||
placeholder: '請選擇日期'
|
||||
},
|
||||
deyearmonth: {
|
||||
label: '年月',
|
||||
placeholder: '請選擇年月'
|
||||
},
|
||||
deyear: {
|
||||
label: '年份',
|
||||
placeholder: '請選擇年份'
|
||||
}
|
||||
}
|
||||
|
||||
@ -827,6 +827,7 @@ export default {
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
datalist: '数据集',
|
||||
name: '数据集名称',
|
||||
add_group: '添加分组',
|
||||
add_scene: '添加场景',
|
||||
group: '分组',
|
||||
@ -961,9 +962,10 @@ export default {
|
||||
task_status: '任务状态',
|
||||
dataset: '数据集',
|
||||
search_by_name: '根据名称搜索',
|
||||
underway: '运行中',
|
||||
stopped: '停止',
|
||||
exec: '执行',
|
||||
underway: '等待执行',
|
||||
stopped: '执行结束',
|
||||
pending: '暂停',
|
||||
exec: '执行一次',
|
||||
confirm_exec: '手动触发执行？',
|
||||
change_success: '状态切换成功'
|
||||
},
|
||||
@ -1291,6 +1293,8 @@ export default {
|
||||
channel_inner_msg: '站内消息'
|
||||
},
|
||||
denumberrange: {
|
||||
label: '数值区间',
|
||||
split_placeholder: '至',
|
||||
please_key_min: '请输入最小值',
|
||||
please_key_max: '请输入最大值',
|
||||
out_of_min: '最小值不能小于最小整数-2³²',
|
||||
@ -1298,5 +1302,35 @@ export default {
|
||||
must_int: '请输入整数',
|
||||
min_out_max: '最小值必须小于最大值',
|
||||
max_out_min: '最大值必须大于最小值'
|
||||
},
|
||||
denumberselect: {
|
||||
label: '数字下拉',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
deinputsearch: {
|
||||
label: '文本搜索',
|
||||
placeholder: '请输入关键字'
|
||||
},
|
||||
detextselect: {
|
||||
label: '文本下拉',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
dedaterange: {
|
||||
label: '日期范围',
|
||||
to_placeholder: '结束日期',
|
||||
from_placeholder: '开始日期',
|
||||
split_placeholder: '至'
|
||||
},
|
||||
dedate: {
|
||||
label: '日期',
|
||||
placeholder: '请选择日期'
|
||||
},
|
||||
deyearmonth: {
|
||||
label: '年月',
|
||||
placeholder: '请选择年月'
|
||||
},
|
||||
deyear: {
|
||||
label: '年份',
|
||||
placeholder: '请选择年份'
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,6 +54,18 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">弧形框</div>
|
||||
<div class="code-name">&#xe603;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">弧形框</div>
|
||||
<div class="code-name">&#xe602;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">透明</div>
|
||||
@ -294,9 +306,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1626919869905') format('woff2'),
|
||||
url('iconfont.woff?t=1626919869905') format('woff'),
|
||||
url('iconfont.ttf?t=1626919869905') format('truetype');
|
||||
src: url('iconfont.woff2?t=1626927148990') format('woff2'),
|
||||
url('iconfont.woff?t=1626927148990') format('woff'),
|
||||
url('iconfont.ttf?t=1626927148990') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -322,6 +334,24 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-weibiaoti-1"></span>
|
||||
<div class="name">
|
||||
弧形框
|
||||
</div>
|
||||
<div class="code-name">.icon-weibiaoti-1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-weibiaoti-"></span>
|
||||
<div class="name">
|
||||
弧形框
|
||||
</div>
|
||||
<div class="code-name">.icon-weibiaoti-
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-touming"></span>
|
||||
<div class="name">
|
||||
@ -682,6 +712,22 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-weibiaoti-1"></use>
|
||||
</svg>
|
||||
<div class="name">弧形框</div>
|
||||
<div class="code-name">#icon-weibiaoti-1</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-weibiaoti-"></use>
|
||||
</svg>
|
||||
<div class="name">弧形框</div>
|
||||
<div class="code-name">#icon-weibiaoti-</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-touming"></use>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2459092 */
|
||||
src: url('iconfont.woff2?t=1626919869905') format('woff2'),
|
||||
url('iconfont.woff?t=1626919869905') format('woff'),
|
||||
url('iconfont.ttf?t=1626919869905') format('truetype');
|
||||
src: url('iconfont.woff2?t=1626927148990') format('woff2'),
|
||||
url('iconfont.woff?t=1626927148990') format('woff'),
|
||||
url('iconfont.ttf?t=1626927148990') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-weibiaoti-1:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-weibiaoti-:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-touming:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "12617190",
|
||||
"name": "弧形框",
|
||||
"font_class": "weibiaoti-1",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
},
|
||||
{
|
||||
"icon_id": "12617065",
|
||||
"name": "弧形框",
|
||||
"font_class": "weibiaoti-",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "4454064",
|
||||
"name": "透明",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -205,7 +205,31 @@ export const BASE_BAR = {
|
||||
series: [],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
type: 'slider',
|
||||
show: false,
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
yAxisIndex: [0],
|
||||
left: '93%',
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -237,7 +261,31 @@ export const HORIZONTAL_BAR = {
|
||||
series: [],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
type: 'slider',
|
||||
show: false,
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
yAxisIndex: [0],
|
||||
left: '93%',
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -271,7 +319,31 @@ export const BASE_LINE = {
|
||||
series: [],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
type: 'slider',
|
||||
show: false,
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
yAxisIndex: [0],
|
||||
left: '93%',
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,25 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.color')" class="form-item">
|
||||
<colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
|
||||
<el-form-item :label="$t('chart.color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.color" class="color-picker-style" @change="changeBackgroundStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -100,4 +110,8 @@ export default {
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,70 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
v-model="isSetting"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.icon')" class="form-item">
|
||||
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
|
||||
<el-option
|
||||
v-for="item in iconSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.orient')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
|
||||
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
|
||||
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
|
||||
<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">
|
||||
<colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
|
||||
<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="legendForm.vPosition" size="mini" @change="changeLegendStyle">
|
||||
<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>
|
||||
</el-col>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="legendForm.show">
|
||||
<el-form-item :label="$t('chart.icon')" class="form-item">
|
||||
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
|
||||
<el-option
|
||||
v-for="item in iconSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.orient')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
|
||||
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
|
||||
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
|
||||
<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="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
|
||||
<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="legendForm.vPosition" size="mini" @change="changeLegendStyle">
|
||||
<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>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- v-model="isSetting"-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">-->
|
||||
<!-- <!– <el-form-item :label="$t('chart.show')" class="form-item">–>-->
|
||||
<!-- <!– <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- <el-form-item :label="$t('chart.icon')" class="form-item">-->
|
||||
<!-- <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in iconSymbolOptions"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.name"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.orient')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">-->
|
||||
<!-- <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
|
||||
<!-- <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">-->
|
||||
<!-- <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">-->
|
||||
<!-- <colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.text_h_position')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">-->
|
||||
<!-- <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="legendForm.vPosition" size="mini" @change="changeLegendStyle">-->
|
||||
<!-- <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>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show || !hasDataPermission('manage',param.privileges)">
|
||||
{{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" />
|
||||
<el-switch
|
||||
v-model="legendForm.show"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
class="switch-style"
|
||||
@click.stop.native
|
||||
@change="changeLegendStyle"
|
||||
/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show || !hasDataPermission('manage',param.privileges)">-->
|
||||
<!-- {{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" />-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="legendForm.show"-->
|
||||
<!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
|
||||
<!-- class="switch-style"-->
|
||||
<!-- @click.stop.native-->
|
||||
<!-- @change="changeLegendStyle"-->
|
||||
<!-- />-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -171,4 +218,8 @@ export default {
|
||||
right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,58 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.color')" class="form-item">
|
||||
<colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
|
||||
<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.axis_line')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
|
||||
<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.split_line')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.split_color')" class="form-item">
|
||||
<colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.shadow')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
|
||||
<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.axis_line')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
|
||||
<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.split_line')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.split_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.shadow')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.name')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">-->
|
||||
<!-- <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">-->
|
||||
<!-- <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.axis_line')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">-->
|
||||
<!-- <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">-->
|
||||
<!-- <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.split_line')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.split_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.shadow')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">
|
||||
{{ $t('chart.split') }}<i class="el-icon-setting el-icon--right" />
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">-->
|
||||
<!-- {{ $t('chart.split') }}<i class="el-icon-setting el-icon--right" />-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -156,4 +197,8 @@ export default {
|
||||
right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,68 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
v-model="isSetting"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<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">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.title')" class="form-item">
|
||||
<el-input
|
||||
v-model="titleForm.title"
|
||||
size="mini"
|
||||
:placeholder="$t('chart.title')"
|
||||
clearable
|
||||
@blur="changeTitleStyle"
|
||||
@input="inputOnInput($event)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<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">
|
||||
<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">
|
||||
<colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />
|
||||
</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">
|
||||
<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 v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
|
||||
<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">{{ $t('chart.italic') }}</el-checkbox>
|
||||
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="titleForm.show">
|
||||
<el-form-item :label="$t('chart.title')" class="form-item">
|
||||
<el-input
|
||||
v-model="titleForm.title"
|
||||
size="mini"
|
||||
:placeholder="$t('chart.title')"
|
||||
clearable
|
||||
@blur="changeTitleStyle"
|
||||
@input="inputOnInput($event)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<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">
|
||||
<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" @change="changeTitleStyle" />
|
||||
</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">
|
||||
<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 v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
|
||||
<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">{{ $t('chart.italic') }}</el-checkbox>
|
||||
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- v-model="isSetting"-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <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">{{ $t('chart.show') }}</el-checkbox>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- <el-form-item :label="$t('chart.title')" class="form-item">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="titleForm.title"-->
|
||||
<!-- size="mini"-->
|
||||
<!-- :placeholder="$t('chart.title')"-->
|
||||
<!-- clearable-->
|
||||
<!-- @blur="changeTitleStyle"-->
|
||||
<!-- @input="inputOnInput($event)"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <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">-->
|
||||
<!-- <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">-->
|
||||
<!-- <colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />-->
|
||||
<!-- </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">-->
|
||||
<!-- <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 v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">-->
|
||||
<!-- <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">{{ $t('chart.italic') }}</el-checkbox>-->
|
||||
<!-- <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show || !hasDataPermission('manage',param.privileges)">
|
||||
{{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" />
|
||||
<el-switch
|
||||
v-model="titleForm.show"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
class="switch-style"
|
||||
@click.stop.native
|
||||
@change="changeTitleStyle"
|
||||
/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show || !hasDataPermission('manage',param.privileges)">-->
|
||||
<!-- {{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" />-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="titleForm.show"-->
|
||||
<!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
|
||||
<!-- class="switch-style"-->
|
||||
<!-- @click.stop.native-->
|
||||
<!-- @change="changeTitleStyle"-->
|
||||
<!-- />-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -170,4 +215,8 @@ export default {
|
||||
right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,89 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
v-model="isSetting"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
|
||||
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</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.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
|
||||
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
|
||||
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
|
||||
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
|
||||
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- v-model="isSetting"-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">-->
|
||||
<!-- <!– <el-form-item :label="$t('chart.show')" class="form-item">–>-->
|
||||
<!-- <!– <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- <el-form-item :label="$t('chart.position')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">-->
|
||||
<!-- <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</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.name')" class="form-item">-->
|
||||
<!-- <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_name_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">-->
|
||||
<!-- <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">-->
|
||||
<!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-divider />-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <span v-show="axisForm.splitLine.show">-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_type')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">-->
|
||||
<!-- <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-divider />-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <span v-show="axisForm.axisLabel.show">-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">-->
|
||||
<!-- <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">-->
|
||||
<!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-divider />-->
|
||||
<!-- <el-form-item :label="$t('chart.content_formatter')" class="form-item">-->
|
||||
<!-- <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">
|
||||
{{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" />
|
||||
<el-switch
|
||||
v-model="axisForm.show"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
class="switch-style"
|
||||
@click.stop.native
|
||||
@change="changeXAxisStyle"
|
||||
/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">-->
|
||||
<!-- {{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" />-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="axisForm.show"-->
|
||||
<!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
|
||||
<!-- class="switch-style"-->
|
||||
<!-- @click.stop.native-->
|
||||
<!-- @change="changeXAxisStyle"-->
|
||||
<!-- />-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -191,4 +257,8 @@ export default {
|
||||
right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,89 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
v-model="isSetting"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</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.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
|
||||
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
|
||||
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
|
||||
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
|
||||
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- v-model="isSetting"-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">-->
|
||||
<!-- <!– <el-form-item :label="$t('chart.show')" class="form-item">–>-->
|
||||
<!-- <!– <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- <el-form-item :label="$t('chart.position')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">-->
|
||||
<!-- <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</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.name')" class="form-item">-->
|
||||
<!-- <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_name_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">-->
|
||||
<!-- <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">-->
|
||||
<!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-divider />-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <span v-show="axisForm.splitLine.show">-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_type')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">-->
|
||||
<!-- <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-divider />-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <span v-show="axisForm.axisLabel.show">-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">-->
|
||||
<!-- <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">-->
|
||||
<!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-divider />-->
|
||||
<!-- <el-form-item :label="$t('chart.content_formatter')" class="form-item">-->
|
||||
<!-- <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">
|
||||
{{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" />
|
||||
<el-switch
|
||||
v-model="axisForm.show"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
class="switch-style"
|
||||
@click.stop.native
|
||||
@change="changeYAxisStyle"
|
||||
/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">-->
|
||||
<!-- {{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" />-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="axisForm.show"-->
|
||||
<!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
|
||||
<!-- class="switch-style"-->
|
||||
<!-- @click.stop.native-->
|
||||
<!-- @change="changeYAxisStyle"-->
|
||||
<!-- />-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -191,4 +257,8 @@ export default {
|
||||
right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,57 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
|
||||
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
|
||||
<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-form-item>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
|
||||
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
|
||||
<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-form-item>
|
||||
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
|
||||
<colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
|
||||
<colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="sourceType==='view' || sourceType==='panelTable'">
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
|
||||
<colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
|
||||
<colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
|
||||
<colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<!-- 暂时不支持该功能-->
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="sourceType==='view' || sourceType==='panelTable'">
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<!-- 暂时不支持该功能-->
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('text')" :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" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('text')" :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" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">-->
|
||||
<!-- <div v-if="sourceType==='view' || sourceType==='panelEchart'">-->
|
||||
<!-- <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">-->
|
||||
<!-- <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">-->
|
||||
<!-- <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-form-item>-->
|
||||
|
||||
<el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="sourceType==='view' || sourceType==='panelTable'">-->
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">-->
|
||||
<!-- <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <!– 暂时不支持该功能–>-->
|
||||
<!-- <!– <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">–>-->
|
||||
<!-- <!– <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <el-form-item v-show="chart.type && !chart.type.includes('text')" :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" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<!-- <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -226,4 +268,8 @@ export default {
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,84 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
v-model="isSetting"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<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">
|
||||
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.label_position')" class="form-item">
|
||||
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
|
||||
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<div style="width: 100%;">
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="labelForm.show">
|
||||
<el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<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="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.label_position')" class="form-item">
|
||||
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
|
||||
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</span>
|
||||
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<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">
|
||||
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<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="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- v-model="isSetting"-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">-->
|
||||
<!-- <!– <el-form-item :label="$t('chart.show')" class="form-item">–>-->
|
||||
<!-- <!– <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- <el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
|
||||
<!-- <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">-->
|
||||
<!-- <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">-->
|
||||
<!-- <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.label_position')" class="form-item">-->
|
||||
<!-- <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">-->
|
||||
<!-- <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item class="form-item">-->
|
||||
<!-- <span slot="label">-->
|
||||
<!-- <span class="span-box">-->
|
||||
<!-- <span>{{ $t('chart.content_formatter') }}</span>-->
|
||||
<!-- <el-tooltip class="item" effect="dark" placement="bottom">-->
|
||||
<!-- <div slot="content">-->
|
||||
<!-- 字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。-->
|
||||
<!-- </div>-->
|
||||
<!-- <i class="el-icon-info" style="cursor: pointer;" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
<!-- </span>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show || !hasDataPermission('manage',param.privileges)">
|
||||
{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" />
|
||||
<el-switch
|
||||
v-model="labelForm.show"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
class="switch-style"
|
||||
@click.stop.native
|
||||
@change="changeLabelAttr"
|
||||
/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
|
||||
<!-- <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">-->
|
||||
<!-- <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">-->
|
||||
<!-- <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item class="form-item">-->
|
||||
<!-- <span slot="label">-->
|
||||
<!-- <span class="span-box">-->
|
||||
<!-- <span>{{ $t('chart.content_formatter') }}</span>-->
|
||||
<!-- </span>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show || !hasDataPermission('manage',param.privileges)">-->
|
||||
<!-- {{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" />-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="labelForm.show"-->
|
||||
<!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
|
||||
<!-- class="switch-style"-->
|
||||
<!-- @click.stop.native-->
|
||||
<!-- @change="changeLabelAttr"-->
|
||||
<!-- />-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -189,4 +250,8 @@ export default {
|
||||
right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,151 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
|
||||
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_area')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
|
||||
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_area')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
|
||||
<span v-show="chart.type && chart.type.includes('pie-rose')">
|
||||
<el-form-item :label="$t('chart.rose_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
|
||||
<el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
|
||||
<el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</el-form>
|
||||
<span v-show="chart.type && chart.type.includes('pie-rose')">
|
||||
<el-form-item :label="$t('chart.rose_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
|
||||
<el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
|
||||
<el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.shape')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
|
||||
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
|
||||
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.shape')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
|
||||
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
|
||||
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
|
||||
<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.table_item_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
|
||||
<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.table_title_height')" class="form-item">
|
||||
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_item_height')" class="form-item">
|
||||
<el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
|
||||
<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.table_item_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
|
||||
<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.table_title_height')" class="form-item">
|
||||
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_item_height')" class="form-item">
|
||||
<el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
|
||||
<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.quota_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
|
||||
<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.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
|
||||
<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.quota_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
|
||||
<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.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <el-popover-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.adapt')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.line_type')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
|
||||
<!-- <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.line_symbol')" class="form-item">-->
|
||||
<!-- <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in lineSymbolOptions"-->
|
||||
<!-- :key="item.value"-->
|
||||
<!-- :label="item.name"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.line_smooth')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.line_area')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<!-- <span v-show="chart.type && chart.type.includes('pie-rose')">-->
|
||||
<!-- <el-form-item :label="$t('chart.rose_type')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">-->
|
||||
<!-- <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </span>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.shape')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">-->
|
||||
<!-- <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">-->
|
||||
<!-- <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">-->
|
||||
<!-- <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.table_item_fontsize')" class="form-item">-->
|
||||
<!-- <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">-->
|
||||
<!-- <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.table_title_height')" class="form-item">-->
|
||||
<!-- <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.table_item_height')" class="form-item">-->
|
||||
<!-- <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">-->
|
||||
<!-- <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">-->
|
||||
<!-- <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">-->
|
||||
<!-- <el-form-item :label="$t('chart.dimension_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">-->
|
||||
<!-- <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">-->
|
||||
<!-- <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.quota_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.quota_font_size')" class="form-item">-->
|
||||
<!-- <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">-->
|
||||
<!-- <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.space_split')" class="form-item">-->
|
||||
<!-- <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<!-- <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,72 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
v-model="isSetting"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.trigger_position')" class="form-item">
|
||||
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
|
||||
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
|
||||
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
|
||||
<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">
|
||||
<colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
|
||||
<br>
|
||||
在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
|
||||
<br>
|
||||
不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
|
||||
<br><br>
|
||||
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
|
||||
<br>
|
||||
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
|
||||
<br>
|
||||
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
|
||||
<br>
|
||||
饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="tooltipForm.show">
|
||||
<el-form-item :label="$t('chart.trigger_position')" class="form-item">
|
||||
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
|
||||
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
|
||||
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
|
||||
<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="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
|
||||
<br>
|
||||
在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
|
||||
<br>
|
||||
不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
|
||||
<br><br>
|
||||
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
|
||||
<br>
|
||||
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
|
||||
<br>
|
||||
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
|
||||
<br>
|
||||
饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</span>
|
||||
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<!-- <div style="width: 100%">-->
|
||||
<!-- <el-popover-->
|
||||
<!-- v-model="isSetting"-->
|
||||
<!-- placement="right"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- >-->
|
||||
<!-- <el-col>-->
|
||||
<!-- <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">-->
|
||||
<!-- <!– <el-form-item :label="$t('chart.show')" class="form-item">–>-->
|
||||
<!-- <!– <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>–>-->
|
||||
<!-- <!– </el-form-item>–>-->
|
||||
<!-- <el-form-item :label="$t('chart.trigger_position')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">-->
|
||||
<!-- <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
|
||||
<!-- <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">-->
|
||||
<!-- <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">-->
|
||||
<!-- <colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item class="form-item">-->
|
||||
<!-- <span slot="label">-->
|
||||
<!-- <span class="span-box">-->
|
||||
<!-- <span>{{ $t('chart.content_formatter') }}</span>-->
|
||||
<!-- <el-tooltip class="item" effect="dark" placement="bottom">-->
|
||||
<!-- <div slot="content">-->
|
||||
<!-- 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。-->
|
||||
<!-- <br>-->
|
||||
<!-- 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。-->
|
||||
<!-- <br>-->
|
||||
<!-- 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：-->
|
||||
<!-- <br><br>-->
|
||||
<!-- 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）-->
|
||||
<!-- <br>-->
|
||||
<!-- 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）-->
|
||||
<!-- <br>-->
|
||||
<!-- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）-->
|
||||
<!-- <br>-->
|
||||
<!-- 饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）-->
|
||||
<!-- </div>-->
|
||||
<!-- <i class="el-icon-info" style="cursor: pointer;" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
<!-- </span>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show || !hasDataPermission('manage',param.privileges)">
|
||||
{{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" />
|
||||
<el-switch
|
||||
v-model="tooltipForm.show"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
class="switch-style"
|
||||
@click.stop.native
|
||||
@change="changeTooltipAttr"
|
||||
/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show || !hasDataPermission('manage',param.privileges)">-->
|
||||
<!-- {{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" />-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="tooltipForm.show"-->
|
||||
<!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
|
||||
<!-- class="switch-style"-->
|
||||
<!-- @click.stop.native-->
|
||||
<!-- @change="changeTooltipAttr"-->
|
||||
<!-- />-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -165,4 +214,8 @@ export default {
|
||||
right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.color-picker-style{
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -330,37 +330,73 @@
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
|
||||
<div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;" class="attr-style">
|
||||
<el-row class="padding-lr">
|
||||
<span>{{ $t('chart.style_priority') }}</span>
|
||||
<el-row>
|
||||
<el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
|
||||
<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 class="view-panel">
|
||||
<div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style">
|
||||
<el-row class="padding-lr">
|
||||
<span>{{ $t('chart.style_priority') }}</span>
|
||||
<el-row>
|
||||
<el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
|
||||
<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>
|
||||
<el-row class="padding-lr">
|
||||
<span>{{ $t('chart.shape_attr') }}</span>
|
||||
<el-row>
|
||||
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
|
||||
<size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
|
||||
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
|
||||
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
|
||||
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
|
||||
<el-collapse v-model="attrActiveNames" class="style-collapse">
|
||||
<el-collapse-item name="color" :title="$t('chart.color')">
|
||||
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="chart.type !== 'map'" name="size" :title="$t('chart.size')">
|
||||
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="label" :title="$t('chart.label')">
|
||||
<label-selector :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="tooltip" :title="$t('chart.tooltip')">
|
||||
<tooltip-selector :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<!-- <el-row>-->
|
||||
<!-- <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />-->
|
||||
<!-- <size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />-->
|
||||
<!-- <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />-->
|
||||
<!-- <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />-->
|
||||
<!-- </el-row>-->
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row class="padding-lr">
|
||||
<span>{{ $t('chart.module_style') }}</span>
|
||||
<el-row>
|
||||
<x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
|
||||
<y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
|
||||
<split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
|
||||
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
|
||||
<legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
|
||||
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
|
||||
<span class="padding-lr">{{ $t('chart.module_style') }}</span>
|
||||
<el-collapse v-model="styleActiveNames" class="style-collapse">
|
||||
<el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" name="xAxis" :title="$t('chart.xAxis')">
|
||||
<x-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" name="yAxis" :title="$t('chart.yAxis')">
|
||||
<y-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
|
||||
<split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="title" :title="$t('chart.title')">
|
||||
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" name="legend" :title="$t('chart.legend')">
|
||||
<legend-selector :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="background" :title="$t('chart.background')">
|
||||
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<!-- <el-row>-->
|
||||
<!-- <x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />-->
|
||||
<!-- <y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />-->
|
||||
<!-- <split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />-->
|
||||
<!-- <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
|
||||
<!-- <legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />-->
|
||||
<!-- <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />-->
|
||||
<!-- </el-row>-->
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -610,7 +646,9 @@ export default {
|
||||
editDsField: false,
|
||||
changeDsTitle: '',
|
||||
filterItem: {},
|
||||
places: []
|
||||
places: [],
|
||||
attrActiveNames: [],
|
||||
styleActiveNames: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -671,6 +709,8 @@ export default {
|
||||
this.httpRequest.msg = err.response.data.message
|
||||
return true
|
||||
})
|
||||
} else {
|
||||
this.resetDatasetField()
|
||||
}
|
||||
},
|
||||
save(getData, trigger, needRefreshGroup = false) {
|
||||
@ -1150,11 +1190,14 @@ export default {
|
||||
hideTab() {
|
||||
this.tabStatus = false
|
||||
},
|
||||
resetView() {
|
||||
resetDatasetField() {
|
||||
this.dimension = []
|
||||
this.dimensionData = []
|
||||
this.quota = []
|
||||
this.quotaData = []
|
||||
},
|
||||
resetView() {
|
||||
this.resetDatasetField()
|
||||
this.view = {
|
||||
xAxis: [],
|
||||
yAxis: [],
|
||||
@ -1452,14 +1495,25 @@ export default {
|
||||
|
||||
.attr-selector{
|
||||
width:100%;
|
||||
height: 32px;
|
||||
margin:0 0 6px 0;
|
||||
height: 100%;
|
||||
margin:6px 0;
|
||||
padding:0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white
|
||||
}
|
||||
|
||||
.style-collapse>>>.el-collapse-item__content {
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
.style-collapse>>>.el-collapse-item__header {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 0 0 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.disabled-none-cursor{
|
||||
cursor: not-allowed;
|
||||
pointer-events:none;
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
<svg-icon icon-class="ds-sql" class="ds-icon-sql" />
|
||||
{{ $t('dataset.sql_data') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeClickAddData('excel',data)">
|
||||
<el-dropdown-item :command="beforeClickAddData('excel',data)" :disabled="!kettleRunning">
|
||||
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
|
||||
{{ $t('dataset.excel_data') }}
|
||||
</el-dropdown-item>
|
||||
@ -341,7 +341,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post } from '@/api/dataset/dataset'
|
||||
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post , isKettleRunning} from '@/api/dataset/dataset'
|
||||
import { authModel } from '@/api/system/sysAuth'
|
||||
import GroupMoveSelector from './GroupMoveSelector'
|
||||
import DsMoveSelector from './DsMoveSelector'
|
||||
@ -415,7 +415,8 @@ export default {
|
||||
id: 'id',
|
||||
parentId: 'pid'
|
||||
},
|
||||
isTreeSearch: false
|
||||
isTreeSearch: false,
|
||||
kettleRunning: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -426,6 +427,9 @@ export default {
|
||||
// return this.$store.state.dataset.sceneData
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
this.kettleState()
|
||||
},
|
||||
watch: {
|
||||
search(val) {
|
||||
// if (val && val !== '') {
|
||||
@ -467,7 +471,11 @@ export default {
|
||||
'node': node
|
||||
}
|
||||
},
|
||||
|
||||
kettleState() {
|
||||
isKettleRunning().then(res => {
|
||||
this.kettleRunning = res.data
|
||||
})
|
||||
},
|
||||
clickMore(param) {
|
||||
// console.log(param)
|
||||
switch (param.type) {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<colorPicker v-model="panel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" />
|
||||
<el-color-picker v-model="panel.color" style="cursor: pointer;z-index: 1004;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<div class="filter-widget-icon">
|
||||
<i :class="(widget.icon || 'el-icon-setting') + ' widget-icon-i'" />
|
||||
</div>
|
||||
<div class="filter-widget-text">{{ widget.label }}</div>
|
||||
<div class="filter-widget-text">{{ $t(widget.label) || widget.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,13 @@
|
||||
<el-button icon="el-icon-circle-plus-outline" @click="selectDataset">{{ $t('dataset.task.create') }}</el-button>
|
||||
</template>
|
||||
|
||||
<el-table-column prop="name" :label="$t('dataset.task_name')" />
|
||||
<el-table-column prop="name" :label="$t('dataset.task_name')" >
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-link style="font-size: 12px" @click="jumpTaskRecord(scope.row)">{{ scope.row.name }}</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="datasetName" :label="$t('dataset.task.dataset')" />
|
||||
<el-table-column prop="rate" :label="$t('dataset.execute_rate')">
|
||||
<template slot-scope="scope">
|
||||
@ -21,7 +27,7 @@
|
||||
<span v-if="scope.row.lastExecTime && scope.row.lastExecTime != -1">
|
||||
{{ scope.row.lastExecTime | timestampFormatDate }}
|
||||
</span>
|
||||
<span v-if="scope.row.lastExecTime === -1">--</span>
|
||||
<span v-if="scope.row.lastExecTime === -1"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -31,19 +37,20 @@
|
||||
<span v-if="scope.row.lastExecStatus === 'Underway'" style="color: blue">
|
||||
<i class="el-icon-loading" />
|
||||
{{ $t('dataset.underway') }}
|
||||
</span>
|
||||
<span v-if="scope.row.lastExecStatus === 'Error'" style="color: #ff0000">
|
||||
{{ $t('dataset.error') }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="scope.row.lastExecStatus === 'Error'" style="color: red">
|
||||
<el-link type="danger" style="font-size: 12px" @click="showErrorMassage(scope.row.msg)">{{ $t('dataset.error') }}</el-link>
|
||||
</span>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="nextExecTime" :label="$t('dataset.task.next_exec_time')">
|
||||
<template slot-scope="scope" >
|
||||
<span v-if="scope.row.nextExecTime">
|
||||
<span v-if="scope.row.nextExecTime && scope.row.rate !== 'SIMPLE'">
|
||||
{{ scope.row.nextExecTime | timestampFormatDate }}
|
||||
</span>
|
||||
<span v-if="!scope.row.nextExecTime">--</span>
|
||||
<span v-if="!scope.row.nextExecTime || scope.row.rate === 'SIMPLE'"></span>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
@ -53,8 +60,15 @@
|
||||
<span v-if="scope.row.status === 'Underway'" style="color: green">
|
||||
<el-link type="success" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.underway') }}</el-link>
|
||||
</span>
|
||||
<span v-if="scope.row.status === 'Stopped'">
|
||||
<el-link type="danger" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.stopped') }}</el-link>
|
||||
<span v-if="scope.row.status === 'Stopped'" style="color: red">
|
||||
<div type="danger" style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
|
||||
</span>
|
||||
<span v-if="scope.row.status === 'Pending'" style="color: blue">
|
||||
<el-link type="primary" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.pending') }}</el-link>
|
||||
</span>
|
||||
<span v-if="scope.row.status === 'Exec'" style="color: blue">
|
||||
<i class="el-icon-loading" />
|
||||
{{ $t('dataset.underway') }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -110,10 +124,10 @@
|
||||
</el-form>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="taskForm.rate === 'CRON'" :label="$t('dataset.start_time')" prop="startTime">
|
||||
<el-form-item v-if="taskForm.rate !== 'SIMPLE'" :label="$t('dataset.start_time')" prop="startTime">
|
||||
<el-date-picker v-model="taskForm.startTime" type="datetime" :placeholder="$t('dataset.select_data_time')" size="mini"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="taskForm.rate === 'CRON'" :label="$t('dataset.end_time')" prop="end">
|
||||
<el-form-item v-if="taskForm.rate !== 'SIMPLE'" :label="$t('dataset.end_time')" prop="end">
|
||||
<el-select v-model="taskForm.end" size="mini">
|
||||
<el-option :label="$t('dataset.no_limit')" value="0"/>
|
||||
<el-option :label="$t('dataset.set_end_time')" value="1"/>
|
||||
@ -154,7 +168,7 @@
|
||||
</el-dialog>
|
||||
|
||||
<!--添加任务-选择数据集-->
|
||||
<el-dialog v-dialogDrag :title="$t('chart.add_chart')" :visible="selectDatasetFlag" :show-close="false" width="70%" class="dialog-css" :destroy-on-close="true">
|
||||
<el-dialog v-dialogDrag :title="$t('dataset.task.create')" :visible="selectDatasetFlag" :show-close="false" width="70%" class="dialog-css" :destroy-on-close="true">
|
||||
<table-selector @getTable="getTable" :mode="1" type="db" showMode="datasetTask"/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeCreateTask">{{ $t('chart.cancel') }}</el-button>
|
||||
@ -162,6 +176,19 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('dataset.detail')"
|
||||
:visible="show_error_massage"
|
||||
:show-close="false"
|
||||
width="50%"
|
||||
class="dialog-css"
|
||||
>
|
||||
<span class="err-msg">{{ error_massage }}</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="show_error_massage = false">{{ $t('dataset.close') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
@ -194,6 +221,12 @@ import TableSelector from '@/views/chart/view/TableSelector'
|
||||
export default {
|
||||
name: 'DatasetTaskList',
|
||||
components: { ComplexTable, cron, codemirror, TableSelector },
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskForm: {
|
||||
@ -228,8 +261,11 @@ export default {
|
||||
useComplexSearch: true,
|
||||
quickPlaceholder: this.$t('dataset.task.search_by_name'),
|
||||
components: [
|
||||
{ field: 'dataset_table_task.name', label: this.$t('dataset.task.name'), component: 'DeComplexInput' },
|
||||
{ field: 'dataset_table_task.last_exec_status', label: this.$t('commons.status'), component: 'FuComplexSelect', options: [{ label: this.$t('dataset.completed'), value: 'Completed' }, { label: this.$t('dataset.underway'), value: 'Underway' }, { label: this.$t('dataset.error'), value: 'Error' }], multiple: false }
|
||||
{ field: 'dataset_table.name', label: this.$t('dataset.name'), component: 'DeComplexInput' },
|
||||
{ field: 'dataset_table_task.name', label: this.$t('dataset.task_name'), component: 'DeComplexInput' },
|
||||
{ field: 'dataset_table_task.status', label: this.$t('dataset.task.task_status'), component: 'FuComplexSelect',
|
||||
options: [{ label: this.$t('dataset.task.stopped'), value: 'Stopped' }, { label: this.$t('dataset.task.underway'), value: 'Underway' }, { label: this.$t('dataset.task.pending'), value: 'Pending' }, { label: this.$t('dataset.underway'), value: 'Exec' }], multiple: false },
|
||||
{ field: 'dataset_table_task.last_exec_status', label: this.$t('dataset.task.last_exec_status'), component: 'FuComplexSelect', options: [{ label: this.$t('dataset.completed'), value: 'Completed' }, { label: this.$t('dataset.underway'), value: 'Underway' }, { label: this.$t('dataset.error'), value: 'Error' }], multiple: false }
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
@ -279,7 +315,9 @@ export default {
|
||||
cronEdit: false,
|
||||
lang: this.$store.getters.language === 'en_US' ? 'en' : 'cn',
|
||||
selectDatasetFlag: false,
|
||||
table: {}
|
||||
table: {},
|
||||
show_error_massage: false,
|
||||
error_massage: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -288,7 +326,19 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.search()
|
||||
if(this.param == null){
|
||||
this.last_condition = {}
|
||||
this.search()
|
||||
}else {
|
||||
this.last_condition = {
|
||||
'dataset_table_task.name': {
|
||||
field: "dataset_table_task.name",
|
||||
operator: "eq",
|
||||
value: this.param.name
|
||||
}
|
||||
}
|
||||
this.search(this.last_condition)
|
||||
}
|
||||
this.timer = setInterval(() => {
|
||||
this.search(this.last_condition, false)
|
||||
}, 5000)
|
||||
@ -338,6 +388,7 @@ export default {
|
||||
if(!item.lastExecTime) {
|
||||
item.lastExecTime = response.data.lastExecTime
|
||||
}
|
||||
item.msg = response.data.msg
|
||||
})
|
||||
},
|
||||
create(task) {
|
||||
@ -356,7 +407,7 @@ export default {
|
||||
},
|
||||
changeTaskStatus(task){
|
||||
const param = task;
|
||||
param.status = task.status === 'Underway' ? 'Stopped' : 'Underway'
|
||||
param.status = task.status === 'Underway' ? 'Pending' : 'Underway'
|
||||
post('/dataset/task/updateStatus', task).then(response => {
|
||||
task.status = param.status;
|
||||
this.$message({
|
||||
@ -373,7 +424,7 @@ export default {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
post('/dataset/task/execTask', task).then(response => {
|
||||
this.search()
|
||||
this.search(this.last_condition, true)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
@ -491,10 +542,10 @@ export default {
|
||||
this.taskForm.cron = val
|
||||
},
|
||||
disableEdit(task) {
|
||||
return task.rate === 'SIMPLE'
|
||||
return task.rate === 'SIMPLE' || task.status === 'Stopped'
|
||||
},
|
||||
disableExec(task) {
|
||||
return task.status === 'Stopped'
|
||||
return task.status === 'Stopped' || task.status === 'Pending'
|
||||
},
|
||||
deleteTask(task) {
|
||||
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
|
||||
@ -508,7 +559,7 @@ export default {
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.search()
|
||||
this.search(this.last_condition, true)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
@ -542,6 +593,13 @@ export default {
|
||||
this.update_task = false
|
||||
this.resetTaskForm()
|
||||
},
|
||||
showErrorMassage(massage) {
|
||||
this.show_error_massage = true
|
||||
this.error_massage = massage
|
||||
},
|
||||
jumpTaskRecord(item){
|
||||
this.$emit('jumpTaskRecord', item)
|
||||
},
|
||||
saveTask(task) {
|
||||
if (task.rate !== 'SIMPLE') {
|
||||
if (this.incrementalUpdateType === 'incrementalAdd') {
|
||||
@ -567,7 +625,7 @@ export default {
|
||||
})
|
||||
this.update_task = false
|
||||
this.resetTaskForm()
|
||||
this.search()
|
||||
this.search(this.last_condition, true)
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
@ -617,6 +675,16 @@ export default {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.err-msg{
|
||||
font-size: 12px;
|
||||
word-break:normal;
|
||||
width:auto;
|
||||
display:block;
|
||||
white-space:pre-wrap;
|
||||
word-wrap : break-word ;
|
||||
overflow: hidden ;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -2,7 +2,13 @@
|
||||
<el-col>
|
||||
<el-row style="margin-top: 10px;">
|
||||
<complex-table :data="data" :columns="columns" local-key="datasetTaskRecord" :search-config="searchConfig" :pagination-config="paginationConfig" @select="select" @search="search" @sort-change="sortChange">
|
||||
<el-table-column prop="name" :label="$t('dataset.task_name')" />
|
||||
<el-table-column prop="name" :label="$t('dataset.task_name')">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-link style="font-size: 12px" @click="jumpTask(scope.row)">{{ scope.row.name }}</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" :label="$t('dataset.start_time')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.startTime | timestampFormatDate }}</span>
|
||||
@ -56,6 +62,12 @@ import TableSelector from '@/views/chart/view/TableSelector'
|
||||
export default {
|
||||
name: 'TaskRecord',
|
||||
components: { ComplexTable, LayoutContent, cron, TableSelector },
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
header: '',
|
||||
@ -71,7 +83,8 @@ export default {
|
||||
useComplexSearch: true,
|
||||
quickPlaceholder: this.$t('dataset.task.search_by_name'),
|
||||
components: [
|
||||
{ field: 'dataset_table_task.name', label: this.$t('dataset.task.name'), component: 'DeComplexInput' },
|
||||
{ field: 'dataset_table_task.name', label: this.$t('dataset.task_name'), component: 'DeComplexInput' },
|
||||
{ field: 'dataset_table.name', label: this.$t('dataset.name'), component: 'DeComplexInput' },
|
||||
{ field: 'dataset_table_task_log.status', label: this.$t('commons.status'), component: 'FuComplexSelect', options: [{ label: this.$t('dataset.completed'), value: 'Completed' }, { label: this.$t('dataset.underway'), value: 'Underway' }, { label: this.$t('dataset.error'), value: 'Error' }], multiple: false }
|
||||
]
|
||||
},
|
||||
@ -105,15 +118,43 @@ export default {
|
||||
computed: {
|
||||
},
|
||||
created() {
|
||||
this.search()
|
||||
this.timer = setInterval(() => {
|
||||
this.search(this.last_condition, false)
|
||||
}, 5000)
|
||||
if (this.param == null) {
|
||||
this.last_condition = {}
|
||||
this.search()
|
||||
} else {
|
||||
this.last_condition = {
|
||||
'dataset_table_task.name': {
|
||||
field: 'dataset_table_task.name',
|
||||
operator: 'eq',
|
||||
value: this.param.name
|
||||
}
|
||||
}
|
||||
this.search(this.last_condition)
|
||||
}
|
||||
|
||||
// this.timer = setInterval(() => {
|
||||
// this.search(this.last_condition, false)
|
||||
// }, 5000)
|
||||
this.createTimer()
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
// clearInterval(this.timer)
|
||||
this.destroyTimer()
|
||||
},
|
||||
methods: {
|
||||
createTimer() {
|
||||
if (!this.timer) {
|
||||
this.timer = setInterval(() => {
|
||||
this.search(this.last_condition, false)
|
||||
}, 5000)
|
||||
}
|
||||
},
|
||||
destroyTimer() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
msg2Current(routerParam) {
|
||||
if (!routerParam || !routerParam.taskId) return
|
||||
const taskId = routerParam.taskId
|
||||
@ -125,7 +166,13 @@ export default {
|
||||
value: taskId
|
||||
}
|
||||
}
|
||||
// 先把定时器干掉 否则会阻塞下面的search
|
||||
this.destroyTimer()
|
||||
|
||||
this.search(current_condition)
|
||||
|
||||
// 查询完再开启定时器
|
||||
this.createTimer()
|
||||
},
|
||||
sortChange({ column, prop, order }) {
|
||||
this.orderConditions = []
|
||||
@ -145,13 +192,13 @@ export default {
|
||||
},
|
||||
select(selection) {
|
||||
},
|
||||
search(condition) {
|
||||
search(condition, showLoading = true) {
|
||||
this.last_condition = condition
|
||||
condition = formatQuickCondition(condition, 'dataset_table_task.name')
|
||||
const temp = formatCondition(condition)
|
||||
const param = temp || {}
|
||||
param['orders'] = formatOrders(this.orderConditions)
|
||||
post('/dataset/taskLog/list/' + this.paginationConfig.currentPage + '/' + this.paginationConfig.pageSize, param).then(response => {
|
||||
post('/dataset/taskLog/list/' + this.paginationConfig.currentPage + '/' + this.paginationConfig.pageSize, param, showLoading).then(response => {
|
||||
this.data = response.data.listObject
|
||||
this.paginationConfig.total = response.data.itemCount
|
||||
})
|
||||
@ -159,6 +206,9 @@ export default {
|
||||
showErrorMassage(massage) {
|
||||
this.show_error_massage = true
|
||||
this.error_massage = massage
|
||||
},
|
||||
jumpTask(item) {
|
||||
this.$emit('jumpTask', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
|
||||
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
||||
<el-tabs v-model="tabActive">
|
||||
<el-tabs v-model="tabActive" @tab-click="changeTab">
|
||||
<el-tab-pane :label="$t('dataset.task.list')" name="DatasetTaskList">
|
||||
<dataset-task-list />
|
||||
<dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" @jumpTaskRecord="jumpTaskRecord" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('dataset.task.record')" name="TaskRecord">
|
||||
<task-record ref="task_record" />
|
||||
<task-record v-if="tabActive=='TaskRecord'" ref="task_record" :param="task" @jumpTask="jumpTask" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-row>
|
||||
@ -30,6 +30,7 @@ export default {
|
||||
components: { DatasetTableData, LayoutContent, ComplexTable, UnionView, UpdateInfo, TabDataPreview, DatasetTaskList, TaskRecord },
|
||||
data() {
|
||||
return {
|
||||
task: null,
|
||||
tabActive: 'DatasetTaskList'
|
||||
}
|
||||
},
|
||||
@ -51,7 +52,18 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
changeTab() {
|
||||
this.task = null
|
||||
console.log(this.tabActive)
|
||||
},
|
||||
jumpTaskRecord(task) {
|
||||
this.task = task
|
||||
this.tabActive = 'TaskRecord'
|
||||
},
|
||||
jumpTask(task) {
|
||||
this.task = task
|
||||
this.tabActive = 'DatasetTaskList'
|
||||
},
|
||||
toMsgShare(routerParam) {
|
||||
if (routerParam !== null && routerParam.msgNotification) {
|
||||
const panelShareTypeIds = [4, 5, 6]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user