提交 e59d5b80 authored 作者: wangjiahao's avatar wangjiahao

refactor: 移动端仪表板展示适配

上级 9a4469d7
...@@ -169,11 +169,7 @@ export default { ...@@ -169,11 +169,7 @@ export default {
this.$store.commit('setCurComponent', { component: this.config, index: this.index }) this.$store.commit('setCurComponent', { component: this.config, index: this.index })
}, },
showViewDetails() { showViewDetails() {
if (this.terminal === 'pc') { this.$refs.wrapperChild.openChartDetailsDialog()
this.$refs.wrapperChild.openChartDetailsDialog()
} else {
this.previewVisible = true
}
}, },
closePreview() { closePreview() {
this.previewVisible = false this.previewVisible = false
......
...@@ -266,7 +266,7 @@ export default { ...@@ -266,7 +266,7 @@ export default {
if (this.terminal === 'pc') { if (this.terminal === 'pc') {
this.chartDetailsVisible = true this.chartDetailsVisible = true
} else { } else {
this.mobileChartDetailsVisible this.mobileChartDetailsVisible = true
} }
}, },
exportExcel() { exportExcel() {
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
:chart="chart" :chart="chart"
:track-menu="trackMenu" :track-menu="trackMenu"
:search-count="searchCount" :search-count="searchCount"
:terminal-type="scaleCoefficientType"
@onChartClick="chartClick" @onChartClick="chartClick"
@onJumpClick="jumpClick" @onJumpClick="jumpClick"
/> />
...@@ -141,10 +142,17 @@ export default { ...@@ -141,10 +142,17 @@ export default {
}, },
computed: { computed: {
scaleCoefficient() { scaleCoefficient() {
if (this.terminal === 'pc') { if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 1.1 return 1.1
} else { } else {
return 4 return 4.5
}
},
scaleCoefficientType() {
if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 'pc'
} else {
return 'mobile'
} }
}, },
editBarViewShowFlag() { editBarViewShowFlag() {
...@@ -226,7 +234,8 @@ export default { ...@@ -226,7 +234,8 @@ export default {
'nowPanelTrackInfo', 'nowPanelTrackInfo',
'nowPanelJumpInfo', 'nowPanelJumpInfo',
'publicLinkStatus', 'publicLinkStatus',
'previewCanvasScale' 'previewCanvasScale',
'mobileLayoutStatus'
]) ])
}, },
...@@ -309,17 +318,18 @@ export default { ...@@ -309,17 +318,18 @@ export default {
const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
const customAttrChart = JSON.parse(this.sourceCustomAttrStr) const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
const customStyleChart = JSON.parse(this.sourceCustomStyleStr) const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj(customAttrTrans, customAttrChart, scale) recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, scale) recursionTransObj(customStyleTrans, customStyleChart, scale, this.scaleCoefficientType)
// 移动端地图标签不显示
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
customAttrChart.label.show = false
}
this.chart = { this.chart = {
...this.chart, ...this.chart,
customAttr: JSON.stringify(customAttrChart), customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customStyleChart) 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() this.mergeStyle()
}, },
mergeStyle() { mergeStyle() {
......
...@@ -150,27 +150,36 @@ export const customStyleTrans = { ...@@ -150,27 +150,36 @@ export const customStyleTrans = {
} }
} }
// 移动端特殊属性
export const mobileSpecialProps = {
'lineWidth': 3, // 线宽固定值
'lineSymbolSize': 5// 折点固定值
}
export function getScaleValue(propValue, scale) { export function getScaleValue(propValue, scale) {
const propValueTemp = Math.round(propValue * scale) const propValueTemp = Math.round(propValue * scale)
return propValueTemp > 1 ? propValueTemp : 1 return propValueTemp > 1 ? propValueTemp : 1
} }
export function recursionTransObj(template, infoObj, scale) { export function recursionTransObj(template, infoObj, scale, terminal) {
// console.log('recursionObj++')
for (const templateKey in template) { for (const templateKey in template) {
// 如果是数组 进行赋值计算 // 如果是数组 进行赋值计算
if (template[templateKey] instanceof Array) { if (template[templateKey] instanceof Array) {
template[templateKey].forEach(templateProp => { template[templateKey].forEach(templateProp => {
if (infoObj[templateKey] && infoObj[templateKey][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) if (terminal === 'mobile' && mobileSpecialProps[templateProp] !== undefined) {
infoObj[templateKey][templateProp] = afterValue // console.log('mobile:' + templateProp + mobileSpecialProps[templateProp])
infoObj[templateKey][templateProp] = mobileSpecialProps[templateProp]
} else {
infoObj[templateKey][templateProp] = getScaleValue(infoObj[templateKey][templateProp], scale)
}
} }
}) })
} else { } else {
// 如果是对象 继续进行递归 // 如果是对象 继续进行递归
if (infoObj[templateKey]) { if (infoObj[templateKey]) {
recursionTransObj(template[templateKey], infoObj[templateKey], scale) recursionTransObj(template[templateKey], infoObj[templateKey], scale, terminal)
} }
} }
} }
......
...@@ -2,8 +2,10 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' ...@@ -2,8 +2,10 @@ import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common' import { componentStyle } from '../common/common'
let bubbleArray = [] let bubbleArray = []
let terminalType = 'pc'
export function baseScatterOption(chart_option, chart) { export function baseScatterOption(chart_option, chart, terminal = 'pc') {
terminalType = terminal
// 处理shape attr // 处理shape attr
let customAttr = {} let customAttr = {}
if (chart.customAttr) { if (chart.customAttr) {
...@@ -59,7 +61,7 @@ export function baseScatterOption(chart_option, chart) { ...@@ -59,7 +61,7 @@ export function baseScatterOption(chart_option, chart) {
} }
const funcSize = function(data) { const funcSize = function(data) {
const k = 80 const k = terminalType === 'pc' ? 80 : 30
const max = Math.max(...bubbleArray) const max = Math.max(...bubbleArray)
return (data[2] / max) * k return (data[2] / max) * k
} }
...@@ -60,6 +60,10 @@ export default { ...@@ -60,6 +60,10 @@ export default {
type: Number, type: Number,
required: false, required: false,
default: 0 default: 0
},
terminalType: {
type: String,
default: 'pc'
} }
}, },
data() { data() {
...@@ -154,7 +158,7 @@ export default { ...@@ -154,7 +158,7 @@ export default {
} else if (chart.type === 'gauge') { } else if (chart.type === 'gauge') {
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart) chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
} else if (chart.type === 'scatter') { } 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') { } else if (chart.type === 'treemap') {
chart_option = baseTreemapOption(JSON.parse(JSON.stringify(BASE_TREEMAP)), chart) chart_option = baseTreemapOption(JSON.parse(JSON.stringify(BASE_TREEMAP)), chart)
} else if (chart.type === 'chart-mix') { } else if (chart.type === 'chart-mix') {
......
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
<el-row v-if="mobileLayoutStatus" class="mobile_canvas_main"> <el-row v-if="mobileLayoutStatus" class="mobile_canvas_main">
<el-col :span="8" class="this_mobile_canvas_cell"> <el-col :span="8" class="this_mobile_canvas_cell">
<div <div
v-proportion="2.5" v-proportion="2.1"
:style="customCanvasMobileStyle" :style="customCanvasMobileStyle"
class="this_mobile_canvas" class="this_mobile_canvas"
@drop="handleDrop" @drop="handleDrop"
...@@ -955,10 +955,10 @@ export default { ...@@ -955,10 +955,10 @@ export default {
.this_mobile_canvas{ .this_mobile_canvas{
border-radius:30px; border-radius:30px;
min-width: 280px; min-width: 300px;
max-width: 300px; max-width: 350px;
min-height: 700px; min-height: 600px;
max-height: 750px; max-height: 700px;
overflow: hidden; overflow: hidden;
background-color: #000000; background-color: #000000;
background-size:100% 100% !important; background-size:100% 100% !important;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论