Compare commits
No commits in common. "master" and "20231109" have entirely different histories.
|
|
@ -31,8 +31,7 @@
|
|||
"vue-router": "^3.0.3",
|
||||
"vue-schart": "^2.0.0",
|
||||
"vuedraggable": "^2.17.0",
|
||||
"vuex": "^3.6.2",
|
||||
"lodash": "^4.17.15"
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.9.0",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1 +1 @@
|
|||
http://172.16.1.168:80
|
||||
http://172.16.1.168:5000
|
||||
|
|
|
|||
|
|
@ -1,23 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Unity WebGL Player | Painter</title>
|
||||
<!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
</head>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
</head>
|
||||
<style>
|
||||
body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
</style>
|
||||
<body>
|
||||
<div id="unity-container" style="height: 100%;" class="unity-desktop">
|
||||
<canvas id="unity-canvas" width=1600 height=900></canvas>
|
||||
<div id="unity-loading-bar">
|
||||
|
|
@ -52,23 +49,19 @@
|
|||
// user.
|
||||
function unityShowBanner(msg, type) {
|
||||
function updateBannerVisibility() {
|
||||
if (warningBanner) {
|
||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
if (warningBanner) {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = msg;
|
||||
warningBanner.appendChild(div);
|
||||
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||
else {
|
||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
warningBanner.removeChild(div);
|
||||
updateBannerVisibility();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
updateBannerVisibility();
|
||||
}
|
||||
|
||||
|
|
@ -99,18 +92,14 @@
|
|||
meta.name = 'viewport';
|
||||
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||||
document.getElementsByTagName('head')[0].appendChild(meta);
|
||||
if (container) {
|
||||
container.className = "unity-mobile";
|
||||
}
|
||||
|
||||
|
||||
// To lower canvas resolution on mobile devices to gain some
|
||||
// performance, uncomment the following line:
|
||||
// config.devicePixelRatio = 1;
|
||||
if (canvas) {
|
||||
|
||||
canvas.style.width = window.innerWidth + 'px';
|
||||
canvas.style.height = window.innerHeight + 'px';
|
||||
}
|
||||
|
||||
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||||
} else {
|
||||
|
|
@ -121,233 +110,218 @@
|
|||
// canvas.style.width = window.innerWidth + 'px';
|
||||
// canvas.style.height = window.innerHeight + 'px';
|
||||
}
|
||||
if (loadingBar) {
|
||||
loadingBar.style.display = "block";
|
||||
}
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
var unity;
|
||||
var script = document.createElement("script");
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
if (canvas) {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
if (progressBarFull) {
|
||||
|
||||
progressBarFull.style.width = 100 * progress + "%";
|
||||
if (progressBarFull.style.width == 90 + "%") {
|
||||
if (black) {
|
||||
if(progressBarFull.style.width==90+"%"){
|
||||
black.style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}).then((unityInstance) => {
|
||||
unity = unityInstance
|
||||
if (loadingBar) {
|
||||
|
||||
loadingBar.style.display = "none";
|
||||
}
|
||||
// fullscreenButton.onclick = () => {
|
||||
// unityInstance.SetFullscreen(1);
|
||||
// };
|
||||
}).catch((message) => {
|
||||
alert('createUnityInstance' + message);
|
||||
alert(message);
|
||||
});
|
||||
}
|
||||
};
|
||||
//unity初始化
|
||||
function OnSceneLoaded() {
|
||||
if (black) {
|
||||
function OnSceneLoaded(){
|
||||
black.style.display = "none";
|
||||
}
|
||||
window.parent.OnScene();
|
||||
|
||||
}
|
||||
//初始化传离线视频数据功能
|
||||
function lixianVideo(string) {
|
||||
console.log("离线视频数据", string)
|
||||
if (unity != null) {
|
||||
unity.SendMessage('AAA', 'Unity_OfflineDataPrepare', string);
|
||||
function lixianVideo(string){
|
||||
console.log("离线视频数据",string)
|
||||
if(unity!=null){
|
||||
unity.SendMessage('AAA','Unity_OfflineDataPrepare', string);
|
||||
}
|
||||
}
|
||||
//获取ip
|
||||
function getIpData(string) {
|
||||
console.log("获取ip", string)
|
||||
if (unity != null) {
|
||||
unity.SendMessage('GameManager', 'SetIP', string);
|
||||
function getIpData(string){
|
||||
console.log("获取ip",string)
|
||||
if(unity!=null){
|
||||
unity.SendMessage('GameManager','SetIP', string);
|
||||
}
|
||||
}
|
||||
//获取图像
|
||||
function getDestination(string) {
|
||||
if (unity != null) {
|
||||
function getDestination(string){
|
||||
if(unity!=null){
|
||||
unity.SendMessage('AAA', 'SendImage', string);
|
||||
}
|
||||
}
|
||||
//获取图像id等数据
|
||||
function getData(string) {
|
||||
function getData(string){
|
||||
// console.log("string",string)
|
||||
if (unity != null) {
|
||||
if(unity!=null){
|
||||
unity.SendMessage('AAA', 'SendStream', string);
|
||||
}
|
||||
}
|
||||
//获取轨迹方法
|
||||
function getGuiJi(string) {
|
||||
if (unity != null) {
|
||||
function getGuiJi(string){
|
||||
if(unity!=null){
|
||||
unity.SendMessage('AAA', 'SendJT_GuiJi', string);
|
||||
}
|
||||
}
|
||||
//传触发数据
|
||||
function getChuFa(string) {
|
||||
function getChuFa(string){
|
||||
// console.log("string",string)
|
||||
if (unity != null) {
|
||||
if(unity!=null){
|
||||
unity.SendMessage('AAA', 'SendJT_JianCeQi', string);
|
||||
}
|
||||
}
|
||||
//获取图形数据
|
||||
function getfigureData(string, string1, string2) {
|
||||
function getfigureData(string,string1,string2){
|
||||
// console.log("图形类型",string)
|
||||
// console.log("图形名称",string1)
|
||||
// console.log("图形位置",string2)
|
||||
// numberNew 判断2-模拟区，1-画布区
|
||||
window.parent.getFigure(string, string1, string2, 1);
|
||||
}
|
||||
//获取分析状态
|
||||
function Status(jsonString) {
|
||||
window.parent.getStatus(jsonString);
|
||||
window.parent.getFigure(string,string1,string2,1);
|
||||
}
|
||||
//新增图形传图形id
|
||||
function postFigureId(string) {
|
||||
console.log("图形id", string)
|
||||
function postFigureId(string){
|
||||
console.log("图形id",string)
|
||||
// if(unity!=null){
|
||||
unity.SendMessage("GameManager", 'ReceivingPatternId', string);
|
||||
unity.SendMessage("GameManager",'ReceivingPatternId', string);
|
||||
//打开新增图形命名弹窗
|
||||
|
||||
// }
|
||||
}
|
||||
//打开修改图形名称弹框
|
||||
function modifyTheName(data) {
|
||||
console.log("图形名称弹框", data)
|
||||
window.parent.getModifyTheName(data, 1);
|
||||
function modifyTheName(data){
|
||||
console.log("图形名称弹框",data)
|
||||
window.parent.getModifyTheName(data,1);
|
||||
}
|
||||
//传单个视频id获取到单个视频配置下的所有图形
|
||||
function postVideoId(data) {
|
||||
console.log("所有图形id", data)
|
||||
if (unity != null) {
|
||||
unity.SendMessage("GameManager", 'ReceptionVideoId', data);
|
||||
function postVideoId(data){
|
||||
console.log("所有图形id",data)
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'ReceptionVideoId', data);
|
||||
}
|
||||
}
|
||||
//传修改好的名称
|
||||
function postFigureName(data) {
|
||||
console.log("修改好的名称", data)
|
||||
if (unity != null) {
|
||||
unity.SendMessage("GameManager", 'ReceiveModifiedName', data);
|
||||
function postFigureName(data){
|
||||
console.log("修改好的名称",data)
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'ReceiveModifiedName', data);
|
||||
}
|
||||
}
|
||||
//新增图形点击取消
|
||||
function delFigure() {
|
||||
if (unity != null) {
|
||||
unity.SendMessage("GameManager", 'DestoryMyLine');
|
||||
function delFigure(){
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'DestoryMyLine');
|
||||
}
|
||||
}
|
||||
//获取组件id
|
||||
function getComponentId(id, type, name) {
|
||||
console.log("id", id)
|
||||
console.log("type", type)
|
||||
console.log("name", name)
|
||||
window.parent.getSingleComponentId(id, type, name);
|
||||
function getComponentId(id,type,name){
|
||||
console.log("id",id)
|
||||
console.log("type",type)
|
||||
console.log("name",name)
|
||||
window.parent.getSingleComponentId(id,type,name);
|
||||
// window.parent.getSingleComponentId('a840492e26354c0a851fecd675e9f59a');
|
||||
}
|
||||
//退出编辑图形
|
||||
function closeEdit(data) {
|
||||
function closeEdit(data){
|
||||
// type,id
|
||||
// console.log("type",type)
|
||||
console.log("data", data)
|
||||
if (unity != null) {
|
||||
unity.SendMessage("GameManager", 'ExitEdit', data);
|
||||
console.log("data",data)
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'ExitEdit',data);
|
||||
}
|
||||
}
|
||||
//检测器目标数量
|
||||
function getTargetNumber(string) {
|
||||
if (unity != null) {
|
||||
function getTargetNumber(string){
|
||||
if(unity!=null){
|
||||
unity.SendMessage('GameManager', 'UnityUpdateTargetNumber', string);
|
||||
}
|
||||
}
|
||||
//编辑组件名称传名称
|
||||
function editComponent(data) {
|
||||
function editComponent(data){
|
||||
// type,id
|
||||
console.log("data", data)
|
||||
if (unity != null) {
|
||||
unity.SendMessage("GameManager", 'Unity_UpdateInstanceName', data);
|
||||
console.log("data",data)
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'Unity_UpdateInstanceName',data);
|
||||
}
|
||||
}
|
||||
//编辑模拟区域组件交互弹窗
|
||||
function simulationAreaEdit(id, type, componentType, name) {
|
||||
console.log("id", id)
|
||||
console.log("type", type)
|
||||
console.log("组件类型", componentType)
|
||||
console.log("组件名称", name)
|
||||
window.parent.getSimulationAreaEdit(id, type, componentType, name, 2);
|
||||
function simulationAreaEdit(id,type,componentType,name){
|
||||
console.log("id",id)
|
||||
console.log("type",type)
|
||||
console.log("组件类型",componentType)
|
||||
console.log("组件名称",name)
|
||||
window.parent.getSimulationAreaEdit(id,type,componentType,name,2);
|
||||
}
|
||||
//获取左侧区域删除图形或断面成功后返回的数据
|
||||
function getdeleData(data) {
|
||||
console.log("id", data)
|
||||
if (data != null) {
|
||||
function getdeleData(data){
|
||||
console.log("id",data)
|
||||
if(data != null){
|
||||
window.parent.delSuccess()
|
||||
}
|
||||
|
||||
}
|
||||
//新增获取颜色
|
||||
function addColor(string, string1) {
|
||||
function addColor(string,string1){
|
||||
// console.log("i1111",string)
|
||||
// console.log("i2222",string1)
|
||||
if (unity != null) {
|
||||
unity.SendMessage("GameManager", 'Unity_AllGraphicsNotified');
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'Unity_AllGraphicsNotified');
|
||||
}
|
||||
}
|
||||
//控制角色权限管理
|
||||
function getRoleStatus(roleStatus) {
|
||||
console.log(roleStatus, 'roleStatus')
|
||||
if (unity != null) {
|
||||
unity.SendMessage("GameManager", 'Unity_Role_Privilege', roleStatus);
|
||||
function getRoleStatus(roleStatus){
|
||||
console.log(roleStatus,'roleStatus')
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'Unity_Role_Privilege',roleStatus);
|
||||
}
|
||||
}
|
||||
//传参mqtt
|
||||
function ZhuanFaMQTT(topic, msg) {
|
||||
function ZhuanFaMQTT(topic,msg){
|
||||
|
||||
window.parent.getZhuanFaMQTT(topic, msg);
|
||||
window.parent.getZhuanFaMQTT(topic,msg);
|
||||
//
|
||||
}
|
||||
//双击接口编辑
|
||||
function simulationAreaInterfaceEdit(data, data2, data3) {
|
||||
function simulationAreaInterfaceEdit(data,data2,data3){
|
||||
|
||||
console.log("simulationAreaInterfaceEdit", data)
|
||||
console.log("simulationAreaInterfaceEdit2", data2)
|
||||
console.log("simulationAreaInterfaceEdit3", data3)
|
||||
console.log("simulationAreaInterfaceEdit",data)
|
||||
console.log("simulationAreaInterfaceEdit2",data2)
|
||||
console.log("simulationAreaInterfaceEdit3",data3)
|
||||
// if(data!=undefined){
|
||||
// window.parent.getZhuanFaMQTT(data,data2,data3);
|
||||
// }
|
||||
}
|
||||
//生成时调用
|
||||
function getInterfaceComponentId(data, data2, data3) {
|
||||
function getInterfaceComponentId(data,data2,data3){
|
||||
|
||||
console.log("getInterfaceComponentId", data) //接口组件id
|
||||
console.log("data2", data2) //组件id
|
||||
console.log("data3", data3) //类型
|
||||
if (data != undefined) {
|
||||
console.log("getInterfaceComponentId",data)//接口组件id
|
||||
console.log("data2",data2)//组件id
|
||||
console.log("data3",data3)//类型
|
||||
if(data!=undefined){
|
||||
// window.parent.getZhuanFaMQTT(data,data2,data3);
|
||||
}
|
||||
}
|
||||
|
||||
function AddMonqjktx_Error(data) {
|
||||
console.log("AddMonqjktx_Error", data)
|
||||
function AddMonqjktx_Error(data){
|
||||
console.log("AddMonqjktx_Error",data)
|
||||
window.parent.AddMonqjktx_Error(data);
|
||||
}
|
||||
document.body.appendChild(script);
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
#unity-container.unity-desktop::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
#unity-container.unity-desktop::-webkit-scrollbar{
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1 +1 @@
|
|||
http://172.16.1.168:80
|
||||
http://172.16.1.168:5000
|
||||
|
|
|
|||
|
|
@ -49,15 +49,11 @@
|
|||
// user.
|
||||
function unityShowBanner(msg, type) {
|
||||
function updateBannerVisibility() {
|
||||
if (warningBanner) {
|
||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
if (warningBanner) {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = msg;
|
||||
warningBanner.appendChild(div);
|
||||
|
||||
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||
else {
|
||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||
|
|
@ -66,7 +62,6 @@
|
|||
updateBannerVisibility();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
updateBannerVisibility();
|
||||
}
|
||||
|
||||
|
|
@ -103,42 +98,35 @@
|
|||
// To lower canvas resolution on mobile devices to gain some
|
||||
// performance, uncomment the following line:
|
||||
// config.devicePixelRatio = 1;
|
||||
if (canvas) {
|
||||
|
||||
canvas.style.width = window.innerWidth + 'px';
|
||||
canvas.style.height = window.innerHeight + 'px';
|
||||
}
|
||||
|
||||
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||||
} else {
|
||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||
if (canvas) {
|
||||
|
||||
canvas.style.width = "100%";
|
||||
canvas.style.height = "100%";
|
||||
}
|
||||
}
|
||||
if (loadingBar) {
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
}
|
||||
|
||||
var script = document.createElement("script");
|
||||
var unityInstanceA
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
if (canvas) {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
progressBarFull.style.width = 100 * progress + "%";
|
||||
}).then((unityInstance) => {
|
||||
unityInstanceA = unityInstance
|
||||
if (loadingBar) {
|
||||
loadingBar.style.display = "none";
|
||||
}
|
||||
fullscreenButton.onclick = () => {
|
||||
unityInstance.SetFullscreen(1);
|
||||
};
|
||||
}).catch((message) => {
|
||||
alert('createUnityInstance' + message);
|
||||
alert(message);
|
||||
});
|
||||
}
|
||||
};
|
||||
//unity初始化
|
||||
function OnSceneLoaded() {
|
||||
|
|
@ -148,7 +136,6 @@
|
|||
function Started() {
|
||||
window.parent.started();
|
||||
}
|
||||
|
||||
function getDianwei(string) {
|
||||
unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string));
|
||||
}
|
||||
|
|
@ -217,8 +204,8 @@
|
|||
unityInstanceA.SendMessage('AAA', 'ChosePoint', params);
|
||||
}
|
||||
//新增点
|
||||
function addPoint(id, name) {
|
||||
let params = id + ',' + name
|
||||
function addPoint(id,name) {
|
||||
let params = id+','+name
|
||||
unityInstanceA.SendMessage('AAA', 'AddPoint', params);
|
||||
}
|
||||
//删除点
|
||||
|
|
@ -230,9 +217,9 @@
|
|||
unityInstanceA.SendMessage('AAA', 'EditorPoint', params);
|
||||
}
|
||||
//完成编辑
|
||||
function editorOverPoint(id, name) {
|
||||
let params = id + ',' + name
|
||||
console.log(params, 'params');
|
||||
function editorOverPoint(id,name) {
|
||||
let params = id+','+name
|
||||
console.log(params,'params');
|
||||
unityInstanceA.SendMessage('AAA', 'EditorOverPoint', params);
|
||||
}
|
||||
document.body.appendChild(script);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -10,68 +10,58 @@
|
|||
video::-webkit-media-controls-timeline {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 播放按钮 */
|
||||
video::-webkit-media-controls-play-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* //进度条 */
|
||||
video::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* //观看的当前时间 */
|
||||
video::-webkit-media-controls-current-time-display {
|
||||
video::-webkit-media-controls-current-time-display{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* //剩余时间 */
|
||||
video::-webkit-media-controls-time-remaining-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* //音量按钮 */
|
||||
video::-webkit-media-controls-mute-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-toggle-closed-captions-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* //音量的控制条 */
|
||||
video::-webkit-media-controls-volume-slider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-overflow-button {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<script src="flv.min.js"></script>
|
||||
<video id="videoElement" style="width: 381px;height: 214px;" muted controls="controls"></video>
|
||||
<video id="videoElement" style="width: 381px;height: 214px;" muted controls="controls" ></video>
|
||||
|
||||
<script>
|
||||
var ip = window.location.host;
|
||||
if (flvjs.isSupported()) {
|
||||
// console.log("getParam('src')-", getParam('src'));
|
||||
// console.log("getSrcParam('src')-", getSrcParam());
|
||||
console.log(getParam('src'),"getParam('src')");
|
||||
var videoElement = document.getElementById('videoElement');
|
||||
var flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
isLive: true,
|
||||
url: getNewurl(), //新逻辑
|
||||
// url: 'ws://172.16.1.168:12309/rtsp/1/a/?url=' + getParam('src').replace(/\s+/g, '')
|
||||
// url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
|
||||
// url: 'ws://172.16.1.168:12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
|
||||
// url:getParam('src')
|
||||
url:'ws://'+ip.split(':')[0]+':12309/rtsp/1/a/?url='+getParam('src').replace(/\s+/g, '')
|
||||
});
|
||||
flvPlayer.attachMediaElement(videoElement);
|
||||
flvPlayer.load();
|
||||
flvPlayer.play();
|
||||
// 监听 video 标签的事件，防止用户手动暂停
|
||||
videoElement.addEventListener('pause', function (e) {
|
||||
videoElement.addEventListener('pause', function(e) {
|
||||
e.preventDefault();
|
||||
videoElement.play(); // 重新播放视频
|
||||
});
|
||||
|
|
@ -83,34 +73,6 @@
|
|||
var r = location.search.substr(1).match(reg);
|
||||
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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -40,7 +40,7 @@ export const getStopAlgorithm = params => {
|
|||
});
|
||||
};
|
||||
//分析-传视频类型设置接口
|
||||
// http://localhost:80/api/SetVideoMode?Mode=离线视频
|
||||
// http://localhost:5000/api/SetVideoMode?Mode=离线视频
|
||||
export const getSetVideoMode = params => {
|
||||
return axios.get('api/SetVideoMode', {
|
||||
params
|
||||
|
|
|
|||
|
|
@ -1,20 +1,12 @@
|
|||
<template>
|
||||
<!-- 均值图 -->
|
||||
<div style="width: 100%; margin-top: 5px">
|
||||
<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;
|
||||
"
|
||||
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>
|
||||
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
|
||||
|
|
@ -43,20 +35,16 @@ export default {
|
|||
},
|
||||
status: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
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);
|
||||
|
|
@ -76,7 +64,7 @@ export default {
|
|||
{
|
||||
type: 'category',
|
||||
gridIndex: 0,
|
||||
data: chartData.map((item) => item.stage),
|
||||
data: chartData.map(item => item.stage),
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -218,7 +206,7 @@ export default {
|
|||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', function () {
|
||||
window.addEventListener('resize', function() {
|
||||
myChart.resize();
|
||||
});
|
||||
// this.$nextTick(() => {
|
||||
|
|
@ -230,7 +218,9 @@ export default {
|
|||
mounted() {
|
||||
// this.drawBar(this.typeValue);
|
||||
},
|
||||
watch: {}
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'barChart', //饼图组件
|
||||
props: {
|
||||
|
|
@ -56,7 +55,7 @@ export default {
|
|||
drawBar(newVal) {
|
||||
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
|
||||
var xData = newVal.type_data.map((ele) => {
|
||||
return getNameFromTargetType(ele.name);
|
||||
return ele.name;
|
||||
});
|
||||
var yData = newVal.type_data.map((ele) => {
|
||||
return ele.quantity;
|
||||
|
|
@ -72,10 +71,10 @@ export default {
|
|||
confine: true
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '0%',
|
||||
top: '5%',
|
||||
left: '2%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
|
|
@ -87,10 +86,8 @@ export default {
|
|||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
fontSize: 12,
|
||||
color: '#000',
|
||||
rotate: 30
|
||||
color: '#000'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="down">
|
||||
<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>
|
||||
<el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="val1">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'lineChart', //折线图组件
|
||||
props: {
|
||||
|
|
@ -81,22 +80,7 @@ export default {
|
|||
// 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'
|
||||
show: true
|
||||
},
|
||||
name: 'km/h',
|
||||
series: [],
|
||||
|
|
@ -191,15 +175,7 @@ export default {
|
|||
// 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 = [
|
||||
|
|
@ -219,97 +195,52 @@ export default {
|
|||
|
||||
if (title === '类型') {
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}个',
|
||||
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'
|
||||
confine: true
|
||||
};
|
||||
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;
|
||||
let arr = newVal.map(function (ele) {
|
||||
if (ele.type_data != null) {
|
||||
return ele.type_data;
|
||||
}
|
||||
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({
|
||||
name: getNameFromTargetType(item.name),
|
||||
data: valueList,
|
||||
name: ele.name,
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
});
|
||||
});
|
||||
}
|
||||
mapN.forEach((ele, index) => {
|
||||
if (lineArr[index] && lineArr[index].data) {
|
||||
lineArr[index].data.push(ele.quantity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if (ele.name == '机动车') {
|
||||
// lineArr[0].data.push(ele.quantity);
|
||||
// } else if (ele.name == '非机动车') {
|
||||
// lineArr[1].data.push(ele.quantity);
|
||||
// } else {
|
||||
// lineArr[2].data.push(ele.quantity);
|
||||
// }
|
||||
});
|
||||
if (lineArr && lineArr.length > 0) {
|
||||
for (let j = 0; j < lineArr.length; j++) {
|
||||
series.push(lineArr[j]);
|
||||
|
|
@ -320,12 +251,8 @@ export default {
|
|||
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;
|
||||
var sum = ele.type_data.reduce(function (prev, cur) {
|
||||
return cur.quantity + prev;
|
||||
}, 0);
|
||||
mapNR1.push(sum);
|
||||
}
|
||||
|
|
@ -370,9 +297,6 @@ export default {
|
|||
};
|
||||
series[0].data = newVal.map((val) => {
|
||||
if (timeMode == '固定间隔') {
|
||||
if (val.ave_headway == -1) {
|
||||
return '-';
|
||||
}
|
||||
return val.ave_headway;
|
||||
} else {
|
||||
return val.headway;
|
||||
|
|
@ -427,19 +351,7 @@ export default {
|
|||
// 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
|
||||
// }
|
||||
}
|
||||
watch: {}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@
|
|||
margin-right: 8px;
|
||||
"
|
||||
></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 id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
|
||||
|
|
@ -21,28 +24,27 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'pieChart', //饼图图组件
|
||||
name: "pieChart", //饼图图组件
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
componentName: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
chartName: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
typeValue: {
|
||||
type: Object
|
||||
type: Object,
|
||||
},
|
||||
status: {
|
||||
type: String
|
||||
}
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
|
@ -50,22 +52,16 @@ export default {
|
|||
created() {},
|
||||
methods: {
|
||||
drawPie(newVal) {
|
||||
// var legend = [];
|
||||
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
|
||||
// var legend = newVal.type_data.map((ele) => {
|
||||
// return ele.name;
|
||||
// });
|
||||
if (newVal&&newVal.type_data&&newVal.type_data.length>0) {
|
||||
var legend = newVal.type_data.map((ele) => {
|
||||
return ele.name;
|
||||
});
|
||||
var seriesData = [];
|
||||
newVal.type_data.forEach((ele) => {
|
||||
// console.log(JSON.stringify(ele))
|
||||
if (ele.quantity != 0) {
|
||||
seriesData.push({
|
||||
name: getNameFromTargetType(ele.name),
|
||||
value: ele.quantity
|
||||
name: ele.name,
|
||||
value: ele.quantity,
|
||||
});
|
||||
// legend.push(ele.name)
|
||||
}
|
||||
|
||||
});
|
||||
this.drawPie();
|
||||
}
|
||||
|
|
@ -74,22 +70,22 @@ export default {
|
|||
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'
|
||||
"#0CD2E6",
|
||||
"#3751E6",
|
||||
"#FFC722",
|
||||
"#00FFFF",
|
||||
"#00FF80",
|
||||
"#FFEA00",
|
||||
"#FF7300",
|
||||
"#9500B3",
|
||||
"#3377FF",
|
||||
"#5087EC",
|
||||
"#68BBC4",
|
||||
"#58A55C",
|
||||
"#F2BD42",
|
||||
"#EE752F",
|
||||
"#D95040",
|
||||
"#14CAFB"
|
||||
];
|
||||
let option = {
|
||||
// title: {
|
||||
|
|
@ -103,60 +99,58 @@ export default {
|
|||
animation: false,
|
||||
legend: {
|
||||
top: 20,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
orient: 'vertical',
|
||||
right: "center",
|
||||
textStyle: {},
|
||||
// data: legend
|
||||
data: legend,
|
||||
},
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['30%', '55%'],
|
||||
radius: '70%',
|
||||
type: "pie",
|
||||
center: ["50%", "55%"],
|
||||
radius: "70%",
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
length: 0,
|
||||
length2: 0
|
||||
length2: 0,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{value|{c}}',
|
||||
position: "inside",
|
||||
formatter: "{value|{c}}",
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 20,
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
color: "#ffffff",
|
||||
},
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
data: seriesData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', function () {
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
// this.$nextTick(() => {
|
||||
// myChart.setOption(option)
|
||||
// myChart.resize();
|
||||
// })
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
// 监听单个的数据
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
<template>
|
||||
|
||||
<!-- 区域的表格 -->
|
||||
<div class="tableContent">
|
||||
<!-- <div class="down">
|
||||
<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>
|
||||
|
||||
|
||||
<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="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>
|
||||
|
|
@ -46,27 +45,14 @@
|
|||
<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-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
||||
</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="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>
|
||||
|
|
@ -90,29 +76,17 @@
|
|||
<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-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
||||
</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="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>
|
||||
|
|
@ -137,34 +111,18 @@
|
|||
<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-column align="center" prop="speed" label="平均速度"></el-table-column>
|
||||
</el-table>
|
||||
</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-item label="val1">
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
v-model="startTime"
|
||||
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
||||
>
|
||||
<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 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">
|
||||
|
|
@ -193,25 +151,21 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
import tableShow from './tableShow.vue';
|
||||
export default {
|
||||
components: { tableShow },
|
||||
name: 'tableShow', //表格组件
|
||||
props: {
|
||||
msg: {
|
||||
type: Array
|
||||
type: Array,
|
||||
// default() {
|
||||
// return [];
|
||||
// }
|
||||
},
|
||||
triggerType: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getNameFromTargetType,
|
||||
dialogVisible: false,
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
|
|
@ -229,9 +183,9 @@ export default {
|
|||
mounted() {
|
||||
// console.log(this.type,'129129');
|
||||
},
|
||||
watch: {
|
||||
msg: {
|
||||
handler(newVal) {
|
||||
watch:{
|
||||
msg:{
|
||||
handler(newVal){
|
||||
// console.log(newVal,'流量数据table');
|
||||
}
|
||||
}
|
||||
|
|
@ -239,14 +193,12 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .el-table {
|
||||
// height: 709px !important;
|
||||
// overflow-y: scroll;
|
||||
z-index: 900;
|
||||
}
|
||||
.el-table::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
/deep/ .el-table{
|
||||
height: 709px !important;
|
||||
overflow-y: scroll;
|
||||
z-index: 9999;
|
||||
}
|
||||
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||
.tableContent {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,25 @@
|
|||
<template>
|
||||
<!-- 断面的表格 -->
|
||||
<div class="tableContent">
|
||||
<!-- <div class="down">
|
||||
<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>
|
||||
<!-- 实时触发 -->
|
||||
|
||||
<!-- 实时触发 -->
|
||||
<div v-if="msg && msg.length > 0">
|
||||
<el-table :data="msg" height="609" style="width: 100%;" v-if="triggerType == '实时触发'">
|
||||
<div v-if="msg">
|
||||
<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>
|
||||
|
|
@ -44,72 +41,18 @@
|
|||
<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-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
||||
|
||||
</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="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>
|
||||
|
|
@ -130,63 +73,28 @@
|
|||
<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-column align="center" prop="in_spd" label="入流平均速度"></el-table-column>
|
||||
<el-table-column align="center" prop="out_spd" label="出流平均速度"></el-table-column>
|
||||
<el-table-column align="center" prop="speed" label="断面的平均速度"></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-dialog title="编辑" :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 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 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-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">
|
||||
|
|
@ -210,7 +118,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'tableShow', //表格组件
|
||||
props: {
|
||||
|
|
@ -226,7 +133,6 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
getNameFromTargetType,
|
||||
dialogVisible: false,
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
|
|
@ -256,15 +162,6 @@ export default {
|
|||
value: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
msg: {
|
||||
handler(newVal) {
|
||||
// console.log('断面', newVal);
|
||||
// console.log('断面-triggerType', this.triggerType);
|
||||
}
|
||||
// immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
// 用户名下拉菜单选择事件
|
||||
|
|
@ -272,21 +169,19 @@ export default {
|
|||
this.dialogVisible = true;
|
||||
}
|
||||
},
|
||||
onSubmit() {},
|
||||
handleClose() {}
|
||||
onSubmit() { },
|
||||
handleClose() { }
|
||||
},
|
||||
mounted() {}
|
||||
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;
|
||||
/deep/ .el-table{
|
||||
height: 709px !important;
|
||||
overflow-y: scroll;
|
||||
z-index: 9999;
|
||||
}
|
||||
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||
.tableContent {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ export default {
|
|||
name: 'thermalChart', //热点图组件
|
||||
data() {
|
||||
return {
|
||||
thermalChartData: []
|
||||
thermalChartData:[]
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
|
|
@ -23,7 +25,7 @@ export default {
|
|||
},
|
||||
title: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
// status: {
|
||||
// type: String
|
||||
// },
|
||||
|
|
@ -36,65 +38,48 @@ export default {
|
|||
ODhanlde(odData) {
|
||||
// console.log(odData,'oddata');
|
||||
// var odData = this.odData
|
||||
var chartData = [];
|
||||
var start = [];
|
||||
if (odData && odData.length > 0) {
|
||||
var chartData = []
|
||||
var start = []
|
||||
for (let i = 0; i < odData.length; i++) {
|
||||
let item = odData[i].data;
|
||||
if (item && item.length > 0) {
|
||||
let item = odData[i].data
|
||||
for (let j = 0; j < item.length; j++) {
|
||||
start.push(item[j].start);
|
||||
start.push(item[j].start)
|
||||
// 数组去重
|
||||
|
||||
// od图的数据
|
||||
chartData.push([i, j, item[j].quantity]);
|
||||
chartData.push([i, j, item[j].quantity])
|
||||
// console.log([i,j,item[j].val]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// this.thermalChartData = chartData
|
||||
// console.log(chartData,'处理过后的odssssssssssssss');
|
||||
return chartData;
|
||||
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);
|
||||
let newArr = []
|
||||
arr.forEach(item => {
|
||||
return newArr.includes(item) ? '' : newArr.push(item)
|
||||
})
|
||||
return newArr
|
||||
},
|
||||
// 绘制热力图
|
||||
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 option = {
|
||||
dataZoom: [
|
||||
{
|
||||
id: 'dataZoomY',
|
||||
type: 'slider',
|
||||
id: "dataZoomY",
|
||||
type: "slider",
|
||||
yAxisIndex: [0],
|
||||
startValue: 0,
|
||||
endValue: 10,
|
||||
filterMode: 'empty'
|
||||
}
|
||||
filterMode: "empty",
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
position: "top",
|
||||
// formatter: function (params) {
|
||||
// return (
|
||||
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
|
||||
|
|
@ -103,83 +88,81 @@ export default {
|
|||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '8%',
|
||||
bottom: '8%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "8%",
|
||||
bottom: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: startEndStart,
|
||||
type: "category",
|
||||
data: startEnd.start.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
rotate: 40,
|
||||
},
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
// name: "镇街",
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: startEndEnd,
|
||||
type: "category",
|
||||
data: startEnd.end.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
rotate: 40,
|
||||
},
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
// name: "",
|
||||
},
|
||||
visualMap: {
|
||||
min: 1,
|
||||
max: 50,
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
bottom: '1%',
|
||||
text: ['50', '1'], // 文本，默认为数值文本
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
bottom: "1%",
|
||||
text: ["50", "1"], // 文本，默认为数值文本
|
||||
//color:['#20a0ff','#D2EDFF'],
|
||||
calculable: false,
|
||||
color: ['#22DDDD', '#fec42c', '#80F1BE']
|
||||
color: ["#22DDDD", "#fec42c", "#80F1BE"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'OD图',
|
||||
type: 'heatmap',
|
||||
name: "OD图",
|
||||
type: "heatmap",
|
||||
data: this.ODhanlde(odData),
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
shadowColor: "rgba(120, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
if (myChart) {
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// myChart.setOption(option)
|
||||
// myChart.resize();
|
||||
|
|
@ -190,13 +173,12 @@ export default {
|
|||
// if (this.list) {
|
||||
// this.drawThermalChart()
|
||||
// }
|
||||
this.drawThermalChart()
|
||||
|
||||
|
||||
},
|
||||
watch: {}
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.a{
|
||||
color: rgba(120, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,129 +1,268 @@
|
|||
<template>
|
||||
<div :id="echartsRef" ref="echartsBar"></div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'echartsBar',
|
||||
<script>
|
||||
export default {
|
||||
name: "echartsBar", //折线图组件
|
||||
props: {
|
||||
intersectionName: { type: Array, default: () => [] },
|
||||
chatShowType: { type: String },
|
||||
echartsRef: { type: String },
|
||||
dataList: { type: Array, default: () => [] },
|
||||
timeMode: { type: String },
|
||||
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: [] },
|
||||
chartData: {
|
||||
yData: [],
|
||||
xData: [],
|
||||
}, //表格数据
|
||||
seriesList: [], //类型数组
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
option() {
|
||||
return {
|
||||
color: ['#7262FD', '#FC5A5A'],
|
||||
tooltip: { confine: true },
|
||||
grid: { top: '5%', left: '5%', right: '5%', bottom: '0%', containLabel: true },
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
//传值对应字段返回相应字段数组
|
||||
initEcharts() {
|
||||
// if (this.dataList.length > 10) {
|
||||
// this.dataList = this.dataList.slice(-10);
|
||||
// }
|
||||
if (this.timeMode == "实时触发") {
|
||||
this.chartData.xData = [];
|
||||
this.chartData.yData = [];
|
||||
// debugger;
|
||||
// if (this.dataList[0].type_data.length > 0) {
|
||||
// for (let i = 0; i < this.dataList[0].type_data.length; i++) {
|
||||
// this.chartData.yData.push(this.dataList[0].type_data[i].quantity);
|
||||
// this.chartData.xData.push(this.dataList[0].type_data[i].name);
|
||||
// }
|
||||
// }
|
||||
if(this.dataList.length>0&&this.dataList[0].type_data){
|
||||
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
||||
if (this.dataList[0].type_data[j].value == undefined) {
|
||||
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||
} else {
|
||||
this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (this.timeMode == "固定时刻") {
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
// this.chartData.xData = [];
|
||||
// this.chartData.yData = [];
|
||||
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
|
||||
// if (this.dataList[i].type_data[j].value == undefined) {
|
||||
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
|
||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||
// } else {
|
||||
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
|
||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
this.chartData.xData = [];
|
||||
this.chartData.yData = [];
|
||||
if(this.dataList.length>0&&this.dataList[0].type_data){
|
||||
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
||||
if (this.dataList[0].type_data[j].value == undefined) {
|
||||
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||
} else {
|
||||
this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (this.timeMode == "固定间隔") {
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
// this.chartData.xData = [];
|
||||
// this.chartData.yData = [];
|
||||
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
|
||||
// if (this.dataList[i].type_data[j].value == undefined) {
|
||||
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
|
||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||
// } else {
|
||||
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
|
||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
this.chartData.xData = [];
|
||||
this.chartData.yData = [];
|
||||
if(this.dataList.length>0&&this.dataList[0].type_data){
|
||||
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
||||
if (this.dataList[0].type_data[j].value == undefined) {
|
||||
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||
} else {
|
||||
this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let myChart = this.chart;
|
||||
let option = {
|
||||
color: ["#7262FD", "#FC5A5A"],
|
||||
tooltip: {
|
||||
confine: true,
|
||||
},
|
||||
grid: {
|
||||
top: "30%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: this.chartData.xData,
|
||||
axisLine: { lineStyle: { color: '#000' } },
|
||||
axisLabel: { interval: 0, fontSize: 12, color: '#000', rotate: 30 },
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: "#000",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
min: 0,
|
||||
minInterval: 1,
|
||||
splitArea: { show: false },
|
||||
axisLine: { show: true },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#eeebeb', type: 'dashed' } },
|
||||
axisLabel: { fontSize: 12, color: '#000', fontFamily: 'Bebas' },
|
||||
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',
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
|
||||
name: '时间',
|
||||
name: "时间",
|
||||
data: this.chartData.yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
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(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());
|
||||
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';
|
||||
|
||||
$dom.style.width = "440px";
|
||||
$dom.style.height = "260px";
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.chart = this.$echarts.init(this.$el);
|
||||
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
this.initEcharts();
|
||||
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() {
|
||||
this.$nextTick(this.initEcharts);
|
||||
handler: function (oldValues, newValues) {
|
||||
this.$nextTick(() => {
|
||||
this.initEcharts();
|
||||
});
|
||||
},
|
||||
},
|
||||
chatShowType: { handler() {} },
|
||||
chatShowType: {
|
||||
handler: function (oldValues, newValues) {},
|
||||
},
|
||||
echartsRef: {
|
||||
handler() {
|
||||
setTimeout(() => this.$nextTick(this.initEcharts), 300);
|
||||
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() {
|
||||
this.$nextTick(this.initEcharts);
|
||||
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 {
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#echartsBar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'echartsLine', //折线图组件
|
||||
props: {
|
||||
|
|
@ -64,45 +63,9 @@ export default {
|
|||
if (key == 'speed' && item[key]) {
|
||||
return Math.abs(item[key]);
|
||||
}
|
||||
if ((key == 'ave_headway' || key == 'headway') && item[key]) {
|
||||
if (item[key] == -1) {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
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) {
|
||||
if (val && val.length > 10) {
|
||||
|
|
@ -110,64 +73,41 @@ export default {
|
|||
// this.typeData = this.typeData.slice(-10);
|
||||
}
|
||||
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.componentType == '车头时距') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'headway');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'headway');
|
||||
} else if (this.componentType == '流量') {
|
||||
if (this.flowType == '入流') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'in_flow');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
|
||||
} else if (this.flowType == '出流') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'out_flow');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
|
||||
}
|
||||
} else if (this.componentType == '速度') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'speed');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'speed');
|
||||
} else if (this.componentType == '类型') {
|
||||
// console.log('实时触发-类型-', val);
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
|
||||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||
const transformedData = [];
|
||||
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) {
|
||||
for (let i = 0; i < seriesArr[0].length; i++) {
|
||||
const item = seriesArr[0][i]; //quantity
|
||||
const valueList = seriesArr.map((arr) => {
|
||||
if (arr) {
|
||||
let t = arr[i] && arr[i].value;
|
||||
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
|
||||
let t = arr[i].value;
|
||||
if (arr[i].quantity || arr[i].quantity === 0) {
|
||||
t = arr[i].quantity;
|
||||
}
|
||||
return t;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
transformedData.push({
|
||||
name: getNameFromTargetType(item.name),
|
||||
name: item.name,
|
||||
value: valueList
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let totalCountList = 0;
|
||||
if (transformedData.length > 0 && transformedData[0].value) {
|
||||
totalCountList = transformedData[0].value.map((_, i) => {
|
||||
|
|
@ -179,130 +119,107 @@ export default {
|
|||
name: '总数',
|
||||
value: totalCountList
|
||||
});
|
||||
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
|
||||
this.seriesList = transformedData;
|
||||
} else if (this.componentType == '检测数') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'n_stay');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
|
||||
} else if (this.componentType == '排队数') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'n_queue');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
|
||||
}
|
||||
} else if (this.timeMode == '固定时刻') {
|
||||
if (this.componentType == '车头时距') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'headway');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'headway');
|
||||
} else if (this.componentType == '流量') {
|
||||
if (this.flowType == '入流') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'in_flow');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
|
||||
} else if (this.flowType == '出流') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'out_flow');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
|
||||
}
|
||||
} else if (this.componentType == '速度') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'speed');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'speed');
|
||||
} else if (this.componentType == '类型') {
|
||||
// this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
|
||||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||
// console.log('seriesArr-固定时刻', seriesArr);
|
||||
const transformedData = [];
|
||||
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) {
|
||||
for (let i = 0; i < seriesArr[0].length; i++) {
|
||||
const item = seriesArr[0][i];
|
||||
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
|
||||
// const valueList = seriesArr.map((arr) => arr[i].quantity);
|
||||
const valueList = seriesArr.map((arr) => {
|
||||
if (arr) {
|
||||
let t = arr[i] && arr[i].value;
|
||||
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
|
||||
let t = arr[i].value;
|
||||
if (arr[i].quantity || arr[i].quantity === 0) {
|
||||
t = arr[i].quantity;
|
||||
}
|
||||
return t;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
transformedData.push({
|
||||
name: getNameFromTargetType(item.name),
|
||||
name: item.name,
|
||||
value: valueList
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('transformedData-1',transformedData)
|
||||
let totalCountList = 0;
|
||||
if (transformedData.length > 0 && transformedData[0].value) {
|
||||
totalCountList = transformedData[0].value.map((_, i) => {
|
||||
const totalCountList = transformedData[0].value.map((_, i) => {
|
||||
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
|
||||
});
|
||||
}
|
||||
transformedData.push({
|
||||
name: '总数',
|
||||
value: totalCountList
|
||||
});
|
||||
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
|
||||
this.seriesList = transformedData;
|
||||
} else if (this.componentType == '检测数') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'n_stay');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
|
||||
} else if (this.componentType == '排队数') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'n_queue');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
|
||||
}
|
||||
} else if (this.timeMode == '固定间隔') {
|
||||
if (this.componentType == '车头时距') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'ave_headway');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'ave_headway');
|
||||
} else if (this.componentType == '流量') {
|
||||
if (this.flowType == '入流') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'in_flow');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
|
||||
} else if (this.flowType == '出流') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'out_flow');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
|
||||
}
|
||||
} else if (this.componentType == '速度') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'speed');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'speed');
|
||||
} else if (this.componentType == '类型') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
// console.log('固定间隔-类型-val-', val);
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
|
||||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||
// console.log('固定间隔-类型-seriesArr-', seriesArr);
|
||||
// console.log('固定间隔-类型-xData-', this.chartData.xData);
|
||||
const transformedData = [];
|
||||
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) {
|
||||
for (let i = 0; i < seriesArr[0].length; i++) {
|
||||
const item = seriesArr[0][i];
|
||||
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
|
||||
// const valueList = seriesArr.map((arr) => arr[i].value);
|
||||
const valueList = seriesArr.map((arr) => {
|
||||
if (arr) {
|
||||
let t = arr[i] && arr[i].value;
|
||||
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
|
||||
let t = arr[i].value;
|
||||
if (arr[i].quantity || arr[i].quantity === 0) {
|
||||
t = arr[i].quantity;
|
||||
}
|
||||
return t;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
transformedData.push({
|
||||
name: getNameFromTargetType(item.name),
|
||||
name: item.name,
|
||||
value: valueList
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('固定间隔-类型-transformedData-1', transformedData);
|
||||
let totalCountList = 0;
|
||||
|
|
@ -315,25 +232,19 @@ export default {
|
|||
name: '总数',
|
||||
value: totalCountList
|
||||
});
|
||||
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
|
||||
this.seriesList = transformedData;
|
||||
// console.log('固定间隔-类型-transformedData-2', transformedData);
|
||||
} else if (this.componentType == '延误') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'ave_delay');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'ave_delay');
|
||||
} else if (this.componentType == '检测数') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'ave_stay');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
this.chartData.yData = this.extractKeyValues(val, 'ave_stay');
|
||||
} else if (this.componentType == '排队数') {
|
||||
xData = this.extractKeyValues(val, 'time');
|
||||
yData = this.extractKeyValues(val, 'ave_queue');
|
||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||
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 {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -443,8 +354,7 @@ export default {
|
|||
{
|
||||
// name: '流量_1-zone2-曲线图-实时触发',
|
||||
type: 'line',
|
||||
// data: this.chartData.yData.reverse(),
|
||||
data: this.chartData.yData,
|
||||
data: this.chartData.yData.reverse(),
|
||||
symbolSize: 8, //标记的大小
|
||||
lineStyle: {
|
||||
color: 'rgb(255,115,38)',
|
||||
|
|
@ -494,7 +404,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
// 图例过多时滚动
|
||||
type: 'scroll',
|
||||
type: "scroll",
|
||||
left: 'center',
|
||||
top: 0,
|
||||
left: '10%',
|
||||
|
|
@ -516,8 +426,7 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// data: this.chartData.xData.reverse(),
|
||||
data: this.chartData.xData,
|
||||
data: this.chartData.xData.reverse(),
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -567,12 +476,10 @@ export default {
|
|||
],
|
||||
series: seriesList
|
||||
};
|
||||
if (myChart) {
|
||||
myChart.setOption(option);
|
||||
window.onresize = () => {
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -581,11 +488,11 @@ export default {
|
|||
$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.$nextTick(() => {
|
||||
that.initEcharts();
|
||||
});
|
||||
}, 300);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'echartsPie', //折线图组件
|
||||
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 = [
|
||||
'#0CD2E6',
|
||||
|
|
@ -150,17 +122,11 @@ export default {
|
|||
color: color,
|
||||
animation: false,
|
||||
legend: {
|
||||
top: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
orient: 'vertical',
|
||||
top: 20,
|
||||
right: 'center',
|
||||
textStyle: {},
|
||||
type: 'scroll',
|
||||
// top: 0,
|
||||
// right: 'center',
|
||||
// textStyle: {},
|
||||
// type: 'scroll',
|
||||
// width: '80%'
|
||||
width: '80%'
|
||||
// data: [
|
||||
// {
|
||||
// name: '流量_1-zone2-饼状图-实时触发',
|
||||
|
|
@ -187,9 +153,9 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
name: '流量_1-zone2-饼状图-实时触发',
|
||||
type: 'pie',
|
||||
center: ['33%', '50%'],
|
||||
center: ['50%', '55%'],
|
||||
radius: '70%',
|
||||
label: {
|
||||
normal: {
|
||||
|
|
@ -218,7 +184,6 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
if (myChart) {
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
|
|
@ -227,7 +192,6 @@ export default {
|
|||
myChart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
|
|
@ -257,8 +221,8 @@ export default {
|
|||
},
|
||||
echartsRef: {
|
||||
handler: function (oldValues, newValues) {
|
||||
// console.log('old', oldValues);
|
||||
// console.log('newV', newValues);
|
||||
console.log('old', oldValues);
|
||||
console.log('newV', newValues);
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -15,304 +15,293 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'barChart', //均值图图组件
|
||||
name: "barChart", //均值图图组件
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
typeValue: {
|
||||
type: Object
|
||||
type: Object,
|
||||
},
|
||||
// 组件名称
|
||||
componentName: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
chartName: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
status: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
intersectionName: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
chatShowType: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
echartsRef: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
max: [],
|
||||
min: [],
|
||||
med: [],
|
||||
avg: []
|
||||
avg: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initEcharts() {
|
||||
// this.max = [];
|
||||
// this.min = [];
|
||||
// this.med = [];
|
||||
// this.avg = [];
|
||||
// // console.log("均值图",arr)
|
||||
// // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||
// // if (myChart == null) {
|
||||
// // myChart = this.$echarts.init(this.$refs.barChart);
|
||||
// // }
|
||||
// // this.dataProcessing(this.dataList);
|
||||
// if (this.dataList.length > 10) {
|
||||
// this.dataList = this.dataList.slice(-10);
|
||||
this.max = [];
|
||||
this.min = [];
|
||||
this.med = [];
|
||||
this.avg = [];
|
||||
// console.log("均值图",arr)
|
||||
// let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||
// if (myChart == null) {
|
||||
// myChart = this.$echarts.init(this.$refs.barChart);
|
||||
// }
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
// if (this.dataList[i].max) {
|
||||
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||
// } else {
|
||||
// this.max.push(0);
|
||||
// }
|
||||
|
||||
// if (this.dataList[i].min) {
|
||||
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||
// } else {
|
||||
// this.min.push(0);
|
||||
// }
|
||||
|
||||
// if (this.dataList[i].med) {
|
||||
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||
// } else {
|
||||
// this.med.push(0);
|
||||
// }
|
||||
|
||||
// if (this.dataList[i].avg) {
|
||||
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||
// } else {
|
||||
// this.avg.push(0);
|
||||
// }
|
||||
|
||||
// // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||
// // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||
// // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||
// // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||
// }
|
||||
let maxData = '';
|
||||
let minData = '';
|
||||
let medData = '';
|
||||
let avgData = '';
|
||||
// for (let i = 0; i < this.max.length; i++) {
|
||||
// maxData = this.max[i];
|
||||
// }
|
||||
// for (let i = 0; i < this.min.length; i++) {
|
||||
// minData = this.min[i];
|
||||
// }
|
||||
// for (let i = 0; i < this.med.length; i++) {
|
||||
// medData = this.med[i];
|
||||
// }
|
||||
// for (let i = 0; i < this.avg.length; i++) {
|
||||
// avgData = this.avg[i];
|
||||
// }
|
||||
let arr = {};
|
||||
if(this.dataList&&this.dataList.length>0){
|
||||
arr = this.dataList[0]
|
||||
// this.dataProcessing(this.dataList);
|
||||
if (this.dataList.length > 10) {
|
||||
this.dataList = this.dataList.slice(-10);
|
||||
}
|
||||
for (let i = 0; i < this.dataList.length; i++) {
|
||||
if(this.dataList[i].max) {
|
||||
this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||
}else {
|
||||
this.max.push(0);
|
||||
}
|
||||
|
||||
if (arr && Object.keys(arr).length > 0) {
|
||||
avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
|
||||
medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
|
||||
maxData = arr.max ? Math.abs(arr.max).toFixed(2) : 0;
|
||||
minData = arr.min ? Math.abs(arr.min).toFixed(2) : 0;
|
||||
if(this.dataList[i].min) {
|
||||
this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||
}else {
|
||||
this.min.push(0);
|
||||
}
|
||||
|
||||
if(this.dataList[i].med) {
|
||||
this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||
}else {
|
||||
this.med.push(0);
|
||||
}
|
||||
|
||||
if(this.dataList[i].avg) {
|
||||
this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||
}else {
|
||||
this.avg.push(0);
|
||||
}
|
||||
|
||||
|
||||
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||
}
|
||||
let maxData = "";
|
||||
let minData = "";
|
||||
let medData = "";
|
||||
let avgData = "";
|
||||
for (let i = 0; i < this.max.length; i++) {
|
||||
maxData = this.max[i];
|
||||
}
|
||||
for (let i = 0; i < this.min.length; i++) {
|
||||
minData = this.min[i];
|
||||
}
|
||||
for (let i = 0; i < this.med.length; i++) {
|
||||
medData = this.med[i];
|
||||
}
|
||||
for (let i = 0; i < this.avg.length; i++) {
|
||||
avgData = this.avg[i];
|
||||
}
|
||||
let myChart = this.chart;
|
||||
let chartData = [{ stage: '', number: 40 }];
|
||||
let chartData = [{ stage: "", number: 40 }];
|
||||
let option = {
|
||||
tooltip: {},
|
||||
color: ['#0EECE4'],
|
||||
color: ["#0EECE4"],
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
z: 22
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "10%",
|
||||
top: "15%",
|
||||
z: 22,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
gridIndex: 0,
|
||||
data: chartData.map((item) => item.stage),
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
|
||||
splitArea: { show: false },
|
||||
gridIndex: 0,
|
||||
min: 0,
|
||||
splitNumber: 12,
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
max: 200
|
||||
max: 200,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '外框',
|
||||
type: 'bar',
|
||||
barGap: '-120%', // 设置外框粗细
|
||||
name: "外框",
|
||||
type: "bar",
|
||||
barGap: "-120%", // 设置外框粗细
|
||||
data: [300],
|
||||
barWidth: 150,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,.1)', // 填充色
|
||||
color: "rgba(0,0,0,.1)", // 填充色
|
||||
barBorderWidth: 1, // 边框宽度
|
||||
label: {
|
||||
// 标签显示位置
|
||||
show: false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
z: 1
|
||||
},
|
||||
},
|
||||
z: 1,
|
||||
},
|
||||
{
|
||||
name: '平均值',
|
||||
type: 'bar',
|
||||
stack: 'val',
|
||||
name: "平均值",
|
||||
type: "bar",
|
||||
stack: "val",
|
||||
barWidth: 150,
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
position: "right",
|
||||
// offset: [10, 20],
|
||||
distance: 15,
|
||||
color: '#000',
|
||||
color: "#000",
|
||||
fontSize: 17,
|
||||
formatter: '{c}' + '[avg]'
|
||||
formatter: "{c}" + "[avg]",
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#89c6ff'
|
||||
color: "#89c6ff",
|
||||
},
|
||||
data: [avgData],
|
||||
zlevel: 9
|
||||
zlevel: 9,
|
||||
},
|
||||
{
|
||||
name: '中间值',
|
||||
type: 'bar',
|
||||
name: "中间值",
|
||||
type: "bar",
|
||||
barWidth: 150,
|
||||
stack: 'val',
|
||||
stack: "val",
|
||||
label: {
|
||||
show: true,
|
||||
position: 'left',
|
||||
position: "left",
|
||||
distance: 15,
|
||||
color: '#000',
|
||||
color: "#000",
|
||||
fontSize: 17,
|
||||
formatter: '{c}' + '[med]',
|
||||
rich: {}
|
||||
formatter: "{c}" + "[med]",
|
||||
rich: {},
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#67b4fd'
|
||||
color: "#67b4fd",
|
||||
},
|
||||
data: [medData],
|
||||
zlevel: 9
|
||||
zlevel: 9,
|
||||
},
|
||||
|
||||
{
|
||||
name: '最大值',
|
||||
type: 'bar',
|
||||
stack: 'val',
|
||||
name: "最大值",
|
||||
type: "bar",
|
||||
stack: "val",
|
||||
barWidth: 150,
|
||||
barGap: '-100%',
|
||||
barGap: "-100%",
|
||||
data: [maxData],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
position: "right",
|
||||
distance: 10,
|
||||
color: '#000',
|
||||
color: "#000",
|
||||
fontSize: 17,
|
||||
offset: [0, -30],
|
||||
formatter: '{c}' + '[max]'
|
||||
formatter: "{c}" + "[max]",
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#319cff'
|
||||
color: "#319cff",
|
||||
},
|
||||
zlevel: 9
|
||||
zlevel: 9,
|
||||
},
|
||||
{
|
||||
name: '最小值',
|
||||
type: 'bar',
|
||||
stack: 'val',
|
||||
name: "最小值",
|
||||
type: "bar",
|
||||
stack: "val",
|
||||
barWidth: 150,
|
||||
barGap: '-100%',
|
||||
barGap: "-100%",
|
||||
data: [minData],
|
||||
label: {
|
||||
offset: [10, 20],
|
||||
show: true,
|
||||
position: 'left',
|
||||
position: "left",
|
||||
distance: 10,
|
||||
color: '#000',
|
||||
color: "#000",
|
||||
offset: [0, -30],
|
||||
fontSize: 17,
|
||||
formatter: '{c}' + '[min]'
|
||||
formatter: "{c}" + "[min]",
|
||||
},
|
||||
// tooltip: {
|
||||
// backgroundColor: 'transparent',
|
||||
// formatter: ' '
|
||||
// },
|
||||
itemStyle: {
|
||||
color: '#328adc'
|
||||
color: "#328adc",
|
||||
},
|
||||
zlevel: 9
|
||||
}
|
||||
]
|
||||
zlevel: 9,
|
||||
},
|
||||
],
|
||||
};
|
||||
if (myChart) {
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', function () {
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// myChart.setOption(option)
|
||||
// myChart.resize();
|
||||
// })
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
const $dom = document.getElementById(this.echartsRef);
|
||||
$dom.style.width = '440px';
|
||||
$dom.style.height = '260px';
|
||||
$dom.style.width = "440px";
|
||||
$dom.style.height = "260px";
|
||||
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) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
|
|
@ -326,56 +315,56 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.initEcharts();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
chatShowType: {
|
||||
handler: function (oldValues, newValues) {
|
||||
let that = this;
|
||||
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) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
that.initEcharts();
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
},
|
||||
echartsRef: {
|
||||
handler: function (newValues, oldValues) {
|
||||
// console.log('old', oldValues);
|
||||
// console.log('newV', newValues);
|
||||
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));
|
||||
this.chart = this.$echarts.getInstanceByDom(
|
||||
document.getElementById(this.echartsRef)
|
||||
);
|
||||
if (this.chart == null) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
that.initEcharts();
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
},
|
||||
dataList: {
|
||||
handler: function (newValues, oldValues) {
|
||||
// if(newValues&&newValues.length>0) {
|
||||
// if(newValues[0].name=='gate1'){
|
||||
// console.log('newV', newValues);
|
||||
// }
|
||||
// }
|
||||
|
||||
handler: function (oldValues, newValues) {
|
||||
this.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
this.chart = this.$echarts.getInstanceByDom(
|
||||
document.getElementById(this.echartsRef)
|
||||
);
|
||||
if (this.chart == null) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
this.initEcharts();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
start.push(item[j].start);
|
||||
// 数组去重
|
||||
// od图的数据
|
||||
chartData.push([j, i, item[j].quantity]);
|
||||
chartData.push([i, j, item[j].quantity]);
|
||||
// console.log([i,j,item[j].val]);
|
||||
}
|
||||
}
|
||||
|
|
@ -67,61 +67,16 @@ export default {
|
|||
// this.thermalChartData = 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() {
|
||||
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 == '实时触发') {
|
||||
let dataOd = [];
|
||||
if (filterDataList.length > 0 && filterDataList[0].ob_data) {
|
||||
dataOd.push(filterDataList[0].ob_data);
|
||||
if (this.dataList.length > 0) {
|
||||
for (let i = 0; i < this.dataList.length; i++) {
|
||||
dataOd.push(this.dataList[i].ob_data);
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
}
|
||||
|
||||
|
||||
// if (filterDataList.length > 0) {
|
||||
// for (let i = 0; i < filterDataList.length; i++) {
|
||||
// dataOd.push(filterDataList[i].ob_data);
|
||||
// dataList = this.ODhanlde(dataOd);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
} else if (this.timeMode == '固定时刻') {
|
||||
let dataOd = [];
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
|
|
@ -130,12 +85,11 @@ export default {
|
|||
// }
|
||||
// if (this.dataList[0][0] == undefined) {
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
if (filterDataList.length > 0 && filterDataList[0].ob_data) {
|
||||
dataOd.push(filterDataList[0].ob_data);
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
||||
dataOd.push(this.dataList[0].ob_data);
|
||||
}
|
||||
|
||||
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
// }
|
||||
// } else {
|
||||
// dataOd.push(this.dataList[0][0].ob_data);
|
||||
|
|
@ -149,11 +103,10 @@ export default {
|
|||
// }
|
||||
// if (this.dataList[0][0] == undefined) {
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
if (filterDataList.length > 0 && filterDataList[0].ob_data) {
|
||||
dataOd.push(filterDataList[0].ob_data);
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
||||
dataOd.push(this.dataList[0].ob_data);
|
||||
}
|
||||
|
||||
dataList = this.ODhanlde(dataOd);
|
||||
// }
|
||||
// } else {
|
||||
// dataOd.push(this.dataList[0][0].ob_data);
|
||||
|
|
@ -161,15 +114,6 @@ export default {
|
|||
// }
|
||||
}
|
||||
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 = {
|
||||
dataZoom: [
|
||||
{
|
||||
|
|
@ -193,7 +137,7 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: startName,
|
||||
data: this.startName.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
|
|
@ -210,7 +154,7 @@ export default {
|
|||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: endName,
|
||||
data: this.endName.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
|
|
@ -256,14 +200,11 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
if (myChart) {
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
|
|
@ -302,8 +243,8 @@ export default {
|
|||
},
|
||||
echartsRef: {
|
||||
handler: function (oldValues, newValues) {
|
||||
// console.log('old', oldValues);
|
||||
// console.log('newV', newValues);
|
||||
console.log('old', oldValues);
|
||||
console.log('newV', newValues);
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
style="width: 150px; margin-bottom: 20px; text-align: center"
|
||||
>
|
||||
<div>
|
||||
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
|
||||
<span style="font-size: 15px">{{ n.name }}</span
|
||||
><br />
|
||||
<span style="font-size: 30px; font-weight: bold">{{
|
||||
n.quantity || n.quantity === 0 ? n.quantity : ' - '
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
style="width: 150px; margin-bottom: 20px; text-align: center"
|
||||
>
|
||||
<div>
|
||||
<span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
|
||||
<span style="font-size: 15px">{{ n.name }}</span
|
||||
><br />
|
||||
<span style="font-size: 30px; font-weight: bold">{{
|
||||
n.quantity || n.quantity === 0 ? n.quantity : ' - '
|
||||
|
|
@ -210,8 +210,8 @@
|
|||
<div>
|
||||
<div v-if="newDataArr[0].time">
|
||||
<!-- {{ newDataArr[0].time ? newDataArr[0].time : '' }} -->
|
||||
<div>{{ newDataArr[0].time.slice(0, 11) }}</div>
|
||||
<div>{{ newDataArr[0].time.slice(11) }}</div>
|
||||
<div>{{newDataArr[0].time.slice(0, 11)}}</div>
|
||||
<div>{{newDataArr[0].time.slice(11)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -325,7 +325,6 @@ import pieChart from '../chart/pieChart.vue';
|
|||
import detailDialog from '../chart/detailDialog.vue';
|
||||
import regionTable from '../chart/regionTable.vue';
|
||||
import thermalChart from '../chart/thermalChart.vue';
|
||||
import { getNameFromTargetType } from '@/utils/targetType';
|
||||
export default {
|
||||
name: 'typeChart', //类型组件
|
||||
props: [
|
||||
|
|
@ -352,7 +351,6 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
getNameFromTargetType,
|
||||
// 类型数值
|
||||
total: 0,
|
||||
// 速度数值
|
||||
|
|
@ -372,11 +370,7 @@ export default {
|
|||
methods: {
|
||||
// 计算类型数量的总和
|
||||
getDataArr(val) {
|
||||
// if(val&&val.length>0){
|
||||
// if(val[0].component_name=='车头时距_4')
|
||||
// console.log('typeChart-getDataArr', val);
|
||||
// }
|
||||
|
||||
// console.log('getDataArr', val);
|
||||
this.newDataArr = val;
|
||||
this.getNewQueue(this.newDataArr);
|
||||
},
|
||||
|
|
@ -397,7 +391,7 @@ export default {
|
|||
this.cycleAccumulateDataArr[0].headway = val[0].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) {
|
||||
this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay;
|
||||
|
|
@ -414,9 +408,9 @@ export default {
|
|||
return cur.quantity + prev;
|
||||
}, 0);
|
||||
}
|
||||
return 0;
|
||||
return 0
|
||||
}
|
||||
return 0;
|
||||
return 0
|
||||
}
|
||||
},
|
||||
getNewQueue(val) {
|
||||
|
|
@ -430,7 +424,7 @@ export default {
|
|||
this.newDataArr[0].headway = val[0].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) {
|
||||
this.newDataArr[0].n_stay = val[0].n_stay;
|
||||
|
|
@ -529,13 +523,14 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.spacialCard {
|
||||
width: 150px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep.spacialCard .el-card__body {
|
||||
::v-deep.spacialCard .el-card__body{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
ipUurl = '172.16.1.168'
|
||||
}
|
||||
// var ipUurl = '172.16.1.168'
|
||||
export default {
|
||||
// dataUrl: "http://172.16.1.22:8080/api/AddShipjk",
|
||||
|
|
@ -20,71 +9,71 @@ export default {
|
|||
// //编辑图形名称
|
||||
// editFigure: "http://172.16.1.22:8080/api/EditTuxmc",
|
||||
|
||||
// dataUrl: 'http://172.16.1.168:80/api/AddShipjk',
|
||||
// getSpareElementOrder: 'http://172.16.1.168:80/api/Upload',
|
||||
// postSetQuanjsz: 'http://172.16.1.168:80/api/SetQuanjsz',
|
||||
// saveRoleApi: 'http://172.16.1.168:80/api/AddZhangh',
|
||||
// saveSetFtppz: 'http://172.16.1.168:80/api/SetFtppz',
|
||||
// dataUrl: 'http://172.16.1.168:5000/api/AddShipjk',
|
||||
// getSpareElementOrder: 'http://172.16.1.168:5000/api/Upload',
|
||||
// postSetQuanjsz: 'http://172.16.1.168:5000/api/SetQuanjsz',
|
||||
// saveRoleApi: 'http://172.16.1.168:5000/api/AddZhangh',
|
||||
// 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',
|
||||
// setHostTime: 'http://172.16.1.168:80/api/SetHostTime',
|
||||
// changePassowrd:'http://172.16.1.168:80/api/ChangePassword',
|
||||
// setHostName: 'http://172.16.1.168:5000/api/SetHostName',
|
||||
// setHostTime: 'http://172.16.1.168:5000/api/SetHostTime',
|
||||
// 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',
|
||||
// `http://${ipUurl}:80/api/AddShipjk`
|
||||
// setAccessParty:'http://172.16.1.168:5000/api/setAccessParty',
|
||||
// `http://${ipUurl}:5000/api/AddShipjk`
|
||||
|
||||
|
||||
|
||||
|
||||
dataUrl: `http://${ipUurl}:80/api/AddShipjk`,
|
||||
getSpareElementOrder: `http://${ipUurl}:80/api/Upload`,
|
||||
postSetQuanjsz: `http://${ipUurl}:80/api/SetQuanjsz`,
|
||||
dataUrl: `http://${ipUurl}:5000/api/AddShipjk`,
|
||||
getSpareElementOrder: `http://${ipUurl}:5000/api/Upload`,
|
||||
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获取监控图形数据
|
||||
// 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`,
|
||||
saveRoleApi: `http://${ipUurl}:80/api/AddZhangh`,
|
||||
saveSetFtppz: `http://${ipUurl}:80/api/SetFtppz`,
|
||||
editRoleApi: `http://${ipUurl}:5000/api/EditZhangh`,
|
||||
saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
|
||||
saveSetFtppz: `http://${ipUurl}:5000/api/SetFtppz`,
|
||||
//编辑保存组件弹窗传参
|
||||
setHostName: `http://${ipUurl}:80/api/SetHostName`,
|
||||
setHostTime: `http://${ipUurl}:80/api/SetHostTime`,
|
||||
changePassowrd: `http://${ipUurl}:80/api/ChangePassword`,
|
||||
setHostName: `http://${ipUurl}:5000/api/SetHostName`,
|
||||
setHostTime: `http://${ipUurl}:5000/api/SetHostTime`,
|
||||
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`,
|
||||
setAccessParty: `http://${ipUurl}:80/api/setAccessParty`,
|
||||
setComponents:`http://${ipUurl}:5000/api/SetComponents`,
|
||||
setAccessParty:`http://${ipUurl}:5000/api/setAccessParty`,
|
||||
//自动校时接口
|
||||
setAutomatic: `http://${ipUurl}:80/api/SetAutomaticTiming`,
|
||||
setAutomatic:`http://${ipUurl}:5000/api/SetAutomaticTiming`,
|
||||
|
||||
};
|
||||
35
src/main.js
35
src/main.js
|
|
@ -79,30 +79,23 @@ var currentTopics = null;
|
|||
var client = null;
|
||||
var callback = null;
|
||||
let mqtt = new mqttConfig(currentTopics);
|
||||
window.PubScribe = function (topic, number, _callback, other = false, fromName = '') {
|
||||
window.PubScribe = function (topic, number, _callback, other = false) {
|
||||
callback = _callback;
|
||||
if (currentTopics != null) {
|
||||
//取消currentTopics主题订阅
|
||||
if (client != null) {
|
||||
console.log('client', client)
|
||||
client.unsubscribe(currentTopics);
|
||||
console.log("取消上次订阅主题", currentTopics)
|
||||
currentTopics = null;
|
||||
}
|
||||
}
|
||||
if (client == null) {
|
||||
if (other == false) {
|
||||
console.log("首次链接订阅主题topic", topic)
|
||||
currentTopics = topic;
|
||||
client = mqtt.createConnect(() => {
|
||||
client.subscribe(topic, {
|
||||
qos: 0
|
||||
}, (err) => {
|
||||
if (!err) {
|
||||
console.log("订阅成功0", topic);
|
||||
console.log("订阅成功0-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
|
||||
console.log("订阅成功0-fromName", fromName);
|
||||
console.log("订阅成功0-number", number);
|
||||
console.log("订阅成功0",topic);
|
||||
client.publish('msg_stream', JSON.stringify({
|
||||
"msg_flag": parseInt(number)
|
||||
}))
|
||||
|
|
@ -127,17 +120,13 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
|
|||
});
|
||||
} else {
|
||||
if (topic != null) {
|
||||
console.log("融合的订阅主题topic", topic)
|
||||
currentTopics = topic;
|
||||
console.log("topic", topic)
|
||||
client = mqtt.createConnect(() => {
|
||||
client.subscribe(topic, {
|
||||
qos: 0
|
||||
}, (err) => {
|
||||
if (!err) {
|
||||
console.log("订阅成功11", topic);
|
||||
console.log("订阅成功11-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
|
||||
console.log("订阅成功11-fromName", fromName);
|
||||
console.log("订阅成功11-number", number);
|
||||
console.log("订阅成功11");
|
||||
client.publish('msg_stream', JSON.stringify({
|
||||
"msg_flag": parseInt(number)
|
||||
}))
|
||||
|
|
@ -157,31 +146,29 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
|
|||
|
||||
} else {
|
||||
if (topic != null) {
|
||||
console.log("已链接成功后订阅主题topic", topic)
|
||||
console.log("topic", topic)
|
||||
currentTopics = topic;
|
||||
mqtt.MySub(() => {
|
||||
client.subscribe(currentTopics, {
|
||||
qos: 0
|
||||
}, (err) => {
|
||||
if (!err) {
|
||||
console.log("订阅成功1", topic);
|
||||
console.log("订阅成功1-fromName注释：url里的id字符串来于分析index视频页面，videoId来于分析AnalysisMain，融合页面来之融合");
|
||||
console.log("订阅成功1-fromName", fromName);
|
||||
console.log("订阅成功1-number", number);
|
||||
console.log("订阅成功1");
|
||||
// setTimeout(function() {
|
||||
client.publish('msg_stream', JSON.stringify({
|
||||
"msg_flag": parseInt(number)
|
||||
}))
|
||||
// if(number!= -1 &&number!= '001' ){
|
||||
// client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":videoid}))
|
||||
// }
|
||||
|
||||
} else {
|
||||
console.log('消息订阅失败！')
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.publish = function (topic, message) {
|
||||
if (mqtt.mqttClient.connected == true) {
|
||||
// console.log("topic",topic)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
import mqtt from "mqtt";
|
||||
import Vue from 'vue'
|
||||
import moment from 'moment';
|
||||
|
||||
var vm = new Vue();
|
||||
var ip = window.location.host.split(":")[0];
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
ip = '172.16.1.168'
|
||||
}
|
||||
// var ip = '172.16.1.168';
|
||||
console.log("ip", ip)
|
||||
console.log("ip",ip)
|
||||
class mqttHandle {
|
||||
constructor() {
|
||||
var newName = localStorage.getItem('ms_username')
|
||||
|
|
@ -18,10 +13,10 @@ class mqttHandle {
|
|||
endpoint: "/mqtt",
|
||||
clean: true, // 保留会话
|
||||
cleanSession: true,
|
||||
connectTimeout: 5000, // 超时时间
|
||||
reconnectPeriod: 3000, // 重连时间间隔
|
||||
host: ip,
|
||||
port: '80',
|
||||
connectTimeout: 7000, // 超时时间
|
||||
reconnectPeriod: 7000, // 重连时间间隔
|
||||
host:ip,
|
||||
port: '10087',
|
||||
// 认证信息
|
||||
// clientId: Number(new Date()).toString(),
|
||||
clientId: newName,
|
||||
|
|
@ -33,29 +28,17 @@ class mqttHandle {
|
|||
// qos: 0,
|
||||
// }
|
||||
this.mqttClient = null;
|
||||
// 追踪是否为初始连接
|
||||
this.initialConnection = true;
|
||||
// 存储当前 onConnected 回调
|
||||
this.onConnected = () => {}; // 默认为空函数
|
||||
}
|
||||
/**
|
||||
* 创建链接
|
||||
* @returns client
|
||||
*/
|
||||
createConnect(onConnectedFun) {
|
||||
createConnect(onConnected) {
|
||||
//配置链接
|
||||
const {
|
||||
host,
|
||||
port,
|
||||
endpoint,
|
||||
...options
|
||||
} = this.connect;
|
||||
console.log("this.connect.host", this.connect.host)
|
||||
const { host, port, endpoint, ...options } = this.connect;
|
||||
console.log("this.connect.host",this.connect.host)
|
||||
// const connectUrl = 'ws://172.16.1.168:10087/';
|
||||
let connectUrl = `ws://${this.connect.host}${endpoint}`;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
connectUrl = `ws://172.16.1.168${endpoint}`;
|
||||
}
|
||||
const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
|
||||
// if (!client.connected) {
|
||||
// client.on('connect', function () {
|
||||
// console.log('连接成功')
|
||||
|
|
@ -67,16 +50,12 @@ class mqttHandle {
|
|||
// }
|
||||
// })
|
||||
// }
|
||||
if (this.mqttClient == undefined) {
|
||||
if (this.mqttClient == undefined)
|
||||
{
|
||||
this.mqttClient = mqtt.connect(connectUrl, options);
|
||||
this.mqttClient.on("connect", () => {
|
||||
console.log("Connection succeeded!");
|
||||
// 如果是初始连接
|
||||
if (this.initialConnection) {
|
||||
this.initialConnection = false;
|
||||
this.onConnected = onConnectedFun;
|
||||
}
|
||||
this.onConnected()
|
||||
onConnected();
|
||||
// this._client.subscribe('img'+this.number, { qos: 0 });
|
||||
// this._client.subscribe('stream'+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.mqttClient.on('reconnect', (error) => {
|
||||
console.log('正在重连-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'))
|
||||
|
||||
console.log('正在重连')
|
||||
})
|
||||
|
||||
this.mqttClient.on("error", (error) => {
|
||||
console.log("Connection failed");
|
||||
});
|
||||
|
|
@ -119,23 +96,22 @@ class mqttHandle {
|
|||
|
||||
}
|
||||
|
||||
MySub(subscriptions) {
|
||||
MySub(subscriptions)
|
||||
{
|
||||
//['hert','img0','img1','img2','img3','img4','img5','img6','img7']
|
||||
// this.mqttClient.subscribe(subscriptions, {
|
||||
// qos: 0
|
||||
// }, (err) => {
|
||||
// if (!err) {
|
||||
// console.log("订阅成功：" + subscriptions);
|
||||
this.mqttClient.subscribe(subscriptions, { qos: 0 }, (err)=>
|
||||
{
|
||||
if (!err) {
|
||||
console.log("订阅成功："+subscriptions);
|
||||
|
||||
// } else {
|
||||
// console.log('消息订阅失败！' + subscriptions)
|
||||
// }
|
||||
// });
|
||||
this.onConnected = subscriptions
|
||||
this.onConnected()
|
||||
} else {
|
||||
console.log('消息订阅失败！'+subscriptions)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
MyUnSub(subscription) {
|
||||
MyUnSub(subscription)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ''
|
||||
}
|
||||
|
|
@ -233,11 +233,7 @@ export default {
|
|||
videoId: ''
|
||||
},
|
||||
disable: false, //根据权限禁用按钮
|
||||
highPic: {}, //接收第一张高频图片
|
||||
timer1: null,
|
||||
timer2: null,
|
||||
timer3: null,
|
||||
timer4: null
|
||||
highPic: {} //接收第一张高频图片
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -265,8 +261,7 @@ export default {
|
|||
newVal.forEach((item) => {
|
||||
if (item.status == '加载中') {
|
||||
//console.log('加载中', item);
|
||||
this.timer1 = null;
|
||||
this.timer1 = setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
this.getVideoList();
|
||||
}, 10000);
|
||||
}
|
||||
|
|
@ -321,10 +316,8 @@ export default {
|
|||
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
|
||||
//创建链接，接收数据
|
||||
if (this.videoTypeForm.videoType == '实时视频') {
|
||||
// this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server'];
|
||||
this.topicSends = ['hert', 'Contorl_server'];
|
||||
this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server'];
|
||||
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
|
||||
// console.log('在AnalysisMain分析页面')
|
||||
window.PubScribe(this.topicSends, -1, this.realInfo, false, 'videoId');
|
||||
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
|
||||
} else if (this.videoTypeForm.videoType == '离线视频') {
|
||||
|
|
@ -448,9 +441,6 @@ export default {
|
|||
this.videoList[i].videoAnalysisStatus = '已分析';
|
||||
var ip = window.location.host;
|
||||
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';
|
||||
this.videoList[i].img = ipData + msg.pic_path;
|
||||
} else if (msg.type == 'video_analyse_unusual' && msg.video_id == this.videoList[i].id) {
|
||||
|
|
@ -641,12 +631,11 @@ export default {
|
|||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
let that = this;
|
||||
this.timer2 = null;
|
||||
this.timer2 = setTimeout(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
that.timer3 = null;
|
||||
that.timer3 = setTimeout(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
this.getVideoList();
|
||||
}, 5000);
|
||||
|
||||
|
|
@ -818,8 +807,7 @@ export default {
|
|||
//console.log('res', res);
|
||||
if (res.data.msg == '成功') {
|
||||
// if(val=='重启'){
|
||||
this.timer4 = null;
|
||||
this.timer4 = setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: 'all' }));
|
||||
}, 2000);
|
||||
// }
|
||||
|
|
@ -836,9 +824,6 @@ export default {
|
|||
var arr = [];
|
||||
var ip = window.location.host;
|
||||
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';
|
||||
res.data.data.forEach((item) => {
|
||||
if (this.videoTypeForm.videoType == '离线视频' && item.videoAnalysisStatus == '已分析') {
|
||||
|
|
@ -921,16 +906,6 @@ export default {
|
|||
|
||||
components: {
|
||||
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>
|
||||
|
|
@ -972,13 +947,9 @@ export default {
|
|||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
/* .imageBox{
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
} */
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 213px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<i class="el-icon-delete"></i>
|
||||
</div> -->
|
||||
<h1>运行状态</h1>
|
||||
<el-form :model="runningState" label-position="left" label-width="200px" style="width: 70%">
|
||||
<el-form :model="runningState" label-position="left" label-width="200px" style="width:70%">
|
||||
<el-form-item label="类型：">{{ runningState.type }}</el-form-item>
|
||||
<el-form-item label="版本：">{{ runningState.version }}</el-form-item>
|
||||
<el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item>
|
||||
|
|
@ -17,12 +17,11 @@
|
|||
</el-form>
|
||||
|
||||
<h1 class="mar-top20">系统性能状态</h1>
|
||||
<el-form :model="performance" label-position="left" label-width="200px" style="width: 70%">
|
||||
<el-form :model="performance" label-position="left" label-width="200px" style="width:70%">
|
||||
<!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> -->
|
||||
<el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
|
||||
<el-form-item label="Cpu利用率："
|
||||
><span v-for="s in performance.cpuUtilization" :key="s">{{ s + '%' }} | </span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Cpu利用率："><span v-for="s in performance.cpuUtilization"
|
||||
:key="s">{{ s +'%'}} | </span> </el-form-item>
|
||||
<el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
|
||||
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
|
||||
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
|
||||
|
|
@ -50,8 +49,9 @@
|
|||
</el-table-column>
|
||||
</el-table> -->
|
||||
|
||||
|
||||
<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.internetDelay }}</el-form-item>
|
||||
<el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item>
|
||||
|
|
@ -61,19 +61,29 @@
|
|||
</el-form>
|
||||
|
||||
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
|
||||
<el-table-column prop="connect" label="连接"> </el-table-column>
|
||||
<el-table-column prop="IP" label="IP地址"> </el-table-column>
|
||||
<el-table-column prop="connect" label="连接">
|
||||
</el-table-column>
|
||||
<el-table-column prop="IP" label="IP地址">
|
||||
</el-table-column>
|
||||
<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 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 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 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>
|
||||
</div>
|
||||
|
|
@ -89,7 +99,7 @@ export default {
|
|||
version: '',
|
||||
currentTime: '',
|
||||
startTime: '',
|
||||
runTime: ''
|
||||
runTime: '',
|
||||
},
|
||||
performance: {
|
||||
runTime: '',
|
||||
|
|
@ -102,7 +112,7 @@ export default {
|
|||
memoryUsage: '',
|
||||
totalMemory: '',
|
||||
virtualMemoryUsed: '',
|
||||
totalVirtualMemory: ''
|
||||
totalVirtualMemory: '',
|
||||
},
|
||||
mountingPointTable: [
|
||||
// {
|
||||
|
|
@ -118,9 +128,9 @@ export default {
|
|||
DNS: '',
|
||||
VPNvisit: '',
|
||||
serverVPN: '',
|
||||
serverVPNOpen: ''
|
||||
serverVPNOpen: '',
|
||||
},
|
||||
// networkStatus: [
|
||||
networkStatus: [
|
||||
// {
|
||||
// connect: '2016-05-02',
|
||||
// IP: '王小虎',
|
||||
|
|
@ -129,74 +139,71 @@ export default {
|
|||
// transmission: '上海市普陀区金沙江路 1518 弄',
|
||||
// transmissionTotal: '上海市普陀区金沙江路 1518 弄',
|
||||
// },
|
||||
// ]
|
||||
messageTimer: null
|
||||
};
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.createMqtt();
|
||||
this.createMqtt()
|
||||
// setTimeout(() => {
|
||||
// this.createMqtt()
|
||||
// }, 3000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.publishClient();
|
||||
this.messageTimer = setInterval(() => {
|
||||
//每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
|
||||
this.publishClient();
|
||||
}, 1000 * 5);
|
||||
|
||||
window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
|
||||
this.publishClient()
|
||||
}, 1000 * 5 )
|
||||
},
|
||||
methods: {
|
||||
/** 创建mqtt */
|
||||
createMqtt() {
|
||||
// window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
|
||||
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
|
||||
//创建链接，接收数据
|
||||
var topicSends = ['Contorl_server'];
|
||||
window.PubScribe(topicSends, -1, this.realInfo);
|
||||
window.PubScribe(topicSends,-1,this.realInfo);
|
||||
|
||||
},
|
||||
publishClient() {
|
||||
window.publish('Contorl_client', JSON.stringify({ type: 'getStatus' }));
|
||||
publishClient(){
|
||||
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
|
||||
},
|
||||
/** 实时数据分类 */
|
||||
realInfo(topic, message) {
|
||||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
case 'Contorl_server':
|
||||
case "Contorl_server":
|
||||
try {
|
||||
// console.log("message",message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
// console.log("msg",msg)
|
||||
this.runningState.currentTime = msg.now_time;
|
||||
this.runningState.startTime = msg.starttime;
|
||||
this.runningState.runTime = msg.uptime;
|
||||
this.runningState.currentTime = msg.now_time
|
||||
this.runningState.startTime = msg.starttime
|
||||
this.runningState.runTime = msg.uptime
|
||||
//平均Cpu利用率
|
||||
this.performance.averageCpuUtilization = msg.cpu_Average + '%';
|
||||
this.performance.cpuUtilization = msg.cpu_Every;
|
||||
this.performance.cpuTemperature = msg.cpu_Temperature + '°C';
|
||||
this.performance.cpuName = msg.cpu_Name;
|
||||
this.performance.gpuUtilization = msg.gpu_Average + '%';
|
||||
this.performance.gpuTemperature = msg.gpu_Temperature + '°C';
|
||||
var newmemoryUsed = msg.memory_used / 1024 / 1024 / 1024;
|
||||
this.performance.memoryUsage = msg.memory_percent + '%' + ' | ' + newmemoryUsed.toFixed(2) + 'GB';
|
||||
var totalMemoryN = msg.memory_total / 1024 / 1024 / 1024;
|
||||
this.performance.totalMemory = totalMemoryN.toFixed(2) + 'GB';
|
||||
var newswapUsed = msg.swap_used / 1024 / 1024 / 1024;
|
||||
this.performance.virtualMemoryUsed = msg.swap_percent + '%' + ' | ' + newswapUsed.toFixed(2) + 'GB';
|
||||
var totalVirtualMemoryN = msg.swap_total / 1024 / 1024 / 1024;
|
||||
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2) + 'GB';
|
||||
} catch (error) {}
|
||||
this.performance.averageCpuUtilization = msg.cpu_Average+'%'
|
||||
this.performance.cpuUtilization = msg.cpu_Every
|
||||
this.performance.cpuTemperature = msg.cpu_Temperature+"°C"
|
||||
this.performance.cpuName = msg.cpu_Name
|
||||
this.performance.gpuUtilization = msg.gpu_Average+'%'
|
||||
this.performance.gpuTemperature = msg.gpu_Temperature+"°C"
|
||||
var newmemoryUsed = msg.memory_used/1024/1024/1024
|
||||
this.performance.memoryUsage = msg.memory_percent+'%'+' | '+ newmemoryUsed.toFixed(2)+'GB'
|
||||
var totalMemoryN = msg.memory_total/1024/1024/1024
|
||||
this.performance.totalMemory = totalMemoryN.toFixed(2)+'GB'
|
||||
var newswapUsed = msg.swap_used/1024/1024/1024
|
||||
this.performance.virtualMemoryUsed = msg.swap_percent+'%' +' | '+ newswapUsed.toFixed(2)+'GB'
|
||||
var totalVirtualMemoryN = msg.swap_total/1024/1024/1024
|
||||
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2)+'GB'
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.messageTimer);
|
||||
this.messageTimer = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,14 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<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>
|
||||
<div >
|
||||
<div >
|
||||
<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 src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
|
||||
ref="iframe"></iframe> -->
|
||||
</div>
|
||||
<el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
|
||||
<el-row>
|
||||
<el-col :span="6"> 文件选择： </el-col>
|
||||
<el-col :span="6">
|
||||
文件选择：
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-upload action="https://jsonplaceholder.typicode.com/posts/">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
|
|
@ -25,7 +27,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import mqtt from 'mqtt'; // mqtt协议
|
||||
import mqtt from "mqtt"; // mqtt协议
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -44,29 +46,28 @@ export default {
|
|||
version5: '不受支持的',
|
||||
version6: '不受支持的',
|
||||
version7: '不受支持的',
|
||||
version8: '不受支持的'
|
||||
version8: '不受支持的',
|
||||
},
|
||||
showUpdateCertificate: false
|
||||
};
|
||||
showUpdateCertificate: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.testMqtt();
|
||||
this.testMqtt()
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 测试：mqtt测试
|
||||
testMqtt() {
|
||||
this.getDataByMqtt();
|
||||
this.getDataByMqtt()
|
||||
},
|
||||
// mqtt订阅（独立）
|
||||
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
|
||||
var ip = window.location.host.split(':')[0];
|
||||
console.log('ip', ip);
|
||||
let host = `ws://${ip}:10087`;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
host = 'ws://172.16.1.168:10087/';
|
||||
}
|
||||
var ip = window.location.host.split(":")[0];
|
||||
console.log("ip",ip)
|
||||
const host = `ws://${ip}:10087`;
|
||||
// const host = 'ws://172.16.1.168:10087/';
|
||||
|
||||
const options = {
|
||||
|
|
@ -79,18 +80,18 @@ export default {
|
|||
username: 'admin', // 用户名（可选）
|
||||
password: '123456', // 密码（可选）
|
||||
clientId: clientId, // 客户端ID，默认随机生成
|
||||
protocolId: 'MQTT',
|
||||
protocolId: "MQTT",
|
||||
protocolVersion: 4,
|
||||
clean: true, // false在离线时接收QoS1和2的消息
|
||||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||||
will: {
|
||||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||||
topic: 'img1', // 要发布的主题
|
||||
payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
|
||||
topic: "img1", // 要发布的主题
|
||||
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
|
||||
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||||
retain: false // 保留标志
|
||||
}
|
||||
retain: false, // 保留标志
|
||||
},
|
||||
};
|
||||
if (this.mqttClient == undefined) {
|
||||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||||
|
|
@ -98,16 +99,16 @@ export default {
|
|||
// const client = mqtt.connect(host) // 连接
|
||||
// 错误回调
|
||||
// console.log("this.mqttClient", this.mqttClient)
|
||||
this.mqttClient.on('error', (err) => {
|
||||
console.log('[MQTT-TEST] 连接错误：', err);
|
||||
this.mqttClient.on("error", (err) => {
|
||||
console.log("[MQTT-TEST] 连接错误：", err);
|
||||
this.mqttClient.end();
|
||||
});
|
||||
// 重连回调
|
||||
this.mqttClient.on('reconnect', (reconnect) => {
|
||||
this.mqttClient.on("reconnect", (reconnect) => {
|
||||
// console.log("[MQTT-TEST] 重连中……", reconnect);
|
||||
});
|
||||
// 连接回调
|
||||
this.mqttClient.on('connect', (connect) => {
|
||||
this.mqttClient.on("connect", (connect) => {
|
||||
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
|
||||
// 订阅
|
||||
this.mqttClient.subscribe('img0', { qos: 0 });
|
||||
|
|
@ -130,172 +131,175 @@ export default {
|
|||
});
|
||||
|
||||
// 接收回调
|
||||
this.mqttClient.on('message', (topic, message, packet) => {
|
||||
if (topic.indexOf('img0') != -1) {
|
||||
this.mqttClient.on("message", (topic, message, packet) => {
|
||||
if (topic.indexOf("img0") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img1') != -1) {
|
||||
} else if (topic.indexOf("img1") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
// console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img2') != -1) {
|
||||
} else if (topic.indexOf("img2") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img3') != -1) {
|
||||
} else if (topic.indexOf("img3") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img4') != -1) {
|
||||
} else if (topic.indexOf("img4") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img5') != -1) {
|
||||
} else if (topic.indexOf("img5") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img6') != -1) {
|
||||
} else if (topic.indexOf("img6") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img7') != -1) {
|
||||
}else if (topic.indexOf("img7") != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg", msg) //msg为转换后的JSON数据
|
||||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
} catch {
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl", imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('stream0') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} else if (topic.indexOf('stream1') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} else if (topic.indexOf('stream2') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} else if (topic.indexOf('stream3') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} else if (topic.indexOf('stream4') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} else if (topic.indexOf('stream5') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} else if (topic.indexOf('stream6') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} else if (topic.indexOf('stream7') != -1) {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
}else if (topic.indexOf("stream0") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
} else if (topic.indexOf("stream1") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
} else if (topic.indexOf("stream2") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
} else if (topic.indexOf("stream3") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
} else if (topic.indexOf("stream4") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
} else if (topic.indexOf("stream5") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
}else if (topic.indexOf("stream6") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
}else if (topic.indexOf("stream7") != -1) {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp)
|
||||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="box" class="box" v-loading="loading">
|
||||
<el-empty v-show="!loading && sectionData.length == 0" :image-size="400"></el-empty>
|
||||
<div ref="box" class="box">
|
||||
<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> -->
|
||||
<el-scrollbar class="scrollbar">
|
||||
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
<p class="board-title">
|
||||
<span>{{ s.title }}</span>
|
||||
</p>
|
||||
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
|
||||
</div>
|
||||
<el-tabs>
|
||||
<el-collapse v-model="acticveName" @change="handleChange">
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
<div class="titleGnag"></div>
|
||||
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
|
||||
<!--触发的组件 -->
|
||||
<newtypeChart
|
||||
<typeChart
|
||||
ref="typeChartRef"
|
||||
v-if="o.timeMode === '实时触发'"
|
||||
:itemData="o"
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
:typeValue="typeTimeMode"
|
||||
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
|
||||
/>
|
||||
<newtypeChart
|
||||
<typeChart
|
||||
ref="typeChartRef1"
|
||||
v-if="o.timeMode === '固定时刻'"
|
||||
:itemData="o"
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
/>
|
||||
|
||||
<!-- 固定间隔的组件 -->
|
||||
<newtypeChart
|
||||
<typeChart
|
||||
ref="typeChartRef2"
|
||||
style="width: 100%"
|
||||
v-if="o.timeMode === '固定间隔'"
|
||||
|
|
@ -60,7 +61,6 @@
|
|||
:triggerType="o.timeMode"
|
||||
:componentName="o.componentName"
|
||||
:dataArr="o.cycleStatisticsData"
|
||||
:cycleAccumulateData="o.cycleAccumulateData"
|
||||
:echartArr="o.presentationForm"
|
||||
:title="o.componentName.split('_')[0]"
|
||||
:chartName="o.combinationName"
|
||||
|
|
@ -81,15 +81,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import _ from 'lodash';
|
||||
import newtypeChart from '../../components/target/newtypeChart.vue';
|
||||
import typeChart from '../../components/target/typeChart.vue';
|
||||
// import {mapMutation} from 'vuex'
|
||||
import { getComponentSection } from '../../api/index';
|
||||
import { update } from '../../api/aboutMachine';
|
||||
export default {
|
||||
components: {
|
||||
newtypeChart
|
||||
typeChart
|
||||
},
|
||||
props: {
|
||||
activeName: {
|
||||
|
|
@ -139,37 +136,47 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
acticveName: [],
|
||||
title1: '01断面',
|
||||
title2: '01区域',
|
||||
dialogVisible: false,
|
||||
|
||||
idVal: '',
|
||||
//组件数组
|
||||
componentList: [],
|
||||
// 触发数据数组
|
||||
triggerList: [],
|
||||
|
||||
sectionData: [],
|
||||
|
||||
// 单个区域或者断面的表格触发数据
|
||||
tableList: [],
|
||||
|
||||
// 路线数据
|
||||
headWay: [],
|
||||
|
||||
tripData: [],
|
||||
|
||||
sectionArr: [],
|
||||
|
||||
//触发的类型数值看板显示
|
||||
// "type_data":[{//类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值
|
||||
// "name":"electric bicycle",//类型名称
|
||||
// "quantity":0//数量
|
||||
// }],
|
||||
// "ob_data":[{//od数据，只供od组件使用，只有组件类型为OD的时候，这个字段才有值
|
||||
// "end":"gate1",
|
||||
// "data":[{
|
||||
// "start":"zone1",
|
||||
// "quantity":0
|
||||
// }]
|
||||
// }]
|
||||
typeTimeMode: {}, //实时触发类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
|
||||
typeCycleTimeData: {}, // 固定时刻的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
|
||||
typeCycleStatistics: {}, //固定间隔的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
|
||||
typeTimeMode: {},
|
||||
// 固定时刻的数值看板展示
|
||||
typeCycleTimeData: {},
|
||||
typeCycleStatistics: {},
|
||||
|
||||
// 各个组件分类
|
||||
classify: []
|
||||
// cycleHistoryData:''
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
// beforeCeated(){
|
||||
|
||||
// },
|
||||
created() {
|
||||
// this.getNew()
|
||||
// //console.log("cycleHistoryData",this.cycleHistoryData)
|
||||
},
|
||||
methods: {
|
||||
// 手风琴下拉切换
|
||||
handleChange(val) {
|
||||
|
|
@ -180,33 +187,21 @@ export default {
|
|||
// });
|
||||
// }, 3000);
|
||||
},
|
||||
//点击数据看板tab会执行获取所有配置的组件
|
||||
getNew(getHistory) {
|
||||
this.loading = true;
|
||||
getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
|
||||
.then((res) => {
|
||||
getNew() {
|
||||
// this.idVal = ;
|
||||
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
//console.log(res.data.data, '组件的数据');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$route.query.type == '离线视频' && getHistory) {
|
||||
getHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//组件数据根据分类重组到相同分类下
|
||||
|
||||
siftData() {
|
||||
//获取分类
|
||||
this.sectionArr = [];
|
||||
this.sectionData = [];
|
||||
// this.classify = []; //通过相同赋值来改变sectionData里面children数据的改变不太合理，所以这边不用了
|
||||
this.classify = [];
|
||||
this.componentList.forEach((val) => {
|
||||
// //console.log("val",val)
|
||||
this.sectionArr.push(val.combinationName);
|
||||
|
|
@ -214,187 +209,689 @@ export default {
|
|||
});
|
||||
this.sectionData = this.sectionArr.map((item) => {
|
||||
item = { title: item, children: [] };
|
||||
this.acticveName = []; //存储collapse组件的展开，默认全部收缩
|
||||
this.acticveName = [];
|
||||
this.componentList.forEach((val) => {
|
||||
if (item.title == val.combinationName) {
|
||||
// this.classify.push(val);
|
||||
//trigger 为实时触发存储的数据，cycleTimeData为固定时刻存储的数据，cycleStatisticsData为固定间隔存储的数据
|
||||
//在接口返回的componentList组件中没有trigger字段
|
||||
if (!val.trigger) {
|
||||
val.trigger = [];
|
||||
}
|
||||
//固定间隔还有个周期统计实时累计数据主题
|
||||
if (!val.cycleAccumulateData) {
|
||||
val.cycleAccumulateData = [];
|
||||
}
|
||||
this.classify.push(val);
|
||||
item.children.push(val);
|
||||
//把cycleStatisticsData，cycleTimeData存给children同级别暂时没理解为啥怎么做
|
||||
// if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
|
||||
// item.cycleStatisticsData = val.cycleStatisticsData;
|
||||
// }
|
||||
// if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
|
||||
// item.cycleTimeData = val.cycleTimeData;
|
||||
// }
|
||||
if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
|
||||
item.cycleStatisticsData = val.cycleStatisticsData;
|
||||
}
|
||||
// this.acticveName.push(val.analogAreaComponentId);
|
||||
if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
|
||||
item.cycleTimeData = val.cycleTimeData;
|
||||
}
|
||||
}
|
||||
this.acticveName.push([val.analogAreaComponentId]);
|
||||
});
|
||||
return item;
|
||||
});
|
||||
// console.log('折叠面板-', this.acticveName);
|
||||
},
|
||||
updateSectionData(newVal, updateKey, timeMode) {
|
||||
let tempNewVal = _.cloneDeep(newVal);
|
||||
this.sectionData.forEach((item) => {
|
||||
//item.title == val.combinationName
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((cItem) => {
|
||||
if (cItem.timeMode == timeMode) {
|
||||
// console.log('cItem', cItem);
|
||||
//找出对应timeMode的mqtt数据
|
||||
tempNewVal.forEach((nItem) => {
|
||||
if (cItem.analogAreaComponentId == nItem.component_id) {
|
||||
if (cItem[updateKey].length > 9) {
|
||||
this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
|
||||
// 组件图标点击下拉事件
|
||||
sectionHandle(i) {
|
||||
// let sections = document.querySelectorAll('.section');
|
||||
let sectionBox = document.querySelectorAll('.sectionBox');
|
||||
let downPulls1 = document.querySelectorAll('.downPull1');
|
||||
// 断面的小图标
|
||||
downPulls1[i].dataset.num++;
|
||||
if (downPulls1[i].dataset.num % 2 == 0) {
|
||||
downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
|
||||
// sections[i].style.height = 'auto';
|
||||
if (sectionBox[i] != undefined) {
|
||||
// sectionBox[i].style.height = 'auto';
|
||||
}
|
||||
//这里逻辑不知道为啥这样处理time，用的原逻辑
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
var timeNew = nItem.time.split('.')[0];
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
||||
nItem.time = key;
|
||||
} else {
|
||||
nItem.time = nItem.time.split('.')[0];
|
||||
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 (
|
||||
cItem[updateKey].length == 0 ||
|
||||
(cItem[updateKey].length > 0 && nItem.time != cItem[updateKey][0].time)
|
||||
refItem.componentName.includes('OD') &&
|
||||
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) {
|
||||
// 过滤重复的 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;
|
||||
}
|
||||
//处理离线视频历史数据
|
||||
changecycleHistoryData() {}
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
// 触发的原始数据 作用是给3d那边，界面不需要展示
|
||||
// triggerData: {
|
||||
// handler(newVal, oldVal) {},
|
||||
// immediate: true
|
||||
// },
|
||||
//离线历史数据
|
||||
// 触发的原始数据
|
||||
triggerData: {
|
||||
handler(newVal, oldVal) {},
|
||||
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: {
|
||||
handler(newVal) {
|
||||
// debugger
|
||||
console.log('历史cycleHistoryData-', newVal);
|
||||
//该主题只会有固定间隔和固定时刻数据
|
||||
if (newVal && this.sectionData.length > 0) {
|
||||
//更新sectionData对应的analogAreaComponentId和timeMode更新数据
|
||||
if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
|
||||
//console.log('历史', newVal);
|
||||
// //console.log("历史",oldVal)
|
||||
if (newVal != undefined) {
|
||||
// newVal.forEach(ele => {
|
||||
if (newVal.CycleStatisticsData) {
|
||||
newVal.CycleStatisticsData.forEach((ele) => {
|
||||
if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) {
|
||||
//按照时间从小到大排序
|
||||
let cycleStatisticsData = this.filteredArrayFun(ele.cycleStatisticsData);
|
||||
this.updateSectionData(cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
|
||||
this.$nextTick(() => {
|
||||
// var thatNN = this;
|
||||
ele.cycleStatisticsData.forEach((item) => {
|
||||
if (item.type_data != null) {
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
var timeNew = item.time.split('.')[0];
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
||||
item.time = key;
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
}
|
||||
this.typeCycleStatistics = item;
|
||||
}
|
||||
});
|
||||
if (this.$refs.typeChartRef2 != undefined) {
|
||||
// // 轮循固定时刻生成的各类组件
|
||||
this.getRef(this.$refs.typeChartRef2, '固定间隔');
|
||||
}
|
||||
if (newVal.CycleTimeData && newVal.CycleTimeData.length > 0) {
|
||||
});
|
||||
});
|
||||
}
|
||||
if (newVal.CycleTimeData) {
|
||||
newVal.CycleTimeData.forEach((ele) => {
|
||||
if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
|
||||
//按照时间从小到大排序
|
||||
let cycleTimeData = this.filteredArrayFun(ele.cycleTimeData);
|
||||
this.updateSectionData(cycleTimeData, 'cycleTimeData', '固定时刻');
|
||||
this.$nextTick(() => {
|
||||
// debugger
|
||||
// var thatNN = this;
|
||||
ele.cycleTimeData.forEach((item) => {
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
var timeNew = item.time.split('.')[0];
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
||||
item.time = key;
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
}
|
||||
if (item.type_data != null) {
|
||||
this.typeCycleStatistics = item;
|
||||
}
|
||||
});
|
||||
if (this.$refs.typeChartRef1 != undefined) {
|
||||
// // 轮循固定时刻生成的各类组件
|
||||
this.getRef(this.$refs.typeChartRef1, '固定时刻');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// });
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
// activeName:'channge',
|
||||
// 处理过的触发数据
|
||||
triggerListData: {
|
||||
handler(newVal) {
|
||||
// console.log('实时触发triggerListData-', newVal[0].time);
|
||||
// console.log('实时触发triggerListData-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'));
|
||||
// //console.log("newVal",newVal,'流量数据')
|
||||
this.triggerList = newVal;
|
||||
// //console.log("oldVal",oldVal)
|
||||
// 触发数据
|
||||
var _this = this;
|
||||
if (newVal.length != 0 && _this.sectionData) {
|
||||
_this.classify.forEach((ele, index) => {
|
||||
if (ele.trigger == undefined && ele.timeMode == '实时触发') {
|
||||
ele.trigger = [];
|
||||
}
|
||||
newVal.forEach((item) => {
|
||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
|
||||
// //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
|
||||
// //console.log(item.component_id, 'component_id');
|
||||
if (ele.trigger.length == 10) {
|
||||
ele.trigger.pop();
|
||||
}
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
var timeNew = item.time.split('.')[0];
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength - 8, dateLength);
|
||||
item.time = key;
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
}
|
||||
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
//更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
|
||||
this.updateSectionData(newVal, 'trigger', '实时触发');
|
||||
// 该时间的触发数据
|
||||
if (item.type_data != null) {
|
||||
_this.typeTimeMode = item;
|
||||
}
|
||||
ele.trigger.unshift(item);
|
||||
_this.$nextTick(() => {
|
||||
if (_this.$refs.typeChartRef != undefined) {
|
||||
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
|
||||
// //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
||||
let itemTypeChart = _this.$refs.typeChartRef[i];
|
||||
if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
|
||||
if (itemTypeChart.echartArr.includes('时间曲线图')) {
|
||||
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
|
||||
_this.$refs.typeChartRef[i].dataArr,
|
||||
_this.$refs.typeChartRef[i].componentName.split('_')[0],
|
||||
'实时触发'
|
||||
);
|
||||
}
|
||||
if (itemTypeChart.echartArr.includes('数值')) {
|
||||
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
|
||||
}
|
||||
if (itemTypeChart.echartArr.includes('表格')) {
|
||||
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
|
||||
}
|
||||
if (
|
||||
itemTypeChart.echartArr.includes('直方图') &&
|
||||
itemTypeChart.componentName.split('_')[0]
|
||||
) {
|
||||
// 数据改变重新渲染柱状图
|
||||
itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
|
||||
}
|
||||
if (
|
||||
itemTypeChart.echartArr.includes('饼状图') &&
|
||||
itemTypeChart.componentName.split('_')[0]
|
||||
) {
|
||||
// 数据改变重新渲染饼图
|
||||
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
|
||||
}
|
||||
if (
|
||||
itemTypeChart.componentName.includes('OD') &&
|
||||
itemTypeChart.$refs.ODChartRef != undefined &&
|
||||
itemTypeChart.dataArr[0].ob_data &&
|
||||
itemTypeChart.dataArr[0].ob_data.length != 0
|
||||
) {
|
||||
itemTypeChart.$refs.ODChartRef.drawThermalChart(
|
||||
itemTypeChart.dataArr[0].ob_data,
|
||||
itemTypeChart.startEndData
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
immediate: true
|
||||
},
|
||||
// 固定时刻的数据
|
||||
cycleTimeData: {
|
||||
handler(newVal) {
|
||||
// 监听到打印固定时刻数据
|
||||
// console.log('固定时刻数据cycleTimeData-', newVal);
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
|
||||
// console.log(newVal, '固定时刻数据');
|
||||
|
||||
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,
|
||||
deep: true
|
||||
immediate: true
|
||||
},
|
||||
//固定间隔
|
||||
cycleStatisticsData: {
|
||||
handler(newVal) {
|
||||
// console.log('固定间隔cycleStatisticsData', newVal);
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
|
||||
// console.log('固定间隔', newVal);
|
||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
||||
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,
|
||||
deep: true
|
||||
immediate: true
|
||||
},
|
||||
//周期统计实时累计数据主题
|
||||
cycleAccumulateData: {
|
||||
handler(newVal) {
|
||||
// console.log('周期统计实时累计数据主题cycleAccumulateData-', newVal);
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
//实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
|
||||
this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
|
||||
// console.log('周期统计实时累计数据主题', newVal);
|
||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
||||
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
|
||||
) {
|
||||
//console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
|
||||
if (
|
||||
itemTypeChartRef2.echartArr.includes('数值') &&
|
||||
itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
|
||||
) {
|
||||
//只需要修改数值组件,逻辑存在问题
|
||||
itemTypeChartRef2.getcycleAccumulateDataArr([item]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="content-box">
|
||||
|
||||
<div class="container">
|
||||
<!-- <nav>
|
||||
<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
|
||||
|
|
@ -7,22 +8,23 @@
|
|||
</nav> -->
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="xx路口">
|
||||
<div style="width: 60%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px">
|
||||
<img :src="imgUrl" width="100%" height="100%" />
|
||||
<div style="width:60%;height:100%;display:inline-block;border:1px soild #eee;padding:15px">
|
||||
<img :src='imgUrl' width="100%" height="100%"/>
|
||||
</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="areaComponent = true">区域组件</el-button>
|
||||
<el-button type="primary" @click="indexModule = true">指标组件</el-button>
|
||||
</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 label="数据看板">数据看板</el-tab-pane>
|
||||
<el-tab-pane label="分析配置">
|
||||
<analysisConfiguration></analysisConfiguration>
|
||||
<analysisConfiguration ></analysisConfiguration>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="分析状态">
|
||||
<editModal></editModal>
|
||||
<editModal ></editModal>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="存储">存储</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
|
@ -44,9 +46,14 @@
|
|||
<div style="width:30%;height:300px;display:inline-block">
|
||||
<img :src='imgUrl5' width="100%" height="100%"/>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<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-item label="实时性">
|
||||
<el-radio-group v-model="form.resource">
|
||||
|
|
@ -59,11 +66,11 @@
|
|||
</el-form-item> -->
|
||||
<el-form-item label="时间">
|
||||
<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 class="line" :span="2">-</el-col>
|
||||
<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-form-item>
|
||||
<el-form-item label="类型">
|
||||
|
|
@ -73,6 +80,7 @@
|
|||
<el-option label="卡车" value="kache"></el-option>
|
||||
<el-option label="非机动车" value="feji"></el-option>
|
||||
<el-option label="行人" value="xingren"></el-option>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌">
|
||||
|
|
@ -85,25 +93,29 @@
|
|||
<el-form-item label="事件">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="速度" v-if="form.resource == '实时（触发）'">
|
||||
<el-form-item label="速度" v-if="form.resource=='实时（触发）'">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车头时距" v-if="form.resource == '实时（触发）'">
|
||||
<el-form-item label="车头时距" v-if="form.resource=='实时（触发）'">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="平均速度" v-if="form.resource == '间隔'">
|
||||
<el-form-item label="平均速度" v-if="form.resource=='间隔'">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="平均流量" v-if="form.resource == '间隔'">
|
||||
<el-form-item label="平均流量" v-if="form.resource=='间隔'">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form>
|
||||
</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-item label="实时性">
|
||||
<el-radio-group v-model="areaComponentform.resource">
|
||||
|
|
@ -117,16 +129,11 @@
|
|||
</el-form-item> -->
|
||||
<el-form-item label="时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="areaComponentform.date1"
|
||||
style="width: 100%"
|
||||
></el-date-picker>
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="areaComponentform.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<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-form-item>
|
||||
<el-form-item label="类型">
|
||||
|
|
@ -136,95 +143,94 @@
|
|||
<el-option label="卡车" value="kache"></el-option>
|
||||
<el-option label="非机动车" value="feji"></el-option>
|
||||
<el-option label="行人" value="xingren"></el-option>
|
||||
|
||||
</el-select>
|
||||
</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-form-item>
|
||||
<el-form-item
|
||||
label="车道"
|
||||
v-if="areaComponentform.resource == '实时（触发）' || areaComponentform.resource == '实时（秒级）'"
|
||||
>
|
||||
<el-form-item label="车道" v-if="areaComponentform.resource=='实时（触发）'||areaComponentform.resource=='实时（秒级）'">
|
||||
<el-input v-model="areaComponentform.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="事件" v-if="areaComponentform.resource == '实时（触发）'">
|
||||
<el-form-item label="事件" v-if="areaComponentform.resource=='实时（触发）'">
|
||||
<el-input type="textarea" v-model="areaComponentform.desc"></el-input>
|
||||
</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-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-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-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-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-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-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-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-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-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-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-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-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-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-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
data() {
|
||||
return {
|
||||
hideBoxShow: true, //隐藏箱子按钮显示隐藏
|
||||
hideBoxShow:true, //隐藏箱子按钮显示隐藏
|
||||
closeStatus: null,
|
||||
modelOthers: false,
|
||||
componentShow: '',
|
||||
componentShow: "",
|
||||
isShowBtn: true, //菜单按钮隐藏
|
||||
isShowBtn1: false, //菜单按钮显示
|
||||
inputVal: '',
|
||||
inputVal: "",
|
||||
dialogFormVisible: false,
|
||||
areaComponent: false,
|
||||
indexModule: false,
|
||||
areaComponent:false,
|
||||
indexModule:false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
|
|
@ -246,47 +252,47 @@ export default {
|
|||
desc: ''
|
||||
},
|
||||
// dateTime: this.$moment(new Date()).format("LL"),
|
||||
nowTime: '',
|
||||
nowTime: "",
|
||||
// weekday: this.$moment().format("dddd"),
|
||||
ins: 0,
|
||||
imgUrl: '',
|
||||
imgUrl1: '',
|
||||
imgUrl2: '',
|
||||
imgUrl3: '',
|
||||
imgUrl4: '',
|
||||
imgUrl5: '',
|
||||
imgUrl:'',
|
||||
imgUrl1:'',
|
||||
imgUrl2:'',
|
||||
imgUrl3:'',
|
||||
imgUrl4:'',
|
||||
imgUrl5:'',
|
||||
btnPic: [],
|
||||
Data: [
|
||||
Data:[
|
||||
{
|
||||
title: 'xx路口',
|
||||
url: ''
|
||||
title:'xx路口',
|
||||
url:''
|
||||
},
|
||||
{
|
||||
title: '数据看板',
|
||||
url: ''
|
||||
title:'数据看板',
|
||||
url:''
|
||||
},
|
||||
{
|
||||
title: '分析配置',
|
||||
url: ''
|
||||
title:'分析配置',
|
||||
url:''
|
||||
},
|
||||
{
|
||||
title: '分析配置',
|
||||
url: ''
|
||||
title:'分析配置',
|
||||
url:''
|
||||
}
|
||||
],
|
||||
statusInfo: [
|
||||
{
|
||||
count: 15,
|
||||
name: '穿梭车在线数量',
|
||||
name: "穿梭车在线数量",
|
||||
// icon: require("../assets/images/运行设备图标.png"),
|
||||
color: '#01A8FC'
|
||||
color: "#01A8FC",
|
||||
},
|
||||
{
|
||||
count: 26,
|
||||
name: '任务数量',
|
||||
name: "任务数量",
|
||||
// icon: require("../assets/images/故障设备图标.png"),
|
||||
color: '#FDA401'
|
||||
}
|
||||
color: "#FDA401",
|
||||
},
|
||||
],
|
||||
messageInfo: [],
|
||||
orderList: [],
|
||||
|
|
@ -295,32 +301,34 @@ export default {
|
|||
perCent: 0,
|
||||
perCent1: 0,
|
||||
perCent2: 0,
|
||||
facToal: '',
|
||||
wbContent: '',
|
||||
facToal: "",
|
||||
wbContent:'',
|
||||
// wxContent:'',
|
||||
inContent: '',
|
||||
outContent: '',
|
||||
containerDetails: '',
|
||||
locdesc: '',
|
||||
weatherItem: {},
|
||||
loadingShow1: true,
|
||||
carInfo: [], //小车信息
|
||||
carName: '',
|
||||
palletizerInfo: [], //码垛机信息
|
||||
palletizerName: '',
|
||||
destackerInfo: [], //拆垛机信息
|
||||
destackerName: '',
|
||||
hoistInfo: [], //提升机信息’
|
||||
hoistName: '',
|
||||
battaryStationInfo: [], //快换电池装置
|
||||
battaryStationName: '',
|
||||
conveyorInfo: [], //输送机信息
|
||||
conveyorName: ''
|
||||
inContent:'',
|
||||
outContent:'',
|
||||
containerDetails:"",
|
||||
locdesc:'',
|
||||
weatherItem:{},
|
||||
loadingShow1:true,
|
||||
carInfo:[], //小车信息
|
||||
carName:'',
|
||||
palletizerInfo:[], //码垛机信息
|
||||
palletizerName:'',
|
||||
destackerInfo:[], //拆垛机信息
|
||||
destackerName:'',
|
||||
hoistInfo:[], //提升机信息’
|
||||
hoistName:'',
|
||||
battaryStationInfo:[],//快换电池装置
|
||||
battaryStationName:"",
|
||||
conveyorInfo:[], //输送机信息
|
||||
conveyorName:"",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// this.getMessage();
|
||||
// 消息提醒
|
||||
|
||||
// getfacKeepRecord({ type: 0 }).then((res) => {
|
||||
// this.messageInfo = this.messageInfo.concat(res.data);
|
||||
// console.log(this.messageInfo, ",,qweqw");
|
||||
|
|
@ -334,12 +342,13 @@ export default {
|
|||
// this.getDeviceStatusData()
|
||||
},
|
||||
created() {
|
||||
this.testMqtt();
|
||||
this.testMqtt()
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 测试：mqtt测试
|
||||
testMqtt() {
|
||||
this.getDataByMqtt();
|
||||
this.getDataByMqtt()
|
||||
// 小车订阅
|
||||
// for (let key in this.carId) {
|
||||
// this.getDataByMqtt(
|
||||
|
|
@ -391,19 +400,16 @@ export default {
|
|||
// );
|
||||
// }
|
||||
},
|
||||
onSubmit() {},
|
||||
onSubmit(){},
|
||||
//模型加载等待
|
||||
loadingShow(data) {
|
||||
this.loadingShow1 = data;
|
||||
loadingShow(data){
|
||||
this.loadingShow1 = data
|
||||
},
|
||||
// mqtt订阅（独立）
|
||||
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
|
||||
let host = `ws://${ip}:10087`;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
host = 'ws://172.16.1.168:10087/';
|
||||
}
|
||||
const host = `ws://${ip}:10087`;
|
||||
// const host = 'ws://172.16.1.168:10087/';
|
||||
|
||||
const options = {
|
||||
|
|
@ -416,36 +422,36 @@ export default {
|
|||
username: 'admin', // 用户名（可选）
|
||||
password: '123456', // 密码（可选）
|
||||
clientId: clientId, // 客户端ID，默认随机生成
|
||||
protocolId: 'MQTT',
|
||||
protocolId: "MQTT",
|
||||
protocolVersion: 4,
|
||||
clean: true, // false在离线时接收QoS1和2的消息
|
||||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||||
will: {
|
||||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||||
topic: 'img1', // 要发布的主题
|
||||
payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
|
||||
topic: "img1", // 要发布的主题
|
||||
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
|
||||
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||||
retain: false // 保留标志
|
||||
}
|
||||
retain: false, // 保留标志
|
||||
},
|
||||
};
|
||||
if (this.mqttClient == undefined) {
|
||||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||||
// const client = mqtt.connect(host, options); // 连接
|
||||
// const client = mqtt.connect(host) // 连接
|
||||
// 错误回调
|
||||
console.log('this.mqttClient', this.mqttClient);
|
||||
this.mqttClient.on('error', (err) => {
|
||||
console.log('[MQTT-TEST] 连接错误：', err);
|
||||
console.log("this.mqttClient",this.mqttClient)
|
||||
this.mqttClient.on("error", (err) => {
|
||||
console.log("[MQTT-TEST] 连接错误：",err);
|
||||
this.mqttClient.end();
|
||||
});
|
||||
// 重连回调
|
||||
this.mqttClient.on('reconnect', (reconnect) => {
|
||||
console.log('[MQTT-TEST] 重连中……', reconnect);
|
||||
this.mqttClient.on("reconnect", (reconnect) => {
|
||||
console.log("[MQTT-TEST] 重连中……",reconnect);
|
||||
});
|
||||
// 连接回调
|
||||
this.mqttClient.on('connect', (connect) => {
|
||||
console.log('[MQTT-TEST] 已连接的客户端ID: ', connect);
|
||||
this.mqttClient.on("connect", (connect) => {
|
||||
console.log("[MQTT-TEST] 已连接的客户端ID: ",connect);
|
||||
// 订阅
|
||||
this.mqttClient.subscribe('img0', { qos: 0 });
|
||||
this.mqttClient.subscribe('img1', { qos: 0 });
|
||||
|
|
@ -459,10 +465,11 @@ export default {
|
|||
this.mqttClient.subscribe('stream3', { qos: 0 });
|
||||
this.mqttClient.subscribe('stream4', { qos: 0 });
|
||||
this.mqttClient.subscribe('stream5', { qos: 0 });
|
||||
|
||||
});
|
||||
// 接收回调
|
||||
this.mqttClient.on('message', (topic, message, packet) => {
|
||||
console.log('[MQTT-TEST] 已连接的客户端ID: ', message);
|
||||
this.mqttClient.on("message", (topic, message, packet) => {
|
||||
console.log("[MQTT-TEST] 已连接的客户端ID: ",message);
|
||||
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
|
|
@ -486,164 +493,164 @@ export default {
|
|||
// const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
// console.log("imageUrl",imageUrl)
|
||||
// }
|
||||
if (topic.indexOf('img0') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
this.imgUrl = 'data:image/png;base64,' + msg.pic;
|
||||
console.log('imageUrl', imageUrl);
|
||||
} catch {
|
||||
if (topic.indexOf("img0") != -1) {
|
||||
try{
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg",msg) //msg为转换后的JSON数据
|
||||
this.imgUrl='data:image/png;base64,' + msg.pic;
|
||||
console.log("imageUrl",imageUrl)
|
||||
}catch{
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl",imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img1') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
|
||||
console.log('imageUrl', imageUrl);
|
||||
} catch {
|
||||
} else if (topic.indexOf("img1") != -1) {
|
||||
try{
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg",msg) //msg为转换后的JSON数据
|
||||
this.imgUrl1='data:image/png;base64,' + msg.pic;
|
||||
console.log("imageUrl",imageUrl)
|
||||
}catch{
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl",imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img2') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
|
||||
console.log('imageUrl', imageUrl);
|
||||
} catch {
|
||||
} else if (topic.indexOf("img2") != -1) {
|
||||
try{
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg",msg) //msg为转换后的JSON数据
|
||||
this.imgUrl2='data:image/png;base64,' + msg.pic;
|
||||
console.log("imageUrl",imageUrl)
|
||||
}catch{
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl",imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img3') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
|
||||
console.log('imageUrl', imageUrl);
|
||||
} catch {
|
||||
} else if (topic.indexOf("img3") != -1) {
|
||||
try{
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg",msg) //msg为转换后的JSON数据
|
||||
this.imgUrl3='data:image/png;base64,' + msg.pic;
|
||||
console.log("imageUrl",imageUrl)
|
||||
}catch{
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl",imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img4') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
|
||||
console.log('imageUrl', imageUrl);
|
||||
} catch {
|
||||
} else if (topic.indexOf("img4") != -1) {
|
||||
try{
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg",msg) //msg为转换后的JSON数据
|
||||
this.imgUrl4='data:image/png;base64,' + msg.pic;
|
||||
console.log("imageUrl",imageUrl)
|
||||
}catch{
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl",imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('img5') != -1) {
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log('msg', msg); //msg为转换后的JSON数据
|
||||
this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
|
||||
console.log('imageUrl', imageUrl);
|
||||
} catch {
|
||||
} else if (topic.indexOf("img5") != -1) {
|
||||
try{
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("msg",msg) //msg为转换后的JSON数据
|
||||
this.imgUrl5='data:image/png;base64,' + msg.pic;
|
||||
console.log("imageUrl",imageUrl)
|
||||
}catch{
|
||||
let imageType = 'arraybuffer';
|
||||
const blob = new Blob([message], { type: imageType });
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
console.log('imageUrl', imageUrl);
|
||||
const blob = new Blob([message], { type: imageType })
|
||||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||||
console.log("imageUrl",imageUrl)
|
||||
}
|
||||
} else if (topic.indexOf('stream0') != -1) {
|
||||
}else if (topic.indexOf("stream0") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream0') != -1) {
|
||||
}else if (topic.indexOf("stream0") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream1') != -1) {
|
||||
}else if (topic.indexOf("stream1") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream2') != -1) {
|
||||
}else if (topic.indexOf("stream2") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream3') != -1) {
|
||||
}else if (topic.indexOf("stream3") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream4') != -1) {
|
||||
}else if (topic.indexOf("stream4") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
} else if (topic.indexOf('stream5') != -1) {
|
||||
}else if (topic.indexOf("stream5") != -1) {
|
||||
console.log(
|
||||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||||
new Date(),
|
||||
new Date().getMilliseconds()
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
handleSearch() {
|
||||
handleSearch(){
|
||||
this.modelOthers = true;
|
||||
this.$refs.htModels.finbBox(this.inputVal);
|
||||
console.log(this.$refs.htModels, 'asdasdasd');
|
||||
this.inputVal = '';
|
||||
},
|
||||
handleRow(val) {
|
||||
this.$refs.htModels.finbBox(this.inputVal);
|
||||
console.log(this.$refs.htModels,'asdasdasd');
|
||||
this.inputVal = ''
|
||||
},
|
||||
handleRow(val){
|
||||
this.modelOthers = true;
|
||||
this.$refs.htModels.finbBox(val);
|
||||
},
|
||||
this.$refs.htModels.finbBox(val);
|
||||
},
|
||||
// 天气
|
||||
handleWather() {
|
||||
axios({
|
||||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',
|
||||
methods: ''
|
||||
}).then((res) => {
|
||||
this.weatherItem = res.data.lives[0];
|
||||
console.log(this.weatherItem, 'asdsads');
|
||||
});
|
||||
handleWather(){
|
||||
axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{
|
||||
this.weatherItem = res.data.lives[0]
|
||||
console.log(this.weatherItem,'asdsads');
|
||||
})
|
||||
},
|
||||
Onweather(name) {
|
||||
Onweather(name){
|
||||
// switch (name) {
|
||||
// case "多云":
|
||||
// return require('../assets/weather/Cloudy .png');
|
||||
|
|
@ -688,18 +695,18 @@ export default {
|
|||
// }
|
||||
},
|
||||
//隐藏箱子
|
||||
hideBox() {
|
||||
hideBox(){
|
||||
this.$refs.htModels.handleFirstBox();
|
||||
}
|
||||
},
|
||||
components: {
|
||||
editModal,
|
||||
analysisConfiguration
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-form .el-form-item {
|
||||
.el-form .el-form-item{
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,6 @@
|
|||
<!-- <p>节点源</p> -->
|
||||
<!-- <h3>节点源</h3> -->
|
||||
<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="视频地址">
|
||||
{{ form.target_detection.video_address }}</el-descriptions-item
|
||||
>
|
||||
|
|
@ -38,9 +31,9 @@
|
|||
<el-descriptions-item label="最后一帧分析时间">{{
|
||||
form.target_detection.last_frame_analysis_time
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
</el-descriptions>
|
||||
|
||||
<!-- <el-descriptions title="交通分析" :column="5" border>
|
||||
<el-descriptions title="交通分析" :column="5" border>
|
||||
<el-descriptions-item label="分析帧速率">
|
||||
{{ form.traffic_analysis.analyze_frame_rate }}</el-descriptions-item
|
||||
>
|
||||
|
|
@ -53,12 +46,18 @@
|
|||
<el-descriptions-item label="最后一帧分析时间">{{
|
||||
form.traffic_analysis.last_frame_analysis_time
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="数据同步" :column="5" border>
|
||||
<el-descriptions-item label="上次同步时间"> {{ form.data_sync.lastSyncTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="本次同步时间">{{ form.data_sync.currentSyncStatus }}</el-descriptions-item>
|
||||
<el-descriptions-item label="下次同步时间">{{ form.data_sync.nextSyncTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="上次同步时间">
|
||||
{{ form.data_sync.lastSyncTime }}</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="本次同步时间">{{
|
||||
form.data_sync.currentSyncStatus
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="下次同步时间">{{
|
||||
form.data_sync.nextSyncTime
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- <el-button @click="showUpdateCertificate = true" type="primary" style="margin-top:15px">更新证书</el-button> -->
|
||||
|
|
@ -74,7 +73,9 @@
|
|||
</el-row>
|
||||
|
||||
<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>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
@ -82,53 +83,50 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getAnalysisStatus } from '../../api/index';
|
||||
import { getAnalysisStatus } from "../../api/index";
|
||||
export default {
|
||||
props: {
|
||||
trafficAnalysisStatusData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
default: {},
|
||||
},
|
||||
targetAnalysisStatusData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
target_detection: {
|
||||
video_id: '',
|
||||
video_address: '',
|
||||
encoding_format: '',
|
||||
code_tate: '',
|
||||
frame_rate: '',
|
||||
resolution_ratio: '',
|
||||
neural_network: '',
|
||||
decoder_frame_rate: '',
|
||||
detector_frame_rate: '',
|
||||
last_frame_analysis_time: ''
|
||||
video_id: "",
|
||||
video_address: "",
|
||||
encoding_format: "",
|
||||
code_tate: "",
|
||||
frame_rate: "",
|
||||
resolution_ratio: "",
|
||||
neural_network: "",
|
||||
decoder_frame_rate: "",
|
||||
detector_frame_rate: "",
|
||||
last_frame_analysis_time: "",
|
||||
},
|
||||
traffic_analysis: {
|
||||
video_id: '',
|
||||
analyze_frame_rate: '',
|
||||
cache_capacity: '',
|
||||
cache_records_number: '',
|
||||
last_frame_analysis_time: ''
|
||||
video_id: "",
|
||||
analyze_frame_rate: "",
|
||||
cache_capacity: "",
|
||||
cache_records_number: "",
|
||||
last_frame_analysis_time: "",
|
||||
},
|
||||
data_sync: {
|
||||
lastSyncTime: '',
|
||||
currentSyncStatus: '',
|
||||
nextSyncTime: ''
|
||||
}
|
||||
lastSyncTime: "",
|
||||
currentSyncStatus: "",
|
||||
nextSyncTime: "",
|
||||
},
|
||||
},
|
||||
showUpdateCertificate: false,
|
||||
getUnityData: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
window.getStatus = this.getStatusFun;
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getData();
|
||||
// 定时器，每天凌晨1点触发更新
|
||||
|
|
@ -146,46 +144,41 @@ export default {
|
|||
}, timeUntilOneAMTomorrow);
|
||||
},
|
||||
methods: {
|
||||
//从unity视频获取数据
|
||||
getStatusFun(jsonString) {
|
||||
// console.log('jsonString', jsonString);
|
||||
this.getUnityData = JSON.parse(jsonString);
|
||||
},
|
||||
//获取分析状态数据
|
||||
getData() {
|
||||
let videoId = this.$route.query.id;
|
||||
getAnalysisStatus(videoId).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
// this.form = res.data.data;
|
||||
if (res.data.data.target_detection != null) {
|
||||
this.form.target_detection = res.data.data.target_detection;
|
||||
if (res.data.data.target_detection !=null) {
|
||||
this.form.target_detection = res.data.data.target_detection
|
||||
}
|
||||
if (res.data.data.traffic_analysis != null) {
|
||||
this.form.traffic_analysis = res.data.data.traffic_analysis;
|
||||
if (res.data.data.traffic_analysis !=null) {
|
||||
this.form.traffic_analysis = res.data.data.traffic_analysis
|
||||
}
|
||||
if (res.data.data.data_sync != null) {
|
||||
this.form.data_sync = res.data.data.data_sync;
|
||||
if (res.data.data.data_sync !=null) {
|
||||
this.form.data_sync = res.data.data.data_sync
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
trafficAnalysisStatusData: {
|
||||
//交通分析
|
||||
handler: function (val) {
|
||||
console.log(val, '交通分析数据');
|
||||
this.form.traffic_analysis = val;
|
||||
}
|
||||
console.log(val, "交通分析数据");
|
||||
this.form.traffic_analysis = val
|
||||
},
|
||||
},
|
||||
targetAnalysisStatusData: {
|
||||
//目标分析
|
||||
handler: function (val) {
|
||||
console.log(val, '目标监测数据');
|
||||
this.form.target_detection = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(val, "目标监测数据");
|
||||
this.form.target_detection = val
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -676,9 +676,6 @@ export default {
|
|||
// 备份服务器事件
|
||||
backupHandle() {
|
||||
var ipUrl = window.location.origin
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
ipUrl = '172.16.1.168';
|
||||
}
|
||||
// var ipUrl = '172.16.1.168'
|
||||
this.$confirm('此操作将备份操作, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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="text-align: center; font-weight: 700">行人/非机动车</div>
|
||||
<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="general pedestrian">一般行人</el-checkbox>
|
||||
<el-checkbox label="general pedestrian">普通行人</el-checkbox>
|
||||
<el-checkbox label="tricycle">三轮车</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>
|
||||
</div>
|
||||
<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>
|
||||
<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="coach">大巴车</el-checkbox>
|
||||
<el-checkbox label="coach">客车</el-checkbox>
|
||||
<el-checkbox label="bus">公交车</el-checkbox>
|
||||
<el-checkbox label="special vehicle">特种车辆</el-checkbox>
|
||||
<el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
|
||||
<el-checkbox label="special vehicle">专用汽车</el-checkbox>
|
||||
<el-checkbox label="construction vehicle">施工车辆</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<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="text-align: center; font-weight: 700">行人/非机动车</div>
|
||||
<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="general pedestrian">一般行人</el-checkbox>
|
||||
<el-checkbox label="general pedestrian">普通行人</el-checkbox>
|
||||
<el-checkbox label="tricycle">三轮车</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>
|
||||
</div>
|
||||
<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>
|
||||
<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="coach">大巴车</el-checkbox>
|
||||
<el-checkbox label="coach">客车</el-checkbox>
|
||||
<el-checkbox label="bus">公交车</el-checkbox>
|
||||
<el-checkbox label="special vehicle">特种车辆</el-checkbox>
|
||||
<el-checkbox label="construction vehicle">建筑车辆</el-checkbox>
|
||||
<el-checkbox label="special vehicle">专用汽车</el-checkbox>
|
||||
<el-checkbox label="construction vehicle">施工车辆</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="" v-if="componentForm.componentType == 'OD'">
|
||||
<div style="color: red; line-height: normal">
|
||||
注意：OD组件消耗性能较大，可能会造成分析延迟，请不要勾选太多选项!
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="单位：" ></el-form-item> -->
|
||||
<el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'">
|
||||
<el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
|
||||
<el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
|
||||
|
|
@ -445,8 +441,6 @@
|
|||
|
||||
<script>
|
||||
// import mqtt from "mqtt"; // mqtt协议
|
||||
import moment from 'moment';
|
||||
import _ from 'lodash';
|
||||
import editModal from '@/views/bounced/maintenanceRemind';
|
||||
import analysisConfiguration from '@/views/bounced/analysisConfiguration';
|
||||
import dataBoard from '@/views/bounced/dataBoard';
|
||||
|
|
@ -919,14 +913,7 @@ export default {
|
|||
data3: '',
|
||||
roleStatus: '', //三维权限控制
|
||||
highPic: {}, //接收第一张高频图片
|
||||
highPicList: [], //存储高频图片
|
||||
timer1: null,
|
||||
timer2: null,
|
||||
timer3: null,
|
||||
timer4: null,
|
||||
imgMessagetimer: null,
|
||||
imgMessage: '',
|
||||
imgMessageNew: false
|
||||
highPicList: [] //存储高频图片
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -955,11 +942,19 @@ export default {
|
|||
this.videoAnalysisShow = false;
|
||||
this.trafficAnalysisShow = false;
|
||||
this.createMqtt();
|
||||
|
||||
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
|
||||
} else if (this.$route.query.type == '离线视频') {
|
||||
this.videoAnalysisShow = true;
|
||||
this.trafficAnalysisShow = true;
|
||||
this.getAnalysisStatus();
|
||||
this.createMqtt();
|
||||
// if(this.$route.query.status=='未分析'){
|
||||
// }
|
||||
// if(this.$route.query.status=='未分析'){
|
||||
// // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
|
||||
// }else{
|
||||
// }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -970,11 +965,6 @@ export default {
|
|||
this.disable = true;
|
||||
this.roleStatus = 'false';
|
||||
}
|
||||
if (this.$route.query.type == '实时视频') {
|
||||
this.imgMessagetimer = setInterval(() => {
|
||||
this.setImgMessage();
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -1065,21 +1055,16 @@ export default {
|
|||
},
|
||||
// 数据看板的标签点击
|
||||
handleClick: function (tab, event) {
|
||||
// console.log(tab)
|
||||
if (tab.name == 'first') {
|
||||
if (this.$route.query.type == '实时视频') {
|
||||
//实时视频页面需要订阅的主题
|
||||
this.videoTopicSends();
|
||||
}
|
||||
} else if (tab.name == 'second') {
|
||||
this.$nextTick(() => {
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
this.$refs.dataBoardRef.getNew(this.getHistory);
|
||||
} else {
|
||||
//数据看板需要订阅的主题
|
||||
this.dataBoardTopicSends();
|
||||
this.$refs.dataBoardRef.getNew();
|
||||
}
|
||||
var that = this;
|
||||
if (tab._props.name == 'second') {
|
||||
that.$nextTick(() => {
|
||||
//
|
||||
that.$refs.dataBoardRef.getNew();
|
||||
// setTimeout(() => {
|
||||
// debugger
|
||||
// this.getHistory()
|
||||
// }, 10000);
|
||||
this.getHistory();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -1110,74 +1095,38 @@ export default {
|
|||
// 'simulator_target-' + this.$route.query.id
|
||||
];
|
||||
window.PubScribe(this.topicSends, '001', this.realInfo);
|
||||
this.timer1 = null;
|
||||
// this.timer1 = setTimeout(() => {
|
||||
// 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 }));
|
||||
setTimeout(() => {
|
||||
this.getHistory();
|
||||
}, 5000);
|
||||
},
|
||||
//实时视频页面需要订阅的主题
|
||||
videoTopicSends() {
|
||||
} else if (this.$route.query.type == '实时视频') {
|
||||
this.topicSends = [
|
||||
'stream' + this.number,
|
||||
'trajectory' + this.number,
|
||||
'detection' + this.number,
|
||||
'img' + this.number,
|
||||
'TargetAnalysisStatusData',
|
||||
'TrafficAnalysisStatusData'
|
||||
];
|
||||
// console.log('在test1/index视频页面number-',this.number)
|
||||
window.PubScribe(this.topicSends, this.number, this.realInfo, false, this.$route.query.id);
|
||||
},
|
||||
//数据看板需要订阅的主题
|
||||
dataBoardTopicSends() {
|
||||
this.topicSends = [
|
||||
'stream' + this.number,
|
||||
'trajectory' + this.number,
|
||||
'detection' + this.number,
|
||||
'TargetAnalysisStatusData',
|
||||
'TrafficAnalysisStatusData',
|
||||
'trigger-' + this.$route.query.id,
|
||||
'cycle_time-' + this.$route.query.id,
|
||||
'cycle_statistics-' + this.$route.query.id,
|
||||
'cycle_accumulate-' + this.$route.query.id
|
||||
'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);
|
||||
}
|
||||
setTimeout(() => {
|
||||
window.publish('Custom', JSON.stringify({ type: 'getImage', videoid: this.$route.query.id }));
|
||||
}, 5000);
|
||||
},
|
||||
//获取视频分析，交通分析状态数据
|
||||
getAnalysisStatus() {
|
||||
|
|
@ -1191,8 +1140,7 @@ export default {
|
|||
} else if (res.data.data.videoAnalysisStatus == '分析中') {
|
||||
this.disabledVideoAnalysis = true;
|
||||
this.videoUnityShow = false;
|
||||
this.timer3 = null;
|
||||
this.timer3 = setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
this.getAnalysisStatus();
|
||||
}, 5000);
|
||||
} else if (res.data.data.videoAnalysisStatus == '已分析') {
|
||||
|
|
@ -1288,7 +1236,6 @@ export default {
|
|||
},
|
||||
//获取离线视频固定时刻固定间隔
|
||||
getHistory() {
|
||||
console.log('执行获取离线视频固定时刻固定间隔主题');
|
||||
window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
|
||||
},
|
||||
getZhuanFaMQTT(topic, msg) {
|
||||
|
|
@ -1305,8 +1252,7 @@ export default {
|
|||
message: '启动成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.timer4 = null;
|
||||
this.timer4 = setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
this.getAnalysisStatus();
|
||||
}, 5000);
|
||||
// if(this.videoAnalysisSta=='已分析'){
|
||||
|
|
@ -1378,9 +1324,6 @@ export default {
|
|||
//获取视频分析结果
|
||||
analysisData() {
|
||||
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
|
||||
//console.log('ip', ip);
|
||||
getAnalysisData(this.$route.query.id, ip).then((res) => {
|
||||
|
|
@ -1421,10 +1364,7 @@ export default {
|
|||
//分析结束传参
|
||||
postTraffic() {
|
||||
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:80
|
||||
// var ip = '172.16.1.168'; //http://172.16.1.168:5000
|
||||
//console.log('ip', ip);
|
||||
getAnalysisData(this.$route.query.id, ip).then((res) => {
|
||||
//console.log('res.data.data', res.data.data);
|
||||
|
|
@ -1444,60 +1384,74 @@ export default {
|
|||
},
|
||||
/** 实时数据分类 */
|
||||
realInfo(topic, message) {
|
||||
let mapModuleDom = document.getElementById('mapModule');
|
||||
const utf8decoder = new TextDecoder();
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
|
||||
case 'img' + this.number:
|
||||
// console.log('msg接受一张高频图片', moment().format('YYYY-MM-DD HH:mm:ss'));
|
||||
this.imgMessage = message;
|
||||
this.imgMessageNew = true;
|
||||
// try {
|
||||
// const u8arr = new Uint8Array(message);
|
||||
// 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(msg);
|
||||
// } else if (msg.rate == 'low') {
|
||||
// this.analysisConfigurationdata = msg;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// // console.log('imgError',error)
|
||||
// }
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
// //console.log(msg, 'msg接受一张高频图片');
|
||||
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
if (msg.rate == 'high') {
|
||||
document.getElementById('mapModule').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.highPicList = sessionStorage.getItem('highPicList')
|
||||
? JSON.parse(sessionStorage.getItem('highPicList'))
|
||||
: [];
|
||||
if (this.highPicList.length == 0) {
|
||||
this.highPicList.push({ pic: msg.pic, videoId: msg.id });
|
||||
sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList));
|
||||
} else {
|
||||
let found = false;
|
||||
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;
|
||||
// 树结构
|
||||
case 'stream' + this.number:
|
||||
try {
|
||||
const utf8decoder1 = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
// console.log('stream' + this.number, msg);
|
||||
// console.log('Web收到：stream' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
|
||||
mapModuleDom.contentWindow.getData(JSON.stringify(msg));
|
||||
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
} catch (error) {}
|
||||
break;
|
||||
// 控制台输出
|
||||
case 'trajectory' + this.number:
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
mapModuleDom.contentWindow.getGuiJi(JSON.stringify(msg));
|
||||
document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
|
||||
} catch (error) {}
|
||||
break;
|
||||
// 实时触发
|
||||
case 'detection' + this.number:
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
|
|
@ -1511,25 +1465,26 @@ export default {
|
|||
detId.push(msgN[i]);
|
||||
}
|
||||
}
|
||||
mapModuleDom.contentWindow.getChuFa(JSON.stringify(detId));
|
||||
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
|
||||
}
|
||||
} catch (error) {}
|
||||
break;
|
||||
case 'trigger-' + this.$route.query.id:
|
||||
try {
|
||||
// //console.log("trigger_msgN",message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame);
|
||||
// console.log("trigger_msgN",msgN)
|
||||
// console.log('实时触发trigger-', msgN);
|
||||
// //console.log("trigger_msgN",msgN)
|
||||
// msgN.forEach(item => {
|
||||
// //console.log("item.name",item.name)
|
||||
// })
|
||||
// for (const item of msgN) {
|
||||
// if (item.component_name == 'OD_0') {
|
||||
// console.log('源头实时触发trigger-', item);
|
||||
// if (item.name == 'gate3触发') {
|
||||
// console.log('实时触发trigger-', item);
|
||||
// }
|
||||
// }
|
||||
this.triggerListData = msgN;
|
||||
|
|
@ -1538,6 +1493,7 @@ export default {
|
|||
case 'cycle_time-' + this.$route.query.id:
|
||||
try {
|
||||
// //console.log("trigger_msgN",message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
|
|
@ -1549,27 +1505,24 @@ export default {
|
|||
case 'cycle_history-' + this.$route.query.id:
|
||||
try {
|
||||
// //console.log("trigger_msgN",message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log('历史数据源头', msgN);
|
||||
//console.log('历史数据', msgN);
|
||||
this.cycleHistoryData = msgN;
|
||||
} catch (error) {}
|
||||
break;
|
||||
case 'cycle_statistics-' + this.$route.query.id:
|
||||
try {
|
||||
// //console.log("trigger_msgN",message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log("cycle_statistics-固定间隔",temp)
|
||||
// for (const item of msgN) {
|
||||
// if (item.component_name == 'OD_0') {
|
||||
// console.log('源头固定间隔cycle_statistics-', item);
|
||||
// }
|
||||
// }
|
||||
this.cycleStatisticsData = msgN;
|
||||
} catch (error) {}
|
||||
break;
|
||||
|
|
@ -1577,6 +1530,7 @@ export default {
|
|||
try {
|
||||
//周期统计实时累计数据主题
|
||||
// console.log("trigger_msgN",message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
|
|
@ -1590,6 +1544,7 @@ export default {
|
|||
break;
|
||||
case 'VideoStatusData':
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
|
|
@ -1599,6 +1554,7 @@ export default {
|
|||
break;
|
||||
case 'TargetAnalysisStatusData': //目标监测
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
|
|
@ -1608,6 +1564,7 @@ export default {
|
|||
break;
|
||||
case 'TrafficAnalysisStatusData': //交通分析
|
||||
try {
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
|
|
@ -1617,61 +1574,20 @@ export default {
|
|||
break;
|
||||
case 'simulator_target-' + this.$route.query.id: //目标数量
|
||||
try {
|
||||
const utf8decoder1 = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp);
|
||||
//console.log('simulator_target-目标数量', msg);
|
||||
mapModuleDom.contentWindow.getTargetNumber(JSON.stringify(msg));
|
||||
document.getElementById('mapModule').contentWindow.getTargetNumber(JSON.stringify(msg));
|
||||
} catch (error) {}
|
||||
break;
|
||||
}
|
||||
// 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));
|
||||
this.receiveNews = '';
|
||||
},
|
||||
// handleClick(tab, event) {
|
||||
// //console.log(tab, event);
|
||||
// },
|
||||
changeCompany(val) {
|
||||
//console.log('val', val);
|
||||
if (val == '小时') {
|
||||
|
|
@ -1708,11 +1624,8 @@ export default {
|
|||
//初始化unity
|
||||
OnSceneN() {
|
||||
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];
|
||||
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('http://172.16.1.168');
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
|
|
@ -1745,7 +1658,7 @@ export default {
|
|||
this.componentId = id;
|
||||
this.componentForm.componentType = type;
|
||||
this.componentTitle = type;
|
||||
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
|
||||
getComponentData({ AnalogAreaComponentId: id }).then((res) => {
|
||||
//console.log('res', res);
|
||||
if (res.data.code == 200) {
|
||||
//console.log('res', res.data.data);
|
||||
|
|
@ -1788,7 +1701,7 @@ export default {
|
|||
this.componentForm.endValue = res.data.data.endValue;
|
||||
this.componentForm.startValue = res.data.data.startValue;
|
||||
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.type = res.data.data.type
|
||||
if (res.data.data.startSectionIds != '') {
|
||||
|
|
@ -1811,10 +1724,7 @@ export default {
|
|||
this.sectionals.forEach((items) => {
|
||||
startSectionArr.push(items.graphicName);
|
||||
});
|
||||
if (startSectionArr.length > 0) {
|
||||
this.componentForm.startSection = [startSectionArr[0]];
|
||||
this.handleCheckedStartSection([startSectionArr[0]]);
|
||||
}
|
||||
this.componentForm.startSection = startSectionArr;
|
||||
}
|
||||
if (res.data.data.endSectionIds != '') {
|
||||
//console.log('endSectionIds', res.data.data.endSectionIds);
|
||||
|
|
@ -1836,10 +1746,7 @@ export default {
|
|||
this.sectionals.forEach((items) => {
|
||||
endSectionArr.push(items.graphicName);
|
||||
});
|
||||
if (endSectionArr.length > 0) {
|
||||
this.componentForm.endSection = [endSectionArr[0]];
|
||||
this.handleCheckedendSection([endSectionArr[0]]);
|
||||
}
|
||||
this.componentForm.endSection = endSectionArr;
|
||||
}
|
||||
if (this.componentForm.presentationForm != '') {
|
||||
var arr = [];
|
||||
|
|
@ -1859,10 +1766,9 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
//双击修改模拟区组件、图形
|
||||
//修改模拟区组件、图形
|
||||
getSimulationAreaEdit(id, type, componentType, name, number) {
|
||||
// console.log('执行了getSimulationAreaEdit');
|
||||
// console.log('number', number);
|
||||
//console.log('number', number);
|
||||
this.numberNew = number;
|
||||
if (type == '图形') {
|
||||
this.form.id = id;
|
||||
|
|
@ -1872,7 +1778,6 @@ export default {
|
|||
getJianktxDetails({ GraphicId: this.form.id }).then((res) => {
|
||||
this.form.name = res.data.data.graphicName;
|
||||
this.form.type = res.data.data.graphicType;
|
||||
this.form.Direction = res.data.data.direction;
|
||||
this.typeCheckList = res.data.data.type.split('|');
|
||||
if (res.data.data.isPerceptualCoding == '0') {
|
||||
this.switchValue = 0;
|
||||
|
|
@ -1903,7 +1808,7 @@ export default {
|
|||
this.componentId = id;
|
||||
this.componentForm.componentType = componentType;
|
||||
this.componentTitle = componentType;
|
||||
getComponentData({ AnalogAreaComponentId: id }).then(async(res) => {
|
||||
getComponentData({ AnalogAreaComponentId: id }).then((res) => {
|
||||
//console.log('res', res);
|
||||
if (res.data.code == 200) {
|
||||
//console.log('res', res.data.data);
|
||||
|
|
@ -1942,7 +1847,6 @@ export default {
|
|||
this.componentForm.startValue = res.data.data.startValue;
|
||||
this.componentForm.presentationForm = res.data.data.presentationForm;
|
||||
// this.componentForm.type = res.data.data.type
|
||||
await this.getAllSectionalData(this.$route.query.id);
|
||||
if (res.data.data.startSectionIds != '') {
|
||||
//console.log('startSectionIds', res.data.data.startSectionIds);
|
||||
var startSectionIdArr = [];
|
||||
|
|
@ -1995,7 +1899,7 @@ export default {
|
|||
},
|
||||
//获取所有断面数据
|
||||
getAllSectionalData(VideoId) {
|
||||
return getSectionalData({ VideoId: VideoId }).then((res) => {
|
||||
getSectionalData({ VideoId: VideoId }).then((res) => {
|
||||
//console.log('res', res);
|
||||
if (res.data.code == 200) {
|
||||
this.sectionals = res.data.data;
|
||||
|
|
@ -2044,7 +1948,7 @@ export default {
|
|||
this.title = this.figureType(item);
|
||||
this.orderShow = false;
|
||||
},
|
||||
//右击图形修改图形名称弹框
|
||||
//双击图形修改图形名称弹框
|
||||
getModifyTheNameN(data, number) {
|
||||
this.orderShow = true;
|
||||
//console.log('data', data);
|
||||
|
|
@ -2198,8 +2102,7 @@ export default {
|
|||
',' +
|
||||
this.numberNew +
|
||||
',' +
|
||||
form.Direction +
|
||||
',add'
|
||||
form.Direction
|
||||
)
|
||||
);
|
||||
} else {
|
||||
|
|
@ -2207,7 +2110,7 @@ export default {
|
|||
.getElementById('mapModule')
|
||||
.contentWindow.postFigureName(
|
||||
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')
|
||||
.contentWindow.postFigureName(
|
||||
JSON.stringify(
|
||||
form.id +
|
||||
',' +
|
||||
form.name +
|
||||
',' +
|
||||
this.startFigureName +
|
||||
',' +
|
||||
this.numberNew +
|
||||
',' +
|
||||
form.Direction +
|
||||
',edit'
|
||||
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',' + form.Direction
|
||||
)
|
||||
);
|
||||
} else {
|
||||
document
|
||||
.getElementById('mapModule')
|
||||
.contentWindow.postFigureName(
|
||||
JSON.stringify(
|
||||
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',edit'
|
||||
)
|
||||
JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',')
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -2344,7 +2236,7 @@ export default {
|
|||
},
|
||||
//编辑组件
|
||||
onSubmitComponent(componentForm) {
|
||||
// console.log(componentForm, 'ffffffffff');
|
||||
//console.log(componentForm, 'ffffffffff');
|
||||
if (componentForm.timeMode != '实时触发' && componentForm.company == '') {
|
||||
this.$message.warning('请选择必选项');
|
||||
return false;
|
||||
|
|
@ -2566,13 +2458,9 @@ export default {
|
|||
},
|
||||
//改变起点
|
||||
handleCheckedStartSection(value) {
|
||||
// console.log('改变起点', value);
|
||||
//console.log('改变起点', value);
|
||||
var startSectionIdArr = [];
|
||||
var startSectionNameArr = [];
|
||||
if (value.length == 0) {
|
||||
this.componentForm.startSectionIds = '';
|
||||
this.componentForm.startSectionNames = '';
|
||||
}
|
||||
value.forEach((item) => {
|
||||
this.sectionals.forEach((items) => {
|
||||
if (item == items.graphicName) {
|
||||
|
|
@ -2591,10 +2479,6 @@ export default {
|
|||
//console.log('改变终点', value);
|
||||
var endSectionIdArr = [];
|
||||
var endSectionNameArr = [];
|
||||
if (value.length == 0) {
|
||||
this.componentForm.endSectionIds = '';
|
||||
this.componentForm.endSectionNames = '';
|
||||
}
|
||||
value.forEach((item) => {
|
||||
this.sectionals.forEach((items) => {
|
||||
if (item == items.graphicName) {
|
||||
|
|
@ -2657,18 +2541,6 @@ export default {
|
|||
editModal,
|
||||
analysisConfiguration,
|
||||
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>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -50,7 +50,7 @@ module.exports = {
|
|||
host: myHost,
|
||||
proxy: {
|
||||
'/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://ht.api.umayle.com:2022',
|
||||
ws: true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue