Compare commits
2 Commits
89cac3357b
...
b37ecb0ec6
| Author | SHA1 | Date |
|---|---|---|
 chengdandan
|
b37ecb0ec6 | |
|
chengdandan
|
fde8c6b2f8 |
|
|
@ -32,10 +32,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
|
|||
process.exit(1)
|
||||
}
|
||||
|
||||
(chalk.cyan(' Build complete.\n'))
|
||||
(chalk.yellow(
|
||||
// (chalk.cyan(' Build complete.\n'))
|
||||
// (chalk.yellow(
|
||||
// ' Tip: built files are meant to be served over an HTTP server.\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]
|
||||
(' ' + warning)
|
||||
}
|
||||
|
||||
()
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,20 @@
|
|||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
||||
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 = {
|
||||
dev: {
|
||||
// Paths
|
||||
|
|
@ -26,6 +39,13 @@ module.exports = {
|
|||
'^/api': ''
|
||||
}
|
||||
},
|
||||
'/v3': { //代理的名字
|
||||
target: 'http://221.226.177.198:14023/v3/',
|
||||
changeOrigin: true,
|
||||
pathRewrite:{
|
||||
'^/v3':'',
|
||||
}
|
||||
}
|
||||
// '/api': { //代理的名字
|
||||
// target: 'http://220.163.114.158:5001/',
|
||||
// changeOrigin: true,
|
||||
|
|
@ -36,7 +56,7 @@ module.exports = {
|
|||
},
|
||||
|
||||
// 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
|
||||
autoOpenBrowser: false,
|
||||
errorOverlay: true,
|
||||
|
|
@ -52,7 +72,7 @@ module.exports = {
|
|||
showEslintErrorsInOverlay: false,
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
* Source Mapi
|
||||
*/
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
|
|
@ -73,10 +93,10 @@ module.exports = {
|
|||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/web/',
|
||||
|
||||
// assetsPublicPath: '/web/',
|
||||
assetsPublicPath: '/',
|
||||
/**
|
||||
* Source Maps
|
||||
* Source Mapi
|
||||
*/
|
||||
|
||||
productionSourceMap: false,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -19,6 +19,13 @@ export const getToken = (data) => {
|
|||
'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) => {
|
||||
let access_token = JSON.parse(sessionStorage.getItem("token"))
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -119,14 +119,17 @@ export default {
|
|||
formatter: "{b|{b}}{c|{c}}人",
|
||||
rich: {
|
||||
b: {
|
||||
fontSize: 15,
|
||||
fontSize: 14,
|
||||
lineHeight: 33,
|
||||
},
|
||||
c: {
|
||||
fontSize: 25,
|
||||
fontSize: 20,
|
||||
lineHeight: 22,
|
||||
align: "center",
|
||||
opacity: 0.1
|
||||
opacity: 0.1,
|
||||
// color:'#fff',
|
||||
fontWeight:700,
|
||||
padding: [0, 5, 0, 5]
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
|
|
@ -136,6 +139,8 @@ export default {
|
|||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: 5,
|
||||
length2: 10,
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -110,25 +110,30 @@ export default {
|
|||
itemStyle: { // 此配置
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#52FFC1'
|
||||
borderColor: '#52FFC1',
|
||||
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
b: {
|
||||
fontSize: 15,
|
||||
fontSize: 14,
|
||||
lineHeight: 33,
|
||||
},
|
||||
c: {
|
||||
fontSize: 18,
|
||||
lineHeight: 22,
|
||||
align: "center",
|
||||
opacity: 0.1
|
||||
opacity: 0.1,
|
||||
fontWeight:700,
|
||||
padding: [0, 5, 0, 5]
|
||||
},
|
||||
},
|
||||
position: '',
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: 5,
|
||||
length2: 10,
|
||||
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 {
|
||||
background-color: #2f807d!important;
|
||||
}
|
||||
|
|
@ -849,7 +855,15 @@ $gantt_item_half: 4px;
|
|||
background: #1A5856 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table .success-row {
|
||||
background: transparent;
|
||||
// /deep/ .el-table .success-row {
|
||||
// background: transparent;
|
||||
// }
|
||||
</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,7 +41,9 @@ Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需
|
|||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ Vue.use(Router);
|
|||
|
||||
const router = new Router({
|
||||
mode: process.env.NODE_ENV === "production" ? "history" : "",
|
||||
base: process.env.NODE_ENV === "production" ? "/web" : "",
|
||||
base: process.env.NODE_ENV === "production" ? "/" : "",
|
||||
routes: [
|
||||
|
||||
{
|
||||
|
|
|
|||
|
|
@ -37,9 +37,12 @@
|
|||
}}℃</span
|
||||
>
|
||||
</div>
|
||||
<div class="closeIndex" @click="closeindex">
|
||||
<div class="closeIndex" @click="closeindex" v-if="closeIndexShow">
|
||||
<img src="../assets/pic/closeIndex.png" alt="" />
|
||||
</div>
|
||||
<div class="exitFull" @click="exitFullchange" v-if="exitFullShow">
|
||||
<img src="../assets/pic/exitFull.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,13 +50,14 @@
|
|||
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` }">
|
||||
</div> -->
|
||||
<!-- 首页 -->
|
||||
<ModelScreenComponents v-if="indexShow" />
|
||||
<ModelScreenComponents v-if="indexShow" :environmentData="environmentData" ref="modelScreen"/>
|
||||
<!-- 人员管理 -->
|
||||
<PersonnelComponents v-if="personnelShow" />
|
||||
<PersonnelComponents v-if="personnelShow" ref="personnel"/>
|
||||
<!-- 视频监控 -->
|
||||
<VideoSurveillanceComponents
|
||||
v-if="videoSurveillanceShow"
|
||||
@transfer="getUser"
|
||||
ref="videoSurveillance"
|
||||
/>
|
||||
<!-- 视频监控子页面 -->
|
||||
<VideoViewingComponents
|
||||
|
|
@ -62,9 +66,9 @@
|
|||
:videoId="videoId"
|
||||
/>
|
||||
<!-- 进度管理 -->
|
||||
<ProgressComponents v-if="progressShow" />
|
||||
<ProgressComponents v-if="progressShow" ref="progress"/>
|
||||
<!-- 安全管理 -->
|
||||
<ManagementComponents v-if="managementShow" />
|
||||
<ManagementComponents v-if="managementShow" ref="management"/>
|
||||
<!-- 中间1 -->
|
||||
|
||||
<!-- 中间2 -->
|
||||
|
|
@ -136,6 +140,7 @@ import mqtt from "mqtt"; // mqtt协议
|
|||
import Swiper from "@/components/common/carousel";
|
||||
import Resize from "../utils/Resize.vue";
|
||||
import axios from "axios";
|
||||
import {getWeatherData} from "@/api/api";
|
||||
export default {
|
||||
name: "report",
|
||||
components: {
|
||||
|
|
@ -388,6 +393,9 @@ export default {
|
|||
numberList: [5, 5],
|
||||
boxNone: true,
|
||||
topicSends:[],
|
||||
environmentData:[],
|
||||
closeIndexShow:true,
|
||||
exitFullShow:false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -416,22 +424,27 @@ export default {
|
|||
case "/SC/pub/uwb":
|
||||
try {
|
||||
// console.log("message", message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", time.toLocaleString(), msg); //msg为转换后的JSON数据
|
||||
} catch (error) {}
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById("unityModule").contentWindow.receiveMqttData(JSON.stringify(msg));
|
||||
} catch (error) {
|
||||
}
|
||||
break;
|
||||
case "/SC/pub/env":
|
||||
try {
|
||||
// console.log("环境message", message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("环境msg",time.toLocaleString(), msg); //msg为转换后的JSON数据
|
||||
} catch (error) {}
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("环境msg", msg) //msg为转换后的JSON数据
|
||||
this.environmentData=msg.data
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
@ -457,6 +470,25 @@ export default {
|
|||
});
|
||||
});
|
||||
},
|
||||
exitFullchange(){
|
||||
this.closeBig()
|
||||
if(this.indexShow==true){
|
||||
console.log("首页")
|
||||
this.$refs.modelScreen.disBox()
|
||||
}else if(this.personnelShow==true){
|
||||
console.log("人员管理")
|
||||
this.$refs.personnel.disBox()
|
||||
}else if(this.videoSurveillanceShow==true){
|
||||
// console.log("视频监控")
|
||||
// this.$refs.modelScreen.disBox()
|
||||
}else if(this.managementShow==true){
|
||||
console.log("安全管理")
|
||||
this.$refs.management.disBox()
|
||||
}else if(this.progressShow==true){
|
||||
console.log("进度管理")
|
||||
this.$refs.progress.disBox()
|
||||
}
|
||||
},
|
||||
//获取当前时间
|
||||
getTime() {
|
||||
let myDate = new Date();
|
||||
|
|
@ -489,13 +521,20 @@ export default {
|
|||
},
|
||||
//获取天气数据
|
||||
getWeather() {
|
||||
axios({
|
||||
url: "https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100",
|
||||
methods: "",
|
||||
getWeatherData({
|
||||
key: 'e979d73682c0c69059e4cb6740c9dacd',
|
||||
city:'320100'
|
||||
}).then((res) => {
|
||||
this.weatherItem = res.data.lives[0];
|
||||
this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
|
||||
});
|
||||
})
|
||||
// axios({
|
||||
// url: "https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100",
|
||||
// methods: "",
|
||||
// }).then((res) => {
|
||||
// this.weatherItem = res.data.lives[0];
|
||||
// this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
|
||||
// });
|
||||
},
|
||||
changeWeatherImg(weather) {
|
||||
if (weather == "雾") {
|
||||
|
|
@ -587,10 +626,14 @@ export default {
|
|||
},
|
||||
//放大
|
||||
openBig() {
|
||||
this.exitFullShow = true
|
||||
this.closeIndexShow = false
|
||||
document.getElementById("unityModule").contentWindow.fullScreen();
|
||||
},
|
||||
//关闭放大
|
||||
closeBig() {
|
||||
this.exitFullShow = false
|
||||
this.closeIndexShow = true
|
||||
document.getElementById("unityModule").contentWindow.exitFullScreen();
|
||||
},
|
||||
// 菜单点击
|
||||
|
|
@ -1269,6 +1312,13 @@ export default {
|
|||
top: 5px;
|
||||
right: 22px;
|
||||
}
|
||||
.exitFull{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.header .title {
|
||||
|
|
|
|||
|
|
@ -9,10 +9,21 @@
|
|||
<div>
|
||||
</div>
|
||||
<div class="titRight">
|
||||
<span>2023年2月17日 星期四 14:26</span>
|
||||
<span></span>
|
||||
<span> 天气 </span>
|
||||
<span>晴 12℃</span>
|
||||
<span>{{ dateNew }} {{ getWeek }} {{ time }}</span>
|
||||
<span
|
||||
><img
|
||||
:src="weatherImg"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/></span>
|
||||
<span
|
||||
> 天气 </span
|
||||
>
|
||||
<span
|
||||
>{{ weatherItem.weather }} {{
|
||||
weatherItem.temperature
|
||||
}}℃</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,7 +65,7 @@ import BarChart from "@/components/common/BarChart";
|
|||
import mdScreenPie from "@/components/common/mdScreenPie";
|
||||
import Swiper from "@/components/common/carousel";
|
||||
import Resize from '../utils/Resize.vue'
|
||||
import {getToken} from "@/api/api";
|
||||
import {getToken,getWeatherData} from "@/api/api";
|
||||
export default {
|
||||
name: "report",
|
||||
components: {
|
||||
|
|
@ -68,11 +79,23 @@ export default {
|
|||
tienum: '',
|
||||
showType: true,
|
||||
topicSends:[],
|
||||
weatherImg: require("@/assets/pic/sun.png"),
|
||||
getWeek: "星期四",
|
||||
dateNew: "2023年2月17日",
|
||||
time: "14:26",
|
||||
temperature: "12",
|
||||
weather: "晴",
|
||||
weatherItem: {},
|
||||
param: {
|
||||
username: 'dlgc_pic',
|
||||
password: 'e19d5cd5af0378da05f63f891c7467af',
|
||||
tenantId:'748495'
|
||||
},
|
||||
// param: {
|
||||
// username: '',
|
||||
// password: '',
|
||||
// tenantId:''
|
||||
// },
|
||||
checked: false,
|
||||
rules: {
|
||||
tenantId: [{ required: true, message: '账号Id不能为空', trigger: 'blur' }],
|
||||
|
|
@ -86,49 +109,12 @@ export default {
|
|||
this.vdaH = h - 0 + "px";
|
||||
this.createMqtt()
|
||||
this.getWeather()
|
||||
// this.getTokenData()
|
||||
window.setInterval(() => {
|
||||
this.getTime();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
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() {
|
||||
let datas = {
|
||||
account:this.param.username,
|
||||
|
|
@ -214,13 +200,82 @@ export default {
|
|||
break;
|
||||
}
|
||||
},
|
||||
|
||||
getWeather () {
|
||||
this.$axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100' ).then(function(reponse){
|
||||
console.log("reponse.data",reponse.data)
|
||||
}).catch(() => {})
|
||||
//获取当前时间
|
||||
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 () {
|
||||
getWeatherData({
|
||||
key: 'e979d73682c0c69059e4cb6740c9dacd',
|
||||
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) {
|
||||
this.tienum = val
|
||||
},
|
||||
|
|
@ -329,7 +384,7 @@ getWeather () {
|
|||
right: 80px;
|
||||
width: 17.5px;
|
||||
height: 18px;
|
||||
background: url("~@/assets/pic/sun.png") no-repeat;
|
||||
// background: url("~@/assets/pic/sun.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
<div
|
||||
@click="disBox"
|
||||
class="screenBox"
|
||||
v-if="disBoxShow"
|
||||
:style="{
|
||||
'background-image': !boxNone
|
||||
? `url(${require(`../assets/pic/exitFull.png`)}`
|
||||
|
|
@ -517,6 +518,7 @@ export default {
|
|||
menuType: 4,
|
||||
numberList: [5, 5],
|
||||
boxNone: true,
|
||||
disBoxShow:true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -555,6 +557,15 @@ export default {
|
|||
},
|
||||
disBox() {
|
||||
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";
|
||||
},
|
||||
goBack(val) {
|
||||
|
|
@ -999,7 +1010,7 @@ export default {
|
|||
|
||||
.ftahBox {
|
||||
text-align: center;
|
||||
padding-top: 27px;
|
||||
padding-top: 17px;
|
||||
width: 89px;
|
||||
|
||||
@media only screen and (max-height: 1000px) {
|
||||
|
|
@ -1053,7 +1064,7 @@ export default {
|
|||
}
|
||||
.ftahBox1 {
|
||||
// text-align: center;
|
||||
padding-top: 27px;
|
||||
padding-top: 17px;
|
||||
width: 89px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -449,7 +449,6 @@ export default {
|
|||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
this.createMqtt()
|
||||
this.getWeather()
|
||||
this.getTime()
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -505,14 +504,14 @@ export default {
|
|||
this.time = hour +':'+ minute
|
||||
},
|
||||
//获取天气数据
|
||||
getWeather () {
|
||||
axios({
|
||||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
|
||||
methods: ''
|
||||
}).then(res => {
|
||||
this.weatherItem = res.data.lives[0];
|
||||
});
|
||||
} ,
|
||||
// getWeather () {
|
||||
// axios({
|
||||
// url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
|
||||
// methods: ''
|
||||
// }).then(res => {
|
||||
// this.weatherItem = res.data.lives[0];
|
||||
// });
|
||||
// } ,
|
||||
changeMessage(val) {
|
||||
this.tienum = val
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
<div
|
||||
@click="disBox"
|
||||
ref="screenBox"
|
||||
v-if="disBoxShow"
|
||||
:class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
|
||||
:style="{
|
||||
'background-image': !boxNone
|
||||
|
|
@ -209,12 +210,19 @@
|
|||
</div>
|
||||
<div class="videoBox">
|
||||
<div
|
||||
style="position: relative; margin-left: 30px; margin-right: 20px"
|
||||
style="position: absolute; margin-left: 30px; margin-right: 20px"
|
||||
class="videoFat"
|
||||
v-for="(item,index) in videoList"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.thumbnail" alt="" />
|
||||
<img v-show="iframeShow==false" :src="item.thumbnail" alt="" />
|
||||
<div class="openChange" @click="openChangebtn" v-show="iframeShow==false"> <img src="../assets/pic/play.png" alt=""></div>
|
||||
|
||||
<!-- <Video></Video> -->
|
||||
<iframe ref="iframe" id="iframeid" :src="src" frameborder="O" class="iframe" scrolling="auto" width="100%"
|
||||
height="100%" v-show="iframeShow">
|
||||
</iframe>
|
||||
<!-- <button @click="vueSendMsg">vue向iframe传递信息</button> -->
|
||||
<div class="smallBox">{{item.equipmentName}}</div>
|
||||
</div>
|
||||
<!-- <div style="position: relative" class="videoFat">
|
||||
|
|
@ -349,6 +357,8 @@ import mdScreenPie from "@/components/common/mdScreenPie";
|
|||
import Swiper from "@/components/common/carousel";
|
||||
import Resize from "../utils/Resize.vue";
|
||||
import axios from "axios";
|
||||
import Video from "./video";
|
||||
import { ref, nextTick, onMounted } from 'vue'
|
||||
import {
|
||||
getProjectInfo,
|
||||
getUserMonitorInfo,
|
||||
|
|
@ -360,14 +370,23 @@ import {
|
|||
} from "@/api/api";
|
||||
export default {
|
||||
name: "report",
|
||||
props: {
|
||||
environmentData:{
|
||||
type:Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
mdScreenPie,
|
||||
BarChart,
|
||||
Swiper,
|
||||
Resize,
|
||||
Video
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
iframeShow:false,
|
||||
videoList:[],//视频监控数据
|
||||
jinduList:0, //计算进度条的宽度
|
||||
progress:0, //计算进度条的值
|
||||
|
|
@ -383,6 +402,10 @@ export default {
|
|||
weatherItem: {},
|
||||
tienum: "",
|
||||
showType: true,
|
||||
flvUrl:"http://127.0.0.1:10800/flv/live/stream_3.flv",
|
||||
src:"",
|
||||
iframe:"",
|
||||
player: null,
|
||||
boxList: [
|
||||
{
|
||||
c1: "开工",
|
||||
|
|
@ -426,38 +449,46 @@ export default {
|
|||
src: "@/assets/pic/23.png",
|
||||
},
|
||||
], // 专题数据列表
|
||||
//1633761781274296326 甲烷监测 CVALUE 甲烷1633761781270102018 氧气监测 OVALUE 氧气1633761781282684929 硫化氢监测 SVALUE 硫化氢1633761781286879234 温湿度监测 TVALUE 湿度1633761781274296322 二氧化碳监测 OVALUE 二氧化碳
|
||||
iconPicList: [
|
||||
{
|
||||
// id:'1633761781286879234',
|
||||
id:'',
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
id:'1633761781286879234',
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
id:'1633761781270102018',
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
id:'1633761781274296322',
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
id:'1633761781274296326',
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
id:'1633761781282684929',
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
|
|
@ -534,7 +565,19 @@ export default {
|
|||
onSiteNumber: [], //今日出勤
|
||||
boxNone: true,
|
||||
topicSends: [],
|
||||
disBoxShow:true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
environmentData: {
|
||||
deep: true,
|
||||
handler (val) {
|
||||
this.$nextTick(() => {
|
||||
this.changeEnvironmentData(val)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
|
|
@ -544,6 +587,30 @@ export default {
|
|||
this.getTime();
|
||||
},
|
||||
methods: {
|
||||
//获取环境数据
|
||||
changeEnvironmentData(val){
|
||||
console.log("val",val)
|
||||
var environmentDataNew = []
|
||||
environmentDataNew = val.map(item => {
|
||||
console.log("item",Object.keys(item))
|
||||
console.log("item",Object.values(item)[0][0].value)
|
||||
return {
|
||||
id: Object.keys(item)[0],
|
||||
val: Object.values(item)[0][0].value,
|
||||
dataId : Object.values(item)[0][0].dataId,
|
||||
|
||||
}
|
||||
})
|
||||
console.log("environmentDataNew",environmentDataNew)
|
||||
for(var i = 0; i < environmentDataNew.length; i++){
|
||||
for(var j = 0; j < this.iconPicList.length; j++){
|
||||
if(this.iconPicList[j].id==environmentDataNew[i].id){
|
||||
this.iconPicList[j].val = environmentDataNew[i].val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
createMqtt() {
|
||||
this.topicSends = ["/SC/pub/uwb"];
|
||||
console.log("this.topicSends", this.topicSends);
|
||||
|
|
@ -612,10 +679,13 @@ export default {
|
|||
console.log("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";
|
||||
},
|
||||
|
|
@ -652,9 +722,44 @@ export default {
|
|||
}, 800);
|
||||
}
|
||||
},
|
||||
// sendMessage(){
|
||||
// this.iframe.postMessage({ data:"传给你个值呀"},'*');
|
||||
// },
|
||||
// vue获取iframe传递过来的信息
|
||||
getiframeMsg(event){
|
||||
const res = event.data;
|
||||
console.log(event)
|
||||
if(res.cmd == 'myIframe'){
|
||||
console.log(res)
|
||||
}
|
||||
},
|
||||
// vue向iframe传递信息
|
||||
vueSendMsg(){
|
||||
this.iframeMethods()
|
||||
// const iframeWindow = this.$refs.iframe.contentWindow;
|
||||
const iframeWindow =document.getElementById('iframeid').contentWindow;
|
||||
iframeWindow.postMessage({
|
||||
cmd:'myVue',
|
||||
params : {
|
||||
info: 'Vue向iframe传递的消息',
|
||||
}
|
||||
},'*')
|
||||
|
||||
},
|
||||
// 触发iframe中的方法
|
||||
iframeMethods(){
|
||||
document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
|
||||
},
|
||||
openChangebtn(){
|
||||
this.iframeShow = true
|
||||
this.vueSendMsg()
|
||||
}
|
||||
},
|
||||
// destroyed(){
|
||||
// window.removeEventListener("message",this.sendMessage)
|
||||
// },
|
||||
mounted() {
|
||||
|
||||
//基本情况
|
||||
getProjectInfo().then((res) => {
|
||||
this.introduction = res.data.data[0].introduction;
|
||||
|
|
@ -747,6 +852,14 @@ export default {
|
|||
this.videoList = Object.keys(res.data.data).map((item,index)=>{
|
||||
return {thumbnail:res.data.data[item].thumbnail,equipmentName:res.data.data[item].equipmentName}
|
||||
})
|
||||
// this.$nextTick(function(){
|
||||
// this.src = '../static/flv/demo1.html';
|
||||
// console.log("this.$refs.iframeld",this.$refs.iframeld)
|
||||
// this.iframe = this.$refs.iframeld.contentWindow
|
||||
// window.addEventListener("message",this.sendMessage);
|
||||
// });
|
||||
this.src = '../static/flv/demo1.html';
|
||||
window.addEventListener('message',this.getiframeMsg)
|
||||
})
|
||||
});
|
||||
|
||||
|
|
@ -758,6 +871,7 @@ export default {
|
|||
})();
|
||||
};
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1148,19 +1262,31 @@ export default {
|
|||
// display: flex;
|
||||
// width: 100%;
|
||||
overflow-y: auto; //重点
|
||||
height: calc(100% - 60px);
|
||||
// height: calc(100% - 60px);
|
||||
height: 85%;
|
||||
top: 40px;
|
||||
width: 100%;
|
||||
.videoFat {
|
||||
background: gray;
|
||||
flex: 1;
|
||||
width: 165px;
|
||||
height: 183px;
|
||||
// width: 165px;
|
||||
// height: 183px;
|
||||
height: 92%;
|
||||
width: 87%;
|
||||
float: left;
|
||||
margin-top: 5%;
|
||||
margin-top: 2%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.openChange{
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1743,9 +1869,16 @@ export default {
|
|||
/deep/ .el-scrollbar__wrap {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.el-carousel__indicators--outside {
|
||||
display: none;
|
||||
}
|
||||
.el-progress-bar__outer{
|
||||
/* background-color: transparent!important; */
|
||||
background-color:rgb(55,142,136)!important;
|
||||
opacity: 0.5!important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<div
|
||||
@click="disBox"
|
||||
class="screenBox"
|
||||
v-if="disBoxShow"
|
||||
:style="{
|
||||
'background-image': !boxNone
|
||||
? `url(${require(`../assets/pic/exitFull.png`)}`
|
||||
|
|
@ -257,44 +258,7 @@ export default {
|
|||
meeting:{}, //站班会记录
|
||||
boxNone: true,
|
||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死",
|
||||
|
|
@ -381,13 +345,13 @@ export default {
|
|||
topicSends: [],
|
||||
pieData: [], //人员统计,
|
||||
constructionPersonnel: [], //施工人员组成
|
||||
disBoxShow:true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
console.log("this.topicSends", this.topicSends);
|
||||
console.log("this.iconPicList", this.iconPicList);
|
||||
},
|
||||
mounted() {
|
||||
this.getUser();
|
||||
|
|
@ -466,8 +430,10 @@ export default {
|
|||
if(this.boxNone == true){
|
||||
|
||||
window.parent.closeBig();
|
||||
this.disBoxShow=true
|
||||
}else if(this.boxNone == false){
|
||||
window.parent.openBig();
|
||||
this.disBoxShow=false
|
||||
}
|
||||
this.$refs.screenBox.style.animationPlayState = "running";
|
||||
},
|
||||
|
|
@ -518,7 +484,7 @@ export default {
|
|||
|
||||
<style scoped lang="less">
|
||||
.zzc {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -329,44 +329,6 @@ export default {
|
|||
return {
|
||||
dialogShow: false,
|
||||
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
table2Data: [
|
||||
{
|
||||
entName: "开工",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- <Resize> -->
|
||||
<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'}">
|
||||
</div> <!-- 左侧模块1 -->
|
||||
<!-- 左侧模块1 -->
|
||||
|
|
@ -319,44 +319,6 @@ export default {
|
|||
projectInvestment:[],//投资进度
|
||||
dialogShow: false,
|
||||
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
table2Data: [],
|
||||
tableData: [],
|
||||
qyList: [
|
||||
|
|
@ -421,7 +383,8 @@ export default {
|
|||
type: false,
|
||||
menuType: 3,
|
||||
numberList: [5, 5],
|
||||
boxNone:true
|
||||
boxNone:true,
|
||||
disBoxShow:true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -434,8 +397,10 @@ export default {
|
|||
this.boxNone = !this.boxNone
|
||||
if(this.boxNone == true){
|
||||
window.parent.closeBig();
|
||||
this.disBoxShow=true
|
||||
}else if(this.boxNone == false){
|
||||
window.parent.openBig();
|
||||
this.disBoxShow=false
|
||||
}
|
||||
this.$refs.screenBox.style.animationPlayState='running'
|
||||
|
||||
|
|
@ -538,7 +503,7 @@ export default {
|
|||
|
||||
<style scoped lang="less">
|
||||
.zzc{
|
||||
background: rgba(0, 0 ,0, 0.6);
|
||||
background: rgba(0, 0 ,0, 0.4);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="test_two_box">
|
||||
<video
|
||||
id="myVideo"
|
||||
class="video-js"
|
||||
>
|
||||
<source
|
||||
:src="videoitemUrl"
|
||||
type="video/mp4"
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
videoitemUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
videoUrllist: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null,
|
||||
url:require('../assets/map4/5.mp4'),
|
||||
videoitemUrl:''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
videoitemUrl: {
|
||||
|
||||
handler (val) {
|
||||
console.log("val",val)
|
||||
// this.$nextTick(() => {
|
||||
this.videoitemUrl = val
|
||||
// })
|
||||
},
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initVideo();
|
||||
console.log("videoitemUrl",this.videoitemUrl)
|
||||
this.src = this.videoitemUrl
|
||||
},
|
||||
methods: {
|
||||
initVideo() {
|
||||
//初始化视频方法
|
||||
let myPlayer = this.$video(myVideo, {
|
||||
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
|
||||
controls: true,
|
||||
//自动播放属性,muted:静音播放
|
||||
autoplay: "false",
|
||||
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
|
||||
preload: "auto",
|
||||
//设置视频播放器的显示宽度（以像素为单位）
|
||||
width: "100%",
|
||||
//设置视频播放器的显示高度（以像素为单位）
|
||||
height: "100%"
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style >
|
||||
.test_two_box{
|
||||
width:100%;
|
||||
height:100%
|
||||
}
|
||||
.myVideo-dimensions {
|
||||
width: 100%!important;
|
||||
height: 100%!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -198,44 +198,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死"
|
||||
|
|
|
|||
|
|
@ -26,9 +26,16 @@
|
|||
class="scFathChild"
|
||||
v-for="(item, i) in videoAllList"
|
||||
:key="i"
|
||||
@click="tzSp(item.equipmentName, item.id)"
|
||||
@click="openChangebtn(item)"
|
||||
>
|
||||
<img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" />
|
||||
<!-- <img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" /> -->
|
||||
<img v-show="item.status==false" :src="item.thumbnail" alt="" style="width: 100%; height: 100%"/>
|
||||
<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%">
|
||||
</div>
|
||||
<iframe ref="iframe" id="iframeid" :src="src" frameborder="0" class="iframe" scrolling="auto" width="100%"
|
||||
height="100%" v-show="item.status">
|
||||
</iframe>
|
||||
<div class="childrenBox">
|
||||
{{ item.equipmentName }}
|
||||
</div>
|
||||
|
|
@ -236,44 +243,6 @@ export default {
|
|||
videoAllList: [], //获取所有监控
|
||||
videoList: [],
|
||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死",
|
||||
|
|
@ -336,6 +305,8 @@ export default {
|
|||
numberList: [5, 5],
|
||||
rightThreeHeightBox: 0,
|
||||
leftOneBox: 0,
|
||||
src:"",
|
||||
iframeShow:false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -397,6 +368,36 @@ export default {
|
|||
}, 800);
|
||||
}
|
||||
},
|
||||
// vue获取iframe传递过来的信息
|
||||
getiframeMsg(event){
|
||||
const res = event.data;
|
||||
console.log(event)
|
||||
if(res.cmd == 'myIframe'){
|
||||
console.log(res)
|
||||
}
|
||||
},
|
||||
// vue向iframe传递信息
|
||||
vueSendMsg(){
|
||||
this.iframeMethods()
|
||||
// const iframeWindow = this.$refs.iframe.contentWindow;
|
||||
const iframeWindow =document.getElementById('iframeid').contentWindow;
|
||||
iframeWindow.postMessage({
|
||||
cmd:'myVue',
|
||||
params : {
|
||||
info: 'Vue向iframe传递的消息',
|
||||
}
|
||||
},'*')
|
||||
|
||||
},
|
||||
// 触发iframe中的方法
|
||||
iframeMethods(){
|
||||
document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
|
||||
},
|
||||
openChangebtn(item){
|
||||
item.status = true
|
||||
// this.iframeShow = true
|
||||
this.vueSendMsg()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.switchDiv();
|
||||
|
|
@ -409,6 +410,7 @@ export default {
|
|||
thumbnail: res.data.data[item].thumbnail,
|
||||
equipmentName: res.data.data[item].equipmentName,
|
||||
id: res.data.data[item].id,
|
||||
status:false
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -422,6 +424,8 @@ export default {
|
|||
id: res.data.data[item].id,
|
||||
};
|
||||
});
|
||||
this.src = '../static/flv/video1.html';
|
||||
window.addEventListener('message',this.getiframeMsg)
|
||||
});
|
||||
//获取摄像头数量接口
|
||||
getCameraCount().then((res) => {
|
||||
|
|
@ -510,6 +514,13 @@ export default {
|
|||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.openChange{
|
||||
position: absolute;
|
||||
width: 9%;
|
||||
height: 10%;
|
||||
bottom: 5%;
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -158,44 +158,6 @@ export default {
|
|||
end: ''
|
||||
},
|
||||
colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死"
|
||||
|
|
|
|||
|
|
@ -21,10 +21,12 @@
|
|||
<div class="scFathBox" :style="{ height: leftOneBox }">
|
||||
<div class="scFathChild">
|
||||
<img
|
||||
v-if="closeVideoShow"
|
||||
src="../assets/pic/bh.png"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<Video :videoitemUrl="videoitemUrl" :videoUrllist="videoUrllist" v-if="openVideoShow"></Video>
|
||||
<div class="childrenBox">
|
||||
{{ videoName }}
|
||||
</div>
|
||||
|
|
@ -107,6 +109,7 @@
|
|||
popper-class="elDatePicker"
|
||||
style="width: 100%"
|
||||
v-model="timeForm.start"
|
||||
value-format= 'yyyy-MM-dd HH:mm:ss'
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
>
|
||||
|
|
@ -118,7 +121,9 @@
|
|||
style="width: 100%"
|
||||
v-model="timeForm.end"
|
||||
type="datetime"
|
||||
value-format= 'yyyy-MM-dd HH:mm:ss'
|
||||
placeholder="选择日期时间"
|
||||
:picker-options="pickerOptions"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
|
@ -160,6 +165,7 @@ import pieDateChart from "@/components/common/pieDateChart";
|
|||
import Resize from "../utils/Resize.vue";
|
||||
import { getCameraCount, getCameraHistory } from "@/api/api";
|
||||
import flvjs from 'flv.js'
|
||||
import Video from "./video";
|
||||
export default {
|
||||
name: "report",
|
||||
props: {
|
||||
|
|
@ -177,6 +183,7 @@ export default {
|
|||
RadarChart,
|
||||
pieDateChart,
|
||||
Resize,
|
||||
Video
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -190,45 +197,17 @@ export default {
|
|||
start: "",
|
||||
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"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死",
|
||||
|
|
@ -293,6 +272,12 @@ export default {
|
|||
leftOneBox: 0,
|
||||
isShowLookFor: 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() {
|
||||
|
|
@ -302,22 +287,43 @@ export default {
|
|||
methods: {
|
||||
//点击播放按
|
||||
bfClick() {
|
||||
console.log("this.isShowLookFor",this.isShowLookFor)
|
||||
|
||||
if (this.isShowLookFor) {
|
||||
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() {
|
||||
if (this.timeForm.start == "" && this.timeForm.end == "") {
|
||||
this.isShowLookFor = false;
|
||||
} else {
|
||||
console.log("this.timeForm.start",this.timeForm.start)
|
||||
console.log("this.timeForm.end",this.timeForm.end)
|
||||
let data = {
|
||||
equipmentId: this.videoId,
|
||||
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"),
|
||||
// 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"),
|
||||
startTime: this.timeForm.start,
|
||||
endTime: this.timeForm.end,
|
||||
};
|
||||
getCameraHistory(data).then((res) => {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@
|
|||
<title>视频播放软件</title>
|
||||
<link href="video-js.css" rel="stylesheet" />
|
||||
<style>
|
||||
body{
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.video-js .vjs-big-play-button{
|
||||
font-size: 2.5em;
|
||||
line-height: 2.3em;
|
||||
|
|
@ -36,6 +42,16 @@
|
|||
margin-top: -1em;
|
||||
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>
|
||||
|
||||
<script src="video.min.js"></script>
|
||||
|
|
@ -44,28 +60,50 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="videoContainer">
|
||||
<div id="videoContainer" width="100%"
|
||||
height="100%" >
|
||||
<video
|
||||
id="videojs-flvjs-player"
|
||||
class="video-js vjs-default-skin vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="1024"
|
||||
height="768"
|
||||
width="100%"
|
||||
height="100%"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="" type='video/x-flv' />
|
||||
</video>
|
||||
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
//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;
|
||||
|
||||
// iframe向vue传递信息
|
||||
function iframeSendMsg(){
|
||||
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(){
|
||||
var videoContainer = document.getElementById("videoContainer");
|
||||
var pObjs = videoContainer.childNodes;
|
||||
|
|
@ -73,7 +111,7 @@ function initPlayer(){
|
|||
videoContainer.removeChild(pObjs[i]);
|
||||
}
|
||||
|
||||
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='1024' height='768' data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
|
||||
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
|
||||
|
||||
player = videojs('videojs-flvjs-player', {
|
||||
techOrder: ['html5', 'flvjs'],
|
||||
|
|
@ -101,29 +139,29 @@ function initPlayer(){
|
|||
|
||||
player.on('error',function(){
|
||||
console.log('first source load fail')
|
||||
|
||||
player.src({
|
||||
src: flvUrl,
|
||||
type: 'video/x-flv'
|
||||
});
|
||||
|
||||
player.ready(function() {
|
||||
console.log('player ready')
|
||||
player.load();
|
||||
player.play();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
player.on('waiting',function(){
|
||||
console.log('stream wainting....');
|
||||
window.parent.postMessage({
|
||||
cmd:'myIframe',
|
||||
params : {
|
||||
info: 'iframe向Vue传递的消息',
|
||||
}
|
||||
},'*');
|
||||
//player.pause();
|
||||
//player.dispose();
|
||||
//player = null;
|
||||
//initPlayer();
|
||||
});
|
||||
|
||||
|
||||
player.on('ended',function(){
|
||||
console.log('stream ended....');
|
||||
player.pause();
|
||||
|
|
@ -139,4 +177,5 @@ initPlayer();
|
|||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -118,6 +118,12 @@ videoFlvPlayer.on('timeupdate',function () {
|
|||
}
|
||||
|
||||
});
|
||||
|
||||
// window.addEventListener('message', (e) => {
|
||||
// console.log("拿到数据", e.data);
|
||||
// });
|
||||
window.addEventListener('message',function(messageEvent){
|
||||
console.log("拿到数据",messageEvent.data)
|
||||
// data= messageEvent.data;
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<!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>视频播放软件</title>
|
||||
<link href="video-js.css" rel="stylesheet" />
|
||||
<style>
|
||||
body{
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.video-js .vjs-big-play-button{
|
||||
font-size: 2.5em;
|
||||
line-height: 2.3em;
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
-webkit-border-radius: 2.5em;
|
||||
-moz-border-radius: 2.5em;
|
||||
border-radius: 2.5em;
|
||||
background-color: #73859f;
|
||||
background-color: rgba(115,133,159,.5);
|
||||
border-width: 0.15em;
|
||||
margin-top: -1.25em;
|
||||
margin-left: -1.75em;
|
||||
}
|
||||
/* 中间的播放箭头 */
|
||||
.vjs-big-play-button .vjs-icon-placeholder {
|
||||
font-size: 1.63em;
|
||||
}
|
||||
|
||||
/* 加载圆圈 */
|
||||
.vjs-loading-spinner {
|
||||
font-size: 2.5em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 1em;
|
||||
margin-top: -1em;
|
||||
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>
|
||||
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="videoContainer" width="100%"
|
||||
height="100%" >
|
||||
<video
|
||||
id="videojs-flvjs-player"
|
||||
class="video-js vjs-default-skin vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="100%"
|
||||
height="100%"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="" type='video/x-flv' />
|
||||
</video>
|
||||
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
||||
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
|
||||
var player = null;
|
||||
// iframe向vue传递信息
|
||||
function iframeSendMsg(){
|
||||
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(){
|
||||
var videoContainer = document.getElementById("videoContainer");
|
||||
var pObjs = videoContainer.childNodes;
|
||||
for (var i = pObjs.length - 1; i >= 0; i--) {
|
||||
videoContainer.removeChild(pObjs[i]);
|
||||
}
|
||||
|
||||
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
|
||||
|
||||
player = videojs('videojs-flvjs-player', {
|
||||
techOrder: ['html5', 'flvjs'],
|
||||
flvjs: {
|
||||
mediaDataSource: {
|
||||
isLive: true,
|
||||
cors: true,
|
||||
withCredentials: false,
|
||||
enableStashBuffer: false,
|
||||
autoCleanupSourceBuffer:true,
|
||||
autoCleanupMaxBackwardDuration:12,
|
||||
autoCleanupMinBackwardDuration:60,
|
||||
stashInitialSize:128
|
||||
},
|
||||
|
||||
},
|
||||
sources: [{
|
||||
src: flvUrl,
|
||||
type: 'video/x-flv'
|
||||
}],
|
||||
controls: true,
|
||||
preload: "none"
|
||||
},
|
||||
function onPlayerReady() {
|
||||
|
||||
player.on('error',function(){
|
||||
console.log('first source load fail')
|
||||
player.src({
|
||||
src: flvUrl,
|
||||
type: 'video/x-flv'
|
||||
});
|
||||
player.ready(function() {
|
||||
console.log('player ready')
|
||||
player.load();
|
||||
player.play();
|
||||
});
|
||||
});
|
||||
player.on('waiting',function(){
|
||||
console.log('stream wainting....');
|
||||
window.parent.postMessage({
|
||||
cmd:'myIframe',
|
||||
params : {
|
||||
info: 'iframe向Vue传递的消息',
|
||||
}
|
||||
},'*');
|
||||
//player.pause();
|
||||
//player.dispose();
|
||||
//player = null;
|
||||
//initPlayer();
|
||||
});
|
||||
player.on('ended',function(){
|
||||
console.log('stream ended....');
|
||||
player.pause();
|
||||
player.dispose();
|
||||
player = null;
|
||||
initPlayer();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
initPlayer();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -124,14 +124,20 @@
|
|||
function fullScreen(){
|
||||
|
||||
if(unity!=null){
|
||||
console.log('fullScreen')
|
||||
unity.SendMessage("GameManager",'FullScreen');
|
||||
console.log('Unity_FullScreen')
|
||||
unity.SendMessage("GameManager",'Unity_FullScreen');
|
||||
}
|
||||
}
|
||||
function exitFullScreen(){
|
||||
if(unity!=null){
|
||||
console.log('exitFullScreen')
|
||||
unity.SendMessage("GameManager",'ExitFullScreen');
|
||||
console.log('Unity_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);
|
||||
|
|
|
|||
|
|
@ -60,16 +60,16 @@ module.exports = {
|
|||
'^/api':'',
|
||||
}
|
||||
},
|
||||
// '/aps': { //代理的名字
|
||||
// target: 'http://220.163.114.157:5011/',
|
||||
// // target: 'http://172.16.1.178:5001/',
|
||||
// // target: 'http://ht.api.umayle.com:2022',
|
||||
// ws: true,
|
||||
// changeOrigin: true,
|
||||
// pathRewrite:{
|
||||
// '^/aps':'',
|
||||
// }
|
||||
// }
|
||||
'/v3': { //代理的名字
|
||||
target: 'http://221.226.177.198:14023/v3/',
|
||||
// target: 'http://172.16.1.178:5001/',
|
||||
// target: 'http://ht.api.umayle.com:2022',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
pathRewrite:{
|
||||
'^/v3':'',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue