@@ -168,6 +202,7 @@ import MapMarker from './components/MapMarker.vue'
import MapPane from './components/MapPane.vue'
import ScrollContainer from '@/components/ScrollContainer/index.vue'
import { getAction } from '../../api/manage'
+import { cloneDeep } from 'lodash'
export default {
components: {
@@ -179,13 +214,28 @@ export default {
data() {
return {
activeKey: '1',
+
isGettingDateList: false,
dateList: [],
- searchVisible: false
+
+ searchPlacementVisible: false, // 搜索栏占位是否显示
+
+ searchVisible: false, // 搜索组件是否显示
+
+ filter: {
+ searchText: undefined,
+ status: undefined,
+ type: undefined
+ },
+
+ filterVisible: false, // 筛选组件是否显示
+
+ stationTypeList: []
}
},
created() {
this.getStationList()
+ this.getStationTypeList()
},
methods: {
// 获取站点列表
@@ -197,6 +247,7 @@ export default {
result: { records }
} = await getAction('/gardsStations/findPage?pageIndex=1&pageSize=999')
if (success) {
+ this.originalDateList = cloneDeep(records)
this.dateList = records
}
} catch (error) {
@@ -206,13 +257,67 @@ export default {
}
},
- // 左侧 All Date 查询
- onSearch() {
- this.searchVisible = 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)
+ }
+ },
+
+ 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 Date 筛选
- onFilter() {}
+ onFilterChange() {
+ this.dateList = this.originalDateList.filter(dateItem => {
+ const filterSearchText =
+ !this.filter.searchText ||
+ -1 !== dateItem.stationCode.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
+
+ return filterSearchText && filterStatus && filterType
+ })
+
+ this.$nextTick(() => {
+ this.$refs.scrollContainerRef.checkScrollEnd()
+ })
+ },
+
+ getScrollContainer() {
+ return this.$refs.customScrollContainerRef
+ },
+
+ getDictSelectTagContainer() {
+ return document.body
+ }
}
}
@@ -248,6 +353,8 @@ export default {
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;
@@ -281,7 +388,6 @@ export default {
font-size: 18px;
font-weight: bold;
color: #0cebc9;
- background-color: rgba(1, 18, 20, 0.6);
&-text {
padding-left: 20px;
@@ -356,6 +462,15 @@ export default {
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;
+ }
+
&-content {
.ant-spin {
width: 100%;
@@ -365,6 +480,24 @@ export default {
}
}
+ &.has-search {
+ .date-list-content {
+ transition: height 0.3s ease-in-out;
+ height: 100%;
+ overflow: auto;
+ }
+ }
+
+ &.show-search {
+ .search-filter-placement {
+ height: @searchHeight;
+ }
+
+ .date-list-content {
+ height: calc(100% - @searchHeight);
+ }
+ }
+
&-item {
width: 322px;
&-title {
+ 
+ 
+ 
- 
-