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 class="" v-else-if="$fetchState.error">
        <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,
    };
  },
  computed: {
    // currentPhoneSize() {
    //   // return this.phoneSizeList.find(v=> v.width=== )
    // },
  },
  async fetch() {
    // await this.getDiskInfo();
    if (this.userCardId) {
      await this.getDiskInfo(this.userCardId);
      await this.getPhoneSizeList(this.userCardId);
      await this.connect(this.userCardId);
    }
  },
  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 = () => {
        return this.$axios
          .$post('/resources/user/cloud/connect', {
            userCardId,
          })
          .catch((error) => {
            if (error.response.data.status === 5200) {
              this.loadingLabel = '云手机挂载中...';
            }
            return error;
          });
      };

      const res = await getConnectData();

      if (!res.isAxiosError) {
        this.connectInfo = res.data;
        // this.connectInfo.sn = 'RK3931C13019';
        return res;
      }
      // 第一次连接失败，开启轮询
      const wres = await new Promise((resolve, reject) => {
        const startTime = Date.now();
        const maxTime = 1000 * 20;
        clearInterval(this._watchConnectInterval);
        this._watchConnectInterval = setInterval(async () => {
          try {
            if (Date.now() - startTime >= maxTime) {
              throw new Error('云手机挂载超时');
            }
            const res = await getConnectData();
            if (!res.isAxiosError) {
              clearInterval(this._watchConnectInterval);
              resolve(res);
            }
          } catch (error) {
            clearInterval(this._watchConnectInterval);
            reject(error);
          }
        }, 1000);
      });
      this.connectInfo = wres.data;
      // this.connectInfo.sn = 'RK3923C1201900139';
      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>