大客流视图代码调整

src/views/newMap/display/terminals/index.vue

@@ -14,6 +14,7 @@
     <dispatcher-loger v-else-if="picture === 'schedulingPlan'" ref="dispatcherLoger" />
     <!-- 大客流策略 -->
     <large-passenger-strategy v-else-if="picture === 'largePassengerStrategy'" ref="largePassengerStrategy" />
+    <large-passenger-view v-else-if="picture === 'largePassengerView'" ref="largePassengerView" />
 
     <terminal-menu v-if="menuShow" ref="terminalMenu" @pictureChange="pictureChange" @popupTerminalShow="popupTerminalShow" @loadingChange="loadingChange" />
   </div>
@@ -38,6 +39,8 @@ import TrafficTerminalWork from './trafficTerminalWork';
 import BigTrainRunplanManage from '@/views/bigTrainRunplanManage/index';
 import IscsSystem from '@/views/iscs/iscsSystemNew/index';
 import LargePassengerStrategy from './largePassengerStrategy';
+import LargePassengerView from './largePassengerView';
+
 export default {
     name: 'Index',
     components: {
@@ -54,7 +57,8 @@ export default {
         DigitalStand,
         BigTrainRunplanManage,
         IscsSystem,
-        LargePassengerStrategy
+        LargePassengerStrategy,
+        LargePassengerView
     },
     data() {
         return {

src/views/newMap/display/terminals/largePassengerStrategy.vue

@@ -150,7 +150,6 @@ export default {
         },
         '$store.state.map.mapDataLoadedCount': function (val) {
             const upRight = this.mapConfig.upRight;
-            debugger;
             const stationList = this.stationList.sort((a, b) => {
                 return parseInt(a.kmRange) - parseInt(b.kmRange);
             });

src/views/newMap/display/terminals/largePassengerView.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="bigLPFView">
+    <station-diagram ref="stationDiagram" @setSelected="setSelected" />
+    <div class="trainExample">
+      <div class="currentFlowDataName">{{ currentFlowDataName }}</div>
+      <div class="trainExampleL">
+        <div class="trainExampleName">车站 颜色图例</div>
+        <div class="eachTrainExample">
+          <span class="smallExample" />
+          <span class="eachTrainExampleName">0 ~ 400</span>
+        </div>
+        <div class="eachTrainExample">
+          <span class="mediumExample" />
+          <span class="eachTrainExampleName">400 ~ 800</span>
+        </div>
+        <div class="eachTrainExample">
+          <span class="bigExample" />
+          <span class="eachTrainExampleName">800及以上</span>
+        </div>
+      </div>
+      <div class="trainExampleR">
+        <div class="trainExampleName">列车 颜色图例</div>
+        <div class="eachTrainExample">
+          <span class="smallExample" />
+          <span class="eachTrainExampleName">0 ~ 400</span>
+        </div>
+        <div class="eachTrainExample">
+          <span class="mediumExample" />
+          <span class="eachTrainExampleName">400 ~ 1000</span>
+        </div>
+        <div class="eachTrainExample">
+          <span class="bigExample" />
+          <span class="eachTrainExampleName">1000及以上</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import StationDiagram from '../stationDiagram/index';
+import {mapGetters} from 'vuex';
+export default {
+    name:'LargePassengerView',
+    components: {
+        StationDiagram
+    },
+    data() {
+        return {
+            selected: null,
+            currentFlowDataName:''
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'signalList',
+            'trainWindowList'
+        ]),
+        mapData() {
+            return this.$store.state.map.map;
+        },
+        mapDevice() {
+            return this.$store.state.map.mapDevice;
+        }
+    },
+    watch: {
+        // 地图数据加载完毕
+        '$store.state.map.mapDataLoadedCount': function () {
+        },
+        '$store.state.map.initJlmapLoadedCount': function (val) {
+            this.handleDispatchWorkData();
+        }
+    },
+    methods:{
+        setSelected(val) {
+            this.selected = val;
+        },
+        handleDispatchWorkData() {
+            const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
+            const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
+            this.$jlmap.setMap(this.mapData, this.mapDevice, logicData, repaint);
+            this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
+            const list = [];
+            for (const key in this.mapDevice) {
+                list.push(this.mapDevice[key]);
+            }
+            this.$jlmap.updateShowStation(list);
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.bigLPFView{
+    width:100%;
+    height:100%;
+    position: relative;
+}
+.trainExample{
+    position: absolute;
+    width: 360px;
+    padding: 10px;
+    left: 20px;
+    bottom: 40px;
+    color: #fff;
+    border: 1px #fff solid;
+    border-radius: 5px;
+    background: #000;
+}
+.trainExampleName{margin-bottom: 10px;}
+.eachTrainExample{margin-top: 5px;}
+.smallExample,.mediumExample,.bigExample{
+    width: 50px;
+    height: 20px;
+    display: inline-block;
+}
+.eachTrainExampleName{
+    vertical-align: top;
+    line-height: 23px;
+    margin-left: 8px;
+}
+.smallExample{background: #29a909;}
+.mediumExample{background: #ffa500;}
+.bigExample{background: #F00;}
+.trainExampleL{
+    float: left;
+    display: inline-block;
+    margin-right: 35px;
+    margin-left: 10px;
+}
+</style>

src/views/newMap/display/terminals/terminalMenu.vue

@@ -101,6 +101,12 @@ export default {
                         code: 'largePassengerStrategy',
                         roleList: ['DISPATCHER'],
                         click: this.changePictureShow
+                    },
+                    {
+                        name: '大客流视图',
+                        code: 'largePassengerView',
+                        roleList: ['DISPATCHER'],
+                        click: this.changePictureShow
                     }
                 ]
             }