代码提交
This commit is contained in:
parent
289844c46f
commit
a91b9ad5ae
15
package.json
15
package.json
|
|
@ -7,23 +7,34 @@
|
|||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ffmpeg-installer/ffmpeg": "^1.1.0",
|
||||
"axios": "^1.1.3",
|
||||
"core-js": "^2.6.5",
|
||||
"echarts": "^5.4.0",
|
||||
"element-ui": "^2.15.10",
|
||||
"express": "^4.18.2",
|
||||
"express-ws": "^5.0.2",
|
||||
"fluent-ffmpeg": "^2.1.2",
|
||||
"jsmpeg": "^1.0.0",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"moment": "^2.29.4",
|
||||
"rtsp2web": "^2.2.0",
|
||||
"v-fit-columns": "^0.2.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-jsmpeg-player": "^1.1.0-beta",
|
||||
"vue-router": "^3.0.3",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vuex": "^3.0.1"
|
||||
"vuex": "^3.0.1",
|
||||
"websocket-stream": "^5.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.4",
|
||||
"@vue/cli-service": "^3.0.4",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
"express": "^4.18.2",
|
||||
"express-ws": "^5.0.2",
|
||||
"vue-template-compiler": "^2.6.10",
|
||||
"websocket-stream": "^5.5.2"
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
<!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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>yanduscreen</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but yanduscreen doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
<!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">
|
||||
<script type="text/javascript" src="../stactic/webrtcstreamer.js"></script>
|
||||
<script type="text/javascript" src="../stactic/adapter.min.js"></script>
|
||||
<script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>yanduscreen</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but yanduscreen doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,305 @@
|
|||
var WebRtcStreamer = (function() {
|
||||
|
||||
/**
|
||||
* Interface with WebRTC-streamer API
|
||||
* @constructor
|
||||
* @param {string} videoElement - id of the video element tag
|
||||
* @param {string} srvurl - url of webrtc-streamer (default is current location)
|
||||
*/
|
||||
var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {
|
||||
if (typeof videoElement === "string") {
|
||||
this.videoElement = document.getElementById(videoElement);
|
||||
} else {
|
||||
this.videoElement = videoElement;
|
||||
}
|
||||
this.srvurl = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;
|
||||
this.pc = null;
|
||||
|
||||
this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };
|
||||
|
||||
this.iceServers = null;
|
||||
this.earlyCandidates = [];
|
||||
}
|
||||
|
||||
WebRtcStreamer.prototype._handleHttpErrors = function (response) {
|
||||
if (!response.ok) {
|
||||
throw Error(response.statusText);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect a WebRTC Stream to videoElement
|
||||
* @param {string} videourl - id of WebRTC video stream
|
||||
* @param {string} audiourl - id of WebRTC audio stream
|
||||
* @param {string} options - options of WebRTC call
|
||||
* @param {string} stream - local stream to send
|
||||
*/
|
||||
WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream) {
|
||||
this.disconnect();
|
||||
|
||||
// getIceServers is not already received
|
||||
if (!this.iceServers) {
|
||||
console.log("Get IceServers");
|
||||
|
||||
fetch(this.srvurl + "/api/getIceServers")
|
||||
.then(this._handleHttpErrors)
|
||||
.then( (response) => (response.json()) )
|
||||
.then( (response) => this.onReceiveGetIceServers(response, videourl, audiourl, options, localstream))
|
||||
.catch( (error) => this.onError("getIceServers " + error ))
|
||||
|
||||
} else {
|
||||
this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disconnect a WebRTC Stream and clear videoElement source
|
||||
*/
|
||||
WebRtcStreamer.prototype.disconnect = function() {
|
||||
if (this.videoElement?.srcObject) {
|
||||
this.videoElement.srcObject.getTracks().forEach(track => {
|
||||
track.stop()
|
||||
this.videoElement.srcObject.removeTrack(track);
|
||||
});
|
||||
}
|
||||
if (this.pc) {
|
||||
fetch(this.srvurl + "/api/hangup?peerid=" + this.pc.peerid)
|
||||
.then(this._handleHttpErrors)
|
||||
.catch( (error) => this.onError("hangup " + error ))
|
||||
|
||||
|
||||
try {
|
||||
this.pc.close();
|
||||
}
|
||||
catch (e) {
|
||||
console.log ("Failure close peer connection:" + e);
|
||||
}
|
||||
this.pc = null;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* GetIceServers callback
|
||||
*/
|
||||
WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream) {
|
||||
this.iceServers = iceServers;
|
||||
this.pcConfig = iceServers || {"iceServers": [] };
|
||||
try {
|
||||
this.createPeerConnection();
|
||||
|
||||
var callurl = this.srvurl + "/api/call?peerid=" + this.pc.peerid + "&url=" + encodeURIComponent(videourl);
|
||||
if (audiourl) {
|
||||
callurl += "&audiourl="+encodeURIComponent(audiourl);
|
||||
}
|
||||
if (options) {
|
||||
callurl += "&options="+encodeURIComponent(options);
|
||||
}
|
||||
|
||||
if (stream) {
|
||||
this.pc.addStream(stream);
|
||||
}
|
||||
|
||||
// clear early candidates
|
||||
this.earlyCandidates.length = 0;
|
||||
|
||||
// create Offer
|
||||
this.pc.createOffer(this.mediaConstraints).then((sessionDescription) => {
|
||||
console.log("Create offer:" + JSON.stringify(sessionDescription));
|
||||
|
||||
this.pc.setLocalDescription(sessionDescription)
|
||||
.then(() => {
|
||||
fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) })
|
||||
.then(this._handleHttpErrors)
|
||||
.then( (response) => (response.json()) )
|
||||
.catch( (error) => this.onError("call " + error ))
|
||||
.then( (response) => this.onReceiveCall(response) )
|
||||
.catch( (error) => this.onError("call " + error ))
|
||||
|
||||
}, (error) => {
|
||||
console.log ("setLocalDescription error:" + JSON.stringify(error));
|
||||
});
|
||||
|
||||
}, (error) => {
|
||||
alert("Create offer error:" + JSON.stringify(error));
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
this.disconnect();
|
||||
alert("connect error: " + e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
WebRtcStreamer.prototype.getIceCandidate = function() {
|
||||
fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
|
||||
.then(this._handleHttpErrors)
|
||||
.then( (response) => (response.json()) )
|
||||
.then( (response) => this.onReceiveCandidate(response))
|
||||
.catch( (error) => this.onError("getIceCandidate " + error ))
|
||||
}
|
||||
|
||||
/*
|
||||
* create RTCPeerConnection
|
||||
*/
|
||||
WebRtcStreamer.prototype.createPeerConnection = function() {
|
||||
console.log("createPeerConnection config: " + JSON.stringify(this.pcConfig));
|
||||
this.pc = new RTCPeerConnection(this.pcConfig);
|
||||
var pc = this.pc;
|
||||
pc.peerid = Math.random();
|
||||
|
||||
pc.onicecandidate = (evt) => this.onIceCandidate(evt);
|
||||
pc.onaddstream = (evt) => this.onAddStream(evt);
|
||||
pc.oniceconnectionstatechange = (evt) => {
|
||||
console.log("oniceconnectionstatechange state: " + pc.iceConnectionState);
|
||||
if (this.videoElement) {
|
||||
if (pc.iceConnectionState === "connected") {
|
||||
this.videoElement.style.opacity = "1.0";
|
||||
}
|
||||
else if (pc.iceConnectionState === "disconnected") {
|
||||
this.videoElement.style.opacity = "0.25";
|
||||
}
|
||||
else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") ) {
|
||||
this.videoElement.style.opacity = "0.5";
|
||||
} else if (pc.iceConnectionState === "new") {
|
||||
this.getIceCandidate();
|
||||
}
|
||||
}
|
||||
}
|
||||
pc.ondatachannel = function(evt) {
|
||||
console.log("remote datachannel created:"+JSON.stringify(evt));
|
||||
|
||||
evt.channel.onopen = function () {
|
||||
console.log("remote datachannel open");
|
||||
this.send("remote channel openned");
|
||||
}
|
||||
evt.channel.onmessage = function (event) {
|
||||
console.log("remote datachannel recv:"+JSON.stringify(event.data));
|
||||
}
|
||||
}
|
||||
pc.onicegatheringstatechange = function() {
|
||||
if (pc.iceGatheringState === "complete") {
|
||||
const recvs = pc.getReceivers();
|
||||
|
||||
recvs.forEach((recv) => {
|
||||
if (recv.track && recv.track.kind === "video") {
|
||||
console.log("codecs:" + JSON.stringify(recv.getParameters().codecs))
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
var dataChannel = pc.createDataChannel("ClientDataChannel");
|
||||
dataChannel.onopen = function() {
|
||||
console.log("local datachannel open");
|
||||
this.send("local channel openned");
|
||||
}
|
||||
dataChannel.onmessage = function(evt) {
|
||||
console.log("local datachannel recv:"+JSON.stringify(evt.data));
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("Cannor create datachannel error: " + e);
|
||||
}
|
||||
|
||||
console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) );
|
||||
return pc;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* RTCPeerConnection IceCandidate callback
|
||||
*/
|
||||
WebRtcStreamer.prototype.onIceCandidate = function (event) {
|
||||
if (event.candidate) {
|
||||
if (this.pc.currentRemoteDescription) {
|
||||
this.addIceCandidate(this.pc.peerid, event.candidate);
|
||||
} else {
|
||||
this.earlyCandidates.push(event.candidate);
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log("End of candidates.");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {
|
||||
fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) })
|
||||
.then(this._handleHttpErrors)
|
||||
.then( (response) => (response.json()) )
|
||||
.then( (response) => {console.log("addIceCandidate ok:" + response)})
|
||||
.catch( (error) => this.onError("addIceCandidate " + error ))
|
||||
}
|
||||
|
||||
/*
|
||||
* RTCPeerConnection AddTrack callback
|
||||
*/
|
||||
WebRtcStreamer.prototype.onAddStream = function(event) {
|
||||
console.log("Remote track added:" + JSON.stringify(event));
|
||||
|
||||
this.videoElement.srcObject = event.stream;
|
||||
var promise = this.videoElement.play();
|
||||
if (promise !== undefined) {
|
||||
promise.catch((error) => {
|
||||
console.warn("error:"+error);
|
||||
this.videoElement.setAttribute("controls", true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* AJAX /call callback
|
||||
*/
|
||||
WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {
|
||||
|
||||
console.log("offer: " + JSON.stringify(dataJson));
|
||||
var descr = new RTCSessionDescription(dataJson);
|
||||
this.pc.setRemoteDescription(descr).then(() => {
|
||||
console.log ("setRemoteDescription ok");
|
||||
while (this.earlyCandidates.length) {
|
||||
var candidate = this.earlyCandidates.shift();
|
||||
this.addIceCandidate(this.pc.peerid, candidate);
|
||||
}
|
||||
|
||||
this.getIceCandidate()
|
||||
}
|
||||
, (error) => {
|
||||
console.log ("setRemoteDescription error:" + JSON.stringify(error));
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* AJAX /getIceCandidate callback
|
||||
*/
|
||||
WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {
|
||||
console.log("candidate: " + JSON.stringify(dataJson));
|
||||
if (dataJson) {
|
||||
for (var i=0; i<dataJson.length; i++) {
|
||||
var candidate = new RTCIceCandidate(dataJson[i]);
|
||||
|
||||
console.log("Adding ICE candidate :" + JSON.stringify(candidate) );
|
||||
this.pc.addIceCandidate(candidate).then( () => { console.log ("addIceCandidate OK"); }
|
||||
, (error) => { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );
|
||||
}
|
||||
this.pc.addIceCandidate();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* AJAX callback for Error
|
||||
*/
|
||||
WebRtcStreamer.prototype.onError = function(status) {
|
||||
console.log("onError:" + status);
|
||||
}
|
||||
|
||||
return WebRtcStreamer;
|
||||
})();
|
||||
|
||||
if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
|
||||
window.WebRtcStreamer = WebRtcStreamer;
|
||||
}
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = WebRtcStreamer;
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
body { padding: 0; margin: 0 }
|
||||
#unity-container { position: absolute }
|
||||
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
|
||||
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%);height: 100%; width: 100%; overflow: hidden;}
|
||||
#unity-container.unity-mobile { width: 100%; height: 100% }
|
||||
#unity-canvas { background: #231F20 }
|
||||
#unity-canvas { background: #231F20;width: 100% !important; height: 100% !important;cursor: default; }
|
||||
.unity-mobile #unity-canvas { width: 100%; height: 100% }
|
||||
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
|
||||
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
const RTSP2web = require('rtsp2web')
|
||||
//服务端的端口号，端口号可以自定义
|
||||
const port = 9999
|
||||
new RTSP2web({
|
||||
port
|
||||
})
|
||||
|
|
@ -0,0 +1 @@
|
|||
node index.js
|
||||
13
src/App.vue
13
src/App.vue
|
|
@ -32,7 +32,7 @@
|
|||
<script>
|
||||
import MinxinItem from "./mixins"
|
||||
import axios from 'axios'
|
||||
import {getWather,Weather} from "./api/index.js";
|
||||
import {getWather,Weather,getToken} from "./api/index.js";
|
||||
export default {
|
||||
name: 'home',
|
||||
mixins:[MinxinItem],
|
||||
|
|
@ -55,6 +55,17 @@ export default {
|
|||
this.handleWather()
|
||||
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
|
||||
this.week = this.weekList[week]
|
||||
// let params = new URLSearchParams()
|
||||
let params = {
|
||||
appKey:'symnzwxdfu1ul8raqrykgbld7zonktga',
|
||||
appSecret:'a3tdb6nxfciekxcgcl94ljvtmw2lsafx'
|
||||
}
|
||||
// params.append('appKey','symnzwxdfu1ul8raqrykgbld7zonktga')
|
||||
// params.append('appSecret','a3tdb6nxfciekxcgcl94ljvtmw2lsafx')
|
||||
getToken(params).then((res)=>{
|
||||
localStorage.setItem('token',res.data.data.token)
|
||||
// console.log(localStorage.getItem('token'),'token');
|
||||
})
|
||||
},
|
||||
|
||||
methods:{
|
||||
|
|
|
|||
|
|
@ -1,57 +1,57 @@
|
|||
import axios from 'axios'
|
||||
// if (process.env.NODE_ENV === 'development') {
|
||||
// axios.defaults.baseURL = '/api'
|
||||
// axios.defaults.baseURL = '/app'
|
||||
// } else if (process.env.NODE_ENV === 'production') {
|
||||
// axios.defaults.baseURL = '/api'
|
||||
// axios.defaults.baseURL = '/app'
|
||||
// }
|
||||
//设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
|
||||
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
|
||||
|
||||
// 电力概况
|
||||
export const getCompanyInfo = (params) => {
|
||||
return axios.get('api/Handler/Company.ashx', {
|
||||
return axios.get('app/Handler/Company.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
// 路线查询 下拉
|
||||
export const getLine = (params) => {
|
||||
return axios.get('api/Handler/Line.ashx', {
|
||||
return axios.get('app/Handler/Line.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
// 查询设备素材
|
||||
export const getDevice = (params) => {
|
||||
return axios.get('api/Handler/Device.ashx', {
|
||||
return axios.get('app/Handler/Device.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//班组故障查询
|
||||
export const getBanzugz = (params) => {
|
||||
return axios.get('api/Handler/Banzugz.ashx', {
|
||||
return axios.get('app/Handler/Banzugz.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//查询工单统计
|
||||
export const getGdtj = (params) => {
|
||||
return axios.get('api/Handler/gdtj.ashx', {
|
||||
return axios.get('app/Handler/gdtj.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//查询单位本周故障
|
||||
export const getDwbzgz = (params) => {
|
||||
return axios.get('api/Handler/Dwbzgz.ashx', {
|
||||
return axios.get('app/Handler/Dwbzgz.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//查询供电所供电质量情况
|
||||
export const getGdsgdzl = (params) => {
|
||||
return axios.get('api/Handler/Gdsgdzl.ashx', {
|
||||
return axios.get('app/Handler/Gdsgdzl.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//查询配变停运情况
|
||||
export const getPbtyqk = (params) => {
|
||||
return axios.get('api/Handler/Pbtyqk.ashx', {
|
||||
return axios.get('app/Handler/Pbtyqk.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
|
|
@ -63,13 +63,38 @@ export const getPbtyqk = (params) => {
|
|||
// };
|
||||
//查询天气
|
||||
// export const Weather = (params) => {
|
||||
// return axios.get('api/Handler/Weather.ashx', {
|
||||
// return axios.get('app/Handler/Weather.ashx', {
|
||||
// params
|
||||
// })
|
||||
// };
|
||||
//查询天气1
|
||||
export const Weather = (params) => {
|
||||
return axios.get('api/Handler/Data.ashx', {
|
||||
return axios.get('app/Handler/Data.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//获取token
|
||||
export const getToken = (data) => {
|
||||
return axios.post('aps/api/v1/token'+'?appKey='+data.appKey+'&appSecret='+data.appSecret,data
|
||||
,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
|
||||
};
|
||||
//获取单个网柜信息
|
||||
export const getCabinetInfo = (data) => {
|
||||
return axios.post('aps/api/v1/cabinetInfo'+'?sn='+data.sn+'&token='+data.token,data
|
||||
,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
|
||||
};
|
||||
//获取网柜列表
|
||||
export const getCabinetList = (data) => {
|
||||
return axios.post('aps/api/v1/cabinetList'+'?sn='+data.pageSize+'&token='+data.token,data
|
||||
,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
|
||||
};
|
||||
//获取单个网柜数据
|
||||
export const getCabinetData = (data) => {
|
||||
return axios.post('aps/api/v1/cabinetData'+'?sn='+data.sn+'&token='+data.token,data
|
||||
,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
|
||||
};
|
||||
//获取单个网柜视频列表
|
||||
export const getCabinetCameraList = (data) => {
|
||||
return axios.post('aps/api/v1/cabinetCameraList'+'?sn='+data.sn+'&token='+data.token,data
|
||||
,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
75
src/main.js
75
src/main.js
|
|
@ -1,38 +1,37 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
Vue.use(ElementUI)
|
||||
import Plugin from 'v-fit-columns';
|
||||
Vue.use(Plugin);
|
||||
import * as echarts from 'echarts'
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
|
||||
import VideoPlayer from 'vue-video-player'
|
||||
import 'video.js/dist/video-js.css'
|
||||
import 'vue-video-player/src/custom-theme.css'
|
||||
Vue.use(VideoPlayer)
|
||||
|
||||
import moment from 'moment'
|
||||
//定义一个全局过滤器实现日期格式化
|
||||
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
|
||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
return moment(input).format(fmtstring);
|
||||
});
|
||||
Vue.prototype.$moment = moment
|
||||
|
||||
import Mixin from './mixins.js';
|
||||
Vue.mixin(Mixin)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
Vue.use(ElementUI)
|
||||
import Plugin from 'v-fit-columns';
|
||||
Vue.use(Plugin);
|
||||
import * as echarts from 'echarts'
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
|
||||
import VideoPlayer from 'vue-video-player'
|
||||
import 'video.js/dist/video-js.css'
|
||||
import 'vue-video-player/src/custom-theme.css'
|
||||
Vue.use(VideoPlayer)
|
||||
|
||||
import moment from 'moment'
|
||||
//定义一个全局过滤器实现日期格式化
|
||||
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
|
||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
return moment(input).format(fmtstring);
|
||||
});
|
||||
Vue.prototype.$moment = moment
|
||||
|
||||
import Mixin from './mixins.js';
|
||||
Vue.mixin(Mixin)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
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 it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,61 +1,81 @@
|
|||
<template>
|
||||
<div class="stationBuilding">
|
||||
<video-player
|
||||
class="video-player vjs-custom-skin"
|
||||
style="heght:100%;width:100%"
|
||||
ref="VideoPlayer"
|
||||
:playsinline="true"
|
||||
:options="playerOptions"
|
||||
>
|
||||
</video-player>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"stationBuilding",
|
||||
data() {
|
||||
return {
|
||||
// 视频播放器配置
|
||||
playerOptions: {
|
||||
height: 400,
|
||||
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
|
||||
autoplay: false, // 如果true,浏览器准备好时开始回放。
|
||||
muted: false, // 默认情况下将会消除任何音频。
|
||||
loop: false, // 导致视频一结束就重新开始。
|
||||
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||||
language: 'zh-CN',
|
||||
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||||
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||||
sources: [
|
||||
{
|
||||
type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
|
||||
src: require('../assets/videos/video.mp4'), // url地址
|
||||
}
|
||||
],
|
||||
poster: require('../assets/images/sun.png'), // 你的封面地址
|
||||
// width: document.documentElement.clientWidth, //播放器宽度
|
||||
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||||
controlBar: {
|
||||
timeDivider: true,
|
||||
durationDisplay: true,
|
||||
remainingTimeDisplay: false,
|
||||
fullscreenToggle: true // 全屏按钮
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.stationBuilding{
|
||||
width: 1722px;
|
||||
height: 982px;
|
||||
background: url("../assets/images/stationBuildingKuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 15px 25px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="stationBuilding">
|
||||
<!-- <video-player
|
||||
class="video-player vjs-custom-skin"
|
||||
style="heght:100%;width:100%"
|
||||
ref="VideoPlayer"
|
||||
:playsinline="true"
|
||||
:options="playerOptions"
|
||||
>
|
||||
</video-player> -->
|
||||
<div class="stationContent">
|
||||
<div class="systemText">
|
||||
<i class="el-icon-loading" style="color: #4bfffd; font-size: 80px"></i>
|
||||
<p style="font-size: 30px;color:#fff">系统正在加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "stationBuilding",
|
||||
data() {
|
||||
return {
|
||||
// 视频播放器配置
|
||||
playerOptions: {
|
||||
height: 400,
|
||||
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
|
||||
autoplay: false, // 如果true,浏览器准备好时开始回放。
|
||||
muted: false, // 默认情况下将会消除任何音频。
|
||||
loop: false, // 导致视频一结束就重新开始。
|
||||
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||||
language: "zh-CN",
|
||||
aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||||
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||||
sources: [
|
||||
{
|
||||
type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
|
||||
src: require("../assets/videos/video.mp4"), // url地址
|
||||
},
|
||||
],
|
||||
poster: require("../assets/images/sun.png"), // 你的封面地址
|
||||
// width: document.documentElement.clientWidth, //播放器宽度
|
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||||
controlBar: {
|
||||
timeDivider: true,
|
||||
durationDisplay: true,
|
||||
remainingTimeDisplay: false,
|
||||
fullscreenToggle: true, // 全屏按钮
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.stationBuilding {
|
||||
width: 1722px;
|
||||
height: 982px;
|
||||
background: url("../assets/images/stationBuildingKuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 15px 25px;
|
||||
z-index: 100;
|
||||
.stationContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../assets/images/zhifu.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.systemText {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,24 +14,23 @@ module.exports = {
|
|||
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
|
||||
// port: 8989, // 开发服务器运行端口号
|
||||
proxy: {
|
||||
'/api': { //代理的名字
|
||||
'/app': { //代理的名字
|
||||
// target:'http://111.229.30.246:3111/',
|
||||
target: 'http://172.16.1.254:3111/',
|
||||
target: 'http://172.16.1.254:3111/',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
pathRewrite:{
|
||||
'^/api':'',
|
||||
'^/app':'',
|
||||
}
|
||||
},
|
||||
// '/aps': { //代理的名字
|
||||
// target:'http://www.jcznedu.com:5000/',
|
||||
// // target: 'http://172.16.1.254:3111/',
|
||||
// ws: true,
|
||||
// changeOrigin: true,
|
||||
// pathRewrite:{
|
||||
// '^/aps':'',
|
||||
// }
|
||||
// }
|
||||
'/aps': { //代理的名字
|
||||
target:'http://221.231.99.214:99/',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
pathRewrite:{
|
||||
'^/aps':'',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue