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

feat: AntV 表格支持动态阈值

Browse Source
This commit is contained in:
liubo 2023-09-19 18:34:57 +08:00
parent 7565161c2d
commit c7ad1cfdbd
15 changed files with 642 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
core/backend/src/main/java/io/dataease/Application.java
View File

@ -9,16 +9,12 @@ import org.springframework.cache.annotation.EnableCaching;
import org.springframework.context.annotation.PropertySource;
import org.springframework.scheduling.annotation.EnableScheduling;
@EnableCaching
@SpringBootApplication(exclude = {
QuartzAutoConfiguration.class,
LdapAutoConfiguration.class
})
@ServletComponentScan
@EnableScheduling
@PropertySource(value = {"file:/opt/dataease/conf/dataease.properties"}, encoding = "UTF-8", ignoreResourceNotFound = true)
import java.io.UnsupportedEncodingException;
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
public static void main(String[] args) throws UnsupportedEncodingException {
String s = new String("鍓嶆璇锋眰 AMapUI 澶辫触".getBytes("GBK"),"utf-8");
System.out.println(s);
}
}

16
core/backend/src/main/java/io/dataease/dto/chart/ChartSeniorThresholdDTO.java Normal file
View File

@ -0,0 +1,16 @@
package io.dataease.dto.chart;
import lombok.Data;
/**
* @Author LBOO
*/
@Data
public class ChartSeniorThresholdDTO {
private String field;
private String term;
private ChartSeniorAssistDTO targetField;
private ChartSeniorAssistDTO maxField;
private ChartSeniorAssistDTO minField;
}

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

@ -963,7 +963,7 @@ public class ChartViewService {
DatasourceRequest datasourceAssistRequest = new DatasourceRequest();
datasourceAssistRequest.setDatasource(ds);
List<String[]> assistData = new ArrayList<>();
List<ChartSeniorAssistDTO> dynamicAssistFields = getDynamicAssistFields(view);
List<ChartSeniorAssistDTO> dynamicAssistFields = new ArrayList<>();
List<ChartViewFieldDTO> assistFields = null;
if (StringUtils.containsIgnoreCase(view.getType(), "bar")
|| StringUtils.containsIgnoreCase(view.getType(), "line")
@ -971,7 +971,15 @@ public class ChartViewService {
|| StringUtils.containsIgnoreCase(view.getType(), "scatter")
|| StringUtils.containsIgnoreCase(view.getType(), "mix")
) {
assistFields = getAssistFields(dynamicAssistFields, yAxis);
// 动态辅助线
dynamicAssistFields = getDynamicAssistFields(view);
assistFields = getAssistFields(dynamicAssistFields, yAxis, null);
} else if (StringUtils.containsIgnoreCase(view.getType(), "table-info")
|| StringUtils.containsIgnoreCase(view.getType(), "table-normal")
|| StringUtils.containsIgnoreCase(view.getType(), "table-pivot")) {
// 动态阈值
dynamicAssistFields = getDynamicThresholdFields(view);
assistFields = getAssistFields(dynamicAssistFields, yAxis, xAxis);
}
// 处理过滤条件中的单引号
@ -1457,7 +1465,7 @@ public class ChartViewService {
map.put("sourceFields", sourceFields);
// merge assist result
mergeAssistField(dynamicAssistFields, assistData);
map.put("dynamicAssistLines", dynamicAssistFields);
map.put("dynamicAssistData", dynamicAssistFields);
ChartViewDTO dto = new ChartViewDTO();
BeanUtils.copyBean(dto, view);
@ -2045,28 +2053,39 @@ public class ChartViewService {
return list;
}
private List<ChartViewFieldDTO> getAssistFields(List<ChartSeniorAssistDTO> list, List<ChartViewFieldDTO> yAxis) {
private List<ChartViewFieldDTO> getAssistFields(List<ChartSeniorAssistDTO> list, List<ChartViewFieldDTO> yAxis, List<ChartViewFieldDTO> xAxis) {
List<ChartViewFieldDTO> res = new ArrayList<>();
for (ChartSeniorAssistDTO dto : list) {
DatasetTableField curField = dto.getCurField();
ChartViewFieldDTO yField = null;
ChartViewFieldDTO field = null;
String alias = "";
for (int i = 0; i < yAxis.size(); i++) {
ChartViewFieldDTO field = yAxis.get(i);
if (StringUtils.equalsIgnoreCase(field.getId(), curField.getId())) {
yField = field;
ChartViewFieldDTO yField = yAxis.get(i);
if (StringUtils.equalsIgnoreCase(yField.getId(), curField.getId())) {
field = yField;
alias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
break;
}
}
if (ObjectUtils.isEmpty(yField)) {
if (ObjectUtils.isEmpty(field) && CollectionUtils.isNotEmpty(xAxis)) {
for (int i = 0; i < xAxis.size(); i++) {
ChartViewFieldDTO xField = xAxis.get(i);
if (StringUtils.equalsIgnoreCase(xField.getId(), curField.getId())) {
field = xField;
alias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
break;
}
}
}
if (ObjectUtils.isEmpty(field)) {
continue;
}
ChartViewFieldDTO chartViewFieldDTO = new ChartViewFieldDTO();
BeanUtils.copyBean(chartViewFieldDTO, curField);
chartViewFieldDTO.setSummary(dto.getSummary());
chartViewFieldDTO.setOriginName(alias);// yAxis的字段别名，就是查找的字段名
chartViewFieldDTO.setOriginName(alias);// 字段别名，就是查找的字段名
res.add(chartViewFieldDTO);
}
return res;
@ -2077,11 +2096,82 @@ public class ChartViewService {
return;
}
String[] strings = assistData.get(0);
for (int i = 0; i < dynamicAssistFields.size(); i++) {
if (i < strings.length) {
ChartSeniorAssistDTO chartSeniorAssistDTO = dynamicAssistFields.get(i);
chartSeniorAssistDTO.setValue(strings[i]);
}
for (int i = 0, size = Math.min(dynamicAssistFields.size(), strings.length); i < size; i++) {
ChartSeniorAssistDTO chartSeniorAssistDTO = dynamicAssistFields.get(i);
chartSeniorAssistDTO.setValue(strings[i]);
}
}
private List<ChartSeniorAssistDTO> getDynamicThresholdFields(ChartViewDTO view) {
String senior = view.getSenior();
JSONObject jsonObject = JSONObject.parseObject(senior);
List<ChartSeniorAssistDTO> list = new ArrayList<>();
JSONObject threshold = jsonObject.getJSONObject("threshold");
if (ObjectUtils.isEmpty(threshold) || StringUtils.isBlank(threshold.toJSONString())){
return list;
}
JSONArray tableThreshold = threshold.getJSONArray("tableThreshold");
if (ObjectUtils.isEmpty(tableThreshold) || StringUtils.isBlank(tableThreshold.toJSONString())) {
return list;
}
for (int i = 0; i < tableThreshold.size(); i++) {
JSONObject item = tableThreshold.getJSONObject(i);
JSONArray itemConditions = item.getJSONArray("conditions");
if (ObjectUtils.isEmpty(itemConditions) || StringUtils.isBlank(itemConditions.toJSONString())) {
continue;
}
List<ChartSeniorThresholdDTO> conditions = gson.fromJson(itemConditions.toJSONString(), new TypeToken<List<ChartSeniorThresholdDTO>>() {
}.getType());
for (ChartSeniorThresholdDTO condition : conditions) {
if (StringUtils.equalsIgnoreCase(condition.getField(), "0")) {
continue;
}
for (ChartSeniorAssistDTO fieldDTO : getConditionFields(condition)) {
if (solveThresholdCondition(fieldDTO, view.getTableId())) {
list.add(fieldDTO);
}
}
}
}
return list;
}
private boolean solveThresholdCondition(ChartSeniorAssistDTO fieldDTO, String tableId){
String fieldId = fieldDTO.getFieldId();
String summary = fieldDTO.getSummary();
if (StringUtils.isEmpty(fieldId) || StringUtils.isEmpty(summary)) {
return false;
}
DatasetTableFieldExample datasetTableFieldExample = new DatasetTableFieldExample();
datasetTableFieldExample.createCriteria().andTableIdEqualTo(tableId).andIdEqualTo(fieldId);
List<DatasetTableField> fieldList = datasetTableFieldMapper.selectByExample(datasetTableFieldExample);
if (CollectionUtils.isEmpty(fieldList)) {
return false;
}
fieldDTO.setCurField(fieldList.get(0));
return true;
}
private List<ChartSeniorAssistDTO> getConditionFields(ChartSeniorThresholdDTO condition){
List<ChartSeniorAssistDTO> list = new ArrayList<>();
if (StringUtils.equalsIgnoreCase(condition.getField(), "0")) {
return list;
}
if ("between".equals(condition.getTerm())) {
if (!StringUtils.equalsIgnoreCase(condition.getMaxField().getSummary(), "value")) {
list.add(condition.getMaxField());
}
if (!StringUtils.equalsIgnoreCase(condition.getMinField().getSummary(), "value")) {
list.add(condition.getMinField());
}
} else {
if (!StringUtils.equalsIgnoreCase(condition.getTargetField().getSummary(), "value")) {
list.add(condition.getTargetField());
}
}
return list;
}
}

2
core/frontend/package.json
View File

@ -35,7 +35,7 @@
"@antv/l7-scene": "2.15.0",
"@antv/l7-source": "2.15.0",
"@antv/l7-utils": "2.15.0",
"@antv/s2": "1.35.0",
"@antv/s2": "1.49.1",
"@antv/util": "^2.0.17",
"@riophae/vue-treeselect": "0.4.0",
"@tinymce/tinymce-vue": "^3.2.8",

2
core/frontend/public/vendor/vendor-manifest.json vendored
View File

File diff suppressed because one or more lines are too long

60
core/frontend/public/vendor/vendor.dll.js vendored
View File

File diff suppressed because one or more lines are too long

1
core/frontend/src/lang/en.js
View File

@ -1019,6 +1019,7 @@ export default {
fast_calc: 'Fast Calculation',
sum: 'Sum',
count: 'Count',
value: 'Value',
avg: 'Avg',
max: 'Max',
min: 'Min',

3
core/frontend/src/lang/tw.js
View File

@ -1019,7 +1019,8 @@ export default {
fast_calc: '快速計算',
sum: '求和',
count: '計數',
avg: '平均',
value: '字段值',
avg: '平均值',
max: '最大值',
min: '最小值',
stddev_pop: '標準差',

3
core/frontend/src/lang/zh.js
View File

@ -1018,7 +1018,8 @@ export default {
fast_calc: '快速计算',
sum: '求和',
count: '计数',
avg: '平均',
value: '字段值',
avg: '平均值',
max: '最大值',
min: '最小值',
stddev_pop: '标准差',

2
core/frontend/src/views/chart/chart/common/common.js
View File

@ -336,7 +336,7 @@ export function seniorCfg(chart_option, chart) {
}
const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
const dynamicLines = chart.data.dynamicAssistLines
const dynamicLines = chart.data.dynamicAssistData
const lines = fixedLines.concat(dynamicLines)
lines.forEach(ele => {

2
core/frontend/src/views/chart/chart/common/common_antv.js
View File

@ -952,7 +952,7 @@ export function getAnalyse(chart) {
}
const fixedLines = senior.assistLine.filter(ele => ele.field === '0')
const dynamicLines = chart.data.dynamicAssistLines
const dynamicLines = chart.data.dynamicAssistData
const lines = fixedLines.concat(dynamicLines)
lines.forEach(ele => {

67
core/frontend/src/views/chart/chart/table/table-info.js
View File

@ -551,21 +551,22 @@ function getConditions(chart) {
}
}
let filedValueMap = getFieldValueMap(chart)
for (let i = 0; i < conditions.length; i++) {
const field = conditions[i]
res.text.push({
field: field.field.dataeaseName,
mapping(value) {
mapping(value,rowData) {
return {
fill: mappingColor(value, valueColor, field, 'color')
fill: mappingColor(value, valueColor, field, 'color', filedValueMap, rowData)
}
}
})
res.background.push({
field: field.field.dataeaseName,
mapping(value) {
mapping(value,rowData) {
return {
fill: mappingColor(value, valueBgColor, field, 'backgroundColor')
fill: mappingColor(value, valueBgColor, field, 'backgroundColor', filedValueMap, rowData)
}
}
})
@ -574,13 +575,37 @@ function getConditions(chart) {
return res
}
function mappingColor(value, defaultColor, field, type) {
function getValue(field, filedValueMap, rowData){
if (field.summary === 'value') {
return rowData[field.curField.dataeaseName]
} else {
return filedValueMap[field.summary + '-' + field.fieldId]
}
}
function mappingColor(value, defaultColor, field, type, filedValueMap, rowData) {
let color
for (let i = 0; i < field.conditions.length; i++) {
let flag = false
const t = field.conditions[i]
if (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) {
const tv = parseFloat(t.value)
let tv,max,min;
if (t.field === '1') {
if (t.term === 'between') {
max = parseFloat(getValue(t.maxField, filedValueMap, rowData))
min = parseFloat(getValue(t.minField, filedValueMap, rowData))
} else {
tv = parseFloat(getValue(t.targetField, filedValueMap, rowData))
}
} else {
if (t.term === 'between') {
min = parseFloat(t.min)
max = parseFloat(t.max)
} else {
tv = parseFloat(t.value)
}
}
if (t.term === 'eq') {
if (value === tv) {
color = t[type]
@ -612,8 +637,6 @@ function mappingColor(value, defaultColor, field, type) {
flag = true
}
} else if (t.term === 'between') {
const min = parseFloat(t.min)
const max = parseFloat(t.max)
if (min <= value && value <= max) {
color = t[type]
flag = true
@ -625,7 +648,12 @@ function mappingColor(value, defaultColor, field, type) {
color = defaultColor
}
} else if (field.field.deType === 0 || field.field.deType === 5) {
const tv = t.value
let tv;
if (t.field === '1') {
tv = getValue(t.targetField, filedValueMap, rowData)
} else {
tv = t.value
}
if (t.term === 'eq') {
if (value === tv) {
color = t[type]
@ -664,7 +692,16 @@ function mappingColor(value, defaultColor, field, type) {
}
} else {
// time
const tv = new Date(t.value.replace(/-/g, '/') + ' GMT+8').getTime()
let tv;
if (t.field === '1') {
let fieldValue = getValue(t.targetField, filedValueMap, rowData);
if (fieldValue) {
tv = new Date(fieldValue.replace(/-/g, '/') + ' GMT+8').getTime()
}
} else {
tv = new Date(t.value.replace(/-/g, '/') + ' GMT+8').getTime()
}
const v = new Date(value.replace(/-/g, '/') + ' GMT+8').getTime()
if (t.term === 'eq') {
if (v === tv) {
@ -722,3 +759,13 @@ function showTooltip(s2Instance, event, fieldMap) {
content
})
}
function getFieldValueMap(view){
let fieldValueMap = {}
if (view.data && view.data.dynamicAssistData && view.data.dynamicAssistData.length > 0) {
view.data.dynamicAssistData.forEach(ele => {
fieldValueMap[ele.summary + '-' + ele.fieldId] = ele.value
});
}
return fieldValueMap;
}

49
core/frontend/src/views/chart/components/senior/Threshold.vue
View File

@ -212,7 +212,7 @@
:key="index"
class="line-style"
>
<el-col :span="6">
<el-col :span="4">
<span
v-if="item.term === 'eq'"
:title="$t('chart.filter_eq')"
@ -266,7 +266,22 @@
:title="$t('chart.filter_not_empty')"
>{{ $t('chart.filter_not_empty') }}</span>
</el-col>
<el-col :span="10">
<el-col :span="4" v-if="!item.term.includes('null') && !item.term.includes('empty')">
<span
v-if="item.field === '0'"
:title="$t('chart.field_fixed')"
>{{ $t('chart.field_fixed') }}</span>
<span
v-if="item.field === '1'"
:title="$t('chart.field_dynamic')"
>{{ $t('chart.field_dynamic') }}</span>
</el-col>
<el-col :span="4" v-if="item.term.includes('null') || item.term.includes('empty')">
&nbsp;
</el-col>
<el-col :span="10" v-if="item.field === '0'">
<span
v-if="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
:title="item.value"
@ -276,13 +291,27 @@
</span>
<span v-else>&nbsp;</span>
</el-col>
<el-col :span="4">
<el-col :span="10" v-if="item.field === '1'">
<span v-if="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
:title="item.targetField.curField.name + '(' + $t('chart.' + item.targetField.summary) + ')'">{{ item.targetField.curField.name + '(' + $t('chart.' + item.targetField.summary) + ')' }}</span>
<span v-else-if="!item.term.includes('null') && !item.term.includes('empty') && item.term === 'between'"
:title="item.minField.curField.name + '(' + $t('chart.' + item.minField.summary) + ')' + ' ≤' + $t('chart.drag_block_label_value') + '≤ ' + item.maxField.curField.name + '(' + $t('chart.' + item.maxField.summary) + ')'">
{{ item.minField.curField.name + '(' + $t('chart.' + item.minField.summary) + ')' + ' ≤' + $t('chart.drag_block_label_value') + '≤ ' + item.maxField.curField.name + '(' + $t('chart.' + item.maxField.summary) + ')' }}
</span>
<span v-else>&nbsp;</span>
</el-col>
<el-col :span="2">
<span
:title="$t('chart.textColor')"
:style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}"
/>
</el-col>
<el-col :span="4">
<el-col :span="2">
<span
:title="$t('chart.backgroundColor')"
:style="{width:'14px', height:'14px', backgroundColor: item.backgroundColor, border: 'solid 1px #e1e4e8'}"
@ -363,7 +392,7 @@
:title="$t('chart.threshold')"
:visible="editTableThresholdDialog"
:show-close="false"
width="800px"
width="1050px"
class="dialog-css"
append-to-body
>
@ -593,6 +622,10 @@ export default {
closeTableThreshold() {
this.editTableThresholdDialog = false
},
fieldValid(field) {
// 检查字段和聚合方式是否不为空
return field && field.fieldId && field.summary;
},
changeTableThreshold() {
// check line config
for (let i = 0; i < this.tableThresholdArr.length; i++) {
@ -624,7 +657,7 @@ export default {
return
}
if (ele.term === 'between') {
if (!ele.term.includes('null') && !ele.term.includes('empty') && (!ele.min || !ele.max)) {
if (!ele.term.includes('null') && !ele.term.includes('empty') && ((ele.field === '0' && (!ele.min || !ele.max)) || (ele.field === '1' && (!this.fieldValid(ele.minField) || !this.fieldValid(ele.maxField))))) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
@ -641,7 +674,7 @@ export default {
return
}
} else {
if (!ele.term.includes('null') && !ele.term.includes('empty') && !ele.value) {
if (!ele.term.includes('null') && !ele.term.includes('empty') && ((ele.field === '0' && !ele.value) || (ele.field === '1' && !this.fieldValid(ele.targetField)))) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
@ -649,7 +682,7 @@ export default {
})
return
}
if ((field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && parseFloat(ele.value).toString() === 'NaN') {
if (ele.field === '0' && (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && parseFloat(ele.value).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',

398
core/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
View File

@ -18,7 +18,7 @@
<el-select
v-model="fieldItem.fieldId"
size="mini"
@change="addField(fieldItem)"
@change="onFieldChange(fieldItem)"
>
<el-option
v-for="fieldOption in fields"
@ -72,11 +72,11 @@
:key="index"
class="line-item"
>
<el-col :span="4">
<el-col :span="3">
<el-select
v-model="item.term"
size="mini"
@change="changeThreshold"
@change="changeThresholdField(item)"
>
<el-option-group
v-for="(group,idx) in fieldItem.options"
@ -92,24 +92,41 @@
</el-option-group>
</el-select>
</el-col>
<el-col :span="3">
<el-select
v-show="!item.term.includes('null') && !item.term.includes('empty')"
v-model="item.field"
size="mini"
style="margin-left: 10px;"
@change="changeThresholdField(item)"
>
<el-option
v-for="opt in fieldTypeOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
</el-col>
<el-col
:span="10"
style="text-align: center;"
v-if="item.field === '0'"
:span="12"
>
<el-input
v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
v-model="item.value"
class="value-item"
style="margin-left: 10px;"
:placeholder="$t('chart.drag_block_label_value')"
size="mini"
clearable
@change="changeThreshold"
/>
<span v-if="item.term === 'between'">
<el-input
v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
v-model="item.value"
class="value-item"
style="margin-left: 10px;"
:placeholder="$t('chart.drag_block_label_value')"
size="mini"
clearable
@change="changeThreshold"
/>
<span v-if="item.term === 'between'">
<el-input
v-model="item.min"
class="between-item"
class="item-long-between"
:placeholder="$t('chart.axis_value_min')"
size="mini"
clearable
@ -118,7 +135,7 @@
<span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
<el-input
v-model="item.max"
class="between-item"
class="item-long-between"
:placeholder="$t('chart.axis_value_max')"
size="mini"
clearable
@ -127,7 +144,185 @@
</span>
</el-col>
<el-col
:span="4"
v-if="item.field === '1'"
:span="12"
>
<span v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'">
<el-select
v-model="item.targetField.fieldId"
size="mini"
style="margin-left: 10px;"
class="item-long select-item"
@change="changeThresholdField(item)"
@visible-change="$forceUpdate()"
>
<el-option
v-for="fieldOption in fieldItem.fieldOptions"
:key="fieldOption.id"
:label="fieldOption.name"
:value="fieldOption.id"
>
<span style="float: left">
<svg-icon
v-if="fieldOption.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="fieldOption.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="fieldOption.deType === 2 || fieldOption.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="fieldOption.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ fieldOption.name }}</span>
</el-option>
</el-select>
<el-select
v-model="item.targetField.summary"
size="mini"
class="item-long select-item"
style="margin-left: 10px;"
:placeholder="$t('chart.aggregation')"
@change="changeThreshold"
@visible-change="$forceUpdate()"
>
<el-option
v-for="opt in getSummaryOptions(fieldItem.field.deType)"
:key="opt.id"
:value="opt.id"
:label="opt.name"
/>
</el-select>
</span>
<span v-if="item.term === 'between'">
<el-select
v-model="item.minField.fieldId"
size="mini"
style="margin-left: 10px;"
class="select-item item-short"
@change="changeThresholdField(item)"
@visible-change="$forceUpdate()"
>
<el-option
v-for="fieldOption in fieldItem.fieldOptions"
:key="fieldOption.id"
:label="fieldOption.name"
:value="fieldOption.id"
>
<span style="float: left">
<svg-icon
v-if="fieldOption.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="fieldOption.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="fieldOption.deType === 2 || fieldOption.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="fieldOption.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ fieldOption.name }}</span>
</el-option>
</el-select>
<el-select
v-model="item.minField.summary"
size="mini"
class="select-item item-short"
style="margin-left: 10px;"
:placeholder="$t('chart.aggregation')"
@change="changeThreshold"
@visible-change="$forceUpdate()"
>
<el-option
v-for="opt in getSummaryOptions(fieldItem.field.deType)"
:key="opt.id"
:value="opt.id"
:label="opt.name"
/>
</el-select>
<span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
<el-select
v-model="item.maxField.fieldId"
size="mini"
class="select-item item-short"
@change="changeThresholdField(item)"
@visible-change="$forceUpdate()"
>
<el-option
v-for="fieldOption in fieldItem.fieldOptions"
:key="fieldOption.id"
:label="fieldOption.name"
:value="fieldOption.id"
>
<span style="float: left">
<svg-icon
v-if="fieldOption.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="fieldOption.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="fieldOption.deType === 2 || fieldOption.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="fieldOption.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ fieldOption.name }}</span>
</el-option>
</el-select>
<el-select
v-model="item.maxField.summary"
size="mini"
class="select-item item-short"
style="margin-left: 10px;"
:placeholder="$t('chart.aggregation')"
@change="changeThreshold"
@visible-change="$forceUpdate()"
>
<el-option
v-for="opt in getSummaryOptions(fieldItem.field.deType)"
:key="opt.id"
:value="opt.id"
:label="opt.name"
/>
</el-select>
</span>
</el-col>
<el-col
:span="3"
style="display: flex;align-items: center;justify-content: center;"
>
<span class="color-title">{{ $t('chart.textColor') }}</span>
@ -140,7 +335,7 @@
/>
</el-col>
<el-col
:span="4"
:span="3"
style="display: flex;align-items: center;justify-content: center;"
>
<span class="color-title">{{ $t('chart.backgroundColor') }}</span>
@ -152,7 +347,7 @@
@change="changeThreshold"
/>
</el-col>
<el-col :span="2">
<el-col :span="1">
<el-button
type="text"
icon="el-icon-delete"
@ -187,6 +382,11 @@ export default {
return {
thresholdArr: [],
fields: [],
fieldsByType: {
text: [],
value: [],
date: []
},
thresholdObj: {
fieldId: '',
field: {},
@ -199,8 +399,24 @@ export default {
color: '#ff0000ff',
backgroundColor: '#ffffff00',
min: '0',
max: '1'
max: '1',
targetField:{},
minField:{},
maxField:{}
},
summaryOptions: [{
id: 'value',
name: this.$t('chart.value')
}, {
id: 'avg',
name: this.$t('chart.avg')
}, {
id: 'max',
name: this.$t('chart.max')
}, {
id: 'min',
name: this.$t('chart.min')
}],
textOptions: [
{
label: '',
@ -304,6 +520,10 @@ export default {
}]
}
],
fieldTypeOptions: [
{ label: this.$t('chart.field_fixed'), value: '0' },
{ label: this.$t('chart.field_dynamic'), value: '1' }
],
predefineColors: COLOR_PANEL
}
},
@ -314,6 +534,26 @@ export default {
init() {
this.thresholdArr = JSON.parse(JSON.stringify(this.threshold))
this.initFields()
this.thresholdArr && this.thresholdArr.forEach(ele => {
this.initOptions(ele)
if (ele.conditions) {
for (const item of ele.conditions) {
this.initConditionField(item)
}
}
})
},
initConditionField(item) {
// 兼容旧数据
if (!item.targetField) {
item.targetField = {};
}
if (!item.minField) {
item.minField = {};
}
if (!item.maxField) {
item.maxField = {};
}
},
initOptions(item) {
if (item.field) {
@ -324,9 +564,18 @@ export default {
} else {
item.options = JSON.parse(JSON.stringify(this.valueOptions))
}
item.conditions && item.conditions.forEach(ele => {
ele.term = ''
})
this.initFieldOptions(item)
}
},
initFieldOptions(item) {
if (item.field) {
if (item.field.deType === 0 || item.field.deType === 5) {
item.fieldOptions = this.fieldsByType.text
} else if (item.field.deType === 1) {
item.fieldOptions = this.fieldsByType.date
} else {
item.fieldOptions = this.fieldsByType.value
}
}
},
initFields() {
@ -355,8 +604,36 @@ export default {
this.fields = this.fields.concat(JSON.parse(this.chart.yaxis))
}
}
// 暂不支持时间
// this.fields = this.fields.filter(ele => ele.deType !== 1)
// 区分文本、数值、日期字段
this.fields.forEach(ele => {
// 视图字段和计数字段不可用
if (ele.chartId || ele.id === 'count') {
return;
}
if (ele.deType === 0 || ele.deType === 5) {
this.fieldsByType.text.push(ele)
} else if (ele.deType === 1) {
this.fieldsByType.date.push(ele)
} else {
this.fieldsByType.value.push(ele)
}
})
},
getSummaryOptions(deType) {
if (deType === 1) {
// 时间
return this.summaryOptions.filter(ele => {
return ele.id !== 'avg'
})
} else if (deType === 0 || deType === 5) {
// 文本、地理位置
return this.summaryOptions.filter(ele => {
return ele.id === 'value'
})
} else {
return this.summaryOptions
}
},
addThreshold() {
this.thresholdArr.push(JSON.parse(JSON.stringify(this.thresholdObj)))
@ -366,11 +643,40 @@ export default {
this.thresholdArr.splice(index, 1)
this.changeThreshold()
},
changeThreshold() {
this.$emit('onTableThresholdChange', this.thresholdArr)
},
changeThresholdField(item) {
if (item.field === '1') {
if (item.term === 'between') {
item.minField.curField = this.getQuotaField(item.minField.fieldId)
item.maxField.curField = this.getQuotaField(item.maxField.fieldId)
item.targetField = {};
} else {
item.targetField.curField = this.getQuotaField(item.targetField.fieldId)
item.minField = {};
item.maxField = {};
}
} else {
item.targetField = {};
item.minField = {};
item.maxField = {};
}
this.changeThreshold()
},
getQuotaField(id) {
if (!id) {
return {}
}
const fields = this.fields.filter(ele => {
return ele.id === id
})
if (fields.length === 0) {
return {}
} else {
return fields[0]
}
},
addConditions(item) {
item.conditions.push(JSON.parse(JSON.stringify(this.thresholdCondition)))
this.changeThreshold()
@ -379,7 +685,7 @@ export default {
item.conditions.splice(index, 1)
this.changeThreshold()
},
addField(item) {
onFieldChange(item) {
// get field
if (this.fields && this.fields.length > 0) {
this.fields.forEach(ele => {
@ -389,6 +695,10 @@ export default {
}
})
}
// 清空 term
item.conditions && item.conditions.forEach(ele => {
ele.term = ''
})
this.changeThreshold()
}
}
@ -424,18 +734,34 @@ span {
display: inline-block;
}
.between-item {
position: relative;
display: inline-block;
width: 90px !important;
}
.select-item {
position: relative;
display: inline-block;
width: 100px !important;
}
.item-long {
position: relative;
display: inline-block;
width: 220px !important;
}
.item-long-between {
position: relative;
display: inline-block;
width: 200px !important;
}
.item-long:first-child,.item-short:first-child,.item-long-between:first-child {
margin-left: 10px;
}
.item-short {
position: relative;
display: inline-block;
width: 95px !important;
}
.el-select-dropdown__item {
padding: 0 20px;
font-size: 12px;

2
core/frontend/src/views/chart/view/ChartEdit.vue
View File

@ -2731,7 +2731,7 @@ export default {
onThresholdChange(val) {
this.view.senior.threshold = val
this.calcStyle()
this.calcData()
},
onScrollChange(val) {