哈尔滨设备编辑运行图

src/api/runplan.js

@@ -122,7 +122,13 @@ export function getStationRunning(mapId) {
         method: 'get'
     });
 }
-
+/** 获取地图原始站间运行等级 */
+export function getMapStationRun(mapId) {
+    return request({
+        url: `/api/runPlan/draft/${mapId}/stationRunLevel`,
+        method: 'get'
+    });
+}
 /** 设置站间运行时间*/
 export function setStationRunning(mapId, data) {
     return request({

src/store/modules/runplan.js

@@ -12,8 +12,9 @@ const runPlan = {
         width: 800, 			// 运行图canvas 容器 宽度
         height: 600, 			// 运行图canvas 容器 高度
         refreshCount: 0,			// 刷新页面重新加载
-        initialPlanData: {} // 运行图原始数据
+        initialPlanData: {}, // 运行图原始数据
-
+        draftSelected: {}, // 草稿运行图选中对象
+        draftStations: [] // 草稿运行图车站列表
     },
     getters: {
         stations: (state) => {
@@ -62,6 +63,9 @@ const runPlan = {
         setStations: (state, stations) => {
             state.stations = stations;
         },
+        setDraftStations: (state, stations) => {
+            state.draftStations = stations;
+        },
         setInitialPlanData: (state, data) => {
             state.initialPlanData = {};
             if (data && data.serviceNumberDataList && data.serviceNumberDataList.length) {
@@ -90,9 +94,26 @@ const runPlan = {
             }
             state.planLoadedCount++;
         },
+        setDraftPlanData: (state, data) => {
+            state.draftPlanData = data;
+            state.draftEditData = {};
+            if (data && data.serviceNumberDataList && data.serviceNumberDataList.length) {
+                const serviceList = data.serviceNumberDataList;
+                serviceList.forEach((service, i) => {
+                    const trainList = service.tripNumberDataList;
+                    state.draftEditData[service.serviceNumber] = { oldIndex: i, serviceNumber: service.serviceNumber, backup: service.backup, trainMap: {} };
+                    trainList.forEach((train, j) => {
+                        state.draftEditData[service.serviceNumber].trainMap[`${train.directionCode}${train.tripNumber}`] = { oldIndex: j, tripNumber: train.tripNumber, directionCode: train.directionCode, reentry: train.reentry, stationTimeList: train.stationTimeList };
+                    });
+                });
+            }
+        },
         setSelected: (state, selected) => {
             state.selected = selected;
         },
+        setDraftSelected: (state, draftSelected) => {
+            state.draftSelected = draftSelected;
+        },
         addserviceNumber: (state, serviceNumber) => {
             const serviceObj = state.planData[serviceNumber];
             if (serviceObj) {
@@ -107,6 +128,11 @@ const runPlan = {
             state.editData = {};
             state.selected = {};
         },
+        draftClear: (state) => {
+            state.draftPlanData = {};
+            state.draftEditData = {};
+            state.draftSelecte = {};
+        },
         refresh: (state) => {
             state.refreshCount++;
         }
@@ -128,6 +154,13 @@ const runPlan = {
                 resolve(mapModel);
             });
         },
+        /** 设置草稿stations数据 */
+        setDraftStations: ({ commit }, mapModel) => {
+            return new Promise((resolve) =>{
+                commit('setDraftStations', mapModel);
+                resolve(mapModel);
+            });
+        },
         /** 重置运行图数据更新池 */
         resetRunPlanData:({ commit }) => {
             commit('resetRunPlanData');
@@ -140,6 +173,9 @@ const runPlan = {
         setPlanData: ({ commit }, data) => {
             commit('setPlanData', data);
         },
+        setDraftPlanData: ({ commit }, data) => {
+            commit('setDraftPlanData', data);
+        },
         /** 设置初始运行图数据 */
         setInitialPlanData: ({ commit }, data) => {
             commit('setInitialPlanData', data);
@@ -152,6 +188,9 @@ const runPlan = {
         setSelected: ({ commit }, selected) => {
             commit('setSelected', selected);
         },
+        setDraftSelected: ({ commit }, draftSelected) => {
+            commit('setDraftSelected', draftSelected);
+        },
         /** 更新数据*/
         updateRunPlanData: ({ commit }, data) => {
             commit('updateRunPlanData', data);
@@ -163,6 +202,12 @@ const runPlan = {
                 resolve();
             });
         },
+        draftClear: ({ commit }) => {
+            return new Promise(resolve => {
+                commit('draftClear');
+                resolve();
+            });
+        },
         /** 刷新页面*/
         refresh: ({commit}) => {
             commit('refresh');

src/views/newMap/displayNew/demon/runPlanEdit.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import EditTool from '@/views/planMonitor/editTool/index';
+import EditTool from '@/views/planMonitor/newEditTool/index';
 export default {
     name: 'RunPlanEdit',
     components: {

src/views/newMap/displayNew/menuSchema.vue

@@ -9,13 +9,13 @@
       </el-select>
       <template v-if="!dataError">
         <el-button-group>
+          <el-button v-if="isScheduling && isDepot" size="small" type="primary" @click="runPlanEditShow">运行图编辑</el-button>
           <el-button v-if="isDemon && isDesignPlatform" size="small" :disabled="viewDisabled" type="success" @click="viewScriptRoles">{{ $t('display.schema.selectRoles') }}</el-button>
           <!-- 加载剧本 -->
           <el-button v-if="isDemon && !isDesignPlatform && !isScheduling" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">{{ $t('display.schema.loadScript') }}</el-button>
           <!-- 运行图加载 -->
           <el-button v-if="notScript && running" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('display.schema.previewRunDiagram') }}</el-button>
           <el-button v-if="notScript && !running" size="small" type="warning" @click="loadRunPlan">{{ $t('display.schema.loadRunDiagram') }}</el-button>
-          <el-button v-if="isScheduling" size="small" type="primary" @click="runPlanEditShow">运行图编辑</el-button>
           <el-button v-if="faultMode" size="small" type="danger" @click="setFault">自动故障设置</el-button>
         </el-button-group>
         <el-button v-if="!isScheduling" size="small" :type="faultMode ? '':'primary' " @click="changeOperateMode()">{{ faultMode?'切换到普通模式':'切换到故障模式' }}</el-button>
@@ -27,7 +27,7 @@
     <run-plan-view ref="runPlanView" :group="group" />
     <!-- 加载剧本列表弹窗 -->
     <add-quest ref="addQuest" @selectQuest="selectQuest" />
-    <run-plan-edit ref="runPlanEdit" />
+    <run-plan-edit v-if="isScheduling && isDepot" ref="runPlanEdit" />
   </div>
 </template>
 <script>
@@ -126,6 +126,9 @@ export default {
         },
         running() {
             return this.$store.state.training.started;
+        },
+        isDepot() {
+            return this.$route.query.type === 'DEPOT';
         }
     },
     watch: {
@@ -268,7 +271,6 @@ export default {
             this.$emit('switchStationMode', val);
         },
         runPlanEditShow() {
-        	console.log(this.$refs.runPlanEdit);
             this.$refs.runPlanEdit.doShow();
         }
     }

src/views/planMonitor/editTool/index.vue

@@ -4,6 +4,7 @@
       ref="menuBar"
       :plan-convert="PlanConvert"
       :run-plan-list="runPlanList"
+      :load-run-plan-id="loadRunPlanId"
       @doClose="doClose"
       @dispatchDialog="dispatchDialog"
       @loadingRunPlan="loadingRunPlan"
@@ -18,13 +19,13 @@
       :max-height="height"
       :max-width="width"
     />
-    <status-bar ref="statusBar" @dispatchDialog="dispatchDialog" @showTrain="showTrain" />
+    <status-bar ref="statusBar" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" @showTrain="showTrain" />
 
     <!-- <open-run-plan ref="openRunPlan" :skin-code="skinCode" @dispatchDialog="dispatchDialog" /> -->
     <!-- <create-empty-plan ref="createEmptyPlan" :plan-convert="PlanConvert" @dispatchOperate="dispatchOperate" @dispatchDialog="dispatchDialog" /> -->
     <parameter ref="parameter" />
     <off-line ref="offLine" @handleConfirm="handleConfirm" @dispatchDialog="dispatchDialog" />
-    <add-planning-train ref="addPlanningTrain" @dispatchDialog="dispatchDialog" />
+    <add-planning-train ref="addPlanningTrain" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" />
     <edit-planning-train
       ref="editPlanningTrain"
       @dispatchDialog="dispatchDialog"
@@ -40,7 +41,7 @@
     <systerm-out ref="systermOut" />
     <add-task ref="addTask" @dispatchOperate="dispatchOperate" @refresh="refresh" />
     <delete-task ref="deleteTask" @dispatchOperate="dispatchOperate" @refresh="refresh" />
-    <modifying-task ref="modifyingTask" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+    <modifying-task ref="modifyingTask" :load-run-plan-id="loadRunPlanId" @dispatchOperate="dispatchOperate" @refresh="refresh" />
 
     <edit-station-between-time ref="editStationBetweenTime" />
 

src/views/planMonitor/editTool/menuBar.vue

@@ -138,6 +138,12 @@ export default {
             default: function() {
                 return [];
             }
+        },
+        loadRunPlanId: {
+            type: String,
+            default: function() {
+                return '';
+            }
         }
     },
     data() {
@@ -468,7 +474,7 @@ export default {
         },
         // 测试运行图
         async handleTestRunPlan() {
-            const data = { planId: this.$route.query.planId };
+            const data = { planId: this.$route.query.planId || this.loadRunPlanId };
             runPlanNotify(data).then(resp => {
                 const query = {
                     prdType: '01', group: resp.data, mapId: this.$route.query.mapId, planId: this.$route.query.planId
@@ -485,7 +491,7 @@ export default {
         },
         // 添加计划
         handleAddPlanningTrain() {
-            const planId = this.$route.query.planId;
+            const planId = this.$route.query.planId || this.loadRunPlanId;
             if (planId) {
                 this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
             } else {

src/views/planMonitor/editTool/menus/addPlanningTrain.vue

@@ -28,6 +28,14 @@ import { checkServiceNumberExist } from '@/api/runplan';
 
 export default {
     name: 'AddPlanningTrain',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
     data() {
         return {
             dialogShow: false,
@@ -51,9 +59,9 @@ export default {
             this.dialogShow = false;
         },
         handleCommit() {
-			if (this.$route.query.planId) {
+            if (this.$route.query.planId || this.loadRunPlanId) {
                 if (this.serviceNumber.length == 2) {
-					checkServiceNumberExist({ planId: this.$route.query.planId, serviceNumber: this.serviceNumber }).then(resp => {
+                    checkServiceNumberExist({ planId: this.$route.query.planId || this.loadRunPlanId, serviceNumber: this.serviceNumber }).then(resp => {
                         if (resp.data) {
                             this.$emit('dispatchDialog', {
                                 name: 'offLine',

src/views/planMonitor/editTool/menus/addTask.vue

@@ -139,7 +139,7 @@
 </template>
 
 <script>
-import { getRoutingList, querySectionListByRouting, getStationRunning, addPlanTrip } from '@/api/runplan';
+import { getRoutingList, querySectionListByRouting, getStationRunning, addPlanTrip, getMapStationRun } from '@/api/runplan';
 import { formatTime, formatName } from '@/utils/runPlan';
 import { getUID } from '@/jmap/utils/Uid';
 
@@ -181,6 +181,9 @@ export default {
     computed: {
         title() {
             return this.$t('planMonitor.addTask');
+        },
+        isNewMap() {
+            return this.$route.path.includes('displayNew');
         }
     },
     watch: {
@@ -212,7 +215,7 @@ export default {
             }
 
             const mapId = this.$route.query.mapId;
-            if (mapId) {
+            if (mapId && !this.isNewMap) {
                 getStationRunning(mapId).then(resp => { // 查询是否有站间运行时间
                     const list = resp.data;
                     list.forEach(elem => {
@@ -230,6 +233,26 @@ export default {
                             }
                         });
 
+                    }
+                });
+            } else if (mapId && this.isNewMap) {
+                getMapStationRun(mapId).then(resp =>{
+                    const list = resp.data;
+                    list.forEach(elem => {
+                        this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
+                    });
+                    if (list && list.length) {
+                        list.forEach(elem => {
+                            if (!elem.runPlanLevelVO) {
+                                this.$alert(`${this.$t('planMonitor.tipOperationTime')}`, {
+                                    confirmButtonText: this.$t('global.confirm'),
+                                    callback: action => {
+                                        this.doClose();
+                                    }
+                                });
+                            }
+                        });
+
                     }
                 });
             }
@@ -254,9 +277,12 @@ export default {
             let runTime = 0;
             if (index < list.length - 1) {
                 const stopStationObj = this.stopStationMap[[list[index].sectionCode, list[index + 1].sectionCode].toString()];
+                console.log(stopStationObj, stopStationObj['l3']);
                 if (stopStationObj) {
                     if (stopStationObj.runPlanLevelVO) {
                         runTime = parseInt(stopStationObj.runPlanLevelVO[runLevel]);
+                    } else if (stopStationObj['l3']) {
+                        runTime = parseInt(stopStationObj['l3']);
                     } else {
                         this.$messageBox(this.$t('planMonitor.addTaskHint1') + stopStationObj.startSectionCode + this.$t('planMonitor.addTaskHint2') + stopStationObj.endSectionCode + this.$t('planMonitor.addTaskHint3'));
                     }

src/views/planMonitor/editTool/menus/modifyingStationIntervalTime.vue

@@ -98,7 +98,7 @@
 </template>
 <script>
 import { formatName } from '@/utils/runPlan';
-import { getStationRunning, setStationRunning } from '@/api/runplan';
+import { getStationRunning, setStationRunning, getMapStationRun } from '@/api/runplan';
 // import UpdateStationIntervalTime from './updateStationIntervalTime';
 
 export default {
@@ -125,6 +125,9 @@ export default {
     computed: {
         title() {
             return this.$t('planMonitor.modifying.modifyRunLevel');
+        },
+        isNewMap() {
+            return this.$route.path.includes('displayNew');
         }
     },
     mounted() {
@@ -141,7 +144,7 @@ export default {
             });
 
             this.stationIntervalData = [];
-            if (this.$route.query.lineCode) {
+            if (this.$route.query.lineCode || !this.isNewMap) {
                 getStationRunning(this.$route.query.mapId).then(resp => {
                     const list = resp.data;
                     list.forEach(elem => {
@@ -156,6 +159,21 @@ export default {
                     });
                     this.stationIntervalData = list;
                 });
+            } else if (this.$route.query.lineCode || this.isNewMap) {
+                getMapStationRun(this.$route.query.mapId).then(resp =>{
+                    const list = resp.data;
+                    list.forEach(elem => {
+                        elem.isEditStatus = false;
+                        if (!elem.runPlanLevelVO || elem.runPlanLevelVO.length <= 0) {
+                            elem.runPlanLevelVO = { stationRunningId: elem.id };
+                            Object.keys(this.runSpeedLevels).forEach(key => {
+                                elem.runPlanLevelVO[key] = parseInt((elem.distance / 100) / (this.runSpeedLevels[key] / 3.6));
+                                elem.isEditStatus = true;
+                            });
+                        }
+                    });
+                    this.stationIntervalData = list;
+                });
             }
         },
         doShow(params) {

src/views/planMonitor/editTool/menus/modifyingTask.vue

@@ -221,13 +221,21 @@
   </el-dialog>
 </template>
 <script>
-import { getRoutingBySDTNumber, querySectionListByRouting, getStationRunning, updatePlanTrip } from '@/api/runplan';
+import { getRoutingBySDTNumber, querySectionListByRouting, getStationRunning, updatePlanTrip, getMapStationRun } from '@/api/runplan';
 import { formatTime, formatName } from '@/utils/runPlan';
 
 export default {
     name: 'ModifyingTask',
     components: {
     },
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
     data() {
         return {
             dialogShow: false,
@@ -266,6 +274,9 @@ export default {
     computed: {
         title() {
             return this.$t('planMonitor.modifying.modifyTask');
+        },
+        isNewMap() {
+            return this.$route.path.includes('displayNew');
         }
     },
     watch: {
@@ -298,6 +309,8 @@ export default {
                 if (stopStationObj) {
                     if (stopStationObj.runPlanLevelVO) {
                         runTime = parseInt(stopStationObj.runPlanLevelVO[runLevel]);
+                    } else if (stopStationObj['l3']) {
+                        runTime = parseInt(stopStationObj['l3']);
                     } else {
                         // this.$messageBox(`${this.$t('planMonitor.modifying.setMessageTip1')} ${stopStationObj.startSectionCode} ${this.$t('planMonitor.modifying.setMessageTip2')} ${stopStationObj.endSectionCode} ${this.$t('planMonitor.modifying.setMessageTip3')}`);
                         this.$alert(`${this.$t('planMonitor.tipOperationTime')}`, {
@@ -315,7 +328,7 @@ export default {
         computedDetailList() {
             this.editModel.arriveConfigList = [];
             if (this.editModel.routingCode) {
-                querySectionListByRouting({ planId: this.$route.query.planId, routingCode: this.editModel.routingCode }).then(rest => {
+                querySectionListByRouting({ planId: this.$route.query.planId || this.loadRunPlanId, routingCode: this.editModel.routingCode }).then(rest => {
                     const list = rest.data;
                     const waitTime = this.editModel.defaultStopTime || 30; // 默认三十秒
                     let tempTime = this.computedTimeByString(this.editModel.startTime) / 1000 - 30;
@@ -362,17 +375,23 @@ export default {
                 this.editModel.startTime = formatTime(trainInfo.stationTimeList[0].secondTime + this.PlanConvert.TranslationTime);
             }
 
-            if (mapId) {
+            if (mapId && !this.isNewMap) {
                 getStationRunning(mapId).then(resp => {
                     const list = resp.data;
                     list.forEach(elem => {
                         this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
                     });
                 });
+            } else if (mapId && this.isNewMap) {
+                getMapStationRun(mapId).then(resp => {
+                    const list = resp.data;
+                    list.forEach(elem => {
+                        this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
+                    });
+                });
             }
-
             const model = {
-                planId: this.$route.query.planId,
+                planId: this.$route.query.planId || this.loadRunPlanId,
                 SDTNumber: `${this.editModel.serviceNumber}${this.editModel.tripNumber}`
             };
 
@@ -394,7 +413,7 @@ export default {
         },
         buildModel() {
             return {
-                planId: this.$route.query.planId,
+                planId: this.$route.query.planId || this.loadRunPlanId,
                 routingCode: this.editModel.routingCode,
                 tripNumber: this.editModel.tripNumber,
                 startTime: this.editModel.startTime,

src/views/planMonitor/editTool/statusBar.vue

@@ -25,6 +25,14 @@ import { UrlConfig } from '@/scripts/ConstDic';
 
 export default {
     name: 'PlanStatusBar',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
     data() {
         return {
             isNotUser: true
@@ -46,7 +54,7 @@ export default {
         },
         // 添加计划
         handleAddPlanningTrain() {
-            const planId = this.$route.query.planId;
+            const planId = this.$route.query.planId || this.loadRunPlanId;
             if (planId) {
                 this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
             } else {

src/views/planMonitor/newEditTool/index.vue

@@ -0,0 +1,546 @@
+<template>
+  <div class="plan-tool" style="width: 100%; height: 100%;">
+    <menu-bar
+      ref="menuBar"
+      :plan-convert="PlanConvert"
+      :run-plan-list="runPlanList"
+      :load-run-plan-id="loadRunPlanId"
+      @doClose="doClose"
+      @dispatchDialog="dispatchDialog"
+      @loadingRunPlan="loadingRunPlan"
+      @checkIsLoadRunPlan="checkIsLoadRunPlan"
+      @modifyRunPlanName="modifyRunPlanName"
+    />
+    <schedule
+      ref="schedule"
+      :plan-convert="PlanConvert"
+      :load-run-plan-id="loadRunPlanId"
+      :load-run-plan-name="loadRunPlanName"
+      :max-height="height"
+      :max-width="width"
+    />
+    <status-bar ref="statusBar" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" @showTrain="showTrain" />
+    <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"
+    />
+    <edit-smooth-run-time ref="editSmoothRunTime" @dispatchDialog="dispatchDialog" />
+    <add-smooth-run-time ref="addSmoothRunTime" @dispatchDialog="dispatchDialog" />
+    <duplicate-train ref="duplicateTrain" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+    <modifying-routing ref="modifyingRouting" @dispatchDialog="dispatchDialog" />
+    <modifying-begin-time ref="modifyingBeginTime" />
+
+    <systerm-out ref="systermOut" />
+    <add-task ref="addTask" :load-run-plan-id="loadRunPlanId" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+    <delete-task ref="deleteTask" :load-run-plan-id="loadRunPlanId" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+    <modifying-task ref="modifyingTask" :load-run-plan-id="loadRunPlanId" @dispatchOperate="dispatchOperate" @refresh="refresh" />
+
+    <edit-station-between-time ref="editStationBetweenTime" />
+
+    <modifying-station-interval-time ref="modifyingStationIntervalTime" />
+    <populating-generic-data ref="populatingGenericData" :load-run-plan-id="loadRunPlanId" />
+    <create-empty-plan ref="createEmptyPlan" @refresh="refreshRunPlanList" />
+    <edit-plan-name ref="editPlan" @renewal="refreshRunPlanName" />
+  </div>
+</template>
+
+<script>
+import MenuBar from './menuBar';
+import StatusBar from './statusBar';
+import Schedule from './schedule';
+import Parameter from './menus/parameter/index';
+import OffLine from './menus/offLine';
+import AddPlanningTrain from './menus/addPlanningTrain';
+import EditPlanningTrain from './menus/editPlanningTrain';
+import EditPlanName from './menus/editPlanName';
+import DuplicateTrain from './menus/duplicateTrain';
+import SystermOut from './menus/systermOut';
+import AddTask from './menus/addTask';
+import DeleteTask from './menus/deleteTask';
+import ModifyingTask from './menus/modifyingTask';
+import ModifyingRouting from './menus/modifyingRouting';
+import ModifyingBeginTime from './menus/modifyingBeginTime';
+import EditStationBetweenTime from './menus/editStationBetweenTime';
+import AddSmoothRunTime from './menus/addSmoothRunTime';
+import EditSmoothRunTime from './menus/editSmoothRunTime';
+import ModifyingStationIntervalTime from './menus/modifyingStationIntervalTime';
+import PopulatingGenericData from './menus/populatingGenericData';
+import CreateEmptyPlan from './menus/createEmptyPlan';
+import { deletePlanService } from '@/api/runplan';
+import { checkLoginLine } from '@/api/login';
+import { getRpListByMapId } from '@/api/runplan';
+
+export default {
+    name: 'Menus',
+    components: {
+        MenuBar,
+        StatusBar,
+        Schedule,
+        PopulatingGenericData,
+        Parameter,
+        OffLine,
+        AddPlanningTrain,
+        EditPlanningTrain,
+        DuplicateTrain,
+        SystermOut,
+        AddTask,
+        DeleteTask,
+        ModifyingTask,
+        ModifyingRouting,
+        ModifyingBeginTime,
+        EditStationBetweenTime,
+        AddSmoothRunTime,
+        EditSmoothRunTime,
+        ModifyingStationIntervalTime,
+        CreateEmptyPlan,
+        EditPlanName
+    },
+    data() {
+        return {
+            PlanConvert: {},
+            timeDemon: null,
+            runPlanList: [],
+            loadRunPlanId: '',
+            loadRunPlanName: ''
+        };
+    },
+    computed: {
+        lineCode() {
+            return this.$route.query.lineCode;
+        },
+        width() {
+            return this.$store.state.app.width;
+        },
+        height() {
+            return this.$store.state.app.height;
+        }
+    },
+    created() {
+        this.PlanConvert = this.$theme.loadPlanConvert(this.lineCode);
+    },
+    mounted() {
+        this.timeDemon = setInterval(() => {
+            checkLoginLine();
+        }, 5000 * 60);
+        if (this.$route.query.mapId) {
+            this.refreshRunPlanList(true);
+        }
+    },
+    beforeDestroy() {
+        if (this.timeDemon) {
+            clearTimeout(this.timeDemon);
+        }
+    },
+    methods: {
+        dispatchDialog(dialogObj) {
+            this.$nextTick(() => {
+                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);
+                }
+            });
+        },
+        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/setDraftSelected', {});
+                    this.$store.dispatch('runPlan/refresh');
+                }).catch(() => {
+                    this.$messageBox(this.$t('tip.deletePlanFailed'));
+                });
+            }
+        },
+        showTrain() {
+            if (this.$refs.schedule) {
+                this.$refs.schedule.displayTrain();
+            }
+        },
+        refresh() {
+            this.$store.dispatch('runPlan/refresh');
+        },
+        refreshRunPlanList(firstLoad) {
+            getRpListByMapId(this.$route.query.mapId).then(resp => {
+                this.runPlanList = resp.data || [];
+                if (firstLoad && this.runPlanList.length) {
+                    this.loadRunPlanId = this.runPlanList[0].id;
+                    this.loadRunPlanName = this.runPlanList[0].name;
+                }
+            }).catch(() => {
+                this.$message.error('获取草稿运行图列表失败');
+            });
+        },
+        doClose() {
+            this.$emit('doClose');
+        },
+        loadingRunPlan(param) {
+            this.loadRunPlanId = param.planId;
+            this.loadRunPlanName = param.planName;
+        },
+        checkIsLoadRunPlan(planId) {
+            this.refreshRunPlanList(planId === this.loadRunPlanId);
+        },
+        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);
+        }
+    }
+};
+</script>
+
+<style>
+    .plan-tool {
+        position: absolute;
+    }
+
+    .plan-tool .pop-menu {
+        background: #F0F0F0;
+    }
+
+    .plan-tool .pop-menu span {
+        color: #000;
+    }
+
+    .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;
+    }
+
+    /* .planEdit__tool .el-dialog {
+        overflow: hidden !important;
+        background: rgba(202, 221, 253, 0.88);;
+        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
+        border: 2px solid #727375;
+        border-radius: 4px;
+        color: #000;
+        font-size: 14px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__header {
+        height: 30px;
+        padding: 5px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__footer {
+        background: #ECE9D8;
+        opacity: 1;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__body {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        margin: 0px 3px 3px 3px;
+        border: 2px solid rgba(120, 121, 123, 0.5);
+        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
+        color: #000;
+        background: #ECE9D8;
+        opacity: 1;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__title {
+        font-size: 16px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn {
+        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;
+        top: 0px;
+        right: 3px;
+        line-height: 26px;
+        width: 26px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn .el-icon-close:before {
+        font-size: 16px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn .el-dialog__close {
+        color: #fff;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--top {
+        border: 2px outset #FEFEFD;
+        border-radius: 4px;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs__item {
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        color: #000 !important;
+        border-right: 2px outset #fff;
+        padding-left: 10px !important;
+        padding-right: 10px !important;
+    }
+
+    .planEdit__tool .el-dialog .el-tab-pane {
+        margin: 10px !important;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+        border-bottom: none
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--card>.el-tabs__header .el-tabs__item:not(.is-active) {
+        border-bottom: 2px inset #fff
+    }
+
+    .planEdit__tool .el-dialog .el-form {
+        background: #ECE9D8 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-card {
+        background: #ECE9D8 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-button {
+        height: 32px;
+        line-height: 32px;
+        padding: 0px;
+        width: 80px;
+        border: 2px outset #E2E2E2;
+        border-radius: 0px !important;
+        color: #000;
+        background: #ECE9D8;
+    }
+
+    .planEdit__tool .el-dialog .expand {
+        width: 120px;
+    }
+
+    .planEdit__tool .el-dialog .el-button:focus span {
+        border: 1px dashed gray;
+    }
+
+    .planEdit__tool .el-dialog .el-button:active {
+        border: 2px inset #E2E2E2;
+    }
+
+    .planEdit__tool .el-dialog .el-button:disabled {
+        border: 2px inset #E2E2E2;
+    }
+
+    .planEdit__tool .el-dialog .el-button:disabled span {
+        border: 0px;
+    }
+
+    .planEdit__tool .el-dialog .button-group {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .el-input {
+        border: 2px inset #E9E9E9;
+    }
+
+    .planEdit__tool .el-dialog .el-input .el-input__inner {
+        color: #000;
+        background: #fff !important;
+        border: 0px;
+        border-radius: 0px !important;
+        box-sizing: border-box;
+    }
+
+    .planEdit__tool .el-dialog .el-input.is-disabled .el-input__inner {
+        background: #F0F0F0 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea {
+        border: 2px inset #E9E9E9;
+        border-radius: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea .el-textarea__inner {
+        color: #000;
+        background: #fff !important;
+        border: 0px;
+        border-radius: 0px !important;
+        box-sizing: border-box;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea.is-disabled .el-textarea__inner {
+        background: #F0F0F0 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table {
+        border: 2px inset #E9E9E9;
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table .cell {
+        line-height: unset !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table th.is-leaf {
+        background: #ECE9D8 !important;
+        border-right: 1px solid #BDBDBD !important;
+        border-bottom: 1px solid #BDBDBD !important;
+        color: #000 !important;
+        height: 20px !important;
+        padding: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-table tr td {
+        height: 20px !important;
+        padding: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-table .el-table__empty-text {
+        top: 15px !important;
+    }
+
+    .planEdit__tool .el-dialog .current-row>td {
+        background: #316AC5 !important;
+        color: #fff !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__inner {
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__label {
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
+        background: #E6E6E6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
+        color: #C5C9CC !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
+        background: #fff !important;
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        position: absolute;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+        content: "";
+        border: 1px solid #000;
+        border-left: 0;
+        border-top: 0;
+        height: 7px;
+        left: 4px;
+        top: 1px;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__inner {
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__label {
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__input.is-checked .el-radio__inner {
+        background: #fff !important;
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__input.is-checked .el-radio__inner::after {
+        width: 4px;
+        height: 4px;
+        border-radius: 100%;
+        background-color: #000 !important;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+    }
+
+    .planEdit__tool .el-dialog .el-radio.is-disabled .el-radio__inner {
+        background: #E6E6E6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio.is-disabled .el-radio__label {
+        color: #C5C9CC !important;
+    }
+
+    .planEdit__tool .el-dialog .base-label {
+        background: rgba(0, 0, 0, x);
+        position: relative;
+        left: -15px;
+        top: -18px;
+    }
+
+    .planEdit__tool .el-dialog .el-form-item label {
+        font-weight: normal !important;
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .context {
+        height: 100px;
+        border: 2px inset #E2E2E2;
+        overflow-y: scroll;
+    }
+
+    .planEdit__tool .el-dialog .table {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .notice {
+        margin-left: 62px;
+        line-height: 30px;
+    }
+
+    .planEdit__tool .el-dialog .button-group {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .el-tree__empty-block {
+        background: #E9E9E9 !important;
+        color: #000 !important;
+    } */
+</style>

src/views/planMonitor/newEditTool/menuBar.vue

@@ -0,0 +1,711 @@
+<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>
+                      </span>
+                    </div>
+                    <ul class="menu-ul" :class="{'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?'关闭':$t('global.back') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { planEffectiveCheck } from '@/api/runplan';
+import { EventBus } from '@/scripts/event-bus';
+import { publishRunPlan } from '@/api/designPlatform';
+import { deleteRunPlan } from '@/api/runplan';
+
+export default {
+    name: 'PlanMenuBar',
+    props: {
+        planConvert: {
+            type: Object,
+            default: function() {
+                return { };
+            }
+        },
+        runPlanList: {
+            type: Array,
+            default: function() {
+                return [];
+            }
+        },
+        loadRunPlanId: {
+            type: String,
+            default: function() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            isNotUser: true,
+            classA: -1,
+            classB: -1,
+            tempClassA: -1,
+            tempClassB: -1,
+            menus: [],
+            loading: null,
+            menuBase: [
+                {
+                    title: this.$t('planMonitor.file'),
+                    children: [
+                        {
+                            title: '查看站间运行等级',
+                            click: this.handleModifyingStationIntervalTime
+                        },
+                        {
+                            title: '填充通用数据',
+                            click: this.populatingGenericData
+                        },
+                        {
+                            title: '创建运行图',
+                            click: this.newRunPlan
+                        }
+                    ]
+                },
+                {
+                    title: this.$t('planMonitor.view'),
+                    children: [
+                    ]
+                },
+                {
+                    title: this.$t('planMonitor.tool'),
+                    children: [
+                        {
+                            title: this.$t('planMonitor.validityCheck'),
+                            click: this.handlePlanEffectiveCheck
+                        }
+                    ]
+                },
+                {
+                    title: this.$t('planMonitor.modify'),
+                    children: [
+                        {
+                            title: this.$t('planMonitor.addPlan'),
+                            click: this.handleAddPlanningTrain
+                        },
+                        {
+                            title: this.$t('planMonitor.deletePlan'),
+                            click: this.handleDeletePlanningTrain
+                        },
+                        {
+                            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.modifyRunPlanName
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    computed: {
+        ...mapGetters('training', [
+            'mode'
+        ]),
+        ...mapGetters('map', [
+            'stationList'
+        ]),
+        dispaly() {
+            return this.$route.path.includes('display');
+        }
+    },
+    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;
+            }
+        },
+        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 {
+                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 = [];
+            const menuDelete = [];
+            const menuPublish = [];
+            this.runPlanList.forEach(item => {
+                menuLoading.push({title: item.name, planId:item.id, planName: item.name, click: this.loadingRunPlan});
+                menuDelete.push({title: item.name, planId:item.id, planName: item.name, click: this.deleteRunPlanOperate});
+                menuPublish.push({title: item.name, planId:item.id, planName: item.name, click: this.publishRunPlan});
+            });
+            if (this.runPlanList.length) {
+                this.menus = this.menuConvert([...this.menuBase, {title: '加载', children: menuLoading}, {title: '删除', children: menuDelete}, {title: '发布', children:menuPublish}]);
+            } else {
+                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();
+            // launchFullscreen();
+            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)'
+            });
+        },
+        // 修改站间运行时间
+        handleModifyingStationIntervalTime() {
+            this.$emit('dispatchDialog', { name: 'modifyingStationIntervalTime', params: {} });
+        },
+        // 填充计划运行图
+        populatingGenericData() {
+            this.$emit('dispatchDialog', { name: 'populatingGenericData', params: {} });
+        },
+        newRunPlan() {
+            this.$emit('dispatchDialog', { name: 'createEmptyPlan', params: {}});
+        },
+        // 自动生成
+        handleAutoGenerate() {
+            this.$emit('dispatchDialog', { name: 'editSmoothRunTime', params: {} });
+        },
+        // 校验运行图
+        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() {
+            if (this.loadRunPlanId) {
+                this.$emit('dispatchDialog', { name: 'addPlanningTrain', 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'));
+            }
+        },
+        // 修改计划
+        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'));
+            }
+        },
+        // 复制计划
+        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 });
+            } 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 });
+            } 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 });
+            } 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(param) {
+            // 删除运行图
+            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(param.planId).then(Response => {
+                    this.$message.success(this.$t('planMonitor.openRunPlan.deleteSuccess'));
+                    this.$emit('checkIsLoadRunPlan', param.planId);
+                }).catch(() => {
+                    this.$messageBox(this.$t('tip.deleteOperationGraphFailed'));
+                });
+            }).catch(() => { });
+        },
+        publishRunPlan(param) {
+            this.$confirm(this.$t('tip.publishRunPlanTips'), this.$t('tip.hint'), {
+                confirmButtonText: this.$t('tip.confirm'),
+                cancelButtonText: this.$t('tip.cancel'),
+                type: 'warning'
+            }).then(() => {
+                publishRunPlan(param.planId, {runPlanName: param.planName}).then(resp => {
+                    this.$message.success(this.$t('tip.publishRunPlanSuccess'));
+                }).catch(() => {
+                    this.$messageBox(this.$t('tip.publishRunPlanFail'));
+                });
+            });
+        }
+    }
+};
+</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;
+    }
+
+    .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;
+    }
+
+    .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>

src/views/planMonitor/newEditTool/menuTool.vue

@@ -0,0 +1,170 @@
+<template>
+  <div id="PlanMenuTool">
+    <div class="nav">
+      <div v-for="(item,index) in tools" :key="index" class="tool">
+        <img :src="item.src" :alt="item.title">
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { prefixIntrger } from '@/utils/date';
+import logo_ from '@/assets/logo_.png';
+
+export default {
+    name: 'PlanMenuTool',
+    data() {
+        return {
+            tools: [
+                {
+                    title: this.$t('planMonitor.server1'),
+                    operate: '',
+                    src: logo_,
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.server2'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.frontMachine1'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.frontMachine2'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.mainDispatcher'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.dispatcher1'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.dispatcher2'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.dispatcher3'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.bigScreen'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.maintenanceWorkstation'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.runGraphShowManualStation'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.jumpStop'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.detainTrain'),
+                    operate: '',
+                    src: '',
+                    click: this.undeveloped
+                },
+                {
+                    title: this.$t('planMonitor.trainAlarm'),
+                    operate: '',
+                    src: logo_,
+                    click: this.undeveloped
+                }
+            ]
+        };
+    },
+    computed: {
+        isShowSystemTime() {
+            return this.$route.params.mode == 'demon' || this.$route.params.mode === 'dp' || !this.$route.params.mode;
+        }
+    },
+    watch: {
+        '$store.state.training.initTime': function (initTime) {
+            const date = new Date(initTime);
+            this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
+        }
+    },
+    mounted() {
+        this.initTools();
+    },
+    methods: {
+        initTools() {
+            this.tools = [];
+        }
+    }
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+    @import "src/styles/mixin.scss";
+    $top: 48px;
+    $width: 25px;
+    $height: 25px;
+
+    #PlanMenuTool {
+        z-index: 5;
+        position: absolute;
+        width: 100%;
+        top: $top;
+    }
+
+    .nav {
+        display: block;
+        color: #0000;
+        background: #EBEADB;
+        border: 1px solid #B6BCCC !important;
+        border-bottom: 2px solid #B6BCCC !important;
+        list-style: none;
+        height: $height;
+        line-height: $height;
+    }
+
+    .tool {
+        padding-left: 10px;
+        display: flex;
+        justify-content: center;
+        cursor: pointer;
+        position: relative;
+        float: left;
+        margin: 1px;
+        width: $width;
+
+        img {
+            display: block;
+            text-align: center;
+            padding-top: 2px;
+            height: $height - 5;
+            width: $width - 5;
+        }
+    }
+</style>

src/views/planMonitor/newEditTool/menus/addPlanningTrain.vue

@@ -0,0 +1,111 @@
+<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-row>
+      <el-col :span="6" :offset="2" style="height: 30px; line-height: 30px;">{{ $t('planMonitor.serviceNumber2')+$t('global.colon') }}</el-col>
+      <el-col :span="10" :offset="1">
+        <el-input v-model="serviceNumber" size="mini" />
+      </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 { checkServiceNumberExist } from '@/api/runplan';
+
+export default {
+    name: 'AddPlanningTrain',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            serviceNumber: ''
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.addPlanTrain');
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow() {
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        handleCommit() {
+            if (this.loadRunPlanId) {
+                checkServiceNumberExist({ planId: this.loadRunPlanId, serviceNumber: this.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();
+                    }
+                });
+            } else {
+                this.$messageBox(this.$t('tip.chooseToOpenTheRunGraph'));
+            }
+        },
+        handleConfirm() {
+            this.doClose();
+            this.$store.dispatch('runPlan/addserviceNumber', this.serviceNumber);
+            this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber: this.serviceNumber } });
+        }
+    }
+};
+</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>

src/views/planMonitor/newEditTool/menus/addSmoothRunTime.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool add-smooth-run-time"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="500px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <div style="margin: 10px;">
+      <el-row>
+        <el-col :span="9" :offset="1">
+          <span>{{$t('global.startTime')+$t('global.colon')}}</span>
+        </el-col>
+        <el-col :span="14">
+          <el-time-picker v-model="model.startTime" />
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="9" :offset="1">
+          <span>{{$t('global.endTime')+$t('global.colon')}}</span>
+        </el-col>
+        <el-col :span="14">
+          <el-time-picker v-model="model.endTime" />
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="9" :offset="1">
+          <span>{{$t('planMonitor.trainRunningTimeInterval')+$t('global.colon')}}</span>
+        </el-col>
+        <el-col :span="14">
+          <el-input v-model="model.runInterval" :placeholder="this.$t('rules.pleaseEnterContent')" />
+          <span>{{$t('global.colon')}}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="9" :offset="1">
+          <span>{{$t('planMonitor.sizeOfTheLoopTrainProportion')+$t('global.colon')}}</span>
+        </el-col>
+        <el-col :span="14">
+          <el-select v-model="model.scale" :placeholder="this.$t('global.choose')">
+            <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="9" :offset="1">
+          <span>{{$t('planMonitor.applicationRouteSelection')+$t('global.colon')}}</span>
+        </el-col>
+        <el-col :span="14">
+          <el-radio-group v-model="model.direction">
+            <el-radio :label="0">{{$t('planMonitor.bothway')}}</el-radio>
+            <el-radio :label="1">{{$t('planMonitor.up')}}</el-radio>
+            <el-radio :label="2">{{$t('planMonitor.down')}}</el-radio>
+          </el-radio-group>
+        </el-col>
+      </el-row>
+      <el-row style="margin-top: 20px">
+        <el-table :data="model.smoothList" border :height="240">
+          <el-table-column prop="startTime" :label="this.$t('global.startTime')" />
+          <el-table-column prop="stopTime" :label="this.$t('global.endTime')"/>
+          <el-table-column prop="runInterval" :label="this.$t('planMonitor.runningInterval')" />
+          <el-table-column prop="scale" :label="this.$t('planMonitor.distributionRatio')" />
+        </el-table>
+      </el-row>
+    </div>
+    <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: 'AddSmoothRunTime',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			model: {
+				useSame: false,
+				smoothList: []
+			},
+			scaleList: []
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.addASmoothRunningTime');
+		}
+	},
+	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";
+
+    /deep/ {
+        .el-row {
+            margin-bottom: 10px !important;
+        }
+
+        .el-icon-time:before {
+            top: -10px;
+            position: relative;
+        }
+
+        .el-button {
+            padding: 0px !important;
+            margin: 0px 30px !important;
+        }
+
+        .el-dialog .el-input__inner {
+            height: 20px !important;
+            line-height: 20px !important;
+        }
+
+        .el-dialog .el-input {
+            width: 80% !important;
+        }
+    }
+</style>

src/views/planMonitor/newEditTool/menus/addTask.vue

@@ -0,0 +1,342 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool add-task"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="880px"
+    :before-close="doClose"
+    :z-index="2000"
+    top="50px"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row>
+      <el-col :span="3" style="height: 28px;line-height: 28px;">
+        <el-radio v-model="addModel.addToFront" :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')">
+          <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" />
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 5px;height: 28px;line-height: 28px;">
+      <el-col :span="3">
+        <el-radio v-model="addModel.addToFront" :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-select v-model="addModel.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: 20px;height: 28px;line-height: 28px;">
+        <span>{{ $t('planMonitor.defaultRunLevel') }}</span>
+      </el-col>
+      <el-col :span="5">
+        <el-select v-model="addModel.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
+        :data="addModel.routingList"
+        border
+        highlight-current-row
+        :height="280"
+        @row-click="handleClick"
+      >
+        <el-table-column prop="startStationCode" :label="this.$t('planMonitor.startingStation')">
+          <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')">
+          <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="remarks" :label="this.$t('planMonitor.description')" width="315" />
+      </el-table>
+    </el-row>
+    <el-row style=" margin-bottom: 5px;margin-top: 10px;">
+      {{ $t('global.details')+$t('global.colon') }}
+    </el-row>
+    <el-row>
+      <el-table :data="addModel.arriveConfigList" border :height="180">
+        <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 prop="arriveTime" :label="this.$t('planMonitor.arriveTime')" />
+        <el-table-column prop="stopTime" :label="this.$t('planMonitor.stopTime')">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.stopTime" placeholder="请输入时间" size="mini" @change="changeStopTime(scope.$index, scope.row.stopTime)" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="departureTime" :label="this.$t('planMonitor.departureTime')" />
+        <el-table-column prop="speedLevel" :label="this.$t('planMonitor.runLevel')" />
+      </el-table>
+    </el-row>
+    <el-row>
+      <el-col :offset="16">
+        <el-checkbox v-model="showDefault">{{ $t('planMonitor.showDefaultStopTimeAndRunLevel') }}</el-checkbox>
+      </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 { getRoutingList, querySectionListByRouting, addPlanTrip, getMapStationRun } from '@/api/runplan';
+import { formatTime, formatName } from '@/utils/runPlan';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+    name: 'AddTask',
+    components: {
+    },
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            isPlan: false,
+            showDefault: true,
+            stopStationMap: {},
+            params: {},
+            addModel: {
+                taskIndex: '',
+                addToFront: false,
+                routingCode: '',
+                endStationCode: '',
+                startStationCode: '',
+                endSectionCode: '',
+                startSectionCode: '',
+                startTime: '00:00:00',
+                endTime: '',
+                planId: '',
+                tripNumber: '',
+                serviceNumber: '',
+                defaultStopTime: '30',
+                defaultSpeedLevel: 'l3',
+                routingList: [],
+                arriveConfigList: []
+            },
+            tripNumberList: [{ value: '', label: this.$t('planMonitor.automatic') }],
+            defaultStopTimeList: [{ value: '30', label: this.$t('planMonitor.default') }, { value: '0', label: '0' }],
+            defaultSpeedLevelList: [{ value: 'l3', label: this.$t('planMonitor.default') }]
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.addTask');
+        },
+        isNewMap() {
+            return this.$route.path.includes('displayNew');
+        }
+    },
+    watch: {
+        'addModel.routingCode': function () {
+            this.computedDetailList();
+        },
+        'addModel.startTime': function () {
+            this.computedDetailList();
+        },
+        'addModel.defaultStopTime': function () {
+            this.computedDetailList();
+        },
+        'addModel.defaultSpeedLevel': function () {
+            this.computedDetailList();
+        }
+    },
+    methods: {
+        loadInitData(params) {
+            this.isPlan = params.isPlan;
+            this.addModel.taskIndex = getUID('task_');
+            this.addModel.serviceNumber = params.serviceNumber;
+            this.addModel.planId = this.loadRunPlanId;
+
+            if (this.loadRunPlanId) {
+                getRoutingList(this.loadRunPlanId).then(resp => {
+                    this.addModel.routingList = resp.data;
+                });
+            }
+
+            const mapId = this.$route.query.mapId;
+            getMapStationRun(mapId).then(resp =>{
+                const list = resp.data;
+                list.forEach(elem => {
+                    this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
+                });
+            });
+        },
+        doShow(params) {
+            this.loadInitData(params);
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        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 < list.length - 1) {
+                const stopStationObj = this.stopStationMap[[list[index].sectionCode, list[index + 1].sectionCode].toString()];
+                if (stopStationObj && stopStationObj[runLevel]) {
+                    runTime = parseInt(stopStationObj[runLevel]);
+                }
+            }
+
+            return runTime;
+        },
+        changeStopTime(indexs, time) {
+            let tempTime = this.computedTimeByString(this.addModel.startTime) / 1000 - 30;
+            const runLevel = this.addModel.defaultSpeedLevel || 'l3'; // 默认等级三
+            this.addModel.arriveConfigList.forEach((elem, index) => {
+                if (indexs == index) {
+                    elem.stopTime = time ? Number(time) : 0;
+                }
+                elem.arriveTime = index ? formatTime(tempTime) : '';
+                elem.departureTime = index == this.addModel.arriveConfigList.length - 1 ? '' : formatTime(tempTime + elem.stopTime);
+                elem.speedLevel = this.addModel.defaultSpeedLevel == 'level3' ? this.$t('planMonitor.default') : '';
+                tempTime = tempTime + elem.stopTime + this.compuntedRunTime(this.addModel.arriveConfigList, index, runLevel);
+            });
+            this.addModel.endTime = formatTime(tempTime - this.addModel.arriveConfigList[this.addModel.arriveConfigList.length - 1].stopTime);
+        },
+        computedDetailList() {
+            if (this.addModel.routingCode) {
+                querySectionListByRouting({ planId: this.loadRunPlanId, routingCode: this.addModel.routingCode }).then(resp => {
+                    const list = resp.data;
+                    const waitTime = Number(this.addModel.defaultStopTime) || 0; // 默认三十秒
+                    let tempTime = this.computedTimeByString(this.addModel.startTime) / 1000 - 30;
+                    const runLevel = this.addModel.defaultSpeedLevel || 'l3'; // 默认等级三
+                    list.forEach((elem, index) => {
+                        elem.arriveTime = index ? formatTime(tempTime) : '';
+                        elem.departureTime = index == list.length - 1 ? '' : formatTime(tempTime + waitTime);
+                        elem.speedLevel = this.addModel.defaultSpeedLevel == 'l3' ? `${this.$t('planMonitor.default')}(等级三)` : '';
+                        elem.stopTime = this.addModel.defaultStopTime != '0' ? 30 : 0;
+                        tempTime = tempTime + waitTime + this.compuntedRunTime(list, index, runLevel);
+                    });
+
+                    this.addModel.arriveConfigList = list;
+                    this.addModel.endTime = formatTime(tempTime - list[list.length - 1].stopTime);
+                });
+            }
+        },
+        handleClick(row, column, event) {
+            this.addModel.startStationCode = row.startStationCode;
+            this.addModel.endStationCode = row.endStationCode;
+            this.addModel.startSectionCode = row.startSectionCode;
+            this.addModel.endSectionCode = row.endSectionCode;
+            this.addModel.routingCode = row.code;
+        },
+        handleCommit() {
+            if (this.isPlan) {
+                // 计划添加任务
+                this.$emit('dispatchOperate', { dialogName: 'editPlanningTrain', operate: 'handleConfirmAddTask', params: Object.assign({}, this.addModel) });
+            } else {
+                // 直接添加任务
+                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(() => {
+                    this.$messageBox(this.$t('tip.addTaskFailed'));
+                });
+            }
+
+            this.doClose();
+        }
+    }
+};
+</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>

src/views/planMonitor/newEditTool/menus/components/dataTable.vue

@@ -0,0 +1,215 @@
+<template>
+  <div v-if="show">
+    <template v-if="maxmini">
+      <div class="nav">
+        <div class="title">{{ config.title }}</div>
+        <!-- <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"
+      >
+        <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);
+            }
+        },
+        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;
+    }
+
+    /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>

src/views/planMonitor/newEditTool/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.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');
+                            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');
+                            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);
+                                    }
+                                    console.log(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>

src/views/planMonitor/newEditTool/menus/deleteTask.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool delete-task"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="400px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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>
+    <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 { deletePlanTrip } from '@/api/runplan';
+
+export default {
+    name: 'DeleteTask',
+    components: {
+    },
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            isPlan: false,
+            model: {
+                taskIndex: '',
+                deleteBefore: false,
+                tripNumber: '',
+                serviceNumber: ''
+            }
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.deleteTask');
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow(params) {
+            this.isPlan = params.isPlan;
+            this.model.taskIndex = params.taskIndex;
+            this.model.tripNumber = params.tripNumber;
+            this.model.serviceNumber = params.serviceNumber;
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        handleCommit() {
+            if (this.isPlan) {
+                // 计划删除任务
+                this.$emit('dispatchOperate', { dialogName: 'editPlanningTrain', operate: 'handleConfirmDeleteTask', params: this.model });
+            } else {
+                // 直接删除任务
+                const model = {
+                    planId: this.$route.query.planId,
+                    SDTNumber: `${this.model.serviceNumber}${this.model.tripNumber}`,
+                    deleteBefore: this.model.deleteBefore
+                };
+
+                deletePlanTrip(model).then(resp => {
+                    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>

src/views/planMonitor/newEditTool/menus/duplicateTrain.vue

@@ -0,0 +1,114 @@
+<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.loadRunPlanId;
+            this.model['serviceNumber'] = this.model.serviceNumber;
+            this.doClose();
+            duplicateService(this.model).then(resp => {
+                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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/menus/editPlanningTrain.vue

@@ -0,0 +1,244 @@
+<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 '@/utils/runPlan';
+import { addPlanService } from '@/api/runplan';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+    name: 'EditPlanningTrain',
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            currentRow: {},
+            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);
+        },
+        loadInitData(params) {
+            this.model.planId = this.loadRunPlanId;
+            this.model.serviceNumber = params.serviceNumber;
+            this.model.tripConfigList = [];
+            const editData = this.$store.state.runPlan.draftEditData[params.serviceNumber];
+            if (editData) {
+                const tripNumberList = Object.keys(editData.trainMap).sort((a, b) => { return editData.trainMap[a].oldIndex - editData.trainMap[b].oldIndex; });
+                tripNumberList.forEach(tripNumber => {
+                    const trainInfo = editData.trainMap[tripNumber];
+                    const lastIndex = trainInfo.stationTimeList.length - 1;
+                    const taskObj = {
+                        taskIndex: getUID('task_'),
+                        tripNumber: tripNumber,
+                        startStationCode: trainInfo.stationTimeList[0].stationCode,
+                        startTime: formatTime(trainInfo.stationTimeList[0].secondTime),
+                        endStationCode: trainInfo.stationTimeList[lastIndex].stationCode,
+                        endTime: formatTime(trainInfo.stationTimeList[lastIndex].secondTime),
+                        arriveConfigList: []
+                    };
+                    this.model.tripConfigList.push(taskObj);
+                });
+            }
+        },
+        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: 'addTask', params: {
+                    isPlan: true,
+                    taskIndex: this.currentRow.taskIndex,
+                    serviceNumber: this.model.serviceNumber,
+                    tripNumber: this.currentRow.tripNumber
+                }
+            });
+        },
+        handleEditTask() {
+            if (this.currentRow.taskIndex) {
+                this.$emit('dispatchDialog', {
+                    name: 'modifyingTask', params: {
+                        isPlan: true,
+                        serviceNumber: this.model.serviceNumber,
+                        tripNumber: this.currentRow.tripNumber
+                    }
+                });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPieceOfData'));
+            }
+        },
+        handleDeleteTask() {
+            if (this.currentRow.taskIndex) {
+                this.$emit('dispatchDialog', {
+                    name: 'deleteTask', params: {
+                        isPlan: true,
+                        taskIndex: this.currentRow.taskIndex,
+                        serviceNumber: this.model.serviceNumber,
+                        tripNumber: this.currentRow.tripNumber
+                    }
+                });
+            } else {
+                this.$messageBox(this.$t('tip.selectAPieceOfData'));
+            }
+        },
+        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);
+            // }
+
+            if (model.addToFront) {
+                this.model.tripConfigList = [model, ...this.model.tripConfigList];
+            } else {
+                this.model.tripConfigList.push(model);
+            }
+        },
+        handleConfirmDeleteTask(model) {
+            const index = this.model.tripConfigList.findIndex(
+                elem => { return elem.taskIndex == this.currentRow.taskIndex; }
+            );
+
+            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() {
+            this.doClose();
+            addPlanService(this.model).then(() => {
+                this.$emit('refresh');
+                this.$message.success(this.$t('tip.planCreationSuccessful'));
+            }).catch(() => {
+                this.$messageBox(this.$t('tip.createPlanFailed'));
+            });
+        }
+    }
+};
+</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>

src/views/planMonitor/newEditTool/menus/editSmoothRunTime.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool edit-smooth-run-time"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="500px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <div style="margin: 10px;">
+      <div style="border: 1px solid #B9B5A7">
+        <el-row>
+          <span style="position: relative; top: -8px; left: 20px">{{$t('planMonitor.editSmoothRun.trainProportion')}}</span>
+          <el-col :offset="1">
+            <el-checkbox v-model="model.useSame">{{$t('planMonitor.editSmoothRun.allTheLoopTrainProportion')}}</el-checkbox>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="9" :offset="1">
+            <span>{{$t('planMonitor.editSmoothRun.sizeOfTheLoopTrainProportion')}}</span>
+          </el-col>
+          <el-col :span="12">
+            <el-select v-model="model.scale" :placeholder="$t('planMonitor.editSmoothRun.pleaseSelect')">
+              <el-option
+                v-for="item in scaleList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+      <el-row style="margin-top: 20px">
+        <el-table :data="model.smoothList" border :height="240">
+          <el-table-column prop="startTime" :label="$t('planMonitor.editSmoothRun.startTime')" />
+          <el-table-column prop="stopTime" :label="$t('planMonitor.editSmoothRun.stopTime')" />
+          <el-table-column prop="runInterval" :label="$t('planMonitor.editSmoothRun.runInterval')" />
+          <el-table-column prop="scale" :label="$t('planMonitor.editSmoothRun.trainProportion')" />
+        </el-table>
+      </el-row>
+      <el-row type="flex" justify="center" class="button-group">
+        <el-button @click="handleAdd">{{$t('planMonitor.editSmoothRun.add')}}</el-button>
+        <el-button @click="handleDelete">{{$t('planMonitor.editSmoothRun.delete')}}</el-button>
+        <el-button @click="handleEdit">{{$t('planMonitor.editSmoothRun.modify')}}</el-button>
+      </el-row>
+    </div>
+    <el-row type="flex" justify="center" class="button-group">
+      <el-button style="padding: 0px; margin: 0px 30px" @click="handleCommit">{{$t('global.confirm')}}</el-button>
+      <el-button style="padding: 0px; margin: 0px 30px" @click="doClose">{{$t('global.cancel')}}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+	name: 'EditSmoothRunTime',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			model: {
+				useSame: false,
+				smoothList: []
+			},
+			scaleList: []
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.editSmoothRun.editSmoothRunTime');
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		doShow() {
+			this.dialogShow = true;
+		},
+		doClose() {
+			this.loading = false;
+			this.dialogShow = false;
+		},
+		handleAdd() {
+			this.$emit('dispatchDialog', { name: 'addSmoothRunTime', params: {} });
+		},
+		handleDelete() {
+			this.$emit('dispatchDialog', { name: 'addSmoothRunTime', params: {} });
+		},
+		handleEdit() {
+
+		},
+		handleCommit() {
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-row {
+            margin-bottom: 10px !important;
+        }
+
+        .el-dialog .el-input__inner {
+            height: 20px !important;
+            line-height: 20px !important;
+        }
+
+        .el-dialog .el-input {
+            width: 160px !important;
+        }
+    }
+</style>

src/views/planMonitor/newEditTool/menus/editStationBetweenTime.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool edit-station-between-time"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="320px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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: 'EditStationBetweenTime',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.modifying.modifyTwoStationTime');
+		}
+	},
+	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>

src/views/planMonitor/newEditTool/menus/lookup.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool look-up"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="320px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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: 'LookUp',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.modifying.search');
+		}
+	},
+	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>

src/views/planMonitor/newEditTool/menus/modifyingBeginTime.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool modifying-begin-time"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="300px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row>
+      <el-col :span="9" :offset="1" style="height: 32px; line-height: 32px;">{{$t('planMonitor.modifying.modifyStartTime')}}</el-col>
+      <el-col :span="14">
+        <el-time-picker v-model="beginTime" size="mini" :clearable="false" />
+      </el-col>
+    </el-row>
+    <el-row type="flex" justify="center" style="margin-top: 20px">
+      <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: 'ModifyingBeginTime',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			beginTime: ''
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.modifying.modifyStartTimeTitle');
+		}
+	},
+	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";
+
+    /deep/ {
+        .el-date-editor {
+            width: 120px !important;
+        }
+
+        .el-button {
+            margin-left: 20px !important;
+            margin-right: 20px !important;
+        }
+    }
+</style>

src/views/planMonitor/newEditTool/menus/modifyingRouting.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool modifying-routing"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="800px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <div style="margin: 10px">
+      <el-row>
+        <el-col :span="8">
+          <span style="position:relative; left: 12px; top: 9px">{{$t('planMonitor.modifying.time')}}</span>
+          <div style="border: 1px solid #ADA99A">
+            <el-radio-group v-model="timeType" style="margin: 10px">
+              <el-row style="margin: 5px 0px">
+                <el-radio :label="1">{{$t('planMonitor.modifying.startStationTips')}}</el-radio>
+              </el-row>
+              <el-row style="margin: 5px 0px">
+                <el-radio :label="2">{{$t('planMonitor.modifying.endStationTips')}}</el-radio>
+              </el-row>
+            </el-radio-group>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row style="margin-top: 20px">
+        <el-table :data="routeDate" border style="width: 100%" height="120">
+          <el-table-column prop="beginStationCode" :label="$t('planMonitor.modifying.startStationTitle')" />
+          <el-table-column prop="beginStationStandCode" :label="$t('planMonitor.modifying.startedStation')" />
+          <el-table-column prop="endStationCode" :label="$t('planMonitor.modifying.endStationTitle')" />
+          <el-table-column prop="endStationStandCode" :label="$t('planMonitor.modifying.endedStation')" />
+          <el-table-column prop="describe" :label="$t('planMonitor.modifying.description')" width="250" />
+        </el-table>
+      </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>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+	name: 'ModifyingRouting',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			timeType: '1',
+			routeDate: []
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.modifying.modifyTaskRoute');
+		}
+	},
+	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";
+
+    /deep/ {
+        .el-button {
+            margin-left: 30px !important;
+            margin-right: 30px !important;
+        }
+    }
+</style>

src/views/planMonitor/newEditTool/menus/modifyingStationIntervalTime.vue

@@ -0,0 +1,164 @@
+<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>
+      <el-table :data="stationIntervalData" border style="width: 100%" height="320">
+        <el-table-column prop="startStationCode" :label="$t('planMonitor.modifying.startingStation')" width="120">
+          <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')">
+          <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="120">
+          <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')">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ formatName(scope.row.endSectionCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="directionCode" :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="65">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.distance/100 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level1')" width="70">
+          <template slot-scope="scope">
+            <span
+              style="margin-left: 10px"
+              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
+            >{{ scope.row.l1 || '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level2')" width="70">
+          <template slot-scope="scope">
+            <span
+              style="margin-left: 10px"
+              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
+            >{{ scope.row.l2 || '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level3')" width="70">
+          <template slot-scope="scope">
+            <span
+              style="margin-left: 10px"
+              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
+            >{{ scope.row.l3 || '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level4')" width="70">
+          <template slot-scope="scope">
+            <span
+              style="margin-left: 10px"
+              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
+            >{{ scope.row.l4 || '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level5')" width="70">
+          <template slot-scope="scope">
+            <span
+              style="margin-left: 10px"
+              :style="{color: scope.row.isEditStatus?'red': 'black'}"
+            >{{ scope.row.l5 || '' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <div class="button-group" style="text-align: center; margin-top: 10px;">
+      <!--<el-button type="primary" @click="handleSave">{{ $t('planMonitor.modifying.save') }}</el-button>-->
+      <el-button @click="doClose">{{ $t('planMonitor.modifying.cancelAndQuit') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { formatName } from '@/utils/runPlan';
+import { setStationRunning, getMapStationRun } from '@/api/runplan';
+
+export default {
+    name: 'ModifyingStationIntervalTime',
+    components: {
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            stationIntervalData: [],
+            params: {}
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.modifying.modifyRunLevel');
+        },
+        isNewMap() {
+            return this.$route.path.includes('displayNew');
+        }
+    },
+    mounted() {
+        this.loadInitData();
+    },
+    methods: {
+        formatName(code) {
+            return formatName(code);
+        },
+        loadInitData() {
+            this.stationIntervalData = [];
+            if (this.$route.query.lineCode) {
+                getMapStationRun(this.$route.query.mapId).then(resp =>{
+                    const list = resp.data;
+                    list.forEach(elem => {
+                        elem.isEditStatus = false;
+                    });
+                    this.stationIntervalData = list;
+                });
+            }
+        },
+        doShow(params) {
+            this.params = params || {};
+            this.loadInitData();
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        }
+        // handleSave() {
+        //     const data = [];
+        //     this.stationIntervalData.forEach(elem => {
+        //         data.push(elem.runPlanLevelVO);
+        //     });
+        //     setStationRunning(this.$route.query.mapId, data).then(resp => {
+        //         this.stationIntervalData.forEach(elem => {
+        //             elem.isEditStatus = false;
+        //         });
+        //         this.$message.success(this.$t('planMonitor.modifying.modifySuccess'));
+        //     }).catch(() => {
+        //         this.$messageBox(this.$t('planMonitor.modifying.modifyFailed'));
+        //     });
+        // }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/planMonitor/newEditTool/menus/modifyingTask.vue

@@ -0,0 +1,463 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool add-task"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="1000px"
+    :before-close="doClose"
+    :z-index="2000"
+    top="50px"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <el-row>
+      <el-col :span="4">
+        <el-row>
+          <el-col :span="9" class="lineHeight">
+            <span>{{ $t('planMonitor.modifying.tripNumber') }}</span>
+          </el-col>
+          <el-col :span="15">
+            <el-select v-model="editModel.tripNumber" size="mini" style="display: inline-black" :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="2">
+        <el-row>
+          <el-col :offset="8" class="lineHeight">
+            <el-checkbox v-model="editModel.trainManual">{{ $t('planMonitor.modifying.manual') }}</el-checkbox>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="11" :offset="1" class="lineHeight">
+            <span>{{ $t('planMonitor.modifying.defaultStopTime') }}</span>
+          </el-col>
+          <el-col :span="12">
+            <el-select
+              v-model="editModel.defaultStopTime"
+              style="display: inline-black"
+              size="mini"
+              :placeholder="$t('planMonitor.modifying.pleaseSelect')"
+            >
+              <el-option
+                v-for="item in defaultStopTimeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="5">
+        <el-row>
+          <el-col :span="9" :offset="2" class="lineHeight">
+            <span>{{ $t('planMonitor.modifying.serviceNumber') }}</span>
+          </el-col>
+          <el-col :span="13">
+            <el-input v-model="editModel.serviceNumber" size="mini" />
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="7" class="lineHeight">
+        <el-row>
+          <el-col :span="22" :offset="2">
+            <el-row>
+              <el-col :span="6">
+                <el-checkbox v-model="editModel.clearGuest">{{ $t('planMonitor.modifying.clearGuest') }}</el-checkbox>
+              </el-col>
+              <el-col :span="8">
+                <el-checkbox v-model="editModel.continuationPlan">{{ $t('planMonitor.modifying.continuationPlan') }}</el-checkbox>
+              </el-col>
+              <el-col :span="6">
+                <el-checkbox v-model="editModel.firstTrain">{{ $t('planMonitor.modifying.firstTrain') }}</el-checkbox>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="4">
+        <el-row>
+          <el-col :span="9" class="lineHeight">
+            <span>{{ $t('planMonitor.modifying.serialNumber') }}</span>
+          </el-col>
+          <el-col :span="15">
+            <el-select v-model="editModel.serialNumber" size="mini" style="display: inline-black" :placeholder="$t('planMonitor.modifying.pleaseSelect')">
+              <el-option
+                v-for="item in serialNumberList"
+                :key="item.value"
+                :label="item.label"
+                :value="editModel.value"
+              />
+            </el-select>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="2">
+        <el-row>
+          <el-col :offset="8" class="lineHeight">
+            <el-checkbox v-model="editModel.serialManual" size="mini">{{ $t('planMonitor.modifying.manual') }}</el-checkbox>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="lineHeight">
+        <el-row>
+          <el-col :span="11" :offset="1">
+            <span>{{ $t('planMonitor.modifying.defaultRunLevel') }}</span>
+          </el-col>
+          <el-col :span="12">
+            <el-select
+              v-model="editModel.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-col :span="5" class="lineHeight">
+        <el-row>
+          <el-col :span="9" :offset="2">
+            <span>{{ $t('planMonitor.modifying.startTime') }}：</span>
+          </el-col>
+          <el-col :span="13">
+            <el-time-picker
+              v-model="editModel.startTime"
+              :placeholder="$t('planMonitor.modifying.selectTime')"
+              value-format="HH:mm:ss"
+              size="mini"
+              :clearable="false"
+            />
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="7" class="lineHeight">
+        <el-row>
+          <el-col :span="22" :offset="2">
+            <el-row>
+              <el-col :span="6">
+                <el-checkbox v-model="editModel.inStock">{{ $t('planMonitor.modifying.inStock') }}</el-checkbox>
+              </el-col>
+              <el-col :span="8">
+                <el-checkbox v-model="editModel.outStock">{{ $t('planMonitor.modifying.outStock') }}</el-checkbox>
+              </el-col>
+              <el-col :span="6">
+                <el-checkbox v-model="editModel.lastTrain">{{ $t('planMonitor.modifying.lastTrain') }}</el-checkbox>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row style="margin-bottom: 5px;">
+      {{ $t('planMonitor.modifying.route') }}
+    </el-row>
+    <el-row>
+      <el-table :data="editModel.routingList" border :height="140">
+        <el-table-column prop="startStationCode" :label="$t('planMonitor.modifying.startingStation')">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.startStationCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="startSectionCode" :label="$t('planMonitor.modifying.startSection')" />
+        <el-table-column prop="endStationCode" :label="$t('planMonitor.modifying.endStationTitle')">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.endStationCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="endSectionCode" :label="$t('planMonitor.modifying.endSection')" />
+        <el-table-column prop="remarks" :label="$t('planMonitor.modifying.description')" :width="315" />
+        <!-- <el-table-column :width="40" /> -->
+      </el-table>
+    </el-row>
+    <el-row style=" margin-bottom: 5px;margin-top: 10px;">
+      {{ $t('planMonitor.modifying.detail') }}
+    </el-row>
+    <el-row>
+      <el-table :data="editModel.arriveConfigList" border :height="260">
+        <el-table-column prop="stationCode" :label="$t('planMonitor.modifying.station')">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.stationCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="sectionCode" :label="$t('planMonitor.modifying.section')">
+          <template slot-scope="scope">
+            {{ formatName(scope.row.sectionCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="arriveTime" :label="$t('planMonitor.modifying.arrivalTime')" />
+        <el-table-column prop="stopTime" :label="$t('planMonitor.modifying.stopTime')" />
+        <el-table-column prop="departureTime" :label="$t('planMonitor.modifying.departureTime')" />
+        <el-table-column prop="speedLevel" :label="$t('planMonitor.modifying.runLevel')" />
+      </el-table>
+    </el-row>
+    <el-row>
+      <el-col :offset="16">
+        <el-checkbox v-model="editModel.default">{{ $t('planMonitor.modifying.showDefaultTime') }}</el-checkbox>
+      </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 { getRoutingBySDTNumber, querySectionListByRouting, updatePlanTrip, getMapStationRun } from '@/api/runplan';
+import { formatTime, formatName } from '@/utils/runPlan';
+
+export default {
+    name: 'ModifyingTask',
+    components: {
+    },
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            isPlan: false,
+            PlanConvert: {},
+            stopStationMap: {},
+            editModel: {
+                taskIndex: '',
+                routingCode: '',
+                defaultStopTime: '',
+                defaultSpeedLevel: '',
+                tripNumber: '',
+                serviceNumber: '',
+                startTime: '00:00:00',
+                endTime: '',
+                routingList: [],
+                arriveConfigList: [],
+
+                serialNumber: '',
+                trainManual: false,
+                serialManual: false,
+                clearGuest: false,
+                continuationPlan: false,
+                firstTrain: false,
+                lastTrain: false,
+                inStock: false,
+                outStock: false
+            },
+            tripNumberList: [{ value: '', label: this.$t('planMonitor.modifying.automatic') }],
+            defaultStopTimeList: [{ value: '', label: this.$t('planMonitor.modifying.default') }],
+            defaultSpeedLevelList: [{ value: '', label: this.$t('planMonitor.modifying.default') }],
+            serialNumberList: []
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.modifying.modifyTask');
+        },
+        isNewMap() {
+            return this.$route.path.includes('displayNew');
+        }
+    },
+    watch: {
+        'editModel.startTime': function () {
+            this.computedDetailList();
+        },
+        'editModel.defaultStopTime': function () {
+            this.computedDetailList();
+        },
+        'editModel.defaultSpeedLevel': function () {
+            this.computedDetailList();
+        }
+    },
+    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 < 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['l3']) {
+                        runTime = parseInt(stopStationObj['l3']);
+                    } else {
+                        // this.$messageBox(`${this.$t('planMonitor.modifying.setMessageTip1')} ${stopStationObj.startSectionCode} ${this.$t('planMonitor.modifying.setMessageTip2')} ${stopStationObj.endSectionCode} ${this.$t('planMonitor.modifying.setMessageTip3')}`);
+                        this.$alert(`${this.$t('planMonitor.tipOperationTime')}`, {
+                            confirmButtonText: this.$t('global.confirm'),
+                            callback: action => {
+                                this.doClose();
+                            }
+                        });
+                    }
+                }
+            }
+
+            return runTime;
+        },
+        computedDetailList() {
+            this.editModel.arriveConfigList = [];
+            if (this.editModel.routingCode) {
+                querySectionListByRouting({ planId: this.$route.query.planId || this.loadRunPlanId, routingCode: this.editModel.routingCode }).then(rest => {
+                    const list = rest.data;
+                    const waitTime = this.editModel.defaultStopTime || 30; // 默认三十秒
+                    let tempTime = this.computedTimeByString(this.editModel.startTime) / 1000 - 30;
+                    const runLevel = this.editModel.defaultSpeedLevel || 'l3'; // 默认等级三
+                    list.forEach((elem, index) => {
+                        elem.arriveTime = index ? formatTime(tempTime) : '';
+                        elem.departureTime = index == list.length - 1 ? '' : formatTime(tempTime + waitTime);
+                        elem.stopTime = this.editModel.defaultSpeedLevel || this.$t('planMonitor.modifying.default');
+                        elem.speedLevel = this.editModel.defaultStopTime || this.$t('planMonitor.modifying.default');
+                        tempTime = tempTime + waitTime + this.compuntedRunTime(list, index, runLevel);
+                    });
+
+                    if (this.editModel.routingList && this.editModel.routingList.length > 0) {
+                        const row = this.editModel.routingList[0];
+                        const startSection = this.$store.getters['map/getDeviceByCode'](row.startSectionCode);
+                        if (startSection && startSection.isReentryTrack) {
+                            list.shift();
+                        }
+
+                        const endSection = this.$store.getters['map/getDeviceByCode'](row.endSectionCode);
+                        if (endSection && endSection.isReentryTrack) {
+                            list.pop();
+                        }
+                    }
+
+                    this.editModel.arriveConfigList = list;
+                    this.editModel.endTime = formatTime(tempTime - waitTime);
+                });
+            }
+        },
+        loadInitData(params) {
+            const lineCode = this.$route.query.lineCode;
+            const mapId = this.$route.query.mapId;
+            this.isPlan = params.isPlan;
+            this.editModel.taskIndex = params.taskIndex;
+            this.editModel.serviceNumber = params.serviceNumber;
+            this.editModel.tripNumber = params.tripNumber;
+            this.PlanConvert = this.$theme.loadPlanConvert(lineCode);
+
+            const editData = this.$store.state.runPlan.draftEditData[this.editModel.serviceNumber];
+            if (editData) {
+                const tripNumberList = Object.keys(editData.trainMap).sort((a, b) => { return editData.trainMap[a].oldIndex - editData.trainMap[b].oldIndex; });
+                const trainInfo = editData.trainMap[tripNumberList[0]];
+                this.editModel.startTime = formatTime(trainInfo.stationTimeList[0].secondTime + this.PlanConvert.TranslationTime);
+            }
+            if (mapId) {
+                getMapStationRun(mapId).then(resp => {
+                    const list = resp.data;
+                    list.forEach(elem => {
+                        this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
+                    });
+                });
+            }
+            const model = {
+                planId: this.$route.query.planId || this.loadRunPlanId,
+                SDTNumber: `${this.editModel.serviceNumber}${this.editModel.tripNumber}`
+            };
+
+            this.editModel.routingList = [];
+            getRoutingBySDTNumber(model).then(resp => { // 根据车次号查询交路
+                const routingObj = resp.data;
+                this.editModel.routingCode = routingObj.code;
+                this.editModel.routingList.push(routingObj);
+                this.computedDetailList();
+            });
+        },
+        doShow(params) {
+            this.loadInitData(params);
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.dialogShow = false;
+        },
+        buildModel() {
+            return {
+                planId: this.$route.query.planId || this.loadRunPlanId,
+                routingCode: this.editModel.routingCode,
+                tripNumber: this.editModel.tripNumber,
+                startTime: this.editModel.startTime,
+                endTime: this.editModel.endTime,
+                arriveConfigList: this.editModel.arriveConfigList,
+                SDTNumber: `${this.editModel.serviceNumber}${this.editModel.tripNumber}`
+            };
+        },
+        handleCommit() {
+            if (this.isPlan) {
+                // 计划修改任务
+            } else {
+                // 直接修改
+                updatePlanTrip(this.buildModel()).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('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>

src/views/planMonitor/newEditTool/menus/offLine.vue

@@ -0,0 +1,89 @@
+<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: {}
+        };
+    },
+    computed: {
+        title() {
+            return this.$t('planMonitor.updateStation.deletePlanCar');
+        },
+        width() {
+            if (this.params.width) {
+                return this.params.width;
+            } else {
+                return 400;
+            }
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        doShow(params) {
+            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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/menus/populatingGenericData.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool duplicate-train"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="500px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
+    <span slot="footer" class="dialog-footer">
+      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
+      <el-button type="primary" size="medium" :loading="loading" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getStationList, populatingGenericData } from '@/api/runplan';
+
+export default {
+    props: {
+        loadRunPlanId: {
+            type: String,
+            default() {
+                return '';
+            }
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            stationList: [],
+            loading: false,
+            formModel: {
+                stationRunningTime: 60, // 站间运行时间
+                right: 3, // 是否向右发车 不填未同时发车
+                beginTime: '',
+                overTime: '',
+                departureTimeInterval: 180, // 发车间隔时间
+                parkedTime: 30, // 停止时间
+                reentryTime: 60, // 折返时间
+                startStationCode: '',
+                endStationCode: ''
+            },
+
+            rules: {
+                beginTime: [
+                    { required: true, message: '请填写开始时间', trigger: 'blur' }
+                ],
+                overTime: [
+                    { required: true, message: '请填写结束时间', trigger: 'blur' }
+                ],
+                departureTimeInterval: [
+                    { required: true, message: '请填写发车间隔', trigger: 'blur' }
+                ],
+                parkedTime: [
+                    { required: true, message: '请填写停站时间', trigger: 'blur' }
+                ],
+                reentryTime: [
+                    { required: true, message: '请填写折返时间', trigger: 'blur' }
+                ],
+                startStationCode: [
+                    { required: true, message: '请选择起始站', trigger: 'change' }
+                ],
+                endStationCode: [
+                    { required: true, message: '请选择终止站', trigger: 'change' }
+                ]
+            }
+        };
+    },
+    computed: {
+        title() {
+            return '创建运行图';
+        },
+        form() {
+            return {
+                labelWidth: '100px',
+                items: [
+                    { prop: 'beginTime', label: '开始时间', type: 'timePicker'},
+                    { prop: 'overTime', label: '结束时间', type: 'timePicker'},
+                    { prop: 'departureTimeInterval', label: '发车间隔', type: 'number'},
+                    { prop: 'parkedTime', label: '停站时间', type: 'number'},
+                    { prop: 'reentryTime', label: '折返时间', type: 'number'},
+                    { prop: 'right', label: '发车类型', type: 'checkBox', children: [
+                        { name: '上行发车', value: 1 },
+                        { name: '下次发车', value: 2 },
+                        { name: '同时发车', value: 3 }
+                    ] },
+                    { prop: 'startStationCode', label: '起始站', type: 'select', options: this.stationList },
+                    { prop: 'endStationCode', label: '终止站', type: 'select', options: this.stationList }
+
+                ]
+            };
+        }
+    },
+    created() {
+        const mapId = this.$route.query.mapId;
+        if (mapId) {
+            getStationList(mapId).then(response => {
+                this.stationList = response.data.map(elem => { return { value: elem.code, label: elem.name }; });
+            }).catch(() => {
+                this.$messageBox(`获取车站列表失败`);
+            });
+        }
+    },
+    methods: {
+        doShow(params) {
+            this.loading = false;
+            this.dialogShow = true;
+        },
+        doClose() {
+            this.loading = false;
+            this.$refs.dataform.resetForm();
+            this.dialogShow = false;
+        },
+        handleCommit() {
+            this.$refs.dataform.validateForm(() => {
+                this.loading = true;
+                if (this.formModel.right == 1) {
+                    this.formModel.right = true;
+                } else if (this.formModel.right == 2) {
+                    this.formModel.right = false;
+                } else {
+                    this.formModel.right = null;
+                }
+                if (this.formModel.overTime > this.formModel.beginTime) {
+                    populatingGenericData(this.$route.query.planId || this.loadRunPlanId, this.formModel).then(res => {
+                        this.loading = false;
+                        this.doClose();
+                        this.$store.dispatch('runPlan/refresh');
+                    }).catch(error => {
+                        console.log(error);
+                        this.doClose();
+                    });
+                } else {
+                    this.$messageBox('结束时间必须大于开始时间');
+                }
+            });
+        },
+        // 转换时间格式
+        formatDateTime(date) {
+            console.log(date, 3333);
+            let h = date.getHours();
+            h = h < 10 ? ('0' + h) : h;
+            let minute = date.getMinutes();
+            let second = date.getSeconds();
+            minute = minute < 10 ? ('0' + minute) : minute;
+            second = second < 10 ? ('0' + second) : second;
+            return h + ':' + minute + ':' + second;
+        }
+
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>

src/views/planMonitor/newEditTool/menus/quickLoopsIncrease.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool quick-loops-increase"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="320px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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: 'QuickLoopsIncrease',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.updateStation.quicklyAddLoop');
+		}
+	},
+	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>

src/views/planMonitor/newEditTool/menus/quickTaskIncrease.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool quick-task-increase"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="320px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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: 'QuickTaskIncrease',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.updateStation.quicklyAddTask');
+		}
+	},
+	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>

src/views/planMonitor/newEditTool/menus/routingSelection.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool quick-task-increase"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="320px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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: 'RoutingSelection',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.updateStation.routeSelect');
+		}
+	},
+	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>

src/views/planMonitor/newEditTool/menus/selectDeleteRoute.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool select-delete-route"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="320px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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: 'SelectDeleteRoute',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.updateStation.selectDeleteRoute');
+		}
+	},
+	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>

src/views/planMonitor/newEditTool/menus/selectPrintArea.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="planEdit__tool select-print-area"
+    :title="title"
+    :visible.sync="dialogShow"
+    width="320px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <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: 'SelectPrintArea',
+	components: {
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false
+		};
+	},
+	computed: {
+		title() {
+			return this.$t('planMonitor.updateStation.selectPrintArea');
+		}
+	},
+	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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/schedule.vue

@@ -0,0 +1,643 @@
+<template>
+  <div id="PlanSchedule">
+    <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"
+        class="data_table_box"
+        :config="tripNumberConfig"
+        @touch="trainNumTouch"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { timeFormat } from '@/utils/date';
+import { getStationList, queryRunPlan } from '@/api/runplan';
+import { getPublishMapInfo } from '@/api/jmap/map';
+import DataTable from './menus/components/dataTable';
+import echarts from 'echarts';
+
+export default {
+    name: 'PlanSchedule',
+    components: {
+        DataTable
+    },
+    props: {
+        planConvert: {
+            type: Object,
+            required: true
+        },
+        maxWidth: {
+            type: Number,
+            required: true
+        },
+        maxHeight: {
+            type: Number,
+            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,
+            serviceNumberConfig: {
+                data: [],
+                title: this.$t('planMonitor.serviceNumber'),
+                showHeader: false,
+                highlightCurrentRow: true,
+                handleChange: this.serviceNumberChange,
+                showClose: false,
+                columns: [
+                    {
+                        prop: 'serviceNumber',
+                        label: this.$t('planMonitor.serviceNumber')
+                    }
+                ]
+            },
+            tripNumberConfig: {
+                data: [],
+                title: this.$t('planMonitor.tripNumber'),
+                showHeader: false,
+                highlightCurrentRow: true,
+                handleChange: this.tripNumberChange,
+                showClose: false,
+                columns: [
+                    {
+                        prop: 'tripNumber',
+                        label: this.$t('planMonitor.tripNumber')
+                    }
+                ]
+            },
+            realData: {},
+            kmRangeCoordMap: {},
+            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'
+        ])
+    },
+    watch: {
+        maxWidth() {
+            this.setPosition();
+        },
+        maxHeight() {
+            this.setPosition();
+        },
+        '$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.loadChartPage();
+        },
+        $route() {
+            this.$nextTick(() => {
+                this.loadChartPage();
+            });
+        },
+        loadRunPlanId() {
+            this.loadChartPage();
+        }
+    },
+    mounted() {
+        this.setPosition();
+        this.loadChartPage();
+    },
+    beforeDestroy() {
+        this.destroy();
+    },
+    methods: {
+        displayTrain() {
+            this.showTrain = !this.showTrain;
+        },
+        serviceNumberChange(row) {
+            let serviceNumber = null;
+            let serviceObj = {};
+            if (row) {
+                serviceNumber = row.serviceNumber;
+                serviceObj = this.$store.state.runPlan.draftEditData[row.serviceNumber] || {};
+
+                const op = this.myChart.getOption();
+                op.series.forEach((item, index) => {
+                    item.lineStyle.color = '#000';
+                    switch (item.name) {
+                    case serviceNumber: {
+                        item.lineStyle.color = 'red';
+                        break;
+                    }
+                    case 'trainLabel': {
+                        op.series.pop();
+                        break;
+                    }
+                    }
+                });
+                this.myChart.setOption(op, true);
+            }
+            this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: null });
+            this.analyticalTripNumber(serviceObj.trainMap || {});
+        },
+        tripNumberChange(row) {
+            const serviceNumber = this.$store.state.runPlan.draftSelected.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);
+                            }
+                        });
+                        break;
+                    }
+                    case 'trainLabel': {
+                        op.series.pop();
+                        this.myChart && this.myChart.setOption(op, true);
+                        break;
+                    }
+                    }
+                });
+                op.series.push({
+                    name: 'trainLabel',
+                    lineStyle: {
+                        color: 'green'
+                    },
+                    type: 'line',
+                    data: data
+                });
+                setTimeout(() => {
+                    this.myChart && this.myChart.setOption(op, true);
+                }, 50);
+
+            }
+            this.$store.dispatch('runPlan/setDraftSelected', { serviceNumber: serviceNumber, tripNumber: tripNumber });
+        },
+        async analyticalServiceNumber(data) {
+            this.serviceNumberConfig.data = Object.keys(data || {})
+                .sort((a, b) => { return data[a].oldIndex - data[b].oldIndex; })
+                .map(serviceNumber => { return { serviceNumber }; });
+        },
+        async analyticalTripNumber(data) {
+            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;
+                const width = this.maxWidth;
+                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, height });
+
+                if (this.top != top) {
+                    this.top = top;
+                }
+
+                if (this.height != height) {
+                    this.height = height - 20 * 2;
+                }
+            });
+        },
+        async loadChartPage() {
+            try {
+                getPublishMapInfo(this.$route.query.mapId).then(resp => {
+                    this.mapName = `${resp.data.name} (${this.$route.query.planName || this.loadRunPlanName || ''})`;
+                });
+                this.$store.dispatch('runPlan/draftClear').then(() => {
+                    // this.loadInitChart().then(() => {
+                    if (this.$route.query.mapId) {
+                        getStationList(this.$route.query.mapId).then(resp => {
+                            this.$store.dispatch('runPlan/setDraftStations', resp.data).then(() => {
+                                this.loadInitData();
+                                if (this.loadRunPlanId) {
+                                    this.myChart && this.myChart.showLoading();
+                                    queryRunPlan(this.loadRunPlanId).then(rest => {
+                                        this.$store.dispatch('runPlan/setDraftPlanData', rest.data).then(() => {
+                                            this.analyticalServiceNumber(this.$store.state.runPlan.draftEditData);
+                                            this.loadChartData();
+                                            this.myChart && this.myChart.hideLoading();
+                                        });
+                                    }).catch(() => {
+                                        this.myChart && this.myChart.hideLoading();
+                                        this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
+                                    });
+
+                                } else {
+                                    this.clearCanvas();
+                                }
+                            });
+                        }).catch(() => {
+                            this.$messageBox(this.$t('tip.requestingStationDataFailed'));
+                            this.$store.dispatch('runPlan/setDraftStations', []);
+                        });
+                    }
+                    // });
+                });
+            } catch (error) {
+                this.$messageBox(this.$t('error.loadingOperationGraphFailed'));
+            }
+        },
+        async loadChartData() {
+            try {
+                const stations = this.$store.state.runPlan.draftStations;
+                const planData = this.$store.state.runPlan.draftPlanData;
+                this.stationsObj = {};
+                stations.forEach(item => {
+                    this.stationsObj[Math.floor(item.kmRange)] = item;
+                });
+
+                this.viewDisabled = true;
+
+                this.option.series = [];
+                this.kmRangeCoordMap = this.planConvert.convertStationsToMap(stations);
+                this.pushModels(this.option.series, [this.planConvert.initializeYaxis(this.stations)]);
+                this.pushModels(this.option.series, this.planConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { 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);
+            }
+        },
+        async loadInitData() {
+            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();
+                    }
+                    this.option.title.text = this.mapName;
+                    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 => {
+                this.mapName = `${resp.data.name} (${name})`;
+                this.myChart.setOption({
+                    title: {
+                        text: this.mapName,
+                        left: 'center', // 居中对齐
+                        top: '10px'
+                    }
+                });
+            });
+        },
+        clearCanvas() {
+            this.option.series = [];
+            this.option.title.text = '';
+            if (this.myChart) {
+                this.myChart.clear();
+            }
+            this.myChart.setOption(this.option);
+        },
+        xAxisPointFormat(params) {
+            return timeFormat(params.value);
+        },
+        yAxisPointFormat(params) {
+            return this.planConvert.computedFormatYAxis(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.planConvert.TranslationTime; time < 3600 * 24 + this.planConvert.TranslationTime; time++) {
+                list.push(time);
+            }
+
+            const startValue = 3600 * 6;
+            const offsetTime = 3600 * 1;
+
+            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.planConvert).length) {
+                this.pushModels(this.option.series, [this.planConvert.initializeYaxis(this.stations)]);
+                this.option.yAxis.min = this.planConvert.computedYaxisMinValue(this.stations);
+                this.option.yAxis.max = this.planConvert.computedYaxisMaxValue(this.stations);
+            }
+        },
+        axisTooltip(param) {
+            let data = '';
+            const arr = [];
+            param.forEach(item => {
+                const station = this.$store.getters['map/getDeviceByCode'](item.data[2]);
+                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.planConvert.TranslationTime)}<br>`,
+                            `${this.$t('planMonitor.serverTrainNum')}: ${item.seriesName}${item.data[3]}`,
+                            `<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.planConvert.TranslationTime)}<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/setDraftSelected', 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: calc(100% - 45px);
+        position: relative;
+        margin-top: 45px;
+
+        .left {
+            height: 100%;
+			width: 100%;
+            float: left;
+        }
+
+        .position {
+            position: absolute;
+			top: 0px;
+			right: 50px;
+			width: 220px;
+			height: calc(100% - 45px);
+        }
+        .data_table_box{
+            height: 50%;
+        }
+    }
+</style>

src/views/planMonitor/newEditTool/statusBar.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="PlanStatusBar">
+    <ul class="ul-box">
+      <div v-if="isNotUser" class="li_plan" @click="showTrain">{{ $t('planMonitor.serviceAndTripNumber') }}</div>
+    </ul>
+    <ul class="ul-box">
+      <div v-if="isNotUser" class="li_plan" @click="handleAddPlanningTrain">{{ $t('planMonitor.addPlan') }}</div>
+      <div v-if="isNotUser" class="li_plan" @click="handleDeletePlanningTrain">{{ $t('planMonitor.deletePlan') }}</div>
+      <div v-if="isNotUser" class="li_plan" @click="handleDuplicateTrain">{{ $t('planMonitor.duplicatePlan') }}</div>
+      <div v-if="isNotUser" class="li_plan" @click="handleAddTask">{{ $t('planMonitor.addTask') }}</div>
+      <div v-if="isNotUser" class="li_plan" @click="handleDeleteTask">{{ $t('planMonitor.deleteTask') }}</div>
+      <div v-if="isNotUser" class="li_plan" @click="handleModifyingTask">{{ $t('planMonitor.modifyTask') }}</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 } 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() {
+            if (this.loadRunPlanId) {
+                this.$emit('dispatchDialog', { name: 'addPlanningTrain', 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'));
+            }
+        },
+        // 复制计划
+        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 });
+            } 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 });
+            } 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 });
+            } else {
+                this.$messageBox(this.$t('tip.selectATrain'));
+            }
+        },
+
+        // 校验运行图
+        handlePlanEffectiveCheck() {
+            if (this.loadRunPlanId) {
+                if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
+                    this.$messageBox(' 功能待完善');
+                } else {
+                    planEffectiveCheck(this.loadRunPlanId).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 });
+        //                 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: calc(100% - 45px);
+		top: 45px;
+		right: 0px;
+		background: #293c55;
+		padding-top: 10px;
+
+    }
+	.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>

src/views/planMonitor/newEditTool/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>

src/views/planMonitor/newEditTool/userindex.vue

@@ -0,0 +1,485 @@
+<template>
+  <div class="plan-tool" style="width: 100%; height: 100%;">
+    <menu-bar ref="menuBar" :plan-convert="PlanConvert" @dispatchDialog="dispatchDialog" />
+    <schedule
+      ref="schedule"
+      :line-code="lineCode"
+      :plan-convert="PlanConvert"
+      :max-height="height"
+      :max-width="width"
+    />
+    <status-bar ref="statusBar" @dispatchDialog="dispatchDialog" @showTrain="showTrain" />
+
+    <!-- <open-run-plan ref="openRunPlan" :skin-code="skinCode" @dispatchDialog="dispatchDialog" /> -->
+    <!-- <create-empty-plan ref="createEmptyPlan" :plan-convert="PlanConvert" @dispatchOperate="dispatchOperate" @dispatchDialog="dispatchDialog" /> -->
+    <parameter ref="parameter" />
+    <off-line ref="offLine" @handleConfirm="handleConfirm" @dispatchDialog="dispatchDialog" />
+    <!-- <add-planning-train ref="addPlanningTrain" @dispatchDialog="dispatchDialog" /> -->
+    <!-- <edit-planning-train
+      ref="editPlanningTrain"
+      @dispatchDialog="dispatchDialog"
+      @dispatchOperate="dispatchOperate"
+    /> -->
+    <!-- <edit-smooth-run-time ref="editSmoothRunTime" @dispatchDialog="dispatchDialog" /> -->
+    <!-- <add-smooth-run-time ref="addSmoothRunTime" @dispatchDialog="dispatchDialog" /> -->
+    <duplicate-train ref="duplicateTrain" @dispatchDialog="dispatchDialog" @dispatchOperate="dispatchOperate" />
+    <!-- <modifying-routing ref="modifyingRouting" @dispatchDialog="dispatchDialog" /> -->
+    <!-- <modifying-begin-time ref="modifyingBeginTime" /> -->
+
+    <systerm-out ref="systermOut" />
+    <!-- <add-task ref="addTask" @dispatchOperate="dispatchOperate" /> -->
+    <!-- <delete-task ref="deleteTask" @dispatchOperate="dispatchOperate" /> -->
+    <!-- <modifying-task ref="modifyingTask" @dispatchOperate="dispatchOperate" /> -->
+
+    <!-- <edit-station-between-time ref="editStationBetweenTime" /> -->
+
+    <!-- <modifying-station-interval-time ref="modifyingStationIntervalTime" /> -->
+  </div>
+</template>
+
+<script>
+// import TitleBar from './titleBar';
+import MenuBar from './menuBar';
+import StatusBar from './statusBar';
+import Schedule from './schedule';
+// import OpenRunPlan from './menus/openRunPlan';
+// import CreateEmptyPlan from './menus/createEmptyPlan';
+import Parameter from './menus/parameter/index';
+import OffLine from './menus/offLine';
+// import AddPlanningTrain from './menus/addPlanningTrain';
+// import EditPlanningTrain from './menus/editPlanningTrain';
+import DuplicateTrain from './menus/duplicateTrain';
+import SystermOut from './menus/systermOut';
+// import AddTask from './menus/addTask';
+// import DeleteTask from './menus/deleteTask';
+// import ModifyingTask from './menus/modifyingTask';
+// import ModifyingRouting from './menus/modifyingRouting';
+// import ModifyingBeginTime from './menus/modifyingBeginTime';
+// import EditStationBetweenTime from './menus/editStationBetweenTime';
+// import AddSmoothRunTime from './menus/addSmoothRunTime';
+// import EditSmoothRunTime from './menus/editSmoothRunTime';
+// import ModifyingStationIntervalTime from './menus/modifyingStationIntervalTime';
+import { deletePlanService } from '@/api/runplan';
+
+export default {
+    name: 'Menus',
+    components: {
+        MenuBar,
+        StatusBar,
+        Schedule,
+        // OpenRunPlan,
+        // CreateEmptyPlan,
+        Parameter,
+        OffLine,
+        // AddPlanningTrain,
+        // EditPlanningTrain,
+        DuplicateTrain,
+        SystermOut
+        // AddTask,
+        // DeleteTask,
+        // ModifyingTask,
+        // ModifyingRouting,
+        // ModifyingBeginTime,
+        // EditStationBetweenTime,
+        // AddSmoothRunTime,
+        // EditSmoothRunTime,
+        // ModifyingStationIntervalTime
+    },
+    data() {
+        return {
+            PlanConvert: {}
+        };
+    },
+    computed: {
+        lineCode() {
+            return this.$route.query.lineCode || '02';
+        },
+        width() {
+            return this.$store.state.app.width;
+        },
+        height() {
+            return this.$store.state.app.height;
+        }
+    },
+    created() {
+        this.PlanConvert = this.$theme.loadPlanConvert(this.lineCode);
+    },
+    methods: {
+        setPosition() {
+            this.$nextTick(() => {
+                this.$refs.schedule.setPosition();
+            });
+        },
+        dispatchDialog(dialogObj) {
+            this.$nextTick(() => {
+                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);
+                }
+            });
+        },
+        handleConfirm(params) {
+            if (params.operate == 'AddPlanningTrain') {
+                // 添加计划
+                this.$refs.addPlanningTrain.handleConfirm();
+            } else if (params.operate == 'DeletePlanningTrain') {
+                // 删除计划
+                const model = {
+                    planId: this.$route.query.planId,
+                    serviceNumber: params.serviceNumber
+                };
+                deletePlanService(model).then(resp => {
+                    this.$message.success(this.$t('tip.deletePlanSuccessfully'));
+                    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();
+            }
+        }
+    }
+};
+</script>
+
+<style>
+    .plan-tool {
+        position: absolute;
+    }
+
+    .plan-tool .pop-menu {
+        background: #F0F0F0;
+    }
+
+    .plan-tool .pop-menu span {
+        color: #000;
+    }
+
+    .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;
+    }
+
+    /* .planEdit__tool .el-dialog {
+        overflow: hidden !important;
+        background: rgba(202, 221, 253, 0.88);;
+        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
+        border: 2px solid #727375;
+        border-radius: 4px;
+        color: #000;
+        font-size: 14px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__header {
+        height: 30px;
+        padding: 5px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__footer {
+        background: #ECE9D8;
+        opacity: 1;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__body {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        margin: 0px 3px 3px 3px;
+        border: 2px solid rgba(120, 121, 123, 0.5);
+        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
+        color: #000;
+        background: #ECE9D8;
+        opacity: 1;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__title {
+        font-size: 16px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn {
+        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;
+        top: 0px;
+        right: 3px;
+        line-height: 26px;
+        width: 26px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn .el-icon-close:before {
+        font-size: 16px;
+    }
+
+    .planEdit__tool .el-dialog .el-dialog__headerbtn .el-dialog__close {
+        color: #fff;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--top {
+        border: 2px outset #FEFEFD;
+        border-radius: 4px;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs__item {
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        color: #000 !important;
+        border-right: 2px outset #fff;
+        padding-left: 10px !important;
+        padding-right: 10px !important;
+    }
+
+    .planEdit__tool .el-dialog .el-tab-pane {
+        margin: 10px !important;
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+        border-bottom: none
+    }
+
+    .planEdit__tool .el-dialog .el-tabs--card>.el-tabs__header .el-tabs__item:not(.is-active) {
+        border-bottom: 2px inset #fff
+    }
+
+    .planEdit__tool .el-dialog .el-form {
+        background: #ECE9D8 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-card {
+        background: #ECE9D8 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-button {
+        height: 32px;
+        line-height: 32px;
+        padding: 0px;
+        width: 80px;
+        border: 2px outset #E2E2E2;
+        border-radius: 0px !important;
+        color: #000;
+        background: #ECE9D8;
+    }
+
+    .planEdit__tool .el-dialog .expand {
+        width: 120px;
+    }
+
+    .planEdit__tool .el-dialog .el-button:focus span {
+        border: 1px dashed gray;
+    }
+
+    .planEdit__tool .el-dialog .el-button:active {
+        border: 2px inset #E2E2E2;
+    }
+
+    .planEdit__tool .el-dialog .el-button:disabled {
+        border: 2px inset #E2E2E2;
+    }
+
+    .planEdit__tool .el-dialog .el-button:disabled span {
+        border: 0px;
+    }
+
+    .planEdit__tool .el-dialog .button-group {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .el-input {
+        border: 2px inset #E9E9E9;
+    }
+
+    .planEdit__tool .el-dialog .el-input .el-input__inner {
+        color: #000;
+        background: #fff !important;
+        border: 0px;
+        border-radius: 0px !important;
+        box-sizing: border-box;
+    }
+
+    .planEdit__tool .el-dialog .el-input.is-disabled .el-input__inner {
+        background: #F0F0F0 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea {
+        border: 2px inset #E9E9E9;
+        border-radius: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea .el-textarea__inner {
+        color: #000;
+        background: #fff !important;
+        border: 0px;
+        border-radius: 0px !important;
+        box-sizing: border-box;
+    }
+
+    .planEdit__tool .el-dialog .el-textarea.is-disabled .el-textarea__inner {
+        background: #F0F0F0 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table {
+        border: 2px inset #E9E9E9;
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table .cell {
+        line-height: unset !important;
+    }
+
+    .planEdit__tool .el-dialog .el-table th.is-leaf {
+        background: #ECE9D8 !important;
+        border-right: 1px solid #BDBDBD !important;
+        border-bottom: 1px solid #BDBDBD !important;
+        color: #000 !important;
+        height: 20px !important;
+        padding: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-table tr td {
+        height: 20px !important;
+        padding: 0px;
+    }
+
+    .planEdit__tool .el-dialog .el-table .el-table__empty-text {
+        top: 15px !important;
+    }
+
+    .planEdit__tool .el-dialog .current-row>td {
+        background: #316AC5 !important;
+        color: #fff !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__inner {
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__label {
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
+        background: #E6E6E6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
+        color: #C5C9CC !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
+        background: #fff !important;
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        position: absolute;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+        content: "";
+        border: 1px solid #000;
+        border-left: 0;
+        border-top: 0;
+        height: 7px;
+        left: 4px;
+        top: 1px;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__inner {
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__label {
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__input.is-checked .el-radio__inner {
+        background: #fff !important;
+        border: 1px inset #dcdfe6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio__input.is-checked .el-radio__inner::after {
+        width: 4px;
+        height: 4px;
+        border-radius: 100%;
+        background-color: #000 !important;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+    }
+
+    .planEdit__tool .el-dialog .el-radio.is-disabled .el-radio__inner {
+        background: #E6E6E6 !important;
+    }
+
+    .planEdit__tool .el-dialog .el-radio.is-disabled .el-radio__label {
+        color: #C5C9CC !important;
+    }
+
+    .planEdit__tool .el-dialog .base-label {
+        background: rgba(0, 0, 0, x);
+        position: relative;
+        left: -15px;
+        top: -18px;
+    }
+
+    .planEdit__tool .el-dialog .el-form-item label {
+        font-weight: normal !important;
+        color: #000 !important;
+    }
+
+    .planEdit__tool .el-dialog .context {
+        height: 100px;
+        border: 2px inset #E2E2E2;
+        overflow-y: scroll;
+    }
+
+    .planEdit__tool .el-dialog .table {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .notice {
+        margin-left: 62px;
+        line-height: 30px;
+    }
+
+    .planEdit__tool .el-dialog .button-group {
+        margin-top: 10px;
+    }
+
+    .planEdit__tool .el-dialog .el-tree__empty-block {
+        background: #E9E9E9 !important;
+        color: #000 !important;
+    } */
+</style>