fix: 优化部分代码

src/components/CustomChart/index.vue

@@ -24,7 +24,10 @@ export default {
   watch : {
     option: {
       handler() {
-        this.chart && this.chart.setOption(this.option)
+        if(this.chart) {
+          this.chart.clear()
+          this.chart.setOption(this.option)
+        }
       },
       deep: true
     },

src/views/stationOperation/components/MapMarker.vue

@@ -122,7 +122,7 @@ export default {
     // 显示地图弹窗
     async showMapPopup(stationInfo) {
       this.popupOverlay.setPosition(fromLonLat([stationInfo.lon, stationInfo.lat]))
-      this.popupOverlay.setOffset([stationInfo.stationType == MarkerType.NuclearFacility ? 10 : 0, 32])
+      this.popupOverlay.setOffset([stationInfo.stationType == MarkerType.NuclearFacility ? 9 : 0, 35])
       this.columns = PopupColumns[stationInfo.stationType]
       this.popupTitle = stationInfo.stationType
       this.isGettingInfo = true

src/views/stationOperation/components/MapPane.vue

@@ -1,5 +1,11 @@
 <template>
-  <div :class="'map-pane' + (active == 1 ? ' is-station' : '')">
+  <div class="map-pane" :class="{ 'pane-hide': !showPane }">
+    <!-- 展开右侧配置栏按钮开始 -->
+    <div class="toggle-show-btn" v-if="!showPane">
+      <img src="@/assets/images/station-operation/toggle.png" @click="showPane = true" />
+    </div>
+    <!-- 展开右侧配置栏按钮结束 -->
+
     <!-- 操作栏开始 -->
     <div class="map-pane-operators">
       <div>
@@ -17,11 +23,19 @@
           <img v-else src="@/assets/images/station-operation/analyze.png" @click="handleOpenAnalyzeModal" />
         </div>
         <div>
-          <img v-if="active == 1" src="@/assets/images/station-operation/station-operate-active.png" />
+          <img
+            v-if="active == 1"
+            src="@/assets/images/station-operation/station-operate-active.png"
+            @click="showPane = false"
+          />
           <img v-else src="@/assets/images/station-operation/station-operate.png" @click="onPaneChange(1)" />
         </div>
         <div>
-          <img v-if="active == 2" src="@/assets/images/station-operation/filter-station-active.png" />
+          <img
+            v-if="active == 2"
+            src="@/assets/images/station-operation/filter-station-active.png"
+            @click="showPane = false"
+          />
           <img v-else src="@/assets/images/station-operation/filter-station.png" @click="onPaneChange(2)" />
         </div>
       </div>
@@ -408,7 +422,9 @@ export default {
       isGettingStatusList: false,
       showChart: true,
 
-      markerList: [] // 要在地图上展示的marker列表
+      markerList: [], // 要在地图上展示的marker列表
+
+      showPane: true
     }
   },
   created() {
@@ -743,9 +759,11 @@ export default {
         clearInterval(this.timer)
       }
       this.getDataRecieveStatusList()
-      this.timer = setInterval(() => {
+      if (this.dataRecieveStatusModel.updateIntervalTime) {
-        this.getDataRecieveStatusList()
+        this.timer = setInterval(() => {
-      }, this.dataRecieveStatusModel.updateIntervalTime * 60 * 1000)
+          this.getDataRecieveStatusList()
+        }, this.dataRecieveStatusModel.updateIntervalTime * 60 * 1000)
+      }
     },
 
     // 获取数据接收状态列表
@@ -809,18 +827,33 @@ export default {
   position: absolute;
   right: 10px;
   top: 10px;
-  max-height: calc(100% - 20px);
+  height: calc(100% - 20px);
   z-index: 1;
   display: flex;
   gap: 15px;
+  transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+  pointer-events: none;
+
+  &.pane-hide {
+    // 向右隐藏
+    transform: translate(105%);
+  }
+
+   > .toggle-show-btn {
+    position: absolute;
+    left: -25px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    pointer-events: all;
 
-  &.is-station {
-    height: calc(100% - 20px);
   }
 
   // 操作栏
   &-operators {
     user-select: none;
+    pointer-events:all;
+
     img {
       cursor: pointer;
     }
@@ -868,7 +901,6 @@ export default {
   &-content {
     width: 285px;
     overflow: auto;
-    border: 1px solid #0a544e;
 
     .map-pane-content-header {
       padding-left: 20px;
@@ -891,6 +923,9 @@ export default {
     // 站点操作面板
     .station-operation {
       height: 100%;
+      pointer-events: all;
+      border: 1px solid #0a544e;
+
       &-stations {
         height: calc(100% - 443px);
         overflow: hidden;
@@ -994,6 +1029,9 @@ export default {
 
     // 站点筛选面板
     .station-filter {
+      pointer-events: all;
+      border: 1px solid #0a544e;
+
       &-item {
         width: 260px;
         height: 32px;

src/views/stationOperation/components/RealTimeDataChart.vue

@@ -62,17 +62,6 @@ const legendList = [
 
 // 图表配置
 const initialOption = {
-  legend: [
-    {
-      data: legendList.map(legend => legend.title),
-      itemGap: 30,
-      itemWidth: 12,
-      itemHeight: 12,
-      textStyle: {
-        color: '#ade6ee'
-      }
-    }
-  ],
   tooltip: {
     formatter: params => {
       return `${params.marker}${params.name}: ${(params.value[3] / 1000 / 60).toFixed()}min`

src/views/stationOperation/index.vue

@@ -579,6 +579,7 @@ export default {
   &-map {
     width: 100%;
     height: 100%;
+    overflow: hidden;
   }
 }