feat: 对接保存和获取数据接收状态配置功能，地图左侧Panel增加展开收起功能

src/components/CustomTree/index.vue

@@ -116,9 +116,12 @@ export default {
     }
   },
   watch: {
-    value() {
+    value: {
+      handler() {
         this.checkedKeys = this.value
       },
+      immediate: true
+    },
     checkedKeys() {
       this.$emit('input', this.checkedKeys)
     }

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, 27])
+      this.popupOverlay.setOffset([stationInfo.stationType == MarkerType.NuclearFacility ? 10 : 0, 32])
       this.columns = PopupColumns[stationInfo.stationType]
       this.popupTitle = stationInfo.stationType
       this.isGettingInfo = true

src/views/stationOperation/components/MapPane.vue

@@ -176,32 +176,48 @@
               <div class="content">
                 <a-form-model class="attribute-form" layout="vertical">
                   <a-form-model-item label="Cache time">
-                    <a-input-number type="number"></a-input-number>
+                    <a-input-number type="number" v-model="dataRecieveStatusModel.cacheTime" :min="0"></a-input-number>
                     <span>day</span>
                   </a-form-model-item>
                   <a-form-model-item label="Scale interval">
-                    <a-input-number type="number"></a-input-number>
+                    <a-input-number
+                      type="number"
+                      v-model="dataRecieveStatusModel.scaleInterval"
+                      :min="0"
+                    ></a-input-number>
                     <span>min</span>
                   </a-form-model-item>
                   <a-form-model-item label="Timeline length">
-                    <a-input-number type="number"></a-input-number>
+                    <a-input-number
+                      type="number"
+                      v-model="dataRecieveStatusModel.timelineLength"
+                      :min="0"
+                    ></a-input-number>
                     <span>min</span>
                   </a-form-model-item>
                   <a-form-model-item label="Update interval time">
-                    <a-input-number type="number"></a-input-number>
+                    <a-input-number
+                      type="number"
+                      v-model="dataRecieveStatusModel.updateIntervalTime"
+                      :min="0"
+                    ></a-input-number>
                     <span>min</span>
                   </a-form-model-item>
                   <div class="attribute-form-footer">
-                    <a-button type="primary">SAVE</a-button>
+                    <a-button type="primary" @click="onSaveDataRecieveSettings" :loading="isSavingDataRecieveSettings">
+                      SAVE
+                    </a-button>
                   </div>
                 </a-form-model>
               </div>
             </div>
           </div>
 
+          <!-- 展开左侧配置栏按钮开始 -->
           <div class="data-receive-status-list-toggle-show-btn" v-if="!leftPaneShow">
             <img src="@/assets/images/station-operation/toggle-2.png" @click="leftPaneShow = true" />
           </div>
+          <!-- 展开左侧配置栏按钮结束 -->
         </div>
         <!-- 左侧配置栏结束 -->
 
@@ -232,7 +248,7 @@
 import CustomModal from '@/components/CustomModal/index.vue'
 import CustomTree from '@/components/CustomTree/index.vue'
 import RealTimeDataChart from './RealTimeDataChart.vue'
-import { postAction } from '../../../api/manage'
+import { getAction, postAction } from '../../../api/manage'
 import { MarkerType, FilterIcon } from './markerEnum'
 
 import { Vector as VectorLayer } from 'ol/layer'
@@ -361,14 +377,25 @@ const legendList = [
   }
 ]
 
-const statusList = [
+// Attribute Configuration 检验规则(自定义，非a-form校验)
-  {
+const rules = {
-    title: 'JPX38 23803'
+  cacheTime: {
+    required: true,
+    message: 'Please Input Cache Time'
   },
-  {
+  scaleInterval: {
-    title: 'JPX38 23804'
+    required: true,
+    message: 'Please Input Scale Interval'
+  },
+  timelineLength: {
+    required: true,
+    message: 'Please Input Timeline Length'
+  },
+  updateIntervalTime: {
+    required: true,
+    message: 'Please Input Update Interval'
   }
-]
+}
 
 export default {
   props: {
@@ -402,12 +429,21 @@ export default {
       isGettingInfomationList: false,
 
       dataStatusModalVisible: false, // 分析弹窗是否可见
-      dataStatusCheckedKeys: [], // 分析弹窗-左侧树选中的
+      initialDataRecieveSettings: {}, // 初始未改变的数据接收状态设置
+      dataStatusCheckedKeys: [], // 分析弹窗-左侧树选中的keys
+      dataRecieveStatusModel: {
+        cacheTime: 15,
+        scaleInterval: 120,
+        timelineLength: 1440,
+        updateIntervalTime: 5
+      }, // 数据接收状态配置
+      isSavingDataRecieveSettings: false,
 
       leftPaneShow: true, // 左侧抽屉
 
       legendList, // 图例列表
-      statusList,
+      statusList: [], // 数据接收状态列表
+      isGettingStatusList: false,
       showChart: true,
 
       markerList: [] // 要在地图上展示的marker列表
@@ -417,6 +453,8 @@ export default {
     this.initParentMapProps()
     document.addEventListener('fullscreenchange', this.onFullScreenChange)
     this.stationList = []
+
+    this.getDataRecieveSettings()
   },
   destroyed() {
     document.removeEventListener('fullscreenchange', this.onFullScreenChange)
@@ -660,6 +698,123 @@ export default {
       this.$nextTick(() => {
         this.showChart = true
       })
+    },
+
+    // 保存数据接收状态的配置
+    async onSaveDataRecieveSettings() {
+      if (!this.dataStatusCheckedKeys.length) {
+        this.$message.warn('Please Select Particulate Station')
+        return
+      }
+      try {
+        await this.validateForm(this.dataRecieveStatusModel, rules)
+        try {
+          const stationIds = this.dataStatusCheckedKeys.filter(key => -1 == key.toString().indexOf('root_'))
+          this.isSavingDataRecieveSettings = true
+          const { success, message } = await postAction(
+            '/jeecg-station-operation/sysUserFocusStation/saveUserFocusByUserId',
+            {
+              stationIds,
+              ...this.dataRecieveStatusModel
+            }
+          )
+          if (success) {
+            this.$message.success('Save Success')
+            await this.getDataRecieveSettings()
+            this.startGetDataReceiveStatusList()
+          } else {
+            this.$message.error(message)
+          }
+        } catch (error) {
+          console.error(error)
+        } finally {
+          this.isSavingDataRecieveSettings = false
+        }
+      } catch (error) {
+        this.$message.warn(error)
+      }
+    },
+
+    // 验证表单
+    validateForm(model, rules) {
+      return new Promise((resolve, reject) => {
+        const rulesKey = Object.keys(rules)
+        for (const key of rulesKey) {
+          const rule = rules[key],
+            value = model[key]
+          if (rule.required && !value) {
+            reject(rule.message)
+            return
+          }
+        }
+        resolve()
+      })
+    },
+
+    // 获取数据接收状态配置
+    async getDataRecieveSettings() {
+      try {
+        const { success, result, message } = await getAction(
+          '/jeecg-station-operation/sysUserFocusStation/findUserFocusByUserId',
+          {
+            userId: this.$store.getters.userInfo.id
+          }
+        )
+        if (success) {
+          this.initialDataRecieveSettings = result
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+        this.$message.error(error)
+      }
+    },
+
+    // 开始获取数据状态列表的定时器
+    startGetDataReceiveStatusList() {
+      if (this.timer) {
+        clearInterval(this.timer)
+      }
+      this.getDataRecieveStatusList()
+      this.timer = setInterval(() => {
+        this.getDataRecieveStatusList()
+      }, this.dataRecieveStatusModel.updateIntervalTime * 60 * 1000)
+    },
+
+    // 获取数据接收状态列表
+    async getDataRecieveStatusList() {
+      try {
+        console.log('%c [  ]-777', 'font-size:13px; background:pink; color:#bf2c9f;', this.initialDataRecieveSettings)
+        this.isGettingStatusList = true
+        const res = await getAction('/jeecg-station-operation/stationOperation/getDataReceivingStatus', {
+          userId: this.$store.getters.userInfo.id
+        })
+        console.log('%c [ res ]-640', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isGettingStatusList = false
+      }
+    }
+  },
+  watch: {
+    dataStatusModalVisible(val) {
+      if (val) {
+        this.dataStatusCheckedKeys = this.initialDataRecieveSettings.sysUserFocusStations.map(item =>
+          parseInt(item.stationId)
+        )
+        this.dataRecieveStatusModel = {
+          cacheTime: this.initialDataRecieveSettings.cacheTime,
+          scaleInterval: this.initialDataRecieveSettings.scaleInterval,
+          timelineLength: this.initialDataRecieveSettings.timelineLength,
+          updateIntervalTime: this.initialDataRecieveSettings.updateIntervalTime
+        }
+
+        this.startGetDataReceiveStatusList()
+      } else {
+        clearInterval(this.timer)
+      }
     }
   }
 }

src/views/stationOperation/components/markerPopupColumns.js

@@ -153,5 +153,42 @@ export default {
     }, {
         label: 'TYPE',
         key: 'type'
+    }],
+    [MarkerType.NRL]: [{
+        label: 'COUNTRYCODE',
+        key: 'countryCode'
+    }, {
+        label: 'DATEBEGIN',
+        key: 'dateBegin'
+    }, {
+        label: 'DATEEND',
+        key: 'dateEnd'
+    }, {
+        label: 'DESCRIPTION',
+        key: 'description'
+    }, {
+        label: 'ELEVATION',
+        key: 'elevation'
+    }, {
+        label: 'LATITUDE',
+        key: 'lat'
+    }, {
+        label: 'LONGITUDE',
+        key: 'lon'
+    }, {
+        label: 'MODDATE',
+        key: 'moddate'
+    }, {
+        label: 'STATIONCODE',
+        key: 'stationCode'
+    }, {
+        label: 'STATIONID',
+        key: 'stationId'
+    }, {
+        label: 'STATUS',
+        key: 'status'
+    }, {
+        label: 'TYPE',
+        key: 'type'
     }]
 } 

src/views/stationOperation/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="station-operation">
     <!-- 左侧列表 -->
-    <div class="data-container">
+    <div :class="'data-container' + (!leftPaneShow ? ' hide' : '')">
       <a-collapse v-model="activeKey" expandIconPosition="right" accordion>
         <template slot="expandIcon">
-          <img src="@/assets/images/station-operation/toggle.png" alt="" />
+          <img src="@/assets/images/station-operation/toggle.png" alt="" @click.stop="leftPaneShow = false" />
         </template>
         <!-- All Data -->
         <a-collapse-panel key="1">
@@ -81,7 +81,7 @@
             </div>
             <div class="data-list-content">
               <a-spin v-if="isGettingDataList"></a-spin>
-              <template>
+              <custom-empty v-if="!isGettingDataList && !dataList.length" style="margin-top: 40px"></custom-empty>
               <RecycleScroller
                 ref="customScrollContainerRef"
                 class="scroller"
@@ -92,8 +92,6 @@
               >
                 <DataListItem :item="item" @click.native="locateFacility(item)"></DataListItem>
               </RecycleScroller>
-                <custom-empty v-if="!dataList.length" style="margin-top: 40px"></custom-empty>
-              </template>
             </div>
             <div class="shadow"></div>
           </ScrollContainer>
@@ -132,6 +130,13 @@
         </a-collapse-panel>
         <!-- Focus Data 结束 -->
       </a-collapse>
+
+      <!-- 展开左侧配置栏按钮开始 -->
+      <div class="toggle-show-btn" v-if="!leftPaneShow">
+        <img src="@/assets/images/station-operation/toggle-2.png" @click="leftPaneShow = true" />
+      </div>
+      <!-- 展开左侧配置栏按钮结束 -->
+
     </div>
     <!-- 右侧地图 -->
     <div class="station-operation-map">
@@ -140,12 +145,7 @@
         token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
       >
         <MapMarker :list="markerList" @markerClick="onMarkerClick" />
-        <MapPane
+        <MapPane ref="mapPane" :treeData="treeData" @changeMarker="onChangeMarker" @filterMarker="onFilterMarker" />
-          ref="mapPane"
-          :treeData="treeData"
-          @changeMarker="onChangeMarker"
-          @filterMarker="onFilterMarker"
-        />
       </Map>
     </div>
   </div>
@@ -189,6 +189,7 @@ export default {
       },
 
       filterVisible: false, // 筛选组件是否显示
+      leftPaneShow: true, // 左侧面板是否展示
 
       stationTypeList: [],
 
@@ -340,7 +341,12 @@ export default {
      * 根据类型筛选地图上的marker列表
      */
     onFilterMarker({ filterType, filterDataQuality }) {
-      console.log('%c [ filterType, filterDataQuality ]-343', 'font-size:13px; background:pink; color:#bf2c9f;', filterType, filterDataQuality)
+      console.log(
+        '%c [ filterType, filterDataQuality ]-343',
+        'font-size:13px; background:pink; color:#bf2c9f;',
+        filterType,
+        filterDataQuality
+      )
       this.markerList = this.originalDataList.filter(item => filterType.includes(item.stationType))
     },
 
@@ -373,6 +379,19 @@ export default {
     background-color: rgba(2, 26, 29, 0.9);
     padding-left: 5px;
     z-index: 1;
+    transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    &.hide {
+      transform: translateX(-100%);
+    }
+
+    .toggle-show-btn {
+      position: absolute;
+      right: -20px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
 
     ::v-deep {
       .ant-collapse {