QuickBi 前后端实现动态接收参数展示页面

最新推荐文章于 2024-01-31 12:33:13 发布

Dasher jensen

最新推荐文章于 2024-01-31 12:33:13 发布

阅读量549

点赞数 1

分类专栏：项目实用技术文章标签： servlet

本文链接：https://blog.csdn.net/unstoppableyi/article/details/130820967

版权

项目实用技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端页面代码，其中关键参数为pageId和ticket; pageId可以前端菜单配置传输，而ticket则需要后端代码生成；

前端代码

代码运行环境是vue3，visual studio code编辑器；


<template>
    <div class="quickHeight">
      <iframe class="quickbi-iframe-demo"
        :src="`https://qbi.sgss.com.cn/dashboard/view/pc.htm?pageId=${pageId}&accessTicket=${ticket}`" scrolling="no"
        frameborder="0" width="100%" :height="heightData"></iframe>
    </div>
  </template>
  <script>
  
  import { getQuickbiticket } from "@/api/ext/dataQBi";
  
  
  export default {
    data() {
      return {
        iframe: null,
        ticket: "",
        pageId: "",
        heightData: 600,
      };
    },
    computed: {
    },
    created() {
      this.pageId = this.$route.params.pageId
      this.getTicket(this.pageId);
    },
    mounted() {
      // 在仪表板加载之前进行监听
      window.addEventListener('message', this.messageListener);
      this.iframe = document.querySelector('iframe');
    },
    beforeDestroy() {
      window.removeEventListener('message', this.messageListener, false)
    },
    methods: {
      // 请求quickbi ticket
      getTicket(pageId) {
        getQuickbiticket(pageId).then(res => {
          this.ticket = res.data;
        });
      },
    }
  };
  </script>
   
  <style lang="scss" scoped>
  </style>

前端调用后端api，生成ticket返回页面；

import request from '@/axios';

export const getQuickbiticket = (pageId) => {
  return request({
    url: '/system/dataQBi/getTicket',
    method: 'get',
    params: {
        pageId
      }
  })
}

后端代码

idea软件，java8环境；

@RestController
@AllArgsConstructor
@RequestMapping("/dataQBi")
public class DataQBiController extends BladeController {

	@GetMapping("/getTicket")
	@ApiOperationSupport(order = 1)
	@ApiOperation(value = "报表id", notes = "传入pageId")
	public String getTicket (@RequestParam(value = "pageId", defaultValue = "") String pageId)  {
		String ticket = "";
		String account =  String.valueOf(getUser().getAccount());

		try{
			ticket = QuickBiUtils.generateTicket(pageId,account);
		}catch (SDKException e){
			e.printStackTrace();
		}
		return ticket;
	}

}

具体参数api 自己套用自己公司的；

public class QuickBiUtils {

	private static IOpenAPIClient openAPIClient = HttpClientFactory.buildDefaultClient(
		"https://xxx.com.cn", "asf-123asf", "as-123-safweq", true);

	public static String generateTicket(String worksId ,String accountName)throws SDKException {
		HttpRequest request = null;
		String result = "";
		request = HttpRequest.build()
			.setUri("/openapi/v2/embed/ticket/create")
			.setMethod(HttpMethod.POST);
		request.addParameter("worksId", worksId);
		if (!StringUtils.equals(accountName,"admin")) {
			request.addParameter("accountName", accountName);
		}

		request.addParameter("accountType", "3");
		request.addParameter("ticketNum", 1);//ticket 的票据数量，默认为 1。建议为 1。
		request.setHttpContentType(FormatType.FORM);
		result = openAPIClient.syncExecute(request);
		return result;
	}
}