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

代码提交

This commit is contained in:
luoshiwen 2023-02-22 11:26:09 +08:00
parent e42ece6210
commit 0ddbd8f66c
15 changed files with 116 additions and 64 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/a507232cf13cbb82086a709c7289c3b0.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/dcdec649eb6903897f53b0c176bcab6d.json generated vendored
View File

File diff suppressed because one or more lines are too long

7
src/components/chart/avgChart.vue
View File

@ -5,7 +5,7 @@
<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;">{{ componentName + '-' + chartName + '-' + '均值图' }}</span>
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
</div>
</div>
<div id="barChart" ref="barChart" style="width: 100%; height: 300px"></div>
@ -31,7 +31,10 @@ export default {
},
chartName: {
type: String
}
},
status: {
type: String
},
},
data() {
return {};

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

@ -5,7 +5,7 @@
<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;">{{ componentName + '-' + chartName + '-' + '柱状图' }}</span>
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '柱状图'+'-'+status }}</span>
</div>
</div>
<div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
@ -125,13 +125,13 @@ export default {
}
},
mounted() {
// this.xData = this.typeValue.type_data.map(ele => {
// return ele.name;
// });
// this.yData = this.typeValue.type_data.map(ele => {
// return ele.quantity;
// });
// this.drawBar();
this.xData = this.typeValue.type_data.map(ele => {
return ele.name;
});
this.yData = this.typeValue.type_data.map(ele => {
return ele.quantity;
});
this.drawBar();
},
watch: {
typeValue: {

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

@ -5,7 +5,7 @@
<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 + '-' + '曲线图', }}</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>
@ -241,7 +241,7 @@ export default {
show: true,
confine: true
};
console.log("newVal",newVal)
// console.log("newVal",newVal)
this.series[0].data = newVal.map(val => {
return val.speed;
});
@ -288,9 +288,6 @@ export default {
},
immediate: true
},
typeValue: {
handler(newVal) {}
}
}
};
</script>

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

@ -5,7 +5,7 @@
<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 + '-' + '饼状图', }}</span>
<span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span>
</div>
</div>
<div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
@ -30,6 +30,9 @@ export default {
},
typeValue: {
type: Object
},
status:{
type:String
}
},
data() {
@ -121,15 +124,15 @@ export default {
}
},
mounted() {
// if (this.typeValue) {
// this.typeValue.type_data.forEach(ele => {
// this.seriesData.push({
// name: ele.name,
// value: ele.quantity
// });
// });
// this.drawPie();
// }
if (this.typeValue) {
this.typeValue.type_data.forEach(ele => {
this.seriesData.push({
name: ele.name,
value: ele.quantity
});
});
this.drawPie();
}
},
watch: {
// 监听单个的数据
@ -146,9 +149,10 @@ export default {
value: ele.quantity
});
});
// this.drawPie();
this.drawPie();
}
}
},
}
}
};

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

@ -24,6 +24,18 @@
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == '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 == 'Person|Non_Motor'">行人|非机动车</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>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<!-- <span v-if="scope.row.type == 'Motor Vehicle|Motor Vehicle|Person'">行人|非机动车|机动车</span> -->
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template>
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
@ -46,6 +58,18 @@
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == '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 == 'Person|Non_Motor'">行人|非机动车</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>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<!-- <span v-if="scope.row.type == 'Motor Vehicle|Motor Vehicle|Person'">行人|非机动车|机动车</span> -->
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template>
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
@ -68,6 +92,18 @@
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == '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 == 'Person|Non_Motor'">行人|非机动车</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>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<!-- <span v-if="scope.row.type == 'Motor Vehicle|Motor Vehicle|Person'">行人|非机动车|机动车</span> -->
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template>
</el-table-column>
<el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>

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

@ -24,6 +24,18 @@
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == '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 == 'Person|Non_Motor'">行人|非机动车</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>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<!-- <span v-if="scope.row.type == 'Motor Vehicle|Motor Vehicle|Person'">行人|非机动车|机动车</span> -->
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template>
</el-table-column>
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
@ -45,6 +57,18 @@
<span v-if="scope.row.type == 'Person'">行人</span>
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
<span v-if="scope.row.type == '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 == 'Person|Non_Motor'">行人|非机动车</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>
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
<!-- <span v-if="scope.row.type == 'Motor Vehicle|Motor Vehicle|Person'">行人|非机动车|机动车</span> -->
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
</template>
</el-table-column>
<el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>

2
src/components/chart/thermalChart.vue
View File

@ -67,7 +67,7 @@ export default {
splitLine: { show: false },
axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
type: 'category',
data: this.startData
data: ['gate1','gate2']
},
visualMap: [
{

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

@ -70,7 +70,7 @@
<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 + '-' + '表格' }}</span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格'+'-'+triggerType }}</span>
</div>
<div class="tableTime">
{{ dataArr[0].time }}

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

@ -28,16 +28,16 @@
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName='o.combinationName'
:typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" /> -->
<OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
<OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
:componentName="o.componentName" :echartArr="o.presentationForm"
:dataArr="o.trigger" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" />
<!--触发的组件 -->
<typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType" :triggerType="o.timeMode"
:componentName="o.componentName" :dataArr="o.trigger"
<typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName" :dataArr="o.trigger"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeValue" />
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
<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"
@ -57,7 +57,7 @@
</div>
</el-scrollbar>
<!-- 详情框 -->
</div>
</div>
</template>
<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
<script>
@ -350,14 +350,13 @@ export default {
typeValue: {},
// 周期时刻的数值看板展示
typeCycleTimeData: {},
typeCycleStatistics:{}
typeCycleStatistics: {}
};
},
created() {
this.idVal = this.$route.query.id;
getComponentSection({ VideoId: this.idVal }).then((res) => {
if (res.data.code == 200) {
console.log(res.data.data, '11111111111111111');
this.componentList = res.data.data
this.siftData()
// 处理获取过来的数据
@ -388,7 +387,10 @@ export default {
this.sectionArr = Array.from(new Set(this.sectionArr));
});
this.sectionData = this.sectionArr.map((item) => {
item = { title: item, children: [] };
if (item.children == undefined) {
item = { title: item, children: [] };
}
this.componentList.forEach((val) => {
if (item.title == val.combinationName) {
item.children.push(val);
@ -466,7 +468,7 @@ export default {
}
})
})
console.log(this.sectionData,'触发的筛选数据');
console.log(this.sectionData, '触发的筛选数据');
},
immediate: true
},
@ -483,10 +485,10 @@ export default {
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0)
} else {
item.time = item.time.split('.')[0]
if(item.type_data!=null){
item.time = item.time.split('.')[0]
if (item.type_data != null) {
// 周期时刻的类型数据
this.typeCycleTimeData = item
}
@ -526,8 +528,8 @@ export default {
item.time = item.time.split('.')[0]
if (item.type_data != null) {
//周期时刻的类型数据
this.typeCycleStatistics = item;
//周期时刻的类型数据
this.typeCycleStatistics = item;
}
ele.cycleStatistics.unshift(item);
@ -539,21 +541,7 @@ export default {
console.log(this.sectionData, '周期统计筛选数据');
}
},
// activeName: {
// handler(newVal) {
// if (newVal == "second") {
// getComponentSection({ VideoId: this.$route.query.id }).then(res => {
// if (res.data.code == 200) {
// this.componentList = res.data.data;
// this.siftData();
// } else if (res.data.code == 404) {
// }
// });
// }
// },
// immediate: true
// }
},