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') @@ -4,6 +4,7 @@ const prodEnv = require('./prod.env')
4 4
5 module.exports = merge(prodEnv, { 5 module.exports = merge(prodEnv, {
6 NODE_ENV: '"development"', 6 NODE_ENV: '"development"',
7 - BASE_API: '"http://127.0.0.1:9095"' 7 + BASE_API: '"http://127.0.0.1:9095"',
  8 + BASE_API_other: '"https://192.168.0.69:8080"'
8 // BASE_API: '"http://10.108.26.197:9095"' 9 // BASE_API: '"http://10.108.26.197:9095"'
9 }) 10 })
1 -import request from '@/utils/request' 1 +import request from '@/utils/request1'
2 import { getShareToken, getToken } from "@/utils/auth"; 2 import { getShareToken, getToken } from "@/utils/auth";
3 import axios from 'axios'; 3 import axios from 'axios';
4 //自监控平台接口数据联调 // Start LSQ 2022/1/13 10:52 TODO 4 //自监控平台接口数据联调 // Start LSQ 2022/1/13 10:52 TODO
5 -export function getData(data) { 5 +// export function getData(data) {
  6 +// return request({
  7 +// url: 'reportDashboard/getData',
  8 +// method: 'post',
  9 +// headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
  10 +// data,
  11 +// })
  12 +// }
  13 +//性能趋势图路径
  14 +
  15 +export function getTrendBaseUrl() {
  16 + let baseUrl=process.env.BASE_API_other;
  17 + // baseUrl='http://localhost:8088';
  18 + return baseUrl;
  19 +}
  20 +//获取告警策略列表数据
  21 +export function getAlarmPolicy(params) {
  22 + return request({
  23 + url: '/api-web/alarmPolicy/list?policyType=0&kpiId=' +params.kpiId+'&access_token='+params.token,
  24 + headers: { 'Authorization': "Bearer "+params.token },
  25 + method: 'get',
  26 + })
  27 +}
  28 +//获取告警订阅列表数据
  29 +export function getAlarmSubscribe(params) {
  30 + return request({
  31 + url: '/api-web/alarmsubscribe/list?access_token='+params.token,
  32 + headers: { 'Authorization': "Bearer "+params.token },
  33 + method: 'get',
  34 + })
  35 +}
  36 +//保存告警设置
  37 +export function saveKpiPolicy(params,urlObj) {
  38 + return request({
  39 + url: '/api-web/alarmPolicy/save/kpipolicy?access_token='+urlObj.token,
  40 + headers: { 'Authorization': "Bearer "+urlObj.token },
  41 + method: 'post',
  42 + data:params
  43 + })
  44 +}
  45 +//保存过滤单指标
  46 +export function saveSetKpiFilter(params,urlObj) {
  47 + let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag+'&isOne='+params.isOne;
6 return request({ 48 return request({
7 - url: 'reportDashboard/getData', 49 + url: '/api-web/filterkpi/kpi/filter?access_token='+urlObj.token+paramsStr,
  50 + headers: { 'Authorization': "Bearer "+urlObj.token },
  51 + method: 'GET',
  52 + // data:params
  53 + })
  54 +}
  55 +//获取压制次数
  56 +export function getKpiPressTimes(params,urlObj) {
  57 + let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag;
  58 + return request({
  59 + url: '/api-web/manage/resource/res/kpi/findIgnore?access_token='+urlObj.token+paramsStr,
  60 + headers: { 'Authorization': "Bearer "+urlObj.token },
  61 + method: 'GET',
  62 + })
  63 +}
  64 +//保存压制次数
  65 +export function saveSetKpiPressTimes(params,urlObj) {
  66 + return request({
  67 + url: '/api-web/manage/resource/res/kpi/ignore?access_token='+urlObj.token,
  68 + headers: { 'Authorization': "Bearer "+urlObj.token },
8 method: 'post', 69 method: 'post',
9 - headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },  
10 - data, 70 + data:params
  71 + })
  72 +}
  73 +//纳入容量预测
  74 +export function saveCaAdd(params,urlObj) {
  75 + let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&resType='+params.resType;
  76 + return request({
  77 + url: '/api-web/caUnit/add?access_token='+urlObj.token+paramsStr,
  78 + headers: { 'Authorization': "Bearer "+urlObj.token },
  79 + method: 'GET',
  80 + })
  81 +}
  82 +//获取资源类型
  83 +export function getResType(params,urlObj) {
  84 + return request({
  85 + url: 'api-web/manage/resource/findById?resId='+params.resId+'&access_token='+urlObj.token,
  86 + headers: { 'Authorization': "Bearer "+urlObj.token },
  87 + method: 'GET',
11 }) 88 })
12 } 89 }
13 export function getHealth(data) { 90 export function getHealth(data) {
@@ -140,7 +217,7 @@ export function getDetailTableData(param){ @@ -140,7 +217,7 @@ export function getDetailTableData(param){
140 "kpiId": "KPIA91F44E7", 217 "kpiId": "KPIA91F44E7",
141 "kpiName": "文件系统总大小", 218 "kpiName": "文件系统总大小",
142 "flag": "fs-", 219 "flag": "fs-",
143 - "kpiValue": "98.30 GB", 220 + "kpiValue": "9812345678912563412588.30 GB",
144 "collTime": null, 221 "collTime": null,
145 "duration": null, 222 "duration": null,
146 "createTime": null, 223 "createTime": null,
@@ -789,7 +866,7 @@ export function getDetailTableData(param){ @@ -789,7 +866,7 @@ export function getDetailTableData(param){
789 "kpiId": "KPI7AC1664E", 866 "kpiId": "KPI7AC1664E",
790 "kpiName": "文件系统挂载", 867 "kpiName": "文件系统挂载",
791 "flag": "fs-runuser0", 868 "flag": "fs-runuser0",
792 - "kpiValue": "/run/user/0 ", 869 + "kpiValue": "/run/user/0/run1/user1/01 ",
793 "collTime": null, 870 "collTime": null,
794 "duration": null, 871 "duration": null,
795 "createTime": null, 872 "createTime": null,
@@ -2508,7 +2585,9 @@ export function getDetailTableData(param){ @@ -2508,7 +2585,9 @@ export function getDetailTableData(param){
2508 "str": null, 2585 "str": null,
2509 "totalRow": null 2586 "totalRow": null
2510 } 2587 }
2511 - if(params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'){ 2588 + // params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'
  2589 + let kpiIdArr=params.kpiId.split(',');
  2590 + if(kpiIdArr.length>4){
2512 console.log("a1") 2591 console.log("a1")
2513 tableData=detailTableData1; 2592 tableData=detailTableData1;
2514 }else{ 2593 }else{
@@ -2638,7 +2717,7 @@ export function getDetailTableDataNoPage(){ @@ -2638,7 +2717,7 @@ export function getDetailTableDataNoPage(){
2638 "kpiId": "KPIA91F44E7", 2717 "kpiId": "KPIA91F44E7",
2639 "kpiName": "文件系统总大小", 2718 "kpiName": "文件系统总大小",
2640 "flag": "fs-", 2719 "flag": "fs-",
2641 - "kpiValue": "196.74 GB", 2720 + "kpiValue": "123456789987654321123456789987.74 GB",
2642 "collTime": null, 2721 "collTime": null,
2643 "duration": null, 2722 "duration": null,
2644 "createTime": null, 2723 "createTime": null,
@@ -3287,7 +3366,7 @@ export function getDetailTableDataNoPage(){ @@ -3287,7 +3366,7 @@ export function getDetailTableDataNoPage(){
3287 "kpiId": "KPI7AC1664E", 3366 "kpiId": "KPI7AC1664E",
3288 "kpiName": "文件系统挂载", 3367 "kpiName": "文件系统挂载",
3289 "flag": "fs-runuser0", 3368 "flag": "fs-runuser0",
3290 - "kpiValue": "/run/user/0 ", 3369 + "kpiValue": "/run/user/0/run2/user3/03 ",
3291 "collTime": null, 3370 "collTime": null,
3292 "duration": null, 3371 "duration": null,
3293 "createTime": null, 3372 "createTime": null,
  1 +import axios from 'axios'
  2 +import { Message, MessageBox } from 'element-ui'
  3 +import store from '../store'
  4 +import { getToken } from '@/utils/auth'
  5 +// 创建axios实例
  6 +const service = axios.create({
  7 + baseURL: process.env.BASE_API_other, // api 的 base_url
  8 + timeout: 20000 // 请求超时时间
  9 +})
  10 +
  11 +// request拦截器
  12 +service.interceptors.request.use(
  13 + config => {
  14 + config.headers['Authorization'] = (getToken() == null || getToken() == undefined) ? '' : getToken()
  15 + return config
  16 + },
  17 + error => {
  18 + // Do something with request error
  19 + Promise.reject(error)
  20 + }
  21 +)
  22 +
  23 +// response 拦截器
  24 +service.interceptors.response.use(
  25 + response => {
  26 + /**
  27 + * code为非20000是抛错 可结合自己业务进行修改
  28 + */
  29 + const res = response.data
  30 + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
  31 + if (res.code == '50008' || res.code == '50012' || res.code == '50014') {
  32 + MessageBox.confirm(
  33 + '你已被登出，可以取消继续留在该页面，或者重新登录',
  34 + '重新登录',
  35 + {
  36 + confirmButtonText: '重新登录',
  37 + cancelButtonText: '取消',
  38 + type: 'warning'
  39 + }
  40 + ).then(() => {
  41 + sessionStorage.clear()
  42 + localStorage.clear()
  43 + window.location.href = "/";
  44 + })
  45 + }
  46 + else if (res.code !== '200' && res.code !== 0) {
  47 + Message({
  48 + message: res.message,
  49 + type: 'error',
  50 + duration: 5 * 1000
  51 + })
  52 + return response.data
  53 + } else {
  54 + return response.data
  55 + }
  56 + },
  57 + error => {
  58 + Message({
  59 + message: error.message,
  60 + type: 'error',
  61 + duration: 5 * 1000
  62 + })
  63 + return Promise.reject(error)
  64 + }
  65 +)
  66 +
  67 +export default service
@@ -286,16 +286,26 @@ export default { @@ -286,16 +286,26 @@ export default {
286 arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1}) 286 arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
287 }) 287 })
288 this.formData=arr; 288 this.formData=arr;
  289 + this.formData.sort(this.compare('columnSort'));
289 this.dialogVisible = false; 290 this.dialogVisible = false;
290 } else { 291 } else {
291 // 编辑 292 // 编辑
292 this.formData[this.indexEditor] = this.rowFormData; 293 this.formData[this.indexEditor] = this.rowFormData;
293 this.$set(this.formData, this.indexEditor, this.rowFormData); 294 this.$set(this.formData, this.indexEditor, this.rowFormData);
  295 + this.formData.sort(this.compare('columnSort'));
294 this.editDialogVisible = false; 296 this.editDialogVisible = false;
295 } 297 }
296 this.$emit("input", this.formData); 298 this.$emit("input", this.formData);
297 this.$emit("change", this.formData); 299 this.$emit("change", this.formData);
298 }, 300 },
  301 + //数组排序
  302 + compare(property){
  303 + return function(a,b){
  304 + let value1 = a[property];
  305 + let value2 = b[property];
  306 + return value1 - value2;
  307 + }
  308 + },
299 // 删除 309 // 删除
300 handleDeleteClick(index,row) { 310 handleDeleteClick(index,row) {
301 this.formData.splice(index, 1); 311 this.formData.splice(index, 1);
@@ -49,7 +49,7 @@ export default { @@ -49,7 +49,7 @@ export default {
49 watch: { 49 watch: {
50 dialogVisible: { 50 dialogVisible: {
51 handler(val) { 51 handler(val) {
52 - console.log("dialogVisible",val) 52 + // console.log("dialogVisible",val)
53 }, 53 },
54 deep: true 54 deep: true
55 } 55 }
@@ -64,7 +64,7 @@ export default { @@ -64,7 +64,7 @@ export default {
64 }, 64 },
65 okFunc(){ 65 okFunc(){
66 // this.dialogVisible = false; 66 // this.dialogVisible = false;
67 - this.$emit('okfunc'); 67 + this.$emit('okFunc');
68 } 68 }
69 } 69 }
70 } 70 }
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()"> 6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
7 </template> 7 </template>
8 <div class="info-ul" style="width:140px;" > 8 <div class="info-ul" style="width:140px;" >
9 - <div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox"> 9 + <div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg)" v-for="itemMenu in detailMenubox">
10 <i class="el-icon-link icon-div"></i>{{itemMenu.name}} 10 <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
11 </div> 11 </div>
12 </div> 12 </div>
@@ -20,24 +20,24 @@ @@ -20,24 +20,24 @@
20 <!-- 告警设置{{pressingValue}}--> 20 <!-- 告警设置{{pressingValue}}-->
21 <div class="alarm-li flex-center"> 21 <div class="alarm-li flex-center">
22 <div class="alarm-li-label">告警策略</div> 22 <div class="alarm-li-label">告警策略</div>
23 - <el-select v-model="strategyValue" filterable class="m-2 alarm-li-select" placeholder="选择告警策略"> 23 + <el-select v-model="strategyValue" filterable clearable class="m-2 alarm-li-select" placeholder="选择告警策略">
24 <el-option 24 <el-option
25 v-for="item in strategyData" 25 v-for="item in strategyData"
26 - :key="item.value"  
27 - :label="item.label"  
28 - :value="item.value" 26 + :key="item.alarmPolicyId"
  27 + :label="item.alarmPolicyName"
  28 + :value="item.alarmPolicyId"
29 > 29 >
30 </el-option> 30 </el-option>
31 </el-select> 31 </el-select>
32 </div> 32 </div>
33 <div class="alarm-li flex-center"> 33 <div class="alarm-li flex-center">
34 <div class="alarm-li-label">告警列表</div> 34 <div class="alarm-li-label">告警列表</div>
35 - <el-select v-model="alarmListValue" multiple filterable class="m-2 alarm-li-select" placeholder="选择告警列表" > 35 + <el-select v-model="alarmListValue" multiple clearable filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
36 <el-option 36 <el-option
37 v-for="item in alarmListData" 37 v-for="item in alarmListData"
38 - :key="item.value"  
39 - :label="item.label"  
40 - :value="item.value" 38 + :key="item.subId"
  39 + :label="item.subName"
  40 + :value="item.subId"
41 > 41 >
42 </el-option> 42 </el-option>
43 </el-select> 43 </el-select>
@@ -45,17 +45,25 @@ @@ -45,17 +45,25 @@
45 45
46 </div> 46 </div>
47 <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top"> 47 <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
48 - 过滤单指标{{pressingValue}} 48 +<!-- 过滤单指标{{pressingValue}}-->
  49 + 您确定要对当前指标进行过滤处理？
49 </div> 50 </div>
50 <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top"> 51 <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
51 - 过滤多指标{{pressingValue}} 52 +<!-- 过滤多指标{{pressingValue}}-->
  53 + 您确定要对当前指标进行过滤处理？
52 </div> 54 </div>
53 <div v-if="dialogName=='performance_trends'" class="txtScroll-top"> 55 <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
54 - <div>性能趋势{{pressingValue}}</div> 56 + <div>性能趋势{{pressingValue.kpiValue}}</div>
55 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/> 57 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
56 </div> 58 </div>
57 <div v-if="dialogName=='pressing_times'" class="txtScroll-top"> 59 <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
58 - 压制次数{{pressingValue}} 60 +<!-- 压制次数{{pressingValue}}-->
  61 + <el-input
  62 + v-model="ignoreCnt"
  63 + :rows="2"
  64 + type="textarea"
  65 + placeholder="压制次数（必填，建议100以内）"
  66 + />
59 </div> 67 </div>
60 <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top"> 68 <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
61 纳入容量预测{{pressingValue}} 69 纳入容量预测{{pressingValue}}
@@ -68,6 +76,8 @@ @@ -68,6 +76,8 @@
68 76
69 <script> 77 <script>
70 import customDialog from "./customDialog"; 78 import customDialog from "./customDialog";
  79 +import {Message} from "_element-ui@2.15.6@element-ui";
  80 +import {getAlarmPolicy,getAlarmSubscribe,saveKpiPolicy,saveSetKpiFilter,getKpiPressTimes,saveSetKpiPressTimes,saveCaAdd,getTrendBaseUrl} from "@/api/platform";
71 81
72 export default { 82 export default {
73 name: "customMenuBox", 83 name: "customMenuBox",
@@ -77,15 +87,15 @@ export default { @@ -77,15 +87,15 @@ export default {
77 props: { 87 props: {
78 heightStyle: String, 88 heightStyle: String,
79 marginStyle: String, 89 marginStyle: String,
80 - trendSrc:{  
81 - type:String,  
82 - default:'', 90 + tableDataValueHead:{
  91 + type:Object,
  92 + default: {},
83 }, 93 },
84 tableName:{ 94 tableName:{
85 type:String, 95 type:String,
86 default:'', 96 default:'',
87 },//弹框名称 97 },//弹框名称
88 - detailMenubox: { 98 + detailMenubox: {
89 type: Array, 99 type: Array,
90 default: [ 100 default: [
91 { 101 {
@@ -121,13 +131,18 @@ export default { @@ -121,13 +131,18 @@ export default {
121 ] 131 ]
122 },//表格下探数据 132 },//表格下探数据
123 tableDataValue: { 133 tableDataValue: {
124 - type: String,  
125 - default: '' 134 + type: Object,
  135 + default: {}
126 },//单元格内容 136 },//单元格内容
127 flg: { 137 flg: {
128 type: String, 138 type: String,
129 default: '' 139 default: ''
130 },//标志 140 },//标志
  141 + urlObj:{},//url地址参数对象
  142 + resType:{
  143 + type: String,
  144 + default: ''
  145 + },//资源类型
131 }, 146 },
132 data() { 147 data() {
133 return { 148 return {
@@ -136,31 +151,16 @@ export default { @@ -136,31 +151,16 @@ export default {
136 dialogName: '', 151 dialogName: '',
137 // trendSrc:'',//性能走势图地址 152 // trendSrc:'',//性能走势图地址
138 // pressingVisible:'', 153 // pressingVisible:'',
139 - pressingValue:'',  
140 - strategyData: [{  
141 - label:'策略一',  
142 - value:'001'  
143 - }],//告警策略数据 154 + pressingValue:'',//压制次数
  155 + ignoreCnt:'',
  156 + strategyData: [],//告警策略数据
144 strategyValue:'',//告警策略值 157 strategyValue:'',//告警策略值
145 - alarmListData:[{  
146 - label:'告警列表一',  
147 - value:'001'  
148 - },{  
149 - label:'告警列表二',  
150 - value:'002'  
151 - },],//告警列表数据 158 + alarmListData:[],//告警列表数据
152 alarmListValue:[],//告警列表值 159 alarmListValue:[],//告警列表值
153 - 160 + trendSrc:'',//性能趋势图地址
154 } 161 }
155 }, 162 },
156 watch: { 163 watch: {
157 - trendSrc: {  
158 - handler(val) {  
159 - console.log("trendSrc",val)  
160 -  
161 - },  
162 - deep: true  
163 - },  
164 tableName:{ 164 tableName:{
165 handler(val){ 165 handler(val){
166 console.log("titlename",val) 166 console.log("titlename",val)
@@ -168,8 +168,20 @@ export default { @@ -168,8 +168,20 @@ export default {
168 deep:true 168 deep:true
169 } 169 }
170 }, 170 },
  171 + computed: {
  172 + //获取url地址中的token
  173 + getUrlToken(){
  174 + let locationUrl=this.$route.query;
  175 + let resId=locationUrl.resId;
  176 + let token=locationUrl.access_token;
  177 + let urlObj={
  178 + resId:resId,
  179 + token:token
  180 + }
  181 + return urlObj;
  182 + }
  183 + },
171 mounted() { 184 mounted() {
172 -  
173 }, 185 },
174 methods: { 186 methods: {
175 //表格下探关闭 187 //表格下探关闭
@@ -181,14 +193,33 @@ export default { @@ -181,14 +193,33 @@ export default {
181 this.dialogVisible=false; 193 this.dialogVisible=false;
182 }, 194 },
183 okFunc(){ 195 okFunc(){
184 - this.dialogVisible=false; 196 + if(this.dialogName=='filter_sheet_indicator'){
  197 + //保存设置单指标过滤
  198 + this.setKpiFilter(true);
  199 + this.dialogVisible=false;
  200 + }else if(this.dialogName=='filter_multiple_indicators'){
  201 + //保存设置多指标过滤
  202 + this.setKpiFilter(false);
  203 + this.dialogVisible=false;
  204 + }else if(this.dialogName=='alarm_setting'){
  205 + //保存告警设置
  206 + this.alarmSetSave();
  207 + }else if(this.dialogName=='pressing_times'){
  208 + //保存压制次数
  209 + this.setKpiPressTimes();
  210 + }
  211 + // this.dialogVisible=false;
  212 +
185 }, 213 },
186 //表格下探 214 //表格下探
187 - pressingDialog(itemMenu,value,flg){  
188 - this.pressingValue=value; 215 + pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg){
  216 + this.pressingValue=tableDataValue;
  217 + let kpiId=tableDataValue.kpiId;
189 let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;' 218 let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
  219 + let isDialog=true;
190 if(itemMenu.type=='alarm_setting'){ 220 if(itemMenu.type=='alarm_setting'){
191 this.widthStyle='width:70%;'; 221 this.widthStyle='width:70%;';
  222 + this.getAlarmPolicyData(kpiId)
192 223
193 }else if(itemMenu.type=='filter_sheet_indicator'){ 224 }else if(itemMenu.type=='filter_sheet_indicator'){
194 this.widthStyle=styleStr; 225 this.widthStyle=styleStr;
@@ -198,16 +229,23 @@ export default { @@ -198,16 +229,23 @@ export default {
198 229
199 }else if(itemMenu.type=='performance_trends'){ 230 }else if(itemMenu.type=='performance_trends'){
200 this.widthStyle=''; 231 this.widthStyle='';
  232 + this.setTrend(tableDataValueHead);
201 233
202 }else if(itemMenu.type=='pressing_times'){ 234 }else if(itemMenu.type=='pressing_times'){
203 - this.widthStyle=styleStr; 235 + this.widthStyle='width:400px;height: 200px;min-height: 200px;overflow: hidden;';
  236 + //获取压制次数
  237 + this.getKpiPressTimesData(tableDataValue);
204 238
205 }else if(itemMenu.type=='include_capacity_forecast'){ 239 }else if(itemMenu.type=='include_capacity_forecast'){
206 this.widthStyle=styleStr; 240 this.widthStyle=styleStr;
  241 + isDialog=false;
  242 + this.caAdd();
207 243
208 } 244 }
209 245
210 - this.setDialog(itemMenu.type,flg); 246 + if(isDialog){
  247 + this.setDialog(itemMenu.type,flg);
  248 + }
211 249
212 this.closePopoverMenu(); 250 this.closePopoverMenu();
213 251
@@ -232,6 +270,162 @@ export default { @@ -232,6 +270,162 @@ export default {
232 270
233 this.dialogName=name; 271 this.dialogName=name;
234 }, 272 },
  273 + //设置指标过滤,isOne true单指标过滤，false多指标过滤
  274 + async setKpiFilter(isOne){
  275 +
  276 + let params={
  277 + resId:this.getUrlToken.resId,
  278 + kpiId:this.pressingValue.kpiId,
  279 + flag:this.pressingValue.flag,
  280 + subFlag:this.pressingValue.kpiName,
  281 + isOne:isOne===true?'s':'m'
  282 + }
  283 +
  284 + const { success } = await saveSetKpiFilter(params,this.getUrlToken);
  285 + if (success) {
  286 + Message({
  287 + message: '过滤设置成功',
  288 + type: 'success',
  289 + duration: 3 * 1000
  290 + })
  291 + }else{
  292 + Message({
  293 + message: '过滤设置失败',
  294 + type: 'error',
  295 + duration: 3 * 1000
  296 + })
  297 + }
  298 + },
  299 + //设置性能趋势图
  300 + setTrend(tableDataValueHead){
  301 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
  302 + +'&ident='+this.pressingValue.kpiIdent
  303 + +'&trend='+this.pressingValue.isTrend
  304 + +'&unit='+tableDataValueHead.unit
  305 + +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
  306 + let baseUrl=getTrendBaseUrl();
  307 + this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
  308 + },
  309 + //获取告警策略列表数据
  310 + async getAlarmPolicyData(kpiId){
  311 + let obj=this.getUrlToken;
  312 + let params={
  313 + kpiId:kpiId,
  314 + token:obj.token
  315 + }
  316 + const { code, data } = await getAlarmPolicy(params);
  317 + if (code != 200 && code!=0) return;
  318 + this.strategyData=data;
  319 + this.getAlarmSubscribeData(params);
  320 +
  321 + },
  322 + //获取告警订阅列表数据
  323 + async getAlarmSubscribeData(params){
  324 + const { code, data } = await getAlarmSubscribe(params);
  325 + if (code != 200 && code!=0) return;
  326 + this.alarmListData=data;
  327 + },
  328 + //保存告警设置
  329 + async alarmSetSave(){
  330 + let kpiSubscribe=this.alarmListValue.join(',');
  331 + if(!this.strategyValue || !kpiSubscribe){
  332 + Message({
  333 + message: '告警策略或者告警订阅不能为空',
  334 + type: 'warning',
  335 + duration: 3 * 1000
  336 + });
  337 + return;
  338 + }
  339 + let params={
  340 + resId:this.getUrlToken.resId,
  341 + kpiId:this.pressingValue.kpiId,
  342 + flag:this.pressingValue.flag,
  343 + policyId:this.strategyValue,
  344 + subId:kpiSubscribe
  345 + }
  346 + const { success } = await saveKpiPolicy(params,this.getUrlToken);
  347 + if (success){
  348 + Message({
  349 + message: '设置成功',
  350 + type: 'success',
  351 + duration: 3 * 1000
  352 + });
  353 +
  354 + }else{
  355 + Message({
  356 + message: '设置失败',
  357 + type: 'error',
  358 + duration: 3 * 1000
  359 + });
  360 + }
  361 + this.dialogVisible=false;
  362 +
  363 + },
  364 + //获取压制次数
  365 + async getKpiPressTimesData(obj){
  366 + let params= {
  367 + resId: this.getUrlToken.resId,
  368 + kpiId: obj.kpiId,
  369 + flag: obj.flag,
  370 + subFlag: obj.kpiName
  371 + }
  372 + const { code, object } = await getKpiPressTimes(params,this.getUrlToken);
  373 + if (code != 200 && code!=0) return;
  374 + this.ignoreCnt = object?object.ignoreCnt:"";
  375 + },
  376 + //保存设置压制次数
  377 + async setKpiPressTimes(){
  378 + let params= {
  379 + access_token:this.getUrlToken.token,
  380 + resId: this.getUrlToken.resId,
  381 + kpiId: this.pressingValue.kpiId,
  382 + flag: this.pressingValue.flag,
  383 + subFlag: this.pressingValue.kpiName,
  384 + ignoreCnt:this.ignoreCnt
  385 + }
  386 + const { success } = await saveSetKpiPressTimes(params,this.getUrlToken);
  387 + if(success){
  388 + Message({
  389 + message: '设置成功',
  390 + type: 'success',
  391 + duration: 3 * 1000
  392 + });
  393 + }else{
  394 + Message({
  395 + message: '设置失败,请与管理员联系!',
  396 + type: 'error',
  397 + duration: 3 * 1000
  398 + });
  399 + }
  400 + this.dialogVisible=false;
  401 +
  402 + },
  403 + //纳入容量预测
  404 + async caAdd(){
  405 + let params= {
  406 + resId: this.getUrlToken.resId,
  407 + kpiId: this.pressingValue.kpiId,
  408 + flag: this.pressingValue.flag,
  409 + resType: this.resType,
  410 + }
  411 + const { success } = await saveCaAdd(params,this.getUrlToken);
  412 + if(success){
  413 + Message({
  414 + message: '纳入容量预测成功',
  415 + type: 'success',
  416 + duration: 3 * 1000
  417 + });
  418 + }else{
  419 + Message({
  420 + message: '纳入容量预测失败!',
  421 + type: 'error',
  422 + duration: 3 * 1000
  423 + });
  424 + }
  425 + this.dialogVisible=false;
  426 +
  427 + },
  428 +
235 } 429 }
236 } 430 }
237 </script> 431 </script>
  1 +/*
  2 + * @Descripttion: 仪表盘使用率 json
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-2-16
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-2-16
  8 + */
  9 +export const monitorGaugeRate = {
  10 + code: 'monitor-gauge-rate',
  11 + type: 'chart',
  12 + label: '仪表盘使用率',
  13 + icon: 'iconyibiaopan',
  14 + options: {
  15 + // 配置
  16 + setup: [
  17 + {
  18 + type: 'el-input-text',
  19 + label: '图层名称',
  20 + name: 'layerName',
  21 + required: false,
  22 + placeholder: '',
  23 + value: '仪表盘使用率',
  24 + },
  25 + {
  26 + type: 'el-input-text',
  27 + label: '标题名称',
  28 + name: 'titleName',
  29 + required: false,
  30 + placeholder: '',
  31 + value: 'CPU使用率',
  32 + },
  33 + {
  34 + type: 'el-select',
  35 + label: '标题位置',
  36 + name: 'textAlign',
  37 + required: false,
  38 + placeholder: '',
  39 + selectOptions: [
  40 + {code: 'center', name: '居中'},
  41 + {code: 'left', name: '左对齐'},
  42 + {code: 'right', name: '右对齐'},
  43 + ],
  44 + value: 'left'
  45 + },
  46 + {
  47 + type: 'custom-upload',
  48 + label: '标题图片地址',
  49 + name: 'imageAdress',
  50 + required: false,
  51 + placeholder: '',
  52 + value: '',
  53 + },
  54 + [
  55 + {
  56 + name: "下探设置",
  57 + list: [
  58 + {
  59 + type: 'el-switch',
  60 + label: '是否有下探',
  61 + name: 'probeDown',
  62 + required: false,
  63 + placeholder: '',
  64 + value: true,
  65 + },
  66 + {
  67 + type: 'el-switch',
  68 + label: '告警设置',
  69 + name: 'alarm_setting',
  70 + required: false,
  71 + placeholder: '',
  72 + value: true
  73 + },
  74 + {
  75 + type: 'el-switch',
  76 + label: '过滤单指标',
  77 + name: 'filter_sheet_indicator',
  78 + required: false,
  79 + placeholder: '',
  80 + value: true
  81 + },
  82 + {
  83 + type: 'el-switch',
  84 + label: '过滤多指标',
  85 + name: 'filter_multiple_indicators',
  86 + required: false,
  87 + placeholder: '',
  88 + value: true
  89 + },
  90 + {
  91 + type: 'el-switch',
  92 + label: '性能趋势',
  93 + name: 'performance_trends',
  94 + required: false,
  95 + placeholder: '',
  96 + value: true
  97 + },
  98 + {
  99 + type: 'el-switch',
  100 + label: '压制次数',
  101 + name: 'pressing_times',
  102 + required: false,
  103 + placeholder: '',
  104 + value: true
  105 + },
  106 + {
  107 + type: 'el-switch',
  108 + label: '纳入容量预测',
  109 + name: 'include_capacity_forecast',
  110 + required: false,
  111 + placeholder: '',
  112 + value: true
  113 + }
  114 + ]
  115 + },
  116 + ],
  117 + {
  118 + type: 'vue-color',
  119 + label: '背景颜色',
  120 + name: 'background',
  121 + required: false,
  122 + placeholder: '',
  123 + value: ''
  124 + },
  125 + [
  126 + {
  127 + name: "圆环设置",
  128 + list: [
  129 + {
  130 + type: 'el-switch',
  131 + label: '显示',
  132 + name: 'ringShow',
  133 + required: false,
  134 + placeholder: '',
  135 + value: true,
  136 + },
  137 + {
  138 + type: 'el-input-number',
  139 + label: '圆环宽度',
  140 + name: 'pieWeight',
  141 + require: false,
  142 + placeholder: '',
  143 + value: 10,
  144 + },
  145 + ]
  146 + },
  147 + {
  148 + name: '0%~30%渐变色',
  149 + list: [
  150 + {
  151 + type: 'vue-color',
  152 + label: '0处颜色',
  153 + name: 'color30p0',
  154 + required: false,
  155 + placeholder: '',
  156 + value: 'rgba(0, 237, 3,0.1)'
  157 + },
  158 + {
  159 + type: 'vue-color',
  160 + label: '0.5处颜色',
  161 + name: 'color30p5',
  162 + required: false,
  163 + placeholder: '',
  164 + value: 'rgba(0, 237, 3,0.6)'
  165 + },
  166 + {
  167 + type: 'vue-color',
  168 + label: '1处颜色',
  169 + name: 'color30p10',
  170 + required: false,
  171 + placeholder: '',
  172 + value: 'rgba(0, 237, 3,1)'
  173 + },
  174 + ]
  175 + },
  176 + {
  177 + name: '30%~70%渐变色',
  178 + list: [
  179 + {
  180 + type: 'vue-color',
  181 + label: '0处颜色',
  182 + name: 'color70p0',
  183 + required: false,
  184 + placeholder: '',
  185 + value: 'rgba(255, 184, 0,0.1)'
  186 + },
  187 + {
  188 + type: 'vue-color',
  189 + label: '0.5处颜色',
  190 + name: 'color70p5',
  191 + required: false,
  192 + placeholder: '',
  193 + value: 'rgba(255, 184, 0,0.6)'
  194 + },
  195 + {
  196 + type: 'vue-color',
  197 + label: '1处颜色',
  198 + name: 'color70p10',
  199 + required: false,
  200 + placeholder: '',
  201 + value: 'rgba(255, 184, 0,1)'
  202 + },
  203 + ]
  204 + },
  205 + {
  206 + name: '70%~100%渐变色',
  207 + list: [
  208 + {
  209 + type: 'vue-color',
  210 + label: '0处颜色',
  211 + name: 'color100p0',
  212 + required: false,
  213 + placeholder: '',
  214 + value: 'rgba(175, 36, 74,0.1)'
  215 + },
  216 + {
  217 + type: 'vue-color',
  218 + label: '0.5处颜色',
  219 + name: 'color100p5',
  220 + required: false,
  221 + placeholder: '',
  222 + value: 'rgba(255, 36, 74,0.6)'
  223 + },
  224 + {
  225 + type: 'vue-color',
  226 + label: '1处颜色',
  227 + name: 'color100p10',
  228 + required: false,
  229 + placeholder: '',
  230 + value: 'rgba(255, 36, 74,1)'
  231 + },
  232 + ]
  233 + },
  234 + {
  235 + name: "刻度线",
  236 + list: [
  237 + {
  238 + type: 'el-switch',
  239 + label: '显示',
  240 + name: 'tickShow',
  241 + required: false,
  242 + placeholder: '',
  243 + value: true,
  244 + },
  245 + {
  246 + type: 'el-input-number',
  247 + label: '距离',
  248 + name: 'tickDistance',
  249 + require: false,
  250 + placeholder: '',
  251 + value: 0,
  252 + },
  253 + {
  254 + type: 'el-input-number',
  255 + label: '长度',
  256 + name: 'tickLength',
  257 + require: false,
  258 + placeholder: '',
  259 + value: 10,
  260 + },
  261 + {
  262 + type: 'el-input-number',
  263 + label: '宽度',
  264 + name: 'tickWidth',
  265 + require: false,
  266 + placeholder: '',
  267 + value: 2,
  268 + },
  269 + ]
  270 + },
  271 + {
  272 + name: "指标线",
  273 + list: [
  274 + {
  275 + type: 'el-switch',
  276 + label: '显示',
  277 + name: 'splitShow',
  278 + required: false,
  279 + placeholder: '',
  280 + value: true,
  281 + },
  282 + {
  283 + type: 'el-input-number',
  284 + label: '距离',
  285 + name: 'splitDistance',
  286 + require: false,
  287 + placeholder: '',
  288 + value: 0,
  289 + },
  290 + {
  291 + type: 'el-input-number',
  292 + label: '长度',
  293 + name: 'splitLength',
  294 + require: false,
  295 + placeholder: '',
  296 + value: 14,
  297 + },
  298 + {
  299 + type: 'el-input-number',
  300 + label: '宽度',
  301 + name: 'splitWidth',
  302 + require: false,
  303 + placeholder: '',
  304 + value: 4,
  305 + },
  306 + ]
  307 + },
  308 + {
  309 + name: "指标",
  310 + list: [
  311 + {
  312 + type: 'el-switch',
  313 + label: '显示',
  314 + name: 'labelShow',
  315 + required: false,
  316 + placeholder: '',
  317 + value: true,
  318 + },
  319 + {
  320 + type: 'el-input-number',
  321 + label: '距离',
  322 + name: 'labelDistance',
  323 + require: false,
  324 + placeholder: '',
  325 + value: 0,
  326 + },
  327 + {
  328 + type: 'el-input-number',
  329 + label: '字号',
  330 + name: 'labelFontSize',
  331 + require: false,
  332 + placeholder: '',
  333 + value: 10,
  334 + },
  335 + {
  336 + type: 'vue-color',
  337 + label: '颜色',
  338 + name: 'labelColor',
  339 + required: false,
  340 + placeholder: '',
  341 + value: '#fff',
  342 + },
  343 + ]
  344 + },
  345 + {
  346 + name: "数值",
  347 + list: [
  348 + {
  349 + type: 'vue-color',
  350 + label: '颜色',
  351 + name: 'labelColor',
  352 + required: false,
  353 + placeholder: '',
  354 + value: '#fff',
  355 + },
  356 + {
  357 + type: 'el-input-number',
  358 + label: '字号',
  359 + name: 'labelFontSize',
  360 + require: false,
  361 + placeholder: '',
  362 + value: 14,
  363 + },
  364 + {
  365 + type: 'el-select',
  366 + label: '字体粗细',
  367 + name: 'labelFontWeight',
  368 + required: false,
  369 + placeholder: '',
  370 + selectOptions: [
  371 + {code: 'normal', name: '正常'},
  372 + {code: 'bold', name: '粗体'},
  373 + {code: 'bolder', name: '特粗体'},
  374 + {code: 'lighter', name: '细体'}
  375 + ],
  376 + value: 'normal'
  377 + },
  378 + ]
  379 + },
  380 + ],
  381 + ],
  382 + // 数据
  383 + data: [
  384 + {
  385 + type: 'el-radio-group',
  386 + label: '数据类型',
  387 + name: 'dataType',
  388 + require: false,
  389 + placeholder: '',
  390 + selectValue: true,
  391 + selectOptions: [
  392 + {
  393 + code: 'staticData',
  394 + name: '静态数据',
  395 + },
  396 + {
  397 + code: 'dynamicData',
  398 + name: '动态数据',
  399 + },
  400 + ],
  401 + value: 'staticData',
  402 + },
  403 + {
  404 + type: 'el-input-number',
  405 + label: '刷新时间(毫秒)',
  406 + name: 'refreshTime',
  407 + relactiveDom: 'dataType',
  408 + relactiveDomValue: 'dynamicData',
  409 + value: 5000
  410 + },
  411 + {
  412 + type: 'el-button',
  413 + label: '静态数据',
  414 + name: 'staticData',
  415 + required: false,
  416 + placeholder: '',
  417 + relactiveDom: 'dataType',
  418 + relactiveDomValue: 'staticData',
  419 + value: [
  420 + {"num":50}
  421 + ],
  422 + },
  423 + {
  424 + type: 'dycustComponents',
  425 + label: '',
  426 + name: 'dynamicData',
  427 + required: false,
  428 + placeholder: '',
  429 + relactiveDom: 'dataType',
  430 + chartType: 'widget-text',
  431 + dictKey: 'TEXT_PROPERTIES',
  432 + relactiveDomValue: 'dynamicData',
  433 + value: '',
  434 + },
  435 + ],
  436 + // 坐标
  437 + position: [
  438 + {
  439 + type: 'el-input-number',
  440 + label: '左边距',
  441 + name: 'left',
  442 + required: false,
  443 + placeholder: '',
  444 + value: 0,
  445 + },
  446 + {
  447 + type: 'el-input-number',
  448 + label: '上边距',
  449 + name: 'top',
  450 + required: false,
  451 + placeholder: '',
  452 + value: 0,
  453 + },
  454 + {
  455 + type: 'el-input-number',
  456 + label: '宽度',
  457 + name: 'width',
  458 + required: false,
  459 + placeholder: '该容器在1920px大屏中的宽度',
  460 + value: 400,
  461 + },
  462 + {
  463 + type: 'el-input-number',
  464 + label: '高度',
  465 + name: 'height',
  466 + required: false,
  467 + placeholder: '该容器在1080px大屏中的高度',
  468 + value: 200,
  469 + },
  470 + ],
  471 + }
  472 +}
@@ -63,7 +63,7 @@ export const monitorResourceStatus = { @@ -63,7 +63,7 @@ export const monitorResourceStatus = {
63 name: 'imageAdressHealthBg', 63 name: 'imageAdressHealthBg',
64 required: false, 64 required: false,
65 placeholder: '', 65 placeholder: '',
66 - value: require("../../../../../../../assets/images/healthStatus/state_bg.png"), 66 + value: '',
67 }, 67 },
68 { 68 {
69 type: 'custom-upload', 69 type: 'custom-upload',
@@ -39,6 +39,7 @@ import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monit @@ -39,6 +39,7 @@ import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monit
39 import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information"; 39 import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information";
40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table"; 40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border"; 41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
  42 +import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
42 43
43 44
44 export const {widgetTool,monitor} = { 45 export const {widgetTool,monitor} = {
@@ -76,6 +77,7 @@ export const {widgetTool,monitor} = { @@ -76,6 +77,7 @@ export const {widgetTool,monitor} = {
76 monitorResourceStatus, 77 monitorResourceStatus,
77 monitorBasicInformation, 78 monitorBasicInformation,
78 monitorDetailTable, 79 monitorDetailTable,
79 - monitorBgBorder 80 + monitorBgBorder,
  81 + monitorGaugeRate
80 ] 82 ]
81 } 83 }
@@ -17,9 +17,8 @@ @@ -17,9 +17,8 @@
17 :key="index" 17 :key="index"
18 :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]" 18 :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
19 > 19 >
20 - {{ item.name }}  
21 -<!-- <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>-->  
22 - <span v-if="tableFiledSort(index)" class="caret-wrapper"> 20 + {{ item.name }}
  21 + <span v-if="tableFiledSort(index)" class="caret-wrapper">
23 <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i> 22 <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
24 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i> 23 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
25 </span> 24 </span>
@@ -36,14 +35,13 @@ @@ -36,14 +35,13 @@
36 :key="idx" 35 :key="idx"
37 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 36 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
38 @mouseenter="pressingTimes(index,idx)" 37 @mouseenter="pressingTimes(index,idx)"
39 - :ref="'headerRef'+index+'-'+idx"  
40 - :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)" 38 + :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx,'')"
41 > 39 >
42 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" > 40 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" >
43 <template #content> 41 <template #content>
44 <span>{{ item[itemChild.key].kpiValue}}</span> 42 <span>{{ item[itemChild.key].kpiValue}}</span>
45 </template> 43 </template>
46 - <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" 44 + <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
47 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 45 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
48 {{ item[itemChild.key].kpiValue}} 46 {{ item[itemChild.key].kpiValue}}
49 </span> 47 </span>
@@ -52,9 +50,10 @@ @@ -52,9 +50,10 @@
52 50
53 <customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)" 51 <customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
54 :detailMenubox="calcDetailMenubox" 52 :detailMenubox="calcDetailMenubox"
55 - :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc" 53 + :tableDataValue="item[itemChild.key]" :flg="''"
  54 + :tableDataValueHead="itemChild"
56 :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])" 55 :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
57 - 56 + :resType="resType"
58 ></customMenuBox> 57 ></customMenuBox>
59 </div> 58 </div>
60 </li> 59 </li>
@@ -74,10 +73,9 @@ @@ -74,10 +73,9 @@
74 v-for="(item, index) in headerAll" 73 v-for="(item, index) in headerAll"
75 :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]" 74 :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
76 :key="index" 75 :key="index"
77 - :class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}" 76 + :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
78 > 77 >
79 {{ item.name }} 78 {{ item.name }}
80 -<!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':sortVal=='bottom','el-icon-caret-top':sortVal=='top'}]" @click="changeSort(item)"></i>-->  
81 <span v-if="tableFiledSort(index)" class="caret-wrapper"> 79 <span v-if="tableFiledSort(index)" class="caret-wrapper">
82 <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i> 80 <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
83 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i> 81 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
@@ -90,20 +88,37 @@ @@ -90,20 +88,37 @@
90 <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" > 88 <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
91 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]"> 89 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
92 {{ index+1 }}</div> 90 {{ index+1 }}</div>
93 - <div class="infoList-flex" 91 + <div class="infoList-flex text-overflow padding-10"
94 v-for="(itemChild, idx) in headerAll" 92 v-for="(itemChild, idx) in headerAll"
95 :key="idx" 93 :key="idx"
96 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 94 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
97 @mouseenter="pressingTimes(index,idx)" 95 @mouseenter="pressingTimes(index,idx)"
  96 + :data-tip="tableFiledMaxWidth('isOverflow1'+index+'-'+idx,index,idx,'more')"
98 > 97 >
99 - <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" 98 + <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]" ref="elTooltip" trigger="hover" >
  99 + <template #content>
  100 + <span>{{ item[itemChild.key].kpiValue}}</span>
  101 + </template>
  102 + <span @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
  103 + :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  104 + {{ item[itemChild.key].kpiValue}}
  105 + </span>
  106 + </el-tooltip>
  107 + <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'" />
  108 +
  109 +
  110 +
  111 +
  112 +
  113 +<!-- <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
100 :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 114 :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
101 - {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span> 115 + {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>-->
102 <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)" 116 <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
103 :detailMenubox="calcDetailMenubox" 117 :detailMenubox="calcDetailMenubox"
104 - :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc" 118 + :tableDataValue="item[itemChild.key]" :flg="''"
  119 + :tableDataValueHead="itemChild"
105 :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])" 120 :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
106 - 121 + :resType="resType"
107 ></customMenuBox> 122 ></customMenuBox>
108 </div> 123 </div>
109 </li> 124 </li>
@@ -132,49 +147,17 @@ @@ -132,49 +147,17 @@
132 > 147 >
133 <template v-slot> 148 <template v-slot>
134 <div class="txtScroll-top"> 149 <div class="txtScroll-top">
135 - 性能趋势{{pressingValue}}  
136 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/> 150 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
137 </div> 151 </div>
138 </template> 152 </template>
139 </customDialog> 153 </customDialog>
140 -<!-- <div class="dialog-div" v-if="tableVisible" :style="heightStyle">  
141 - <div class="dialog-div-content" :style="marginStyle" >  
142 - <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>  
143 -  
144 - </div>  
145 - </div>-->  
146 -<!-- <customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"  
147 - :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"  
148 - >  
149 - <template v-slot>  
150 - <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">  
151 - 告警设置{{pressingValue}}  
152 - </div>  
153 - <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">  
154 - 过滤单指标{{pressingValue}}  
155 - </div>  
156 - <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">  
157 - 过滤多指标{{pressingValue}}  
158 - </div>  
159 - <div v-if="dialogName=='performance_trends'" class="txtScroll-top">  
160 - 性能趋势{{pressingValue}}  
161 - <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>  
162 - </div>  
163 - <div v-if="dialogName=='pressing_times'" class="txtScroll-top">  
164 - 压制次数{{pressingValue}}  
165 - </div>  
166 - <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">  
167 - 纳入容量预测{{pressingValue}}  
168 - </div>  
169 - </template>  
170 - </customDialog>-->  
171 154
172 </div> 155 </div>
173 </template> 156 </template>
174 <script> 157 <script>
175 import vue from "vue"; 158 import vue from "vue";
176 import VueSuperSlide from "vue-superslide"; 159 import VueSuperSlide from "vue-superslide";
177 -import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform"; 160 +import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} from "@/api/platform";
178 import customDialog from "../../designerComponents/customDialog"; 161 import customDialog from "../../designerComponents/customDialog";
179 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件 162 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
180 import textToImage from "../../designerComponents/textToImage";//文字转图片 163 import textToImage from "../../designerComponents/textToImage";//文字转图片
@@ -219,38 +202,6 @@ export default { @@ -219,38 +202,6 @@ export default {
219 optionsData: {}, 202 optionsData: {},
220 pressingVisible:'', 203 pressingVisible:'',
221 isHover:false, 204 isHover:false,
222 - /*detailMenubox:[  
223 - {  
224 - name:'告警设置',  
225 - type:'alarm_setting',  
226 - isDisplay:true  
227 - },  
228 - {  
229 - name:'过滤单指标',  
230 - type:'filter_sheet_indicator',  
231 - isDisplay:true  
232 - },  
233 - {  
234 - name:'过滤多指标',  
235 - type:'filter_multiple_indicators',  
236 - isDisplay:true  
237 - },  
238 - {  
239 - name:'性能趋势',  
240 - type:'performance_trends',  
241 - isDisplay:true  
242 - },  
243 - {  
244 - name:'压制次数',  
245 - type:'pressing_times',  
246 - isDisplay:true  
247 - },  
248 - {  
249 - name:'纳入容量预测',  
250 - type:'include_capacity_forecast',  
251 - isDisplay:true  
252 - }  
253 - ],*/  
254 dialogName:'',//表格名称 205 dialogName:'',//表格名称
255 pressingValue:'',//表格下探值 206 pressingValue:'',//表格下探值
256 trendSrc:'',//性能走势图地址 207 trendSrc:'',//性能走势图地址
@@ -261,7 +212,9 @@ export default { @@ -261,7 +212,9 @@ export default {
261 sortBy:'',//排序参数 212 sortBy:'',//排序参数
262 sortCaret:'',//正序倒序 213 sortCaret:'',//正序倒序
263 isEllipsis:[],//是否文字超出 214 isEllipsis:[],//是否文字超出
  215 + isEllipsisMore:[],//是否文字超出
264 componentName:'',//组件名称 216 componentName:'',//组件名称
  217 + resType:'',//资源类型
265 }; 218 };
266 }, 219 },
267 computed: { 220 computed: {
@@ -367,6 +320,17 @@ export default { @@ -367,6 +320,17 @@ export default {
367 }) 320 })
368 } 321 }
369 return detailMenuBox; 322 return detailMenuBox;
  323 + },
  324 + //获取url地址中的token
  325 + getUrlToken(){
  326 + let locationUrl=this.$route.query;
  327 + let resId=locationUrl.resId;
  328 + let token=locationUrl.access_token;
  329 + let urlObj={
  330 + resId:resId,
  331 + token:token
  332 + }
  333 + return urlObj;
370 } 334 }
371 }, 335 },
372 watch: { 336 watch: {
@@ -376,15 +340,18 @@ export default { @@ -376,15 +340,18 @@ export default {
376 this.optionsPosition = val.position; 340 this.optionsPosition = val.position;
377 this.optionsData = val.data; 341 this.optionsData = val.data;
378 this.initData(); 342 this.initData();
  343 + this.getResTypeData();
379 }, 344 },
380 deep: true 345 deep: true
381 } 346 }
382 }, 347 },
  348 +
383 mounted() { 349 mounted() {
384 this.optionsSetUp = this.value.setup; 350 this.optionsSetUp = this.value.setup;
385 this.optionsPosition = this.value.position; 351 this.optionsPosition = this.value.position;
386 this.optionsData = this.value.data; 352 this.optionsData = this.value.data;
387 this.initData(); 353 this.initData();
  354 + this.getResTypeData();
388 }, 355 },
389 methods: { 356 methods: {
390 initData() { 357 initData() {
@@ -557,28 +524,27 @@ export default { @@ -557,28 +524,27 @@ export default {
557 // this.setDialog('table'); 524 // this.setDialog('table');
558 this.tableVisible=true; 525 this.tableVisible=true;
559 }, 526 },
560 - /*//打开弹框  
561 - setDialog(name,flg){  
562 -  
563 - this.dialogVisible=true;  
564 -  
565 - this.dialogName=name;  
566 - },*/  
567 //点击表格内容名称事件 527 //点击表格内容名称事件
568 - clickListName(obj){ 528 + clickListName(obj,tableDataValueHead){
569 if(obj.kpiIdent==1 || obj.isWarning==1){ 529 if(obj.kpiIdent==1 || obj.isWarning==1){
570 - let trendsParams=obj;  
571 - // 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'  
572 - this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';  
573 this.widthStyle=''; 530 this.widthStyle='';
574 - // this.setDialog('performance_trends')  
575 - this.pressingValue=obj.kpiValue; 531 + this.pressingValue=obj;
576 this.dialogNameStyle(obj) 532 this.dialogNameStyle(obj)
577 - 533 + this.setTrend(tableDataValueHead)
578 this.trendVisible=true; 534 this.trendVisible=true;
579 } 535 }
580 536
581 }, 537 },
  538 + //设置性能趋势图
  539 + setTrend(tableDataValueHead){
  540 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
  541 + +'&ident='+this.pressingValue.kpiIdent
  542 + +'&trend='+this.pressingValue.isTrend
  543 + +'&unit='+tableDataValueHead.unit
  544 + +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
  545 + let baseUrl=getTrendBaseUrl();
  546 + this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams;
  547 + },
582 //End LSQ 2022/1/20 10:23 TODO 548 //End LSQ 2022/1/20 10:23 TODO
583 handlerHead() { 549 handlerHead() {
584 const head = this.optionsSetUp.dynamicAddTable; 550 const head = this.optionsSetUp.dynamicAddTable;
@@ -652,14 +618,20 @@ export default { @@ -652,14 +618,20 @@ export default {
652 return styleJson 618 return styleJson
653 }, 619 },
654 //列最大宽 620 //列最大宽
655 - tableFiledMaxWidth(obj,index,idx){ 621 + tableFiledMaxWidth(obj,index,idx,flg){
656 let that=this; 622 let that=this;
657 this.$nextTick(() => { 623 this.$nextTick(() => {
658 let isOverflow=that.$refs[obj]; 624 let isOverflow=that.$refs[obj];
659 - if(isOverflow && isOverflow[0]){ 625 + if(isOverflow && isOverflow[0]){
660 let cWidth = isOverflow[0].parentElement.scrollWidth; 626 let cWidth = isOverflow[0].parentElement.scrollWidth;
661 let sWidth = isOverflow[0].scrollWidth; 627 let sWidth = isOverflow[0].scrollWidth;
662 - that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth); 628 + if(flg=='more'){
  629 + that.isEllipsisMore[index+'-'+idx]=!((sWidth+10) > cWidth);
  630 +
  631 + }else {
  632 + that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
  633 +
  634 + }
663 } 635 }
664 636
665 }) 637 })
@@ -704,41 +676,7 @@ export default { @@ -704,41 +676,7 @@ export default {
704 return value1 - value2; 676 return value1 - value2;
705 } 677 }
706 }, 678 },
707 - /* //表格下探  
708 - pressingDialog(itemMenu,value,flg){  
709 - this.pressingValue=value;  
710 - let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'  
711 - if(itemMenu.type=='alarm_setting'){  
712 - this.widthStyle='width:70%;';  
713 -  
714 - }else if(itemMenu.type=='filter_sheet_indicator'){  
715 - this.widthStyle=styleStr;  
716 -  
717 - }else if(itemMenu.type=='filter_multiple_indicators'){  
718 - this.widthStyle=styleStr;  
719 -  
720 - }else if(itemMenu.type=='performance_trends'){  
721 - this.widthStyle='';  
722 -  
723 - }else if(itemMenu.type=='pressing_times'){  
724 - this.widthStyle=styleStr;  
725 -  
726 - }else if(itemMenu.type=='include_capacity_forecast'){  
727 - this.widthStyle=styleStr;  
728 679
729 - }  
730 -  
731 - this.setDialog(itemMenu.type,flg);  
732 -  
733 - let key=this.$refs.popoverMenu;  
734 - if(key && key.length>0){  
735 - key.map(item=>{  
736 - item.showPopper=false  
737 - })  
738 - }  
739 - // this.$refs.popoverMenu.showPopper = false;  
740 -  
741 - },*/  
742 pressingTimes(index,idx){ 680 pressingTimes(index,idx){
743 this.pressingVisible=index+'-'+idx; 681 this.pressingVisible=index+'-'+idx;
744 }, 682 },
@@ -816,7 +754,7 @@ export default { @@ -816,7 +754,7 @@ export default {
816 dialogName = tableStyleSetup.tableName + kpiName; 754 dialogName = tableStyleSetup.tableName + kpiName;
817 755
818 } else { 756 } else {
819 - let nameResType = tableStyleSetup.nameResType ? obj.resType ? obj.resType + '|' : '' : ''; 757 + let nameResType = tableStyleSetup.nameResType ? this.resType ? this.resType + '|' : '' : '';
820 let nameIPAddress = tableStyleSetup.nameIPAddress ? obj.ipAddr ? obj.ipAddr + '|' : '' : ''; 758 let nameIPAddress = tableStyleSetup.nameIPAddress ? obj.ipAddr ? obj.ipAddr + '|' : '' : '';
821 let nameResName = tableStyleSetup.nameResName ? obj.resName ? obj.resName + '|' : '' : ''; 759 let nameResName = tableStyleSetup.nameResName ? obj.resName ? obj.resName + '|' : '' : '';
822 let nameKpiName = tableStyleSetup.nameKpiName ? obj.kpiName ? obj.kpiName + '|' : '' : ''; 760 let nameKpiName = tableStyleSetup.nameKpiName ? obj.kpiName ? obj.kpiName + '|' : '' : '';
@@ -838,8 +776,19 @@ export default { @@ -838,8 +776,19 @@ export default {
838 kpiIdArr.push(item.key) 776 kpiIdArr.push(item.key)
839 } 777 }
840 }) 778 })
841 - console.log("kpiIdArr",kpiIdArr)  
842 - } 779 + },
  780 + //获取资源类型
  781 + async getResTypeData(){
  782 + let params= {
  783 + resId: this.getUrlToken.resId,
  784 + }
  785 + const { success,obj } = await getResType(params,this.getUrlToken);
  786 + if (success && obj && obj.bean && obj.bean.resType){
  787 + this.resType=obj.bean.resType;
  788 + }
  789 +
  790 + },
  791 +
843 } 792 }
844 }; 793 };
845 </script> 794 </script>
  1 +<template>
  2 + <div :style="styleObj" @click="isDisplay=false;">
  3 + <div class="title-div flex-start" :style="styleColor" @mouseenter="isDisplay=true;">
  4 + <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" alt="">
  5 + <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
  6 + <customMenuBox ref="customMenu" v-if="imgStyle.probeDown && isDisplay"
  7 + :detailMenubox="calcDetailMenubox"
  8 + :tableDataValue="tableDataValue" :flg="''"
  9 + :tableDataValueHead="tableDataValueHead"
  10 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
  11 + :resType="resType"
  12 + ></customMenuBox>
  13 +
  14 + </div>
  15 + <v-chart :options="options" autoresize/>
  16 + </div>
  17 +</template>
  18 +
  19 +<script>
  20 +import echarts from "echarts";
  21 +import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
  22 +export default {
  23 + name: "gaugeRate",
  24 + components: {customMenuBox},
  25 + props: {
  26 + value: Object,
  27 + ispreview: Boolean
  28 + },
  29 + data() {
  30 + return {
  31 + isDisplay:false,
  32 + tableDataValue: {},
  33 + tableDataValueHead: {},
  34 + heightStyle:'',
  35 + marginStyle:'',
  36 + resType:'',
  37 + options: {
  38 + series: [
  39 + {
  40 + type: 'gauge',
  41 + z: 100,
  42 + axisLine: {
  43 + lineStyle: {
  44 + width: 10,
  45 + color: [
  46 + [
  47 + 0.3,
  48 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  49 + {
  50 + offset: 0,
  51 + color: 'rgba(0, 237, 3,0.1)',
  52 + },
  53 + {
  54 + offset: 0.5,
  55 + color: 'rgba(0, 237, 3,0.6)',
  56 + },
  57 + {
  58 + offset: 1,
  59 + color: 'rgba(0, 237, 3,1)',
  60 + },
  61 + ]),
  62 + ],
  63 + [
  64 + 0.7,
  65 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  66 + {
  67 + offset: 0,
  68 + color: 'rgba(255, 184, 0,0.1)',
  69 + },
  70 + {
  71 + offset: 0.5,
  72 + color: 'rgba(255, 184, 0,0.6)',
  73 + },
  74 + {
  75 + offset: 1,
  76 + color: 'rgba(255, 184, 0,1)',
  77 + },
  78 + ]),
  79 + ],
  80 + [
  81 + 1,
  82 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  83 + {
  84 + offset: 0,
  85 + color: 'rgba(175, 36, 74,0.1)',
  86 + },
  87 + {
  88 + offset: 0.5,
  89 + color: 'rgba(255, 36, 74,0.6)',
  90 + },
  91 + {
  92 + offset: 1,
  93 + color: 'rgba(255, 36, 74,1)',
  94 + },
  95 + ]),
  96 + ],
  97 + ],
  98 + },
  99 + },
  100 + pointer: {
  101 + itemStyle: {
  102 + color: 'auto',
  103 + },
  104 + },
  105 + axisTick: {
  106 + show: true,
  107 + distance: 0,
  108 + length: 10,
  109 + lineStyle: {
  110 + color: 'auto',
  111 + width: 2,
  112 + },
  113 + },
  114 + splitLine: {
  115 + show: true,
  116 + distance: 0,
  117 + length: 14,
  118 + lineStyle: {
  119 + color: 'auto',
  120 + width: 4,
  121 + },
  122 + },
  123 + axisLabel: {
  124 + show: true,
  125 + color: 'white',
  126 + distance: 2,
  127 + fontSize: 10,
  128 + },
  129 + detail: {
  130 + valueAnimation: true,
  131 + formatter: '{value} %',
  132 + color: 'white',
  133 + fontSize: 18,
  134 + },
  135 + data: [
  136 + {
  137 + value: 70,
  138 + },
  139 + ],
  140 + },
  141 + ],
  142 + },
  143 + optionsStyle: {}, // 样式
  144 + optionsData: {}, // 数据
  145 + optionsCollapse: {}, // 图标属性
  146 + optionsSetup: {}
  147 + };
  148 + },
  149 + computed: {
  150 + styleObj() {
  151 + return {
  152 + position: this.ispreview ? "absolute" : "static",
  153 + width: this.optionsStyle.width + "px",
  154 + height: this.optionsStyle.height + "px",
  155 + left: this.optionsStyle.left + "px",
  156 + top: this.optionsStyle.top + "px",
  157 + background: this.optionsSetup.background
  158 + };
  159 + },
  160 + styleColor() {
  161 + return {
  162 + "text-align": this.optionsSetup.textAlign,
  163 +
  164 + };
  165 + },
  166 + imgStyle() {
  167 + return {
  168 + imageAdress: this.optionsSetup.imageAdress,
  169 + titleName:this.optionsSetup.titleName,
  170 + probeDown:this.optionsSetup.probeDown
  171 + };
  172 + },
  173 + //表格下探列表
  174 + calcDetailMenubox(){
  175 + const menubox = this.optionsSetup;
  176 + let detailMenuBox=[];
  177 + if(menubox.alarm_setting){
  178 + detailMenuBox.push({
  179 + name:'告警设置',
  180 + type:'alarm_setting'
  181 + })
  182 + }
  183 + if(menubox.filter_sheet_indicator){
  184 + detailMenuBox.push({
  185 + name:'过滤单指标',
  186 + type:'filter_sheet_indicator'
  187 + })
  188 + }
  189 + if(menubox.filter_multiple_indicators){
  190 + detailMenuBox.push({
  191 + name:'过滤多指标',
  192 + type:'filter_multiple_indicators'
  193 + })
  194 + }
  195 + if(menubox.performance_trends){
  196 + detailMenuBox.push({
  197 + name:'性能趋势',
  198 + type:'performance_trends'
  199 + })
  200 + }
  201 + if(menubox.pressing_times){
  202 + detailMenuBox.push({
  203 + name:'压制次数',
  204 + type:'pressing_times'
  205 + })
  206 + }
  207 + if(menubox.include_capacity_forecast){
  208 + detailMenuBox.push({
  209 + name:'纳入容量预测',
  210 + type:'include_capacity_forecast'
  211 + })
  212 + }
  213 + return detailMenuBox;
  214 + },
  215 + },
  216 + watch: {
  217 + value: {
  218 + handler(val) {
  219 + this.optionsStyle = val.position; // 位置
  220 + this.optionsData = val.data; // 数据
  221 + this.optionsCollapse = val.collapse; // 折叠数据
  222 + this.optionsSetup = val.setup; // 样式
  223 + this.editorOptions();
  224 + },
  225 + deep: true
  226 + }
  227 + },
  228 + created() {
  229 + this.optionsStyle = this.value.position;
  230 + this.optionsData = this.value.data;
  231 + this.optionsCollapse = this.value.collapse;
  232 + this.optionsSetup = this.value.setup;
  233 + this.editorOptions();
  234 + },
  235 + methods: {
  236 + editorOptions() {
  237 + this.setOptions()
  238 + this.setOptionsData()
  239 + },
  240 + setOptions() {
  241 + const optionsSetup = this.optionsSetup;
  242 + const series = this.options.series;
  243 + if (series[0].type == 'gauge') {
  244 + const axisLine = {
  245 + show: optionsSetup.ringShow,
  246 + lineStyle: {
  247 + width: optionsSetup.pieWeight,
  248 + color: [
  249 + [
  250 + 0.3,
  251 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  252 + {
  253 + offset: 0,
  254 + color: optionsSetup.color30p0,
  255 + },
  256 + {
  257 + offset: 0.5,
  258 + color: optionsSetup.color30p5,
  259 + },
  260 + {
  261 + offset: 1,
  262 + color: optionsSetup.color30p10,
  263 + },
  264 + ]),
  265 + ],
  266 + [
  267 + 0.7,
  268 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  269 + {
  270 + offset: 0,
  271 + color: optionsSetup.color70p0,
  272 + },
  273 + {
  274 + offset: 0.5,
  275 + color: optionsSetup.color70p5,
  276 + },
  277 + {
  278 + offset: 1,
  279 + color: optionsSetup.color70p10,
  280 + },
  281 + ]),
  282 + ],
  283 + [
  284 + 1,
  285 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  286 + {
  287 + offset: 0,
  288 + color: optionsSetup.color100p0,
  289 + },
  290 + {
  291 + offset: 0.5,
  292 + color: optionsSetup.color100p5,
  293 + },
  294 + {
  295 + offset: 1,
  296 + color: optionsSetup.color100p10,
  297 + },
  298 + ]),
  299 + ],
  300 + ],
  301 + },
  302 + }
  303 + const axisTick = {
  304 + show: optionsSetup.tickShow,
  305 + distance: optionsSetup.tickDistance,
  306 + length: optionsSetup.tickLength,
  307 + lineStyle: {
  308 + color: 'auto',
  309 + width: optionsSetup.tickWidth,
  310 + },
  311 + }
  312 + const splitLine = {
  313 + show: optionsSetup.splitShow,
  314 + distance: optionsSetup.splitDistance,
  315 + length: optionsSetup.splitLength,
  316 + lineStyle: {
  317 + color: 'auto',
  318 + width: optionsSetup.splitWidth,
  319 + },
  320 + }
  321 + series[0].axisLine = axisLine
  322 + series[0].axisTick = axisTick
  323 + series[0].splitLine = splitLine
  324 + }
  325 + },
  326 + setOptionsData() {
  327 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  328 + optionsData.dataType == "staticData"
  329 + ? this.staticDataFn(optionsData.staticData)
  330 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  331 + },
  332 + staticDataFn(val) {
  333 + const optionsSetup = this.optionsSetup;
  334 + const series = this.options.series;
  335 + const num = val[0]['num'];
  336 + const data = [
  337 + {
  338 + value: num
  339 + }
  340 + ]
  341 + const detail = {
  342 + valueAnimation: true,
  343 + formatter: '{value} %',
  344 + color: optionsSetup.labelColor,
  345 + fontSize: optionsSetup.labelFontSize,
  346 + fontWeight: optionsSetup.labelFontWeight,
  347 + }
  348 + series[0].data = data
  349 + series[0].detail = detail
  350 + },
  351 + dynamicDataFn(val, refreshTime) {
  352 + if (!val) return;
  353 + if (this.ispreview) {
  354 + this.getEchartData(val);
  355 + this.flagInter = setInterval(() => {
  356 + this.getEchartData(val);
  357 + }, refreshTime);
  358 + } else {
  359 + this.getEchartData(val);
  360 + }
  361 + },
  362 + getEchartData(val) {
  363 + const data = this.queryEchartsData(val);
  364 + data.then(res => {
  365 + this.renderingFn(res);
  366 + });
  367 + },
  368 + renderingFn(val) {
  369 + const optionsSetup = this.optionsSetup;
  370 + const series = this.options.series;
  371 + const data = [
  372 + {
  373 + value: val[0].value
  374 + }
  375 + ]
  376 + const detail = {
  377 + valueAnimation: true,
  378 + formatter: '{value} %',
  379 + color: optionsSetup.labelColor,
  380 + fontSize: optionsSetup.labelFontSize,
  381 + fontWeight: optionsSetup.labelFontWeight,
  382 + }
  383 + series[0].data = data
  384 + series[0].detail = detail
  385 + }
  386 + }
  387 +};
  388 +</script>
  389 +
  390 +<style scoped lang="scss">
  391 +.echarts {
  392 + width: 100%;
  393 + height: 100%;
  394 + overflow: hidden;
  395 +}
  396 +.title-div{
  397 + text-align: left;
  398 + padding:10px;
  399 +}
  400 +.title-name{
  401 + color:rgb(30,159,255);
  402 + font-size: 16px;
  403 + font-weight: bold;
  404 +}
  405 +.flex-start{
  406 + display: flex;
  407 + justify-content: start;
  408 + align-items: center;
  409 +}
  410 +</style>
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt=""> 5 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
6 <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div> 6 <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
7 </div> 7 </div>
8 - <el-row class="padding-top-30"> 8 + <el-row class="padding-top-30" v-if="hackReset">
9 <!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">--> 9 <!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">-->
10 <el-col class="flex-around" :span="24" > 10 <el-col class="flex-around" :span="24" >
11 <div class="health-service"> 11 <div class="health-service">
@@ -16,17 +16,20 @@ @@ -16,17 +16,20 @@
16 <div class="health-num-item"> 16 <div class="health-num-item">
17 <span class="health-color"></span> 17 <span class="health-color"></span>
18 <span class="health-num-title">严重告警：</span> 18 <span class="health-num-title">严重告警：</span>
19 - <span class="health-num">{{ healthNumData.yz }}</span> 19 + <span class="health-num" v-if="healthNumData.yz && healthNumData.yz!='null'">{{ healthNumData.yz }}</span>
  20 + <span class="health-num" v-if="!healthNumData.yz || healthNumData.yz=='null'">0</span>
20 </div> 21 </div>
21 <div class="health-num-item"> 22 <div class="health-num-item">
22 <span class="health-color"></span> 23 <span class="health-color"></span>
23 <span class="health-num-title">重要告警：</span> 24 <span class="health-num-title">重要告警：</span>
24 - <span class="health-num">{{ healthNumData.zy }}</span> 25 + <span class="health-num" v-if="healthNumData.zy && healthNumData.zy!='null'">{{ healthNumData.zy }}</span>
  26 + <span class="health-num" v-if="!healthNumData.zy || healthNumData.zy=='null'">0</span>
25 </div> 27 </div>
26 <div class="health-num-item"> 28 <div class="health-num-item">
27 <span class="health-color"></span> 29 <span class="health-color"></span>
28 <span class="health-num-title">一般告警：</span> 30 <span class="health-num-title">一般告警：</span>
29 - <span class="health-num">{{ healthNumData.yb }}</span> 31 + <span class="health-num" v-if="healthNumData.yb && healthNumData.yb!='null'">{{ healthNumData.yb }}</span>
  32 + <span class="health-num" v-if="!healthNumData.yb || healthNumData.yb=='null'">0</span>
30 </div> 33 </div>
31 </div> 34 </div>
32 </el-col> 35 </el-col>
@@ -44,15 +47,16 @@ export default { @@ -44,15 +47,16 @@ export default {
44 name: "resourceStatus", 47 name: "resourceStatus",
45 data() { 48 data() {
46 return { 49 return {
  50 + hackReset: true,
47 options: {}, 51 options: {},
48 spanNum:24,//col的span的个数 52 spanNum:24,//col的span的个数
49 healthStatusUrl:'', 53 healthStatusUrl:'',
50 - healthNumData:{ 54 + healthNumData:{/*
51 icon: "worse", 55 icon: "worse",
52 - state: "量", 56 + state: "良",
53 yb: "0", 57 yb: "0",
54 yz: "0", 58 yz: "0",
55 - zy: "1" 59 + zy: "1"*/
56 },//资源状态告警个数数据 good worse worst 60 },//资源状态告警个数数据 good worse worst
57 healthData:[ 61 healthData:[
58 62
@@ -123,21 +127,13 @@ export default { @@ -123,21 +127,13 @@ export default {
123 }, 127 },
124 imgStyleHealth() { 128 imgStyleHealth() {
125 return { 129 return {
126 - imageAdressHealthBg:this.transStyle.imageAdressHealthBg?this.transStyle.imageAdressHealthBg:require("../../../../../../assets/images/healthStatus/state_bg.png"), 130 + imageAdressHealthBg:this.transStyle.imageAdressHealthBg,
127 imageAdressHealthGood:this.transStyle.imageAdressHealthGood?this.transStyle.imageAdressHealthGood:require("../../../../../../assets/images/healthStatus/state_01.png"), 131 imageAdressHealthGood:this.transStyle.imageAdressHealthGood?this.transStyle.imageAdressHealthGood:require("../../../../../../assets/images/healthStatus/state_01.png"),
128 imageAdressHealthWorse:this.transStyle.imageAdressHealthWorse?this.transStyle.imageAdressHealthWorse:require("../../../../../../assets/images/healthStatus/state_02.png"), 132 imageAdressHealthWorse:this.transStyle.imageAdressHealthWorse?this.transStyle.imageAdressHealthWorse:require("../../../../../../assets/images/healthStatus/state_02.png"),
129 imageAdressHealthBad:this.transStyle.imageAdressHealthBad?this.transStyle.imageAdressHealthBad:require("../../../../../../assets/images/healthStatus/state_03.png"), 133 imageAdressHealthBad:this.transStyle.imageAdressHealthBad?this.transStyle.imageAdressHealthBad:require("../../../../../../assets/images/healthStatus/state_03.png"),
130 dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'3' 134 dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'3'
131 }; 135 };
132 }, 136 },
133 - /* healthDataComputed(){  
134 - let healthData=this.healthData;  
135 - healthData=this.initImageUrl();  
136 - if(this.imgStyleHealth.dataNum){  
137 - healthData=healthData.slice(0,this.imgStyleHealth.dataNum);  
138 - }  
139 - return healthData;  
140 - }*/  
141 }, 137 },
142 watch: { 138 watch: {
143 value: { 139 value: {
@@ -146,10 +142,9 @@ export default { @@ -146,10 +142,9 @@ export default {
146 this.optionsSetUp = val.setup; 142 this.optionsSetUp = val.setup;
147 this.optionsPosition = val.position; 143 this.optionsPosition = val.position;
148 this.optionsData=val.data; 144 this.optionsData=val.data;
  145 + // this.init();
149 this.handlerData(); 146 this.handlerData();
150 -  
151 - this.initImageUrl();  
152 - this.getHealthData(); 147 + this.initImageUrl();
153 148
154 }, 149 },
155 deep: true 150 deep: true
@@ -161,10 +156,9 @@ export default { @@ -161,10 +156,9 @@ export default {
161 this.optionsSetUp = this.value.setup; 156 this.optionsSetUp = this.value.setup;
162 this.optionsPosition = this.value.position; 157 this.optionsPosition = this.value.position;
163 this.optionsData = this.value.data; 158 this.optionsData = this.value.data;
  159 + // this.init();
164 this.handlerData(); 160 this.handlerData();
165 -  
166 - this.initImageUrl();  
167 - this.getHealthData(); 161 + this.initImageUrl();
168 }, 162 },
169 methods: { 163 methods: {
170 164
@@ -188,8 +182,12 @@ export default { @@ -188,8 +182,12 @@ export default {
188 }, 182 },
189 async init(){ 183 async init(){
190 const reportCode = this.$route.query.reportCode; 184 const reportCode = this.$route.query.reportCode;
191 - const { code, data } = await getData(reportCode);  
192 - if (code != 200) return; 185 + console.log("aaa",this.$route.query)
  186 + let locationUrl=this.$route.query;
  187 + let resId=locationUrl.resId;
  188 + let token=locationUrl.access_token;
  189 + // const { code, data } = await getData(reportCode);
  190 + // if (code != 200) return;
193 }, 191 },
194 handlerData() { 192 handlerData() {
195 const resData = this.optionsData; 193 const resData = this.optionsData;
@@ -200,28 +198,39 @@ export default { @@ -200,28 +198,39 @@ export default {
200 }, 198 },
201 handlerStaticData(data) { 199 handlerStaticData(data) {
202 this.healthNumData = data; 200 this.healthNumData = data;
  201 + this.initImageUrl();
203 }, 202 },
204 handlerDynamicData(data, refreshTime) { 203 handlerDynamicData(data, refreshTime) {
205 if (!data) return; 204 if (!data) return;
206 - /* if (this.ispreview) { 205 + console.log("资源",data)
  206 + if (this.ispreview) {
207 this.getEchartData(data); 207 this.getEchartData(data);
208 this.flagInter = setInterval(() => { 208 this.flagInter = setInterval(() => {
209 this.getEchartData(data); 209 this.getEchartData(data);
210 }, refreshTime); 210 }, refreshTime);
211 } else { 211 } else {
212 this.getEchartData(data); 212 this.getEchartData(data);
213 - }*/ 213 + }
214 }, 214 },
215 - async getHealthData(){  
216 - 215 + getEchartData(val) {
  216 + const data = this.queryEchartsData(val);
  217 + data.then(res => {
  218 + console.log("def",res)
  219 + if(res && res[0].code==0){
  220 + this.healthNumData = res[0].data;
217 221
218 - /*  
219 - const { code, data } = await getHealth();  
220 - if (code != 200) return;  
221 - this.healthNumData=data;  
222 - console.log("health",data)*/ 222 + }
  223 + this.hackResetFun();
  224 + this.initImageUrl();
  225 + });
  226 + },
  227 + // vue hack 之强制刷新组件
  228 + hackResetFun() {
  229 + this.hackReset = false;
  230 + this.$nextTick(() => {
  231 + this.hackReset = true;
  232 + });
223 }, 233 },
224 -  
225 }, 234 },
226 } 235 }
227 </script> 236 </script>
@@ -42,6 +42,7 @@ import monitorResourceStatus from "./monitor/resourceStatus"; @@ -42,6 +42,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
42 import monitorBasicInformation from "./monitor/basicInformation"; 42 import monitorBasicInformation from "./monitor/basicInformation";
43 import monitorDetailTable from "./monitor/detailTable"; 43 import monitorDetailTable from "./monitor/detailTable";
44 import monitorBgBorder from "./monitor/bgBorder"; 44 import monitorBgBorder from "./monitor/bgBorder";
  45 +import monitorGaugeRate from "./monitor/gaugeRate";
45 46
46 export default { 47 export default {
47 name: "WidgetTemp", 48 name: "WidgetTemp",
@@ -76,7 +77,8 @@ export default { @@ -76,7 +77,8 @@ export default {
76 monitorResourceStatus, 77 monitorResourceStatus,
77 monitorBasicInformation, 78 monitorBasicInformation,
78 monitorDetailTable, 79 monitorDetailTable,
79 - monitorBgBorder 80 + monitorBgBorder,
  81 + monitorGaugeRate
80 }, 82 },
81 model: { 83 model: {
82 prop: "value", 84 prop: "value",
@@ -53,6 +53,7 @@ import monitorResourceStatus from "./monitor/resourceStatus"; @@ -53,6 +53,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
53 import monitorBasicInformation from "./monitor/basicInformation"; 53 import monitorBasicInformation from "./monitor/basicInformation";
54 import monitorDetailTable from "./monitor/detailTable"; 54 import monitorDetailTable from "./monitor/detailTable";
55 import monitorBgBorder from "./monitor/bgBorder"; 55 import monitorBgBorder from "./monitor/bgBorder";
  56 +import monitorGaugeRate from "./monitor/gaugeRate";
56 57
57 58
58 export default { 59 export default {
@@ -87,7 +88,8 @@ export default { @@ -87,7 +88,8 @@ export default {
87 monitorResourceStatus, 88 monitorResourceStatus,
88 monitorBasicInformation, 89 monitorBasicInformation,
89 monitorDetailTable, 90 monitorDetailTable,
90 - monitorBgBorder 91 + monitorBgBorder,
  92 + monitorGaugeRate
91 }, 93 },
92 model: { 94 model: {
93 prop: "value", 95 prop: "value",