代码调整&司机驾驶调整

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',

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'; // 卫志宏

src/views/jlmap3d/drive/jl3ddrive.vue

@@ -1,18 +1,17 @@
 <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 v-show="tuoguanbutton" style="position: absolute;right:50%;top:40px;z-index:10;background: #EBEBEB;" @click="tuoguan">{{ tuoguanbuttonmsg }}</div>
-		<div style="position: absolute;right:50%;top:0%;z-index:10;background: #EBEBEB;" v-show="isTraining" >
+    <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-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>
 
@@ -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,18 +39,17 @@
     <div id="jlsimulation" class="jlmap3ddraw">
       <canvas id="canvastexture" />
     </div>
-    <div id="jlcctv" v-show="cctvshow" class="jlmap3cctv">
+    <div v-show="cctvshow" id="jlcctv" class="jlmap3cctv" />
-    </div>
 
-    <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-Tms v-if="tmsshow" ref="tmsui" />
-    <Drive-Control v-if="dcontrolshow" ref="dcontrol" :group-num="groupnum" :user-role="userrole"/>
+    <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';
@@ -99,7 +97,7 @@ export default {
     },
     data() {
         return {
-      groupnum:"",
+            groupnum:'',
             userrole:'',
 
             driveIndex:1500,
@@ -115,9 +113,9 @@ export default {
             jlmap3d: null,
             selectmodel: null,
             cctvshow:true,
-      equipboxmsg:"设备柜——隐藏",
+            equipboxmsg:'设备柜——隐藏',
-      pslmsg:"PSL",
+            pslmsg:'PSL',
-      pslCode:"",
+            pslCode:'',
             pslShow:false,
             cctvbuttonmsg: this.$t('jlmap3d.surveillanceHidden'),
             mmishow: false,
@@ -130,22 +128,27 @@ export default {
             dcontrolshow: true,
             equipboxshow:false,
             msgshow:false,
-      controlmsg:"不能选择其它列车",
+            controlmsg:'不能选择其它列车',
 
             tuoguanbutton:false,
-      tuoguanbuttonmsg:"托管",
+            tuoguanbuttonmsg:'托管',
             tuoguanstatus:false,
             isTraining:true,
             options: [],
-			initMsg:"请选择列车",
+            initMsg:'请选择列车',
             value: '',
             topid:null,
-      trainlist:null,
+            nowdrive:null
-      groupnum:"",
-      userrole:'',
-      nowdrive:null,
         };
     },
+    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) {
@@ -206,7 +209,7 @@ export default {
                     this.$refs.mmiui.updatedrivedata(this.jlmap3d.drivedata);
                 }
             }
-		},
+        }
 
     },
     beforeDestroy() {
@@ -220,16 +223,8 @@ export default {
             // this.$destroy();
         }
     },
-  destroyed(){
+    destroyed() {
     // window.removeEventListener('popstate', this.goBack, false);
-  },
-  computed: {
-    group() {
-      return this.$route.query.group;
-    },
-    userId() {
-        return this.$store.state.user ? this.$store.state.user.id : '';
-    },
     },
     mounted() {
         this.mmishow = true;
@@ -240,18 +235,18 @@ export default {
         window.updateDriverTrust = this.updateDriverTrust;
         window.updateDriveValue = this.updateDriveValue;
         window.jl3dUpdatePslCode = this.jl3dUpdatePslCode;
-    if(this.$route.query.group){
+        if (this.$route.query.group) {
             getSimulationInfoNew(this.$route.query.group).then(netdata => {
 
-        if(netdata.data.type == "SCRIPT_MAKING"){
+                if (netdata.data.type == 'SCRIPT_MAKING') {
                     this.tuoguanbutton = true;
                 }
                 this.inittrainlist();
             });
         }
 
-    if(this.$route.query.type == "DRIVE"){
+        if (this.$route.query.type == 'DRIVE') {
-      this.backmsg = "退出";
+            this.backmsg = '退出';
         }
 
     // if (window.history && window.history.pushState) {
@@ -277,40 +272,44 @@ export default {
         //      // this.jlmap3d = null;
         //    }
         // },
-		show: function (skinCode,group,zindex,isTraining) {
+        show: function (skinCode, group, zindex, isTraining, deviceCode) {
             // console.log("show");
             // console.log(skinCode);
             // console.log(this.jlmap3d);
-      if(zindex){
+            if (zindex) {
                 this.driveIndex = zindex;
-        document.getElementById("drivediv").style.zIndex = zindex;
+                document.getElementById('drivediv').style.zIndex = zindex;
             }
             if (this.jlmap3d == null) {
-				this.init(skinCode,group);
+                this.init(skinCode, group);
             } else {
                 // this.jlmap3d.restart();
                 this.jlmap3d.eventon();
                 this.jlmap3d.animateon();
             }
-      if(isTraining){
+            if (isTraining) {
                 // this.$refs.dcontrol.changeTrainSelect(isTraining);
             }
+            if (deviceCode) {
+                this.value = deviceCode;
+                this.groupnum = deviceCode;
+            }
         },
-		init: function (skinCode,group) {
+        init: function (skinCode, group) {
             const mapdata = this.$store.getters['map/map'];
             const dom = document.getElementById('app');
-      let translation = {
+            const translation = {
                 trainAtoOn: this.$t('jlmap3d.trainAtoOn'),
                 trainAtoOff: this.$t('jlmap3d.trainAtoOff'),
                 stopTime: this.$t('jlmap3d.stopTime')
             };
 
-      let project = this.$route.query.project;
+            const project = this.$route.query.project;
             // console.log(project);
-      if(project){
+            if (project) {
-        this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group,project);
+                this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode, this.$store, translation, group, project);
-      }else{
+            } else {
-        this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group,project);
+                this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode, this.$store, translation, group, project);
             }
 
             // console.log(translation);
@@ -346,19 +345,17 @@ export default {
 
         back() {
 
-      if(this.$route.query.type == "DRIVE"){
+            if (this.$route.query.type == 'DRIVE') {
                 store.dispatch('LogOut').then(() => {
                     location.reload();
                 });
-      }else{
+            } else {
                 this.$emit('showdriving');
                 this.jlmap3d.eventoff();
                 this.jlmap3d.animateoff();
                 // this.jlmap3d = null;
             }
 
-
-
         },
         showmmiplane() {
             if (this.mmishow == true) {
@@ -380,15 +377,15 @@ export default {
             }
 
         },
-    datanew(){
+        datanew() {
             this.dcontrolshow = true;
         },
-    equipboxplane(){
+        equipboxplane() {
             if (this.equipboxshow == true) {
-        this.equipboxmsg = "设备柜——隐藏";
+                this.equipboxmsg = '设备柜——隐藏';
                 this.equipboxshow = false;
             } else {
-        this.equipboxmsg = "设备柜——显示";
+                this.equipboxmsg = '设备柜——显示';
                 this.equipboxshow = true;
             }
 
@@ -406,7 +403,7 @@ export default {
 
         },
 
-    updatestatus(newdata){
+        updatestatus(newdata) {
             // if(newdata.groupNumber){
             //   this.trainnum = newdata.groupNumber;
             //
@@ -416,50 +413,49 @@ export default {
             // console.log(newdata.v);
             updatetmsstatus(newdata);
 
-      if(this.$refs.mmiui){
+            if (this.$refs.mmiui) {
                 this.$refs.mmiui.updatetrainstatus(newdata);
             }
 
-
             updatabuttonlight(newdata);
         },
-    warningmsg(nowmsg){
+        warningmsg(nowmsg) {
             this.controlmsg = nowmsg;
             this.msgshow = true;
-      setTimeout(this.warningmsgoff,3000);
+            setTimeout(this.warningmsgoff, 3000);
         },
-    warningmsgoff(){
+        warningmsgoff() {
             this.msgshow = false;
         },
-    tuoguan(){
+        tuoguan() {
             let posttrust = null;
-      if(this.tuoguanstatus){
+            if (this.tuoguanstatus) {
                 posttrust = false;
-      }else{
+            } else {
                 posttrust = true;
             }
 
-      tuoguan3ddrive(this.$route.query.group,{}).then(netdata => {
+            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){
+                if (this.tuoguanstatus) {
-          this.tuoguanbuttonmsg = "取消托管";
+                    this.tuoguanbuttonmsg = '取消托管';
-        }else{
+                } else {
-          this.tuoguanbuttonmsg = "托管";
+                    this.tuoguanbuttonmsg = '托管';
                 }
             }).catch((error) => {
 
             });
         },
-    currentsel(selVal){
+        currentsel(selVal) {
-      let oldgroupnum = this.groupnum;
+            const oldgroupnum = this.groupnum;
             this.groupnum = selVal;
-      bindSimulationTrain(this.group,this.groupnum).then(netdata => {
+            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++){
+                for (let i = 0; i < this.trainlist.length; i++) {
-          if(this.trainlist[i].groupNumber == this.groupnum){
+                    if (this.trainlist[i].groupNumber == this.groupnum) {
                         // console.log(this.trainlist[i].gear);
                         // this.groupnum
                         this.$refs.dcontrol.centerstate(this.trainlist[i].gear);
@@ -470,56 +466,55 @@ export default {
             }).catch(error => {
                 this.groupnum = oldgroupnum;
                 this.selVal = oldgroupnum;
-        this.$emit('warningmsg',error.message);
+                this.$emit('warningmsg', error.message);
                 this.value = this.nowdrive;
             });
         },
-    clickselect(e){
+        clickselect(e) {
-      if(e == true){
+            if (e == true) {
 
                 this.updatetrainlist();
             }
         },
 
-    updateDriverTrust(code,trustStatus){
+        updateDriverTrust(code, trustStatus) {
-      if(this.tuoguanstatus != trustStatus){
+            if (this.tuoguanstatus != trustStatus) {
                 this.tuoguanstatus = trustStatus;
-        if(this.tuoguanstatus){
+                if (this.tuoguanstatus) {
-          this.tuoguanbuttonmsg = "取消托管";
+                    this.tuoguanbuttonmsg = '取消托管';
-        }else{
+                } else {
-          this.tuoguanbuttonmsg = "托管";
+                    this.tuoguanbuttonmsg = '托管';
                 }
-        this.$store.dispatch('training/updateMemberTrust', {deviceCode:code,trust:trustStatus});
+                this.$store.dispatch('training/updateMemberTrust', {deviceCode:code, trust:trustStatus});
             }
         },
-    inittrainlist(){
+        inittrainlist() {
             getSimulationTrainlistNew(this.group).then(netdata => {
                 this.options = [];
                 this.trainlist = netdata.data;
-        for(let i=0;i<netdata.data.length;i++){
+                for (let i = 0; i < netdata.data.length; i++) {
-          let option= {
+                    const option = {
                         value: netdata.data[i].groupNumber,
                         label: netdata.data[i].groupNumber,
-              name:null,
+                        name:null
-            }
+                    };
                     option.disabled = false;
 
-            if(netdata.data[i].name){
+                    if (netdata.data[i].name) {
-              option.label = netdata.data[i].name+"正在驾驶"+netdata.data[i].groupNumber;
+                        option.label = netdata.data[i].name + '正在驾驶' + netdata.data[i].groupNumber;
-              this.initMsg = 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){
+                        if (netdata.data[i].driverId == this.userId) {
-              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++){
+                            for (let i = 0; i < this.trainlist.length; i++) {
-                  if(this.trainlist[i].groupNumber == this.groupnum){
+                                if (this.trainlist[i].groupNumber == this.groupnum) {
                                     // console.log(this.trainlist[i].gear);
                                     // this.groupnum
                                     this.$refs.dcontrol.centerstate(this.trainlist[i].gear);
@@ -537,31 +532,30 @@ export default {
                         }
                     }
 
-
                     this.options.push(option);
                 }
                 this.options.sort(
-          function(obj1,obj2) {
+                    function(obj1, obj2) {
-            let val1 = obj1.value;
+                        const val1 = obj1.value;
-            let val2 = obj2.value;
+                        const val2 = obj2.value;
                         return val1 - val2;
                     }
                 );
             });
-      //获取当前录制托管状态
+            // 获取当前录制托管状态
-      if(this.tuoguanbutton == true){
+            if (this.tuoguanbutton == true) {
 
-        let netdata = this.$store.state.training.memberData;
+                const netdata = this.$store.state.training.memberData;
-        for(let k in netdata){
+                for (const k in netdata) {
-          if(netdata[k].userId == this.userId){
+                    if (netdata[k].userId == this.userId) {
                         // console.log(this.$store.state.scriptRecord.type);
                         this.userrole = netdata[k].type;
-            if(netdata[k].trust){
+                        if (netdata[k].trust) {
                             this.tuoguanstatus = netdata[k].trust;
-              if(this.tuoguanstatus){
+                            if (this.tuoguanstatus) {
-                this.tuoguanbuttonmsg = "取消托管";
+                                this.tuoguanbuttonmsg = '取消托管';
-              }else{
+                            } else {
-                this.tuoguanbuttonmsg = "托管";
+                                this.tuoguanbuttonmsg = '托管';
                             }
                         }
                         break;
@@ -570,17 +564,17 @@ export default {
                 }
             }
         },
-    updateDriveValue(newvalue){
+        updateDriveValue(newvalue) {
 
-      if(newvalue != this.value){
+            if (newvalue != this.value) {
                 this.value = newvalue;
                 this.groupnum = newvalue;
             }
         },
-    jl3dUpdatePslCode(newPslCode){
+        jl3dUpdatePslCode(newPslCode) {
-      if(newPslCode == null){
+            if (newPslCode == null) {
                 this.pslShow = false;
-      }else{
+            } else {
                 this.pslShow = true;
             }
             this.pslCode = newPslCode;
@@ -588,27 +582,27 @@ export default {
         openPsl() {
             this.$refs.psl.doShow({code:this.pslCode});
         },
-    updatetrainlist(){
+        updatetrainlist() {
             getSimulationTrainlistNew(this.group).then(netdata => {
                 console.log(netdata);
                 this.options = [];
                 this.trainlist = netdata.data;
-        for(let i=0;i<netdata.data.length;i++){
+                for (let i = 0; i < netdata.data.length; i++) {
-          let option= {
+                    const option = {
                         value: netdata.data[i].groupNumber,
                         label: netdata.data[i].groupNumber,
-              name:null,
+                        name:null
-            }
+                    };
                     option.disabled = false;
 
-            if(netdata.data[i].name){
+                    if (netdata.data[i].name) {
-              option.label = netdata.data[i].name+"正在驾驶"+netdata.data[i].groupNumber;
+                        option.label = netdata.data[i].name + '正在驾驶' + netdata.data[i].groupNumber;
-              this.initMsg = 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) {
-              if(netdata.data[i].driverId == this.userId){
+                        if (netdata.data[i].driverId == this.userId) {
                             this.selVal = netdata.data[i].groupNumber;
                             this.groupnum = netdata.data[i].groupNumber;
                         }
@@ -616,27 +610,27 @@ export default {
                     this.options.push(option);
                 }
                 this.options.sort(
-          function(obj1,obj2) {
+                    function(obj1, obj2) {
-            let val1 = obj1.value;
+                        const val1 = obj1.value;
-            let val2 = obj2.value;
+                        const val2 = obj2.value;
                         return val1 - val2;
                     }
                 );
             });
-      //获取当前录制托管状态
+            // 获取当前录制托管状态
-      if(this.tuoguanbutton == true){
+            if (this.tuoguanbutton == true) {
 
-        let netdata = this.$store.state.training.memberData;
+                const netdata = this.$store.state.training.memberData;
-        for(let k in netdata){
+                for (const k in netdata) {
-          if(netdata[k].userId == this.userId){
+                    if (netdata[k].userId == this.userId) {
                         // console.log(this.$store.state.scriptRecord.type);
                         this.userrole = netdata[k].type;
-            if(netdata[k].trust){
+                        if (netdata[k].trust) {
                             this.tuoguanstatus = netdata[k].trust;
-              if(this.tuoguanstatus){
+                            if (this.tuoguanstatus) {
-                this.tuoguanbuttonmsg = "取消托管";
+                                this.tuoguanbuttonmsg = '取消托管';
-              }else{
+                            } else {
-                this.tuoguanbuttonmsg = "托管";
+                                this.tuoguanbuttonmsg = '托管';
                             }
                         }
                         break;
@@ -647,7 +641,6 @@ export default {
             }
         }
 
-
     }
 };
 </script>

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); }
                     });

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>

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>

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>

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>
+

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>

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>

src/views/newMap/mapDraftPicture/mapoperate/multiSelect.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+	name: "multiSelect"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/newMap/newDesignUser/demonList.vue

@@ -45,19 +45,19 @@
   </div>
 </template>
 <script>
-import { DeviceMenu } from '@/scripts/ConstDic'
+import { DeviceMenu } from '@/scripts/ConstDic';
-import { listMap, deleteAllMap } from '@/api/jmap/mapdraft'
+import { listMap, deleteAllMap } from '@/api/jmap/mapdraft';
-import { UrlConfig } from '@/scripts/ConstDic'
+import { UrlConfig } from '@/scripts/ConstDic';
-import { removeSessionStorage } from '@/utils/auth'
+import { removeSessionStorage } from '@/utils/auth';
-import MapOperateMenu from './mapmanage/operateMenu'
+import MapOperateMenu from './mapmanage/operateMenu';
-import MapImport from './mapmanage/mapImport'
+import MapImport from './mapmanage/mapImport';
-import { getSessionStorage } from '@/utils/auth'
+import { getSessionStorage } from '@/utils/auth';
 
 export default {
     name: 'UserMapList',
     components: {
         MapOperateMenu,
-    MapImport,
+        MapImport
     },
     data() {
         return {
@@ -69,66 +69,66 @@ export default {
             selected: {},
             defaultProps: {
                 children: 'children',
-        label: 'name',
+                label: 'name'
             },
             point: {
                 x: 0,
-        y: 0,
+                y: 0
             },
             editModel: {},
             lineCode: '',
-      loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts', 'hlsdrts', 'designhlsdrts'],
+            loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts', 'hlsdrts', 'designhlsdrts']
-    }
+        };
     },
     computed: {
         project() {
-      return getSessionStorage('project')
+            return getSessionStorage('project');
-    },
+        }
     },
     watch: {
         filterText(val) {
-      this.$refs.tree.filter(val)
+            this.$refs.tree.filter(val);
-    },
+        }
     },
     beforeDestroy() {
-    removeSessionStorage('demonList')
+        removeSessionStorage('demonList');
     },
     mounted() {
-    this.loadInitData()
+        this.loadInitData();
     },
     methods: {
         filterNode(value, data) {
-      if (!value) return true
+            if (!value) return true;
-      return data.name.indexOf(value) !== -1
+            return data.name.indexOf(value) !== -1;
         },
         createMap() {
-      this.$emit('createMap')
+            this.$emit('createMap');
         },
         deleteAllMap() {
             this.$confirm('确定删除全部地图数据?', '警告', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
-        type: 'warning',
+                type: 'warning'
             })
                 .then(() => {
                     deleteAllMap().then(res => {
                         this.$message({
                             type: 'success',
-              message: '删除成功!',
+                            message: '删除成功!'
+                        });
+                        this.loadInitData();
+                    });
                 })
-            this.loadInitData()
+                .catch(e => {});
-          })
-        })
-        .catch(e => {})
         },
         async loadInitData() {
-      this.loading = true
+            this.loading = true;
-      this.treeData = this.treeList = []
+            this.treeData = this.treeList = [];
             try {
-        const res = await listMap({ drawWay: true })
+                const res = await listMap({ drawWay: true });
                 res.data &&
                 res.data.forEach(elem => {
-            elem.type = 'map'
+                    elem.type = 'map';
                     elem.children = [
                         {
                             id: '1',
@@ -136,7 +136,7 @@ export default {
                             type: 'mapDesign',
                             mapId: elem.id,
                             mapName: elem.name,
-                lineCode: elem.lineCode,
+                            lineCode: elem.lineCode
                         },
                         {
                             id: '2',
@@ -144,74 +144,91 @@ export default {
                             type: 'mapSystem',
                             mapId: elem.id,
                             mapName: elem.name,
-                lineCode: elem.lineCode,
+                            lineCode: elem.lineCode
                         },
-            ]
+                        {
-          })
+                            id: '3',
-
+                            name: '画面管理',
-        this.treeData = res.data
+                            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)
+                        return elem.name.includes(this.filterText);
                     })
-          : res.data
+                    : res.data;
-        this.loading = false
+                this.loading = false;
             } catch (error) {
-        this.loading = false
+                this.loading = false;
-        this.$messageBox(this.$t('error.refreshFailed'))
+                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.$store.dispatch('app/transitionAnimations');
                 }
                 this.$router.push({
                     path: `${UrlConfig.newDesignuser.mapDraw}/${obj.mapId}/draft`,
-            query: { name: obj.mapName, lineCode: obj.lineCode },
+                    query: { name: obj.mapName, lineCode: obj.lineCode }
-          })
+                });
-          break
+                break;
             }
             case 'mapSystem': {
                 if (this.loadingProjectList.includes(this.project)) {
-            this.$store.dispatch('app/transitionAnimations')
+                    this.$store.dispatch('app/transitionAnimations');
                 }
                 this.$router.push({
                     path: `/design/usermap/map/systemDraw/${obj.mapId}/draft`,
-            query: { name: obj.mapName, lineCode: obj.lineCode },
+                    query: { name: obj.mapName, lineCode: obj.lineCode }
-          })
+                });
-          break
+                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.setCurrentKey(obj.id);
-      this.$refs.tree.currentNode = node
+            this.$refs.tree.currentNode = node;
             if (obj && obj.type == 'map') {
-        e.preventDefault()
+                e.preventDefault();
-        const menu = DeviceMenu.Map
+                const menu = DeviceMenu.Map;
 
                 this.point = {
                     x: e.clientX,
-          y: e.clientY,
+                    y: e.clientY
-        }
+                };
-        this.editModel = obj
+                this.editModel = obj;
-        this.editModel.lineCode = obj.lineCode
+                this.editModel.lineCode = obj.lineCode;
-        this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu })
+                this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
             }
         },
         jlmap3d() {
-      this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } })
+            this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } });
         },
         assetmanager3d() {
-      this.$router.push({ path: '/design/jlmap3d/assetmanager' })
+            this.$router.push({ path: '/design/jlmap3d/assetmanager' });
         },
         importMap() {
-      this.$refs.mapImport.show()
+            this.$refs.mapImport.show();
-    },
+        }
-  },
+    }
-}
+};
 </script>
 <style lang="scss" scoped>
 .clearfix {

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>

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>

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>