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

2024-10-10 16:03:36 +08:00 · 2024-10-10 16:03:36 +08:00 · 0eb46e8343
commit 0eb46e8343
parent 1dcd0dd06f
9 changed files with 55 additions and 43 deletions
--- a/.env.development
+++ b/.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'
--- a/.env.production
+++ b/.env.production
@ -1,5 +1,4 @@
 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
+VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
--- a/.gitignore
+++ b/.gitignore
@ -15,3 +15,4 @@ dist

 ## front
 /yarn-error.log
+dist.zip
--- a/public/static/config.js
+++ b/public/static/config.js
@ -2,12 +2,17 @@
 * 存放配置常量(当值不为空时会覆盖env配置)
 */
 window._CONFIG = {
-  //接口父路径
+  // 接口父路径
  VUE_APP_API_BASE_URL: '',
-  //单点登录地址
+  // 单点登录地址
  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'
+  }
+}
--- a/src/views/spectrumAnalysis/beta-analysis.vue
+++ b/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
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue
+++ b/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 },
      })

--- a/src/views/stationOperation/components/Map.vue
+++ b/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],
        }),
      })

--- a/src/views/stationOperation/components/MapPane.vue
+++ b/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,
--- a/src/views/stationOperation/index.vue
+++ b/src/views/stationOperation/index.vue
@ -553,12 +553,7 @@ export default {
     * @param {'online'|'offline'} mapSource
     */
    handleMapSourceChange(mapSource) {
-      if (mapSource == 'online') {
-        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)
-      }
+      this.$refs.mapRef.changeSource(window._CONFIG.VUE_APP_MAP_SOURCE[mapSource])
    },

    getScrollContainer() {