portal vue实现前端可视化portal（一）

项目需求： 组件分为内置组件 ，自定义组件，可以实现拖拽的形式实现一个门户页面的创建，当然也可以实现可视化大屏的创建，一开始内心是拒绝的，这玩意做出来，我是不是就要失业了。

一. 初版demo演示

二.项目结构

• design 设计器
• renderer 渲染器
• 后台管理配置

2.1 设计器

就是demo展示的这个玩意，就是一个画布，可以让非开发人员去进行设计，分为内置组件，自定义组件

• 自定义组件
  就是设计器里面内置的组件，会单独放一个文件夹里面，后面打包发到npm上，给渲染器直接使用
• 自定义插件
  内置组件不满足的，按照一定的规则，自己去写组件上传(设计器不支持配置)，现在想的是两种方案，一种是webpack按照一定规则打包成js上传，然后渲染器，设计器通过script方式动态注入，这里就牵扯到new Vue的时机问题，因为只能事全局组件，就是牵扯到加载js导致UI界面卡一会的问题，第二种方案就是vue-cli3提供的单文件打包，异步script引入，但是样式这一块还需要解决，后面再考虑吧

用到的一些插件以及方案

• 状态管理使用 provide inject 不使用vuex了。
• vue-draggable 拖拽 https://github.com/SortableJS/Vue.Draggable
• vue-draggable-resizable https://github.com/gorkys/vue-draggable-resizable-gorkys
• echarts
  题外话: 可以用这两个插件去做自定义打印

组件json配置文件

const patams = {
  mamDataType: 1, // 数据类型
  mamHidden: true, // 组件隐藏显示
  mamDataValue: '', // 数据值
  mamRefreshTime: 0, // 刷新时间
  mamDataProcessing: '', // 数据处理
  mamMethod: 'post', // 接口请求方式
  mamApi: 'http://' // 接口地址
}

export default [
  {
    name: '柱状图',
    key: '',
    icon: 'demo',
    type: 'k-histogram',
    options: {
      width: 300,
      height: 200,
      x: 10,
      y: 10,
      ...patams,
      mamCategory: true,
      title: {
        text: '',
        subtext: '',
        textAlign: 'left',
        textStyle: {
          color: '#333333',
          fontSize: 16
        },
        subtextStyle: {
          color: '#666666',
          fontSize: 12
        }
      },
      grid: {
        width: 'auto',
        height: 'auto'
      },
      backgroundColor: 'rgba(255, 255, 255, .6)',
      color: ['#3296fa'],
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70],
        type: 'bar'
      }]
    }
  }
]

设计器左侧组件列表

舞台画布

属性配置面板

柱状图组件

App.vue

2.2 渲染器

一个npm包，谁使用谁引，开箱即用的那种

2.3 后台管理

用来管理portal模板，权限等一系列吧

具体功能还在探索当中，后续在更新。