物流修改

gongchangdaping/src/utils/mqttHandler.js

@@ -0,0 +1,65 @@
+import mqtt from "mqtt";
+import Vue from 'vue'
+var vm = new Vue();
+class mqttHandle {
+    constructor(subscribe) {
+        this.connect = {
+            host: vm.mqttHost,
+            port: vm.mqttPort,
+            endpoint: "/mqtt",
+            clean: true, // 保留会话
+            cleanSession: true,
+            connectTimeout: 7000, // 超时时间
+            reconnectPeriod: 7000, // 重连时间间隔
+            // 认证信息
+            clientId: Number(new Date()).toString(),
+            username: "emqx_t",
+            password: "emqx_t",
+        }
+        this.subscription = {
+            topic: subscribe,  //需要传入数组的包含订阅的名称
+            qos: 2,
+        }
+        this.mqttClient = null;
+    }
+    /**
+     * 创建链接
+     * @returns client
+     */
+    createConnect() {
+        //配置链接
+        const { host, port, endpoint, ...options } = this.connect;
+        const connectUrl = `ws://13.229.167.76:1884/mqtt`;
+        try {
+            this._client = mqtt.connect(connectUrl, options);
+
+        } catch (error) {
+            console.log("mqtt.connect error", error);
+        }
+        this._client.on("connect", () => {
+            console.log("Connection succeeded!");
+
+        });
+        this._client.on('reconnect', (error) => {
+            console.log('正在重连', error)
+        })
+        this._client.on("error", (error) => {
+            console.log("Connection failed", error);
+        });
+
+        //配置topic
+        const { topic, qos } = this.subscription;
+        this._client.subscribe(topic, { qos: qos }, (error, res) => {
+            if (error) {
+                console.log("Subscribe to topics error", error);
+                return;
+            }
+            this.subscribeSuccess = true;
+            // console.log("Subscribe to topics res", res[0].qos, res[0].topic);
+        });
+        this.mqttClient = this._client;
+        return this.mqttClient;
+    }
+}
+
+export default mqttHandle;

gongchangdaping/src/views/components/mqtt.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

gongchangdaping/src/views/homeurl.vue

@@ -12,66 +12,282 @@ export default {
   data(){
     return{
       g_iWndIndex:0,
+	  logininfo:[],
     }
   },
   mounted() {
 	  var that=this;
-	  setTimeout(()=>{
-		  this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugin')
-	  },2000)
+	  // setTimeout(()=>{
+		 //  let sgse = {
+		 //    'ip': response.data.equipmentIp,
+		 //    'account': response.data.account,
+		 //    'password': response.data.password,
+		 //    'port': response.data.port
+		 //  }
+		 //  this.initPlugin(sgse)
+		 //  // this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugin')
+	  // },2000)
+	  var url="rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream"
+	  this.initUrl(url)
       
   },
   beforeDestroy() {
   	
   },
   methods:{
-	 initVideoPlay(ip, port, username, password,id){
-		 console.log(2)
-		 // 初始化插件参数及插入插件
-		 WebVideoCtrl.I_InitPlugin(500, 300, {
-		     bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
-		     iPackageType: 2, 
-		     //szColorProperty:"plugin-background:0000ff; sub-background:0000ff; sub-border:00ffff; sub-border-select:0000ff",   //2:PS 11:MP4
-		     iWndowType: 1,
-		     cbSelWnd: function (xmlDoc) {
-		         // g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
-		         // var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
-		         // showCBInfo(szInfo);
-		     },
-		     cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
-		         // var szInfo = "当前放大的窗口编号：" + iWndIndex;
-		         // if (!bFullScreen) {            
-		         //     szInfo = "当前还原的窗口编号：" + iWndIndex;
-		         // }
-		         // showCBInfo(szInfo);
-		     },
-		     cbEvent: function (iEventType, iParam1, iParam2) {
-		         // if (2 == iEventType) {// 回放正常结束
-		         //     showCBInfo("窗口" + iParam1 + "回放结束！");
-		         // } else if (-1 == iEventType) {
-		         //     showCBInfo("设备" + iParam1 + "网络错误！");
-		         // } else if (3001 == iEventType) {
-		         //     clickStopRecord(g_szRecordType, iParam1);
-		         // }
-		     },
-		     cbRemoteConfig: function () {
-		         // showCBInfo("关闭远程配置库！");
-		     },
-		     cbInitPluginComplete: function () {
-		         WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(
-					()=>{
-						
-					}
-				 );
-		 		console.log(222)
-		         // 检查插件是否最新
-		         // if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
-		         //     alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
-		         //     return;
-		         // }
-		     }
-		 });
-	 }
+	  initUrl(val){
+		 let arra=val.split('/')
+		 let arrb=arra[2].split(':')
+		 let arrc=arrb[1].split('@')
+		 // console.log(arrb[0],arrb[2],arrc)
+		let obj={
+			'ip':arrc[1],
+			'account':arrb[0],
+			'password':arrc[0],
+			'port':arrb[2]
+		}
+		  // if(val.videoAddress == undefined){
+		  //   let snghs = val.equipmentAddress.split('@')
+		  //          let snghst = snghs[1].split(':')
+		  //          let snsgduan = snghst[1].split('/')
+		  //           console.log(snghs,snghst,snsgduan)
+		  //          let sgse={'ip':snghst[0],'duank':snsgduan[0],
+		  //          'account':val.account,
+		  //          'password':val.password,
+		  //          'port':val.port
+		  //          }
+		  //   this.getVideo(sgse)
+		  //   WebVideoCtrl.I_ShowPlugin()
+		  // }else{
+		  //   let snghs = val.videoAddress.split('@')
+		  //          let snghst = snghs[1].split(':')
+		  //          let snsgduan = snghst[1].split('/')
+		  //           console.log(snghs,snghst,snsgduan)
+		  //          let sgse={'ip':snghst[0],'duank':snsgduan[0],
+		  //          'account':val.account,
+		  //          'password':val.password,
+		  //          'port':val.port
+		  //          }
+		  // this.getVideo(sgse)
+		  // WebVideoCtrl.I_ShowPlugin()
+		  // }
+	  },
+	// 播放摄像头
+	getVideo(row) {
+		var that=this;
+	   this.isfse  = true
+	   console.log(row)
+		this.initVideoPlay(row.ip, row.port, row.account, row.password)
+	},
+	//初始化插件参数及插入插件
+	initPlugin(data){
+	  var that=this;
+	  that.isfse=true
+	  WebVideoCtrl.I_InitPlugin({
+	      bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
+	      iWndowType: 2,
+	      // aIframe: ["test"],
+	      cbSelWnd: function (xmlDoc) {
+	          that.g_iWndIndex= parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
+	          var szInfo = "当前选择的窗口编号：" + that.g_iWndIndex;
+	          console.log(szInfo,that.g_iWndIndex)
+	      },
+	      cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
+	          var szInfo = "当前放大的窗口编号：" + iWndIndex;
+	          if (!bFullScreen) {
+	              szInfo = "当前还原的窗口编号：" + iWndIndex;
+	          }
+	      },
+	      cbEvent: function (iEventType, iParam1, iParam2) {
+	          if (2 == iEventType) {// 回放正常结束
+	          } else if (-1 == iEventType) {
+	          } else if (3001 == iEventType) {
+	              // clickStopRecord(g_szRecordType, iParam1);
+	          }
+	      },
+	      cbInitPluginComplete: function () {
+	          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
+	            that.getVideo(data)
+	              // 检查插件是否最新
+	              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
+	                  if (bFlag) {
+	                      alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPluginsUserSetup.exe升级！");
+	                  }
+	              });
+	          }, () => {
+	              alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPluginsUserSetup.exe安装！");
+	          });
+	      }
+	  });
+	},
+	//
+	initVideoPlay(szIP, szPort, szUsername, szPassword){
+	  // 判断ip是否有登录,
+	  var that=this;
+	   var szProtoType=1;//protocol 1：http, 2:https
+	   let a = szIP
+	   let b = szPort
+	  var newArr=JSON.parse(JSON.stringify(that.logininfo))
+	  var item=newArr.find(ite=>ite.szIP==szIP&&ite.szPort==szPort)
+	  if(item&&newArr.length){
+	    that.clickStartRealPlay(a, b,1, that.g_iWndIndex, 1);
+	  }else{
+	    // 登录
+	    WebVideoCtrl.I_Login(szIP, szProtoType, szPort, szUsername, szPassword, {
+	        timeout: 3000,
+	        success: function (xmlDoc) {
+	           console.log(" 登录成功！");
+	           var szDeviceIdentify = szIP + "_" + szPort;
+	            var obj={
+	              szIP:szIP,szPort:szPort,szUsername:szUsername,szPassword:szPassword
+	            }
+	            that.logininfo.push(obj)
+	           setTimeout(function () {
+	             // 获取通道
+	               // that.getChannelInfo(szIP);
+	           }, 1000);
+	           // 获取端口
+	           // that.getDevicePort(szIP);
+	           // 预览
+	           setTimeout(function() {
+	           	//调用预览摄像头这里可以循环创建
+	            //szIP, szPort, iStreamType:预览类型, iWndIndex, iChannelID:通道列表
+	              that.clickStartRealPlay(a, b,1, that.g_iWndIndex, 1);
+	           }, 1000);
+	        },
+	        error: function (oError) {
+	            console.log(" 登录失败！", oError);
+	        }
+	    });
+	  }
+	},
+	// 获取通道
+	getChannelInfo(ip) {
+	    var szDeviceIdentify = ip,
+	    	oSel = null; //通道列表
+	    if (null == szDeviceIdentify) {
+	    	return;
+	    }
+	    // 模拟通道
+	    WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
+	        success: function (xmlDoc) {
+	            var oChannels = $(xmlDoc).find("VideoInputChannel");
+	
+	            $.each(oChannels, function (i) {
+	                var id = $(this).find("id").eq(0).text(),
+	                    name = $(this).find("name").eq(0).text();
+	                if ("" == name) {
+	                    name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+	                }
+	                oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
+	            });
+	            console.log(szDeviceIdentify + " 获取模拟通道成功！");
+	        },
+	        error: function (oError) {
+	            console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
+	        }
+	    });
+	    // 数字通道
+	    WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
+	        success: function (xmlDoc) {
+	            var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+	
+	            $.each(oChannels, function (i) {
+	                var id = $(this).find("id").eq(0).text(),
+	                    name = $(this).find("name").eq(0).text(),
+	                    online = $(this).find("online").eq(0).text();
+	                if ("false" == online) {// 过滤禁用的数字通道
+	                    return true;
+	                }
+	                if ("" == name) {
+	                    name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+	                }
+	            });
+	            console.log(szDeviceIdentify + " 获取数字通道成功！");
+	        },
+	        error: function (oError) {
+	            console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
+	        }
+	    });
+	    // 零通道
+	    WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
+	        success: function (xmlDoc) {
+	            var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+	
+	            $.each(oChannels, function (i) {
+	                var id = $(this).find("id").eq(0).text(),
+	                    name = $(this).find("name").eq(0).text();
+	                if ("" == name) {
+	                    name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
+	                }
+	                if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
+	
+	                }
+	            });
+	            console.log(szDeviceIdentify + " 获取零通道成功！");
+	        },
+	        error: function (oError) {
+	            console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
+	        }
+	    });
+	},
+	// 获取端口
+	getDevicePort(ip) {
+	  var that=this;
+	    var szDeviceIdentify = ip;
+	
+	    if (null == szDeviceIdentify) {
+	    	return;
+	    }
+	    WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
+	    	console.log(szDeviceIdentify + " 获取端口成功！");
+	    	that.iRtspPort = oPort.iRtspPort
+	    }, (oError) => {
+	    	var szInfo = "获取端口失败！";
+	    	console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
+	    });
+	},
+	// 5.开始预览
+	clickStartRealPlay(szIP, szPort, iStreamType, iWndIndex, iChannelID) {
+	  var that=this;
+		var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
+			szDeviceIdentify = szIP + "_" + szPort, //ip
+			iChannelID = iChannelID,
+			bZeroChannel = false,
+			iPort = this.iRtspPort,
+			szInfo = "";
+		iStreamType = parseInt(iStreamType, 10);;
+		if (null == szDeviceIdentify) {
+			return null;
+		}
+		this.szDeviceIdentify = szDeviceIdentify;
+		var startRealPlay = function() {
+			WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
+				iStreamType: iStreamType,
+				iChannelID: iChannelID,
+				bZeroChannel: bZeroChannel,
+				iWndIndex: iWndIndex, //要播放的窗口
+				iPort: iPort, //如果多个摄像头需要必填 （RTSP 端口号）
+				success: function() {
+					szInfo = "开始预览窗口" + iWndIndex + "成功！";
+					console.log(szDeviceIdentify + " " + szInfo);
+				},
+				error: function(oError) {
+					console.log(szDeviceIdentify + " 开始预览窗口" + iWndIndex + "失败！", oError
+						.errorCode, oError.errorMsg);
+				}
+			});
+		};
+		if (oWndInfo != null) { // 已经在播放了，先停止
+			WebVideoCtrl.I_Stop({
+				success: function() {
+					startRealPlay();
+				}
+			});
+		} else {
+			startRealPlay();
+		}
+	},
   }
 }
 </script>

gongchangdaping/src/views/record.vue

@@ -33,34 +33,41 @@
 				</div>
 				<div class="topc">
 					<img src="@/assets/images/record/rtitf.png" class="titimg"/>
-					<div class="wlbox">
-						<div class="wlbtop">
-							<div><span>收货地址</span>深圳鹏威新材</div>
-							<div><span>物流公司</span>EMS经济快递</div>
-							<div><span>运单号码</span>5066937639801</div>
-						</div>
-						<img src="@/assets/images/record/line.png" class="line"/>
-						<div class="stepbox">
-							<div class="step flext" v-for="(ite,idx) in steplist" :key="idx">
-								<div class="time flex0">{{ite.time}}</div>
-								<div class="cir flex0">
-									<img src="@/assets/images/record/cir.png" v-if="idx==0"/>
-									<img src="@/assets/images/record/ccir.png" v-else/>
-								</div>
-								<div class="tit overtwo">{{ite.tit}}</div>
-							</div>
-						</div>
+					<div style="height: 346px;">
+						<el-carousel height="309px" :autoplay="isautoplay">
+						      <el-carousel-item v-for="(ite,idx) in stepInfo" :key="idx">
+						        <div class="wlbox" >
+						        	<div class="wlbtop">
+						        		<div><span>收货地址</span>{{ite.adr}}</div>
+						        		<div><span>物流公司</span>{{ite.gs}}</div>
+						        		<div><span>运单号码</span>{{ite.dh}}</div>
+						        	</div>
+						        	<img src="@/assets/images/record/line.png" class="line"/>
+						        	<div class="stepbox">
+						        		<div class="step flext" v-for="(aite,aidx) in ite.children" :key="aidx">
+						        			<div class="time flex0">{{aite.time}}</div>
+						        			<div class="cir flex0">
+						        				<img src="@/assets/images/record/cir.png" v-if="aidx==0"/>
+						        				<img src="@/assets/images/record/ccir.png" v-else/>
+						        			</div>
+						        			<div class="tit overtwo">{{aite.tit}}</div>
+						        		</div>
+						        	</div>
+						        </div>
+						      </el-carousel-item>
+						</el-carousel>
 					</div>
-					<div class="pages flexcc">
-						<!-- layout="prev, pager, next" :pager-count="4"-->
+					
+					
+					<!-- <div class="pages flexcc">
 						<el-pagination
 						background
 						  :page-size="1"
-						  
+						  layout="prev, pager, next" :pager-count="4"
 						  layout="pager"
 						  :total="4">
 						</el-pagination>
-					</div>
+					</div> -->
 				</div>
 			</div>
 		</div>
@@ -136,7 +143,9 @@ export default {
 		columnd:[{label:'型号',prop:'specification',width:"10%"},{label:'批号',prop:'itemBatchCode',width:"12%"},{label:'厚度(μm)',prop:'thickness',width:"15%",},{label:'溢胶量(mm)',prop:'excessGlueVolume',width:"20%"},{label:'剥离强度(kgf)',prop:'peelStrength',width:"18%"},{label:'TD/MD',prop:'TD',width:"15%",type:'td'},{label:'结果',prop:'checkResult',width:"8%"}],
 		
 		rbarDataa:{data:['黑点','杂质','色差','取样','接头','皱痕','刮痕','缺胶','拉线','制程异常','原料异常','设备异常 ',],bara:[110,135,88,91,50,98,26,30,80,26,53,46],},
-		steplist:[{time:'2025-05-10 17:03',tit:'已到达深圳，正在配送...'},{time:'2025-05-10 06:03',tit:'已到达惠州，发往深圳'},{time:'2025-05-09 14:03',tit:'已到达赣州，发往惠州'},{time:'2025-05-08 17:03',tit:'南昌市 离开处理中心,发往赣州'},]
+		steplist:[{time:'2025-05-10 17:03',tit:'已到达深圳，正在配送...'},{time:'2025-05-10 06:03',tit:'已到达惠州，发往深圳'},{time:'2025-05-09 14:03',tit:'已到达赣州，发往惠州'},{time:'2025-05-08 17:03',tit:'南昌市 离开处理中心,发往赣州'},],
+		stepInfo:[{adr:"深圳鹏威新材",gs:"EMS经济快递",dh:"5066937639801",children:[{time:'2025-05-10 17:03',tit:'已到达深圳，正在配送...'},{time:'2025-05-10 06:03',tit:'已到达惠州，发往深圳'},{time:'2025-05-09 14:03',tit:'已到达赣州，发往惠州'},{time:'2025-05-08 17:03',tit:'南昌市 离开处理中心,发往赣州'}],},{adr:"123456",gs:"EMS经济快递",dh:"5066937639801",children:[{time:'2025-05-10 17:03',tit:'已到达深圳，正在配送...'},{time:'2025-05-10 06:03',tit:'已到达惠州，发往深圳'},{time:'2025-05-09 14:03',tit:'已到达赣州，发往惠州'},{time:'2025-05-08 17:03',tit:'南昌市 离开处理中心,发往赣州'}],}],
+		isautoplay:false,
 	};
   },
   created() {
@@ -189,6 +198,18 @@ export default {
 ::v-deep .el-table .cell div{
   white-space: pre-line !important;
 }
+::v-deep{
+	.topc {
+		.el-carousel__indicator{margin: 0 5px;
+			min-width: 15px;border: 1px solid #07D2FF;background-color: transparent;height: 15px;width: 15px;font-size: 10px;line-height: 1;padding: 0;color: transparent !important;
+				
+			&.is-active{
+				background-color: #52FFFF;height: 15px;color: transparent !important;
+			}
+		}
+		.el-carousel__button{display: none;}
+	}
+}
 .rebox{padding:17px 0 0 17px;}
 .topa{width:591px;height: 415px;background: url('~@/assets/images/record/topbga.png') no-repeat;background-size: 100% 100%;padding: 18px 25px 0;
 	.titimga{width: 138px;height: 22px;margin-bottom: 10px;}