monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by ‘superliu’
Commit 4cca43af1eeb12eaf1ef97326a4267f88e8c815a 2 parents e36c76d5 eb4d5354

aj-解决冲突

Inline Side-by-side
Showing 18 changed files with 1829 additions and 371 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 = {};
1 import cacheView from "./modules/cachaView" 1 import cacheView from "./modules/cachaView"
  2 +import tableHead from "./modules/tableHead"
2 3
3 const getters = { 4 const getters = {
4 sidebar: state => state.app.sidebar, 5 sidebar: state => state.app.sidebar,
5 device: state => state.app.device, 6 device: state => state.app.device,
6 token: state => state.user.token, 7 token: state => state.user.token,
7 accessUser: state => state.user.accessUser, 8 accessUser: state => state.user.accessUser,
8 - cacheViews: state => state.cacheView.cacheViews 9 + cacheViews: state => state.cacheView.cacheViews,
  10 + //lsq 2022-02-25
  11 + tableHeads:state => state.tableHead.tableHeadData
9 } 12 }
10 export default getters 13 export default getters
@@ -7,6 +7,8 @@ import app from './modules/app' @@ -7,6 +7,8 @@ import app from './modules/app'
7 import user from './modules/user' 7 import user from './modules/user'
8 import cacheView from './modules/cachaView' 8 import cacheView from './modules/cachaView'
9 import help from './modules/help' 9 import help from './modules/help'
  10 +//lsq 2022-02-25
  11 +import tableHead from './modules/tableHead'
10 12
11 Vue.use(Vuex) 13 Vue.use(Vuex)
12 14
@@ -18,7 +20,8 @@ const store = new Vuex.Store({ @@ -18,7 +20,8 @@ const store = new Vuex.Store({
18 app, 20 app,
19 user, 21 user,
20 cacheView, 22 cacheView,
21 - help 23 + help,
  24 + tableHead
22 }, 25 },
23 state: { }, 26 state: { },
24 plugins: [initPlugin], 27 plugins: [initPlugin],
  1 +
  2 +const tableHead = {
  3 + state: {
  4 + tableHeadData: []
  5 + },
  6 +
  7 + mutations: {
  8 + CHANGE_HEAD: (state, val) => {
  9 + state.tableHeadData=val;
  10 + }
  11 + },
  12 + actions: {
  13 +
  14 + }
  15 +}
  16 +
  17 +export default tableHead
1 <template> 1 <template>
2 <div> 2 <div>
3 - <el-button 3 +<!-- <el-button
4 type="primary" 4 type="primary"
5 size="small" 5 size="small"
6 plain 6 plain
7 @click="handleAddClick" 7 @click="handleAddClick"
8 >配置表头</el-button 8 >配置表头</el-button
9 - >  
10 - <el-table :data="formData" style="width: 100%"> 9 + >-->
  10 + <span>表头设置</span>
  11 + <el-table :data="formDataNew" style="width: 100%">
11 <el-table-column prop="name" label="名称" width="60" /> 12 <el-table-column prop="name" label="名称" width="60" />
12 <el-table-column prop="key" label="key值" width="70" /> 13 <el-table-column prop="key" label="key值" width="70" />
13 <el-table-column prop="width" label="宽度" width="50" /> 14 <el-table-column prop="width" label="宽度" width="50" />
@@ -104,6 +105,21 @@ @@ -104,6 +105,21 @@
104 </span> 105 </span>
105 </el-dialog> 106 </el-dialog>
106 <el-dialog 107 <el-dialog
  108 + title="表头数据"
  109 + :visible.sync="dialogVisible"
  110 + width="60%"
  111 + :before-close="handleClose"
  112 + >
  113 +
  114 + <span slot="footer" class="dialog-footer">
  115 + <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
  116 +
  117 + <el-button size="mini" type="primary" @click="handleSaveClick"
  118 + >确 定</el-button
  119 + >
  120 + </span>
  121 + </el-dialog>
  122 +<!-- <el-dialog
107 title="性能指标" 123 title="性能指标"
108 :visible.sync="dialogVisible" 124 :visible.sync="dialogVisible"
109 width="60%" 125 width="60%"
@@ -113,6 +129,11 @@ @@ -113,6 +129,11 @@
113 <el-input v-model="keyword" placeholder="请输入指标名称" clearable /> 129 <el-input v-model="keyword" placeholder="请输入指标名称" clearable />
114 <el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button> 130 <el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button>
115 </div> 131 </div>
  132 + <div class="table-btn">
  133 + <el-button @click="selectKpi(false)" class="search-btn" :type="primaryType0">重新选择</el-button>
  134 + <el-button @click="selectKpi(true)" class="search-btn" :type="primaryType1">追加</el-button>
  135 +
  136 + </div>
116 <el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange" 137 <el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"
117 :row-key="(row) => { return row.kpiId }" 138 :row-key="(row) => { return row.kpiId }"
118 > 139 >
@@ -130,7 +151,7 @@ @@ -130,7 +151,7 @@
130 <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template> 151 <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template>
131 </el-table-column> 152 </el-table-column>
132 </el-table> 153 </el-table>
133 - <!-- 分页 --> 154 + &lt;!&ndash; 分页 &ndash;&gt;
134 <div style='text-align: left;background-color: white'> 155 <div style='text-align: left;background-color: white'>
135 <el-pagination 156 <el-pagination
136 v-if="currentPage" 157 v-if="currentPage"
@@ -146,16 +167,20 @@ @@ -146,16 +167,20 @@
146 </div> 167 </div>
147 <span slot="footer" class="dialog-footer"> 168 <span slot="footer" class="dialog-footer">
148 <el-button size="mini" @click="dialogVisible = false">取 消</el-button> 169 <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
  170 +
  171 + <el-tooltip class="item" effect="dark" content="默认为重新选择，追加请先点击追加按钮" placement="top-start">
149 <el-button size="mini" type="primary" @click="handleSaveClick" 172 <el-button size="mini" type="primary" @click="handleSaveClick"
150 >确 定</el-button 173 >确 定</el-button
151 > 174 >
  175 + </el-tooltip>
152 </span> 176 </span>
153 - </el-dialog> 177 + </el-dialog>-->
154 </div> 178 </div>
155 </template> 179 </template>
156 <script> 180 <script>
157 -import {getKpiPage} from "@/api/platform"; 181 +import {getKpiPage,getDetailTableData} from "@/api/platform";
158 import {formatDate} from "../../../../../filter"; 182 import {formatDate} from "../../../../../filter";
  183 +import {mapGetters} from "vuex";
159 export default { 184 export default {
160 model: { 185 model: {
161 prop: "formData", 186 prop: "formData",
@@ -164,8 +189,19 @@ export default { @@ -164,8 +189,19 @@ export default {
164 props: { 189 props: {
165 formData: Array 190 formData: Array
166 }, 191 },
  192 + watch:{
  193 + tableHeads:{
  194 + handler(val){
  195 + this.setFormData();
  196 + },
  197 + deep:true
  198 + }
  199 + },
167 data() { 200 data() {
168 return { 201 return {
  202 + primaryTypeFlg:false,//默认为追加
  203 + primaryType1:'default',
  204 + primaryType0:'primary',
169 keyword:'', 205 keyword:'',
170 currentPage:1, 206 currentPage:1,
171 pageSize:10, 207 pageSize:10,
@@ -200,33 +236,47 @@ export default { @@ -200,33 +236,47 @@ export default {
200 value:'textToBg' 236 value:'textToBg'
201 } 237 }
202 ],//关联组件 238 ],//关联组件
  239 + formDataNew:this.formData,//表头数据
203 }; 240 };
204 }, 241 },
  242 + computed:{
  243 + ...mapGetters(['tableHeads']),
  244 + //获取url地址中的token
  245 + getUrlToken(){
  246 + let locationUrl=this.$route.query;
  247 + let resId=locationUrl.resId;
  248 + let token=locationUrl.access_token;
  249 + let urlObj={
  250 + resId:resId,
  251 + token:token
  252 + }
  253 + return urlObj;
  254 + }
  255 + },
  256 + created() {
  257 + this.setFormData();
  258 + },
205 methods: { 259 methods: {
  260 + setFormData(){
  261 + if(this.tableHeads){
  262 + this.formDataNew=this.tableHeads;
  263 + }
  264 + },
206 //搜索指标 265 //搜索指标
207 searchKpi(){ 266 searchKpi(){
208 this.getKpi(); 267 this.getKpi();
209 }, 268 },
210 //获取性能指标列表 269 //获取性能指标列表
211 - getKpi(){  
212 - let datas=getKpiPage();  
213 - if(datas.success){  
214 - this.tableData=datas.data;  
215 - 270 + async getKpi(){
  271 + let params={
  272 + page:this.currentPage,
  273 + limit:this.pageSize,
  274 + kpiName:this.keyword,
216 } 275 }
217 - },  
218 - //回显数据  
219 - setCheckedData(){  
220 - if(this.multipleSelection && this.multipleSelection.length>0){  
221 - this.tableData.map(item=>{  
222 - this.multipleSelection.map(v=>{  
223 - if(item.kpiId==v.kpiId){  
224 - setTimeout(()=>{  
225 - this.$refs.multipleTableRef.toggleRowSelection(item)  
226 - },300)  
227 - }  
228 - })  
229 - }) 276 + const { success,data,count } = await getKpiPage(params,this.getUrlToken);
  277 + this.total=count;
  278 + if(success){
  279 + this.tableData=data;
230 } 280 }
231 }, 281 },
232 //多选操作 282 //多选操作
@@ -288,23 +338,34 @@ export default { @@ -288,23 +338,34 @@ export default {
288 handleSaveClick() { 338 handleSaveClick() {
289 if (this.flag) { 339 if (this.flag) {
290 // 新增 340 // 新增
291 - // this.formData.push(this.rowFormData);  
292 - let arr=[] 341 + let arr=[];
  342 + if(this.primaryTypeFlg){
  343 + //追加
  344 + let arr1=[];
  345 + this.multipleSelection.map((item,index)=>{
  346 + arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
  347 + })
  348 + arr=this.formDataNew.concat(arr1);
  349 + }else{
  350 + //重新选择
293 this.multipleSelection.map((item,index)=>{ 351 this.multipleSelection.map((item,index)=>{
294 arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1}) 352 arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
295 }) 353 })
296 - this.formData=arr;  
297 - this.formData.sort(this.compare('columnSort')); 354 + }
  355 +
  356 + this.formDataNew=arr;
  357 + this.formDataNew.sort(this.compare('columnSort'));
298 this.dialogVisible = false; 358 this.dialogVisible = false;
299 } else { 359 } else {
300 // 编辑 360 // 编辑
301 - this.formData[this.indexEditor] = this.rowFormData;  
302 - this.$set(this.formData, this.indexEditor, this.rowFormData);  
303 - this.formData.sort(this.compare('columnSort')); 361 + this.formDataNew[this.indexEditor] = this.rowFormData;
  362 + this.$set(this.formDataNew, this.indexEditor, this.rowFormData);
  363 + this.formDataNew.sort(this.compare('columnSort'));
304 this.editDialogVisible = false; 364 this.editDialogVisible = false;
305 } 365 }
306 - this.$emit("input", this.formData);  
307 - this.$emit("change", this.formData); 366 + console.log("AVX", this.formDataNew)
  367 + this.$emit("input", this.formDataNew);
  368 + this.$emit("change", this.formDataNew);
308 }, 369 },
309 //数组排序 370 //数组排序
310 compare(property){ 371 compare(property){
@@ -316,10 +377,10 @@ export default { @@ -316,10 +377,10 @@ export default {
316 }, 377 },
317 // 删除 378 // 删除
318 handleDeleteClick(index,row) { 379 handleDeleteClick(index,row) {
319 - this.formData.splice(index, 1); 380 + this.formDataNew.splice(index, 1);
320 this.setTableChecked(row.key); 381 this.setTableChecked(row.key);
321 - this.$emit("input", this.formData);  
322 - this.$emit("change", this.formData); 382 + this.$emit("input", this.formDataNew);
  383 + this.$emit("change", this.formDataNew);
323 }, 384 },
324 //设置表格选中状态 385 //设置表格选中状态
325 setTableChecked(kpiId){ 386 setTableChecked(kpiId){
@@ -338,6 +399,19 @@ export default { @@ -338,6 +399,19 @@ export default {
338 },300) 399 },300)
339 } 400 }
340 }) 401 })
  402 + },
  403 + //重新配置表头或者追加表头
  404 + selectKpi(flg){
  405 + this.primaryTypeFlg=flg;
  406 + if(flg){
  407 + //追加
  408 + this.primaryType1='primary';
  409 + this.primaryType0='default';
  410 + }else{
  411 + //重新选择
  412 + this.primaryType0='primary';
  413 + this.primaryType1='default';
  414 + }
341 } 415 }
342 } 416 }
343 }; 417 };
@@ -399,4 +473,7 @@ export default { @@ -399,4 +473,7 @@ export default {
399 color:#D81E06; 473 color:#D81E06;
400 line-height: 12px; 474 line-height: 12px;
401 } 475 }
  476 +.table-btn{
  477 + margin-top:10px;
  478 +}
402 </style> 479 </style>
  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 +}
@@ -49,6 +49,14 @@ export const monitorCustomLineChart = { @@ -49,6 +49,14 @@ export const monitorCustomLineChart = {
49 ], 49 ],
50 value: 'KPID339D51B', 50 value: 'KPID339D51B',
51 }, 51 },
  52 + {
  53 + type: 'el-input-text',
  54 + label: 'flag',
  55 + name: 'flag',
  56 + required: false,
  57 + placeholder: '',
  58 + value: '',
  59 + },
52 [ 60 [
53 { 61 {
54 name: '折线设置', 62 name: '折线设置',
@@ -67,7 +75,7 @@ export const monitorCustomLineChart = { @@ -67,7 +75,7 @@ export const monitorCustomLineChart = {
67 name: 'pointSize', 75 name: 'pointSize',
68 required: false, 76 required: false,
69 placeholder: '', 77 placeholder: '',
70 - value: 10, 78 + value: 6,
71 }, 79 },
72 { 80 {
73 type: 'vue-color', 81 type: 'vue-color',
@@ -107,7 +115,7 @@ export const monitorCustomLineChart = { @@ -107,7 +115,7 @@ export const monitorCustomLineChart = {
107 name: 'lineWidth', 115 name: 'lineWidth',
108 required: false, 116 required: false,
109 placeholder: '', 117 placeholder: '',
110 - value: 4, 118 + value: 1,
111 }, 119 },
112 ], 120 ],
113 }, 121 },
@@ -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 ],
@@ -78,7 +78,7 @@ export const monitorGaugeRate = { @@ -78,7 +78,7 @@ export const monitorGaugeRate = {
78 name: 'flag', 78 name: 'flag',
79 required: false, 79 required: false,
80 placeholder: '', 80 placeholder: '',
81 - value: '', 81 + value: 'net',
82 }, 82 },
83 [ 83 [
84 { 84 {
@@ -41,7 +41,7 @@ import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor- @@ -41,7 +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 {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information-two"; 44 +import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-stack";
45 45
46 46
47 export const {widgetTool,monitor} = { 47 export const {widgetTool,monitor} = {
@@ -82,6 +82,6 @@ export const {widgetTool,monitor} = { @@ -82,6 +82,6 @@ export const {widgetTool,monitor} = {
82 monitorBgBorder, 82 monitorBgBorder,
83 monitorGaugeRate, 83 monitorGaugeRate,
84 monitorCustomLineChart, 84 monitorCustomLineChart,
85 - monitorBasicInformationTwo 85 + monitorCustomBarStack
86 ] 86 ]
87 } 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>
1 <template> 1 <template>
2 <div :style="styleObj"> 2 <div :style="styleObj">
3 - <v-chart :options="options" autoresize/> 3 + <v-chart ref="myEchart" :options="options" autoresize/>
  4 + <!-- 直接点击数据展示 性能趋势弹框-->
  5 + <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
  6 + :widthStyle="widthStyle" :title-name="optionsSetup.titleText"
  7 + :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
  8 + >
  9 + <template v-slot>
  10 + <div class="txtScroll-top">
  11 + {{trendSrc}} <br/>
  12 + {{tableDataValue.name}}--{{tableDataValue.data}}
  13 + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
  14 + </div>
  15 + </template>
  16 + </customDialog>
4 </div> 17 </div>
5 </template> 18 </template>
6 19
7 <script> 20 <script>
  21 +import customDialog from "../../designerComponents/customDialog";
  22 +import {getTrendBaseUrl} from "@/api/platform";
  23 +
8 export default { 24 export default {
9 name: "customLineChart", 25 name: "customLineChart",
10 - components: {}, 26 + components: {customDialog},
11 props: { 27 props: {
12 value: Object, 28 value: Object,
13 ispreview: Boolean 29 ispreview: Boolean
14 }, 30 },
15 data() { 31 data() {
16 return { 32 return {
  33 + dynamicData:'',//动态数据值
  34 + refreshTime:'',//刷新时间
  35 + flagInter:null,//定时
  36 + trendVisible:false,//性能趋势弹框
  37 + dataValue:'',
  38 + trendSrc:'',//性能趋势图地址
  39 + marginStyle:'',//弹框距离顶部距离
  40 + heightStyle:'',//弹框遮罩层高度
  41 + widthStyle:';',//弹框宽度样式
  42 + tableDataValue: {kpiId:'',name:'',data:''},
  43 + tableDataValueHead: {},
  44 + resType:'',
17 options: { 45 options: {
18 grid: {}, 46 grid: {},
19 color: [], 47 color: [],
@@ -74,7 +102,29 @@ export default { @@ -74,7 +102,29 @@ export default {
74 top: this.optionsStyle.top + "px", 102 top: this.optionsStyle.top + "px",
75 background: this.optionsSetup.background 103 background: this.optionsSetup.background
76 }; 104 };
  105 + },
  106 + //获取url地址中的token
  107 + getUrlToken(){
  108 + let locationUrl=this.$route.query;
  109 + let resId=locationUrl.resId;
  110 + let token=locationUrl.access_token;
  111 + let urlObj={
  112 + resId:resId,
  113 + token:token
77 } 114 }
  115 + return urlObj;
  116 + },
  117 + //设置
  118 + kpiIdStyle(){
  119 + this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId)
  120 + this.tableDataValue.kpiId=this.optionsSetup.kpiId;
  121 + let obj={
  122 + kpiId:this.optionsSetup.kpiId,
  123 + targetId:this.optionsSetup.targetId,
  124 + flag:this.optionsSetup.flag
  125 + }
  126 + return obj;
  127 + },
78 }, 128 },
79 watch: { 129 watch: {
80 value: { 130 value: {
@@ -107,6 +157,7 @@ export default { @@ -107,6 +157,7 @@ export default {
107 this.setOptionsMargin(); 157 this.setOptionsMargin();
108 this.setOptionsLegend(); 158 this.setOptionsLegend();
109 this.setOptionsColor(); 159 this.setOptionsColor();
  160 + window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
110 }, 161 },
111 // 标题修改 162 // 标题修改
112 setOptionsTitle() { 163 setOptionsTitle() {
@@ -269,7 +320,6 @@ export default { @@ -269,7 +320,6 @@ export default {
269 fontSize: optionsSetup.fontSize 320 fontSize: optionsSetup.fontSize
270 }, 321 },
271 formatter:function (param) { 322 formatter:function (param) {
272 - console.log("param",param,param.length)  
273 let kpiName=optionsSetup.titleText; 323 let kpiName=optionsSetup.titleText;
274 let kpiUnit=''; 324 let kpiUnit='';
275 // 鼠标悬浮线上提示 325 // 鼠标悬浮线上提示
@@ -357,7 +407,6 @@ export default { @@ -357,7 +407,6 @@ export default {
357 axis[i] = val[i].axis; 407 axis[i] = val[i].axis;
358 data[i] = val[i].data 408 data[i] = val[i].data
359 } 409 }
360 - console.log("abc",axis,data)  
361 // x轴 410 // x轴
362 this.options.xAxis.data = axis; 411 this.options.xAxis.data = axis;
363 // series 412 // series
@@ -371,6 +420,8 @@ export default { @@ -371,6 +420,8 @@ export default {
371 if (!val) return; 420 if (!val) return;
372 if (this.ispreview) { 421 if (this.ispreview) {
373 this.getEchartData(val); 422 this.getEchartData(val);
  423 + this.dynamicData=val;
  424 + this.refreshTime=refreshTime;
374 this.flagInter = setInterval(() => { 425 this.flagInter = setInterval(() => {
375 this.getEchartData(val); 426 this.getEchartData(val);
376 }, refreshTime); 427 }, refreshTime);
@@ -394,7 +445,88 @@ export default { @@ -394,7 +445,88 @@ export default {
394 series[i].data = val.series[i].datas; 445 series[i].data = val.series[i].datas;
395 } 446 }
396 } 447 }
  448 + this.echartsClick();
  449 + },
  450 + echartsClick(){
  451 + let that=this;
  452 + this.$refs.myEchart.chart.on('click',function (params){
  453 + console.log("()()()()()",params.name,params.data,params)
  454 + that.$set(that.tableDataValue,'name',params.name)
  455 + that.$set(that.tableDataValue,'data',params.data)
  456 + that.goTrend();
  457 + })
  458 + },
  459 + //设置性能趋势图
  460 + setTrend(data){
  461 + let flg='&flg=';
  462 + if(data.flag){
  463 + flg+=data.flag;
  464 + }else {
  465 + flg+=data.subResId;
  466 + }
  467 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning
  468 + +'&ident='+data.ident
  469 + +'&trend='+data.trend
  470 + +'&name='+data.name;
  471 + let baseUrl=getTrendBaseUrl();
  472 + this.resType=data.resType;
  473 + this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
  474 + },
  475 + goTrend(){
  476 + this.setTrend(this.tableDataValue);
  477 + this.trendVisible=true;
  478 + if(this.flagInter){
  479 + clearInterval(this.flagInter);
  480 + }
  481 + },
  482 + //弹框关闭确定
  483 + hideDialog(){
  484 + this.trendVisible=false;
  485 + this.flagInter = setInterval(() => {
  486 + this.getEchartData(this.dynamicData);
  487 + }, this.refreshTime);
  488 + },
  489 + okFunc(){
  490 + this.trendVisible=false;
  491 + this.flagInter = setInterval(() => {
  492 + this.getEchartData(this.dynamicData);
  493 + }, this.refreshTime);
  494 + },
  495 + handleScroll(e){
  496 + let serviceTop = 44;
  497 +
  498 + let hotelTop = 344;
  499 +
  500 + if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {
  501 +
  502 + this.selectNum = 0;
  503 + }
  504 +
  505 + if (e.target.scrollTop > 344) {
  506 +
  507 + this.selectNum = 1;
  508 +
  509 + }
  510 + // let scroll=window.pageYOffset;
  511 + let scroll=document.documentElement.scrollTop;
  512 + let documentHeight=document.documentElement.clientHeight;
  513 + if (self != top) {
  514 + //嵌入到监控系统iframe中弹框位置样式
  515 + // let documentHeight=document.body.scrollHeight;
  516 + this.heightStyle="height:"+(documentHeight+230)+'px;top:'+scroll+'px';
  517 + if(scroll<600){
  518 + this.marginStyle+="margin-top:"+(110)+'px;';
  519 +
  520 + }else{
  521 + this.marginStyle+="margin-top:"+(230)+'px;';
  522 +
397 } 523 }
  524 + }else{
  525 + //ajreport中弹框位置样式
  526 + this.heightStyle="height:"+(documentHeight+scroll)+'px;';
  527 + this.marginStyle+="margin-top:"+(scroll+100)+'px;';
  528 + }
  529 + },
398 } 530 }
399 }; 531 };
400 </script> 532 </script>
@@ -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,12 @@ import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} @@ -163,7 +195,12 @@ 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 +import {mapGetters} from "vuex";
  202 +import tableHead from "../../../../../../store/modules/tableHead";
  203 +//文字转背景
167 204
168 vue.use(VueSuperSlide); 205 vue.use(VueSuperSlide);
169 export default { 206 export default {
@@ -176,6 +213,9 @@ export default { @@ -176,6 +213,9 @@ export default {
176 }, 213 },
177 data() { 214 data() {
178 return { 215 return {
  216 + alarmId:'',//消除告警的id
  217 + noticeFlag:0,//是否通知
  218 + reason:'',//消除意见
179 currentPage:1, 219 currentPage:1,
180 pageSize:10, 220 pageSize:10,
181 pageSizes:[10,50,100, 200, 300, 400], 221 pageSizes:[10,50,100, 200, 300, 400],
@@ -183,6 +223,7 @@ export default { @@ -183,6 +223,7 @@ export default {
183 trendVisible:false,//性能趋势弹框 223 trendVisible:false,//性能趋势弹框
184 headerAll:[], 224 headerAll:[],
185 listAll:[], 225 listAll:[],
  226 + alarmTableVisible:false,//告警消除弹框
186 tableVisible:false,//更多表格弹框 227 tableVisible:false,//更多表格弹框
187 dialogVisible:false,//表格下探后的弹框 228 dialogVisible:false,//表格下探后的弹框
188 popoverVisible:false,//下探弹框 229 popoverVisible:false,//下探弹框
@@ -275,10 +316,20 @@ export default { @@ -275,10 +316,20 @@ export default {
275 316
276 } 317 }
277 }, 318 },
  319 + handleStyle(){
  320 + const bodyStyle = this.optionsSetUp;
  321 + return{
  322 + width:'30%',
  323 + "border-left":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none',
  324 + "border-bottom":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none'
  325 + }
  326 +
  327 + },
278 tableStyle(){ 328 tableStyle(){
279 const tableStyleSetup=this.optionsSetUp; 329 const tableStyleSetup=this.optionsSetUp;
280 return{ 330 return{
281 - tableName:tableStyleSetup.tableName 331 + tableName:tableStyleSetup.tableName,
  332 + probeDown:tableStyleSetup.probeDown
282 } 333 }
283 }, 334 },
284 //表格下探列表 335 //表格下探列表
@@ -325,11 +376,16 @@ export default { @@ -325,11 +376,16 @@ export default {
325 }, 376 },
326 //获取url地址中的token 377 //获取url地址中的token
327 getUrlToken(){ 378 getUrlToken(){
  379 + const tableStyleSetup=this.optionsSetUp;
328 let locationUrl=this.$route.query; 380 let locationUrl=this.$route.query;
329 let resId=locationUrl.resId; 381 let resId=locationUrl.resId;
330 let token=locationUrl.access_token; 382 let token=locationUrl.access_token;
  383 + let flag=tableStyleSetup.flag;
  384 + let isAlarm=tableStyleSetup.isAlarm;
331 let urlObj={ 385 let urlObj={
332 resId:resId, 386 resId:resId,
  387 + flag:flag,
  388 + isAlarm:isAlarm,
333 token:token 389 token:token
334 } 390 }
335 return urlObj; 391 return urlObj;
@@ -459,7 +515,9 @@ export default { @@ -459,7 +515,9 @@ export default {
459 } 515 }
460 colArr.push(columnObj) 516 colArr.push(columnObj)
461 }) 517 })
462 - 518 + if(this.getUrlToken.isAlarm){
  519 + datas=content;
  520 + }else{
463 content.map((cv) => { 521 content.map((cv) => {
464 let kpi = {}; 522 let kpi = {};
465 cv.map((ccv) => { 523 cv.map((ccv) => {
@@ -473,10 +531,10 @@ export default { @@ -473,10 +531,10 @@ export default {
473 isWarning: 0, 531 isWarning: 0,
474 }; 532 };
475 } 533 }
476 -  
477 }) 534 })
478 datas.push(kpi); 535 datas.push(kpi);
479 }) 536 })
  537 + }
480 if(flg=='all'){ 538 if(flg=='all'){
481 this.headerAll=colArr; 539 this.headerAll=colArr;
482 this.listAll=datas; 540 this.listAll=datas;
@@ -486,7 +544,7 @@ export default { @@ -486,7 +544,7 @@ export default {
486 } 544 }
487 this.tableFiledColumnSort(); 545 this.tableFiledColumnSort();
488 }, 546 },
489 - handlerDetailData(valData,sortBy){ 547 + async handlerDetailData(valData,sortBy,order){
490 let kpiArr=[] 548 let kpiArr=[]
491 let kpiIdStr=''; 549 let kpiIdStr='';
492 if(this.header && this.header.length>0){ 550 if(this.header && this.header.length>0){
@@ -502,33 +560,86 @@ export default { @@ -502,33 +560,86 @@ export default {
502 kpiIdStr=kpiArr.join(','); 560 kpiIdStr=kpiArr.join(',');
503 } 561 }
504 let param={ 562 let param={
505 - kpiId:kpiIdStr 563 + resId:this.getUrlToken.resId,
  564 + kpiId:kpiIdStr,
  565 + flagPrifix:this.getUrlToken.flag,
  566 + page:this.currentPage,
  567 + size:this.pageSize
506 } 568 }
507 let sort=sortBy; 569 let sort=sortBy;
508 if(sort){ 570 if(sort){
509 - param.sort=sort; 571 + param.sortBy=sort;
  572 + }
  573 + if(order){
  574 + param.order=order;
510 } 575 }
511 let headTable = valData; 576 let headTable = valData;
512 if(kpiIdStr){ 577 if(kpiIdStr){
513 //根据kpiId集合获取表格数据 578 //根据kpiId集合获取表格数据
514 - let tableData=getDetailTableData(param);  
515 - headTable=tableData.data[0]; 579 + let tableData='';
  580 + const { success,data } = await getDetailTableData(param,this.getUrlToken);
  581 + if (success ){
  582 + tableData=data;
516 } 583 }
517 - 584 + if(tableData && tableData.length>0){
  585 + headTable=tableData[0];
  586 + }
  587 + }
  588 + if(headTable){
518 this.handleHeadContent(headTable) 589 this.handleHeadContent(headTable)
519 - 590 + }
520 }, 591 },
521 //打开更多表格 592 //打开更多表格
522 - handlerDetailDataNoPage(){  
523 - let headTable =getDetailTableDataNoPage();  
524 - this.handleHeadContent(headTable.data[0],'all'); 593 + async handlerDetailDataNoPage(sortBy){
  594 + let kpiArr=[];
  595 + let kpiIdStr='';
  596 + if(this.header && this.header.length>0){
  597 + this.header.map(item=>{
  598 + if(item.isStatic){
  599 +
  600 + }else{
  601 + if(item.key!='KPIF74D9D2B'){
  602 + kpiArr.push(item.key)
  603 + }
  604 + }
  605 + })
  606 + }
  607 + if(kpiArr && kpiArr.length>0){
  608 + kpiIdStr=kpiArr.join(',');
  609 + }
  610 + let param={
  611 + resId:this.getUrlToken.resId,
  612 + kpiId:kpiIdStr,
  613 + flagPrifix:this.getUrlToken.flag,
  614 + }
  615 + let sort=sortBy;
  616 + if(sort){
  617 + param.sortBy=sort;
  618 + }
  619 +
  620 + const { success,data } = await getDetailTableDataNoPage(param,this.getUrlToken);
  621 + if(success){
  622 + let headTable =data;
  623 + console.log("alalalal",data)
  624 +
  625 + this.handleHeadContent(headTable[0],'all');
525 this.widthStyle=''; 626 this.widthStyle='';
526 // this.setDialog('table'); 627 // this.setDialog('table');
527 this.tableVisible=true; 628 this.tableVisible=true;
  629 + }
  630 +
528 }, 631 },
529 //点击表格内容名称事件 632 //点击表格内容名称事件
530 clickListName(obj,tableDataValueHead){ 633 clickListName(obj,tableDataValueHead){
531 - if(obj.kpiIdent==1 || obj.isWarning==1){ 634 + let isIf=obj.kpiIdent==1 || obj.isWarning==1;
  635 +
  636 + if(this.getUrlToken.isAlarm){
  637 + //告警表格的判断
  638 + isIf=tableDataValueHead.key=='kpiName' && (obj.kpiIdent==1 || obj.isWarning==1);
  639 + }else{
  640 + isIf=obj.kpiIdent==1 || obj.isWarning==1;
  641 + }
  642 + if(isIf){
532 this.widthStyle=''; 643 this.widthStyle='';
533 this.pressingValue=obj; 644 this.pressingValue=obj;
534 this.dialogNameStyle(obj) 645 this.dialogNameStyle(obj)
@@ -536,6 +647,7 @@ export default { @@ -536,6 +647,7 @@ export default {
536 this.trendVisible=true; 647 this.trendVisible=true;
537 } 648 }
538 649
  650 +
539 }, 651 },
540 //设置性能趋势图 652 //设置性能趋势图
541 setTrend(tableDataValueHead){ 653 setTrend(tableDataValueHead){
@@ -580,7 +692,97 @@ export default { @@ -580,7 +692,97 @@ export default {
580 getEchartData(val) { 692 getEchartData(val) {
581 const data = this.queryEchartsData(val); 693 const data = this.queryEchartsData(val);
582 data.then(res => { 694 data.then(res => {
583 - this.list = res; 695 + let resTable='';
  696 + if(res && res.length>0){
  697 + // this.handlerDetailData(res[0].data[0]);
  698 + if(!this.getUrlToken.isAlarm){
  699 + //普通详情表格
  700 + resTable=res[0].data[0];
  701 + this.handleHeadContent(res[0].data[0]);
  702 +
  703 + }else{
  704 + //告警表格
  705 + let tableData=res[0].data;
  706 + //alarmLevel,alarmContent,kpiName,updateTime
  707 + if(tableData && tableData.length>0){
  708 + let head=[{
  709 + id: "alarmLevel",
  710 + name: "告警级别",
  711 + unit: ""
  712 + },
  713 + {
  714 + id: "alarmContent",
  715 + name: "告警内容",
  716 + unit: ""
  717 + },
  718 + {
  719 + id: "kpiName",
  720 + name: "指标名称",
  721 + unit: ""
  722 + },
  723 + {
  724 + id: "updateTime",
  725 + name: "告警时间",
  726 + unit: ""
  727 + }
  728 + ]
  729 + let content=[];
  730 +
  731 + tableData.map(item=>{
  732 + let contentObj={};
  733 + head.map(hv=>{
  734 + contentObj[hv.id]=item;
  735 + })
  736 + content.push(contentObj)
  737 + })
  738 + let obj={
  739 + header:head,
  740 + content:content
  741 + }
  742 + resTable=obj;
  743 + this.handleHeadContent(obj);
  744 +
  745 + }
  746 +
  747 + }
  748 + }
  749 + // this.list = res;
  750 + let isNewData=false;
  751 + let addTableData=[];
  752 + let head=resTable.header;
  753 + let addTableDataOld=this.optionsSetUp.dynamicAddTable;
  754 + addTableDataOld.map(v=>{
  755 + head.map((item,index)=>{
  756 + if(v.key==item.key){
  757 + isNewData=false;
  758 + addTableData.push({
  759 + columnSort:v.columnSort?v.columnSort:index,
  760 + componentName:v.componentName?v.componentName:1,
  761 + isStatic:false,
  762 + key:item.id,
  763 + name:item.name,
  764 + width:v.width
  765 + })
  766 + }else{
  767 + isNewData=true;
  768 +
  769 + }
  770 +
  771 + })
  772 + })
  773 + if(isNewData){
  774 + head.map((item,index)=>{
  775 + addTableData.push({
  776 + columnSort:index,
  777 + componentName:1,
  778 + isStatic:false,
  779 + key:item.id,
  780 + name:item.name,
  781 + width:"50%"
  782 + })
  783 + })
  784 + }
  785 + this.$store.commit('CHANGE_HEAD', addTableData);
584 this.hackResetFun(); 786 this.hackResetFun();
585 }); 787 });
586 }, 788 },
@@ -591,6 +793,7 @@ export default { @@ -591,6 +793,7 @@ export default {
591 this.hackReset = true; 793 this.hackReset = true;
592 }); 794 });
593 }, 795 },
  796 +
594 // 计算 奇偶背景色 797 // 计算 奇偶背景色
595 bodyTable(index) { 798 bodyTable(index) {
596 var styleJson = {}; 799 var styleJson = {};
@@ -702,6 +905,15 @@ export default { @@ -702,6 +905,15 @@ export default {
702 this.tableVisible=false; 905 this.tableVisible=false;
703 906
704 }, 907 },
  908 + //告警消除弹框关闭确定
  909 + hideDialogTableAlarm(){
  910 + this.alarmTableVisible=false;
  911 + },
  912 + okFuncTableAlarm(){
  913 + // this.alarmTableVisible=false;
  914 + this.clearAlarmHandle();
  915 +
  916 + },
705 //排序 917 //排序
706 changeSort(item,flg){ 918 changeSort(item,flg){
707 if(this.sortCaret==flg){ 919 if(this.sortCaret==flg){
@@ -711,16 +923,37 @@ export default { @@ -711,16 +923,37 @@ export default {
711 this.sortCaret=flg; 923 this.sortCaret=flg;
712 this.sortBy=item.key; 924 this.sortBy=item.key;
713 } 925 }
  926 + console.log(" this.optionsData", this.optionsData)
  927 + console.log("iiiiiiii",item)
714 if(this.sortCaret=='ascending'){ 928 if(this.sortCaret=='ascending'){
715 //正序 929 //正序
  930 + this.order='ASC';
716 }else if(this.sortCaret=='ascending'){ 931 }else if(this.sortCaret=='ascending'){
717 //倒序 932 //倒序
  933 + this.order='DESC';
718 }else{ 934 }else{
719 //不排序 935 //不排序
  936 + this.order='';
720 } 937 }
721 - // this.handlerDetailData('',item.key) 938 + this.handlerDetailData('',this.sortBy,this.order)
  939 +
722 // this.handlerDetailDataNoPage(); 940 // this.handlerDetailDataNoPage();
723 }, 941 },
  942 + //获取表格数据
  943 + async reGetDetailTableData(param){
  944 + let tableData='';
  945 + let headTable='';
  946 + const { success,data } = await getDetailTableData(param,this.getUrlToken);
  947 + if (success ){
  948 + tableData=data;
  949 + }
  950 + if(tableData && tableData.length>0){
  951 + headTable=tableData[0];
  952 + }
  953 + if(headTable){
  954 + this.handleHeadContent(headTable)
  955 + }
  956 + },
724 // 每页展示多少条 957 // 每页展示多少条
725 handleSizeChange(val){ 958 handleSizeChange(val){
726 // 切换页码重置初始页 959 // 切换页码重置初始页
@@ -792,6 +1025,44 @@ export default { @@ -792,6 +1025,44 @@ export default {
792 } 1025 }
793 1026
794 }, 1027 },
  1028 + //消除告警
  1029 + clearAlarm(obj){
  1030 + ///
  1031 + this.alarmId=obj.alarmContent.id;
  1032 + this.alarmTableVisible=true;
  1033 + },
  1034 + async clearAlarmHandle(){
  1035 + if(this.reason){
  1036 + let params={
  1037 + ids:this.alarmId,
  1038 + reason:this.reason,
  1039 + access_token: this.getUrlToken.token,
  1040 + noticeFlag:this.noticeFlag
  1041 + }
  1042 + const { success } = await saveClearAalarm(params,this.getUrlToken);
  1043 + if(success){
  1044 + Message({
  1045 + message: '告警已消除！',
  1046 + type: 'success',
  1047 + duration: 3 * 1000
  1048 + });
  1049 + }else{
  1050 + Message({
  1051 + message: '告警消除失败，请与管理员联系！',
  1052 + type: 'error',
  1053 + duration: 3 * 1000
  1054 + });
  1055 + }
  1056 + this.alarmTableVisible=false;
  1057 + }else{
  1058 + Message({
  1059 + message: '请填写消除意见',
  1060 + type: 'warning',
  1061 + duration: 3 * 1000
  1062 + });
  1063 + }
  1064 +
  1065 + }
795 1066
796 } 1067 }
797 }; 1068 };
@@ -1029,4 +1300,12 @@ export default { @@ -1029,4 +1300,12 @@ export default {
1029 .padding-10{ 1300 .padding-10{
1030 padding:5px; 1301 padding:5px;
1031 } 1302 }
  1303 +.alarmClear{
  1304 + margin:15px;
  1305 + overflow: hidden;
  1306 +}
  1307 +.alarmRadio{
  1308 + margin:20px;
  1309 + text-align: left;
  1310 +}
1032 </style> 1311 </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;
1 -<!--  
2 - * @Author: lide1202@hotmail.com  
3 - * @Date: 2021-3-13 11:04:24  
4 - * @Last Modified by: lide1202@hotmail.com  
5 - * @Last Modified time: 2021-3-13 11:04:24  
6 - !-->  
7 -<template>  
8 - <div>  
9 - <component :is="type" :value="value" :ispreview="true"/>  
10 - </div>  
11 -</template>  
12 -  
13 -<script>  
14 -import widgetHref from "./widgetHref.vue";  
15 -import widgetText from "./widgetText.vue";  
16 -import WidgetMarquee from "./widgetMarquee.vue";  
17 -import widgetTime from "./widgetTime.vue";  
18 -import widgetImage from "./widgetImage.vue";  
19 -import widgetSlider from "./widgetSlider.vue";  
20 -import widgetVideo from "./widgetVideo.vue";  
21 -import WidgetIframe from "./widgetIframe.vue";  
22 -import widgetBarchart from "./bar/widgetBarchart.vue";  
23 -import widgetLinechart from "./line/widgetLinechart.vue";  
24 -import widgetBarlinechart from "./bar/widgetBarlinechart";  
25 -import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";  
26 -import WidgetPiechart from "./pie/widgetPiechart.vue";  
27 -import WidgetFunnel from "./widgetFunnel.vue";  
28 -import WidgetGauge from "./percent/widgetGauge.vue";  
29 -import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";  
30 -import widgetTable from "./widgetTable.vue";  
31 -import widgetMap from "./widgetMap.vue";  
32 -import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";  
33 -import widgetAirBubbleMap from "./map/widgetAirBubbleMap";  
34 -import widgetBarStackChart from "./bar/widgetBarStackChart";  
35 -import widgetLineStackChart from "./line/widgetLineStackChart";  
36 -import widgetBarCompareChart from "./bar/widgetBarCompareChart";  
37 -import widgetLineCompareChart from "./line/widgetLineCompareChart";  
38 -import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";  
39 -  
40 -import monitorHealthStatus from "./monitor/healthStatus";  
41 -import monitorResourceStatus from "./monitor/resourceStatus";  
42 -import monitorBasicInformation from "./monitor/basicInformation";  
43 -import monitorDetailTable from "./monitor/detailTable";  
44 -import monitorBgBorder from "./monitor/bgBorder";  
45 -import monitorGaugeRate from "./monitor/gaugeRate";  
46 -import monitorCustomLineChart from "./monitor/customLineChart";  
47 -import monitorBasicInformationTwo from "./monitor/basicInformationTwo";  
48 -  
49 -export default {  
50 - name: "WidgetTemp",  
51 - components: {  
52 - widgetHref,  
53 - widgetText,  
54 - WidgetMarquee,  
55 - widgetTime,  
56 - widgetImage,  
57 - widgetSlider,  
58 - widgetVideo,  
59 - WidgetIframe,  
60 - widgetBarchart,  
61 - widgetGradientColorBarchart,  
62 - widgetLinechart,  
63 - widgetBarlinechart,  
64 - WidgetPiechart,  
65 - WidgetFunnel,  
66 - WidgetGauge,  
67 - WidgetPieNightingaleRoseArea,  
68 - widgetTable,  
69 - widgetMap,  
70 - widgetPiePercentageChart,  
71 - widgetAirBubbleMap,  
72 - widgetBarStackChart,  
73 - widgetLineStackChart,  
74 - widgetBarCompareChart,  
75 - widgetLineCompareChart,  
76 - widgetDecoratePieChart,  
77 -  
78 - monitorHealthStatus,  
79 - monitorResourceStatus,  
80 - monitorBasicInformation,  
81 - monitorDetailTable,  
82 - monitorBgBorder,  
83 - monitorGaugeRate,  
84 - monitorCustomLineChart,  
85 - monitorBasicInformationTwo  
86 - },  
87 - model: {  
88 - prop: "value",  
89 - event: "input"  
90 - },  
91 - props: {  
92 - type: String,  
93 - value: {  
94 - type: [Object],  
95 - default: () => {  
96 - }  
97 - }  
98 - },  
99 - data() {  
100 - return {};  
101 - },  
102 - mounted() {  
103 - },  
104 - methods: {}  
105 -};  
106 -</script>  
107 -  
108 -<style scoped lang="scss"></style>  
1 -<!--  
2 - * @Author: lide1202@hotmail.com  
3 - * @Date: 2021-3-13 11:04:24  
4 - * @Last Modified by: lide1202@hotmail.com  
5 - * @Last Modified time: 2021-3-13 11:04:24  
6 - !-->  
7 -<template>  
8 - <avue-draggable  
9 - :step="step"  
10 - :width="widgetsWidth"  
11 - :height="widgetsHeight"  
12 - :left="widgetsLeft"  
13 - :top="widgetsTop"  
14 - ref="draggable"  
15 - :index="index"  
16 - :z-index="-1"  
17 - @focus="handleFocus"  
18 - @blur="handleBlur"  
19 - >  
20 - <component :is="type" :value="value"/>  
21 - </avue-draggable>  
22 -</template>  
23 -  
24 -<script>  
25 -import widgetHref from "./widgetHref.vue";  
26 -import widgetText from "./widgetText.vue";  
27 -import WidgetMarquee from "./widgetMarquee.vue";  
28 -import widgetTime from "./widgetTime.vue";  
29 -import widgetImage from "./widgetImage.vue";  
30 -import widgetSlider from "./widgetSlider.vue";  
31 -import widgetVideo from "./widgetVideo.vue";  
32 -import WidgetIframe from "./widgetIframe.vue";  
33 -import widgetBarchart from "./bar/widgetBarchart.vue";  
34 -import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";  
35 -import widgetLinechart from "./line/widgetLinechart.vue";  
36 -import widgetBarlinechart from "./bar/widgetBarlinechart";  
37 -import WidgetPiechart from "./pie/widgetPiechart.vue";  
38 -import WidgetFunnel from "./widgetFunnel.vue";  
39 -import WidgetGauge from "./percent/widgetGauge.vue";  
40 -import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";  
41 -import widgetTable from "./widgetTable.vue";  
42 -import widgetMap from "./widgetMap.vue";  
43 -import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";  
44 -import widgetAirBubbleMap from "./map/widgetAirBubbleMap";  
45 -import widgetBarStackChart from "./bar/widgetBarStackChart";  
46 -import widgetLineStackChart from "./line/widgetLineStackChart";  
47 -import widgetBarCompareChart from "./bar/widgetBarCompareChart";  
48 -import widgetLineCompareChart from "./line/widgetLineCompareChart";  
49 -import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";  
50 -  
51 -import monitorHealthStatus from "./monitor/healthStatus";  
52 -import monitorResourceStatus from "./monitor/resourceStatus";  
53 -import monitorBasicInformation from "./monitor/basicInformation";  
54 -import monitorDetailTable from "./monitor/detailTable";  
55 -import monitorBgBorder from "./monitor/bgBorder";  
56 -import monitorGaugeRate from "./monitor/gaugeRate";  
57 -import monitorCustomLineChart from "./monitor/customLineChart";  
58 -import monitorBasicInformationTwo from "./monitor/basicInformationTwo";  
59 -  
60 -  
61 -export default {  
62 - name: "Widget",  
63 - components: {  
64 - widgetHref,  
65 - widgetText,  
66 - WidgetMarquee,  
67 - widgetTime,  
68 - widgetImage,  
69 - widgetSlider,  
70 - widgetVideo,  
71 - WidgetIframe,  
72 - widgetBarchart,  
73 - widgetGradientColorBarchart,  
74 - widgetLinechart,  
75 - widgetBarlinechart,  
76 - WidgetPiechart,  
77 - WidgetFunnel,  
78 - WidgetGauge,  
79 - WidgetPieNightingaleRoseArea,  
80 - widgetTable,  
81 - widgetMap,  
82 - widgetPiePercentageChart,  
83 - widgetAirBubbleMap,  
84 - widgetBarStackChart,  
85 - widgetLineStackChart,  
86 - widgetBarCompareChart,  
87 - widgetLineCompareChart,  
88 - widgetDecoratePieChart,  
89 - monitorHealthStatus,  
90 - monitorResourceStatus,  
91 - monitorBasicInformation,  
92 - monitorDetailTable,  
93 - monitorBgBorder,  
94 - monitorGaugeRate,  
95 - monitorCustomLineChart,  
96 - monitorBasicInformationTwo  
97 - },  
98 - model: {  
99 - prop: "value",  
100 - event: "input"  
101 - },  
102 - props: {  
103 - /*  
104 - widget-text widget-marquee widget-href widget-time widget-image widget-slider widget-video widget-table widget-iframe widget-universal  
105 - widget-linechart widget-barlinechart widget-piechart widget-hollow-piechart widget-funnel widget-gauge widget-china-map  
106 - */  
107 - index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引  
108 - type: String,  
109 - bigscreen: Object,  
110 - value: {  
111 - type: [Object],  
112 - default: () => {  
113 - }  
114 - },  
115 - step: Number  
116 - },  
117 - data() {  
118 - return {  
119 - data: {  
120 - setup: {},  
121 - data: {},  
122 - position: {}  
123 - }  
124 - };  
125 - },  
126 - computed: {  
127 - widgetsWidth() {  
128 - return this.value.position.width;  
129 - },  
130 - widgetsHeight() {  
131 - return this.value.position.height;  
132 - },  
133 - widgetsLeft() {  
134 - return this.value.position.left;  
135 - },  
136 - widgetsTop() {  
137 - return this.value.position.top;  
138 - },  
139 - widgetsZIndex() {  
140 - return this.value.position.zIndex || 1;  
141 - }  
142 - },  
143 - mounted() {  
144 - },  
145 - methods: {  
146 - handleFocus({index, left, top, width, height}) {  
147 - },  
148 - handleBlur({index, left, top, width, height}) {  
149 - this.$emit("onActivated", {index, left, top, width, height});  
150 - this.$refs.draggable.setActive(true);  
151 - }  
152 - }  
153 -};  
154 -</script>  
155 -  
156 -<style scoped lang="scss">  
157 -.vue-draggalbe {  
158 - position: absolute;  
159 -}  
160 -  
161 -.widget-active {  
162 - cursor: move;  
163 - border: 1px dashed #09f;  
164 - background-color: rgba(115, 170, 229, 0.5);  
165 -}  
166 -  
167 -.avue-draggable {  
168 - padding: 0 !important;  
169 -}  
170 -</style>