From 1779f856be7b9faa7263a50188ea238057b65428 Mon Sep 17 00:00:00 2001
From: zyy <1787816799@qq.com>
Date: Fri, 17 Jan 2020 17:48:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eiscs=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  23 +-
 src/utils/baseUrl.js                          |   4 +-
 .../iscsSystem/config/fire-alarm/stand.vue    |  20 ++
 .../config/fire-alarm/stationHall.vue         |  20 ++
 .../iscsSystem/config/fire-alarm/system.vue   |  20 ++
 src/views/system/iscsSystem/config/index.vue  |  36 +++
 src/views/system/iscsSystem/index.vue         |  17 +-
 src/views/system/iscsSystem/nav.vue           | 269 +++++++++++++++++-
 8 files changed, 385 insertions(+), 24 deletions(-)
 create mode 100644 src/views/system/iscsSystem/config/fire-alarm/stand.vue
 create mode 100644 src/views/system/iscsSystem/config/fire-alarm/stationHall.vue
 create mode 100644 src/views/system/iscsSystem/config/fire-alarm/system.vue
 create mode 100644 src/views/system/iscsSystem/config/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 1ae084d1d..268420bd8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,7 +39,7 @@ const News = () => import('@/views/system/news/index');
 const CommandDictionary = () => import('@/views/system/commandDictionary/index');
 const CommandDictionaryDetail = () => import('@/views/system/commandDictionary/edit');
 const configLine = () => import('@/views/system/configLine/index');
-// const IscsSystem = () => import('@/views/system/iscsSystem/index');
+const IscsSystem = () => import('@/views/system/iscsSystem/index');
 
 const Mapedit = () => import('@/views/mapdraft/index');
 
@@ -784,20 +784,13 @@ export const asyncRouter = [
                     }
                 ]
             },
-            // {
-            //     path: 'iscs/system',
-            //     component: IscsSystem,
-            //     meta: {
-            //         i18n: 'router.iscsSystem'
-            //     },
-            //     children: [
-            //         {
-            //             path: 'edit/:id/:mode',
-            //             component: IscsDraw,
-            //             hidden: true
-            //         }
-            //     ]
-            // },
+            {
+                path: 'iscs/system',
+                component: IscsSystem,
+                meta: {
+                    i18n: 'router.iscsSystem'
+                }
+            },
             {
                 path: 'dictionary',
                 component: Dictionary,
diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js
index 79d1c6346..1e9afea51 100644
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@@ -3,11 +3,11 @@ export function getBaseUrl() {
     let BASE_API;
     if (process.env.NODE_ENV === 'development') {
         // BASE_API = 'https://joylink.club/jlcloud';
-        // BASE_API = 'https://test.joylink.club/jlcloud';
+        BASE_API = 'https://test.joylink.club/jlcloud';
         // BASE_API = 'http://192.168.3.5:9000'; // 袁琪
         // BASE_API = 'http://192.168.3.6:9000'; // 旭强
         // BASE_API = 'http://192.168.3.41:9000'; // 张赛
-        BASE_API = 'http://192.168.3.82:9000'; // 杜康
+        // BASE_API = 'http://192.168.3.82:9000'; // 杜康
     } else {
         BASE_API = process.env.VUE_APP_BASE_API;
     }
diff --git a/src/views/system/iscsSystem/config/fire-alarm/stand.vue b/src/views/system/iscsSystem/config/fire-alarm/stand.vue
new file mode 100644
index 000000000..60d45af2a
--- /dev/null
+++ b/src/views/system/iscsSystem/config/fire-alarm/stand.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="">
+    站台报警
+  </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            mes: '1111'
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/system/iscsSystem/config/fire-alarm/stationHall.vue b/src/views/system/iscsSystem/config/fire-alarm/stationHall.vue
new file mode 100644
index 000000000..62d7d4b27
--- /dev/null
+++ b/src/views/system/iscsSystem/config/fire-alarm/stationHall.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="">
+    站厅报警
+  </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            mes: '1111'
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/system/iscsSystem/config/fire-alarm/system.vue b/src/views/system/iscsSystem/config/fire-alarm/system.vue
new file mode 100644
index 000000000..517ce8347
--- /dev/null
+++ b/src/views/system/iscsSystem/config/fire-alarm/system.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="">
+    系统报警
+  </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            mes: '1111'
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/system/iscsSystem/config/index.vue b/src/views/system/iscsSystem/config/index.vue
new file mode 100644
index 000000000..71a8357a0
--- /dev/null
+++ b/src/views/system/iscsSystem/config/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div style="height: 100%; width: 100%;">
+    <standFAS v-if="mode == 'standFAS'" />
+    <stationHallFAS v-if="mode == 'stationHallFAS'" />
+    <systemFAS v-if="mode == 'systemFAS'" />
+  </div>
+</template>
+
+<script>
+import standFAS from './fire-alarm/stand';
+import stationHallFAS from './fire-alarm/stationHall';
+import systemFAS from './fire-alarm/system';
+
+export default {
+    components: {
+        standFAS,
+        stationHallFAS,
+        systemFAS
+    },
+    props: {
+        mode: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            mes: '1111'
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/system/iscsSystem/index.vue b/src/views/system/iscsSystem/index.vue
index 71b30094a..be6afac12 100644
--- a/src/views/system/iscsSystem/index.vue
+++ b/src/views/system/iscsSystem/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="iscs-system-box">
-    <top-nav />
+    <top-nav @selectMode="selectMode" />
     <div class="content-box">
-      1111
+      <config-content :mode="mode" />
     </div>
     <bottom />
   </div>
@@ -11,16 +11,23 @@
 <script>
 import TopNav from './nav.vue';
 import bottom from './bottom.vue';
+import ConfigContent from './config/index';
 
 export default {
     components: {
         TopNav,
-        bottom
+        bottom,
+        ConfigContent
     },
     data() {
         return {
-            mes: '1111'
+            mode: 'standFAS'
         };
+    },
+    methods: {
+        selectMode(type) {
+            this.mode = type;
+        }
     }
 };
 </script>
@@ -34,6 +41,6 @@ export default {
     width: 100%;
     height: 100%;
     padding: 95px 0;
-    background: green;
+    background: #45607B;
 }
 </style>
diff --git a/src/views/system/iscsSystem/nav.vue b/src/views/system/iscsSystem/nav.vue
index 66528e2fb..a14831da1 100644
--- a/src/views/system/iscsSystem/nav.vue
+++ b/src/views/system/iscsSystem/nav.vue
@@ -1,6 +1,18 @@
 <template>
   <div class="nav-box">
-    111
+    <div class="nav-button-box">
+      <div v-for="(item, index) in navList" :key="index" class="nav-list-box" :class="{'active': selectIndex == index}" @click="selectTab(item, index)">{{ item.name }}</div>
+    </div>
+    <div class="nav-button-box">
+      <div v-for="(item, index) in navList[selectIndex].children" :key="index" class="nav-list-box" :class="{'active': selectChildIndex == index}" @click="selectChildren(item, index)">{{ item.name }}</div>
+    </div>
+    <div class="nav-button-box station-box1">
+      <div v-for="(item, index) in stationList" :key="index" class="station-box">
+        <div class="station-line" />
+        <div class="nav-list-box station-list-box" :class="{'active': selectStationIndex == index}" @click="selectStation(item, index)" />
+        <div class="station-name">{{ item.name }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,8 +20,197 @@
 export default {
     data() {
         return {
-            mes: '1111'
+            selectIndex: 0,
+            selectChildIndex: 0,
+            selectStationIndex: 0,
+            navList: [
+                {
+                    name: '火灾报警',
+                    type: 'FAS',
+                    children: [
+                        {
+                            name: '站台报警',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '站厅报警',
+                            type: 'stationHallFAS'
+                        },
+                        {
+                            name: '系统状态',
+                            type: 'systemFAS'
+                        }
+                    ]
+                }, {
+                    name: '机电',
+                    type: 'FAS',
+                    children: []
+                }, {
+                    name: '广播',
+                    type: 'FAS',
+                    children: [
+                        {
+                            name: '主画面',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '广播监听',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '计时一览',
+                            type: 'standFAS'
+                        }
+                    ]
+                }, {
+                    name: '乘客信息',
+                    type: 'FAS',
+                    children: [
+                        {
+                            name: '主画面',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: 'LCD屏控制',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '计时一览',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '车站网络',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '紧急发布一览',
+                            type: 'standFAS'
+                        }
+                    ]
+                }, {
+                    name: '闭路电视',
+                    type: 'FAS',
+                    children: [
+                        {
+                            name: '车站控制',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '车站时序',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '车站时序编辑',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '车站设备状态',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '中心设备状态',
+                            type: 'standFAS'
+                        }
+                    ]
+                }, {
+                    name: '屏蔽门',
+                    type: 'FAS',
+                    children: [
+                        {
+                            name: '屏蔽门',
+                            type: 'standFAS'
+                        }
+                    ]
+                }, {
+                    name: '售检票',
+                    type: 'FAS',
+                    children: [
+                        {
+                            name: '售检票',
+                            type: 'standFAS'
+                        }
+                    ]
+                }, {
+                    name: '门禁',
+                    type: 'FAS',
+                    children: [
+                        {
+                            name: '站厅层',
+                            type: 'standFAS'
+                        },
+                        {
+                            name: '站台层',
+                            type: 'standFAS'
+                        }
+                    ]
+                }, {
+                    name: '防淹门',
+                    type: 'FAS',
+                    children: []
+                }, {
+                    name: '网络状态',
+                    type: 'FAS',
+                    children: []
+                }
+            ],
+            stationList: [
+                {
+                    name: '会展中心站',
+                    id: 0
+                },
+                {
+                    name: '世纪大道站',
+                    id: 1
+                },
+                {
+                    name: '交通大学站',
+                    id: 2
+                },
+                {
+                    name: '市图书馆站',
+                    id: 3
+                },
+                {
+                    name: '中心医院站',
+                    id: 4
+                },
+                {
+                    name: '未来路站',
+                    id: 5
+                },
+                {
+                    name: '火车站',
+                    id: 6
+                },
+                {
+                    name: '人民广场站',
+                    id: 7
+                },
+                {
+                    name: '体育中心站',
+                    id: 8
+                }
+            ]
         };
+    },
+    methods: {
+        selectTab(item, index) { // 选择大分类
+            if (this.selectIndex != index) {
+                this.selectIndex = index;
+                this.selectChildIndex = 0;
+                if (item.children.length) {
+                    this.$emit('selectMode', item.children[0].type);
+                }
+            }
+        },
+        selectChildren(item, index) { // 选择子菜单
+            this.selectChildIndex = index;
+            this.$emit('selectMode', item.type);
+        },
+        selectStation(item, index) { // 选择子菜单
+            console.log(item);
+            this.selectStationIndex = index;
+        }
     }
 };
 </script>
@@ -22,5 +223,69 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
+
+    .nav-button-box{
+        display: table;
+        margin-top: 2px;
+        .nav-list-box{
+            width: 90px;
+            height: 28px;
+            text-align: center;
+            line-height: 28px;
+            background-color: #A7A7A7;
+            float: left;
+            font-size: 12px;
+            color: #4C4B6B;
+            margin-left: 5px;
+            margin-bottom: 2px;
+            box-sizing: border-box;
+            border-top: 2px solid #fff;
+            border-left: 2px solid #fff;
+            border-right: 2px solid #565656;
+            border-bottom: 2px solid #565656;
+            cursor: pointer;
+            &.active,
+            &:hover{
+                background: #EBB570;
+                border-top: 2px solid #795B31;
+                border-left: 2px solid #795B31;
+                border-right: 2px solid #fff;
+                border-bottom: 2px solid #fff;
+            }
+        }
+    }
+    .station-box1{
+        padding: 0 20px;
+        width: 100%;
+        display: flex;
+        padding-top: 12px;
+        height: 30px;
+    }
+    .station-box{
+        position: relative;
+        flex: 1;
+        .station-list-box{
+            width: 15px;
+            height: 15px;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-7px);
+        }
+        .station-name{
+            width: 100%;
+            text-align: center;
+            transform: translateY(-14px);
+            font-size: 12px;
+            color: #4C4B6B;
+        }
+        .station-line{
+            position: absolute;
+            top: 6px;
+            width: 100%;
+            height: 3px;
+            background: #A1D9DC;
+        }
+    }
+
 }
 </style>