Skip to content

Commit

Permalink
feat(视图): 色彩地图增加悬浮组件显隐设置
Browse files Browse the repository at this point in the history
  • Loading branch information
fit2cloud-chenyw committed Nov 8, 2022
1 parent 31d3041 commit 9e4d559
Show file tree
Hide file tree
Showing 11 changed files with 178 additions and 6 deletions.
129 changes: 129 additions & 0 deletions frontend/src/components/suspensionSelector/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<template>
<div style="width: 100%;">
<el-col>
<el-form
ref="suspensionForm"
:model="suspensionForm"
label-width="80px"
size="mini"
>
<el-form-item
v-show="showProperty('show')"
:label="$t('chart.show')"
class="form-item"
>
<el-checkbox
v-model="suspensionForm.show"
@change="changeSuspensionAttr('show')"
>{{ $t('chart.show') }}
</el-checkbox>
</el-form-item>

</el-form>
</el-col>
</div>
</template>

<script>
import { DEFAULT_SUSPENSION } from '@/views/chart/chart/chart'
export default {
name: 'SuspensionForm',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
return {
suspensionForm: JSON.parse(JSON.stringify(DEFAULT_SUSPENSION)),
fontSize: []
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.suspension) {
this.suspensionForm = customAttr.suspension
}
}
},
changeSuspensionAttr(modifyName) {
this.suspensionForm['modifyName'] = modifyName
this.$emit('onSuspensionChange', this.suspensionForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
</script>

<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style>
4 changes: 2 additions & 2 deletions frontend/src/components/widget/deWidget/inputStyleMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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])
Expand All @@ -70,7 +70,7 @@ 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
}
nodeCache.style[this.attrsMap[ele]] = newValue[ele]
this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(type), ele, newValue[ele])
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lang/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -915,6 +915,7 @@ export default {
password_input_error: 'Original password input error'
},
chart: {
suspension: 'Suspension',
chart_background: 'Component background',
solid_color: 'Solid color',
split_gradient: 'Split gradient',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lang/tw.js
Original file line number Diff line number Diff line change
Expand Up @@ -915,6 +915,7 @@ export default {
password_input_error: '原始密碼輸入錯誤'
},
chart: {
suspension: '懸浮',
chart_background: '組件背景',
solid_color: '純色',
split_gradient: '分離漸變',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lang/zh.js
Original file line number Diff line number Diff line change
Expand Up @@ -914,6 +914,7 @@ export default {
password_input_error: '原始密码输入错误'
},
chart: {
suspension: '悬浮',
chart_background: '组件背景',
solid_color: '纯色',
split_gradient: '分离渐变',
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/views/chart/chart/chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@ export const DEFAULT_SIZE = {
showIndex: false,
indexLabel: '序号'
}
export const DEFAULT_SUSPENSION = {
show: true
}
export const DEFAULT_LABEL = {
show: false,
position: 'top',
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/views/chart/chart/map/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,11 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
if (themeStyle) {
chart_option.visualMap.textStyle = { color: themeStyle }
}
if (customAttr.suspension && !customAttr.suspension.show) {
chart_option.visualMap.show = false
} else if ('show' in chart_option.visualMap) {
delete chart_option.visualMap.show
}
}

for (let i = 0; i < valueArr.length; i++) {
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/views/chart/chart/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -3073,7 +3073,8 @@ export const TYPE_CONFIGS = [
'color-selector',
'label-selector',
'tooltip-selector',
'title-selector'
'title-selector',
'suspension-selector'
],
propertyInner: {

Expand Down Expand Up @@ -3107,6 +3108,9 @@ export const TYPE_CONFIGS = [
'vPosition',
'isItalic',
'isBolder'
],
'suspension-selector': [
'show'
]
}
}
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/views/chart/components/ChartComponent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
:style="{ borderRadius: borderRadius}"
/>
<div
v-if="chart.type === 'map'"
v-if="chart.type === 'map' && showSuspension"
class="map-zoom-box"
>
<div style="margin-bottom: 0.5em;">
Expand Down Expand Up @@ -143,7 +143,8 @@ export default {
mapCenter: null,
linkageActiveParam: null,
buttonTextColor: null,
loading: true
loading: true,
showSuspension: true
}
},
Expand Down Expand Up @@ -318,6 +319,9 @@ export default {
}
if (chart.type === 'map') {
const customAttr = JSON.parse(chart.customAttr)
if (customAttr.suspension) {
this.showSuspension = customAttr.suspension.show
}
if (!customAttr.areaCode) {
this.myChart.clear()
return
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/views/chart/view/ChartEdit.vue
Original file line number Diff line number Diff line change
Expand Up @@ -951,6 +951,7 @@
@onLegendChange="onLegendChange"
@onMarginChange="onMarginChange"
@onChangeBackgroundForm="onChangeBackgroundForm"
@onSuspensionChange="onSuspensionChange"
/>
</el-tab-pane>
<el-tab-pane
Expand Down Expand Up @@ -2415,6 +2416,10 @@ export default {
this.view.customAttr.color = val
this.calcStyle('color')
},
onSuspensionChange(val) {
this.view.customAttr.suspension = val
this.calcStyle()
},
onSizeChange(val) {
this.view.customAttr.size = val
Expand Down
21 changes: 20 additions & 1 deletion frontend/src/views/chart/view/ChartStyle.vue
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,19 @@
@onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
/>
</el-collapse-item>
<el-collapse-item
v-show="showPropertiesCollapse(['suspension-selector'])"
name="suspension"
:title="$t('chart.suspension')"
>
<suspension-selector
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['suspension-selector']"
@onSuspensionChange="onSuspensionChange($event,'suspension-selector')"
/>
</el-collapse-item>
</el-collapse>
</el-row>
<el-row class="de-collapse-style">
Expand Down Expand Up @@ -317,6 +330,7 @@ import LegendSelectorAntV from '@/views/chart/components/componentStyle/LegendSe
import BackgroundColorSelector from '@/views/chart/components/componentStyle/BackgroundColorSelector'
import SplitSelector from '@/views/chart/components/componentStyle/SplitSelector'
import SplitSelectorAntV from '@/views/chart/components/componentStyle/SplitSelectorAntV'
import SuspensionSelector from '@/components/suspensionSelector'
import { mapState } from 'vuex'
export default {
Expand Down Expand Up @@ -344,7 +358,8 @@ export default {
SizeSelector,
ColorSelector,
MarginSelector,
PluginCom
PluginCom,
SuspensionSelector
},
props: {
chart: {
Expand Down Expand Up @@ -422,6 +437,10 @@ export default {
val['propertyName'] = propertyName
this.$emit('onColorChange', val)
},
onSuspensionChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onSuspensionChange', val)
},
onSizeChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onSizeChange', val)
Expand Down

0 comments on commit 9e4d559

Please sign in to comment.