代码调整

src/views/newMap/display/index.vue

@@ -5,7 +5,8 @@
       <map-system-draft ref="mapCanvas" @back="back" />
     </transition>
     <simulation-menu ref="simulationMenu" :mode="mode" />
-
+    <!-- 可切换的终端类型 -->
+    <terminal-list ref="terminalList"/>
   </div>
 </template>
 <script>
@@ -13,6 +14,7 @@
 import { mapGetters } from 'vuex';
 import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
 import SimulationMenu from './simulationMenu';
+import TerminalList from './terminalList';
 import { clearSimulation, getSimulationInfoNew} from '@/api/simulation';
 import { loadMapDataById } from '@/utils/loaddata';
 import { EventBus } from '@/scripts/event-bus';
@@ -22,7 +24,8 @@ export default {
     name: 'DisplayDraft',
     components: {
         MapSystemDraft,
-        SimulationMenu
+        SimulationMenu,
+        TerminalList
     },
     data() {
         return {

src/views/newMap/display/terminalList.vue

@@ -0,0 +1,91 @@
+<template>
+  <div v-if="isShow" class="terminalList">
+    <div v-for="(eachTerminal,index) in terminalList" :key="index" :class="active==index?'eachTerminal active':'eachTerminal'" @click="eachTerminal.click(index)">{{ eachTerminal.name }}</div>
+  </div>
+</template>
+<script>
+export default {
+    name:'TerminalList',
+    data() {
+        return {
+            terminalList:[],
+            active:0,
+            terminalMap:{
+                'datie':{
+                    '01':[
+                        {name:'现地工作站', code:'localWork', click:this.noEvent},
+                        {name:'车务终端', code:'trafficTerminal', click:this.noEvent},
+                        {name:'车务管理终端', code:'trafficManageTerminal', click:this.noEvent}
+                    ],
+                    '02':[
+                        {name:'行调工作站', code:'dispatchWork', click:this.noEvent},
+                        {name:'调度计划', code:'schedulingPlan', click:this.noEvent},
+                        {name:'调度命令', code:'dispatchingCommand', click:this.noEvent}
+                    ]
+                },
+                'subway':{
+                    '01':[],
+                    '02':[]
+                }
+            }
+        };
+    },
+    computed:{
+        // 设备数据不显示
+        isShow() {
+            return !this.$route.query.projectDevice;
+        },
+        // 线路类型
+        lineCode() {
+            return this.$route.query.lineCode;
+        },
+        // 大铁线路
+        datie() {
+            return ['16', '19'].includes(this.$route.query.lineCode);
+        },
+        prdType() {
+            return this.$route.query.prdType;
+        }
+    },
+    mounted() {
+        let currentType = '';
+        if (this.datie) {
+            currentType = 'datie';
+        } else {
+            currentType = 'subway';
+        }
+        this.terminalList = this.terminalMap[currentType][this.prdType];
+    },
+    methods:{
+        noEvent(index) {
+            this.active = index;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.terminalList{
+    position: absolute;
+    right: 0px;
+    top: 45%;
+    width: 111px;
+    padding-left: 1px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-right: 1px;
+    background: #fff;
+    border-radius: 5px 0px 0px 5px;
+}
+.eachTerminal{
+    padding: 8px 0px;
+    text-align: center;
+    border-bottom: 1px #dedede solid;
+    font-size: 14px;
+    cursor: pointer;
+    background: #f5f7fa;
+}
+.eachTerminal.active{
+    color:#409eff;
+    background: #ffff;
+}
+</style>