diff --git a/backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java b/backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java new file mode 100644 index 0000000000..b6352ffa18 --- /dev/null +++ b/backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java @@ -0,0 +1,19 @@ +package io.dataease.controller.authModel; + +import com.github.xiaoymin.knife4j.annotations.ApiSupport; +import io.swagger.annotations.Api; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; + +/** + * Author: wangjiahao + * Date: 2021/11/5 + * Description: + */ +@Api(tags = "授权树:授权树模型") +@ApiSupport(order = 80) +@RestController +@RequestMapping("authModel") +public class VAuthModelController { + +} diff --git a/backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java b/backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java new file mode 100644 index 0000000000..703649a885 --- /dev/null +++ b/backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java @@ -0,0 +1,12 @@ +package io.dataease.dto.authModel; + +import io.dataease.base.domain.VAuthModel; + +/** + * Author: wangjiahao + * Date: 2021/11/5 + * Description: + */ +public class VAuthModelDTO extends VAuthModel { + +} diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml index 4bcf3af04a..9cbceb1e76 100644 --- a/backend/src/main/resources/generatorConfig.xml +++ b/backend/src/main/resources/generatorConfig.xml @@ -65,10 +65,10 @@ - -
-
-
+ + + +
diff --git a/frontend/package.json b/frontend/package.json index 0b67ccfac9..0d9599f1d4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -51,6 +51,7 @@ "vue-router": "3.0.6", "vue-to-pdf": "^1.0.0", "vue-uuid": "2.0.2", + "vue-video-player": "^5.0.2", "vuedraggable": "^2.24.3", "vuex": "3.1.0", "webpack": "^4.46.0", diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 02df49725b..3d0b764a8e 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -27,6 +27,7 @@ :is-edit="false" :element="config" :search-count="searchCount" + :h="config.style.height" /> @@ -76,6 +77,29 @@ export default { methods: { getStyle, + getShapeStyleIntDeDrag(style, prop) { + if (prop === 'rotate') { + return style['rotate'] + } + if (prop === 'width') { + return this.format(style['width'], this.scaleWidth) + } + if (prop === 'left') { + return this.format(style['left'], this.scaleWidth) + } + if (prop === 'height') { + return this.format(style['height'], this.scaleHeight) + } + if (prop === 'top') { + const top = this.format(style['top'], this.scaleHeight) + // console.log('top:' + top) + return top + } + }, + format(value, scale) { + // 自适应画布区域 返回原值 + return value * scale / 100 + }, getOutStyleDefault(style) { const result = {}; ['width', 'left'].forEach(attr => { diff --git a/frontend/src/components/canvas/components/Editor/VideoLinks.vue b/frontend/src/components/canvas/components/Editor/VideoLinks.vue new file mode 100644 index 0000000000..5de4189786 --- /dev/null +++ b/frontend/src/components/canvas/components/Editor/VideoLinks.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 0fe18e756c..6c3b4d297c 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -55,9 +55,6 @@ @amAddItem="addItemBox(item)" @linkJumpSet="linkJumpSet(item)" > - - - - diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue index a21ace722f..1946ad107d 100644 --- a/frontend/src/components/canvas/components/TextAttr.vue +++ b/frontend/src/components/canvas/components/TextAttr.vue @@ -136,6 +136,11 @@ +
+ + + +
@@ -150,10 +155,11 @@ + + + diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index c6a5e0589c..5f08f9cd9c 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -21,6 +21,19 @@ export const HYPERLINKS = { content: 'http://' } +// 视频信息配置 +export const VIDEOLINKS = { + autoplay: true, + muted: true, + loop: true, + language: 'zh', + controlBar: { + fullscreenToggle: false + }, + sources: [{ + }] +} + export const assistList = [ { id: '10001', @@ -57,6 +70,14 @@ export const pictureList = [ label: '拖拽上传', icon: 'iconfont icon-picture', defaultClass: 'text-filter' + }, + { + id: '20002', + component: 'video', + type: 'video', + label: '视频', + icon: 'iconfont icon-video', + defaultClass: 'text-filter' } ] @@ -275,6 +296,24 @@ const list = [ y: 1, sizex: 10, sizey: 5 + }, + { + id: '20002', + component: 'de-video', + type: 'de-video', + label: '', + icon: 'iconfont icon-picture', + defaultClass: 'text-filter', + style: { + width: 400, + height: 200, + borderRadius: '' + }, + videoLinks: VIDEOLINKS, + x: 1, + y: 1, + sizex: 10, + sizey: 5 } ] diff --git a/frontend/src/components/canvas/custom-component/index.js b/frontend/src/components/canvas/custom-component/index.js index ce8c3a3e5e..9fd3141ffd 100644 --- a/frontend/src/components/canvas/custom-component/index.js +++ b/frontend/src/components/canvas/custom-component/index.js @@ -6,6 +6,7 @@ import VButton from '@/components/canvas/custom-component/VButton' import Group from '@/components/canvas/custom-component/Group' import RectShape from '@/components/canvas/custom-component/RectShape' import UserView from '@/components/canvas/custom-component/UserView' +import DeVideo from '@/components/canvas/custom-component/DeVideo' Vue.component('Picture', Picture) Vue.component('VText', VText) @@ -13,4 +14,5 @@ Vue.component('VButton', VButton) Vue.component('Group', Group) Vue.component('RectShape', RectShape) Vue.component('UserView', UserView) +Vue.component('DeVideo', DeVideo) diff --git a/frontend/src/custom-theme.css b/frontend/src/custom-theme.css new file mode 100755 index 0000000000..e9bb74b11a --- /dev/null +++ b/frontend/src/custom-theme.css @@ -0,0 +1,180 @@ +.vjs-custom-skin > .video-js { + width: 100%; + font-family: "PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei","微软雅黑",sans-serif; +} + +.vjs-custom-skin > .video-js .vjs-menu-button-inline.vjs-slider-active,.vjs-custom-skin > .video-js .vjs-menu-button-inline:focus,.vjs-custom-skin > .video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline { + width: 10em +} + +.vjs-custom-skin > .video-js .vjs-controls-disabled .vjs-big-play-button { + display: none!important +} + +.vjs-custom-skin > .video-js .vjs-control { + width: 3em +} + +.vjs-custom-skin > .video-js .vjs-control.vjs-live-control{ + width: auto; + padding-left: .5em; + letter-spacing: .1em; +} + +.vjs-custom-skin > .video-js .vjs-menu-button-inline:before { + width: 1.5em +} + +.vjs-menu-button-inline .vjs-menu { + left: 3em +} + +.vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button { + display: block +} + +.vjs-custom-skin > .video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button { + display: none!important +} + +.vjs-custom-skin > .video-js .vjs-mouse-display:after,.vjs-custom-skin > .video-js .vjs-play-progress:after { + padding: 0 .4em .3em +} + +.video-js.vjs-ended .vjs-loading-spinner { + display: none; +} + +.video-js.vjs-ended .vjs-big-play-button { + display: block !important; +} + +.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started.vjs-custom-skin > .video-js .vjs-big-play-button { + display: block +} + +.vjs-custom-skin > .video-js .vjs-big-play-button { + top: 50%; + left: 50%; + margin-left: -1.5em; + margin-top: -1em +} + +.vjs-custom-skin > .video-js .vjs-big-play-button { + background-color: rgba(0,0,0,0.45); + font-size: 3.5em; + /*border-radius: 50%;*/ + height: 2em !important; + line-height: 2em !important; + margin-top: -1em !important +} + +.video-js:hover .vjs-big-play-button,.vjs-custom-skin > .video-js .vjs-big-play-button:focus,.vjs-custom-skin > .video-js .vjs-big-play-button:active { + background-color: rgba(36,131,213,0.9) +} + +.vjs-custom-skin > .video-js .vjs-loading-spinner { + border-color: rgba(36,131,213,0.8) +} + +.vjs-custom-skin > .video-js .vjs-control-bar2 { + background-color: #000000 +} + +.vjs-custom-skin > .video-js .vjs-control-bar { + /*background-color: rgba(0,0,0,0.3) !important;*/ + color: #ffffff; + font-size: 14px +} + +.vjs-custom-skin > .video-js .vjs-play-progress,.vjs-custom-skin > .video-js .vjs-volume-level { + background-color: #2483d5 +} + +.vjs-custom-skin > .video-js .vjs-play-progress:before { + top: -0.3em; +} + +.vjs-custom-skin > .video-js .vjs-progress-control:hover .vjs-progress-holder { + font-size: 1.3em; +} + +.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu { + left: 0em; +} + +.vjs-custom-skin > .video-js .vjs-menu li { + padding: 0; + line-height: 2em; + font-size: 1.1em; + font-family: "PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei","微软雅黑",sans-serif; +} + +.vjs-custom-skin > .video-js .vjs-time-tooltip, +.vjs-custom-skin > .video-js .vjs-mouse-display:after, +.vjs-custom-skin > .video-js .vjs-play-progress:after { + border-radius: 0; + font-size: 1em; + padding: 0; + width: 3em; + height: 1.5em; + line-height: 1.5em; + top: -3em; +} + +.vjs-custom-skin > .video-js .vjs-menu-button-popup .vjs-menu { + width: 5em; + left: -1em; +} + +.vjs-custom-skin > .video-js .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu { + left: 0; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-resolution-button .vjs-menu { + /*order: 4;*/ +} + + /*排序顺序*/ +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control { + order: 0; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-control { + min-width: 1em; + padding: 0; + margin: 0 .1em; + text-align: center; + display: block; + order: 1; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-playback-rate .vjs-playback-rate-value{ + font-size: 1.2em; + line-height: 2.4; +} + +.vjs-custom-skin > .video-js .vjs-progress-control.vjs-control { + order: 2; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-volume-menu-button { + order: 3; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-resolution-button { + order: 4; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-resolution-button .vjs-resolution-button-label { + display: block; + line-height: 3em; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-playback-rate { + order: 5; +} + +.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control { + order: 6; +} diff --git a/frontend/src/main.js b/frontend/src/main.js index 9fc65811e5..7d19913c38 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -82,6 +82,12 @@ Vue.config.productionTip = false import vueToPdf from 'vue-to-pdf' Vue.use(vueToPdf) +import VueVideoPlayer from 'vue-video-player' + +import 'video.js/dist/video-js.css' + +Vue.use(VueVideoPlayer) + Vue.prototype.hasDataPermission = function(pTarget, pSource) { if (this.$store.state.user.user.isAdmin) { return true diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index bf21246af7..2cac3c4eb9 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -66,7 +66,10 @@ const data = { nowPanelJumpInfoTargetPanel: {}, // 当前仪表板的跳转信息(只包括仪表板) // 拖拽的组件信息 - dragComponentInfo: null + dragComponentInfo: null, + + // 仪表板组件间隙大小 px + componentGap: 5 }, mutations: { ...animation.mutations, diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index 8f3440b4c8..c0cd14e760 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,54 @@
    +
  • + +
    video
    +
    
    +
  • + +
  • + +
    悬浮按钮发动态
    +
    
    +
  • + +
  • + +
    吸附选择
    +
    
    +
  • + +
  • + +
    margin
    +
    
    +
  • + +
  • + +
    padding
    +
    
    +
  • + +
  • + +
    tabs
    +
    
    +
  • + +
  • + +
    时间
    +
    
    +
  • + +
  • + +
    时间格式转换
    +
    
    +
  • +
  • 超链接
    @@ -102,12 +150,6 @@
    
  • -
  • - -
    44.tabs
    -
    
    -
  • -
  • 洗浴
    @@ -420,9 +462,9 @@
    @font-face {
       font-family: 'iconfont';
    -  src: url('iconfont.woff2?t=1634191971474') format('woff2'),
    -       url('iconfont.woff?t=1634191971474') format('woff'),
    -       url('iconfont.ttf?t=1634191971474') format('truetype');
    +  src: url('iconfont.woff2?t=1636358286475') format('woff2'),
    +       url('iconfont.woff?t=1636358286475') format('woff'),
    +       url('iconfont.ttf?t=1636358286475') format('truetype');
     }
     

    第二步:定义使用 iconfont 的样式

    @@ -448,6 +490,78 @@
      +
    • + +
      + video +
      +
      .icon-video +
      +
    • + +
    • + +
      + 悬浮按钮发动态 +
      +
      .icon-xuanfuanniufadongtai +
      +
    • + +
    • + +
      + 吸附选择 +
      +
      .icon-xifuxuanze +
      +
    • + +
    • + +
      + margin +
      +
      .icon-margin +
      +
    • + +
    • + +
      + padding +
      +
      .icon-padding +
      +
    • + +
    • + +
      + tabs +
      +
      .icon-tabs +
      +
    • + +
    • + +
      + 时间 +
      +
      .icon-shijian +
      +
    • + +
    • + +
      + 时间格式转换 +
      +
      .icon-shijiangeshizhuanhuan +
      +
    • +
    • @@ -520,15 +634,6 @@
    • -
    • - -
      - 44.tabs -
      -
      .icon-tabs -
      -
    • -
    • @@ -997,6 +1102,70 @@
        +
      • + +
        video
        +
        #icon-video
        +
      • + +
      • + +
        悬浮按钮发动态
        +
        #icon-xuanfuanniufadongtai
        +
      • + +
      • + +
        吸附选择
        +
        #icon-xifuxuanze
        +
      • + +
      • + +
        margin
        +
        #icon-margin
        +
      • + +
      • + +
        padding
        +
        #icon-padding
        +
      • + +
      • + +
        tabs
        +
        #icon-tabs
        +
      • + +
      • + +
        时间
        +
        #icon-shijian
        +
      • + +
      • + +
        时间格式转换
        +
        #icon-shijiangeshizhuanhuan
        +
      • +
      • #icon-xuanfuanniu
      • -
      • - -
        44.tabs
        -
        #icon-tabs
        -
      • -
      • - 图片 + 多媒体
        diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 1a66c84aa1..e4c5abac0d 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -289,7 +289,8 @@ export default { 'picture-add', 'de-tabs', 'rect-shape', - 'de-show-date' + 'de-show-date', + 'de-video' ] } }, @@ -551,15 +552,12 @@ export default { }) } else { this.currentWidget = ApplicationContext.getService(componentInfo.id) - this.currentFilterCom = this.currentWidget.getDrawPanel() - if (this.canvasStyleData.auxiliaryMatrix) { this.currentFilterCom.x = this.dropComponentInfo.x this.currentFilterCom.y = this.dropComponentInfo.y this.currentFilterCom.sizex = this.dropComponentInfo.sizex this.currentFilterCom.sizey = this.dropComponentInfo.sizey - this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleOriginWidth this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth @@ -608,14 +606,6 @@ export default { this.$store.commit('addComponent', { component }) this.$store.commit('recordSnapshot', 'handleDrop') this.clearCurrentInfo() - // this.$store.commit('clearDragComponentInfo') - - // // 文字组件 - // if (component.type === 'v-text') { - // this.$store.commit('setCurComponent', { component: component, index: this.componentData.length }) - // this.styleDialogVisible = true - // this.show = false - // } }, clearCurrentInfo() { this.currentWidget = null diff --git a/frontend/src/views/panel/video/index.vue b/frontend/src/views/panel/video/index.vue new file mode 100644 index 0000000000..627a458736 --- /dev/null +++ b/frontend/src/views/panel/video/index.vue @@ -0,0 +1,24 @@ + + + + +