Browse Source

首页-路网设施

wangqin
zhoule 7 months ago
parent
commit
93cf11e164
  1. 359
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/data.js
  2. 287
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
  3. 107
      ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

359
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/data.js

@ -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",
},
],
},
],
};

287
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue

@ -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>

107
ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@ -110,10 +110,19 @@ export const EventTopics = {
}; };
//路网设施类型 //路网设施类型
// 1-收费站
// 2-桥梁
// 3-互通立交
// 4-枢纽立交
// 5-隧道
// 6-服务区',
// 7-停车区,
// 8-清障驻点
// 9-边坡
export const RoadNFTopics = { export const RoadNFTopics = {
收费站: 1, 收费站: 1,
桥梁: 2,
枢纽立交: 4, 枢纽立交: 4,
桥梁: 5,
服务区: 6, 服务区: 6,
停车区: 7, 停车区: 7,
}; };
@ -172,9 +181,9 @@ export const WarningType = {
99: "其他事件", 99: "其他事件",
}; };
function arrayToDic(arr){ function arrayToDic(arr) {
let obj = {}; let obj = {};
arr.map(item=>{ arr.map((item) => {
obj[item.value] = item; obj[item.value] = item;
}); });
return obj; return obj;
@ -188,7 +197,7 @@ export const deviceTypeOptions = [
{ {
value: 2, value: 2,
label: "可变信息标志", label: "可变信息标志",
timingControl: true timingControl: true,
}, },
{ {
value: 3, value: 3,
@ -201,7 +210,7 @@ export const deviceTypeOptions = [
{ {
value: 5, value: 5,
label: "路段语音广播", label: "路段语音广播",
timingControl: true timingControl: true,
}, },
{ {
value: 6, value: 6,
@ -222,7 +231,7 @@ export const deviceTypeOptions = [
{ {
value: 10, value: 10,
label: "激光疲劳唤醒", label: "激光疲劳唤醒",
timingControl: true timingControl: true,
}, },
{ {
value: 11, value: 11,
@ -231,12 +240,12 @@ export const deviceTypeOptions = [
{ {
value: 12, value: 12,
label: "行车诱导", label: "行车诱导",
timingControl: true timingControl: true,
}, },
{ {
value: 13, value: 13,
label: "智能设备箱", label: "智能设备箱",
timingControl: true timingControl: true,
}, },
{ {
value: 14, value: 14,
@ -370,49 +379,49 @@ export const eventSubClassMap = {
], ],
2: [ 2: [
{ {
value: '1', value: "1",
label: "高速主线", label: "高速主线",
}, },
{ {
value: '2', value: "2",
label: "服务区", label: "服务区",
}, },
{ {
value: '3', value: "3",
label: "立交桥", label: "立交桥",
}, },
{ {
value: '4', value: "4",
label: "收费站", label: "收费站",
}, },
], ],
3: [ 3: [
{ {
value: '1', value: "1",
label: "主线关闭", label: "主线关闭",
}, },
{ {
value: '2', value: "2",
label: "主线限行", label: "主线限行",
}, },
{ {
value: '6', value: "6",
label: "收费站关闭", label: "收费站关闭",
}, },
{ {
value: '7', value: "7",
label: "收费站限行", label: "收费站限行",
}, },
{ {
value: '10', value: "10",
label: "匝道立交关闭", label: "匝道立交关闭",
}, },
{ {
value: '12', value: "12",
label: "匝道立交限行", label: "匝道立交限行",
}, },
{ {
value: '14', value: "14",
label: "服务区关闭", label: "服务区关闭",
}, },
], ],
@ -476,43 +485,43 @@ export const eventSubClassMap = {
], ],
7: [ 7: [
{ {
value: '1', value: "1",
label: "道路养护施工", label: "道路养护施工",
}, },
{ {
value: '2', value: "2",
label: "收费站养护施工", label: "收费站养护施工",
}, },
{ {
value: '3', value: "3",
label: "服务区养护施工", label: "服务区养护施工",
}, },
{ {
value: '4', value: "4",
label: "枢纽立交匝道养护施工", label: "枢纽立交匝道养护施工",
}, },
{ {
value: '5', value: "5",
label: "地方道路养护施工", label: "地方道路养护施工",
}, },
{ {
value: '6', value: "6",
label: "道路工程建设施工", label: "道路工程建设施工",
}, },
{ {
value: '7', value: "7",
label: "收费站工程建设施工", label: "收费站工程建设施工",
}, },
{ {
value: '8', value: "8",
label: "服务区工程建设施工", label: "服务区工程建设施工",
}, },
{ {
value: '9', value: "9",
label: "枢纽立交匝道工程建设施工", label: "枢纽立交匝道工程建设施工",
}, },
{ {
value: '10', value: "10",
label: "地方道路工程建设施工", label: "地方道路工程建设施工",
}, },
], ],
@ -532,27 +541,27 @@ export const eventSubClassMap = {
], ],
9: [ 9: [
{ {
value: '1', value: "1",
label: "摄像机", label: "摄像机",
}, },
{ {
value: '2', value: "2",
label: "护栏", label: "护栏",
}, },
{ {
value: '3', value: "3",
label: "隔离栅", label: "隔离栅",
}, },
{ {
value: '4', value: "4",
label: "情报板", label: "情报板",
}, },
{ {
value: '5', value: "5",
label: "防炫板", label: "防炫板",
}, },
{ {
value: '6', value: "6",
label: "其他", label: "其他",
}, },
], ],
@ -596,7 +605,7 @@ export const eventSubClassMap = {
], ],
11: [ 11: [
{ {
value: '1', value: "1",
label: "其他事件", label: "其他事件",
}, },
], ],
@ -812,7 +821,7 @@ export const eventSubClassMap = {
], ],
}, },
}; };
//激光疲劳唤醒 工作模式 //激光疲劳唤醒 工作模式
export const gzmsMap = { export const gzmsMap = {
SETMD0: "激光关闭", SETMD0: "激光关闭",
@ -991,9 +1000,9 @@ export const DirectionTypes = {
2: "双向", 2: "双向",
}; };
export const directionOptions = [ export const directionOptions = [
{value : "1", label : "菏泽方向"}, { value: "1", label: "菏泽方向" },
{value : "3", label : "济南方向"}, { value: "3", label: "济南方向" },
{value : "2", label : "双向"} { value: "2", label: "双向" },
]; ];
//行车诱导相关 //行车诱导相关
@ -1059,3 +1068,21 @@ export const manualEarlyWarning = [
label: "逆行", label: "逆行",
}, },
]; ];
export const controlType = {
0: {
text: "正常",
},
1: {
text: "关闭",
},
};
export const boolType = {
0: {
text: "否",
},
1: {
text: "是",
},
};
Loading…
Cancel
Save