|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<el-button
|
|
|
|
type="primary"
|
|
|
|
size="small"
|
|
|
|
plain
|
|
|
|
@click="handleAddClick"
|
|
|
|
>配置表头</el-button
|
|
|
|
>
|
|
|
|
<!-- <el-table :data="formData" style="width: 100%">
|
|
|
|
<el-table-column prop="name" label="名称" width="60" />
|
|
|
|
<el-table-column prop="key" label="key值" width="70" />
|
|
|
|
<el-table-column prop="width" label="宽度" width="50" />
|
|
|
|
<el-table-column label="操作" width="100">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<div class="button-group">
|
|
|
|
<el-button
|
|
|
|
type="text"
|
|
|
|
size="small"
|
|
|
|
@click="handleDeleteClick(scope.$index, scope.row)"
|
|
|
|
>删除</el-button
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>-->
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
title="性能指标"
|
|
|
|
:visible.sync="dialogVisible"
|
|
|
|
width="60%"
|
|
|
|
:before-close="handleClose"
|
|
|
|
>
|
|
|
|
<div class="table-search">
|
|
|
|
<el-input v-model="keyword" placeholder="请输入指标名称" clearable />
|
|
|
|
<el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button>
|
|
|
|
</div>
|
|
|
|
<el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"
|
|
|
|
:row-key="(row) => { return row.kpiId }"
|
|
|
|
>
|
|
|
|
<el-table-column type="selection" width="55" :reserve-selection="true" />
|
|
|
|
<el-table-column prop="kpiName" label="指标名称" width="180" />
|
|
|
|
<el-table-column prop="kpiId" label="指标ID" width="180" />
|
|
|
|
<el-table-column prop="kpiCategory" label="指标分类" >
|
|
|
|
<template #default="scope">{{ scope.row.kpiCategory==0?'基本指标':'性能指标' }}</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="kpiUnit" label="指标单位" width="180" />
|
|
|
|
<el-table-column prop="kpiPower" label="指标权限" width="180" >
|
|
|
|
<template #default="scope">{{ scope.row.kpiPower=='hard'?'硬件':scope.row.kpiPower=='soft'?'系统':'公共' }}</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="policyNum" label="告警策略" width="180" >
|
|
|
|
<template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
|
|
<div style='text-align: left;background-color: white'>
|
|
|
|
<el-pagination
|
|
|
|
v-if="currentPage"
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
@prev-click="prePage"
|
|
|
|
@next-click="nextPage"
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
:current-page="currentPage"
|
|
|
|
:page-sizes="pageSizes"
|
|
|
|
:page-size="pageSize"
|
|
|
|
:total="total">
|
|
|
|
</el-pagination>
|
|
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
|
|
|
|
<el-button size="mini" type="primary" @click="handleSaveClick"
|
|
|
|
>确 定</el-button
|
|
|
|
>
|
|
|
|
</span>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {getKpiPage} from "@/api/platform";
|
|
|
|
import {formatDate} from "../../../../../filter";
|
|
|
|
export default {
|
|
|
|
model: {
|
|
|
|
prop: "formData",
|
|
|
|
event: "input"
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
formData: Array
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
keyword:'',
|
|
|
|
currentPage:1,
|
|
|
|
pageSize:10,
|
|
|
|
pageSizes:[10,50,100, 200, 300, 400],
|
|
|
|
total:0,
|
|
|
|
layout:false,
|
|
|
|
dialogVisible: false,
|
|
|
|
rowFormData: {
|
|
|
|
name: "",
|
|
|
|
key: "",
|
|
|
|
width: ""
|
|
|
|
},
|
|
|
|
flag: true, // true 新增， false 编辑
|
|
|
|
indexEditor: -1, // 编辑第几个数据
|
|
|
|
tableData: [],
|
|
|
|
multipleSelection:[]
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
//搜索指标
|
|
|
|
searchKpi(){
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
//获取性能指标列表
|
|
|
|
getKpi(){
|
|
|
|
let datas=getKpiPage();
|
|
|
|
if(datas.success){
|
|
|
|
this.tableData=datas.data;
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//回显数据
|
|
|
|
setCheckedData(){
|
|
|
|
if(this.multipleSelection && this.multipleSelection.length>0){
|
|
|
|
this.tableData.map(item=>{
|
|
|
|
this.multipleSelection.map(v=>{
|
|
|
|
if(item.kpiId==v.kpiId){
|
|
|
|
setTimeout(()=>{
|
|
|
|
this.$refs.multipleTableRef.toggleRowSelection(item)
|
|
|
|
},300)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//多选操作
|
|
|
|
handleSelectionChange(val) {
|
|
|
|
this.multipleSelection = val
|
|
|
|
},
|
|
|
|
// 每页展示多少条
|
|
|
|
handleSizeChange(val){
|
|
|
|
// 切换页码重置初始页
|
|
|
|
this.currentPage = 1
|
|
|
|
// console.log(`每页 ${val} 条`)
|
|
|
|
//props.pageSize = val;
|
|
|
|
this.pageSize = val;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
handleCurrentChange(val){
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
//props.currentPage = val;
|
|
|
|
this.currentPage = val;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
// 切换页码
|
|
|
|
prePage(val) {
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
// props.currentPage = val - 1;
|
|
|
|
this.currentPage = val-1;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
nextPage(val){
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
// props.currentPage = val + 1;
|
|
|
|
this.currentPage = val+1;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
// 配置性能指标
|
|
|
|
handleAddClick() {
|
|
|
|
this.rowFormData = {};
|
|
|
|
this.flag = true;
|
|
|
|
this.dialogVisible = true;
|
|
|
|
this.getKpi();
|
|
|
|
|
|
|
|
},
|
|
|
|
// 编辑
|
|
|
|
handleEditorClick(index, row) {
|
|
|
|
this.flag = false;
|
|
|
|
this.rowFormData = this.deepClone(row);
|
|
|
|
this.indexEditor = index;
|
|
|
|
this.dialogVisible = true;
|
|
|
|
},
|
|
|
|
// 关闭
|
|
|
|
handleClose() {
|
|
|
|
this.dialogVisible = false;
|
|
|
|
},
|
|
|
|
// 保存
|
|
|
|
handleSaveClick() {
|
|
|
|
if (this.flag) {
|
|
|
|
// 新增
|
|
|
|
// this.formData.push(this.rowFormData);
|
|
|
|
let arr=[]
|
|
|
|
this.multipleSelection.map(item=>{
|
|
|
|
arr.push({name:item.kpiName,key:item.kpiId,width:'50%'})
|
|
|
|
})
|
|
|
|
this.formData=arr;
|
|
|
|
console.log("formadata",this.formData)
|
|
|
|
this.dialogVisible = false;
|
|
|
|
} else {
|
|
|
|
// 编辑
|
|
|
|
this.formData[this.indexEditor] = this.rowFormData;
|
|
|
|
this.$set(this.formData, this.indexEditor, this.rowFormData);
|
|
|
|
this.dialogVisible = false;
|
|
|
|
}
|
|
|
|
this.$emit("input", this.formData);
|
|
|
|
this.$emit("change", this.formData);
|
|
|
|
},
|
|
|
|
// 删除
|
|
|
|
handleDeleteClick(index,row) {
|
|
|
|
this.formData.splice(index, 1);
|
|
|
|
this.setTableChecked(row.key);
|
|
|
|
this.$emit("input", this.formData);
|
|
|
|
this.$emit("change", this.formData);
|
|
|
|
},
|
|
|
|
//设置表格选中状态
|
|
|
|
setTableChecked(kpiId){
|
|
|
|
let indexId='';
|
|
|
|
this.multipleSelection.map((item,index)=>{
|
|
|
|
if(kpiId==item.kpiId){
|
|
|
|
indexId=index;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
this.multipleSelection.splice(indexId, 1);
|
|
|
|
console.log("*/*/*",this.multipleSelection)
|
|
|
|
this.tableData.map(item=>{
|
|
|
|
if(item.kpiId==kpiId){
|
|
|
|
setTimeout(()=>{
|
|
|
|
this.$refs.multipleTableRef.toggleRowSelection(item)
|
|
|
|
},300)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
/deep/::-webkit-scrollbar-track-piece {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
|
width: 0; // 横向滚动条
|
|
|
|
height: 8px; // 纵向滚动条 必写
|
|
|
|
}
|
|
|
|
// 滚动条的滑块
|
|
|
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
|
border-radius: 5px;
|
|
|
|
background-color: rgba(144, 146, 152, 0.3);
|
|
|
|
}
|
|
|
|
/deep/.el-table,
|
|
|
|
/deep/.el-table__expanded-cell,
|
|
|
|
/deep/.el-table th,
|
|
|
|
/deep/.el-table tr {
|
|
|
|
background-color: transparent !important;
|
|
|
|
color: #859094 !important;
|
|
|
|
font-size: 12px !important;
|
|
|
|
}
|
|
|
|
/deep/.el-table td,
|
|
|
|
/deep/.el-table th.is-leaf {
|
|
|
|
border-bottom: none;
|
|
|
|
line-height: 26px;
|
|
|
|
}
|
|
|
|
/deep/.el-table tbody tr:hover {
|
|
|
|
background-color: #263445 !important;
|
|
|
|
}
|
|
|
|
/deep/.el-table tbody tr:hover > td {
|
|
|
|
background-color: #263445 !important;
|
|
|
|
}
|
|
|
|
/deep/.el-table::before {
|
|
|
|
height: 0;
|
|
|
|
}
|
|
|
|
.button-group .el-button {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.table-search{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
.search-btn{
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
