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

<template>
  <div class="flex-col gap-16 wh-full">
    <EdfsWrap title="当前连接站点" v-if="connectSite?.title" shape="circle" shapeColor="#4B9E5F" class="h-auto">
      <div class="station-list-flow">
        <div class="station-item">
          <div class="title bg-[#4B9E5F]">
            <div>{{ connectSite.title }}</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>
                  {{ 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>
                  {{ 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">迁移数据</el-button>
            </div>
          </div>
        </div>
      </div>
    </EdfsWrap>
    <EdfsWrap title="迁移历史" shape="circle" shapeColor="#F1BF63" class="flex-1" useScrollBar>
      <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="数据迁移">
                <i class="i-mdi:database-arrow-right-outline  :hover:color-[#ddd] color-[#FFFFFF] cursor-pointer text-20px"
                  @click="openTransferDlg(item)"></i>
              </el-tooltip>
              <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>
          <div class="body">
            <div class="info">
              <div class="info-item">
                <div class="info-item-label">导出路径</div>
                <div class="info-item-value">{{ item.export_root_path }}</div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="item">
              <div class="label">迁移时间:</div>
              <div class="value">
                {{ dayjs(item.export_time).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </EdfsWrap>
  </div>
  <div class="transfer-mask absolute left-0 top-0 wh-full  z-10  bg-#FFF-90 h-full w-full"
    v-if="isSiteTransfer || transferLoading">
    <div class="wh-full flex-col justify-center items-center">
      <span class="mt-2 text-red">导出中请不要刷新或关闭页面!!!</span>
      <div class="w-300px h-300px flex-col justify-center items-center" v-if="transferLoading">
        <div class="el-loading-spinner"><svg class="circular" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
          </svg></div>
        <div class="mt-28">
          <div class="text-14px text-#999999">指令下发中请稍后...</div>
        </div>
      </div>
      <div class="w-56% h-full flex justify-center items-center" v-if="isSiteTransfer && !transferLoading">
        <div class="flex-col gap-row-4 w-full">
          <div class="flex items-center gap-col-1">
            <div class="flex-1  items-center">
              <el-progress :percentage="100" class="flex-1" :stroke-width="12" striped striped-flow :duration="20">
                <div class="text-16px font-500">数据迁移中...</div>
              </el-progress>
            </div>
          </div>
          <div class="h-420 border-radius-8px bg-[#F9FAFB] p-10">
            <div class="text-16px font-500">迁移日志</div>
            <el-scrollbar class="h-full">
              <div v-for="i in siteTransferLogList"> {{ i }} </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
  <SiteTransferDlg ref="siteTransferDlgRef" :isBatchTransfer="false" @on-save="onSiteTransfer"></SiteTransferDlg>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { useTransferDataStore } from '@/stores/transferData'
import { storeToRefs } from 'pinia'
import { getSiteList, type ISite } from '@/api/module/transfer'
import SiteTransferDlg from './components/siteTransferDlg.vue'
import type { PublishMsg, PubMsgData, TimeoutMsg } from '@/utils/zmq'
import { getTransferTopic, postTransferTopic } from './utils'
import ZMQWorker from '@/composables/useZMQJsonWorker'
import { useMessage } from '@/composables/useMessage'

const message = useMessage()

const worker = ZMQWorker.getInstance()
const router = useRouter()
const transferDataStore = useTransferDataStore()

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

const { initConnectSite } = transferDataStore

watch(isConnected, val => {
  val ? initConnectSite() : (connectSite.value = null)
})

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

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

const isSiteTransfer = ref(false)
const transferLoading = ref(false)


const siteList = ref<ISite[]>([
  {
    id: '1',
    name: '站点1',
    export_root_path: '/data/transfer/site112312312312',
    export_time: '2023-10-01T12:00:00Z',
    last_modify_time: '2023-10-01T12:00:00Z',
  },
  {
    id: '2',
    name: '站点2',
    export_root_path: '/data/transfer/site2',
    export_time: '2023-10-02T12:00:00Z',
    last_modify_time: '2023-10-02T12:00:00Z',
  }
])
async function loadSiteList() {
  const res = await getSiteList()
  if (res.code === 200 || res.code === 0) {
    siteList.value = res.data
  }
}


const siteTransferDlgRef = ref<typeof SiteTransferDlg>()
function openTransferDlg(item: ISite) {
  siteTransferDlgRef.value?.open(item)
}



const pubIdWithSite = new Map<
  string,
  { site: ISite; action: 'import' }
>()

function onSiteTransfer(msg: PublishMsg<'import'>, site: ISite) {
  pubIdWithSite.set(msg.id, { site, action: 'import' })
  worker.publish(postTransferTopic, msg, true, zmqTimeoutCb)
  worker.subscribe(getTransferTopic, zmqImportCb, msg.id)
  transferLoading.value = true
  isSiteTransfer.value = true

}

const siteTransferLogList = ref<string[]>([])


function zmqImportCb(msg: PubMsgData) {
  const { id, result, feedback } = msg
  const { site, action } = pubIdWithSite.get(id)!
  if (action !== 'import' || !site) return
  transferLoading.value = false
  if (result === 'progress') {
    const log: string = Array.isArray(feedback) ? feedback[0] || '' : ''
    siteTransferLogList.value.push(log)
  }
  if (result !== 'progress') {
    if (result === 'success') {
      isSiteTransfer.value = false
      message.error(`导出数据成功`)

    } else {
      isSiteTransfer.value = false
      message.error(`导出数据失败`)
    }
  }
}

function zmqTimeoutCb(msg: TimeoutMsg) {
  const { site, action } = pubIdWithSite.get(msg.timeoutId)!
  if (site && action === 'import') {
    message.error(`站点:${site.name}数据导出超时,请稍后重试`)
    pubIdWithSite.delete(msg.timeoutId)
    isSiteTransfer.value = false
    transferLoading.value = false

  }
}

onMounted(() => {
  initConnectSite()
  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 {
          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);
        }
      }
    }
  }

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