<template>
<div class="page-data">
<page-table
tabIndex
:is-level="tableInfo.isLevel"
:api-url="tableInfo.url"
:refresh="tableInfo.refresh"
:data.sync="tableInfo.data"
:query="filterInfo.query"
:list-type-info="listTypeInfo"
:init-curpage="tableInfo.initCurpage"
:field-list="tableInfo.fieldList"
:handle="tableInfo.handle"
@handleClick="handleClick"
>
<!--ID/名称-->
<template v-slot:col-instanceName="scope">
<p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
<p class="table-p">{{scope.row.instanceName}}</p>
</template>
<!--实例配置-->
<template v-slot:col-diskType="scope">
<p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
<p class="table-p">系统盘：{{scope.row.diskType}}</p>
<p class="table-p">网络：{{scope.row.net}}</p>
</template>
<!--主IPv4地址-->
<template v-slot:col-publicAddress="scope">
<p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
<p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
</template>
<!--到期时间-->
<template v-slot:col-expiredTime="scope">
<p class="table-p">{{scope.row.instanceChargeType}}</p>
<p class="table-p">{{scope.row.expiredTime}}到期</p>
</template>
</page-table>
<div
class="ACContent"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
<el-table-column prop="stCode" label="ID/名称" width="150">
<template slot-scope="scope">
<router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
<div style="font-size:10px">{{scope.row.instanceName}}</div>
</template>
</el-table-column>
<el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
<el-table-column prop="zone" label="可用区" width="120"></el-table-column>
<el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.instanceType}}
</template>
</el-table-column>
<el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
<template slot-scope="scope">
<p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
<p class="table-p">系统盘：{{scope.row.diskType}}</p>
<p class="table-p">网络：{{scope.row.net}}</p>
</template>
</el-table-column>
<el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
<template slot-scope="scope">
<p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
<p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
</template>
</el-table-column>
<el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
<template slot-scope="scope">
<p class="table-p">{{scope.row.instanceChargeType}}</p>
<p class="table-p">{{scope.row.expiredTime}}到期</p>
</template>
</el-table-column>
<el-table-column prop="parentProject" label="所属项目" width="100">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope" width="220">
<span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>
<router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
<router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
</template>
</el-table-column>
</el-table> -->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="60%"
>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<!-- <el-form-item prop="email" label="邮箱" :rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item> -->
<el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
<el-col span="12">
<el-form-item prop="name" label="名字">
<el-input v-model="item.name"></el-input>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item prop="email" label="邮箱">
<el-input v-model="item.email"></el-input>
</el-form-item>
</el-col>
<el-button @click.prevent="removeRow(domain)">删除</el-button>
</el-row>
<!-- <el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- <el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:current-page="pageCurrent"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin-top:10px;"
></el-pagination> -->
</div>
</div>
</template>
<script>
import { message } from "./../../util/item";
export default {
data() {
return {
//搜索相关
filterInfo: {
query: {
regionId:"ap-chengdu"
}
},
//表格相关
tableInfo: {
url: this.nozzle.instanceInfoList, //接口地址
refresh: 1,
isLevel: true,
initCurpage: 1,
data: [
// {
// "instanceId": "ins-ctpq7oqv",
// "instanceName": "activity-cvm-2020-08-07",
// "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
// "instanceState": "运行中",
// "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
// "instanceStandard": "标准型SA2.LARGE16",
// "restrictState": "NORMAL",
// "regionId": "ap-chengdu",
// "region": "成都",
// "zone": "成都1区",
// "osName": "CentOS 7.2 64bit",
// "cpu": 4,
// "internetMaxBandwidthOut": 1,
// "diskType": "高性能云硬盘",
// "net": "西南成都VPC|10.0.0.0/16",
// "publicAddress": [
// "119.27.160.75"
// ],
// "privateAddress": [
// "10.0.0.17"
// ],
// "instanceChargeType": "包年包月",
// "parentProject": "默认项目",
// "createdTime": "2020-08-07 23:14:47",
// "expiredTime": "2023-08-07 23:14:47",
// "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
// "subNetId": "subnet-athj26o1(成都)",
// "asVpcGateway": false,
// "imageId": "img-2x39h23l",
// "imageName": "139iso",
// "camRoleName": "",
// "keyIds": null,
// "tags": [],
// "memory": 16,
// "imageType": "自定义镜像",
// "internetChargeType": "按带宽包年包月计费"
// }
],
fieldList: [
{ label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
{ label: "状态", value: "instanceState", width: 70 },
{ label: "可用区", value: "zone", width: 100 },
{ label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
{ label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
{ label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
{ label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
{ label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
{ label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
],
handle: {
fixed: "right",
label: "操作",
width: "180",
btList: [
// { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
{ label: "查看详情", size: "small", type: "text", event: "detail", show: true },
{ label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
]
}
},
//列表相关
listTypeInfo: {
},
TableData: [], //表格数据
pageCurrent: 1, //分页默认显示页
total: 0, //分页上显示的数据总条数
pageSize: 10, //分页上显示的每页的条数
loading: false,
dialogVisible:false,
dynamicValidateForm: {
domains: [{
name: '',
mail:''
}],
email: ''
}
};
},
created(){
// this.getTableData()
},
mounted() {
// this.LoadAllProject();
this.tableInfo.refresh = Math.random();
},
methods: {
//点击事件
handleClick(event, data) {
switch(event) {
//查看详情
case "detail":
this.$router.push({
path:"/ServiceWatch/detail",
query:{
instanceId:data.instanceId,
instanceName:data.instanceName,
publicAddress:data.publicAddress[0]
}
});
break;
//查看监控
case "monitor":
this.$router.push({
path:"/ServiceWatch/serverMonitor",
query:{
instanceId:data.instanceId,
instanceName:data.instanceName,
publicAddress:data.publicAddress[0]
}
});
break;
}
},
removeRow(){
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
value: '',
key: Date.now()
});
},
bindMail(){
// console.log(11)
this.dialogVisible =true
},
//分页
sizeChange(val) {
// 改变每页的条数
this.pageSize = val;
this.getTableData();
},
currentChange(val) {
//改变页数
this.pageCurrent = val;
this.getTableData();
},
// 根据平台获取已配置的预警报警线 可选填站点
getTableData() {
this.loading = true;
this.TableData = [];
this.$http.post(this.nozzle.instanceInfoList, {
regionId:'ap-chengdu',
instanceId:"ins-ctpq7oqv"
}).then(res => {
this.loading = false;
if(res.data.code === 3000){
// this.$message({type:'warning',message:'网络差'})
this.$message({
message: "网络超时，请刷新后再次请求",
type: "error"
});
}
if(res.data.code === 200) {
if(res.data.data.length) {
this.TableData = res.data.data;
this.total = res.data.data.length;
}
}
})
},
}
};
</script>
<style scoped>
#AlarmConfiguration {
width: 100%;
height: 100%;
}
/* 顶部搜索 */
#ACTopSearchBox {
width: 100%;
height: 60px;
line-height: 60px;
text-align: left;
}
#ACTopSearchBox .el-input {
width: 250px;
margin: 0 10px;
}
/* 表格 */
#ACContent {
width: 100%;
height: calc(100% - 70px);
margin-top: 10px;
background: rgba(53, 53, 53, 0.5);
}
/* 弹窗 */
#DialogSearch {
width: 100%;
height: 60px;
line-height: 60px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: border-box;
text-align: left;
}
#DialogSearch .el-input {
width: 250px;
margin: 0 10px;
}
#DialogCentent {
width: 100%;
height: 600px;
}
/* 内层弹窗 */
.Dialog2List {
width: 100%;
height: 60px;
line-height: 60px;
box-sizing: border-box;
text-align: center;
}
.Dialog2List .el-input {
width: 217px;
}
.Dialog2ListName {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
color: white;
text-align: center;
}
.Dialog2ListButton {
height: 40px;
width: 100px;
display: inline-block;
line-height: 40px;
border-radius: 2px;
text-decoration: none;
color: rgb(0, 111, 255);
background: rgba(255, 255, 255, 0);
border: 1px solid rgb(0, 111, 255);
margin: 0 30px;
}
.Dialog2ListButton2 {
height: 40px;
width: 100px;
display: inline-block;
line-height: 40px;
border-radius: 2px;
text-decoration: none;
color: white;
background: rgb(0, 111, 255);
border: 1px solid rgb(0, 111, 255);
margin: 0 30px;
}
/* .table-p{
text-align:left;
line-height: 18;
font-size: 12px;
} */
</style>
<style >
.el-dialog__body {
padding-top: 0 !important;
}
</style>
