提交 01e10714 authored 作者: 王腾飞's avatar 王腾飞
<template>
<div class="audio-wrap" v-loading="audio.waiting">
<audio ref="audio" class="hide"
:src="url"
:preload="audio.preload"
@play="onPlay"
@error="onError"
@waiting="onWaiting"
@pause="onPause"
@timeupdate="onTimeupdate"
@loadedmetadata="onLoadedmetadata" ></audio>
<div class="mock-audio-con">
<!-- 播放、暂停控制 -->
<a
@click="startPlayOrPause"
:class="['play-control',{'opt-play':audio.playing, 'opt-pause':!audio.playing}]">
<i></i>
</a>
<!-- 播放进度条 -->
<el-slider
v-show="!controlList.noProcess"
v-model="sliderTime"
:format-tooltip="formatProcessToolTip"
@change="changeCurrentTime"
class="slider" ></el-slider>
<!-- 播放时间进度 -->
<span class="audio-time">{{ audio.currentTime | formatSecond}} / {{ audio.maxTime | formatSecond }}</span>
<!-- 控制播放静音 -->
<a
v-show="!controlList.noMuted"
@click="startMutedOrNot"
:class="['muted-control',{'opt-muted':audio.muted, 'opt-not-muted':!audio.muted}]">
<i></i>
</a>
</div>
</div>
</template>
<script>
import { realFormatSecond } from '@/utils/str'
export default {
props: {
audioUrl: {
type: String,
required: true,
},
// controlList: {
// type: String,
// default: ''
// }
},
name: 'VueAudio',
data() {
return {
url: this.audioUrl || 'http://front-end.bjcnc.scs.sohucs.com/track-report-sit/falling-star.mp3',
audio: {
currentTime: 0,
maxTime: 0,
playing: false,
muted: false,
waiting: true,
preload: 'auto'
},
sliderTime: 0,
volume: 100,
controlList: {
// 不显示静音
noMuted: false,
// 不显示进度条
noProcess: false,
// 只能播放一个
onlyOnePlaying: false,
}
}
},
methods: {
setControlList () {
let controlList = this.controlList.split(' ')
controlList.forEach((item) => {
if(this.controlList[item] !== undefined){
this.controlList[item] = true
}
})
},
startMutedOrNot() {
this.$refs.audio.muted = !this.$refs.audio.muted
this.audio.muted = this.$refs.audio.muted
},
// 进度条toolTip
formatProcessToolTip(index = 0) {
index = parseInt(this.audio.maxTime / 100 * index)
return '进度条: ' + realFormatSecond(index)
},
// 播放跳转
changeCurrentTime(index) {
this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
},
startPlayOrPause() {
return this.audio.playing ? this.pausePlay() : this.startPlay()
},
// 开始播放
startPlay() {
this.$refs.audio.play()
},
// 暂停
pausePlay() {
this.$refs.audio.pause()
},
// 当音频暂停
onPause () {
this.audio.playing = false
},
// 当发生错误, 就出现loading状态
onError () {
this.audio.waiting = true
},
// 当音频开始等待
onWaiting (res) {
console.log(res)
},
// 当音频开始播放
onPlay (res) {
console.log(res)
this.audio.playing = true
this.audio.loading = false
if(!this.controlList.onlyOnePlaying){
return
}
let target = res.target
let audios = document.getElementsByTagName('audio');
[...audios].forEach((item) => {
if(item !== target){
item.pause()
}
})
},
// 当timeupdate事件大概每秒一次,用来更新音频流的当前播放时间
onTimeupdate(res) {
// console.log('timeupdate')
// console.log(res)
this.audio.currentTime = res.target.currentTime
this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
},
// 当加载语音流元数据完成后,会触发该事件的回调函数
// 语音元数据主要是语音的长度之类的数据
onLoadedmetadata(res) {
console.log('loadedmetadata')
console.log(res)
this.audio.waiting = false
this.audio.maxTime = parseInt(res.target.duration)
}
},
filters: {
formatSecond(second = 0) {
return realFormatSecond(second)
},
transPlayPause(value) {
return value ? '暂停' : '播放'
},
transMutedOrNot(value) {
return value ? '放音' : '静音'
},
},
created() {
//this.setControlList()
}
}
</script>
<style lang="scss" scoped>
.audio-wrap{
width: 100%;
margin: 20px auto;
// background: rgba(255,255,255,1);
box-shadow: 0px 2px 20px 0px rgba(1,2,2,0.08);
// border-radius: 30px;
text-align: center;
display: block;
.mock-audio-con{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.play-control{
margin-right: 20px;
i{
display: inline-block;
width: 28px;
height: 28px;
vertical-align: middle;
}
}
.opt-play{
i{
background: url('~@/assets/icon_bofang.png') center center no-repeat;
background-size: 100% 100%;
}
}
.opt-pause{
i{
background: url('~@/assets/icon_zanting.png') center center no-repeat;
background-size: 100% 100%;
}
}
.slider {
display: inline-block;
width: 50%;
position: relative;
margin-right: 20px;
}
.audio-time{
display: inline-block;
margin-right: 20px;
}
.muted-control{
i{
display: inline-block;
width: 28px;
height: 28px;
}
}
.opt-muted{
i{
background: url('~@/assets/icon_jingyin.png') center center no-repeat;
background-size: 100% 100%;
}
}
.opt-not-muted{
i{
background: url('~@/assets/icon_yinliang.png') center center no-repeat;
background-size: 100% 100%;
}
}
}
</style>
<!-- ckplayer 播放器 -->
<template>
<div class="ckplayer-vidoe-wrap">
<div class="ckplayerVideo" id="ckplayerVideo" ref="ckplayerVideo" style="width: 600px; height: 400px;"></div>
<div v-if="poster" @click="handleClickPoster" class="video-poster">
<img :src="poster"/>
</div>
</div>
</template>
<script >
import { playerConfig } from './config'
export default{
data() {
return {
playerConfig: playerConfig,
// currentVideo:[
// // ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0]
// ], // 当前需要播放的视频信息 ['videoUrl','video/m3u8']
currentVideo: '',
player: null,
// poster: '', // 视频封面
}
},
props: ['videoSrc','videoType','disabled', 'poster'],
watch: {
'videoSrc': function () {
this.playVideo()
},
},
methods: {
handleClickPoster() {
this.poster = '';
this.player.videoPlay()
},
initCkplayer(playerConfig = this.playerConfig) {
// this.player = null;
// this.player = new ckplayer(playerConfig);
playerConfig.autoplay = false;
this.player = null;
this.player = new ckplayer(playerConfig);
this.player.embed(playerConfig);
this.player.addListener('play', this.playHandler); //监听播放状态
this.player.addListener('error', this.errorHandler); //监听播放状态
},
playHandler() {
console.log('您点击了播放')
if (this.disabled) {
this.player.videoPause();
this.$emit('videoPlay')
return;
}
this.poster = '';
},
errorHandler() {
console.log('视频加载出错')
},
playVideo() {
const videoType = this.videoType || 'video/mp4'
this.currentVideo = '';
const video = `${this.videoSrc}`
this.currentVideo = video
this.playerConfig.video = '';
this.playerConfig.video = video
this.initCkplayer()
},
},
mounted() {
const poster = this.poster||'';
if (poster) {
this.playerConfig.poster = poster
}
this.player = new ckplayer();
(this.videoSrc || this.currentVideo.lenth) && this.playVideo();
}
}
</script>
<style lang="scss">
.ckplayer-vidoe-wrap{
width: 100%;
margin: 20px auto;
min-height: 100px;
position: relative;
.video-poster{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
img{
width: 100%;
height: 100%;
min-width: 600px;
}
}
}
</style>
\ No newline at end of file
/**
* @Author: skyeGao
* @Email: yyjzp1314@126.com
* @DateTime: 2019-03-29 11:24:39
* @Description: video 配置
*/
export const playerConfig = {
container: '.ckplayerVideo',
variable: 'player',
loaded: 'loadedHandler', //当播放器加载后执行的函数
loop: false, //播放结束是否循环播放
autoplay: false, //是否自动播放
//duration: 500, //设置视频总时间
// cktrack: 'http://front-end.bjcnc.scs.sohucs.com/track-report-sit/ckplayer/material/srt.srt', //字幕文件
poster: '', //封面图片 // http://zgsccbs.com/sc/2019/06/14/7f8c7df6701b45c3b5899e6421e54ac3/1.jpg
/*preview: { //预览图片
file: [
'http://front-end.bjcnc.scs.sohucs.com/track-report-sit/ckplayer/material/mydream_en1800_1010_01.png',
'http://front-end.bjcnc.scs.sohucs.com/track-report-sit/ckplayer/material/mydream_en1800_1010_02.png'
],
scale: 2
},*/
config: '', //指定配置函数
debug: true, //是否开启调试模式
//flashplayer: true, //强制使用flashplayer
drag: 'start', //拖动的属性
seek: 0, //默认跳转的时间
//playbackrate:1,//默认速度的编号,只对html5有效,设置成-1则不显示倍速
//advertisements:'website:ad.json',
//front:'frontFun',//上一集的操作函数
//next:'nextFun',//下一集的操作函数
/****************** 广告部分开始 ******************/
adfront: 'http://www.ckplayer.com/yytf/swf/front001.swf,http://www.ckplayer.com/yytf/swf/front002.swf', //前置广告
adfronttime: '15,15',
adfrontlink: '',
adpause: 'http://www.ckplayer.com/yytf/swf/pause001.swf,http://www.ckplayer.com/yytf/swf/pause002.swf',
adpausetime: '5,5',
adpauselink: '',
adinsert: 'http://www.ckplayer.com/yytf/swf/insert001.swf,http://www.ckplayer.com/yytf/swf/insert002.swf',
adinserttime: '10,10',
adinsertlink: '',
inserttime: '10,80',
adend: 'http://www.ckplayer.com/yytf/swf/end001.swf,http://www.ckplayer.com/yytf/swf/end002.swf',
adendtime: '15,15',
adendlink: '',
/****************** 广告部分结束 ******************/
/*promptSpot: [ //提示点
{
words: '提示点文字01',
time: 30
},
{
words: '提示点文字02',
time: 150
}
],*/
//mobileCkControls:true,//是否在移动端(包括ios)环境中显示控制栏
//live:true,//是否是直播视频,true=直播,false=点播
/*video: [
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0]
]*/
/*video: [
['http://zgsccbs.com:8696/file/file/?fileName=1cfe1c68014549f5ad47c695d5b1bb5d','video/mp4']
]*/
// video: [],
flashplayer: false, //设置成true则强制使用flashplayer
html5m3u8: true,//是否在pc端环境使用hls播放m3u8
hlsAutoPlay: false,
video: '',
crossorigin: '*',
logo: null
}
......@@ -10,6 +10,8 @@ import 'normalize.css/normalize.css'// A modern alternative to CSS resets
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ckplayer from "./plugins/ckplayer_v2/ckplayer/ckplayer.js"
import '@/styles/index.scss' // global css
import '../static/font/iconfont.css'
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
差异被折叠。
Copyright (c) 2017 Dailymotion (http://www.dailymotion.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
src/remux/mp4-generator.js and src/demux/exp-golomb.js implementation in this project
are derived from the HLS library for video.js (https://github.com/videojs/videojs-contrib-hls)
That work is also covered by the Apache 2 License, following copyright:
Copyright (c) 2013-2015 Brightcove
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<?xml version="1.0" encoding="utf-8"?>
<language>
<adCountdown>[$second]</adCountdown><!--广告播放结束倒计时-->
<skipDelay>[$second]</skipDelay>
<buttonOver>
<play>点击播放</play>
<pause>暂停播放</pause>
<mute>静音</mute>
<escMute>恢复音量</escMute>
<full>全屏</full>
<escFull>退出全屏</escFull>
<previousPage>上一集</previousPage>
<nextPage>下一集</nextPage>
<definition>点击选择清晰度</definition>
<subtitle>选择字幕</subtitle>
</buttonOver>
<volumeSliderOver>
音量:[$volume]%
</volumeSliderOver>
<buffer>[$percentage]%</buffer>
<timeSliderOver><!--鼠标经过进度条显示的时间格式-->
[$timeh]:[$timei]:[$times]
</timeSliderOver>
<liveAndVod>
[$timeh]:[$timei]:[$times]
</liveAndVod>
<live>
直播中 [$liveTimeY]-[$liveTimem]-[$liveTimed] [$liveTimeh]:[$liveTimei]:[$liveTimes]
</live>
<m3u8Definition>
<name>流畅</name>
<name>低清</name>
<name>标清</name>
<name>高清</name>
<name>超清</name>
<name>蓝光</name>
<name>未知</name>
</m3u8Definition>
<error>
<cannotFindUrl>视频地址不存在</cannotFindUrl>
<streamNotFound>加载失败</streamNotFound>
<formatError>视频格式错误</formatError>
</error>
<definition>自动</definition>
<subtitle>默认</subtitle>
</language>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
<?xml version="1.0" encoding="utf-8"?>
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<style type="text/css">
body {
margin: 0;
padding: 0px;
font-family: "Microsoft YaHei", YaHei, "微软雅黑", SimHei, "黑体";
font-size: 18px;
}
p{
padding-left: 2em;
}
</style>
</head>
<body>
<div id="video" style="width: 100%; height: 400px;max-width: 600px;">
</div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="UTF-8"></script>
<script type="text/javascript">
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player', //播放函数名称
//loop: true, //播放结束是否循环播放
autoplay: true,//是否自动播放
poster: 'material/poster.jpg', //封面图片
preview: { //预览图片
file: ['material/mydream_en1800_1010_01.png', 'material/mydream_en1800_1010_02.png'],
scale: 2
},
//flashplayer:true,
//live:true,
//debug:true,
video:[
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0]
]
};
var player = new ckplayer(videoObject);
</script>
<p>欢迎使用ckplayer,当前版本:X1,<a href="http://www.ckplayer.com/" target="_blank">官网</a><a href="http://www.ckplayer.com/manualX/" target="_blank">帮助手册</a></p>
<p><a href="sample/index.html" target="_blank">全功能演示</a></p>
<p><a href="sample/iframe.html" target="_blank">使用框架播放演示</p>
<p><a href="sample/flashplayer.html" target="_blank">仅flashplayer播放演示</p>
<p><a href="sample/h5.html" target="_blank">仅H5播放演示</p>
<p><a href="sample/rtmp.html" target="_blank">RTMP播放示例</p>
<p><a href="sample/ios.html" target="_blank">在各平台统一播放器风格</p>
<p><a href="sample/dm.html" target="_blank">弹幕演示</p>
<p><a href="sample/adother.html" target="_blank">单独配置广告,支持角标广告和片头贴片,中插,结束广告,暂停广告</p>
<p><a href="http://www.ckplayer.com/" target="_blank">更多演示</p>
</body>
</html>
\ No newline at end of file
1
00:00:01,210 --> 00:00:10,400
= subtitle effect = -
Support multiple rows
2
00:00:11,210 --> 00:00:30,400
Encoding requires UTF-8
3
00:00:31,210 --> 00:01:00,400
The format is .Srt or .vtt.
4
00:01:01,210 --> 00:01:55,400
Thank you for your support for ckplayer
WEBVTT
1
00:00:01.210 --> 00:00:10.400
-=字幕效果=-
支持多行
2
00:00:11.210 --> 00:00:30.400
编码需要使用UTF-8
3
00:00:31.210 --> 00:01:00.400
格式是.srt或.vtt
4
00:01:01.210 --> 00:01:55.400
感谢您对ckplayer的支持
{
"front": [
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/front01.mp4",
"type": "mp4",
"link":"https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=8hiawluh",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
},
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/front02.mp4",
"type": "mp4",
"link": "",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
}
],
"pause": [
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/pause01.jpg",
"type": "jpg",
"link": "",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
},
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/pause02.jpg",
"type": "jpg",
"link":"https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=8hiawluh",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
}
],
"insert": [
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/insert01.mp4",
"type": "mp4",
"link": "",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
},
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/insert02.mp4",
"type": "swf",
"link":"https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=8hiawluh",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
}
],
"inserttime": "10,40",
"end": [
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/end01.mp4",
"type": "mp4",
"link": "",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
},
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/end02.mp4",
"type": "mp4",
"link":"https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=8hiawluh",
"time": 5,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php"
}
],
"other": [
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/other-485-60.jpg",
"type": "gif",
"link":"https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=8hiawluh",
"startTime": 3,
"time": 8,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php",
"align": "center",
"vAlign": "bottom",
"offsetX": -243,
"offsetY": -110,
"about": "这是一个gif广告(宽400,高60),当播放器播放startTime=3秒时显示,time=10秒后结束,水平中间对齐align=center,并且在水平轴上向左边偏移200像素,垂直方向是底部对齐并且向上偏移110个像素"
},
{
"file": "https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-ad/other-120-120.gif",
"type": "gif",
"link":"https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=8hiawluh",
"startTime": 6,
"time": 8,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php",
"align": "right",
"vAlign": "top",
"offsetX": -130,
"offsetY": 10,
"about": "这是一个gif广告(宽400,高60),当播放器播放startTime=3秒时显示,time=10秒后结束,水平中间对齐align=center,并且在水平轴上向左边偏移200像素,垂直方向是底部对齐并且向上偏移110个像素"
},
{
"file": "adv.swf",
"type": "swf",
"link":"https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=8hiawluh",
"startTime": 3,
"time": 10,
"exhibitionMonitor": "exhibitionMonitor.php",
"clickMonitor": "clickMonitor.php",
"align": "right",
"vAlign": "right",
"offsetX": -60,
"offsetY": -60
}
]
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<style type="text/css">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>
</head>
<body>
<div id="video" style="width: 600px; height: 400px;"></div>
<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>
<script type="text/javascript">
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',//播放函数名称
poster:'../material/poster.jpg',//封面图片
advertisements:'website:ad.json',//单独用一个json文件来配置广告
video: [//视频地址列表形式
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0],
]
};
var player = new ckplayer(videoObject);
</script>
<p>本页观看需要在支持h5环境的浏览器上,视频格式需要是h5支持的mp4</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<script type="text/javascript" src="../ckplayer/ckplayer.js" charset="UTF-8"></script>
<style type="text/css">
body {
margin: 0;
padding: 0px;
font-family: "Microsoft YaHei", YaHei, "微软雅黑", SimHei, "黑体";
font-size: 14px
}
#video{
padding-bottom: 20px;
background-color: #0000FF;
z-index: 0px;
}
</style>
</head>
<body>
<div id="video" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var videoObject = {
playerID:'ckplayer01',//播放器ID,第一个字符不能是数字,用来在使用多个播放器时监听到的函数将在所有参数最后添加一个参数用来获取播放器的内容
container: '#video', //容器的ID或className
variable: 'player', //播放函数名称
loaded: 'loadedHandler', //当播放器加载后执行的函数
autoplay:true,
html5m3u8:true,
video: 'http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4'
};
var player = new ckplayer(videoObject);
function loadedHandler() {}
var y=0;
var DArr=[];//弹幕数组
var YArr=[];//元件数组
function newDanmu() {
//弹幕说明
y+=20;
if(y>300)y=0;
var danmuObj = {
list: [{
type: 'image', //定义元素类型:只有二种类型,image=使用图片,text=文本
file: '../material/logo.png', //图片地址
radius: 30, //图片圆角弧度
width: 30, //定义图片宽,必需要定义
height: 30, //定义图片高,必需要定义
alpha: 0.9, //图片透明度(0-1)
marginLeft: 10, //图片离左边的距离
marginRight: 10, //图片离右边的距离
marginTop: 10, //图片离上边的距离
marginBottom: 10, //图片离下边的距离
clickEvent: "link->http://"
}, {
type: 'text', //说明是文本
text: '演示弹幕内容,弹幕只支持普通文本,不支持HTML', //文本内容
color: '0xFFDD00', //文本颜色
size: 14, //文本字体大小,单位:px
font: '"Microsoft YaHei", YaHei, "微软雅黑", SimHei,"\5FAE\8F6F\96C5\9ED1", "黑体",Arial', //文本字体
leading: 30, //文字行距
alpha: 1, //文本透明度(0-1)
paddingLeft: 10, //文本内左边距离
paddingRight: 10, //文本内右边距离
paddingTop: 0, //文本内上边的距离
paddingBottom: 0, //文本内下边的距离
marginLeft: 0, //文本离左边的距离
marginRight: 10, //文本离右边的距离
marginTop: 10, //文本离上边的距离
marginBottom: 0, //文本离下边的距离
backgroundColor: '0xFF0000', //文本的背景颜色
backAlpha: 0.5, //文本的背景透明度(0-1)
backRadius: 30, //文本的背景圆角弧度
clickEvent: "actionScript->videoPlay"
}],
x: '100%', //x轴坐标
y: y, //y轴坐标
//position:[2,1,0],//位置[x轴对齐方式(0=左,1=中,2=右),y轴对齐方式(0=上,1=中,2=下),x轴偏移量(不填写或null则自动判断,第一个值为0=紧贴左边,1=中间对齐,2=贴合右边),y轴偏移量(不填写或null则自动判断,0=紧贴上方,1=中间对齐,2=紧贴下方)]
alpha: 1,
//backgroundColor:'#FFFFFF',
backAlpha: 0.8,
backRadius: 30 //背景圆角弧度
}
var danmu = player.addElement(danmuObj);
var danmuS = player.getElement(danmu);
var obj = {
element: danmu,
parameter: 'x',
static: true, //是否禁止其它属性,true=是,即当x(y)(alpha)变化时,y(x)(x,y)在播放器尺寸变化时不允许变化
effect: 'None.easeOut',
start: null,
end: -danmuS['width']+300,
speed: 10,
overStop: true,
pauseStop: true,
callBack: 'deleteChild'
};
var danmuAnimate = player.animate(obj);
DArr.push(danmuAnimate);
console.log(danmu);
YArr.push(danmu);
}
function deleteChild(ele) {
if(player) {
player.deleteElement(ele);
if(YArr.indexOf(ele)>-1){//在YArr也就是保存弹幕的全局变量里搜索该弹幕,然后删除
var n=YArr.indexOf(ele);
console.log(n)
YArr.splice(n,1);
}
}
}
function delDanmu(){
for(var i=0;i<DArr.length;i++){
console.log(DArr[i])
if(player) {
try{
player.deleteAnimate(DArr[i]);
//player.deleteElement(YArr[i]);
}
catch(error){
console.log(error);
}
}
}
}
function getCoor(){
for(var i=0;i<YArr.length;i++){
console.log(player.getElement(YArr[i]));
//这里可以直接输出所有的弹幕,不能获取到的会返回null
}
}
</script>
<p>
<button type="button" onclick="newDanmu()">添加弹幕</button>
<button type="button" onclick="delDanmu()">删除所有弹幕</button>
<button type="button" onclick="getCoor()">获取所有弹幕的座标,请调出浏览器的开发者工具查看</button>
</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<style type="text/css">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>
</head>
<body>
<div id="video" style="width: 600px; height: 400px;"></div>
<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>
<script type="text/javascript">
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',//播放函数名称
flashplayer:true,//强制使用flashplayer播放
poster:'../material/poster.jpg',//封面图片
video: [//视频地址列表形式
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0],
]
};
var player = new ckplayer(videoObject);
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<style type="text/css">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>
</head>
<body>
<div id="video" style="width: 600px; height: 400px;"></div>
<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>
<script type="text/javascript">
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',//播放函数名称
poster:'../material/poster.jpg',//封面图片
video: [//视频地址列表形式
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0],
]
};
var player = new ckplayer(videoObject);
</script>
<p>本页观看需要在支持h5环境的浏览器上,视频格式需要是h5支持的mp4</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<style type="text/css">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>
</head>
<body>
<iframe src="h5.html" height="500" width="600" frameborder="0" allowfullscreen></iframe>
</body>
</html>
\ No newline at end of file
差异被折叠。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<style type="text/css">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>
</head>
<body>
<div id="video" style="width: 100%; height: 400px;">
<video id="videocontainer" src="http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4"></video>
</div>
<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>
<script type="text/javascript">
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',//播放函数名称
poster:'../material/poster.jpg',//封面图片
mobileCkControls:true,//是否在移动端(包括ios)环境中显示控制栏
mobileAutoFull:false,//在移动端播放后是否按系统设置的全屏播放
h5container:'#videocontainer',//h5环境中使用自定义容器
video: [//视频地址列表形式
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0],
]
};
var player = new ckplayer(videoObject);
</script>
<p>本页观看需要在支持h5环境的浏览器上,视频格式需要是h5支持的mp4</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<style type="text/css">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>
</head>
<body>
<div id="video" style="width: 600px; height: 400px;"></div>
<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>
<script type="text/javascript">
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',//播放函数名称
autoplay:false,
live:true,
video: 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
};
var player = new ckplayer(videoObject);
</script>
</body>
</html>
\ No newline at end of file
软件名称:ckplayer
软件名称:ckplayer
版本:X1
请将ckplayer放在网站环境中运行
\ No newline at end of file
......@@ -95,9 +95,7 @@ const user = {
GetPageButtonList({ commit, state }, pageCode) {
return new Promise((resolve, reject) => {
// console.log(pageCode,'jjjjjjjjjjjjjjjjjjjjjjjj')
getPageButtonList(pageCode, state.token).then(res => {
commit('SET_PAGE_BTN', [pageCode, res.data.data])
resolve()
}).catch(err => {
......
/**
* @Author: skyeGao
* @Email: yyjzp1314@126.com
* @DateTime: 2019-04-06 21:56:14
* @Description: Description
*/
import _ from 'lodash';
export const getQueryString = (name) => {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
// if (r != null) return unescape(r[2]); return null;
if (r != null) return r[2];
return null;
}
export const realFormatSecond = (second) => {
const secondType = typeof second
if (secondType === 'number' || secondType === 'string') {
second = parseInt(second)
const hours = Math.floor(second / 3600)
second = second - hours * 3600
const mimute = Math.floor(second / 60)
second = second - mimute * 60
return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
}
return '0:00:00'
}
// 获取当前鼠标位置
export const getMousePos = (event) => {
const e = event || window.event;
const scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
const x = e.pageX || e.clientX + scrollX;
const y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return {
'x': x,
'y': y
};
}
// 不可全为空格和换行,允许字符前面和后面为空
export const _strIsEmpty = (str) => {
return !(/^[\s\S]*.*[^\s][\s\S]*$/.test(str))
}
// 正则匹配一段html中的img 并返回src的数组
export const regHtml = (htmlStr) => {
/*const htmlStr = 'aaaaaaaaaaaa\n' +
'<p>公告内尔东街口打开后精神可嘉大丰收的11</p>↵<p>'+
'<img class="wscnph" src="../file/file/?fileName=179a4d73f7bf540779ccf8d9a1e9d89bd&amp;isOnLine=true" />'+
'<img class="wscnph" src="../file/file/?fileName=279a4d73f7bf540779ccf8d9a1e9d89bd&amp" />'+
'<IMG class="wscnph" src="../file/file/?fileName=379a4d73f7bf540779ccf8d9a1e9d89bd&amp" />'+
'</p>';*/
if (!regHtml) { return [];}
const imgReg = /<img.*?(?:>|\/>)/gi; // 匹配图片(g表示匹配所有结果i表示区分大小写)
const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src属性
const arr = htmlStr.match(imgReg); // 所有已成功匹配图片的数组
const result = [];
arr && arr.forEach(item => {
const srcs = item.match(srcReg); // 获取图片地址
if (srcs && srcs[1]) {
// console.log('已匹配的图片地址', srcs[1])
result.push(srcs[1])
}
})
return result
}
// 去掉所有的html标签,只返回文本
export const delHtmlTag = (htmlStr, deep) => {
if (!htmlStr) {
return ''
}
if (deep) {
htmlStr = htmlStr.replace(/<[^>]+>/g, "")
htmlStr = htmlStr.replace(/(^\s*)|(\s*$)/g, "");
htmlStr = htmlStr.replace(/\s+/g, ""); // 去掉空格
htmlStr = htmlStr.replace(/[ ]/g, ""); // 去掉空格
htmlStr = htmlStr.replace(/[\r\n]/g, ""); // 去掉回车换行
// htmlStr = htmlStr.replace(/[&nbsp;|&middot;|&ldquo;|&rdquo;|&mdash;|&lsquo;|&rsquo;]/g, "");
htmlStr = htmlStr.replace(/&nbsp;/g, "");
htmlStr = htmlStr.replace(/&middot;/g, "");
htmlStr = htmlStr.replace(/&ldquo;/g, "");
htmlStr = htmlStr.replace(/&rdquo;/g, "");
htmlStr = htmlStr.replace(/&mdash;/g, "");
htmlStr = htmlStr.replace(/&lsquo;/g, "");
htmlStr = htmlStr.replace(/&rsquo;/g, "");
return htmlStr
}
return htmlStr.replace(/<[^>]+>/g, "");
}
export const strIsEmpty = (htmlStr) => {
htmlStr = htmlStr.replace(/(^\s*)|(\s*$)/g, "");
htmlStr = htmlStr.replace(/\s+/g, ""); // 去掉空格
htmlStr = htmlStr.replace(/[ ]/g, ""); // 去掉空格
htmlStr = htmlStr.replace(/[\r\n]/g, ""); // 去掉回车换行
if (!htmlStr || _.trim(htmlStr) == '' || htmlStr.length === 0) {
return true
}
return false
}
// 验证手机号
export const isTelNum = (tel) => {
return /^[1][3,4,5,7,8][0-9]{9}$/.test(tel)
}
// 验证el是否在可视区域内
export const elementIsInViewport = (el, offset = 0) => {
if (!el) {
return false;
}
const box = el.getBoundingClientRect(),
top = (box.top >= 0),
left = (box.left >= 0),
bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset),
right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) + offset);
return (top && left && bottom && right);
}
export const openNewWin = (params, that) => {
let { href } = that.$router.resolve({...params});
const { protocol, host, pathname } = window.location;
console.log('router', that.$router.resolve({...params}))
console.log('host',host)
console.log('pathname', pathname)
href = href.replace('skz/','')
let newUrl = `${protocol}//${host}${pathname}${href}`;
window.open(newUrl, '_blank');
// window.open(href, '_blank');
}
//正则判断注册用户名或者密码手机号
export const regExcp = (value, type) => {
if (type == 'userName') {
if (!value) {
let message = '请输入用户名';
return message;
}
if (!((/^[0-9a-zA-Z-_]+$/).test(value))) {
let message = '用户名格式错误,仅支持字母、数字、“-”、“_”的组合';
return message;
}
if (value.length < 4 || value.length > 20) {
let message = '用户名长度必须在4-20个字符之间';
return message;
}
return true;
} else if (type == 'password') {
if (!value) {
let message = '请输入密码';
return message;
}
if (value.indexOf(' ') > -1) {
let message = '不允许输入空格';
return message;
}
if (!((/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$)/).test(value))) {
let message = '密码不能使用同一字符';
return message;
}
if (value.length < 6 || value.length > 20) {
let message = '密码长度必须在6-20个字符之间';
return message;
}
return true;
} else if (type == 'phone') {
if (!value) {
let message = '请输入手机号';
return message;
}
if (!((/^1[345789]\d{9}$/).test(value))) {
let message = '请输入正确的手机号';
return message;
}
return true;
}
}
......@@ -134,6 +134,7 @@ export default {
},
mounted() {
this.authBtns = store.getters.pageBtn[this.$route.meta.routerIds[0]]
console.log( this.authBtns,' this.authBtns')
this.getModule().then(() => {
this.getList()
})
......
......@@ -67,7 +67,7 @@
</el-dialog>
<el-dialog title="设置权限" :visible.sync="dialogPvVisible" width="30%">
<el-tree :data="modules" ref="tree" show-checkbox node-key="id" :default-checked-keys="checkedIds" :props="defaultProps" >
<el-tree :data="modules" ref="tree" show-checkbox node-key="mpId" :default-checked-keys="checkedIds" :props="defaultProps" >
</el-tree>
<span slot="footer">
<el-button @click="moduleSubmit">确定</el-button>
......
......@@ -29,7 +29,7 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleFilter">检索</el-button><el-button @click="resetFilter">重置</el-button>
<el-button @click="handleFilter" type="primary">检索</el-button><el-button @click="resetFilter">重置</el-button>
</el-form-item>
</el-form>
......
......@@ -4,27 +4,36 @@
<div class="metaDataTop">
<em>资源检索</em>
</div>
<el-row :gutter="20">
<el-col :span="16">
<div id="surveyChart" style="height:500px">
</div>
</el-col>
<el-col :span="8">
<div id="typeChart" style="height:250px"></div>
<div id="statusChart" style="height:250px"></div>
</el-col>
</el-row>
<div style="background:#fff;margin-top:20px;position:relative;padding:20px 0">
<el-select v-model="province" placeholder="请选择" style="margin:20px 20px 0;position:absolute;top:0;left:0;z-index:1" @change="changePro">
<el-option
v-for="item in cityOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div id="mapChart" style="height:500px;"></div>
</div>
<el-tabs type="card" v-model="activeTab" class="chart_tab" @tab-click="tabClick">
<el-tab-pane label="资源概况" name="survey">
<el-row :gutter="20">
<el-col :span="16">
<div id="surveyChart" style="height:500px">
</div>
</el-col>
<el-col :span="8">
<div id="typeChart" style="height:250px"></div>
<div id="statusChart" style="height:250px"></div>
</el-col>
</el-row>
<div style="background:#fff;margin-top:20px;position:relative;padding:20px 0">
<el-select v-model="province" placeholder="请选择" style="margin:20px 20px 0;position:absolute;top:0;left:0;z-index:1" @change="changePro">
<el-option
v-for="item in cityOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div id="mapChart" style="height:500px;"></div>
</div>
</el-tab-pane>
<el-tab-pane label="本体对象关系" name="relation">
<div style="background:#fff;padding:20px 0;min-height:650px;width:100%">
<div id="relationChart" style="height:600px;width:600px;margin:0 auto;"></div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
......@@ -443,6 +452,121 @@ var cityMap = {
'香港': xianggang,
'澳门': aomen
};
var relateOptaion={
title: {
text: "实体关系top1",
top: "top",
left: "center",
textStyle: {
color: '#333',
fontSize:18
}
},
tooltip: {
},
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
toolbox: {
show: false,
feature: {
restore: {
show: true
},
magicType: {
show: true,
type: ['force', 'chord']
},
saveAsImage: {
show: true
}
}
},
backgroundColor: '#fff',
legend: {
data: [ "对象","人物", "组织机构",'地址','时间'],
textStyle: {
color: '#000000'
},
show: false,
icon: 'circle',
type: 'scroll',
orient: 'vertical',
left: 10,
top: 20,
bottom: 20,
itemWidth: 10,
itemHeight: 10
},
series: [{
name: '',
type: 'graph',
layout: 'force',
force: {
repulsion: 1000,
//gravity: 0.02,
//edgeLength: 90,
layoutAnimation: true,
},
edgeSymbolSize: [10, 10],
//edgeSymbol: ['circle', 'arrow'],
symbolSize: 50,
data: [
{name: "组织机构", showName: "组织机构", category: 2},
{name: "人物", showName: "人物", category: 1},
{name: "组织机构1", showName: "组织机构1", category: 2},
{name: "呵呵呵", showName: "呵呵呵", category: 0},
],
links:[
{source: "呵呵呵", target: "组织机构", value: "未定义"},
{source: "呵呵呵", target: "组织机构1", value: "未定义"},
{source: "呵呵呵", target: "人物", value: "未定义"}
],
categories:[
{name: "对象"},
{name: "人物"},
{name: "组织机构"},
{name: "地址"},
{name: "时间"},
],
roam: true,
nodeScaleRatio: 0, //鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放
focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
lineStyle: {
normal: {
// text: relarr[i],
//color: 'source'
color:'#DCDFE6'
}
},
label: {
normal: {
show: true,
position: 'inside',
textStyle: { //标签的字体样式
color: '#fff', //字体颜色
fontWeight: 'normal', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontSize: "12" //字体大小
},
formatter: function(params) {
return params.data.showName //此处为label转换 并转换颜色
},
fontSize: 18,
//fontStyle: '600',
}
},
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
formatter: "{c}"
}
}
}],
//#c23531#91c7ae#4592ff
color: ['#c23531', '#91c7ae', '#4592ff','#f8b829','#26f0a5'] //自定义调色板
};
// var max = 480,
// min = 9; // todo
// var maxSize4Pin = 100,
......@@ -584,6 +708,8 @@ export default {
mapOption:null,
province:'广东省',
cityOptions:[],
activeTab:'survey',
relationChart:null,
//proName:'北京',
};
},
......@@ -601,6 +727,9 @@ export default {
if (this.mapChart) {
this.mapChart.resize()
}
if (this.relationChart) {
this.relationChart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder);
this.getSideCity();
......@@ -615,7 +744,8 @@ export default {
this.surveyChart = echarts.init(document.getElementById("surveyChart"));
this.statusChart = echarts.init(document.getElementById("statusChart"))
this.typeChart = echarts.init(document.getElementById("typeChart"));
this.mapChart = echarts.init(document.getElementById("mapChart"))
this.mapChart = echarts.init(document.getElementById("mapChart"));
},
getSurvey(){
let params={
......@@ -714,7 +844,19 @@ export default {
});
this.cityOptions=resData;
},
getRelation(){
this.relationChart = echarts.init(document.getElementById("relationChart"))
this.relationChart.setOption(relateOptaion);
},
tabClick(tab){
console.log(tab)
if(tab.name=="relation"){
this.getRelation()
// this.relationChart = echarts.init(document.getElementById("relationChart"))
// this.relationChart.setOption(relateOptaion);
}
}
}
};
</script>
......
......@@ -240,4 +240,14 @@
cursor: pointer;
}
}
.chart_tab {
.el-tabs__header{
margin-bottom: 0px;
}
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
background-color: #fff;
}
}
......@@ -13,11 +13,19 @@
<div class="sub_tit">
<p>
<span style="margin-right:20px;margin-bottom:20px">资源题名:{{pdf.name}}{{pdf.createrName}}{{pdf.createTime}} 提交</span>
<span class="" v-if="resourceType!=2">
<img src="~@/assets/img/pdf.png" alt="pdf" class="pdf_icon">
<span class="" v-if="resourceType==2||resourceType==6">
<el-button type="primary" icon="el-icon-download" size="mini" @click="down">下载源文件</el-button>
<!-- <el-button type="primary" icon="el-icon-refresh" size="mini">重新识别</el-button>
<el-button type="primary" icon="el-icon-document" size="mini">文本标注</el-button> -->
<el-button v-if="pdf.albumId" type="primary" icon="" size="mini" @click="linkPic">进入图册</el-button>
</span>
<span v-else-if="resourceType==3">
<el-button type="primary" icon="el-icon-download" size="mini" @click="down">下载源音频</el-button>
</span>
<span v-else-if="resourceType==4">
<el-button type="primary" icon="el-icon-download" size="mini" @click="down">下载源视频</el-button>
</span>
<span v-else>
<img src="~@/assets/img/pdf.png" alt="pdf" class="pdf_icon">
<el-button v-if="pdf.pdfName" type="primary" icon="el-icon-download" size="mini" @click="down">下载源文件</el-button>
</span>
</p>
......@@ -28,8 +36,17 @@
<img :src="`${domain}${requestPath.file}?fileName=${pdf.fileName}&isOnLine=true`" alt="" class="pic_show" v-if="pdf.fileName">
</div>
<!-- 图册 -->
<div style="width:80%;margin:0 auto;height:800px;text-align:center" v-else-if="resourceType==5">
<div style="width:80%;margin:0 auto;height:800px;text-align:center" v-else-if="resourceType==5||resourceType==6">
</div>
<!-- 视频 -->
<div style="width:80%;margin:100px auto;height:800px;text-align:center" v-else-if="pdf.resourceType==4&&pdf.fileName">
<video :src="`${domain}${requestPath.file}?fileName=${pdf.fileName}&isOnLine=true`" controls="controls" style="width:500px;height:400px"></video>
</div>
<!-- 音频 -->
<div style="width:80%;margin:100px auto;height:800px;text-align:center" v-else-if="pdf.resourceType==3&&audioUrl">
<VueAudio
:audioUrl="audioUrl"
/>
</div>
<div style="width:80%;margin:0 auto;height:800px" v-else>
<iframe :src="`${domain}${pdf.pdfName}`" frameborder="0" width="100%" height="100%" v-if="changeFleg"></iframe>
......@@ -488,6 +505,7 @@
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import Tinymce from '@/components/Tinymce'
import VueAudio from '@/components/VueAudio'
import pagination from '@/components/pagination/pagination'
import { operationMsg, confirm, requestMsg } from '@/utils/publicFunctions'
import { uploadUrl, uploadPath, requestPath } from "@/utils/global";
......@@ -502,7 +520,7 @@ import {
backDetialAPI,changeAPI} from '@/api/metadata/index'
export default {
name: 'metadataDetail',
components:{ Tinymce ,pagination},
components:{ Tinymce ,pagination,VueAudio},
data () {
return {
loading:false,
......@@ -631,6 +649,7 @@ export default {
activeName:"",
id:'',
resourceType:null,
audioUrl:'',
pdf:{
createTime:'',
createrName:'',
......@@ -679,6 +698,9 @@ export default {
let {createTime,createrName,fileName,name,text}=res.data.data;
this.pdf=res.data.data;
this.resourceForm.summary=text;
if(this.pdf.resourceType==3){
this.audioUrl=`${this.domain}${requestPath.file}?fileName=${fileName}&isOnLine=true`
}
changeAPI(this.pdf.pdfName).then(res=>{
if(res.data.code==0){
this.changeFleg=res.data.data||false;
......@@ -1090,6 +1112,9 @@ export default {
},1000)
//window.location.reload()
},
linkPic(){
this.$router.push({path:'/submission/infoview/photolook',query:{oid:this.pdf.albumId}})
},
linkTo(item){
//id=0648831bf60911e996cc0050569033dc&entityType=2
this.$router.push({path:'/storagemodule/namedentity/character',query:{id:item.entityId,entityType:this.backForm.state}})
......
......@@ -193,6 +193,14 @@
}
}
.mag_packet{
.pdf_loading{
.el-loading-text{
font-size: 18px;
}
.el-icon-loading{
font-size: 24px;
}
}
.refBtn{
font-size:14px;
color:#868BA3;
......@@ -291,6 +299,13 @@
color: #404E67;
font-weight: bold;
}
.tag_label{
background-color:#7e899b;
border-radius: 4px;
padding: 4px 8px;
color: #fff;
margin-right: 4px;
}
.cont{
flex: 1;
}
......
......@@ -17,6 +17,12 @@
<el-button type="primary" icon="el-icon-download" size="mini" @click="down">下载源文件</el-button>
<el-button v-if="pdf.albumId" type="primary" icon="" size="mini" @click="linkPic">进入图册</el-button>
</span>
<span v-else-if="pdf.resourceType==3">
<el-button type="primary" icon="el-icon-download" size="mini" @click="down">下载源音频</el-button>
</span>
<span v-else-if="pdf.resourceType==4">
<el-button type="primary" icon="el-icon-download" size="mini" @click="down">下载源视频</el-button>
</span>
<span v-else>
<img src="~@/assets/img/pdf.png" alt="pdf" class="pdf_icon">
<el-button v-if="pdf.pdfName" type="primary" icon="el-icon-download" size="mini" @click="down">下载源文件</el-button>
......@@ -26,11 +32,26 @@
</p>
</div>
</div>
<!-- 图片和图册 -->
<div style="width:80%;margin:0 auto;height:800px;text-align:center" v-if="pdf.resourceType==2||pdf.resourceType==6">
<img :src="`${domain}${requestPath.file}?fileName=${pdf.fileName}&isOnLine=true`" alt="图片" class="pic_show">
</div>
<!-- 视频 -->
<div style="width:80%;margin:100px auto;height:800px;text-align:center" v-else-if="pdf.resourceType==4&&pdf.fileName">
<video :src="`${domain}${requestPath.file}?fileName=${pdf.fileName}&isOnLine=true`" controls="controls" style="width:500px;height:400px"></video>
</div>
<!-- 音频 -->
<div style="width:80%;margin:100px auto;height:800px;text-align:center" v-else-if="pdf.resourceType==3&&audioUrl">
<VueAudio
:audioUrl="audioUrl"
/>
</div>
<div v-else>
<div v-html="iframeHtml" style="width:80%;margin:0 auto;height:800px">
<div v-html="iframeHtml" style="width:80%;margin:0 auto;height:800px" v-if="pdf.pdfName">
</div>
<div v-else class="pdf_loading" style="text-align: center">
<!-- <div v-loading="pdfLoading" element-loading-text="暂无" element-loading-spinner="el-icon-loading" style="width:80%;margin:0 auto;height:200px"></div> -->
<img src="~@/assets/img/noData_pic.png" alt="暂无挂接资源">
</div>
<!-- <iframe :src="`${domain}${pdf.pdfName}`" frameborder="0" width="100%" height="100%"></iframe> -->
</div>
......@@ -82,7 +103,7 @@
<div class="list">
<p class="label">资源标签:</p>
<p class="cont">
<span v-for="tag in pdf.label" :key="tag.index">{{tag.name}}</span>
<span class="tag_label" v-for="tag in pdf.label" :key="tag.index">{{tag.name}}</span>
</p>
</div>
<div class="list">
......@@ -164,6 +185,7 @@
<script>
import pagination from '@/components/pagination/pagination'
import VueAudio from '@/components/VueAudio'
import { operationMsg, confirm, requestMsg } from '@/utils/publicFunctions'
import { requestPath } from '@/utils/global.js'
import { batchUpdateStatusAPI} from '@/api/commonResource'
......@@ -172,11 +194,12 @@ import {
} from '@/api/sip/index'
export default {
name: 'msgPacket',
components:{pagination},
components:{pagination,VueAudio},
data () {
return {
loadRing:false,
loading:false,
pdfLoading:true,
passVisible:false,
domain: process.env.BASE_API,
requestPath: requestPath,
......@@ -187,6 +210,10 @@ export default {
iframeHtml:'',
pdf:{
},
hasVideoPermission: true, // 是否具备视频播放权限
videoSrc: '', // 视频播放地址
videoCover: '', // 视频封面
audioUrl:''
}
},
mounted() {
......@@ -225,6 +252,10 @@ export default {
//回显,置空备注
this.pdf.remark='';
this.activeStatus=this.pdf.status;
if(this.pdf.resourceType==3){
this.audioUrl=`${this.domain}${requestPath.file}?fileName=${fileName}&isOnLine=true`
//this.audioUrl='http://front-end.bjcnc.scs.sohucs.com/track-report-sit/falling-star.mp3';
}
//this.pdf.fileName=`${this.domain}${requestPath.file}?fileName=${fileName}&isOnLine=true`;
}else{
this.$message.error('获取失败')
......
......@@ -328,10 +328,6 @@ let relateOptaion={
}
},
tooltip: {
// formatter: function(params,a,b,c){
// //return params.data.target+">"+params.data.source+":"+params.data.value
// console.log(params.data,'777777')
// }
},
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
......@@ -378,37 +374,9 @@ let relateOptaion={
},
edgeSymbolSize: [4, 50],
symbolSize: 50,
data: [
//{name: "工程建设情况", showName: "工程建设情况", symbolSize: 50, category: 0},
// {name: "工程建设情况", showName: "工程建设情况", symbolSize: 50, category: 0},
// {name: "工程规模", showName: "工程规模", symbolSize: 50, category: 0},
// {name: "建成时间", showName: "建成时间", symbolSize: 50, category: 0},
// {name: "归口管理部门", showName: "归口管理部门", symbolSize: 50, category: 0},
// {name: "水电站代码", showName: "水电站代码", symbolSize: 50, category: 0},
// {name: "水电站所在位置", showName: "水电站所在位置", symbolSize: 50, category: 0},
// {name: "水电站类型", showName: "水电站类型", symbolSize: 50, category: 0},
// {name: "水", showName: "1", symbolSize: 50, category: 1},
// {name: "电", showName: "2", symbolSize: 50, category: 1},
// {name: "站", showName: "3", symbolSize: 50, category: 1},
// {name: "对象", showName: "北京", symbolSize: 50, category: 2}
],
links:[
// {source: "工程建设情况", target: "对象", value: "工程建设情况"},
// {source: "工程规模", target: "对象", value: "工程规模"},
// {source: "建成时间", target: "对象", value: "建成时间"},
// {source: "归口管理部门", target: "对象", value: "管理部门"},
// {source: "水电站代码", target: "对象", value: "水电站代码"},
// {source: "水电站所在位置", target: "对象", value: "水电站所在位置"},
// {source: "水电站类型", target: "对象", value: "水电站类型"},
// {source: "水", target: "对象", value: "33"},
// {source: "电", target: "对象", value: "33"},
// {source: "站", target: "对象", value: "33"}
],
data: [],
links:[],
categories: [
//["人物", "组织机构",'地址','时间', "对象"];
{name: "对象"},
{name: "人物"},
{name: "组织机构"},
......@@ -715,44 +683,6 @@ export default {
/**
* 数据集合
*/
dataEChart(){
let data = [
{
name: '张1',
symbolSize: 76,
id: '1',
},
{
name: '张2',
id: '2',
},
{
name: '张3',
id: '3',
},
{
name: '张4',
id: '4',
},
{
name: '张5',
id: '5',
},
{
name: '张6',
id: '6',
},
{
name: '张7',
id: '7',
},
{
name: '张6',
id: '8',
},
];
return data;
},
drawLine () {//词云
// 基于准备好的dom,初始化echarts实例
this.keywordChart = this.$echarts.init(document.getElementById('myChart'))
......@@ -784,16 +714,6 @@ export default {
name: '',
type: 'wordCloud',
shape: 'circle',
// size: ['80%', '80%'],
// sizeRange:[12,50],
// rotationRange:[0,0],
// gridSize:[12,50],
// textRotation: [0, 45, 90, -45],
// textPadding: 0,
// autoSize: {
// enable: true,
// minSize: 14
// },
rotationRange: [0,0],
sizeRange: [12, 50],
gridSize: 20,
......@@ -867,7 +787,7 @@ export default {
entityTypeFlag: list.state,
entityId: list.bripid
})
links.push({source:list.brelationword, target: resData[0]['relationword'], value: list.relation})
links.push({source:resData[0]['relationword'], target: list.brelationword, value: list.relation})
})
relateOptaion.series[0]['data']=data;
relateOptaion.series[0]['links']=links;
......
......@@ -5,7 +5,7 @@
<span @click="refPage">刷新</span>
</div>
<div class="metaDataPlanList">
<el-button type="primary" icon="el-icon-plus" size="middle" class="addNewPlanBtn" @click="goAddPage">添加元数据方案</el-button>
<el-button type="primary" size="small" icon="el-icon-plus" class="addNewPlanBtn" @click="goAddPage">添加元数据方案</el-button>
<h2>元数据方案列表</h2>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="elTab">
<el-tab-pane label="文本" name="first">
......@@ -221,6 +221,7 @@ export default {
align-items:center;
margin-bottom:35px;
padding:15px 0;
border-bottom: 1px solid #EBEEF5;
dl {
display:flex;
align-items:center;
......
......@@ -9,7 +9,7 @@
<el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="handleFilter">检索</el-button>
<el-button @click="handleFilter" type="primary">检索</el-button>
<el-button @click="resetFilter">重置</el-button>
</el-form-item>
</el-form>
......
......@@ -2,9 +2,24 @@
<!-- <el-main> -->
<div class="updata_reptile">
<div class="block_wrap">
<div class="block" @click="getKeyword">更新爬虫数据</div>
<div class="block" @click="getUpdateKeyword">更新关键字</div>
<div class="block" @click="getUpdateText">更新文本与文本</div>
<div class="block" @click="getKeyword"
v-loading="loadAlling"
element-loading-text="拼命更新中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.6)"
>更新爬虫数据</div>
<div class="block" @click="getUpdateKeyword"
v-loading="loadKeying"
element-loading-text="拼命更新中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.6)"
>更新关键字</div>
<div class="block" @click="getUpdateText"
v-loading="loadText"
element-loading-text="拼命更新中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.6)"
>更新文本与文本</div>
</div>
</div>
......@@ -17,7 +32,10 @@ import { getkeywordAPI,getUpdateTextAPI, getUpdateKeywordAPI } from '@/api/syste
export default {
name:'update_reptile',
data() {
return {
return {
loadAlling:false,
loadKeying :false,
loadText:false
}
},
mounted() {
......@@ -25,23 +43,37 @@ export default {
},
methods: {
getKeyword() {
this.loadAlling=true;
getkeywordAPI().then(res => {
if(res.data.code == 0) {
this.$message.success('更新爬虫数据成功')
}else{
this.$message.error('更新爬虫数据失败')
this.loadAlling=false;
}
})
},
getUpdateText() {
this.loadText=true;
getUpdateTextAPI().then(res => {
if(res.status == 200) {
this.$message.success('更新文本关系成功')
this.loadText=false;
}else{
this.$message.error('更新文本关系失败');
this.loadText=false;
}
})
},
getUpdateKeyword() {
this.loadKeying=true;
getUpdateKeywordAPI().then(res => {
if(res.status == 200) {
this.$message.success('更新关键字成功')
this.loadKeying=false;
}else{
this.$message.error('更新关键字失败');
this.loadKeying=false;
}
})
}
......@@ -59,10 +91,11 @@ export default {
flex-wrap: wrap;
}
.block{
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
color: #fff;
background: #409EFF;
font-size: 24px;
......
......@@ -2,8 +2,19 @@
<!-- <el-main> -->
<div id="update">
<div class="box">
<div class="addSearch" @click="getAddSearch">增量索引</div>
<div class="updateSearch" @click="getUpdateSearch">更新索引</div>
<div class="addSearch" @click="getAddSearch"
v-loading="loadAlling"
element-loading-text="拼命更新中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.6)">
全量索引
</div>
<div class="updateSearch" @click="getUpdateSearch"
v-loading="loadAdding"
element-loading-text="拼命更新中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.6)">
增量索引</div>
</div>
</div>
......@@ -16,7 +27,8 @@ import { getAddSearchAPI, getUpdateSearchAPI } from '@/api/system-management/upd
export default {
data() {
return {
loadAlling:false,
loadAdding:false
}
},
mounted() {
......@@ -24,16 +36,26 @@ export default {
},
methods: {
getAddSearch() {
this.loadAlling=true;
getAddSearchAPI().then(res => {
if(res.data.code == 0) {
this.$message.success('增量索引成功')
this.$message.success('更新全量索引成功');
this.loadAlling=false;
}else{
this.$message.error('更新全量索引失败');
this.loadAlling=false;
}
})
},
getUpdateSearch() {
this.loadAdding=true;
getUpdateSearchAPI().then(res => {
if(res.status == 200) {
this.$message.success('更新索引成功')
this.$message.success('更新增量索引成功');
this.loadAdding=false;
}else{
this.$message.error('更新增量索引失败');
this.loadAdding=false;
}
})
}
......@@ -55,19 +77,22 @@ export default {
.addSearch {
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
/* line-height: 150px; */
color: #fff;
background: #409EFF;
font-size: 24px;
cursor: pointer;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.updateSearch {
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
background: #97AECB;
cursor: pointer;
......
......@@ -27,17 +27,11 @@
<el-form-item label="公告标题">
<el-input v-model="listQuery.title"></el-input>
</el-form-item>
<!-- <el-form-item label="所属栏目">
<el-select placeholder="所属栏目" v-model="listQuery.columnId">
<el-option label="全部" :value="null"></el-option>
<el-option v-for="item in boardItem" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="发布时间">
<el-date-picker v-model="dateQuery" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="handleFilter">检索</el-button><el-button @click="resetFilter">重置</el-button>
<el-button @click="handleFilter" type="primary">检索</el-button><el-button @click="resetFilter">重置</el-button>
</el-form-item>
</el-form>
......@@ -50,22 +44,13 @@
<span v-if="scope.row.topStatus === '1'" style="color: red;">[置顶]</span>
</template>
</el-table-column>
<!-- <el-table-column label="所属栏目" min-width="90" align="center">
<template slot-scope="scope">
<span>{{scope.row.name}}</span>
</template>
</el-table-column> -->
<el-table-column label="发布时间" min-width="100" align="center">
<template slot-scope="scope">
<span v-if="scope.row.createTime">{{scope.row.createTime}}</span>
</template>
</el-table-column>
<!-- <el-table-column label="状态" min-width="80" align="center">
<template slot-scope="scope">
<span v-if="scope.row.status === 1">上架</span>
<span v-if="scope.row.status === 0">下架</span>
</template>
</el-table-column> -->
<el-table-column label="来源" min-width="100" align="center">
<template slot-scope="scope">
<span>{{scope.row.source}}</span>
......@@ -99,28 +84,8 @@
<el-input v-model="form.title" ></el-input>
</el-col>
</el-form-item>
<!-- <el-form-item label="所属栏目:" prop="columnId">
<el-col :span="12">
<el-select placeholder="所属栏目" v-model="form.columnId" style="width:100%;">
<el-option v-for="item in boardItem" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
</el-form-item> -->
<!-- <el-form-item label="状态:" prop="status">
<el-radio-group v-model="form.status">
<el-radio :label="1">上架</el-radio>
<el-radio :label="0">下架</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="置顶:" prop="topStatus">
<el-radio-group v-model="form.topStatus">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="发布时间:" prop="releaserTime">
<el-col :span="12">
<!-- <el-date-picker v-model="form.releaserTime" type="date" placeholder="年/月/日" format="yyyy/MM/dd" value-format="yyyy-MM-dd" style="width:100%;"></el-date-picker> -->
<el-date-picker v-model="form.releaseTime" type="date" placeholder="选择日期" format="yyyy/MM/dd" value-format="yyyy-MM-dd"></el-date-picker>
</el-col>
</el-form-item>
......@@ -134,13 +99,6 @@
<el-input v-model="form.releaser" ></el-input>
</el-col>
</el-form-item>
<!-- <el-form-item label="链接地址:" prop="linkType">
<el-radio-group v-model="form.linkType">
<el-radio label="0">默认</el-radio>
<el-radio label="2">外部链接</el-radio>
<el-radio label="1">内部链接</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item prop="linkUrl" v-if="form.linkType!=0">
<el-col :span="12">
<el-input v-model="form.linkUrl" clearable></el-input>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论