refactor:优化代码

src/views/water-station-popup/index.vue

@@ -166,116 +166,120 @@ export default {
         warning('请输入查询半径')
         return
       }
-      this.getAroundAnalysisOwnList()
       this.addCameraToMap()
+      this.getAroundAnalysisOwnList()
     },
     getMonitoringStatistics(id) {
-      getMonitoringStatistics({ stationId: id }).then((res) => {
-        this.chartShow = true
-        if (res.data) {
-          this.swInfo = res.data.info
-          const option = {
-            backgroundColor: 'transparent',
-            color: ['#66DC95'],
-            grid: {
-              left: 16,
-              right: 16,
-              top: 20,
-              bottom: 8,
-              containLabel: true
-            },
-            tooltip: {
-              trigger: 'axis',
+      try {
+        getMonitoringStatistics({ stationId: id }).then((res) => {
+          this.chartShow = true
+          if (res.data) {
+            this.swInfo = res.data.info
+            const option = {
               backgroundColor: 'transparent',
-              borderColor: 'transparent',
-              borderWidth: 0,
-              extraCssText: 'box-shadow: none;',
-              formatter: function (params) {
-                let value = params[params.length - 1].value
-                let date = params[params.length - 1].name
-                return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
+              color: ['#66DC95'],
+              grid: {
+                left: 16,
+                right: 16,
+                top: 20,
+                bottom: 8,
+                containLabel: true
+              },
+              tooltip: {
+                trigger: 'axis',
+                backgroundColor: 'transparent',
+                borderColor: 'transparent',
+                borderWidth: 0,
+                extraCssText: 'box-shadow: none;',
+                formatter: function (params) {
+                  let value = params[params.length - 1].value
+                  let date = params[params.length - 1].name
+                  return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
                         ${date}  高程${value}m
                    </div>`
-              }
-            },
-            xAxis: [
-              {
-                type: 'category',
-                boundaryGap: false,
-                data: res.data.statisticalArray,
-                axisLine: {
+                }
+              },
+              xAxis: [
+                {
+                  type: 'category',
+                  boundaryGap: false,
+                  data: res.data.statisticalArray,
+                  axisLine: {
+                    lineStyle: {
+                      color: '#374672',
+                      width: 1 //这里是为了突出显示加上的
+                    }
+                  },
+                  axisTick: {
+                    show: false
+                  },
                   lineStyle: {
                     color: '#374672',
-                    width: 1 //这里是为了突出显示加上的
-                  }
-                },
-                axisTick: {
-                  show: false
-                },
-                lineStyle: {
-                  color: '#374672',
-                  width: 1
-                },
-                axisLabel: {
-                  formatter: function (value) {
-                    return moment(value).format('MM/DD')
+                    width: 1
+                  },
+                  axisLabel: {
+                    formatter: function (value) {
+                      return moment(value).format('MM/DD')
+                    }
                   }
                 }
-              }
-            ],
-            yAxis: [
-              {
-                type: 'value',
-                splitLine: { show: false },
-                // min: 380,
-                // interval: 10,
-                axisLine: {
-                  lineStyle: {
-                    color: '#374672',
-                    width: 1 //这里是为了突出显示加上的
+              ],
+              yAxis: [
+                {
+                  type: 'value',
+                  splitLine: { show: false },
+                  // min: 380,
+                  // interval: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: '#374672',
+                      width: 1 //这里是为了突出显示加上的
+                    }
                   }
                 }
-              }
-            ],
-            series: [
-              {
-                type: 'line',
-                smooth: true,
-                lineStyle: { width: 1, color: '#66DC95' },
-                symbol: 'circle',
-                symbolSize: 7,
-                itemStyle: {
-                  normal: {
-                    color: '#ffff', // 点颜色
-                    borderColor: '#66DC95', // 点的边框颜色
-                    borderWidth: 2 // 点的边框宽度
+              ],
+              series: [
+                {
+                  type: 'line',
+                  smooth: true,
+                  lineStyle: { width: 1, color: '#66DC95' },
+                  symbol: 'circle',
+                  symbolSize: 7,
+                  itemStyle: {
+                    normal: {
+                      color: '#ffff', // 点颜色
+                      borderColor: '#66DC95', // 点的边框颜色
+                      borderWidth: 2 // 点的边框宽度
+                    },
+                    emphasis: {
+                      borderWidth: 4, // 鼠标悬停时边框加粗
+                      shadowBlur: 10, // 阴影模糊大小，实现放大的效果
+                      shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+                    }
                   },
-                  emphasis: {
-                    borderWidth: 4, // 鼠标悬停时边框加粗
-                    shadowBlur: 10, // 阴影模糊大小，实现放大的效果
-                    shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
-                  }
-                },
-                areaStyle: {
-                  opacity: 0.8,
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 1, color: 'rgba(102,220,149,0)' },
-                    { offset: 0, color: 'rgba(102,220,149,0.25)' }
-                  ])
-                },
-                data: res.data.realTimeElevation
-              }
-            ]
+                  areaStyle: {
+                    opacity: 0.8,
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 1, color: 'rgba(102,220,149,0)' },
+                      { offset: 0, color: 'rgba(102,220,149,0.25)' }
+                    ])
+                  },
+                  data: res.data.realTimeElevation
+                }
+              ]
+            }
+            this.swOption = option
+          } else {
+            this.swOption = {}
+            this.swInfo = {}
           }
-          this.swOption = option
-        } else {
-          this.swOption = {}
-          this.swInfo = {}
-        }
-      })
+        })
+      } catch (e) {
+        console.error(e)
+      }
     },
     getAroundAnalysisOwnList() {
-      let radius = this.radius?parseFloat(this.radius) * 1000:1000;
+      let radius = this.radius ? parseFloat(this.radius) * 1000 : 1000
       window
         .requestSDK(
           '/sddnWeiHe/device/aroundAnalysisList',
@@ -331,6 +335,7 @@ export default {
     },
 
     addCameraToMap() {
+      console.log(11111,this.radius)
       if (graphicsLayer) {
         window.map.removeLayer(graphicsLayer)
       }
@@ -341,9 +346,9 @@ export default {
         style: {
           radius: this.radius * 1000,
           color: '#498EE3',
-          opacity: 0.2,
+          opacity: 0.3,
           outline: true,
-          outlineWidth: 1,
+          outlineWidth: 2,
           outlineColor: '#4D7BFF',
           clampToGround: true
         }
@@ -352,6 +357,7 @@ export default {
     },
     // 添加摄像头图标
     addCameraIcon() {
+      console.log(this.radius)
       if (!graphicsLayer) {
         graphicsLayer = new this.mars3d.layer.GraphicLayer()
         window.map.addLayer(graphicsLayer)