'up'

package.json

@@ -26,6 +26,7 @@
     "@vue/cli-plugin-vuex": "^4.0.0",
     "@vue/cli-service": "^4.0.0",
     "babel-polyfill": "^6.26.0",
+    "ezuikit-js": "^0.3.0",
     "font-awesome": "^4.7.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",

src/components/EZUIKitJs/config.js

+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+const Config = {
+	'锡林矿业':{
+		info:{
+			appKey:'633c50cf44844aa7978dc6bb933bb633',
+			appSecret:'95945f6db98a3b2e22fec288d427cbcf',
+		},
+		list:[
+			{
+				name:'东乌测试',
+				channel:'1.hd.live',
+				id:'E83231214',
+				captcha:'WDZKDB',
+				idName:'ysOpenDevice',
+				remark:'无',
+			},
+		],
+	},
+};
+
+export function getVideoInfo(key){
+	return Config[key];
+}
\ No newline at end of file

src/components/EZUIKitJs/index.vue

+<!-- 
+/**
+  * 荧石云播放器组件
+  * @param: {Object} opts [top, left, eventOutClose(事件超出容器后关闭, 默认false), showCloseBtn(默认false)]
+  *	@example1: 
+
+  		npm install --save-dev ezuikit-js
+	
+		1, 引入
+			import EZUIKitJs from '@/components/EZUIKitJs'
+
+		2, 注册
+			export default {
+				components: {
+					EZUIKitJs,
+				},
+			}
+		
+		3, 创建
+			<EZUIKitJs ref="EZUIKit" selectSeat="right" autoPlayer="true"/>
+
+  * @author: Kimber
+  * @createtime: 2021/11/30(周二)
+  */
+ -->
+<template>
+	<div class="cv-inbox">
+		<div class="vi-select" v-if="selectSeat!=='none'" :class="{'dir-right':selectSeat==='right'}">
+			<el-select v-model="videoIndex" class="cus-select" placeholder="请选择视频" size="small" @change="selectVideo" label="操作">
+				<el-option v-for="(obj, index) in videoList" :label="obj.name" :value="index"></el-option>
+			</el-select>
+		</div>
+		<div class="cv-inbody">
+			<div class="EZUIKit-video" id="video-container"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import EZUIKit from "ezuikit-js";
+import axios from 'axios';
+import { getVideoInfo } from './config'
+const request = axios.create({});
+request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
+
+export default {
+	name: "EZUIKit",
+	data() {
+		return {
+			videoIndex:0,
+			videoList:[],
+		}
+	},
+	props: {
+		selectSeat: String,
+		autoPlayer: String,
+	},
+	mounted(){
+		this.videoContainer = this.$el.querySelector("#video-container");
+		var configInfo = getVideoInfo(this.$store.state.user.user.username);
+		this.info = configInfo.info;
+		this.videoList = configInfo.list;
+
+		if(this.autoPlayer !== 'false'){
+			// 播放视频
+			this.selectVideo(this.videoIndex);
+		};
+
+		// setTimeout(()=>{
+		//   player.stop(); // 方法调用示例，10秒后关闭视频
+		// },10000)
+	},
+	methods: {
+		/**
+		  * 获取Token
+		  * @param: {Object} item
+		  * @return: 
+		  * @author: Kimber
+		  * @updatetime: 
+		  * @createtime: 2021/11/23(周二)
+		  */
+		playerVideo(item){
+			if(this.videoContainer.firstElementChild){
+				this.videoContainer.innerHTML = '';
+				setTimeout(() => {
+					this.createVideo(item);
+				}, 500);
+			}else{
+				this.createVideo(item);
+			};
+		},
+
+		createVideo(item){
+			this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => {
+				var url = this.getUrl(item);
+				this.player = new EZUIKit.EZUIKitPlayer({
+					autoplay: true,
+					id: "video-container",
+					accessToken:accessToken,
+					url: url,
+					template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
+					// 视频上方头部控件
+					//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
+					//plugin: ['talk'],                       // 加载插件，talk-对讲
+					// 视频下方底部控件
+					// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
+					// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
+					// openSoundCallBack: data => console.log("开启声音回调", data),
+					// closeSoundCallBack: data => console.log("关闭声音回调", data),
+					// startSaveCallBack: data => console.log("开始录像回调", data),
+					// stopSaveCallBack: data => console.log("录像回调", data),
+					// capturePictureCallBack: data => console.log("截图成功回调", data),
+					// fullScreenCallBack: data => console.log("全屏回调", data),
+					// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
+				});
+			})
+		},
+		
+		/**
+		  * 获取Token
+		  * @param: {String} appKey
+		  * @param: {String} appSecret
+		  *	@example1: getAccessToken('appKey', 'appSecret').then(accessToken => {});
+		  * @return: 
+		  * @author: Kimber
+		  * @updatetime: 
+		  * @createtime: 2021/9/1
+		  */
+		getAccessToken(appKey, appSecret){
+			var dataJson = 'appKey='+appKey+'&appSecret='+appSecret;
+			return request.post("https://open.ys7.com/api/lapp/token/get", dataJson).then(res=>{
+				var data = res.data || {};
+				if (data['code'] == '200') {
+					return data['data']['accessToken']
+				}else{
+					return null
+				}
+			}).catch(err=>{
+				console.log(err);
+				return err
+			})
+		},
+
+		getUrl(item){
+			var captcha = item.captcha ? item.captcha + '@' :  '';
+			var id = item.id || this.info.id;
+			return 'ezopen://'+captcha+'open.ys7.com/'+id+'/'+item.channel;
+		},
+		// 视频选择事件
+		selectVideo(index){
+			var item = this.videoList[index];
+			this.playerVideo(item)
+		},
+
+		// 视频选择事件
+		playVideoName(key){
+			var configInfo = getVideoInfo(key);
+			if(configInfo && configInfo.info){
+				this.info = configInfo.info;
+				this.videoList = configInfo.list;
+				var item = this.videoList[0];
+				this.playerVideo(item)
+			}else{
+				this.videoContainer.innerHTML = '';
+			};
+		},
+	}
+};
+</script>
+<style lang="scss">
+	.cv-inbox{
+		position:relative;height:100%;width:100%;display:flex;flex-direction:column;
+		.vi-select{
+			.cus-select{
+				margin:5px;
+				input{display:inline-block;width:150px;border:1px solid #d0d2ff;background-color:#014468;
+					color:#d0d2ff;font-size:12px;
+				}
+				.el-input{}
+				.el-input__inner{
+					height:20px;line-height:20px
+
+				}
+				.el-input__suffix-inner{
+					.el-select__caret{line-height:20px}
+				}
+			}
+		}
+		.dir-right{text-align:right;}
+
+		.cv-inbody{
+			flex:1;position:relative;
+			.EZUIKit-video{
+				background-color:#01050f;
+				position:absolute;top:0;left:0;height:100%;width:100%;
+				iframe{height:100%;width:100%;}
+			}
+		}
+	}
+</style>

src/components/base/BaseLeft.vue

@@ -79,11 +79,19 @@
 					<svg t="1637996328836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3046" width="32" height="32"><path d="M758.826667 660.096l102.549333 262.058667h-54.421333l-24.085334-63.296h-107.584l-22.784 63.296h-54.464l102.549334-262.058667h58.24z m-29.12 40.512h-1.258667c0 1.706667-0.874667 5.056-2.538667 10.133333-1.706667 6.762667-2.965333 11.392-3.797333 13.930667-0.832 1.706667-12.245333 33.770667-34.176 96.213333h84.8c-22.784-63.296-34.581333-95.765333-35.413333-97.472a175.936 175.936 0 0 1-7.616-22.805333z m160.789333 221.568V660.096h50.624v262.058667h-50.624z m-378.517333-29.482667c-207.850667 0-376.96-170.773333-376.96-380.693333 0-209.877333 169.109333-380.650667 376.96-380.650667 207.872 0 376.981333 170.752 376.981333 380.650667a34.176 34.176 0 0 0 68.309333 0c0-247.530667-199.744-448.938667-445.269333-448.938667S66.730667 264.469333 66.730667 512c0 247.552 199.722667 448.96 445.248 448.96a34.133333 34.133333 0 0 0 0-68.266667z m190.762666-461.525333l-245.269333-139.136c-15.658667-8.704-31.317333-13.909333-46.101333-13.909333-33.045333 0-67.84 24.341333-67.84 78.272v279.146666c0 54.826667 33.898667 78.293333 67.84 78.293334 14.784 0 30.442667-4.330667 46.101333-13.909334l245.269333-139.157333c27.84-15.616 44.352-39.082667 44.352-64.341333 0.021333-26.090667-16.512-49.6-44.352-65.258667" fill="#02fcfe" p-id="3047"></path></svg>
 				</div>
 			</div>
-			<div class="base_left_box_line">
-				<div class="title">视频监控 <span class="position_look" @click="onClickVideo">更多</span></div>
+			<div class="base_left_box_line video-item">
+				<!-- 
+				<div class="title">视频监控<span class="position_look" @click="onClickVideo">更多</span></div>
 				<div class="palyer2" v-loading="loading">
 					<LivePlayer v-if="isVideoUrl" ref="player2" :videoUrl="videoUrl" live />
 					<LivePlayer v-else ref="player2" live />
+				</div> -->
+
+				<div class="title">视频监控<span class="position_look">更多</span></div>
+				<div class="palyer2">
+					<div class="video">
+						<EZUIKitJs ref="EZUIKit" selectSeat="none" autoPlayer="false"/>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -91,16 +99,17 @@
 </template>
 
 <script>
-import LivePlayer from '@liveqing/liveplayer'
+//import LivePlayer from '@liveqing/liveplayer'
 import eventBus from '@/utils/eventbus'
 import { randNum } from '@/utils'
 import { grouptree, start } from '@/api'
+import EZUIKitJs from '@/components/EZUIKitJs'
 
 import mixin_index from '@/mixins'
 
 export default {
 	mixins: [mixin_index],
-
+	
 	data() {
 		return {
 			dataObj: '',
@@ -114,7 +123,8 @@ export default {
 	},
 
 	components: {
-		LivePlayer,
+		//LivePlayer,
+		EZUIKitJs
 	},
 
 	mounted() {
@@ -213,6 +223,11 @@ export default {
 
 	computed: {
 		compony_info() {
+			var compony_info = this.$store.state.compony_info;
+			if(compony_info && compony_info.name){
+				this.$refs.EZUIKit.playVideoName(compony_info.name);
+			};
+
 			return this.$store.state.compony_info
 		},
 	},
@@ -234,6 +249,7 @@ export default {
 .base-left {
 	color: #fff;
 	.base_left_box {
+		position:relative;display:flex;flex-direction:column;
 		padding: 2vh;
 		padding-top: 4vh;
 		height: 80vh;
@@ -249,20 +265,19 @@ export default {
 		}
 
 		.base_left_box_line {
-			line-height: 1.5;
-			margin-top: 1vh;
+			line-height:1.5;
+			margin-top:1vh;
 
 			.title {
-				position: relative;
-				color: #02fcfe;
-				font-size: 1vw;
-
+				position:relative;
+				color:#02fcfe;
+				font-size:1vw;
 				.position_look {
-					position: absolute;
-					right: 0;
-					color: #10a1f2;
-					font-size: 0.8vw;
-					cursor: pointer;
+					position:absolute;
+					right:0;
+					color:#10a1f2;
+					font-size:0.8vw;
+					cursor:pointer;
 				}
 			}
 
@@ -279,10 +294,15 @@ export default {
 				color: #10a1f2;
 				cursor: pointer;
 			}
+		}
 
+		.video-item{
+			flex:1;display:flex;flex-direction:column;
 			.palyer2 {
-				height: auto;
-				margin-top: 0.5vh;
+				flex:1;position:relative;
+				.video{
+					position:absolute;top:0;left:0;height:100%;width:100%;
+				}
 			}
 		}