7 changed files with 1449 additions and 0 deletions
@ -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 |
||||
|
}) |
||||
|
} |
||||
@ -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; |
||||
@ -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: "双向" },
|
||||
|
// ],
|
||||
|
// },
|
||||
|
// }
|
||||
|
]; |
||||
|
|
||||
@ -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> |
||||
@ -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: "双向" },
|
||||
|
// ],
|
||||
|
// },
|
||||
|
// }
|
||||
|
]; |
||||
|
|
||||
@ -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> |
||||
Loading…
Reference in new issue