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;

});

使用说明

自定义仪表盘展示示例，这里是odoo16版本页面例子，支持柱状图，折线图，雷达图，圆环图，饼图，支持文本区块自定义
设置新的区块
设置新的图表
设置区块参数
设置图表参数
创建的图表和区块列表

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

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

下载地址

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

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

SpringReport--使用luckysheet+echarts开发的在线报表和大屏设计系统
SpringReport是一个集报表设计与大屏设计于一体的可视化报表大屏工具,致力于打造一款方便快捷易于上手支持多数据源的web报表设计和大屏设计工具. 支持功能主要有: 1.支持用户角色权限管理 2 ...
可视化大数据大屏设计
可视化大数据大屏设计一.如何做好一款大屏 1.1工具的选择帆软报表工具Finereport 1.2大屏设计通用的大屏设计原则 1.大屏指标在8-12个为宜 2.比率类.数字类和子部分布类指标要合 ...
大屏设计的视觉统一_视觉设计中的统一
大屏设计的视觉统一视觉设计的统一性是什么? (What is unity in visual design?) The concept of unity in visual design means ...
可视化大屏设计尺寸_可视化大屏设计_酷炫不是最高效的大屏展示的唯一标准...
目前市面上有众多做大屏的可视化BI工具,有的部分企业为了要实现其功能效果而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂,从而实现对于相当复杂而又冗余数据的深入分析,让企业决策者难以理解数据 ...
可视化大屏设计_最高效的大屏展示不只是酷炫
目前市面上有众多做大屏的可视化BI工具,有的部分企业为了要实现其功能效果而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂,从而实现对于相当复杂而又冗余数据的深入分析,让企业决策者难以理解数据 ...
11.11数据可视化大屏设计揭秘
万众期待的京东11.11全球热爱季落下帷幕,巅峰狂欢中,多少人的购物车在这一天成为了GDP野马,创造的商业价值年年翻新,节节拔高,这背后的数据和流量,让消费者和企业更加直观.明确地捕捉到最新的消费风向 ...
大数据可视化大屏设计经验，教给你！
前言大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的 ...
【大屏设计】数据大屏间距那点事-距离产生美
这两张图有什么不同? 图片一 (注:未统计到台湾省数据,上图台湾省颜色为白色) 图片二 (注:未统计到台湾省数据,上图台湾省颜色为白色) 这两张图如果你看不出来有什么区别,那么建议这篇文章可以抽空看一 ...
整理全网最全大屏，可视化大屏，可视化方案，可视化参考，报表，大屏设计，大屏资源，大屏学习，高保真大屏
整理全网最全大屏设计资源,包括各类智慧大屏,axure高保真大屏原型,大屏设计参考思路,大屏设计可视化图片,如何学习设计大屏等. Gitee仓库地址:https://gitee.com/AiShiYu ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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