Skip to content

H
holo-web
Commit 4bc9ce83 authored by wuquanxin's avatar wuquanxin
Browse files
Options

代码提交

parent b891f84a
Show whitespace changes
Inline Side-by-side
Showing with 465 additions and 3 deletions
wj-smartcity/src/dao/RealTimeData.js 0 → 100644
View file @ 4bc9ce83
import request from '../utils/request'
/*雷视车道事实数据*/
export const analysisLanePage = (data) =>
request({
url: '/holo/analysis-realtime-data-lane/page',
method: 'post',
data: data
})
/*雷视人行横道数据*/
export const analysisZebraPage = (data) =>
request({
url: '/holo/analysis-realtime-data-zebra/page',
method: 'post',
data: data
})
/*雷视行人等待区数据*/
export const analysisWaitareaPage = (data) =>
request({
url: '/holo/analysis-realtime-data-waitarea/page',
method: 'post',
data: data
})
/*雷视非机动车数据*/
export const analysisNonmotorLanePage = (data) =>
request({
url: '/holo/analysis-realtime-data-nonmotor-lane/page',
method: 'post',
data: data
})
wj-smartcity/src/views/dataQueries/rightForm/RealTimeData.vue 0 → 100644
View file @ 4bc9ce83
<template>
<div class="full-w-h cycleDataContainer">
<div style="margin-bottom: 10px; margin-top: 10px" class="custom-form">
<label class="custom-form-label">时段选择： </label>
<el-date-picker
:clearable="false"
@change="dateChange"
v-model="dateTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<label class="custom-form-label">数据类型： </label>
<el-select
@change="changeTableTh"
style="margin-right: 10px"
v-model="locationType1"
placeholder="请选择"
>
<el-option
v-for="item in locationOptions1"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</div>
<div style="margin-bottom: 10px" class="custom-table">
<el-table
ref="table"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
:data="tableData"
:row-class-name="getRowClassName"
style="width: 100%"
height="100%"
>
<el-table-column
v-for="(it, index) of laneTableColumn"
:key="index"
align="center"
:width="index === 0 ? '150' : 'auto'"
:prop="it.prop"
:label="it.label"
show-overflow-tooltip
>
<template slot-scope="{row}">
{{ occupancyValue(row[it.prop]) }}
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="paginationData.pageNum"
:page-size="paginationData.pageSize"
layout=" prev, pager, next"
:total="paginationData.total">
</el-pagination>
</div>
</div>
</template>
<script>
import {occupancyValue} from "@/utils";
import {analysisLanePage, analysisPage, analysisZebraPage} from "@/dao/RealTimeData";
export default {
name: "RealTimeData",
props: ["crossData"],
data() {
return {
laneTableColumn: [],
locationType1: "1",
locationOptions1: [
{ value: "1", label: "车道数据" },
{ value: "2", label: "人行横道数据" },
{ value: "3", label: "行人等待区数据" },
{ value: "4", label: "非机动车数据" },
// { value: "5", label: "事件信息" },
// { value: "6", label: "30s车道数据" },
// { value: "7", label: "30s路口综合指标" },
],
dateTimeRange: [],
tableData: [],
laneTableColumn1: [
{ label: "数据曝光时间", prop: "expTime" },
{ label: "数据生成时间", prop: "pdTime" },
{ label: "厂商名称", prop: "producer" },
{ label: "方向编号", prop: "laneDir" },
{ label: "方向名称", prop: "laneDirDesc" },
{ label: "车流类型", prop: "flowTypeDesc" },
{ label: "静止车辆数", prop: "staticCount" },
{ label: "运动车辆数", prop: "movingCount" },
{ label: "车辆总数", prop: "count" },
],
laneTableColumn2: [
{ label: "数据曝光时间", prop: "expTime" },
{ label: "数据生成时间", prop: "pdTime" },
{ label: "厂商名称", prop: "producer" },
{ label: "方向编号", prop: "zebraDir" },
{ label: "方向名称", prop: "zebraDirDesc" },
{ label: "行人数", prop: "zebraCount" },
{ label: "进口行人数", prop: "zebraCountIn" },
{ label: "出口行人数", prop: "zebraCountOut" },
],
laneTableColumn3: [
{ label: "数据曝光时间", prop: "expTime" },
{ label: "数据生成时间", prop: "pdTime" },
{ label: "厂商名称", prop: "producer" },
{ label: "方向编号", prop: "waitDir" },
{ label: "方向名称", prop: "waitDirDesc" },
{ label: "行人等待数量", prop: "waitCount" },
],
laneTableColumn4: [
{ label: "数据曝光时间", prop: "expTime" },
{ label: "数据生成时间", prop: "pdTime" },
{ label: "厂商名称", prop: "producer" },
{ label: "方向编号", prop: "nonMotorsDir" },
{ label: "方向名称", prop: "nonMotorsDirDesc" },
{ label: "非机动车数量", prop: "nonMotorsCount" },
{ label: "非机动车排队", prop: "nonMotorsLength" },
],
laneTableColumn5: [
{ label: "数据曝光时间", prop: "time" },
{ label: "数据生成时间", prop: "time" },
{ label: "厂商名称", prop: "time" },
{ label: "溢出方向", prop: "time" },
{ label: "溢出状态", prop: "time" },
{ label: "溢出原因", prop: "time" },
],
laneTableColumn6: [
{ label: "统计开始时间", prop: "time" },
{ label: "数据曝光时间", prop: "time" },
{ label: "数据生成时间", prop: "time" },
{ label: "统计周期", prop: "time" },
{ label: "厂商名称", prop: "time" },
{ label: "方向", prop: "time" },
{ label: "编号", prop: "time" },
{ label: "车流类型", prop: "time" },
{ label: "车流总数", prop: "time" },
{ label: "左转流量", prop: "time" },
{ label: "直行流量", prop: "time" },
{ label: "右转流量", prop: "time" },
{ label: "掉头流量", prop: "time" },
{ label: "平均速度", prop: "time" },
],
laneTableColumn7: [
{ label: "统计开始时间", prop: "time" },
{ label: "数据曝光时间", prop: "time" },
{ label: "数据生成时间", prop: "time" },
{ label: "统计周期", prop: "time" },
{ label: "厂商名称", prop: "time" },
{ label: "方向", prop: "time" },
{ label: "非机动车数量(非机动车道)", prop: "time" },
{ label: "非机动车数量(人行横道)", prop: "time" },
{ label: "停车次数", prop: "time" },
{ label: "平均速度", prop: "time" },
],
paginationData:{
total:0,
pageNum:1,
pageSize:10,
},
};
},
created(){
this.laneTableColumn = this.laneTableColumn1
},
mounted() {
console.log(this.crossData);
// if (time_config.dataQuery_cycleTime) {
// this.dateTimeRange = [
// new Date(time_config.dataQuery_cycleTime[0]),
// new Date(time_config.dataQuery_cycleTime[1]),
// ];
// } else {
// }
this.dateTimeRange = [
new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
new Date(),
];
if (this.crossData.crossId) {
this.getData();
}
},
methods: {
changeTableTh(){
this.laneTableColumn = this['laneTableColumn'+this.locationType1];
this.getData();
},
handleCurrentChange(e){
this.paginationData.pageNum = e
this.getData();
},
getData() {
let params = {
channelName:this.crossData.crossName,
// channelName:"龙鼎大道与龙翔路路口北向南",
endTime: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
startTime: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
// endTime: "2024-11-09 17:18:00",
// startTime: "2024-01-01 00:00:00",
pageNum: this.paginationData.pageNum,
pageSize: this.paginationData.pageSize,
};
if (this.locationType1 === "1") {
analysisLanePage(params).then((res) => {
console.log(res);
if(res.code==200){
this.tableData = res.content.rows;
this.paginationData.total = res.content.total;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
}
});
}
else if (this.locationType1 === "2") {
analysisZebraPage(params).then((res) => {
console.log(res);
if(res.code==200){
this.tableData = res.content.rows;
this.paginationData.total = res.content.total;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
}
});
}
else if (this.locationType1 === "3") {
analysisWaitareaPage(params).then((res) => {
console.log(res);
if(res.code==200){
this.tableData = res.content.rows;
this.paginationData.total = res.content.total;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
}
});
}
else if (this.locationType1 === "4") {
analysisNonmotorLanePage(params).then((res) => {
console.log(res);
if(res.code==200){
this.tableData = res.content.rows;
this.paginationData.total = res.content.total;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
}
});
}
/*else if (this.locationType1 === "5") {
analysisPage(params).then((res) => {
console.log(res);
this.tableData = res.content.rows;
this.paginationData.total = res.content.total;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
});
}
else if (this.locationType1 === "6") {
analysisPage(params).then((res) => {
console.log(res);
this.tableData = res.content.rows;
this.paginationData.total = res.content.total;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
});
}
else if (this.locationType1 === "7") {
analysisPage(params).then((res) => {
console.log(res);
this.tableData = res.content.rows;
this.paginationData.total = res.content.total;
this.$nextTick(() => {
this.$refs.table.doLayout();
});
});
}*/
},
occupancyValue,
dateChange(){
if(new Date(this.dateTimeRange[1]).getTime() - new Date(this.dateTimeRange[0]).getTime() > 30*24*60*60*1000){
this.$message('选择时段需小于30天')
return
}
this.getData()
},
getRowClassName(e) {
if (e.rowIndex % 2 !== 0) {
return "row-odd";
} else {
return "row-even";
}
},
},
};
</script>
<style lang="less" scoped>
//table fixed 列样式
::v-deep .el-table__fixed::before {
height: 0;
}
::v-deep .el-table__fixed {
box-shadow: 0 0 0.52083vw rgba(255, 255, 255, 0.12);
}
::v-deep .el-table {
overflow: unset;
}
//table fixed 列样式 end
::v-deep .el-input__inner {
border: 1px solid rgba(90, 144, 238, 0.34);
color: white;
}
::v-deep .el-range-separator {
color: white;
}
label {
margin-left: 10px;
}
label:first-child {
margin-left: 0;
}
.chartContainer {
flex: 1;
position: relative;
.indexOptionSelector {
position: absolute;
width: 180px;
right: 0;
top: 0;
}
}
.custom-form {
height: 40px;
display: flex;
align-items: center;
position: relative;
.rightExport {
width: 78px;
height: 28px;
position: absolute;
right: 0;
border: none;
top: 50%;
font-size: 14px;
cursor: pointer;
letter-spacing: 1px;
background-color: rgba(41, 67, 114);
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
}
.rightExport:hover {
background-color: #355287;
}
}
.custom-table {
height: 600px;
display: flex;
align-items: center;
position: relative;
}
.cycleDataContainer {
display: flex;
flex-direction: column;
padding: 0 10px;
}
.custom-export-button {
position: absolute;
right: 0;
border-radius: 0;
background-color: #294372;
color: white;
letter-spacing: 1px;
border: none;
width: 78px;
font-size: 14px;
height: 28px;
}
.custom-export-button:hover {
background-color: #355287;
}
::v-deep .el-pagination{
position: absolute;
top: 650PX;
left: 0;
right: 0;
margin: auto;
button:disabled,.el-pager li ,.btn-next, .btn-prev{
background: transparent;
color:rgba(255,255,255,.5);
font-size: 12PX;
width: 35PX;
height: 28PX;
}
.btn-next .el-icon, .btn-prev .el-icon{
font-size: 12PX;
}
.el-pager li.active{
color:#409EFF !important;
}
}
</style>
wj-smartcity/src/views/dataQueries/rightForm/index.vue
View file @ 4bc9ce83
...@@ -11,6 +11,9 @@ ...@@ -11,6 +11,9 @@
</div> </div>
</div> </div>
<div class="custom-tab-content"> <div class="custom-tab-content">
<div class="tab-item" v-if="activeTab === '0'">
<RealTimeData ref="tab0" :crossData="crossData" />
</div>
<div class="tab-item" v-if="activeTab === '1'"> <div class="tab-item" v-if="activeTab === '1'">
<cycle-data ref="tab1" :crossData="crossData" /> <cycle-data ref="tab1" :crossData="crossData" />
</div> </div>
...@@ -28,18 +31,19 @@ ...@@ -28,18 +31,19 @@
import { getLanePeriodTurnData, getLaneTrafficIndex } from "@/dao/optApi"; import { getLanePeriodTurnData, getLaneTrafficIndex } from "@/dao/optApi";
import { noDataTitle } from "@/utils/chartStyle"; import { noDataTitle } from "@/utils/chartStyle";
import { getFontSize } from "@/config/holo/fontSize"; import { getFontSize } from "@/config/holo/fontSize";
import RealTimeData from "@/views/dataQueries/rightForm/RealTimeData.vue";
import CycleData from "@/views/dataQueries/rightForm/cycleData.vue"; import CycleData from "@/views/dataQueries/rightForm/cycleData.vue";
import SnapshotData from "@/views/dataQueries/rightForm/snapshotData.vue"; import SnapshotData from "@/views/dataQueries/rightForm/snapshotData.vue";
import EventData from "@/views/dataQueries/rightForm/eventData.vue"; import EventData from "@/views/dataQueries/rightForm/eventData.vue";
export default { export default {
name: "rightForm", name: "rightForm",
components: { EventData, SnapshotData, CycleData }, components: { RealTimeData,EventData, SnapshotData, CycleData },
props: ["crossData"], props: ["crossData"],
data() { data() {
return { return {
activeTab: "1", activeTab: "0",
tabs: [{ 1: "周期数据" }, { 2: "快照数据" }, tabs: [{ 0: "实时数据" },{ 1: "周期数据" }, { 2: "快照数据" },
// { 3: "事件数据" } // { 3: "事件数据" }
], ],
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment