Merge pull request #1474 from dataease/pr@dev@refactor_panel-scale

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

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

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() {

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() {
@@ -227,7 +235,8 @@ export default {
       'nowPanelTrackInfo',
       'nowPanelJumpInfo',
       'publicLinkStatus',
-      'previewCanvasScale'
+      'previewCanvasScale',
+      'mobileLayoutStatus'
     ])
   },
 
@@ -310,17 +319,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() {

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)
       }
     }
   }

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
 }

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') {

frontend/src/views/panel/edit/index.vue

@@ -112,7 +112,7 @@
         <el-row v-if="mobileLayoutStatus" class="mobile_canvas_main">
           <el-col :span="8" class="this_mobile_canvas_cell">
             <div
-              v-proportion="2.5"
+              v-proportion="2.1"
               :style="customCanvasMobileStyle"
               class="this_mobile_canvas"
               @drop="handleDrop"
@@ -955,10 +955,10 @@ export default {
 
 .this_mobile_canvas{
   border-radius:30px;
-  min-width: 280px;
-  max-width: 300px;
-  min-height: 700px;
-  max-height: 750px;
+  min-width: 300px;
+  max-width: 350px;
+  min-height: 600px;
+  max-height: 700px;
   overflow: hidden;
   background-color: #000000;
   background-size:100% 100% !important;