android-cloud-H5/components/disk/index.vue

<template>
  <div
    :data-id="diskInfo && diskInfo.id"
    class="disk reverse flex flex-col h-full"
  >
    <header class="disk-header"></header>
    <main class="disk-main flex-auto">
      <disk-video :info="connectInfo"></disk-video>
      <disk-touch :info="connectInfo" @sizeChange="() => {}"></disk-touch>
    </main>
    <footer class="disk-footer h-50rpx"></footer>
    <v-overlay absolute :value="$fetchState.error || $fetchState.pending">
      <div
        v-if="$fetchState.pending"
        class="flex flex-col justify-center items-center"
      >
        <v-progress-circular
          indeterminate
          class="w-32rpx h-32rpx"
        ></v-progress-circular>
        <div v-if="loadingLabel" class="label mt-2">{{ loadingLabel }}</div>
      </div>
      <div v-else-if="$fetchState.error" class="">
        <v-icon>$error</v-icon>
        <div class="">{{ $fetchState.error.message }}</div>
        <div class="">
          <v-btn @click="$router.back()">退出</v-btn>
        </div>
      </div>
    </v-overlay>
  </div>
</template>

<script>
export default {
  name: 'Disk',
  props: {
    userCardId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      diskInfo: null,
      connectInfo: null,
      // loading: false,
      loadingLabel: null,

      // 当前生效的分辨率
      currentWidth: 720,
      currentHeight: 1280,
      currentDpi: 1,

      // 当前选中的分辨率
      activeWidth: 720,
      activeHeight: 1280,
      activeDpi: 1,

      // 分辨率列表
      phoneSizeList: [
        {
          id: 1,
          width: 720,
          height: 1280,
          dpi: 1,
        },
      ],

      // currentPhoneSizeId: 0,
      // activePhoneSizeId: 0,
    };
  },
  async fetch() {
    // await this.getDiskInfo();
    if (this.userCardId) {
      await this.getDiskInfo(this.userCardId);
      await this.getPhoneSizeList(this.userCardId);
      await this.connect(this.userCardId);
    }
  },
  computed: {
    // currentPhoneSize() {
    //   // return this.phoneSizeList.find(v=> v.width=== )
    // },
  },
  watch: {
    userCardId: '$fetch',
  },
  methods: {
    // 查询云机
    async getDiskInfo(userCardId) {
      const res = await this.$axios.$get(
        '/resources/v5/client/disk/info/userCard/single',
        {
          params: {
            userCardId,
          },
        },
      );
      this.diskInfo = res.data;
    },
    async getPhoneSizeList(userCardId) {
      try {
        const res = await this.$axios.$get(
          '/resources/v5/machine/resolution/getResolvingPower',
          {
            params: {
              userCardId,
            },
          },
        );
        this.phoneSizeList = res.data;
      } catch (error) {
        this.phoneSizeList = [];
      }
    },

    /**
     * 轮询连接云机，因为超分需要挂载
     * @param {number} userCardId
     * @param {number} 超时
     */
    async connect(userCardId) {
      // 连接云机
      const getConnectData = () =>
        this.$axios.$post('/resources/user/cloud/connect', {
          userCardId,
        });

      try {
        const res = await getConnectData();
        this.connectInfo = res.data;
        return res;
      } catch (error) {
        const res = await new Promise((resolve, reject) => {
          const startTime = Date.now();
          const maxTime = 1000 * 60;
          const interval = 1000 * 1;
          clearInterval(this._watchConnectInterval);
          this._watchConnectInterval = setInterval(async () => {
            try {
              if (Date.now() - startTime >= maxTime) {
                throw new Error('云手机挂载超时');
              }
              await getConnectData().then(resolve, (error) => {
                // console.log(
                //   '🚀 ~ file: index.vue ~ line 149 ~ awaitgetConnectData ~ error',
                //   error,
                // );
                if (error.response.data.status === 5220) {
                  // console.log('一键修复');
                  this.loadingLabel = error.response.data.msg;
                }
              });
            } catch (error) {
              clearInterval(this._watchConnectInterval);
              reject(error);
            }
          }, interval);
        });
        this.connectInfo = res.data;
        return res;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .disk {
//   position: relative;
//   display: flex;
//   flex-direction: column;
//   height: 100%;
// }
// .disk-header {
//   position: relative;
//   height: 0;
//   flex: none;
// }
// .disk-main {
//   position: relative;
//   flex: 1;
// }
// .disk-footer {
//   height: 50px;
// flex: none;
// }
.disk-main {
  position: relative;
  overflow: hidden;
}
</style>