Compare commits
2 Commits
0b389f16b0
...
c51b5056c7
| Author | SHA1 | Date |
|---|---|---|
 chengdandan
|
c51b5056c7 | |
|
chengdandan
|
b5546d412e |
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
http://172.16.1.168:5000
|
||||
http://127.0.0.1:5000
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export default {
|
|||
yData1: [],
|
||||
yData2: [],
|
||||
yData3: [],
|
||||
arrN:[],
|
||||
// series: []
|
||||
// triggerType:'触发时刻'
|
||||
myChart: null,
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -71,7 +71,7 @@ router.beforeEach((to, from, next) => {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
//MQTT订阅
|
||||
var currentTopics = null;
|
||||
var client = null;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
port: vm.mqttPort,
|
||||
// host: vm.mqttHost,
|
||||
// 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('连接成功')
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
||||
this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status
|
||||
}})
|
||||
console.log("id",id)
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
|
||||
>视频分析</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;
|
||||
this.number = this.$route.query.num;
|
||||
this.titName = this.$route.query.name;
|
||||
|
||||
// console.log("id",id)
|
||||
// console.log("num",num)
|
||||
// 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(() => {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "请点击交通分析，获取最新数据！",
|
||||
showClose: true,
|
||||
duration:0,
|
||||
});
|
||||
}, 3000);
|
||||
// setTimeout(() => {
|
||||
// this.$message({
|
||||
// type: "warning",
|
||||
// message: "请点击交通分析，获取最新数据！",
|
||||
// showClose: true,
|
||||
// duration:0,
|
||||
// });
|
||||
// }, 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',
|
||||
|
|
|
|||
|
|
@ -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/',
|
||||
|
|
|
|||
Loading…
Reference in New Issue