20230403
This commit is contained in:
commit
b37ecb0ec6
|
|
@ -32,10 +32,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
|
||||||
process.exit(1)
|
process.exit(1)
|
||||||
}
|
}
|
||||||
|
|
||||||
(chalk.cyan(' Build complete.\n'))
|
// (chalk.cyan(' Build complete.\n'))
|
||||||
(chalk.yellow(
|
// (chalk.yellow(
|
||||||
' Tip: built files are meant to be served over an HTTP server.\n' +
|
// ' Tip: built files are meant to be served over an HTTP server.\n' +
|
||||||
' Opening index.html over file:// won\'t work.\n'
|
// ' Opening index.html over file:// won\'t work.\n'
|
||||||
))
|
// ))
|
||||||
|
console.log((chalk.cyan(' Build complete.\n')));
|
||||||
|
console.log((chalk.yellow(
|
||||||
|
' Tip: built files are meant to be served over an HTTP server.\n' +
|
||||||
|
' Opening index.html over file:// won\'t work.\n'
|
||||||
|
)));
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -47,8 +47,6 @@ module.exports = function () {
|
||||||
const warning = warnings[i]
|
const warning = warnings[i]
|
||||||
(' ' + warning)
|
(' ' + warning)
|
||||||
}
|
}
|
||||||
|
|
||||||
()
|
|
||||||
process.exit(1)
|
process.exit(1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,20 @@
|
||||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||||
|
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
|
const os = require('os');
|
||||||
|
function getIPAdress() {
|
||||||
|
var interfaces = os.networkInterfaces();
|
||||||
|
for (var devName in interfaces) {
|
||||||
|
var iface = interfaces[devName];
|
||||||
|
for (var i = 0; i < iface.length; i++) {
|
||||||
|
var alias = iface[i];
|
||||||
|
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
|
||||||
|
return alias.address;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const myHost = getIPAdress();
|
||||||
module.exports = {
|
module.exports = {
|
||||||
dev: {
|
dev: {
|
||||||
// Paths
|
// Paths
|
||||||
|
|
@ -26,6 +39,13 @@ module.exports = {
|
||||||
'^/api': ''
|
'^/api': ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
'/v3': { //代理的名字
|
||||||
|
target: 'http://221.226.177.198:14023/v3/',
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite:{
|
||||||
|
'^/v3':'',
|
||||||
|
}
|
||||||
|
}
|
||||||
// '/api': { //代理的名字
|
// '/api': { //代理的名字
|
||||||
// target: 'http://220.163.114.158:5001/',
|
// target: 'http://220.163.114.158:5001/',
|
||||||
// changeOrigin: true,
|
// changeOrigin: true,
|
||||||
|
|
@ -36,7 +56,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Various Dev Server settings
|
// Various Dev Server settings
|
||||||
host: '0.0.0.0', // can be overwritten by process.env.HOST
|
host: myHost, // can be overwritten by process.env.HOST
|
||||||
port: 8083, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
port: 8083, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||||
autoOpenBrowser: false,
|
autoOpenBrowser: false,
|
||||||
errorOverlay: true,
|
errorOverlay: true,
|
||||||
|
|
@ -52,7 +72,7 @@ module.exports = {
|
||||||
showEslintErrorsInOverlay: false,
|
showEslintErrorsInOverlay: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Source Maps
|
* Source Mapi
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// https://webpack.js.org/configuration/devtool/#development
|
// https://webpack.js.org/configuration/devtool/#development
|
||||||
|
|
@ -73,10 +93,10 @@ module.exports = {
|
||||||
// Paths
|
// Paths
|
||||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||||
assetsSubDirectory: 'static',
|
assetsSubDirectory: 'static',
|
||||||
assetsPublicPath: '/web/',
|
// assetsPublicPath: '/web/',
|
||||||
|
assetsPublicPath: '/',
|
||||||
/**
|
/**
|
||||||
* Source Maps
|
* Source Mapi
|
||||||
*/
|
*/
|
||||||
|
|
||||||
productionSourceMap: false,
|
productionSourceMap: false,
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,13 @@ export const getToken = (data) => {
|
||||||
'Tenant-Id': '748495','Content-Type': 'application/json;charset=UTF-8'}}
|
'Tenant-Id': '748495','Content-Type': 'application/json;charset=UTF-8'}}
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
//获取天气数据
|
||||||
|
export const getWeatherData = (params) => {
|
||||||
|
return axios.get('v3/weather/weatherInfo',{
|
||||||
|
params,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
};
|
||||||
//项目信息接口
|
//项目信息接口
|
||||||
export const getProjectInfo = (params) => {
|
export const getProjectInfo = (params) => {
|
||||||
let access_token = JSON.parse(sessionStorage.getItem("token"))
|
let access_token = JSON.parse(sessionStorage.getItem("token"))
|
||||||
|
|
@ -149,8 +156,8 @@ export const getWarnSurveillance = (params) => {
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
//隐患整改记录
|
//隐患整改记录
|
||||||
// export const getMostTroubleCensus = (params) => {
|
export const getResolveTroublePage = (params) => {
|
||||||
// return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
|
return axios.get('api/ems-third-party-service/project/resolveTroublePage',
|
||||||
// {params},
|
{params},
|
||||||
// )
|
)
|
||||||
// };
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<link href="./video-js.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video1" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch101.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video2" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch102.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video3" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch103.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video4" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch104.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video5" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch105.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video6" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch106.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video7" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch107.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video8" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch108.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch109.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch110.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch201.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch202.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch203.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch204.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch205.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.1.200/transform/ch206.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer1 = videojs("video1");
|
|
||||||
var videoFlvPlayer2 = videojs("video2");
|
|
||||||
var videoFlvPlayer3 = videojs("video3");
|
|
||||||
var videoFlvPlayer4 = videojs("video4");
|
|
||||||
var videoFlvPlayer5 = videojs("video5");
|
|
||||||
var videoFlvPlayer6 = videojs("video6");
|
|
||||||
var videoFlvPlayer7 = videojs("video7");
|
|
||||||
var videoFlvPlayer8 = videojs("video8");
|
|
||||||
var videoFlvPlayer9 = videojs("video9");
|
|
||||||
var videoFlvPlayer10 = videojs("video10");
|
|
||||||
var videoFlvPlayer11 = videojs("video10");
|
|
||||||
var videoFlvPlayer12 = videojs("video10");
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<link href="./video-js.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video1" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.2.245/transform/ch1.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video2" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.2.245/transform/ch2.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video3" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.2.245/transform/ch3.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video4" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.2.245/transform/ch20.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video5" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch5.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video6" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch6.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video7" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch7.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video8" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch9.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch18.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch19.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch12.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch13.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="height:300px">
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch14.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch15.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch16.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div style="float:left;width:25%;text-align: center;">
|
|
||||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
|
||||||
<source src="ws://192.168.3.245/transform/ch17.live.flv" type='video/x-flv' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer1 = videojs("video1");
|
|
||||||
var videoFlvPlayer2 = videojs("video2");
|
|
||||||
var videoFlvPlayer3 = videojs("video3");
|
|
||||||
var videoFlvPlayer4 = videojs("video4");
|
|
||||||
var videoFlvPlayer5 = videojs("video5");
|
|
||||||
var videoFlvPlayer6 = videojs("video6");
|
|
||||||
var videoFlvPlayer7 = videojs("video7");
|
|
||||||
var videoFlvPlayer8 = videojs("video8");
|
|
||||||
var videoFlvPlayer9 = videojs("video9");
|
|
||||||
var videoFlvPlayer10 = videojs("video10");
|
|
||||||
var videoFlvPlayer11 = videojs("video10");
|
|
||||||
var videoFlvPlayer12 = videojs("video10");
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.159:8080/app/ch1" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.211/live/ch3.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
// window.addEventListener('message', (e) => {
|
|
||||||
// console.log("拿到数据", e.data);
|
|
||||||
// });
|
|
||||||
window.addEventListener('message',function(messageEvent){
|
|
||||||
console.log("拿到数据",messageEvent.data)
|
|
||||||
// data= messageEvent.data;
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.211/live/ch3.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.3.245/transform/ch4.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "http://192.168.3.245/transform/ch4.live.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.211/live/ch5.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.211/live/ch7.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<!-- 1.引入videojs样式文件 -->
|
|
||||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
||||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- 2.添加video标签 -->
|
|
||||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
|
||||||
<video
|
|
||||||
id="my-video"
|
|
||||||
class="video-js vjs-big-play-centered"
|
|
||||||
controls
|
|
||||||
preload="auto"
|
|
||||||
autoplay=true
|
|
||||||
width="640"
|
|
||||||
height="264"
|
|
||||||
|
|
||||||
data-setup="{}"
|
|
||||||
>
|
|
||||||
|
|
||||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
|
||||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
|
||||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
|
||||||
|
|
||||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
|
||||||
<!--source src="1.mp4" type="video/mp4" /-->
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<!-- 3.引入video.js库文件 -->
|
|
||||||
<script src="video.min.js"></script>
|
|
||||||
<script src="flv.min.js"></script>
|
|
||||||
<script src="videojs-flvjs.min.js"></script>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
var videoFlvPlayer = videojs('my-video');
|
|
||||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
|
||||||
/*
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
//console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
|
|
||||||
console.log(differTime);
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 10 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 10){
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
var allDiffTime=0;
|
|
||||||
var startTime=new Date().getTime();
|
|
||||||
console.log("now:"+startTime);
|
|
||||||
videoFlvPlayer.on('timeupdate',function () {
|
|
||||||
console.log("正在播放------");
|
|
||||||
|
|
||||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
|
||||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
|
||||||
console.log(differTime);
|
|
||||||
|
|
||||||
|
|
||||||
// 差值小于1.5s时根据1倍速进行播放
|
|
||||||
if (differTime < 1.5){
|
|
||||||
videoFlvPlayer.playbackRate(1);
|
|
||||||
}
|
|
||||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
|
||||||
if (differTime < 5 && differTime > 1.5) {
|
|
||||||
|
|
||||||
videoFlvPlayer.playbackRate(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(videoFlvPlayer.buffered);
|
|
||||||
// 差值大于10s时进行重新加载直播流
|
|
||||||
if (differTime > 5){
|
|
||||||
|
|
||||||
var endTime=new Date().getTime();
|
|
||||||
allDiffTime=endTime-startTime;
|
|
||||||
console.log("---->"+allDiffTime);
|
|
||||||
console.log("重新刷新流!!");
|
|
||||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
|
||||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
|
||||||
videoFlvPlayer.src(
|
|
||||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
|
||||||
);
|
|
||||||
videoFlvPlayer.play();
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
!function e(t,r,o){function n(l,f){if(!r[l]){if(!t[l]){var u="function"==typeof require&&require;if(!f&&u)return u(l,!0);if(i)return i(l,!0);var a=new Error("Cannot find module '"+l+"'");throw a.code="MODULE_NOT_FOUND",a}var c=r[l]={exports:{}};t[l][0].call(c.exports,function(e){var r=t[l][1][e];return n(r||e)},c,c.exports,e,t,r,o)}return r[l].exports}for(var i="function"==typeof require&&require,l=0;l<o.length;l++)n(o[l]);return n}({1:[function(e,t,r){(function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(r,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=function e(t,r,o){null===t&&(t=Function.prototype);var n=Object.getOwnPropertyDescriptor(t,r);if(void 0===n){var i=Object.getPrototypeOf(t);return null===i?void 0:e(i,r,o)}if("value"in n)return n.value;var l=n.get;if(void 0!==l)return l.call(o)},f="undefined"!=typeof window?window.videojs:void 0!==e?e.videojs:null,u=function(e){return e&&e.__esModule?e:{default:e}}(f),a=u.default.getTech("Html5"),c=u.default.mergeOptions||u.default.util.mergeOptions,s={mediaDataSource:{},config:{}},p=function(e){function r(e,n){return t(this,r),e=c(s,e),o(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e,n))}return n(r,e),i(r,[{key:"setSrc",value:function(e){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy());var t=this.options_.mediaDataSource,r=this.options_.config;t.type=void 0===t.type?"flv":t.type,t.url=e,this.flvPlayer=window.flvjs.createPlayer(t,r),this.flvPlayer.attachMediaElement(this.el_),this.flvPlayer.load()}},{key:"dispose",value:function(){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy()),l(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"dispose",this).call(this)}}]),r}(a);p.isSupported=function(){return window.flvjs&&window.flvjs.isSupported()},p.formats={"video/flv":"FLV","video/x-flv":"FLV"},p.canPlayType=function(e){return p.isSupported()&&e in p.formats?"maybe":""},p.canPlaySource=function(e,t){return p.canPlayType(e.type)},p.VERSION="0.2.0",u.default.registerTech("Flvjs",p),r.default=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);
|
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -119,14 +119,17 @@ export default {
|
||||||
formatter: "{b|{b}}{c|{c}}人",
|
formatter: "{b|{b}}{c|{c}}人",
|
||||||
rich: {
|
rich: {
|
||||||
b: {
|
b: {
|
||||||
fontSize: 15,
|
fontSize: 14,
|
||||||
lineHeight: 33,
|
lineHeight: 33,
|
||||||
},
|
},
|
||||||
c: {
|
c: {
|
||||||
fontSize: 25,
|
fontSize: 20,
|
||||||
lineHeight: 22,
|
lineHeight: 22,
|
||||||
align: "center",
|
align: "center",
|
||||||
opacity: 0.1
|
opacity: 0.1,
|
||||||
|
// color:'#fff',
|
||||||
|
fontWeight:700,
|
||||||
|
padding: [0, 5, 0, 5]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -136,6 +139,8 @@ export default {
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
normal: {
|
normal: {
|
||||||
|
length: 5,
|
||||||
|
length2: 10,
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -110,25 +110,30 @@ export default {
|
||||||
itemStyle: { // 此配置
|
itemStyle: { // 此配置
|
||||||
normal: {
|
normal: {
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
borderColor: '#52FFC1'
|
borderColor: '#52FFC1',
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
rich: {
|
rich: {
|
||||||
b: {
|
b: {
|
||||||
fontSize: 15,
|
fontSize: 14,
|
||||||
lineHeight: 33,
|
lineHeight: 33,
|
||||||
},
|
},
|
||||||
c: {
|
c: {
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
lineHeight: 22,
|
lineHeight: 22,
|
||||||
align: "center",
|
align: "center",
|
||||||
opacity: 0.1
|
opacity: 0.1,
|
||||||
|
fontWeight:700,
|
||||||
|
padding: [0, 5, 0, 5]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
position: '',
|
position: '',
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
normal: {
|
normal: {
|
||||||
|
length: 5,
|
||||||
|
length2: 10,
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -789,6 +789,12 @@ $gantt_item_half: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.el-table .el-table__cell .hover-row{
|
||||||
|
background-color: #2f807d!important;
|
||||||
|
}
|
||||||
|
.el-table .success-row{
|
||||||
|
background-color: #2f807d!important;
|
||||||
|
}
|
||||||
.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell {
|
.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell {
|
||||||
background-color: #2f807d!important;
|
background-color: #2f807d!important;
|
||||||
}
|
}
|
||||||
|
|
@ -819,7 +825,7 @@ $gantt_item_half: 4px;
|
||||||
// background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
color: #ADFFFE!important;
|
color: #ADFFFE!important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 ;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -849,7 +855,15 @@ $gantt_item_half: 4px;
|
||||||
background: #1A5856 !important;
|
background: #1A5856 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .el-table .success-row {
|
// /deep/ .el-table .success-row {
|
||||||
background: transparent;
|
// background: transparent;
|
||||||
}
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.el-table__body .el-table__row.hover-row td{
|
||||||
|
background-color: #2f807d !important;
|
||||||
|
}
|
||||||
|
.el-table tbody tr:hover>td {
|
||||||
|
background: #2f807d !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -41,11 +41,16 @@ Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需
|
||||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||||
return moment(input).format(fmtstring);
|
return moment(input).format(fmtstring);
|
||||||
});
|
});
|
||||||
|
// import videojs from "video.js";
|
||||||
|
// import "video.js/dist/video-js.css";
|
||||||
|
// Vue.prototype.$video = videojs;
|
||||||
|
Vue.prototype.$moment = moment
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
//引入video
|
||||||
import videojs from "video.js";
|
import videojs from "video.js";
|
||||||
import "video.js/dist/video-js.css";
|
import "video.js/dist/video-js.css";
|
||||||
Vue.prototype.$video = videojs;
|
Vue.prototype.$video = videojs;
|
||||||
Vue.prototype.$moment = moment
|
|
||||||
Vue.config.productionTip = false
|
|
||||||
//MQTT订阅
|
//MQTT订阅
|
||||||
var currentTopics = null;
|
var currentTopics = null;
|
||||||
var client = null;
|
var client = null;
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ Vue.use(Router);
|
||||||
|
|
||||||
const router = new Router({
|
const router = new Router({
|
||||||
mode: process.env.NODE_ENV === "production" ? "history" : "",
|
mode: process.env.NODE_ENV === "production" ? "history" : "",
|
||||||
base: process.env.NODE_ENV === "production" ? "/web" : "",
|
base: process.env.NODE_ENV === "production" ? "/" : "",
|
||||||
routes: [
|
routes: [
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -9,10 +9,21 @@
|
||||||
<div>
|
<div>
|
||||||
</div>
|
</div>
|
||||||
<div class="titRight">
|
<div class="titRight">
|
||||||
<span>2023年2月17日 星期四 14:26</span>
|
<span>{{ dateNew }} {{ getWeek }} {{ time }}</span>
|
||||||
<span></span>
|
<span
|
||||||
<span> 天气 </span>
|
><img
|
||||||
<span>晴 12℃</span>
|
:src="weatherImg"
|
||||||
|
alt=""
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
/></span>
|
||||||
|
<span
|
||||||
|
> 天气 </span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
>{{ weatherItem.weather }} {{
|
||||||
|
weatherItem.temperature
|
||||||
|
}}℃</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -32,7 +43,7 @@
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="password" label="" style="margin-top: 15px;margin-bottom:35px">
|
<el-form-item prop="password" label="" style="margin-top: 15px;margin-bottom:35px">
|
||||||
<el-input type="password" placeholder="请输入密码" v-model="param.password" @keyup.enter.native="submitForm()">
|
<el-input type="password" placeholder="请输入密码" v-model="param.password" @keyup.enter.native="submitForm()" show-password>
|
||||||
<el-button slot="prepend" icon="el-icon-lock"></el-button>
|
<el-button slot="prepend" icon="el-icon-lock"></el-button>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -54,7 +65,7 @@ import BarChart from "@/components/common/BarChart";
|
||||||
import mdScreenPie from "@/components/common/mdScreenPie";
|
import mdScreenPie from "@/components/common/mdScreenPie";
|
||||||
import Swiper from "@/components/common/carousel";
|
import Swiper from "@/components/common/carousel";
|
||||||
import Resize from '../utils/Resize.vue'
|
import Resize from '../utils/Resize.vue'
|
||||||
import {getToken} from "@/api/api";
|
import {getToken,getWeatherData} from "@/api/api";
|
||||||
export default {
|
export default {
|
||||||
name: "report",
|
name: "report",
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -68,11 +79,23 @@ export default {
|
||||||
tienum: '',
|
tienum: '',
|
||||||
showType: true,
|
showType: true,
|
||||||
topicSends:[],
|
topicSends:[],
|
||||||
|
weatherImg: require("@/assets/pic/sun.png"),
|
||||||
|
getWeek: "星期四",
|
||||||
|
dateNew: "2023年2月17日",
|
||||||
|
time: "14:26",
|
||||||
|
temperature: "12",
|
||||||
|
weather: "晴",
|
||||||
|
weatherItem: {},
|
||||||
param: {
|
param: {
|
||||||
username: 'dlgc_pic',
|
username: 'dlgc_pic',
|
||||||
password: 'e19d5cd5af0378da05f63f891c7467af',
|
password: 'e19d5cd5af0378da05f63f891c7467af',
|
||||||
tenantId:'748495'
|
tenantId:'748495'
|
||||||
},
|
},
|
||||||
|
// param: {
|
||||||
|
// username: '',
|
||||||
|
// password: '',
|
||||||
|
// tenantId:''
|
||||||
|
// },
|
||||||
checked: false,
|
checked: false,
|
||||||
rules: {
|
rules: {
|
||||||
tenantId: [{ required: true, message: '账号Id不能为空', trigger: 'blur' }],
|
tenantId: [{ required: true, message: '账号Id不能为空', trigger: 'blur' }],
|
||||||
|
|
@ -84,51 +107,14 @@ export default {
|
||||||
created() {
|
created() {
|
||||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||||
this.vdaH = h - 0 + "px";
|
this.vdaH = h - 0 + "px";
|
||||||
// this.createMqtt()
|
this.createMqtt()
|
||||||
this.getWeather()
|
this.getWeather()
|
||||||
// this.getTokenData()
|
window.setInterval(() => {
|
||||||
|
this.getTime();
|
||||||
|
}, 1000);
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getTokenData(){
|
|
||||||
// getToken({grant_type:'password',scope:'all',tenantId:'748495',username:'dlgc_pic',password:'e19d5cd5af0378da05f63f891c7467af',type:"account"}).then(res => {
|
|
||||||
// console.log("res",res.data)
|
|
||||||
// })
|
|
||||||
let data = {
|
|
||||||
grant_type:'password',
|
|
||||||
scope:'all',
|
|
||||||
tenantId:'748495',
|
|
||||||
username:'dlgc_pic',
|
|
||||||
password:'e19d5cd5af0378da05f63f891c7467af',
|
|
||||||
type:"account"}
|
|
||||||
|
|
||||||
getToken(data).then((res)=>{
|
|
||||||
})
|
|
||||||
// this.$axios({
|
|
||||||
// method: "post",
|
|
||||||
// // url: `${baseUrl}file/local/files`,
|
|
||||||
// url: `http://175.27.191.156:11000/api/blade-auth/oauth/token`,
|
|
||||||
// data: data,
|
|
||||||
// dataType: 'jsonp',
|
|
||||||
// headers: {
|
|
||||||
// // Authorization: "Basic " + token,
|
|
||||||
// Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
|
|
||||||
// TenantId: '748495'
|
|
||||||
// },
|
|
||||||
// })
|
|
||||||
// .then(function(res) {
|
|
||||||
// console.log(res.data,'================');
|
|
||||||
// // z.modelshowdata.fileList = [
|
|
||||||
// // { fileName: e.file.name, filePath: v.data.fileName },
|
|
||||||
// // ];
|
|
||||||
// // z.$message.success("上传成功");
|
|
||||||
// })
|
|
||||||
// .catch(function(err) {
|
|
||||||
// // z.$message.error("请求失败");
|
|
||||||
// });
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
getType() {
|
getType() {
|
||||||
let datas = {
|
let datas = {
|
||||||
account:this.param.username,
|
account:this.param.username,
|
||||||
|
|
@ -190,7 +176,7 @@ export default {
|
||||||
},
|
},
|
||||||
createMqtt() {
|
createMqtt() {
|
||||||
|
|
||||||
this.topicSends = ['/SC/pub/uwb'];
|
this.topicSends = ['webdata'];
|
||||||
console.log("this.topicSends",this.topicSends)
|
console.log("this.topicSends",this.topicSends)
|
||||||
window.PubScribe(this.topicSends, this.realInfo);
|
window.PubScribe(this.topicSends, this.realInfo);
|
||||||
},
|
},
|
||||||
|
|
@ -199,7 +185,7 @@ export default {
|
||||||
// console.log("topic",topic)
|
// console.log("topic",topic)
|
||||||
switch (topic) {
|
switch (topic) {
|
||||||
// 接收托片
|
// 接收托片
|
||||||
case "/SC/pub/uwb":
|
case "webdata":
|
||||||
try {
|
try {
|
||||||
console.log("message",message)
|
console.log("message",message)
|
||||||
// const utf8decoder = new TextDecoder()
|
// const utf8decoder = new TextDecoder()
|
||||||
|
|
@ -214,13 +200,82 @@ export default {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
//获取当前时间
|
||||||
|
getTime() {
|
||||||
|
let myDate = new Date();
|
||||||
|
let wk = myDate.getDay();
|
||||||
|
//年
|
||||||
|
let year = new Date().getFullYear();
|
||||||
|
//月份是从0月开始获取的，所以要+1;
|
||||||
|
let month = new Date().getMonth() + 1;
|
||||||
|
//日
|
||||||
|
let day = new Date().getDate();
|
||||||
|
//时
|
||||||
|
let hour = new Date().getHours();
|
||||||
|
//分
|
||||||
|
let minute = new Date().getMinutes();
|
||||||
|
//秒
|
||||||
|
// let second = new Date().getSeconds();
|
||||||
|
let weeks = [
|
||||||
|
"星期日",
|
||||||
|
"星期一",
|
||||||
|
"星期二",
|
||||||
|
"星期三",
|
||||||
|
"星期四",
|
||||||
|
"星期五",
|
||||||
|
"星期六",
|
||||||
|
];
|
||||||
|
let week = weeks[wk];
|
||||||
|
this.getWeek = week;
|
||||||
|
this.dateNew = year + "年" + month + "月" + day + "日";
|
||||||
|
this.time = hour + ":" + minute;
|
||||||
|
},
|
||||||
getWeather () {
|
getWeather () {
|
||||||
this.$axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100' ).then(function(reponse){
|
getWeatherData({
|
||||||
console.log("reponse.data",reponse.data)
|
key: 'e979d73682c0c69059e4cb6740c9dacd',
|
||||||
}).catch(() => {})
|
city:'320100'
|
||||||
|
}).then((res) => {
|
||||||
|
this.weatherItem = res.data.lives[0];
|
||||||
|
this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
|
||||||
|
})
|
||||||
} ,
|
} ,
|
||||||
|
changeWeatherImg(weather) {
|
||||||
|
if (weather == "雾") {
|
||||||
|
return require("@/assets/weather/gale.png");
|
||||||
|
} else if (weather == "阴") {
|
||||||
|
return require("@/assets/weather/Cloudy.png");
|
||||||
|
} else if (weather == "多云") {
|
||||||
|
return require("@/assets/weather/Cloudy.png");
|
||||||
|
} else if (weather == "晴") {
|
||||||
|
return require("@/assets/weather/sun.png");
|
||||||
|
} else if (weather == "中雨") {
|
||||||
|
return require("@/assets/weather/middlerain.png");
|
||||||
|
} else if (weather == "小雨") {
|
||||||
|
return require("@/assets/weather/rain.png");
|
||||||
|
} else if (weather == "大雨") {
|
||||||
|
return require("@/assets/weather/rainstorm.png");
|
||||||
|
} else if (weather == "沙尘暴") {
|
||||||
|
return require("@/assets/weather/sand.png");
|
||||||
|
} else if (weather == "霾") {
|
||||||
|
return require("@/assets/weather/smog.png");
|
||||||
|
} else if (weather == "雷电") {
|
||||||
|
return require("@/assets/weather/thunder.png");
|
||||||
|
} else if (weather == "雷阵雨") {
|
||||||
|
return require("@/assets/weather/shower.png");
|
||||||
|
} else if (weather == "冰雹") {
|
||||||
|
return require("@/assets/weather/hail.png");
|
||||||
|
} else if (weather == "雪") {
|
||||||
|
return require("@/assets/weather/snow.png");
|
||||||
|
} else if (weather == "雨夹雪") {
|
||||||
|
return require("@/assets/weather/rainsnow.png");
|
||||||
|
} else if (weather == "中雪") {
|
||||||
|
return require("@/assets/weather/mieddlesnow.png");
|
||||||
|
} else if (weather == "大雪") {
|
||||||
|
return require("@/assets/weather/bigsnow.png");
|
||||||
|
} else if (weather == "小雪") {
|
||||||
|
return require("@/assets/weather/rainlitter.png");
|
||||||
|
}
|
||||||
|
},
|
||||||
changeMessage(val) {
|
changeMessage(val) {
|
||||||
this.tienum = val
|
this.tienum = val
|
||||||
},
|
},
|
||||||
|
|
@ -329,7 +384,7 @@ getWeather () {
|
||||||
right: 80px;
|
right: 80px;
|
||||||
width: 17.5px;
|
width: 17.5px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background: url("~@/assets/pic/sun.png") no-repeat;
|
// background: url("~@/assets/pic/sun.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -525,7 +580,7 @@ getWeather () {
|
||||||
// background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
color: rgba(255, 255, 255, 0.7) !important;
|
color: rgba(255, 255, 255, 0.7) !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 ;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@
|
||||||
<div
|
<div
|
||||||
@click="disBox"
|
@click="disBox"
|
||||||
class="screenBox"
|
class="screenBox"
|
||||||
|
v-if="disBoxShow"
|
||||||
:style="{
|
:style="{
|
||||||
'background-image': !boxNone
|
'background-image': !boxNone
|
||||||
? `url(${require(`../assets/pic/exitFull.png`)}`
|
? `url(${require(`../assets/pic/exitFull.png`)}`
|
||||||
|
|
@ -517,6 +518,7 @@ export default {
|
||||||
menuType: 4,
|
menuType: 4,
|
||||||
numberList: [5, 5],
|
numberList: [5, 5],
|
||||||
boxNone: true,
|
boxNone: true,
|
||||||
|
disBoxShow:true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -555,6 +557,15 @@ export default {
|
||||||
},
|
},
|
||||||
disBox() {
|
disBox() {
|
||||||
this.boxNone = !this.boxNone;
|
this.boxNone = !this.boxNone;
|
||||||
|
if(this.boxNone == true){
|
||||||
|
console.log("closeBig")
|
||||||
|
window.parent.closeBig();
|
||||||
|
this.disBoxShow=true
|
||||||
|
}else if(this.boxNone == false){
|
||||||
|
console.log("openBig")
|
||||||
|
window.parent.openBig();
|
||||||
|
this.disBoxShow=false
|
||||||
|
}
|
||||||
this.$refs.screenBox.style.animationPlayState = "running";
|
this.$refs.screenBox.style.animationPlayState = "running";
|
||||||
},
|
},
|
||||||
goBack(val) {
|
goBack(val) {
|
||||||
|
|
@ -999,7 +1010,7 @@ export default {
|
||||||
|
|
||||||
.ftahBox {
|
.ftahBox {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 27px;
|
padding-top: 17px;
|
||||||
width: 89px;
|
width: 89px;
|
||||||
|
|
||||||
@media only screen and (max-height: 1000px) {
|
@media only screen and (max-height: 1000px) {
|
||||||
|
|
@ -1053,7 +1064,7 @@ export default {
|
||||||
}
|
}
|
||||||
.ftahBox1 {
|
.ftahBox1 {
|
||||||
// text-align: center;
|
// text-align: center;
|
||||||
padding-top: 27px;
|
padding-top: 17px;
|
||||||
width: 89px;
|
width: 89px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -449,7 +449,6 @@ export default {
|
||||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||||
this.vdaH = h - 0 + "px";
|
this.vdaH = h - 0 + "px";
|
||||||
this.createMqtt()
|
this.createMqtt()
|
||||||
this.getWeather()
|
|
||||||
this.getTime()
|
this.getTime()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -505,14 +504,14 @@ export default {
|
||||||
this.time = hour +':'+ minute
|
this.time = hour +':'+ minute
|
||||||
},
|
},
|
||||||
//获取天气数据
|
//获取天气数据
|
||||||
getWeather () {
|
// getWeather () {
|
||||||
axios({
|
// axios({
|
||||||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
|
// url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
|
||||||
methods: ''
|
// methods: ''
|
||||||
}).then(res => {
|
// }).then(res => {
|
||||||
this.weatherItem = res.data.lives[0];
|
// this.weatherItem = res.data.lives[0];
|
||||||
});
|
// });
|
||||||
} ,
|
// } ,
|
||||||
changeMessage(val) {
|
changeMessage(val) {
|
||||||
this.tienum = val
|
this.tienum = val
|
||||||
},
|
},
|
||||||
|
|
@ -1476,7 +1475,7 @@ export default {
|
||||||
// background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
color: rgba(255, 255, 255, 0.7) !important;
|
color: rgba(255, 255, 255, 0.7) !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 ;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
<div
|
<div
|
||||||
@click="disBox"
|
@click="disBox"
|
||||||
ref="screenBox"
|
ref="screenBox"
|
||||||
|
v-if="disBoxShow"
|
||||||
:class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
|
:class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
|
||||||
:style="{
|
:style="{
|
||||||
'background-image': !boxNone
|
'background-image': !boxNone
|
||||||
|
|
@ -209,7 +210,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="videoBox">
|
<div class="videoBox">
|
||||||
<div
|
<div
|
||||||
style="position: relative; margin-left: 30px; margin-right: 20px"
|
style="position: absolute; margin-left: 30px; margin-right: 20px"
|
||||||
class="videoFat"
|
class="videoFat"
|
||||||
v-for="(item,index) in videoList"
|
v-for="(item,index) in videoList"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
|
@ -564,6 +565,7 @@ export default {
|
||||||
onSiteNumber: [], //今日出勤
|
onSiteNumber: [], //今日出勤
|
||||||
boxNone: true,
|
boxNone: true,
|
||||||
topicSends: [],
|
topicSends: [],
|
||||||
|
disBoxShow:true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -677,10 +679,13 @@ export default {
|
||||||
console.log("this.boxNone",this.boxNone)
|
console.log("this.boxNone",this.boxNone)
|
||||||
this.boxNone = !this.boxNone;
|
this.boxNone = !this.boxNone;
|
||||||
if(this.boxNone == true){
|
if(this.boxNone == true){
|
||||||
|
console.log("closeBig")
|
||||||
window.parent.closeBig();
|
window.parent.closeBig();
|
||||||
|
this.disBoxShow=true
|
||||||
}else if(this.boxNone == false){
|
}else if(this.boxNone == false){
|
||||||
|
console.log("openBig")
|
||||||
window.parent.openBig();
|
window.parent.openBig();
|
||||||
|
this.disBoxShow=false
|
||||||
}
|
}
|
||||||
this.$refs.screenBox.style.animationPlayState = "running";
|
this.$refs.screenBox.style.animationPlayState = "running";
|
||||||
},
|
},
|
||||||
|
|
@ -1257,15 +1262,20 @@ window.addEventListener('message',this.getiframeMsg)
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
overflow-y: auto; //重点
|
overflow-y: auto; //重点
|
||||||
height: calc(100% - 60px);
|
// height: calc(100% - 60px);
|
||||||
|
height: 85%;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
|
width: 100%;
|
||||||
.videoFat {
|
.videoFat {
|
||||||
background: gray;
|
background: gray;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 165px;
|
// width: 165px;
|
||||||
height: 183px;
|
// height: 183px;
|
||||||
|
height: 92%;
|
||||||
|
width: 87%;
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 5%;
|
margin-top: 2%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -1274,8 +1284,8 @@ window.addEventListener('message',this.getiframeMsg)
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
top: 45%;
|
top: 50%;
|
||||||
left: 40%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1809,7 +1819,7 @@ window.addEventListener('message',this.getiframeMsg)
|
||||||
// background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
color: rgba(255, 255, 255, 0.7) !important;
|
color: rgba(255, 255, 255, 0.7) !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 ;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1859,9 +1869,16 @@ window.addEventListener('message',this.getiframeMsg)
|
||||||
/deep/ .el-scrollbar__wrap {
|
/deep/ .el-scrollbar__wrap {
|
||||||
margin-bottom: 10px !important;
|
margin-bottom: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.el-carousel__indicators--outside {
|
.el-carousel__indicators--outside {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.el-progress-bar__outer{
|
||||||
|
/* background-color: transparent!important; */
|
||||||
|
background-color:rgb(55,142,136)!important;
|
||||||
|
opacity: 0.5!important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
<div
|
<div
|
||||||
@click="disBox"
|
@click="disBox"
|
||||||
class="screenBox"
|
class="screenBox"
|
||||||
|
v-if="disBoxShow"
|
||||||
:style="{
|
:style="{
|
||||||
'background-image': !boxNone
|
'background-image': !boxNone
|
||||||
? `url(${require(`../assets/pic/exitFull.png`)}`
|
? `url(${require(`../assets/pic/exitFull.png`)}`
|
||||||
|
|
@ -344,6 +345,7 @@ export default {
|
||||||
topicSends: [],
|
topicSends: [],
|
||||||
pieData: [], //人员统计,
|
pieData: [], //人员统计,
|
||||||
constructionPersonnel: [], //施工人员组成
|
constructionPersonnel: [], //施工人员组成
|
||||||
|
disBoxShow:true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -428,8 +430,10 @@ export default {
|
||||||
if(this.boxNone == true){
|
if(this.boxNone == true){
|
||||||
|
|
||||||
window.parent.closeBig();
|
window.parent.closeBig();
|
||||||
|
this.disBoxShow=true
|
||||||
}else if(this.boxNone == false){
|
}else if(this.boxNone == false){
|
||||||
window.parent.openBig();
|
window.parent.openBig();
|
||||||
|
this.disBoxShow=false
|
||||||
}
|
}
|
||||||
this.$refs.screenBox.style.animationPlayState = "running";
|
this.$refs.screenBox.style.animationPlayState = "running";
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1294,7 +1294,7 @@ export default {
|
||||||
// background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
color: #ADFFFE !important;
|
color: #ADFFFE !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 ;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- <Resize> -->
|
<!-- <Resize> -->
|
||||||
<div >
|
<div >
|
||||||
<div @click="disBox" class="screenBox"
|
<div @click="disBox" class="screenBox" v-if="disBoxShow"
|
||||||
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
|
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
|
||||||
</div> <!-- 左侧模块1 -->
|
</div> <!-- 左侧模块1 -->
|
||||||
<!-- 左侧模块1 -->
|
<!-- 左侧模块1 -->
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="btnIcon" @click="gantDialog"></div>
|
<div class="btnIcon" @click="gantDialog"></div>
|
||||||
<div class="tableBox">
|
<div class="tableBox">
|
||||||
<el-table height="237" :row-style="{ height: '0' }" :cell-style="{ padding: '8px' }"
|
<el-table height="100%" :row-style="{ height: '0' }" :cell-style="{ padding: '8px' }"
|
||||||
:row-class-name="tableRowClassName" :data="tableData" style="width: 100%">
|
:row-class-name="tableRowClassName" :data="tableData" style="width: 100%">
|
||||||
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="name"
|
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="name"
|
||||||
label="任务名称">
|
label="任务名称">
|
||||||
|
|
@ -137,10 +137,10 @@
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="table2Box">
|
<div class="table2Box">
|
||||||
<el-table height="270" :row-class-name="tableRowClassName" :data="table2Data" style="width: 100%" :cell-style="{ padding: '5px' }">
|
<el-table height="100%" :row-class-name="tableRowClassName" :data="table2Data" style="width: 100%" :cell-style="{ padding: '5px' }">
|
||||||
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="name" label="任务名称">
|
<el-table-column align="left" show-overflow-tooltip prop="name" label="任务名称" style="left:20px">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="startDate" label="开始时间">
|
<el-table-column align="center" prop="startDate" label="开始时间" >
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="endDate" label="结束时间">
|
<el-table-column align="center" prop="endDate" label="结束时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
@ -383,7 +383,8 @@ export default {
|
||||||
type: false,
|
type: false,
|
||||||
menuType: 3,
|
menuType: 3,
|
||||||
numberList: [5, 5],
|
numberList: [5, 5],
|
||||||
boxNone:true
|
boxNone:true,
|
||||||
|
disBoxShow:true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -396,8 +397,10 @@ export default {
|
||||||
this.boxNone = !this.boxNone
|
this.boxNone = !this.boxNone
|
||||||
if(this.boxNone == true){
|
if(this.boxNone == true){
|
||||||
window.parent.closeBig();
|
window.parent.closeBig();
|
||||||
|
this.disBoxShow=true
|
||||||
}else if(this.boxNone == false){
|
}else if(this.boxNone == false){
|
||||||
window.parent.openBig();
|
window.parent.openBig();
|
||||||
|
this.disBoxShow=false
|
||||||
}
|
}
|
||||||
this.$refs.screenBox.style.animationPlayState='running'
|
this.$refs.screenBox.style.animationPlayState='running'
|
||||||
|
|
||||||
|
|
@ -653,6 +656,10 @@ export default {
|
||||||
top: 70px;
|
top: 70px;
|
||||||
left: 16px;
|
left: 16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
height: 286px;
|
||||||
|
@media only screen and (max-height: 1000px) {
|
||||||
|
height: 237px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.dh1 {
|
.dh1 {
|
||||||
animation: mytest 0.5s linear;
|
animation: mytest 0.5s linear;
|
||||||
|
|
@ -851,7 +858,7 @@ export default {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 10px auto 0;
|
margin: 13px auto 0;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
border-bottom: 1px solid rgba(96, 213, 205, 0.4);
|
border-bottom: 1px solid rgba(96, 213, 205, 0.4);
|
||||||
}
|
}
|
||||||
|
|
@ -1273,7 +1280,7 @@ export default {
|
||||||
// background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
color: #ADFFFE !important;
|
color: #ADFFFE !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
padding-left: 0 !important;
|
padding-left: 7 !important;
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,69 +31,87 @@
|
||||||
<p class="right" @click="changePage(nextIndex)"></p>
|
<p class="right" @click="changePage(nextIndex)"></p>
|
||||||
</div> -->
|
</div> -->
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<el-carousel indicator-position="1000" :autoplay="true" ref="carousel">
|
<el-carousel indicator-position="1000" :autoplay="true" ref="carousel">
|
||||||
<el-carousel-item v-for="(item, index) in list" :key="index">
|
<el-carousel-item v-for="(item, index) in list" :key="index">
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxChild">
|
<div class="boxChild">
|
||||||
<div class="fathBox"></div>
|
<div class="fathBox"></div>
|
||||||
<div class="fath2Box">
|
<div class="fath2Box">
|
||||||
<div style="margin-left: 21px;margin-top: 8px;">
|
<div style="margin-left: 21px; margin-top: 8px">
|
||||||
<span style="color:#82DDDB;">派单时间：</span>
|
<span style="color: #82dddb">派单时间：</span>
|
||||||
<span style="color:#fff;">{{ item.value }}</span>
|
<span style="color: #fff">{{ item.allocateDate }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-left: 21px;margin-top: 8px;">
|
<div style="margin-left: 21px; margin-top: 8px">
|
||||||
<span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">整改人：</span>
|
<span
|
||||||
<span style="color:#fff;">陈晓红</span>
|
style="
|
||||||
</div>
|
color: #82dddb;
|
||||||
<div style="margin-left: 21px;margin-top: 8px;">
|
width: 71px;
|
||||||
<span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">状态：</span>
|
text-align-last: justify;
|
||||||
<span style="color:#EAA505;">待处理</span>
|
display: inline-block;
|
||||||
</div>
|
"
|
||||||
<div style="margin-left: 21px;margin-top: 8px;">
|
>整改人：</span
|
||||||
<span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">隐患内容：</span>
|
>
|
||||||
<span style="color:#fff;">现场作业准备</span>
|
<span style="color: #fff">{{ item.rectifier }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-left: 21px;margin-top: 8px;">
|
<div style="margin-left: 21px; margin-top: 8px">
|
||||||
<span style="color:#82DDDB;width: 71px;vertical-align: top; text-align-last: justify;display: inline-block;">隐患内容：</span>
|
<span
|
||||||
<span style="color:#fff;display: inline-block;width: 90px;">上方悬挂摇晃吊灯下坠</span>
|
style="
|
||||||
</div>
|
color: #82dddb;
|
||||||
|
width: 71px;
|
||||||
|
text-align-last: justify;
|
||||||
|
display: inline-block;
|
||||||
|
"
|
||||||
|
>状态：</span
|
||||||
|
>
|
||||||
|
<span style="color: #eaa505">{{ item.status }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-left: 21px; margin-top: 8px">
|
||||||
|
<span
|
||||||
|
style="
|
||||||
|
color: #82dddb;
|
||||||
|
width: 71px;
|
||||||
|
text-align-last: justify;
|
||||||
|
display: inline-block;
|
||||||
|
"
|
||||||
|
>隐患内容：</span
|
||||||
|
>
|
||||||
|
<span style="color: #fff">{{ item.troubleContent }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-left: 21px; margin-top: 8px">
|
||||||
|
<span
|
||||||
|
style="
|
||||||
|
color: #82dddb;
|
||||||
|
width: 71px;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align-last: justify;
|
||||||
|
display: inline-block;
|
||||||
|
"
|
||||||
|
>隐患内容：</span
|
||||||
|
>
|
||||||
|
<span style="color: #fff; display: inline-block; width: 90px">{{
|
||||||
|
item.troubleMark
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="left" @click="changePage(1)"></p>
|
|
||||||
<p class="right" @click="changePage(2)"></p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
<p class="left" @click="changePage(1)"></p>
|
||||||
|
<p class="right" @click="changePage(2)"></p>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { getResolveTroublePage } from "../api/api";
|
||||||
getMostTroubleCensus
|
|
||||||
} from "../api/api";
|
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: [
|
list: [],
|
||||||
{
|
|
||||||
value: "2023-01-17"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "2023-01-18"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "2023-01-19"
|
|
||||||
}, {
|
|
||||||
value: "2023-11-20"
|
|
||||||
}, {
|
|
||||||
value: "2023-01-21"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
listIndex: 0, //默认显示第几张图片
|
listIndex: 0, //默认显示第几张图片
|
||||||
timer: null, //定时器
|
timer: null, //定时器
|
||||||
};
|
};
|
||||||
|
|
@ -117,20 +135,33 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getData(){
|
getData() {
|
||||||
getMostTroubleCensus({
|
getResolveTroublePage({
|
||||||
projectId: sessionStorage.getItem("projectId"),
|
projectId: sessionStorage.getItem("projectId"),
|
||||||
// size:10,
|
size: 100,
|
||||||
// current:1
|
current: 1,
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
console.log(res.data,'==================');
|
this.list = Object.keys(res.data.data.records).map((item, index) => {
|
||||||
|
if (res.data.data.records[item].status == 0) {
|
||||||
|
res.data.data.records[item].status = "未完成";
|
||||||
|
} else {
|
||||||
|
res.data.data.records[item].status = "已完成";
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
allocateDate: res.data.data.records[item].allocateDate,
|
||||||
|
rectifier: res.data.data.records[item].rectifier,
|
||||||
|
status: res.data.data.records[item].status,
|
||||||
|
troubleContent: res.data.data.records[item].troubleContent,
|
||||||
|
troubleMark: res.data.data.records[item].troubleMark,
|
||||||
|
};
|
||||||
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
changePage(index) {
|
changePage(index) {
|
||||||
if (index == 1) {
|
if (index == 1) {
|
||||||
this.$refs.carousel.prev()
|
this.$refs.carousel.prev();
|
||||||
} else {
|
} else {
|
||||||
this.$refs.carousel.next()
|
this.$refs.carousel.next();
|
||||||
}
|
}
|
||||||
// this.listIndex = index;
|
// this.listIndex = index;
|
||||||
},
|
},
|
||||||
|
|
@ -157,13 +188,13 @@ export default {
|
||||||
this.setTimer();
|
this.setTimer();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getData()
|
this.getData();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
@marginLeft:50px;
|
@marginLeft: 50px;
|
||||||
.home {
|
.home {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -220,7 +251,6 @@ export default {
|
||||||
@media only screen and (max-height: 1000px) {
|
@media only screen and (max-height: 1000px) {
|
||||||
top: 31px;
|
top: 31px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
|
|
@ -260,7 +290,6 @@ export default {
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -268,8 +297,8 @@ export default {
|
||||||
.el-carousel__arrow--right {
|
.el-carousel__arrow--right {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.el-carousel__container {
|
.el-carousel__container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 180px !important;
|
height: 180px !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,118 +1,83 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tunnelvideo">
|
<div class="test_two_box">
|
||||||
<video
|
<video
|
||||||
class="videosmall"
|
id="myVideo"
|
||||||
ref="videosmallone"
|
class="video-js"
|
||||||
preload="auto"
|
>
|
||||||
muted
|
<source
|
||||||
autoplay
|
:src="videoitemUrl"
|
||||||
type="rtmp/flv"
|
type="video/mp4"
|
||||||
>
|
>
|
||||||
<source src="" />
|
</video>
|
||||||
</video>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import flvjs from "flv.js";
|
|
||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
videoitemUrl: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
videoUrllist: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
player: null,
|
player: null,
|
||||||
|
url:require('../assets/map4/5.mp4'),
|
||||||
|
videoitemUrl:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
//3.在销毁的声明周期中 必须要销毁掉播放器的容器！！！！血的教训
|
// 监听父组件中的数据变化，重新触发Echarts
|
||||||
beforeUnmount() {
|
videoitemUrl: {
|
||||||
if(this.player){
|
|
||||||
this.player.pause();
|
handler (val) {
|
||||||
this.player.unload();
|
console.log("val",val)
|
||||||
this.player.detachMediaElement();
|
// this.$nextTick(() => {
|
||||||
this.player.destroy();
|
this.videoitemUrl = val
|
||||||
this.player = null;
|
// })
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init()
|
this.initVideo();
|
||||||
// if (flvjs.isSupported()) {
|
console.log("videoitemUrl",this.videoitemUrl)
|
||||||
// var videoElement = document.getElementById('videoElement');
|
this.src = this.videoitemUrl
|
||||||
// this.flvPlayer = flvjs.createPlayer({
|
|
||||||
// type: 'rtsp',
|
|
||||||
// isLive: true,
|
|
||||||
// hasAudio: false,
|
|
||||||
// url: 'rtsp://admin:5Gpmlabs@172.16.1.242:554/cam/realmonitor?channel=1&subtype=0'
|
|
||||||
// });
|
|
||||||
// this.flvPlayer.attachMediaElement(videoElement);
|
|
||||||
// this.flvPlayer.load();
|
|
||||||
// this.flvPlayer.play();
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// play() {
|
initVideo() {
|
||||||
// this.flvPlayer.play();
|
//初始化视频方法
|
||||||
// }
|
let myPlayer = this.$video(myVideo, {
|
||||||
//2.在方法中
|
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
|
||||||
init() { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
|
controls: true,
|
||||||
setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
|
//自动播放属性,muted:静音播放
|
||||||
var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
|
autoplay: "false",
|
||||||
if (flvjs.isSupported()) {
|
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
|
||||||
//因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
|
preload: "auto",
|
||||||
if (this.player !== null) {
|
//设置视频播放器的显示宽度（以像素为单位）
|
||||||
this.player.pause();
|
width: "100%",
|
||||||
this.player.unload();
|
//设置视频播放器的显示高度（以像素为单位）
|
||||||
this.player.detachMediaElement();
|
height: "100%"
|
||||||
this.player.destroy();
|
});
|
||||||
this.player = null;
|
|
||||||
}
|
|
||||||
this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
|
|
||||||
{
|
|
||||||
type: "flv",
|
|
||||||
url: 'ws://192.168.0.20:9999/rtsp/1/channel=1&subtype=0/?url=rtsp://admin:dhtest123456@192.168.0.162:554', //你的url地址
|
|
||||||
isLive: true, //数据源是否为直播流
|
|
||||||
hasAudio: false, //数据源是否包含有音频
|
|
||||||
hasVideo: true, //数据源是否包含有视频
|
|
||||||
enableStashBuffer: true, //是否启用缓存区
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enableWorker: false, //不启用分离线程
|
|
||||||
enableStashBuffer: false, //关闭IO隐藏缓冲区
|
|
||||||
autoCleanupSourceBuffer: true, //自动清除缓存
|
|
||||||
lazyLoad: false,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
this.player.attachMediaElement(videoElement); //放到dom中去
|
|
||||||
this.player.load();//准备完成
|
|
||||||
//!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
|
|
||||||
this.player.play();//播放
|
|
||||||
}
|
}
|
||||||
}, 1000);
|
|
||||||
},
|
},
|
||||||
},
|
|
||||||
// beforeDestroy() {
|
|
||||||
// // 播放器存在清除播放器
|
|
||||||
// if (this.player) {
|
|
||||||
// this.player.destroy()
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style >
|
||||||
<style scoped>
|
.test_two_box{
|
||||||
.wrapper {
|
width:100%;
|
||||||
width: 800px;
|
height:100%
|
||||||
height: 600px;
|
}
|
||||||
margin: 100px 30px;
|
.myVideo-dimensions {
|
||||||
overflow: hidden;
|
width: 100%!important;
|
||||||
position: relative;
|
height: 100%!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iframe {
|
|
||||||
width: 1024px;
|
|
||||||
height: 608px;
|
|
||||||
position: absolute;
|
|
||||||
top: -150px;
|
|
||||||
left: -120px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
<div class="openChange" @click="tzSp(item.equipmentName, item.id)" v-show="item.status==false">
|
<div class="openChange" @click="tzSp(item.equipmentName, item.id)" v-show="item.status==false">
|
||||||
<img src="../assets/pic/play.png" alt="" style="width:100%;height:100%">
|
<img src="../assets/pic/play.png" alt="" style="width:100%;height:100%">
|
||||||
</div>
|
</div>
|
||||||
<iframe ref="iframe" id="iframeid" :src="src" frameborder="O" class="iframe" scrolling="auto" width="100%"
|
<iframe ref="iframe" id="iframeid" :src="src" frameborder="0" class="iframe" scrolling="auto" width="100%"
|
||||||
height="100%" v-show="item.status">
|
height="100%" v-show="item.status">
|
||||||
</iframe>
|
</iframe>
|
||||||
<div class="childrenBox">
|
<div class="childrenBox">
|
||||||
|
|
@ -424,7 +424,7 @@ export default {
|
||||||
id: res.data.data[item].id,
|
id: res.data.data[item].id,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
this.src = '../static/flv/demo1.html';
|
this.src = '../static/flv/video1.html';
|
||||||
window.addEventListener('message',this.getiframeMsg)
|
window.addEventListener('message',this.getiframeMsg)
|
||||||
});
|
});
|
||||||
//获取摄像头数量接口
|
//获取摄像头数量接口
|
||||||
|
|
|
||||||
|
|
@ -21,11 +21,13 @@
|
||||||
<div class="scFathBox" :style="{ height: leftOneBox }">
|
<div class="scFathBox" :style="{ height: leftOneBox }">
|
||||||
<div class="scFathChild">
|
<div class="scFathChild">
|
||||||
<img
|
<img
|
||||||
|
v-if="closeVideoShow"
|
||||||
src="../assets/pic/bh.png"
|
src="../assets/pic/bh.png"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
/>
|
/>
|
||||||
<div class="childrenBox">
|
<Video :videoitemUrl="videoitemUrl" :videoUrllist="videoUrllist" v-if="openVideoShow"></Video>
|
||||||
|
<div class="childrenBox">
|
||||||
{{ videoName }}
|
{{ videoName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -107,6 +109,7 @@
|
||||||
popper-class="elDatePicker"
|
popper-class="elDatePicker"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
v-model="timeForm.start"
|
v-model="timeForm.start"
|
||||||
|
value-format= 'yyyy-MM-dd HH:mm:ss'
|
||||||
type="datetime"
|
type="datetime"
|
||||||
placeholder="选择日期时间"
|
placeholder="选择日期时间"
|
||||||
>
|
>
|
||||||
|
|
@ -118,7 +121,9 @@
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
v-model="timeForm.end"
|
v-model="timeForm.end"
|
||||||
type="datetime"
|
type="datetime"
|
||||||
|
value-format= 'yyyy-MM-dd HH:mm:ss'
|
||||||
placeholder="选择日期时间"
|
placeholder="选择日期时间"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
>
|
>
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -159,6 +164,8 @@ import pieChart from "@/components/common/pieChart";
|
||||||
import pieDateChart from "@/components/common/pieDateChart";
|
import pieDateChart from "@/components/common/pieDateChart";
|
||||||
import Resize from "../utils/Resize.vue";
|
import Resize from "../utils/Resize.vue";
|
||||||
import { getCameraCount, getCameraHistory } from "@/api/api";
|
import { getCameraCount, getCameraHistory } from "@/api/api";
|
||||||
|
import flvjs from 'flv.js'
|
||||||
|
import Video from "./video";
|
||||||
export default {
|
export default {
|
||||||
name: "report",
|
name: "report",
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -176,6 +183,7 @@ export default {
|
||||||
RadarChart,
|
RadarChart,
|
||||||
pieDateChart,
|
pieDateChart,
|
||||||
Resize,
|
Resize,
|
||||||
|
Video
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -189,6 +197,16 @@ export default {
|
||||||
start: "",
|
start: "",
|
||||||
end: "",
|
end: "",
|
||||||
},
|
},
|
||||||
|
pickerOptions: {
|
||||||
|
disabledDate: (time) => {
|
||||||
|
const date = new Date(this.timeForm.start);
|
||||||
|
const day = 1 * 24 * 3600 * 1000-1;
|
||||||
|
const dateRegion = date.getTime() + day;
|
||||||
|
return new Date(time).getTime() > dateRegion || new Date(time).getTime() < date.getTime()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeVideoShow:true,
|
||||||
|
openVideoShow:false,
|
||||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||||
tableData: [
|
tableData: [
|
||||||
{
|
{
|
||||||
|
|
@ -254,6 +272,12 @@ export default {
|
||||||
leftOneBox: 0,
|
leftOneBox: 0,
|
||||||
isShowLookFor: false,
|
isShowLookFor: false,
|
||||||
bfkzBtn: false,
|
bfkzBtn: false,
|
||||||
|
videoUrllist:[
|
||||||
|
{id:"001",path:require('../assets/map4/5.mp4')},
|
||||||
|
{id:"002",path:require('../assets/map4/6.mp4')}
|
||||||
|
],
|
||||||
|
videoitemUrl:require('../assets/map4/5.mp4')
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -263,22 +287,43 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
//点击播放按
|
//点击播放按
|
||||||
bfClick() {
|
bfClick() {
|
||||||
|
console.log("this.isShowLookFor",this.isShowLookFor)
|
||||||
|
|
||||||
if (this.isShowLookFor) {
|
if (this.isShowLookFor) {
|
||||||
this.bfkzBtn = !this.bfkzBtn;
|
this.bfkzBtn = !this.bfkzBtn;
|
||||||
|
if(this.bfkzBtn==false){
|
||||||
|
console.log("this.bfkzBtn11",this.bfkzBtn)
|
||||||
|
this.closeVideoShow =true
|
||||||
|
this.openVideoShow=false
|
||||||
|
}else if(this.bfkzBtn==true){
|
||||||
|
console.log("this.bfkzBtn222",this.bfkzBtn)
|
||||||
|
this.closeVideoShow =false
|
||||||
|
this.openVideoShow=true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
//点击开始查看按钮
|
//点击开始查看按钮
|
||||||
lookForVideo() {
|
lookForVideo() {
|
||||||
if (this.timeForm.start == "" && this.timeForm.end == "") {
|
if (this.timeForm.start == "" && this.timeForm.end == "") {
|
||||||
this.isShowLookFor = false;
|
this.isShowLookFor = false;
|
||||||
} else {
|
} else {
|
||||||
|
console.log("this.timeForm.start",this.timeForm.start)
|
||||||
|
console.log("this.timeForm.end",this.timeForm.end)
|
||||||
let data = {
|
let data = {
|
||||||
equipmentId: this.videoId,
|
equipmentId: this.videoId,
|
||||||
startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
|
// startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
|
||||||
endTime: this.$moment(this.timeForm.end).format("YYYY-MM-DD hh:mm:ss"),
|
// endTime: this.$moment(this.timeForm.end).format("YYYY-MM-DD hh:mm:ss"),
|
||||||
|
startTime: this.timeForm.start,
|
||||||
|
endTime: this.timeForm.end,
|
||||||
};
|
};
|
||||||
getCameraHistory(data).then((res) => {
|
getCameraHistory(data).then((res) => {
|
||||||
console.log(res.data,'qqqqqqqqqqqqqqqqqqqqqqqqqqq');
|
console.log(res.data,'qqqqqqqqqqqqqqqqqqqqqqqqqqq');
|
||||||
|
if(res.data.code==200){
|
||||||
|
if(res.data.data.length==1){
|
||||||
|
this.videoitemUrl =res.data.data[0].path
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.isShowLookFor = true;
|
this.isShowLookFor = true;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,12 @@
|
||||||
<title>视频播放软件</title>
|
<title>视频播放软件</title>
|
||||||
<link href="video-js.css" rel="stylesheet" />
|
<link href="video-js.css" rel="stylesheet" />
|
||||||
<style>
|
<style>
|
||||||
|
body{
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.video-js .vjs-big-play-button{
|
.video-js .vjs-big-play-button{
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
line-height: 2.3em;
|
line-height: 2.3em;
|
||||||
|
|
@ -36,6 +42,16 @@
|
||||||
margin-top: -1em;
|
margin-top: -1em;
|
||||||
margin-left: -1.5em;
|
margin-left: -1.5em;
|
||||||
}
|
}
|
||||||
|
.videojs-flvjs-player-dimensions {
|
||||||
|
width: 95%!important;
|
||||||
|
height: 200px!important;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
/* #videojs-flvjs-player{
|
||||||
|
width: 100%!important;
|
||||||
|
height: 100%!important;
|
||||||
|
} */
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="video.min.js"></script>
|
<script src="video.min.js"></script>
|
||||||
|
|
@ -44,7 +60,8 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="videoContainer">
|
<div id="videoContainer" width="100%"
|
||||||
|
height="100%" >
|
||||||
<video
|
<video
|
||||||
id="videojs-flvjs-player"
|
id="videojs-flvjs-player"
|
||||||
class="video-js vjs-default-skin vjs-big-play-centered"
|
class="video-js vjs-default-skin vjs-big-play-centered"
|
||||||
|
|
@ -64,7 +81,7 @@
|
||||||
</body>
|
</body>
|
||||||
<script>
|
<script>
|
||||||
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
||||||
var flvUrl = "http://127.0.0.1:10800/flv/live/stream_3.flv";
|
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
|
||||||
var player = null;
|
var player = null;
|
||||||
// iframe向vue传递信息
|
// iframe向vue传递信息
|
||||||
function iframeSendMsg(){
|
function iframeSendMsg(){
|
||||||
|
|
@ -160,4 +177,5 @@ initPlayer();
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,12 @@
|
||||||
<title>视频播放软件</title>
|
<title>视频播放软件</title>
|
||||||
<link href="video-js.css" rel="stylesheet" />
|
<link href="video-js.css" rel="stylesheet" />
|
||||||
<style>
|
<style>
|
||||||
|
body{
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.video-js .vjs-big-play-button{
|
.video-js .vjs-big-play-button{
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
line-height: 2.3em;
|
line-height: 2.3em;
|
||||||
|
|
@ -36,6 +42,16 @@
|
||||||
margin-top: -1em;
|
margin-top: -1em;
|
||||||
margin-left: -1.5em;
|
margin-left: -1.5em;
|
||||||
}
|
}
|
||||||
|
.videojs-flvjs-player-dimensions {
|
||||||
|
width: 100%!important;
|
||||||
|
height: 240px!important;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
/* #videojs-flvjs-player{
|
||||||
|
width: 100%!important;
|
||||||
|
height: 100%!important;
|
||||||
|
} */
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="video.min.js"></script>
|
<script src="video.min.js"></script>
|
||||||
|
|
@ -44,7 +60,8 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="videoContainer">
|
<div id="videoContainer" width="100%"
|
||||||
|
height="100%" >
|
||||||
<video
|
<video
|
||||||
id="videojs-flvjs-player"
|
id="videojs-flvjs-player"
|
||||||
class="video-js vjs-default-skin vjs-big-play-centered"
|
class="video-js vjs-default-skin vjs-big-play-centered"
|
||||||
|
|
@ -59,16 +76,34 @@
|
||||||
|
|
||||||
<source src="" type='video/x-flv' />
|
<source src="" type='video/x-flv' />
|
||||||
</video>
|
</video>
|
||||||
|
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<script>
|
<script>
|
||||||
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
||||||
var flvUrl = "http://127.0.0.1:10800/flv/live/stream_3.flv";
|
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
|
||||||
var player = null;
|
var player = null;
|
||||||
window.addEventListener('message',function(messageEvent){
|
// iframe向vue传递信息
|
||||||
console.log("拿到数据",messageEvent.data)
|
function iframeSendMsg(){
|
||||||
// data= messageEvent.data;
|
window.parent.postMessage({
|
||||||
})
|
cmd:'myIframe',
|
||||||
|
params : {
|
||||||
|
info: 'iframe向Vue传递的消息',
|
||||||
|
}
|
||||||
|
},'*');
|
||||||
|
};
|
||||||
|
// iframe获取Vue传递过来的信息
|
||||||
|
window.addEventListener("message", getVueMsg);
|
||||||
|
function getVueMsg(event){
|
||||||
|
const res = event.data;
|
||||||
|
if(res.cmd == 'myVue'){
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function triggerByVue(msg){
|
||||||
|
console.log(msg)
|
||||||
|
player.play();
|
||||||
|
}
|
||||||
function initPlayer(){
|
function initPlayer(){
|
||||||
var videoContainer = document.getElementById("videoContainer");
|
var videoContainer = document.getElementById("videoContainer");
|
||||||
var pObjs = videoContainer.childNodes;
|
var pObjs = videoContainer.childNodes;
|
||||||
|
|
@ -104,29 +139,29 @@ function initPlayer(){
|
||||||
|
|
||||||
player.on('error',function(){
|
player.on('error',function(){
|
||||||
console.log('first source load fail')
|
console.log('first source load fail')
|
||||||
|
|
||||||
player.src({
|
player.src({
|
||||||
src: flvUrl,
|
src: flvUrl,
|
||||||
type: 'video/x-flv'
|
type: 'video/x-flv'
|
||||||
});
|
});
|
||||||
|
|
||||||
player.ready(function() {
|
player.ready(function() {
|
||||||
console.log('player ready')
|
console.log('player ready')
|
||||||
player.load();
|
player.load();
|
||||||
player.play();
|
player.play();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
player.on('waiting',function(){
|
player.on('waiting',function(){
|
||||||
console.log('stream wainting....');
|
console.log('stream wainting....');
|
||||||
|
window.parent.postMessage({
|
||||||
|
cmd:'myIframe',
|
||||||
|
params : {
|
||||||
|
info: 'iframe向Vue传递的消息',
|
||||||
|
}
|
||||||
|
},'*');
|
||||||
//player.pause();
|
//player.pause();
|
||||||
//player.dispose();
|
//player.dispose();
|
||||||
//player = null;
|
//player = null;
|
||||||
//initPlayer();
|
//initPlayer();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
player.on('ended',function(){
|
player.on('ended',function(){
|
||||||
console.log('stream ended....');
|
console.log('stream ended....');
|
||||||
player.pause();
|
player.pause();
|
||||||
|
|
@ -142,4 +177,5 @@ initPlayer();
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -124,15 +124,21 @@
|
||||||
function fullScreen(){
|
function fullScreen(){
|
||||||
|
|
||||||
if(unity!=null){
|
if(unity!=null){
|
||||||
console.log('fullScreen')
|
console.log('Unity_FullScreen')
|
||||||
unity.SendMessage("GameManager",'FullScreen');
|
unity.SendMessage("GameManager",'Unity_FullScreen');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function exitFullScreen(){
|
function exitFullScreen(){
|
||||||
if(unity!=null){
|
if(unity!=null){
|
||||||
console.log('exitFullScreen')
|
console.log('Unity_ExitFullScreen')
|
||||||
unity.SendMessage("GameManager",'ExitFullScreen');
|
unity.SendMessage("GameManager",'Unity_ExitFullScreen');
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
function receiveMqttData(string){
|
||||||
|
if(unity!=null){
|
||||||
|
console.log('Unity_ReceiveMqttData')
|
||||||
|
unity.SendMessage("GameManager",'Unity_ReceiveMqttData',string);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
document.body.appendChild(script);
|
document.body.appendChild(script);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -60,16 +60,16 @@ module.exports = {
|
||||||
'^/api':'',
|
'^/api':'',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// '/aps': { //代理的名字
|
'/v3': { //代理的名字
|
||||||
// target: 'http://220.163.114.157:5011/',
|
target: 'http://221.226.177.198:14023/v3/',
|
||||||
// // target: 'http://172.16.1.178:5001/',
|
// target: 'http://172.16.1.178:5001/',
|
||||||
// // target: 'http://ht.api.umayle.com:2022',
|
// target: 'http://ht.api.umayle.com:2022',
|
||||||
// ws: true,
|
ws: true,
|
||||||
// changeOrigin: true,
|
changeOrigin: true,
|
||||||
// pathRewrite:{
|
pathRewrite:{
|
||||||
// '^/aps':'',
|
'^/v3':'',
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue