forked from github/dataease
feat(图表): 明细表显示图片 #10621
This commit is contained in:
parent
e7f7ab174b
commit
41dd708072
@ -136,7 +136,7 @@ CREATE TABLE `core_dataset_table_field`
|
||||
`group_type` varchar(50) DEFAULT NULL COMMENT '维度/指标标识 d:维度,q:指标',
|
||||
`type` varchar(255) NOT NULL COMMENT '原始字段类型',
|
||||
`size` int DEFAULT NULL,
|
||||
`de_type` int NOT NULL COMMENT 'dataease字段类型:0-文本,1-时间,2-整型数值,3-浮点数值,4-布尔,5-地理位置,6-二进制',
|
||||
`de_type` int NOT NULL COMMENT 'dataease字段类型:0-文本,1-时间,2-整型数值,3-浮点数值,4-布尔,5-地理位置,6-二进制,7-URL',
|
||||
`de_extract_type` int NOT NULL COMMENT 'de记录的原始类型',
|
||||
`ext_field` int DEFAULT NULL COMMENT '是否扩展字段 0原始 1复制 2计算字段...',
|
||||
`checked` tinyint(1) DEFAULT '1' COMMENT '是否选中',
|
||||
|
@ -138,7 +138,7 @@ CREATE TABLE `core_dataset_table_field`
|
||||
`group_type` varchar(50) DEFAULT NULL COMMENT '维度/指标标识 d:维度,q:指标',
|
||||
`type` varchar(255) NOT NULL COMMENT '原始字段类型',
|
||||
`size` int DEFAULT NULL,
|
||||
`de_type` int NOT NULL COMMENT 'dataease字段类型:0-文本,1-时间,2-整型数值,3-浮点数值,4-布尔,5-地理位置,6-二进制',
|
||||
`de_type` int NOT NULL COMMENT 'dataease字段类型:0-文本,1-时间,2-整型数值,3-浮点数值,4-布尔,5-地理位置,6-二进制,7-URL',
|
||||
`de_extract_type` int NOT NULL COMMENT 'de记录的原始类型',
|
||||
`ext_field` int DEFAULT NULL COMMENT '是否扩展字段 0原始 1复制 2计算字段...',
|
||||
`checked` tinyint(1) DEFAULT NULL DEFAULT '1' COMMENT '是否选中',
|
||||
|
1
core/core-frontend/src/assets/svg/field_url.svg
Normal file
1
core/core-frontend/src/assets/svg/field_url.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723456468440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1514" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M578.133 675.627c-3.306-3.307-8.746-3.307-12.053 0L442.133 799.573c-57.386 57.387-154.24 63.467-217.6 0-63.466-63.466-57.386-160.213 0-217.6L348.48 458.027c3.307-3.307 3.307-8.747 0-12.054l-42.453-42.453c-3.307-3.307-8.747-3.307-12.054 0L170.027 527.467c-90.24 90.24-90.24 236.266 0 326.4s236.266 90.24 326.4 0L620.373 729.92c3.307-3.307 3.307-8.747 0-12.053l-42.24-42.24z m275.84-505.6c-90.24-90.24-236.266-90.24-326.4 0L403.52 293.973c-3.307 3.307-3.307 8.747 0 12.054l42.347 42.346c3.306 3.307 8.746 3.307 12.053 0l123.947-123.946c57.386-57.387 154.24-63.467 217.6 0 63.466 63.466 57.386 160.213 0 217.6L675.52 565.973c-3.307 3.307-3.307 8.747 0 12.054l42.453 42.453c3.307 3.307 8.747 3.307 12.054 0l123.946-123.947c90.134-90.24 90.134-236.266 0-326.506z" p-id="1515"></path><path d="M616.64 362.987c-3.307-3.307-8.747-3.307-12.053 0l-241.6 241.493c-3.307 3.307-3.307 8.747 0 12.053l42.24 42.24c3.306 3.307 8.746 3.307 12.053 0L658.773 417.28c3.307-3.307 3.307-8.747 0-12.053l-42.133-42.24z" p-id="1516"></path></svg>
|
After Width: | Height: | Size: 1.3 KiB |
@ -232,6 +232,7 @@ import field_location from '@/assets/svg/field_location.svg'
|
||||
import field_text from '@/assets/svg/field_text.svg'
|
||||
import field_time from '@/assets/svg/field_time.svg'
|
||||
import field_value from '@/assets/svg/field_value.svg'
|
||||
import field_url from '@/assets/svg/field_url.svg'
|
||||
import filterCenter from '@/assets/svg/filter-center.svg'
|
||||
import filterHCenter from '@/assets/svg/filter-h-center.svg'
|
||||
import filterHLeft from '@/assets/svg/filter-h-left.svg'
|
||||
@ -901,6 +902,7 @@ const iconMap = {
|
||||
field_text: field_text,
|
||||
field_time: field_time,
|
||||
field_value: field_value,
|
||||
field_url: field_url,
|
||||
'filter-center': filterCenter,
|
||||
'filter-h-center': filterHCenter,
|
||||
'filter-h-left': filterHLeft,
|
||||
|
@ -99,8 +99,17 @@ export const selectKey = ['textAlign', 'borderStyle', 'verticalAlign']
|
||||
|
||||
export const horizontalPosition = ['headHorizontalPosition']
|
||||
|
||||
export const fieldType = ['text', 'time', 'value', 'value', 'value', 'location']
|
||||
export const fieldTypeText = ['文本', '时间', '数值', '数值(小数)', '数值', '地理位置']
|
||||
export const fieldType = ['text', 'time', 'value', 'value', 'value', 'location', 'binary', 'url']
|
||||
export const fieldTypeText = [
|
||||
'文本',
|
||||
'时间',
|
||||
'数值',
|
||||
'数值(小数)',
|
||||
'数值',
|
||||
'地理位置',
|
||||
'文件',
|
||||
'URL'
|
||||
]
|
||||
|
||||
export const optionMap = {
|
||||
textAlign: textAlignOptions,
|
||||
|
@ -198,7 +198,7 @@ onMounted(() => {
|
||||
</el-icon>
|
||||
<el-icon>
|
||||
<Icon
|
||||
:className="`field-icon-${fieldType[item.deType]}`"
|
||||
:className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
|
||||
:name="`field_${fieldType[item.deType]}`"
|
||||
/>
|
||||
</el-icon>
|
||||
|
@ -292,7 +292,7 @@ onMounted(() => {
|
||||
</el-icon>
|
||||
<el-icon>
|
||||
<Icon
|
||||
:className="`field-icon-${fieldType[item.deType]}`"
|
||||
:className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
|
||||
:name="`field_${fieldType[item.deType]}`"
|
||||
/>
|
||||
</el-icon>
|
||||
|
@ -178,7 +178,7 @@ const init = () => {
|
||||
}
|
||||
const initOptions = item => {
|
||||
if (item.field) {
|
||||
if (item.field.deType === 0 || item.field.deType === 5) {
|
||||
if ([0, 5, 7].includes(item.field.deType)) {
|
||||
item.options = JSON.parse(JSON.stringify(textOptions))
|
||||
} else if (item.field.deType === 1) {
|
||||
item.options = JSON.parse(JSON.stringify(dateOptions))
|
||||
@ -270,7 +270,9 @@ init()
|
||||
>
|
||||
<el-icon style="margin-right: 8px">
|
||||
<Icon
|
||||
:className="`field-icon-${fieldType[fieldOption.deType]}`"
|
||||
:className="`field-icon-${
|
||||
fieldType[[2, 3].includes(fieldOption.deType) ? 2 : 0]
|
||||
}`"
|
||||
:name="`field_${fieldType[fieldOption.deType]}`"
|
||||
/>
|
||||
</el-icon>
|
||||
|
@ -2986,7 +2986,9 @@ const deleteChartFieldItem = id => {
|
||||
>
|
||||
<el-icon>
|
||||
<Icon
|
||||
:class-name="`field-icon-${fieldType[element.deType]}`"
|
||||
:class-name="`field-icon-${
|
||||
fieldType[[2, 3].includes(element.deType) ? 2 : 0]
|
||||
}`"
|
||||
:name="`field_${fieldType[element.deType]}`"
|
||||
/>
|
||||
</el-icon>
|
||||
@ -3059,7 +3061,9 @@ const deleteChartFieldItem = id => {
|
||||
>
|
||||
<el-icon>
|
||||
<Icon
|
||||
:class-name="`field-icon-${fieldType[ele.deType]}`"
|
||||
:class-name="`field-icon-${
|
||||
fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
|
||||
}`"
|
||||
:name="`field_${fieldType[ele.deType]}`"
|
||||
/>
|
||||
</el-icon>
|
||||
|
@ -8,7 +8,25 @@ import { isNumber } from 'lodash-es'
|
||||
import { copyContent, SortTooltip } from '@/views/chart/components/js/panel/common/common_table'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
class ImageCell extends TableDataCell {
|
||||
protected drawTextShape(): void {
|
||||
const img = new Image()
|
||||
const { x, y, width, height, fieldValue } = this.meta
|
||||
img.src = fieldValue as string
|
||||
img.onload = () => {
|
||||
!this.cfg.children && (this.cfg.children = [])
|
||||
this.textShape = this.addShape('image', {
|
||||
attrs: {
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
img
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 明细表
|
||||
*/
|
||||
@ -127,13 +145,16 @@ export class TableInfo extends S2ChartView<TableSheet> {
|
||||
}
|
||||
return new TableColCell(node, sheet, config)
|
||||
}
|
||||
s2Options.dataCell = viewMeta => {
|
||||
if (viewMeta.colIndex === 0) {
|
||||
viewMeta.fieldValue =
|
||||
pageInfo.pageSize * (pageInfo.currentPage - 1) + viewMeta.rowIndex + 1
|
||||
}
|
||||
return new TableDataCell(viewMeta, viewMeta?.spreadsheet)
|
||||
}
|
||||
s2Options.dataCell = viewMeta => {
|
||||
const deType = axisMap[viewMeta.valueField]?.deType
|
||||
if (deType === 7) {
|
||||
return new ImageCell(viewMeta, viewMeta?.spreadsheet)
|
||||
}
|
||||
if (viewMeta.colIndex === 0 && s2Options.showSeriesNumber) {
|
||||
viewMeta.fieldValue = pageInfo.pageSize * (pageInfo.currentPage - 1) + viewMeta.rowIndex + 1
|
||||
}
|
||||
return new TableDataCell(viewMeta, viewMeta?.spreadsheet)
|
||||
}
|
||||
// tooltip
|
||||
this.configTooltip(chart, s2Options)
|
||||
|
@ -138,7 +138,8 @@ const fieldOptions = [
|
||||
{
|
||||
label: t('dataset.value') + '(' + t('dataset.float') + ')',
|
||||
value: 3
|
||||
}
|
||||
},
|
||||
{ label: 'URL', value: 7 }
|
||||
]
|
||||
|
||||
const fieldOptionsText = [
|
||||
@ -739,6 +740,9 @@ const getIconName = (type: number) => {
|
||||
if (type === 5) {
|
||||
return 'location'
|
||||
}
|
||||
if (type === 7) {
|
||||
return 'url'
|
||||
}
|
||||
}
|
||||
|
||||
const allfields = ref([])
|
||||
@ -1632,7 +1636,9 @@ const getDsIconName = data => {
|
||||
<ElIcon style="margin-right: 6px">
|
||||
<Icon
|
||||
:name="`field_${fieldType[column.deType]}`"
|
||||
:className="`field-icon-${fieldType[column.deType]}`"
|
||||
:className="`field-icon-${
|
||||
fieldType[[2, 3].includes(column.deType) ? 2 : 0]
|
||||
}`"
|
||||
></Icon>
|
||||
</ElIcon>
|
||||
<span class="ellipsis" :title="column.title" style="width: 120px">
|
||||
|
@ -82,7 +82,7 @@ public class DatasetTableFieldDTO implements Serializable {
|
||||
private Integer scale;
|
||||
|
||||
/**
|
||||
* dataease字段类型:0-文本,1-时间,2-整型数值,3-浮点数值,4-布尔,5-地理位置,6-二进制
|
||||
* dataease字段类型:0-文本,1-时间,2-整型数值,3-浮点数值,4-布尔,5-地理位置,6-二进制, 7-URL
|
||||
*/
|
||||
private Integer deType;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user