imagesend.vue

<template>
   <div class="innnerBox">
    <div class="imagebox">
      <div class="stepbox">
        <el-col :span="20" :offset="2">
          <el-steps :active="active" finish-status="success">
            <el-step title="镜像准备"></el-step>
            <el-step title="下发配置"></el-step>
            <el-step title="流程检查"></el-step>
            <el-step title="下发进度"></el-step>
          </el-steps>
        </el-col>
      </div>
      <div class="settingbox">
        <div class="" v-show="active == 1">
          <el-table :data="tableData" tooltip-effect="dark" border ref="imagetable" style="width: 90%;margin:10px auto"  @select="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="filename" align="center" label="镜像名称">
            </el-table-column>
            <el-table-column prop="type" align="center" label="应用类型">
            </el-table-column>
            <el-table-column prop="cname" align="center" label="发布厂家">
            </el-table-column>
            <el-table-column prop="version" align="center" label="版本号">
            </el-table-column>
            <el-table-column prop="create_dt" align="center" label="创建时间">
            </el-table-column>
          </el-table>
          <el-button style="margin: 12px 70px  0 0;float:right" @click="next" align="right">下一步</el-button>
        </div>
        <div class="" v-show="active == 2">
          <div class="sendboxtale">
            <el-tabs v-model="activeName">
              <el-tab-pane label="通用参数" name="first">
                <div class="thead">
                  <el-col :span="5" class="td"><span>参数名称</span></el-col>
                  <el-col :span="5" class="td"><span>参数类型</span></el-col>
                  <el-col :span="8" class="td"><span>参数值</span></el-col>
                  <el-col :span="6" class="td"><span>说明</span></el-col>
                </div>
                <div class="tbody">
                  <div class="trow">
                      <el-col :span="5" class="td"><span>LANGUAGE</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="language"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>英语/中文</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>appid</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="appid"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>应用ID</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>appname</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="appname"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>应用名称</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>apptype</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="apptype"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>应用类型</span></el-col>
                  </div>
                   <div class="trow">
                      <el-col :span="5" class="td"><span>appversion</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="appversion"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>应用版本</span></el-col>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="网络参数" name="second">
                <div class="thead">
                  <el-col :span="5" class="td"><span>参数名称</span></el-col>
                  <el-col :span="5" class="td"><span>参数类型</span></el-col>
                  <el-col :span="8" class="td"><span>参数值</span></el-col>
                  <el-col :span="6" class="td"><span>说明</span></el-col>
                </div>
                <div class="tbody">
                  <div class="trow">
                      <el-col :span="5" class="td"><span>Outer_Service_Vlanid</span></el-col>
                      <el-col :span="5" class="td"><span>整数</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="out_vid"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>Outer_Service_Vlanid</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>Outer_Service_IP</span></el-col>
                      <el-col :span="5" class="td"><span>IPV4</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="out_ip"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>Outer_Service_IP</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>Outer_Service_IPPool_Mask</span></el-col>
                      <el-col :span="5" class="td"><span>IPV4</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="out_ip_mask"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>Outer_Service_IPPool_Mask</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>Outer_Service_IPPool_Gateway</span></el-col>
                      <el-col :span="5" class="td"><span>IPV4</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="out_getway"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>Outer_Service_IPPool_Gateway</span></el-col>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="实例参数" name="third">
                <div class="thead">
                  <el-col :span="5" class="td"><span>参数名称</span></el-col>
                  <el-col :span="5" class="td"><span>参数类型</span></el-col>
                  <el-col :span="8" class="td"><span>参数值</span></el-col>
                  <el-col :span="6" class="td"><span>说明</span></el-col>
                </div>
                <div class="tbody">
                  <div class="trow">
                      <el-col :span="5" class="td"><span>VideoInsight_NUMBER</span></el-col>
                      <el-col :span="5" class="td"><span>整数</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="dockernumber" placeholder="最小值"></el-input></span>~<span><el-input v-model="dockernumbermax" placeholder="最大值"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>VideoInsight容器数量</span></el-col>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="VI 应用参数" name="fourth">
                        <div class="thead">
                  <el-col :span="5" class="td"><span>参数名称</span></el-col>
                  <el-col :span="5" class="td"><span>参数类型</span></el-col>
                  <el-col :span="8" class="td"><span>参数值</span></el-col>
                  <el-col :span="6" class="td"><span>说明</span></el-col>
                </div>
                <div class="tbody">
                  <div class="trow">
                      <el-col :span="5" class="td"><span>sysPassword</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="syspwd"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>系统密码</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>sysPassword1</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="syspwd1"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>系统密码确认</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>userPassword</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="userpwd"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>用户密码</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>userPassword1</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="userpwd1"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>用户密码确认</span></el-col>
                  </div>
                   <div class="trow">
                      <el-col :span="5" class="td"><span>tname</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="tname"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>tname</span></el-col>
                  </div>
                   <div class="trow">
                      <el-col :span="5" class="td"><span>tValidityPeriod</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="tValidityPeriod"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>tValidityPeriod</span></el-col>
                  </div>
                  <div class="trow">
                      <el-col :span="5" class="td"><span>certificatePassword</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="certificatePassword"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>证书密码</span></el-col>
                  </div>
                   <div class="trow">
                      <el-col :span="5" class="td"><span>keyLentgth</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="keyLentgth"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>keyLentgth</span></el-col>
                  </div>
                   <div class="trow">
                      <el-col :span="5" class="td"><span>vi_language</span></el-col>
                      <el-col :span="5" class="td"><span>字符串</span></el-col>
                      <el-col :span="8" class="td"><span><el-input v-model="vi_language"></el-input></span></el-col>
                      <el-col :span="6" class="td"><span>VI应用语言:0-英语，1-中文</span></el-col>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- <el-table :data="sendtable" tooltip-effect="dark" border ref="multipleTable" style="width: 90%;margin:10px auto" >
            <el-table-column prop="name" align="center" label="参数名称">
            </el-table-column>
            <el-table-column align="center" label="参数值">
              <template slot-scope="scope">
               <div v-if="scope.$index == 0">
                 <el-input v-model="dockernumber"></el-input>
               </div>
               <div v-if="scope.$index == 1">
                 <el-input v-model="dockername"></el-input>
               </div>
               <div v-if="scope.$index == 2">
                 <el-slider v-model="ziyuan"></el-slider>
               </div>
               <div v-if="scope.$index == 3"></div>
              </template>
            </el-table-column>
            <el-table-column prop="info" align="center" label="说明">
            </el-table-column>
          </el-table> -->
            <el-button style="margin: 12px 70px  0 0;float:right" @click="next" align="right">下一步</el-button>
            <el-button style="margin: 12px 10px 0 0;float:right" @click="prev" align="right">上一步</el-button>
        </div>
        <div class="" v-show="active == 3"  v-loading="loading" element-loading-text="流程检查中"  element-loading-background="rgba(0, 0, 0, 0.8)"  element-loading-spinner="el-icon-loading">
          <el-table :data="liuchengtable" tooltip-effect="dark" border ref="multipleTable" style="width: 90%;margin:10px auto" >
            <el-table-column type="index" align="center" label="序号">
            </el-table-column>
            <el-table-column prop="name" align="center" label="检查项">
            </el-table-column>
            <el-table-column  prop="status" align="center" label="状态">
              <template slot-scope="scope">
                <div>
                  <i v-if="scope.row.status == '1'" class="el-icon-warning warningcolor"></i> <i v-if="scope.row.status !== '1'" class="el-icon-warning successcolor" ></i>{{scope.row.status == '1'?"待检测":"通过"}}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-button style="margin: 12px 70px  0 0;float:right" @click="next" align="right">下一步</el-button>
          <el-button style="margin: 12px 10px 0 0;float:right" @click="prev" align="right">上一步</el-button>
        </div>
        <div class="" v-show="active == 4">
         <el-table :data="jindutable" tooltip-effect="dark" border ref="multipleTable" style="width: 90%;margin:10px auto" >
            <el-table-column type="index" align="center" label="#">
            </el-table-column>
            <el-table-column prop="name" align="center" label="容器名称">
            </el-table-column>
            <el-table-column prop="info" align="center" label="进度">
              <template slot-scope="scope">
                <div>
                  <el-progress :percentage="scope.row.jindu" status="success"></el-progress>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-button style="margin: 12px 70px;float:right" @click="saveImage" align="right">完成</el-button>
        </div>
        
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: 1,
        dockernumber:1,
        activeName:"first",
        dockername:"自动",
        dockernumbermax:"",
        loading:false,
        ziyuan:50,
        selectImage:[],
        sendtable:[{
          name:"创建数据量",
          info:"创建容器个数"
        },{
          name:"容器名称",
          info:"容器名称"
        },{
          name:"资源配置",
          info:"指定容器实际分配的硬件资源"
        },{
          name:"时间计划",
          info:"容器自动启停的时间计划"
        }],
        liuchengtable:[{
          name:"配置参数检查",
          status:"1"
        },{
          name:"容器镜像检查",
          status:"1",
        },{
          name:"网络检查",
          status:"1"
        },{
          name:"节点资源检查",
          status:"1"
        }],
        jindutable:[],
      };
    },

    methods: {
      next() {
        debugger
         if(this.selectImage.length < 1){
          this.$message({
            message: '请选择一个镜像',
            type: 'warning'
          });
           return false;
         } 
          if (this.active == 3){
            this.loading = true;
            setTimeout(()=>{
              this.loading = false;
              if(this.active == 3){
                if(this.dockernumber > 0) {
                  for(let i = 0; i < this.dockernumber; i++) {
                    let data = {
                      name:`GPU${this.$moment().format('HHmmss')}`,
                      ziyuan:`${this.ziyuan}%`,
                      jindu:80
                    }
                    // this.liuchengtable.push(data)
                    this.jindutable.push(data)
                  
                  }
                  this.selectImage.map(ele => {
                      ele.dockers =  this.jindutable;
                  })
                }
                this.active++
              }
            },2000)
            return false
          } 
          if (this.active++ > 3) this.active = 1;
      
      },
      prev(){
       if(this.active-- < 2) {
         this.active = 1
       } 
      },
      getImageData(){
         var tData = localStorage.getItem("imageData")?localStorage.getItem("imageData"):[];
         this.tableData = JSON.parse(tData)
      },
     handleSelectionChange(val){
       this.selectImage = val;
     },
     saveImage(){
       this.active = 1;
       this.tableData.map(ele => {
         this.selectImage.map(sel => {
           if (ele.filename == sel.filename) {
             ele = sel
           }
         })
       })
      let storeData = JSON.stringify( this.tableData);
      localStorage.setItem("imageData",storeData)
     },
    },
    mounted(){
      this.getImageData();
    }
  }
</script>

<style lang="stylus" scoped>
.imagebox{
  overflow hidden
}
.stepbox{
  width 100%
  overflow hidden
  margin-top 5vh
}
.settingbox{
  width 90%;
  margin 5vh auto;
  min-height 70vh
}
.sendboxtale{
  width 90%
  margin 0 auto;
  .thead{
    color #666
    border 1px solid #c0c0c0
    height 35px
    line-height 35px
    text-align:center
    span{
      display inline-block;
      width 100%
    }
    .td{
      border-right:1px solid #c0c0c0;
    }
    .td:last-child{
       border-right:0;
    }
  }
  .tbody .td{
    text-align:center
  }
 .tbody .td{
    border-right:1px solid #c0c0c0;
 }
  .tbody .td:last-child{
    border-right:0
  }
 .tbody span{
    display inline-block;
    height 35px
    line-height 35px
    color #666
 }
.tbody span:nth-child(2){
      padding 0 20px
    }
 .tbody {
     border 1px solid #c0c0c0
     overflow hidden
     border-top 0
 }
 .trow{
   border-bottom 1px solid #c0c0c0
   overflow hidden
 }
 .trow:last-child{
   border 0
 }
 .warningcolor{
   color #e6a23c!important
 }
 .successcolor{
   color #5c887a!important
 }
}
</style>