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

2023022402

This commit is contained in:
chengdandan 2023-02-24 15:24:49 +08:00
parent a5e2b6271d f39bff2153
commit 2a1f4f71d7
9 changed files with 81 additions and 89 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>

5
src/config/apiurl.js
View File

@ -7,14 +7,15 @@ export default {
// addFigure: "http://172.16.1.22:8080/api/AddJianktx",
// //编辑图形名称
// editFigure: "http://172.16.1.22:8080/api/EditTuxmc",
// //编辑保存组件弹窗传参
// editComponent: "http://172.16.1.22:8080/api/SetMonqjkzjcs",
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',
editRoleApi: 'http://172.16.1.168:5000/api/EditZhangh',
// //编辑保存组件弹窗传参
editComponent: "http://172.16.1.22:8080/api/SetMonqjkzjcs",
//保存主机名称
editRoleApi: 'http://172.16.1.168:5000/api/EditZhangh',
//新增图形接口

53
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: '',
//组件数组
@ -152,7 +152,9 @@ export default {
});
},
siftData() {
this.sectionArr = []
this.sectionData = []
this.classify = []
this.componentList.forEach(val => {
this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr));
@ -230,7 +232,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) => {
@ -252,11 +253,21 @@ export default {
ele.trigger.unshift(item);
// console.log("ele.trigger",ele.trigger)
_this.$nextTick(() => {
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])
}
}
})
}
}
@ -273,8 +284,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 = [];
}
@ -289,9 +302,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])
}
})
}
}
});
@ -302,7 +321,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 == '周期统计') {
@ -319,6 +338,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])
}
}
}
});