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

2023-06-20 15:17:32 +08:00 · 2023-06-20 15:17:32 +08:00 · 10bae9ed27
commit 10bae9ed27
parent eaf82dbbb8
5 changed files with 253 additions and 39 deletions
--- a/src/components/CustomTree/index.vue
+++ b/src/components/CustomTree/index.vue
@ -116,8 +116,11 @@ export default {
    }
  },
  watch: {
-    value() {
-      this.checkedKeys = this.value
+    value: {
+      handler() {
+        this.checkedKeys = this.value
+      },
+      immediate: true
    },
    checkedKeys() {
      this.$emit('input', this.checkedKeys)
--- a/src/views/stationOperation/components/MapMarker.vue
+++ b/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
--- a/src/views/stationOperation/components/MapPane.vue
+++ b/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 = [
-  {
-    title: 'JPX38 23803'
+// Attribute Configuration 检验规则(自定义，非a-form校验)
+const rules = {
+  cacheTime: {
+    required: true,
+    message: 'Please Input Cache Time'
  },
-  {
-    title: 'JPX38 23804'
+  scaleInterval: {
+    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)
+      }
    }
  }
 }
--- a/src/views/stationOperation/components/markerPopupColumns.js
+++ b/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'
    }]
 } 
--- a/src/views/stationOperation/index.vue
+++ b/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,19 +81,17 @@
            </div>
            <div class="data-list-content">
              <a-spin v-if="isGettingDataList"></a-spin>
-              <template>
-                <RecycleScroller
-                  ref="customScrollContainerRef"
-                  class="scroller"
-                  :items="dataList"
-                  :item-size="129"
-                  key-field="stationId"
-                  v-slot="{ item }"
-                >
-                  <DataListItem :item="item" @click.native="locateFacility(item)"></DataListItem>
-                </RecycleScroller>
-                <custom-empty v-if="!dataList.length" style="margin-top: 40px"></custom-empty>
-              </template>
+              <custom-empty v-if="!isGettingDataList && !dataList.length" style="margin-top: 40px"></custom-empty>
+              <RecycleScroller
+                ref="customScrollContainerRef"
+                class="scroller"
+                :items="dataList"
+                :item-size="129"
+                key-field="stationId"
+                v-slot="{ item }"
+              >
+                <DataListItem :item="item" @click.native="locateFacility(item)"></DataListItem>
+              </RecycleScroller>
            </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
-          ref="mapPane"
-          :treeData="treeData"
-          @changeMarker="onChangeMarker"
-          @filterMarker="onFilterMarker"
-        />
+        <MapPane 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 {