portal vue 프런트엔드 시각화 portal 구현(一)

프로젝트 수요: 구성 요소는 내장 구성 요소로 나뉘는데 사용자 정의 구성 요소로 드래그하는 형식으로 한 포털 페이지의 창설을 실현할 수 있다. 물론 시각화된 스크린의 창설도 실현할 수 있다. 처음에 마음속으로 거절한 것이다. 이 일을 하면 내가 실직할 것이다.
하나.초판 데모 데모 프레젠테이션
둘.프로젝트 구조

디자인 디자이너

renderer 렌더링 머신

백그라운드 관리 구성

2.1 디자이너
바로 데모가 전시한 이 장난감은 하나의 화포로 비개발자가 디자인을 할 수 있게 한다 ,

사용자 정의 구성 요소는 디자이너에 내장된 구성 요소로 하나의 폴더에 단독으로 넣고 뒤에 npm에 포장하여 렌더링기에 직접 사용

사용자 정의 플러그인 내장 구성 요소가 만족하지 않으면 일정한 규칙에 따라 구성 요소 업로드를 직접 작성한다(디자이너가 설정을 지원하지 않는다). 현재 생각하는 것은 두 가지 방안이다. 하나는 웹 패키지가 일정한 규칙에 따라 js 업로드로 포장된 다음에 렌더링기, 디자이너가 script 방식으로 동적 주입하는 것이다. 이것은 new Vue의 시기 문제와 관련이 있다.전역 구성 요소만 가능하기 때문에 js를 불러와서 UI인터페이스 카드를 잠시 끄는 문제에 관련된다. 두 번째 방안은 vue-cli3이 제공하는 단일 파일 패키지, 비동기적인script 도입이다. 그러나 양식이라는 부분은 해결해야 한다. 나중에 다시 생각해 보자

일부 플러그인 및 프로젝트

상태관리 사용provideinject사용하지 않음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'
      }]
    }
  }
]

디자이너 왼쪽 구성 요소 목록

import componentsData from '@/config/components'
import componentItem from '@/components/ComponentItem/index'
import uuid from 'node-uuid'
export default {
  name: 'ComponentLibrary',
  components: {
    componentItem
  },
  data() {
    return {
      componentsData
    }
  },
  methods: {
    handleEnd(evt) {
      //   key         
      this.componentsData[evt.oldIndex].key = uuid.v1()
    }
  }
}

스테이지 캔버스

import draggable from './mixin/draggable'
import resize from './mixin/resize'

export default {
  name: 'StageCanvas',
  inject: ['app'],
  mixins: [draggable, resize],
  data() {
    return {
      componentList: [],
      vLine: [],
      hLine: [],
      enableNativeDrag: false,
      activeComponent: {} //       
    }
  }
}

속성 구성 패널

import ConfigTab from './modules/ConfigTab'
import DataTab from './modules/DataTab'
import FormatTab from './modules/FormatTab'
export default {
  name: 'AttrConfiguration',
  components: {
    ConfigTab,
    DataTab,
    FormatTab
  },
  inject: ['app'],
  data() {
    return {
      activeName: 'first'
    }
  }
}

원통형 다이어그램 구성 요소

export default {
  name: 'Histogram',
  props: {
    options: {
      type: Object,
      default: () => {}
    },

    domId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler(data) {
        let xAxis = {}
        let yAxis = {}
        if (data.mamCategory) {
          yAxis = { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] }
          xAxis = { type: 'value' }
        } else {
          xAxis = { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] }
          yAxis = { type: 'value' }
        }

        const options = {
          ...data,
          xAxis,
          yAxis
        }
        this.chart.resize()
        this.chart.setOption(options)
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.chart = window.echarts.init(document.getElementById(this.domId))
      this.chart.setOption(this.options)
    })
  }
}

App.vue

import Layout from '@/components/layout/index'
export default {
  name: 'App',
  provide() {
    return {
      app: this
    }
  },
  components: {
    Layout
  },
  data() {
    return {
      attrData: {
        options: {}
      }
    }
  },
  methods: {
    //         
    setAttrData(data) {
      this.attrData = Object.assign({}, data)
    }
  }
}

2.2 렌더러
npm 패키지
2.3 백그라운드 관리
포털 템플릿, 권한 등 일련의 관리를 위한
구체적인 기능은 아직 탐색 중이며 후속으로 업데이트하고 있다.