1. 概述

门户设计使用平台的页面设计功能进行设计。页面设计可以将图表 ,平台列表,门户栏目集成到一起。

门户设计界面

2. 平台使用的技术

2.1 前端技术

前端使用VUE开发,使用拖拽组件进行设计

2.2 后端

使用SPRING CLOUD ALIBABA 微服务技术实现。

3. 栏目集成

栏目类型包括以下几种。

3.1. VUE组件

用户可以直接通过代码进行开发,开发一个VUE组件,即可挂载到门户。

3.2. 列表

列表这个栏目定义可以灵活的渲染任何页面,他的设计是,通过数据获取方法返回数据,栏目模板进行渲染。

栏目模板支持VUE的语法,获取数据返回的数据,在模板中为 data,用户可以通过这个data 来编写模板。

  • 获取数据的方法

目前提供两种方法,之后可以通过接口直接配置第三方接口进行实施。

1.通过脚本编写

以获取第三方的待办为例

我们在 PortalScript 中编写代码如下:

public JSONObject getMyTo() throws Exception {
        String url= SysPropertiesUtil.getString("getMyToUrl");
        String json= HttpClientUtil.getFromUrl(url,null);
        JSONObject jsonObj=JSONObject.parseObject(json);
        return jsonObj;
    }

2.自定义SQL

在平台配置一个自定义查询进行获取数据。

  • 模板的编写
<div class="bodyDivClass">
        <ul>
            <li class="itmelist" v-for="(item,index) of data" :key="item.pkId" >
                  <p>{{item.GSMC}}</p>
                <span>{{item.GJR_NAME}}</span>
            </li>
        </ul>
    </div>

这个data代表配置的方法或SQL返回的数据,如果返回的为如下的格式 {list:[{{name:''}}]} ,在模板中可以如下编写 data.list.

3.3 消息盒子

这里消息盒子是通过消息项目进行配置的,是平台提供的固定的功能,作用是显示当前用户有哪些相关数据,比如多少个待办,多少已办等一些统计性的信息。

3.4 TAB标签页

TAB标签页是可以将平台的栏目使用TAB的方式进行展现。

3.5 新闻公告

新闻公告是平台提供的固定栏目。

新闻栏目也是后端返回数据,前端使用模板进行渲染,只不过这个获取数据的方法是平台默认提供好的。

3.6 日程

日程也是提供的固定栏目。日程数据用户可以通过接口进行获取,返回一定标准的数据,这个可以将当前人不同日程的数据进行抽取。

获取数据接口为:

public interface CalendarDataService {

    /**
     * 获取当前选择月分/日期的数据。
     *  查询参数:{
     *         calendarMode: 查询类型:月 year  天:month
     *         calendarValue:查询的月份或者日期2020-05/2020-05-18
     *      }
     *
     *  返回结果 :[
     *     {
     *    index:0,
     *    day:日期 2020-05-19
     *    startTime:开始时间 08:30
     *    title:标题
     *       describe:描述
     *       ******自定义返回参数
     *      }
     * ]
     *
     * @return
     */
    List<CalendarData> getMonthOrDayData(String calendarMode, String calendarValue);

3.7 图表组件

这个可以在线通过简单配置形成图形,图形之间可以进行联动。

图形支持:

3.8 报表组件

在平台中可以集成Ureport ,并可以列表表单进行联动。

文档更新时间: 2021-06-24 15:21   作者:zyg