4.17websocket调试成功

public/config.js

@@ -1,5 +1,6 @@
 window.GLOBAL_CONFIG = {
 	apiURL: "http://127.0.0.1:8889/face",
 	IMG_SERVER_URL: "http://192.168.1.133:9000",
-	SOCKET_URL: "ws://127.0.0.1:1993/task/webSocket",
+	SOCKET_URL: "ws://127.0.0.1:8889/face/webSocketServer",
+	rtspApi_URL: window.location.protocol + '//' + window.location.hostname + ':' + window.location.port,
 }

src/views/modules/monitoring/barrier.vue

@@ -11,21 +11,23 @@
 					</i>
 				</div>
 				<div style="width: 528px;height: 190px;margin-bottom: 10px;background: #FFF;border-radius:2px; cursor: pointer;"
-					v-for="(item,index) in warningList" class="warning-class" @click="openTask(item)">
+					v-for="(item,index) in videoFaceList" class="warning-class" @click="openTask(item)">
 					<div
 						style="height:40px;display:flex;align-items: center; justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;">
-						<i style="font-weight: bold;color: #333333;margin-left: 20px">{{item.cameraRegion}}</i>
+<!--						<i style="font-weight: bold;color: #333333;margin-left: 20px">{{item.cameraRegion}}</i>-->
+            <i style="font-weight: bold;color: #333333;margin-left: 20px">{{videoFaceList[index].time}}</i>
 						<i style="font-weight: bold;color: #333333;margin-right: 20px;">{{item.time}}</i>
 					</div>
 					<div style="display: flex;align-items: center;height: 150px;margin-left: 34px;">
 						<div style="width: 120px;height: 120px;background: #F1F6F9;">
 							<!--<canvas width=120 height=120 :ref="'warningImage'+index">
 							</canvas>-->
-							<img style="width: 120px;height: 120px;" :src="item.cphoto" fit="contain"/>
+							<img style="width: 120px;height: 120px;" :src="videoFaceList[index].cphoto" fit="contain"/>
 						</div>
 						<div
 							style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;position: relative;">
-							<img style="width: 120px;height: 120px;" :src="item.rphoto" />
+              <!-- src="item.rphoto"-->
+							<img style="width: 120px;height: 120px;" src="../../../assets/img/warning/zb.png" />
 							<div
 								style="position: absolute;width: 100%;background-color: red;bottom: 0;opacity: 0.6;background: #000;color: #FFF;line-height: 1.8;">
 								<i>测试库</i>
@@ -38,10 +40,11 @@
 							style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgr			style="width: 120px;height: 120px;backgritem.name}}</i></span>
 								<span><i>性别：未知</i></span>
 								<span><i>来源：测试库</i></span>
-								<span><i>相似度：</i><i
+								<span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E;	font-family:Bahnschrift;">
-										style="font-size: 30px;font-weight: 600;color: #FF343E;	font-family:Bahnschrift;">{{item.xsd }}</i></span>
+                  {{"99%"+item.xsd}}</i></span>
 							</div>
 							<div style="position: absolute;top:0;right: 0;">
+                <img  src="../../../assets/img/warning/jk.png" alt="监控">
 								<img v-if="item.taskType=='3'" src="../../../assets/img/warning/ts.png" alt="提示">
 								<img v-if="item.taskType=='2'" src="../../../assets/img/warning/jk.png" alt="监控">
 								<img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕">
@@ -87,12 +90,18 @@
 				</div>
 				<!-- 背景图 -->
 				<!-- fits: ['fill', 'contain', 'cover', 'none', 'scale-down'], -->
-				<div style="width: 100%;display: flex;justify-content: center;background-color: #333;height:600px;">
+				<div>
-					<el-image style="width: 100%;" :src="faceBgUrltest"  :preview-src-list="[faceBgUrltest]"  fit="contain">
+<!--					<el-image style="width: 100%;" :src="faceBgUrltest"  :preview-src-list="[faceBgUrltest]"  fit="contain">-->
-						<div slot="error" class="image-slot" style="text-align: center;margin-top:270px ;">
+<!--						<div slot="error" class="image-slot" style="text-align: center;margin-top:270px ;">-->
-							<i style="color: #666;font-size: 60px;" class="el-icon-picture-outline"></i>
+<!--							<i style="color: #666;font-size: 60px;" class="el-icon-picture-outline"></i>-->
+<!--						</div>-->
+<!--					</el-image>-->
+          <el-card shadow="never" class="aui-card--fill">
+            <div style="border: 1px solid #000000;height: 100%;width: 100%;float: left" v-for="item in cameraList">
+              <video-control :msg=item.rtspUrl></video-control>
             </div>
-					</el-image>
+<!--            <button style="width: 200px;height: 200px;" @click="plays"></button>-->
+          </el-card>
 
 				</div>
 				<!-- 抓拍图片详情 -->
@@ -163,13 +172,15 @@
 	import 'element-ui/lib/theme-chalk/display.css';
 	import Task from './barrier-task'
 	import barrierAllPic from './barrier-all-pic'
+  import videoControl from'./video-control'
 	export default {
 		directives: {
 			clickoutside
 		},
 		components: {
 			Task,
-			barrierAllPic
+			barrierAllPic,
+      videoControl
 		},
 		data() {
 			return {
@@ -200,13 +211,15 @@
 				totalSnapShot: 0,
 				// 预警列表
 				warningList: [],
+        videoFaceList:[],
 				// 预警音乐类型
 				warningType: "",
+        cameraList:[{ rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554/h264"}],
 			}
 		},
 		mounted() {
 			//this.timer = setInterval(this.get, 1000);
-      this.get()
+      // this.get()
 		},
 		beforeDestroy() {},
 		created() {
@@ -218,15 +231,18 @@
 
 		methods: {
 			get(){
-        this.warningList = [];
+        this.videoFaceList = [];
         // console.log("this waringlist"+this.warningList);
-				this.$http.get("/faces/list").then(res => {
+				this.$http.get("/faces/returnList").then(res => {
-					this.warningList  = res.data;
+					this.videoFaceList  = res.data;
 				})
 			},
+      plays(){
+        this.cameraList.push({rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554/h264"});
+      },
 			// 初始化4条预警数据
 			initGetWarningPicture() {
-				this.$http.post("/warning/alarm", {
+				this.$http.post("/faces/compareList", {
 					"page": {
 						"pageNo": 1,
 						"pageSize": 4,
@@ -325,27 +341,15 @@
 				console.log("WebSocket Connection closed");
 			},
 			websocketonmessage(e) {
+        console.log("数据传输")
+        console.log(e)
 				// ws数据字符串转json
 				let wsObj = JSON.parse(e.data)
+        console.log("this wsObj")
+        console.log(wsObj)
 				// ws数据推送成功
-				if (wsObj.code === 200) {
-					// wsObj.cmd === "BAYONET" 人脸抓拍图片
-					if (wsObj.cmd === "BAYONET") {
-						this.getPicture(wsObj.data)
-					}
-					// wsObj.cmd === "WARNING" 预警信息
-					else {
         // 处理ws推送的预警信息
-						this.getWarningPicture(wsObj.data)
+        this.getWarningPicture(wsObj)
-					}
-				} else if (wsObj.code === 401) {
-					this.$router.replace({
-						name: 'login'
-					})
-				} else {
-					this.$message.error(wsObj.message)
-					this
-				}
 			},
 			// 抓拍的图片处理
 			getPicture(obj) {
@@ -383,18 +387,22 @@
 			 */
 			getWarningPicture(warningData) {
 				// warningData为数组说明是初始化数据，为对象说明是ws推送的数据
-				if (!Array.isArray(warningData)) {
+
 					if (this.warningList.length === 4) {
 						this.warningList.pop()
 						this.warningList.unshift(warningData)
 					} else {
-						this.warningList.unshift(warningData)
+            console.log("this warningDAta")
+            console.log(warningData)
+            this.warningList = warningData
+						// this.warningList.unshift(warningData)
+            console.log("this warningList")
+            console.log(this.warningList)
 					}
 					// 声音 和 tips预警
 					let warningType = this.$refs.notice
 					warningType.play()
-					this.$message.warning("有新的预警信息")
+					// this.$message.warning("有新的预警信息")
-				}
 				this.warningList.forEach((item, index, arr) => {
 					// "1" 红色#FF343E "2" 橙色#FFA61A  "0" 蓝色#2FC8FA
 					// if (item.taskType == "1" || item.taskType == "2" || item.taskType == "3") {

vue.config.js

@@ -19,6 +19,15 @@ module.exports = {
     overlay: {
       errors: true,
       warnings: true
+    },
+    proxy:{
+      '/api':{
+        target:"http://192.168.1.181:8286/",
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api':'/api'
+        }
+      }
     }
   }
 }