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

Compare commits

merge into: lixiaobang:20231109
Branches Tags
lixiaobang:master
lixiaobang:20231109
...
pull from: lixiaobang:master
Branches Tags
lixiaobang:master
lixiaobang:20231109

31 Commits
20231109 ... master

Author SHA1 Message Date
qiudan e0667058fc bug修改 2024-04-11 17:07:26 +08:00
qiudan 23016d7da1 逻辑不严谨bug修改 2024-04-11 15:45:53 +08:00
qiudan 76f90e3f88 bug修改 2024-04-11 14:38:56 +08:00
qiudan d6c3990908 bug修改 2024-04-11 14:08:15 +08:00
qiudan 97803e601e 添加行静态地址bug修改 2024-04-11 14:01:35 +08:00
qiudan 2d4294e049 增加dhcp4开关 2024-04-11 13:35:18 +08:00
qiudan 70009aef25 5000端口修改为80端口 2024-04-07 18:39:58 +08:00
qiudan 4a0e44f51d 修改mqtt配置port:80,connectUrl增加固定地址endpoint: "/mqtt", 2024-04-07 18:12:06 +08:00
qiudan 81f245975a 更新videoweb 2024-02-28 14:57:30 +08:00
qiudan 0a1052b26f 双击修改模拟区图形，缺少direction数据更新bug修改 2024-02-28 14:54:21 +08:00
qiudan eea792408a 分析里目标检测数据来源unity修改 2024-02-27 09:37:09 +08:00
qiudan 65c0f3d47c 优化 2023-12-28 09:27:08 +08:00
qiudan 5458c18ab1 bug修改 2023-12-21 17:09:06 +08:00
qiudan af5e7b9d7c OD弹框优化，默认选择一个 2023-12-15 17:54:01 +08:00
qiudan 171574b13a 新建OD组件传值有问题 2023-12-15 14:52:59 +08:00
qiudan 0445b6a18f 视频订阅主题和数据看板主题区分开调用，解决图片主题会有延迟问题 2023-12-15 10:57:53 +08:00
qiudan 23d8e88274 视频延迟优化 2023-12-14 14:52:23 +08:00
qiudan 6b8a4f07d4 优化html 2023-12-08 15:27:41 +08:00
qiudan c116840922 新增、编辑图形确认按钮给postFigureName多加参数 2023-12-05 15:44:04 +08:00
qiudan 188f216179 融合饼图为空样式修改 2023-12-04 09:34:37 +08:00
qiudan 89833b4afe bug修改 2023-12-01 16:58:43 +08:00
qiudan 41df993d20 bug修改 2023-11-30 16:18:53 +08:00
qiudan 8df24f5586 更新videoWeb里面build文件夹 2023-11-29 11:26:02 +08:00
qiudan 0196b40769 更新VideoWeb文件夹build文件 2023-11-29 10:04:37 +08:00
qiudan 54e610af2e bug修改 2023-11-28 18:27:00 +08:00
qiudan 50b57d731b 增加了dev和pro 不需要在开发时候切换ip了，打包不影响 2023-11-24 16:33:36 +08:00
qiudan 206fec9c18 bug修改 2023-11-23 13:48:11 +08:00
qiudan 034fa41ff0 bug修改 2023-11-23 09:39:06 +08:00
qiudan 1bc240416b bug修改 2023-11-16 17:39:29 +08:00
qiudan 4cdf66ec1c bug修改 2023-11-15 15:06:10 +08:00
qiudan 426aee89c4 bug修改 2023-11-14 18:25:24 +08:00
56 changed files with 15379 additions and 6655 deletions
Show Stats Expand all files Collapse all files

1
.env.dev Normal file
View File

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

1
.env.pro Normal file
View File

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

3
package.json
View File

@ -31,7 +31,8 @@
"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:5000 http://172.16.1.168:80

510
public/VideoWeb/index.html
View File

@ -1,327 +1,353 @@
<!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>
<script> <div id="unity-warning"> </div>
var container = document.querySelector("#unity-container"); <div id="unity-footer">
var canvas = document.querySelector("#unity-canvas"); <!-- <div id="unity-webgl-logo"></div> -->
var loadingBar = document.querySelector("#unity-loading-bar"); <!-- <div id="unity-fullscreen-button"></div> -->
var progressBarFull = document.querySelector("#unity-progress-bar-full"); <!-- <div id="unity-build-title">Painter</div> -->
// var fullscreenButton = document.querySelector("#unity-fullscreen-button"); </div>
var warningBanner = document.querySelector("#unity-warning"); <div id='black'>
var black = document.querySelector("#black");
// Shows a temporary message banner/ribbon for a few seconds, or </div>
// a permanent error message on top of the canvas if type=='error'. </div>
// If type=='warning', a yellow highlight color is used. <script>
// Modify or remove this function to customize the visually presented var container = document.querySelector("#unity-container");
// way that non-critical warnings and error messages are presented to the var canvas = document.querySelector("#unity-canvas");
// user. var loadingBar = document.querySelector("#unity-loading-bar");
function unityShowBanner(msg, type) { var progressBarFull = document.querySelector("#unity-progress-bar-full");
function updateBannerVisibility() { // var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
var black = document.querySelector("#black");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// 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 loaderUrl = buildUrl + "/APP.loader.js";
var config = {
dataUrl: buildUrl + "/APP.data.unityweb",
frameworkUrl: buildUrl + "/APP.framework.js.unityweb",
codeUrl: buildUrl + "/APP.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "Painter",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
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);
if (container) {
container.className = "unity-mobile";
} }
var buildUrl = "Build";
var loaderUrl = buildUrl + "/APP.loader.js";
var config = {
dataUrl: buildUrl + "/APP.data.unityweb",
frameworkUrl: buildUrl + "/APP.framework.js.unityweb",
codeUrl: buildUrl + "/APP.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "Painter",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
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);
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';
} }
loadingBar.style.display = "block"; unityShowBanner('WebGL builds are not supported on mobile devices.');
var unity; } else {
var script = document.createElement("script"); // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%"; // canvas.style.width = "960px";
if(progressBarFull.style.width==90+"%"){ // canvas.style.height = "600px";
black.style.display = "block"; // canvas.style.width = window.innerWidth + 'px';
// canvas.style.height = window.innerHeight + 'px';
}
if (loadingBar) {
loadingBar.style.display = "block";
}
var unity;
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
if (canvas) {
createUnityInstance(canvas, config, (progress) => {
if (progressBarFull) {
progressBarFull.style.width = 100 * progress + "%";
if (progressBarFull.style.width == 90 + "%") {
if (black) {
black.style.display = "block";
}
}
} }
}).then((unityInstance) => { }).then((unityInstance) => {
unity = unityInstance unity = unityInstance
if (loadingBar) {
loadingBar.style.display = "none"; loadingBar.style.display = "none";
// fullscreenButton.onclick = () => { }
// unityInstance.SetFullscreen(1); // fullscreenButton.onclick = () => {
// }; // unityInstance.SetFullscreen(1);
// };
}).catch((message) => { }).catch((message) => {
alert(message); alert('createUnityInstance' + message);
}); });
}; }
//unity初始化 };
function OnSceneLoaded(){ //unity初始化
function OnSceneLoaded() {
if (black) {
black.style.display = "none"; black.style.display = "none";
window.parent.OnScene(); }
window.parent.OnScene();
}
//初始化传离线视频数据功能
function lixianVideo(string) {
console.log("离线视频数据", string)
if (unity != null) {
unity.SendMessage('AAA', 'Unity_OfflineDataPrepare', string);
} }
//初始化传离线视频数据功能 }
function lixianVideo(string){ //获取ip
console.log("离线视频数据",string) function getIpData(string) {
if(unity!=null){ console.log("获取ip", string)
unity.SendMessage('AAA','Unity_OfflineDataPrepare', string); if (unity != null) {
} unity.SendMessage('GameManager', 'SetIP', string);
} }
//获取ip }
function getIpData(string){ //获取图像
console.log("获取ip",string) function getDestination(string) {
if(unity!=null){ if (unity != null) {
unity.SendMessage('GameManager','SetIP', string); unity.SendMessage('AAA', 'SendImage', 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){
console.log("AddMonqjktx_Error",data) function AddMonqjktx_Error(data) {
window.parent.AddMonqjktx_Error(data); console.log("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>
</script>
<style>
#unity-container.unity-desktop::-webkit-scrollbar{
display: none; /* Chrome Safari */
}
</style>
</body>
</html> </html>

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

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

83
public/analysisWeb/index.html
View File

@ -49,18 +49,23 @@
// user. // user.
function unityShowBanner(msg, type) { function unityShowBanner(msg, type) {
function updateBannerVisibility() { function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; if (warningBanner) {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
} }
var div = document.createElement('div'); if (warningBanner) {
div.innerHTML = msg; var div = document.createElement('div');
warningBanner.appendChild(div); div.innerHTML = msg;
if (type == 'error') div.style = 'background: red; padding: 10px;'; warningBanner.appendChild(div);
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; if (type == 'error') div.style = 'background: red; padding: 10px;';
setTimeout(function () { else {
warningBanner.removeChild(div); if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
updateBannerVisibility(); setTimeout(function () {
}, 5000); warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
} }
updateBannerVisibility(); updateBannerVisibility();
} }
@ -98,35 +103,42 @@
// 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 = () => {
createUnityInstance(canvas, config, (progress) => { if (canvas) {
progressBarFull.style.width = 100 * progress + "%"; createUnityInstance(canvas, config, (progress) => {
}).then((unityInstance) => { progressBarFull.style.width = 100 * progress + "%";
unityInstanceA = unityInstance }).then((unityInstance) => {
loadingBar.style.display = "none"; unityInstanceA = unityInstance
fullscreenButton.onclick = () => { if (loadingBar) {
unityInstance.SetFullscreen(1); loadingBar.style.display = "none";
}; }
}).catch((message) => { fullscreenButton.onclick = () => {
alert(message); unityInstance.SetFullscreen(1);
}); };
}).catch((message) => {
alert('createUnityInstance' + message);
});
}
}; };
//unity初始化 //unity初始化
function OnSceneLoaded() { function OnSceneLoaded() {
@ -136,6 +148,7 @@
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));
} }
@ -204,8 +217,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);
} }
//删除点 //删除点
@ -217,9 +230,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);

54
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,58 +10,68 @@
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: 'ws://172.16.1.168:12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '') url: getNewurl(), //新逻辑
// url:getParam('src') // url: 'ws://172.16.1.168: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, '') // 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(); // 重新播放视频
}); });
@ -73,6 +83,34 @@
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:5000/api/SetVideoMode?Mode=离线视频 // http://localhost:80/api/SetVideoMode?Mode=离线视频
export const getSetVideoMode = params => { export const getSetVideoMode = params => {
return axios.get('api/SetVideoMode', { return axios.get('api/SetVideoMode', {
params params

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

@ -1,12 +1,20 @@
<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;
"
></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>
@ -35,16 +43,20 @@ 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);
@ -64,7 +76,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
}, },
@ -206,7 +218,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(() => {
@ -218,9 +230,7 @@ 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,6 +21,7 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'barChart', //饼图组件 name: 'barChart', //饼图组件
props: { props: {
@ -55,7 +56,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 ele.name; return getNameFromTargetType(ele.name);
}); });
var yData = newVal.type_data.map((ele) => { var yData = newVal.type_data.map((ele) => {
return ele.quantity; return ele.quantity;
@ -71,10 +72,10 @@ export default {
confine: true confine: true
}, },
grid: { grid: {
left: '2%', left: '5%',
right: '4%', right: '5%',
bottom: '10%', bottom: '0%',
top: '20%', top: '5%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@ -86,8 +87,10 @@ 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,6 +22,7 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'lineChart', //折线图组件 name: 'lineChart', //折线图组件
props: { props: {
@ -80,7 +81,22 @@ 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: [],
@ -175,7 +191,15 @@ 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 = [
@ -195,52 +219,97 @@ 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]);
@ -251,8 +320,12 @@ export default {
let mapNR1 = []; let mapNR1 = [];
newVal.map(function (ele) { newVal.map(function (ele) {
if (ele.type_data != null) { if (ele.type_data != null) {
var sum = ele.type_data.reduce(function (prev, cur) { let sum = ele.type_data.reduce(function (prev, cur) {
return cur.quantity + prev; let t = cur.quantity;
if (cur.value || cur.value === 0) {
t = cur.value;
}
return t + prev;
}, 0); }, 0);
mapNR1.push(sum); mapNR1.push(sum);
} }
@ -297,6 +370,9 @@ 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;
@ -351,7 +427,19 @@ 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>

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

@ -1,162 +1,168 @@
<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 <span style="font-size: 18px">{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span>
style="font-size: 18px" </div>
>{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span </div>
> <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() {
return {};
},
created() {},
methods: {
drawPie(newVal) {
if (newVal&&newVal.type_data&&newVal.type_data.length>0) {
var legend = newVal.type_data.map((ele) => {
return ele.name;
});
var seriesData = [];
newVal.type_data.forEach((ele) => {
seriesData.push({
name: ele.name,
value: ele.quantity,
});
});
this.drawPie();
}
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
if (myChart == null) {
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: "center",
textStyle: {},
data: legend,
}, },
tooltip: {}, componentName: {
series: [ type: String
{ },
type: "pie", chartName: {
center: ["50%", "55%"], type: String
radius: "70%", },
label: { typeValue: {
normal: { type: Object
show: false, },
}, status: {
}, type: String
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();
// })
}, },
}, data() {
mounted() {}, return {};
watch: { },
// 监听单个的数据 created() {},
}, methods: {
drawPie(newVal) {
// var legend = [];
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
// var legend = newVal.type_data.map((ele) => {
// return ele.name;
// });
var seriesData = [];
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)
}
});
this.drawPie();
}
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
if (myChart == null) {
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%',
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);
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
}
},
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>

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

@ -1,25 +1,26 @@
<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" style="width: 100%" v-if="triggerType == '实时触发' "> <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="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>
@ -45,14 +46,27 @@
<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> <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" style="width: 100%" v-if="triggerType == '固定时刻' "> <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="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>
@ -76,17 +90,29 @@
<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> <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" style="width: 100%" v-if="triggerType == '固定间隔'"> <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="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>
@ -111,18 +137,34 @@
<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> <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>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="40%"> <el-dialog title="编辑" :append-to-body="true" :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 placeholder="起始时间" v-model="startTime" <el-time-select
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"> placeholder="起始时间"
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select> </el-time-select>
<el-time-select placeholder="结束时间" v-model="endTime" <el-time-select
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"> placeholder="结束时间"
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">
@ -151,21 +193,25 @@
</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: '',
@ -183,9 +229,9 @@ 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');
} }
} }
@ -193,12 +239,14 @@ 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: 9999; z-index: 900;
}
.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,25 +1,28 @@
<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"> <div v-if="msg && msg.length > 0">
<el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发'"> <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="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>
@ -41,18 +44,72 @@
<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> <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>
<!-- 固定间隔 --> <!-- 固定间隔 -->
<el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'"> <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="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>
@ -73,28 +130,63 @@
<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> <el-table-column align="center" prop="in_spd" label="入流平均速度">
<el-table-column align="center" prop="out_spd" label="出流平均速度"></el-table-column> <template slot-scope="scope">
<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="编辑" :visible.sync="dialogVisible" width="40%"> <el-dialog title="编辑" :append-to-body="true" :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 placeholder="起始时间" v-model="startTime" <el-time-select
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"> placeholder="起始时间"
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select> </el-time-select>
<el-time-select placeholder="结束时间" v-model="endTime" <el-time-select
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"> placeholder="结束时间"
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 v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="val3"> <!-- <el-form-item label="val3">
@ -118,6 +210,7 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'tableShow', //表格组件 name: 'tableShow', //表格组件
props: { props: {
@ -133,6 +226,7 @@ export default {
}, },
data() { data() {
return { return {
getNameFromTargetType,
dialogVisible: false, dialogVisible: false,
startTime: '', startTime: '',
endTime: '', endTime: '',
@ -162,6 +256,15 @@ export default {
value: '' value: ''
}; };
}, },
watch: {
msg: {
handler(newVal) {
// console.log('断面', newVal);
// console.log('断面-triggerType', this.triggerType);
}
// immediate: true
}
},
methods: { methods: {
handleCommand(command) { handleCommand(command) {
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
@ -169,19 +272,21 @@ 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: 9999; z-index: 900;
}
.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,12 +7,10 @@ export default {
name: 'thermalChart', //热点图组件 name: 'thermalChart', //热点图组件
data() { data() {
return { return {
thermalChartData:[] thermalChartData: []
}; };
}, },
created() { created() {},
},
props: { props: {
list: { list: {
type: Array, type: Array,
@ -25,7 +23,7 @@ export default {
}, },
title: { title: {
type: String type: String
}, }
// status: { // status: {
// type: String // type: String
// }, // },
@ -38,48 +36,65 @@ 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 = [];
for (let i = 0; i < odData.length; i++) { if (odData && odData.length > 0) {
let item = odData[i].data for (let i = 0; i < odData.length; i++) {
for (let j = 0; j < item.length; j++) { let item = odData[i].data;
start.push(item[j].start) if (item && item.length > 0) {
// 数组去重 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]
@ -88,81 +103,83 @@ 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: startEnd.start.split(','), data: startEndStart,
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: startEnd.end.split(','), data: startEndEnd,
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();
@ -173,12 +190,13 @@ export default {
// if (this.list) { // if (this.list) {
// this.drawThermalChart() // this.drawThermalChart()
// } // }
this.drawThermalChart()
}, },
watch: { watch: {}
}
}; };
</script> </script>
<style scoped></style> <style scoped>
.a{
color: rgba(120, 0, 0, 0.5);
}
</style>

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

@ -0,0 +1,254 @@
<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 Normal file
View File

@ -0,0 +1,163 @@
<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 Normal file
View File

@ -0,0 +1,125 @@
<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 Normal file
View File

@ -0,0 +1,488 @@
<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 Normal file
View File

@ -0,0 +1,193 @@
<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 Normal file
View File

@ -0,0 +1,276 @@
<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 Normal file
View File

@ -0,0 +1,312 @@
<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 Normal file
View File

@ -0,0 +1,240 @@
<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 Normal file
View File

@ -0,0 +1,284 @@
<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>

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

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

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

@ -3,6 +3,7 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'echartsLine', //折线图组件 name: 'echartsLine', //折线图组件
props: { props: {
@ -63,9 +64,45 @@ 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) {
@ -73,39 +110,62 @@ 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 == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'headway'); yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow'); yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow'); yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed'); yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
this.chartData.xData = this.extractKeyValues(val, 'time').reverse(); // console.log('实时触发-类型-', val);
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) {
for (let i = 0; i < seriesArr[0].length; i++) { const firstLevel = seriesArr.find((i) => i && i.length > 0);
const item = seriesArr[0][i]; //quantity
const valueList = seriesArr.map((arr) => { if (firstLevel && firstLevel.length > 0) {
let t = arr[i].value; for (let i = 0; i < firstLevel.length; i++) {
if (arr[i].quantity || arr[i].quantity === 0) { const item = firstLevel[i];
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;
@ -119,105 +179,128 @@ export default {
name: '总数', name: '总数',
value: totalCountList value: totalCountList
}); });
this.seriesList = transformedData; this.seriesList = this.seriesList.concat(transformedData).slice(-10);
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_stay'); yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_queue'); yData = this.extractKeyValues(val, 'n_queue');
} }
} else if (this.timeMode == '固定时刻') { } else if (this.timeMode == '固定时刻') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'headway'); yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow'); yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow'); yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed'); yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
this.chartData.xData = this.extractKeyValues(val, 'time').reverse(); // this.chartData.xData = this.extractKeyValues(val, 'time');
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) {
for (let i = 0; i < seriesArr[0].length; i++) { const firstLevel = seriesArr.find((i) => i && i.length > 0);
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 if (firstLevel && firstLevel.length > 0) {
// const valueList = seriesArr.map((arr) => arr[i].quantity); for (let i = 0; i < firstLevel.length; i++) {
const valueList = seriesArr.map((arr) => { const item = firstLevel[i];
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) { if (item) {
t = arr[i].quantity; 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
});
} }
} }
// console.log('transformedData-1',transformedData) // console.log('transformedData-1',transformedData)
const totalCountList = transformedData[0].value.map((_, i) => { let totalCountList = 0;
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0); if (transformedData.length > 0 && transformedData[0].value) {
}); 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 = transformedData; this.seriesList = this.seriesList.concat(transformedData).slice(-10);
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_stay'); yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_queue'); yData = this.extractKeyValues(val, 'n_queue');
} }
} else if (this.timeMode == '固定间隔') { } else if (this.timeMode == '固定间隔') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_headway'); yData = this.extractKeyValues(val, 'ave_headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow'); yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow'); yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed'); yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
this.chartData.xData = this.extractKeyValues(val, 'time').reverse(); xData = this.extractKeyValues(val, 'time');
// 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) {
for (let i = 0; i < seriesArr[0].length; i++) { const firstLevel = seriesArr.find((i) => i && i.length > 0);
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 if (firstLevel && firstLevel.length > 0) {
// const valueList = seriesArr.map((arr) => arr[i].value); for (let i = 0; i < firstLevel.length; i++) {
const valueList = seriesArr.map((arr) => { const item = firstLevel[i];
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) { if (item) {
t = arr[i].quantity; 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
});
} }
} }
@ -232,19 +315,25 @@ export default {
name: '总数', name: '总数',
value: totalCountList value: totalCountList
}); });
this.seriesList = transformedData; this.seriesList = this.seriesList.concat(transformedData).slice(-10);
// console.log('固定间隔-类型-transformedData-2', transformedData); // console.log('固定间隔-类型-transformedData-2', transformedData);
} else if (this.componentType == '延误') { } else if (this.componentType == '延误') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_delay'); yData = this.extractKeyValues(val, 'ave_delay');
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_stay'); yData = this.extractKeyValues(val, 'ave_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_queue'); 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;
} }
@ -354,7 +443,8 @@ 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)',
@ -404,7 +494,7 @@ export default {
}, },
legend: { legend: {
// 图例过多时滚动 // 图例过多时滚动
type: "scroll", type: 'scroll',
left: 'center', left: 'center',
top: 0, top: 0,
left: '10%', left: '10%',
@ -426,7 +516,8 @@ 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
}, },
@ -476,10 +567,12 @@ export default {
], ],
series: seriesList series: seriesList
}; };
myChart.setOption(option); if (myChart) {
window.addEventListener('resize', () => { myChart.setOption(option);
myChart.resize(); window.onresize = () => {
}); myChart.resize();
};
}
} }
}, },
mounted() { mounted() {
@ -488,11 +581,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,6 +3,7 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'echartsPie', //折线图组件 name: 'echartsPie', //折线图组件
props: { props: {
@ -93,6 +94,33 @@ 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',
@ -122,11 +150,17 @@ export default {
color: color, color: color,
animation: false, animation: false,
legend: { legend: {
top: 20, top: 5,
right: 'center', right: 5,
bottom: 5,
orient: 'vertical',
textStyle: {}, textStyle: {},
type: 'scroll', type: 'scroll',
width: '80%' // top: 0,
// right: 'center',
// textStyle: {},
// type: 'scroll',
// width: '80%'
// data: [ // data: [
// { // {
// name: '流量_1-zone2-饼状图-实时触发', // name: '流量_1-zone2-饼状图-实时触发',
@ -153,9 +187,9 @@ export default {
}, },
series: [ series: [
{ {
name: '流量_1-zone2-饼状图-实时触发', name: '',
type: 'pie', type: 'pie',
center: ['50%', '55%'], center: ['33%', '50%'],
radius: '70%', radius: '70%',
label: { label: {
normal: { normal: {
@ -184,13 +218,15 @@ export default {
} }
] ]
}; };
myChart.setOption(option); if (myChart) {
window.addEventListener('resize', () => { myChart.setOption(option);
myChart.resize(); window.addEventListener('resize', () => {
}); myChart.resize();
this.$nextTick(() => { });
myChart.resize(); this.$nextTick(() => {
}); myChart.resize();
});
}
} }
}, },
mounted() { mounted() {
@ -221,8 +257,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(() => {

709
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,372 +9,383 @@
<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: {
type: Object,
},
// 组件名称
componentName: {
type: String,
},
chartName: {
type: String,
},
status: {
type: String,
},
intersectionName: {
type: Array,
default() {
return [];
},
},
chatShowType: {
type: String,
},
echartsRef: {
type: String,
},
dataList: {
type: Array,
default() {
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);
}
if(this.dataList[i].min) {
this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
}else {
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 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: [ typeValue: {
{ type: Object
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: [ // 组件名称
{ componentName: {
name: "外框", type: String
type: "bar", },
barGap: "-120%", // 设置外框粗细 chartName: {
data: [300], type: String
barWidth: 150, },
itemStyle: { status: {
normal: { type: String
color: "rgba(0,0,0,.1)", // 填充色 },
barBorderWidth: 1, // 边框宽度 intersectionName: {
label: { type: Array,
// 标签显示位置 default() {
show: false, return [];
}
},
chatShowType: {
type: String
},
echartsRef: {
type: String
},
dataList: {
type: Array,
default() {
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);
// }
// if (this.dataList[i].min) {
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
// } else {
// 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: [
}, {
z: 1, type: 'category',
}, gridIndex: 0,
{ data: chartData.map((item) => item.stage),
name: "平均值", axisLine: {
type: "bar", show: false
stack: "val", },
barWidth: 150, axisLabel: {
xAxisIndex: 0, show: false
yAxisIndex: 0, }
label: { }
show: true, ],
position: "right", yAxis: {
// offset: [10, 20], type: 'value',
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,
},
{ splitArea: { show: false },
name: "最大值", gridIndex: 0,
type: "bar", min: 0,
stack: "val", splitNumber: 12,
barWidth: 150, splitLine: {
barGap: "-100%", show: false
data: [maxData], },
label: { axisLine: {
show: true, show: false
position: "right", },
distance: 10, axisTick: {
color: "#000", show: false
fontSize: 17, },
offset: [0, -30], axisLabel: {
formatter: "{c}" + "[max]", show: false
}, },
itemStyle: { max: 200
color: "#319cff", },
}, series: [
zlevel: 9, {
}, name: '外框',
{ type: 'bar',
name: "最小值", barGap: '-120%', // 设置外框粗细
type: "bar", data: [300],
stack: "val", barWidth: 150,
barWidth: 150, itemStyle: {
barGap: "-100%", normal: {
data: [minData], color: 'rgba(0,0,0,.1)', // 填充色
label: { barBorderWidth: 1, // 边框宽度
offset: [10, 20], label: {
show: true, // 标签显示位置
position: "left", show: false
distance: 10, }
color: "#000", }
offset: [0, -30], },
fontSize: 17, z: 1
formatter: "{c}" + "[min]", },
}, {
// tooltip: { name: '平均值',
// backgroundColor: 'transparent', type: 'bar',
// formatter: ' ' stack: 'val',
// }, barWidth: 150,
itemStyle: { xAxisIndex: 0,
color: "#328adc", yAxisIndex: 0,
}, label: {
zlevel: 9, show: true,
}, position: 'right',
], // offset: [10, 20],
}; distance: 15,
myChart.setOption(option); color: '#000',
window.addEventListener("resize", function () { fontSize: 17,
myChart.resize(); formatter: '{c}' + '[avg]'
}); },
// this.$nextTick(() => { itemStyle: {
// myChart.setOption(option) color: '#89c6ff'
// myChart.resize(); },
// }) data: [avgData],
}, zlevel: 9
}, },
mounted() { {
let that = this; name: '中间值',
const $dom = document.getElementById(this.echartsRef); type: 'bar',
$dom.style.width = "440px"; barWidth: 150,
$dom.style.height = "260px"; stack: 'val',
setTimeout(() => { label: {
that.$nextTick(() => { show: true,
this.chart = this.$echarts.getInstanceByDom( position: 'left',
document.getElementById(this.echartsRef) distance: 15,
); color: '#000',
if (this.chart == null) { fontSize: 17,
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); 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();
// })
} }
that.initEcharts();
});
}, 300);
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
},
}, },
chatShowType: { mounted() {
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( this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
document.getElementById(this.echartsRef) if (this.chart == null) {
); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
if (this.chart == null) { }
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); that.initEcharts();
} });
that.initEcharts();
});
}, 300); }, 300);
},
}, },
echartsRef: { watch: {
handler: function (oldValues, newValues) { intersectionName: {
console.log("old", oldValues); handler: function (oldValues, newValues) {
console.log("newV", newValues); this.$nextTick(() => {
let that = this; this.initEcharts();
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: {
}, 300); handler: function (oldValues, newValues) {
}, let that = this;
}, setTimeout(() => {
dataList: { that.$nextTick(() => {
handler: function (oldValues, newValues) { this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
this.$nextTick(() => { if (this.chart == null) {
this.chart = this.$echarts.getInstanceByDom( this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
document.getElementById(this.echartsRef) }
); that.initEcharts();
if (this.chart == null) { });
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); }, 300);
} }
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 Normal file
View File

@ -0,0 +1,222 @@
<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 Normal file
View File

@ -0,0 +1,242 @@
<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([i, j, item[j].quantity]); chartData.push([j, i, item[j].quantity]);
// console.log([i,j,item[j].val]); // console.log([i,j,item[j].val]);
} }
} }
@ -67,16 +67,61 @@ 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 (this.dataList.length > 0) { if (filterDataList.length > 0 && filterDataList[0].ob_data) {
for (let i = 0; i < this.dataList.length; i++) { dataOd.push(filterDataList[0].ob_data);
dataOd.push(this.dataList[i].ob_data); dataList = this.ODhanlde(dataOd);
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++) {
@ -85,11 +130,12 @@ 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 (this.dataList.length > 0 && this.dataList[0].ob_data) { if (filterDataList.length > 0 && filterDataList[0].ob_data) {
dataOd.push(this.dataList[0].ob_data); dataOd.push(filterDataList[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);
@ -103,10 +149,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 (this.dataList.length > 0 && this.dataList[0].ob_data) { if (filterDataList.length > 0 && filterDataList[0].ob_data) {
dataOd.push(this.dataList[0].ob_data); dataOd.push(filterDataList[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);
@ -114,96 +161,108 @@ export default {
// } // }
} }
let myChart = this.chart; let myChart = this.chart;
let option = { let startName = [],
dataZoom: [ endName = [];
{ if (this.startName) {
id: 'dataZoomY', startName = this.startName.split(',');
type: 'slider', }
yAxisIndex: [0], if (this.endName) {
startValue: 0, endName = this.endName.split(',');
endValue: 10, }
filterMode: 'empty' if (dataList) {
} let option = {
], dataZoom: [
tooltip: { {
position: 'top' id: 'dataZoomY',
}, type: 'slider',
animation: false, yAxisIndex: [0],
grid: { startValue: 0,
left: '3%', endValue: 10,
right: '8%', filterMode: 'empty'
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.startName.split(','),
axisLine: {
lineStyle: {
color: '#000'
} }
],
tooltip: {
position: 'top'
}, },
axisLabel: { animation: false,
interval: 0, grid: {
rotate: 40 left: '3%',
right: '8%',
bottom: '8%',
containLabel: true
}, },
splitArea: { xAxis: {
show: true type: 'category',
} data: startName,
// name: "镇街", axisLine: {
}, lineStyle: {
yAxis: { color: '#000'
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
} }
}, },
itemStyle: { axisLabel: {
emphasis: { interval: 0,
shadowBlur: 10, rotate: 40
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() {
@ -243,8 +302,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 Normal file
View File

@ -0,0 +1,454 @@
<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>

27
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">{{ n.name }}</span <span style="font-size: 15px">{{ getNameFromTargetType(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">{{ n.name }}</span <span style="font-size: 15px">{{ getNameFromTargetType(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,6 +325,7 @@ 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: [
@ -351,6 +352,7 @@ export default {
}, },
data() { data() {
return { return {
getNameFromTargetType,
// 类型数值 // 类型数值
total: 0, total: 0,
// 速度数值 // 速度数值
@ -370,7 +372,11 @@ export default {
methods: { methods: {
// 计算类型数量的总和 // 计算类型数量的总和
getDataArr(val) { getDataArr(val) {
// console.log('getDataArr', val); // if(val&&val.length>0){
// 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);
}, },
@ -391,7 +397,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; this.cycleAccumulateDataArr[0].headway = val[0].ave_headway == -1 ? '-' : 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;
@ -408,9 +414,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) {
@ -424,7 +430,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; this.newDataArr[0].headway = val[0].ave_headway == -1 ? '-' : 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;
@ -523,14 +529,13 @@ 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;
} }

93
src/config/apiurl.js
View File

@ -1,4 +1,15 @@
/*
* @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",
@ -9,71 +20,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:5000/api/AddShipjk', // dataUrl: 'http://172.16.1.168:80/api/AddShipjk',
// getSpareElementOrder: 'http://172.16.1.168:5000/api/Upload', // getSpareElementOrder: 'http://172.16.1.168:80/api/Upload',
// postSetQuanjsz: 'http://172.16.1.168:5000/api/SetQuanjsz', // postSetQuanjsz: 'http://172.16.1.168:80/api/SetQuanjsz',
// saveRoleApi: 'http://172.16.1.168:5000/api/AddZhangh', // saveRoleApi: 'http://172.16.1.168:80/api/AddZhangh',
// saveSetFtppz: 'http://172.16.1.168:5000/api/SetFtppz', // saveSetFtppz: 'http://172.16.1.168:80/api/SetFtppz',
// //编辑保存组件弹窗传参 // //编辑保存组件弹窗传参
// editComponent: 'http://172.16.1.168:5000/api/SetMonqjkzjcs', // editComponent: 'http://172.16.1.168:80/api/SetMonqjkzjcs',
// //保存主机名称 // //保存主机名称
// editRoleApi: 'http://172.16.1.168:5000/api/EditZhangh', // editRoleApi: 'http://172.16.1.168:80/api/EditZhangh',
// //新增图形接口 // //新增图形接口
// addFigure: 'http://172.16.1.168:5000/api/AddJianktx', // addFigure: 'http://172.16.1.168:80/api/AddJianktx',
// //编辑图形名称 // //编辑图形名称
// editFigure: 'http://172.16.1.168:5000/api/EditTuxmc', // editFigure: 'http://172.16.1.168:80/api/EditTuxmc',
// //编辑保存组件弹窗传参 // //编辑保存组件弹窗传参
// setHostName: 'http://172.16.1.168:5000/api/SetHostName', // setHostName: 'http://172.16.1.168:80/api/SetHostName',
// setHostTime: 'http://172.16.1.168:5000/api/SetHostTime', // setHostTime: 'http://172.16.1.168:80/api/SetHostTime',
// changePassowrd:'http://172.16.1.168:5000/api/ChangePassword', // changePassowrd:'http://172.16.1.168:80/api/ChangePassword',
// //还原服务器设置上传 // //还原服务器设置上传
// postConfigRestore:'http://172.16.1.168:5000/api/ConfigRestore', // postConfigRestore:'http://172.16.1.168:80/api/ConfigRestore',
// //更新软件版本 // //更新软件版本
// postConfigUpdate:'http://172.16.1.168:5000/api/Update', // postConfigUpdate:'http://172.16.1.168:80/api/Update',
// //新增接入方 // //新增接入方
// postAddJierf:'http://172.16.1.168:5000/api/AddJierf', // postAddJierf:'http://172.16.1.168:80/api/AddJierf',
// //编辑接入方 // //编辑接入方
// postEditJierf:'http://172.16.1.168:5000/api/EditJierf', // postEditJierf:'http://172.16.1.168:80/api/EditJierf',
// //设置组件 // //设置组件
// setComponents:'http://172.16.1.168:5000/api/SetComponents', // setComponents:'http://172.16.1.168:80/api/SetComponents',
// //设置接入方接口 // //设置接入方接口
// setAccessParty:'http://172.16.1.168:5000/api/setAccessParty', // setAccessParty:'http://172.16.1.168:80/api/setAccessParty',
// `http://${ipUurl}:5000/api/AddShipjk` // `http://${ipUurl}:80/api/AddShipjk`
dataUrl: `http://${ipUurl}:5000/api/AddShipjk`, dataUrl: `http://${ipUurl}:80/api/AddShipjk`,
getSpareElementOrder: `http://${ipUurl}:5000/api/Upload`, getSpareElementOrder: `http://${ipUurl}:80/api/Upload`,
postSetQuanjsz: `http://${ipUurl}:5000/api/SetQuanjsz`, postSetQuanjsz: `http://${ipUurl}:80/api/SetQuanjsz`,
//新增图形接口 //新增图形接口
addFigure: `http://${ipUurl}:5000/api/AddJianktx`, addFigure: `http://${ipUurl}:80/api/AddJianktx`,
//编辑图形名称 //编辑图形名称
editFigure: `http://${ipUurl}:5000/api/EditTuxmc`, editFigure: `http://${ipUurl}:80/api/EditTuxmc`,
//根据视频监控id获取监控图形数据 //根据视频监控id获取监控图形数据
// getJianktx: `http://${ipUurl}:5000/api/GetJianktx`, // getJianktx: `http://${ipUurl}:80/api/GetJianktx`,
//编辑保存组件弹窗传参 //编辑保存组件弹窗传参
editComponent: `http://${ipUurl}:5000/api/SetMonqjkzjcs`, editComponent: `http://${ipUurl}:80/api/SetMonqjkzjcs`,
//保存主机名称 //保存主机名称
editRoleApi: `http://${ipUurl}:5000/api/EditZhangh`, editRoleApi: `http://${ipUurl}:80/api/EditZhangh`,
saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`, saveRoleApi: `http://${ipUurl}:80/api/AddZhangh`,
saveSetFtppz: `http://${ipUurl}:5000/api/SetFtppz`, saveSetFtppz: `http://${ipUurl}:80/api/SetFtppz`,
//编辑保存组件弹窗传参 //编辑保存组件弹窗传参
setHostName: `http://${ipUurl}:5000/api/SetHostName`, setHostName: `http://${ipUurl}:80/api/SetHostName`,
setHostTime: `http://${ipUurl}:5000/api/SetHostTime`, setHostTime: `http://${ipUurl}:80/api/SetHostTime`,
changePassowrd:`http://${ipUurl}:5000/api/ChangePassword`, changePassowrd: `http://${ipUurl}:80/api/ChangePassword`,
//还原服务器设置上传 //还原服务器设置上传
postConfigRestore:`http://${ipUurl}:5000/api/ConfigRestore`, postConfigRestore: `http://${ipUurl}:80/api/ConfigRestore`,
//更新软件版本 //更新软件版本
postConfigUpdate:`http://${ipUurl}:5000/api/Update`, postConfigUpdate: `http://${ipUurl}:80/api/Update`,
//新增接入方 //新增接入方
postAddJierf:`http://${ipUurl}:5000/api/AddJierf`, postAddJierf: `http://${ipUurl}:80/api/AddJierf`,
//编辑接入方 //编辑接入方
postEditJierf:`http://${ipUurl}:5000/api/EditJierf`, postEditJierf: `http://${ipUurl}:80/api/EditJierf`,
//设置组件 //设置组件
setComponents:`http://${ipUurl}:5000/api/SetComponents`, setComponents: `http://${ipUurl}:80/api/SetComponents`,
setAccessParty:`http://${ipUurl}:5000/api/setAccessParty`, setAccessParty: `http://${ipUurl}:80/api/setAccessParty`,
//自动校时接口 //自动校时接口
setAutomatic:`http://${ipUurl}:5000/api/SetAutomaticTiming`, setAutomatic: `http://${ipUurl}:80/api/SetAutomaticTiming`,
}; };

55
src/main.js
View File

@ -79,23 +79,30 @@ 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) { window.PubScribe = function (topic, number, _callback, other = false, fromName = '') {
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)
})) }))
@ -120,13 +127,17 @@ window.PubScribe = function (topic, number, _callback, other = false) {
}); });
} 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"); console.log("订阅成功11", topic);
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)
})) }))
@ -146,29 +157,31 @@ window.PubScribe = function (topic, number, _callback, other = false) {
} else { } else {
if (topic != null) { if (topic != null) {
console.log("topic", topic) console.log("已链接成功后订阅主题topic", topic)
currentTopics = topic; currentTopics = topic;
client.subscribe(currentTopics, { mqtt.MySub(() => {
qos: 0 client.subscribe(currentTopics, {
}, (err) => { qos: 0
if (!err) { }, (err) => {
console.log("订阅成功1"); if (!err) {
// setTimeout(function() { console.log("订阅成功1", topic);
client.publish('msg_stream', JSON.stringify({ console.log("订阅成功1-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
"msg_flag": parseInt(number) console.log("订阅成功1-fromName", fromName);
})) console.log("订阅成功1-number", number);
// if(number!= -1 &&number!= '001' ){ client.publish('msg_stream', JSON.stringify({
// client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":videoid})) "msg_flag": parseInt(number)
// } }))
} 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)

124
src/utils/mqttConfig.js
View File

@ -1,9 +1,14 @@
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')
@ -13,10 +18,10 @@ class mqttHandle {
endpoint: "/mqtt", endpoint: "/mqtt",
clean: true, // 保留会话 clean: true, // 保留会话
cleanSession: true, cleanSession: true,
connectTimeout: 7000, // 超时时间 connectTimeout: 5000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔 reconnectPeriod: 3000, // 重连时间间隔
host:ip, host: ip,
port: '10087', port: '80',
// 认证信息 // 认证信息
// clientId: Number(new Date()).toString(), // clientId: Number(new Date()).toString(),
clientId: newName, clientId: newName,
@ -28,17 +33,29 @@ class mqttHandle {
// qos: 0, // qos: 0,
// } // }
this.mqttClient = null; this.mqttClient = null;
// 追踪是否为初始连接
this.initialConnection = true;
// 存储当前 onConnected 回调
this.onConnected = () => {}; // 默认为空函数
} }
/** /**
* 创建链接 * 创建链接
* @returns client * @returns client
*/ */
createConnect(onConnected) { createConnect(onConnectedFun) {
//配置链接 //配置链接
const { host, port, endpoint, ...options } = this.connect; const {
console.log("this.connect.host",this.connect.host) 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/';
const connectUrl = `ws://${this.connect.host}:${this.connect.port}`; let connectUrl = `ws://${this.connect.host}${endpoint}`;
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('连接成功')
@ -50,39 +67,45 @@ 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(); // 如果是初始连接
// this._client.subscribe('img'+this.number, { qos: 0 }); if (this.initialConnection) {
// this._client.subscribe('stream'+this.number, { qos: 0 }); this.initialConnection = false;
// this._client.subscribe('trajectory'+this.number, { qos: 0 }); this.onConnected = onConnectedFun;
// this._client.subscribe('detection'+this.number, { qos: 0 }); }
// this._client.subscribe('img0', { qos: 0 }); this.onConnected()
// this._client.subscribe('stream0', { qos: 0 }); // this._client.subscribe('img'+this.number, { qos: 0 });
// this._client.subscribe('trajectory0', { qos: 0 }); // this._client.subscribe('stream'+this.number, { qos: 0 });
// this._client.subscribe('detection0', { qos: 0 }); // this._client.subscribe('trajectory'+this.number, { qos: 0 });
}); // this._client.subscribe('detection'+this.number, { qos: 0 });
this.mqttClient.on('reconnect', (error) => { // this._client.subscribe('img0', { qos: 0 });
console.log('正在重连') // this._client.subscribe('stream0', { qos: 0 });
}) // this._client.subscribe('trajectory0', { qos: 0 });
this.mqttClient.on("error", (error) => { // this._client.subscribe('detection0', { qos: 0 });
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;
@ -96,22 +119,23 @@ class mqttHandle {
} }
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, { qos: 0 }, (err)=> // this.mqttClient.subscribe(subscriptions, {
{ // qos: 0
if (!err) { // }, (err) => {
console.log("订阅成功："+subscriptions); // if (!err) {
// 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 Normal file
View File

@ -0,0 +1,24 @@
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,7 +233,11 @@ export default {
videoId: '' videoId: ''
}, },
disable: false, //根据权限禁用按钮 disable: false, //根据权限禁用按钮
highPic: {} //接收第一张高频图片 highPic: {}, //接收第一张高频图片
timer1: null,
timer2: null,
timer3: null,
timer4: null
}; };
}, },
@ -261,7 +265,8 @@ export default {
newVal.forEach((item) => { newVal.forEach((item) => {
if (item.status == '加载中') { if (item.status == '加载中') {
//console.log('加载中', item); //console.log('加载中', item);
setTimeout(() => { this.timer1 = null;
this.timer1 = setTimeout(() => {
this.getVideoList(); this.getVideoList();
}, 10000); }, 10000);
} }
@ -316,8 +321,10 @@ 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 == '离线视频') {
@ -440,7 +447,10 @@ 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) {
@ -631,11 +641,12 @@ 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;
setTimeout(() => { this.timer2 = null;
this.timer2 = setTimeout(() => {
loading.close(); loading.close();
that.timer3 = null;
setTimeout(() => { that.timer3 = setTimeout(() => {
this.getVideoList(); this.getVideoList();
}, 5000); }, 5000);
@ -807,7 +818,8 @@ export default {
//console.log('res', res); //console.log('res', res);
if (res.data.msg == '成功') { if (res.data.msg == '成功') {
// if(val=='重启'){ // if(val=='重启'){
setTimeout(() => { this.timer4 = null;
this.timer4 = setTimeout(() => {
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' })); window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
}, 2000); }, 2000);
// } // }
@ -824,6 +836,9 @@ 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 == '已分析') {
@ -906,6 +921,16 @@ 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>
@ -947,9 +972,13 @@ 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,38 +1,39 @@
<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利用率："><span v-for="s in performance.cpuUtilization" <el-form-item label="Cpu利用率："
:key="s">{{ s +'%'}} | </span> </el-form-item> ><span v-for="s in performance.cpuUtilization" :key="s">{{ s + '%' }} | </span>
<el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item> </el-form-item>
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item> <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item> <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
<el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item> <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
<el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item> <el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item>
<el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item> <el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item>
<el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item> <el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item>
<el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item> <el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item>
</el-form> <el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item>
</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="设备名称">
@ -49,173 +50,165 @@
</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>
<h1 class="mar-top20">系统网络状态</h1> <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
<el-form :model="networkStatus" label-position="left" label-width="200px" style="width:70%"> <el-table-column prop="connect" label="连接"> </el-table-column>
<el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item> <el-table-column prop="IP" label="IP地址"> </el-table-column>
<el-form-item label="互联网延迟：">{{ networkStatus.internetDelay }}</el-form-item> <el-table-column prop="acceptor" label="接受">
<el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item> <template slot-scope="scope"> {{ scope.row.occupancy }}K </template>
<el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item> </el-table-column>
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item> <el-table-column prop="totalReceived" label="收到的总数">
<el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item> <template slot-scope="scope"> {{ scope.row.total }}GB </template>
</el-form> </el-table-column>
<el-table-column prop="transmission" label="传输">
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%"> <template slot-scope="scope"> {{ scope.row.total }}Kb/s </template>
<el-table-column prop="connect" label="连接"> </el-table-column>
</el-table-column> <el-table-column prop="transmissionTotal" label="传输的总数">
<el-table-column prop="IP" label="IP地址"> <template slot-scope="scope"> {{ scope.row.total }}MB </template>
</el-table-column> </el-table-column>
<el-table-column prop="acceptor" label="接受"> </el-table>
<template slot-scope="scope"> </div>
{{ 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() {
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;
}
}, },
} 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;
}
};
</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>

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

File diff suppressed because it is too large Load Diff

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

@ -1,313 +1,309 @@
<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 :span="6"> 文件选择： </el-col>
文件选择： <el-col :span="18">
</el-col> <el-upload action="https://jsonplaceholder.typicode.com/posts/">
<el-col :span="18"> <el-button size="small" type="primary">点击上传</el-button>
<el-upload action="https://jsonplaceholder.typicode.com/posts/"> </el-upload>
<el-button size="small" type="primary">点击上传</el-button> </el-col>
</el-upload> </el-row>
</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订阅（独立） created() {
getDataByMqtt(url, topic, cIdNum) { this.testMqtt();
},
const clientId = "test_id_" + String(new Date().getTime()); // 用户名 methods: {
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // 测试：mqtt测试
var ip = window.location.host.split(":")[0]; testMqtt() {
console.log("ip",ip) this.getDataByMqtt();
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, // 保留标志
}, },
}; // mqtt订阅（独立）
if (this.mqttClient == undefined) { getDataByMqtt(url, topic, cIdNum) {
this.mqttClient = mqtt.connect(host, options); // 连接 const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
// const client = mqtt.connect(host, options); // 连接 // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
// const client = mqtt.connect(host) // 连接 var ip = window.location.host.split(':')[0];
// 错误回调 console.log('ip', ip);
// console.log("this.mqttClient", this.mqttClient) let host = `ws://${ip}:10087`;
this.mqttClient.on("error", (err) => { if (process.env.NODE_ENV === 'development') {
console.log("[MQTT-TEST] 连接错误：", err); host = 'ws://172.16.1.168:10087/';
this.mqttClient.end(); }
}); // const host = 'ws://172.16.1.168:10087/';
// 重连回调
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 });
});
// 接收回调 const options = {
this.mqttClient.on("message", (topic, message, packet) => { // 配置
if (topic.indexOf("img0") != -1) { // 测试：订阅本机IP
try { // host: host,
const utf8decoder = new TextDecoder() // port: port,
const u8arr = new Uint8Array(message) // host:"172.16.1.168:10086",
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 keepalive: 60, // 心跳时间，默认60s，设置为0禁用
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 username: 'admin', // 用户名（可选）
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) password: '123456', // 密码（可选）
} catch { clientId: clientId, // 客户端ID，默认随机生成
let imageType = 'arraybuffer'; protocolId: 'MQTT',
const blob = new Blob([message], { type: imageType }) protocolVersion: 4,
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) clean: true, // false在离线时接收QoS1和2的消息
console.log("imageUrl", imageUrl) reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
} connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
} else if (topic.indexOf("img1") != -1) { will: {
try { // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
const utf8decoder = new TextDecoder() topic: 'img1', // 要发布的主题
const u8arr = new Uint8Array(message) payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 retain: false // 保留标志
// console.log("msg", msg) //msg为转换后的JSON数据 }
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) };
} catch { if (this.mqttClient == undefined) {
let imageType = 'arraybuffer'; this.mqttClient = mqtt.connect(host, options); // 连接
const blob = new Blob([message], { type: imageType }) // const client = mqtt.connect(host, options); // 连接
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) // const client = mqtt.connect(host) // 连接
console.log("imageUrl", imageUrl) // 错误回调
} // console.log("this.mqttClient", this.mqttClient)
} else if (topic.indexOf("img2") != -1) { this.mqttClient.on('error', (err) => {
try { console.log('[MQTT-TEST] 连接错误：', err);
const utf8decoder = new TextDecoder() this.mqttClient.end();
const u8arr = new Uint8Array(message) });
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 // 重连回调
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 this.mqttClient.on('reconnect', (reconnect) => {
console.log("msg", msg) //msg为转换后的JSON数据 // console.log("[MQTT-TEST] 重连中……", reconnect);
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) });
} catch { // 连接回调
let imageType = 'arraybuffer'; this.mqttClient.on('connect', (connect) => {
const blob = new Blob([message], { type: imageType }) // console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) // 订阅
console.log("imageUrl", imageUrl) this.mqttClient.subscribe('img0', { qos: 0 });
} this.mqttClient.publish('aaa', '111');
} else if (topic.indexOf("img3") != -1) { this.mqttClient.subscribe('img1', { qos: 0 });
try { this.mqttClient.subscribe('img2', { qos: 0 });
const utf8decoder = new TextDecoder() this.mqttClient.subscribe('img3', { qos: 0 });
const u8arr = new Uint8Array(message) this.mqttClient.subscribe('img4', { qos: 0 });
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 this.mqttClient.subscribe('img5', { qos: 0 });
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 this.mqttClient.subscribe('img6', { qos: 0 });
console.log("msg", msg) //msg为转换后的JSON数据 this.mqttClient.subscribe('img7', { qos: 0 });
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) this.mqttClient.subscribe('stream0', { qos: 0 });
} catch { this.mqttClient.subscribe('stream1', { qos: 0 });
let imageType = 'arraybuffer'; this.mqttClient.subscribe('stream2', { qos: 0 });
const blob = new Blob([message], { type: imageType }) this.mqttClient.subscribe('stream3', { qos: 0 });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) this.mqttClient.subscribe('stream4', { qos: 0 });
console.log("imageUrl", imageUrl) this.mqttClient.subscribe('stream5', { qos: 0 });
} this.mqttClient.subscribe('stream6', { qos: 0 });
} else if (topic.indexOf("img4") != -1) { this.mqttClient.subscribe('stream7', { qos: 0 });
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))
}
}); // 接收回调
} 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 Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,6 +1,6 @@
<template> <template>
<div ref="box" class="box"> <div ref="box" class="box" v-loading="loading">
<el-empty v-show="sectionData.length == 0" :image-size="400"></el-empty> <el-empty v-show="!loading && 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,7 +14,6 @@
<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">
@ -22,7 +21,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">
<!--触发的组件 --> <!--触发的组件 -->
<typeChart <newtypeChart
ref="typeChartRef" ref="typeChartRef"
v-if="o.timeMode === '实时触发'" v-if="o.timeMode === '实时触发'"
:itemData="o" :itemData="o"
@ -36,7 +35,7 @@
:typeValue="typeTimeMode" :typeValue="typeTimeMode"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
/> />
<typeChart <newtypeChart
ref="typeChartRef1" ref="typeChartRef1"
v-if="o.timeMode === '固定时刻'" v-if="o.timeMode === '固定时刻'"
:itemData="o" :itemData="o"
@ -52,7 +51,7 @@
/> />
<!-- 固定间隔的组件 --> <!-- 固定间隔的组件 -->
<typeChart <newtypeChart
ref="typeChartRef2" ref="typeChartRef2"
style="width: 100%" style="width: 100%"
v-if="o.timeMode === '固定间隔'" v-if="o.timeMode === '固定间隔'"
@ -61,6 +60,7 @@
: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,12 +81,15 @@
</div> </div>
</template> </template>
<script> <script>
import typeChart from '../../components/target/typeChart.vue'; import moment from 'moment';
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: {
typeChart newtypeChart
}, },
props: { props: {
activeName: { activeName: {
@ -136,47 +139,37 @@ 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: [],
//触发的类型数值看板显示 //触发的类型数值看板显示
typeTimeMode: {}, // "type_data":[{//类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值
// 固定时刻的数值看板展示 // "name":"electric bicycle",//类型名称
typeCycleTimeData: {}, // "quantity":0//数量
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:''
}; };
}, },
// beforeCeated(){ created() {},
// },
created() {
// this.getNew()
// //console.log("cycleHistoryData",this.cycleHistoryData)
},
methods: { methods: {
// 手风琴下拉切换 // 手风琴下拉切换
handleChange(val) { handleChange(val) {
@ -187,21 +180,33 @@ export default {
// }); // });
// }, 3000); // }, 3000);
}, },
getNew() { //点击数据看板tab会执行获取所有配置的组件
// this.idVal = ; getNew(getHistory) {
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => { this.loading = true;
if (res.data.code == 200) { getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
//console.log(res.data.data, '组件的数据'); .then((res) => {
this.componentList = res.data.data; if (res.data.code == 200) {
this.siftData(); //console.log(res.data.data, '组件的数据');
} 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 = []; // this.classify = []; //通过相同赋值来改变sectionData里面children数据的改变不太合理，所以这边不用了
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);
@ -209,689 +214,187 @@ export default {
}); });
this.sectionData = this.sectionArr.map((item) => { this.sectionData = this.sectionArr.map((item) => {
item = { title: item, children: [] }; item = { title: item, children: [] };
this.acticveName = []; this.acticveName = []; //存储collapse组件的展开，默认全部收缩
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);
if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) { //把cycleStatisticsData，cycleTimeData存给children同级别暂时没理解为啥怎么做
item.cycleStatisticsData = val.cycleStatisticsData; // if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
} // item.cycleStatisticsData = val.cycleStatisticsData;
if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) { // }
item.cycleTimeData = val.cycleTimeData; // if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
} // 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) {
sectionHandle(i) { let tempNewVal = _.cloneDeep(newVal);
// let sections = document.querySelectorAll('.section'); this.sectionData.forEach((item) => {
let sectionBox = document.querySelectorAll('.sectionBox'); //item.title == val.combinationName
let downPulls1 = document.querySelectorAll('.downPull1'); if (item.children && item.children.length > 0) {
// 断面的小图标 item.children.forEach((cItem) => {
downPulls1[i].dataset.num++; if (cItem.timeMode == timeMode) {
if (downPulls1[i].dataset.num % 2 == 0) { // console.log('cItem', cItem);
downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;'; //找出对应timeMode的mqtt数据
// sections[i].style.height = 'auto'; tempNewVal.forEach((nItem) => {
if (sectionBox[i] != undefined) { if (cItem.analogAreaComponentId == nItem.component_id) {
// sectionBox[i].style.height = 'auto'; if (cItem[updateKey].length > 9) {
} this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
} else { }
downPulls1[i].style.cssText = 'transition: all 0.5s linear;'; //这里逻辑不知道为啥这样处理time，用的原逻辑
// sections[i].style.height = '500px'; if (this.$route.query.type == '离线视频') {
if (sectionBox[i] != undefined) { 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);
}
//循环方法 });
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);
}
} }
} });
this.$forceUpdate();
// console.log('sectionData', this.sectionData);
}, },
//处理离线视频历史数据 //过滤重复的 time 字段，保留每个 time 最后一个对象
changecycleHistoryData() {} filteredArrayFun(originalArray) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 按照时间从小到大排序
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: { //离线历史数据
handler(newVal) {
//console.log('componentList', newVal);
if (newVal != undefined && newVal.length != 0) {
newVal.forEach((ele) => {
if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
//console.log('实时视频', '固定间隔');
this.$nextTick(() => {
// var thatNN = this;
ele.cycleStatisticsData.forEach((item) => {
if (item.type_data != null) {
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 (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
this.cycleHistoryData.CycleTimeData.forEach((ne) => {
if (ne.component_id == ele.analogAreaComponentId) {
ele.cycleTimeData = ne.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,
deep: true
},
cycleHistoryData: { cycleHistoryData: {
handler(newVal) { handler(newVal) {
// debugger // debugger
//console.log('历史', newVal); console.log('历史cycleHistoryData-', newVal);
// //console.log("历史",oldVal) //该主题只会有固定间隔和固定时刻数据
if (newVal != undefined) { if (newVal && this.sectionData.length > 0) {
// newVal.forEach(ele => { //更新sectionData对应的analogAreaComponentId和timeMode更新数据
if (newVal.CycleStatisticsData) { if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
newVal.CycleStatisticsData.forEach((ele) => { 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', '固定间隔');
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) { if (newVal.CycleTimeData && newVal.CycleTimeData.length > 0) {
newVal.CycleTimeData.forEach((ele) => { newVal.CycleTimeData.forEach((ele) => {
this.$nextTick(() => { if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
// debugger //按照时间从小到大排序
// var thatNN = this; let cycleTimeData = this.filteredArrayFun(ele.cycleTimeData);
ele.cycleTimeData.forEach((item) => { this.updateSectionData(cycleTimeData, 'cycleTimeData', '固定时刻');
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
}, },
// activeName:'channge',
// 处理过的触发数据 // 处理过的触发数据
triggerListData: { triggerListData: {
handler(newVal) { handler(newVal) {
// //console.log("newVal",newVal,'流量数据') // console.log('实时触发triggerListData-', newVal[0].time);
this.triggerList = newVal; // console.log('实时触发triggerListData-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'));
// //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 (newVal && newVal.length > 0 && this.sectionData.length > 0) {
if (item.type_data != null) { //更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
_this.typeTimeMode = item; this.updateSectionData(newVal, 'trigger', '实时触发');
}
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 immediate: true,
deep: true
}, },
// 固定时刻的数据 // 固定时刻的数据
cycleTimeData: { cycleTimeData: {
handler(newVal) { handler(newVal) {
// 监听到打印固定时刻数据 // 监听到打印固定时刻数据
// console.log(newVal, '固定时刻数据'); // console.log('固定时刻数据cycleTimeData-', newVal);
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
if (newVal != undefined && newVal.length != 0 && this.sectionData) { this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
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('固定间隔', newVal); // console.log('固定间隔cycleStatisticsData', newVal);
if (newVal != undefined && newVal.length != 0 && this.sectionData) { if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
var that = this; this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
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('周期统计实时累计数据主题', newVal); // console.log('周期统计实时累计数据主题cycleAccumulateData-', newVal);
if (newVal != undefined && newVal.length != 0 && this.sectionData) { if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
var that = this; //实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
that.classify.forEach((ele, index) => { this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
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
} }
} }
}; };

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

File diff suppressed because it is too large Load Diff

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

@ -1,9 +1,16 @@
<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
> >
@ -31,9 +38,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
> >
@ -46,149 +53,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="上次同步时间"> <el-descriptions-item label="上次同步时间"> {{ form.data_sync.lastSyncTime }}</el-descriptions-item>
{{ form.data_sync.lastSyncTime }}</el-descriptions-item <el-descriptions-item label="本次同步时间">{{ form.data_sync.currentSyncStatus }}</el-descriptions-item>
> <el-descriptions-item label="下次同步时间">{{ form.data_sync.nextSyncTime }}</el-descriptions-item>
<el-descriptions-item label="本次同步时间">{{ </el-descriptions>
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 type="primary" @click="showUpdateCertificate = false">确 定</el-button>
>确 定</el-button </span>
> </el-dialog>
</span> </div>
</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: "",
}, },
traffic_analysis: { targetAnalysisStatusData: {
video_id: "", type: Object,
analyze_frame_rate: "", default: {}
cache_capacity: "",
cache_records_number: "",
last_frame_analysis_time: "",
},
data_sync: {
lastSyncTime: "",
currentSyncStatus: "",
nextSyncTime: "",
},
},
showUpdateCertificate: false,
};
},
created() {},
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(() => {
this.getData(); // 定时器触发时请求数据
setInterval(() => {
this.getData(); // 每隔24小时再次请求数据
}, 24 * 60 * 60 * 1000);
}, timeUntilOneAMTomorrow);
},
methods: {
//获取分析状态数据
getData() {
let videoId = this.$route.query.id;
getAnalysisStatus(videoId).then((res) => {
if (res.data.code == 200) {
// this.form = res.data.data;
if (res.data.data.target_detection !=null) {
this.form.target_detection = res.data.data.target_detection
}
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
}
} }
});
}, },
}, data() {
watch: { return {
trafficAnalysisStatusData: { form: {
//交通分析 target_detection: {
handler: function (val) { video_id: '',
console.log(val, "交通分析数据"); video_address: '',
this.form.traffic_analysis = val encoding_format: '',
}, code_tate: '',
frame_rate: '',
resolution_ratio: '',
neural_network: '',
decoder_frame_rate: '',
detector_frame_rate: '',
last_frame_analysis_time: ''
},
traffic_analysis: {
video_id: '',
analyze_frame_rate: '',
cache_capacity: '',
cache_records_number: '',
last_frame_analysis_time: ''
},
data_sync: {
lastSyncTime: '',
currentSyncStatus: '',
nextSyncTime: ''
}
},
showUpdateCertificate: false,
getUnityData: {}
};
}, },
targetAnalysisStatusData: { created() {
//目标分析 window.getStatus = this.getStatusFun;
handler: function (val) {
console.log(val, "目标监测数据");
this.form.target_detection = val
},
}, },
}, 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(() => {
this.getData(); // 定时器触发时请求数据
setInterval(() => {
this.getData(); // 每隔24小时再次请求数据
}, 24 * 60 * 60 * 1000);
}, timeUntilOneAMTomorrow);
},
methods: {
//从unity视频获取数据
getStatusFun(jsonString) {
// console.log('jsonString', jsonString);
this.getUnityData = JSON.parse(jsonString);
},
//获取分析状态数据
getData() {
let videoId = this.$route.query.id;
getAnalysisStatus(videoId).then((res) => {
if (res.data.code == 200) {
// this.form = res.data.data;
if (res.data.data.target_detection != null) {
this.form.target_detection = res.data.data.target_detection;
}
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: {
//交通分析
handler: function (val) {
console.log(val, '交通分析数据');
this.form.traffic_analysis = val;
}
},
targetAnalysisStatusData: {
//目标分析
handler: function (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,6 +676,9 @@ 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: '确定',

1345
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,7 +353,11 @@
</el-slider> </el-slider>
</div> </div>
</el-form-item> </el-form-item>
<!-- <el-form-item label="单位：" ></el-form-item> --> <el-form-item label="" v-if="componentForm.componentType == 'OD'">
<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">{{
@ -441,6 +445,8 @@
<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';
@ -913,7 +919,14 @@ export default {
data3: '', data3: '',
roleStatus: '', //三维权限控制 roleStatus: '', //三维权限控制
highPic: {}, //接收第一张高频图片 highPic: {}, //接收第一张高频图片
highPicList: [] //存储高频图片 highPicList: [], //存储高频图片
timer1: null,
timer2: null,
timer3: null,
timer4: null,
imgMessagetimer: null,
imgMessage: '',
imgMessageNew: false
}; };
}, },
@ -942,19 +955,11 @@ 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() {
@ -965,6 +970,11 @@ 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: {
@ -1055,16 +1065,21 @@ export default {
}, },
// 数据看板的标签点击 // 数据看板的标签点击
handleClick: function (tab, event) { handleClick: function (tab, event) {
var that = this; // console.log(tab)
if (tab._props.name == 'second') { if (tab.name == 'first') {
that.$nextTick(() => { if (this.$route.query.type == '实时视频') {
// //实时视频页面需要订阅的主题
that.$refs.dataBoardRef.getNew(); this.videoTopicSends();
// setTimeout(() => { }
// debugger } else if (tab.name == 'second') {
// this.getHistory() this.$nextTick(() => {
// }, 10000); if (this.$route.query.type == '离线视频') {
this.getHistory(); this.$refs.dataBoardRef.getNew(this.getHistory);
} else {
//数据看板需要订阅的主题
this.dataBoardTopicSends();
this.$refs.dataBoardRef.getNew();
}
}); });
} }
}, },
@ -1095,39 +1110,75 @@ 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);
setTimeout(() => { this.timer1 = null;
this.getHistory(); // this.timer1 = setTimeout(() => {
}, 5000); // this.getHistory();
// }, 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',
'hert', // 'img' + this.number
'img0', // // 'hert',
'img1', // // 'img0',
'img2', // // 'img1',
'img3', // // 'img2',
'img4', // // 'img3',
'img5', // // 'img4',
'img6', // // 'img5',
'img7', // // 'img6',
'Contorl_server' // // 'img7',
//目标数量 // // '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();
} }
setTimeout(() => { this.timer2 = null;
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) => {
@ -1140,7 +1191,8 @@ 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;
setTimeout(() => { this.timer3 = null;
this.timer3 = setTimeout(() => {
this.getAnalysisStatus(); this.getAnalysisStatus();
}, 5000); }, 5000);
} else if (res.data.data.videoAnalysisStatus == '已分析') { } else if (res.data.data.videoAnalysisStatus == '已分析') {
@ -1236,6 +1288,7 @@ 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) {
@ -1252,7 +1305,8 @@ export default {
message: '启动成功', message: '启动成功',
type: 'success' type: 'success'
}); });
setTimeout(() => { this.timer4 = null;
this.timer4 = setTimeout(() => {
this.getAnalysisStatus(); this.getAnalysisStatus();
}, 5000); }, 5000);
// if(this.videoAnalysisSta=='已分析'){ // if(this.videoAnalysisSta=='已分析'){
@ -1324,6 +1378,9 @@ 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) => {
@ -1364,7 +1421,10 @@ export default {
//分析结束传参 //分析结束传参
postTraffic() { postTraffic() {
var ip = window.location.host.split(':')[0]; var ip = window.location.host.split(':')[0];
// var ip = '172.16.1.168'; //http://172.16.1.168:5000 if (process.env.NODE_ENV === 'development') {
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);
@ -1384,74 +1444,60 @@ 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:
try { // console.log('msg接受一张高频图片', moment().format('YYYY-MM-DD HH:mm:ss'));
const utf8decoder = new TextDecoder(); this.imgMessage = message;
const u8arr = new Uint8Array(message); this.imgMessageNew = true;
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 // try {
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 // const u8arr = new Uint8Array(message);
// //console.log(msg, 'msg接受一张高频图片'); // const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg)); // const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
if (msg.rate == 'high') { // // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
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'));
if (JSON.stringify(this.highPic) === '{}') { // mapModuleDom.contentWindow.getDestination(JSON.stringify(msg));
this.highPic = msg; // //接受一张高频图片
// sessionStorage.setItem("highPic", this.highPic.pic); // if (JSON.stringify(this.highPic) === '{}') {
// sessionStorage.setItem("videoId", this.highPic.id); // this.highPic = msg;
} // // sessionStorage.setItem("highPic", this.highPic.pic);
this.highPicList = sessionStorage.getItem('highPicList') // // sessionStorage.setItem("videoId", this.highPic.id);
? JSON.parse(sessionStorage.getItem('highPicList')) // }
: []; // //更新本地视频图片，给视频列表页面展示
if (this.highPicList.length == 0) { // this.storageHighPicList(msg);
this.highPicList.push({ pic: msg.pic, videoId: msg.id }); // } else if (msg.rate == 'low') {
sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList)); // this.analysisConfigurationdata = msg;
} else { // }
let found = false; // } catch (error) {
for (let i = 0; i < this.highPicList.length; i++) { // // console.log('imgError',error)
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 = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg)); // console.log('stream' + this.number, 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);
document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg)); mapModuleDom.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 = [];
@ -1465,26 +1511,25 @@ export default {
detId.push(msgN[i]); detId.push(msgN[i]);
} }
} }
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId)); mapModuleDom.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); // console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame);
// //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.name == 'gate3触发') { // if (item.component_name == 'OD_0') {
// console.log('实时触发trigger-', item); // console.log('源头实时触发trigger-', item);
// } // }
// } // }
this.triggerListData = msgN; this.triggerListData = msgN;
@ -1493,7 +1538,6 @@ 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 = [];
@ -1505,24 +1549,27 @@ 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;
@ -1530,7 +1577,6 @@ 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 = [];
@ -1544,7 +1590,6 @@ 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的错误提示数据
@ -1554,7 +1599,6 @@ 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的错误提示数据
@ -1564,7 +1608,6 @@ 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的错误提示数据
@ -1574,20 +1617,61 @@ 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 = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
//console.log('simulator_target-目标数量', msg); //console.log('simulator_target-目标数量', msg);
document.getElementById('mapModule').contentWindow.getTargetNumber(JSON.stringify(msg)); mapModuleDom.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 == '小时') {
@ -1624,8 +1708,11 @@ export default {
//初始化unity //初始化unity
OnSceneN() { OnSceneN() {
var ip = window.location.host; var ip = window.location.host;
// this.ipData = 'http://' + ip.split(':')[0] + ':5000'; // this.ipData = 'http://' + ip.split(':')[0] + ':80';
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 == '离线视频') {
@ -1658,7 +1745,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((res) => { getComponentData({ AnalogAreaComponentId: id }).then(async(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);
@ -1701,7 +1788,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;
this.getAllSectionalData(this.$route.query.id); await 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 != '') {
@ -1724,7 +1811,10 @@ export default {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
startSectionArr.push(items.graphicName); startSectionArr.push(items.graphicName);
}); });
this.componentForm.startSection = startSectionArr; if (startSectionArr.length > 0) {
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);
@ -1746,7 +1836,10 @@ export default {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
endSectionArr.push(items.graphicName); endSectionArr.push(items.graphicName);
}); });
this.componentForm.endSection = endSectionArr; if (endSectionArr.length > 0) {
this.componentForm.endSection = [endSectionArr[0]];
this.handleCheckedendSection([endSectionArr[0]]);
}
} }
if (this.componentForm.presentationForm != '') { if (this.componentForm.presentationForm != '') {
var arr = []; var arr = [];
@ -1766,9 +1859,10 @@ export default {
} }
}); });
}, },
//修改模拟区组件、图形 //双击修改模拟区组件、图形
getSimulationAreaEdit(id, type, componentType, name, number) { getSimulationAreaEdit(id, type, componentType, name, number) {
//console.log('number', number); // console.log('执行了getSimulationAreaEdit');
// console.log('number', number);
this.numberNew = number; this.numberNew = number;
if (type == '图形') { if (type == '图形') {
this.form.id = id; this.form.id = id;
@ -1778,6 +1872,7 @@ 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;
@ -1808,7 +1903,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((res) => { getComponentData({ AnalogAreaComponentId: id }).then(async(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);
@ -1847,6 +1942,7 @@ 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 = [];
@ -1899,7 +1995,7 @@ export default {
}, },
//获取所有断面数据 //获取所有断面数据
getAllSectionalData(VideoId) { getAllSectionalData(VideoId) {
getSectionalData({ VideoId: VideoId }).then((res) => { return 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;
@ -1948,7 +2044,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);
@ -2102,7 +2198,8 @@ export default {
',' + ',' +
this.numberNew + this.numberNew +
',' + ',' +
form.Direction form.Direction +
',add'
) )
); );
} else { } else {
@ -2110,7 +2207,7 @@ export default {
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(
res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',' res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',add'
) )
); );
} }
@ -2213,14 +2310,25 @@ export default {
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',' + form.Direction form.id +
',' +
form.name +
',' +
this.startFigureName +
',' +
this.numberNew +
',' +
form.Direction +
',edit'
) )
); );
} else { } else {
document document
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',') JSON.stringify(
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',edit'
)
); );
} }
@ -2236,7 +2344,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;
@ -2458,9 +2566,13 @@ 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) {
@ -2479,6 +2591,10 @@ 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) {
@ -2541,6 +2657,18 @@ 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 Normal file
View File

File diff suppressed because it is too large Load Diff

1416
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:5000/api/', target: 'http://172.16.1.168:80/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,