yks-element 1.0.0 → 1.0.4

package/packages/Video/src/index.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="yks-multimedia__video">
+        <div
+            class="yks-stem__videos yks-flex h-center v-center"
+            :class="{ 'yks-dialog-pause': playing }"
+        >
+            <video
+                :ref="videoId"
+                :width="width"
+                :height="height"
+                :src="src"
+                :poster="musicBgs"
+                playsinline
+                webkit-playsinline
+                preload="auto"
+                class="yks-file__videos"
+                @timeupdate="durationUpdate"
+                @canplay="getDuration"
+            ></video>
+            <div v-if="!isInfinity" class="yks-slider-video">
+                <i class="el-icon-video-pause video-icon_mini" @click.stop="handlePause"></i>
+                <Slider
+                    v-model="musicDuration"
+                    :max="musicAllDuration"
+                    height="2px"
+                    :show-tooltip="false"
+                    class="slider__value"
+                    @change="changeMusicDuration"
+                    @mousedown.native="isChange = true"
+                    @mouseup.native="isChange = false"
+                ></Slider>
+                <span class="slider__text video-icon_mini">{{ formatTime(musicAllDuration) }}</span>
+                <i
+                    v-if="fileType === '3'"
+                    class="el-icon-full-screen video-icon_mini"
+                    @click.stop="handleFullScreen"
+                ></i>
+            </div>
+            <div
+                v-if="!playing || isInfinity"
+                class="yks-dialog-playing yks-flex h-center v-center"
+                @click.stop="handlePlaying"
+            >
+                <i :class="[`yks-icon-recording ${playingIcon}`]"></i>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import videoBg from 'yks/icon/video-bg.png'
+import musicBg1 from 'yks/icon/music-bg.png'
+import { Slider } from 'element-ui'
+import { formatTimeMin } from 'yks/assets/utils/index'
+export default {
+    name: 'YksVideo',
+    components: {
+        Slider
+    },
+    props: {
+        src: { type: String, require: true },
+        width: { type: Number, default: 160 },
+        height: { type: Number, default: 90 }
+    },
+    data() {
+        return {
+            /* 播放状态 */
+            playing: false,
+            /* 歌曲总时长 */
+            musicAllDuration: 0,
+            /* 歌曲当前时长 */
+            musicDuration: 0,
+            /* 判断是否被拖动 */
+            isChange: false,
+            /* 判断是否为Infinity */
+            isInfinity: false
+        }
+    },
+    computed: {
+        playingIcon() {
+            if (this.playing) {
+                return 'el-icon-video-pause'
+            } else {
+                return 'el-icon-video-play'
+            }
+        },
+        /* 播放背景图 */
+        musicBgs() {
+            if (this.fileType === '3') {
+                return videoBg
+            }
+            if (this.playing) {
+                return 'https://pub-static.yks365.net/assets/image/music-bg.gif'
+            } else {
+                return musicBg1
+            }
+        },
+        /* 获取文件后缀 */
+        fileNameType() {
+            const url = this.src
+            return url.substr(url.lastIndexOf('.') + 1).toLowerCase()
+        },
+        /* 获取文件类型 */
+        fileType() {
+            if (['mp3'].includes(this.fileNameType)) {
+                return '2'
+            }
+            if (['mp4'].includes(this.fileNameType)) {
+                return '3'
+            }
+            return false
+        },
+        /* 播放图标 */
+        iconName() {
+            if (!this.playing) {
+                return 'el-icon-video-play'
+            } else {
+                return 'el-icon-video-pause'
+            }
+        },
+        /* 组件key */
+        videoId() {
+            return `video${Date.now()}${(Math.random() * 1000).toFixed(0)}`
+        }
+    },
+    created() {
+        /* 监听播放状态 */
+        this.$nextTick(() => {
+            if (this.fileType === '2' || this.fileType === '3') {
+                const video = this.$refs[this.videoId]
+                video.addEventListener('play', () => {
+                    this.playing = true
+                })
+                video.addEventListener('pause', () => {
+                    this.playing = false
+                })
+            }
+        })
+    },
+    methods: {
+        handleFullScreen() {
+            const video = this.$refs[this.videoId]
+            const requestMethod =
+                video.requestFullScreen ||
+                video.webkitRequestFullScreen ||
+                video.mozRequestFullScreen ||
+                video.msRequestFullScreen
+            if (requestMethod) {
+                requestMethod.call(video)
+            } else if (typeof window.ActiveXObject !== 'undefined') {
+                // eslint-disable-next-line no-undef
+                const wscript = new ActiveXObject('WScript.Shell')
+                if (wscript !== null) {
+                    wscript.SendKeys('{F11}')
+                }
+            }
+        },
+        /* 进度时间转换 */
+        formatTime(time) {
+            return formatTimeMin(time)
+        },
+        /* 进度条时间定位 */
+        changeMusicDuration() {
+            if (this.musicAllDuration !== 0) {
+                const video = this.$refs[this.videoId]
+                video.currentTime = this.musicDuration
+            }
+        },
+        /* 获取音视频时长 */
+        getDuration() {
+            const video = this.$refs[this.videoId]
+
+            if (!Number.isFinite(video.duration)) {
+                this.musicAllDuration = 300
+                this.isInfinity = true
+            } else {
+                this.isInfinity = false
+                this.musicAllDuration = video.duration
+            }
+        },
+        /* 获取音视频播放当前时间 */
+        durationUpdate() {
+            if (!this.isChange) {
+                const video = this.$refs[this.videoId]
+                this.musicDuration = video.currentTime
+            }
+        },
+        /* 播放 */
+        handlePlaying() {
+            if (!this.playing) {
+                this.$refs[this.videoId].play()
+            } else {
+                this.handlePause()
+            }
+        },
+        /* 暂停 */
+        handlePause() {
+            if (this.playing) {
+                this.$refs[this.videoId].pause()
+            }
+        }
+    }
+}
+</script>
+

package/packages/assets/mixins/topic.js

@@ -0,0 +1,137 @@
+import { toolbar, plugins, toolbarSpare } from '../utils/topic'
+
+export default {
+    model: {
+        prop: 'fromData',
+        event: 'change'
+    },
+    props: {
+        topicDataExtent: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        },
+        uploadFileCloud: {
+            required: true,
+            type: Function
+        },
+        fromData: {
+            required: true,
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            pageLoading: false,
+            processing: false,
+            toolbar: toolbar,
+            toolbarSpare: toolbarSpare,
+            plugins: plugins,
+            topic: {
+                single: '单项选择题',
+                multiple: '多项选择题',
+                judgment: '判断题',
+                short_answer: '简答题'
+            }
+        }
+    },
+    methods: {
+        /**
+         * 获取题类型
+         * @param {string} type
+         * @return {Object}
+         */
+        getFileType(type, data) {
+            if (data) {
+                let params = {}
+                switch (type) {
+                    case 'stem':
+                        params = {
+                            stem_voiceRecord: 'recording',
+                            stem_video: 'video',
+                            stem_audio: 'audio',
+                            stem_document: 'file'
+                        }
+                        break
+                    case 'answer':
+                        params = {
+                            answer_voiceRecord: 'recording',
+                            answer_video: 'video',
+                            answer_audio: 'audio',
+                            answer_document: 'file'
+                        }
+                        break
+                    case 'option':
+                        params = {
+                            option_voiceRecord: 'recording',
+                            option_video: 'video',
+                            option_audio: 'audio',
+                            option_document: 'file'
+                        }
+                        break
+                    case 'analysis':
+                        params = {
+                            description_voiceRecord: 'recording',
+                            description_video: 'video',
+                            description_audio: 'audio',
+                            description_document: 'file'
+                        }
+                        break
+                }
+                const fileType = params[data.type]
+
+                return {
+                    ...data,
+                    fileType
+                }
+            }
+            return false
+        },
+        getFileTypes(type, list) {
+            return (list || []).map((v) => this.getFileType(type, v))
+        },
+        async uploadFileToHwCloud(file) {
+            try {
+                const fileData = new FormData()
+                fileData.append('fileType', 'stem')
+                fileData.append('file', file.blob())
+                const { data, code } = await this.uploadFileCloud(fileData)
+                if (code === 20000) {
+                    return data
+                } else {
+                    return ''
+                }
+            } catch (error) {
+                console.log(error)
+                return ''
+            }
+        },
+        async uploadFileFunction({ file, fileData }) {
+            try {
+                const fileDatas = new FormData()
+                if (fileData.fileType === 'recording') {
+                    const fileNmae = Date.now() + '.mp3'
+                    const files = new File([file.data], fileNmae)
+                    fileDatas.append('fileType', 'multimediaFile')
+                    fileDatas.append('file', files)
+                } else {
+                    fileDatas.append('fileType', 'multimediaFile')
+                    fileDatas.append('file', file.raw)
+                }
+                const { data, code } = await this.uploadFileCloud(fileDatas)
+                if (code === 20000) {
+                    return data
+                } else {
+                    return Promise.reject(new Error('出错了'))
+                }
+            } catch (error) {
+                console.log(error)
+                return Promise.reject(error)
+            }
+        }
+    }
+}

package/packages/assets/utils/index.js

@@ -0,0 +1,83 @@
+
+/**
+ * @param {string} time
+ * @returns {string}
+ */
+export function formatTime(time) {
+    if (!time) {
+        return '00:00:00'
+    }
+    const value = parseInt(time, 10)
+    let HH
+    let MM
+    let SS
+    switch (true) {
+        case value < 60:
+            if (value < 10) {
+                SS = '0' + value
+            } else {
+                SS = value
+            }
+            return `00:00:${SS}`
+        case value >= 60 && value < 3600:
+            MM = parseInt((value / 60).toString(), 10)
+            SS = parseInt((value % 60).toString(), 10)
+            if (MM < 10) {
+                MM = '0' + MM
+            }
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            return `00:${MM}:${SS}`
+        case value >= 3600:
+            HH = parseInt((value / 3600).toString(), 10)
+            MM = parseInt((value / 60).toString(), 10) - HH * 60
+            SS = parseInt((value % 60).toString(), 10)
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            if (MM < 10) {
+                MM = '0' + MM
+            }
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            return `${HH}:${MM}:${SS}`
+        default:
+            throw new Error('Val data is abnormal, please check the data!')
+    }
+}
+
+/**
+ * @param {string} time
+ * @returns {string}
+ */
+export function formatTimeMin(time) {
+    if (!time) {
+        return '00:00'
+    }
+    const value = parseInt(time, 10)
+    let MM
+    let SS
+    switch (true) {
+        case value < 60:
+            if (value < 10) {
+                SS = '0' + value
+            } else {
+                SS = value
+            }
+            return `00:${SS}`
+        case value >= 60:
+            MM = parseInt((value / 60).toString(), 10)
+            SS = parseInt((value % 60).toString(), 10)
+            if (MM < 10) {
+                MM = '0' + MM
+            }
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            return `${MM}:${SS}`
+        default:
+            throw new Error('Val data is abnormal, please check the data!')
+    }
+}

package/packages/assets/utils/topic.js

@@ -0,0 +1,132 @@
+/**
+ * uploadRecording 录音
+ * uploadVideo 视频
+ * uploadAudio 音频
+ * uploadFile 文件
+ */
+
+export const toolbar = [
+    'bold underline italic strikethrough | kityformula-editor subscript superscript charmap | link image | table | removeformat | uploadRecording uploadVideo uploadAudio uploadFile'
+]
+
+/* 选项、填空等 */
+export const toolbarSpare = ['kityformula-editor subscript superscript charmap']
+
+/* 插件 */
+export const plugins = ['kityformula-editor powerpaste lists image media table charmap imagetools']
+
+/* 选项字符 */
+export const letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）：题干 / 标题 - 类型 */
+export const stemItemType = {
+    recording: 'stem_voiceRecord',
+    video: 'stem_video',
+    audio: 'stem_audio',
+    file: 'stem_document'
+}
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）： 标准答案 - 类型 */
+export const shortItemType = {
+    recording: 'answer_voiceRecord',
+    video: 'answer_video',
+    audio: 'answer_audio',
+    file: 'answer_document'
+}
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）： 选项  - 类型 */
+export const optionItemType = {
+    recording: 'option_voiceRecord',
+    video: 'option_video',
+    audio: 'option_audio',
+    file: 'option_document'
+}
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）： 答案解析 - 类型 */
+export const analysisItemType = {
+    recording: 'description_voiceRecord',
+    video: 'description_video',
+    audio: 'description_audio',
+    file: 'description_document'
+}
+
+/**
+ * 获取题类型
+ * @param {string} type
+ * @return {Object}
+ */
+export const getFileType = (type, data) => {
+    if (data) {
+        let params = {}
+        switch (type) {
+            case 'stem':
+                params = {
+                    stem_voiceRecord: 'recording',
+                    stem_video: 'video',
+                    stem_audio: 'audio',
+                    stem_document: 'file'
+                }
+                break
+            case 'answer':
+                params = {
+                    answer_voiceRecord: 'recording',
+                    answer_video: 'video',
+                    answer_audio: 'audio',
+                    answer_document: 'file'
+                }
+                break
+            case 'option':
+                params = {
+                    option_voiceRecord: 'recording',
+                    option_video: 'video',
+                    option_audio: 'audio',
+                    option_document: 'file'
+                }
+                break
+            case 'analysis':
+                params = {
+                    description_voiceRecord: 'recording',
+                    description_video: 'video',
+                    description_audio: 'audio',
+                    description_document: 'file'
+                }
+                break
+        }
+        const fileType = params[data.type]
+
+        return {
+            ...data,
+            fileType
+        }
+    }
+    return false
+}
+
+export const itemDataLists = () => {
+    return [
+        {
+            optionName: 'A',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        },
+        {
+            optionName: 'B',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        },
+        {
+            optionName: 'C',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        },
+        {
+            optionName: 'D',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        }
+    ]
+}