570 lines
16 KiB
Vue
570 lines
16 KiB
Vue
<template>
|
|
<div class="station-operation">
|
|
<!-- 左侧列表 -->
|
|
<div class="data-container">
|
|
<a-collapse v-model="activeKey" expandIconPosition="right" accordion>
|
|
<template slot="expandIcon">
|
|
<img src="@/assets/images/station-operation/toggle.png" alt="" />
|
|
</template>
|
|
<!-- All Data -->
|
|
<a-collapse-panel key="1">
|
|
<template slot="header">
|
|
<div class="title">
|
|
<div class="title-text">All Data</div>
|
|
<div class="title-rect">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
|
|
<!-- 头部操作栏 -->
|
|
<div class="title-operator">
|
|
<div @click.stop="handleShowSearch">
|
|
<img src="@/assets/images/station-operation/search.png" alt="" />
|
|
</div>
|
|
<div @click.stop="handleShowFilter">
|
|
<img src="@/assets/images/station-operation/filter.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<!-- 头部操作栏结束 -->
|
|
</div>
|
|
</template>
|
|
<ScrollContainer
|
|
ref="scrollContainerRef"
|
|
direction="verticle"
|
|
:scrollContainer="getScrollContainer"
|
|
class="data-list has-search"
|
|
:class="{
|
|
'show-search': searchPlacementVisible
|
|
}"
|
|
>
|
|
<div class="search-filter-placement">
|
|
<!-- 搜索 -->
|
|
<a-input-search
|
|
v-if="searchVisible"
|
|
placeholder="Input Search Text"
|
|
v-model="filter.searchText"
|
|
allow-clear
|
|
@search="onFilterChange"
|
|
>
|
|
<img slot="enterButton" src="@/assets/images/station-operation/search.png" alt="" />
|
|
</a-input-search>
|
|
<!-- 搜索结束 -->
|
|
|
|
<!-- 筛选 -->
|
|
<a-row v-if="filterVisible" :gutter="10" style="width: 100%">
|
|
<a-col :span="12">
|
|
<j-dict-select-tag
|
|
v-model="filter.status"
|
|
:getPopupContainer="getDictSelectTagContainer"
|
|
placeholder="Select Status"
|
|
dictCode="STATION_STATUS"
|
|
style="width: 100%"
|
|
@change="onFilterChange"
|
|
></j-dict-select-tag>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<custom-select
|
|
v-model="filter.type"
|
|
:options="stationTypeList"
|
|
allow-clear
|
|
show-search
|
|
@change="onFilterChange"
|
|
placeholder="Select Type"
|
|
></custom-select>
|
|
</a-col>
|
|
</a-row>
|
|
<!-- 筛选结束 -->
|
|
</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>
|
|
</div>
|
|
<div class="shadow"></div>
|
|
</ScrollContainer>
|
|
</a-collapse-panel>
|
|
<!-- All Data 结束 -->
|
|
<!-- Focus Data -->
|
|
<a-collapse-panel key="2">
|
|
<template slot="header">
|
|
<div class="title">
|
|
<div class="title-text" style="width: 180px">Focus Data</div>
|
|
<div class="title-rect">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<ScrollContainer ref="scrollContainer2Ref" direction="verticle" class="data-list">
|
|
<div class="data-list-content">
|
|
<a-spin v-if="isGettingFollowedDataList"></a-spin>
|
|
<template v-else>
|
|
<DataListItem
|
|
v-for="item of followedDataList"
|
|
:key="item.id"
|
|
:item="item"
|
|
@click.native="locateFacility(item)"
|
|
></DataListItem>
|
|
<custom-empty v-if="!followedDataList.length" style="margin-top: 40px"></custom-empty>
|
|
</template>
|
|
</div>
|
|
<div class="shadow"></div>
|
|
</ScrollContainer>
|
|
</a-collapse-panel>
|
|
<!-- Focus Data 结束 -->
|
|
</a-collapse>
|
|
</div>
|
|
<!-- 右侧地图 -->
|
|
<div class="station-operation-map">
|
|
<Map
|
|
ref="map"
|
|
token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
|
|
>
|
|
<MapMarker :list="markerList" @markerClick="onMarkerClick" />
|
|
<MapPane
|
|
ref="mapPane"
|
|
:treeData="treeData"
|
|
@changeMarker="onChangeMarker"
|
|
@filterMarker="onFilterMarker"
|
|
/>
|
|
</Map>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Map from './components/Map.vue'
|
|
import MapMarker from './components/MapMarker.vue'
|
|
import MapPane from './components/MapPane.vue'
|
|
import DataListItem from './components/DataListItem.vue'
|
|
import ScrollContainer from '@/components/ScrollContainer/index.vue'
|
|
import { getAction } from '../../api/manage'
|
|
import { cloneDeep } from 'lodash'
|
|
|
|
export default {
|
|
components: {
|
|
Map,
|
|
MapMarker,
|
|
MapPane,
|
|
ScrollContainer,
|
|
DataListItem
|
|
},
|
|
data() {
|
|
return {
|
|
activeKey: '1',
|
|
|
|
isGettingDataList: false,
|
|
isGettingFollowedDataList: false,
|
|
|
|
dataList: [], // 左侧All Data 列表
|
|
followedDataList: [], // 关注
|
|
markerList: [], // 地图上标记点列表
|
|
|
|
searchPlacementVisible: false, // 搜索栏占位是否显示
|
|
|
|
searchVisible: false, // 搜索组件是否显示
|
|
|
|
filter: {
|
|
searchText: undefined,
|
|
status: undefined,
|
|
type: undefined
|
|
},
|
|
|
|
filterVisible: false, // 筛选组件是否显示
|
|
|
|
stationTypeList: [],
|
|
|
|
treeData: [] // 台站树列表
|
|
}
|
|
},
|
|
created() {
|
|
this.getStationList()
|
|
this.getFollowedStationList()
|
|
this.getStationTypeList()
|
|
this.getStationTree()
|
|
},
|
|
methods: {
|
|
// 获取站点列表
|
|
async getStationList() {
|
|
try {
|
|
this.isGettingDataList = true
|
|
const res = await getAction('/jeecg-station-operation/stationOperation/findList')
|
|
this.originalDataList = res // 保留初始版本
|
|
this.dataList = cloneDeep(res)
|
|
this.markerList = cloneDeep(res)
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs.scrollContainerRef.checkScrollEnd()
|
|
})
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
this.isGettingDataList = false
|
|
}
|
|
},
|
|
|
|
// 获取已关注站点列表
|
|
async getFollowedStationList() {
|
|
try {
|
|
this.isGettingFollowedDataList = true
|
|
const res = await getAction('/jeecg-station-operation/sysUserFocusStation/findList')
|
|
this.followedDataList = res
|
|
|
|
const scrollContainer2Ref = this.$refs.scrollContainer2Ref
|
|
if (scrollContainer2Ref) {
|
|
this.$nextTick(() => {
|
|
scrollContainer2Ref.checkScrollEnd()
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
this.isGettingFollowedDataList = false
|
|
}
|
|
},
|
|
|
|
// 获取站点类型
|
|
async getStationTypeList() {
|
|
try {
|
|
const res = await getAction('/gardsStations/findType')
|
|
this.stationTypeList = res.filter(item => item).map(item => ({ label: item, value: item }))
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
},
|
|
|
|
// 获取 台站树列表
|
|
async getStationTree() {
|
|
try {
|
|
const { success, result, message } = await getAction('/stationOperation/findTree')
|
|
if (success) {
|
|
result.forEach(item => {
|
|
item.stationCode = item.code
|
|
item.stationId = `root_${item.stationId}`
|
|
item.children.forEach(child => {
|
|
child.stationCode = child.code
|
|
child.stationId = `${item.stationId}_parent_${child.stationId}`
|
|
})
|
|
})
|
|
this.treeData = result
|
|
} else {
|
|
this.$message.error(message)
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
},
|
|
|
|
// 显示搜索栏
|
|
handleShowSearch() {
|
|
if (this.filterVisible) {
|
|
this.searchVisible = true
|
|
this.filterVisible = false
|
|
this.searchPlacementVisible = true
|
|
} else {
|
|
this.searchPlacementVisible = !this.searchPlacementVisible
|
|
if (this.searchPlacementVisible) {
|
|
this.searchVisible = true
|
|
}
|
|
}
|
|
},
|
|
|
|
// 显示筛选栏
|
|
handleShowFilter() {
|
|
if (this.searchVisible) {
|
|
this.searchVisible = false
|
|
this.filterVisible = true
|
|
this.searchPlacementVisible = true
|
|
} else {
|
|
this.searchPlacementVisible = !this.searchPlacementVisible
|
|
if (this.searchPlacementVisible) {
|
|
this.filterVisible = true
|
|
}
|
|
}
|
|
},
|
|
|
|
// 左侧 All Data 筛选
|
|
onFilterChange() {
|
|
this.dataList = this.originalDataList.filter(dataItem => {
|
|
const filterSearchText =
|
|
!this.filter.searchText ||
|
|
-1 !== dataItem.stationName.toLowerCase().indexOf(this.filter.searchText.toLowerCase())
|
|
const filterStatus = !this.filter.status || this.filter.status == dataItem.status
|
|
const filterType = !this.filter.stationType || this.filter.type == dataItem.stationType
|
|
|
|
return filterSearchText && filterStatus && filterType
|
|
})
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs.scrollContainerRef.checkScrollEnd()
|
|
})
|
|
},
|
|
|
|
// 定位台站
|
|
locateFacility(stationItem) {
|
|
const find = this.markerList.find(
|
|
markerItem => markerItem.stationId == stationItem.stationId && markerItem.stationType == stationItem.stationType
|
|
)
|
|
if (!find) {
|
|
// 如果未显示，则不定位
|
|
return
|
|
}
|
|
const { lon, lat } = stationItem
|
|
this.$refs.map.panTo([lon, lat])
|
|
},
|
|
|
|
// 修改地图上的marker列表
|
|
onChangeMarker(markerList) {
|
|
this.markerList = markerList
|
|
},
|
|
|
|
/**
|
|
* 根据类型筛选地图上的marker列表
|
|
*/
|
|
onFilterMarker({ 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))
|
|
},
|
|
|
|
// 地图图标点击
|
|
onMarkerClick() {
|
|
this.$refs.mapPane.handleOpenAnalyzeModal()
|
|
},
|
|
|
|
getScrollContainer() {
|
|
return this.$refs.customScrollContainerRef.$el
|
|
},
|
|
|
|
getDictSelectTagContainer() {
|
|
return document.body
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.station-operation {
|
|
position: relative;
|
|
height: 100%;
|
|
.data-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 348px;
|
|
height: 100%;
|
|
background-color: rgba(2, 26, 29, 0.9);
|
|
padding-left: 5px;
|
|
z-index: 1;
|
|
|
|
::v-deep {
|
|
.ant-collapse {
|
|
height: 100%;
|
|
padding-bottom: 11px;
|
|
|
|
@titleHeight: 45px;
|
|
&-item {
|
|
max-height: calc(100% - @titleHeight);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&-header {
|
|
min-height: @titleHeight;
|
|
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
|
border-bottom: 4px solid rgba(12, 235, 201, 0.2);
|
|
height: auto;
|
|
background-color: rgba(1, 18, 20, 0.6);
|
|
|
|
.ant-collapse-arrow {
|
|
right: 9px;
|
|
transition: transform 0.24s;
|
|
transform-origin: 5px 11px;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
&-box {
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
&.ant-motion-collapse-legacy {
|
|
.data-list {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 左侧大标题
|
|
.title {
|
|
line-height: 40px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: MicrogrammaD-MediExte;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #0cebc9;
|
|
|
|
&-text {
|
|
padding-left: 20px;
|
|
width: 134px;
|
|
background-color: rgba(12, 235, 201, 0.05);
|
|
user-select: none;
|
|
}
|
|
|
|
&-rect {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
background-color: rgba(12, 235, 201, 0.2);
|
|
vertical-align: middle;
|
|
&:first-child {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 6px;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 4px;
|
|
height: 4px;
|
|
margin-right: 9px;
|
|
}
|
|
&:nth-child(4) {
|
|
width: 1px;
|
|
height: 16px;
|
|
margin-right: 23px;
|
|
}
|
|
&:nth-child(5) {
|
|
width: 2px;
|
|
height: 2px;
|
|
margin-right: 24px;
|
|
}
|
|
&:nth-child(6) {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-operator {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
user-select: none;
|
|
|
|
div {
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
border: 1px solid #166464;
|
|
background-color: #053842;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 左侧列表内容
|
|
.data-list {
|
|
width: 100%;
|
|
margin-right: 2px;
|
|
padding: 2px 0 10px 7px;
|
|
overflow: auto;
|
|
|
|
@searchHeight: 45px;
|
|
.search-filter-placement {
|
|
height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: height 0.3s ease-in-out;
|
|
overflow: hidden;
|
|
|
|
.ant-input-search {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
.ant-spin {
|
|
width: 100%;
|
|
height: 100px;
|
|
text-align: center;
|
|
margin-top: 90px;
|
|
}
|
|
}
|
|
|
|
&.has-search {
|
|
.data-list-content {
|
|
transition: height 0.3s ease-in-out;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
&.show-search {
|
|
.search-filter-placement {
|
|
height: @searchHeight;
|
|
}
|
|
|
|
.data-list-content {
|
|
height: calc(100% - @searchHeight);
|
|
}
|
|
}
|
|
|
|
.shadow {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: calc(100% - 15px);
|
|
height: 50px;
|
|
background: linear-gradient(to top, #021c21 0, transparent 100%);
|
|
transition: opacity 0.24s linear;
|
|
}
|
|
&.scroll-end {
|
|
.shadow {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 地图
|
|
&-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.scroller {
|
|
height: 100%;
|
|
}
|
|
</style>
|