fix: 修改线上线下地图配置方式，优化自建台站首次加载谱时间太久的问题

.env.development

@@ -3,7 +3,6 @@ VUE_APP_API_BASE_URL=http://182.92.183.230:9999
 # VUE_APP_API_BASE_URL=http://192.168.0.111:9999
 VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
 VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
-VUE_APP_MAP_BASE_URL=https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm
 
 # 微应用列表必须VUE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 VUE_APP_SUB_jeecg-app-1 = '//localhost:8092'

.env.production

@@ -2,4 +2,3 @@ NODE_ENV=production
 VUE_APP_API_BASE_URL=/armd
 VUE_APP_CAS_BASE_URL=http://localhost:8888/cas
 VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
-VUE_APP_MAP_BASE_URL=https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm

.gitignore

@@ -15,3 +15,4 @@ dist
 
 ## front
 /yarn-error.log
+dist.zip

public/static/config.js

@@ -8,6 +8,11 @@ window._CONFIG = {
   VUE_APP_CAS_BASE_URL: '',
   // 文件预览路径
   VUE_APP_ONLINE_BASE_URL: '',
-  // 离线地图
+  // 地图源配置
-  VUE_APP_MAP_BASE_URL_OFFLINE: 'http://localhost:8001/map/{z}/{x}/{y}.jpg'
+  VUE_APP_MAP_SOURCE: {
+    type: 'online', // 默认是在线还是离线
+    online:
+      'https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm',
+    offline: 'http://localhost:8001/map/{z}/{x}/{y}.jpg'
+  }
 }

src/views/spectrumAnalysis/beta-analysis.vue

@@ -205,7 +205,6 @@ export default {
       ROILists: [],
       ROIAnalyzeLists: [],
       roiParamList: cloneDeep(InitialRoiParamList),
-      sampleDetail: {},
       resultDisplay: [],
       timerStamp: Date.now(),
     }
@@ -218,7 +217,6 @@ export default {
           this.cancelLastRequest()
           this.isLoading = false
           const { data } = sampleData
-          console.log('%c [ data ]-221', 'font-size:13px; background:pink; color:#bf2c9f;', data)
           this.sampleDetail = data
           this.changeChartByType('sample')
           // 更新XeData
@@ -497,6 +495,7 @@ export default {
         betaEnergyData,
         gammaEnergyData,
         histogramDataList,
+        histogramDataDList,
         ROIOneList,
         ROITwoList,
         ROIThreeList,
@@ -523,7 +522,7 @@ export default {
       this.roiParamList = cloneDeep(boundaryList)
       this.$nextTick(() => {
         this.$refs.betaChartRef.setBoundaryList(boundaryList)
-        this.$refs.betaChartRef.setData(histogramDataList)
+        this.$refs.betaChartRef.setData(histogramDataList, histogramDataDList)
       })
       this.gammaEnergyData = gammaEnergyData
       this.betaEnergyData = betaEnergyData

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -79,10 +79,10 @@
       <!-- 2D图表结束 -->
 
       <!-- 3D Surface开始 -->
-      <CustomChart v-if="btnActive == 3" key="1" :option="threeDSurfaceOption" autoresize />
+      <CustomChart v-if="btnActive == 3" key="1" ref="chartThreeDSurfaceRef" autoresize />
       <!-- 3D Surface结束 -->
       <!-- 3D Scatter -->
-      <CustomChart v-if="btnActive == 4" key="2" :option="threeDScatterOption" autoresize />
+      <CustomChart v-if="btnActive == 4" key="2" ref="chartThreeDScatterRef" autoresize />
       <!-- 3D Scatter结束 -->
     </div>
   </div>
@@ -228,6 +228,7 @@ const ThreeDSurfaceOption = {
       // 自定义 tooltip 的内容
       return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
     },
+    confine: true,
   },
   visualMap: {
     show: false,
@@ -285,6 +286,7 @@ const ThreeDSurfaceOption = {
   series: {
     type: 'surface',
     data: [],
+    animation: false,
   },
 }
 
@@ -296,6 +298,7 @@ const ThreeDScatterOption = {
       // 自定义 tooltip 的内容
       return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
     },
+    confine: true,
   },
   visualMap: {
     show: false,
@@ -352,13 +355,14 @@ const ThreeDScatterOption = {
   },
   series: {
     type: 'scatter3D',
-    symbolSize: 5,
+    symbolSize: 3,
     emphasis: {
       label: {
         show: false,
       },
     },
     data: [],
+    animation: false,
   },
 }
 
@@ -413,8 +417,6 @@ export default {
       },
 
       btnActive: 2,
-      threeDSurfaceOption: cloneDeep(ThreeDSurfaceOption),
-      threeDScatterOption: cloneDeep(ThreeDScatterOption),
     }
   },
   created() {
@@ -428,7 +430,7 @@ export default {
   mounted() {
     const newOption = cloneDeep(TwoDOption)
     newOption.tooltip.axisPointer.label.formatter = this.axiosPointerFormatter
-    this.setOption(newOption)
+    this.setTwoDChartOption(newOption)
   },
   methods: {
     getAxiosCount(isBetaChannel, value) {
@@ -453,7 +455,7 @@ export default {
       return `c: ${fixedValue}\ne: ${energy ? energy.toFixed(3) : 0}`
     },
 
-    setData(histogramDataList) {
+    setData(histogramDataList, histogramDataDList) {
       const map = new Map()
       histogramDataList.forEach(({ b, g, c }) => {
         map.set(`${b}_${g}`, c)
@@ -461,9 +463,10 @@ export default {
       this.histogramDataListMap = map
 
       this.histogramDataList = histogramDataList
+      this.threedData = histogramDataDList.map(({ b, g, c }) => [b, g, c])
       this.setVisialMapParams()
       this.buildScatterList()
-      this.initChart()
+      this.initTwoDChart()
       this.btnActive = 2
     },
 
@@ -477,14 +480,14 @@ export default {
       this.reDrawRect()
     },
 
-    setOption(option, opts) {
+    setTwoDChartOption(option, opts) {
       this.$refs.chartTwoDRef.setOption(option, opts)
     },
 
-    initChart() {
+    initTwoDChart() {
       this.chartAxis = cloneDeep(ChartAxis)
 
-      this.setOption({
+      this.setTwoDChartOption({
         ...this.chartAxis,
         series: {
           data: this.scatterList,
@@ -492,11 +495,6 @@ export default {
       })
 
       this.reDrawRect()
-
-      // 设置3D图表值
-      const threedData = this.histogramDataList.map(({ b, g, c }) => [b, g, c])
-      this.threeDSurfaceOption.series.data = threedData
-      this.threeDScatterOption.series.data = threedData
     },
 
     // 构造scatter列表
@@ -517,7 +515,7 @@ export default {
         yAxis: { min: minY, max: maxY },
       } = this.chartAxis
 
-      this.setOption({
+      this.setTwoDChartOption({
         xAxis: {
           min: minX,
           max: maxX,
@@ -568,9 +566,6 @@ export default {
       // 要求在最大值基础上加100
       this.visualMap.max = max
       this.visualMap.value = [0, max]
-
-      this.threeDSurfaceOption.visualMap.max = max
-      this.threeDScatterOption.visualMap.max = max
     },
 
     // 右侧滑块改变
@@ -646,6 +641,27 @@ export default {
         this.$emit('open-modal', index)
       } else {
         this.btnActive = index
+
+        // 如果切换到了3D Surface
+        if (index == 3) {
+          const option = cloneDeep(ThreeDSurfaceOption)
+          option.series.data = this.threedData
+          this.$nextTick(() => {
+            console.time('Surface')
+            this.$refs.chartThreeDSurfaceRef.setOption(option)
+            console.timeEnd('Surface')
+          })
+        }
+        // 如果切换到了3D Scatter
+        if (index == 4) {
+          const option = cloneDeep(ThreeDScatterOption)
+          option.series.data = this.threedData
+          this.$nextTick(() => {
+            console.time('Scatter')
+            this.$refs.chartThreeDScatterRef.setOption(option)
+            console.timeEnd('Scatter')
+          })
+        }
       }
     },
     // 点击unzoom
@@ -667,7 +683,7 @@ export default {
         max: x2,
       }
 
-      this.setOption({
+      this.setTwoDChartOption({
         yAxis: { min: x1, max: x2 },
       })
 

src/views/stationOperation/components/Map.vue

@@ -20,7 +20,6 @@ import { LineString, Point } from 'ol/geom'
 import { Feature } from 'ol'
 import Style from 'ol/style/Style'
 
-const mapSourceUrl = process.env.VUE_APP_MAP_BASE_URL
 export default {
   props: {
     zoom: {
@@ -58,10 +57,9 @@ export default {
     // 初始化地图
     initMap() {
       const { longitude, latitude } = this.center
-
       this.tileLayer = new TileLayer({
         source: new XYZ({
-          url: mapSourceUrl,
+          url: window._CONFIG.VUE_APP_MAP_SOURCE[window._CONFIG.VUE_APP_MAP_SOURCE.type],
         }),
       })
 

src/views/stationOperation/components/MapPane.vue

@@ -489,7 +489,7 @@ export default {
 
       stationInfo: undefined,
 
-      mapSource: 'online',
+      mapSource: window._CONFIG.VUE_APP_MAP_SOURCE.type,
 
       routeParams: {
         stationCode: undefined,

src/views/stationOperation/index.vue

@@ -553,12 +553,7 @@ export default {
      * @param {'online'|'offline'} mapSource
      */
     handleMapSourceChange(mapSource) {
-      if (mapSource == 'online') {
+      this.$refs.mapRef.changeSource(window._CONFIG.VUE_APP_MAP_SOURCE[mapSource])
-        const mapSourceUrl = process.env.VUE_APP_MAP_BASE_URL
-        this.$refs.mapRef.changeSource(mapSourceUrl)
-      } else {
-        this.$refs.mapRef.changeSource(window._CONFIG.VUE_APP_MAP_BASE_URL_OFFLINE)
-      }
     },
 
     getScrollContainer() {