monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 9acb3ba301660dde04ceb256ce733f6432f7a96a 2 parents adca486c 03a1679a

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

动态传参，表格下探到layui详情页，增加更多下载按钮



See merge request !45
Inline Side-by-side
Showing 4 changed files with 268 additions and 36 deletions
@@ -70,7 +70,7 @@ export default { @@ -70,7 +70,7 @@ export default {
70 setInit(){ 70 setInit(){
71 let box = document.getElementsByClassName('layout'); 71 let box = document.getElementsByClassName('layout');
72 let height=box[0].scrollHeight; 72 let height=box[0].scrollHeight;
73 - this.heightStyle="height:"+height+'px;max-height:'+height+'px;overflow:hidden;'; 73 + this.heightStyle="height:"+(height+120)+'px;max-height:'+(height+120)+'px;overflow:hidden;';
74 }, 74 },
75 //禁止滚动 75 //禁止滚动
76 stop(){ 76 stop(){
@@ -111,7 +111,7 @@ export default { @@ -111,7 +111,7 @@ export default {
111 left: 0; 111 left: 0;
112 right: 0; 112 right: 0;
113 bottom: 0; 113 bottom: 0;
114 - z-index: 1; 114 + z-index: 9999;
115 } 115 }
116 .dialog-div-content{ 116 .dialog-div-content{
117 /* display: flex; 117 /* display: flex;
@@ -112,6 +112,16 @@ export default { @@ -112,6 +112,16 @@ export default {
112 i 112 i
113 ].sampleItem; 113 ].sampleItem;
114 } 114 }
  115 + let locationUrl=this.$route.query;
  116 + for(let key in contextData){
  117 + for(let urlKey in locationUrl){
  118 + if(key==urlKey){
  119 + contextData[key]=locationUrl[urlKey]+''
  120 + }
  121 + }
  122 + }
  123 + console.log("this.contextData",contextData,this.userNameList)
  124 +
115 const params = { 125 const params = {
116 chartType: this.chartType, 126 chartType: this.chartType,
117 setCode: this.setCode, 127 setCode: this.setCode,
@@ -56,7 +56,7 @@ export const monitorTablePage = { @@ -56,7 +56,7 @@ export const monitorTablePage = {
56 name: 'vis', 56 name: 'vis',
57 required: false, 57 required: false,
58 placeholder: '', 58 placeholder: '',
59 - value: '10' 59 + value: 10
60 }, 60 },
61 { 61 {
62 type: 'el-input-number', 62 type: 'el-input-number',
@@ -2,6 +2,10 @@ @@ -2,6 +2,10 @@
2 <div :style="styleObj"> 2 <div :style="styleObj">
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>
  7 + <span class="title-link" @click="downloadTableList">下载</span>
  8 + </div>
5 </div> 9 </div>
6 <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle"> 10 <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
7 <!--表头--> 11 <!--表头-->
@@ -31,7 +35,7 @@ @@ -31,7 +35,7 @@
31 <span v-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='1'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >一般</span> 35 <span v-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='1'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >一般</span>
32 <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='2'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >重要</span> 36 <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='2'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >重要</span>
33 <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='3'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >严重</span> 37 <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='3'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >严重</span>
34 - <span v-else>{{ item[itemChild.key] }}</span> 38 + <span v-else :class="{'spanLink':itemChild.key=='resTypeName'}" @click="goTrend(item,itemChild.key)">{{ item[itemChild.key] }}</span>
35 </el-tooltip> 39 </el-tooltip>
36 40
37 </div> 41 </div>
@@ -53,11 +57,72 @@ @@ -53,11 +57,72 @@
53 :total="total"> 57 :total="total">
54 </el-pagination> 58 </el-pagination>
55 </div> 59 </div>
  60 + <!-- 更多弹框-->
  61 + <customDialog :dialogVisible="tableVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :title-name="tableStyle.tableName"
  62 + @hideDialog="hideDialogTable" @okFunc="okFuncTable"
  63 + >
  64 + <template v-slot>
  65 + <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
  66 + <!--表头-->
  67 + <div class="title">
  68 + <div
  69 + v-for="(item, index) in header"
  70 + :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
  71 + :key="index"
  72 + >
  73 + {{ item.name }}
  74 + </div>
  75 + </div>
  76 + <!--数据-->
  77 + <div class="bd" v-loading="loadingAll">
  78 + <ul class="infoList">
  79 + <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" >
  80 + <div
  81 + class="text-overflow"
  82 + v-for="(itemChild, idx) in header"
  83 + :key="idx"
  84 + :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
  85 + >
  86 + <el-tooltip ref="elTooltip" trigger="hover" >
  87 + <template #content>
  88 + <span>{{ item[itemChild.key] }}</span>
  89 + </template>
  90 + <span v-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='1'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >一般</span>
  91 + <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='2'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >重要</span>
  92 + <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='3'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >严重</span>
  93 + <span v-else :class="{'spanLink':itemChild.key=='resTypeName'}" @click="goTrend(item,itemChild.key)">{{ item[itemChild.key] }}</span>
  94 + </el-tooltip>
  95 +
  96 + </div>
  97 + </li>
  98 + </ul>
  99 + </div>
  100 + </superslide>
  101 + <!-- 分页 -->
  102 + <div class="pageClass" v-if="optionsSetUp.isPage && !optionsSetUp.isRoll" style='text-align: left;background-color: white'>
  103 + <el-pagination
  104 + v-if="currentPage"
  105 + @size-change="handleSizeChange"
  106 + @prev-click="prePage"
  107 + @next-click="nextPage"
  108 + @current-change="handleCurrentChange"
  109 + :current-page="currentPage"
  110 + :page-sizes="pageSizes"
  111 + :page-size="pageSize"
  112 + :total="totalAll">
  113 + </el-pagination>
  114 + </div>
  115 + </template>
  116 + </customDialog>
56 </div> 117 </div>
57 </template> 118 </template>
58 <script> 119 <script>
59 import vue from "vue"; 120 import vue from "vue";
60 import VueSuperSlide from "vue-superslide"; 121 import VueSuperSlide from "vue-superslide";
  122 +import customDialog from "../../designerComponents/customDialog";
  123 +import customMenuBox from "../../designerComponents/customMenuBox";
  124 +import textToImage from "../../designerComponents/textToImage";
  125 +import textToBg from "../../designerComponents/textToBg";
61 126
62 vue.use(VueSuperSlide); 127 vue.use(VueSuperSlide);
63 export default { 128 export default {
@@ -65,13 +130,21 @@ export default { @@ -65,13 +130,21 @@ export default {
65 value: Object, 130 value: Object,
66 ispreview: Boolean 131 ispreview: Boolean
67 }, 132 },
  133 + components:{
  134 + customDialog
  135 + },
68 data() { 136 data() {
69 return { 137 return {
  138 + tableVisible:false,//更多表格弹框
  139 + marginStyle:'',//弹框距离顶部距离
  140 + heightStyle:'',//弹框遮罩层高度
70 loading:true, 141 loading:true,
  142 + loadingAll:true,//更多表格加载中
71 currentPage:1, 143 currentPage:1,
72 pageSize:10, 144 pageSize:10,
73 pageSizes:[10,50,100, 200, 300, 400], 145 pageSizes:[10,50,100, 200, 300, 400],
74 - total:20, 146 + total:0,
  147 + totalAll:0,
75 hackReset: true, 148 hackReset: true,
76 options: { 149 options: {
77 titCell: ".hd ul", 150 titCell: ".hd ul",
@@ -85,6 +158,7 @@ export default { @@ -85,6 +158,7 @@ export default {
85 }, 158 },
86 header: [], 159 header: [],
87 list: [], 160 list: [],
  161 + listAll: [],
88 optionsSetUp: {}, 162 optionsSetUp: {},
89 optionsPosition: {}, 163 optionsPosition: {},
90 optionsData: {} 164 optionsData: {}
@@ -169,10 +243,11 @@ export default { @@ -169,10 +243,11 @@ export default {
169 this.handlerHead(); 243 this.handlerHead();
170 this.handlerData(); 244 this.handlerData();
171 this.visConfig(); 245 this.visConfig();
  246 + window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
172 }, 247 },
173 - visConfig(){ 248 + visConfig() {
174 this.options.vis = this.optionsSetUp.vis; 249 this.options.vis = this.optionsSetUp.vis;
175 - this.pageSize=this.options.vis; 250 + this.pageSize = this.options.vis;
176 this.handleTableData(); 251 this.handleTableData();
177 252
178 }, 253 },
@@ -199,7 +274,8 @@ export default { @@ -199,7 +274,8 @@ export default {
199 }, 274 },
200 handlerStaticData(data) { 275 handlerStaticData(data) {
201 this.list = data; 276 this.list = data;
202 - this.loading=false; 277 + this.listAll=data;
  278 + this.loading = false;
203 }, 279 },
204 handlerDynamicData(data, refreshTime) { 280 handlerDynamicData(data, refreshTime) {
205 if (!data) return; 281 if (!data) return;
@@ -215,11 +291,24 @@ export default { @@ -215,11 +291,24 @@ export default {
215 getEchartData(val) { 291 getEchartData(val) {
216 const data = this.queryEchartsData(val); 292 const data = this.queryEchartsData(val);
217 data.then(res => { 293 data.then(res => {
218 - this.list = res;  
219 - this.loading=false;  
220 - if(this.list && this.list.length>0){  
221 - this.total=this.list[0].lineCount; 294 + if(this.optionsData.dynamicData.contextData.isMore){
  295 + console.log("all")
  296 + this.listAll=res;
  297 + this.loadingAll = false;
  298 + if (this.listAll && this.listAll.length > 0) {
  299 + this.totalAll = this.listAll[0].lineCount;
  300 + }
  301 + }else{
  302 + console.log("111")
  303 +
  304 + this.list = res;
  305 + this.loading = false;
  306 + if (this.list && this.list.length > 0) {
  307 + this.total = this.list[0].lineCount;
  308 + }
222 } 309 }
  310 +
  311 +
223 this.hackResetFun(); 312 this.hackResetFun();
224 }); 313 });
225 }, 314 },
@@ -240,26 +329,26 @@ export default { @@ -240,26 +329,26 @@ export default {
240 } 329 }
241 return styleJson; 330 return styleJson;
242 }, 331 },
243 - tableRowHeight(){ 332 + tableRowHeight() {
244 var styleJson = {}; 333 var styleJson = {};
245 - if(this.optionsSetUp.rowHeight){  
246 - styleJson['height'] = this.optionsSetUp.rowHeight+'px';  
247 - styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';  
248 - }else{  
249 - styleJson['height'] =this.options.rowHeight  
250 - styleJson['line-height'] = this.optionsSetUp.rowHeight+'px'; 334 + if (this.optionsSetUp.rowHeight) {
  335 + styleJson['height'] = this.optionsSetUp.rowHeight + 'px';
  336 + styleJson['line-height'] = this.optionsSetUp.rowHeight + 'px';
  337 + } else {
  338 + styleJson['height'] = this.options.rowHeight
  339 + styleJson['line-height'] = this.optionsSetUp.rowHeight + 'px';
251 } 340 }
252 return styleJson; 341 return styleJson;
253 }, 342 },
254 - tableFiledWidth(index){ 343 + tableFiledWidth(index) {
255 var styleJson = {}; 344 var styleJson = {};
256 - if(this.optionsSetUp.dynamicAddTable[index].width ){ 345 + if (this.optionsSetUp.dynamicAddTable[index].width) {
257 styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width 346 styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
258 } 347 }
259 return styleJson 348 return styleJson
260 }, 349 },
261 // 每页展示多少条 350 // 每页展示多少条
262 - handleSizeChange(val){ 351 + handleSizeChange(val) {
263 // 切换页码重置初始页 352 // 切换页码重置初始页
264 this.currentPage = 1 353 this.currentPage = 1
265 //props.pageSize = val; 354 //props.pageSize = val;
@@ -268,11 +357,9 @@ export default { @@ -268,11 +357,9 @@ export default {
268 }, 357 },
269 358
270 // 切换页码 359 // 切换页码
271 - handleCurrentChange(val){ 360 + handleCurrentChange(val) {
272 //props.currentPage = val; 361 //props.currentPage = val;
273 this.currentPage = val; 362 this.currentPage = val;
274 - console.log("aaaaaaaaaaaaaa",val)  
275 -  
276 this.handleTableData(); 363 this.handleTableData();
277 }, 364 },
278 // 切换页码 365 // 切换页码
@@ -283,24 +370,149 @@ export default { @@ -283,24 +370,149 @@ export default {
283 }, 370 },
284 371
285 // 切换页码 372 // 切换页码
286 - nextPage(val){ 373 + nextPage(val) {
287 // props.currentPage = val + 1; 374 // props.currentPage = val + 1;
288 this.currentPage = val; 375 this.currentPage = val;
289 this.handleTableData(); 376 this.handleTableData();
290 }, 377 },
291 //分页获取表格数据 378 //分页获取表格数据
292 - handleTableData(){  
293 - let optionsData=this.optionsData;  
294 - if(this.optionsData.dataType=="dynamicData" && this.optionsSetUp.isPage){  
295 - this.loading=true;  
296 - let limit=parseInt(this.optionsData.dynamicData.contextData.limit);  
297 - let page=parseInt(this.currentPage-1)*limit; 379 + handleTableData() {
  380 + let optionsData = this.optionsData;
  381 + if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isPage) {
  382 + this.loading = true;
  383 + let limit = parseInt(this.optionsData.dynamicData.contextData.limit);
  384 + let page = parseInt(this.currentPage - 1) * limit;
298 //改变参数值-月季度年，重新加载动态数据--待测 385 //改变参数值-月季度年，重新加载动态数据--待测
299 - this.optionsData.dynamicData.contextData.page=page;  
300 - this.optionsData.dynamicData.contextData.limit=this.options.vis;  
301 - // this.initData();  
302 - this.handlerData(); 386 + this.optionsData.dynamicData.contextData.page = page;
  387 + this.optionsData.dynamicData.contextData.limit = this.options.vis;
  388 + // this.handlerData();
  389 + }
  390 + },
  391 + handleScroll(e){
  392 + let serviceTop = 44;
  393 +
  394 + let hotelTop = 344;
  395 +
  396 + if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {
  397 +
  398 + this.selectNum = 0;
  399 + }
  400 +
  401 + if (e.target.scrollTop > 344) {
  402 +
  403 + this.selectNum = 1;
  404 +
  405 + }
  406 + let scrollHeight=e.target.documentElement.scrollTop;
  407 +
  408 + if (self != top) {
  409 + //嵌入到监控系统iframe中弹框位置样式
  410 + if(scrollHeight<600){
  411 + // this.marginStyle+="margin-top:"+(110)+'px;';
  412 +
  413 + }else{
  414 + // this.marginStyle+="margin-top:"+(230)+'px;';
  415 +
  416 + }
  417 + this.marginStyle+="top:"+(scrollHeight+60)+'px;';
  418 +
  419 + }else{
  420 + //ajreport中弹框位置样式
  421 + this.marginStyle+="top:"+(scrollHeight)+'px;';
303 } 422 }
  423 + },
  424 + //打开详情页
  425 + goTrend(item, itemChildKey) {
  426 + if (itemChildKey == 'resTypeName') {
  427 + let param = {
  428 + type:'detail',
  429 + data:{
  430 + resId: item.resId,
  431 + resType: item.resType
  432 + }
  433 +
  434 + }
  435 + window.parent.postMessage(param, '*')
  436 + }
  437 + },
  438 + //更多
  439 + handlerDetailDataNoPage(){
  440 + this.widthStyle='';
  441 + this.tableVisible=true;
  442 + let optionsData = this.optionsData;
  443 + if (this.optionsData.dataType == "dynamicData" ) {
  444 + this.loadingAll= true;
  445 + let limit = 30;
  446 + let page = parseInt(this.currentPage - 1) * limit;
  447 + //改变参数值-月季度年，重新加载动态数据--待测
  448 + console.log("&&&&&&&&&",page,limit)
  449 + this.optionsData.dynamicData.contextData.page = page;
  450 + this.optionsData.dynamicData.contextData.limit = 30;
  451 + this.optionsData.dynamicData.contextData.isMore = true;
  452 + // this.handlerData();
  453 + }
  454 + },
  455 + //更多弹框关闭确定
  456 + hideDialogTable(){
  457 + this.tableVisible=false;
  458 + this.loading=false;
  459 + this.loadingAll=false;
  460 + },
  461 + okFuncTable(){
  462 + this.tableVisible=false;
  463 +
  464 + },
  465 + downloadFile(url, params) { // 下载文件
  466 + const newUrl = params ? this.build(url, params) : url
  467 + axios.get(newUrl, { responseType: 'blob' }).then(resp => {
  468 + let headers = resp.headers;
  469 + let contentType = headers['content-type'];
  470 + if (!resp.data) {
  471 + return false;
  472 + } else {
  473 + const blob = new Blob([resp.data], { type: contentType });
  474 + const contentDisposition = resp.headers['content-disposition'];
  475 + let fileName = 'unknown';
  476 + if (contentDisposition) {
  477 + fileName = window.decodeURI(resp.headers['content-disposition'].split('=')[1]);
  478 + }
  479 + this.downFile(blob, fileName);
  480 + }
  481 + }).catch(function (error) {
  482 + console.log(error);
  483 + });
  484 + },
  485 + downFile(blob, fileName) {
  486 + // 非IE下载
  487 + if ('download' in document.createElement('a')) {
  488 + let link = document.createElement('a');
  489 + link.href = window.URL.createObjectURL(blob); // 创建下载的链接
  490 + link.download = fileName; // 下载后文件名
  491 + link.style.display = 'none';
  492 + document.body.appendChild(link);
  493 + link.click(); // 点击下载
  494 + window.URL.revokeObjectURL(link.href); // 释放掉blob对象
  495 + document.body.removeChild(link); // 下载完成移除元素
  496 + } else {
  497 + // IE10+下载
  498 + window.navigator.msSaveBlob(blob, fileName);
  499 + }
  500 + },
  501 + build(url, params) { // URL构建方法
  502 + const ps = []
  503 + if (params) {
  504 + for (let p in params) {
  505 + if (p) {
  506 + ps.push(p + '=' + encodeURIComponent(params[p]));
  507 + }
  508 + }
  509 + }
  510 +
  511 + return url + '?' + ps.join('&');
  512 + },
  513 + //下载
  514 + downloadTableList(){
  515 +
304 } 516 }
305 } 517 }
306 }; 518 };
@@ -360,6 +572,11 @@ export default { @@ -360,6 +572,11 @@ export default {
360 .table-level-worst { 572 .table-level-worst {
361 background-color: #D81E06; 573 background-color: #D81E06;
362 } 574 }
  575 +.spanLink{
  576 + color:#1E9FFF;
  577 + text-decoration: underline;
  578 + cursor: pointer;
  579 +}
363 .text-overflow{ 580 .text-overflow{
364 white-space:nowrap; 581 white-space:nowrap;
365 overflow:hidden; 582 overflow:hidden;
@@ -379,4 +596,9 @@ export default { @@ -379,4 +596,9 @@ export default {
379 .txtScroll-top .infoList li:nth-child(2n) { 596 .txtScroll-top .infoList li:nth-child(2n) {
380 background: rgb(10, 39, 50); 597 background: rgb(10, 39, 50);
381 }*/ 598 }*/
  599 +.title-flex-between{
  600 + display: flex;
  601 + justify-content: space-between;
  602 +
  603 +}
382 </style> 604 </style>