odoo 仪表盘 大屏设计模块cus_dashboard支持odoo16 15 14 13 12

主要实现js代码

odoo.define('odoo_cus_dashboard.Dashboard', function (require) {
"use strict";

var AbstractAction = require('web.AbstractAction');
var ajax = require('web.ajax');
var core = require('web.core');
var rpc = require('web.rpc');
var session = require('web.session');
var web_client = require('web.web_client');
var _t = core._t;
var QWeb = core.qweb;

var DynamicDashboard = AbstractAction.extend({
    template: 'dynamic',
    events: {
         'click .add_block': '_onClick_add_block',
         'click .add_grapgh': '_onClick_add_grapgh',
         'click .block_setting': '_onClick_block_setting',
         'click .tile': '_onClick_tile',
    },

    init: function(parent, context) {
        this.action_id = context['id'];
        this._super(parent, context);
        this.block_ids = []
    },

    start: function() {
        var self = this;
        this.set("title", 'Dashboard');

        return this._super().then(function() {
            self.render_dashboards();
        });
    },

    willStart: function() {
        var self = this;
        return $.when(this._super()).then(function() {
             return self.fetch_data();
        });
    },

     fetch_data: function() {
        var self = this;
        var def1 =  this._rpc({
                model: 'dashboard.block',
                method: 'get_dashboard_vals',
                args: [[],this.action_id]
            }).then(function(result) {
                self.block_ids = result;
        });
        return $.when(def1);
    },

    get_colors : function(x_axis) {
        var color = [];
        for (var j = 0; j < x_axis.length; j++) {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            color.push("rgb(" + r + "," + g + "," + b + ")");
         }
         return color
    },

    render_dashboards: function() {
        var self = this;
        _.each(this.block_ids, function(block) {
                if (block['type'] == 'tile') {
                    self.$('.o_dynamic_dashboard').append(QWeb.render('DynamicDashboardTile', {widget: block}));
                }
                else {
                    self.$('.o_dynamic_chart').append(QWeb.render('DynamicDashboardChart', {widget: block}));
                    var element = $('[data-id=' + block['id'] + ']')
                    if (!('x_axis' in block)){
                        return false
                    }
                    var ctx =self.$('.chart_graphs').last()
                    var type = block['graph_type']
                    var chart_type = 'self.get_values_' + `${type}(block)`
                    var data = eval(chart_type)
                  var chart = new Chart(ctx, {
                    type: type,
                    data: data[0],
                    options: data[1]
                  });
                }
        });
    },

    _onClick_block_setting : function(event){
        event.stopPropagation();
        var self = this;
        var id = $(event.currentTarget).closest('.block').attr('data-id');
        this.do_action({
            type: 'ir.actions.act_window',
            res_model: 'dashboard.block',
            view_mode: 'form',
            res_id: parseInt(id),
            views: [[false,'form']],
            context: {'form_view_initial_mode': 'edit'},
        });
core.action_registry.add('dynamic', DynamicDashboard);

return DynamicDashboard;

});
 

使用说明

1.  自定义仪表盘展示 示例，这里是odoo16版本页面例子，支持柱状图，折线图，雷达图，圆环图，饼图，支持文本区块自定义

2. 设置新的区块 

3. 设置新的图表 

4. 设置区块 参数  

5.  设置图表参数 

6. 创建的图表和区块列表 

7.添加一个新菜单 到已存在的菜单下，可以把图表链接到任何菜单下面 

8.在当前页面自定义创作 仪表数据

下载地址

odoo 仪表盘 大屏设计模块cus_dashboard支持odoo16 15 14 13 12，支持柱状图，折线图，雷达图，圆环图，饼图，支持文本区块自定义，数据源自定义，显示样式定义