monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 7c9e218c875a3e49ccc016e75805b64ce641271e 2 parents 19895b89 7dfc3fff

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

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



See merge request !20
Inline Side-by-side
Showing 14 changed files with 1627 additions and 88 deletions
@@ -5,6 +5,7 @@ const prodEnv = require('./prod.env') @@ -5,6 +5,7 @@ const prodEnv = require('./prod.env')
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_other: '"https://192.168.0.69:8080"'
  9 + BASE_API_other: '"http://192.168.0.74:8080"'
9 // BASE_API: '"http://10.108.26.197:9095"' 10 // BASE_API: '"http://10.108.26.197:9095"'
10 }) 11 })
This diff could not be displayed because it is too large.
@@ -98,7 +98,6 @@ export default { @@ -98,7 +98,6 @@ export default {
98 return new Promise(async (resolve) => { 98 return new Promise(async (resolve) => {
99 const {code, data} = await getData(params); 99 const {code, data} = await getData(params);
100 if (code != 200) return 100 if (code != 200) return
101 - console.log(")))",data)  
102 const analysisData = this.analysisChartsData(params, data); 101 const analysisData = this.analysisChartsData(params, data);
103 resolve(analysisData) 102 resolve(analysisData)
104 }) 103 })
@@ -128,7 +127,9 @@ export default { @@ -128,7 +127,9 @@ export default {
128 return this.stackChartFn(params.chartProperties, data) 127 return this.stackChartFn(params.chartProperties, data)
129 }else if(chartType == "custom-linechart"){ 128 }else if(chartType == "custom-linechart"){
130 return this.barOrLineChartFnCustom(params.chartProperties, data); 129 return this.barOrLineChartFnCustom(params.chartProperties, data);
131 - } else { 130 + } else if(chartType == "monitor-stackchart"){
  131 + return this.stackChartFnCustom(params.chartProperties, data)
  132 + }else {
132 return data 133 return data
133 } 134 }
134 }, 135 },
@@ -185,6 +186,38 @@ export default { @@ -185,6 +186,38 @@ export default {
185 ananysicData["series"] = series; 186 ananysicData["series"] = series;
186 return ananysicData; 187 return ananysicData;
187 }, 188 },
  189 + //堆叠图自定义
  190 + stackChartFnCustom(chartProperties, data){
  191 + const ananysicData = {};
  192 + const series = [];
  193 + //全部字段字典值
  194 + const types = Object.values(chartProperties)
  195 + let newData=data[0];
  196 + //x轴字段、y轴字段名
  197 + const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
  198 + const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
  199 + const dataField = Object.keys(chartProperties)[types.indexOf('bar')]
  200 + //x轴数值去重，y轴去重
  201 + const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
  202 + const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
  203 + const dataGroup = this.setGroupBy(data, yAxisField)
  204 + let yAxisListNew=yAxisList[0].series;
  205 +
  206 + if(yAxisListNew && yAxisListNew.length>0){
  207 + yAxisListNew.map(item=>{
  208 + series.push({
  209 + name: item.name,
  210 + type: item.type,
  211 + data: item.data,
  212 + })
  213 + })
  214 +
  215 + }
  216 + ananysicData["xAxis"] = xAxisList[0];
  217 + ananysicData["series"] = series;
  218 + ananysicData["kpiMap"] = newData.kpiMap;
  219 + return ananysicData;
  220 + },
188 //堆叠图 221 //堆叠图
189 stackChartFn(chartProperties, data) { 222 stackChartFn(chartProperties, data) {
190 const ananysicData = {}; 223 const ananysicData = {};
@@ -97,10 +97,10 @@ @@ -97,10 +97,10 @@
97 </el-form-item> 97 </el-form-item>
98 </el-form> 98 </el-form>
99 <span slot="footer" class="dialog-footer"> 99 <span slot="footer" class="dialog-footer">
100 - <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>  
101 - <el-button size="mini" type="primary" @click="handleSaveClick"  
102 - >确 定</el-button  
103 - > 100 + <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
  101 + <el-button size="mini" type="primary" @click="handleSaveClick"
  102 + >确 定</el-button
  103 + >
104 </span> 104 </span>
105 </el-dialog> 105 </el-dialog>
106 <el-dialog 106 <el-dialog
@@ -113,6 +113,11 @@ @@ -113,6 +113,11 @@
113 <el-input v-model="keyword" placeholder="请输入指标名称" clearable /> 113 <el-input v-model="keyword" placeholder="请输入指标名称" clearable />
114 <el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button> 114 <el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button>
115 </div> 115 </div>
  116 + <div class="table-btn">
  117 + <el-button @click="selectKpi(false)" class="search-btn" :type="primaryType0">重新选择</el-button>
  118 + <el-button @click="selectKpi(true)" class="search-btn" :type="primaryType1">追加</el-button>
  119 +
  120 + </div>
116 <el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange" 121 <el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"
117 :row-key="(row) => { return row.kpiId }" 122 :row-key="(row) => { return row.kpiId }"
118 > 123 >
@@ -146,9 +151,12 @@ @@ -146,9 +151,12 @@
146 </div> 151 </div>
147 <span slot="footer" class="dialog-footer"> 152 <span slot="footer" class="dialog-footer">
148 <el-button size="mini" @click="dialogVisible = false">取 消</el-button> 153 <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
149 - <el-button size="mini" type="primary" @click="handleSaveClick"  
150 - >确 定</el-button  
151 - > 154 +
  155 + <el-tooltip class="item" effect="dark" content="默认为重新选择，追加请先点击追加按钮" placement="top-start">
  156 + <el-button size="mini" type="primary" @click="handleSaveClick"
  157 + >确 定</el-button
  158 + >
  159 + </el-tooltip>
152 </span> 160 </span>
153 </el-dialog> 161 </el-dialog>
154 </div> 162 </div>
@@ -164,8 +172,19 @@ export default { @@ -164,8 +172,19 @@ export default {
164 props: { 172 props: {
165 formData: Array 173 formData: Array
166 }, 174 },
  175 + watch:{
  176 + headTable:{
  177 + handler(val){
  178 + console.log("*(*(",val)
  179 + },
  180 + deep:true
  181 + }
  182 + },
167 data() { 183 data() {
168 return { 184 return {
  185 + primaryTypeFlg:false,//默认为追加
  186 + primaryType1:'default',
  187 + primaryType0:'primary',
169 keyword:'', 188 keyword:'',
170 currentPage:1, 189 currentPage:1,
171 pageSize:10, 190 pageSize:10,
@@ -202,22 +221,40 @@ export default { @@ -202,22 +221,40 @@ export default {
202 ],//关联组件 221 ],//关联组件
203 }; 222 };
204 }, 223 },
  224 + computed:{
  225 + //获取url地址中的token
  226 + getUrlToken(){
  227 + let locationUrl=this.$route.query;
  228 + let resId=locationUrl.resId;
  229 + let token=locationUrl.access_token;
  230 + let urlObj={
  231 + resId:resId,
  232 + token:token
  233 + }
  234 + return urlObj;
  235 + }
  236 + },
205 methods: { 237 methods: {
206 //搜索指标 238 //搜索指标
207 searchKpi(){ 239 searchKpi(){
208 this.getKpi(); 240 this.getKpi();
209 }, 241 },
210 //获取性能指标列表 242 //获取性能指标列表
211 - getKpi(){  
212 - let datas=getKpiPage();  
213 - if(datas.success){  
214 - this.tableData=datas.data;  
215 - 243 + async getKpi(){
  244 + let params={
  245 + page:this.currentPage,
  246 + limit:this.pageSize,
  247 + kpiName:this.keyword,
  248 + }
  249 + const { success,data,count } = await getKpiPage(params,this.getUrlToken);
  250 + this.total=count;
  251 + if(success){
  252 + this.tableData=data;
216 } 253 }
217 }, 254 },
218 //回显数据 255 //回显数据
219 setCheckedData(){ 256 setCheckedData(){
220 - if(this.multipleSelection && this.multipleSelection.length>0){ 257 + /*if(this.multipleSelection && this.multipleSelection.length>0){
221 this.tableData.map(item=>{ 258 this.tableData.map(item=>{
222 this.multipleSelection.map(v=>{ 259 this.multipleSelection.map(v=>{
223 if(item.kpiId==v.kpiId){ 260 if(item.kpiId==v.kpiId){
@@ -227,7 +264,7 @@ export default { @@ -227,7 +264,7 @@ export default {
227 } 264 }
228 }) 265 })
229 }) 266 })
230 - } 267 + }*/
231 }, 268 },
232 //多选操作 269 //多选操作
233 handleSelectionChange(val) { 270 handleSelectionChange(val) {
@@ -289,10 +326,21 @@ export default { @@ -289,10 +326,21 @@ export default {
289 if (this.flag) { 326 if (this.flag) {
290 // 新增 327 // 新增
291 // this.formData.push(this.rowFormData); 328 // this.formData.push(this.rowFormData);
292 - let arr=[]  
293 - this.multipleSelection.map((item,index)=>{  
294 - arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})  
295 - }) 329 + let arr=[];
  330 + if(this.primaryTypeFlg){
  331 + //追加
  332 + let arr1=[];
  333 + this.multipleSelection.map((item,index)=>{
  334 + arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
  335 + })
  336 + arr=this.formData.concat(arr1);
  337 + }else{
  338 + //重新选择
  339 + this.multipleSelection.map((item,index)=>{
  340 + arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
  341 + })
  342 + }
  343 +
296 this.formData=arr; 344 this.formData=arr;
297 this.formData.sort(this.compare('columnSort')); 345 this.formData.sort(this.compare('columnSort'));
298 this.dialogVisible = false; 346 this.dialogVisible = false;
@@ -303,6 +351,7 @@ export default { @@ -303,6 +351,7 @@ export default {
303 this.formData.sort(this.compare('columnSort')); 351 this.formData.sort(this.compare('columnSort'));
304 this.editDialogVisible = false; 352 this.editDialogVisible = false;
305 } 353 }
  354 + console.log("AVX", this.formData)
306 this.$emit("input", this.formData); 355 this.$emit("input", this.formData);
307 this.$emit("change", this.formData); 356 this.$emit("change", this.formData);
308 }, 357 },
@@ -338,6 +387,19 @@ export default { @@ -338,6 +387,19 @@ export default {
338 },300) 387 },300)
339 } 388 }
340 }) 389 })
  390 + },
  391 + //重新配置表头或者追加表头
  392 + selectKpi(flg){
  393 + this.primaryTypeFlg=flg;
  394 + if(flg){
  395 + //追加
  396 + this.primaryType1='primary';
  397 + this.primaryType0='default';
  398 + }else{
  399 + //重新选择
  400 + this.primaryType0='primary';
  401 + this.primaryType1='default';
  402 + }
341 } 403 }
342 } 404 }
343 }; 405 };
@@ -399,4 +461,7 @@ export default { @@ -399,4 +461,7 @@ export default {
399 color:#D81E06; 461 color:#D81E06;
400 line-height: 12px; 462 line-height: 12px;
401 } 463 }
  464 +.table-btn{
  465 + margin-top:10px;
  466 +}
402 </style> 467 </style>
@@ -118,6 +118,7 @@ export default { @@ -118,6 +118,7 @@ export default {
118 chartProperties: this.chartProperties, 118 chartProperties: this.chartProperties,
119 contextData 119 contextData
120 }; 120 };
  121 + console.log("^&^&",params)
121 this.$emit("input", params); 122 this.$emit("input", params);
122 this.$emit("change", params); 123 this.$emit("change", params);
123 }, 124 },
  1 +/*
  2 + * @Descripttion: 柱状堆叠图-使用情况
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-02-24
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-02-24
  8 + */
  9 +export const monitorCustomBarStack = {
  10 + code: 'monitorCustomBarStack',
  11 + type: 'chart',
  12 + label: '使用情况-柱状堆叠图',
  13 + icon: 'iconbianzu23',
  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-switch',
  27 + label: '竖展示',
  28 + name: 'verticalShow',
  29 + required: false,
  30 + placeholder: '',
  31 + value: false,
  32 + },
  33 + {
  34 + type: 'vue-color',
  35 + label: '背景颜色',
  36 + name: 'background',
  37 + required: false,
  38 + placeholder: '',
  39 + value: ''
  40 + },
  41 + {
  42 + type: 'el-select',
  43 + label: 'kpiId',
  44 + name: 'kpiId',
  45 + required: false,
  46 + placeholder: '',
  47 + selectOptions: [
  48 + {code: 'KPIA91F44E7,KPI98306224', name: 'KPIA91F44E7,KPI98306224(文件系统总大小)'},
  49 + ],
  50 + value: 'KPIA91F44E7,KPI98306224',
  51 + },
  52 + {
  53 + type: 'el-select',
  54 + label: '堆叠样式',
  55 + name: 'stackStyle',
  56 + required: false,
  57 + placeholder: '',
  58 + selectOptions: [
  59 + {code: 'leftRight', name: '左右堆叠'},
  60 + {code: 'upDown', name: '上下堆叠'},
  61 + ],
  62 + value: 'upDown'
  63 + },
  64 + [
  65 + {
  66 + name: '柱体设置',
  67 + list: [
  68 + {
  69 + type: 'el-slider',
  70 + label: '最大宽度',
  71 + name: 'maxWidth',
  72 + required: false,
  73 + placeholder: '',
  74 + value: 20,
  75 + },
  76 + {
  77 + type: 'el-slider',
  78 + label: '圆角',
  79 + name: 'radius',
  80 + require: false,
  81 + placeholder: '',
  82 + value: 0,
  83 + },
  84 + ],
  85 + },
  86 + {
  87 + name: '标题设置',
  88 + list: [
  89 + {
  90 + type: 'el-switch',
  91 + label: '标题',
  92 + name: 'isNoTitle',
  93 + required: false,
  94 + placeholder: '',
  95 + value: true,
  96 + },
  97 + {
  98 + type: 'el-input-text',
  99 + label: '标题',
  100 + name: 'titleText',
  101 + required: false,
  102 + placeholder: '',
  103 + value: '系统使用情况',
  104 + },
  105 + {
  106 + type: 'vue-color',
  107 + label: '字体颜色',
  108 + name: 'textColor',
  109 + required: false,
  110 + placeholder: '',
  111 + value: '#1e9fff'
  112 + },
  113 + {
  114 + type: 'el-select',
  115 + label: '字体粗细',
  116 + name: 'textFontWeight',
  117 + required: false,
  118 + placeholder: '',
  119 + selectOptions: [
  120 + {code: 'normal', name: '正常'},
  121 + {code: 'bold', name: '粗体'},
  122 + {code: 'bolder', name: '特粗体'},
  123 + {code: 'lighter', name: '细体'}
  124 + ],
  125 + value: 'bold'
  126 + },
  127 + {
  128 + type: 'el-input-number',
  129 + label: '字体大小',
  130 + name: 'textFontSize',
  131 + required: false,
  132 + placeholder: '',
  133 + value: 16
  134 + },
  135 + {
  136 + type: 'el-select',
  137 + label: '字体位置',
  138 + name: 'textAlign',
  139 + required: false,
  140 + placeholder: '',
  141 + selectOptions: [
  142 + {code: 'center', name: '居中'},
  143 + {code: 'left', name: '左对齐'},
  144 + {code: 'right', name: '右对齐'},
  145 + ],
  146 + value: 'left'
  147 + },
  148 + {
  149 + type: 'el-input-text',
  150 + label: '副标题',
  151 + name: 'subText',
  152 + required: false,
  153 + placeholder: '',
  154 + value: ''
  155 + },
  156 + {
  157 + type: 'vue-color',
  158 + label: '字体颜色',
  159 + name: 'subTextColor',
  160 + required: false,
  161 + placeholder: '',
  162 + value: 'rgba(30, 144, 255, 1)'
  163 + },
  164 + {
  165 + type: 'el-select',
  166 + label: '字体粗细',
  167 + name: 'subTextFontWeight',
  168 + required: false,
  169 + placeholder: '',
  170 + selectOptions: [
  171 + {code: 'normal', name: '正常'},
  172 + {code: 'bold', name: '粗体'},
  173 + {code: 'bolder', name: '特粗体'},
  174 + {code: 'lighter', name: '细体'}
  175 + ],
  176 + value: 'normal'
  177 + },
  178 + {
  179 + type: 'el-input-number',
  180 + label: '字体大小',
  181 + name: 'subTextFontSize',
  182 + required: false,
  183 + placeholder: '',
  184 + value: 20
  185 + },
  186 + ],
  187 + },
  188 + {
  189 + name: 'X轴设置',
  190 + list: [
  191 + {
  192 + type: 'el-switch',
  193 + label: '显示',
  194 + name: 'hideX',
  195 + required: false,
  196 + placeholder: '',
  197 + value: true,
  198 + },
  199 + {
  200 + type: 'el-input-text',
  201 + label: 'X轴别名',
  202 + name: 'xName',
  203 + required: false,
  204 + placeholder: '',
  205 + value: ''
  206 + },
  207 + {
  208 + type: 'vue-color',
  209 + label: '别名颜色',
  210 + name: 'xNameColor',
  211 + required: false,
  212 + placeholder: '',
  213 + value: '#fff'
  214 + },
  215 + {
  216 + type: 'el-input-number',
  217 + label: '别名字号',
  218 + name: 'xNameFontSize',
  219 + required: false,
  220 + placeholder: '',
  221 + value: 14
  222 + },
  223 + {
  224 + type: 'el-switch',
  225 + label: '轴反转',
  226 + name: 'reversalX',
  227 + required: false,
  228 + placeholder: '',
  229 + value: false
  230 + },
  231 + {
  232 + type: 'el-slider',
  233 + label: '文字角度',
  234 + name: 'textAngleX',
  235 + required: false,
  236 + placeholder: '',
  237 + value: 0
  238 + },
  239 + {
  240 + type: 'el-input-number',
  241 + label: '文字间隔',
  242 + name: 'textInterval',
  243 + required: false,
  244 + placeholder: '',
  245 + value: ''
  246 + },
  247 + {
  248 + type: 'vue-color',
  249 + label: '文字颜色',
  250 + name: 'Xcolor',
  251 + required: false,
  252 + placeholder: '',
  253 + value: '#666',
  254 + },
  255 + {
  256 + type: 'el-input-number',
  257 + label: '文字字号',
  258 + name: 'fontSizeX',
  259 + required: false,
  260 + placeholder: '',
  261 + value: 14,
  262 + },
  263 + {
  264 + type: 'vue-color',
  265 + label: '轴颜色',
  266 + name: 'lineColorX',
  267 + required: false,
  268 + placeholder: '',
  269 + value: '#c9c9c9',
  270 + },
  271 + {
  272 + type: 'el-switch',
  273 + label: '分割线显示',
  274 + name: 'isShowSplitLineX',
  275 + require: false,
  276 + placeholder: '',
  277 + value: false,
  278 + },
  279 + {
  280 + type: 'vue-color',
  281 + label: '分割线颜色',
  282 + name: 'splitLineColorX',
  283 + required: false,
  284 + placeholder: '',
  285 + value: '#c9c9c9',
  286 +
  287 + },
  288 + {
  289 + type: 'el-switch',
  290 + label: '分割区显示',
  291 + name: 'splitArea',
  292 + require: false,
  293 + placeholder: '',
  294 + value: true,
  295 + },
  296 + {
  297 + type: 'vue-color',
  298 + label: '分割区颜色',
  299 + name: 'splitAreaColor',
  300 + required: false,
  301 + placeholder: '',
  302 + value: 'rgba(200,200,200,0.1)',
  303 + },
  304 + ],
  305 + },
  306 + {
  307 + name: 'Y轴设置',
  308 + list: [
  309 + {
  310 + type: 'el-switch',
  311 + label: '显示',
  312 + name: 'isShowY',
  313 + require: false,
  314 + placeholder: '',
  315 + value: true,
  316 + },
  317 + {
  318 + type: 'el-input-text',
  319 + label: 'Y轴别名',
  320 + name: 'textNameY',
  321 + require: false,
  322 + placeholder: '',
  323 + value: ''
  324 + },
  325 + {
  326 + type: 'vue-color',
  327 + label: '别名颜色',
  328 + name: 'NameColorY',
  329 + required: false,
  330 + placeholder: '',
  331 + value: '#fff',
  332 + },
  333 + {
  334 + type: 'el-input-number',
  335 + label: '别名字号',
  336 + name: 'NameFontSizeY',
  337 + required: false,
  338 + placeholder: '',
  339 + value: 14,
  340 + },
  341 + {
  342 + type: 'el-switch',
  343 + label: '轴反转',
  344 + name: 'reversalY',
  345 + required: false,
  346 + placeholder: '',
  347 + value: false
  348 + },
  349 + {
  350 + type: 'el-slider',
  351 + label: '文字角度',
  352 + name: 'textAngleY',
  353 + required: false,
  354 + placeholder: '',
  355 + value: 0
  356 + },
  357 + {
  358 + type: 'vue-color',
  359 + label: '文字颜色',
  360 + name: 'colorY',
  361 + required: false,
  362 + placeholder: '',
  363 + value: '#666',
  364 + },
  365 + {
  366 + type: 'el-input-number',
  367 + label: '文字字号',
  368 + name: 'fontSizeY',
  369 + required: false,
  370 + placeholder: '',
  371 + value: 14,
  372 + },
  373 + {
  374 + type: 'vue-color',
  375 + label: '轴颜色',
  376 + name: 'lineColorY',
  377 + required: false,
  378 + placeholder: '',
  379 + value: '#c9c9c9',
  380 + },
  381 + {
  382 + type: 'el-switch',
  383 + label: '分割线显示',
  384 + name: 'isShowSplitLineY',
  385 + require: false,
  386 + placeholder: '',
  387 + value: true,
  388 + }, {
  389 + type: 'vue-color',
  390 + label: '分割线颜色',
  391 + name: 'splitLineColorY',
  392 + required: false,
  393 + placeholder: '',
  394 + value: '#c9c9c9',
  395 + }
  396 + ],
  397 + },
  398 + {
  399 + name: '数值设定',
  400 + list: [
  401 + {
  402 + type: 'el-switch',
  403 + label: '显示',
  404 + name: 'isShow',
  405 + required: false,
  406 + placeholder: '',
  407 + value: false
  408 + },
  409 + {
  410 + type: 'el-input-number',
  411 + label: '字体大小',
  412 + name: 'fontSize',
  413 + required: false,
  414 + placeholder: '',
  415 + value: 14
  416 + },
  417 + {
  418 + type: 'vue-color',
  419 + label: '字体颜色',
  420 + name: 'subTextColor',
  421 + required: false,
  422 + placeholder: '',
  423 + value: '#fff'
  424 + },
  425 + {
  426 + type: 'el-select',
  427 + label: '字体粗细',
  428 + name: 'fontWeight',
  429 + required: false,
  430 + placeholder: '',
  431 + selectOptions: [
  432 + {code: 'normal', name: '正常'},
  433 + {code: 'bold', name: '粗体'},
  434 + {code: 'bolder', name: '特粗体'},
  435 + {code: 'lighter', name: '细体'}
  436 + ],
  437 + value: 'normal'
  438 + },
  439 + ],
  440 + },
  441 + {
  442 + name: '提示语设置',
  443 + list: [
  444 + {
  445 + type: 'el-input-number',
  446 + label: '字体大小',
  447 + name: 'tipsFontSize',
  448 + required: false,
  449 + placeholder: '',
  450 + value: 16
  451 + },
  452 + {
  453 + type: 'vue-color',
  454 + label: '字体颜色',
  455 + name: 'lineColor',
  456 + required: false,
  457 + placeholder: '',
  458 + },
  459 + ],
  460 + },
  461 + {
  462 + name: '坐标轴边距设置',
  463 + list: [
  464 + {
  465 + type: 'el-slider',
  466 + label: '左边距(像素)',
  467 + name: 'marginLeft',
  468 + required: false,
  469 + placeholder: '',
  470 + value: 10,
  471 + }, {
  472 + type: 'el-slider',
  473 + label: '顶边距(像素)',
  474 + name: 'marginTop',
  475 + required: false,
  476 + placeholder: '',
  477 + value: 50,
  478 + }, {
  479 + type: 'el-slider',
  480 + label: '右边距(像素)',
  481 + name: 'marginRight',
  482 + required: false,
  483 + placeholder: '',
  484 + value: 40,
  485 + }, {
  486 + type: 'el-slider',
  487 + label: '底边距(像素)',
  488 + name: 'marginBottom',
  489 + required: false,
  490 + placeholder: '',
  491 + value: 10,
  492 + },
  493 + ],
  494 + },
  495 + {
  496 + name: '图例操作',
  497 + list: [
  498 + {
  499 + type: 'el-switch',
  500 + label: '显示',
  501 + name: 'isShowLegend',
  502 + required: false,
  503 + placeholder: '',
  504 + value: false,
  505 + },
  506 + {
  507 + type: 'vue-color',
  508 + label: '字体颜色',
  509 + name: 'lengedColor',
  510 + required: false,
  511 + placeholder: '',
  512 + value: '#fff',
  513 + },
  514 + {
  515 + type: 'el-input-number',
  516 + label: '字体大小',
  517 + name: 'lengedFontSize',
  518 + required: false,
  519 + placeholder: '',
  520 + value: 16,
  521 + },
  522 + {
  523 + type: 'el-input-number',
  524 + label: '图例宽度',
  525 + name: 'lengedWidth',
  526 + required: false,
  527 + placeholder: '',
  528 + value: 15,
  529 + },
  530 + {
  531 + type: 'el-select',
  532 + label: '横向位置',
  533 + name: 'lateralPosition',
  534 + required: false,
  535 + placeholder: '',
  536 + selectOptions: [
  537 + {code: 'center', name: '居中'},
  538 + {code: 'left', name: '左对齐'},
  539 + {code: 'right', name: '右对齐'},
  540 + ],
  541 + value: 'center'
  542 + },
  543 + {
  544 + type: 'el-select',
  545 + label: '纵向位置',
  546 + name: 'longitudinalPosition',
  547 + required: false,
  548 + placeholder: '',
  549 + selectOptions: [
  550 + {code: 'top', name: '顶部'},
  551 + {code: 'bottom', name: '底部'},
  552 + ],
  553 + value: 'top'
  554 + },
  555 + {
  556 + type: 'el-select',
  557 + label: '布局前置',
  558 + name: 'layoutFront',
  559 + required: false,
  560 + placeholder: '',
  561 + selectOptions: [
  562 + {code: 'vertical', name: '竖排'},
  563 + {code: 'horizontal', name: '横排'},
  564 + ],
  565 + value: 'horizontal'
  566 + },
  567 + ],
  568 + },
  569 + {
  570 + name: '自定义配色',
  571 + list: [
  572 + {
  573 + type: 'customColor',
  574 + label: '',
  575 + name: 'customColor',
  576 + required: false,
  577 + value: [{color: '#87cefa'}, {color: '#ff7f50'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
  578 + },
  579 + ],
  580 + },
  581 + ],
  582 + ],
  583 + // 数据
  584 + data: [
  585 + {
  586 + type: 'el-radio-group',
  587 + label: '数据类型',
  588 + name: 'dataType',
  589 + require: false,
  590 + placeholder: '',
  591 + selectValue: true,
  592 + selectOptions: [
  593 + {
  594 + code: 'staticData',
  595 + name: '静态数据',
  596 + },
  597 + {
  598 + code: 'dynamicData',
  599 + name: '动态数据',
  600 + },
  601 + ],
  602 + value: 'staticData',
  603 + },
  604 + {
  605 + type: 'el-input-number',
  606 + label: '刷新时间(毫秒)',
  607 + name: 'refreshTime',
  608 + relactiveDom: 'dataType',
  609 + relactiveDomValue: 'dynamicData',
  610 + value: 5000
  611 + },
  612 + {
  613 + type: 'el-button',
  614 + label: '静态数据',
  615 + name: 'staticData',
  616 + required: false,
  617 + placeholder: '',
  618 + relactiveDom: 'dataType',
  619 + relactiveDomValue: 'staticData',
  620 + value: [
  621 + {"axis":"2021-07-25","name":"A","data":"12"},
  622 + {"axis":"2021-07-25","name":"B","data":"20"},
  623 + {"axis":"2021-07-26","name":"B","data":"5"},
  624 + {"axis":"2021-07-27","name":"A","data":"15"},
  625 + {"axis":"2021-07-27","name":"B","data":"30"},
  626 + ],
  627 + },
  628 + {
  629 + type: 'dycustComponents',
  630 + label: '',
  631 + name: 'dynamicData',
  632 + required: false,
  633 + placeholder: '',
  634 + relactiveDom: 'dataType',
  635 + relactiveDomValue: 'dynamicData',
  636 + chartType: 'monitor-stackchart',
  637 + dictKey: 'STACK_PROPERTIES',
  638 + value: '',
  639 + },
  640 + ],
  641 + // 坐标
  642 + position: [
  643 + {
  644 + type: 'el-input-number',
  645 + label: '左边距',
  646 + name: 'left',
  647 + required: false,
  648 + placeholder: '',
  649 + value: 0,
  650 + },
  651 + {
  652 + type: 'el-input-number',
  653 + label: '上边距',
  654 + name: 'top',
  655 + required: false,
  656 + placeholder: '',
  657 + value: 0,
  658 + },
  659 + {
  660 + type: 'el-input-number',
  661 + label: '宽度',
  662 + name: 'width',
  663 + required: false,
  664 + placeholder: '该容器在1920px大屏中的宽度',
  665 + value: 400,
  666 + },
  667 + {
  668 + type: 'el-input-number',
  669 + label: '高度',
  670 + name: 'height',
  671 + required: false,
  672 + placeholder: '该容器在1080px大屏中的高度',
  673 + value: 200,
  674 + },
  675 + ],
  676 + }
  677 +}
@@ -31,6 +31,42 @@ export const monitorDetailTable = { @@ -31,6 +31,42 @@ export const monitorDetailTable = {
31 }, 31 },
32 { 32 {
33 type: 'el-select', 33 type: 'el-select',
  34 + label: 'kpiId',
  35 + name: 'kpiId',
  36 + required: false,
  37 + placeholder: '',
  38 + selectOptions: [
  39 + {code: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA', name: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA(文件系统)'},
  40 + {code: 'KPI7AC1664E,KPI9C988E1F,KPI12994CF8,KPI15CCF495,KPIA339DF94,KPI77C28BBA', name: 'KPI7AC1664E,KPI9C988E1F,KPI12994CF8,KPI15CCF495,KPIA339DF94,KPI77C28BBA(INODE信息)'},
  41 + {code: 'KPIFABFD741,KPIA0A69A33,KPID339D51B,KPI02062F43', name: 'KPIFABFD741,KPIA0A69A33,KPID339D51B,KPI02062F43(网卡信息)'},
  42 + {code: 'KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0', name: 'KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0(磁盘信息)'},
  43 + ],
  44 + value: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA',
  45 + },
  46 + {
  47 + type: 'el-select',
  48 + label: 'flag',
  49 + name: 'flag',
  50 + required: false,
  51 + placeholder: '',
  52 + selectOptions: [
  53 + {code: 'fs', name: 'fs(文件系统)'},
  54 + {code: 'inode', name: 'inode(INODE信息)'},
  55 + {code: 'net', name: 'net(网卡信息)'},
  56 + {code: 'disk', name: 'disk(磁盘信息)'},
  57 + ],
  58 + value: 'fs'
  59 + },
  60 + {
  61 + type: 'el-switch',
  62 + label: '告警表格',
  63 + name: 'isAlarm',
  64 + required: false,
  65 + placeholder: '',
  66 + value: false
  67 + },
  68 + {
  69 + type: 'el-select',
34 label: '字体位置', 70 label: '字体位置',
35 name: 'textAlign', 71 name: 'textAlign',
36 required: false, 72 required: false,
@@ -141,6 +177,14 @@ export const monitorDetailTable = { @@ -141,6 +177,14 @@ export const monitorDetailTable = {
141 list:[ 177 list:[
142 { 178 {
143 type: 'el-switch', 179 type: 'el-switch',
  180 + label: '是否有下探',
  181 + name: 'probeDown',
  182 + required: false,
  183 + placeholder: '',
  184 + value: true,
  185 + },
  186 + {
  187 + type: 'el-switch',
144 label: '告警设置', 188 label: '告警设置',
145 name: 'alarm_setting', 189 name: 'alarm_setting',
146 required: false, 190 required: false,
@@ -404,6 +448,7 @@ export const monitorDetailTable = { @@ -404,6 +448,7 @@ export const monitorDetailTable = {
404 {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1}, 448 {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1},
405 {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1}, 449 {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1},
406 {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1}, 450 {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1},
  451 + {name: '最近采集时间', key: 'KPIF74D9D2B', width: '50%',isStatic:true,columnSort:5,componentName:1},
407 ] 452 ]
408 } 453 }
409 ], 454 ],
@@ -41,6 +41,7 @@ import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor- @@ -41,6 +41,7 @@ import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-
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 import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
43 import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-chart"; 43 import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-chart";
  44 +import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-stack";
44 45
45 46
46 export const {widgetTool,monitor} = { 47 export const {widgetTool,monitor} = {
@@ -80,6 +81,7 @@ export const {widgetTool,monitor} = { @@ -80,6 +81,7 @@ export const {widgetTool,monitor} = {
80 monitorDetailTable, 81 monitorDetailTable,
81 monitorBgBorder, 82 monitorBgBorder,
82 monitorGaugeRate, 83 monitorGaugeRate,
83 - monitorCustomLineChart 84 + monitorCustomLineChart,
  85 + monitorCustomBarStack
84 ] 86 ]
85 } 87 }
  1 +<template>
  2 + <div :style="styleObj">
  3 + <v-chart :options="options" autoresize/>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "customBarStack",
  10 + components: {},
  11 + props: {
  12 + value: Object,
  13 + ispreview: Boolean
  14 + },
  15 + data() {
  16 + return {
  17 + echartData:'',//动态数据
  18 + options: {
  19 + grid: {},
  20 + legend: {
  21 + textStyle: {
  22 + color: "#fff"
  23 + }
  24 + },
  25 + xAxis: {
  26 + type: "category",
  27 + data: [],
  28 + axisLabel: {
  29 + show: true,
  30 + textStyle: {
  31 + color: "#fff"
  32 + }
  33 + }
  34 + },
  35 + yAxis: {
  36 + type: "value",
  37 + data: [],
  38 + axisLabel: {
  39 + show: true,
  40 + textStyle: {
  41 + color: "#fff"
  42 + }
  43 + }
  44 + },
  45 + series: [
  46 + {
  47 + data: [],
  48 + name: '',
  49 + type: "bar",
  50 + barGap: "0%",
  51 + itemStyle: {
  52 + barBorderRadius: null
  53 + }
  54 + }
  55 + ]
  56 + },
  57 + optionsStyle: {}, // 样式
  58 + optionsData: {}, // 数据
  59 + optionsSetup: {},
  60 + flagInter: null
  61 + };
  62 + },
  63 + computed: {
  64 + styleObj() {
  65 + return {
  66 + position: this.ispreview ? "absolute" : "static",
  67 + width: this.optionsStyle.width + "px",
  68 + height: this.optionsStyle.height + "px",
  69 + left: this.optionsStyle.left + "px",
  70 + top: this.optionsStyle.top + "px",
  71 + background: this.optionsSetup.background
  72 + };
  73 + }
  74 + },
  75 + watch: {
  76 + value: {
  77 + handler(val) {
  78 + this.optionsStyle = val.position;
  79 + this.optionsData = val.data;
  80 + this.optionsCollapse = val.setup;
  81 + this.optionsSetup = val.setup;
  82 + this.editorOptions();
  83 + },
  84 + deep: true
  85 + }
  86 + },
  87 + mounted() {
  88 + this.optionsStyle = this.value.position;
  89 + this.optionsData = this.value.data;
  90 + this.optionsCollapse = this.value.setup;
  91 + this.optionsSetup = this.value.setup;
  92 + this.editorOptions();
  93 + },
  94 + methods: {
  95 + // 修改图标options属性
  96 + editorOptions() {
  97 + this.setOptionsTitle();
  98 + this.setOptionsX();
  99 + this.setOptionsY();
  100 + this.setOptionsTooltip();
  101 + this.setOptionsMargin();
  102 + this.setOptionsLegend();
  103 + this.setOptionsData();
  104 + },
  105 + // 标题修改
  106 + setOptionsTitle() {
  107 + const optionsSetup = this.optionsSetup;
  108 + const title = {};
  109 + title.text = optionsSetup.titleText;
  110 + title.show = optionsSetup.isNoTitle;
  111 + title.left = optionsSetup.textAlign;
  112 + title.textStyle = {
  113 + color: optionsSetup.textColor,
  114 + fontSize: optionsSetup.textFontSize,
  115 + fontWeight: optionsSetup.textFontWeight
  116 + };
  117 + title.subtext = optionsSetup.subText;
  118 + title.subtextStyle = {
  119 + color: optionsSetup.subTextColor,
  120 + fontWeight: optionsSetup.subTextFontWeight,
  121 + fontSize: optionsSetup.subTextFontSize
  122 + };
  123 + title.top='8px';
  124 + title.left='8px';
  125 + this.options.title = title;
  126 + },
  127 + // X轴设置
  128 + setOptionsX() {
  129 + const optionsSetup = this.optionsSetup;
  130 + const xAxis = {
  131 + type: "category",
  132 + show: optionsSetup.hideX, // 坐标轴是否显示
  133 + name: optionsSetup.xName, // 坐标轴名称
  134 + nameTextStyle: {
  135 + color: optionsSetup.xNameColor,
  136 + fontSize: optionsSetup.xNameFontSize
  137 + },
  138 + nameRotate: optionsSetup.textAngleX, // 文字角度
  139 + inverse: optionsSetup.reversalX, // 轴反转
  140 + axisLabel: {
  141 + show: true,
  142 + interval: optionsSetup.textInterval, // 文字角度
  143 + rotate: optionsSetup.textAngle, // 文字角度
  144 + textStyle: {
  145 + color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  146 + fontSize: optionsSetup.fontSizeX
  147 + },
  148 + formatter: function (params) {
  149 + let newParamsName = "";
  150 + let paramsNameNumber = params.length;
  151 + let provideNumber = 6;
  152 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
  153 + if (paramsNameNumber > provideNumber) {
  154 + for (let p = 0; p < rowNumber; p++) {
  155 + let tempStr = "";
  156 + let start = p * provideNumber;
  157 + let end = start + provideNumber;
  158 + if (p == rowNumber - 1) {
  159 + tempStr = params.substring(start, paramsNameNumber);
  160 + } else {
  161 + tempStr = params.substring(start, end) + "\n";
  162 + }
  163 + newParamsName += tempStr;
  164 + }
  165 +
  166 + } else {
  167 + newParamsName = params;
  168 + }
  169 + return newParamsName
  170 + }
  171 + },
  172 + axisLine: {
  173 + show: true,
  174 + lineStyle: {
  175 + color: optionsSetup.lineColorX
  176 + }
  177 + },
  178 + splitLine: {
  179 + show: optionsSetup.isShowSplitLineX,
  180 + lineStyle: {
  181 + color: optionsSetup.splitLineColorX
  182 + }
  183 + },
  184 + boundaryGap: ['10%', '10%'],
  185 + splitArea: {
  186 + show: optionsSetup.splitArea,
  187 + areaStyle: {
  188 + color: [optionsSetup.splitAreaColor, 'transparent'
  189 + ]
  190 + }
  191 + }
  192 + };
  193 + this.options.xAxis = xAxis;
  194 + },
  195 + // Y轴设置
  196 + setOptionsY() {
  197 + const optionsSetup = this.optionsSetup;
  198 + const yAxis = {
  199 + type: "value",
  200 + show: optionsSetup.isShowY, // 坐标轴是否显示
  201 + name: optionsSetup.textNameY, // 坐标轴名称
  202 + nameTextStyle: {
  203 + color: optionsSetup.NameColorY,
  204 + fontSize: optionsSetup.NameFontSizeY
  205 + },
  206 + inverse: optionsSetup.reversalY, // y轴反转
  207 + axisLabel: {
  208 + show: true,
  209 + rotate: optionsSetup.textAngleY,// 文字角度
  210 + textStyle: {
  211 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  212 + fontSize: optionsSetup.fontSizeY
  213 + }
  214 + },
  215 + axisLine: {
  216 + show: true,
  217 + lineStyle: {
  218 + color: optionsSetup.lineColorY
  219 + }
  220 + },
  221 + splitLine: {
  222 + show: optionsSetup.isShowSplitLineY,
  223 + lineStyle: {
  224 + color: optionsSetup.splitLineColorY
  225 + }
  226 + }
  227 + };
  228 + this.options.yAxis = yAxis;
  229 + },
  230 + // tooltip 提示语设置，鼠标放置显示
  231 + setOptionsTooltip() {
  232 + const optionsSetup = this.optionsSetup;
  233 + let that=this;
  234 + let kpiList = optionsSetup.kpiId.split(',');
  235 + const tooltip = {
  236 + trigger: "axis",
  237 + show: true,
  238 + textStyle: {
  239 + color: optionsSetup.lineColor,
  240 + fontSize: optionsSetup.tipsFontSize
  241 + },
  242 + formatter: function (param) {
  243 + let tips = '<div style="text-align: left;margin-left:10px;">'+param[0].name + "</div>";
  244 + $.each(param, function (i, v) {
  245 + tips += '<div style="text-align: left;margin-left:5px;">'+v.marker + " ";
  246 + var kpiUnit = '';
  247 + if (that.echartData.kpiMap[kpiList[v.seriesIndex]]) {
  248 + kpiUnit = that.echartData.kpiMap[kpiList[v.seriesIndex]].kpiUnit;
  249 + }
  250 + tips += (v.seriesName && v.seriesName != '1') ? (" " + v.seriesName) : '';
  251 + tips += " : " + v.value + " " + kpiUnit + "</div>";
  252 + });
  253 + return tips;
  254 + }
  255 + };
  256 + this.options.tooltip = tooltip;
  257 + },
  258 + // 边距设置
  259 + setOptionsMargin() {
  260 + const optionsSetup = this.optionsSetup;
  261 + const grid = {
  262 + left: optionsSetup.marginLeft,
  263 + right: optionsSetup.marginRight,
  264 + bottom: optionsSetup.marginBottom,
  265 + top: optionsSetup.marginTop,
  266 + containLabel: true
  267 + };
  268 + this.options.grid = grid;
  269 + },
  270 + // 图例操作 legend
  271 + setOptionsLegend() {
  272 + const optionsSetup = this.optionsSetup;
  273 + const legend = this.options.legend;
  274 + legend.show = optionsSetup.isShowLegend;
  275 + legend.left = optionsSetup.lateralPosition;
  276 + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
  277 + legend.bottom =
  278 + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  279 + legend.orient = optionsSetup.layoutFront;
  280 + legend.textStyle = {
  281 + color: optionsSetup.lengedColor,
  282 + fontSize: optionsSetup.lengedFontSize
  283 + };
  284 + legend.itemWidth = optionsSetup.lengedWidth;
  285 + },
  286 + // 数据解析
  287 + setOptionsData() {
  288 + const optionsSetup = this.optionsSetup;
  289 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  290 + optionsData.dataType == "staticData"
  291 + ? this.staticDataFn(optionsData.staticData, optionsSetup)
  292 + : this.dynamicDataFn(
  293 + optionsData.dynamicData,
  294 + optionsData.refreshTime,
  295 + optionsSetup
  296 + );
  297 + },
  298 + //去重
  299 + setUnique(arr) {
  300 + let newArr = [];
  301 + arr.forEach(item => {
  302 + return newArr.includes(item) ? '' : newArr.push(item);
  303 + });
  304 + return newArr;
  305 + },
  306 + //获取堆叠样式
  307 + getStackStyle() {
  308 + const optionsSetup = this.optionsSetup;
  309 + let style = ""
  310 + if (optionsSetup.stackStyle == "upDown") {
  311 + style = "total"
  312 + }
  313 + return style
  314 + },
  315 + //静态数据
  316 + staticDataFn(val) {
  317 + const optionsSetup = this.optionsSetup;
  318 + //颜色
  319 + const customColor = optionsSetup.customColor;
  320 + const arrColor = [];
  321 + for (let i = 0; i < customColor.length; i++) {
  322 + arrColor.push(customColor[i].color);
  323 + }
  324 + //数据
  325 + const series = [];
  326 + let xAxisList = []
  327 + let yAxisList = []
  328 + for (const i in val) {
  329 + xAxisList[i] = val[i].axis
  330 + yAxisList[i] = val[i].name
  331 + }
  332 + xAxisList = this.setUnique(xAxisList) // x轴 0725 0726 0727
  333 + yAxisList = this.setUnique(yAxisList) // y轴 A B C
  334 + for (const i in yAxisList) {
  335 + const data = new Array(yAxisList.length).fill(0)
  336 + for (const j in xAxisList) {
  337 + for (const k in val) {
  338 + if (val[k].name == yAxisList[i]) { // a = a
  339 + if (val[k].axis == xAxisList[j]) { // 0725
  340 + data[j] = val[k].data
  341 + }
  342 + }
  343 + }
  344 + }
  345 + series.push({
  346 + name: yAxisList[i],
  347 + type: "bar",
  348 + data: data,
  349 + barGap: "0%",
  350 + stack: this.getStackStyle(),
  351 + barWidth: optionsSetup.maxWidth,
  352 + label: {
  353 + show: optionsSetup.isShow,
  354 + position: "top",
  355 + distance: 10,
  356 + fontSize: optionsSetup.fontSize,
  357 + color: optionsSetup.subTextColor,
  358 + fontWeight: optionsSetup.fontWeight
  359 + },
  360 + //颜色，圆角属性
  361 + itemStyle: {
  362 + normal: {
  363 + color: arrColor[i],
  364 + barBorderRadius: optionsSetup.radius,
  365 + }
  366 + }
  367 + })
  368 + }
  369 + this.options.series = series
  370 + if (optionsSetup.verticalShow) {
  371 + this.options.xAxis.data = [];
  372 + this.options.yAxis.data = xAxisList;
  373 + this.options.xAxis.type = "value";
  374 + this.options.yAxis.type = "category";
  375 + } else {
  376 + this.options.xAxis.data = xAxisList;
  377 + this.options.yAxis.data = [];
  378 + this.options.xAxis.type = "category";
  379 + this.options.yAxis.type = "value";
  380 + }
  381 + },
  382 + // 动态数据
  383 + dynamicDataFn(val, refreshTime, optionsSetup) {
  384 + if (!val) return;
  385 + if (this.ispreview) {
  386 + this.getEchartData(val, optionsSetup);
  387 + this.flagInter = setInterval(() => {
  388 + this.getEchartData(val, optionsSetup);
  389 + }, refreshTime);
  390 + } else {
  391 + this.getEchartData(val, optionsSetup);
  392 + }
  393 + },
  394 + getEchartData(val, optionsSetup) {
  395 + const data = this.queryEchartsData(val);
  396 + data.then(res => {
  397 + this.echartData=res;
  398 + this.renderingFn(optionsSetup, res);
  399 + });
  400 + },
  401 + renderingFn(optionsSetup, val) {
  402 + //颜色
  403 + const customColor = optionsSetup.customColor;
  404 + const arrColor = [];
  405 + for (let i = 0; i < customColor.length; i++) {
  406 + arrColor.push(customColor[i].color);
  407 + }
  408 + // x轴
  409 + if (optionsSetup.verticalShow) {
  410 + this.options.xAxis.data = [];
  411 + this.options.yAxis.data = val.xAxis;
  412 + this.options.xAxis.type = "value";
  413 + this.options.yAxis.type = "category";
  414 + } else {
  415 + this.options.xAxis.data = val.xAxis;
  416 + this.options.yAxis.data = [];
  417 + this.options.xAxis.type = "category";
  418 + this.options.yAxis.type = "value";
  419 + }
  420 + const series = [];
  421 + for (const i in val.series) {
  422 + if (val.series[i].type == "bar") {
  423 + series.push({
  424 + name: val.series[i].name,
  425 + type: "bar",
  426 + data: val.series[i].data,
  427 + barGap: "0%",
  428 + stack: this.getStackStyle(),
  429 + barWidth: optionsSetup.maxWidth,
  430 + label: {
  431 + show: optionsSetup.isShow,
  432 + position: "top",
  433 + distance: 10,
  434 + fontSize: optionsSetup.fontSize,
  435 + color: optionsSetup.subTextColor,
  436 + fontWeight: optionsSetup.fontWeight
  437 + },
  438 + //颜色，圆角属性
  439 + itemStyle: {
  440 + normal: {
  441 + color: arrColor[i],
  442 + barBorderRadius: optionsSetup.radius,
  443 + }
  444 + }
  445 + })
  446 + }
  447 + }
  448 + this.options.series = series
  449 + }
  450 + }
  451 +};
  452 +</script>
  453 +
  454 +<style scoped lang="scss">
  455 +.echarts {
  456 + width: 100%;
  457 + height: 100%;
  458 + overflow: hidden;
  459 +}
  460 +
  461 +</style>
@@ -269,7 +269,6 @@ export default { @@ -269,7 +269,6 @@ export default {
269 fontSize: optionsSetup.fontSize 269 fontSize: optionsSetup.fontSize
270 }, 270 },
271 formatter:function (param) { 271 formatter:function (param) {
272 - console.log("param",param,param.length)  
273 let kpiName=optionsSetup.titleText; 272 let kpiName=optionsSetup.titleText;
274 let kpiUnit=''; 273 let kpiUnit='';
275 // 鼠标悬浮线上提示 274 // 鼠标悬浮线上提示
@@ -357,7 +356,6 @@ export default { @@ -357,7 +356,6 @@ export default {
357 axis[i] = val[i].axis; 356 axis[i] = val[i].axis;
358 data[i] = val[i].data 357 data[i] = val[i].data
359 } 358 }
360 - console.log("abc",axis,data)  
361 // x轴 359 // x轴
362 this.options.xAxis.data = axis; 360 this.options.xAxis.data = axis;
363 // series 361 // series
@@ -2,8 +2,8 @@ @@ -2,8 +2,8 @@
2 <div :style="styleObj" @mouseleave.stop="closePressingDialog" ref="detailTable"> 2 <div :style="styleObj" @mouseleave.stop="closePressingDialog" ref="detailTable">
3 <div class="detail-table-title title-flex-between"> 3 <div class="detail-table-title title-flex-between">
4 <div class="title-left">{{tableStyle.tableName}}</div> 4 <div class="title-left">{{tableStyle.tableName}}</div>
5 - <div class="title-right">  
6 - <span class="title-link" @click="handlerDetailDataNoPage()">更多</span> 5 + <div class="title-right" v-if="!getUrlToken.isAlarm">
  6 + <span class="title-link" @click="handlerDetailDataNoPage">更多</span>
7 <span class="title-link" @click="downloadTableList">下载</span> 7 <span class="title-link" @click="downloadTableList">下载</span>
8 </div> 8 </div>
9 </div> 9 </div>
@@ -23,6 +23,8 @@ @@ -23,6 +23,8 @@
23 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i> 23 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
24 </span> 24 </span>
25 </div> 25 </div>
  26 + <div v-if="getUrlToken.isAlarm" class="padding-10" :style="[headerTableStlye,tableRowHeight(),handleStyle]">操作</div>
  27 +
26 </div> 28 </div>
27 <!--数据--> 29 <!--数据-->
28 <div class="bd"> 30 <div class="bd">
@@ -39,16 +41,21 @@ @@ -39,16 +41,21 @@
39 > 41 >
40 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" > 42 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" >
41 <template #content> 43 <template #content>
42 - <span>{{ item[itemChild.key].kpiValue}}</span> 44 + <span v-if="!getUrlToken.isAlarm">{{ item[itemChild.key].kpiValue}}</span>
  45 + <span v-if="getUrlToken.isAlarm">{{ item[itemChild.key][itemChild.key]}}</span>
43 </template> 46 </template>
44 - <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)" 47 + <span v-if="!getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
45 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 48 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
46 {{ item[itemChild.key].kpiValue}} 49 {{ item[itemChild.key].kpiValue}}
47 </span> 50 </span>
  51 + <span v-if="getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key][itemChild.key])"
  52 + :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] &&itemChild.key=='kpiName' && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  53 + {{ item[itemChild.key][itemChild.key]}}
  54 + </span>
48 </el-tooltip> 55 </el-tooltip>
49 <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'" /> 56 <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'" />
50 57
51 - <customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)" 58 + <customMenuBox ref="customMenu" v-if="tableStyle.probeDown && pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
52 :detailMenubox="calcDetailMenubox" 59 :detailMenubox="calcDetailMenubox"
53 :tableDataValue="item[itemChild.key]" :flg="''" 60 :tableDataValue="item[itemChild.key]" :flg="''"
54 :tableDataValueHead="itemChild" 61 :tableDataValueHead="itemChild"
@@ -57,6 +64,8 @@ @@ -57,6 +64,8 @@
57 :resType="resType" 64 :resType="resType"
58 ></customMenuBox> 65 ></customMenuBox>
59 </div> 66 </div>
  67 + <div @click="clearAlarm(item)" v-if="getUrlToken.isAlarm" :class="['infoList-flex','padding-10',{'listName-link':getUrlToken.isAlarm}]" :style="[handleStyle]">
  68 + 告警消除</div>
60 </li> 69 </li>
61 </ul> 70 </ul>
62 </div> 71 </div>
@@ -98,23 +107,21 @@ @@ -98,23 +107,21 @@
98 > 107 >
99 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]" ref="elTooltip" trigger="hover" > 108 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]" ref="elTooltip" trigger="hover" >
100 <template #content> 109 <template #content>
101 - <span>{{ item[itemChild.key].kpiValue}}</span> 110 + <span v-if="!getUrlToken.isAlarm">{{ item[itemChild.key].kpiValue}}</span>
  111 + <span v-if="getUrlToken.isAlarm">{{ item[itemChild.key][itemChild.key]}}</span>
102 </template> 112 </template>
103 - <span @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)" 113 + <span v-if="!getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
104 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 114 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
105 {{ item[itemChild.key].kpiValue}} 115 {{ item[itemChild.key].kpiValue}}
106 </span> 116 </span>
  117 + <span v-if="getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key][itemChild.key])"
  118 + :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  119 + {{ item[itemChild.key][itemChild.key]}}
  120 + </span>
107 </el-tooltip> 121 </el-tooltip>
108 <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'" /> 122 <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'" />
109 123
110 -  
111 -  
112 -  
113 -  
114 -<!-- <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"  
115 - :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">  
116 - {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>-->  
117 - <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)" 124 + <customMenuBox v-if="tableStyle.probeDown && pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
118 :detailMenubox="calcDetailMenubox" 125 :detailMenubox="calcDetailMenubox"
119 :tableDataValue="item[itemChild.key]" :flg="''" 126 :tableDataValue="item[itemChild.key]" :flg="''"
120 :tableDataValueHead="itemChild" 127 :tableDataValueHead="itemChild"
@@ -144,7 +151,8 @@ @@ -144,7 +151,8 @@
144 </template> 151 </template>
145 </customDialog> 152 </customDialog>
146 <!-- 直接点击表格数据展示 性能趋势弹框--> 153 <!-- 直接点击表格数据展示 性能趋势弹框-->
147 - <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="dialogName" 154 + <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
  155 + :widthStyle="widthStyle" :title-name="dialogName"
148 :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc" 156 :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
149 > 157 >
150 <template v-slot> 158 <template v-slot>
@@ -153,6 +161,30 @@ @@ -153,6 +161,30 @@
153 </div> 161 </div>
154 </template> 162 </template>
155 </customDialog> 163 </customDialog>
  164 +<!-- 告警消除弹框-->
  165 + <customDialog :dialogVisible="alarmTableVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" widthStyle="width:360px;height:275px;min-height:275px;max-height:275px;overflow:hidden;"
  166 + title-name="告警消除" :showFooter="true" :showCancelBtn="true" :showOkBtn="true"
  167 + @hideDialog="hideDialogTableAlarm" @okFunc="okFuncTableAlarm"
  168 + >
  169 + <template v-slot>
  170 + <div class="alarmClear">
  171 + <el-input
  172 + v-model="reason"
  173 + :rows="4"
  174 + type="textarea"
  175 + placeholder="消除意见（必填）"
  176 + />
  177 + </div>
  178 + <div class="alarmRadio">
  179 + <span class="radioLabel">是否通知：</span>
  180 + <el-radio-group v-model="noticeFlag">
  181 + <el-radio :label="1">是</el-radio>
  182 + <el-radio :label="0">否</el-radio>
  183 + </el-radio-group>
  184 + </div>
  185 +
  186 + </template>
  187 + </customDialog>
156 188
157 </div> 189 </div>
158 </template> 190 </template>
@@ -163,7 +195,10 @@ import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} @@ -163,7 +195,10 @@ import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl}
163 import customDialog from "../../designerComponents/customDialog"; 195 import customDialog from "../../designerComponents/customDialog";
164 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件 196 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
165 import textToImage from "../../designerComponents/textToImage";//文字转图片 197 import textToImage from "../../designerComponents/textToImage";//文字转图片
166 -import textToBg from "../../designerComponents/textToBg";//文字转背景 198 +import textToBg from "../../designerComponents/textToBg";
  199 +import {saveClearAalarm} from "../../../../../../api/platform";
  200 +import {Message} from "element-ui";
  201 +//文字转背景
167 202
168 vue.use(VueSuperSlide); 203 vue.use(VueSuperSlide);
169 export default { 204 export default {
@@ -176,6 +211,9 @@ export default { @@ -176,6 +211,9 @@ export default {
176 }, 211 },
177 data() { 212 data() {
178 return { 213 return {
  214 + alarmId:'',//消除告警的id
  215 + noticeFlag:0,//是否通知
  216 + reason:'',//消除意见
179 currentPage:1, 217 currentPage:1,
180 pageSize:10, 218 pageSize:10,
181 pageSizes:[10,50,100, 200, 300, 400], 219 pageSizes:[10,50,100, 200, 300, 400],
@@ -183,6 +221,7 @@ export default { @@ -183,6 +221,7 @@ export default {
183 trendVisible:false,//性能趋势弹框 221 trendVisible:false,//性能趋势弹框
184 headerAll:[], 222 headerAll:[],
185 listAll:[], 223 listAll:[],
  224 + alarmTableVisible:false,//告警消除弹框
186 tableVisible:false,//更多表格弹框 225 tableVisible:false,//更多表格弹框
187 dialogVisible:false,//表格下探后的弹框 226 dialogVisible:false,//表格下探后的弹框
188 popoverVisible:false,//下探弹框 227 popoverVisible:false,//下探弹框
@@ -275,10 +314,20 @@ export default { @@ -275,10 +314,20 @@ export default {
275 314
276 } 315 }
277 }, 316 },
  317 + handleStyle(){
  318 + const bodyStyle = this.optionsSetUp;
  319 + return{
  320 + width:'30%',
  321 + "border-left":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none',
  322 + "border-bottom":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none'
  323 + }
  324 +
  325 + },
278 tableStyle(){ 326 tableStyle(){
279 const tableStyleSetup=this.optionsSetUp; 327 const tableStyleSetup=this.optionsSetUp;
280 return{ 328 return{
281 - tableName:tableStyleSetup.tableName 329 + tableName:tableStyleSetup.tableName,
  330 + probeDown:tableStyleSetup.probeDown
282 } 331 }
283 }, 332 },
284 //表格下探列表 333 //表格下探列表
@@ -325,11 +374,16 @@ export default { @@ -325,11 +374,16 @@ export default {
325 }, 374 },
326 //获取url地址中的token 375 //获取url地址中的token
327 getUrlToken(){ 376 getUrlToken(){
  377 + const tableStyleSetup=this.optionsSetUp;
328 let locationUrl=this.$route.query; 378 let locationUrl=this.$route.query;
329 let resId=locationUrl.resId; 379 let resId=locationUrl.resId;
330 let token=locationUrl.access_token; 380 let token=locationUrl.access_token;
  381 + let flag=tableStyleSetup.flag;
  382 + let isAlarm=tableStyleSetup.isAlarm;
331 let urlObj={ 383 let urlObj={
332 resId:resId, 384 resId:resId,
  385 + flag:flag,
  386 + isAlarm:isAlarm,
333 token:token 387 token:token
334 } 388 }
335 return urlObj; 389 return urlObj;
@@ -459,24 +513,26 @@ export default { @@ -459,24 +513,26 @@ export default {
459 } 513 }
460 colArr.push(columnObj) 514 colArr.push(columnObj)
461 }) 515 })
462 -  
463 - content.map((cv) => {  
464 - let kpi = {};  
465 - cv.map((ccv) => {  
466 - if (ccv.kpiValue || ccv.kpiValue === 0) {  
467 - kpi[ccv.kpiId] = ccv;  
468 - } else {  
469 - kpi[ccv.kpiId] = {  
470 - kpiValue: "",  
471 - kpiUnit: "",  
472 - kpiIdent: "0",  
473 - isWarning: 0,  
474 - };  
475 - }  
476 - 516 + if(this.getUrlToken.isAlarm){
  517 + datas=content;
  518 + }else{
  519 + content.map((cv) => {
  520 + let kpi = {};
  521 + cv.map((ccv) => {
  522 + if (ccv.kpiValue || ccv.kpiValue === 0) {
  523 + kpi[ccv.kpiId] = ccv;
  524 + } else {
  525 + kpi[ccv.kpiId] = {
  526 + kpiValue: "",
  527 + kpiUnit: "",
  528 + kpiIdent: "0",
  529 + isWarning: 0,
  530 + };
  531 + }
  532 + })
  533 + datas.push(kpi);
477 }) 534 })
478 - datas.push(kpi);  
479 - }) 535 + }
480 if(flg=='all'){ 536 if(flg=='all'){
481 this.headerAll=colArr; 537 this.headerAll=colArr;
482 this.listAll=datas; 538 this.listAll=datas;
@@ -486,7 +542,7 @@ export default { @@ -486,7 +542,7 @@ export default {
486 } 542 }
487 this.tableFiledColumnSort(); 543 this.tableFiledColumnSort();
488 }, 544 },
489 - handlerDetailData(valData,sortBy){ 545 + async handlerDetailData(valData,sortBy){
490 let kpiArr=[] 546 let kpiArr=[]
491 let kpiIdStr=''; 547 let kpiIdStr='';
492 if(this.header && this.header.length>0){ 548 if(this.header && this.header.length>0){
@@ -502,33 +558,83 @@ export default { @@ -502,33 +558,83 @@ export default {
502 kpiIdStr=kpiArr.join(','); 558 kpiIdStr=kpiArr.join(',');
503 } 559 }
504 let param={ 560 let param={
505 - kpiId:kpiIdStr 561 + resId:this.getUrlToken.resId,
  562 + kpiId:kpiIdStr,
  563 + flagPrifix:this.getUrlToken.flag,
  564 + page:this.currentPage,
  565 + size:this.pageSize
506 } 566 }
507 - let sort=sortBy; 567 + let sort=this.sortBy;
508 if(sort){ 568 if(sort){
509 - param.sort=sort; 569 + param.sortBy=sort;
510 } 570 }
511 let headTable = valData; 571 let headTable = valData;
512 if(kpiIdStr){ 572 if(kpiIdStr){
513 //根据kpiId集合获取表格数据 573 //根据kpiId集合获取表格数据
514 - let tableData=getDetailTableData(param);  
515 - headTable=tableData.data[0]; 574 + let tableData='';
  575 + const { success,data } = await getDetailTableData(param,this.getUrlToken);
  576 + if (success ){
  577 + tableData=data;
  578 + }
  579 + if(tableData && tableData.length>0){
  580 + headTable=tableData[0];
  581 + }
  582 + }
  583 + if(headTable){
  584 + this.handleHeadContent(headTable)
516 } 585 }
517 -  
518 - this.handleHeadContent(headTable)  
519 -  
520 }, 586 },
521 //打开更多表格 587 //打开更多表格
522 - handlerDetailDataNoPage(){  
523 - let headTable =getDetailTableDataNoPage();  
524 - this.handleHeadContent(headTable.data[0],'all');  
525 - this.widthStyle='';  
526 - // this.setDialog('table');  
527 - this.tableVisible=true; 588 + async handlerDetailDataNoPage(){
  589 + let kpiArr=[];
  590 + let kpiIdStr='';
  591 + if(this.header && this.header.length>0){
  592 + this.header.map(item=>{
  593 + if(item.isStatic){
  594 +
  595 + }else{
  596 + if(item.key!='KPIF74D9D2B'){
  597 + kpiArr.push(item.key)
  598 + }
  599 + }
  600 + })
  601 + }
  602 + if(kpiArr && kpiArr.length>0){
  603 + kpiIdStr=kpiArr.join(',');
  604 + }
  605 + let param={
  606 + resId:this.getUrlToken.resId,
  607 + kpiId:kpiIdStr,
  608 + flagPrifix:this.getUrlToken.flag,
  609 + }
  610 + let sort=this.sortBy;
  611 + if(sort){
  612 + param.sortBy=sort;
  613 + }
  614 +
  615 + const { success,data } = await getDetailTableDataNoPage(param,this.getUrlToken);
  616 + if(success){
  617 + let headTable =data;
  618 + console.log("alalalal",data)
  619 +
  620 + this.handleHeadContent(headTable[0],'all');
  621 + this.widthStyle='';
  622 + // this.setDialog('table');
  623 + this.tableVisible=true;
  624 + }
  625 +
528 }, 626 },
529 //点击表格内容名称事件 627 //点击表格内容名称事件
530 clickListName(obj,tableDataValueHead){ 628 clickListName(obj,tableDataValueHead){
531 - if(obj.kpiIdent==1 || obj.isWarning==1){ 629 + let isIf=obj.kpiIdent==1 || obj.isWarning==1;
  630 +
  631 + if(this.getUrlToken.isAlarm){
  632 + //告警表格的判断
  633 + isIf=tableDataValueHead.key=='kpiName' && (obj.kpiIdent==1 || obj.isWarning==1);
  634 + }else{
  635 + isIf=obj.kpiIdent==1 || obj.isWarning==1;
  636 + }
  637 + if(isIf){
532 this.widthStyle=''; 638 this.widthStyle='';
533 this.pressingValue=obj; 639 this.pressingValue=obj;
534 this.dialogNameStyle(obj) 640 this.dialogNameStyle(obj)
@@ -536,6 +642,7 @@ export default { @@ -536,6 +642,7 @@ export default {
536 this.trendVisible=true; 642 this.trendVisible=true;
537 } 643 }
538 644
  645 +
539 }, 646 },
540 //设置性能趋势图 647 //设置性能趋势图
541 setTrend(tableDataValueHead){ 648 setTrend(tableDataValueHead){
@@ -580,7 +687,96 @@ export default { @@ -580,7 +687,96 @@ export default {
580 getEchartData(val) { 687 getEchartData(val) {
581 const data = this.queryEchartsData(val); 688 const data = this.queryEchartsData(val);
582 data.then(res => { 689 data.then(res => {
583 - this.list = res; 690 + if(res && res.length>0){
  691 + // this.handlerDetailData(res[0].data[0]);
  692 + if(!this.getUrlToken.isAlarm){
  693 + //普通详情表格
  694 + console.log("lllll",res[0].data[0])
  695 + this.handleHeadContent(res[0].data[0]);
  696 +
  697 + }else{
  698 + //告警表格
  699 + let tableData=res[0].data;
  700 + //alarmLevel,alarmContent,kpiName,updateTime
  701 + if(tableData && tableData.length>0){
  702 + let head=[{
  703 + id: "alarmLevel",
  704 + name: "告警级别",
  705 + unit: ""
  706 + },
  707 + {
  708 + id: "alarmContent",
  709 + name: "告警内容",
  710 + unit: ""
  711 + },
  712 + {
  713 + id: "kpiName",
  714 + name: "指标名称",
  715 + unit: ""
  716 + },
  717 + {
  718 + id: "updateTime",
  719 + name: "告警时间",
  720 + unit: ""
  721 + }
  722 + ]
  723 + let content=[];
  724 +
  725 + tableData.map(item=>{
  726 + let contentObj={};
  727 + head.map(hv=>{
  728 + contentObj[hv.id]=item;
  729 + })
  730 + content.push(contentObj)
  731 + })
  732 + let obj={
  733 + header:head,
  734 + content:content
  735 + }
  736 + this.handleHeadContent(obj);
  737 + let isNewData=false;
  738 + let addTableData=[];
  739 + let addTableDataOld=this.optionsSetUp.dynamicAddTable;
  740 + addTableDataOld.map(v=>{
  741 + head.map((item,index)=>{
  742 + if(v.key==item.key){
  743 + isNewData=false;
  744 + addTableData.push({
  745 + columnSort:v.columnSort?v.columnSort:index,
  746 + componentName:v.componentName?v.componentName:1,
  747 + isStatic:false,
  748 + key:item.id,
  749 + name:item.name,
  750 + width:v.width
  751 + })
  752 + }else{
  753 + isNewData=true;
  754 +
  755 + }
  756 +
  757 + })
  758 + })
  759 + if(isNewData){
  760 + head.map((item,index)=>{
  761 + addTableData.push({
  762 + columnSort:index,
  763 + componentName:1,
  764 + isStatic:false,
  765 + key:item.id,
  766 + name:item.name,
  767 + width:"50%"
  768 + })
  769 + })
  770 + }
  771 + console.log("addTableData",addTableData)
  772 + // this.optionsSetUp.dynamicAddTable=addTableData;
  773 + console.log("this.optionsSetUp.dynamicAddTable",this.optionsSetUp.dynamicAddTable)
  774 +
  775 + }
  776 +
  777 + }
  778 + }
  779 + // this.list = res;
584 this.hackResetFun(); 780 this.hackResetFun();
585 }); 781 });
586 }, 782 },
@@ -591,6 +787,7 @@ export default { @@ -591,6 +787,7 @@ export default {
591 this.hackReset = true; 787 this.hackReset = true;
592 }); 788 });
593 }, 789 },
  790 +
594 // 计算 奇偶背景色 791 // 计算 奇偶背景色
595 bodyTable(index) { 792 bodyTable(index) {
596 var styleJson = {}; 793 var styleJson = {};
@@ -702,6 +899,15 @@ export default { @@ -702,6 +899,15 @@ export default {
702 this.tableVisible=false; 899 this.tableVisible=false;
703 900
704 }, 901 },
  902 + //告警消除弹框关闭确定
  903 + hideDialogTableAlarm(){
  904 + this.alarmTableVisible=false;
  905 + },
  906 + okFuncTableAlarm(){
  907 + // this.alarmTableVisible=false;
  908 + this.clearAlarmHandle();
  909 +
  910 + },
705 //排序 911 //排序
706 changeSort(item,flg){ 912 changeSort(item,flg){
707 if(this.sortCaret==flg){ 913 if(this.sortCaret==flg){
@@ -792,6 +998,44 @@ export default { @@ -792,6 +998,44 @@ export default {
792 } 998 }
793 999
794 }, 1000 },
  1001 + //消除告警
  1002 + clearAlarm(obj){
  1003 + ///
  1004 + this.alarmId=obj.alarmContent.id;
  1005 + this.alarmTableVisible=true;
  1006 + },
  1007 + async clearAlarmHandle(){
  1008 + if(this.reason){
  1009 + let params={
  1010 + ids:this.alarmId,
  1011 + reason:this.reason,
  1012 + access_token: this.getUrlToken.token,
  1013 + noticeFlag:this.noticeFlag
  1014 + }
  1015 + const { success } = await saveClearAalarm(params,this.getUrlToken);
  1016 + if(success){
  1017 + Message({
  1018 + message: '告警已消除！',
  1019 + type: 'success',
  1020 + duration: 3 * 1000
  1021 + });
  1022 + }else{
  1023 + Message({
  1024 + message: '告警消除失败，请与管理员联系！',
  1025 + type: 'error',
  1026 + duration: 3 * 1000
  1027 + });
  1028 + }
  1029 + this.alarmTableVisible=false;
  1030 + }else{
  1031 + Message({
  1032 + message: '请填写消除意见',
  1033 + type: 'warning',
  1034 + duration: 3 * 1000
  1035 + });
  1036 + }
  1037 +
  1038 + }
795 1039
796 } 1040 }
797 }; 1041 };
@@ -1029,4 +1273,12 @@ export default { @@ -1029,4 +1273,12 @@ export default {
1029 .padding-10{ 1273 .padding-10{
1030 padding:5px; 1274 padding:5px;
1031 } 1275 }
  1276 +.alarmClear{
  1277 + margin:15px;
  1278 + overflow: hidden;
  1279 +}
  1280 +.alarmRadio{
  1281 + margin:20px;
  1282 + text-align: left;
  1283 +}
1032 </style> 1284 </style>
@@ -44,12 +44,6 @@ export default { @@ -44,12 +44,6 @@ export default {
44 ispreview: Boolean 44 ispreview: Boolean
45 }, 45 },
46 data() { 46 data() {
47 - /*this.myChart={  
48 - click:function(e){  
49 - console.log("111",e)  
50 -  
51 - }  
52 - }*/  
53 return { 47 return {
54 trendVisible:false,//性能趋势弹框 48 trendVisible:false,//性能趋势弹框
55 dataValue:'', 49 dataValue:'',
@@ -425,7 +419,7 @@ export default { @@ -425,7 +419,7 @@ export default {
425 const data = this.queryEchartsData(val); 419 const data = this.queryEchartsData(val);
426 data.then(res => { 420 data.then(res => {
427 this.tableDataValue=res.map; 421 this.tableDataValue=res.map;
428 - this.setTrend(res.map) 422 + this.setTrend(res[0].value)
429 this.renderingFn(res); 423 this.renderingFn(res);
430 }); 424 });
431 }, 425 },
@@ -434,7 +428,7 @@ export default { @@ -434,7 +428,7 @@ export default {
434 const series = this.options.series; 428 const series = this.options.series;
435 const data = [ 429 const data = [
436 { 430 {
437 - value: val[0].value 431 + value: val[0].value.value
438 } 432 }
439 ] 433 ]
440 const detail = { 434 const detail = {
@@ -447,11 +441,17 @@ export default { @@ -447,11 +441,17 @@ export default {
447 } 441 }
448 series[0].data = data 442 series[0].data = data
449 series[0].detail = detail 443 series[0].detail = detail
450 - this.dataValue=(val[0].value?val[0].value:'0')+'%'; 444 + this.dataValue=(val[0].value.value?val[0].value.value:'0')+'%';
451 }, 445 },
452 //设置性能趋势图 446 //设置性能趋势图
453 setTrend(data){ 447 setTrend(data){
454 - let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+'&flag='+data.flag+'&warning='+data.isWarning 448 + let flg='&flg=';
  449 + if(data.flag){
  450 + flg+=data.flag;
  451 + }else {
  452 + flg+=data.subResId;
  453 + }
  454 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning
455 +'&ident='+data.ident 455 +'&ident='+data.ident
456 +'&trend='+data.trend 456 +'&trend='+data.trend
457 +'&name='+data.name; 457 +'&name='+data.name;
@@ -44,6 +44,7 @@ import monitorDetailTable from "./monitor/detailTable"; @@ -44,6 +44,7 @@ import monitorDetailTable from "./monitor/detailTable";
44 import monitorBgBorder from "./monitor/bgBorder"; 44 import monitorBgBorder from "./monitor/bgBorder";
45 import monitorGaugeRate from "./monitor/gaugeRate"; 45 import monitorGaugeRate from "./monitor/gaugeRate";
46 import monitorCustomLineChart from "./monitor/customLineChart"; 46 import monitorCustomLineChart from "./monitor/customLineChart";
  47 +import monitorCustomBarStack from "./monitor/customBarStack";
47 48
48 export default { 49 export default {
49 name: "WidgetTemp", 50 name: "WidgetTemp",
@@ -80,7 +81,8 @@ export default { @@ -80,7 +81,8 @@ export default {
80 monitorDetailTable, 81 monitorDetailTable,
81 monitorBgBorder, 82 monitorBgBorder,
82 monitorGaugeRate, 83 monitorGaugeRate,
83 - monitorCustomLineChart 84 + monitorCustomLineChart,
  85 + monitorCustomBarStack
84 }, 86 },
85 model: { 87 model: {
86 prop: "value", 88 prop: "value",
@@ -55,6 +55,7 @@ import monitorDetailTable from "./monitor/detailTable"; @@ -55,6 +55,7 @@ import monitorDetailTable from "./monitor/detailTable";
55 import monitorBgBorder from "./monitor/bgBorder"; 55 import monitorBgBorder from "./monitor/bgBorder";
56 import monitorGaugeRate from "./monitor/gaugeRate"; 56 import monitorGaugeRate from "./monitor/gaugeRate";
57 import monitorCustomLineChart from "./monitor/customLineChart"; 57 import monitorCustomLineChart from "./monitor/customLineChart";
  58 +import monitorCustomBarStack from "./monitor/customBarStack";
58 59
59 60
60 export default { 61 export default {
@@ -91,7 +92,8 @@ export default { @@ -91,7 +92,8 @@ export default {
91 monitorDetailTable, 92 monitorDetailTable,
92 monitorBgBorder, 93 monitorBgBorder,
93 monitorGaugeRate, 94 monitorGaugeRate,
94 - monitorCustomLineChart 95 + monitorCustomLineChart,
  96 + monitorCustomBarStack
95 }, 97 },
96 model: { 98 model: {
97 prop: "value", 99 prop: "value",