qingzhengli
1 year 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