基于Jeecg-boot前后端分离的flowable流程管理平台主页调整

更多功能看演示系统

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://122.227.135.243:9888
 

      主页原先用默认的jeecg-boot带的主页，这里我们做一个调整，相关统计sql前面文章已经讲了，这里讲如何修改：

1、建立几个在线报表

 相关sql语句看前面的文章

2、调用在线报表

这个官方提供的

 上面这个地址在实际调用是不能用的，需要进行修改，比如上面需要调整为：

/online/cgreport/api/getColumnsAndData/1661271700409794562

其它就类似也要做调整。

主要调用方法如下：

data() {
      return {
        tasktotal: {
          url: '/online/cgreport/api/getColumnsAndData/1661243615517978626',
          loading: false,
          dataSource: [],
        },
        flowtotal: {
          url: '/online/cgreport/api/getColumnsAndData/1661247259512520705',
          loading: false,
          dataSource: [],
        },
        taskmonth: {
          url: '/online/cgreport/api/getColumnsAndData/1661271436906840066',
          loading: false,
          dataSource: [],
        },
        flowmonth: {
          url: '/online/cgreport/api/getColumnsAndData/1661271700409794562',
          loading: false,
          dataSource: [],
        },
        loading: true,
        center: null,
        rankList,
        barData,
        loginfo:{},
        visitFields:['ip','visit'],
        visitInfo:[],
        indicator: 
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.loadData(this.tasktotal);
      this.loadData(this.flowtotal);
      this.loadData(this.taskmonth);
      this.loadData(this.flowmonth);
      this.initLogInfo();
    },
    methods: {
      loadData(data) {
        data.loading = true;
        this.$http.get(data.url)
          .then(res => data.dataSource =  res.result.data.records)
          .finally(() => data.loading = false);
        console.log("loadData data=",data);  
      },

3、主页的完整代码如下：

4、效果图如下：