monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 4a1d9318a8caaeab6c37eed4976ac590192338af 2 parents 989c929a f8dd14a6

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/anji-plus-report 

 Conflicts:
	report-ui/src/views/report/bigscreen/designer/tools/main.js
Inline Side-by-side
Showing 14 changed files with 1427 additions and 230 deletions
... ... @@ -4,6 +4,7 @@ const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:9095"'
BASE_API: '"http://127.0.0.1:9095"',
BASE_API_other: '"https://192.168.0.69:8080"'
// BASE_API: '"http://10.108.26.197:9095"'
})
... ...
import request from '@/utils/request'
import request from '@/utils/request1'
import { getShareToken, getToken } from "@/utils/auth";
import axios from 'axios';
//自监控平台接口数据联调 // Start LSQ 2022/1/13 10:52 TODO
export function getData(data) {
// export function getData(data) {
// return request({
// url: 'reportDashboard/getData',
// method: 'post',
// headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
// data,
// })
// }
//性能趋势图路径
export function getTrendBaseUrl() {
let baseUrl=process.env.BASE_API_other;
// baseUrl='http://localhost:8088';
return baseUrl;
}
//获取告警策略列表数据
export function getAlarmPolicy(params) {
return request({
url: '/api-web/alarmPolicy/list?policyType=0&kpiId=' +params.kpiId+'&access_token='+params.token,
headers: { 'Authorization': "Bearer "+params.token },
method: 'get',
})
}
//获取告警订阅列表数据
export function getAlarmSubscribe(params) {
return request({
url: '/api-web/alarmsubscribe/list?access_token='+params.token,
headers: { 'Authorization': "Bearer "+params.token },
method: 'get',
})
}
//保存告警设置
export function saveKpiPolicy(params,urlObj) {
return request({
url: '/api-web/alarmPolicy/save/kpipolicy?access_token='+urlObj.token,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'post',
data:params
})
}
//保存过滤单指标
export function saveSetKpiFilter(params,urlObj) {
let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag+'&isOne='+params.isOne;
return request({
url: 'reportDashboard/getData',
url: '/api-web/filterkpi/kpi/filter?access_token='+urlObj.token+paramsStr,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
// data:params
})
}
//获取压制次数
export function getKpiPressTimes(params,urlObj) {
let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag;
return request({
url: '/api-web/manage/resource/res/kpi/findIgnore?access_token='+urlObj.token+paramsStr,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
})
}
//保存压制次数
export function saveSetKpiPressTimes(params,urlObj) {
return request({
url: '/api-web/manage/resource/res/kpi/ignore?access_token='+urlObj.token,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'post',
headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
data,
data:params
})
}
//纳入容量预测
export function saveCaAdd(params,urlObj) {
let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&resType='+params.resType;
return request({
url: '/api-web/caUnit/add?access_token='+urlObj.token+paramsStr,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
})
}
//获取资源类型
export function getResType(params,urlObj) {
return request({
url: 'api-web/manage/resource/findById?resId='+params.resId+'&access_token='+urlObj.token,
headers: { 'Authorization': "Bearer "+urlObj.token },
method: 'GET',
})
}
export function getHealth(data) {
... ... @@ -140,7 +217,7 @@ export function getDetailTableData(param){
"kpiId": "KPIA91F44E7",
"kpiName": "文件系统总大小",
"flag": "fs-",
"kpiValue": "98.30 GB",
"kpiValue": "9812345678912563412588.30 GB",
"collTime": null,
"duration": null,
"createTime": null,
... ... @@ -789,7 +866,7 @@ export function getDetailTableData(param){
"kpiId": "KPI7AC1664E",
"kpiName": "文件系统挂载",
"flag": "fs-runuser0",
"kpiValue": "/run/user/0 ",
"kpiValue": "/run/user/0/run1/user1/01 ",
"collTime": null,
"duration": null,
"createTime": null,
... ... @@ -2508,7 +2585,9 @@ export function getDetailTableData(param){
"str": null,
"totalRow": null
}
if(params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'){
// params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'
let kpiIdArr=params.kpiId.split(',');
if(kpiIdArr.length>4){
console.log("a1")
tableData=detailTableData1;
}else{
... ... @@ -2638,7 +2717,7 @@ export function getDetailTableDataNoPage(){
"kpiId": "KPIA91F44E7",
"kpiName": "文件系统总大小",
"flag": "fs-",
"kpiValue": "196.74 GB",
"kpiValue": "123456789987654321123456789987.74 GB",
"collTime": null,
"duration": null,
"createTime": null,
... ... @@ -3287,7 +3366,7 @@ export function getDetailTableDataNoPage(){
"kpiId": "KPI7AC1664E",
"kpiName": "文件系统挂载",
"flag": "fs-runuser0",
"kpiValue": "/run/user/0 ",
"kpiValue": "/run/user/0/run2/user3/03 ",
"collTime": null,
"duration": null,
"createTime": null,
... ...
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API_other, // api 的 base_url
timeout: 20000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
config.headers['Authorization'] = (getToken() == null || getToken() == undefined) ? '' : getToken()
return config
},
error => {
// Do something with request error
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code == '50008' || res.code == '50012' || res.code == '50014') {
MessageBox.confirm(
'你已被登出，可以取消继续留在该页面，或者重新登录',
'重新登录',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
sessionStorage.clear()
localStorage.clear()
window.location.href = "/";
})
}
else if (res.code !== '200' && res.code !== 0) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
return response.data
} else {
return response.data
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
... ...
... ... @@ -286,16 +286,26 @@ export default {
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;
} else {
// 编辑
this.formData[this.indexEditor] = this.rowFormData;
this.$set(this.formData, this.indexEditor, this.rowFormData);
this.formData.sort(this.compare('columnSort'));
this.editDialogVisible = false;
}
this.$emit("input", this.formData);
this.$emit("change", this.formData);
},
//数组排序
compare(property){
return function(a,b){
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
}
},
// 删除
handleDeleteClick(index,row) {
this.formData.splice(index, 1);
... ...
... ... @@ -49,7 +49,7 @@ export default {
watch: {
dialogVisible: {
handler(val) {
console.log("dialogVisible",val)
// console.log("dialogVisible",val)
},
deep: true
}
... ... @@ -64,7 +64,7 @@ export default {
},
okFunc(){
// this.dialogVisible = false;
this.$emit('okfunc');
this.$emit('okFunc');
}
}
}
... ...
... ... @@ -6,7 +6,7 @@
<img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
</template>
<div class="info-ul" style="width:140px;" >
<div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox">
<div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg)" v-for="itemMenu in detailMenubox">
<i class="el-icon-link icon-div"></i>{{itemMenu.name}}
</div>
</div>
... ... @@ -20,24 +20,24 @@
<!-- 告警设置{{pressingValue}}-->
<div class="alarm-li flex-center">
<div class="alarm-li-label">告警策略</div>
<el-select v-model="strategyValue" filterable class="m-2 alarm-li-select" placeholder="选择告警策略">
<el-select v-model="strategyValue" filterable clearable class="m-2 alarm-li-select" placeholder="选择告警策略">
<el-option
v-for="item in strategyData"
:key="item.value"
:label="item.label"
:value="item.value"
:key="item.alarmPolicyId"
:label="item.alarmPolicyName"
:value="item.alarmPolicyId"
>
</el-option>
</el-select>
</div>
<div class="alarm-li flex-center">
<div class="alarm-li-label">告警列表</div>
<el-select v-model="alarmListValue" multiple filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
<el-select v-model="alarmListValue" multiple clearable filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
<el-option
v-for="item in alarmListData"
:key="item.value"
:label="item.label"
:value="item.value"
:key="item.subId"
:label="item.subName"
:value="item.subId"
>
</el-option>
</el-select>
... ... @@ -45,17 +45,25 @@
</div>
<div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
过滤单指标{{pressingValue}}
<!-- 过滤单指标{{pressingValue}}-->
您确定要对当前指标进行过滤处理？
</div>
<div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
过滤多指标{{pressingValue}}
<!-- 过滤多指标{{pressingValue}}-->
您确定要对当前指标进行过滤处理？
</div>
<div v-if="dialogName=='performance_trends'" class="txtScroll-top">
<div>性能趋势{{pressingValue}}</div>
<div>性能趋势{{pressingValue.kpiValue}}</div>
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
<div v-if="dialogName=='pressing_times'" class="txtScroll-top">
压制次数{{pressingValue}}
<!-- 压制次数{{pressingValue}}-->
<el-input
v-model="ignoreCnt"
:rows="2"
type="textarea"
placeholder="压制次数（必填，建议100以内）"
/>
</div>
<div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
纳入容量预测{{pressingValue}}
... ... @@ -68,6 +76,8 @@
<script>
import customDialog from "./customDialog";
import {Message} from "_element-ui@2.15.6@element-ui";
import {getAlarmPolicy,getAlarmSubscribe,saveKpiPolicy,saveSetKpiFilter,getKpiPressTimes,saveSetKpiPressTimes,saveCaAdd,getTrendBaseUrl} from "@/api/platform";
export default {
name: "customMenuBox",
... ... @@ -77,15 +87,15 @@ export default {
props: {
heightStyle: String,
marginStyle: String,
trendSrc:{
type:String,
default:'',
tableDataValueHead:{
type:Object,
default: {},
},
tableName:{
type:String,
default:'',
},//弹框名称
detailMenubox: {
detailMenubox: {
type: Array,
default: [
{
... ... @@ -121,13 +131,18 @@ export default {
]
},//表格下探数据
tableDataValue: {
type: String,
default: ''
type: Object,
default: {}
},//单元格内容
flg: {
type: String,
default: ''
},//标志
urlObj:{},//url地址参数对象
resType:{
type: String,
default: ''
},//资源类型
},
data() {
return {
... ... @@ -136,31 +151,16 @@ export default {
dialogName: '',
// trendSrc:'',//性能走势图地址
// pressingVisible:'',
pressingValue:'',
strategyData: [{
label:'策略一',
value:'001'
}],//告警策略数据
pressingValue:'',//压制次数
ignoreCnt:'',
strategyData: [],//告警策略数据
strategyValue:'',//告警策略值
alarmListData:[{
label:'告警列表一',
value:'001'
},{
label:'告警列表二',
value:'002'
},],//告警列表数据
alarmListData:[],//告警列表数据
alarmListValue:[],//告警列表值
trendSrc:'',//性能趋势图地址
}
},
watch: {
trendSrc: {
handler(val) {
console.log("trendSrc",val)
},
deep: true
},
tableName:{
handler(val){
console.log("titlename",val)
... ... @@ -168,8 +168,20 @@ export default {
deep:true
}
},
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;
}
},
mounted() {
},
methods: {
//表格下探关闭
... ... @@ -181,14 +193,33 @@ export default {
this.dialogVisible=false;
},
okFunc(){
this.dialogVisible=false;
if(this.dialogName=='filter_sheet_indicator'){
//保存设置单指标过滤
this.setKpiFilter(true);
this.dialogVisible=false;
}else if(this.dialogName=='filter_multiple_indicators'){
//保存设置多指标过滤
this.setKpiFilter(false);
this.dialogVisible=false;
}else if(this.dialogName=='alarm_setting'){
//保存告警设置
this.alarmSetSave();
}else if(this.dialogName=='pressing_times'){
//保存压制次数
this.setKpiPressTimes();
}
// this.dialogVisible=false;
},
//表格下探
pressingDialog(itemMenu,value,flg){
this.pressingValue=value;
pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg){
this.pressingValue=tableDataValue;
let kpiId=tableDataValue.kpiId;
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
let isDialog=true;
if(itemMenu.type=='alarm_setting'){
this.widthStyle='width:70%;';
this.getAlarmPolicyData(kpiId)
}else if(itemMenu.type=='filter_sheet_indicator'){
this.widthStyle=styleStr;
... ... @@ -198,16 +229,23 @@ export default {
}else if(itemMenu.type=='performance_trends'){
this.widthStyle='';
this.setTrend(tableDataValueHead);
}else if(itemMenu.type=='pressing_times'){
this.widthStyle=styleStr;
this.widthStyle='width:400px;height: 200px;min-height: 200px;overflow: hidden;';
//获取压制次数
this.getKpiPressTimesData(tableDataValue);
}else if(itemMenu.type=='include_capacity_forecast'){
this.widthStyle=styleStr;
isDialog=false;
this.caAdd();
}
this.setDialog(itemMenu.type,flg);
if(isDialog){
this.setDialog(itemMenu.type,flg);
}
this.closePopoverMenu();
... ... @@ -232,6 +270,162 @@ export default {
this.dialogName=name;
},
//设置指标过滤,isOne true单指标过滤，false多指标过滤
async setKpiFilter(isOne){
let params={
resId:this.getUrlToken.resId,
kpiId:this.pressingValue.kpiId,
flag:this.pressingValue.flag,
subFlag:this.pressingValue.kpiName,
isOne:isOne===true?'s':'m'
}
const { success } = await saveSetKpiFilter(params,this.getUrlToken);
if (success) {
Message({
message: '过滤设置成功',
type: 'success',
duration: 3 * 1000
})
}else{
Message({
message: '过滤设置失败',
type: 'error',
duration: 3 * 1000
})
}
},
//设置性能趋势图
setTrend(tableDataValueHead){
let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
+'&ident='+this.pressingValue.kpiIdent
+'&trend='+this.pressingValue.isTrend
+'&unit='+tableDataValueHead.unit
+'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
let baseUrl=getTrendBaseUrl();
this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
},
//获取告警策略列表数据
async getAlarmPolicyData(kpiId){
let obj=this.getUrlToken;
let params={
kpiId:kpiId,
token:obj.token
}
const { code, data } = await getAlarmPolicy(params);
if (code != 200 && code!=0) return;
this.strategyData=data;
this.getAlarmSubscribeData(params);
},
//获取告警订阅列表数据
async getAlarmSubscribeData(params){
const { code, data } = await getAlarmSubscribe(params);
if (code != 200 && code!=0) return;
this.alarmListData=data;
},
//保存告警设置
async alarmSetSave(){
let kpiSubscribe=this.alarmListValue.join(',');
if(!this.strategyValue || !kpiSubscribe){
Message({
message: '告警策略或者告警订阅不能为空',
type: 'warning',
duration: 3 * 1000
});
return;
}
let params={
resId:this.getUrlToken.resId,
kpiId:this.pressingValue.kpiId,
flag:this.pressingValue.flag,
policyId:this.strategyValue,
subId:kpiSubscribe
}
const { success } = await saveKpiPolicy(params,this.getUrlToken);
if (success){
Message({
message: '设置成功',
type: 'success',
duration: 3 * 1000
});
}else{
Message({
message: '设置失败',
type: 'error',
duration: 3 * 1000
});
}
this.dialogVisible=false;
},
//获取压制次数
async getKpiPressTimesData(obj){
let params= {
resId: this.getUrlToken.resId,
kpiId: obj.kpiId,
flag: obj.flag,
subFlag: obj.kpiName
}
const { code, object } = await getKpiPressTimes(params,this.getUrlToken);
if (code != 200 && code!=0) return;
this.ignoreCnt = object?object.ignoreCnt:"";
},
//保存设置压制次数
async setKpiPressTimes(){
let params= {
access_token:this.getUrlToken.token,
resId: this.getUrlToken.resId,
kpiId: this.pressingValue.kpiId,
flag: this.pressingValue.flag,
subFlag: this.pressingValue.kpiName,
ignoreCnt:this.ignoreCnt
}
const { success } = await saveSetKpiPressTimes(params,this.getUrlToken);
if(success){
Message({
message: '设置成功',
type: 'success',
duration: 3 * 1000
});
}else{
Message({
message: '设置失败,请与管理员联系!',
type: 'error',
duration: 3 * 1000
});
}
this.dialogVisible=false;
},
//纳入容量预测
async caAdd(){
let params= {
resId: this.getUrlToken.resId,
kpiId: this.pressingValue.kpiId,
flag: this.pressingValue.flag,
resType: this.resType,
}
const { success } = await saveCaAdd(params,this.getUrlToken);
if(success){
Message({
message: '纳入容量预测成功',
type: 'success',
duration: 3 * 1000
});
}else{
Message({
message: '纳入容量预测失败!',
type: 'error',
duration: 3 * 1000
});
}
this.dialogVisible=false;
},
}
}
</script>
... ...
/*
* @Descripttion: 仪表盘使用率 json
* @version:
* @Author: lsq
* @Date: 2022-2-16
* @LastEditors: lsq
* @LastEditTime: 2022-2-16
*/
export const monitorGaugeRate = {
code: 'monitor-gauge-rate',
type: 'chart',
label: '仪表盘使用率',
icon: 'iconyibiaopan',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '仪表盘使用率',
},
{
type: 'el-input-text',
label: '标题名称',
name: 'titleName',
required: false,
placeholder: '',
value: 'CPU使用率',
},
{
type: 'el-select',
label: '标题位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'custom-upload',
label: '标题图片地址',
name: 'imageAdress',
required: false,
placeholder: '',
value: '',
},
[
{
name: "下探设置",
list: [
{
type: 'el-switch',
label: '是否有下探',
name: 'probeDown',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '告警设置',
name: 'alarm_setting',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '过滤单指标',
name: 'filter_sheet_indicator',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '过滤多指标',
name: 'filter_multiple_indicators',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '性能趋势',
name: 'performance_trends',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '压制次数',
name: 'pressing_times',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '纳入容量预测',
name: 'include_capacity_forecast',
required: false,
placeholder: '',
value: true
}
]
},
],
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: "圆环设置",
list: [
{
type: 'el-switch',
label: '显示',
name: 'ringShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '圆环宽度',
name: 'pieWeight',
require: false,
placeholder: '',
value: 10,
},
]
},
{
name: '0%~30%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color30p0',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color30p5',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color30p10',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,1)'
},
]
},
{
name: '30%~70%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color70p0',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color70p5',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color70p10',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,1)'
},
]
},
{
name: '70%~100%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color100p0',
required: false,
placeholder: '',
value: 'rgba(175, 36, 74,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color100p5',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color100p10',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,1)'
},
]
},
{
name: "刻度线",
list: [
{
type: 'el-switch',
label: '显示',
name: 'tickShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'tickDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '长度',
name: 'tickLength',
require: false,
placeholder: '',
value: 10,
},
{
type: 'el-input-number',
label: '宽度',
name: 'tickWidth',
require: false,
placeholder: '',
value: 2,
},
]
},
{
name: "指标线",
list: [
{
type: 'el-switch',
label: '显示',
name: 'splitShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'splitDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '长度',
name: 'splitLength',
require: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '宽度',
name: 'splitWidth',
require: false,
placeholder: '',
value: 4,
},
]
},
{
name: "指标",
list: [
{
type: 'el-switch',
label: '显示',
name: 'labelShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'labelDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '字号',
name: 'labelFontSize',
require: false,
placeholder: '',
value: 10,
},
{
type: 'vue-color',
label: '颜色',
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
},
]
},
{
name: "数值",
list: [
{
type: 'vue-color',
label: '颜色',
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字号',
name: 'labelFontSize',
require: false,
placeholder: '',
value: 14,
},
{
type: 'el-select',
label: '字体粗细',
name: 'labelFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
]
},
],
],
// 数据
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: [
{"num":50}
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-text',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
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,
},
],
}
}
... ...
... ... @@ -63,7 +63,7 @@ export const monitorResourceStatus = {
name: 'imageAdressHealthBg',
required: false,
placeholder: '',
value: require("../../../../../../../assets/images/healthStatus/state_bg.png"),
value: '',
},
{
type: 'custom-upload',
... ...
... ... @@ -39,6 +39,7 @@ import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monit
import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information";
import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
export const {widgetTool,monitor} = {
... ... @@ -76,6 +77,7 @@ export const {widgetTool,monitor} = {
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder
monitorBgBorder,
monitorGaugeRate
]
}
... ...
... ... @@ -17,9 +17,8 @@
:key="index"
:class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
>
{{ item.name }}
<!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':(sortBy==item.key && sortVal=='bottom'),'el-icon-caret-top':(sortBy==item.key && sortVal=='top')}]" @click="changeSort(item)"></i>-->
<span v-if="tableFiledSort(index)" class="caret-wrapper">
{{ item.name }}
<span v-if="tableFiledSort(index)" class="caret-wrapper">
<i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
<i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
</span>
... ... @@ -36,14 +35,13 @@
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
@mouseenter="pressingTimes(index,idx)"
:ref="'headerRef'+index+'-'+idx"
:data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)"
:data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx,'')"
>
<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>
</template>
<span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
<span @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>
... ... @@ -52,9 +50,10 @@
<customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
:tableDataValue="item[itemChild.key]" :flg="''"
:tableDataValueHead="itemChild"
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
:resType="resType"
></customMenuBox>
</div>
</li>
... ... @@ -74,10 +73,9 @@
v-for="(item, index) in headerAll"
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
:key="index"
:class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}"
:class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
>
{{ item.name }}
<!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':sortVal=='bottom','el-icon-caret-top':sortVal=='top'}]" @click="changeSort(item)"></i>-->
<span v-if="tableFiledSort(index)" class="caret-wrapper">
<i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
<i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
... ... @@ -90,20 +88,37 @@
<li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
<div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
{{ index+1 }}</div>
<div class="infoList-flex"
<div class="infoList-flex text-overflow padding-10"
v-for="(itemChild, idx) in headerAll"
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
@mouseenter="pressingTimes(index,idx)"
:data-tip="tableFiledMaxWidth('isOverflow1'+index+'-'+idx,index,idx,'more')"
>
<span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
<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>
</template>
<span @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>
</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>
{{ 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)"
:detailMenubox="calcDetailMenubox"
:tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
:tableDataValue="item[itemChild.key]" :flg="''"
:tableDataValueHead="itemChild"
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
:resType="resType"
></customMenuBox>
</div>
</li>
... ... @@ -132,49 +147,17 @@
>
<template v-slot>
<div class="txtScroll-top">
性能趋势{{pressingValue}}
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
</template>
</customDialog>
<!-- <div class="dialog-div" v-if="tableVisible" :style="heightStyle">
<div class="dialog-div-content" :style="marginStyle" >
<div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>
</div>
</div>-->
<!-- <customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
<div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
告警设置{{pressingValue}}
</div>
<div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
过滤单指标{{pressingValue}}
</div>
<div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
过滤多指标{{pressingValue}}
</div>
<div v-if="dialogName=='performance_trends'" class="txtScroll-top">
性能趋势{{pressingValue}}
<iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
<div v-if="dialogName=='pressing_times'" class="txtScroll-top">
压制次数{{pressingValue}}
</div>
<div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
纳入容量预测{{pressingValue}}
</div>
</template>
</customDialog>-->
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} from "@/api/platform";
import customDialog from "../../designerComponents/customDialog";
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
import textToImage from "../../designerComponents/textToImage";//文字转图片
... ... @@ -219,38 +202,6 @@ export default {
optionsData: {},
pressingVisible:'',
isHover:false,
/*detailMenubox:[
{
name:'告警设置',
type:'alarm_setting',
isDisplay:true
},
{
name:'过滤单指标',
type:'filter_sheet_indicator',
isDisplay:true
},
{
name:'过滤多指标',
type:'filter_multiple_indicators',
isDisplay:true
},
{
name:'性能趋势',
type:'performance_trends',
isDisplay:true
},
{
name:'压制次数',
type:'pressing_times',
isDisplay:true
},
{
name:'纳入容量预测',
type:'include_capacity_forecast',
isDisplay:true
}
],*/
dialogName:'',//表格名称
pressingValue:'',//表格下探值
trendSrc:'',//性能走势图地址
... ... @@ -261,7 +212,9 @@ export default {
sortBy:'',//排序参数
sortCaret:'',//正序倒序
isEllipsis:[],//是否文字超出
isEllipsisMore:[],//是否文字超出
componentName:'',//组件名称
resType:'',//资源类型
};
},
computed: {
... ... @@ -367,6 +320,17 @@ export default {
})
}
return detailMenuBox;
},
//获取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;
}
},
watch: {
... ... @@ -376,15 +340,18 @@ export default {
this.optionsPosition = val.position;
this.optionsData = val.data;
this.initData();
this.getResTypeData();
},
deep: true
}
},
mounted() {
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.initData();
this.getResTypeData();
},
methods: {
initData() {
... ... @@ -557,28 +524,27 @@ export default {
// this.setDialog('table');
this.tableVisible=true;
},
/*//打开弹框
setDialog(name,flg){
this.dialogVisible=true;
this.dialogName=name;
},*/
//点击表格内容名称事件
clickListName(obj){
clickListName(obj,tableDataValueHead){
if(obj.kpiIdent==1 || obj.isWarning==1){
let trendsParams=obj;
// this.trendSrc='http://127.0.0.1:8088/vue3/index.html#/vue3/pieDetailLine?resId=08586dba3a5b4a01ad88e8878eed6d53&kpiId=KPI7054BC34&flag=cpu&ident=1&trend=1&name=CPU%E4%BD%BF%E7%94%A8%E7%8E%87x&access_token=6e14ca48-4d05-42cf-b232-97981035824f'
this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';
this.widthStyle='';
// this.setDialog('performance_trends')
this.pressingValue=obj.kpiValue;
this.pressingValue=obj;
this.dialogNameStyle(obj)
this.setTrend(tableDataValueHead)
this.trendVisible=true;
}
},
//设置性能趋势图
setTrend(tableDataValueHead){
let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
+'&ident='+this.pressingValue.kpiIdent
+'&trend='+this.pressingValue.isTrend
+'&unit='+tableDataValueHead.unit
+'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
let baseUrl=getTrendBaseUrl();
this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams;
},
//End LSQ 2022/1/20 10:23 TODO
handlerHead() {
const head = this.optionsSetUp.dynamicAddTable;
... ... @@ -652,14 +618,20 @@ export default {
return styleJson
},
//列最大宽
tableFiledMaxWidth(obj,index,idx){
tableFiledMaxWidth(obj,index,idx,flg){
let that=this;
this.$nextTick(() => {
let isOverflow=that.$refs[obj];
if(isOverflow && isOverflow[0]){
if(isOverflow && isOverflow[0]){
let cWidth = isOverflow[0].parentElement.scrollWidth;
let sWidth = isOverflow[0].scrollWidth;
that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
if(flg=='more'){
that.isEllipsisMore[index+'-'+idx]=!((sWidth+10) > cWidth);
}else {
that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
}
}
})
... ... @@ -704,41 +676,7 @@ export default {
return value1 - value2;
}
},
/* //表格下探
pressingDialog(itemMenu,value,flg){
this.pressingValue=value;
let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
if(itemMenu.type=='alarm_setting'){
this.widthStyle='width:70%;';
}else if(itemMenu.type=='filter_sheet_indicator'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='filter_multiple_indicators'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='performance_trends'){
this.widthStyle='';
}else if(itemMenu.type=='pressing_times'){
this.widthStyle=styleStr;
}else if(itemMenu.type=='include_capacity_forecast'){
this.widthStyle=styleStr;
}
this.setDialog(itemMenu.type,flg);
let key=this.$refs.popoverMenu;
if(key && key.length>0){
key.map(item=>{
item.showPopper=false
})
}
// this.$refs.popoverMenu.showPopper = false;
},*/
pressingTimes(index,idx){
this.pressingVisible=index+'-'+idx;
},
... ... @@ -816,7 +754,7 @@ export default {
dialogName = tableStyleSetup.tableName + kpiName;
} else {
let nameResType = tableStyleSetup.nameResType ? obj.resType ? obj.resType + '|' : '' : '';
let nameResType = tableStyleSetup.nameResType ? this.resType ? this.resType + '|' : '' : '';
let nameIPAddress = tableStyleSetup.nameIPAddress ? obj.ipAddr ? obj.ipAddr + '|' : '' : '';
let nameResName = tableStyleSetup.nameResName ? obj.resName ? obj.resName + '|' : '' : '';
let nameKpiName = tableStyleSetup.nameKpiName ? obj.kpiName ? obj.kpiName + '|' : '' : '';
... ... @@ -838,8 +776,19 @@ export default {
kpiIdArr.push(item.key)
}
})
console.log("kpiIdArr",kpiIdArr)
}
},
//获取资源类型
async getResTypeData(){
let params= {
resId: this.getUrlToken.resId,
}
const { success,obj } = await getResType(params,this.getUrlToken);
if (success && obj && obj.bean && obj.bean.resType){
this.resType=obj.bean.resType;
}
},
}
};
</script>
... ...
<template>
<div :style="styleObj" @click="isDisplay=false;">
<div class="title-div flex-start" :style="styleColor" @mouseenter="isDisplay=true;">
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" alt="">
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
<customMenuBox ref="customMenu" v-if="imgStyle.probeDown && isDisplay"
:detailMenubox="calcDetailMenubox"
:tableDataValue="tableDataValue" :flg="''"
:tableDataValueHead="tableDataValueHead"
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
:resType="resType"
></customMenuBox>
</div>
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import echarts from "echarts";
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
export default {
name: "gaugeRate",
components: {customMenuBox},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
isDisplay:false,
tableDataValue: {},
tableDataValueHead: {},
heightStyle:'',
marginStyle:'',
resType:'',
options: {
series: [
{
type: 'gauge',
z: 100,
axisLine: {
lineStyle: {
width: 10,
color: [
[
0.3,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(0, 237, 3,0.1)',
},
{
offset: 0.5,
color: 'rgba(0, 237, 3,0.6)',
},
{
offset: 1,
color: 'rgba(0, 237, 3,1)',
},
]),
],
[
0.7,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(255, 184, 0,0.1)',
},
{
offset: 0.5,
color: 'rgba(255, 184, 0,0.6)',
},
{
offset: 1,
color: 'rgba(255, 184, 0,1)',
},
]),
],
[
1,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(175, 36, 74,0.1)',
},
{
offset: 0.5,
color: 'rgba(255, 36, 74,0.6)',
},
{
offset: 1,
color: 'rgba(255, 36, 74,1)',
},
]),
],
],
},
},
pointer: {
itemStyle: {
color: 'auto',
},
},
axisTick: {
show: true,
distance: 0,
length: 10,
lineStyle: {
color: 'auto',
width: 2,
},
},
splitLine: {
show: true,
distance: 0,
length: 14,
lineStyle: {
color: 'auto',
width: 4,
},
},
axisLabel: {
show: true,
color: 'white',
distance: 2,
fontSize: 10,
},
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'white',
fontSize: 18,
},
data: [
{
value: 70,
},
],
},
],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {}
};
},
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
};
},
styleColor() {
return {
"text-align": this.optionsSetup.textAlign,
};
},
imgStyle() {
return {
imageAdress: this.optionsSetup.imageAdress,
titleName:this.optionsSetup.titleName,
probeDown:this.optionsSetup.probeDown
};
},
//表格下探列表
calcDetailMenubox(){
const menubox = this.optionsSetup;
let detailMenuBox=[];
if(menubox.alarm_setting){
detailMenuBox.push({
name:'告警设置',
type:'alarm_setting'
})
}
if(menubox.filter_sheet_indicator){
detailMenuBox.push({
name:'过滤单指标',
type:'filter_sheet_indicator'
})
}
if(menubox.filter_multiple_indicators){
detailMenuBox.push({
name:'过滤多指标',
type:'filter_multiple_indicators'
})
}
if(menubox.performance_trends){
detailMenuBox.push({
name:'性能趋势',
type:'performance_trends'
})
}
if(menubox.pressing_times){
detailMenuBox.push({
name:'压制次数',
type:'pressing_times'
})
}
if(menubox.include_capacity_forecast){
detailMenuBox.push({
name:'纳入容量预测',
type:'include_capacity_forecast'
})
}
return detailMenuBox;
},
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position; // 位置
this.optionsData = val.data; // 数据
this.optionsCollapse = val.collapse; // 折叠数据
this.optionsSetup = val.setup; // 样式
this.editorOptions();
},
deep: true
}
},
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
editorOptions() {
this.setOptions()
this.setOptionsData()
},
setOptions() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
if (series[0].type == 'gauge') {
const axisLine = {
show: optionsSetup.ringShow,
lineStyle: {
width: optionsSetup.pieWeight,
color: [
[
0.3,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: optionsSetup.color30p0,
},
{
offset: 0.5,
color: optionsSetup.color30p5,
},
{
offset: 1,
color: optionsSetup.color30p10,
},
]),
],
[
0.7,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: optionsSetup.color70p0,
},
{
offset: 0.5,
color: optionsSetup.color70p5,
},
{
offset: 1,
color: optionsSetup.color70p10,
},
]),
],
[
1,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: optionsSetup.color100p0,
},
{
offset: 0.5,
color: optionsSetup.color100p5,
},
{
offset: 1,
color: optionsSetup.color100p10,
},
]),
],
],
},
}
const axisTick = {
show: optionsSetup.tickShow,
distance: optionsSetup.tickDistance,
length: optionsSetup.tickLength,
lineStyle: {
color: 'auto',
width: optionsSetup.tickWidth,
},
}
const splitLine = {
show: optionsSetup.splitShow,
distance: optionsSetup.splitDistance,
length: optionsSetup.splitLength,
lineStyle: {
color: 'auto',
width: optionsSetup.splitWidth,
},
}
series[0].axisLine = axisLine
series[0].axisTick = axisTick
series[0].splitLine = splitLine
}
},
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const num = val[0]['num'];
const data = [
{
value: num
}
]
const detail = {
valueAnimation: true,
formatter: '{value} %',
color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight,
}
series[0].data = data
series[0].detail = detail
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const data = [
{
value: val[0].value
}
]
const detail = {
valueAnimation: true,
formatter: '{value} %',
color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight,
}
series[0].data = data
series[0].detail = detail
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
.title-div{
text-align: left;
padding:10px;
}
.title-name{
color:rgb(30,159,255);
font-size: 16px;
font-weight: bold;
}
.flex-start{
display: flex;
justify-content: start;
align-items: center;
}
</style>
... ...
... ... @@ -5,7 +5,7 @@
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
</div>
<el-row class="padding-top-30">
<el-row class="padding-top-30" v-if="hackReset">
<!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">-->
<el-col class="flex-around" :span="24" >
<div class="health-service">
... ... @@ -16,17 +16,20 @@
<div class="health-num-item">
<span class="health-color"></span>
<span class="health-num-title">严重告警：</span>
<span class="health-num">{{ healthNumData.yz }}</span>
<span class="health-num" v-if="healthNumData.yz && healthNumData.yz!='null'">{{ healthNumData.yz }}</span>
<span class="health-num" v-if="!healthNumData.yz || healthNumData.yz=='null'">0</span>
</div>
<div class="health-num-item">
<span class="health-color"></span>
<span class="health-num-title">重要告警：</span>
<span class="health-num">{{ healthNumData.zy }}</span>
<span class="health-num" v-if="healthNumData.zy && healthNumData.zy!='null'">{{ healthNumData.zy }}</span>
<span class="health-num" v-if="!healthNumData.zy || healthNumData.zy=='null'">0</span>
</div>
<div class="health-num-item">
<span class="health-color"></span>
<span class="health-num-title">一般告警：</span>
<span class="health-num">{{ healthNumData.yb }}</span>
<span class="health-num" v-if="healthNumData.yb && healthNumData.yb!='null'">{{ healthNumData.yb }}</span>
<span class="health-num" v-if="!healthNumData.yb || healthNumData.yb=='null'">0</span>
</div>
</div>
</el-col>
... ... @@ -44,15 +47,16 @@ export default {
name: "resourceStatus",
data() {
return {
hackReset: true,
options: {},
spanNum:24,//col的span的个数
healthStatusUrl:'',
healthNumData:{
healthNumData:{/*
icon: "worse",
state: "量",
state: "良",
yb: "0",
yz: "0",
zy: "1"
zy: "1"*/
},//资源状态告警个数数据 good worse worst
healthData:[
... ... @@ -123,21 +127,13 @@ export default {
},
imgStyleHealth() {
return {
imageAdressHealthBg:this.transStyle.imageAdressHealthBg?this.transStyle.imageAdressHealthBg:require("../../../../../../assets/images/healthStatus/state_bg.png"),
imageAdressHealthBg:this.transStyle.imageAdressHealthBg,
imageAdressHealthGood:this.transStyle.imageAdressHealthGood?this.transStyle.imageAdressHealthGood:require("../../../../../../assets/images/healthStatus/state_01.png"),
imageAdressHealthWorse:this.transStyle.imageAdressHealthWorse?this.transStyle.imageAdressHealthWorse:require("../../../../../../assets/images/healthStatus/state_02.png"),
imageAdressHealthBad:this.transStyle.imageAdressHealthBad?this.transStyle.imageAdressHealthBad:require("../../../../../../assets/images/healthStatus/state_03.png"),
dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'3'
};
},
/* healthDataComputed(){
let healthData=this.healthData;
healthData=this.initImageUrl();
if(this.imgStyleHealth.dataNum){
healthData=healthData.slice(0,this.imgStyleHealth.dataNum);
}
return healthData;
}*/
},
watch: {
value: {
... ... @@ -146,10 +142,9 @@ export default {
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
this.optionsData=val.data;
// this.init();
this.handlerData();
this.initImageUrl();
this.getHealthData();
this.initImageUrl();
},
deep: true
... ... @@ -161,10 +156,9 @@ export default {
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
// this.init();
this.handlerData();
this.initImageUrl();
this.getHealthData();
this.initImageUrl();
},
methods: {
... ... @@ -188,8 +182,12 @@ export default {
},
async init(){
const reportCode = this.$route.query.reportCode;
const { code, data } = await getData(reportCode);
if (code != 200) return;
console.log("aaa",this.$route.query)
let locationUrl=this.$route.query;
let resId=locationUrl.resId;
let token=locationUrl.access_token;
// const { code, data } = await getData(reportCode);
// if (code != 200) return;
},
handlerData() {
const resData = this.optionsData;
... ... @@ -200,28 +198,39 @@ export default {
},
handlerStaticData(data) {
this.healthNumData = data;
this.initImageUrl();
},
handlerDynamicData(data, refreshTime) {
if (!data) return;
/* if (this.ispreview) {
console.log("资源",data)
if (this.ispreview) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
}, refreshTime);
} else {
this.getEchartData(data);
}*/
}
},
async getHealthData(){
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
console.log("def",res)
if(res && res[0].code==0){
this.healthNumData = res[0].data;
/*
const { code, data } = await getHealth();
if (code != 200) return;
this.healthNumData=data;
console.log("health",data)*/
}
this.hackResetFun();
this.initImageUrl();
});
},
// vue hack 之强制刷新组件
hackResetFun() {
this.hackReset = false;
this.$nextTick(() => {
this.hackReset = true;
});
},
},
}
</script>
... ...
... ... @@ -42,6 +42,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
import monitorBasicInformation from "./monitor/basicInformation";
import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
export default {
name: "WidgetTemp",
... ... @@ -76,7 +77,8 @@ export default {
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder
monitorBgBorder,
monitorGaugeRate
},
model: {
prop: "value",
... ...
... ... @@ -53,6 +53,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
import monitorBasicInformation from "./monitor/basicInformation";
import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
export default {
... ... @@ -87,7 +88,8 @@ export default {
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder
monitorBgBorder,
monitorGaugeRate
},
model: {
prop: "value",
... ...