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

代码提交

This commit is contained in:
luoshiwen 2023-02-24 08:52:17 +08:00
parent 62ab49775f
commit e7b7125476
13 changed files with 216 additions and 226 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/5c43de7bdc03729c450c3b426ceb462e.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/a507232cf13cbb82086a709c7289c3b0.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

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

@ -69,23 +69,22 @@ export default {
}, },
created() { created() {
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40'); // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
}, },
methods: { methods: {
drawLine() { drawLine(newVal, title) {
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);
} }
// var series = []
// myChart.showLoading()　　//开启loading // myChart.showLoading()　　//开启loading
let option = { let option = {
// title: {
// show: true,
// text: this.componentName + '-' + this.chartName + '-' + '曲线图',
// textStyle: {
// lineHeight: '30'
// }
// },
legend: {}, legend: {},
grid: { grid: {
left: '2%', left: '2%',
@ -139,38 +138,21 @@ export default {
} }
} }
], ],
series: this.series series: this.getMessage(newVal, title)
}; };
myChart.setOption(option)　　//再设置配置 myChart.setOption(option)
// myChart.hideLoading()
// myChart.setOption(option);
// window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize();
// };
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
}
}, },
mounted() {
this.drawLine(); getMessage(newVal, title) {
console.log(this.$parent.dataArr, '父组件的dataArr');
},
computed: {
listTotal() {
return JSON.parse(JSON.stringify(this.$parent.dataArr))
}
},
watch: {
list: {
handler(newVal) {
if (newVal.length != 0) {
// x轴的数据
this.xData = newVal.map(val => { this.xData = newVal.map(val => {
return val.time; return val.time;
}); });
this.series = [ var series = [
{ {
name: '', name: '',
type: 'line', type: 'line',
@ -185,15 +167,13 @@ export default {
} }
]; ];
// 区域组件触发y轴展示 if (title === '类型') {
if (this.title == '类型') {
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}个', formatter: '{a} {b}:{c}个',
show: true, show: true,
confine: true confine: true
}; };
this.series[0].name = '总量'; series[0].name = '总量';
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) {
@ -206,32 +186,17 @@ export default {
mapN.push(arr[t][i]); mapN.push(arr[t][i]);
} }
} }
var lineArr = [{ var lineArr = []
name: '机动车', if (newVal[0].type_data != undefined) {
newVal[0].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);
@ -242,7 +207,7 @@ export default {
} }
}); });
for (let j = 0; j < lineArr.length; j++) { for (let j = 0; j < lineArr.length; j++) {
this.series.push(lineArr[j]); series.push(lineArr[j]);
} }
// 总和数量 // 总和数量
let mapNR1 = []; let mapNR1 = [];
@ -254,62 +219,66 @@ export default {
mapNR1.push(sum); mapNR1.push(sum);
} }
}); });
// console.log("mapNR1", mapNR1) series[0].data = mapNR1;
this.series[0].data = mapNR1; } else if (title === '速度') {
} else if (this.title == '速度') {
console.log('速度的折线图');
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}km/h', formatter: '{a} {b}:{c}km/h',
show: true, show: true,
confine: true confine: true
}; };
// console.log("newVal",newVal) // console.log("newVal",newVal)
this.series[0].data = newVal.map(val => { series[0].data = newVal.map(val => {
return val.speed; return val.speed;
}); });
} else if (this.title == '流量') { } else if (title === '流量') {
this.tooltip = { series[0].data = newVal.map(ele => {
formatter: '{a} {b}:{c}辆',
show: true,
confine: true
};
this.series[0].data = newVal.map(ele => {
return ele.in_flow + ele.out_flow; return ele.in_flow + ele.out_flow;
}); });
} else if (this.title == '车头时距') { } else if (title === '车头时距') {
console.log('车头时距', newVal);
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}/s', formatter: '{a} {b}:{c}/s',
show: true, show: true,
confine: true confine: true
}; };
this.series[0].data = newVal.map(val => { series[0].data = newVal.map(val => {
return val.headway; return val.headway;
}); });
} else if (this.title == '排队数' && this.status == '触发') { } else if (title === '排队数') {
this.series[0].data = newVal.map(val => { series[0].data = newVal.map(val => {
return val.n_queue; return val.n_queue;
}); });
} else if (this.title == '排队数' && this.status == '周期统计') { } else if (title === '检测数') {
this.series[0].data = newVal.map(val => { 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; return val.n_stay;
}); });
} else if (this.title == '延误') { } else if (title === '延误') {
this.series[0].data = newVal.map(val => { series[0].data = newVal.map(val => {
return val.ave_delay; return val.ave_delay;
}); });
} else if (this.title == '拥堵') { } else if (title === '拥堵') {
this.series[0].data = newVal.map(val => { }); series[0].data = newVal.map(val => { });
} }
console.log(series,'折线图数据');
this.drawLine() return series
} }
}, },
mounted() {
// this.drawLine();
// this.getMessage(this.list)
// console.log(this.$parent.dataArr, '父组件的dataArr');
// this.$set(this.$parent.dataArr)
},
computed: {
listTotal() {
return JSON.parse(JSON.stringify(this.$parent.dataArr))
}
},
watch: {
listTotal: {
// handler(newVal){
// console.log(this.chartName , newVal,'数据');
// },
deep: true deep: true
}, },

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

@ -12,7 +12,7 @@
</div> </div>
<div v-if="msg"> <div v-if="msg" class="regionBox">
<!-- 触发 --> <!-- 触发 -->
<el-table :data="msg" style="width: 100%" v-if="type == '触发' "> <el-table :data="msg" style="width: 100%" v-if="type == '触发' ">
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> --> <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
@ -186,7 +186,13 @@ export default {
} }
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
/deep/ .el-table{
height: 709px !important;
overflow-y: scroll;
}
.el-table::-webkit-scrollbar { width: 0 !important }
.tableContent { .tableContent {
position: relative; position: relative;
} }

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

@ -27,6 +27,7 @@
<span v-if="scope.row.type == 'Motor Vehicle|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 == 'Motor Vehicle|Person'">机动车|行人</span>
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</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|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</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|Person|Motor Vehicle'">行人|非机动车|机动车</span>
@ -176,7 +177,13 @@ export default {
mounted() { } mounted() { }
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
/deep/ .el-table{
height: 709px !important;
overflow-y: scroll;
}
.el-table::-webkit-scrollbar { width: 0 !important }
.tableContent { .tableContent {
position: relative; position: relative;
} }

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

@ -1,11 +1,11 @@
<template><!-- 触发类型 --> <template><!-- 触发类型 -->
<div class="setion"> <div class="setion" v-if="dataArr">
<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" >
<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" <el-card v-for="(n, i) in dataArr[0].type_data" :key="i"
style="width: 150px; margin-bottom: 20px; text-align: center"> style="width: 150px; margin-bottom: 20px; text-align: center">
<div> <div>
<span style="font-size: 15px;">{{ n.name }}</span><br /> <span style="font-size: 15px;">{{ n.name }}</span><br />
@ -13,7 +13,7 @@
</div> </div>
<div> <div>
<div> <div>
{{ typeValue.time ? typeValue.time : '' }} {{ dataArr[0].time ? dataArr[0].time : '' }}
</div> </div>
</div> </div>
</el-card> </el-card>
@ -24,7 +24,7 @@
<div v-if="title == '类型'"> <div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br /> <span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold"> <span style="font-size: 30px; font-weight: bold">
{{ this.total }} {{ getTotal() }}
</span> </span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
@ -92,6 +92,7 @@
:status="triggerType" :status="triggerType"
:title="title" :title="title"
:typeValue="typeValue" :typeValue="typeValue"
ref="lineChartRef"
/> />
</div> </div>
<div class="border" v-if="echartArr.includes('饼状图')"> <div class="border" v-if="echartArr.includes('饼状图')">
@ -146,32 +147,34 @@ export default {
}; };
}, },
created() { created() {
console.log(this.title+'TYPECHARTdataArr', this.dataArr)
}, },
methods: { methods: {
// 计算类型的数值 // 计算类型的数值
}, },
computed: {}, computed: {
// 获取类型的总数量
getTotal(){
}
},
mounted() { }, mounted() { },
watch: { watch: {
// 监听触发数据 // 监听触发数据
dataArr: { dataArr: {
handler(newVal) { handler(newVal) {
console.log('dataArr', newVal);
}, },
immediate: true immediate: true
}, },
typeValue: { typeValue: {
handler(newVal) { handler(newVal) {
this.total = 0;
if (this.title == '类型') {
newVal.type_data.forEach(ele => { },
this.total += ele.quantity; immediate:true
});
}
}
} }
// cycleTimeData: { // cycleTimeData: {
// handler(newVal) { // handler(newVal) {

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

@ -25,11 +25,11 @@
:echartArr="o.presentationForm" :dataArr="o.trigger" :echartArr="o.presentationForm" :dataArr="o.trigger"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" /> :title="o.componentName.split('_')[0]" :chartName="o.combinationName" />
<!--触发的组件 --> <!--触发的组件 -->
<typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType" <typeChart ref="typeChartRef" v-if="o.timeMode === '触发'"
:triggerType="o.timeMode" :componentName="o.componentName" :pageType="o.graphicType" :triggerType="o.timeMode"
:dataArr="o.trigger" :echartArr="o.presentationForm" :componentName="o.componentName" :dataArr="o.trigger"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:typeValue="typeTimeMode" /> :chartName="o.combinationName" :typeValue="typeTimeMode" />
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType" <typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName" :triggerType="o.timeMode" :componentName="o.componentName"
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm" :dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
@ -346,13 +346,14 @@ export default {
// }, // },
created() { created() {
this.getNew() // this.getNew()
}, },
methods: { methods: {
getNew() { getNew() {
// this.idVal = ; // this.idVal = ;
getComponentSection({ VideoId: this.$route.query.id }).then(res => { getComponentSection({ VideoId: this.$route.query.id }).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data, '组件的数据');
this.componentList = res.data.data; this.componentList = res.data.data;
this.siftData(); this.siftData();
} }
@ -428,28 +429,39 @@ export default {
handler(newVal) { handler(newVal) {
this.triggerList = newVal; this.triggerList = newVal;
// 触发数据 // 触发数据
// console.log(newVal, 'triggerlistData'); console.log(newVal, 'triggerlistData');
var _this = this
if (newVal.length != 0 && _this.sectionData) {
_this.componentList.forEach(ele => {
this.componentList.forEach(ele => {
if (ele.trigger == undefined && ele.timeMode == '触发') { if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = []; ele.trigger = [];
} }
newVal.forEach(item => { newVal.forEach((item, i) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) { if (ele.trigger.length == 10) {
ele.trigger.pop(); ele.trigger.splice(newVal.length - 1, 1);
} else { } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
// 该时间的触发数据 // 该时间的触发数据
if (item.type_data != null) { if (item.type_data != null) {
// console.log(item,'461461'); _this.typeTimeMode = item
this.typeTimeMode = item
} }
ele.trigger.unshift(item); ele.trigger.unshift(item);
_this.$nextTick(() => {
if (_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine) {
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0])
}
})
} }
} }
}); });
}); });
}
}, },
immediate: true immediate: true
}, },
@ -465,11 +477,10 @@ export default {
newVal.forEach(item => { newVal.forEach(item => {
if ( if (
ele.analogAreaComponentId == item.component_id && ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期时刻' && ele.timeMode == '周期时刻'
ele.analogAreaGraphId == item.graphical_id
) { ) {
if (ele.cycleTimeData.length == 10) { if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0); ele.cycleTimeData.splice(newVal.length - 1, 1);
} else { } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
if (item.type_data != null) { if (item.type_data != null) {
@ -485,12 +496,6 @@ export default {
}, },
immediate: true immediate: true
}, },
// 周期统计数据
// cycleStatistics:{
// handler(newVal){
// console.log(newVal,'周期统计');
// }
// }
cycleStatistics: { cycleStatistics: {
handler(newVal) { handler(newVal) {
@ -502,7 +507,7 @@ export default {
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
if (ele.cycleStatistics.length == 10) { if (ele.cycleStatistics.length == 10) {
ele.cycleStatistics.pop(); ele.cycleStatistics.splice(newVal.length - 1, 1);
} else { } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
if (item.type_data != null) { if (item.type_data != null) {