From 6cac5cdf51e7b31bbe7acac0e6373958fbf3768d Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Fri, 12 Mar 2021 10:42:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=A1=8C=E5=9B=BE=E7=BC=96=E5=88=B6?=
 =?UTF-8?q?=20=E5=AF=BC=E5=85=A5=E5=85=AC=E5=85=B1=E8=BF=9B=E8=B7=AF?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/jmap/mapdraft.js                      |  19 +
 .../QueryListPage/QueryListPage.vue           |  35 +-
 .../routingoperate/importRouteOperate.vue     | 267 ++++++++++++
 .../components/routingoperate/routeConfig.vue | 379 ++++++++++--------
 .../routingoperate/routeOperate.vue           |  19 +-
 5 files changed, 531 insertions(+), 188 deletions(-)
 create mode 100644 src/views/planMonitor/components/routingoperate/importRouteOperate.vue

diff --git a/src/api/jmap/mapdraft.js b/src/api/jmap/mapdraft.js
index 5f6529e7e..345f3a2dd 100644
--- a/src/api/jmap/mapdraft.js
+++ b/src/api/jmap/mapdraft.js
@@ -133,6 +133,25 @@ export function listRoutingData(mapId, params) {
     });
 }
 
+/** 分页查询公共的交路数据(新版)*/
+export function listPublicRoutingData(mapId, params) {
+    return request({
+        // url: `/api/mapBuild/${mapId}/routingData`,
+        url: `/api/runPlan/userData/${mapId}/default/routing/page`,
+        method: 'get',
+        params: params
+    });
+}
+
+/** 用户拉取公共的交路数据(新版)*/
+export function pullPublicRoutingData(mapId, data) {
+    return request({
+        url: `/api/runPlan/userData/${mapId}/default/routing/pull`,
+        method: 'put',
+        data: data
+    });
+}
+
 /** 创建交路(新版)*/
 export function addRoutingData(data) {
     return request({
diff --git a/src/components/QueryListPage/QueryListPage.vue b/src/components/QueryListPage/QueryListPage.vue
index e25f33dae..b3938ca95 100644
--- a/src/components/QueryListPage/QueryListPage.vue
+++ b/src/components/QueryListPage/QueryListPage.vue
@@ -165,14 +165,6 @@
           </el-table-column>
         </template>
       </el-table>
-      <div v-if="queryList.selectCheckShow" style="margin-top: 8px; margin-left: 8px;">
-        <el-button
-          size="mini"
-          :type="'primary'"
-          :disabled="!queryList.selection.length"
-          @click="queryList.selectAllClick(queryList.selection)"
-        >{{ $t('global.selectAdd') }}</el-button>
-      </div>
       <div v-if="!queryList.paginationHiden" class="page-container " style="text-align: center; margin: 10px 0; height: 40px;">
         <el-pagination
           :current-page="pageIndex"
@@ -184,6 +176,15 @@
           @current-change="changePage"
         />
       </div>
+      <div v-if="queryList.selectCheckShow" :class="queryList.selectCheckClass?queryList.selectCheckClass:'defaultCheckClass'">
+        <el-button
+          :size="queryList.selectCheckSize?queryList.selectCheckSize:'mini'"
+          :type="'primary'"
+          :disabled="!queryList.selection.length"
+          :loading="queryList.selectCheckLoading?queryList.selectCheckLoading:false"
+          @click="queryList.selectAllClick(queryList.selection)"
+        >{{ queryList.selectCheckText?queryList.selectCheckText:$t('global.selectAdd') }}</el-button>
+      </div>
     </el-card>
   </div>
 </template>
@@ -517,12 +518,12 @@ export default {
         },
         onRowClick(row) {
             this.choose = row;
-		},
-		onReset() {
-			if (this.$refs.queryForm) {
-				this.$refs.queryForm.doClean();
-			}
-		},
+        },
+        onReset() {
+            if (this.$refs.queryForm) {
+                this.$refs.queryForm.doClean();
+            }
+        },
         currentChoose() {
             return this.choose;
         },
@@ -568,7 +569,7 @@ export default {
                 delete self.queryData[self.sortBy];
                 self.refresh(true);
             }
-		}
+        }
     }
 
 };
@@ -594,4 +595,8 @@ export default {
 		z-index: 100;
 	}
 }
+.defaultCheckClass{
+    margin-top: 8px;
+    margin-left: 8px;
+}
 </style>
diff --git a/src/views/planMonitor/components/routingoperate/importRouteOperate.vue b/src/views/planMonitor/components/routingoperate/importRouteOperate.vue
new file mode 100644
index 000000000..947a1ed24
--- /dev/null
+++ b/src/views/planMonitor/components/routingoperate/importRouteOperate.vue
@@ -0,0 +1,267 @@
+<template>
+  <el-dialog v-dialogDrag title="导入公共交路" :visible.sync="show" width="80%" :before-do-close="doClose" append-to-body>
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+    <pre-view-field ref="previewField" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listPublicRoutingData, pullPublicRoutingData} from '@/api/jmap/mapdraft';
+import PreViewField from './preview';
+
+export default {
+    name: 'ImportRouteDetail',
+    components: {
+        PreViewField
+    },
+    data() {
+        return {
+            show: false,
+            pagerConfig: {
+                pageSize: 'pageSize',
+                pageIndex: 'pageNum'
+            },
+            queryForm: {
+                labelWidth: '120px',
+                queryObject: {
+                    startStationCode: {
+                        type: 'select',
+                        label: this.$t('map.startStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    endStationCode: {
+                        type: 'select',
+                        label: this.$t('map.endStation'),
+                        config: {
+                            data: []
+                        }
+                    },
+                    startSectionCode: {
+                        type: 'select',
+                        label: '起始区段',
+                        config: {
+                            data: []
+                        }
+                    },
+                    endSectionCode: {
+                        type: 'select',
+                        label: '终到区段',
+                        config: {
+                            data: []
+                        }
+                    }
+                }
+            },
+            queryList: {
+                query: this.queryFunction,
+                afterQuery: this.afterQuery,
+                selectCheckShow: true,
+                selectCheckClass:'selectCheckClass',
+                selectCheckSize:'medium',
+                selectAllClick:this.selectAllClick,
+                selectCheckText:'导入',
+                selectCheckLoading:false,
+                indexShow: true,
+                columns: [
+                    {
+                        title: '交路名称',
+                        prop: 'name',
+                        width:'260'
+                    },
+                    {
+                        title: this.$t('map.startStation'),
+                        prop: 'startStationCode'
+
+                    },
+                    {
+                        title: '起始区段',
+                        prop: 'startSectionCode'
+                    },
+                    {
+                        title: this.$t('map.endStation'),
+                        prop: 'endStationCode'
+                    },
+                    {
+                        title: '终到区段',
+                        prop: 'endSectionCode'
+                    },
+                    {
+                        title: this.$t('map.routingDirection'),
+                        prop: 'right',
+                        type: 'tag',
+                        columnValue: (row) => { if (row.right) { return '右行'; } else { return '左行'; } },
+                        tagType: (row) => { if (row.right) { return 'primary'; } else { return 'success'; } }
+                    },
+                    // {
+                    //     title: this.$t('map.destination'),
+                    //     prop: 'destinationCode'
+                    // },
+                    // {
+                    //     title: this.$t('map.remarks'),
+                    //     prop: 'remarks'
+                    // },
+                    {
+                        type: 'button',
+                        title: this.$t('map.sectionData'),
+                        buttons: [
+                            {
+                                name: this.$t('map.preview'),
+                                handleClick: this.sectionDetail
+                            }
+                        ]
+                    }
+                    // {
+                    //     type: 'button',
+                    //     title: this.$t('map.operation'),
+                    //     width: '300',
+                    //     buttons: [
+                    //         {
+                    //             name: this.$t('map.compile'),
+                    //             handleClick: this.editObj
+                    //         },
+                    //         {
+                    //             name: this.$t('map.deleteObj'),
+                    //             type: 'danger',
+                    //             handleClick: this.deleteObj
+                    //         }
+                    //     ]
+                    // }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'stationList'
+        ])
+    },
+    mounted() {
+        // this.acquireMapList();
+        this.initQueryObject();
+    },
+    methods: {
+        doShow() {
+            this.show = true;
+            this.reloadTable();
+        },
+        initQueryObject() {
+            const stationList = [];
+            if (this.stationList && this.stationList.length) {
+                this.stationList.forEach(elem => {
+                    stationList.push({ label: this.formatName(elem.code), value: elem.code });
+                });
+                this.queryForm.queryObject.startStationCode.config.data = stationList;
+                this.queryForm.queryObject.endStationCode.config.data = stationList;
+            }
+            const sectionList = [];
+            if (this.sectionList && this.sectionList.length) {
+                this.sectionList.forEach(elem => {
+                    if (elem.standTrack || elem.reentryTrack || elem.transferTrack) {
+                        sectionList.push({ label: this.formatName(elem.code), value: elem.code });
+                    }
+                });
+                this.queryForm.queryObject.startSectionCode.config.data = sectionList;
+                this.queryForm.queryObject.endSectionCode.config.data = sectionList;
+            }
+        },
+        doClose() {
+            this.show = false;
+        },
+        formatName(code) {
+            let name = '';
+            const device = this.$store.getters['map/getDeviceByCode'](code);
+            if (device) {
+                name = device.name;
+            }
+
+            return name;
+        },
+        queryFunction(params) {
+            if (this.$route.query.mapId) {
+                return listPublicRoutingData(this.$route.query.mapId, params);
+            }
+        },
+        afterQuery(data) {
+            if (data && data.list) {
+                const that = this;
+                const list = data.list;
+                if (list) {
+                    list.map(elem => {
+                        elem.startStationCode = that.formatName(elem.startStationCode);
+                        elem.startSectionCode = that.formatName(elem.startSectionCode);
+                        elem.endStationCode = that.formatName(elem.endStationCode);
+                        elem.endSectionCode = that.formatName(elem.endSectionCode);
+                    });
+                }
+            }
+            return data;
+        },
+        sectionDetail(index, row) {
+            const sectionDict = {};
+            const stationDict = {};
+            this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
+            this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
+
+            const fieldList = {
+                id: row.id,
+                mapId: this.$route.params.mapId,
+                title: '区段列表',
+                name: row.name,
+                model: {
+                    field: 'parkSectionCodeList',
+                    items: [
+                        { prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
+                        {
+                            prop: 'stationCode', label: '车站名称', type: 'select', options: stationDict
+                        },
+                        { prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
+                        {
+                            prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
+                        }
+                    ]
+                }
+            };
+            this.$refs.previewField.doShow(fieldList, row.parkSectionCodeList);
+        },
+        reloadTable() {
+            if (this.queryList && this.queryList.reload) {
+                this.queryList.reload();
+            }
+        },
+        selectAllClick(selection) {
+            const routeList = [];
+            selection.forEach(each=>{
+                routeList.push(each.id);
+            });
+            if (routeList.length > 0) {
+                this.queryList.selectCheckLoading = true;
+                pullPublicRoutingData(this.$route.query.mapId, routeList ).then(res=>{
+                    this.queryList.selectCheckLoading = false;
+                    this.$message.success('导入公共交路成功');
+                    this.doClose();
+                }).catch((error) => {
+                    this.$messageBox('导入公共交路失败' + ':' + error.message);
+                    this.queryList.selectCheckLoading = false;
+                });
+            }
+        }
+    }
+};
+</script>
+<style lang="scss">
+.selectCheckClass{
+    text-align: center;
+    padding: 14px 0px 20px 0px;
+}
+</style>
diff --git a/src/views/planMonitor/components/routingoperate/routeConfig.vue b/src/views/planMonitor/components/routingoperate/routeConfig.vue
index e2ba4b18c..5fa9ae3ca 100644
--- a/src/views/planMonitor/components/routingoperate/routeConfig.vue
+++ b/src/views/planMonitor/components/routingoperate/routeConfig.vue
@@ -1,169 +1,173 @@
 <template>
   <div class="routeConfig">
-    <div>
-      <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" disabled @change="changeStartStation">
-              <el-option
-                v-for="item in filterStationList"
-                :key="item.code"
-                :label="item.name"
-                :value="item.code"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('map.startSectionColon')" prop="startSectionCode">
-            <el-select v-model="addModel.startSectionCode" clearable :filterable="true" :disabled="editShow" @change="changeStartSection">
-              <el-option
-                v-for="item in filterStartSectionList"
-                :key="item.code"
-                :label="item.name"
-                :value="item.code"
-              />
-            </el-select>
-            <el-button
-              :disabled="editShow"
-              :type=" field === 'startSectionCode' ? 'danger' : 'primary'"
-              @click="hover('startSectionCode')"
-            >{{ $t('map.activate') }}</el-button>
-          </el-form-item>
-          <el-form-item :label="$t('map.endStationColon')" prop="endStationCode">
-            <el-select v-model="addModel.endStationCode" :filterable="true" disabled @change="changeEndStation">
-              <el-option
-                v-for="item in filterStationList"
-                :key="item.code"
-                :label="item.name"
-                :value="item.code"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('map.endSectionColon')" prop="endSectionCode">
-            <el-select v-model="addModel.endSectionCode" :filterable="true" clearable :disabled="editShow || !isStartSelected" @change="changeEndSection">
-              <el-option
-                v-for="item in filterEndSectionList"
-                :key="item.code"
-                :label="item.name"
-                :value="item.code"
-              />
-            </el-select>
-            <el-button
-              :disabled="editShow || !isStartSelected"
-              :type=" field === 'endSectionCode' ? 'danger' : 'primary'"
-              @click="hover('endSectionCode')"
-            >{{ $t('map.activate') }}</el-button>
-          </el-form-item>
-          <el-form-item :label="$t('map.destinationCode')" prop="destinationCode" :disabled="editShow">
-            <el-input v-model="addModel.destinationCode" />
-          </el-form-item>
-          <el-form-item :label="$t('map.routingDirection')" prop="directionCode">
-            <el-select v-model="addModel.right" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
-              <el-option
-                v-for="item in DirectionCodeList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('map.remarksColon')" prop="remarks">
-            <el-input v-model="addModel.remarks" type="textarea" :rows="4" :placeholder="$t('map.pleaseSelect')" />
-          </el-form-item>
-          <el-form-item :label="$t('map.trafficSegmentData')" prop="parkSectionCodeList">
-            <el-button type="primary" size="small" :loading="generating" style="margin-bottom:10px" @click.native.prevent="generateParkSection">生成经停区段</el-button>
-            <el-table
-              :data="addModel.parkSectionCodeList"
-              border
-              style="width:97%"
-              height="300"
-              class="el-parkSectionCode-table"
-            >
-              <el-table-column prop="sectionCode" :label="$t('map.stationName')">
-                <template slot-scope="scope">
-                  <span>{{ formatName(scope.row.stationCode) }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="sectionCode" :label="$t('map.sectionName')">
-                <template slot-scope="scope">
-                  <span>{{ formatName(scope.row.sectionCode) }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column :label="$t('map.operation')" width="50">
-                <template slot-scope="scope">
-                  <el-button
-                    v-show="scope.$index!=0&&scope.$index!=addModel.parkSectionCodeList.length-1"
-                    type="text"
-                    size="small"
-                    @click.native.prevent="deleteSection(addModel.parkSectionCodeList, scope.$index)"
-                  >
-                    {{ $t('map.remove') }}
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <div style="margin-top:10px;">
-              <span>车站:</span>
-              <el-select v-model="stationCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
-                <el-option
-                  v-for="item in filterStationList"
-                  :key="item.code"
-                  :label="`${item.name}(${item.code})`"
-                  :value="item.code"
-                />
-              </el-select>
-              <el-button
-                :disabled="!allowSelect"
-                :type="field === 'routingStation' ? 'danger' : 'primary'"
-                @click="hover('routingStation')"
-              >{{ $t('map.activate') }}</el-button>
-            </div>
-            <div style="margin-top:10px;">
-              <span>区段:</span>
-              <el-select v-model="sectionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
-                <el-option
-                  v-for="item in filterStandSection"
-                  :key="item.code"
-                  :label="`${item.name}(${item.code})`"
-                  :value="item.code"
-                />
-              </el-select>
-              <el-button
-                :type=" field === 'routingSection' ? 'danger' : 'primary'"
-                :disabled="!allowSelect"
-                @click="hover('routingSection')"
-              >{{ $t('map.activate') }}</el-button>
-              <el-button
-                type="primary"
-                :disabled="!allowSelect"
-                @click="pushSection({stationCode: stationCode, sectionCode: sectionCode},'center')"
-              >
-                {{ $t('map.add') }}
-              </el-button>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button-group style="padding-bottom:10px">
-              <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>
+    <!-- <div style="position:relative"> -->
+    <div class="routeConfigTop">
+      <el-button type="text" class="mapEdit_box" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
+      <el-button type="text" class="mapEdit_box" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
+      <el-button type="text" class="mapEdit_box" @click="importRouteEvent">导入公共交路</el-button>
     </div>
+    <el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini" style="height:100%">
+      <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" disabled @change="changeStartStation">
+            <el-option
+              v-for="item in filterStationList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('map.startSectionColon')" prop="startSectionCode">
+          <el-select v-model="addModel.startSectionCode" clearable :filterable="true" :disabled="editShow" @change="changeStartSection">
+            <el-option
+              v-for="item in filterStartSectionList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :disabled="editShow"
+            :type=" field === 'startSectionCode' ? 'danger' : 'primary'"
+            @click="hover('startSectionCode')"
+          >{{ $t('map.activate') }}</el-button>
+        </el-form-item>
+        <el-form-item :label="$t('map.endStationColon')" prop="endStationCode">
+          <el-select v-model="addModel.endStationCode" :filterable="true" disabled @change="changeEndStation">
+            <el-option
+              v-for="item in filterStationList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('map.endSectionColon')" prop="endSectionCode">
+          <el-select v-model="addModel.endSectionCode" :filterable="true" clearable :disabled="editShow || !isStartSelected" @change="changeEndSection">
+            <el-option
+              v-for="item in filterEndSectionList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :disabled="editShow || !isStartSelected"
+            :type=" field === 'endSectionCode' ? 'danger' : 'primary'"
+            @click="hover('endSectionCode')"
+          >{{ $t('map.activate') }}</el-button>
+        </el-form-item>
+        <el-form-item :label="$t('map.destinationCode')" prop="destinationCode" :disabled="editShow">
+          <el-input v-model="addModel.destinationCode" />
+        </el-form-item>
+        <el-form-item :label="$t('map.routingDirection')" prop="directionCode">
+          <el-select v-model="addModel.right" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+            <el-option
+              v-for="item in DirectionCodeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('map.remarksColon')" prop="remarks">
+          <el-input v-model="addModel.remarks" type="textarea" :rows="4" :placeholder="$t('map.pleaseSelect')" />
+        </el-form-item>
+        <el-form-item :label="$t('map.trafficSegmentData')" prop="parkSectionCodeList">
+          <el-button type="primary" size="small" :loading="generating" style="margin-bottom:10px" @click.native.prevent="generateParkSection">生成经停区段</el-button>
+          <el-table
+            :data="addModel.parkSectionCodeList"
+            border
+            style="width:97%"
+            height="300"
+            class="el-parkSectionCode-table"
+          >
+            <el-table-column prop="sectionCode" :label="$t('map.stationName')">
+              <template slot-scope="scope">
+                <span>{{ formatName(scope.row.stationCode) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sectionCode" :label="$t('map.sectionName')">
+              <template slot-scope="scope">
+                <span>{{ formatName(scope.row.sectionCode) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('map.operation')" width="50">
+              <template slot-scope="scope">
+                <el-button
+                  v-show="scope.$index!=0&&scope.$index!=addModel.parkSectionCodeList.length-1"
+                  type="text"
+                  size="small"
+                  @click.native.prevent="deleteSection(addModel.parkSectionCodeList, scope.$index)"
+                >
+                  {{ $t('map.remove') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div style="margin-top:10px;">
+            <span>车站:</span>
+            <el-select v-model="stationCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+              <el-option
+                v-for="item in filterStationList"
+                :key="item.code"
+                :label="`${item.name}(${item.code})`"
+                :value="item.code"
+              />
+            </el-select>
+            <el-button
+              :disabled="!allowSelect"
+              :type="field === 'routingStation' ? 'danger' : 'primary'"
+              @click="hover('routingStation')"
+            >{{ $t('map.activate') }}</el-button>
+          </div>
+          <div style="margin-top:10px;">
+            <span>区段:</span>
+            <el-select v-model="sectionCode" clearable :filterable="true" :placeholder="$t('map.pleaseSelect')">
+              <el-option
+                v-for="item in filterStandSection"
+                :key="item.code"
+                :label="`${item.name}(${item.code})`"
+                :value="item.code"
+              />
+            </el-select>
+            <el-button
+              :type=" field === 'routingSection' ? 'danger' : 'primary'"
+              :disabled="!allowSelect"
+              @click="hover('routingSection')"
+            >{{ $t('map.activate') }}</el-button>
+            <el-button
+              type="primary"
+              :disabled="!allowSelect"
+              @click="pushSection({stationCode: stationCode, sectionCode: sectionCode},'center')"
+            >
+              {{ $t('map.add') }}
+            </el-button>
+          </div>
+        </el-form-item>
+      </div>
+      <el-form-item class="buttonGroup">
+        <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>
+    </el-form>
+    <!-- </div> -->
     <route-operate ref="routeOperate" @routingSelected="routingSelected" />
+    <import-route-operate ref="importRouteOperate" />
+
   </div>
 </template>
 <script>
 import RouteOperate from './routeOperate';
+import ImportRouteOperate from './importRouteOperate';
 import { setUID } from '@/jmapNew/utils/Uid';
 import { addRoutingData, updateRoutingData, gernateRoutingSectionInRunplan } from '@/api/jmap/mapdraft';
 import { mapGetters } from 'vuex';
@@ -172,7 +176,8 @@ import Sortable from 'sortablejs';
 export default {
     name:'RouteConfig',
     components: {
-        RouteOperate
+        RouteOperate,
+        ImportRouteOperate
     },
     data() {
         return {
@@ -308,6 +313,9 @@ export default {
         previewRouteEvent() {
             this.$refs.routeOperate.doShow();
         },
+        importRouteEvent() {
+            this.$refs.importRouteOperate.doShow();
+        },
         createRouteEvent() {
             this.clear();
         },
@@ -697,4 +705,57 @@ export default {
 	padding: 3px 0;
 	margin-right: 5px;
 }
+.routeConfig{
+    height:100%;
+    position: relative;
+}
+.routeConfigTop{
+    padding: 7px 20px 7px 0px;
+    position: absolute;
+    background: #fff;
+    width: 100%;
+    z-index: 2;
+    height: 35px;
+    font-size: 16px;
+    display: inline-block;
+    -webkit-box-shadow: 0px 1px 3px #ccc;
+    box-shadow: 0px 1px 3px #ccc;
+    right: 0;
+    top: 0;
+}
+.routeConfigTop button{
+    display:inline-block;
+}
+.definition{
+    padding: 45px 30px 45px 0px;
+    height: 100%;
+    overflow: auto;
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: #c3c3c3;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 0;
+        background: #f0f0f0;
+
+    }
+}
+.buttonGroup{
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    bottom: 0;
+    background: #fff;
+    margin-bottom: 0px;
+    box-shadow: 0px -2px 5px #ccc;
+    z-index: 2;
+    text-align: right;
+    padding-right: 26px;
+    padding-top: 4px;
+}
 </style>
diff --git a/src/views/planMonitor/components/routingoperate/routeOperate.vue b/src/views/planMonitor/components/routingoperate/routeOperate.vue
index f375fcb6c..e120a2ead 100644
--- a/src/views/planMonitor/components/routingoperate/routeOperate.vue
+++ b/src/views/planMonitor/components/routingoperate/routeOperate.vue
@@ -14,7 +14,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { listMap } from '@/api/jmap/mapdraft';
 import { listRoutingData, deleteRoutingData, getRoutingData } from '@/api/jmap/mapdraft';
 import PreViewField from './preview';
 
@@ -26,7 +25,6 @@ export default {
     data() {
         return {
             show: false,
-            mapList: [],
             pagerConfig: {
                 pageSize: 'pageSize',
                 pageIndex: 'pageNum'
@@ -71,8 +69,9 @@ export default {
                 indexShow: true,
                 columns: [
                     {
-                        title: this.$t('map.routingCode'),
-                        prop: 'code'
+                        title: '交路名称',
+                        prop: 'name',
+                        width:'260'
                     },
                     {
                         title: this.$t('map.startStation'),
@@ -127,8 +126,8 @@ export default {
                             },
                             {
                                 name: this.$t('map.deleteObj'),
-                                handleClick: this.deleteObj,
-                                type: 'danger'
+                                type: 'danger',
+                                handleClick: this.deleteObj
                             }
                             // {
                             //     name: '生成站间运行数据',
@@ -148,7 +147,6 @@ export default {
         ])
     },
     mounted() {
-        this.acquireMapList();
         this.initQueryObject();
     },
     methods: {
@@ -193,19 +191,12 @@ export default {
                 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);