From 4779efbc2386fc88691678d6b9f9edb9b8a061c2 Mon Sep 17 00:00:00 2001
From: fan <fanyuhong@joylink.club>
Date: Tue, 5 Jul 2022 09:08:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4&=E5=8F=B8?=
 =?UTF-8?q?=E6=9C=BA=E9=A9=BE=E9=A9=B6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |    6 +
 src/utils/baseUrl.js                          |    5 +-
 src/views/jlmap3d/drive/jl3ddrive.vue         | 1089 ++++++++---------
 src/views/newMap/jointTrainingNew/index.vue   |    4 +-
 src/views/newMap/mapDraftPicture/index.vue    |  660 ++++++++++
 .../mapoperate/components/createOperate.vue   |   50 +
 .../mapoperate/components/operateProperty.vue |   67 +
 .../mapoperate/config/list.vue                |  477 ++++++++
 .../mapDraftPicture/mapoperate/device.vue     |   84 ++
 .../mapDraftPicture/mapoperate/index.vue      |  236 ++++
 .../mapoperate/multiSelect.vue                |   13 +
 src/views/newMap/newDesignUser/demonList.vue  |  345 +++---
 src/views/newMap/trainTicket/greenLicence.vue |    2 +-
 src/views/newMap/trainTicket/redLicence.vue   |    2 +-
 src/views/newMap/trainTicket/trainTicket.vue  |    3 +
 15 files changed, 2325 insertions(+), 718 deletions(-)
 create mode 100644 src/views/newMap/mapDraftPicture/index.vue
 create mode 100644 src/views/newMap/mapDraftPicture/mapoperate/components/createOperate.vue
 create mode 100644 src/views/newMap/mapDraftPicture/mapoperate/components/operateProperty.vue
 create mode 100644 src/views/newMap/mapDraftPicture/mapoperate/config/list.vue
 create mode 100644 src/views/newMap/mapDraftPicture/mapoperate/device.vue
 create mode 100644 src/views/newMap/mapDraftPicture/mapoperate/index.vue
 create mode 100644 src/views/newMap/mapDraftPicture/mapoperate/multiSelect.vue

diff --git a/src/router/index.js b/src/router/index.js
index 180b90074..150820229 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -76,6 +76,7 @@ const IscsStationConfig = () => import('@/views/iscs/iscsSystem/stationConfig/in
 
 const NewMapDraft = () => import('@/views/newMap/newMapdraft/index');
 const NewMapDraftSystem = () => import('@/views/newMap/newMapdraftSystem/index');
+const MapDraftPicture = () => import('@/views/newMap/mapDraftPicture/index');
 const NewDesignPlatformUser = () => import('@/views/newMap/newDesignUser/index');
 
 const Taskmanage = () => import('@/views/lesson/taskmanage/list');
@@ -1356,6 +1357,11 @@ export const asyncRouter = [
                 component: NewMapDraftSystem,
                 hidden: true
             },
+            { // 地图画面管理
+                path: 'usermap/map/pictureDraw/:mapId/:view',
+                component: MapDraftPicture,
+                hidden: true
+            },
             {
                 path:'iscs/design',
                 redirect: '/iscs/design',
diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js
index d14ff73dc..30bf92c6f 100644
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@@ -24,10 +24,11 @@ export function handlerUrl(data) {
     if (process.env.NODE_ENV === 'development') {
         // const data = null;
         // BASE_API = 'https://joylink.club/jlcloud';
-        // BASE_API = 'https://test.joylink.club/jlcloud';
+        BASE_API = 'https://test.joylink.club/jlcloud';
+        // BASE_API = 'http://192.168.3.233/rtss-server';
         // BASE_API = 'http://114.116.51.125/jlcloud';
         // BASE_API = 'http://192.168.8.152:9000'; // 袁琪
-        BASE_API = 'http://192.168.3.94:9000'; // 旭强
+        // BASE_API = 'http://192.168.3.94:9000'; // 旭强
         // BASE_API = 'http://192.168.3.15:9000'; // 张赛
         // BASE_API = 'http://192.168.8.140:9000'; // 杜康
         // BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
diff --git a/src/views/jlmap3d/drive/jl3ddrive.vue b/src/views/jlmap3d/drive/jl3ddrive.vue
index efa228ca0..8f29e416e 100644
--- a/src/views/jlmap3d/drive/jl3ddrive.vue
+++ b/src/views/jlmap3d/drive/jl3ddrive.vue
@@ -1,20 +1,19 @@
 <template>
 
-  <div id="drivediv" class="jalmap3ddiv" >
+  <div id="drivediv" class="jalmap3ddiv">
 
-    <div style="position: absolute;right:50%;top:40px;z-index:10;background: #EBEBEB;" v-show="tuoguanbutton" @click="tuoguan">{{ tuoguanbuttonmsg }}</div>
-		<div style="position: absolute;right:50%;top:0%;z-index:10;background: #EBEBEB;" v-show="isTraining" >
-			<el-select v-model="value" :placeholder="initMsg" @change="currentsel" @visible-change="clickselect" >
-				<el-option
-					v-for="item in options"
-					:key="item.value"
-					:label="item.label"
-					:value="item.value"
-					:disabled="item.disabled"
-					>
-				</el-option>
-			</el-select>
-		</div>
+    <div v-show="tuoguanbutton" style="position: absolute;right:50%;top:40px;z-index:10;background: #EBEBEB;" @click="tuoguan">{{ tuoguanbuttonmsg }}</div>
+    <div v-show="isTraining" style="position: absolute;right:50%;top:0%;z-index:10;background: #EBEBEB;">
+      <el-select v-model="value" :placeholder="initMsg" @change="currentsel" @visible-change="clickselect">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          :disabled="item.disabled"
+        />
+      </el-select>
+    </div>
 
     <!-- <div class="trainstatus">
       {{$t('jlmap3d.trainGroupNumber')}}{{ trainnum }}</br>
@@ -30,7 +29,7 @@
         <el-button type="primary" @click="cctvplane">{{ cctvbuttonmsg }}</el-button>
         <el-button type="primary" @click="showmmiplane">{{ showbuttonmmimsg }}</el-button>
         <el-button type="primary" @click="showtmsplane">{{ showbuttontmsmsg }}</el-button>
-        <el-button type="primary" @click="back">{{backmsg}}</el-button>
+        <el-button type="primary" @click="back">{{ backmsg }}</el-button>
       </el-button-group>
     </div>
 
@@ -40,19 +39,18 @@
     <div id="jlsimulation" class="jlmap3ddraw">
       <canvas id="canvastexture" />
     </div>
-    <div id="jlcctv" v-show="cctvshow" class="jlmap3cctv">
-    </div>
+    <div v-show="cctvshow" id="jlcctv" class="jlmap3cctv" />
 
-    <div class="msg" v-show ="msgshow">
+    <div v-show="msgshow" class="msg">
       <div class="msgtext">
-        {{controlmsg}}
+        {{ controlmsg }}
       </div>
     </div>
 
     <Drive-Mmi v-if="mmishow" ref="mmiui" />
-    <Drive-Tms v-if="tmsshow" ref="tmsui"/>
-    <Drive-Control v-if="dcontrolshow" ref="dcontrol" :group-num="groupnum" :user-role="userrole"/>
-    <Equip-Box  v-if="equipboxshow" :group-num="groupnum" />
+    <Drive-Tms v-if="tmsshow" ref="tmsui" />
+    <Drive-Control v-if="dcontrolshow" ref="dcontrol" :group-num="groupnum" :user-role="userrole" />
+    <Equip-Box v-if="equipboxshow" :group-num="groupnum" />
     <psl v-if="pslShow" ref="psl" pop-class="xian-01__systerm" />
   </div>
 
@@ -72,7 +70,7 @@ import { simulationNotify, setTrainingCbtcInitTime } from '@/api/simulation';
 
 import { getPublishMapDetail, getPublish3dMapDetail } from '@/api/jlmap3d/load3ddata';
 import { getSimulationInfoNew } from '@/api/simulation';
-import { bindSimulationTrain,getSimulationTrainlistNew,getSimulationMembersNew,trainSimulationEb,trainSimulationForce,trainSimulationGear} from '@/jlmap3d/jl3ddrive/drivecontrol/simulation.js';
+import { bindSimulationTrain, getSimulationTrainlistNew, getSimulationMembersNew, trainSimulationEb, trainSimulationForce, trainSimulationGear} from '@/jlmap3d/jl3ddrive/drivecontrol/simulation.js';
 import { tuoguan3ddrive } from '@/api/jlmap3d/load3ddata';
 
 import { UrlConfig } from '@/scripts/ConstDic';
@@ -89,566 +87,561 @@ import EquipBox from '@/views/jlmap3d/drive/equipbox/equipbox';
 
 var train;
 export default {
-	name: 'Jl3dDrive',
-	components: {
-		DriveMmi,
-		DriveTms,
-    DriveControl,
-    EquipBox,
-    Psl
-	},
-	data() {
-		return {
-      groupnum:"",
-      userrole:'',
-
-      driveIndex:1500,
-			trainlist: null,
-			stationlist: null,
-			msgdata: null,
-			training: {
-				id: '',
-				name: '',
-				remarks: ''
-			},
-			mapdata: null,
-			jlmap3d: null,
-			selectmodel: null,
-      cctvshow:true,
-      equipboxmsg:"设备柜——隐藏",
-      pslmsg:"PSL",
-      pslCode:"",
-      pslShow:false,
-      cctvbuttonmsg: this.$t('jlmap3d.surveillanceHidden'),
-			mmishow: false,
-      tmsshow: false,
-			showbuttonmmimsg: this.$t('jlmap3d.trainInstrumentationMmiDisplay'),
-      showbuttontmsmsg: this.$t('jlmap3d.trainInstrumentationTmsDisplay'),
-      backmsg:this.$t('global.back'),
-			// trainnum: '',
-			// stoptimes: '',
-      dcontrolshow: true,
-      equipboxshow:false,
-      msgshow:false,
-      controlmsg:"不能选择其它列车",
-
-      tuoguanbutton:false,
-      tuoguanbuttonmsg:"托管",
-      tuoguanstatus:false,
-			isTraining:true,
-      options: [],
-			initMsg:"请选择列车",
-      value: '',
-      topid:null,
-      trainlist:null,
-      groupnum:"",
-      userrole:'',
-      nowdrive:null,
-		};
-	},
-	watch: {
-		'jlmap3d.nowspeed': {
-			handler: function (newVal, oldVal) {
-				if (newVal != oldVal) {
-					if (this.mmishow == true) {
-						this.$refs.mmiui.updatespeed(newVal);
-					}
-          // if(this.tmsshow == true){
-  				// 	this.$refs.tmsui.updatespeed(newVal);
-          // }
-				}
-			}
-		},
-		'jlmap3d.nowmxlen': {
-			handler: function (newVal, oldVal) {
-				if (newVal != oldVal) {
-					if (this.mmishow == true) {
-						this.$refs.mmiui.updatelen(newVal);
-					}
-				}
-			}
-		},
-		'jlmap3d.atpspeed': {
-			handler: function (newVal, oldVal) {
-				if (newVal != oldVal) {
-					if (this.mmishow == true) {
-						this.$refs.mmiui.updateatpspeed(newVal);
-					}
-				}
-			}
-		},
-		'jlmap3d.atospeed': {
-			handler: function (newVal, oldVal) {
-				if (newVal != oldVal) {
-					if (this.mmishow == true) {
-						this.$refs.mmiui.updateatospeed(newVal);
-					}
-				}
-			}
-		},
-		// 'jlmap3d.trainnum': {
-		// 	handler: function (newVal, oldVal) {
-		// 		if (newVal != oldVal) {
-		// 			this.trainnum = newVal;
-		// 		}
-		// 	}
-		// },
-		// 'jlmap3d.stime': {
-		// 	handler: function (newVal, oldVal) {
-		// 		if (newVal != oldVal) {
-		// 			this.stoptimes = newVal;
-		// 		}
-		// 	}
-		// },
-    'jlmap3d.drivecount': {
-			handler: function (newVal, oldVal) {
-				if (newVal != oldVal) {
-					this.$refs.mmiui.updatedrivedata(this.jlmap3d.drivedata);
-				}
-			}
-		},
-
-	},
-	beforeDestroy() {
-		if (this.jlmap3d) {
-			this.jlmap3d.webwork.postMessage('off');
-      this.jlmap3d.webwork.terminate();
-			this.jlmap3d.endsocket();
-			this.jlmap3d.dispose();
-			this.jlmap3d = null;
-
-			// this.$destroy();
-		}
-	},
-  destroyed(){
-    // window.removeEventListener('popstate', this.goBack, false);
-  },
-  computed: {
-    group() {
-      return this.$route.query.group;
+    name: 'Jl3dDrive',
+    components: {
+        DriveMmi,
+        DriveTms,
+        DriveControl,
+        EquipBox,
+        Psl
     },
-    userId() {
-        return this.$store.state.user ? this.$store.state.user.id : '';
+    data() {
+        return {
+            groupnum:'',
+            userrole:'',
+
+            driveIndex:1500,
+            trainlist: null,
+            stationlist: null,
+            msgdata: null,
+            training: {
+                id: '',
+                name: '',
+                remarks: ''
+            },
+            mapdata: null,
+            jlmap3d: null,
+            selectmodel: null,
+            cctvshow:true,
+            equipboxmsg:'设备柜——隐藏',
+            pslmsg:'PSL',
+            pslCode:'',
+            pslShow:false,
+            cctvbuttonmsg: this.$t('jlmap3d.surveillanceHidden'),
+            mmishow: false,
+            tmsshow: false,
+            showbuttonmmimsg: this.$t('jlmap3d.trainInstrumentationMmiDisplay'),
+            showbuttontmsmsg: this.$t('jlmap3d.trainInstrumentationTmsDisplay'),
+            backmsg:this.$t('global.back'),
+            // trainnum: '',
+            // stoptimes: '',
+            dcontrolshow: true,
+            equipboxshow:false,
+            msgshow:false,
+            controlmsg:'不能选择其它列车',
+
+            tuoguanbutton:false,
+            tuoguanbuttonmsg:'托管',
+            tuoguanstatus:false,
+            isTraining:true,
+            options: [],
+            initMsg:'请选择列车',
+            value: '',
+            topid:null,
+            nowdrive:null
+        };
     },
-  },
-	mounted() {
-		this.mmishow = true;
-    this.tmsshow = true;
-    // window.datanew = this.datanew;
-    window.updatestatus = this.updatestatus;
-
-    window.updateDriverTrust = this.updateDriverTrust;
-    window.updateDriveValue = this.updateDriveValue;
-    window.jl3dUpdatePslCode = this.jl3dUpdatePslCode;
-    if(this.$route.query.group){
-      getSimulationInfoNew(this.$route.query.group).then(netdata => {
-
-        if(netdata.data.type == "SCRIPT_MAKING"){
-          this.tuoguanbutton = true;
+    computed: {
+        group() {
+            return this.$route.query.group;
+        },
+        userId() {
+            return this.$store.state.user ? this.$store.state.user.id : '';
+        }
+    },
+    watch: {
+        'jlmap3d.nowspeed': {
+            handler: function (newVal, oldVal) {
+                if (newVal != oldVal) {
+                    if (this.mmishow == true) {
+                        this.$refs.mmiui.updatespeed(newVal);
+                    }
+                    // if(this.tmsshow == true){
+  				// 	this.$refs.tmsui.updatespeed(newVal);
+                    // }
+                }
+            }
+        },
+        'jlmap3d.nowmxlen': {
+            handler: function (newVal, oldVal) {
+                if (newVal != oldVal) {
+                    if (this.mmishow == true) {
+                        this.$refs.mmiui.updatelen(newVal);
+                    }
+                }
+            }
+        },
+        'jlmap3d.atpspeed': {
+            handler: function (newVal, oldVal) {
+                if (newVal != oldVal) {
+                    if (this.mmishow == true) {
+                        this.$refs.mmiui.updateatpspeed(newVal);
+                    }
+                }
+            }
+        },
+        'jlmap3d.atospeed': {
+            handler: function (newVal, oldVal) {
+                if (newVal != oldVal) {
+                    if (this.mmishow == true) {
+                        this.$refs.mmiui.updateatospeed(newVal);
+                    }
+                }
+            }
+        },
+        // 'jlmap3d.trainnum': {
+        // 	handler: function (newVal, oldVal) {
+        // 		if (newVal != oldVal) {
+        // 			this.trainnum = newVal;
+        // 		}
+        // 	}
+        // },
+        // 'jlmap3d.stime': {
+        // 	handler: function (newVal, oldVal) {
+        // 		if (newVal != oldVal) {
+        // 			this.stoptimes = newVal;
+        // 		}
+        // 	}
+        // },
+        'jlmap3d.drivecount': {
+            handler: function (newVal, oldVal) {
+                if (newVal != oldVal) {
+                    this.$refs.mmiui.updatedrivedata(this.jlmap3d.drivedata);
+                }
+            }
         }
-        this.inittrainlist();
-      });
-    }
 
-    if(this.$route.query.type == "DRIVE"){
-      this.backmsg = "退出";
-    }
+    },
+    beforeDestroy() {
+        if (this.jlmap3d) {
+            this.jlmap3d.webwork.postMessage('off');
+            this.jlmap3d.webwork.terminate();
+            this.jlmap3d.endsocket();
+            this.jlmap3d.dispose();
+            this.jlmap3d = null;
+
+            // this.$destroy();
+        }
+    },
+    destroyed() {
+    // window.removeEventListener('popstate', this.goBack, false);
+    },
+    mounted() {
+        this.mmishow = true;
+        this.tmsshow = true;
+        // window.datanew = this.datanew;
+        window.updatestatus = this.updatestatus;
+
+        window.updateDriverTrust = this.updateDriverTrust;
+        window.updateDriveValue = this.updateDriveValue;
+        window.jl3dUpdatePslCode = this.jl3dUpdatePslCode;
+        if (this.$route.query.group) {
+            getSimulationInfoNew(this.$route.query.group).then(netdata => {
+
+                if (netdata.data.type == 'SCRIPT_MAKING') {
+                    this.tuoguanbutton = true;
+                }
+                this.inittrainlist();
+            });
+        }
+
+        if (this.$route.query.type == 'DRIVE') {
+            this.backmsg = '退出';
+        }
 
     // if (window.history && window.history.pushState) {
     //   history.pushState(null, null, document.URL);
     //   window.addEventListener('popstate', this.goBack, false);
     // }
-		// this.$refs.mmiui.init();
-	},
-	methods: {
-   //  goBack(){
-   //    console.log(this.$route);
-   //    if(this.$route.query.type == "DRIVE"){
-   //      store.dispatch('LogOut').then(() => {
-   //          location.reload();
-   //      });
-   //    }else{
-   //      this.$emit('showdriving');
-   //      if(this.jlmap3d){
-   //        this.jlmap3d.eventoff();
-   //        this.jlmap3d.animateoff();
-   //      }
-   //
-   //      // this.jlmap3d = null;
-   //    }
-   // },
-		show: function (skinCode,group,zindex,isTraining) {
-			// console.log("show");
-			// console.log(skinCode);
-			// console.log(this.jlmap3d);
-      if(zindex){
-        this.driveIndex = zindex;
-        document.getElementById("drivediv").style.zIndex = zindex;
-      }
-			if (this.jlmap3d == null) {
-				this.init(skinCode,group);
-			} else {
-				// this.jlmap3d.restart();
-				this.jlmap3d.eventon();
-				this.jlmap3d.animateon();
-			}
-      if(isTraining){
-        // this.$refs.dcontrol.changeTrainSelect(isTraining);
-      }
-		},
-		init: function (skinCode,group) {
-			const mapdata = this.$store.getters['map/map'];
-			const dom = document.getElementById('app');
-      let translation = {
-        trainAtoOn: this.$t('jlmap3d.trainAtoOn'),
-        trainAtoOff: this.$t('jlmap3d.trainAtoOff'),
-        stopTime: this.$t('jlmap3d.stopTime')
-      };
-
-      let project = this.$route.query.project;
-      // console.log(project);
-      if(project){
-        this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group,project);
-      }else{
-        this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group,project);
-      }
-
-      // console.log(translation);
-			// this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group);
-			this.jlmap3d.eventon();
-      this.cctvshow = false;
-
-		},
-		raystand() {
-			this.jlmap3d.rayswitch('stand');
-		},
-		raytrain() {
-			this.jlmap3d.rayswitch('train');
-		},
-		raysection() {
-			this.jlmap3d.rayswitch('section');
-		},
-		raysignal() {
-			this.jlmap3d.rayswitch('signal');
-		},
-		rayswitch() {
-			this.jlmap3d.rayswitch('switch');
-		},
-		sstation(changedata) {
-			this.jlmap3d.updatecamera(changedata.mesh, 'station');
-		},
-		strain(changedata) {
-			if (changedata.dispose == false) {
-				this.jlmap3d.updatecamera(changedata, 'train');
-			}
-
-		},
-
-		back() {
-
-      if(this.$route.query.type == "DRIVE"){
-        store.dispatch('LogOut').then(() => {
-            location.reload();
-        });
-      }else{
-        this.$emit('showdriving');
-        this.jlmap3d.eventoff();
-        this.jlmap3d.animateoff();
-        // this.jlmap3d = null;
-      }
-
-
-
-		},
-		showmmiplane() {
-			if (this.mmishow == true) {
-				this.showbuttonmmimsg = this.$t('jlmap3d.trainInstrumentationMmiHidden');
-				this.mmishow = false;
-			} else {
-				this.showbuttonmmimsg = this.$t('jlmap3d.trainInstrumentationMmiDisplay');
-				this.mmishow = true;
-			}
-
-		},
-    showtmsplane() {
-      if (this.tmsshow == true) {
-        this.showbuttontmsmsg = this.$t('jlmap3d.trainInstrumentationTmsHidden');
-        this.tmsshow = false;
-      } else {
-        this.showbuttontmsmsg = this.$t('jlmap3d.trainInstrumentationTmsDisplay');
-        this.tmsshow = true;
-      }
-
+        // this.$refs.mmiui.init();
     },
-    datanew(){
-      this.dcontrolshow = true;
-    },
-    equipboxplane(){
-      if (this.equipboxshow == true) {
-        this.equipboxmsg = "设备柜——隐藏";
-        this.equipboxshow = false;
-      } else {
-        this.equipboxmsg = "设备柜——显示";
-        this.equipboxshow = true;
-      }
-
-    },
-    cctvplane() {
-			if (this.cctvshow == true) {
-				this.cctvbuttonmsg = this.$t('jlmap3d.surveillanceHidden');
-        this.cctvshow = false;
-        this.jlmap3d.cctvoff();
-			} else {
-				this.cctvbuttonmsg = this.$t('jlmap3d.surveillanceDisplay');
-        this.cctvshow = true;
-        this.jlmap3d.cctvon();
-			}
-
-		},
-
-    updatestatus(newdata){
-      // if(newdata.groupNumber){
-      //   this.trainnum = newdata.groupNumber;
-      //
-      //   updateDriveValue(this.trainnum);
-      // }
-      updatedoorlight(newdata);
-      // console.log(newdata.v);
-      updatetmsstatus(newdata);
-
-      if(this.$refs.mmiui){
-        this.$refs.mmiui.updatetrainstatus(newdata);
-      }
-
-
-      updatabuttonlight(newdata);
-    },
-    warningmsg(nowmsg){
-      this.controlmsg = nowmsg;
-      this.msgshow = true;
-      setTimeout(this.warningmsgoff,3000);
-    },
-    warningmsgoff(){
-      this.msgshow = false;
-    },
-    tuoguan(){
-      let posttrust = null;
-      if(this.tuoguanstatus){
-        posttrust = false;
-      }else{
-        posttrust = true;
-      }
-
-      tuoguan3ddrive(this.$route.query.group,{}).then(netdata => {
-        // this.$store.dispatch('training/updateMemberListInScript', {oldMemberId:this.oldMemberId, newMemberId:role, userId:this.userId});
-        this.tuoguanstatus = posttrust;
-        if(this.tuoguanstatus){
-          this.tuoguanbuttonmsg = "取消托管";
-        }else{
-          this.tuoguanbuttonmsg = "托管";
-        }
-      }).catch((error) => {
-
-      });
-    },
-    currentsel(selVal){
-      let oldgroupnum = this.groupnum;
-      this.groupnum = selVal;
-      bindSimulationTrain(this.group,this.groupnum).then(netdata => {
-        this.selVal = selVal;
-        this.dialogVisible = true;
-        // this.groupnum = selVal;
-        for(let i=0;i<this.trainlist.length;i++){
-          if(this.trainlist[i].groupNumber == this.groupnum){
-            // console.log(this.trainlist[i].gear);
-            // this.groupnum
-            this.$refs.dcontrol.centerstate(this.trainlist[i].gear);
-          }
-        }
-
-        this.nowdrive = this.groupnum;
-      }).catch(error => {
-        this.groupnum = oldgroupnum;
-        this.selVal = oldgroupnum;
-        this.$emit('warningmsg',error.message);
-        this.value = this.nowdrive;
-      });
-    },
-    clickselect(e){
-      if(e == true){
-
-        this.updatetrainlist();
-      }
-    },
-
-    updateDriverTrust(code,trustStatus){
-      if(this.tuoguanstatus != trustStatus){
-        this.tuoguanstatus = trustStatus;
-        if(this.tuoguanstatus){
-          this.tuoguanbuttonmsg = "取消托管";
-        }else{
-          this.tuoguanbuttonmsg = "托管";
-        }
-        this.$store.dispatch('training/updateMemberTrust', {deviceCode:code,trust:trustStatus});
-      }
-    },
-    inittrainlist(){
-      getSimulationTrainlistNew(this.group).then(netdata => {
-        this.options = [];
-        this.trainlist = netdata.data;
-        for(let i=0;i<netdata.data.length;i++){
-          let option= {
-              value: netdata.data[i].groupNumber,
-              label: netdata.data[i].groupNumber,
-              name:null,
+    methods: {
+        //  goBack(){
+        //    console.log(this.$route);
+        //    if(this.$route.query.type == "DRIVE"){
+        //      store.dispatch('LogOut').then(() => {
+        //          location.reload();
+        //      });
+        //    }else{
+        //      this.$emit('showdriving');
+        //      if(this.jlmap3d){
+        //        this.jlmap3d.eventoff();
+        //        this.jlmap3d.animateoff();
+        //      }
+        //
+        //      // this.jlmap3d = null;
+        //    }
+        // },
+        show: function (skinCode, group, zindex, isTraining, deviceCode) {
+            // console.log("show");
+            // console.log(skinCode);
+            // console.log(this.jlmap3d);
+            if (zindex) {
+                this.driveIndex = zindex;
+                document.getElementById('drivediv').style.zIndex = zindex;
             }
-            option.disabled = false;
+            if (this.jlmap3d == null) {
+                this.init(skinCode, group);
+            } else {
+                // this.jlmap3d.restart();
+                this.jlmap3d.eventon();
+                this.jlmap3d.animateon();
+            }
+            if (isTraining) {
+                // this.$refs.dcontrol.changeTrainSelect(isTraining);
+            }
+            if (deviceCode) {
+                this.value = deviceCode;
+                this.groupnum = deviceCode;
+            }
+        },
+        init: function (skinCode, group) {
+            const mapdata = this.$store.getters['map/map'];
+            const dom = document.getElementById('app');
+            const translation = {
+                trainAtoOn: this.$t('jlmap3d.trainAtoOn'),
+                trainAtoOff: this.$t('jlmap3d.trainAtoOff'),
+                stopTime: this.$t('jlmap3d.stopTime')
+            };
 
-            if(netdata.data[i].name){
-              option.label = netdata.data[i].name+"正在驾驶"+netdata.data[i].groupNumber;
-              this.initMsg = netdata.data[i].name+"正在驾驶"+netdata.data[i].groupNumber;
-              this.groupNumber = netdata.data[i].groupNumber;
-              option.disabled = true;
+            const project = this.$route.query.project;
+            // console.log(project);
+            if (project) {
+                this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode, this.$store, translation, group, project);
+            } else {
+                this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode, this.$store, translation, group, project);
             }
 
+            // console.log(translation);
+            // this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group);
+            this.jlmap3d.eventon();
+            this.cctvshow = false;
 
-            if(netdata.data[i].driverId){
-              if(netdata.data[i].driverId == this.userId){
+        },
+        raystand() {
+            this.jlmap3d.rayswitch('stand');
+        },
+        raytrain() {
+            this.jlmap3d.rayswitch('train');
+        },
+        raysection() {
+            this.jlmap3d.rayswitch('section');
+        },
+        raysignal() {
+            this.jlmap3d.rayswitch('signal');
+        },
+        rayswitch() {
+            this.jlmap3d.rayswitch('switch');
+        },
+        sstation(changedata) {
+            this.jlmap3d.updatecamera(changedata.mesh, 'station');
+        },
+        strain(changedata) {
+            if (changedata.dispose == false) {
+                this.jlmap3d.updatecamera(changedata, 'train');
+            }
 
-                this.selVal = netdata.data[i].groupNumber;
-                this.groupnum = netdata.data[i].groupNumber;
+        },
+
+        back() {
+
+            if (this.$route.query.type == 'DRIVE') {
+                store.dispatch('LogOut').then(() => {
+                    location.reload();
+                });
+            } else {
+                this.$emit('showdriving');
+                this.jlmap3d.eventoff();
+                this.jlmap3d.animateoff();
+                // this.jlmap3d = null;
+            }
+
+        },
+        showmmiplane() {
+            if (this.mmishow == true) {
+                this.showbuttonmmimsg = this.$t('jlmap3d.trainInstrumentationMmiHidden');
+                this.mmishow = false;
+            } else {
+                this.showbuttonmmimsg = this.$t('jlmap3d.trainInstrumentationMmiDisplay');
+                this.mmishow = true;
+            }
+
+        },
+        showtmsplane() {
+            if (this.tmsshow == true) {
+                this.showbuttontmsmsg = this.$t('jlmap3d.trainInstrumentationTmsHidden');
+                this.tmsshow = false;
+            } else {
+                this.showbuttontmsmsg = this.$t('jlmap3d.trainInstrumentationTmsDisplay');
+                this.tmsshow = true;
+            }
+
+        },
+        datanew() {
+            this.dcontrolshow = true;
+        },
+        equipboxplane() {
+            if (this.equipboxshow == true) {
+                this.equipboxmsg = '设备柜——隐藏';
+                this.equipboxshow = false;
+            } else {
+                this.equipboxmsg = '设备柜——显示';
+                this.equipboxshow = true;
+            }
+
+        },
+        cctvplane() {
+            if (this.cctvshow == true) {
+                this.cctvbuttonmsg = this.$t('jlmap3d.surveillanceHidden');
+                this.cctvshow = false;
+                this.jlmap3d.cctvoff();
+            } else {
+                this.cctvbuttonmsg = this.$t('jlmap3d.surveillanceDisplay');
+                this.cctvshow = true;
+                this.jlmap3d.cctvon();
+            }
+
+        },
+
+        updatestatus(newdata) {
+            // if(newdata.groupNumber){
+            //   this.trainnum = newdata.groupNumber;
+            //
+            //   updateDriveValue(this.trainnum);
+            // }
+            updatedoorlight(newdata);
+            // console.log(newdata.v);
+            updatetmsstatus(newdata);
+
+            if (this.$refs.mmiui) {
+                this.$refs.mmiui.updatetrainstatus(newdata);
+            }
+
+            updatabuttonlight(newdata);
+        },
+        warningmsg(nowmsg) {
+            this.controlmsg = nowmsg;
+            this.msgshow = true;
+            setTimeout(this.warningmsgoff, 3000);
+        },
+        warningmsgoff() {
+            this.msgshow = false;
+        },
+        tuoguan() {
+            let posttrust = null;
+            if (this.tuoguanstatus) {
+                posttrust = false;
+            } else {
+                posttrust = true;
+            }
+
+            tuoguan3ddrive(this.$route.query.group, {}).then(netdata => {
+                // this.$store.dispatch('training/updateMemberListInScript', {oldMemberId:this.oldMemberId, newMemberId:role, userId:this.userId});
+                this.tuoguanstatus = posttrust;
+                if (this.tuoguanstatus) {
+                    this.tuoguanbuttonmsg = '取消托管';
+                } else {
+                    this.tuoguanbuttonmsg = '托管';
+                }
+            }).catch((error) => {
+
+            });
+        },
+        currentsel(selVal) {
+            const oldgroupnum = this.groupnum;
+            this.groupnum = selVal;
+            bindSimulationTrain(this.group, this.groupnum).then(netdata => {
+                this.selVal = selVal;
                 this.dialogVisible = true;
-                for(let i=0;i<this.trainlist.length;i++){
-                  if(this.trainlist[i].groupNumber == this.groupnum){
-                    // console.log(this.trainlist[i].gear);
-                    // this.groupnum
-                    this.$refs.dcontrol.centerstate(this.trainlist[i].gear);
-                  }
+                // this.groupnum = selVal;
+                for (let i = 0; i < this.trainlist.length; i++) {
+                    if (this.trainlist[i].groupNumber == this.groupnum) {
+                        // console.log(this.trainlist[i].gear);
+                        // this.groupnum
+                        this.$refs.dcontrol.centerstate(this.trainlist[i].gear);
+                    }
                 }
 
-                this.value = this.groupnum;
                 this.nowdrive = this.groupnum;
-                // bindSimulationTrain(this.group,this.selVal).then(netdata => {
-                //
-                //
-                // }).catch(error => {
-                // });
+            }).catch(error => {
+                this.groupnum = oldgroupnum;
+                this.selVal = oldgroupnum;
+                this.$emit('warningmsg', error.message);
+                this.value = this.nowdrive;
+            });
+        },
+        clickselect(e) {
+            if (e == true) {
 
-              }
+                this.updatetrainlist();
             }
+        },
 
-
-          this.options.push(option);
-        }
-        this.options.sort(
-          function(obj1,obj2) {
-            let val1 = obj1.value;
-            let val2 = obj2.value;
-            return val1 - val2;
-          }
-        );
-      });
-      //获取当前录制托管状态
-      if(this.tuoguanbutton == true){
-
-        let netdata = this.$store.state.training.memberData;
-        for(let k in netdata){
-          if(netdata[k].userId == this.userId){
-            // console.log(this.$store.state.scriptRecord.type);
-            this.userrole = netdata[k].type;
-            if(netdata[k].trust){
-              this.tuoguanstatus = netdata[k].trust;
-              if(this.tuoguanstatus){
-                this.tuoguanbuttonmsg = "取消托管";
-              }else{
-                this.tuoguanbuttonmsg = "托管";
-              }
+        updateDriverTrust(code, trustStatus) {
+            if (this.tuoguanstatus != trustStatus) {
+                this.tuoguanstatus = trustStatus;
+                if (this.tuoguanstatus) {
+                    this.tuoguanbuttonmsg = '取消托管';
+                } else {
+                    this.tuoguanbuttonmsg = '托管';
+                }
+                this.$store.dispatch('training/updateMemberTrust', {deviceCode:code, trust:trustStatus});
             }
-            break;
-          }
+        },
+        inittrainlist() {
+            getSimulationTrainlistNew(this.group).then(netdata => {
+                this.options = [];
+                this.trainlist = netdata.data;
+                for (let i = 0; i < netdata.data.length; i++) {
+                    const option = {
+                        value: netdata.data[i].groupNumber,
+                        label: netdata.data[i].groupNumber,
+                        name:null
+                    };
+                    option.disabled = false;
 
-        }
-      }
-    },
-    updateDriveValue(newvalue){
+                    if (netdata.data[i].name) {
+                        option.label = netdata.data[i].name + '正在驾驶' + netdata.data[i].groupNumber;
+                        this.initMsg = netdata.data[i].name + '正在驾驶' + netdata.data[i].groupNumber;
+                        this.groupNumber = netdata.data[i].groupNumber;
+                        option.disabled = true;
+                    }
 
-      if(newvalue != this.value){
-        this.value = newvalue;
-        this.groupnum = newvalue;
-      }
-    },
-    jl3dUpdatePslCode(newPslCode){
-      if(newPslCode == null){
-        this.pslShow = false;
-      }else{
-        this.pslShow = true;
-      }
-      this.pslCode = newPslCode;
-    },
-    openPsl() {
-      this.$refs.psl.doShow({code:this.pslCode});
-    },
-    updatetrainlist(){
-      getSimulationTrainlistNew(this.group).then(netdata => {
-        console.log(netdata);
-        this.options = [];
-        this.trainlist = netdata.data;
-        for(let i=0;i<netdata.data.length;i++){
-          let option= {
-              value: netdata.data[i].groupNumber,
-              label: netdata.data[i].groupNumber,
-              name:null,
+                    if (netdata.data[i].driverId) {
+                        if (netdata.data[i].driverId == this.userId) {
+
+                            this.selVal = netdata.data[i].groupNumber;
+                            this.groupnum = netdata.data[i].groupNumber;
+                            this.dialogVisible = true;
+                            for (let i = 0; i < this.trainlist.length; i++) {
+                                if (this.trainlist[i].groupNumber == this.groupnum) {
+                                    // console.log(this.trainlist[i].gear);
+                                    // this.groupnum
+                                    this.$refs.dcontrol.centerstate(this.trainlist[i].gear);
+                                }
+                            }
+
+                            this.value = this.groupnum;
+                            this.nowdrive = this.groupnum;
+                            // bindSimulationTrain(this.group,this.selVal).then(netdata => {
+                            //
+                            //
+                            // }).catch(error => {
+                            // });
+
+                        }
+                    }
+
+                    this.options.push(option);
+                }
+                this.options.sort(
+                    function(obj1, obj2) {
+                        const val1 = obj1.value;
+                        const val2 = obj2.value;
+                        return val1 - val2;
+                    }
+                );
+            });
+            // 获取当前录制托管状态
+            if (this.tuoguanbutton == true) {
+
+                const netdata = this.$store.state.training.memberData;
+                for (const k in netdata) {
+                    if (netdata[k].userId == this.userId) {
+                        // console.log(this.$store.state.scriptRecord.type);
+                        this.userrole = netdata[k].type;
+                        if (netdata[k].trust) {
+                            this.tuoguanstatus = netdata[k].trust;
+                            if (this.tuoguanstatus) {
+                                this.tuoguanbuttonmsg = '取消托管';
+                            } else {
+                                this.tuoguanbuttonmsg = '托管';
+                            }
+                        }
+                        break;
+                    }
+
+                }
             }
-            option.disabled = false;
+        },
+        updateDriveValue(newvalue) {
 
-            if(netdata.data[i].name){
-              option.label = netdata.data[i].name+"正在驾驶"+netdata.data[i].groupNumber;
-              this.initMsg = netdata.data[i].name+"正在驾驶"+netdata.data[i].groupNumber;
-              this.groupNumber = netdata.data[i].groupNumber;
-              option.disabled = true;
+            if (newvalue != this.value) {
+                this.value = newvalue;
+                this.groupnum = newvalue;
             }
-            if(netdata.data[i].driverId){
-              if(netdata.data[i].driverId == this.userId){
-                this.selVal = netdata.data[i].groupNumber;
-                this.groupnum = netdata.data[i].groupNumber;
-              }
+        },
+        jl3dUpdatePslCode(newPslCode) {
+            if (newPslCode == null) {
+                this.pslShow = false;
+            } else {
+                this.pslShow = true;
             }
-          this.options.push(option);
-        }
-        this.options.sort(
-          function(obj1,obj2) {
-            let val1 = obj1.value;
-            let val2 = obj2.value;
-            return val1 - val2;
-          }
-        );
-      });
-      //获取当前录制托管状态
-      if(this.tuoguanbutton == true){
+            this.pslCode = newPslCode;
+        },
+        openPsl() {
+            this.$refs.psl.doShow({code:this.pslCode});
+        },
+        updatetrainlist() {
+            getSimulationTrainlistNew(this.group).then(netdata => {
+                console.log(netdata);
+                this.options = [];
+                this.trainlist = netdata.data;
+                for (let i = 0; i < netdata.data.length; i++) {
+                    const option = {
+                        value: netdata.data[i].groupNumber,
+                        label: netdata.data[i].groupNumber,
+                        name:null
+                    };
+                    option.disabled = false;
 
-        let netdata = this.$store.state.training.memberData;
-        for(let k in netdata){
-          if(netdata[k].userId == this.userId){
-            // console.log(this.$store.state.scriptRecord.type);
-            this.userrole = netdata[k].type;
-            if(netdata[k].trust){
-              this.tuoguanstatus = netdata[k].trust;
-              if(this.tuoguanstatus){
-                this.tuoguanbuttonmsg = "取消托管";
-              }else{
-                this.tuoguanbuttonmsg = "托管";
-              }
-            }
-            break;
-          }
+                    if (netdata.data[i].name) {
+                        option.label = netdata.data[i].name + '正在驾驶' + netdata.data[i].groupNumber;
+                        this.initMsg = netdata.data[i].name + '正在驾驶' + netdata.data[i].groupNumber;
+                        this.groupNumber = netdata.data[i].groupNumber;
+                        option.disabled = true;
+                    }
+                    if (netdata.data[i].driverId) {
+                        if (netdata.data[i].driverId == this.userId) {
+                            this.selVal = netdata.data[i].groupNumber;
+                            this.groupnum = netdata.data[i].groupNumber;
+                        }
+                    }
+                    this.options.push(option);
+                }
+                this.options.sort(
+                    function(obj1, obj2) {
+                        const val1 = obj1.value;
+                        const val2 = obj2.value;
+                        return val1 - val2;
+                    }
+                );
+            });
+            // 获取当前录制托管状态
+            if (this.tuoguanbutton == true) {
 
+                const netdata = this.$store.state.training.memberData;
+                for (const k in netdata) {
+                    if (netdata[k].userId == this.userId) {
+                        // console.log(this.$store.state.scriptRecord.type);
+                        this.userrole = netdata[k].type;
+                        if (netdata[k].trust) {
+                            this.tuoguanstatus = netdata[k].trust;
+                            if (this.tuoguanstatus) {
+                                this.tuoguanbuttonmsg = '取消托管';
+                            } else {
+                                this.tuoguanbuttonmsg = '托管';
+                            }
+                        }
+                        break;
+                    }
+
+                }
+
+            }
         }
 
-      }
     }
-
-
-	}
 };
 </script>
 
diff --git a/src/views/newMap/jointTrainingNew/index.vue b/src/views/newMap/jointTrainingNew/index.vue
index b54213418..c6e86f819 100644
--- a/src/views/newMap/jointTrainingNew/index.vue
+++ b/src/views/newMap/jointTrainingNew/index.vue
@@ -600,7 +600,7 @@ export default {
             if (this.$store.state.training.prdType == '04') {
                 this.panelShow = false;
                 this.drivingShow = true;
-                this.$refs.Jl3dDrive.show(this.mapId, this.group, 34, 'isTraining');
+                this.$refs.Jl3dDrive.show(this.mapId, this.group, 34, 'isTraining', this.deviceCode);
             } else {
                 const routeData = this.$router.resolve({
                     path:'/jlmap3d/sandbox',
@@ -733,8 +733,8 @@ export default {
                 } else if (item.messageType === 'PLAY_CHANGE' && item.userId == this.userId) {
                     this.userRole = item.type || 'AUDIENCE';
                     this.$store.dispatch('training/setRoleDeviceCode', item.deviceCode);
-                    this.setSimulationPrdType(this.centralizedStationMap[item.deviceCode]);
                     this.deviceCode = item.deviceCode;
+                    this.setSimulationPrdType(this.centralizedStationMap[item.deviceCode]);
                     this.$nextTick(() => {
                         if (item.deviceCode && this.$store.state.training.prdType !== '09') { this.setCenter(item.deviceCode); }
                     });
diff --git a/src/views/newMap/mapDraftPicture/index.vue b/src/views/newMap/mapDraftPicture/index.vue
new file mode 100644
index 000000000..e08374c54
--- /dev/null
+++ b/src/views/newMap/mapDraftPicture/index.vue
@@ -0,0 +1,660 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapPaint">
+      <div v-show="maskOpen" class="mask" />
+      <div class="map-view">
+        <div class="operation_box" :class="{'rightShow': draftShow}">
+          <el-button-group>
+            <el-button size="small" :disabled="!stepData.length" @click="revocation">撤销</el-button>
+            <el-button size="small" :disabled="!recoverStepData.length" @click="recover">恢复</el-button>
+          </el-button-group>
+        </div>
+        <div class="operation_box back_box">
+          <el-button size="small" @click="backRoute">返回</el-button>
+          <el-button size="small" style="margin-left: 5px;" @click="updateObjAxis">更新坐标</el-button>
+        </div>
+        <jlmap-visual ref="jlmapVisual" :draft-show="draftShow" @onSelect="clickEvent" @onMenu="onContextmenu" />
+      </div>
+      <div class="map-draft" :class="{'hide': draftShow}">
+        <div class="btn_left_box" @click="clickRightBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
+        <div class="box">
+          <map-operate
+            ref="mapOperate"
+            :map-info="mapInfo"
+            :selected="selected"
+            :map-saveing="mapSaveing"
+            @saveMapEvent="saveMapEvent"
+            @updateMapModel="updateMapModel"
+            @setCenter="setCenter"
+          />
+        </div>
+      </div>
+      <pop-menu ref="popMenu" :menu="menu" />
+    </div>
+  </transition>
+</template>
+<script>
+import { saveMap, verifyMap, getMapDetail, postBuildMapImport, getRouteNewList, getAutoReentryList } from '@/api/jmap/mapdraft';
+import { ViewMode, TrainingMode, getDeviceMenuByDeviceType, DeviceMenu } from '@/scripts/ConstDic';
+import JlmapVisual from '@/views/newMap/jlmapNew/index';
+import MapOperate from './mapoperate/index';
+import { EventBus } from '@/scripts/event-bus';
+import { mapGetters } from 'vuex';
+import PopMenu from '@/components/PopMenu';
+
+export default {
+    name: 'MapView',
+    components: {
+        JlmapVisual,
+        MapOperate,
+        PopMenu
+    },
+    data() {
+        return {
+            viewSelect: ViewMode.MIX,
+            mapSaveing: false,
+            ViewMode: ViewMode,
+            viewDraft: 'draft',
+            autoSaveTask: null,
+            selected: null,
+            mapInfo: { name: this.$t('map.pleaseSelectMap') },
+            oldDevice: null,
+            draftShow: false,
+            size: {
+                width: document.documentElement.clientWidth - 521,
+                height: document.documentElement.clientHeight - 90
+            },
+            updtModel: {
+                code: '',
+                scaling: '',
+                origin: {
+                    x: '',
+                    y: ''
+                }
+            },
+            menu: [],
+            menuNormal: []
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'stepData',
+            'recoverStepData',
+            'stationList'
+        ]),
+        maskOpen() {
+            return this.$store.state.config.maskOpen;
+        }
+    },
+    watch: {
+        '$store.state.map.mapDataLoadedCount': function () {
+            this.initAutoSaveTask();
+        },
+        '$store.state.app.windowSizeCount': function() {
+            this.setWindowSize();
+        },
+        $route() {
+            this.clearAutoSave();
+            this.$nextTick(() => {
+                this.loadInitPage();
+            });
+        },
+        '$store.state.menuOperation.menuCount': function () {
+            if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Cancel)) {
+                this.popDoShow(this.$store.state.menuOperation.menuPosition);
+            } else {
+                this.popDoClose();
+            }
+        }
+    },
+    mounted() {
+        this.setWindowSize();
+        this.loadInitPage();
+        EventBus.$on('SELECTON', () => {
+            this.selected = null;
+        });
+    },
+    beforeDestroy() {
+        EventBus.$off('SELECTON');
+        this.clearAutoSave();
+        this.$store.dispatch('map/mapClear');
+    },
+    methods: {
+        clickRightBtn() {
+            this.draftShow = !this.draftShow;
+        },
+        getMapOrigin() {
+            const dataZoom = this.$store.state.map.dataZoom;
+            if (dataZoom && dataZoom.offsetX) {
+                this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
+                this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
+                this.updtModel.scaling = dataZoom.scaleRate;
+            }
+        },
+        // 设置地图定位
+        mapLocation(item) {
+            if (item) {
+                this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: item.code });
+                this.popDoClose();
+            }
+        },
+        initMenu() {
+            this.menuNormal = [];
+            this.stationList.forEach(station => {
+                if (station.chargeStationCodeList && station.chargeStationCodeList.length) {
+                    const node = {
+                        label: station.name,
+                        children: []
+                    };
+                    station.chargeStationCodeList.forEach(item => {
+                        const next = this.$store.getters['map/getDeviceByCode'](item);
+                        node.children.push({
+                            code: next.code,
+                            label: next.name,
+                            handler: this.mapLocation
+                        });
+                    });
+                    this.menuNormal.push(node);
+                }
+            });
+            this.menu = [...this.menuNormal];
+        },
+        popDoShow(point) {
+            this.popClickEvent();
+            this.initMenu();
+            if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {
+                this.$refs.popMenu.resetShowPosition(point);
+            }
+        },
+        popClickEvent() {
+            const self = this;
+            window.onclick = function () {
+                self.popDoClose();
+            };
+        },
+        popDoClose() {
+            if (this.$refs && this.$refs.popMenu) {
+                this.$refs.popMenu.close();
+            }
+        },
+        updateObjAxis() {
+            this.getMapOrigin();
+            this.$confirm('您确认按当前绘图位置更新坐标及缩放比例？', this.$t('tip.hint'), {
+                confirmButtonText: this.$t('tip.confirm'),
+                cancelButtonText: this.$t('tip.cancel'),
+                type: 'warning'
+            }).then(() => {
+                const map = this.$store.state.map.map;
+                this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => {
+                    const param = {
+                        mapId: this.$route.params.mapId,
+                        skinVO: {
+                            code: this.$store.state.map.map.skinVO.code,
+                            name: this.$store.state.map.map.skinVO.name
+                        },
+                        origin: {
+                            x: this.updtModel.origin.x || map.origin.x,
+                            y: this.updtModel.origin.y || map.origin.y
+                        },
+                        scaling: this.updtModel.scaling
+                    };
+                    saveMap(Object.assign(map, param)).then(() => {
+                        this.$message.success(this.$t('map.updateSuccessfully'));
+                    }).catch(() => {
+                        this.$messageBox(this.$t('map.updateFailed'));
+                    });
+                });
+            }).catch(() => { });
+        },
+        setWindowSize() {
+            this.$nextTick(() => {
+                const width = this.$store.state.app.width;
+                const height = this.$store.state.app.height - 90;
+                this.$store.dispatch('config/resize', { width, height });
+            });
+        },
+        endViewLoading(isSuccess) {
+            if (!isSuccess) {
+                this.$store.dispatch('map/mapClear');
+            }
+
+            this.$nextTick(() => {
+                EventBus.$emit('viewLoading', false);
+            });
+        },
+        loadInitPage() {
+            this.$store.dispatch('training/changeMode', { mode: TrainingMode.MAP_EDIT });
+            this.$store.commit('map/clearStepData'); // 清空步骤
+            this.mapInfo = { name: this.$t('map.pleaseSelectMap'), id: this.$route.params.mapId };
+            if (parseInt(this.mapInfo.id)) {
+                this.mapInfo.name = this.$route.query.name;
+                getMapDetail(this.$route.params.mapId).then(response => {
+                    this.$store.dispatch('map/setMapData', response.data).then(() => {
+                        this.$store.dispatch('training/setMapDefaultState');
+                    });
+                    this.initAutoSaveTask();
+                }).catch((error) => {
+                    console.log(error, '加载地图错误提示');
+                    this.$message.error(this.$t('tip.failedLoadMap'));
+                    this.endViewLoading();
+                });
+            } else {
+                this.endViewLoading();
+            }
+        },
+        initAutoSaveTask() {
+            const timeout = 1000 * 60 * 3;
+            this.clearAutoSave(this.autoSaveTask);
+            if (this.viewDraft === 'draft') {
+                this.autoSaveTask = setInterval(this.saveMapEvent, timeout);
+            }
+        },
+        clearAutoSave() {
+            if (this.autoSaveTask) {
+                clearInterval(this.autoSaveTask);
+                this.autoSaveTask = null;
+            }
+        },
+        handleSelectControlPage (model) {
+            if (this.$refs.mapOperate) {
+                this.$refs.mapOperate.handleSelectControlPage(model);
+                this.$store.dispatch('menuOperation/setMapDrawSelectCount');
+            }
+        },
+        handleSelectPhysicalView(handle) {
+            if (this.$refs.jlmapVisual) {
+                this.$refs.jlmapVisual.setLevelVisible(handle);
+            }
+        },
+        clickEvent(em) {
+            const device = this.getDeviceByEm(em);
+            this.deviceHighLight(this.oldDevice, false);
+            this.deviceHighLight(device, true);
+            this.oldDevice = device;
+            this.onSelect(device);
+        },
+        // 获取设备数据
+        getDeviceByEm(em) {
+            var	device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
+            if (device) {
+                device._viewVal = em.val;
+            }
+            return device;
+        },
+        onSelect(device) {
+            this.selected = device || null;
+            this.selected && this.handleSelectControlPage(device);
+        },
+        onContextmenu(em) {
+            this.point = {
+                x: em.clientX,
+                y: em.clientY
+            };
+            if (!em.deviceType) {
+                var menu = getDeviceMenuByDeviceType('Cancel');
+                this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
+            }
+        },
+        verifySectionPoint(map) { // 校验区段坐标不为空
+            let flag = true;
+            map.sectionList.forEach(elem => {
+                if (elem.points.length > 0) {
+                    for (let index = 0; index < elem.points.length; index++) {
+                        if (String(elem.points[index].x) === 'undefined' || String(elem.points[index].y) === 'undefined') {
+                            this.$message(`${elem.name}${this.$t('tip.sectionPointsDeficiency')}`);
+                            flag = false;
+                        }
+                    }
+                } else {
+                    this.$message(this.$t('tip.sectionPointsDeficiency'));
+                    flag = false;
+                }
+            });
+            return flag;
+        },
+        verifySectionRelation(map) {
+            let flag = true;
+            const tipInfoList = [];
+            map.sectionList.forEach(section => {
+                section.type === '01' && map.sectionList.forEach(item => {
+                    if (section.code !== item.code && item.type === '01' && this.checkSectionPointsHasCoincide(section.points, item.points) && !this.checkCorrelation(section, item)) {
+                        tipInfoList.push('区段' + section.name + '(' + section.code + '): 或者区段' + item.name + '(' + item.code + ')' + '关联关系设置错误！' );
+                    }
+                });
+            });
+            if (!tipInfoList.length) {
+                flag = true;
+            } else {
+                flag = false;
+                this.$messageBox(this.$t('tip.dataValidationFailed'));
+                this.tableToExcel(tipInfoList);
+            }
+            return flag;
+        },
+        async verifyInterlockDevice(map) {
+            let flag = true;
+            const tipInfoList = [];
+            const routeCodeList = [];
+            const cycleCodeList = [];
+            const resp1 = await getRouteNewList(this.$route.params.mapId, {pageSize:9999, pageNum:1});
+            if (resp1.data && resp1.data.list) {
+                resp1.data.list.forEach(item => {
+                    routeCodeList.push(item.code);
+                });
+            }
+            const resp2 = await getAutoReentryList(this.$route.params.mapId, {pageSize:9999, pageNum:1});
+            if (resp2.data && resp2.data.list) {
+                resp2.data.list.forEach(item => {
+                    cycleCodeList.push(item.code);
+                });
+            }
+            map.cycleButtonList.forEach(cycleButton => {
+                if (!cycleCodeList.includes(cycleButton.cycleCode)) {
+                    flag = false;
+                    tipInfoList.push('自动折返功能按钮' + cycleButton.name + '(' + cycleButton.code + ')' + '的关联自动折返数据不存在！');
+                }
+            });
+            map.automaticRouteButtonList.forEach(routeButton => {
+                if (!routeCodeList.includes(routeButton.automaticRouteCode)) {
+                    flag = false;
+                    tipInfoList.push('自动进路功能按钮' + routeButton.name + '(' + routeButton.code + ')' + '的关联进路数据不存在！');
+                }
+            });
+            if (!flag) {
+                this.$messageBox(this.$t('tip.dataValidationFailed'));
+                this.tableToExcel(tipInfoList);
+            }
+            return flag;
+        },
+        verifyStationPosition(map) {
+            let flag = true;
+            const tipInfoList = [];
+            map.stationStandList.forEach(stationStand => {
+                const section = this.$store.getters['map/getDeviceByCode'](stationStand.standTrackCode);
+                const list = [];
+                section && section.points.forEach(point => {
+                    list.push(point.x);
+                });
+                if (stationStand.position.x > Math.max(...list) || stationStand.position.x < Math.min(...list)) {
+                    flag = false;
+                    tipInfoList.push('站台' + stationStand.name + '(' + stationStand.code + ')' + '位置偏移出关联站台轨，请检查关联站台轨是否正确！');
+                }
+            });
+            if (!flag) {
+                this.$messageBox(this.$t('tip.dataValidationFailed'));
+                this.tableToExcel(tipInfoList);
+            }
+            return flag;
+        },
+        verifySignalPosition(map) {
+            let flag = true;
+            const tipInfoList = [];
+            map.signalList.forEach(signal => {
+                const section = this.$store.getters['map/getDeviceByCode'](signal.sectionCode);
+                if (section) {
+                    const offsetX = signal.positionPoint ? signal.positionPoint.x : 0;
+                    const signalPositionX = signal.position.x - offsetX;
+                    const max = Math.max(section.points[section.points.length - 1].x, section.points[0].x);
+                    const min = Math.min(section.points[section.points.length - 1].x, section.points[0].x);
+                    if (signalPositionX < min && signalPositionX > max) {
+                        tipInfoList.push('信号机' + signal.name + '(' + signal.code + ')未在其关联的区段' + section.name + '(' + section.code + ')里');
+                    }
+                } else {
+                    tipInfoList.push('信号机' + signal.name + '(' + signal.code + ')所关联的区段不存在');
+                }
+            });
+            if (!tipInfoList.length) {
+                flag = true;
+            } else {
+                flag = false;
+                this.$messageBox(this.$t('tip.dataValidationFailed'));
+                this.tableToExcel(tipInfoList);
+            }
+            return flag;
+        },
+        checkPointsCoincide(point1, point2) { // 校验两点是否重合
+            if (point1 && point2) {
+                return point1.x === point2.x && point1.y === point2.y;
+            }
+            return false;
+        },
+        checkSectionPointsHasCoincide(points1, points2) { // 校验两区段的左右点是否有重合
+            return points1.length && points2.length && (this.checkPointsCoincide(points1[0], points2[0]) || this.checkPointsCoincide(points1[0], points2[points2.length - 1]) || this.checkPointsCoincide(points1[points1.length - 1], points2[points2.length - 1]) || this.checkPointsCoincide(points1[points1.length - 1], points2[0]));
+        },
+        checkCorrelation(section1, section2) { // 校验后者是否与前者有关联关系
+            return section1.leftSectionCode === section2.code || section1.rightSectionCode === section2.code;
+        },
+        saveMapEvent() { // 保存地图
+            const map = this.$store.state.map.map;
+            if (this.$refs.jlmapVisual && map && parseInt(this.$route.params.mapId)) {
+                this.mapSaveing = true;
+                this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => { // 草稿地图关系处理
+                    saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(() => {
+                        this.$message.success(this.$t('tip.saveSuccessfully'));
+                        this.mapSaveing = false;
+                        this.initAutoSaveTask();
+                    }).catch(error => {
+                        console.log(error);
+                        this.$messageBox(this.$t('tip.saveFailed'));
+                        this.mapSaveing = false;
+                        if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
+                            this.clearAutoSave();
+                        } else {
+                            this.initAutoSaveTask();
+                        }
+                    });
+                }).catch(error => {
+                    console.log(error, '错误提示');
+                    this.mapSaveing = false;
+                    this.$message(this.$t('tip.saveFailed'));
+                });
+            }
+        },
+        async checkOver() {
+            if (this.$refs.jlmapVisual) {
+                const map = this.$store.state.map.map;
+                if (map && this.$route.params.mapId) {
+                    const checkInterlockDevice = await this.verifyInterlockDevice(map);
+                    if (this.verifySectionRelation(map) && this.verifySignalPosition(map) && checkInterlockDevice && this.verifyStationPosition(map)) {
+                        verifyMap(this.$route.params.mapId).then(res => {
+                            if (res.data.length) {
+                                this.tableToExcel(res.data);
+                                this.$messageBox(this.$t('tip.dataValidationFailed'));
+                            } else {
+                                this.$message.success(this.$t('tip.dataValidationSuccess'));
+                            }
+                        }).catch(() => {
+                            this.$message.error(this.$t('tip.requestFailed'));
+                        });
+                    }
+                }
+            }
+        },
+        tableToExcel(data) {
+            const filterVal = ['index'];
+            const arr = [];
+            data.forEach(item => {
+                arr.push({ index: item });
+            });
+            const dataList = this.formatJson(filterVal, arr);
+			import('@/utils/Export2Excel').then(excel => { excel.export_json_to_excel([this.$t('tip.dataQuestion')], dataList, this.$t('tip.dataList')); });
+        },
+        formatJson(filterVal, jsonData) {
+            return jsonData.map(v => filterVal.map(j => v[j]));
+        },
+
+        backRoute() {
+            this.$router.push({ path: `/design/usermap/home` });
+        },
+        updateMapModel(models) { // 创建 跟新元素
+            this.$store.dispatch('map/updateSystemMapDevices', models);
+        },
+        // 撤销
+        revocation() {
+            this.$store.dispatch('map/setRevocation');
+        },
+        // 恢复
+        recover() {
+            this.$store.dispatch('map/setRecover');
+        },
+        // 设置显示中心
+        setCenter(code) {
+            this.$refs.jlmapVisual.setCenter(code);
+            const device = this.$store.getters['map/getDeviceByCode'](code);
+            this.deviceHighLight(this.oldDevice, false);
+            this.deviceHighLight(device, true);
+            this.oldDevice = device;
+        },
+        createMap() {
+            this.$refs.mapCreate.show();
+        },
+        importf() { // 导入地图jsons数据
+            const loading = this.$loading({
+                lock: true,
+                text: '正在导入中...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            setTimeout(() => {
+                const obj = this.$refs.files;
+                if (!obj.files) return;
+                const f = obj.files[0];
+                const reader = new FileReader();
+                const that = this;
+                reader.readAsText(f, 'utf-8');
+                reader.onload = function(e) {
+                    const data = e.target.result;
+                    postBuildMapImport(JSON.parse(data)).then(() => {
+                        loading.close();
+                        that.$message.success('导入成功！');
+                        that.refresh();
+                        loading.close();
+                    }).catch(error => {
+                        loading.close();
+                        that.$message.error('导入失败' + error.message);
+                    });
+                    obj.value = '';
+                };
+            });
+        },
+        // 高亮设备
+        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);
+                }
+            }
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+/deep/ {
+	.menu-item{
+		background: #f1ecec;
+		.pop-menu {
+			background: #5F9EA0;
+		}
+	}
+}
+.mask{
+	opacity: 0;
+	background: #000;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 9;
+}
+.operation_box{
+	position: absolute;
+	right: 20px;
+	top: 15px;
+	z-index: 9;
+	&.rightShow{
+		right: 540px;
+	}
+}
+.back_box{
+	left: 10px;
+	display: inline-block;
+	width: 180px;
+}
+.btn_left_box{
+	position: absolute;
+	left: 0;
+	top: 50%;
+	padding: 8px 3px;
+	background: #fff;
+	z-index: 10;
+	transform: translateX(-22px);
+	cursor: pointer;
+	border-radius: 5px 0 0 5px;
+}
+
+.box{
+	height: 100%;
+}
+
+.mapPaint{
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+}
+
+.map-view {
+	float: left;
+	width: 100%;
+	position: relative;
+}
+
+.map-draft {
+	width: 520px;
+	height: 100%;
+	position: absolute;
+	right: 0;
+	transform: translateX(520px);
+	transition: all 0.5s;
+	background: #fff;
+	z-index: 9;
+	/deep/{
+		.v-modal{
+			opacity: 0;
+		}
+	}
+	&.hide{
+		transform: translateX(0);
+	}
+}
+
+.uploadDemo {
+	position: relative;
+	overflow: hidden;
+	float: right;
+	padding: 3px 0;
+	margin-right: 3px;
+	cursor: pointer;
+
+	input {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+}
+</style>
diff --git a/src/views/newMap/mapDraftPicture/mapoperate/components/createOperate.vue b/src/views/newMap/mapDraftPicture/mapoperate/components/createOperate.vue
new file mode 100644
index 000000000..33535965d
--- /dev/null
+++ b/src/views/newMap/mapDraftPicture/mapoperate/components/createOperate.vue
@@ -0,0 +1,50 @@
+<template>
+  <div style="height:100%">
+    <div class="view-control-content">
+      <config-list ref="createForm" :form="createForm" :form-model="addModel" :rules="createRules" />
+    </div>
+    <div class="button_box">
+      <el-button-group class="map-draft-group">
+        <el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
+      </el-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import ConfigList from '../config/list';
+export default {
+    name:'CreateOperate',
+    components: {
+        ConfigList
+    },
+    props:{
+        createForm:{
+            type:Object,
+            required:true
+        },
+        addModel:{
+            type:Object,
+            required:true
+        },
+        createRules:{
+            type:Object,
+            required:true
+        }
+    },
+    methods:{
+        create() {
+            this.$refs['createForm'].validate((valid) => {
+                if (valid) {
+                    this.$emit('create');
+                }
+            });
+        },
+        resetFields() {
+            this.$refs.createForm && this.$refs.createForm.resetFields();
+        },
+        resetForm() {
+            this.$refs.createForm.resetForm();
+        }
+    }
+};
+</script>
diff --git a/src/views/newMap/mapDraftPicture/mapoperate/components/operateProperty.vue b/src/views/newMap/mapDraftPicture/mapoperate/components/operateProperty.vue
new file mode 100644
index 000000000..bc031b16e
--- /dev/null
+++ b/src/views/newMap/mapDraftPicture/mapoperate/components/operateProperty.vue
@@ -0,0 +1,67 @@
+<template>
+  <div style="height:100%">
+    <div class="view-control-content">
+      <config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
+    </div>
+    <div class="button_box">
+      <el-button-group class="map-draft-group">
+        <el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
+      </el-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import ConfigList from '../config/list';
+export default {
+    name:'OperateProperty',
+    components: {
+        ConfigList
+    },
+    props:{
+        form:{
+            type:Object,
+            required:true
+        },
+        editModel:{
+            type:Object,
+            required:true
+        },
+        rules:{
+            type:Object,
+            required:true
+        },
+        type:{
+            type:String,
+            required:true
+        }
+    },
+    data() {
+        return {
+            isDeleteHide:true
+        };
+    },
+    methods:{
+        // 修改对象
+        edit() {
+            this.$refs['dataform'].validate((valid) => {
+                if (valid) {
+                    const data = Object.assign({_type: this.type}, this.editModel);
+                    if (this.type == 'Text') {
+                        data.content = `${this.editModel.prepend}::${this.editModel.content}`;
+                    }
+                    this.$emit('updateMapModel', data);
+                    this.$emit('clearDeviceSelect');
+                } else {
+                    this.$message('还有属性未填写，修改未生效！');
+                }
+            });
+        },
+        resetFields() {
+            this.$refs.dataform && this.$refs.dataform.resetFields();
+        },
+        clearValidate() {
+            this.$refs.dataform && this.$refs.dataform.clearValidate();
+        }
+    }
+};
+</script>
diff --git a/src/views/newMap/mapDraftPicture/mapoperate/config/list.vue b/src/views/newMap/mapDraftPicture/mapoperate/config/list.vue
new file mode 100644
index 000000000..48f18b520
--- /dev/null
+++ b/src/views/newMap/mapDraftPicture/mapoperate/config/list.vue
@@ -0,0 +1,477 @@
+<template>
+  <el-form ref="form" :label-width="form.labelWidth" size="mini" :rules="rules" :model="formModel" class="form_data">
+    <template v-for="(items, index) in form.items">
+      <fieldset v-if="items.item.length" :key="index" :class="items.name?'card':'noCard'">
+        <legend class="card_title">{{ items.name }}</legend>
+        <template v-for="item in items.item">
+          <template v-if="checkFieldType(item, 'select')">
+            <el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-select
+                v-model="formModel[item.prop]"
+                filterable
+                :placeholder="item.placeholder"
+                :disabled="item.disabled"
+                :clearable="item.clearable"
+                @change="((val)=>{deviceChange(val, item)})"
+              >
+                <el-option
+                  v-for="option in item.options"
+                  :key="option[item.optionValue]"
+                  :label="handleLabel(option, item.optionLabel)"
+                  :value="option[item.optionValue]"
+                />
+              </el-select>
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'multiSelect')">
+            <el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-select
+                v-model="formModel[item.prop]"
+                filterable
+                multiple
+                :placeholder="item.placeholder"
+                :disabled="item.disabled"
+                :clearable="item.clearable"
+                @change="((val)=>{deviceChange(val, item)})"
+              >
+                <el-option
+                  v-for="option in item.options"
+                  :key="option[item.optionValue]"
+                  :label="handleLabel(option, item.optionLabel)"
+                  :value="option[item.optionValue]"
+                />
+              </el-select>
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'selectHover')">
+            <el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-select
+                v-model="formModel[item.prop]"
+                filterable
+                :placeholder="item.placeholder"
+                :disabled="item.disabled"
+                :clearable="item.clearable"
+                @change="((val)=>{deviceChange(val, item)})"
+              >
+                <el-option
+                  v-for="option in item.options"
+                  :key="option.code"
+                  :label="handleLabel(option, item.optionLabel)"
+                  :value="option.code"
+                />
+              </el-select>
+              <el-button
+                :type="item.buttonShowType ? 'danger' : 'primary'"
+                @click="item.hover(item.buttonType)"
+              >{{ $t('map.activate') }}</el-button>
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'multiSelectHover')">
+            <el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-select
+                v-model="formModel[item.prop]"
+                filterable
+                multiple
+                :placeholder="item.placeholder"
+                :disabled="item.disabled"
+                :clearable="item.clearable"
+                @change="((val)=>{deviceChange(val, item)})"
+              >
+                <el-option
+                  v-for="option in item.options"
+                  :key="option.code"
+                  :label="handleLabel(option, item.optionLabel)"
+                  :value="option.code"
+                />
+              </el-select>
+              <el-button
+                :type="item.buttonShowType ? 'danger' : 'primary'"
+                @click="item.hover(item.buttonType)"
+              >{{ $t('map.activate') }}</el-button>
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'input')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-input v-model="formModel[item.prop]" type="text" :disabled="item.disabled" maxlength="30" :show-word-limit="true" @input="((val)=>{deviceChange(val, item)})" />
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'number')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <template v-if="!item.firstLevel">
+                <template>
+                  <el-input-number v-model="formModel[item.prop]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" style="width: 140px" @change="((val)=>{deviceChange(val,item)})" />
+                </template>
+                <span class="numberSpan">{{ item.placeholder }}</span>
+                <el-button v-if="item.button" type="primary" size="mini" class="numberBtn" @click="item.clickFunction">{{ item.buttonText }}</el-button>
+              </template>
+              <template v-else>
+                <el-input-number v-model="formModel[item.firstLevel][item.secondLevel]" :min="item.min" :max="item.max" :label="item.label" :disabled="item.disabled" />
+                <span class="numberSpan">{{ item.placeholder }}</span>
+                <el-button v-if="item.button" type="primary" size="mini" class="numberBtn" @click="item.clickFunction">{{ item.buttonText }}</el-button>
+              </template>
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'color')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-color-picker v-model="formModel[item.prop]" show-alpha :predefine="skins" :disabled="item.disabled" />
+            </el-form-item>
+          </template>
+
+          <template v-if="checkFieldType(item, 'radio')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-radio-group v-model="formModel[item.prop]" :disabled="item.disabled">
+                <el-radio v-for="(opts, indexs) in item.radioList" :key="indexs" :border="item.border" :label="opts[item.optionValue]">{{ opts[item.optionLabel] }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </template>
+          <!-- 坐标点并列显示 -->
+          <template v-if="checkFieldType(item, 'coordinate')">
+            <div v-if="!item.isHidden" :key="item.prop" class="coordinate">
+              <span class="title" :style="{width: item.width}">{{ item.label }}</span>
+              <div v-for="opt in item.children" :key="opt.code" class="listWidth">
+                <el-form-item :label="opt.label" :prop="opt.prop" :label-width="opt.labelWidth">
+                  <template>
+                    <el-input-number v-model="formModel[opt.firstLevel][opt.secondLevel]" :label="opt.label" :disabled="opt.disabled" @change="((val)=>{deviceChange(val, opt)})" />
+                  </template>
+                </el-form-item>
+              </div>
+            </div>
+          </template>
+          <template v-if="checkFieldType(item, 'sectionUnit')">
+            <div :key="item.prop" class="coordinate">
+              <span class="title" :style="{width: item.width}">{{ item.label }}</span>
+              <div class="point-section">
+                <template v-for="(sectionUnit, j) in formModel[item.prop]">
+                  <div :key="j" class="sectionUnit">
+                    <el-form-item label="左端区段" :prop="'sectionUnitList[' + j + '].leftCode'" label-width="70px">
+                      <el-select v-model="sectionUnit.leftCode" filterable placeholder="请选择" clearable class="sectionUnitCode">
+                        <el-option
+                          v-for="elem in item.options"
+                          :key="elem.code"
+                          :label="elem.name"
+                          :value="elem.code"
+                        />
+                      </el-select>
+                      <el-button
+                        :type="item.buttonShowType && item.listIndex === ('leftCode' + j) ? 'danger' : 'primary'"
+                        @click="item.hover(item.buttonType, `leftCode${j}`)"
+                      >{{ $t('map.activate') }}</el-button>
+                    </el-form-item>
+                    <el-form-item label="右端区段" :prop="'sectionUnitList[' + j + '].rightCode'" label-width="70px">
+                      <el-select v-model="sectionUnit.rightCode" filterable placeholder="请选择" clearable class="sectionUnitCode">
+                        <el-option
+                          v-for="elem in item.options"
+                          :key="elem.code"
+                          :label="elem.name"
+                          :value="elem.code"
+                        />
+                      </el-select>
+                      <el-button
+                        :type="item.buttonShowType && item.listIndex === ('rightCode' + j) ? 'danger' : 'primary'"
+                        @click="item.hover(item.buttonType, `rightCode${j}`)"
+                      >{{ $t('map.activate') }}</el-button>
+                      <el-button type="success" icon="el-icon-plus" circle @click="item.addSectionUnit(j)" />
+                      <el-button v-if="j" type="danger" icon="el-icon-delete" circle @click="item.delSectionUnit(j)" />
+                    </el-form-item>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+          <!-- 多个坐标点绘制 -->
+          <template v-if="checkFieldType(item, 'points')">
+            <div v-if="!item.isHidden" :key="item.prop" class="coordinate">
+              <span class="title" :style="{width: item.width}">{{ item.label }}</span>
+              <div class="point-section">
+                <template v-for="(point, j) in formModel[item.prop]">
+                  <div :key="j" style="overflow: hidden;">
+                    <span v-if="!item.hiddenSpan" class="pointsEach" :style="{'margin-right': j == 0 || j == formModel[item.prop].length - 1 ? '9px' : '5px'}">{{ j == 0 ? '起 点' : j == formModel[item.prop].length - 1 ? '终 点' : `中点${j}` }}</span>
+                    <el-form-item
+                      label=""
+                      :prop="'points[' + j + '].x'"
+                      class="pointsEachItem"
+                      label-width="0px"
+                    >
+                      <el-input-number v-model="point.x" :disabled="item.pointDisabled" />
+                    </el-form-item>
+                    <span class="pointsEachNext">, </span>
+                    <el-form-item
+                      label=""
+                      :prop="'points[' + j + '].y'"
+                      class="pointsEachItem"
+                      style="margin-right: 5px;"
+                      label-width="4px"
+                    >
+                      <el-input-number v-model="point.y" :disabled="item.pointDisabled" />
+                    </el-form-item>
+                    <el-button
+                      icon="el-icon-plus"
+                      :disabled="item.pointDisabled"
+                      circle
+                      class="point-button"
+                      @click="item.addPoint(j)"
+                    />
+                    <el-button
+                      icon="el-icon-minus"
+                      :disabled="j == 0 || j == formModel[item.prop].length - 1"
+                      circle
+                      class="point-button"
+                      style="margin-left: 4px;"
+                      @click="item.delPoint(j)"
+                    />
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+          <!-- 多个坐标点绘制 -->
+          <template v-if="checkFieldType(item, 'coordinatePoint')">
+            <div :key="item.prop" class="coordinate">
+              <span class="title" :style="{width: item.width}">{{ item.label }}</span>
+              <div class="point-section" :style="{ width: `calc(100% - 10px - ${item.width})` }">
+                <template v-for="(point, j) in formModel[item.prop]">
+                  <div :key="j" style="overflow: hidden;">
+                    <span style="display: table; margin-right: 6px; font-size: 14px; float: left; line-height: 28px;">{{ j + 1 }}.</span>
+                    <el-form-item style="display: table; float: left;" label-width="0px">
+                      <el-input-number v-model="point.x" :disabled="item.pointDisabled" />
+                    </el-form-item>
+                    <span style="display: table; margin-left: 8px; float: left; line-height: 28px;">, </span>
+                    <el-form-item style="display: table; float: left; margin-right: 5px;" label-width="4px">
+                      <el-input-number v-model="point.y" :disabled="item.pointDisabled" />
+                    </el-form-item>
+                    <el-button
+                      icon="el-icon-plus"
+                      :disabled="item.pointDisabled"
+                      circle
+                      class="point-button"
+                      @click="item.addPoint(j)"
+                    />
+                    <el-button
+                      icon="el-icon-minus"
+                      :disabled="j == 0"
+                      circle
+                      class="point-button"
+                      style="margin-left: 4px;"
+                      @click="item.delPoint(j)"
+                    />
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+          <template v-if="checkFieldType(item, 'checkbox')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-checkbox v-model="formModel[item.prop]" :disabled="item.disabled" @change="((val)=>{deviceChange(val, item)})" />
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'font')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-font v-model="formModel[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" />
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'fontContent')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-input v-model="formModel[item.content]" :placeholder="item.placeholder" class="input-with-select">
+                <el-select slot="prepend" v-model="formModel[item.prepend]" :placeholder="item.placeholder">
+                  <el-option :label="$t('map.horizontal')" value="H" />
+                  <el-option :label="$t('map.vertical')" value="V" />
+                </el-select>
+              </el-input>
+            </el-form-item>
+          </template>
+          <template v-if="checkFieldType(item, 'lengthFact')">
+            <div v-if="!item.isHidden" :key="item.prop" class="coordinate">
+              <span class="title" :style="{width: item.width}">{{ item.label }}</span>
+              <div class="point-section">
+                <template v-for="(elem, j) in formModel[item.prop]">
+                  <div :key="j" style="overflow: hidden;">
+                    <el-form-item :label="elem.name" :prop="'logicLengthList[' + j + '].lengthFact'" label-width="20px">
+                      <el-input-number v-model="elem.lengthFact" :min="0" :precision="3" style="width: 120px;" /><span>米</span>
+                      <el-button v-if="!j" type="primary" size="mini" style="margin-left: 20px;" @click="item.mergeLength">合并长度</el-button>
+                    </el-form-item>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </template>
+      </fieldset>
+    </template>
+    <slot />
+  </el-form>
+</template>
+
+<script>
+import ElFont from '@/views/components/font/index';
+export default {
+    name: 'ConfigList',
+    components: {
+        ElFont
+    },
+    props: {
+        formModel: {
+            type: Object,
+            required: true
+        },
+        form: {
+            type: Object,
+            required: true
+        },
+        rules: {
+            type: Object,
+            default: function () {
+                return null;
+            }
+        }
+    },
+    data () {
+        return {
+            skins: []
+        };
+    },
+    methods: {
+        deviceChange(data, item) {
+            if (item.deviceChange) {
+                item.deviceChange(data);
+            }
+        },
+        handleLabel(option, label) {
+            if (label == 'name') {
+                return option.name;
+            } else if (label == 'code') {
+                return option.code;
+            } else if (label == 'label') {
+                return option.label;
+            } else if (label == 'name&&code') {
+                if (option.code) {
+                    return option.name + ' (' + option.code + ')';
+                } else {
+                    return option.name;
+                }
+            } else if (label == 'code&&name') {
+                return option.code + ' (' + option.name + ')';
+            } else {
+                return option.label;
+            }
+        },
+        decompose(item, prop) {
+            if (!prop.includes('.')) {
+                return prop;
+            }
+            const keyArr = prop.split('.');
+            return keyArr[0][keyArr[1]];
+        },
+        checkFieldType(field, type) {
+            if (field.hasOwnProperty('isHidden')) {
+                return field.type === type && !field.isHidden;
+            } else {
+                return field.type === type;
+            }
+        },
+        validate(callback) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    callback(true);
+                } else {
+                    callback(false);
+                }
+            });
+        },
+        resetForm() {
+            this.$refs.form.resetFields();
+        },
+        clearValidate() {
+            this.$refs.form.clearValidate(); // 只移除校验结果
+        },
+        resetFields() {
+            this.$refs.form.resetFields(); // 移除校验结果 并 重置字段值
+        }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.coordinate {
+	overflow: hidden;
+
+	.title {
+		text-align: right;
+		font-size: 14px;
+		color: #606266;
+		line-height: 40px;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+		line-height: 28px;
+		width: 120px;
+		font-weight: bold;
+		display: block;
+		float: left;
+		margin-right: 7px;
+	}
+	.listWidth{
+		display: table;
+		float: left;
+		margin-right: 20px;
+		&:last-child{
+			margin: 0;
+		}
+	}
+}
+.point-section {
+	float: left;
+}
+
+.point-button {
+	width: 28px;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	float: left;
+
+	/deep/ {
+		.el-icon-plus,
+		.el-icon-minus {
+			transform: translateY(0px);
+		}
+	}
+}
+
+.el-input-number--mini {
+	width: 110px;
+}
+
+.form_data{
+  padding: 6px 10px 10px 10px;
+}
+
+.card{
+  border: 1px solid #ccc;
+  margin-bottom: 5px;
+
+  .card_title {
+    padding: 0px 5px;
+  }
+}
+.noCard{
+    border: none;
+    margin-bottom: 0px;
+    padding: 0;
+}
+
+/deep/ {
+    .input-with-select .el-input-group__prepend {
+        background-color: #fff;
+    }
+}
+
+.numberSpan{padding-left: 1px;}
+.numberBtn{margin-left: 20px;}
+.sectionUnit{border: 1px solid #CCCCCC; border-radius: 5px;padding: 2px;padding-top: 10px;}
+.sectionUnitCode{width: 115px;}
+.pointsEach{display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;}
+.pointsEachNext{display: table; margin-left: 8px; float: left; line-height: 28px;}
+.pointsEachItem{display: table; float: left; }
+</style>
+
diff --git a/src/views/newMap/mapDraftPicture/mapoperate/device.vue b/src/views/newMap/mapDraftPicture/mapoperate/device.vue
new file mode 100644
index 000000000..f22c94614
--- /dev/null
+++ b/src/views/newMap/mapDraftPicture/mapoperate/device.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <operate-property
+      ref="dataform"
+      :form="form"
+      :edit-model="editModel"
+      :rules="rules"
+      type="Line"
+      @updateMapModel="updateMapModel"
+      @clearDeviceSelect="clearDeviceSelect"
+    />
+  </div>
+</template>
+
+<script>
+import OperateProperty from './components/operateProperty';
+import { mapGetters } from 'vuex';
+export default {
+    name: 'Device',
+    components: {
+        OperateProperty
+    },
+    data() {
+        return {
+            editModel: {},
+            rules: {},
+            typeList: []
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'signalList',
+            'sectionList',
+            'switchList',
+            'stationList',
+            'stationStandList'
+        ]),
+        form () {
+            return {
+                labelWidth: '130px',
+                items: {
+                    code: {
+                        name: '',
+                        item: []
+                    },
+                    draw: {
+                        name: this.$t('map.drawData'),
+                        item: [
+                            { prop: 'type', label: '类型', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.typeList },
+                            { prop: 'code', label: this.$t('map.textCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.textList, deviceChange: this.deviceChange },
+                            { prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
+                                { prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
+                                { prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
+                            ] }
+                        ]
+                    },
+                    map: {
+                        name: this.$t('map.mapData'),
+                        item: []
+                    }
+                }
+            };
+        },
+        deviceList () {
+            return [];
+        }
+    },
+    methods: {
+        updateMapModel() {
+
+        },
+        clearDeviceSelect() {
+
+        },
+        deviceChange() {
+
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/newMap/mapDraftPicture/mapoperate/index.vue b/src/views/newMap/mapDraftPicture/mapoperate/index.vue
new file mode 100644
index 000000000..20b7f8573
--- /dev/null
+++ b/src/views/newMap/mapDraftPicture/mapoperate/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control">
+      <div class="map-operate">
+        <div class="draftMapName">
+          <span>{{ $t('map.mapName') }}</span>
+          <el-tooltip class="item" effect="dark" :content="mapInfo.name" placement="top">
+            <b>{{ mapInfo.name }}</b>
+          </el-tooltip>
+        </div>
+        <el-button v-if="isSave" type="text" style="padding: 3px 0;float: right;" :disabled="$attrs.mapSaveing" @click="saveMapEvent">{{ $t('map.save') }}</el-button>
+      </div>
+      <el-tabs v-model="enabledTab" class="mapEdit" type="card">
+        <el-tab-pane v-for="(each,index) in tabList" :key="index" :label="each.label" class="tab_pane_box" :name="each.name" :lazy="lazy">
+          <component
+            :is="each.menus"
+            :ref="each.name"
+            :selected="selected"
+            v-bind="$attrs"
+            v-on="$listeners"
+            @deviceSelect="deviceSelect"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </transition>
+</template>
+
+<script>
+import DeviceDraft from './device';
+import MultiSelect from './multiSelect';
+export default {
+    name: 'MapOperate',
+    components: {
+    },
+    props: {
+        selected: {
+            type: Object,
+            default: function () {
+                return null;
+            }
+        },
+        mapInfo: {
+            type: Object,
+            default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
+        }
+    },
+    data() {
+        return {
+            lazy: true,
+            tabList:[
+                {label: '设备', name: 'device', menus: DeviceDraft},
+                {label: '多选', name: 'multiSelect', menus: MultiSelect}
+            ],
+            selectDevice:'',
+            enabledTab: 'Line'
+        };
+    },
+    computed: {
+        isSave() {
+            return this.mapInfo && this.mapInfo.id;
+        }
+    },
+    watch: {
+        '$store.state.map.updateCount': function () {
+            this.$refs[this.enabledTab][0].edit();
+        },
+        selected(val) {
+            if (this.selected) {
+                this.$nextTick(() => {
+                    this.$refs[this.enabledTab][0].deviceSelect(val);
+                });
+            }
+        }
+    },
+    mounted() {},
+    methods: {
+        handleSelectControlPage(device) {
+            const type = device._type;
+            if (this.selectDevice) {
+                this.enabledTab = this.selectDevice;
+            } else {
+                this.enabledTab = type;
+            }
+        },
+        deviceSelect(type) {
+            this.selectDevice = type;
+        },
+        saveMapEvent() {
+            this.$emit('saveMapEvent');
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .draftMapName{
+        width:280px;
+        overflow:hidden;
+        height:17px;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+    }
+	.el-dropdown-link {
+		cursor: pointer;
+		color: #409EFF;
+	}
+	.el-icon-arrow-down {
+		font-size: 12px;
+	}
+    .map-control {
+        width: 100%;
+        height: 100%;
+    }
+
+    .operate-button{
+        padding: 3px 0;
+        margin-right: 5px;
+    }
+
+    // .physical-view {
+    //     line-height: 25px;
+    //     height: 118px;
+    //     padding-left: 12px;
+
+    //     .el-checkbox {
+    //         width: 70px;
+    //         margin: 0;
+    //         margin-right: 30px;
+    //     }
+    // }
+
+    .map-operate{
+        height: 47px;
+        padding: 15px;
+        display:flex;
+    }
+    .mapEdit{
+        height: calc(100% - 47px);
+        .tab_pane_box{
+            height: 100%;
+        }
+    }
+
+    /deep/ .button_box{
+        width: 100%;
+        background: #ffffff;
+        border-top: 1px #f3f1f1 solid;
+        box-shadow: 4px 7px 10px #565656;
+        border-radius: 0;
+        border-bottom: 1px transparent solid;
+        position:absolute;
+        bottom:0;
+        z-index:3;
+	}
+
+    /deep/ .view-control-content{
+        height:100%;
+        padding-bottom:46px;
+        overflow-y:auto;
+    }
+
+    /deep/ .map-draft-group {
+        float: right;
+        margin: 6px 5px;
+    }
+
+    /deep/ .view-control {
+            height:100%;
+        }
+
+    /deep/ {
+		.mapEdit .el-tabs__nav-wrap.is-scrollable  {
+			padding: 0 20px;
+		}
+		.mapEdit .el-tabs__header .el-tabs__item.is-active {
+			border-bottom-color: #f5f7fa;
+			background: #f5f7fa;
+		}
+		.mapEdit .el-tabs__active-bar{
+			background: transparent;
+		}
+		.mapEdit .el-tabs__content {
+			height: calc(100% - 56px);
+		}
+
+		.card .el-tabs__nav .el-tabs__item.is-active {
+			border-bottom: 2px solid #E4E7ED;
+			background: #409eff;
+			color: #fff;
+		}
+		.card .el-tabs__nav .el-tabs__item{
+			padding: 0 20px!important;
+		}
+
+		.mapEdit .el-tabs__nav-prev {
+			width: 20px;
+			height: 41px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			box-shadow: 1px 1px 4px #ccc;
+		}
+
+		.mapEdit .el-tabs__nav-next {
+			width: 20px;
+			height: 41px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			box-shadow: 1px 1px 4px #ccc;
+		}
+	}
+
+    // 页面页签样式
+    /deep/ {
+		.card .el-transfer-panel__filter{
+			margin: 5px 15px;
+		}
+		.card .el-transfer-panel__list.is-filterable{
+			height: 290px;
+		}
+
+		.card .el-transfer-panel__body{
+			height: 328px;
+		}
+		.card .el-transfer__buttons{
+			padding: 0 16px;
+		}
+
+		.card .el-transfer{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+</style>
diff --git a/src/views/newMap/mapDraftPicture/mapoperate/multiSelect.vue b/src/views/newMap/mapDraftPicture/mapoperate/multiSelect.vue
new file mode 100644
index 000000000..26a859df9
--- /dev/null
+++ b/src/views/newMap/mapDraftPicture/mapoperate/multiSelect.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+	name: "multiSelect"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/newMap/newDesignUser/demonList.vue b/src/views/newMap/newDesignUser/demonList.vue
index 412380d16..dd19c1b0a 100644
--- a/src/views/newMap/newDesignUser/demonList.vue
+++ b/src/views/newMap/newDesignUser/demonList.vue
@@ -45,173 +45,190 @@
   </div>
 </template>
 <script>
-import { DeviceMenu } from '@/scripts/ConstDic'
-import { listMap, deleteAllMap } from '@/api/jmap/mapdraft'
-import { UrlConfig } from '@/scripts/ConstDic'
-import { removeSessionStorage } from '@/utils/auth'
-import MapOperateMenu from './mapmanage/operateMenu'
-import MapImport from './mapmanage/mapImport'
-import { getSessionStorage } from '@/utils/auth'
+import { DeviceMenu } from '@/scripts/ConstDic';
+import { listMap, deleteAllMap } from '@/api/jmap/mapdraft';
+import { UrlConfig } from '@/scripts/ConstDic';
+import { removeSessionStorage } from '@/utils/auth';
+import MapOperateMenu from './mapmanage/operateMenu';
+import MapImport from './mapmanage/mapImport';
+import { getSessionStorage } from '@/utils/auth';
 
 export default {
-  name: 'UserMapList',
-  components: {
-    MapOperateMenu,
-    MapImport,
-  },
-  data() {
-    return {
-      loading: true,
-      defaultShowKeys: [],
-      filterText: '',
-      treeData: [],
-      treeList: [],
-      selected: {},
-      defaultProps: {
-        children: 'children',
-        label: 'name',
-      },
-      point: {
-        x: 0,
-        y: 0,
-      },
-      editModel: {},
-      lineCode: '',
-      loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts', 'hlsdrts', 'designhlsdrts'],
+    name: 'UserMapList',
+    components: {
+        MapOperateMenu,
+        MapImport
+    },
+    data() {
+        return {
+            loading: true,
+            defaultShowKeys: [],
+            filterText: '',
+            treeData: [],
+            treeList: [],
+            selected: {},
+            defaultProps: {
+                children: 'children',
+                label: 'name'
+            },
+            point: {
+                x: 0,
+                y: 0
+            },
+            editModel: {},
+            lineCode: '',
+            loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts', 'hlsdrts', 'designhlsdrts']
+        };
+    },
+    computed: {
+        project() {
+            return getSessionStorage('project');
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    beforeDestroy() {
+        removeSessionStorage('demonList');
+    },
+    mounted() {
+        this.loadInitData();
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.name.indexOf(value) !== -1;
+        },
+        createMap() {
+            this.$emit('createMap');
+        },
+        deleteAllMap() {
+            this.$confirm('确定删除全部地图数据?', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    deleteAllMap().then(res => {
+                        this.$message({
+                            type: 'success',
+                            message: '删除成功!'
+                        });
+                        this.loadInitData();
+                    });
+                })
+                .catch(e => {});
+        },
+        async loadInitData() {
+            this.loading = true;
+            this.treeData = this.treeList = [];
+            try {
+                const res = await listMap({ drawWay: true });
+                res.data &&
+                res.data.forEach(elem => {
+                    elem.type = 'map';
+                    elem.children = [
+                        {
+                            id: '1',
+                            name: this.$t('designPlatform.mapDesign'),
+                            type: 'mapDesign',
+                            mapId: elem.id,
+                            mapName: elem.name,
+                            lineCode: elem.lineCode
+                        },
+                        {
+                            id: '2',
+                            name: '系统配置绘图',
+                            type: 'mapSystem',
+                            mapId: elem.id,
+                            mapName: elem.name,
+                            lineCode: elem.lineCode
+                        },
+                        {
+                            id: '3',
+                            name: '画面管理',
+                            type: 'mapPicture',
+                            mapId: elem.id,
+                            mapName: elem.name,
+                            lineCode: elem.lineCode
+                        }
+                    ];
+                });
+                this.treeData = res.data;
+                this.treeList = this.filterText
+                    ? res.data.filter(elem => {
+                        return elem.name.includes(this.filterText);
+                    })
+                    : res.data;
+                this.loading = false;
+            } catch (error) {
+                this.loading = false;
+                this.$messageBox(this.$t('error.refreshFailed'));
+            }
+        },
+        clickEvent(obj, data, ele) {
+            switch (obj.type) {
+            case 'mapDesign': {
+                if (this.loadingProjectList.includes(this.project)) {
+                    this.$store.dispatch('app/transitionAnimations');
+                }
+                this.$router.push({
+                    path: `${UrlConfig.newDesignuser.mapDraw}/${obj.mapId}/draft`,
+                    query: { name: obj.mapName, lineCode: obj.lineCode }
+                });
+                break;
+            }
+            case 'mapSystem': {
+                if (this.loadingProjectList.includes(this.project)) {
+                    this.$store.dispatch('app/transitionAnimations');
+                }
+                this.$router.push({
+                    path: `/design/usermap/map/systemDraw/${obj.mapId}/draft`,
+                    query: { name: obj.mapName, lineCode: obj.lineCode }
+                });
+                break;
+            }
+            case 'mapPicture': {
+                if (this.loadingProjectList.includes(this.project)) {
+                    this.$store.dispatch('app/transitionAnimations');
+                }
+                this.$router.push({
+                    path: `/design/usermap/map/pictureDraw/${obj.mapId}/draft`,
+                    query: { name: obj.mapName, lineCode: obj.lineCode }
+                });
+                break;
+            }
+            }
+        },
+        showContextMenu(e, obj, node, vueElem) {
+            this.$refs.tree.setCurrentKey(obj.id);
+            this.$refs.tree.currentNode = node;
+            if (obj && obj.type == 'map') {
+                e.preventDefault();
+                const menu = DeviceMenu.Map;
+
+                this.point = {
+                    x: e.clientX,
+                    y: e.clientY
+                };
+                this.editModel = obj;
+                this.editModel.lineCode = obj.lineCode;
+                this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
+            }
+        },
+        jlmap3d() {
+            this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } });
+        },
+        assetmanager3d() {
+            this.$router.push({ path: '/design/jlmap3d/assetmanager' });
+        },
+        importMap() {
+            this.$refs.mapImport.show();
+        }
     }
-  },
-  computed: {
-    project() {
-      return getSessionStorage('project')
-    },
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val)
-    },
-  },
-  beforeDestroy() {
-    removeSessionStorage('demonList')
-  },
-  mounted() {
-    this.loadInitData()
-  },
-  methods: {
-    filterNode(value, data) {
-      if (!value) return true
-      return data.name.indexOf(value) !== -1
-    },
-    createMap() {
-      this.$emit('createMap')
-    },
-    deleteAllMap() {
-      this.$confirm('确定删除全部地图数据?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          deleteAllMap().then(res => {
-            this.$message({
-              type: 'success',
-              message: '删除成功!',
-            })
-            this.loadInitData()
-          })
-        })
-        .catch(e => {})
-    },
-    async loadInitData() {
-      this.loading = true
-      this.treeData = this.treeList = []
-      try {
-        const res = await listMap({ drawWay: true })
-        res.data &&
-          res.data.forEach(elem => {
-            elem.type = 'map'
-            elem.children = [
-              {
-                id: '1',
-                name: this.$t('designPlatform.mapDesign'),
-                type: 'mapDesign',
-                mapId: elem.id,
-                mapName: elem.name,
-                lineCode: elem.lineCode,
-              },
-              {
-                id: '2',
-                name: '系统配置绘图',
-                type: 'mapSystem',
-                mapId: elem.id,
-                mapName: elem.name,
-                lineCode: elem.lineCode,
-              },
-            ]
-          })
-
-        this.treeData = res.data
-        this.treeList = this.filterText
-          ? res.data.filter(elem => {
-              return elem.name.includes(this.filterText)
-            })
-          : res.data
-        this.loading = false
-      } catch (error) {
-        this.loading = false
-        this.$messageBox(this.$t('error.refreshFailed'))
-      }
-    },
-    clickEvent(obj, data, ele) {
-      switch (obj.type) {
-        case 'mapDesign': {
-          if (this.loadingProjectList.includes(this.project)) {
-            this.$store.dispatch('app/transitionAnimations')
-          }
-          this.$router.push({
-            path: `${UrlConfig.newDesignuser.mapDraw}/${obj.mapId}/draft`,
-            query: { name: obj.mapName, lineCode: obj.lineCode },
-          })
-          break
-        }
-        case 'mapSystem': {
-          if (this.loadingProjectList.includes(this.project)) {
-            this.$store.dispatch('app/transitionAnimations')
-          }
-          this.$router.push({
-            path: `/design/usermap/map/systemDraw/${obj.mapId}/draft`,
-            query: { name: obj.mapName, lineCode: obj.lineCode },
-          })
-          break
-        }
-      }
-    },
-    showContextMenu(e, obj, node, vueElem) {
-      this.$refs.tree.setCurrentKey(obj.id)
-      this.$refs.tree.currentNode = node
-      if (obj && obj.type == 'map') {
-        e.preventDefault()
-        const menu = DeviceMenu.Map
-
-        this.point = {
-          x: e.clientX,
-          y: e.clientY,
-        }
-        this.editModel = obj
-        this.editModel.lineCode = obj.lineCode
-        this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu })
-      }
-    },
-    jlmap3d() {
-      this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } })
-    },
-    assetmanager3d() {
-      this.$router.push({ path: '/design/jlmap3d/assetmanager' })
-    },
-    importMap() {
-      this.$refs.mapImport.show()
-    },
-  },
-}
+};
 </script>
 <style lang="scss" scoped>
 .clearfix {
diff --git a/src/views/newMap/trainTicket/greenLicence.vue b/src/views/newMap/trainTicket/greenLicence.vue
index bdcf1541a..b6caa44d4 100644
--- a/src/views/newMap/trainTicket/greenLicence.vue
+++ b/src/views/newMap/trainTicket/greenLicence.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="border: 1px solid #000000;margin-top: 20px;padding: 20px;">
+  <div style="border: 1px solid #000000;margin-top: 20px;padding: 20px;background: #9df59b;">
     <div style="text-align: center;font-size: 28px;">许&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证</div>
     <div style="font-size: 14px;margin-top: 15px;display: flex;align-items: center;margin-bottom: 20px;justify-content: end;">
       <div>第</div>
diff --git a/src/views/newMap/trainTicket/redLicence.vue b/src/views/newMap/trainTicket/redLicence.vue
index 51f377134..79cbc8d72 100644
--- a/src/views/newMap/trainTicket/redLicence.vue
+++ b/src/views/newMap/trainTicket/redLicence.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="border: 1px solid #000000;margin-top: 20px;padding: 20px;">
+  <div style="border: 1px solid #000000;margin-top: 20px;padding: 20px;background: #e799d8;">
     <div style="text-align: center;font-size: 28px;">许&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证</div>
     <div style="font-size: 14px;margin-top: 15px;display: flex;align-items: center;margin-bottom: 20px;justify-content: end;">
       <div>第</div>
diff --git a/src/views/newMap/trainTicket/trainTicket.vue b/src/views/newMap/trainTicket/trainTicket.vue
index d5a510fad..5f96d4e07 100644
--- a/src/views/newMap/trainTicket/trainTicket.vue
+++ b/src/views/newMap/trainTicket/trainTicket.vue
@@ -31,6 +31,9 @@
         <el-input v-model="ticketForm.no" size="small" :disabled="switchFlag" style="width: 80px;" />
       </div>
     </div>
+    <div style="text-align: center;">
+      <!--		  <el-select v-model=""></el-select>-->
+    </div>
   </div>
 </template>