feat(图表): 明细表显示图片 #10621

This commit is contained in:
wisonic 2024-08-13 18:22:16 +08:00
parent e7f7ab174b
commit 41dd708072
12 changed files with 65 additions and 20 deletions

View File

@ -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 '是否选中',

View File

@ -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 '是否选中',

View 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

View File

@ -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,

View File

@ -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,

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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)

View File

@ -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">

View File

@ -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;