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

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

Browse Source
This commit is contained in:
taojinlong 2022-05-23 17:22:49 +08:00
commit c657f56c29
40 changed files with 2979 additions and 894 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/src/main/resources/db/migration/V35__1.11.sql
View File

@ -49,3 +49,10 @@ SET FOREIGN_KEY_CHECKS = 1;
INSERT INTO `sys_menu` VALUES (618, 1, 1, 1, '日志管理', 'system-log', 'system/log/index', 15, 'peoples', 'log', b'0', b'0', b'0', 'log:read', NULL, NULL, NULL, 1620281952752);
INSERT INTO `sys_menu` VALUES (619, 618, 0, 2, '导出日志', NULL, NULL, 1, NULL, NULL, b'0', b'0', b'0', 'log:export', NULL, NULL, NULL, NULL);
ALTER TABLE `chart_view` ADD COLUMN `view_fields` LONGTEXT COMMENT '视图字段集合';
UPDATE `chart_view` SET `view_fields` = '[]';
ALTER TABLE `chart_view_cache` ADD COLUMN `view_fields` LONGTEXT COMMENT '视图字段集合';
UPDATE `chart_view_cache` SET `view_fields` = '[]';

17
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -109,6 +109,11 @@ export default {
type: Boolean,
required: false,
default: true
},
activeTab: {
type: String,
required: false,
default: 'none'
}
},
data() {
@ -148,12 +153,12 @@ export default {
return this.$store.state.panel.mainActiveName
},
showUnpublishedArea() {
return this.panelInfo.status === 'unpublished'
// if (this.mainActiveName === 'PanelMain') {
// return this.panelInfo.status === 'unpublished' && this.panelInfo.privileges.indexOf('manage') === -1
// } else {
// return this.panelInfo.status === 'unpublished'
// }
// return this.panelInfo.status === 'unpublished'
if (this.mainActiveName === 'PanelMain' && this.activeTab==='') {
return this.panelInfo.status === 'unpublished' && this.panelInfo.privileges.indexOf('manage') === -1
} else {
return this.panelInfo.status === 'unpublished'
}
},
panelInfo() {
return this.$store.state.panel.panelInfo

10
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -407,17 +407,17 @@ export default {
const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
sourceCustomAttr[param.property] = param.value
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
// view's title use history
if (param.property === 'text') {
param.value.title = sourceCustomStyle.text.title
}
sourceCustomStyle[param.property] = param.value
// if (param.property === 'text') {
// param.value.title = sourceCustomStyle.text.title
// }
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr

19
frontend/src/icons/svg/panel-mobile-unpublished-back.svg Normal file
View File

@ -0,0 +1,19 @@
<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="2359" version="1.1" class="icon" t="1621433305409">
<defs>
<filter id="svg_4_blur">
<feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
</filter>
</defs>
<g>
<title>Layer 1</title>
<path id="svg_1" p-id="2360" fill="#0069F6" d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z"/>
<path id="svg_2" p-id="2361" fill="#5ED7BC" d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z"/>
<path id="svg_3" p-id="2362" fill="#5ED7BC" d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z"/>
<rect stroke="null" id="svg_8" height="760.00015" width="508.00008" y="187.00002" x="689.50014" fill="#000000"/>
<rect stroke="null" rx="5" filter="url(#svg_4_blur)" id="svg_4" height="669.66668" width="430.00003" y="231.99995" x="728.16665" fill="#56ffff"/>
<line stroke="null" id="svg_5" y2="392.99996" x2="754.16667" y1="392.99996" x1="559.16667" fill="none"/>
<ellipse stroke="null" ry="65.5" rx="66.33335" id="svg_6" cy="823.83325" cx="952.16662" fill="#000000"/>
<rect stroke="null" id="svg_7" height="47.66669" width="187.33336" y="242.6666" x="863.49997" fill="#000000"/>
<path fill="#f90c0c" d="m484.77374,100.01227c-214.68812,0.09178 -388.6733,173.5038 -388.76538,387.51529c0,214.01148 174.04656,387.4235 388.76538,387.48469c214.68812,-0.06119 388.6733,-173.47321 388.73469,-387.4541c-0.0307,-214.04208 -174.01587,-387.54588 -388.73469,-387.54588zm296.61586,387.51529c-0.09209,59.44593 -17.89579,114.66977 -48.16209,161.05167l-410.03774,-408.62578c46.50451,-30.22778 101.91086,-48.00343 161.61467,-48.12581c163.79409,0.33654 296.3089,132.44542 296.58517,295.69992l-0.00001,0zm-593.29312,0c0.12278,-59.44593 17.92649,-114.73096 48.28488,-161.11286l409.94565,408.65638c-46.5352,30.16659 -101.91086,47.91165 -161.58397,48.00343c-163.76339,-0.15297 -296.3089,-132.29244 -296.64656,-295.54695z" id="svg_9" stroke="#000"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

23
frontend/src/icons/svg/panel-mobile-unpublished.svg
View File

@ -1,19 +1,18 @@
<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="2359" version="1.1" class="icon" t="1621433305409">
<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" t="1621433305409" class="icon" version="1.1" p-id="2359">
<defs>
<filter id="svg_4_blur">
<feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
<feGaussianBlur in="SourceGraphic" stdDeviation="0"/>
</filter>
</defs>
<g>
<title>Layer 1</title>
<path id="svg_1" p-id="2360" fill="#0069F6" d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z"/>
<path id="svg_2" p-id="2361" fill="#5ED7BC" d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z"/>
<path id="svg_3" p-id="2362" fill="#5ED7BC" d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z"/>
<rect stroke="null" id="svg_8" height="760.00015" width="508.00008" y="187.00002" x="689.50014" fill="#000000"/>
<rect stroke="null" rx="5" filter="url(#svg_4_blur)" id="svg_4" height="669.66668" width="430.00003" y="231.99995" x="728.16665" fill="#56ffff"/>
<line stroke="null" id="svg_5" y2="392.99996" x2="754.16667" y1="392.99996" x1="559.16667" fill="none"/>
<ellipse stroke="null" ry="65.5" rx="66.33335" id="svg_6" cy="823.83325" cx="952.16662" fill="#000000"/>
<rect stroke="null" id="svg_7" height="47.66669" width="187.33336" y="242.6666" x="863.49997" fill="#000000"/>
<path fill="#f90c0c" d="m484.77374,100.01227c-214.68812,0.09178 -388.6733,173.5038 -388.76538,387.51529c0,214.01148 174.04656,387.4235 388.76538,387.48469c214.68812,-0.06119 388.6733,-173.47321 388.73469,-387.4541c-0.0307,-214.04208 -174.01587,-387.54588 -388.73469,-387.54588zm296.61586,387.51529c-0.09209,59.44593 -17.89579,114.66977 -48.16209,161.05167l-410.03774,-408.62578c46.50451,-30.22778 101.91086,-48.00343 161.61467,-48.12581c163.79409,0.33654 296.3089,132.44542 296.58517,295.69992l-0.00001,0zm-593.29312,0c0.12278,-59.44593 17.92649,-114.73096 48.28488,-161.11286l409.94565,408.65638c-46.5352,30.16659 -101.91086,47.91165 -161.58397,48.00343c-163.76339,-0.15297 -296.3089,-132.29244 -296.64656,-295.54695z" id="svg_9" stroke="#000"/>
<path d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z" fill="#b2b2b2" p-id="2360" id="svg_1"/>
<path d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z" fill="#b2b2b2" p-id="2361" id="svg_2"/>
<path d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z" fill="#b2b2b2" p-id="2362" id="svg_3"/>
<rect fill="#b2b2b2" x="689.50014" y="187.00002" width="508.00008" height="760.00015" id="svg_8" stroke="null"/>
<rect fill="#56ffff" x="728.16665" y="231.99995" width="430.00003" height="669.66668" id="svg_4" filter="url(#svg_4_blur)" rx="5" stroke="null"/>
<line fill="none" x1="559.16667" y1="392.99996" x2="754.16667" y2="392.99996" id="svg_5" stroke="null"/>
<ellipse fill="#b2b2b2" cx="952.16662" cy="823.83325" id="svg_6" rx="66.33335" ry="65.5" stroke="null"/>
<rect fill="#b2b2b2" x="863.49997" y="242.6666" width="187.33336" height="47.66669" id="svg_7" stroke="null"/>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

10
frontend/src/icons/svg/panel-unpublished-back.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" t="1621433305409" class="icon" version="1.1" p-id="2359">
<g>
<title>Layer 1</title>
<path d="m100.39216,67.77451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z" fill="#0069F6" p-id="2360" id="svg_1"/>
<path d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z" fill="#5ED7BC" p-id="2361" id="svg_2"/>
<path d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z" fill="#5ED7BC" p-id="2362" id="svg_3"/>
<path stroke="#000" fill="#f90c0c" d="m498.85771,115.35598c-213.99809,0.08971 -387.42406,169.58622 -387.51584,378.76548c0,209.17926 173.48715,378.67577 387.51584,378.73557c213.99809,-0.05981 387.42406,-169.55631 387.48525,-378.70566c-0.0306,-209.20916 -173.45656,-378.79539 -387.48525,-378.79539zm295.6625,378.76548c-0.0918,58.10369 -17.83827,112.08061 -48.0073,157.41524l-408.71983,-399.39931c46.35503,-29.54527 101.5833,-46.91955 161.09522,-47.03916c163.26763,0.32894 295.35653,129.45489 295.6319,289.02324l0.00001,0zm-591.3862,0c0.12239,-58.10369 17.86887,-112.14042 48.12968,-157.47505l408.62804,399.42922c-46.38564,29.48545 -101.5833,46.82984 -161.06461,46.91955c-163.23704,-0.14952 -295.35653,-129.30538 -295.69311,-288.87371z" id="svg_4"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

13
frontend/src/icons/svg/panel-unpublished.svg
View File

@ -1,10 +1,9 @@
<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" t="1621433305409" class="icon" version="1.1" p-id="2359">
<svg width="1285.0000000000002" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="2359" version="1.1" class="icon" t="1621433305409">
<g>
<title>Layer 1</title>
<path d="m100.39216,67.77451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z" fill="#0069F6" p-id="2360" id="svg_1"/>
<path d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z" fill="#5ED7BC" p-id="2361" id="svg_2"/>
<path d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z" fill="#5ED7BC" p-id="2362" id="svg_3"/>
<path stroke="#000" fill="#f90c0c" d="m498.85771,115.35598c-213.99809,0.08971 -387.42406,169.58622 -387.51584,378.76548c0,209.17926 173.48715,378.67577 387.51584,378.73557c213.99809,-0.05981 387.42406,-169.55631 387.48525,-378.70566c-0.0306,-209.20916 -173.45656,-378.79539 -387.48525,-378.79539zm295.6625,378.76548c-0.0918,58.10369 -17.83827,112.08061 -48.0073,157.41524l-408.71983,-399.39931c46.35503,-29.54527 101.5833,-46.91955 161.09522,-47.03916c163.26763,0.32894 295.35653,129.45489 295.6319,289.02324l0.00001,0zm-591.3862,0c0.12239,-58.10369 17.86887,-112.14042 48.12968,-157.47505l408.62804,399.42922c-46.38564,29.48545 -101.5833,46.82984 -161.06461,46.91955c-163.23704,-0.14952 -295.35653,-129.30538 -295.69311,-288.87371z" id="svg_4"/>
<path id="svg_1" p-id="2360" fill="#b2b2b2" d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z"/>
<path id="svg_2" p-id="2361" fill="#b2b2b2" d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z"/>
<path id="svg_3" p-id="2362" fill="#b2b2b2" d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z"/>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -2039,5 +2039,8 @@ export default {
port: 'Port',
user: 'User',
passwd: 'Password'
},
plugin_style: {
border: 'Border'
}
}

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

@ -2050,5 +2050,8 @@ export default {
port: '端口',
user: '用戶名',
passwd: '密碼'
},
plugin_style: {
border: '边框'
}
}

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

@ -2066,5 +2066,8 @@ export default {
time: '操作时间',
export: '导出',
search_by_key: '搜索详情'
},
plugin_style: {
border: '边框'
}
}

40
frontend/src/store/index.js
View File

@ -119,6 +119,7 @@ const data = {
// Currently selected components
curBatchOptComponents: [],
mixProperties: [],
mixPropertiesInner: {},
batchOptChartInfo: null,
batchOptViews: {},
// properties changed
@ -552,15 +553,6 @@ const data = {
const viewBaseInfo = state.componentViewsData[id]
// get properties
const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
const viewProperties = viewConfig ? viewConfig[0].properties : []
if (state.mixProperties.length > 0) {
// If it exists , taking the intersection
state.mixProperties = state.mixProperties.filter(property => viewProperties.indexOf(property) > -1)
} else {
// If it doesn't exist, assignment directly
state.mixProperties = deepCopy(viewProperties)
}
if (viewConfig && viewConfig.length > 0) {
state.batchOptViews[id] = viewConfig[0]
this.commit('setBatchOptChartInfo')
@ -570,16 +562,27 @@ const data = {
setBatchOptChartInfo(state) {
let render = null
let type = null
let allTypes = ''
let isPlugin = null
state.mixProperties = []
state.mixPropertiesInner = {}
let mixPropertiesTemp = []
let mixPropertyInnerTemp = {}
if (state.batchOptViews && JSON.stringify(state.batchOptViews) !== '{}') {
for (const key in state.batchOptViews) {
if (state.mixProperties.length > 0) {
if (mixPropertiesTemp.length > 0) {
// If it exists , taking the intersection
state.mixProperties = state.mixProperties.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
mixPropertiesTemp = mixPropertiesTemp.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
// 根据当前的mixPropertiesTemp 再对 mixPropertyInnerTemp 进行过滤
mixPropertiesTemp.forEach(propertyInnerItem => {
if (mixPropertyInnerTemp[propertyInnerItem] && state.batchOptViews[key].propertyInner[propertyInnerItem]) {
mixPropertyInnerTemp[propertyInnerItem] = mixPropertyInnerTemp[propertyInnerItem].filter(propertyInnerItemValue => state.batchOptViews[key].propertyInner[propertyInnerItem].indexOf(propertyInnerItemValue) > -1)
}
})
} else {
// If it doesn't exist, assignment directly
state.mixProperties = deepCopy(state.batchOptViews[key].properties)
mixPropertiesTemp = deepCopy(state.batchOptViews[key].properties)
mixPropertyInnerTemp = deepCopy(state.batchOptViews[key].propertyInner)
}
if (render && render !== state.batchOptViews[key].render) {
@ -588,6 +591,7 @@ const data = {
render = state.batchOptViews[key].render
}
allTypes = allTypes + '-' + state.batchOptViews[key].value
if (type && type !== state.batchOptViews[key].value) {
type = 'mix'
} else {
@ -600,6 +604,16 @@ const data = {
isPlugin = state.batchOptViews[key].isPlugin
}
}
mixPropertiesTemp.forEach(property => {
if (mixPropertyInnerTemp[property] && mixPropertyInnerTemp[property].length) {
state.mixPropertiesInner[property] = mixPropertyInnerTemp[property]
state.mixProperties.push(property)
}
})
// if (type && type === 'mix') {
// type = type + '-' + allTypes
// }
// Assembly history settings 'customAttr' & 'customStyle'
state.batchOptChartInfo = {
'mode': 'batchOpt',
@ -618,6 +632,7 @@ const data = {
// Currently selected components
state.curBatchOptComponents = []
state.mixProperties = []
state.mixPropertyInnder = {}
state.batchOptChartInfo = null
state.batchOptViews = {}
state.changeProperties = {
@ -636,6 +651,7 @@ const data = {
// Currently selected components
state.curBatchOptComponents = []
state.mixProperties = []
state.mixPropertyInnder = {}
state.batchOptChartInfo = null
state.batchOptViews = {}
state.changeProperties = {

4
frontend/src/views/chart/chart/chart.js
View File

@ -57,7 +57,9 @@ export const DEFAULT_SIZE = {
liquidWaveLength: 128,
liquidWaveCount: 3,
liquidShape: 'circle',
tablePageMode: 'page'
tablePageMode: 'page',
symbolOpacity: 0.7,
symbolStrokeWidth: 2
}
export const DEFAULT_LABEL = {
show: false,

1678
frontend/src/views/chart/chart/util.js
View File

File diff suppressed because it is too large Load Diff

43
frontend/src/views/chart/components/component-style/LegendSelector.vue
View File

@ -2,12 +2,12 @@
<div style="width: 100%">
<el-col>
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="legendForm.show">
<el-form-item :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
<div v-show="showProperty('show') && legendForm.show">
<el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
<el-option
v-for="item in iconSymbolOptions"
:key="item.value"
@ -16,29 +16,29 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
@ -63,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -117,11 +124,15 @@ export default {
}
this.fontSize = arr
},
changeLegendStyle() {
changeLegendStyle(modifyName) {
if (!this.legendForm.show) {
this.isSetting = false
}
this.legendForm['modifyName'] = modifyName
this.$emit('onLegendChange', this.legendForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

41
frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
View File

@ -2,12 +2,12 @@
<div style="width: 100%">
<el-col>
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="legendForm.show">
<el-form-item :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
<el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
<el-option
v-for="item in iconSymbolOptions"
:key="item.value"
@ -16,29 +16,29 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button :disabled="legendForm.vPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button :disabled="legendForm.hPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
@ -63,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -115,11 +122,15 @@ export default {
}
this.fontSize = arr
},
changeLegendStyle() {
changeLegendStyle(modifyName) {
if (!this.legendForm.show) {
this.isSetting = false
}
this.legendForm['modifyName'] = modifyName
this.$emit('onLegendChange', this.legendForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

57
frontend/src/views/chart/components/component-style/SplitSelector.vue
View File

@ -2,42 +2,42 @@
<div style="width: 100%">
<el-col>
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
<el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.axis_line')" class="form-item">
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_line')" class="form-item">
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle('axisLine')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle('axisLabel')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.split_line')" class="form-item">
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_line')" class="form-item">
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle('splitLine')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.split_color')" class="form-item">
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_color')" class="form-item">
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitArea')" :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle('splitArea')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
</el-form>
</el-col>
@ -57,6 +57,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -105,11 +112,15 @@ export default {
}
this.fontSize = arr
},
changeSplitStyle() {
changeSplitStyle(modifyName) {
if (!this.splitForm.show) {
this.isSetting = false
}
this.splitForm['modifyName'] = modifyName
this.$emit('onChangeSplitForm', this.splitForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

29
frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
View File

@ -2,22 +2,22 @@
<div style="width: 100%">
<el-col>
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
<el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<!-- <el-form-item :label="$t('chart.axis_line')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('lineStyle')" :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
</el-form-item>
<!-- <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
@ -57,6 +57,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -105,11 +112,15 @@ export default {
}
this.fontSize = arr
},
changeSplitStyle() {
changeSplitStyle(modifyName) {
if (!this.splitForm.show) {
this.isSetting = false
}
this.splitForm['modifyName'] = modifyName
this.$emit('onChangeSplitForm', this.splitForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

45
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -2,45 +2,45 @@
<div style="width: 100%">
<el-col>
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<div v-show="showProperty('show') && titleForm.show">
<el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
:placeholder="$t('chart.title')"
clearable
@blur="changeTitleStyle"
@blur="changeTitleStyle('title')"
@input="inputOnInput($event)"
/>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('color')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-show="chart.type && !chart.type.includes('table') && chart.type !== 'liquid' && !chart.type.includes('text')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle('vPosition')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
<el-form-item v-show="showProperty('isItalic') || showProperty('isBolder')" :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
</div>
</el-form>
@ -63,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -117,7 +124,7 @@ export default {
}
this.fontSize = arr
},
changeTitleStyle() {
changeTitleStyle(modifyName) {
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
@ -133,10 +140,14 @@ export default {
if (!this.titleForm.show) {
this.isSetting = false
}
this.titleForm['modifyName'] = modifyName
this.$emit('onTextChange', this.titleForm)
},
inputOnInput: function(e) {
this.$forceUpdate()
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

41
frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
View File

@ -2,38 +2,38 @@
<div style="width: 100%">
<el-col>
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item v-if="!this.batchOptStatus" :label="$t('chart.title')" class="form-item">
<div v-show="showProperty('show') && titleForm.show">
<el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
:placeholder="$t('chart.title')"
clearable
@blur="changeTitleStyle"
@blur="changeTitleStyle('title')"
@input="inputOnInput($event)"
/>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('fontSize')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
<el-form-item v-show="showProperty('isItalic') || showProperty('isBolder') " :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
</div>
</el-form>
@ -56,6 +56,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -110,7 +117,7 @@ export default {
}
this.fontSize = arr
},
changeTitleStyle() {
changeTitleStyle(modifyName) {
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
@ -123,10 +130,14 @@ export default {
return
}
}
this.titleForm['modifyName'] = modifyName
this.$emit('onTextChange', this.titleForm)
},
inputOnInput: function(e) {
this.$forceUpdate()
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

73
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle('position')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
@ -39,33 +39,33 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
<el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle" />
<el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_type')" class="form-item">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle('splitLine')">
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
@ -73,25 +73,25 @@
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
<el-divider v-show="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle('')" />
</el-form-item>
</div>
</el-form>
@ -112,6 +112,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -167,11 +174,15 @@ export default {
}
this.fontSize = arr
},
changeXAxisStyle() {
changeXAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeXAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

66
frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
View File

@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle('position')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
@ -39,45 +39,45 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
<el-input @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle" />
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisForm')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-color-picker class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
@ -101,6 +101,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -156,7 +163,7 @@ export default {
}
this.fontSize = arr
},
changeXAxisStyle() {
changeXAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
@ -167,8 +174,13 @@ export default {
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeXAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
</script>

93
frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
View File

@ -2,30 +2,30 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<div v-show="showProperty('show') && axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<el-form-item class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.axis_value') }}</span>
@ -39,59 +39,59 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-divider v-show="showProperty('splitLine')" />
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_type')" class="form-item">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_type')" class="form-item">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-divider v-show="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
<el-divider v-show="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
</el-form-item>
</div>
</el-form>
@ -112,6 +112,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -170,11 +177,15 @@ export default {
}
this.fontSize = arr
},
changeYAxisStyle() {
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

65
frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
View File

@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
@ -39,45 +39,45 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('lineStyle')" />
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
@ -101,6 +101,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -159,7 +166,7 @@ export default {
}
this.fontSize = arr
},
changeYAxisStyle() {
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
@ -170,7 +177,11 @@ export default {
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

85
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<div v-show="showProperty('show') && axisForm.show">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
@ -39,59 +39,59 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_type')" class="form-item">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_type')" class="form-item">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-divider v-show="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
<el-divider v-show="showProperty('axisLabel')" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
</el-form-item>
</div>
</el-form>
@ -112,6 +112,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -167,11 +174,15 @@ export default {
}
this.fontSize = arr
},
changeYAxisStyle() {
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

65
frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
View File

@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
@ -39,14 +39,14 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
@ -60,35 +60,35 @@
</el-tooltip>
</span>
</span>
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
@ -112,6 +112,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -167,7 +174,7 @@ export default {
}
this.fontSize = arr
},
changeYAxisStyle() {
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
@ -178,7 +185,11 @@ export default {
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

61
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -2,8 +2,8 @@
<div style="width: 100%">
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.color_case')" class="form-item">
<div>
<el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
<el-popover
placement="bottom"
width="400"
@ -12,7 +12,7 @@
<div style="padding: 6px 10px;">
<div>
<span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption">
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
@ -45,34 +45,34 @@
</el-popover>
</el-form-item>
<el-form-item v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('quotaColor')" :label="$t('chart.quota_color')" class="form-item">
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('quotaColor')" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text') || chart.type === 'label') || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('dimensionColor')" :label="$t('chart.dimension_color')" class="form-item">
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('dimensionColor')" />
</el-form-item>
</div>
<div v-if="sourceType==='view' || sourceType==='panelTable'">
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<div>
<el-form-item v-show="showProperty('tableHeaderBgColor')" :label="$t('chart.table_header_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderBgColor')" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('tableItemBgColor')" :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('tableFontColor')" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
</el-form-item>
<el-form-item v-show="(chart.render && chart.render === 'antv' && chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_border_color')" class="form-item">
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('tableBorderColor')" :label="$t('chart.table_border_color')" class="form-item">
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableBorderColor')" />
</el-form-item>
<!-- 暂时不支持该功能-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase('tableStripe')">{{ $t('chart.stripe') }}</el-checkbox>-->
<!-- </el-form-item>-->
</div>
<el-form-item v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
<el-form-item v-show="showProperty('alpha')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase('alpha')" />
</el-form-item>
</el-form>
</el-col>
@ -93,6 +93,13 @@ export default {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
},
sourceType: {
type: String,
default: 'view',
@ -206,7 +213,7 @@ export default {
this.init()
},
methods: {
changeColorOption() {
changeColorOption(modifyName = 'value') {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value
@ -220,9 +227,12 @@ export default {
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
this.changeColorCase()
this.changeColorCase(modifyName)
},
changeColorCase() {
changeColorCase(modifyName) {
this.colorForm['modifyName'] = modifyName
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
// this.customColor = null
// this.colorIndex = 0
@ -253,11 +263,16 @@ export default {
},
switchColorCase() {
this.colorForm.colors[this.colorIndex] = this.customColor
this.colorForm['modifyName'] = 'value'
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
},
resetCustomColor() {
this.changeColorOption()
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

57
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -1,28 +1,28 @@
<template>
<div style="width: 100%;">
<el-col>
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="labelForm.show">
<el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
<el-form-item v-show="showProperty('labelLine')" :label="$t('chart.pie_label_line_show')" class="form-item">
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr('labelLine')">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid' && !chart.type.includes('line') && chart.type !== 'treemap' && chart.type !== 'map'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
<el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" class="form-item">
<el-form-item v-show="showProperty('formatter')" class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
@ -34,30 +34,16 @@
</el-tooltip>
</span>
</span>
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('formatter')" />
</el-form-item>
</div>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item class="form-item">
<el-form-item v-show="showProperty('gaugeFormatter')" class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
</span>
</span>
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('gaugeFormatter')" />
</el-form-item>
</el-form>
</el-col>
@ -77,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -143,10 +136,11 @@ export default {
}
this.fontSize = arr
},
changeLabelAttr() {
changeLabelAttr(modifyName) {
if (!this.labelForm.show) {
this.isSetting = false
}
this.labelForm['modifyName'] = modifyName
this.$emit('onLabelChange', this.labelForm)
},
initOptions() {
@ -160,6 +154,9 @@ export default {
this.labelPosition = this.labelPositionV
}
}
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

48
frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
View File

@ -1,43 +1,26 @@
<template>
<div style="width: 100%;">
<el-col>
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="labelForm.show">
<!-- <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">-->
<!-- <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose' && !chart.type.includes('line') && chart.type !== 'treemap' && !chart.type.includes('scatter')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
<el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</div>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
</el-form>
</el-col>
</div>
</template>
@ -55,6 +38,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -121,10 +111,11 @@ export default {
}
this.fontSize = arr
},
changeLabelAttr() {
changeLabelAttr(modifyName) {
if (!this.labelForm.show) {
this.isSetting = false
}
this.labelForm['modifyName'] = modifyName
this.$emit('onLabelChange', this.labelForm)
},
initOptions() {
@ -138,6 +129,9 @@ export default {
this.labelPosition = this.labelPositionV
}
}
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

282
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -1,30 +1,31 @@
<template>
<div style="width: 100%">
<el-col>
<el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.adapt')" class="form-item">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
<el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
<!--bar-begin-->
<el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('barWidth')" :label="$t('chart.bar_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'bar-stack'" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
</el-form-item>
</el-form>
<!--bar-end-->
<el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
<!--line-begin-->
<el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
</el-form-item>
<el-form-item :label="$t('chart.line_type')" class="form-item">
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('lineType')" :label="$t('chart.line_type')" class="form-item">
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
@ -33,65 +34,59 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
</el-form-item>
<!-- <el-form-item :label="$t('chart.line_area')" class="form-item">-->
<!-- <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
</el-form>
<el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}</el-checkbox>
</el-form-item>
<span v-show="chart.type && chart.type.includes('pie-rose')">
<el-form-item :label="$t('chart.rose_type')" class="form-item">
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
<!--line-end-->
<!--pie-begin-->
<el-form-item v-show="showProperty('pieInnerRadius')" :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieInnerRadius')" />
</el-form-item>
<el-form-item v-show="showProperty('pieOuterRadius')" :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieOuterRadius')" />
</el-form-item>
<span v-show="showProperty('pieRoseType') || showProperty('pieRoseRadius') ">
<el-form-item v-show="showProperty('pieRoseType')" :label="$t('chart.rose_type')" class="form-item">
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase('pieRoseType')">
<el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
<el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('pieRoseRadius')" :label="$t('chart.rose_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieRoseRadius')" />
</el-form-item>
</span>
</el-form>
<!--pie-end-->
<!--funnel-begin-->
<el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('funnelWidth')" :label="$t('chart.funnel_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('funnelWidth')" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.shape')" class="form-item">
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
<!--funnel-end-->
<!--radar-begin-->
<el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('radarSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('radarSize')" />
</el-form-item>
</el-form>
<!--radar-end-->
<!--table-begin-->
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('tablePageMode')" :label="$t('chart.table_page_mode')" class="form-item">
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase('tablePageMode')">
<el-option :label="$t('chart.page_mode_page')" value="page" />
<el-option :label="$t('chart.page_mode_pull')" value="pull" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase('tablePageSize')">
<el-option
v-for="item in pageSizeOptions"
:key="item.value"
@ -100,64 +95,61 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('tableTitleFontSize')" :label="$t('chart.table_title_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase('tableTitleFontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('tableItemFontSize')" :label="$t('chart.table_item_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase('tableItemFontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('tableTitleHeight')" :label="$t('chart.table_title_height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableTitleHeight')" />
</el-form-item>
<el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('tableItemHeight')" :label="$t('chart.table_item_height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableItemHeight')" />
</el-form-item>
<el-form-item :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('tableColumnWidth')" :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableColumnWidth')" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
<!--table-end-->
<!--gauge-begin-->
<el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase('gaugeMin')" />
</el-form-item>
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
</el-form-item>
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('gaugeStartAngle')" :label="$t('chart.start_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeStartAngle')" />
</el-form-item>
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('gaugeEndAngle')" :label="$t('chart.end_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
<!--gauge-end-->
<!--text&label-end-->
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type" :label="$t('chart.dimension_show')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="chart.type" :label="$t('chart.dimension_font_size')" class="form-item">
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('dimensionFontSize')" :label="$t('chart.dimension_font_size')" class="form-item">
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase('dimensionFontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type" :label="$t('chart.space_split')" class="form-item">
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('scatter')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<!--text&label-end-->
<!--scatter-begin-->
<el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
@ -166,43 +158,43 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('scatterSymbolSize')" :label="$t('chart.bubble_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<!--scatter-end-->
<!--treemap-begin-->
<el-form-item v-show="showProperty('treemapWidth')" :label="$t('chart.width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapWidth')" />
</el-form-item>
<el-form-item :label="$t('chart.height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('treemapHeight')" :label="$t('chart.height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapHeight')" />
</el-form-item>
</el-form>
<!--treemap-end-->
<!--chart-mix-end-->
<el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
<el-form-item :label="$t('chart.adapt')" class="form-item">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
<el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('barWidth')" :label="$t('chart.bar_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
</el-form-item>
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
</el-form-item>
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
</el-form-item>
<el-form-item :label="$t('chart.line_type')" class="form-item">
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('lineType')" :label="$t('chart.line_type')" class="form-item">
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
@ -211,18 +203,12 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.line_area')" class="form-item">
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('lineArea')" :label="$t('chart.line_area')" class="form-item">
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase('lineArea')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('bubble_scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
@ -231,14 +217,13 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('bubble_scatterSymbolSize')" :label="$t('chart.bubble_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.liquid_shape')" class="form-item">
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
<!--chart-mix-end-->
<!--liquid-begin-->
<el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
<el-option
v-for="item in liquidShapeOptions"
:key="item.value"
@ -247,24 +232,26 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('liquidMax')" :label="$t('chart.liquid_max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
</el-form-item>
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('liquidSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase('liquidSize')" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('liquidOutlineBorder')" :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase('liquidOutlineBorder')" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('liquidOutlineDistance')" :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase('liquidOutlineDistance')" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('liquidWaveLength')" :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase('liquidWaveLength')" />
</el-form-item>
<el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('liquidWaveCount')" :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase('liquidWaveCount')" />
</el-form-item>
<!--liquid-end-->
</el-form>
</el-col>
</div>
@ -282,6 +269,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -364,8 +358,12 @@ export default {
}
this.fontSize = arr
},
changeBarSizeCase() {
changeBarSizeCase(modifyName) {
this.sizeForm['modifyName'] = modifyName
this.$emit('onSizeChange', this.sizeForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

593
frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
View File

@ -1,30 +1,43 @@
<template>
<div style="width: 100%">
<el-col>
<el-form v-show="chart.type && (chart.type.includes('bar'))" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.adapt')" class="form-item">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
<el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
<!--bar-begin-->
<el-form-item v-show="showProperty('adapt')" :label="$t('chart.adapt')" class="form-item">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
</el-form-item>
<!-- <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
<el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-slider
v-model="sizeForm.barGap"
:disabled="sizeForm.barDefault"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="5"
:step="0.1"
@change="changeBarSizeCase('barGap')"
/>
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
<!--bar-end-->
<!--line-begin-->
<el-form-item
v-show="showProperty('lineWidth')"
:label="$t('chart.line_width')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.lineWidth"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="10"
@change="changeBarSizeCase('lineWidth')"
/>
</el-form-item>
<!-- <el-form-item :label="$t('chart.line_type')" class="form-item">-->
<!-- <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
<!-- <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
<!-- <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
@ -33,62 +46,105 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('lineSymbolSize')"
:label="$t('chart.line_symbol_size')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.lineSymbolSize"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="20"
@change="changeBarSizeCase('lineSymbolSize')"
/>
</el-form-item>
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
<el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}
</el-checkbox>
</el-form-item>
</el-form>
<!--line-end-->
<el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.pie_inner_radius_percent')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<!--pie-begin-->
<el-form-item
v-show="showProperty('pieInnerRadius')"
:label="$t('chart.pie_inner_radius_percent')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.pieInnerRadius"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="100"
@change="changeBarSizeCase('pieInnerRadius')"
/>
</el-form-item>
<el-form-item :label="$t('chart.pie_outer_radius_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('pieOuterRadius')"
:label="$t('chart.pie_outer_radius_size')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.pieOuterRadius"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="100"
@change="changeBarSizeCase('pieOuterRadius')"
/>
</el-form-item>
<!-- <span v-show="chart.type && chart.type.includes('pie-rose')">-->
<!-- <el-form-item :label="$t('chart.rose_type')" class="form-item">-->
<!-- <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">-->
<!-- <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>-->
<!-- <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- </span>-->
</el-form>
<el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
<!-- <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
</el-form>
<el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.shape')" class="form-item">
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
<!--pie-end-->
<!--radar-begin-->
<el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('radarSize')"
:label="$t('chart.radar_size')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.radarSize"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="100"
@change="changeBarSizeCase('radarSize')"
/>
</el-form-item>
</el-form>
<!--radar-end-->
<!--table-begin-->
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('tablePageMode')" label-width="100px" :label="$t('chart.table_page_mode')" class="form-item">
<el-select
v-model="sizeForm.tablePageMode"
:placeholder="$t('chart.table_page_mode')"
@change="changeBarSizeCase('tablePageMode')"
>
<el-option :label="$t('chart.page_mode_page')" value="page" />
<el-option :label="$t('chart.page_mode_pull')" value="pull" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
<el-form-item
v-show="showProperty('tablePageSize')&&sizeForm.tablePageMode === 'page'"
label-width="100px"
:label="$t('chart.table_page_size')"
class="form-item"
>
<el-select
v-model="sizeForm.tablePageSize"
:placeholder="$t('chart.table_page_size')"
@change="changeBarSizeCase('tablePageSize')"
>
<el-option
v-for="item in pageSizeOptions"
:key="item.value"
@ -97,34 +153,96 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
<el-form-item
v-show="showProperty('tableTitleFontSize')"
label-width="100px"
:label="$t('chart.table_title_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableTitleFontSize"
:placeholder="$t('chart.table_title_fontsize')"
@change="changeBarSizeCase('tableTitleFontSize')"
>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
<el-form-item
v-show="showProperty('tableItemFontSize')"
label-width="100px"
:label="$t('chart.table_item_fontsize')"
class="form-item"
>
<el-select
v-model="sizeForm.tableItemFontSize"
:placeholder="$t('chart.table_item_fontsize')"
@change="changeBarSizeCase('tableItemFontSize')"
>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_header_align')" class="form-item">
<el-select v-model="sizeForm.tableHeaderAlign" :placeholder="$t('chart.table_header_align')" @change="changeBarSizeCase">
<el-form-item
v-show="showProperty('tableHeaderAlign')"
label-width="100px"
:label="$t('chart.table_header_align')"
class="form-item"
>
<el-select
v-model="sizeForm.tableHeaderAlign"
:placeholder="$t('chart.table_header_align')"
@change="changeBarSizeCase('tableHeaderAlign')"
>
<el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_item_align')" class="form-item">
<el-select v-model="sizeForm.tableItemAlign" :placeholder="$t('chart.table_item_align')" @change="changeBarSizeCase">
<el-form-item v-show="showProperty('tableItemAlign')" label-width="100px" :label="$t('chart.table_item_align')" class="form-item">
<el-select
v-model="sizeForm.tableItemAlign"
:placeholder="$t('chart.table_item_align')"
@change="changeBarSizeCase('tableItemAlign')"
>
<el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('tableTitleHeight')"
label-width="100px"
:label="$t('chart.table_title_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableTitleHeight"
:min="20"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableTitleHeight')"
/>
</el-form-item>
<el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('tableItemHeight')"
label-width="100px"
:label="$t('chart.table_item_height')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableItemHeight"
:min="20"
:max="100"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableItemHeight')"
/>
</el-form-item>
<el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
<el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
<el-form-item
v-show="showProperty('tableColumnMode')"
label-width="100px"
:label="$t('chart.table_column_width_config')"
class="form-item"
>
<el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase('tableColumnMode')">
<el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
<el-radio label="custom">
<span>{{ $t('chart.table_column_custom') }}</span>
@ -139,48 +257,102 @@
<i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
</el-tooltip>
</el-form-item>
<el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('tableColumnWidth') && sizeForm.tableColumnMode === 'custom'"
label=""
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.tableColumnWidth"
:min="10"
:max="500"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeBarSizeCase('tableColumnWidth')"
/>
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
<!-- <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">-->
<!-- <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
<!--table-end-->
<!--gauge-begin-->
<el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
</el-form-item>
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('gaugeStartAngle')"
:label="$t('chart.start_angle')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.gaugeStartAngle"
show-input
:show-input-controls="false"
input-size="mini"
:min="-360"
:max="360"
@change="changeBarSizeCase('gaugeStartAngle')"
/>
</el-form-item>
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('gaugeEndAngle')"
:label="$t('chart.end_angle')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.gaugeEndAngle"
show-input
:show-input-controls="false"
input-size="mini"
:min="-360"
:max="360"
@change="changeBarSizeCase('gaugeEndAngle')"
/>
</el-form-item>
</el-form>
<el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
<!--gauge-end-->
<!--text&label-end-->
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
<el-select
v-model="sizeForm.quotaFontSize"
:placeholder="$t('chart.quota_font_size')"
@change="changeBarSizeCase('quotaFontSize')"
>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type" :label="$t('chart.dimension_show')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
<el-form-item
v-show="showProperty('dimensionShow')"
:label="$t('chart.dimension_show')"
class="form-item"
>
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="chart.type" :label="$t('chart.dimension_font_size')" class="form-item">
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
<el-form-item
v-show="showProperty('dimensionFontSize')"
:label="$t('chart.dimension_font_size')"
class="form-item"
>
<el-select
v-model="sizeForm.dimensionFontSize"
:placeholder="$t('chart.dimension_font_size')"
@change="changeBarSizeCase('dimensionFontSize')"
>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type" :label="$t('chart.space_split')" class="form-item">
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('spaceSplit')"
:label="$t('chart.space_split')"
class="form-item"
>
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type.includes('scatter')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<!--text&label-end-->
<!--scatter-begin-->
<el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
<el-select
v-model="sizeForm.scatterSymbol"
:placeholder="$t('chart.line_symbol')"
@change="changeBarSizeCase('scatterSymbol')"
>
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
@ -189,79 +361,25 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('scatterSymbolSize')"
:label="$t('chart.bubble_size')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.scatterSymbolSize"
show-input
:show-input-controls="false"
input-size="mini"
:min="1"
:max="40"
@change="changeBarSizeCase('scatterSymbolSize')"
/>
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<!-- <el-form-item :label="$t('chart.width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.height')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
</el-form>
<el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
<el-form-item :label="$t('chart.adapt')" class="form-item">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
</el-form-item>
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
</el-form-item>
<!-- <el-form-item :label="$t('chart.line_type')" class="form-item">-->
<!-- <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
<!-- <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
<!-- <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
</el-form-item>
<!-- <el-form-item :label="$t('chart.line_area')" class="form-item">-->
<!-- <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
<el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.liquid_shape')" class="form-item">
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
<!--scatter-end-->
<!--liquid-begin-->
<el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
<el-option
v-for="item in liquidShapeOptions"
:key="item.value"
@ -270,19 +388,45 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('liquidMax')"
:label="$t('chart.liquid_max')"
class="form-item form-item-slider"
>
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
</el-form-item>
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
<el-form-item
v-show="showProperty('liquidSize')"
:label="$t('chart.radar_size')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.liquidSize"
show-input
:show-input-controls="false"
input-size="mini"
:min="1"
:max="100"
@change="changeBarSizeCase('liquidSize')"
/>
</el-form-item>
<!--liquid-end-->
<el-form-item v-if="showProperty('symbolOpacity')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.symbolOpacity" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('symbolOpacity')" />
</el-form-item>
<el-form-item v-if="showProperty('symbolStrokeWidth') && sizeForm.scatterSymbol && sizeForm.scatterSymbol !== 'marker'" :label="$t('plugin_style.border')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.symbolStrokeWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" @change="changeBarSizeCase('symbolStrokeWidth')" />
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { DEFAULT_SIZE } from '../../chart/chart'
export default {
name: 'SizeSelectorAntV',
props: {
@ -293,6 +437,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -382,46 +533,56 @@ export default {
}
this.fontSize = arr
},
changeBarSizeCase() {
changeBarSizeCase(modifyName) {
this.sizeForm['modifyName'] = modifyName
this.$emit('onSizeChange', this.sizeForm)
},
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>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.el-form-item{
margin-bottom: 6px;
}
.el-divider--horizontal {
margin: 10px 0
}
.divider-style>>>.el-divider__text{
color: #606266;
font-size: 12px;
font-weight: 400;
padding: 0 10px;
}
.form-item-slider >>> .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item >>> .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.el-divider--horizontal {
margin: 10px 0
}
.divider-style >>> .el-divider__text {
color: #606266;
font-size: 12px;
font-weight: 400;
padding: 0 10px;
}
</style>

33
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -2,25 +2,25 @@
<div style="width: 100%">
<el-col>
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="tooltipForm.show">
<el-form-item :label="$t('chart.trigger_position')" class="form-item">
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
<el-form-item v-show="showProperty('trigger')" :label="$t('chart.trigger_position')" class="form-item">
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr('trigger')">
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
<el-form-item class="form-item">
<el-form-item v-show="showProperty('formatter')" class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
@ -44,7 +44,7 @@
</el-tooltip>
</span>
</span>
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr('formatter')" />
</el-form-item>
</div>
</el-form>
@ -65,6 +65,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -111,11 +118,15 @@ export default {
}
this.fontSize = arr
},
changeTooltipAttr() {
changeTooltipAttr(modifyName) {
if (!this.tooltipForm.show) {
this.isSetting = false
}
this.tooltipForm['modifyName'] = modifyName
this.$emit('onTooltipChange', this.tooltipForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

25
frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
View File

@ -2,17 +2,17 @@
<div style="width: 100%">
<el-col>
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="tooltipForm.show">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
</div>
</el-form>
@ -33,6 +33,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -79,11 +86,15 @@ export default {
}
this.fontSize = arr
},
changeTooltipAttr() {
changeTooltipAttr(modifyName) {
if (!this.tooltipForm.show) {
this.isSetting = false
}
this.tooltipForm['modifyName'] = modifyName
this.$emit('onTooltipChange', this.tooltipForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

55
frontend/src/views/chart/components/shape-attr/TotalCfg.vue
View File

@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="totalForm" :model="totalForm" label-width="80px" size="mini">
<el-divider content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
<el-form-item :label="$t('chart.total_show')" class="form-item">
<el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
<el-divider v-show="showProperty('row')" content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
<el-form-item v-show="showProperty('row')" :label="$t('chart.total_show')" class="form-item">
<el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="totalForm.row.showGrandTotals">
<div v-show="showProperty('row') && totalForm.row.showGrandTotals">
<el-form-item :label="$t('chart.total_position')" class="form-item">
<el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg">
<el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg('row')">
<el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
<el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.total_label')" class="form-item">
<el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
<el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('row')" />
</el-form-item>
</div>
<el-form-item :label="$t('chart.sub_total_show')" class="form-item">
<el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('row')" :label="$t('chart.sub_total_show')" class="form-item">
<el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="totalForm.row.showSubTotals">
<div v-show="showProperty('row') && totalForm.row.showSubTotals">
<el-form-item :label="$t('chart.total_position')" class="form-item">
<el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg">
<el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg('row')">
<el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
<el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
</el-radio-group>
@ -33,34 +33,34 @@
</el-form-item>
</div>
<el-divider content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
<el-form-item :label="$t('chart.total_show')" class="form-item">
<el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
<el-divider v-show="showProperty('col')" content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
<el-form-item v-show="showProperty('col')" :label="$t('chart.total_show')" class="form-item">
<el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="totalForm.col.showGrandTotals">
<div v-show="showProperty('col') && totalForm.col.showGrandTotals">
<el-form-item :label="$t('chart.total_position')" class="form-item">
<el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg">
<el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg('col')">
<el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
<el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.total_label')" class="form-item">
<el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
<el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
</el-form-item>
</div>
<el-form-item :label="$t('chart.sub_total_show')" class="form-item">
<el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('col')" :label="$t('chart.sub_total_show')" class="form-item">
<el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="totalForm.col.showSubTotals">
<div v-show="showProperty('col') && totalForm.col.showSubTotals">
<el-form-item :label="$t('chart.total_position')" class="form-item">
<el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg">
<el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg('col')">
<el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
<el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.total_label')" class="form-item">
<el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
<el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
</el-form-item>
</div>
</el-form>
@ -77,6 +77,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
@ -139,8 +146,12 @@ export default {
}
}
},
changeTotalCfg() {
changeTotalCfg(modifyName) {
this.totalForm['modifyName'] = modifyName
this.$emit('onTotalCfgChange', this.totalForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}

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

@ -657,6 +657,7 @@
:view="view"
:chart="chart"
:properties="chartProperties"
:property-inner-all="chartPropertyInnerAll"
:dimension-data="dimensionData"
:quota-data="quotaData"
@calcStyle="calcStyle"
@ -1170,19 +1171,25 @@ export default {
}
},
computed: {
chartProperties() {
chartConfig() {
const _this = this
if (_this.chart && _this.chart.render) {
const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
if (viewConfig && viewConfig.length) {
return viewConfig[0].properties || []
return viewConfig[0]
} else {
return []
return null
}
} else {
return []
return null
}
},
chartProperties() {
return this.chartConfig ? this.chartConfig.properties : null
},
chartPropertyInnerAll() {
return this.chartConfig ? this.chartConfig.propertyInner : null
},
chartType() {
return this.chart.type
},
@ -2377,7 +2384,7 @@ export default {
resetViewCacheCallBack(_this.param.id, _this.panelInfo.id, function(rsp) {
_this.changeEditStatus(false)
_this.getChart(_this.param.id, 'panel')
_this.getData(_this.param.id)
// _this.getData(_this.param.id)
bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id })
})
},

55
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -1,7 +1,7 @@
<template>
<el-row class="view-panel">
<plugin-com
v-if="view.isPlugin"
v-if="pluginShow"
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
:component-name="view.type + '-style'"
@ -29,30 +29,24 @@
<el-row>
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse">
<el-collapse-item name="color" :title="$t('chart.color')">
<color-selector-ext
v-if="view.render && view.render === 'antv' && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('pie') || view.type === 'funnel' || view.type === 'radar' || view.type === 'scatter')"
:param="param"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
<el-collapse-item v-show="showPropertiesCollapse(['color-selector'])" name="color" :title="$t('chart.color')">
<color-selector
v-else
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['color-selector']"
@onColorChange="onColorChange($event,'color-selector')"
/>
</el-collapse-item>
<el-collapse-item
v-show="showPropertiesCollapse(['size-selector','no-mix'])"
v-show="showPropertiesCollapse(['size-selector'])"
name="size"
:title="$t('chart.size')"
>
<size-selector
:param="param"
class="attr-selector"
:property-inner="propertyInnerAll['size-selector']"
:chart="chart"
@onSizeChange="onSizeChange($event,'size-selector')"
/>
@ -66,6 +60,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['size-selector-ant-v']"
@onSizeChange="onSizeChange($event,'size-selector-ant-v')"
/>
</el-collapse-item>
@ -79,6 +74,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['label-selector']"
@onLabelChange="onLabelChange($event,'label-selector')"
/>
<label-selector-ant-v
@ -86,6 +82,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['label-selector-ant-v']"
@onLabelChange="onLabelChange($event,'label-selector-ant-v')"
/>
</el-collapse-item>
@ -99,6 +96,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['tooltip-selector']"
@onTooltipChange="onTooltipChange($event,'tooltip-selector')"
/>
<tooltip-selector-ant-v
@ -106,6 +104,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['tooltip-selector-ant-v']"
@onTooltipChange="onTooltipChange($event,'tooltip-selector-ant-v')"
/>
</el-collapse-item>
@ -118,6 +117,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['total-cfg']"
@onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
/>
</el-collapse-item>
@ -136,6 +136,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['x-axis-selector']"
@onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector')"
/>
<x-axis-selector-ant-v
@ -143,6 +144,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['x-axis-selector-ant-v']"
@onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector-ant-v')"
/>
</el-collapse-item>
@ -156,6 +158,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['y-axis-selector']"
@onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector')"
/>
<y-axis-selector-ant-v
@ -163,6 +166,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['y-axis-selector-ant-v']"
@onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector-ant-v')"
/>
</el-collapse-item>
@ -176,6 +180,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['y-axis-ext-selector']"
@onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector')"
/>
<y-axis-ext-selector-ant-v
@ -183,6 +188,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['y-axis-ext-selector-ant-v']"
@onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector-ant-v')"
/>
</el-collapse-item>
@ -196,6 +202,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['split-selector']"
@onChangeSplitForm="onChangeSplitForm($event,'split-selector')"
/>
<split-selector-ant-v
@ -203,6 +210,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['split-selector-ant-v']"
@onChangeSplitForm="onChangeSplitForm($event,'split-selector-ant-v')"
/>
</el-collapse-item>
@ -212,6 +220,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['title-selector']"
@onTextChange="onTextChange($event,'title-selector')"
/>
<title-selector-ant-v
@ -219,6 +228,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['title-selector-ant-v']"
@onTextChange="onTextChange($event,'title-selector-ant-v')"
/>
</el-collapse-item>
@ -232,6 +242,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['legend-selector']"
@onLegendChange="onLegendChange($event,'legend-selector')"
/>
<legend-selector-ant-v
@ -239,6 +250,7 @@
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['legend-selector-ant-v']"
@onLegendChange="onLegendChange($event,'legend-selector-ant-v')"
/>
</el-collapse-item>
@ -262,7 +274,6 @@
<script>
import PluginCom from '@/views/system/plugin/PluginCom'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import ColorSelectorExt from '@/views/chart/components/shape-attr/ColorSelectorExt'
import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
@ -309,8 +320,7 @@ export default {
SizeSelectorAntV,
SizeSelector,
ColorSelector,
PluginCom,
ColorSelectorExt
PluginCom
},
props: {
chart: {
@ -331,10 +341,20 @@ export default {
},
dimensionData: {
type: Array,
required: true
required: false,
default: function() {
return []
}
},
quotaData: {
type: Array,
required: false,
default: function() {
return []
}
},
propertyInnerAll: {
type: Object,
required: true
}
},
@ -345,6 +365,9 @@ export default {
}
},
computed: {
pluginShow() {
return this.view.isPlugin && !this.batchOptStatus
},
...mapState([
'batchOptStatus'
])
@ -359,7 +382,7 @@ export default {
showPropertiesCollapse(propertiesInfo) {
let includeCount = 0
// Property does not support mixed mode
if (propertiesInfo.includes('no-mix') && this.chart.type === 'mix') {
if (propertiesInfo.includes('no-mix') && this.chart.type.includes('mix')) {
return false
} else {
propertiesInfo.forEach(property => {

4
frontend/src/views/chart/view/ChartStyleBatchSet.vue
View File

@ -9,6 +9,7 @@
:view="batchOptChartInfo"
:chart="batchOptChartInfo"
:properties="mixProperties"
:property-inner-all="mixPropertiesInner"
@calcStyle="calcStyle"
@onColorChange="onColorChange"
@onSizeChange="onSizeChange"
@ -49,7 +50,8 @@ export default {
computed: {
...mapState([
'batchOptChartInfo',
'mixProperties'
'mixProperties',
'mixPropertiesInner'
])
},
watch: {

59
frontend/src/views/panel/GrantAuth/shareTree.vue
View File

@ -3,13 +3,24 @@
<el-row>
<span class="header-title">{{ $t('panel.share_in') }}</span>
<div class="block" style="margin-top:8px;">
<el-tree ref="topTree" :data="datas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expanded-keys="expandNodes" @node-click="handleNodeClick">
<el-tree
ref="topTree"
:data="datas"
:props="defaultProps"
:highlight-current="true"
node-key="name"
:default-expanded-keys="expandNodes"
@node-click="handleNodeClick"
>
<span slot-scope="{ data }" class="custom-tree-node father">
<span style="display: flex; flex: 1 1 0%; width: 0px;" :class="!!data.msgNode ? 'msg-node-class': ''">
<span v-if="!!data.id">
<svg-icon :icon-class="'panel-'+data.status" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span
:class="data.status"
style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
>{{ data.name }}</span>
</span>
</span>
@ -20,13 +31,23 @@
<el-row>
<span class="header-title">{{ $t('panel.share_out') }}</span>
<div class="block" style="margin-top:8px;">
<el-tree ref="botTree" :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true">
<el-tree
ref="botTree"
:data="outDatas"
:props="defaultProps"
:highlight-current="true"
node-key="name"
:default-expand-all="true"
>
<span slot-scope="{ data }" class="custom-tree-node father">
<span style="display: flex; flex: 1 1 0%; width: 0px;" @click="viewMyShare(data)">
<span v-if="!!data.id">
<svg-icon :icon-class="'panel-'+data.status" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
<span
:class="data.status"
style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
>{{ data.name }}</span>
</span>
<span class="child">
@ -53,6 +74,7 @@ import { uuid } from 'vue-uuid'
import { initPanelData } from '@/api/panel/panel'
import { proxyInitPanelData } from '@/api/panel/shareProxy'
import bus from '@/utils/bus'
export default {
name: 'ShareTree',
props: {
@ -179,7 +201,7 @@ export default {
</script>
<style lang="scss" scoped>
.header-title {
.header-title {
font-size: 14px;
flex: 1;
color: var(--TextPrimary, #606266);
@ -188,19 +210,22 @@ export default {
height: 100%;
/*line-height: 36px;*/
}
.msg-node-class {
color: red;
>>> i{
.msg-node-class {
color: red;
> > > i {
color: red;
}
}
}
.custom-tree-node {
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right:8px;
padding-right: 8px;
}
.custom-tree-node-list {
@ -209,14 +234,24 @@ export default {
align-items: center;
justify-content: space-between;
font-size: 14px;
padding:0 8px;
padding: 0 8px;
}
.father .child {
/*display: none;*/
visibility: hidden;
}
.father:hover .child {
/*display: inline;*/
visibility: visible;
}
.unpublished {
color: #b2b2b2
}
.publish {
}
</style>

38
frontend/src/views/panel/enshrine/index.vue
View File

@ -10,9 +10,13 @@
<el-table-column prop="name" :label="$t('commons.name')">
<template :id="scope.row.storeId" slot-scope="scope">
<div class="start-item">
<div class="filter-db-row star-item-content" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" @click="showPanel(scope.row)">
<div
class="filter-db-row star-item-content"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
@click="showPanel(scope.row)"
>
<svg-icon :icon-class="'panel-'+scope.row.status" class="ds-icon-scene" />
<span> {{ scope.row.name }}</span>
<span :class="scope.row.status"> {{ scope.row.name }}</span>
</div>
<div class="star-item-close">
<i class="el-icon-delete " @click="remove(scope.row)" />
@ -29,6 +33,7 @@ import { deleteEnshrine, enshrineList } from '@/api/panel/enshrine'
import { uuid } from 'vue-uuid'
import { initPanelData } from '@/api/panel/panel'
import bus from '@/utils/bus'
export default {
name: 'Enshrine',
data() {
@ -83,24 +88,35 @@ export default {
</script>
<style lang="scss" scoped>
.start-item {
.start-item {
width: 100%;
height: 25px;
margin: 0 0 0 10px;
}
.star-item-content {
}
.star-item-content {
width: calc(100% - 60px);
position: absolute;
}
.star-item-close {
}
.star-item-close {
width: 25px;
right: 5px;
position: absolute;
display: none;
}
.start-item:hover {
}
.start-item:hover {
.star-item-close {
display: block;
display: block;
}
}
}
.unpublished {
color: #b2b2b2
}
.publish {
}
</style>

9
frontend/src/views/panel/list/PanelList.vue
View File

@ -97,7 +97,7 @@
<span v-if="data.nodeType === 'folder'">
<i class="el-icon-folder" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
<span :class="data.status" style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
<span v-if="data.nodeType ==='folder'" @click.stop>
@ -866,4 +866,11 @@ export default {
visibility: visible;
}
.unpublished {
color: #b2b2b2
}
.publish {
}
</style>

4
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -90,7 +90,7 @@
<!-- <div id="imageWrapper" ref="imageWrapper" style="width: 4096px;height: 2160px">-->
<div id="imageWrapper" ref="imageWrapper" :style="imageWrapperStyle">
<fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
<Preview v-if="showMainFlag" :in-screen="!fullscreen" :show-type="'width'" :screen-shot="dataLoading" />
<Preview v-if="showMainFlag" :active-tab="activeTab" :in-screen="!fullscreen" :show-type="'width'" :screen-shot="dataLoading" />
</fullscreen>
</div>
</el-row>
@ -147,7 +147,7 @@ import ShareHead from '@/views/panel/GrantAuth/ShareHead'
import { initPanelData, updatePanelStatus } from '@/api/panel/panel'
import { proxyInitPanelData } from '@/api/panel/shareProxy'
import { dataURLToBlob } from '@/components/canvas/utils/utils'
import { findResourceAsBase64, readFile } from '@/api/staticResource/staticResource'
import { findResourceAsBase64 } from '@/api/staticResource/staticResource'
export default {
name: 'PanelViewShow',