qingzhengli
2 years ago
22 changed files with 1631 additions and 621 deletions
@ -0,0 +1,183 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title" width="650px"> |
||||
|
<div class="RoadNetworkFacilities"> |
||||
|
<div class="header"> |
||||
|
<Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="upCamera" :showHeader="false" /> |
||||
|
<Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="downCamera" :showHeader="false" /> |
||||
|
</div> |
||||
|
|
||||
|
<Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" column="7" /> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Descriptions from "@screen/components/Descriptions.vue"; |
||||
|
// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
||||
|
import Video from "@screen/components/VideoMulti"; |
||||
|
|
||||
|
import request from "@/utils/request"; |
||||
|
import { dialogDelayVisible } from "./../mixin"; |
||||
|
|
||||
|
// 所有交通事件的详情 |
||||
|
export default { |
||||
|
name: "RoadNetworkFacilities", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
Video, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "G35济泽高速", |
||||
|
direction: "1", |
||||
|
deviceState: "0", |
||||
|
deviceVendors: "XXX厂家", |
||||
|
}, |
||||
|
list: [ |
||||
|
// { |
||||
|
// label: "机构", |
||||
|
// key: "organizationName", |
||||
|
// gridColumn: "3", |
||||
|
// }, |
||||
|
{ |
||||
|
label: "高速名称", |
||||
|
key: "roadName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "感知时间", |
||||
|
key: "occurrenceTime", |
||||
|
gridColumn: "3", |
||||
|
visible: () => this.isPerceived, |
||||
|
}, |
||||
|
{ |
||||
|
label: "桩号", |
||||
|
key: "stakeMark", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件源", |
||||
|
key: "stringEventSource", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "影响车道", |
||||
|
key: "lang", |
||||
|
enum: "LaneOccupancy", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件状态", |
||||
|
key: "eventState", |
||||
|
enum: "EventType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "经/纬度", |
||||
|
key: "${longitude} / ${latitude}", |
||||
|
gridColumn: "5", |
||||
|
}, |
||||
|
{ |
||||
|
label: "发生时间", |
||||
|
key: "occurrenceTime", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "行驶方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
// { |
||||
|
// label: "完结时间", |
||||
|
// key: "endTime", |
||||
|
// gridColumn: "3", |
||||
|
// }, |
||||
|
{ |
||||
|
label: "事件描述", |
||||
|
key: "description", |
||||
|
gridColumn: "5", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
this.data = { ...this.dialogData }; |
||||
|
// request({ |
||||
|
// url: `/business/RoadNetworkFacilities/getEventInfo/${this.dialogData.id}`, |
||||
|
// method: "get", |
||||
|
// }) |
||||
|
// .then(({ code, data }) => { |
||||
|
// if (code != 200) return; |
||||
|
|
||||
|
// this.data = { ...data, ...this.data }; |
||||
|
// console.log("RoadNetworkFacilities", data); |
||||
|
// }) |
||||
|
// .catch((err) => { }); |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClickTabs() { }, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.RoadNetworkFacilities { |
||||
|
width: 600px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
|
||||
|
.camera-video { |
||||
|
flex: 1.5; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
|
||||
|
>div.video-stream { |
||||
|
height: 210px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tabs { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-tabs__content { |
||||
|
flex: 1; |
||||
|
|
||||
|
.el-tab-pane { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
margin-top: 12px; |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
align-items: center; |
||||
|
justify-content: end; |
||||
|
|
||||
|
>div { |
||||
|
font-size: 16px; |
||||
|
padding: 6px 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -1,356 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog v-model="modelVisible" title="收费站管制统计" style="width: 100%"> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Dialog from "@screen/components/Dialog/index"; |
|
||||
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|
||||
import Table from "@screen/components/Table.vue"; |
|
||||
import { selectTollStation } from "@/api/event/governanceAnalysis"; |
|
||||
import request from "@/utils/request"; |
|
||||
export default { |
|
||||
name: "StatsDetail", |
|
||||
components: { |
|
||||
Dialog, |
|
||||
InputSearch, |
|
||||
Table, |
|
||||
}, |
|
||||
model: { |
|
||||
prop: "visible", |
|
||||
event: "update:value", |
|
||||
}, |
|
||||
props: { |
|
||||
visible: Boolean, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
num: 0, |
|
||||
tableData: [], |
|
||||
weatherNum: [], |
|
||||
startTime: "", |
|
||||
endTime: "", |
|
||||
pickerOptions: { |
|
||||
disabledDate(time) { |
|
||||
return time.getTime() > Date.now(); |
|
||||
}, |
|
||||
}, |
|
||||
searchType: 1, |
|
||||
controlType: 1, |
|
||||
facilityIds: [], |
|
||||
facilityTableData: [], |
|
||||
searchFormList: [ |
|
||||
{ |
|
||||
label: "查询条件:", |
|
||||
key: "searchType", |
|
||||
required: true, |
|
||||
isAlone: true, |
|
||||
type: "RadioGroup", |
|
||||
default: 1, |
|
||||
options: { |
|
||||
type: "circle", |
|
||||
options: [ |
|
||||
{ |
|
||||
key: 1, |
|
||||
label: "站点", |
|
||||
}, |
|
||||
{ |
|
||||
key: 2, |
|
||||
label: "原因", |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: "事件类型:", |
|
||||
key: "controlType", |
|
||||
required: true, |
|
||||
isAlone: true, |
|
||||
type: "RadioGroup", |
|
||||
visible: (data) => { |
|
||||
if (data.searchType == 2) { |
|
||||
return true; |
|
||||
} |
|
||||
}, |
|
||||
default: 1, |
|
||||
options: { |
|
||||
type: "circle", |
|
||||
options: [ |
|
||||
{ |
|
||||
key: 1, |
|
||||
label: "收费站封闭", |
|
||||
}, |
|
||||
{ |
|
||||
key: 2, |
|
||||
label: "收费站限行", |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: "选择站点:", |
|
||||
key: "facilityId", |
|
||||
required: true, |
|
||||
type: "Select", |
|
||||
options: { |
|
||||
multiple: true, |
|
||||
options: [], |
|
||||
}, |
|
||||
default: [], |
|
||||
visible: (data) => { |
|
||||
if (data.searchType == 1) { |
|
||||
return true; |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: "日期:", |
|
||||
key: "date", |
|
||||
required: true, |
|
||||
type: "datePicker", |
|
||||
default: "", |
|
||||
options: { |
|
||||
pickerOptions: { |
|
||||
disabledDate(time) { |
|
||||
return time.getTime() > Date.now(); |
|
||||
}, |
|
||||
}, |
|
||||
valueFormat: "yyyy-MM-dd", |
|
||||
type: "daterange", |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
queryParams: {}, |
|
||||
}; |
|
||||
}, |
|
||||
computed: { |
|
||||
modelVisible: { |
|
||||
get() { |
|
||||
return this.visible; |
|
||||
}, |
|
||||
set(val) { |
|
||||
this.$emit("update:value", val); |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
getFacilityList() { |
|
||||
Promise.allSettled([ |
|
||||
// 查询收费站 |
|
||||
request({ |
|
||||
url: `/business/facility/query`, |
|
||||
method: "get", |
|
||||
}), |
|
||||
]).then((res) => { |
|
||||
if (res[0].status === "fulfilled" && res[0].value.code == 200) { |
|
||||
// this.searchFormList[2].options.options = res[0].value.data.map( |
|
||||
// (item) => ({ |
|
||||
// key: item.id, |
|
||||
// label: item.facilityName, |
|
||||
// }) |
|
||||
// ); |
|
||||
let dataList = []; |
|
||||
res[0].value.data.forEach((item) => { |
|
||||
if (item.facilityType == 1) { |
|
||||
dataList.push({ |
|
||||
key: item.id, |
|
||||
label: item.facilityName, |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
this.searchFormList[2].options.options = dataList; |
|
||||
this.facilityIds = res[0].value.data.map((item) => item.id); |
|
||||
this.searchFormList[2].default = dataList.map((item) => item.key); |
|
||||
console.log(56, this.searchFormList[2].default); |
|
||||
let currentMonth = moment().format("YYYY-MM"); |
|
||||
let currentDate = moment().format("YYYY-MM-DD"); |
|
||||
this.queryParams = { |
|
||||
searchType: 1, |
|
||||
facilityId: this.facilityIds, |
|
||||
date: [currentMonth + "-01", currentDate], |
|
||||
}; |
|
||||
this.searchFormList[3].default = [currentMonth + "-01", currentDate]; |
|
||||
this.getSelectTollStation(this.queryParams); |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
// handleResetForm(data) { |
|
||||
// this.getSelectTollStation(data); |
|
||||
// }, |
|
||||
handleSearch(data, value) { |
|
||||
console.log(888, data, value); |
|
||||
if (value == "reset") { |
|
||||
data = this.queryParams; |
|
||||
} |
|
||||
this.getSelectTollStation(data); |
|
||||
}, |
|
||||
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||
if (this.searchType == 2) { |
|
||||
if (!row.causeTypeName) { |
|
||||
if (columnIndex === 0) { |
|
||||
return [1, 2]; |
|
||||
} else if (columnIndex === 1) { |
|
||||
return [0, 0]; |
|
||||
} |
|
||||
} |
|
||||
if (row.controlCauseName === "恶劣天气") { |
|
||||
if (columnIndex === 0) { |
|
||||
console.log(this.weatherNum.length); |
|
||||
if (rowIndex === 0) { |
|
||||
return [this.weatherNum.length, 1]; |
|
||||
} else if (rowIndex <= this.weatherNum.length) { |
|
||||
return [0, 0]; |
|
||||
} |
|
||||
// if (rowIndex === 2) { |
|
||||
// return [7, 1]; |
|
||||
// } |
|
||||
// else if (rowIndex === 3) { |
|
||||
// return [0, 0]; |
|
||||
// } else if (rowIndex === 4) { |
|
||||
// return [0, 0]; |
|
||||
// } |
|
||||
// else if (rowIndex === 5) { |
|
||||
// return [0, 0]; |
|
||||
// } |
|
||||
// else if (rowIndex === 6) { |
|
||||
// return [0, 0]; |
|
||||
// } |
|
||||
// else if (rowIndex === 7) { |
|
||||
// return [0, 0]; |
|
||||
// } |
|
||||
// else if (rowIndex === 8) { |
|
||||
// return [0, 0]; |
|
||||
// } |
|
||||
} |
|
||||
// this.weatherNum = 0 |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
getSelectTollStation(data) { |
|
||||
let startTime = ""; |
|
||||
let endTime = ""; |
|
||||
if (data) { |
|
||||
startTime = data.date[0] + " 00:00:00"; |
|
||||
endTime = data.date[1] + " 23:59:59"; |
|
||||
} else { |
|
||||
startTime = new Date("2024-01-01 11:12:21"); |
|
||||
startTime = new Date("2024-01-26 11:12:36"); |
|
||||
} |
|
||||
|
|
||||
var formData = new FormData(); |
|
||||
this.searchType = data.searchType; |
|
||||
this.controlType = data.controlType; |
|
||||
if (data.searchType == 1) { |
|
||||
formData.append("facilityId", data.facilityId); |
|
||||
} else { |
|
||||
formData.append("controlType", data.controlType); |
|
||||
} |
|
||||
formData.append("searchType", data.searchType); |
|
||||
formData.append("startTime", startTime); |
|
||||
formData.append("endTime", endTime); |
|
||||
let weatherData = []; |
|
||||
let otherData = []; |
|
||||
selectTollStation(formData).then((res) => { |
|
||||
if (data.searchType == 2) { |
|
||||
this.weatherNum = []; |
|
||||
res.data.forEach((item) => { |
|
||||
if (item.causeTypeName) { |
|
||||
this.weatherNum.push(item.causeTypeName); |
|
||||
weatherData.push(item); |
|
||||
} else { |
|
||||
otherData.push(item); |
|
||||
} |
|
||||
}); |
|
||||
this.tableData = weatherData.concat(otherData); |
|
||||
} else { |
|
||||
res.data.forEach((item) => { |
|
||||
item.total = |
|
||||
item.facilityClose + |
|
||||
item.facilityRestriction + |
|
||||
item.facilityInterval; |
|
||||
}); |
|
||||
this.facilityTableData = res.data; |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getFacilityList(); |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.dialog { |
|
||||
min-height: 800px; |
|
||||
} |
|
||||
|
|
||||
.search { |
|
||||
display: flex; |
|
||||
flex-direction: row-reverse; |
|
||||
} |
|
||||
|
|
||||
::v-deep .is-scrolling-none { |
|
||||
background: #0b6581; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table__empty-text { |
|
||||
color: #3ae0f8; |
|
||||
} |
|
||||
|
|
||||
.StatsDetail { |
|
||||
// height: 770px; |
|
||||
margin: 20px 0; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
gap: 5px; |
|
||||
} |
|
||||
|
|
||||
.el-table { |
|
||||
border: 1px solid #07aec6; |
|
||||
background: #0b6581; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table .el-table__header-wrapper th, |
|
||||
.el-table .el-table__fixed-header-wrapper th { |
|
||||
background: #0b6581; |
|
||||
border: 1px solid #07aec6; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table th.el-table__cell > .cell { |
|
||||
color: #3de8ff; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table thead.is-group th.el-table__cell { |
|
||||
background: #0b6581; |
|
||||
border: 1px solid #07aec6; |
|
||||
} |
|
||||
|
|
||||
// ::v-deep .el-table th.el-table__cell.is-leaf, |
|
||||
::v-deep .el-table td.el-table__cell { |
|
||||
border: 1px solid #07aec6; |
|
||||
background: #1b586d; |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table tr { |
|
||||
border: 1px solid #07aec6; |
|
||||
background-color: #0b6581; |
|
||||
} |
|
||||
|
|
||||
::v-deep |
|
||||
.el-table--enable-row-hover |
|
||||
.el-table__body |
|
||||
tr:hover |
|
||||
> td.el-table__cell { |
|
||||
background: #1b586d; |
|
||||
border: 1px solid #07aec6; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table::before, |
|
||||
.el-table--group::after, |
|
||||
.el-table--border::after { |
|
||||
background: none; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,644 @@ |
|||||
|
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { Message } from "element-ui"; |
||||
|
|
||||
|
export const tabConfigList = [ |
||||
|
{ |
||||
|
key: "TrafficControl", |
||||
|
label: "交通管制", |
||||
|
formConfig: { |
||||
|
formOptions: { |
||||
|
column: 2, |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "管制设施:", |
||||
|
key: "eventSubclass", |
||||
|
type: "RadioGroup", |
||||
|
isAlone: true, |
||||
|
required: true, |
||||
|
default: "3-1", |
||||
|
options: { |
||||
|
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "3-1", |
||||
|
label: "主线", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3-2", |
||||
|
label: "收费站", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3-3", |
||||
|
label: "立交", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3-4", |
||||
|
label: "服务区", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3-5", |
||||
|
label: "其他", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
ons: { |
||||
|
input(value, ...args) { |
||||
|
const { data, formList } = args.slice(-1)[0]; |
||||
|
const classify = formList.find( |
||||
|
(it) => it.key == "dcEventTrafficControl.classify" |
||||
|
); |
||||
|
let ss = { |
||||
|
"3-1": "主线", |
||||
|
"3-2": "收费站", |
||||
|
"3-3": "立交", |
||||
|
"3-4": "服务区", |
||||
|
}; |
||||
|
let ad = { |
||||
|
1: [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: `${ss[value]}关闭`, |
||||
|
}, |
||||
|
], |
||||
|
2: [ |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "主线限行", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: "主线间隔放行", |
||||
|
}, |
||||
|
{ |
||||
|
key: "4", |
||||
|
label: "主线并道", |
||||
|
}, |
||||
|
{ |
||||
|
key: "5", |
||||
|
label: "主线限速", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
classify.options.options = |
||||
|
ad[data.dcEventTrafficControl.controlType]; |
||||
|
|
||||
|
if (data.dcEventTrafficControl) { |
||||
|
data.dcEventTrafficControl.facilityId = null; |
||||
|
} |
||||
|
let facilityType = 1; |
||||
|
if (value == "3-2") { |
||||
|
facilityType = 1; |
||||
|
} else if (value == "3-3") { |
||||
|
facilityType = 3; |
||||
|
} else if (value == "3-4") { |
||||
|
facilityType = 6; |
||||
|
} |
||||
|
if (value && value != "3-1") { |
||||
|
//路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区
|
||||
|
request({ |
||||
|
url: `/business/facility/query?facilityType=${facilityType}`, |
||||
|
method: "get", |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
let lwss = []; |
||||
|
result.data.forEach((it) => |
||||
|
lwss.push({ key: it.id, label: it.facilityName }) |
||||
|
); |
||||
|
|
||||
|
formList.forEach((it) => { |
||||
|
if (it.key == "dcEventTrafficControl.facilityId") { |
||||
|
it.options.options = lwss; |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
console.log("err", err); |
||||
|
Message.error("查询失败1", err); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "管制分类:", |
||||
|
key: "dcEventTrafficControl.controlType", |
||||
|
type: "RadioGroup", |
||||
|
isAlone: true, |
||||
|
required: true, |
||||
|
default: "1", |
||||
|
options: { |
||||
|
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
||||
|
options: [ |
||||
|
{ |
||||
|
key: 1, |
||||
|
label: "封闭", |
||||
|
}, |
||||
|
{ |
||||
|
key: 2, |
||||
|
label: "限行", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
ons: { |
||||
|
input(value, ...args) { |
||||
|
const { data, formList } = args.slice(-1)[0]; |
||||
|
const classify = formList.find( |
||||
|
(it) => it.key == "dcEventTrafficControl.classify" |
||||
|
); |
||||
|
const measure = formList.find( |
||||
|
(it) => it.key == "dcEventTrafficControl.measure" |
||||
|
); |
||||
|
let ss = { |
||||
|
"3-1": "主线", |
||||
|
"3-2": "收费站", |
||||
|
"3-3": "立交", |
||||
|
"3-4": "服务区", |
||||
|
"3-5": "其他", |
||||
|
}; |
||||
|
let ad = { |
||||
|
1: [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: `${ss[data.eventSubclass]}关闭`, |
||||
|
}, |
||||
|
], |
||||
|
2: [ |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "主线限行", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: "主线间隔放行", |
||||
|
}, |
||||
|
{ |
||||
|
key: "4", |
||||
|
label: "主线并道", |
||||
|
}, |
||||
|
{ |
||||
|
key: "5", |
||||
|
label: "主线限速", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
let cs = { |
||||
|
1: [ |
||||
|
{ |
||||
|
value: "1", |
||||
|
label: "临时关闭", |
||||
|
}, |
||||
|
], |
||||
|
2: [ |
||||
|
{ |
||||
|
value: "2", |
||||
|
label: "限行车辆", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3", |
||||
|
label: "限行车道", |
||||
|
}, |
||||
|
{ |
||||
|
value: "4", |
||||
|
label: "限行车道且限行车辆", |
||||
|
}, |
||||
|
{ |
||||
|
value: "5", |
||||
|
label: "间隔放行", |
||||
|
}, |
||||
|
{ |
||||
|
value: "6", |
||||
|
label: "并道行驶", |
||||
|
}, |
||||
|
{ |
||||
|
value: "7", |
||||
|
label: "限速", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
measure.options.options = cs[value]; |
||||
|
classify.options.options = ad[value]; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "分类:", |
||||
|
key: "dcEventTrafficControl.classify", |
||||
|
type: "RadioGroup", |
||||
|
isAlone: true, |
||||
|
required: true, |
||||
|
default: "1", |
||||
|
options: { |
||||
|
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "主线关闭", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "分类原因:", |
||||
|
key: "dcEventTrafficControl.controlCause", |
||||
|
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: "恶劣天气", |
||||
|
}, |
||||
|
{ |
||||
|
key: "4", |
||||
|
label: "施工", |
||||
|
}, |
||||
|
{ |
||||
|
key: "5", |
||||
|
label: "警备任务", |
||||
|
}, |
||||
|
{ |
||||
|
key: "6", |
||||
|
label: "其他", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
ons: { |
||||
|
input(value, ...args) { |
||||
|
const { formList } = args.slice(-1)[0]; |
||||
|
const config = formList.find( |
||||
|
(it) => it.key == "dcEventTrafficControl.causeType" |
||||
|
); |
||||
|
let ad = { |
||||
|
3: [ |
||||
|
{ |
||||
|
value: "3-1", |
||||
|
label: "雨", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3-2", |
||||
|
label: "雪", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3-3", |
||||
|
label: "雾", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3-4", |
||||
|
label: "道路积水", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3-5", |
||||
|
label: "道路湿滑", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3-6", |
||||
|
label: "道路结冰", |
||||
|
}, |
||||
|
{ |
||||
|
value: "3-7", |
||||
|
label: "沙尘暴", |
||||
|
}, |
||||
|
], |
||||
|
4: [ |
||||
|
{ |
||||
|
value: "4-1", |
||||
|
label: "专项工程施工", |
||||
|
}, |
||||
|
{ |
||||
|
value: "4-2", |
||||
|
label: "改扩建工程施工", |
||||
|
}, |
||||
|
{ |
||||
|
value: "4-3", |
||||
|
label: "其他施工", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
config.options.options = ad[value]; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
PresetFormItems.isInTunnel, |
||||
|
{ |
||||
|
label: "原因类型:", |
||||
|
key: "dcEventTrafficControl.causeType", |
||||
|
type: "select", |
||||
|
options: { |
||||
|
options: [], |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if ( |
||||
|
data?.dcEventTrafficControl.controlCause == "3" || |
||||
|
data?.dcEventTrafficControl.controlCause == "4" |
||||
|
) { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
PresetFormItems.freeway, |
||||
|
PresetFormItems.direction, |
||||
|
PresetFormItems.emptyLine, |
||||
|
{ |
||||
|
label: "出入口:", |
||||
|
key: "dcEventTrafficControl.exitsInlets", |
||||
|
type: "RadioGroup", |
||||
|
isAlone: true, |
||||
|
required: true, |
||||
|
default: "2", |
||||
|
options: { |
||||
|
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "出口", |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "入口", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.eventSubclass == "3-2" || data?.eventSubclass == "3-4") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "收费站:", |
||||
|
key: "dcEventTrafficControl.facilityId", |
||||
|
type: "select", |
||||
|
isAlone: false, |
||||
|
required: true, |
||||
|
options: { |
||||
|
options: [], |
||||
|
multiple: true, |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.eventSubclass == "3-2") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "立交桥:", |
||||
|
key: "dcEventTrafficControl.facilityId", |
||||
|
type: "select", |
||||
|
isAlone: false, |
||||
|
required: true, |
||||
|
options: { |
||||
|
options: [], |
||||
|
multiple: true, |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.eventSubclass == "3-3") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
ons: { |
||||
|
change(value, ...args) { |
||||
|
const { formList } = args.slice(-1)[0]; |
||||
|
|
||||
|
//匝道
|
||||
|
request({ |
||||
|
url: `/system/ramp/listAll?facilityId=${value}`, |
||||
|
method: "get", |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
let zd = []; |
||||
|
result.rows.forEach((it) => |
||||
|
zd.push({ key: it.id, label: it.rampName }) |
||||
|
); |
||||
|
// console.log("zd", zd);
|
||||
|
formList.forEach((it) => { |
||||
|
if (it.key == "dcEventTrafficControl.rampId") { |
||||
|
console.log("it", it); |
||||
|
it.options.options = zd; |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
console.log("err", err); |
||||
|
Message.error("查询失败3", err); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "匝道:", |
||||
|
key: "dcEventTrafficControl.rampId", |
||||
|
type: "select", |
||||
|
isAlone: false, |
||||
|
required: true, |
||||
|
options: { |
||||
|
options: [], |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.eventSubclass == "3-3") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "服务区:", |
||||
|
key: "dcEventTrafficControl.facilityId", |
||||
|
type: "select", |
||||
|
isAlone: false, |
||||
|
required: true, |
||||
|
options: { |
||||
|
options: [], |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.eventSubclass == "3-4") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "措施:", |
||||
|
required: true, |
||||
|
key: "dcEventTrafficControl.measure", |
||||
|
type: "select", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
value: "1", |
||||
|
label: "临时关闭", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "限制类型:", |
||||
|
key: "dcEventTrafficControl.limitedType", |
||||
|
required: true, |
||||
|
type: "select", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ key: "1", label: "只允许" }, |
||||
|
{ key: "2", label: "禁止" }, |
||||
|
], |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.dcEventTrafficControl.controlType == "2") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "车辆类型:", |
||||
|
key: "dcEventTrafficControl.vehicleType", |
||||
|
required: true, |
||||
|
type: "select", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ key: "1", label: "10座以下客车" }, |
||||
|
{ key: "2", label: "10座以下客车(间隔放行)" }, |
||||
|
{ key: "3", label: "19座以上客车" }, |
||||
|
{ key: "4", label: "一型客车(不含面包车)" }, |
||||
|
{ key: "5", label: "两客一危" }, |
||||
|
{ key: "6", label: "三类以上班线客车" }, |
||||
|
{ |
||||
|
key: "7", |
||||
|
label: "四轴及四轴以上货车(运送生鲜果蔬、抗疫物资车辆除外)", |
||||
|
}, |
||||
|
{ key: "8", label: "三轴及以上(含三轴)货车" }, |
||||
|
{ key: "9", label: "3轴以上货车(不含危险品运输车)" }, |
||||
|
{ key: "10", label: "3轴以上货车" }, |
||||
|
{ key: "11", label: "四轴及以上(含四轴)货车" }, |
||||
|
{ key: "12", label: "4轴以上货车(不含危险品运输车)" }, |
||||
|
{ key: "13", label: "4轴以上货车" }, |
||||
|
{ key: "14", label: "4轴以下货车" }, |
||||
|
{ key: "15", label: "57座以上客车" }, |
||||
|
{ key: "16", label: "五轴及以上货车" }, |
||||
|
{ key: "17", label: "5轴以上货车" }, |
||||
|
{ key: "18", label: "5轴以上货车(不含危险品运输车)" }, |
||||
|
{ key: "19", label: "5轴以下货车" }, |
||||
|
{ key: "20", label: "6座以上客车" }, |
||||
|
{ key: "21", label: "6座以上面包车" }, |
||||
|
{ key: "22", label: "7座以上客车" }, |
||||
|
{ key: "23", label: "7座以下客车" }, |
||||
|
{ key: "24", label: "8座以上客车" }, |
||||
|
// 25- 8座以下客车
|
||||
|
// 26- 8座以下客车(间隔放行)
|
||||
|
// 27- 9座以上客车
|
||||
|
// 28- 半挂货车
|
||||
|
// 29- 车辆（不含10座以下客车）
|
||||
|
// 30- 车辆（不含8座以下客车）
|
||||
|
// 31- 车辆（不含小轿车）
|
||||
|
// 32- 不可解体物品超限运输车
|
||||
|
// 33- 不可解体物品运输车
|
||||
|
// 34- 超长超宽超高车辆
|
||||
|
// 35- 车辆运输车
|
||||
|
// 36- 超限运输车
|
||||
|
// 37- 大型货车(不含危险品运输车)
|
||||
|
// 38- 大型货车
|
||||
|
// 39- 大型客车
|
||||
|
// 40- 大中型货车
|
||||
|
// 41- 已安装ETC的客车
|
||||
|
// 42- 已安装ETC的小型客车
|
||||
|
// 43- 罐车
|
||||
|
// 44- 货车
|
||||
|
// 45- 黄牌货车
|
||||
|
// 46- 黄牌货车(不含危险品运输车)
|
||||
|
// 47- 黄牌货车(运送民生物资车辆除外)
|
||||
|
// 48- 核载总质量4.5吨以上货车(运送民生物资车辆除外)
|
||||
|
// 49- 客车（包括小轿车）
|
||||
|
// 50- 客运车辆
|
||||
|
// 51- 蓝牌货车
|
||||
|
// 52- 旅游包车
|
||||
|
// 53- 面包车
|
||||
|
// 54- 皮卡
|
||||
|
// 55- 全部车型
|
||||
|
// 56- (未安装ETC)车辆
|
||||
|
// 57- 外埠号牌车辆
|
||||
|
// 58- 危化品运输车
|
||||
|
// 59- 危险物品运输车
|
||||
|
// 60- 武装押运车辆
|
||||
|
// 61- 小轿车
|
||||
|
// 62- 厢式货车
|
||||
|
// 63- 小型车辆
|
||||
|
// 64- (已安装ETC)车辆
|
||||
|
// 65- 已安装ETC的货车
|
||||
|
// 66- 押款车辆
|
||||
|
// 67- 疫情防控物资运输车辆
|
||||
|
// 68- 运输剧毒、放射性物品车辆
|
||||
|
// 69- 运输枪支弹药、爆炸、剧毒、放射性物品车辆
|
||||
|
// 70- 营运客车
|
||||
|
// 71- 重型货车
|
||||
|
// 72- 核载总质量1.8吨以上货车
|
||||
|
// 73- 中型货车
|
||||
|
// 74- 小型车辆限速80公里/小时、大型车辆限速70
|
||||
|
], |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.dcEventTrafficControl.controlType == "2") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "桩号:", |
||||
|
key: "stakeMark", |
||||
|
required: true, |
||||
|
type: "MultipleLabelItem", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
prefix: { |
||||
|
text: "K", |
||||
|
style: { |
||||
|
color: "#3DE8FF", |
||||
|
}, |
||||
|
}, |
||||
|
key: "stakeMark[0]", |
||||
|
}, |
||||
|
{ |
||||
|
prefix: { |
||||
|
text: "+", |
||||
|
style: { |
||||
|
color: "#3DE8FF", |
||||
|
}, |
||||
|
}, |
||||
|
key: "stakeMark[1]", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
visible: (data) => { |
||||
|
if (data?.eventSubclass == "3-1") { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
PresetFormItems.startTime, |
||||
|
PresetFormItems.expectedEndTime, |
||||
|
PresetFormItems.remark, |
||||
|
PresetFormItems.source, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,178 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" title="新增交通管制事件" width="1100px" top="10%"> |
||||
|
<div class="AddControlEventInfoDialog"> |
||||
|
<Form class="form" ref="FormConfigRef" :formList="formConfigList" v-model="fData" labelWidth="120px" /> |
||||
|
|
||||
|
<div class="footer"> |
||||
|
<Button style="background: #c9c9c9" @click.native="modelVisible = false">关闭</Button> |
||||
|
<Button :loading="submitting" @click.native="onSubmit">保存</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index"; |
||||
|
import Form from "@screen/components/FormConfig"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { tabConfigList } from "./data.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: "AddControlEventInfoDialog", |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Form, |
||||
|
Button, |
||||
|
}, |
||||
|
model: { |
||||
|
prop: "visible", |
||||
|
event: "close", |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
eventSubclass: String, |
||||
|
controlType: Number |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formConfigList: [], |
||||
|
fData: {}, |
||||
|
eventId: '', |
||||
|
submitting: false, |
||||
|
roads: [], |
||||
|
direction: [], |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
if (this.visible) { |
||||
|
this.initData() |
||||
|
} |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit("close", val); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
async initData() { |
||||
|
this.formConfigList = tabConfigList[0].formConfig.list |
||||
|
await Promise.all([ |
||||
|
//道路 |
||||
|
request({ |
||||
|
url: `/business/road/query`, |
||||
|
method: "get", |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
this.roads = [] |
||||
|
result.data.forEach((it) => { |
||||
|
this.roads.push({ key: it.id, label: it.roadName }); |
||||
|
}); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
Message.error("查询失败4", err); |
||||
|
}), |
||||
|
//方向字典 |
||||
|
request({ |
||||
|
url: `/system/dict/data/type/iot_event_direction`, |
||||
|
method: "get", |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
this.direction = [] |
||||
|
result.data.forEach((it) => { |
||||
|
this.direction.push({ key: it.dictValue, label: it.dictLabel }); |
||||
|
}); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
Message.error("查询失败5", err); |
||||
|
}), |
||||
|
]); |
||||
|
|
||||
|
this.formConfigList.forEach((it) => { |
||||
|
if (it.key == "direction") { |
||||
|
it.options.options = this.direction; |
||||
|
} |
||||
|
if (it.key == "roadId") { |
||||
|
it.options.options = this.roads; |
||||
|
} |
||||
|
}); |
||||
|
// console.log('eventSubclass',this.eventSubclass,this.controlType) |
||||
|
this.fData.eventSubclass = this.eventSubclass; |
||||
|
this.fData.dcEventTrafficControl.controlType = this.controlType; |
||||
|
}, |
||||
|
onSubmit() { |
||||
|
this.$refs.FormConfigRef.validate().then((formData) => { |
||||
|
this.submitting = true; |
||||
|
|
||||
|
if (formData.dcEventTrafficControl.facilityId instanceof Array) { |
||||
|
let ids = formData.dcEventTrafficControl.facilityId; |
||||
|
formData.dcEventTrafficControl.facilityIds = ids |
||||
|
formData.dcEventTrafficControl.facilityId = '' |
||||
|
} |
||||
|
let stakeMark = formData.stakeMark; |
||||
|
|
||||
|
// console.log('formData', { |
||||
|
// ...formData, |
||||
|
// eventType: 3, |
||||
|
// stakeMark: (stakeMark && stakeMark[0] != null) ? ((stakeMark && stakeMark.length > 0) ? ('K' + stakeMark[0] + '+' + stakeMark[1]) : '') : '', |
||||
|
// }) |
||||
|
// this.submitting = false; |
||||
|
// return; |
||||
|
|
||||
|
request({ |
||||
|
url: `/dc/system/event`, |
||||
|
method: "post", |
||||
|
data: { |
||||
|
...formData, |
||||
|
eventType: 3, |
||||
|
eventState: 0, |
||||
|
stakeMark: stakeMark && stakeMark[0] != null |
||||
|
? stakeMark && stakeMark.length > 0 ? "K" + stakeMark[0] + "+" + stakeMark[1] : "" : "", |
||||
|
}, |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
Message.success("提交成功"); |
||||
|
this.modelVisible = false; |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
Message.error("提交失败"); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
this.submitting = false; |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.AddControlEventInfoDialog { |
||||
|
gap: 9px; |
||||
|
width: 1050px; |
||||
|
height: 560px; |
||||
|
max-height: 900px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.form { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: end; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue