<template>
<div>
<el-container>
<el-header>华为云节点任务部署</el-header>
<el-main>
<!--上面的下拉框们-->
<!--组节点下拉框-->
<el-select id="group" v-model="group_value" placeholder="请选择" >
<el-option
v-for="item in group_options"
:key="item.group_value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<!--节点下拉框-->
<el-select v-model="node_value" placeholder="请选择">
<el-option
v-for="item in node_options"
:key="item.node_value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<!--起节点-->
<el-select v-model="start_value" placeholder="请选择">
<el-option
v-for="item in start_options"
:key="item.start_value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<!--止节点-->
<el-select v-model="stop_value" placeholder="请选择">
<el-option
v-for="item in stop_options"
:key="item.stop_value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<!--按钮-->
<el-button icon="el-icon-d-arrow-right" type="primary" @click="transferValue"></el-button>
<!--下面的表格-->
<el-table
:data="tableData3"
border
style="width: 80%">
<el-table-column
prop="group_value"
label="软件名">
</el-table-column>
<el-table-column
prop="node_value"
label="节点名">
</el-table-column>
<el-table-column
prop="start_value"
label="起始节点">
</el-table-column>
<el-table-column
prop="stop_value"
label="截止节点">
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'index',
watch: {
group_value: function(newV, oldV) {
// this.group_present=oldV;
this.group_present=newV
},
node_value: function(newV, oldV) {
// this.group_present=oldV;
this.node_present=newV
},
start_value: function(newV, oldV) {
// this.group_present=oldV;
this.start_present=newV
},
stop_value: function(newV, oldV) {
// this.group_present=oldV;
this.stop_present=newV
},
},
data() {
return {
//点击按钮后把下拉框的值都获取到
group_present:'',
node_present:'',
start_present:'',
stop_present:'',
result2:[],
result:[],
tableData: [],
//用来push的tabledata
tableData2:[],
tableData3:[],
//组节点下拉框值
group_options: [{
group_value: '选项1',
label: 'Geoeast'
}, {
group_value: '选项2',
label: 'Pardiam'
}, {
group_value: '选项3',
label: 'WCC'
}],
group_value: '',
//节点下拉框值
node_options: [{
node_value: '选项1',
label: 'hwnode'
}, {
node_value: '选项2',
label: 'hwgnode'
}],
node_value: '',
//起节点下拉框值
start_options: [{
start_value: '选项1',
label: '1'
}, {
start_value: '选项2',
label: '2'
}, {
start_value: '选项3',
label: '3'
}],
start_value: '',
//止节点下拉框值
stop_options: [{
stop_value: '选项1',
label: '4'
}, {
stop_value: '选项2',
label: '5'
}, {
stop_value: '选项3',
label: '6'
}],
stop_value: ''
}
},
methods:{
transferValue(){
this.result.push({'group_value':this.group_present})
this.result.push({'node_value':this.node_present})
this.result.push({'start_value':this.start_present})
this.result.push({'stop_value':this.stop_present})
console.log(this.group_present)
console.log(this.node_present)
console.log(this.start_present)
console.log(this.stop_present)
console.log(this.result)
var res=JSON.stringify(this.result)
this.result.splice(0,4)
console.log("删除后的result:")
console.log(this.result)
console.log("没格式转换前的res:")
console.log(res)
//res2是转换后的
var res2=this.format(res)
console.log(res2)
this.tableData.push(res2)//push只能push字符串
console.log(this.tableData)
this.tableData2=JSON.parse(this.tableData)
this.tableData3=this.tableData3.concat(this.tableData2)
this.tableData.splice(0,4)
console.log(this.tableData3)
},
format(res){
var a=res.split(",");
var a1=a[0].substring(0,a[0].length-1)
var a2=a[1].substring(1,a[1].length-1)
var a3=a[2].substring(1,a[2].length-1)
var a4=a[3].substring(1,a[2].length)
var res2=a1+","+a2+","+a3+","+a4
return res2
}
}
}
</script>
<style scoped>
.el-container{
height: 600px;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
/*text-align: center;*/
height:100%;
}
.el-select{
margin-right: 1%;
}
.el-table{
width: 71%!important;
margin: 0 auto;
margin-top: 1%;
}
</style>
09-28
673