EDFS-MCU/src/views/stationData/index.vue

<template>
  <div class="flex-col gap-16 wh-full">
    <template v-if="env.VITE_APP_ENV == 'local'">
      <EdfsWrap title="当前连接站点" shape="circle" shapeColor="#4B9E5F"
                class="h-auto max-h[462px]">
        <el-scrollbar>
          <div class="station-list-flow">
            <div class="wh-full flex-center items-center"
                 v-if="!Array.from(siteMap.values()).length">
              <el-empty style="height: 180px;" :image-size="130"/>
              <!--  :description=""-->
            </div>
            <template v-else v-for=" site in Array.from(siteMap.values())">
              <div class="station-item">
                <div class="title bg-[#4B9E5F]">
                  <div>{{ site.id }}</div>
                </div>
                <div class="body">
                  <div class="info">
                    <div class="info-item">
                      <div class="info-item-label">在线设备</div>
                      <div class="info-item-value">
                        <div class="i-octicon:cloud-16 color-[#4B9E5F] text-16px"></div>
                        {{ site.onlineCount }}
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-item-label">离线设备</div>
                      <div class="info-item-value">
                        <div class="i-octicon:cloud-offline-16 color-[#F44336] text-16px"></div>
                        {{ site.offlineCount }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="footer row-end-0">
                  <div class="m-l-auto p-b-8">
                    <el-button type="primary" style="height: 28px; padding: 0 12px" color="#4B9E5F"
                               @click="onTransferData(site)">设备详情
                    </el-button>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </el-scrollbar>
      </EdfsWrap>
    </template>

    <EdfsWrap :title="`${env.VITE_APP_ENV == 'local' ? '数据导出历史' : '数据导入历史'}`"
              shape="circle" shapeColor="#F1BF63"
              class="flex-1" useScrollBar>
      <el-scrollbar>
        <div class="station-list-flow">
          <div class="station-item" v-for="item in siteList" :key="item.id">
            <div class="title bg-[#F1BF63]">
              {{ item.name }}
              <div class="flex items-center gap-col-2">
                <el-tooltip content="详情">
                  <div
                    class="i-material-symbols:info-outline :hover:color-[#ddd] color-[#FFFFFF] cursor-pointer text-20px"
                    @click="onSiteDetails(item)"></div>
                </el-tooltip>
              </div>
            </div>
            <template v-if="env.VITE_APP_ENV == 'local'">
              <div class="body">
                <div class="info">
                  <div class="info-item">
                    <div class="info-item-label">导出路径</div>
                    <el-tooltip :content="item.export_root_path">
                      <div class="info-item-path">{{ item.export_root_path }}</div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="footer">
                <div class="item">
                  <div class="label">导出时间:</div>
                  <div class="value">
                    {{ item.create_time }}
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="body">
                <div class="info">
                  <div class="info-item">
                    <div class="info-item-label">创建时间</div>
                    <div class="info-item-value">{{ item.create_time }}</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-scrollbar>
    </EdfsWrap>
  </div>

</template>

<script setup lang="ts">
import { type SiteInfo, useTransferDataStore } from '@/stores/transferData'
import { storeToRefs } from 'pinia'
import { getSiteList, type ISite } from '@/api/module/transfer'
import EdfsWrap from "@/components/Edfs-wrap.vue";

const env = import.meta.env

const router = useRouter()
const transferDataStore = useTransferDataStore()

const { connectSite, siteMap, onlineCount, offlineCount } =
  storeToRefs(transferDataStore)

function onTransferData(site: SiteInfo) {
  router.push({
    path: '/station/data-transfer',
    query: {
      type: 'export',
      site: JSON.stringify(site),
    },
  })
}

function onSiteDetails(site: ISite) {
  router.push({
    path: '/station/data-transfer',
    query: {
      type: 'details',
      site: JSON.stringify(site),
    },
  })
}

const siteList = ref<ISite[]>([])

async function loadSiteList() {
  const res = await getSiteList()
  if (res.code === 200 || res.code === 0) {
    siteList.value = res.data
  }
}

onMounted(() => {
  loadSiteList()
})
</script>
<style lang="scss">
.transfer-mask {
  :deep(.el-loading-spinner) {
    position: relative !important;
  }
}
</style>
<style lang="scss">
.station-list-flow {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 24px;

  .station-item {
    width: 280px;
    height: 180px;
    border: 1px solid var(--station-card-border-color);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .title {
    display: flex;
    align-items: center;
    height: 44px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    justify-content: space-between;
    padding: 0 12px;
    user-select: none;

    .title-edit-btns {
      display: flex;
      margin-left: 12px;
    }
  }

  .body {
    background-color: var(--station-card-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    flex: 1;
    overflow: hidden;

    .info {
      display: flex;
      width: 100%;
      justify-content: space-around;

      .info-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;

        .info-item-label {
          font-size: 14px;
          color: var(--label-color);
        }

        .info-item-value, .info-item-path {
          font-size: 20px;
          font-weight: 500;
          margin-top: 4px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 4px;
          width: 90%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding: 0 8px;
          color: var(--station-info-val-text);
        }

        .info-item-path {
          display: block;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 12px;
    height: 36px;

    .item {
      display: flex;
      font-size: 14px;
      color: #999;
      font-weight: 400;

      .value {
        color: #999;
      }
    }

    .info-details {
      font-size: 14px;
      color: #f1bf63;
      cursor: pointer;
      text-decoration: underline;

      &:hover {
        color: #8ace6a;
      }
    }
  }
}
</style>