前端展示设备截图

<templete>
    <el-button @click="handeleShot(scope.row)">
        截图
    </el-button>
    //点击截图弹出的弹框
    <el-dialog v-model="screenDialog" :width="screenWidth" 
        custom-class="screenShow" :close-on-click-modal="false" 
        :show-close="false"
    >
      <div class="screenBoxs" :style="screenHeight">
        <!-- 自定义弹框关闭按钮 -->
        <div @click="closeDialog">
            <img src="../../../../assets/icon/close.svg" class="iconClose"/>
        </div>
        <!-- 后端返回的截图图片地址 -->
        <img v-if="onlyScreenImg" :src="onlyScreenImg"/>
        <!-- 当还没获取到后端接口传过来的图片地址时的截图动画 -->
        <div v-else class="loadingBox flex" >
            <!-- 截图动画 -->
            <div v-if="onlyScreenLoading" class="loaderLoading">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <p>正在截图，请稍后...</p>
            </div>
            <!-- 后端返回截图地址失败 -->
            <div v-else class="loadingFail">
                <i class="iconfont iconduanwang"></i>
                <p>{
   
   { onlyScreenText }}</p>
            </div>
         </div>
      </div>
    </el-dialog>
</templete>

<script>
// 点击截图
    const screenDialog = ref(false);
    const screenHeight = ref("height:540px");
    const screenWidth = ref("960px");
    const onlyScreenImg = ref("");
    const onlyScreenLoading = ref(true);
    const timer = ref("");
    const timerOut = ref("");
    function handeleShot(row) {
      // 获取图片地址
        // 判断截图框的宽高
        console.log("row.devicedpi", typeof row.deviceDpi);
        var strdpi = row.deviceDpi.split("*");
        console.log(strdpi);
        console.log(strdpi[0] - strdpi[1]);
        if (strdpi[0] - strdpi[1]>0) {
          screenWidth.value = "960px";
          screenHeight.value = "height:540px";
          console.log('777778888888');
        } else {
          screenWidth.value = "405px";
          screenHeight.value = "height:648px";
          console.log('111111111333333');
        }
          screenDialog.value = true;
      let datas = {
        devMac: row.deviceMac,
        devName: row.deviceName,
        devType: row.deviceType,
      };
      shotScreen(datas).then((res) => {
        onlyScreenImg.value = "";
        onlyScreenLoading.value = true;
        timer.value = setInterval(() => {
          let data = {
            mac: row.deviceMac,
          };
          getScreen(data)
            .then((res) => {
              if (res.data) {
                clearTimeout(timerOut.value);
                clearInterval(timer.value);
                onlyScreenImg.value = res.data;
                // onlyScreenLoading.value = true;
                onlyScreenLoading.value = false;
              }
            })
            .catch((err) => {
              clearTimeout(timerOut.value);
              clearInterval(timer.value);
              onlyScreenLoading.value = true;
            });
        }, 3000);
        // clearTimeout(timerOut.value);
        timerOut.value = setTimeout(() => {
          clearInterval(timer.value);
          if (!onlyScreenImg.value) {
            onlyScreenImg.value = "";
          }
          onlyScreenLoading.value = false;
        }, 15000);
      });
    }
</script>

//loading
.loadingBox{
	height:100%;
	justify-content: center;
	align-items:center;
}
@-webkit-keyframes loaderLoading {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

@keyframes loaderLoading {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }


.loaderLoading{
	text-align:center;
	p{
		color: #0461A7;
		padding-top:15px;
	}
}
.loaderLoading > div {
    background-color: #0461A7;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: loaderLoading 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
    animation: loaderLoading 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
}
.loaderLoading > div:nth-child(1), .loaderLoading > div:nth-child(5) {
    -webkit-animation-delay: 0.4s !important;
    animation-delay: 0.4s !important;
}
.loaderLoading > div:nth-child(2), .loaderLoading > div:nth-child(4) {
    -webkit-animation-delay: 0.2s !important;
    animation-delay: 0.2s !important;
}
//设备查看
.screenShow{
	.el-dialog__header{
		display:none
	}
	.el-dialog__body{
		padding:0px;
		position:relative;
		img{
			width:100%
		}
		.iconClose{
			width:30px;
			height:30px;
			top:-15px;
			right:-15px;
			color:#F5F5F5;
			font-size:30px;
			cursor:pointer;
			position:absolute
		}
		.loadingFail{
			text-align:center;
			.iconfont{
				font-size:60px;
			}
			p{
				margin-top:10px;
			}
		}
	}
}

效果：