From 9f205b77668ad9e46e23f7101752d8df38223b38 Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Fri, 2 Dec 2022 15:08:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=A1=8C=E5=9B=BE=E7=BC=96=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/menus/addPlanningTrain.vue     | 172 ++++
 .../diagramEdit/components/menus/addTask.vue  | 456 +++++++++
 .../components/menus/components/dataTable.vue | 233 +++++
 .../components/menus/deleteTask.vue           |  97 ++
 .../components/menus/duplicateTrain.vue       | 117 +++
 .../components/menus/editPlanName.vue         | 116 +++
 .../components/menus/editPlanningTrain.vue    | 365 +++++++
 .../components/menus/gernaratePlanTrain.vue   | 354 +++++++
 .../components/menus/modifyService.vue        | 169 ++++
 .../menus/modifyingStationIntervalTime.vue    | 293 ++++++
 .../menus/modifyingStationStopTime.vue        | 134 +++
 .../components/menus/modifyingTask.vue        | 487 ++++++++++
 .../components/menus/movePlaningTrain.vue     | 107 ++
 .../diagramEdit/components/menus/offLine.vue  |  92 ++
 .../components/menus/systermOut.vue           |  82 ++
 .../components/menus/taskDialog.vue           |  86 ++
 .../routingoperate/importRouteOperate.vue     | 267 +++++
 .../components/routingoperate/preview.vue     |  62 ++
 .../components/routingoperate/routeConfig.vue | 753 +++++++++++++++
 .../components/routingoperate/routeMap.vue    | 209 ++++
 .../routingoperate/routeOperate.vue           | 284 ++++++
 .../routingoperate/runplanConfig.vue          | 214 ++++
 .../diagramEdit/components/schedule.vue       | 848 ++++++++++++++++
 .../display/terminals/diagramEdit/index.vue   | 258 +++++
 .../display/terminals/diagramEdit/menuBar.vue | 912 ++++++++++++++++++
 .../diagramEdit/menus/createEmptyPlan.vue     | 291 ++++++
 .../diagramEdit/menus/parameter/baseLoop.vue  |  62 ++
 .../menus/parameter/baseParameter.vue         |  78 ++
 .../menus/parameter/baseParkingDepot.vue      |  42 +
 .../menus/parameter/baseRouting.vue           |  49 +
 .../menus/parameter/baseStation.vue           |  42 +
 .../diagramEdit/menus/parameter/index.vue     | 102 ++
 .../parameter/modifyingDepotProperty.vue      |  82 ++
 .../parameter/modifyingStationProperty.vue    | 127 +++
 .../modifyingStationStandProperty.vue         |  88 ++
 .../terminals/diagramEdit/statusBar.vue       | 253 +++++
 .../terminals/diagramEdit/titleBar.vue        |  74 ++
 src/views/newMap/display/terminals/index.vue  |   5 +-
 .../newMap/display/terminals/terminalMenu.vue |   6 +
 .../publish/publishMap/editSubsystem.vue      |   9 +-
 40 files changed, 8473 insertions(+), 4 deletions(-)
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/addPlanningTrain.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/addTask.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/components/dataTable.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/deleteTask.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/duplicateTrain.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanName.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanningTrain.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/gernaratePlanTrain.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/modifyService.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationIntervalTime.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationStopTime.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingTask.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/movePlaningTrain.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/offLine.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/systermOut.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/menus/taskDialog.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/routingoperate/importRouteOperate.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/routingoperate/preview.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeConfig.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeMap.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeOperate.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/routingoperate/runplanConfig.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/components/schedule.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/index.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menuBar.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/createEmptyPlan.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseLoop.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParameter.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParkingDepot.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseRouting.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseStation.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/index.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingDepotProperty.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationProperty.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationStandProperty.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/statusBar.vue
 create mode 100644 src/views/newMap/display/terminals/diagramEdit/titleBar.vue

diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/addPlanningTrain.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/addPlanningTrain.vue
new file mode 100644
index 000000000..9865b6ddd
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/addPlanningTrain.vue
@@ -0,0 +1,172 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool add-planning-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="300px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-form ref="form" :rules="rules" :model="formModel" label-width="100px" size="medium" @submit.native.prevent>
+      <el-form-item prop="serviceNumber" :label="$t('planMonitor.serviceNumber2')+$t('global.colon')" :required="true">
+        <el-input v-model="formModel.serviceNumber" type="text" size="mini" maxlength="3" minlength="2" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { checkServiceNumberExist } from '@/api/runplan';
+
+export default {
+    name: 'AddPlanningTrain',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            formModel:{
+                serviceNumber: ''
+            },
+            rules:{
+                serviceNumber:[
+                    {required: true, validator: this.validateServiceNumber, trigger: 'blur'},
+                    {required: true, validator: this.validateServiceNo, trigger: 'change'}
+                ]
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.addPlanTrain');
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow() {
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        validateServiceNo(rule, value, callback) {
+            if (typeof value == 'string' && value.trim().length == 0) {
+                return callback(new Error('请填写服务号'));
+            } else {
+                const serviceNumberList = Object.keys(this.$store.state.runPlan.editData);
+                if (serviceNumberList.includes(value)) {
+                    // new Error('该服务号已存在')
+                    return callback();
+                } else {
+                    return callback();
+                }
+            }
+        },
+        validateServiceNumber(rule, value, callback) {
+            if (typeof value == 'string' && value.trim().length == 0) {
+                return callback(new Error('请填写服务号'));
+            } else {
+                const figuresOfServiceNumber = this.$store.state.map.mapConfig.figuresOfServiceNumber;
+                let newValue = parseInt(value);
+                if (newValue) {
+                    // if (newValue > 0 & newValue < 9) {
+                    //     newValue = '00' + newValue;
+                    // } else if (newValue > 10 & newValue < 99) {
+                    //     newValue = '0' + newValue;
+                    // }
+                    if (newValue.toString().length > figuresOfServiceNumber) {
+                        return callback(new Error('该服务号长度最多为' + figuresOfServiceNumber + '位'));
+                    } else {
+                        newValue = newValue.toString().padStart(figuresOfServiceNumber, '0');
+                        this.formModel.serviceNumber = newValue;
+                        return callback();
+                    }
+
+                    // const serviceNumberList = Object.keys(this.$store.state.runPlan.editData);
+                    // if (serviceNumberList.includes(value)) {
+                    //     // new Error('该服务号已存在')
+                    //     return callback();
+                    // } else {
+                    //     return callback();
+                    // }
+                } else {
+                    this.formModel.serviceNumber = '';
+                }
+
+            }
+        },
+        handleCommit() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    if (this.$route.query.planId || this.loadRunPlanId) {
+                        checkServiceNumberExist({ planId: this.$route.query.planId || this.loadRunPlanId, serviceNumber: this.formModel.serviceNumber }).then(resp => {
+                            if (resp.data) {
+                                this.$emit('dispatchDialog', {
+                                    name: 'offLine',
+                                    params: {
+                                        type: 'warning',
+                                        operate: 'AddPlanningTrain',
+                                        width: 460,
+                                        message: this.$t('tip.serviceNumberExistHint')
+                                    }
+                                });
+
+                                this.doClose();
+                            } else {
+                                this.handleConfirm(true);
+                            }
+                        });
+                    } else {
+                        this.$messageBox(this.$t('tip.chooseToOpenTheRunGraph'));
+                    }
+                }
+            });
+            // if (this.serviceNumber.length >= 2 && this.serviceNumber.length <= 3) {
+            // } else {
+            //     this.$messageBox('长度在二到三位');
+            // }
+        },
+        handleConfirm(isNew = false) {
+            this.doClose();
+            this.$store.dispatch('runPlan/addServiceNumber', this.formModel.serviceNumber);
+            this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber: this.formModel.serviceNumber, isNew:isNew } });
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-input {
+            width: 120px;
+        }
+    }
+	.add-planning-train{
+		/deep/ {
+			.el-dialog__body{
+				padding: 10px 20px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/addTask.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/addTask.vue
new file mode 100644
index 000000000..367fc2e4c
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/addTask.vue
@@ -0,0 +1,456 @@
+<template>
+  <div>
+    <el-row>
+      <!-- <el-col :span="3" style="height: 28px;line-height: 28px;">
+        <el-radio v-model="addModel.forward" :label="true">{{ $t('planMonitor.addToTheFront') }}</el-radio>
+      </el-col> -->
+      <el-col :span="3" style="margin-left: 10px;height: 28px;line-height: 28px;">
+        <span>{{ $t('planMonitor.tripNumber')+$t('global.colon') }}</span>
+      </el-col>
+      <el-col :span="5">
+        <el-select v-model="addModel.tripNumber" size="mini" :placeholder="this.$t('global.choose')" disabled>
+          <el-option
+            v-for="item in tripNumberList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-col>
+      <el-col :span="3" style="margin-left: 20px;height: 28px;line-height: 28px;">
+        <span>{{ $t('global.startTime')+$t('global.colon') }}</span>
+      </el-col>
+      <el-col :span="5">
+        <el-time-picker v-model="addModel.startTime" size="mini" value-format="HH:mm:ss" :clearable="false" :picker-options="{selectableRange:'02:00:00-23:59:59'}" />
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 5px;height: 28px;line-height: 28px;">
+      <!-- <el-col :span="3">
+        <el-radio v-model="addModel.forward" :label="false">{{ $t('planMonitor.addToTheEnd') }}</el-radio>
+      </el-col> -->
+      <!-- <el-col :span="3" style="margin-left: 10px;height: 28px;line-height: 28px;">
+        <span>{{ $t('planMonitor.defaultStopTime') }}</span>
+      </el-col>
+      <el-col :span="5">
+        <el-input-number v-model="defaultStopTime" placeholder="请输入时间" size="mini" :controls="false" :min="0" /> -->
+      <!-- <el-select v-model="defaultStopTime" size="mini" :placeholder="this.$t('global.choose')">
+          <el-option
+            v-for="item in defaultStopTimeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select> -->
+      <!-- </el-col> -->
+      <el-col :span="3" style="margin-left:10px;height: 28px;line-height: 28px;">
+        <!-- {{ $t('planMonitor.defaultRunLevel') }} -->
+        <span>运行等级</span>
+      </el-col>
+      <el-col :span="5">
+        <el-select v-model="defaultSpeedLevel" size="mini" :placeholder="this.$t('global.choose')">
+          <el-option
+            v-for="item in defaultSpeedLevelList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-col>
+
+    </el-row>
+    <el-row style="margin-bottom: 5px;">
+      {{ $t('planMonitor.crossRailway')+$t('global.colon') }}
+    </el-row>
+    <el-row>
+      <el-table
+        v-loading="tableLoading"
+        :data="routingList"
+        border
+        highlight-current-row
+        :height="230"
+        @row-click="handleClick"
+      >
+        <el-table-column
+          prop="startStationCode"
+          :label="this.$t('planMonitor.startingStation')"
+          :filters="startStationFilters"
+          :filter-method="filterStartStation"
+          column-key="startStationCode"
+        >
+          <template slot-scope="scope">
+            {{ formatName(scope.row.startStationCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="startSectionCode" :label="this.$t('planMonitor.startingSection')" width="95">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.startSectionCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="endStationCode"
+          :label="this.$t('planMonitor.terminal')"
+          :filters="endStationFilters"
+          :filter-method="filterEndStation"
+          column-key="endStationCode"
+        >
+          <template slot-scope="scope">
+            {{ formatName(scope.row.endStationCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="endSectionCode" :label="this.$t('planMonitor.endingSection')" width="95">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.endSectionCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="routingType" label="交路类型">
+          <template slot-scope="scope">
+            {{ routingTypeMap[scope.row.routingType] }}
+          </template>
+        </el-table-column>
+        <el-table-column label="类别" width="240">
+          <template slot-scope="scope">
+            {{ `${frontMap[String(scope.row.startTbFront)]} - ${frontMap[String(scope.row.endTbFront)]}` }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remarks" width="auto" :label="this.$t('planMonitor.description')" />
+      </el-table>
+    </el-row>
+    <el-row style=" margin-bottom: 5px;margin-top: 10px;">
+      {{ '经停转换轨 / 站台轨'+$t('global.colon') }}
+    </el-row>
+    <el-row>
+      <el-table v-loading="routeLoading" :data="addModel.arriveConfigList" border :height="230">
+        <el-table-column prop="stationCode" :label="this.$t('planMonitor.station')" width="160">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.stationCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="sectionCode" :label="this.$t('planMonitor.section')" width="95">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.sectionCode) }}
+          </template>
+        </el-table-column>
+        <!-- prop="arriveTime"  -->
+        <el-table-column :label="this.$t('planMonitor.arriveTime')" width="100px">
+          <template v-if="scope.$index!=0" slot-scope="scope">
+            {{ scope.row.arriveTime }}
+          </template>
+        </el-table-column>
+        <!-- prop="stopTime"  -->
+        <el-table-column :label="this.$t('planMonitor.stopTime')" width="100px">
+          <template v-if="scope.$index!=0&&scope.$index!=addModel.arriveConfigList.length-1" slot-scope="scope">
+            {{ scope.row.stopTime+'s' }}
+            <!-- <el-input v-model="scope.row.stopTime" placeholder="请输入时间" size="mini" @input="changeStopTime(scope.$index, scope.row.stopTime)" /> -->
+          </template>
+        </el-table-column>
+        <el-table-column :label="this.$t('planMonitor.departureTime')" width="100px">
+          <template v-if="scope.$index!=addModel.arriveConfigList.length-1" slot-scope="scope">
+            {{ scope.row.departureTime }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="this.$t('planMonitor.runLevel')">
+          <template slot-scope="scope">
+            <span style="font-size:13px;">{{ scope.row.speedLevel }}</span>
+            <span>{{ '('+scope.row.speedLevelTime+'s)' }}</span>
+            <!-- <el-input v-model="scope.row.speedLevelTime" style="width:70px" placeholder="请输入运行等级" size="mini" @input="changeSpeedLevelTime(scope.$index, scope.row.speedLevelTime)" /> -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <!-- <el-row>
+      <el-col :offset="16">
+        <el-checkbox v-model="showDefault">{{ $t('planMonitor.showDefaultStopTimeAndRunLevel') }}</el-checkbox>
+      </el-col>
+    </el-row> -->
+    <div style="text-align:center;margin-top:15px;">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listUserRoutingData, addPlanTrip, getMapStationRunUser, getStationStopTime, querySectionListByRouting } from '@/api/runplan';
+import { getRunplanConfig } from '@/api/jmap/mapdraft';
+import { formatTime, formatName } from '@/jmapNew/theme/parser/util';
+
+export default {
+    name: 'AddTask',
+    components: {
+    },
+    data() {
+        return {
+            tableLoading:false,
+            routeLoading:false,
+            isPlan: false,
+            loadRunPlanId:'',
+            // showDefault: true,
+            stopStationMap: {},
+            stopTimeMap:{},
+            params: {},
+            routingList: [],
+            startStationFilters:[],
+            endStationFilters:[],
+            // defaultStopTime: '30',
+            defaultSpeedLevel: 'l3',
+            reentryData: {},
+            addModel: {
+                routingCode: '',
+                endStationCode: '',
+                startStationCode: '',
+                startTime: '02:00:00',
+                endTime: '',
+                arriveConfigList: [],
+                tripNumber: '',
+                planId: '',
+                serviceNumber: '',
+                startTbFront: false,
+                endTbFront: false
+            },
+            tripNumberList: [{ value: '', label: this.$t('planMonitor.automatic') }],
+            defaultSpeedLevelList: [
+                { value: 'l1', label: '等级一' },
+                { value: 'l2', label: '等级二' },
+                { value: 'l3', label: '等级三'},
+                { value: 'l4', label: '等级四' },
+                { value: 'l5', label: '等级五' }
+            ],
+            routingTypeMap: {
+                OUTBOUND: '出库',
+                INBOUND: '入库',
+                LOOP: '环路'
+            },
+            frontMap: {
+                'true': '折返轨(站前)',
+                'false': '折返轨(站后)',
+                'undefined': '转换轨',
+                'null': '转换轨'
+            }
+        };
+    },
+    watch: {
+        'addModel.routingCode': function (val) {
+            if (val) {
+                this.computedDetailList('routingCode');
+            }
+        },
+        'addModel.startTime': function () {
+            this.computedDetailList();
+        },
+        'defaultSpeedLevel': function () {
+            this.computedDetailList('defaultSpeedLevel');
+        }
+    },
+    methods: {
+        loadInitData(params) {
+            this.loadRunPlanId = params.loadRunPlanId;
+            this.isPlan = params.isPlan;
+            this.addModel.serviceNumber = params.serviceNumber;
+            this.addModel.planId = this.$route.query.planId || this.loadRunPlanId;
+            this.addModel.arriveConfigList = [];
+            const mapId = this.$route.query.mapId;
+
+            if (mapId) {
+                this.tableLoading = true;
+                getRunplanConfig(mapId).then(resp => {
+                    const data = resp.data;
+                    this.reentryData = data.config.reentryData;
+                });
+
+                listUserRoutingData(mapId).then(resp => {
+                    this.routingList = resp.data;
+                    const startStationFilterMap = {};
+                    const endStationFilterMap = {};
+                    this.routingList.forEach(routing=>{
+                        if (!startStationFilterMap[routing.startStationCode]) {
+                            startStationFilterMap[routing.startStationCode] = {text:formatName(routing.startStationCode), value:routing.startStationCode};
+                        }
+                        if (!endStationFilterMap[routing.endStationCode]) {
+                            endStationFilterMap[routing.endStationCode] = {text:formatName(routing.endStationCode), value:routing.endStationCode};
+                        }
+                    });
+                    this.startStationFilters = Object.values(startStationFilterMap).sort((a, b)=>{
+                        const startStationA = this.$store.getters['map/getDeviceByCode'](a.value);
+                        const startStationB = this.$store.getters['map/getDeviceByCode'](b.value);
+                        return startStationA.kmRange - startStationB.kmRange;
+                    });
+                    this.endStationFilters = Object.values(endStationFilterMap).sort((a, b)=>{
+                        const endStationA = this.$store.getters['map/getDeviceByCode'](a.value);
+                        const endStationB = this.$store.getters['map/getDeviceByCode'](b.value);
+                        return endStationA.kmRange - endStationB.kmRange;
+                    });
+                    this.tableLoading = false;
+                });
+
+                getMapStationRunUser(mapId).then(resp =>{
+                    const list = resp.data.list;
+                    list.forEach(elem => {
+                        this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
+                    });
+                    getStationStopTime(mapId).then(response=>{
+                        const stopTimeList = response.data.list;
+                        stopTimeList.forEach(element=>{
+                            this.stopTimeMap[element.stationCode] = {parkingTime:element.parkingTime};
+                        });
+                    });
+                });
+            }
+        },
+        filterStartStation(value, row) {
+            return row.startStationCode == value;
+        },
+        filterEndStation(value, row) {
+            return row.endStationCode == value;
+        },
+        doClose() {
+            this.$emit('doClose');
+        },
+        formatName(code) {
+            return formatName(code);
+        },
+        computedTimeByString(timeStr) {
+            const bTime = +new Date(`2019-01-01 00:00:00`);
+            const eTime = +new Date(`2019-01-01 ${timeStr}`);
+            return Number(eTime) - Number(bTime);
+        },
+        compuntedRunTime(list, index, runLevel) {
+            let runTime = 0;
+
+            if ((index == 0 && String(this.addModel.startTbFront) == false) ||
+				(index == list.length - 1 && String(this.addModel.endTbFront) == false)) {
+                return 0;
+            }
+
+            if (index < list.length - 1) {
+                const stopStationObj = this.stopStationMap[[list[index].sectionCode, list[index + 1].sectionCode].toString()];
+                if (stopStationObj) {
+                    if (stopStationObj.runPlanLevelVO) {
+                        runTime = parseInt(stopStationObj.runPlanLevelVO[runLevel]);
+                    } else if (stopStationObj[runLevel]) {
+                        runTime = parseInt(stopStationObj[runLevel]);
+                    } else {
+                        this.$messageBox(this.$t('planMonitor.addTaskHint1') + stopStationObj.startSectionCode + this.$t('planMonitor.addTaskHint2') + stopStationObj.endSectionCode + this.$t('planMonitor.addTaskHint3'));
+                    }
+                }
+            }
+
+            return runTime;
+        },
+        computedDetailList(type = null) {
+            if (this.addModel.routingCode) {
+                let tempTime = this.computedTimeByString(this.addModel.startTime) / 1000;
+                const list = Object.assign([], this.addModel.arriveConfigList);
+                const runLevel = this.defaultSpeedLevel || 'l1'; // 默认等级三
+
+                list.forEach((elem, index) => {
+                    if (type == 'routingCode') {
+                        if (index == 0 || index == list.length - 1) {
+                            elem.stopTime = 0;
+                        } else if (this.stopTimeMap[elem.stationCode]) {
+                            elem.stopTime = this.stopTimeMap[elem.stationCode].parkingTime;
+                        } else {
+                            elem.stopTime = 0;
+                        }
+                    }
+
+                    tempTime = tempTime || this.computedTimeByString('23:59:59') / 1000 + 1;
+                    elem.arriveTime = formatTime(tempTime);
+                    if (index == list.length - 1 && String(this.addModel.endTbFront) == 'true') {
+                        const data = this.reentryData[list[index].stationCode] || {};
+                        elem.departureTime = formatTime(tempTime + elem.stopTime + data.tbFront || 0);
+                    } else {
+                        elem.departureTime = formatTime(tempTime + elem.stopTime);
+                    }
+
+                    const runLevelObj = this.defaultSpeedLevelList.find(speedLevel=>{ return speedLevel.value == runLevel; });
+                    const realRunlevel = this.compuntedRunTime(list, index, runLevel);
+
+                    elem.speedLevelTime = realRunlevel;
+                    elem.speedLevel = runLevelObj.label;
+
+                    let fronTime = 0;
+                    if (index == 0 && String(this.addModel.startTbFront) == 'false') {
+                        const data = this.reentryData[elem.stationCode] || {};
+                        fronTime = data.tbTo || 0;
+                    } else if (index == list.length - 2 && String(this.addModel.endTbFront) == 'false') {
+                        const data = this.reentryData[list[index + 1].stationCode] || {};
+                        fronTime = data.tbTo || 0;
+                    } else if (index == list.length - 1 && String(this.addModel.endTbFront) == 'true') {
+                        const data = this.reentryData[list[index].stationCode] || {};
+                        fronTime = data.tbFront || 0;
+                    }
+
+                    tempTime = tempTime + fronTime + elem.stopTime + elem.speedLevelTime;
+                });
+
+                this.addModel.endTime = formatTime(tempTime - list[list.length - 1].stopTime);
+            }
+        },
+        handleClick(row, column, event) {
+            this.routeLoading = true;
+            const arriveConfigList = [];
+            querySectionListByRouting(row.id).then(resp=>{
+                resp.data.forEach((parkSectionCode, index)=>{
+                    arriveConfigList.push({arriveTime:'', departureTime:'', sectionCode:parkSectionCode.sectionCode, stationCode:parkSectionCode.stationCode});
+                });
+                this.$set(this.addModel, 'arriveConfigList', arriveConfigList);
+                this.addModel.startStationCode = row.startStationCode;
+                this.addModel.endStationCode = row.endStationCode;
+                this.addModel.endSectionCode = row.endSectionCode;
+                this.addModel.startSectionCode = row.startSectionCode;
+                this.addModel.routingCode = row.id;
+                this.addModel.startTbFront = row.startTbFront;
+                this.addModel.endTbFront = row.endTbFront;
+                this.computedDetailList('routingCode');
+                this.routeLoading = false;
+            });
+        },
+        handleCommit() {
+            if (this.addModel.arriveConfigList.length > 0) {
+                if (this.isPlan) {
+                // 计划添加任务
+                    this.$emit('dispatchOperate', { dialogName: 'editPlanningTrain', operate: 'handleConfirmAddTask', params: Object.assign({}, this.addModel) });
+                    this.addModel.routingCode = '';
+                } else {
+                // 直接添加任务
+                    delete this.addModel.tripNumber;
+                    addPlanTrip(this.addModel).then(resp => {
+                    // this.$emit('dispatchOperate', {
+                    // 	dialogName: 'openRunPlan', operate: 'loadRunPlanData', params: Object.assign({refresh: true}, this.$route.query)
+                    // });
+                        this.$emit('refresh');
+                        this.$message.success(this.$t('tip.addTaskSuccessfully'));
+                    }).catch((error) => {
+                        this.$messageBox(this.$t('tip.addTaskFailed') + ': ' + error.message);
+                    });
+                }
+                this.doClose();
+            } else {
+                this.$messageBox('请选择交路');
+            }
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-row {
+            margin-bottom: 5px !important;
+        }
+    }
+
+	.add-task{
+		/deep/ {
+			.el-dialog__body{
+				padding: 0 20px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/components/dataTable.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/components/dataTable.vue
new file mode 100644
index 000000000..ede0b7757
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/components/dataTable.vue
@@ -0,0 +1,233 @@
+<template>
+  <div v-if="show">
+    <template v-if="maxmini">
+      <div class="nav">
+        <div class="title">{{ config.title }}</div>
+        <el-tooltip class="item" effect="dark" placement="bottom">
+          <div slot="content" v-html="config.handleTips" />
+          <div class="el-icon-info handleTips" />
+        </el-tooltip>
+        <!-- <div v-show="config.showClose" class="cls-status" @click="touch('Close')"><span /></div>
+        <div class="min-status" @click="touch('Minim')"><span /></div> -->
+      </div>
+      <el-table
+        ref="table"
+        :data="config.data"
+        :highlight-current-row="config.highlightCurrentRow"
+        class="table_box"
+        :show-header="config.showHeader"
+        border
+        @current-change="handleChange"
+        @cell-dblclick="handleModify"
+      >
+        <template v-for="(item,index) in config.columns">
+          <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" />
+        </template>
+      </el-table>
+    </template>
+    <template v-else>
+      <div class="nav">
+        <!-- <div class="title">{{ config.title }}</div> -->
+        <!-- <div class="max-status" @click="touch('Maxim')"><span /></div> -->
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'DataTable',
+    props: {
+        config: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            show: true,
+            maxmini: true,
+            touchStrategy: {
+                'Close': [false, true],
+                'Minim': [true, false],
+                'Maxim': [true, true]
+            }
+        };
+    },
+    methods: {
+        handleChange(row) {
+            if (this.config.handleChange) {
+                this.config.handleChange(row);
+            }
+        },
+        handleModify(row) {
+            if (this.config.handleModify) {
+                this.config.handleModify(row);
+            }
+        },
+        setCurrentRow(row) {
+            this.$refs.table.setCurrentRow(row);
+        },
+        touch(operate) {
+            this.$nextTick(() => {
+                [this.show, this.maxmini] = this.touchStrategy[operate];
+                this.$emit('touch', this.maxmini);
+            });
+        }
+    }
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+    $height: 20px;
+    $width: 20px;
+
+    .nav {
+        display: table;
+        float: right;
+        width: 100%;
+        color: #0000;
+        background: -webkit-linear-gradient(#FDFDFE, #B1CBF3);
+        background: -o-linear-gradient(#FDFDFE, #B1CBF3);
+        background: -moz-linear-gradient(#FDFDFE, #B1CBF3);
+        background: linear-gradient(#FDFDFE, #B1CBF3);
+        border: 1px solid #B6BCCC !important;
+        border-bottom: 2px solid #B6BCCC !important;
+        list-style: none;
+        height: 20px;
+        line-height: 20px;
+        .title{
+          float: left;
+          color: #000;
+          font-size: 13px;
+          line-height: 21px;
+          padding-left: 10px;
+        }
+    }
+    .table_box{
+        height: calc(100% - 20px);
+        overflow: auto;
+    }
+    .handleTips{
+        font-size: 16px;
+        color: #316AC5;
+        margin-left: 0px;
+        margin-top: 2px;
+        display: table;
+        cursor: pointer;
+    }
+
+    /deep/ {
+        .el-table--border th.gutter {
+            background: #EBEADB !important;
+        }
+
+        .el-table {
+            width: 100%;
+
+            th.is-leaf {
+                padding: 0px 0;
+                background: #EBEADB;
+                border-right: none !important;
+                border-left: 1px solid #D1CDBD !important;
+                border-top: 1px solid #D1CDBD !important;
+                border-bottom: 1px inset #D1CDBD !important;
+                color: #000;
+
+                .cell {
+                    height: $height;
+                    line-height: $height;
+                }
+            }
+
+            td {
+                padding: 0px 0;
+
+                .cell {
+                    height: $height;
+                    line-height: $height;
+                    font-size: smaller !important;
+                }
+
+            }
+
+            .current-row>td {
+                background: #316AC5 !important;
+                color: #fff !important;
+            }
+        }
+
+        .cls-status {
+            float: right;
+            width: 12px;
+            height: 100%;
+            line-height: 100%;
+            margin-left: 5px;
+            cursor: pointer;
+
+            span {
+                display: inline-block;
+                content: '/';
+                background: black;
+                width: 2px;
+                height: 12px;
+                vertical-align: middle;
+                transform: rotate(45deg);
+            }
+
+            span::after {
+                display: block;
+                content: '/';
+                background: black;
+                width: 2px;
+                height: 12px;
+                transform: rotate(-90deg);
+            }
+        }
+
+        .min-status {
+            float: right;
+            width: 20px;
+            height: 100%;
+            line-height: 100%;
+            cursor: pointer;
+
+            span {
+                display: inline-block;
+                content: '-';
+                background: black;
+                width: 2px;
+                height: 12px;
+                vertical-align: middle;
+                transform: rotate(-90deg);
+            }
+        }
+
+        .max-status {
+            float: right;
+            width: 20px;
+            height: 100%;
+            line-height: 100%;
+            cursor: pointer;
+
+            span {
+                display: inline-block;
+                content: '';
+                background: black;
+                width: 2px;
+                height: 12px;
+                transform: rotate(0deg);
+            }
+
+            span::after {
+                display: block;
+                content: '';
+                background: black;
+                width: 2px;
+                height: 12px;
+                transform: rotate(90deg);
+            }
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/deleteTask.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/deleteTask.vue
new file mode 100644
index 000000000..229d0ea3e
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/deleteTask.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <el-row>
+      <el-radio v-model="model.deleteBefore" :label="true">{{ $t('planMonitor.deleteAllPreviousTasks') }}</el-radio>
+    </el-row>
+    <el-row>
+      <el-radio v-model="model.deleteBefore" :label="false">{{ $t('planMonitor.deleteAllSubsequentTasks') }}</el-radio>
+    </el-row>
+    <div style="text-align:center;margin-top:15px;">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { deletePlanTrip } from '@/api/runplan';
+
+export default {
+    name: 'DeleteTask',
+    components: {
+    },
+    data() {
+        return {
+            isPlan: false,
+            loadRunPlanId:'',
+            model: {
+                routingCode: '',
+                deleteBefore: false,
+                tripNumber: '',
+                serviceNumber: ''
+            }
+        };
+    },
+    mounted() {
+    },
+    methods: {
+        loadInitData(params) {
+            this.loadRunPlanId = params.loadRunPlanId;
+            this.isPlan = params.isPlan;
+            this.model.taskIndex = params.taskIndex;
+            this.model.tripNumber = params.tripNumber;
+            this.model.serviceNumber = params.serviceNumber;
+            this.model.routingCode = params.routingCode;
+        },
+        doClose() {
+            this.$emit('doClose');
+        },
+        handleCommit() {
+            if (this.isPlan) {
+                // 计划删除任务
+                this.$emit('dispatchOperate', { dialogName: 'editPlanningTrain', operate: 'handleConfirmDeleteTask', params: this.model });
+            } else {
+                // 直接删除任务
+                const model = {
+                    planId: this.$route.query.planId || this.loadRunPlanId,
+                    SDTNumber: `${this.model.serviceNumber}${this.model.tripNumber}`,
+                    deleteBefore: this.model.deleteBefore
+                };
+
+                deletePlanTrip(model).then(resp => {
+                    this.$store.dispatch('runPlan/setSelected', {});
+                    this.$store.dispatch('runPlan/setDraftSelected', {});
+                    this.$emit('refresh');
+                    // this.$emit('dispatchOperate', {
+                    // 	dialogName: 'openRunPlan', operate: 'loadRunPlanData', params: Object.assign({refresh: true}, this.$route.query)
+                    // });
+                    this.$message.success(this.$t('tip.deleteTaskSuccessfully'));
+                }).catch(() => {
+                    this.$messageBox(this.$t('tip.deleteTaskFailed'));
+                });
+            }
+            this.doClose();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-row {
+            margin: 10px;
+        }
+    }
+	.delete-task{
+		/deep/ {
+			.el-dialog__body{
+				padding: 0 20px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/duplicateTrain.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/duplicateTrain.vue
new file mode 100644
index 000000000..752f61b2a
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/duplicateTrain.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool duplicate-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="420px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row type="flex" justify="center">
+      <el-radio-group v-model="model.forward">
+        <el-radio :label="true">{{ $t('planMonitor.forward') }}</el-radio>
+        <el-radio :label="false">{{ $t('planMonitor.backward') }}</el-radio>
+      </el-radio-group>
+    </el-row>
+    <el-row style="margin-top: 20px">
+      <el-col :span="5" :offset="4">{{ $t('planMonitor.frequency') }}</el-col>
+      <el-col :span="10">
+        <el-input-number v-model="model.times" size="mini" :min="1" controls-position="right" />
+      </el-col>
+    </el-row>
+    <el-row style="margin: 10px 0px">
+      <el-col :span="5" :offset="4">{{ $t('planMonitor.intervals') }}</el-col>
+      <el-col :span="10">
+        <el-input-number v-model="model.intervals" size="mini" :min="30" controls-position="right" />
+        <span>{{ $t('global.second') }}</span>
+      </el-col>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { duplicateService } from '@/api/runplan';
+
+export default {
+    name: 'DuplicateTrain',
+    components: {
+    },
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            model: {
+                serviceNumber: '',
+                forward: false,
+                times: 0,
+                intervals: 0
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.duplicateTrain');
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow(params) {
+            this.model.serviceNumber = params.serviceNumber;
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        handleCommit() {
+            this.model['planId'] = this.$route.query.planId || this.loadRunPlanId;
+            this.model['serviceNumber'] = this.model.serviceNumber;
+            this.doClose();
+            duplicateService(this.model).then(resp => {
+                // this.$emit('dispatchOperate', {
+                // 	dialogName: 'openRunPlan', operate: 'loadRunPlanData', params: Object.assign({refresh: true}, this.$route.query)
+                // });
+                this.$emit('refresh');
+                this.$message.success(this.$t('tip.duplicatePlanSuccessful'));
+            }).catch((error) => {
+                if (error.code === 500001) {
+                    this.$messageBox(this.$t('tip.duplicatePlanFailed') + this.$t('tip.duplicatePlanFailedTips'));
+                } else {
+                    this.$messageBox(this.$t('tip.duplicatePlanFailed'));
+                }
+
+            });
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+	.duplicate-train{
+		/deep/ {
+			.el-dialog__body{
+				padding: 0 20px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanName.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanName.vue
new file mode 100644
index 000000000..3d1bc99f9
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanName.vue
@@ -0,0 +1,116 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool create-empty-plan"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="400px"
+    :before-close="doClose"
+    :z-index="3000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <div>
+      <el-row>
+        <el-form ref="form" :model="editModel" label-width="140px" size="mini" :rules="rules" @submit.native.prevent>
+          <el-form-item :label="this.$t('planMonitor.runGraphName')+this.$t('global.colon')" prop="name">
+            <el-input v-model="editModel.name" autofocus />
+          </el-form-item>
+        </el-form>
+      </el-row>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="doClose">{{ $t('map.cancel') }}</el-button>
+      <el-button type="primary" :loading="loading" @click="handleEdit">{{ $t('global.modify') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { putRunPlanDetail } from '@/api/runplan';
+
+export default {
+    name: 'CreateEmptyPlan',
+    components: {
+    },
+    data() {
+        return {
+            activeTab: 'first',
+            dialogShow: false,
+            loading: false,
+            publishMapList: [],
+            editModel: {
+                planId: '',
+                name: ''
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.modifyRunningDiagramName');
+        },
+        rules() {
+            return {
+                name: [
+                    { required: true, message: this.$t('rules.enterTheNameOfTheRunGraph'), trigger: 'blur' }
+                ]
+            };
+        }
+    },
+    mounted() {
+
+    },
+    methods: {
+        doShow(data) {
+            this.dialogShow = true;
+            if (data && data.name) {
+                this.editModel.name = data.name;
+                this.editModel.planId = data.id;
+            }
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+            this.editModel.name = '';
+            if (this.$refs.form) {
+                this.$refs.form.resetFields();
+            }
+        },
+        handleEdit() {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    putRunPlanDetail(this.editModel).then(resp => {
+                        const params = {
+                            dialogName: 'openRunPlan',
+                            operate: 'loadRunPlanData',
+                            params: { planId: resp.data, lineCode: this.$route.query.lineCode, planName: this.editModel.name, refresh: true }
+                        };
+
+                        this.$emit('dispatchOperate', params);
+                        this.$message.success(this.$t('tip.runGraphNameModifiedSuccessfully'));
+                        this.$emit('renewal', this.editModel.name);
+                        this.doClose();
+                    }).catch(error => {
+                        this.$messageBox(this.$t('tip.modifyRunGraphNameFailed') + error.message);
+                        this.doClose();
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-input {
+            width: 160px;
+        }
+
+        .el-input-number {
+            width: 120px;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanningTrain.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanningTrain.vue
new file mode 100644
index 000000000..86f397a36
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/editPlanningTrain.vue
@@ -0,0 +1,365 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool edit-planning-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="800px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row>
+      <el-col :span="3">{{ $t('planMonitor.serviceNumber')+$t('global.colon') }}</el-col>
+      <el-col :span="4">
+        <el-input v-model="model.serviceNumber" disabled size="mini" />
+      </el-col>
+      <!-- <el-col :span="4" :offset="1">
+        <el-checkbox v-model="model.debugTrain">{{ $t('planMonitor.commissioningTrain') }}</el-checkbox>
+      </el-col> -->
+    </el-row>
+    <el-row style="margin-top: 5px">
+      {{ $t('planMonitor.task') }}
+    </el-row>
+    <el-row>
+      <div style=" float: left;  width: 78%">
+        <el-table :data="model.tripConfigList" highlight-current-row border :height="380" @current-change="handleCurrentChange">
+          <el-table-column prop="beginStationCode" :label="this.$t('planMonitor.startingStation')">
+            <template slot-scope="scope">
+              {{ formatName(scope.row.startStationCode) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="startTime" :label="this.$t('planMonitor.startTime')">
+            <template slot-scope="scope">
+              {{ scope.row.startTime }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="endStationCode" :label="this.$t('planMonitor.terminal')">
+            <template slot-scope="scope">
+              {{ formatName(scope.row.endStationCode) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="endTime" :label="this.$t('planMonitor.endTime')">
+            <template slot-scope="scope">
+              {{ scope.row.endTime }}
+            </template>
+          </el-table-column>
+          <el-table-column width="20" />
+        </el-table>
+      </div>
+      <div style="float: right; width: 22%">
+        <el-button class="view-button" :disabled="disabled" @click="handleEditTask">{{ $t('planMonitor.modifyTask') }}</el-button>
+        <el-button class="view-button" :disabled="disabled" @click="handleAddTask">
+          {{ $t('planMonitor.addTask') }}
+        </el-button>
+        <el-button class="view-button" :disabled="disabled" @click="handleDeleteTask">{{ $t('planMonitor.deleteTask') }}</el-button>
+        <el-button class="view-button" :disabled="disabled" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+      </div>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { formatName, formatTime } from '@/jmapNew/theme/parser/util';
+import { addPlanService, updatePlanService, getRoutingBySDTNumber } from '@/api/runplan';
+
+export default {
+    name: 'EditPlanningTrain',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            currentRow: {},
+            isNew:true,
+            model: {
+                serviceNumber: '',
+                // debugTrain: false,
+                tripConfigList: []
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.editPlanningTrain');
+        },
+        disabled() {
+            return !this.model.serviceNumber;
+        }
+    },
+    methods: {
+        formatTime(time) {
+            return formatTime(time);
+        },
+        formatName(code) {
+            return formatName(code);
+        },
+        getEachTripNumber(editData, tripNumberList, index) {
+            const tripNumber = tripNumberList[index];
+            const trainInfo = editData.trainMap[tripNumber];
+            const lastIndex = trainInfo.stationTimeList.length - 1;
+
+            const taskObj = {
+                id:index + 1,
+                tripNumber: tripNumber,
+                startStationCode:trainInfo.stationTimeList[0].stationCode,
+                endStationCode:trainInfo.stationTimeList[lastIndex].stationCode,
+                startTime: formatTime(trainInfo.startSecondTime + 7200),
+                endTime: formatTime(trainInfo.endSecondTime + 7200),
+                arriveConfigList: [],
+                startSectionCode:trainInfo.startSectionCode,
+                endSectionCode:trainInfo.endSectionCode,
+                endTbFront:undefined,
+                startTbFront:undefined
+            };
+            if (trainInfo.startSectionCode != trainInfo.stationTimeList[0].sectionCode) {
+                taskObj.startTbFront = false;
+                taskObj.startTime = formatTime(trainInfo.startSecondTime + 7200);
+                const newModel = {
+                    sectionCode:trainInfo.startSectionCode,
+                    stationCode:trainInfo.stationTimeList[0].stationCode,
+                    // // speedLevel:'默认',
+                    departureTime: formatTime(trainInfo.startSecondTime + 7200),
+                    arriveTime: formatTime(trainInfo.startSecondTime + 7200),
+                    stopTime:0
+                };
+                taskObj.arriveConfigList.push(newModel);
+            }
+            const newstationTimeList = [];
+            let current = {};
+            trainInfo.stationTimeList.forEach((stationTime, index)=>{
+                if (index % 2 == 0) {
+                    current = {};
+                    current.stationCode = stationTime.stationCode;
+                    current.sectionCode = stationTime.sectionCode;
+                    current.arriveTime = stationTime.secondTime;
+                } else {
+                    current.departureTime = stationTime.secondTime;
+                    newstationTimeList.push(current);
+                }
+            });
+
+            newstationTimeList.forEach((newstationTime, index)=>{
+                if (trainInfo.startSectionCode != trainInfo.stationTimeList[0].sectionCode) {
+                    index += 1;
+                }
+                const newModel = {
+                    sectionCode:newstationTime.sectionCode,
+                    stationCode:newstationTime.stationCode,
+                    arriveTime: formatTime(newstationTime.arriveTime + 7200),
+                    departureTime: formatTime(newstationTime.departureTime + 7200),
+                    stopTime:newstationTime.departureTime - newstationTime.arriveTime
+                };
+                taskObj.arriveConfigList.push(newModel);
+            });
+
+            if (trainInfo.endSectionCode != trainInfo.stationTimeList[lastIndex].sectionCode) {
+                taskObj.endTbFront = false;
+                taskObj.endTime = formatTime(trainInfo.endSecondTime + 7200);
+                const newModel = {
+                    sectionCode:trainInfo.endSectionCode,
+                    stationCode:trainInfo.stationTimeList[lastIndex].stationCode,
+                    // // speedLevel:'默认',
+                    departureTime: formatTime(trainInfo.endSecondTime + 7200),
+                    arriveTime: formatTime(trainInfo.endSecondTime + 7200),
+                    stopTime:0
+                };
+                taskObj.arriveConfigList.push(newModel);
+            } else {
+                if (trainInfo.reentry) {
+                    taskObj.endTbFront = true;
+                }
+            }
+            this.model.tripConfigList.push(taskObj);
+            index++;
+            if (index <= tripNumberList.length - 1) {
+                this.getEachTripNumber(editData, tripNumberList, index);
+            }
+        },
+        loadInitData(params) {
+            this.isNew = params.isNew;
+            this.model.planId = this.$route.query.planId || this.loadRunPlanId;
+            this.model.serviceNumber = params.serviceNumber;
+            this.model.tripConfigList = [];
+            if (!this.isNew) {
+                const editData = this.$store.state.runPlan.editData[params.serviceNumber];
+                if (editData) {
+                    const tripNumberList = Object.keys(editData.trainMap).sort((a, b) => { return editData.trainMap[a].oldIndex - editData.trainMap[b].oldIndex; });
+                    if (tripNumberList.length > 0) {
+                        this.getEachTripNumber(editData, tripNumberList, 0);
+                    }
+                }
+            }
+        },
+        doShow(params) {
+            this.loadInitData(params);
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        handleCurrentChange(val) {
+            this.currentRow = val || {};
+        },
+        handleAddTask() {
+            this.$emit('dispatchDialog', {
+                name: 'showDialog', params: {
+                    isPlan: true,
+                    dialogType:'addTask',
+                    taskIndex: this.currentRow.taskIndex,
+                    serviceNumber: this.model.serviceNumber,
+                    tripNumber: this.currentRow.tripNumber
+                }
+            });
+        },
+        handleEditTask() {
+            if (this.currentRow.id) {
+                this.$emit('dispatchDialog', {
+                    name: 'showDialog', params: {
+                        isPlan: true,
+                        dialogType:'modifyingTask',
+                        serviceNumber: this.model.serviceNumber,
+                        tripNumber: this.currentRow.tripNumber,
+                        rowData:this.currentRow
+                    }
+                });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPieceOfData'));
+            }
+        },
+        handleDeleteTask() {
+            if (this.currentRow.id) {
+                let index = -1;
+                index = this.model.tripConfigList.findIndex(
+                    elem => { return elem.id == this.currentRow.id; }
+                );
+                this.model.tripConfigList.splice(index, 1);
+            } else {
+                this.$messageBox(this.$t('tip.selectAPieceOfData'));
+            }
+        },
+        handleConfirmUpdateTask(model) {
+            const tripConfigList = Object.assign([], this.model.tripConfigList);
+            tripConfigList.forEach(tripConfig=>{
+                if (tripConfig.id == model.id) {
+                    Object.assign(tripConfig, model);
+                }
+            });
+            this.model.tripConfigList = tripConfigList;
+        },
+        handleConfirmAddTask(model) {
+            // let index = this.model.tripConfigList.findIndex(
+            //     elem => { return elem.taskIndex == this.currentRow.taskIndex }
+            // );
+
+            // if (index >= 0) {
+            //     if (!model.addToFront) {
+            //         index += 1;
+            //     }
+
+            //     this.model.tripConfigList = [...this.model.tripConfigList.slice(0, index), model, ...this.model.tripConfigList.slice(index)]
+            // } else {
+            //     this.model.tripConfigList.push(model);
+            // }
+            model.id = this.model.tripConfigList.length + 1;
+            if (model.addToFront) {
+                this.model.tripConfigList = [model, ...this.model.tripConfigList];
+            } else {
+                this.model.tripConfigList.push(model);
+            }
+        },
+        // handleConfirmDeleteTask(model) {
+        //     debugger;
+        //     let index = -1;
+        //     if (model.routingCode) {
+        //         index = this.model.tripConfigList.findIndex(
+        //             elem => { return elem.routingCode == model.routingCode; }
+        //         );
+        //     } else {
+        //         index = this.model.tripConfigList.findIndex(
+        //             elem => { return elem.tripNumber == model.tripNumber; }
+        //         );
+        //     }
+        //     // this.model.tripConfigList.
+        //     if (index >= 0) {
+        //         if (model.addToFront) {
+        //             this.model.tripConfigList = this.model.tripConfigList.slice(index + 1);
+        //         } else {
+        //             this.model.tripConfigList = this.model.tripConfigList.slice(0, index);
+        //         }
+        //     }
+        // },
+        handleCommit() {
+            if (this.isNew) {
+                if (this.model.tripConfigList.length > 0) {
+                    this.doClose();
+                    this.model.tripConfigList.map(each=>{
+                        each.startTime = each.arriveConfigList[0].arriveTime;
+                        each.endTime = each.arriveConfigList[each.arriveConfigList.length - 1].departureTime;
+                    });
+                    addPlanService(this.model).then(() => {
+                        this.$emit('refresh');
+                        // this.$emit('dispatchOperate', {
+                        // 	dialogName: 'openRunPlan', operate: 'loadRunPlanData', params: Object.assign({refresh: true}, this.$route.query)
+                        // });
+                        this.$message.success(this.$t('tip.planCreationSuccessful'));
+                    }).catch((error) => {
+                        this.$messageBox(this.$t('tip.createPlanFailed') + error.message);
+                    });
+                } else {
+                    this.$messageBox('请增加任务');
+                }
+            } else {
+                if (this.model.tripConfigList.length > 0) {
+                    this.doClose();
+                    this.model.tripConfigList.map(each=>{
+                        each.startTime = each.arriveConfigList[0].arriveTime;
+                        each.endTime = each.arriveConfigList[each.arriveConfigList.length - 1].departureTime;
+                    });
+                    updatePlanService(this.$route.query.planId || this.loadRunPlanId, this.model.serviceNumber, this.model).then(() => {
+                        this.$emit('refresh');
+                        this.$message.success('修改计划成功');
+                    }).catch(() => {
+                        this.$messageBox('修改计划失败');
+                    });
+                } else {
+                    this.$messageBox('请增加任务');
+                }
+            }
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .view-button {
+        display: block !important;
+        height: 36px !important;
+        width: 140px !important;
+        margin: 50px 15px;
+        border: 1px solid black !important;
+        font-weight: bold !important;
+    }
+
+    /deep/ {
+        .el-row {
+            margin-left: 10px;
+        }
+
+        .el-input.is-disabled .el-input__inner {
+            height: 20px !important;
+            line-height: 20px !important;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/gernaratePlanTrain.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/gernaratePlanTrain.vue
new file mode 100644
index 000000000..752ea1e56
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/gernaratePlanTrain.vue
@@ -0,0 +1,354 @@
+<template>
+  <!-- <el-dialog
+    v-dialogDrag
+    class="planEdit__tool gernarate-plan-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="500px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    top="10vh"
+    :close-on-click-modal="false"
+  > -->
+  <div v-loading="dataLoading" style="width:500px;padding:20px 0px;height:100%">
+    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
+    <span slot="footer" class="dialog-footer gerneratePlanDialog">
+      <!-- <el-button size="small" @click="doClose">{{ $t('global.cancel') }}</el-button> -->
+      <el-button type="primary" size="medium" :loading="loading" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </div>
+  <!-- </el-dialog> -->
+</template>
+
+<script>
+import { generatePlanTrain, listUserRoutingData, querySectionListByRouting } from '@/api/runplan';
+export default {
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            // dialogShow: false,
+            dataLoading:false,
+            routingMap: {},
+            loading: false,
+            oldsection:[],
+            runningRoutingMap:{},
+            runLevelList: [
+                { value: 1, label: '等级一' },
+                { value: 2, label: '等级二' },
+                { value: 3, label: '等级三'},
+                { value: 4, label: '等级四' },
+                { value: 5, label: '等级五' }
+            ],
+            formModel: {
+                gernarateType:'02',
+                serviceNumber:'', // 服务号
+                beginTime: '06:00:00', // 开始时间
+                overTime: '22:00:00', // 结束时间
+                runLevel:3, // 运行等级
+                departureInterval:300, // 发车间隔
+                outAndIn:false, // 自动生成出入库
+                runningRouting1: '', // 环路code1
+                runningRouting2: '', // 环路code2
+                runningRouting:''
+            },
+
+            rules: {
+                serviceNumber:[
+                    {required: true, validator: this.validateServiceNumber, trigger: 'blur'},
+                    {required: true, validator: this.validateServiceNo, trigger: 'change'}
+                ],
+                beginTime: [
+                    { required: true, message: '请填写开始时间', trigger: 'blur' }
+                ],
+                overTime: [
+                    { required: true, message: '请填写结束时间', trigger: 'blur' }
+                ],
+                runLevel: [
+                    { required: true, message: '请选择运行等级', trigger: 'change' }
+                ],
+                departureInterval:[
+                    { required: true, message: '请填写发车间隔', trigger: 'blur' }
+                ],
+                runningRouting: [
+                    { required: true, message: '请选择环路', trigger: 'blur' },
+                    { required: true, message: '请选择环路', trigger: 'change' }
+                ]
+            },
+            runningRouteList: []
+        };
+    },
+    computed: {
+        // title() {
+        //     return '生成计划';
+        // },
+        form() {
+            return {
+                labelWidth: '140px',
+                size:'small',
+                items: [
+                    { prop: 'gernarateType', label: '生成类型', type: 'checkBox', children: [
+                        { name: '单条服务', value: '01' },
+                        { name: '多条服务', value: '02' }
+                    ] },
+                    { prop: 'serviceNumber', label: '服务号', type: 'text', rightWidth:true, maxlength:3, show:this.formModel.gernarateType == '01'},
+                    { prop: 'beginTime', label: '开始时间', type: 'timePicker', selectableRange:'02:00:00-23:59:59'},
+                    { prop: 'overTime', label: '结束时间', type: 'timePicker', selectableRange:'02:00:00-23:59:59'},
+                    { prop: 'runLevel', label: '运行等级', type: 'select', options: this.runLevelList },
+                    { prop: 'departureInterval', label: '发车间隔', type: 'number', show:this.formModel.gernarateType == '02', min:0, step:1, precisionFlag:true, precision:0, message:'s'},
+                    { prop: 'runningRouting1', label: '环路交路1', type: 'select', show:false},
+                    { prop: 'runningRouting2', label: '环路交路2', type: 'select', show:false},
+                    { prop: 'outAndIn', label: '自动生成出入库', type: 'switchBox', show:true, activeColor:'#409eff', inactiveColor:'#dcdfe6' },
+                    { prop: 'runningRouting', label:'交路', type: 'select', options: this.runningRouteList, noDataText:'请先设置交路', clearable: true, change:true, onChange:this.onRunningRouteChange}
+                ]
+            };
+        }
+    },
+    methods: {
+        doShow(params) {
+            this.loading = false;
+            const mapId = this.$route.query.mapId;
+            if (mapId) {
+                const runningRoutingMap = {};
+                this.dataLoading = true;
+                listUserRoutingData(mapId).then(response => {
+                    const list = response.data;
+                    console.time();
+                    list.forEach(elem=>{
+                        // this.routingMap[elem.id] = {parkSectionCodeList:elem.parkSectionCodeList};
+                        if (elem.routingType === 'LOOP') {
+                            // const name = elem.name;
+                            // let temp = '';
+                            if (elem.right) {
+                                const data = runningRoutingMap[elem.startSectionCode + '-' + elem.endSectionCode];
+                                if (!data) { runningRoutingMap[elem.startSectionCode + '-' + elem.endSectionCode] = {}; }
+                                runningRoutingMap[elem.startSectionCode + '-' + elem.endSectionCode].label = elem.name;
+                                runningRoutingMap[elem.startSectionCode + '-' + elem.endSectionCode].value = elem.startSectionCode + '-' + elem.endSectionCode;
+                                runningRoutingMap[elem.startSectionCode + '-' + elem.endSectionCode].runningRouting1 = elem.id;
+                                runningRoutingMap[elem.startSectionCode + '-' + elem.endSectionCode].startStationCode = elem.startStationCode;
+                                runningRoutingMap[elem.startSectionCode + '-' + elem.endSectionCode].endStationCode = elem.endStationCode;
+                            } else {
+                                const data = runningRoutingMap[elem.endSectionCode + '-' + elem.startSectionCode];
+                                if (!data) { runningRoutingMap[elem.endSectionCode + '-' + elem.startSectionCode] = {}; }
+                                runningRoutingMap[elem.endSectionCode + '-' + elem.startSectionCode].runningRouting2 = elem.id;
+                            }
+                        }
+                    });
+                    this.runningRoutingMap = runningRoutingMap;
+                    this.onRunningRouteChange();
+                    this.dataLoading = false;
+                }).catch(_ => {
+                    console.log(_);
+                    this.dataLoading = false;
+                    this.$messageBox(`获取交路列表失败`);
+                });
+            }
+            // this.dialogShow = true;
+        },
+        validateServiceNumber(rule, value, callback) {
+            if (typeof value == 'string' && value.trim().length == 0) {
+                return callback(new Error('请填写服务号'));
+            } else {
+                let newValue = parseInt(value);
+                if (newValue) {
+                    if (newValue > 0 & newValue < 9) {
+                        newValue = '00' + newValue;
+                    } else if (newValue > 10 & newValue < 99) {
+                        newValue = '0' + newValue;
+                    }
+                    this.formModel.serviceNumber = newValue;
+                    const serviceNumberList = Object.keys(this.$store.state.runPlan.editData);
+                    if (serviceNumberList.includes(value)) {
+                        return callback(new Error('该服务号已存在'));
+                    } else {
+                        return callback();
+                    }
+                } else {
+                    this.formModel.serviceNumber = '';
+                }
+
+            }
+        },
+        validateServiceNo(rule, value, callback) {
+            if (typeof value == 'string' && value.trim().length == 0) {
+                return callback(new Error('请填写服务号'));
+            } else {
+                const serviceNumberList = Object.keys(this.$store.state.runPlan.editData);
+                if (serviceNumberList.includes(value)) {
+                    return callback(new Error('该服务号已存在'));
+                } else {
+                    return callback();
+                }
+            }
+        },
+        checkRouteCurrentValue() {
+            if (!this.runningRouteList.find(route => route.value == this.formModel.runningRouting)) {
+                this.formModel.runningRouting = '';
+                this.formModel.runningRouting1 = '';
+                this.formModel.runningRouting2 = '';
+            }
+
+            this.$nextTick(_ => {
+                this.$refs.dataform && this.$refs.dataform.clearValidate();
+            });
+        },
+        onRunningRouteChange(runningRouting = '') {
+            const temp = this.runningRoutingMap[runningRouting];
+            if (this.oldsection.length > 0) {
+                this.changeSectionSelected(this.oldsection, false);
+            }
+            if (temp) {
+                this.formModel.runningRouting1 = temp.runningRouting1;
+                this.formModel.runningRouting2 = temp.runningRouting2;
+                // if (this.routingMap[temp.runningRouting1] && this.routingMap[temp.runningRouting2]) {
+                // }
+                // 切换显示环路路径
+                this.$emit('mapLoading', true);
+                querySectionListByRouting(temp.runningRouting1).then(resp=>{
+                    querySectionListByRouting(temp.runningRouting2).then(res=>{
+                        const parkSectionCodeList = resp.data;
+                        // this.routingMap[temp.runningRouting1].parkSectionCodeList;
+                        parkSectionCodeList.push(...res.data);
+                        // this.routingMap[temp.runningRouting2].parkSectionCodeList
+                        this.changeSectionSelected(parkSectionCodeList, true);
+                        this.oldsection = parkSectionCodeList;
+                        this.$emit('mapLoading', false);
+                    }).catch(error => {
+                        console.log(error.message + '根据交路查询交路区段列表失败');
+                    });
+                }).catch(error => {
+                    console.log(error.message + '根据交路查询交路区段列表失败');
+                });
+
+            }
+
+            if (!this.formModel.runningRouting) {
+                let list = Object.values(this.runningRoutingMap).filter(route=>{ return route.runningRouting1 && route.runningRouting2; });
+                list = list.sort((a, b) => {
+                    const startStationA = this.$store.getters['map/getDeviceByCode'](a.startStationCode);
+                    const startStationB = this.$store.getters['map/getDeviceByCode'](b.startStationCode);
+                    const endStationCodeA = this.$store.getters['map/getDeviceByCode'](a.endStationCode);
+                    const endStationCodeB = this.$store.getters['map/getDeviceByCode'](b.endStationCode);
+                    return startStationA.kmRange == startStationB.kmRange ? endStationCodeA.kmRange - endStationCodeB.kmRange : startStationA.kmRange - startStationB.kmRange;
+                });
+                this.runningRouteList = list;
+            }
+
+            this.checkRouteCurrentValue();
+        },
+        doClose() {
+            this.loading = false;
+            // this.$refs.dataform.validateField('runningRouting');
+            this.$refs.dataform.resetForm();
+            this.$refs.dataform.allSelectBlur();
+            this.changeSectionSelected(this.oldsection, false);
+            // this.$refs.dataform.clearValidate();
+            // blur
+            this.formModel = {
+                gernarateType:'02',
+                serviceNumber:'', // 服务号
+                beginTime: '06:00:00', // 开始时间
+                overTime: '22:00:00', // 结束时间
+                runLevel:3, // 运行等级
+                departureInterval:300, // 发车间隔
+                outAndIn:false, // 自动生成出入库
+                runningRouting1: '', // 环路code1
+                runningRouting2: '', // 环路code2
+                runningRouting:''
+            };
+            this.$emit('close');
+            // this.dialogShow = false;
+        },
+        covertRouting(list, cb = e => true) {
+            return list.filter(route=> cb(route));
+        },
+        handleCommit() {
+            this.$refs.dataform.validateForm(() => {
+                if (this.formModel.overTime <= this.formModel.beginTime) {
+                    this.$messageBox('结束时间必须大于开始时间');
+                    return false;
+                }
+                const formModel = Object.assign({}, this.formModel);
+                if (formModel.gernarateType == '01') {
+                    delete formModel.departureInterval;
+                } else {
+                    delete formModel.serviceNumber;
+                }
+                delete formModel.gernarateType;
+                delete formModel.runningRouting;
+
+                this.loading = true;
+                generatePlanTrain(this.$route.query.planId || this.loadRunPlanId, formModel).then(res => {
+                    this.loading = false;
+                    this.doClose();
+                    this.$refs.dataform.resetForm();
+                    this.$store.dispatch('runPlan/refresh');
+                }).catch(error => {
+                    console.log(error);
+                    // this.doClose();
+                    this.loading = false;
+                    this.$messageBox(error.message);
+                });
+            });
+        },
+
+        changeSectionSelected(selectedList, flag) {
+            if (selectedList && selectedList.length > 0) {
+                if (flag) {
+                    // if (this.oldsection.length > 0) {
+                    //     this.oldsection.forEach((sectionInfo)=>{
+                    //         const section = this.$store.getters['map/getDeviceByCode'](sectionInfo.sectionCode);
+                    //         section.instance.drawBatchSelected(section, '');
+                    //     });
+                    //     this.oldsection = [];
+                    // }
+                    selectedList.forEach(each=>{
+                        const section = this.$store.getters['map/getDeviceByCode'](each.sectionCode);
+                        const list = section.logicSectionCodeList;
+                        // if()
+                        // relSwitchCode
+                        if (list && list.length > 0) {
+                            list.forEach(logicSectionCode=>{
+                                const logicSection = this.$store.getters['map/getDeviceByCode'](logicSectionCode);
+                                this.oldsection.push(logicSection);
+                                logicSection.instance.drawBatchSelected(section, 'routingSection');
+                            });
+                        } else {
+                            this.oldsection.push({sectionCode:section.code});
+                            section.instance.drawBatchSelected(section, 'routingSection');
+                        }
+                    });
+                    this.$jlmap.setCenter(selectedList[0].sectionCode);
+                } else {
+                    selectedList.forEach(each=>{
+                        const section = this.$store.getters['map/getDeviceByCode'](each.sectionCode);
+                        const list = section.logicSectionCodeList;
+                        if (list && list.length > 0) {
+                            list.forEach(logicSectionCode=>{
+                                const logicSection = this.$store.getters['map/getDeviceByCode'](logicSectionCode);
+                                logicSection.instance.drawBatchSelected(section, '');
+                            });
+                        } else {
+                            section.instance.drawBatchSelected(section, '');
+                        }
+                    });
+                }
+            }
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.gerneratePlanDialog{
+    display: inline-block;
+    margin-top: 20px;
+    margin-left: 150px;
+}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyService.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyService.vue
new file mode 100644
index 000000000..42ea80616
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyService.vue
@@ -0,0 +1,169 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool modify-service"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="400px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+    append-to-body
+  >
+    <div v-if="isModifyServiceNumber">
+      <div class="ModifyServiceName">服务号:</div>
+      <div class="ModifyServiceInput">
+        <el-input v-model="serviceNumber" type="text" :style="{width: '80%'}" :minlength="2" :maxlength="3" @blur="handleServiceNumber" />
+        <div style="color:#f00;margin-top:10px;font-size: 13px;">{{ serviceNumberTips }}</div>
+      </div>
+    </div>
+    <div v-else>
+      <div class="ModifyServiceName">车次号:</div>
+      <div class="ModifyServiceInput">
+        <el-input v-model="tripNumber" type="text" :style="{width: '80%'}" :maxlength="10" />
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import { updateTripNumber, updateServiceNumber } from '@/api/runplan';
+export default {
+    name:'ModifyService',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow:false,
+            isModifyServiceNumber:false,
+            serviceNumber:'',
+            tripNumber:'',
+            title:'',
+            oldServiceNumber:'',
+            oldTripNumber:'',
+            serviceNumberTips:''
+        };
+    },
+    methods:{
+        doShow(data) {
+            if (data.tripNumber) {
+                this.oldServiceNumber = data.serviceNumber;
+                this.oldTripNumber = data.tripNumber;
+                this.isModifyServiceNumber = false;
+                this.title = '修改车次号';
+                // this.tripNumber = data.tripNumber;
+            } else {
+                this.oldServiceNumber = data.serviceNumber;
+                this.isModifyServiceNumber = true;
+                this.title = '修改计划号';
+                this.serviceNumber = data.serviceNumber;
+            }
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.dialogShow = false;
+        },
+        handleServiceNumber() {
+            const figuresOfServiceNumber = this.$store.state.map.mapConfig.figuresOfServiceNumber;
+            let newValue = parseInt(this.serviceNumber);
+            if (newValue) {
+                newValue = Math.abs(newValue);
+                if (newValue.toString().length > figuresOfServiceNumber) {
+                    this.serviceNumberTips = '该服务号长度最多为' + figuresOfServiceNumber + '位';
+                } else {
+                    newValue = newValue.toString().padStart(figuresOfServiceNumber, '0');
+                    this.serviceNumber = newValue;
+                    this.serviceNumberTips = '';
+                }
+                // if (newValue > 0 & newValue <= 9) {
+                //     newValue = '0' + newValue;
+                //     // newValue = '00' + newValue;
+                // } else if (newValue > 10 & newValue < 99) {
+                //     newValue = '0' + newValue;
+                // }
+            } else {
+                this.serviceNumber = '';
+                this.serviceNumberTips = '请输入服务号';
+            }
+        },
+        handleCommit() {
+            if (this.isModifyServiceNumber) {
+                const figuresOfServiceNumber = this.$store.state.map.mapConfig.figuresOfServiceNumber;
+                // const result = .test(this.serviceNumber);
+                // \^\[0-9\]
+                // "\*\$"
+                // debugger;
+                // var pattern = '\^\d{' + figuresOfServiceNumber + '}\$';
+                // var reg = new RegExp(pattern, 'g');
+                // const result = this.serviceNumber.match(reg);
+                let result = false;
+                const value = parseInt(this.serviceNumber);
+                if (value.toString().length > figuresOfServiceNumber) {
+                    result = false;
+                } else {
+                    result = true;
+                }
+                if (this.serviceNumber && result) {
+                    updateServiceNumber(this.$route.query.planId || this.loadRunPlanId, this.oldServiceNumber, this.serviceNumber).then(res=>{
+                        this.$message.success('修改计划号成功');
+                        // this.$emit('refresh');
+                        this.dialogShow = false;
+                        this.$store.dispatch('runPlan/refresh');
+                    }).catch(()=>{
+                        this.$message.error('修改计划号失败');
+                    });
+                } else {
+                    // this.$message.error('请输入正确的计划号(' + figuresOfServiceNumber + '位数字以内)');
+                    // this.serviceNumberTips = '请输入正确的计划号(' + figuresOfServiceNumber + '位数字以内)';
+                    this.serviceNumberTips = '该服务号长度最多为' + figuresOfServiceNumber + '位';
+                }
+
+            } else {
+                const result = /^\d{2,}$/.test(this.tripNumber);
+                if (this.tripNumber && result) {
+                    const SDTNumber = this.oldServiceNumber + this.oldTripNumber;
+                    updateTripNumber(this.$route.query.planId || this.loadRunPlanId, SDTNumber, this.tripNumber).then(res=>{
+                        this.$message.success('修改车次号成功');
+                        // this.$emit('refresh');
+                        this.dialogShow = false;
+                        this.$store.dispatch('runPlan/refresh');
+                    }).catch(()=>{
+                        this.$message.error('修改车次号失败');
+                    });
+                } else {
+                    this.$message.error('请输入正确的车次号(两位以上数字)');
+                }
+
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.ModifyServiceName{
+    width: 100px;
+    display: inline-block;
+    float: left;
+    text-align: right;
+    padding-right: 15px;
+    vertical-align: top;
+    margin-top: 11px;
+    font-size: 15px;
+    margin-left: 20px;
+}
+.ModifyServiceInput{
+    width: 180px;
+    display: inline-block;
+    vertical-align: middle;
+}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationIntervalTime.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationIntervalTime.vue
new file mode 100644
index 000000000..ebcbe82c1
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationIntervalTime.vue
@@ -0,0 +1,293 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool add-planning-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="1020px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row :gutter="15">
+      <el-form ref="form" :model="form" label-width="60px" size="mini">
+        <el-col :span="4">
+          <el-form-item label="等级一:">
+            <el-input v-model="form.level1" @blur="handleBlur(form.level1, '1')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="等级二:">
+            <el-input v-model="form.level2" @blur="handleBlur(form.level2, '2')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="等级三:">
+            <el-input v-model="form.level3" @blur="handleBlur(form.level3, '3')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="等级四:">
+            <el-input v-model="form.level4" @blur="handleBlur(form.level4, '4')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="等级五:">
+            <el-input v-model="form.level5" @blur="handleBlur(form.level5, '5')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <div style="line-height: 29px; font-size: 15px;">速度单位: (Km/h)</div>
+        </el-col>
+      </el-form>
+    </el-row>
+    <el-row>
+      <el-table v-loading="dataLoading" :data="stationIntervalData" border style="width: 100%" height="420">
+        <el-table-column
+          prop="startStationCode"
+          :label="$t('planMonitor.modifying.startingStation')"
+          width="140"
+          :filters="startStationFilters"
+          :filter-method="filterStartStation"
+          column-key="startStationCode"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ formatName(scope.row.startStationCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startSectionCode" :label="$t('planMonitor.modifying.startSection')" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ formatName(scope.row.startSectionCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="endStationCode"
+          :label="$t('planMonitor.modifying.endStation')"
+          width="140"
+          :filters="endStationFilters"
+          :filter-method="filterEndStation"
+          column-key="endStationCode"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ formatName(scope.row.endStationCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="endSectionCode" :label="$t('planMonitor.modifying.endSection')" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ formatName(scope.row.endSectionCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="right" :label="$t('planMonitor.modifying.direction')" width="60">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.right?'上行':'下行' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="distance" :label="$t('planMonitor.modifying.distance')" width="85">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.distance }}</span>
+            <!-- <el-input v-model="scope.row.distance" class="input_text_box" /> -->
+          </template>
+        </el-table-column>
+        <div>
+          <el-table-column prop="l1" :label="$t('planMonitor.updateStation.level1')" width="70">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.l1" class="input_text_box" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="l2" :label="$t('planMonitor.updateStation.level2')" width="70">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.l2" class="input_text_box" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="l3" :label="$t('planMonitor.updateStation.level3')" width="70">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.l3" class="input_text_box" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="l2" :label="$t('planMonitor.updateStation.level4')" width="70">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.l4" class="input_text_box" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="l2" :label="$t('planMonitor.updateStation.level5')" width="70">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.l5" class="input_text_box" />
+            </template>
+          </el-table-column>
+        </div>
+      </el-table>
+    </el-row>
+    <div class="button-group" style="text-align: center; margin-top: 10px;">
+      <el-button :loading="loading" :disabled="updateloading" @click="handleStationDistance">更新距离</el-button>
+      <el-button @click="doClose">关闭</el-button>
+      <el-button :loading="updateloading" :disabled="loading" @click="handleStationTime">更新</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { formatName } from '@/jmapNew/theme/parser/util';
+import { setStationRunning, getMapStationRunUser, updateRunlevelDistance } from '@/api/runplan';
+
+export default {
+    name: 'ModifyingStationIntervalTime',
+    components: {
+    },
+    data() {
+        return {
+            dialogShow: false,
+            dataLoading:false,
+            loading: false,
+            updateloading:false,
+            DirectionCodeMap: {},
+            startStationFilters:[],
+            endStationFilters:[],
+            stationIntervalData: [],
+            params: {},
+            form: {
+                level1: '',
+                level2: '',
+                level3: '',
+                level4: '',
+                level5: ''
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.modifying.modifyRunLevel') + ' (单位：秒)';
+        }
+    },
+    mounted() {
+        // this.loadInitData();
+    },
+    methods: {
+        formatName(code) {
+            return formatName(code);
+        },
+        loadInitData() {
+            this.DirectionCodeMap = {};
+            this.$ConstSelect.DirectionCodeList.forEach(elem => {
+                this.DirectionCodeMap[elem.value] = elem.label;
+            });
+            if (this.$route.query.lineCode) {
+                this.dataLoading = true;
+                getMapStationRunUser(this.$route.query.mapId).then(resp =>{
+                    const list = resp.data.list;
+                    this.stationIntervalData = [];
+                    this.stationIntervalData = list;
+
+                    const startStationFilterMap = {};
+                    const endStationFilterMap = {};
+                    list.forEach(stationRun=>{
+                        if (!startStationFilterMap[stationRun.startStationCode]) {
+                            startStationFilterMap[stationRun.startStationCode] = {text:formatName(stationRun.startStationCode), value:stationRun.startStationCode};
+                        }
+                        if (!endStationFilterMap[stationRun.endStationCode]) {
+                            endStationFilterMap[stationRun.endStationCode] = {text:formatName(stationRun.endStationCode), value:stationRun.endStationCode};
+                        }
+                    });
+                    this.startStationFilters = Object.values(startStationFilterMap).sort((a, b)=>{
+                        const startStationA = this.$store.getters['map/getDeviceByCode'](a.value);
+                        const startStationB = this.$store.getters['map/getDeviceByCode'](b.value);
+                        return startStationA.kmRange - startStationB.kmRange;
+                    });
+                    this.endStationFilters = Object.values(endStationFilterMap).sort((a, b)=>{
+                        const endStationA = this.$store.getters['map/getDeviceByCode'](a.value);
+                        const endStationB = this.$store.getters['map/getDeviceByCode'](b.value);
+                        return endStationA.kmRange - endStationB.kmRange;
+                    });
+
+                    this.form.level1 = '';
+                    this.form.level2 = '';
+                    this.form.level3 = '';
+                    this.form.level4 = '';
+                    this.form.level5 = '';
+                    this.dataLoading = false;
+                });
+            }
+        },
+        handleBlur(limit, level) {
+            if (limit) {
+                this.stationIntervalData.forEach(item => {
+                    if (level == '1') {
+                        item.l1 = Math.round(item.distance / (this.form.level1 / 3.6));
+                    } else if (level == '2') {
+                        item.l2 = Math.round(item.distance / (this.form.level2 / 3.6));
+                    } else if (level == '3') {
+                        item.l3 = Math.round(item.distance / (this.form.level3 / 3.6));
+                    } else if (level == '4') {
+                        item.l4 = Math.round(item.distance / (this.form.level4 / 3.6));
+                    } else if (level == '5') {
+                        item.l5 = Math.round(item.distance / (this.form.level5 / 3.6));
+                    }
+                });
+            }
+        },
+        handleStationTime() {
+            this.updateloading = true;
+            setStationRunning(this.$route.query.mapId, this.stationIntervalData).then(resp => {
+                this.updateloading = false;
+                this.$message.success(this.$t('planMonitor.modifying.modifySuccess'));
+            }).catch((error) => {
+                this.$messageBox(this.$t('planMonitor.modifying.modifyFailed') + ': ' + error.message);
+            });
+        },
+        handleStationDistance() {
+            this.$confirm('运行等级将重置为默认值，是否确定？', this.$t('global.tips'), {
+                confirmButtonText: this.$t('global.confirm'),
+                cancelButtonText: this.$t('global.cancel'),
+                type: 'warning'
+            }).then(() => {
+                this.loading = true;
+                updateRunlevelDistance(this.$route.query.mapId).then(resp => {
+                    if (resp.data) {
+                        this.loading = false;
+                        this.$message.success('更新成功');
+                        this.stationIntervalData = resp.data;
+                    } else {
+                        this.$messageBox('更新失败:数据为空');
+                    }
+                }).catch((error) => {
+                    this.$messageBox('更新失败: ' + error.message);
+                });
+            }).catch(() => { });
+        },
+        doShow(params) {
+            this.params = params || {};
+            this.loadInitData();
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.dialogShow = false;
+        },
+        filterStartStation(value, row) {
+            return row.startStationCode == value;
+        },
+        filterEndStation(value, row) {
+            return row.endStationCode == value;
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import "src/styles/mixin.scss";
+	.planEdit__tool {
+		/deep/{
+			.el-dialog__body{
+				padding-top: 0;
+			}
+			.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
+				margin-bottom: 8px;
+			}
+		}
+	}
+	.input_text_box{
+		/deep/{
+			.el-input__inner{
+				padding: 0;
+				text-align: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationStopTime.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationStopTime.vue
new file mode 100644
index 000000000..ef0d4bf76
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingStationStopTime.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool add-planning-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="600px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row>
+      <el-table :data="stationIntervalData" border style="width: 100%" height="320">
+        <el-table-column prop="startStationCode" label="车站名称">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ formatName(scope.row.stationCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startSectionCode" label="区段名称">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ formatName(scope.row.sectionCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="right" label="所属站台">
+          <template slot-scope="scope">
+            <!-- ?'上行站台':'下行站台' -->
+            <span style="margin-left: 10px">{{ formatSelect(scope.row.sectionCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parkingTime" label="停站时间" width="90">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.parkingTime" class="input_text_box" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <div class="button-group" style="text-align: center; margin-top: 10px;">
+      <el-button @click="doClose">关闭</el-button>
+      <el-button @click="handleStationTime">更新</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { formatName } from '@/jmapNew/theme/parser/util';
+import { setStationStopTime, getStationStopTime } from '@/api/runplan';
+
+export default {
+    name: 'ModifyingStationIntervalTime',
+    components: {
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            DirectionCodeMap: {},
+            stationIntervalData: [],
+            params: {}
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.modifying.modifyStopTime');
+        }
+    },
+    mounted() {
+        // this.loadInitData();
+    },
+    methods: {
+        formatName(code) {
+            return formatName(code);
+        },
+        formatSelect(code) {
+            const device = this.$store.state.map.map && this.$store.state.map.map.stationStandList.find(ele => ele.standTrackCode == code);
+            console.log(device.right);
+            if (device) {
+                return device.right ? '上行站台' : '下行站台';
+            }
+            return '';
+        },
+        loadInitData() {
+            this.DirectionCodeMap = {};
+            this.$ConstSelect.DirectionCodeList.forEach(elem => {
+                this.DirectionCodeMap[elem.value] = elem.label;
+            });
+
+            this.stationIntervalData = [];
+            if (this.$route.query.lineCode) {
+                getStationStopTime(this.$route.query.mapId).then(resp =>{
+                    const list = resp.data.list;
+                    this.stationIntervalData = list;
+                });
+            }
+        },
+        handleStationTime() {
+            setStationStopTime(this.$route.query.mapId, this.stationIntervalData).then(resp => {
+                this.$message.success(this.$t('planMonitor.modifying.modifySuccess'));
+            }).catch(() => {
+                this.$messageBox(this.$t('planMonitor.modifying.modifyFailed'));
+            });
+        },
+        doShow(params) {
+            this.params = params || {};
+            this.loadInitData();
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import "src/styles/mixin.scss";
+	.planEdit__tool {
+		/deep/{
+			.el-dialog__body{
+				padding-top: 0;
+			}
+			.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
+				margin-bottom: 8px;
+			}
+		}
+	}
+	.input_text_box{
+		/deep/{
+			.el-input__inner{
+				padding: 0;
+				text-align: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingTask.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingTask.vue
new file mode 100644
index 000000000..b94bf06cd
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/modifyingTask.vue
@@ -0,0 +1,487 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="9" class="lineHeight">
+            <span>{{ $t('planMonitor.modifying.serviceNumber') }}</span>
+          </el-col>
+          <el-col :span="15">
+            <el-input v-model="serviceNumber" size="mini" disabled />
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="lineHeight">
+        <el-row>
+          <el-col :span="10" :offset="1">
+            <span>{{ $t('planMonitor.modifying.defaultRunLevel') }}</span>
+          </el-col>
+          <el-col :span="12">
+            <el-select
+              v-model="defaultSpeedLevel"
+              style="display: inline-black"
+              size="mini"
+              :placeholder="$t('planMonitor.modifying.pleaseSelect')"
+            >
+              <el-option
+                v-for="item in defaultSpeedLevelList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="9" class="lineHeight">
+            <span>{{ $t('planMonitor.modifying.tripNumber') }}</span>
+          </el-col>
+          <el-col :span="15">
+            <el-select v-model="tripNumber" size="mini" style="display: inline-black" disabled :placeholder="$t('planMonitor.modifying.pleaseSelect')">
+              <el-option
+                v-for="item in tripNumberList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="lineHeight">
+        <el-row>
+          <el-col :span="10" :offset="1">
+            <span>{{ $t('planMonitor.modifying.startTime') }}：</span>
+          </el-col>
+          <el-col :span="12">
+            <el-time-picker
+              v-model="editModel.startTime"
+              :placeholder="$t('planMonitor.modifying.selectTime')"
+              value-format="HH:mm:ss"
+              size="mini"
+              :picker-options="{selectableRange:'02:00:00-23:59:59'}"
+              :clearable="false"
+            />
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row style=" margin-bottom: 5px;margin-top: 10px;">
+      {{ '经停转换轨 / 站台轨：' }}
+    </el-row>
+    <el-row>
+      <el-table :data="editModel.arriveConfigList" border :height="230">
+        <el-table-column prop="stationCode" :label="this.$t('planMonitor.station')">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.stationCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="sectionCode" :label="this.$t('planMonitor.section')">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.sectionCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="this.$t('planMonitor.arriveTime')">
+          <template v-if="scope.$index!=0" slot-scope="scope">
+            {{ scope.row.arriveTime }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="this.$t('planMonitor.stopTime')">
+          <template v-if="scope.$index!=0&&scope.$index!=editModel.arriveConfigList.length-1" slot-scope="scope">
+            {{ scope.row.stopTime+'s' }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="this.$t('planMonitor.departureTime')">
+          <template v-if="scope.$index!=editModel.arriveConfigList.length-1" slot-scope="scope">
+            {{ scope.row.departureTime }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="this.$t('planMonitor.runLevel')">
+          <template slot-scope="scope">
+            <span style="font-size:13px;"> {{ scope.row.speedLevel }}</span>
+            <span>{{ '('+scope.row.speedLevelTime+'s)' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <div style="text-align:center;margin-top:15px;">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { updatePlanTrip, getMapStationRunUser, getStationStopTime } from '@/api/runplan';
+import { getRunplanConfig } from '@/api/jmap/mapdraft';
+import { formatTime, formatName } from '@/jmapNew/theme/parser/util';
+
+export default {
+    name: 'ModifyingTask',
+    components: {
+    },
+    data() {
+        return {
+            isPlan: false,
+            loadRunPlanId:'',
+            PlanParser: {},
+            parkSectionCodeList:[],
+            stopStationMap: {},
+            stopTimeMap:{},
+            defaultSpeedLevel: 'l1',
+            tripNumber: '',
+            serviceNumber: '',
+            planId: '',
+            startTbFront:undefined,
+            endTbFront:undefined,
+            editModel: {
+                // routingCode: '',
+                endStationCode: '',
+                startStationCode: '',
+                startTime: '02:00:00',
+                endTime: '',
+                arriveConfigList: [],
+                tripNumber: '',
+                planId: '',
+                serviceNumber: ''
+            },
+            tripNumberList: [{ value: '', label: this.$t('planMonitor.modifying.automatic') }],
+            reentryData: {},
+            defaultSpeedLevelList: [
+                { value: 'l1', label: '等级一' },
+                { value: 'l2', label: '等级二' },
+                { value: 'l3', label: '等级三'},
+                { value: 'l4', label: '等级四' },
+                { value: 'l5', label: '等级五' }
+            ],
+            routingTypeMap: {
+                OUTBOUND: '出库',
+                INBOUND: '入库',
+                LOOP: '环路'
+            }
+        };
+    },
+    watch: {
+        'editModel.startTime': function () {
+            this.computedDetailList();
+        },
+        'defaultSpeedLevel': function () {
+            this.computedDetailList('defaultSpeedLevel');
+        }
+    },
+    methods: {
+        formatTime(time) {
+            return formatTime(time);
+        },
+        formatName(code) {
+            return formatName(code);
+        },
+        computedTimeByString(timeStr) {
+            const bTime = +new Date(`2019-01-01 00:00:00`);
+            const eTime = +new Date(`2019-01-01 ${timeStr}`);
+            return Number(eTime) - Number(bTime);
+        },
+        compuntedRunTime(list, index, runLevel) {
+            let runTime = 0;
+
+            if ((index == 0 && String(this.startTbFront) == false) ||
+				(index == list.length - 1 && String(this.endTbFront) == false)) {
+                return 0;
+            }
+
+            if (index < list.length - 1) {
+                const stopStationObj = this.stopStationMap[[list[index].sectionCode, list[index + 1].sectionCode].toString()];
+                if (stopStationObj) {
+                    if (stopStationObj.runPlanLevelVO) {
+                        runTime = parseInt(stopStationObj.runPlanLevelVO[runLevel]);
+                    } else if (stopStationObj[runLevel]) {
+                        runTime = parseInt(stopStationObj[runLevel]);
+                    } else {
+                        this.$messageBox(this.$t('planMonitor.addTaskHint1') + stopStationObj.startSectionCode + this.$t('planMonitor.addTaskHint2') + stopStationObj.endSectionCode + this.$t('planMonitor.addTaskHint3'));
+                    }
+                }
+            }
+
+            return runTime;
+        },
+        computedDetailList(type = null) {
+            // if (this.editModel.routingCode) {
+            let tempTime = this.computedTimeByString(this.editModel.startTime) / 1000;
+            const list = Object.assign([], this.editModel.arriveConfigList);
+            const runLevel = this.defaultSpeedLevel || 'l1'; // 默认等级三
+
+            list.forEach((elem, index) => {
+                if (type == 'routingCode') {
+                    if (index == 0 || index == list.length - 1) {
+                        elem.stopTime = 0;
+                    } else if (this.stopTimeMap[elem.stationCode]) {
+                        elem.stopTime = this.stopTimeMap[elem.stationCode].parkingTime;
+                    } else {
+                        elem.stopTime = 0;
+                    }
+                }
+
+                tempTime = tempTime || this.computedTimeByString('23:59:59') / 1000 + 1;
+                elem.arriveTime = formatTime(tempTime);
+
+                if (index == list.length - 1 && String(this.endTbFront) == 'true') {
+                    const data = this.reentryData[list[index].stationCode] || {};
+                    elem.departureTime = formatTime(tempTime + elem.stopTime + data.tbFront || 0);
+                } else {
+                    elem.departureTime = formatTime(tempTime + elem.stopTime);
+                }
+
+                const runLevelObj = this.defaultSpeedLevelList.find(speedLevel=>{ return speedLevel.value == runLevel; });
+                const realRunlevel = this.compuntedRunTime(list, index, runLevel);
+
+                elem.speedLevelTime = realRunlevel;
+                elem.speedLevel = runLevelObj.label;
+
+                let fronTime = 0;
+                if (index == 0 && String(this.startTbFront) == 'false') {
+                    const data = this.reentryData[elem.stationCode] || {};
+                    fronTime = data.tbTo || 0;
+                } else if (index == list.length - 2 && String(this.endTbFront) == 'false') {
+                    const data = this.reentryData[list[index + 1].stationCode] || {};
+                    fronTime = data.tbTo || 0;
+                } else if (index == list.length - 1 && String(this.endTbFront) == 'true') {
+                    const data = this.reentryData[list[index].stationCode] || {};
+                    fronTime = data.tbFront || 0;
+                }
+
+                tempTime = tempTime + fronTime + elem.stopTime + elem.speedLevelTime;
+            });
+
+            this.editModel.endTime = formatTime(tempTime - list[list.length - 1].stopTime);
+            // }
+        },
+        loadInitData(params) {
+            const lineCode = this.$route.query.lineCode;
+            const mapId = this.$route.query.mapId;
+            this.isPlan = params.isPlan;
+            this.tripNumber = params.tripNumber;
+            this.serviceNumber = params.serviceNumber;
+            this.planId = this.$route.query.planId;
+            this.loadRunPlanId = params.loadRunPlanId;
+            this.PlanParser = this.$theme.loadPlanParser(lineCode);
+
+            if (mapId) {
+                getRunplanConfig(mapId).then(resp => {
+                    const data = resp.data;
+                    this.reentryData = data.config.reentryData;
+                });
+
+                getMapStationRunUser(mapId).then(resp => {
+                    const list = resp.data.list;
+                    list.forEach(elem => {
+                        this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
+                    });
+                    getStationStopTime(mapId).then(response=>{
+                        const stopTimeList = response.data.list;
+                        stopTimeList.forEach(element=>{
+                            this.stopTimeMap[element.stationCode] = {parkingTime:element.parkingTime};
+                        });
+                        this.initTaskData(params);
+                        // this.dialogShow = true;
+                    });
+                });
+            }
+        },
+        initTaskData(params) {
+            if (params.rowData && params.rowData.arriveConfigList.length > 0) {
+                const paramData = params.rowData;
+                this.initRunlevel(paramData);
+                this.editModel.arriveConfigList = paramData.arriveConfigList;
+                if (paramData.routingCode) {
+                    this.editModel.routingCode = paramData.routingCode;
+                } else {
+                    this.editModel.tripNumber = this.tripNumber;
+                }
+                this.editModel.startStationCode = paramData.startStationCode;
+                this.editModel.endStationCode = paramData.endStationCode;
+                this.editModel.startTime = paramData.startTime;
+                this.editModel.endTime = paramData.endTime;
+                this.editModel.endSectionCode = paramData.endSectionCode;
+                this.editModel.startSectionCode = paramData.startSectionCode;
+                this.editModel.id = paramData.id;
+                this.startTbFront = paramData.startTbFront;
+                this.endTbFront = paramData.endTbFront;
+                this.computedDetailList();
+            } else {
+                const editData = this.$store.state.runPlan.editData[this.serviceNumber];
+                if (editData) {
+                    const trainInfo = editData.trainMap[this.tripNumber];
+                    const lastIndex = trainInfo.stationTimeList.length - 1;
+                    this.editModel = {
+                        tripNumber: this.tripNumber,
+                        startTime: formatTime(trainInfo.startSecondTime + 7200),
+                        endTime: formatTime(trainInfo.endSecondTime + 7200),
+                        arriveConfigList: [],
+                        startStationCode:trainInfo.stationTimeList[0].stationCode,
+                        endStationCode:trainInfo.stationTimeList[lastIndex].stationCode,
+                        startSectionCode:trainInfo.startSectionCode,
+                        endSectionCode:trainInfo.endSectionCode
+                    };
+                    if (trainInfo.startSectionCode != trainInfo.stationTimeList[0].sectionCode) {
+                        this.startTbFront = false;
+                        // this.editModel.startTime = formatTime(trainInfo.startSecondTime + 7200);
+                        const newModel = {
+                            sectionCode:trainInfo.startSectionCode,
+                            stationCode:trainInfo.stationTimeList[0].stationCode,
+                            // // speedLevel:'默认',
+                            departureTime: formatTime(trainInfo.startSecondTime + 7200),
+                            arriveTime: formatTime(trainInfo.startSecondTime + 7200),
+                            stopTime:0
+                        };
+                        this.editModel.arriveConfigList.push(newModel);
+                    }
+
+                    const newstationTimeList = [];
+                    let current = {};
+
+                    trainInfo.stationTimeList.forEach((stationTime, index)=>{
+                        if (index % 2 == 0) {
+                            current = {};
+                            current.stationCode = stationTime.stationCode;
+                            current.sectionCode = stationTime.sectionCode;
+                            current.arriveTime = stationTime.secondTime;
+                        } else {
+                            current.departureTime = stationTime.secondTime;
+                            newstationTimeList.push(current);
+                        }
+                    });
+
+                    newstationTimeList.forEach((newstationTime, index)=>{
+                        if (trainInfo.startSectionCode != trainInfo.stationTimeList[0].sectionCode) {
+                            index += 1;
+                        }
+                        const newModel = {
+                            sectionCode:newstationTime.sectionCode,
+                            stationCode:newstationTime.stationCode,
+                            arriveTime: formatTime(newstationTime.arriveTime + 7200),
+                            departureTime: formatTime(newstationTime.departureTime + 7200),
+                            stopTime:newstationTime.departureTime - newstationTime.arriveTime
+                        };
+                        this.editModel.arriveConfigList.push(newModel);
+                    });
+
+                    if (trainInfo.endSectionCode != trainInfo.stationTimeList[lastIndex].sectionCode) {
+                        this.endTbFront = false;
+                        this.editModel.endTime = formatTime(trainInfo.endSecondTime + 7200);
+                        const newModel = {
+                            sectionCode:trainInfo.endSectionCode,
+                            stationCode:trainInfo.stationTimeList[lastIndex].stationCode,
+                            // // speedLevel:'默认',
+                            departureTime: formatTime(trainInfo.endSecondTime + 7200),
+                            arriveTime: formatTime(trainInfo.endSecondTime + 7200),
+                            stopTime:0
+                        };
+                        this.editModel.arriveConfigList.push(newModel);
+                    } else {
+                        if (trainInfo.reentry) {
+                            this.endTbFront = true;
+                        }
+                    }
+
+                    this.initRunlevel(this.editModel);
+                    // this.dialogShow = true;
+                    this.computedDetailList();
+                }
+            }
+        },
+        initRunlevel(paramData) {
+            const speedLevelData = this.stopStationMap[[paramData.arriveConfigList[0].sectionCode, paramData.arriveConfigList[1].sectionCode].toString()];
+            if (speedLevelData) {
+                switch (paramData.arriveConfigList[0].speedLevelTime) {
+                case speedLevelData.l1: {
+                    this.defaultSpeedLevel = 'l1';
+                    break;
+                }
+                case speedLevelData.l2: {
+                    this.defaultSpeedLevel = 'l2';
+                    break;
+                }
+                case speedLevelData.l3: {
+                    this.defaultSpeedLevel = 'l3';
+                    break;
+                }
+                case speedLevelData.l4: {
+                    this.defaultSpeedLevel = 'l4';
+                    break;
+                }
+                case speedLevelData.l5: {
+                    this.defaultSpeedLevel = 'l5';
+                    break;
+                }
+                default: {
+                    this.defaultSpeedLevel = 'l1';
+                    break;
+                }
+                }
+            }
+        },
+        doShow(params) {
+            this.loadInitData(params);
+        },
+        doClose() {
+            this.$emit('doClose');
+        },
+        buildModel() {
+            return {
+                planId: this.$route.query.planId || this.loadRunPlanId,
+                // routingCode: this.editModel.routingCode,
+                tripNumber: this.tripNumber,
+                startTime:this.editModel.arriveConfigList[0].arriveTime,
+                endTime: this.editModel.arriveConfigList[this.editModel.arriveConfigList.length - 1].departureTime,
+                arriveConfigList: this.editModel.arriveConfigList,
+                SDTNumber: `${this.serviceNumber}${this.tripNumber}`
+            };
+        },
+        handleCommit() {
+            if (this.isPlan) {
+                // 计划修改任务
+                this.$emit('dispatchOperate', { dialogName: 'editPlanningTrain', operate: 'handleConfirmUpdateTask', params: Object.assign({}, this.editModel) });
+            } else {
+                // 直接修改
+                updatePlanTrip(this.buildModel()).then(resp => {
+                    this.$emit('refresh');
+                    this.$message.success(this.$t('planMonitor.modifying.modifyTaskSuccess'));
+                }).catch(() => {
+                    this.$messageBox(this.$t('planMonitor.modifying.modifyTaskFailed'));
+                });
+            }
+            this.doClose();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .lineHeight{
+        height: 28px;
+        line-height: 28px;
+    }
+    /deep/ {
+        .el-row {
+            margin-bottom: 5px !important;
+        }
+    }
+    .add-task{
+      /deep/ {
+        .el-dialog__body{
+          padding: 0 20px;
+        }
+        .el-dialog .el-input {
+            width: 120px !important;
+        }
+        .dialog-footer{
+            display: flex;
+            justify-content: center;
+        }
+      }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/movePlaningTrain.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/movePlaningTrain.vue
new file mode 100644
index 000000000..398b84745
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/movePlaningTrain.vue
@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool duplicate-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="420px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row type="flex" justify="center">
+      <el-radio-group v-model="model.forward">
+        <el-radio :label="true">{{ $t('planMonitor.forward') }}</el-radio>
+        <el-radio :label="false">{{ $t('planMonitor.backward') }}</el-radio>
+      </el-radio-group>
+    </el-row>
+    <el-row style="margin: 10px 0px">
+      <el-col :span="5" :offset="4">{{ $t('planMonitor.intervals') }}</el-col>
+      <el-col :span="10">
+        <el-input-number v-model="model.intervals" size="mini" :min="30" controls-position="right" />
+        <span>{{ $t('global.second') }}</span>
+      </el-col>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { movePlaningService } from '@/api/runplan';
+
+export default {
+    name: 'MovePlaningTrain',
+    components: {
+    },
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            model: {
+                serviceNumber: '',
+                forward: false,
+                intervals: 0
+            }
+        };
+    },
+    computed: {
+        title() {
+            return '平移列车';
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow(params) {
+            this.model.serviceNumber = params.serviceNumber;
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        handleCommit() {
+            this.model['planId'] = this.$route.query.planId || this.loadRunPlanId;
+            this.model['serviceNumber'] = this.model.serviceNumber;
+            this.doClose();
+            movePlaningService(this.model).then(resp => {
+                this.$emit('refresh');
+                this.$message.success('平移列车成功！');
+            }).catch((error) => {
+                if (error.code === 500001) {
+                    this.$messageBox('平移列车失败' + this.$t('tip.duplicatePlanFailedTips'));
+                } else {
+                    this.$messageBox('平移列车失败！');
+                }
+
+            });
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import "src/styles/mixin.scss";
+	.duplicate-train{
+		/deep/ {
+			.el-dialog__body{
+				padding: 0 20px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/offLine.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/offLine.vue
new file mode 100644
index 000000000..342394e08
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/offLine.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool add-planning-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    :width="width + 'px'"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+    append-to-body
+  >
+    <el-row>
+      <el-col :span="24" :offset="1">
+        <i class="el-icon-warning" />
+        {{ params.message }}
+      </el-col>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+    name: 'OffLine',
+    components: {
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            params: {},
+            title:this.$t('planMonitor.updateStation.deletePlanCar')
+        };
+    },
+    computed: {
+        width() {
+            if (this.params.width) {
+                return this.params.width;
+            } else {
+                return 400;
+            }
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow(params) {
+            if (params.operate == 'AddPlanningTrain') {
+                this.title = this.$t('planMonitor.addPlanTrain');
+            } else {
+                this.title = this.$t('planMonitor.updateStation.deletePlanCar');
+            }
+            this.params = params || {};
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        handleCommit() {
+            this.$emit('handleConfirm', this.params);
+            this.doClose();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-input {
+            width: 40px;
+        }
+    }
+	.add-planning-train{
+      /deep/ {
+        .el-dialog__body{
+          padding: 10px 20px;
+        }
+        .dialog-footer{
+            display: flex;
+            justify-content: center;
+        }
+      }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/systermOut.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/systermOut.vue
new file mode 100644
index 000000000..e7ce60744
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/systermOut.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool systerm-out"
+    :title="title"
+    :visible.sync="dialogShow"
+    :width="width + 'px'"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-input v-model="context" type="textarea" :rows="10" readonly />
+    <span slot="footer" class="dialog-footer">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+    name: 'SystermOut',
+    components: {
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            params: {
+                width: 400,
+                contextList: []
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.updateStation.systemOutPut');
+        },
+        width() {
+            if (this.params.width) {
+                return this.params.width;
+            } else {
+                return 400;
+            }
+        },
+        context() {
+            return this.params.contextList.join('\n') || '';
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow(params) {
+            this.params = params || {};
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        handleCommit() {
+            this.doClose();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+	.systerm-out{
+		/deep/ {
+			.el-dialog__body{
+				padding: 10px 20px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/menus/taskDialog.vue b/src/views/newMap/display/terminals/diagramEdit/components/menus/taskDialog.vue
new file mode 100644
index 000000000..bb0f81bc6
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/menus/taskDialog.vue
@@ -0,0 +1,86 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool task-dialog"
+    :title="title"
+    :visible.sync="dialogShow"
+    :width="width"
+    :before-close="doClose"
+    :z-index="2000"
+    top="50px"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <add-task v-if="dialogType =='addTask'" ref="addTask" @dispatchOperate="dispatchOperate" @refresh="refresh" @doClose="doClose" />
+    <delete-task v-if="dialogType =='deleteTask'" ref="deleteTask" @dispatchOperate="dispatchOperate" @refresh="refresh" @doClose="doClose" />
+    <modifying-task v-if="dialogType =='modifyingTask'" ref="modifyingTask" @dispatchOperate="dispatchOperate" @refresh="refresh" @doClose="doClose" />
+
+  </el-dialog>
+
+</template>
+<script>
+import AddTask from './addTask';
+import DeleteTask from './deleteTask';
+import ModifyingTask from './modifyingTask';
+export default {
+    name: 'TaskDialog',
+    components: {
+        AddTask,
+        DeleteTask,
+        ModifyingTask
+    },
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            title:'',
+            dialogType:'',
+            width:'400px'
+        };
+    },
+    methods: {
+        doShow(params) {
+            const dialogMap = {
+                'addTask':{
+                    title:this.$t('planMonitor.addTask'),
+                    width:'880px'
+                },
+                'deleteTask':{
+                    title:this.$t('planMonitor.deleteTask'),
+                    width:'400px'
+                },
+                'modifyingTask':{
+                    title:this.$t('planMonitor.modifying.modifyTask'),
+                    width:'1000px'
+                }
+            };
+            const dialog = dialogMap[params.dialogType];
+            this.title = dialog.title;
+            this.width = dialog.width;
+            this.dialogType = params.dialogType;
+            this.dialogShow = true;
+            params.loadRunPlanId = this.loadRunPlanId;
+            this.$nextTick(()=>{
+                this.$refs[this.dialogType].loadInitData(params);
+            });
+        },
+        doClose() {
+            this.dialogShow = false;
+            this.dialogType = '';
+        },
+        dispatchOperate(data) {
+            this.$emit('dispatchOperate', data);
+        },
+        refresh() {
+            this.$emit('refresh');
+        }
+    }
+};
+</script>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/importRouteOperate.vue b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/importRouteOperate.vue
new file mode 100644
index 000000000..8244ca564
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/importRouteOperate.vue
@@ -0,0 +1,267 @@
+<template>
+  <el-dialog v-dialogDrag title="导入公共交路" :visible.sync="show" width="80%" :before-do-close="doClose" append-to-body>
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+    <pre-view-field ref="previewField" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+// import { listPublicRoutingData, pullPublicRoutingData} from '@/api/jmap/mapdraft';
+import { listPublicRoutingData} from '@/api/jmap/mapdraft';
+import PreViewField from './preview';
+
+export default {
+    name: 'ImportRouteDetail',
+    components: {
+        PreViewField
+    },
+    data() {
+        return {
+            show: false,
+            pagerConfig: {
+                pageSize: 'pageSize',
+                pageIndex: 'pageNum'
+            },
+            queryForm: {
+                labelWidth: '120px',
+                queryObject: {
+                    startStationCode: {
+                        type: 'select',
+                        label: this.$t('map.startStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    endStationCode: {
+                        type: 'select',
+                        label: this.$t('map.endStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    startSectionCode: {
+                        type: 'select',
+                        label: '起始区段',
+                        config: {
+                            data: []
+                        }
+                    },
+                    endSectionCode: {
+                        type: 'select',
+                        label: '终到区段',
+                        config: {
+                            data: []
+                        }
+                    }
+                }
+            },
+            queryList: {
+                query: this.queryFunction,
+                afterQuery: this.afterQuery,
+                selectCheckShow: true,
+                selectCheckClass:'selectCheckClass',
+                selectCheckSize:'medium',
+                selectCheckText:'导入',
+                selectCheckLoading:false,
+                indexShow: true,
+                columns: [
+                    {
+                        title: '交路名称',
+                        prop: 'name',
+                        width:'260'
+                    },
+                    {
+                        title: this.$t('map.startStation'),
+                        prop: 'startStationCode'
+
+                    },
+                    {
+                        title: '起始区段',
+                        prop: 'startSectionCode'
+                    },
+                    {
+                        title: this.$t('map.endStation'),
+                        prop: 'endStationCode'
+                    },
+                    {
+                        title: '终到区段',
+                        prop: 'endSectionCode'
+                    },
+                    {
+                        title: this.$t('map.routingDirection'),
+                        prop: 'right',
+                        type: 'tag',
+                        columnValue: (row) => { if (row.right) { return '右行'; } else { return '左行'; } },
+                        tagType: (row) => { if (row.right) { return 'primary'; } else { return 'success'; } }
+                    },
+                    // {
+                    //     title: this.$t('map.destination'),
+                    //     prop: 'destinationCode'
+                    // },
+                    // {
+                    //     title: this.$t('map.remarks'),
+                    //     prop: 'remarks'
+                    // },
+                    {
+                        type: 'button',
+                        title: this.$t('map.sectionData'),
+                        buttons: [
+                            {
+                                name: this.$t('map.preview'),
+                                handleClick: this.sectionDetail
+                            }
+                        ]
+                    }
+                    // {
+                    //     type: 'button',
+                    //     title: this.$t('map.operation'),
+                    //     width: '300',
+                    //     buttons: [
+                    //         {
+                    //             name: this.$t('map.compile'),
+                    //             handleClick: this.editObj
+                    //         },
+                    //         {
+                    //             name: this.$t('map.deleteObj'),
+                    //             type: 'danger',
+                    //             handleClick: this.deleteObj
+                    //         }
+                    //     ]
+                    // }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'stationList'
+        ])
+    },
+    mounted() {
+        // this.acquireMapList();
+        this.initQueryObject();
+    },
+    methods: {
+        doShow() {
+            this.show = true;
+            this.reloadTable();
+        },
+        initQueryObject() {
+            const stationList = [];
+            if (this.stationList && this.stationList.length) {
+                this.stationList.forEach(elem => {
+                    stationList.push({ label: this.formatName(elem.code), value: elem.code });
+                });
+                this.queryForm.queryObject.startStationCode.config.data = stationList;
+                this.queryForm.queryObject.endStationCode.config.data = stationList;
+            }
+            const sectionList = [];
+            if (this.sectionList && this.sectionList.length) {
+                this.sectionList.forEach(elem => {
+                    if (elem.standTrack || elem.reentryTrack || elem.transferTrack) {
+                        sectionList.push({ label: this.formatName(elem.code), value: elem.code });
+                    }
+                });
+                this.queryForm.queryObject.startSectionCode.config.data = sectionList;
+                this.queryForm.queryObject.endSectionCode.config.data = sectionList;
+            }
+        },
+        doClose() {
+            this.show = false;
+        },
+        formatName(code) {
+            let name = '';
+            const device = this.$store.getters['map/getDeviceByCode'](code);
+            if (device) {
+                name = device.name;
+            }
+
+            return name;
+        },
+        queryFunction(params) {
+            if (this.$route.query.mapId) {
+                return listPublicRoutingData(this.$route.query.mapId, params);
+            }
+        },
+        afterQuery(data) {
+            if (data && data.list) {
+                const that = this;
+                const list = data.list;
+                if (list) {
+                    list.map(elem => {
+                        elem.startStationCode = that.formatName(elem.startStationCode);
+                        elem.startSectionCode = that.formatName(elem.startSectionCode);
+                        elem.endStationCode = that.formatName(elem.endStationCode);
+                        elem.endSectionCode = that.formatName(elem.endSectionCode);
+                    });
+                }
+            }
+            return data;
+        },
+        sectionDetail(index, row) {
+            const sectionDict = {};
+            const stationDict = {};
+            this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
+            this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
+
+            const fieldList = {
+                id: row.id,
+                mapId: this.$route.params.mapId,
+                title: '区段列表',
+                name: row.name,
+                model: {
+                    field: 'parkSectionCodeList',
+                    items: [
+                        { prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
+                        {
+                            prop: 'stationCode', label: '车站名称', type: 'select', options: stationDict
+                        },
+                        { prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
+                        {
+                            prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
+                        }
+                    ]
+                }
+            };
+            this.$refs.previewField.doShow(fieldList, row.parkSectionCodeList);
+        },
+        reloadTable() {
+            if (this.queryList && this.queryList.reload) {
+                this.queryList.reload();
+            }
+        },
+        // selectAllClick(selection) {
+        //     const routeList = [];
+        //     selection.forEach(each=>{
+        //         routeList.push(each.id);
+        //     });
+        //     if (routeList.length > 0) {
+        //         this.queryList.selectCheckLoading = true;
+        //         pullPublicRoutingData(this.$route.query.mapId, routeList ).then(res=>{
+        //             this.queryList.selectCheckLoading = false;
+        //             this.$message.success('导入公共交路成功');
+        //             this.doClose();
+        //         }).catch((error) => {
+        //             this.$messageBox('导入公共交路失败' + ':' + error.message);
+        //             this.queryList.selectCheckLoading = false;
+        //         });
+        //     }
+        // }
+    }
+};
+</script>
+<style lang="scss">
+.selectCheckClass{
+    text-align: center;
+    padding: 14px 0px 20px 0px;
+}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/preview.vue b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/preview.vue
new file mode 100644
index 000000000..ca8a546db
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/preview.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    :title="title"
+    :visible.sync="show"
+    width="30%"
+    :before-close="doClose"
+    center
+    append-to-body
+  >
+    <el-table :data="data" border style="width: 100%">
+      <template v-for="(item, index) in form">
+        <el-table-column :key="index" :label="item.label">
+          <template slot-scope="scope">
+            <template v-if="item.type === 'select'">
+              <el-tooltip effect="dark" :content="item.options[scope.row[item.prop]]" placement="top">
+                <span>{{ item.options[scope.row[item.prop]] }}</span>
+              </el-tooltip>
+            </template>
+            <template v-if="item.type === 'text'">
+              <el-tooltip effect="dark" :content="scope.row[item.prop]" placement="top">
+                <span>{{ scope.row[item.prop] }}</span>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'DictionaryDetailEdit',
+    data() {
+        return {
+            show: false,
+            title: '',
+            name: '',
+            form: [],
+            data: []
+        };
+    },
+    methods: {
+        doShow(fieldList, dataList) {
+            if (fieldList.model) {
+                const items = fieldList.model.items;
+                if (items) {
+                    this.form = items;
+                    this.name = fieldList.name;
+                    this.data = dataList;
+                    this.title = fieldList.title;
+                }
+                this.show = true;
+            }
+        },
+        doClose(done) {
+            this.show = false;
+        }
+    }
+};
+</script>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeConfig.vue b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeConfig.vue
new file mode 100644
index 000000000..2e23da749
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeConfig.vue
@@ -0,0 +1,753 @@
+<template>
+  <div class="routeConfig">
+    <!-- <div style="position:relative"> -->
+    <div class="routeConfigTop">
+      <el-button type="text" class="mapEdit_box" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
+      <el-button type="text" class="mapEdit_box" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
+      <!-- <el-button type="text" class="mapEdit_box" @click="importRouteEvent">导入公共交路</el-button> -->
+    </div>
+    <el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini" class="definition">
+      <el-form-item :label="$t('map.routingName')" prop="name">
+        <el-input v-model="addModel.name" />
+      </el-form-item>
+      <el-form-item :label="$t('map.startStationCodeColon')" prop="startStationCode">
+        <el-select v-model="addModel.startStationCode" clearable :filterable="true" disabled @change="changeStartStation">
+          <el-option
+            v-for="item in filterStationList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('map.startSectionColon')" prop="startSectionCode">
+        <el-select v-model="addModel.startSectionCode" clearable :filterable="true" :disabled="editShow" @change="changeStartSection">
+          <el-option
+            v-for="item in filterStartSectionList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          />
+        </el-select>
+        <el-button
+          :disabled="editShow"
+          :type=" field === 'startSectionCode' ? 'danger' : 'primary'"
+          @click="hover('startSectionCode')"
+        >{{ $t('map.activate') }}</el-button>
+      </el-form-item>
+      <el-form-item :label="$t('map.endStationColon')" prop="endStationCode">
+        <el-select v-model="addModel.endStationCode" :filterable="true" disabled @change="changeEndStation">
+          <el-option
+            v-for="item in filterStationList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('map.endSectionColon')" prop="endSectionCode">
+        <el-select v-model="addModel.endSectionCode" :filterable="true" clearable :disabled="editShow || !isStartSelected" @change="changeEndSection">
+          <el-option
+            v-for="item in filterEndSectionList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          />
+        </el-select>
+        <el-button
+          :disabled="editShow || !isStartSelected"
+          :type=" field === 'endSectionCode' ? 'danger' : 'primary'"
+          @click="hover('endSectionCode')"
+        >{{ $t('map.activate') }}</el-button>
+      </el-form-item>
+      <el-form-item :label="$t('map.destinationCode')" prop="destinationCode" :disabled="editShow">
+        <el-input v-model="addModel.destinationCode" />
+      </el-form-item>
+      <el-form-item :label="$t('map.routingDirection')" prop="directionCode">
+        <el-select v-model="addModel.right" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+          <el-option
+            v-for="item in DirectionCodeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('map.remarksColon')" prop="remarks">
+        <el-input v-model="addModel.remarks" type="textarea" :rows="4" :placeholder="$t('map.pleaseSelect')" />
+      </el-form-item>
+      <el-form-item :label="$t('map.trafficSegmentData')" prop="parkSectionCodeList">
+        <el-button type="primary" size="small" :loading="generating" style="margin-bottom:10px" @click.native.prevent="generateParkSection">生成经停区段</el-button>
+        <el-table
+          :data="addModel.parkSectionCodeList"
+          border
+          style="width:97%"
+          height="300"
+          class="el-parkSectionCode-table"
+        >
+          <el-table-column prop="sectionCode" :label="$t('map.stationName')">
+            <template slot-scope="scope">
+              <span>{{ formatName(scope.row.stationCode) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="sectionCode" :label="$t('map.sectionName')">
+            <template slot-scope="scope">
+              <span>{{ formatName(scope.row.sectionCode) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('map.operation')" width="50">
+            <template slot-scope="scope">
+              <el-button
+                v-show="scope.$index!=0&&scope.$index!=addModel.parkSectionCodeList.length-1"
+                type="text"
+                size="small"
+                @click.native.prevent="deleteSection(addModel.parkSectionCodeList, scope.$index)"
+              >
+                {{ $t('map.remove') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="margin-top:10px;">
+          <span>车站:</span>
+          <el-select v-model="stationCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+            <el-option
+              v-for="item in filterStationList"
+              :key="item.code"
+              :label="`${item.name}(${item.code})`"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :disabled="!allowSelect"
+            :type="field === 'routingStation' ? 'danger' : 'primary'"
+            @click="hover('routingStation')"
+          >{{ $t('map.activate') }}</el-button>
+        </div>
+        <div style="margin-top:10px;">
+          <span>区段:</span>
+          <el-select v-model="sectionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+            <el-option
+              v-for="item in filterStandSection"
+              :key="item.code"
+              :label="`${item.name}(${item.code})`"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'routingSection' ? 'danger' : 'primary'"
+            :disabled="!allowSelect"
+            @click="hover('routingSection')"
+          >{{ $t('map.activate') }}</el-button>
+          <el-button
+            type="primary"
+            :disabled="!allowSelect"
+            @click="pushSection({stationCode: stationCode, sectionCode: sectionCode},'center')"
+          >
+            {{ $t('map.add') }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <div class="buttonGroup">
+      <el-button-group style="float:right">
+        <el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
+        </el-button>
+        <el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
+        </el-button>
+      </el-button-group>
+    </div>
+    <!-- </div> -->
+    <route-operate ref="routeOperate" @routingSelected="routingSelected" />
+    <!-- <import-route-operate ref="importRouteOperate" /> -->
+
+  </div>
+</template>
+<script>
+import RouteOperate from './routeOperate';
+// import ImportRouteOperate from './importRouteOperate';
+import { setUID } from '@/jmapNew/utils/Uid';
+import { addRoutingData, updateRoutingData, gernateRoutingSectionInRunplan } from '@/api/jmap/mapdraft';
+import { mapGetters } from 'vuex';
+import { formatName } from '@/jmapNew/theme/parser/util';
+import Sortable from 'sortablejs';
+export default {
+    name:'RouteConfig',
+    components: {
+        RouteOperate
+        // ImportRouteOperate
+    },
+    data() {
+        return {
+            field: '',
+            editShow: false,
+            isSave: true,
+            isStartSelected:false,
+            allowSelect:false,
+            loading: false,
+            generating:false,
+            stationCode: '',
+            sectionCode: '',
+            DirectionCodeList: [{label: '右行', value: true}, {label: '左行', value: false}],
+            oldStartSectionCode: '',
+            oldEndSectionCode: '',
+            addModel: {
+                name: '',
+                mapId: '',
+                code: '',
+                // withLoop:false,
+                right: true,
+                destinationCode: '',
+                startStationCode: '',
+                startSectionCode: '',
+                endStationCode: '',
+                endSectionCode: '',
+                remarks: '',
+                userId: '',
+                parkSectionCodeList: []
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入交路名称', trigger: 'change' }
+                ],
+                startStationCode: [
+                    { required: true, message: '请选择起始站', trigger: 'change' }
+                ],
+                startSectionCode: [
+                    { required: true, message: '请选择起始区段', trigger: 'change' }
+                ],
+                endStationCode: [
+                    { required: true, message: '请选择终到站', trigger: 'change' }
+                ],
+                endSectionCode: [
+                    { required: true, message: '请选择终到区段', trigger: 'change' }
+                ]
+            },
+            oldsection: []
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'stationList'
+        ]),
+        filterStartSectionList() {
+            if (this.sectionList) {
+                return this.sectionList.filter(elem => { return elem.reentryTrack || elem.transferTrack; });
+            } else {
+                return [];
+            }
+        },
+        filterEndSectionList() {
+            if (this.sectionList) {
+                return this.sectionList.filter(elem => { return elem.reentryTrack || elem.transferTrack; });
+            } else {
+                return [];
+            }
+        },
+        filterStandSection() {
+            if (this.sectionList) {
+                return this.sectionList.filter(elem => { return elem.standTrack; });
+            } else {
+                return [];
+            }
+        },
+        filterStationList() {
+            if (this.stationList) {
+                return this.stationList.filter(elem => { return true; });
+            } else {
+                return [];
+            }
+        },
+        routeName: {
+            get() {
+                var name = '';
+                if (this.isSave) {
+                    let begStation = ''; let endStation = '';
+                    let begSection = ''; let endSection = '';
+                    if (this.stationList) {
+                        this.stationList.forEach(elem => {
+                            if (elem.code === this.addModel.startStationCode) begStation = elem.name;
+                            if (elem.code === this.addModel.endStationCode) endStation = elem.name;
+                        });
+                    }
+                    if (this.sectionList) {
+                        this.sectionList.forEach(elem => {
+                            if (elem.code === this.addModel.startSectionCode) begSection = '(' + elem.name + ')';
+                            if (elem.code === this.addModel.endSectionCode) endSection = '(' + elem.name + ')';
+                        });
+                    }
+                    name = begStation + begSection + '-' + endStation + endSection;
+                }
+                return name;
+            }
+
+        }
+    },
+    watch: {
+        mapInfo(val) {
+            if (val) {
+                this.addModel.mapId = val.id;
+            }
+        },
+        'addModel.parkSectionCodeList':function(val, old) {
+            if (val.length > 0) {
+                this.changeSectionSelected(val, true);
+            }
+        },
+        routeName(val, old) {
+            if (val) {
+                this.addModel.name = val;
+            }
+        },
+        sectionCode(val) {
+            val && this.changeBelongSection(val);
+        }
+    },
+    mounted() {
+        this.rowDrop();
+    },
+    methods:{
+        previewRouteEvent() {
+            this.$refs.routeOperate.doShow();
+        },
+        // importRouteEvent() {
+        //     this.$refs.importRouteOperate.doShow();
+        // },
+        createRouteEvent() {
+            this.clear();
+        },
+        routingSelected(data) {
+            this.editData(data);
+        },
+        editData(data) {
+            this.isSave = false;
+            this.allowSelect = true;
+            this.isStartSelected = true;
+            this.editShow = true;
+            this.addModel = data;
+        },
+        clear() {
+            if (this.$refs && this.$refs.form) {
+                this.changeSectionSelected(this.addModel.parkSectionCodeList, false);
+                delete this.addModel.id;
+                this.$refs.form.resetFields();
+                this.addModel.mapId = this.$route.query.mapId;
+                this.addModel.parkSectionCodeList = [];
+                this.addModel.code = '';
+                this.stationCode = '';
+                this.sectionCode = '';
+                this.isSave = true;
+                this.allowSelect = false;
+                this.isStartSelected = false;
+                this.editShow = false;
+                this.field = '';
+            }
+        },
+        setSelected(selected) {
+            if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'startStationCode'.toUpperCase()) {
+                this.addModel.startStationCode = selected.code;
+                this.judgeAllowSelected();
+                this.addStartSectionData(true);
+
+            } else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'endStationCode'.toUpperCase()) {
+                this.addModel.endStationCode = selected.code;
+                this.judgeAllowSelected();
+                this.addEndSectionData(true);
+            } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
+                if (selected.code != this.addModel.endSectionCode && (selected.reentryTrack || selected.transferTrack)) {
+                    this.popSection(this.addModel, 'startSectionCode');
+                    if (selected.belongStation) {
+                        this.addModel.startStationCode = selected.belongStation;
+                    }
+                    this.addModel.startSectionCode = selected.code;
+                    this.judgeAllowSelected();
+                    this.addStartSectionData(false);
+                    this.oldStartSectionCode = selected.code;
+                } else {
+                    this.$message.error('请选择正确的起始区段');
+                }
+            } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
+                if (selected.code != this.addModel.startSectionCode && (selected.reentryTrack || selected.transferTrack)) {
+                    this.popSection(this.addModel, 'endSectionCode');
+                    if (this.addModel.startSectionCode == selected.code) {
+                        this.$message.error('起始区段和终到区段不能相同');
+                        return false;
+                    }
+                    if (selected.belongStation) {
+                        this.addModel.endStationCode = selected.belongStation;
+                    }
+                    this.addModel.endSectionCode = selected.code;
+                    this.judgeAllowSelected();
+                    this.addEndSectionData(false);
+                    this.oldEndSectionCode = selected.code;
+                    this.addModel.destinationCode = selected.destinationCode || '';
+                } else {
+                    this.$message.error('请选择正确的终到区段');
+                }
+            } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() == 'routingSection'.toUpperCase()) {
+                if (selected.standTrack) {
+                    this.sectionCode = selected.code;
+                } else {
+                    this.$message.error('请选择正确的区段');
+                }
+            } else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() == 'routingStation'.toUpperCase()) {
+                this.stationCode = selected.code;
+            }
+        },
+        changeBelongSection(code) {
+            const section = this.$store.getters['map/getDeviceByCode'](code);
+            if (section && section.belongStation) {
+                this.stationCode = section.belongStation;
+            }
+        },
+        changeSectionSelected(selectedList, flag) {
+            if (this.oldsection && this.oldsection.length > 0) {
+                this.oldsection.forEach((section)=>{
+                    section.instance.drawBatchSelected(section, '');
+                });
+            }
+
+            this.oldsection = [];
+            if (this.addModel.parkSectionCodeList && this.addModel.parkSectionCodeList.length > 0) {
+                if (flag) {
+                    selectedList.forEach(each=>{
+                        const section = this.$store.getters['map/getDeviceByCode'](each.sectionCode);
+                        const list = section.logicSectionCodeList;
+                        if (list && list.length > 0) {
+                            list.forEach(logicSectionCode=>{
+                                const logicSection = this.$store.getters['map/getDeviceByCode'](logicSectionCode);
+                                logicSection.instance.drawBatchSelected(logicSection, 'routingSection');
+                                this.oldsection && this.oldsection.push(logicSection);
+                            });
+                        } else {
+                            section.instance.drawBatchSelected(section, 'routingSection');
+                            this.oldsection && this.oldsection.push(section);
+                        }
+                    });
+                } else {
+                    selectedList.forEach(each=>{
+                        const section = this.$store.getters['map/getDeviceByCode'](each.sectionCode);
+                        const list = section.logicSectionCodeList;
+                        if (list && list.length > 0) {
+                            list.forEach(logicSectionCode=>{
+                                const logicSection = this.$store.getters['map/getDeviceByCode'](logicSectionCode);
+                                logicSection.instance.drawBatchSelected(section, '');
+                            });
+                        } else {
+                            section.instance.drawBatchSelected(section, '');
+                        }
+                    });
+                }
+            }
+        },
+        changeStartStation(code, code2) {
+            this.judgeAllowSelected();
+            this.addStartSectionData(true);
+        },
+        changeStartSection(code) {
+            if (code) {
+                if (this.addModel.endSectionCode != code) {
+                    const section = this.$store.getters['map/getDeviceByCode'](code);
+                    if (section &&
+						section.belongStation) {
+                        this.addModel.startStationCode = section.belongStation;
+                    }
+                    this.popSection({startSectionCode: this.oldStartSectionCode}, 'startSectionCode');
+                    this.judgeAllowSelected();
+                    this.addStartSectionData(false);
+                    this.oldStartSectionCode = code;
+                } else {
+                    this.addModel.startSectionCode = this.oldStartSectionCode;
+                    this.$message.error('请选择正确的起始区段');
+                }
+            } else {
+                this.popSection({startSectionCode: this.oldStartSectionCode}, 'startSectionCode');
+                this.addModel.startStationCode = '';
+                this.addModel.startSectionCode = '';
+                this.oldStartSectionCode = '';
+            }
+        },
+        changeEndStation() {
+            this.judgeAllowSelected();
+            this.addEndSectionData(true);
+        },
+        changeEndSection(code) {
+            if (code) {
+                if (this.addModel.startSectionCode != code) {
+                    const section = this.$store.getters['map/getDeviceByCode'](code);
+                    if (section &&
+						section.belongStation) {
+                        this.addModel.endStationCode = section.belongStation;
+                    }
+                    this.addModel.destinationCode = section.destinationCode || '';
+                    this.popSection({endSectionCode: this.oldEndSectionCode}, 'endSectionCode');
+                    this.judgeAllowSelected();
+                    this.addEndSectionData(false);
+                    this.oldEndSectionCode = code;
+                } else {
+                    this.addModel.endSectionCode = this.oldEndSectionCode;
+                    this.$message.error('请选择正确的终到区段');
+                }
+            } else {
+                this.popSection({endSectionCode: this.oldEndSectionCode}, 'endSectionCode');
+                this.addModel.endStationCode = '';
+                this.addModel.endSectionCode = '';
+                this.oldEndSectionCode = '';
+            }
+        },
+        judgeAllowSelected() {
+            if (this.addModel.startStationCode != '' && this.addModel.startSectionCode != '' && this.addModel.endStationCode != '' && this.addModel.endSectionCode != '') {
+                this.allowSelect = true;
+            } else {
+                this.allowSelect = false;
+            }
+        },
+        addStartSectionData(isStation) {
+            if (this.addModel.startStationCode != '' && this.addModel.startSectionCode != '') {
+                this.isStartSelected = true;
+                this.pushSection({stationCode: this.addModel.startStationCode, sectionCode: this.addModel.startSectionCode}, 'top', isStation);
+            }
+        },
+        addEndSectionData(isStation) {
+            if (this.addModel.endStationCode != '' && this.addModel.endSectionCode != '') {
+                this.pushSection({stationCode: this.addModel.endStationCode, sectionCode: this.addModel.endSectionCode}, 'bottom', isStation);
+            }
+        },
+        buildModel(code) {
+            const model = Object.assign({}, this.addModel);
+            model['mapId'] = this.$route.query.mapId;
+            model['userId'] = this.$store.state.user.id;
+            if (code) { model['code'] = code; }
+            return model;
+        },
+        update() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    const data = this.buildModel();
+                    // delete data.withLoop;
+                    updateRoutingData(data).then(resp => {
+                        this.$message.success(this.$t('tip.pathUpdataSuccessful'));
+                        this.loading = false;
+                        this.clear();
+                    }).catch((error) => {
+                        this.$messageBox(this.$t('tip.pathUpdataFailed') + ':' + error.message);
+                        this.loading = false;
+                    });
+
+                }
+            });
+        },
+        save() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    addRoutingData(this.buildModel(setUID('Routing'))).then(resp => {
+                        this.$message.success(this.$t('tip.pathCreationSuccessful'));
+                        this.loading = false;
+                        this.clear();
+                    }).catch((error) => {
+                        this.$messageBox(this.$t('tip.createRoutingFailed') + ':' + error.message);
+                        this.loading = false;
+                    });
+                }
+            });
+        },
+        formatName(code) {
+            return formatName(code);
+        },
+        deleteSection(list, index) {
+            const data = list.splice(index, 1);
+            if (data.length > 0) {
+                const section = this.$store.getters['map/getDeviceByCode'](data[0].sectionCode);
+                section.instance.drawBatchSelected(section, '');
+            }
+        },
+        hover(field) {
+            this.field = field === this.field ? '' : field;
+        },
+        // 行拖拽
+        rowDrop() {
+            const that = this;
+            const tbody = document.querySelector('.el-parkSectionCode-table tbody', {filter:'.ignoreDrag'});
+            if (tbody) {
+                Sortable.create(tbody, {
+                    onEnd({ newIndex, oldIndex }) {
+                        const length = that.addModel.parkSectionCodeList.length - 1;
+                        if (newIndex != 0 && oldIndex != 0 && newIndex != length && oldIndex != length) {
+                            that.addModel.parkSectionCodeList.splice(newIndex, 0, that.addModel.parkSectionCodeList.splice(oldIndex, 1)[0]);
+                            const newArray = that.addModel.parkSectionCodeList.slice(0);
+                            that.addModel.parkSectionCodeList = [];
+                            that.$nextTick(function () {
+                                that.addModel.parkSectionCodeList = newArray;
+                            });
+                        } else {
+                            const newArray = that.addModel.parkSectionCodeList.slice(0);
+                            that.addModel.parkSectionCodeList = [];
+                            that.$nextTick(function () {
+                                that.addModel.parkSectionCodeList = newArray;
+                            });
+                        }
+                    }
+                });
+            }
+        },
+        pushSection(data, type, isStation) {
+            const list = this.addModel.parkSectionCodeList;
+            if (data && data.stationCode && data.sectionCode) {
+                const index = list.findIndex(elem => { return elem.sectionCode == data.sectionCode; });
+                switch (type) {
+                case 'center': {
+                    if (index < 0) {
+                        list.splice(list.length - 1, 0, data);
+                    } else {
+                        this.$messageBox('该区段已经在交路区段中存在');
+                    }
+                    break;
+                }
+                case 'top': {
+                    if (isStation) {
+                  	if (list.find(el => { el.sectionCode == this.addModel.startSectionCode; })) {
+                            list.splice(0, 1, data);
+                        } else {
+                    		list.unshift(data);
+                        }
+                    } else {
+                        if (index < 0) {
+                            if (list.find(el => { el.sectionCode == this.addModel.startSectionCode; })) {
+                                list.splice(0, 1, data);
+                            } else {
+                                list.unshift(data);
+                            }
+                        } else {
+                            if (index == list.length - 1 && list.length >= 2) {
+                                this.addModel.startSectionCode = list[0].sectionCode;
+                                this.addModel.startStationCode = list[0].stationCode;
+                                this.$messageBox('起始区段和终到区段不能相同');
+                            } else if (index != list.length - 1 && index != 0) {
+                                this.$messageBox('该区段已经在交路区段中存在');
+                            }
+                        }
+                    }
+                    break;
+                }
+                case 'bottom': {
+                    if (isStation) {
+                        if (list.find(el => { el.sectionCode == this.addModel.endSectionCode; })) {
+                            list.splice(list.length - 1, 1, data);
+                        } else {
+                            list.push(data);
+                        }
+                    } else {
+                        if (index < 0) {
+                            if (list.find(el => { el.sectionCode == this.addModel.endSectionCode; })) {
+                                list.splice(list.length - 1, 1, data);
+                            } else {
+                                list.push(data);
+                            }
+                        } else {
+                            if (index == 0 && list.length >= 2) {
+                                this.addModel.endSectionCode = list[list.length - 1].sectionCode;
+                                this.addModel.endStationCode = list[list.length - 1].stationCode;
+                                this.$messageBox('起始区段和终到区段不能相同');
+                            } else if (index != list.length - 1 && index != 0) {
+                                this.$messageBox('该区段已经在交路区段中存在');
+                            }
+                        }
+                    }
+                    break;
+                }
+                default: {
+                    if (index < 0) {
+                        list.splice(list.length - 1, 0, data);
+                    } else {
+                        this.$messageBox(this.$t('tip.routeSameID'));
+                    }
+                    break;
+                }
+                }
+                this.sectionCode = '';
+                this.stationCode = '';
+            }
+        },
+        popSection(data, type) {
+            const list = this.addModel.parkSectionCodeList;
+            const index = list.findIndex(el => { return el.sectionCode == data[type]; });
+            if (index >= 0) {
+                this.deleteSection(list, index);
+            }
+        },
+        generateParkSection() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.generating = true;
+                    gernateRoutingSectionInRunplan(this.buildModel(setUID('Routing'))).then(resp => {
+                        this.generating = false;
+                        if (resp.data.parkSectionCodeList && resp.data.parkSectionCodeList.length > 2) {
+                            this.addModel.parkSectionCodeList = resp.data.parkSectionCodeList;
+                        }
+                    }).catch((error) => {
+                        this.$messageBox('生成交路区段数据失败: ' + error.message);
+                        this.generating = false;
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.mapEdit_box{
+	float: right;
+	padding: 3px 0;
+	margin-right: 5px;
+}
+.routeConfig{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.routeConfigTop{
+    padding: 7px 20px 7px 0px;
+    background: #fff;
+    width: 100%;
+    z-index: 2;
+    height: 35px;
+    font-size: 16px;
+    -webkit-box-shadow: 0px 1px 3px #ccc;
+    box-shadow: 0px 1px 3px #ccc;
+}
+.routeConfigTop button{
+    display:inline-block;
+}
+.definition{
+    padding: 15px 30px 15px 0px;
+    height: 100%;
+    overflow: auto;
+    flex:1;
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: #c3c3c3;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 0;
+        background: #f0f0f0;
+
+    }
+}
+.buttonGroup{
+    width: 100%;
+    height: 40px;
+    background: #fff;
+    box-shadow: 0px -2px 5px #ccc;
+    padding-right: 26px;
+    padding-top: 4px;
+    z-index:2;
+}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeMap.vue b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeMap.vue
new file mode 100644
index 000000000..f250fd50b
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeMap.vue
@@ -0,0 +1,209 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogShow" custom-class="content-route" width="100%" :fullscreen="true" top="0px" :before-close="close" :z-index="2000" :append-to-body="true">
+    <div class="content-box">
+      <div v-if="type=='generateRouting'">
+        <gernarate-plan ref="gernaratePlanTrain" :load-run-plan-id="loadRunPlanId" @close="closeDialog" @mapLoading="mapLoading" />
+      </div>
+      <jlmap-visual ref="jlmapVisual" v-loading="loadingMap" @onMenu="onContextmenu" @onSelect="clickEvent" />
+      <!-- :style="{height: $store.state.app.height-54+'px' }" -->
+      <div v-if="type=='routeMap'" class="routeMap">
+        <route-config ref="routeConfig" />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import JlmapVisual from '@/views/newMap/jlmapNew/index';
+import { loadMapDataById } from '@/utils/loaddata';
+import { EventBus } from '@/scripts/event-bus';
+import RouteConfig from './routeConfig';
+import GernaratePlan from '../menus/gernaratePlanTrain';
+import { TrainingMode } from '@/scripts/ConstDic';
+
+export default {
+    name: 'RouteMap',
+    components: {
+        JlmapVisual,
+        RouteConfig,
+        GernaratePlan
+    },
+    props:{
+        loadRunPlanId: {
+            type: String,
+            default: function() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            type:'',
+            title:'',
+            dialogShow: false,
+            oldDevice: null,
+            oldsection:[],
+            isFirst:true,
+            loadingMap:false
+        };
+    },
+    watch: {
+        '$store.state.app.width': function(val) {
+            this.setWindowSize();
+        },
+        '$store.state.app.windowSizeCount': function() {
+            this.setWindowSize();
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        async doShow(type) {
+            this.type = type;
+            if (this.type == 'routeMap') {
+                this.title = '交路配置';
+            } else if (this.type == 'generateRouting') {
+                this.title = '生成计划';
+            }
+            this.dialogShow = true;
+            await this.setWindowSize();
+            if (this.isFirst) {
+                this.loadInitPage();
+            }
+            this.isFirst = false;
+            if (this.type == 'generateRouting') { this.$refs.gernaratePlanTrain.doShow(); }
+        },
+        // 获取设备数据
+        getDeviceByEm(em) {
+            var	device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
+            if (device) {
+                device._viewVal = em.val;
+            }
+            return device;
+        },
+        // 高亮设备
+        deviceHighLight(device, flag) {
+            if (device && device.instance && typeof device.instance.drawSelected === 'function' ) {
+                if (device._type === 'Section' && device.type === '04') {
+                    device.relevanceSectionList.forEach(item => {
+                        const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
+                        sectionModel && sectionModel.instance.drawSelected(flag);
+                    });
+                } else if (device._type === 'Section' && device.type === '01' && device.logicSectionCodeList && device.logicSectionCodeList.length) {
+                    device.logicSectionCodeList.forEach(item => {
+                        const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
+                        sectionModel && sectionModel.instance.drawSelected(flag);
+                    });
+                } else {
+                    device.instance.drawSelected(flag);
+                }
+            }
+        },
+        clickEvent(em) {
+            const device = this.getDeviceByEm(em);
+            this.deviceHighLight(this.oldDevice, false);
+            this.deviceHighLight(device, true);
+            this.oldDevice = device;
+            this.setSelected(device);
+        },
+        setWindowSize() {
+            this.$nextTick(() => {
+                let width;
+                if (this.type == 'generateRouting') {
+                    width = this.$store.state.app.width - 500;
+                } else {
+                    width = this.$store.state.app.width * 0.7;
+
+                }
+                const height = this.$store.state.app.height - 49;
+                this.$store.dispatch('config/resize', { width, height });
+            });
+        },
+        loadInitPage() {
+            this.$store.dispatch('training/changeMode', { mode: TrainingMode.NORMAL });
+            loadMapDataById(this.$route.query.mapId, 'preview');
+        },
+        endViewLoading(isSuccess) {
+            if (!isSuccess) {
+                this.$store.dispatch('map/mapClear');
+            }
+
+            this.$nextTick(() => {
+                EventBus.$emit('viewLoading', false);
+            });
+        },
+        setSelected(selected) {
+            if (selected) {
+                if (this.type == 'routeMap') { this.$refs.routeConfig.setSelected(selected); }
+            }
+        },
+        // batchSectionListFocus(flag) {
+        //     this.changeSectionSelected(this.addModel.parkSectionCodeList, flag);
+        // },
+        onContextmenu() {
+
+        },
+        close() {
+            this.dialogShow = false;
+            if (this.type == 'routeMap') { this.$refs.routeConfig.createRouteEvent(); }
+            if (this.type == 'generateRouting') { this.$refs.gernaratePlanTrain.doClose(); }
+        },
+        closeDialog() {
+            this.dialogShow = false;
+        },
+        mapLoading(status) {
+            this.loadingMap = status;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ {
+	.is-fullscreen {
+		overflow: hidden !important;
+	}
+}
+.routeMap{
+    height:100%;
+    // overflow:auto;
+    width: 30%;
+    position: relative;
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: #c3c3c3;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 0;
+        background: #f0f0f0;
+
+    }
+}
+.el-dialog.is-fullscreen.content-route .el-dialog__header{
+    padding-top: 15px !important;
+    .el-dialog__headerbtn{
+        top:15px;
+    }
+}
+</style>
+<style lang="scss">
+.content-route .el-dialog__body {
+    padding: 0 !important;
+    overflow: hidden !important;
+    height:100%
+}
+.content-route .content-box{
+    display:flex;
+    height:100%;
+}
+.el-dialog.is-fullscreen.content-route{
+    display: flex;
+    flex-direction: column;
+}
+</style>
+
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeOperate.vue b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeOperate.vue
new file mode 100644
index 000000000..e32c5d653
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/routeOperate.vue
@@ -0,0 +1,284 @@
+<template>
+  <el-dialog v-dialogDrag title="交路列表" :visible.sync="show" width="85%" :before-do-close="doClose" append-to-body>
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+    <pre-view-field ref="previewField" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listRoutingData, deleteRoutingData, getRoutingData } from '@/api/jmap/mapdraft';
+import PreViewField from './preview';
+
+export default {
+    name: 'RouteDetail',
+    components: {
+        PreViewField
+    },
+    data() {
+        return {
+            show: false,
+            pagerConfig: {
+                pageSize: 'pageSize',
+                pageIndex: 'pageNum'
+            },
+            queryForm: {
+                labelWidth: '120px',
+                queryObject: {
+                    startStationCode: {
+                        type: 'select',
+                        label: this.$t('map.startStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    endStationCode: {
+                        type: 'select',
+                        label: this.$t('map.endStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    startSectionCode: {
+                        type: 'select',
+                        label: '起始区段',
+                        config: {
+                            data: []
+                        }
+                    },
+                    endSectionCode: {
+                        type: 'select',
+                        label: '终到区段',
+                        config: {
+                            data: []
+                        }
+                    }
+                }
+            },
+            queryList: {
+                query: this.queryFunction,
+                afterQuery: this.afterQuery,
+                selectCheckShow: false,
+                indexShow: true,
+                columns: [
+                    {
+                        title: '交路名称',
+                        prop: 'name',
+                        width:'260'
+                    },
+                    {
+                        title: this.$t('map.startStation'),
+                        prop: 'startStationCode'
+
+                    },
+                    {
+                        title: '起始区段',
+                        prop: 'startSectionCode'
+                    },
+                    {
+                        title: this.$t('map.endStation'),
+                        prop: 'endStationCode'
+                    },
+                    {
+                        title: '终到区段',
+                        prop: 'endSectionCode'
+                    },
+                    {
+                        title: this.$t('map.routingDirection'),
+                        prop: 'right',
+                        type: 'tag',
+                        columnValue: (row) => { if (row.right) { return '右行'; } else { return '左行'; } },
+                        tagType: (row) => { if (row.right) { return 'primary'; } else { return 'success'; } }
+                    },
+                    {
+                        title: this.$t('map.destination'),
+                        prop: 'destinationCode'
+                    },
+					{
+						title: '类别',
+						prop: 'userId',
+						type: 'tag',
+						columnValue: (row) => { return row.hasOwnProperty('userId') ? '自定义': '系统默认交路'; },
+						tagType: (row) => { return "primary"; }
+					},
+                    {
+                        title: this.$t('map.remarks'),
+                        prop: 'remarks'
+                    },
+                    {
+                        type: 'button',
+                        title: this.$t('map.sectionData'),
+                        buttons: [
+                            {
+                                name: this.$t('map.preview'),
+                                handleClick: this.sectionDetail
+                            }
+                        ]
+                    },
+                    {
+                        type: 'button',
+                        title: this.$t('map.operation'),
+                        width: '300',
+                        buttons: [
+                            {
+                                name: this.$t('map.compile'),
+                                handleClick: this.editObj,
+								 showControl: (row) => { return row.hasOwnProperty('userId') && row.userId == this.$store.state.user.id},
+                            },
+                            {
+                                name: this.$t('map.deleteObj'),
+                                type: 'danger',
+                                handleClick: this.deleteObj,
+								 showControl: (row) => { return row.hasOwnProperty('userId')&& row.userId == this.$store.state.user.id},
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'stationList'
+        ])
+    },
+    mounted() {
+        this.initQueryObject();
+    },
+    methods: {
+        doShow() {
+            this.show = true;
+            this.reloadTable();
+        },
+        initQueryObject() {
+            const stationList = [];
+            if (this.stationList && this.stationList.length) {
+                this.stationList.forEach(elem => {
+                    stationList.push({ label: this.formatName(elem.code), value: elem.code });
+                });
+                this.queryForm.queryObject.startStationCode.config.data = stationList;
+                this.queryForm.queryObject.endStationCode.config.data = stationList;
+            }
+            const sectionList = [];
+            if (this.sectionList && this.sectionList.length) {
+                this.sectionList.forEach(elem => {
+                    if (elem.standTrack || elem.reentryTrack || elem.transferTrack) {
+                        sectionList.push({ label: this.formatName(elem.code), value: elem.code });
+                    }
+                });
+                this.queryForm.queryObject.startSectionCode.config.data = sectionList;
+                this.queryForm.queryObject.endSectionCode.config.data = sectionList;
+            }
+        },
+        doClose() {
+            this.show = false;
+        },
+        formatName(code) {
+            let name = '';
+            const device = this.$store.getters['map/getDeviceByCode'](code);
+            if (device) {
+                name = device.name;
+            }
+
+            return name;
+        },
+        queryFunction(params) {
+            if (this.$route.query.mapId) {
+                return listRoutingData(this.$route.query.mapId, params);
+            }
+        },
+        afterQuery(data) {
+            if (data && data.list) {
+                const that = this;
+                const list = data.list;
+                if (list) {
+                    list.map(elem => {
+                        elem.startStationCode = that.formatName(elem.startStationCode);
+                        elem.startSectionCode = that.formatName(elem.startSectionCode);
+                        elem.endStationCode = that.formatName(elem.endStationCode);
+                        elem.endSectionCode = that.formatName(elem.endSectionCode);
+                    });
+                }
+            }
+            return data;
+        },
+        editObj(index, row) {
+            getRoutingData(row.id).then(response => {
+                const data = Object.assign({ code: response.data.id }, response.data);
+                this.$emit('routingSelected', data);
+                this.doClose();
+            });
+        },
+        deleteObj(index, row) {
+            if (this.$route.query.mapId && row) {
+                this.$confirm('是否确认删除交路', this.$t('global.tips'), {
+                    confirmButtonText: this.$t('global.confirm'),
+                    cancelButtonText: this.$t('global.cancel'),
+                    type: 'warning'
+                }).then(() => {
+                    // 删除
+                    deleteRoutingData(row.id).then(response => {
+                        this.$message.success(this.$t('map.successfullyDelete'));
+                        this.reloadTable();
+                    }).catch(() => {
+                        this.$messageBox(this.$t('map.failDelete'));
+                    });
+                }).catch();
+            }
+        },
+        // generateData(index, row) {
+        //     if (this.$route.query.mapId && row) {
+        //         // 根据地图交路区段生成站间运行等级
+        //         generateStationRunData(row.id).then(response => {
+        //             this.$message.success(this.$t('map.generateStationRunDataSuccess'));
+        //             //  站间运行数据生成成功
+        //             this.reloadTable();
+        //         }).catch((error) => {
+        //             // 站间运行数据生成失败
+        //             this.$messageBox(this.$t('map.generateStationRunDataFailed') + ': ' + error.message);
+        //         });
+        //     }
+        // },
+        sectionDetail(index, row) {
+            const sectionDict = {};
+            const stationDict = {};
+            this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
+            this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
+
+            const fieldList = {
+                id: row.id,
+                mapId: this.$route.params.mapId,
+                title: '区段列表',
+                name: row.name,
+                model: {
+                    field: 'parkSectionCodeList',
+                    items: [
+                        { prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
+                        {
+                            prop: 'stationCode', label: '车站名称', type: 'select', options: stationDict
+                        },
+                        { prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
+                        {
+                            prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
+                        }
+                    ]
+                }
+            };
+            this.$refs.previewField.doShow(fieldList, row.parkSectionCodeList);
+        },
+        reloadTable() {
+            if (this.queryList && this.queryList.reload) {
+                this.queryList.reload();
+            }
+        }
+    }
+};
+</script>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/runplanConfig.vue b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/runplanConfig.vue
new file mode 100644
index 000000000..b0c6cb974
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/routingoperate/runplanConfig.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogShow"
+    custom-class="content-route"
+    width="750px"
+    top="10vh"
+    title="折返配置  (单位：秒)"
+    :before-close="close"
+    :z-index="2000"
+    :append-to-body="true"
+  >
+    <div class="runPlanConfig">
+      <!-- <div class="reentryConfig" /> -->
+      <div class="reentryConfigTable">
+        <el-table
+          :data="reentryDataList"
+          border
+          style="width:100%"
+          height="430"
+          class="el-parkSectionCode-table"
+        >
+          <el-table-column prop="stationCode" :label="$t('map.stationName')">
+            <template slot-scope="scope">
+              <span>{{ scope.row.stationName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="站前折返">
+            <template slot-scope="scope">
+              <!-- v-if="scope.row.reentryData.tbFrom" -->
+              <el-input-number
+                v-model="scope.row.reentryData.tbFront"
+                :style="{width: '80px'}"
+                :min="1"
+                size="mini"
+                :controls="false"
+                :precision="0"
+                :step="1"
+              />
+            <!-- <el-button v-else type="primary" size="small" @click="add(scope.row)">添加</el-button> -->
+            </template>
+          </el-table-column>
+          <el-table-column label="站后折返">
+            <template slot-scope="scope">
+              <el-input-number
+                v-model="scope.row.reentryData.tbBack"
+                :style="{width: '80px'}"
+                :min="1"
+                size="mini"
+                :precision="0"
+                :controls="false"
+                :step="1"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="从股道到折返">
+            <template slot-scope="scope">
+              <el-input-number
+                v-model="scope.row.reentryData.tbFrom"
+                :style="{width: '80px'}"
+                :min="1"
+                size="mini"
+                :controls="false"
+                :precision="0"
+                :step="1"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="从折返到股道">
+            <template slot-scope="scope">
+              <el-input-number
+                v-model="scope.row.reentryData.tbTo"
+                :style="{width: '80px'}"
+                :min="1"
+                size="mini"
+                :controls="false"
+                :precision="0"
+                :step="1"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="text-align: center; margin-top: 10px;">
+          <el-button type="primary" :loading="loading" @click="save">{{ $t('map.save') }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { addRunplanConfig, getRunplanConfig } from '@/api/jmap/mapdraft';
+export default {
+    name:'RunPlanConfig',
+    data() {
+        return {
+            dialogShow: false,
+            reentryDataList:[],
+            stationList:{},
+            sectionCode:'',
+            field:'',
+            loading:false
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList'
+        ])
+    },
+    watch:{
+        '$store.state.map.mapDataLoadedCount':function(val) {
+            if (this.sectionList) {
+                const reentrySections = this.sectionList.filter(elem => { return elem.reentryTrack; });
+                const stationList = {};
+                reentrySections.forEach(each=>{
+                    if (each.belongStation) {
+                        const station = this.$store.getters['map/getDeviceByCode'](each.belongStation);
+                        if (!stationList[each.belongStation]) {
+                            stationList[each.belongStation] = {code:each.belongStation, stationName:station.name,
+                                reentryData:{tbFront:undefined, tbBack:undefined, tbFrom:undefined, tbTo:undefined}};
+                        }
+                    }
+                });
+                this.reentryDataList = Object.values(stationList);
+                this.stationList = stationList;
+            }
+        }
+    },
+    mounted() {
+    },
+    methods:{
+        doShow() {
+            this.dialogShow = true;
+            this.loading = false;
+            const self = this;
+            getRunplanConfig(this.$route.query.mapId).then(resp => {
+                if (resp.data && resp.data.config && resp.data.config.reentryData) {
+                    const reentryData = resp.data.config.reentryData;
+                    const keys = Object.keys(reentryData);
+                    keys.forEach(each=>{
+                        self.stationList[each].reentryData = reentryData[each];
+                    });
+                    const newData = Object.values(this.stationList);
+                    self.reentryDataList = [...newData || []];
+                }
+            });
+        },
+        close() {
+            this.dialogShow = false;
+        },
+        save() {
+            const tbBackList = [];
+            const reentryData = {};
+            this.reentryDataList.forEach(each=>{
+                if (each.reentryData.tbFront || (each.reentryData.tbBack && each.reentryData.tbFrom && each.reentryData.tbTo)) {
+                    const temp = Object.assign({}, each.reentryData);
+                    if (!(each.reentryData.tbFront && (each.reentryData.tbBack && each.reentryData.tbFrom && each.reentryData.tbTo))) {
+                        if (each.reentryData.tbFront) {
+                            temp.tbBack = null;
+                            temp.tbFrom = null;
+                            temp.tbTo = null;
+                        } else {
+                            temp.tbFront = null;
+                        }
+                    }
+                    reentryData[each.code] = temp;
+                }
+                if (!(each.reentryData.tbBack && each.reentryData.tbFrom && each.reentryData.tbTo)) {
+                    if (each.reentryData.tbBack || each.reentryData.tbFrom || each.reentryData.tbTo) {
+                        tbBackList.push(each.stationName);
+                    }
+                }
+            });
+            if (tbBackList.length > 0) {
+                this.$messageBox('请设置【' + tbBackList.toString() + '】站后折返信息');
+                return;
+            } else if (Object.keys(reentryData).length == 0) {
+                // JSON.stringify(reentryData) == '{}'
+                this.$messageBox('请填写折返配置信息');
+                return;
+            }
+            addRunplanConfig(this.$route.query.mapId, {'reentryData':reentryData}).then(resp => {
+                this.$message.success('折返配置成功');
+                this.loading = false;
+            }).catch((error) => {
+                this.$messageBox('折返配置失败' + ':' + error.message);
+                this.loading = false;
+            });
+        }
+    }
+};
+</script>
+<style lang="scss">
+.reentryConfigTable{
+margin-top: 10px;
+}
+.runPlanConfig{padding:0px 20px 20px 20px}
+.reentryConfigTable .el-table--scrollable-y .el-table__body-wrapper{
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: #c3c3c3;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 0;
+        background: #f0f0f0;
+
+    }
+}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/components/schedule.vue b/src/views/newMap/display/terminals/diagramEdit/components/schedule.vue
new file mode 100644
index 000000000..d7e8a4b47
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/components/schedule.vue
@@ -0,0 +1,848 @@
+<template>
+  <div id="PlanSchedule" v-loading="runplanLoading">
+    <div class="left">
+      <div :id="runPlanId" />
+    </div>
+    <div v-show="showTrain" class="position">
+      <data-table
+        ref="serviceTable"
+        class="data_table_box"
+        :config="serviceNumberConfig"
+      />
+      <!-- @touch="scheduleTouch" -->
+      <data-table
+        ref="tripTable"
+        style="margin-top: 3px;"
+        class="data_table_box"
+        :config="tripNumberConfig"
+      />
+      <!-- @touch="trainNumTouch" -->
+    </div>
+    <modify-service ref="modifyService" :load-run-plan-id="loadRunPlanId" />
+  </div>
+</template>
+
+<script>
+import ModifyService from '../components/menus/modifyService';
+import { mapGetters } from 'vuex';
+import { timeFormat } from '@/utils/date';
+import { getStationList, queryRunPlan } from '@/api/runplan';
+// import {getRpDetailByUserMapId, getUserMapDetailByMapId} from '@/api/designPlatform';
+import { getPublishMapInfo } from '@/api/jmap/map';
+// import {getMapDetail} from '@/api/jmap/mapdraft';
+import DataTable from '../components/menus/components/dataTable';
+import echarts from 'echarts';
+
+export default {
+    name: 'PlanSchedule',
+    components: {
+        DataTable,
+        ModifyService
+    },
+    props: {
+        planParser: {
+            type: Object,
+            required: true
+        },
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
+        loadRunPlanName: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            top: 0,
+            height: 0,
+            mapName: '',
+            runPlanId: 'plan-tool',
+            myChart: null,
+            showTrain: false,
+            runplanLoading:false,
+            serviceNumberConfig: {
+                data: [],
+                title: this.$t('planMonitor.serviceNumber'),
+                showHeader: false,
+                highlightCurrentRow: true,
+                handleChange: this.serviceNumberChange,
+                handleModify:this.serviceNumberModify,
+                handleTips:'单击数字选择表号，双击数字修改表号,<br/>有车次信息变动 车次号会重新自动排列',
+                showClose: false,
+                columns: [
+                    {
+                        prop: 'serviceNumber',
+                        label: this.$t('planMonitor.serviceNumber')
+                    }
+                ]
+            },
+            tripNumberConfig: {
+                data: [],
+                title: this.$t('planMonitor.tripNumber'),
+                showHeader: false,
+                highlightCurrentRow: true,
+                handleChange: this.tripNumberChange,
+                handleModify:this.tripNumberModify,
+                handleTips:'单击数字选择车次号，双击数字修改车次号,<br/>有车次信息变动 车次号会重新自动排列',
+                showClose: false,
+                columns: [
+                    {
+                        prop: 'tripNumber',
+                        label: this.$t('planMonitor.tripNumber')
+                    }
+                ]
+            },
+            // realData: {},
+            // kmRangeMap: {},
+            option: {
+                title: { // 标题
+                    text: '',
+                    left: 'center', // 居中对齐
+                    top: '10px'
+                },
+                grid: { // 整个坐标系位置
+                    top: '50px',
+                    left: '120px',
+                    right: '80px',
+                    bottom: '60px',
+                    containLabel: true,
+                    backgroundColor: 'floralwhite'
+                },
+                toolbox: { // 工具栏
+                    // top: '10px',
+                    // right: '120px',
+                    // feature: {
+                    //     dataZoom: {
+                    //         yAxisIndex: 'none'
+                    //     },
+                    //     restore: {},
+                    //     saveAsImage: {}
+                    // }
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        // trigger: 'item',
+                        type: 'cross',
+                        snap: true,
+                        axis: 'x'
+                    },
+                    formatter: this.axisTooltip,
+                    borderWidth: 1,
+                    position: function (pt) {
+                        const data = pt[0] + 10;
+                        return [data, '20%'];
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: [],
+                        axisLine: {
+                            onZero: false,
+                            lineStyle: {
+                                width: 1
+                                // color: '#d14a61'
+                            }
+                        },
+                        axisLabel: {
+                            formatter: this.xAxisLableFormat,
+                            textStyle: {
+                                color: '#333'
+                            }
+                        },
+                        axisPointer: {
+                            snap: true,
+                            label: {
+                                formatter: this.xAxisPointFormat,
+                                backgroundColor: 'rgb(255,0,0,0.5)',
+                                color: 'white'
+                            }
+                        }
+                    }
+                ],
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        onZero: false,
+                        lineStyle: {
+                            width: 1
+                            // color: '#d14a61'
+                        }
+                    },
+                    axisLabel: {
+                        interval: 'auto',
+                        formatter: this.yAxisLableFormat
+                    },
+                    axisPointer: {
+                        xAxisIndex: 'all',
+                        label: {
+                            formatter: this.yAxisPointFormat,
+                            backgroundColor: 'rgb(0,100,0,0.5)',
+                            color: 'white'
+                            // margin: -60
+                        }
+                    },
+                    min: 0,
+                    max: 0
+                },
+                series: [],
+                dataZoom: [ // 滑动滚轮
+                    {
+                        type: 'inside'
+                    },
+                    {
+                        fiterMode: 'filter',
+                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+                        handleSize: '80%',
+                        handleStyle: {
+                            color: '#fff',
+                            shadowBlur: 3,
+                            shadowColor: 'rgba(0, 0, 0, 0.6)',
+                            shadowOffsetX: 2,
+                            shadowOffsetY: 2
+                        },
+                        bottom: '20px'
+                    }
+                ]
+            },
+            // absoluteTime: 2 * 3600,
+            // indexKmRangeMap: {},
+            stationsObj: {}
+        };
+    },
+    computed: {
+        ...mapGetters('runPlan', [
+            'stations'
+        ]),
+        planId() {
+            return this.$route.query.planId || this.loadRunPlanId;
+        },
+        maxWidth() {
+            return this.$store.state.app.width;
+        },
+        maxHeight() {
+            return this.$store.state.app.height;
+        }
+    },
+    watch: {
+        '$store.state.runPlan.planSizeCount': function () {
+            this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
+        },
+        '$store.state.runPlan.refreshCount': function() {
+            // || this.loadRunPlanId
+            if (this.planId) {
+                this.loadChartPage();
+            }
+        },
+        // $route() {
+        //     this.$nextTick(() => {
+        //         this.loadChartPage();
+        //     });
+        // },
+        planId() {
+            if (this.planId) {
+                this.loadChartPage();
+            } else {
+                this.clearCanvas();
+            }
+        },
+        'maxWidth':function () {
+            this.setPosition();
+        },
+        'maxHeight':function () {
+            this.setPosition();
+        }
+    },
+    mounted() {
+        this.setPosition();
+        if (this.planId) {
+            this.loadChartPage();
+        }
+        // this.loadChartPage();
+    },
+    beforeDestroy() {
+        this.destroy();
+    },
+    methods: {
+        displayTrain() {
+            this.showTrain = !this.showTrain;
+        },
+        serviceNumberModify(row) {
+            if (row) {
+                this.$refs.modifyService.doShow({serviceNumber:row.serviceNumber});
+            }
+        },
+        tripNumberModify(row) {
+            if (row) {
+                this.$refs.modifyService.doShow({serviceNumber:this.$store.state.runPlan.selected.serviceNumber, tripNumber:row.tripNumber});
+            }
+        },
+        serviceNumberChange(row) {
+            let serviceNumber = null;
+            let serviceObj = {};
+            if (row) {
+                serviceNumber = row.serviceNumber;
+                serviceObj = this.$store.state.runPlan.editData[row.serviceNumber] || {};
+
+                const op = this.myChart.getOption();
+                // console.log(op.series);
+                // const array1 = []; op.series[1].data.forEach(each=>{ array1.push({dataTime:each[0], temperature:each[1], serviceNumber:each[3]}); });
+                // const array1 = []; op.series[5].data.forEach(each=>{ array1.push({dataTime:each[0], kiloMemter:each[1], serviceNumber:each[3], tripNumber:'05'}); });
+                // debugger;
+                op.series.forEach((item, index) => {
+                    item.lineStyle.color = '#000';
+                    item.lineStyle.width = 0.5;
+                    switch (item.name) {
+                    case serviceNumber: {
+                        item.lineStyle.color = 'red';
+                        item.lineStyle.width = 1;
+                        break;
+                    }
+                    case 'trainLabel': {
+                        op.series.pop();
+                        break;
+                    }
+                    }
+                });
+                this.myChart.setOption(op, true);
+            }
+            if (this.loadRunPlanId) {
+                this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: null });
+            } else {
+                this.$store.dispatch('runPlan/setSelected', { serviceNumber: serviceNumber, tripNumber: null });
+            }
+
+            this.analyticalTripNumber(serviceObj.trainMap || {});
+        },
+        tripNumberChange(row) {
+            let serviceNumber;
+            if (this.loadRunPlanId) {
+                serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            } else {
+                serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
+            }
+            let tripNumber = null;
+            if (row) {
+                const data = [];
+                tripNumber = row.tripNumber;
+                const op = this.myChart.getOption();
+                op.series.forEach((item, index) => {
+                    switch (item.name) {
+                    case serviceNumber: {
+                        // const param = '\\[\\d*,\\d*,"Station_\\d*_[.\\d]*","' + tripNumber + '"\\]';
+                        // const temp = JSON.stringify(item.data).match(new RegExp(param, 'g'));
+                        // data = JSON.parse('[' + temp.toString() + ']');
+                        item.data.forEach(nor => {
+                            if (nor[3] == tripNumber) {
+                                data.push(nor);
+                            }
+                        });
+                        // item.lineStyle.color = '#000';
+                        item.lineStyle.width = 0.5;
+                        break;
+                    }
+                    case 'trainLabel': {
+                        op.series.pop();
+                        this.myChart && this.myChart.setOption(op, true);
+                        break;
+                    }
+                    }
+                });
+                op.series.push({
+                    name: 'trainLabel',
+                    lineStyle: {
+                        color: 'green',
+                        width:2
+                    },
+                    type: 'line',
+                    data: data
+                });
+                setTimeout(() => {
+                    this.myChart && this.myChart.setOption(op, true);
+                }, 50);
+
+            }
+            if (this.loadRunPlanId) {
+                this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: tripNumber });
+            } else {
+                this.$store.dispatch('runPlan/setSelected', { serviceNumber: serviceNumber, tripNumber: tripNumber });
+            }
+
+        },
+        async analyticalServiceNumber(data) {
+            this.serviceNumberConfig.data = Object.keys(data || {})
+                .sort((a, b) => { return parseInt(data[a].serviceNumber) - parseInt(data[b].serviceNumber); })
+                .map(serviceNumber => { return { serviceNumber }; });
+        },
+        async analyticalTripNumber(data) {
+            // this.tripNumberConfig.data = Object.keys(data || {})
+            //     .sort((a, b) => { return data[a].tripNumber - data[b].tripNumber; })
+            //     .map(tripNumber => { return { tripNumber }; });
+            this.tripNumberConfig.data = Object.keys(data || {})
+                .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
+                .map(tripNumber => { return { tripNumber }; });
+        },
+        async setPosition() {
+            this.$nextTick(() => {
+                let top = 3;
+                let height = this.maxHeight;
+
+                const titleBar = document.getElementById('PlanTitleBar');
+                const menuBar = document.getElementById('PlanMenuBar');
+                const menuTool = document.getElementById('PlanMenuTool');
+                const statusBar = document.getElementById('PlanStatusBar');
+
+                if (titleBar) {
+                    top += (titleBar.offsetHeight || 0);
+                }
+
+                if (menuBar) {
+                    top += (menuBar.offsetHeight || 0);
+                }
+
+                if (menuTool) {
+                    top += (menuTool.offsetHeight || 0);
+                }
+
+                if (statusBar) {
+                    height -= (statusBar.offsetHeight || 0);
+                }
+
+                height = height - top;
+                this.$store.dispatch('runPlan/resize', { width:this.maxWidth, height });
+                if (this.top != top) {
+                    this.top = top;
+                }
+
+                if (this.height != height) {
+                    this.height = height - 20 * 2;
+                }
+            });
+        },
+        async loadChartPage() {
+            try {
+                // if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
+                //     getUserMapDetailByMapId(this.$route.query.mapId).then(resp => {
+                //         this.mapName = `${resp.data.name} (${this.$route.query.planName || this.loadRunPlanName || ''})`;
+                //     });
+                // } else {
+                getPublishMapInfo(this.$route.query.mapId).then(resp => {
+                    if (this.loadRunPlanId) {
+                        this.mapName = this.$route.query.planName || this.loadRunPlanName || '';
+                    } else {
+                        this.mapName = `${resp.data.name} (${this.$route.query.planName || this.loadRunPlanName || ''})`;
+                    }
+                });
+                // }
+
+                this.$store.dispatch('runPlan/clear').then(() => {
+                    if (this.$route.query.mapId) {
+                        // if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
+                        //     this.runplanLoading = true;
+                        //     getMapDetail(this.$route.query.mapId).then(response => {
+                        //         const res = response.data;
+                        //         const stationList = res.stationList.sort((a, b)=>{ return a.kmRange - b.kmRange; });
+                        //         this.$store.dispatch('runPlan/setStations', stationList).then(() => {
+                        //             this.loadInitData();
+                        //             if (this.planId || this.loadRunPlanId) {
+                        //                 getRpDetailByUserMapId(this.planId || this.loadRunPlanId).then(rest => {
+                        //                     this.$store.dispatch('runPlan/setPlanData', rest.data).then(() => {
+                        //                         this.analyticalServiceNumber(this.$store.state.runPlan.editData);
+                        //                         this.loadChartData();
+                        //                         this.runplanLoading = false;
+                        //                     });
+                        //                 }).catch(() => {
+                        //                     this.runplanLoading = false;
+                        //                     this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
+                        //                 });
+                        //             }
+                        //         });
+                        //         // });
+                        //     });
+                        // } else {
+                        this.runplanLoading = true;
+                        getStationList(this.$route.query.mapId).then(resp => {
+                            this.$store.dispatch('runPlan/setStations', resp.data).then(() => {
+                                this.loadInitData();
+                                // if (this.planId || this.loadRunPlanId) {
+                                queryRunPlan(this.planId || this.loadRunPlanId).then(rest => {
+                                    this.$store.dispatch('runPlan/setPlanData', rest.data).then(() => {
+                                        this.analyticalServiceNumber(this.$store.state.runPlan.editData);
+                                        this.loadChartData();
+                                        this.runplanLoading = false;
+                                    });
+                                }).catch(() => {
+                                    this.runplanLoading = false;
+                                    this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
+                                });
+                                // } else {
+                                //     this.clearCanvas();
+                                // }
+                            });
+                        }).catch(() => {
+                            this.$messageBox(this.$t('tip.requestingStationDataFailed'));
+                            this.$store.dispatch('runPlan/setStations', []);
+                        });
+                    }
+                    // }
+                });
+            } catch (error) {
+                this.$messageBox(this.$t('error.loadingOperationGraphFailed'));
+                console.log(error);
+            }
+        },
+        async loadChartData() {
+            try {
+                // let option={};
+                const stations = this.$store.state.runPlan.stations;
+                const planData = this.$store.state.runPlan.planData;
+                this.stationsObj = {};
+                stations.forEach(item => {
+                    this.stationsObj[Math.floor(item.kmRange)] = item;
+                });
+
+                this.viewDisabled = true;
+
+                this.option.series = [];
+                const kmRangeMap = this.planParser.convertStationsToMap(stations);
+                if (this.$route.query.lineCode === '07') {
+                    this.pushModels(this.option.series, [this.planParser.initializeAxisX(stations)]);
+                } else {
+                    this.pushModels(this.option.series, [this.planParser.initializeAxisY(stations)]);
+                }
+                this.pushModels(this.option.series, this.planParser.convertDataToModels(planData, stations, kmRangeMap, { width: 0.5, color: '#000' }));
+                await this.loadInitChart();
+
+                this.viewDisabled = false;
+            } catch (error) {
+                this.viewDisabled = false;
+                this.$messageBox(this.$t('error.loadingOperationGraphFailed') + this.$t('global.colon') + error.message);
+                console.log(error);
+            }
+        },
+        async loadInitData() {
+            const hebXAxis = {
+                type: 'value',
+                splitLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    onZero: false,
+                    lineStyle: {
+                        width: 1,
+                        color: '#d14a61'
+                    }
+                },
+                axisLabel: {
+                    interval: 'auto',
+                    formatter: this.yAxisLableFormat
+                },
+                axisPointer: {
+                    xAxisIndex: 'all',
+                    label: {
+                        formatter: this.yAxisPointFormat,
+                        backgroundColor: 'rgb(0,100,0,0.5)',
+                        color: 'white'
+                    }
+                },
+                min: 0,
+                max: 0
+            };
+            const hebYAxis = [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: [],
+                    axisLine: {
+                        onZero: false,
+                        lineStyle: {
+                            width: 1,
+                            color: '#d14a61'
+                        }
+                    },
+                    axisLabel: {
+                        formatter: this.xAxisLableFormat,
+                        textStyle: {
+                            color: '#333'
+                        }
+                    },
+                    axisPointer: {
+                        snap: true,
+                        label: {
+                            formatter: this.xAxisPointFormat,
+                            backgroundColor: 'rgb(255,0,0,0.5)',
+                            color: 'white'
+                        }
+                    }
+                }
+            ];
+            const hebDataZoom = [
+                {
+                    type: 'inside',
+                    yAxisIndex: 0
+                },
+                {
+                    fiterMode: 'filter',
+                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+                    handleSize: '80%',
+                    yAxisIndex: 0,
+                    handleStyle: {
+                        color: '#fff',
+                        shadowBlur: 3,
+                        shadowColor: 'rgba(0, 0, 0, 0.6)',
+                        shadowOffsetX: 2,
+                        shadowOffsetY: 2
+                    },
+                    left: '20px'
+                }
+            ];
+            if (this.$route.query.lineCode === '07') {
+                this.option.xAxis = hebXAxis;
+                this.option.yAxis = hebYAxis;
+                this.option.dataZoom = hebDataZoom;
+                this.option.tooltip.axisPointer.axis = 'y';
+            }
+            await this.xAxisInit();
+            await this.yAxisInit();
+            // await this.loadInitChart();
+        },
+        pushModels(series, models) {
+            if (models && models.length) {
+                models.forEach(elem => {
+                    if (elem) {
+                        series.push(elem);
+                    }
+                });
+            }
+            return series;
+        },
+        popModels(series, models) {
+            if (models && models.length) {
+                models.forEach(elem => {
+                    const index = series.indexOf(elem);
+                    if (index >= 0) {
+                        series.split(index, 1);
+                    }
+                });
+            }
+            return series;
+        },
+        loadInitChart() {
+            return new Promise((resolve, reject) => {
+                try {
+                    if (this.myChart && this.myChart.isDisposed) {
+                        this.myChart.clear();
+                    }
+                    if (this.$route.query.planName || this.$route.query.prdType === '05') {
+                        this.option.title.text = this.mapName;
+                    } else {
+                        this.option.title.text = this.loadRunPlanName;
+                    }
+                    this.myChart = echarts.init(document.getElementById(this.runPlanId));
+                    this.myChart.setOption(this.option);
+                    this.reSize({ width: this.$store.state.runPlan.width, height: this.$store.state.runPlan.height });
+                    resolve(true);
+                } catch (error) {
+                    reject(error);
+                }
+            });
+        },
+        refreshRunPlanName(name) {
+            getPublishMapInfo(this.$route.query.mapId).then(resp => {
+                if (this.loadRunPlanId) {
+                    this.mapName = name;
+                } else {
+                    this.mapName = `${resp.data.name} (${name})`;
+                }
+
+                this.myChart.setOption({
+                    title: {
+                        text: this.mapName,
+                        left: 'center', // 居中对齐
+                        top: '10px'
+                    }
+                });
+            });
+        },
+        clearCanvas() {
+            this.myChart.dispose();
+            this.myChart = null;
+        },
+        xAxisPointFormat(params) {
+            return timeFormat(params.value);
+        },
+        yAxisPointFormat(params) {
+            return this.planParser.computedFormatAxisY(this.stations, params);
+        },
+        xAxisLableFormat(value, index) {
+            if (value % 60 === 0) {
+                return timeFormat(value);
+            }
+        },
+        yAxisLableFormat(value, index) {
+            return '';
+        },
+        xAxisInit() {
+            const list = [];
+            for (var time = 0 + this.planParser.getTranslation(); time < 3600 * 24 + this.planParser.getTranslation(); time++) {
+                list.push(time);
+            }
+
+            const startValue = 3600 * 6;
+            const offsetTime = 3600 * 1;
+
+            if (this.$route.query.lineCode === '07') {
+                this.option.yAxis[0].data = list;
+            } else {
+                this.option.xAxis[0].data = list;
+            }
+            if (!this.option.dataZoom[0].startValue) {
+                this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
+            }
+
+            if (!this.option.dataZoom[0].endValue) {
+                this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
+            }
+        },
+        yAxisInit() {
+            // if (Object.keys(this.planParser).length) {
+            //     this.pushModels(this.option.series, [this.planParser.initializeAxisY(this.stations)]);
+            //     this.option.yAxis.min = this.planParser.computedAxisYMinValue(this.stations);
+            //     this.option.yAxis.max = this.planParser.computedAxisYMaxValue(this.stations);
+            // }
+            if (Object.keys(this.planParser).length && this.$route.query.lineCode !== '07') {
+                this.pushModels(this.option.series, [this.planParser.initializeAxisY(this.stations)]);
+                this.option.yAxis.min = this.planParser.computedAxisYMinValue(this.stations);
+                this.option.yAxis.max = this.planParser.computedAxisYMaxValue(this.stations);
+            } else if (Object.keys(this.planParser).length && this.$route.query.lineCode === '07') {
+                this.pushModels(this.option.series, [this.planParser.initializeAxisX(this.stations)]);
+                this.option.xAxis.min = this.planParser.computedAxisXMinValue(this.stations);
+                this.option.xAxis.max = this.planParser.computedAxisXMaxValue(this.stations);
+            }
+        },
+        axisTooltip(param) {
+            let data = '';
+            const arr = [];
+            param.forEach(item => {
+                const station = this.stationsObj[Math.floor((item.data[1] - this.planParser.getEdge()) / this.planParser.getMultiple())] || { name: '', kmRange: '' };
+                if (!arr.includes(`${item.data[0]}${item.data[1]}`)) {
+                    arr.push(`${item.data[0]}${item.data[1]}`);
+                    if (this.$route.query.lineCode == '06' || this.$route.query.lineCode == '08') {
+                        const list = [
+                            `${this.$t('planMonitor.stationName')}${station.name}<br>`,
+                            `${this.$t('planMonitor.stationKilometerMark')}${station.kmRange} m <br>`,
+                            `${this.$t('planMonitor.arriveTime')}${timeFormat(item.data[0] + this.planParser.getTranslation())}<br>`,
+                            `${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}`,
+                            `<hr size=1 style="margin: 3px 0">`
+                        ];
+                        data += list.join('');
+                    } else if (this.$route.query.lineCode == '07') {
+                        const list = [
+                            `${this.$t('planMonitor.stationName')}${station.name}<br>`,
+                            `${this.$t('planMonitor.stationKilometerMark')}${station.kmRange} m <br>`,
+                            `${this.$t('planMonitor.arriveTime')}${timeFormat(item.data[1] + this.planParser.getTranslation())}<br>`,
+                            `${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}(${item.data[3][0] == '2' ? '上行' : '下行'})`,
+                            `<hr size=1 style="margin: 3px 0">`
+                        ];
+                        data += list.join('');
+                    } else {
+                        const list = [
+                            `${this.$t('planMonitor.stationName')}${station.name}<br>`,
+                            `${this.$t('planMonitor.stationKilometerMark')}${station.kmRange} m <br>`,
+                            `${this.$t('planMonitor.arriveTime')}${timeFormat(item.data[0] + this.planParser.getTranslation())}<br>`,
+                            `${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}(${item.data[3][0] == '2' ? '上行' : '下行'})`,
+                            `<hr size=1 style="margin: 3px 0">`
+                        ];
+                        data += list.join('');
+                    }
+                }
+            });
+            return data;
+        },
+        // mouseClick(params) {
+        // 	const model = {
+        // 		serviceNumber: params.seriesName
+        // 	};
+
+        // 	const op = this.myChart.getOption();
+        // 	op.series.forEach(item => {
+        // 		item.lineStyle.color = '#000';
+        // 		if (item.name == params.seriesName) {
+        // 			item.lineStyle.color = 'red';
+        // 		}
+        // 		if (item.name == 'trainLabel') {
+        // 			item.data = [];
+        // 		}
+        // 	});
+        // 	this.myChart.setOption(op);
+        // 	this.$store.dispatch('runPlan/setSelected', model);
+        // },
+        reSize(opt) {
+            if (this.myChart) {
+                this.myChart.resize({
+                    width: opt.width,
+                    height: opt.height,
+                    silent: false
+                });
+            }
+        },
+        destroy() {
+            if (this.myChart && this.myChart.isDisposed) {
+                this.myChart.dispose();
+                this.myChart = null;
+            }
+        }
+        // scheduleTouch() {
+
+        // },
+        // trainNumTouch() {
+
+        // }
+    }
+};
+</script>
+<style scoped rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+
+    #PlanSchedule {
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        position: relative;
+		overflow: hidden;
+
+        .left {
+            height: 100%;
+			width: 100%;
+            float: left;
+        }
+
+        .position {
+            position: absolute;
+			top: 0px;
+			right: 50px;
+			width: 220px;
+			height: 100%;
+        }
+        .data_table_box{
+            height: 50%;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/index.vue b/src/views/newMap/display/terminals/diagramEdit/index.vue
new file mode 100644
index 000000000..e91500c29
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/index.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="plan-tool" style="width: 100%; height: 100%;padding-top: 45px;">
+    <menu-bar
+      ref="menuBar"
+      :load-run-plan-id="loadRunPlanId"
+      :load-run-plan-name="loadRunPlanName"
+      :run-plan-list="runPlanList"
+      @doClose="doClose"
+      @dispatchDialog="dispatchDialog"
+      @loadingRunPlan="loadingRunPlan"
+      @modifyRunPlanName="modifyRunPlanName"
+      @refresh="refreshRunPlanList"
+      @refreshData="refresh"
+    />
+    <!-- :plan-parser="PlanParser" -->
+    <div class="scheduleIn">
+      <schedule
+        ref="schedule"
+        v-loading="runplanLoading"
+        :plan-parser="PlanParser"
+        :load-run-plan-id="loadRunPlanId"
+        :load-run-plan-name="loadRunPlanName"
+      />
+      <status-bar ref="statusBar" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" @showTrain="showTrain" @refresh="refresh" />
+    </div>
+    <parameter ref="parameter" />
+    <off-line ref="offLine" @handleConfirm="handleConfirm" @dispatchDialog="dispatchDialog" />
+    <add-planning-train ref="addPlanningTrain" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" />
+    <edit-planning-train
+      ref="editPlanningTrain"
+      :load-run-plan-id="loadRunPlanId"
+      @dispatchDialog="dispatchDialog"
+      @dispatchOperate="dispatchOperate"
+      @refresh="refresh"
+    />
+    <duplicate-train ref="duplicateTrain" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+    <move-planing-train ref="movePlaningTrain" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+
+    <systerm-out ref="systermOut" />
+
+    <task-dialog ref="showDialog" :load-run-plan-id="loadRunPlanId" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+
+    <modifying-station-interval-time ref="modifyingStationIntervalTime" />
+    <modifying-station-stop-time ref="modifyingStationStopTime" />
+    <edit-plan-name ref="editPlan" @renewal="refreshRunPlanName" />
+
+    <create-empty-plan ref="createEmptyPlan" @refresh="refreshRunPlanList" />
+  </div>
+</template>
+
+<script>
+import MenuBar from './menuBar';
+import StatusBar from './statusBar';
+import Schedule from './components/schedule';
+import Parameter from './menus/parameter/index';
+import OffLine from './components/menus/offLine';
+import AddPlanningTrain from './components/menus/addPlanningTrain';
+import EditPlanningTrain from './components/menus/editPlanningTrain';
+import EditPlanName from './components/menus/editPlanName';
+import DuplicateTrain from './components/menus/duplicateTrain';
+import SystermOut from './components/menus/systermOut';
+import TaskDialog from './components/menus/taskDialog';
+import MovePlaningTrain from './components/menus/movePlaningTrain';
+import ModifyingStationIntervalTime from './components/menus/modifyingStationIntervalTime';
+import ModifyingStationStopTime from './components/menus/modifyingStationStopTime';
+import CreateEmptyPlan from './menus/createEmptyPlan';
+import { deletePlanService } from '@/api/runplan';
+import { loadMapDataById } from '@/utils/loaddata';
+import { getRpListByMapId } from '@/api/runplan';
+
+export default {
+    name: 'Menus',
+    components: {
+        MenuBar,
+        StatusBar,
+        Schedule,
+        Parameter,
+        OffLine,
+        AddPlanningTrain,
+        EditPlanningTrain,
+        DuplicateTrain,
+        SystermOut,
+        TaskDialog,
+        // AddSmoothRunTime,
+        // EditSmoothRunTime,
+        ModifyingStationIntervalTime,
+        ModifyingStationStopTime,
+        EditPlanName,
+        MovePlaningTrain,
+        CreateEmptyPlan
+    },
+    data() {
+        return {
+            PlanParser: {},
+            runPlanList: [],
+            loadRunPlanId: '',
+            loadRunPlanName: '',
+            runplanLoading:false
+        };
+    },
+    computed: {
+        lineCode() {
+            return this.$route.query.lineCode || '02';
+        }
+    },
+    watch: {
+        '$store.state.map.mapDataLoadedCount': function (val) {
+            this.runplanLoading = false;
+        }
+    },
+    created() {
+        this.PlanParser = this.$theme.loadPlanParser(this.lineCode);
+    },
+    async mounted() {
+        // this.loadRunPlanName = this.$route.query.planName;
+        if (this.$route.query.mapId) {
+            this.refreshRunPlanList(true);
+            await this.loadMap();
+        }
+    },
+    beforeDestroy() {
+    },
+    methods: {
+        dispatchDialog(dialogObj) {
+            this.$nextTick(() => {
+                if (dialogObj.name == 'gernaratePlanTrain') {
+                    this.$refs['menuBar'].handleGernaratePlanningTrain();
+                } else {
+                    if (this.$refs[dialogObj.name]) {
+                        this.$refs[dialogObj.name].doShow(dialogObj.params);
+                    }
+                }
+            });
+        },
+        dispatchOperate(operateObj) {
+            this.$nextTick(() => {
+                if (this.$refs[operateObj.dialogName]) {
+                    this.$refs[operateObj.dialogName][operateObj.operate](operateObj.params);
+                }
+            });
+        },
+        async loadMap() {
+            this.runplanLoading = true;
+            // 加载地图数据
+            loadMapDataById(this.$route.query.mapId, 'parse');
+        },
+        handleConfirm(params) {
+            if (params.operate == 'AddPlanningTrain') {
+                // 添加计划
+                this.$refs.addPlanningTrain.handleConfirm();
+            } else if (params.operate == 'DeletePlanningTrain') {
+                // 删除计划
+                const model = {
+                    planId: this.loadRunPlanId,
+                    serviceNumber: params.serviceNumber
+                };
+                deletePlanService(model).then(resp => {
+                    this.$message.success(this.$t('tip.deletePlanSuccessfully'));
+                    // this.$store.dispatch('runPlan/setSelected', {});
+                    this.$store.dispatch('runPlan/setDraftSelected', {});
+                    this.$store.dispatch('runPlan/refresh');
+                    // this.$refs.openRunPlan.loadRunPlanData(Object.assign({refresh: true}, this.$route.query));
+                }).catch(() => {
+                    this.$messageBox(this.$t('tip.deletePlanFailed'));
+                });
+            }
+        },
+        showTrain() {
+            if (this.$refs.schedule) {
+                this.$refs.schedule.displayTrain();
+            }
+        },
+        refresh() {
+            this.$store.dispatch('runPlan/refresh');
+        },
+        refreshRunPlanList(planId) {
+            getRpListByMapId(this.$route.query.mapId).then(resp => {
+                this.runPlanList = resp.data || [];
+                if (planId && this.runPlanList.length) {
+                    this.runPlanList.forEach(item => {
+                        if (item.id === planId) {
+                            this.loadRunPlanId = item.id;
+                            this.loadRunPlanName = item.name;
+                        }
+                    });
+                } else {
+                    this.loadRunPlanId = '';
+                    this.loadRunPlanName = '';
+                }
+            }).catch(() => {
+                this.$message.error('获取草稿运行图列表失败');
+            });
+        },
+        doClose() {
+            this.$emit('doClose');
+        },
+        loadingRunPlan(param) {
+            this.loadRunPlanId = param.planId;
+            this.loadRunPlanName = param.planName;
+        },
+        modifyRunPlanName() {
+            if (this.loadRunPlanId && this.loadRunPlanName) {
+                this.$refs.editPlan.doShow({id: this.loadRunPlanId, name: this.loadRunPlanName});
+            } else {
+                this.$message.info(this.$t('planMonitor.openRunPlan.pleaseSelectRunplan'));
+            }
+        },
+        refreshRunPlanName(name) {
+            this.$refs.schedule.refreshRunPlanName(name);
+            this.refreshRunPlanList(this.loadRunPlanId);
+            this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, planName: name }});
+        }
+    }
+};
+</script>
+
+<style>
+    .plan-tool {
+        position: absolute;
+    }
+
+    .plan-tool .pop-menu {
+        background: #F0F0F0;
+    }
+
+    .plan-tool .pop-menu span {
+        color: #000;
+    }
+
+    .scheduleIn{
+        width:100%;
+        height: 100%;
+        position: relative;
+    }
+
+    .plan-tool .system-close {
+        cursor: pointer;
+        height: 25px;
+        width: 25px;
+        background: -webkit-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: -o-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: -moz-linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+        border: 1px solid white;
+        border-radius: 4px;
+    }
+
+    .plan-tool .system-close::before {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        font-size: x-large;
+    }
+
+    .planEdit__tool {
+        overflow: hidden !important;
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menuBar.vue b/src/views/newMap/display/terminals/diagramEdit/menuBar.vue
new file mode 100644
index 000000000..cd31f998d
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menuBar.vue
@@ -0,0 +1,912 @@
+<template>
+  <div id="PlanMenuBar">
+    <div class="nav" style="height:45px;">
+      <template v-for="(item,i) in menus">
+        <template v-if="noShowingChildren(item.children)">
+          <li v-if="isNotUser" :key="i" class="nav-li" @click="hookClick(item)">
+            <span class="nav-li-text">{{ item.title }}</span>
+          </li>
+        </template>
+        <template v-else>
+          <li v-if="isNotUser" :key="i" class="nav-li" :class="{'menu_active' :i==classA}" @click.stop="popupMenuA(item, i)">
+            <span class="nav-li-text">{{ item.title }}</span>
+            <ul class="nav-ul" :class="{'active' :i==classA}">
+              <template v-for="(child,j) in item.children">
+                <template
+                  v-if="child.children&&child.children.length>0&&hasShowingChildren(child.children)"
+                >
+                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator">
+                    <span class="separator">&ensp;</span>
+                  </li>
+                  <li v-else-if="child.type === 'file'" :key="j" class="menu-li">
+                    <div class="menu-li-block" :disabled="child.disabled">
+                      <span class="menu-li-text">
+                        <el-button type="text" class="button" :disabled="child.disabled">
+                          <input
+                            :ref="child.label"
+                            type="file"
+                            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                            @change="openLoadFile(child)"
+                          >
+                          <span> {{ child.title }}</span>
+                        </el-button>
+                      </span>
+                    </div>
+                  </li>
+                  <li v-else :key="j" class="menu-li" @click.stop="popupMenuB(child, j)">
+                    <div class="menu-li-block" :disabled="child.disabled">
+                      <span class="menu-li-text">
+                        <span class="label">{{ child.title }}</span>
+                        <i v-if="j!==classB" class="el-icon-arrow-right" style="float: right;height: 30px;line-height: 30px;" />
+                        <i v-if="j===classB" class="el-icon-arrow-left" style="float: right;height: 30px;line-height: 30px;" />
+                      </span>
+                    </div>
+                    <ul class="menu-ul" :class="{'children-active' :j==classB}">
+                      <template v-for="(grandchild,k) in child.children">
+                        <li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator">
+                          <span class="separator">&ensp;</span>
+                        </li>
+                        <li v-else-if="grandchild.type === 'file'" :key="k" class="menu-li">
+                          <div class="menu-li-block" :disabled="grandchild.disabled">
+                            <span class="menu-li-text">
+                              <el-button
+                                type="text"
+                                class="button"
+                                :disabled="grandchild.disabled"
+                              >
+                                <input
+                                  :ref="grandchild.label"
+                                  type="file"
+                                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                                  @change="openLoadFile(grandchild)"
+                                >
+                                <span> {{ grandchild.title }}</span>
+                              </el-button>
+                            </span>
+                          </div>
+                        </li>
+                        <li v-else :key="k" class="menu-li" @click.stop="hookClick(grandchild)">
+                          <div class="menu-li-block" :disabled="grandchild.disabled">
+                            <span class="menu-li-text">
+                              <span class="label">{{ grandchild.title }}</span>
+                            </span>
+                          </div>
+                        </li>
+                      </template>
+                    </ul>
+                  </li>
+                </template>
+                <template v-else>
+                  <li v-if="child.type === 'separator'" :key="j" class="menu-separator">
+                    <span class="separator">&ensp;</span>
+                  </li>
+                  <li v-else-if="child.type === 'file'" :key="j" class="menu-li">
+                    <div class="menu-li-block" :disabled="child.disabled">
+                      <span class="menu-li-text">
+                        <el-button type="text" class="button" :disabled="child.disabled">
+                          <input
+                            :ref="child.title"
+                            type="file"
+                            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                            @change="openLoadFile(child)"
+                          >
+                          <span> {{ child.title }}</span>
+                        </el-button>
+                      </span>
+                    </div>
+                  </li>
+                  <li v-else :key="j" class="menu-li" @click.stop="hookClick(child)">
+                    <div class="menu-li-block" :disabled="child.disabled">
+                      <span class="menu-li-text">
+                        <span class="label">{{ child.title }}</span>
+                      </span>
+                    </div>
+                  </li>
+                </template>
+              </template>
+            </ul>
+          </li>
+        </template>
+      </template>
+      <!-- <div class="nav-li" style="position: absolute; right: 10px;" @click="back">
+        <span class="nav-li-text">{{ dispaly||closeWindow?'关闭':$t('global.back') }}</span>
+      </div> -->
+    </div>
+    <el-dialog
+      title="运行图发布"
+      :visible.sync="publishVisible"
+      width="30%"
+      center
+      :modal="false"
+      :before-close="handleClose"
+    >
+      <el-input v-model="publishName"><template slot="prepend">运行图名称:</template></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="publishVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmPublish">确 定</el-button>
+      </span>
+    </el-dialog>
+    <route-map ref="routeMap" :load-run-plan-id="loadRunPlanId" />
+    <runplan-config ref="runplanConfig" />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import routeMap from './components/routingoperate/routeMap';
+import RunplanConfig from './components/routingoperate/runplanConfig';
+import { planEffectiveCheck, clearPlaningData } from '@/api/runplan';
+// import { launchFullscreen } from '@/utils/screen';
+// import { UrlConfig } from '@/scripts/ConstDic';
+import { EventBus } from '@/scripts/event-bus';
+import { publishRunPlanAllUser } from '@/api/designPlatform';
+import { deleteRunPlan } from '@/api/runplan';
+
+export default {
+    name: 'PlanMenuBar',
+    components: { routeMap, RunplanConfig },
+    props: {
+        planConvert: {
+            type: Object,
+            default: function() {
+                return { };
+            }
+        },
+        runPlanList: {
+            type: Array,
+            default: function() {
+                return [];
+            }
+        },
+        loadRunPlanId: {
+            type: String,
+            default: function() {
+                return '';
+            }
+        },
+        loadRunPlanName: {
+            type: String,
+            default: function() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            isNotUser: true,
+            classA: -1,
+            classB: -1,
+            tempClassA: -1,
+            tempClassB: -1,
+            menus: [],
+            loading: null,
+            publishName: '',
+            publishVisible: false,
+            menuBase: [
+                {
+                    title: this.$t('planMonitor.file'),
+                    children: [
+                        {
+                            title: '创建',
+                            click: this.newRunPlan
+                        },
+                        {
+                            title: '打开',
+                            children: []
+                        },
+                        {
+                            title: '删除',
+                            click: this.deleteRunPlanOperate
+                        },
+                        {
+                            title: '重命名',
+                            click: this.modifyRunPlanName
+                        },
+                        {
+                            title: '发布',
+                            click: this.publishRunPlan
+                        }
+                        // {
+                        //     title: '创建运行图',
+                        //     click: this.newRunPlan
+                        // }
+                    ]
+                },
+                {
+                    title: this.$t('planMonitor.tool'),
+                    children: [
+                        {
+                            title: '生成计划',
+                            click: this.handleGernaratePlanningTrain
+                        }
+                    ]
+                },
+                {
+                    title: '编辑',
+                    children: [
+                        {
+                            title: this.$t('planMonitor.addPlan'),
+                            click: this.handleAddPlanningTrain
+                        },
+                        {
+                            title: this.$t('planMonitor.deletePlan'),
+                            click: this.handleDeletePlanningTrain
+                        },
+                        {
+                            title: '平移计划',
+                            click: this.handleMovePlanningTrain
+                        },
+                        {
+                            title: this.$t('planMonitor.duplicatePlan'),
+                            click: this.handleDuplicateTrain
+                        },
+                        {
+                            type: 'separator'
+                        },
+                        {
+                            title: this.$t('planMonitor.addTask'),
+                            click: this.handleAddTask
+                        },
+                        {
+                            title: this.$t('planMonitor.deleteTask'),
+                            click: this.handleDeleteTask
+                        },
+                        {
+                            title: this.$t('planMonitor.modifyTask'),
+                            click: this.handleModifyingTask
+                        },
+                        {
+                            title: '清除数据',
+                            click: this.handleClearData
+                        }
+                    ]
+                },
+                {
+                    title: '配置',
+                    children: [
+                        {
+                            title: '交路设置',
+                            click: this.handleRoutingSettings
+                        },
+                        {
+                            title: '运行等级设置',
+                            click: this.handleRoutingLevel
+                        },
+                        {
+                            title: '停站时间设置',
+                            click: this.handleDwellTime
+                        },
+                        {
+                            title: '折返时间设置',
+                            click: this.handleRunplanParams
+                        }
+                    ]
+                },
+                {
+                    title: '测试',
+                    children: [
+                        {
+                            title: this.$t('planMonitor.validityCheck'),
+                            click: this.handlePlanEffectiveCheck
+                        }
+                        // {
+                        //     title: this.$t('planMonitor.testRunningDiagram'),
+                        //     click: this.handleTestRunPlan
+                        // }
+                    ]
+                }
+                // {
+                //     title: this.$t('planMonitor.modify'),
+                //     children: [
+                //         // {
+                //         //     title: '计划参数',
+                //         //     click: this.handleParameter,
+                //         // },
+                //         // {
+                //         //     title: '打印参数',
+                //         //     click: this.undeveloped,
+                //         // },
+                //         // {
+                //         //     type: 'separator'
+                //         // },
+                //         // {
+                //         //     type: 'separator'
+                //         // },
+                //         // {
+                //         //     title: '修改交路',
+                //         //     click: this.handleModifyingRouting,
+                //         // },
+                //         // {
+                //         //     title: '修改开始时间',
+                //         //     click: this.handleModifyingStartTime,
+                //         // },
+                //         // {
+                //         //     title: '快速增加任务',
+                //         //     click: this.undeveloped,
+                //         // }
+                //     ]
+                // }
+            ]
+        };
+    },
+    computed: {
+        ...mapGetters('training', [
+            'mode'
+        ]),
+        ...mapGetters('map', [
+            'stationList'
+        ]),
+        dispaly() {
+            return this.$route.path.includes('display');
+        },
+        closeWindow() {
+            return this.$route.path.includes('newTool');
+        }
+    },
+    watch: {
+        tempClassA() {
+            this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA;
+        },
+        tempClassB() {
+            this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB;
+        },
+        '$store.state.menuOperation.break': function (val) {
+            if (val) {
+                this.classA = this.classB = -1;
+            } else {
+                this.classA = this.tempClassA;
+                this.classB = this.tempClassB;
+            }
+        },
+        '$route.query.planId': function () {
+            this.menus = this.menuConvert(this.menuBase);
+        },
+        runPlanList() {
+            this.initMenu();
+        }
+    },
+    created() {
+        if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
+            this.isNotUser = false;
+        } else {
+            this.isNotUser = true;
+        }
+    },
+    mounted() {
+        this.initMenu();
+    },
+    methods: {
+        back() {
+            // this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
+            if (this.dispaly) {
+                this.$emit('doClose');
+            } else if (this.closeWindow) {
+                window.close();
+            } else {
+                this.$router.go(-1);
+            }
+        },
+        menuConvert(menuBase) {
+            const menus = [];
+            menuBase.forEach(elem => {
+                const item = {};
+                Object.keys(elem).forEach(key => {
+                    if (key == 'disabledCallback') {
+                        item['disabled'] = elem.disabledCallback();
+                    } else if (key != 'children') {
+                        item[key] = elem[key];
+                    } else {
+                        item.children = this.menuConvert(elem.children || []);
+                    }
+                });
+                menus.push(item);
+            });
+
+            return menus;
+        },
+        initMenu() {
+            const menuLoading = [];
+            this.runPlanList.forEach(item => {
+                menuLoading.push({title: item.name, planId:item.id, planName: item.name, click: this.loadingRunPlan});
+            });
+            this.menuBase.forEach(item => {
+                if (item.title === this.$t('planMonitor.file')) {
+                    item.children.forEach(elem => {
+                        if (elem.title === '打开') {
+                            elem.children = menuLoading;
+                        }
+                    });
+                }
+            });
+            this.menus = this.menuConvert(this.menuBase);
+            this.clickEvent();
+            this.closeMenu();
+        },
+        clickEvent() {
+            const self = this;
+            window.onclick = function (e) {
+                self.closeMenu(false);
+            };
+        },
+        noShowingChildren(children) {
+            if (!children || children.length <= 0) {
+                return true;
+            }
+            return false;
+        },
+        hasShowingChildren(children) {
+            if (children && children.length > 0) {
+                return true;
+            }
+            return false;
+        },
+        closeMenu() {
+            this.classA = this.tempClassA = -1;
+            this.classB = this.tempClassB = -1;
+        },
+        hookClick(item, event) {
+            this.closeMenu();
+            if (!item.disabled) {
+                setTimeout(() => {
+                    if (item && typeof item.click == 'function') {
+                        item.click(item);
+                    }
+                }, 500);
+            }
+        },
+        popupMenuA(item, index) {
+            this.clickEvent();
+            this.tempClassA = index;
+            this.tempClassB = -1;
+        },
+        popupMenuB(item, index) {
+            this.tempClassB = index;
+        },
+        openLoadFile(item) {
+            const obj = this.$refs[item.title][0];
+            if (obj.files) {
+                const file = obj.files[0];
+                item.click(file);
+                obj.value = '';
+            }
+        },
+        doClose() {
+            this.$nextTick(() => {
+                EventBus.$emit('closeMenu');
+            });
+        },
+        // 刷新
+        refresh() {
+            this.closeMenu(true);
+            EventBus.$emit('refresh');
+        },
+        undeveloped() {
+            this.doClose();
+            this.$alert( this.$t('planMonitor.implemented'), this.$t('tip.hint'), {
+                confirmButtonText: this.$t('global.confirm'),
+                callback: action => {
+                }
+            });
+        },
+        loadingScreen() {
+            this.loading = this.$loading({
+                lock: true,
+                text: this.$t('tip.underImport'),
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+        },
+        newRunPlan() {
+            this.$emit('dispatchDialog', { name: 'createEmptyPlan', params: {}});
+        },
+        // 自动生成
+        handleAutoGenerate() {
+            this.$emit('dispatchDialog', { name: 'editSmoothRunTime', params: {} });
+        },
+        // 交路设置
+        handleRoutingSettings() {
+            if (this.loadRunPlanId) {
+                this.$refs.routeMap.doShow('routeMap');
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 运行图配置文件
+        handleRunplanParams() {
+            if (this.loadRunPlanId) {
+                this.$refs.runplanConfig.doShow();
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 停站时间
+        handleDwellTime() {
+            if (this.loadRunPlanId) {
+                this.$emit('dispatchDialog', { name: 'modifyingStationStopTime', params: {} });
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 运行等级
+        handleRoutingLevel() {
+            if (this.loadRunPlanId) {
+                this.$emit('dispatchDialog', { name: 'modifyingStationIntervalTime', params: {} });
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 生成计划
+        handleGernaratePlanningTrain() {
+            if (this.loadRunPlanId) {
+                // this.$emit('dispatchDialog', { name: 'gernaratePlanTrain', params: {} });
+                this.$refs.routeMap.doShow('generateRouting');
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 校验运行图
+        handlePlanEffectiveCheck() {
+            if (this.loadRunPlanId) {
+                planEffectiveCheck(this.loadRunPlanId).then(resp => {
+                    this.$emit('dispatchDialog', {
+                        name: 'systermOut',
+                        params: {
+                            width: 600,
+                            contextList: resp.data.length > 0 ? resp.data : ['检查成功']
+                        }
+                    });
+                }).catch(() => {
+                    this.$messageBox(this.$t('tip.runGraphVerificationFailed'));
+                });
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 计划参数
+        handleParameter() {
+            this.$emit('dispatchDialog', { name: 'parameter', params: {} });
+        },
+        // 添加计划
+        handleAddPlanningTrain() {
+            const planId = this.loadRunPlanId;
+            if (planId) {
+                this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 清除数据
+        handleClearData() {
+            this.$confirm('本操作将清除本运行图数据！', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                center: true
+            }).then(() => {
+                clearPlaningData(this.loadRunPlanId).then(resp => {
+                    console.log('清除数据成功！');
+                    this.$emit('refreshData', this.loadRunPlanId);
+                }).catch(() => {
+                    this.$message.error('清除数据失败！');
+                });
+            }).catch(() => {
+                console.error('清除数据失败!');
+            });
+        },
+        // 删除计划
+        handleDeletePlanningTrain() {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            if (serviceNumber) {
+                this.$emit('dispatchDialog', {
+                    name: 'offLine', params: {
+                        type: 'warning',
+                        width: 260,
+                        message: this.$t('tip.deleteTrainHint') + serviceNumber + '?',
+                        operate: 'DeletePlanningTrain',
+                        serviceNumber: serviceNumber,
+                        refresh: true
+                    }
+                });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPlan'));
+            }
+        },
+        // 修改计划
+        handleEditPlanningTrain() {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            if (serviceNumber) {
+                this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPlan'));
+            }
+        },
+        // 移动计划
+        handleMovePlanningTrain() {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            if (serviceNumber) {
+                this.$emit('dispatchDialog', { name: 'movePlaningTrain', params: { serviceNumber } });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPlan'));
+            }
+        },
+        // 复制计划
+        handleDuplicateTrain() {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            if (serviceNumber) {
+                this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPlan'));
+            }
+        },
+        // 添加任务
+        handleAddTask() {
+            const params = this.$store.state.runPlan.draftSelected;
+            if (params.serviceNumber && params.tripNumber) {
+                // this.$emit('dispatchDialog', { name: 'addTask', params });
+                params.dialogType = 'addTask';
+                this.$emit('dispatchDialog', { name: 'showDialog', params });
+            } else {
+                this.$messageBox(this.$t('tip.selectATrain'));
+            }
+        },
+        // 删除任务
+        handleDeleteTask() {
+            const params = this.$store.state.runPlan.draftSelected;
+            if (params.serviceNumber && params.tripNumber) {
+                // this.$emit('dispatchDialog', { name: 'deleteTask', params });
+                params.dialogType = 'deleteTask';
+                this.$emit('dispatchDialog', { name: 'showDialog', params });
+            } else {
+                this.$messageBox(this.$t('tip.selectATrain'));
+            }
+        },
+        // 修改任务
+        handleModifyingTask() {
+            const params = this.$store.state.runPlan.draftSelected;
+            if (params.serviceNumber && params.tripNumber) {
+                // this.$emit('dispatchDialog', { name: 'modifyingTask', params });
+                params.dialogType = 'modifyingTask';
+                this.$emit('dispatchDialog', { name: 'showDialog', params });
+            } else {
+                this.$messageBox(this.$t('tip.selectATrain'));
+            }
+        },
+        modifyRunPlanName() {
+            this.$emit('modifyRunPlanName');
+        },
+        // 修改交路
+        handleModifyingRouting() {
+            const params = this.$store.state.runPlan.draftSelected;
+            this.$emit('dispatchDialog', { name: 'modifyingRouting', params });
+        },
+        // 修改开始时间
+        handleModifyingStartTime() {
+            const params = this.$store.state.runPlan.draftSelected;
+            this.$emit('dispatchDialog', { name: 'modifyingBeginTime', params });
+        },
+        loadingRunPlan(param) {
+            this.$emit('loadingRunPlan', param);
+        },
+        deleteRunPlanOperate() {
+            // 删除运行图
+            if (this.loadRunPlanId) {
+                this.$confirm(this.$t('planMonitor.openRunPlan.confirmDeleteRunPlan'), this.$t('tip.hint'), {
+                    confirmButtonText: this.$t('tip.confirm'),
+                    cancelButtonText: this.$t('tip.cancel'),
+                    type: 'warning'
+                }).then(() => {
+                    deleteRunPlan(this.loadRunPlanId).then(Response => {
+                        this.$message.success(this.$t('planMonitor.openRunPlan.deleteSuccess'));
+                        this.$emit('refresh');
+                    }).catch(() => {
+                        this.$messageBox(this.$t('tip.deleteOperationGraphFailed'));
+                    });
+                }).catch(() => { });
+            } else {
+                this.$message.error('请先打开运行图！');
+            }
+        },
+        publishRunPlan() {
+            if (this.loadRunPlanId) {
+                this.publishVisible = true;
+                this.publishName = this.loadRunPlanName;
+            } else {
+                this.$message.error('请先打开运行图！');
+            }
+        },
+        handleClose() {
+            this.publishVisible = false;
+        },
+        confirmPublish() {
+            publishRunPlanAllUser(this.loadRunPlanId, this.publishName || this.loadRunPlanName).then(resp => {
+                this.$message.success(this.$t('tip.publishRunPlanSuccess'));
+                this.publishVisible = false;
+            }).catch(() => {
+                this.$messageBox(this.$t('tip.publishRunPlanFail'));
+                this.publishVisible = false;
+            });
+        }
+    }
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+    $top: 0px;
+    $width: 30px;
+    $height: 40px;
+    $menuPadding: 15px;
+    $menuItemHeight: 30px;
+    $menuItemWidth: 160px;
+    $menuItemPadding: 5px;
+
+    #PlanMenuBar {
+        width: 100%;
+        line-height: $height;
+        position: absolute;
+        z-index: 2;
+        left:0;
+        top:0;
+    }
+
+    .nav {
+        display: block;
+        cursor: pointer;
+        list-style: none;
+        // border: 1px solid #B6BCCC !important;
+		background-color: #293c55;
+		box-sizing: border-box;
+		padding-left: 20px;
+    }
+
+    .nav-li {
+        position: relative;
+        display: inline-block;
+		padding: 0 $menuPadding;
+		color: rgba(255,255,255,0.45);
+		border-top: 4px solid #293c55;
+    }
+
+    .nav-li.menu_active {
+		border-top: 4px solid #a9334c;
+		background-color: #0e151f;
+		transition: 0.5s all;
+    }
+
+	.nav-li:hover {
+		border-top: 4px solid #a9334c;
+		background-color: #0e151f;
+		transition: 0.5s all;
+    }
+
+	.nav-li:hover .nav-li-text{
+		color: #fff;
+	}
+
+	.nav-li.menu_active .nav-li-text {
+		color: #fff;
+    }
+
+    .nav-li-text {
+        font-size: 13px;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .nav-ul {
+        display: none;
+        position: absolute;
+        list-style: none;
+        border: 1px solid gray;
+        width: $menuItemWidth;
+        padding: 0px;
+        margin: 0px;
+    }
+
+    .menu-ul {
+        display: none;
+        list-style: none;
+        background: #F0F0F0;
+        line-height: $menuItemHeight;
+        width: $menuItemWidth;
+        bottom: $menuItemHeight;
+    }
+
+    .active {
+        position: absolute;
+		left: 0;
+        display: block !important;
+    }
+
+    .children-active {
+		position: relative;
+		left: 160px;
+		display: block !important;
+        padding-left: 0px;
+	}
+
+    .menu-ul-text {
+        font-size: 14px;
+        letter-spacing: 0;
+        height: $menuItemHeight;
+        line-height: $menuItemHeight;
+        border-left: 1px solid #000;
+        border-right: 1px solid #000;
+    }
+
+    .menu-separator {
+        text-align: left;
+        background: #F0F0F0;
+        height: 2px;
+        line-height: 2px;
+    }
+
+    .menu-separator .status {
+        display: inline-block;
+        border-right: 1px inset #CACACA;
+        width: $width;
+        height: 100%;
+        background: #EFECDE;
+    }
+
+    .menu-separator .separator {
+        display: inline-block;
+        background: #293c55;
+        // margin-left: 5px;
+        height: 2px;
+        width: 100%;
+    }
+
+    .menu-li {
+        text-align: left;
+        background: #162436;
+        height: $menuItemHeight;
+        line-height: $menuItemHeight;
+    }
+
+    .menu-li-block {
+        letter-spacing: 0;
+        height: $menuItemHeight;
+        line-height: $menuItemHeight;
+    }
+
+    .menu-li-text {
+        font-size: 14px;
+    }
+
+    .menu-li-text .label {
+        display: inline-block;
+        margin-left: 5px;
+		padding-left: 12px;
+    }
+
+    .menu-li-text .button {
+        position: relative;
+        overflow: hidden;
+        line-height: 0px;
+        width: 100%;
+        top: 0;
+        color:rgba(255,255,255,0.45);
+        cursor: pointer;
+		padding-left: 16px;
+		text-align: left;
+
+        input {
+            opacity: 0;
+            cursor: pointer;
+            position: absolute;
+            top: 0px;
+            width: $menuItemWidth - $width - 10px;
+        }
+    }
+
+    .menu-li-block:hover {
+        background: #C9DEF7;
+		color: #000;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+    }
+
+	.menu-li-text .button:hover{
+		color: #000;
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/createEmptyPlan.vue b/src/views/newMap/display/terminals/diagramEdit/menus/createEmptyPlan.vue
new file mode 100644
index 000000000..014ea95e7
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/createEmptyPlan.vue
@@ -0,0 +1,291 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool create-empty-plan"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="30%"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <div>
+      <el-tabs v-model="activeTab" type="card">
+        <el-tab-pane :label="this.$t('planMonitor.normalNew')" name="first">
+          <el-row>
+            <el-form ref="form" :model="newModel" label-width="140px" size="mini" :rules="rules" @submit.native.prevent>
+              <el-form-item :label="this.$t('planMonitor.runGraphName')+this.$t('global.colon')" prop="name">
+                <el-input v-model.trim="newModel.name" autofocus />
+              </el-form-item>
+            </el-form>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane :label="this.$t('planMonitor.createFromTheReleaseRunGraph')" name="second">
+          <el-row>
+            <el-form ref="pullForm" :model="pullModel" label-width="140px" size="mini" :rules="pullRules" @submit.native.prevent>
+              <el-form-item :label="this.$t('planMonitor.releaseRunGraph')" prop="templateId">
+                <el-select v-model="pullModel.templateId" :placeholder="$t('map.pleaseSelect')">
+                  <el-option
+                    v-for="item in publishMapList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="this.$t('planMonitor.runGraphName')+this.$t('global.colon')" prop="name">
+                <el-input v-model.trim="pullModel.name" autofocus />
+              </el-form-item>
+            </el-form>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="导入运行图" name="three">
+          <el-row>
+            <el-button type="text" class="uploadDemo">
+              <input
+                ref="files"
+                type="file"
+                class="file_box"
+                accept=".json, application/json, .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                @change="importf"
+              >
+              <i class="el-icon-plus" />
+            </el-button>
+          </el-row>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" :loading="loading" @click="handleCommit">{{ $t('map.confirm') }}</el-button>
+      <el-button @click="doClose">{{ $t('map.cancel') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { createEmptyPlan, queryRunPlanList, postCreatePlan, importRunPlan } from '@/api/runplan';
+import XLSX from 'xlsx';
+
+export default {
+    name: 'CreateEmptyPlan',
+    components: {
+    },
+    props: {
+        planConvert: {
+            type: Object,
+            default: function() {
+                return { };
+            }
+        }
+    },
+    data() {
+        return {
+            activeTab: 'second',
+            dialogShow: false,
+            loading: false,
+            loadingDig: null,
+            publishMapList: [],
+            newModel: {
+                name: '',
+                mapId: this.$route.params.mapId || this.$route.query.mapId
+            },
+            pullModel: {
+                templateId: '',
+                name: '',
+                mapId: this.$route.params.mapId || this.$route.query.mapId
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.newRunGraph');
+        },
+        rules() {
+            return {
+                name: [
+                    { required: true, message: this.$t('rules.enterTheNameOfTheRunGraph'), trigger: 'blur' }
+                ]
+            };
+        },
+        pullRules() {
+            return {
+                templateId: [
+                    { required: true, message: this.$t('rules.chooseToPublishTheRunGraph'), trigger: 'change' }
+                ],
+                name: [
+                    { required: true, message: this.$t('rules.enterTheNameOfTheRunGraph'), trigger: 'blur' }
+                ]
+            };
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        async initLoad() {
+            const res = await queryRunPlanList(this.$route.params.mapId || this.$route.query.mapId);
+            if (res.code == 200 && res.data.length) {
+                this.publishMapList = res.data;
+            }
+        },
+        doShow() {
+            this.newModel.mapId = this.$route.params.mapId || this.$route.query.mapId;
+            this.pullModel.mapId = this.$route.params.mapId || this.$route.query.mapId;
+            this.dialogShow = true;
+            this.initLoad();
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+            this.newModel.name = '';
+            this.pullModel.templateId = '';
+            this.pullModel.name = '';
+            if (this.$refs.form) {
+                this.$refs.form.resetFields();
+            }
+            if (this.$refs.pullForm) {
+                this.$refs.pullForm.resetFields();
+            }
+        },
+        handleCommit() {
+            if (this.activeTab === 'first') {
+                this.$refs['form'].validate((valid) => {
+                    if (valid) {
+                        this.loading = true;
+                        createEmptyPlan(this.newModel).then(resp => {
+                            this.$emit('refresh', resp.data);
+                            this.$message.success(this.$t('tip.createAnEmptyRunGraphSuccessfully'));
+                            this.doClose();
+                        }).catch((error) => {
+                            this.$messageBox(this.$t('error.createOperationGraphFailed') + this.$t('global.colon') + error.message);
+                            this.doClose();
+                        });
+                    }
+                });
+            } else {
+                this.$refs['pullForm'].validate((valid) => {
+                    if (valid) {
+                        this.loading = true;
+                        postCreatePlan(this.pullModel).then(resp => {
+                            this.$message.success(this.$t('tip.createARunGraphSuccessfully'));
+                            this.$emit('refresh', resp.data);
+                            this.doClose();
+                        }).catch((error) => {
+                            this.$messageBox(this.$t('error.createOperationGraphFailed') + this.$t('global.colon') + error.message);
+                            this.doClose();
+                        });
+                    }
+                });
+            }
+        },
+        importf(item) {
+            const obj = this.$refs.files;
+            if (obj.files) {
+                const file = obj.files[0];
+                this.handleImportRunPlan(file);
+                obj.value = '';
+            }
+        },
+        loadingScreen() {
+            this.loadingDig = this.$loading({
+                lock: true,
+                text: this.$t('tip.underImport'),
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+        },
+        // 导入运行图
+        handleImportRunPlan(file) {
+            if (file) {
+                this.loadingScreen();
+                setTimeout(() => {
+                    const that = this;
+                    const reader = new FileReader();
+                    if (reader) {
+                        reader.onload = function (e) {
+                            let wb;
+                            const data = e.target.result;
+                            if (that.rABS) {
+                                wb = XLSX.read(btoa(that.fixdata(data)), { // 手动转化
+                                    type: 'base64'
+                                });
+                            } else {
+                                wb = XLSX.read(data, {
+                                    type: 'binary'
+                                });
+                            }
+                            if (wb) {
+                                try {
+                                    let jsonData = [];
+                                    for (const index in wb.Sheets) {
+                                        jsonData = that.planConvert.importData(wb.Sheets[index], jsonData);
+                                    }
+
+                                    // if (that.$route.query.lineCode == '02' && !jsonData[0].downTrack && !jsonData[0].upTrack) {
+                                    //     that.loadingDig.close();
+                                    //     that.$message.warning(`运行图暂无默认上行折返轨或默认下行折返轨，请输入`);
+                                    // } else {
+                                    importRunPlan({ mapId: that.$route.params.mapId || that.$route.query.mapId || '02', runPlanList: jsonData }).then(response => {
+                                        that.loadingDig.close();
+                                        if (response && response.code == 200) {
+                                            that.$message.success(that.$t('tip.importOperationGraphSuccessfully'));
+                                            that.$emit('refresh');
+                                            // this.$emit('dispatchDialog', { name: 'openRunPlan', params: {type: 'add'} });
+                                        }
+                                    }).catch(error => {
+                                        that.loadingDig.close();
+                                        that.$message.warning(`${that.$t('tip.importRunGraphFailed')} ${error.message}`);
+                                    });
+                                    // }
+                                } catch (error) {
+                                    that.loadingDig.close();
+                                    that.$message.warning(`${that.$t('tip.parseRunGraphFailed')} ${error.message}`);
+                                }
+                            }
+                        };
+                        if (that.rABS) {
+                            reader.readAsArrayBuffer(file);
+                        } else {
+                            reader.readAsBinaryString(file);
+                        }
+                    }
+                }, 200);
+            }
+            this.doClose();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-input {
+            width: 160px;
+        }
+
+        .el-input-number {
+            width: 120px;
+        }
+    }
+
+	.uploadDemo{
+		width: 100%;
+		height: 130px;
+		border: 1px dashed #409EFF;
+		position: relative;
+
+		.file_box{
+			position: absolute;
+			opacity: 0;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			cursor: pointer;
+		}
+		.el-icon-plus{
+			font-size: 40px;
+		}
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseLoop.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseLoop.vue
new file mode 100644
index 000000000..a6e24857f
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseLoop.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="planEdit__tool base-loop">
+    <el-row style="margin: 10px">
+      <el-col :span="18">
+        <el-table :data="loopData" border style="width: 100%" height="160">
+          <el-table-column prop="loopName" :label="this.$t('planMonitor.loopName')" />
+          <el-table-column prop="beginStationCode" :label="this.$t('planMonitor.startingStation')" />
+          <el-table-column prop="endStationCode" :label="this.$t('planMonitor.terminal')" />
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row style="margin: 10px">
+      <el-col :span="6">
+        <el-row type="flex" justify="begin" class="button-group">
+          <el-button @click="handleAdd">{{$t('global.add')}}</el-button>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <el-row type="flex" justify="center" class="button-group">
+          <el-button @click="handleDelete">{{$t('global.delete')}}</el-button>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <el-row type="flex" justify="end" class="button-group">
+          <el-button @click="handleModifying">{{$t('global.modify')}}</el-button>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+	name: 'BaseLoop',
+	components: {
+	},
+	data() {
+		return {
+			loopData: []
+		};
+	},
+	mounted() {
+	},
+	methods: {
+		handleAdd() {
+		},
+		handleDelete() {
+		},
+		handleModifying() {
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-button {
+            width: 120px !important;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParameter.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParameter.vue
new file mode 100644
index 000000000..42f501f84
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParameter.vue
@@ -0,0 +1,78 @@
+<template>
+  <el-form
+    ref="form"
+    class="planEdit__tool base-parameter"
+    :model="model"
+    label-width="160px"
+    size="mini"
+    :rules="rules"
+  >
+    <el-form-item :label="this.$t('planMonitor.planName')+this.$t('global.colon')" prop="planName" style="margin-right: 160px">
+      <el-input v-model="model.planName" />
+    </el-form-item>
+    <el-form-item :label="this.$t('planMonitor.fuzhouIconDescription')+this.$t('global.colon')" prop="auxIconDesc" style="margin-right:160px">
+      <el-input v-model="model.auxIconDesc" />
+    </el-form-item>
+    <el-form-item :label="this.$t('planMonitor.upBeginTripNumber')+this.$t('global.colon')" prop="upBeginTripNumber">
+      <el-input-number v-model="model.upBeginTripNumber" controls-position="right" />
+    </el-form-item>
+    <el-form-item :label="this.$t('planMonitor.downBeginTrain')+this.$t('global.colon')" prop="upBeginTrain">
+      <el-input-number v-model="model.upBeginTrain" controls-position="right" />
+    </el-form-item>
+    <el-form-item :label="this.$t('planMonitor.minimumTrainInterval')+this.$t('global.colon')" prop="minInterval">
+      <el-input-number v-model="model.minInterval" controls-position="right" />
+      <span>{{ $t('global.second') }}</span>
+    </el-form-item>
+    <el-form-item :label="this.$t('planMonitor.maximumTrainInterval')+this.$t('global.colon')" prop="maxInterval">
+      <el-input-number v-model="model.maxInterval" controls-position="right" />
+      <span>{{ $t('global.second') }}</span>
+    </el-form-item>
+    <el-form-item :label="this.$t('planMonitor.trainGeneratesInitialLabel')+this.$t('global.colon')" prop="beginServiceNumber">
+      <el-input-number v-model="model.beginServiceNumber" controls-position="right" />
+    </el-form-item>
+    <el-form-item :label="this.$t('planMonitor.minimumTurnbackTime')+this.$t('global.colon')" prop="minReentryTime">
+      <el-input-number v-model="model.minReentryTime" controls-position="right" />
+      <span>{{ $t('global.second') }}</span>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+    name: 'BaseParameter',
+    components: {
+    },
+    data() {
+        return {
+            model: {
+                planName: '',
+                auxIconDesc: '',
+                upBeginTripNumber: 0,
+                upBeginTrain: 0,
+                minInterval: 0,
+                maxInterval: 0,
+                beginServiceNumber: 0,
+                minReentryTime: 0
+            }
+        };
+    },
+    computed: {
+        rules() {
+            return {};
+        }
+    },
+    mounted() {
+    },
+    methods: {
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-form-item {
+            margin-bottom: 10px !important;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParkingDepot.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParkingDepot.vue
new file mode 100644
index 000000000..84063b61d
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseParkingDepot.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-row class="planEdit__tool base-parking-depot">
+    <el-col :span="10" :offset="1">
+      <el-table :data="depotData" border style="width: 100%" height="300">
+        <el-table-column prop="depotCode" :label="this.$t('planMonitor.trainDepot')" />
+        <el-table-column width="40" />
+      </el-table>
+    </el-col>
+    <el-col :span="10" :offset="1">
+      <el-button style="margin-top: 20px" @click="handleModifyingDepotProperty">{{$t('global.modify')}}</el-button>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+	name: 'BaseParkingDepot',
+	components: {
+	},
+	data() {
+		return {
+			depotData: []
+		};
+	},
+	mounted() {
+	},
+	methods: {
+		handleModifyingDepotProperty() {
+			this.$emit('dispatchDialog', { name: 'modifyingDepotProperty', params: {} });
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-button {
+            width: 120px !important;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseRouting.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseRouting.vue
new file mode 100644
index 000000000..bfcf501a8
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseRouting.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="planEdit__tool base-routing">
+    <el-row style="margin: 10px">
+      <el-table :data="routeData" border style="width: 100%" height="250">
+        <el-table-column prop="beginStationCode" :label="this.$t('planMonitor.startingStation')" />
+        <el-table-column prop="beginStationStandCode" :label="this.$t('planMonitor.startingPlatform')" />
+        <el-table-column prop="endStationCode" :label="this.$t('planMonitor.terminal')" />
+        <el-table-column prop="endStationStandCode" :label="this.$t('planMonitor.endingPlatform')" />
+      </el-table>
+    </el-row>
+    <el-row type="flex" justify="center" class="button-group">
+      <el-button @click="handleAdd">{{$t('global.add')}}</el-button>
+      <el-button @click="handleDelete">{{$t('global.delete')}}</el-button>
+      <el-button @click="handleModifying">{{$t('global.modify')}}</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+	name: 'BaseRouting',
+	components: {
+	},
+	data() {
+		return {
+			routeData: []
+		};
+	},
+	mounted() {
+	},
+	methods: {
+		handleAdd() {
+		},
+		handleDelete() {
+		},
+		handleModifying() {
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-button {
+            width: 120px !important;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseStation.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseStation.vue
new file mode 100644
index 000000000..644630d75
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/baseStation.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-row class="planEdit__tool base-station">
+    <el-col :span="10" :offset="1">
+      <el-table :data="stationData" border style="width: 100%" height="300">
+        <el-table-column prop="stationCode" :label="this.$t('planMonitor.station')" />
+        <el-table-column width="40" />
+      </el-table>
+    </el-col>
+    <el-col :span="10" :offset="1">
+      <el-button style="margin-top: 20px" @click="handleModifyingStationProperty">{{ $t('planMonitor.modifyAttribute') }}</el-button>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+    name: 'BaseStation',
+    components: {
+    },
+    data() {
+        return {
+            stationData: []
+        };
+    },
+    mounted() {
+    },
+    methods: {
+        handleModifyingStationProperty() {
+            this.$emit('dispatchDialog', { name: 'modifyingStationProperty', params: {} });
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-button {
+            width: 120px !important;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/index.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/index.vue
new file mode 100644
index 000000000..5061771ff
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool parameter"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="580px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-tabs v-model="active" type="card" style="height: 410px">
+      <el-tab-pane :label="this.$t('planMonitor.generalParameters')" name="first">
+        <base-parameter ref="baseParameter" />
+      </el-tab-pane>
+      <el-tab-pane :label="this.$t('planMonitor.editingStation')" name="second">
+        <base-station ref="baseStation" @dispatchDialog="dispatchDialog" />
+      </el-tab-pane>
+      <el-tab-pane :label="this.$t('planMonitor.editDepot')" name="third">
+        <base-parking-depot ref="baseParkingLotOrDepot" @dispatchDialog="dispatchDialog" />
+      </el-tab-pane>
+      <el-tab-pane :label="this.$t('planMonitor.editCrossRailway')" name="fourth">
+        <base-routing ref="baseRouting" @dispatchDialog="dispatchDialog" />
+      </el-tab-pane>
+      <el-tab-pane :label="this.$t('planMonitor.editLoopRailway')" name="six">
+        <base-loop ref="baseLoop" @dispatchDialog="dispatchDialog" />
+      </el-tab-pane>
+    </el-tabs>
+    <el-row type="flex" justify="end" class="button-group">
+      <el-button @click="handleCommit">{{$t('global.confirm')}}</el-button>
+      <el-button @click="doClose">{{$t('global.cancel')}}</el-button>
+      <el-button @click="apply">{{$t('global.application')}}</el-button>
+    </el-row>
+    <modifying-station-property ref="modifyingStationProperty" @dispatchDialog="dispatchDialog" />
+    <modifying-station-stand-property ref="modifyingStationStandProperty" />
+    <modifying-depot-property ref="modifyingDepotProperty" />
+  </el-dialog>
+</template>
+
+<script>
+import BaseParameter from './baseParameter';
+import BaseStation from './baseStation';
+import BaseParkingDepot from './baseParkingDepot';
+import BaseRouting from './baseRouting';
+import BaseLoop from './baseLoop';
+import ModifyingStationProperty from './modifyingStationProperty';
+import ModifyingStationStandProperty from './modifyingStationStandProperty';
+import ModifyingDepotProperty from './modifyingDepotProperty';
+
+export default {
+	name: 'Parameter',
+	components: {
+		BaseParameter,
+		BaseStation,
+		BaseParkingDepot,
+		BaseRouting,
+		BaseLoop,
+		ModifyingStationProperty,
+		ModifyingStationStandProperty,
+		ModifyingDepotProperty
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			active: 'first'
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.parameter');
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		doShow() {
+			this.dialogShow = true;
+		},
+		doClose() {
+			this.loading = false;
+			this.dialogShow = false;
+		},
+		dispatchDialog(dialogObj) {
+			this.$nextTick(() => {
+				if (this.$refs[dialogObj.name]) {
+					this.$refs[dialogObj.name].doShow(dialogObj.params);
+				}
+			});
+		},
+		handleCommit() {
+		},
+		apply() {
+
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingDepotProperty.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingDepotProperty.vue
new file mode 100644
index 000000000..42f93ddb6
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingDepotProperty.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool modifying-depot-property"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="460px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row style="margin: 10px">
+      <el-form ref="form" :model="model" label-width="150px" size="mini" :rules="rules">
+        <el-form-item :label="this.$t('planMonitor.numberOfTrainsAvailable')+this.$t('global.colon')" prop="availableTrainNumber">
+          <el-input-number v-model="model.availableTrainNumber" controls-position="right" />
+        </el-form-item>
+        <el-form-item :label="this.$t('planMonitor.continuousMinimumInterval')+this.$t('global.colon')" prop="departMinInterval">
+          <el-input-number v-model="model.departMinInterval" controls-position="right" />
+          <span>{{$t('global.second')}}</span>
+        </el-form-item>
+        <el-form-item :label="this.$t('planMonitor.continuousReturnMaximumInterval')+this.$t('global.colon')" prop="returnMinInterval">
+          <el-input-number v-model="model.returnMinInterval" controls-position="right" />
+          <span>{{$t('global.second')}}</span>
+        </el-form-item>
+        <el-form-item :label="this.$t('planMonitor.afterTheTrainHasBackInterval')+this.$t('global.colon')" prop="hasTrainBackInterval">
+          <el-input-number v-model="model.hasTrainBackInterval" controls-position="right" />
+          <span>{{$t('planMonitor.secondsCanBeRunnedByTrain')}}</span>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row type="flex" justify="center" class="button-group">
+      <el-button @click="handleCommit">{{$t('global.confirm')}}</el-button>
+      <el-button @click="doClose">{{$t('global.cancel')}}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+	name: 'ModifyingDepotProperty',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			model: {
+				availableTrainNumber: 0,
+				departMinInterval: 0,
+				returnMinInterval: 0,
+				hasTrainBackInterval: 0
+			}
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.editDepot');
+		},
+		rules() {
+			return {};
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		doShow() {
+			this.dialogShow = true;
+		},
+		doClose() {
+			this.loading = false;
+			this.dialogShow = false;
+		},
+		handleCommit() {
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationProperty.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationProperty.vue
new file mode 100644
index 000000000..a777ec92d
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationProperty.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool modifying-station-property"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="520px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row>
+      <el-col :span="7" :offset="1">
+        <el-row><span>{{$t('planMonitor.defaultStopTime')}}</span></el-row>
+        <el-row>
+          <el-select v-model="model.defaultStopTime" size="mini" :placeholder="this.$t('global.choose')">
+            <el-option
+              v-for="item in defaultStopTimeList"
+              :key="item.value"
+              :label="item.label"
+              :value="model.value"
+            />
+          </el-select>
+        </el-row>
+        <el-row><span>{{$t('planMonitor.defaultRunLevel')}}</span></el-row>
+        <el-row>
+          <el-select v-model="model.defaultLevel" size="mini" :placeholder="this.$t('global.choose')">
+            <el-option
+              v-for="item in defaultLevelList"
+              :key="item.value"
+              :label="item.label"
+              :value="model.value"
+            />
+          </el-select>
+        </el-row>
+      </el-col>
+      <el-col :span="15">
+        <div class="view-box">
+          <span style="position: relative; left: 10px; top: -8px">{{$t('planMonitor.station')}}</span>
+          <el-row style="margin: 10px; margin-top: 0px">
+            <el-table :data="stationStandData" border height="160">
+              <el-table-column prop="stationStandCode" :label="this.$t('planMonitor.platform')" width="60" />
+              <el-table-column prop="stopTime" :label="this.$t('planMonitor.stopTime')" />
+              <el-table-column prop="level" :label="this.$t('planMonitor.runLevel')" />
+            </el-table>
+            <el-button
+              style="width: 120px; margin-top: 10px; float: right"
+              @click="handleModifyingStationStandProperty"
+            >{{$t('planMonitor.modifyPlatformProperties')}}
+            </el-button>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row type="flex" justify="center" class="button-group">
+      <el-button @click="handleCommit">{{$t('global.confirm')}}</el-button>
+      <el-button @click="doClose">{{$t('global.cancel')}}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+	name: 'ModifyingStationProperty',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			defaultStopTimeList: [],
+			defaultLevelList: [],
+			stationStandData: [],
+			model: {
+				defaultStopTime: '',
+				defaultLevel: ''
+
+			}
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.modifyPlatformProperties');
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		doShow() {
+			this.dialogShow = true;
+		},
+		doClose() {
+			this.loading = false;
+			this.dialogShow = false;
+		},
+		handleModifyingStationStandProperty() {
+			this.$emit('dispatchDialog', { name: 'modifyingStationStandProperty', params: {} });
+		},
+		handleCommit() {
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .view-box {
+        border: 1px solid #BFBBAC;
+    }
+
+    /deep/ {
+        .el-button {
+            margin-left: 40px !important;
+            margin-right: 40px !important;
+        }
+
+        .el-row {
+            margin-bottom: 10px !important;
+        }
+
+        .el-select {
+            width: 120px !important;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationStandProperty.vue b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationStandProperty.vue
new file mode 100644
index 000000000..752a6aab6
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/menus/parameter/modifyingStationStandProperty.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool modifying-station-stand-property"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="360px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row style="margin: 10px">
+      <el-form ref="form" :model="model" label-width="100px" size="mini" :rules="rules">
+        <el-form-item :label="this.$t('planMonitor.defaultStopTime')" prop="defaultStopTime">
+          <el-select v-model="model.defaultStopTime" size="mini" :placeholder="this.$t('global.choose')">
+            <el-option
+              v-for="item in defaultStopTimeList"
+              :key="item.value"
+              :label="item.label"
+              :value="model.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="this.$t('planMonitor.defaultRunLevel')" prop="defaultLevel">
+          <el-select v-model="model.defaultLevel" size="mini" :placeholder="this.$t('global.choose')">
+            <el-option
+              v-for="item in defaultLevelList"
+              :key="item.value"
+              :label="item.label"
+              :value="model.value"
+            />
+          </el-select>
+
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row type="flex" justify="center" class="button-group">
+      <el-button @click="handleCommit">{{$t('global.confirm')}}</el-button>
+      <el-button @click="doClose">{{$t('global.cancel')}}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+	name: 'ModifyingStationStandProperty',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			defaultStopTimeList: [],
+			defaultLevelList: [],
+			model: {
+				defaultStopTime: '',
+				defaultLevel: ''
+			}
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.modifyPlatformProperties');
+		},
+		rules() {
+			return {};
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		doShow() {
+			this.dialogShow = true;
+		},
+		doClose() {
+			this.loading = false;
+			this.dialogShow = false;
+		},
+		handleCommit() {
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/statusBar.vue b/src/views/newMap/display/terminals/diagramEdit/statusBar.vue
new file mode 100644
index 000000000..dbd6ddfe0
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/statusBar.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="PlanStatusBar">
+    <ul class="ul-box">
+      <!-- v-if="isNotUser" -->
+      <div class="li_plan" @click="showTrain">{{ $t('planMonitor.serviceAndTripNumber') }}</div>
+      <div class="li_plan" @click="handleGernaratePlanningTrain">{{ $t('planMonitor.gerneratePlan') }}</div>
+      <div class="li_plan" @click="handleAddPlanningTrain">{{ $t('planMonitor.addPlan') }}</div>
+      <div class="li_plan" @click="handleDeletePlanningTrain">{{ $t('planMonitor.deletePlan') }}</div>
+      <div class="li_plan" @click="handleMovePlanningTrain">移动计划</div>
+      <div class="li_plan" @click="handleDuplicateTrain">{{ $t('planMonitor.duplicatePlan') }}</div>
+      <div class="li_plan" @click="handleAddTask">{{ $t('planMonitor.addTask') }}</div>
+      <div class="li_plan" @click="handleDeleteTask">{{ $t('planMonitor.deleteTask') }}</div>
+      <div class="li_plan" @click="handleModifyingTask">{{ $t('planMonitor.modifyTask') }}</div>
+      <div class="li_plan" @click="handleClearData">清除数据</div>
+    </ul>
+    <ul class="ul-box tool">
+      <div class="li_plan" @click="handlePlanEffectiveCheck">{{ $t('planMonitor.validityCheck') }}</div>
+      <!-- <div class="li_plan" @click="handleTestRunPlan">{{ $t('planMonitor.testRunning') }}</div> -->
+    </ul>
+  </div>
+</template>
+
+<script>
+import { planEffectiveCheck, runPlanNotify, clearPlaningData } from '@/api/runplan';
+import { launchFullscreen } from '@/utils/screen';
+import { UrlConfig } from '@/scripts/ConstDic';
+
+export default {
+    name: 'PlanStatusBar',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            // isNotUser: true
+        };
+    },
+    watch: {
+
+    },
+    created() {
+        // if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
+        //     this.isNotUser = false;
+        // } else {
+        //     this.isNotUser = true;
+        // }
+    },
+    methods: {
+        showTrain() {
+            this.$emit('showTrain');
+        },
+        // 添加计划
+        handleAddPlanningTrain() {
+            const planId = this.loadRunPlanId;
+            if (planId) {
+                this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        handleGernaratePlanningTrain() {
+            const planId = this.loadRunPlanId;
+            if (planId) {
+                this.$emit('dispatchDialog', { name: 'gernaratePlanTrain', params: {} });
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        },
+        // 删除计划
+        handleDeletePlanningTrain() {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            if (serviceNumber) {
+                this.$emit('dispatchDialog', {
+                    name: 'offLine', params: {
+                        type: 'warning',
+                        width: 260,
+                        message: this.$t('tip.deleteTrainHint') + serviceNumber + '?',
+                        operate: 'DeletePlanningTrain',
+                        serviceNumber: serviceNumber,
+                        refresh: true
+                    }
+                });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPlan'));
+            }
+        },
+        handleMovePlanningTrain() {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            if (serviceNumber) {
+                this.$emit('dispatchDialog', { name: 'movePlaningTrain', params: { serviceNumber } });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPlan'));
+            }
+        },
+        // 复制计划
+        handleDuplicateTrain() {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.serviceNumber;
+            if (serviceNumber) {
+                this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPlan'));
+            }
+        },
+        // 添加任务
+        handleAddTask() {
+            const params = this.$store.state.runPlan.draftSelected;
+            if (params.serviceNumber && params.tripNumber) {
+                // this.$emit('dispatchDialog', { name: 'addTask', params });
+                params.dialogType = 'addTask';
+                this.$emit('dispatchDialog', { name: 'showDialog', params });
+            } else {
+                this.$messageBox(this.$t('tip.selectATrain'));
+            }
+        },
+        // 删除任务
+        handleDeleteTask() {
+            const params = this.$store.state.runPlan.draftSelected;
+            if (params.serviceNumber && params.tripNumber) {
+                // this.$emit('dispatchDialog', { name: 'deleteTask', params });
+                params.dialogType = 'deleteTask';
+                this.$emit('dispatchDialog', { name: 'showDialog', params });
+            } else {
+                this.$messageBox(this.$t('tip.selectATrain'));
+            }
+        },
+        // 修改任务
+        handleModifyingTask() {
+            const params = this.$store.state.runPlan.draftSelected;
+            if (params.serviceNumber && params.tripNumber) {
+                // this.$emit('dispatchDialog', { name: 'modifyingTask', params });
+                params.dialogType = 'modifyingTask';
+                this.$emit('dispatchDialog', { name: 'showDialog', params });
+            } else {
+                this.$messageBox(this.$t('tip.selectATrain'));
+            }
+        },
+        // 清除数据
+        handleClearData() {
+            this.$confirm('本操作将清除本运行图数据！', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                center: true
+            }).then(() => {
+                clearPlaningData(this.loadRunPlanId).then(resp => {
+                    console.log('清除数据成功！');
+                    this.$emit('refresh');
+                }).catch(() => {
+                    this.$message.error('清除数据失败！');
+                });
+            }).catch(() => {
+                console.error('清除数据失败!');
+            });
+        },
+        // 校验运行图
+        handlePlanEffectiveCheck() {
+            const planId = this.loadRunPlanId;
+            if (planId) {
+                if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
+                    this.$messageBox(' 功能待完善');
+                } else {
+                    planEffectiveCheck(planId).then(resp => {
+                        this.$emit('dispatchDialog', {
+                            name: 'systermOut',
+                            params: {
+                                width: 600,
+                                contextList: resp.data.length > 0 ? resp.data : ['检查成功']
+                            }
+                        });
+                    }).catch(error => {
+                        this.$messageBox(error.message + ' ' + this.$t('tip.runGraphVerificationFailed'));
+                    });
+                }
+
+            } else {
+                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
+            }
+        }
+        // // 测试运行图
+        // async handleTestRunPlan() {
+        //     const data = { planId: this.$route.query.planId };
+        //     if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
+        //         this.$messageBox(' 功能待完善');
+        //     } else {
+        //         runPlanNotify(data).then(resp => {
+        //             if (resp.data) {
+        //                 const query = {
+        //                     prdType: '01', group: resp.data, mapId: this.$route.query.mapId, planId: this.$route.query.planId
+        //                 };
+        //                 // this.$router.push({ path: `${UrlConfig.display}/plan`, query: query });
+        //                 this.$router.push({ path: UrlConfig.design.testRunPlan, query: query });
+        //                 launchFullscreen();
+        //             } else {
+        //                 this.$messageBox(this.$t('error.checkTheValidityFirst'));
+        //             }
+        //         }).catch(error => {
+        //             this.$messageBox(this.$t('tip.createSimulationFaild') + this.$t('global.colon') + error.message);
+        //         });
+        //     }
+        // }
+    }
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+
+    .PlanStatusBar {
+        z-index: 5;
+        position: absolute;
+        width: 50px;
+		height: 100%;
+		top: 0px;
+		right: 0px;
+		background: #293c55;
+		padding-top: 10px;
+        overflow: hidden;
+		&:hover {
+			z-index: 5000;
+		}
+    }
+	.ul-box{
+		width: 100%;
+		padding: 0;
+		.li_plan{
+			width: 100%;
+			height: 50px;
+			font-size: 14px;
+			color: rgba(255, 255, 255, 0.45);
+			text-align: center;
+			padding: 5px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-bottom: 4px;
+			cursor: pointer;
+
+			&:hover{
+				background: #0e151f;
+				color: #fff;
+			}
+		}
+	}
+
+	.tool{
+		position: absolute;
+		bottom: 50px;
+	}
+</style>
diff --git a/src/views/newMap/display/terminals/diagramEdit/titleBar.vue b/src/views/newMap/display/terminals/diagramEdit/titleBar.vue
new file mode 100644
index 000000000..d58a6efec
--- /dev/null
+++ b/src/views/newMap/display/terminals/diagramEdit/titleBar.vue
@@ -0,0 +1,74 @@
+<template>
+  <div id="PlanTitleBar">
+    <img class="logo" :src="logoImg">
+    <span> {{ mapName }} &ensp;</span>
+    <span v-if="runPlanName">({{ runPlanName }})</span>
+    <span class="system-close el-icon-close" @click="back" />
+  </div>
+</template>
+
+<script>
+import logo_ from '@/assets/logo_.png';
+import { getPublishMapInfo } from '@/api/jmap/map';
+import { UrlConfig } from '@/scripts/ConstDic';
+
+export default {
+    name: 'PlanTitleBar',
+    data() {
+        return {
+            mapName: '',
+            logoImg: logo_
+        };
+    },
+    computed: {
+        runPlanName() {
+            return this.$route.query.planName || '';
+        }
+    },
+    mounted() {
+        getPublishMapInfo(this.$route.query.mapId).then(resp => {
+            this.mapName = resp.data.name;
+        });
+    },
+    methods: {
+        back() {
+            this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
+        }
+    }
+};
+</script>
+<style scoped rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+    $width: 25px;
+    $height: 25px;
+
+    #PlanTitleBar {
+        z-index: 10;
+        display: flex;
+        position: absolute;
+        width: 100%;
+        height: $height;
+        line-height: $height;
+        background: -webkit-linear-gradient(#0055E8, #0099F8);
+        background: -o-linear-gradient(#0055E8, #0099F8);
+        background: -moz-linear-gradient(#0055E8, #0099F8);
+        background: linear-gradient(#0055E8, #0099F8);
+        color: white;
+        font: bold;
+        font-size: 16px;
+
+        .logo {
+            display: inline-block;
+            width: $width;
+            height: $height;
+            padding-right: 5px;
+        }
+
+        .system-close {
+            width: 25px;
+            height: 25px;
+            position: absolute;
+            right: 1px;
+        }
+    }
+</style>
diff --git a/src/views/newMap/display/terminals/index.vue b/src/views/newMap/display/terminals/index.vue
index 219ed755f..79d50a098 100644
--- a/src/views/newMap/display/terminals/index.vue
+++ b/src/views/newMap/display/terminals/index.vue
@@ -24,6 +24,7 @@
     <train-ticket v-else-if="picture === 'trainTicket'" ref="trainTicket" />
     <diagram-load v-else-if="picture === 'diagramLoad'" ref="diagramLoad" :group="group" />
     <diagram-preview v-else-if="picture === 'diagramPreview'" ref="diagramPreview" />
+    <diagram-edit v-else-if="picture === 'diagramEdit'" ref="diagramEdit" />
     <terminal-menu
       v-if="menuShow"
       ref="terminalMenu"
@@ -63,6 +64,7 @@ import RegisterBook from './registerBook';
 import TrainTicket from './trainTicket/index';
 import DiagramLoad from './diagramLoad';
 import DiagramPreview from './diagramPreview';
+import DiagramEdit from './diagramEdit/index';
 
 export default {
     name: 'Index',
@@ -90,7 +92,8 @@ export default {
         RegisterBook,
         TrainTicket,
         DiagramLoad,
-        DiagramPreview
+        DiagramPreview,
+        DiagramEdit
     },
     data() {
         return {
diff --git a/src/views/newMap/display/terminals/terminalMenu.vue b/src/views/newMap/display/terminals/terminalMenu.vue
index d3801100c..0ef1ce8a7 100644
--- a/src/views/newMap/display/terminals/terminalMenu.vue
+++ b/src/views/newMap/display/terminals/terminalMenu.vue
@@ -97,6 +97,12 @@ export default {
                         roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'DRIVER'],
                         click: this.changePictureShow
                     },
+                    {
+                        name: '运行图编制',
+                        code: 'diagramEdit',
+                        roleList: ['DISPATCHER'],
+                        click: this.changePictureShow
+                    },
                     {
                         name: '派班工作站',
                         code: 'scheduleWork',
diff --git a/src/views/publish/publishMap/editSubsystem.vue b/src/views/publish/publishMap/editSubsystem.vue
index b504e67db..d30a41530 100644
--- a/src/views/publish/publishMap/editSubsystem.vue
+++ b/src/views/publish/publishMap/editSubsystem.vue
@@ -137,7 +137,10 @@ export default {
             { label: '大客流视图', value: 'largePassengerView' },
             { label: '行调台', value: 'dispatcherManage' },
             { label: '派班工作站', value: 'scheduleWork' },
-            { label: '应急调度', value: 'emergency' }
+            { label: '应急调度', value: 'emergency' },
+            { label: '运行图加载', value: 'diagramLoad' },
+            { label: '运行图预览', value: 'diagramPreview' },
+            { label: '运行图编制', value: 'diagramEdit' }
         ];
         return {
             visible: false,
@@ -246,7 +249,7 @@ export default {
                     item.value = row.paramVO.domConfig[item.key];
                 });
                 this.endTableData.forEach(item => {
-                    if (row.paramVO.itemMap[item.key]) {
+                    if (row.paramVO.itemMap && row.paramVO.itemMap[item.key]) {
                         if (row.paramVO.itemMap[item.key] === 'true') {
                             item.value = true;
                         } else if (row.paramVO.itemMap[item.key] === 'false') {
@@ -255,7 +258,7 @@ export default {
                             item.value = row.paramVO.itemMap[item.key] === null ? '' : row.paramVO.itemMap[item.key];
                         }
                     }
-                    if (item.key === 'TRAINING' && row.paramVO.itemMap[item.key]) {
+                    if (item.key === 'TRAINING' && row.paramVO.itemMap && row.paramVO.itemMap[item.key]) {
                         getTrainingDetailNew(this.ruleForm.trainingId).then(resp => { this.trainingName = resp.data.name; }).catch(e=> { console.error(e); });
                     }
                 });