center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
zhantiao@tiduyun.com 2022-11-11 10:09:58 +08:00
commit 963e005043
14 changed files with 314 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/canvas/components/editor/ComponentWrapper.vue
View File

@ -11,6 +11,7 @@
:terminal="terminal"
:element="config"
:canvas-id="canvasId"
:chart="chart"
:show-position="showPosition"
@showViewDetails="showViewDetails"
/>
@ -65,6 +66,7 @@
:screen-shot="screenShot"
:canvas-style-data="canvasStyleData"
:show-position="showPosition"
@fill-chart-2-parent="setChartData"
/>
</div>
</div>
@ -146,7 +148,8 @@ export default {
},
data() {
return {
previewVisible: false
previewVisible: false,
chart: null
}
},
computed: {
@ -211,6 +214,9 @@ export default {
runAnimation(this.$el, this.config.animations)
},
methods: {
setChartData(chart) {
this.chart = chart
},
getStyle,
getShapeStyleIntDeDrag(style, prop) {
if (prop === 'rotate') {

8
frontend/src/components/canvas/components/editor/DeEditor.vue
View File

@ -107,6 +107,7 @@
:canvas-style-data="canvasStyleData"
@input="handleInput"
@trigger-plugin-edit="pluginEditHandler"
@fill-chart-2-parent="setChartData"
/>
</de-drag>
<!--拖拽阴影部分-->
@ -1096,6 +1097,13 @@ export default {
created() {
},
methods: {
setChartData(chart) {
this.componentData.forEach((item, index) => {
if (item.type === 'view' && item.component === 'user-view' && item.propValue.viewId === chart.id) {
this.$refs['deDragRef'][index].setChartData(chart)
}
})
},
triggerResetButton() {
this.triggerSearchButton(true)
},

23
frontend/src/components/canvas/components/editor/EditBar.vue
View File

@ -94,7 +94,7 @@
>
<i
class="icon iconfont icon-shezhi"
style="margin-top:2px"
style="margin-top:2px; width: 16px;"
/>
</span>
</setting-menu>
@ -140,6 +140,11 @@
<i class="icon iconfont icon-com-jump" />
</a>
</span>
<map-layer-controller
v-if="chart && showMapLayerController"
:chart="chart"
/>
</div>
<!--跳转设置-->
@ -185,9 +190,10 @@ import toast from '@/components/canvas/utils/toast'
import FieldsList from '@/components/canvas/components/editor/FieldsList'
import LinkJumpSet from '@/views/panel/linkJumpSet'
import Background from '@/views/background/index'
import MapLayerController from '@/views/chart/components/map/MapLayerController'
export default {
components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField },
components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController },
props: {
canvasId: {
@ -226,6 +232,10 @@ export default {
type: String,
required: false,
default: 'NotProvided'
},
chart: {
type: Object,
default: null
}
},
data() {
@ -249,6 +259,13 @@ export default {
},
computed: {
yaxis() {
if (!this.chart) return []
return JSON.parse(this.chart.yaxis)
},
showMapLayerController() {
return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType === 'map' && this.yaxis.length > 1
},
detailsShow() {
return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType !== 'richTextView'
},
@ -519,7 +536,7 @@ export default {
background-color: var(--primary, #3370ff);
}
.bar-main i {
.bar-main ::v-deep i {
color: white;
float: right;
margin-right: 3px;

4
frontend/src/components/canvas/customComponent/UserView.vue
View File

@ -518,6 +518,9 @@ export default {
this.chartScale(this.changeScaleIndex)
},
deep: true
},
'chart.yaxis': function(newVal, oldVal) {
this.$emit('fill-chart-2-parent', this.chart)
}
},
mounted() {
@ -691,6 +694,7 @@ export default {
// 将视图传入echart组件
if (response.success) {
this.chart = response.data
this.$emit('fill-chart-2-parent', this.chart)
this.getDataOnly(response.data, dataBroadcast)
this.chart['position'] = this.inTab ? 'tab' : 'panel'
// 记录当前数据

5
frontend/src/components/deDrag/index.vue
View File

@ -39,6 +39,7 @@
:active-model="'edit'"
:canvas-id="canvasId"
:element="element"
:chart="chart"
@showViewDetails="showViewDetails"
@amRemoveItem="amRemoveItem"
@amAddItem="amAddItem"
@ -384,6 +385,7 @@ export default {
},
data: function() {
return {
chart: null,
contentDisplay: true,
// 当画布在tab中是 宽度左右拓展的余量
parentWidthTabOffset: 40,
@ -802,6 +804,9 @@ export default {
this.beforeDestroyFunction()
},
methods: {
setChartData(chart) {
this.chart = chart
},
// 重置边界和鼠标状态
resetBoundsAndMouseState() {
this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }

8
frontend/src/components/widget/deWidget/inputStyleMixin.js
View File

@ -58,7 +58,7 @@ export default {
mounted() {
if (!this.isFilterComponent) return
this.typeTransform().forEach(item => {
const nodeCache = this.$refs.deOutWidget?.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[item].$el
const nodeCache = this.$refs.deOutWidget?.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget?.$refs[item].$el
this.styleAttrs.forEach(ele => {
nodeCache.style[this.attrsMap[ele]] = this.element.style[ele]
this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(item), ele, this.element.style[ele])
@ -70,9 +70,11 @@ export default {
let nodeCache = ''
this.styleAttrs.forEach(ele => {
if (!nodeCache) {
nodeCache = this.$refs.deOutWidget?.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[type].$el
nodeCache = this.$refs.deOutWidget?.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget?.$refs[type].$el
}
if (nodeCache) {
nodeCache.style[this.attrsMap[ele]] = newValue[ele]
}
nodeCache.style[this.attrsMap[ele]] = newValue[ele]
this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(type), ele, newValue[ele])
})
},

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

@ -915,6 +915,7 @@ export default {
password_input_error: 'Original password input error'
},
chart: {
layer_controller: 'Quota switch',
suspension: 'Suspension',
chart_background: 'Component background',
solid_color: 'Solid color',

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

@ -915,6 +915,7 @@ export default {
password_input_error: '原始密碼輸入錯誤'
},
chart: {
layer_controller: '指標切換',
suspension: '懸浮',
chart_background: '組件背景',
solid_color: '純色',

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

@ -914,6 +914,7 @@ export default {
password_input_error: '原始密码输入错误'
},
chart: {
layer_controller: '指标切换',
suspension: '悬浮',
chart_background: '组件背景',
solid_color: '纯色',

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

@ -41,8 +41,22 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
// 处理shape attr
let customAttr = {}
let isGradient = false
let seriesIndex = 0
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
if (chart.yaxis && chart.yaxis.length > 1) {
let currentSeriesId = customAttr.currentSeriesId
const yAxis = JSON.parse(chart.yaxis)
if (!currentSeriesId || !yAxis.some(item => item.id === currentSeriesId)) {
currentSeriesId = yAxis[0].id
}
chart.data.series.forEach((item, index) => {
if (item.data[0].quotaList[0].id === currentSeriesId) {
seriesIndex = index
return false
}
})
}
if (customAttr.color) {
const colorValue = customAttr.color.value
@ -57,7 +71,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
const reg = new RegExp('\n', 'g')
const text = tooltip.formatter.replace(reg, '<br/>')
tooltip.formatter = function(params) {
tooltip.formatter = params => {
const a = params.seriesName
const b = params.name
const c = params.value ? params.value : ''
@ -74,14 +88,14 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
if (chart.data) {
chart_option.title.text = chart.title
if (chart.data.series && chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
chart_option.series[0].name = chart.data.series[seriesIndex].name
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// label
if (customAttr.label) {
const text = customAttr.label.formatter
chart_option.series[0].label = customAttr.label
chart_option.series[0].label.formatter = function(params) {
chart_option.series[0].label.formatter = params => {
const a = params.seriesName
const b = params.name
const c = params.value ? params.value : ''
@ -97,12 +111,12 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
}
chart_option.series[0].itemStyle.emphasis.label.show = customAttr.label.show
}
const valueArr = chart.data.series[0].data
const valueArr = chart.data.series[seriesIndex].data
// visualMap
if (!isGradient) {
if (valueArr && valueArr.length > 0) {
const values = []
valueArr.forEach(function(ele) {
valueArr.forEach(ele => {
values.push(ele.value)
})
chart_option.visualMap.min = Math.min(...values)

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

@ -12,41 +12,14 @@
style="width: 100%;height: 100%;overflow: hidden;"
:style="{ borderRadius: borderRadius}"
/>
<div
<map-controller
v-if="chart.type === 'map' && showSuspension"
class="map-zoom-box"
>
<div style="margin-bottom: 0.5em;">
<el-button
:style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
size="mini"
icon="el-icon-plus"
circle
@click="roamMap(true)"
/>
</div>
<div style="margin-bottom: 0.5em;">
<el-button
:style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
size="mini"
icon="el-icon-refresh"
circle
@click="resetZoom()"
/>
</div>
<div>
<el-button
:style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
size="mini"
icon="el-icon-minus"
circle
@click="roamMap(false)"
/>
</div>
</div>
:chart="chart"
:button-text-color="buttonTextColor"
@roam-map="roamMap"
@reset-zoom="resetZoom"
/>
<div
:class="loading ? 'symbol-map-loading' : 'symbol-map-loaded'"
/>
@ -81,12 +54,14 @@ import { uuid } from 'vue-uuid'
import { geoJson } from '@/api/map/map'
import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
import { reverseColor } from '../chart/common/common'
import MapController from './map/MapController.vue'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default {
name: 'ChartComponent',
components: {
ViewTrackBar
ViewTrackBar,
MapController
},
props: {
chart: {
@ -178,9 +153,11 @@ export default {
}
},
mounted() {
bus.$on('change-series-id', this.changeSeriesId)
this.preDraw()
},
beforeDestroy() {
bus.$off('change-series-id', this.changeSeriesId)
window.removeEventListener('resize', this.myChart.resize)
this.myChart.dispose()
this.myChart = null
@ -189,6 +166,15 @@ export default {
this.loadThemeStyle()
},
methods: {
changeSeriesId(param) {
const { id, seriesId } = param
if (id !== this.chart.id) {
return
}
const customAttr = JSON.parse(this.chart.customAttr)
customAttr.currentSeriesId = seriesId
this.chart.customAttr = JSON.stringify(customAttr)
},
reDrawView() {
this.myChart.dispatchAction({
type: 'unselect',

93
frontend/src/views/chart/components/map/MapController.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div
class="map-zoom-box"
>
<div style="margin-bottom: 0.5em;">
<el-button
:style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
size="mini"
icon="el-icon-plus"
circle
@click="callParent('roamMap', true)"
/>
</div>
<div style="margin-bottom: 0.5em;">
<el-button
:style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
size="mini"
icon="el-icon-refresh"
circle
@click="callParent('resetZoom')"
/>
</div>
<div>
<el-button
:style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}"
size="mini"
icon="el-icon-minus"
circle
@click="callParent('roamMap', false)"
/>
</div>
</div>
</template>
<script>
export default {
name: 'MapController',
props: {
chart: {
type: Object,
required: true
},
buttonTextColor: {
type: String,
default: null
}
},
data() {
return {
}
},
computed: {
yaxis() {
return JSON.parse(this.chart.yaxis)
},
layerOption() {
return this.yaxis.map(this.buildOption)
},
customAttr() {
const attr = JSON.parse(this.chart.customAttr)
if (!attr.currentSeriesId || !this.layerOption.some(item => item.id === attr.currentSeriesId)) {
attr.currentSeriesId = this.layerOption[0].id
}
return attr
}
},
created() {
this.init()
},
methods: {
buildOption({ id, name }) {
return ({ id, name })
},
changeSeriesId(val) {
this.chart.customAttr = JSON.stringify(this.customAttr)
},
callParent(methodName, param) {
this.$emit(methodName, param)
},
init() {
}
}
}
</script>
<style lang="scss" scoped>
</style>

126
frontend/src/views/chart/components/map/MapLayerController.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<el-popover
placement="right"
title=""
width="150"
trigger="click"
>
<i
slot="reference"
:title="$t('chart.layer_controller')"
class="icon iconfont icon-xuanfu"
style="margin-left: 4px;cursor: pointer;font-size: 14px;"
/>
<div>
<ul class="de-ul">
<li
v-for="(node, i) in layerOption"
:key="node.id"
:index="i"
class="de-sort-field-span"
:class="currentSeriesId === node.id ? 'de-active-li': ''"
@click="changeSeries(node)"
>
<span :title="node.name">{{ node.name }}</span>
</li>
</ul>
</div>
</el-popover>
</template>
<script>
import bus from '@/utils/bus'
export default {
name: 'MapLayerController',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
currentSeriesId: null
}
},
computed: {
yaxis() {
return JSON.parse(this.chart.yaxis)
},
layerOption() {
return this.yaxis.map(this.buildOption)
},
customAttr() {
const attr = JSON.parse(this.chart.customAttr)
if (!attr.currentSeriesId || !this.layerOption.some(item => item.id === attr.currentSeriesId)) {
attr.currentSeriesId = this.layerOption[0].id
}
return attr
}
},
created() {
this.init()
},
methods: {
buildOption({ id, name }) {
return ({ id, name })
},
changeSeries(node) {
if (node.id === this.currentSeriesId) return
this.currentSeriesId = node.id
const param = {
id: this.chart.id,
seriesId: this.currentSeriesId
}
bus.$emit('change-series-id', param)
},
init() {
this.currentSeriesId = this.customAttr.currentSeriesId
}
}
}
</script>
<style scoped lang="scss">
.de-ul li {
margin: 5px 2px;
cursor: pointer;
&:hover {
color: #409EFF;
border-color: rgb(198, 226, 255);
background-color: rgb(236, 245, 255);
}
&:before {
content: "";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
margin-right: 5px;
}
}
.de-active-li {
&:before {
background: #409EFF;
}
}
.de-sort-field-span {
display: inline-flexbox;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
span {
font-size: 12px;
}
}
</style>

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

@ -2069,9 +2069,7 @@ export default {
}
})
}
if (view.type === 'map' && view.yaxis.length > 1) {
view.yaxis = [view.yaxis[0]]
}
view.yaxis.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
@ -2823,7 +2821,7 @@ export default {
addYaxis(e) {
this.dragCheckType(this.view.yaxis, 'q')
this.dragMoveDuplicate(this.view.yaxis, e)
if ((this.view.type === 'map' || this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
if ((this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
this.view.yaxis = [this.view.yaxis[0]]
}
this.calcData(true)