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

代码提交

This commit is contained in:
luoshiwen 2023-02-22 21:49:46 +08:00
parent 7087614b09 390216761c
commit 0b52be6244
11 changed files with 229 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/b84f2eff62cf6f6e1777fdc799b085d7.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/d36b985a450343bbaebc7d3929d30d4d.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/f33a3790ba493045db8997e3255aae8b.json generated vendored
View File

File diff suppressed because one or more lines are too long

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

@ -3,9 +3,9 @@
<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>
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: 100%; height: 300px"></div>
@ -67,12 +67,14 @@ export default {
created() {
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
},
methods: {
drawLine() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs.lineChart);
}
// myChart.showLoading()　　//开启loading
let option = {
// title: {
// show: true,
@ -136,8 +138,9 @@ export default {
],
series: this.series
};
myChart.setOption(option);
myChart.setOption(option)　　//再设置配置
// myChart.hideLoading()
// myChart.setOption(option);
// window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize();
// };
@ -148,12 +151,14 @@ export default {
},
mounted() {
this.drawLine();
console.log(this.title);
},
watch: {
list: {
handler(newVal) {
if (newVal) {
console.log(this.title);
console.log(newVal, this.title + '折现图的数据');
// x轴的数据
this.xData = newVal.map(val => {
return val.time;
@ -195,23 +200,32 @@ export default {
mapN.push(arr[t][i]);
}
}
var lineArr = [];
// 遍历需要多少条类型折线
if (this.typeValue) {
console.log("this.typeValue.type_data",this.typeValue.type_data)
if (this.typeValue.type_data!=undefined) {
this.typeValue.type_data.forEach(ele => {
lineArr.push({
name: ele.name,
var lineArr = [{
name: '机动车',
type: 'line',
data: [],
smooth: true
});
});
}
}
// 筛选类型的数量
}, {
name: '非机动车',
type: 'line',
data: [],
smooth: true
}, {
name: '行人',
type: 'line',
data: [],
smooth: true
}];
// if (newVal[0].type_data != undefined) {
// newVal[0].type_data.forEach(ele => {
// lineArr.push({
// name: ele.name,
// type: 'line',
// data: [],
// smooth: true
// });
// });
// }
mapN.forEach(ele => {
if (ele.name == '机动车') {
lineArr[0].data.push(ele.quantity);
@ -265,10 +279,14 @@ export default {
this.series[0].data = newVal.map(val => {
return val.headway;
});
} else if (this.title == '排队数') {
} else if (this.title == '排队数' && this.status == '触发') {
this.series[0].data = newVal.map(val => {
return val.n_queue;
});
} else if (this.title == '排队数' && this.status == '周期统计') {
this.series[0].data = newVal.map(val => {
return val.ave_queue;
});
} else if (this.title == '检测数') {
this.series[0].data = newVal.map(val => {
return val.n_stay;
@ -280,17 +298,12 @@ export default {
} else if (this.title == '拥堵') {
this.series[0].data = newVal.map(val => { });
}
if (this.$refs.lineChart) {
this.$nextTick(() => {
this.drawLine();
});
}
}
},
immediate: true
},
typeValue(newVal){
this.drawLine()
}
},
deep: true
}
}
};

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

@ -1,5 +1,4 @@
<template>
<!-- 触发类型 -->
<template><!-- 触发类型 -->
<div class="setion">
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
<!-- 触发数据数值渲染 -->
@ -21,7 +20,7 @@
</div>
</div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="dataArr">
<div v-if="dataArr && dataArr.length != 0">
<div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
@ -69,7 +68,8 @@
<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 style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
triggerType
}}</span>
</div>
<div class="tableTime">
@ -139,7 +139,9 @@ export default {
valueShow: {}
};
},
created() { },
created() {
},
methods: {
// 计算类型的数值
},

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

@ -737,9 +737,9 @@ export default {
OnSceneload(newV) {
var ip = window.location.host;
this.ipData = 'http://' + ip.split(':')[0] + ':5000';
// document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
this.$refs.analysisWeb.contentWindow.getIpData('http://172.16.1.168:5000');
this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
// this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
this.unityDone = true;
},
handleDeleteDian(row, idx) {
@ -1046,8 +1046,8 @@ export default {
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0];
console.log("ip",ip)
// const host = `ws://${ip}:10087`;
const host = 'ws://172.16.1.168:10087/';
const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/';
const options = {
// 配置
// 测试：订阅本机IP

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

@ -16,6 +16,7 @@
</p>
<span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
</div>
<div v-if="s.children">
<div v-for="o in s.children" :key="o.analogAreaComponentId">
<OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
:componentName="o.componentName" :echartArr="o.presentationForm"
@ -38,6 +39,7 @@
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleStatistics" />
</div>
</div>
<!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
</div>
</template>
@ -90,6 +92,12 @@ export default {
return [];
}
},
componentList:{
type:Array,
default(){
return []
}
}
},
data() {
return {
@ -339,43 +347,37 @@ export default {
typeValue: {},
// 周期时刻的数值看板展示
typeCycleTimeData: {},
typeCycleStatistics: {}
typeCycleStatistics: {},
nw: '1'
};
},
// beforeCeated(){
// },
created() {
// this.idVal = this.$route.query.id;
// getComponentSection({ VideoId: this.idVal }).then((res) => {
// if (res.data.code == 200) {
// this.componentList = res.data.data
// console.log(res.data.data);
// this.siftData()
// // 处理获取过来的数据
// // this.componentList.forEach((val) => {
// // this.sectionArr.push(val.combinationName);
// // this.sectionArr = Array.from(new Set(this.sectionArr));
// // });
// // this.sectionData = this.sectionArr.map((item) => {
// // item = { title: item, children: [] };
// // this.componentList.forEach((val) => {
// // if (item.title == val.combinationName) {
// // item.children.push(val);
// // }
// // });
// // return item;
// // });
// console.log(this.sectionData, '455');
// } else if (res.data.code == 404) {
// }
// });
},
methods: {
siftData(list) {
this.idVal = this.$route.query.id;
this.sectionData = []
this.sectionArr = []
// if(this.nw=='second'){
// }
this.getNEW()
},
methods: {
getNEW() {
getComponentSection({ VideoId: this.$route.query.id }).then((res) => {
if (res.data.code == 200) {
this.componentList = res.data.data
this.siftData(this.componentList)
} else if (res.data.code == 404) {
}
});
},
siftData(list) {
// this.sectionArr = []
// this.sectionData = []
list.forEach((val) => {
this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr));
@ -393,7 +395,7 @@ export default {
});
return item;
});
console.log(this.sectionData, '筛选数据');
},
// 组件图标点击下拉事件
sectionHandle(i) {
@ -420,41 +422,36 @@ export default {
}
},
// channge(oldVal, newVal) {
// if (newVal == "second") {
// this.getNEW()
// } else if (oldVal == "second") {
// this.getNEW()
// }
// }
// 触发数据的类型数值
},
mounted() {
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, '请求数据');
this.componentList = res.data.data;
this.siftData(this.componentList);
} else if (res.data.code == 404) {
}
});
// getComponentSection({ VideoId: this.$route.query.id }).then(res => {
// if (res.data.code == 200) {
// console.log(res.data.data, '请求数据');
// this.componentList = res.data.data;
// this.siftData(this.componentList);
// } else if (res.data.code == 404) {
// }
// });
},
watch: {
activeName: {
handler(newVal) {
console.log("newVal", newVal)
if (newVal == "second") {
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, '请求数据');
this.componentList = res.data.data;
this.siftData(this.componentList);
} else if (res.data.code == 404) {
}
});
}
},
immediate: true
},
// },
// immediate: true
// },
// activeName: 'channge',
// 触发的原始数据
triggerData: {
handler(newVal, oldVal) {
@ -467,9 +464,8 @@ export default {
handler(newVal) {
this.triggerList = newVal
// 触发数据
console.log(newVal, 'triggerlistData');
if (newVal && this.sectionData.length!=0) {
if (newVal && this.sectionData.length != 0) {
this.componentList.forEach(ele => {
if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = []
@ -501,14 +497,13 @@ export default {
cycleTimeData: {
handler(newVal) {
// 监听到打印周期时刻数据
console.log(newVal, '440');
if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = []
}
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' ) {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0)
} else {
@ -522,7 +517,6 @@ export default {
}
})
})
console.log(this.sectionData, '455');
}
},
immediate: true
@ -535,7 +529,6 @@ export default {
// }
cycleStatistics: {
handler(newVal) {
console.log(newVal, '周期统计');
if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => {
@ -563,7 +556,6 @@ export default {
});
});
}
console.log(this.sectionData, '周期统计筛选数据');
}
},

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

@ -409,7 +409,10 @@ export default {
getDataByMqtt(url, topic, cIdNum) {
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const 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 = {
// 配置

118
src/views/index.vue
View File

@ -6,26 +6,15 @@
<el-tabs type="border-card" v-model="activeName" >
<el-tab-pane :label="titName" name="first">
<div class="mapModuleApp">
<iframe
id="mapModule"
src="./VideoWeb/index.html"
frameborder="0"
style="width: 100%; height:100%;"
scrolling="no"
v-if="videoUnityShow"
></iframe>
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"
scrolling="no" v-if="videoUnityShow"></iframe>
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
<el-empty :description="description" v-if="videoAnalysisShow"> </el-empty>
</div>
</el-tab-pane>
<el-tab-pane label="数据看板" name="second">
<dataBoard
:activeName="activeName"
:triggerData="triggerData"
:triggerListData="triggerListData"
:cycleTimeData="cycleTimeData"
:cycleStatistics="cycleStatistics"
></dataBoard>
<dataBoard ref="dataBoardRef" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
:cycleTimeData="cycleTimeData" :cycleStatistics="cycleStatistics" v-if="activeName='second'"></dataBoard>
</el-tab-pane>
<el-tab-pane label="分析配置" name="third">
<analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@ -37,31 +26,12 @@
</el-tabs>
<!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
>视频分析</el-button> -->
<el-button
class="trafficAnalysis"
type="primary"
plain
size="mini"
@click="trafficAnalysisBtn"
v-if="trafficAnalysisShow"
:disabled="disabledTrafficAnalysis"
>交通分析</el-button
>
<el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
</div>
<el-drawer
class="new-dialog"
:visible.sync="dialogFormVisible"
direction="btt"
custom-class="demo-drawer"
ref="drawer"
:modal="false"
:close-on-click-modal="false"
v-alterELDialogMarginTop="{ marginTop: '0vh' }"
width="100%"
:wrapperClosable="false"
:with-header="false"
size="100%"
>
<el-drawer class="new-dialog" :visible.sync="dialogFormVisible" direction="btt" custom-class="demo-drawer"
ref="drawer" :modal="false" :close-on-click-modal="false" v-alterELDialogMarginTop="{ marginTop: '0vh' }"
width="100%" :wrapperClosable="false" :with-header="false" size="100%">
<div class="formBox">
<el-form ref="form" :model="form" label-width="80px" :inline="true">
<el-form-item label="组件名称">
@ -82,7 +52,8 @@
</div>
</el-drawer>
<!-- 组件弹框 -->
<el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal ="false" @close="closeComponentForm()">
<el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal="false"
@close="closeComponentForm()">
<el-form ref="form" :model="componentForm" label-width="150px">
<el-form-item label="名称：">
<el-input v-model="componentForm.componentName"></el-input>
@ -93,14 +64,11 @@
<el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item
label="数值筛选："
v-if="
<el-form-item label="数值筛选：" v-if="
componentForm.componentType != 'OD' &&
componentForm.componentType != '类型' &&
componentForm.componentType != '流量'
"
>
">
<el-input-number v-model="componentForm.startValue"></el-input-number>
<el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
</el-form-item>
@ -112,22 +80,15 @@
</el-form-item>
<el-form-item label="时间模式：">
<el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
<el-option
label="触发"
value="触发"
v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"
></el-option>
<el-option
label="周期时刻"
value="周期时刻"
v-if="
<el-option label="触发" value="触发"
v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"></el-option>
<el-option label="周期时刻" value="周期时刻" v-if="
componentForm.componentType != '排队数' &&
componentForm.componentType != '检测数' &&
componentForm.componentType != '延误' &&
componentForm.componentType != '拥堵' &&
componentForm.componentType != '流量'
"
></el-option>
"></el-option>
<el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option>
</el-select>
</el-form-item>
@ -168,11 +129,15 @@
<el-form-item label="展现形式：" v-if="componentForm.componentType != 'OD'">
<el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
<el-checkbox label="数值" name="presentation"></el-checkbox>
<el-checkbox label="表格" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
<el-checkbox label="表格" name="presentation"
v-if="componentForm.componentType != '拥堵'"></el-checkbox>
<el-checkbox label="时间曲线图" name="type"></el-checkbox>
<el-checkbox label="直方图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
<el-checkbox label="饼状图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
<el-checkbox label="均值图" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
<el-checkbox label="直方图" name="presentation"
v-if="componentForm.componentType == '类型'"></el-checkbox>
<el-checkbox label="饼状图" name="presentation"
v-if="componentForm.componentType == '类型'"></el-checkbox>
<el-checkbox label="均值图" name="presentation"
v-if="componentForm.componentType != '拥堵' || componentForm.componentType != '流量' || componentForm.componentType != '类型' || componentForm.componentType != '延误'"></el-checkbox>
</el-checkbox-group>
<!-- <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
<el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId" >{{item.graphicName}}</el-checkbox>
@ -370,7 +335,10 @@ export default {
videoType: '实时视频'
},
description: '请等待排队',
ipData: ''
ipData: '',
componentList:[]
};
},
@ -422,6 +390,14 @@ export default {
},
mounted() { },
methods: {
// 数据看板的标签点击
// handleClick(tab, event) {
// if(tab._props.name=='second'){
// this.$refs.dataBoardRef.getNEW()
// }
// },
/** 创建mqtt */
createMqtt() {
//创建链接，接收数据
@ -623,6 +599,7 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
// console.log("trigger_msgN",msgN)
this.triggerListData = msgN;
} catch (error) { }
break;
@ -1270,19 +1247,25 @@ export default {
}
.content-box::-webkit-scrollbar {
display: none; /* Chrome Safari */
display: none;
/* Chrome Safari */
}
.new-dialog {
width: 49%;
height: 11%;
left: calc(24vw);
top: 90vh;
bottom: 0 /* right:auto;; */;
bottom: 0
/* right:auto;; */
;
}
.formBox {
margin-top: 20px;
margin-left: 20px;
}
/* .new-dialog .el-dialog {
width:100%!important;
margin: 0vh auto !important;
@ -1293,13 +1276,17 @@ export default {
margin: 0 auto 0px !important;
/* margin-top: 0vh!important; */
}
.new-dialog .el-dialog__wrapper::-webkit-scrollbar {
display: none; /* Chrome Safari */
display: none;
/* Chrome Safari */
}
.new-dialog .customWidth {
width: 100%;
min-width: 150px;
}
.mapModuleApp {
/* width:100%; */
width: 1600px;
@ -1307,6 +1294,7 @@ export default {
display: inline-block;
border: 1px soild #eee;
}
.el-drawer.btt,
.el-drawer.ttb {
width: 100%;
@ -1324,11 +1312,13 @@ export default {
height: 100%;
width: 100%;
}
.videoAnalysis {
position: absolute;
right: 200px;
top: 17px;
}
.trafficAnalysis {
position: absolute;
right: 100px;