diff --git a/src/views/newMap/jlmapNew/index.vue b/src/views/newMap/jlmapNew/index.vue
index 62fe6abf4..9a29b6230 100644
--- a/src/views/newMap/jlmapNew/index.vue
+++ b/src/views/newMap/jlmapNew/index.vue
@@ -383,7 +383,7 @@ export default {
 
             this.$store.dispatch('training/emitTipFresh');
         },
-        unConnect3d(code){
+        unConnect3d(code) {
 
         },
         // 点击选择事件
@@ -391,52 +391,49 @@ export default {
             const path = window.location.href;
             if (path.includes('/practiceDisplay')) {
 
-
-
-
                 if (em.deviceType == 'StationStand') {
-                  runPassenger(this.$route.query.group,em.deviceCode).then(netdata => {
-                    console.log(netdata);
-                    if(netdata.data){
-                      const routeData = this.$router.resolve({
-                          path:'/jlmap3d/trafficplan',
-                          query:{
-                              mapid:this.$route.query.mapId,
-                              group:this.$route.query.group,
-                              project: this.$route.query.project,
-                              noPreLogout: true,
-                              lineCode:this.$route.query.lineCode,
-                              deviceCode:em.deviceCode
-                          }
-                      });
-                      window.open(routeData.href, '_blank', 'noopener noreferrer');
-                    }else{
+                    runPassenger(this.$route.query.group, em.deviceCode).then(netdata => {
+                        console.log(netdata);
+                        if (netdata.data) {
+                            const routeData = this.$router.resolve({
+                                path:'/jlmap3d/trafficplan',
+                                query:{
+                                    mapid:this.$route.query.mapId,
+                                    group:this.$route.query.group,
+                                    project: this.$route.query.project,
+                                    noPreLogout: true,
+                                    lineCode:this.$route.query.lineCode,
+                                    deviceCode:em.deviceCode
+                                }
+                            });
+                            window.open(routeData.href, '_blank', 'noopener noreferrer');
+                        } else {
 
-                    }
-                  });
+                        }
+                    });
 
                 }
                 if (em.deviceType == 'Train') {
 
-                runPassenger(this.$route.query.group,em.deviceCode).then(netdata => {
-                  console.log(netdata);
-                  if(netdata.data){
-                    const routeData = this.$router.resolve({
-                        path:'/jlmap3d/traffictrain',
-                        query:{
-                            mapid:this.$route.query.mapId,
-                            group:this.$route.query.group,
-                            project: this.$route.query.project,
-                            noPreLogout: true,
-                            lineCode:this.$route.query.lineCode,
-                            deviceCode:em.deviceCode
+                    runPassenger(this.$route.query.group, em.deviceCode).then(netdata => {
+                        console.log(netdata);
+                        if (netdata.data) {
+                            const routeData = this.$router.resolve({
+                                path:'/jlmap3d/traffictrain',
+                                query:{
+                                    mapid:this.$route.query.mapId,
+                                    group:this.$route.query.group,
+                                    project: this.$route.query.project,
+                                    noPreLogout: true,
+                                    lineCode:this.$route.query.lineCode,
+                                    deviceCode:em.deviceCode
+                                }
+                            });
+                            window.open(routeData.href, '_blank', 'noopener noreferrer');
+                        } else {
+
                         }
                     });
-                    window.open(routeData.href, '_blank', 'noopener noreferrer');
-                  }else{
-
-                  }
-                });
 
                 }
             } else {
@@ -559,6 +556,7 @@ export default {
         -ms-user-select: none;
         user-select: none;
 		background: #000;
+		float: left;
     }
     .title{
         text-align: right;
diff --git a/src/views/newMap/newMapdraft/dataRelation/routingoperate/preview.vue b/src/views/newMap/newMapdraft/dataRelation/routingoperate/preview.vue
index 091d3b7c8..6e4a5d0e3 100644
--- a/src/views/newMap/newMapdraft/dataRelation/routingoperate/preview.vue
+++ b/src/views/newMap/newMapdraft/dataRelation/routingoperate/preview.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     v-dialogDrag
-    :title="mapInfo.name + ' / ' + name + ' / ' + title"
+    :title="title"
     :visible.sync="show"
     width="30%"
     :before-close="doClose"
@@ -32,14 +32,6 @@
 <script>
 export default {
     name: 'DictionaryDetailEdit',
-    props: {
-        mapInfo: {
-            type: Object,
-            default() {
-                return null;
-            }
-        }
-    },
     data() {
         return {
             show: false,
diff --git a/src/views/newMap/newMapdraft/dataRelation/routingoperate/route.vue b/src/views/newMap/newMapdraft/dataRelation/routingoperate/route.vue
index 01aef7007..7b0e82301 100644
--- a/src/views/newMap/newMapdraft/dataRelation/routingoperate/route.vue
+++ b/src/views/newMap/newMapdraft/dataRelation/routingoperate/route.vue
@@ -102,7 +102,6 @@
                   <span>{{ formatName(scope.row.sectionCode) }}</span>
                 </template>
               </el-table-column>
-              <!-- fixed="right"  -->
               <el-table-column :label="$t('map.operation')" width="50">
                 <template slot-scope="scope">
                   <el-button
@@ -173,7 +172,6 @@
 import { mapGetters } from 'vuex';
 import { setUID } from '@/jmapNew/utils/Uid';
 import { addRoutingData, updateRoutingData, gernateRoutingSection } from '@/api/jmap/mapdraft';
-// import { ViewMode } from '@/scripts/ConstDic';
 import { formatName } from '@/utils/runPlan';
 import Sortable from 'sortablejs';
 
@@ -195,7 +193,6 @@ export default {
     },
     data() {
         return {
-            // ViewMode: ViewMode,
             field: '',
             allowSelect:false,
             isStartSelected:false,
@@ -225,9 +222,6 @@ export default {
                 name: [
                     { required: true, message: '请输入交路名称', trigger: 'change' }
                 ],
-                // destinationCode: [
-                //     { required: true, message: '请输入目的地码', trigger: 'change' }
-                // ],
                 startStationCode: [
                     { required: true, message: '请选择起始站', trigger: 'change' }
                 ],
@@ -306,8 +300,6 @@ export default {
     mounted() {
         this.rowDrop();
     },
-    beforeDestroy() {
-    },
     methods: {
         // 行拖拽
         rowDrop() {
diff --git a/src/views/planMonitor/editTool/index.vue b/src/views/planMonitor/editTool/index.vue
index a4396029b..d9849c6c5 100644
--- a/src/views/planMonitor/editTool/index.vue
+++ b/src/views/planMonitor/editTool/index.vue
@@ -17,12 +17,7 @@
       :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" />
-
-    <!-- <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" :load-run-plan-id="loadRunPlanId" @dispatchDialog="dispatchDialog" />
@@ -84,8 +79,6 @@ export default {
         MenuBar,
         StatusBar,
         Schedule,
-        // OpenRunPlan,
-        // CreateEmptyPlan,
         PopulatingGenericData,
         Parameter,
         OffLine,
diff --git a/src/views/planMonitor/editTool/menuBar.vue b/src/views/planMonitor/editTool/menuBar.vue
index c30dca8a4..fb5065712 100644
--- a/src/views/planMonitor/editTool/menuBar.vue
+++ b/src/views/planMonitor/editTool/menuBar.vue
@@ -110,10 +110,12 @@
         <span class="nav-li-text">{{ dispaly?'关闭':$t('global.back') }}</span>
       </div>
     </div>
+    <route-map ref="routeMap" />
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import routeMap from './routingoperate/routeMap';
 import { planEffectiveCheck, runPlanNotify } from '@/api/runplan';
 import { launchFullscreen } from '@/utils/screen';
 import { UrlConfig } from '@/scripts/ConstDic';
@@ -122,6 +124,7 @@ import { publishRunPlan, deleteRunPlan } from '@/api/designPlatform';
 
 export default {
     name: 'PlanMenuBar',
+    components: { routeMap },
     props: {
         planConvert: {
             type: Object,
@@ -158,7 +161,6 @@ export default {
                         {
                             title: this.$t('planMonitor.modifyStationIntervalTime'),
                             click: this.handleModifyingStationIntervalTime
-                            // disabledCallback: () => { return !this.$route.query.planId },
                         },
                         {
                             title: '填充通用数据',
@@ -179,10 +181,6 @@ export default {
                 {
                     title: this.$t('planMonitor.tool'),
                     children: [
-                        // {
-                        //     title: '自动生成',
-                        //     click: this.handleAutoGenerate,
-                        // },
                         {
                             title: this.$t('planMonitor.validityCheck'),
                             click: this.handlePlanEffectiveCheck
@@ -190,6 +188,18 @@ export default {
                         {
                             title: this.$t('planMonitor.testRunningDiagram'),
                             click: this.handleTestRunPlan
+                        },
+                        {
+                            title: '交路设置',
+                            click: this.handleRoutingSettings
+                        },
+                        {
+                            title: '停站时间',
+                            click: this.handleDwellTime
+                        },
+                        {
+                            title: '运行等级',
+                            click: this.handleRoutingLevel
                         }
                     ]
                 },
@@ -215,10 +225,6 @@ export default {
                             title: this.$t('planMonitor.deletePlan'),
                             click: this.handleDeletePlanningTrain
                         },
-                        // {
-                        //     title: '修改计划',
-                        //     click: this.handleEditPlanningTrain,
-                        // },
                         {
                             title: this.$t('planMonitor.duplicatePlan'),
                             click: this.handleDuplicateTrain
@@ -436,6 +442,18 @@ export default {
         handleAutoGenerate() {
             this.$emit('dispatchDialog', { name: 'editSmoothRunTime', params: {} });
         },
+        // 交路设置
+        handleRoutingSettings() {
+            this.$refs.routeMap.doShow();
+        },
+        // 停站时间
+        handleDwellTime() {
+            console.log('停站时间');
+        },
+        // 运行等级
+        handleRoutingLevel() {
+            console.log('运行等级');
+        },
         // 校验运行图
         handlePlanEffectiveCheck() {
             const planId = this.$route.query.planId;
diff --git a/src/views/planMonitor/editTool/routingoperate/preview.vue b/src/views/planMonitor/editTool/routingoperate/preview.vue
new file mode 100644
index 000000000..6e4a5d0e3
--- /dev/null
+++ b/src/views/planMonitor/editTool/routingoperate/preview.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    :title="title"
+    :visible.sync="show"
+    width="30%"
+    :before-close="doClose"
+    center
+    append-to-body
+  >
+    <el-table :data="data" border style="width: 100%">
+      <template v-for="(item, index) in form">
+        <el-table-column :key="index" :label="item.label">
+          <template slot-scope="scope">
+            <template v-if="item.type === 'select'">
+              <el-tooltip effect="dark" :content="item.options[scope.row[item.prop]]" placement="top">
+                <span>{{ item.options[scope.row[item.prop]] }}</span>
+              </el-tooltip>
+            </template>
+            <template v-if="item.type === 'text'">
+              <el-tooltip effect="dark" :content="scope.row[item.prop]" placement="top">
+                <span>{{ scope.row[item.prop] }}</span>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'DictionaryDetailEdit',
+    data() {
+        return {
+            show: false,
+            title: '',
+            name: '',
+            form: [],
+            data: []
+        };
+    },
+    methods: {
+        doShow(fieldList, dataList) {
+            if (fieldList.model) {
+                const items = fieldList.model.items;
+                if (items) {
+                    this.form = items;
+                    this.name = fieldList.name;
+                    this.data = dataList;
+                    this.title = fieldList.title;
+                }
+                this.show = true;
+            }
+        },
+        doClose(done) {
+            this.show = false;
+        }
+    }
+};
+</script>
diff --git a/src/views/planMonitor/editTool/routingoperate/routeMap.vue b/src/views/planMonitor/editTool/routingoperate/routeMap.vue
new file mode 100644
index 000000000..889b36b85
--- /dev/null
+++ b/src/views/planMonitor/editTool/routingoperate/routeMap.vue
@@ -0,0 +1,742 @@
+<template>
+  <el-dialog title="交路配置" :visible.sync="dialogShow" custom-class="content-route" width="100%" :fullscreen="true" top="0px" :before-close="close" :z-index="2000" :append-to-body="true">
+    <div class="content-box">
+      <jlmap-visual ref="jlmapVisual" @onMenu="onContextmenu" @onSelect="clickEvent" />
+      <div style="width: 29%;float: right;" :style="{height: $store.state.app.height-54+'px' }">
+        <el-scrollbar wrap-class="scrollbar-wrapper">
+          <div class="clearfix" style="padding-right: 20px;">
+            <el-button type="text" class="mapEdit_box" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
+            <el-button type="text" class="mapEdit_box" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
+          </div>
+          <el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
+            <div class="definition">
+              <el-form-item :label="$t('map.routingName')" prop="name">
+                <el-input v-model="addModel.name" />
+              </el-form-item>
+              <el-form-item :label="$t('map.startStationCodeColon')" prop="startStationCode">
+                <el-select v-model="addModel.startStationCode" clearable :filterable="true" @change="changeStartStation">
+                  <el-option
+                    v-for="item in filterStationList"
+                    :key="item.code"
+                    :label="item.name"
+                    :value="item.code"
+                  />
+                </el-select>
+                <el-button
+                  :type=" field === 'startStationCode' ? 'danger' : 'primary'"
+                  @click="hover('startStationCode')"
+                >{{ $t('map.activate') }}</el-button>
+              </el-form-item>
+              <el-form-item :label="$t('map.startSectionColon')" prop="startSectionCode">
+                <el-select v-model="addModel.startSectionCode" clearable :filterable="true" :disabled="editShow" @change="changeStartSection">
+                  <el-option
+                    v-for="item in filterSectionList"
+                    :key="item.code"
+                    :label="item.name"
+                    :value="item.code"
+                  />
+                </el-select>
+                <el-button
+                  :disabled="editShow"
+                  :type=" field === 'startSectionCode' ? 'danger' : 'primary'"
+                  @click="hover('startSectionCode')"
+                >{{ $t('map.activate') }}</el-button>
+              </el-form-item>
+              <el-form-item :label="$t('map.endStationColon')" prop="endStationCode">
+                <el-select v-model="addModel.endStationCode" clearable :filterable="true" :disabled="!isStartSelected" @change="changeEndStation">
+                  <el-option
+                    v-for="item in filterStationList"
+                    :key="item.code"
+                    :label="item.name"
+                    :value="item.code"
+                  />
+                </el-select>
+                <el-button
+                  :disabled="!isStartSelected"
+                  :type=" field === 'endStationCode' ? 'danger' : 'primary'"
+                  @click="hover('endStationCode')"
+                >{{ $t('map.activate') }}</el-button>
+              </el-form-item>
+              <el-form-item :label="$t('map.endSectionColon')" prop="endSectionCode">
+                <el-select v-model="addModel.endSectionCode" clearable :filterable="true" :disabled="editShow || !isStartSelected" @change="changeEndSection">
+                  <el-option
+                    v-for="item in filterSectionList"
+                    :key="item.code"
+                    :label="item.name"
+                    :value="item.code"
+                  />
+                </el-select>
+                <el-button
+                  :disabled="editShow || !isStartSelected"
+                  :type=" field === 'endSectionCode' ? 'danger' : 'primary'"
+                  @click="hover('endSectionCode')"
+                >{{ $t('map.activate') }}</el-button>
+              </el-form-item>
+              <el-form-item :label="$t('map.destinationCode')" prop="destinationCode" :disabled="editShow">
+                <el-input v-model="addModel.destinationCode" />
+              </el-form-item>
+              <el-form-item :label="$t('map.routingDirection')" prop="directionCode">
+                <el-select v-model="addModel.right" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+                  <el-option
+                    v-for="item in DirectionCodeList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="!editShow" label="是否生成回路" prop="withLoop">
+                <el-checkbox v-model="addModel.withLoop" />
+              </el-form-item>
+              <el-form-item :label="$t('map.remarksColon')" prop="description">
+                <el-input v-model="addModel.description" type="textarea" :rows="4" :placeholder="$t('map.pleaseSelect')" />
+              </el-form-item>
+              <el-form-item :label="$t('map.trafficSegmentData')" prop="parkSectionCodeList">
+                <el-button type="primary" size="small" :loading="generating" style="margin-bottom:10px" @click.native.prevent="generateParkSection">生成交路区段</el-button>
+                <el-table
+                  :data="addModel.parkSectionCodeList"
+                  border
+                  style="width: 97%"
+                  class="el-parkSectionCode-table"
+                >
+                  <el-table-column prop="sectionCode" :label="$t('map.stationName')">
+                    <template slot-scope="scope">
+                      <span>{{ formatName(scope.row.stationCode) }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="sectionCode" :label="$t('map.sectionName')">
+                    <template slot-scope="scope">
+                      <span>{{ formatName(scope.row.sectionCode) }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column :label="$t('map.operation')" width="50">
+                    <template slot-scope="scope">
+                      <el-button
+                        v-show="scope.$index!=0&&scope.$index!=addModel.parkSectionCodeList.length-1"
+                        type="text"
+                        size="small"
+                        @click.native.prevent="deleteSection(addModel.parkSectionCodeList, scope.$index)"
+                      >
+                        {{ $t('map.remove') }}
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div style="margin-top:10px;">
+                  <span>车站:</span>
+                  <el-select v-model="stationCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+                    <el-option
+                      v-for="item in filterStationList"
+                      :key="item.code"
+                      :label="`${item.name}(${item.code})`"
+                      :value="item.code"
+                    />
+                  </el-select>
+                  <el-button
+                    :disabled="!allowSelect"
+                    :type="field === 'routingStation' ? 'danger' : 'primary'"
+                    @click="hover('routingStation')"
+                  >{{ $t('map.activate') }}</el-button>
+                </div>
+                <div style="margin-top:10px;">
+                  <span>区段:</span>
+                  <el-select v-model="sectionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+                    <el-option
+                      v-for="item in sectionList"
+                      :key="item.code"
+                      :label="`${item.name}(${item.code})`"
+                      :value="item.code"
+                    />
+                  </el-select>
+                  <el-button
+                    :type=" field === 'routingSection' ? 'danger' : 'primary'"
+                    :disabled="!allowSelect"
+                    @click="hover('routingSection')"
+                  >{{ $t('map.activate') }}</el-button>
+                  <el-button
+                    type="primary"
+                    :disabled="!allowSelect"
+                    @click="pushSection({stationCode: stationCode, sectionCode: sectionCode},'center')"
+                  >
+                    {{ $t('map.add') }}
+                  </el-button>
+                </div>
+              </el-form-item>
+              <el-form-item>
+                <el-button-group>
+                  <el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
+                  </el-button>
+                  <el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
+                  </el-button>
+                </el-button-group>
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+      </div>
+    </div>
+    <route-operate ref="routeOperate" @routingSelected="routingSelected" />
+  </el-dialog>
+</template>
+
+<script>
+import JlmapVisual from '@/views/newMap/jlmapNew/index';
+import { loadMapDataById } from '@/utils/loaddata';
+import { EventBus } from '@/scripts/event-bus';
+
+import RouteOperate from './routeOperate';
+
+import { mapGetters } from 'vuex';
+import { setUID } from '@/jmapNew/utils/Uid';
+import { addRoutingData, updateRoutingData, gernateRoutingSection } from '@/api/jmap/mapdraft';
+import { formatName } from '@/utils/runPlan';
+import Sortable from 'sortablejs';
+
+export default {
+    name: 'RouteMap',
+    components: {
+        JlmapVisual,
+        RouteOperate
+    },
+    props:{
+    },
+    data() {
+        return {
+            dialogShow: false,
+            oldDevice: null,
+            field: '',
+            allowSelect:false,
+            isStartSelected:false,
+            stationCode: '',
+            sectionCode: '',
+            isSave: true,
+            loading: false,
+            generating:false,
+            oldsection:[],
+            DirectionCodeList: [{label: '右行', value: true}, {label: '左行', value: false}],
+            addModel: {
+                name: '',
+                mapId: '',
+                code: '',
+                withLoop:false,
+                right: true,
+                destinationCode: '',
+                startStationCode: '',
+                startSectionCode: '',
+                endStationCode: '',
+                endSectionCode: '',
+                description: '',
+                parkSectionCodeList: []
+            },
+            editShow: false,
+            rules: {
+                name: [
+                    { required: true, message: '请输入交路名称', trigger: 'change' }
+                ],
+                startStationCode: [
+                    { required: true, message: '请选择起始站', trigger: 'change' }
+                ],
+                startSectionCode: [
+                    { required: true, message: '请选择起始区段', trigger: 'change' }
+                ],
+                endStationCode: [
+                    { required: true, message: '请选择终到站', trigger: 'change' }
+                ],
+                endSectionCode: [
+                    { required: true, message: '请选择终到区段', trigger: 'change' }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'stationList'
+        ]),
+        filterSectionList() {
+            if (this.sectionList) {
+                return this.sectionList.filter(elem => { return elem.standTrack || elem.reentryTrack || elem.transferTrack; });
+            } else {
+                return [];
+            }
+        },
+        filterStationList() {
+            if (this.stationList) {
+                return this.stationList.filter(elem => { return true; });
+            } else {
+                return [];
+            }
+        },
+        routeName: {
+            get() {
+                var name = '';
+                if (this.isSave) {
+                    let begStation = ''; let endStation = '';
+                    let begSection = ''; let endSection = '';
+                    if (this.stationList) {
+                        this.stationList.forEach(elem => {
+                            if (elem.code === this.addModel.startStationCode) begStation = elem.name;
+                            if (elem.code === this.addModel.endStationCode) endStation = elem.name;
+                        });
+                    }
+                    if (this.sectionList) {
+                        this.sectionList.forEach(elem => {
+                            if (elem.code === this.addModel.startSectionCode) begSection = '(' + elem.name + ')';
+                            if (elem.code === this.addModel.endSectionCode) endSection = '(' + elem.name + ')';
+                        });
+                    }
+                    name = begStation + begSection + '-' + endStation + endSection;
+                }
+                return name;
+            }
+
+        }
+    },
+    watch: {
+        mapInfo(val) {
+            if (val) {
+                this.addModel.mapId = val.id;
+            }
+        },
+        'addModel.parkSectionCodeList':function(val, old) {
+            this.changeSectionSelected(val, true);
+        },
+        '$store.state.app.width': function(val) {
+            this.setWindowSize();
+        },
+        routeName(val, old) {
+            if (val) {
+                this.addModel.name = val;
+            }
+        }
+    },
+    mounted() {
+        this.rowDrop();
+    },
+    methods: {
+        async doShow() {
+            this.dialogShow = true;
+            await this.setWindowSize();
+            await this.loadInitPage();
+        },
+        previewRouteEvent() {
+            this.$refs.routeOperate.doShow();
+        },
+        createRouteEvent() {
+            this.clear();
+        },
+        // 获取设备数据
+        getDeviceByEm(em) {
+            var	device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
+            if (device) {
+                device._viewVal = em.val;
+            }
+            return device;
+        },
+        // 高亮设备
+        deviceHighLight(device, flag) {
+            if (device && device.instance && typeof device.instance.drawSelected === 'function' ) {
+                if (device._type === 'Section' && device.type === '04') {
+                    device.relevanceSectionList.forEach(item => {
+                        const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
+                        sectionModel && sectionModel.instance.drawSelected(flag);
+                    });
+                } else if (device._type === 'Section' && device.type === '01' && device.logicSectionCodeList && device.logicSectionCodeList.length) {
+                    device.logicSectionCodeList.forEach(item => {
+                        const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
+                        sectionModel && sectionModel.instance.drawSelected(flag);
+                    });
+                } else {
+                    device.instance.drawSelected(flag);
+                }
+            }
+        },
+        clickEvent(em) {
+            const device = this.getDeviceByEm(em);
+            this.deviceHighLight(this.oldDevice, false);
+            this.deviceHighLight(device, true);
+            this.oldDevice = device;
+            this.setSelected(device);
+        },
+        setWindowSize() {
+            this.$nextTick(() => {
+                const width = this.$store.state.app.width * 0.7;
+                const height = this.$store.state.app.height - 54;
+                this.$store.dispatch('config/resize', { width, height });
+            });
+        },
+        async loadInitPage() {
+            await this.$store.dispatch('training/changeMode', { mode: null });
+            loadMapDataById(this.$route.query.mapId).then(()=>{
+                this.$store.dispatch('training/over');
+                this.$store.dispatch('training/setMapDefaultState');
+                this.$store.dispatch('map/clearJlmapTrainView');
+            });
+        },
+        endViewLoading(isSuccess) {
+            if (!isSuccess) {
+                this.$store.dispatch('map/mapClear');
+            }
+
+            this.$nextTick(() => {
+                EventBus.$emit('viewLoading', false);
+            });
+        },
+        routingSelected(data) {
+            this.editData(data);
+        },
+        // 行拖拽
+        rowDrop() {
+            const that = this;
+            const tbody = document.querySelector('.el-parkSectionCode-table tbody', {filter:'.ignoreDrag'});
+            if (tbody) {
+                Sortable.create(tbody, {
+                    onEnd({ newIndex, oldIndex }) {
+                        const length = that.addModel.parkSectionCodeList.length - 1;
+                        if (newIndex != 0 && oldIndex != 0 && newIndex != length && oldIndex != length) {
+                            that.addModel.parkSectionCodeList.splice(newIndex, 0, that.addModel.parkSectionCodeList.splice(oldIndex, 1)[0]);
+                            const newArray = that.addModel.parkSectionCodeList.slice(0);
+                            that.addModel.parkSectionCodeList = [];
+                            that.$nextTick(function () {
+                                that.addModel.parkSectionCodeList = newArray;
+                            });
+                        } else {
+                            const newArray = that.addModel.parkSectionCodeList.slice(0);
+                            that.addModel.parkSectionCodeList = [];
+                            that.$nextTick(function () {
+                                that.addModel.parkSectionCodeList = newArray;
+                            });
+                        }
+                    }
+                });
+            }
+        },
+        generateParkSection() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.generating = true;
+                    gernateRoutingSection(this.buildModel(setUID('Routing'))).then(resp => {
+                        this.generating = false;
+                        if (resp.data.parkSectionCodeList && resp.data.parkSectionCodeList.length > 2) {
+                            this.addModel.parkSectionCodeList = resp.data.parkSectionCodeList;
+                        }
+                    }).catch((error) => {
+                        this.$messageBox('生成交路区段数据失败: ' + error.message);
+                        this.generating = false;
+                    });
+                }
+            });
+        },
+        editData(data) {
+            this.isSave = false;
+            this.allowSelect = true;
+            this.isStartSelected = true;
+            this.editShow = true;
+            this.addModel = data;
+        },
+        changeStartStation() {
+            this.judgeAllowSelected();
+            this.addStartSectionData(true);
+        },
+        changeStartSection(data) {
+            const section = this.$store.getters['map/getDeviceByCode'](data);
+            if (section.belongStation) {
+                this.addModel.startStationCode = section.belongStation;
+            }
+            this.judgeAllowSelected();
+            this.addStartSectionData(false);
+        },
+        changeEndStation() {
+            this.judgeAllowSelected();
+            this.addEndSectionData(true);
+        },
+        changeEndSection(data) {
+            const section = this.$store.getters['map/getDeviceByCode'](data);
+            if (section.belongStation) {
+                this.addModel.endStationCode = section.belongStation;
+            }
+            this.judgeAllowSelected();
+            this.addEndSectionData(false);
+        },
+        judgeAllowSelected() {
+            if (this.addModel.startStationCode != '' && this.addModel.startSectionCode != '' && this.addModel.endStationCode != '' && this.addModel.endSectionCode != '') {
+                this.allowSelect = true;
+            } else {
+                this.allowSelect = false;
+            }
+        },
+        addStartSectionData(isStation) {
+            if (this.addModel.startStationCode != '' && this.addModel.startSectionCode != '') {
+                this.isStartSelected = true;
+                const result = this.pushSection({stationCode: this.addModel.startStationCode, sectionCode: this.addModel.startSectionCode}, 'top', isStation);
+                return result;
+            }
+            return false;
+        },
+        addEndSectionData(isStation) {
+            if (this.addModel.endStationCode != '' && this.addModel.endSectionCode != '') {
+                const result = this.pushSection({stationCode: this.addModel.endStationCode, sectionCode: this.addModel.endSectionCode}, 'bottom', isStation);
+                return result;
+            }
+            return false;
+        },
+        hover(field) {
+            this.field = field === this.field ? '' : field;
+        },
+        formatName(code) {
+            return formatName(code);
+        },
+        setSelected(selected) {
+            if (selected) {
+                if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'startStationCode'.toUpperCase()) {
+                    this.addModel.startStationCode = selected.code;
+                    this.judgeAllowSelected();
+                    this.addStartSectionData(true);
+                } else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'endStationCode'.toUpperCase()) {
+                    this.addModel.endStationCode = selected.code;
+                    this.judgeAllowSelected();
+                    this.addEndSectionData(true);
+                } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
+                    if (selected.standTrack || selected.reentryTrack || selected.transferTrack) {
+                        if (selected.belongStation) {
+                            this.addModel.startStationCode = selected.belongStation;
+                        }
+                        this.addModel.startSectionCode = selected.code;
+                        this.judgeAllowSelected();
+                        this.addStartSectionData(false);
+                    } else {
+                        // (折返轨/转换轨/站台轨对应的区段)
+                        this.$message.error('请选择正确的起始区段');
+                    }
+                } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
+                    if (selected.standTrack || selected.reentryTrack || selected.transferTrack) {
+                        if (selected.belongStation) {
+                            this.addModel.endStationCode = selected.belongStation;
+                        }
+                        this.addModel.endSectionCode = selected.code;
+                        this.judgeAllowSelected();
+                        this.addEndSectionData(false);
+                        this.addModel.destinationCode = selected.destinationCode || '';
+                    } else {
+                        this.$message.error('请选择正确的终到区段');
+                    }
+                } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() == 'routingSection'.toUpperCase()) {
+                    if (selected.standTrack || selected.reentryTrack || selected.transferTrack) {
+                        this.sectionCode = selected.code;
+                    } else {
+                        this.$message.error('请选择正确的区段');
+                    }
+                } else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() == 'routingStation'.toUpperCase()) {
+                    this.stationCode = selected.code;
+                }
+            }
+        },
+        pushSection(data, type, isStation) {
+            const list = this.addModel.parkSectionCodeList;
+            if (data && data.stationCode && data.sectionCode) {
+                const index = list.findIndex(elem => { return elem.sectionCode == data.sectionCode; });
+                switch (type) {
+                case 'center': {
+                    if (index < 0) {
+                        list.splice(list.length - 1, 0, data);
+                    } else {
+                        this.$messageBox('该区段已经在交路区段中存在');
+                    }
+                    break;
+                }
+                case 'top': {
+                    if (isStation) {
+                        list.splice(0, 1, data);
+                    } else {
+                        if (index < 0) {
+                            list.splice(0, 1, data);
+                        } else {
+                            if (index == list.length - 1 && list.length >= 2) {
+                                this.addModel.startSectionCode = list[0].sectionCode;
+                                this.addModel.startStationCode = list[0].stationCode;
+                                this.$messageBox('起始区段和终到区段不能相同');
+                            } else if (index != list.length - 1 && index != 0) {
+                                this.$messageBox('该区段已经在交路区段中存在');
+                            }
+                        }
+                    }
+                    break;
+                }
+                case 'bottom': {
+                    if (isStation) {
+                        if (list.length >= 2) {
+                            list.splice(list.length - 1, 1, data);
+                        } else {
+                            if (index < 0) {
+                                list.push(data);
+                            }
+                        }
+                    } else {
+                        if (index < 0) {
+                            if (list.length >= 2) {
+                                list.splice(list.length - 1, 1, data);
+                            } else {
+                                list.push(data);
+                            }
+                        } else {
+                            if (index == 0 && list.length >= 2) {
+                                this.addModel.endSectionCode = list[list.length - 1].sectionCode;
+                                this.addModel.endStationCode = list[list.length - 1].stationCode;
+                                this.$messageBox('起始区段和终到区段不能相同');
+                            } else if (index != list.length - 1 && index != 0) {
+                                this.$messageBox('该区段已经在交路区段中存在');
+                            }
+                        }
+                    }
+                    break;
+                }
+                default: {
+                    if (index < 0) {
+                        list.splice(list.length - 1, 0, data);
+                    } else {
+                        this.$messageBox(this.$t('tip.routeSameID'));
+                    }
+                    break;
+                }
+                }
+                this.sectionCode = '';
+                this.stationCode = '';
+            }
+        },
+        deleteSection(list, index) {
+            const data = list.splice(index, 1);
+            if (data.length > 0) {
+                const section = this.$store.getters['map/getDeviceByCode'](data[0].sectionCode);
+                section.instance.drawBatchSelected(section, '');
+            }
+        },
+        buildModel(code) {
+            const model = Object.assign({}, this.addModel);
+            if (model.withLoop) { model.withLoop = true; } else { model.withLoop = false; }
+            model['mapId'] = this.$route.query.mapId;
+            if (code) { model['code'] = code; }
+            return model;
+        },
+        save() {
+            this.addModel;
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    addRoutingData(this.buildModel(setUID('Routing'))).then(resp => {
+                        this.$message.success(this.$t('tip.pathCreationSuccessful'));
+                        this.loading = false;
+                        this.clear();
+                    }).catch((error) => {
+                        this.$messageBox(this.$t('tip.createRoutingFailed') + ':' + error.message);
+                        this.loading = false;
+                    });
+                }
+            });
+        },
+        update() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    const data = this.buildModel();
+                    delete data.withLoop;
+                    updateRoutingData(data).then(resp => {
+                        this.$message.success(this.$t('tip.pathUpdataSuccessful'));
+                        this.loading = false;
+                        this.clear();
+                    }).catch((error) => {
+                        this.$messageBox(this.$t('tip.pathUpdataFailed') + ':' + error.message);
+                        this.loading = false;
+                    });
+
+                }
+            });
+        },
+        batchSectionListFocus(flag) {
+            this.changeSectionSelected(this.addModel.parkSectionCodeList, flag);
+        },
+        changeSectionSelected(selectedList, flag) {
+            if (this.addModel.parkSectionCodeList && this.addModel.parkSectionCodeList.length > 0) {
+                if (flag) {
+                    if (this.oldsection.length > 0) {
+                        this.oldsection.forEach((section)=>{
+                            section.instance.drawBatchSelected(section, '');
+                        });
+                        this.oldsection = [];
+                    }
+                    selectedList.forEach(each=>{
+                        const section = this.$store.getters['map/getDeviceByCode'](each.sectionCode);
+                        const list = section.logicSectionCodeList;
+                        // if()
+                        // relSwitchCode
+                        if (list && list.length > 0) {
+                            list.forEach(logicSectionCode=>{
+                                const logicSection = this.$store.getters['map/getDeviceByCode'](logicSectionCode);
+                                this.oldsection.push(logicSection);
+                                logicSection.instance.drawBatchSelected(section, 'routingSection');
+                            });
+                        } else {
+                            this.oldsection.push(section);
+                            section.instance.drawBatchSelected(section, 'routingSection');
+                        }
+                    });
+                } else {
+                    selectedList.forEach(each=>{
+                        const section = this.$store.getters['map/getDeviceByCode'](each.sectionCode);
+                        const list = section.logicSectionCodeList;
+                        if (list && list.length > 0) {
+                            list.forEach(logicSectionCode=>{
+                                const logicSection = this.$store.getters['map/getDeviceByCode'](logicSectionCode);
+                                logicSection.instance.drawBatchSelected(section, '');
+                            });
+                        } else {
+                            section.instance.drawBatchSelected(section, '');
+                        }
+                    });
+                }
+            }
+        },
+        clear() {
+            if (this.$refs && this.$refs.form) {
+                this.changeSectionSelected(this.addModel.parkSectionCodeList, false);
+                delete this.addModel.id;
+                this.$refs.form.resetFields();
+                this.addModel.mapId = this.$route.query.mapId;
+                this.addModel.parkSectionCodeList = [];
+                this.addModel.code = '';
+                this.stationCode = '';
+                this.sectionCode = '';
+                this.isSave = true;
+                this.allowSelect = false;
+                this.isStartSelected = false;
+                this.addModel.withLoop = false;
+                this.editShow = false;
+                this.field = '';
+            }
+        },
+        onContextmenu() {
+
+        },
+        close() {
+            this.dialogShow = false;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scope>
+.content-route{
+	/deep/ {
+		.el-dialog__body{
+			width: 100%;
+			height: calc(100% - 54px);
+			padding: 0;
+		}
+	}
+}
+.mapEdit_box{
+	float: right;
+	padding: 3px 0;
+	margin-right: 5px;
+}
+</style>
+
diff --git a/src/views/planMonitor/editTool/routingoperate/routeOperate.vue b/src/views/planMonitor/editTool/routingoperate/routeOperate.vue
new file mode 100644
index 000000000..ab8284024
--- /dev/null
+++ b/src/views/planMonitor/editTool/routingoperate/routeOperate.vue
@@ -0,0 +1,289 @@
+<template>
+  <el-dialog v-dialogDrag title="交路列表" :visible.sync="show" width="85%" :before-do-close="doClose" append-to-body>
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+    <pre-view-field ref="previewField" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listMap } from '@/api/jmap/mapdraft';
+import { listRoutingData, deleteRoutingData, getRoutingData } from '@/api/jmap/mapdraft';
+import PreViewField from './preview';
+
+export default {
+    name: 'RouteDetail',
+    components: {
+        PreViewField
+    },
+    data() {
+        return {
+            show: false,
+            mapList: [],
+            pagerConfig: {
+                pageSize: 'pageSize',
+                pageIndex: 'pageNum'
+            },
+            queryForm: {
+                labelWidth: '120px',
+                queryObject: {
+                    startStationCode: {
+                        type: 'select',
+                        label: this.$t('map.startStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    endStationCode: {
+                        type: 'select',
+                        label: this.$t('map.endStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    startSectionCode: {
+                        type: 'select',
+                        label: '起始区段',
+                        config: {
+                            data: []
+                        }
+                    },
+                    endSectionCode: {
+                        type: 'select',
+                        label: '终到区段',
+                        config: {
+                            data: []
+                        }
+                    }
+                }
+            },
+            queryList: {
+                query: this.queryFunction,
+                afterQuery: this.afterQuery,
+                selectCheckShow: false,
+                indexShow: true,
+                columns: [
+                    {
+                        title: this.$t('map.routingCode'),
+                        prop: 'code'
+                    },
+                    {
+                        title: this.$t('map.startStation'),
+                        prop: 'startStationCode'
+
+                    },
+                    {
+                        title: '起始区段',
+                        prop: 'startSectionCode'
+                    },
+                    {
+                        title: this.$t('map.endStation'),
+                        prop: 'endStationCode'
+                    },
+                    {
+                        title: '终到区段',
+                        prop: 'endSectionCode'
+                    },
+                    {
+                        title: this.$t('map.routingDirection'),
+                        prop: 'right',
+                        type: 'tag',
+                        columnValue: (row) => { if (row.right) { return '右行'; } else { return '左行'; } },
+                        tagType: (row) => { if (row.right) { return 'primary'; } else { return 'success'; } }
+                    },
+                    {
+                        title: this.$t('map.destination'),
+                        prop: 'destinationCode'
+                    },
+                    {
+                        title: this.$t('map.remarks'),
+                        prop: 'description'
+                    },
+                    {
+                        type: 'button',
+                        title: this.$t('map.sectionData'),
+                        buttons: [
+                            {
+                                name: this.$t('map.preview'),
+                                handleClick: this.sectionDetail
+                            }
+                        ]
+                    },
+                    {
+                        type: 'button',
+                        title: this.$t('map.operation'),
+                        width: '300',
+                        buttons: [
+                            {
+                                name: this.$t('map.compile'),
+                                handleClick: this.editObj
+                            },
+                            {
+                                name: this.$t('map.deleteObj'),
+                                handleClick: this.deleteObj,
+                                type: 'danger'
+                            }
+                            // {
+                            //     name: '生成站间运行数据',
+                            //     handleClick: this.generateData,
+                            //     type: 'danger'
+                            // }
+                        ]
+                    }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'stationList'
+        ])
+    },
+    mounted() {
+        this.acquireMapList();
+        this.initQueryObject();
+    },
+    methods: {
+        doShow() {
+            this.show = true;
+            this.reloadTable();
+        },
+        initQueryObject() {
+            const stationList = [];
+            if (this.stationList && this.stationList.length) {
+                this.stationList.forEach(elem => {
+                    stationList.push({ label: this.formatName(elem.code), value: elem.code });
+                });
+                this.queryForm.queryObject.startStationCode.config.data = stationList;
+                this.queryForm.queryObject.endStationCode.config.data = stationList;
+            }
+            const sectionList = [];
+            if (this.sectionList && this.sectionList.length) {
+                this.sectionList.forEach(elem => {
+                    if (elem.standTrack || elem.reentryTrack || elem.transferTrack) {
+                        sectionList.push({ label: this.formatName(elem.code), value: elem.code });
+                    }
+                });
+                this.queryForm.queryObject.startSectionCode.config.data = sectionList;
+                this.queryForm.queryObject.endSectionCode.config.data = sectionList;
+            }
+        },
+        doClose() {
+            this.show = false;
+        },
+        formatName(code) {
+            let name = '';
+            const device = this.$store.getters['map/getDeviceByCode'](code);
+            if (device) {
+                name = device.name;
+            }
+
+            return name;
+        },
+        queryFunction(params) {
+            if (this.$route.query.mapId) {
+                return listRoutingData(this.$route.query.mapId, params);
+            }
+        },
+        acquireMapList() {
+            // 地图名称列表
+            listMap({drawWay: true}).then(response => {
+                this.mapList = response.data;
+            });
+        },
+        afterQuery(data) {
+            if (data && data.list) {
+                const that = this;
+                const list = data.list;
+                if (list) {
+                    list.map(elem => {
+                        that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
+                        elem.startStationCode = that.formatName(elem.startStationCode);
+                        elem.startSectionCode = that.formatName(elem.startSectionCode);
+                        elem.endStationCode = that.formatName(elem.endStationCode);
+                        elem.endSectionCode = that.formatName(elem.endSectionCode);
+                    });
+                }
+            }
+            return data;
+        },
+        editObj(index, row) {
+            getRoutingData(row.id).then(response => {
+                const data = Object.assign({ code: response.data.id }, response.data);
+                this.$emit('routingSelected', data);
+                this.doClose();
+            });
+        },
+        deleteObj(index, row) {
+            if (this.$route.query.mapId && row) {
+                this.$confirm('是否确认删除交路', this.$t('global.tips'), {
+                    confirmButtonText: this.$t('global.confirm'),
+                    cancelButtonText: this.$t('global.cancel'),
+                    type: 'warning'
+                }).then(() => {
+                    // 删除
+                    deleteRoutingData(row.id).then(response => {
+                        this.$message.success(this.$t('map.successfullyDelete'));
+                        this.reloadTable();
+                    }).catch(() => {
+                        this.$messageBox(this.$t('map.failDelete'));
+                    });
+                }).catch();
+            }
+        },
+        // generateData(index, row) {
+        //     if (this.$route.query.mapId && row) {
+        //         // 根据地图交路区段生成站间运行等级
+        //         generateStationRunData(row.id).then(response => {
+        //             this.$message.success(this.$t('map.generateStationRunDataSuccess'));
+        //             //  站间运行数据生成成功
+        //             this.reloadTable();
+        //         }).catch((error) => {
+        //             // 站间运行数据生成失败
+        //             this.$messageBox(this.$t('map.generateStationRunDataFailed') + ': ' + error.message);
+        //         });
+        //     }
+        // },
+        sectionDetail(index, row) {
+            const sectionDict = {};
+            const stationDict = {};
+            this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
+            this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
+
+            const fieldList = {
+                id: row.id,
+                mapId: this.$route.params.mapId,
+                title: '区段列表',
+                name: row.name,
+                model: {
+                    field: 'parkSectionCodeList',
+                    items: [
+                        { prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
+                        {
+                            prop: 'stationCode', label: '车站名称', type: 'select', options: stationDict
+                        },
+                        { prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
+                        {
+                            prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
+                        }
+                    ]
+                }
+            };
+            this.$refs.previewField.doShow(fieldList, row.parkSectionCodeList);
+        },
+        reloadTable() {
+            if (this.queryList && this.queryList.reload) {
+                this.queryList.reload();
+            }
+        }
+    }
+};
+</script>