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

20230224

This commit is contained in:
chengdandan 2023-02-24 08:57:00 +08:00
parent 9b76524fd3 6588bf664e
commit fa47a8280c
18 changed files with 196 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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/b64202a54e54c7430718d949a298daf9.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/d254b352ba28ad2f74675085f7216297.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

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

@ -3,9 +3,9 @@
<div class="tableTitle"> <div class="tableTitle">
<div> <div>
<span <span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;" style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
></span> <span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
<span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '曲线图'+'-'+status, }}</span> }}</span>
</div> </div>
</div> </div>
<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div> <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
@ -67,12 +67,14 @@ export default {
created() { created() {
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40'); // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
}, },
methods: { methods: {
drawLine() { drawLine() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart); let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.lineChart); myChart = this.$echarts.init(this.$refs.lineChart);
} }
// myChart.showLoading()　　//开启loading
let option = { let option = {
// title: { // title: {
// show: true, // show: true,
@ -136,12 +138,13 @@ export default {
], ],
series: this.series series: this.series
}; };
myChart.setOption(option)　　//再设置配置
myChart.setOption(option); // myChart.hideLoading()
// myChart.setOption(option);
// window.onresize = () => { // 根据窗口大小变化图表自适应 // window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize(); // myChart.resize();
// }; // };
window.addEventListener('resize', function() { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
} }
@ -183,9 +186,9 @@ export default {
confine: true confine: true
}; };
this.series[0].name = '总量'; this.series[0].name = '总量';
console.log("折线图",newVal) console.log('折线图', newVal);
// 映射出类型数组 // 映射出类型数组
let arr = newVal.map(function(ele) { let arr = newVal.map(function (ele) {
if (ele.type_data != null) { if (ele.type_data != null) {
return ele.type_data; return ele.type_data;
} }
@ -196,23 +199,32 @@ export default {
mapN.push(arr[t][i]); mapN.push(arr[t][i]);
} }
} }
var lineArr = []; var lineArr = [{
// 遍历需要多少条类型折线 name: '机动车',
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,
type: 'line', type: 'line',
data: [], data: [],
smooth: true 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 => { mapN.forEach(ele => {
if (ele.name == '机动车') { if (ele.name == '机动车') {
lineArr[0].data.push(ele.quantity); lineArr[0].data.push(ele.quantity);
@ -227,9 +239,9 @@ export default {
} }
// 总和数量 // 总和数量
let mapNR1 = []; let mapNR1 = [];
newVal.map(function(ele) { newVal.map(function (ele) {
if (ele.type_data != null) { if (ele.type_data != null) {
var sum = ele.type_data.reduce(function(prev, cur) { var sum = ele.type_data.reduce(function (prev, cur) {
return cur.quantity + prev; return cur.quantity + prev;
}, 0); }, 0);
mapNR1.push(sum); mapNR1.push(sum);
@ -257,7 +269,7 @@ export default {
return ele.in_flow + ele.out_flow; return ele.in_flow + ele.out_flow;
}); });
} else if (this.title == '车头时距') { } else if (this.title == '车头时距') {
console.log("车头时距",newVal) console.log('车头时距', newVal);
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}/s', formatter: '{a} {b}:{c}/s',
show: true, show: true,
@ -266,12 +278,14 @@ export default {
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.headway; return val.headway;
}); });
} else if (this.title == '排队数') { } else if (this.title == '排队数' && this.status == '触发') {
console.log("排队数",newVal)
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.n_queue; 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 == '检测数') { } else if (this.title == '检测数') {
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.n_stay; return val.n_stay;
@ -289,10 +303,13 @@ export default {
this.drawLine(); this.drawLine();
}); });
} }
this.drawLine()
} }
}, },
immediate: true deep: true
}, }
} }
}; };
</script> </script>

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

@ -14,7 +14,7 @@
<div v-if="msg"> <div v-if="msg">
<!-- 触发 --> <!-- 触发 -->
<el-table :data="msg" style="width: 100%" v-if="type == '触发' "> <el-table :data="msg" style="width: 100%" v-if="triggerType == '触发' ">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> --> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@ -48,7 +48,7 @@
</el-table-column> </el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column> <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
</el-table> </el-table>
<el-table :data="msg" style="width: 100%" v-if="type == '周期时刻' "> <el-table :data="msg" style="width: 100%" v-if="triggerType == '周期时刻' ">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> --> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@ -83,7 +83,7 @@
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column> <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
</el-table> </el-table>
<!-- 周期统计 --> <!-- 周期统计 -->
<el-table :data="msg" style="width: 100%" v-if="type == '周期统计'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '周期统计'">
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> --> <!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
<el-table-column align="center" prop="time" label="时间戳"></el-table-column> <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
@ -161,7 +161,7 @@ export default {
return []; return [];
} }
}, },
type: { triggerType: {
type: String type: String
}, },
}, },

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

@ -13,7 +13,7 @@
<!-- 触发 --> <!-- 触发 -->
<div v-if="msg"> <div v-if="msg">
<el-table :data="msg" style="width: 100%" v-if="type == '触发'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '触发'">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> --> <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
<el-table-column align="center" prop="name" label="区域名称"></el-table-column> <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@ -47,7 +47,7 @@
<!-- 周期统计 --> <!-- 周期统计 -->
<el-table :data="msg" style="width: 100%" v-if="type == '周期统计'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '周期统计'">
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column> <el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
<el-table-column align="center" prop="name" label="断面名称"></el-table-column> <el-table-column align="center" prop="name" label="断面名称"></el-table-column>
<el-table-column align="center" prop="timestamp" label="时间戳"></el-table-column> <el-table-column align="center" prop="timestamp" label="时间戳"></el-table-column>
@ -128,7 +128,7 @@ export default {
return []; return [];
} }
}, },
type: { triggerType: {
type: String type: String
} }
}, },

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

@ -1,15 +1,14 @@
<template <template><!-- 触发类型 -->
><!-- 触发类型 --> <div class="setion">
<div class="setion" v-if="isRefer">
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
<!-- 触发数据数值渲染 --> <!-- 触发数据数值渲染 -->
<div class="typeContent" v-if="triggerType == '触发' || '周期时刻'"> <div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
<div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined"> <div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
<div v-if="title == '类型'" style="display:flex"> <div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in typeValue.type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center"> <el-card v-for="(n, i) in typeValue.type_data" :key="i"
style="width: 150px; margin-bottom: 20px; text-align: center">
<div> <div>
<span style="font-size: 15px;">{{ n.name }}</span <span style="font-size: 15px;">{{ n.name }}</span><br />
><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span> <span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
</div> </div>
<div> <div>
@ -77,10 +76,10 @@
</div> </div>
</div> </div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed"> <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="dataArr" :type="triggerType" /> <tableShow :msg="dataArr" :triggerType="triggerType" />
</div> </div>
<div v-if="pageType == '区域'"> <div v-if="pageType == '区域'">
<regionTable :msg="dataArr" :type="triggerType" /> <regionTable :msg="dataArr" :triggerType="triggerType" />
</div> </div>
</div> </div>
<div class="border" v-if="echartArr.includes('曲线图')"> <div class="border" v-if="echartArr.includes('曲线图')">
@ -98,40 +97,18 @@
</div> </div>
<div class="border" v-if="echartArr.includes('饼状图')"> <div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog /> <detailDialog />
<pieChart <pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
:componentName="componentName" :status="triggerType" :title="title" :typeValue="typeValue" />
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div> </div>
<div class="border" v-if="echartArr.includes('均值图')"> <div class="border" v-if="echartArr.includes('均值图')">
<detailDialog /> <detailDialog />
<avgChart <avgChart ref="avgRefChart" :componentName="componentName" :chartName="chartName" :pageType="pageType"
ref="avgRefChart" :list="dataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div> </div>
<div class="border" v-if="echartArr.includes('直方图')"> <div class="border" v-if="echartArr.includes('直方图')">
<detailDialog /> <detailDialog />
<barChart <barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
:componentName="componentName" :status="triggerType" :title="title" :typeValue="typeValue" />
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div> </div>
</div> </div>
</template> </template>
@ -171,7 +148,9 @@ export default {
queue:'', queue:'',
}; };
}, },
created() {}, created() {
},
methods: { methods: {
// 计算类型的数值 // 计算类型的数值
getNewQueue(dataArr){ getNewQueue(dataArr){
@ -194,7 +173,7 @@ export default {
}, },
computed: {}, computed: {},
mounted() {}, mounted() { },
watch: { watch: {
// 监听触发数据 // 监听触发数据
dataArr: { dataArr: {
@ -230,6 +209,7 @@ export default {
margin-bottom: 5px; margin-bottom: 5px;
padding: 8px; padding: 8px;
} }
.typeContent { .typeContent {
box-sizing: border-box; box-sizing: border-box;
} }

1
src/views/AnalysisMain.vue
View File

@ -528,6 +528,7 @@ destroyed: function () {
}); });
}) })
this.videoList=arr this.videoList=arr
this.videoTypeForm.videoType = this.videoList[0].type
if(this.videoList.length=='0'){ if(this.videoList.length=='0'){
this.videoTypeShow = true this.videoTypeShow = true
}else{ }else{

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

@ -1,6 +1,6 @@
<template> <template>
<div ref="box" class="box"> <div ref="box" class="box">
<el-empty v-show="componentList.length == 0" :image-size="400"></el-empty> <el-empty v-show="sectionData.length == 0" :image-size="400"></el-empty>
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> --> <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
<el-scrollbar class="scrollbar"> <el-scrollbar class="scrollbar">
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'"> <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
@ -371,8 +371,11 @@ export default {
typeCycleStatistics: {} typeCycleStatistics: {}
}; };
}, },
// beforeCeated(){
// },
created() { created() {
this.getNew() // this.getNew()
}, },
methods: { methods: {
getNew(){ getNew(){
@ -386,8 +389,8 @@ export default {
}); });
}, },
siftData() { siftData() {
// this.sectionArr=[] this.sectionArr=[]
// this.sectionData=[] this.sectionData=[]
this.componentList.forEach(val => { this.componentList.forEach(val => {
// var newSectionArr = [] // var newSectionArr = []
// newSectionArr.push(val.combinationName) // newSectionArr.push(val.combinationName)
@ -408,8 +411,6 @@ export default {
}); });
return item; return item;
}); });
console.log( "this.sectionData",this.sectionData)
// = newSectionData
}, },
// 组件图标点击下拉事件 // 组件图标点击下拉事件
@ -433,19 +434,19 @@ export default {
} }
} }
}, },
channge(oldVal, newVal){ // channge(oldVal, newVal){
console.log("old",oldVal) // console.log("old",oldVal)
console.log("newVal",newVal) // console.log("newVal",newVal)
if(oldVal=='second'){ // if(oldVal=='second'){
this.sectionArr=[] // this.sectionArr=[]
this.sectionData=[] // this.sectionData=[]
this.getNew() // this.getNew()
}else if(newVal=='second'){ // }else if(newVal=='second'){
this.sectionArr=[] // this.sectionArr=[]
this.sectionData=[] // this.sectionData=[]
this.getNew() // this.getNew()
} // }
} // }
// 触发数据的类型数值 // 触发数据的类型数值
}, },
@ -456,7 +457,7 @@ export default {
handler(newVal, oldVal) {}, handler(newVal, oldVal) {},
immediate: true immediate: true
}, },
activeName:'channge', // activeName:'channge',
// 处理过的触发数据 // 处理过的触发数据
triggerListData: { triggerListData: {
handler(newVal) { handler(newVal) {
@ -492,8 +493,7 @@ export default {
cycleTimeData: { cycleTimeData: {
handler(newVal) { handler(newVal) {
// 监听到打印周期时刻数据 // 监听到打印周期时刻数据
console.log(newVal, '440'); if (newVal.length != 0 && this.sectionData) {
if (newVal.length != 0) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') { if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = []; ele.cycleTimeData = [];
@ -529,9 +529,8 @@ export default {
// } // }
cycleStatisticsData: { cycleStatisticsData: {
handler(newVal) { handler(newVal) {
console.log(newVal, '周期统计');
if (newVal.length != 0) { if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') { if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') {
ele.cycleStatisticsData = []; ele.cycleStatisticsData = [];

159
src/views/index.vue
View File

@ -3,29 +3,18 @@
<!-- <div class="container"> --> <!-- <div class="container"> -->
<div> <div>
<!-- <el-tabs type="border-card" v-model="activeName" tab-position="left"> --> <!-- <el-tabs type="border-card" v-model="activeName" tab-position="left"> -->
<el-tabs type="border-card" v-model="activeName"> <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="titName" name="first"> <el-tab-pane :label="titName" name="first">
<div class="mapModuleApp"> <div class="mapModuleApp">
<iframe <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"
id="mapModule" scrolling="no" v-if="videoUnityShow"></iframe>
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> --> <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
<el-empty :description="description" v-if="videoAnalysisShow"> </el-empty> <el-empty :description="description" v-if="videoAnalysisShow"> </el-empty>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据看板" name="second"> <el-tab-pane label="数据看板" name="second">
<dataBoard <dataBoard ref="dataBoardRef" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
:activeName="activeName" :cycleTimeData="cycleTimeData" :cycleStatisticsData="cycleStatisticsData" ></dataBoard>
:triggerData="triggerData"
:triggerListData="triggerListData"
:cycleTimeData="cycleTimeData"
:cycleStatisticsData="cycleStatisticsData"
></dataBoard>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="分析配置" name="third"> <el-tab-pane label="分析配置" name="third">
<analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration> <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@ -37,31 +26,12 @@
</el-tabs> </el-tabs>
<!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis' <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
>视频分析</el-button> --> >视频分析</el-button> -->
<el-button <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
class="trafficAnalysis" v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
type="primary"
plain
size="mini"
@click="trafficAnalysisBtn"
v-if="trafficAnalysisShow"
:disabled="disabledTrafficAnalysis"
>交通分析</el-button
>
</div> </div>
<el-drawer <el-drawer class="new-dialog" :visible.sync="dialogFormVisible" direction="btt" custom-class="demo-drawer"
class="new-dialog" ref="drawer" :modal="false" :close-on-click-modal="false" v-alterELDialogMarginTop="{ marginTop: '0vh' }"
:visible.sync="dialogFormVisible" width="100%" :wrapperClosable="false" :with-header="false" size="100%">
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"> <div class="formBox">
<el-form ref="form" :model="form" label-width="80px" :inline="true"> <el-form ref="form" :model="form" label-width="80px" :inline="true">
<el-form-item label="组件名称"> <el-form-item label="组件名称">
@ -82,8 +52,9 @@
</div> </div>
</el-drawer> </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"
<el-form ref="form" :model="componentForm" label-width="150px" > @close="closeComponentForm()">
<el-form ref="form" :model="componentForm" label-width="150px">
<el-form-item label="名称："> <el-form-item label="名称：">
<el-input v-model="componentForm.componentName"></el-input> <el-input v-model="componentForm.componentName"></el-input>
</el-form-item> </el-form-item>
@ -93,14 +64,11 @@
<el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox> <el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="数值筛选：" v-if="
label="数值筛选："
v-if="
componentForm.componentType != 'OD' && componentForm.componentType != 'OD' &&
componentForm.componentType != '类型' && componentForm.componentType != '类型' &&
componentForm.componentType != '流量' componentForm.componentType != '流量'
" ">
>
<el-input-number v-model="componentForm.startValue"></el-input-number> <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-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
</el-form-item> </el-form-item>
@ -112,22 +80,16 @@
</el-form-item> </el-form-item>
<el-form-item label="时间模式："> <el-form-item label="时间模式：">
<el-select v-model="componentForm.timeMode" placeholder="请选择时间模式"> <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
<el-option <el-option label="触发" value="触发"
label="触发" v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"></el-option>
value="触发" <el-option label="周期时刻" value="周期时刻" v-if="
v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"
></el-option>
<el-option
label="周期时刻"
value="周期时刻"
v-if="
componentForm.componentType != '排队数' && componentForm.componentType != '排队数' &&
componentForm.componentType != '检测数' && componentForm.componentType != '检测数' &&
componentForm.componentType != '延误' && componentForm.componentType != '延误' &&
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-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -147,7 +109,9 @@
<el-option label="分钟" value="分钟"></el-option> <el-option label="分钟" value="分钟"></el-option>
<el-option label="小时" value="小时"></el-option> <el-option label="小时" value="小时"></el-option>
</el-select> </el-select>
<el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider> <!-- <el-slider v-model="componentForm.cycleInterval" :max="max" :min="min"> </el-slider> -->
<el-slider v-model="componentForm.cycleInterval" :max="100" :min="1" v-if="componentForm.company != '小时'"> </el-slider>
<el-slider v-model="componentForm.cycleInterval" :max="24" :min="1" v-if="componentForm.company == '小时'"> </el-slider>
</div> </div>
</el-form-item> </el-form-item>
<!-- <el-form-item label="单位：" ></el-form-item> --> <!-- <el-form-item label="单位：" ></el-form-item> -->
@ -168,11 +132,15 @@
<el-form-item label="展现形式：" v-if="componentForm.componentType != 'OD'"> <el-form-item label="展现形式：" v-if="componentForm.componentType != 'OD'">
<el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation"> <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
<el-checkbox label="数值" name="presentation"></el-checkbox> <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="type"></el-checkbox>
<el-checkbox label="直方图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox> <el-checkbox label="直方图" name="presentation"
<el-checkbox label="饼状图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox> 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 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>
<!-- <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation"> <!-- <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> <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId" >{{item.graphicName}}</el-checkbox>
@ -214,7 +182,8 @@ var client;
export default { export default {
data() { data() {
return { return {
max: '', max:'100',
min:'1',
receiveNews: '', receiveNews: '',
topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'], topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],
trajectory: false, //轨迹 trajectory: false, //轨迹
@ -280,7 +249,7 @@ export default {
componentName: '', componentName: '',
componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0', componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
//周期间隔 //周期间隔
cycleInterval: '', cycleInterval: 1,
startSectionIds: '', startSectionIds: '',
startSectionNames: '', startSectionNames: '',
endSectionIds: '', endSectionIds: '',
@ -370,12 +339,15 @@ export default {
videoType: '实时视频' videoType: '实时视频'
}, },
description: '请等待排队', description: '请等待排队',
ipData: '' ipData: '',
componentList:[]
}; };
}, },
//离开当前页面后执行 //离开当前页面后执行
destroyed: function() { destroyed: function () {
//console.log("离开当前页") //console.log("离开当前页")
// client.publish('msg_stream',JSON.stringify({"msg_flag":-1})) // client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
//client.end(); //client.end();
@ -420,8 +392,18 @@ export default {
// } // }
} }
}, },
mounted() {}, mounted() { },
methods: { methods: {
// 数据看板的标签点击
handleClick: function(tab, event) {
var that = this
if(tab._props.name=='second'){
that.$nextTick(()=>{
that.$refs.dataBoardRef.getNew()
})
}
},
/** 创建mqtt */ /** 创建mqtt */
createMqtt() { createMqtt() {
//创建链接，接收数据 //创建链接，接收数据
@ -573,7 +555,7 @@ export default {
} else { } else {
this.analysisConfigurationdata = msg; this.analysisConfigurationdata = msg;
} }
} catch (error) {} } catch (error) { }
break; break;
// 树结构 // 树结构
case 'stream' + this.number: case 'stream' + this.number:
@ -584,7 +566,7 @@ export default {
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
// console.log("msg",msg) // console.log("msg",msg)
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
} catch (error) {} } catch (error) { }
break; break;
// 控制台输出 // 控制台输出
case 'trajectory' + this.number: case 'trajectory' + this.number:
@ -595,7 +577,7 @@ export default {
const msg = JSON.parse(temp); const msg = JSON.parse(temp);
// console.log("msg",msg) // console.log("msg",msg)
document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
} catch (error) {} } catch (error) { }
break; break;
// 触发 // 触发
case 'detection' + this.number: case 'detection' + this.number:
@ -613,7 +595,7 @@ export default {
} }
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId)); document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
} }
} catch (error) {} } catch (error) { }
break; break;
case 'trigger-' + this.$route.query.id: case 'trigger-' + this.$route.query.id:
try { try {
@ -625,7 +607,7 @@ export default {
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
// console.log("trigger_msgN",msgN) // console.log("trigger_msgN",msgN)
this.triggerListData = msgN; this.triggerListData = msgN;
} catch (error) {} } catch (error) { }
break; break;
case 'cycle_time-' + this.$route.query.id: case 'cycle_time-' + this.$route.query.id:
try { try {
@ -636,7 +618,7 @@ export default {
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
this.cycleTimeData = msgN; this.cycleTimeData = msgN;
} catch (error) {} } catch (error) { }
break; break;
case 'cycle_statistics-' + this.$route.query.id: case 'cycle_statistics-' + this.$route.query.id:
try { try {
@ -646,8 +628,8 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
this.cycleStatistics = msgN; this.cycleStatisticsData = msgN;
} catch (error) {} } catch (error) { }
break; break;
} }
this.receiveNews = ''; this.receiveNews = '';
@ -718,7 +700,7 @@ export default {
} }
} }
this.componentForm.componentParameterId = res.data.data.componentParameterId; this.componentForm.componentParameterId = res.data.data.componentParameterId;
this.componentForm.cycleInterval = res.data.data.cycleInterval; this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
this.componentForm.startSectionIds = res.data.data.startSectionIds; this.componentForm.startSectionIds = res.data.data.startSectionIds;
// this.componentForm.FlowType = res.data.data.flowType; // this.componentForm.FlowType = res.data.data.flowType;
this.componentForm.startSectionNames = res.data.data.startSectionNames; this.componentForm.startSectionNames = res.data.data.startSectionNames;
@ -820,7 +802,9 @@ export default {
} }
this.componentForm.componentName = res.data.data.componentName; this.componentForm.componentName = res.data.data.componentName;
this.componentForm.componentParameterId = res.data.data.componentParameterId; this.componentForm.componentParameterId = res.data.data.componentParameterId;
this.componentForm.cycleInterval = res.data.data.cycleInterval; this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
this.componentForm.startSectionIds = res.data.data.startSectionIds; this.componentForm.startSectionIds = res.data.data.startSectionIds;
this.componentForm.startSectionNames = res.data.data.startSectionNames; this.componentForm.startSectionNames = res.data.data.startSectionNames;
this.componentForm.endSectionIds = res.data.data.endSectionIds; this.componentForm.endSectionIds = res.data.data.endSectionIds;
@ -1271,19 +1255,25 @@ export default {
} }
.content-box::-webkit-scrollbar { .content-box::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none;
/* Chrome Safari */
} }
.new-dialog { .new-dialog {
width: 49%; width: 49%;
height: 11%; height: 11%;
left: calc(24vw); left: calc(24vw);
top: 90vh; top: 90vh;
bottom: 0 /* right:auto;; */; bottom: 0
/* right:auto;; */
;
} }
.formBox { .formBox {
margin-top: 20px; margin-top: 20px;
margin-left: 20px; margin-left: 20px;
} }
/* .new-dialog .el-dialog { /* .new-dialog .el-dialog {
width:100%!important; width:100%!important;
margin: 0vh auto !important; margin: 0vh auto !important;
@ -1294,13 +1284,17 @@ export default {
margin: 0 auto 0px !important; margin: 0 auto 0px !important;
/* margin-top: 0vh!important; */ /* margin-top: 0vh!important; */
} }
.new-dialog .el-dialog__wrapper::-webkit-scrollbar { .new-dialog .el-dialog__wrapper::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none;
/* Chrome Safari */
} }
.new-dialog .customWidth { .new-dialog .customWidth {
width: 100%; width: 100%;
min-width: 150px; min-width: 150px;
} }
.mapModuleApp { .mapModuleApp {
/* width:100%; */ /* width:100%; */
width: 1600px; width: 1600px;
@ -1308,6 +1302,7 @@ export default {
display: inline-block; display: inline-block;
border: 1px soild #eee; border: 1px soild #eee;
} }
.el-drawer.btt, .el-drawer.btt,
.el-drawer.ttb { .el-drawer.ttb {
width: 100%; width: 100%;
@ -1325,11 +1320,13 @@ export default {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.videoAnalysis { .videoAnalysis {
position: absolute; position: absolute;
right: 200px; right: 200px;
top: 17px; top: 17px;
} }
.trafficAnalysis { .trafficAnalysis {
position: absolute; position: absolute;
right: 100px; right: 100px;