dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 仪表板主题优化，支持主题色切换新建视图主题集成

Browse Source
This commit is contained in:
wangjiahao 2022-06-22 18:02:42 +08:00
parent a3e607c5ac
commit d2bd4f03cb
30 changed files with 1425 additions and 434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,7 +119,7 @@ import DrillPath from '@/views/chart/view/DrillPath'
import { areaMapping } from '@/api/map/map'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
import EditBarView from '@/components/canvas/components/Editor/EditBarView'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
@ -354,7 +354,7 @@ export default {
// deep监听panel 如果改变 提交到 store
canvasStyleData: {
handler(newVal, oldVla) {
this.mergeStyle()
// this.mergeStyle()
// 如果视图结果模式模式 或者 视图结果获取数量改变 刷新视图
if (!this.preCanvasPanel || this.preCanvasPanel.resultCount !== newVal.panel.resultCount || this.preCanvasPanel.resultMode !== newVal.panel.resultMode) {
this.getData(this.element.propValue.viewId, false)
@ -421,31 +421,45 @@ export default {
},
batchOptChange(param) {
if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
this.$store.state.styleChangeTimes++
// stylePriority change to 'view'
const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
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.modifyName] = param.value[param.value.modifyName]
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
}
viewPropsSave(this.panelInfo.id, updateParams)
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
this.optFromBatchSingleProp(param)
}
},
optFromBatchSingleProp(param) {
this.$store.state.styleChangeTimes++
const updateParams = { }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
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)
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
}
viewPropsSave(this.panelInfo.id, updateParams)
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
},
optFromBatchThemeChange() {
const updateParams = { }
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
adaptCurTheme(sourceCustomStyle, sourceCustomAttr)
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
viewPropsSave(this.panelInfo.id, updateParams)
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
},
resizeChart() {
if (this.chart.type === 'map') {
this.destroyTimeMachine()
@ -473,6 +487,15 @@ export default {
bus.$on('batch-opt-change', param => {
this.batchOptChange(param)
})
bus.$on('onSubjectChange', () => {
this.optFromBatchThemeChange()
})
bus.$on('onThemeColorChange', () => {
this.optFromBatchThemeChange()
})
bus.$on('onThemeAttrChange', (param) => {
this.optFromBatchSingleProp(param)
})
},
addViewTrackFilter(linkageParam) {
@ -485,7 +508,6 @@ export default {
const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
// 移动端地图标签不显示
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
customAttrChart.label.show = false
@ -495,32 +517,6 @@ export default {
customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customStyleChart)
}
this.mergeStyle()
},
mergeStyle() {
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
const customAttrChart = JSON.parse(this.chart.customAttr)
const customStyleChart = JSON.parse(this.chart.customStyle)
const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
if (customStyleChart.background) {
// 组件样式-背景设置
customStyleChart.background = customStylePanel.background
}
// 图形属性-颜色设置
if (this.chart.type.includes('table')) {
customAttrChart.color = customAttrPanel.tableColor
} else {
customAttrChart.color['value'] = customAttrPanel.color['value']
customAttrChart.color['colors'] = customAttrPanel.color['colors']
customAttrChart.color['alpha'] = customAttrPanel.color['alpha']
}
this.chart = {
...this.chart,
customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customStyleChart)
}
}
},
getData(id, cache = true, dataBroadcast = false) {
if (id) {

15
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -17,18 +17,23 @@ export const BASE_MOBILE_STYLE = {
}
// 组件仪表板样式
export const COMMON_BACKGROUND = {
enable: false,
export const COMMON_BACKGROUND_BASE = {
backgroundColorSelect: true,
backgroundType: 'innerImage',
color: '#FFFFFF',
innerImage: 'board/blue_1.svg',
outerImage: null,
alpha: 100,
borderRadius: 5,
innerPadding: 0
}
// 组件仪表板样式
export const COMMON_BACKGROUND = {
...COMMON_BACKGROUND_BASE,
enable: false,
backgroundType: 'innerImage',
innerImage: 'board/blue_1.svg',
outerImage: null
}
// 空组件仪表板样式
export const COMMON_BACKGROUND_NONE = {
enable: false,

1
frontend/src/components/canvas/store/snapshot.js
View File

@ -34,6 +34,7 @@ export default {
recordSnapshot(state) {
state.changeTimes++
state.styleChangeTimes++
// 添加新的快照
state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
state.snapshotStyleData[state.snapshotIndex] = deepCopy(state.canvasStyleData)

158
frontend/src/components/canvas/utils/style.js
View File

@ -1,4 +1,15 @@
import { sin, cos } from '@/components/canvas/utils/translate'
import store from '@/store'
export const LIGHT_THEME_COLOR_MAIN = '#000000'
export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
export const LIGHT_THEME_PANEL_BACKGROUND = '#F1F3F5'
export const LIGHT_THEME_COMPONENT_BACKGROUND = '#FFFFFF'
export const DARK_THEME_COLOR_MAIN = '#FFFFFF'
export const DARK_THEME_COLOR_SLAVE1 = '#CCCCCC'
export const DARK_THEME_PANEL_BACKGROUND = '#030B2E'
export const DARK_THEME_COMPONENT_BACKGROUND = '#131E42'
export function getStyle(style, filter = []) {
const needUnit = [
@ -148,6 +159,104 @@ export const customStyleTrans = {
}
}
export const THEME_STYLE_TRANS_MAIN_BACK = {
'legend': {
'textStyle': ['color']
},
'xAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
},
'yAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
},
'yAxisExt': {
'nameTextStyle': ['color'],
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
},
'split': {
'name': ['color'],
'axisLine': {
'lineStyle': ['color']
},
'axisTick': {
'lineStyle': ['color']
},
'axisLabel': ['color'],
'splitLine': {
'lineStyle': ['color']
}
}
}
export const THEME_STYLE_TRANS_MAIN = {
'legend': {
'textStyle': ['color']
},
'xAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color']
},
'yAxis': {
'nameTextStyle': ['color'],
'axisLabel': ['color']
},
'yAxisExt': {
'nameTextStyle': ['color'],
'axisLabel': ['color']
},
'split': {
'name': ['color'],
'axisLine': {
'lineStyle': ['color']
},
'axisTick': {
'lineStyle': ['color']
},
'axisLabel': ['color']
}
}
export const THEME_STYLE_TRANS_SLAVE1 = {
'xAxis': {
'splitLine': {
'lineStyle': ['color']
}
},
'yAxis': {
'splitLine': {
'lineStyle': ['color']
}
},
'yAxisExt': {
'splitLine': {
'lineStyle': ['color']
}
},
'split': {
'splitLine': {
'lineStyle': ['color']
}
}
}
export const THEME_ATTR_TRANS_MAIN = {
'label': ['color'],
'tooltip': {
'textStyle': ['color']
}
}
// 移动端特殊属性
export const mobileSpecialProps = {
'lineWidth': 3, // 线宽固定值
@ -182,6 +291,24 @@ export function recursionTransObj(template, infoObj, scale, terminal) {
}
}
export function recursionThemTransObj(template, infoObj, color) {
for (const templateKey in template) {
// 如果是数组 进行赋值计算
if (template[templateKey] instanceof Array) {
template[templateKey].forEach(templateProp => {
if (infoObj[templateKey] && infoObj[templateKey][templateProp]) {
infoObj[templateKey][templateProp] = color
}
})
} else {
// 如果是对象 继续进行递归
if (infoObj[templateKey]) {
recursionTransObj(template[templateKey], infoObj[templateKey], color)
}
}
}
}
export function componentScalePublic(chartInfo, heightScale, widthScale) {
const scale = Math.min(heightScale, widthScale)
// attr 缩放转换
@ -191,3 +318,34 @@ export function componentScalePublic(chartInfo, heightScale, widthScale) {
return chartInfo
}
export function adaptCurTheme(customStyle, customAttr) {
const canvasStyle = store.state.canvasStyleData
const themeColor = canvasStyle.panel.themeColor
if (themeColor === 'light') {
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, LIGHT_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
} else {
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
}
customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
}
export function adaptCurThemeCommonStyle(component) {
const commonStyle = store.state.canvasStyleData.chartInfo.chartCommonStyle
for (const key in commonStyle) {
component.commonBackground[key] = commonStyle[key]
}
return component
}
export function adaptCurThemeCommonStyleAll() {
const componentData = store.state.componentData
componentData.forEach((item) => {
adaptCurThemeCommonStyle(item)
})
}

5
frontend/src/components/canvas/utils/utils.js
View File

@ -8,7 +8,7 @@ import {
} from '@/utils/ApplicationContext'
import { uuid } from 'vue-uuid'
import store from '@/store'
import { AIDED_DESIGN } from '@/views/panel/panel'
import { AIDED_DESIGN, PANEL_CHART_INFO } from '@/views/panel/panel'
import html2canvas from 'html2canvasde'
export function deepCopy(target) {
@ -81,6 +81,9 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
componentStyle.chartInfo = (componentStyle.chartInfo || deepCopy(PANEL_CHART_INFO))
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
componentData.forEach((item, index) => {
if (item.component && item.component === 'de-date') {
if (item.options.attrs &&

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

@ -1462,6 +1462,17 @@ export default {
sure_bt: 'Confirm'
},
panel: {
theme_change_warn: 'Subject Change',
theme_change_tips: 'Changing the theme will overwrite the view related theme attributes. It is recommended to back up in advance. Do you want to continue the replacement?',
theme_color_change_warn: 'Theme Color Change',
theme_color_change_tips: 'Theme Color change will overwrite the original view properties',
theme_color: 'Theme Color',
theme_color_dark: 'Dark',
theme_color_light: 'Light',
refresh_frequency: 'Refresh Frequency',
card_color_matching: 'Card Color Matching',
table_color_matching: 'Table Color Matching',
background_color: 'Background Color',
more: 'More',
level: 'Level',
enlarge: 'Enlarge',
@ -1702,7 +1713,7 @@ export default {
web_url: 'Web URL',
video_add_tips: 'Please Add Video Info...',
web_add_tips: 'Please Add Web Url Info...',
panel_view_result_show: 'View Result Show',
panel_view_result_show: 'View Result',
panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000',
timeout_refresh: 'Timeout，Will Refresh...',
mobile_layout: 'Mobile Layout',

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

@ -664,9 +664,9 @@ export default {
cas_selected_warn: '選擇CAS方式保存後會註銷當前回話，重新登錄'
},
chart: {
view_reset: '视图重置',
view_reset_tips: '放弃对视图的修改？',
export_img: '导出图片',
view_reset: '視圖重置',
view_reset_tips: '放棄對視圖的修改？',
export_img: '導出圖片',
title_repeat: '當前標題已存在',
save_snapshot: '保存縮略圖',
datalist: '視圖',
@ -1260,7 +1260,7 @@ export default {
exec: '執行一次',
confirm_exec: '手動觸發執行？',
change_success: '狀態切換成功',
excel_replace_msg: '可能會影響計算欄位、自定義數据集、關聯數据集、儀錶板等，確認替換？',
excel_replace_msg: '可能會影響計算欄位、自定義數據集、關聯數據集、儀錶板等，確認替換？',
effect_ext_field: '會影響計算欄位'
},
field_group_type: '分類',
@ -1463,10 +1463,21 @@ export default {
sure_bt: '確定'
},
panel: {
theme_change_warn: '主題更換',
theme_change_tips: '更換主題將會覆蓋視圖相關主題屬性建議提前備份,是否繼續更換？',
theme_color_change_warn: '主題色更換',
theme_color_change_tips: '主題色變更將會覆蓋原有視圖屬性',
theme_color: '主題色',
theme_color_dark: '深色',
theme_color_light: '淺色',
refresh_frequency: '刷新頻率',
card_color_matching: '卡片配色',
table_color_matching: '表格配色',
background_color: '背景顏色',
more: '更多',
level: '层级',
level: '層級',
enlarge: '放大',
panel_style: '仪表板样式',
panel_style: '儀表板樣式',
multiplexing: '復用',
panel_off: '儀表板已下架',
batch_opt: '批量操作',
@ -1703,7 +1714,7 @@ export default {
web_url: '網頁地址',
video_add_tips: '請點擊添加配置視頻信息...',
web_add_tips: '請點擊添加網頁信息...',
panel_view_result_show: '視圖結果展示',
panel_view_result_show: '視圖結果',
panel_view_result_tips: '選擇儀錶闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
timeout_refresh: '請求超時，稍後刷新...',
mobile_layout: '移動端佈局',
@ -1916,7 +1927,7 @@ export default {
placeholder: '請選擇'
},
detextselectTree: {
label: '下拉树',
label: '下拉樹',
placeholder: '請選擇'
},
detextgridselect: {

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

@ -1470,6 +1470,17 @@ export default {
sure_bt: '确定'
},
panel: {
theme_change_warn: '主题更换',
theme_change_tips: '更换主题将会覆盖视图相关主题属性建议提前备份,是否继续更换？',
theme_color_change_warn: '主题色更换',
theme_color_change_tips: '主题色变更将会覆盖原有视图属性',
theme_color: '主题色',
theme_color_dark: '深色',
theme_color_light: '浅色',
refresh_frequency: '刷新频率',
card_color_matching: '卡片配色',
table_color_matching: '表格配色',
background_color: '背景颜色',
more: '更多',
level: '层级',
enlarge: '放大',
@ -1712,7 +1723,7 @@ export default {
web_url: '网页地址',
video_add_tips: '请点击添加配置视频信息...',
web_add_tips: '请点击添加网页信息...',
panel_view_result_show: '视图结果展示',
panel_view_result_show: '视图结果',
panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000',
timeout_refresh: '请求超时，稍后刷新...',
mobile_layout: '移动端布局',

29
frontend/src/styles/deicon/demo_index.html
View File

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe777;</span>
<div class="name">italic</div>
<div class="code-name">&amp;#xe777;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">箭头</div>
@ -642,9 +648,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1655262548061') format('woff2'),
url('iconfont.woff?t=1655262548061') format('woff'),
url('iconfont.ttf?t=1655262548061') format('truetype');
src: url('iconfont.woff2?t=1655779264671') format('woff2'),
url('iconfont.woff?t=1655779264671') format('woff'),
url('iconfont.ttf?t=1655779264671') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -670,6 +676,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-italic"></span>
<div class="name">
italic
</div>
<div class="code-name">.icon-italic
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou"></span>
<div class="name">
@ -1552,6 +1567,14 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-italic"></use>
</svg>
<div class="name">italic</div>
<div class="code-name">#icon-italic</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou"></use>

10
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1655262548061') format('woff2'),
url('iconfont.woff?t=1655262548061') format('woff'),
url('iconfont.ttf?t=1655262548061') format('truetype');
src: url('iconfont.woff2?t=1655779264671') format('woff2'),
url('iconfont.woff?t=1655779264671') format('woff'),
url('iconfont.ttf?t=1655779264671') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-italic:before {
content: "\e777";
}
.icon-jiantou:before {
content: "\e622";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "2958392",
"name": "italic",
"font_class": "italic",
"unicode": "e777",
"unicode_decimal": 59255
},
{
"icon_id": "1115048",
"name": "箭头",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.

14
frontend/src/views/chart/group/Group.vue
View File

@ -315,6 +315,7 @@ import {
DEFAULT_TOTAL
} from '../chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { adaptCurTheme } from '@/components/canvas/utils/style'
export default {
name: 'Group',
@ -792,22 +793,26 @@ export default {
view.render = this.view.render
view.resultMode = 'custom'
view.resultCount = 1000
view.customAttr = JSON.stringify({
const customAttr = {
color: DEFAULT_COLOR_CASE,
tableColor: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP,
totalCfg: DEFAULT_TOTAL
})
view.customStyle = JSON.stringify({
}
const customStyle = {
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
split: DEFAULT_SPLIT
})
}
// 新建的视图应用当前主题
adaptCurTheme(customStyle, customAttr)
view.customAttr = JSON.stringify(customAttr)
view.customStyle = JSON.stringify(customStyle)
view.senior = JSON.stringify({
functionCfg: DEFAULT_FUNCTION_CFG,
assistLine: [],
@ -824,6 +829,7 @@ export default {
view.extBubble = JSON.stringify([])
view.viewFields = JSON.stringify([])
this.setChartDefaultOptions(view)
const _this = this
post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => {
this.closeCreateChart()

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

@ -1075,7 +1075,6 @@ import { pluginTypes } from '@/api/chart/chart'
import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
import ChartStyle from '@/views/chart/view/ChartStyle'
import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
import { delGroup } from '@/api/panel/panel'
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
@ -2482,7 +2481,6 @@ export default {
reset() {
const _this = this
this.$confirm(this.$t('chart.view_reset_tips'), this.$t('chart.view_reset'), {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),

187
frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
View File

@ -1,47 +1,50 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="250"
trigger="click"
>
<el-col>
<el-row>
<el-col :span="6">
<el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
</el-col>
<el-col :span="18">
<el-color-picker v-model="panel.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
<el-col :span="6">
<el-radio v-model="panel.backgroundType" label="image" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
</el-col>
<el-col :span="18">
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif"
class="avatar-uploader"
list-type="picture-card"
:http-request="upload"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }} <i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
<div style="width: 100%;">
<el-form ref="overallSettingForm" :model="overallSettingForm" size="mini">
<el-col style="padding-bottom: 10px;">
<el-row>
<el-col class="custom-item">
<el-radio v-model="panel.backgroundType" label="color" style="float: right" @change="onChangeType">
<span style="font-size: 12px">{{ $t('chart.color') }}</span>
</el-radio>
</el-col>
<el-col :span="10">
<el-color-picker
v-model="panel.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
@change="onChangeType"
/>
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
<el-col class="custom-item">
<el-radio v-model="panel.backgroundType" label="image" style="float: right" @change="onChangeType">
<span style="font-size: 12px">{{ $t('panel.photo') }}</span>
</el-radio>
</el-col>
<el-col :span="15">
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif"
class="avatar-uploader"
list-type="picture-card"
:http-request="upload"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
</el-col>
</el-form>
</div>
</template>
@ -61,8 +64,8 @@ export default {
dialogVisible: false,
uploadDisabled: false,
panel: null,
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
overallSettingForm: {}
}
},
computed: mapState([
@ -111,40 +114,62 @@ export default {
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.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
}
.el-form-item{
margin-bottom: 6px;
}
.avatar-uploader {
margin-left: 10px;
}
.avatar-uploader ::v-deep .el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader ::v-deep .el-upload-list li {
width: 100px !important;
height: 60px !important;
}
.disabled ::v-deep .el-upload--picture-card {
display: none;
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.color-picker-custom {
margin-left: 10px;
cursor: pointer;
z-index: 1004;
}
.custom-item{
width: 70px;
}
</style>

72
frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div style="width: 100%">
<el-row>
<el-col class="custom-item el-form-item">
<el-checkbox v-model="componentStyleForm.backgroundColorSelect" style="margin-right: 10px;float: right" @change="themeChange('backgroundColorSelect')">
<span style="font-size: 12px">{{ $t('panel.color') }}</span>
</el-checkbox>
</el-col>
<el-col :span="10">
<el-color-picker v-model="componentStyleForm.color" :disabled="!componentStyleForm.backgroundColorSelect" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('color')" />
</el-col>
</el-row>
<el-form ref="componentStyleForm" :model="componentStyleForm" label-width="70px" size="mini">
<el-form-item :label="$t('panel.opacity')" class="form-item">
<el-slider v-model="componentStyleForm.alpha" :disabled="!componentStyleForm.backgroundColorSelect" show-input :show-input-controls="false" input-size="mini" @change="themeChange('alpha')" />
</el-form-item>
<el-form-item :label="$t('panel.board_radio')" class="form-item">
<el-slider v-model="componentStyleForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="themeChange('borderRadius')" />
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'ComponentStyle',
data() {
return {
basePath: 'chartInfo.chartCommonStyle.',
predefineColors: COLOR_PANEL,
componentStyleForm: {}
}
},
computed: mapState([
'canvasStyleData',
'componentData'
]),
watch: {
},
created() {
this.initForm()
},
methods: {
initForm() {
this.componentStyleForm = this.canvasStyleData.chartInfo.chartCommonStyle
},
themeChange(modifyName) {
this.componentData.forEach((item, index) => {
item.commonBackground[modifyName] = this.componentStyleForm[modifyName]
})
this.$store.commit('recordSnapshot')
}
}
}
</script>
<style scoped>
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.custom-item{
width: 70px;
}
.custom-item-value{
width: calc(100% - 70px);;
}
</style>

158
frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="overallSettingForm" :model="overallSettingForm" label-width="70px" size="mini">
<el-form-item :label="$t('panel.theme_color')" class="form-item">
<el-radio-group v-model="overallSettingForm.panel.themeColor" @change="themeChange('themeColor')">
<el-radio label="light">{{ $t('panel.theme_color_light') }}</el-radio>
<el-radio label="dark">{{ $t('panel.theme_color_dark') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.component_gap')" class="form-item">
<el-radio-group v-model="overallSettingForm.panel.gap" size="mini" @change="themeChange()">
<el-radio label="yes">{{ $t('panel.gap') }}</el-radio>
<el-radio label="no">{{ $t('panel.no_gap') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
<el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
<el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit" @change="themeChange">
<el-option :label="$t('panel.minute')" :value="'minute'" />
<el-option :label="$t('panel.second')" :value="'second'" />
</el-select>
<el-checkbox v-model="overallSettingForm.refreshViewLoading" class="el-input-refresh-loading" @change="themeChange">提示</el-checkbox>
</el-form-item>
<el-form-item :label="$t('panel.panel_view_result_show')" class="form-item form-item-result">
<div style="width: 100%;">
<el-row>
<el-col :span="16">
<el-radio-group v-model="overallSettingForm.panel.resultMode" class="radio-span" size="mini" @change="themeChange">
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
<el-radio label="custom">
<span>{{ $t('panel.panel') }} </span>
</el-radio>
</el-radio-group>
</el-col>
<el-col :span="8" class="slider-area">
<el-slider
v-model="overallSettingForm.panel.resultCount"
:disabled="overallSettingForm.panel.resultMode==='all'"
style="margin-left: 5px"
show-input
:show-input-controls="false"
:show-tooltip="false"
input-size="mini"
:min="1"
:max="10000"
@change="themeChange"
/>
</el-col>
</el-row>
</div>
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { mapState } from 'vuex'
import {
adaptCurThemeCommonStyleAll,
DARK_THEME_COMPONENT_BACKGROUND,
DARK_THEME_PANEL_BACKGROUND,
LIGHT_THEME_COMPONENT_BACKGROUND,
LIGHT_THEME_PANEL_BACKGROUND
} from '@/components/canvas/utils/style'
import bus from '@/utils/bus'
export default {
name: 'OverallSetting',
data() {
return {
colorIndex: 0,
overallSettingForm: {}
}
},
watch: {
// canvasStyleData: {
// handler(newVal, oldVla) {
// console.log('canvasStyleData=' + JSON.stringify(this.canvasStyleData))
// },
// deep: true
// }
},
computed: {
...mapState([
'canvasStyleData'
])
},
created() {
this.initForm()
},
methods: {
initForm() {
this.overallSettingForm = this.canvasStyleData
},
themeChange(modifyName) {
if (modifyName === 'themeColor') {
// 主题变更
this.canvasStyleData.chartInfo.chartCommonStyle.backgroundColorSelect = true
if (this.overallSettingForm.panel.themeColor === 'light') {
this.canvasStyleData.panel.color = LIGHT_THEME_PANEL_BACKGROUND
this.canvasStyleData.chartInfo.chartCommonStyle.color = LIGHT_THEME_COMPONENT_BACKGROUND
} else {
this.canvasStyleData.panel.color = DARK_THEME_PANEL_BACKGROUND
this.canvasStyleData.chartInfo.chartCommonStyle.color = DARK_THEME_COMPONENT_BACKGROUND
}
adaptCurThemeCommonStyleAll()
bus.$emit('onThemeColorChange')
}
this.$store.commit('recordSnapshot')
}
}
}
</script>
<style scoped>
.el-input-refresh-time{
width: 55px!important;
}
.el-input-refresh-unit{
width: 55px!important;
}
.el-input-refresh-loading{
margin-left: 5px;
font-size: 12px;
}
::v-deep .el-input__inner{
padding: 0px 5px!important;
}
::v-deep .el-slider__input{
width: 50px;
margin-top: 0px;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.slider-area ::v-deep .el-slider__runway {
display: none;
}
.result-count {
width: 80px;
}
.form-item-result ::v-deep .el-radio{
margin-right: 5px;
}
</style>

7
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
View File

@ -11,13 +11,6 @@
<el-form-item :label="'辅助网格'" class="form-item form-item-slider">
<el-checkbox v-model="aidedDesign.showGrid" size="mini" @change="onChangePanelStyle" />
</el-form-item>
<!-- <el-form-item :label="'矩阵密度'" class="form-item form-item-slider">-->
<!-- <el-radio-group v-model="aidedDesign.matrixBase" size="mini" @change="onChangePanelStyle">-->
<!-- <el-radio-button :label="1">普通</el-radio-button>-->
<!-- <el-radio-button :label="2">适中</el-radio-button>-->
<!-- <el-radio-button :label="4">密集</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">辅助设计 <i

363
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
View File

@ -1,86 +1,319 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<color-selector :chart="chart" :property-inner="propertyInner" @onColorChange="onColorChange" />
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
<div style="width: 100%">
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<div>
<el-form-item :label="$t('chart.color_case')" class="form-item">
<el-popover
placement="bottom"
width="400"
trigger="click"
>
<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('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}" />
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
<el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
</div>
<!--自定义配色方案-->
<div>
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label">{{ $t('chart.custom_case') }}</span>
<span>
<el-radio-group v-model="customColor" class="color-type">
<el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</el-radio>
</el-radio-group>
</span>
</div>
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label" />
<span>
<el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
</span>
</div>
</div>
</div>
<div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
<span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</div>
</el-popover>
</el-form-item>
<el-form-item :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-divider>{{ $t('panel.card_color_matching') }}</el-divider>
<el-form-item :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 :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>
<el-divider>{{ $t('panel.table_color_matching') }}</el-divider>
<div>
<el-form-item :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 :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 :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 :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>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
export default {
components: { ColorSelector },
name: 'ColorSelector',
props: {
chart: {
type: Object,
required: true
},
sourceType: {
type: String,
default: 'view',
required: false
}
},
data() {
return {
propertyInner: [
'value',
'alpha'
]
colorCases: [
{
name: this.$t('chart.color_default'),
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
{
name: this.$t('chart.color_retro'),
value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_elegant'),
value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
},
{
name: this.$t('chart.color_future'),
value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
},
{
name: this.$t('chart.color_gradual'),
value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
},
{
name: this.$t('chart.color_simple'),
value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_business'),
value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
},
{
name: this.$t('chart.color_gentle'),
value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
},
{
name: this.$t('chart.color_technology'),
value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_light'),
value: 'light',
colors: ['#884898', '#808080', '#82ae46', '#00a3af', '#ef8b07', '#007bbb', '#9d775f', '#fae800', '#5f9b3c']
},
{
name: this.$t('chart.color_classical'),
value: 'classical',
colors: ['#007bbb', '#ffdb4f', '#dd4b4b', '#2ca9e1', '#ef8b07', '#4a488e', '#82ae46', '#dd4b4b', '#bb9581']
},
{
name: this.$t('chart.color_fresh'),
value: 'fresh',
colors: ['#5f9b3c', '#75c24b', '#83d65f', '#aacf53', '#c7dc68', '#d8e698', '#e0ebaf', '#bbc8e6', '#e5e5e5']
},
{
name: this.$t('chart.color_energy'),
value: 'energy',
colors: ['#ef8b07', '#2a83a2', '#f07474', '#c55784', '#274a78', '#7058a3', '#0095d9', '#75c24b', '#808080']
},
{
name: this.$t('chart.color_red'),
value: 'red',
colors: ['#ff0000', '#ef8b07', '#4c6cb3', '#f8e944', '#69821b', '#9c5ec3', '#00ccdf', '#f07474', '#bb9581']
},
{
name: this.$t('chart.color_fast'),
value: 'fast',
colors: ['#fae800', '#00c039', '#0482dc', '#bb9581', '#ff7701', '#9c5ec3', '#00ccdf', '#00c039', '#ff7701']
},
{
name: this.$t('chart.color_spiritual'),
value: 'spiritual',
colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
}
],
colorForm: {},
customColor: null,
colorIndex: 0,
predefineColors: COLOR_PANEL
}
},
computed: mapState([
'canvasStyleData'
]),
watch: {
'chart.id': {
handler: function() {
this.customColor = null
this.colorIndex = 0
}
},
'chart': {
handler: function() {
this.init()
}
}
},
created() {
this.initForm()
},
mounted() {
},
methods: {
onColorChange(colorForm) {
this.$emit('onColorChange', colorForm)
initForm() {
this.colorForm = this.canvasStyleData.chartInfo.chartColor
},
changeColorOption(modifyName = 'value') {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value
})
this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
// reset custom color
this.colorForm.seriesColors = []
this.changeColorCase(modifyName)
},
changeColorCase(modifyName) {
this.colorForm['modifyName'] = modifyName
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
},
switchColor(index) {
this.colorIndex = index
},
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()
},
switchCustomColor(index) {
this.colorForm.seriesColors[index].isCustom = true
this.switchColorCase()
}
}
}
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.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
}
.el-form-item{
margin-bottom: 6px;
}
.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
}
.el-form-item{
margin-bottom: 6px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.color-label{
display: inline-block;
width: 60px;
}
.color-type>>>.el-radio__input{
display: none;
}
.el-radio{
margin:0 2px 0 0!important;
border: 1px solid transparent;
}
.el-radio>>>.el-radio__label{
padding-left: 0;
}
.el-radio.is-checked{
border: 1px solid #0a7be0;
}
.span-label {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
padding: 0 8px;
}
.custom-color-style {
height: 300px;
overflow-y: auto;
padding: 4px 12px;
border: 1px solid #e6e6e6;
}
.el-divider__text{
font-size: 8px;
font-weight: 400;
color: rgb(144, 147, 153);
}
</style>

54
frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div style="width: 100%;">
<el-form ref="viewAttributeForm" :model="viewAttributeForm" label-width="70px" size="mini">background_color
<el-form-item :label="$t('panel.background_color')" class="form-item">
<el-color-picker v-model="viewAttributeForm.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="viewAttributeChange" />
</el-form-item>
<el-form-item :label="$t('panel.opacity')" class="form-item">
<el-slider v-model="viewAttributeForm.alpha" show-input :show-input-controls="false" input-size="mini" />
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'ViewAttribute',
data() {
return {
predefineColors: COLOR_PANEL,
viewAttributeForm: {
color: '#FFFFFF',
alpha: 100
}
}
},
computed: mapState([
'canvasStyleData'
]),
watch: {
// deep监听panel 如果改变 提交到 store
},
created() {
},
methods: {
viewAttributeChange() {
}
}
}
</script>
<style scoped>
.form-item>>>.el-form-item__label{
font-size: 12px;
}
</style>

126
frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div>
<div style="width: 100%;">
<el-row>
<el-col :span="16">
<el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
<el-radio label="custom">
<span>{{ $t('panel.panel') }} </span>
</el-radio>
</el-radio-group>
</el-col>
<el-col :span="8" class="slider-area">
<el-slider
v-model="panel.resultCount"
:disabled="panel.resultMode==='all'"
style="margin-left: 5px"
show-input
:show-input-controls="false"
:show-tooltip="false"
input-size="mini"
:min="1"
:max="10000"
@change="onChangePanelStyle"
/>
</el-col>
</el-row>
<el-row>
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips: {{ $t('panel.panel_view_result_tips') }}
</span>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: 'PanelViewResult',
props: {},
data() {
return {
panel: null
}
},
computed: {
canvasStyleData() {
return this.$store.state.canvasStyleData
}
},
created() {
// 初始化赋值
this.panel = this.canvasStyleData.panel
},
methods: {
onChangePanelStyle() {
this.$store.state.styleChangeTimes++
}
}
}
</script>
<style scoped>
.avatar-uploader >>> .el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader >>> .el-upload-list li {
width: 100px !important;
height: 60px !important;
}
.disabled >>> .el-upload--picture-card {
display: none;
}
.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
}
.el-form-item {
margin-bottom: 6px;
}
.radio-span {
margin-top: 10px;
}
.radio-span >>> .el-radio__label {
margin-left: 4px;
}
.slider-area >>> .el-slider__runway {
display: none;
}
.result-count {
width: 80px;
}
</style>

129
frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<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('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<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('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('color')" />
</el-form-item>
<el-form-item :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_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('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>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
export default {
name: 'TitleSelector',
props: {
},
data() {
return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: [],
isSetting: false,
predefineColors: COLOR_PANEL
}
},
computed: {
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeTitleStyle(modifyName) {
this.titleForm['modifyName'] = modifyName
this.$emit('onTextChange', this.titleForm)
},
inputOnInput: function(e) {
this.$forceUpdate()
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style>

7
frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
View File

@ -81,6 +81,9 @@
import SubjectTemplateItem from './SubjectTemplateItem'
import { querySubjectWithGroup, saveOrUpdateSubject, deleteSubject } from '@/api/panel/panel'
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import { uuid } from 'vue-uuid'
export default {
name: 'Slider',
@ -138,8 +141,10 @@ export default {
})
},
saveSelfSubject() {
const canvasStyle = deepCopy(this.canvasStyleData)
canvasStyle.themeId = uuid.v1()
const request = {
details: JSON.stringify(this.canvasStyleData)
details: JSON.stringify(canvasStyle)
}
this.slidersLoading = true
saveOrUpdateSubject(request).then(response => {

83
frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
View File

@ -1,8 +1,16 @@
<template>
<div class="subject-template">
<div class="vertical-layout" @click.stop="subjectChange">
<div
:class="[
{
['vertical-layout-selected']: themeSelected
},
'vertical-layout'
]"
@click.stop="subjectChange"
>
<i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
<!-- <i class="el-icon-edit" />-->
<span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
<!-- 背景-->
<div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
<!-- 视图组件 背景-->
@ -66,6 +74,7 @@ import { chartTransStr2Object } from '@/views/panel/panel'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
import { saveOrUpdateSubject } from '@/api/panel/panel'
import { resetViewCacheCallBack } from '@/api/chart/chart'
export default {
name: 'StyleTemplateItem',
@ -111,8 +120,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.color.colors[0]
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.colors[0]
}
}
return style
@ -121,8 +130,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.color.colors[1]
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.colors[1]
}
}
return style
@ -131,8 +140,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.color.colors[2]
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.colors[2]
}
}
return style
@ -141,8 +150,8 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
opacity: this.subjectItemDetails.chart.customAttr.tableColor.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.tableColor.tableHeaderBgColor
opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
background: this.subjectItemDetails.chartInfo.chartColor.tableHeaderBgColor
}
}
return style
@ -151,21 +160,24 @@ export default {
let style = {}
if (this.subjectItemDetails) {
style = {
background: this.subjectItemDetails.chart.customAttr.tableColor.tableFontColor
background: this.subjectItemDetails.chartInfo.chartColor.tableFontColor
}
}
return style
},
chartBackground() {
let style = {}
if (this.subjectItemDetails && this.subjectItemDetails.chart.customStyle.background) {
if (this.subjectItemDetails && this.subjectItemDetails.chartInfo.chartCommonStyle.backgroundColorSelect) {
style = {
background: this.subjectItemDetails.chart.customStyle.background.color,
opacity: this.subjectItemDetails.chart.customStyle.background.alpha / 100
background: this.subjectItemDetails.chartInfo.chartCommonStyle.color,
opacity: this.subjectItemDetails.chartInfo.chartCommonStyle.alpha / 100
}
}
return style
},
themeSelected() {
return this.subjectItemDetails && this.subjectItemDetails.themeId === this.canvasStyleData.themeId
},
...mapState([
'canvasStyleData'
])
@ -187,19 +199,21 @@ export default {
methods: {
subjectDelete() {
this.$emit('subjectDelete', this.subjectItem.id)
// this.$alert('是否删除主题：' + this.subjectItem.name + '？', '', {
// confirmButtonText: '确认',
// callback: (action) => {
// if (action === 'confirm') {
// this.$emit('subjectDelete', this.subjectItem.id)
// }
// }
// })
},
subjectChange() {
this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
this.$store.commit('recordSnapshot', 'subjectChange')
bus.$emit('onSubjectChange')
if (!this.themeSelected) {
this.$confirm(this.$t('panel.theme_change_tips'), this.$t('panel.theme_change_warn'), {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: 'warning'
}).then(() => {
this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
this.$store.commit('recordSnapshot', 'subjectChange')
bus.$emit('onSubjectChange')
}).catch(() => {
// Do Nothing
})
}
},
templateEdit() {
this.$emit('templateEdit', this.template)
@ -283,6 +297,11 @@ export default {
border-radius: 3px;
}
.vertical-layout-selected{
border: solid 2px #4b8fdf;
border-radius: 3px;
}
.vertical-layout:hover {
border: solid 1px #4b8fdf;
border-radius: 3px;
@ -305,16 +324,16 @@ export default {
z-index: 10;
display:block;
}
.vertical-layout:hover > .el-icon-edit {
z-index: 10;
display:block;
}
.vertical-layout>>>.el-icon-error {
display:none
}
.vertical-layout>>>.el-icon-edit {
display:none
.theme-selected-icon {
z-index: 2;
font-size: 16px;
position: absolute;
bottom: 0px;
right: 0px;
color: #4b8fdf;
}
</style>

213
frontend/src/views/panel/SubjectSetting/index.vue
View File

@ -1,58 +1,31 @@
<template>
<el-row class="slider-container">
<div
style="height: 40px; padding-left: 15px; text-align: left; white-space: pre; text-overflow: ellipsis; left: 0px; right: 0px; top: 0px; font-weight: 700"
>
<div class="theme-slider-main">
{{ $t('panel.dashboard_theme') }}
</div>
<div
style="height: 1px; position: absolute; left: 15px; right: 15px; top: 40px; box-sizing:border-box;border-bottom: 1px solid #e8eaed"
/>
<div class="theme-slider-position" />
<div>
<slider v-if="sliderShow" @reload="sliderReload" />
</div>
<!--折叠面板-->
<div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item :title="$t('panel.panel')" name="panel">
<el-collapse-item :title="'整体配置'" name="panel">
<el-row class="selector-div">
<background-selector class="attr-selector" />
<!-- <panel-aided-design class="attr-selector" />-->
<component-gap class="attr-selector" />
<panel-refresh-time class="attr-selector" />
<panel-view-result class="attr-selector" />
<overall-setting />
</el-row>
</el-collapse-item>
<!-- <el-collapse-item :title="$t('chart.module_style')" name="component">-->
<!-- <el-row class="selector-div">-->
<!-- <panel-background-color-selector-->
<!-- v-if="chart"-->
<!-- class="attr-selector"-->
<!-- :chart="chart"-->
<!-- @onChangeBackgroundForm="onChangeBackgroundForm"-->
<!-- />-->
<!-- </el-row>-->
<!-- </el-collapse-item>-->
<el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
<el-row class="selector-div">
<panel-color-selector
:source-type="'panelEchart'"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
</el-row>
<el-collapse-item :title="'仪表板背景'" name="panelBackground">
<background-selector />
</el-collapse-item>
<el-collapse-item :title="$t('panel.table')" name="table">
<el-row class="selector-div">
<panel-color-selector
index="10002"
:source-type="'panelTable'"
class="attr-selector"
:chart="tableChart"
@onColorChange="onTableColorChange"
/>
</el-row>
<el-collapse-item :title="'组件样式'" name="componentStyle">
<component-style />
</el-collapse-item>
<el-collapse-item :title="'组件配色'" name="graphical">
<panel-color-selector @onColorChange="onColorChange" />
</el-collapse-item>
<el-collapse-item :title="'图表标题'" name="table">
<view-title @onTextChange="onTextChange" />
</el-collapse-item>
</el-collapse>
</div>
@ -62,40 +35,34 @@
<script>
import slider from './PreSubject/Slider'
import BackgroundSelector from './PanelStyle/BackgroundSelector'
import PanelBackgroundColorSelector from './PanelStyle/PanelBackgroundColorSelector'
import PanelColorSelector from './PanelStyle/PanelColorSelector'
import ComponentGap from './PanelStyle/ComponentGap'
import PanelRefreshTime from './PanelStyle/PanelRefreshTime'
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import bus from '@/utils/bus'
import PanelViewResult from '@/views/panel/SubjectSetting/PanelStyle/PanelViewResult'
import PanelAidedDesign from '@/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign'
import OverallSetting from '@/views/panel/SubjectSetting/PanelStyle/OverallSetting'
import ViewTitle from '@/views/panel/SubjectSetting/PanelStyle/ViewTitle'
import ComponentStyle from '@/views/panel/SubjectSetting/PanelStyle/ComponentStyle'
import { adaptCurThemeCommonStyleAll } from '@/components/canvas/utils/style'
export default {
components: {
PanelAidedDesign,
PanelViewResult,
ComponentStyle,
ViewTitle,
slider,
BackgroundSelector,
ComponentGap,
PanelColorSelector,
PanelBackgroundColorSelector,
PanelRefreshTime
OverallSetting
},
data() {
return {
sliderShow: true,
panelInfo: this.$store.state.panel.panelInfo,
activeNames: ['panel'],
chart: null,
tableChart: null,
collapseShow: true
}
},
computed: mapState([
'canvasStyleData'
'canvasStyleData',
'componentData'
]),
watch: {},
@ -105,6 +72,7 @@ export default {
this.collapseShow = false
this.$nextTick(() => {
this.init()
this.dataMerge()
this.collapseShow = true
})
})
@ -120,93 +88,94 @@ export default {
this.sliderShow = true
})
},
dataMerge() {
adaptCurThemeCommonStyleAll()
this.$store.commit('recordSnapshot')
},
init() {
// 初始化赋值
const chart = deepCopy(this.canvasStyleData.chart)
if (chart.xaxis) {
chart.xaxis = JSON.parse(chart.xaxis)
}
if (chart.yaxis) {
chart.yaxis = JSON.parse(chart.yaxis)
}
chart.customAttr = JSON.parse(chart.customAttr)
chart.customStyle = JSON.parse(chart.customStyle)
chart.customFilter = JSON.parse(chart.customFilter)
this.chart = chart
// 因为 table 的color 设置和view的共用 所以单独设置一个对象
this.tableChart = deepCopy(this.chart)
this.tableChart.customAttr.color = this.tableChart.customAttr.tableColor
},
handleChange(val) {
},
onChangePanelStyle(parma) {
},
onColorChange(val) {
this.chart.customAttr.color = val
this.save()
},
onTableColorChange(val) {
this.chart.customAttr.tableColor = val
this.save()
this.themeAttrChange('customAttr', 'color', val)
},
onTextChange(val) {
this.chart.customStyle.text = val
this.save()
},
onChangeBackgroundForm(val) {
this.chart.customStyle.background = val
this.save()
},
save() {
const canvasStyleData = deepCopy(this.canvasStyleData)
const chart = deepCopy(this.chart)
chart.xaxis = JSON.stringify(this.chart.xaxis)
chart.yaxis = JSON.stringify(this.chart.yaxis)
chart.customAttr = JSON.stringify(this.chart.customAttr)
chart.customStyle = JSON.stringify(this.chart.customStyle)
chart.customFilter = JSON.stringify(this.chart.customFilter)
canvasStyleData.chart = chart
this.$store.commit('setCanvasStyle', canvasStyleData)
this.$store.commit('recordSnapshot', 'save')
this.themeAttrChange('customStyle', 'text', val)
},
styleChange() {
this.$store.state.styleChangeTimes++
},
themeAttrChange(custom, property, value) {
bus.$emit('onThemeAttrChange', {
'custom': custom,
'property': property,
'value': value
})
this.$store.commit('recordSnapshot', 'save')
}
}
}
</script>
<style lang="scss" scoped>
.slider-container {
width: 100%;
overflow: hidden auto;
min-height: 24px;
padding-top: 0px;
padding-bottom: 0px;
position: relative;
max-height: 976px;
color: #3d4d66;
font-size: 12px;
}
.slider-container {
width: 100%;
overflow: hidden auto;
min-height: 24px;
padding-top: 0px;
padding-bottom: 0px;
position: relative;
max-height: 976px;
color: #3d4d66;
font-size: 12px;
}
.attr-selector {
background-color: white;
height: 32px;
margin: 5px 5px 5px 5px;
padding: 0 4px;
display: flex;
align-items: center;
z-index: 10001;
}
.attr-selector {
background-color: white;
height: 32px;
margin: 5px 5px 5px 5px;
padding: 0 4px;
display: flex;
align-items: center;
z-index: 10001;
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.selector-div {
background-color: var(--MainBG, #f7f8fa);
margin: 5px
}
.selector-div {
background-color: var(--MainBG);
margin: 5px
}
.padding-lr {
padding: 0 6px;
}
.theme-slider-main {
height: 40px;
padding-left: 15px;
text-align: left;
white-space: pre;
text-overflow: ellipsis;
left: 0px;
right: 0px;
top: 0px;
font-weight: 700
}
.theme-slider-position{
height: 1px;
position: absolute;
left: 15px;
right: 15px;
top: 40px;
box-sizing:border-box;
border-bottom: 1px solid #e8eaed
}
</style>

6
frontend/src/views/panel/edit/index.vue
View File

@ -369,6 +369,7 @@ import OuterParamsSet from '@/views/panel/OuterParamsSet/index'
import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet'
import Multiplexing from '@/views/panel/ViewSelect/multiplexing'
import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
export default {
name: 'PanelEdit',
components: {
@ -733,7 +734,8 @@ export default {
const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
const shujujuzhen = evt.target.closest('.icon-shujujuzhen')
const suffix = evt.target.closest('.el-input__suffix')
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen && !suffix) {
const elButton = evt.target.closest('.el-button')
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen && !suffix&& !elButton) {
this.show = false
window.removeEventListener('click', this.closeSidebar)
this.showIndex = -1
@ -1036,6 +1038,8 @@ export default {
component.id = newComponentId
// 统一设置背景信息
component.commonBackground = deepCopy(COMMON_BACKGROUND)
// 适配当前主题
adaptCurThemeCommonStyle(component)
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'newViewInfo')
this.clearCurrentInfo()

58
frontend/src/views/panel/panel.js
View File

@ -1,8 +1,10 @@
// eslint-disable-next-line no-unused-vars
import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { deepCopy } from '@/components/canvas/utils/utils'
import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/component-list'
export const DEFAULT_PANEL_STYLE = {
themeColor: 'light',
color: '#ffffff',
imageUrl: null,
backgroundType: 'image',
@ -27,7 +29,15 @@ export const CANVAS_STYLE = {
}, // 辅助设计
refreshViewLoading: true, // 仪表板视图loading提示
refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
refreshTime: 5 // 仪表板刷新时间 默认5分钟
refreshTime: 5, // 仪表板刷新时间 默认5分钟
themeId: 'system_1', // 当前所选主题ID 默认系统主题1
chartInfo: PANEL_CHART_INFO
}
export const PANEL_CHART_INFO = {
chartTitle: DEFAULT_TITLE_STYLE,
chartColor: DEFAULT_COLOR_CASE,
chartCommonStyle: COMMON_BACKGROUND_BASE
}
export const AIDED_DESIGN = {
@ -35,57 +45,17 @@ export const AIDED_DESIGN = {
matrixBase: 1 // 当前matrix的基数 （是pcMatrixCount的几倍）
}
// export const AIDED_DESIGN_NEW = {
// showGrid: true,
// matrixBase: 4 // 当前matrix的基数 （是pcMatrixCount的几倍）
// }
export const DEFAULT_COMMON_CANVAS_STYLE_STRING = {
...CANVAS_STYLE,
chart: BASE_CHART_STRING
...CANVAS_STYLE
}
export function chartTransStr2Object(targetIn, copy) {
const target = copy === 'Y' ? deepCopy(targetIn) : targetIn
if (target.chart) {
if (target.chart.xaxis && typeof target.chart.xaxis === 'string') {
target.chart.xaxis = JSON.parse(target.chart.xaxis)
}
if (target.chart.yaxis && typeof target.chart.yaxis === 'string') {
target.chart.yaxis = JSON.parse(target.chart.yaxis)
}
if (target.chart.customAttr && typeof target.chart.customAttr === 'string') {
target.chart.customAttr = JSON.parse(target.chart.customAttr)
}
if (target.chart.customStyle && typeof target.chart.customStyle === 'string') {
target.chart.customStyle = JSON.parse(target.chart.customStyle)
}
if (target.chart.customFilter && typeof target.chart.customFilter === 'string') {
target.chart.customFilter = JSON.parse(target.chart.customFilter)
}
}
return target
}
export function chartTransObject2Str(targetIn, deepCopy) {
export function chartTransObject2Str(targetIn, copy) {
// eslint-disable-next-line no-undef
const target = copy === 'Y' ? deepCopy(targetIn) : targetIn
if (target.chart) {
if (target.chart.xaxis && typeof target.chart.xaxis !== 'string') {
target.chart.xaxis = JSON.stringify(target.chart.xaxis)
}
if (target.chart.yaxis && typeof target.chart.yaxis !== 'string') {
target.chart.yaxis = JSON.stringify(target.chart.yaxis)
}
if (target.chart.customAttr && typeof target.chart.customAttr !== 'string') {
target.chart.customAttr = JSON.stringify(target.chart.customAttr)
}
if (target.chart.customStyle && typeof target.chart.customStyle !== 'string') {
target.chart.customStyle = JSON.stringify(target.chart.customStyle)
}
if (target.chart.customFilter && typeof target.chart.customFilter !== 'string') {
target.chart.customFilter = JSON.stringify(target.chart.customFilter)
}
}
return target
}