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

44
public/VideoWeb/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@ -8,12 +9,14 @@
<link rel="stylesheet" href="TemplateData/style.css"> <link rel="stylesheet" href="TemplateData/style.css">
</head> </head>
<style> <style>
body,html{ body,
html {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>
<body> <body>
<div id="unity-container" style="height: 100%;" class="unity-desktop"> <div id="unity-container" style="height: 100%;" class="unity-desktop">
<canvas id="unity-canvas" width=1600 height=900></canvas> <canvas id="unity-canvas" width=1600 height=900></canvas>
@ -49,8 +52,11 @@
// user. // user.
function unityShowBanner(msg, type) { function unityShowBanner(msg, type) {
function updateBannerVisibility() { function updateBannerVisibility() {
if (warningBanner) {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
} }
}
if (warningBanner) {
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = msg; div.innerHTML = msg;
warningBanner.appendChild(div); warningBanner.appendChild(div);
@ -62,6 +68,7 @@
updateBannerVisibility(); updateBannerVisibility();
}, 5000); }, 5000);
} }
}
updateBannerVisibility(); updateBannerVisibility();
} }
@ -92,14 +99,18 @@
meta.name = 'viewport'; meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'; meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta); document.getElementsByTagName('head')[0].appendChild(meta);
if (container) {
container.className = "unity-mobile"; container.className = "unity-mobile";
}
// To lower canvas resolution on mobile devices to gain some // 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 {
@ -110,33 +121,43 @@
// canvas.style.width = window.innerWidth + 'px'; // canvas.style.width = window.innerWidth + 'px';
// canvas.style.height = window.innerHeight + 'px'; // canvas.style.height = window.innerHeight + 'px';
} }
if (loadingBar) {
loadingBar.style.display = "block"; loadingBar.style.display = "block";
}
var unity; var unity;
var script = document.createElement("script"); var script = document.createElement("script");
script.src = loaderUrl; script.src = loaderUrl;
script.onload = () => { script.onload = () => {
if (canvas) {
createUnityInstance(canvas, config, (progress) => { createUnityInstance(canvas, config, (progress) => {
if (progressBarFull) {
progressBarFull.style.width = 100 * progress + "%"; progressBarFull.style.width = 100 * progress + "%";
if (progressBarFull.style.width == 90 + "%") { if (progressBarFull.style.width == 90 + "%") {
if (black) {
black.style.display = "block"; black.style.display = "block";
} }
}
}
}).then((unityInstance) => { }).then((unityInstance) => {
unity = unityInstance unity = unityInstance
if (loadingBar) {
loadingBar.style.display = "none"; loadingBar.style.display = "none";
}
// fullscreenButton.onclick = () => { // fullscreenButton.onclick = () => {
// unityInstance.SetFullscreen(1); // unityInstance.SetFullscreen(1);
// }; // };
}).catch((message) => { }).catch((message) => {
alert(message); alert('createUnityInstance' + message);
}); });
}
}; };
//unity初始化 //unity初始化
function OnSceneLoaded() { function OnSceneLoaded() {
if (black) {
black.style.display = "none"; black.style.display = "none";
}
window.parent.OnScene(); window.parent.OnScene();
} }
@ -188,6 +209,10 @@
// 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)
@ -310,18 +335,19 @@
// window.parent.getZhuanFaMQTT(data,data2,data3); // window.parent.getZhuanFaMQTT(data,data2,data3);
} }
} }
function AddMonqjktx_Error(data) { function AddMonqjktx_Error(data) {
console.log("AddMonqjktx_Error", data) console.log("AddMonqjktx_Error", data)
window.parent.AddMonqjktx_Error(data); window.parent.AddMonqjktx_Error(data);
} }
document.body.appendChild(script); document.body.appendChild(script);
</script> </script>
<style> <style>
#unity-container.unity-desktop::-webkit-scrollbar { #unity-container.unity-desktop::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none;
/* Chrome Safari */
} }
</style> </style>
</body> </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

21
public/analysisWeb/index.html
View File

@ -49,11 +49,15 @@
// user. // user.
function unityShowBanner(msg, type) { function unityShowBanner(msg, type) {
function updateBannerVisibility() { function updateBannerVisibility() {
if (warningBanner) {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
} }
}
if (warningBanner) {
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = msg; div.innerHTML = msg;
warningBanner.appendChild(div); warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;'; 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;';
@ -62,6 +66,7 @@
updateBannerVisibility(); updateBannerVisibility();
}, 5000); }, 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 = () => {
if (canvas) {
createUnityInstance(canvas, config, (progress) => { createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%"; progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => { }).then((unityInstance) => {
unityInstanceA = unityInstance unityInstanceA = unityInstance
if (loadingBar) {
loadingBar.style.display = "none"; loadingBar.style.display = "none";
}
fullscreenButton.onclick = () => { fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1); unityInstance.SetFullscreen(1);
}; };
}).catch((message) => { }).catch((message) => {
alert(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));
} }

46
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,37 +10,46 @@
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>
@ -48,14 +57,15 @@
<script> <script>
var ip = window.location.host; var ip = window.location.host;
if (flvjs.isSupported()) { if (flvjs.isSupported()) {
console.log(getParam('src'),"getParam('src')"); // console.log("getParam('src')-", getParam('src'));
// console.log("getSrcParam('src')-", getSrcParam());
var videoElement = document.getElementById('videoElement'); var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({ var flvPlayer = flvjs.createPlayer({
type: 'flv', type: 'flv',
isLive: true, isLive: true,
url: getNewurl(), //新逻辑
// url: 'ws://172.16.1.168:12309/rtsp/1/a/?url=' + getParam('src').replace(/\s+/g, '') // url: 'ws://172.16.1.168:12309/rtsp/1/a/?url=' + getParam('src').replace(/\s+/g, '')
// url:getParam('src') // url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
}); });
flvPlayer.attachMediaElement(videoElement); flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); flvPlayer.load();
@ -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

32
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
}, },
@ -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">

166
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 = [];
// 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
}); });
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
});
});
}
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>

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

@ -13,10 +13,7 @@
margin-right: 8px; margin-right: 8px;
" "
></span> ></span>
<span <span style="font-size: 18px">{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span>
style="font-size: 18px"
>{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span
>
</div> </div>
</div> </div>
<div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div> <div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
@ -24,27 +21,28 @@
</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: { componentName: {
type: String, type: String
}, },
chartName: { chartName: {
type: String, type: String
}, },
typeValue: { typeValue: {
type: Object, type: Object
}, },
status: { status: {
type: String, type: String
}, }
}, },
data() { data() {
return {}; return {};
@ -52,16 +50,22 @@ export default {
created() {}, created() {},
methods: { methods: {
drawPie(newVal) { drawPie(newVal) {
// var legend = [];
if (newVal && newVal.type_data && newVal.type_data.length > 0) { if (newVal && newVal.type_data && newVal.type_data.length > 0) {
var legend = newVal.type_data.map((ele) => { // var legend = newVal.type_data.map((ele) => {
return ele.name; // return ele.name;
}); // });
var seriesData = []; var seriesData = [];
newVal.type_data.forEach((ele) => { newVal.type_data.forEach((ele) => {
// console.log(JSON.stringify(ele))
if (ele.quantity != 0) {
seriesData.push({ seriesData.push({
name: ele.name, name: getNameFromTargetType(ele.name),
value: ele.quantity, value: ele.quantity
}); });
// legend.push(ele.name)
}
}); });
this.drawPie(); this.drawPie();
} }
@ -70,22 +74,22 @@ export default {
myChart = this.$echarts.init(this.$refs.pieChart); myChart = this.$echarts.init(this.$refs.pieChart);
} }
var color = [ var color = [
"#0CD2E6", '#0CD2E6',
"#3751E6", '#3751E6',
"#FFC722", '#FFC722',
"#00FFFF", '#00FFFF',
"#00FF80", '#00FF80',
"#FFEA00", '#FFEA00',
"#FF7300", '#FF7300',
"#9500B3", '#9500B3',
"#3377FF", '#3377FF',
"#5087EC", '#5087EC',
"#68BBC4", '#68BBC4',
"#58A55C", '#58A55C',
"#F2BD42", '#F2BD42',
"#EE752F", '#EE752F',
"#D95040", '#D95040',
"#14CAFB" '#14CAFB'
]; ];
let option = { let option = {
// title: { // title: {
@ -99,58 +103,60 @@ export default {
animation: false, animation: false,
legend: { legend: {
top: 20, top: 20,
right: "center", right: 10,
bottom: 20,
orient: 'vertical',
textStyle: {}, textStyle: {},
data: legend, // data: legend
}, },
tooltip: {}, tooltip: {},
series: [ series: [
{ {
type: "pie", type: 'pie',
center: ["50%", "55%"], center: ['30%', '55%'],
radius: "70%", radius: '70%',
label: { label: {
normal: { normal: {
show: false, show: false
}, }
}, },
labelLine: { labelLine: {
show: false, show: false,
length: 0, length: 0,
length2: 0, length2: 0
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: "inside", position: 'inside',
formatter: "{value|{c}}", formatter: '{value|{c}}',
rich: { rich: {
value: { value: {
fontSize: 20, fontSize: 20,
color: "#ffffff", color: '#ffffff'
}
}
}
}, },
}, data: seriesData
}, }
}, ]
data: seriesData,
},
],
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
// this.$nextTick(() => { // this.$nextTick(() => {
// myChart.setOption(option) // myChart.setOption(option)
// myChart.resize(); // myChart.resize();
// }) // })
}, }
}, },
mounted() {}, mounted() {},
watch: { watch: {
// 监听单个的数据 // 监听单个的数据
}, }
}; };
</script> </script>
<style scoped> <style scoped>

92
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: '',
@ -194,11 +240,13 @@ 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;
} }

149
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) {
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
@ -177,11 +280,13 @@ 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;
} }

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

@ -10,9 +10,7 @@ export default {
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 = [];
if (odData && odData.length > 0) {
for (let i = 0; i < odData.length; i++) { for (let i = 0; i < odData.length; i++) {
let item = odData[i].data let item = odData[i].data;
if (item && item.length > 0) {
for (let j = 0; j < item.length; j++) { for (let j = 0; j < item.length; j++) {
start.push(item[j].start) 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); myChart.setOption(option);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
}
// this.$nextTick(() => { // this.$nextTick(() => {
// myChart.setOption(option) // myChart.setOption(option)
// myChart.resize(); // myChart.resize();
@ -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>

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

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

233
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,41 +110,64 @@ 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
if (firstLevel && firstLevel.length > 0) {
for (let i = 0; i < firstLevel.length; i++) {
const item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => { const valueList = seriesArr.map((arr) => {
let t = arr[i].value; if (arr) {
if (arr[i].quantity || arr[i].quantity === 0) { let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity; t = arr[i].quantity;
} }
return t; return t;
}
return 0;
}); });
transformedData.push({ transformedData.push({
name: item.name, name: getNameFromTargetType(item.name),
value: valueList value: valueList
}); });
} }
} }
}
}
let totalCountList = 0; let totalCountList = 0;
if (transformedData.length > 0 && transformedData[0].value) { if (transformedData.length > 0 && transformedData[0].value) {
totalCountList = transformedData[0].value.map((_, i) => { totalCountList = transformedData[0].value.map((_, i) => {
@ -119,107 +179,130 @@ 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 item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => { const valueList = seriesArr.map((arr) => {
let t = arr[i].value; if (arr) {
if (arr[i].quantity || arr[i].quantity === 0) { let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity; t = arr[i].quantity;
} }
return t; return t;
}
return 0;
}); });
transformedData.push({ transformedData.push({
name: item.name, name: getNameFromTargetType(item.name),
value: valueList value: valueList
}); });
} }
} }
}
}
// console.log('transformedData-1',transformedData) // console.log('transformedData-1',transformedData)
const totalCountList = transformedData[0].value.map((_, i) => { let totalCountList = 0;
if (transformedData.length > 0 && transformedData[0].value) {
totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0); 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 item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => { const valueList = seriesArr.map((arr) => {
let t = arr[i].value; if (arr) {
if (arr[i].quantity || arr[i].quantity === 0) { let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity; t = arr[i].quantity;
} }
return t; return t;
}
return 0;
}); });
transformedData.push({ transformedData.push({
name: item.name, name: getNameFromTargetType(item.name),
value: valueList value: valueList
}); });
} }
} }
}
}
// console.log('固定间隔-类型-transformedData-1', transformedData); // console.log('固定间隔-类型-transformedData-1', transformedData);
let totalCountList = 0; let totalCountList = 0;
@ -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
}; };
if (myChart) {
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', () => { window.onresize = () => {
myChart.resize(); 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(() => {
that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef)); this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
if (this.chart == null) { if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
} }
that.$nextTick(() => {
that.initEcharts(); that.initEcharts();
}); });
}, 300); }, 300);

50
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,6 +218,7 @@ export default {
} }
] ]
}; };
if (myChart) {
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
@ -192,6 +227,7 @@ export default {
myChart.resize(); myChart.resize();
}); });
} }
}
}, },
mounted() { mounted() {
let that = this; let that = this;
@ -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(() => {

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

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

89
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,6 +161,15 @@ export default {
// } // }
} }
let myChart = this.chart; let myChart = this.chart;
let startName = [],
endName = [];
if (this.startName) {
startName = this.startName.split(',');
}
if (this.endName) {
endName = this.endName.split(',');
}
if (dataList) {
let option = { let option = {
dataZoom: [ dataZoom: [
{ {
@ -137,7 +193,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.startName.split(','), data: startName,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: '#000'
@ -154,7 +210,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: this.endName.split(','), data: endName,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: '#000'
@ -200,11 +256,14 @@ export default {
} }
] ]
}; };
if (myChart) {
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}); });
} }
}
}
}, },
mounted() { mounted() {
let that = this; let that = this;
@ -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>

21
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 : ' - '
@ -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,7 +529,6 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.spacialCard { .spacialCard {
width: 150px; width: 150px;
margin-bottom: 20px; margin-bottom: 20px;

89
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`,
}; };

33
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;
mqtt.MySub(() => {
client.subscribe(currentTopics, { client.subscribe(currentTopics, {
qos: 0 qos: 0
}, (err) => { }, (err) => {
if (!err) { if (!err) {
console.log("订阅成功1"); console.log("订阅成功1", topic);
// setTimeout(function() { console.log("订阅成功1-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
console.log("订阅成功1-fromName", fromName);
console.log("订阅成功1-number", number);
client.publish('msg_stream', JSON.stringify({ client.publish('msg_stream', JSON.stringify({
"msg_flag": parseInt(number) "msg_flag": parseInt(number)
})) }))
// if(number!= -1 &&number!= '001' ){
// client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":videoid}))
// }
} else { } else {
console.log('消息订阅失败！') 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)

68
src/utils/mqttConfig.js
View File

@ -1,7 +1,12 @@
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 {
@ -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 {
host,
port,
endpoint,
...options
} = this.connect;
console.log("this.connect.host", this.connect.host) 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,12 +67,16 @@ class mqttHandle {
// } // }
// }) // })
// } // }
if (this.mqttClient == undefined) if (this.mqttClient == undefined) {
{
this.mqttClient = mqtt.connect(connectUrl, options); this.mqttClient = mqtt.connect(connectUrl, options);
this.mqttClient.on("connect", () => { this.mqttClient.on("connect", () => {
console.log("Connection succeeded!"); console.log("Connection succeeded!");
onConnected(); // 如果是初始连接
if (this.initialConnection) {
this.initialConnection = false;
this.onConnected = onConnectedFun;
}
this.onConnected()
// this._client.subscribe('img'+this.number, { qos: 0 }); // this._client.subscribe('img'+this.number, { qos: 0 });
// this._client.subscribe('stream'+this.number, { qos: 0 }); // this._client.subscribe('stream'+this.number, { qos: 0 });
// this._client.subscribe('trajectory'+this.number, { qos: 0 }); // this._client.subscribe('trajectory'+this.number, { qos: 0 });
@ -66,8 +87,10 @@ class mqttHandle {
// this._client.subscribe('detection0', { qos: 0 }); // this._client.subscribe('detection0', { qos: 0 });
}); });
this.mqttClient.on('reconnect', (error) => { this.mqttClient.on('reconnect', (error) => {
console.log('正在重连') console.log('正在重连-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'))
}) })
this.mqttClient.on("error", (error) => { this.mqttClient.on("error", (error) => {
console.log("Connection failed"); console.log("Connection failed");
}); });
@ -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 ''
}

47
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 == '离线视频') {
@ -441,6 +448,9 @@ export default {
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;
} }

111
src/views/StateOperation.vue
View File

@ -20,8 +20,9 @@
<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>
<el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item> <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item> <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item> <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
@ -49,7 +50,6 @@
</el-table-column> </el-table-column>
</el-table> --> </el-table> -->
<h1 class="mar-top20">系统网络状态</h1> <h1 class="mar-top20">系统网络状态</h1>
<el-form :model="networkStatus" label-position="left" label-width="200px" style="width: 70%"> <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.internetAccess }}</el-form-item>
@ -61,29 +61,19 @@
</el-form> </el-form>
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%"> <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
<el-table-column prop="connect" label="连接"> <el-table-column prop="connect" label="连接"> </el-table-column>
</el-table-column> <el-table-column prop="IP" label="IP地址"> </el-table-column>
<el-table-column prop="IP" label="IP地址">
</el-table-column>
<el-table-column prop="acceptor" label="接受"> <el-table-column prop="acceptor" label="接受">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.occupancy }}K </template>
{{ scope.row.occupancy }}K
</template>
</el-table-column> </el-table-column>
<el-table-column prop="totalReceived" label="收到的总数"> <el-table-column prop="totalReceived" label="收到的总数">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.total }}GB </template>
{{ scope.row.total }}GB
</template>
</el-table-column> </el-table-column>
<el-table-column prop="transmission" label="传输"> <el-table-column prop="transmission" label="传输">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.total }}Kb/s </template>
{{ scope.row.total }}Kb/s
</template>
</el-table-column> </el-table-column>
<el-table-column prop="transmissionTotal" label="传输的总数"> <el-table-column prop="transmissionTotal" label="传输的总数">
<template slot-scope="scope"> <template slot-scope="scope"> {{ scope.row.total }}MB </template>
{{ scope.row.total }}MB
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -99,7 +89,7 @@ export default {
version: '', version: '',
currentTime: '', currentTime: '',
startTime: '', startTime: '',
runTime: '', runTime: ''
}, },
performance: { performance: {
runTime: '', runTime: '',
@ -112,7 +102,7 @@ export default {
memoryUsage: '', memoryUsage: '',
totalMemory: '', totalMemory: '',
virtualMemoryUsed: '', virtualMemoryUsed: '',
totalVirtualMemory: '', totalVirtualMemory: ''
}, },
mountingPointTable: [ mountingPointTable: [
// { // {
@ -128,9 +118,9 @@ export default {
DNS: '', DNS: '',
VPNvisit: '', VPNvisit: '',
serverVPN: '', serverVPN: '',
serverVPNOpen: '', serverVPNOpen: ''
}, },
networkStatus: [ // networkStatus: [
// { // {
// connect: '2016-05-02', // connect: '2016-05-02',
// IP: '王小虎', // IP: '王小虎',
@ -139,71 +129,74 @@ export default {
// transmission: '上海市普陀区金沙江路 1518 弄', // transmission: '上海市普陀区金沙江路 1518 弄',
// transmissionTotal: '上海市普陀区金沙江路 1518 弄', // transmissionTotal: '上海市普陀区金沙江路 1518 弄',
// }, // },
] // ]
} messageTimer: null
};
}, },
created() { created() {
this.createMqtt() this.createMqtt();
// setTimeout(() => { // setTimeout(() => {
// this.createMqtt() // this.createMqtt()
// }, 3000); // }, 3000);
}, },
mounted() { mounted() {
this.publishClient();
window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新 this.messageTimer = setInterval(() => {
this.publishClient() //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
}, 1000 * 5 ) this.publishClient();
}, 1000 * 5);
}, },
methods: { methods: {
/** 创建mqtt */ /** 创建mqtt */
createMqtt() { createMqtt() {
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"})); // window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
//创建链接，接收数据 //创建链接，接收数据
var topicSends = ['Contorl_server']; var topicSends = ['Contorl_server'];
window.PubScribe(topicSends, -1, this.realInfo); window.PubScribe(topicSends, -1, this.realInfo);
}, },
publishClient() { publishClient() {
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"})); window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
}, },
/** 实时数据分类 */ /** 实时数据分类 */
realInfo(topic, message) { realInfo(topic, message) {
// console.log("topic",topic) // console.log("topic",topic)
switch (topic) { switch (topic) {
case "Contorl_server": case 'Contorl_server':
try { try {
// console.log("message",message) // console.log("message",message)
const utf8decoder = new TextDecoder() 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的错误提示数据
// console.log("msg",msg) // console.log("msg",msg)
this.runningState.currentTime = msg.now_time this.runningState.currentTime = msg.now_time;
this.runningState.startTime = msg.starttime this.runningState.startTime = msg.starttime;
this.runningState.runTime = msg.uptime this.runningState.runTime = msg.uptime;
//平均Cpu利用率 //平均Cpu利用率
this.performance.averageCpuUtilization = msg.cpu_Average+'%' this.performance.averageCpuUtilization = msg.cpu_Average + '%';
this.performance.cpuUtilization = msg.cpu_Every this.performance.cpuUtilization = msg.cpu_Every;
this.performance.cpuTemperature = msg.cpu_Temperature+"°C" this.performance.cpuTemperature = msg.cpu_Temperature + '°C';
this.performance.cpuName = msg.cpu_Name this.performance.cpuName = msg.cpu_Name;
this.performance.gpuUtilization = msg.gpu_Average+'%' this.performance.gpuUtilization = msg.gpu_Average + '%';
this.performance.gpuTemperature = msg.gpu_Temperature+"°C" this.performance.gpuTemperature = msg.gpu_Temperature + '°C';
var newmemoryUsed = msg.memory_used/1024/1024/1024 var newmemoryUsed = msg.memory_used / 1024 / 1024 / 1024;
this.performance.memoryUsage = msg.memory_percent+'%'+' | '+ newmemoryUsed.toFixed(2)+'GB' this.performance.memoryUsage = msg.memory_percent + '%' + ' | ' + newmemoryUsed.toFixed(2) + 'GB';
var totalMemoryN = msg.memory_total/1024/1024/1024 var totalMemoryN = msg.memory_total / 1024 / 1024 / 1024;
this.performance.totalMemory = totalMemoryN.toFixed(2)+'GB' this.performance.totalMemory = totalMemoryN.toFixed(2) + 'GB';
var newswapUsed = msg.swap_used/1024/1024/1024 var newswapUsed = msg.swap_used / 1024 / 1024 / 1024;
this.performance.virtualMemoryUsed = msg.swap_percent+'%' +' | '+ newswapUsed.toFixed(2)+'GB' this.performance.virtualMemoryUsed = msg.swap_percent + '%' + ' | ' + newswapUsed.toFixed(2) + 'GB';
var totalVirtualMemoryN = msg.swap_total/1024/1024/1024 var totalVirtualMemoryN = msg.swap_total / 1024 / 1024 / 1024;
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2)+'GB' this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2) + 'GB';
} catch (error) { } catch (error) {}
}
break; break;
} }
}
}, },
beforeDestroy() {
clearInterval(this.messageTimer);
this.messageTimer = null;
} }
} };
</script> </script>
<style scoped> <style scoped>

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

File diff suppressed because it is too large Load Diff

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

@ -1,16 +1,14 @@
<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>
<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>
@ -27,7 +25,7 @@
</template> </template>
<script> <script>
import mqtt from "mqtt"; // mqtt协议 import mqtt from 'mqtt'; // mqtt协议
export default { export default {
data() { data() {
@ -46,28 +44,29 @@ export default {
version5: '不受支持的', version5: '不受支持的',
version6: '不受支持的', version6: '不受支持的',
version7: '不受支持的', version7: '不受支持的',
version8: '不受支持的', version8: '不受支持的'
}, },
showUpdateCertificate: false, showUpdateCertificate: false
} };
}, },
created() { created() {
this.testMqtt() this.testMqtt();
}, },
methods: { methods: {
// 测试：mqtt测试 // 测试：mqtt测试
testMqtt() { testMqtt() {
this.getDataByMqtt() this.getDataByMqtt();
}, },
// mqtt订阅（独立） // mqtt订阅（独立）
getDataByMqtt(url, topic, cIdNum) { getDataByMqtt(url, topic, cIdNum) {
const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0]; var ip = window.location.host.split(':')[0];
console.log("ip",ip) console.log('ip', ip);
const host = `ws://${ip}:10087`; let host = `ws://${ip}:10087`;
if (process.env.NODE_ENV === 'development') {
host = 'ws://172.16.1.168:10087/';
}
// const host = 'ws://172.16.1.168:10087/'; // const host = 'ws://172.16.1.168:10087/';
const options = { const options = {
@ -80,18 +79,18 @@ export default {
username: 'admin', // 用户名（可选） username: 'admin', // 用户名（可选）
password: '123456', // 密码（可选） password: '123456', // 密码（可选）
clientId: clientId, // 客户端ID，默认随机生成 clientId: clientId, // 客户端ID，默认随机生成
protocolId: "MQTT", protocolId: 'MQTT',
protocolVersion: 4, protocolVersion: 4,
clean: true, // false在离线时接收QoS1和2的消息 clean: true, // false在离线时接收QoS1和2的消息
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒 reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间 connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
will: { will: {
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息） // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
topic: "img1", // 要发布的主题 topic: 'img1', // 要发布的主题
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息 payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次 qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
retain: false, // 保留标志 retain: false // 保留标志
}, }
}; };
if (this.mqttClient == undefined) { if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); // 连接 this.mqttClient = mqtt.connect(host, options); // 连接
@ -99,16 +98,16 @@ export default {
// const client = mqtt.connect(host) // 连接 // const client = mqtt.connect(host) // 连接
// 错误回调 // 错误回调
// console.log("this.mqttClient", this.mqttClient) // console.log("this.mqttClient", this.mqttClient)
this.mqttClient.on("error", (err) => { this.mqttClient.on('error', (err) => {
console.log("[MQTT-TEST] 连接错误：", err); console.log('[MQTT-TEST] 连接错误：', err);
this.mqttClient.end(); this.mqttClient.end();
}); });
// 重连回调 // 重连回调
this.mqttClient.on("reconnect", (reconnect) => { this.mqttClient.on('reconnect', (reconnect) => {
// console.log("[MQTT-TEST] 重连中……", reconnect); // console.log("[MQTT-TEST] 重连中……", reconnect);
}); });
// 连接回调 // 连接回调
this.mqttClient.on("connect", (connect) => { this.mqttClient.on('connect', (connect) => {
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect); // console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
// 订阅 // 订阅
this.mqttClient.subscribe('img0', { qos: 0 }); this.mqttClient.subscribe('img0', { qos: 0 });
@ -131,175 +130,172 @@ export default {
}); });
// 接收回调 // 接收回调
this.mqttClient.on("message", (topic, message, packet) => { this.mqttClient.on('message', (topic, message, packet) => {
if (topic.indexOf("img0") != -1) { if (topic.indexOf('img0') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img1") != -1) { } else if (topic.indexOf('img1') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
// console.log("msg", msg) //msg为转换后的JSON数据 // console.log("msg", msg) //msg为转换后的JSON数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img2") != -1) { } else if (topic.indexOf('img2') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img3") != -1) { } else if (topic.indexOf('img3') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img4") != -1) { } else if (topic.indexOf('img4') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img5") != -1) { } else if (topic.indexOf('img5') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img6") != -1) { } else if (topic.indexOf('img6') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
}else if (topic.indexOf("img7") != -1) { } else if (topic.indexOf('img7') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg", msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl", imageUrl) console.log('imageUrl', imageUrl);
} }
}else if (topic.indexOf("stream0") != -1) { } else if (topic.indexOf('stream0') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf("stream1") != -1) { } else if (topic.indexOf('stream1') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf("stream2") != -1) { } else if (topic.indexOf('stream2') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf("stream3") != -1) { } else if (topic.indexOf('stream3') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf("stream4") != -1) { } else if (topic.indexOf('stream4') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} else if (topic.indexOf("stream5") != -1) { } else if (topic.indexOf('stream5') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
}else if (topic.indexOf("stream6") != -1) { } else if (topic.indexOf('stream6') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
}else if (topic.indexOf("stream7") != -1) { } else if (topic.indexOf('stream7') != -1) {
const utf8decoder = new TextDecoder() 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.getData(JSON.stringify(msg)) document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} }
}); });
} }
},
} }
} }
};
</script> </script>
<style> <style>

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

File diff suppressed because it is too large Load Diff

827
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;
getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
.then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
//console.log(res.data.data, '组件的数据'); //console.log(res.data.data, '组件的数据');
this.componentList = res.data.data; this.componentList = res.data.data;
this.siftData(); 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) { // this.acticveName.push(val.analogAreaComponentId);
item.cycleTimeData = val.cycleTimeData;
}
}
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));
}
//这里逻辑不知道为啥这样处理time，用的原逻辑
if (this.$route.query.type == '离线视频') {
var timeNew = nItem.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
nItem.time = key;
} else {
nItem.time = nItem.time.split('.')[0];
}
if (this.$route.query.type == '离线视频') {
if (
cItem[updateKey].length == 0 ||
(cItem[updateKey].length > 0 && nItem.time != cItem[updateKey][0].time)
) {
this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
} }
} else { } else {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;'; this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
// sections[i].style.height = '500px';
if (sectionBox[i] != undefined) {
} }
}
},
// 触发数据的类型数值 // 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 && newVal.CycleTimeData.length > 0) {
});
}
if (newVal.CycleTimeData) {
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
} }
} }
}; };

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

@ -1,6 +1,5 @@
<template> <template>
<div class="content-box"> <div class="content-box">
<div class="container"> <div class="container">
<!-- <nav> <!-- <nav>
<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link> <router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
@ -9,15 +8,14 @@
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="xx路口"> <el-tab-pane label="xx路口">
<div style="width: 60%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px"> <div style="width: 60%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px">
<img :src='imgUrl' width="100%" height="100%"/> <img :src="imgUrl" width="100%" height="100%" />
</div> </div>
<div style="width: 20%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px"> <div style="width: 20%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px">
<el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button> <el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button>
<el-button type="primary" @click="areaComponent = true">区域组件</el-button> <el-button type="primary" @click="areaComponent = true">区域组件</el-button>
<el-button type="primary" @click="indexModule = true">指标组件</el-button> <el-button type="primary" @click="indexModule = true">指标组件</el-button>
</div> </div>
<div style="width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px"> <div style="width: 20%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px"></div>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据看板">数据看板</el-tab-pane> <el-tab-pane label="数据看板">数据看板</el-tab-pane>
<el-tab-pane label="分析配置"> <el-tab-pane label="分析配置">
@ -46,14 +44,9 @@
<div style="width:30%;height:300px;display:inline-block"> <div style="width:30%;height:300px;display:inline-block">
<img :src='imgUrl5' width="100%" height="100%"/> <img :src='imgUrl5' width="100%" height="100%"/>
</div> --> </div> -->
</div> </div>
<div id="dialog" class="margin-top: 0px !important;"> <div id="dialog" class="margin-top: 0px !important;">
<el-dialog <el-dialog title="断面组件配置" width="40%" :visible.sync="dialogFormVisible">
title="断面组件配置"
width="40%"
:visible.sync="dialogFormVisible"
>
<el-form ref="form" :model="form" label-width="80px"> <el-form ref="form" :model="form" label-width="80px">
<el-form-item label="实时性"> <el-form-item label="实时性">
<el-radio-group v-model="form.resource"> <el-radio-group v-model="form.resource">
@ -66,11 +59,11 @@
</el-form-item> --> </el-form-item> -->
<el-form-item label="时间"> <el-form-item label="时间">
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%"></el-date-picker>
</el-col> </el-col>
<el-col class="line" :span="2">-</el-col> <el-col class="line" :span="2">-</el-col>
<el-col :span="11"> <el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%"></el-time-picker>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="类型"> <el-form-item label="类型">
@ -80,7 +73,6 @@
<el-option label="卡车" value="kache"></el-option> <el-option label="卡车" value="kache"></el-option>
<el-option label="非机动车" value="feji"></el-option> <el-option label="非机动车" value="feji"></el-option>
<el-option label="行人" value="xingren"></el-option> <el-option label="行人" value="xingren"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="车牌"> <el-form-item label="车牌">
@ -111,11 +103,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-dialog> </el-dialog>
<el-dialog <el-dialog title="区域组件配置" width="40%" :visible.sync="areaComponent">
title="区域组件配置"
width="40%"
:visible.sync="areaComponent"
>
<el-form ref="form" :model="areaComponentform" label-width="80px"> <el-form ref="form" :model="areaComponentform" label-width="80px">
<el-form-item label="实时性"> <el-form-item label="实时性">
<el-radio-group v-model="areaComponentform.resource"> <el-radio-group v-model="areaComponentform.resource">
@ -129,11 +117,16 @@
</el-form-item> --> </el-form-item> -->
<el-form-item label="时间"> <el-form-item label="时间">
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="areaComponentform.date1" style="width: 100%;"></el-date-picker> <el-date-picker
type="date"
placeholder="选择日期"
v-model="areaComponentform.date1"
style="width: 100%"
></el-date-picker>
</el-col> </el-col>
<el-col class="line" :span="2">-</el-col> <el-col class="line" :span="2">-</el-col>
<el-col :span="11"> <el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="areaComponentform.date2" style="width: 100%;"></el-time-picker> <el-time-picker placeholder="选择时间" v-model="areaComponentform.date2" style="width: 100%"></el-time-picker>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="类型"> <el-form-item label="类型">
@ -143,14 +136,16 @@
<el-option label="卡车" value="kache"></el-option> <el-option label="卡车" value="kache"></el-option>
<el-option label="非机动车" value="feji"></el-option> <el-option label="非机动车" value="feji"></el-option>
<el-option label="行人" value="xingren"></el-option> <el-option label="行人" value="xingren"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="车牌" v-if="areaComponentform.resource == '实时（触发）'"> <el-form-item label="车牌" v-if="areaComponentform.resource == '实时（触发）'">
<el-input v-model="areaComponentform.name"></el-input> <el-input v-model="areaComponentform.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="车道" v-if="areaComponentform.resource=='实时（触发）'||areaComponentform.resource=='实时（秒级）'"> <el-form-item
label="车道"
v-if="areaComponentform.resource == '实时（触发）' || areaComponentform.resource == '实时（秒级）'"
>
<el-input v-model="areaComponentform.name"></el-input> <el-input v-model="areaComponentform.name"></el-input>
</el-form-item> </el-form-item>
@ -212,22 +207,21 @@
</template> </template>
<script> <script>
import mqtt from 'mqtt'; // mqtt协议
import editModal from '@/views/bounced/maintenanceRemind';
import analysisConfiguration from '@/views/bounced/analysisConfiguration';
import mqtt from "mqtt"; // mqtt协议 import axios from 'axios';
import editModal from "@/views/bounced/maintenanceRemind";
import analysisConfiguration from "@/views/bounced/analysisConfiguration";
import axios from 'axios'
export default { export default {
data() { data() {
return { return {
hideBoxShow: true, //隐藏箱子按钮显示隐藏 hideBoxShow: true, //隐藏箱子按钮显示隐藏
closeStatus: null, closeStatus: null,
modelOthers: false, modelOthers: false,
componentShow: "", componentShow: '',
isShowBtn: true, //菜单按钮隐藏 isShowBtn: true, //菜单按钮隐藏
isShowBtn1: false, //菜单按钮显示 isShowBtn1: false, //菜单按钮显示
inputVal: "", inputVal: '',
dialogFormVisible: false, dialogFormVisible: false,
areaComponent: false, areaComponent: false,
indexModule: false, indexModule: false,
@ -252,7 +246,7 @@ export default {
desc: '' desc: ''
}, },
// dateTime: this.$moment(new Date()).format("LL"), // dateTime: this.$moment(new Date()).format("LL"),
nowTime: "", nowTime: '',
// weekday: this.$moment().format("dddd"), // weekday: this.$moment().format("dddd"),
ins: 0, ins: 0,
imgUrl: '', imgUrl: '',
@ -283,16 +277,16 @@ export default {
statusInfo: [ statusInfo: [
{ {
count: 15, count: 15,
name: "穿梭车在线数量", name: '穿梭车在线数量',
// icon: require("../assets/images/运行设备图标.png"), // icon: require("../assets/images/运行设备图标.png"),
color: "#01A8FC", color: '#01A8FC'
}, },
{ {
count: 26, count: 26,
name: "任务数量", name: '任务数量',
// icon: require("../assets/images/故障设备图标.png"), // icon: require("../assets/images/故障设备图标.png"),
color: "#FDA401", color: '#FDA401'
}, }
], ],
messageInfo: [], messageInfo: [],
orderList: [], orderList: [],
@ -301,12 +295,12 @@ export default {
perCent: 0, perCent: 0,
perCent1: 0, perCent1: 0,
perCent2: 0, perCent2: 0,
facToal: "", facToal: '',
wbContent: '', wbContent: '',
// wxContent:'', // wxContent:'',
inContent: '', inContent: '',
outContent: '', outContent: '',
containerDetails:"", containerDetails: '',
locdesc: '', locdesc: '',
weatherItem: {}, weatherItem: {},
loadingShow1: true, loadingShow1: true,
@ -319,16 +313,14 @@ export default {
hoistInfo: [], //提升机信息’ hoistInfo: [], //提升机信息’
hoistName: '', hoistName: '',
battaryStationInfo: [], //快换电池装置 battaryStationInfo: [], //快换电池装置
battaryStationName:"", battaryStationName: '',
conveyorInfo: [], //输送机信息 conveyorInfo: [], //输送机信息
conveyorName:"", conveyorName: ''
}; };
}, },
mounted() { mounted() {
// this.getMessage(); // this.getMessage();
// 消息提醒 // 消息提醒
// getfacKeepRecord({ type: 0 }).then((res) => { // getfacKeepRecord({ type: 0 }).then((res) => {
// this.messageInfo = this.messageInfo.concat(res.data); // this.messageInfo = this.messageInfo.concat(res.data);
// console.log(this.messageInfo, ",,qweqw"); // console.log(this.messageInfo, ",,qweqw");
@ -342,13 +334,12 @@ export default {
// this.getDeviceStatusData() // this.getDeviceStatusData()
}, },
created() { created() {
this.testMqtt() this.testMqtt();
}, },
methods: { methods: {
// 测试：mqtt测试 // 测试：mqtt测试
testMqtt() { testMqtt() {
this.getDataByMqtt() this.getDataByMqtt();
// 小车订阅 // 小车订阅
// for (let key in this.carId) { // for (let key in this.carId) {
// this.getDataByMqtt( // this.getDataByMqtt(
@ -403,13 +394,16 @@ export default {
onSubmit() {}, onSubmit() {},
//模型加载等待 //模型加载等待
loadingShow(data) { loadingShow(data) {
this.loadingShow1 = data this.loadingShow1 = data;
}, },
// mqtt订阅（独立） // mqtt订阅（独立）
getDataByMqtt(url, topic, cIdNum) { getDataByMqtt(url, topic, cIdNum) {
const clientId = "test_id_" + String(new Date().getTime()); // 用户名 const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const host = `ws://${ip}:10087`; let host = `ws://${ip}:10087`;
if (process.env.NODE_ENV === 'development') {
host = 'ws://172.16.1.168:10087/';
}
// const host = 'ws://172.16.1.168:10087/'; // const host = 'ws://172.16.1.168:10087/';
const options = { const options = {
@ -422,36 +416,36 @@ export default {
username: 'admin', // 用户名（可选） username: 'admin', // 用户名（可选）
password: '123456', // 密码（可选） password: '123456', // 密码（可选）
clientId: clientId, // 客户端ID，默认随机生成 clientId: clientId, // 客户端ID，默认随机生成
protocolId: "MQTT", protocolId: 'MQTT',
protocolVersion: 4, protocolVersion: 4,
clean: true, // false在离线时接收QoS1和2的消息 clean: true, // false在离线时接收QoS1和2的消息
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒 reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间 connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
will: { will: {
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息） // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
topic: "img1", // 要发布的主题 topic: 'img1', // 要发布的主题
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息 payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次 qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
retain: false, // 保留标志 retain: false // 保留标志
}, }
}; };
if (this.mqttClient == undefined) { if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); // 连接 this.mqttClient = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host, options); // 连接 // const client = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host) // 连接 // const client = mqtt.connect(host) // 连接
// 错误回调 // 错误回调
console.log("this.mqttClient",this.mqttClient) console.log('this.mqttClient', this.mqttClient);
this.mqttClient.on("error", (err) => { this.mqttClient.on('error', (err) => {
console.log("[MQTT-TEST] 连接错误：",err); console.log('[MQTT-TEST] 连接错误：', err);
this.mqttClient.end(); this.mqttClient.end();
}); });
// 重连回调 // 重连回调
this.mqttClient.on("reconnect", (reconnect) => { this.mqttClient.on('reconnect', (reconnect) => {
console.log("[MQTT-TEST] 重连中……",reconnect); console.log('[MQTT-TEST] 重连中……', reconnect);
}); });
// 连接回调 // 连接回调
this.mqttClient.on("connect", (connect) => { this.mqttClient.on('connect', (connect) => {
console.log("[MQTT-TEST] 已连接的客户端ID: ",connect); console.log('[MQTT-TEST] 已连接的客户端ID: ', connect);
// 订阅 // 订阅
this.mqttClient.subscribe('img0', { qos: 0 }); this.mqttClient.subscribe('img0', { qos: 0 });
this.mqttClient.subscribe('img1', { qos: 0 }); this.mqttClient.subscribe('img1', { qos: 0 });
@ -465,11 +459,10 @@ export default {
this.mqttClient.subscribe('stream3', { qos: 0 }); this.mqttClient.subscribe('stream3', { qos: 0 });
this.mqttClient.subscribe('stream4', { qos: 0 }); this.mqttClient.subscribe('stream4', { qos: 0 });
this.mqttClient.subscribe('stream5', { qos: 0 }); this.mqttClient.subscribe('stream5', { qos: 0 });
}); });
// 接收回调 // 接收回调
this.mqttClient.on("message", (topic, message, packet) => { this.mqttClient.on('message', (topic, message, packet) => {
console.log("[MQTT-TEST] 已连接的客户端ID: ",message); console.log('[MQTT-TEST] 已连接的客户端ID: ', message);
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
@ -493,162 +486,162 @@ export default {
// const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) // const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
// console.log("imageUrl",imageUrl) // console.log("imageUrl",imageUrl)
// } // }
if (topic.indexOf("img0") != -1) { if (topic.indexOf('img0') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg",msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl = 'data:image/png;base64,' + msg.pic; this.imgUrl = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img1") != -1) { } else if (topic.indexOf('img1') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg",msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl1 = 'data:image/png;base64,' + msg.pic; this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img2") != -1) { } else if (topic.indexOf('img2') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg",msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl2 = 'data:image/png;base64,' + msg.pic; this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img3") != -1) { } else if (topic.indexOf('img3') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg",msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl3 = 'data:image/png;base64,' + msg.pic; this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img4") != -1) { } else if (topic.indexOf('img4') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg",msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl4 = 'data:image/png;base64,' + msg.pic; this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} }
} else if (topic.indexOf("img5") != -1) { } else if (topic.indexOf('img5') != -1) {
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
console.log("msg",msg) //msg为转换后的JSON数据 console.log('msg', msg); //msg为转换后的JSON数据
this.imgUrl5 = 'data:image/png;base64,' + msg.pic; this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} catch { } catch {
let imageType = 'arraybuffer'; let imageType = 'arraybuffer';
const blob = new Blob([message], { type: imageType }) const blob = new Blob([message], { type: imageType });
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("imageUrl",imageUrl) console.log('imageUrl', imageUrl);
} }
}else if (topic.indexOf("stream0") != -1) { } else if (topic.indexOf('stream0') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
}else if (topic.indexOf("stream0") != -1) { } else if (topic.indexOf('stream0') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
}else if (topic.indexOf("stream1") != -1) { } else if (topic.indexOf('stream1') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
}else if (topic.indexOf("stream2") != -1) { } else if (topic.indexOf('stream2') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
}else if (topic.indexOf("stream3") != -1) { } else if (topic.indexOf('stream3') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
}else if (topic.indexOf("stream4") != -1) { } else if (topic.indexOf('stream4') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
}else if (topic.indexOf("stream5") != -1) { } else if (topic.indexOf('stream5') != -1) {
console.log( console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date(), new Date(),
new Date().getMilliseconds() new Date().getMilliseconds()
); );
} }
}); });
} }
}, },
handleSearch() { handleSearch() {
this.modelOthers = true; this.modelOthers = true;
      this.$refs.htModels.finbBox(this.inputVal); this.$refs.htModels.finbBox(this.inputVal);
      console.log(this.$refs.htModels,'asdasdasd'); console.log(this.$refs.htModels, 'asdasdasd');
this.inputVal = '' this.inputVal = '';
    }, },
handleRow(val) { handleRow(val) {
this.modelOthers = true; this.modelOthers = true;
      this.$refs.htModels.finbBox(val); this.$refs.htModels.finbBox(val);
    }, },
// 天气 // 天气
handleWather() { handleWather() {
axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{ axios({
this.weatherItem = res.data.lives[0] url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',
methods: ''
}).then((res) => {
this.weatherItem = res.data.lives[0];
console.log(this.weatherItem, 'asdsads'); console.log(this.weatherItem, 'asdsads');
}) });
}, },
Onweather(name) { Onweather(name) {
// switch (name) { // switch (name) {
@ -702,7 +695,7 @@ export default {
components: { components: {
editModal, editModal,
analysisConfiguration analysisConfiguration
}, }
}; };
</script> </script>
<style scoped> <style scoped>

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

@ -4,6 +4,13 @@
<!-- <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,18 +53,12 @@
<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="本次同步时间">{{
form.data_sync.currentSyncStatus
}}</el-descriptions-item>
<el-descriptions-item label="下次同步时间">{{
form.data_sync.nextSyncTime
}}</el-descriptions-item>
</el-descriptions> </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> -->
@ -73,9 +74,7 @@
</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> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -83,50 +82,53 @@
</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: { targetAnalysisStatusData: {
type: Object, type: Object,
default: {}, default: {}
}, }
}, },
data() { data() {
return { return {
form: { form: {
target_detection: { target_detection: {
video_id: "", video_id: '',
video_address: "", video_address: '',
encoding_format: "", encoding_format: '',
code_tate: "", code_tate: '',
frame_rate: "", frame_rate: '',
resolution_ratio: "", resolution_ratio: '',
neural_network: "", neural_network: '',
decoder_frame_rate: "", decoder_frame_rate: '',
detector_frame_rate: "", detector_frame_rate: '',
last_frame_analysis_time: "", last_frame_analysis_time: ''
}, },
traffic_analysis: { traffic_analysis: {
video_id: "", video_id: '',
analyze_frame_rate: "", analyze_frame_rate: '',
cache_capacity: "", cache_capacity: '',
cache_records_number: "", cache_records_number: '',
last_frame_analysis_time: "", last_frame_analysis_time: ''
}, },
data_sync: { data_sync: {
lastSyncTime: "", lastSyncTime: '',
currentSyncStatus: "", currentSyncStatus: '',
nextSyncTime: "", nextSyncTime: ''
}, }
}, },
showUpdateCertificate: false, showUpdateCertificate: false,
getUnityData: {}
}; };
}, },
created() {}, created() {
window.getStatus = this.getStatusFun;
},
mounted() { mounted() {
this.getData(); this.getData();
// 定时器，每天凌晨1点触发更新 // 定时器，每天凌晨1点触发更新
@ -144,6 +146,11 @@ export default {
}, timeUntilOneAMTomorrow); }, timeUntilOneAMTomorrow);
}, },
methods: { methods: {
//从unity视频获取数据
getStatusFun(jsonString) {
// console.log('jsonString', jsonString);
this.getUnityData = JSON.parse(jsonString);
},
//获取分析状态数据 //获取分析状态数据
getData() { getData() {
let videoId = this.$route.query.id; let videoId = this.$route.query.id;
@ -151,34 +158,34 @@ export default {
if (res.data.code == 200) { if (res.data.code == 200) {
// this.form = res.data.data; // this.form = res.data.data;
if (res.data.data.target_detection != null) { if (res.data.data.target_detection != null) {
this.form.target_detection = res.data.data.target_detection this.form.target_detection = res.data.data.target_detection;
} }
if (res.data.data.traffic_analysis != null) { if (res.data.data.traffic_analysis != null) {
this.form.traffic_analysis = res.data.data.traffic_analysis this.form.traffic_analysis = res.data.data.traffic_analysis;
} }
if (res.data.data.data_sync != null) { if (res.data.data.data_sync != null) {
this.form.data_sync = res.data.data.data_sync this.form.data_sync = res.data.data.data_sync;
} }
} }
}); });
}, }
}, },
watch: { watch: {
trafficAnalysisStatusData: { trafficAnalysisStatusData: {
//交通分析 //交通分析
handler: function (val) { handler: function (val) {
console.log(val, "交通分析数据"); console.log(val, '交通分析数据');
this.form.traffic_analysis = val this.form.traffic_analysis = val;
}, }
}, },
targetAnalysisStatusData: { targetAnalysisStatusData: {
//目标分析 //目标分析
handler: function (val) { handler: function (val) {
console.log(val, "目标监测数据"); console.log(val, '目标监测数据');
this.form.target_detection = val this.form.target_detection = val;
}, }
}, }
}, }
}; };
</script> </script>

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: '确定',

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

@ -42,7 +42,11 @@
<span style="margin-left: 10px">接通</span> <span style="margin-left: 10px">接通</span>
</el-col> </el-col>
</el-form-item> --> </el-form-item> -->
<!-- <p class="title">IPV4</p> --> <div style="margin-bottom: 24px">
<p class="title">dhcp4</p>
<el-switch v-model="dhcp4" active-text="开" inactive-text="关"> </el-switch>
</div>
<div v-show="!dhcp4">
<p class="title">静态地址</p> <p class="title">静态地址</p>
<el-button type="primary" @click="addRowsTableData()" style="margin-bottom: 10px" v-if="!disable">新增</el-button> <el-button type="primary" @click="addRowsTableData()" style="margin-bottom: 10px" v-if="!disable">新增</el-button>
<el-table :data="sizeForm.tableData" border style="width: 95%"> <el-table :data="sizeForm.tableData" border style="width: 95%">
@ -50,8 +54,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> --> <!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
<el-form-item :prop="'tableData.' + scope.$index + '.address'" :rules="rules.address" class="tableFormItem"> <el-form-item :prop="'tableData.' + scope.$index + '.address'" :rules="rules.address" class="tableFormItem">
<el-input v-model.trim="scope.row.address" <el-input v-model.trim="scope.row.address" placeholder="例：172.1.1.16/24" :disabled="disable" />
placeholder="例：172.1.1.16/24" :disabled="scope.$index ==0 || disable"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
@ -72,19 +75,23 @@
<el-input v-model="scope.row.term" @change="changeVal(scope.row,scope.$index)"></el-input> <el-input v-model="scope.row.term" @change="changeVal(scope.row,scope.$index)"></el-input>
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column <el-table-column fixed="right" label="操作" width="350">
fixed="right"
label="操作"
width="350"
>
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-button @click="deleteRowsTableData(scope)" v-if="scope.$index < sizeForm.tableData.length-1" type="text" size="small">删除行 <!-- <el-button @click="deleteRowsTableData(scope)" v-if="scope.$index < sizeForm.tableData.length-1" type="text" size="small">删除行
</el-button> --> </el-button> -->
<el-button @click="deleteRowsTableData(scope)" v-if="scope.$index != 0" type="text" size="small" :disabled="disable">删除行 <el-button
@click="deleteRowsTableData(scope)"
v-if="scope.$index != 0"
type="text"
size="small"
:disabled="disable"
>删除行
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
<!-- <p style="margin-top: 10px" class="title">DHCP</p> <!-- <p style="margin-top: 10px" class="title">DHCP</p>
<el-form-item label="启用："> <el-form-item label="启用：">
<el-col :span="2" style="diaplay: flex"> <el-col :span="2" style="diaplay: flex">
@ -128,6 +135,7 @@
<el-button type="primary" size="small" @click="commit()">保存</el-button> <el-button type="primary" size="small" @click="commit()">保存</el-button>
</el-col> </el-col>
</el-form-item> --> </el-form-item> -->
<div v-show="!dhcp4">
<p class="title">默认网关</p> <p class="title">默认网关</p>
<el-form-item label="默认网关：" prop="gateway4" class="formItem"> <el-form-item label="默认网关：" prop="gateway4" class="formItem">
<el-col :span="6"> <el-col :span="6">
@ -148,8 +156,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-input v-model="scope.row.to" @change="changeValT(scope.row,scope.$index)"></el-input> --> <!-- <el-input v-model="scope.row.to" @change="changeValT(scope.row,scope.$index)"></el-input> -->
<el-form-item :prop="'tableRouter.' + scope.$index + '.to'" :rules="rules.to" class="tableFormItem"> <el-form-item :prop="'tableRouter.' + scope.$index + '.to'" :rules="rules.to" class="tableFormItem">
<el-input v-model.trim="scope.row.to" <el-input v-model.trim="scope.row.to" placeholder="例：172.1.1.16/24" :disabled="disable" />
placeholder="例：172.1.1.16/24" :disabled="disable" />
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
@ -157,30 +164,34 @@
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-input v-model="scope.row.via" @change="changeValT(scope.row,scope.$index)"></el-input> --> <!-- <el-input v-model="scope.row.via" @change="changeValT(scope.row,scope.$index)"></el-input> -->
<el-form-item :prop="'tableRouter.' + scope.$index + '.via'" :rules="rules.via" class="tableFormItem"> <el-form-item :prop="'tableRouter.' + scope.$index + '.via'" :rules="rules.via" class="tableFormItem">
<el-input v-model.trim="scope.row.via" <el-input v-model.trim="scope.row.via" placeholder="例：172.1.1.16" :disabled="disable" />
placeholder="例：172.1.1.16" :disabled="disable"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="metric" label="metric"> <el-table-column prop="metric" label="metric">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-input v-model="scope.row.metric" @change="changeValT(scope.row,scope.$index)"></el-input> --> <!-- <el-input v-model="scope.row.metric" @change="changeValT(scope.row,scope.$index)"></el-input> -->
<el-form-item :prop="'tableRouter.'+ scope.$index + '.metric'" :rules="rules.metric" class="tableFormItem"> <el-form-item
<el-input v-model.trim="scope.row.metric" :prop="'tableRouter.' + scope.$index + '.metric'"
placeholder="例：100" :disabled="disable"/> :rules="rules.metric"
class="tableFormItem"
>
<el-input v-model.trim="scope.row.metric" placeholder="例：100" :disabled="disable" />
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column fixed="right" label="操作" width="350">
fixed="right"
label="操作"
width="350"
>
<!-- <template slot-scope="scope" > <!-- <template slot-scope="scope" >
<el-button @click="handleClick(scope.row)" type="primary" :disabled="scope.row.disabled" size="small">确认</el-button> <el-button @click="handleClick(scope.row)" type="primary" :disabled="scope.row.disabled" size="small">确认</el-button>
</template> --> </template> -->
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="deleteRows(scope)" v-if="scope.$index < sizeForm.tableRouter.length" type="text" size="small" :disabled="disable">删除行 <el-button
@click="deleteRows(scope)"
v-if="scope.$index < sizeForm.tableRouter.length"
type="text"
size="small"
:disabled="disable"
>删除行
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -204,30 +215,41 @@
</el-form-item> --> </el-form-item> -->
<el-button type="primary" @click="addRowsDNS()" style="margin-bottom: 10px" v-if="!disable">新增</el-button> <el-button type="primary" @click="addRowsDNS()" style="margin-bottom: 10px" v-if="!disable">新增</el-button>
<el-table :data="sizeForm.tableDataDNS" border style="width: 95%"> <el-table :data="sizeForm.tableDataDNS" border style="width: 95%">
<el-table-column prop="address" label="地址"> <el-table-column prop="address" label="地址">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> --> <!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
<el-form-item :prop="'tableDataDNS.'+ scope.$index + '.address'" :rules="rules.addressDNS" class="tableFormItem"> <el-form-item
<el-input v-model.trim="scope.row.address" :prop="'tableDataDNS.' + scope.$index + '.address'"
placeholder="例：172.1.1.16" :disabled="disable" /> :rules="rules.addressDNS"
class="tableFormItem"
>
<el-input v-model.trim="scope.row.address" placeholder="例：172.1.1.16" :disabled="disable" />
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column fixed="right" label="操作" width="350">
fixed="right"
label="操作"
width="350"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="deleteRowsDNS(scope)" v-if="scope.$index < sizeForm.tableDataDNS.length" type="text" size="small" :disabled="disable">删除行 <el-button
@click="deleteRowsDNS(scope)"
v-if="scope.$index < sizeForm.tableDataDNS.length"
type="text"
size="small"
:disabled="disable"
>删除行
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
<!-- <el-form-item > <!-- <el-form-item >
<el-col :span="6"> --> <el-col :span="6"> -->
<el-button type="primary" @click="commit(sizeForm.tableRouter,sizeForm.tableData,sizeForm.tableDataDNS,sizeForm)" style="margin-top:10px" v-if="!disable">保存</el-button> <el-button
type="primary"
@click="commit(sizeForm.tableRouter, sizeForm.tableData, sizeForm.tableDataDNS, sizeForm)"
style="margin-top: 10px"
v-if="!disable"
>保存</el-button
>
<!-- </el-col> <!-- </el-col>
</el-form-item> --> </el-form-item> -->
</div> </div>
@ -237,7 +259,6 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
let validateIPAddress = (rule, value, callback) => { let validateIPAddress = (rule, value, callback) => {
@ -257,9 +278,9 @@ export default {
if (!isCorrect) { if (!isCorrect) {
callback(new Error('请输入正确的IP地址')); callback(new Error('请输入正确的IP地址'));
} else { } else {
callback() callback();
}
} }
};
let validateIPAddressYes = (rule, value, callback) => { let validateIPAddressYes = (rule, value, callback) => {
if (value == null) { if (value == null) {
return callback(new Error('IP地址不能为空')); return callback(new Error('IP地址不能为空'));
@ -294,10 +315,9 @@ export default {
} }
} }
} }
}
} }
} }
};
let metric = (rule, value, callback) => { let metric = (rule, value, callback) => {
if (!value) { if (!value) {
return callback(new Error('输入不可以为空')); return callback(new Error('输入不可以为空'));
@ -315,23 +335,39 @@ export default {
} }
} }
}, 0); }, 0);
} };
return { return {
dhcp4: false,
columnLabel: '', //要增加的列名 columnLabel: '', //要增加的列名
columnPropIndex: 0, //列属性自增 columnPropIndex: 0, //列属性自增
columnData: [], //列标题数组 columnData: [], //列标题数组
rules: { rules: {
gateway4: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}], gateway4: [
via: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}], {
required: true,
pattern:
/^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,
message: '请输入正确的IP地址',
trigger: 'blur'
}
],
via: [
{
required: true,
pattern:
/^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,
message: '请输入正确的IP地址',
trigger: 'blur'
}
],
// via:[{ required: true, validator: validateIPAddress, trigger: "blur" }] // via:[{ required: true, validator: validateIPAddress, trigger: "blur" }]
addressDNS:[{ required: true, validator: validateIPAddress, trigger: "blur" }], addressDNS: [{ required: true, validator: validateIPAddress, trigger: 'blur' }],
address:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }], address: [{ required: true, validator: validateIPAddressYes, trigger: 'blur' }],
to:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }], to: [{ required: true, validator: validateIPAddressYes, trigger: 'blur' }],
metric:[{ required: true, validator: metric, trigger: "blur" }], metric: [{ required: true, validator: metric, trigger: 'blur' }]
}, },
optionsa: [ optionsa: [
{ {
value: '1', value: '1',
@ -417,7 +453,6 @@ export default {
// address: '', // address: '',
// }, // },
// { // {
// id:'', // id:'',
// address: '', // address: '',
// }, // },
@ -435,13 +470,13 @@ export default {
// id:'', // id:'',
// address: '', // address: '',
// } // }
], ]
}, },
options: [ options: [
{ {
value: '', value: '',
label: '' label: ''
}, }
// { // {
// value: 'wlan0', // value: 'wlan0',
// label: 'wlan0' // label: 'wlan0'
@ -503,7 +538,7 @@ export default {
// agreement: 'NO', // agreement: 'NO',
// Range: '1', // Range: '1',
id: '', id: '',
address: '192.168.50.10/24', address: '192.168.50.10/24'
// term: '永久', // term: '永久',
// disabled:true // disabled:true
}, },
@ -511,7 +546,7 @@ export default {
// agreement: 'YES', // agreement: 'YES',
// Range: '1', // Range: '1',
id: '', id: '',
address: '192.168.1.5/24', address: '192.168.1.5/24'
// term: '17小时', // term: '17小时',
// disabled:true // disabled:true
}, },
@ -519,7 +554,7 @@ export default {
// agreement: 'YES', // agreement: 'YES',
// Range: '1', // Range: '1',
id: '', id: '',
address: '192.168.1.5/24', address: '192.168.1.5/24'
// term: '17小时', // term: '17小时',
// disabled:true // disabled:true
} }
@ -529,7 +564,7 @@ export default {
// agreement: 'NO', // agreement: 'NO',
// Range: '1', // Range: '1',
id: '', id: '',
address: '192.168.50.10/24', address: '192.168.50.10/24'
// term: '永久', // term: '永久',
// disabled:true // disabled:true
}, },
@ -537,57 +572,55 @@ export default {
// agreement: 'YES', // agreement: 'YES',
// Range: '1', // Range: '1',
id: '', id: '',
address: '192.168.1.5/24', address: '192.168.1.5/24'
// term: '17小时', // term: '17小时',
// disabled:true // disabled:true
} }
], ],
tableDataPanduan: [], tableDataPanduan: [],
optionsData: 'eth0', optionsData: 'eth0',
disable:false, //权限禁用 disable: false //权限禁用
}; };
}, },
watch: { watch: {},
},
created() { created() {
this.createMqtt() this.createMqtt();
setTimeout(() => { setTimeout(() => {
this.publishClient() this.publishClient();
}, 1000 * 3); }, 1000 * 3);
}, },
mounted() { mounted() {
if (localStorage.getItem('roleName') == '系统管理员') { if (localStorage.getItem('roleName') == '系统管理员') {
this.disable = false this.disable = false;
} else { } else {
this.disable = true this.disable = true;
} }
}, },
methods: { methods: {
//点击保存 //点击保存
commit(tableRouter, tableData, tableDataDNS, sizeForm) { commit(tableRouter, tableData, tableDataDNS, sizeForm) {
console.log("tableData",tableData) console.log('tableData', tableData);
console.log("tableDataDNS",tableDataDNS) console.log('tableDataDNS', tableDataDNS);
console.log("sizeForm",sizeForm) console.log('sizeForm', sizeForm);
var tableRouterN = tableRouter.map(value => { var tableRouterN = tableRouter.map((value) => {
return value.to+','+value.via+','+value.metric return value.to + ',' + value.via + ',' + value.metric;
}) });
var tableDataN = tableData.map(item => { var tableDataN = tableData.map((item) => {
return item.address return item.address;
}) });
var tableDataDNSN = tableDataDNS.map(item => { var tableDataDNSN = tableDataDNS.map((item) => {
return item.address return item.address;
}) });
var ner = { var ner = {
type:"netplanSet", type: 'netplanSet',
ethName:sizeForm.name, ethName: sizeForm.name||'',
dhcp4: false, dhcp4: this.dhcp4,
addresses: tableDataN, //静态地址 addresses: tableDataN, //静态地址
gateway4:sizeForm.gateway4, gateway4: sizeForm.gateway4||'',
nameservers: tableDataDNSN, //DNS nameservers: tableDataDNSN, //DNS
routes: tableRouterN //静态路由 routes: tableRouterN //静态路由
} };
this.$confirm('此操作将重新设置网络, 是否继续?', '提示', { this.$confirm('此操作将重新设置网络, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -598,7 +631,7 @@ export default {
type: 'success', type: 'success',
message: '设置成功!' message: '设置成功!'
}); });
console.log("JSON.stringify(ner)",JSON.stringify(ner)) console.log('JSON.stringify(ner)', JSON.stringify(ner));
window.publish('Contorl_client', JSON.stringify(ner)); window.publish('Contorl_client', JSON.stringify(ner));
this.sizeForm = { this.sizeForm = {
name: '', name: '',
@ -625,8 +658,8 @@ export default {
speed: '', speed: '',
tableRouter: [], tableRouter: [],
tableData: [], tableData: [],
tableDataDNS: [], tableDataDNS: []
} };
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
@ -635,7 +668,7 @@ export default {
}); });
setTimeout(() => { setTimeout(() => {
loading.close(); loading.close();
this.publishClient() this.publishClient();
}, 5000); }, 5000);
}) })
.catch(() => { .catch(() => {
@ -651,13 +684,15 @@ export default {
const circle = this.sizeForm.tableRouter[0]; //取出数组中第一个对象 const circle = this.sizeForm.tableRouter[0]; //取出数组中第一个对象
if (circle) { if (circle) {
const newObj = {}; const newObj = {};
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空； for (let key in circle) {
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
newObj[key] = ''; newObj[key] = '';
} }
this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj); this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
} else { } else {
const newObj = {}; const newObj = {};
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空； for (let key in circle) {
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
newObj[key] = ''; newObj[key] = '';
} }
this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj); this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
@ -673,11 +708,14 @@ export default {
const circle = this.sizeForm.tableData[0]; //取出数组中第一个对象 const circle = this.sizeForm.tableData[0]; //取出数组中第一个对象
if (circle) { if (circle) {
const newObj = {}; const newObj = {};
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空； for (let key in circle) {
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
newObj[key] = ''; newObj[key] = '';
} }
// this.sizeForm.tableData.splice(this.sizeForm.tableData.length-1, 0, newObj); // this.sizeForm.tableData.splice(this.sizeForm.tableData.length-1, 0, newObj);
this.sizeForm.tableData.splice(this.sizeForm.tableData.length, 0, newObj); this.sizeForm.tableData.splice(this.sizeForm.tableData.length, 0, newObj);
} else {
this.sizeForm.tableData.push({ address: '' });
} }
}, },
deleteRowsTableData(scope) { deleteRowsTableData(scope) {
@ -688,13 +726,15 @@ export default {
const circle = this.sizeForm.tableDataDNS[0]; //取出数组中第一个对象 const circle = this.sizeForm.tableDataDNS[0]; //取出数组中第一个对象
if (circle) { if (circle) {
const newObj = {}; const newObj = {};
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空； for (let key in circle) {
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
newObj[key] = ''; newObj[key] = '';
} }
this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj); this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
} else { } else {
const newObj = {}; const newObj = {};
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空； for (let key in circle) {
//把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
newObj[key] = ''; newObj[key] = '';
} }
this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj); this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
@ -709,76 +749,81 @@ export default {
//创建链接，接收数据 //创建链接，接收数据
var topicSends = ['Contorl_server']; var topicSends = ['Contorl_server'];
window.PubScribe(topicSends, -1, this.realInfo); window.PubScribe(topicSends, -1, this.realInfo);
}, },
publishClient() { publishClient() {
window.publish('Contorl_client',JSON.stringify({"type":"getNet"})); window.publish('Contorl_client', JSON.stringify({ type: 'getNet' }));
}, },
/** 实时数据分类 */ /** 实时数据分类 */
realInfo(topic, message) { realInfo(topic, message) {
// console.log("topic",topic) // console.log("topic",topic)
switch (topic) { switch (topic) {
case "Contorl_server": case 'Contorl_server':
try { try {
const utf8decoder = new TextDecoder() 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的错误提示数据
if (msg.type == 'getNet') { if (msg.type == 'getNet') {
console.log("msg",msg) console.log('msg', msg);
// const netaddres = JSON.parse(msg.netaddres) // const netaddres = JSON.parse(msg.netaddres)
// console.log("netaddres",netaddres) // console.log("netaddres",netaddres)
// const netstates = JSON.parse(msg.netstates) // const netstates = JSON.parse(msg.netstates)
this.changeNetstates(msg) this.changeNetstates(msg);
}
} catch (error) {
} }
} catch (error) {}
break; break;
} }
}, },
changeNetstates(msg) { changeNetstates(msg) {
console.log("msg",msg) console.log('msg', msg);
// var optionsDataN = this.optionsData // var optionsDataN = this.optionsData
console.log(" msg.netstates[this.optionsData]",this.optionsData) console.log(' msg.netstates[this.optionsData]', this.optionsData);
console.log(' msg.netstates[this.optionsData]', msg.netstates[this.optionsData]);
console.log(' msg.netplan[this.optionsData]', msg.netplan[this.optionsData]);
if (msg.netplan[this.optionsData] != undefined) {
this.dhcp4 = msg.netplan[this.optionsData].dhcp4 || false;
}
if (msg.netstates[this.optionsData] != undefined) { if (msg.netstates[this.optionsData] != undefined) {
this.sizeForm.name = this.optionsData this.sizeForm.name = this.optionsData;
this.sizeForm.mtu = msg.netstates[this.optionsData].mtu this.sizeForm.mtu = msg.netstates[this.optionsData].mtu;
var data = msg.netaddres[this.optionsData] var data = msg.netaddres[this.optionsData];
this.sizeForm.speed = msg.netstates[this.optionsData].speed this.sizeForm.speed = msg.netstates[this.optionsData].speed;
this.tableDataPanduan = [] this.tableDataPanduan = [];
var optionN = Object.keys(msg.netplan) var optionN = Object.keys(msg.netplan);
var optionNrr = optionN.map((value, index) => { var optionNrr = optionN.map((value, index) => {
return { return {
value: value, value: value,
label: value label: value
} };
}) });
console.log("optionNrr",optionNrr) console.log('optionNrr', optionNrr);
this.options = optionNrr this.options = optionNrr;
if (msg.netstates[this.optionsData].isup == true) { if (msg.netstates[this.optionsData].isup == true) {
this.sizeForm.status='YES' this.sizeForm.status = 'YES';
} else { } else {
this.sizeForm.status='NO' this.sizeForm.status = 'NO';
} }
if (data && data.length > 0) {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i].family == 17) { if (data[i].family == 17) {
this.sizeForm.mac =data[i].address this.sizeForm.mac = data[i].address;
} else if (data[i].family == 2) { } else if (data[i].family == 2) {
this.tableDataPanduan.push(data[i]) this.tableDataPanduan.push(data[i]);
} }
} }
}
if (this.tableDataPanduan.length > 0 && msg.netplan[this.optionsData].addresses) {
if (this.tableDataPanduan.length == msg.netplan[this.optionsData].addresses.length) { if (this.tableDataPanduan.length == msg.netplan[this.optionsData].addresses.length) {
for (let i = 0; i < this.tableDataPanduan.length; i++) { for (let i = 0; i < this.tableDataPanduan.length; i++) {
for (let b = 0; b < msg.netplan[this.optionsData].addresses.length; b++) { for (let b = 0; b < msg.netplan[this.optionsData].addresses.length; b++) {
// console.log("str1",netstates.netplan.eth0.addresses[b].substring(0,netstates.netplan.eth0.addresses[b].indexOf("/"))) // console.log("str1",netstates.netplan.eth0.addresses[b].substring(0,netstates.netplan.eth0.addresses[b].indexOf("/")))
var ipos = msg.netplan[this.optionsData].addresses[b].indexOf("/");//指定开始的字符串 var ipos = msg.netplan[this.optionsData].addresses[b].indexOf('/'); //指定开始的字符串
let str1 = msg.netplan[this.optionsData].addresses[b].substring(0, ipos); let str1 = msg.netplan[this.optionsData].addresses[b].substring(0, ipos);
if (this.tableDataPanduan[i].address == str1) { if (this.tableDataPanduan[i].address == str1) {
} else { } else {
// this.$message({ // this.$message({
// message: '静态地址有误', // message: '静态地址有误',
@ -788,27 +833,40 @@ export default {
} }
} }
} }
var addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => { }
let addressesN = [];
if (msg.netplan[this.optionsData].addresses && msg.netplan[this.optionsData].addresses.length > 0) {
addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
return { return {
address: value, address: value,
id: index id: index
};
});
} }
}) this.sizeForm.tableData = addressesN;
this.sizeForm.tableData = addressesN
//获取静态路由 //获取静态路由
var dataJ = msg.netplan[this.optionsData].routes var dataJ = msg.netplan[this.optionsData].routes;
this.sizeForm.tableRouter=[] this.sizeForm.tableRouter = [];
if (dataJ && dataJ.length > 0) {
for (let r = 0; r < dataJ.length; r++) { for (let r = 0; r < dataJ.length; r++) {
this.sizeForm.tableRouter.push(dataJ[r]) this.sizeForm.tableRouter.push(dataJ[r]);
} }
this.sizeForm.gateway4 = msg.netplan[this.optionsData].gateway4 }
var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
this.sizeForm.gateway4 = msg.netplan[this.optionsData].gateway4;
let legend = [];
if (msg.netplan[this.optionsData].nameservers && msg.netplan[this.optionsData].nameservers.addresses) {
legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
return { return {
address: value, address: value,
id: index id: index
};
});
} }
})
this.sizeForm.tableDataDNS = legend this.sizeForm.tableDataDNS = legend;
console.log('从mqtt获取数据后重新整理的数据', this.sizeForm);
} else { } else {
this.sizeForm = { this.sizeForm = {
name: this.optionsData, name: this.optionsData,
@ -825,50 +883,61 @@ export default {
mac: '', mac: '',
moren: '', moren: '',
speed: '', speed: '',
} tableData: []
};
//获取静态路由 //获取静态路由
var dataJ = msg.netplan[this.optionsData].routes var dataJ = msg.netplan[this.optionsData].routes;
this.sizeForm.tableRouter=[] this.sizeForm.tableRouter = [];
if (dataJ && dataJ.length > 0) {
for (let r = 0; r < dataJ.length; r++) { for (let r = 0; r < dataJ.length; r++) {
this.sizeForm.tableRouter.push(dataJ[r]) this.sizeForm.tableRouter.push(dataJ[r]);
} }
var addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
return {
address: value,
id: index
}
})
this.sizeForm.tableData = addressesN
var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
return {
address: value,
id: index
}
})
this.sizeForm.tableDataDNS = legend
} }
let addressesN = [];
if (msg.netplan[this.optionsData].addresses && msg.netplan[this.optionsData].addresses.length > 0) {
addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
return {
address: value,
id: index
};
});
}
this.sizeForm.tableData = addressesN;
let legend = [];
if (msg.netplan[this.optionsData].nameservers && msg.netplan[this.optionsData].nameservers.addresses) {
legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
return {
address: value,
id: index
};
});
}
this.sizeForm.tableDataDNS = legend;
console.log('从mqtt获取数据后重新整理的数据2', this.sizeForm);
}
}, },
changeName(val) { changeName(val) {
console.log("val",val) console.log('val', val);
this.sizeForm.name = val this.sizeForm.name = val;
this.optionsData = val this.optionsData = val;
this.publishClient() this.publishClient();
}, },
gernerateClass(status) { gernerateClass(status) {
console.log("status",status) console.log('status', status);
if (status == 'YES') { if (status == 'YES') {
return 'status' return 'status';
} else { } else {
return 'statusNo' return 'statusNo';
} }
}, },
changeVal(val, e) { changeVal(val, e) {
this.sizeForm.tableData[e].disabled = false this.sizeForm.tableData[e].disabled = false;
}, },
changeValT(val, e) { changeValT(val, e) {
this.sizeForm.tableRouter[e].disabled = false this.sizeForm.tableRouter[e].disabled = false;
}, },
handleClick(scope, e) { handleClick(scope, e) {
console.log(scope, 'scope'); console.log(scope, 'scope');
@ -921,10 +990,16 @@ export default {
} }
} }
.status { .status {
width: 10px; height: 10px; border-radius: 50%; background: green width: 10px;
height: 10px;
border-radius: 50%;
background: green;
} }
.statusNo { .statusNo {
width: 10px; height: 10px; border-radius: 50%; background: red width: 10px;
height: 10px;
border-radius: 50%;
background: red;
} }
</style> </style>

406
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,38 +1110,74 @@ 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 = [
// 'stream' + this.number,
// 'trajectory' + this.number,
// 'detection' + this.number,
// 'trigger-' + this.$route.query.id,
// 'cycle_time-' + this.$route.query.id,
// 'cycle_statistics-' + this.$route.query.id,
// 'cycle_accumulate-' + this.$route.query.id,
// 'TargetAnalysisStatusData',
// 'TrafficAnalysisStatusData',
// 'img' + this.number
// // 'hert',
// // 'img0',
// // 'img1',
// // 'img2',
// // 'img3',
// // 'img4',
// // 'img5',
// // 'img6',
// // 'img7',
// // 'Contorl_server'
// //目标数量
// // 'simulator_target-' + this.$route.query.id
// ];
// // console.log('在test1/index视频页面number-',this.number)
// window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
//视频页面需要订阅的主题有 img，stream，trajectory，detection，TargetAnalysisStatusDataTraffic，AnalysisStatusData
//数据看板需要订阅的主题有 trigger，cycle_time，，cycle_statistics，cycle_accumulate
this.videoTopicSends();
}
this.timer2 = null;
this.timer2 = setTimeout(() => {
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
}, 5000);
},
//实时视频页面需要订阅的主题
videoTopicSends() {
this.topicSends = [ this.topicSends = [
'stream' + this.number, 'stream' + this.number,
'trajectory' + this.number, 'trajectory' + this.number,
'detection' + 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, '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',
'TrafficAnalysisStatusData',
'hert',
'img0',
'img1',
'img2',
'img3',
'img4',
'img5',
'img6',
'img7',
'Contorl_server'
//目标数量
// 'simulator_target-' + this.$route.query.id
]; ];
// console.log('在test1/index视频页面number-',this.number)
window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id); window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
}
setTimeout(() => {
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
}, 5000);
}, },
//获取视频分析，交通分析状态数据 //获取视频分析，交通分析状态数据
getAnalysisStatus() { getAnalysisStatus() {
@ -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,8 +1859,9 @@ export default {
} }
}); });
}, },
//修改模拟区组件、图形 //双击修改模拟区组件、图形
getSimulationAreaEdit(id, type, componentType, name, number) { getSimulationAreaEdit(id, type, componentType, name, number) {
// console.log('执行了getSimulationAreaEdit');
// console.log('number', number); // console.log('number', number);
this.numberNew = number; this.numberNew = number;
if (type == '图形') { if (type == '图形') {
@ -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'
)
); );
} }
@ -2461,6 +2569,10 @@ export default {
// 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

1394
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,