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

代码提交

This commit is contained in:
luoshiwen 2023-02-24 15:12:02 +08:00
parent a1100d9e79
commit 17b7f54264
9 changed files with 102 additions and 117 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/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

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

@ -41,13 +41,19 @@ export default {
},
data() {
return {
xData: [],
yData: []
};
},
created() {},
methods: {
drawBar() {
drawBar(newVal) {
if (newVal) {
var xData = newVal.type_data.map(ele => {
return ele.name;
});
var 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);
@ -66,7 +72,7 @@ export default {
},
xAxis: {
type: 'category',
data: this.xData,
data: xData,
axisLine: {
lineStyle: {
color: '#000'
@ -114,7 +120,7 @@ export default {
barWidth: 20,
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
name: '时间',
data: this.yData
data:yData
}
]
};
@ -125,23 +131,9 @@ export default {
}
},
mounted() {
this.drawBar();
},
watch: {
typeValue: {
handler(newVal) {
if (newVal) {
this.xData = newVal.type_data.map(ele => {
return ele.name;
});
this.yData = newVal.type_data.map(ele => {
return ele.quantity;
});
this.drawBar();
}
}
}
}
};
</script>

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

@ -148,7 +148,8 @@ export default {
},
getMessage(newVal, title) {
this.xData = newVal.map(val => {
if(newVal){
this.xData = newVal.map(val => {
return val.time;
});
@ -258,9 +259,10 @@ export default {
} else if (title === '拥堵') {
series[0].data = newVal.map(val => { });
}
console.log(series, '折线图数据');
return series
}
}
},
mounted() {
// this.drawLine();

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

@ -37,28 +37,25 @@ export default {
},
data() {
return {
// 图例数据
legend: [],
// pie图数据
seriesData: [
{
name: '机动车',
value: 0
},
{
name: '非机动车',
value: 0
},
{
name: '行人',
value: 0
}
]
};
},
created() {},
methods: {
drawPie() {
drawPie(newVal) {
if (newVal) {
var legend = newVal.type_data.map(ele => {
return ele.name;
});
var seriesData = [];
newVal.type_data.forEach(ele => {
seriesData.push({
name: ele.name,
value: ele.quantity
});
});
this.drawPie();
}
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs.pieChart);
@ -77,7 +74,7 @@ export default {
top: 20,
right: 'center',
textStyle: {},
data: this.legend
data:legend
},
tooltip: {},
series: [
@ -108,7 +105,7 @@ export default {
}
}
},
data: this.seriesData
data: seriesData
}
]
};
@ -124,36 +121,10 @@ export default {
}
},
mounted() {
if (this.typeValue) {
this.typeValue.type_data.forEach(ele => {
this.seriesData.push({
name: ele.name,
value: ele.quantity
});
});
this.drawPie();
}
},
watch: {
// 监听单个的数据
typeValue: {
handler(newVal) {
if (newVal) {
this.legend = newVal.type_data.map(ele => {
return ele.name;
});
this.seriesData = [];
newVal.type_data.forEach(ele => {
this.seriesData.push({
name: ele.name,
value: ele.quantity
});
});
this.drawPie();
}
},
}
}
};
</script>

3
src/components/chart/regionTable.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|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>
@ -61,6 +62,7 @@
<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>
@ -95,6 +97,7 @@
<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>

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

@ -16,6 +16,7 @@
<div>
{{ dataArr[0].time ? dataArr[0].time : '' }}
</div>
</div>
</el-card>
</div>
@ -25,7 +26,7 @@
<div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ }}
{{ getTotal(dataArr) }}
</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
@ -91,7 +92,7 @@
<div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
:status="triggerType" :title="title" :typeValue="typeValue" />
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef"/>
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
@ -101,7 +102,7 @@
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
:status="triggerType" :title="title" :typeValue="typeValue" />
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef"/>
</div>
</div>
</template>
@ -138,16 +139,27 @@ export default {
valueShow: {},
//排队数
queue:'',
queue: '',
};
},
created() {
console.log(this.title + 'TYPECHARTdataArr', this.dataArr)
// console.log(this.title + 'TYPECHARTdataArr', this.dataArr)
},
methods: {
getTotal(dataArr) {
console.log(dataArr[0], 150);
return dataArr[0].type_data.reduce(function(prev, cur) {
return cur.quantity + prev
}, 0)
// return dataArr[0].type_data((pre, cur) => {
// return pre + cur
// }, 0)
},
// 计算类型的数值
getNewQueue(dataArr){
console.log("计算类型的数值",dataArr)
getNewQueue(dataArr) {
// console.log("计算类型的数值",dataArr)
// if(dataArr[0].timeMode=='触发'){
// this.queue = dataArr[0].n_queue
// }else if(dataArr[0].timeMode=='周期统计'){
@ -155,11 +167,11 @@ export default {
// }else if(dataArr[0].timeMode=='周期时刻'){
// }
if(dataArr[0].n_queue){
if (dataArr[0].n_queue) {
this.queue = dataArr[0].n_queue
}else if(dataArr[0].ave_queue){
} else if (dataArr[0].ave_queue) {
this.queue = dataArr[0].ave_queue
}else if(dataArr[0].timeMode=='周期时刻'){
} else if (dataArr[0].timeMode == '周期时刻') {
}
}
@ -167,34 +179,19 @@ export default {
computed: {
// 获取类型的总数量
getTotal() {
return this.dataArr[0].type_data((pre, cur) => {
return pre + cur
}, 0)
}
},
mounted() { },
watch: {
// 监听触发数据
dataArr: {
handler(newVal) {
console.log('dataArr', newVal);
// console.log('dataArr', newVal);
this.getNewQueue(newVal)
},
immediate: true
},
typeValue: {
handler(newVal) {
this.total = 0;
if (this.title == '类型') {
newVal.type_data.forEach(ele => {
this.total += ele.quantity;
});
}
}
}
// cycleTimeData: {
// handler(newVal) {
// console.log(newVal);

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

@ -30,13 +30,13 @@
:componentName="o.componentName" :dataArr="o.trigger"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeTimeMode" />
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName"
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleTimeData" />
<typeChart ref="typeChartRef1" v-if="o.timeMode === '周期时刻'"
:pageType="o.graphicType" :triggerType="o.timeMode"
:componentName="o.componentName" :dataArr="o.cycleTimeData"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeCycleTimeData" />
<!-- 周期统计的组件 -->
<typeChart style="width: 100%;" v-if="o.timeMode === '周期统计'"
<typeChart ref="typeChartRef2" style="width: 100%;" v-if="o.timeMode === '周期统计'"
:pageType="o.graphicType" :triggerType="o.timeMode"
:componentName="o.componentName" :dataArr="o.cycleStatistics"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
@ -102,7 +102,7 @@ export default {
title1: '01断面',
title2: '01区域',
dialogVisible: false,
idVal: '',
//组件数组
@ -150,8 +150,9 @@ export default {
});
},
siftData() {
this.sectionArr=[]
this.sectionData=[]
this.sectionArr = []
this.sectionData = []
this.classify = []
this.componentList.forEach(val => {
this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr));
@ -229,7 +230,6 @@ export default {
handler(newVal) {
this.triggerList = newVal;
// 触发数据
console.log(newVal, 'triggerlistData');
var _this = this
if (newVal.length != 0 && _this.sectionData) {
_this.classify.forEach((ele, index) => {
@ -249,13 +249,21 @@ export default {
}
ele.trigger.unshift(item);
_this.$nextTick(() => {
console.log(index, '满足条件的索引');
console.log(_this.$refs.typeChartRef[index], index, '...........');
if (_this.$refs.typeChartRef[index] != undefined) {
console.log(_this.$refs.typeChartRef[index].dataArr, '数据');
_this.$refs.typeChartRef[index].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0])
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let item = _this.$refs.typeChartRef[i]
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr,_this.$refs.typeChartRef[i].componentName.split('_')[0])
if(item.componentName.split('_')[0]=="类型"){
// 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0])
// 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0])
}
}
})
}
}
@ -272,8 +280,10 @@ export default {
cycleTimeData: {
handler(newVal) {
// 监听到打印周期时刻数据
console.log(newVal, '周期时刻数据');
var that = this
if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => {
that.classify.forEach((ele, index) => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = [];
}
@ -288,9 +298,15 @@ export default {
item.time = item.time.split('.')[0];
if (item.type_data != null) {
// 周期时刻的类型数据
this.typeCycleTimeData = item;
that.typeCycleTimeData = item;
}
ele.cycleTimeData.unshift(item);
that.$nextTick(() => {
// 轮循周期时刻生成的各类组件
for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
}
})
}
}
});
@ -301,7 +317,7 @@ export default {
},
cycleStatistics: {
handler(newVal) {
console.log(newVal,'周期统计数据');
if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => {
if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
@ -318,6 +334,10 @@ export default {
this.typeCycleStatistics = item;
}
ele.cycleStatistics.unshift(item);
for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr,_this.$refs.typeChartRe2f[i].componentName.split('_')[0])
}
}
}
});