241 lines
9.8 KiB
Vue
241 lines
9.8 KiB
Vue
<template>
|
||
<div class="w100 h100">
|
||
<div v-if="activeName === '收益查看'">
|
||
<span style="display: inline-block;font-size: 14px;font-weight: 600;">计算方式：</span>
|
||
<el-select v-model="typeNum" @change="handleSelect">
|
||
<el-option key="1000" :value="'1000'" :label="'1000'">1000计算方式</el-option>
|
||
<el-option key="1024" :value="'1024'" :label="'1024'">1024计算方式</el-option>
|
||
</el-select>
|
||
</div>
|
||
<TableList ref="tabref" class="w100 h100" :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnRenderList="fnRenderList" @fnClick="callback">
|
||
<template #tempDay="{ valueKey, row, column }">
|
||
<span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime}}</span>
|
||
</template>
|
||
<template #tempMonth="{ valueKey, row, column }">
|
||
<span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime.slice(0, 7)}}</span>
|
||
</template>
|
||
<template #tempStatus="{ valueKey, row, column }">
|
||
<span v-if="row[valueKey] === '0'">未连通</span>
|
||
<span v-if="row[valueKey] === '1'">已连通</span>
|
||
</template>
|
||
<template #tempDiskStatus="{ row, column }">
|
||
<dict-tag :options="dict.type.disk_status" :value="row.status"/>
|
||
</template>
|
||
<template #tempOmountFlag="{ row, column }">
|
||
<dict-tag :options="dict.type.disk_omount_flag" :value="row.omountFlag"/>
|
||
</template>
|
||
</TableList>
|
||
<el-dialog title="相关数据" :visible.sync="listOpen" width="900px" append-to-body style="padding-bottom: 20px;">
|
||
<relevantData :rowDataList="rowDataList" @closeDialog="closeDialog"></relevantData>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableList from '@/components/table/index.vue';
|
||
import relevantData from '../../earnManage/server/relevantData'
|
||
import {diskIssuanceOperat, delDiskName} from "@/api/disRevenue/resource";
|
||
export default {
|
||
name: "serRegisTable",
|
||
dicts: ['disk_status', 'disk_omount_flag'],
|
||
components: {TableList, relevantData},
|
||
props: {
|
||
activeName: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
modelVal: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
clientId : {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
watch: {
|
||
activeName: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal && newVal !== oldVal) {
|
||
this.$nextTick(() => {
|
||
this.columnsList();
|
||
});
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
},
|
||
modelVal: {
|
||
handler(newVal) {
|
||
if (newVal && newVal.length > 0) {
|
||
this.queryParams = newVal[0].queryParams;
|
||
this.tableList = newVal[0].tableList;
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
typeNum: '1000',
|
||
// 列显隐信息
|
||
columns: {},
|
||
config: {},
|
||
tableList: [],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
},
|
||
listOpen: false,
|
||
rowDataList: {},
|
||
}
|
||
},
|
||
created() {
|
||
},
|
||
methods: {
|
||
handleSelect(val) {
|
||
this.$emit('fnPaging', {calculationMode: this.typeNum})
|
||
},
|
||
fnRenderList(val) {
|
||
this.$emit('fnPaging', Object.assign({}, this.modelVal[0].queryParams, {calculationMode: this.typeNum}));
|
||
},
|
||
closeDialog() {
|
||
this.listOpen = false;
|
||
},
|
||
columnsList() {
|
||
this.columns = {};
|
||
this.config = {};
|
||
if (this.activeName === '收益查看') {
|
||
// 列显隐信息
|
||
this.columns = {
|
||
id: {label: `ID`, width: '50'},
|
||
clientId: {label: `ClientID`, minWidth: '280', visible: true},
|
||
businessName: {label: `业务名称`, minWidth: '150', visible: true},
|
||
bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
|
||
bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '150', slotName: 'tempMonth',visible: true},
|
||
avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '150',slotName: 'tempDay',visible: true},
|
||
};
|
||
this.config = {
|
||
colHiddenCheck: true,
|
||
colTopHiddenIcon: true,
|
||
tableButton: {
|
||
line: [
|
||
{content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
|
||
]
|
||
}
|
||
};
|
||
} else if (this.activeName === '虚拟网卡信息') {
|
||
// 列显隐信息
|
||
this.columns = {
|
||
id: {label: `ID`, width: '50'},
|
||
clientId: {label: `clientID`, minWidth: '280'},
|
||
isp: {label: `运营商`, minWidth: '60', visible: true},
|
||
province: {label: `省`, minWidth: '60', visible: true},
|
||
city: {label: `市`, minWidth: '80',visible: true},
|
||
publicIp: {label: `公网地址`, minWidth: '100',visible: true},
|
||
ipv4Address: {label: `IPv4`, minWidth: '120',visible: true},
|
||
gateway: {label: `网关`, minWidth: '120',visible: true},
|
||
interfaceName: {label: `接口名称`, minWidth: '100',visible: true},
|
||
pingDropped: {label: `ping丢包率`, minWidth: '100',visible: true},
|
||
interfaceType: {label: `接口类型`, minWidth: '80',visible: true},
|
||
macAddress: {label: `MAC地址`, minWidth: '150',visible: true},
|
||
ipv6Address: {label: `IPv6`, minWidth: '100',visible: true},
|
||
status: {label: `连通状态`, minWidth: '100', slotName: 'tempStatus', visible: true},
|
||
};
|
||
this.config = {
|
||
colHiddenCheck: true, colTopHiddenIcon: true,
|
||
};
|
||
} else if (this.activeName === '网卡信息') {
|
||
// 列显隐信息
|
||
this.columns = {
|
||
id: {label: `ID`, width: '50'},
|
||
clientId: {label: `clientID`, minWidth: '280'},
|
||
isp: {label: `运营商`, minWidth: '60', visible: true},
|
||
province: {label: `省`, minWidth: '60', visible: true},
|
||
city: {label: `市`, minWidth: '80',visible: true},
|
||
publicIp: {label: `公网地址`, minWidth: '100',visible: true},
|
||
ipv4Address: {label: `IPv4`, minWidth: '120',visible: true},
|
||
gateway: {label: `网关`, minWidth: '150',visible: true},
|
||
interfaceName: {label: `接口名称`, minWidth: '100',visible: true},
|
||
interfaceType: {label: `接口类型`, minWidth: '100',visible: true},
|
||
macAddress: {label: `MAC地址`, minWidth: '150',visible: true},
|
||
ipv6Address: {label: `IPv6`, minWidth: '120',visible: true},
|
||
};
|
||
this.config = {
|
||
colHiddenCheck: true, colTopHiddenIcon: true,
|
||
};
|
||
} else if (this.activeName === '硬盘设备监控') {
|
||
// 列显隐信息
|
||
this.columns = {
|
||
id: {label: `ID`, width: '50'},
|
||
clientId: {label: `clientID`, minWidth: '280'},
|
||
name: {label: `磁盘名称`, minWidth: '80', visible: true},
|
||
serial: {label: `序列号`, minWidth: '120', visible: true},
|
||
total: {label: `总大小(GB)`, minWidth: '100',visible: true},
|
||
type: {label: `类型`, minWidth: '60',visible: true},
|
||
usedSpace: {label: `已用空间(GB)`, minWidth: '100',visible: true},
|
||
readSpeed: {label: `读速率(MB/s)`, minWidth: '100',visible: true},
|
||
writeSpeed: {label: `写速率(MB/s)`, minWidth: '100',visible: true},
|
||
healthInfo: {label: `硬盘健康度`, minWidth: '90',visible: true},
|
||
readIops: {label: `读IOPS`, minWidth: '70',visible: true},
|
||
writeIops: {label: `写IOPS`, minWidth: '70',visible: true},
|
||
status: {label: `状态`, minWidth: '50', slotName: 'tempDiskStatus', visible: true},
|
||
omountFlag: {label: `执行卸载`, minWidth: '80', slotName: 'tempOmountFlag', visible: true},
|
||
};
|
||
this.config = {
|
||
colHiddenCheck: true, colTopHiddenIcon: true,
|
||
tableButton: {
|
||
line: [
|
||
{content: '测试磁盘IOOS', fnCode: 'testIoos', type: 'primary', showName: 'status', showVal: '1'},
|
||
{content: '卸载', fnCode: 'uninstall', type: 'danger', showName: 'status', showVal: '0'},
|
||
{content: '删除记录', fnCode: 'delete', type: 'danger', showName: 'status', showVal: '0'},
|
||
]
|
||
}
|
||
};
|
||
}
|
||
this.$nextTick(() => {
|
||
if (this.$refs.tabref) {
|
||
this.$refs.tabref.tableKey++;
|
||
}
|
||
});
|
||
},
|
||
callback(result, rowData, selectChange, selectList) {
|
||
if (result && result.fnCode) {
|
||
switch (result.fnCode) {
|
||
case 'edit':
|
||
this.listOpen = true;
|
||
this.rowDataList = rowData;
|
||
break;
|
||
case 'testIoos':
|
||
let params = {id: rowData.id, clientId: this.clientId, name: rowData.name, processType: 1};
|
||
diskIssuanceOperat(params).then(res => {
|
||
this.$modal.msgSuccess("测试成功！");
|
||
this.$emit('diskTableData');
|
||
});
|
||
break;
|
||
case 'uninstall':
|
||
let paramsTow = {id: rowData.id, clientId: this.clientId, name: rowData.name, processType: 2};
|
||
diskIssuanceOperat(paramsTow).then(res => {
|
||
this.$modal.msgSuccess("卸载成功！");
|
||
this.$emit('diskTableData');
|
||
});
|
||
break;
|
||
case 'delete':
|
||
delDiskName(rowData.id).then(res => {
|
||
this.$modal.msgSuccess("删除成功！");
|
||
this.$emit('diskTableData');
|
||
});
|
||
break;
|
||
default:
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style>
|