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

Compare commits

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

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

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

1
.env.dev
View File

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

1
.env.pro
View File

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

3
package.json
View File

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

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

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

44
public/VideoWeb/index.html
View File

@ -1,6 +1,5 @@
<!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">
@ -9,14 +8,12 @@
<link rel="stylesheet" href="TemplateData/style.css"> <link rel="stylesheet" href="TemplateData/style.css">
</head> </head>
<style> <style>
body, body,html{
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>
@ -52,11 +49,8 @@
// 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);
@ -68,7 +62,6 @@
updateBannerVisibility(); updateBannerVisibility();
}, 5000); }, 5000);
} }
}
updateBannerVisibility(); updateBannerVisibility();
} }
@ -99,18 +92,14 @@
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 {
@ -121,43 +110,33 @@
// 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('createUnityInstance' + message); alert(message);
}); });
}
}; };
//unity初始化 //unity初始化
function OnSceneLoaded(){ function OnSceneLoaded(){
if (black) {
black.style.display = "none"; black.style.display = "none";
}
window.parent.OnScene(); window.parent.OnScene();
} }
@ -209,10 +188,6 @@
// 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)
@ -335,19 +310,18 @@
// 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; display: none; /* Chrome Safari */
/* Chrome Safari */
} }
</style> </style>
</body> </body>
</html> </html>

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

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

21
public/analysisWeb/index.html
View File

@ -49,15 +49,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);
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;';
@ -66,7 +62,6 @@
updateBannerVisibility(); updateBannerVisibility();
}, 5000); }, 5000);
} }
}
updateBannerVisibility(); updateBannerVisibility();
} }
@ -103,42 +98,35 @@
// To lower canvas resolution on mobile devices to gain some // To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line: // performance, uncomment the following line:
// config.devicePixelRatio = 1; // config.devicePixelRatio = 1;
if (canvas) {
canvas.style.width = window.innerWidth + 'px'; canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px'; canvas.style.height = window.innerHeight + 'px';
}
unityShowBanner('WebGL builds are not supported on mobile devices.'); unityShowBanner('WebGL builds are not supported on mobile devices.');
} else { } else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen: // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
if (canvas) {
canvas.style.width = "100%"; canvas.style.width = "100%";
canvas.style.height = "100%"; canvas.style.height = "100%";
} }
}
if (loadingBar) {
loadingBar.style.display = "block"; loadingBar.style.display = "block";
}
var script = document.createElement("script"); var script = document.createElement("script");
var unityInstanceA var unityInstanceA
script.src = loaderUrl; script.src = loaderUrl;
script.onload = () => { script.onload = () => {
if (canvas) {
createUnityInstance(canvas, config, (progress) => { createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%"; progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => { }).then((unityInstance) => {
unityInstanceA = unityInstance unityInstanceA = unityInstance
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('createUnityInstance' + message); alert(message);
}); });
}
}; };
//unity初始化 //unity初始化
function OnSceneLoaded() { function OnSceneLoaded() {
@ -148,7 +136,6 @@
function Started() { function Started() {
window.parent.started(); window.parent.started();
} }
function getDianwei(string) { function getDianwei(string) {
unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string)); unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string));
} }

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,46 +10,37 @@
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>
@ -57,15 +48,14 @@
<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:'ws://'+ip.split(':')[0]+':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, '')
}); });
flvPlayer.attachMediaElement(videoElement); flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); flvPlayer.load();
@ -83,34 +73,6 @@
var r = location.search.substr(1).match(reg); var r = location.search.substr(1).match(reg);
if (r != null) return decodeURI(decodeURI(r[2])); if (r != null) return decodeURI(decodeURI(r[2]));
} }
function getSrcParam() {
console.log("getSrcParam('src')-", location.search);
var srcIndex = location.search.indexOf('src=');
if (srcIndex !== -1) {
var srcSubstring = location.search.substring(srcIndex + 4); // 4 是 'src=' 的长度
return decodeURIComponent(srcSubstring);
}
return null;
}
function getNewurl() {
let src = getSrcParam();
let url='ws://'+ip.split(':')[0]+':12309/rtsp';
// let url = 'ws://172.16.1.168:12309/rtsp';
// console.log('getNewurl',src)
if (src.includes("?")) {
let splitArray = src.split("?");
if (splitArray && splitArray.length > 0) {
url = url + '/2/' + splitArray[1] + '/?url=' + splitArray[0]
}
} else {
url = url + '/1/a/?url=' + src;
}
console.log('getNewurl-return', url)
return url;
}
</script> </script>
</body> </body>
</html> </html>

2
src/api/index.js
View File

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

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

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

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

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

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

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

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

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

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

@ -13,7 +13,10 @@
margin-right: 8px; margin-right: 8px;
" "
></span> ></span>
<span style="font-size: 18px">{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span> <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>
@ -21,28 +24,27 @@
</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 {};
@ -50,22 +52,16 @@ 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: getNameFromTargetType(ele.name), name: ele.name,
value: ele.quantity value: ele.quantity,
}); });
// legend.push(ele.name)
}
}); });
this.drawPie(); this.drawPie();
} }
@ -74,22 +70,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: {
@ -103,60 +99,58 @@ export default {
animation: false, animation: false,
legend: { legend: {
top: 20, top: 20,
right: 10, right: "center",
bottom: 20,
orient: 'vertical',
textStyle: {}, textStyle: {},
// data: legend data: legend,
}, },
tooltip: {}, tooltip: {},
series: [ series: [
{ {
type: 'pie', type: "pie",
center: ['30%', '55%'], center: ["50%", "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,26 +1,25 @@
<template> <template>
<!-- 区域的表格 --> <!-- 区域的表格 -->
<div class="tableContent"> <div class="tableContent">
<!-- <div class="down"> <div class="down">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="moreIcon"></span> <span class="moreIcon"></span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">查看详情</el-dropdown-item> <el-dropdown-item command="show">查看详情</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> --> </div>
<div v-if="msg" class="regionBox"> <div v-if="msg" class="regionBox">
<!-- 实时触发 --> <!-- 实时触发 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发' ">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> --> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type"> <el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -46,27 +45,14 @@
<span v-if="scope.row.occ == '1'">占用</span> <span v-if="scope.row.occ == '1'">占用</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度"> <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定时刻'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定时刻' ">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> --> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type"> <el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -90,29 +76,17 @@
<el-table-column align="center" prop="occ" label="占用状态"> <el-table-column align="center" prop="occ" label="占用状态">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.occ == '1'">占用</span> <span v-if="scope.row.occ == '1'">占用</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度"> <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
<!-- 固定间隔 --> <!-- 固定间隔 -->
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '固定间隔'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
<el-table-column align="center" label="目标类型" prop="type"> <el-table-column align="center" label="目标类型" prop="type">
<template slot-scope="scope">
{{getNameFromTargetType(scope.row.type)}}
</template>
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<span v-if="scope.row.type == 'Person'">行人</span> <span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span> <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
@ -137,34 +111,18 @@
<el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column> <el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
<el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column> <el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
<el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column> <el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
<el-table-column align="center" prop="speed" label="平均速度"> <el-table-column align="center" prop="speed" label="平均速度"></el-table-column>
<template slot-scope="scope">
{{
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.speed)
: scope.row.speed == '-1'
? '-'
: scope.row.speed
}}
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%"> <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
<el-form :model="msg" label-width="80px"> <el-form :model="msg" label-width="80px">
<el-form-item label="val1"> <el-form-item label="val1">
<el-time-select <el-time-select placeholder="起始时间" v-model="startTime"
placeholder="起始时间" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select> </el-time-select>
<el-time-select <el-time-select placeholder="结束时间" v-model="endTime"
placeholder="结束时间" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
>
</el-time-select> </el-time-select>
</el-form-item> </el-form-item>
<el-form-item label="val2"> <el-form-item label="val2">
@ -193,25 +151,21 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
import tableShow from './tableShow.vue';
export default { export default {
components: { tableShow },
name: 'tableShow', //表格组件 name: 'tableShow', //表格组件
props: { props: {
msg: { msg: {
type: Array type: Array,
// default() { // default() {
// return []; // return [];
// } // }
}, },
triggerType: { triggerType: {
type: String type: String
} },
}, },
data() { data() {
return { return {
getNameFromTargetType,
dialogVisible: false, dialogVisible: false,
startTime: '', startTime: '',
endTime: '', endTime: '',
@ -240,13 +194,11 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/deep/ .el-table{ /deep/ .el-table{
// height: 709px !important; height: 709px !important;
// overflow-y: scroll; overflow-y: scroll;
z-index: 900; z-index: 9999;
}
.el-table::-webkit-scrollbar {
width: 0 !important;
} }
.el-table::-webkit-scrollbar { width: 0 !important }
.tableContent { .tableContent {
position: relative; position: relative;
} }

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

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

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

@ -10,7 +10,9 @@ export default {
thermalChartData:[] thermalChartData:[]
}; };
}, },
created() {}, created() {
},
props: { props: {
list: { list: {
type: Array, type: Array,
@ -23,7 +25,7 @@ export default {
}, },
title: { title: {
type: String type: String
} },
// status: { // status: {
// type: String // type: String
// }, // },
@ -36,65 +38,48 @@ export default {
ODhanlde(odData) { ODhanlde(odData) {
// console.log(odData,'oddata'); // console.log(odData,'oddata');
// var odData = this.odData // var odData = this.odData
var chartData = []; var chartData = []
var start = []; var start = []
if (odData && odData.length > 0) {
for (let i = 0; i < odData.length; i++) { for (let i = 0; i < odData.length; i++) {
let item = odData[i].data; let item = odData[i].data
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]
@ -103,83 +88,81 @@ export default {
}, },
animation: false, animation: false,
grid: { grid: {
left: '3%', left: "3%",
right: '8%', right: "8%",
bottom: '8%', bottom: "8%",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: startEndStart, data: startEnd.start.split(','),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: "#000",
} },
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 40 rotate: 40,
}, },
splitArea: { splitArea: {
show: true show: true,
} },
// name: "镇街", // name: "镇街",
}, },
yAxis: { yAxis: {
type: 'category', type: "category",
data: startEndEnd, data: startEnd.end.split(','),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: "#000",
} },
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 40 rotate: 40,
}, },
splitArea: { splitArea: {
show: true show: true,
} },
// name: "", // name: "",
}, },
visualMap: { visualMap: {
min: 1, min: 1,
max: 50, max: 50,
calculable: true, calculable: true,
orient: 'horizontal', orient: "horizontal",
left: 'center', left: "center",
bottom: '1%', bottom: "1%",
text: ['50', '1'], // 文本，默认为数值文本 text: ["50", "1"], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'], //color:['#20a0ff','#D2EDFF'],
calculable: false, calculable: false,
color: ['#22DDDD', '#fec42c', '#80F1BE'] color: ["#22DDDD", "#fec42c", "#80F1BE"],
}, },
series: [ series: [
{ {
name: 'OD图', name: "OD图",
type: 'heatmap', type: "heatmap",
data: this.ODhanlde(odData), data: this.ODhanlde(odData),
label: { label: {
normal: { normal: {
show: true show: true,
} },
}, },
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(120, 0, 0, 0.5)' shadowColor: "rgba(120, 0, 0, 0.5)",
} },
} },
} },
] ],
}; };
if (myChart) {
myChart.setOption(option); 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();
@ -190,13 +173,12 @@ export default {
// if (this.list) { // if (this.list) {
// this.drawThermalChart() // this.drawThermalChart()
// } // }
this.drawThermalChart()
}, },
watch: {} watch: {
}
}; };
</script> </script>
<style scoped> <style scoped></style>
.a{
color: rgba(120, 0, 0, 0.5);
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -3,127 +3,266 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'echartsBar', name: "echartsBar", //折线图组件
props: { props: {
intersectionName: { type: Array, default: () => [] }, intersectionName: {
chatShowType: { type: String }, type: Array,
echartsRef: { type: String }, default() {
dataList: { type: Array, default: () => [] }, return [];
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: { yData: [], xData: [] }, chartData: {
yData: [],
xData: [],
}, //表格数据
seriesList: [], //类型数组
}; };
}, },
computed: { created() {},
option() {
return { methods: {
color: ['#7262FD', '#FC5A5A'], //传值对应字段返回相应字段数组
tooltip: { confine: true }, initEcharts() {
grid: { top: '5%', left: '5%', right: '5%', bottom: '0%', containLabel: true }, // if (this.dataList.length > 10) {
// this.dataList = this.dataList.slice(-10);
// }
if (this.timeMode == "实时触发") {
this.chartData.xData = [];
this.chartData.yData = [];
// debugger;
// if (this.dataList[0].type_data.length > 0) {
// for (let i = 0; i < this.dataList[0].type_data.length; i++) {
// this.chartData.yData.push(this.dataList[0].type_data[i].quantity);
// this.chartData.xData.push(this.dataList[0].type_data[i].name);
// }
// }
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
} else {
this.chartData.yData.push(this.dataList[0].type_data[j].value);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
} else if (this.timeMode == "固定时刻") {
// for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
// this.chartData.yData = [];
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
// if (this.dataList[i].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// }
// }
// }
this.chartData.xData = [];
this.chartData.yData = [];
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
} else {
this.chartData.yData.push(this.dataList[0].type_data[j].value);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
} else if (this.timeMode == "固定间隔") {
// for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
// this.chartData.yData = [];
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
// if (this.dataList[i].type_data[j].value == undefined) {
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// } else {
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
// }
// }
// }
this.chartData.xData = [];
this.chartData.yData = [];
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
} else {
this.chartData.yData.push(this.dataList[0].type_data[j].value);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
}
let myChart = this.chart;
let option = {
color: ["#7262FD", "#FC5A5A"],
tooltip: {
confine: true,
},
grid: {
top: "30%",
left: "5%",
right: "5%",
bottom: "8%",
containLabel: true,
},
xAxis: { xAxis: {
type: 'category', type: "category",
data: this.chartData.xData, data: this.chartData.xData,
axisLine: { lineStyle: { color: '#000' } }, axisLine: {
axisLabel: { interval: 0, fontSize: 12, color: '#000', rotate: 30 }, lineStyle: {
axisTick: { show: false }, color: "#000",
},
},
axisLabel: {
fontSize: 12,
color: "#000",
},
axisTick: {
show: false,
},
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
min: 0, min: 0,
minInterval: 1, minInterval: 1,
splitArea: { show: false }, splitArea: {
axisLine: { show: true }, show: false,
axisTick: { show: false }, },
splitLine: { lineStyle: { color: '#eeebeb', type: 'dashed' } },
axisLabel: { fontSize: 12, color: '#000', fontFamily: 'Bebas' }, axisLine: {
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", () => {
methods: { myChart.resize();
initData() { });
this.chartData.xData = []; this.$nextTick(() => {
this.chartData.yData = []; myChart.resize();
});
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(() => {
this.$nextTick(() => { that.$nextTick(() => {
this.chart = this.$echarts.init(this.$el); this.chart = this.$echarts.getInstanceByDom(
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef)); 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() { handler: function (oldValues, newValues) {
this.$nextTick(this.initEcharts); this.$nextTick(() => {
this.initEcharts();
});
}, },
}, },
chatShowType: { handler() {} }, chatShowType: {
handler: function (oldValues, newValues) {},
},
echartsRef: { echartsRef: {
handler() { handler: function (oldValues, newValues) {
setTimeout(() => this.$nextTick(this.initEcharts), 300); 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: { dataList: {
handler() { handler: function (oldValues, newValues) {
this.$nextTick(this.initEcharts); this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom(
document.getElementById(this.echartsRef)
);
if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
}
this.initEcharts();
});
}, },
}, },
}, },
}; };
</script> </script>
<style 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,7 +3,6 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'echartsLine', //折线图组件 name: 'echartsLine', //折线图组件
props: { props: {
@ -64,45 +63,9 @@ export default {
if (key == 'speed' && item[key]) { if (key == 'speed' && item[key]) {
return Math.abs(item[key]); return Math.abs(item[key]);
} }
if ((key == 'ave_headway' || key == 'headway') && item[key]) {
if (item[key] == -1) {
return '-';
}
}
return item[key]; return item[key];
}); });
}, },
//过滤重复的 time 字段，保留每个 time 最后一个对象
filteredArrayFun(originalArray, targetTime) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 确保 targetTime 是有效的日期字符串
const targetDate = targetTime ? new Date(targetTime) : null;
// 过滤比目标时间小的对象
if (targetDate) {
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
}
// 按照时间从小到大排序
const sortedArray = uniqueArray.sort((a, b) => {
const dateA = new Date(a.time);
const dateB = new Date(b.time);
return dateA - dateB;
});
return sortedArray;
},
//数据判断处理 //数据判断处理
dataProcessing(val) { dataProcessing(val) {
if (val && val.length > 10) { if (val && val.length > 10) {
@ -110,64 +73,41 @@ export default {
// this.typeData = this.typeData.slice(-10); // this.typeData = this.typeData.slice(-10);
} }
if (val != null) { if (val != null) {
let xData = [],
yData = [];
let targetTime = '';
if (this.chartData.xData.length > 0) {
targetTime = this.chartData.xData[this.chartData.xData.length - 1].time;
}
if (this.componentType != '类型') {
//类型种类特殊不能去除时间重复项，不走下面去重逻辑
val = this.filteredArrayFun(val, targetTime);
}
if (this.timeMode == '实时触发') { if (this.timeMode == '实时触发') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'headway'); this.chartData.yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow'); this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow'); this.chartData.yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed'); this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
// console.log('实时触发-类型-', val); this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0); for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; //quantity
if (firstLevel && firstLevel.length > 0) {
for (let i = 0; i < firstLevel.length; i++) {
const item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => { const valueList = seriesArr.map((arr) => {
if (arr) { let t = arr[i].value;
let t = arr[i] && arr[i].value; if (arr[i].quantity || arr[i].quantity === 0) {
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: getNameFromTargetType(item.name), name: 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) => {
@ -179,130 +119,107 @@ export default {
name: '总数', name: '总数',
value: totalCountList value: totalCountList
}); });
this.seriesList = this.seriesList.concat(transformedData).slice(-10); this.seriesList = transformedData;
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_stay'); this.chartData.yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_queue'); this.chartData.yData = this.extractKeyValues(val, 'n_queue');
} }
} else if (this.timeMode == '固定时刻') { } else if (this.timeMode == '固定时刻') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'headway'); this.chartData.yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow'); this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow'); this.chartData.yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed'); this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
// this.chartData.xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
// console.log('seriesArr-固定时刻', seriesArr); // console.log('seriesArr-固定时刻', seriesArr);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0); for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
if (firstLevel && firstLevel.length > 0) { //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
for (let i = 0; i < firstLevel.length; i++) { // const valueList = seriesArr.map((arr) => arr[i].quantity);
const item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => { const valueList = seriesArr.map((arr) => {
if (arr) { let t = arr[i].value;
let t = arr[i] && arr[i].value; if (arr[i].quantity || arr[i].quantity === 0) {
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: getNameFromTargetType(item.name), name: item.name,
value: valueList value: valueList
}); });
} }
} }
}
}
// console.log('transformedData-1',transformedData) // console.log('transformedData-1',transformedData)
let totalCountList = 0; const totalCountList = transformedData[0].value.map((_, i) => {
if (transformedData.length > 0 && transformedData[0].value) {
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 = this.seriesList.concat(transformedData).slice(-10); this.seriesList = transformedData;
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_stay'); this.chartData.yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_queue'); this.chartData.yData = this.extractKeyValues(val, 'n_queue');
} }
} else if (this.timeMode == '固定间隔') { } else if (this.timeMode == '固定间隔') {
if (this.componentType == '车头时距') { if (this.componentType == '车头时距') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_headway'); this.chartData.yData = this.extractKeyValues(val, 'ave_headway');
} else if (this.componentType == '流量') { } else if (this.componentType == '流量') {
if (this.flowType == '入流') { if (this.flowType == '入流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow'); this.chartData.yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') { } else if (this.flowType == '出流') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow'); this.chartData.yData = this.extractKeyValues(val, 'out_flow');
} }
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed'); this.chartData.yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
// console.log('固定间隔-类型-val-', val);
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
// console.log('固定间隔-类型-seriesArr-', seriesArr); // console.log('固定间隔-类型-seriesArr-', seriesArr);
// console.log('固定间隔-类型-xData-', this.chartData.xData); // console.log('固定间隔-类型-xData-', this.chartData.xData);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
const firstLevel = seriesArr.find((i) => i && i.length > 0); for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
if (firstLevel && firstLevel.length > 0) { //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
for (let i = 0; i < firstLevel.length; i++) { // const valueList = seriesArr.map((arr) => arr[i].value);
const item = firstLevel[i];
if (item) {
const valueList = seriesArr.map((arr) => { const valueList = seriesArr.map((arr) => {
if (arr) { let t = arr[i].value;
let t = arr[i] && arr[i].value; if (arr[i].quantity || arr[i].quantity === 0) {
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: getNameFromTargetType(item.name), name: item.name,
value: valueList value: valueList
}); });
} }
} }
}
}
// console.log('固定间隔-类型-transformedData-1', transformedData); // console.log('固定间隔-类型-transformedData-1', transformedData);
let totalCountList = 0; let totalCountList = 0;
@ -315,25 +232,19 @@ export default {
name: '总数', name: '总数',
value: totalCountList value: totalCountList
}); });
this.seriesList = this.seriesList.concat(transformedData).slice(-10); this.seriesList = transformedData;
// console.log('固定间隔-类型-transformedData-2', transformedData); // console.log('固定间隔-类型-transformedData-2', transformedData);
} else if (this.componentType == '延误') { } else if (this.componentType == '延误') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_delay'); this.chartData.yData = this.extractKeyValues(val, 'ave_delay');
} else if (this.componentType == '检测数') { } else if (this.componentType == '检测数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_stay'); this.chartData.yData = this.extractKeyValues(val, 'ave_stay');
} else if (this.componentType == '排队数') { } else if (this.componentType == '排队数') {
xData = this.extractKeyValues(val, 'time'); this.chartData.xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_queue'); this.chartData.yData = this.extractKeyValues(val, 'ave_queue');
} }
} }
this.chartData.xData = this.chartData.xData.concat(xData).slice(-10);
if (this.componentType != '类型') {
//类型是特殊的不走这边处理
this.chartData.yData = this.chartData.yData.concat(yData).slice(-10);
}
} else { } else {
return false; return false;
} }
@ -443,8 +354,7 @@ export default {
{ {
// name: '流量_1-zone2-曲线图-实时触发', // name: '流量_1-zone2-曲线图-实时触发',
type: 'line', type: 'line',
// data: this.chartData.yData.reverse(), data: this.chartData.yData.reverse(),
data: this.chartData.yData,
symbolSize: 8, //标记的大小 symbolSize: 8, //标记的大小
lineStyle: { lineStyle: {
color: 'rgb(255,115,38)', color: 'rgb(255,115,38)',
@ -494,7 +404,7 @@ export default {
}, },
legend: { legend: {
// 图例过多时滚动 // 图例过多时滚动
type: 'scroll', type: "scroll",
left: 'center', left: 'center',
top: 0, top: 0,
left: '10%', left: '10%',
@ -516,8 +426,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.chartData.xData.reverse(), data: this.chartData.xData.reverse(),
data: this.chartData.xData,
axisLine: { axisLine: {
show: false show: false
}, },
@ -567,12 +476,10 @@ export default {
], ],
series: seriesList series: seriesList
}; };
if (myChart) {
myChart.setOption(option); myChart.setOption(option);
window.onresize = () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}; });
}
} }
}, },
mounted() { mounted() {
@ -581,11 +488,11 @@ export default {
$dom.style.width = '440px'; $dom.style.width = '440px';
$dom.style.height = '260px'; $dom.style.height = '260px';
setTimeout(() => { setTimeout(() => {
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,7 +3,6 @@
</template> </template>
<script> <script>
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'echartsPie', //折线图组件 name: 'echartsPie', //折线图组件
props: { props: {
@ -94,33 +93,6 @@ export default {
} }
} }
} }
if(seriesData&&seriesData.length>0){
let temp=[];
seriesData.forEach((ele) => {
if (ele.value != 0) {
ele.name = getNameFromTargetType(ele.name);
temp.push(ele)
}
})
seriesData = temp
}
if(!seriesData||seriesData.length==0){
seriesData = [
{
value: 0,
name: '无',
label: { show: false },
itemStyle: { color: '#e1e1e1' },
emphasis: {
disabled: true,
label: { show: false },
itemStyle: {
color: '#e1e1e1'
}
}
}
];
}
var color = [ var color = [
'#0CD2E6', '#0CD2E6',
@ -150,17 +122,11 @@ export default {
color: color, color: color,
animation: false, animation: false,
legend: { legend: {
top: 5, top: 20,
right: 5, right: 'center',
bottom: 5,
orient: 'vertical',
textStyle: {}, textStyle: {},
type: 'scroll', type: 'scroll',
// top: 0, width: '80%'
// right: 'center',
// textStyle: {},
// type: 'scroll',
// width: '80%'
// data: [ // data: [
// { // {
// name: '流量_1-zone2-饼状图-实时触发', // name: '流量_1-zone2-饼状图-实时触发',
@ -187,9 +153,9 @@ export default {
}, },
series: [ series: [
{ {
name: '', name: '流量_1-zone2-饼状图-实时触发',
type: 'pie', type: 'pie',
center: ['33%', '50%'], center: ['50%', '55%'],
radius: '70%', radius: '70%',
label: { label: {
normal: { normal: {
@ -218,7 +184,6 @@ export default {
} }
] ]
}; };
if (myChart) {
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
@ -227,7 +192,6 @@ export default {
myChart.resize(); myChart.resize();
}); });
} }
}
}, },
mounted() { mounted() {
let that = this; let that = this;
@ -257,8 +221,8 @@ export default {
}, },
echartsRef: { echartsRef: {
handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
// console.log('old', oldValues); console.log('old', oldValues);
// console.log('newV', newValues); console.log('newV', newValues);
let that = this; let that = this;
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {

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

@ -15,304 +15,293 @@
<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);
// } // }
// for (let i = 0; i < this.dataList.length; i++) { // this.dataProcessing(this.dataList);
// if (this.dataList[i].max) { if (this.dataList.length > 10) {
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2))); this.dataList = this.dataList.slice(-10);
// } else { }
// this.max.push(0); 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)));
// if (this.dataList[i].min) { }else {
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2))); this.max.push(0);
// } else {
// this.min.push(0);
// }
// if (this.dataList[i].med) {
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
// } else {
// this.med.push(0);
// }
// if (this.dataList[i].avg) {
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
// } else {
// this.avg.push(0);
// }
// // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
// // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
// // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
// // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
// }
let maxData = '';
let minData = '';
let medData = '';
let avgData = '';
// for (let i = 0; i < this.max.length; i++) {
// maxData = this.max[i];
// }
// for (let i = 0; i < this.min.length; i++) {
// minData = this.min[i];
// }
// for (let i = 0; i < this.med.length; i++) {
// medData = this.med[i];
// }
// for (let i = 0; i < this.avg.length; i++) {
// avgData = this.avg[i];
// }
let arr = {};
if(this.dataList&&this.dataList.length>0){
arr = this.dataList[0]
} }
if (arr && Object.keys(arr).length > 0) { if(this.dataList[i].min) {
avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0; this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0; }else {
maxData = arr.max ? Math.abs(arr.max).toFixed(2) : 0; this.min.push(0);
minData = arr.min ? Math.abs(arr.min).toFixed(2) : 0; }
if(this.dataList[i].med) {
this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
}else {
this.med.push(0);
}
if(this.dataList[i].avg) {
this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
}else {
this.avg.push(0);
}
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
}
let maxData = "";
let minData = "";
let medData = "";
let avgData = "";
for (let i = 0; i < this.max.length; i++) {
maxData = this.max[i];
}
for (let i = 0; i < this.min.length; i++) {
minData = this.min[i];
}
for (let i = 0; i < this.med.length; i++) {
medData = this.med[i];
}
for (let i = 0; i < this.avg.length; i++) {
avgData = this.avg[i];
} }
let myChart = this.chart; let 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(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));
} }
@ -326,56 +315,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(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.initEcharts(); that.initEcharts();
}); });
}, 300); }, 300);
} },
}, },
echartsRef: { echartsRef: {
handler: function (newValues, oldValues) { 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(() => {
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.initEcharts(); that.initEcharts();
}); });
}, 300); }, 300);
} },
}, },
dataList: { dataList: {
handler: function (newValues, oldValues) { handler: function (oldValues, newValues) {
// if(newValues&&newValues.length>0) {
// if(newValues[0].name=='gate1'){
// console.log('newV', newValues);
// }
// }
this.$nextTick(() => { this.$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));
} }
this.initEcharts(); this.initEcharts();
}); });
} },
} },
} },
}; };
</script> </script>
<style> <style>

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

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

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

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

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([j, i, item[j].quantity]); chartData.push([i, j, item[j].quantity]);
// console.log([i,j,item[j].val]); // console.log([i,j,item[j].val]);
} }
} }
@ -67,61 +67,16 @@ export default {
// this.thermalChartData = chartData // this.thermalChartData = chartData
return chartData; return chartData;
}, },
//去除时间重复项
//过滤重复的 time 字段，保留每个 time 最后一个对象
filteredArrayFun(originalArray, targetTime) {
// 过滤重复的 time 字段
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
if (existingItemIndex === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
// 确保 targetTime 是有效的日期字符串
const targetDate = targetTime ? new Date(targetTime) : null;
// 过滤比目标时间小的对象
if (targetDate) {
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
}
// 按照时间从小到大排序
const sortedArray = uniqueArray.sort((a, b) => {
const dateA = new Date(a.time);
const dateB = new Date(b.time);
return dateA - dateB;
});
return sortedArray;
},
initEcharts() { initEcharts() {
let dataList = null; let dataList = null;
// let targetTime = '';
// if (this.dataList.length > 0) {
// targetTime = this.dataList[this.dataList.length - 1].time;
// }
// let filterDataList = this.filteredArrayFun(this.dataList, targetTime);
let filterDataList = this.dataList
// console.log('实时触发-OD组件获取到的数据', this.dataList);
// console.log('实时触发-OD组件获取到的过滤数据', filterDataList);
if (this.timeMode == '实时触发') { if (this.timeMode == '实时触发') {
let dataOd = []; let dataOd = [];
if (filterDataList.length > 0 && filterDataList[0].ob_data) { if (this.dataList.length > 0) {
dataOd.push(filterDataList[0].ob_data); for (let i = 0; i < this.dataList.length; i++) {
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++) {
@ -130,12 +85,11 @@ export default {
// } // }
// if (this.dataList[0][0] == undefined) { // if (this.dataList[0][0] == undefined) {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
if (filterDataList.length > 0 && filterDataList[0].ob_data) { if (this.dataList.length > 0 && this.dataList[0].ob_data) {
dataOd.push(filterDataList[0].ob_data); dataOd.push(this.dataList[0].ob_data);
dataList = this.ODhanlde(dataOd);
} }
dataList = this.ODhanlde(dataOd);
// } // }
// } else { // } else {
// dataOd.push(this.dataList[0][0].ob_data); // dataOd.push(this.dataList[0][0].ob_data);
@ -149,11 +103,10 @@ export default {
// } // }
// if (this.dataList[0][0] == undefined) { // if (this.dataList[0][0] == undefined) {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
if (filterDataList.length > 0 && filterDataList[0].ob_data) { if (this.dataList.length > 0 && this.dataList[0].ob_data) {
dataOd.push(filterDataList[0].ob_data); dataOd.push(this.dataList[0].ob_data);
dataList = this.ODhanlde(dataOd);
} }
dataList = this.ODhanlde(dataOd);
// } // }
// } else { // } else {
// dataOd.push(this.dataList[0][0].ob_data); // dataOd.push(this.dataList[0][0].ob_data);
@ -161,15 +114,6 @@ 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: [
{ {
@ -193,7 +137,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: startName, data: this.startName.split(','),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: '#000'
@ -210,7 +154,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: endName, data: this.endName.split(','),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: '#000'
@ -256,14 +200,11 @@ 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;
@ -302,8 +243,8 @@ export default {
}, },
echartsRef: { echartsRef: {
handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
// console.log('old', oldValues); console.log('old', oldValues);
// console.log('newV', newValues); console.log('newV', newValues);
let that = this; let that = this;
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {

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

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

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">{{ getNameFromTargetType(n.name) }}</span <span style="font-size: 15px">{{ n.name }}</span
><br /> ><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - ' n.quantity || n.quantity === 0 ? n.quantity : ' - '
@ -36,7 +36,7 @@
style="width: 150px; margin-bottom: 20px; text-align: center" style="width: 150px; margin-bottom: 20px; text-align: center"
> >
<div> <div>
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span <span style="font-size: 15px">{{ n.name }}</span
><br /> ><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - ' n.quantity || n.quantity === 0 ? n.quantity : ' - '
@ -325,7 +325,6 @@ import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue'; import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue'; import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue'; import thermalChart from '../chart/thermalChart.vue';
import { getNameFromTargetType } from '@/utils/targetType';
export default { export default {
name: 'typeChart', //类型组件 name: 'typeChart', //类型组件
props: [ props: [
@ -352,7 +351,6 @@ export default {
}, },
data() { data() {
return { return {
getNameFromTargetType,
// 类型数值 // 类型数值
total: 0, total: 0,
// 速度数值 // 速度数值
@ -372,11 +370,7 @@ export default {
methods: { methods: {
// 计算类型数量的总和 // 计算类型数量的总和
getDataArr(val) { getDataArr(val) {
// if(val&&val.length>0){ // console.log('getDataArr', val);
// if(val[0].component_name=='车头时距_4')
// console.log('typeChart-getDataArr', val);
// }
this.newDataArr = val; this.newDataArr = val;
this.getNewQueue(this.newDataArr); this.getNewQueue(this.newDataArr);
}, },
@ -397,7 +391,7 @@ export default {
this.cycleAccumulateDataArr[0].headway = val[0].headway; this.cycleAccumulateDataArr[0].headway = val[0].headway;
} }
if (val[0].ave_headway) { if (val[0].ave_headway) {
this.cycleAccumulateDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway; this.cycleAccumulateDataArr[0].headway = val[0].ave_headway;
} }
if (val[0].n_stay) { if (val[0].n_stay) {
this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay; this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay;
@ -414,9 +408,9 @@ export default {
return cur.quantity + prev; return cur.quantity + prev;
}, 0); }, 0);
} }
return 0; return 0
} }
return 0; return 0
} }
}, },
getNewQueue(val) { getNewQueue(val) {
@ -430,7 +424,7 @@ export default {
this.newDataArr[0].headway = val[0].headway; this.newDataArr[0].headway = val[0].headway;
} }
if (val[0].ave_headway) { if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway == -1 ? '-' : val[0].ave_headway; this.newDataArr[0].headway = val[0].ave_headway;
} }
if (val[0].n_stay) { if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay; this.newDataArr[0].n_stay = val[0].n_stay;
@ -529,6 +523,7 @@ 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,15 +1,4 @@
/*
* @Author: qiudan 1044775178@qq.com
* @Date: 2024-04-07 18:06:23
* @LastEditors: qiudan 1044775178@qq.com
* @LastEditTime: 2024-04-07 18:14:02
* @FilePath: /TransFlow/src/config/apiurl.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
var ipUurl = window.location.host.split(':')[0]; var ipUurl = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ipUurl = '172.16.1.168'
}
// var ipUurl = '172.16.1.168' // var ipUurl = '172.16.1.168'
export default { export default {
// dataUrl: "http://172.16.1.22:8080/api/AddShipjk", // dataUrl: "http://172.16.1.22:8080/api/AddShipjk",
@ -20,71 +9,71 @@ export default {
// //编辑图形名称 // //编辑图形名称
// editFigure: "http://172.16.1.22:8080/api/EditTuxmc", // editFigure: "http://172.16.1.22:8080/api/EditTuxmc",
// dataUrl: 'http://172.16.1.168:80/api/AddShipjk', // dataUrl: 'http://172.16.1.168:5000/api/AddShipjk',
// getSpareElementOrder: 'http://172.16.1.168:80/api/Upload', // getSpareElementOrder: 'http://172.16.1.168:5000/api/Upload',
// postSetQuanjsz: 'http://172.16.1.168:80/api/SetQuanjsz', // postSetQuanjsz: 'http://172.16.1.168:5000/api/SetQuanjsz',
// saveRoleApi: 'http://172.16.1.168:80/api/AddZhangh', // saveRoleApi: 'http://172.16.1.168:5000/api/AddZhangh',
// saveSetFtppz: 'http://172.16.1.168:80/api/SetFtppz', // saveSetFtppz: 'http://172.16.1.168:5000/api/SetFtppz',
// //编辑保存组件弹窗传参 // //编辑保存组件弹窗传参
// editComponent: 'http://172.16.1.168:80/api/SetMonqjkzjcs', // editComponent: 'http://172.16.1.168:5000/api/SetMonqjkzjcs',
// //保存主机名称 // //保存主机名称
// editRoleApi: 'http://172.16.1.168:80/api/EditZhangh', // editRoleApi: 'http://172.16.1.168:5000/api/EditZhangh',
// //新增图形接口 // //新增图形接口
// addFigure: 'http://172.16.1.168:80/api/AddJianktx', // addFigure: 'http://172.16.1.168:5000/api/AddJianktx',
// //编辑图形名称 // //编辑图形名称
// editFigure: 'http://172.16.1.168:80/api/EditTuxmc', // editFigure: 'http://172.16.1.168:5000/api/EditTuxmc',
// //编辑保存组件弹窗传参 // //编辑保存组件弹窗传参
// setHostName: 'http://172.16.1.168:80/api/SetHostName', // setHostName: 'http://172.16.1.168:5000/api/SetHostName',
// setHostTime: 'http://172.16.1.168:80/api/SetHostTime', // setHostTime: 'http://172.16.1.168:5000/api/SetHostTime',
// changePassowrd:'http://172.16.1.168:80/api/ChangePassword', // changePassowrd:'http://172.16.1.168:5000/api/ChangePassword',
// //还原服务器设置上传 // //还原服务器设置上传
// postConfigRestore:'http://172.16.1.168:80/api/ConfigRestore', // postConfigRestore:'http://172.16.1.168:5000/api/ConfigRestore',
// //更新软件版本 // //更新软件版本
// postConfigUpdate:'http://172.16.1.168:80/api/Update', // postConfigUpdate:'http://172.16.1.168:5000/api/Update',
// //新增接入方 // //新增接入方
// postAddJierf:'http://172.16.1.168:80/api/AddJierf', // postAddJierf:'http://172.16.1.168:5000/api/AddJierf',
// //编辑接入方 // //编辑接入方
// postEditJierf:'http://172.16.1.168:80/api/EditJierf', // postEditJierf:'http://172.16.1.168:5000/api/EditJierf',
// //设置组件 // //设置组件
// setComponents:'http://172.16.1.168:80/api/SetComponents', // setComponents:'http://172.16.1.168:5000/api/SetComponents',
// //设置接入方接口 // //设置接入方接口
// setAccessParty:'http://172.16.1.168:80/api/setAccessParty', // setAccessParty:'http://172.16.1.168:5000/api/setAccessParty',
// `http://${ipUurl}:80/api/AddShipjk` // `http://${ipUurl}:5000/api/AddShipjk`
dataUrl: `http://${ipUurl}:80/api/AddShipjk`, dataUrl: `http://${ipUurl}:5000/api/AddShipjk`,
getSpareElementOrder: `http://${ipUurl}:80/api/Upload`, getSpareElementOrder: `http://${ipUurl}:5000/api/Upload`,
postSetQuanjsz: `http://${ipUurl}:80/api/SetQuanjsz`, postSetQuanjsz: `http://${ipUurl}:5000/api/SetQuanjsz`,
//新增图形接口 //新增图形接口
addFigure: `http://${ipUurl}:80/api/AddJianktx`, addFigure: `http://${ipUurl}:5000/api/AddJianktx`,
//编辑图形名称 //编辑图形名称
editFigure: `http://${ipUurl}:80/api/EditTuxmc`, editFigure: `http://${ipUurl}:5000/api/EditTuxmc`,
//根据视频监控id获取监控图形数据 //根据视频监控id获取监控图形数据
// getJianktx: `http://${ipUurl}:80/api/GetJianktx`, // getJianktx: `http://${ipUurl}:5000/api/GetJianktx`,
//编辑保存组件弹窗传参 //编辑保存组件弹窗传参
editComponent: `http://${ipUurl}:80/api/SetMonqjkzjcs`, editComponent: `http://${ipUurl}:5000/api/SetMonqjkzjcs`,
//保存主机名称 //保存主机名称
editRoleApi: `http://${ipUurl}:80/api/EditZhangh`, editRoleApi: `http://${ipUurl}:5000/api/EditZhangh`,
saveRoleApi: `http://${ipUurl}:80/api/AddZhangh`, saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
saveSetFtppz: `http://${ipUurl}:80/api/SetFtppz`, saveSetFtppz: `http://${ipUurl}:5000/api/SetFtppz`,
//编辑保存组件弹窗传参 //编辑保存组件弹窗传参
setHostName: `http://${ipUurl}:80/api/SetHostName`, setHostName: `http://${ipUurl}:5000/api/SetHostName`,
setHostTime: `http://${ipUurl}:80/api/SetHostTime`, setHostTime: `http://${ipUurl}:5000/api/SetHostTime`,
changePassowrd: `http://${ipUurl}:80/api/ChangePassword`, changePassowrd:`http://${ipUurl}:5000/api/ChangePassword`,
//还原服务器设置上传 //还原服务器设置上传
postConfigRestore: `http://${ipUurl}:80/api/ConfigRestore`, postConfigRestore:`http://${ipUurl}:5000/api/ConfigRestore`,
//更新软件版本 //更新软件版本
postConfigUpdate: `http://${ipUurl}:80/api/Update`, postConfigUpdate:`http://${ipUurl}:5000/api/Update`,
//新增接入方 //新增接入方
postAddJierf: `http://${ipUurl}:80/api/AddJierf`, postAddJierf:`http://${ipUurl}:5000/api/AddJierf`,
//编辑接入方 //编辑接入方
postEditJierf: `http://${ipUurl}:80/api/EditJierf`, postEditJierf:`http://${ipUurl}:5000/api/EditJierf`,
//设置组件 //设置组件
setComponents: `http://${ipUurl}:80/api/SetComponents`, setComponents:`http://${ipUurl}:5000/api/SetComponents`,
setAccessParty: `http://${ipUurl}:80/api/setAccessParty`, setAccessParty:`http://${ipUurl}:5000/api/setAccessParty`,
//自动校时接口 //自动校时接口
setAutomatic: `http://${ipUurl}:80/api/SetAutomaticTiming`, setAutomatic:`http://${ipUurl}:5000/api/SetAutomaticTiming`,
}; };

33
src/main.js
View File

@ -79,30 +79,23 @@ var currentTopics = null;
var client = null; var client = null;
var callback = null; var callback = null;
let mqtt = new mqttConfig(currentTopics); let mqtt = new mqttConfig(currentTopics);
window.PubScribe = function (topic, number, _callback, other = false, fromName = '') { window.PubScribe = function (topic, number, _callback, other = false) {
callback = _callback; callback = _callback;
if (currentTopics != null) { if (currentTopics != null) {
//取消currentTopics主题订阅 //取消currentTopics主题订阅
if (client != null) { if (client != null) {
console.log('client', client)
client.unsubscribe(currentTopics); client.unsubscribe(currentTopics);
console.log("取消上次订阅主题", currentTopics)
currentTopics = null; currentTopics = null;
} }
} }
if (client == null) { if (client == null) {
if (other == false) { if (other == false) {
console.log("首次链接订阅主题topic", topic)
currentTopics = topic;
client = mqtt.createConnect(() => { client = mqtt.createConnect(() => {
client.subscribe(topic, { client.subscribe(topic, {
qos: 0 qos: 0
}, (err) => { }, (err) => {
if (!err) { if (!err) {
console.log("订阅成功0",topic); console.log("订阅成功0",topic);
console.log("订阅成功0-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
console.log("订阅成功0-fromName", fromName);
console.log("订阅成功0-number", number);
client.publish('msg_stream', JSON.stringify({ client.publish('msg_stream', JSON.stringify({
"msg_flag": parseInt(number) "msg_flag": parseInt(number)
})) }))
@ -127,17 +120,13 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
}); });
} else { } else {
if (topic != null) { if (topic != null) {
console.log("融合的订阅主题topic", topic) console.log("topic", topic)
currentTopics = topic;
client = mqtt.createConnect(() => { client = mqtt.createConnect(() => {
client.subscribe(topic, { client.subscribe(topic, {
qos: 0 qos: 0
}, (err) => { }, (err) => {
if (!err) { if (!err) {
console.log("订阅成功11", topic); console.log("订阅成功11");
console.log("订阅成功11-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
console.log("订阅成功11-fromName", fromName);
console.log("订阅成功11-number", number);
client.publish('msg_stream', JSON.stringify({ client.publish('msg_stream', JSON.stringify({
"msg_flag": parseInt(number) "msg_flag": parseInt(number)
})) }))
@ -157,31 +146,29 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
} else { } else {
if (topic != null) { if (topic != null) {
console.log("已链接成功后订阅主题topic", topic) console.log("topic", topic)
currentTopics = topic; currentTopics = topic;
mqtt.MySub(() => {
client.subscribe(currentTopics, { client.subscribe(currentTopics, {
qos: 0 qos: 0
}, (err) => { }, (err) => {
if (!err) { if (!err) {
console.log("订阅成功1", topic); console.log("订阅成功1");
console.log("订阅成功1-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合"); // setTimeout(function() {
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,12 +1,7 @@
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 {
@ -18,10 +13,10 @@ class mqttHandle {
endpoint: "/mqtt", endpoint: "/mqtt",
clean: true, // 保留会话 clean: true, // 保留会话
cleanSession: true, cleanSession: true,
connectTimeout: 5000, // 超时时间 connectTimeout: 7000, // 超时时间
reconnectPeriod: 3000, // 重连时间间隔 reconnectPeriod: 7000, // 重连时间间隔
host:ip, host:ip,
port: '80', port: '10087',
// 认证信息 // 认证信息
// clientId: Number(new Date()).toString(), // clientId: Number(new Date()).toString(),
clientId: newName, clientId: newName,
@ -33,29 +28,17 @@ class mqttHandle {
// qos: 0, // qos: 0,
// } // }
this.mqttClient = null; this.mqttClient = null;
// 追踪是否为初始连接
this.initialConnection = true;
// 存储当前 onConnected 回调
this.onConnected = () => {}; // 默认为空函数
} }
/** /**
* 创建链接 * 创建链接
* @returns client * @returns client
*/ */
createConnect(onConnectedFun) { createConnect(onConnected) {
//配置链接 //配置链接
const { const { host, port, endpoint, ...options } = this.connect;
host,
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/';
let connectUrl = `ws://${this.connect.host}${endpoint}`; const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
if (process.env.NODE_ENV === 'development') {
connectUrl = `ws://172.16.1.168${endpoint}`;
}
// if (!client.connected) { // if (!client.connected) {
// client.on('connect', function () { // client.on('connect', function () {
// console.log('连接成功') // console.log('连接成功')
@ -67,16 +50,12 @@ 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 });
@ -87,10 +66,8 @@ 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('正在重连-系统时间', moment().format('YYYY-MM-DD HH:mm:ss')) console.log('正在重连')
}) })
this.mqttClient.on("error", (error) => { this.mqttClient.on("error", (error) => {
console.log("Connection failed"); console.log("Connection failed");
}); });
@ -119,23 +96,22 @@ 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, { this.mqttClient.subscribe(subscriptions, { qos: 0 }, (err)=>
// qos: 0 {
// }, (err) => { if (!err) {
// if (!err) { console.log("订阅成功："+subscriptions);
// console.log("订阅成功：" + subscriptions);
// } else { } else {
// console.log('消息订阅失败！' + subscriptions) console.log('消息订阅失败！'+subscriptions)
// } }
// }); });
this.onConnected = subscriptions
this.onConnected()
} }
MyUnSub(subscription) { MyUnSub(subscription)
{
} }

24
src/utils/targetType.js
View File

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

47
src/views/AnalysisMain.vue
View File

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

111
src/views/StateOperation.vue
View File

@ -20,9 +20,8 @@
<el-form :model="performance" label-position="left" label-width="200px" style="width:70%"> <el-form :model="performance" label-position="left" label-width="200px" style="width:70%">
<!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> --> <!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> -->
<el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item> <el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
<el-form-item label="Cpu利用率：" <el-form-item label="Cpu利用率："><span v-for="s in performance.cpuUtilization"
><span v-for="s in performance.cpuUtilization" :key="s">{{ s + '%' }} | </span> :key="s">{{ s +'%'}} | </span> </el-form-item>
</el-form-item>
<el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item> <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item> <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item> <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
@ -50,6 +49,7 @@
</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,19 +61,29 @@
</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> <el-table-column prop="connect" label="连接">
<el-table-column prop="IP" label="IP地址"> </el-table-column> </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"> {{ scope.row.occupancy }}K </template> <template slot-scope="scope">
{{ 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"> {{ scope.row.total }}GB </template> <template slot-scope="scope">
{{ 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"> {{ scope.row.total }}Kb/s </template> <template slot-scope="scope">
{{ 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"> {{ scope.row.total }}MB </template> <template slot-scope="scope">
{{ scope.row.total }}MB
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -89,7 +99,7 @@ export default {
version: '', version: '',
currentTime: '', currentTime: '',
startTime: '', startTime: '',
runTime: '' runTime: '',
}, },
performance: { performance: {
runTime: '', runTime: '',
@ -102,7 +112,7 @@ export default {
memoryUsage: '', memoryUsage: '',
totalMemory: '', totalMemory: '',
virtualMemoryUsed: '', virtualMemoryUsed: '',
totalVirtualMemory: '' totalVirtualMemory: '',
}, },
mountingPointTable: [ mountingPointTable: [
// { // {
@ -118,9 +128,9 @@ export default {
DNS: '', DNS: '',
VPNvisit: '', VPNvisit: '',
serverVPN: '', serverVPN: '',
serverVPNOpen: '' serverVPNOpen: '',
}, },
// networkStatus: [ networkStatus: [
// { // {
// connect: '2016-05-02', // connect: '2016-05-02',
// IP: '王小虎', // IP: '王小虎',
@ -129,74 +139,71 @@ 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();
this.messageTimer = setInterval(() => { window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
//每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新 this.publishClient()
this.publishClient(); }, 1000 * 5 )
}, 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,14 +1,16 @@
<template> <template>
<div > <div >
<div > <div >
<div style="width: 100%; height: 900px; display: inline-block; border: 1px soild #eee"> <div style="width:100%;height:900px;display:inline-block;border:1px soild #eee;">
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height: 100%"></iframe> <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"></iframe>
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
ref="iframe"></iframe> --> ref="iframe"></iframe> -->
</div> </div>
<el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%"> <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
<el-row> <el-row>
<el-col :span="6"> 文件选择： </el-col> <el-col :span="6">
文件选择：
</el-col>
<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>
@ -25,7 +27,7 @@
</template> </template>
<script> <script>
import mqtt from 'mqtt'; // mqtt协议 import mqtt from "mqtt"; // mqtt协议
export default { export default {
data() { data() {
@ -44,29 +46,28 @@ 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)
let host = `ws://${ip}:10087`; const 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 = {
@ -79,18 +80,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); // 连接
@ -98,16 +99,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 });
@ -130,172 +131,175 @@ 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
View File

File diff suppressed because it is too large Load Diff

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

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

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

@ -1,5 +1,6 @@
<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>
@ -8,14 +9,15 @@
<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> <div style="width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px">
</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="分析配置">
@ -44,9 +46,14 @@
<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 title="断面组件配置" width="40%" :visible.sync="dialogFormVisible"> <el-dialog
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">
@ -59,11 +66,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="类型">
@ -73,6 +80,7 @@
<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="车牌">
@ -103,7 +111,11 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-dialog> </el-dialog>
<el-dialog title="区域组件配置" width="40%" :visible.sync="areaComponent"> <el-dialog
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">
@ -117,16 +129,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 <el-date-picker type="date" placeholder="选择日期" v-model="areaComponentform.date1" style="width: 100%;"></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="类型">
@ -136,16 +143,14 @@
<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 <el-form-item label="车道" v-if="areaComponentform.resource=='实时（触发）'||areaComponentform.resource=='实时（秒级）'">
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>
@ -207,21 +212,22 @@
</template> </template>
<script> <script>
import mqtt from 'mqtt'; // mqtt协议
import editModal from '@/views/bounced/maintenanceRemind';
import analysisConfiguration from '@/views/bounced/analysisConfiguration';
import axios from 'axios'; import mqtt from "mqtt"; // mqtt协议
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,
@ -246,7 +252,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:'',
@ -277,16 +283,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: [],
@ -295,12 +301,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,
@ -313,14 +319,16 @@ 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");
@ -334,12 +342,13 @@ 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(
@ -394,16 +403,13 @@ 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
let host = `ws://${ip}:10087`; const 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 = {
@ -416,36 +422,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 });
@ -459,10 +465,11 @@ 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()}`,
@ -486,162 +493,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({ axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100', this.weatherItem = res.data.lives[0]
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) {
@ -695,7 +702,7 @@ export default {
components: { components: {
editModal, editModal,
analysisConfiguration analysisConfiguration
} },
}; };
</script> </script>
<style scoped> <style scoped>

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

@ -4,13 +4,6 @@
<!-- <p>节点源</p> --> <!-- <p>节点源</p> -->
<!-- <h3>节点源</h3> --> <!-- <h3>节点源</h3> -->
<el-descriptions title="目标检测" :column="5" border> <el-descriptions title="目标检测" :column="5" border>
<el-descriptions-item label="图片fps">{{ getUnityData.fpsPicture }}</el-descriptions-item>
<el-descriptions-item label="运行时间(s)">{{ getUnityData.time }}</el-descriptions-item>
<el-descriptions-item label="场景FPS">{{ getUnityData.fpsCount }}</el-descriptions-item>
<el-descriptions-item label="数据fps">{{ getUnityData.fpsData }}</el-descriptions-item>
<el-descriptions-item label="当前处理帧编号">{{ getUnityData.frameNum }}</el-descriptions-item>
</el-descriptions>
<!-- <el-descriptions title="目标检测" :column="5" border>
<el-descriptions-item label="视频地址"> <el-descriptions-item label="视频地址">
{{ form.target_detection.video_address }}</el-descriptions-item {{ form.target_detection.video_address }}</el-descriptions-item
> >
@ -38,9 +31,9 @@
<el-descriptions-item label="最后一帧分析时间">{{ <el-descriptions-item label="最后一帧分析时间">{{
form.target_detection.last_frame_analysis_time form.target_detection.last_frame_analysis_time
}}</el-descriptions-item> }}</el-descriptions-item>
</el-descriptions> --> </el-descriptions>
<!-- <el-descriptions title="交通分析" :column="5" border> <el-descriptions title="交通分析" :column="5" border>
<el-descriptions-item label="分析帧速率"> <el-descriptions-item label="分析帧速率">
{{ form.traffic_analysis.analyze_frame_rate }}</el-descriptions-item {{ form.traffic_analysis.analyze_frame_rate }}</el-descriptions-item
> >
@ -53,12 +46,18 @@
<el-descriptions-item label="最后一帧分析时间">{{ <el-descriptions-item label="最后一帧分析时间">{{
form.traffic_analysis.last_frame_analysis_time form.traffic_analysis.last_frame_analysis_time
}}</el-descriptions-item> }}</el-descriptions-item>
</el-descriptions> --> </el-descriptions>
<el-descriptions title="数据同步" :column="5" border> <el-descriptions title="数据同步" :column="5" border>
<el-descriptions-item label="上次同步时间"> {{ form.data_sync.lastSyncTime }}</el-descriptions-item> <el-descriptions-item label="上次同步时间">
<el-descriptions-item label="本次同步时间">{{ form.data_sync.currentSyncStatus }}</el-descriptions-item> {{ form.data_sync.lastSyncTime }}</el-descriptions-item
<el-descriptions-item label="下次同步时间">{{ form.data_sync.nextSyncTime }}</el-descriptions-item> >
<el-descriptions-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> -->
@ -74,7 +73,9 @@
</el-row> </el-row>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button> <el-button type="primary" @click="showUpdateCertificate = false"
>确 定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -82,53 +83,50 @@
</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点触发更新
@ -146,11 +144,6 @@ 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;
@ -158,34 +151,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,9 +676,6 @@ export default {
// 备份服务器事件 // 备份服务器事件
backupHandle() { backupHandle() {
var ipUrl = window.location.origin var ipUrl = window.location.origin
if (process.env.NODE_ENV === 'development') {
ipUrl = '172.16.1.168';
}
// var ipUrl = '172.16.1.168' // var ipUrl = '172.16.1.168'
this.$confirm('此操作将备份操作, 是否继续?', '提示', { this.$confirm('此操作将备份操作, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',

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

@ -42,11 +42,7 @@
<span style="margin-left: 10px">接通</span> <span style="margin-left: 10px">接通</span>
</el-col> </el-col>
</el-form-item> --> </el-form-item> -->
<div style="margin-bottom: 24px"> <!-- <p class="title">IPV4</p> -->
<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%">
@ -54,7 +50,8 @@
<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" placeholder="例：172.1.1.16/24" :disabled="disable" /> <el-input v-model.trim="scope.row.address"
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>
@ -75,23 +72,19 @@
<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 fixed="right" label="操作" width="350"> <el-table-column
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 <el-button @click="deleteRowsTableData(scope)" v-if="scope.$index != 0" type="text" size="small" :disabled="disable">删除行
@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">
@ -135,7 +128,6 @@
<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">
@ -156,7 +148,8 @@
<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" placeholder="例：172.1.1.16/24" :disabled="disable" /> <el-input v-model.trim="scope.row.to"
placeholder="例：172.1.1.16/24" :disabled="disable" />
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
@ -164,34 +157,30 @@
<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" placeholder="例：172.1.1.16" :disabled="disable" /> <el-input v-model.trim="scope.row.via"
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 <el-form-item :prop="'tableRouter.'+ scope.$index + '.metric'" :rules="rules.metric" class="tableFormItem">
:prop="'tableRouter.' + scope.$index + '.metric'" <el-input v-model.trim="scope.row.metric"
:rules="rules.metric" placeholder="例：100" :disabled="disable"/>
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 fixed="right" label="操作" width="350"> <el-table-column
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 <el-button @click="deleteRows(scope)" v-if="scope.$index < sizeForm.tableRouter.length" type="text" size="small" :disabled="disable">删除行
@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>
@ -215,41 +204,30 @@
</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 <el-form-item :prop="'tableDataDNS.'+ scope.$index + '.address'" :rules="rules.addressDNS" class="tableFormItem">
:prop="'tableDataDNS.' + scope.$index + '.address'" <el-input v-model.trim="scope.row.address"
:rules="rules.addressDNS" placeholder="例：172.1.1.16" :disabled="disable" />
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 fixed="right" label="操作" width="350"> <el-table-column
fixed="right"
label="操作"
width="350"
>
<template slot-scope="scope" > <template slot-scope="scope" >
<el-button <el-button @click="deleteRowsDNS(scope)" v-if="scope.$index < sizeForm.tableDataDNS.length" type="text" size="small" :disabled="disable">删除行
@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 <el-button type="primary" @click="commit(sizeForm.tableRouter,sizeForm.tableData,sizeForm.tableDataDNS,sizeForm)" style="margin-top:10px" v-if="!disable">保存</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>
@ -259,6 +237,7 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
let validateIPAddress = (rule, value, callback) => { let validateIPAddress = (rule, value, callback) => {
@ -278,9 +257,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地址不能为空'));
@ -315,9 +294,10 @@ export default {
} }
} }
} }
}
} }
} }
};
let metric = (rule, value, callback) =>{ let metric = (rule, value, callback) =>{
if (!value) { if (!value) {
return callback(new Error('输入不可以为空')); return callback(new Error('输入不可以为空'));
@ -335,39 +315,23 @@ export default {
} }
} }
}, 0); }, 0);
}; }
return { return {
dhcp4: false,
columnLabel: '', //要增加的列名 columnLabel: '', //要增加的列名
columnPropIndex: 0, //列属性自增 columnPropIndex: 0, //列属性自增
columnData: [],//列标题数组 columnData: [],//列标题数组
rules: { rules: {
gateway4: [ 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"}],
{ 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',
@ -453,6 +417,7 @@ export default {
// address: '', // address: '',
// }, // },
// { // {
// id:'', // id:'',
// address: '', // address: '',
// }, // },
@ -470,13 +435,13 @@ export default {
// id:'', // id:'',
// address: '', // address: '',
// } // }
] ],
}, },
options: [ options: [
{ {
value: '', value: '',
label: '' label: ''
} },
// { // {
// value: 'wlan0', // value: 'wlan0',
// label: 'wlan0' // label: 'wlan0'
@ -538,7 +503,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
}, },
@ -546,7 +511,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
}, },
@ -554,7 +519,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
} }
@ -564,7 +529,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
}, },
@ -572,55 +537,57 @@ 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: this.dhcp4, dhcp4: false,
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: '取消',
@ -631,7 +598,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: '',
@ -658,8 +625,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',
@ -668,7 +635,7 @@ export default {
}); });
setTimeout(() => { setTimeout(() => {
loading.close(); loading.close();
this.publishClient(); this.publishClient()
}, 5000); }, 5000);
}) })
.catch(() => { .catch(() => {
@ -684,15 +651,13 @@ 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) { for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
//把第一个对象的属性都赋值给新对象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) { for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
//把第一个对象的属性都赋值给新对象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);
@ -708,14 +673,11 @@ 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) { for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
//把第一个对象的属性都赋值给新对象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){
@ -726,15 +688,13 @@ 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) { for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
//把第一个对象的属性都赋值给新对象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) { for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
//把第一个对象的属性都赋值给新对象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);
@ -749,81 +709,76 @@ 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);
this.options = optionNrr;
if (msg.netstates[this.optionsData].isup == true) {
this.sizeForm.status = 'YES';
} else {
this.sizeForm.status = 'NO';
} }
if (data && data.length > 0) { })
console.log("optionNrr",optionNrr)
this.options = optionNrr
if(msg.netstates[this.optionsData].isup==true){
this.sizeForm.status='YES'
}else{
this.sizeForm.status='NO'
}
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: '静态地址有误',
@ -833,40 +788,27 @@ 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,
@ -883,61 +825,50 @@ 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) => {
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
let legend = []; var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
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; })
console.log('从mqtt获取数据后重新整理的数据2', this.sizeForm); this.sizeForm.tableDataDNS = legend
} }
}, },
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');
@ -990,16 +921,10 @@ export default {
} }
} }
.status{ .status{
width: 10px; width: 10px; height: 10px; border-radius: 50%; background: green
height: 10px;
border-radius: 50%;
background: green;
} }
.statusNo{ .statusNo{
width: 10px; width: 10px; height: 10px; border-radius: 50%; background: red
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,11 +353,7 @@
</el-slider> </el-slider>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="" v-if="componentForm.componentType == 'OD'"> <!-- <el-form-item label="单位：" ></el-form-item> -->
<div style="color: red; line-height: normal">
注意：OD组件消耗性能较大，可能会造成分析延迟，请不要勾选太多选项!
</div>
</el-form-item>
<el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'"> <el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'">
<el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection"> <el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
<el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{ <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
@ -445,8 +441,6 @@
<script> <script>
// import mqtt from "mqtt"; // mqtt协议 // import mqtt from "mqtt"; // mqtt协议
import moment from 'moment';
import _ from 'lodash';
import editModal from '@/views/bounced/maintenanceRemind'; import editModal from '@/views/bounced/maintenanceRemind';
import analysisConfiguration from '@/views/bounced/analysisConfiguration'; import analysisConfiguration from '@/views/bounced/analysisConfiguration';
import dataBoard from '@/views/bounced/dataBoard'; import dataBoard from '@/views/bounced/dataBoard';
@ -919,14 +913,7 @@ export default {
data3: '', data3: '',
roleStatus: '', //三维权限控制 roleStatus: '', //三维权限控制
highPic: {}, //接收第一张高频图片 highPic: {}, //接收第一张高频图片
highPicList: [], //存储高频图片 highPicList: [] //存储高频图片
timer1: null,
timer2: null,
timer3: null,
timer4: null,
imgMessagetimer: null,
imgMessage: '',
imgMessageNew: false
}; };
}, },
@ -955,11 +942,19 @@ export default {
this.videoAnalysisShow = false; this.videoAnalysisShow = false;
this.trafficAnalysisShow = false; this.trafficAnalysisShow = false;
this.createMqtt(); this.createMqtt();
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
} else if (this.$route.query.type == '离线视频') { } else if (this.$route.query.type == '离线视频') {
this.videoAnalysisShow = true; this.videoAnalysisShow = true;
this.trafficAnalysisShow = true; this.trafficAnalysisShow = true;
this.getAnalysisStatus(); this.getAnalysisStatus();
this.createMqtt(); this.createMqtt();
// if(this.$route.query.status=='未分析'){
// }
// if(this.$route.query.status=='未分析'){
// // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
// }else{
// }
} }
}, },
mounted() { mounted() {
@ -970,11 +965,6 @@ export default {
this.disable = true; this.disable = true;
this.roleStatus = 'false'; this.roleStatus = 'false';
} }
if (this.$route.query.type == '实时视频') {
this.imgMessagetimer = setInterval(() => {
this.setImgMessage();
}, 200);
}
}, },
methods: { methods: {
@ -1065,21 +1055,16 @@ export default {
}, },
// 数据看板的标签点击 // 数据看板的标签点击
handleClick: function (tab, event) { handleClick: function (tab, event) {
// console.log(tab) var that = this;
if (tab.name == 'first') { if (tab._props.name == 'second') {
if (this.$route.query.type == '实时视频') { that.$nextTick(() => {
//实时视频页面需要订阅的主题 //
this.videoTopicSends(); that.$refs.dataBoardRef.getNew();
} // setTimeout(() => {
} else if (tab.name == 'second') { // debugger
this.$nextTick(() => { // this.getHistory()
if (this.$route.query.type == '离线视频') { // }, 10000);
this.$refs.dataBoardRef.getNew(this.getHistory); this.getHistory();
} else {
//数据看板需要订阅的主题
this.dataBoardTopicSends();
this.$refs.dataBoardRef.getNew();
}
}); });
} }
}, },
@ -1110,74 +1095,38 @@ export default {
// 'simulator_target-' + this.$route.query.id // 'simulator_target-' + this.$route.query.id
]; ];
window.PubScribe(this.topicSends, '001', this.realInfo); window.PubScribe(this.topicSends, '001', this.realInfo);
this.timer1 = null; setTimeout(() => {
// this.timer1 = setTimeout(() => { this.getHistory();
// this.getHistory();
// }, 5000);
} 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); }, 5000);
}, } else if (this.$route.query.type == '实时视频') {
//实时视频页面需要订阅的主题
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() {
@ -1191,8 +1140,7 @@ export default {
} else if (res.data.data.videoAnalysisStatus == '分析中') { } else if (res.data.data.videoAnalysisStatus == '分析中') {
this.disabledVideoAnalysis = true; this.disabledVideoAnalysis = true;
this.videoUnityShow = false; this.videoUnityShow = false;
this.timer3 = null; setTimeout(() => {
this.timer3 = setTimeout(() => {
this.getAnalysisStatus(); this.getAnalysisStatus();
}, 5000); }, 5000);
} else if (res.data.data.videoAnalysisStatus == '已分析') { } else if (res.data.data.videoAnalysisStatus == '已分析') {
@ -1288,7 +1236,6 @@ export default {
}, },
//获取离线视频固定时刻固定间隔 //获取离线视频固定时刻固定间隔
getHistory() { getHistory() {
console.log('执行获取离线视频固定时刻固定间隔主题');
window.publish('GetCycleHistory', 'Get-' + this.$route.query.id); window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
}, },
getZhuanFaMQTT(topic, msg) { getZhuanFaMQTT(topic, msg) {
@ -1305,8 +1252,7 @@ export default {
message: '启动成功', message: '启动成功',
type: 'success' type: 'success'
}); });
this.timer4 = null; setTimeout(() => {
this.timer4 = setTimeout(() => {
this.getAnalysisStatus(); this.getAnalysisStatus();
}, 5000); }, 5000);
// if(this.videoAnalysisSta=='已分析'){ // if(this.videoAnalysisSta=='已分析'){
@ -1378,9 +1324,6 @@ export default {
//获取视频分析结果 //获取视频分析结果
analysisData() { analysisData() {
var ip = window.location.host.split(':')[0]; var ip = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') {
ip = '172.16.1.168';
}
// var ip = '172.16.1.168'; //http://172.16.1.168 // var ip = '172.16.1.168'; //http://172.16.1.168
//console.log('ip', ip); //console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => { getAnalysisData(this.$route.query.id, ip).then((res) => {
@ -1421,10 +1364,7 @@ export default {
//分析结束传参 //分析结束传参
postTraffic() { postTraffic() {
var ip = window.location.host.split(':')[0]; var ip = window.location.host.split(':')[0];
if (process.env.NODE_ENV === 'development') { // var ip = '172.16.1.168'; //http://172.16.1.168:5000
ip = '172.16.1.168';
}
// var ip = '172.16.1.168'; //http://172.16.1.168:80
//console.log('ip', ip); //console.log('ip', ip);
getAnalysisData(this.$route.query.id, ip).then((res) => { getAnalysisData(this.$route.query.id, ip).then((res) => {
//console.log('res.data.data', res.data.data); //console.log('res.data.data', res.data.data);
@ -1444,60 +1384,74 @@ export default {
}, },
/** 实时数据分类 */ /** 实时数据分类 */
realInfo(topic, message) { realInfo(topic, message) {
let mapModuleDom = document.getElementById('mapModule');
const utf8decoder = new TextDecoder();
switch (topic) { switch (topic) {
// 接收托片 // 接收托片
case 'img' + this.number: case 'img' + this.number:
// console.log('msg接受一张高频图片', moment().format('YYYY-MM-DD HH:mm:ss')); try {
this.imgMessage = message; const utf8decoder = new TextDecoder();
this.imgMessageNew = true; const u8arr = new Uint8Array(message);
// try { const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
// const u8arr = new Uint8Array(message); const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 // //console.log(msg, 'msg接受一张高频图片');
// const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
// // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg)); if (msg.rate == 'high') {
// if (msg.rate == 'high') { document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
// // console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss')); //接受一张高频图片
// mapModuleDom.contentWindow.getDestination(JSON.stringify(msg)); if (JSON.stringify(this.highPic) === '{}') {
// //接受一张高频图片 this.highPic = msg;
// if (JSON.stringify(this.highPic) === '{}') { // sessionStorage.setItem("highPic", this.highPic.pic);
// this.highPic = msg; // sessionStorage.setItem("videoId", this.highPic.id);
// // sessionStorage.setItem("highPic", this.highPic.pic); }
// // sessionStorage.setItem("videoId", this.highPic.id); this.highPicList = sessionStorage.getItem('highPicList')
// } ? JSON.parse(sessionStorage.getItem('highPicList'))
// //更新本地视频图片，给视频列表页面展示 : [];
// this.storageHighPicList(msg); if (this.highPicList.length == 0) {
// } else if (msg.rate == 'low') { this.highPicList.push({ pic: msg.pic, videoId: msg.id });
// this.analysisConfigurationdata = msg; sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList));
// } } else {
// } catch (error) { let found = false;
// // console.log('imgError',error) for (let i = 0; i < this.highPicList.length; i++) {
// } if (this.highPicList[i].videoId == msg.id) {
this.highPicList[i].pic = msg.pic;
found = true;
break; // 找到了就退出循环
}
}
if (!found) {
this.highPicList.push({ pic: msg.pic, videoId: msg.id });
}
sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList));
}
} else if (msg.rate == 'low') {
this.analysisConfigurationdata = msg;
}
} catch (error) {}
break; break;
// 树结构 // 树结构
case 'stream' + this.number: case 'stream' + this.number:
try { try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
// console.log('stream' + this.number, msg); document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
// console.log('Web收到：stream' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
mapModuleDom.contentWindow.getData(JSON.stringify(msg));
} catch (error) {} } catch (error) {}
break; break;
// 控制台输出 // 控制台输出
case 'trajectory' + this.number: case 'trajectory' + this.number:
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
mapModuleDom.contentWindow.getGuiJi(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
} catch (error) {} } catch (error) {}
break; break;
// 实时触发 // 实时触发
case 'detection' + this.number: case 'detection' + this.number:
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
@ -1511,25 +1465,26 @@ export default {
detId.push(msgN[i]); detId.push(msgN[i]);
} }
} }
mapModuleDom.contentWindow.getChuFa(JSON.stringify(detId)); document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
} }
} catch (error) {} } catch (error) {}
break; break;
case 'trigger-' + this.$route.query.id: case 'trigger-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame); // console.log('实时触发trigger-', msgN);
// console.log("trigger_msgN",msgN) // //console.log("trigger_msgN",msgN)
// msgN.forEach(item => { // msgN.forEach(item => {
// //console.log("item.name",item.name) // //console.log("item.name",item.name)
// }) // })
// for (const item of msgN) { // for (const item of msgN) {
// if (item.component_name == 'OD_0') { // if (item.name == 'gate3触发') {
// console.log('源头实时触发trigger-', item); // console.log('实时触发trigger-', item);
// } // }
// } // }
this.triggerListData = msgN; this.triggerListData = msgN;
@ -1538,6 +1493,7 @@ export default {
case 'cycle_time-' + this.$route.query.id: case 'cycle_time-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
@ -1549,27 +1505,24 @@ export default {
case 'cycle_history-' + this.$route.query.id: case 'cycle_history-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log('历史数据源头', msgN); //console.log('历史数据', msgN);
this.cycleHistoryData = msgN; this.cycleHistoryData = msgN;
} catch (error) {} } catch (error) {}
break; break;
case 'cycle_statistics-' + this.$route.query.id: case 'cycle_statistics-' + this.$route.query.id:
try { try {
// //console.log("trigger_msgN",message) // //console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log("cycle_statistics-固定间隔",temp) // console.log("cycle_statistics-固定间隔",temp)
// for (const item of msgN) {
// if (item.component_name == 'OD_0') {
// console.log('源头固定间隔cycle_statistics-', item);
// }
// }
this.cycleStatisticsData = msgN; this.cycleStatisticsData = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -1577,6 +1530,7 @@ export default {
try { try {
//周期统计实时累计数据主题 //周期统计实时累计数据主题
// console.log("trigger_msgN",message) // console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
@ -1590,6 +1544,7 @@ export default {
break; break;
case 'VideoStatusData': case 'VideoStatusData':
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1599,6 +1554,7 @@ export default {
break; break;
case 'TargetAnalysisStatusData': //目标监测 case 'TargetAnalysisStatusData': //目标监测
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1608,6 +1564,7 @@ export default {
break; break;
case 'TrafficAnalysisStatusData': //交通分析 case 'TrafficAnalysisStatusData': //交通分析
try { try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1617,61 +1574,20 @@ export default {
break; break;
case 'simulator_target-' + this.$route.query.id: //目标数量 case 'simulator_target-' + this.$route.query.id: //目标数量
try { try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
//console.log('simulator_target-目标数量', msg); //console.log('simulator_target-目标数量', msg);
mapModuleDom.contentWindow.getTargetNumber(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getTargetNumber(JSON.stringify(msg));
} catch (error) {} } catch (error) {}
break; break;
} }
// this.receiveNews = ''; this.receiveNews = '';
},
setImgMessage() {
if (this.imgMessage && this.imgMessageNew) {
// console.log('执行了setImgMessage');
this.imgMessageNew = false;
let mapModuleDom = document.getElementById('mapModule');
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(this.imgMessage);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
if (msg.rate == 'high') {
// console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
mapModuleDom.contentWindow.getDestination(JSON.stringify(msg));
//接受一张高频图片
if (JSON.stringify(this.highPic) === '{}') {
this.highPic = msg;
// sessionStorage.setItem("highPic", this.highPic.pic);
// sessionStorage.setItem("videoId", this.highPic.id);
}
//更新本地视频图片，给视频列表页面展示
this.storageHighPicList(_.cloneDeep(msg));
} else if (msg.rate == 'low') {
this.analysisConfigurationdata = msg;
}
}
},
storageHighPicList(msg) {
let highPicList = sessionStorage.getItem('highPicList') ? JSON.parse(sessionStorage.getItem('highPicList')) : [];
if (highPicList.length == 0) {
highPicList.push({ pic: msg.pic, videoId: msg.id });
} else {
let found = false;
for (let i = 0; i < highPicList.length; i++) {
if (highPicList[i].videoId == msg.id) {
highPicList[i].pic = msg.pic;
found = true;
break; // 找到了就退出循环
}
}
if (!found) {
highPicList.push({ pic: msg.pic, videoId: msg.id });
}
}
sessionStorage.setItem('highPicList', JSON.stringify(highPicList));
}, },
// handleClick(tab, event) {
// //console.log(tab, event);
// },
changeCompany(val) { changeCompany(val) {
//console.log('val', val); //console.log('val', val);
if (val == '小时') { if (val == '小时') {
@ -1708,11 +1624,8 @@ export default {
//初始化unity //初始化unity
OnSceneN() { OnSceneN() {
var ip = window.location.host; var ip = window.location.host;
// this.ipData = 'http://' + ip.split(':')[0] + ':80'; // this.ipData = 'http://' + ip.split(':')[0] + ':5000';
this.ipData = 'http://' + ip.split(':')[0]; this.ipData = 'http://' + ip.split(':')[0];
if (process.env.NODE_ENV === 'development') {
this.ipData = 'http://172.16.1.168';
}
document.getElementById('mapModule').contentWindow.getIpData(this.ipData); document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
// document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168'); // document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168');
if (this.$route.query.type == '离线视频') { if (this.$route.query.type == '离线视频') {
@ -1745,7 +1658,7 @@ export default {
this.componentId = id; this.componentId = id;
this.componentForm.componentType = type; this.componentForm.componentType = type;
this.componentTitle = type; this.componentTitle = type;
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => { getComponentData({ AnalogAreaComponentId: id }).then((res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
//console.log('res', res.data.data); //console.log('res', res.data.data);
@ -1788,7 +1701,7 @@ export default {
this.componentForm.endValue = res.data.data.endValue; this.componentForm.endValue = res.data.data.endValue;
this.componentForm.startValue = res.data.data.startValue; this.componentForm.startValue = res.data.data.startValue;
this.componentForm.presentationForm = res.data.data.presentationForm; this.componentForm.presentationForm = res.data.data.presentationForm;
await this.getAllSectionalData(this.$route.query.id); this.getAllSectionalData(this.$route.query.id);
// this.componentForm.typeFiltering = res.data.data.typeFiltering // this.componentForm.typeFiltering = res.data.data.typeFiltering
// this.componentForm.type = res.data.data.type // this.componentForm.type = res.data.data.type
if (res.data.data.startSectionIds != '') { if (res.data.data.startSectionIds != '') {
@ -1811,10 +1724,7 @@ export default {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
startSectionArr.push(items.graphicName); startSectionArr.push(items.graphicName);
}); });
if (startSectionArr.length > 0) { this.componentForm.startSection = startSectionArr;
this.componentForm.startSection = [startSectionArr[0]];
this.handleCheckedStartSection([startSectionArr[0]]);
}
} }
if (res.data.data.endSectionIds != '') { if (res.data.data.endSectionIds != '') {
//console.log('endSectionIds', res.data.data.endSectionIds); //console.log('endSectionIds', res.data.data.endSectionIds);
@ -1836,10 +1746,7 @@ export default {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
endSectionArr.push(items.graphicName); endSectionArr.push(items.graphicName);
}); });
if (endSectionArr.length > 0) { this.componentForm.endSection = endSectionArr;
this.componentForm.endSection = [endSectionArr[0]];
this.handleCheckedendSection([endSectionArr[0]]);
}
} }
if (this.componentForm.presentationForm != '') { if (this.componentForm.presentationForm != '') {
var arr = []; var arr = [];
@ -1859,9 +1766,8 @@ 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 == '图形') {
@ -1872,7 +1778,6 @@ export default {
getJianktxDetails({ GraphicId: this.form.id }).then((res) => { getJianktxDetails({ GraphicId: this.form.id }).then((res) => {
this.form.name = res.data.data.graphicName; this.form.name = res.data.data.graphicName;
this.form.type = res.data.data.graphicType; this.form.type = res.data.data.graphicType;
this.form.Direction = res.data.data.direction;
this.typeCheckList = res.data.data.type.split('|'); this.typeCheckList = res.data.data.type.split('|');
if (res.data.data.isPerceptualCoding == '0') { if (res.data.data.isPerceptualCoding == '0') {
this.switchValue = 0; this.switchValue = 0;
@ -1903,7 +1808,7 @@ export default {
this.componentId = id; this.componentId = id;
this.componentForm.componentType = componentType; this.componentForm.componentType = componentType;
this.componentTitle = componentType; this.componentTitle = componentType;
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => { getComponentData({ AnalogAreaComponentId: id }).then((res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
//console.log('res', res.data.data); //console.log('res', res.data.data);
@ -1942,7 +1847,6 @@ export default {
this.componentForm.startValue = res.data.data.startValue; this.componentForm.startValue = res.data.data.startValue;
this.componentForm.presentationForm = res.data.data.presentationForm; this.componentForm.presentationForm = res.data.data.presentationForm;
// this.componentForm.type = res.data.data.type // this.componentForm.type = res.data.data.type
await this.getAllSectionalData(this.$route.query.id);
if (res.data.data.startSectionIds != '') { if (res.data.data.startSectionIds != '') {
//console.log('startSectionIds', res.data.data.startSectionIds); //console.log('startSectionIds', res.data.data.startSectionIds);
var startSectionIdArr = []; var startSectionIdArr = [];
@ -1995,7 +1899,7 @@ export default {
}, },
//获取所有断面数据 //获取所有断面数据
getAllSectionalData(VideoId) { getAllSectionalData(VideoId) {
return getSectionalData({ VideoId: VideoId }).then((res) => { getSectionalData({ VideoId: VideoId }).then((res) => {
//console.log('res', res); //console.log('res', res);
if (res.data.code == 200) { if (res.data.code == 200) {
this.sectionals = res.data.data; this.sectionals = res.data.data;
@ -2044,7 +1948,7 @@ export default {
this.title = this.figureType(item); this.title = this.figureType(item);
this.orderShow = false; this.orderShow = false;
}, },
//右击图形修改图形名称弹框 //双击图形修改图形名称弹框
getModifyTheNameN(data, number) { getModifyTheNameN(data, number) {
this.orderShow = true; this.orderShow = true;
//console.log('data', data); //console.log('data', data);
@ -2198,8 +2102,7 @@ export default {
',' + ',' +
this.numberNew + this.numberNew +
',' + ',' +
form.Direction + form.Direction
',add'
) )
); );
} else { } else {
@ -2207,7 +2110,7 @@ export default {
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(
res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',add' res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ','
) )
); );
} }
@ -2310,25 +2213,14 @@ export default {
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(
form.id + form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',' + form.Direction
',' +
form.name +
',' +
this.startFigureName +
',' +
this.numberNew +
',' +
form.Direction +
',edit'
) )
); );
} else { } else {
document document
.getElementById('mapModule') .getElementById('mapModule')
.contentWindow.postFigureName( .contentWindow.postFigureName(
JSON.stringify( JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',')
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',edit'
)
); );
} }
@ -2569,10 +2461,6 @@ 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) {
@ -2591,10 +2479,6 @@ export default {
//console.log('改变终点', value); //console.log('改变终点', value);
var endSectionIdArr = []; var endSectionIdArr = [];
var endSectionNameArr = []; var endSectionNameArr = [];
if (value.length == 0) {
this.componentForm.endSectionIds = '';
this.componentForm.endSectionNames = '';
}
value.forEach((item) => { value.forEach((item) => {
this.sectionals.forEach((items) => { this.sectionals.forEach((items) => {
if (item == items.graphicName) { if (item == items.graphicName) {
@ -2657,18 +2541,6 @@ export default {
editModal, editModal,
analysisConfiguration, analysisConfiguration,
dataBoard dataBoard
},
beforeDestroy() {
// clearTimeout(this.timer1);
clearTimeout(this.timer2);
clearTimeout(this.timer3);
clearTimeout(this.timer4);
clearInterval(this.imgMessagetimer);
this.timer1 = null;
this.timer2 = null;
this.timer3 = null;
this.timer4 = null;
this.imgMessagetimer = null;
} }
}; };
</script> </script>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

2
vue.config.js
View File

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