zhoule
7 months ago
3 changed files with 539 additions and 214 deletions
@ -0,0 +1,359 @@ |
|||||
|
export const tabList = { |
||||
|
1: [ |
||||
|
{ |
||||
|
name: "基本信息", |
||||
|
key: "first", |
||||
|
labelWidth: "70px", |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "站点名称", |
||||
|
key: "facilityName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "管制类型", |
||||
|
key: "controlType", |
||||
|
enum: "controlType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "收费站总人数", |
||||
|
key: "stationTotal", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "所在城市", |
||||
|
key: "prefectureCity", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "所在桩号", |
||||
|
key: "stakeMark", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "收费站类型", |
||||
|
key: "stationType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "经度", |
||||
|
key: "longitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "纬度", |
||||
|
key: "latitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
name: "车道信息", |
||||
|
key: "second", |
||||
|
labelWidth: "142px", |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "收费站总车道数", |
||||
|
key: "stationLaneNumber", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "收费广场数量", |
||||
|
key: "stationSquareNumber", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "mtc车道数(入口)", |
||||
|
key: "mtcEntrance", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "mtc车道专用(出口)", |
||||
|
key: "mtcExport", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "etc车道数(入口)", |
||||
|
key: "etcEntrance", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "etc车道专用(出口)", |
||||
|
key: "etcExport", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "小计(入口)总车道数", |
||||
|
key: "countEntrance", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "小计(出口)总车道数", |
||||
|
key: "countExport", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
2: [ |
||||
|
{ |
||||
|
name: "基本信息", |
||||
|
key: "first", |
||||
|
labelWidth: "70px", |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "桥梁名称", |
||||
|
key: "facilityName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "桥梁桩号", |
||||
|
key: "stakeMark", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "路段名称", |
||||
|
key: "sectionName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "路线编码", |
||||
|
key: "routeCode", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "跨径组合", |
||||
|
key: "spanCombination", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "技术等级", |
||||
|
key: "technicalLevel", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "桥梁长度", |
||||
|
key: "bridgeLength", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "桥梁宽度", |
||||
|
key: "bridgeWidth", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "集团公司", |
||||
|
key: "groupCompany", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "管养公司", |
||||
|
key: "maintenanceAndOperatingCompany", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "功能名称", |
||||
|
key: "functionName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "桥梁方向", |
||||
|
key: "bridgeDirection", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "是否子桥", |
||||
|
key: "subBridge", |
||||
|
enum: "boolType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "总跨径", |
||||
|
key: "totalSpan", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "经度", |
||||
|
key: "longitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "纬度", |
||||
|
key: "latitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "跨越类型", |
||||
|
key: "crossingType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "最大跨径", |
||||
|
key: "maximumSpan", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "通车时间", |
||||
|
key: "openingTime", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "跨径类型名称", |
||||
|
key: "spanTypeName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "跨域结构名称", |
||||
|
key: "crossDomainStructureName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "上部结构名称", |
||||
|
key: "superstructureName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: "分中心全称", |
||||
|
key: "branchCenterFullName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
4: [ |
||||
|
{ |
||||
|
name: "基本信息", |
||||
|
key: "first", |
||||
|
labelWidth: "70px", |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "立交名称", |
||||
|
key: "facilityName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "方向数量", |
||||
|
key: "interchangeCount", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "北方方向", |
||||
|
key: "northDirection", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "北方道路", |
||||
|
key: "northernRoad", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "南方方向", |
||||
|
key: "southDirection", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "南方道路", |
||||
|
key: "southernRoad", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "东方方向", |
||||
|
key: "eastDirection", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "东方道路", |
||||
|
key: "eastRoad", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "西方方向", |
||||
|
key: "westDirection", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "西方道路", |
||||
|
key: "westRoad", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "经度", |
||||
|
key: "longitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "纬度", |
||||
|
key: "latitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "方向类型", |
||||
|
key: "directionType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
6: [ |
||||
|
{ |
||||
|
name: "简介", |
||||
|
key: "first", |
||||
|
labelWidth: "82px", |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "服务区名称", |
||||
|
key: "facilityName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "位置桩号", |
||||
|
key: "stakeMark", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "服务区状态", |
||||
|
key: "serviceState", |
||||
|
enum: "controlType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "服务类别", |
||||
|
key: "serviceType", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "经度", |
||||
|
key: "longitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "纬度", |
||||
|
key: "latitude", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "所在城市", |
||||
|
key: "location", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "所在区县", |
||||
|
key: "districtName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "方向名称", |
||||
|
key: "directionName", |
||||
|
gridColumn: "3", |
||||
|
}, |
||||
|
{ |
||||
|
label: "简介", |
||||
|
key: "introduction", |
||||
|
gridColumn: "6", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}; |
@ -1,183 +1,122 @@ |
|||||
<template> |
<template> |
||||
<Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title" width="650px"> |
<Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title" width="500px" top="10%"> |
||||
<div class="RoadNetworkFacilities"> |
<div class="RoadNetworkFacilities"> |
||||
<div class="header"> |
<div class="header"> |
||||
<Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="upCamera" :showHeader="false" /> |
<Video class="video-stream" :pileNum="dialogData.stakeMark" :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> |
</div> |
||||
</Dialog> |
|
||||
</template> |
<div class="SolarEnergy"> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
<script> |
<ElTabPane v-for="item in formList" :key="item.key" :label="item.name" :name="item.key"> |
||||
import Dialog from "@screen/components/Dialog/index.vue"; |
<Descriptions :labelWidth="item.labelWidth" :list="item.list" :data="data" style="gap: 12px" column="6" /> |
||||
import Descriptions from "@screen/components/Descriptions.vue"; |
</ElTabPane> |
||||
// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
</ElTabs> |
||||
import Video from "@screen/components/VideoMulti"; |
</div> |
||||
|
|
||||
import request from "@/utils/request"; |
</div> |
||||
import { dialogDelayVisible } from "./../mixin"; |
</Dialog> |
||||
|
</template> |
||||
// 所有交通事件的详情 |
|
||||
export default { |
<script> |
||||
name: "RoadNetworkFacilities", |
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
mixins: [dialogDelayVisible], |
import Descriptions from "@screen/components/Descriptions.vue"; |
||||
components: { |
// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
||||
Dialog, |
import Video from "@screen/components/VideoMulti"; |
||||
Descriptions, |
import request from "@/utils/request"; |
||||
Video, |
import { dialogDelayVisible } from "./../mixin"; |
||||
}, |
import { tabList } from './data' |
||||
data() { |
|
||||
return { |
// 所有交通事件的详情 |
||||
activeName: "first", |
export default { |
||||
deviceControlVisible: false, |
name: "RoadNetworkFacilities", |
||||
data: { |
mixins: [dialogDelayVisible], |
||||
deviceType: "行车诱导", |
components: { |
||||
deviceStation: "k094+079", |
Dialog, |
||||
roadName: "G35济泽高速", |
Descriptions, |
||||
direction: "1", |
Video, |
||||
deviceState: "0", |
}, |
||||
deviceVendors: "XXX厂家", |
data() { |
||||
}, |
return { |
||||
list: [ |
tabList, |
||||
// { |
activeName: "first", |
||||
// label: "机构", |
deviceControlVisible: false, |
||||
// key: "organizationName", |
data: { |
||||
// gridColumn: "3", |
deviceType: "行车诱导", |
||||
// }, |
deviceStation: "k094+079", |
||||
{ |
roadName: "G35济泽高速", |
||||
label: "高速名称", |
direction: "1", |
||||
key: "roadName", |
deviceState: "0", |
||||
gridColumn: "3", |
deviceVendors: "XXX厂家", |
||||
}, |
}, |
||||
{ |
formList: [] |
||||
label: "感知时间", |
}; |
||||
key: "occurrenceTime", |
}, |
||||
gridColumn: "3", |
async created() { |
||||
visible: () => this.isPerceived, |
let dData = { ...this.dialogData }; |
||||
}, |
this.formList = tabList[dData.facilityType] |
||||
{ |
|
||||
label: "桩号", |
if(dData.facilityType) |
||||
key: "stakeMark", |
if (dData.otherConfig) { |
||||
gridColumn: "3", |
let otherConfig = JSON.parse(dData.otherConfig); |
||||
}, |
dData.latitude = otherConfig.dimension |
||||
{ |
dData = { ...dData, ...otherConfig } |
||||
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; |
|
||||
} |
} |
||||
|
this.data = dData; |
||||
.header { |
// console.log('this.data', this.data) |
||||
display: flex; |
}, |
||||
gap: 9px; |
methods: { |
||||
|
}, |
||||
>div.video-stream { |
}; |
||||
height: 210px; |
</script> |
||||
} |
|
||||
|
<style lang="scss" scoped> |
||||
|
.RoadNetworkFacilities { |
||||
|
width: 456px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
|
||||
|
.camera-video { |
||||
|
flex: 1.5; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
>div.video-stream { |
||||
|
height: 255px; |
||||
} |
} |
||||
|
} |
||||
.tabs { |
|
||||
flex: 1; |
.tabs { |
||||
display: flex; |
flex: 1; |
||||
flex-direction: column; |
display: flex; |
||||
|
flex-direction: column; |
||||
::v-deep { |
|
||||
.el-tabs__content { |
::v-deep { |
||||
flex: 1; |
.el-tabs__content { |
||||
|
flex: 1; |
||||
.el-tab-pane { |
|
||||
height: 100%; |
.el-tab-pane { |
||||
} |
height: 100%; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
.bottom { |
|
||||
margin-top: 12px; |
.bottom { |
||||
display: flex; |
margin-top: 12px; |
||||
gap: 9px; |
display: flex; |
||||
align-items: center; |
gap: 9px; |
||||
justify-content: end; |
align-items: center; |
||||
|
justify-content: end; |
||||
>div { |
|
||||
font-size: 16px; |
>div { |
||||
padding: 6px 12px; |
font-size: 16px; |
||||
} |
padding: 6px 12px; |
||||
} |
} |
||||
} |
} |
||||
</style> |
} |
||||
|
</style> |
Loading…
Reference in new issue