lixiaobang
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: lixiaobang:master
Branches Tags
lixiaobang:master
lixiaobang:20231109
..
compare: lixiaobang:20231109
Branches Tags
lixiaobang:master
lixiaobang:20231109

No commits in common. "master" and "20231109" have entirely different histories.
master ... 20231109

56 changed files with 6650 additions and 15374 deletions
Show Stats Expand all files Collapse all files

1
.env.dev
View File

@ -1 +0,0 @@
NODE_ENV = "development"

1
.env.pro
View File

@ -1 +0,0 @@
NODE_ENV = "production"

3
package.json
View File

@ -31,8 +31,7 @@
"vue-router": "^3.0.3", "vue-router": "^3.0.3",
"vue-schart": "^2.0.0", "vue-schart": "^2.0.0",
"vuedraggable": "^2.17.0", "vuedraggable": "^2.17.0",
"vuex": "^3.6.2", "vuex": "^3.6.2"
"lodash": "^4.17.15"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.9.0", "@vue/cli-plugin-babel": "^3.9.0",

BIN
public/VideoWeb/Build/APP.data.unityweb
View File

Binary file not shown.

BIN
public/VideoWeb/Build/APP.framework.js.unityweb
View File

Binary file not shown.

BIN
public/VideoWeb/Build/APP.wasm.unityweb
View File

Binary file not shown.

2
public/VideoWeb/StreamingAssets/IPSettings.txt
View File

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

518
public/VideoWeb/index.html
View File

@ -1,353 +1,327 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head>
<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="stylesheet" href="TemplateData/style.css">
</head>
<style>
body,html{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="unity-container" style="height: 100%;" class="unity-desktop">
<canvas id="unity-canvas" width=1600 height=900></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<!-- <div id="unity-webgl-logo"></div> -->
<!-- <div id="unity-fullscreen-button"></div> -->
<!-- <div id="unity-build-title">Painter</div> -->
</div>
<div id='black'>
<head>
<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="stylesheet" href="TemplateData/style.css">
</head>
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="unity-container" style="height: 100%;" class="unity-desktop">
<canvas id="unity-canvas" width=1600 height=900></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div> </div>
</div> </div>
<div id="unity-warning"> </div> <script>
<div id="unity-footer"> var container = document.querySelector("#unity-container");
<!-- <div id="unity-webgl-logo"></div> --> var canvas = document.querySelector("#unity-canvas");
<!-- <div id="unity-fullscreen-button"></div> --> var loadingBar = document.querySelector("#unity-loading-bar");
<!-- <div id="unity-build-title">Painter</div> --> var progressBarFull = document.querySelector("#unity-progress-bar-full");
</div> // var fullscreenButton = document.querySelector("#unity-fullscreen-button");
<div id='black'> var warningBanner = document.querySelector("#unity-warning");
var black = document.querySelector("#black");
</div> // Shows a temporary message banner/ribbon for a few seconds, or
</div> // a permanent error message on top of the canvas if type=='error'.
<script> // If type=='warning', a yellow highlight color is used.
var container = document.querySelector("#unity-container"); // Modify or remove this function to customize the visually presented
var canvas = document.querySelector("#unity-canvas"); // way that non-critical warnings and error messages are presented to the
var loadingBar = document.querySelector("#unity-loading-bar"); // user.
var progressBarFull = document.querySelector("#unity-progress-bar-full"); function unityShowBanner(msg, type) {
// var fullscreenButton = document.querySelector("#unity-fullscreen-button"); function updateBannerVisibility() {
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.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
if (warningBanner) {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
} }
}
if (warningBanner) {
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = msg; div.innerHTML = msg;
warningBanner.appendChild(div); warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;'; if (type == 'error') div.style = 'background: red; padding: 10px;';
else { else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function () { setTimeout(function() {
warningBanner.removeChild(div); warningBanner.removeChild(div);
updateBannerVisibility(); updateBannerVisibility();
}, 5000); }, 5000);
} }
updateBannerVisibility();
} }
updateBannerVisibility();
}
var buildUrl = "Build"; var buildUrl = "Build";
var loaderUrl = buildUrl + "/APP.loader.js"; var loaderUrl = buildUrl + "/APP.loader.js";
var config = { var config = {
dataUrl: buildUrl + "/APP.data.unityweb", dataUrl: buildUrl + "/APP.data.unityweb",
frameworkUrl: buildUrl + "/APP.framework.js.unityweb", frameworkUrl: buildUrl + "/APP.framework.js.unityweb",
codeUrl: buildUrl + "/APP.wasm.unityweb", codeUrl: buildUrl + "/APP.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets", streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany", companyName: "DefaultCompany",
productName: "Painter", productName: "Painter",
productVersion: "0.1", productVersion: "0.1",
showBanner: unityShowBanner, showBanner: unityShowBanner,
}; };
// By default Unity keeps WebGL canvas render target size matched with // By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio) // the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from // Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up // happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself. // the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false; // config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas: // Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta'); var meta = document.createElement('meta');
meta.name = 'viewport'; meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'; meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta); document.getElementsByTagName('head')[0].appendChild(meta);
if (container) {
container.className = "unity-mobile"; container.className = "unity-mobile";
}
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
if (canvas) {
canvas.style.width = window.innerWidth + 'px'; canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px'; canvas.style.height = window.innerHeight + 'px';
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
// canvas.style.width = "960px";
// canvas.style.height = "600px";
// canvas.style.width = window.innerWidth + 'px';
// canvas.style.height = window.innerHeight + 'px';
} }
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
// canvas.style.width = "960px";
// canvas.style.height = "600px";
// canvas.style.width = window.innerWidth + 'px';
// canvas.style.height = window.innerHeight + 'px';
}
if (loadingBar) {
loadingBar.style.display = "block"; loadingBar.style.display = "block";
} var unity;
var script = document.createElement("script");
var unity; script.src = loaderUrl;
var script = document.createElement("script"); script.onload = () => {
script.src = loaderUrl;
script.onload = () => {
if (canvas) {
createUnityInstance(canvas, config, (progress) => { createUnityInstance(canvas, config, (progress) => {
if (progressBarFull) {
progressBarFull.style.width = 100 * progress + "%"; progressBarFull.style.width = 100 * progress + "%";
if (progressBarFull.style.width == 90 + "%") { if(progressBarFull.style.width==90+"%"){
if (black) { black.style.display = "block";
black.style.display = "block";
}
}
} }
}).then((unityInstance) => { }).then((unityInstance) => {
unity = unityInstance unity = unityInstance
if (loadingBar) {
loadingBar.style.display = "none";
}
// fullscreenButton.onclick = () => {
// unityInstance.SetFullscreen(1);
// };
}).catch((message) => {
alert('createUnityInstance' + message);
});
}
};
//unity初始化
function OnSceneLoaded() {
if (black) {
black.style.display = "none";
}
window.parent.OnScene();
} loadingBar.style.display = "none";
//初始化传离线视频数据功能 // fullscreenButton.onclick = () => {
function lixianVideo(string) { // unityInstance.SetFullscreen(1);
console.log("离线视频数据", string) // };
if (unity != null) { }).catch((message) => {
unity.SendMessage('AAA', 'Unity_OfflineDataPrepare', string); alert(message);
});
};
//unity初始化
function OnSceneLoaded(){
black.style.display = "none";
window.parent.OnScene();
} }
} //初始化传离线视频数据功能
//获取ip function lixianVideo(string){
function getIpData(string) { console.log("离线视频数据",string)
console.log("获取ip", string) if(unity!=null){
if (unity != null) { unity.SendMessage('AAA','Unity_OfflineDataPrepare', string);
unity.SendMessage('GameManager', 'SetIP', string); }
} }
} //获取ip
//获取图像 function getIpData(string){
function getDestination(string) { console.log("获取ip",string)
if (unity != null) { if(unity!=null){
unity.SendMessage('AAA', 'SendImage', string); unity.SendMessage('GameManager','SetIP', string);
}
} }
} //获取图像
function getDestination(string){
if(unity!=null){
unity.SendMessage('AAA', 'SendImage', string);
}
}
//获取图像id等数据 //获取图像id等数据
function getData(string) { function getData(string){
// console.log("string",string) // console.log("string",string)
if (unity != null) { if(unity!=null){
unity.SendMessage('AAA', 'SendStream', string); unity.SendMessage('AAA', 'SendStream', string);
} }
} }
//获取轨迹方法 //获取轨迹方法
function getGuiJi(string) { function getGuiJi(string){
if (unity != null) { if(unity!=null){
unity.SendMessage('AAA', 'SendJT_GuiJi', string); unity.SendMessage('AAA', 'SendJT_GuiJi', string);
} }
} }
//传触发数据 //传触发数据
function getChuFa(string) { function getChuFa(string){
// console.log("string",string) // console.log("string",string)
if (unity != null) { if(unity!=null){
unity.SendMessage('AAA', 'SendJT_JianCeQi', string); unity.SendMessage('AAA', 'SendJT_JianCeQi', string);
} }
} }
//获取图形数据 //获取图形数据
function getfigureData(string, string1, string2) { function getfigureData(string,string1,string2){
// console.log("图形类型",string) // console.log("图形类型",string)
// console.log("图形名称",string1) // console.log("图形名称",string1)
// console.log("图形位置",string2) // console.log("图形位置",string2)
// numberNew 判断2-模拟区，1-画布区 // numberNew 判断2-模拟区，1-画布区
window.parent.getFigure(string, string1, string2, 1); window.parent.getFigure(string,string1,string2,1);
}
//获取分析状态
function Status(jsonString) {
window.parent.getStatus(jsonString);
} }
//新增图形传图形id //新增图形传图形id
function postFigureId(string) { function postFigureId(string){
console.log("图形id", string) console.log("图形id",string)
// if(unity!=null){ // if(unity!=null){
unity.SendMessage("GameManager", 'ReceivingPatternId', string); unity.SendMessage("GameManager",'ReceivingPatternId', string);
//打开新增图形命名弹窗 //打开新增图形命名弹窗
// } // }
} }
//打开修改图形名称弹框 //打开修改图形名称弹框
function modifyTheName(data) { function modifyTheName(data){
console.log("图形名称弹框", data) console.log("图形名称弹框",data)
window.parent.getModifyTheName(data, 1); window.parent.getModifyTheName(data,1);
} }
//传单个视频id获取到单个视频配置下的所有图形 //传单个视频id获取到单个视频配置下的所有图形
function postVideoId(data) { function postVideoId(data){
console.log("所有图形id", data) console.log("所有图形id",data)
if (unity != null) { if(unity!=null){
unity.SendMessage("GameManager", 'ReceptionVideoId', data); unity.SendMessage("GameManager",'ReceptionVideoId', data);
} }
} }
//传修改好的名称 //传修改好的名称
function postFigureName(data) { function postFigureName(data){
console.log("修改好的名称", data) console.log("修改好的名称",data)
if (unity != null) { if(unity!=null){
unity.SendMessage("GameManager", 'ReceiveModifiedName', data); unity.SendMessage("GameManager",'ReceiveModifiedName', data);
} }
} }
//新增图形点击取消 //新增图形点击取消
function delFigure() { function delFigure(){
if (unity != null) { if(unity!=null){
unity.SendMessage("GameManager", 'DestoryMyLine'); unity.SendMessage("GameManager",'DestoryMyLine');
} }
} }
//获取组件id //获取组件id
function getComponentId(id, type, name) { function getComponentId(id,type,name){
console.log("id", id) console.log("id",id)
console.log("type", type) console.log("type",type)
console.log("name", name) console.log("name",name)
window.parent.getSingleComponentId(id, type, name); window.parent.getSingleComponentId(id,type,name);
// window.parent.getSingleComponentId('a840492e26354c0a851fecd675e9f59a'); // window.parent.getSingleComponentId('a840492e26354c0a851fecd675e9f59a');
} }
//退出编辑图形 //退出编辑图形
function closeEdit(data) { function closeEdit(data){
// type,id // type,id
// console.log("type",type) // console.log("type",type)
console.log("data", data) console.log("data",data)
if (unity != null) { if(unity!=null){
unity.SendMessage("GameManager", 'ExitEdit', data); unity.SendMessage("GameManager",'ExitEdit',data);
} }
} }
//检测器目标数量 //检测器目标数量
function getTargetNumber(string) { function getTargetNumber(string){
if (unity != null) { if(unity!=null){
unity.SendMessage('GameManager', 'UnityUpdateTargetNumber', string); unity.SendMessage('GameManager', 'UnityUpdateTargetNumber', string);
} }
} }
//编辑组件名称传名称 //编辑组件名称传名称
function editComponent(data) { function editComponent(data){
// type,id // type,id
console.log("data", data) console.log("data",data)
if (unity != null) { if(unity!=null){
unity.SendMessage("GameManager", 'Unity_UpdateInstanceName', data); unity.SendMessage("GameManager",'Unity_UpdateInstanceName',data);
} }
} }
//编辑模拟区域组件交互弹窗 //编辑模拟区域组件交互弹窗
function simulationAreaEdit(id, type, componentType, name) { function simulationAreaEdit(id,type,componentType,name){
console.log("id", id) console.log("id",id)
console.log("type", type) console.log("type",type)
console.log("组件类型", componentType) console.log("组件类型",componentType)
console.log("组件名称", name) console.log("组件名称",name)
window.parent.getSimulationAreaEdit(id, type, componentType, name, 2); window.parent.getSimulationAreaEdit(id,type,componentType,name,2);
} }
//获取左侧区域删除图形或断面成功后返回的数据 //获取左侧区域删除图形或断面成功后返回的数据
function getdeleData(data) { function getdeleData(data){
console.log("id", data) console.log("id",data)
if (data != null) { if(data != null){
window.parent.delSuccess() window.parent.delSuccess()
} }
} }
//新增获取颜色 //新增获取颜色
function addColor(string, string1) { function addColor(string,string1){
// console.log("i1111",string) // console.log("i1111",string)
// console.log("i2222",string1) // console.log("i2222",string1)
if (unity != null) { if(unity!=null){
unity.SendMessage("GameManager", 'Unity_AllGraphicsNotified'); unity.SendMessage("GameManager",'Unity_AllGraphicsNotified');
} }
} }
//控制角色权限管理 //控制角色权限管理
function getRoleStatus(roleStatus) { function getRoleStatus(roleStatus){
console.log(roleStatus, 'roleStatus') console.log(roleStatus,'roleStatus')
if (unity != null) { if(unity!=null){
unity.SendMessage("GameManager", 'Unity_Role_Privilege', roleStatus); unity.SendMessage("GameManager",'Unity_Role_Privilege',roleStatus);
} }
} }
//传参mqtt //传参mqtt
function ZhuanFaMQTT(topic, msg) { function ZhuanFaMQTT(topic,msg){
window.parent.getZhuanFaMQTT(topic, msg); window.parent.getZhuanFaMQTT(topic,msg);
// //
} }
//双击接口编辑 //双击接口编辑
function simulationAreaInterfaceEdit(data, data2, data3) { function simulationAreaInterfaceEdit(data,data2,data3){
console.log("simulationAreaInterfaceEdit", data) console.log("simulationAreaInterfaceEdit",data)
console.log("simulationAreaInterfaceEdit2", data2) console.log("simulationAreaInterfaceEdit2",data2)
console.log("simulationAreaInterfaceEdit3", data3) console.log("simulationAreaInterfaceEdit3",data3)
// if(data!=undefined){ // if(data!=undefined){
// window.parent.getZhuanFaMQTT(data,data2,data3); // window.parent.getZhuanFaMQTT(data,data2,data3);
// } // }
} }
//生成时调用 //生成时调用
function getInterfaceComponentId(data, data2, data3) { function getInterfaceComponentId(data,data2,data3){
console.log("getInterfaceComponentId", data) //接口组件id console.log("getInterfaceComponentId",data)//接口组件id
console.log("data2", data2) //组件id console.log("data2",data2)//组件id
console.log("data3", data3) //类型 console.log("data3",data3)//类型
if (data != undefined) { if(data!=undefined){
// window.parent.getZhuanFaMQTT(data,data2,data3); // window.parent.getZhuanFaMQTT(data,data2,data3);
} }
} }
function AddMonqjktx_Error(data){
function AddMonqjktx_Error(data) { console.log("AddMonqjktx_Error",data)
console.log("AddMonqjktx_Error", data) window.parent.AddMonqjktx_Error(data);
window.parent.AddMonqjktx_Error(data);
} }
document.body.appendChild(script); document.body.appendChild(script);
</script>
<style>
#unity-container.unity-desktop::-webkit-scrollbar {
display: none;
/* Chrome Safari */
}
</style>
</body>
</html>
</script>
<style>
#unity-container.unity-desktop::-webkit-scrollbar{
display: none; /* Chrome Safari */
}
</style>
</body>
</html>

2
public/analysisWeb/StreamingAssets/IPSettings.txt
View File

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

83
public/analysisWeb/index.html
View File

@ -49,23 +49,18 @@
// user. // user.
function unityShowBanner(msg, type) { function unityShowBanner(msg, type) {
function updateBannerVisibility() { function updateBannerVisibility() {
if (warningBanner) { warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
} }
if (warningBanner) { var div = document.createElement('div');
var div = document.createElement('div'); div.innerHTML = msg;
div.innerHTML = msg; warningBanner.appendChild(div);
warningBanner.appendChild(div); if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'error') div.style = 'background: red; padding: 10px;'; if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
else { setTimeout(function () {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; warningBanner.removeChild(div);
setTimeout(function () { updateBannerVisibility();
warningBanner.removeChild(div); }, 5000);
updateBannerVisibility();
}, 5000);
}
} }
updateBannerVisibility(); updateBannerVisibility();
} }
@ -103,42 +98,35 @@
// To lower canvas resolution on mobile devices to gain some // To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line: // performance, uncomment the following line:
// config.devicePixelRatio = 1; // config.devicePixelRatio = 1;
if (canvas) {
canvas.style.width = window.innerWidth + 'px'; canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px'; canvas.style.height = window.innerHeight + 'px';
}
unityShowBanner('WebGL builds are not supported on mobile devices.'); unityShowBanner('WebGL builds are not supported on mobile devices.');
} else { } else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen: // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
if (canvas) {
canvas.style.width = "100%"; canvas.style.width = "100%";
canvas.style.height = "100%"; canvas.style.height = "100%";
}
}
if (loadingBar) {
loadingBar.style.display = "block";
} }
loadingBar.style.display = "block";
var script = document.createElement("script"); var script = document.createElement("script");
var unityInstanceA var unityInstanceA
script.src = loaderUrl; script.src = loaderUrl;
script.onload = () => { script.onload = () => {
if (canvas) { createUnityInstance(canvas, config, (progress) => {
createUnityInstance(canvas, config, (progress) => { progressBarFull.style.width = 100 * progress + "%";
progressBarFull.style.width = 100 * progress + "%"; }).then((unityInstance) => {
}).then((unityInstance) => { unityInstanceA = unityInstance
unityInstanceA = unityInstance loadingBar.style.display = "none";
if (loadingBar) { fullscreenButton.onclick = () => {
loadingBar.style.display = "none"; unityInstance.SetFullscreen(1);
} };
fullscreenButton.onclick = () => { }).catch((message) => {
unityInstance.SetFullscreen(1); alert(message);
}; });
}).catch((message) => {
alert('createUnityInstance' + message);
});
}
}; };
//unity初始化 //unity初始化
function OnSceneLoaded() { function OnSceneLoaded() {
@ -148,7 +136,6 @@
function Started() { function Started() {
window.parent.started(); window.parent.started();
} }
function getDianwei(string) { function getDianwei(string) {
unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string)); unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string));
} }
@ -217,8 +204,8 @@
unityInstanceA.SendMessage('AAA', 'ChosePoint', params); unityInstanceA.SendMessage('AAA', 'ChosePoint', params);
} }
//新增点 //新增点
function addPoint(id, name) { function addPoint(id,name) {
let params = id + ',' + name let params = id+','+name
unityInstanceA.SendMessage('AAA', 'AddPoint', params); unityInstanceA.SendMessage('AAA', 'AddPoint', params);
} }
//删除点 //删除点
@ -230,9 +217,9 @@
unityInstanceA.SendMessage('AAA', 'EditorPoint', params); unityInstanceA.SendMessage('AAA', 'EditorPoint', params);
} }
//完成编辑 //完成编辑
function editorOverPoint(id, name) { function editorOverPoint(id,name) {
let params = id + ',' + name let params = id+','+name
console.log(params, 'params'); console.log(params,'params');
unityInstanceA.SendMessage('AAA', 'EditorOverPoint', params); unityInstanceA.SendMessage('AAA', 'EditorOverPoint', params);
} }
document.body.appendChild(script); document.body.appendChild(script);

66
public/flv/index.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,68 +10,58 @@
video::-webkit-media-controls-timeline { video::-webkit-media-controls-timeline {
display: block; display: block;
} }
/* 播放按钮 */ /* 播放按钮 */
video::-webkit-media-controls-play-button { video::-webkit-media-controls-play-button {
display: none; display: none;
} }
/* //进度条 */ /* //进度条 */
video::-webkit-media-controls-timeline { video::-webkit-media-controls-timeline {
display: none; display: none;
} }
/* //观看的当前时间 */ /* //观看的当前时间 */
video::-webkit-media-controls-current-time-display { video::-webkit-media-controls-current-time-display{
display: none; display: none;
} }
/* //剩余时间 */ /* //剩余时间 */
video::-webkit-media-controls-time-remaining-display { video::-webkit-media-controls-time-remaining-display {
display: none; display: none;
} }
/* //音量按钮 */ /* //音量按钮 */
video::-webkit-media-controls-mute-button { video::-webkit-media-controls-mute-button {
display: none; display: none;
} }
video::-webkit-media-controls-toggle-closed-captions-button { video::-webkit-media-controls-toggle-closed-captions-button {
display: none; display: none;
} }
/* //音量的控制条 */ /* //音量的控制条 */
video::-webkit-media-controls-volume-slider { video::-webkit-media-controls-volume-slider {
display: none; display: none;
} }
video::-webkit-media-controls-overflow-button { video::-webkit-media-controls-overflow-button {
display: none; display: none;
} }
</style> </style>
<body> <body>
<script src="flv.min.js"></script> <script src="flv.min.js"></script>
<video id="videoElement" style="width: 381px;height: 214px;" muted controls="controls"></video> <video id="videoElement" style="width: 381px;height: 214px;" muted controls="controls" ></video>
<script> <script>
var ip = window.location.host; var ip = window.location.host;
if (flvjs.isSupported()) { if (flvjs.isSupported()) {
// console.log("getParam('src')-", getParam('src')); console.log(getParam('src'),"getParam('src')");
// console.log("getSrcParam('src')-", getSrcParam());
var videoElement = document.getElementById('videoElement'); var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({ var flvPlayer = flvjs.createPlayer({
type: 'flv', type: 'flv',
isLive: true, isLive: true,
url: getNewurl(), //新逻辑 // url: 'ws://172.16.1.168:12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
// url: 'ws://172.16.1.168:12309/rtsp/1/a/?url=' + getParam('src').replace(/\s+/g, '') // url:getParam('src')
// url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '') url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
}); });
flvPlayer.attachMediaElement(videoElement); flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); flvPlayer.load();
flvPlayer.play(); flvPlayer.play();
// 监听 video 标签的事件，防止用户手动暂停 // 监听 video 标签的事件，防止用户手动暂停
videoElement.addEventListener('pause', function (e) { videoElement.addEventListener('pause', function(e) {
e.preventDefault(); e.preventDefault();
videoElement.play(); // 重新播放视频 videoElement.play(); // 重新播放视频
}); });
@ -83,34 +73,6 @@
var r = location.search.substr(1).match(reg); var r = location.search.substr(1).match(reg);
if (r != null) return decodeURI(decodeURI(r[2])); if (r != null) return decodeURI(decodeURI(r[2]));
} }
function getSrcParam() {
console.log("getSrcParam('src')-", location.search);
var srcIndex = location.search.indexOf('src=');
if (srcIndex !== -1) {
var srcSubstring = location.search.substring(srcIndex + 4); // 4 是 'src=' 的长度
return decodeURIComponent(srcSubstring);
}
return null;
}
function getNewurl() {
let src = getSrcParam();
let url='ws://'+ip.split(':')[0]+':12309/rtsp';
// let url = 'ws://172.16.1.168:12309/rtsp';
// console.log('getNewurl',src)
if (src.includes("?")) {
let splitArray = src.split("?");
if (splitArray && splitArray.length > 0) {
url = url + '/2/' + splitArray[1] + '/?url=' + splitArray[0]
}
} else {
url = url + '/1/a/?url=' + src;
}
console.log('getNewurl-return', url)
return url;
}
</script> </script>
</body> </body>
</html>
</html>

2
src/api/index.js
View File

@ -40,7 +40,7 @@ export const getStopAlgorithm = params => {
}); });
}; };
//分析-传视频类型设置接口 //分析-传视频类型设置接口
// http://localhost:80/api/SetVideoMode?Mode=离线视频 // http://localhost:5000/api/SetVideoMode?Mode=离线视频
export const getSetVideoMode = params => { export const getSetVideoMode = params => {
return axios.get('api/SetVideoMode', { return axios.get('api/SetVideoMode', {
params params

36
src/components/chart/avgChart.vue
View File

@ -1,20 +1,12 @@
<template> <template>
<!-- 均值图 --> <!-- 均值图 -->
<div style="width: 100%; margin-top: 5px"> <div style="width: 100%;margin-top: 5px;">
<div class="tableTitle"> <div class="tableTitle">
<div> <div>
<span <span
style=" style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3297ff;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
"
></span> ></span>
<span style="font-size: 18px">{{ componentName + '-' + chartName + '-' + '均值图' + '-' + status }}</span> <span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
</div> </div>
</div> </div>
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div> <div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
@ -43,20 +35,16 @@ export default {
}, },
status: { status: {
type: String type: String
} },
}, },
data() { data() {
return {}; return {
};
}, },
methods: { methods: {
drawBar(arr) { drawBar(arr) {
// console.log("均值图",arr) // console.log("均值图",arr)
if (arr && Object.keys(arr).length > 0) {
arr.avg = arr.avg ? Math.abs(arr.avg) : 0;
arr.med = arr.med ? Math.abs(arr.med) : 0;
arr.max = arr.max ? Math.abs(arr.max) : 0;
arr.min = arr.min ? Math.abs(arr.min) : 0;
}
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart); let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.barChart); myChart = this.$echarts.init(this.$refs.barChart);
@ -76,7 +64,7 @@ export default {
{ {
type: 'category', type: 'category',
gridIndex: 0, gridIndex: 0,
data: chartData.map((item) => item.stage), data: chartData.map(item => item.stage),
axisLine: { axisLine: {
show: false show: false
}, },
@ -87,7 +75,7 @@ export default {
], ],
yAxis: { yAxis: {
type: 'value', type: 'value',
splitArea: { show: false }, splitArea: { show: false },
gridIndex: 0, gridIndex: 0,
min: 0, min: 0,
@ -218,7 +206,7 @@ export default {
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () { window.addEventListener('resize', function() {
myChart.resize(); myChart.resize();
}); });
// this.$nextTick(() => { // this.$nextTick(() => {
@ -230,7 +218,9 @@ export default {
mounted() { mounted() {
// this.drawBar(this.typeValue); // this.drawBar(this.typeValue);
}, },
watch: {} watch: {
}
}; };
</script> </script>
<style> <style>

15
src/components/chart/barChart.vue
View File

@ -21,7 +21,6 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'barChart', //饼图组件 name: 'barChart', //饼图组件
props: { props: {
@ -56,7 +55,7 @@ export default {
drawBar(newVal) { drawBar(newVal) {
if (newVal && newVal.type_data && newVal.type_data.length > 0) { if (newVal && newVal.type_data && newVal.type_data.length > 0) {
var xData = newVal.type_data.map((ele) => { var xData = newVal.type_data.map((ele) => {
return getNameFromTargetType(ele.name); return ele.name;
}); });
var yData = newVal.type_data.map((ele) => { var yData = newVal.type_data.map((ele) => {
return ele.quantity; return ele.quantity;
@ -72,10 +71,10 @@ export default {
confine: true confine: true
}, },
grid: { grid: {
left: '5%', left: '2%',
right: '5%', right: '4%',
bottom: '0%', bottom: '10%',
top: '5%', top: '20%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@ -87,10 +86,8 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
interval: 0,
fontSize: 12, fontSize: 12,
color: '#000', color: '#000'
rotate: 30
}, },
axisTick: { axisTick: {
show: false show: false

4
src/components/chart/detailDialog.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div> <div>
<!-- <div class="down"> <div class="down">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="moreIcon"></span> <span class="moreIcon"></span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">查看详情</el-dropdown-item> <el-dropdown-item command="show">查看详情</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> --> </div>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"> <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
<el-form label-width="80px"> <el-form label-width="80px">
<el-form-item label="val1"> <el-form-item label="val1">

170
src/components/chart/lineChart.vue
View File

@ -22,7 +22,6 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'lineChart', //折线图组件 name: 'lineChart', //折线图组件
props: { props: {
@ -81,22 +80,7 @@ export default {
// triggerType:'触发时刻' // triggerType:'触发时刻'
myChart: null, myChart: null,
tooltip: { tooltip: {
show: true, show: true
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 1,
axisPointer: {
type: 'shadow'
// label: {
// show: true,
// },
},
textStyle: {
color: 'rgba(212, 232, 254, 1)'
// fontSize: fontChart(0.24),
},
extraCssText: 'z-index:2'
}, },
name: 'km/h', name: 'km/h',
series: [], series: [],
@ -191,15 +175,7 @@ export default {
// myChart.resize(); // myChart.resize();
// }) // })
}, },
//传值对应字段返回相应字段数组
extractKeyValues(arr, key) {
return arr.map((item) => {
if (key == 'speed' && item[key]) {
return Math.abs(item[key]);
}
return item[key];
});
},
getMessage(newVal, title, timeMode) { getMessage(newVal, title, timeMode) {
if (newVal) { if (newVal) {
var series = [ var series = [
@ -219,97 +195,52 @@ export default {
if (title === '类型') { if (title === '类型') {
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}个',
show: true, show: true,
confine: true, confine: true
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 1,
axisPointer: {
type: 'shadow'
// label: {
// show: true,
// },
},
textStyle: {
color: 'rgba(212, 232, 254, 1)'
// fontSize: fontChart(0.24),
},
extraCssText: 'z-index:2'
}; };
this.name = ''; this.name = '';
series[0].name = '总量'; series[0].name = '总量';
//获取每种类型数据逻辑有问题
// 映射出类型数组 // 映射出类型数组
// let arr = newVal.map(function (ele) { let arr = newVal.map(function (ele) {
// if (ele.type_data != null) { if (ele.type_data != null) {
// return ele.type_data; return ele.type_data;
// } }
// }); });
// var mapN = []; var mapN = [];
// if (arr && arr.length > 0) { if (arr && arr.length > 0) {
// for (var t = 0; t < arr.length; t++) { for (var t = 0; t < arr.length; t++) {
// if (arr[t] && arr[t].length > 0) { if (arr[t] && arr[t].length > 0) {
// for (var i = 0; i < arr[t].length; i++) { for (var i = 0; i < arr[t].length; i++) {
// mapN.push(arr[t][i]); mapN.push(arr[t][i]);
// }
// }
// }
// }
// var lineArr = [];
// if (newVal[0].type_data != undefined) {
// newVal[0].type_data.forEach((ele) => {
// lineArr.push({
// name: ele.name,
// type: 'line',
// data: [],
// smooth: true
// });
// });
// }
// console.log('newVal', newVal);
//获取每种类型数据逻辑有问题
// mapN.forEach((ele, index) => {
// if (lineArr[index] && lineArr[index].data) {
// let t = ele.quantity
// if(ele.value||ele.value===0){
// t = ele.value
// }
// lineArr[index].data.push(t);
// }
// });
// console.log('lineArr', lineArr);
var lineArr = [];
let seriesArr = this.extractKeyValues(newVal, 'type_data');
if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0);
if (firstLevel && firstLevel.length > 0) {
for (let i = 0; i < firstLevel.length; i++) {
const item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => {
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
lineArr.push({
name: getNameFromTargetType(item.name),
data: valueList,
type: 'line',
smooth: true
});
} }
} }
} }
} }
var lineArr = [];
if (newVal[0].type_data != undefined) {
newVal[0].type_data.forEach((ele) => {
lineArr.push({
name: ele.name,
type: 'line',
data: [],
smooth: true
});
});
}
mapN.forEach((ele, index) => {
if (lineArr[index] && lineArr[index].data) {
lineArr[index].data.push(ele.quantity);
}
// if (ele.name == '机动车') {
// lineArr[0].data.push(ele.quantity);
// } else if (ele.name == '非机动车') {
// lineArr[1].data.push(ele.quantity);
// } else {
// lineArr[2].data.push(ele.quantity);
// }
});
if (lineArr && lineArr.length > 0) { if (lineArr && lineArr.length > 0) {
for (let j = 0; j < lineArr.length; j++) { for (let j = 0; j < lineArr.length; j++) {
series.push(lineArr[j]); series.push(lineArr[j]);
@ -320,12 +251,8 @@ export default {
let mapNR1 = []; let mapNR1 = [];
newVal.map(function (ele) { newVal.map(function (ele) {
if (ele.type_data != null) { if (ele.type_data != null) {
let sum = ele.type_data.reduce(function (prev, cur) { var sum = ele.type_data.reduce(function (prev, cur) {
let t = cur.quantity; return cur.quantity + prev;
if (cur.value || cur.value === 0) {
t = cur.value;
}
return t + prev;
}, 0); }, 0);
mapNR1.push(sum); mapNR1.push(sum);
} }
@ -370,9 +297,6 @@ export default {
}; };
series[0].data = newVal.map((val) => { series[0].data = newVal.map((val) => {
if (timeMode == '固定间隔') { if (timeMode == '固定间隔') {
if (val.ave_headway == -1) {
return '-';
}
return val.ave_headway; return val.ave_headway;
} else { } else {
return val.headway; return val.headway;
@ -427,19 +351,7 @@ export default {
// console.log(this.$parent.dataArr, '父组件的dataArr'); // console.log(this.$parent.dataArr, '父组件的dataArr');
// this.$set(this.$parent.dataArr) // this.$set(this.$parent.dataArr)
}, },
watch: { watch: {}
// list: {
// handler: function (newval, oldVal) {
// if (newval && newval.length > 0) {
// this.$nextTick(() => {
// this.drawLine(newval, this.title, this.status);
// });
// }
// },
// deep: true
// // immediate: true
// }
}
}; };
</script> </script>
<style scoped> <style scoped>

296
src/components/chart/pieChart.vue
View File

@ -1,168 +1,162 @@
<template> <template>
<div style="width: 100%; margin-top: 5px"> <div style="width: 100%; margin-top: 5px">
<div class="tableTitle"> <div class="tableTitle">
<div> <div>
<span <span
style=" style="
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background-color: #3297ff; background-color: #3297ff;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 8px; margin-right: 8px;
" "
></span> ></span>
<span style="font-size: 18px">{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span> <span
</div> style="font-size: 18px"
</div> >{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span
<div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div> >
</div>
</div> </div>
<div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
</div>
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'pieChart', //饼图图组件 name: "pieChart", //饼图图组件
props: { props: {
list: { list: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
},
componentName: {
type: String
},
chartName: {
type: String
},
typeValue: {
type: Object
},
status: {
type: String
}
}, },
data() { componentName: {
return {}; type: String,
}, },
created() {}, chartName: {
methods: { type: String,
drawPie(newVal) { },
// var legend = []; typeValue: {
if (newVal && newVal.type_data && newVal.type_data.length > 0) { type: Object,
// var legend = newVal.type_data.map((ele) => { },
// return ele.name; status: {
// }); type: String,
var seriesData = []; },
newVal.type_data.forEach((ele) => { },
// console.log(JSON.stringify(ele)) data() {
if (ele.quantity != 0) { return {};
seriesData.push({ },
name: getNameFromTargetType(ele.name), created() {},
value: ele.quantity methods: {
}); drawPie(newVal) {
// legend.push(ele.name) if (newVal&&newVal.type_data&&newVal.type_data.length>0) {
} var legend = newVal.type_data.map((ele) => {
return ele.name;
}); });
this.drawPie(); var seriesData = [];
} newVal.type_data.forEach((ele) => {
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart); seriesData.push({
if (myChart == null) { name: ele.name,
myChart = this.$echarts.init(this.$refs.pieChart); value: ele.quantity,
} });
var color = [ });
'#0CD2E6', this.drawPie();
'#3751E6', }
'#FFC722', let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
'#00FFFF', if (myChart == null) {
'#00FF80', myChart = this.$echarts.init(this.$refs.pieChart);
'#FFEA00', }
'#FF7300', var color = [
'#9500B3', "#0CD2E6",
'#3377FF', "#3751E6",
'#5087EC', "#FFC722",
'#68BBC4', "#00FFFF",
'#58A55C', "#00FF80",
'#F2BD42', "#FFEA00",
'#EE752F', "#FF7300",
'#D95040', "#9500B3",
'#14CAFB' "#3377FF",
]; "#5087EC",
let option = { "#68BBC4",
// title: { "#58A55C",
// show: true, "#F2BD42",
// text: this.componentName + '-' + this.chartName + '-' + '饼状图', "#EE752F",
// textStyle: { "#D95040",
// lineHeight: '30' "#14CAFB"
// } ];
// }, let option = {
color: color, // title: {
animation: false, // show: true,
legend: { // text: this.componentName + '-' + this.chartName + '-' + '饼状图',
top: 20, // textStyle: {
right: 10, // lineHeight: '30'
bottom: 20, // }
orient: 'vertical', // },
textStyle: {}, color: color,
// data: legend animation: false,
legend: {
top: 20,
right: "center",
textStyle: {},
data: legend,
},
tooltip: {},
series: [
{
type: "pie",
center: ["50%", "55%"],
radius: "70%",
label: {
normal: {
show: false,
},
},
labelLine: {
show: false,
length: 0,
length2: 0,
},
label: {
normal: {
show: true,
position: "inside",
formatter: "{value|{c}}",
rich: {
value: {
fontSize: 20,
color: "#ffffff",
},
}, },
tooltip: {}, },
series: [ },
{ data: seriesData,
type: 'pie', },
center: ['30%', '55%'], ],
radius: '70%', };
label: {
normal: {
show: false
}
},
labelLine: {
show: false,
length: 0,
length2: 0
},
label: {
normal: {
show: true,
position: 'inside',
formatter: '{value|{c}}',
rich: {
value: {
fontSize: 20,
color: '#ffffff'
}
}
}
},
data: seriesData
}
]
};
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
// this.$nextTick(() => { // this.$nextTick(() => {
// myChart.setOption(option) // myChart.setOption(option)
// myChart.resize(); // myChart.resize();
// }) // })
}
}, },
mounted() {}, },
watch: { mounted() {},
// 监听单个的数据 watch: {
} // 监听单个的数据
},
}; };
</script> </script>
<style scoped> <style scoped>
.tableTitle { .tableTitle {
background: #f7f8fa; background: #f7f8fa;
margin-bottom: 5px; margin-bottom: 5px;
padding: 8px; padding: 8px;
} }
</style> </style>

102
src/components/chart/regionTable.vue
View File

@ -1,26 +1,25 @@
<template> <template>
<!-- 区域的表格 --> <!-- 区域的表格 -->
<div class="tableContent"> <div class="tableContent">
<!-- <div class="down"> <div class="down">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="moreIcon"></span> <span class="moreIcon"></span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">查看详情</el-dropdown-item> <el-dropdown-item command="show">查看详情</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> --> </div>
<div v-if="msg" class="regionBox"> <div v-if="msg" class="regionBox">
<!-- 实时触发 --> <!-- 实时触发 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发' ">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> --> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type"> <el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -46,27 +45,14 @@
<span v-if="scope.row.occ == '1'">占用</span> <span v-if="scope.row.occ == '1'">占用</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度"> <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定时刻' ">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> --> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type"> <el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -90,29 +76,17 @@
<el-table-column align="center" prop="occ" label="占用状态"> <el-table-column align="center" prop="occ" label="占用状态">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.occ == '1'">占用</span> <span v-if="scope.row.occ == '1'">占用</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度"> <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
<!-- 固定间隔 --> <!-- 固定间隔 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type"> <el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -137,34 +111,18 @@
<el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column> <el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
<el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column> <el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
<el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column> <el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
<el-table-column align="center" prop="speed" label="平均速度"> <el-table-column align="center" prop="speed" label="平均速度"></el-table-column>
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%"> <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
<el-form :model="msg" label-width="80px"> <el-form :model="msg" label-width="80px">
<el-form-item label="val1"> <el-form-item label="val1">
<el-time-select <el-time-select placeholder="起始时间" v-model="startTime"
placeholder="起始时间" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select> </el-time-select>
<el-time-select <el-time-select placeholder="结束时间" v-model="endTime"
placeholder="结束时间" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
>
</el-time-select> </el-time-select>
</el-form-item> </el-form-item>
<el-form-item label="val2"> <el-form-item label="val2">
@ -193,25 +151,21 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
import tableShow from './tableShow.vue';
export default { export default {
components: { tableShow },
name: 'tableShow', //表格组件 name: 'tableShow', //表格组件
props: { props: {
msg: { msg: {
type: Array type: Array,
// default() { // default() {
// return []; // return [];
// } // }
}, },
triggerType: { triggerType: {
type: String type: String
} },
}, },
data() { data() {
return { return {
getNameFromTargetType,
dialogVisible: false, dialogVisible: false,
startTime: '', startTime: '',
endTime: '', endTime: '',
@ -226,12 +180,12 @@ export default {
} }
} }
}, },
mounted() { mounted() {
// console.log(this.type,'129129'); // console.log(this.type,'129129');
}, },
watch: { watch:{
msg: { msg:{
handler(newVal) { handler(newVal){
// console.log(newVal,'流量数据table'); // console.log(newVal,'流量数据table');
} }
} }
@ -239,14 +193,12 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/deep/ .el-table { /deep/ .el-table{
// height: 709px !important; height: 709px !important;
// overflow-y: scroll; overflow-y: scroll;
z-index: 900; z-index: 9999;
}
.el-table::-webkit-scrollbar {
width: 0 !important;
} }
.el-table::-webkit-scrollbar { width: 0 !important }
.tableContent { .tableContent {
position: relative; position: relative;
} }

157
src/components/chart/tableShow.vue
View File

@ -1,28 +1,25 @@
<template> <template>
<!-- 断面的表格 --> <!-- 断面的表格 -->
<div class="tableContent"> <div class="tableContent">
<!-- <div class="down"> <div class="down">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="moreIcon"></span> <span class="moreIcon"></span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">查看详情</el-dropdown-item> <el-dropdown-item command="show">查看详情</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> --> </div>
<!-- 实时触发 --> <!-- 实时触发 -->
<!-- 实时触发 --> <!-- 实时触发 -->
<div v-if="msg && msg.length > 0"> <div v-if="msg">
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> --> <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> --> <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type"> <el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -44,72 +41,18 @@
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column> <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column> <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column> <el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度"> <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
<!-- 固定间隔 --> <!-- 固定间隔 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column> <el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
<el-table-column align="center" prop="name" label="断面名称"></el-table-column> <el-table-column align="center" prop="name" label="断面名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" prop="interval" label="时间序号"></el-table-column> <el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
<el-table-column align="center" prop="type" label="目标类型"> <el-table-column align="center" prop="type" label="目标类型">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -130,63 +73,28 @@
<el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column> <el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
<el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column> <el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
<el-table-column align="center" prop="flow" label="断面流量"></el-table-column> <el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
<el-table-column align="center" prop="in_spd" label="入流平均速度"> <el-table-column align="center" prop="in_spd" label="入流平均速度"></el-table-column>
<template slot-scope="scope"> <el-table-column align="center" prop="out_spd" label="出流平均速度"></el-table-column>
{{ <el-table-column align="center" prop="speed" label="断面的平均速度"></el-table-column>
scope.row.in_spd && scope.row.in_spd != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.in_spd)
: scope.row.in_spd == '-1'
? '-'
: scope.row.in_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="out_spd" label="出流平均速度">
<template slot-scope="scope">
{{
scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
? Math.abs(scope.row.out_spd)
: scope.row.out_spd == '-1'
? '-'
: scope.row.out_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="speed" label="断面的平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
<div v-else> <div v-else>
<el-empty :image-size="100"></el-empty> <el-empty :image-size="100"></el-empty>
</div> </div>
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%"> <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
<el-form :model="msg" label-width="80px"> <el-form :model="msg" label-width="80px">
<el-form-item label="val1"> <el-form-item label="val1">
<el-time-select <el-time-select placeholder="起始时间" v-model="startTime"
placeholder="起始时间" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select> </el-time-select>
<el-time-select <el-time-select placeholder="结束时间" v-model="endTime"
placeholder="结束时间" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
>
</el-time-select> </el-time-select>
</el-form-item> </el-form-item>
<el-form-item label="val2"> <el-form-item label="val2">
<el-select v-model="value" placeholder="请选择"> <el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="val3"> <!-- <el-form-item label="val3">
@ -210,7 +118,6 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'tableShow', //表格组件 name: 'tableShow', //表格组件
props: { props: {
@ -226,7 +133,6 @@ export default {
}, },
data() { data() {
return { return {
getNameFromTargetType,
dialogVisible: false, dialogVisible: false,
startTime: '', startTime: '',
endTime: '', endTime: '',
@ -256,15 +162,6 @@ export default {
value: '' value: ''
}; };
}, },
watch: {
msg: {
handler(newVal) {
// console.log('断面', newVal);
// console.log('断面-triggerType', this.triggerType);
}
// immediate: true
}
},
methods: { methods: {
handleCommand(command) { handleCommand(command) {
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
@ -272,21 +169,19 @@ export default {
this.dialogVisible = true; this.dialogVisible = true;
} }
}, },
onSubmit() {}, onSubmit() { },
handleClose() {} handleClose() { }
}, },
mounted() {} mounted() { }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/deep/ .el-table { /deep/ .el-table{
// height: 709px !important; height: 709px !important;
// overflow-y: scroll; overflow-y: scroll;
z-index: 900; z-index: 9999;
}
.el-table::-webkit-scrollbar {
width: 0 !important;
} }
.el-table::-webkit-scrollbar { width: 0 !important }
.tableContent { .tableContent {
position: relative; position: relative;
} }

154
src/components/chart/thermalChart.vue
View File

@ -7,10 +7,12 @@ export default {
name: 'thermalChart', //热点图组件 name: 'thermalChart', //热点图组件
data() { data() {
return { return {
thermalChartData: [] thermalChartData:[]
}; };
}, },
created() {}, created() {
},
props: { props: {
list: { list: {
type: Array, type: Array,
@ -23,7 +25,7 @@ export default {
}, },
title: { title: {
type: String type: String
} },
// status: { // status: {
// type: String // type: String
// }, // },
@ -36,65 +38,48 @@ export default {
ODhanlde(odData) { ODhanlde(odData) {
// console.log(odData,'oddata'); // console.log(odData,'oddata');
// var odData = this.odData // var odData = this.odData
var chartData = []; var chartData = []
var start = []; var start = []
if (odData && odData.length > 0) { for (let i = 0; i < odData.length; i++) {
for (let i = 0; i < odData.length; i++) { let item = odData[i].data
let item = odData[i].data; for (let j = 0; j < item.length; j++) {
if (item && item.length > 0) { start.push(item[j].start)
for (let j = 0; j < item.length; j++) { // 数组去重
start.push(item[j].start);
// 数组去重
// od图的数据 // od图的数据
chartData.push([i, j, item[j].quantity]); chartData.push([i, j, item[j].quantity])
// console.log([i,j,item[j].val]); // console.log([i,j,item[j].val]);
}
}
} }
} }
// this.thermalChartData = chartData // this.thermalChartData = chartData
// console.log(chartData,'处理过后的odssssssssssssss'); // console.log(chartData,'处理过后的odssssssssssssss');
return chartData; return chartData
// console.log(chartData, this.unique(start), 'od图的数据'); // console.log(chartData, this.unique(start), 'od图的数据');
}, },
//数组去重 //数组去重
unique(arr) { unique(arr) {
let newArr = []; let newArr = []
arr.forEach((item) => { arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? '' : newArr.push(item)
}); })
return newArr; return newArr
},
isObject(variable) {
return typeof variable === 'object' && variable !== null && !Array.isArray(variable);
}, },
// 绘制热力图 // 绘制热力图
drawThermalChart(odData, startEnd) { drawThermalChart(odData, startEnd) {
let startEndStart = [],
startEndEnd = [];
if (this.isObject(startEnd)) {
if (startEnd.start) {
startEndStart = startEnd.start.split(',');
}
if (startEnd.start) {
startEndEnd = startEnd.end.split(',');
}
}
let myChart = this.$echarts.init(this.$refs.thermalChart); let myChart = this.$echarts.init(this.$refs.thermalChart);
let option = { let option = {
dataZoom: [ dataZoom: [
{ {
id: 'dataZoomY', id: "dataZoomY",
type: 'slider', type: "slider",
yAxisIndex: [0], yAxisIndex: [0],
startValue: 0, startValue: 0,
endValue: 10, endValue: 10,
filterMode: 'empty' filterMode: "empty",
} },
], ],
tooltip: { tooltip: {
position: 'top' position: "top",
// formatter: function (params) { // formatter: function (params) {
// return ( // return (
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2] // "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
@ -103,83 +88,81 @@ export default {
}, },
animation: false, animation: false,
grid: { grid: {
left: '3%', left: "3%",
right: '8%', right: "8%",
bottom: '8%', bottom: "8%",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: startEndStart, data: startEnd.start.split(','),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: "#000",
} },
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 40 rotate: 40,
}, },
splitArea: { splitArea: {
show: true show: true,
} },
// name: "镇街", // name: "镇街",
}, },
yAxis: { yAxis: {
type: 'category', type: "category",
data: startEndEnd, data: startEnd.end.split(','),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: "#000",
} },
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 40 rotate: 40,
}, },
splitArea: { splitArea: {
show: true show: true,
} },
// name: "", // name: "",
}, },
visualMap: { visualMap: {
min: 1, min: 1,
max: 50, max: 50,
calculable: true, calculable: true,
orient: 'horizontal', orient: "horizontal",
left: 'center', left: "center",
bottom: '1%', bottom: "1%",
text: ['50', '1'], // 文本，默认为数值文本 text: ["50", "1"], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'], //color:['#20a0ff','#D2EDFF'],
calculable: false, calculable: false,
color: ['#22DDDD', '#fec42c', '#80F1BE'] color: ["#22DDDD", "#fec42c", "#80F1BE"],
}, },
series: [ series: [
{ {
name: 'OD图', name: "OD图",
type: 'heatmap', type: "heatmap",
data: this.ODhanlde(odData), data: this.ODhanlde(odData),
label: { label: {
normal: { normal: {
show: true show: true,
} },
}, },
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(120, 0, 0, 0.5)' shadowColor: "rgba(120, 0, 0, 0.5)",
} },
} },
} },
] ],
}; };
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => { // this.$nextTick(() => {
// myChart.setOption(option) // myChart.setOption(option)
// myChart.resize(); // myChart.resize();
@ -190,13 +173,12 @@ export default {
// if (this.list) { // if (this.list) {
// this.drawThermalChart() // this.drawThermalChart()
// } // }
this.drawThermalChart()
}, },
watch: {} watch: {
}
}; };
</script> </script>
<style scoped> <style scoped></style>
.a{
color: rgba(120, 0, 0, 0.5);
}
</style>

254
src/components/newchart/avgChart.vue
View File

@ -1,254 +0,0 @@
<template>
<!-- 均值图 -->
<div style="width: 100%; margin-top: 5px">
<div class="tableTitle">
<div>
<span
style="
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3297ff;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
"
></span>
<span style="font-size: 18px">{{ componentName + '-' + chartName + '-' + '均值图' + '-' + status }}</span>
</div>
</div>
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
</div>
</template>
<script>
export default {
name: 'barChart', //均值图图组件
props: {
list: {
type: Array,
default() {
return [];
}
},
typeValue: {
type: Object
},
// 组件名称
componentName: {
type: String
},
chartName: {
type: String
},
status: {
type: String
}
},
data() {
return {};
},
methods: {
drawBar(arr) {
// console.log("均值图",arr)
if (arr && Object.keys(arr).length > 0) {
arr.avg = arr.avg ? Math.abs(arr.avg) : 0;
arr.med = arr.med ? Math.abs(arr.med) : 0;
arr.max = arr.max ? Math.abs(arr.max) : 0;
arr.min = arr.min ? Math.abs(arr.min) : 0;
}
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs.barChart);
}
let chartData = [{ stage: '', number: 40 }];
let option = {
tooltip: {},
color: ['#0EECE4'],
grid: {
left: '0%',
right: '0%',
bottom: '10%',
top: '15%',
z: 22
},
xAxis: [
{
type: 'category',
gridIndex: 0,
data: chartData.map((item) => item.stage),
axisLine: {
show: false
},
axisLabel: {
show: false
}
}
],
yAxis: {
type: 'value',
splitArea: { show: false },
gridIndex: 0,
min: 0,
splitNumber: 12,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
max: 200
},
series: [
{
name: '外框',
type: 'bar',
barGap: '-120%', // 设置外框粗细
data: [300],
barWidth: 150,
itemStyle: {
normal: {
color: 'rgba(0,0,0,.1)', // 填充色
barBorderWidth: 1, // 边框宽度
label: {
// 标签显示位置
show: false
}
}
},
z: 1
},
{
name: '平均值',
type: 'bar',
stack: 'val',
barWidth: 150,
xAxisIndex: 0,
yAxisIndex: 0,
label: {
show: true,
position: 'right',
// offset: [10, 20],
distance: 15,
color: '#000',
fontSize: 17,
formatter: '{c}' + '[avg]'
},
itemStyle: {
color: '#89c6ff'
},
data: [arr.avg],
zlevel: 9
},
{
name: '中间值',
type: 'bar',
barWidth: 150,
stack: 'val',
label: {
show: true,
position: 'left',
distance: 15,
color: '#000',
fontSize: 17,
formatter: '{c}' + '[med]',
rich: {}
},
itemStyle: {
color: '#67b4fd'
},
data: [arr.med],
zlevel: 9
},
{
name: '最大值',
type: 'bar',
stack: 'val',
barWidth: 150,
barGap: '-100%',
data: [arr.max],
label: {
show: true,
position: 'right',
distance: 10,
color: '#000',
fontSize: 17,
offset: [0, -30],
formatter: '{c}' + '[max]'
},
itemStyle: {
color: '#319cff'
},
zlevel: 9
},
{
name: '最小值',
type: 'bar',
stack: 'val',
barWidth: 150,
barGap: '-100%',
data: [arr.min],
label: {
offset: [10, 20],
show: true,
position: 'left',
distance: 10,
color: '#000',
offset: [0, -30],
fontSize: 17,
formatter: '{c}' + '[min]'
},
// tooltip: {
// backgroundColor: 'transparent',
// formatter: ' '
// },
itemStyle: {
color: '#328adc'
},
zlevel: 9
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
}
},
mounted() {
// this.drawBar(this.typeValue);
},
watch: {
list: {
handler: function (newval, oldVal) {
if (newval && newval.length > 0) {
this.$nextTick(() => {
this.drawBar(newval[0]);
});
}
},
deep: true,
immediate: true
}
}
};
</script>
<style>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
</style>

163
src/components/newchart/barChart.vue
View File

@ -1,163 +0,0 @@
<template>
<div style="width: 100%; margin-top: 5px">
<div class="tableTitle">
<div>
<span
style="
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3297ff;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
"
></span>
<span style="font-size: 18px">{{ componentName + '-' + chartName + '-' + '柱状图' + '-' + status }}</span>
</div>
</div>
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
</div>
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'barChart', //饼图组件
props: {
list: Array,
default() {
return [];
},
pageType: {
type: String
},
title: {
type: String
},
status: {
type: String
},
componentName: {
type: String
},
chartName: {
type: String
},
typeValue: {
type: Object
}
},
data() {
return {};
},
created() {},
methods: {
drawBar(newVal) {
let xData = [],
yData = [];
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
xData = newVal.type_data.map((ele) => {
return getNameFromTargetType(ele.name);
});
yData = newVal.type_data.map((ele) => {
return ele.quantity;
});
}
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs.barChart);
}
let option = {
color: ['#7262FD', '#FC5A5A'],
tooltip: {
confine: true
},
grid: {
left: '5%',
right: '5%',
bottom: '0%',
top: '5%',
containLabel: true
},
xAxis: {
type: 'category',
data: xData,
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
fontSize: 12,
color: '#000',
rotate: 30
},
axisTick: {
show: false
}
},
yAxis: [
{
type: 'value',
min: 0,
minInterval: 1,
splitArea: {
show: false
},
axisLine: {
show: yData.length == 0 ? false : true
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#eeebeb',
type: 'dashed' // dotted 虚线
}
},
axisLabel: {
fontSize: 12,
color: '#000',
fontFamily: 'Bebas'
}
}
],
series: [
{
type: 'bar',
barWidth: 20,
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
name: '时间',
data: yData
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
}
},
mounted() {},
watch: {
list: {
handler: function (newval, oldVal) {
if (newval && newval.length > 0) {
this.$nextTick(() => {
this.drawBar(newval[0]);
});
}
},
deep: true,
immediate: true
}
}
};
</script>

125
src/components/newchart/detailDialog.vue
View File

@ -1,125 +0,0 @@
<template>
<div>
<!-- <div class="down">
<el-dropdown trigger="click" @command="handleCommand">
<span class="moreIcon"></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">查看详情</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
<el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
<el-form label-width="80px">
<el-form-item label="val1">
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
>
</el-time-select>
</el-form-item>
<el-form-item label="val2">
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="val3">
<el-input></el-input>
</el-form-item>
<el-form-item label="val4">
<el-checkbox-group v-model="checkList">
<el-checkbox label="数值"></el-checkbox>
<el-checkbox label="表格"></el-checkbox>
<el-checkbox label="时间曲线图"></el-checkbox>
<el-checkbox label="均值图"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">确认</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'detailDialog', //速度组件
props: {},
data() {
return {
dialogVisible: false,
startTime: '',
endTime: '',
checkList: ['复选框 A'],
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
],
value: ''
};
},
methods: {
onSubmit() {},
handleCommand(command) {
// 用户名下拉菜单选择事件
if (command == 'show') {
this.dialogVisible = true;
}
},
handleClose(done) {
this.$confirm('确认关闭？')
.then((_) => {
done();
})
.catch((_) => {});
}
},
mounted() {}
};
</script>
<style scoped>
.down {
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.down .moreIcon{
width: 5px;
height: 18px;
background-size: 5px 18px;
position: relative;
z-index: 100;
background-image: url(../../assets/img/more.png);
display: block;
}
.el-form-item {
margin-bottom: 20px;
}
</style>

488
src/components/newchart/lineChart.vue
View File

@ -1,488 +0,0 @@
<template>
<div style="width: 100%; margin-top: 5px">
<div class="tableTitle">
<div>
<span
style="
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3297ff;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
"
></span>
<span style="font-size: 18px">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
}}</span>
</div>
</div>
<div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div>
</div>
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'lineChart', //折线图组件
props: {
itemData: {
type: Object,
default() {
return {};
}
},
originalDataArr: {
type: Array,
default() {
return [];
}
},
list: {
type: Array,
default() {
return [];
}
},
pageType: {
type: String
},
title: {
type: String
},
// 时间模式
status: {
type: String
},
// 组件名称
componentName: {
type: String
},
chartName: {
type: String
},
// 单个数据接收
typeValue: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
xData: [],
yData: [],
yData1: [],
yData2: [],
yData3: [],
arrN: [],
// series: []
// triggerType:'触发时刻'
myChart: null,
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 1,
axisPointer: {
type: 'shadow'
// label: {
// show: true,
// },
},
textStyle: {
color: 'rgba(212, 232, 254, 1)'
// fontSize: fontChart(0.24),
},
extraCssText: 'z-index:2'
},
name: 'km/h',
series: [],
//
listArr: []
};
},
created() {
// console.log(this.componentName + '-' + JSON.stringify(this.itemData));
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
},
methods: {
//过滤重复的 time 字段，保留每个 time 最后一个对象
filteredArrayFun(originalArray, targetTime) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 确保 targetTime 是有效的日期字符串
const targetDate = targetTime ? new Date(targetTime) : null;
// 过滤比目标时间小的对象
if (targetDate) {
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
}
// 按照时间从小到大排序
// const sortedArray = uniqueArray.sort((a, b) => {
// const dateA = new Date(a.time);
// const dateB = new Date(b.time);
// return dateA - dateB;
// });
return uniqueArray;
},
drawLine(nnewVal, title, timeMode) {
// console.log('newVal == ', nnewVal)
// let targetTime = '';
// if (nnewVal.length > 0) {
// targetTime = nnewVal[nnewVal.length - 1].time;
// }
// let newVal = this.filteredArrayFun(nnewVal,targetTime);
let newVal = nnewVal
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs.lineChart);
}
// var series = []
if (newVal) {
this.xData = newVal.map((val) => {
return val.time;
});
}
// myChart.showLoading()　　//开启loading
let series = this.getMessage(newVal, title, timeMode) || []
let option = {
legend: {},
grid: {
left: '2%',
right: '4%',
bottom: '10%',
top: '20%',
containLabel: true
},
tooltip: this.tooltip,
xAxis: [
{
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: '#eeebeb',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#6c6c6c'
},
splitLine: {
show: false
},
boundaryGap: ['5%', '5%'],
data: this.xData.reverse()
}
],
yAxis: [
{
type: 'value',
name: this.name,
axisLabel: {
color: '#6c6c6c'
},
splitLine: {
lineStyle: {
color: '#eeebeb',
type: 'dashed'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: series
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
},
//传值对应字段返回相应字段数组
extractKeyValues(arr, key) {
return arr.map((item) => {
if (key == 'speed' && item[key]) {
return Math.abs(item[key]);
}
return item[key];
});
},
getMessage(newVal, title, timeMode) {
if (newVal) {
var series = [
{
name: '',
type: 'line',
symbolSize: 6,
smooth: true,
itemStyle: {
color: '#fb864b',
borderColor: '#fb864b'
// borderWidth: 2
},
data: []
}
];
if (title === '类型') {
this.tooltip = {
show: true,
confine: true,
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 1,
axisPointer: {
type: 'shadow'
// label: {
// show: true,
// },
},
textStyle: {
color: 'rgba(212, 232, 254, 1)'
// fontSize: fontChart(0.24),
},
extraCssText: 'z-index:2'
};
this.name = '';
series[0].name = '总量';
//获取每种类型数据逻辑有问题
// 映射出类型数组
// let arr = newVal.map(function (ele) {
// if (ele.type_data != null) {
// return ele.type_data;
// }
// });
// var mapN = [];
// if (arr && arr.length > 0) {
// for (var t = 0; t < arr.length; t++) {
// if (arr[t] && arr[t].length > 0) {
// for (var i = 0; i < arr[t].length; i++) {
// mapN.push(arr[t][i]);
// }
// }
// }
// }
// var lineArr = [];
// if (newVal[0].type_data != undefined) {
// newVal[0].type_data.forEach((ele) => {
// lineArr.push({
// name: ele.name,
// type: 'line',
// data: [],
// smooth: true
// });
// });
// }
// console.log('newVal', newVal);
//获取每种类型数据逻辑有问题
// mapN.forEach((ele, index) => {
// if (lineArr[index] && lineArr[index].data) {
// let t = ele.quantity
// if(ele.value||ele.value===0){
// t = ele.value
// }
// lineArr[index].data.push(t);
// }
// });
// console.log('lineArr', lineArr);
var lineArr = [];
let seriesArr = this.extractKeyValues(newVal, 'type_data');
if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0);
if (firstLevel && firstLevel.length > 0) {
for (let i = 0; i < firstLevel.length; i++) {
const item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => {
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
lineArr.push({
name: getNameFromTargetType(item.name),
data: valueList,
type: 'line',
smooth: true
});
}
}
}
}
if (lineArr && lineArr.length > 0) {
for (let j = 0; j < lineArr.length; j++) {
series.push(lineArr[j]);
}
}
// 总和数量
let mapNR1 = [];
newVal.map(function (ele) {
if (ele.type_data != null) {
let sum = ele.type_data.reduce(function (prev, cur) {
let t = cur.quantity;
if (cur.value || cur.value === 0) {
t = cur.value;
}
return t + prev;
}, 0);
mapNR1.push(sum);
}
});
series[0].data = mapNR1;
} else if (title === '速度') {
let unit = 'km/h';
if (this.originalDataArr && this.originalDataArr.length > 0) {
if (this.originalDataArr[0].speed >= 0) {
unit = 'km/h';
} else {
unit = 'pix/s';
}
}
this.tooltip = {
formatter: `{a} {b}:{c}${unit}`,
show: true,
confine: true
};
this.name = unit;
// console.log(this.status + '-速度-' + JSON.stringify(newVal));
series[0].data = newVal.map((val) => {
if (val.speed == -1) {
return '-';
}
return Math.abs(val.speed);
});
} else if (title === '流量') {
this.name = '辆';
if (this.status != '实时触发') {
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
series[0].data = newVal.map((ele) => {
return ele.in_flow + ele.out_flow;
});
} else if (title === '车头时距') {
this.name = '秒';
this.tooltip = {
formatter: '{a} {b}:{c}/s',
show: true,
confine: true
};
series[0].data = newVal.map((val) => {
if (timeMode == '固定间隔') {
if (val.ave_headway == -1) {
return '-';
}
return val.ave_headway;
} else {
return val.headway;
}
});
} else if (title === '排队数') {
this.name = '辆';
if (this.status != '实时触发') {
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
series[0].data = newVal.map((val) => {
// return val.n_queue;
if (timeMode == '固定间隔') {
return val.ave_queue;
} else {
return val.n_queue;
}
});
} else if (title === '检测数') {
this.name = '辆';
if (this.status != '实时触发') {
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
}
series[0].data = newVal.map((val) => {
if (timeMode == '固定间隔') {
return val.ave_stay;
} else {
return val.n_stay;
}
});
} else if (title === '延误') {
this.name = '秒';
series[0].data = newVal.map((val) => {
return val.ave_delay;
});
} else if (title === '拥堵') {
this.name = '秒';
series[0].data = newVal.map((val) => {});
}
series.forEach((ele) => {
ele.data.reverse();
});
return series;
}
}
},
mounted() {
// if (this.historyData.length != 0) {
// this.drawLine(this.historyData, this.title, this.status);
// }
// this.getMessage(this.list)
// console.log(this.$parent.dataArr, '父组件的dataArr');
// this.$set(this.$parent.dataArr)
},
watch: {
list: {
handler: function (newval, oldVal) {
if (newval && newval.length > 0) {
this.$nextTick(() => {
this.drawLine(newval, this.title, this.status);
});
}
},
deep: true,
immediate: true
}
}
};
</script>
<style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
</style>

193
src/components/newchart/pieChart.vue
View File

@ -1,193 +0,0 @@
<template>
<div style="width: 100%; margin-top: 5px">
<div class="tableTitle">
<div>
<span
style="
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3297ff;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
"
></span>
<span style="font-size: 18px">{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span>
</div>
</div>
<div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
</div>
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'pieChart', //饼图图组件
props: {
list: {
type: Array,
default() {
return [];
}
},
componentName: {
type: String
},
chartName: {
type: String
},
typeValue: {
type: Object
},
status: {
type: String
}
},
data() {
return {};
},
created() {},
methods: {
drawPie(newVal) {
// var legend = [];
var seriesData = [];
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
// var legend = newVal.type_data.map((ele) => {
// return ele.name;
// });
newVal.type_data.forEach((ele) => {
// console.log(JSON.stringify(ele))
if (ele.quantity != 0) {
seriesData.push({
name: getNameFromTargetType(ele.name),
value: ele.quantity
});
// legend.push(ele.name)
}
});
}
// 判断数据是否为空
if (seriesData.length === 0) {
// 如果为空，动态添加一个默认项
seriesData = [
{
value: 0,
name: '无',
label: { show: false },
itemStyle: { color: '#EFEFEF' },
emphasis: {
disabled: true,
label: { show: false },
itemStyle: {
color: '#EFEFEF'
}
}
}
];
}
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
if (!myChart) {
myChart = this.$echarts.init(this.$refs.pieChart);
}
var color = [
'#0CD2E6',
'#3751E6',
'#FFC722',
'#00FFFF',
'#00FF80',
'#FFEA00',
'#FF7300',
'#9500B3',
'#3377FF',
'#5087EC',
'#68BBC4',
'#58A55C',
'#F2BD42',
'#EE752F',
'#D95040',
'#14CAFB'
];
let option = {
// title: {
// show: true,
// text: this.componentName + '-' + this.chartName + '-' + '饼状图',
// textStyle: {
// lineHeight: '30'
// }
// },
color: color,
animation: false,
legend: {
top: 20,
right: 10,
bottom: 20,
orient: 'vertical',
textStyle: {}
// data: legend
},
tooltip: {},
series: [
{
type: 'pie',
center: ['30%', '55%'],
radius: '70%',
labelLine: {
show: false,
length: 0,
length2: 0
},
label: {
normal: {
show: true,
position: 'inside',
formatter: '{value|{c}}',
rich: {
value: {
fontSize: 20,
color: '#ffffff'
}
}
}
},
data: seriesData
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
}
},
mounted() {
},
watch: {
list: {
handler: function (newval, oldVal) {
// console.log('pieChart', newval);
if (newval && newval.length > 0) {
this.$nextTick(() => {
this.drawPie(newval[0]);
});
}
},
deep: true,
immediate: true
}
}
};
</script>
<style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
</style>

276
src/components/newchart/regionTable.vue
View File

@ -1,276 +0,0 @@
<template>
<!-- 区域的表格 -->
<div class="tableContent">
<!-- <div class="down">
<el-dropdown trigger="click" @command="handleCommand">
<span class="moreIcon"></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">查看详情</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
<div v-if="msg" class="regionBox">
<!-- 实时触发 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态">
<template slot-scope="scope">
<span v-if="scope.row.occ == '1'">占用</span>
</template>
</el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态">
<template slot-scope="scope">
<span v-if="scope.row.occ == '1'">占用</span>
</template>
</el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<!-- 固定间隔 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>
<el-table-column align="center" prop="out_flow" label="驶离流量"></el-table-column>
<el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
<el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
<el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
<el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
<el-table-column align="center" prop="speed" label="平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
</div>
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
<el-form :model="msg" label-width="80px">
<el-form-item label="val1">
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
>
</el-time-select>
</el-form-item>
<el-form-item label="val2">
<el-select>
<el-option> </el-option>
</el-select>
</el-form-item>
<el-form-item label="val3">
<el-input v-model="dialogVisible"></el-input>
</el-form-item>
<el-form-item label="val4">
<el-checkbox-group v-model="checkList">
<el-checkbox label="数值"></el-checkbox>
<el-checkbox label="表格"></el-checkbox>
<el-checkbox label="时间曲线图"></el-checkbox>
<el-checkbox label="均值图"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary">确认</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
import tableShow from './tableShow.vue';
export default {
components: { tableShow },
name: 'tableShow', //表格组件
props: {
msg: {
type: Array
// default() {
// return [];
// }
},
triggerType: {
type: String
}
},
data() {
return {
getNameFromTargetType,
dialogVisible: false,
startTime: '',
endTime: '',
checkList: ['复选框 A']
};
},
methods: {
handleCommand(command) {
// 用户名下拉菜单选择事件
if (command == 'show') {
this.dialogVisible = true;
}
}
},
mounted() {
// console.log(this.type,'129129');
},
watch: {
msg: {
handler(newVal) {
// console.log(newVal,'流量数据table');
}
}
}
};
</script>
<style scoped lang="scss">
/deep/ .el-table {
// height: 709px !important;
// overflow-y: scroll;
z-index: 900;
}
.el-table::-webkit-scrollbar {
width: 0 !important;
}
.tableContent {
position: relative;
}
.down {
position: absolute;
top: -35px;
right: 5px;
z-index: 100;
}
.down .moreIcon {
width: 5px;
height: 18px;
background-size: 5px 18px;
background-image: url(../../assets/img/more.png);
display: block;
}
.el-form-item {
margin-bottom: 20px;
}
.tableContent {
border: 1px solid #e4e7ed;
}
</style>

312
src/components/newchart/tableShow.vue
View File

@ -1,312 +0,0 @@
<template>
<!-- 断面的表格 -->
<div class="tableContent">
<!-- <div class="down">
<el-dropdown trigger="click" @command="handleCommand">
<span class="moreIcon"></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">查看详情</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
<!-- 实时触发 -->
<!-- 实时触发 -->
<div v-if="msg && msg.length > 0">
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<!-- 固定间隔 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'">
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
<el-table-column align="center" prop="name" label="断面名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
<el-table-column align="center" prop="type" label="目标类型">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
<el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
<el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
<el-table-column align="center" prop="in_spd" label="入流平均速度">
<template slot-scope="scope">
{{
scope.row.in_spd && scope.row.in_spd != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.in_spd)
: scope.row.in_spd == '-1'
? '-'
: scope.row.in_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="out_spd" label="出流平均速度">
<template slot-scope="scope">
{{
scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
? Math.abs(scope.row.out_spd)
: scope.row.out_spd == '-1'
? '-'
: scope.row.out_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="speed" label="断面的平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
<el-form :model="msg" label-width="80px">
<el-form-item label="val1">
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
>
</el-time-select>
</el-form-item>
<el-form-item label="val2">
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="val3">
<el-input v-model="msg[0].val3"></el-input>
</el-form-item> -->
<el-form-item label="val4">
<el-checkbox-group v-model="checkList">
<el-checkbox label="数值"></el-checkbox>
<el-checkbox label="表格"></el-checkbox>
<el-checkbox label="时间曲线图"></el-checkbox>
<el-checkbox label="均值图"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary">确认</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'tableShow', //表格组件
props: {
msg: {
type: Array,
default() {
return [];
}
},
triggerType: {
type: String
}
},
data() {
return {
getNameFromTargetType,
dialogVisible: false,
startTime: '',
endTime: '',
checkList: ['复选框 A'],
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
],
value: ''
};
},
watch: {
msg: {
handler(newVal) {
// console.log('断面', newVal);
// console.log('断面-triggerType', this.triggerType);
}
// immediate: true
}
},
methods: {
handleCommand(command) {
// 用户名下拉菜单选择事件
if (command == 'show') {
this.dialogVisible = true;
}
},
onSubmit() {},
handleClose() {}
},
mounted() {}
};
</script>
<style scoped lang="scss">
/deep/ .el-table {
// height: 709px !important;
// overflow-y: scroll;
z-index: 900;
}
.el-table::-webkit-scrollbar {
width: 0 !important;
}
.tableContent {
position: relative;
}
.down {
position: absolute;
top: -35px;
right: 5px;
z-index: 100;
}
.down .moreIcon {
width: 5px;
height: 18px;
background-size: 5px 18px;
background-image: url(../../assets/img/more.png);
display: block;
}
.el-form-item {
margin-bottom: 20px;
}
</style>

240
src/components/newchart/thermalChart.vue
View File

@ -1,240 +0,0 @@
<template>
<div>
<div>当前数据时间：{{ time }}</div>
<div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
</div>
</template>
<script>
export default {
name: 'thermalChart', //热点图组件
data() {
return {
thermalChartData: [],
time: '',
};
},
created() {},
props: {
list: {
type: Array,
default() {
return [];
}
},
pageType: {
type: String
},
title: {
type: String
},
startEndData: {
type: Object,
default() {
return {};
}
},
// status: {
// type: String
// },
componentName: {
type: String
}
},
methods: {
//处理od组件数据
ODhanlde(odData) {
// console.log(odData,'oddata');
// var odData = this.odData
var chartData = [];
var start = [];
if (odData && odData.length > 0) {
for (let i = 0; i < odData.length; i++) {
let item = odData[i].data;
if (item && item.length > 0) {
for (let j = 0; j < item.length; j++) {
start.push(item[j].start);
// 数组去重
// od图的数据
chartData.push([j, i, item[j].quantity]);
// console.log([i,j,item[j].val]);
}
}
}
}
// this.thermalChartData = chartData
// console.log(chartData,'处理过后的odssssssssssssss');
return chartData;
// console.log(chartData, this.unique(start), 'od图的数据');
},
//数组去重
unique(arr) {
let newArr = [];
arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
isObject(variable) {
return typeof variable === 'object' && variable !== null && !Array.isArray(variable);
},
// 绘制热力图
drawThermalChart(odData, startEnd) {
let startEndStart = [],
startEndEnd = [];
if (this.isObject(startEnd)) {
if (startEnd.start) {
startEndStart = startEnd.start.split(',');
}
if (startEnd.start) {
startEndEnd = startEnd.end.split(',');
}
}
// console.log('title', this.title);
// console.log('componentName', this.componentName);
// console.log('odData', odData);
// console.log('startEnd', startEnd);
// console.log('x-startEndStart', startEndStart);
// console.log('y-startEndEnd', startEndEnd);
// console.log('series', this.ODhanlde(odData));
let myChart = this.$echarts.init(this.$refs.thermalChart);
let option = {
dataZoom: [
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
startValue: 0,
endValue: 10,
filterMode: 'empty'
}
],
tooltip: {
position: 'top'
// formatter: function (params) {
// return (
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
// );
// },
},
animation: false,
grid: {
left: '0%',
right: '11%',
bottom: '11%',
containLabel: true
},
xAxis: {
type: 'category',
data: startEndStart,
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 0
},
splitArea: {
show: true
},
name: "起点",
nameTextStyle:{
verticalAlign:'top',
padding:[8,0,0,0]
}
},
yAxis: {
type: 'category',
data: startEndEnd,
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 0
},
splitArea: {
show: true
},
name: "终点",
nameLocation:'end',
nameTextStyle:{
verticalAlign:'bottom',
padding:[0,40,0,0]
}
},
visualMap: {
min: 1,
max: 50,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '1%',
text: ['50', '1'], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'],
calculable: false,
color: ['#22DDDD', '#fec42c', '#80F1BE']
},
series: [
{
name: 'OD图',
type: 'heatmap',
data: this.ODhanlde(odData),
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(120, 0, 0, 0.5)'
}
}
}
]
};
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
}
},
mounted() {
this.drawThermalChart();
},
watch: {
list: {
handler: function (newval, oldVal) {
if (newval && newval.length > 0) {
// console.log('OD',newval)
this.$nextTick(() => {
this.time = newval[0].time
this.drawThermalChart(newval[0].ob_data, this.startEndData);
});
}
},
deep: true,
immediate: true
}
}
};
</script>
<style scoped>
.a {
color: rgba(120, 0, 0, 0.5);
}
</style>

284
src/components/sensorFusion/echartsBar copy.vue
View File

@ -1,284 +0,0 @@
<template>
<div :id="echartsRef" ref="echartsBar"></div>
</template>
<script>
export default {
name: 'echartsBar', //折线图组件
props: {
intersectionName: {
type: Array,
default() {
return [];
}
},
chatShowType: {
type: String
},
echartsRef: {
type: String
},
dataList: {
type: Array,
default() {
return [];
}
},
timeMode: {
type: String
}
},
data() {
return {
chart: null,
chartData: {
yData: [],
xData: []
}, //表格数据
seriesList: [] //类型数组
};
},
created() {},
methods: {
//传值对应字段返回相应字段数组
initEcharts() {
// if (this.dataList.length > 10) {
// this.dataList = this.dataList.slice(-10);
// }
if (this.timeMode == '实时触发') {
this.chartData.xData = [];
this.chartData.yData = [];
// debugger;
// if (this.dataList[0].type_data.length > 0) {
// for (let i = 0; i < this.dataList[0].type_data.length; i++) {
// this.chartData.yData.push(this.dataList[0].type_data[i].quantity);
// this.chartData.xData.push(this.dataList[0].type_data[i].name);
// }
// }
if (this.dataList.length > 0 && this.dataList[0].type_data) {
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
let quantity = this.dataList[0].type_data[j].quantity;
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) {
quantity = this.dataList[0].type_data[j].value;
}
this.chartData.yData.push(quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
// if (this.dataList[0].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[0].type_data[j].value);
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
// }
}
}
} else if (this.timeMode == '固定时刻') {
// for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
// this.chartData.yData = [];
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
// if (this.dataList[i].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// }
// }
// }
this.chartData.xData = [];
this.chartData.yData = [];
if (this.dataList.length > 0 && this.dataList[0].type_data) {
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
let quantity = this.dataList[0].type_data[j].quantity;
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) {
quantity = this.dataList[0].type_data[j].value;
}
this.chartData.yData.push(quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
// if (this.dataList[0].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[0].type_data[j].value);
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
// }
}
}
} else if (this.timeMode == '固定间隔') {
// for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
// this.chartData.yData = [];
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
// if (this.dataList[i].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// }
// }
// }
this.chartData.xData = [];
this.chartData.yData = [];
if (this.dataList.length > 0 && this.dataList[0].type_data) {
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
let quantity = this.dataList[0].type_data[j].quantity;
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) {
quantity = this.dataList[0].type_data[j].value;
}
this.chartData.yData.push(quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
// if (this.dataList[0].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[0].type_data[j].value);
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
// }
}
}
}
let myChart = this.chart;
let option = {
color: ['#7262FD', '#FC5A5A'],
tooltip: {
confine: true
},
grid: {
top: '5%',
left: '5%',
right: '5%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.chartData.xData,
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
fontSize: 12,
color: '#000',
rotate: 30
},
axisTick: {
show: false
}
},
yAxis: [
{
type: 'value',
min: 0,
minInterval: 1,
splitArea: {
show: false
},
axisLine: {
show: true
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#eeebeb',
type: 'dashed' // dotted 虚线
}
},
axisLabel: {
fontSize: 12,
color: '#000',
fontFamily: 'Bebas'
}
}
],
series: [
{
type: 'bar',
barWidth: 20,
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
name: '时间',
data: this.chartData.yData
}
]
};
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
this.$nextTick(() => {
myChart.resize();
});
}
}
},
mounted() {
let that = this;
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = '440px';
$dom.style.height = '260px';
// setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
// }, 300);
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
}
},
chatShowType: {
handler: function (oldValues, newValues) {}
},
echartsRef: {
handler: function (oldValues, newValues) {
console.log('old', oldValues);
console.log('newV', newValues);
let that = this;
setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
}
},
dataList: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
this.initEcharts();
});
}
}
}
};
</script>
<style lang="less" scoped>
#echartsBar {
width: 100%;
height: 100%;
}
</style>

369
src/components/sensorFusion/echartsBar.vue
View File

@ -1,129 +1,268 @@
<template> <template>
<div :id="echartsRef" ref="echartsBar"></div> <div :id="echartsRef" ref="echartsBar"></div>
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType'; export default {
export default { name: "echartsBar", //折线图组件
name: 'echartsBar', props: {
props: { intersectionName: {
intersectionName: { type: Array, default: () => [] }, type: Array,
chatShowType: { type: String }, default() {
echartsRef: { type: String }, return [];
dataList: { type: Array, default: () => [] },
timeMode: { type: String },
},
data() {
return {
chart: null,
chartData: { yData: [], xData: [] },
};
},
computed: {
option() {
return {
color: ['#7262FD', '#FC5A5A'],
tooltip: { confine: true },
grid: { top: '5%', left: '5%', right: '5%', bottom: '0%', containLabel: true },
xAxis: {
type: 'category',
data: this.chartData.xData,
axisLine: { lineStyle: { color: '#000' } },
axisLabel: { interval: 0, fontSize: 12, color: '#000', rotate: 30 },
axisTick: { show: false },
},
yAxis: [
{
type: 'value',
min: 0,
minInterval: 1,
splitArea: { show: false },
axisLine: { show: true },
axisTick: { show: false },
splitLine: { lineStyle: { color: '#eeebeb', type: 'dashed' } },
axisLabel: { fontSize: 12, color: '#000', fontFamily: 'Bebas' },
},
],
series: [
{
type: 'bar',
barWidth: 20,
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
name: '时间',
data: this.chartData.yData,
},
],
};
}, },
}, },
methods: { chatShowType: {
initData() { type: String,
},
echartsRef: {
type: String,
},
dataList: {
type: Array,
default() {
return [];
},
},
timeMode: {
type: String,
},
},
data() {
return {
chart: null,
chartData: {
yData: [],
xData: [],
}, //表格数据
seriesList: [], //类型数组
};
},
created() {},
methods: {
//传值对应字段返回相应字段数组
initEcharts() {
// if (this.dataList.length > 10) {
// this.dataList = this.dataList.slice(-10);
// }
if (this.timeMode == "实时触发") {
this.chartData.xData = []; this.chartData.xData = [];
this.chartData.yData = []; this.chartData.yData = [];
// debugger;
if (this.dataList.length > 0 && this.dataList[0].type_data) { // if (this.dataList[0].type_data.length > 0) {
for (let j = 0; j < this.dataList[0].type_data.length; j++) { // for (let i = 0; i < this.dataList[0].type_data.length; i++) {
let quantity = this.dataList[0].type_data[j].quantity; // this.chartData.yData.push(this.dataList[0].type_data[i].quantity);
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) { // this.chartData.xData.push(this.dataList[0].type_data[i].name);
quantity = this.dataList[0].type_data[j].value; // }
} // }
this.chartData.yData.push(quantity); if(this.dataList.length>0&&this.dataList[0].type_data){
this.chartData.xData.push(getNameFromTargetType(this.dataList[0].type_data[j].name)); for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
} else {
this.chartData.yData.push(this.dataList[0].type_data[j].value);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
} }
} }
},
initEcharts() {
this.initData();
let myChart = this.chart;
if (myChart === null) {
myChart = this.$echarts.init(document.getElementById(this.echartsRef));
} }
} else if (this.timeMode == "固定时刻") {
myChart.setOption(this.option); // for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
window.addEventListener('resize', () => myChart.resize()); // this.chartData.yData = [];
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
this.$nextTick(() => myChart.resize()); // if (this.dataList[i].type_data[j].value == undefined) {
}, // this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// }
// }
// }
this.chartData.xData = [];
this.chartData.yData = [];
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
} else {
this.chartData.yData.push(this.dataList[0].type_data[j].value);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
} else if (this.timeMode == "固定间隔") {
// for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
// this.chartData.yData = [];
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
// if (this.dataList[i].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// }
// }
// }
this.chartData.xData = [];
this.chartData.yData = [];
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
} else {
this.chartData.yData.push(this.dataList[0].type_data[j].value);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
}
let myChart = this.chart;
let option = {
color: ["#7262FD", "#FC5A5A"],
tooltip: {
confine: true,
},
grid: {
top: "30%",
left: "5%",
right: "5%",
bottom: "8%",
containLabel: true,
},
xAxis: {
type: "category",
data: this.chartData.xData,
axisLine: {
lineStyle: {
color: "#000",
},
},
axisLabel: {
fontSize: 12,
color: "#000",
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: "value",
min: 0,
minInterval: 1,
splitArea: {
show: false,
},
axisLine: {
show: true,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#eeebeb",
type: "dashed", // dotted 虚线
},
},
axisLabel: {
fontSize: 12,
color: "#000",
fontFamily: "Bebas",
},
},
],
series: [
{
type: "bar",
barWidth: 20,
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
name: "时间",
data: this.chartData.yData,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
this.$nextTick(() => {
myChart.resize();
});
}, },
mounted() { },
const $dom = document.getElementById(this.echartsRef); mounted() {
$dom.style.width = '440px'; let that = this;
$dom.style.height = '260px'; const $dom = document.getElementById(this.echartsRef);
$dom.style.width = "440px";
setTimeout(() => { $dom.style.height = "260px";
setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => { this.$nextTick(() => {
this.chart = this.$echarts.init(this.$el);
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
this.initEcharts(); this.initEcharts();
}); });
}, 300);
},
watch: {
intersectionName: {
handler() {
this.$nextTick(this.initEcharts);
},
},
chatShowType: { handler() {} },
echartsRef: {
handler() {
setTimeout(() => this.$nextTick(this.initEcharts), 300);
},
},
dataList: {
handler() {
this.$nextTick(this.initEcharts);
},
}, },
}, },
}; chatShowType: {
</script> handler: function (oldValues, newValues) {},
},
<style lang="less" scoped> echartsRef: {
#echartsBar { handler: function (oldValues, newValues) {
width: 100%; console.log("old", oldValues);
height: 100%; console.log("newV", newValues);
} let that = this;
</style> setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
},
},
dataList: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
this.initEcharts();
});
},
},
},
};
</script>
<style lang="less" scoped>
#echartsBar {
width: 100%;
height: 100%;
}
</style>

289
src/components/sensorFusion/echartsLine.vue
View File

@ -3,7 +3,6 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'echartsLine', //折线图组件 name: 'echartsLine', //折线图组件
props: { props: {
@ -64,45 +63,9 @@ export default {
if (key == 'speed' && item[key]) { if (key == 'speed' && item[key]) {
return Math.abs(item[key]); return Math.abs(item[key]);
} }
if ((key == 'ave_headway' || key == 'headway') && item[key]) {
if (item[key] == -1) {
return '-';
}
}
return item[key]; return item[key];
}); });
}, },
//过滤重复的 time 字段，保留每个 time 最后一个对象
filteredArrayFun(originalArray, targetTime) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 确保 targetTime 是有效的日期字符串
const targetDate = targetTime ? new Date(targetTime) : null;
// 过滤比目标时间小的对象
if (targetDate) {
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
}
// 按照时间从小到大排序
const sortedArray = uniqueArray.sort((a, b) => {
const dateA = new Date(a.time);
const dateB = new Date(b.time);
return dateA - dateB;
});
return sortedArray;
},
//数据判断处理 //数据判断处理
dataProcessing(val) { dataProcessing(val) {
if (val && val.length > 10) { if (val && val.length > 10) {
@ -110,62 +73,39 @@ export default {
// this.typeData = this.typeData.slice(-10); // this.typeData = this.typeData.slice(-10);
} }
if (val != null) { if (val != null) {
let xData = [],
yData = [];
let targetTime = '';
if (this.chartData.xData.length > 0) {
targetTime = this.chartData.xData[this.chartData.xData.length - 1].time;
}
if (this.componentType != '类型') {
//类型种类特殊不能去除时间重复项，不走下面去重逻辑
val = this.filteredArrayFun(val, targetTime);
}
if (this.timeMode == '实时触发') { if (this.timeMode == '实时触发') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'headway'); this.chartData.yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow'); this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow'); this.chartData.yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed'); this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
// console.log('实时触发-类型-', val); this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0); for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; //quantity
if (firstLevel && firstLevel.length > 0) { const valueList = seriesArr.map((arr) => {
for (let i = 0; i < firstLevel.length; i++) { let t = arr[i].value;
const item = firstLevel[i]; if (arr[i].quantity || arr[i].quantity === 0) {
t = arr[i].quantity;
if (item) {
const valueList = seriesArr.map((arr) => {
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
transformedData.push({
name: getNameFromTargetType(item.name),
value: valueList
});
} }
} return t;
});
transformedData.push({
name: item.name,
value: valueList
});
} }
} }
let totalCountList = 0; let totalCountList = 0;
@ -179,128 +119,105 @@ export default {
name: '总数', name: '总数',
value: totalCountList value: totalCountList
}); });
this.seriesList = this.seriesList.concat(transformedData).slice(-10); this.seriesList = transformedData;
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_stay'); this.chartData.yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_queue'); this.chartData.yData = this.extractKeyValues(val, 'n_queue');
} }
} else if (this.timeMode == '固定时刻') { } else if (this.timeMode == '固定时刻') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'headway'); this.chartData.yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow'); this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow'); this.chartData.yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed'); this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
// this.chartData.xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
// console.log('seriesArr-固定时刻', seriesArr); // console.log('seriesArr-固定时刻', seriesArr);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0); for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
if (firstLevel && firstLevel.length > 0) { //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
for (let i = 0; i < firstLevel.length; i++) { // const valueList = seriesArr.map((arr) => arr[i].quantity);
const item = firstLevel[i]; const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (item) { if (arr[i].quantity || arr[i].quantity === 0) {
const valueList = seriesArr.map((arr) => { t = arr[i].quantity;
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
transformedData.push({
name: getNameFromTargetType(item.name),
value: valueList
});
} }
} return t;
});
transformedData.push({
name: item.name,
value: valueList
});
} }
} }
// console.log('transformedData-1',transformedData) // console.log('transformedData-1',transformedData)
let totalCountList = 0; const totalCountList = transformedData[0].value.map((_, i) => {
if (transformedData.length > 0 && transformedData[0].value) { return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
totalCountList = transformedData[0].value.map((_, i) => { });
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
}
transformedData.push({ transformedData.push({
name: '总数', name: '总数',
value: totalCountList value: totalCountList
}); });
this.seriesList = this.seriesList.concat(transformedData).slice(-10); this.seriesList = transformedData;
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_stay'); this.chartData.yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_queue'); this.chartData.yData = this.extractKeyValues(val, 'n_queue');
} }
} else if (this.timeMode == '固定间隔') { } else if (this.timeMode == '固定间隔') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_headway'); this.chartData.yData = this.extractKeyValues(val, 'ave_headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow'); this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow'); this.chartData.yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed'); this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
// console.log('固定间隔-类型-val-', val);
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
// console.log('固定间隔-类型-seriesArr-', seriesArr); // console.log('固定间隔-类型-seriesArr-', seriesArr);
// console.log('固定间隔-类型-xData-', this.chartData.xData); // console.log('固定间隔-类型-xData-', this.chartData.xData);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0); for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
if (firstLevel && firstLevel.length > 0) { //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
for (let i = 0; i < firstLevel.length; i++) { // const valueList = seriesArr.map((arr) => arr[i].value);
const item = firstLevel[i]; const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (item) { if (arr[i].quantity || arr[i].quantity === 0) {
const valueList = seriesArr.map((arr) => { t = arr[i].quantity;
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
transformedData.push({
name: getNameFromTargetType(item.name),
value: valueList
});
} }
} return t;
});
transformedData.push({
name: item.name,
value: valueList
});
} }
} }
@ -315,25 +232,19 @@ export default {
name: '总数', name: '总数',
value: totalCountList value: totalCountList
}); });
this.seriesList = this.seriesList.concat(transformedData).slice(-10); this.seriesList = transformedData;
// console.log('固定间隔-类型-transformedData-2', transformedData); // console.log('固定间隔-类型-transformedData-2', transformedData);
} else if (this.componentType == '延误') { } else if (this.componentType == '延误') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_delay'); this.chartData.yData = this.extractKeyValues(val, 'ave_delay');
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_stay'); this.chartData.yData = this.extractKeyValues(val, 'ave_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_queue'); this.chartData.yData = this.extractKeyValues(val, 'ave_queue');
} }
} }
this.chartData.xData = this.chartData.xData.concat(xData).slice(-10);
if (this.componentType != '类型') {
//类型是特殊的不走这边处理
this.chartData.yData = this.chartData.yData.concat(yData).slice(-10);
}
} else { } else {
return false; return false;
} }
@ -443,8 +354,7 @@ export default {
{ {
// name: '流量_1-zone2-曲线图-实时触发', // name: '流量_1-zone2-曲线图-实时触发',
type: 'line', type: 'line',
// data: this.chartData.yData.reverse(), data: this.chartData.yData.reverse(),
data: this.chartData.yData,
symbolSize: 8, //标记的大小 symbolSize: 8, //标记的大小
lineStyle: { lineStyle: {
color: 'rgb(255,115,38)', color: 'rgb(255,115,38)',
@ -494,7 +404,7 @@ export default {
}, },
legend: { legend: {
// 图例过多时滚动 // 图例过多时滚动
type: 'scroll', type: "scroll",
left: 'center', left: 'center',
top: 0, top: 0,
left: '10%', left: '10%',
@ -516,8 +426,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.chartData.xData.reverse(), data: this.chartData.xData.reverse(),
data: this.chartData.xData,
axisLine: { axisLine: {
show: false show: false
}, },
@ -567,12 +476,10 @@ export default {
], ],
series: seriesList series: seriesList
}; };
if (myChart) { myChart.setOption(option);
myChart.setOption(option); window.addEventListener('resize', () => {
window.onresize = () => { myChart.resize();
myChart.resize(); });
};
}
} }
}, },
mounted() { mounted() {
@ -581,11 +488,11 @@ export default {
$dom.style.width = '440px'; $dom.style.width = '440px';
$dom.style.height = '260px'; $dom.style.height = '260px';
setTimeout(() => { setTimeout(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.$nextTick(() => { that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts(); that.initEcharts();
}); });
}, 300); }, 300);

64
src/components/sensorFusion/echartsPie.vue
View File

@ -3,7 +3,6 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'echartsPie', //折线图组件 name: 'echartsPie', //折线图组件
props: { props: {
@ -94,33 +93,6 @@ export default {
} }
} }
} }
if(seriesData&&seriesData.length>0){
let temp=[];
seriesData.forEach((ele) => {
if (ele.value != 0) {
ele.name = getNameFromTargetType(ele.name);
temp.push(ele)
}
})
seriesData = temp
}
if(!seriesData||seriesData.length==0){
seriesData = [
{
value: 0,
name: '无',
label: { show: false },
itemStyle: { color: '#e1e1e1' },
emphasis: {
disabled: true,
label: { show: false },
itemStyle: {
color: '#e1e1e1'
}
}
}
];
}
var color = [ var color = [
'#0CD2E6', '#0CD2E6',
@ -150,17 +122,11 @@ export default {
color: color, color: color,
animation: false, animation: false,
legend: { legend: {
top: 5, top: 20,
right: 5, right: 'center',
bottom: 5,
orient: 'vertical',
textStyle: {}, textStyle: {},
type: 'scroll', type: 'scroll',
// top: 0, width: '80%'
// right: 'center',
// textStyle: {},
// type: 'scroll',
// width: '80%'
// data: [ // data: [
// { // {
// name: '流量_1-zone2-饼状图-实时触发', // name: '流量_1-zone2-饼状图-实时触发',
@ -187,9 +153,9 @@ export default {
}, },
series: [ series: [
{ {
name: '', name: '流量_1-zone2-饼状图-实时触发',
type: 'pie', type: 'pie',
center: ['33%', '50%'], center: ['50%', '55%'],
radius: '70%', radius: '70%',
label: { label: {
normal: { normal: {
@ -218,15 +184,13 @@ export default {
} }
] ]
}; };
if (myChart) { myChart.setOption(option);
myChart.setOption(option); window.addEventListener('resize', () => {
window.addEventListener('resize', () => { myChart.resize();
myChart.resize(); });
}); this.$nextTick(() => {
this.$nextTick(() => { myChart.resize();
myChart.resize(); });
});
}
} }
}, },
mounted() { mounted() {
@ -257,8 +221,8 @@ export default {
}, },
echartsRef: { echartsRef: {
handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
// console.log('old', oldValues); console.log('old', oldValues);
// console.log('newV', newValues); console.log('newV', newValues);
let that = this; let that = this;
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {

713
src/components/sensorFusion/meanValue.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<!-- 均值图 --> <!-- 均值图 -->
<!-- <div style="width: 100%;margin-top: 5px;"> --> <!-- <div style="width: 100%;margin-top: 5px;"> -->
<!-- <div class="tableTitle"> <!-- <div class="tableTitle">
<div> <div>
<span <span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;" style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
@ -9,383 +9,372 @@
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span> <span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
</div> </div>
</div> --> </div> -->
<div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div> <div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div>
<!-- </div> --> <!-- </div> -->
</template> </template>
<script> <script>
export default { export default {
name: 'barChart', //均值图图组件 name: "barChart", //均值图图组件
props: { props: {
list: { list: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
typeValue: { typeValue: {
type: Object type: Object,
}, },
// 组件名称 // 组件名称
componentName: { componentName: {
type: String type: String,
}, },
chartName: { chartName: {
type: String type: String,
}, },
status: { status: {
type: String type: String,
}, },
intersectionName: { intersectionName: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
chatShowType: { chatShowType: {
type: String type: String,
}, },
echartsRef: { echartsRef: {
type: String type: String,
}, },
dataList: { dataList: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
},
},
data() {
return {
max: [],
min: [],
med: [],
avg: [],
};
},
methods: {
initEcharts() {
this.max = [];
this.min = [];
this.med = [];
this.avg = [];
// console.log("均值图",arr)
// let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
// if (myChart == null) {
// myChart = this.$echarts.init(this.$refs.barChart);
// }
// this.dataProcessing(this.dataList);
if (this.dataList.length > 10) {
this.dataList = this.dataList.slice(-10);
}
for (let i = 0; i < this.dataList.length; i++) {
if(this.dataList[i].max) {
this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
}else {
this.max.push(0);
} }
},
data() {
return {
max: [],
min: [],
med: [],
avg: []
};
},
methods: {
initEcharts() {
// this.max = [];
// this.min = [];
// this.med = [];
// this.avg = [];
// // console.log("均值图",arr)
// // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
// // if (myChart == null) {
// // myChart = this.$echarts.init(this.$refs.barChart);
// // }
// // this.dataProcessing(this.dataList);
// if (this.dataList.length > 10) {
// this.dataList = this.dataList.slice(-10);
// }
// for (let i = 0; i < this.dataList.length; i++) {
// if (this.dataList[i].max) {
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
// } else {
// this.max.push(0);
// }
// if (this.dataList[i].min) { if(this.dataList[i].min) {
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2))); this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
// } else { }else {
// this.min.push(0); this.min.push(0);
// }
// if (this.dataList[i].med) {
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
// } else {
// this.med.push(0);
// }
// if (this.dataList[i].avg) {
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
// } else {
// this.avg.push(0);
// }
// // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
// // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
// // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
// // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
// }
let maxData = '';
let minData = '';
let medData = '';
let avgData = '';
// for (let i = 0; i < this.max.length; i++) {
// maxData = this.max[i];
// }
// for (let i = 0; i < this.min.length; i++) {
// minData = this.min[i];
// }
// for (let i = 0; i < this.med.length; i++) {
// medData = this.med[i];
// }
// for (let i = 0; i < this.avg.length; i++) {
// avgData = this.avg[i];
// }
let arr = {};
if(this.dataList&&this.dataList.length>0){
arr = this.dataList[0]
}
if (arr && Object.keys(arr).length > 0) {
avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
maxData = arr.max ? Math.abs(arr.max).toFixed(2) : 0;
minData = arr.min ? Math.abs(arr.min).toFixed(2) : 0;
}
let myChart = this.chart;
let chartData = [{ stage: '', number: 40 }];
let option = {
tooltip: {},
color: ['#0EECE4'],
grid: {
left: '0%',
right: '0%',
bottom: '10%',
top: '15%',
z: 22
},
xAxis: [
{
type: 'category',
gridIndex: 0,
data: chartData.map((item) => item.stage),
axisLine: {
show: false
},
axisLabel: {
show: false
}
}
],
yAxis: {
type: 'value',
splitArea: { show: false },
gridIndex: 0,
min: 0,
splitNumber: 12,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
max: 200
},
series: [
{
name: '外框',
type: 'bar',
barGap: '-120%', // 设置外框粗细
data: [300],
barWidth: 150,
itemStyle: {
normal: {
color: 'rgba(0,0,0,.1)', // 填充色
barBorderWidth: 1, // 边框宽度
label: {
// 标签显示位置
show: false
}
}
},
z: 1
},
{
name: '平均值',
type: 'bar',
stack: 'val',
barWidth: 150,
xAxisIndex: 0,
yAxisIndex: 0,
label: {
show: true,
position: 'right',
// offset: [10, 20],
distance: 15,
color: '#000',
fontSize: 17,
formatter: '{c}' + '[avg]'
},
itemStyle: {
color: '#89c6ff'
},
data: [avgData],
zlevel: 9
},
{
name: '中间值',
type: 'bar',
barWidth: 150,
stack: 'val',
label: {
show: true,
position: 'left',
distance: 15,
color: '#000',
fontSize: 17,
formatter: '{c}' + '[med]',
rich: {}
},
itemStyle: {
color: '#67b4fd'
},
data: [medData],
zlevel: 9
},
{
name: '最大值',
type: 'bar',
stack: 'val',
barWidth: 150,
barGap: '-100%',
data: [maxData],
label: {
show: true,
position: 'right',
distance: 10,
color: '#000',
fontSize: 17,
offset: [0, -30],
formatter: '{c}' + '[max]'
},
itemStyle: {
color: '#319cff'
},
zlevel: 9
},
{
name: '最小值',
type: 'bar',
stack: 'val',
barWidth: 150,
barGap: '-100%',
data: [minData],
label: {
offset: [10, 20],
show: true,
position: 'left',
distance: 10,
color: '#000',
offset: [0, -30],
fontSize: 17,
formatter: '{c}' + '[min]'
},
// tooltip: {
// backgroundColor: 'transparent',
// formatter: ' '
// },
itemStyle: {
color: '#328adc'
},
zlevel: 9
}
]
};
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
} }
if(this.dataList[i].med) {
this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
}else {
this.med.push(0);
}
if(this.dataList[i].avg) {
this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
}else {
this.avg.push(0);
}
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
}
let maxData = "";
let minData = "";
let medData = "";
let avgData = "";
for (let i = 0; i < this.max.length; i++) {
maxData = this.max[i];
}
for (let i = 0; i < this.min.length; i++) {
minData = this.min[i];
}
for (let i = 0; i < this.med.length; i++) {
medData = this.med[i];
}
for (let i = 0; i < this.avg.length; i++) {
avgData = this.avg[i];
}
let myChart = this.chart;
let chartData = [{ stage: "", number: 40 }];
let option = {
tooltip: {},
color: ["#0EECE4"],
grid: {
left: "0%",
right: "0%",
bottom: "10%",
top: "15%",
z: 22,
},
xAxis: [
{
type: "category",
gridIndex: 0,
data: chartData.map((item) => item.stage),
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
],
yAxis: {
type: "value",
splitArea: { show: false },
gridIndex: 0,
min: 0,
splitNumber: 12,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
max: 200,
},
series: [
{
name: "外框",
type: "bar",
barGap: "-120%", // 设置外框粗细
data: [300],
barWidth: 150,
itemStyle: {
normal: {
color: "rgba(0,0,0,.1)", // 填充色
barBorderWidth: 1, // 边框宽度
label: {
// 标签显示位置
show: false,
},
},
},
z: 1,
},
{
name: "平均值",
type: "bar",
stack: "val",
barWidth: 150,
xAxisIndex: 0,
yAxisIndex: 0,
label: {
show: true,
position: "right",
// offset: [10, 20],
distance: 15,
color: "#000",
fontSize: 17,
formatter: "{c}" + "[avg]",
},
itemStyle: {
color: "#89c6ff",
},
data: [avgData],
zlevel: 9,
},
{
name: "中间值",
type: "bar",
barWidth: 150,
stack: "val",
label: {
show: true,
position: "left",
distance: 15,
color: "#000",
fontSize: 17,
formatter: "{c}" + "[med]",
rich: {},
},
itemStyle: {
color: "#67b4fd",
},
data: [medData],
zlevel: 9,
},
{
name: "最大值",
type: "bar",
stack: "val",
barWidth: 150,
barGap: "-100%",
data: [maxData],
label: {
show: true,
position: "right",
distance: 10,
color: "#000",
fontSize: 17,
offset: [0, -30],
formatter: "{c}" + "[max]",
},
itemStyle: {
color: "#319cff",
},
zlevel: 9,
},
{
name: "最小值",
type: "bar",
stack: "val",
barWidth: 150,
barGap: "-100%",
data: [minData],
label: {
offset: [10, 20],
show: true,
position: "left",
distance: 10,
color: "#000",
offset: [0, -30],
fontSize: 17,
formatter: "{c}" + "[min]",
},
// tooltip: {
// backgroundColor: 'transparent',
// formatter: ' '
// },
itemStyle: {
color: "#328adc",
},
zlevel: 9,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
}, },
mounted() { },
mounted() {
let that = this;
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = "440px";
$dom.style.height = "260px";
setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
},
},
chatShowType: {
handler: function (oldValues, newValues) {
let that = this; let that = this;
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = '440px';
$dom.style.height = '260px';
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef)); this.chart = this.$echarts.getInstanceByDom(
if (this.chart == null) { document.getElementById(this.echartsRef)
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); );
} if (this.chart == null) {
that.initEcharts(); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}); }
that.initEcharts();
});
}, 300); }, 300);
},
}, },
watch: { echartsRef: {
intersectionName: { handler: function (oldValues, newValues) {
handler: function (oldValues, newValues) { console.log("old", oldValues);
this.$nextTick(() => { console.log("newV", newValues);
this.initEcharts(); let that = this;
}); setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
} }
}, that.initEcharts();
chatShowType: { });
handler: function (oldValues, newValues) { }, 300);
let that = this; },
setTimeout(() => { },
that.$nextTick(() => { dataList: {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef)); handler: function (oldValues, newValues) {
if (this.chart == null) { this.$nextTick(() => {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); this.chart = this.$echarts.getInstanceByDom(
} document.getElementById(this.echartsRef)
that.initEcharts(); );
}); if (this.chart == null) {
}, 300); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
} }
}, this.initEcharts();
echartsRef: { });
handler: function (newValues, oldValues) { },
// console.log('old', oldValues); },
// console.log('newV', newValues); },
let that = this;
setTimeout(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
that.initEcharts();
});
}, 300);
}
},
dataList: {
handler: function (newValues, oldValues) {
// if(newValues&&newValues.length>0) {
// if(newValues[0].name=='gate1'){
// console.log('newV', newValues);
// }
// }
this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
this.initEcharts();
});
}
}
}
}; };
</script> </script>
<style> <style>
.tableTitle { .tableTitle {
background: #f7f8fa; background: #f7f8fa;
margin-bottom: 5px; margin-bottom: 5px;
padding: 8px; padding: 8px;
} }
#meanValue { #meanValue {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

222
src/components/sensorFusion/regionTable.vue
View File

@ -1,222 +0,0 @@
<template>
<!-- 区域的表格 -->
<div class="tableContent">
<div v-if="tableData && tableData.length > 0">
<!-- 实时触发 -->
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '实时触发'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态">
<template slot-scope="scope">
<span v-if="scope.row.occ == '1'">占用</span>
</template>
</el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定时刻'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态">
<template slot-scope="scope">
<span v-if="scope.row.occ == '1'">占用</span>
</template>
</el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<!-- 固定间隔 -->
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定间隔'">
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>
<el-table-column align="center" prop="out_flow" label="驶离流量"></el-table-column>
<el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
<el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
<el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
<el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
<el-table-column align="center" prop="speed" label="平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
</div>
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'regionTable',
props: {
tableData: {
type: Array,
default() {
return [];
}
},
triggerType: {
type: String
}
},
data() {
return {
getNameFromTargetType,
//表格字段备注
tableOptions: [
{
type: '实时触发',
column: [
{ prop: 'name', label: '区域名称' },
{ prop: 'time', label: '时间戳' },
{ prop: 'type', label: '目标类型' },
{ prop: 'n_stay', label: '存车数' },
{ prop: 'n_queue', label: '排队数' },
{ prop: 'occ', label: '占用状态' },
{ prop: 'speed', label: '空间平均速度' }
]
},
{
type: '固定时刻',
column: [
{ prop: 'name', label: '区域名称' },
{ prop: 'time', label: '时间戳' },
{ prop: 'type', label: '目标类型' },
{ prop: 'n_stay', label: '存车数' },
{ prop: 'n_queue', label: '排队数' },
{ prop: 'occ', label: '占用状态' },
{ prop: 'speed', label: '空间平均速度' }
]
},
{
type: '固定间隔',
column: [
{ prop: 'name', label: '区域名称' },
{ prop: 'time', label: '时间戳' },
{ prop: 'type', label: '目标类型' },
{ prop: 'in_flow', label: '驶入流量' },
{ prop: 'out_flow', label: '驶离流量' },
{ prop: 'ave_stay', label: '平均存车数' },
{ prop: 'ave_queue', label: '平均排队数' },
{ prop: 'ave_occ', label: '平均占有率' },
{ prop: 'ave_delay', label: '平均延误' },
{ prop: 'speed', label: '平均速度' }
]
}
]
};
},
methods: {}
};
</script>
<style scoped lang="scss">
.tableContent {
position: relative;
width: 100%;
// height: 100%;
}
</style>

242
src/components/sensorFusion/tableShow.vue
View File

@ -1,242 +0,0 @@
<template>
<!-- 断面的表格 -->
<div class="tableContent">
<div v-if="tableData && tableData.length > 0">
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '实时触发'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<el-table :data="msg" style="width: 100%" v-if="triggerType == '固定时刻'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
<el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
<!-- 固定间隔 -->
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定间隔'">
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
<el-table-column align="center" prop="name" label="断面名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
<el-table-column align="center" prop="type" label="目标类型">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template> -->
</el-table-column>
<el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
<el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
<el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
<el-table-column align="center" prop="in_spd" label="入流平均速度">
<template slot-scope="scope">
{{
scope.row.in_spd && scope.row.in_spd != '-' && scope.row.in_spd != '-1'
? Math.abs(scope.row.speed)
: scope.row.in_spd == '-1'
? '-'
: scope.row.in_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="out_spd" label="出流平均速度">
<template slot-scope="scope">
{{
scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
? Math.abs(scope.row.out_spd)
: scope.row.out_spd == '-1'
? '-'
: scope.row.out_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="speed" label="断面的平均速度">
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
</div>
</template>
<script>
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'tableShow',
props: {
tableData: {
type: Array,
default() {
return [];
}
},
triggerType: {
type: String
}
},
data() {
return {
getNameFromTargetType,
//表格字段备注
tableOptions: [
{
type: '实时触发',
column: [
{ prop: 'name', label: '区域名称' },
{ prop: 'time', label: '时间戳' },
{ prop: 'type', label: '目标类型' },
{ prop: 'n_stay', label: '存车数' },
{ prop: 'n_queue', label: '排队数' },
{ prop: 'occ', label: '占用状态' },
{ prop: 'speed', label: '空间平均速度' }
]
},
{
type: '固定时刻', //TODO-目前代码里无此逻辑
column: [
{ prop: 'name', label: '区域名称' },
{ prop: 'time', label: '时间戳' },
{ prop: 'type', label: '目标类型' },
{ prop: 'n_stay', label: '存车数' },
{ prop: 'n_queue', label: '排队数' },
{ prop: 'occ', label: '占用状态' },
{ prop: 'speed', label: '空间平均速度' }
]
},
{
type: '固定间隔',
column: [
{ prop: 'gate_id', label: '断面编号' },
{ prop: 'name', label: '断面名称' },
{ prop: 'time', label: '时间戳' },
{ prop: 'interval', label: '时间序号' },
{ prop: 'type', label: '目标类型' },
{ prop: 'in_flow', label: '入流流量' },
{ prop: 'out_flow', label: '出流流量' },
{ prop: 'flow', label: '断面流量' },
{ prop: 'in_spd', label: '入流平均速度' },
{ prop: 'out_spd', label: '出流平均速度' },
{ prop: 'speed', label: '断面的平均速度' }
]
}
]
};
},
watch: {
// tableData: {
// handler(newVal) {
// console.log(newVal, '断面表格数据');
// }
// }
},
methods: {}
};
</script>
<style scoped lang="scss">
.tableContent {
position: relative;
width: 100%;
// height: 100%;
}
</style>

255
src/components/sensorFusion/thermalOD.vue
View File

@ -57,7 +57,7 @@ export default {
start.push(item[j].start); start.push(item[j].start);
// 数组去重 // 数组去重
// od图的数据 // od图的数据
chartData.push([j, i, item[j].quantity]); chartData.push([i, j, item[j].quantity]);
// console.log([i,j,item[j].val]); // console.log([i,j,item[j].val]);
} }
} }
@ -67,61 +67,16 @@ export default {
// this.thermalChartData = chartData // this.thermalChartData = chartData
return chartData; return chartData;
}, },
//去除时间重复项
//过滤重复的 time 字段，保留每个 time 最后一个对象
filteredArrayFun(originalArray, targetTime) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 确保 targetTime 是有效的日期字符串
const targetDate = targetTime ? new Date(targetTime) : null;
// 过滤比目标时间小的对象
if (targetDate) {
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
}
// 按照时间从小到大排序
const sortedArray = uniqueArray.sort((a, b) => {
const dateA = new Date(a.time);
const dateB = new Date(b.time);
return dateA - dateB;
});
return sortedArray;
},
initEcharts() { initEcharts() {
let dataList = null; let dataList = null;
// let targetTime = '';
// if (this.dataList.length > 0) {
// targetTime = this.dataList[this.dataList.length - 1].time;
// }
// let filterDataList = this.filteredArrayFun(this.dataList, targetTime);
let filterDataList = this.dataList
// console.log('实时触发-OD组件获取到的数据', this.dataList);
// console.log('实时触发-OD组件获取到的过滤数据', filterDataList);
if (this.timeMode == '实时触发') { if (this.timeMode == '实时触发') {
let dataOd = []; let dataOd = [];
if (filterDataList.length > 0 && filterDataList[0].ob_data) { if (this.dataList.length > 0) {
dataOd.push(filterDataList[0].ob_data); for (let i = 0; i < this.dataList.length; i++) {
dataList = this.ODhanlde(dataOd); dataOd.push(this.dataList[i].ob_data);
dataList = this.ODhanlde(dataOd);
}
} }
// if (filterDataList.length > 0) {
// for (let i = 0; i < filterDataList.length; i++) {
// dataOd.push(filterDataList[i].ob_data);
// dataList = this.ODhanlde(dataOd);
// }
// }
} else if (this.timeMode == '固定时刻') { } else if (this.timeMode == '固定时刻') {
let dataOd = []; let dataOd = [];
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
@ -130,12 +85,11 @@ export default {
// } // }
// if (this.dataList[0][0] == undefined) { // if (this.dataList[0][0] == undefined) {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
if (filterDataList.length > 0 && filterDataList[0].ob_data) { if (this.dataList.length > 0 && this.dataList[0].ob_data) {
dataOd.push(filterDataList[0].ob_data); dataOd.push(this.dataList[0].ob_data);
dataList = this.ODhanlde(dataOd);
} }
dataList = this.ODhanlde(dataOd);
// } // }
// } else { // } else {
// dataOd.push(this.dataList[0][0].ob_data); // dataOd.push(this.dataList[0][0].ob_data);
@ -149,11 +103,10 @@ export default {
// } // }
// if (this.dataList[0][0] == undefined) { // if (this.dataList[0][0] == undefined) {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
if (filterDataList.length > 0 && filterDataList[0].ob_data) { if (this.dataList.length > 0 && this.dataList[0].ob_data) {
dataOd.push(filterDataList[0].ob_data); dataOd.push(this.dataList[0].ob_data);
dataList = this.ODhanlde(dataOd); }
} dataList = this.ODhanlde(dataOd);
// } // }
// } else { // } else {
// dataOd.push(this.dataList[0][0].ob_data); // dataOd.push(this.dataList[0][0].ob_data);
@ -161,108 +114,96 @@ export default {
// } // }
} }
let myChart = this.chart; let myChart = this.chart;
let startName = [], let option = {
endName = []; dataZoom: [
if (this.startName) { {
startName = this.startName.split(','); id: 'dataZoomY',
} type: 'slider',
if (this.endName) { yAxisIndex: [0],
endName = this.endName.split(','); startValue: 0,
} endValue: 10,
if (dataList) { filterMode: 'empty'
let option = { }
dataZoom: [ ],
{ tooltip: {
id: 'dataZoomY', position: 'top'
type: 'slider', },
yAxisIndex: [0], animation: false,
startValue: 0, grid: {
endValue: 10, left: '3%',
filterMode: 'empty' right: '8%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.startName.split(','),
axisLine: {
lineStyle: {
color: '#000'
} }
],
tooltip: {
position: 'top'
}, },
animation: false, axisLabel: {
grid: { interval: 0,
left: '3%', rotate: 40
right: '8%',
bottom: '8%',
containLabel: true
}, },
xAxis: { splitArea: {
type: 'category', show: true
data: startName, }
axisLine: { // name: "镇街",
lineStyle: { },
color: '#000' yAxis: {
type: 'category',
data: this.endName.split(','),
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 40
},
splitArea: {
show: true
}
// name: "",
},
visualMap: {
min: 1,
max: 50,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '1%',
text: ['50', '1'], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'],
calculable: false,
color: ['#22DDDD', '#fec42c', '#80F1BE']
},
series: [
{
name: 'OD图',
type: 'heatmap',
data: dataList,
label: {
normal: {
show: true
} }
}, },
axisLabel: { itemStyle: {
interval: 0, emphasis: {
rotate: 40 shadowBlur: 10,
}, shadowColor: 'rgba(120, 0, 0, 0.5)'
splitArea: {
show: true
}
// name: "镇街",
},
yAxis: {
type: 'category',
data: endName,
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 40
},
splitArea: {
show: true
}
// name: "",
},
visualMap: {
min: 1,
max: 50,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '1%',
text: ['50', '1'], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'],
calculable: false,
color: ['#22DDDD', '#fec42c', '#80F1BE']
},
series: [
{
name: 'OD图',
type: 'heatmap',
data: dataList,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(120, 0, 0, 0.5)'
}
} }
} }
] }
}; ]
if (myChart) { };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}); });
}
}
} }
}, },
mounted() { mounted() {
@ -302,8 +243,8 @@ export default {
}, },
echartsRef: { echartsRef: {
handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
// console.log('old', oldValues); console.log('old', oldValues);
// console.log('newV', newValues); console.log('newV', newValues);
let that = this; let that = this;
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {

454
src/components/target/newtypeChart.vue
View File

@ -1,454 +0,0 @@
<template>
<!-- 触发类型 -->
<div class="setion">
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
<!-- 触发数据数值渲染 -->
<div class="typeContent">
<div v-if="newDataArr && newDataArr.length > 0">
<div v-if="title == '类型'" style="display: flex; flex-wrap: wrap">
<el-card
v-for="(n, i) in latestDataArr.type_data"
:key="i"
style="width: 150px; margin-bottom: 20px; text-align: center"
>
<div>
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
><br />
<span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - '
}}</span>
<span style="font-size: 15px" v-if="n.quantity || n.quantity === 0"> 个</span>
</div>
<div>
<div>
{{ latestDataArr.time ? latestDataArr.time : '' }}
</div>
</div>
</el-card>
</div>
</div>
<el-card v-show="echartArr.includes('数值')" class="spacialCard">
<div v-if="newDataArr && newDataArr.length > 0">
<div v-if="title == '类型'">
<span style="font-size: 15px">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }}
</span>
<span style="font-size: 15px">个</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr && dataArr.length > 0">
<span style="font-size: 15px">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 26px; font-weight: bold">
<span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
{{ Math.abs(latestDataArr.speed) }}
</span>
<span v-else> - </span>
</span>
<span style="font-size: 14px; font-weight: 200">
<span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
{{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }}
</span>
</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量' && dataArr && dataArr.length > 0">
<span style="font-size: 15px">流量</span><br />
<span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '出流'">{{
latestDataArr.out_flow || latestDataArr.out_flow === 0 ? latestDataArr.out_flow : ' - '
}}</span>
<span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '入流'">{{
latestDataArr.in_flow || latestDataArr.in_flow === 0 ? latestDataArr.in_flow : ' - '
}}</span>
<span style="font-size: 20px; font-weight: 200">辆</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{
latestDataArr.headway || latestDataArr.headway === 0
? latestDataArr.headway == -1
? ' - '
: latestDataArr.headway
: ' - '
}}</span>
<!-- <span style="font-size: 30px; font-weight: bold">100</span> -->
<span style="font-size: 20px; font-weight: 200">秒</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px">排队数</span><br />
<span style="font-size: 30px; font-weight: bold">
{{
latestDataArr.n_queue || latestDataArr.n_queue === 0
? latestDataArr.n_queue == -1
? ' - '
: latestDataArr.n_queue
: ' - '
}}
</span>
<span style="font-size: 20px; font-weight: 200">辆</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{
latestDataArr.n_stay || latestDataArr.n_stay === 0 ? latestDataArr.n_stay : ' - '
}}</span>
<span style="font-size: 20px; font-weight: 200">辆</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{
latestDataArr.ave_delay || latestDataArr.ave_delay === 0 ? latestDataArr.ave_delay : ' - '
}}</span>
<span style="font-size: 20px; font-weight: 200">秒</span>
</div>
<div>
<div v-if="latestDataArr.time">
<!-- {{ latestDataArr.time ? latestDataArr.time : '' }} -->
<div>{{ latestDataArr.time.slice(0, 11) }}</div>
<div>{{ latestDataArr.time.slice(11) }}</div>
</div>
</div>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
</el-card>
</div>
<div v-show="echartArr.includes('表格')">
<div class="tableTitle" v-if="newDataArr && newDataArr.length > 0">
<div>
<span
style="
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3297ff;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
"
></span>
<span style="font-size: 18px">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
</div>
<div class="tableTime">
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="newDataArrAbs" :triggerType="triggerType" />
</div>
<div v-if="pageType == '区域'">
<regionTable :msg="newDataArrAbs" :triggerType="triggerType" />
</div>
</div>
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart
:componentName="componentName"
:itemData="itemData"
:originalDataArr="newDataArr"
:chartName="chartName"
:pageType="pageType"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
ref="lineChartRef"
/>
</div>
<div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog />
<pieChart
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
ref="pieChartRef"
/>
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
<avgChart
ref="avgChartRef"
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div>
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
ref="barChartRef"
/>
</div>
<div class="border" v-if="echartArr.includes('矩阵图')">
<detailDialog />
<thermalChart
:componentName="componentName"
:pageType="pageType"
:list="newDataArrAbs"
:status="triggerType"
:title="title"
:typeValue="typeValue"
:startEndData="startEndData"
ref="ODChartRef"
/>
</div>
</div>
</template>
<script>
import _ from 'lodash';
import avgChart from '../newchart/avgChart.vue';
import lineChart from '../newchart/lineChart.vue';
import barChart from '../newchart/barChart.vue';
import tableShow from '../newchart/tableShow.vue';
import pieChart from '../newchart/pieChart.vue';
import detailDialog from '../newchart/detailDialog.vue';
import regionTable from '../newchart/regionTable.vue';
import thermalChart from '../newchart/thermalChart.vue';
import { getNameFromTargetType } from '@/utils/targetType';
export default {
name: 'typeChart', //类型组件
props: [
'typeValue',
'itemData',
'pageType',
'triggerType',
'dataArr',
'cycleAccumulateData',
'echartArr',
'componentName',
'title',
'chartName',
'startEndData'
],
components: {
lineChart,
barChart,
tableShow,
detailDialog,
regionTable,
pieChart,
avgChart,
thermalChart
},
data() {
return {
getNameFromTargetType
};
},
created() {},
methods: {
// 计算类型数量的总和
// getDataArr(val) {
// this.newDataArr = val;
// this.getNewQueue(this.newDataArr);
// },
getTotal(dataArr) {
if (this.title == '类型') {
if (dataArr && dataArr.length > 0) {
if (dataArr[0].type_data && dataArr[0].type_data.length > 0) {
return dataArr[0].type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
}, 0);
}
return 0;
}
return 0;
}
}
},
computed: {
latestDataArr() {
//最新一条数据
let latestDataArr = {};
if (this.dataArr && this.dataArr.length > 0) {
latestDataArr = _.cloneDeep(this.dataArr[0]);
}
if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) {
latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
// console.log('周期统计最新一条卡片数据-',latestDataArr)
}
if (!isNaN(latestDataArr.headway) && (latestDataArr.headway !== -1 || latestDataArr.headway === 0)) {
latestDataArr.headway = latestDataArr.headway;
} else {
latestDataArr.headway = '-';
}
if (!isNaN(latestDataArr.ave_headway) && (latestDataArr.ave_headway !== -1 || latestDataArr.ave_headway === 0)) {
latestDataArr.ave_headway = latestDataArr.ave_headway;
latestDataArr.headway = latestDataArr.ave_headway;
} else {
latestDataArr.ave_headway = '-';
}
if (!isNaN(latestDataArr.n_stay) && (latestDataArr.n_stay !== -1 || latestDataArr.n_stay === 0)) {
latestDataArr.n_stay = latestDataArr.n_stay;
} else {
latestDataArr.n_stay = '-';
}
if (!isNaN(latestDataArr.ave_stay) && (latestDataArr.ave_stay !== -1 || latestDataArr.ave_stay === 0)) {
latestDataArr.n_stay = latestDataArr.ave_stay;
latestDataArr.ave_stay = latestDataArr.ave_stay;
} else {
latestDataArr.ave_stay = '-';
}
if (!isNaN(latestDataArr.n_queue) && (latestDataArr.n_queue !== -1 || latestDataArr.n_queue === 0)) {
latestDataArr.n_queue = latestDataArr.n_queue;
} else {
latestDataArr.n_queue = '-';
}
if (!isNaN(latestDataArr.ave_queue) && (latestDataArr.ave_queue !== -1 || latestDataArr.ave_queue === 0)) {
latestDataArr.n_queue = latestDataArr.ave_queue;
latestDataArr.ave_queue = latestDataArr.ave_queue;
} else {
latestDataArr.ave_queue = '-';
}
return latestDataArr;
},
newDataArr() {
if (this.dataArr && this.dataArr.length > 0) {
let dataArr = _.cloneDeep(this.dataArr);
return dataArr;
}
return [];
},
// 处理数据图表数据-1需要改成‘-’
newDataArrAbs() {
// console.log('newDataArrAbs1', this.newDataArr);
let arr = [];
if (this.newDataArr.length > 0) {
let newlist = _.cloneDeep(this.newDataArr);
for (const item of newlist) {
if (!isNaN(item.speed) && (item.speed !== -1 || item.speed === 0)) {
item.speed = Math.abs(item.speed);
} else {
item.speed = '-';
}
if (!isNaN(item.flow) && (item.flow !== -1 || item.flow === 0)) {
item.flow = item.flow;
} else {
item.flow = '-';
}
if (!isNaN(item.headway) && (item.headway !== -1 || item.headway === 0)) {
item.headway = item.headway;
} else {
item.headway = '-';
}
if (!isNaN(item.ave_headway) && (item.ave_headway !== -1 || item.ave_headway === 0)) {
item.ave_headway = item.ave_headway;
item.headway = item.ave_headway;
} else {
item.ave_headway = '-';
}
if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
item.n_stay = item.n_stay;
} else {
item.n_stay = '-';
}
if (!isNaN(item.ave_stay) && (item.ave_stay !== -1 || item.ave_stay === 0)) {
item.n_stay = item.ave_stay;
item.ave_stay = item.ave_stay;
} else {
item.ave_stay = '-';
}
if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
item.n_queue = item.n_queue;
} else {
item.n_queue = '-';
}
if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
item.n_queue = item.ave_queue;
item.ave_queue = item.ave_queue;
} else {
item.ave_queue = '-';
}
if (!isNaN(item.ave_delay) && (item.ave_delay !== -1 || item.ave_delay === 0)) {
item.ave_delay = item.ave_delay;
} else {
item.ave_delay = '-';
}
if (!isNaN(item.in_spd) && (item.in_spd !== -1 || item.in_spd === 0)) {
item.in_spd = item.in_spd;
} else {
item.in_spd = '-';
}
if (!isNaN(item.out_spd) && (item.out_spd !== -1 || item.out_spd === 0)) {
item.out_spd = item.out_spd;
} else {
item.out_spd = '-';
}
arr.push(Object.assign({}, item));
}
}
// console.log('triggerType',this.triggerType)
// console.log('newDataArrAbs2', arr);
return arr;
}
},
mounted() {},
watch: {
// 监听触发数据
// dataArr: {
// handler(newVal) {
// console.log('newtypeChart', newVal);
// // if (newVal &&newVal.length >0) {
// // this.getNewQueue(newVal);
// // }
// },
// immediate: true,
// deep:true,
// }
}
};
</script>
<style scoped>
.spacialCard {
width: 150px;
margin-bottom: 20px;
text-align: center;
}
::v-deep.spacialCard .el-card__body {
padding: 10px;
}
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
.typeContent {
box-sizing: border-box;
}
.border {
width: 100%;
margin-bottom: 20px;
position: relative;
}
</style>

31
src/components/target/typeChart.vue
View File

@ -12,7 +12,7 @@
style="width: 150px; margin-bottom: 20px; text-align: center" style="width: 150px; margin-bottom: 20px; text-align: center"
> >
<div> <div>
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span <span style="font-size: 15px">{{ n.name }}</span
><br /> ><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - ' n.quantity || n.quantity === 0 ? n.quantity : ' - '
@ -36,7 +36,7 @@
style="width: 150px; margin-bottom: 20px; text-align: center" style="width: 150px; margin-bottom: 20px; text-align: center"
> >
<div> <div>
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span <span style="font-size: 15px">{{ n.name }}</span
><br /> ><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - ' n.quantity || n.quantity === 0 ? n.quantity : ' - '
@ -210,8 +210,8 @@
<div> <div>
<div v-if="newDataArr[0].time"> <div v-if="newDataArr[0].time">
<!-- {{ newDataArr[0].time ? newDataArr[0].time : '' }} --> <!-- {{ newDataArr[0].time ? newDataArr[0].time : '' }} -->
<div>{{ newDataArr[0].time.slice(0, 11) }}</div> <div>{{newDataArr[0].time.slice(0, 11)}}</div>
<div>{{ newDataArr[0].time.slice(11) }}</div> <div>{{newDataArr[0].time.slice(11)}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -325,7 +325,6 @@ import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue'; import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue'; import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue'; import thermalChart from '../chart/thermalChart.vue';
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'typeChart', //类型组件 name: 'typeChart', //类型组件
props: [ props: [
@ -352,7 +351,6 @@ export default {
}, },
data() { data() {
return { return {
getNameFromTargetType,
// 类型数值 // 类型数值
total: 0, total: 0,
// 速度数值 // 速度数值
@ -372,11 +370,7 @@ export default {
methods: { methods: {
// 计算类型数量的总和 // 计算类型数量的总和
getDataArr(val) { getDataArr(val) {
// if(val&&val.length>0){ // console.log('getDataArr', val);
// if(val[0].component_name=='车头时距_4')
// console.log('typeChart-getDataArr', val);
// }
this.newDataArr = val; this.newDataArr = val;
this.getNewQueue(this.newDataArr); this.getNewQueue(this.newDataArr);
}, },
@ -397,7 +391,7 @@ export default {
this.cycleAccumulateDataArr[0].headway = val[0].headway; this.cycleAccumulateDataArr[0].headway = val[0].headway;
} }
if (val[0].ave_headway) { if (val[0].ave_headway) {
this.cycleAccumulateDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway; this.cycleAccumulateDataArr[0].headway = val[0].ave_headway;
} }
if (val[0].n_stay) { if (val[0].n_stay) {
this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay; this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay;
@ -414,9 +408,9 @@ export default {
return cur.quantity + prev; return cur.quantity + prev;
}, 0); }, 0);
} }
return 0; return 0
} }
return 0; return 0
} }
}, },
getNewQueue(val) { getNewQueue(val) {
@ -430,7 +424,7 @@ export default {
this.newDataArr[0].headway = val[0].headway; this.newDataArr[0].headway = val[0].headway;
} }
if (val[0].ave_headway) { if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway; this.newDataArr[0].headway = val[0].ave_headway;
} }
if (val[0].n_stay) { if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay; this.newDataArr[0].n_stay = val[0].n_stay;
@ -529,13 +523,14 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.spacialCard { .spacialCard {
width: 150px; width: 150px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
} }
::v-deep.spacialCard .el-card__body { ::v-deep.spacialCard .el-card__body{
padding: 10px; padding: 10px;
} }

97
src/config/apiurl.js
View File

@ -1,15 +1,4 @@
/*
* @Author: qiudan 1044775178@qq.com
* @Date: 2024-04-07 18:06:23
* @LastEditors: qiudan 1044775178@qq.com
* @LastEditTime: 2024-04-07 18:14:02
* @FilePath: /TransFlow/src/config/apiurl.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
var ipUurl = window.location.host.split(':')[0]; var ipUurl = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ipUurl = '172.16.1.168'
}
// var ipUurl = '172.16.1.168' // var ipUurl = '172.16.1.168'
export default { export default {
// dataUrl: "http://172.16.1.22:8080/api/AddShipjk", // dataUrl: "http://172.16.1.22:8080/api/AddShipjk",
@ -20,71 +9,71 @@ export default {
// //编辑图形名称 // //编辑图形名称
// editFigure: "http://172.16.1.22:8080/api/EditTuxmc", // editFigure: "http://172.16.1.22:8080/api/EditTuxmc",
// dataUrl: 'http://172.16.1.168:80/api/AddShipjk', // dataUrl: 'http://172.16.1.168:5000/api/AddShipjk',
// getSpareElementOrder: 'http://172.16.1.168:80/api/Upload', // getSpareElementOrder: 'http://172.16.1.168:5000/api/Upload',
// postSetQuanjsz: 'http://172.16.1.168:80/api/SetQuanjsz', // postSetQuanjsz: 'http://172.16.1.168:5000/api/SetQuanjsz',
// saveRoleApi: 'http://172.16.1.168:80/api/AddZhangh', // saveRoleApi: 'http://172.16.1.168:5000/api/AddZhangh',
// saveSetFtppz: 'http://172.16.1.168:80/api/SetFtppz', // saveSetFtppz: 'http://172.16.1.168:5000/api/SetFtppz',
// //编辑保存组件弹窗传参 // //编辑保存组件弹窗传参
// editComponent: 'http://172.16.1.168:80/api/SetMonqjkzjcs', // editComponent: 'http://172.16.1.168:5000/api/SetMonqjkzjcs',
// //保存主机名称 // //保存主机名称
// editRoleApi: 'http://172.16.1.168:80/api/EditZhangh', // editRoleApi: 'http://172.16.1.168:5000/api/EditZhangh',
// //新增图形接口 // //新增图形接口
// addFigure: 'http://172.16.1.168:80/api/AddJianktx', // addFigure: 'http://172.16.1.168:5000/api/AddJianktx',
// //编辑图形名称 // //编辑图形名称
// editFigure: 'http://172.16.1.168:80/api/EditTuxmc', // editFigure: 'http://172.16.1.168:5000/api/EditTuxmc',
// //编辑保存组件弹窗传参 // //编辑保存组件弹窗传参
// setHostName: 'http://172.16.1.168:80/api/SetHostName', // setHostName: 'http://172.16.1.168:5000/api/SetHostName',
// setHostTime: 'http://172.16.1.168:80/api/SetHostTime', // setHostTime: 'http://172.16.1.168:5000/api/SetHostTime',
// changePassowrd:'http://172.16.1.168:80/api/ChangePassword', // changePassowrd:'http://172.16.1.168:5000/api/ChangePassword',
// //还原服务器设置上传 // //还原服务器设置上传
// postConfigRestore:'http://172.16.1.168:80/api/ConfigRestore', // postConfigRestore:'http://172.16.1.168:5000/api/ConfigRestore',
// //更新软件版本 // //更新软件版本
// postConfigUpdate:'http://172.16.1.168:80/api/Update', // postConfigUpdate:'http://172.16.1.168:5000/api/Update',
// //新增接入方 // //新增接入方
// postAddJierf:'http://172.16.1.168:80/api/AddJierf', // postAddJierf:'http://172.16.1.168:5000/api/AddJierf',
// //编辑接入方 // //编辑接入方
// postEditJierf:'http://172.16.1.168:80/api/EditJierf', // postEditJierf:'http://172.16.1.168:5000/api/EditJierf',
// //设置组件 // //设置组件
// setComponents:'http://172.16.1.168:80/api/SetComponents', // setComponents:'http://172.16.1.168:5000/api/SetComponents',
// //设置接入方接口 // //设置接入方接口
// setAccessParty:'http://172.16.1.168:80/api/setAccessParty', // setAccessParty:'http://172.16.1.168:5000/api/setAccessParty',
// `http://${ipUurl}:80/api/AddShipjk` // `http://${ipUurl}:5000/api/AddShipjk`
dataUrl: `http://${ipUurl}:80/api/AddShipjk`, dataUrl: `http://${ipUurl}:5000/api/AddShipjk`,
getSpareElementOrder: `http://${ipUurl}:80/api/Upload`, getSpareElementOrder: `http://${ipUurl}:5000/api/Upload`,
postSetQuanjsz: `http://${ipUurl}:80/api/SetQuanjsz`, postSetQuanjsz: `http://${ipUurl}:5000/api/SetQuanjsz`,
//新增图形接口 //新增图形接口
addFigure: `http://${ipUurl}:80/api/AddJianktx`, addFigure: `http://${ipUurl}:5000/api/AddJianktx`,
//编辑图形名称 //编辑图形名称
editFigure: `http://${ipUurl}:80/api/EditTuxmc`, editFigure: `http://${ipUurl}:5000/api/EditTuxmc`,
//根据视频监控id获取监控图形数据 //根据视频监控id获取监控图形数据
// getJianktx: `http://${ipUurl}:80/api/GetJianktx`, // getJianktx: `http://${ipUurl}:5000/api/GetJianktx`,
//编辑保存组件弹窗传参 //编辑保存组件弹窗传参
editComponent: `http://${ipUurl}:80/api/SetMonqjkzjcs`, editComponent: `http://${ipUurl}:5000/api/SetMonqjkzjcs`,
//保存主机名称 //保存主机名称
editRoleApi: `http://${ipUurl}:80/api/EditZhangh`, editRoleApi: `http://${ipUurl}:5000/api/EditZhangh`,
saveRoleApi: `http://${ipUurl}:80/api/AddZhangh`, saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
saveSetFtppz: `http://${ipUurl}:80/api/SetFtppz`, saveSetFtppz: `http://${ipUurl}:5000/api/SetFtppz`,
//编辑保存组件弹窗传参 //编辑保存组件弹窗传参
setHostName: `http://${ipUurl}:80/api/SetHostName`, setHostName: `http://${ipUurl}:5000/api/SetHostName`,
setHostTime: `http://${ipUurl}:80/api/SetHostTime`, setHostTime: `http://${ipUurl}:5000/api/SetHostTime`,
changePassowrd: `http://${ipUurl}:80/api/ChangePassword`, changePassowrd:`http://${ipUurl}:5000/api/ChangePassword`,
//还原服务器设置上传 //还原服务器设置上传
postConfigRestore: `http://${ipUurl}:80/api/ConfigRestore`, postConfigRestore:`http://${ipUurl}:5000/api/ConfigRestore`,
//更新软件版本 //更新软件版本
postConfigUpdate: `http://${ipUurl}:80/api/Update`, postConfigUpdate:`http://${ipUurl}:5000/api/Update`,
//新增接入方 //新增接入方
postAddJierf: `http://${ipUurl}:80/api/AddJierf`, postAddJierf:`http://${ipUurl}:5000/api/AddJierf`,
//编辑接入方 //编辑接入方
postEditJierf: `http://${ipUurl}:80/api/EditJierf`, postEditJierf:`http://${ipUurl}:5000/api/EditJierf`,
//设置组件 //设置组件
setComponents: `http://${ipUurl}:80/api/SetComponents`, setComponents:`http://${ipUurl}:5000/api/SetComponents`,
setAccessParty: `http://${ipUurl}:80/api/setAccessParty`, setAccessParty:`http://${ipUurl}:5000/api/setAccessParty`,
//自动校时接口 //自动校时接口
setAutomatic: `http://${ipUurl}:80/api/SetAutomaticTiming`, setAutomatic:`http://${ipUurl}:5000/api/SetAutomaticTiming`,
}; };

57
src/main.js
View File

@ -79,30 +79,23 @@ var currentTopics = null;
var client = null; var client = null;
var callback = null; var callback = null;
let mqtt = new mqttConfig(currentTopics); let mqtt = new mqttConfig(currentTopics);
window.PubScribe = function (topic, number, _callback, other = false, fromName = '') { window.PubScribe = function (topic, number, _callback, other = false) {
callback = _callback; callback = _callback;
if (currentTopics != null) { if (currentTopics != null) {
//取消currentTopics主题订阅 //取消currentTopics主题订阅
if (client != null) { if (client != null) {
console.log('client', client)
client.unsubscribe(currentTopics); client.unsubscribe(currentTopics);
console.log("取消上次订阅主题", currentTopics)
currentTopics = null; currentTopics = null;
} }
} }
if (client == null) { if (client == null) {
if (other == false) { if (other == false) {
console.log("首次链接订阅主题topic", topic)
currentTopics = topic;
client = mqtt.createConnect(() => { client = mqtt.createConnect(() => {
client.subscribe(topic, { client.subscribe(topic, {
qos: 0 qos: 0
}, (err) => { }, (err) => {
if (!err) { if (!err) {
console.log("订阅成功0", topic); console.log("订阅成功0",topic);
console.log("订阅成功0-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
console.log("订阅成功0-fromName", fromName);
console.log("订阅成功0-number", number);
client.publish('msg_stream', JSON.stringify({ client.publish('msg_stream', JSON.stringify({
"msg_flag": parseInt(number) "msg_flag": parseInt(number)
})) }))
@ -127,17 +120,13 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
}); });
} else { } else {
if (topic != null) { if (topic != null) {
console.log("融合的订阅主题topic", topic) console.log("topic", topic)
currentTopics = topic;
client = mqtt.createConnect(() => { client = mqtt.createConnect(() => {
client.subscribe(topic, { client.subscribe(topic, {
qos: 0 qos: 0
}, (err) => { }, (err) => {
if (!err) { if (!err) {
console.log("订阅成功11", topic); console.log("订阅成功11");
console.log("订阅成功11-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
console.log("订阅成功11-fromName", fromName);
console.log("订阅成功11-number", number);
client.publish('msg_stream', JSON.stringify({ client.publish('msg_stream', JSON.stringify({
"msg_flag": parseInt(number) "msg_flag": parseInt(number)
})) }))
@ -148,7 +137,7 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
try { try {
callback(topic, message); callback(topic, message);
} catch (error) { } catch (error) {
} }
}); });
}); });
@ -157,31 +146,29 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
} else { } else {
if (topic != null) { if (topic != null) {
console.log("已链接成功后订阅主题topic", topic) console.log("topic", topic)
currentTopics = topic; currentTopics = topic;
mqtt.MySub(() => { client.subscribe(currentTopics, {
client.subscribe(currentTopics, { qos: 0
qos: 0 }, (err) => {
}, (err) => { if (!err) {
if (!err) { console.log("订阅成功1");
console.log("订阅成功1", topic); // setTimeout(function() {
console.log("订阅成功1-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合"); client.publish('msg_stream', JSON.stringify({
console.log("订阅成功1-fromName", fromName); "msg_flag": parseInt(number)
console.log("订阅成功1-number", number); }))
client.publish('msg_stream', JSON.stringify({ // if(number!= -1 &&number!= '001' ){
"msg_flag": parseInt(number) // client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":videoid}))
})) // }
} else {
console.log('消息订阅失败！')
}
}); } else {
}) console.log('消息订阅失败！')
}
});
} }
} }
} }
window.publish = function (topic, message) { window.publish = function (topic, message) {
if (mqtt.mqttClient.connected == true) { if (mqtt.mqttClient.connected == true) {
// console.log("topic",topic) // console.log("topic",topic)

136
src/utils/mqttConfig.js
View File

@ -1,14 +1,9 @@
import mqtt from "mqtt"; import mqtt from "mqtt";
import Vue from 'vue' import Vue from 'vue'
import moment from 'moment';
var vm = new Vue(); var vm = new Vue();
var ip = window.location.host.split(":")[0]; var ip = window.location.host.split(":")[0];
if (process.env.NODE_ENV === 'development') {
ip = '172.16.1.168'
}
// var ip = '172.16.1.168'; // var ip = '172.16.1.168';
console.log("ip", ip) console.log("ip",ip)
class mqttHandle { class mqttHandle {
constructor() { constructor() {
var newName = localStorage.getItem('ms_username') var newName = localStorage.getItem('ms_username')
@ -18,10 +13,10 @@ class mqttHandle {
endpoint: "/mqtt", endpoint: "/mqtt",
clean: true, // 保留会话 clean: true, // 保留会话
cleanSession: true, cleanSession: true,
connectTimeout: 5000, // 超时时间 connectTimeout: 7000, // 超时时间
reconnectPeriod: 3000, // 重连时间间隔 reconnectPeriod: 7000, // 重连时间间隔
host: ip, host:ip,
port: '80', port: '10087',
// 认证信息 // 认证信息
// clientId: Number(new Date()).toString(), // clientId: Number(new Date()).toString(),
clientId: newName, clientId: newName,
@ -33,29 +28,17 @@ class mqttHandle {
// qos: 0, // qos: 0,
// } // }
this.mqttClient = null; this.mqttClient = null;
// 追踪是否为初始连接
this.initialConnection = true;
// 存储当前 onConnected 回调
this.onConnected = () => {}; // 默认为空函数
} }
/** /**
* 创建链接 * 创建链接
* @returns client * @returns client
*/ */
createConnect(onConnectedFun) { createConnect(onConnected) {
//配置链接 //配置链接
const { const { host, port, endpoint, ...options } = this.connect;
host, console.log("this.connect.host",this.connect.host)
port,
endpoint,
...options
} = this.connect;
console.log("this.connect.host", this.connect.host)
// const connectUrl = 'ws://172.16.1.168:10087/'; // const connectUrl = 'ws://172.16.1.168:10087/';
let connectUrl = `ws://${this.connect.host}${endpoint}`; const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
if (process.env.NODE_ENV === 'development') {
connectUrl = `ws://172.16.1.168${endpoint}`;
}
// if (!client.connected) { // if (!client.connected) {
// client.on('connect', function () { // client.on('connect', function () {
// console.log('连接成功') // console.log('连接成功')
@ -67,75 +50,68 @@ class mqttHandle {
// } // }
// }) // })
// } // }
if (this.mqttClient == undefined) { if (this.mqttClient == undefined)
{
this.mqttClient = mqtt.connect(connectUrl, options); this.mqttClient = mqtt.connect(connectUrl, options);
this.mqttClient.on("connect", () => { this.mqttClient.on("connect", () => {
console.log("Connection succeeded!"); console.log("Connection succeeded!");
// 如果是初始连接 onConnected();
if (this.initialConnection) { // this._client.subscribe('img'+this.number, { qos: 0 });
this.initialConnection = false; // this._client.subscribe('stream'+this.number, { qos: 0 });
this.onConnected = onConnectedFun; // this._client.subscribe('trajectory'+this.number, { qos: 0 });
} // this._client.subscribe('detection'+this.number, { qos: 0 });
this.onConnected() // this._client.subscribe('img0', { qos: 0 });
// this._client.subscribe('img'+this.number, { qos: 0 }); // this._client.subscribe('stream0', { qos: 0 });
// this._client.subscribe('stream'+this.number, { qos: 0 }); // this._client.subscribe('trajectory0', { qos: 0 });
// this._client.subscribe('trajectory'+this.number, { qos: 0 }); // this._client.subscribe('detection0', { qos: 0 });
// this._client.subscribe('detection'+this.number, { qos: 0 }); });
// this._client.subscribe('img0', { qos: 0 }); this.mqttClient.on('reconnect', (error) => {
// this._client.subscribe('stream0', { qos: 0 }); console.log('正在重连')
// this._client.subscribe('trajectory0', { qos: 0 }); })
// this._client.subscribe('detection0', { qos: 0 }); this.mqttClient.on("error", (error) => {
}); console.log("Connection failed");
this.mqttClient.on('reconnect', (error) => { });
console.log('正在重连-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'))
//配置topic
}) // const { topic, qos } = this.subscription;
// console.log(topic, qos,'topic, qos');
this.mqttClient.on("error", (error) => { // this._client.subscribe(topic, { qos: qos }, (error, res) => {
console.log("Connection failed"); // if (error) {
}); // console.log("Subscribe to topics error", error);
// return;
//配置topic // }
// const { topic, qos } = this.subscription; // this.subscribeSuccess = true;
// console.log(topic, qos,'topic, qos'); // console.log("Subscribe to topics res", res[0].qos, res[0].topic);
// this._client.subscribe(topic, { qos: qos }, (error, res) => { // });
// if (error) {
// console.log("Subscribe to topics error", error);
// return;
// }
// this.subscribeSuccess = true;
// console.log("Subscribe to topics res", res[0].qos, res[0].topic);
// });
} }
return this.mqttClient; return this.mqttClient;
// try { // try {
// } catch (error) { // } catch (error) {
// console.log("mqtt.connect error", error); // console.log("mqtt.connect error", error);
// } // }
} }
MySub(subscriptions) { MySub(subscriptions)
{
//['hert','img0','img1','img2','img3','img4','img5','img6','img7'] //['hert','img0','img1','img2','img3','img4','img5','img6','img7']
// this.mqttClient.subscribe(subscriptions, { this.mqttClient.subscribe(subscriptions, { qos: 0 }, (err)=>
// qos: 0 {
// }, (err) => { if (!err) {
// if (!err) { console.log("订阅成功："+subscriptions);
// console.log("订阅成功：" + subscriptions);
} else {
// } else { console.log('消息订阅失败！'+subscriptions)
// console.log('消息订阅失败！' + subscriptions) }
// } });
// });
this.onConnected = subscriptions
this.onConnected()
} }
MyUnSub(subscription) { MyUnSub(subscription)
{
} }

24
src/utils/targetType.js
View File

@ -1,24 +0,0 @@
const targetTypeObj = {
'traffic police': '交警',
'sanitation worker': '环卫工人',
'general pedestrian': '一般行人',
'car': '小汽车',
'truck': '卡车',
'coach': '大巴车',
'bus': '公交车',
'special vehicle': '特种车辆',
'construction vehicle': '建筑车辆',
'tricycle': '三轮车',
'bicycle': '自行车',
'electric bicycle': '电瓶车',
'fire': '火灾',
}
export function getNameFromTargetType(keys, defaultValue = '', separator = '|') {
if (keys) {
const keyArray = keys.split(separator);
const resultArray = keyArray.map(key => targetTypeObj[key] || key);
return resultArray.join(separator) || defaultValue;
}
return ''
}

49
src/views/AnalysisMain.vue
View File

@ -233,11 +233,7 @@ export default {
videoId: '' videoId: ''
}, },
disable: false, //根据权限禁用按钮 disable: false, //根据权限禁用按钮
highPic: {}, //接收第一张高频图片 highPic: {} //接收第一张高频图片
timer1: null,
timer2: null,
timer3: null,
timer4: null
}; };
}, },
@ -265,8 +261,7 @@ export default {
newVal.forEach((item) => { newVal.forEach((item) => {
if (item.status == '加载中') { if (item.status == '加载中') {
//console.log('加载中', item); //console.log('加载中', item);
this.timer1 = null; setTimeout(() => {
this.timer1 = setTimeout(() => {
this.getVideoList(); this.getVideoList();
}, 10000); }, 10000);
} }
@ -321,10 +316,8 @@ export default {
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType); //console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
//创建链接，接收数据 //创建链接，接收数据
if (this.videoTypeForm.videoType == '实时视频') { if (this.videoTypeForm.videoType == '实时视频') {
// this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server']; this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server'];
this.topicSends = ['hert', 'Contorl_server'];
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType); //console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
// console.log('在AnalysisMain分析页面')
window.PubScribe(this.topicSends, -1, this.realInfo, false, 'videoId'); window.PubScribe(this.topicSends, -1, this.realInfo, false, 'videoId');
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' })); window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
} else if (this.videoTypeForm.videoType == '离线视频') { } else if (this.videoTypeForm.videoType == '离线视频') {
@ -447,10 +440,7 @@ export default {
//console.log('已分析'); //console.log('已分析');
this.videoList[i].videoAnalysisStatus = '已分析'; this.videoList[i].videoAnalysisStatus = '已分析';
var ip = window.location.host; var ip = window.location.host;
var ipData = 'http://' + ip.split(':')[0]; var ipData = 'http://' + ip.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ipData = 'http://172.16.1.168';
}
// var ipData = 'http://172.16.1.168'; // var ipData = 'http://172.16.1.168';
this.videoList[i].img = ipData + msg.pic_path; this.videoList[i].img = ipData + msg.pic_path;
} else if (msg.type == 'video_analyse_unusual' && msg.video_id == this.videoList[i].id) { } else if (msg.type == 'video_analyse_unusual' && msg.video_id == this.videoList[i].id) {
@ -641,12 +631,11 @@ export default {
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)' background: 'rgba(0, 0, 0, 0.7)'
}); });
let that = this;
this.timer2 = null; setTimeout(() => {
this.timer2 = setTimeout(() => {
loading.close(); loading.close();
that.timer3 = null;
that.timer3 = setTimeout(() => { setTimeout(() => {
this.getVideoList(); this.getVideoList();
}, 5000); }, 5000);
@ -818,8 +807,7 @@ export default {
//console.log('res', res); //console.log('res', res);
if (res.data.msg == '成功') { if (res.data.msg == '成功') {
// if(val=='重启'){ // if(val=='重启'){
this.timer4 = null; setTimeout(() => {
this.timer4 = setTimeout(() => {
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' })); window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
}, 2000); }, 2000);
// } // }
@ -836,9 +824,6 @@ export default {
var arr = []; var arr = [];
var ip = window.location.host; var ip = window.location.host;
var ipData = 'http://' + ip.split(':')[0]; var ipData = 'http://' + ip.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ipData = 'http://172.16.1.168';
}
// var ipData = 'http://172.16.1.168'; // var ipData = 'http://172.16.1.168';
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
if (this.videoTypeForm.videoType == '离线视频' && item.videoAnalysisStatus == '已分析') { if (this.videoTypeForm.videoType == '离线视频' && item.videoAnalysisStatus == '已分析') {
@ -921,16 +906,6 @@ export default {
components: { components: {
editModal editModal
},
beforeDestroy() {
clearTimeout(this.timer1);
clearTimeout(this.timer2);
clearTimeout(this.timer3);
clearTimeout(this.timer4);
this.timer1 = null;
this.timer2 = null;
this.timer3 = null;
this.timer4 = null;
} }
}; };
</script> </script>
@ -972,13 +947,9 @@ export default {
padding: 0; padding: 0;
float: right; float: right;
} }
/* .imageBox{
width: 100%;
height: 210px;
} */
.image { .image {
width: 100%; width: 100%;
height: 213px;
display: block; display: block;
} }

349
src/views/StateOperation.vue
View File

@ -1,39 +1,38 @@
<template> <template>
<div class="content-box"> <div class="content-box">
<div class="container"> <div class="container">
<!-- <p>主体页面 1 - 2 </p> <!-- <p>主体页面 1 - 2 </p>
<div class="test-div"> <div class="test-div">
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
<i class="el-icon-share"></i> <i class="el-icon-share"></i>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> --> </div> -->
<h1>运行状态</h1> <h1>运行状态</h1>
<el-form :model="runningState" label-position="left" label-width="200px" style="width: 70%"> <el-form :model="runningState" label-position="left" label-width="200px" style="width:70%">
<el-form-item label="类型：">{{ runningState.type }}</el-form-item> <el-form-item label="类型：">{{ runningState.type }}</el-form-item>
<el-form-item label="版本：">{{ runningState.version }}</el-form-item> <el-form-item label="版本：">{{ runningState.version }}</el-form-item>
<el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item> <el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item>
<el-form-item label="开始运行时间：">{{ runningState.startTime }}</el-form-item> <el-form-item label="开始运行时间：">{{ runningState.startTime }}</el-form-item>
<el-form-item label="正常运行时长：">{{ runningState.runTime }}</el-form-item> <el-form-item label="正常运行时长：">{{ runningState.runTime }}</el-form-item>
</el-form> </el-form>
<h1 class="mar-top20">系统性能状态</h1> <h1 class="mar-top20">系统性能状态</h1>
<el-form :model="performance" label-position="left" label-width="200px" style="width: 70%"> <el-form :model="performance" label-position="left" label-width="200px" style="width:70%">
<!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> --> <!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> -->
<el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item> <el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
<el-form-item label="Cpu利用率：" <el-form-item label="Cpu利用率："><span v-for="s in performance.cpuUtilization"
><span v-for="s in performance.cpuUtilization" :key="s">{{ s + '%' }} | </span> :key="s">{{ s +'%'}} | </span> </el-form-item>
</el-form-item> <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
<el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item> <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item> <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item> <el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item>
<el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item> <el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item>
<el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item> <el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item>
<el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item> <el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item>
<el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item> <el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item>
<el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item> </el-form>
</el-form>
<!-- <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%"> <!-- <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
<el-table-column prop="mountingPoint" label="安装点"> <el-table-column prop="mountingPoint" label="安装点">
</el-table-column> </el-table-column>
<el-table-column prop="equipmentName" label="设备名称"> <el-table-column prop="equipmentName" label="设备名称">
@ -50,165 +49,173 @@
</el-table-column> </el-table-column>
</el-table> --> </el-table> -->
<h1 class="mar-top20">系统网络状态</h1>
<el-form :model="networkStatus" label-position="left" label-width="200px" style="width: 70%">
<el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item>
<el-form-item label="互联网延迟：">{{ networkStatus.internetDelay }}</el-form-item>
<el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item>
<el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item>
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item>
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item>
</el-form>
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%"> <h1 class="mar-top20">系统网络状态</h1>
<el-table-column prop="connect" label="连接"> </el-table-column> <el-form :model="networkStatus" label-position="left" label-width="200px" style="width:70%">
<el-table-column prop="IP" label="IP地址"> </el-table-column> <el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item>
<el-table-column prop="acceptor" label="接受"> <el-form-item label="互联网延迟：">{{ networkStatus.internetDelay }}</el-form-item>
<template slot-scope="scope"> {{ scope.row.occupancy }}K </template> <el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item>
</el-table-column> <el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item>
<el-table-column prop="totalReceived" label="收到的总数"> <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item>
<template slot-scope="scope"> {{ scope.row.total }}GB </template> <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item>
</el-table-column> </el-form>
<el-table-column prop="transmission" label="传输">
<template slot-scope="scope"> {{ scope.row.total }}Kb/s </template> <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
</el-table-column> <el-table-column prop="connect" label="连接">
<el-table-column prop="transmissionTotal" label="传输的总数"> </el-table-column>
<template slot-scope="scope"> {{ scope.row.total }}MB </template> <el-table-column prop="IP" label="IP地址">
</el-table-column> </el-table-column>
</el-table> <el-table-column prop="acceptor" label="接受">
</div> <template slot-scope="scope">
{{ scope.row.occupancy }}K
</template>
</el-table-column>
<el-table-column prop="totalReceived" label="收到的总数">
<template slot-scope="scope">
{{ scope.row.total }}GB
</template>
</el-table-column>
<el-table-column prop="transmission" label="传输">
<template slot-scope="scope">
{{ scope.row.total }}Kb/s
</template>
</el-table-column>
<el-table-column prop="transmissionTotal" label="传输的总数">
<template slot-scope="scope">
{{ scope.row.total }}MB
</template>
</el-table-column>
</el-table>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
runningState: { runningState: {
type: '', type: '',
version: '', version: '',
currentTime: '', currentTime: '',
startTime: '', startTime: '',
runTime: '' runTime: '',
}, },
performance: { performance: {
runTime: '', runTime: '',
averageCpuUtilization: '', averageCpuUtilization: '',
cpuUtilization: '', cpuUtilization: '',
cpuTemperature: '', cpuTemperature: '',
cpuName: '', cpuName: '',
gpuUtilization: '', gpuUtilization: '',
gpuTemperature: '', gpuTemperature: '',
memoryUsage: '', memoryUsage: '',
totalMemory: '', totalMemory: '',
virtualMemoryUsed: '', virtualMemoryUsed: '',
totalVirtualMemory: '' totalVirtualMemory: '',
}, },
mountingPointTable: [ mountingPointTable: [
// { // {
// mountingPoint: '2016-05-02', // mountingPoint: '2016-05-02',
// equipmentName: '王小虎', // equipmentName: '王小虎',
// occupancy: '上海市普陀区金沙江路 1518 弄', // occupancy: '上海市普陀区金沙江路 1518 弄',
// total: '上海市普陀区金沙江路 1518 弄', // total: '上海市普陀区金沙江路 1518 弄',
// }, // },
], ],
networkStatus: { networkStatus: {
internetAccess: '', internetAccess: '',
internetDelay: '', internetDelay: '',
DNS: '', DNS: '',
VPNvisit: '', VPNvisit: '',
serverVPN: '', serverVPN: '',
serverVPNOpen: '' serverVPNOpen: '',
}, },
// networkStatus: [ networkStatus: [
// { // {
// connect: '2016-05-02', // connect: '2016-05-02',
// IP: '王小虎', // IP: '王小虎',
// acceptor: '上海市普陀区金沙江路 1518 弄', // acceptor: '上海市普陀区金沙江路 1518 弄',
// totalReceived: '上海市普陀区金沙江路 1518 弄', // totalReceived: '上海市普陀区金沙江路 1518 弄',
// transmission: '上海市普陀区金沙江路 1518 弄', // transmission: '上海市普陀区金沙江路 1518 弄',
// transmissionTotal: '上海市普陀区金沙江路 1518 弄', // transmissionTotal: '上海市普陀区金沙江路 1518 弄',
// }, // },
// ] ]
messageTimer: null
};
},
created() {
this.createMqtt();
// setTimeout(() => {
// this.createMqtt()
// }, 3000);
},
mounted() {
this.publishClient();
this.messageTimer = setInterval(() => {
//每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
this.publishClient();
}, 1000 * 5);
},
methods: {
/** 创建mqtt */
createMqtt() {
// window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
//创建链接，接收数据
var topicSends = ['Contorl_server'];
window.PubScribe(topicSends, -1, this.realInfo);
},
publishClient() {
window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
},
/** 实时数据分类 */
realInfo(topic, message) {
// console.log("topic",topic)
switch (topic) {
case 'Contorl_server':
try {
// console.log("message",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("msg",msg)
this.runningState.currentTime = msg.now_time;
this.runningState.startTime = msg.starttime;
this.runningState.runTime = msg.uptime;
//平均Cpu利用率
this.performance.averageCpuUtilization = msg.cpu_Average + '%';
this.performance.cpuUtilization = msg.cpu_Every;
this.performance.cpuTemperature = msg.cpu_Temperature + '°C';
this.performance.cpuName = msg.cpu_Name;
this.performance.gpuUtilization = msg.gpu_Average + '%';
this.performance.gpuTemperature = msg.gpu_Temperature + '°C';
var newmemoryUsed = msg.memory_used / 1024 / 1024 / 1024;
this.performance.memoryUsage = msg.memory_percent + '%' + ' | ' + newmemoryUsed.toFixed(2) + 'GB';
var totalMemoryN = msg.memory_total / 1024 / 1024 / 1024;
this.performance.totalMemory = totalMemoryN.toFixed(2) + 'GB';
var newswapUsed = msg.swap_used / 1024 / 1024 / 1024;
this.performance.virtualMemoryUsed = msg.swap_percent + '%' + ' | ' + newswapUsed.toFixed(2) + 'GB';
var totalVirtualMemoryN = msg.swap_total / 1024 / 1024 / 1024;
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2) + 'GB';
} catch (error) {}
break;
}
}
},
beforeDestroy() {
clearInterval(this.messageTimer);
this.messageTimer = null;
} }
}; },
created() {
this.createMqtt()
// setTimeout(() => {
// this.createMqtt()
// }, 3000);
},
mounted() {
window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
this.publishClient()
}, 1000 * 5 )
},
methods: {
/** 创建mqtt */
createMqtt() {
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
//创建链接，接收数据
var topicSends = ['Contorl_server'];
window.PubScribe(topicSends,-1,this.realInfo);
},
publishClient(){
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
},
/** 实时数据分类 */
realInfo(topic, message) {
// console.log("topic",topic)
switch (topic) {
case "Contorl_server":
try {
// console.log("message",message)
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(message)
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log("msg",msg)
this.runningState.currentTime = msg.now_time
this.runningState.startTime = msg.starttime
this.runningState.runTime = msg.uptime
//平均Cpu利用率
this.performance.averageCpuUtilization = msg.cpu_Average+'%'
this.performance.cpuUtilization = msg.cpu_Every
this.performance.cpuTemperature = msg.cpu_Temperature+"°C"
this.performance.cpuName = msg.cpu_Name
this.performance.gpuUtilization = msg.gpu_Average+'%'
this.performance.gpuTemperature = msg.gpu_Temperature+"°C"
var newmemoryUsed = msg.memory_used/1024/1024/1024
this.performance.memoryUsage = msg.memory_percent+'%'+' | '+ newmemoryUsed.toFixed(2)+'GB'
var totalMemoryN = msg.memory_total/1024/1024/1024
this.performance.totalMemory = totalMemoryN.toFixed(2)+'GB'
var newswapUsed = msg.swap_used/1024/1024/1024
this.performance.virtualMemoryUsed = msg.swap_percent+'%' +' | '+ newswapUsed.toFixed(2)+'GB'
var totalVirtualMemoryN = msg.swap_total/1024/1024/1024
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2)+'GB'
} catch (error) {
}
break;
}
},
}
}
</script> </script>
<style scoped> <style scoped>
.test-div i { .test-div i {
font-size: 25px; font-size: 25px;
} }
.el-form-item { .el-form-item {
margin-bottom: 0px; margin-bottom: 0px;
} }
.mar-top20 { .mar-top20 {
margin-top: 20px; margin-top: 20px;
} }
</style> </style>

3068
src/views/bounced/analysisConfiguration.vue
View File

File diff suppressed because it is too large Load Diff

584
src/views/bounced/analysisPreview.vue
View File

@ -1,309 +1,313 @@
<template> <template>
<div> <div >
<div> <div >
<div style="width: 100%; height: 900px; display: inline-block; border: 1px soild #eee"> <div style="width:100%;height:900px;display:inline-block;border:1px soild #eee;">
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe> <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"></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> -->
</div> </div>
<el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%"> <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
<el-row> <el-row>
<el-col :span="6"> 文件选择： </el-col> <el-col :span="6">
<el-col :span="18"> 文件选择：
<el-upload action="https://jsonplaceholder.typicode.com/posts/"> </el-col>
<el-button size="small" type="primary">点击上传</el-button> <el-col :span="18">
</el-upload> <el-upload action="https://jsonplaceholder.typicode.com/posts/">
</el-col> <el-button size="small" type="primary">点击上传</el-button>
</el-row> </el-upload>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button> <el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import mqtt from 'mqtt'; // mqtt协议 import mqtt from "mqtt"; // mqtt协议
export default { export default {
data() { data() {
return { return {
form: { form: {
name1: '离线', name1: '离线',
name2: '重新配置', name2: '重新配置',
state: '关', state: '关',
endTime: '连接', endTime: '连接',
blacklist: '-1x-1', blacklist: '-1x-1',
autograph: '-1x-1', autograph: '-1x-1',
version: '0', version: '0',
version1: '0', version1: '0',
version2: '0', version2: '0',
version4: '', version4: '',
version5: '不受支持的', version5: '不受支持的',
version6: '不受支持的', version6: '不受支持的',
version7: '不受支持的', version7: '不受支持的',
version8: '不受支持的' version8: '不受支持的',
}, },
showUpdateCertificate: false showUpdateCertificate: false,
};
},
created() {
this.testMqtt();
},
methods: {
// 测试：mqtt测试
testMqtt() {
this.getDataByMqtt();
},
// mqtt订阅（独立）
getDataByMqtt(url, topic, cIdNum) {
const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(':')[0];
console.log('ip', ip);
let host = `ws://${ip}:10087`;
if (process.env.NODE_ENV === 'development') {
host = 'ws://172.16.1.168:10087/';
}
// const host = 'ws://172.16.1.168:10087/';
const options = {
// 配置
// 测试：订阅本机IP
// host: host,
// port: port,
// host:"172.16.1.168:10086",
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
username: 'admin', // 用户名（可选）
password: '123456', // 密码（可选）
clientId: clientId, // 客户端ID，默认随机生成
protocolId: 'MQTT',
protocolVersion: 4,
clean: true, // false在离线时接收QoS1和2的消息
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
will: {
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
topic: 'img1', // 要发布的主题
payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
retain: false // 保留标志
}
};
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host) // 连接
// 错误回调
// console.log("this.mqttClient", this.mqttClient)
this.mqttClient.on('error', (err) => {
console.log('[MQTT-TEST] 连接错误：', err);
this.mqttClient.end();
});
// 重连回调
this.mqttClient.on('reconnect', (reconnect) => {
// console.log("[MQTT-TEST] 重连中……", reconnect);
});
// 连接回调
this.mqttClient.on('connect', (connect) => {
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
// 订阅
this.mqttClient.subscribe('img0', { qos: 0 });
this.mqttClient.publish('aaa', '111');
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) => {
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的错误提示数据
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('img1') != -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('img2') != -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('img3') != -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('img4') != -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('img5') != -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('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) {
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('stream2') != -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('stream3') != -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('stream4') != -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('stream5') != -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('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));
}
});
}
}
} }
}; },
created() {
this.testMqtt()
},
methods: {
// 测试：mqtt测试
testMqtt() {
this.getDataByMqtt()
},
// mqtt订阅（独立）
getDataByMqtt(url, topic, cIdNum) {
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0];
console.log("ip",ip)
const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/';
const options = {
// 配置
// 测试：订阅本机IP
// host: host,
// port: port,
// host:"172.16.1.168:10086",
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
username: 'admin', // 用户名（可选）
password: '123456', // 密码（可选）
clientId: clientId, // 客户端ID，默认随机生成
protocolId: "MQTT",
protocolVersion: 4,
clean: true, // false在离线时接收QoS1和2的消息
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
will: {
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
topic: "img1", // 要发布的主题
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
retain: false, // 保留标志
},
};
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host) // 连接
// 错误回调
// console.log("this.mqttClient", this.mqttClient)
this.mqttClient.on("error", (err) => {
console.log("[MQTT-TEST] 连接错误：", err);
this.mqttClient.end();
});
// 重连回调
this.mqttClient.on("reconnect", (reconnect) => {
// console.log("[MQTT-TEST] 重连中……", reconnect);
});
// 连接回调
this.mqttClient.on("connect", (connect) => {
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
// 订阅
this.mqttClient.subscribe('img0', { qos: 0 });
this.mqttClient.publish('aaa', '111');
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) => {
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的错误提示数据
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("img1") != -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("img2") != -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("img3") != -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("img4") != -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("img5") != -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("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) {
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("stream2") != -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("stream3") != -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("stream4") != -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("stream5") != -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("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))
}
});
}
},
}
}
</script> </script>
<style> <style>
.test-div i { .test-div i {
font-size: 25px; font-size: 25px;
} }
.el-form-item { .el-form-item {
margin-bottom: 0px; margin-bottom: 0px;
} }
</style> </style>

1049
src/views/bounced/dataBoard-old.vue
View File

File diff suppressed because it is too large Load Diff

863
src/views/bounced/dataBoard.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div ref="box" class="box" v-loading="loading"> <div ref="box" class="box">
<el-empty v-show="!loading && sectionData.length == 0" :image-size="400"></el-empty> <el-empty v-show="sectionData.length == 0" :image-size="400"></el-empty>
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> --> <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
<el-scrollbar class="scrollbar"> <el-scrollbar class="scrollbar">
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'"> <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
@ -14,6 +14,7 @@
<p class="board-title"> <p class="board-title">
<span>{{ s.title }}</span> <span>{{ s.title }}</span>
</p> </p>
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
</div> </div>
<el-tabs> <el-tabs>
<el-collapse v-model="acticveName" @change="handleChange"> <el-collapse v-model="acticveName" @change="handleChange">
@ -21,7 +22,7 @@
<div class="titleGnag"></div> <div class="titleGnag"></div>
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId"> <el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
<!--触发的组件 --> <!--触发的组件 -->
<newtypeChart <typeChart
ref="typeChartRef" ref="typeChartRef"
v-if="o.timeMode === '实时触发'" v-if="o.timeMode === '实时触发'"
:itemData="o" :itemData="o"
@ -35,7 +36,7 @@
:typeValue="typeTimeMode" :typeValue="typeTimeMode"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
/> />
<newtypeChart <typeChart
ref="typeChartRef1" ref="typeChartRef1"
v-if="o.timeMode === '固定时刻'" v-if="o.timeMode === '固定时刻'"
:itemData="o" :itemData="o"
@ -51,7 +52,7 @@
/> />
<!-- 固定间隔的组件 --> <!-- 固定间隔的组件 -->
<newtypeChart <typeChart
ref="typeChartRef2" ref="typeChartRef2"
style="width: 100%" style="width: 100%"
v-if="o.timeMode === '固定间隔'" v-if="o.timeMode === '固定间隔'"
@ -60,7 +61,6 @@
:triggerType="o.timeMode" :triggerType="o.timeMode"
:componentName="o.componentName" :componentName="o.componentName"
:dataArr="o.cycleStatisticsData" :dataArr="o.cycleStatisticsData"
:cycleAccumulateData="o.cycleAccumulateData"
:echartArr="o.presentationForm" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :chartName="o.combinationName"
@ -81,15 +81,12 @@
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment'; import typeChart from '../../components/target/typeChart.vue';
import _ from 'lodash';
import newtypeChart from '../../components/target/newtypeChart.vue';
// import {mapMutation} from 'vuex' // import {mapMutation} from 'vuex'
import { getComponentSection } from '../../api/index'; import { getComponentSection } from '../../api/index';
import { update } from '../../api/aboutMachine';
export default { export default {
components: { components: {
newtypeChart typeChart
}, },
props: { props: {
activeName: { activeName: {
@ -139,37 +136,47 @@ export default {
}, },
data() { data() {
return { return {
loading: false,
acticveName: [], acticveName: [],
title1: '01断面',
title2: '01区域',
dialogVisible: false,
idVal: '',
//组件数组 //组件数组
componentList: [], componentList: [],
// 触发数据数组 // 触发数据数组
triggerList: [], triggerList: [],
sectionData: [], sectionData: [],
// 单个区域或者断面的表格触发数据
tableList: [],
// 路线数据
headWay: [],
tripData: [],
sectionArr: [], sectionArr: [],
//触发的类型数值看板显示 //触发的类型数值看板显示
// "type_data":[{//类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值 typeTimeMode: {},
// "name":"electric bicycle",//类型名称 // 固定时刻的数值看板展示
// "quantity":0//数量 typeCycleTimeData: {},
// }], typeCycleStatistics: {},
// "ob_data":[{//od数据，只供od组件使用，只有组件类型为OD的时候，这个字段才有值
// "end":"gate1",
// "data":[{
// "start":"zone1",
// "quantity":0
// }]
// }]
typeTimeMode: {}, //实时触发类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
typeCycleTimeData: {}, // 固定时刻的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
typeCycleStatistics: {}, //固定间隔的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
// 各个组件分类 // 各个组件分类
classify: [] classify: []
// cycleHistoryData:''
}; };
}, },
created() {}, // beforeCeated(){
// },
created() {
// this.getNew()
// //console.log("cycleHistoryData",this.cycleHistoryData)
},
methods: { methods: {
// 手风琴下拉切换 // 手风琴下拉切换
handleChange(val) { handleChange(val) {
@ -180,33 +187,21 @@ export default {
// }); // });
// }, 3000); // }, 3000);
}, },
//点击数据看板tab会执行获取所有配置的组件 getNew() {
getNew(getHistory) { // this.idVal = ;
this.loading = true; getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }) if (res.data.code == 200) {
.then((res) => { //console.log(res.data.data, '组件的数据');
if (res.data.code == 200) { this.componentList = res.data.data;
//console.log(res.data.data, '组件的数据'); this.siftData();
this.componentList = res.data.data; }
this.siftData(); });
this.$nextTick(() => {
if (this.$route.query.type == '离线视频' && getHistory) {
getHistory();
}
});
}
})
.finally(() => {
this.loading = false;
});
}, },
//组件数据根据分类重组到相同分类下
siftData() { siftData() {
//获取分类
this.sectionArr = []; this.sectionArr = [];
this.sectionData = []; this.sectionData = [];
// this.classify = []; //通过相同赋值来改变sectionData里面children数据的改变不太合理，所以这边不用了 this.classify = [];
this.componentList.forEach((val) => { this.componentList.forEach((val) => {
// //console.log("val",val) // //console.log("val",val)
this.sectionArr.push(val.combinationName); this.sectionArr.push(val.combinationName);
@ -214,187 +209,689 @@ export default {
}); });
this.sectionData = this.sectionArr.map((item) => { this.sectionData = this.sectionArr.map((item) => {
item = { title: item, children: [] }; item = { title: item, children: [] };
this.acticveName = []; //存储collapse组件的展开，默认全部收缩 this.acticveName = [];
this.componentList.forEach((val) => { this.componentList.forEach((val) => {
if (item.title == val.combinationName) { if (item.title == val.combinationName) {
// this.classify.push(val); this.classify.push(val);
//trigger 为实时触发存储的数据，cycleTimeData为固定时刻存储的数据，cycleStatisticsData为固定间隔存储的数据
//在接口返回的componentList组件中没有trigger字段
if (!val.trigger) {
val.trigger = [];
}
//固定间隔还有个周期统计实时累计数据主题
if (!val.cycleAccumulateData) {
val.cycleAccumulateData = [];
}
item.children.push(val); item.children.push(val);
//把cycleStatisticsData，cycleTimeData存给children同级别暂时没理解为啥怎么做 if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
// if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) { item.cycleStatisticsData = val.cycleStatisticsData;
// item.cycleStatisticsData = val.cycleStatisticsData; }
// } if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
// if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) { item.cycleTimeData = val.cycleTimeData;
// item.cycleTimeData = val.cycleTimeData; }
// }
} }
// this.acticveName.push(val.analogAreaComponentId); this.acticveName.push([val.analogAreaComponentId]);
}); });
return item; return item;
}); });
// console.log('折叠面板-', this.acticveName);
}, },
updateSectionData(newVal, updateKey, timeMode) { // 组件图标点击下拉事件
let tempNewVal = _.cloneDeep(newVal); sectionHandle(i) {
this.sectionData.forEach((item) => { // let sections = document.querySelectorAll('.section');
//item.title == val.combinationName let sectionBox = document.querySelectorAll('.sectionBox');
if (item.children && item.children.length > 0) { let downPulls1 = document.querySelectorAll('.downPull1');
item.children.forEach((cItem) => { // 断面的小图标
if (cItem.timeMode == timeMode) { downPulls1[i].dataset.num++;
// console.log('cItem', cItem); if (downPulls1[i].dataset.num % 2 == 0) {
//找出对应timeMode的mqtt数据 downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
tempNewVal.forEach((nItem) => { // sections[i].style.height = 'auto';
if (cItem.analogAreaComponentId == nItem.component_id) { if (sectionBox[i] != undefined) {
if (cItem[updateKey].length > 9) { // sectionBox[i].style.height = 'auto';
this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
}
//这里逻辑不知道为啥这样处理time，用的原逻辑
if (this.$route.query.type == '离线视频') {
var timeNew = nItem.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
nItem.time = key;
} else {
nItem.time = nItem.time.split('.')[0];
}
if (this.$route.query.type == '离线视频') {
if (
cItem[updateKey].length == 0 ||
(cItem[updateKey].length > 0 && nItem.time != cItem[updateKey][0].time)
) {
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
}
} else {
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
}
// cItem[updateKey].unshift(nItem);
}
});
}
});
} }
}); } else {
this.$forceUpdate(); downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
// console.log('sectionData', this.sectionData); // sections[i].style.height = '500px';
if (sectionBox[i] != undefined) {
}
}
}, },
//过滤重复的 time 字段，保留每个 time 最后一个对象
filteredArrayFun(originalArray) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) { // 触发数据的类型数值
accumulator.push(currentValue);
//循环方法
getRef(data, timeMode) {
for (let i = 0; i < data.length; i++) {
let refItem = data[i];
if (data.length != 0 && refItem.dataArr && refItem.dataArr.length > 0) {
if (refItem.echartArr.includes('时间曲线图')) {
refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
}
if (refItem.echartArr.includes('数值')) {
refItem.getDataArr(refItem.dataArr);
}
if (refItem.echartArr.includes('表格')) {
refItem.getDataArr(refItem.dataArr);
}
if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
}
if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
}
if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
}
if (
refItem.componentName.includes('OD') &&
refItem.$refs.ODChartRef != undefined &&
refItem.dataArr[0].ob_data &&
refItem.dataArr[0].ob_data.length != 0
) {
refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
}
} }
}
return accumulator; },
}, []); //处理离线视频历史数据
changecycleHistoryData() {}
// 按照时间从小到大排序
const sortedArray = uniqueArray.sort((a, b) => {
const dateA = new Date(a.time);
const dateB = new Date(b.time);
return dateA - dateB;
});
return sortedArray;
}
}, },
mounted() {}, mounted() {},
watch: { watch: {
// 触发的原始数据 作用是给3d那边，界面不需要展示 // 触发的原始数据
// triggerData: { triggerData: {
// handler(newVal, oldVal) {}, handler(newVal, oldVal) {},
// immediate: true immediate: true
// }, },
//离线历史数据 componentList: {
cycleHistoryData: {
handler(newVal) { handler(newVal) {
// debugger //console.log('componentList', newVal);
console.log('历史cycleHistoryData-', newVal);
//该主题只会有固定间隔和固定时刻数据 if (newVal != undefined && newVal.length != 0) {
if (newVal && this.sectionData.length > 0) { newVal.forEach((ele) => {
//更新sectionData对应的analogAreaComponentId和timeMode更新数据 if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) { //console.log('实时视频', '固定间隔');
newVal.CycleStatisticsData.forEach((ele) => { this.$nextTick(() => {
if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) { // var thatNN = this;
//按照时间从小到大排序 ele.cycleStatisticsData.forEach((item) => {
let cycleStatisticsData = this.filteredArrayFun(ele.cycleStatisticsData); if (item.type_data != null) {
this.updateSectionData(cycleStatisticsData, 'cycleStatisticsData', '固定间隔'); this.typeCycleStatistics = item;
}
});
if (this.$refs.typeChartRef2 != undefined) {
// // 轮循固定时刻生成的各类组件
//console.log('轮循固定时刻生成的各类组件')
this.getRef(this.$refs.typeChartRef2, ele.timeMode);
}
});
}
if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
//console.log('实时视频', '固定时刻');
this.$nextTick(() => {
ele.cycleTimeData.forEach((item) => {
if (item.type_data != null) {
item.time = item.time.split('.')[0];
this.typeCycleStatistics = item;
}
// thatN.$nextTick(() => {
});
if (this.$refs.typeChartRef1 != undefined) {
// // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef1, ele.timeMode);
}
});
}
if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
if (
this.cycleHistoryData.CycleStatisticsData != undefined &&
this.cycleHistoryData.CycleStatisticsData.lenght != 0
) {
this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
if (ne.component_id == ele.analogAreaComponentId) {
ele.cycleStatisticsData = ne.cycleStatisticsData;
}
});
this.$nextTick(() => {
ele.cycleStatisticsData.forEach((item) => {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
if (item.type_data != null) {
this.typeCycleStatistics = item;
}
// thatN.$nextTick(() => {
});
if (this.$refs.typeChartRef2 != undefined) {
// // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef2, '固定间隔');
}
});
} }
}); }
} if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
if (newVal.CycleTimeData && newVal.CycleTimeData.length > 0) { if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
newVal.CycleTimeData.forEach((ele) => { this.cycleHistoryData.CycleTimeData.forEach((ne) => {
if (ele.cycleTimeData && ele.cycleTimeData.length > 0) { if (ne.component_id == ele.analogAreaComponentId) {
//按照时间从小到大排序 ele.cycleTimeData = ne.cycleTimeData;
let cycleTimeData = this.filteredArrayFun(ele.cycleTimeData); }
this.updateSectionData(cycleTimeData, 'cycleTimeData', '固定时刻'); });
this.$nextTick(() => {
ele.cycleTimeData.forEach((item) => {
// if(this.$route.query.type=='离线视频'){
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
// }else{
// item.time = item.time.split('.')[0];
// }
if (item.type_data != null) {
this.typeCycleStatistics = item;
}
});
if (this.$refs.typeChartRef1 != undefined) {
// // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef1, '固定时刻');
}
});
} }
}); }
} });
} }
}, },
immediate: true, immediate: true,
deep: true deep: true
}, },
// 处理过的触发数据 cycleHistoryData: {
triggerListData: {
handler(newVal) { handler(newVal) {
// console.log('实时触发triggerListData-', newVal[0].time); // debugger
// console.log('实时触发triggerListData-系统时间', moment().format('YYYY-MM-DD HH:mm:ss')); //console.log('历史', newVal);
// //console.log("历史",oldVal)
if (newVal != undefined) {
// newVal.forEach(ele => {
if (newVal.CycleStatisticsData) {
newVal.CycleStatisticsData.forEach((ele) => {
this.$nextTick(() => {
// var thatNN = this;
ele.cycleStatisticsData.forEach((item) => {
if (item.type_data != null) {
if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
} else {
item.time = item.time.split('.')[0];
}
this.typeCycleStatistics = item;
}
});
if (this.$refs.typeChartRef2 != undefined) {
// // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef2, '固定间隔');
}
});
});
}
if (newVal.CycleTimeData) {
newVal.CycleTimeData.forEach((ele) => {
this.$nextTick(() => {
// debugger
// var thatNN = this;
ele.cycleTimeData.forEach((item) => {
if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
} else {
item.time = item.time.split('.')[0];
}
if (item.type_data != null) {
this.typeCycleStatistics = item;
}
});
if (this.$refs.typeChartRef1 != undefined) {
// // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef1, '固定时刻');
}
});
});
}
if (newVal && newVal.length > 0 && this.sectionData.length > 0) { // });
//更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
this.updateSectionData(newVal, 'trigger', '实时触发');
} }
}, },
immediate: true, immediate: true,
deep: true deep: true
}, },
// activeName:'channge',
// 处理过的触发数据
triggerListData: {
handler(newVal) {
// //console.log("newVal",newVal,'流量数据')
this.triggerList = newVal;
// //console.log("oldVal",oldVal)
// 触发数据
var _this = this;
if (newVal.length != 0 && _this.sectionData) {
_this.classify.forEach((ele, index) => {
if (ele.trigger == undefined && ele.timeMode == '实时触发') {
ele.trigger = [];
}
newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
// //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
// //console.log(item.component_id, 'component_id');
if (ele.trigger.length == 10) {
ele.trigger.pop();
}
if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
} else {
item.time = item.time.split('.')[0];
}
// 该时间的触发数据
if (item.type_data != null) {
_this.typeTimeMode = item;
}
ele.trigger.unshift(item);
_this.$nextTick(() => {
if (_this.$refs.typeChartRef != undefined) {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let itemTypeChart = _this.$refs.typeChartRef[i];
if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
if (itemTypeChart.echartArr.includes('时间曲线图')) {
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
_this.$refs.typeChartRef[i].dataArr,
_this.$refs.typeChartRef[i].componentName.split('_')[0],
'实时触发'
);
}
if (itemTypeChart.echartArr.includes('数值')) {
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
}
if (itemTypeChart.echartArr.includes('表格')) {
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
}
if (
itemTypeChart.echartArr.includes('直方图') &&
itemTypeChart.componentName.split('_')[0]
) {
// 数据改变重新渲染柱状图
itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
}
if (
itemTypeChart.echartArr.includes('饼状图') &&
itemTypeChart.componentName.split('_')[0]
) {
// 数据改变重新渲染饼图
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
}
if (
itemTypeChart.componentName.includes('OD') &&
itemTypeChart.$refs.ODChartRef != undefined &&
itemTypeChart.dataArr[0].ob_data &&
itemTypeChart.dataArr[0].ob_data.length != 0
) {
itemTypeChart.$refs.ODChartRef.drawThermalChart(
itemTypeChart.dataArr[0].ob_data,
itemTypeChart.startEndData
);
}
}
}
}
});
}
});
});
}
},
immediate: true
},
// 固定时刻的数据 // 固定时刻的数据
cycleTimeData: { cycleTimeData: {
handler(newVal) { handler(newVal) {
// 监听到打印固定时刻数据 // 监听到打印固定时刻数据
// console.log('固定时刻数据cycleTimeData-', newVal); // console.log(newVal, '固定时刻数据');
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
this.updateSectionData(newVal, 'cycleTimeData', '固定时刻'); if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var thatN = this;
thatN.classify.forEach((ele, index) => {
newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.pop();
}
// item.time = item.time.split('.')[0];
if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
} else {
item.time = item.time.split('.')[0];
}
if (item.type_data != null) {
// 固定时刻的类型数据
thatN.typeCycleTimeData = item;
}
ele.cycleTimeData.unshift(item);
// thatN.$nextTick(() => {
if (thatN.$refs.typeChartRef1 != undefined) {
// //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
// 轮循固定时刻生成的各类组件
for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
if (
itemTypeChartRef1.length != 0 &&
itemTypeChartRef1.dataArr != undefined &&
itemTypeChartRef1.dataArr.length != 0
) {
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
thatN.$refs.typeChartRef1[i].dataArr,
thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
'固定时刻'
);
}
if (itemTypeChartRef1.echartArr.includes('数值')) {
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
}
if (itemTypeChartRef1.echartArr.includes('表格')) {
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
}
if (
itemTypeChartRef1.echartArr.includes('直方图') &&
itemTypeChartRef1.$refs.barChartRef.drawBar
) {
// 数据改变重新渲染柱状图
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
}
if (
itemTypeChartRef1.echartArr.includes('饼状图') &&
itemTypeChartRef1.$refs.pieChartRef.drawPie
) {
// 数据改变重新渲染饼图
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
}
if (
itemTypeChartRef1.echartArr.includes('均值图') &&
itemTypeChartRef1.$refs.avgChartRef != undefined
) {
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
}
if (
itemTypeChartRef1.componentName.includes('OD') &&
itemTypeChartRef1.$refs.ODChartRef != undefined &&
itemTypeChartRef1.dataArr[0].ob_data &&
itemTypeChartRef1.dataArr[0].ob_data.length != 0
) {
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
itemTypeChartRef1.dataArr[0].ob_data,
itemTypeChartRef1.startEndData
);
}
}
}
// });
}
}
});
});
} }
// else {
// var _thatN = this
// _thatN.classify.forEach((ele, index) => {
// // newVal.forEach(item => {
// if (ele.timeMode == '固定时刻') {
// if (ele.cycleTimeData.length == 10) {
// ele.cycleTimeData.pop();
// }
// // item.time = item.time.split('.')[0];
// // if (item.type_data != null) {
// // // 固定时刻的类型数据
// // _thatN.typeCycleTimeData = item;
// // }
// // ele.cycleTimeData.unshift(item);
// // _thatN.$nextTick(() => {
// if (_thatN.$refs.typeChartRef1 != undefined) {
// // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
// // 轮循固定时刻生成的各类组件
// for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
// let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
// if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
// if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
// _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻')
// }
// if (itemTypeChartRef1.echartArr.includes('数值')) {
// _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
// }
// if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
// // 数据改变重新渲染柱状图
// itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
// }
// if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
// // 数据改变重新渲染饼图
// itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
// }
// if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef.drawBar) {
// itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
// }
// if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
// itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
// }
// }
// }
// // });
// }
// }
// // });
// });
// }
}, },
immediate: true, immediate: true
deep: true
}, },
//固定间隔 //固定间隔
cycleStatisticsData: { cycleStatisticsData: {
handler(newVal) { handler(newVal) {
// console.log('固定间隔cycleStatisticsData', newVal); // console.log('固定间隔', newVal);
if (newVal && newVal.length > 0 && this.sectionData.length > 0) { if (newVal != undefined && newVal.length != 0 && this.sectionData) {
this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔'); var that = this;
that.classify.forEach((ele, index) => {
newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatisticsData.pop();
}
if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
} else {
item.time = item.time.split('.')[0];
}
if (item.type_data != null) {
that.typeCycleStatistics = item;
}
ele.cycleStatisticsData.unshift(item);
if (that.$refs.typeChartRef2 != undefined) {
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
if (
itemTypeChartRef2.length != 0 &&
itemTypeChartRef2.dataArr != undefined &&
itemTypeChartRef2.dataArr.length != 0
) {
if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
that.$refs.typeChartRef2[i].dataArr,
that.$refs.typeChartRef2[i].componentName.split('_')[0],
'固定间隔'
);
}
if (itemTypeChartRef2.echartArr.includes('数值')) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
}
if (itemTypeChartRef2.echartArr.includes('表格')) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
}
// //console.log(item,'组件数据');
if (
itemTypeChartRef2.echartArr.includes('直方图') &&
itemTypeChartRef2.$refs.barChartRef.drawBar
) {
// 数据改变重新渲染柱状图
// //console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
}
if (
itemTypeChartRef2.echartArr.includes('饼状图') &&
itemTypeChartRef2.$refs.pieChartRef.drawPie
) {
// 数据改变重新渲染饼图
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
}
if (
itemTypeChartRef2.echartArr.includes('均值图') &&
itemTypeChartRef2.$refs.avgChartRef != undefined
) {
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
}
if (
itemTypeChartRef2.componentName.includes('OD') &&
itemTypeChartRef2.$refs.ODChartRef != undefined &&
itemTypeChartRef2.dataArr[0].ob_data &&
itemTypeChartRef2.dataArr[0].ob_data.length != 0
) {
itemTypeChartRef2.$refs.ODChartRef.drawThermalChart(
itemTypeChartRef2.dataArr[0].ob_data,
itemTypeChartRef2.startEndData
);
}
}
}
}
}
});
});
} }
// else {
// var _that = this
// _that.classify.forEach(ele => {
// if (ele.timeMode == '固定间隔') {
// if (ele.cycleStatisticsData.length == 10) {
// ele.cycleStatisticsData.pop();
// }
// // item.time = item.time.split('.')[0];
// // if (item.type_data != null) {
// // _that.typeCycleStatistics = item;
// // }
// // ele.cycleStatisticsData.unshift(item);
// if (_that.$refs.typeChartRef2 != undefined) {
// for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
// let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
// // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
// if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
// // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
// if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
// _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔')
// }
// if (itemTypeChartRef2.echartArr.includes('数值')) {
// _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
// }
// // //console.log(item,'组件数据');
// if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
// // 数据改变重新渲染柱状图
// // //console.log(item, '组件');
// itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
// }
// if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// // 数据改变重新渲染饼图
// itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
// }
// // if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
// // item.$refs.avgChartRef.drawBar(item.dataArr[0])
// // }
// if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
// itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
// }
// }
// }
// }
// }
// });
// }
}, },
immediate: true, immediate: true
deep: true
}, },
//周期统计实时累计数据主题 //周期统计实时累计数据主题
cycleAccumulateData: { cycleAccumulateData: {
handler(newVal) { handler(newVal) {
// console.log('周期统计实时累计数据主题cycleAccumulateData-', newVal); // console.log('周期统计实时累计数据主题', newVal);
if (newVal && newVal.length > 0 && this.sectionData.length > 0) { if (newVal != undefined && newVal.length != 0 && this.sectionData) {
//实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新 var that = this;
this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔'); that.classify.forEach((ele, index) => {
newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
// if (ele.cycleStatisticsData.length == 10) {
// ele.cycleStatisticsData.pop();
// }
if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
} else {
item.time = item.time.split('.')[0];
}
if (item.type_data != null) {
that.typeCycleStatistics = item;
}
// ele.cycleStatisticsData.unshift(item);
if (that.$refs.typeChartRef2 != undefined) {
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
if (
itemTypeChartRef2.length != 0 &&
itemTypeChartRef2.dataArr != undefined &&
itemTypeChartRef2.dataArr.length != 0
) {
//console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
if (
itemTypeChartRef2.echartArr.includes('数值') &&
itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
) {
//只需要修改数值组件,逻辑存在问题
itemTypeChartRef2.getcycleAccumulateDataArr([item]);
}
}
}
}
}
});
});
} }
}, },
immediate: true, immediate: true
deep: true
} }
} }
}; };

1327
src/views/bounced/form.vue
View File

File diff suppressed because it is too large Load Diff

271
src/views/bounced/maintenanceRemind.vue
View File

@ -1,16 +1,9 @@
<template> <template>
<div class="statusMain"> <div class="statusMain">
<div> <div>
<!-- <p>节点源</p> --> <!-- <p>节点源</p> -->
<!-- <h3>节点源</h3> --> <!-- <h3>节点源</h3> -->
<el-descriptions title="目标检测" :column="5" border> <el-descriptions title="目标检测" :column="5" border>
<el-descriptions-item label="图片fps">{{ getUnityData.fpsPicture }}</el-descriptions-item>
<el-descriptions-item label="运行时间(s)">{{ getUnityData.time }}</el-descriptions-item>
<el-descriptions-item label="场景FPS">{{ getUnityData.fpsCount }}</el-descriptions-item>
<el-descriptions-item label="数据fps">{{ getUnityData.fpsData }}</el-descriptions-item>
<el-descriptions-item label="当前处理帧编号">{{ getUnityData.frameNum }}</el-descriptions-item>
</el-descriptions>
<!-- <el-descriptions title="目标检测" :column="5" border>
<el-descriptions-item label="视频地址"> <el-descriptions-item label="视频地址">
{{ form.target_detection.video_address }}</el-descriptions-item {{ form.target_detection.video_address }}</el-descriptions-item
> >
@ -38,9 +31,9 @@
<el-descriptions-item label="最后一帧分析时间">{{ <el-descriptions-item label="最后一帧分析时间">{{
form.target_detection.last_frame_analysis_time form.target_detection.last_frame_analysis_time
}}</el-descriptions-item> }}</el-descriptions-item>
</el-descriptions> --> </el-descriptions>
<!-- <el-descriptions title="交通分析" :column="5" border> <el-descriptions title="交通分析" :column="5" border>
<el-descriptions-item label="分析帧速率"> <el-descriptions-item label="分析帧速率">
{{ form.traffic_analysis.analyze_frame_rate }}</el-descriptions-item {{ form.traffic_analysis.analyze_frame_rate }}</el-descriptions-item
> >
@ -53,149 +46,149 @@
<el-descriptions-item label="最后一帧分析时间">{{ <el-descriptions-item label="最后一帧分析时间">{{
form.traffic_analysis.last_frame_analysis_time form.traffic_analysis.last_frame_analysis_time
}}</el-descriptions-item> }}</el-descriptions-item>
</el-descriptions> --> </el-descriptions>
<el-descriptions title="数据同步" :column="5" border> <el-descriptions title="数据同步" :column="5" border>
<el-descriptions-item label="上次同步时间"> {{ form.data_sync.lastSyncTime }}</el-descriptions-item> <el-descriptions-item label="上次同步时间">
<el-descriptions-item label="本次同步时间">{{ form.data_sync.currentSyncStatus }}</el-descriptions-item> {{ form.data_sync.lastSyncTime }}</el-descriptions-item
<el-descriptions-item label="下次同步时间">{{ form.data_sync.nextSyncTime }}</el-descriptions-item> >
</el-descriptions> <el-descriptions-item label="本次同步时间">{{
form.data_sync.currentSyncStatus
}}</el-descriptions-item>
<el-descriptions-item label="下次同步时间">{{
form.data_sync.nextSyncTime
}}</el-descriptions-item>
</el-descriptions>
<!-- <el-button @click="showUpdateCertificate = true" type="primary" style="margin-top:15px">更新证书</el-button> --> <!-- <el-button @click="showUpdateCertificate = true" type="primary" style="margin-top:15px">更新证书</el-button> -->
<el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%"> <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
<el-row> <el-row>
<el-col :span="6"> 文件选择： </el-col> <el-col :span="6"> 文件选择： </el-col>
<el-col :span="18"> <el-col :span="18">
<el-upload action="https://jsonplaceholder.typicode.com/posts/"> <el-upload action="https://jsonplaceholder.typicode.com/posts/">
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
</el-upload> </el-upload>
</el-col> </el-col>
</el-row> </el-row>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button> <el-button type="primary" @click="showUpdateCertificate = false"
</span> >确 定</el-button
</el-dialog> >
</div> </span>
</el-dialog>
</div> </div>
</div>
</template> </template>
<script> <script>
import { getAnalysisStatus } from '../../api/index'; import { getAnalysisStatus } from "../../api/index";
export default { export default {
props: { props: {
trafficAnalysisStatusData: { trafficAnalysisStatusData: {
type: Object, type: Object,
default: {} default: {},
},
targetAnalysisStatusData: {
type: Object,
default: {},
},
},
data() {
return {
form: {
target_detection: {
video_id: "",
video_address: "",
encoding_format: "",
code_tate: "",
frame_rate: "",
resolution_ratio: "",
neural_network: "",
decoder_frame_rate: "",
detector_frame_rate: "",
last_frame_analysis_time: "",
}, },
targetAnalysisStatusData: { traffic_analysis: {
type: Object, video_id: "",
default: {} analyze_frame_rate: "",
} cache_capacity: "",
}, cache_records_number: "",
data() { last_frame_analysis_time: "",
return { },
form: { data_sync: {
target_detection: { lastSyncTime: "",
video_id: '', currentSyncStatus: "",
video_address: '', nextSyncTime: "",
encoding_format: '', },
code_tate: '', },
frame_rate: '', showUpdateCertificate: false,
resolution_ratio: '', };
neural_network: '', },
decoder_frame_rate: '', created() {},
detector_frame_rate: '', mounted() {
last_frame_analysis_time: '' this.getData();
}, // 定时器，每天凌晨1点触发更新
traffic_analysis: { const now = new Date();
video_id: '', const oneAMTomorrow = new Date(now);
analyze_frame_rate: '', oneAMTomorrow.setDate(oneAMTomorrow.getDate() + 1);
cache_capacity: '', oneAMTomorrow.setHours(1, 0, 0, 0);
cache_records_number: '', const timeUntilOneAMTomorrow = oneAMTomorrow - now;
last_frame_analysis_time: ''
},
data_sync: {
lastSyncTime: '',
currentSyncStatus: '',
nextSyncTime: ''
}
},
showUpdateCertificate: false,
getUnityData: {}
};
},
created() {
window.getStatus = this.getStatusFun;
},
mounted() {
this.getData();
// 定时器，每天凌晨1点触发更新
const now = new Date();
const oneAMTomorrow = new Date(now);
oneAMTomorrow.setDate(oneAMTomorrow.getDate() + 1);
oneAMTomorrow.setHours(1, 0, 0, 0);
const timeUntilOneAMTomorrow = oneAMTomorrow - now;
setTimeout(() => { setTimeout(() => {
this.getData(); // 定时器触发时请求数据 this.getData(); // 定时器触发时请求数据
setInterval(() => { setInterval(() => {
this.getData(); // 每隔24小时再次请求数据 this.getData(); // 每隔24小时再次请求数据
}, 24 * 60 * 60 * 1000); }, 24 * 60 * 60 * 1000);
}, timeUntilOneAMTomorrow); }, timeUntilOneAMTomorrow);
}, },
methods: { methods: {
//从unity视频获取数据 //获取分析状态数据
getStatusFun(jsonString) { getData() {
// console.log('jsonString', jsonString); let videoId = this.$route.query.id;
this.getUnityData = JSON.parse(jsonString); getAnalysisStatus(videoId).then((res) => {
}, if (res.data.code == 200) {
//获取分析状态数据 // this.form = res.data.data;
getData() { if (res.data.data.target_detection !=null) {
let videoId = this.$route.query.id; this.form.target_detection = res.data.data.target_detection
getAnalysisStatus(videoId).then((res) => { }
if (res.data.code == 200) { if (res.data.data.traffic_analysis !=null) {
// this.form = res.data.data; this.form.traffic_analysis = res.data.data.traffic_analysis
if (res.data.data.target_detection != null) { }
this.form.target_detection = res.data.data.target_detection; if (res.data.data.data_sync !=null) {
} this.form.data_sync = res.data.data.data_sync
if (res.data.data.traffic_analysis != null) { }
this.form.traffic_analysis = res.data.data.traffic_analysis;
}
if (res.data.data.data_sync != null) {
this.form.data_sync = res.data.data.data_sync;
}
}
});
} }
});
}, },
watch: { },
trafficAnalysisStatusData: { watch: {
//交通分析 trafficAnalysisStatusData: {
handler: function (val) { //交通分析
console.log(val, '交通分析数据'); handler: function (val) {
this.form.traffic_analysis = val; console.log(val, "交通分析数据");
} this.form.traffic_analysis = val
}, },
targetAnalysisStatusData: { },
//目标分析 targetAnalysisStatusData: {
handler: function (val) { //目标分析
console.log(val, '目标监测数据'); handler: function (val) {
this.form.target_detection = val; console.log(val, "目标监测数据");
} this.form.target_detection = val
} },
} },
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.statusMain { .statusMain {
width: 100%; width: 100%;
height: 100%; height: 100%;
.el-descriptions { .el-descriptions {
margin-top: 15px !important; margin-top: 15px !important;
} }
} }
// .test-div i { // .test-div i {
// font-size: 25px; // font-size: 25px;

3
src/views/general/AboutMachine.vue
View File

@ -676,9 +676,6 @@ export default {
// 备份服务器事件 // 备份服务器事件
backupHandle() { backupHandle() {
var ipUrl = window.location.origin var ipUrl = window.location.origin
if (process.env.NODE_ENV === 'development') {
ipUrl = '172.16.1.168';
}
// var ipUrl = '172.16.1.168' // var ipUrl = '172.16.1.168'
this.$confirm('此操作将备份操作, 是否继续?', '提示', { this.$confirm('此操作将备份操作, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',

1359
src/views/general/network.vue
View File

File diff suppressed because it is too large Load Diff

424
src/views/index.vue
View File

@ -107,23 +107,23 @@
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px"> <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">行人/非机动车</div> <div style="text-align: center; font-weight: 700">行人/非机动车</div>
<el-checkbox-group v-model="typeCheckList"> <el-checkbox-group v-model="typeCheckList">
<el-checkbox label="traffic police">交警</el-checkbox> <el-checkbox label="traffic police">交通警察</el-checkbox>
<el-checkbox label="sanitation worker">环卫工人</el-checkbox> <el-checkbox label="sanitation worker">环卫工人</el-checkbox>
<el-checkbox label="general pedestrian">一般行人</el-checkbox> <el-checkbox label="general pedestrian">普通行人</el-checkbox>
<el-checkbox label="tricycle">三轮车</el-checkbox> <el-checkbox label="tricycle">三轮车</el-checkbox>
<el-checkbox label="bicycle">自行车</el-checkbox> <el-checkbox label="bicycle">自行车</el-checkbox>
<el-checkbox label="electric bicycle">电瓶车</el-checkbox> <el-checkbox label="electric bicycle">电车</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px"> <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">机动车</div> <div style="text-align: center; font-weight: 700">机动车</div>
<el-checkbox-group v-model="typeCheckList"> <el-checkbox-group v-model="typeCheckList">
<el-checkbox label="car">小汽车</el-checkbox> <el-checkbox label="car">汽车</el-checkbox>
<el-checkbox label="truck">卡车</el-checkbox> <el-checkbox label="truck">卡车</el-checkbox>
<el-checkbox label="coach">大巴车</el-checkbox> <el-checkbox label="coach">客车</el-checkbox>
<el-checkbox label="bus">公交车</el-checkbox> <el-checkbox label="bus">公交车</el-checkbox>
<el-checkbox label="special vehicle">特种车辆</el-checkbox> <el-checkbox label="special vehicle">专用汽车</el-checkbox>
<el-checkbox label="construction vehicle">建筑车辆</el-checkbox> <el-checkbox label="construction vehicle">施工车辆</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px"> <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
@ -248,23 +248,23 @@
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px"> <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">行人/非机动车</div> <div style="text-align: center; font-weight: 700">行人/非机动车</div>
<el-checkbox-group v-model="componentForm.type" @change="handleTypeData"> <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
<el-checkbox label="traffic police">交警</el-checkbox> <el-checkbox label="traffic police">交通警察</el-checkbox>
<el-checkbox label="sanitation worker">环卫工人</el-checkbox> <el-checkbox label="sanitation worker">环卫工人</el-checkbox>
<el-checkbox label="general pedestrian">一般行人</el-checkbox> <el-checkbox label="general pedestrian">普通行人</el-checkbox>
<el-checkbox label="tricycle">三轮车</el-checkbox> <el-checkbox label="tricycle">三轮车</el-checkbox>
<el-checkbox label="bicycle">自行车</el-checkbox> <el-checkbox label="bicycle">自行车</el-checkbox>
<el-checkbox label="electric bicycle">电瓶车</el-checkbox> <el-checkbox label="electric bicycle">电车</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px"> <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
<div style="text-align: center; font-weight: 700">机动车</div> <div style="text-align: center; font-weight: 700">机动车</div>
<el-checkbox-group v-model="componentForm.type" @change="handleTypeData"> <el-checkbox-group v-model="componentForm.type" @change="handleTypeData">
<el-checkbox label="car">小汽车</el-checkbox> <el-checkbox label="car">汽车</el-checkbox>
<el-checkbox label="truck">卡车</el-checkbox> <el-checkbox label="truck">卡车</el-checkbox>
<el-checkbox label="coach">大巴车</el-checkbox> <el-checkbox label="coach">客车</el-checkbox>
<el-checkbox label="bus">公交车</el-checkbox> <el-checkbox label="bus">公交车</el-checkbox>
<el-checkbox label="special vehicle">特种车辆</el-checkbox> <el-checkbox label="special vehicle">专用汽车</el-checkbox>
<el-checkbox label="construction vehicle">建筑车辆</el-checkbox> <el-checkbox label="construction vehicle">施工车辆</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px"> <div style="border: 1px solid rgba(0, 0, 0, 0.4); padding: 5px; box-sizing: border-box; margin-top: 10px">
@ -353,11 +353,7 @@
</el-slider> </el-slider>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="" v-if="componentForm.componentType == 'OD'"> <!-- <el-form-item label="单位：" ></el-form-item> -->
<div style="color: red; line-height: normal">
注意：OD组件消耗性能较大，可能会造成分析延迟，请不要勾选太多选项!
</div>
</el-form-item>
<el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'"> <el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'">
<el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection"> <el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
<el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{ <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
@ -445,8 +441,6 @@
<script> <script>
// import mqtt from "mqtt"; // mqtt协议 // import mqtt from "mqtt"; // mqtt协议
import moment from 'moment';
import _ from 'lodash';
import editModal from '@/views/bounced/maintenanceRemind'; import editModal from '@/views/bounced/maintenanceRemind';
import analysisConfiguration from '@/views/bounced/analysisConfiguration'; import analysisConfiguration from '@/views/bounced/analysisConfiguration';
import dataBoard from '@/views/bounced/dataBoard'; import dataBoard from '@/views/bounced/dataBoard';
@ -919,14 +913,7 @@ export default {
data3: '', data3: '',
roleStatus: '', //三维权限控制 roleStatus: '', //三维权限控制
highPic: {}, //接收第一张高频图片 highPic: {}, //接收第一张高频图片
highPicList: [], //存储高频图片 highPicList: [] //存储高频图片
timer1: null,
timer2: null,
timer3: null,
timer4: null,
imgMessagetimer: null,
imgMessage: '',
imgMessageNew: false
}; };
}, },
@ -955,11 +942,19 @@ export default {
this.videoAnalysisShow = false; this.videoAnalysisShow = false;
this.trafficAnalysisShow = false; this.trafficAnalysisShow = false;
this.createMqtt(); this.createMqtt();
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
} else if (this.$route.query.type == '离线视频') { } else if (this.$route.query.type == '离线视频') {
this.videoAnalysisShow = true; this.videoAnalysisShow = true;
this.trafficAnalysisShow = true; this.trafficAnalysisShow = true;
this.getAnalysisStatus(); this.getAnalysisStatus();
this.createMqtt(); this.createMqtt();
// if(this.$route.query.status=='未分析'){
// }
// if(this.$route.query.status=='未分析'){
// // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
// }else{
// }
} }
}, },
mounted() { mounted() {
@ -970,11 +965,6 @@ export default {
this.disable = true; this.disable = true;
this.roleStatus = 'false'; this.roleStatus = 'false';
} }
if (this.$route.query.type == '实时视频') {
this.imgMessagetimer = setInterval(() => {
this.setImgMessage();
}, 200);
}
}, },
methods: { methods: {
@ -1065,21 +1055,16 @@ export default {
}, },
// 数据看板的标签点击 // 数据看板的标签点击
handleClick: function (tab, event) { handleClick: function (tab, event) {
// console.log(tab) var that = this;
if (tab.name == 'first') { if (tab._props.name == 'second') {
if (this.$route.query.type == '实时视频') { that.$nextTick(() => {
//实时视频页面需要订阅的主题 //
this.videoTopicSends(); that.$refs.dataBoardRef.getNew();
} // setTimeout(() => {
} else if (tab.name == 'second') { // debugger
this.$nextTick(() => { // this.getHistory()
if (this.$route.query.type == '离线视频') { // }, 10000);
this.$refs.dataBoardRef.getNew(this.getHistory); this.getHistory();
} else {
//数据看板需要订阅的主题
this.dataBoardTopicSends();
this.$refs.dataBoardRef.getNew();
}
}); });
} }
}, },
@ -1110,75 +1095,39 @@ export default {
// 'simulator_target-' + this.$route.query.id // 'simulator_target-' + this.$route.query.id
]; ];
window.PubScribe(this.topicSends, '001', this.realInfo); window.PubScribe(this.topicSends, '001', this.realInfo);
this.timer1 = null; setTimeout(() => {
// this.timer1 = setTimeout(() => { this.getHistory();
// this.getHistory(); }, 5000);
// }, 5000);
} else if (this.$route.query.type == '实时视频') { } else if (this.$route.query.type == '实时视频') {
// this.topicSends = [ this.topicSends = [
// 'stream' + this.number, 'stream' + this.number,
// 'trajectory' + this.number, 'trajectory' + this.number,
// 'detection' + this.number, 'detection' + this.number,
// 'trigger-' + this.$route.query.id, 'trigger-' + this.$route.query.id,
// 'cycle_time-' + this.$route.query.id, 'cycle_time-' + this.$route.query.id,
// 'cycle_statistics-' + this.$route.query.id, 'cycle_statistics-' + this.$route.query.id,
// 'cycle_accumulate-' + this.$route.query.id, 'cycle_accumulate-' + this.$route.query.id,
// 'TargetAnalysisStatusData', 'TargetAnalysisStatusData',
// 'TrafficAnalysisStatusData', 'TrafficAnalysisStatusData',
// 'img' + this.number 'hert',
// // 'hert', 'img0',
// // 'img0', 'img1',
// // 'img1', 'img2',
// // 'img2', 'img3',
// // 'img3', 'img4',
// // 'img4', 'img5',
// // 'img5', 'img6',
// // 'img6', 'img7',
// // 'img7', 'Contorl_server'
// // 'Contorl_server' //目标数量
// //目标数量 // 'simulator_target-' + this.$route.query.id
// // 'simulator_target-' + this.$route.query.id ];
// ]; window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
// // console.log('在test1/index视频页面number-',this.number)
// window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
//视频页面需要订阅的主题有 img，stream，trajectory，detection，TargetAnalysisStatusDataTraffic，AnalysisStatusData
//数据看板需要订阅的主题有 trigger，cycle_time，，cycle_statistics，cycle_accumulate
this.videoTopicSends();
} }
this.timer2 = null; setTimeout(() => {
this.timer2 = setTimeout(() => {
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id })); window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
}, 5000); }, 5000);
}, },
//实时视频页面需要订阅的主题
videoTopicSends() {
this.topicSends = [
'stream' + this.number,
'trajectory' + this.number,
'detection' + this.number,
'img' + this.number,
'TargetAnalysisStatusData',
'TrafficAnalysisStatusData'
];
// console.log('在test1/index视频页面number-',this.number)
window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
},
//数据看板需要订阅的主题
dataBoardTopicSends() {
this.topicSends = [
'stream' + this.number,
'trajectory' + this.number,
'detection' + this.number,
'TargetAnalysisStatusData',
'TrafficAnalysisStatusData',
'trigger-' + this.$route.query.id,
'cycle_time-' + this.$route.query.id,
'cycle_statistics-' + this.$route.query.id,
'cycle_accumulate-' + this.$route.query.id
];
// console.log('在test1/index视频页面number-',this.number)
window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
},
//获取视频分析，交通分析状态数据 //获取视频分析，交通分析状态数据
getAnalysisStatus() { getAnalysisStatus() {
getVideoStatus(this.$route.query.id).then((res) => { getVideoStatus(this.$route.query.id).then((res) => {
@ -1191,8 +1140,7 @@ export default {
} else if (res.data.data.videoAnalysisStatus == '分析中') { } else if (res.data.data.videoAnalysisStatus == '分析中') {
this.disabledVideoAnalysis = true; this.disabledVideoAnalysis = true;
this.videoUnityShow = false; this.videoUnityShow = false;
this.timer3 = null; setTimeout(() => {
this.timer3 = setTimeout(() => {
this.getAnalysisStatus(); this.getAnalysisStatus();
}, 5000); }, 5000);
} else if (res.data.data.videoAnalysisStatus == '已分析') { } else if (res.data.data.videoAnalysisStatus == '已分析') {
@ -1288,7 +1236,6 @@ export default {
}, },
//获取离线视频固定时刻固定间隔 //获取离线视频固定时刻固定间隔
getHistory() { getHistory() {
console.log('执行获取离线视频固定时刻固定间隔主题');
window.publish('GetCycleHistory', 'Get-' + this.$route.query.id); window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
}, },
getZhuanFaMQTT(topic, msg) { getZhuanFaMQTT(topic, msg) {
@ -1305,8 +1252,7 @@ export default {
message: '启动成功', message: '启动成功',
type: 'success' type: 'success'
}); });
this.timer4 = null; setTimeout(() => {
this.timer4 = setTimeout(() => {
this.getAnalysisStatus(); this.getAnalysisStatus();
}, 5000); }, 5000);
// if(this.videoAnalysisSta=='已分析'){ // if(this.videoAnalysisSta=='已分析'){
@ -1378,9 +1324,6 @@ export default {
//获取视频分析结果 //获取视频分析结果
analysisData() { analysisData() {
var ip = window.location.host.split(':')[0]; var ip = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ip = '172.16.1.168';
}
// var ip = '172.16.1.168'; //http://172.16.1.168 // var ip = '172.16.1.168'; //http://172.16.1.168
//console.log('ip', ip); //console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => { getAnalysisData(this.$route.query.id, ip).then((res) => {
@ -1421,10 +1364,7 @@ export default {
//分析结束传参 //分析结束传参
postTraffic() { postTraffic() {
var ip = window.location.host.split(':')[0]; var ip = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') { // var ip = '172.16.1.168'; //http://172.16.1.168:5000
ip = '172.16.1.168';
}
// var ip = '172.16.1.168'; //http://172.16.1.168:80
//console.log('ip', ip); //console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => { getAnalysisData(this.$route.query.id, ip).then((res) => {
//console.log('res.data.data', res.data.data); //console.log('res.data.data', res.data.data);
@ -1444,60 +1384,74 @@ export default {
}, },
/** 实时数据分类 */ /** 实时数据分类 */
realInfo(topic, message) { realInfo(topic, message) {
let mapModuleDom = document.getElementById('mapModule');
const utf8decoder = new TextDecoder();
switch (topic) { switch (topic) {
// 接收托片 // 接收托片
case 'img' + this.number: case 'img' + this.number:
// console.log('msg接受一张高频图片', moment().format('YYYY-MM-DD HH:mm:ss')); try {
this.imgMessage = message; const utf8decoder = new TextDecoder();
this.imgMessageNew = true; const u8arr = new Uint8Array(message);
// try { const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
// const u8arr = new Uint8Array(message); const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 // //console.log(msg, 'msg接受一张高频图片');
// const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
// // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg)); if (msg.rate == 'high') {
// if (msg.rate == 'high') { document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
// // console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss')); //接受一张高频图片
// mapModuleDom.contentWindow.getDestination(JSON.stringify(msg)); if (JSON.stringify(this.highPic) === '{}') {
// //接受一张高频图片 this.highPic = msg;
// if (JSON.stringify(this.highPic) === '{}') { // sessionStorage.setItem("highPic", this.highPic.pic);
// this.highPic = msg; // sessionStorage.setItem("videoId", this.highPic.id);
// // sessionStorage.setItem("highPic", this.highPic.pic); }
// // sessionStorage.setItem("videoId", this.highPic.id); this.highPicList = sessionStorage.getItem('highPicList')
// } ? JSON.parse(sessionStorage.getItem('highPicList'))
// //更新本地视频图片，给视频列表页面展示 : [];
// this.storageHighPicList(msg); if (this.highPicList.length == 0) {
// } else if (msg.rate == 'low') { this.highPicList.push({ pic: msg.pic, videoId: msg.id });
// this.analysisConfigurationdata = msg; sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList));
// } } else {
// } catch (error) { let found = false;
// // console.log('imgError',error) for (let i = 0; i < this.highPicList.length; i++) {
// } if (this.highPicList[i].videoId == msg.id) {
this.highPicList[i].pic = msg.pic;
found = true;
break; // 找到了就退出循环
}
}
if (!found) {
this.highPicList.push({ pic: msg.pic, videoId: msg.id });
}
sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList));
}
} else if (msg.rate == 'low') {
this.analysisConfigurationdata = msg;
}
} catch (error) {}
break; break;
// 树结构 // 树结构
case 'stream' + this.number: case 'stream' + this.number:
try { try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
// console.log('stream' + this.number, msg); document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
// console.log('Web收到：stream' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
mapModuleDom.contentWindow.getData(JSON.stringify(msg));
} catch (error) {} } catch (error) {}
break; break;
// 控制台输出 // 控制台输出
case 'trajectory' + this.number: case 'trajectory' + this.number:
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
mapModuleDom.contentWindow.getGuiJi(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
} catch (error) {} } catch (error) {}
break; break;
// 实时触发 // 实时触发
case 'detection' + this.number: case 'detection' + this.number:
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
@ -1511,25 +1465,26 @@ export default {
detId.push(msgN[i]); detId.push(msgN[i]);
} }
} }
mapModuleDom.contentWindow.getChuFa(JSON.stringify(detId)); document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
} }
} catch (error) {} } catch (error) {}
break; break;
case 'trigger-' + this.$route.query.id: case 'trigger-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame); // console.log('实时触发trigger-', msgN);
// console.log("trigger_msgN",msgN) // //console.log("trigger_msgN",msgN)
// msgN.forEach(item => { // msgN.forEach(item => {
// //console.log("item.name",item.name) // //console.log("item.name",item.name)
// }) // })
// for (const item of msgN) { // for (const item of msgN) {
// if (item.component_name == 'OD_0') { // if (item.name == 'gate3触发') {
// console.log('源头实时触发trigger-', item); // console.log('实时触发trigger-', item);
// } // }
// } // }
this.triggerListData = msgN; this.triggerListData = msgN;
@ -1538,6 +1493,7 @@ export default {
case 'cycle_time-' + this.$route.query.id: case 'cycle_time-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
@ -1549,27 +1505,24 @@ export default {
case 'cycle_history-' + this.$route.query.id: case 'cycle_history-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log('历史数据源头', msgN); //console.log('历史数据', msgN);
this.cycleHistoryData = msgN; this.cycleHistoryData = msgN;
} catch (error) {} } catch (error) {}
break; break;
case 'cycle_statistics-' + this.$route.query.id: case 'cycle_statistics-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log("cycle_statistics-固定间隔",temp) // console.log("cycle_statistics-固定间隔",temp)
// for (const item of msgN) {
// if (item.component_name == 'OD_0') {
// console.log('源头固定间隔cycle_statistics-', item);
// }
// }
this.cycleStatisticsData = msgN; this.cycleStatisticsData = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -1577,6 +1530,7 @@ export default {
try { try {
//周期统计实时累计数据主题 //周期统计实时累计数据主题
// console.log("trigger_msgN",message) // console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
@ -1590,6 +1544,7 @@ export default {
break; break;
case 'VideoStatusData': case 'VideoStatusData':
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1599,6 +1554,7 @@ export default {
break; break;
case 'TargetAnalysisStatusData': //目标监测 case 'TargetAnalysisStatusData': //目标监测
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1608,6 +1564,7 @@ export default {
break; break;
case 'TrafficAnalysisStatusData': //交通分析 case 'TrafficAnalysisStatusData': //交通分析
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1617,61 +1574,20 @@ export default {
break; break;
case 'simulator_target-' + this.$route.query.id: //目标数量 case 'simulator_target-' + this.$route.query.id: //目标数量
try { try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
//console.log('simulator_target-目标数量', msg); //console.log('simulator_target-目标数量', msg);
mapModuleDom.contentWindow.getTargetNumber(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getTargetNumber(JSON.stringify(msg));
} catch (error) {} } catch (error) {}
break; break;
} }
// this.receiveNews = ''; this.receiveNews = '';
},
setImgMessage() {
if (this.imgMessage && this.imgMessageNew) {
// console.log('执行了setImgMessage');
this.imgMessageNew = false;
let mapModuleDom = document.getElementById('mapModule');
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(this.imgMessage);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
if (msg.rate == 'high') {
// console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
mapModuleDom.contentWindow.getDestination(JSON.stringify(msg));
//接受一张高频图片
if (JSON.stringify(this.highPic) === '{}') {
this.highPic = msg;
// sessionStorage.setItem("highPic", this.highPic.pic);
// sessionStorage.setItem("videoId", this.highPic.id);
}
//更新本地视频图片，给视频列表页面展示
this.storageHighPicList(_.cloneDeep(msg));
} else if (msg.rate == 'low') {
this.analysisConfigurationdata = msg;
}
}
},
storageHighPicList(msg) {
let highPicList = sessionStorage.getItem('highPicList') ? JSON.parse(sessionStorage.getItem('highPicList')) : [];
if (highPicList.length == 0) {
highPicList.push({ pic: msg.pic, videoId: msg.id });
} else {
let found = false;
for (let i = 0; i < highPicList.length; i++) {
if (highPicList[i].videoId == msg.id) {
highPicList[i].pic = msg.pic;
found = true;
break; // 找到了就退出循环
}
}
if (!found) {
highPicList.push({ pic: msg.pic, videoId: msg.id });
}
}
sessionStorage.setItem('highPicList', JSON.stringify(highPicList));
}, },
// handleClick(tab, event) {
// //console.log(tab, event);
// },
changeCompany(val) { changeCompany(val) {
//console.log('val', val); //console.log('val', val);
if (val == '小时') { if (val == '小时') {
@ -1708,11 +1624,8 @@ export default {
//初始化unity //初始化unity
OnSceneN() { OnSceneN() {
var ip = window.location.host; var ip = window.location.host;
// this.ipData = 'http://' + ip.split(':')[0] + ':80'; // this.ipData = 'http://' + ip.split(':')[0] + ':5000';
this.ipData = 'http://' + ip.split(':')[0]; this.ipData = 'http://' + ip.split(':')[0];
if (process.env.NODE_ENV === 'development') {
this.ipData = 'http://172.16.1.168';
}
document.getElementById('mapModule').contentWindow.getIpData(this.ipData); document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
// document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168'); // document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168');
if (this.$route.query.type == '离线视频') { if (this.$route.query.type == '离线视频') {
@ -1745,7 +1658,7 @@ export default {
this.componentId = id; this.componentId = id;
this.componentForm.componentType = type; this.componentForm.componentType = type;
this.componentTitle = type; this.componentTitle = type;
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => { getComponentData({ AnalogAreaComponentId: id }).then((res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
//console.log('res', res.data.data); //console.log('res', res.data.data);
@ -1788,7 +1701,7 @@ export default {
this.componentForm.endValue = res.data.data.endValue; this.componentForm.endValue = res.data.data.endValue;
this.componentForm.startValue = res.data.data.startValue; this.componentForm.startValue = res.data.data.startValue;
this.componentForm.presentationForm = res.data.data.presentationForm; this.componentForm.presentationForm = res.data.data.presentationForm;
await this.getAllSectionalData(this.$route.query.id); this.getAllSectionalData(this.$route.query.id);
// this.componentForm.typeFiltering = res.data.data.typeFiltering // this.componentForm.typeFiltering = res.data.data.typeFiltering
// this.componentForm.type = res.data.data.type // this.componentForm.type = res.data.data.type
if (res.data.data.startSectionIds != '') { if (res.data.data.startSectionIds != '') {
@ -1811,10 +1724,7 @@ export default {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
startSectionArr.push(items.graphicName); startSectionArr.push(items.graphicName);
}); });
if (startSectionArr.length > 0) { this.componentForm.startSection = startSectionArr;
this.componentForm.startSection = [startSectionArr[0]];
this.handleCheckedStartSection([startSectionArr[0]]);
}
} }
if (res.data.data.endSectionIds != '') { if (res.data.data.endSectionIds != '') {
//console.log('endSectionIds', res.data.data.endSectionIds); //console.log('endSectionIds', res.data.data.endSectionIds);
@ -1836,10 +1746,7 @@ export default {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
endSectionArr.push(items.graphicName); endSectionArr.push(items.graphicName);
}); });
if (endSectionArr.length > 0) { this.componentForm.endSection = endSectionArr;
this.componentForm.endSection = [endSectionArr[0]];
this.handleCheckedendSection([endSectionArr[0]]);
}
} }
if (this.componentForm.presentationForm != '') { if (this.componentForm.presentationForm != '') {
var arr = []; var arr = [];
@ -1859,10 +1766,9 @@ export default {
} }
}); });
}, },
//双击修改模拟区组件、图形 //修改模拟区组件、图形
getSimulationAreaEdit(id, type, componentType, name, number) { getSimulationAreaEdit(id, type, componentType, name, number) {
// console.log('执行了getSimulationAreaEdit'); //console.log('number', number);
// console.log('number', number);
this.numberNew = number; this.numberNew = number;
if (type == '图形') { if (type == '图形') {
this.form.id = id; this.form.id = id;
@ -1872,7 +1778,6 @@ export default {
getJianktxDetails({ GraphicId: this.form.id }).then((res) => { getJianktxDetails({ GraphicId: this.form.id }).then((res) => {
this.form.name = res.data.data.graphicName; this.form.name = res.data.data.graphicName;
this.form.type = res.data.data.graphicType; this.form.type = res.data.data.graphicType;
this.form.Direction = res.data.data.direction;
this.typeCheckList = res.data.data.type.split('|'); this.typeCheckList = res.data.data.type.split('|');
if (res.data.data.isPerceptualCoding == '0') { if (res.data.data.isPerceptualCoding == '0') {
this.switchValue = 0; this.switchValue = 0;
@ -1903,7 +1808,7 @@ export default {
this.componentId = id; this.componentId = id;
this.componentForm.componentType = componentType; this.componentForm.componentType = componentType;
this.componentTitle = componentType; this.componentTitle = componentType;
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => { getComponentData({ AnalogAreaComponentId: id }).then((res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
//console.log('res', res.data.data); //console.log('res', res.data.data);
@ -1942,7 +1847,6 @@ export default {
this.componentForm.startValue = res.data.data.startValue; this.componentForm.startValue = res.data.data.startValue;
this.componentForm.presentationForm = res.data.data.presentationForm; this.componentForm.presentationForm = res.data.data.presentationForm;
// this.componentForm.type = res.data.data.type // this.componentForm.type = res.data.data.type
await this.getAllSectionalData(this.$route.query.id);
if (res.data.data.startSectionIds != '') { if (res.data.data.startSectionIds != '') {
//console.log('startSectionIds', res.data.data.startSectionIds); //console.log('startSectionIds', res.data.data.startSectionIds);
var startSectionIdArr = []; var startSectionIdArr = [];
@ -1995,7 +1899,7 @@ export default {
}, },
//获取所有断面数据 //获取所有断面数据
getAllSectionalData(VideoId) { getAllSectionalData(VideoId) {
return getSectionalData({ VideoId: VideoId }).then((res) => { getSectionalData({ VideoId: VideoId }).then((res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
this.sectionals = res.data.data; this.sectionals = res.data.data;
@ -2044,7 +1948,7 @@ export default {
this.title = this.figureType(item); this.title = this.figureType(item);
this.orderShow = false; this.orderShow = false;
}, },
//右击图形修改图形名称弹框 //双击图形修改图形名称弹框
getModifyTheNameN(data, number) { getModifyTheNameN(data, number) {
this.orderShow = true; this.orderShow = true;
//console.log('data', data); //console.log('data', data);
@ -2198,8 +2102,7 @@ export default {
',' + ',' +
this.numberNew + this.numberNew +
',' + ',' +
form.Direction + form.Direction
',add'
) )
); );
} else { } else {
@ -2207,7 +2110,7 @@ export default {
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(
res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',add' res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ','
) )
); );
} }
@ -2310,25 +2213,14 @@ export default {
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(
form.id + form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',' + form.Direction
',' +
form.name +
',' +
this.startFigureName +
',' +
this.numberNew +
',' +
form.Direction +
',edit'
) )
); );
} else { } else {
document document
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',')
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',edit'
)
); );
} }
@ -2344,7 +2236,7 @@ export default {
}, },
//编辑组件 //编辑组件
onSubmitComponent(componentForm) { onSubmitComponent(componentForm) {
// console.log(componentForm, 'ffffffffff'); //console.log(componentForm, 'ffffffffff');
if (componentForm.timeMode != '实时触发' && componentForm.company == '') { if (componentForm.timeMode != '实时触发' && componentForm.company == '') {
this.$message.warning('请选择必选项'); this.$message.warning('请选择必选项');
return false; return false;
@ -2566,13 +2458,9 @@ export default {
}, },
//改变起点 //改变起点
handleCheckedStartSection(value) { handleCheckedStartSection(value) {
// console.log('改变起点', value); //console.log('改变起点', value);
var startSectionIdArr = []; var startSectionIdArr = [];
var startSectionNameArr = []; var startSectionNameArr = [];
if (value.length == 0) {
this.componentForm.startSectionIds = '';
this.componentForm.startSectionNames = '';
}
value.forEach((item) => { value.forEach((item) => {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
if (item == items.graphicName) { if (item == items.graphicName) {
@ -2591,10 +2479,6 @@ export default {
//console.log('改变终点', value); //console.log('改变终点', value);
var endSectionIdArr = []; var endSectionIdArr = [];
var endSectionNameArr = []; var endSectionNameArr = [];
if (value.length == 0) {
this.componentForm.endSectionIds = '';
this.componentForm.endSectionNames = '';
}
value.forEach((item) => { value.forEach((item) => {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
if (item == items.graphicName) { if (item == items.graphicName) {
@ -2657,18 +2541,6 @@ export default {
editModal, editModal,
analysisConfiguration, analysisConfiguration,
dataBoard dataBoard
},
beforeDestroy() {
// clearTimeout(this.timer1);
clearTimeout(this.timer2);
clearTimeout(this.timer3);
clearTimeout(this.timer4);
clearInterval(this.imgMessagetimer);
this.timer1 = null;
this.timer2 = null;
this.timer3 = null;
this.timer4 = null;
this.imgMessagetimer = null;
} }
}; };
</script> </script>

4364
src/views/sensorFusion/index copy.vue
View File

File diff suppressed because it is too large Load Diff

1412
src/views/sensorFusion/index.vue
View File

File diff suppressed because it is too large Load Diff

2
vue.config.js
View File

@ -50,7 +50,7 @@ module.exports = {
host: myHost, host: myHost,
proxy: { proxy: {
'/api': { //代理的名字 '/api': { //代理的名字
target: 'http://172.16.1.168:80/api/', target: 'http://172.16.1.168:5000/api/',
// target: 'http://172.16.1.178:5001/', // target: 'http://172.16.1.178:5001/',
// target: 'http://ht.api.umayle.com:2022', // target: 'http://ht.api.umayle.com:2022',
ws: true, ws: true,