mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

一类交调站综合查询

develop
lau572 4 months ago
parent
ef42044357
commit
cc377b42ae
7 changed files with 1449 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      ruoyi-ui/src/api/observationStation/observationStation.js
  2. 19
      ruoyi-ui/src/common/menuData.js
  3. 142
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/charts.js
  4. 144
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js
  5. 440
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue
  6. 104
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/siteAdministration/data.js
  7. 547
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/siteAdministration/index.vue

53
ruoyi-ui/src/api/observationStation/observationStation.js
View File

@ -0,0 +1,53 @@
import request from '@/utils/request'
// 查询观测站信息列表
export function listDcTrafficSurveyData(query) {
return request({
url: '/dcObservationStation/list',
method: 'get',
params: query
})
}
// 查询观测站信息详细
export function getDcTrafficSurveyData(id) {
return request({
url: '/dcObservationStation/' + id,
method: 'get'
})
}
// 新增观测站信息
export function addDcTrafficSurveyData(data) {
return request({
url: '/dcObservationStation',
method: 'post',
data: data
})
}
// 修改观测站信息
export function updateDcTrafficSurveyData(data) {
return request({
url: '/dcObservationStation',
method: 'put',
data: data
})
}
// 删除观测站信息
export function delDcTrafficSurveyData(id) {
return request({
url: '/dcObservationStation/' + id,
method: 'delete'
})
}
// 导出观测站信息
export function exportDcTrafficSurveyData(query) {
return request({
url: '/dcObservationStation/export',
method: 'get',
params: query
})
}

19
ruoyi-ui/src/common/menuData.js
View File

@ -42,6 +42,25 @@ export default [
path: "/perception/noStakeWaning",
name: "perceptionNoStakeWaning",
component: "perception/noStakeWaning/index.vue",
},
{
title: "一类交调站",
name: "trafficSurvey",
path: "/perception/trafficSurvey",
redirect: "trafficSurvey",
children: [
{
title: "站点管理",
path: "/perception/trafficSurvey/siteAdministration",
name: "siteAdministration",
component: "perception/trafficSurvey/siteAdministration/index.vue",
}, {
title: "综合查询",
path: "/perception/trafficSurvey/comprehensiveQuery",
name: "comprehensiveQuery",
component: "perception/trafficSurvey/comprehensiveQuery/index.vue",
}
]
}
],
},

142
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/charts.js
View File

@ -0,0 +1,142 @@
import * as echarts from "echarts";
// let xData = [
// "大学城-长清",
// "长清-孝里",
// "孝里-平阴北",
// "平阴北-平阴",
// "平阴-平阴南",
// "平阴南-东平",
// "东平-梁山东",
// "梁山东-梁山",
// "梁山-嘉祥西",
// "梁山东-梁山",
// ];
let data1 = [200, 530, 920, 400, 600, 700, 300, 800];
let data2 = [120, 340, 750, 600, 400, 700, 900, 200];
let data3 = [200, 530, 920, 400, 600, 700, 300, 800];
let options = {
tooltip: {
show: true,
trigger: "axis",
},
grid: {
left: "10px",
right: "10px",
top: "20px",
bottom: "10px",
containLabel: true,
},
xAxis: {
data: [],
show: true,
axisTick: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLine: {
lineStyle: {
color: "#2A6278",
},
},
axisLabel: {
show:false,
interval: 1,
align: "center",
rotate: "1",
margin: 30,
textStyle: {
fontSize: 10,
color: "#E5E7E8",
},
},
},
yAxis: [
{
nameTextStyle: {
color: "#E5E7E8",
fomtSize: 10,
},
axisLine: {
lineStyle: {
color: "#1C82C5",
},
},
splitLine: {
show: false,
lineStyle: {
color: "#2A6278",
type: "solid",
},
},
axisLabel: {
color: "#E5E7E8",
textStyle: {
fontSize: 10,
},
},
axisTick: {
show: false,
},
},
],
legend: {
// orient: 'vertical',
// icon: "circle",
itemHeight: 8,
itemWidth: 8,
top: "0",
right: "2%",
textStyle: {
color: "#fff",
},
data: [
{
name: "菏泽",
icon: "circle",
itemStyle: {
color: "#02A0F8",
},
},
{
name: "济南",
icon: "circle",
itemStyle: {
color: "#E4BB53",
},
},
],
},
series: [
{
name: "菏泽",
type: "line",
selectedMode: false,
itemStyle: {
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
// lenged文本
opacity: 1,
color: '#02A0F8',
},
data: data1,
},
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
{
name: "济南",
type: "line",
selectedMode: false,
itemStyle: {
// lenged文本
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
opacity: 1,
color: '#E4BB53'
},
data: data2,
},
],
};
export default options;

144
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js
View File

@ -0,0 +1,144 @@
import moment from "moment";
export const deviceList = [
{
iotDeviceId: "10.0.111.82-3131",
deviceName: "一类交调站(K057+145)",
color: "#009A29",
},
{
iotDeviceId: "10.0.81.105-3131",
deviceName: "一类交调站(K082+285)",
color: "#0DA5AA",
},
{
iotDeviceId: "10.0.111.84-3131",
deviceName: "一类交调站(K084+640)",
color: "#206CCF",
},
{
iotDeviceId: "10.0.111.85-3131",
deviceName: "一类交调站(K115+573)",
color: "#CB272D",
},
{
iotDeviceId: "10.0.111.86-3131",
deviceName: "一类交调站(K120+618)",
color: "#CC5120",
},
{
iotDeviceId: "10.0.111.87-3131",
deviceName: "一类交调站(K153+100)",
color: "#D25F00",
},
{
iotDeviceId: "10.0.111.88-3131",
deviceName: "一类交调站(K158+250)",
color: "#CC9213",
},
{
iotDeviceId: "10.0.111.89-3131",
deviceName: "一类交调站(K205+400)",
color: "#CFAF0F",
},
]
export const searchFormList = [
{
label: "时间:",
key: "date",
type: "datePicker",
required: true,
default: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
options: {
type: "datetime",
format: "yyyy-MM-dd HH:mm:ss",
valueFormat: "yyyy-MM-dd HH:mm:ss",
},
},
{
label: "时间类型:",
key: "type",
type: "RadioGroup",
isAlone: true,
required: true,
default:'1',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "日",
},
{
key: "2",
label: "月",
},
{
key: "3",
label: "年",
}
],
},
},
{
label: "方向:",
key: "direction",
type: "RadioGroup",
isAlone: true,
default:'',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "菏泽",
},
{
key: "3",
label: "济南",
},
{
key: "",
label: "双向",
}
],
},
},
{
label: "数据类型:",
key: "dataType",
type: "RadioGroup",
required: true,
isAlone: true,
default:'1',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "流量",
},
{
key: "2",
label: "车速",
}
],
},
},
// {
// label: "方向:",
// key: "direction",
// type: "select",
// options: {
// options: [
// { key: "3", label: "济南方向" },
// { key: "1", label: "菏泽方向" },
// { key: "2", label: "双向" },
// ],
// },
// }
];

440
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue
View File

@ -0,0 +1,440 @@
<template>
<div class="statisticAnalysisQuery">
<div class="anacontent" style="height: calc(100vh)">
<div class="cleft">
<vuescroll :ops="scrollOptions">
<div :class="'device ' + (devItem.deviceName===item.deviceName?'deviceSel':'')" v-for="(item, index) of deviceList" @click="devClick(item, index)">
<div>{{ item.deviceName }}</div>
</div>
<div v-if="deviceList.length === 0" style="color: #fff; text-align: center; line-height: 60px">
暂无数据
</div>
</vuescroll>
</div>
<div class="cright">
<div class="filter">
<div>
<ButtonGradient @click="onExport" >
<i class="el-icon-download"></i>
导出
</ButtonGradient>
<ButtonGradient @click="realTimeData">
<i class="el-icon-data-line"></i>
实时数据
</ButtonGradient>
<!--<ButtonGradient @click="onRefresh">
刷新
</ButtonGradient>-->
</div>
<InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList" @handleSearch="handleSearch" />
</div>
<div class="bodyTable">
<Table v-if="queryForm.dataType == '1'" style="width:85vw" :data="tableData" height="90%" >
<ElTableColumn prop="time" align="center" min-width="140" label="时间"></ElTableColumn>
<ElTableColumn prop="trafficNumberOfInAndSmall" align="center" label="中小客车" />
<ElTableColumn prop="busTrafficVolume" align="center" label="大客车" />
<ElTableColumn prop="trafficVolumeOfSmallTrucks" align="center" label="小型货车" />
<ElTableColumn prop="mediumTruckTrafficVolume" align="center" label="中型货车" />
<ElTableColumn prop="largeTruckTrafficVolume" align="center" label="大型货车" />
<ElTableColumn prop="extraLargeTrucksTrafficVolume" align="center" label="特大型货车" />
<ElTableColumn prop="containerTruckTrafficVolume" align="center" label="集装箱车" />
<ElTableColumn prop="motorcycleTrafficVolume" align="center" label="摩托车" />
<ElTableColumn prop="tractorTrafficVolume" align="center" label="拖拉机" />
<ElTableColumn prop="trafficVolume" align="center" label="合计" />
</Table>
<Table v-else style="width:85vw" :data="tableData" v-loading="loading" height="90%" >
<ElTableColumn prop="time" align="center" min-width="140" label="时间"></ElTableColumn>
<ElTableColumn prop="inAndSmallAverageVehicleSpeed" align="center" label="中小客车" />
<ElTableColumn prop="averageSpeedOfBus" align="center" label="大客车" />
<ElTableColumn prop="smallTrucksAverageVehicleSpeed" align="center" label="小型货车" />
<ElTableColumn prop="averageSpeedOfMediumSizeTrucks" align="center" label="中型货车" />
<ElTableColumn prop="averageSpeedOfLargeTrucks" align="center" label="大型货车" />
<ElTableColumn prop="averageSpeedOfExtraLargeTrucks" align="center" label="特大型货车" />
<ElTableColumn prop="averageSpeedOfContainerTruck" align="center" label="集装箱车" />
<ElTableColumn prop="averageSpeedOfMotorcycle" align="center" label="摩托车" />
<ElTableColumn prop="averageSpeedOfTractor" align="center" label="拖拉机" />
<ElTableColumn prop="avgSpeed" align="center" label="车速平均" />
</Table>
</div>
</div>
</div>
<Dialog title="调查站小时数据" v-model="modelVisible" width="1000px" @update:close="visibleClose">
<div class="realTimeSearch">
<RadioGroup :options="[{ key: '1', label: '菏泽' },{ key: '3', label: '济南' }]"
v-model="realTimeQueryForm.direction" type="button" size="mini" @change="changeRealTimeData" />
<RadioGroup :options="[{ key: '1', label: '流量' },{ key: '2', label: '车速' }]"
v-model="realTimeQueryForm.dataType" type="button" style="margin-left: 25px" @change="changeRealTimeData" />
<el-date-picker
size="small"
type="datetime"
class="selectDate"
v-model="realTimeQueryForm.date"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
style="width: 220px;margin-left: 25px"
placeholder="请选择"
:clearable="false"
@change="queryRealTimeData"
/>
</div>
<div class="realTimeChart" >
<div id="realTimeDataChart" style="width: 100%;height: 100%;"></div>
</div>
<div class="realTimeTable">
<Table v-if="realTimeQueryForm.dataType == '1'" style="width:100%" :data="realTimeTableData" height="90%" >
<ElTableColumn prop="timestamp" align="center" label="时间">
<template slot-scope="scope">
<span> {{formatTime(scope.row.timestamp)}}</span>
</template>
</ElTableColumn>
<ElTableColumn prop="trafficNumberOfInAndSmall" align="center" label="中小客车" />
<ElTableColumn prop="busTrafficVolume" align="center" label="大客车" />
<ElTableColumn prop="trafficVolumeOfSmallTrucks" align="center" label="小型货车" />
<ElTableColumn prop="mediumTruckTrafficVolume" align="center" label="中型货车" />
<ElTableColumn prop="largeTruckTrafficVolume" align="center" label="大型货车" />
<ElTableColumn prop="extraLargeTrucksTrafficVolume" align="center" label="特大型货车" />
<ElTableColumn prop="containerTruckTrafficVolume" align="center" label="集装箱车" />
<ElTableColumn prop="motorcycleTrafficVolume" align="center" label="摩托车" />
<ElTableColumn prop="tractorTrafficVolume" align="center" label="拖拉机" />
<ElTableColumn prop="trafficVolume" align="center" label="合计" />
</Table>
<Table v-else style="width:100%" :data="realTimeTableData" height="90%" >
<ElTableColumn prop="timestamp" align="center" label="时间">
<template slot-scope="scope">
<span> {{formatTime(scope.row.timestamp)}}</span>
</template>
</ElTableColumn>
<ElTableColumn prop="inAndSmallAverageVehicleSpeed" align="center" label="中小客车" />
<ElTableColumn prop="averageSpeedOfBus" align="center" label="大客车" />
<ElTableColumn prop="smallTrucksAverageVehicleSpeed" align="center" label="小型货车" />
<ElTableColumn prop="averageSpeedOfMediumSizeTrucks" align="center" label="中型货车" />
<ElTableColumn prop="averageSpeedOfLargeTrucks" align="center" label="大型货车" />
<ElTableColumn prop="averageSpeedOfExtraLargeTrucks" align="center" label="特大型货车" />
<ElTableColumn prop="averageSpeedOfContainerTruck" align="center" label="集装箱车" />
<ElTableColumn prop="averageSpeedOfMotorcycle" align="center" label="摩托车" />
<ElTableColumn prop="averageSpeedOfTractor" align="center" label="拖拉机" />
<ElTableColumn prop="avgSpeed" align="center" label="车速平均" />
</Table>
</div>
</Dialog>
</div>
</template>
<script>
import Dialog from "@screen/components/Dialog/index.vue";
import scrollOptions from "@/common/scrollbar.js";
import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
import { deviceList,searchFormList } from "./data";
import Table from '@screen/components/Table.vue';
import Pagination from "@screen/components/Pagination.vue";
import InputSearch from "@screen/components/InputSearch/index.vue";
import request from "@/utils/request";
import Template from '@/views/information/template/index'
import moment from "moment";
import Button from "@screen/components/Buttons/Button.vue";
import * as echarts from "echarts";
import chartOptions from "./charts";
import { Loading } from 'element-ui';
export default {
name: "comprehensiveQuery",
components: {
Template,
ButtonGradient,
RadioGroup,
Table,
Pagination,
InputSearch,
Dialog,
Button,
searchFormList,
},
data() {
return {
scrollOptions,
devItem:{},
queryForm:{
iotDeviceId:'',
direction:'',
date:moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
type:'1',
dataType:'1',
},
typeOptions:[
{value:"1",label:"日"},
{value:"2",label:"月"},
{value:"3",label:"年"},
],
directionOptions:[
{value:"1",label:"菏泽"},
{value:"3",label:"济南"},
{value:"",label:"双向"},
],
modelVisible:false,
loading:false,
deviceList: [],
tableData: [],
searchFormList,
deviceName: null,
realTimeQueryForm:{
date:'',
type:'1',
dataType:'1',
direction:'1',
},
realTimeTableData:[],
realTimeDataList:[],
};
},
created(){
this.initDeviceList()
},
methods: {
devClick(item,index){
this.devItem =item;
this.queryForm.iotDeviceId = item.iotDeviceId
setTimeout(() => {
this.initData();
}, 200);
},
initDeviceList(){
request({
url: "/dcObservationStation/selectAllStation",
method: "post",
}).then(res => {
this.deviceList = res
this.devClick(this.deviceList[0],0)
})
},
handleSearch(data) {
this.queryForm.date = data.date;
this.queryForm.type = data.type;
this.queryForm.dataType = data.dataType;
this.queryForm.direction = data.direction;
this.initData();
},
initData(){
request({
url: "/trafficSurveyData/dcTrafficSurveyData/selectComprehensiveData",
method: "post",
data:this.queryForm
}).then(res => {
if (res.code == 200) {
this.tableData = res.data
}
})
},
visibleClose(){
this.modelVisible = false
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
},
formatTime(timestamp) {
return moment(timestamp).format('HH:mm');
},
realTimeData(){
this.modelVisible = true
this.realTimeQueryForm.date = this.queryForm.date
this.realTimeQueryForm.iotDeviceId = this.queryForm.iotDeviceId
this.queryRealTimeData()
},
queryRealTimeData(){
request({
url: "/trafficSurveyData/dcTrafficSurveyData/selectRealTimeData",
method: "post",
data:this.realTimeQueryForm
}).then(res => {
if (res.code == 200) {
this.realTimeDataList = res.data
this.changeRealTimeData()
}
})
},
changeRealTimeData(){
if (this.realTimeQueryForm.direction == '1'){
const hezeData = Array.isArray(this.realTimeDataList) ? this.realTimeDataList.map(item => item && item.heze !== undefined ? item.heze : null) : [];
this.realTimeTableData = [...hezeData];
} else if (this.realTimeQueryForm.direction == '3'){
const jinanData = Array.isArray(this.realTimeDataList) ? this.realTimeDataList.map(item => item && item.jinan !== undefined ? item.jinan : null) : [];
this.realTimeTableData = [...jinanData];
}
this.initCharts()
},
initCharts(){
if(!this.myChart){
this.myChart = echarts.init(document.getElementById("realTimeDataChart"));
}
if (this.realTimeDataList && this.realTimeDataList.length > 0) {
chartOptions.xAxis.data = this.realTimeDataList.map(item => item.time)
if (this.realTimeQueryForm.dataType == '1') {
chartOptions.series[0].data = this.realTimeDataList.map(item => item.heze.trafficVolume)
chartOptions.series[1].data = this.realTimeDataList.map(item => item.jinan.trafficVolume)
} else {
chartOptions.series[0].data = this.realTimeDataList.map(item => item.heze.avgSpeed)
chartOptions.series[1].data = this.realTimeDataList.map(item => item.jinan.avgSpeed)
}
} else {
chartOptions.xAxis.data = []
chartOptions.series[0].data = []
chartOptions.series[1].data = []
}
this.myChart.setOption(chartOptions);
},
onExport(){
const self = this;
this.$confirm("是否确认导出综合查询内容?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
let loadingInstance = Loading.service({
fullscreen: true,
background: "#00000052",
text: "文件正在下载...",
});
request({
url: `/trafficSurveyData/dcTrafficSurveyData/exportComprehensiveData`,
method: "post",
data: self.queryForm,
responseType: 'blob',
}).then((res) => {
const url = window.URL.createObjectURL(new Blob([res]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", "综合查询.xlsx");
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href); // 释放URL 对象
document.body.removeChild(link);
link = null;
loadingInstance.close();
})
.catch((err) => {
self.$message.error(err);
loadingInstance.close();
});
})
}
},
async mounted() {
window.addEventListener("resize", () => {
if(this.myChart)
this.myChart.resize();
});
},
destroyed() {
window.removeEventListener("resize", this.resizeHandler);
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
}
};
</script>
<style lang="scss" scoped>
.statisticAnalysisQuery {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.anacontent {
display: flex;
flex-direction: row;
width: 100%;
.cleft{
background-color: #101e25;
width: 300px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
.device{
padding: 10px 15px;
display: flex;
flex-direction: column;
line-height: 45px;
}
}
.cright{
flex: 1;
height: 100%;
margin-left: 15px;
display: flex;
flex-direction: column;
.filter {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
>div {
display: flex;
gap: 6px;
}
}
}
}
.bodyTable{
flex: 1;
overflow-y: auto;
margin-bottom: 20px;
}
}
.device {
padding: 7.5px 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.deviceSel{
// background-color:#1798a9;
background: linear-gradient(45deg, #1798a9, #1798a900);
}
.device:hover {
background-color: #1d647f;
}
.realTimeChart{
height: 200px;
width: 100%;
}
.realTimeTable{
height: 300px;
overflow: auto;
margin-top: 10px;
}
.realTimeSearch{
display: flex;
}
</style>

104
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/siteAdministration/data.js
View File

@ -0,0 +1,104 @@
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
import moment from "moment";
export const searchFormList = [
{
label: "时间:",
key: "date",
type: "datePicker",
required: true,
default: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
options: {
type: "datetime",
format: "yyyy-MM-dd HH:mm:ss",
valueFormat: "yyyy-MM-dd HH:mm:ss",
},
},
{
label: "时间类型:",
key: "type",
type: "RadioGroup",
isAlone: true,
required: true,
default:'1',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "日",
},
{
key: "2",
label: "月",
},
{
key: "3",
label: "年",
}
],
},
},
{
label: "方向:",
key: "direction",
type: "RadioGroup",
isAlone: true,
default:'',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "菏泽",
},
{
key: "3",
label: "济南",
},
{
key: "",
label: "双向",
}
],
},
},
{
label: "数据类型:",
key: "dataType",
type: "RadioGroup",
required: true,
isAlone: true,
default:'1',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "流量",
},
{
key: "2",
label: "车速",
}
],
},
},
// {
// label: "方向:",
// key: "direction",
// type: "select",
// options: {
// options: [
// { key: "3", label: "济南方向" },
// { key: "1", label: "菏泽方向" },
// { key: "2", label: "双向" },
// ],
// },
// }
];

547
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/siteAdministration/index.vue
View File

@ -0,0 +1,547 @@
<template>
<div class="app-container">
<div class="filter">
<div>
<ButtonGradient @click="handleAdd" >
<i class="el-icon-plus"></i>
添加
</ButtonGradient>
<ButtonGradient @click="onExport" >
<i class="el-icon-download"></i>
导出
</ButtonGradient>
</div>
<InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList" @handleSearch="getList" />
</div>
<div class="bodyTable">
<Table :data="dcTrafficSurveyDataList" >
<ElTableColumn label="物联id" align="center" width="140" prop="iotDeviceId" />
<ElTableColumn label="观测站名称" align="center" width="140" prop="name" />
<ElTableColumn label="年份" align="center" width="140" prop="year" />
<ElTableColumn label="观测站标识" align="center" width="140" prop="sign" />
<ElTableColumn label="出临行政区划代码" align="center" width="140" prop="regionCode" />
<ElTableColumn label="观测站编号" align="center" width="140" prop="code" />
<ElTableColumn label="观测站类型" align="center" width="140" prop="type" />
<ElTableColumn label="站点桩号" align="center" width="140" prop="stakeMark" />
<ElTableColumn label="起点桩号" align="center" width="140" prop="stakeMarkStart" />
<ElTableColumn label="止点桩号" align="center" width="140" prop="stakeMarkEnd" />
<ElTableColumn label="观测里程" align="center" width="140" prop="observationMileage" />
<ElTableColumn label="比重起点桩号" align="center" width="140" prop="proportionStakeMarkStart" />
<ElTableColumn label="比重止点桩号" align="center" width="140" prop="proportionStakeMarkEnd" />
<ElTableColumn label="比重观测里程" align="center" width="140" prop="proportionMileage" />
<ElTableColumn label="起点名称" align="center" width="140" prop="startName" />
<ElTableColumn label="止点名称" align="center" width="140" prop="endName" />
<ElTableColumn label="调查方法" align="center" width="140" prop="investigationMethods" />
<ElTableColumn label="车道数量" align="center" width="140" prop="lanesNum" />
<ElTableColumn label="技术等级" align="center" width="140" prop="technicalLevel" />
<ElTableColumn label="技术等级唯一" align="center" width="140" prop="uniqueTechnicalLevel" >
<template slot-scope="scope">
<span v-if="scope.row.uniqueTechnicalLevel == '1'">是</span>
<span v-if="scope.row.uniqueTechnicalLevel == '0'">否</span>
</template>
</ElTableColumn>
<ElTableColumn label="路面类型" align="center" width="140" prop="roadSurfaceType" />
<ElTableColumn label="路面宽度" align="center" width="140" prop="roadWidth" />
<ElTableColumn label="设计速度" align="center" width="140" prop="speed" />
<ElTableColumn label="基准通行能力" align="center" width="140" prop="benchmarkTrafficCapacity" />
<ElTableColumn label="地貌" align="center" width="140" prop="landforms" />
<ElTableColumn label="供电方式" align="center" width="140" prop="powerSupplyMode" />
<ElTableColumn label="通讯方式" align="center" width="140" prop="communicationMethod" />
<ElTableColumn label="调查人员数量" align="center" width="140" prop="numberOfInvestigators" />
<ElTableColumn label="建站日期" align="center" prop="dateOfWebsiteEstablishment" width="140">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dateOfWebsiteEstablishment, '{y}-{m}-{d}') }}</span>
</template>
</ElTableColumn>
<ElTableColumn label="经度" align="center" width="140" prop="longitude" />
<ElTableColumn label="纬度" align="center" width="140" prop="latitude" />
<ElTableColumn label="备注" align="center" width="140" prop="remark" />
<ElTableColumn label="路线标识" align="center" width="140" prop="routeSignage" />
<ElTableColumn label="路线编号" align="center" width="140" prop="routeCode" />
<ElTableColumn label="路线名称" align="center" width="140" prop="routeName" />
<ElTableColumn label="路线类型" align="center" width="140" prop="routeType" />
<ElTableColumn label="路线简称" align="center" width="140" prop="routeAbbreviation" />
<ElTableColumn label="路线业务编号" align="center" width="140" prop="routeBusinessNumber" />
<ElTableColumn label="行政区划代码" align="center" width="140" prop="regionalismCode" />
<ElTableColumn label="行政区划名称" align="center" width="140" prop="regionalismName" />
<ElTableColumn label="行政区划简称" align="center" width="140" prop="regionalismAbbreviation" />
<ElTableColumn label="机构标识" align="center" width="140" prop="institutionIdentification" />
<ElTableColumn label="上级机构标识" align="center" width="140" prop="superiorOrganizationIdentification" />
<ElTableColumn label="管理机构编号" align="center" width="140" prop="managementOrganizationNumber" />
<ElTableColumn label="管理机构名称" align="center" width="140" prop="nameOfManagementOrganization" />
<ElTableColumn label="管理机构类型" align="center" width="140" prop="typeOfManagementOrganization" />
<ElTableColumn label="操作" align="center" width="140" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</ElTableColumn>
</Table>
</div>
<!-- 添加或修改观测站信息对话框 -->
<Dialog :title="title" :visible.sync="open" @update:close="cancel" width="1080px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" inline label-width="120px">
<el-form-item label="物联id" prop="iotDeviceId">
<el-input v-model="form.iotDeviceId" placeholder="请输入物联id" />
</el-form-item>
<el-form-item label="观测站名称" prop="name">
<el-input v-model="form.name" placeholder="请输入观测站名称" />
</el-form-item>
<el-form-item label="观测站编号" prop="code">
<el-input v-model="form.code" placeholder="请输入观测站编号" />
</el-form-item>
<el-form-item label="年份" prop="year">
<el-input v-model="form.year" placeholder="请输入年份" />
</el-form-item>
<el-form-item label="观测站标识" prop="sign">
<el-input v-model="form.sign" placeholder="请输入观测站标识" />
</el-form-item>
<el-form-item label="出临行政区划代码" prop="regionCode">
<el-input v-model="form.regionCode" placeholder="请输入出临行政区划代码" />
</el-form-item>
<el-form-item label="观测站类型" prop="type">
<el-input v-model="form.type" placeholder="请输入观测站类型" />
</el-form-item>
<el-form-item label="站点桩号" prop="stakeMark">
<el-input v-model="form.stakeMark" placeholder="请输入站点桩号" />
</el-form-item>
<el-form-item label="起点桩号" prop="stakeMarkStart">
<el-input v-model="form.stakeMarkStart" placeholder="请输入起点桩号" />
</el-form-item>
<el-form-item label="止点桩号" prop="stakeMarkEnd">
<el-input v-model="form.stakeMarkEnd" placeholder="请输入止点桩号" />
</el-form-item>
<el-form-item label="观测里程" prop="observationMileage">
<el-input v-model="form.observationMileage" placeholder="请输入观测里程" />
</el-form-item>
<el-form-item label="比重起点桩号" prop="proportionStakeMarkStart">
<el-input v-model="form.proportionStakeMarkStart" placeholder="请输入比重起点桩号" />
</el-form-item>
<el-form-item label="比重止点桩号" prop="proportionStakeMarkEnd">
<el-input v-model="form.proportionStakeMarkEnd" placeholder="请输入比重止点桩号" />
</el-form-item>
<el-form-item label="比重观测里程" prop="proportionMileage">
<el-input v-model="form.proportionMileage" placeholder="请输入比重观测里程" />
</el-form-item>
<el-form-item label="起点名称" prop="startName">
<el-input v-model="form.startName" placeholder="请输入起点名称" />
</el-form-item>
<el-form-item label="止点名称" prop="endName">
<el-input v-model="form.endName" placeholder="请输入止点名称" />
</el-form-item>
<el-form-item label="调查方法" prop="investigationMethods">
<el-input v-model="form.investigationMethods" placeholder="请输入调查方法" />
</el-form-item>
<el-form-item label="车道数量" prop="lanesNum">
<el-input v-model="form.lanesNum" placeholder="请输入车道数量" />
</el-form-item>
<el-form-item label="技术等级" prop="technicalLevel">
<el-input v-model="form.technicalLevel" placeholder="请输入技术等级" />
</el-form-item>
<el-form-item label="技术等级唯一" prop="uniqueTechnicalLevel">
<el-radio-group v-model="form.uniqueTechnicalLevel" style="width: 200px">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="路面类型" prop="roadSurfaceType">
<el-input v-model="form.roadSurfaceType" placeholder="请输入路面类型" />
</el-form-item>
<el-form-item label="路面宽度" prop="roadWidth">
<el-input v-model="form.roadWidth" placeholder="请输入路面宽度" />
</el-form-item>
<el-form-item label="设计速度" prop="speed">
<el-input v-model="form.speed" placeholder="请输入设计速度" />
</el-form-item>
<el-form-item label="基准通行能力" prop="benchmarkTrafficCapacity">
<el-input v-model="form.benchmarkTrafficCapacity" placeholder="请输入基准通行能力" />
</el-form-item>
<el-form-item label="地貌" prop="landforms">
<el-input v-model="form.landforms" placeholder="请输入地貌" />
</el-form-item>
<el-form-item label="供电方式" prop="powerSupplyMode">
<el-input v-model="form.powerSupplyMode" placeholder="请输入供电方式" />
</el-form-item>
<el-form-item label="通讯方式" prop="communicationMethod">
<el-input v-model="form.communicationMethod" placeholder="请输入通讯方式" />
</el-form-item>
<el-form-item label="调查人员数量" prop="numberOfInvestigators">
<el-input v-model="form.numberOfInvestigators" placeholder="请输入调查人员数量" />
</el-form-item>
<el-form-item label="建站日期" prop="dateOfWebsiteEstablishment">
<el-date-picker clearable style="width: 200px"
v-model="form.dateOfWebsiteEstablishment"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择建站日期">
</el-date-picker>
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="路线标识" prop="routeSignage">
<el-input v-model="form.routeSignage" placeholder="请输入路线标识" />
</el-form-item>
<el-form-item label="路线编号" prop="routeCode">
<el-input v-model="form.routeCode" placeholder="请输入路线编号" />
</el-form-item>
<el-form-item label="路线名称" prop="routeName">
<el-input v-model="form.routeName" placeholder="请输入路线名称" />
</el-form-item>
<el-form-item label="路线类型" prop="routeType">
<el-input v-model="form.routeType" placeholder="请输入路线类型" />
</el-form-item>
<el-form-item label="路线简称" prop="routeAbbreviation">
<el-input v-model="form.routeAbbreviation" placeholder="请输入路线简称" />
</el-form-item>
<el-form-item label="路线业务编号" prop="routeBusinessNumber">
<el-input v-model="form.routeBusinessNumber" placeholder="请输入路线业务编号" />
</el-form-item>
<el-form-item label="行政区划代码" prop="regionalismCode">
<el-input v-model="form.regionalismCode" placeholder="请输入行政区划代码" />
</el-form-item>
<el-form-item label="行政区划名称" prop="regionalismName">
<el-input v-model="form.regionalismName" placeholder="请输入行政区划名称" />
</el-form-item>
<el-form-item label="行政区划简称" prop="regionalismAbbreviation">
<el-input v-model="form.regionalismAbbreviation" placeholder="请输入行政区划简称" />
</el-form-item>
<el-form-item label="机构标识" prop="institutionIdentification">
<el-input v-model="form.institutionIdentification" placeholder="请输入机构标识" />
</el-form-item>
<el-form-item label="上级机构标识" prop="superiorOrganizationIdentification">
<el-input v-model="form.superiorOrganizationIdentification" placeholder="请输入上级机构标识" />
</el-form-item>
<el-form-item label="管理机构编号" prop="managementOrganizationNumber">
<el-input v-model="form.managementOrganizationNumber" placeholder="请输入管理机构编号" />
</el-form-item>
<el-form-item label="管理机构名称" prop="nameOfManagementOrganization">
<el-input v-model="form.nameOfManagementOrganization" placeholder="请输入管理机构名称" />
</el-form-item>
<el-form-item label="管理机构类型" prop="typeOfManagementOrganization">
<el-input v-model="form.typeOfManagementOrganization" placeholder="请输入管理机构类型" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</Dialog>
</div>
</template>
<script>
import { listDcTrafficSurveyData, getDcTrafficSurveyData, delDcTrafficSurveyData, addDcTrafficSurveyData, updateDcTrafficSurveyData } from "@/api/observationStation/observationStation";
import InputSearch from "@screen/components/InputSearch/index.vue";
import Table from '@screen/components/Table.vue';
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
import { searchFormList } from "./data";
import Dialog from "@screen/components/Dialog/index.vue";
import { Loading } from 'element-ui';
import request from "@/utils/request";
export default {
name: "DcTrafficSurveyData",
components: {
InputSearch,
Table,
ButtonGradient,
searchFormList,
Dialog,
},
data() {
return {
searchFormList,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 观测站信息表格数据
dcTrafficSurveyDataList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
year: null,
sign: null,
regionCode: null,
code: null,
name: null,
type: null,
stakeMark: null,
stakeMarkStart: null,
stakeMarkEnd: null,
observationMileage: null,
proportionStakeMarkStart: null,
proportionStakeMarkEnd: null,
proportionMileage: null,
startName: null,
endName: null,
investigationMethods: null,
lanesNum: null,
technicalLevel: null,
uniqueTechnicalLevel: null,
roadSurfaceType: null,
roadWidth: null,
speed: null,
benchmarkTrafficCapacity: null,
landforms: null,
powerSupplyMode: null,
communicationMethod: null,
numberOfInvestigators: null,
dateOfWebsiteEstablishment: null,
longitude: null,
latitude: null,
routeSignage: null,
routeCode: null,
routeName: null,
routeType: null,
routeAbbreviation: null,
routeBusinessNumber: null,
regionalismCode: null,
regionalismName: null,
regionalismAbbreviation: null,
institutionIdentification: null,
superiorOrganizationIdentification: null,
managementOrganizationNumber: null,
nameOfManagementOrganization: null,
typeOfManagementOrganization: null
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: "观测站名称不能为空", trigger: "blur" }
],
iotDeviceId: [
{ required: true, message: "物联id不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询观测站信息列表 */
getList() {
this.loading = true;
listDcTrafficSurveyData(this.queryParams).then(response => {
this.dcTrafficSurveyDataList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
year: null,
sign: null,
regionCode: null,
code: null,
name: null,
type: null,
stakeMark: null,
stakeMarkStart: null,
stakeMarkEnd: null,
observationMileage: null,
proportionStakeMarkStart: null,
proportionStakeMarkEnd: null,
proportionMileage: null,
startName: null,
endName: null,
investigationMethods: null,
lanesNum: null,
technicalLevel: null,
uniqueTechnicalLevel: null,
roadSurfaceType: null,
roadWidth: null,
speed: null,
benchmarkTrafficCapacity: null,
landforms: null,
powerSupplyMode: null,
communicationMethod: null,
numberOfInvestigators: null,
dateOfWebsiteEstablishment: null,
longitude: null,
latitude: null,
remark: null,
updateTime: null,
routeSignage: null,
routeCode: null,
routeName: null,
routeType: null,
routeAbbreviation: null,
routeBusinessNumber: null,
regionalismCode: null,
regionalismName: null,
regionalismAbbreviation: null,
institutionIdentification: null,
superiorOrganizationIdentification: null,
managementOrganizationNumber: null,
nameOfManagementOrganization: null,
typeOfManagementOrganization: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加观测站";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDcTrafficSurveyData(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改观测站";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateDcTrafficSurveyData(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDcTrafficSurveyData(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除观测站信息编号为"' + ids + '"的数据项？').then(function() {
return delDcTrafficSurveyData(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
onExport(){
const self = this;
this.$confirm("是否确认导出站点管理信息?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
let loadingInstance = Loading.service({
fullscreen: true,
background: "#00000052",
text: "文件正在下载...",
});
request({
url: `/dcObservationStation/export`,
method: "post",
data: self.queryParams,
responseType: 'blob',
}).then((res) => {
const url = window.URL.createObjectURL(new Blob([res]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", "站点管理.xlsx");
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href); // 释放URL 对象
document.body.removeChild(link);
link = null;
loadingInstance.close();
})
.catch((err) => {
self.$message.error(err);
loadingInstance.close();
});
})
}
}
};
</script>
<style lang="scss" scoped>
.filter {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
>div {
display: flex;
gap: 6px;
}
}
::v-deep .dialog-content {
overflow-y: auto !important;
height: 500px;
}
</style>
Write Preview
Loading…
Cancel
Save