mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页-路网设施

wangqin
zhoule 7 months ago
parent
dd6bbd41d8
commit
93cf11e164
3 changed files with 539 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

@ -1,183 +1,122 @@
<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" />
<Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title" width="500px" top="10%">
<div class="RoadNetworkFacilities">
<div class="header">
<Video class="video-stream" :pileNum="dialogData.stakeMark" :showHeader="false" />
</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;
<div class="SolarEnergy">
<ElTabs v-model="activeName" class="tabs">
<ElTabPane v-for="item in formList" :key="item.key" :label="item.name" :name="item.key">
<Descriptions :labelWidth="item.labelWidth" :list="item.list" :data="data" style="gap: 12px" column="6" />
</ElTabPane>
</ElTabs>
</div>
</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";
import { tabList } from './data'
// 所有交通事件的详情
export default {
name: "RoadNetworkFacilities",
mixins: [dialogDelayVisible],
components: {
Dialog,
Descriptions,
Video,
},
data() {
return {
tabList,
activeName: "first",
deviceControlVisible: false,
data: {
deviceType: "行车诱导",
deviceStation: "k094+079",
roadName: "G35济泽高速",
direction: "1",
deviceState: "0",
deviceVendors: "XXX厂家",
},
formList: []
};
},
async created() {
let dData = { ...this.dialogData };
this.formList = tabList[dData.facilityType]
if(dData.facilityType)
if (dData.otherConfig) {
let otherConfig = JSON.parse(dData.otherConfig);
dData.latitude = otherConfig.dimension
dData = { ...dData, ...otherConfig }
}
.header {
display: flex;
gap: 9px;
>div.video-stream {
height: 210px;
}
this.data = dData;
// console.log('this.data', this.data)
},
methods: {
},
};
</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;
display: flex;
flex-direction: column;
::v-deep {
.el-tabs__content {
flex: 1;
.el-tab-pane {
height: 100%;
}
}
.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;
}
}
.bottom {
margin-top: 12px;
display: flex;
gap: 9px;
align-items: center;
justify-content: end;
>div {
font-size: 16px;
padding: 6px 12px;
}
}
</style>
}
</style>

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

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