From e59d5b803d55adde3592450bd3ded0863fcac2d3 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 20 Dec 2021 12:14:57 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E6=9D=BF=E5=B1=95=E7=A4=BA=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Editor/ComponentWrapper.vue | 6 +--- .../canvas/components/Editor/Preview.vue | 2 +- .../canvas/custom-component/UserView.vue | 28 +++++++++++++------ frontend/src/components/canvas/utils/style.js | 21 ++++++++++---- .../src/views/chart/chart/scatter/scatter.js | 6 ++-- .../views/chart/components/ChartComponent.vue | 6 +++- frontend/src/views/panel/edit/index.vue | 10 +++---- 7 files changed, 50 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 8a22079c52..7a8799376a 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -169,11 +169,7 @@ export default { this.$store.commit('setCurComponent', { component: this.config, index: this.index }) }, showViewDetails() { - if (this.terminal === 'pc') { - this.$refs.wrapperChild.openChartDetailsDialog() - } else { - this.previewVisible = true - } + this.$refs.wrapperChild.openChartDetailsDialog() }, closePreview() { this.previewVisible = false diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index cd99185ff2..535992bc93 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -266,7 +266,7 @@ export default { if (this.terminal === 'pc') { this.chartDetailsVisible = true } else { - this.mobileChartDetailsVisible + this.mobileChartDetailsVisible = true } }, exportExcel() { diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index 78518d257e..68f59f2b8c 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -23,6 +23,7 @@ :chart="chart" :track-menu="trackMenu" :search-count="searchCount" + :terminal-type="scaleCoefficientType" @onChartClick="chartClick" @onJumpClick="jumpClick" /> @@ -141,10 +142,17 @@ export default { }, computed: { scaleCoefficient() { - if (this.terminal === 'pc') { + if (this.terminal === 'pc' && !this.mobileLayoutStatus) { return 1.1 } else { - return 4 + return 4.5 + } + }, + scaleCoefficientType() { + if (this.terminal === 'pc' && !this.mobileLayoutStatus) { + return 'pc' + } else { + return 'mobile' } }, editBarViewShowFlag() { @@ -226,7 +234,8 @@ export default { 'nowPanelTrackInfo', 'nowPanelJumpInfo', 'publicLinkStatus', - 'previewCanvasScale' + 'previewCanvasScale', + 'mobileLayoutStatus' ]) }, @@ -309,17 +318,18 @@ export default { const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient const customAttrChart = JSON.parse(this.sourceCustomAttrStr) const customStyleChart = JSON.parse(this.sourceCustomStyleStr) - recursionTransObj(customAttrTrans, customAttrChart, scale) - recursionTransObj(customStyleTrans, customStyleChart, scale) + recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType) + recursionTransObj(customStyleTrans, customStyleChart, scale, this.scaleCoefficientType) + + // 移动端地图标签不显示 + if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') { + customAttrChart.label.show = false + } this.chart = { ...this.chart, customAttr: JSON.stringify(customAttrChart), customStyle: JSON.stringify(customStyleChart) } - // console.log('customAttrChartSource:' + JSON.stringify(JSON.parse(this.sourceCustomAttrStr))) - // console.log('customAttrChart:' + JSON.stringify(customAttrChart)) - // console.log('customStyleChartSource:' + JSON.stringify(JSON.parse(this.sourceCustomStyleStr))) - // console.log('customStyleChart:' + JSON.stringify(customStyleChart)) this.mergeStyle() }, mergeStyle() { diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js index 6c0ca6d9d0..08835b0b4b 100644 --- a/frontend/src/components/canvas/utils/style.js +++ b/frontend/src/components/canvas/utils/style.js @@ -150,27 +150,36 @@ export const customStyleTrans = { } } +// 移动端特殊属性 +export const mobileSpecialProps = { + 'lineWidth': 3, // 线宽固定值 + 'lineSymbolSize': 5// 折点固定值 +} + export function getScaleValue(propValue, scale) { const propValueTemp = Math.round(propValue * scale) return propValueTemp > 1 ? propValueTemp : 1 } -export function recursionTransObj(template, infoObj, scale) { - // console.log('recursionObj++') +export function recursionTransObj(template, infoObj, scale, terminal) { for (const templateKey in template) { // 如果是数组 进行赋值计算 if (template[templateKey] instanceof Array) { template[templateKey].forEach(templateProp => { if (infoObj[templateKey] && infoObj[templateKey][templateProp]) { - const afterValue = getScaleValue(infoObj[templateKey][templateProp], scale) - console.log(templateKey + '.' + templateProp + '=' + infoObj[templateKey][templateProp] + ';scale:' + scale + ',after:' + afterValue) - infoObj[templateKey][templateProp] = afterValue + // 移动端特殊属性值设置 + if (terminal === 'mobile' && mobileSpecialProps[templateProp] !== undefined) { + // console.log('mobile:' + templateProp + mobileSpecialProps[templateProp]) + infoObj[templateKey][templateProp] = mobileSpecialProps[templateProp] + } else { + infoObj[templateKey][templateProp] = getScaleValue(infoObj[templateKey][templateProp], scale) + } } }) } else { // 如果是对象 继续进行递归 if (infoObj[templateKey]) { - recursionTransObj(template[templateKey], infoObj[templateKey], scale) + recursionTransObj(template[templateKey], infoObj[templateKey], scale, terminal) } } } diff --git a/frontend/src/views/chart/chart/scatter/scatter.js b/frontend/src/views/chart/chart/scatter/scatter.js index c90278c189..e1883f3855 100644 --- a/frontend/src/views/chart/chart/scatter/scatter.js +++ b/frontend/src/views/chart/chart/scatter/scatter.js @@ -2,8 +2,10 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' import { componentStyle } from '../common/common' let bubbleArray = [] +let terminalType = 'pc' -export function baseScatterOption(chart_option, chart) { +export function baseScatterOption(chart_option, chart, terminal = 'pc') { + terminalType = terminal // 处理shape attr let customAttr = {} if (chart.customAttr) { @@ -59,7 +61,7 @@ export function baseScatterOption(chart_option, chart) { } const funcSize = function(data) { - const k = 80 + const k = terminalType === 'pc' ? 80 : 30 const max = Math.max(...bubbleArray) return (data[2] / max) * k } diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index b1a9a38852..995784ef4e 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -60,6 +60,10 @@ export default { type: Number, required: false, default: 0 + }, + terminalType: { + type: String, + default: 'pc' } }, data() { @@ -154,7 +158,7 @@ export default { } else if (chart.type === 'gauge') { chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart) } else if (chart.type === 'scatter') { - chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart) + chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType) } else if (chart.type === 'treemap') { chart_option = baseTreemapOption(JSON.parse(JSON.stringify(BASE_TREEMAP)), chart) } else if (chart.type === 'chart-mix') { diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 3fe25b2cf0..5809f95db0 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -112,7 +112,7 @@