数据可视化中图表的低无一体

介绍

数据可视化提供了自定义图表模板的功能,以满足现有图表模板无法满足业务需求的情况。

如何使用

  1. 点击数据可视化页面头部的“图表模板”
    image.png
  2. 点击创建按钮后弹出图表模板表单,填写后提交保存
    image.png
  3. 找到刚刚创建的图表模板,点击操作栏中的“低无一体”按钮
    image.png
  4. 点击弹窗底部的“生成sdk”按钮
    image.png
  5. 上一步操作完成后会重新刷新页面,再次找到该条数据,点击“低无一体”按钮,再次进来可以看到“下载模板工程”的按钮已经可以点击了,点击该按钮就可以下载到该自定义图表模板的示例代码包文件kunlun-chart-sdk.zip
    image.png
  6. 解压kunlun-chart-sdk.zip后我们可以看到工程结构,在根目录下执行npm i安装依赖
    image.png
  7. 可以看到packages/kunlun-plugin/src/chart/CUSTOM_BAR.vue是我们自定义的图表vue组件,可以修改里面的自定义展示和逻辑处理
  8. 完成自定义代码后去根目录运行npm run build打包代码,打包后可以在packages/kunlun-plugin/dist下看到打包后的js和css文件(如模板中无css则不会生成css文件,无需理会)
    image.png
  9. 回到自定义图表模板的管理页面,找到对应的数据行,再次点击“低无一体”按钮,在弹窗内上传上一步生成的kunlun-plugin.umd.jskunlun-plugin.css文件,上传完成后点击弹窗底部的“确定”按钮保存
    image.png
  10. 进入图表的编辑页面,在图表分类选择处,可以看到柱状图的分类下有我们新增的“自定义柱状图”的子类,点击切换
    image.png
  11. 切换后可以看到图表已经从开始柱状图变成了我们在前面自定义的蓝色边框样式,内部是hello chart文字的图表。
    image.png

示例自定义图表组件

本例子以echarts的图表库实现柱状图,框架自带的是以G2的库实现的柱状图
demo-echarts-bar.vue

<template>
  <div class="data-designer-chart-instance demo-echarts-bar" ref="designerChartViewRef">
    <div class="data-designer-chart-container" ref="designerChartViewInnerRef"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import DataSet from '@antv/data-set';

import * as echarts from 'echarts/core';
import { ECharts, EChartsCoreOption } from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { deepClone } from '@kunlun/dependencies';
import {
  filterDimensionScaleColumns,
  isSameObj,
  ChartTypeEnum,
  IChartData,
  IChartDataResult,
  chartViewMixin,
  isNeedRerenderChart,
  isShowChatView,
  watchEchartsSize,
  ChartRenderEngine
} from '@kunlun/data-designer-core';

echarts.use([GridComponent, BarChart, CanvasRenderer]);

export default defineComponent({
  props: {
    ...chartViewMixin.props
  },
  data() {
    return {
      engine: ChartRenderEngine.ECHARTS,
      chartType: [ChartTypeEnum.MAP_CHINA]
    };
  },
  mixins: [chartViewMixin],
  setup(props, { emit }) {
    const chart = ref<ECharts>();
    const designerChartViewRef = ref<HTMLElement>(null as any);
    const designerChartViewInnerRef = ref<HTMLElement>(null as any);
    onMounted(() => {
      initChart();
    });
    let option = {} as EChartsCoreOption;

    function initChart() {
      chart.value = echarts.init(designerChartViewInnerRef.value);
      option = {
        yAxis: {
          type: 'value'
        }
      };
    }

    let oldChartData = {} as IChartData;
    watch(
      () => props.chartData,
      (newVal) => {
        if (!newVal || !chart.value) {
          return;
        }
        if (!isNeedRerenderChart(newVal, oldChartData)) {
          oldChartData = deepClone(newVal);
          return;
        }
        render(chart.value!, newVal, props.chartDataResult);
        oldChartData = deepClone(newVal);
      },
      {
        immediate: true,
        deep: true
      }
    );
    let oldChartDataResult = {} as IChartDataResult;

    function watchDataList(chartData: IChartData, chartDataResult: IChartDataResult) {
      oldChartDataResult = deepClone(props.chartDataResult);
      if (!chart.value) {
        initChart();
      }
      render(chart.value!, chartData, chartDataResult);
    }

    // 监听数据的变动自动重新渲染
    watch(
      () => props.chartDataResult.data,
      () => {
        if (isSameObj(oldChartDataResult, props.chartDataResult)) {
          return;
        }
        if (!designerChartViewRef.value) {
          onMounted(() => {
            watchDataList(props.chartData, props.chartDataResult);
          });
        } else {
          watchDataList(props.chartData, props.chartDataResult);
        }
      },
      { immediate: true, deep: true }
    );

    /**
     * 自定义渲染逻辑
     * @param chart echarts图表对象
     * @param chartData 图表模板的定义
     * @param chartDataResult chartDataResult.data存放的是后端返回的图表数据
     */
    function render(chart: ECharts, chartData: IChartData, chartDataResult: IChartDataResult) {
      if (!isShowChatView(chartData)) {
        return;
      }
      if (!isSameObj(chartData, chartDataResult.chartData)) {
        return;
      }

      const {
        scales = [],
        dimensions = [],
      } = filterDimensionScaleColumns(chartData);

      const dataList = !scales.length || !dimensions.length ? [] : ((chartDataResult.data! || []) as any[]);

      dataList.forEach((a) => {
        if (dimensions.length && !a.name) {
          a.name = a[dimensions[0].chartField.displayName];
        }
        if (scales.length && !a.value) {
          a.value = a[scales[0].chartField.displayName] || null;
        }
      });
      const dv = new DataSet.DataView().source(dataList);

      option.xAxis = {
        type: 'category',
        data: dv.rows?.map((a) => a?.name)
      };
      option.series = [
        {
          type: 'bar',
          data: dv.rows?.map((a) => a?.value)
        } as BarSeriesOption
      ];
      chart.setOption(option);
    }

    // 监听图表容器大小
    watchEchartsSize(props, chart!);

    return { designerChartViewRef, designerChartViewInnerRef, chart };
  }
});
</script>
注册该模板
import { ChartRenderEngine, ChartRenderType, registerChartComponent } from '@kunlun/data-designer-core';
import component from './demo-echarts-bar.vue';

registerChartComponent({
  engine: ChartRenderEngine.ECHARTS,
  render: ChartRenderType.CANVAS,
  chartTemplateCode: 'test002'
},
  {
    component
  } as any
);
效果展示

数据可视化中图表的低无一体

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/70.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
nation的头像nation数式员工
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 数据可视化-图表在业务页面如何加动态查询条件

    前提 阅读此文章前,默认读者已了解了界面设计器和数据可视化的基本操作图表基础操作文档 1.新建一个表单视图,要求表单的模型里有动态查询条件的字段 从左侧组件库找到“图表”组件,拖入到视图区域,在右侧属性面板选择已经发布过的图表 2.将“组件库”->“模型”下的查询条件字段拖入到视图区域,然后再选择图表,设置图表组件属性面板内的“查询条件” 查询条件为rsql语法,里面的变量需要用${}包裹起来,其中的activeRecord为当前视图的数据对象,下图中的activeRecord.field000015为推荐导购员的对象,我们拿了这个对象的id传到查询条件内 3.绑定菜单后,可以去运行时页面查看效果 通过浏览器的开发者工具,我们可以看到,选中导购员后查询条件发生了改变,页面的数据也同步发生了变化

    2024年8月28日
    84200
  • 如何实现页面间的跳转

    介绍 在日常的业务中,我们经常需要在多个模型的页面之间跳转,例如从商品的行可以直接点击链接跳转到类目详情,还有查看该订单发起的售后单列表,这里将给大家展示如何在oinone中如何实现这些功能。 方法一、通过界面设计器的无代码能力配置 表格行跳转到表单页/详情页 拖入一个跳转动作到表格行,保存动作后,在左侧的动作属性面板底部有个请求配置,里面的上下文属性就是配置跳转参数的地方,点击添加按钮可以增加一行参数 点击添加按钮后,可以看到新增了一行,行内有2个输入框,左侧输入框为目标视图模型的字段,右侧输入框为当前视图模型的表达式 注意 表达式中activeRecord关键字代表当前行的数据对象 “上下文”相关知识点 当前页面的模型和跳转后的页面模型相同的情况下,会字段带上当前行数据的id作为路由参数 上下文是从当前页面跳转到下个页面带的自定义参数 上下文会作为跳转后的页面数据加载函数的入参,后端的该函数需要根据该条件查询到数据返回给前端,典型的例子就是编辑页,根据id查询对象的其他字段信息返回 跳转后页面的数据加载函数可以在动作场景的时候选择加载函数,也可以在页面的加载函数处设置 方法二、通过低代码方式在自定义代码中调用 oinone提供了内置函数executeViewAction实现该功能 import { DefaultComparisonOperator, executeViewAction, QueryExpression, RuntimeViewAction, ViewActionTarget, ViewType } from '@kunlun/dependencies'; export class JumpActionWidget { protected goToObjectView() { executeViewAction( { viewType: ViewType.Form, moduleName: 'resource', model: 'resource.ResourceCountry', name: 'redirectUpdatePage', target: ViewActionTarget.Router } as RuntimeViewAction, undefined, undefined, { // 此处为id参数,目前只有表单和详情页需要 id: '12223', // 此处为上下文参数,context内对象的key是目标页面需要传递的默认值 context: JSON.stringify({code: 'xxx'}), // 此处为跳转后左侧菜单展开选中的配置 menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } protected goToListView() { const searchConditions: QueryExpression[] = []; searchConditions.push({ leftValue: ['countryCode'], // 查询条件的字段 operator: DefaultComparisonOperator.EQUAL, right: 'CN' // 字段的值 }); executeViewAction( { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCity', name: 'resource#市', target: ViewActionTarget.OpenWindow } as RuntimeViewAction, undefined, undefined, { // searchConditions相当于domain,不会随页面搜索项重置动作一起被清空 searchConditions: encodeURIComponent(JSON.stringify(searchConditions)), // searchBody的字段会填充搜索区域的字段组件,会随页面搜索项重置动作一起被清空 searchBody: JSON.stringify({code: 'CN'}), menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } } 扩展知识点 为什么executeViewAction跳转到的新页面不是入参的moduleName属性对应的模块? 答:跳转后所在的模块优先级为: 第一个入参的resModuleName属性对应的模块 执行executeViewAction时所在的模块 第一个入参的moduleName属性对应的模块 如何快速获取选中菜单的值? 答:先通过页面菜单手动打开页面,然后在浏览器自带调试工具的控制台执行decodeURIComponent(location.href),其中的menu参数就是我们需要的值

    2024年5月13日
    1.3K00
  • 界面设计器 扩展字段的查询上下文

    默认情况下oinone平台对于查询条件,只提供的当前登录用户这一个配置,但是允许开发者扩展 开发者可以在前端代码的main.ts进行扩展 import { SessionContextOptions, ModelFieldType } from '@kunlun/dependencies'; const currentDeptOption = { ttype: ModelFieldType.String, value: '$#{currentDept}', displayName: '当前登录部门', label: '当前登录部门' }; SessionContextOptions.push(currentDeptOption as any); 加上上面的代码,然后再去界面设计器,我们就会发现,多了一个配置

    2023年11月8日
    78500
  • 元数据多环境在线发布功能说明

    该功能依赖应用环境(designer_metadata)模块, 请确保体验环境的后端yml配置有该依赖 一 产品功能说明 设计同步部署 设计同步部署功能实现不同环境设计数据一键同步的目标,即将A环境设计完成的模型、界面、等设计数据一键部署至B环境。使用此功能,需要在‘应用中心’安装‘应用环境’:‘应用环境’安装完成,进入发起同步部署环境——>业务应用——>‘应用环境’,对要进行快速部署的发起环境、目标环境进行配置:在进行多个环境同步部署设计数据时,必须正确配置发起环境、目标环境。完成配置后,在应用中心,选择目标‘已安装’应用,在操作下拉菜单选择待部署设计类型,即可按照指引完成操作: 设计导出 设计导出功能具备将已安装应用所属(应用技术名称)设计元数据,如模型、界面、流程、集成设计、数据可视化导出为json文件的能力,具备筛选导出、一键导出两种方式以满足不同业务场景需要。目标是实现在多个环境通过技术接口调用、或通过应用中心导入界面完成导入,使设计元数据在不同环境之间快速迁移同步: :::info 因平台允许多个应用名称相同,能够唯一定位具体应用使用的是‘应用技术名称’,因此识别应用标识的依据为应用技术名称。::: 设计导入 迁移导入 对于已导出设计元数据json文件,如果导出类型为‘迁移导出’,可以在不同环境,通过应用中心——>已安装应用——>设计导入(迁移),实现设计数据导入: 标品导入 对于导出类型为‘标品导出’的设计元数据,目前只支持通过技术接口形式完成导入,暂不支持界面进行可视化导入操作。 导出导入任务 不同环境设计元数据以导入json文件方式进行迁移的基础是设计导出,基于界面导入实现设计元数据在不同环境进行迁移场景、或通过技术接口导入以实现标品升级的场景,存在导出类型为迁移导出、标品导出的区别。使用此功能的操作者需要依据实际需求场景进行相应导出类型的选择。 导出任务查看 对于已经执行导出的任务,可通过‘应用环境——>设计导出’查看导出任务信息: 导入任务查看 对于已经执行导入的任务,可通过‘应用环境——>设计导入’查看导入任务状态、进度、详细信息: 部署任务 部署任务功能用于查看设计数据同步部署功能任务状态、详细信息;分为发起环境任务查看、目标环境任务查看。无论是发起环境,或是目标环境,均通过所属环境‘应用环境’中‘部署任务’功能进行查看: 二 产品功能操作手册 设计导出 环境迁移导出 点击‘业务应用——>应用中心’,进入应用中心,默认显示‘应用列表’标签页:选择‘已安装’应用——>操作,出现操作菜单:选择‘设计导出’,显示支持导出的各设计项: 模型导出 操作菜单选择‘模型导出’:打开模型导出信息弹窗:在弹窗页中存在要素信息项及操作项: 导出类型:选择‘迁移导出’。 文件名称:默认为‘应用名称+设计类型’。 导出模式:异步模式,不可修改。 导出格式:JSON文件,不可修改。 一键导出:操作项,直接导出当前应用下的所有无代码模型,不需要筛选。 筛选导出:操作项,进入无代码模型导出筛选页,选择要导出的设计数据。 一键导出 点击‘一键导出’,关闭弹窗,回到应用中心,右上角出现导出进行中提示信息:导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’,进入无代码模型导出筛选页:筛选页面按照‘模型类型’、‘可用/废弃’、‘来源’选择或输入查找条件,点击‘搜索’,进行条件搜索,查找满足条件无代码模型:点击‘重置’按钮,清空已输入查找条件:点击列表标题栏勾选框,可进行全选/取消全选操作,全选——选择全部模型,取消全选——取消所有已勾选项:勾选要导出模型,点击‘导出’按钮:回到应用中心,右上角提示导出信息:导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 界面导出 ‘业务应用——>应用中心’,进入应用中心,选择已安装应用——>操作——>设计导出——>界面导出,弹出界面导出信息项弹窗,‘导出类型’选择‘迁移导出’: 一键导出 点击‘一键导出’,关闭弹窗,回到应用中心,右上角出现导出进行中提示信息:界面导出会将所选菜单项、菜单目录路径、菜单绑定页面、页面使用的自定义组件全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’,进入应用环境——>界面导出筛选页面,显示当前应用下所有菜单项:查询项‘菜单名称’输入名称,点击‘搜索’按钮,进行模糊查找匹配的菜单项:点击‘清除’按钮,清除已输入的查询内容:勾选菜单项后,点击‘导出’按钮:回到应用中心页面,同时页面右上角提示导出进行中信息:界面导出会将所选菜单项、上级菜单目录项、菜单绑定页面、页面使用的自定义组件全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 流程导出 点击‘业务应用——>应用中心’,进入应用中心,选择已安装应用——>操作——>设计导出——>流程导出,弹出导出信息弹窗:‘导出类型’选择‘迁移导出’。 一键导出 点击‘一键导出’:关闭弹窗,回到应用中心,右上角出现导出进行中提示信息:一键导出流程数据会按照应用技术名称,将当前应用下所有流程、元数据、涉及的业务数据如审批用户、角色等全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’:进入流程数据筛选页面,显示当前应用(技术名称)下所有已发布流程:支持按照流程名称(模糊匹配)、触发方式(模型触发、定时触发、日期触发、子流程)进行筛选;输入筛选条件,点击搜索按钮,查找匹配结果:点击‘清除’按钮,清空筛选内容:勾选列表流程项,点击‘导出’按钮:返回应用中心,同时页面右上角提示导出信息:流程导出会将应用(技术名称)下的所有已发布流程及相关元数据、业务数据全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 集成导出 点击‘业务应用——>应用中心’,进入应用中心,选择已安装应用——>操作——>设计导出——>集成导出,弹出集成导出信息项弹窗,‘导出类型’选择‘迁移导出’: 一键导出 点击‘一键导出’,关闭弹窗,回到应用中心,右上角出现导出进行中提示信息:一键导出集成数据会按照应用技术名称,将所有已发布数据流程;以及所有已启用连接器(与应用无关)、已启用开放接口(与应用无关)全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’:进入集成数据筛选页面,默认显示‘连接器’标签页——>应用(已启用)数据项列表:可选项: 连接器:应用(已启用状态)、数据库(已启用状态)、与应用无关。 数据流程:已发布状态,且属于发起导出应用(技术名称)下的数据流程。 开放平台:API接口(已启用状态)、与应用无关。 以上各项在列表中展示的数据均可勾选并支持导出为json文件:勾选列表数据项,点击‘导出’按钮:回到应用中心,右上角显示导出提示信息:导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 数据可视化导出 点击‘业务应用——>应用中心’,进入应用中心,选择已安装应用——>操作——>设计导出——>数据可视化导出,弹出数据可视化导出信息项弹窗,‘导出类型’选择‘迁移导出’: 一键导出 点击‘一键导出’:关闭弹窗,回到应用中心,右上角出现导出进行中提示信息:一键导出数据可视化会将所有已发布图表(含路径目录)、报表(含路径目录)、数据大屏(含路径目录)、图表模版全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’:进入数据可视化筛选列表页面,默认显示‘图表’标签页,并展示已发布图表数据项列表:标签页: 图表:显示所有已发布状态图表,以树形结构展示,支持按照‘图表名称’模糊匹配查找。 报表:显示所有已发布状态报表,以树形结构展示,支持按照‘报表名称’模糊匹配查找。 数据大屏:显示所有已发布状态数据大屏,以树形结构展示,支持按照‘数据大屏名称’模糊匹配查找。 图表模版:显示所有图表模版,列表形式展示,支持按照‘图表名称’模糊匹配查找。 勾选列表数据项,点击‘导出’按钮:关闭弹窗,回到应用中心,右上角出现导出进行中提示信息:筛选导出数据可视化数据会将所有已发布图表(含路径目录)、报表(含路径目录)、数据大屏(含路径目录)、图表模版全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 标品导出 点击‘业务应用——>应用中心’,进入应用中心,点击‘应用列表’标签项;选择‘已安装’应用,点击操作,出现操作菜单:选择‘设计导出’,显示支持导出的各设计项: 模型导出 点击‘业务应用——>应用中心’,进入应用中心;点击已安装应用——>操作,出现操作菜单:选择‘设计导出——>模型导出’:打开导出信息弹窗: 一键导出 导出过程同《1.1.1.1 设计导出/环境迁移导出/模型导出/一键导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.1.2 设计导出/环境迁移导出/模型导出/筛选导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 界面导出 点击‘业务应用——>应用中心’,进入应用中心;选择已安装应用——>操作——>设计导出——>界面导出,‘导出类型’选择‘标品导出’: 一键导出 导出过程同《1.1.2.1 设计导出/环境迁移导出//界面导出/一键导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.2.2 设计导出/环境迁移导出/界面导出/筛选导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 流程导出 点击‘业务应用——>应用中心’,进入应用中心;选择已安装应用——>操作——>设计导出——>流程导出,‘导出类型’选择‘标品导出’: 一键导出 导出过程同《1.1.3.1 设计导出/环境迁移导出/流程导出/一键导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.3.2 设计导出/环境迁移导出/流程导出/筛选导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 集成导出 点击‘业务应用——>应用中心’,进入应用中心;选择已安装应用——>操作——>设计导出——>集成导出,‘导出类型’选择‘标品导出’: 一键导出 导出过程同《1.1.4.1 设计导出/环境迁移导出/集成导出/一键导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.4.2 设计导出/环境迁移导出/集成导出/筛选导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 数据可视化导出 点击‘业务应用——>应用中心’,进入应用中心;选择已安装应用——>操作——>设计导出——>数据可视化导出,‘导出类型’选择‘标品导出’: 一键导出 导出过程同《1.1.5.1 设计导出/环境迁移导出/数据可视化导出/一键导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.5.2 设计导出/环境迁移导出/数据可视化导出/筛选导出》,区别是标品导出json文件无法通过前端页面导入其它环境,只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 导出任务查看 点击‘业务应用——>应用环境’,进入应用环境:点击‘设计导出’,显示导出任务信息列表:点击导出任务项操作栏‘详情’,进入导出任务详情查看页:点击‘关联文件’,可保存下载导出文件:点击‘返回’按钮:回到导出任务信息列表页。 设计导入 环境迁移导入 进入导入目标环境,点击‘业务应用——>应用中心’,进入应用中心;选择要导入设计数据的已安装应用: 模型导入 导入 选择‘模型导入’:打开导入文件上传信息弹窗:选择要导入的json文件:选择文件后,显示待导入文件:点击‘确定’按钮,执行设计数据迁移导入:如果选择的导入文件类型为非迁移导出文件,则右上方提示(其它设计类型迁移导入文件类型同此):导入文件选择正确,点击确定后,右上角提示导入信息:点击‘设计器——>模型设计器’: 验证导入结果 进入导入环境模型设计器,查看导入数据是否已成功导入: 界面导入 导入 选择‘界面导入’:打开导入文件上传弹窗:选择要导入的json文件上传后,点击‘确定’按钮,关闭弹窗,右上角显示导入提示信息: 验证导入结果 进入界面设计器,检查导出数据是否正确导入: 流程导入 导入 选择‘流程导入’:打开导入文件上传弹窗页面:选择要导入的json文件上传后,点击‘确定’按钮,关闭弹窗,右上角显示导入提示信息: 验证导入结果 进入流程设计器,检查导出数据是否正确导入: 集成导入 导入 选择‘集成导入’:打开导入文件上传弹窗:选择要导入的json文件上传后,点击‘确定’按钮,关闭弹窗,右上角显示导入提示信息: 验证导入结果 进入集成设计器,检查导出数据是否正确导入。验证连接器:验证数据流程:验证开放接口: 数据可视化导入 导入 选择‘数据可视化导入’:打开导入文件上传弹窗:选择要导入的json文件上传后,点击‘确定’按钮,关闭弹窗,右上角显示导入提示信息: 验证导入结果 进入数据可视化,检查导出数据是否正确导入:验证图表:验证报表:验证数据大屏:验证图表模版: 设计导入任务查看 导入环境,点击‘业务应用——>应用环境’,进入应用环境;点击‘设计导入’:显示所有设计导入信息列表:点击‘详情’,查看设计导入详细信息:点击‘返回’按钮,回到导入信息列表展示页: 同步部署 部署环境管理 创建部署环境 选择:业务应用——>应用环境,进入应用环境;默认显示当前所有已配置环境: 删除部署环境配置 未勾选任何已配置部署环境时,删除按钮不可用:勾选一条或多条已配置环境信息,点击”删除“,可完成已配置部署环境删除: 编辑部署环境配置 点击部署环境配置项操作栏‘编辑’操作,进入部署环境配置项编辑页:支持对所有配置项数据进行修改编辑;其中标红项为必须,即不能为空,且名称不能重复。点击‘返回’按钮,放弃本次编辑,回到部署环境配置项列表页:点击‘确定’按钮,保存编辑内容,并回到部署环境配置列表展示页: 部署环境详情查看 点击部署环境配置项,操作栏‘详情’,进入部署环境配置项详情查看页面:点击‘返回’按钮,回到部署环境配置列表展示页: 确认部署目标环境配置 进入应用环境,点击‘部署环境配置’,显示当前已配置环境列表:检查是否已配置同步部署目标环境,如已存在,无需再次配置。 模型部署…

    2024年8月8日
    92100
  • 界面设计器的导入导出

    目录 依赖包安装GraphQL的工具登录gql导出生成json文件子业务工程中导入示例代码 简介 通过调用导出接口,将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址:https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL,直接返回导出数据。适用于通过浏览器直接下载文件。 按模块示例调用代码 请求示例: mutation { uiDesignerExportReqMutation { download/export( data: { module: "demo_core", fileName: "demo_meta", moduleBasics: false } ) { jsonUrl } } } module参数:模块编码; fileName参数:指定⽣成的json⽂件名称; moduleBasics参数:指定是否只导出模块基础数据,如果为true,只导出内置布局、模块菜单、菜单关联的动作。 如果为false,还会导出模块内的所有页⾯,以及页⾯关联的动作元数据、页⾯设计数据 等等。 默认值为false。 按菜单导出 mutation { uiDesignerExportReqMutation { download/export( data: { menu: { name: "uiMenu0000000000048001" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } menu参数:菜单对象,指定菜单的name。只会导出该菜单及其绑定页⾯,不会递归查询⼦菜单 fileName参数:指定⽣成的json⽂件名称 relationViews参数:指定是否导出关联页⾯,默认为false,只导出菜单关联的页⾯。如果为true,还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 指定页⾯导出 mutation { uiDesignerExportReqMutation { download/export( data: { view: { name: "xx_TABLE_0000000000119001" model: "ui.designer.TestUiDesigner" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } view参数:视图对象,指定视图的name和model fileName参数:指定⽣成的json⽂件名称 relationViews参数:指定是否导出关联页⾯,默认为false,只导出菜单关联的页⾯。如果为true,还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 导出组件 导出全部组件数据 mutation { uiDesignerExportReqMutation { downloadWidget/exportWidget(data: { fileName: "demo_widget" }) { jsonUrl } } } fileName参数:指定⽣成的json⽂件名称 注意:⾃定义组件的元数据归属于页⾯设计器(ui_designer) 因此导⼊元数据的模块(module)并不是业务模块。组件导⼊建议使⽤pro.shushi.pamirs.metadata.manager.core.helper.WidgetInstallHelper 导出全部组件⽂件 当开发环境,和导⼊环境的oss不互通时,可通过⼀下⽅法导出⾃定义组件的css和js⽂件压缩包,在导⼊时⽀持指定zip⽂件上传到oss,并替换导⼊组件数据中的css和js⽂件路径。 mutation { uiDesignerExportReqMutation { downloadWidgetFile/exportWidgetFile(data: { fileName: "demo_widget" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoAppMetaInstall implements MetaDataEditor { @Autowired private ApplicationContext applicationContext; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if (!doImport())…

    2024年5月16日
    99400

Leave a Reply

登录后才能评论