From 93cf11e16437e020b31202df8bf87438b60a840f Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Tue, 23 Apr 2024 17:24:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5-=E8=B7=AF=E7=BD=91=E8=AE=BE?=
 =?UTF-8?q?=E6=96=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialogs/RoadNetworkFacilities/data.js     | 359 ++++++++++++++++++
 .../Dialogs/RoadNetworkFacilities/index.vue   | 287 ++++++--------
 .../src/views/JiHeExpressway/utils/enum.js    | 107 ++++--
 3 files changed, 539 insertions(+), 214 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/data.js

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/data.js
new file mode 100644
index 00000000..2634a465
--- /dev/null
+++ b/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",
+        },
+      ],
+    },
+  ],
+};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
index 48de2c7d..aa5660ba 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
@@ -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>
-  
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
index 8e23c9a6..fc963849 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
+++ b/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 = {
   收费站: 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: "是",
+  },
+};
\ No newline at end of file