关注《大前端从入门到跑路》，有惊喜哦
发简信
IP属地：福建
我的PACKAGE文件{"name": "csb","version": "1.0.0","description": "混合云","author": "davis","pr...
ec2list----4
<script type="text/javascript">
import PageNation from '../components/PageNation'
import TopFilter from "../components/resource/TopFilter"
export default{
components: {
PageNation,
TopFilter
},
data:function(){
return{
selectId: {instanceId:"fe06d1ba-e64b-47f4-818c-a90f0aa22f05"},
ec2List:
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
ec2list-----3
<td style="min-width:100px;">{{item.region | regionFmt}}</td>
<td style="min-width:60px;"><i :title="item.vendor" class="icon" :class="item.vendor"></i></td>
<td style="min-width:80px;">{{item.publicIP!=null&&item.publicIP!=''?item.publicIP:'无'}}</td>
<td style="min-width:80px;">{{item.privateIP!=null&&item.privateIP!=''?item.privateIP:'无'}}</td>
<td style="min-width:150px;" :title="item.remark" ><div class="nowrap">{{item.remark!=null&&item.remark!=''?item.remark:"无"}}</div></td>
</tr>
<tr v-if="ec2List.length===0">
<td colspan="9" style="text-align:center">
列表无数据
</td>
</tr>
</tbody>
</table>
<div class="m-t">
<page-nation @setPage="setPageValue" :dataList="ec2List" :pageSize="10"></page-nation>
</div>
</div>
</template>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
EC2lits------2
<table class="table m-t3" v-loading="isTableLoad">
<thead>
<tr >
<th></th>
<th>资源名称/ID</th>
<th>运行状态</th>
<th>规格</th>
<th>地区</th>
<th>供应商</th>
<th>公有IP</th>
<th>私有IP</th>
<th>备注</th>
</tr>
</thead>
<tbody id="tbody" class="table-tbody" >
<tr v-for="(item, index) in newEc2List" :class="{checked:item.uid === selectId.instanceId}">
<td style="width:8px;padding-left:30px;"><span><el-radio :label="item.instanceId" class="radio"> </el-radio></span></td>
<td style="min-width:150px;"><span><a class="t-blue nowrap">{{item.resourceName}}</a></span><div :title="item.instanceId" class="nowrap">{{item.instanceId}}</div></td>
<td style="min-width:100px;" class="status" :id="item.instanceId"><i class="i-round" :class="{'i-bg-organ':item.status!=='运行中','i-bg-red':item.status==='创建失败'}"></i>{{item.status}}<i :class="{'showCircle':item.status!=='运行中'&&item.status!=='已关机'&&item.status!=='缺失'&&item.status!=='可用'&&item.status!=='创建失败'}"></i><span class="t-gray" style="display:block;margin-left:18px;">{{item.middleStatus}}</span></td>
<td style="min-width:100px;">{{item.resourcesSpec}}</td>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
EC2lIST--------
<template>
<div>
<div class="bread-nav">
<div class="bread-body">
<div class="pull-right" style="position:relative;z-index:10;"><a style="width:120px;" class="csb-btn csb-btn-orange csb-btn-rad4" href="#/resource/buy/step-one"><i class="icon icon20 icon-car"></i>购买EC2</a></div>
<span>资源管理>EC2</span>
</div>
</div>
<top-filter :optionData="oldEc2List" @setFilter="setFilterData"></top-filter>
<div class="m-l-r m-t">
<div class="btn-option" :class="{'disabled':ec2List.length===0}">
<a class="csb-btn csb-btn-rad4 m-r" ><i class="icon icon18 icon-link"></i>连接</a>
<a class="csb-btn csb-btn-rad4 m-r" ><i class="icon icon18 icon-close"></i>关机</a>
<a class="csb-btn csb-btn-rad4 m-r" ><i class="icon icon18 icon-open"></i>开机</a>
<a class="csb-btn csb-btn-rad4 m-r" ><i class="icon icon18 icon-reset"></i>重启</a>
<a class="csb-btn csb-btn-rad4 m-r" ><i class="icon icon18 icon-cancel"></i>删除</a>
<div class="csb-btn csb-btn-rad4 m-r" style="width:120px;position:relative"><i class="icon icon18 icon-more"></i>更多操作 <i :class="showSelect?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
<ul v-if="showSelect" class="select-ul" style="position:absolute;top:38px;width:128px;">
<li>制作镜像</li>
<li style="color:#999" title="新功能未开放">加入Auto Scaling</li>
<li style="color:#999" title="新功能未开放">更改安全组</li>
<li>更改资源名称</li>
<li>更改备注</li>
<li>查看监控</li>
<li>绑定EIP</li>
<li>解绑EIP</li>
<li>网卡管理</li>
</ul>
</div>
</div>
</div>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
pageTion---4
watch : {
currentPage () {
//复位
if(this.currentPage>this.pageNumbers.length){
this.currentPage=this.pageNumbers.length;
}else if(this.currentPage<1){
this.currentPage=1;
}
//计算页码显示范围
if(this.currentPage>=this.front_lastPage){
this.front_startPage=this.front_lastPage+this.offset*(Math.floor((this.currentPage-this.front_lastPage)/this.offset))>this.pageNumbers.length-2*this.offset?this.front_startPage:this.front_lastPage+this.offset*(Math.floor((this.currentPage-this.front_lastPage)/this.offset));
this.front_lastPage=this.front_startPage+this.offset;
}else if(this.currentPage<=this.front_startPage){
this.front_startPage=this.currentPage-this.offset<=1?1:this.currentPage-this.offset;
this.front_lastPage=this.front_startPage+this.offset;
}
this.$emit('setPage',this.currentPageList())
},
dataList () {
//alert(this.currentPage <= this.pageNumber ? this.currentPage : this.pageNumber);
if(this.dataList.length===0)
this.currentPage=1;
else if(this.currentPage > this.pageNumber)
this.currentPage = this.pageNumber;
this.$emit('setPage',this.currentPageList())
}
},
mounted:function(){
this.$emit('setPage',this.currentPageList())
}
}
</script>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
pageTion---3
methods:{
jumpPage:function(){
if(this.jumpNum==='' ||isNaN(this.jumpNum)){
this.$message("请输入合法页码！");
return
}
this.currentPage=parseInt(this.jumpNum);
},
onPagerClick(event){
const target = event.target;
if (target.tagName === 'UL' || event.target.textContent==='···') {
return;
}
let newPage = Number(event.target.textContent)
this.currentPage = newPage
},
pagePrev(){
if(this.currentPage === 1){
return
} else {
this.currentPage --
}
},
pageNext(){
if(this.currentPage === this.pageNumber){
return
} else {
this.currentPage ++
}
},
currentPageList(){
let newList = [];
if(this.dataList.length === 0)
return newList;
if(this.pageNumber === 0)
return newList;
var begin = (this.currentPage-1)*this.pageSize;
var end = this.currentPage*this.pageSize;
//如果是尾页，需要注意不能越界
if(this.currentPage === this.pageNumber){
end = this.total;
}
for (let i=begin;i<end;i++){
newList.push(this.dataList[i]);
}
return newList;
}
},
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
pagetion-----2
<script>
export default {
props: {
dataList: Array ,
pageSize:{
type: Number,
default: 10
},
},
data(){
return {
currentPage: 1,
front_startPage:1,
front_lastPage:4,
min:9,
offset:4,
jumpNum:1
}
},
computed:{
total(){
return this.dataList.length
},
pageNumber(){
return Math.ceil(this.total/this.pageSize)
},
pageNumbers () {
let newNumbers = []
for(var i=1;i<=this.pageNumber;i++){
newNumbers.push(i)
}
return newNumbers
}
},
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
pageTion---1
<template>
<div class="el-pagination" v-if="total>0">
<button type="button" @click="pagePrev" :class="{disabled: currentPage === 1}" class="btn-prev el-icon el-icon-arrow-left">
</button>
<ul style="margin-left:-4px;margin-right:-4px;" class="el-pager" @click="onPagerClick">
<li v-for="page in pageNumbers" :class="{ active: currentPage === page }" class="number"
v-if="pageNumbers.length-currentPage>=2*offset && page>=front_startPage && page<=front_lastPage"
>{{page}}</li>
<li v-if="pageNumbers.length-currentPage>2*offset">···</li>
<li v-for="page in pageNumbers" :class="{ active: currentPage === page }" class="number"
v-if="pageNumbers.length-currentPage>=2*offset && page>pageNumbers.length-offset"
>{{page}}</li>
<li v-for="page in pageNumbers" :class="{ active: currentPage === page }" class="number"
v-if="pageNumbers.length-currentPage<2*offset && page>=pageNumbers.length-2*offset"
>{{page}}</li>
</ul>
<button type="button" @click="pageNext" :class="{disabled: currentPage === pageNumber}" class="btn-next el-icon el-icon-arrow-right"></button>
<span v-if="pageNumbers.length>=2*offset+2" class="el-pagination__jump">前往<input type="number" min="1" value="1" number="true" class="el-pagination__editor" v-model="jumpNum" v-on:keyup.enter="jumpPage">页 <a style="margin-left:10px">共 {{total}} 条</a></span>
<span v-else><a style="margin-left:10px">共 {{total}} 条</a></span>
</div>
</template>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
topFilter----3
filterList: function (para) {
let index = []
let newList = []
for (let i=0;i<this.optionData.length;i++){
let sum = 0
for (let k=0;k<para.length;k++){
if(para[k].key === 'search_val'){
if(para[k].value.trim().length === 0){
sum++
} else if(this.isSearch(i,para[k].value)) {
sum++
}
} else if(para[k].key === 'status' && para[k].value === '其他'){
var statusNum = 0
for(var j=0;j<this.optionStatus.length;j++){
if(this.optionStatus[j].value!=='' && this.optionStatus[j].value!=='其他' && this.optionData[i][para[k].key] !== this.optionStatus[j].value){
statusNum++
}
}
if(statusNum === (this.optionStatus.length-2)){
sum++
}
} else if(this.optionData[i][para[k].key].search(para[k].value)!==-1 ){
sum++
}
}
if(sum === para.length){
index.push(i)
}
}
for (let j=0;j<index.length;j++){
newList.push(this.optionData[index[j]])
}
return newList
}
},
mounted () {
this.getVendorsF();
this.setFilter();
},
watch:{
vendor: function (val) {
this.getRegionsF()
this.setFilter()
},
region: function() {
this.setFilter()
},
status: function() {
this.setFilter()
},
searchValue: function(val) {
this.setFilter()
},
optionData:{
handler:function(newVal,oldVal) {
// if(this.$utils.common.isNone(oldVal)){
// return
// } else {
// this.setFilter()
// }
this.setFilter();
},
deep:true
},
timeValue: function(val){
this.$emit("getMonitorByTime",val)
}
}
}
</script>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
topFilter----2
computed:{
getStatus(){
return this.statusList
}
},
methods: {
getVendorsF: function () {
this.$http.get(this.$api.api.mark.getVendors).then(
function (res) {
this.getVendors = res.data.vendors
this.getVendors.unshift({key: '', name: '全部供应商'})
this.vendor = this.getVendors[0].key
if(this.defaultVendor !== ''){
this.vendor = this.defaultVendor
}
let para = this.$getParaByUrl(this.$route)
for(var i=0;i<para.length;i++){
if(para[i].key === 'vendor'){
this.vendor = para[i].value
}
if(para[i].key === 'status'){
this.status = para[i].value
}
}
}
)
},
getRegionsF: function () {
this.$http.get(this.$api.api.mark.getRegion, {params: {vendor: this.vendor}}).then(
function (res) {
this.getRegions = res.data.regions
this.getRegions.unshift({value: '', name: '全部地区'})
this.region = this.getRegions[0].value
}
)
},
setFilter: function () {
let para = []
if(this.showVendor===true && this.vendor !== ''){
para.push({key:'vendor',value:this.vendor})
}
if(this.region !== ''){
para.push({key:'region',value:this.region})
}
if(this.status !== ''){
para.push({key:'status',value:this.status})
}
para.push({key:'search_val',value:this.searchValue})
this.$emit('setFilter',this.filterList(para))
},
isSearch:function(num,val){
for(let i=0;i<this.searchKey.length;i++){
if(this.optionData[num][this.searchKey[i]] && this.optionData[num][this.searchKey[i]].search(val) !==-1){
return true
}
}
return false
},
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
topFilter-----1
<script>
export default {
data () {
return {
getVendors:[],
vendor: '',
getRegions:[{value: '', name: '全部地区'}],
region: '',
status: '',
searchValue: '',
timeValue:'1',
statusList:[
{value: '', label: '全部状态'},
{value:"运行中", label:"运行中"},
{value:"其他", label:"其他"}
],
times:[
{value:"1",label:'近1小时'},
{value:"3",label:"近3小时"},
{value:"12",label:"近12小时"}
],
}
},
props: {
optionStatus: {
type: Array,
default:function (){
return this.statusList
}
},
optionData: {
type: Array
},
searchKey: {
type: Array,
default:function(){
return ['resourceName']
}
},
showStatus: {
type: Boolean,
default: true
},
showVendor: {
type: Boolean,
default: true
},
showRegion: {
type: Boolean,
default: true
},
showSearch:{
type:Boolean,
default:true
},
showTime: {
type: Boolean,
default: false
},
bgClass: {
type: String,
default: 'bg-white'
},
defaultVendor: {
type: String,
default: ''
}
},
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
topFilter-----
<template>
<div class="border-t">
<div class="csb-box" :class="bgClass">
<div class="pull-right" v-show="showSearch"><slot><el-input v-model="searchValue" class="radius-4 w-240" placeholder="输入搜索关键字" icon="search"></el-input></slot></div>
<el-select class="input-width-160 m-r" v-if="showVendor" placeholder="全部供应商" v-model="vendor">
<el-option v-for="item in getVendors" :key="item.key" :label="item.name" :value="item.key"></el-option>
</el-select>
<el-select class="input-width-160 m-r" v-if="showRegion" placeholder="全部地区" v-model="region" >
<el-option v-for="item in getRegions" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
<el-select class="input-width-160 m-r" v-if="showStatus" placeholder="全部状态" v-model="status" >
<el-option v-for="item in optionStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-if="showTime" placeholder="选择时间" v-model="timeValue" >
<el-option v-for="item in times" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select><a class="csb-btn csb-btn-rad4" style="width:36px;padding:9px 8px;position:relative;top:-2px;"><i title="同步供应商数据信息" class="icon icon18 icon-refresh"></i></a>
</div>
</div>
</template>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
navlist----------------3
<script>
import { mapState } from 'vuex'
export default {
name: 'nav-list',
data () {
return {
isCurrent: '',
isTopCurrent:'',
showApp: false,
appIndex:0,
current: -1,
isMenuOpen: true,
currentPower:{},
isTestDev:''
}
},
computed: {
},
methods: {
setCurrent: function (val,event,topVal) {
this.isCurrent = val
if(topVal){
this.isTopCurrent = topVal
} else {
this.isTopCurrent = ''
}
}
},
mounted() {
}
}
</script>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
navlist------------2
<li class="nav-evel2" ><a><i title="监控" class="icon icon-monitor"></i><span>监控</span></a>
<ul class="nav-evel3-s2 clearfloat">
<li @click="setCurrent('monitorEC2', $event)" :class="'monitorEC2'===isCurrent?'current':''"><a><span>EC2</span></a></li>
<li @click="setCurrent('monitorRds', $event)" :class="'monitorRds'===isCurrent?'current':''"><a><span>RDS</span></a></li>
</ul>
</li>
<li class="nav-evel2" @click="setCurrent('alarms', $event)" :class="'alarms'===isCurrent?'current':''"><a><i title="告警" class="icon icon-alarm"></i><span>告警</span></a></li>
<li class="nav-evel2" @click="setCurrent('stockManagement', $event)" :class="'stockManagement'===isCurrent?'current':''"><a><i title="托管资源管理" class="icon icon-stock"></i><span>托管资源管理</span></a></li>
<li class="nav-evel2" @click="setCurrent('power', $event)" :class="'power'===isCurrent?'current':''"><a><i title="权限管理" class="icon icon-power"></i><span>权限管理</span></a></li>
</ul>
</div>
</div>
</template>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
navlist----------1
<div>
<ul class="side-nav" style="position:relative;z-index:1;">
<li class="nav-evel1"><a><span >csb-default</span><em ><i class="icon icon-resource-small"></i></em></a>
</li>
</ul>
<div class="fix-nav-content">
<ul class="side-nav">
<li class="nav-evel2" @click="setCurrent('bill', $event)" :class="'bill'===isCurrent?'current':''"><a><i class="icon icon-bill" title="APP账单"></i><span>APP账单</span></a></li>
<li class="nav-evel2" :class="'resource'===isTopCurrent?'current':''"><a><i title="资源" class="icon icon-resource"></i><span>资源</span></a>
<ul class="nav-evel3-s2 clearfloat">
<li @click="setCurrent('EC2', $event,'resource')" :class="'EC2'===isCurrent?'current':''"><a><span>EC2</span></a></li>
<li @click="setCurrent('RDS', $event,'resource')" :class="'RDS'===isCurrent?'current':''"><a><span>RDS</span></a></li>
<li @click="setCurrent('EIP', $event,'resource')" :class="'EIP'===isCurrent?'current':''"><a><span>EIP</span></a></li>
<li @click="setCurrent('ELB', $event,'resource')" :class="'ELB'===isCurrent?'current':''"><a><span>ELB</span></a></li>
<li @click="setCurrent('IMG', $event,'resource')" :class="'IMG'===isCurrent?'current':''"><a><span>IMG</span></a></li>
</ul>
</li>
<li class="nav-evel2" @click="setCurrent('autolist', $event)" :class="'autolist'===isCurrent?'current':''"><a><i title="Auto Scaling" class="icon icon-auto"></i><span>Auto Scaling</span></a></li>
test如何写main.js // The Vue build version to load with the `import` command // (runtime-only ...
