monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 17c9d9d66f122068932d08d37334a1ee0413b4fd 1 parent 642b0faf

柱线图数据结构更改，性能信息及基本信息数据调用

Inline Side-by-side
Showing 12 changed files with 100 additions and 57 deletions
... ... @@ -152,24 +152,62 @@ export default {
let xAxisList = [];
let series = [];
let kpiUnit='';
if(data && data[0]){
if(data[0].data.names && data[0].data.names.length>0){
xAxisList=data[0].data.names;
}else{
xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
}
if(data[0].data.kpiUnit){
kpiUnit=data[0].data.kpiUnit;
}
if(data[0].data.series && data[0].data.series.length>0){
series = data[0].data.series;
console.log("*****",data)
if(data && data[0] ){
if(data[0].data){
if(data[0].data.names && data[0].data.names.length>0){
xAxisList=data[0].data.names;
}else{
xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
}
if(data[0].data.kpiUnit){
kpiUnit=data[0].data.kpiUnit;
}
if(data[0].data.series && data[0].data.series.length>0){
series = data[0].data.series;
}else{
series = [{
name: "",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
}else{
series = [{
name: "",
datas: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
//容量分析柱线图数据结构
let seriesCapacityData=[];//容量
let seriesUsageRateData=[];//使用率
let seriesUsageValueData=[];//使用量
data.map(item=>{
xAxisList.push(item.periodVal);
seriesCapacityData.push(item.capacityValue)
seriesUsageRateData.push(item.usageRate)
seriesUsageValueData.push(item.usageValue)
})
series.push({
type:'bar',
name:'使用量',
data:seriesUsageValueData
})
series.push({
type:'line',
name:'容量',
data:seriesCapacityData
})
series.push({
type:'line',
name:'使用率',
data:seriesUsageRateData
})
}
}else{
xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
series = [{
name: "",
type:'bar',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
... ...
... ... @@ -21,7 +21,6 @@
size="small"
>编辑</el-button
>-->
{{scope.row.isDisplay}}
<el-switch active-value="1" inactive-value="2" size="mini" @change="switchChange" v-model.trim="scope.row.isDisplay" />
</div>
... ...
... ... @@ -325,7 +325,7 @@ export const monitorProgressInformation = {
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
... ...
... ... @@ -15,15 +15,16 @@
<div v-if="informationDataAll[0].isDisplay=='1'" >
<el-row class="backColor" :style="bodyTitleStyle">
<el-col class="padding-10" :style="[tableTitleStyle]" aria-colspan="2">
<span class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
<span v-if="!titleName" class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
<span v-if="titleName" class="link-type" :style="tableTitleStyle" @click="goTrend({resId:resId,resType:resType})">{{titleName}}</span>
<el-tooltip v-model="visible" :manual="true" placement="right-start">
<template #content>
<div class="basic-tbody-all basic-border-nowrap" :style="wrapStyle">
<el-row class="basic-item" v-if="item.isDisplay=='1' && index>0" v-for="(item,index) in informationDataAll" :key="index">
<el-col :style="[lineHeightStyle]" v-if="index>0" class="basic-border basic-item-title basic-flex" :span="10">
<el-row class="basic-item" v-if="item.isDisplay=='1' && (titleName?index>=0:index>0)" v-for="(item,index) in informationDataAll" :key="index">
<el-col :style="[lineHeightStyle]" v-if="(titleName?index>=0:index>0)" class="basic-border basic-item-title basic-flex" :span="10">
{{ item.name }}
</el-col>
<el-col :style="[lineHeightStyle]" v-if="index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
<el-col :style="[lineHeightStyle]" v-if="(titleName?index>=0:index>0) " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
</el-col>
</el-row>
</div>
... ... @@ -42,13 +43,13 @@
</el-row>
</div>
<div class="basic-tbody basic-border-wrap" :style="wrapStyle">
<el-row class="basic-item" :style="itemStyle" v-if="item.isDisplay=='1' && index>0" v-for="(item,index) in informationData" :key="index">
<el-row class="basic-item" :style="itemStyle" v-if="item.isDisplay=='1' && (titleName?index>=0:index>0)" v-for="(item,index) in informationData" :key="index">
<!-- <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,borderStlye,lineHeightStyle]" v-if="index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">
<el-col :style="[headStyle,borderStlye,lineHeightStyle]" v-if="(titleName?index>=0:index>0)" class="basic-border basic-item-title basic-flex backColor" :span="10">
{{ item.name }}
</el-col>
<!-- <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,borderStlye,lineHeightStyle,borderStyleRight(index)]" v-if="index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
<el-col :style="[bodyStyle,borderStlye,lineHeightStyle,borderStyleRight(index)]" v-if="(titleName?index>=0: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>
... ... @@ -87,6 +88,9 @@
name: "basicInformationTwo",
data() {
return {
titleName:'',//路由传递的名称
resType:'',//路由传递的资源类型
resId:'',//路由传递的资源id
options: {},
optionsSetUp: {},
optionsPosition: {},
... ... @@ -101,7 +105,6 @@
hackReset: true,
tableDataValue: {kpiId: ''},
tableDataValueHead: {},
resType: '',
marginStyle: '',//弹框距离顶部距离
heightStyle: '',//弹框遮罩层高度
widthStyle: ';',//弹框宽度样式
... ... @@ -302,6 +305,7 @@
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.handlerData();
this.getTitleName();
},
methods: {
//右侧最后一个元素边框样式
... ... @@ -365,6 +369,7 @@
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
console.log("1111",res)
if (res && res[0].code == 0)
this.informationDataAll = res[0].data;
if (this.informationDataAll && this.informationDataAll.length > 0) {
... ... @@ -378,10 +383,7 @@
})
}
this.setDisplay();
if (this.imgStyle.dataNum) {
this.informationData = this.informationDataAll.slice(0, this.imgStyle.dataNum);
}
this.setDisplay();
let addTableData=[];
this.informationDataAll.map((item,index)=>{
addTableData.push({
... ... @@ -393,6 +395,7 @@
value:item.value
})
})
this.$store.commit('CHANGW_HEAD_INFO', addTableData);
this.hackResetFun();
});
... ... @@ -469,6 +472,12 @@
}
window.parent.postMessage(param, '*')
},
//获取路由传过来的名称
getTitleName(){
this.titleName=this.$route.query.titleName;
this.resId=this.$route.query.resId;
this.resType=this.$route.query.resType;
}
},
}
... ... @@ -584,7 +593,7 @@
.basic-border-nowrap{
display: flex;
flex-flow: column;
min-width: 200px;
min-width: 300px;
}
.basic-img {
... ...
... ... @@ -26,7 +26,7 @@ export default {
}
},
tooltip: {
trigger: "item",
trigger: "axis",
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
... ... @@ -89,6 +89,13 @@ export default {
yAxisIndex: 1,
data: [],
itemStyle: {}
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [],
itemStyle: {}
}
]
},
... ... @@ -342,7 +349,7 @@ export default {
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
trigger: "axis",
show: true,
textStyle: {
color: optionsSetup.lineColor,
... ... @@ -453,7 +460,7 @@ export default {
renderingFn(val) {
this.options.xAxis.data = val.xAxis;
// series 模拟数据
val.series.push({
/*val.series.push({
type:'line',
name:'使用率',
data:['5.66','6.99','7.99','8.99','5.66','6.99','7.99','8.99','5.66','6.99','7.99','8.99','5.66','6.99','7.99','8.99']
... ... @@ -462,18 +469,21 @@ export default {
type:'line',
name:'容量',
data:['9.66','7.99','6.99','5.99','5.66','9.66','7.99','6.99','5.99','6.99','9.66','7.99','6.99','5.99','8.99']
})
})*/
///////
const series = val.series;
if(series && series.length>0){
series.map((item,index)=>{
if(index%2==0){
item.yAxisIndex= 1;
}
}else{
item.yAxisIndex=0;
}
if(item.type=='bar'){
item.itemStyle= {
barBorderRadius: null
}
item.barMinHeight=2;
}else if(item.type=='line'){
item.itemStyle= {
borderRadius: null
... ...
... ... @@ -452,7 +452,6 @@ export default {
echartsClick(){
let that=this;
this.$refs.myEchart.chart.on('click',function (params){
console.log("()()()()()",params.name,params.data,params)
that.$set(that.tableDataValue,'name',params.name)
that.$set(that.tableDataValue,'data',params.data)
that.goTrend();
... ...
<template>
<div :style="styleObj" class="flex-div-content" @click="goJump">
<div :style="styleObjItem" class="flex-div" v-for="(item,index) in percentData" :key="index">
<div :style="styleObj" class="flex-div-content" >
<div :style="styleObjItem" class="flex-div" @click="goJump(item)" v-for="(item,index) in percentData" :key="index">
<div class="percent-title" :style="titleStyle">
<img :src="imgStyle.imageAdress" alt="" class="icon-title">
<!-- {{ optionsSetup.titleName }}-->
... ... @@ -408,12 +408,10 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
console.log("((",res)
this.setData(res)
});
},
goJump(){
goJump(item){
let locationUrl=this.$route.query;
if(this.optionsSetup.isNextPage){
let nextRouter=this.optionsSetup.nextRouter;
... ... @@ -423,7 +421,7 @@ export default {
if(nextRouter){
this.$router.push({
path: `/bigscreen/viewer`,
query: { reportCode: nextRouter },
query: { reportCode: nextRouter,titleName:item.resName ,resId:item.resId,resType: item.resType},
})
}
... ...
... ... @@ -614,8 +614,6 @@ export default {
const { success,data } = await getDetailTableDataNoPage(param,this.getUrlToken);
if(success){
let headTable =data;
console.log("alalalal",data)
this.handleHeadContent(headTable[0],'all');
this.widthStyle='';
// this.setDialog('table');
... ... @@ -917,8 +915,6 @@ export default {
this.sortCaret=flg;
this.sortBy=item.key;
}
console.log(" this.optionsData", this.optionsData)
console.log("iiiiiiii",item)
if(this.sortCaret=='ascending'){
//正序
this.order='ASC';
... ... @@ -1035,7 +1031,6 @@ export default {
resId:this.getUrlToken.resId
}
const { success,data } = await getBResourcePage(params,this.getUrlToken);
console.log("success",success,data)
if(success){
let ResourceData=data[0];
let resTypeName=ResourceData.resTypeName;
... ... @@ -1043,7 +1038,6 @@ export default {
// let timeName=new Date().format("yyyyMMddhhmmss",24);
let timeName=this.formatFunction(new Date(), 'yyyyMMddhhmmss')
let title =resTypeName+'-'+resName+'-'+titleName+'-'+timeName;
console.log("title",title)
let kpiIdArr=[];
let kpiIds='';
this.header.map(item=>{
... ...
... ... @@ -218,7 +218,6 @@ export default {
},*/
handlerData() {
const resData = this.optionsData;
console.log("resdata",resData)
resData.dataType == "staticData"
? this.handlerStaticData(resData.staticData)
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
... ...
<template>
<div :style="styleObj" class="progressContainer">
<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" :style="titleStyle">{{ item.name }}容量信息</div>
<div class="progress-title-proposal" :style="titleProposalStyle">{{item.proposal}}</div>
<div class="progress-content" :style="progressStyle">
<div class="content-all">
<span class="content-total">总空间：383GHZ</span>
<span class="content-total">总空间：{{ item.total }}{{item.unit}}</span>
</div>
<div class="progress-ele">
<el-progress :percentage="item.num" :show-text="showTextStyle" :text-inside="textInsideStyle" :stroke-width="progressWidthStyle" :color="customColorMethod" />
<el-progress :percentage="item.rate" :show-text="showTextStyle" :text-inside="textInsideStyle" :stroke-width="progressWidthStyle" :color="customColorMethod" />
</div>
<div class="content-all">
<span class="content-use" :style="textColor(item.num)">已用：220GHZ</span>
<span class="content-use">剩余：234GHZ</span>
<span class="content-use" :style="textColor(item.rate)">已用：{{ item.used }}{{item.unit}}</span>
<span class="content-use">剩余：{{ item.remain }}{{item.unit}}</span>
</div>
</div>
... ...
... ... @@ -185,7 +185,6 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
console.log("res",res)
if(res && res.length>0){
this.systemData=res;
}
... ...
... ... @@ -322,8 +322,6 @@ export default {
// this.totalAll = this.listAll[0].lineCount;
// }
// }else{
console.log("111")
this.list = res;
this.loading = false;
this.loadingAll = false;
... ...