<template>
<div class="content-box">
    <!-- v-if="videoTypeShow" -->
   <div class="videoTypeBox" v-if="videoTypeShow">
    <el-form :inline="true" :model="videoTypeForm" class="demo-form-inline" >
     <el-form-item label="视频源类型：" >
            <el-radio-group v-model="videoTypeForm.videoType" @change="changeRadio">
              <el-radio label="实时视频"></el-radio>
              <el-radio label="离线视频"></el-radio>
            </el-radio-group>
    </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row>
  <el-col :span="6" v-for="(item, index) in videoList" :key="item.id" :offset="index > 0 ? 0 : 0"  ref="typeCard" >
    <el-card :body-style="{ padding: '0px' }" class="card" :loading="loading">
        <div class="type">
            <img src="@/assets/img/AnalysisMain/leftTop.png" alt="" v-if="item.type=='实时视频'">
            <img src="@/assets/img/AnalysisMain/leftTop2.png" alt="" v-if="item.type=='离线视频'">
        </div>
        <div class="name">
            <img src="@/assets/img/AnalysisMain/ssVideo.png" alt="" v-if="item.type=='实时视频'">
            <img src="@/assets/img/AnalysisMain/lxVideo.png" alt="" v-if="item.type=='离线视频'">
        </div>
        <div class="statusN">
             <img src="@/assets/img/AnalysisMain/status.png" alt="" >
             <span class="statusName" v-if="item.type=='实时视频'">{{ item.status }}</span>
             <span class="statusName" v-if="item.type=='离线视频'">{{ item.videoAnalysisStatus }}</span>
        </div>
        <!-- <div class="middleN" v-if="item.type=='离线视频'&&item.videoAnalysisStatus=='分析中'"> -->
             <div class="middleN" v-if=" (item.type=='离线视频' && item.videoAnalysisStatus=='分析中') || (item.type=='离线视频' &&item.videoAnalysisStatus=='未分析')">
           
             <el-progress type="circle" :percentage="item.numSatus"  text-color='#fff'></el-progress>
        </div>
       
        <div class="typeRight">
            <el-button type="primary" icon="el-icon-refresh-right" @click="openRight(item)" v-if="item.type=='离线视频'&&item.videoAnalysisStatus=='分析异常'"></el-button>
        </div>
        <!-- <div class="del" @click="open(item.id)"> <i class='el-icon-delete'></i></div> -->
      <img :src="item.img" class="image" @click="goToPage(item.videoAnalysisStatus
,item.id,item.num,item.title,item.type,item.status,item.msg,item.videoPath)">
      <div class="bot">
        <span style=" vertical-align: middle;">
            <img src="@/assets/img/AnalysisMain/video (1).png" alt="">
            <!-- <img :src="item.img" alt=""> -->
            </span>
        <div class="bottom clearfix">
          <time class="time">{{ item.title }}</time>
          <!-- <el-button type="text" class="button">操作按钮</el-button> -->
         <!-- <div class="streamAddress" :content="item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath">{{item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath}}</div> -->
           <div class="streamAddress" :content="item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath">{{item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath}}</div>
        </div>
        
        <div class="st">
             <!-- <span>{{ item.status }}</span> -->
             
             <el-button type="primary" icon="el-icon-delete" @click="open(item.id)"></el-button>
             
        </div>
      </div>
    </el-card>
  </el-col>
  <el-col :span="6">
    <el-card :body-style="{ padding: '0px' }">
        <div class="middle">
            <div style="width: 50%;height: 100%;margin: auto;padding-top: 15%;cursor: pointer;text-align: center;" @click="informationInfo('新增')">
                <img src="@/assets/img/AnalysisMain/add.png" width="80%">
            </div>
             
        </div>
     
    </el-card>
  </el-col>
</el-row>
<div class="btn" v-if="videoTypeForm.videoType=='实时视频'">
    
    <el-button  type="primary" @click="applicationBtn">保存</el-button>
    <!-- <el-button  type="primary" @click="stopAlgorithmBtn">关闭程序</el-button> -->
    </div>
  </div>
  <!-- <div id="dialog" class="margin-top: 0px !important;"> -->
      <el-dialog
    title="视频源配置"
    width="40%"
    :visible.sync="dialogFormVisible" 
    :close-on-click-modal="false"
  >
    <!-- <editModal ></editModal> -->
    <el-form :model="form">
    <el-form-item label="视频源名称" :label-width="formLabelWidth">
      <el-input v-model="form.videoName" autocomplete="off" style="width:50%" placeholder="请输入视频源名称"></el-input>
    </el-form-item>
    <!-- <el-form-item label="视频源类型" :label-width="formLabelWidth">
    <el-radio-group v-model="form.videoType">
      <el-radio label="实时视频"></el-radio>
      <el-radio label="离线视频"></el-radio>
    </el-radio-group>
  </el-form-item> -->
  <el-form-item label="视频源地址" :label-width="formLabelWidth" v-if="videoTypeForm.videoType=='实时视频'">
     <el-input v-model="form.videoStreamAddress" autocomplete="off" style="width:80%" placeholder="请输入视频源地址" >
    <template slot="prepend">rtsp://</template>
  </el-input>
      <!-- <el-input v-model="form.videoStreamAddress" autocomplete="off" style="width:80%"></el-input> -->
    </el-form-item>
       <el-form-item label="车牌识别开关：" :label-width="formLabelWidth" v-if="videoTypeForm.videoType=='离线视频'">
                        <el-switch
                            v-model="form.LicensePlateRecognitionSwitch"
                            active-value="1"
                            inactive-value="0"
                            @change="changeChepai($event)"
                        ></el-switch>
                    </el-form-item>
    <el-form-item label="离线视频上传" :label-width="formLabelWidth" v-if="videoTypeForm.videoType=='离线视频'">
        <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
         <input type="file" id="fileExport" @change="handleFileChange" ref="inputer">
         <el-button size="small" type="primary" @click="load">点击上传</el-button>
        
         <!-- <el-upload
         class="upload-demo"
        action="#"
        :file-list="fileList" 
        @change="handleFileChange"
        multiple >
            <el-button type="file" id="fileExport"  ref="inputer">选取文件</el-button>
             <el-button style="margin-left: 10px;" size="small" type="success" @click="load">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传文件名称请勿空格！</div>
          </el-upload> -->
    </el-form-item>
  
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false"  :disabled="dis">取 消</el-button>
    <el-button type="primary" @click="commit(form)"  :disabled="dis">确 定</el-button>
  </div>
  </el-dialog>
  <!-- </div> -->
 
     
</div>

</template>

<script>
import editModal from "@/views/bounced/maintenanceRemind";
import {getGetShipjk,getDeleteShipjk,getApplication,getStopAlgorithm,startVideoAnalysis,getSetVideoMode,getVideoMode} from "../api/index";
import  serverUrl from "../config/apiurl.js"
import axios from 'axios'
const os = require('os');

export default {
  data(){
    return{
         receiveNews: "",
         topicSends:[],
        componentShow: "",
        numArr:[],
        currentDate: new Date(),
        closeStatus: null,
        dis:false,
      dialogFormVisible: false,
      videoTypeShow: false,
      loading:true,
       fileList: [],
       form: {
         radio:'',
          videoName:'视频01',
          city:'',
          videoStreamAddress:'',
        videoPath:'',
        numSatus:0,
        LicensePlateRecognitionSwitch:0
        },
        formLabelWidth: '120px',
        formLabelWidth: '200px',
        videoTypeForm:{
            videoType:'实时视频'
            //  videoType:'离线视频'
        },
        videoList:[],
         fullscreenLoading: false,
         ip:'',
         numSatus:0,
         newNumber:0,

    }
  },
 
   //离开当前页面后执行
destroyed: function () {
//  console.log("离开当前页")
//   client.end();
},
created() {
this.getVideoList()
 
   
},
  mounted() {
   this.createMqtt()
      
  },
   watch: {
        videoList: {
            handler(newVal) {
                if (newVal) {
                      newVal.forEach((item)=>{
                        if(item.status=='加载中'){
                             console.log("加载中",item)
                            setTimeout(() => {
                            this.getVideoList()
                            }, 10000); 
                        }
                        
                        }) 
                }
            },
            deep: true
        }
    },
  methods: {
    changeChepai(){},
    //传输视频源类型
    SetVideoMode(val){
         getSetVideoMode({Mode:val}).then(res=>{
                console.log("res",res)
             })
    },
    changeRadio(){
        this.SetVideoMode(this.videoTypeForm.videoType)
    },
    //获取视频源类型
    getVideoType(){
          getVideoMode().then(res=>{
                console.log("res",res.data.data)
                this.videoTypeForm.videoType = res.data.data
             })
    },
         /** 创建mqtt */
    createMqtt() {
        
      //创建链接，接收数据
      if(this.videoTypeForm.videoType=='实时视频'){
        console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
         window.PubScribe(null,-1,this.realInfo,'videoId');
           window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'})); 
      }else if(this.videoTypeForm.videoType=='离线视频'){
        console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
         this.topicSends = ['VideoStatusData'];
        window.PubScribe(this.topicSends,'001', this.realInfo,'videoId');  
      }
         
    },
    //停止订阅mqtt
    disConnect() {
    //   if (client != null) {
    //     client.unsubscribe(this.topicSends);
    //     client = null;
    //   }
    },
    /** 实时数据分类 */
    realInfo(topic, message) {
        // console.log("topic",topic)
      switch (topic) {
        // 接收托片
        case "img0":
        case "img1":
        case "img2":
        case "img3":
        case "img4":
        case "img5":
        case "img6":
        case "img7":
        case "img8":
          try {
             const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            //   var newArr = []
            //msg为转换后的JSON数据
             if(msg.rate=='low'){
                   console.log("msg", msg)  
                if(this.videoList.length!=0){
                    for (let i = 0; i < this.videoList.length; i++) { 
                        if(msg.id==this.videoList[i].id){
                           this.videoList[i].img ='data:image/png;base64,' + msg.pic
                            this.videoList[i].msg = msg
                        }   
                    }
                }
              }
             
            //   this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
            //   console.log("imageUrl", imageUrl)
             
          } catch (error) {

          }
          break;
         case "hert":
             try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            //   console.log("hert", msg)   //msg为转换后的JSON数据
              if(msg==''){

              }
              
          } catch (error) {

          }
          break; 
          case "VideoStatusData":
             try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("VideoStatusData", msg)   //msg为转换后的JSON数据
              this.changeStatus(msg)
             
              
          } catch (error) {

          }
          break;
      }
      this.receiveNews = "";
    },
    changeStatus(msg){
        for (let i = 0; i < this.videoList.length; i++) {
          //分析中
           
            if(msg.type=='video_under_analysis'&&msg.video_id==this.videoList[i].id){
                var numSatusN=''
                // loadingcard.close();
                this.videoList[i].videoAnalysisStatus = '分析中'
                 numSatusN=msg.number_frames/msg.total_frames*100
               this.videoList[i].numSatus =parseFloat(numSatusN.toFixed(2))
            }else if(msg.type=='video_analyzed'&&msg.video_id==this.videoList[i].id){
                //已分析
                console.log("已分析")
                this.videoList[i].videoAnalysisStatus = '已分析'
            }else if(msg.type=='video_analyse_unusual'&&msg.video_id==this.videoList[i].id){
                //分析异常
                 console.log("分析异常")
                 this.videoList[i].videoAnalysisStatus = '分析异常'
            }else if(msg.type=='video_loading'&&msg.video_id==this.videoList[i].id){
                //分析异常
                 console.log("加载中")
                 this.videoList[i].videoAnalysisStatus = '加载中'
            }  
        }
            
    },
    generateMixed(n) {
  var chars = ['0','1','2','3','4','5','6','7','8','9',
              'A','B','C','D','E','F','G','H','I','J','K','L','M',
              'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
  var res = "";
  for(var i = 0; i < n ; i++) {
     var id = Math.floor(Math.random()*36);
     res += chars[id];
  }
  return res;
},
     informationInfo(data,item) {
        
        if(data=='新增'){
             var random = this.generateMixed(3)
        console.log("random",random)
        // console.log("this.file",this.file)
        // this.file = undefined
        console.log("this.$refs.inputer",this.$refs.inputer)
        this.form={
         radio: '',
          videoName:'视频'+random,
          city:'',
          videoStreamAddress:'',
          LicensePlateRecognitionSwitch:0,
        videoPath:''
        },
     
         this.dialogFormVisible = true;
        }
          
        
     },
     open(item) {
        console.log("item",item)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             getDeleteShipjk({VideoId:item}).then(res=>{
                console.log("res",res)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                 this.getVideoList()
             })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      openRight(item){
        console.log("item",item)
        startVideoAnalysis(item.id).then(res => {
                //
                if(res.data.msg=='请求成功'){
                    this.$message({
                            message: '启动成功',
                            type: 'success'
                        });
                        //  setTimeout(() => {
                        // this.getAnalysisStatus()
                        // }, 5000);
                    // if(this.videoAnalysisSta=='已分析'){

                    // }else if(this.videoAnalysisSta=='分析中'){
                    //     this.description = '正在分析中'
                    //     setTimeout(() => {
                    //     this.getAnalysisStatus()
                    //     }, 5000); 
                    // }else if(this.videoAnalysisSta=='未分析'){
                    // }  
                }   
            });
      },
      //

     commit(form){
        console.log("form",form)
        let formData = new FormData();
        formData.append("VideoName",form.videoName);
            formData.append("VideoType",this.videoTypeForm.videoType);
            window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
            if(this.videoTypeForm.videoType=='离线视频'){
                formData.append("VideoPath",form.videoStreamAddress);
                formData.append("LicensePlateRecognitionSwitch",form.LicensePlateRecognitionSwitch)
            }else{
                formData.append("VideoStreamAddress",form.videoStreamAddress);
            }
        axios({
                method: "post",
                url: serverUrl.dataUrl,
                data:formData
              }).then((res) => {
               console.log("提交按钮",res)
               if(res.data.msg=='添加成功'){
                 this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.getVideoList()
                // if(this.videoTypeForm.videoType=='离线视频'){
                //     startVideoAnalysis(res.data.data).then(res => {
                //         if(res.data.msg=='请求成功'){
                //         this.$message({
                //             message: '启动成功',
                //             type: 'success'
                //         }); 
                //         }   
                //     });
                // }else{

                // }
               }else{
                 this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
               }

              this.dialogFormVisible = false;
                
              });
    
     },
     handleFileChange(e) {
                    let inputDOM = this.$refs.inputer;
                    this.file = inputDOM.files[0];// 通过DOM取文件数据

                },
    //应用
    applicationBtn(){
        // this.createMqtt()
         getApplication().then(res=>{
                console.log("res",res)
                if(res.data.code==200){
                     const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

          
        setTimeout(() => {
          loading.close();
       
            setTimeout(() => {
                this.getVideoList()
                
                 }, 5000); 
      
           this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                // setTimeout(() => {
                // window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
                //  }, 3000); 
            }, 15000);  
                }
             })
    },
    //停止
     stopAlgorithmBtn(){
         getStopAlgorithm().then(res=>{
                console.log("res",res)
                if(res.data.code==200){
                this.getVideoList()
                 this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                }
             })
    },
                S4() {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                },
                guid() {
                    return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4());
                },
                load() {
                    let size = this.file.size;//文件大小
                    // this.fileList = []
                    let maxZrea = 8;              //设置每个分区大小 MB
                    let bufferSize = maxZrea * (1024 * 1024);
                    let fileStart = 0;
                    let fileEnd = bufferSize;
                    let arrFile = [];
                    
                    while (fileStart < size) {
                        var fileInfo = {
                            File: this.file.slice(fileStart, fileEnd),
                            Start: fileStart,
                            End: fileEnd
                        }
                        arrFile.push(fileInfo);
                        fileStart = fileEnd;
                        fileEnd = fileStart + bufferSize;
                    }
                    let newNumber= 0
                    var loadingN = this.$loading({
                      lock: true,
                       text: newNumber +'/'+arrFile.length,
                      target: '.el-dialog',
                      spinner: 'el-icon-loading',
                      background: 'rgba(0, 0, 0, 0.7)'
                    });
                     console.log("loadingN",loadingN.text)
                    let count = arrFile.length;
                    let filename = this.file.name + "~" + this.guid();
                    for (var i = 0; i < count; i++) {
                        let formData = new FormData();//new一个formData事件
                        formData.append("file", arrFile[i].File); //将file属性添加到formData里
                        var url = serverUrl.getSpareElementOrder+"?Name=" + filename + "&Number=" + i + "&BufferSize=" + bufferSize + "&Count=" + count + "&Start=" + arrFile[i].Start + "&End=" + arrFile[i].End + "&Size=" + size;
                        axios.post(url, formData, {
                            headers: {
                                "Content-Type": "multipart/form-data;",
                            }
                        }).then(r => {
                            if (r.data.code!=200) {

                            }else{    
                                if(r.data.data==null){
                                    this.dis = true 
                                    // var newN = i
                                    this.newNumber = newNumber++
                                    loadingN.text = this.newNumber +'/'+arrFile.length
                                }else{
                                    this.dis = false
                                    loadingN.close();
                                      this.$message({
                                  message: r.data.msg,
                                  type: 'success'
                                });
                                this.form.videoStreamAddress=r.data.data
                                this.fileList.push(r.data.data)
                                }
                            }
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                },
     goToPage(videoAnalysisStatus,id,num,name,type,status,msg,videoPath) {
        console.log("id",id)
        console.log("num",num)
        console.log("name",name)
        console.log("type",type)
        console.log("status",status)
         console.log("msg",msg)
           console.log("videoAnalysisStatus",videoAnalysisStatus)
           if(type=='离线视频'){
             if(videoAnalysisStatus!='已分析'){

            }else if(videoAnalysisStatus=='已分析'){
            this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status,msg:msg,videoPath:videoPath}})
            }
           }else{
            this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status,msg:msg,videoPath:videoPath}})
           }
        
       
        
    },
     //获取视频数据
     getVideoList(){
        getGetShipjk().then(res=>{
            console.log("res",res)
            if(res.data.msg=='成功'){
                // if(val=='重启'){
                    setTimeout(() => {
                        window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
                        }, 2000);
                // }
               if(res.data.data.length!=0){
                    this.videoTypeForm.videoType = res.data.data[0].videoType
                    if(this.videoTypeForm.videoType=='离线视频'){
                        this.createMqtt()
                    }
                    this.getVideoType()
                }else{
                    this.SetVideoMode(this.videoTypeForm.videoType)
                }
                //   console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
                var arr = [];
                res.data.data.forEach((item)=>{
                        arr.push({
                              id:  item.videoId,  
                              type: item.videoType,
                              title: item.videoName,
                              num:item.number,
                              status:item.status,
                              videoStreamAddress:item.videoStreamAddress,
                              videoPath:item.videoPath,
                              img: require('@/assets/img/AnalysisMain/img1.png'),
                            //   img:'',
                              trafficAnalysisStatus:item.trafficAnalysisStatus,
                            videoAnalysisStatus:item.videoAnalysisStatus,
                            numberFrames:item.numberFrames,
                            totalFrames:item.totalFrames,
                            numSatus:0,
                            msg:{},
                            });
                        }) 
                this.videoList=arr
                if(this.videoList.length=='0'){
                    this.videoTypeShow = true
                }else{
                    this.videoTypeShow = false
                }
            }
        })
     },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
  },
  

   components: {
    editModal
  },
}
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  .bot{
    /* padding: 14px; */
    padding: 8px 15px;
  }
  .streamAddress{
   color: coral;
    font-size: 12px;
    padding-top: 5px;  
     
  }
  .bottom {
    margin-top: 10px;
    line-height: 12px;
    display: inline-block;
    margin-left: 15px;
     width: 67%;
    text-overflow:ellipsis;
    white-space:nowrap; 
    overflow:hidden;  
  }
.st{
    position: absolute;
    right: 4%;
    top: 80%;
    display: inline-block;

}
.st span{
    color: #999;
}
  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
    
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .middle{
    width: 100%;
    /* height: 100%; */
    height: 284px;
  }
  .el-col-6 {
    width: 25%;
    padding-left: 20px;
    padding-top: 20px;
}
.type{
    position: absolute;
    left: 0;
    top:0px;
    z-index: 98;
}
.typeRight{
     position: absolute;
    right: 10px;
    top: 5px;
    z-index: 98;
}
.middleN{
       position: absolute;
    left: 35%;
    top: 15%;
    z-index: 98;
}
.del{
    position: absolute;
    right: 0px;
    top:0px;
    width: 25px;
    height: 25px;
    z-index: 9999;
    /* background-color: #999 */
}
.videoTypeBox{
   background: #fff;
    /* width: 98%; */
    margin-left: 1%;
    display: flex;
    padding-top: 20px;
    padding-left: 30px;
}
.card{
    position: relative;
    cursor: pointer;
}
.name{
     position: absolute;
    left: 7px;
    top:0px;
    z-index: 99;
}
.statusN{
     position: absolute;
    left: 30px;
    top:0px;
    z-index: 97;
}
 .statusName{
    position: absolute;
    left: 13px;
    top: 6px;
    z-index: 99;
    color: #eee;
}
.middleN .el-progress__text {
	  color: #fff; 
}
    .el-loading-spinner{
font-size: 30px;
}
    .el-loading-text{
        font-size: 18px!important;
    }
.el_dialog {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .el_dialog__content {
        width: v-bind(width1);
        height: 400px;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
  
#dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
}
 

#dialog .el-dialog__title {
  font-weight: bold;
  color: #000;
}
.btn{
    position: absolute;
    right: 10%;
    bottom: 18%;
}
</style>


