monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit a03b503ffb2f935c7eb502c2be468d3bb4995ac5 2 parents f10b33a6 894ce180

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

v-for语句增加key



See merge request !42
Inline Side-by-side
Showing 9 changed files with 551 additions and 26 deletions
<template>
<div>
<!-- <el-button
type="primary"
size="small"
plain
@click="handleAddClick"
>配置表头</el-button
>-->
<span>信息表头设置</span>
<el-table :data="formDataNew" 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
@click="handleEditorClick(scope.$index, scope.row)"
type="text"
size="small"
>编辑</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<el-dialog
title="编辑列"
:visible.sync="editDialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form :model="rowFormData" label-width="70px">
<el-form-item label="名称:">
<el-input
v-model.trim="rowFormData['name']"
placeholder="请输入名称"
size="mini"
disabled
>
</el-input>
</el-form-item>
<el-form-item label="key值:">
<el-input
v-model.trim="rowFormData['key']"
placeholder="请输入key值"
size="mini"
disabled
>
</el-input>
</el-form-item>
<el-form-item label="宽度:">
<el-input
v-model.trim="rowFormData['width']"
placeholder="请输入宽度"
size="mini"
>
</el-input>
</el-form-item>
<el-form-item label="排序:">
<el-switch size="mini" v-model.trim="rowFormData['sort']" />
</el-form-item>
<el-form-item label="列排序:">
<el-input-number
v-model.trim="rowFormData['columnSort']"
:min="0"
:max="50"
size="small"
controls-position="right"
/>
</el-form-item>
<el-form-item label="关联组件:">
<div class="flex-start">
<el-select v-model.trim="rowFormData['componentName']" size="small">
<el-option
v-for="item in componentNameData"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div class="alt-text">
<span v-if="rowFormData['componentName']=='1'">显示正常内容</span>
<span v-if="rowFormData['componentName']=='textToImage'">值为'message',显示为信息图标，值为'',显示微信图标</span>
<span v-if="rowFormData['componentName']=='textToBg'">值为'1',显示为一般，值为'2'，显示为重要，值为'3'，显示为严重</span>
</div>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleSaveClick"
>确 定</el-button
>
</span>
</el-dialog>
<el-dialog
title="表头数据"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose"
>
<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,getDetailTableData} from "@/api/platform";
import {formatDate} from "../../../../../filter";
import {mapGetters} from "vuex";
export default {
model: {
prop: "formData",
event: "input"
},
props: {
formData: Array
},
watch:{
tableHeads:{
handler(val){
this.setFormData();
},
deep:true
}
},
data() {
return {
primaryTypeFlg:false,//默认为追加
primaryType1:'default',
primaryType0:'primary',
keyword:'',
currentPage:1,
pageSize:10,
pageSizes:[10,50,100, 200, 300, 400],
total:0,
layout:false,
dialogVisible: false,
rowFormData: {
name: "",
key: "",
width: "",
sort:false,
columnSort:0,
componentName:1
},
flag: true, // true 新增， false 编辑
indexEditor: -1, // 编辑第几个数据
tableData: [],
multipleSelection:[],
editDialogVisible:false,//编辑列
componentNameData:[
{
label:'正常内容',
value:1
},
{
label:'信息图标',
value:'textToImage'
},
{
label: '级别背景',
value:'textToBg'
}
],//关联组件
formDataNew:this.formData,//表头数据
};
},
computed:{
...mapGetters(['tableHeads']),
//获取url地址中的token
getUrlToken(){
let locationUrl=this.$route.query;
let resId=locationUrl.resId;
let token=locationUrl.access_token;
let urlObj={
resId:resId,
token:token
}
return urlObj;
}
},
created() {
this.setFormData();
},
methods: {
setFormData(){
if(this.tableHeads){
this.formDataNew=this.tableHeads;
}
},
//搜索指标
searchKpi(){
this.getKpi();
},
//获取性能指标列表
async getKpi(){
let params={
page:this.currentPage,
limit:this.pageSize,
kpiName:this.keyword,
}
const { success,data,count } = await getKpiPage(params,this.getUrlToken);
this.total=count;
if(success){
this.tableData=data;
}
},
//多选操作
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.editDialogVisible = true;
},
// 关闭
handleClose() {
this.dialogVisible = false;
},
// 保存
handleSaveClick() {
if (this.flag) {
// 新增
let arr=[];
if(this.primaryTypeFlg){
//追加
let arr1=[];
this.multipleSelection.map((item,index)=>{
arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
})
arr=this.formDataNew.concat(arr1);
}else{
//重新选择
this.multipleSelection.map((item,index)=>{
arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
})
}
this.formDataNew=arr;
this.formDataNew.sort(this.compare('columnSort'));
this.dialogVisible = false;
} else {
// 编辑
this.formDataNew[this.indexEditor] = this.rowFormData;
this.$set(this.formDataNew, this.indexEditor, this.rowFormData);
this.formDataNew.sort(this.compare('columnSort'));
this.editDialogVisible = false;
}
console.log("AVX", this.formDataNew)
this.$emit("input", this.formDataNew);
this.$emit("change", this.formDataNew);
},
//数组排序
compare(property){
return function(a,b){
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
}
},
// 删除
handleDeleteClick(index,row) {
this.formDataNew.splice(index, 1);
this.setTableChecked(row.key);
this.$emit("input", this.formDataNew);
this.$emit("change", this.formDataNew);
},
//设置表格选中状态
setTableChecked(kpiId){
let indexId='';
this.multipleSelection.map((item,index)=>{
if(kpiId==item.kpiId){
indexId=index;
}
})
this.multipleSelection.splice(indexId, 1);
this.tableData.map(item=>{
if(item.kpiId==kpiId){
setTimeout(()=>{
this.$refs.multipleTableRef.toggleRowSelection(item)
},300)
}
})
},
//重新配置表头或者追加表头
selectKpi(flg){
this.primaryTypeFlg=flg;
if(flg){
//追加
this.primaryType1='primary';
this.primaryType0='default';
}else{
//重新选择
this.primaryType0='primary';
this.primaryType1='default';
}
}
}
};
</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;
}
}
.flex-start{
display: flex;
align-items: center;
justify-content: start;
}
.alt-text{
margin-left:5px;
font-size: 12px;
color:#D81E06;
line-height: 12px;
}
.table-btn{
margin-top:10px;
}
</style>
... ...
... ... @@ -145,6 +145,12 @@
:chart-type="item.chartType"
@change="changed($event, item.name)"
/>
<configureIndicatorsInformation
v-if="item.type == 'dynamic-detail-table-information' && inputShow[item.name]"
v-model="formData[item.name]"
:chart-type="item.chartType"
@change="changed($event, item.name)"
/>
<dynamic-add-table
v-if="item.type == 'dynamic-add-table' && inputShow[item.name]"
v-model="formData[item.name]"
... ... @@ -284,6 +290,7 @@ import dynamicAddTable from "./dynamicAddTable.vue";
import customUpload from "./customUpload.vue";
import configureIndicators from "./configureIndicators.vue";
import configureIndicatorsInformation from "./configureIndicatorsInformation.vue";
export default {
name: "DynamicForm",
... ... @@ -294,7 +301,8 @@ export default {
customColorComponents,
dynamicAddTable,
customUpload,
configureIndicators
configureIndicators,
configureIndicatorsInformation
},
model: {
prop: "value",
... ...
... ... @@ -62,7 +62,7 @@ export const monitorBasicInformationTwo = {
name: 'logoAdressBg',
required: false,
placeholder: '',
value: ''
value: require("../../../../../../../assets/images/monitor/capacityAnalysis/aliyun.png")
},
{
type: 'el-input-number',
... ... @@ -94,8 +94,78 @@ export const monitorBasicInformationTwo = {
name: 'pictureSize',
required: false,
placeholder: '',
value: '140'
value: '123'
},
[
{
name: "表头设置",
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'headFontSize',
required: false,
placeholder: '',
value: '14'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'headFontColor',
required: false,
placeholder: '',
value: '#666'
},
{
type: 'el-select',
label: '表头位置',
name: 'headTextAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
]
},
{
name: "表体设置",
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'bodyFontSize',
required: false,
placeholder: '',
value: '14'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'bodyFontColor',
required: false,
placeholder: '',
value: '#666'
},
{
type: 'el-select',
label: '表头位置',
name: 'bodyTextAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
]
},
],
{
type: 'el-input-text',
label: '属性key',
... ... @@ -104,6 +174,20 @@ export const monitorBasicInformationTwo = {
placeholder: '请输入Key值，以逗号分割',
value: 'vmware,ipAddress,resPool,host,vMachine'
},
{
type: 'dynamic-detail-table-information',
label: '',
name: 'dynamicAddTable',
required: false,
chartType:'detail-table',
placeholder: '',
value: [
{name: 'IP地址', key: 'ipAddress', width: '50%'},
{name: '资源池', key: 'resPool', width: '50%'},
{name: '宿主机', key: 'host', width: '50%'},
{name: '虚拟机', key: 'vMachine', width: '50%'},
]
}
],
data: [
{
... ...
... ... @@ -14,17 +14,19 @@
<div class="basic-ul-right" >
<div @mouseenter="mouseFun" @mouseleave="leaveFun">
<el-row class="backColor" :style="fontStyle">
<el-col aria-colspan="2">
<el-col class="padding-10" aria-colspan="2">
<a class="link-type" :href="jkAddress.jkUrl" target="_blank">{{informationData[0].name}}</a>
<i class="el-icon-info" v-if="visible" @click="resTopo"/>
</el-col>
</el-row>
</div>
<el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index">
<el-col v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">
<!-- <el-col :style="headStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">-->
<el-col :style="headStyle" v-if="index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">
{{ item.name }}
</el-col>
<el-col v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0 " class="basic-border basic-item-content" :span="14"><span>{{ item.value }}</span>
<!-- <el-col :style="bodyStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>-->
<el-col :style="bodyStyle" v-if="index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
</el-col>
<!-- && attrKey.attrKeyVal.includes(item.code)-->
</el-row>
... ... @@ -58,7 +60,7 @@
optionsSetUp: {},
optionsPosition: {},
optionsData: {},
informationData: [],
informationData: [{name:'',code:''}],
informationDataAll: [],
tableDate: [],
pressingVisible: false,
... ... @@ -100,6 +102,22 @@
'background-size': 'contain'
};
},
//表头设置
headStyle(){
return{
'font-size':this.transStyle.headFontSize,
color:this.transStyle.headFontColor,
'justify-content':this.transStyle.headTextAlign=='left'?'start':this.transStyle.headTextAlign=='center'?'center':'flex-end',
}
},
//表体设置
bodyStyle(){
return{
'font-size':this.transStyle.bodyFontSize,
color:this.transStyle.bodyFontColor,
'justify-content':this.transStyle.bodyTextAlign=='left'?'start':this.transStyle.bodyTextAlign=='center'?'center':'flex-end',
}
},
styleColor() {
return {
... ... @@ -119,7 +137,7 @@
isName: this.transStyle.isName,
dataNum: this.transStyle.dataNum ? this.transStyle.dataNum : '6',
probeDown: this.transStyle.probeDown,
logoAdressBg: this.transStyle.logoAdressBg ? this.transStyle.logoAdressBg : require("../../../../../../assets/images/healthStatus/title-asset.png"),
logoAdressBg: this.transStyle.logoAdressBg,
};
},
//动态基础表格信息
... ... @@ -267,6 +285,7 @@
.basic-flex {
display: flex;
align-items: center;
justify-content: center;
}
.title-div {
... ... @@ -287,21 +306,14 @@
}
.basic-ul-left img {
width: 140px;
height: 140px;
margin-bottom: 20px;
//width: 140px;
//height: 140px;
//margin-bottom: 20px;
}
.basic-ul-right {
width: 100%;
flex:1;
height: 100%;
/*display: flex;*/
/*flex-wrap: nowrap*/
/*width: 50%;*/
/*height:50%;*/
/*float: left;*/
/*margin-left: 45%;*/
/*margin-bottom: 100px;*/
}
/**
... ... @@ -321,7 +333,8 @@
.basic-ul {
display: flex;
align-items: center;
justify-content: space-around;
.basic-item:nth-child(even) {
background-color: #f8f8f8;
}
... ... @@ -397,4 +410,7 @@
.span-green {
color: #0BAC33;
}
.padding-10{
padding:10px;
}
</style>
... ...
... ... @@ -6,7 +6,7 @@
</div>
<div class="button-btn-item">
<el-button v-if="item.isDisplay" :style="btnStyle" class="button-style" :type="btnActive==item.code?'primary':'default'"
@click="changeType(item)" v-for="item in btnGroup">
@click="changeType(item)" v-for="(item,index) in btnGroup" :key="index">
{{item.name}}
</el-button>
... ...
<template>
<div :style="styleObj" class="fillContainer">
<div class="fill-item" :style="fillItemStyle" v-for="item in fillData">
<div class="fill-item" :style="fillItemStyle" v-for="(item,index) in fillData" :key="index">
<div class="circle" :style="circleStyle">
<div class="wave">
<div class="wave1" :style="[wave1Style,topStyle(item.num)]"></div>
... ...
... ... @@ -7,13 +7,13 @@
<div class="percentContainer" :style="flexStyle">
<v-chart :options="options" autoresize/>
<div class="percent-label-item">
<div class="chart-title" v-for="item in percentData">
<div class="chart-title" v-for="(item,index) in percentData" :key="index">
<span :style="numStyle(item)">{{ item.num }}</span>
<span :style="pieStyle(item)">%</span>
</div>
</div>
<div class="percent-item" >
<div class="chart-title" :style="subTitleStyle" v-for="item in percentData">{{ item.name }}</div>
<div class="chart-title" :style="subTitleStyle" v-for="(item,index) in percentData" :key="index">{{ item.name }}</div>
</div>
</div>
... ...
<template>
<div :style="styleObj" class="progressContainer">
<div class="progress-item" :style="itemStyle" v-for="item in progressData">
<div class="progress-item" :style="itemStyle" v-for="(item,index) in progressData" :key="index">
<div class="progress-title" :style="titleStyle">{{ item.name }}</div>
<div class="progress-title-proposal" :style="titleProposalStyle">{{item.proposal}}</div>
<div class="progress-content" :style="progressStyle">
... ...
... ... @@ -8,7 +8,7 @@
<div class="system-item system-item-img">
<img :src="imgStyle.infoImageAdress" alt="">
</div>
<div class="system-item" :style="itemStyle" v-for="item in systemData">
<div class="system-item" :style="itemStyle" v-for="(item,index) in systemData" :key="index">
<div class="system-img"><img :src="'/src/assets/images/monitor/capacityAnalysis/'+item.code+'.png'" alt=""></div>
<div class="system-info" :style="titleProposalStyle">
<span>{{item.name}}：</span>
... ...