From 42dc17d87e0a335aa8e3e9817d0a46e2ae79121b Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Fri, 21 Oct 2022 16:46:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=AE=A2=E6=B5=81=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/newMap/display/terminals/index.vue  |   6 +-
 .../terminals/largePassengerStrategy.vue      |   1 -
 .../display/terminals/largePassengerView.vue  | 130 ++++++++++++++++++
 .../newMap/display/terminals/terminalMenu.vue |   6 +
 4 files changed, 141 insertions(+), 2 deletions(-)
 create mode 100644 src/views/newMap/display/terminals/largePassengerView.vue

diff --git a/src/views/newMap/display/terminals/index.vue b/src/views/newMap/display/terminals/index.vue
index cc83e7286..b36eb5296 100644
--- a/src/views/newMap/display/terminals/index.vue
+++ b/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 {
diff --git a/src/views/newMap/display/terminals/largePassengerStrategy.vue b/src/views/newMap/display/terminals/largePassengerStrategy.vue
index b2e2c2439..503e73cc1 100644
--- a/src/views/newMap/display/terminals/largePassengerStrategy.vue
+++ b/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);
             });
diff --git a/src/views/newMap/display/terminals/largePassengerView.vue b/src/views/newMap/display/terminals/largePassengerView.vue
new file mode 100644
index 000000000..8281e2a90
--- /dev/null
+++ b/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>
diff --git a/src/views/newMap/display/terminals/terminalMenu.vue b/src/views/newMap/display/terminals/terminalMenu.vue
index 3f7384abe..468e2c43e 100644
--- a/src/views/newMap/display/terminals/terminalMenu.vue
+++ b/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
                     }
                 ]
             }