20230204

public/VideoWeb/StreamingAssets/JsonJianktx.txt

@@ -0,0 +1,20 @@
+{
+	"code": 200,
+	"msg": "成功",
+	"data": [{
+		"graphicId": "35fb0709596841e5b005fb1bc33a0fa4",
+		"graphicName": "测试区域",
+		"graphicType": "区域",
+		"coordinate": "218.6106 984.2285,453.5649 994.1006,267.9708 820.3528,218.6106 984.2285"
+	}, {
+		"graphicId": "957eb7cba61240f5a099ee6080bd29f0",
+		"graphicName": "测试路线2",
+		"graphicType": "轨迹",
+		"coordinate": "157.404 236.9287,179.1225 260.6216,192.9433 300.1097,202.8154 329.7258,214.6618 357.3675,222.5594 392.9068,236.3803 424.4973,258.0987 446.2157,289.6892 465.9598,317.3309 485.7039,350.8958 503.4735,382.4863 509.3967,420 517.2943,467.3858 521.2432,508.8483 525.192,556.234 525.192,599.671 525.192,631.2614 525.192,662.8519 513.3455,690.4936 499.5247,712.2121 477.8062,724.0585 444.2413,728.0073 412.6508,745.777 386.9836,775.3931 377.1115,806.9836 379.0859"
+	}, {
+		"graphicId": "7c24aa16e12840859164780d71827f5f",
+		"graphicName": "测试线2",
+		"graphicType": "断面",
+		"coordinate": "437.7697 642.6563,880.0366 737.4278"
+	}]
+}

public/VideoWeb/index.html

@@ -128,13 +128,21 @@
       //unity初始化
       function OnSceneLoaded(){
         window.parent.OnScene();
+
+      }
+      //初始化传离线视频数据功能
+      function lixianVideo(string){
+        console.log("string",string)
+        if(unity!=null){
+            unity.SendMessage('AAA','Unity_OfflineDataPrepare', string);
+        }
       }
        //获取图像
        function getDestination(string){
         // console.log("string",string)
-        if(unity!=null){
+            if(unity!=null){
-        unity.SendMessage('AAA', 'SendImage', string);
+            unity.SendMessage('AAA', 'SendImage', string);
-        }     
+            }     
         }
     //获取图像id等数据
     function getData(string){

src/views/AnalysisMain.vue

@@ -19,16 +19,17 @@
             <img src="@/assets/img/AnalysisMain/leftTop.png" alt="" v-if="item.type=='实时视频'">
             <img src="@/assets/img/AnalysisMain/leftTop2.png" alt="" v-if="item.type=='离线视频'">
         </div>
-         <div class="name">
+        <div class="name">
             <img src="@/assets/img/AnalysisMain/ssVideo.png" alt="" v-if="item.type=='实时视频'">
             <img src="@/assets/img/AnalysisMain/lxVideo.png" alt="" v-if="item.type=='离线视频'">
         </div>
-        <div class="statusN" v-if="item.type=='实时视频'|| item.status=='已分析'">
+        <div class="statusN">
-             <img src="@/assets/img/AnalysisMain/status.png" alt="" v-if="item.type=='实时视频'">
+             <img src="@/assets/img/AnalysisMain/status.png" alt="" >
              <span class="statusName">{{ item.status }}</span>
         </div>
+        
         <!-- <div class="del" @click="open(item.id)"> <i class='el-icon-delete'></i></div> -->
-      <img :src="item.img" class="image" @click="goToPage(item.id,item.num,item.title,item.type)">
+      <img :src="item.img" class="image" @click="goToPage(item.id,item.num,item.title,item.type,item.status)">
       <div class="bot">
         <span style=" vertical-align: middle;">
             <img src="@/assets/img/AnalysisMain/video (1).png" alt="">
@@ -69,8 +70,7 @@
       <el-dialog
     title="视频源配置"
     width="40%"
-    :visible.sync="dialogFormVisible"
+    :visible.sync="dialogFormVisible" 
-    
   >
     <!-- <editModal ></editModal> -->
     <el-form :model="form">
@@ -299,8 +299,13 @@ destroyed: function () {
         console.log("form",form)
         let formData = new FormData();
         formData.append("VideoName",form.videoName);
-            formData.append("VideoType",form.videoType);
+            formData.append("VideoType",this.videoTypeForm.videoType);
-            formData.append("VideoStreamAddress",form.videoStreamAddress);
+            if(this.videoTypeForm.videoType=='离线视频'){
+                formData.append("VideoPath",form.videoStreamAddress);
+                
+            }else{
+                formData.append("VideoStreamAddress",form.videoStreamAddress);
+            }
         axios({
                 method: "post",
                 url: serverUrl.dataUrl,
@@ -419,7 +424,7 @@ destroyed: function () {
                                   message: r.data.msg,
                                   type: 'success'
                                 });
-                                
+                                this.form.videoStreamAddress=r.data.data
                                 }
                             }
                         }).catch(e => {
@@ -427,9 +432,10 @@ destroyed: function () {
                         });
                     }
                 },
-     goToPage(id,num,name,type) {
+     goToPage(id,num,name,type,status) {
 
-        this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type}})
+        this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status
+}})
         
     },
      //获取视频数据

src/views/bounced/analysisPreview.vue

@@ -109,44 +109,38 @@ export default {
         //   console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
           // 订阅
           this.mqttClient.subscribe('img0', { qos: 0 });
-        //    this.client.connect('aaa', '111')
           this.mqttClient.publish('aaa', '111');
-        //   this.mqttClient.subscribe('msg_stream', { msg_flag: 0 });
           this.mqttClient.subscribe('img1', { qos: 0 });
           this.mqttClient.subscribe('img2', { qos: 0 });
           this.mqttClient.subscribe('img3', { qos: 0 });
           this.mqttClient.subscribe('img4', { qos: 0 });
           this.mqttClient.subscribe('img5', { qos: 0 });
+          this.mqttClient.subscribe('img6', { qos: 0 });
+          this.mqttClient.subscribe('img7', { qos: 0 });
           this.mqttClient.subscribe('stream0', { qos: 0 });
           this.mqttClient.subscribe('stream1', { qos: 0 });
           this.mqttClient.subscribe('stream2', { qos: 0 });
           this.mqttClient.subscribe('stream3', { qos: 0 });
           this.mqttClient.subscribe('stream4', { qos: 0 });
           this.mqttClient.subscribe('stream5', { qos: 0 });
-          
+          this.mqttClient.subscribe('stream6', { qos: 0 });
+          this.mqttClient.subscribe('stream7', { qos: 0 });        
         });
          
         // 接收回调
-        this.mqttClient.on("message", (topic, message, packet) => {
+        this.mqttClient.on("message", (topic, message, packet) => {            
-            
           if (topic.indexOf("img0") != -1) {
             try {
               const utf8decoder = new TextDecoder()
               const u8arr = new Uint8Array(message)
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-            //   debugger
+            document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            //   console.log("msg", msg)   //msg为转换后的JSON数据
-            // console.log("1111",document.getElementById("mapModule"))
-                document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-            //   this.imgUrl = 'data:image/png;base64,' + msg.pic;
-            //   console.log("imageUrl", imageUrl)
-             
             } catch {
               let imageType = 'arraybuffer';
               const blob = new Blob([message], { type: imageType })
               const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
-            //   console.log("imageUrl", imageUrl)
+              console.log("imageUrl", imageUrl)
             }
           } else if (topic.indexOf("img1") != -1) {
             try {
@@ -155,8 +149,7 @@ export default {
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
             //   console.log("msg", msg)   //msg为转换后的JSON数据
-              this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
+             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-              console.log("imageUrl", imageUrl)
             } catch {
               let imageType = 'arraybuffer';
               const blob = new Blob([message], { type: imageType })
@@ -170,8 +163,7 @@ export default {
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
               console.log("msg", msg)   //msg为转换后的JSON数据
-              this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
+              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-              console.log("imageUrl", imageUrl)
             } catch {
               let imageType = 'arraybuffer';
               const blob = new Blob([message], { type: imageType })
@@ -185,8 +177,7 @@ export default {
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
               console.log("msg", msg)   //msg为转换后的JSON数据
-              this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
+              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-              console.log("imageUrl", imageUrl)
             } catch {
               let imageType = 'arraybuffer';
               const blob = new Blob([message], { type: imageType })
@@ -200,8 +191,7 @@ export default {
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
               console.log("msg", msg)   //msg为转换后的JSON数据
-              this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
+              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-              console.log("imageUrl", imageUrl)
             } catch {
               let imageType = 'arraybuffer';
               const blob = new Blob([message], { type: imageType })
@@ -215,50 +205,89 @@ export default {
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
               console.log("msg", msg)   //msg为转换后的JSON数据
-              this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
+             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
-              console.log("imageUrl", imageUrl)
             } catch {
               let imageType = 'arraybuffer';
               const blob = new Blob([message], { type: imageType })
               const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
               console.log("imageUrl", imageUrl)
             }
-          } else if (topic.indexOf("stream0") != -1) {
+          } else if (topic.indexOf("img6") != -1) {
+            try {
+              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("mapModule").contentWindow.getDestination(JSON.stringify(msg))
+            } catch {
+              let imageType = 'arraybuffer';
+              const blob = new Blob([message], { type: imageType })
+              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
+              console.log("imageUrl", imageUrl)
+            }
+          }else if (topic.indexOf("img7") != -1) {
+            try {
+              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("mapModule").contentWindow.getDestination(JSON.stringify(msg))
+            } catch {
+              let imageType = 'arraybuffer';
+              const blob = new Blob([message], { type: imageType })
+              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
+              console.log("imageUrl", imageUrl)
+            }
+          }else if (topic.indexOf("stream0") != -1) {
             const utf8decoder = new TextDecoder()
               const u8arr = new Uint8Array(message)
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)
                 document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
           } else if (topic.indexOf("stream1") != -1) {
-            console.log(
+            const utf8decoder = new TextDecoder()
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+              const u8arr = new Uint8Array(message)
-              new Date(),
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              new Date().getMilliseconds()
+              const msg = JSON.parse(temp)
-            );
+                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
           } else if (topic.indexOf("stream2") != -1) {
-            console.log(
+            const utf8decoder = new TextDecoder()
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+              const u8arr = new Uint8Array(message)
-              new Date(),
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              new Date().getMilliseconds()
+              const msg = JSON.parse(temp)
-            );
+                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
           } else if (topic.indexOf("stream3") != -1) {
-            console.log(
+            const utf8decoder = new TextDecoder()
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+              const u8arr = new Uint8Array(message)
-              new Date(),
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              new Date().getMilliseconds()
+              const msg = JSON.parse(temp)
-            );
+                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
           } else if (topic.indexOf("stream4") != -1) {
-            console.log(
+           const utf8decoder = new TextDecoder()
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+              const u8arr = new Uint8Array(message)
-              new Date(),
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              new Date().getMilliseconds()
+              const msg = JSON.parse(temp)
-            );
+            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
           } else if (topic.indexOf("stream5") != -1) {
-            console.log(
+            const utf8decoder = new TextDecoder()
-              `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+              const u8arr = new Uint8Array(message)
-              new Date(),
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-              new Date().getMilliseconds()
+            const msg = JSON.parse(temp)
-            );
+            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
+          }else if (topic.indexOf("stream6") != -1) {
+            const utf8decoder = new TextDecoder()
+              const u8arr = new Uint8Array(message)
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
+            const msg = JSON.parse(temp)
+            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
+          }else if (topic.indexOf("stream7") != -1) {
+            const utf8decoder = new TextDecoder()
+              const u8arr = new Uint8Array(message)
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
+            const msg = JSON.parse(temp)
+            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
           }
 
         });

src/views/bounced/dataBoard.vue

@@ -348,7 +348,7 @@ export default {
                     sections[i].style.height = 500
                     return
                 } else if (sections[i].firstChild.offsetHeight + 30 <1030) {
-                    this.$refs.dataBoard.style.height = '1030px'
+                    // this.$refs.dataBoard.style.height = '1030px'
                 }
                 sections[i].style.height = sections[i].firstChild.offsetHeight + 20 + 'px';
             } else {
@@ -390,7 +390,7 @@ export default {
     mounted() {
         let dataBoard = document.querySelector('.dataBoard')
         if (this.regionData.length <= 2 || this.sectionData.length <= 2) {
-            dataBoard.style.height = '1030px'
+            // dataBoard.style.height = '1030px'
         } else {
             dataBoard.style.height = 'auto'
         }

src/views/index.vue

@@ -12,9 +12,13 @@
                             frameborder="0"
                             style="width: 100%; height:100%;"
                             scrolling="no"
+                            v-if="videoUnityShow"
                         ></iframe>
-                        <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
+                        <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
-          ref="iframe"></iframe> -->
+                    <el-empty :description="description" v-if="videoAnalysisShow">
+                      <!-- <el-button type="primary">按钮</el-button> -->
+                      <!-- <el-button type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow">视频分析</el-button> -->
+                    </el-empty>
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="数据看板" name="second">
@@ -31,33 +35,10 @@
             <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow"
                 >视频分析</el-button
             >
-            <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn" v-if="trafficAnalysisShow"
+            <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn" v-if="trafficAnalysisShow" :disabled='disabledTrafficAnalysis'
                 >交通分析</el-button
             >
         </div>
-        <!-- <div id="dialog" style="height:500px"> -->
-        <!-- <el-dialog  class="new-dialog" :title="title+'组件'" :modal="false" :close-on-click-modal="false" :visible.sync="dialogFormVisible" v-alterELDialogMarginTop="{marginTop:'0vh'}" customClass='customWidth' width="100%" @close='closeForm(form)'>
-            <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="组件名称">
-            <el-input v-model="form.name"></el-input>
-          </el-form-item>
-          <el-form-item label="断面方向" v-if="form.type=='断面'">
-            <el-select v-model="form.Direction" placeholder="请选择类型">
-              <el-option label="正向" value="正向"></el-option>
-              <el-option label="反向" value="反向"></el-option>
-              <el-option label="双向" value="双向"></el-option>
-            </el-select>
-          </el-form-item>
-            <el-form-item label="速度阈值" v-if="form.type=='区域'">
-            <el-input-number v-model="form.StoppingSpeed" :precision="1" :step="0.1"></el-input-number>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit(form)">确认</el-button>
-            <el-button  @click="closeFigure(form)">取消</el-button>
-          </el-form-item>
-        </el-form>
-
-      </el-dialog> -->
         <el-drawer
             class="new-dialog"
             :visible.sync="dialogFormVisible"
@@ -104,31 +85,26 @@
                 <el-form-item label="类型筛选：" v-if="componentForm.componentType == '类型'">
                     <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
                         <el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
-                        <!-- <el-checkbox label="小汽车" name="type" ></el-checkbox>
-                <el-checkbox label="公交车" name="type" ></el-checkbox>
-                <el-checkbox label="卡车" name="type" ></el-checkbox>
-                <el-checkbox label="非机动车" name="type" ></el-checkbox>
-                <el-checkbox label="行人" name="type" ></el-checkbox> -->
                     </el-checkbox-group>
                 </el-form-item>
-                <el-form-item label="数值筛选：" v-if="componentForm.componentType != 'OD'">
+                <el-form-item label="数值筛选：" v-if="componentForm.componentType != 'OD' &&componentForm.componentType != '类型'&&componentForm.componentType != '流量'">
                     <el-input-number v-model="componentForm.startValue"></el-input-number>
                     <el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
                 </el-form-item>
                 <el-form-item label="时间模式：">
                     <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
-                        <el-option label="触发" value="touch"></el-option>
+                        <el-option label="触发" value="触发" v-if="componentForm.componentType != '延误'&&componentForm.componentType != '拥堵'"></el-option>
                         <el-option
                             label="周期时刻"
-                            value="timeing"
+                            value="周期时刻"
                             v-if="
-                                componentForm.componentType != '排队数' &&
+                                    componentForm.componentType != '排队数' &&
                                     componentForm.componentType != '检测数' &&
                                     componentForm.componentType != '延误' &&
-                                    componentForm.componentType != '拥堵'
+                                    componentForm.componentType != '拥堵'&&
-                            "
+                                    componentForm.componentType != '流量'
-                        ></el-option>
+                            "></el-option>
-                        <el-option label="周期统计" value="date" v-if="componentForm.componentType != 'OD'"></el-option>
+                        <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"></el-option>
                     </el-select>
                 </el-form-item>
                 <!-- <el-form-item label="触发类型：" v-if="componentForm.timeModel=='touch'">
@@ -137,12 +113,18 @@
             <el-radio label="间隔"></el-radio>
           </el-radio-group>
         </el-form-item> -->
-                <el-form-item label="周期间隔：" v-if="componentForm.timeMode != 'touch'">
+                <el-form-item label="周期间隔：" v-if="componentForm.timeMode != '触发'">
                     <!-- <el-slider v-model="componentForm.cycleInterval" show-input>
             </el-slider> -->
                     <div style="display:inline">
                         <el-select v-model="componentForm.company" placeholder="请选择单位" @change="changeCompany">
-                            <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                            <!-- <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
+                        <el-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option>
+                        <el-option
+                            label="分钟"
+                            value="分钟"
+                            ></el-option>
+                        <el-option label="小时" value="小时" ></el-option>
                         </el-select>
                         <el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider>
                     </div>
@@ -229,6 +211,7 @@ export default {
             dialogFormVisible: false,
             areaComponent: false,
             indexModule: false,
+            disabledTrafficAnalysis:true,
             //判断模拟区，画布区
             numberNew: 1,
             speed: false,
@@ -275,7 +258,7 @@ export default {
             titName: '',
             componentForm: {
                 //单位
-                company: '秒',
+                company: '',
                 componentName: '',
                 componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
                 //周期间隔
@@ -289,7 +272,7 @@ export default {
                 presentationForm: '',
                 presentation: [],
                 startValue: '',
-                timeMode: '触发',
+                timeMode: '',
                 type: [],
                 startSection: [],
                 endSection: [],
@@ -297,7 +280,8 @@ export default {
                 typeFiltering: '',
                 typeData: []
             },
-            typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
+            // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
+            typeData:['机动车','非机动车','行人'],
             //展现形式
             presentation: ['数值', '表格', '时间曲线图', '均值图'],
 
@@ -357,7 +341,20 @@ export default {
             //视频类型
             videoType: '',
             videoAnalysisShow: false,
-            trafficAnalysisShow: false
+            trafficAnalysisShow: false,
+            //控制unity展示
+            videoUnityShow:true,
+            videoAnalysisSta:'',
+            analysis:{
+                    trafficAnalysisPath1:'',
+                    trafficAnalysisPath2:'',
+                    videoAnalysisPath:'',
+                    videoName:'',
+                    videoPath:'',
+                    videoTotalFrames:'',
+                    videoType:''
+                    },
+            description:'请点击视频分析'
         };
     },
 
@@ -378,13 +375,22 @@ export default {
         this.VideoId = this.$route.query.id;
         this.number = this.$route.query.num;
         this.titName = this.$route.query.name;
-        this.videoType = this.$route.query.type;
+        // this.videoType = this.$route.query.type;
-        if (this.videoType != '实时视频') {
+        if (this.$route.query.type == '实时视频') {
             this.videoAnalysisShow = false;
             this.trafficAnalysisShow = false;
+            document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
         } else {
             this.videoAnalysisShow = true;
             this.trafficAnalysisShow = true;
+            // if(this.$route.query.status=='未分析'){
+            //     // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
+               
+            // }else{
+
+            // }
+             this.getAnalysisStatus()
+             
         }
     },
     mounted() {
@@ -393,16 +399,14 @@ export default {
         //   this.getSingleComponentIdN()
         this.componentForm.company = this.timeSelect[0].value;
         this.createMqtt();
+       
     },
     methods: {
         /** 创建mqtt */
         createMqtt() {
             //创建链接，接收数据
-            this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number];
+            this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger'+ this.$route.query.id];
-
-            //    console.log(window.PubScribe,'********************');
             window.PubScribe(this.topicSends, this.number, this.realInfo);
-
             //   mqtt = mqttConfig;
             /*mqtt = new mqttConfig(this.topicSends);
       client = mqtt.createConnect();
@@ -429,16 +433,71 @@ export default {
         }
       });*/
         },
+        //获取视频分析，交通分析状态数据
+        getAnalysisStatus(){
+            getVideoStatus(this.$route.query.id).then(res => {
+                console.log("res.data",res.data)
+                if(res.data.data.videoAnalysisStatus == '未分析'){
+                     this.disabledTrafficAnalysis= true
+                    //  this.videoUnityShow = false
+                     this.videoUnityShow = true
+                     this.analysisData()
+                }else if(res.data.data.videoAnalysisStatus == '分析中'){
+
+                }else if(res.data.data.videoAnalysisStatus == '已分析'){
+                    this.videoUnityShow = true
+                    this.videoAnalysisSta = res.data.data.videoAnalysisStatus
+                    this.analysisData()
+                }else if(res.data.data.trafficAnalysisStatus==''){
+
+                }else if(res.data.data.trafficAnalysisStatus==''){
+
+                }
+            });
+        },
         //分析视频按钮
         videoAnalysisBtn() {
             startVideoAnalysis(this.$route.query.id).then(res => {
                 //
+                if(res.data.msg=='请求成功'){
+                    this.$message({
+                            message: '启动成功',
+                            type: 'success'
+                        });
+                    if(this.videoAnalysisSta=='已分析'){
+
+                    }else if(this.videoAnalysisSta=='分析中'){
+                        this.description = '正在分析中'
+                        setTimeout(() => {
+                        this.getAnalysisStatus()
+                        }, 5000); 
+                    }else if(this.videoAnalysisSta=='未分析'){
+                        // setTimeout(() => {
+                        // this.getAnalysisStatus()
+                        // }, 5000); 
+                    }  
+                }   
             });
         },
         //交通分析
         trafficAnalysisBtn() {
             startTrafficAnalysis(this.$route.query.id).then(res => {
                 //
+                console.log("res.data",res.data.data)
+            });
+        },
+        //获取视频分析结果
+        analysisData(){
+             getAnalysisData(this.$route.query.id).then(res => {
+                console.log("res.data.data",res.data.data)
+                    this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1
+                    this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2
+                    this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath
+                    this.analysis.videoName = res.data.data.videoName
+                    this.analysis.videoPath = res.data.data.videoPath
+                    this.analysis.videoTotalFrames = res.data.data.videoTotalFrames
+                    this.analysis.videoType=this.$route.query.type
+                    
             });
         },
         //停止订阅mqtt
@@ -452,9 +511,14 @@ export default {
         realInfo(topic, message) {
             switch (topic) {
                 // 接收托片
-                case 'img0':
+                case 'img'+this.number:
-                case 'img1':
+                // case 'img1':
-                case 'img2':
+                // case 'img2':
+                // case 'img3':
+                // case 'img4':
+                // case 'img5':
+                // case 'img6':
+                // case 'img7':    
                     try {
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -469,9 +533,14 @@ export default {
                     } catch (error) {}
                     break;
                 // 树结构
-                case 'stream0':
+                case 'stream'+this.number:
-                case 'stream1':
+                // case 'stream1':
-                case 'stream2':
+                // case 'stream2':
+                // case 'stream3':
+                // case 'stream4':
+                // case 'stream5':
+                // case 'stream6':
+                // case 'stream7':
                     try {
                         const utf8decoder1 = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -481,10 +550,14 @@ export default {
                     } catch (error) {}
                     break;
                 // 控制台输出
-                case 'trajectory0':
+                case 'trajectory'+this.number:
-                case 'trajectory1':
+                // case 'trajectory1':
-                case 'trajectory2':
+                // case 'trajectory2':
-                case 'trajectory3':
+                // case 'trajectory3':
+                // case 'trajectory4':
+                // case 'trajectory5':
+                // case 'trajectory6':
+                // case 'trajectory7':    
                     try {
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -497,9 +570,14 @@ export default {
                     } catch (error) {}
                     break;
                 // 触发
-                case 'detection0':
+                case 'detection'+this.number:
-                case 'detection1':
+                // case 'detection1':
-                case 'detection2':
+                // case 'detection2':
+                // case 'detection3':
+                // case 'detection4':
+                // case 'detection5':
+                // case 'detection6':
+                // case 'detection7': 
                     try {
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -522,6 +600,17 @@ export default {
                         }
                     } catch (error) {}
                     break;
+                      case 'trigger'+this.$route.query.id:
+                    try {
+                        const utf8decoder = new TextDecoder();
+                        const u8arr = new Uint8Array(message);
+                        const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+                        var detId = [];
+                        const msgN = JSON.parse(temp);
+                         console.log("trigger_msgN",msgN)
+                       
+                    } catch (error) {}
+                    break;
             }
             this.receiveNews = '';
         },
@@ -539,6 +628,7 @@ export default {
         //初始化unity
         OnSceneN() {
             document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id));
+            document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
         },
         // //新增组件根据组件id获取单个组件数据
         getSingleComponentIdN(id, type, name) {
@@ -556,11 +646,21 @@ export default {
                     if (res.data.data.company != '') {
                         this.componentForm.company = res.data.data.company;
                     }
-                    if (res.data.data.timeMode != '') {
+                    
-                        this.componentForm.timeMode = res.data.data.timeMode;
-                    }
                     // this.componentForm.componentName = res.data.data.componentName+'-'+type
                     this.componentForm.componentName = res.data.data.componentName;
+                    if (res.data.data.timeMode != '') {
+                        this.componentForm.timeMode = res.data.data.timeMode;
+                    }else{
+                        console.log("this.componentForm.timeMode",this.componentForm.timeMode);
+                        console.log("this.componentForm.componentType",this.componentForm.componentType);
+                        if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
+                            console.log("this.componentForm.timeMode",this.componentForm.timeMode);
+                            this.componentForm.timeMode = '周期统计'
+                        }else{
+                            this.componentForm.timeMode = '触发'
+                        }
+                    }
                     this.componentForm.componentParameterId = res.data.data.componentParameterId;
                     this.componentForm.cycleInterval = res.data.data.cycleInterval;
                     this.componentForm.startSectionIds = res.data.data.startSectionIds;
@@ -658,6 +758,12 @@ export default {
                         }
                         if (res.data.data.timeMode != '') {
                             this.componentForm.timeMode = res.data.data.timeMode;
+                        }else{
+                        if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
+                            this.componentForm.timeMode = '周期统计'
+                        }else{
+                            this.componentForm.timeMode = '触发'
+                        }
                         }
                         // this.componentForm.componentName = res.data.data.componentName+'-'+type
                         this.componentForm.componentName = res.data.data.componentName;
@@ -812,6 +918,15 @@ export default {
                             message: res.data.msg,
                             type: 'success'
                         });
+                        setTimeout(() => { 
+                            this.$message({
+                            type: "warning",
+                            message: "请点击交通分析，获取最新数据！",
+                            showClose: true,
+                            duration:0,
+                            });
+                        }, 5000);
+                       
                         document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
                         document
                             .getElementById('mapModule')
@@ -861,6 +976,14 @@ export default {
                             message: res.data.msg,
                             type: 'success'
                         });
+                        setTimeout(() => { 
+                            this.$message({
+                            type: "warning",
+                            message: "请点击交通分析，获取最新数据！",
+                            showClose: true,
+                            duration:0,
+                            });
+                        }, 5000);
                         console.log('startFigureName', this.startFigureName);
                         document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
                         console.log('this.numberNew', this.numberNew);
@@ -953,7 +1076,7 @@ export default {
             this.component = false;
             this.componentForm = {
                 //单位
-                company: '秒',
+                company: '',
                 componentName: '',
                 componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
                 //周期间隔
@@ -967,7 +1090,7 @@ export default {
                 presentationForm: '',
                 presentation: [],
                 startValue: '',
-                timeMode: '触发',
+                timeMode: '',
                 type: [],
                 startSection: [],
                 endSection: [],