Skip to content

D
dataease
Unverified 提交 c6aa9af3 authored 作者: 王嘉豪's avatar 王嘉豪 提交者： GitHub
浏览文件
操作

Merge pull request #1148 from dataease/pr@dev@feat_panel-video

refactor:优化授权查询模型
上级 4c38d9d0 6a62267d
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1168 行增加 和 62 行删除
backend/src/main/java/io/dataease/base/domain/VAuthModel.java 0 → 100644
浏览文件 @ c6aa9af3
package io.dataease.base.domain;
import java.io.Serializable;
import lombok.Data;
@Data
public class VAuthModel implements Serializable {
private String id;
private String pid;
private String nodeType;
private String modelType;
private String modelInnerType;
private String authType;
private String createBy;
private static final long serialVersionUID = 1L;
}
\ No newline at end of file
backend/src/main/java/io/dataease/base/domain/VAuthModelWithBLOBs.java 0 → 100644
浏览文件 @ c6aa9af3
package io.dataease.base.domain;
import java.io.Serializable;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.ToString;
@Data
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
public class VAuthModelWithBLOBs extends VAuthModel implements Serializable {
private String name;
private String label;
private static final long serialVersionUID = 1L;
}
\ No newline at end of file
backend/src/main/java/io/dataease/base/mapper/VAuthModelMapper.java 0 → 100644
浏览文件 @ c6aa9af3
package io.dataease.base.mapper;
import io.dataease.base.domain.VAuthModel;
import io.dataease.base.domain.VAuthModelExample;
import io.dataease.base.domain.VAuthModelWithBLOBs;
import java.util.List;
import org.apache.ibatis.annotations.Param;
public interface VAuthModelMapper {
long countByExample(VAuthModelExample example);
int deleteByExample(VAuthModelExample example);
int insert(VAuthModelWithBLOBs record);
int insertSelective(VAuthModelWithBLOBs record);
List<VAuthModelWithBLOBs> selectByExampleWithBLOBs(VAuthModelExample example);
List<VAuthModel> selectByExample(VAuthModelExample example);
int updateByExampleSelective(@Param("record") VAuthModelWithBLOBs record, @Param("example") VAuthModelExample example);
int updateByExampleWithBLOBs(@Param("record") VAuthModelWithBLOBs record, @Param("example") VAuthModelExample example);
int updateByExample(@Param("record") VAuthModel record, @Param("example") VAuthModelExample example);
}
\ No newline at end of file
backend/src/main/java/io/dataease/base/mapper/VAuthModelMapper.xml 0 → 100644
浏览文件 @ c6aa9af3
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="io.dataease.base.mapper.VAuthModelMapper">
<resultMap id="BaseResultMap" type="io.dataease.base.domain.VAuthModel">
<result column="id" jdbcType="VARCHAR" property="id" />
<result column="pid" jdbcType="VARCHAR" property="pid" />
<result column="node_type" jdbcType="VARCHAR" property="nodeType" />
<result column="model_type" jdbcType="VARCHAR" property="modelType" />
<result column="model_inner_type" jdbcType="VARCHAR" property="modelInnerType" />
<result column="auth_type" jdbcType="VARCHAR" property="authType" />
<result column="create_by" jdbcType="VARCHAR" property="createBy" />
</resultMap>
<resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.VAuthModelWithBLOBs">
<result column="name" jdbcType="LONGVARCHAR" property="name" />
<result column="label" jdbcType="LONGVARCHAR" property="label" />
</resultMap>
<sql id="Example_Where_Clause">
<where>
<foreach collection="oredCriteria" item="criteria" separator="or">
<if test="criteria.valid">
<trim prefix="(" prefixOverrides="and" suffix=")">
<foreach collection="criteria.criteria" item="criterion">
<choose>
<when test="criterion.noValue">
and ${criterion.condition}
</when>
<when test="criterion.singleValue">
and ${criterion.condition} #{criterion.value}
</when>
<when test="criterion.betweenValue">
and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
</when>
<when test="criterion.listValue">
and ${criterion.condition}
<foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
#{listItem}
</foreach>
</when>
</choose>
</foreach>
</trim>
</if>
</foreach>
</where>
</sql>
<sql id="Update_By_Example_Where_Clause">
<where>
<foreach collection="example.oredCriteria" item="criteria" separator="or">
<if test="criteria.valid">
<trim prefix="(" prefixOverrides="and" suffix=")">
<foreach collection="criteria.criteria" item="criterion">
<choose>
<when test="criterion.noValue">
and ${criterion.condition}
</when>
<when test="criterion.singleValue">
and ${criterion.condition} #{criterion.value}
</when>
<when test="criterion.betweenValue">
and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
</when>
<when test="criterion.listValue">
and ${criterion.condition}
<foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
#{listItem}
</foreach>
</when>
</choose>
</foreach>
</trim>
</if>
</foreach>
</where>
</sql>
<sql id="Base_Column_List">
id, pid, node_type, model_type, model_inner_type, auth_type, create_by
</sql>
<sql id="Blob_Column_List">
`name`, `label`
</sql>
<select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.VAuthModelExample" resultMap="ResultMapWithBLOBs">
select
<if test="distinct">
distinct
</if>
<include refid="Base_Column_List" />
,
<include refid="Blob_Column_List" />
from v_auth_model
<if test="_parameter != null">
<include refid="Example_Where_Clause" />
</if>
<if test="orderByClause != null">
order by ${orderByClause}
</if>
</select>
<select id="selectByExample" parameterType="io.dataease.base.domain.VAuthModelExample" resultMap="BaseResultMap">
select
<if test="distinct">
distinct
</if>
<include refid="Base_Column_List" />
from v_auth_model
<if test="_parameter != null">
<include refid="Example_Where_Clause" />
</if>
<if test="orderByClause != null">
order by ${orderByClause}
</if>
</select>
<delete id="deleteByExample" parameterType="io.dataease.base.domain.VAuthModelExample">
delete from v_auth_model
<if test="_parameter != null">
<include refid="Example_Where_Clause" />
</if>
</delete>
<insert id="insert" parameterType="io.dataease.base.domain.VAuthModelWithBLOBs">
insert into v_auth_model (id, pid, node_type,
model_type, model_inner_type, auth_type,
create_by, `name`, `label`
)
values (#{id,jdbcType=VARCHAR}, #{pid,jdbcType=VARCHAR}, #{nodeType,jdbcType=VARCHAR},
#{modelType,jdbcType=VARCHAR}, #{modelInnerType,jdbcType=VARCHAR}, #{authType,jdbcType=VARCHAR},
#{createBy,jdbcType=VARCHAR}, #{name,jdbcType=LONGVARCHAR}, #{label,jdbcType=LONGVARCHAR}
)
</insert>
<insert id="insertSelective" parameterType="io.dataease.base.domain.VAuthModelWithBLOBs">
insert into v_auth_model
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="id != null">
id,
</if>
<if test="pid != null">
pid,
</if>
<if test="nodeType != null">
node_type,
</if>
<if test="modelType != null">
model_type,
</if>
<if test="modelInnerType != null">
model_inner_type,
</if>
<if test="authType != null">
auth_type,
</if>
<if test="createBy != null">
create_by,
</if>
<if test="name != null">
`name`,
</if>
<if test="label != null">
`label`,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="id != null">
#{id,jdbcType=VARCHAR},
</if>
<if test="pid != null">
#{pid,jdbcType=VARCHAR},
</if>
<if test="nodeType != null">
#{nodeType,jdbcType=VARCHAR},
</if>
<if test="modelType != null">
#{modelType,jdbcType=VARCHAR},
</if>
<if test="modelInnerType != null">
#{modelInnerType,jdbcType=VARCHAR},
</if>
<if test="authType != null">
#{authType,jdbcType=VARCHAR},
</if>
<if test="createBy != null">
#{createBy,jdbcType=VARCHAR},
</if>
<if test="name != null">
#{name,jdbcType=LONGVARCHAR},
</if>
<if test="label != null">
#{label,jdbcType=LONGVARCHAR},
</if>
</trim>
</insert>
<select id="countByExample" parameterType="io.dataease.base.domain.VAuthModelExample" resultType="java.lang.Long">
select count(*) from v_auth_model
<if test="_parameter != null">
<include refid="Example_Where_Clause" />
</if>
</select>
<update id="updateByExampleSelective" parameterType="map">
update v_auth_model
<set>
<if test="record.id != null">
id = #{record.id,jdbcType=VARCHAR},
</if>
<if test="record.pid != null">
pid = #{record.pid,jdbcType=VARCHAR},
</if>
<if test="record.nodeType != null">
node_type = #{record.nodeType,jdbcType=VARCHAR},
</if>
<if test="record.modelType != null">
model_type = #{record.modelType,jdbcType=VARCHAR},
</if>
<if test="record.modelInnerType != null">
model_inner_type = #{record.modelInnerType,jdbcType=VARCHAR},
</if>
<if test="record.authType != null">
auth_type = #{record.authType,jdbcType=VARCHAR},
</if>
<if test="record.createBy != null">
create_by = #{record.createBy,jdbcType=VARCHAR},
</if>
<if test="record.name != null">
`name` = #{record.name,jdbcType=LONGVARCHAR},
</if>
<if test="record.label != null">
`label` = #{record.label,jdbcType=LONGVARCHAR},
</if>
</set>
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
<update id="updateByExampleWithBLOBs" parameterType="map">
update v_auth_model
set id = #{record.id,jdbcType=VARCHAR},
pid = #{record.pid,jdbcType=VARCHAR},
node_type = #{record.nodeType,jdbcType=VARCHAR},
model_type = #{record.modelType,jdbcType=VARCHAR},
model_inner_type = #{record.modelInnerType,jdbcType=VARCHAR},
auth_type = #{record.authType,jdbcType=VARCHAR},
create_by = #{record.createBy,jdbcType=VARCHAR},
`name` = #{record.name,jdbcType=LONGVARCHAR},
`label` = #{record.label,jdbcType=LONGVARCHAR}
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
<update id="updateByExample" parameterType="map">
update v_auth_model
set id = #{record.id,jdbcType=VARCHAR},
pid = #{record.pid,jdbcType=VARCHAR},
node_type = #{record.nodeType,jdbcType=VARCHAR},
model_type = #{record.modelType,jdbcType=VARCHAR},
model_inner_type = #{record.modelInnerType,jdbcType=VARCHAR},
auth_type = #{record.authType,jdbcType=VARCHAR},
create_by = #{record.createBy,jdbcType=VARCHAR}
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
</mapper>
\ No newline at end of file
backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java 0 → 100644
浏览文件 @ c6aa9af3
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 {
}
backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java 0 → 100644
浏览文件 @ c6aa9af3
package io.dataease.dto.authModel;
import io.dataease.base.domain.VAuthModel;
/**
* Author: wangjiahao
* Date: 2021/11/5
* Description:
*/
public class VAuthModelDTO extends VAuthModel {
}
backend/src/main/resources/generatorConfig.xml
浏览文件 @ c6aa9af3
......@@ -65,10 +65,10 @@
<!--要生成的数据库表 -->
<table tableName="panel_link_jump"/>
<table tableName="panel_link_jump_info"/>
<table tableName="panel_link_jump_target_view_info"/>
<table tableName="chart_view"/>
<!-- <table tableName="panel_link_jump"/>-->
<!-- <table tableName="panel_link_jump_info"/>-->
<!-- <table tableName="panel_link_jump_target_view_info"/>-->
<table tableName="v_auth_model"/>
<!-- <table tableName="sys_dict_item"/>-->
<!-- <table tableName="dataset_table_field"/>-->
......
frontend/package.json
浏览文件 @ c6aa9af3
......@@ -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",
......
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
浏览文件 @ c6aa9af3
......@@ -27,6 +27,7 @@
:is-edit="false"
:element="config"
:search-count="searchCount"
:h="config.style.height"
/>
</div>
</template>
......@@ -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 => {
......
frontend/src/components/canvas/components/Editor/VideoLinks.vue 0 → 100644
浏览文件 @ c6aa9af3
<template>
<el-popover
ref="popover"
width="340"
trigger="click"
>
<el-row>
<el-form ref="form" size="mini" label-width="70px">
<el-form-item :label="'自动播放'">
<el-switch v-model="linkInfoTemp.autoplay" size="mini" />
<span v-show="linkInfoTemp.autoplay" style="color: #909399; font-size: 8px;margin-left: 3px">
<!-- Tips:{{ $t('panel.link_open_tips') }}-->
</span>
</el-form-item>
<el-form-item :label="$t('panel.open_mode')">
<el-radio-group v-model="linkInfoTemp.loop">
<el-radio :label="false">播放一次</el-radio>
<el-radio :label="true">循环播放</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.hyperLinks')">
<el-input v-model="linkInfoTemp.sources[0].src" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<i slot="reference" class="icon iconfont icon-chaolianjie" />
</el-popover>
</template>
<script>
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
props: {
linkInfo: {
type: Object,
required: true
}
},
data() {
return {
linkInfoTemp: null,
componentType: null,
linkageActiveStatus: false,
editFilter: [
'view',
'custom'
]
}
},
mounted() {
this.linkInfoTemp = deepCopy(this.linkInfo)
},
computed: {
...mapState([
'curComponent'
])
},
methods: {
onSubmit() {
this.curComponent.videoLinks = this.linkInfoTemp
this.$store.state.styleChangeTimes++
this.popoverClose()
},
onClose() {
this.$emit('close')
this.popoverClose()
},
popoverClose() {
this.$refs.popover.showPopper = false
}
}
}
</script>
<style lang="scss" scoped>
.slot-class{
color: white;
}
.bottom {
margin-top: 20px;
text-align: center;
}
.ellip{
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/
background-color: #f7f8fa;
color: #3d4d66;
font-size: 12px;
line-height: 24px;
height: 24px;
border-radius: 3px;
}
.select-filed{
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/
color: #3d4d66;
font-size: 12px;
line-height: 35px;
height: 35px;
border-radius: 3px;
}
>>>.el-popover{
height: 200px;
overflow: auto;
}
</style>
frontend/src/components/canvas/components/Editor/index.vue
浏览文件 @ c6aa9af3
......@@ -55,9 +55,6 @@
@amAddItem="addItemBox(item)"
@linkJumpSet="linkJumpSet(item)"
>
<!-- <span style="position:relative;left: 0px;top:0px">-->
<!-- item:x-{{ item.x }}y-{{ item.y }}top-{{ item.style.top }}-->
<!-- </span>-->
<component
:is="item.component"
v-if="item.type==='v-text'"
......@@ -72,17 +69,6 @@
:active="item === curComponent"
@input="handleInput"
/>
<!-- <out-widget
:is="item.component"
v-else-if="item.type==='custom'"
:id="'component' + item.id"
class="component"
:style="getComponentStyleDefault(item.style)"
:prop-value="item.propValue"
:element="item"
:out-style="getShapeStyleInt(item.style)"
:active="item === curComponent"
/> -->
<de-out-widget
v-else-if="item.type==='custom'"
:id="'component' + item.id"
......@@ -117,6 +103,7 @@
:element="item"
:out-style="getShapeStyleInt(item.style)"
:active="item === curComponent"
:h="getShapeStyleIntDeDrag(item.style,'height')"
/>
</de-drag>
<!--拖拽阴影部分-->
......
frontend/src/components/canvas/components/TextAttr.vue
浏览文件 @ c6aa9af3
......@@ -136,6 +136,11 @@
<Hyperlinks :link-info="curComponent.hyperlinks" />
</el-tooltip>
</div>
<div v-if="attrShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="视频信息">
<VideoLinks :link-info="curComponent.videoLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="日期格式">
......@@ -150,10 +155,11 @@
<script>
import { mapState } from 'vuex'
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
import DateFormat from '@/components/canvas/components/Editor/DateFormat'
export default {
components: { Hyperlinks, DateFormat },
components: { Hyperlinks, DateFormat, VideoLinks },
props: {
scrollLeft: {
type: Number,
......@@ -273,6 +279,11 @@ export default {
'color',
'backgroundColor',
'hyperlinks'
],
// 文本组件显示的属性
'de-video': [
'opacity',
'videoLinks'
]
}
},
......
frontend/src/components/canvas/custom-component/DeVideo.vue 0 → 100644
浏览文件 @ c6aa9af3
<template>
<el-row ref="mainPlayer">
<div v-if="this.element.videoLinks.sources[0].src" class="player">
<video-player
ref="videoPlayer"
class="vjs-custom-skin"
:options="playerOptions"
:playsinline="true"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"
/>
</div>
<div v-else class="info-class">
请点击添加配置视频信息...
</div>
</el-row>
</template>
<script>
// custom skin css
import '@/custom-theme.css'
import { mapState } from 'vuex'
export default {
props: {
// eslint-disable-next-line vue/require-default-prop
propValue: {
type: String,
require: true
},
// eslint-disable-next-line vue/require-default-prop
element: {
type: Object
},
editMode: {
type: String,
require: false,
default: 'preview'
},
active: {
type: Boolean,
require: false,
default: false
},
h: {
type: Number,
default: 200
}
},
data() {
return {
}
},
computed: {
player() {
return this.$refs.videoPlayer.player
},
playerOptions() {
const videoLinks = this.element.videoLinks
let playHeight = this.h
if (this.canvasStyleData.panel.gap) {
playHeight = this.h - (this.componentGap * 2)
}
videoLinks.height = playHeight
return videoLinks
},
...mapState([
'componentGap',
'canvasStyleData'
])
},
mounted() {
// console.log('this is current player instance object', this.player)
setTimeout(() => {
console.log('dynamic change options', this.player)
// change src
// this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
// change item
// this.$set(this.playerOptions.sources, 0, {
// type: "video/mp4",
// src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
// })
// change array
// this.playerOptions.sources = [{
// type: "video/mp4",
// src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
// }]
this.player.muted(false)
}, 5000)
},
methods: {
// listen event
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
onPlayerEnded(player) {
// console.log('player ended!', player)
},
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
onPlayerCanplaythrough(player) {
// console.log('player Ca
// console.log('example 01nplaythrough!', player)
},
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
// seek to 10s
console.log('example player 1 readied', player)
// player.currentTime(10): the player is readied', player)
}
}
}
</script>
<style>
.info-class{
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
font-size: 12px;
color: #9ea6b2;
}
</style>
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ c6aa9af3
......@@ -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
}
]
......
frontend/src/components/canvas/custom-component/index.js
浏览文件 @ c6aa9af3
......@@ -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)
frontend/src/custom-theme.css 0 → 100755
浏览文件 @ c6aa9af3
.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;
}
frontend/src/main.js
浏览文件 @ c6aa9af3
......@@ -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
......
frontend/src/store/index.js
浏览文件 @ c6aa9af3
......@@ -66,7 +66,10 @@ const data = {
nowPanelJumpInfoTargetPanel: {}, // 当前仪表板的跳转信息(只包括仪表板)
// 拖拽的组件信息
dragComponentInfo: null
dragComponentInfo: null,
// 仪表板组件间隙大小 px
componentGap: 5
},
mutations: {
...animation.mutations,
......
frontend/src/styles/deicon/demo_index.html
浏览文件 @ c6aa9af3
......@@ -54,6 +54,54 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">video</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e8;</span>
<div class="name">悬浮按钮发动态</div>
<div class="code-name">&amp;#xe6e8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe697;</span>
<div class="name">吸附选择</div>
<div class="code-name">&amp;#xe697;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe902;</span>
<div class="name">margin</div>
<div class="code-name">&amp;#xe902;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe91b;</span>
<div class="name">padding</div>
<div class="code-name">&amp;#xe91b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9a8;</span>
<div class="name">tabs</div>
<div class="code-name">&amp;#xe9a8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe665;</span>
<div class="name">时间</div>
<div class="code-name">&amp;#xe665;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fb;</span>
<div class="name">时间格式转换</div>
<div class="code-name">&amp;#xe6fb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b2;</span>
<div class="name">超链接</div>
......@@ -102,12 +150,6 @@
<div class="code-name">&amp;#xe8e6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">44.tabs</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">洗浴</div>
......@@ -420,9 +462,9 @@
<pre><code class="language-css"
>@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');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -448,6 +490,78 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-video"></span>
<div class="name">
video
</div>
<div class="code-name">.icon-video
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuanfuanniufadongtai"></span>
<div class="name">
悬浮按钮发动态
</div>
<div class="code-name">.icon-xuanfuanniufadongtai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xifuxuanze"></span>
<div class="name">
吸附选择
</div>
<div class="code-name">.icon-xifuxuanze
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-margin"></span>
<div class="name">
margin
</div>
<div class="code-name">.icon-margin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-padding"></span>
<div class="name">
padding
</div>
<div class="code-name">.icon-padding
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tabs"></span>
<div class="name">
tabs
</div>
<div class="code-name">.icon-tabs
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shijian"></span>
<div class="name">
时间
</div>
<div class="code-name">.icon-shijian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shijiangeshizhuanhuan"></span>
<div class="name">
时间格式转换
</div>
<div class="code-name">.icon-shijiangeshizhuanhuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chaolianjie"></span>
<div class="name">
......@@ -520,15 +634,6 @@
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tabs"></span>
<div class="name">
44.tabs
</div>
<div class="code-name">.icon-tabs
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiyu"></span>
<div class="name">
......@@ -997,6 +1102,70 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-video"></use>
</svg>
<div class="name">video</div>
<div class="code-name">#icon-video</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuanfuanniufadongtai"></use>
</svg>
<div class="name">悬浮按钮发动态</div>
<div class="code-name">#icon-xuanfuanniufadongtai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xifuxuanze"></use>
</svg>
<div class="name">吸附选择</div>
<div class="code-name">#icon-xifuxuanze</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-margin"></use>
</svg>
<div class="name">margin</div>
<div class="code-name">#icon-margin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-padding"></use>
</svg>
<div class="name">padding</div>
<div class="code-name">#icon-padding</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tabs"></use>
</svg>
<div class="name">tabs</div>
<div class="code-name">#icon-tabs</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shijian"></use>
</svg>
<div class="name">时间</div>
<div class="code-name">#icon-shijian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shijiangeshizhuanhuan"></use>
</svg>
<div class="name">时间格式转换</div>
<div class="code-name">#icon-shijiangeshizhuanhuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chaolianjie"></use>
......@@ -1061,14 +1230,6 @@
<div class="code-name">#icon-xuanfuanniu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tabs"></use>
</svg>
<div class="name">44.tabs</div>
<div class="code-name">#icon-tabs</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiyu"></use>
......
frontend/src/styles/deicon/iconfont.css
浏览文件 @ c6aa9af3
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1634802523514') format('woff2'),
url('iconfont.woff?t=1634802523514') format('woff'),
url('iconfont.ttf?t=1634802523514') 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 {
......@@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-video:before {
content: "\e625";
}
.icon-xuanfuanniufadongtai:before {
content: "\e6e8";
}
.icon-xifuxuanze:before {
content: "\e697";
}
.icon-margin:before {
content: "\e902";
}
......
frontend/src/styles/deicon/iconfont.js
浏览文件 @ c6aa9af3
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ c6aa9af3
......@@ -5,6 +5,27 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "5994030",
"name": "video",
"font_class": "video",
"unicode": "e625",
"unicode_decimal": 58917
},
{
"icon_id": "18545906",
"name": "悬浮按钮发动态",
"font_class": "xuanfuanniufadongtai",
"unicode": "e6e8",
"unicode_decimal": 59112
},
{
"icon_id": "21285292",
"name": "吸附选择",
"font_class": "xifuxuanze",
"unicode": "e697",
"unicode_decimal": 59031
},
{
"icon_id": "924440",
"name": "margin",
......
frontend/src/views/panel/AssistComponent/index.vue
浏览文件 @ c6aa9af3
......@@ -27,7 +27,7 @@
<div class="widget-subject">
<div class="filter-header">
<div class="filter-header-text">
<span>图片</span>
<span>多媒体</span>
</div>
</div>
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ c6aa9af3
......@@ -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
......
frontend/src/views/panel/video/index.vue 0 → 100644
浏览文件 @ c6aa9af3
<template>
<DeVideo />
</template>
<script>
import DeVideo from '@/components/canvas/custom-component/DeVideo'
export default {
name: 'Video',
components: { DeVideo },
data() {
return {}
},
mounted() {
},
methods: {
}
}
</script>
<style scoped>
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论