20230217

package-lock.json

@@ -7691,6 +7691,11 @@
         "url-parse": "^1.4.3"
       }
     },
+    "os": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/os/-/os-0.1.2.tgz",
+      "integrity": "sha512-ZoXJkvAnljwvc56MbvhtKVWmSkzV712k42Is2mA0+0KTSRakq5XXuXpjZjgAt9ctzl51ojhQWakQQpmOvXWfjQ=="
+    },
     "os-browserify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "mavon-editor": "^2.6.17",
     "mqtt": "^4.3.7",
     "node-sass": "^5.0.0",
+    "os": "^0.1.2",
     "sass-loader": "^10.1.0",
     "view-design": "^4.3.2",
     "vue": "^2.6.10",
@@ -26,7 +27,7 @@
     "vue-router": "^3.0.3",
     "vue-schart": "^2.0.0",
     "vuedraggable": "^2.17.0",
-    "vuex": "3.6.2"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",

public/VideoWeb/TemplateData/style.css

@@ -5,12 +5,21 @@ body { padding: 0; margin: 0 }
 #unity-canvas { background: #231F20 }
 .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 }
+/* #unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center } */
+#unity-logo { width: 154px; height: 130px; }
 #unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
 #unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
 #unity-footer { position: relative }
 .unity-mobile #unity-footer { display: none }
-#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
+/* #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center } */
+#unity-webgl-logo { float:left; width: 204px; height: 38px;}
 #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
 #unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
 #unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
+#black{
+    position: absolute;
+    left: 27%;
+    top: 35%;
+    width: 50%;
+    height: 20%; background: url('block.png') no-repeat center 
+}

public/VideoWeb/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Unity WebGL Player | Painter</title>
-    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
     <link rel="stylesheet" href="TemplateData/style.css">
   </head>
   <style>
@@ -29,6 +29,9 @@
         <!-- <div id="unity-fullscreen-button"></div> -->
         <!-- <div id="unity-build-title">Painter</div> -->
       </div>
+      <div id='black'>
+
+      </div>
     </div>
     <script>
       var container = document.querySelector("#unity-container");
@@ -37,7 +40,7 @@
       var progressBarFull = document.querySelector("#unity-progress-bar-full");
       var fullscreenButton = document.querySelector("#unity-fullscreen-button");
       var warningBanner = document.querySelector("#unity-warning");
-
+      var black = document.querySelector("#black");
       // Shows a temporary message banner/ribbon for a few seconds, or
       // a permanent error message on top of the canvas if type=='error'.
       // If type=='warning', a yellow highlight color is used.
@@ -114,9 +117,15 @@
       script.src = loaderUrl;
       script.onload = () => {
         createUnityInstance(canvas, config, (progress) => {
+           
           progressBarFull.style.width = 100 * progress + "%";
+          if(progressBarFull.style.width==90+"%"){
+            black.style.display = "block";
+          }
+          
         }).then((unityInstance) => {
             unity = unityInstance
+
           loadingBar.style.display = "none";
         //   fullscreenButton.onclick = () => {
         //     unityInstance.SetFullscreen(1);
@@ -128,14 +137,21 @@
       //unity初始化
       function OnSceneLoaded(){
         window.parent.OnScene();
-
+        black.style.display = "none";
       }
       //初始化传离线视频数据功能
       function lixianVideo(string){
-        console.log("string",string)
+        console.log("离线视频数据",string)
         if(unity!=null){
             unity.SendMessage('AAA','Unity_OfflineDataPrepare', string);
         }
+      }
+       //获取ip
+       function getIpData(string){
+        console.log("获取ip",string)
+        if(unity!=null){ 
+            unity.SendMessage('GameManager','SetIP', string);
+        }
       }
        //获取图像
        function getDestination(string){

public/analysisWeb/StreamingAssets/IPSettings.txt

@@ -1 +1 @@
-http://172.16.1.168:5000
+http://127.0.0.1:5000

public/analysisWeb/TemplateData/style.css

@@ -10,7 +10,8 @@ body { padding: 0; margin: 0 }
 #unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
 #unity-footer { position: relative }
 .unity-mobile #unity-footer { display: none }
-#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
+/* #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center } */
+#unity-webgl-logo { float:left; width: 204px; height: 38px; }
 #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
 #unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
 #unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

public/analysisWeb/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Unity WebGL Player | Painter</title>
-    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
     <link rel="stylesheet" href="TemplateData/style.css">
     <style>
       body,html{

src/components/chart/lineChart.vue

@@ -42,6 +42,7 @@ export default {
             yData1: [],
             yData2: [],
             yData3: [],
+            arrN:[],
             // series: []
             // triggerType:'触发时刻'
             myChart: null,

src/components/target/typeChart.vue

@@ -177,6 +177,7 @@ export default {
         // 监听触发数据
         dataArr: {
             handler(newVal) {
+                console.log("类型total",newVal)
                 this.total = 0
                 if (this.title == '类型') {
                     if (newVal && newVal[newVal.length - 1] != undefined) {

src/config/apiurl.js

@@ -1,4 +1,4 @@
-
+var ipUurl = window.location.host.split(":")[0];
 export default {
 //   dataUrl: "http://172.16.1.22:8080/api/AddShipjk",
 //   getSpareElementOrder: "http://172.16.1.22:8080/api/Upload",
@@ -9,6 +9,8 @@ export default {
 //   editFigure: "http://172.16.1.22:8080/api/EditTuxmc",
 //   //编辑保存组件弹窗传参
 //   editComponent: "http://172.16.1.22:8080/api/SetMonqjkzjcs", 
+
+
 dataUrl: "http://172.16.1.168:5000/api/AddShipjk",
 getSpareElementOrder: "http://172.16.1.168:5000/api/Upload",
 postSetQuanjsz: "http://172.16.1.168:5000/api/SetQuanjsz",
@@ -18,4 +20,14 @@ addFigure: "http://172.16.1.168:5000/api/AddJianktx",
 editFigure: "http://172.16.1.168:5000/api/EditTuxmc",
 //编辑保存组件弹窗传参
 editComponent: "http://172.16.1.168:5000/api/SetMonqjkzjcs", 
+// `http://${ipUurl}:5000/api/AddShipjk`
+// dataUrl: `http://${ipUurl}:5000/api/AddShipjk`,
+// getSpareElementOrder: `http://${ipUurl}:5000/api/Upload`,
+// postSetQuanjsz: `http://${ipUurl}:5000/api/SetQuanjsz`,
+// //新增图形接口
+// addFigure: `http://${ipUurl}:5000/api/AddJianktx`, 
+// //编辑图形名称
+// editFigure: `http://${ipUurl}:5000/api/EditTuxmc`,
+// //编辑保存组件弹窗传参
+// editComponent: `http://${ipUurl}:5000/api/SetMonqjkzjcs`, 
 };

src/config/index.js

@@ -0,0 +1,25 @@
+const os = require('os');
+  
+function getNetworkIp() {
+    let needHost = ''; // 打开的host
+    try {
+        // 获得网络接口列表
+        let network = os.networkInterfaces();
+    // console.log("network",network)
+        for (let dev in network) {
+       
+            let iface = network[dev];
+            for (let i = 0; i < iface.length; i++) {
+                let alias = iface[i];
+                if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+                    needHost = alias.address;
+          // console.log("alias.address",alias.address)
+                }
+        // console.log("alias",alias)
+            }
+        }
+    } catch (e) {
+        needHost = 'localhost';
+    }
+    return needHost;
+}

src/main.js

@@ -71,7 +71,7 @@ router.beforeEach((to, from, next) => {
         }
     }
 });
-
+// 
 //MQTT订阅
 var currentTopics = null;
 var client = null;

src/utils/ip.js

@@ -0,0 +1,45 @@
+import { reactive, toRefs ,onMounted} from "vue"
+import { reactive, onMounted} from "vue"
+const state = reactive({
+  ip:'',
+})
+// const state = {
+//     ip:'',
+//   }
+
+  //获取ip 
+  getUserIP((ip) => {
+    state.ip=ip
+      console.log(ip)
+      console.log(state.ip)
+  });
+// })
+//获取用户本地ip的方法
+const getUserIP= (onNewIP)=> {
+  let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+  let pc = new MyPeerConnection({
+    iceServers: []
+  });
+  let noop = () => {
+  };
+  let localIPs = {};
+  let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
+  let iterateIP = (ip) => {
+    if (!localIPs[ip]) onNewIP(ip);
+    localIPs[ip] = true;
+  };
+  pc.createDataChannel('');
+  pc.createOffer().then((sdp) => {
+    sdp.sdp.split('\n').forEach(function (line) {
+      if (line.indexOf('candidate') < 0) return;
+      line.match(ipRegex).forEach(iterateIP);
+    });
+    pc.setLocalDescription(sdp, noop, noop);
+  }).catch((reason) => {
+  });
+  pc.onicecandidate = (ice) => {
+    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
+    ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
+  };
+}
+

src/utils/mqttConfig.js

@@ -1,18 +1,21 @@
 import mqtt from "mqtt";
 import Vue from 'vue'
 var vm = new Vue();
-
+var ip = window.location.host.split(":")[0];
+console.log("ip",ip)
 class mqttHandle {
     constructor() {
         var newName = localStorage.getItem('ms_username')
         this.connect = {
-            host: vm.mqttHost,
+            // host: vm.mqttHost,
-            port: vm.mqttPort,
+            // port: vm.mqttPort,
             endpoint: "/mqtt",
             clean: true, // 保留会话
             cleanSession: true,
             connectTimeout: 7000, // 超时时间
             reconnectPeriod: 7000, // 重连时间间隔
+            host:ip,
+            port: '10087',
             // 认证信息
             // clientId: Number(new Date()).toString(),
             clientId: newName,
@@ -32,8 +35,10 @@ class mqttHandle {
     createConnect(onConnected) {
         //配置链接
         const { host, port, endpoint, ...options } = this.connect;
+        console.log("this.connect.host",this.connect.host)
         // const connectUrl = `ws://${this.connect.host}:${this.connect.port}${this.connect.endpoint}`;
         const connectUrl = 'ws://172.16.1.168:10087/';
+        // const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
         // if (!client.connected) {
         //     client.on('connect', function () {
         //         console.log('连接成功')

src/views/AnalysisMain.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="content-box">
     <!-- v-if="videoTypeShow" -->
-   <div class="videoTypeBox"  v-if="videoTypeShow">
+   <div class="videoTypeBox" >
     <el-form :inline="true" :model="videoTypeForm" class="demo-form-inline" >
      <el-form-item label="视频源类型：" >
             <el-radio-group v-model="videoTypeForm.videoType">
@@ -25,9 +25,12 @@
         </div>
         <div class="statusN">
              <img src="@/assets/img/AnalysisMain/status.png" alt="" >
-             <span class="statusName">{{ item.status }}</span>
+             <span class="statusName" v-if="item.type=='实时视频'">{{ item.status }}</span>
+             <span class="statusName" v-if="item.type=='离线视频'">{{ item.videoAnalysisStatus }}</span>
+        </div>
+        <div class="typeRight">
+            <el-button type="primary" icon="el-icon-refresh-right" @click="openRight(item)" v-if="item.type=='离线视频'&&item.videoAnalysisStatus=='未分析'"></el-button>
         </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,item.status)">
       <div class="bot">
@@ -43,7 +46,9 @@
         
         <div class="st">
              <!-- <span>{{ item.status }}</span> -->
+             
              <el-button type="primary" icon="el-icon-delete" @click="open(item.id)"></el-button>
+             
         </div>
       </div>
     </el-card>
@@ -63,7 +68,7 @@
 <div class="btn" v-if="videoTypeForm.videoType=='实时视频'">
     
     <el-button  type="primary" @click="applicationBtn">保存</el-button>
-    <el-button  type="primary" @click="stopAlgorithmBtn">关闭程序</el-button>
+    <!-- <el-button  type="primary" @click="stopAlgorithmBtn">关闭程序</el-button> -->
     </div>
   </div>
   <!-- <div id="dialog" class="margin-top: 0px !important;"> -->
@@ -93,6 +98,17 @@
         <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
          <input type="file" id="fileExport" @change="handleFileChange" ref="inputer">
          <el-button size="small" type="primary" @click="load">点击上传</el-button>
+        
+         <!-- <el-upload
+         class="upload-demo"
+        action="#"
+        :file-list="fileList" 
+        @change="handleFileChange"
+        multiple >
+            <el-button type="file" id="fileExport"  ref="inputer">选取文件</el-button>
+             <el-button style="margin-left: 10px;" size="small" type="success" @click="load">点击上传</el-button>
+              <div slot="tip" class="el-upload__tip">上传文件名称请勿空格！</div>
+          </el-upload> -->
     </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
@@ -109,12 +125,13 @@
 
 <script>
 import editModal from "@/views/bounced/maintenanceRemind";
-import {getGetShipjk,getDeleteShipjk,getApplication,getStopAlgorithm} from "../api/index";
+import {getGetShipjk,getDeleteShipjk,getApplication,getStopAlgorithm,startVideoAnalysis} from "../api/index";
 import  serverUrl from "../config/apiurl.js"
 import axios from 'axios'
 import mqttConfig from "@/utils/mqttConfig.js";
 var mqtt; //mqtt 处理对象（全局变量）
 var client;
+const os = require('os');
 export default {
   data(){
     return{
@@ -142,13 +159,19 @@ export default {
             videoType:'实时视频'
         },
         videoList:[],
-         fullscreenLoading: false
+         fullscreenLoading: false,
+         ip:'',
+
     }
   },
    mounted() {
     console.log("dialogFormVisible",this.dialogFormVisible)
+    //  console.log("11111111", this.getIPAddress())
+  
+
     this.getVideoList()
     this.createMqtt()
+    
   },
    //离开当前页面后执行
 destroyed: function () {
@@ -161,6 +184,7 @@ destroyed: function () {
       //创建链接，接收数据
       console.log(window.PubScribe,'********************');
       window.PubScribe(null,-1,this.realInfo);
+      
       /*mqtt = new mqttConfig(this.topicSends);
       client = mqtt.createConnect();
     // client.subscribe(,, { qos: 0 })
@@ -223,7 +247,6 @@ destroyed: function () {
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
             //   var newArr = []
             //msg为转换后的JSON数据
-            console.log("msg",msg)
              if(msg.rate=='low'){
                 //    console.log("msg", msg)  
                 if(this.videoList.length!=0){
@@ -248,7 +271,7 @@ destroyed: function () {
               const u8arr = new Uint8Array(message)
               const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
               const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-              console.log("hert", msg)   //msg为转换后的JSON数据
+            //   console.log("hert", msg)   //msg为转换后的JSON数据
               if(msg==''){
 
               }
@@ -298,6 +321,32 @@ destroyed: function () {
           });          
         });
       },
+      openRight(item){
+        console.log("item",item)
+        startVideoAnalysis(item.id).then(res => {
+                //
+                if(res.data.msg=='请求成功'){
+                    this.$message({
+                            message: '启动成功',
+                            type: 'success'
+                        });
+                        //  setTimeout(() => {
+                        // this.getAnalysisStatus()
+                        // }, 5000);
+                    // if(this.videoAnalysisSta=='已分析'){
+
+                    // }else if(this.videoAnalysisSta=='分析中'){
+                    //     this.description = '正在分析中'
+                    //     setTimeout(() => {
+                    //     this.getAnalysisStatus()
+                    //     }, 5000); 
+                    // }else if(this.videoAnalysisSta=='未分析'){
+                    // }  
+                }   
+            });
+      },
+      //
+
      commit(form){
         console.log("form",form)
         let formData = new FormData();
@@ -321,6 +370,18 @@ destroyed: function () {
                   type: 'success'
                 });
                 this.getVideoList()
+                // if(this.videoTypeForm.videoType=='离线视频'){
+                //     startVideoAnalysis(res.data.data).then(res => {
+                //         if(res.data.msg=='请求成功'){
+                //         this.$message({
+                //             message: '启动成功',
+                //             type: 'success'
+                //         }); 
+                //         }   
+                //     });
+                // }else{
+
+                // }
                }else{
                  this.$message({
                   message: res.data.msg,
@@ -334,6 +395,7 @@ destroyed: function () {
     
      },
      handleFileChange(e) {
+        console.log("e",e)
                     let inputDOM = this.$refs.inputer;
                     this.file = inputDOM.files[0];// 通过DOM取文件数据
 
@@ -381,7 +443,7 @@ destroyed: function () {
                 },
                 load() {
                     let size = this.file.size;//文件大小
-
+                    // this.fileList = []
                     let maxZrea = 8;              //设置每个分区大小 MB
                     let bufferSize = maxZrea * (1024 * 1024);
                     let fileStart = 0;
@@ -428,6 +490,7 @@ destroyed: function () {
                                   type: 'success'
                                 });
                                 this.form.videoStreamAddress=r.data.data
+                                this.fileList.push(r.data.data)
                                 }
                             }
                         }).catch(e => {
@@ -436,9 +499,12 @@ destroyed: function () {
                     }
                 },
      goToPage(id,num,name,type,status) {
-
+        console.log("id",id)
-        this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status
+        console.log("num",num)
-}})
+        console.log("name",name)
+        console.log("type",type)
+        console.log("status",status)
+        this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status}})
         
     },
      //获取视频数据
@@ -458,6 +524,8 @@ destroyed: function () {
                               videoStreamAddress:item.videoStreamAddress,
                               videoPath:item.videoPath,
                               img: require('@/assets/img/AnalysisMain/img1.png'),
+                              trafficAnalysisStatus:item.trafficAnalysisStatus,
+                            videoAnalysisStatus:item.videoAnalysisStatus,
                             });
                         }) 
                 this.videoList=arr
@@ -563,6 +631,12 @@ destroyed: function () {
     top:0px;
     z-index: 98;
 }
+.typeRight{
+     position: absolute;
+    right: 10px;
+    top: 5px;
+    z-index: 98;
+}
 .del{
     position: absolute;
     right: 0px;

src/views/bounced/dataBoard.vue

@@ -72,8 +72,15 @@ export default {
             default() {
                 return [];
             }
+        },
+        //周期统计
+        cycleStatistics: {
+            type: Array,
+            default() {
+                return [];
             }
         },
+    },
     data() {
         return {
             title1: '01断面',
@@ -445,7 +452,6 @@ export default {
                             if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
                                 if (ele.cycleTimeData.length == 10) {
                                     ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)
-
                                 } else {
                                     ele.cycleTimeData.unshift(item)
                                 }

src/views/index.vue

@@ -20,7 +20,7 @@
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="数据看板" name="second">
-                    <dataBoard :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData" :cycleTimeData='cycleTimeData'></dataBoard>
+                    <dataBoard :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData" :cycleTimeData='cycleTimeData' :cycleStatistics='cycleStatistics'></dataBoard>
                 </el-tab-pane>
                 <el-tab-pane label="分析配置" name="third">
                     <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@@ -30,8 +30,8 @@
                 </el-tab-pane>
                 <el-tab-pane label="存储" name="five">存储</el-tab-pane>
             </el-tabs>
-            <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
+            <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
-                >视频分析</el-button>
+                >视频分析</el-button> -->
             <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn" v-if="trafficAnalysisShow" :disabled='disabledTrafficAnalysis'
                 >交通分析</el-button>
         </div>
@@ -85,7 +85,7 @@
                     <el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
                 </el-form-item>
                  <el-form-item label="流量类型：" v-if="componentForm.componentType=='流量'">
-                    <el-radio-group v-model="componentForm.flow" >
+                    <el-radio-group v-model="componentForm.FlowType" >
                       <el-radio label="出流"></el-radio>
                       <el-radio label="入流"></el-radio>
                     </el-radio-group>
@@ -276,7 +276,7 @@ export default {
                 componentType: '',
                 typeFiltering: '',
                 typeData: [],
-                flow:'出流'
+                flowType:'出流'
 
             },
             // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
@@ -331,6 +331,8 @@ export default {
             triggerListData:[],
             //周期时刻
             cycleTimeData:[],
+            //周期统计
+            cycleStatistics:[],
             //视频类型
             videoType: '',
             videoAnalysisShow: false,
@@ -347,7 +349,8 @@ export default {
                 videoTotalFrames:'',
                 videoType:'实时视频'
             },
-            description:'请等待排队'
+            description:'请等待排队',
+            ipData:''
         };
     },
 
@@ -358,23 +361,31 @@ export default {
         //client.end();
     },
     created() {
+           window.OnScene = this.OnSceneN;
+          this.getAllSectionalData(this.$route.query.id);
+        this.VideoId = this.$route.query.id;
+        this.number = this.$route.query.num;
+        this.titName = this.$route.query.name;
         window.getFigure = this.getFigureD;
         window.getModifyTheName = this.getModifyTheNameN;
         // window.getModifyTheName = this.getModifyTheNameN;
         window.getSingleComponentId = this.getSingleComponentIdN;
         window.getSimulationAreaEdit = this.getSimulationAreaEdit;
-        window.OnScene = this.OnSceneN;
+     
         window.delSuccess= this.delSuccess;
-        this.getAllSectionalData(this.$route.query.id);
+        
-        this.VideoId = this.$route.query.id;
+        //  console.log("id",id)
-        this.number = this.$route.query.num;
+        // console.log("num",num)
-        this.titName = this.$route.query.name;
+        // console.log("name",name)
+        // console.log("type",type)
+        // console.log("status",status)
         // this.videoType = this.$route.query.type;
         if (this.$route.query.type == '实时视频') {
             this.videoAnalysisShow = false;
             this.trafficAnalysisShow = false;
             
             this.createMqtt();
+             
             // document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
         } else if (this.$route.query.type == '离线视频'){
             this.videoAnalysisShow = true;
@@ -396,7 +407,7 @@ export default {
         /** 创建mqtt */
         createMqtt() {
             //创建链接，接收数据
-            this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id,'cycle_time-'+ this.$route.query.id];
+            this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id,'cycle_time-'+ this.$route.query.id,'cycle_statistics-'+ this.$route.query.id];
             window.PubScribe(this.topicSends, this.number, this.realInfo);
             //   mqtt = mqttConfig;
             /*mqtt = new mqttConfig(this.topicSends);
@@ -602,6 +613,18 @@ export default {
                         this.cycleTimeData = msgN;
                     } catch (error) {}
                     break;
+                    case 'cycle_statistics-'+this.$route.query.id:
+                        try {
+                            //  console.log("trigger_msgN",message)
+                        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)
+                        this.cycleStatistics = msgN;
+                    } catch (error) {}
+                    break;
             }
             this.receiveNews = '';
         },
@@ -618,6 +641,10 @@ export default {
         },
         //初始化unity
         OnSceneN() {
+            var ip = window.location.host;
+        this.ipData = "http://"+ip.split(":")[0]+':5000'
+        // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
+         document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
         document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id));
         document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));            
         },
@@ -665,6 +692,7 @@ export default {
                     this.componentForm.componentParameterId = res.data.data.componentParameterId;
                     this.componentForm.cycleInterval = res.data.data.cycleInterval;
                     this.componentForm.startSectionIds = res.data.data.startSectionIds;
+                    this.componentForm.flowType = res.data.data.flowType;
                     this.componentForm.startSectionNames = res.data.data.startSectionNames;
                     this.componentForm.endSectionIds = res.data.data.endSectionIds;
                     this.componentForm.endSectionNames = res.data.data.endSectionNames;
@@ -914,14 +942,14 @@ export default {
                             message: res.data.msg,
                             type: 'success'
                         });
-                        setTimeout(() => { 
+                        // setTimeout(() => { 
-                            this.$message({
+                        //     this.$message({
-                            type: "warning",
+                        //     type: "warning",
-                            message: "请点击交通分析，获取最新数据！",
+                        //     message: "请点击交通分析，获取最新数据！",
-                            showClose: true,
+                        //     showClose: true,
-                            duration:0,
+                        //     duration:0,
-                            });
+                        //     });
-                        }, 3000);
+                        // }, 3000);
                        
                         document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
                         document
@@ -1017,6 +1045,8 @@ export default {
                 formData.append('endValue', componentForm.endValue);
                 formData.append('startValue', componentForm.startValue);
                 formData.append('timeMode', componentForm.timeMode);
+               
+                
                 formData.append('presentationForm', '矩阵图');
             } else if (componentForm.componentType == '类型') {
                 //名称
@@ -1043,6 +1073,7 @@ export default {
                 formData.append('startValue', componentForm.startValue);
                 formData.append('timeMode', componentForm.timeMode);
                 formData.append('presentationForm', componentForm.presentationForm);
+                 formData.append('FlowType', componentForm.flowType);
             }
             axios({
                 method: 'post',

vue.config.js

@@ -16,6 +16,22 @@
 //   //   }
 //   // }
 // }
+
+const os = require('os');
+///获取本机ip///
+function getIPAdress() {
+var interfaces = os.networkInterfaces();
+for (var devName in interfaces) {
+var iface = interfaces[devName];
+for (var i = 0; i < iface.length; i++) {
+var alias = iface[i];
+if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+return alias.address;
+}
+}
+}
+}
+const myHost = getIPAdress();
 module.exports = {
     // 打包文件配置
     publicPath: "/",
@@ -29,29 +45,21 @@ module.exports = {
         // hotOnly: true,
         // open: false, // npm run serve后自动打开页面
         // https: false, // https:{type:Boolean}
-        // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
+        // host: getNetworkIp(), // 匹配本机IP地址(默认是0.0.0.0)
         // port: 8989, // 开发服务器运行端口号
+        host: myHost,
         proxy: {
             '/api': { //代理的名字
                 target: 'http://172.16.1.168:5000/api/', 
                 // target: 'http://172.16.1.178:5001/',
                 // target: 'http://ht.api.umayle.com:2022', 
                 ws: true,
+                // host:getNetworkIp(),
                 changeOrigin: true,
                 pathRewrite:{
                     '^/api':'',
                 }
             },
-            // '/api': { //代理的名字
-            //     target: 'http://172.16.1.168:5000/', 
-            //     // target: 'http://172.16.1.178:5001/',
-            //     // target: 'http://ht.api.umayle.com:2022', 
-            //     ws: true,
-            //     changeOrigin: true,
-            //     pathRewrite:{
-            //         '^/api':'',
-            //     }
-            // },
             // '/aps': { //代理的名字
             //     target: 'http://220.163.114.157:5011/', 
             //     // target: 'http://172.16.1.178:5001/',