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">
                <a-popover v-model="searchVisible" trigger="click" placement="bottom">
                  <div @click.stop="searchVisible = !searchVisible">
                    <img src="@/assets/images/station-operation/search.png" alt="" />
                  </div>
                  <template slot="content">
                    <a-input-search placeholder="input search text" @search="onSearch">
                      <img slot="enterButton" src="@/assets/images/station-operation/search.png" alt="" />
                    </a-input-search>
                  </template>
                </a-popover>
                <a-popover trigger="click" placement="bottom">
                  <div @click.stop>
                    <img src="@/assets/images/station-operation/filter.png" alt="" />
                  </div>
                  <template slot="content">
                    <div>筛选</div>
                  </template>
                </a-popover>
              </div>
            </div>
          </template>
          <ScrollContainer direction="verticle" class="date-list">
            <div class="date-list-content">
              <div class="date-list-item" v-for="item of dateList" :key="item.id">
                <h4 class="date-list-item-title">
                  {{ item.stationName }}
                </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.stationType }}</span>
                      </div>
                      <div class="date-list-item-child" style="word-break: break-all">
                        <label>Altitude:</label>
                        <span>{{ item.altitude }}</span>
                      </div>
                    </div>
                    <div class="date-list-item-children">
                      <div class="date-list-item-child">
                        <label>Lon And Lat:</label>
                        <span>{{ item.lon }} {{ item.lat }}</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">{{ item.signal }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <custom-empty v-if="!dateList || !dateList.length" style="margin-top: 40px"></custom-empty>
            </div>
            <div class="shadow"></div>
          </ScrollContainer>
        </a-collapse-panel>
        <!-- All Date End -->
        <!-- 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">
              <div class="date-list-item" v-for="item of dateList" :key="item.id">
                <h4 class="date-list-item-title">
                  {{ item.stationName }}
                </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.stationType }}</span>
                      </div>
                      <div class="date-list-item-child" style="word-break: break-all">
                        <label>Altitude:</label>
                        <span>{{ item.altitude }}</span>
                      </div>
                    </div>
                    <div class="date-list-item-children">
                      <div class="date-list-item-child">
                        <label>Lon And Lat:</label>
                        <span>{{ item.lon }} {{ item.lat }}</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">{{ item.signal }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <custom-empty v-if="!dateList || !dateList.length" style="margin-top: 40px"></custom-empty>
            </div>
            <div class="shadow"></div>
          </ScrollContainer>
        </a-collapse-panel>
        <!-- Focus Date End -->
      </a-collapse>
    </div>
    <!-- 右侧地图 -->
    <div class="station-operation-map">
      <Map />
    </div>
  </div>
</template>
<script>
import Map from './components/Map.vue'
import ScrollContainer from '@/components/ScrollContainer/index.vue'

const dateList = new Array(5).fill(0).map(() => ({
  id: 1,
  stationName: 'ARP01',
  stationType: 'IMS Station',
  altitude: '596m',
  lon: 139.079722,
  lat: 36.299972,
  status: 'Operation',
  signal: 'Normally'
}))

dateList.forEach((item, index) => (item.id = index))

export default {
  components: {
    Map,
    ScrollContainer
  },
  data() {
    return {
      activeKey: '1',
      isGettingDateList: false,
      dateList: dateList,
      searchVisible: false
    }
  },
  methods: {
    // 左侧 All Date 查询
    onSearch() {
      this.searchVisible = false
    },

    // 左侧 All Date 筛选
    onFilter() {}
  }
}
</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;
          .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;
      background-color: rgba(1, 18, 20, 0.6);

      &-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;

      &-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>