diff --git a/package.json b/package.json index 948ac2a..266e74b 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "vue-print-nb-jeecg": "^1.0.12", "vue-router": "^3.0.1", "vue-splitpane": "^1.0.4", + "vue-virtual-scroller": "^1.1.2", "vuedraggable": "^2.20.0", "vuex": "^3.1.0", "vxe-table": "2.9.13", diff --git a/src/components/CustomTree/index.vue b/src/components/CustomTree/index.vue index ae20421..7b5d829 100644 --- a/src/components/CustomTree/index.vue +++ b/src/components/CustomTree/index.vue @@ -1,5 +1,13 @@ diff --git a/src/components/ScrollContainer/index.vue b/src/components/ScrollContainer/index.vue index 22b6fdd..329bac9 100644 --- a/src/components/ScrollContainer/index.vue +++ b/src/components/ScrollContainer/index.vue @@ -17,7 +17,7 @@ export default { data() { this.isCustomContainer = this.scrollContainer && typeof this.scrollContainer == 'function' // 是自定义的容器 return { - scrollEnd: false + scrollEnd: true } }, mounted() { @@ -25,10 +25,13 @@ export default { this.containerEle.addEventListener('scroll', () => { this.checkScrollEnd() }) - - this.containerEle.addEventListener('transitionend', () => { // 如果有过渡动画，则在过渡动画结束后触发 + + this.containerEle.addEventListener('transitionend', () => { + // 如果有过渡动画，则在过渡动画结束后触发 this.checkScrollEnd() }) + + this.checkScrollEnd() }, methods: { @@ -36,12 +39,15 @@ export default { * 检查是否滚动到尾部 */ checkScrollEnd() { - if (this.direction == 'horizontal') { - this.scrollEnd = this.containerEle.scrollLeft + this.containerEle.offsetWidth == this.containerEle.scrollWidth - } else { - this.scrollEnd = this.containerEle.scrollTop + this.containerEle.offsetHeight == this.containerEle.scrollHeight + if (this.containerEle) { + if (this.direction == 'horizontal') { + this.scrollEnd = this.containerEle.scrollLeft + this.containerEle.offsetWidth == this.containerEle.scrollWidth + } else { + this.scrollEnd = + this.containerEle.scrollTop + this.containerEle.offsetHeight == this.containerEle.scrollHeight + } + this.$emit('scrollEnd', this.scrollEnd) } - this.$emit('scrollEnd', this.scrollEnd) } } } diff --git a/src/main.js b/src/main.js index 3496cba..2f58e7c 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,11 @@ import CustomDatePicker from '@/components/CustomDatePicker' import CustomMonthPicker from '@/components/CustomMonthPicker' import CustomEmpty from '@/components/CustomEmpty' + +import { RecycleScroller } from 'vue-virtual-scroller' +import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' +Vue.component('RecycleScroller', RecycleScroller) + Vue.prototype.rules = rules Vue.config.productionTip = false Vue.use(Storage, config.storageOptions) diff --git a/src/views/stationOperation/components/Map.vue b/src/views/stationOperation/components/Map.vue index e114a22..ab36202 100644 --- a/src/views/stationOperation/components/Map.vue +++ b/src/views/stationOperation/components/Map.vue @@ -61,7 +61,7 @@ export default { ] const view = new View({ - projection: 'EPSG:4326', // 使用这个坐标系 + projection: 'EPSG:900913', // 使用这个坐标系 center: [longitude, latitude], zoom: this.zoom, maxZoom: this.maxZoom, diff --git a/src/views/stationOperation/components/MapMarker.vue b/src/views/stationOperation/components/MapMarker.vue index 422b4b1..7c14bf0 100644 --- a/src/views/stationOperation/components/MapMarker.vue +++ b/src/views/stationOperation/components/MapMarker.vue @@ -1,16 +1,10 @@ - + diff --git a/src/views/stationOperation/components/MapPane.vue b/src/views/stationOperation/components/MapPane.vue index 5390315..97c8e39 100644 --- a/src/views/stationOperation/components/MapPane.vue +++ b/src/views/stationOperation/components/MapPane.vue @@ -54,7 +54,11 @@
- +
@@ -67,8 +71,8 @@

Radius

- - + + Search
@@ -79,6 +83,7 @@ :data-source="dataSource" rowKey="id" :pagination="false" + :loading="isGettingInfomationList" >
@@ -105,14 +110,14 @@ - -
-
+ +
+
{{ stateItem.title }}
- +
@@ -141,7 +146,11 @@
- +
@@ -211,6 +220,7 @@ import CustomModal from '@/components/CustomModal/index.vue' import FilterImage from './filterImage' import CustomTree from '@/components/CustomTree/index.vue' import RealTimeDataChart from './RealTimeDataChart.vue' +import { postAction } from '../../../api/manage' // Filter中的筛选列表 const filterList = [ @@ -246,8 +256,8 @@ const filterList = [ } ] -// Filter中的状态列表 -const stateList = [ +// Filter中的数据质量列表 +const dataQualityList = [ { title: 'Excellent data quality', icon: FilterImage.State1 @@ -284,75 +294,6 @@ const columns = [ } ] -const dataSource = [ - { - id: 1, - nuclearfaclity: 'Cooper', - station: 'USX74', - distance: 504.366 - }, - { - id: 11, - nuclearfaclity: 'Davis Besse-1', - station: 'USX74', - distance: 504.366 - }, - { - id: 2, - nuclearfaclity: 'Cooper', - station: 'USX74', - distance: 504.366 - }, - { - id: 3, - nuclearfaclity: 'Davis Besse-1', - station: 'USX74', - distance: 504.366 - }, - { - id: 4, - nuclearfaclity: 'Cooper', - station: 'USX74', - distance: 504.366 - }, - { - id: 5, - nuclearfaclity: 'Davis Besse-1', - station: 'USX74', - distance: 504.366 - }, - { - id: 6, - nuclearfaclity: 'Cooper', - station: 'USX74', - distance: 504.366 - }, - { - id: 7, - nuclearfaclity: 'Davis Besse-1', - station: 'USX74', - distance: 504.366 - }, - { - id: 8, - nuclearfaclity: 'Cooper', - station: 'USX74', - distance: 504.366 - }, - { - id: 9, - nuclearfaclity: 'Davis Besse-1', - station: 'USX74', - distance: 504.366 - }, - { - id: 10, - nuclearfaclity: 'Cooper', - station: 'USX74', - distance: 504.366 - } -] - const legendList = [ { title: 'SPHDPREL', @@ -380,12 +321,14 @@ const legendList = [ } ] -const statusList = [{ - title: 'JPX38 23803', - -}, { - title: 'JPX38 23804' -}] +const statusList = [ + { + title: 'JPX38 23803' + }, + { + title: 'JPX38 23804' + } +] export default { props: { @@ -394,7 +337,7 @@ export default { default: 500 }, - stationList: { + treeData: { type: Array } }, @@ -412,11 +355,13 @@ export default { checkedKeys: [], // 选中的树节点 filterList, // 筛选类型列表 - stateList, // 状态类型列表 + dataQualityList, // 数据质量列表 - dataSource: dataSource, // Infomation Radius 表格数据源 + radius: 0, // 距离 + dataSource: [], // Infomation Radius 表格数据源 + isGettingInfomationList: false, - dataStatusModalVisible: true, // 分析弹窗是否可见 + dataStatusModalVisible: false, // 分析弹窗是否可见 dataStatusCheckedKeys: [], // 分析弹窗-左侧树选中的 leftPaneShow: true, // 左侧抽屉 @@ -428,6 +373,10 @@ export default { }, created() { this.initParentMapProps() + document.addEventListener('fullscreenchange', this.onFullScreenChange) + }, + destroyed() { + document.removeEventListener('fullscreenchange', this.onFullScreenChange) }, methods: { initParentMapProps() { @@ -439,11 +388,16 @@ export default { }, handleFullScreen() { - this.isFullScreen = true + const ele = document.querySelector('.station-operation') + ele.requestFullscreen() }, handleExitFullScreen() { - this.isFullScreen = false + document.exitFullscreen() + }, + + onFullScreenChange() { + this.isFullScreen = !!document.fullscreenElement }, // 选中全部 @@ -460,6 +414,26 @@ export default { this.checkedKeys = [] }, + // 根据半径查询台站列表 + async handleSearchByRadius() { + if (this.radius == null || this.radius == undefined) { + this.$message.warn('Please Input Radius To Search') + return + } + try { + this.isGettingInfomationList = true + const res = await postAction('/jeecg-station-operation/stationOperation/getHitEquList', { + radius: this.radius, + stationIds: [] + }) + console.log('%c [ ]-486', 'font-size:13px; background:pink; color:#bf2c9f;', res) + } catch (error) { + console.error(error) + } finally { + this.isGettingInfomationList = false + } + }, + // 打开分析弹窗 handleOpenAnalyzeModal() { this.dataStatusModalVisible = true @@ -481,26 +455,13 @@ export default { } }, + // 弹窗最大化 onModalFullScreen() { this.showChart = false this.$nextTick(() => { this.showChart = true }) } - }, - computed: { - treeData() { - const set = new Set(this.stationList.map(item => item.countryCode)) - return Array.from(set).map((countryCode, index) => { - return { - title: countryCode, - key: index.toString(), - children: this.stationList - .filter(item => item.countryCode == countryCode) - .map(item => ({ title: item.stationCode, key: item.stationId.toString(), children: [] })) - } - }) - } } } @@ -723,7 +684,7 @@ export default { } } - .station-state-list { + .station-data-quality-list { &-item { margin-left: 9px; height: 32px; diff --git a/src/views/stationOperation/index.vue b/src/views/stationOperation/index.vue index f2a0f43..e739849 100644 --- a/src/views/stationOperation/index.vue +++ b/src/views/stationOperation/index.vue @@ -79,29 +79,36 @@
-
+
- - +
- +
@@ -191,7 +198,7 @@
- +
@@ -216,7 +223,10 @@ export default { activeKey: '1', isGettingDateList: false, + isGettingFollowedDateList: false, + dateList: [], + followedDateList: [], // 关注 searchPlacementVisible: false, // 搜索栏占位是否显示 @@ -230,26 +240,29 @@ export default { filterVisible: false, // 筛选组件是否显示 - stationTypeList: [] + stationTypeList: [], + + treeData: [] // 台站树列表 } }, created() { this.getStationList() + this.getFollowedStationList() this.getStationTypeList() + this.getStationTree() }, methods: { // 获取站点列表 async getStationList() { try { this.isGettingDateList = true - const { - success, - result: { records } - } = await getAction('/gardsStations/findPage?pageIndex=1&pageSize=999') - if (success) { - this.originalDateList = cloneDeep(records) - this.dateList = records - } + const res = await getAction('/jeecg-station-operation/stationOperation/findList') + this.dateList = res + this.originalDateList = cloneDeep(res) + + this.$nextTick(() => { + this.$refs.scrollContainerRef.checkScrollEnd() + }) } catch (error) { console.error(error) } finally { @@ -257,6 +270,26 @@ export default { } }, + // 获取已关注站点列表 + async getFollowedStationList() { + try { + this.isGettingFollowedDateList = true + const res = await getAction('/jeecg-station-operation/sysUserFocusStation/findList') + this.followedDateList = res + + const scrollContainer2Ref = this.$refs.scrollContainer2Ref + if (scrollContainer2Ref) { + this.$nextTick(() => { + scrollContainer2Ref.checkScrollEnd() + }) + } + } catch (error) { + console.error(error) + } finally { + this.isGettingFollowedDateList = false + } + }, + // 获取站点类型 async getStationTypeList() { try { @@ -267,6 +300,22 @@ export default { } }, + // 获取 台站树列表 + async getStationTree() { + try { + const { success, result, message } = await getAction('/stationOperation/findTree') + if(success) { + result.forEach(item => item.stationCode = item.code) + this.treeData = result + } + else { + this.$message.error(message) + } + } catch (error) { + console.error(error); + } + }, + handleShowSearch() { if (this.filterVisible) { this.searchVisible = true @@ -299,9 +348,9 @@ export default { this.dateList = this.originalDateList.filter(dateItem => { const filterSearchText = !this.filter.searchText || - -1 !== dateItem.stationCode.toLowerCase().indexOf(this.filter.searchText.toLowerCase()) + -1 !== dateItem.stationName.toLowerCase().indexOf(this.filter.searchText.toLowerCase()) const filterStatus = !this.filter.status || this.filter.status == dateItem.status - const filterType = !this.filter.type || this.filter.type == dateItem.type + const filterType = !this.filter.stationType || this.filter.type == dateItem.stationType return filterSearchText && filterStatus && filterType }) @@ -312,7 +361,7 @@ export default { }, getScrollContainer() { - return this.$refs.customScrollContainerRef + return this.$refs.customScrollContainerRef.$el }, getDictSelectTagContainer() { @@ -585,4 +634,8 @@ export default { height: 100%; } } + +.scroller { + height: 100%; +}