monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 7c9e218c875a3e49ccc016e75805b64ce641271e 2 parents 19895b89 7dfc3fff master ... master-500-dev master-500-dev-LH master-500-dev-lushangqing master-500-dev-lzc master-500-prod master-ajreport-lushangqing master-mj master-mj-joke master-prod master_AjReport_LH

Merge branch 'master-ajreport-lushangqing' into 'master' 

自定义柱状堆叠图，更改接口数据格式；更改表格组件适应于告警列表



See merge request !20
Inline Side-by-side
Showing 14 changed files with 1627 additions and 88 deletions
... ... @@ -5,6 +5,7 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:9095"',
BASE_API_other: '"https://192.168.0.69:8080"'
// BASE_API_other: '"https://192.168.0.69:8080"'
BASE_API_other: '"http://192.168.0.74:8080"'
// BASE_API: '"http://10.108.26.197:9095"'
})
... ...
This diff could not be displayed because it is too large.
... ... @@ -98,7 +98,6 @@ export default {
return new Promise(async (resolve) => {
const {code, data} = await getData(params);
if (code != 200) return
console.log(")))",data)
const analysisData = this.analysisChartsData(params, data);
resolve(analysisData)
})
... ... @@ -128,7 +127,9 @@ export default {
return this.stackChartFn(params.chartProperties, data)
}else if(chartType == "custom-linechart"){
return this.barOrLineChartFnCustom(params.chartProperties, data);
} else {
} else if(chartType == "monitor-stackchart"){
return this.stackChartFnCustom(params.chartProperties, data)
}else {
return data
}
},
... ... @@ -185,6 +186,38 @@ export default {
ananysicData["series"] = series;
return ananysicData;
},
//堆叠图自定义
stackChartFnCustom(chartProperties, data){
const ananysicData = {};
const series = [];
//全部字段字典值
const types = Object.values(chartProperties)
let newData=data[0];
//x轴字段、y轴字段名
const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
const dataField = Object.keys(chartProperties)[types.indexOf('bar')]
//x轴数值去重，y轴去重
const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
const dataGroup = this.setGroupBy(data, yAxisField)
let yAxisListNew=yAxisList[0].series;
if(yAxisListNew && yAxisListNew.length>0){
yAxisListNew.map(item=>{
series.push({
name: item.name,
type: item.type,
data: item.data,
})
})
}
ananysicData["xAxis"] = xAxisList[0];
ananysicData["series"] = series;
ananysicData["kpiMap"] = newData.kpiMap;
return ananysicData;
},
//堆叠图
stackChartFn(chartProperties, data) {
const ananysicData = {};
... ...
... ... @@ -97,10 +97,10 @@
</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
>
<el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleSaveClick"
>确 定</el-button
>
</span>
</el-dialog>
<el-dialog
... ... @@ -113,6 +113,11 @@
<el-input v-model="keyword" placeholder="请输入指标名称" clearable />
<el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button>
</div>
<div class="table-btn">
<el-button @click="selectKpi(false)" class="search-btn" :type="primaryType0">重新选择</el-button>
<el-button @click="selectKpi(true)" class="search-btn" :type="primaryType1">追加</el-button>
</div>
<el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"
:row-key="(row) => { return row.kpiId }"
>
... ... @@ -146,9 +151,12 @@
</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
>
<el-tooltip class="item" effect="dark" content="默认为重新选择，追加请先点击追加按钮" placement="top-start">
<el-button size="mini" type="primary" @click="handleSaveClick"
>确 定</el-button
>
</el-tooltip>
</span>
</el-dialog>
</div>
... ... @@ -164,8 +172,19 @@ export default {
props: {
formData: Array
},
watch:{
headTable:{
handler(val){
console.log("*(*(",val)
},
deep:true
}
},
data() {
return {
primaryTypeFlg:false,//默认为追加
primaryType1:'default',
primaryType0:'primary',
keyword:'',
currentPage:1,
pageSize:10,
... ... @@ -202,22 +221,40 @@ export default {
],//关联组件
};
},
computed:{
//获取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;
}
},
methods: {
//搜索指标
searchKpi(){
this.getKpi();
},
//获取性能指标列表
getKpi(){
let datas=getKpiPage();
if(datas.success){
this.tableData=datas.data;
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;
}
},
//回显数据
setCheckedData(){
if(this.multipleSelection && this.multipleSelection.length>0){
/*if(this.multipleSelection && this.multipleSelection.length>0){
this.tableData.map(item=>{
this.multipleSelection.map(v=>{
if(item.kpiId==v.kpiId){
... ... @@ -227,7 +264,7 @@ export default {
}
})
})
}
}*/
},
//多选操作
handleSelectionChange(val) {
... ... @@ -289,10 +326,21 @@ export default {
if (this.flag) {
// 新增
// this.formData.push(this.rowFormData);
let arr=[]
this.multipleSelection.map((item,index)=>{
arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
})
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.formData.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.formData=arr;
this.formData.sort(this.compare('columnSort'));
this.dialogVisible = false;
... ... @@ -303,6 +351,7 @@ export default {
this.formData.sort(this.compare('columnSort'));
this.editDialogVisible = false;
}
console.log("AVX", this.formData)
this.$emit("input", this.formData);
this.$emit("change", this.formData);
},
... ... @@ -338,6 +387,19 @@ export default {
},300)
}
})
},
//重新配置表头或者追加表头
selectKpi(flg){
this.primaryTypeFlg=flg;
if(flg){
//追加
this.primaryType1='primary';
this.primaryType0='default';
}else{
//重新选择
this.primaryType0='primary';
this.primaryType1='default';
}
}
}
};
... ... @@ -399,4 +461,7 @@ export default {
color:#D81E06;
line-height: 12px;
}
.table-btn{
margin-top:10px;
}
</style>
... ...
... ... @@ -118,6 +118,7 @@ export default {
chartProperties: this.chartProperties,
contextData
};
console.log("^&^&",params)
this.$emit("input", params);
this.$emit("change", params);
},
... ...
/*
* @Descripttion: 柱状堆叠图-使用情况
* @version:
* @Author: lsq
* @Date: 2022-02-24
* @LastEditors: lsq
* @LastEditTime: 2022-02-24
*/
export const monitorCustomBarStack = {
code: 'monitorCustomBarStack',
type: 'chart',
label: '使用情况-柱状堆叠图',
icon: 'iconbianzu23',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱状堆叠图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: 'kpiId',
name: 'kpiId',
required: false,
placeholder: '',
selectOptions: [
{code: 'KPIA91F44E7,KPI98306224', name: 'KPIA91F44E7,KPI98306224(文件系统总大小)'},
],
value: 'KPIA91F44E7,KPI98306224',
},
{
type: 'el-select',
label: '堆叠样式',
name: 'stackStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'leftRight', name: '左右堆叠'},
{code: 'upDown', name: '上下堆叠'},
],
value: 'upDown'
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 20,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 0,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '系统使用情况',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#1e9fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'bold'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: 'X轴别名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'xNameColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '别名字号',
name: 'xNameFontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '文字间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '文字颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#c9c9c9',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#c9c9c9',
},
{
type: 'el-switch',
label: '分割区显示',
name: 'splitArea',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '分割区颜色',
name: 'splitAreaColor',
required: false,
placeholder: '',
value: 'rgba(200,200,200,0.1)',
},
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: 'Y轴别名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'NameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '别名字号',
name: 'NameFontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'vue-color',
label: '文字颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#c9c9c9',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: true,
}, {
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#c9c9c9',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#87cefa'}, {color: '#ff7f50'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis":"2021-07-25","name":"A","data":"12"},
{"axis":"2021-07-25","name":"B","data":"20"},
{"axis":"2021-07-26","name":"B","data":"5"},
{"axis":"2021-07-27","name":"A","data":"15"},
{"axis":"2021-07-27","name":"B","data":"30"},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'monitor-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}
... ...
... ... @@ -31,6 +31,42 @@ export const monitorDetailTable = {
},
{
type: 'el-select',
label: 'kpiId',
name: 'kpiId',
required: false,
placeholder: '',
selectOptions: [
{code: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA', name: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA(文件系统)'},
{code: 'KPI7AC1664E,KPI9C988E1F,KPI12994CF8,KPI15CCF495,KPIA339DF94,KPI77C28BBA', name: 'KPI7AC1664E,KPI9C988E1F,KPI12994CF8,KPI15CCF495,KPIA339DF94,KPI77C28BBA(INODE信息)'},
{code: 'KPIFABFD741,KPIA0A69A33,KPID339D51B,KPI02062F43', name: 'KPIFABFD741,KPIA0A69A33,KPID339D51B,KPI02062F43(网卡信息)'},
{code: 'KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0', name: 'KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0(磁盘信息)'},
],
value: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA',
},
{
type: 'el-select',
label: 'flag',
name: 'flag',
required: false,
placeholder: '',
selectOptions: [
{code: 'fs', name: 'fs(文件系统)'},
{code: 'inode', name: 'inode(INODE信息)'},
{code: 'net', name: 'net(网卡信息)'},
{code: 'disk', name: 'disk(磁盘信息)'},
],
value: 'fs'
},
{
type: 'el-switch',
label: '告警表格',
name: 'isAlarm',
required: false,
placeholder: '',
value: false
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
... ... @@ -141,6 +177,14 @@ export const monitorDetailTable = {
list:[
{
type: 'el-switch',
label: '是否有下探',
name: 'probeDown',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '告警设置',
name: 'alarm_setting',
required: false,
... ... @@ -404,6 +448,7 @@ export const monitorDetailTable = {
{name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1},
{name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1},
{name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1},
{name: '最近采集时间', key: 'KPIF74D9D2B', width: '50%',isStatic:true,columnSort:5,componentName:1},
]
}
],
... ...
... ... @@ -41,6 +41,7 @@ import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-
import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-chart";
import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-stack";
export const {widgetTool,monitor} = {
... ... @@ -80,6 +81,7 @@ export const {widgetTool,monitor} = {
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
monitorCustomLineChart,
monitorCustomBarStack
]
}
... ...
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
export default {
name: "customBarStack",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
echartData:'',//动态数据
options: {
grid: {},
legend: {
textStyle: {
color: "#fff"
}
},
xAxis: {
type: "category",
data: [],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
yAxis: {
type: "value",
data: [],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
series: [
{
data: [],
name: '',
type: "bar",
barGap: "0%",
itemStyle: {
barBorderRadius: null
}
}
]
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
flagInter: null
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// 修改图标options属性
editorOptions() {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
this.setOptionsTooltip();
this.setOptionsMargin();
this.setOptionsLegend();
this.setOptionsData();
},
// 标题修改
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
title.top='8px';
title.left='8px';
this.options.title = title;
},
// X轴设置
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, // 坐标轴是否显示
name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
},
nameRotate: optionsSetup.textAngleX, // 文字角度
inverse: optionsSetup.reversalX, // 轴反转
axisLabel: {
show: true,
interval: optionsSetup.textInterval, // 文字角度
rotate: optionsSetup.textAngle, // 文字角度
textStyle: {
color: optionsSetup.Xcolor, // x轴 坐标文字颜色
fontSize: optionsSetup.fontSizeX
},
formatter: function (params) {
let newParamsName = "";
let paramsNameNumber = params.length;
let provideNumber = 6;
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = "";
let start = p * provideNumber;
let end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
}
},
boundaryGap: ['10%', '10%'],
splitArea: {
show: optionsSetup.splitArea,
areaStyle: {
color: [optionsSetup.splitAreaColor, 'transparent'
]
}
}
};
this.options.xAxis = xAxis;
},
// Y轴设置
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "value",
show: optionsSetup.isShowY, // 坐标轴是否显示
name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.NameColorY,
fontSize: optionsSetup.NameFontSizeY
},
inverse: optionsSetup.reversalY, // y轴反转
axisLabel: {
show: true,
rotate: optionsSetup.textAngleY,// 文字角度
textStyle: {
color: optionsSetup.colorY, // y轴 坐标文字颜色
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
}
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
}
}
};
this.options.yAxis = yAxis;
},
// tooltip 提示语设置，鼠标放置显示
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
let that=this;
let kpiList = optionsSetup.kpiId.split(',');
const tooltip = {
trigger: "axis",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipsFontSize
},
formatter: function (param) {
let tips = '<div style="text-align: left;margin-left:10px;">'+param[0].name + "</div>";
$.each(param, function (i, v) {
tips += '<div style="text-align: left;margin-left:5px;">'+v.marker + " ";
var kpiUnit = '';
if (that.echartData.kpiMap[kpiList[v.seriesIndex]]) {
kpiUnit = that.echartData.kpiMap[kpiList[v.seriesIndex]].kpiUnit;
}
tips += (v.seriesName && v.seriesName != '1') ? (" " + v.seriesName) : '';
tips += " : " + v.value + " " + kpiUnit + "</div>";
});
return tips;
}
};
this.options.tooltip = tooltip;
},
// 边距设置
setOptionsMargin() {
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// 图例操作 legend
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
},
// 数据解析
setOptionsData() {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//去重
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
//获取堆叠样式
getStackStyle() {
const optionsSetup = this.optionsSetup;
let style = ""
if (optionsSetup.stackStyle == "upDown") {
style = "total"
}
return style
},
//静态数据
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
//数据
const series = [];
let xAxisList = []
let yAxisList = []
for (const i in val) {
xAxisList[i] = val[i].axis
yAxisList[i] = val[i].name
}
xAxisList = this.setUnique(xAxisList) // x轴 0725 0726 0727
yAxisList = this.setUnique(yAxisList) // y轴 A B C
for (const i in yAxisList) {
const data = new Array(yAxisList.length).fill(0)
for (const j in xAxisList) {
for (const k in val) {
if (val[k].name == yAxisList[i]) { // a = a
if (val[k].axis == xAxisList[j]) { // 0725
data[j] = val[k].data
}
}
}
}
series.push({
name: yAxisList[i],
type: "bar",
data: data,
barGap: "0%",
stack: this.getStackStyle(),
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
},
//颜色，圆角属性
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
this.options.series = series
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = xAxisList;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
} else {
this.options.xAxis.data = xAxisList;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val, optionsSetup);
this.flagInter = setInterval(() => {
this.getEchartData(val, optionsSetup);
}, refreshTime);
} else {
this.getEchartData(val, optionsSetup);
}
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
data.then(res => {
this.echartData=res;
this.renderingFn(optionsSetup, res);
});
},
renderingFn(optionsSetup, val) {
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
// x轴
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = val.xAxis;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
} else {
this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
const series = [];
for (const i in val.series) {
if (val.series[i].type == "bar") {
series.push({
name: val.series[i].name,
type: "bar",
data: val.series[i].data,
barGap: "0%",
stack: this.getStackStyle(),
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
},
//颜色，圆角属性
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
}
this.options.series = series
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
... ...
... ... @@ -269,7 +269,6 @@ export default {
fontSize: optionsSetup.fontSize
},
formatter:function (param) {
console.log("param",param,param.length)
let kpiName=optionsSetup.titleText;
let kpiUnit='';
// 鼠标悬浮线上提示
... ... @@ -357,7 +356,6 @@ export default {
axis[i] = val[i].axis;
data[i] = val[i].data
}
console.log("abc",axis,data)
// x轴
this.options.xAxis.data = axis;
// series
... ...
... ... @@ -2,8 +2,8 @@
<div :style="styleObj" @mouseleave.stop="closePressingDialog" ref="detailTable">
<div class="detail-table-title title-flex-between">
<div class="title-left">{{tableStyle.tableName}}</div>
<div class="title-right">
<span class="title-link" @click="handlerDetailDataNoPage()">更多</span>
<div class="title-right" v-if="!getUrlToken.isAlarm">
<span class="title-link" @click="handlerDetailDataNoPage">更多</span>
<span class="title-link" @click="downloadTableList">下载</span>
</div>
</div>
... ... @@ -23,6 +23,8 @@
<i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
</span>
</div>
<div v-if="getUrlToken.isAlarm" class="padding-10" :style="[headerTableStlye,tableRowHeight(),handleStyle]">操作</div>
</div>
<!--数据-->
<div class="bd">
... ... @@ -39,16 +41,21 @@
>
<el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" >
<template #content>
<span>{{ item[itemChild.key].kpiValue}}</span>
<span v-if="!getUrlToken.isAlarm">{{ item[itemChild.key].kpiValue}}</span>
<span v-if="getUrlToken.isAlarm">{{ item[itemChild.key][itemChild.key]}}</span>
</template>
<span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
<span v-if="!getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
:class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
{{ item[itemChild.key].kpiValue}}
</span>
<span v-if="getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key][itemChild.key])"
:class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] &&itemChild.key=='kpiName' && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
{{ item[itemChild.key][itemChild.key]}}
</span>
</el-tooltip>
<component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" />
<customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
<customMenuBox ref="customMenu" v-if="tableStyle.probeDown && pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key]" :flg="''"
:tableDataValueHead="itemChild"
... ... @@ -57,6 +64,8 @@
:resType="resType"
></customMenuBox>
</div>
<div @click="clearAlarm(item)" v-if="getUrlToken.isAlarm" :class="['infoList-flex','padding-10',{'listName-link':getUrlToken.isAlarm}]" :style="[handleStyle]">
告警消除</div>
</li>
</ul>
</div>
... ... @@ -98,23 +107,21 @@
>
<el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]" ref="elTooltip" trigger="hover" >
<template #content>
<span>{{ item[itemChild.key].kpiValue}}</span>
<span v-if="!getUrlToken.isAlarm">{{ item[itemChild.key].kpiValue}}</span>
<span v-if="getUrlToken.isAlarm">{{ item[itemChild.key][itemChild.key]}}</span>
</template>
<span @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
<span v-if="!getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
:class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
{{ item[itemChild.key].kpiValue}}
</span>
<span v-if="getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key][itemChild.key])"
:class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
{{ item[itemChild.key][itemChild.key]}}
</span>
</el-tooltip>
<component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" />
<!-- <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
:class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
{{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>-->
<customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
<customMenuBox v-if="tableStyle.probeDown && pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key]" :flg="''"
:tableDataValueHead="itemChild"
... ... @@ -144,7 +151,8 @@
</template>
</customDialog>
<!-- 直接点击表格数据展示 性能趋势弹框-->
<customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="dialogName"
<customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
:widthStyle="widthStyle" :title-name="dialogName"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
... ... @@ -153,6 +161,30 @@
</div>
</template>
</customDialog>
<!-- 告警消除弹框-->
<customDialog :dialogVisible="alarmTableVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" widthStyle="width:360px;height:275px;min-height:275px;max-height:275px;overflow:hidden;"
title-name="告警消除" :showFooter="true" :showCancelBtn="true" :showOkBtn="true"
@hideDialog="hideDialogTableAlarm" @okFunc="okFuncTableAlarm"
>
<template v-slot>
<div class="alarmClear">
<el-input
v-model="reason"
:rows="4"
type="textarea"
placeholder="消除意见（必填）"
/>
</div>
<div class="alarmRadio">
<span class="radioLabel">是否通知：</span>
<el-radio-group v-model="noticeFlag">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</div>
</template>
</customDialog>
</div>
</template>
... ... @@ -163,7 +195,10 @@ import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl}
import customDialog from "../../designerComponents/customDialog";
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
import textToImage from "../../designerComponents/textToImage";//文字转图片
import textToBg from "../../designerComponents/textToBg";//文字转背景
import textToBg from "../../designerComponents/textToBg";
import {saveClearAalarm} from "../../../../../../api/platform";
import {Message} from "element-ui";
//文字转背景
vue.use(VueSuperSlide);
export default {
... ... @@ -176,6 +211,9 @@ export default {
},
data() {
return {
alarmId:'',//消除告警的id
noticeFlag:0,//是否通知
reason:'',//消除意见
currentPage:1,
pageSize:10,
pageSizes:[10,50,100, 200, 300, 400],
... ... @@ -183,6 +221,7 @@ export default {
trendVisible:false,//性能趋势弹框
headerAll:[],
listAll:[],
alarmTableVisible:false,//告警消除弹框
tableVisible:false,//更多表格弹框
dialogVisible:false,//表格下探后的弹框
popoverVisible:false,//下探弹框
... ... @@ -275,10 +314,20 @@ export default {
}
},
handleStyle(){
const bodyStyle = this.optionsSetUp;
return{
width:'30%',
"border-left":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none',
"border-bottom":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none'
}
},
tableStyle(){
const tableStyleSetup=this.optionsSetUp;
return{
tableName:tableStyleSetup.tableName
tableName:tableStyleSetup.tableName,
probeDown:tableStyleSetup.probeDown
}
},
//表格下探列表
... ... @@ -325,11 +374,16 @@ export default {
},
//获取url地址中的token
getUrlToken(){
const tableStyleSetup=this.optionsSetUp;
let locationUrl=this.$route.query;
let resId=locationUrl.resId;
let token=locationUrl.access_token;
let flag=tableStyleSetup.flag;
let isAlarm=tableStyleSetup.isAlarm;
let urlObj={
resId:resId,
flag:flag,
isAlarm:isAlarm,
token:token
}
return urlObj;
... ... @@ -459,24 +513,26 @@ export default {
}
colArr.push(columnObj)
})
content.map((cv) => {
let kpi = {};
cv.map((ccv) => {
if (ccv.kpiValue || ccv.kpiValue === 0) {
kpi[ccv.kpiId] = ccv;
} else {
kpi[ccv.kpiId] = {
kpiValue: "",
kpiUnit: "",
kpiIdent: "0",
isWarning: 0,
};
}
if(this.getUrlToken.isAlarm){
datas=content;
}else{
content.map((cv) => {
let kpi = {};
cv.map((ccv) => {
if (ccv.kpiValue || ccv.kpiValue === 0) {
kpi[ccv.kpiId] = ccv;
} else {
kpi[ccv.kpiId] = {
kpiValue: "",
kpiUnit: "",
kpiIdent: "0",
isWarning: 0,
};
}
})
datas.push(kpi);
})
datas.push(kpi);
})
}
if(flg=='all'){
this.headerAll=colArr;
this.listAll=datas;
... ... @@ -486,7 +542,7 @@ export default {
}
this.tableFiledColumnSort();
},
handlerDetailData(valData,sortBy){
async handlerDetailData(valData,sortBy){
let kpiArr=[]
let kpiIdStr='';
if(this.header && this.header.length>0){
... ... @@ -502,33 +558,83 @@ export default {
kpiIdStr=kpiArr.join(',');
}
let param={
kpiId:kpiIdStr
resId:this.getUrlToken.resId,
kpiId:kpiIdStr,
flagPrifix:this.getUrlToken.flag,
page:this.currentPage,
size:this.pageSize
}
let sort=sortBy;
let sort=this.sortBy;
if(sort){
param.sort=sort;
param.sortBy=sort;
}
let headTable = valData;
if(kpiIdStr){
//根据kpiId集合获取表格数据
let tableData=getDetailTableData(param);
headTable=tableData.data[0];
let tableData='';
const { success,data } = await getDetailTableData(param,this.getUrlToken);
if (success ){
tableData=data;
}
if(tableData && tableData.length>0){
headTable=tableData[0];
}
}
if(headTable){
this.handleHeadContent(headTable)
}
this.handleHeadContent(headTable)
},
//打开更多表格
handlerDetailDataNoPage(){
let headTable =getDetailTableDataNoPage();
this.handleHeadContent(headTable.data[0],'all');
this.widthStyle='';
// this.setDialog('table');
this.tableVisible=true;
async handlerDetailDataNoPage(){
let kpiArr=[];
let kpiIdStr='';
if(this.header && this.header.length>0){
this.header.map(item=>{
if(item.isStatic){
}else{
if(item.key!='KPIF74D9D2B'){
kpiArr.push(item.key)
}
}
})
}
if(kpiArr && kpiArr.length>0){
kpiIdStr=kpiArr.join(',');
}
let param={
resId:this.getUrlToken.resId,
kpiId:kpiIdStr,
flagPrifix:this.getUrlToken.flag,
}
let sort=this.sortBy;
if(sort){
param.sortBy=sort;
}
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');
this.tableVisible=true;
}
},
//点击表格内容名称事件
clickListName(obj,tableDataValueHead){
if(obj.kpiIdent==1 || obj.isWarning==1){
let isIf=obj.kpiIdent==1 || obj.isWarning==1;
if(this.getUrlToken.isAlarm){
//告警表格的判断
isIf=tableDataValueHead.key=='kpiName' && (obj.kpiIdent==1 || obj.isWarning==1);
}else{
isIf=obj.kpiIdent==1 || obj.isWarning==1;
}
if(isIf){
this.widthStyle='';
this.pressingValue=obj;
this.dialogNameStyle(obj)
... ... @@ -536,6 +642,7 @@ export default {
this.trendVisible=true;
}
},
//设置性能趋势图
setTrend(tableDataValueHead){
... ... @@ -580,7 +687,96 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.list = res;
if(res && res.length>0){
// this.handlerDetailData(res[0].data[0]);
if(!this.getUrlToken.isAlarm){
//普通详情表格
console.log("lllll",res[0].data[0])
this.handleHeadContent(res[0].data[0]);
}else{
//告警表格
let tableData=res[0].data;
//alarmLevel,alarmContent,kpiName,updateTime
if(tableData && tableData.length>0){
let head=[{
id: "alarmLevel",
name: "告警级别",
unit: ""
},
{
id: "alarmContent",
name: "告警内容",
unit: ""
},
{
id: "kpiName",
name: "指标名称",
unit: ""
},
{
id: "updateTime",
name: "告警时间",
unit: ""
}
]
let content=[];
tableData.map(item=>{
let contentObj={};
head.map(hv=>{
contentObj[hv.id]=item;
})
content.push(contentObj)
})
let obj={
header:head,
content:content
}
this.handleHeadContent(obj);
let isNewData=false;
let addTableData=[];
let addTableDataOld=this.optionsSetUp.dynamicAddTable;
addTableDataOld.map(v=>{
head.map((item,index)=>{
if(v.key==item.key){
isNewData=false;
addTableData.push({
columnSort:v.columnSort?v.columnSort:index,
componentName:v.componentName?v.componentName:1,
isStatic:false,
key:item.id,
name:item.name,
width:v.width
})
}else{
isNewData=true;
}
})
})
if(isNewData){
head.map((item,index)=>{
addTableData.push({
columnSort:index,
componentName:1,
isStatic:false,
key:item.id,
name:item.name,
width:"50%"
})
})
}
console.log("addTableData",addTableData)
// this.optionsSetUp.dynamicAddTable=addTableData;
console.log("this.optionsSetUp.dynamicAddTable",this.optionsSetUp.dynamicAddTable)
}
}
}
// this.list = res;
this.hackResetFun();
});
},
... ... @@ -591,6 +787,7 @@ export default {
this.hackReset = true;
});
},
// 计算 奇偶背景色
bodyTable(index) {
var styleJson = {};
... ... @@ -702,6 +899,15 @@ export default {
this.tableVisible=false;
},
//告警消除弹框关闭确定
hideDialogTableAlarm(){
this.alarmTableVisible=false;
},
okFuncTableAlarm(){
// this.alarmTableVisible=false;
this.clearAlarmHandle();
},
//排序
changeSort(item,flg){
if(this.sortCaret==flg){
... ... @@ -792,6 +998,44 @@ export default {
}
},
//消除告警
clearAlarm(obj){
///
this.alarmId=obj.alarmContent.id;
this.alarmTableVisible=true;
},
async clearAlarmHandle(){
if(this.reason){
let params={
ids:this.alarmId,
reason:this.reason,
access_token: this.getUrlToken.token,
noticeFlag:this.noticeFlag
}
const { success } = await saveClearAalarm(params,this.getUrlToken);
if(success){
Message({
message: '告警已消除！',
type: 'success',
duration: 3 * 1000
});
}else{
Message({
message: '告警消除失败，请与管理员联系！',
type: 'error',
duration: 3 * 1000
});
}
this.alarmTableVisible=false;
}else{
Message({
message: '请填写消除意见',
type: 'warning',
duration: 3 * 1000
});
}
}
}
};
... ... @@ -1029,4 +1273,12 @@ export default {
.padding-10{
padding:5px;
}
.alarmClear{
margin:15px;
overflow: hidden;
}
.alarmRadio{
margin:20px;
text-align: left;
}
</style>
... ...
... ... @@ -44,12 +44,6 @@ export default {
ispreview: Boolean
},
data() {
/*this.myChart={
click:function(e){
console.log("111",e)
}
}*/
return {
trendVisible:false,//性能趋势弹框
dataValue:'',
... ... @@ -425,7 +419,7 @@ export default {
const data = this.queryEchartsData(val);
data.then(res => {
this.tableDataValue=res.map;
this.setTrend(res.map)
this.setTrend(res[0].value)
this.renderingFn(res);
});
},
... ... @@ -434,7 +428,7 @@ export default {
const series = this.options.series;
const data = [
{
value: val[0].value
value: val[0].value.value
}
]
const detail = {
... ... @@ -447,11 +441,17 @@ export default {
}
series[0].data = data
series[0].detail = detail
this.dataValue=(val[0].value?val[0].value:'0')+'%';
this.dataValue=(val[0].value.value?val[0].value.value:'0')+'%';
},
//设置性能趋势图
setTrend(data){
let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+'&flag='+data.flag+'&warning='+data.isWarning
let flg='&flg=';
if(data.flag){
flg+=data.flag;
}else {
flg+=data.subResId;
}
let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning
+'&ident='+data.ident
+'&trend='+data.trend
+'&name='+data.name;
... ...
... ... @@ -44,6 +44,7 @@ import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
import monitorCustomBarStack from "./monitor/customBarStack";
export default {
name: "WidgetTemp",
... ... @@ -80,7 +81,8 @@ export default {
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
monitorCustomLineChart,
monitorCustomBarStack
},
model: {
prop: "value",
... ...
... ... @@ -55,6 +55,7 @@ import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
import monitorCustomBarStack from "./monitor/customBarStack";
export default {
... ... @@ -91,7 +92,8 @@ export default {
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
monitorCustomLineChart,
monitorCustomBarStack
},
model: {
prop: "value",
... ...