AnalysisSystemForRadionuclide_vue/src/views/stationOperation/index.vue

<template>
  <div class="station-operation">
    <!-- 左侧列表 -->
    <div class="date-container">
      <a-collapse v-model="activeKey" expandIconPosition="right" accordion>
        <template slot="expandIcon">
          <img src="@/assets/images/station-operation/toggle.png" alt="" />
        </template>
        <!-- All Date -->
        <a-collapse-panel key="1">
          <template slot="header">
            <div class="title">
              <div class="title-text">All Date</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="date-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 ref="customScrollContainerRef" class="date-list-content">
              <a-spin v-if="isGettingDateList"></a-spin>
              <template v-else>
                <div class="date-list-item" v-for="item of dateList" :key="item.id">
                  <h4 class="date-list-item-title">
                    {{ item.stationCode }}
                  </h4>
                  <div class="date-list-item-container">
                    <div class="date-list-item-content">
                      <div class="date-list-item-children">
                        <div class="date-list-item-child">
                          <label>Station Type:</label>
                          <span>{{ item.type }}</span>
                        </div>
                        <div class="date-list-item-child" style="word-break: break-all">
                          <label>Altitude:</label>
                          <span>{{ item.elevation }}m</span>
                        </div>
                      </div>
                      <div class="date-list-item-children">
                        <div class="date-list-item-child">
                          <label>Lon And Lat:</label>
                          <span>{{ item.lon.toFixed(6) }} &nbsp;&nbsp; {{ item.lat.toFixed(6) }}</span>
                        </div>
                      </div>
                      <div class="date-list-item-children">
                        <div class="date-list-item-child">
                          <label>Status:</label>
                          <span class="green">{{ item.status }}</span>
                        </div>
                        <div class="date-list-item-child">
                          <label>Signal:</label>
                          <span class="green">Normally</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <custom-empty v-if="!dateList.length" style="margin-top: 40px"></custom-empty>
              </template>
            </div>
            <div class="shadow"></div>
          </ScrollContainer>
        </a-collapse-panel>
        <!-- All Date 结束 -->
        <!-- Focus Date -->
        <a-collapse-panel key="2">
          <template slot="header">
            <div class="title">
              <div class="title-text" style="width: 180px">Focus Date</div>
              <div class="title-rect">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </template>
          <ScrollContainer direction="verticle" class="date-list">
            <div class="date-list-content">
              <a-spin v-if="isGettingDateList"></a-spin>
              <template v-else>
                <div class="date-list-item" v-for="item of dateList" :key="item.id">
                  <h4 class="date-list-item-title">
                    {{ item.stationCode }}
                  </h4>
                  <div class="date-list-item-container">
                    <div class="date-list-item-content">
                      <div class="date-list-item-children">
                        <div class="date-list-item-child">
                          <label>Station Type:</label>
                          <span>{{ item.type }}</span>
                        </div>
                        <div class="date-list-item-child" style="word-break: break-all">
                          <label>Altitude:</label>
                          <span>{{ item.elevation }}m</span>
                        </div>
                      </div>
                      <div class="date-list-item-children">
                        <div class="date-list-item-child">
                          <label>Lon And Lat:</label>
                          <span>{{ item.lon.toFixed(6) }} &nbsp;&nbsp; {{ item.lat.toFixed(6) }}</span>
                        </div>
                      </div>
                      <div class="date-list-item-children">
                        <div class="date-list-item-child">
                          <label>Status:</label>
                          <span class="green">{{ item.status }}</span>
                        </div>
                        <div class="date-list-item-child">
                          <label>Signal:</label>
                          <span class="green">Normally</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <custom-empty v-if="!dateList.length" style="margin-top: 40px"></custom-empty>
              </template>
            </div>
            <div class="shadow"></div>
          </ScrollContainer>
        </a-collapse-panel>
        <!-- Focus Date 结束 -->
      </a-collapse>
    </div>
    <!-- 右侧地图 -->
    <div class="station-operation-map">
      <Map token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm">
        <MapMarker v-if="dateList.length" :list="dateList" />
        <MapPane :stationList="dateList" />
      </Map>
    </div>
  </div>
</template>
<script>
import Map from './components/Map.vue'
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: {
    Map,
    MapMarker,
    MapPane,
    ScrollContainer
  },
  data() {
    return {
      activeKey: '1',

      isGettingDateList: false,
      dateList: [],

      searchPlacementVisible: false, // 搜索栏占位是否显示

      searchVisible: false, // 搜索组件是否显示

      filter: {
        searchText: undefined,
        status: undefined,
        type: undefined
      },

      filterVisible: false, // 筛选组件是否显示

      stationTypeList: []
    }
  },
  created() {
    this.getStationList()
    this.getStationTypeList()
  },
  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
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isGettingDateList = 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 筛选
    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
    }
  }
}
</script>
<style lang="less" scoped>
.station-operation {
  position: relative;
  height: 100%;
  .date-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 {
            .date-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;
        }
      }
    }

    // 左侧列表内容
    .date-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;
      }

      &-content {
        .ant-spin {
          width: 100%;
          height: 100px;
          text-align: center;
          margin-top: 90px;
        }
      }

      &.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 {
          height: 25px;
          line-height: 25px;
          font-family: Arial;
          font-size: 14px;
          color: #fff;
          font-weight: bold;
          position: relative;
          padding-left: 8px;
          margin-bottom: 0;
        }

        &-container {
          display: flex;
        }

        &-content {
          width: 100%;
          min-height: 80px;
          padding: 10px 10px 10px 14px;
          flex: 1;
          color: #6ebad0;
          background: url(~@/assets/images/station-operation/date-item-bg.png) center no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .date-list-item-children {
            display: flex;
            justify-content: space-between;

            .date-list-item-child {
              color: #fff;

              &:nth-child(2n + 1) {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              &:nth-child(2n) {
                width: 110px;
                flex-shrink: 0;
                margin-left: 5px;
              }

              label {
                color: #6ebad0;
                font-family: Arial;
              }

              span {
                margin-left: 10px;
                &.green {
                  color: #0cff00;
                }
              }
            }
          }
        }
      }

      .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%;
  }
}
</style>