Skip to content

B
boya-demonstration
提交 dcfd8dad authored 作者: 游洋澄's avatar 游洋澄
浏览文件
操作

页面更新

上级 972b9991
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 386 行增加 和 10 行删除
.env.development 0 → 100644
浏览文件 @ dcfd8dad
NODE_ENV=development
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=http://202.112.23.252:9019
.env.production 0 → 100644
浏览文件 @ dcfd8dad
NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=http://202.112.23.252:9019
package-lock.json
浏览文件 @ dcfd8dad
差异被折叠。
package.json
浏览文件 @ dcfd8dad
...@@ -9,9 +9,16 @@ ...@@ -9,9 +9,16 @@
"test:unit": "vue-cli-service test:unit" "test:unit": "vue-cli-service test:unit"
}, },
"dependencies": { "dependencies": {
"ant-design-vue": "^1.4.4",
"axios": "^0.19.0",
"core-js": "^3.3.2", "core-js": "^3.3.2",
"moment": "^2.24.0",
"videojs-contrib-hls": "^5.15.0",
"videojs-flash": "^2.2.1",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vue-video-player": "^5.0.2",
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
......
src/App.vue
浏览文件 @ dcfd8dad
<template> <template>
<div id="app"> <div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/> <router-view/>
</div> </div>
</template> </template>
...@@ -15,6 +11,7 @@ ...@@ -15,6 +11,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
height: 100%;
} }
#nav { #nav {
......
src/api/demonstrate.js 0 → 100644
浏览文件 @ dcfd8dad
import { axios } from '@/utils/request'
export function getDemonstrationInfo (maxsize) {
return axios({
baseURL: process.env.VUE_APP_API_BASE_URL,
url: '/boya/devices/v1/feature/b1653118-bd6f-4215-94b3-f50af79380df/next',
method: 'get',
params: {
// token: Vue.ls.get(ACCESS_TOKEN)
max_size: maxsize
}
})
}
src/main.js
浏览文件 @ dcfd8dad
...@@ -3,7 +3,23 @@ import App from './App.vue' ...@@ -3,7 +3,23 @@ import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
// antd
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
// video plugin
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
// swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(Antd)
Vue.use(VideoPlayer)
Vue.use(VueAwesomeSwiper)
new Vue({ new Vue({
router, router,
......
src/utils/axios.js 0 → 100644
浏览文件 @ dcfd8dad
const VueAxios = {
vm: {},
// eslint-disable-next-line no-unused-vars
install (Vue, instance) {
if (this.installed) {
return
}
this.installed = true
if (!instance) {
// eslint-disable-next-line no-console
console.error('You have to install axios')
return
}
Vue.axios = instance
Object.defineProperties(Vue.prototype, {
axios: {
get: function get () {
return instance
}
},
$http: {
get: function get () {
return instance
}
}
})
}
}
export {
VueAxios
}
src/utils/request.js 0 → 100644
浏览文件 @ dcfd8dad
import axios from 'axios'
import { VueAxios } from './axios'
import notification from 'ant-design-vue/es/notification'
// 创建 axios 实例
const service = axios.create({
// baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
// baseURL: 'http://202.112.23.252:9019/boya',
withCredentials: true,
timeout: 60000 // 请求超时时间
})
const err = (error) => {
console.log('error', error)
if (error.response) {
const data = error.response.data
if (error.response.status === 403) {
notification.error({
message: 'Forbidden',
description: data.message
})
}
if (error.response.status === 500 || error.response.status === 400) {
notification.error({
message: '错误',
description: data.reason
})
}
if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
notification.error({
message: 'Unauthorized',
description: 'Authorization verification failed'
})
}
} else {
notification.error({
title: 'error',
message: '网络异常'
})
}
return Promise.reject(error)
}
// request interceptor
service.interceptors.request.use(config => {
// const token = Vue.ls.get(ACCESS_TOKEN)
// if (token) {
// config.headers['tokenId'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
// // config.params['token'] = token
// }
return config
}, err)
// response interceptor
service.interceptors.response.use((response) => {
return response.data
}, err)
const installer = {
vm: {},
install (Vue) {
Vue.use(VueAxios, service)
}
}
export {
installer as VueAxios,
service as axios
}
src/views/Home.vue
浏览文件 @ dcfd8dad
<template> <template>
<div class="home"> <a-layout id="components-layout-demo-responsive">
<img alt="Vue logo" src="../assets/logo.png"> <a-layout-content :style="{ margin: '10px 16px 16px 16px',height:'67%',backgroundColor:'rgba(0,0,0,0.1)'}">
<HelloWorld msg="Welcome to Your Vue.js App"/> <div :style="{ padding: '24px',height:'100%'}">
<a-row style="height:100%">
<a-col :span="6"
style="height:100%">
<a-row style="height:50%;padding:15px;">
<div class="demo">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"></video-player>
</div> </div>
</a-row>
<a-row style="height:50%;padding:15px;">
<a-card :bordered="false"
style="height:100%;background-color:rgba(100,100,100,0.1);">
<a-row>
<a-col :span="10">
<img style="maxHeight:200px;"
alt="example"
:src="currentInfo.url" />
</a-col>
<a-col :span="14"
style="color:#eee;">
{{currentInfo.timestamp}}
</a-col>
</a-row>
</a-card>
</a-row>
</a-col>
<a-col :span="18"
style="height:100%;padding:15px;">
<a-card :bordered="false"
style="height:100%;background-color:rgba(0,0,0,0);">
<img style="height:100%;"
alt="example"
src=".././../public/image/stream.png"
slot="cover" />
</a-card>
</a-col>
</a-row>
</div>
</a-layout-content>
<a-layout-footer :style="{ margin: '0 16px 0',height:'40%',backgroundColor:'rgba(0,0,0,0.1)' }">
<div :style="{ padding: '24px',height:'100%'}">
<a-row :gutter="32"
style="height:100%;background-color:rgba(0,0,0,0);">
<!-- 1 -->
<!-- <a-col :span="2"
style="margin-bottom:10px;background-color:rgba(0,0,0,0);"
v-for="(item,i) in data1PhotoArray"
:key="i">
<img style="maxHeight:240px"
:src="item"
alt="">
</a-col> -->
<!-- 2 -->
<swiper :options="swiperOption"
ref="categorySwiper" style="height:100%;">
<swiper-slide style="height:100%;" v-for="(item,index) in data1PhotoArray"
:key="index">
<div @click="scrollTo(index)"
style="display:inline-block;padding: 10px;text-align:center;">
<a-card hoverable style="height:100%;">
<img alt="example"
style="max-height:200px;"
:src="item.url"
slot="cover" />
<a-card-meta title="时间戳">
<template slot="description">{{item.timestamp}}</template>
</a-card-meta>
</a-card>
</div>
</swiper-slide>
<!-- Add Scrollbar -->
<div class="swiper-scrollbar"
slot="scrollbar"></div>
</swiper>
</a-row>
</div>
</a-layout-footer>
</a-layout>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' import { getDemonstrationInfo } from '@/api/demonstrate'
import 'videojs-flash'
const formatData = function (data, data1PhotoArray, _this, timestamp) {
if (data.mixed !== null) {
for (const item of data.mixed) {
// debugger
if (item.mixed !== null) {
formatData(item.mixed, data1PhotoArray, _this, timestamp)
// debugger
} else {
data1PhotoArray.push({
url: item.url,
timestamp
})
_this.currentInfo = {
url: item.url,
timestamp
}
// debugger
}
}
}
}
export default { export default {
name: 'home', name: 'home',
components: { data () {
HelloWorld return {
maxsize: 1,
// 1
demoData1Array: [],
data1PhotoArray: [],
currentInfo: {},
flvResource: {
type: 'video/x-flv',
src: 'http://202.112.23.252:9017/public_pic_dir/sample.flv'
}
}
},
mounted () {
this.start()
},
computed: {
player () {
return this.$refs.videoPlayer.player
},
playerOptions: function () {
return {
// 播放速度
playbackRates: [0.5, 1.0, 1.5, 2.0],
// 如果true,浏览器准备好时开始回放。
autoplay: false,
// 默认情况下将会消除任何音频。
muted: false,
// 导致视频一结束就重新开始。
techOrder: ['flash'],
loop: false,
// 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
preload: 'auto',
language: 'zh-CN',
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
aspectRatio: '16:9',
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
fluid: true,
// 启用hls？
hls: true,
sources: this.flvResource,
// 你的封面地址
poster: '',
// 允许覆盖Video.js无法播放媒体源时显示的默认信息。
notSupportedMessage: '此视频暂无法播放，请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
// 全屏按钮
fullscreenToggle: true
}
}
},
swiperOption: function () {
return {
slidesPerView: 6,
spaceBetween: 0,
freeMode: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
scrollbar: {
el: '.swiper-scrollbar'
}
}
},
categorySwiper () {
return this.$refs.categorySwiper.swiper
}
},
watch: {
demoData1Array (newValue) {
console.log(newValue)
for (const el of newValue) {
formatData(el.data, this.data1PhotoArray, this, el.timestamp)
}
console.log(this.data1PhotoArray)
},
data1PhotoArray (newValue, oldValue) {
if (newValue.length > 12) {
newValue.shift()
this.data1PhotoArray = newValue
}
}
},
methods: {
start () {
const _this = this
const clock = setInterval(function () {
getDemonstrationInfo(_this.maxsize)
.then(res => {
_this.demoData1Array.push(res[0])
})
}, 20000)
console.log(clock)
}
} }
} }
</script> </script>
<style>
#components-layout-demo-responsive .logo {
height: 32px;
margin: 16px;
}
#components-layout-demo-responsive {
height: 100%;
background: url("../../public/image/background.png") no-repeat fixed top;
background-size: 100% 100%;
}
#components-layout-demo-responsive .ant-layout-footer {
padding: 0 0 0 0;
}
#components-layout-demo-responsive .ant-card-cover {
height: 100%;
}
.demo {
text-align: center;
line-height: 100px;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
margin-right: 4px;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论