鼎捷TIPTOP 看板系统设计案例详解

Wninacc

已于 2024-08-08 16:10:21 修改

阅读量736

点赞数 13

文章标签： visual studio eclipse html5 bootstrap react.js vue.js node.js

于 2024-08-05 16:08:42 首次发布

本文链接：https://blog.csdn.net/jkdfhksjdf/article/details/140927958

版权

《打造企业数字化管理，构建企业级Web平台最佳实践案例》

1.引言

鼎捷TIPTOP ERP系统在企业资源管理中扮演着至关重要的角色。本文将介绍如何设计和实现一个基于鼎捷TIPTOP ERP的看板系统，以方便仓库及生产现场的及时数据展示及实现数字化、目视化的管理要求，同时满足客户对生产及仓库现场审核的要求并提升企业信息化良好印象；

重点实现以下功能：

定时从TIPTOP-ERP获取仓库库存、生产工单等数据；
实现无闪屏的自动滑动翻页功能。

大家跟随文章详细步骤与指南，零基础手把手即可实现搭建鼎捷TIPTOP看板系统项目功能；

2.项目概述

为了提高生产管理的效率，我们设计了一个看板系统，该系统可以实时展示库存信息、生产进度等关键数据。其主要功能包括定时数据获取和页面自动滑动显示，确保用户能够现场流畅滚动的浏览和查看TIPTOP系统的最新及时数据。

整体项目效果展示：

前端框架：Metronic_Bootstrap框架
后端：TIPTOP系统/Oracle

3.TIPTOP看板系统框架介绍

3.1 Metronic-全球销量第一的强大响应式后台管理模板

Metronic是一款集成了HTML Bootstrap 4/5多种前端框架和技术栈的综合型后台管理框架。它适用于多种编程语言和框架，该模版自推出以来，已经取得了超过100万次的惊人销量，成为全球最畅销主流的HTML管理后台Web框架；

官方的地址：https://keenthemes.com/metronic

3.2 技术分析：

基于Bootstrap： Metronic 基于Bootstrap 4构建，这意味着它拥有一套完整的UI组件，包括导航栏、按钮、表单、模态框等，这些组件都是响应式的，能在各种设备上无缝工作。
RTL支持： 支持右至左（RTL）布局，对于阿拉伯语、希伯来语等语言的网站开发尤其有用，使国际化应用更易实现。
Vue.js & React适配： Metronic不仅支持原生HTML/CSS/JS，还提供了Vue.js和React版本，满足现代前后端分离的应用需求。
主题与皮肤： 提供多种预设的主题和颜色方案，让开发者可以根据品牌或个人喜好轻松定制界面风格。
高质量代码： 代码结构清晰，遵循最佳实践，易于维护和扩展。
丰富的示例： 提供了大量的实际应用场景示例，如仪表盘、电子商务页面、博客、CRM系统等，帮助开发者快速理解和启动新项目。

3.3 应用场景：

企业级Web应用开发
CRM、ERP系统的前端界面
多语言支持的国际站点
高度可定制化的电子商务平台
数据可视化 dashboard 设计
移动优先的响应式设计

自适配PC、移动端IPAD、手机端各种使用场景

4. 开发环境准备：

1.下载并安装Visual Studio Code

2.安装 .NET SDK

确保您的系统已经安装了 .NET SDK。如果没有，请访问 Microsoft .NET 下载并安装。

3.下载并解压提供的源码；点击下载源码

项目程序导入步骤：

a.打开Visual Studio 2019（以管理员身份）
b.点击“继续但无需代码（W）”

c.点击菜单栏“文件--》打开---》网站”方式进行导入TIPTOP_BI项目源代码

d.点击确认即可导入完成；

以上导出项目源码完成后，打开admin目录下的index_html，进入WEB网站的主页面代码程序

e.在打开index_html代码的情况下，ctrl+F5 编译运行系统，将会直接编译运行整个项目；

系统提示编译成功，接着网站就可以进行本地正常访问了，伙伴们是不是很简单。
本地访问地址：http://localhost:端口号/theme/templates/admin/index.html
PS:正常情况下ctrl+F5 编译程序后，系统会自动打开浏览器进行看板系统主页访问显示；

您可以通过以下目录的logo修改为本公司的logo

自此整个项目就已经正常的运行起来了

接下来，我们将会在该TIPTOP-BI的看板框架里面增加一个仓库物流库存看板进行数据的刷新及显示功能页面；

5. 功能实现

5.1 定时从TIPTOP-ERP获取数据

目标：确保看板系统能够实时更新数据，提供最新的即时库存看板信息。

页面代码：table_managed.html

程序代码实现的详细指南：

数据获取过程：

通过Oracle.ManagedDataAccess 是一个 .NET 库，从TIPTOP-ERP数据库进行连接并定时获取数据。

在Web.config文件配置您即将连接的TIPTOP-ERP数据库信息：

<add name="OracleConnectionString" connectionString="User Id=角色;Password=密码;
Data Source=(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=数据库IP)(PORT=端口号)))(CONNECT_DATA=(SERVICE_NAME=数据库服务名称)))" />

创建一个新的ASP.NET Ajax接口程序来处理数据库的连接及获取：

数据库视图创建：

create or replace view bimg_file_vw as
select A.img01,ima02,ima021,A.img09,(select sum(B.img10) from img_file B WHERE B.img01=A.img01 and B.img10>0 AND B.img02='400') as img10t,ima27,ima271,ima271-ima27 as cy,
ima71,A.img02,A.img03,A.img04,A.img10 from img_file A  left join ima_file on A.img01=ima01
where A.img02='400' and A.img10>0  ORDER BY A.img01,A.img02,A.img03,A.img04;

这样我们就可以在前端库存展示页面index_html来通过这个Ajax请求接口程序查询库存的数据了

数据展示实现过程：

前端展示页面index_html是通过initTable1()函数加载及定时刷新实现

function initTable1() {
        var table = $('#sample_1');
        table.dataTable().fnDestroy(); //销毁
        var dataSet = {};

            $.ajax({
                type: "GET",
                url: '/ajax.aspx',
                async:false,//是否异步 否则外部访问不到dataSet的值
                //dataType: "xml",            
                data:{
                        "Organization":'DGC'
                        ,"username":'cheny'
                        ,"type":'A'
                        },    //请求参数    
                beforeSend: function(){
                    //$.showLoading('查询中......');
                },  
                success: function (xml) {
                    console.log(xml);
                    // console.log('hello2');
                    //$.hideLoading();
                    if($(xml).find("Status").attr('code')=='-1'){
                        //document.getElementById("itcount").innerHTML = 'loading';
                        console.log('result error');

                    }else{
                        let Ajson=ErpXmlToJson(xml);
                        //console.log(Ajson);
                        if (Ajson.code == "0") {
                           dataSet=Ajson.list;               
                           //for ( var i=0, ien=dataSet.length ; i<ien ; i++ ) {
                                //dataSet[i]['id'] = i+1;
                           //}
                           console.log(dataSet);
                        }
                         console.log('result error2');
                    }
                } 
            });

通过以上获取到的数据填充至sample_1的表格控件进行渲染展示；