修改代码

src/api/jmap/lesson.js

@@ -0,0 +1,68 @@
+import request from '@/utils/request';
+
+/** 获取发布的课程列表*/
+export function getPublishLessonList() {
+	return request({
+		url: '/api/lesson',
+		method: 'get'
+	});
+}
+/** 获取发布列表树*/
+export function getPublishLessonTree(params) {
+	return request({
+		url: '/api/lesson/tree',
+		method: 'get',
+		params: params || {}
+	});
+}
+
+/** 获取发布课程列表*/
+export function getPublishLessonDetail(data) {
+	return request({
+		url: `/api/lesson/${data.id}`,
+		method: 'get'
+	});
+}
+
+/** 发布课程分页列表列表*/
+export function publishLessonList(param) {
+	return request({
+		url: `/api/lesson/publishedLesson`,
+		method: 'get',
+		params: param
+	});
+}
+
+/** 删除发布课程*/
+export function delPublishLesson(lessonId) {
+	return request({
+		url: `/api/lesson/publishedLesson/${lessonId}`,
+		method: 'delete'
+	});
+}
+
+/** 发布课程上架*/
+export function putLessonOnLine(id) {
+	return request({
+		url: `/api/lesson/${id}/onLine`,
+		method: 'put'
+	});
+}
+
+/** 发布课程下架*/
+export function putLessonOffLine(id) {
+	return request({
+		url: `/api/lesson/${id}/offLine`,
+		method: 'put'
+	});
+}
+
+/**
+ * 获取地图产品下的课程列表
+ */
+export function getCommodityProductLesson(prdCode) {
+	return request({
+		url: `/api/lesson/${prdCode}/list`,
+		method: 'get'
+	});
+}

src/api/jmap/lessondraft.js

@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+
+/** 获取课程树*/
+export function getLessonTree(params) {
+    return request({
+        url: '/api/lessonDraft/tree',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 获取课程详细内容*/
+export function getLessonDetail(data) {
+    return request({
+        url: `/api/lessonDraft/${data.id}`,
+        method: 'get'
+    });
+}
+
+/** 创建课程*/
+export function createLesson(data) {
+    return request({
+        url: '/api/lessonDraft',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 从发布课程创建*/
+export function createLessonFromPublish(data) {
+    return request({
+        url: '/api/lessonDraft/createForm',
+        method: 'post',
+        data: data
+    });
+}
+/** 更新课程*/
+export function updateLesson(data) {
+    return request({
+        url: `/api/lessonDraft/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+
+/** 删除课程*/
+export function delLesson(data) {
+    return request({
+        url: `/api/lessonDraft/${data.id}`,
+        method: 'delete',
+        data: data
+    });
+}
+
+/** 创建课程章节*/
+export function createLessonChapter(data) {
+    return request({
+        url: `/api/lessonDraft/${data.lessonId}/chapter`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 更新课程章节*/
+export function updateLessonChapter(data) {
+    return request({
+        url: `/api/lessonDraft/chapter/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+/** 创建课程章节详细内容*/
+export function getLessonChapterDetail(data) {
+    return request({
+        url: `/api/lessonDraft/chapter/${data.id}`,
+        method: 'get'
+    });
+}
+
+/** 发布课程*/
+export function publishLesson(data) {
+    return request({
+        url: `/api/lessonDraft/${data.id}/publish`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 课程章节拖拽排序*/
+export function dragSortLessonChapter(data) {
+    return request({
+        url: '/api/lessonDraft/dragSort',
+        method: 'put',
+        data: data
+    });
+}
+
+/** 根据lessonId获取课程名称*/
+export function getLessonNameByMapIdAndLessonId(model) {
+    return request({
+        url: `/api/lessonDraft/${model.mapId}/${model.lessonId}`,
+        method: 'get'
+    });
+}

src/api/jmap/map.js

@@ -0,0 +1,99 @@
+import request from '@/utils/request';
+
+/** 获取发布地图管理分页*/
+export function getPublishMapList(params) {
+    return request({
+        url: '/api/map',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 根据皮肤获取发布地图列表*/
+export function getPublishMapListBySkinStyle(skinStyle) {
+    return request({
+        url: `/api/map/${skinStyle}/list`,
+        method: 'get'
+    });
+}
+
+/** 获取地图版本信息*/
+export function getPublishMapVersion(skinStyle) {
+    return request({
+        url: `/api/map/${skinStyle}/version`,
+        method: 'get'
+    });
+}
+
+/** 获取发布地图详细内容*/
+export function getPublishMapDetail(skinStyle) {
+    return request({
+        url: `/api/map/${skinStyle}/details`,
+        method: 'get'
+    });
+}
+
+/** 获取发布地图列车列表*/
+export function getPublishTrainList(skinStyle) {
+    return request({
+        url: `/api/map/${skinStyle}/train`,
+        method: 'get'
+    });
+}
+
+/** 获取发布地图列表*/
+export function listPublishMap() {
+    return request({
+        url: '/api/map/list',
+        method: 'get'
+    });
+}
+
+/** 根据地图id获取地图信息*/
+export function getPublishMapInfo(mapId) {
+    return request({
+        url: `/api/map/${mapId}`,
+        method: 'get'
+    });
+}
+
+/** 发布地图数据导出*/
+export function getPublishMapExport(mapId) {
+    return request({
+        url: `/api/map/${mapId}/export`,
+        method: 'get'
+    });
+}
+
+/** 删除发布地图*/
+export function delPublishMap(mapId) {
+    return request({
+        url: `/api/map/${mapId}`,
+        method: 'DELETE'
+    });
+}
+
+/**发布地图上架*/
+export function putMapOnLine(mapId) {
+    return request({
+        url: `/api/map/${mapId}/onLine`,
+        method: 'put',
+    });
+}
+
+/**发布地图下架*/
+export function putMapOffLine(mapId) {
+    return request({
+        url: `/api/map/${mapId}/offLine`,
+        method: 'put',
+    });
+}
+
+/**修改发布地图名称*/
+export function updatePublishMapName(data) {
+    return request({
+        url: `/api/map/${data.mapId}/updateName`,
+        method: 'put',
+        data: data
+    });
+}

src/api/jmap/mapdraft.js

@@ -0,0 +1,340 @@
+import request from '@/utils/request';
+
+/** 获取地图树形类表*/
+export function getMapTree() {
+    return request({
+        url: '/api/mapBuild/tree',
+        method: 'get'
+    });
+}
+
+/** 草稿地图列表*/
+export function listMap() {
+    return request({
+        url: '/api/mapBuild/list',
+        method: 'get'
+    });
+}
+
+/** 获取草稿地图详细内容*/
+export function getMapDetail(id) {
+    return request({
+        url: `/api/mapBuild/${id}/mapDataDetail`,
+        method: 'get'
+    });
+}
+
+
+/** 新建草稿地图*/
+export function newMap(data) {
+    return request({
+        url: '/api/mapBuild/create',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 更新草稿地图*/
+export function updateMap(data) {
+    return request({
+        url: `/api/mapBuild/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+/** 删除草稿地图*/
+export function deleteMap(data) {
+    return request({
+        url: `/api/mapBuild/delete/${data}`,
+        method: 'delete'
+    });
+}
+
+/** 保存草稿地图*/
+export function saveMap(data) {
+    return request({
+        url: `/api/mapBuild/${data.mapId}/saveElements`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 草稿地图另存为*/
+export function saveAsMap(data) {
+    return request({
+        url: `/api/mapBuild/${data.id}/saveAs`,
+        method: 'post',
+        data: {
+            name: data.name
+        }
+    });
+}
+
+/** 使用发布地图新建草稿地图*/
+export function newUsePublishMap(data) {
+    return request({
+        url: '/api/mapBuild/createFrom',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 发布地图*/
+export function publishMap(data) {
+    return request({
+        url: `/api/mapBuild/${data.id}/publish`,
+        method: 'post',
+        data: data
+    });
+}
+
+
+/** 草稿地图数据导入*/
+export function postBuildMapImport(data) {
+    return request({
+        url: `/api/mapBuild/import`,
+        method: 'post',
+        data: data,
+        time: 60000
+    });
+}
+
+/** 获取延续保护道岔数据列表*/
+export function listOverlapSwitch(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/overlapSwitch`,
+        method: 'get'
+    });
+}
+
+/** 获取自动触发区段数据列表*/
+export function listTriggerSection(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/triggerSection`,
+        method: 'get'
+    });
+}
+
+/** 获取延续保护区段数据列表*/
+export function listOverlapSection(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/overlapSection`,
+        method: 'get'
+    });
+}
+
+/** 获取物理区段数据列表*/
+export function listPhysicsSection(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/physicsSection`,
+        method: 'get'
+    });
+}
+
+/** 获取屏蔽门数据列表*/
+export function listStationStand(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/stationStand`,
+        method: 'get'
+    });
+}
+
+/** 获取道岔段数据列表*/
+export function listSwitch(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/switch`,
+        method: 'get'
+    });
+}
+
+/** 获取敌对进路数据列表*/
+export function listAgainstRoute(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/againstRoute`,
+        method: 'get'
+    });
+}
+/** 查询进路侧防道岔*/
+export function listFlankProtectionSwitch(mapId, routeCode) {
+    return request({
+        url: `/api/mapBuild/${mapId}/${routeCode}/flankProtection`,
+        method: 'get'
+    });
+}
+
+/** 查询进路列表*/
+export function listRouteAccess(mapId, params) {
+    return request({
+        url: `/api/mapBuild/${mapId}/access`,
+        method: 'get',
+        params: params
+    });
+}
+/** 查询进路地图列表*/
+export function listRouteMapAccess(mapId) {
+    return request({
+        url: `/api/mapBuild/${mapId}/access/all`,
+        method: 'get'
+    });
+}
+/** 查询进路明细*/
+export function queryRouteAccessDetail(data) {
+    return request({
+        url: `/api/mapBuild/${data.mapId}/access/${data.id}`,
+        method: 'get'
+    });
+}
+/** 创建进路*/
+export function createRouteAccess(data) {
+    return request({
+        url: `/api/mapBuild/${data.mapId}/access`,
+        method: 'post',
+        data: data
+    });
+}
+/** 删除进路*/
+export function deleteRouteAccess(mapId, id) {
+    return request({
+        url: `/api/mapBuild/${mapId}/access/${id}`,
+        method: 'delete'
+    });
+}
+/** 更新进路*/
+export function updateRouteAccess(data) {
+    return request({
+        url: `/api/mapBuild/${data.mapId}/access/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+/** 更新敌对进路*/
+export function updateAgainstAccess(data) {
+    return request({
+        url: `/api/mapBuild/${data.mapId}/access/${data.id}/againstRel`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 创建联动道岔*/
+export function createLinkageSwitch(data) {
+    return request({
+        url: `/api/mapBuild/switchCoupled`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 删除联动道岔*/
+export function deleteLinkageSwitch(mapId, coupleId) {
+    return request({
+        url: `/api/mapBuild/switchCoupled/${mapId}/${coupleId}`,
+        method: 'delete'
+    });
+}
+
+/** get联动道岔列表*/
+export function listLinkageSwitch(mapId, params) {
+    return request({
+        url: `/api/mapBuild/switchCoupled/list/${mapId}`,
+        method: 'get',
+        params: params
+    });
+}
+
+/** 草稿地图数据校验*/
+export function verifyMap(id) {
+    return request({
+        url: `/api/mapBuild/${id}/checkData`,
+        method: 'get',
+    });
+}
+
+/** 分页查询交路数据*/
+export function listRouting(mapId, params) {
+    return request({
+        url: `/api/mapBuild/${mapId}/routing`,
+        method: 'get',
+        params: params
+    });
+}
+
+/** 创建交路*/
+export function addRouting(data) {
+    return request({
+        url: `/api/mapBuild/routing`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 删除交路*/
+export function deleteRouting(routingId) {
+    return request({
+        url: `/api/mapBuild/routing/${routingId}`,
+        method: 'delete'
+    });
+}
+
+/** 获取交路详情*/
+export function getRouting(routingId) {
+    return request({
+        url: `/api/mapBuild/routing/${routingId}`,
+        method: 'get'
+    });
+}
+
+/** 更新交路*/
+export function updateRouting(data) {
+    return request({
+        url: `/api/mapBuild/routing/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+//  创建自动信号
+export function postAutoSignal(data) {
+    return request({
+        url: `/api/mapBuild/autoSignal`,
+        method: 'post',
+        data: data
+    });
+}
+
+//  删除自动信号
+export function delAutoSignal(autoSignalId) {
+    return request({
+        url: `/api/mapBuild/autoSignal/${autoSignalId}`,
+        method: 'delete'
+    });
+}
+
+//  删除自动信号
+export function getAutoSignalList(mapId, params) {
+    return request({
+        url: `/api/mapBuild/${mapId}/autoSignal`,
+        method: 'get',
+        params
+    });
+}
+
+//  获取自动信号
+export function getAutoSignalDetail(autoSignalId) {
+    return request({
+        url: `/api/mapBuild/autoSignal/${autoSignalId}`,
+        method: 'get'
+    });
+}
+
+//  更新自动信号
+export function putAutoSignal(data) {
+    return request({
+        url: `/api/mapBuild/autoSignal/${data.autoSignalId}`,
+        method: 'put',
+        data: data
+    });
+}
+

src/api/jmap/pathunit.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request';
+
+/** 获取路径单元列表*/
+export function getRouteUnitList(id, data) {
+    return request({
+        url: `/api/mapBuild/${id}/routeUnit`,
+        method: 'get',
+        params: data
+    });
+}
+
+/** 创建路径单元*/
+export function addRouteUnit(data) {
+    return request({
+        url: `/api/mapBuild/routeUnit`,
+        method: 'post',
+        data: data,
+    });
+}
+
+/** 删除路径单元*/
+export function delRouteUnit(id) {
+    return request({
+        url: `/api/mapBuild/routeUnit/${id}`,
+        method: 'DELETE'
+    });
+}
+
+/** 获取路径单元*/
+export function getRouteUnit(id) {
+    return request({
+        url: `/api/mapBuild/routeUnit/${id}`,
+        method: 'get'
+    });
+}
+
+/** 更新路径单元*/
+export function setRouteUnit(data) {
+    return request({
+        url: `/api/mapBuild/routeUnit/${data.id}`,
+        method: 'put',
+        data: data,
+    });
+}

src/api/jmap/training.js

@@ -0,0 +1,207 @@
+import request from '@/utils/request';
+
+/** 清除实训数据*/
+export function clearTraining(args) {
+	return request({
+		url: `/api/training/${args.id}`,
+		method: 'delete'
+	});
+}
+
+/** 开始实训*/
+export function startTraining(args, group) {
+	return request({
+		url: `/api/training/${args.id}/start`,
+		method: 'get',
+		params: {
+			group
+		}
+	});
+}
+
+/** 实训结束*/
+export function endTraining(args, group) {
+	return request({
+		url: `/api/training/${args.lessonId}/${args.id}/end`,
+		method: 'get',
+		params: {
+			mode: args.mode,
+			usedTime: args.usedTime,
+			group
+		}
+	});
+}
+
+/** 发送步骤数据*/
+export function sendTrainingNextStep(data, group) {
+	return request({
+		url: `/api/training/${data.trainingId}/nextStep`,
+		method: 'post',
+		data: data.operate,
+		params: {
+			group
+		}
+	});
+}
+
+
+/** 获取实训树*/
+export function getTrainingTree() {
+	return request({
+		url: `/api/training/tree`,
+		method: 'get'
+	});
+}
+
+/** 获取章节基本信息*/
+export function getTrainingDetail(args) {
+	return request({
+		url: `/api/training/${args.id}`,
+		method: 'get'
+	});
+}
+
+/** 获取实训详细内容*/
+export function getTrainingMapDetail(args) {
+	return request({
+		url: `/api/training/${args.id}/map`,
+		method: 'get',
+		params: {
+			group: args.group
+		}
+	});
+}
+
+/** 添加实训*/
+export function addTraining(data) {
+	return request({
+		url: '/api/training',
+		method: 'post',
+		data: data
+	});
+}
+
+/** 更新实训*/
+export function updateTraining(data) {
+	return request({
+		url: `/api/training/${data.id}`,
+		method: 'put',
+		data: data
+	});
+}
+
+/** 保存实训初始状态*/
+export function saveTrainingInitStatus(data, group) {
+	return request({
+		url: `/api/training/${data.id}/detailSave?group=${group}`,
+		method: 'post',
+		data: data
+	});
+}
+
+/** 保存实训步骤数据*/
+export function saveTrainingStepsData(data) {
+	return request({
+		url: `/api/training/${data.id}/stepsSave`,
+		method: 'post',
+		data: data
+	});
+}
+
+/** 获取实训步骤数据*/
+export function getTrainingStepsDetail(trainingId, params) {
+	return request({
+		url: `/api/training/${trainingId}/detail`,
+		method: 'get',
+		params: params
+	});
+}
+
+/** 查询实训列表*/
+export function pageQueryTraining(params) {
+	return request({
+		url: `/api/training/pagedQuery`,
+		method: 'get',
+		params: params
+	});
+}
+
+/** 自动生成实训操作*/
+export function addAutoTraining(data) {
+	return request({
+		url: `/api/training/generate`,
+		method: 'post',
+		data: data
+	});
+}
+
+/** 修改自动删除实训操作*/
+export function updateAutoTraining(data) {
+	return request({
+		url: `/api/training/batchUpdateGenerate`,
+		method: 'put',
+		data: data
+	});
+}
+
+/** 删除自动生成实训*/
+export function deleteAutoTraining(params) {
+	return request({
+		url: `/api/training/generate`,
+		method: 'delete',
+		params: params
+	});
+}
+
+/**获取用户实训列表*/
+export function getTrainingList(data) {
+	return request({
+		url: `/api/training/list`,
+		method: 'get',
+		params: data
+	});
+}
+
+export function sendCommand(group, command) {
+	return request({
+		url: `/api/training/deviceChange?group=${group}`,
+		method: 'put',
+		data: {
+			param: command.val,
+			type: command.type,
+			code: command.code,
+			operation: command.operation
+		}
+	});
+}
+
+export function updateLesson(data) {
+	return request({
+		url: `/api/training/userTraining/${data.id}`,
+		method: 'put',
+		data: data
+	});
+}
+// 添加用户实训数据
+export function addUserTraining(data) {
+	return request({
+		url: `/api/training/userTraining`,
+		method: 'post',
+		data: data
+	});
+}
+// 更新用户实训数据
+export function putUserTraining(data) {
+	return request({
+		url: `/api/training/userTraining/${data.id}`,
+		method: 'put',
+		data: data
+	});
+}
+// 清除实训数据
+export function deleteUserTraining(statsId) {
+	return request({
+		url: `/api/training/userTraining/${statsId}`,
+		method: 'delete',
+	});
+}

src/api/login.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request from '@/utils/request';
 
 // 修改密码
 export function changePassword(userId, data) {
@@ -6,7 +6,7 @@ export function changePassword(userId, data) {
 		url: `/api/login/${userId}/password`,
 		method: 'put',
 		data: data
-	})
+	});
 }
 
 // 账号密码 其他系统
@@ -27,7 +27,6 @@ export function getLoginUrl(params) {
 	});
 }
 
-
 // 获取登录信息
 export function getInfo(token) {
 	return request({
@@ -73,6 +72,6 @@ export function checkLoginStatus(sessionId) {
 export function checkLoginLine() {
 	return request({
 		url: '/api/cache/heartBeat',
-		method: 'get',
+		method: 'get'
 	});
 }

src/api/management/author.js

@@ -0,0 +1,114 @@
+
+
+import request from '@/utils/request';
+
+
+/** 分页获取课程权限数据*/
+export function getLessonPermissonPageList(params) {
+    return request({
+        url: '/api/permission',
+        method: 'get',
+        params: params
+    });
+}
+
+// 根据ID获取权限数据
+// export function getLessonPermissonDetail(id) {
+// 	return request({
+// 		url: `/api/permission/${id}`,
+// 		method: 'get'
+// 	});
+// }
+
+/** 创建课程权限*/
+export function createLessonPermisson(data) {
+    return request({
+        url: '/api/permission',
+        method: 'post',
+        data: data
+    });
+}
+/**获取用户某课程某段时间内可用的权限数量*/
+export function getTotalRemains(params) {
+    return request({
+        url: '/api/permission/totalRemains',
+        method: 'get',
+        params: params
+    });
+}
+/**设置权限失效或有效*/
+export function setLessonPermisson(data) {
+    return request({
+        url: `/api/permission/${data.id}/status`,
+        method: 'put',
+        data: data
+    });
+}
+
+/**
+ * 查询仿真权限列表
+ */
+export function queryPermissionSimulation(data) {
+    return request({
+        url: `/api/permission/${data.mapId}/${data.prdCode}/simulation`,
+        method: 'get'
+    });
+}
+
+/**获取大屏权限列表*/
+export function queryPermissionScreen() {
+    return request({
+        url: `/api/permission/bigScreen`,
+        method: 'get'
+    });
+}
+
+/** 更新课程权限*/
+/*
+export function updateLessonPermisson(data) {
+	return request({
+		url: '/api/permission',
+		method: 'put',
+		data: data
+	});
+}
+*/
+
+/** 删除课程权限*/
+/*
+export function deleteLessonPermisson(id) {
+	return request({
+		url: '/api/permission/' + id,
+		method: 'delete'
+	});
+}
+*/
+
+
+/**
+ * 用户权限列表
+ */
+export function listUserPermision(params) {
+    return request({
+        url: `/api/permission/my`,
+        method: 'get',
+        params: params
+    });
+}
+
+/** 用户权限列表 */
+export function getDistribute(id) {
+    return request({
+        url: `/api/distribute/${id}`,
+        method: 'get',
+    });
+}
+
+/** 用户权限列表 */
+export function putPermissionOwner(data) {
+    return request({
+        url: `/api/permission/${data.id}/owner`,
+        method: 'put',
+        data: data.owner
+    });
+}

src/api/management/dictionary.js

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+
+export function list(params) {
+    return request({
+        url: '/api/dictionary/list',
+        method: 'get',
+        params: params
+    });
+}
+
+export function checkDicCodeExist(code) {
+    return request({
+        url: '/api/dictionary/checkExistByCode',
+        method: 'get',
+        params: {
+            code: code
+        }
+    });
+}
+
+export function getData(id) {
+    return request({
+        url: `/api/dictionary/${id}`,
+        method: 'get'
+    });
+}
+
+export function create(data) {
+    return request({
+        url: '/api/dictionary/create',
+        method: 'post',
+        data: data
+    });
+}
+
+export function del(id) {
+    return request({
+        url: `/api/dictionary/delete/${id}`,
+        method: 'delete'
+    });
+}
+
+export function update(data) {
+    return request({
+        url: `/api/dictionary/update/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+/**
+ * 根据字典code获取明细列表
+ * @param {*} code 
+ */
+export function getDetailList(code) {
+    return request({
+        url: '/api/dictionary/getDetailListByCode',
+        method: 'get',
+        params: {
+            code: code
+        }
+    });
+}

src/api/management/dictionaryDetail.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request';
+
+export function list(dicId, params) {
+    return request({
+        url: `/api/dictionary/${dicId}/detail/list`,
+        method: 'get',
+        params: params
+    });
+}
+
+export function checkDicDetailCodeExist(dicId, code) {
+    return request({
+        url: `/api/dictionary/${dicId}/detail/checkExistByCode`,
+        method: 'get',
+        params: {
+            code: code
+        }
+    });
+}
+
+export function getData(dicId, id) {
+    return request({
+        url: `/api/dictionary/${dicId}/detail/${id}`,
+        method: 'get'
+    });
+}
+
+export function create(dicId, data) {
+    return request({
+        url: `/api/dictionary/${dicId}/detail/create`,
+        method: 'post',
+        data: data
+    });
+}
+
+export function del(dicId, id) {
+    return request({
+        url: `/api/dictionary/${dicId}/detail/delete/${id}`,
+        method: 'delete'
+    });
+}
+
+export function update(dicId, data) {
+    return request({
+        url: `/api/dictionary/${dicId}/detail/update/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}

src/api/management/distribute.js

@@ -0,0 +1,107 @@
+import request from '@/utils/request';
+
+/** 上课权限获取*/
+export function getLessons(data) {
+    return request({
+        url: '/api/distribute/getLessons',
+        method: 'get',
+        data: data
+    });
+}
+
+/** 上课权限分发*/
+export function giveLessons(data) {
+    return request({
+        url: '/api/distribute/givePermission',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 接收课程权限*/
+export function receiveLessons(data) {
+    return request({
+        url: '/api/distribute/receiveLessons',
+        method: 'get',
+        data: data
+    });
+}
+
+/** 考试权限分发*/
+export function giveExams(data) {
+    return request({
+        url: `/api/distribute/giveExams`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 权限打包分页查询*/
+export function listPackagePermission(params) {
+    return request({
+        url: '/api/distribute',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 打包权限*/
+export function packagePermissionDistribute(data) {
+    return request({
+        url: `/api/distribute/givePermission/package`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 权限回收*/
+export function restorePackagePermission(id) {
+    return request({
+        url: `/api/distribute/${id}/restore`,
+        method: 'put',
+    });
+}
+
+/** 生成打包权限二维码*/
+export function getPackageQrCode(params) {
+    return request({
+        url: `/api/distribute/package/qrCode`,
+        method: 'get',
+        params: params
+    });
+}
+
+/** 权限分发打包详情*/
+export function getPermissionPackageDetail(id, params) {
+    return request({
+        url: `/api/distribute/package/${id}/detail`,
+        method: 'get',
+        params: params
+    });
+}
+
+/** 权限分发打包*/
+export function permissionDistributePackage(data) {
+    return request({
+        url: `/api/distribute/package`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 权限分发解包*/
+export function permissionDistributeUnPackage(permissionId) {
+    return request({
+        url: `/api/distribute/${permissionId}/unPackage`,
+        method: 'delete'
+    });
+}
+
+/** 查询可打包的权限分发*/
+export function listCanPackagePermission(params) {
+    return request({
+        url: `/api/distribute/package`,
+        method: 'get',
+        params: params
+    });
+}

src/api/management/exam.js

@@ -0,0 +1,96 @@
+import request from '@/utils/request';
+
+/** 获取考试列表树*/
+export function getCourseLessonTree(params) {
+    return request({
+        url: '/api/exam/tree',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 创建对应课程考题 */
+export function setCourseList(data) {
+    return request({
+        url: `/api/exam`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** 获取对应课程下类型 */
+export function getCourseTypeList(data) {
+    return request({
+        url: `/api/exam/${data.lessonId}/trainingTypes`,
+        method: 'get',
+    });
+}
+
+/** 获取考试课程详情 */
+export function getCourseLessonDetail(data) {
+    return request({
+        url: `/api/exam/${data.lessonId}/list`,
+        method: 'get'
+    });
+}
+
+/** 获取试卷详情 */
+export function getExamLessonDetail(examId) {
+    return request({
+        url: `/api/exam/${examId}`,
+        method: 'get'
+    });
+}
+
+/** 获取试卷列表 */
+export function getExamList(data) {
+    return request({
+        url: '/api/exam/list',
+        method: 'get',
+        params: data
+    });
+}
+
+/** 删除试卷 */
+export function deleteExam(data) {
+    return request({
+        url: `/api/exam/${data.id}`,
+        method: 'delete'
+    });
+}
+
+/** 设置试卷下架 */
+export function setExamEfficacy(data) {
+    return request({
+        url: `/api/exam/${data.id}/offLine`,
+        method: 'put'
+    });
+}
+
+/** 设置试卷上架 */
+export function setExamEffectivey(data) {
+    return request({
+        url: `/api/exam/${data.id}/onLine`,
+        method: 'put'
+    });
+}
+
+/** 查询课程下类型题数 */
+export function getLessonTypeNum(data) {
+    return request({
+        url: `/api/exam/trainingNum/${data.lessonId}/${data.trainingType}`,
+        method: 'get',
+        params: {
+            operateType: data.operateType
+        },
+    });
+}
+
+/** 更新考试规则*/
+export function updateExamRules(data) {
+    return request({
+        url: `/api/exam/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}

src/api/management/goods.js

@@ -0,0 +1,112 @@
+import request from '@/utils/request';
+
+/** 获取商品信息 */
+export function getCommodityDetailByParams(data) {
+    return request({
+        url: `/api/goods/detail`,
+        method: 'get',
+        params: data
+    });
+}
+
+
+/**
+ * 获取商品明细列表
+ */
+export function getCommodityList(params) {
+    return request({
+        url: '/api/goods',
+        method: 'get',
+        params: params
+    });
+}
+
+/**
+ * 保存商品明细列表
+ */
+export function saveCommodityList(params) {
+    return request({
+        url: '/api/goods',
+        method: 'post',
+        data: params
+    });
+}
+
+/**
+ * 删除商品明细
+ */
+export function delCommodity(id) {
+    return request({
+        url: `/api/goods/${id}`,
+        method: 'delete'
+    });
+}
+
+/**
+ * 获取商品地图，产品，课程列表
+ */
+export function getMapLesson() {
+    return request({
+        url: `/api/goods/tree`,
+        method: 'get'
+    });
+}
+
+/**
+ * 获取商品地图，产品，课程列表
+ */
+export function getCommodityDetailById(id) {
+    return request({
+        url: `/api/goods/${id}`,
+        method: 'get'
+    });
+}
+
+/**
+ * 获取商品地图，产品，课程列表
+ */
+export function updataCommodityList(data) {
+    return request({
+        url: `/api/goods`,
+        method: 'put',
+        data: data
+    });
+}
+
+/**
+ * 设置失效或有效切换
+ */
+export function setCommodityStatus(id) {
+    return request({
+        url: `/api/goods/${id}/status`,
+        method: 'put',
+    });
+}
+
+/**获取试用时长*/
+export function getGoodsTryUse(data) {
+    return request({
+        url: `/api/goods/tryUse`,
+        method: 'get',
+        params: data
+    });
+}
+
+/**设置试用时长*/
+export function setGoodsTryUse(data) {
+    return request({
+        url: `/api/goods/${data.goodsId}/tryUse`,
+        method: 'put',
+        data: {
+            time: data.time
+        }
+    });
+}
+
+/** 获取商品列表*/
+export function getGoodsList() {
+    return request({
+        url: `/api/goods/list`,
+        method: 'get'
+    });
+}

src/api/management/mapprd.js

@@ -0,0 +1,114 @@
+import request from '@/utils/request';
+
+/** 获取发布地图树*/
+export function getPublishMapTree(cityCode) {
+    return request({
+        url: `/api/mapPrd/${cityCode}/tree`,
+        method: 'get'
+    });
+}
+
+/** 获取产品详细内容*/
+export function getProductDetail(prdCode) {
+    return request({
+        url: `/api/mapPrd/${prdCode}`,
+        method: 'get'
+    });
+}
+
+/** 检查实训编码是否已存在*/
+export function checkCodeExist(data) {
+    return request({
+        url: '/api/mapPrd/checkCodeExist',
+        method: 'get',
+        params: data
+    });
+}
+
+/** 获取产品类目数*/
+export function getProductTree() {
+    return request({
+        url: `/api/mapPrd/tree`,
+        method: 'get'
+    });
+}
+
+/** 创建实训类目*/
+export function createTrainingCategory(data) {
+    return request({
+        url: '/api/mapPrd',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 更新实训类目*/
+export function updateTrainingCategory(data) {
+    return request({
+        url: `/api/mapPrd/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+/** 删除实训类目*/
+export function deleteTrainingCategory(data) {
+    return request({
+        url: `/api/mapPrd/${data.id}`,
+        method: 'delete',
+    });
+}
+
+/**
+ * 获取地图下的产品列表
+ */
+export function getCommodityMapProduct(skinStyle) {
+    return request({
+        url: `/api/mapPrd/${skinStyle}/list`,
+        method: 'get',
+    });
+}
+
+/**
+ * 获取地图下的产品详情
+ */
+export function getMapProductDetail(prdCode) {
+    return request({
+        url: `/api/mapPrd/${prdCode}`,
+        method: 'get',
+    });
+}
+
+/**获取产品管理列表*/
+export function getProductList(data) {
+    return request({
+        url: `/api/mapPrd/list`,
+        method: 'get',
+        params: data
+    });
+}
+
+/**发布地图产品上架*/
+export function putMapProductOnLine(id) {
+    return request({
+        url: `/api/mapPrd/${id}/onLine`,
+        method: 'put',
+    });
+}
+
+/**发布地图产品下架*/
+export function putMapProductOffLine(id) {
+    return request({
+        url: `/api/mapPrd/${id}/offLine`,
+        method: 'put',
+    });
+}
+
+/**校验产品code是否已存在*/
+export function checkMapProductCodeExist(params) {
+    return request({
+        url: `/api/mapPrd/checkCodeExist`,
+        method: 'get',
+        params: params
+    });
+}

src/api/management/mapskin.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request';
+
+/** 分页查询皮肤*/
+export function getSkinStylePageList(params) {
+	return request({
+		url: `/api/mapSkin`,
+		method: 'get',
+		params: params
+	});
+}
+
+/** 添加皮肤*/
+export function addSkinStyle(data) {
+	return request({
+		url: `/api/mapSkin`,
+		method: 'post',
+		data: data
+	});
+}
+
+/** 删除皮肤*/
+export function delSkinStyle(id) {
+	return request({
+		url: `/api/mapSkin/${id}`,
+		method: 'delete'
+	});
+}
+
+/** 查询地图皮肤 */
+export function querySkinStyle(id) {
+	return request({
+		url: `/api/mapSkin/${id}`,
+		method: 'get'
+	});
+}
+
+/** 修改地图皮肤*/
+export function updateSkinStyle(data) {
+	return request({
+		url: `/api/mapSkin/${data.id}`,
+		method: 'put',
+		data: data
+	});
+}
+
+/** 通过皮肤Code更新地图皮肤*/
+export function updateSkinStyleByCode(data) {
+	return request({
+		url: `/api/mapSkin/${data.code}/update`,
+		method: 'put',
+		data: data
+	});
+}
+
+/** 查询皮肤是否存在*/
+export function querySkinStyleExistByCode(code) {
+	return request({
+		url: `/api/mapSkin/${code}/exist`,
+		method: 'get'
+	});
+}
+
+/** 获取皮肤列表*/
+export function getSkinStyleList() {
+	return request({
+		url: `/api/mapSkin/list`,
+		method: 'get'
+	});
+}

src/api/management/operation.js

@@ -0,0 +1,128 @@
+
+import request from '@/utils/request';
+
+/**
+ * 获取实训规则列表
+ */
+export function getTrainingRulesList(params) {
+    return request({
+        url: `/api/operate`,
+        method: 'get',
+        params: params
+    });
+}
+
+/**
+ *  生成考试定义规则
+ */
+export function postTrainingRulesData(data) {
+    return request({
+        url: `/api/operate`,
+        method: 'post',
+        data: data
+    });
+}
+
+
+/**
+ *  修改考试定义规则
+ */
+export function putTrainingRulesData(data) {
+    return request({
+        url: `/api/operate/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}
+
+/**
+ *  删除考试定义规则
+ */
+export function deleteTrainingRulesData(id) {
+    return request({
+        url: `/api/operate/${id}`,
+        method: 'DELETE'
+    });
+}
+
+/**
+ * 获取实训规则步骤详情列表
+ */
+export function getOperateStepDataList(id, params) {
+    return request({
+        url: `/api/operate/${id}/step`,
+        method: 'get',
+        params: params
+    });
+}
+
+/**
+ * 创建操作步骤
+ */
+export function postOperateStepData(params) {
+    return request({
+        url: `/api/operate/${params.definitionId}/step`,
+        method: 'post',
+        data: params
+    });
+}
+
+/**
+ * 修改操作步骤
+ */
+export function putOperateStepData(params) {
+    return request({
+        url: `/api/operate/step/${params.id}`,
+        method: 'put',
+        data: params
+    });
+}
+
+/**
+ * 修改操作步骤
+ */
+export function deleteOperateStepData(id) {
+    return request({
+        url: `/api/operate/step/${id}`,
+        method: 'delete'
+    });
+}
+
+/**
+ * 批量生成操作列表
+ */
+export function addTrainingRulesList(skinStyle, data) {
+    return request({
+        url: `/api/operate/${skinStyle}/generate`,
+        method: 'post',
+        data: data
+    });
+}
+
+/**
+ * 获取操作占位列表
+ */
+export function getPlaceholderList(data) {
+    return request({
+        url: `/api/operate/placeholder`,
+        method: 'get',
+        params: {
+            trainingType: data.trainingType,
+            skinStyle: data.skinStyle,
+        }
+    });
+}
+
+/**
+ * 获取产品下实训操作列表
+ */
+export function getOperateTrainingList(data) {
+    return request({
+        url: `/api/operate/type`,
+        method: 'get',
+        params: {
+            productType: data.productType,
+            skinStyle: data.skinStyle,
+        }
+    });
+}

src/api/management/order.js

@@ -0,0 +1,106 @@
+
+import request from '@/utils/request';
+
+/** 分页获取订单数据*/
+export function getOrderPageList(params) {
+    return request({
+        url: '/api/order',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 根据ID获取订单数据*/
+export function getOrderDetail(id, params) {
+    return request({
+        url: `/api/order/${id}`,
+        method: 'get',
+        params: params
+    });
+}
+
+
+/** 创建一个订单*/
+export function createOrder(data) {
+    return request({
+        url: '/api/order',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 更新订单*/
+export function updateOrder(data) {
+    return request({
+        url: '/api/order',
+        method: 'put',
+        data: data
+    });
+}
+
+export function deleteOrder(id) {
+    return request({
+        url: `/api/order/${id}`,
+        method: 'delete'
+    });
+}
+
+/** 订单权限领取*/
+export function getOrder(params) {
+    return request({
+        url: '/api/order/getOrder',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 订单权限分发*/
+export function giveOrder(data) {
+    return request({
+        url: '/api/order/giveOrder',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 订单续费*/
+export function getOrderCharge(id) {
+    return request({
+        url: `/api/order/${id}/charge`,
+        method: 'get'
+    });
+}
+
+/** 计算总价*/
+export function calcuteOrderSumPrice(args) {
+    return request({
+        url: `/api/order/price`,
+        method: 'get',
+        params: args
+    });
+}
+
+/** 提交订单*/
+export function commitOrder(data) {
+    return request({
+        url: '/api/order/submit',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 确认订单*/
+export function confirmOrder(data) {
+    return request({
+        url: `/api/order/${data.orderId}/${data.type}/pay`,
+        method: 'get'
+    });
+}
+
+/** 取消订单*/
+export function cancalOrder(orderId) {
+    return request({
+        url: `/api/order/${orderId}/cancelPay`,
+        method: 'put'
+    });
+}

src/api/management/organization.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+/**获取组织/企业数据*/
+export function getOrganizationList() {
+    return request({
+        url: '/api/organization',
+        method: 'get'
+    });
+}
+
+/** 添加组织/企业*/
+export function addOrganization(data) {
+    return request({
+        url: '/api/organization',
+        method: 'post',
+        data: data
+    });
+}

src/api/management/task.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request';
+
+/** 创建实训生成任务*/
+export function addAutoGenerateTask(data) {
+    return request({
+        url: `/api/task`,
+        method: 'post',
+        data: data
+    });
+}
+
+/** get任务列表*/
+export function getTaskList(param) {
+    return request({
+        url: '/api/task',
+        method: 'get',
+        params: param
+    });
+}
+
+/** 开始任务*/
+export function postTask(data) {
+    return request({
+        url: `/api/task/${data.id}/execute`,
+        method: 'post'
+    });
+}
+
+/** 开始任务*/
+export function postTaskCancel(id) {
+    return request({
+        url: `/api/task/${id}/cancel`,
+        method: 'post'
+    });
+}

src/api/management/user.js

@@ -0,0 +1,97 @@
+import request from '@/utils/request';
+/** 注册用户*/
+export function createUserInfo(data) {
+    return request({
+        url: '/api/userinfo/create',
+        method: 'put',
+        data: data
+    });
+}
+/** 根据用户Id获取用户信息*/
+export function getUserInfoByOpenId(params) {
+    return request({
+        url: '/api/userinfo/getByOpenId',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 根据姓名或者手机号查询用户*/
+export function getUserInfoByNameOrMobile(params) {
+    return request({
+        url: '/api/userinfo/nameOrMobile',
+        method: 'get',
+        params: params
+    });
+}
+
+/** 查询用户参数*/
+export function getUserConfigInfo() {
+    return request({
+        url: '/api/user/config',
+        method: 'get'
+    });
+}
+
+/** 设置用户参数*/
+export function setUserConfigInfo(data) {
+    return request({
+        url: '/api/user/config',
+        method: 'post',
+        data: data
+    });
+}
+
+/** 获取销售列表*/
+export function getSellerList() {
+    return request({
+        url: `/api/user/seller`,
+        method: 'get'
+    });
+}
+
+/** 查询用户列表*/
+export function getUserList(params) {
+    return request({
+        url: `/api/user`,
+        method: 'get',
+        params: params
+    });
+}
+
+/** 模糊查询用户 昵称、名称、手机号*/
+export function getDimUserList(params) {
+    return request({
+        url: `/api/user/fuzzy`,
+        method: 'get',
+        params: params
+    });
+}
+
+
+/** 获取用户订阅地图列表*/
+export function getUserSubscribe(userId) {
+    return request({
+        url: `/api/user/subscribe/${userId}`,
+        method: 'get'
+    });
+}
+
+/** 保存用户订阅地图列表*/
+export function saveUserSubscribe(data) {
+    return request({
+        url: '/api/user/subscribe',
+        method: 'post',
+        data: data
+    });
+}
+
+
+// 修改用户权限
+export function putRoles(data) {
+    return request({
+        url: `/api/user/${data.id}/role`,
+        method: 'put',
+        data: data
+    });
+}

src/api/management/userexam.js

@@ -0,0 +1,77 @@
+import request from '@/utils/request';
+
+
+/** 获取考题列表*/
+export function generateExamList(examId) {
+    return request({
+        url: `/api/userExam/${examId}/generate`,
+        method: 'get'
+    });
+}
+
+/** 刷新考题列表*/
+export function refreshExamList(userExamId) {
+    return request({
+        url: `/api/userExam/${userExamId}`,
+        method: 'get'
+    });
+}
+
+/** 提交一个考题*/
+export function finishOneExamQuestion(data) {
+    return request({
+        url: '/api/userExam/finish',
+        method: 'put',
+        data: data
+    });
+}
+
+/** 考试完成提交*/
+export function submitExam(examId) {
+    return request({
+        url: `/api/userExam/${examId}/submit`,
+        method: 'put'
+    });
+
+}
+
+/**获取用户考试列表*/
+export function getPublishExam(data) {
+    return request({
+        url: `/api/userExam/list`,
+        method: 'get',
+        params: data
+    });
+}
+
+/**删除用户考试*/
+export function delPublishExam(id) {
+    return request({
+        url: `/api/userExam/${id}`,
+        method: 'delete'
+    });
+}
+
+/**删除用户实训*/
+export function delTrainingList() {
+    return request({
+        url: `/api/userExam/list`,
+        method: 'delet'
+    });
+}
+
+/** 设置试卷失效 */
+export function setExamGive(id) {
+    return request({
+        url: `/api/userExam/${id}/abandon`,
+        method: 'put'
+    });
+}
+
+export function updateExam(data) {
+    return request({
+        url: `/api/userExam/${data.id}`,
+        method: 'put',
+        data: data
+    });
+}

src/components/PopMenu/index.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import { checkRectCollision } from '@/utils/index'
+import { checkRectCollision } from '@/utils/index';
 export default {
 	name: 'PopMenu',
 	props: {
@@ -102,18 +102,18 @@ export default {
 				y: -1000
 			},
 			height: 'auto'
-		}
+		};
 	},
 	computed: {
 		width() {
-			let fontNum = 0
+			let fontNum = 0;
 			this.menu.forEach(elem => {
 				if (elem.label && elem.label.length > fontNum) {
-					fontNum = elem.label.length
+					fontNum = elem.label.length;
 				}
-			})
-			var width = fontNum * this.defaultFontSize + 40 + 'px'
-			return width
+			});
+			var width = fontNum * this.defaultFontSize + 40 + 'px';
+			return width;
 		}
 	},
 	mounted() {
@@ -121,87 +121,87 @@ export default {
 	methods: {
 		resetShowPosition(point) {
 			if (point) {
-				this.show = true
-				const self = this
+				this.show = true;
+				const self = this;
 				this.$nextTick(() => {
-					const gutter = 3
+					const gutter = 3;
 					// 位置
-					const height = self.$el.clientHeight
-					const width = self.$el.clientWidth
-					let px = 0
-					let py = 0
+					const height = self.$el.clientHeight;
+					const width = self.$el.clientWidth;
+					let px = 0;
+					let py = 0;
 					if (point.x + width > document.documentElement.clientWidth) {
-						px = document.documentElement.clientWidth - width - gutter
+						px = document.documentElement.clientWidth - width - gutter;
 					} else {
-						px = point.x
+						px = point.x;
 					}
 					if (point.y + height > document.documentElement.clientHeight) {
-						py = document.documentElement.clientHeight - height - gutter
+						py = document.documentElement.clientHeight - height - gutter;
 					} else {
-						py = point.y
+						py = point.y;
 					}
 					// 处理和提示框重叠问题
-					const popTipDialog = document.getElementById('pop_tip_dialog')
+					const popTipDialog = document.getElementById('pop_tip_dialog');
 					if (popTipDialog) {
 						const tipRect = {
 							point: { x: popTipDialog.offsetLeft, y: popTipDialog.offsetTop },
 							width: popTipDialog.offsetWidth,
 							height: popTipDialog.offsetHeight
-						}
+						};
 						const menuRect = {
 							point: { x: px, y: py },
 							width: self.$el.offsetWidth,
 							height: self.$el.offsetHeight
-						}
-						const collision = checkRectCollision(tipRect, menuRect)
+						};
+						const collision = checkRectCollision(tipRect, menuRect);
 						// 若重叠，调整位置
 						if (collision) {
-							px = tipRect.point.x + tipRect.width + gutter
+							px = tipRect.point.x + tipRect.width + gutter;
 							if (px + width > document.documentElement.clientWidth) {
-								px = tipRect.point.x - menuRect.width - gutter
+								px = tipRect.point.x - menuRect.width - gutter;
 							}
 						}
 					}
-					self.tPosition.x = px
-					self.tPosition.y = py
-				})
+					self.tPosition.x = px;
+					self.tPosition.y = py;
+				});
 			}
 		},
 		close() {
-			this.show = false
+			this.show = false;
 		},
 		checkIfDisabled(menuObj) {
-			return menuObj.disabled === true
+			return menuObj.disabled === true;
 		},
 		isShow(menuObj) {
 			if (typeof (menuObj.show) === 'undefined') {
-				return true
+				return true;
 			} else {
-				return menuObj.show
+				return menuObj.show;
 			}
 		},
 		calculateSubWidth(item) {
-			const children = item.children
-			let width = 0
-			let fontNum = 0
+			const children = item.children;
+			let width = 0;
+			let fontNum = 0;
 			children.forEach(elem => {
 				if (elem.label.length > fontNum) {
-					fontNum = elem.label.length
+					fontNum = elem.label.length;
 				}
-			})
-			width = fontNum * this.defaultFontSize + 20 + 'px'
-			return width
+			});
+			width = fontNum * this.defaultFontSize + 20 + 'px';
+			return width;
 		},
 		openLoadFile(item) {
-			const obj = this.$refs[item.label][0]
+			const obj = this.$refs[item.label][0];
 			if (obj.files) {
-				const file = obj.files[0]
-				item.handler(file)
-				obj.value = ''
+				const file = obj.files[0];
+				item.handler(file);
+				obj.value = '';
 			}
 		}
 	}
-}
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/jmap/map.js

@@ -255,7 +255,8 @@ class Jmap {
 
 	resize(opt) {
 		this.$zr.resize(opt);
-		this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
+		// this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
+		this.$painter.updateZrSize(opt);
 	}
 
 	refresh() {

src/jmap/shape/LcControl/index.js

@@ -27,17 +27,17 @@ export default class LcControl extends Group {
 				shape: {
 					cx: model.position.x,
 					cy: model.position.y,
-					r: this.style.zcControlmodeR
+					r: this.style.LcControl.lamp.radiusR
 				},
 				lineWidth: 0,
-				fill: this.style.lcControlColor
+				fill: this.style.LcControl.lamp.controlColor
 			},
 			text: {
 				position: [0, 0],
 				x: model.position.x,
-				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				y: model.position.y + this.style.LcControl.lamp.radiusR + this.style.LcControl.text.distance,
 				fontWeight: 'normal',
-				fontSize: this.style.stationControlTextSize,
+				fontSize: this.style.LcControl.text.fontSize,
 				fontFamily: this.style.textFontFormat,
 				text: model.name,
 				textFill: '#fff',

src/jmap/shape/LimitControl/index.js

@@ -26,17 +26,17 @@ export default class LimitControl extends Group {
 				shape: {
 					cx: model.position.x,
 					cy: model.position.y,
-					r: this.style.zcControlmodeR
+					r: this.style.LimitControl.lamp.radiusR
 				},
 				lineWidth: 0,
-				fill: this.style.limitControlColor
+				fill: this.style.LimitControl.lamp.controlColor
 			},
 			text: {
 				position: [0, 0],
 				x: model.position.x,
-				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				y: model.position.y + this.style.LimitControl.lamp.radiusR + this.style.LimitControl.text.distance,
 				fontWeight: 'normal',
-				fontSize: this.style.stationControlTextSize,
+				fontSize: this.style.LimitControl.text.fontSize,
 				fontFamily: this.style.textFontFormat,
 				text: model.name,
 				textFill: '#fff',

src/jmap/shape/StationControl/ESingleControl.js

@@ -9,7 +9,6 @@ export default class ESingleControl extends Group {
 		this.model = model;
 		this.zlevel = model.zlevel;
 		this._subType = model._subType;
-		// this.z = model.z;
 		this.z = 20;
 		this._create(model);
 	}
@@ -48,13 +47,13 @@ export default class ESingleControl extends Group {
 			style: {
 				x: model.point.x,
 				y: model.point.y + model.style.StationControl.stationControlmodeR + model.style.nameDistance,
-				fontWeight: 'normal',
-				fontSize: model.style.textFontSize,
-				fontFamily: model.style.textFontFormat,
+				fontWeight: model.style.StationControl.text.fontWeight,
+				fontSize: model.style.StationControl.text.fontSize,
+				fontFamily: model.style.StationControl.text.fontFormat,
 				text: model.context,
-				textFill: model.style.textFontColor,
-				textAlign: 'middle',
-				textVerticalAlign: 'top'
+				textFill: model.style.StationControl.text.fontColor,
+				textAlign: model.style.StationControl.text.textAlign,
+				textVerticalAlign: model.style.StationControl.text.textVerticalAlign
 			}
 		});
 

src/jmap/shape/ZcControl/index.js

@@ -25,17 +25,17 @@ export default class ZcControl extends Group {
 				shape: {
 					cx: model.position.x,
 					cy: model.position.y,
-					r: this.style.zcControlmodeR
+					r: this.style.ZcControl.lamp.radiusR
 				},
 				lineWidth: 0,
-				fill: this.style.zcControlGrayColor
+				fill: this.style.ZcControl.lamp.controlColor
 			},
 			text: {
 				position: [0, 0],
 				x: model.position.x,
-				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				y: model.position.y + this.style.ZcControl.lamp.radiusR + this.style.ZcControl.text.distance,
 				fontWeight: 'normal',
-				fontSize: this.style.stationControlTextSize,
+				fontSize: this.style.ZcControl.text.fontSize,
 				fontFamily: this.style.textFontFormat,
 				text: model.name,
 				textFill: '#fff',

src/jmap/theme/batong.js

@@ -202,8 +202,8 @@ class Batong extends defaultSkin {
 			stationDelayUnlockBorderColor: '#FFFFFF'
 		};
 		this[deviceType.StationControl] = {
-			singleControlNum: 3,
-			stationOffset: {x: 20, y: 0},
+			singleControlNum: 3, // 灯数
+			stationOffset: {x: 20, y: 0}, // 控制模式灯位置偏移量
 			arrowsShow: false, // 控制模式箭头显隐
 			/** 控制模式字体大小*/
 			stationControlTextSize: 12,

src/jmap/theme/bejing.js

@@ -195,6 +195,14 @@ class Beijing extends defaultSkin {
 		};
 
 		this[deviceType.StationControl] = {
+			text: {
+				fontSize: 10,
+				fontFormat: 'consolas',
+				fontColor: '#ffffff',
+				fontWeight: 'normal',
+				textAlign: 'middle',
+				textVerticalAlign: 'top'
+			},
 			singleControlNum: 3,
 			stationOffset: { x: 20, y: 0 },
 			arrowsShow: false, // 控制模式箭头显隐
@@ -238,6 +246,37 @@ class Beijing extends defaultSkin {
 				switchLen: 6
 			}
 		};
+
+		this[deviceType.LcControl] = {
+			text: {
+				fontSize: 10,
+				distance: 5 // 灯跟文字距离
+			},
+			lamp: {
+				radiusR: 6,
+				controlColor: '#FFFF00'
+			}
+		};
+		this[deviceType.ZcControl] = {
+			text: {
+				fontSize: 10,
+				distance: 5 // 灯跟文字距离
+			},
+			lamp: {
+				radiusR: 6,
+				controlColor: '#00FF00'
+			}
+		};
+		this[deviceType.LimitControl] = {
+			text: {
+				fontSize: 10,
+				distance: 5 // 灯跟文字距离
+			},
+			lamp: {
+				radiusR: 6,
+				controlColor: '#ECE9D8'
+			}
+		};
 	}
 }
 

src/jmap/theme/fuzhou.js

@@ -191,6 +191,14 @@ class Fuzhou extends defaultSkin {
 			}
 		};
 		this[deviceType.StationControl] = {
+			text: {
+				fontSize: 10,
+				fontFormat: 'consolas',
+				fontColor: '#ffffff',
+				fontWeight: 'normal',
+				textAlign: 'middle',
+				textVerticalAlign: 'top'
+			},
 			singleControlNum: 2,
 			stationOffset: {x: 0, y: 0},
 			arrowsShow: true, // 控制模式箭头显隐

src/jmap/utils/Uid.js

@@ -0,0 +1,11 @@
+var base = 0;
+
+/**
+ * @public
+ * @param {string} type
+ * @return {string}
+ */
+export function getUID(type) {
+    // use Math.random to make id as unique as possible.
+    return [(type || ''), base++, Math.random().toFixed(5)].join('_');
+}

src/jmap/utils/Uname.js

@@ -0,0 +1,16 @@
+/**
+ * @public
+ * @param {string} type
+ * @return {string}
+ */
+export function getUName(list) {
+    var base = 1;
+    if (list) {
+        list.forEach(elem => {
+            if (elem.hasOwnProperty('name') && Number.isInteger(parseInt(elem.name)) && parseInt(elem.name) >= base) {
+                base = parseInt(elem.name) + 1;
+            }
+        });
+    }
+    return base.toString();
+}

src/jmap/utils/animation.js

@@ -0,0 +1,13 @@
+export const requestAnimationFrame = window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (callback) { callback.timter = window.setTimeout(callback, 1000 / 60); };
+
+export const cancelRequestAnimFrame = window.cancelAnimationFrame ||
+    window.webkitCancelRequestAnimationFrame ||
+    window.mozCancelRequestAnimationFrame ||
+    window.oCancelRequestAnimationFrame ||
+    window.msCancelRequestAnimationFrame ||
+    function (callback) { window.clearTimeout(callback); };

src/router/index.js

@@ -89,20 +89,78 @@ export const constantRoutes = [
 export const asyncRouter = [
 	{
 		path: '/map',
-		component: Layout,
+		name: '地图管理',
 		meta: {
+			title: '地图管理',
 			roles: [admin]
 		},
+		component: Layout,
 		children: [
 			{
 				path: 'manage',
 				name: '地图管理',
-				component: () => import('@/views/jmap/index'),
+				component: () => import('@/views/jmapTest/index'),
 				meta: { title: '地图管理', icon: 'map-mange' }
+			},
+			// {
+			// 	path: 'skinStyle',
+			// 	name: '皮肤管理',
+			// 	component: resolve => require(['@/views/map/skinStyle/index'], resolve),
+			// 	meta: {
+			// 		title: '皮肤管理'
+			// 	}
+			// },
+			// {
+			// 	path: 'skinStyle/draft/:mode/:skinStyleId',
+			// 	name: '操作权限',
+			// 	hidden: true,
+			// 	component: resolve => require(['@/views/map/skinStyle/draft'], resolve),
+			// 	meta: {
+			// 		title: '操作权限'
+			// 	}
+			// },
+			{
+				path: 'draw',
+				redirect: '/map/draw/0/draft',
+				component: resolve => require(['@/views/map/mapdraft/index'], resolve),
+				meta: {
+					title: '地图绘制'
+				},
+				children: [
+					{
+						path: ':mapId/:view',
+						component: resolve => require(['@/views/map/mapdraft/mapedit/index'], resolve),
+						meta: {
+							title: '地图绘制'
+						},
+						hidden: true
+					}
+				]
 			}
+			// {
+			// 	path: 'runPlan',
+			// 	redirect: '/map/runPlan/view/draft',
+			// 	name: '运行图管理',
+			// 	component: resolve => require(['@/views/map/runplan/index'], resolve),
+			// 	meta: {
+			// 		title: '运行图管理'
+			// 	},
+			// 	children: [{
+			// 		path: 'view/:mode',
+			// 		component: resolve => require(['@/views/map/runplan/chart'], resolve),
+			// 		hidden: true
+			// 	}]
+			// }
+			// {
+			// 	path: 'product',
+			// 	name: '产品编辑',
+			// 	component: resolve => require(['@/views/lesson/trainingcategory/index'], resolve),
+			// 	meta: {
+			// 		title: '产品编辑'
+			// 	}
+			// }
 		]
 	},
-
 	{ path: '*', redirect: '/404', hidden: true }
 ];
 

src/scripts/DictionaryData.js

@@ -0,0 +1,271 @@
+import { getDetailList } from '@/api/management/dictionary';
+
+function loadDictionary() {
+	function queryData(code, that, field) {
+		return new Promise((resolve, reject) => {
+			if (that[field].length) {
+				resolve(that[field]);
+			}
+			getDetailList(code).then(response => {
+				that[field] = response.data;
+				resolve(that[field]);
+			}).catch(error => {
+				console.log('获取字典失败：' + error.message);
+				reject(error);
+			});
+		});
+	}
+
+	function Dictionary() { }
+
+	Dictionary.prototype = {
+		_TrainingType: [],
+
+		_SectionType: [],
+
+		_SectionSepType: [],
+
+		_SignalPotLampType: [],
+		_SignalLampPostType: [],
+		_SignalLampPositionType: [],
+		_SignalDirectionType: [],
+		_SignalPositionType: [],
+		_SignalUseType: [],
+
+		_DoorLocationType: [],
+
+		_WhetherType: [], // 是/否
+		_EffectiveType: [], // 生效/失效
+
+		_RouteNatureType: [],
+		_RouteAutoType: [],
+		_SwitchLocateType: [],
+
+		_BizType: [],
+		_OrderType: [],
+		_PayType: [],
+		_PayStatus: [],
+
+		_LogicalViewType: {},
+		_PhysicalViewType: [],
+
+		_PermissionType: [],
+		_ProductPostType: [],
+
+		_ProductType: [],
+
+		_TimeStyle: [],
+
+		_RunDirectionType: [],
+
+		_TrainPositionType: [],
+
+		_CityType: [],
+
+		_LineType: [],
+
+		_TaskList: [], // 任务类型列表
+
+		_TaskStatus: [], // 任务状态
+
+		_StationControl: [], // 控制权操作类型
+
+		_SignalOperation: [], // 信号灯操作类型
+
+		_SwitchOperation: [], // 道岔操作类型
+
+		_SectionOperation: [], // 区段操作类型
+
+		_StationStandOperation: [], // 站台操作类型
+
+		_TrainPlanOperation: [], // 行车计划操作类型
+
+		_TrainOperation: [], // 列车操作类型
+
+		_RegionTypeList: [], // 区间类型列表
+
+		_LimitOperation: [],
+
+		regionTypeList: function () {
+			return queryData('region_type_list', this, '_RegionTypeList');
+		},
+
+		limitOperation: function () {
+			return queryData('limit_operation', this, '_LimitOperation');
+		},
+
+		stationControl: function () {
+			return queryData('station_control', this, '_StationControl');
+		},
+
+		signalOperation: function () {
+			return queryData('signal_operation', this, '_SignalOperation');
+		},
+
+		switchOperation: function () {
+			return queryData('switch_operation', this, '_SwitchOperation');
+		},
+
+		sectionOperation: function () {
+			return queryData('section_operation', this, '_SectionOperation');
+		},
+
+		stationStandOperation: function () {
+			return queryData('station_stand_operation', this, '_StationStandOperation');
+		},
+
+		trainPlanOperation: function () {
+			return queryData('train_plan_operation', this, '_TrainPlanOperation');
+		},
+
+		trainOperation: function () {
+			return queryData('train_operation', this, '_TrainOperation');
+		},
+
+		taskList: function () {
+			return queryData('task_type', this, '_TaskList');
+		},
+		taskStatus: function () {
+			return queryData('task_status', this, '_TaskStatus');
+		},
+		trainingType: function () {
+			return queryData('training_type', this, '_TrainingType');
+		},
+
+		sectionType: function () {
+			return queryData('section_type', this, '_SectionType');
+		},
+
+		sectionSepType: function () {
+			return queryData('section_sep_type', this, '_SectionSepType');
+		},
+
+		signalPotLampType: function () {
+			return queryData('signal_pot_lamp_type', this, '_SignalPotLampType');
+		},
+		signalLampPostType: function () {
+			return queryData('signal_lamp_post_type', this, '_SignalLampPostType');
+		},
+		signalLampPositionType: function () {
+			return queryData('signal_lamp_position_type', this, '_SignalLampPositionType');
+		},
+		signalDirectionType: function () {
+			return queryData('signal_direction_type', this, '_SignalDirectionType');
+		},
+		signalPositionType: function () {
+			return queryData('signal_position_type', this, '_SignalPositionType');
+		},
+		signalUseType: function () {
+			return queryData('signal_use_type', this, '_SignalUseType');
+		},
+
+		doorLocationType: function () {
+			return queryData('door_location_type', this, '_DoorLocationType');
+		},
+
+		whetherType: function () {
+			return queryData('whether_type', this, '_WhetherType');
+		},
+		effectiveType: function () {
+			return queryData('effective_type', this, '_EffectiveType');
+		},
+
+		routeNatureType: function () {
+			return queryData('route_nature_type', this, '_RouteNatureType');
+		},
+		routeAutoType: function () {
+			return queryData('route_auto_type', this, '_RouteAutoType');
+		},
+		switchLocateType: function () {
+			return queryData('switch_locate_type', this, '_SwitchLocateType');
+		},
+		productPostType: function () {
+			return queryData('product_post_type', this, '_ProductPostType');
+		},
+		bizType: function () {
+			return queryData('biz_type', this, '_BizType');
+		},
+		orderType: function () {
+			return queryData('order_type', this, '_OrderType');
+		},
+		payType: function () {
+			return queryData('pay_type', this, '_PayType');
+		},
+		payStatus: function () {
+			return queryData('pay_status', this, '_PayStatus');
+		},
+
+		permissionType: function () {
+			return queryData('permission_type', this, '_PermissionType');
+		},
+
+		productType: function () {
+			return queryData('product_type', this, '_ProductType');
+		},
+
+		timeStyleType: function () {
+			return queryData('time_style', this, '_TimeStyle');
+		},
+
+		runDirectionType: function () {
+			return queryData('run_direction_type', this, '_RunDirectionType');
+		},
+
+		logicalViewType: function () {
+			return queryData('logical_view_Type', this, '_LogicalViewType');
+		},
+		physicalViewType: function () {
+			return queryData('physical_view_Type', this, '_PhysicalViewType');
+		},
+
+		trainPositionType: function () {
+			return queryData('train_position_type', this, '_TrainPositionType');
+		},
+
+		lityType: function () {
+			return queryData('city_type', this, '_CityType');
+		},
+
+		lineType: function () {
+			return queryData('line_type', this, '_LineType');
+		},
+
+		translate: function (value, dic) {
+			return new Promise((resolve, reject) => {
+				if (this[dic] instanceof Function) {
+					this[dic]().then(list => {
+						if (list && list.length) {
+							const obj = list.filter(function (item) {
+								return item.value === value;
+							})[0];
+							const label = obj && obj.label;
+							resolve(label);
+						} else {
+							console.warn('字典列表为空："' + dic + '"');
+							resolve('');
+						}
+					}).catch(error => {
+						console.error('字典翻译异常：' + error.message);
+						reject(error);
+					});
+				} else {
+					const error = new Error('"' + dic + '" 对象不存在');
+					console.error('字典翻译异常：' + error.message);
+					reject(error);
+				}
+			});
+		}
+	};
+	return new Dictionary();
+}
+
+// export function addCityNodeByTree(cityList, tree) {
+// 	let cityNode = {
+// 		children: [],
+// 		id: "6",
+// 		name: '',
+// 		type: 'city',
+// 	};
+// }
+
+export default loadDictionary();

src/scripts/GlobalPlugin.js

@@ -1,35 +1,38 @@
-import Vue from 'vue'
-import QueryListPage from '@/components/QueryListPage/QueryListPage'
-import DataForm from '@/components/QueryListPage/DataForm'
-import TurnbackBar from '@/components/TurnbackBar'
-import ConstConfig from '@/scripts/ConstConfig'
+import Vue from 'vue';
+import QueryListPage from '@/components/QueryListPage/QueryListPage';
+import DataForm from '@/components/QueryListPage/DataForm';
+import TurnbackBar from '@/components/TurnbackBar';
+import ConstConfig from '@/scripts/ConstConfig';
+import Dictionary from '@/scripts/DictionaryData';
 
 // 全局组件
-Vue.component('DataForm', DataForm)
-Vue.component('QueryListPage', QueryListPage)
-Vue.component('TurnbackBar', TurnbackBar)
+Vue.component('DataForm', DataForm);
+Vue.component('QueryListPage', QueryListPage);
+Vue.component('TurnbackBar', TurnbackBar);
 
 Vue.prototype.$ConstSelect = (function() {
 	ConstConfig.ConstSelect.translate = function(value, codeName) {
 		if (codeName) {
 			const obj = this[codeName].filter(function(item) {
-				return item.value === value
-			})[0]
-			return obj && obj.label
+				return item.value === value;
+			})[0];
+			return obj && obj.label;
 		}
-	}
-	return ConstConfig.ConstSelect
-}())
+	};
+	return ConstConfig.ConstSelect;
+})();
 
-Vue.prototype.__windowResizeFlag = false
+Vue.prototype.$Dictionary = Dictionary;
+
+Vue.prototype.__windowResizeFlag = false;
 Vue.prototype.$addWindowResizeListener = function(cb) {
 	window.addEventListener('resize', function() {
 		if (!Vue.__windowResizeFlag) {
-			Vue.__windowResizeFlag = true
+			Vue.__windowResizeFlag = true;
 			setTimeout(function() {
-				Vue.__windowResizeFlag = false
-				cb()
-			}, 100)
+				Vue.__windowResizeFlag = false;
+				cb();
+			}, 100);
 		}
-	})
-}
+	});
+};

src/scripts/translate.js

@@ -0,0 +1,455 @@
+//  转换sheet名称
+export const translateSheetTitle = {
+	sheetTitle: ['基本信息', '皮肤配置', '交路列表', '交路-区段', '自动信号机', '自动信号机列表', '敌对进路', '进路列表', '进路延续保护区段', '进路延续保护道岔', '进路自动触发区段', '进路侧防道岔', '进路-区段', '进路-信号机', '进路-站台', '进路-道岔', '车站计数器', '车站延时解锁表示器', '线段', 'link', '路径单元关系', '路径单元', '区段', '信号机', '速度等级', '车站控制模式', '站台', '车站', '双动道岔', '道岔', '文字信息', '列车', '列车模型', '车次窗', 'zc区域控制', 'lc控制', '全线临时限速', '图片列表'],
+	sheetName: ['base', 'skinVO', 'routingList', 'routingSectionList', 'autoSignalList', 'autoSignalClearList', 'accessAgainstList', 'accessList', 'routeOverlapSectionList', 'routeOverlapSwitchList', 'routeTriggerSectionList', 'routeFlankProtectionList', 'accessSectionList', 'accessSignalList', 'accessStandList', 'accessSwitchList', 'counterList', 'delayShowList', 'lineList', 'linkList', 'routeUnitRelList', 'routeUnitList', 'sectionList', 'signalList', 'speedLevel', 'stationControlList', 'stationStandList', 'stationList', 'switchCoupledList', 'switchList', 'textList', 'trainList', 'trainModelList', 'trainWindowList', 'zcList', 'lcList', 'tempSpeedLimitList', 'resourceList']
+};
+
+// 转换属性名称
+export const translate = {
+	base: {
+		sheetName: '基本信息',
+		columns: [
+			{ key: 'id', tHeader: '地图id', formatter: (val) => { return val || ''; } },
+			{ key: 'name', tHeader: '地图名称', formatter: (val) => { return val || ''; } },
+			{ key: 'authorId', tHeader: '作者id', formatter: (val) => { return val || ''; } },
+			{ key: 'cityCode', tHeader: '城市code', formatter: (val) => { return val || ''; } },
+			{ key: 'skinStyle', tHeader: '皮肤类型', formatter: (val) => { return val || ''; } },
+			{ key: 'updateTime', tHeader: '更新时间', formatter: (val) => { return val || ''; } },
+			{ key: 'version', tHeader: '版本类型', formatter: (val) => { return val || ''; } }
+		]
+	},
+	skinVO: {
+		sheetName: '皮肤配置',
+		columns: [
+			{ key: 'code', tHeader: '皮肤code', formatter: (val) => { return val || ''; } },
+			{ key: 'name', tHeader: '皮肤名称', formatter: (val) => { return val || ''; } },
+			{ key: 'origin', tHeader: '原点坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'scaling', tHeader: '缩放比例', formatter: (val) => { return val || ''; } },
+			{ key: 'linkWidth', tHeader: 'link宽度', formatter: (val) => { return val || ''; } },
+			{ key: 'zoneWidth', tHeader: '区段宽度', formatter: (val) => { return val || ''; } },
+			{ key: 'watermarkShow', tHeader: '是否显示水印', formatter: (val) => { return val || false; } }
+		]
+	},
+	routingList: {
+		sheetName: '交路列表',
+		columns: [
+			{ key: 'code', tHeader: '交路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'name', tHeader: '交路名称', formatter: (val) => { return val || ''; } },
+			{ key: 'directionCode', tHeader: '方向码', formatter: (val) => { return val || 0; } },
+			{ key: 'startSectionCode', tHeader: '起始区段', formatter: (val) => { return val || ''; } },
+			{ key: 'startStationCode', tHeader: '起始车站', formatter: (val) => { return val || ''; } },
+			{ key: 'endSectionCode', tHeader: '终到区段', formatter: (val) => { return val || ''; } },
+			{ key: 'endStationCode', tHeader: '终到车站', formatter: (val) => { return val || ''; } },
+			{ key: 'remarks', tHeader: '描述', formatter: (val) => { return val || ''; } }
+		]
+	},
+	routingSectionList: {
+		sheetName: '交路-区段',
+		columns: [
+			{ key: 'routingCode', tHeader: '交路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'orderNum', tHeader: '顺序', formatter: (val) => { return val || 0; } },
+			{ key: 'sectionCode', tHeader: '区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '车站编号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	autoSignalList: {
+		sheetName: '自动信号机',
+		columns: [
+			{ key: 'code', tHeader: '自动信号机编号', formatter: (val) => { return val || ''; } },
+			{ key: 'signalCode', tHeader: '信号机编号', formatter: (val) => { return val || ''; } },
+			{ key: 'skinStyle', tHeader: '皮肤类型', formatter: (val) => { return val || ''; } }
+		]
+	},
+	autoSignalClearList: {
+		sheetName: '自动信号机列表',
+		columns: [
+			{ key: 'autoSignalCode', tHeader: '自动信号机编号', formatter: (val) => { return val || ''; } },
+			{ key: 'sectionCode', tHeader: '区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'skinStyle', tHeader: '皮肤类型', formatter: (val) => { return val || ''; } }
+		]
+	},
+	accessAgainstList: {
+		sheetName: '敌对进路',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'againstRouteCode', tHeader: '敌对进路编号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	routeFlankProtectionList: {
+		sheetName: '进路侧防道岔',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'switchCode', tHeader: '道岔编号', formatter: (val) => { return val || ''; } },
+			{ key: 'switchLocateType', tHeader: '道岔位置类型', formatter: (val) => { return val || ''; } }
+		]
+	},
+	accessList: {
+		sheetName: '进路列表',
+		columns: [
+			{ key: 'name', tHeader: '进路名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'autoTriggerSectionCode', tHeader: '自动触发区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'nearSectionCode', tHeader: '接近区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'endSignalCode', tHeader: '终端信号机编号', formatter: (val) => { return val || ''; } },
+			{ key: 'endSignalName', tHeader: '终端信号机名称', formatter: (val) => { return val || ''; } },
+			{ key: 'startSignalCode', tHeader: '始端信号机编号', formatter: (val) => { return val || ''; } },
+			{ key: 'startSignalName', tHeader: '始端信号机名称', formatter: (val) => { return val || ''; } },
+			{ key: 'autoType', tHeader: '自动进路类型', formatter: (val) => { return val || ''; } },
+			{ key: 'natureType', tHeader: '进路性质类型', formatter: (val) => { return val || ''; } },
+			{ key: 'overlapSwitchCode', tHeader: '延续保护道岔ID', formatter: (val) => { return val || ''; } },
+			{ key: 'overlapSwitchLocateType', tHeader: '延续保护道岔位置类型', formatter: (val) => { return val || ''; } },
+			{ key: 'turnBackSectionCode', tHeader: '折返轨ID', formatter: (val) => { return val || ''; } },
+			{ key: 'arc', tHeader: '是否自动追踪/联锁自动触发', formatter: (val) => { return val || false; } },
+			{ key: 'flt', tHeader: '是否车队/联锁自动进路', formatter: (val) => { return val || false; } },
+			{ key: 'delayReleaseTime', tHeader: '延时解锁时间', formatter: (val) => { return val || 0; } }
+		]
+	},
+	routeOverlapSectionList: {
+		sheetName: '进路延续保护区段',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'sectionCode', tHeader: '区段编号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	routeOverlapSwitchList: {
+		sheetName: '进路延续保护道岔',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'switchCode', tHeader: '道岔编号', formatter: (val) => { return val || ''; } },
+			{ key: 'switchLocateType', tHeader: '道岔位置类型', formatter: (val) => { return val || ''; } }
+		]
+	},
+	routeTriggerSectionList: {
+		sheetName: '进路自动触发区段',
+		columns: [
+
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'sectionCode', tHeader: '区段编号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	accessSectionList: {
+		sheetName: '进路-区段',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'sectionCode', tHeader: '区段编号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	accessSignalList: {
+		sheetName: '进路-信号机',
+		columns: [
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	},
+	accessStandList: {
+		sheetName: '进路-站台',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationStandCode', tHeader: '站台编号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	accessSwitchList: {
+		sheetName: '进路-道岔',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'switchCode', tHeader: '道岔编号', formatter: (val) => { return val || ''; } },
+			{ key: 'switchLocateType', tHeader: '道岔类型', formatter: (val) => { return val || ''; } }
+		]
+	},
+	counterList: {
+		sheetName: '车站计数器',
+		columns: [
+			{ key: 'name', tHeader: '车站计数器名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'max', tHeader: '计数器最大值', formatter: (val) => { return val || 0; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'type', tHeader: '类型', formatter: (val) => { return val || ''; } },
+			{ key: 'val', tHeader: '值', formatter: (val) => { return val || 0; } }
+		]
+	},
+	delayShowList: {
+		sheetName: '车站延时解锁表示器',
+		columns: [
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'font', tHeader: '字体大小', formatter: (val) => { return val || ''; } },
+			{ key: 'fontColor', tHeader: '字体颜色', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'unlockTime', tHeader: '延迟时间', formatter: (val) => { return val || ''; } }
+		]
+	},
+	lineList: {
+		sheetName: '线段',
+		columns: [
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'width', tHeader: '宽度', formatter: (val) => { return val || ''; } },
+			{ key: 'type', tHeader: '类型', formatter: (val) => { return val || ''; } },
+			{ key: 'points', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	},
+	linkList: {
+		sheetName: 'link',
+		columns: [
+			{ key: 'name', tHeader: 'link名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'color', tHeader: '颜色', formatter: (val) => { return val || ''; } },
+			{ key: 'leftFdCode', tHeader: '左正向link编号', formatter: (val) => { return val || ''; } },
+			{ key: 'leftSdCode', tHeader: '左侧向link编号', formatter: (val) => { return val || ''; } },
+			{ key: 'rightFdCode', tHeader: '右正向link编号', formatter: (val) => { return val || ''; } },
+			{ key: 'rightSdCode', tHeader: '右侧向link编号', formatter: (val) => { return val || ''; } },
+			{ key: 'lengthFact', tHeader: '实际长度', formatter: (val) => { return val || 0; } },
+			{ key: 'lp', tHeader: '起点坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'rp', tHeader: '终点坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'type', tHeader: '类型', formatter: (val) => { return val || ''; } }
+		]
+	},
+	routeUnitRelList: {
+		sheetName: '路径单元关系',
+		columns: [
+			{ key: 'routeCode', tHeader: '进路编号', formatter: (val) => { return val || ''; } },
+			{ key: 'routeUnitCode', tHeader: '路径单元编号', formatter: (val) => { return val || ''; } },
+			{ key: 'orderNum', tHeader: '顺序', formatter: (val) => { return val || ''; } }
+		]
+	},
+	routeUnitList: {
+		sheetName: '路径单元',
+		columns: [
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'startSectionCode', tHeader: '起点区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'endSectionCode', tHeader: '终点区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'orderNum', tHeader: '顺序', formatter: (val) => { return val || ''; } }
+		]
+	},
+	sectionList: {
+		sheetName: '区段',
+		columns: [
+			{ key: 'name', tHeader: '区段名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'namePosition', tHeader: '名称坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'nameShow', tHeader: '名称是否显示', formatter: (val) => { return val || false; } },
+			{ key: 'axleShow', tHeader: '是否显示计轴器', formatter: (val) => { return val || false; } },
+			{ key: 'type', tHeader: '类型', formatter: (val) => { return val || ''; } },
+			{ key: 'linkCode', tHeader: 'link编号', formatter: (val) => { return val || ''; } },
+			{ key: 'logicSectionNameShow', tHeader: '是否显示逻辑区段名称', formatter: (val) => { return val || false; } },
+			{ key: 'logicSectionNameSort', tHeader: '逻辑区段按名称排序方式', formatter: (val) => { return val || false; } },
+			{ key: 'logicSectionNum', tHeader: '逻辑区段数量', formatter: (val) => { return val ? JSON.parse(val) : [0]; } },
+			{ key: 'logicSectionShow', tHeader: '是否显示逻辑区段', formatter: (val) => { return val || false; } },
+			{ key: 'offsetLeft', tHeader: '左端相对Link偏移量', formatter: (val) => { return val || 0; } },
+			{ key: 'offsetRight', tHeader: '右端相对Link偏移量', formatter: (val) => { return val || 0; } },
+			{ key: 'parentCode', tHeader: '父元素编号', formatter: (val) => { return val || ''; } },
+			{ key: 'points', tHeader: '区段坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'sepTypeLeft', tHeader: '左端分隔符类型', formatter: (val) => { return val || ''; } },
+			{ key: 'sepTypeRight', tHeader: '右端分隔符类型', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'trainPosType', tHeader: '列车位置类型', formatter: (val) => { return val || ''; } },
+			{ key: 'kmRangeLeft', tHeader: '左侧公里标(米)', formatter: (val) => { return val ? Number(val) : 0; } },
+			{ key: 'kmRangeRight', tHeader: '右侧公里标(米)', formatter: (val) => { return val ? Number(val) : 0; } },
+			{ key: 'region', tHeader: '区间编码', formatter: (val) => { return val || ''; } },
+			{ key: 'isStandTrack', tHeader: '是否站台轨', formatter: (val) => { return val || false; } },
+			{ key: 'isReentryTrack', tHeader: '是否折返轨', formatter: (val) => { return val || false; } },
+			{ key: 'isSwitchSection', tHeader: '是否道岔区段', formatter: (val) => { return val || false; } },
+			{ key: 'isTransferTrack', tHeader: '是否转换轨', formatter: (val) => { return val || false; } },
+			{ key: 'reentryTrackName', tHeader: '折返轨名称', formatter: (val) => { return val || ''; } },
+			{ key: 'reentryTrackNamePosition', tHeader: '折返轨名称坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'relSwitchCode', tHeader: '道岔区段关联道岔编号', formatter: (val) => { return val || ''; } },
+			{ key: 'relStandCode', tHeader: '关联站台编码', formatter: (val) => { return val || ''; } },
+			{ key: 'leftStopPointOffset', tHeader: '左向停车点偏移量', formatter: (val) => { return val || ''; } },
+			{ key: 'rightStopPointOffset', tHeader: '右向停车点偏移量', formatter: (val) => { return val || ''; } },
+			{ key: 'destinationCodeShow', tHeader: '目的地码是否显示', formatter: (val) => { return val || false; } },
+			{ key: 'destinationCode', tHeader: '目的地码', formatter: (val) => { return val || ''; } },
+			{ key: 'destinationCodePoint', tHeader: '目的地码坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'standTrackName', tHeader: '站台轨名称', formatter: (val) => { return val || ''; } },
+			{ key: 'standTrackNamePosition', tHeader: '站台轨名称坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'transferTrackName', tHeader: '转换轨名称', formatter: (val) => { return val || ''; } },
+			{ key: 'transferTrackNamePosition', tHeader: '转换轨名称坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'isCurve', tHeader: '是否曲线', formatter: (val) => { return val || false; } }
+		]
+	},
+	signalList: {
+		sheetName: '信号机',
+		columns: [
+			{ key: 'name', tHeader: '信号机名称', formatter: (val) => { return val || ''; } },
+			{ key: 'uniqueName', tHeader: '信号机唯一名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'namePosition', tHeader: '名称坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'nameShow', tHeader: '名称是否显示', formatter: (val) => { return val || false; } },
+			{ key: 'buttonPosition', tHeader: '按钮坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'buttonShow', tHeader: '是否显示按钮', formatter: (val) => { return val || false; } },
+			{ key: 'directionType', tHeader: '方向类型', formatter: (val) => { return val || ''; } },
+			{ key: 'lampPositionType', tHeader: '灯位类型', formatter: (val) => { return val || ''; } },
+			{ key: 'lampPostType', tHeader: '灯柱类型', formatter: (val) => { return val || ''; } },
+			{ key: 'positionType', tHeader: '位置类型', formatter: (val) => { return val || ''; } },
+			{ key: 'useType', tHeader: '用途类型', formatter: (val) => { return val || ''; } },
+			{ key: 'guidePosition', tHeader: '引导信号位置坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'guideShow', tHeader: '是否显示引导信号', formatter: (val) => { return val || false; } },
+			{ key: 'linkCode', tHeader: 'link编号', formatter: (val) => { return val || ''; } },
+			{ key: 'offset', tHeader: '所属Link偏移量', formatter: (val) => { return val ? Number(val) : 0; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'rotate', tHeader: '信号机旋转角度', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	speedLevel: {
+		sheetName: '速度等级',
+		columns: [
+			{ key: 'level1', tHeader: '速度等级1', formatter: (val) => { return val || ''; } },
+			{ key: 'level2', tHeader: '速度等级2', formatter: (val) => { return val || ''; } },
+			{ key: 'level3', tHeader: '速度等级3', formatter: (val) => { return val || ''; } },
+			{ key: 'level4', tHeader: '速度等级4', formatter: (val) => { return val || ''; } }
+		]
+	},
+	stationControlList: {
+		sheetName: '车站控制模式',
+		columns: [
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'jjzkContent', tHeader: '紧急站控显示内容', formatter: (val) => { return val || ''; } },
+			{ key: 'zakContent', tHeader: '站控显示内容', formatter: (val) => { return val || ''; } },
+			{ key: 'zokContent', tHeader: '中控显示内容', formatter: (val) => { return val || ''; } },
+			{ key: 'zzkContent', tHeader: '站中控显示内容', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	},
+	stationStandList: {
+		sheetName: '站台',
+		columns: [
+			{ key: 'name', tHeader: '站台名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'deviceStationCode', tHeader: '所属设备集中站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'direction', tHeader: '行驶方向', formatter: (val) => { return val || ''; } },
+			{ key: 'doorLocationType', tHeader: '屏蔽门方位类型', formatter: (val) => { return val || ''; } },
+			{ key: 'hasDoor', tHeader: '是否有屏蔽门', formatter: (val) => { return val || false; } },
+			{ key: 'width', tHeader: '宽度', formatter: (val) => { return val || ''; } },
+			{ key: 'height', tHeader: '高度', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'visible', tHeader: '是否显示', formatter: (val) => { return val || false; } }
+		]
+	},
+	stationList: {
+		sheetName: '车站',
+		columns: [
+			{ key: 'name', tHeader: '车站名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'nameFont', tHeader: '车站名称字体', formatter: (val) => { return val || ''; } },
+			{ key: 'runPlanName', tHeader: '真实运行图站名', formatter: (val) => { return val || ''; } },
+			{ key: 'nameFontColor', tHeader: '车站名称字体颜色', formatter: (val) => { return val || ''; } },
+			{ key: 'centralized', tHeader: '是否集中站', formatter: (val) => { return val || false; } },
+			{ key: 'concentrateStationCode', tHeader: '所属联锁站编码', formatter: (val) => { return val || ''; } },
+			{ key: 'kmPost', tHeader: '公里标内容', formatter: (val) => { return val || ''; } },
+			{ key: 'kmPostFont', tHeader: '公里标字体', formatter: (val) => { return val || ''; } },
+			{ key: 'kmPostFontColor', tHeader: '公里标颜色', formatter: (val) => { return val || ''; } },
+			{ key: 'kmPostShow', tHeader: '是否显示公里标', formatter: (val) => { return val || false; } },
+			{ key: 'kmRange', tHeader: '公里标距离', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'visible', tHeader: '是否可见', formatter: (val) => { return val || false; } }
+		]
+	},
+	switchCoupledList: {
+		sheetName: '双动道岔',
+		columns: [
+			{ key: 'switchACode', tHeader: '道岔编号A', formatter: (val) => { return val || ''; } },
+			{ key: 'switchBCode', tHeader: '道岔编号B', formatter: (val) => { return val || ''; } }
+		]
+	},
+	switchList: {
+		sheetName: '道岔',
+		columns: [
+			{ key: 'name', tHeader: '道岔名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'namePosition', tHeader: '名称坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'nameShow', tHeader: '名称是否显示', formatter: (val) => { return val || false; } },
+			{ key: 'sectionACode', tHeader: 'A线物理区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'sectionBCode', tHeader: 'B线物理区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'sectionCCode', tHeader: 'C线物理区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'stationCode', tHeader: '所属车站编号', formatter: (val) => { return val || ''; } },
+			{ key: 'timeoutShow', tHeader: '是否显示倒计时', formatter: (val) => { return val || false; } },
+			{ key: 'tp', tHeader: '倒计时坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'turnTime', tHeader: '道岔转换时间', formatter: (val) => { return val || ''; } }
+		]
+	},
+	textList: {
+		sheetName: '文字信息',
+		columns: [
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'content', tHeader: '内容', formatter: (val) => { return val || ''; } },
+			{ key: 'font', tHeader: '字体大小', formatter: (val) => { return val || ''; } },
+			{ key: 'fontColor', tHeader: '字体颜色', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	},
+	trainList: {
+		sheetName: '列车',
+		columns: [
+			{ key: 'code', tHeader: '编号', formatter: (val) => { return val || ''; } },
+			{ key: 'modelCode', tHeader: '列车模型编号', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'groupNumber', tHeader: '车组号', formatter: (val) => { return val || ''; } }
+		]
+	},
+	trainModelList: {
+		sheetName: '列车模型',
+		columns: [
+			{ key: 'name', tHeader: '型号名称', formatter: (val) => { return val || ''; } },
+			{ key: 'code', tHeader: '列车型号编号', formatter: (val) => { return val || ''; } },
+			{ key: 'averageDeceleration', tHeader: '平均减速度', formatter: (val) => { return val || ''; } },
+			{ key: 'averageVelocity', tHeader: '平均速度', formatter: (val) => { return val || ''; } },
+			{ key: 'length', tHeader: '车长', formatter: (val) => { return val || ''; } },
+			{ key: 'defaultVelocity', tHeader: '默认速度', formatter: (val) => { return val || ''; } },
+			{ key: 'maxSafeDistance', tHeader: '安全运行距离上限', formatter: (val) => { return val || ''; } },
+			{ key: 'maxVelocity', tHeader: '最大速度', formatter: (val) => { return val || ''; } },
+			{ key: 'safeDistance', tHeader: '安全运行距离', formatter: (val) => { return val || ''; } }
+		]
+	},
+	trainWindowList: {
+		sheetName: '车次窗',
+		columns: [
+			{ key: 'code', tHeader: '车次窗编号', formatter: (val) => { return val || ''; } },
+			{ key: 'sectionCode', tHeader: '所属区段编号', formatter: (val) => { return val || ''; } },
+			{ key: 'width', tHeader: '车次窗宽度', formatter: (val) => { return val || 0; } },
+			{ key: 'height', tHeader: '车次窗高度', formatter: (val) => { return val || 0; } },
+			{ key: 'point', tHeader: '车次窗坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	},
+	zcList: {
+		sheetName: 'zc区域控制',
+		columns: [
+			{ key: 'code', tHeader: 'zc控制区域编号', formatter: (val) => { return val || ''; } },
+			{ key: 'name', tHeader: '名称', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } },
+			{ key: 'visible', tHeader: '是否显示', formatter: (val) => { return val || false; } }
+		]
+	},
+	lcList: {
+		sheetName: 'lc控制',
+		columns: [
+			{ key: 'code', tHeader: 'lc控制编号', formatter: (val) => { return val || ''; } },
+			{ key: 'name', tHeader: 'lc控制名称', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: 'lc线路坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	},
+	tempSpeedLimitList: {
+		sheetName: '全线临时限速',
+		columns: [
+			{ key: 'code', tHeader: '全线临时限速编号', formatter: (val) => { return val || ''; } },
+			{ key: 'name', tHeader: '全线临时限速名称', formatter: (val) => { return val || ''; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	},
+	resourceList: {
+		sheetName: '图片列表',
+		columns: [
+			{ key: 'code', tHeader: '资源编号', formatter: (val) => { return val || ''; } },
+			{ key: 'name', tHeader: '名称', formatter: (val) => { return val || ''; } },
+			{ key: 'rotate', tHeader: '旋转角度', formatter: (val) => { return val || 0; } },
+			{ key: 'width', tHeader: '宽度', formatter: (val) => { return val || 0; } },
+			{ key: 'height', tHeader: '高度', formatter: (val) => { return val || 0; } },
+			{ key: 'url', tHeader: '图片地址', formatter: (val) => { return val || ''; } },
+			{ key: 'zIndex', tHeader: '层级', formatter: (val) => { return val || 0; } },
+			{ key: 'position', tHeader: '坐标', formatter: (val) => { return val ? JSON.parse(val) : ''; } }
+		]
+	}
+};

src/store/index.js

@@ -1,21 +1,23 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import app from './modules/app'
-import settings from './modules/settings'
-import user from './modules/user'
-import permission from './modules/permission'
-import getters from './getters'
+import Vue from 'vue';
+import Vuex from 'vuex';
+import app from './modules/app';
+import settings from './modules/settings';
+import user from './modules/user';
+import permission from './modules/permission';
+import getters from './getters';
+import config from './modules/config';
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 const store = new Vuex.Store({
 	modules: {
 		app,
 		settings,
 		user,
+		config,
 		permission
 	},
 	getters
-})
+});
 
-export default store
+export default store;

src/store/modules/app.js

@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie'
+import Cookies from 'js-cookie';
 
 const state = {
 	sidebar: {
@@ -6,43 +6,43 @@ const state = {
 		withoutAnimation: false
 	},
 	device: 'desktop'
-}
+};
 
 const mutations = {
 	TOGGLE_SIDEBAR: state => {
-		state.sidebar.opened = !state.sidebar.opened
-		state.sidebar.withoutAnimation = false
+		state.sidebar.opened = !state.sidebar.opened;
+		state.sidebar.withoutAnimation = false;
 		if (state.sidebar.opened) {
-			Cookies.set('sidebarStatus', 1)
+			Cookies.set('sidebarStatus', 1);
 		} else {
-			Cookies.set('sidebarStatus', 0)
+			Cookies.set('sidebarStatus', 0);
 		}
 	},
 	CLOSE_SIDEBAR: (state, withoutAnimation) => {
-		Cookies.set('sidebarStatus', 0)
-		state.sidebar.opened = false
-		state.sidebar.withoutAnimation = withoutAnimation
+		Cookies.set('sidebarStatus', 0);
+		state.sidebar.opened = false;
+		state.sidebar.withoutAnimation = withoutAnimation;
 	},
 	TOGGLE_DEVICE: (state, device) => {
-		state.device = device
+		state.device = device;
 	}
-}
+};
 
 const actions = {
 	toggleSideBar({ commit }) {
-		commit('TOGGLE_SIDEBAR')
+		commit('TOGGLE_SIDEBAR');
 	},
 	closeSideBar({ commit }, { withoutAnimation }) {
-		commit('CLOSE_SIDEBAR', withoutAnimation)
+		commit('CLOSE_SIDEBAR', withoutAnimation);
 	},
 	toggleDevice({ commit }, device) {
-		commit('TOGGLE_DEVICE', device)
+		commit('TOGGLE_DEVICE', device);
 	}
-}
+};
 
 export default {
 	namespaced: true,
 	state,
 	mutations,
 	actions
-}
+};

src/store/modules/config.js

@@ -0,0 +1,91 @@
+import { getDomOffset } from '@/utils/index';
+import localStore from 'storejs';
+
+const SystemTypeKey = 'SYSTEM-TYPE';
+
+const config = {
+	namespaced: true,
+
+	state: {
+		width: 800, // 地图canvas 容器 宽度
+		height: 600, // 地图canvas 容器 高度
+		menuBarLoadedCount: 0, // menuBar加载完成
+		canvasSizeCount: 0, // 地图canvas 大小变更标识
+		canvasId: '', // 地图canvas容器dom id
+		canvasOffset: {}, // canvas dom 偏移
+		canvasOffsetCount: 0 // 地图canvas 偏移变更标识
+	},
+
+	getters: {
+		width: (state) => {
+			return state.width;
+		},
+		height: (state) => {
+			return state.height;
+		},
+		canvasId: (state) => {
+			return state.canvasId;
+		},
+		systemType: () => {
+			localStore.get(SystemTypeKey);
+		}
+	},
+
+	mutations: {
+		SET_WIDTH: (state, width) => {
+			state.width = width;
+			state.canvasSizeCount += 1;
+		},
+		SET_HEIGHT: (state, height) => {
+			state.height = height;
+			state.canvasSizeCount += 1;
+		},
+		setCanvasId: (state, id) => {
+			state.canvasId = id;
+		},
+		updateMenuBar: (state) => {
+			state.menuBarLoadedCount += 1;
+		},
+		setCanvasOffset: (state, offset) => {
+			state.canvasOffset = offset;
+			state.canvasOffsetCount += 1;
+		},
+		setSystemType: (state, systemType) => {
+			localStore.set(SystemTypeKey, systemType);
+		}
+	},
+	actions: {
+		resize({ commit }, opt) {
+			if (opt.width) {
+				commit('SET_WIDTH', opt.width);
+			}
+			if (opt.height) {
+				commit('SET_HEIGHT', opt.height);
+			}
+		},
+
+		updateMenuBar({ commit }) {
+			commit('updateMenuBar');
+		},
+
+		setCurrentCancasId: ({ dispatch, commit }, payLoad) => {
+			commit('setCanvasId', payLoad.id);
+			dispatch('resetCanvasOffset');
+		},
+
+		resetCanvasOffset: ({ commit, state }) => {
+			const mapCanvas = document.getElementById(state.canvasId);
+			if (mapCanvas) {
+				const offset = getDomOffset(mapCanvas);
+				commit('setCanvasOffset', offset);
+			}
+		},
+
+		setSystemType: ({ commit }, systemType) => {
+			commit('setSystemType', systemType);
+		}
+
+	}
+};
+
+export default config;

src/store/modules/permission.js

@@ -26,13 +26,13 @@ function setHonePagePath(route, roles) {
 function hasPermission(roles, route, parentsRoles) {
 	setHonePagePath(route, roles);
 	if (route.meta && route.meta.roles) {
-		//如果存在本级路由，则使用自己的roles过滤
+		// 如果存在本级路由，则使用自己的roles过滤
 		return roles.some(role => route.meta.roles.indexOf(role) >= 0);
 	} else if (parentsRoles) {
-		//如果没有本级路由，有父级路由，则使用父级路由过滤
+		// 如果没有本级路由，有父级路由，则使用父级路由过滤
 		return roles.some(role => parentsRoles.indexOf(role) >= 0);
 	} else {
-		//如果父级和本级都没有则默认不需要过滤
+		// 如果父级和本级都没有则默认不需要过滤
 		return true;
 	}
 }
@@ -45,11 +45,11 @@ function hasPermission(roles, route, parentsRoles) {
 function convertRouterRoles({ roles, permissionType }) {
 	if (roles && roles.indexOf(user) >= 0) {
 		switch (permissionType) {
-			case PermissionType.LESSON: { roles.push(userLesson); } break;
-			case PermissionType.EXAM: { roles.push(userExam); } break;
-			case PermissionType.SIMULATION: { roles.push(userSimulation); } break;
-			case PermissionType.SCREEN: { roles.push(userScreen); } break;
-			case PermissionType.PLAN: { roles.push(userPlan); } break;
+		case PermissionType.LESSON: roles.push(userLesson); break;
+		case PermissionType.EXAM: roles.push(userExam); break;
+		case PermissionType.SIMULATION: roles.push(userSimulation); break;
+		case PermissionType.SCREEN: roles.push(userScreen); break;
+		case PermissionType.PLAN: roles.push(userPlan); break;
 		}
 	}
 
@@ -76,7 +76,7 @@ function filterAsyncRouter(asyncRouter, roles, parentsRoles) {
 const permission = {
 	state: {
 		routes: constantRoutes,
-		addRouters: [],
+		addRouters: []
 	},
 	mutations: {
 		SET_ROUTERS: (state, routes) => {

src/store/modules/settings.js

@@ -1,31 +1,31 @@
-import defaultSettings from '@/settings'
+import defaultSettings from '@/settings';
 
-const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, fixedHeader, sidebarLogo } = defaultSettings;
 
 const state = {
 	showSettings: showSettings,
 	fixedHeader: fixedHeader,
 	sidebarLogo: sidebarLogo
-}
+};
 
 const mutations = {
 	CHANGE_SETTING: (state, { key, value }) => {
 		if (state.hasOwnProperty(key)) {
-			state[key] = value
+			state[key] = value;
 		}
 	}
-}
+};
 
 const actions = {
 	changeSetting({ commit }, data) {
-		commit('CHANGE_SETTING', data)
+		commit('CHANGE_SETTING', data);
 	}
-}
+};
 
 export default {
 	namespaced: true,
 	state,
 	mutations,
 	actions
-}
+};
 

src/store/modules/user.js

@@ -2,182 +2,182 @@ import localStore from 'storejs';
 import { login, logout, getInfo } from '@/api/login';
 import { getToken, setToken, removeToken, removeScreenToken, setScreenToken, getScreenToken, setPlanToken, getPlanToken, removePlanToken, handleToken, handleRemoveToken } from '@/utils/auth';
 import { getUserConfigInfo } from '@/api/user';
-import { creatSubscribe, perpetualTopic } from '@/utils/stomp';
+// import { creatSubscribe, perpetualTopic } from '@/utils/stomp';
 import { LoginParams } from '@/utils/login';
 
 const user = {
-    state: {
-        token: getToken(),
-        tokenScreen: getScreenToken(),
-        tokenPlan: getPlanToken(),
-        name: '',
-        nickname: '',
-        nationcode: '',
-        roles: [],
-        id: '',
-        admin: false,
-        wxId: '',
-        wxUnionId: '',
-    },
+	state: {
+		token: getToken(),
+		tokenScreen: getScreenToken(),
+		tokenPlan: getPlanToken(),
+		name: '',
+		nickname: '',
+		nationcode: '',
+		roles: [],
+		id: '',
+		admin: false,
+		wxId: '',
+		wxUnionId: ''
+	},
 
-    mutations: {
-        SET_TOKEN: (state, token) => {
-            state.token = token;
-        },
-        SET_TOKENSCREEN: (state, token) => {
-            state.tokenScreen = token;
-        },
-        SET_TOKENPLAN: (state, token) => {
-            state.tokenPlan = token;
-        },
-        SET_NAME: (state, name) => {
-            state.name = name;
-        },
-        SET_NICKNAME: (state, nickname) => {
-            state.nickname = nickname;
-        },
-        SET_ROLES: (state, roles) => {
-            state.roles = roles;
-        },
-        SET_ID: (state, id) => {
-            state.id = id;
-        },
-        SET_NATIONCODE: (state, nationcode) => {
-            state.nationcode = nationcode;
-        },
-        SET_WXID: (state, wxId) => {
-            state.wxId = wxId;
-        },
-        SET_WXUNIONID: (state, wxUnionId) => {
-            state.wxUnionId = wxUnionId;
-        },
-    },
+	mutations: {
+		SET_TOKEN: (state, token) => {
+			state.token = token;
+		},
+		SET_TOKENSCREEN: (state, token) => {
+			state.tokenScreen = token;
+		},
+		SET_TOKENPLAN: (state, token) => {
+			state.tokenPlan = token;
+		},
+		SET_NAME: (state, name) => {
+			state.name = name;
+		},
+		SET_NICKNAME: (state, nickname) => {
+			state.nickname = nickname;
+		},
+		SET_ROLES: (state, roles) => {
+			state.roles = roles;
+		},
+		SET_ID: (state, id) => {
+			state.id = id;
+		},
+		SET_NATIONCODE: (state, nationcode) => {
+			state.nationcode = nationcode;
+		},
+		SET_WXID: (state, wxId) => {
+			state.wxId = wxId;
+		},
+		SET_WXUNIONID: (state, wxUnionId) => {
+			state.wxUnionId = wxUnionId;
+		}
+	},
 
-    actions: {
-        // 登录
-        Login({ commit }, userInfo) {
-            const username = userInfo.username.trim();
-            const password = userInfo.password.trim();
-            return new Promise((resolve, reject) => {
-                let params = null;
-                let execFc = null;
-                if (userInfo.type == 'dp') {
-                    params = Object.assign({ account: username, password }, LoginParams.DaPing);
-                    execFc = (token) => {
-                        setScreenToken(token);
-                        commit('SET_TOKENSCREEN', token);
-                        // let header = { group: '', 'X-Token': getScreenToken() };
-                        // creatSubscribe(perpetualTopic, header);
-                    }
-                } else if (userInfo.type == 'plan') {
-                    params = Object.assign({ account: username, password }, LoginParams.LianJiHua);
-                    execFc = (token) => {
-                        setPlanToken(token);
-                        commit('SET_TOKENPLAN', token);
-                        // let header = { group: '', 'X-Token': getPlanToken() };
-                        // creatSubscribe(perpetualTopic, header);
-                    }
-                } else {
-                    params = Object.assign({ account: username, password }, LoginParams.LianKeTang);
-                    execFc = (token) => {
-                        setToken(token);
-                        commit('SET_TOKEN', token);
-                        // let header = { group: '', 'X-Token': getToken() };
-                        // creatSubscribe(perpetualTopic, header);
-                    }
-                }
+	actions: {
+		// 登录
+		Login({ commit }, userInfo) {
+			const username = userInfo.username.trim();
+			const password = userInfo.password.trim();
+			return new Promise((resolve, reject) => {
+				let params = null;
+				let execFc = null;
+				if (userInfo.type == 'dp') {
+					params = Object.assign({ account: username, password }, LoginParams.DaPing);
+					execFc = (token) => {
+						setScreenToken(token);
+						commit('SET_TOKENSCREEN', token);
+						// let header = { group: '', 'X-Token': getScreenToken() };
+						// creatSubscribe(perpetualTopic, header);
+					};
+				} else if (userInfo.type == 'plan') {
+					params = Object.assign({ account: username, password }, LoginParams.LianJiHua);
+					execFc = (token) => {
+						setPlanToken(token);
+						commit('SET_TOKENPLAN', token);
+						// let header = { group: '', 'X-Token': getPlanToken() };
+						// creatSubscribe(perpetualTopic, header);
+					};
+				} else {
+					params = Object.assign({ account: username, password }, LoginParams.LianKeTang);
+					execFc = (token) => {
+						setToken(token);
+						commit('SET_TOKEN', token);
+						// let header = { group: '', 'X-Token': getToken() };
+						// creatSubscribe(perpetualTopic, header);
+					};
+				}
 
-                // 登录系统
-                login(params).then(resp => {
-                    execFc(resp.data);
-                    resolve();
-                }).catch(error => { reject(error); });
-            });
-        },
+				// 登录系统
+				login(params).then(resp => {
+					execFc(resp.data);
+					resolve();
+				}).catch(error => { reject(error); });
+			});
+		},
 
-        //扫码登陆设置
-        QrLoginSetting({ dispatch, commit }, token) {
-            return new Promise((resolve, reject) => {
-                //设置user域token值
-                commit(token.key, token.value);
-                // let header = { group: '', 'X-Token': token.value };
-                // creatSubscribe(perpetualTopic, header);
-                //获取用户参数
-                dispatch('GetUserConfigInfo').then(response => {
-                    resolve(response);
-                }).catch(error => {
-                    reject(error);
-                });
-            });
-        },
+		// 扫码登陆设置
+		QrLoginSetting({ dispatch, commit }, token) {
+			return new Promise((resolve, reject) => {
+				// 设置user域token值
+				commit(token.key, token.value);
+				// let header = { group: '', 'X-Token': token.value };
+				// creatSubscribe(perpetualTopic, header);
+				// 获取用户参数
+				dispatch('GetUserConfigInfo').then(response => {
+					resolve(response);
+				}).catch(error => {
+					reject(error);
+				});
+			});
+		},
 
-        // 获取用户信息
-        GetInfo({ commit }, getTokenInfo) {
-            return new Promise((resolve, reject) => {
-                getInfo(getTokenInfo()).then(response => {
-                    const user = response.data;
-                    if (user.roles && user.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-                        commit('SET_ROLES', user.roles);
-                    } else {
-                        reject('getInfo: roles must be a non-null array !');
-                    }
-                    commit('SET_NAME', user.name);
-                    commit('SET_NICKNAME', user.nickname);
-                    commit('SET_ID', user.id);
-                    commit('SET_NATIONCODE', user.nationcode);
-                    commit('SET_WXID', user.wxId);
-                    commit('SET_WXUNIONID', user.wxUnionId);
-                    resolve(user);
-                }).catch(error => {
-                    reject(error);
-                });
-            });
-        },
+		// 获取用户信息
+		GetInfo({ commit }, getTokenInfo) {
+			return new Promise((resolve, reject) => {
+				getInfo(getTokenInfo()).then(response => {
+					const user = response.data;
+					if (user.roles && user.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+						commit('SET_ROLES', user.roles);
+					} else {
+						reject('getInfo: roles must be a non-null array !');
+					}
+					commit('SET_NAME', user.name);
+					commit('SET_NICKNAME', user.nickname);
+					commit('SET_ID', user.id);
+					commit('SET_NATIONCODE', user.nationcode);
+					commit('SET_WXID', user.wxId);
+					commit('SET_WXUNIONID', user.wxUnionId);
+					resolve(user);
+				}).catch(error => {
+					reject(error);
+				});
+			});
+		},
 
-        // 获取用户参数
-        GetUserConfigInfo() {
-            getUserConfigInfo().then(resp => {
-                if (resp.data) {
-                    resp.data.forEach(elem => {
-                        localStore(elem.code, elem.val);
-                    });
-                }
-            });
-        },
+		// 获取用户参数
+		GetUserConfigInfo() {
+			getUserConfigInfo().then(resp => {
+				if (resp.data) {
+					resp.data.forEach(elem => {
+						localStore(elem.code, elem.val);
+					});
+				}
+			});
+		},
 
-        // 前端登出
-        FedLogOut({ commit }, clientId) {
-            return new Promise(resolve => {
-                if (clientId == LoginParams.DaPing.clientId) {
-                    commit('SET_TOKENSCREEN', '');
-                    removeScreenToken();
-                } else if (clientId == LoginParams.LianJiHua.clientId) {
-                    commit('SET_TOKENPLAN', '');
-                    removePlanToken();
-                } else {
-                    commit('SET_TOKEN', '');
-                    removeToken();
-                }
+		// 前端登出
+		FedLogOut({ commit }, clientId) {
+			return new Promise(resolve => {
+				if (clientId == LoginParams.DaPing.clientId) {
+					commit('SET_TOKENSCREEN', '');
+					removeScreenToken();
+				} else if (clientId == LoginParams.LianJiHua.clientId) {
+					commit('SET_TOKENPLAN', '');
+					removePlanToken();
+				} else {
+					commit('SET_TOKEN', '');
+					removeToken();
+				}
 
-                resolve();
-            });
-        },
+				resolve();
+			});
+		},
 
-        // 登出系统
-        LogOut({ commit }) {
-            return new Promise((resolve, reject) => {
-                logout(handleToken()).then(() => {
-                    commit('SET_TOKEN', '');
-                    commit('SET_ROLES', []);
-                    commit('SET_ID', '');
-                    handleRemoveToken();
-                    resolve();
-                }).catch(error => {
-                    reject(error);
-                });
-            });
-        }
-    }
+		// 登出系统
+		LogOut({ commit }) {
+			return new Promise((resolve, reject) => {
+				logout(handleToken()).then(() => {
+					commit('SET_TOKEN', '');
+					commit('SET_ROLES', []);
+					commit('SET_ID', '');
+					handleRemoveToken();
+					resolve();
+				}).catch(error => {
+					reject(error);
+				});
+			});
+		}
+	}
 };
 
 export default user;

src/styles/element-ui.scss

@@ -42,3 +42,18 @@
     display: block
   }
 }
+
+.el-popover {
+  min-width: 50px;
+}
+
+.el-scrollbar {
+  height: 100%;
+}
+
+.el-card__header {
+  padding: 14px 20px;
+}
+.el-card__body {
+  padding: 0px;
+}

src/styles/index.scss

@@ -59,7 +59,15 @@ div:focus {
   }
 }
 
+//main-container全局样式
+.app-main{
+  min-height: 100%
+}
 // main-container global css
 .app-container {
   padding: 20px;
 }
+
+.scrollbar-wrapper {
+  overflow-x: auto;
+}

src/utils/index.js

@@ -11,20 +11,20 @@
  */
 export function parseTime(time, cFormat) {
 	if (arguments.length === 0) {
-		return null
+		return null;
 	}
-	const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-	let date
+	const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
+	let date;
 	if (typeof time === 'object') {
-		date = time
+		date = time;
 	} else {
 		if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-			time = parseInt(time)
+			time = parseInt(time);
 		}
 		if ((typeof time === 'number') && (time.toString().length === 10)) {
-			time = time * 1000
+			time = time * 1000;
 		}
-		date = new Date(time)
+		date = new Date(time);
 	}
 	const formatObj = {
 		y: date.getFullYear(),
@@ -34,17 +34,17 @@ export function parseTime(time, cFormat) {
 		i: date.getMinutes(),
 		s: date.getSeconds(),
 		a: date.getDay()
-	}
+	};
 	const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-		let value = formatObj[key]
+		let value = formatObj[key];
 		// Note: getDay() returns 0 on Sunday
-		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ]; }
 		if (result.length > 0 && value < 10) {
-			value = '0' + value
+			value = '0' + value;
 		}
-		return value || 0
-	})
-	return time_str
+		return value || 0;
+	});
+	return time_str;
 }
 
 /**
@@ -54,27 +54,27 @@ export function parseTime(time, cFormat) {
  */
 export function timeFormat(time, option) {
 	if (('' + time).length === 10) {
-		time = parseInt(time) * 1000
+		time = parseInt(time) * 1000;
 	} else {
-		time = +time
+		time = +time;
 	}
-	const d = new Date(time)
-	const now = Date.now()
+	const d = new Date(time);
+	const now = Date.now();
 
-	const diff = (now - d) / 1000
+	const diff = (now - d) / 1000;
 
 	if (diff < 30) {
-		return '刚刚'
+		return '刚刚';
 	} else if (diff < 3600) {
 		// less 1 hour
-		return Math.ceil(diff / 60) + '分钟前'
+		return Math.ceil(diff / 60) + '分钟前';
 	} else if (diff < 3600 * 24) {
-		return Math.ceil(diff / 3600) + '小时前'
+		return Math.ceil(diff / 3600) + '小时前';
 	} else if (diff < 3600 * 24 * 2) {
-		return '1天前'
+		return '1天前';
 	}
 	if (option) {
-		return parseTime(time, option)
+		return parseTime(time, option);
 	} else {
 		return (
 			d.getMonth() +
@@ -86,7 +86,7 @@ export function timeFormat(time, option) {
       '时' +
       d.getMinutes() +
       '分'
-		)
+		);
 	}
 }
 
@@ -95,9 +95,9 @@ export function timeFormat(time, option) {
  * @returns {Object}
  */
 export function param2Obj(url) {
-	const search = url.split('?')[1]
+	const search = url.split('?')[1];
 	if (!search) {
-		return {}
+		return {};
 	}
 	return JSON.parse(
 		'{"' +
@@ -107,5 +107,5 @@ export function param2Obj(url) {
       	.replace(/=/g, '":"')
       	.replace(/\+/g, ' ') +
       '"}'
-	)
+	);
 }

src/views/components/PopMenu/index.vue

@@ -0,0 +1,239 @@
+<template>
+    <div v-show="show" class="pop-menu" :style="{ height: height, left: (tPosition.x+5)+'px', top: tPosition.y+'px' }">
+        <template v-for="item in menu">
+            <div class="" :style="{ width: width }">
+                <div v-if="item.children">
+                    <el-popover placement="right-start" trigger="hover" :style="{width: calculateSubWidth(item)}"
+                        class="custom-popover" :visible-arrow="false">
+                        <ul style="list-style: none; margin: 0px; padding: 0px; padding-right:0px; border-radius:0px;"
+                            v-show="show">
+                            <li v-for="child in item.children">
+                                <template v-if="child.type === 'separator'">
+                                    <div class="separator">&ensp;</div>
+                                </template>
+                                <template v-else>
+                                    <el-button v-if="isShow(child)" type="text" class="dsp-block"
+                                        @click="child.handler(child)"
+                                        :style="{color:checkIfDisabled(child)? '': 'black'}"
+                                        :disabled="checkIfDisabled(child)">{{child.label}}</el-button>
+                                </template>
+                            </li>
+                        </ul>
+                        <template v-if="item.type === 'separator'">
+                            <div class="separator">&ensp;</div>
+                        </template>
+                        <template v-else>
+                            <el-button v-if="isShow(item)" class="dsp-block" slot="reference" type="text"
+                                :disabled="checkIfDisabled(item)">
+                                {{item.label}}
+                                <i class="el-icon-arrow-right" style="float: right;"></i>
+                            </el-button>
+                        </template>
+                    </el-popover>
+                </div>
+                <div v-else>
+                    <template v-if="item.type === 'separator'">
+                        <div class="separator">&ensp;</div>
+                    </template>
+                    <template v-else>
+                        <template v-if="isShow(item)">
+                            <el-button v-if="item.type ==='file'" type="text" class="uploadDemo"
+                                :disabled="checkIfDisabled(item)">
+                                <input :ref="item.label" type="file" @change="openLoadFile(item)" class="file_box"
+                                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
+                                {{item.label}}
+                            </el-button>
+                            <el-button v-else class="dsp-block" type="text" @click="item.handler"
+                                :disabled="checkIfDisabled(item)">
+                                {{item.label}}
+                            </el-button>
+                        </template>
+                    </template>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    import { checkRectCollision } from '@/utils/index';
+    export default {
+        name: 'PopMenu',
+        props: {
+            menu: {
+                type: Array,
+                required: true
+            }
+        },
+        data() {
+            return {
+                show: false,
+                defaultFontSize: 14,
+                tPosition: {
+                    x: -1000,
+                    y: -1000
+                },
+                height: 'auto'
+            }
+        },
+        computed: {
+            width() {
+                let fontNum = 0;
+                this.menu.forEach(elem => {
+                    if (elem.label && elem.label.length > fontNum) {
+                        fontNum = elem.label.length;
+                    }
+                });
+                var width = fontNum * this.defaultFontSize + 40 + 'px';
+                return width;
+            }
+        },
+        mounted() {
+            eventBus.$on('closeMenu', () => {
+                this.$nextTick(() => {
+                    this.show = false;
+                });
+            });
+        },
+        methods: {
+            resetShowPosition(point) {
+                if (point) {
+                    this.show = true;
+                    let self = this;
+                    this.$nextTick(() => {
+                        const gutter = 3;
+                        // 位置
+                        let height = self.$el.clientHeight;
+                        let width = self.$el.clientWidth;
+                        let px = 0;
+                        let py = 0;
+                        if (point.x + width > document.documentElement.clientWidth) {
+                            px = document.documentElement.clientWidth - width - gutter;
+                        } else {
+                            px = point.x;
+                        }
+                        if (point.y + height > document.documentElement.clientHeight) {
+                            py = document.documentElement.clientHeight - height - gutter;
+                        } else {
+                            py = point.y;
+                        }
+                        // 处理和提示框重叠问题
+                        let popTipDialog = document.getElementById('pop_tip_dialog');
+                        if (popTipDialog) {
+                            let tipRect = {
+                                point: { x: popTipDialog.offsetLeft, y: popTipDialog.offsetTop },
+                                width: popTipDialog.offsetWidth,
+                                height: popTipDialog.offsetHeight
+                            }
+                            let menuRect = {
+                                point: { x: px, y: py },
+                                width: self.$el.offsetWidth,
+                                height: self.$el.offsetHeight
+                            }
+                            let collision = checkRectCollision(tipRect, menuRect);
+                            // 若重叠，调整位置
+                            if (collision) {
+                                px = tipRect.point.x + tipRect.width + gutter;
+                                if (px + width > document.documentElement.clientWidth) {
+                                    px = tipRect.point.x - menuRect.width - gutter;
+                                }
+                            }
+                        }
+                        self.tPosition.x = px;
+                        self.tPosition.y = py;
+                    });
+                }
+            },
+            close() {
+                this.show = false;
+            },
+            checkIfDisabled(menuObj) {
+                return menuObj.disabled === true;
+            },
+            isShow(menuObj) {
+                if (typeof (menuObj.show) == 'undefined') {
+                    return true;
+                } else {
+                    return menuObj.show;
+                }
+            },
+            calculateSubWidth(item) {
+                let children = item.children;
+                let width = 0;
+                let fontNum = 0;
+                children.forEach(elem => {
+                    if (elem.label.length > fontNum) {
+                        fontNum = elem.label.length
+                    }
+                });
+                width = fontNum * this.defaultFontSize + 20 + 'px';
+                return width;
+            },
+            openLoadFile(item) {
+                let obj = this.$refs[item.label][0];
+                if (obj.files) {
+                    let file = obj.files[0];
+                    item.handler(file);
+                    obj.value = '';
+                }
+            }
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    $bg: #fff;
+    $hoverBg: #f5f7fa;
+
+    .pop-menu {
+        background-color: $bg;
+        position: fixed;
+        padding: 5px 0px;
+        border: 1px solid gray;
+        z-index: 9999;
+
+        .dsp-block {
+            display: block;
+            text-align: left;
+            width: 100%;
+            border-radius: unset;
+            border: 1px solid transparent;
+        }
+
+        .dsp-block:hover {
+            background-color: $hoverBg;
+        }
+    }
+
+    .uploadDemo {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        cursor: pointer;
+        border: 1px solid transparent;
+
+        input {
+            opacity: 0;
+            cursor: pointer;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .uploadDemo:hover {
+        background-color: $hoverBg;
+    }
+
+    .el-button--text {
+        padding: 6px 15px;
+        text-align: left;
+    }
+
+    .separator {
+        background: gray;
+        width: 90%;
+        height: 1px;
+        margin: 0px 5%;
+    }
+</style>

src/views/components/font/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <el-select v-model="font" placeholder="字体" @input="$emit('input', inputValue)">
+            <el-option v-for="option in fontList" :key="option.code" :label="option.name" :value="option.code">
+            </el-option>
+        </el-select>
+        <el-select v-model="size" placeholder="大小" @input="$emit('input', inputValue)">
+            <el-option v-for="option in sizeList" :key="option.code" :label="option.name" :value="option.code">
+            </el-option>
+        </el-select><br>
+        <div class="format">
+            <span :style="{'font-family': font, 'font-size': size}">{{text}}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ElFont',
+        props: ['value'],
+        data() {
+            return {
+                fontList: [
+                    { code: 'consolas', name: 'consolas' },
+                    { code: 'sans-serif', name: 'sans-serif' },
+                    { code: 'STHeiti', name: '华文黑体' },
+                    { code: 'FangSong', name: '仿宋' }
+                ],
+                sizeList: [
+                    { code: '4px', name: '4px' },
+                    { code: '6px', name: '6px' },
+                    { code: '8px', name: '8px' },
+                    { code: '10px', name: '10px' },
+                    { code: '12px', name: '12px' },
+                    { code: '14px', name: '14px' },
+                    { code: '16px', name: '16px' },
+                    { code: '18px', name: '18px' },
+                    { code: '20px', name: '20px' },
+                    { code: '22px', name: '22px' },
+                    { code: '24px', name: '24px' }
+                ],
+                size: '10px',
+                font: 'consolas',
+                text: 'hello world'
+            }
+        },
+        computed: {
+            inputValue: function () {
+                return this.size + ' ' + this.font;
+            }
+        },
+        watch: {
+            value(val) {
+                if (val !== this.inputValue && val) {
+                    let arr = val.split(' ');
+                    if (arr && arr.length >= 2) {
+                        this.size = arr[0];
+                        this.font = arr[1];
+                    }
+                }
+            }
+        },
+        methods: {
+
+        }
+    }
+</script>
+<style>
+    .format {
+        background-color: #C0C4CC;
+        width: 360px;
+    }
+</style>

src/views/components/progressBar/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div v-show="show" class="progressShade" :style="{background: background}">
+    <el-progress
+      class="progressBar"
+      :type="type"
+      :show-text="showText"
+      :text-inside="textInside"
+      :stroke-width="strokeWidth"
+      :percentage="percentage"
+      :color="color"
+      :status="status"
+    />
+  </div>
+</template>
+
+<script>
+import { requestAnimationFrame, cancelRequestAnimFrame } from '@/jmap/utils/animation';
+
+export default {
+	name: 'ProgressBar',
+	props: {
+		type: {
+			type: String,
+			default() {
+				return 'line';
+			}
+		},
+		showText: {
+			type: Boolean,
+			default() {
+				return true;
+			}
+		},
+		textInside: {
+			type: Boolean,
+			default() {
+				return false;
+			}
+		},
+		strokeWidth: {
+			type: Number,
+			default() {
+				return 5;
+			}
+		},
+		background: {
+			type: String,
+			default() {
+				return 'rgba(0, 0, 0, 0.8)';
+			}
+		}
+	},
+	data() {
+		return {
+			color: '#8e71c7',
+			status: null,
+			show: true,
+			percentage: 0,
+			fps: 30,
+			then: null
+		};
+	},
+	mounted() {
+		this.percentage = this.randomNum();
+	},
+	methods: {
+		randomNum() {
+			return Math.ceil(Math.random() * 5) + 50;
+		},
+		run() {
+			const now = +Date.now();
+			const delta = now - this.then || +Date.now();
+			const interval = 1000 / this.fps;
+
+			if (delta > interval) {
+				this.then = now - (delta % interval);
+				if (this.percentage < 90) {
+					this.percentage = this.percentage + 5;
+				} else {
+					cancelRequestAnimFrame(this.run);
+				}
+			}
+
+			requestAnimationFrame(this.run);
+		},
+		start() {
+			if (!this.show) {
+				this.status = null;
+				this.percentage = this.randomNum();
+				this.show = true;
+				this.run();
+			}
+		},
+		end(isSuccess) {
+			cancelRequestAnimFrame(this.run);
+			if (this.show) {
+				if (isSuccess) {
+					this.success();
+				} else {
+					this.failed();
+				}
+			}
+		},
+		progressAt(num) {
+			if (num > 0 && num < 100 && num > this.percentage) {
+				this.percentage = num;
+			}
+		},
+		success() {
+			this.status = 'success';
+			this.percentage = 100;
+			setTimeout(() => {
+				this.show = false;
+			}, 1000 / this.fps);
+		},
+		failed() {
+			this.status = 'exception';
+			setTimeout(() => {
+				this.show = false;
+			}, 1000 / this.fps);
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .progressShade {
+        display: inline;
+        z-index: 9998;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+    }
+
+    .progressBar {
+        z-index: 9999;
+        display: inline;
+        position: absolute;
+        top: 40%;
+        width: 50%;
+        left: 25%;
+    }
+</style>

src/views/jlmap/index.vue

@@ -0,0 +1,336 @@
+<template>
+  <!-- <div class="jlmap-canvas" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
+		element-loading-background="rgba(0, 0, 0, 0.8)"> -->
+  <div class="jlmap-canvas" :style="{ width: width+'px', height: height+ 28+'px' }">
+    <div :id="jmapContainerId" style="background: #000;" />
+    <progress-bar ref="progressBar" />
+    <zoom-box v-if="!isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" />
+    <div v-if="show" class="zoom-view" :style="{ width: width +'px'}">
+      <el-form :model="dataZoom" label-width="60px" size="mini" inline>
+        <el-form-item label="偏移:">
+          <el-input v-model="dataZoom.offsetX" :disabled="true" />
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataZoom.offsetY" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="缩放:" style="float: right">
+          <el-input v-model="dataZoom.scaleRate" :disabled="true" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- <split-module ref="splitModule" /> -->
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+// import localStore from 'storejs';
+import Jmap from '@/jmap/map';
+import ZoomBox from './zoom/zoom';
+import ProgressBar from '@/views/components/progressBar/index';
+import { TrainingMode } from '@/scripts/ConstDic';
+// import { mapGetters } from 'vuex';
+// import { Loading } from 'element-ui';
+// import { UrlConfig } from '@/router/index';
+
+export default {
+	name: 'JlmapVisual',
+	components: {
+		ZoomBox,
+		ProgressBar
+	},
+	data() {
+		return {
+			width: this.$store.state.config.width,
+			height: this.$store.state.config.height,
+			jmapContainerId: this.getMapContainerIdRandom(),
+			jmap: null,
+			loading: true,
+			dataZoom: {
+				offsetX: '0',
+				offsetY: '0',
+				scaleRate: '1'
+			}
+			// sectionActive: false,
+			// operate: null,
+		};
+	},
+	computed: {
+		// ...mapGetters('training', [
+		//     'mode',
+		//     'offsetStationCode'
+		// ]),
+		show() {
+			if (this.mode === TrainingMode.EDIT || this.mode === TrainingMode.MAP_EDIT) {
+				return true;
+			}
+			return false;
+		},
+		isScreen() {
+			return this.$route.params.mode === 'dp';
+		}
+	},
+	watch: {
+		// '$store.state.map.map': function (val, old) {
+		//     if (val && val.skinStyle) {
+		//         try {
+		//             this.setMap(val);
+		//         } catch (error) {
+		//             console.log(error);
+		//             this.$messageBox('加载地图数据失败');
+		//             this.mapViewLoaded(false);
+		//         }
+		//     }
+		// },
+		// '$store.state.training.rezoomCount': function (val, old) {
+		//     this.setShowCenter(this.$store.state.training.offsetStationCode);
+		// },
+		'$store.state.config.canvasSizeCount': function (val) {
+			this.resetSize();
+		}
+		// '$store.state.menuOperation.magnifyCount': function () {
+		//     this.setMagnify();
+		// },
+		// '$store.state.menuOperation.shrinkCount': function () {
+		//     this.setShrink();
+		// },
+		// $route() {
+		//     this.mapViewLoaded(true);
+		// }
+	},
+	created() {
+		// eventBus.$on('viewLoading', (loading) => {
+		//     this.mapViewLoaded(loading)
+		// });
+		// eventBus.$on('viewProgressAt', (percentage) => {
+		//     this.mapViewProgressAt(percentage);
+		// });
+		// eventBus.$on('refresh', () => {
+		//     this.refresh(this.$store.state.map.map);
+		// })
+	},
+	mounted() {
+		this.initLoadPage();
+		// eventBus.$on('sectionActive', (operate) => {
+		//     this.sectionActive = true;
+		//     this.operate = operate;
+		// })
+	},
+	beforeDestroy() {
+		// eventBus.$off('refresh');
+		// eventBus.$off('viewLoading');
+		// eventBus.$off('viewProgressAt');
+		// if (this.jlmap) {
+		//     this.jlmap.dispose();
+		// }
+	},
+	methods: {
+		// 初始化jmap
+		initLoadPage() {
+			// this.mapViewLoaded(true); // 进度条
+			Vue.prototype.$jlmap = this.jmap = new Jmap({
+				dom: document.getElementById(this.jmapContainerId),
+				config: {
+					renderer: 'canvas',
+					// width: document.documentElement.clientWidth,
+					// height: document.documentElement.clientHeight
+					width: this.width,
+					height: this.height
+				},
+				options: {
+					scaleRate: 1,
+					offsetX: 0,
+					offsetY: 0
+				},
+				methods: {
+					dataLoaded() { console.log('dataLoaded'); },
+					viewLoaded() { console.log('viewLoaded'); },
+					stateLoaded() { console.log('stateLoaded'); },
+					viewUpdate() { console.log('viewUpdate'); },
+					stateUpdate() { console.log('stateUpdate'); }
+					// optionsUpdate() { console.log('optionsUpdate'); }
+				}
+			});
+
+			this.jmap.on('selected', this.onSelected);
+			this.jmap.on('contextmenu', this.onContextMenu);
+
+			window.document.oncontextmenu = function () {
+				return false;
+			};
+
+			// this.jlmap.on('datazoom', this.onDataZoom, this);
+			// this.jlmap.on('selected', this.onSelected, this);
+			// this.jlmap.on('contextmenu', this.onContextMenu, this);
+			// this.jlmap.on('viewupdate', this.onViewUpdate, this);
+			// this.$store.dispatch('map/setJlmap', this.jlmap);
+			// this.$store.dispatch('training/setJlmap', this.jlmap);
+			// this.$store.dispatch('map/mapClear');
+
+		},
+		// 重置jlmap宽高
+		resetSize() {
+			this.$nextTick(() => {
+				this.width = this.$store.state.config.width;
+				this.height = this.$store.state.config.height;
+
+				if (this.jmap) {
+					this.jmap.resize({ width: this.width, height: this.height });
+				}
+
+				// this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
+
+				// setTimeout(() => {
+				// 	this.$store.dispatch('config/resetCanvasOffset');
+				// 	this.$store.dispatch('training/emitTipFresh');
+				// }, 100);
+			});
+		},
+		// 设置显示图层
+		setShowLevel(level) {
+			// if (this.jlmap) {
+			//     this.jlmap.setShowLevel(level);
+			// }
+		},
+		// 设置逻辑视图Level
+		setShowLogicalLevel(levels) {
+			// if (this.jlmap) {
+			//     this.jlmap.setShowLogicalLevel(levels);
+			// }
+		},
+		// 设置物理视图Level
+		setShowPhysicalLevel(levels) {
+			// if (this.jlmap) {
+			//     this.jlmap.setShowPhysicalLevel(levels);
+			// }
+		},
+		// 设置显示中心
+		setShowCenter(deviceCode) {
+			// if (this.jlmap) {
+			//     this.jlmap.setCenter(deviceCode);
+			// }
+		},
+		// 状态视图更新
+		onViewUpdate(em) {
+			// if (this.loading && em.devices) {
+			//     const reg = new RegExp(`${UrlConfig.map.prefix}`);
+			//     if (reg.test(this.$route.path) && em.repaint || !reg.test(this.$route.path) && !em.repaint) {
+			//         setTimeout(() => {
+			//             this.mapViewLoaded(false);
+			//             this.$store.dispatch('map/mapViewLoaded');
+			//         }, 500);
+			//     }
+			// }
+
+			// eventBus.$emit('trainView');
+		},
+		// 监听缩放事件
+		onDataZoom(dataZoom) {
+			// this.dataZoom.offsetX = dataZoom._offsetX.toFixed(1) + '';
+			// this.dataZoom.offsetY = dataZoom._offsetY.toFixed(1) + '';
+			// this.dataZoom.scaleRate = dataZoom._scaleRate + '';
+
+			// let skinStyle = this.$store.state.map.map.skinStyle;
+			// if (skinStyle) {
+			//     let param = {
+			//         scaleRate: this.dataZoom.scaleRate,
+			//         skinCode: skinStyle,
+			//         offsetY: this.dataZoom.offsetY,
+			//     }
+			//     localStore.set(`scaleRate_${skinStyle}`, JSON.stringify(param));  // 保存缩放倍数
+			// }
+
+			// this.$store.dispatch('map/updateZoom', this.dataZoom);
+			// this.$store.dispatch('training/emitTipFresh');
+		},
+		// 点击选择事件
+		onSelected(em) {
+			// this.$emit('onSelect', em);
+			// if (this.sectionActive) {
+			//     let model = this.$store.getters['map/getDeviceByCode'](em.deviceCode);
+			//     this.$refs.splitModule.doShow(this.operate, model);
+			//     this.operate = null;
+			//     this.sectionActive = false;
+			// }
+		},
+		// 右键点击事件
+		onContextMenu(em) {
+			// this.$emit('onMenu', em);
+		},
+		// 设置地图加载状态
+		mapViewLoaded(loading) {
+			this.loading = loading;
+			if (loading) {
+				this.$refs.progressBar.start();
+			} else {
+				this.$refs.progressBar.end(true);
+			}
+		},
+		// 设置地图加载进度
+		mapViewProgressAt(percentage) {
+			this.$nextTick(() => {
+				this.$refs.progressBar.progressAt(percentage);
+			});
+		},
+		// 设置新的地图数据
+		setMap(map) {
+			this.jlmap.load(map);
+			this.$store.dispatch('map/mapDataLoaded');
+		},
+		// 刷新地图数据
+		refresh(map) {
+		},
+		// 新增设备
+		addOrUpdateDevices(devices) {
+			// this.jlmap.setMapDevice(devices);
+		},
+		// 删除设备
+		deleteDevices(devices) {
+			// this.jlmap.setMapDevice(devices);
+		},
+		// 缩小
+		setShrink() {
+			// this.jlmap.setScale(-1);
+		},
+		// 放大
+		setMagnify() {
+			// this.jlmap.setScale(1);
+		},
+		// 获取随机canvas id
+		getMapContainerIdRandom() {
+			const id = ['map', (Math.random().toFixed(5)) * 100000].join('_');
+			this.$store.dispatch('config/setCurrentCancasId', { id: id });
+			return id;
+		}
+	}
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.jlmap-canvas {
+		position: relative;
+		moz-user-select: -moz-none;
+		-moz-user-select: none;
+		-o-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+
+	.zoom-view {
+		position: fixed;
+		height: 28px;
+	}
+
+	/deep/ {
+		.el-form.el-form--inline {
+			height: 28px !important;
+			line-height: 28px !important
+		}
+
+		.el-loading-mask {
+			background-color: rgba(0, 0, 0, 0.3);
+		}
+	}
+</style>

src/views/jlmap/zoom/zoom.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="zoom-box" :style="{top: offset+'px'}">
+    <el-button class="shrink zoom" :disabled="scaleRate == 1" @click="setShrinkCanvas">
+      <i class="el-icon-minus" />
+    </el-button>
+    <el-button class="magnify zoom" :disabled="scaleRate == 8" @click="setMagnifyCanvas">
+      <i class="el-icon-plus" />
+    </el-button>
+  </div>
+</template>
+<script>
+export default {
+	name: 'ZoomBox',
+	props: {
+		scaleRate: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			offset: 15
+		};
+	},
+	watch: {
+		'$store.state.config.menuBarLoadedCount': function (val) {
+			this.setPosition();
+		}
+	},
+	methods: {
+		setPosition() {
+			this.$nextTick(() => {
+				let offset = 15;
+				const menuBar = document.getElementById('menuBar');
+				const menuTool = document.getElementById('menuTool');
+
+				if (menuBar) {
+					offset += (menuBar.offsetHeight || 0);
+				}
+
+				if (menuTool) {
+					offset += (menuTool.offsetHeight || 0);
+				}
+
+				if (this.offset != offset) {
+					this.offset = offset;
+				}
+			});
+		},
+		setShrinkCanvas() {
+			this.$emit('setShrink');
+		},
+		setMagnifyCanvas() {
+			this.$emit('setMagnify');
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .zoom-box {
+        z-index: 7;
+        position: absolute;
+        left: 20px;
+        width: 120px;
+        height: 32px;
+        background: rgb(224, 223, 223);
+        border-radius: 4px;
+        overflow: hidden;
+
+        .zoom {
+            width: 50%;
+            float: left;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            border-radius: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: none;
+            outline: none;
+            color: #333;
+
+            i {
+                color: #000;
+                font-size: 18px;
+                font-weight: 900;
+            }
+        }
+
+        .shrink {
+            border-right: 1px solid #333;
+        }
+    }
+</style>

src/views/jmapTest/index.vue

@@ -58,7 +58,7 @@ export default {
 
 		// this.jmap.load({ skinVO: { code: '02' }, linkList: list });
 
-		getPublishMapDetail('03').then(resp => {
+		getPublishMapDetail('02').then(resp => {
 			this.jmap.setLevelVisible([deviceType.Link], false);
 			this.jmap.load(resp.data);
 			// this.jmap.setDefaultState();

src/views/map/mapdraft/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="mapMain" class="mapDraft">
+    <div class="map-list" :style="{width: widthLeft+'px'}">
+      <map-list-operation ref="mapListOperation" />
+    </div>
+    <!-- <drap-left :width-left="widthLeft" @drapWidth="drapWidth" /> -->
+    <transition>
+      <router-view />
+    </transition>
+    <!-- <menu-location ref="menuLocation" /> -->
+  </div>
+</template>
+<script>
+import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+import MapListOperation from './mapmanage/maplist';
+import localStore from 'storejs';
+// import DrapLeft from '@/views/components/drapLeft/index';
+// import MenuLocation from './menus/menuLocation';
+
+export default {
+	name: 'MapDraft',
+	components: {
+		MapListOperation
+		// DrapLeft
+		// MenuLocation
+	},
+	mixins: [
+		WindowResizeHandler
+	],
+	data() {
+		return {
+			widthLeft: 320
+		};
+	},
+	watch: {
+		widthLeft(val) {
+			this.setMapResize(val);
+		}
+	},
+	mounted() {
+		this.resizeHandler();
+	},
+	methods: {
+		drapWidth(width) {
+			this.widthLeft = Number(width);
+		},
+		resizeHandler() {
+			this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
+			this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
+			this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
+			const width = this._clientWidth - 521 - this.widthLeft;
+			const height = this._clientHeight - 90;
+			this.$store.dispatch('config/resize', { width: width, height: height });
+		},
+		setMapResize(LeftWidth) {
+			const widths = this._clientWidth - 521 - LeftWidth;
+			const heights = this._clientHeight - 90;
+			this.$store.dispatch('config/resize', { width: widths, height: heights });
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .mapDraft {
+        overflow: hidden;
+
+        .map-list {
+            float: left;
+            height: 100%;
+        }
+    }
+</style>

src/views/map/mapdraft/mapedit/automaticoperate/detail.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-dialog title="自动信号列表" :visible.sync="show" width="85%" :before-do-close="doClose">
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+    <pre-view-field ref="previewField" :map-info="mapInfo" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listMap } from '@/api/jmap/mapdraft';
+import { getAutoSignalList, delAutoSignal, getAutoSignalDetail } from '@/api/jmap/mapdraft';
+import PreViewField from './preview';
+
+export default {
+	name: 'RouteDetail',
+	components: {
+		PreViewField
+	},
+	props: {
+		mapInfo: {
+			type: Object
+		}
+	},
+	data() {
+		return {
+			show: false,
+			mapList: [],
+			pagerConfig: {
+				pageSize: 'pageSize',
+				pageIndex: 'pageNum'
+			},
+			queryForm: {
+				labelWidth: '120px',
+				queryObject: {
+					signalCode: {
+						type: 'select',
+						label: '信号机',
+						config: {
+							data: []
+						}
+					}
+				}
+			},
+			queryList: {
+				query: this.queryFunction,
+				afterQuery: this.afterQuery,
+				selectCheckShow: false,
+				indexShow: true,
+				columns: [
+					{
+						title: '自动信号编码',
+						prop: 'code'
+					},
+					{
+						title: '信号机名称',
+						prop: 'signalCode'
+					},
+					{
+						title: '信号机code',
+						prop: 'code'
+					},
+					{
+						type: 'button',
+						title: '区段数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.sectionDetail
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '操作',
+						width: '200',
+						buttons: [
+							{
+								name: '编辑',
+								handleClick: this.editObj
+							},
+							{
+								name: '删除',
+								handleClick: this.deleteObj,
+								type: 'danger'
+							}
+						]
+					}
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'signalList'
+		])
+	},
+	watch: {
+		signalList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				for (let i = 0; i < val.length; i++) {
+					list.push({ label: val[i].uniqueName, value: val[i].code });
+				}
+				this.queryForm.queryObject.signalCode.config.data = list;
+			}
+		}
+	},
+	mounted() {
+		this.acquireMapList();
+	},
+	methods: {
+		doShow() {
+			this.show = true;
+			this.reloadTable();
+		},
+		doClose() {
+			this.show = false;
+		},
+		formatName(code) {
+			let name = '';
+			const device = this.$store.getters['map/getDeviceByCode'](code);
+			if (device) {
+				name = device.uniqueName;
+			}
+
+			return name;
+		},
+		queryFunction(params) {
+			if (this.mapInfo && this.mapInfo.id) {
+				return getAutoSignalList(this.mapInfo.id, params);
+			}
+		},
+		acquireMapList() {
+			// 地图名称列表
+			listMap().then(response => {
+				this.mapList = response.data;
+			});
+		},
+		convertField(dataDict, enumList, key, value, fieldList) {
+			if (dataDict && enumList && fieldList && enumList.length && fieldList.length) {
+				fieldList.forEach(field => {
+					enumList.forEach(elem => {
+						if (elem[key] === dataDict[field]) {
+							dataDict[field] = elem[value];
+						}
+					});
+				});
+			}
+		},
+		afterQuery(data) {
+			if (data && data.list) {
+				const that = this;
+				const list = data.list;
+				if (list) {
+					list.map(elem => {
+						that.convertField(elem, that.mapList, 'id', 'name', ['mapId']);
+						elem.code = elem.signalCode;
+						elem.signalCode = that.formatName(elem.signalCode);
+					});
+				}
+			}
+			return data;
+		},
+		editObj(index, row) {
+			getAutoSignalDetail(row.id).then(response => {
+				const data = Object.assign({}, response.data);
+				data.autoSignalClearList = data.autoSignalClearList.map(elem => { return elem.sectionCode; });
+
+				this.$emit('autoMaticoSelected', data);
+				this.doClose();
+			});
+		},
+		deleteObj(index, row) {
+			if (this.mapInfo && this.mapInfo.id && row) {
+				// 删除
+				delAutoSignal(row.id).then(response => {
+					this.$message.success('删除成功');
+					this.reloadTable();
+				}).catch(error => {
+					this.$messageBox('删除失败');
+				});
+			}
+		},
+		sectionDetail(index, row) {
+			const sectionDict = {};
+
+			this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
+
+			const fieldList = {
+				id: row.id,
+				mapId: this.$route.params.mapId,
+				title: '区段列表',
+				name: row.code,
+				model: {
+					field: 'autoSignalClearList',
+					items: [
+						{ prop: 'sectionCode', label: '区段名称', type: 'select', options: sectionDict }
+					]
+				}
+			};
+			this.$refs.previewField.doShow(fieldList, row.autoSignalClearList);
+		},
+		reloadTable() {
+			if (this.queryList && this.queryList.reload) {
+				this.queryList.reload();
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/automaticoperate/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapControl">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>
+            地图名称：
+            <b>{{ mapInfo.name }}</b>
+          </span>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">预览
+          </el-button>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">新建
+          </el-button>
+        </div>
+        <el-tabs v-model="enabledTab" type="card">
+          <el-tab-pane label="自动信号" name="Route">
+            <route-draft
+              ref="routeEdit"
+              :selected="selected"
+              :map-info="mapInfo"
+              :route-data="routeData"
+              :card-height="cardHeight"
+              @handleSelectView="handleSelectView"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+      <route-detail ref="routeDetail" :map-info="mapInfo" @autoMaticoSelected="autoMaticoSelected" />
+    </div>
+  </transition>
+</template>
+<script>
+import RouteDraft from './route';
+import RouteDetail from './detail';
+
+export default {
+	name: 'AutomaticOperate',
+	components: {
+		RouteDraft,
+		RouteDetail
+	},
+	props: {
+		mapInfo: {
+			type: Object
+		},
+		selected: {
+			type: Object
+		},
+		cardHeight: {
+			type: Number || String
+		}
+	},
+	data() {
+		return {
+			enabledTab: 'Route',
+			routeData: null
+		};
+	},
+	methods: {
+		clickEvent(e, model) {
+			this.onSelect(model);
+		},
+		onSelect(model) {
+			if (model) {
+				this.selected = model;
+			} else {
+				this.selected = null;
+			}
+		},
+		setDelayUnlockStatus(data, status) {
+			if (data && data.delayShowList) {
+				data.delayShowList.forEach(elem => {
+					elem.status = status;
+				});
+			}
+		},
+		autoMaticoSelected: function (data) {
+			this.routeData = data;
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.isSave = false;
+			}
+		},
+		previewRouteEvent: function () {
+			if (this.$refs && this.$refs.routeDetail) {
+				this.$refs.routeDetail.doShow();
+			}
+		},
+		createRouteEvent: function () {
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.clear();
+			}
+		},
+		setSelected(selected) {
+			this.$refs.routeEdit.setSelected(selected);
+		},
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		setShowCenter(code) {
+			this.$emit('setShowCenter', code);
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/automaticoperate/preview.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog
+    :title="mapInfo.name + ' / ' + name + ' / ' + title"
+    :visible.sync="show"
+    width="30%"
+    :before-close="doClose"
+    center
+    append-to-body
+  >
+    <el-table :data="data" border style="width: 100%">
+      <template v-for="(item, index) in form">
+        <el-table-column :key="index" :label="item.label">
+          <template slot-scope="scope">
+            <template v-if="item.type === 'select'">
+              <el-tooltip effect="dark" :content="item.options[scope.row[item.prop]]" placement="top">
+                <span>{{ item.options[scope.row[item.prop]] }}</span>
+              </el-tooltip>
+            </template>
+            <template v-if="item.type === 'text'">
+              <el-tooltip effect="dark" :content="scope.row[item.prop]" placement="top">
+                <span>{{ scope.row[item.prop] }}</span>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+	name: 'DictionaryDetailEdit',
+	props: {
+		mapInfo: {
+			type: Object
+		}
+	},
+	data() {
+		return {
+			show: false,
+			title: '',
+			name: '',
+			form: [],
+			data: []
+		};
+	},
+	methods: {
+		doShow(fieldList, dataList) {
+			if (fieldList.model) {
+				const items = fieldList.model.items;
+				if (fieldList.model.convert) {
+					data = fieldList.model.convert(data);
+				}
+				if (items) {
+					this.form = items;
+					this.name = fieldList.name;
+					this.data = dataList;
+					this.title = fieldList.title;
+				}
+				this.show = true;
+			}
+		},
+		doClose(done) {
+			this.show = false;
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/automaticoperate/route.vue

@@ -0,0 +1,190 @@
+<template>
+  <div :style="{ height: cardHeight +'px' }">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-form ref="form" :model="addModel" :rules="rules" label-width="180px" size="mini">
+        <div class="definition">
+          <el-form-item label="信号机ID:" prop="signalCode">
+            <el-select v-model="addModel.signalCode" clearable :filterable="true">
+              <el-option
+                v-for="item in signalList"
+                :key="item.code"
+                :label="item.name + ' (' + item.code+ ')'"
+                :value="item.code"
+              />
+            </el-select>
+            <el-button :type="field === 'signalCode' ? 'danger' : 'primary'" @click="hover('signalCode')">激活
+            </el-button>
+          </el-form-item>
+          <el-form-item label="进路自动触发区段数据:" prop="autoSignalClearList">
+            <el-select v-model="addModel.autoSignalClearList" multiple clearable :filterable="true">
+              <el-option
+                v-for="item in sectionList"
+                :key="item.code"
+                :label="item.name + ' (' + item.code+ ')'"
+                :value="item.code"
+              />
+            </el-select>
+            <el-button
+              :type=" field === 'autoSignalClearList' ? 'danger' : 'primary'"
+              @click="hover('autoSignalClearList')"
+            >激活</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button-group>
+              <el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">保存
+              </el-button>
+              <el-button v-else type="warning" size="small" :loading="loading" @click="update">更新
+              </el-button>
+            </el-button-group>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import { postAutoSignal, putAutoSignal } from '@/api/jmap/mapdraft';
+import { ViewMode } from '@/scripts/ConstDic';
+import { formatName } from '@/utils/runPlan';
+
+export default {
+	name: 'RouteOperation',
+	props: {
+		selected: {
+			type: Object
+		},
+		mapInfo: {
+			type: Object
+		},
+		routeData: {
+			type: Object
+		},
+		cardHeight: {
+			type: Number || String
+		}
+	},
+	data() {
+		return {
+			ViewMode: ViewMode,
+			field: '',
+			isSave: true,
+			loading: false,
+			editModel: {},
+			addModel: {
+				id: '',
+				code: '',
+				mapId: '',
+				signalCode: '',
+				autoSignalClearList: []
+			},
+			editShow: false,
+			rules: {
+				signalCode: [
+					{ required: true, message: '请选择信号机', trigger: 'change' }
+				],
+				autoSignalClearList: [
+					{ required: true, message: '请选择进路自动触发区段数据', trigger: 'change' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'signalList',
+			'sectionList'
+		])
+	},
+	watch: {
+		mapInfo(val) {
+			if (val) {
+				this.addModel.mapId = val.id;
+			}
+		},
+		routeData(val, old) {
+			if (val) {
+				this.addModel = val;
+				this.editShow = true;
+			}
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.handleSelectView(ViewMode.PHYSICAL);
+		});
+	},
+	methods: {
+		hover(field) {
+			this.field = field === this.field ? '' : field;
+		},
+		formatName(code) {
+			return formatName(code);
+		},
+		setSelected(selected) {
+			if (selected) {
+				if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'signalCode'.toUpperCase()) {
+					this.addModel.signalCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'autoSignalClearList'.toUpperCase()) {
+					if (this.addModel.autoSignalClearList.indexOf(selected.code) === -1) {
+						this.addModel.autoSignalClearList.push(selected.code);
+					}
+				}
+			}
+		},
+		// 切换地图属性
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		buildModel(code) {
+			const model = Object.assign({}, this.addModel);
+			if (code) { model['code'] = code; }
+			model['mapId'] = this.mapInfo.id;
+			model['autoSignalId'] = this.addModel.id;
+			model['autoSignalClearList'] = this.addModel.autoSignalClearList.map(elem => { return { sectionCode: elem }; });
+			return model;
+		},
+		save() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.loading = true;
+					postAutoSignal(this.buildModel(getUID('autoSingle'))).then(resp => {
+						this.$message.success('创建自动信号成功！');
+						this.loading = false;
+						this.clear();
+					}).catch(() => {
+						this.$messageBox('创建自动信号失败');
+						this.loading = false;
+					});
+				}
+			});
+		},
+		update() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.loading = true;
+					putAutoSignal(this.buildModel()).then(resp => {
+						this.$message.success('更新自动信号成功！');
+						this.loading = false;
+						this.clear();
+					}).catch(() => {
+						this.$messageBox('更新自动信号失败');
+						this.loading = false;
+					});
+				}
+			});
+		},
+		clear() {
+			if (this.$refs && this.$refs.form && this.mapInfo) {
+				delete this.addModel.id;
+				this.$refs.form.resetFields();
+				this.addModel.mapId = this.mapInfo.id;
+				this.addModel.autoSignalClearList = [];
+				this.addModel.signalCode = '';
+				this.addModel.code = '';
+				this.isSave = true;
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/index.vue

@@ -0,0 +1,385 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapPaint">
+      <div class="map-view">
+        <jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
+      </div>
+      <div class="map-draft">
+        <div v-if="viewDraft==='draft'">
+          <map-operate
+            ref="mapOperate"
+            :card-height="cardHeight"
+            :map-info="mapInfo"
+            :selected="selected"
+            :map-saveing="mapSaveing"
+            @handleSelectLogicalView="handleSelectLogicalView"
+            @handleSelectPhysicalView="handleSelectPhysicalView"
+            @handleSelectView="handleSelectView"
+            @saveMapEvent="saveMapEvent"
+            @verifyMapEvent="verifyMapEvent"
+            @addOrUpdateMapModel="addOrUpdateMapModel"
+            @delMapModel="delMapModel"
+            @setShowCenter="setShowCenter"
+          />
+        </div>
+        <div v-if="viewDraft==='route'">
+          <route-operate
+            ref="routeOperate"
+            :card-height="cardHeight+25"
+            :map-info="mapInfo"
+            :selected="selected"
+            @handleSelectView="handleSelectView"
+            @setShowCenter="setShowCenter"
+          />
+        </div>
+        <div v-if="viewDraft==='routing'">
+          <routing-operate
+            ref="routingOperate"
+            :card-height="cardHeight+25"
+            :map-info="mapInfo"
+            :selected="selected"
+            @handleSelectView="handleSelectView"
+            @setShowCenter="setShowCenter"
+          />
+        </div>
+        <div v-if="viewDraft==='automatic'">
+          <automatic-operate
+            ref="automaticOperate"
+            :card-height="cardHeight+25"
+            :map-info="mapInfo"
+            :selected="selected"
+            @handleSelectView="handleSelectView"
+            @setShowCenter="setShowCenter"
+          />
+        </div>
+        <div v-if="viewDraft==='swtich'">
+          <switch-operate
+            ref="SwitchOperate"
+            :card-height="cardHeight+25"
+            :map-info="mapInfo"
+            :selected="selected"
+            @handleSelectView="handleSelectView"
+            @setShowCenter="setShowCenter"
+          />
+        </div>
+        <div v-if="viewDraft==='path'">
+          <path-operate
+            ref="pathOperate"
+            :card-height="cardHeight+25"
+            :map-info="mapInfo"
+            :selected="selected"
+            @handleSelectView="handleSelectView"
+            @setShowCenter="setShowCenter"
+          />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import { saveMap, getMapDetail, verifyMap } from '@/api/jmap/mapdraft';
+import { ViewMode, TrainingMode, getDeviceMenuByDeviceType } from '@/scripts/ConstDic';
+import { checkLoginLine } from '@/api/login';
+import JlmapVisual from '@/views/jlmap/index';
+import RouteOperate from './routeoperate/index';
+import RoutingOperate from './routingoperate/index';
+import AutomaticOperate from './automaticoperate/index';
+import MapOperate from './mapoperate/index';
+import SwitchOperate from './switchoperate/index';
+import pathOperate from './pathoperate/index';
+import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+
+export default {
+	name: 'MapView',
+	components: {
+		JlmapVisual,
+		MapOperate,
+		RouteOperate,
+		RoutingOperate,
+		SwitchOperate,
+		pathOperate,
+		AutomaticOperate
+	},
+	mixins: [
+		WindowResizeHandler
+	],
+	data() {
+		return {
+			mapSaveing: false,
+			cardHeight: 400,
+			ViewMode: ViewMode,
+			viewDraft: 'draft',
+			autoSaveTask: null,
+			selected: null,
+			mapInfo: { name: '请选择地图' },
+			timeDemon: null
+		};
+	},
+	watch: {
+		'$store.state.map.mapDataLoadedCount': function (val) {
+			this.initAutoSaveTask();
+		},
+		'viewDraft': function () {
+			this.initAutoSaveTask();
+		},
+		$route() {
+			this.loadInitPage();
+		}
+	},
+	mounted() {
+		this.resizeHandler();
+		this.loadInitPage();
+		this.timeDemon = setInterval(() => {
+			checkLoginLine();
+		}, 5000 * 60);
+	},
+	beforeDestroy() {
+		this.clearAutoSave();
+		this.$store.dispatch('map/mapClear');
+		if (this.timeDemon) {
+			clearTimeout(this.timeDemon);
+		}
+	},
+	methods: {
+		resizeHandler: function () {
+			this.cardHeight = this._clientHeight - 195;
+		},
+		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.viewDraft = this.$route.params.view;
+			this.mapInfo = { name: '请选择地图', 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/mapClear').then(() => {
+						this.$store.dispatch('map/setMapData', response.data);
+						this.setDelayUnlockStatus(response.data, '00');
+						this.initAutoSaveTask();
+					});
+				}).catch(() => {
+					this.$messageBox('加载地图数据失败');
+					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: function (model) {
+			if (this.$refs && this.$refs.mapOperate) {
+				this.$refs.mapOperate.handleSelectControlPage(model);
+			}
+		},
+		handleSelectView(handle) {
+			if (this.$refs && this.$refs.jlmapVisual) {
+				this.$refs.jlmapVisual.setShowLevel(handle);
+			}
+		},
+		handleSelectLogicalView(handle) {
+			if (this.$refs && this.$refs.jlmapVisual) {
+				this.$refs.jlmapVisual.setShowLogicalLevel(handle);
+			}
+		},
+		handleSelectPhysicalView(handle) {
+			if (this.$refs && this.$refs.jlmapVisual) {
+				this.$refs.jlmapVisual.setShowPhysicalLevel(handle);
+			}
+		},
+		clickEvent(em) {
+			var model = this.getDeviceByEm(em);
+			this.onSelect(model);
+			switch (this.viewDraft) {
+			case 'route':
+				this.$refs.routeOperate.setSelected(model);
+				break;
+			case 'routing':
+				this.$refs.routingOperate.setSelected(model);
+				break;
+			case 'automatic':
+				this.$refs.automaticOperate.setSelected(model);
+				break;
+			case 'swtich':
+				this.$refs.SwitchOperate.setSelected(model);
+				break;
+			case 'path':
+				this.$refs.pathOperate.setSelected(model);
+				break;
+			}
+		},
+		// 获取设备数据
+		getDeviceByEm(em) {
+			var model = null;
+			if (em.deviceCode) {
+				model = this.$store.getters['map/getDeviceByCode'](em.deviceCode);
+				if (model) {
+					model._type = em.deviceType;
+					model._viewVal = em.val;
+				}
+			}
+			return model;
+		},
+		onSelect(model) {
+			if (model) {
+				this.selected = model;
+				this.handleSelectControlPage(model);
+			} else {
+				this.selected = null;
+			}
+		},
+		onContextmenu(em) {
+			this.point = {
+				x: em.clientX,
+				y: em.clientY
+			};
+
+			var menu = getDeviceMenuByDeviceType('Cancel');
+
+			this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
+		},
+		saveMapEvent() {
+			if (this.$refs.jlmapVisual) {
+				const map = this.$store.state.map.map;
+				if (map && parseInt(this.$route.params.mapId)) {
+					for (const i in map.sectionList) {
+						if (map.sectionList[i].points.length > 0) {
+							for (let index = 0; index < map.sectionList[i].points.length; index++) {
+								if (String(map.sectionList[i].points[index].x) == 'undefined' || String(map.sectionList[i].points[index].y) == 'undefined') {
+									this.$messageBox('区段坐标缺失');
+									return;
+								}
+							}
+						} else {
+							this.$messageBox('区段坐标缺失');
+							return;
+						}
+					}
+
+					this.mapSaveing = true;
+					this.$store.dispatch('map/saveMapDeviceDefaultConvert').then(() => {
+						saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(response => {
+							this.$message.success('保存成功');
+							this.mapSaveing = false;
+							this.initAutoSaveTask();
+						}).catch(error => {
+							this.$messageBox('保存失败');
+							this.mapSaveing = false;
+							if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
+								this.clearAutoSave();
+							} else {
+								this.initAutoSaveTask();
+							}
+						});
+					});
+				}
+			}
+		},
+		verifyMapEvent() {
+			if (this.$refs.jlmapVisual) {
+				const map = this.$store.state.map.map;
+				if (map && this.$route.params.mapId) {
+					verifyMap(this.$route.params.mapId).then(res => {
+						if (res.data.length) {
+							this.tableToExcel(res.data);
+							this.$messageBox('数据校验不通过');
+						} else {
+							this.$message.success('数据校验通过！');
+						}
+					}).catch(() => {
+						this.$messageBox('请求失败');
+					});
+				}
+			}
+		},
+
+		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(['有问题数据'], dataList, '数据列表');
+                });
+		},
+		formatJson(filterVal, jsonData) {
+			return jsonData.map(v => filterVal.map(j => v[j]));
+		},
+
+		setDelayUnlockStatus(data, status) {
+			if (data && data.delayShowList) {
+				data.delayShowList.forEach(elem => {
+					elem.status = status;
+				});
+			}
+		},
+		// 增加数据数据 给vuex map对象中
+		addOrUpdateMapModel(obj) {
+			this.$store.dispatch('map/updateMapDevices', obj).then((devices) => {
+				this.$refs.jlmapVisual.addOrUpdateDevices(devices);
+			});
+		},
+		// 删除数据 同时del map
+		delMapModel(obj) {
+			this.$store.dispatch('map/deleteMapDevices', obj).then((devices) => {
+				this.$refs.jlmapVisual.deleteDevices(devices);
+				this.selected = null;
+			});
+		},
+		// 设置显示中心
+		setShowCenter(code) {
+			this.$refs.jlmapVisual.setShowCenter(code);
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .map-view {
+        float: left;
+        width: auto;
+    }
+
+    .map-draft {
+        float: right;
+        width: 520px;
+
+        /deep/ .el-scrollbar__view {
+            width: 510px !important;
+        }
+    }
+
+    .physical-view {
+        line-height: 25px;
+        height: 60px;
+        padding-left: 12px;
+
+        .el-checkbox {
+            width: 70px;
+            margin: 0;
+            margin-right: 12px;
+        }
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/ImageControl.vue

@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="150px" size="mini" :rules="rules">
+            <el-form-item label="编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in resourceList"
+                  :key="item.code"
+                  :label="item.name + '(' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="图片名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="图片宽度:" prop="width">
+              <el-input-number v-model="editModel.width" />
+            </el-form-item>
+            <el-form-item label="图片高度:" prop="height">
+              <el-input-number v-model="editModel.height" />
+            </el-form-item>
+            <el-form-item label="图片层级:" prop="zIndex">
+              <el-input-number v-model="editModel.zIndex" />
+            </el-form-item>
+            <el-form-item label="旋转角度:" prop="rotate">
+              <el-input-number v-model="editModel.rotate" />
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">图片坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="150px" :rules="createRules" :model="addModel" size="mini">
+            <el-form-item label="图片宽度:" prop="width">
+              <el-input-number v-model="addModel.width" />
+            </el-form-item>
+            <el-form-item label="图片高度:" prop="height">
+              <el-input-number v-model="addModel.height" />
+            </el-form-item>
+            <el-form-item label="图片选择:">
+              <el-select v-model="addModel.url">
+                <el-option
+                  v-for="item in imageLists"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">图片坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'ImageControlDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			mapData: null,
+			imageLists: [
+				{
+					value: `${process.env.VOICE_API}/oss/2d/bj1.png`,
+					label: '上段'
+				},
+				{
+					value: `${process.env.VOICE_API}/oss/2d/bj2.png`,
+					label: '下段'
+				}
+			],
+			editModel: {
+				code: '',
+				width: '',
+				height: '',
+				name: '',
+				rotate: 0,
+				zIndex: 5,
+				url: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				width: 48,
+				height: 20,
+				name: '',
+				rotate: 0,
+				zIndex: 5,
+				url: `${process.env.VOICE_API}/oss/2d/bj1.png`,
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				width: [
+					{ required: true, message: '请输入图片宽度', trigger: 'blur' }
+				],
+				height: [
+					{ required: true, message: '请输入图片宽度', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'resourceList'
+		]),
+		createRules: function () {
+			return {
+				width: [
+					{ required: true, message: '请输入图片宽度', trigger: 'blur' }
+				],
+				height: [
+					{ required: true, message: '请输入图片宽度', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.name = selected.name;
+				this.editModel.width = selected.width;
+				this.editModel.height = selected.height;
+				this.editModel.rotate = selected.rotate;
+				this.editModel.zIndex = selected.zIndex;
+				this.editModel.url = selected.url;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('ImageControl');
+					const model = {
+						_type: 'ImageControl',
+						code: uid,
+						name: uid,
+						width: this.addModel.width,
+						rotate: 0,
+						zIndex: 5,
+						height: this.addModel.height,
+						url: this.addModel.url,
+						position: {
+							x: this.addModel.position.x,
+							y: this.addModel.position.y
+						}
+					};
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'ImageControl',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				width: this.editModel.width,
+				height: this.editModel.height,
+				rotate: this.editModel.rotate,
+				zIndex: this.editModel.zIndex,
+				url: this.editModel.url,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 160px;
+            font-weight: bold;
+            display: block;
+            float: left;
+        }
+    }
+
+    .map-draft-group {
+        color: #3E44BE;
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/counter.vue

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" :rules="editRules" label-width="120px" size="mini">
+            <el-form-item label="计数器编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in counterList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="计数器名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="所属车站:" prop="stationCode">
+              <el-select v-model="editModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="计数器类型:" prop="type">
+              <el-select v-model="editModel.type" filterable placeholder="请选择类型">
+                <el-option
+                  v-for="item in typeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="计数器最大值:" prop="max">
+              <el-input-number v-model="editModel.max" :min="0" />个
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="editModel.position.x" />px
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="editModel.position.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="120px" :model="addModel" :rules="createRules" size="mini">
+            <el-form-item label="车站名称:" prop="stationCode">
+              <el-select v-model="addModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="计数器类型:" prop="type">
+              <el-select v-model="addModel.type" filterable placeholder="请选择类型">
+                <el-option
+                  v-for="item in typeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'CounterDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			typeList: [
+				{ code: '01', name: '区故解' },
+				{ code: '02', name: '总人解' }
+			],
+			editModel: {
+				code: '',
+				name: '',
+				type: '',
+				max: 0,
+				val: 0,
+				stationCode: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				type: '',
+				stationCode: ''
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'counterList',
+			'stationList',
+			'skinStyle'
+		]),
+		createRules: function () {
+			return {
+				type: [
+					{ required: true, message: '请选择计数器类型', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择车站', trigger: 'change' }
+				]
+			};
+		},
+		editRules: function () {
+			return {
+				code: [
+					{ required: true, message: '请重新选择设备', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择车站', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入计数器名称', trigger: 'change' }
+				],
+				type: [
+					{ required: true, message: '请选择计数器类型', trigger: 'change' }
+				],
+				max: [
+					{ required: true, message: '请输入计数器最大值', trigger: 'change' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标', trigger: 'change' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标', trigger: 'change' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.name = selected.name;
+				this.editModel.type = selected.type;
+				this.editModel.max = selected.max;
+				this.editModel.val = selected.val;
+				this.editModel.stationCode = selected.stationCode;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				this.addModel.stationCode = selected.code;
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('Counter');
+					const model = {
+						_type: 'Counter',
+						code: uid,
+						type: this.addModel.type,
+						max: 0,
+						val: 0
+					};
+					this.typeList.forEach(elem => {
+						if (elem.code === this.addModel.type) {
+							model.name = elem.name;
+						}
+					});
+					this.stationList.forEach(elem => {
+						if (elem.code === this.addModel.stationCode) {
+							model.position = { x: elem.position.x, y: elem.position.y };
+							model.stationCode = elem.code;
+						}
+					});
+
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'Counter',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				type: this.editModel.type,
+				max: this.editModel.max,
+				val: this.editModel.val,
+				stationCode: this.editModel.stationCode,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/map/mapdraft/mapedit/mapoperate/delayunlock.vue

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" :rules="editRules" label-width="130px" size="mini">
+            <el-form-item label="延时解锁编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in delayShowList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="所属车站:" prop="stationCode">
+              <el-select v-model="editModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="延时时间:" prop="unlockTime" disabled="true">
+              <el-input-number v-model="editModel.unlockTime" :min="0" :max="1000" />s
+            </el-form-item>
+            <el-form-item label="字体:" prop="textFontFormat">
+              <el-font v-model="editModel.textFontFormat" />
+            </el-form-item>
+            <el-form-item label="颜色:" prop="textFontColor">
+              <el-color-picker v-model="editModel.textFontColor" show-alpha :predefine="skins" />
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="editModel.position.x" />px
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="editModel.position.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
+            <el-form-item label="车站名称:" prop="stationCode">
+              <el-select v-model="addModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import ElFont from '@/views/components/font/index';
+
+export default {
+	name: 'DelayUnlockDraft',
+	components: {
+		ElFont
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			skins: [],
+			editModel: {
+				code: '',
+				unlockTime: 0,
+				stationCode: '',
+				textFontColor: '#FFFFFF',
+				textFontFormat: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				stationCode: ''
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'delayShowList',
+			'stationList',
+			'skinStyle'
+		]),
+		createRules: function () {
+			return {
+				stationCode: [
+					{ required: true, message: '请选择车站', trigger: 'change' }
+				]
+			};
+		},
+		editRules: function () {
+			return {
+				code: [
+					{ required: true, message: '请重新选择设备', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择车站', trigger: 'change' }
+				],
+				unlockTime: [
+					{ required: true, message: '请输入延时时间', trigger: 'change' }
+				],
+				textFontColor: [
+					{ required: true, message: '请输入字体颜色', trigger: 'change' }
+				],
+				textFontFormat: [
+					{ required: true, message: '请输入字体格式', trigger: 'change' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标', trigger: 'change' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标', trigger: 'change' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			this.$nextTick(() => {
+				if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
+					this.editModel.code = selected.code;
+					this.editModel.textFontFormat = selected.font;
+					this.editModel.textFontColor = selected.fontColor;
+					this.editModel.stationCode = selected.stationCode;
+					this.editModel.unlockTime = selected.unlockTime;
+					this.editModel.position = {
+						x: selected.position.x,
+						y: selected.position.y
+					};
+					this.activeName = 'first';
+				} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+					this.addModel.stationCode = selected.code;
+					this.activeName = 'second';
+				} else {
+					this.activeName = 'second';
+				}
+				this.$refs.form.clearValidate();
+			});
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('DelayUnlock');
+					const model = {
+						_type: 'DelayUnlock',
+						font: '12px consolas',
+						fontColor: '#FFFFFF',
+						unlockTime: 10,
+						code: uid,
+						delayName: 'Test',
+						status: '00'
+					};
+					this.stationList.forEach(elem => {
+						if (elem.code === this.addModel.stationCode) {
+							model.position = { x: elem.position.x, y: elem.position.y };
+							model.stationCode = elem.code;
+						}
+					});
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'DelayUnlock',
+				code: this.editModel.code,
+				font: this.editModel.textFontFormat,
+				fontColor: this.editModel.textFontColor,
+				unlockTime: this.editModel.unlockTime,
+				stationCode: this.editModel.stationCode,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				},
+				status: '00'
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/map/mapdraft/mapedit/mapoperate/index.vue

@@ -0,0 +1,435 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>
+            地图名称：
+            <b>{{ mapInfo.name }}</b>
+          </span>
+          <el-button
+            v-if="isSave"
+            type="text"
+            style="float: right; padding: 3px 0"
+            :disabled="mapSaveing"
+            @click="saveMapEvent"
+          >保存</el-button>
+          <el-button
+            v-if="isSave"
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            :disabled="mapSaveing"
+            @click="verifyMapEvent"
+          >数据校验</el-button>
+        </div>
+        <el-row type="flex" justify="center">
+          <el-radio-group v-model="viewSelect" @change="handleSelectView">
+            <el-radio-button :label="ViewMode.LOGIC">逻辑视图</el-radio-button>
+            <el-radio-button :label="ViewMode.PHYSICAL">物理视图</el-radio-button>
+            <el-radio-button :label="ViewMode.MIX">混合视图</el-radio-button>
+          </el-radio-group>
+        </el-row>
+        <el-row v-if="ViewMode.LOGIC === viewSelect" class="logical-view" type="flex" justify="center">
+          <el-checkbox-group v-model="logicalLevelsSelect" @change="handleSelectLogicalView">
+            <el-checkbox v-for="view in LogicalViewTypeList" :key="view.code" :label="view.code">
+              {{ view.name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-row>
+        <el-row v-if="ViewMode.PHYSICAL === viewSelect" class="physical-view" type="flex" justify="center">
+          <el-checkbox-group v-model="physicalLevelsSelect" @change="handleSelectPhysicalView">
+            <el-checkbox v-for="view in PhysicalViewTypeList" :key="view.code" :label="view.code">
+              {{ view.name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-row>
+        <el-tabs v-model="enabledTab" type="card">
+          <el-tab-pane label="Link" name="Link">
+            <link-draft
+              ref="Link"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="区段" name="Section">
+            <section-draft
+              ref="Section"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+              @fieldSelect="fieldSelect"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="道岔" name="Switch">
+            <switch-draft
+              ref="Switch"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="信号机" name="Signal">
+            <signal-draft
+              ref="Signal"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="zc区域控制" name="ZcControl">
+            <zc-control-draft
+              ref="ZcControl"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="全线临时限速" name="LimitControl">
+            <limit-control-draft
+              ref="LimitControl"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="Lc控制" name="LcControl">
+            <lc-control-draft
+              ref="LcControl"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="图片" name="ImageControl">
+            <Image-control-draft
+              ref="ImageControl"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="车站" name="Station">
+            <station-draft
+              ref="Station"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="控制模式" name="StationControl">
+            <station-control-draft
+              ref="StationControl"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="站台" name="StationStand">
+            <station-stand-draft
+              ref="StationStand"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="计数器" name="Counter">
+            <counter-draft
+              ref="Counter"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="延迟解锁" name="DelayUnlock">
+            <delay-unlock-draft
+              ref="DelayUnlock"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <!-- <el-tab-pane label="停车点" name="StopPoint">
+                        <stop-point-draft ref="Link" :cardHeight="cardHeights" :selected="selected"
+                            @addOrUpdateMapModel="addOrUpdateMapModel" @delMapModel="delMapModel"
+                            @setShowCenter="setShowCenter">
+                        </stop-point-draft>
+                    </el-tab-pane> -->
+          <el-tab-pane label="列车" name="Train">
+            <train-draft
+              ref="Train"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="车次窗" name="TrainWindow">
+            <train-window-draft
+              ref="TrainWindow"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="线条" name="Line">
+            <line-draft
+              ref="Line"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="文字" name="Text">
+            <text-draft
+              ref="Text"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import LinkDraft from './link';
+// import StopPointDraft from './stoppoint';
+import SectionDraft from './section';
+import SwitchDraft from './switch';
+import SignalDraft from './signal';
+import StationDraft from './station';
+import StationStandDraft from './stationstand';
+import StationControlDraft from './stationcontrol';
+import CounterDraft from './counter';
+import DelayUnlockDraft from './delayunlock';
+import TrainDraft from './train';
+import LineDraft from './line';
+import TextDraft from './text';
+import TrainWindowDraft from './trainwindow';
+import ZcControlDraft from './zcControl';
+import LimitControlDraft from './limitControl';
+import LcControlDraft from './lcControl';
+import ImageControlDraft from './ImageControl';
+
+import { ViewMode } from '@/scripts/ConstDic';
+
+export default {
+	name: 'MapOperate',
+	components: {
+		CounterDraft,
+		LinkDraft,
+		// StopPointDraft,
+		SectionDraft,
+		SwitchDraft,
+		SignalDraft,
+		StationDraft,
+		StationStandDraft,
+		StationControlDraft,
+		DelayUnlockDraft,
+		TrainWindowDraft,
+		TrainDraft,
+		LineDraft,
+		TextDraft,
+		ZcControlDraft,
+		LimitControlDraft,
+		LcControlDraft,
+		ImageControlDraft
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		mapInfo: {
+			type: Object,
+			default: function() { return {name: '请选择地图'}; }
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		},
+		mapSaveing: [Boolean]
+	},
+	data() {
+		return {
+			feild: '',
+			ViewMode: ViewMode,
+			LogicalViewTypeList: [
+				{ code: 'Link', name: 'link' }
+				// { code: 'StopPoint', name: '停车点' },
+			],
+			PhysicalViewTypeList: [
+				{ code: 'Section', name: '区段' },
+				{ code: 'Signal', name: '信号机' },
+				{ code: 'Switch', name: '道岔' }
+			],
+			logicalLevelsSelect: [],
+			physicalLevelsSelect: [],
+			viewSelect: ViewMode.MIX,
+			enabledTab: 'Link',
+			autoSaveTask: null,
+			show: {
+				mapEditShow: false,
+				mapPaintShow: true
+			},
+			cardHeights: 0
+		};
+	},
+	computed: {
+		isSave() {
+			return this.mapInfo && this.mapInfo.id;
+		}
+	},
+	watch: {
+		'$store.state.map.mapDataLoadedCount': function (val) {
+			this.handleSelectView(this.viewSelect);
+		},
+		viewSelect: function (val) {
+			this.resizeCardHeight();
+		},
+		cardHeight: function (val) {
+			this.resizeCardHeight();
+		}
+	},
+	mounted() {
+		this.resizeCardHeight();
+		this.initPage();
+		this.$nextTick(() => {
+			this.handleSelectView(ViewMode.MIX);
+		});
+	},
+	methods: {
+		initPage() {
+			this.$Dictionary.logicalViewType().then(list => {
+				this.LogicalViewTypeList = list;
+				this.LogicalViewTypeList.forEach(elem => {
+					this.logicalLevelsSelect.push(elem.code);
+				});
+			});
+			this.$Dictionary.physicalViewType().then(list => {
+				this.PhysicalViewTypeList = list;
+				this.PhysicalViewTypeList.forEach(elem => {
+					this.physicalLevelsSelect.push(elem.code);
+				});
+			});
+		},
+		resizeCardHeight() {
+			var padding = 0;
+			if (this.viewSelect === ViewMode.PHYSICAL) {
+				padding = 90;
+			} else if (this.viewSelect === ViewMode.LOGIC) {
+				padding = 20;
+			}
+			this.cardHeights = this.cardHeight - padding - 130;
+		},
+		// 切换tab栏操作
+		handleSelectControlPage(model) {
+			const type = model._type;
+			if (this.feild) {
+				this.$refs.Section.setSelected(model);
+			} else {
+				this.enabledTab = type;
+			}
+		},
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		handleSelectLogicalView(handle) {
+			this.$emit('handleSelectLogicalView', handle);
+		},
+		handleSelectPhysicalView(handle) {
+			this.$emit('handleSelectPhysicalView', handle);
+		},
+		saveMapEvent() {
+			this.$emit('saveMapEvent');
+		},
+		verifyMapEvent() {
+			this.$emit('verifyMapEvent');
+		},
+		addOrUpdateMapModel(obj) {
+			this.$emit('addOrUpdateMapModel', obj);
+		},
+		delMapModel(obj) {
+			this.$emit('delMapModel', obj);
+		},
+		setShowCenter(code) {
+			this.$emit('setShowCenter', code);
+		},
+		fieldSelect(type) {
+			this.feild = type;
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .map-context {
+        display: block;
+        float: left;
+        margin-left: 5px;
+    }
+
+    .map-control {
+        float: right;
+        width: 100%;
+    }
+
+    .physical-view {
+        line-height: 25px;
+        height: 90px;
+        padding-left: 12px;
+
+        .el-checkbox {
+            width: 70px;
+            margin: 0;
+            margin-right: 30px;
+        }
+    }
+
+    /deep/ .map-draft-group {
+        float: right;
+        margin: 10px 5px;
+    }
+
+    /deep/ {
+        .view-control {
+            overflow-y: auto;
+        }
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/lcControl.vue

@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="150px" size="mini" :rules="rules">
+            <el-form-item label="编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in lcList"
+                  :key="item.code"
+                  :label="item.name + '(' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="状态信号名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">状态信号画图坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="150px" :rules="createRules" :model="addModel" size="mini">
+            <el-form-item label="状态信号名称:" prop="name">
+              <el-input v-model="addModel.name" />
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">状态信号画图坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'LcControlDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			mapData: null,
+			editModel: {
+				code: '',
+				name: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				code: '',
+				name: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择唯一编码', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入状态信号名称', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'trainList',
+			'trainModelList',
+			'lcList',
+			'skinStyle'
+		]),
+		createRules: function () {
+			return {
+				name: [
+					{ required: true, message: '请输入状态信号名称', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.name = selected.name;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('LcControl');
+					const model = {
+						_type: 'LcControl',
+						code: uid,
+						name: this.addModel.name,
+						position: {
+							x: this.addModel.position.x,
+							y: this.addModel.position.y
+						}
+					};
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'LcControl',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 160px;
+            font-weight: bold;
+            display: block;
+            float: left;
+        }
+    }
+
+    .map-draft-group {
+        color: #3E44BE;
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/limitControl.vue

@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="150px" size="mini" :rules="rules">
+            <el-form-item label="编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in tempSpeedLimitList"
+                  :key="item.code"
+                  :label="item.name + '(' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="状态信号名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">状态信号画图坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="150px" :rules="createRules" :model="addModel" size="mini">
+            <el-form-item label="状态信号名称:" prop="name">
+              <el-input v-model="addModel.name" />
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">状态信号画图坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'LimitControlDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			mapData: null,
+			editModel: {
+				code: '',
+				name: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				code: '',
+				name: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择唯一编码', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入状态信号名称', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'trainList',
+			'trainModelList',
+			'tempSpeedLimitList',
+			'skinStyle'
+		]),
+		createRules: function () {
+			return {
+				name: [
+					{ required: true, message: '请输入状态信号名称', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.name = selected.name;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('LimitControl');
+					const model = {
+						_type: 'LimitControl',
+						code: uid,
+						name: this.addModel.name,
+						position: {
+							x: this.addModel.position.x,
+							y: this.addModel.position.y
+						}
+					};
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'LimitControl',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 160px;
+            font-weight: bold;
+            display: block;
+            float: left;
+        }
+    }
+
+    .map-draft-group {
+        color: #3E44BE;
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/line.vue

@@ -0,0 +1,369 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="120px" size="mini" :rules="rules">
+            <el-form-item label="线条编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in lineList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="线条类型:" prop="type">
+              <el-select v-model="editModel.type" filterable>
+                <el-option
+                  v-for="item in LineTypeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="线条宽度:" prop="width">
+              <el-input-number v-model="editModel.width" :min="1" />px
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">区段显示坐标:</span>
+              <div class="point-section">
+                <template v-for="(point, index) in editModel.points">
+                  <div :key="index" style="overflow: hidden;">
+                    <el-form-item
+                      label=""
+                      :prop="'points[' + index + '].x'"
+                      style="display: table; float: left;"
+                      label-width="0px"
+                    >
+                      <el-input-number v-model="point.x" />
+                    </el-form-item>
+                    <span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
+                      , </span>
+                    <el-form-item
+                      label=""
+                      :prop="'points[' + index + '].y'"
+                      style="display: table; float: left; margin-right: 5px;"
+                      label-width="10px"
+                    >
+                      <el-input-number v-model="point.y" />
+                    </el-form-item>
+                    <el-button
+                      icon="el-icon-plus"
+                      circle
+                      class="point-button"
+                      @click="addPoint(editModel.points, index)"
+                    />
+                    <el-button
+                      icon="el-icon-minus"
+                      :disabled="index == 0 || index == editModel.points.length - 1"
+                      circle
+                      class="point-button"
+                      @click="delPoint(editModel.points,index)"
+                    />
+                  </div>
+                </template>
+              </div>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="120px" :model="addModel" size="mini" :rules="makeRules">
+            <el-form-item label="线条类型:" prop="type">
+              <el-select v-model="addModel.type" filterable>
+                <el-option
+                  v-for="item in LineTypeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="线条宽度:" prop="width">
+              <el-input-number v-model="addModel.width" :min="1" />px
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">区段显示坐标:</span>
+              <div class="point-section">
+                <template v-for="(point, index) in addModel.points">
+                  <div :key="index" style="overflow: hidden;">
+                    <el-form-item
+                      label=""
+                      :prop="'points[' + index + '].x'"
+                      style="display: table; float: left;"
+                      label-width="0px"
+                    >
+                      <el-input-number v-model="point.x" />
+                    </el-form-item>
+                    <span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
+                      , </span>
+                    <el-form-item
+                      label=""
+                      :prop="'points[' + index + '].y'"
+                      style="display: table; float: left; margin-right: 5px;"
+                      label-width="10px"
+                    >
+                      <el-input-number v-model="point.y" />
+                    </el-form-item>
+                    <el-button
+                      icon="el-icon-plus"
+                      circle
+                      class="point-button"
+                      @click="addPoint(addModel.points, index)"
+                    />
+                    <el-button
+                      icon="el-icon-minus"
+                      :disabled="index == 0 || index == addModel.points.length - 1"
+                      circle
+                      class="point-button"
+                      @click="delPoint(addModel.points, index)"
+                    />
+                  </div>
+                </template>
+              </div>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'StationStandDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			LineTypeList: [
+				{ code: '01', name: '测试' }
+
+			],
+			editModel: {
+				code: '',
+				type: '',
+				width: 1,
+				points: []
+			},
+			addModel: {
+				type: '',
+				width: 1,
+				points: [
+					{ x: 0, y: 0 },
+					{ x: 100, y: 100 }
+				]
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择Line', trigger: 'blur' }
+				],
+				type: [
+					{ required: true, message: '请选择Line类型', trigger: 'blur' }
+				],
+				width: [
+					{ required: true, message: '请输入线条宽度', trigger: 'blur' }
+				]
+			},
+			makeRules: {
+				code: [
+					{ required: true, message: '请选择Line', trigger: 'blur' }
+				],
+				type: [
+					{ required: true, message: '请选择Line类型', trigger: 'blur' }
+				],
+				width: [
+					{ required: true, message: '请输入线条宽度', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'lineList',
+			'stationList',
+			'skinStyle'
+		])
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+		this.$Dictionary.lineType().then(list => {
+			this.LineTypeList = list;
+		});
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
+				this.activeName = 'first';
+				this.editModel.code = selected.code;
+				this.editModel.type = selected.type;
+				this.editModel.width = selected.width;
+				this.editModel.points = [...selected.points];
+			} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				this.addModel.stationName = selected.name;
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		addPoint(points, index) {
+			const data = { x: 0, y: 0 };
+			if (points && points.length) {
+				points.splice(index + 1, 0, data);
+			}
+		},
+		delPoint(points, index) {
+			if (points) {
+				points.splice(index, 1);
+			}
+		},
+		create() {
+			this.$refs['make'].validate((valid) => {
+				if (valid) {
+					if (JSON.stringify(this.addModel.points[0]) !== JSON.stringify(this.addModel.points[this.addModel.points.length - 1])) {
+						const pointArr = JSON.stringify(this.addModel.points);
+						const model = {
+							_type: 'Line',
+							code: getUID('Line'),
+							type: this.addModel.type,
+							width: this.addModel.width,
+							points: JSON.parse(pointArr)
+						};
+						this.$emit('addOrUpdateMapModel', model);
+					} else {
+						this.$message.console.error('起始坐标和结束坐标不能重合');
+
+					}
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const pointArr = JSON.stringify(this.editModel.points);
+			const model = {
+				_type: 'Line',
+				code: this.editModel.code,
+				type: this.editModel.type,
+				width: this.editModel.width,
+				points: JSON.parse(pointArr)
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .view-control {
+        overflow-y: auto;
+    }
+
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 120px;
+            font-weight: bold;
+            display: block;
+            float: left;
+        }
+    }
+
+    .point-section {
+        float: left;
+        width: calc(100% - 120px);
+    }
+
+    .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(-5px);
+            }
+        }
+    }
+
+    .el-input-number--mini {
+        width: 110px;
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/link.vue

@@ -0,0 +1,679 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="130px" size="mini" :rules="rules">
+            <el-form-item label="Link编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in linkList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="Link名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="Link显示长度:" prop="lengthShow">
+              <el-input-number v-model="editModel.lengthShow" :min="50" label="显示长度" :disabled="true" />px
+            </el-form-item>
+            <el-form-item label="Link实际长度:" prop="lengthFact">
+              <el-input-number v-model="editModel.lengthFact" :min="0" label="真实长度" />米
+            </el-form-item>
+            <el-form-item label="Link颜色:" prop="color">
+              <el-color-picker v-model="editModel.color" :predefine="skins" />
+            </el-form-item>
+            <el-form-item label="左侧正向Link:" prop="leftFdCode">
+              <el-select v-model="editModel.leftFdCode" filterable clearable>
+                <el-option
+                  v-for="item in linkList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="左侧侧向Link:" prop="leftSdCode">
+              <el-select v-model="editModel.leftSdCode" filterable clearable>
+                <el-option
+                  v-for="item in linkList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="右侧正向Link:" prop="rightFdCode">
+              <el-select v-model="editModel.rightFdCode" filterable clearable>
+                <el-option
+                  v-for="item in linkList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="右侧侧向Link:" prop="rightSdCode">
+              <el-select v-model="editModel.rightSdCode" filterable clearable>
+                <el-option
+                  v-for="item in linkList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">Link 起点坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="lp.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.lp.x" label="x坐标" :disabled="true" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="lp.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.lp.y" label="y坐标" :disabled="true" />
+              </el-form-item>
+            </div>
+            <div class="coordinate">
+              <span class="title">Link 终点坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="rp.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.rp.x" label="x坐标" :disabled="true" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="rp.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.rp.y" label="y坐标" :disabled="true" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="120px" :model="addModel" size="mini">
+            <el-form-item label="Link类型:">
+              <el-radio-group v-model="LinkType">
+                <el-radio
+                  v-for="item in LinkTypeList"
+                  :key="item.value"
+                  :label="item.value"
+                  border
+                  :disabled="item.disabled"
+                  size="mini"
+                >{{ item.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <template v-if="isNew">
+              <el-form ref="make1" label-width="120px" :model="addModel" size="mini" :rules="makeRules1">
+                <el-form-item label="显示长度:" prop="lengthShow">
+                  <el-input-number v-model="addModel.lengthShow" :min="0" />px
+                </el-form-item>
+                <el-form-item label="真实长度:" prop="lengthFact">
+                  <el-input-number v-model="addModel.lengthFact" :min="0" />米
+                </el-form-item>
+                <el-form-item label="颜色:" prop="color">
+                  <el-color-picker v-model="addModel.color" :predefine="skins" />
+                </el-form-item>
+                <el-form-item label="坐标 x:" prop="x">
+                  <el-input-number v-model="addModel.x" />px
+                </el-form-item>
+                <el-form-item label="坐标 y:" prop="y">
+                  <el-input-number v-model="addModel.y" />px
+                </el-form-item>
+              </el-form>
+            </template>
+            <template v-if="isFd">
+              <el-form ref="make2" label-width="120px" :model="addModel" size="mini" :rules="makeRules2">
+                <el-form-item label="基础Link:" prop="code">
+                  <el-select v-model="addModel.code" filterable placeholder="请选择">
+                    <el-option
+                      v-for="option in linkList"
+                      :key="option.code"
+                      :label="option.name"
+                      :value="option.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="方向:" prop="direct">
+                  <el-radio-group v-model="addModel.direct">
+                    <el-radio
+                      v-for="item in LinkDriectTypeList"
+                      :key="item.value"
+                      :label="item.value"
+                      border
+                      :disabled="item.disabled"
+                    >{{ item.label }}
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="!isSd" label="显示长度:" prop="lengthShow">
+                  <el-input-number v-model="addModel.lengthShow" :min="0" />px
+                </el-form-item>
+                <el-form-item label="真实长度:" prop="lengthFact">
+                  <el-input-number v-model="addModel.lengthFact" :min="0" />米
+                </el-form-item>
+                <el-form-item label="颜色:" prop="color">
+                  <el-color-picker v-model="addModel.color" :predefine="skins" />
+                </el-form-item>
+              </el-form>
+            </template>
+            <template v-if="isSd">
+              <el-form ref="make3" label-width="120px" :model="addModel" size="mini" :rules="makeRules3">
+                <el-form-item label="左侧正向Link:" prop="lfd">
+                  <el-select v-model="addModel.lfd" filterable placeholder="请选择">
+                    <el-option
+                      v-for="option in linkList"
+                      :key="option.code"
+                      :label="option.name"
+                      :value="option.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="右侧正向Link:" prop="rfd">
+                  <el-select v-model="addModel.rfd" filterable placeholder="请选择">
+                    <el-option
+                      v-for="option in linkList"
+                      :key="option.code"
+                      :label="option.name"
+                      :value="option.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="!isSd" label="显示长度:" prop="lengthShow">
+                  <el-input-number v-model="addModel.lengthShow" :min="0" />px
+                </el-form-item>
+                <el-form-item label="真实长度:" prop="lengthFact">
+                  <el-input-number v-model="addModel.lengthFact" :min="0" />米
+                </el-form-item>
+                <el-form-item label="颜色:" prop="color">
+                  <el-color-picker v-model="addModel.color" :predefine="skins" />
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button v-if="isNew" type="primary" @click="isNewCreate">创建</el-button>
+          <el-button v-if="isFd" type="primary" @click="isFdCreate">创建</el-button>
+          <el-button v-if="isSd" type="primary" @click="isSdCreate">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import { getUName } from '@/jmap/utils/Uname';
+
+export default {
+	name: 'LinkDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			LinkType: '0',
+			LinkTypeList: [],
+			LinkDriectTypeList: [],
+			editModel: {
+				code: '',
+				type: '',
+				name: '',
+				lengthShow: 0,
+				lengthFact: 0,
+				color: '',
+				leftFdCode: '',
+				leftSdCode: '',
+				rightFdCode: '',
+				rightSdCode: '',
+				lp: {
+					x: 0,
+					y: 0
+				},
+				rp: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				code: '',
+				type: '',
+				direct: 'R',
+				x: 0,
+				y: 0,
+				lengthShow: 200,
+				lengthFact: 0,
+				lfd: '',
+				rfd: '',
+				color: '#4e8de6'
+			},
+			skins: [],
+			rules: {
+				code: [
+					{ required: true, message: '请选择设备', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入Link名称', trigger: 'blur' }
+				],
+				lengthFact: [
+					{ required: true, message: '请输入Link实际长度', trigger: 'blur' }
+				]
+			},
+			makeRules1: {
+				x: [
+					{ required: true, message: '请输入Link x坐标', trigger: 'blur' }
+				],
+				y: [
+					{ required: true, message: '请输入Link y坐标', trigger: 'blur' }
+				],
+				lengthShow: [
+					{ required: true, message: '请输入显示长度', trigger: 'blur' }
+				],
+				lengthFact: [
+					{ required: true, message: '请输入真实长度', trigger: 'blur' }
+				]
+			},
+			makeRules2: {
+				code: [
+					{ required: true, message: '请选择基础Link', trigger: 'change' }
+				],
+				lengthShow: [
+					{ required: true, message: '请输入显示长度', trigger: 'blur' }
+				],
+				lengthFact: [
+					{ required: true, message: '请输入真实长度', trigger: 'blur' }
+				]
+			},
+			makeRules3: {
+				lfd: [
+					{ required: true, message: '请输入左侧正向Link', trigger: 'blur' }
+				],
+				rfd: [
+					{ required: true, message: '请输入右侧正向Link', trigger: 'blur' }
+				],
+				lengthFact: [
+					{ required: true, message: '请输入真实长度', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	computed: {
+		// 是否初始link
+		isNew() {
+			this.addModel.type = '01';
+			return this.LinkType === '0';
+		},
+		// 是否正向link
+		isFd() {
+			this.addModel.type = '01';
+			return this.LinkType === '1';
+		},
+		// 是否侧向link
+		isSd() {
+			this.addModel.type = '02';
+			return this.LinkType === '2';
+		},
+		...mapGetters('map', [
+			'linkList'
+		])
+	},
+	mounted() {
+		this.LinkTypeList = this.$ConstSelect.LinkTypeList;
+		this.LinkDriectTypeList = this.$ConstSelect.LinkDriectTypeList;
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
+				this.editModel.name = selected.name;
+				this.editModel.code = this.addModel.code = selected.code;
+				this.editModel.type = selected.type;
+				this.editModel.lengthShow = Math.sqrt(Math.pow(selected.rp.x - selected.lp.x, 2) + Math.pow(selected.rp.y - selected.lp.y, 2));
+				this.editModel.lengthFact = selected.lengthFact;
+				this.editModel.color = selected.color;
+				this.editModel.leftFdCode = selected.leftFdCode;
+				this.editModel.leftSdCode = selected.leftSdCode;
+				this.editModel.rightFdCode = selected.rightFdCode;
+				this.editModel.rightSdCode = selected.rightSdCode;
+				this.editModel.lp = {
+					x: selected.lp.x,
+					y: selected.lp.y
+				};
+				this.editModel.rp = {
+					x: selected.rp.x,
+					y: selected.rp.y
+				};
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		isNewCreate() {
+			this.$refs['make1'].validate((valid) => {
+				if (valid) {
+					var uid = getUID('Link');
+					var uname = getUName(this.linkList);
+					const edits = [];
+
+					if (this.isNew) {
+						// 初始link
+						const x = this.addModel.x;
+						const y = this.addModel.y;
+						var model = {
+							code: uid,
+							name: uname,
+							type: this.addModel.type,
+							lp: {
+								x: x,
+								y: y
+							},
+							rp: {
+								x: x + this.addModel.lengthShow,
+								y: y
+							},
+							lengthFact: this.addModel.lengthFact,
+							color: this.addModel.color ? this.addModel.color : '#4e8de6'
+						};
+						edits.push(this.createLinkModel(model));
+					}
+					this.$emit('addOrUpdateMapModel', edits);
+				}
+			});
+		},
+		isFdCreate() {
+			this.$refs['make2'].validate((valid) => {
+				if (valid) {
+					var uid = getUID('Link');
+					var uname = getUName(this.linkList);
+					const edits = [];
+					var baseLink = null;
+					if (this.addModel) {
+						baseLink = this.$store.getters['map/getDeviceByCode'](this.addModel.code);
+					}
+
+					var leftFdCode = '';
+					var rightFdCode = '';
+					if (this.isFd) {
+						let lp = {};
+						let rp = {};
+						if (baseLink && baseLink._type.toUpperCase() === 'Link'.toUpperCase()) {
+							if (this.addModel.direct === 'L') {
+								lp = {
+									x: baseLink.lp.x - this.addModel.lengthShow,
+									y: baseLink.lp.y
+								};
+								rp = {
+									x: baseLink.lp.x,
+									y: baseLink.lp.y
+								};
+								rightFdCode = baseLink.code;
+								baseLink.leftFdCode = uid;
+								edits.push(baseLink);
+							} else {
+								lp = {
+									x: baseLink.rp.x,
+									y: baseLink.rp.y
+								};
+								rp = {
+									x: baseLink.rp.x + this.addModel.lengthShow,
+									y: baseLink.rp.y
+								};
+								leftFdCode = baseLink.code;
+								baseLink.rightFdCode = uid;
+								edits.push(baseLink);
+							}
+							const model = {
+								code: uid,
+								name: uname,
+								type: this.addModel.type,
+								lp: lp,
+								rp: rp,
+								color: this.addModel.color ? this.addModel.color : '#4e8de6',
+								lengthFact: this.addModel.lengthFact,
+								leftFdCode: leftFdCode,
+								rightFdCode: rightFdCode
+							};
+							edits.push(this.createLinkModel(model));
+						}
+					}
+					this.$emit('addOrUpdateMapModel', edits);
+				}
+			});
+		},
+		isSdCreate() {
+			this.$refs['make3'].validate((valid) => {
+				if (valid) {
+					var uid = getUID('Link');
+					var uname = getUName(this.linkList);
+					const edits = [];
+
+					if (this.isSd) {
+						var lnode = this.findLinkData(this.addModel.lfd);
+						var rnode = this.findLinkData(this.addModel.rfd);
+						if (lnode && rnode) {
+							const model = {
+								code: uid,
+								name: uname,
+								type: this.addModel.type,
+								lp: {
+									x: lnode.rp.x,
+									y: lnode.rp.y
+								},
+								rp: {
+									x: rnode.lp.x,
+									y: rnode.lp.y
+								},
+								lengthFact: this.addModel.lengthFact,
+								color: this.addModel.color ? this.addModel.color : '#4e8de6',
+								leftFdCode: lnode.code,
+								rightFdCode: rnode.code
+							};
+
+							if (rnode.lp.y === lnode.rp.y) {
+								lnode.rightFdCode = uid;
+								rnode.leftFdCode = uid;
+								edits.push(lnode);
+								edits.push(rnode);
+							} else {
+								lnode.rightSdCode = uid;
+								rnode.leftSdCode = uid;
+								edits.push(lnode);
+								edits.push(rnode);
+							}
+							edits.push(this.createLinkModel(model));
+						}
+					}
+					this.$emit('addOrUpdateMapModel', edits);
+				}
+			});
+		},
+		createLinkModel(model) {
+			const link = {
+				_type: 'Link',
+				code: model.code,
+				name: model.name,
+				type: model.type,
+				color: model.color,
+				lp: model.lp,
+				rp: model.rp,
+				lengthFact: model.lengthFact,
+				leftFdCode: model.leftFdCode || '',
+				leftSdCode: model.leftSdCode || '',
+				rightFdCode: model.rightFdCode || '',
+				rightSdCode: model.rightSdCode || ''
+			};
+			return link;
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'Link',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				color: this.editModel.color == '' ? '#4e8de6' : this.editModel.color,
+				leftFdCode: this.editModel.leftFdCode,
+				leftSdCode: this.editModel.leftSdCode,
+				rightFdCode: this.editModel.rightFdCode,
+				rightSdCode: this.editModel.rightSdCode,
+				lengthFact: this.editModel.lengthFact
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
+				var node = null;
+				var _that = this;
+				var updates = [];
+
+				if (selected.leftFdCode) {
+					node = this.findLinkData(selected.leftFdCode);
+					if (node) {
+						if (selected.lp.y === selected.rp.y) {
+							updates.push({ _type: 'Link', code: node.code, rightFdCode: '' });
+						} else {
+							updates.push({ _type: 'Link', code: node.code, rightSdCode: '' });
+						}
+					}
+				}
+				if (selected.leftSdCode) {
+					node = this.findLinkData(selected.leftSdCode);
+					if (node) {
+						if (selected.lp.y === selected.rp.y) {
+							updates.push({ _type: 'Link', code: node.code, rightFdCode: '' });
+						} else {
+							updates.push({ _type: 'Link', code: node.code, rightSdCode: '' });
+						}
+					}
+				}
+				if (selected.rightFdCode) {
+					node = this.findLinkData(selected.rightFdCode);
+					if (node) {
+						if (selected.lp.y === selected.rp.y) {
+							updates.push({ _type: 'Link', code: node.code, leftFdCode: '' });
+						} else {
+							updates.push({ _type: 'Link', code: node.code, leftSdCode: '' });
+						}
+					}
+				}
+				if (selected.rightSdCode) {
+					node = this.findLinkData(selected.rightSdCode);
+					if (node) {
+						if (selected.lp.y === selected.rp.y) {
+							updates.push({ _type: 'Link', code: node.code, leftFdCode: '' });
+						} else {
+							updates.push({ _type: 'Link', code: node.code, leftSdCode: '' });
+						}
+					}
+				}
+
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('addOrUpdateMapModel', updates);
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		},
+		findLinkData(code) {
+			const linkList = this.linkList;
+			if (linkList && linkList.length) {
+				for (var i = 0; i < linkList.length; i++) {
+					if (code === linkList[i].code) {
+						return linkList[i];
+					}
+				}
+			}
+			return null;
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 120px;
+            font-weight: bold;
+            display: block;
+            float: left;
+            margin-right: 7px;
+        }
+    }
+
+</style>

src/views/map/mapdraft/mapedit/mapoperate/signal.vue

@@ -0,0 +1,606 @@
+<template>
+
+  <el-tabs v-model="activeName">
+    <el-tab-pane class="view-control" label="属性" name="first">
+      <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+        <el-form ref="form" :model="editModel" label-width="150px" size="mini" :rules="rules">
+          <el-form-item label="所属设备集中站:" prop="stationCode">
+            <el-select v-model="editModel.stationCode" filterable>
+              <el-option
+                v-for="item in stationList"
+                :key="item.code"
+                :label="item.name + ' (' + item.code+ ')'"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="信号机编码:" prop="code">
+            <el-select v-model="editModel.code" filterable @change="deviceChange">
+              <el-option
+                v-for="item in signalList"
+                :key="item.code"
+                :label="item.code + ' (' + item.name+ ')'"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="信号机名称:" prop="name">
+            <el-input v-model="editModel.name" />
+          </el-form-item>
+          <el-form-item label="信号机唯一名称:" prop="uniqueName">
+            <el-input v-model="editModel.uniqueName" />
+          </el-form-item>
+          <el-form-item label="是否显示信号机名称:" prop="nameShow">
+            <el-checkbox v-model="editModel.nameShow" />
+          </el-form-item>
+          <el-form-item label="灯柱类型:" prop="lampPostType">
+            <el-select v-model="editModel.lampPostType" filterable placeholder="请选择">
+              <el-option
+                v-for="item in SignalLampPostTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="灯位类型:" prop="lampPositionType">
+            <el-select v-model="editModel.lampPositionType" filterable placeholder="请选择">
+              <el-option
+                v-for="item in SignalLampPositionTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="用途类型:" prop="useType">
+            <el-select v-model="editModel.useType" filterable placeholder="请选择">
+              <el-option
+                v-for="item in SignalUseTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="点灯类型:" prop="potLampType">
+            <el-select v-model="editModel.potLampType" filterable placeholder="请选择">
+              <el-option
+                v-for="item in SignalPotLampTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="方向类型:" prop="directionType">
+            <el-select v-model="editModel.directionType" filterable placeholder="请选择">
+              <el-option
+                v-for="item in SignalDirectionTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="信号机位置类型:" prop="positionType">
+            <el-select v-model="editModel.positionType" filterable placeholder="请选择">
+              <el-option
+                v-for="item in SignalPositionTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="LinkCode:" prop="linkCode">
+            <el-select v-model="editModel.linkCode" filterable placeholder="">
+              <el-option
+                v-for="item in linkList"
+                :key="item.code"
+                :label="item.name + ' (' + item.code+ ')'"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="偏移量:" prop="offset">
+            <el-input-number v-model="editModel.offset" :min="0" />米
+          </el-form-item>
+          <el-form-item label="信号机x:" prop="position.x">
+            <el-input-number v-model="editModel.position.x" />px
+          </el-form-item>
+          <el-form-item label="信号机y:" prop="position.y">
+            <el-input-number v-model="editModel.position.y" />px
+          </el-form-item>
+          <el-form-item label="旋转角度:" prop="rotate">
+            <el-input-number v-model="editModel.rotate" :max="90" :min="-90" />度
+          </el-form-item>
+          <el-form-item label="信号机名字偏移量 x:" prop="namePosition.x">
+            <el-input-number v-model="editModel.namePosition.x" />px
+          </el-form-item>
+          <el-form-item label="信号机名字偏移量 y:" prop="namePosition.y">
+            <el-input-number v-model="editModel.namePosition.y" />px
+          </el-form-item>
+          <el-form-item label="是否显示按钮:" prop="buttonShow">
+            <el-checkbox v-model="editModel.buttonShow" />
+          </el-form-item>
+          <el-form-item label="按钮x:" prop="buttonPosition.x">
+            <el-input-number v-model="editModel.buttonPosition.x" />px
+          </el-form-item>
+          <el-form-item label="按钮y:" prop="buttonPosition.y">
+            <el-input-number v-model="editModel.buttonPosition.y" />px
+          </el-form-item>
+          <el-form-item label="是否显示引导信号灯:" prop="guideShow">
+            <el-checkbox v-model="editModel.guideShow" />
+          </el-form-item>
+          <el-form-item label="引导信号x:" prop="guidePosition.x">
+            <el-input-number v-model="editModel.guidePosition.x" />px
+          </el-form-item>
+          <el-form-item label="引导信号y:" prop="guidePosition.y">
+            <el-input-number v-model="editModel.guidePosition.y" />px
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <el-button-group class="map-draft-group">
+        <el-button type="primary" @click="edit">修改</el-button>
+        <el-button type="primary" @click="deleteObj">删除</el-button>
+      </el-button-group>
+    </el-tab-pane>
+    <el-tab-pane class="view-control" label="操作" name="second">
+      <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+        <el-form ref="make" label-width="130px" :model="addModel" size="mini" :rules="mergeRules">
+          <el-form-item label="物理区段名称:" prop="sectionCode">
+            <el-select v-model="addModel.sectionCode" filterable>
+              <el-option
+                v-for="item in PhysicalSectionList"
+                :key="item.code"
+                :label="item.name + ' (' + item.code+ ')'"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="形式方向:" prop="directionType">
+            <el-select v-model="addModel.directionType" filterable>
+              <el-option
+                v-for="item in SignalDirectionTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="左右位置:" prop="leftOrRight">
+            <el-select v-model="addModel.leftOrRight" filterable>
+              <el-option
+                v-for="item in SignalLeftOrRightList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="上下位置:" prop="positionType">
+            <el-select v-model="addModel.positionType" filterable>
+              <el-option
+                v-for="item in SignalPositionTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <el-button-group class="map-draft-group">
+        <el-button type="primary" @click="create">创建</el-button>
+      </el-button-group>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import JTriangle from '@/jmap/utils/JTriangle';
+
+export default {
+	name: 'SignalDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			SignalLeftOrRightList: [],
+			SignalPotLampTypeList: [],
+			/*
+                    { code: '01', name: '物理点灯' },
+                    { code: '02', name: '逻辑电灯' }
+                */
+			SignalLampPostTypeList: [],
+			/*
+                    { code: '01', name: '矮柱' },
+                    { code: '02', name: '高柱' }
+                */
+			SignalLampPositionTypeList: [],
+			/*
+                    { code: '01', name: '单灯' },
+                    { code: '02', name: '双灯' },
+                    { code: '03', name: '三灯' },
+                    { code: '04', name: '四灯' },
+                    { code: '05', name: '五灯' }
+                */
+			SignalDirectionTypeList: [],
+			/*
+                    { code: '01', name: '向左行使' },
+                    { code: '02', name: '向右行驶' }
+                */
+			SignalPositionTypeList: [],
+			/*
+                    { code: '01', name: '区段上边' },
+                    { code: '02', name: '区段下边' }
+                */
+			SignalUseTypeList: [],
+			/*
+                    { code: '01', name: '进站信号机' },
+                    { code: '02', name: '出站信号机' },
+                    { code: '03', name: '通过信号机' },
+                    { code: '04', name: '防护信号机' },
+                    { code: '05', name: '调车信号机' },
+                    { code: '06', name: '阻挡信号机' },
+                    { code: '07', name: '预告信号机' },
+                    { code: '08', name: '复位信号机' }
+                */
+			// PhysicalSectionList: [],
+			failTypes: [
+				{ code: '00', name: '正常' },
+				{ code: '01', name: '灯丝报警' }
+			],
+			editModel: {
+				code: '',
+				name: '',
+				uniqueName: '',
+				nameShow: false,
+				lampPostType: '',
+				lampPositionType: '',
+				potLampType: '01',
+				directionType: '',
+				positionType: '',
+				namePosition: {
+					x: 0,
+					y: 0
+				},
+				useType: '',
+				stationCode: '',
+				linkCode: '',
+				offset: 0,
+				rotate: 0,
+				guideShow: false,
+				buttonShow: false,
+				position: {
+					x: 0,
+					y: 0
+				},
+				buttonPosition: {
+					x: 0,
+					y: 0
+				},
+				guidePosition: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				sectionCode: '',
+				directionType: '01',
+				leftOrRight: '0',
+				positionType: '01'
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择设备', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入信号灯名称', trigger: 'blur' }
+				],
+				uniqueName: [
+					{ required: true, message: '请输入信号机唯一名称', trigger: 'blur' }
+				],
+				offset: [
+					{ required: true, message: '请输入偏移量', trigger: 'blur' }
+				],
+				stationCode: [
+					{ required: true, message: '请输入设备集中站', trigger: 'change' }
+				],
+				// rotate: [
+				//     { required: true, message: '请输入旋转角度', trigger: 'blur' }
+				// ],
+				'position.x': [
+					{ required: true, message: '信号机x', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '信号机y', trigger: 'blur' }
+				],
+				// 'namePosition.x': [
+				//     { required: true, message: '信号机名字偏移量x', trigger: 'blur' }
+				// ],
+				// 'namePosition.y': [
+				//     { required: true, message: '信号机名字偏移量y', trigger: 'blur' }
+				// ],
+				'buttonPosition.x': [
+					{ required: true, message: '请输入按钮x', trigger: 'blur' }
+				],
+				'buttonPosition.y': [
+					{ required: true, message: '请输入按钮y', trigger: 'blur' }
+				],
+				'guidePosition.x': [
+					{ required: true, message: '请输入引导信号x', trigger: 'blur' }
+				],
+				'guidePosition.y': [
+					{ required: true, message: '请输入引导信号y', trigger: 'blur' }
+				]
+			},
+			mergeRules: {
+				sectionCode: [
+					{ required: true, message: '请选择物理区段名称', trigger: 'change' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'linkList',
+			'signalList',
+			'sectionList',
+			'stationList',
+			'skinStyle'
+		]),
+		PhysicalSectionList() {
+			let list = [];
+			if (this.sectionList && this.sectionList.length) {
+				list = this.sectionList.filter(elem => { return elem.type === '01'; });
+			}
+			return list;
+		}
+	},
+	watch: {
+		// 'sectionList.length': function () {
+		//     this.PhysicalSectionList = this.sectionList.filter(elem => { return elem.type === '01'; })
+		// },
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+		this.SignalLeftOrRightList = this.$ConstSelect.SignalLeftOrRightList;
+
+		this.$Dictionary.signalPotLampType().then(list => {
+			this.SignalPotLampTypeList = list;
+		});
+
+		this.$Dictionary.signalLampPostType().then(list => {
+			this.SignalLampPostTypeList = list;
+		});
+
+		this.$Dictionary.signalLampPositionType().then(list => {
+			this.SignalLampPositionTypeList = list;
+		});
+
+		this.$Dictionary.signalDirectionType().then(list => {
+			this.SignalDirectionTypeList = list;
+		});
+
+		this.$Dictionary.signalPositionType().then(list => {
+			this.SignalPositionTypeList = list;
+		});
+
+		this.$Dictionary.signalUseType().then(list => {
+			this.SignalUseTypeList = list;
+		});
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.name = selected.name;
+				this.editModel.uniqueName = selected.uniqueName;
+				this.editModel.nameShow = selected.nameShow;
+				this.editModel.lampPostType = selected.lampPostType;
+				this.editModel.lampPositionType = selected.lampPositionType;
+				this.editModel.potLampType = selected.potLampType || '01';
+				this.editModel.directionType = selected.directionType;
+				this.editModel.positionType = selected.positionType;
+				this.editModel.useType = selected.useType;
+				this.editModel.stationCode = selected.stationCode;
+				this.editModel.linkCode = selected.linkCode;
+				this.editModel.offset = selected.offset;
+				this.editModel.rotate = selected.rotate || 0; // 角度
+				this.editModel.guideShow = selected.guideShow;
+				this.editModel.buttonShow = selected.buttonShow;
+				if (selected.hasOwnProperty('position')) {
+					this.editModel.position = {
+						x: selected.position.x,
+						y: selected.position.y
+					};
+				}
+				if (selected.hasOwnProperty('namePosition')) {
+					this.editModel.namePosition = {
+						x: selected.namePosition.x,
+						y: selected.namePosition.y
+					};
+				}
+				if (selected.hasOwnProperty('buttonPosition')) {
+					this.editModel.buttonPosition = {
+						x: selected.buttonPosition.x,
+						y: selected.buttonPosition.y
+					};
+				}
+				if (selected.hasOwnProperty('guidePosition')) {
+					this.editModel.guidePosition = {
+						x: selected.guidePosition.x,
+						y: selected.guidePosition.y
+					};
+				}
+				this.activeName = 'first';
+			} else if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
+				// 获取逻辑区段关联的物理区段
+				if (selected.type === '02') {
+					const section = this.sectionList.find(stn => stn.parentCode === selected.code);
+					this.addModel.sectionCode = section ? section.code : '';
+				} else {
+					this.addModel.sectionCode = selected.code;
+				}
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		hover(field) {
+			this.field = field === this.field ? '' : field;
+		},
+		create() {
+			this.$refs['make'].validate((valid) => {
+				if (valid) {
+					if (this.addModel.sectionCode) {
+						const uid = getUID('Singal');
+						var model = {
+							_type: 'Signal',
+							code: uid,
+							positionType: this.addModel.positionType,
+							directionType: this.addModel.directionType,
+							nameShow: true,
+							namePosition: { x: 0, y: 0 },
+							buttonShow: true,
+							useType: '01',
+							potLampType: '01',
+							lampPostType: '01',
+							lampPositionType: '01',
+							guideShow: false
+						};
+						this.sectionList.forEach(elem => {
+							if (elem.code === this.addModel.sectionCode) {
+								model.name = 'Signal_' + elem.name.replace('Section_', '');
+								model.linkCode = elem.linkCode;
+								model.namePosition = { x: 0, y: 0 };
+								if (this.addModel.leftOrRight === '0') {
+									const l = 0;
+									const beg = elem.points[l];
+									const end = elem.points[l + 1];
+									const traingle = new JTriangle(beg, end);
+									model.rotate = Math.floor(traingle.getAngle());
+									model.position = { x: elem.points[l].x, y: elem.points[l].y };
+									model.guidePosition = { x: elem.points[l].x, y: elem.points[l].y };
+									model.buttonPosition = { x: elem.points[l].x, y: elem.points[l].y };
+									model.offset = elem.offsetLeft;
+								} else {
+									const r = elem.points.length - 1;
+									const beg = elem.points[r - 1];
+									const end = elem.points[r];
+									const traingle = new JTriangle(beg, end);
+									model.rotate = Math.floor(traingle.getAngle());
+									model.position = { x: elem.points[r].x, y: elem.points[r].y };
+									model.guidePosition = { x: elem.points[r].x, y: elem.points[r].y };
+									model.buttonPosition = { x: elem.points[r].x, y: elem.points[r].y };
+									model.offset = elem.offsetRight;
+								}
+							}
+						});
+
+						this.$emit('addOrUpdateMapModel', model);
+					} else {
+						this.$messageBox('选择的区段为空');
+					}
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'Signal',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				uniqueName: this.editModel.uniqueName,
+				useType: this.editModel.useType,
+				lampPostType: this.editModel.lampPostType,
+				lampPositionType: this.editModel.lampPositionType,
+				potLampType: this.editModel.potLampType,
+				positionType: this.editModel.positionType,
+				directionType: this.editModel.directionType,
+				nameShow: this.editModel.nameShow,
+				buttonShow: this.editModel.buttonShow,
+				guideShow: this.editModel.guideShow,
+				offset: this.editModel.offset,
+				rotate: this.editModel.rotate,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				},
+				namePosition: {
+					x: this.editModel.namePosition.x,
+					y: this.editModel.namePosition.y
+				},
+				guidePosition: {
+					x: this.editModel.guidePosition.x,
+					y: this.editModel.guidePosition.y
+				},
+				buttonPosition: {
+					x: this.editModel.buttonPosition.x,
+					y: this.editModel.buttonPosition.y
+				},
+				stationCode: this.editModel.stationCode,
+				linkCode: this.editModel.linkCode
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type === 'Signal') {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+</style>

src/views/map/mapdraft/mapedit/mapoperate/station.vue

@@ -0,0 +1,345 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="150px" size="mini" :rules="rules">
+            <el-form-item label="所属联锁站编码:" prop="concentrateStationCode">
+              <el-select v-model="editModel.concentrateStationCode">
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="车站编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="所属zc区域编码:" prop="zcCode">
+              <el-select v-model="editModel.zcCode" filterable>
+                <el-option
+                  v-for="item in zcList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name + ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否集中站:" prop="centralized">
+              <el-checkbox v-model="editModel.centralized" />
+            </el-form-item>
+            <el-form-item label="车站名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="真实名称:" prop="runPlanName">
+              <el-input v-model="editModel.runPlanName" />
+            </el-form-item>
+            <el-form-item label="是否显示:" prop="visible">
+              <el-checkbox v-model="editModel.visible" />
+            </el-form-item>
+            <el-form-item label="车站字体:" prop="nameFont">
+              <el-font v-model="editModel.nameFont" placeholder="车站字体" />
+            </el-form-item>
+            <el-form-item label="车站字体颜色:" prop="nameFontColor">
+              <el-color-picker v-model="editModel.nameFontColor" show-alpha :predefine="skins" />
+            </el-form-item>
+            <el-form-item label="是否显示公里标名称:" prop="kmPostShow">
+              <el-checkbox v-model="editModel.kmPostShow" />
+            </el-form-item>
+            <el-form-item label="公里标距离:" prop="kmRange">
+              <el-input-number v-model="editModel.kmRange" :min="0" />米
+            </el-form-item>
+            <el-form-item label="公里标名称:" prop="kmPost">
+              <el-input v-model="editModel.kmPost" />
+            </el-form-item>
+            <el-form-item label="公里标字体:" prop="kmPostFont">
+              <el-font v-model="editModel.kmPostFont" placeholder="公里标字体" />
+            </el-form-item>
+            <el-form-item label="公里标字体颜色:" prop="kmPostFontColor">
+              <el-color-picker v-model="editModel.kmPostFontColor" show-alpha :predefine="skins" />
+            </el-form-item>
+            <el-form-item label="x坐标:" prop="position.x">
+              <el-input-number v-model="editModel.position.x" />px
+            </el-form-item>
+            <el-form-item label="y坐标:" prop="position.y">
+              <el-input-number v-model="editModel.position.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="140px" :model="addModel" size="mini" :rules="mergeRules">
+            <el-form-item label="物理区段名称:" prop="sectionCode">
+              <el-select v-model="addModel.sectionCode" filterable>
+                <el-option
+                  v-for="item in PhysicalSectionList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import ElFont from '@/views/components/font/index';
+
+export default {
+	name: 'StationDraft',
+	components: {
+		ElFont
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			editModel: {
+				centralized: false,
+				concentrateStationCode: '',
+				code: '',
+				zcCode: '',
+				visible: true,
+				runPlanName: '',
+				name: '',
+				nameFont: '',
+				nameFontColor: '#FFFFFF',
+				kmPostShow: '',
+				kmRange: 0,
+				kmPost: '',
+				kmPostFont: '',
+				kmPostFontColor: '#FFFFFF',
+				isShowControlMode: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				sectionCode: ''
+			},
+			skins: [],
+			rules: {
+				code: [
+					{ required: true, message: '请选择设备', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入车站名称', trigger: 'blur' }
+				],
+				kmRange: [
+					{ required: true, message: '请输入公里标距离', trigger: 'blur' }
+				],
+				kmPost: [
+					{ required: true, message: '请输入公里标名称', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标', trigger: 'blur' }
+				]
+			},
+			mergeRules: {
+				sectionCode: [
+					{ required: true, message: '请选择物理区段名称', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'stationList',
+			'sectionList',
+			'zcList',
+			'skinStyle'
+		]),
+		PhysicalSectionList() {
+			let list = [];
+			if (this.sectionList && this.sectionList.length) {
+				list = this.sectionList.filter(elem => { return elem.type === '01'; });
+			}
+			return list;
+		}
+	},
+	watch: {
+		selected: function (val) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				this.editModel.centralized = selected.centralized;
+				this.editModel.concentrateStationCode = selected.concentrateStationCode;
+				this.editModel.code = selected.code;
+				this.editModel.zcCode = selected.zcCode;
+				this.editModel.visible = selected.visible || false;
+				this.editModel.runPlanName = selected.runPlanName || '';
+				this.editModel.name = selected.name;
+				this.editModel.nameFont = selected.nameFont;
+				this.editModel.nameFontColor = selected.nameFontColor;
+				this.editModel.kmPostShow = selected.kmPostShow;
+				this.editModel.kmRange = selected.kmRange;
+				this.editModel.kmPost = selected.kmPost;
+				this.editModel.kmPostFont = selected.kmPostFont;
+				this.editModel.kmPostFontColor = selected.kmPostFontColor;
+				this.editModel.isShowControlMode = selected.isShowControlMode;
+				if (selected.hasOwnProperty('position')) {
+					this.editModel.position = {
+						x: selected.position.x,
+						y: selected.position.y
+					};
+				}
+				this.activeName = 'first';
+			} else if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
+				// 获取逻辑区段关联的物理区段
+				if (selected.type !== '01') {
+					const section = this.sectionList.find(stn => stn.parentCode === selected.code);
+					this.addModel.sectionCode = section ? section.code : '';
+				} else {
+					this.addModel.sectionCode = selected.code;
+				}
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs['make'].validate((valid) => {
+				if (valid) {
+					if (this.addModel.sectionCode) {
+						const uid = getUID('Station');
+						const model = {
+							_type: 'Station',
+							code: uid,
+							zcCode: '',
+							runPlanName: '',
+							visible: true,
+							nameShow: true,
+							nameFont: '14px consolas',
+							nameFontColor: '#FFFFFF',
+							kmPost: '1000km~2000km',
+							kmPostShow: true,
+							kmPostFont: '8px consolas',
+							kmPostFontColor: '#FFFFFF',
+							centralized: false,
+							concentrateStationCode: ''
+						};
+						this.sectionList.forEach(elem => {
+							if (elem.code === this.addModel.sectionCode) {
+								const l = 0;
+								const r = elem.points.length - 1;
+								model.name = 'Station_' + elem.name.replace('Station_', '');
+								model.position = {
+									x: elem.points[l].x + (elem.points[r].x - elem.points[l].x) / 2,
+									y: elem.points[l].y
+								};
+							}
+						});
+
+						this.$emit('addOrUpdateMapModel', model);
+					}
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			var model = {
+				_type: 'Station',
+				code: this.editModel.code,
+				visible: this.editModel.visible,
+				runPlanName: this.editModel.runPlanName,
+				name: this.editModel.name,
+				zcCode: this.editModel.zcCode,
+				nameFont: this.editModel.nameFont,
+				nameFontColor: this.editModel.nameFontColor,
+				kmPostShow: this.editModel.kmPostShow,
+				kmRange: this.editModel.kmRange,
+				kmPost: this.editModel.kmPost,
+				kmPostFontColor: this.editModel.kmPostFontColor,
+				kmPostFont: this.editModel.kmPostFont,
+				isShowControlMode: this.editModel.isShowControlMode,
+				centralized: this.editModel.centralized,
+				concentrateStationCode: this.editModel.concentrateStationCode,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/map/mapdraft/mapedit/mapoperate/stationcontrol.vue

@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="140px" size="mini" :rules="rules">
+            <el-form-item label="所属设备集中站:" prop="stationCode">
+              <el-select v-model="editModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="控制模式编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in stationControlList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="控制模式名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="中控内容:" prop="zokContent">
+              <el-input v-model="editModel.zokContent" label="Context" />
+            </el-form-item>
+            <el-form-item label="站控内容:" prop="zakContent">
+              <el-input v-model="editModel.zakContent" label="Context" />
+            </el-form-item>
+            <el-form-item label="总报警控制内容:" prop="jjzkContent">
+              <el-input v-model="editModel.zbjkContent" label="Context" />
+            </el-form-item>
+            <el-form-item label="紧急站控内容:" prop="jjzkContent">
+              <el-input v-model="editModel.jjzkContent" label="Context" />
+            </el-form-item>
+            <el-form-item label="站中控内容:" prop="zzkContent">
+              <el-input v-model="editModel.zzkContent" label="Context" />
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="editModel.position.x" />px
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="editModel.position.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" :model="addModel" label-width="120px" size="mini" :rules="makeRules">
+            <el-form-item label="车站名称:" prop="stationCode">
+              <el-select v-model="addModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'StationControlDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			editModel: {
+				code: '',
+				name: '',
+				position: {
+					x: 0,
+					y: 0
+				},
+				stationCode: '',
+				zokContent: '',
+				zakContent: '',
+				jjzkContent: '',
+				zbjkContent: '',
+				zzkContent: ''
+			},
+			addModel: {
+				stationCode: ''
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择设备', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择所属车站', trigger: 'change' }
+				],
+				zokContent: [
+					{ required: true, message: '请输入中控内容', trigger: 'blur' }
+				],
+				zakContent: [
+					{ required: true, message: '请输入站控内容', trigger: 'blur' }
+				],
+				jjzkContent: [
+					{ required: true, message: '请输入紧急站控内容', trigger: 'blur' }
+				],
+				zzkContent: [
+					{ required: true, message: '请输入站中控内容', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入坐标x', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入坐标y', trigger: 'blur' }
+				]
+			},
+			makeRules: {
+				stationCode: [
+					{ required: true, message: '请选择车站名称', trigger: 'change' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'stationList',
+			'stationControlList',
+			'skinStyle'
+		])
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
+				this.editModel.name = selected.name;
+				this.editModel.code = selected.code;
+				this.editModel.zokContent = selected.zokContent;
+				this.editModel.zakContent = selected.zakContent;
+				this.editModel.jjzkContent = selected.jjzkContent;
+				this.editModel.zzkContent = selected.zzkContent;
+				this.editModel.stationCode = selected.stationCode;
+				this.editModel.zbjkContent = selected.zbjkContent;
+				if (selected.hasOwnProperty('position')) {
+					this.editModel.position = {
+						x: selected.position.x,
+						y: selected.position.y
+					};
+				}
+				this.activeName = 'first';
+			} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				this.addModel.stationCode = selected.code;
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs['make'].validate((valid) => {
+				if (valid) {
+					if (this.addModel.stationCode) {
+						const uid = getUID('StationControl');
+						const model = {
+							_type: 'StationControl',
+							code: uid,
+							zokContent: '中控',
+							zbjkContent: '总报警',
+							zakContent: '站控',
+							jjzkContent: '紧急站控',
+							zzkContent: '站中控按钮'
+						};
+						this.stationList.forEach(elem => {
+							if (elem.code === this.addModel.stationCode) {
+								model.name = 'StationControl_' + elem.name.replace('Station_', '');
+								model.position = { x: elem.position.x, y: elem.position.y };
+								model.stationCode = elem.code;
+							}
+						});
+
+						this.$emit('addOrUpdateMapModel', model);
+					} else {
+						this.$messageBox('选择的车站为空');
+					}
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'StationControl',
+				code: this.editModel.code,
+				zokContent: this.editModel.zokContent,
+				zbjkContent: this.editModel.zbjkContent,
+				zakContent: this.editModel.zakContent,
+				jjzkContent: this.editModel.jjzkContent,
+				zzkContent: this.editModel.zzkContent,
+				stationCode: this.editModel.stationCode,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'StationControl'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', _that.selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/map/mapdraft/mapedit/mapoperate/stationstand.vue

@@ -0,0 +1,396 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" :rules="editRules" label-width="130px" size="mini">
+            <el-form-item label="所属设备集中站:" prop="deviceStationCode">
+              <el-select v-model="editModel.deviceStationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="站台编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in stationStandList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="站台名称:" prop="name" disabled="true">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="所属车站:" prop="stationCode">
+              <el-select v-model="editModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <!-- <el-form-item label="关联Link:" prop="linkCode">
+                            <el-select v-model="editModel.linkCode" filterable>
+                                <el-option v-for="item in linkList" :key="item.code"
+                                    :label="item.name + ' (' + item.code+ ')'" :value="item.code"></el-option>
+                            </el-select>
+                        </el-form-item> -->
+            <!-- <el-form-item label="关联停车点:" prop="stopPointCode">
+                            <el-select v-model="editModel.stopPointCode" filterable>
+                                <el-option v-for="item in stopPointList" :key="item.code"
+                                    :label="item.name + ' (' + item.code+ ')'" :value="item.code"></el-option>
+                            </el-select>
+                        </el-form-item> -->
+            <el-form-item label="上下行方向:" prop="direction">
+              <el-select v-model="editModel.direction" filterable>
+                <el-option
+                  v-for="item in RunDirectionTypeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否显示:" prop="visible">
+              <el-checkbox v-model="editModel.visible" />
+            </el-form-item>
+            <el-form-item label="是否显示名称:" prop="nameShow">
+              <el-checkbox v-model="editModel.nameShow" />
+            </el-form-item>
+            <el-form-item label="站台方向:" prop="doorLocationType">
+              <el-select v-model="editModel.doorLocationType" filterable placeholder="请选择">
+                <el-option
+                  v-for="item in DoorLocationTypeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否显示屏蔽门:" prop="hasDoor">
+              <el-checkbox v-model="editModel.hasDoor" />
+            </el-form-item>
+            <el-form-item label="宽度 w:" prop="width">
+              <el-input-number v-model="editModel.width" :min="0" :max="2000" />px
+            </el-form-item>
+            <el-form-item label="高度 h:" prop="height">
+              <el-input-number v-model="editModel.height" :min="0" :max="2000" />px
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="editModel.position.x" />px
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="editModel.position.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="140px" :model="addModel" :rules="createRules" size="mini">
+            <el-form-item label="选择车站名称" prop="stationCode">
+              <el-select v-model="addModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="所属设备集中站:" prop="deviceStationCode">
+              <el-select v-model="addModel.deviceStationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="站台方向:" prop="doorLocationType">
+              <el-select v-model="addModel.doorLocationType" filterable placeholder="请选择">
+                <el-option
+                  v-for="item in DoorLocationTypeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否显示屏蔽门:" prop="hasDoor">
+              <el-checkbox v-model="addModel.hasDoor" />
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'StationStandDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			DoorLocationTypeList: [],
+			RunDirectionTypeList: [],
+			/*
+                    { code: '01', name: '朝下' },
+                    { code: '02', name: '朝上' }
+                */
+			editModel: {
+				code: '',
+				name: '',
+				nameShow: '',
+				doorLocationType: '',
+				deviceStationCode: '',
+				hasDoor: false,
+				width: 0,
+				height: 0,
+				// linkCode: '',
+				stationCode: '',
+				position: {
+					x: 0,
+					y: 0
+				},
+				visible: true,
+				direction: ''
+				// stopPointCode: '',
+			},
+			addModel: {
+				stationCode: '',
+				doorLocationType: '01',
+				deviceStationCode: '',
+				hasDoor: true
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			// 'linkList',
+			'stationList',
+			'stationStandList',
+			// 'stopPointList',
+			'skinStyle'
+		]),
+		editRules: function () {
+			return {
+				code: [
+					{ required: true, message: '请重新选择设备', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择关联车站', trigger: 'change' }
+				],
+				// stopPointCode: [
+				//     { required: true, message: '请选择关联停车点', trigger: 'change' }
+				// ],
+				name: [
+					{ required: true, message: '请输入计数器名称', trigger: 'change' }
+				],
+				doorLocationType: [
+					{ required: true, message: '请选择站台方向', trigger: 'change' }
+				],
+				deviceStationCode: [
+					{ required: true, message: '请选择所属设备集中站', trigger: 'change' }
+				],
+				direction: [
+					{ required: true, message: '请选择上下行方向', trigger: 'change' }
+				],
+				width: [
+					{ required: true, message: '请输入车站宽度', trigger: 'change' }
+				],
+				height: [
+					{ required: true, message: '请输入车站高度', trigger: 'change' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标', trigger: 'change' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标', trigger: 'change' }
+				]
+
+			};
+		},
+		createRules: function () {
+			return {
+				stationCode: [
+					{ required: true, message: '请选择关联车站', trigger: 'change' }
+				],
+				doorLocationType: [
+					{ required: true, message: '请选择站台方向', trigger: 'change' }
+				],
+				deviceStationCode: [
+					{ required: true, message: '请选择所属设备集中站', trigger: 'change' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+		this.$Dictionary.doorLocationType().then(list => {
+			this.DoorLocationTypeList = list;
+		});
+		this.$Dictionary.runDirectionType().then(list => {
+			this.RunDirectionTypeList = list;
+		});
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
+				this.editModel.name = selected.name;
+				this.editModel.code = selected.code;
+				this.editModel.isShowName = selected.isShowName;
+				this.editModel.width = selected.width;
+				this.editModel.height = selected.height;
+				this.editModel.hasDoor = selected.hasDoor;
+				// this.editModel.linkCode = selected.linkCode;
+				this.editModel.stationCode = selected.stationCode;
+				// this.editModel.stopPointCode = selected.stopPointCode;
+				this.editModel.doorLocationType = selected.doorLocationType;
+				this.editModel.deviceStationCode = selected.deviceStationCode;
+				if (selected.hasOwnProperty('position')) {
+					this.editModel.position = {
+						x: selected.position.x,
+						y: selected.position.y
+					};
+				}
+				this.editModel.visible = selected.visible;
+				this.editModel.direction = selected.direction;
+				this.activeName = 'first';
+			} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				this.addModel.stationCode = selected.code;
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('StationStand');
+					const model = {
+						_type: 'StationStand',
+						code: uid,
+						// linkCode: '0',
+						width: 40,
+						height: 20,
+						doorLocationType: this.addModel.doorLocationType,
+						deviceStationCode: this.addModel.deviceStationCode,
+						// stopPointCode: '',
+						visible: true,
+						direction: '01',
+						hasDoor: this.addModel.hasDoor
+					};
+					this.stationList.forEach(elem => {
+						if (elem.code === this.addModel.stationCode) {
+							model.name = 'StationStand_' + elem.name.replace('Station_', '');
+							model.position = { x: elem.position.x, y: elem.position.y };
+							model.stationCode = elem.code;
+						}
+					});
+
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'StationStand',
+				code: this.editModel.code,
+				width: this.editModel.width,
+				height: this.editModel.height,
+				doorLocationType: this.editModel.doorLocationType,
+				deviceStationCode: this.editModel.deviceStationCode,
+				hasDoor: this.editModel.hasDoor,
+				name: this.editModel.name,
+				// linkCode: this.editModel.linkCode,
+				stationCode: this.editModel.stationCode,
+				// stopPointCode: this.editModel.stopPointCode,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				},
+				visible: this.editModel.visible,
+				direction: this.editModel.direction
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'StationStand'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/map/mapdraft/mapedit/mapoperate/stoppoint.vue

@@ -0,0 +1,350 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" :rules="editRules" label-width="150px" size="mini">
+            <el-form-item label="停车点编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in stopPointList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="停车点名称:" prop="name" disabled="true">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="所属车站:" prop="stationCode">
+              <el-select v-model="editModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否备用计划停车点:" prop="isBackupPlan">
+              <el-checkbox v-model="editModel.isBackupPlan" />
+            </el-form-item>
+            <el-form-item label="是否首选折返点:" prop="isPrimaryReentry">
+              <el-checkbox v-model="editModel.isPrimaryReentry" />
+            </el-form-item>
+            <el-form-item label="关联Link:" prop="linkCode">
+              <el-select v-model="editModel.linkCode" filterable>
+                <el-option
+                  v-for="item in linkList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="偏移量:" prop="offset">
+              <el-input-number v-model="editModel.offset" placeholder="米" :min="0" />米
+            </el-form-item>
+            <el-form-item label="是否折返点:" prop="isTurningPoint">
+              <el-checkbox v-model="editModel.isTurningPoint" />
+            </el-form-item>
+            <el-form-item v-if="editModel.isTurningPoint" label="目的地码:" prop="destCode">
+              <el-input v-model="editModel.destCode" />
+            </el-form-item>
+            <el-form-item v-if="editModel.isTurningPoint" label="目的地码是否显示:" prop="destCodeShow">
+              <el-checkbox v-model="editModel.destCodeShow" />
+            </el-form-item>
+            <div v-if="editModel.isTurningPoint" class="coordinate">
+              <span class="title">目的码名称偏移量:</span>
+              <el-form-item
+                label="x:"
+                prop="destCodePosition.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.destCodePosition.x" label="x坐标" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="destCodePosition.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.destCodePosition.y" label="y坐标" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="120px" :model="addModel" :rules="createRules" size="mini">
+            <el-form-item label="Link名称:" prop="linkCode">
+              <el-select v-model="addModel.linkCode" filterable>
+                <el-option
+                  v-for="item in linkList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="所属车站:" prop="stationCode">
+              <el-select v-model="addModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="偏移量:" prop="offset">
+              <el-input-number v-model="addModel.offset" :min="0" />米
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'StopPointDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			editModel: {
+				code: '',
+				name: '',
+				linkCode: '',
+				stationCode: '',
+				offset: '',
+				isTurningPoint: false,
+				destCode: '',
+				destCodeShow: true,
+				destCodePosition: {
+					x: '',
+					y: ''
+				},
+				isBackupPlan: false,
+				isPrimaryReentry: false
+			},
+			addModel: {
+				name: '', // 名称
+				linkCode: '', // 关联link编号
+				stationCode: '', // 关联站台编号
+				offset: 0 // 偏移量，单位米
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'linkList',
+			'stationList',
+			'stopPointList',
+			'skinStyle'
+		]),
+		editRules: function () {
+			return {
+				code: [
+					{ required: true, message: '请重新选择设备', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入计数器名称', trigger: 'change' }
+				],
+				linkCode: [
+					{ required: true, message: '请选择关联Link', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择关联车站', trigger: 'change' }
+				]
+			};
+		},
+		createRules: function () {
+			return {
+				linkCode: [
+					{ required: true, message: '请选择关联Link', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择关联车站', trigger: 'change' }
+				],
+				offset: [
+					{ required: true, message: '请输入偏移量', trigger: 'change' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+		this.$Dictionary.doorLocationType().then(list => {
+			this.DoorLocationTypeList = list;
+		});
+		this.$Dictionary.runDirectionType().then(list => {
+			this.RunDirectionTypeList = list;
+		});
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			if (selected && selected._type.toUpperCase() === 'StopPoint'.toUpperCase()) {
+				this.$refs.form.resetFields();
+				this.$refs.make.resetFields();
+				this.editModel.code = selected.code;
+				this.editModel.name = selected.name;
+				this.editModel.linkCode = selected.linkCode;
+				this.editModel.stationCode = selected.stationCode;
+				this.editModel.offset = selected.offset;
+				this.editModel.isTurningPoint = selected.isTurningPoint;
+				this.editModel.destCode = selected.destCode;
+				this.editModel.destCodeShow = selected.destCodeShow || true;
+				this.editModel.isBackupPlan = selected.isBackupPlan || false;
+				this.editModel.isPrimaryReentry = selected.isPrimaryReentry || false;
+				this.editModel.destCodePosition.x = selected.destCodePosition.x;
+				this.editModel.destCodePosition.y = selected.destCodePosition.y;
+				this.activeName = 'first';
+			} else if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
+				this.addModel.linkCode = selected.code;
+				this.activeName = 'second';
+			} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				this.addModel.stationCode = selected.code;
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('StopPoint');
+					const model = {
+						_type: 'StopPoint',
+						code: uid,
+						stationCode: this.addModel.stationCode,
+						offset: this.addModel.offset,
+						isTurningPoint: false,
+						isBackupPlan: false,
+						isPrimaryReentry: false,
+						destCodePosition: {
+							x: 0,
+							y: 0
+						}
+					};
+					this.linkList.forEach(elem => {
+						if (elem.code === this.addModel.linkCode) {
+							model.name = 'StopPoint_' + elem.name.replace('Link_', '');
+							model.linkCode = elem.code;
+						}
+					});
+
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'StopPoint',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				linkCode: this.editModel.linkCode,
+				stationCode: this.editModel.stationCode,
+				offset: this.editModel.offset,
+				isTurningPoint: this.editModel.isTurningPoint,
+				destCode: this.editModel.destCode,
+				destCodeShow: this.editModel.destCodeShow,
+				destCodePosition: {
+					x: this.editModel.destCodePosition.x,
+					y: this.editModel.destCodePosition.y
+				},
+				isBackupPlan: this.editModel.isBackupPlan,
+				isPrimaryReentry: this.editModel.isPrimaryReentry
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'StopPoint'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 140px;
+            font-weight: bold;
+            display: block;
+            float: left;
+        }
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/switch.vue

@@ -0,0 +1,450 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="170px" size="mini" :rules="rules">
+            <el-form-item label="所属设备集中站:" prop="stationCode">
+              <el-select v-model="editModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="道岔编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in switchList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="道岔名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="是否显示道岔名称:" prop="nameShow">
+              <el-checkbox v-model="editModel.nameShow" />
+            </el-form-item>
+            <el-form-item label="道岔名称x偏移量:" prop="namePoint.x">
+              <el-input-number v-model="editModel.namePoint.x" />px
+            </el-form-item>
+            <el-form-item label="道岔名称y偏移量:" prop="namePoint.y">
+              <el-input-number v-model="editModel.namePoint.y" />px
+            </el-form-item>
+            <el-form-item label="道岔时间:" prop="turnTime">
+              <el-input-number v-model="editModel.turnTime" :min="0" :max="1000" />s
+            </el-form-item>
+            <el-form-item label="是否显示道岔时间:" prop="timeoutShow">
+              <el-checkbox v-model="editModel.timeoutShow" />
+            </el-form-item>
+            <el-form-item label="关联的A Section Code:" prop="sectionACode">
+              <el-select v-model="editModel.sectionACode" filterable>
+                <el-option
+                  v-for="item in sectionList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="关联的B Section Code:" prop="sectionBCode">
+              <el-select v-model="editModel.sectionBCode" filterable>
+                <el-option
+                  v-for="item in sectionList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="关联的C Section Code:" prop="sectionCCode">
+              <el-select v-model="editModel.sectionCCode" filterable>
+                <el-option
+                  v-for="item in sectionList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="时间x坐标偏移量:" prop="tp.x">
+              <el-input-number v-model="editModel.tp.x" />px
+            </el-form-item>
+            <el-form-item label="时间y坐标偏移量:" prop="tp.y">
+              <el-input-number v-model="editModel.tp.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make">
+            <el-form-item size="mini">
+              <el-transfer
+                v-model="sectionsCollection"
+                filterable
+                :filter-method="filterSections"
+                filter-placeholder="请输入Section名称"
+                :data="datasCollection"
+                :titles="['Section集合', '选择Section']"
+              />
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'SwitchDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			sectionsCollection: [],
+			activeName: 'first',
+			editModel: {
+				code: '',
+				name: '',
+				turnTime: 0,
+				nameShow: false,
+				namePoint: { x: 0, y: 0 },
+				stationCode: '',
+				timeoutShow: false,
+				sectionACode: '',
+				sectionBCode: '',
+				sectionCCode: '',
+				tp: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择设备', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入道岔名称', trigger: 'blur' }
+				],
+				'namePoint.x': [
+					{ required: true, message: '请输入道岔名称坐标x', trigger: 'blur' }
+				],
+				'namePoint.y': [
+					{ required: true, message: '请输入道岔名称坐标y', trigger: 'blur' }
+				],
+				stationCode: [
+					{ required: true, message: '请输入设备集中站', trigger: 'change' }
+				],
+				turnTime: [
+					{ required: true, message: '请输入道岔时间', trigger: 'blur' }
+				],
+				'tp.x': [
+					{ required: true, message: '请输入时间坐标x', trigger: 'blur' }
+				],
+				'tp.y': [
+					{ required: true, message: '请输入时间坐标y', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	computed: {
+		datasCollection: function () {
+			const list = [];
+			if (this.sectionList && this.sectionList.length) {
+				this.sectionList.forEach(elem => {
+					if (elem.type === '01') {
+						list.push({
+							label: elem.name,
+							key: elem.code,
+							pinyin: elem.name
+						});
+					}
+				});
+			}
+			return list;
+		},
+		...mapGetters('map', [
+			'linkList',
+			'sectionList',
+			'switchList',
+			'stationList',
+			'skinStyle'
+		])
+	},
+	mounted() {
+	},
+	methods: {
+		filterSections(query, item) {
+			return item.pinyin.indexOf(query) > -1;
+		},
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
+				this.editModel.name = selected.name;
+				this.editModel.code = selected.code;
+				this.editModel.turnTime = selected.turnTime;
+				this.editModel.nameShow = selected.nameShow;
+				this.editModel.namePoint = {
+					x: selected.namePosition.x,
+					y: selected.namePosition.y
+				};
+				this.editModel.timeoutShow = selected.timeoutShow;
+				this.editModel.stationCode = selected.stationCode;
+				this.editModel.sectionACode = selected.sectionACode;
+				this.editModel.sectionBCode = selected.sectionBCode;
+				this.editModel.sectionCCode = selected.sectionCCode;
+				if (selected.hasOwnProperty('tp') && selected.tp) {
+					this.editModel.tp = {
+						x: selected.tp.x,
+						y: selected.tp.y
+					};
+				}
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			const models = [];
+			const remove = [];
+			this.sectionsCollection.forEach(elem => {
+				this.sectionList.forEach(section => {
+					if (elem === section.code) {
+						const uname = 'switch_' + section.name.replace('section_', '');
+						const link = this.findLinkData(section.linkCode);
+						if (link && link.leftFdCode && link.leftSdCode) {
+							const uid = getUID('Switch');
+							const node = this.findLinkData(link.leftSdCode);
+							if (node) {
+								const lFdSection = this.findSectionDataByLinkCodeAndPoint(link.leftFdCode, section.points[0]);
+								const lSdSection = this.findSectionDataByLinkCodeAndPoint(link.leftSdCode, section.points[0]);
+								if (lFdSection && lSdSection) {
+									const model = {
+										_type: 'Switch',
+										code: uid,
+										name: uname,
+										nameShow: true,
+										timeoutShow: true,
+										sectionACode: section.code,
+										sectionBCode: lFdSection.code,
+										sectionCCode: lSdSection.code,
+										namePosition: { x: 0, y: 0 },
+										turnTime: 3,
+										tp: { x: 0, y: 0 },
+										lp: {
+											x: lFdSection.points[lFdSection.points.length - 1].x,
+											y: lFdSection.points[lFdSection.points.length - 1].y
+										},
+										rp: {
+											x: lSdSection.points[lSdSection.points.length - 2].x,
+											y: lSdSection.points[lSdSection.points.length - 2].y
+										}
+									};
+
+									models.push(model);
+									const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
+									if (swch) {
+										remove.push({ _type: 'Switch', code: swch.code });
+									}
+								}
+							}
+						}
+
+						if (link && link.rightFdCode && link.rightSdCode) {
+							const uid = getUID('Switch');
+							const node = this.findLinkData(link.rightSdCode);
+							if (node) {
+								const rFdSection = this.findSectionDataByLinkCodeAndPoint(link.rightFdCode, section.points[section.points.length - 1]);
+								const rSdSection = this.findSectionDataByLinkCodeAndPoint(link.rightSdCode, section.points[section.points.length - 1]);
+								if (rFdSection && rSdSection) {
+									const model = {
+										_type: 'Switch',
+										code: uid,
+										name: uname,
+										nameShow: true,
+										timeoutShow: true,
+										sectionACode: section.code,
+										sectionBCode: rFdSection.code,
+										sectionCCode: rSdSection.code,
+										namePosition: { x: 0, y: 0 },
+										turnTime: 3,
+										tp: { x: 0, y: 0 },
+										lp: {
+											x: rFdSection.points[0].x,
+											y: rFdSection.points[0].y
+										},
+										rp: {
+											x: rSdSection.points[1].x,
+											y: rSdSection.points[1].y
+										}
+									};
+
+									models.push(model);
+									const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
+									if (swch) {
+										remove.push({ _type: 'Switch', code: swch.code });
+									}
+								}
+							}
+						}
+					}
+				});
+			});
+
+			const _that = this;
+			this.$confirm('是否确认批量生成？', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				_that.$emit('delMapModel', remove);
+				_that.$emit('addOrUpdateMapModel', models);
+			}).catch(() => {
+				this.$message({
+					type: 'info',
+					message: '已取消批量生成'
+				});
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const tp = {
+				x: this.editModel.tp.x,
+				y: this.editModel.tp.y
+			};
+			const model = {
+				_type: 'Switch',
+				code: this.editModel.code,
+				name: this.editModel.name,
+				namePosition: {
+					x: this.editModel.namePoint.x,
+					y: this.editModel.namePoint.y
+				},
+				stationCode: this.editModel.stationCode,
+				turnTime: this.editModel.turnTime,
+				nameShow: this.editModel.nameShow,
+				timeoutShow: this.editModel.timeoutShow,
+				tp: tp
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认批量生成？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		},
+		findLinkData(code) {
+			var rtn = null;
+			var linkList = this.linkList;
+			if (linkList && linkList.length) {
+				for (var i = 0; i < linkList.length; ++i) {
+					if (code === linkList[i].code) {
+						rtn = linkList[i];
+						break;
+					}
+				}
+			}
+			return rtn;
+		},
+		findSectionDataByLinkCodeAndPoint(code, point) {
+			var rtn = null;
+			var sectionList = this.sectionList;
+			if (sectionList && sectionList.length) {
+				for (var i = 0; i < sectionList.length; ++i) {
+					if (code === sectionList[i].linkCode && point) {
+						if (JSON.stringify(sectionList[i].points[0]) === JSON.stringify(point) ||
+                                JSON.stringify(sectionList[i].points[sectionList[i].points.length - 1]) === JSON.stringify(point)) {
+							rtn = sectionList[i];
+							break;
+						}
+					}
+				}
+			}
+			return rtn;
+		},
+		findSwitchData(sectionACode, sectionBCode, sectionCCode) {
+			var rtn = null;
+			var switchList = this.switchList;
+			if (switchList && switchList.length) {
+				for (var i = 0; i < switchList.length; ++i) {
+					if (sectionACode === switchList[i].sectionACode &&
+                            sectionBCode === switchList[i].sectionBCode &&
+                            sectionCCode === switchList[i].sectionCCode) {
+						rtn = switchList[i];
+						break;
+					}
+				}
+			}
+			return rtn;
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .el-transfer {
+        text-align: left;
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/text.vue

@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="110px" size="mini" :rules="rules">
+            <el-form-item label="文字编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in textList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="文本内容:" prop="content">
+              <el-input v-model="editModel.content" placeholder="请输入内容" class="input-with-select">
+                <el-select slot="prepend" v-model="editModel.prepend" placeholder="请选择">
+                  <el-option label="水平" value="H" />
+                  <el-option label="垂直" value="V" />
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="字体格式:" prop="font">
+              <el-font v-model="editModel.font" placeholder="字体" />
+            </el-form-item>
+            <el-form-item label="字体颜色:" prop="fontColor">
+              <el-color-picker v-model="editModel.fontColor" :predefine="skins" />
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="editModel.position.x" />px
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="editModel.position.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="110px" :model="addModel" size="mini" :rules="makeRules">
+            <el-form-item label="文本内容:" prop="content">
+              <el-input v-model="addModel.content" placeholder="请输入内容" class="input-with-select">
+                <el-select slot="prepend" v-model="addModel.prepend" placeholder="请选择">
+                  <el-option label="水平" value="H" />
+                  <el-option label="垂直" value="V" />
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="addModel.position.x" />px
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="addModel.position.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import ElFont from '@/views/components/font/index';
+
+export default {
+	name: 'StationStandDraft',
+	components: {
+		ElFont
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			skins: [],
+			editModel: {
+				code: '',
+				prepend: 'H',
+				content: '',
+				font: '',
+				fontColor: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				prepend: 'H',
+				content: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择Text', trigger: 'blur' }
+				],
+				content: [
+					{ required: true, message: '请输入内容', trigger: 'blur' }
+				],
+				font: [
+					{ required: true, message: '请选择文字格式', trigger: 'blur' }
+				],
+				fontColor: [
+					{ required: true, message: '请选择文字颜色', trigger: 'blur' }
+				]
+			},
+			makeRules: {
+				code: [
+					{ required: true, message: '请选择Text', trigger: 'blur' }
+				],
+				content: [
+					{ required: true, message: '请输入内容', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'textList',
+			'stationList',
+			'skinStyle'
+		])
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				[this.editModel.prepend, this.editModel.content] = selected.content.split('::');
+				this.editModel.font = selected.font;
+				this.editModel.fontColor = selected.fontColor;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+				this.activeName = 'second';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs['make'].validate((valid) => {
+				if (valid) {
+					const model = {
+						_type: 'Text',
+						code: getUID('Text'),
+						font: '14px consolas',
+						fontColor: '#FFFFFF',
+						content: `${this.addModel.prepend}::${this.addModel.content}`,
+						position: {
+							x: this.addModel.position.x,
+							y: this.addModel.position.y
+						}
+					};
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'Text',
+				code: this.editModel.code,
+				content: `${this.editModel.prepend}::${this.editModel.content}`,
+				font: this.editModel.font,
+				fontColor: this.editModel.fontColor,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    /deep/ {
+        .el-select .el-input {
+            width: 130px;
+        }
+
+        .input-with-select .el-input-group__prepend {
+            background-color: #fff;
+        }
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/train.vue

@@ -0,0 +1,297 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="110px" size="mini" :rules="rules">
+            <el-form-item label="列车编号:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in trainList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="车组号:" prop="groupNumber">
+              <el-input v-model="editModel.groupNumber" />
+            </el-form-item>
+            <el-form-item label="车类型:" prop="modelCode">
+              <el-select v-model="editModel.modelCode" filterable>
+                <el-option
+                  v-for="item in trainModelList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+              <el-button-group>
+                <el-button type="primary" size="small" @click="newTrainMode">添加</el-button>
+                <el-button type="primary" size="small" @click="uptTrainMode(editModel.modelCode)">更新
+                </el-button>
+                <el-button type="primary" size="small" @click="delTrainMode(editModel.modelCode)">删除
+                </el-button>
+              </el-button-group>
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="editModel.position.x" />
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="editModel.position.y" />
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="100px" :rules="createRules" :model="addModel" size="mini">
+            <el-form-item label="车组号:" prop="groupNumber">
+              <el-input v-model="addModel.groupNumber" />
+            </el-form-item>
+            <el-form-item label="车类型:" prop="modelCode">
+              <el-select v-model="addModel.modelCode" filterable>
+                <el-option
+                  v-for="item in trainModelList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+              <el-button-group>
+                <el-button type="primary" size="small" @click="newTrainMode">添加</el-button>
+                <el-button type="primary" size="small" @click="uptTrainMode(addModel.modelCode)">更新
+                </el-button>
+                <el-button type="primary" size="small" @click="delTrainMode(addModel.modelCode)">删除
+                </el-button>
+              </el-button-group>
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="position.x">
+              <el-input-number v-model="addModel.position.x" />
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="position.y">
+              <el-input-number v-model="addModel.position.y" />
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+    <train-model ref="trainMode" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import TrainModel from './trainmodel';
+
+export default {
+	name: 'TrainDraft',
+	components: {
+		TrainModel
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			mapData: null,
+			editModel: {
+				code: '',
+				groupNumber: '',
+				modelCode: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				modelCode: '',
+				groupNumber: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请重新选择设备', trigger: 'change' }
+				],
+				groupNumber: [
+					{ required: true, message: '请输入车组号', trigger: 'blur' }
+				],
+				modelCode: [
+					{ required: true, message: '请选择车类型', trigger: 'change' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'trainList',
+			'trainModelList',
+			'skinStyle'
+		]),
+		createRules: function () {
+			return {
+				modelCode: [
+					{ required: true, message: '请选择车类型', trigger: 'change' }
+				],
+				groupNumber: [
+					{ required: true, message: '请填写车组号', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标', trigger: 'change' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标', trigger: 'change' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'Train'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.modelCode = selected.modelCode;
+				this.editModel.groupNumber = selected.groupNumber;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('Train');
+					const model = {
+						_type: 'Train',
+						code: uid,
+						safeDistance: '100',
+						maxSafeDistance: '100',
+						modelCode: this.addModel.modelCode,
+						groupNumber: this.addModel.groupNumber,
+						position: {
+							x: this.addModel.position.x,
+							y: this.addModel.position.y
+						}
+					};
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'Train',
+				code: this.editModel.code,
+				safeDistance: this.editModel.safeDistance,
+				maxSafeDistance: this.editModel.maxSafeDistance,
+				modelCode: this.editModel.modelCode,
+				groupNumber: this.editModel.groupNumber,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'Train'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		},
+		newTrainMode() {
+			if (Object.keys(this.$store.state.map.map || {}).length) {
+				this.$refs.trainMode.doShow({}, 'ADD');
+			} else {
+				this.$messageBox('请先选择地图');
+			}
+		},
+		uptTrainMode(code) {
+			if (code) {
+				this.trainModelList.forEach(elem => {
+					if (elem.code === code) {
+						this.$refs.trainMode.doShow(elem, 'UPT');
+						return;
+					}
+				});
+			} else {
+				this.$messageBox('请选择查看的列车模型');
+			}
+		},
+		delTrainMode(code) {
+			if (code) {
+				const model = { code };
+				this.$refs.trainMode.operateTrainModel({ model, type: 'DEL' });
+				this.addModel.modelCode = this.editModel.modelCode = '';
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/map/mapdraft/mapedit/mapoperate/trainmodel.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-dialog :title="isNew? '新建车类型': '更新列车模型'" :visible.sync="dialogShow" width="30%" :before-close="doClose">
+    <el-card shadow="never">
+      <el-form
+        ref="form"
+        :model="formModel"
+        :rules="rules"
+        label-width="120px"
+        size="mini"
+        style="margin: 20px 20px;"
+      >
+        <el-input v-model="formModel.code" :disabled="!isNew" type="hidden" />
+        <el-form-item label="列车类型名称:" prop="name">
+          <el-input v-model="formModel.name" :disabled="!isNew" />
+        </el-form-item>
+        <el-form-item label="列车长度:" prop="length">
+          <el-input-number v-model="formModel.length" :min="0" />米
+        </el-form-item>
+        <el-form-item label="安全距离:" prop="safeDistance">
+          <el-input-number v-model="formModel.safeDistance" :min="0" />米
+        </el-form-item>
+        <el-form-item label="最大安全距离:" prop="maxSafeDistance">
+          <el-input-number v-model="formModel.maxSafeDistance" :min="0" />米
+        </el-form-item>
+        <el-form-item label="平均速度:" prop="averageVelocity">
+          <el-input-number v-model="formModel.averageVelocity" :min="0" />km/h
+        </el-form-item>
+        <el-form-item label="平均减速度:" prop="averageDeceleration">
+          <el-input-number v-model="formModel.averageDeceleration" :min="0" />km/h
+        </el-form-item>
+        <el-form-item label="默认速度:" prop="defaultVelocity">
+          <el-input-number v-model="formModel.defaultVelocity" :min="0" />km/h
+        </el-form-item>
+        <el-form-item label="最大速度:" prop="maxVelocity">
+          <el-input-number v-model="formModel.maxVelocity" :min="0" />km/h
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSure">{{ isNew? '创建': '更新' }}</el-button>
+      <el-button @click="dialogShow = false">取 消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+// import { mapGetters } from 'vuex';
+// import { listMap } from '@/api/jmap/mapdraft';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'TrainModeOperate',
+	data() {
+		return {
+			dialogShow: false,
+			isNew: false,
+			loading: false,
+			rules: null,
+			mapList: [],
+			formModel: {
+				code: '',
+				name: '',
+				length: 0,
+				safeDistance: '',
+				maxSafeDistance: '',
+				averageVelocity: 0,
+				averageDeceleration: 0,
+				defaultVelocity: 0,
+				maxVelocity: 0
+			}
+		};
+	},
+	computed: {
+		addRules: function () {
+			return {
+				code: [
+					{ required: true, message: '列车模型Code不能为空', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入列车类型名称', trigger: 'change' }
+				],
+				length: [
+					{ required: true, message: '请输入列车长度', trigger: 'change' }
+				],
+				safeDistance: [
+					{ required: true, message: '请输入安全距离', trigger: 'change' }
+				],
+				maxSafeDistance: [
+					{ required: true, message: '请输入最大安全距离', trigger: 'change' }
+				],
+				averageVelocity: [
+					{ required: true, message: '请输入平均速度', trigger: 'change' }
+				],
+				averageDeceleration: [
+					{ required: true, message: '请输入平均减速度', trigger: 'change' }
+				],
+				defaultVelocity: [
+					{ required: true, message: '请输入默认速度', trigger: 'change' }
+				],
+				maxVelocity: [
+					{ required: true, message: '请输入最大速度', trigger: 'change' }
+				]
+			};
+		},
+		viewRules: function () {
+			return {};
+		}
+	},
+	methods: {
+		doShow(model, type) {
+			this.dialogShow = true;
+			this.$nextTick(() => {
+				if (this.$refs && this.$refs.form) {
+					this.$refs.form.resetFields();
+				}
+				if (type !== 'ADD') {
+					this.isNew = false;
+					if (model) {
+						this.formModel.code = model.code;
+						this.formModel.name = model.name;
+						this.formModel.length = model.length;
+						this.formModel.safeDistance = model.safeDistance;
+						this.formModel.maxSafeDistance = model.maxSafeDistance;
+						this.formModel.averageVelocity = model.averageVelocity;
+						this.formModel.averageDeceleration = model.averageDeceleration;
+						this.formModel.defaultVelocity = model.defaultVelocity;
+						this.formModel.maxVelocity = model.maxVelocity;
+					}
+					this.rules = this.viewRules;
+				} else {
+					this.isNew = true;
+					this.rules = this.addRules;
+				}
+
+				this.$nextTick(() => {
+					this.$refs.form.clearValidate();
+				});
+			});
+		},
+		doClose() {
+			this.dialogShow = false;
+		},
+		handleSure() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					if (this.isNew) {
+						this.formModel.code = getUID('TrainModel');
+						this.operateTrainModel({ model: this.formModel, type: 'ADD' });
+					} else {
+						this.operateTrainModel({ model: this.formModel, type: 'UPT' });
+
+					}
+					this.doClose();
+				}
+			});
+		},
+		operateTrainModel({ model, type }) {
+			this.$store.dispatch('map/operateTrainModel', { model, type });
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .create-box {
+        width: 800px;
+        margin: 0 auto;
+        padding-top: 20px;
+        height: 100%;
+
+        /deep/ {
+            .el-step__icon.is-icon {
+                width: 95px;
+            }
+        }
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/trainwindow.vue

@@ -0,0 +1,367 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="120px" size="mini" :rules="rules">
+            <el-form-item label="车次窗编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in trainWindowList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="车次窗宽度:" prop="width">
+              <el-input-number v-model="editModel.width" :min="0" />px
+            </el-form-item>
+            <el-form-item label="车次窗高度:" prop="height">
+              <el-input-number v-model="editModel.height" :min="0" />px
+            </el-form-item>
+            <el-form-item label="关联区段:" prop="sectionCode">
+              <el-select v-model="editModel.sectionCode">
+                <el-option
+                  v-for="item in filterSectionList"
+                  :key="item.code"
+                  :label="item.code + ' (' + item.name+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="坐标 x:" prop="point.x">
+              <el-input-number v-model="editModel.point.x" />px
+            </el-form-item>
+            <el-form-item label="坐标 y:" prop="point.y">
+              <el-input-number v-model="editModel.point.y" />px
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="110px">
+            <el-form-item>
+              <el-button type="danger" size="big" @click="removeTrainWindow">一键删除车次窗</el-button>
+              <el-button type="primary" size="big" @click="createTrainWindow">一键创建车次窗</el-button>
+            </el-form-item>
+          </el-form>
+          <el-transfer
+            v-model="sectionsCollection"
+            filterable
+            size="mini"
+            :filter-method="filterSections"
+            filter-placeholder="请输入Section名称"
+            :data="DatasCollection"
+            :titles="['Section集合', '选择Section']"
+          />
+        </el-scrollbar>
+        <el-button-group class="map-draft">
+          <el-button type="primary" @click="createTrainWindowByCollection">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import JTriangle from '@/jmap/utils/JTriangle';
+
+export default {
+	name: 'TrainWindowDraft',
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			mapData: null,
+			sectionsCollection: [],
+			skinDict: {},
+			editModel: {
+				code: '',
+				point: {
+					x: 0,
+					y: 0
+				},
+				width: 0,
+				height: 0,
+				sectionCode: ''
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请重新选择设备', trigger: 'blur' }
+				],
+				'point.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'point.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				],
+				width: [
+					{ required: true, message: '请输入车次窗宽度', trigger: 'blur' }
+				],
+				height: [
+					{ required: true, message: '请输入车次窗高度', trigger: 'blur' }
+				],
+				sectionCode: [
+					{ required: true, message: '请输入x坐标位置', trigger: 'change' }
+				]
+
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'trainWindowList'
+		]),
+		filterSectionList() {
+			let list = [];
+			if (this.sectionList && this.sectionList.length) {
+				list = this.sectionList.filter(elem => { return !(elem.type == '03' && elem.parentCode); });
+			}
+			return list;
+		},
+		DatasCollection() {
+			const list = [];
+			if (this.sectionList && this.sectionList.length) {
+				this.sectionList.forEach(elem => {
+					list.push({
+						label: `${elem.name}(${elem.code})`,
+						key: elem.code,
+						pinyin: `${elem.name}(${elem.code})`
+					});
+				});
+			}
+			return list;
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	methods: {
+		filterSections(query, item) {
+			return item.pinyin.indexOf(query) > -1;
+		},
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.width = selected.width;
+				this.editModel.height = selected.height;
+				this.editModel.sectionCode = selected.sectionCode;
+				this.editModel.point = {
+					x: selected.point.x,
+					y: selected.point.y
+				};
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		createModel(opts) {
+			const model = {
+				_type: 'TrainWindow',
+				code: getUID('TrainWindow'),
+				point: {}
+			};
+
+			if (opts) {
+				const section = opts.section;
+				let width = this.skinDict.trainWindowWidth;
+				const height = this.skinDict.trainWindowHeight;
+				if (section) {
+					if (section.type !== '03' && opts.triangle) {
+						model.point = opts.triangle.middlePoint();
+						if (opts.triangle.getCosRate() == 1 && opts.triangle.absx < width) {
+							width = opts.triangle.absx;
+						}
+
+						if (opts.triangle.getCosRate() !== 0 && opts.triangle.getCosRate() !== 1) {
+							model.point.x = section.points[0].x;
+							model.point.y = section.points[section.points.length - 1].y;
+						}
+					} else {
+						model.point = {
+							x: section.namePosition.x,
+							y: section.namePosition.y
+						};
+					}
+
+					const distance = (this.skinDict.trainDistance + this.skinDict.trainConflictR * 2 + height);
+					let offsetx = 0;
+					let offsety = 0;
+					if (opts.triangle) {
+						if (opts.triangle.getCosRate() == 1 || opts.triangle.getCosRate() == 0) {
+							offsetx = distance * opts.triangle.getSinRate();
+							offsety = distance * opts.triangle.getCosRate();
+						} else {
+							offsetx = distance;
+							offsety = distance;
+						}
+					} else {
+						offsetx = 0;
+						offsety = distance;
+					}
+
+					if (section.trainPosType == '01') {
+						model.point.y = model.point.y - height;
+						model.point.x = model.point.x - offsetx;
+						model.point.y = model.point.y - offsety;
+					} else {
+						model.point.x = model.point.x + offsetx;
+						model.point.y = model.point.y + offsety;
+					}
+
+					model.sectionCode = section.code;
+					model.height = height;
+					model.width = width;
+				}
+			}
+
+			return model;
+		},
+		removeTrainWindow() {
+			const remove = [];
+			if (this.trainWindowList && this.trainWindowList.length) {
+				this.trainWindowList.forEach(elem => {
+					remove.push({
+						_type: 'TrainWindow',
+						code: elem.code
+					});
+				});
+				this.$emit('delMapModel', remove);
+			}
+		},
+		createTrainWindow() {
+			const models = [];
+			const collection = this.sectionList;
+
+			this.removeTrainWindow();
+			if (collection && collection.length) {
+				collection.forEach(elem => {
+					if (elem.type !== '03' && !elem.isSwitchSection && (
+						elem.logicSectionNum.length == 0 ||
+                            elem.logicSectionNum.length == 1 && elem.logicSectionNum[0] == 0)) {
+						const triangle = new JTriangle(elem.points[0], elem.points[elem.points.length - 1]);
+						models.push(this.createModel({
+							triangle: triangle,
+							section: elem
+						}));
+					} else if (elem.type === '03' && elem.isSwitchSection) {
+						models.push(this.createModel({
+							section: elem
+						}));
+					}
+				});
+			}
+
+			this.$emit('addOrUpdateMapModel', models);
+		},
+		createTrainWindowByCollection() {
+			const models = [];
+			let remove = [];
+			const collection = this.sectionsCollection;
+
+			if (collection && collection.length) {
+				collection.forEach(code => {
+					const list2 = this.trainWindowList.filter(item => {
+						return (item.sectionCode === code);
+					});
+
+					if (list2 && list2.length) {
+						remove = [...remove, ...list2];
+					}
+
+					const elem = this.$store.getters['map/getDeviceByCode'](code);
+					if (elem && elem.type !== '03' && !elem.isSwitchSection && (
+						elem.logicSectionNum.length == 0 ||
+                            elem.logicSectionNum.length == 1 && elem.logicSectionNum[0] == 0)) {
+						const triangle = new JTriangle(elem.points[0], elem.points[elem.points.length - 1]);
+						models.push(this.createModel({
+							triangle: triangle,
+							section: elem
+						}));
+					} else if (elem && elem.type === '03' && elem.isSwitchSection) {
+						models.push(this.createModel({
+							section: elem
+						}));
+					}
+				});
+			}
+
+			this.$emit('delMapModel', remove);
+			this.$emit('addOrUpdateMapModel', models);
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'TrainWindow',
+				code: this.editModel.code,
+				width: this.editModel.width,
+				height: this.editModel.height,
+				point: {
+					x: this.editModel.point.x,
+					y: this.editModel.point.y
+				},
+				sectionCode: this.editModel.sectionCode
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/map/mapdraft/mapedit/mapoperate/zcControl.vue

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane class="view-control" label="属性" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="form" :model="editModel" label-width="150px" size="mini" :rules="rules">
+            <el-form-item label="编码:" prop="code">
+              <el-select v-model="editModel.code" filterable @change="deviceChange">
+                <el-option
+                  v-for="item in zcList"
+                  :key="item.code"
+                  :label="item.code"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="状态信号名称:" prop="name">
+              <el-input v-model="editModel.name" />
+            </el-form-item>
+            <el-form-item label="是否可见:" prop="visible">
+              <el-checkbox v-model="editModel.visible" />
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">状态信号画图坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="editModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="edit">修改</el-button>
+          <el-button type="primary" @click="deleteObj">删除</el-button>
+        </el-button-group>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" label="操作" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="150px" :rules="createRules" :model="addModel" size="mini">
+            <el-form-item label="状态信号名称:" prop="name">
+              <el-input v-model="addModel.name" />
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title">状态信号画图坐标:</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.x" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="20px"
+              >
+                <el-input-number v-model="addModel.position.y" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <el-button-group class="map-draft-group">
+          <el-button type="primary" @click="create">创建</el-button>
+        </el-button-group>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+
+export default {
+	name: 'ZcControlDraft',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			mapData: null,
+			editModel: {
+				code: '',
+				name: '',
+				visible: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				code: '',
+				name: '',
+				visible: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				code: [
+					{ required: true, message: '请选择唯一编码', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入状态信号名称', trigger: 'blur' }
+				],
+				visible: [
+					{ required: true, message: '请选择是否可见', trigger: 'change' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'trainList',
+			'trainModelList',
+			'zcList',
+			'skinStyle'
+		]),
+		createRules: function () {
+			return {
+				name: [
+					{ required: true, message: '请输入状态信号名称', trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: '请输入x坐标位置', trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: '请输入y坐标位置', trigger: 'blur' }
+				]
+			};
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		},
+		$route() {
+			this.$refs.form.resetFields();
+			this.activeName = 'first';
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.name = selected.name;
+				this.editModel.visible = selected.visible;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			} else {
+				this.activeName = 'second';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('ZcControl');
+					const model = {
+						_type: 'ZcControl',
+						code: uid,
+						visible: true,
+						name: this.addModel.name,
+						position: {
+							x: this.addModel.position.x,
+							y: this.addModel.position.y
+						}
+					};
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'ZcControl',
+				code: this.editModel.code,
+				visible: this.editModel.visible,
+				name: this.editModel.name,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
+				const _that = this;
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info('已取消删除');
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 160px;
+            font-weight: bold;
+            display: block;
+            float: left;
+        }
+    }
+
+    .map-draft-group {
+        color: #3E44BE;
+    }
+</style>

src/views/map/mapdraft/mapedit/pathoperate/detail.vue

@@ -0,0 +1,207 @@
+<template>
+  <el-dialog title="路径单元列表" :visible.sync="show" width="85%" :before-do-close="doClose">
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listMap } from '@/api/jmap/mapdraft';
+import { getRouteUnitList, delRouteUnit, getRouteUnit } from '@/api/jmap/pathunit';
+
+export default {
+	name: 'RouteDetail',
+	components: {
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			mapList: [],
+			pagerConfig: {
+				pageSize: 'pageSize',
+				pageIndex: 'pageNum'
+			},
+			queryForm: {
+				labelWidth: '120px',
+				queryObject: {
+					startSectionCode: {
+						type: 'select',
+						label: '始端停车点名',
+						config: {
+							data: []
+						}
+					},
+					endSectionCode: {
+						type: 'select',
+						label: '终端停车点名',
+						config: {
+							data: []
+						}
+					}
+				}
+			},
+			queryList: {
+				query: this.queryFunction,
+				afterQuery: this.afterQuery,
+				selectCheckShow: false,
+				indexShow: true,
+				columns: [
+					{
+						title: '路径单元code',
+						prop: 'code'
+					},
+					{
+						title: '所属地图名称',
+						prop: 'mapId'
+					},
+					{
+						title: '起始停车点',
+						prop: 'startSectionCode'
+
+					},
+					{
+						title: '终端停车点',
+						prop: 'endSectionCode'
+					},
+					{
+						title: '优先级',
+						prop: 'orderNum'
+					},
+					{
+						type: 'button',
+						title: '操作',
+						width: '200',
+						buttons: [
+							{
+								name: '编辑',
+								handleClick: this.editObj
+							},
+							{
+								name: '删除',
+								handleClick: this.deleteObj,
+								type: 'danger'
+							}
+						]
+					}
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList'
+		])
+	},
+	watch: {
+		sectionList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				val.forEach(elem => {
+					if (elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack) {
+						list.push({ label: this.formatName(elem.code), value: elem.code });
+					}
+				});
+				this.queryForm.queryObject.startSectionCode.config.data = list;
+				this.queryForm.queryObject.endSectionCode.config.data = list;
+			}
+		}
+	},
+	mounted() {
+		this.acquireMapList();
+	},
+	methods: {
+		doShow() {
+			this.show = true;
+			this.reloadTable();
+		},
+		doClose() {
+			this.show = false;
+		},
+		formatName(code) {
+			let name = '';
+			const section = this.$store.getters['map/getDeviceByCode'](code);
+			if (section) {
+				const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
+				if (station) {
+					name += `${station.name} `;
+				}
+				name += `${section.name} (${section.code})`;
+			}
+
+			return name;
+		},
+		queryFunction(params) {
+			if (this.mapInfo && this.mapInfo.id) {
+				return getRouteUnitList(this.mapInfo.id, params);
+			}
+		},
+		acquireMapList() {
+			// 地图名称列表
+			listMap().then(response => {
+				this.mapList = response.data;
+			});
+		},
+		convertField(dataDict, enumList, key, value, fieldList) {
+			if (dataDict && enumList && fieldList && enumList.length && fieldList.length) {
+				fieldList.forEach(field => {
+					enumList.forEach(elem => {
+						if (elem[key] === dataDict[field]) {
+							dataDict[field] = elem[value];
+						}
+					});
+				});
+			}
+		},
+		afterQuery(data) {
+			if (data && data.list) {
+				const that = this;
+				const list = data.list;
+				if (list) {
+					list.map(elem => {
+						that.convertField(elem, that.mapList, 'id', 'name', ['mapId']);
+						elem.startSectionCode = that.formatName(elem.startSectionCode);
+						elem.endSectionCode = that.formatName(elem.endSectionCode);
+					});
+				}
+			}
+			return data;
+		},
+		editObj(index, row) {
+			getRouteUnit(row.id).then(response => {
+				const data = response.data;
+				this.$emit('routeSelected', data);
+				this.doClose();
+			});
+		},
+		deleteObj(index, row) {
+			if (this.mapInfo && this.mapInfo.id && row) {
+				// 删除
+				delRouteUnit(row.id).then(response => {
+					this.$message.success('删除成功');
+					this.reloadTable();
+				}).catch(() => {
+					this.$messageBox('删除失败');
+				});
+			}
+		},
+		reloadTable() {
+			if (this.queryList && this.queryList.reload) {
+				this.queryList.reload();
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/pathoperate/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapControl">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>
+            地图名称：
+            <b>{{ mapInfo.name }}</b>
+          </span>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">预览</el-button>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">新建</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" type="card">
+          <el-tab-pane label="路径单元" name="Route">
+            <route-draft
+              ref="routeEdit"
+              :selected="selected"
+              :map-info="mapInfo"
+              :route-data="routeData"
+              :card-height="cardHeight"
+              @handleSelectView="handleSelectView"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+      <route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
+    </div>
+  </transition>
+</template>
+<script>
+import RouteDraft from './route';
+import RouteDetail from './detail';
+
+export default {
+	name: 'PathOperate',
+	components: {
+		RouteDraft,
+		RouteDetail
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: Object,
+			default: function() {
+				return {};
+			}
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			enabledTab: 'Route',
+			routeData: null
+		};
+	},
+	methods: {
+		clickEvent(e, model) {
+			this.onSelect(model);
+		},
+		onSelect(model) {
+			if (model) {
+				this.selected = model;
+			} else {
+				this.selected = null;
+			}
+		},
+		setDelayUnlockStatus(data, status) {
+			if (data && data.delayShowList) {
+				data.delayShowList.forEach(elem => {
+					elem.status = status;
+				});
+			}
+		},
+		routeSelected: function (data) {
+			this.routeData = data;
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.isSave = false;
+			}
+		},
+		previewRouteEvent: function () {
+			if (this.$refs && this.$refs.routeDetail) {
+				this.$refs.routeDetail.doShow();
+			}
+		},
+		createRouteEvent: function () {
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.clear();
+			}
+		},
+		setSelected(selected) {
+			this.$refs.routeEdit.setSelected(selected);
+		},
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		setShowCenter(code) {
+			this.$emit('setShowCenter', code);
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/pathoperate/pathAccess.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog title="路径单元列表" :visible.sync="show" width="85%" :before-do-close="doClose">
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listMap, listRouteAccess } from '@/api/jmap/mapdraft';
+
+export default {
+	name: 'PathAccess',
+	components: {
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			mapList: [],
+			pagerConfig: {
+				pageSize: 'pageSize',
+				pageIndex: 'pageNum'
+			},
+			queryForm: {
+				labelWidth: '120px',
+				queryObject: {
+					name: {
+						type: 'select',
+						label: '进路名称',
+						config: {
+							data: []
+						}
+					},
+					stationCode: {
+						type: 'select',
+						label: '所属车站名称',
+						config: {
+							data: []
+						}
+					},
+					startSignalCode: {
+						type: 'select',
+						label: '始端信号机名称',
+						config: {
+							data: []
+						}
+					},
+					endSignalCode: {
+						type: 'select',
+						label: '终端信号机名称',
+						config: {
+							data: []
+						}
+					}
+				}
+			},
+			queryList: {
+				query: this.queryFunction,
+				afterQuery: this.afterQuery,
+				selectCheckShow: true,
+				indexShow: true,
+				columns: [
+					{
+						title: '进路ID',
+						prop: 'code'
+					},
+					{
+						title: '进路名称',
+						prop: 'name'
+					},
+					{
+						title: '所属地图名称',
+						prop: 'mapId'
+					},
+					{
+						title: '所属车站名称',
+						prop: 'stationCode'
+					},
+					{
+						title: '始端信号机名称',
+						prop: 'startSignalCode'
+					},
+					{
+						title: '终端信号机名称',
+						prop: 'endSignalCode'
+					},
+					{
+						type: 'button',
+						title: '操作',
+						width: '200',
+						buttons: [
+							{
+								name: '添加',
+								handleClick: this.addObj
+							}
+						]
+					}
+				],
+				selectAllClick: this.selectAll
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'signalList',
+			'switchList',
+			'sectionList',
+			'stationList',
+			'stationStandList'
+		])
+	},
+	watch: {
+		signalList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				for (let i = 0; i < val.length; i++) {
+					list.push({ label: val[i].uniqueName, value: val[i].code });
+				}
+				this.queryForm.queryObject.startSignalCode.config.data = list;
+				this.queryForm.queryObject.endSignalCode.config.data = list;
+			}
+		},
+		stationList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				for (let i = 0; i < val.length; i++) {
+					list.push({ label: val[i].name, value: val[i].code });
+				}
+				this.queryForm.queryObject.stationCode.config.data = list;
+			}
+		}
+	},
+	mounted() {
+		this.acquireMapList();
+	},
+	methods: {
+		doShow() {
+			this.show = true;
+			this.reloadTable();
+		},
+		doClose() {
+			this.show = false;
+		},
+		queryFunction(params) {
+			if (this.mapInfo && this.mapInfo.id) {
+				return listRouteAccess(this.mapInfo.id, params);
+			}
+		},
+		acquireMapList() {
+			// 地图名称列表
+			listMap().then(response => {
+				this.mapList = response.data;
+			});
+		},
+		convertField(dataDict, enumList, key, value, fieldList) {
+			if (dataDict && enumList && fieldList && enumList.length && fieldList.length) {
+				fieldList.forEach(field => {
+					enumList.forEach(elem => {
+						if (elem[key] === dataDict[field]) {
+							dataDict[field] = elem[value];
+						}
+					});
+				});
+			}
+		},
+		afterQuery(data) {
+			if (data && data.list) {
+				const that = this;
+				const list = data.list;
+				const nameList = this.queryForm.queryObject.name.config.data = [];
+				if (list) {
+					list.map(elem => {
+						nameList.push({ label: elem.name, value: elem.name });
+						that.convertField(elem, that.mapList, 'id', 'name', ['mapId']);
+
+						that.convertField(elem, that.stationList, 'code', 'name', ['stationCode']);
+						that.convertField(elem, that.signalList, 'code', 'uniqueName', ['startSignalCode', 'endSignalCode']);
+					});
+				}
+			}
+			return data;
+		},
+		addObj(index, row) {
+			const data = [];
+			data.push(row);
+			this.$emit('routeSelected', data);
+			this.doClose();
+		},
+		selectAll(data) {
+			this.$emit('routeSelected', data);
+			this.doClose();
+		},
+		reloadTable() {
+			if (this.queryList && this.queryList.reload) {
+				this.queryList.reload();
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/pathoperate/route.vue

@@ -0,0 +1,322 @@
+<template>
+  <div :style="{ height: cardHeight +'px' }">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
+        <div class="path-box">
+          <el-steps :active="display" style="display: none;">
+            <el-step title="路径单元创建" icon="el-icon-edit" />
+            <el-step title="路径单元整合" icon="el-icon-setting" />
+          </el-steps>
+          <div v-show="display == 1" class="definition">
+            <el-form-item label="始端停车点:" prop="startSectionCode">
+              <el-select v-model="addModel.startSectionCode" clearable :filterable="true">
+                <el-option
+                  v-for="item in filterSectionList"
+                  :key="item.code"
+                  :label="formatName(item.code)"
+                  :value="item.code"
+                />
+                <!-- </el-input> -->
+              </el-select>
+              <el-button
+                :type=" field === 'startSectionCode' ? 'danger' : 'primary'"
+                @click="hover('startSectionCode')"
+              >激活</el-button>
+            </el-form-item>
+            <el-form-item label="终端停车点:" prop="endSectionCode">
+              <el-select v-model="addModel.endSectionCode" clearable :filterable="true">
+                <el-option
+                  v-for="item in filterSectionList"
+                  :key="item.code"
+                  :label="formatName(item.code)"
+                  :value="item.code"
+                />
+              </el-select>
+              <el-button
+                :type=" field === 'endSectionCode' ? 'danger' : 'primary'"
+                @click="hover('endSectionCode')"
+              >激活</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button-group>
+                <el-button type="primary" size="small" style="margin-top: 10px" @click="nextStep">下一步
+                </el-button>
+              </el-button-group>
+            </el-form-item>
+          </div>
+          <div v-show="display == 2" class="rule">
+            <el-button
+              type="primary"
+              size="small"
+              style="float: right; margin-right: 20px; margin-bottom: 10px;"
+              @click="pushSwitch"
+            >添加</el-button>
+            <el-table
+              :data="addModel.mapRouteUnitRelList"
+              row-key="id"
+              border
+              style="width: 95%; margin: 0 auto"
+            >
+              <el-table-column type="index" />
+              <el-table-column prop="routeCode" label="进路ID" />
+              <el-table-column prop="routeName" label="进路名称" />
+              <el-table-column fixed="right" label="操作" width="50">
+                <template slot-scope="scope">
+                  <el-button
+                    type="text"
+                    size="small"
+                    @click.native.prevent="deletePathUnit(scope.$index, addModel.mapRouteUnitRelList)"
+                  >
+                    移除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-form-item>
+              <el-button-group>
+                <el-button type="primary" size="small" style="margin-top: 10px" @click="lastStep">上一步
+                </el-button>
+              </el-button-group>
+              <el-button-group>
+                <el-button
+                  v-if="!editShow"
+                  type="primary"
+                  size="small"
+                  :loading="loading"
+                  style="margin-top: 10px"
+                  @click="save"
+                >保存</el-button>
+                <el-button
+                  v-if="editShow"
+                  type="warning"
+                  size="small"
+                  :loading="loading"
+                  style="margin-top: 10px"
+                  @click="save"
+                >更新</el-button>
+              </el-button-group>
+            </el-form-item>
+          </div>
+        </div>
+
+      </el-form>
+    </el-scrollbar>
+    <path-access ref="pathAccess" :map-info="mapInfo" @routeSelected="routeSelected" />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import { addRouteUnit, setRouteUnit } from '@/api/jmap/pathunit';
+import PathAccess from './pathAccess';
+import { ViewMode } from '@/scripts/ConstDic';
+import Sortable from 'sortablejs';
+
+export default {
+	name: 'RouteOperation',
+	components: {
+		PathAccess
+	},
+	props: {
+		selected: {
+			type: Object,
+			required: true
+		},
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		routeData: {
+			type: Object,
+			required: true
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			ViewMode: ViewMode,
+			field: '',
+			code: '',
+			type: '',
+			loading: false,
+			addModel: {
+				mapId: '',
+				code: getUID('RouteUnit'),
+				startSectionCode: '',
+				endSectionCode: '',
+				mapRouteUnitRelList: []
+			},
+			editShow: false,
+			display: 1,
+			rules: {
+				startSectionCode: [
+					{ required: true, message: '请选择开始信号机', trigger: 'change' }
+				],
+				endSectionCode: [
+					{ required: true, message: '请选择结束信号机', trigger: 'change' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList'
+		]),
+		filterSectionList() {
+			if (this.sectionList) {
+				return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
+			} else {
+				return [];
+			}
+		}
+	},
+	watch: {
+		mapInfo(val) {
+			if (val) {
+				this.addModel.mapId = val.id;
+			}
+		},
+		routeData(val, old) {
+			if (val) {
+				this.addModel = val;
+				this.display = 1;
+				this.editShow = true;
+			}
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.handleSelectView(ViewMode.PHYSICAL);
+		});
+		this.rowDrop();
+	},
+	methods: {
+		// 行拖拽
+		rowDrop() {
+			const that = this;
+			const tbody = document.querySelector('.el-table__body-wrapper tbody');
+			if (tbody) {
+				Sortable.create(tbody, {
+					onEnd({ newIndex, oldIndex }) {
+						const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
+						that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
+					}
+				});
+			}
+		},
+		hover(field) {
+			this.field = field === this.field ? '' : field;
+		},
+		formatName(code) {
+			let name = '';
+			const section = this.$store.getters['map/getDeviceByCode'](code);
+			if (section) {
+				const station = this.$store.getters['map/getDeviceByCode'](section.stationCode);
+				if (station) {
+					name += `${station.name} `;
+				}
+				name += `${section.name} (${section.code})`;
+			}
+
+			return name;
+		},
+		pushSwitch() {
+			if (this.$refs && this.$refs.pathAccess) {
+				this.$refs.pathAccess.doShow();
+			}
+		},
+		routeSelected(data) {
+			data.forEach((element, index) => {
+				this.addModel.mapRouteUnitRelList.push({
+					routeCode: element.code,
+					routeName: element.name,
+					mapId: this.mapInfo.id,
+					id: element.id,
+					routeUnitCode: this.addModel.code
+				});
+			});
+		},
+		// 下一步
+		nextStep() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.display = 2;
+					this.handleSelectView(ViewMode.MIX);
+				}
+			});
+		},
+		lastStep() {
+			this.display = 1;
+			this.handleSelectView(ViewMode.PHYSICAL);
+		},
+		buildModel() {
+			this.addModel.mapRouteUnitRelList.forEach((elem, index) => {
+				elem['orderNum'] = index + 1;
+			});
+
+			const model = Object.assign({}, this.addModel);
+			model['mapId'] = this.mapInfo.id;
+
+			return model;
+		},
+		save() {
+			this.loading = true;
+			if (this.editShow) {
+				setRouteUnit(this.buildModel()).then(response => {
+					this.$message.success('更新成功');
+					this.clear();
+				}).catch(() => {
+					this.$messageBox('操作异常');
+					this.loading = false;
+				});
+			} else {
+				[
+					addRouteUnit(this.buildModel()).then(response => {
+						this.$message.success('创建成功');
+						this.clear();
+					}).catch(() => {
+						this.$messageBox('操作异常');
+						this.loading = false;
+					})
+				];
+			}
+		},
+		// 切换地图属性
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		clear() {
+			if (this.$refs && this.$refs.form && this.mapInfo) {
+				delete this.addModel.id;
+				this.$refs.form.resetFields();
+				this.display = 1;
+				this.editShow = false;
+				this.addModel = {
+					mapId: this.mapInfo.id,
+					code: getUID('RouteUnit'),
+					startSectionCode: '',
+					endSectionCode: '',
+					mapRouteUnitRelList: []
+				};
+				this.loading = false;
+			}
+		},
+		// 移除列表
+		deletePathUnit(index, data) {
+			this.addModel.mapRouteUnitRelList.splice(index, 1);
+		},
+		setSelected(selected) {
+			if (selected) {
+				if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
+					this.addModel.startSectionCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
+					this.addModel.endSectionCode = selected.code;
+				}
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routeoperate/detail.vue

@@ -0,0 +1,616 @@
+<template>
+  <el-dialog title="进路预览" :visible.sync="show" width="95%" :before-do-close="doClose">
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+    <pre-view-field ref="previewField" :map-info="mapInfo" />
+    <related-route ref="relatedRoute" :map-info="mapInfo" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listMap, listRouteAccess, listRouteMapAccess, deleteRouteAccess, queryRouteAccessDetail } from '@/api/jmap/mapdraft';
+import {
+	listOverlapSwitch, listTriggerSection, listOverlapSection, listPhysicsSection, listStationStand,
+	listSwitch, listAgainstRoute, listFlankProtectionSwitch
+} from '@/api/jmap/mapdraft';
+import PreViewField from './preview';
+import RelatedRoute from './related';
+
+export default {
+	name: 'RouteDetail',
+	components: {
+		PreViewField,
+		RelatedRoute
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			mapList: [],
+			RouteNatureTypeList: [],
+			RouteAutoTypeList: [],
+			SwitchLocateTypeList: [],
+			pagerConfig: {
+				pageSize: 'pageSize',
+				pageIndex: 'pageNum'
+			},
+			queryForm: {
+				labelWidth: '120px',
+				queryObject: {
+					name: {
+						type: 'select',
+						label: '进路名称',
+						config: {
+							data: []
+						}
+					},
+					stationCode: {
+						type: 'select',
+						label: '所属车站名称',
+						config: {
+							data: []
+						}
+					},
+					startSignalCode: {
+						type: 'select',
+						label: '始端信号机名称',
+						config: {
+							data: []
+						}
+					},
+					endSignalCode: {
+						type: 'select',
+						label: '终端信号机名称',
+						config: {
+							data: []
+						}
+					}
+				}
+			},
+			queryList: {
+				query: this.queryFunction,
+				afterQuery: this.afterQuery,
+				selectCheckShow: false,
+				indexShow: true,
+				columns: [
+					{
+						title: '进路ID',
+						prop: 'code'
+					},
+					{
+						title: '进路名称',
+						prop: 'name'
+					},
+					{
+						title: '所属地图名称',
+						prop: 'mapId'
+					},
+					{
+						title: '所属车站名称',
+						prop: 'stationCode'
+					},
+					{
+						title: '进路性质类型',
+						prop: 'natureType'
+
+					},
+					{
+						title: '自动进路类型',
+						prop: 'autoType'
+					},
+					{
+						title: '始端信号机名称',
+						prop: 'startSignalCode'
+					},
+					{
+						title: '终端信号机名称',
+						prop: 'endSignalCode'
+					},
+					{
+						title: '接近区段名称',
+						prop: 'nearSectionCode'
+					},
+					{
+						type: 'button',
+						title: '延续保护道岔数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.overlapSwitchDetail
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '进路侧防道岔数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.flankProtectionSwitchDetail
+							}
+						]
+					},
+					{
+						title: '折返轨名称',
+						prop: 'turnBackSectionCode'
+					},
+
+					{
+						type: 'button',
+						title: '进路自动触发区段数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.routeTrigger
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '进路延续保护区段数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.routeOverlap
+							}
+						]
+					},
+
+					{
+						type: 'button',
+						title: '进路物理区段数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.sectionDetail
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '进路屏蔽门数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.stationStandDetail
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '进路道岔数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.accessSwitchDetail
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '敌对进路数据',
+						buttons: [
+							{
+								name: '关系',
+								handleClick: this.related
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '操作',
+						width: '200',
+						buttons: [
+							{
+								name: '编辑',
+								handleClick: this.edit
+							},
+							{
+								name: '删除',
+								handleClick: this.deleteObj,
+								type: 'danger'
+							}
+						]
+					}
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'signalList',
+			'switchList',
+			'sectionList',
+			'stationList',
+			'stationStandList'
+		])
+	},
+	watch: {
+		signalList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				for (let i = 0; i < val.length; i++) {
+					list.push({ label: val[i].uniqueName, value: val[i].code });
+				}
+				this.queryForm.queryObject.startSignalCode.config.data = list;
+				this.queryForm.queryObject.endSignalCode.config.data = list;
+			}
+		},
+		stationList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				for (let i = 0; i < val.length; i++) {
+					list.push({ label: val[i].name, value: val[i].code });
+				}
+				this.queryForm.queryObject.stationCode.config.data = list;
+			}
+		}
+	},
+	mounted() {
+		this.$Dictionary.routeNatureType().then(list => {
+			this.RouteNatureTypeList = list;
+		});
+
+		this.$Dictionary.routeAutoType().then(list => {
+			this.RouteAutoTypeList = list;
+		});
+
+		this.$Dictionary.switchLocateType().then(list => {
+			this.SwitchLocateTypeList = list;
+		});
+
+		this.acquireMapList();
+	},
+	methods: {
+		doShow() {
+			this.show = true;
+			this.reloadTable();
+		},
+		doClose() {
+			this.show = false;
+		},
+		queryFunction(params) {
+			if (this.mapInfo && this.mapInfo.id) {
+				return listRouteAccess(this.mapInfo.id, params);
+			}
+		},
+		acquireMapList() {
+			listMap().then(response => {
+				this.mapList = response.data;
+			});
+		},
+		convertField(dataDict, enumList, key, value, fieldList) {
+			if (dataDict && enumList && fieldList && enumList.length && fieldList.length) {
+				fieldList.forEach(field => {
+					enumList.forEach(elem => {
+						if (elem[key] === dataDict[field]) {
+							dataDict[field] = elem[value];
+						}
+					});
+				});
+			}
+		},
+		afterQuery(data) {
+			if (data && data.list) {
+				const that = this;
+				const list = data.list;
+				const nameList = this.queryForm.queryObject.name.config.data = [];
+				if (list) {
+					list.map(elem => {
+						nameList.push({ label: elem.name, value: elem.name });
+						that.convertField(elem, that.RouteAutoTypeList, 'code', 'name', ['autoType']);
+						that.convertField(elem, that.RouteNatureTypeList, 'code', 'name', ['natureType']);
+						that.convertField(elem, that.SwitchLocateTypeList, 'code', 'name', ['overlapSwitchLocateType']);
+						that.convertField(elem, that.mapList, 'id', 'name', ['mapId']);
+						that.convertField(elem, that.switchList, 'code', 'name', ['routeOverlapSwitchList']);
+						that.convertField(elem, that.signalList, 'code', 'uniqueName', ['startSignalCode', 'endSignalCode']);
+						that.convertField(elem, that.stationList, 'code', 'name', ['stationCode']);
+						that.convertField(elem, that.sectionList, 'code', 'name', ['nearSectionCode', 'autoTriggerSectionCode', 'turnBackSectionCode']);
+					});
+				}
+			}
+			return data;
+		},
+		// 自动触发区段数据列表
+		async routeTrigger(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				const sectionDict = {};
+				this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
+				const res = await listTriggerSection(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					title: '进路自动触发区段数据',
+					name: row.name,
+					model: {
+						field: 'routeTriggerSectionList',
+						items: [
+							{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
+							{
+								prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
+							}
+						]
+					}
+				};
+				this.$refs.previewField.doShow(fieldList, res.data);
+			}
+		},
+		// 延续保护区段数据列表
+		async routeOverlap(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				const sectionDict = {};
+				this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
+				const res = await listOverlapSection(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					title: '进路延续保护区段数据',
+					name: row.name,
+					model: {
+						items: [
+							{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
+							{
+								prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
+							}
+						]
+					}
+				};
+				this.$refs.previewField.doShow(fieldList, res.data);
+			}
+		},
+		// 物理区段数据列表
+		async sectionDetail(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				const sectionDict = {};
+				this.sectionList.map(elem => { sectionDict[elem.code] = elem.name; });
+				const res = await listPhysicsSection(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					title: '进路物理区段数据',
+					name: row.name,
+					model: {
+						items: [
+							{ prop: 'sectionCode', label: '物理区段ID', type: 'text' },
+							{
+								prop: 'sectionCode', label: '物理区段名称', type: 'select', options: sectionDict
+							}
+						]
+					}
+				};
+				this.$refs.previewField.doShow(fieldList, res.data);
+			}
+		},
+		// 屏蔽门数据列表
+		async stationStandDetail(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				const stationStandDict = {};
+				this.stationStandList.map(elem => { stationStandDict[elem.code] = elem.name; });
+				const res = await listStationStand(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					title: '进路屏蔽门数据',
+					name: row.name,
+					model: {
+						field: 'accessStandList',
+						items: [
+							{ prop: 'stationStandCode', label: '屏蔽门ID', type: 'text' },
+							{
+								prop: 'stationStandCode', label: '屏蔽门名称', type: 'select', options: stationStandDict
+							}
+						]
+					}
+				};
+				this.$refs.previewField.doShow(fieldList, res.data);
+			}
+		},
+		async overlapSwitchDetail(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				const switchDict = {};
+				const switchTypeDict = {};
+				this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
+				this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
+				const res = await listOverlapSwitch(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					title: '延续保护道岔数据',
+					name: row.name,
+					model: {
+						items: [
+							{ prop: 'switchCode', label: '道岔ID', type: 'text' },
+							{
+								prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
+							},
+							{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
+						]
+					}
+				};
+				this.$refs.previewField.doShow(fieldList, res.data);
+			}
+		},
+		async flankProtectionSwitchDetail(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				const switchDict = {};
+				const switchTypeDict = {};
+				this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
+				this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
+				const res = await listFlankProtectionSwitch(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					title: '进路侧防道',
+					name: row.name,
+					model: {
+						items: [
+							{ prop: 'switchCode', label: '道岔ID', type: 'text' },
+							{
+								prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
+							},
+							{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
+						]
+					}
+				};
+				this.$refs.previewField.doShow(fieldList, res.data);
+			}
+		},
+		// 道岔段数据列表
+		async accessSwitchDetail(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				const switchDict = {};
+				const switchTypeDict = {};
+				this.switchList.map(elem => { switchDict[elem.code] = elem.name; });
+				this.SwitchLocateTypeList.map(elem => { switchTypeDict[elem.code] = elem.name; });
+				const res = await listSwitch(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					title: '进路道岔数据',
+					name: row.name,
+					model: {
+						field: 'accessSwitchList',
+						items: [
+							{ prop: 'switchCode', label: '道岔ID', type: 'text' },
+							{
+								prop: 'switchCode', label: '道岔名称', type: 'select', options: switchDict
+							},
+							{ prop: 'switchLocateType', label: '道岔类型', type: 'select', options: switchTypeDict }
+						]
+					}
+				};
+				this.$refs.previewField.doShow(fieldList, res.data);
+			}
+		},
+		againstDetail(index, row) {
+			if (this.$refs && this.$refs.previewField && row) {
+				listRouteMapAccess(row.mapId).then(response => {
+					const againstDict = {};
+					const data = response.data;
+					data.forEach(elem => {
+						againstDict[elem.code] = elem.name;
+					});
+					function convert(data) {
+						if (data) {
+							data.accessAgainstList = data.accessAgainstList.map(elem => {
+								if (data.code === elem.accessCode) {
+									return { code: elem.againstAccessCode };
+								} else if (data.code === elem.againstAccessCode) {
+									return { code: elem.accessCode };
+								}
+							});
+							return data;
+						}
+					}
+
+					this.mapList.forEach(elem => {
+						if (elem.name === row.mapId) {
+							const fieldList = {
+								id: row.id,
+								mapId: elem.id,
+								title: '敌对进路',
+								model: {
+									field: 'accessAgainstList',
+									convert: convert,
+									items: [
+										{ prop: 'code', label: '敌对进路ID', type: 'text' },
+										{
+											prop: 'code', label: '敌对进路名称', type: 'select', options: againstDict
+										}
+									]
+								}
+							};
+							this.$refs.previewField.doShow(fieldList);
+						}
+					});
+
+				}).catch(() => {
+					this.$messageBox('操作错误');
+				});
+			}
+		},
+		// 敌对进路数据列表
+		async related(index, row) {
+			if (this.$refs && this.$refs.relatedRoute) {
+				const res = await listAgainstRoute(this.$route.params.mapId, row.code);
+				const fieldList = {
+					id: row.id,
+					mapId: this.$route.params.mapId,
+					code: row.code,
+					name: row.name
+				};
+				this.$refs.relatedRoute.doShow(fieldList, res.data);
+			}
+		},
+		edit(index, row) {
+			this.mapList.forEach(elem => {
+				if (elem.name === row.mapId) {
+					const model = {
+						mapId: elem.id,
+						id: row.id
+					};
+					queryRouteAccessDetail(model).then(response => {
+						const data = response.data;
+						this.RouteNatureTypeList.forEach(elem => {
+							if (elem.name === data.natureType) {
+								data.natureType = elem.code;
+							}
+						});
+						this.RouteAutoTypeList.forEach(elem => {
+							if (elem.name === data.autoType) {
+								data.autoType = elem.code;
+							}
+						});
+						this.SwitchLocateTypeList.forEach(elem => {
+							if (elem.name === data.overlapSwitchLocateType) {
+								data.overlapSwitchLocateType = elem.code;
+							}
+						});
+						data.accessSectionList = data.accessSectionList.map(elem => { return elem.sectionCode; });
+						data.routeOverlapSectionList = data.routeOverlapSectionList.map(elem => { return elem.sectionCode; });
+						data.routeTriggerSectionList = data.routeTriggerSectionList.map(elem => { return elem.sectionCode; });
+						data.accessStandList = data.accessStandList.map(elem => { return elem.stationStandCode; });
+						this.$emit('routeSelected', data);
+						this.doClose();
+					});
+				}
+			});
+		},
+		deleteObj(index, row) {
+			if (this.mapInfo && this.mapInfo.id && row) {
+				this.$confirm('是否确认删除？', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					deleteRouteAccess(this.mapInfo.id, row.id).then(response => {
+						this.$message.success('删除成功');
+						this.reloadTable();
+					}).catch(() => {
+						this.$messageBox('删除失败');
+					});
+				}).catch(() => {
+					this.$message.info('已取消删除');
+				});
+			}
+		},
+		reloadTable() {
+			if (this.queryList && this.queryList.reload) {
+				this.queryList.reload();
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routeoperate/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapControl">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>
+            地图名称：
+            <b>{{ mapInfo.name }}</b>
+          </span>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">预览
+          </el-button>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">创建
+          </el-button>
+        </div>
+        <el-tabs v-model="enabledTab" type="card">
+          <el-tab-pane label="进路" name="Route">
+            <route-draft
+              ref="routeEdit"
+              :selected="selected"
+              :map-info="mapInfo"
+              :route-data="routeData"
+              :card-height="cardHeight"
+              @handleSelectView="handleSelectView"
+              @setShowCenter="setShowCenter"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+      <route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
+    </div>
+  </transition>
+</template>
+<script>
+import RouteDraft from './route';
+import RouteDetail from './detail';
+
+export default {
+	name: 'RouteOperate',
+	components: {
+		RouteDraft,
+		RouteDetail
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: Object,
+			required: true
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			enabledTab: 'Route',
+			routeData: null
+		};
+	},
+	methods: {
+		clickEvent(e, model) {
+			this.onSelect(model);
+		},
+		onSelect(model) {
+			if (model) {
+				this.selected = model;
+			} else {
+				this.selected = null;
+			}
+		},
+		setDelayUnlockStatus(data, status) {
+			if (data && data.delayShowList) {
+				data.delayShowList.forEach(elem => {
+					elem.status = status;
+				});
+			}
+		},
+		routeSelected: function (data) {
+			this.routeData = data;
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.isSave = false;
+			}
+		},
+		previewRouteEvent: function () {
+			if (this.$refs && this.$refs.routeDetail) {
+				this.$refs.routeDetail.doShow();
+			}
+		},
+		createRouteEvent: function () {
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.clear();
+			}
+		},
+		setSelected(selected) {
+			this.$refs.routeEdit.setSelected(selected);
+		},
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		setShowCenter(code) {
+			this.$emit('setShowCenter', code);
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routeoperate/preview.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dialog
+    :title="mapInfo.name + ' / ' + name + ' / ' + title"
+    :visible.sync="show"
+    width="30%"
+    :before-close="doClose"
+    center
+    append-to-body
+  >
+    <el-table :data="data" border style="width: 100%">
+      <template v-for="(item, index) in form">
+        <el-table-column :key="index" :label="item.label">
+          <template slot-scope="scope">
+            <template v-if="item.type === 'select'">
+              <el-tooltip effect="dark" :content="item.options[scope.row[item.prop]]" placement="top">
+                <span>{{ item.options[scope.row[item.prop]] }}</span>
+              </el-tooltip>
+            </template>
+            <template v-if="item.type === 'text'">
+              <el-tooltip effect="dark" :content="scope.row[item.prop]" placement="top">
+                <span>{{ scope.row[item.prop] }}</span>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+// import { queryRouteAccessDetail } from '@/api/jmap/mapdraft';
+export default {
+	name: 'DictionaryDetailEdit',
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			title: '',
+			name: '',
+			form: [],
+			data: []
+		};
+	},
+	methods: {
+		doShow(fieldList, dataList) {
+			if (fieldList.model) {
+				const items = fieldList.model.items;
+				if (fieldList.model.convert) {
+					// data = fieldList.model.convert(data);
+				}
+				if (items) {
+					this.form = items;
+					this.name = fieldList.name;
+					this.data = dataList;
+					this.title = fieldList.title;
+				}
+				this.show = true;
+			}
+		},
+		doClose(done) {
+			this.show = false;
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routeoperate/related.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    :title="mapInfo.name + ' / ' + editModel.name + ' / ' + title"
+    :visible.sync="show"
+    width="40%"
+    :before-close="doClose"
+    center
+    append-to-body
+  >
+    <el-form ref="form" :model="editModel" label-width="120px" size="mini">
+      <el-form-item label="进路名称：" prop="name" readonly="true">
+        <el-input v-model="editModel.name" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="关联进路：">
+        <el-transfer
+          v-model="routeColloction"
+          filterable
+          :filter-method="filterRoute"
+          filter-placeholder="请输入名称查询"
+          :data="routeData"
+          :titles="['进路集合', '关联进路ID']"
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="doSave">保 存</el-button>
+      <el-button @click="show = false">取 消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { listRouteMapAccess, updateAgainstAccess } from '@/api/jmap/mapdraft';
+export default {
+	name: 'DictionaryDetailEdit',
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			title: '关联敌对记录',
+			routes: [],
+			routeColloction: [],
+			routeData: [],
+			editModel: {
+				code: '',
+				name: ''
+			}
+		};
+	},
+	methods: {
+		filterRoute(query, item) {
+			return item.pinyin.indexOf(query) > -1;
+		},
+		doShow(fieldList, dataList) {
+			this.routeColloction = [];
+			this.routeData = [];
+			this.editModel.id = fieldList.id;
+			this.editModel.code = fieldList.code;
+			this.editModel.name = fieldList.name;
+			dataList.forEach(elem => {
+				if (this.editModel.code === elem.againstAccessCode) {
+					this.routeColloction.push(elem.accessCode);
+				} else if (this.editModel.code === elem.accessCode) {
+					this.routeColloction.push(elem.againstAccessCode);
+				}
+			});
+			listRouteMapAccess(fieldList.mapId).then(response => {
+				if (response.data) {
+					this.routes = response.data;
+					this.routes.forEach(elem => {
+						if (elem.code !== this.editModel.code) {
+							this.routeData.push({
+								label: elem.name,
+								key: elem.code,
+								pinyin: elem.code
+							});
+						}
+					});
+				}
+				this.show = true;
+			}).catch(() => {
+				this.$messageBox('操作异常');
+			});
+		},
+		doClose(done) {
+			this.show = false;
+		},
+		doSave() {
+			const model = {
+				id: this.editModel.id,
+				routeCode: this.editModel.code,
+				mapId: this.mapInfo.id,
+				accessAgainstList: this.routeColloction.map(elem => { return { againstRouteCode: elem }; })
+			};
+			updateAgainstAccess(model).then(response => {
+				this.$message.success('保存成功');
+			}).catch(() => {
+				this.$messageBox('操作异常');
+			});
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routeoperate/route.vue

@@ -0,0 +1,622 @@
+<template>
+  <div :style="{ height: cardHeight +'px' }">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-form ref="form" :model="addModel" :rules="rules" label-width="190px" size="mini">
+        <el-form-item label="进路名称" prop="name">
+          <el-input v-model="addModel.name" />
+        </el-form-item>
+        <el-form-item label="所属设备集中站:" prop="stationCode">
+          <el-select v-model="addModel.stationCode" filterable @change="deviceChange">
+            <el-option v-for="item in stationList" :key="item.code" :label="item.name" :value="item.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否自动追踪/联锁自动触发" prop="arc">
+          <el-radio-group v-model="addModel.arc">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否车队/联锁自动进路" prop="flt">
+          <el-radio-group v-model="addModel.flt">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="延时解锁时间" prop="delayReleaseTime">
+          <el-input-number v-model="addModel.delayReleaseTime" :min="0" />
+          <span>s</span>
+        </el-form-item>
+
+        <el-form-item label="进路性质类型:" prop="natureType">
+          <el-select v-model="addModel.natureType" :filterable="true">
+            <el-option
+              v-for="item in RouteNatureTypeList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自动进路类型:" prop="autoType">
+          <el-select v-model="addModel.autoType" :filterable="true">
+            <el-option
+              v-for="item in RouteAutoTypeList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="始端信号机ID:" prop="startSignalCode">
+          <el-select v-model="addModel.startSignalCode" clearable :filterable="true">
+            <el-option
+              v-for="item in signalList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'startSignalCode' ? 'danger' : 'primary'"
+            @click="hover('startSignalCode')"
+          >激活</el-button>
+        </el-form-item>
+        <el-form-item label="终端信号机ID:" prop="endSignalCode">
+          <el-select v-model="addModel.endSignalCode" clearable :filterable="true">
+            <el-option
+              v-for="item in signalList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'endSignalCode' ? 'danger' : 'primary'"
+            @click="hover('endSignalCode')"
+          >激活</el-button>
+        </el-form-item>
+        <el-form-item label="接近区段ID:" prop="nearSectionCode">
+          <el-select v-model="addModel.nearSectionCode" clearable :filterable="true">
+            <el-option
+              v-for="item in sectionList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'nearSectionCode' ? 'danger' : 'primary'"
+            @click="hover('nearSectionCode')"
+          >激活</el-button>
+        </el-form-item>
+        <!-- <el-form-item label="自动触发区段ID:" prop="autoTriggerSectionCode">
+                    <el-select v-model="addModel.autoTriggerSectionCode" clearable :filterable="true">
+                        <el-option v-for="item in sectionList" :key="item.code" :label="item.name + ' (' + item.code+ ')'"
+                            :value="item.code"></el-option>
+                    </el-select>
+                    <el-button @click="hover('autoTriggerSectionCode')" :type=" field === 'autoTriggerSectionCode' ? 'danger' : 'primary'">激活</el-button>
+                </el-form-item> -->
+        <el-form-item label="进路自动触发区段数据:" prop="routeTriggerSectionList">
+          <el-select v-model="addModel.routeTriggerSectionList" multiple clearable :filterable="true">
+            <el-option
+              v-for="item in sectionList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'routeTriggerSectionList' ? 'danger' : 'primary'"
+            @click="hover('routeTriggerSectionList')"
+          >激活</el-button>
+        </el-form-item>
+        <el-form-item label="进路延续保护区段数据:" prop="routeOverlapSectionList">
+          <el-select v-model="addModel.routeOverlapSectionList" multiple clearable :filterable="true">
+            <el-option
+              v-for="item in sectionList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'routeOverlapSectionList' ? 'danger' : 'primary'"
+            @click="hover('routeOverlapSectionList')"
+          >激活</el-button>
+        </el-form-item>
+
+        <!-- <el-form-item label="延续保护道岔ID:" prop="routeOverlapSwitchList">
+                    <el-select v-model="addModel.routeOverlapSwitchList" multiple :filterable="true">
+                        <el-option v-for="item in switchList" :key="item.code" :label="item.name + ' (' + item.code+ ')'"
+                            :value="item.code"></el-option>
+                    </el-select>
+                    <el-button @click="hover('routeOverlapSwitchList')" :type=" field === 'routeOverlapSwitchList' ? 'danger' : 'primary'">激活</el-button>
+                </el-form-item>
+                <el-form-item label="延续保护道岔位置类型:" prop="overlapSwitchLocateType">
+                    <el-select v-model="addModel.overlapSwitchLocateType" :filterable="true">
+                        <el-option v-for="item in SwitchLocateTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                    </el-select>
+                </el-form-item> -->
+
+        <el-form-item label="延续保护道岔数据:" prop="routeOverlapSwitchList">
+          <el-select v-model="overlapCode" clearable :filterable="true" placeholder="请选择道岔数据">
+            <el-option
+              v-for="item in switchList"
+              :key="item.code"
+              :label="`${item.name}(${item.code})`"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'routeOverlapSwitchList' ? 'danger' : 'primary'"
+            @click="hover('routeOverlapSwitchList')"
+          >激活</el-button>
+          <el-button
+            type="primary"
+            @click="pushSwitch(addModel.routeOverlapSwitchList, {switchCode:overlapCode, switchLocateType:overlapType})"
+          >添加
+          </el-button>
+          <el-select v-model="overlapType" :filterable="true" placeholder="请选择道岔类型">
+            <el-option
+              v-for="item in SwitchLocateTypeList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+          <el-table :data="addModel.routeOverlapSwitchList" border style="width: 97%">
+            <el-table-column prop="switchCode" label="道岔ID">
+              <template slot-scope="scope">
+                <span>{{ swictchName(scope.row.switchCode) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="switchLocateType" label="道岔类型" />
+            <el-table-column fixed="right" label="操作" width="50">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click.native.prevent="deleteSwitch(addModel.routeOverlapSwitchList, scope.$index)"
+                >
+                  移除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+
+        <el-form-item label="侧防道岔数据:" prop="routeFlankProtectionList">
+          <el-select v-model="flankCode" clearable :filterable="true" placeholder="请选择道岔数据">
+            <el-option
+              v-for="item in switchList"
+              :key="item.code"
+              :label="`${item.name}(${item.code})`"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'routeFlankProtectionList' ? 'danger' : 'primary'"
+            @click="hover('routeFlankProtectionList')"
+          >激活</el-button>
+          <el-button
+            type="primary"
+            @click="pushSwitch(addModel.routeFlankProtectionList, {switchCode:flankCode, switchLocateType:flankType})"
+          >添加
+          </el-button>
+          <el-select v-model="flankType" :filterable="true" placeholder="请选择道岔类型">
+            <el-option
+              v-for="item in SwitchLocateTypeList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+          <el-table :data="addModel.routeFlankProtectionList" border style="width: 97%">
+            <el-table-column prop="switchCode" label="道岔ID">
+              <template slot-scope="scope">
+                <span>{{ swictchName(scope.row.switchCode) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="switchLocateType" label="道岔类型" />
+            <el-table-column fixed="right" label="操作" width="50">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click.native.prevent="deleteSwitch(addModel.routeFlankProtectionList, scope.$index)"
+                >
+                  移除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+
+        <el-form-item label="折返轨ID:" prop="turnBackSectionCode">
+          <el-select v-model="addModel.turnBackSectionCode" clearable :filterable="true">
+            <el-option
+              v-for="item in sectionList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'turnBackSectionCode' ? 'danger' : 'primary'"
+            @click="hover('turnBackSectionCode')"
+          >激活</el-button>
+        </el-form-item>
+        <el-form-item label="进路物理区段数据:" prop="accessSectionList">
+          <el-select v-model="addModel.accessSectionList" multiple :filterable="true" placeholder="请选择">
+            <el-option
+              v-for="item in sectionList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'accessSectionList' ? 'danger' : 'primary'"
+            @click="hover('accessSectionList')"
+          >激活</el-button>
+        </el-form-item>
+        <el-form-item label="进路屏蔽门数据:" prop="accessStandList">
+          <el-select v-model="addModel.accessStandList" multiple :filterable="true" placeholder="请选择">
+            <el-option
+              v-for="item in stationStandList"
+              :key="item.code"
+              :label="item.code"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'accessStandList' ? 'danger' : 'primary'"
+            @click="hover('accessStandList')"
+          >激活</el-button>
+        </el-form-item>
+        <el-form-item label="进路道岔数据:" prop="accessSwitchList">
+          <el-select v-model="accessCode" clearable :filterable="true" placeholder="请选择道岔数据">
+            <el-option
+              v-for="item in switchList"
+              :key="item.code"
+              :label="`${item.name}(${item.code})`"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button
+            :type=" field === 'accessSwitchList' ? 'danger' : 'primary'"
+            @click="hover('accessSwitchList')"
+          >激活</el-button>
+          <el-button
+            type="primary"
+            @click="pushSwitch(addModel.accessSwitchList, { switchCode: accessCode, switchLocateType: accessType } )"
+          >添加</el-button>
+          <el-select v-model="accessType" :filterable="true" placeholder="请选择道岔类型">
+            <el-option
+              v-for="item in SwitchLocateTypeList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+          <el-table :data="addModel.accessSwitchList" border style="width: 97%">
+            <el-table-column prop="switchCode" label="道岔ID">
+              <template slot-scope="scope">
+                <span>{{ swictchName(scope.row.switchCode) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="switchLocateType" label="道岔类型" />
+            <el-table-column fixed="right" label="操作" width="50">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click.native.prevent="deleteSwitch(addModel.accessSwitchList, scope.$index)"
+                >
+                  移除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+        <el-form-item>
+          <el-button-group>
+            <el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">保存
+            </el-button>
+            <el-button v-else type="warning" size="small" :loading="loading" @click="update">更新</el-button>
+          </el-button-group>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import { createRouteAccess, updateRouteAccess } from '@/api/jmap/mapdraft';
+import { ViewMode } from '@/scripts/ConstDic';
+
+export default {
+	name: 'RouteOperation',
+	props: {
+		selected: {
+			type: Object,
+			required: true
+		},
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		routeData: {
+			type: Object,
+			required: true
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			isSave: true,
+			field: '',
+			overlapCode: '',
+			overlapType: '',
+			flankCode: '',
+			flankType: '',
+			accessCode: '',
+			accessType: '',
+			loading: false,
+			RouteNatureTypeList: [],
+			/*
+                    { code: '01', name: '列车进路' },
+                    { code: '02', name: '调车进路' },
+                    { code: '03', name: '折返进路' }
+                */
+			RouteAutoTypeList: [],
+			/*
+                    { code: '01', name: '自动进路' },
+                    { code: '02', name: '非自动进路' }
+                */
+			SwitchLocateTypeList: [],
+			/*
+                    { code: '01', name: '定位' },
+                    { code: '02', name: '反位' }
+                */
+			addModel: {
+				mapId: '',
+				code: '',
+				name: '',
+				stationCode: '',
+				startSignalCode: '',
+				endSignalCode: '',
+				nearSectionCode: '',
+				autoTriggerSectionCode: '',
+				routeOverlapSwitchList: [],
+				turnBackSectionCode: '',
+				natureType: '',
+				autoType: '',
+				arc: false,
+				flt: false,
+				delayReleaseTime: '',
+				routeFlankProtectionList: [],
+				routeTriggerSectionList: [],
+				routeOverlapSectionList: [],
+				accessSectionList: [],
+				accessStandList: [],
+				accessSwitchList: []
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'signalList',
+			'switchList',
+			'sectionList',
+			'stationList',
+			'stationStandList'
+		]),
+		routeName: {
+			// get() {
+			// 	if (this.isSave) {
+			// 		let beg = ''; let end = '';
+			// 		if (this.signalList) {
+			// 			this.signalList.forEach(elem => {
+			// 				if (elem.code === this.addModel.startSignalCode) beg = elem.name;
+			// 				if (elem.code === this.addModel.endSignalCode) end = elem.name;
+			// 			});
+			// 		}
+			// 		return this.addModel.name = beg + '-' + end;
+			// 	}
+			// }
+		},
+		rules() {
+			const baseRules = {
+				name: [
+					{ required: true, message: '请输入进路名称', trigger: 'change' }
+				],
+				stationCode: [
+					{ required: true, message: '请选择关联车站', trigger: 'change' }
+				],
+				startSignalCode: [
+					{ required: true, message: '请选择开始信号机', trigger: 'change' }
+				],
+				endSignalCode: [
+					{ required: true, message: '请选择结束信号机', trigger: 'change' }
+				],
+				nearSectionCode: [
+					{ required: true, message: '请选择接近区段', trigger: 'change' }
+				],
+				natureType: [
+					{ required: true, message: '请选择进路性质类型', trigger: 'change' }
+				],
+				autoType: [
+					{ required: true, message: '请选择自动进路类型', trigger: 'change' }
+				],
+				accessSectionList: [
+					{ required: true, message: '请选择进路物理区段数据', trigger: 'change' }
+				]
+			};
+			return baseRules;
+		}
+	},
+	watch: {
+		mapInfo(val) {
+			if (val) {
+				this.addModel.mapId = val.id;
+			}
+		},
+		routeData(val, old) {
+			if (val) {
+				this.addModel = val;
+			}
+		},
+		routeName(val, old) {
+			if (val) {
+				this.addModel.name = val;
+			}
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.handleSelectView(ViewMode.PHYSICAL);
+		});
+		this.$Dictionary.routeNatureType().then(list => {
+			this.RouteNatureTypeList = list;
+		});
+		this.$Dictionary.routeAutoType().then(list => {
+			this.RouteAutoTypeList = list;
+		});
+		this.$Dictionary.switchLocateType().then(list => {
+			this.SwitchLocateTypeList = list;
+		});
+	},
+	methods: {
+		swictchName(code) {
+			let name = '';
+			if (code) {
+				const swch = this.$store.getters['map/getDeviceByCode'](code);
+				if (swch) {
+					name = `${swch.name}(${swch.code})`;
+				}
+			}
+			return name;
+		},
+		deviceChange(code) {
+			this.$emit('setShowCenter', code);
+		},
+		// 切换地图属性
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		hover(field) {
+			this.field = field === this.field ? '' : field;
+		},
+		pushSwitch(list, data) {
+			const index = list.findIndex(elem => { return elem.switchCode == data.switchCode; });
+			if (index < 0) {
+				list.push(data);
+			} else {
+				this.$messageBox('相同ID的数据已存在');
+			}
+		},
+		deleteSwitch(list, index) {
+			list.splice(index, 1);
+		},
+		buildModel(code) {
+			const model = Object.assign({}, this.addModel);
+			model['mapId'] = this.mapInfo.id;
+			model['accessSectionList'] = this.addModel.accessSectionList.map(elem => { return { sectionCode: elem }; });
+			model['routeTriggerSectionList'] = this.addModel.routeTriggerSectionList.map(elem => { return { mapId: this.mapInfo.id, routeCode: model.code, sectionCode: elem }; });
+			model['routeOverlapSectionList'] = this.addModel.routeOverlapSectionList.map(elem => { return { mapId: this.mapInfo.id, routeCode: model.code, sectionCode: elem }; });
+			model['accessStandList'] = this.addModel.accessStandList.map(elem => { return { stationStandCode: elem }; });
+			if (code) { model['code'] = code; }
+
+			return model;
+		},
+		save() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.loading = true;
+					createRouteAccess(this.buildModel(getUID('Route'))).then(response => {
+						this.$message.success('创建成功');
+						this.loading = false;
+						this.clear();
+					}).catch(() => {
+						this.$messageBox('操作异常');
+						this.loading = false;
+					});
+				}
+			});
+		},
+		update() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.loading = true;
+					updateRouteAccess(this.buildModel()).then(response => {
+						this.$message.success('更新成功');
+						this.loading = false;
+						this.clear();
+					}).catch(() => {
+						this.$messageBox('操作异常');
+						this.loading = false;
+					});
+				}
+			});
+		},
+		clear() {
+			if (this.$refs && this.$refs.form && this.mapInfo) {
+				delete this.addModel.id;
+				this.$refs.form.resetFields();
+				this.addModel.mapId = this.mapInfo.id;
+				this.addModel.accessSwitchList = [];
+				this.addModel.routeFlankProtectionList = [];
+				this.addModel.routeOverlapSwitchList = [];
+				if (this.selected && this.selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+					this.addModel.stationCode = this.selected.code;
+				}
+				this.isSave = true;
+			}
+		},
+		setSelected(selected) {
+			if (selected) {
+				if (selected._type.toUpperCase() === 'Station'.toUpperCase()) {
+					this.addModel.stationCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'startSignalCode'.toUpperCase()) {
+					this.addModel.startSignalCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Signal'.toUpperCase() && this.field.toUpperCase() === 'endSignalCode'.toUpperCase()) {
+					this.addModel.endSignalCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'nearSectionCode'.toUpperCase()) {
+					this.addModel.nearSectionCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'autoTriggerSectionCode'.toUpperCase()) {
+					this.addModel.autoTriggerSectionCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeTriggerSectionList'.toUpperCase()) {
+					if (this.addModel.routeTriggerSectionList.indexOf(selected.code) === -1) {
+						this.addModel.routeTriggerSectionList.push(selected.code);
+					}
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSectionList'.toUpperCase()) {
+					if (this.addModel.routeOverlapSectionList.indexOf(selected.code) === -1) {
+						this.addModel.routeOverlapSectionList.push(selected.code);
+					}
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'turnBackSectionCode'.toUpperCase()) {
+					this.addModel.turnBackSectionCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'accessSectionList'.toUpperCase()) {
+					if (this.addModel.accessSectionList.indexOf(selected.code) === -1) {
+						this.addModel.accessSectionList.push(selected.code);
+					}
+				} else if (selected._type.toUpperCase() === 'StationStand'.toUpperCase() && this.field.toUpperCase() === 'accessStandList'.toUpperCase()) {
+					if (this.addModel.accessStandList.indexOf(selected.code) === -1) {
+						this.addModel.accessStandList.push(selected.code);
+					}
+				} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeOverlapSwitchList'.toUpperCase()) {
+					this.overlapCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'accessSwitchList'.toUpperCase()) {
+					this.accessCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'routeFlankProtectionList'.toUpperCase()) {
+					this.flankCode = selected.code;
+				}
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routingoperate/detail.vue

@@ -0,0 +1,256 @@
+<template>
+  <el-dialog title="交路列表" :visible.sync="show" width="85%" :before-do-close="doClose">
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+    <pre-view-field ref="previewField" :map-info="mapInfo" />
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listMap } from '@/api/jmap/mapdraft';
+import { listRouting, deleteRouting, getRouting } from '@/api/jmap/mapdraft';
+import PreViewField from './preview';
+
+export default {
+	name: 'RouteDetail',
+	components: {
+		PreViewField
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			mapList: [],
+			pagerConfig: {
+				pageSize: 'pageSize',
+				pageIndex: 'pageNum'
+			},
+			queryForm: {
+				labelWidth: '120px',
+				queryObject: {
+					startStationCode: {
+						type: 'select',
+						label: '起始站',
+						config: {
+							data: []
+						}
+					},
+					endStationCode: {
+						type: 'select',
+						label: '终到站',
+						config: {
+							data: []
+						}
+					}
+				}
+			},
+			queryList: {
+				query: this.queryFunction,
+				afterQuery: this.afterQuery,
+				selectCheckShow: false,
+				indexShow: true,
+				columns: [
+					{
+						title: '交路code',
+						prop: 'code'
+					},
+					{
+						title: '起始站',
+						prop: 'startStationCode'
+
+					},
+					{
+						title: '起始站台',
+						prop: 'startSectionCode'
+					},
+					{
+						title: '终到站',
+						prop: 'endStationCode'
+					},
+					{
+						title: '终到站台',
+						prop: 'endSectionCode'
+					},
+					{
+						title: '方向',
+						prop: 'directionCode',
+						type: 'tag',
+						columnValue: (row) => { return this.$ConstSelect.translate(row.directionCode, 'DirectionCodeList'); },
+						tagType: (row) => { if (row.directionCode === '0') { return 'primary'; } else { return 'success'; } }
+					},
+					{
+						title: '描述',
+						prop: 'remarks'
+					},
+					{
+						type: 'button',
+						title: '区段数据',
+						buttons: [
+							{
+								name: '预览',
+								handleClick: this.sectionDetail
+							}
+						]
+					},
+					{
+						type: 'button',
+						title: '操作',
+						width: '200',
+						buttons: [
+							{
+								name: '编辑',
+								handleClick: this.editObj
+							},
+							{
+								name: '删除',
+								handleClick: this.deleteObj,
+								type: 'danger'
+							}
+						]
+					}
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'stationList'
+		])
+	},
+	watch: {
+		stationList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				val.forEach(elem => {
+					list.push({ label: this.formatName(elem.code), value: elem.code });
+				});
+				this.queryForm.queryObject.startStationCode.config.data = list;
+				this.queryForm.queryObject.endStationCode.config.data = list;
+			}
+		}
+	},
+	mounted() {
+		this.acquireMapList();
+	},
+	methods: {
+		doShow() {
+			this.show = true;
+			this.reloadTable();
+		},
+		doClose() {
+			this.show = false;
+		},
+		formatName(code) {
+			let name = '';
+			const device = this.$store.getters['map/getDeviceByCode'](code);
+			if (device) {
+				name = device.name;
+			}
+
+			return name;
+		},
+		queryFunction(params) {
+			if (this.mapInfo && this.mapInfo.id) {
+				return listRouting(this.mapInfo.id, params);
+			}
+		},
+		acquireMapList() {
+			// 地图名称列表
+			listMap().then(response => {
+				this.mapList = response.data;
+			});
+		},
+		convertField(dataDict, enumList, key, value, fieldList) {
+			if (dataDict && enumList && fieldList && enumList.length && fieldList.length) {
+				fieldList.forEach(field => {
+					enumList.forEach(elem => {
+						if (elem[key] === dataDict[field]) {
+							dataDict[field] = elem[value];
+						}
+					});
+				});
+			}
+		},
+		afterQuery(data) {
+			if (data && data.list) {
+				const that = this;
+				const list = data.list;
+				if (list) {
+					list.map(elem => {
+						that.convertField(elem, that.mapList, 'id', 'name', ['mapId']);
+						elem.startStationCode = that.formatName(elem.startStationCode);
+						elem.startSectionCode = that.formatName(elem.startSectionCode);
+						elem.endStationCode = that.formatName(elem.endStationCode);
+						elem.endSectionCode = that.formatName(elem.endSectionCode);
+					});
+				}
+			}
+			return data;
+		},
+		editObj(index, row) {
+			getRouting(row.id).then(response => {
+				const data = Object.assign({ code: response.data.id }, response.data);
+				this.$emit('routingSelected', data);
+				this.doClose();
+			});
+		},
+		deleteObj(index, row) {
+			if (this.mapInfo && this.mapInfo.id && row) {
+				// 删除
+				deleteRouting(row.id).then(response => {
+					this.$message.success('删除成功');
+					this.reloadTable();
+				}).catch(() => {
+					this.$messageBox('删除失败');
+				});
+			}
+		},
+		sectionDetail(index, row) {
+			const sectionDict = {};
+			const stationDict = {};
+
+			this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
+			this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
+
+			const fieldList = {
+				id: row.id,
+				mapId: this.$route.params.mapId,
+				title: '区段列表',
+				name: row.name,
+				model: {
+					field: 'routingSectionList',
+					items: [
+						{ prop: 'stationCode', label: '车站编码', type: 'text' },
+						{
+							prop: 'stationCode', label: '区段名称', type: 'select', options: stationDict
+						},
+						{ prop: 'sectionCode', label: '区段编码', type: 'text' },
+						{
+							prop: 'sectionCode', label: '区段名称', type: 'select', options: sectionDict
+						}
+					]
+				}
+			};
+			this.$refs.previewField.doShow(fieldList, row.routingSectionList);
+		},
+		reloadTable() {
+			if (this.queryList && this.queryList.reload) {
+				this.queryList.reload();
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routingoperate/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapControl">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>
+            地图名称：
+            <b>{{ mapInfo.name }}</b>
+          </span>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">预览
+          </el-button>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">新建
+          </el-button>
+        </div>
+        <el-tabs v-model="enabledTab" type="card">
+          <el-tab-pane label="交路" name="Route">
+            <route-draft
+              ref="routeEdit"
+              :selected="selected"
+              :map-info="mapInfo"
+              :route-data="routeData"
+              :card-height="cardHeight"
+              @handleSelectView="handleSelectView"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+      <route-detail ref="routeDetail" :map-info="mapInfo" @routingSelected="routingSelected" />
+    </div>
+  </transition>
+</template>
+<script>
+import RouteDraft from './route';
+import RouteDetail from './detail';
+
+export default {
+	name: 'PathOperate',
+	components: {
+		RouteDraft,
+		RouteDetail
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: Object,
+			required: true
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			enabledTab: 'Route',
+			routeData: null
+		};
+	},
+	methods: {
+		clickEvent(e, model) {
+			this.onSelect(model);
+		},
+		onSelect(model) {
+			if (model) {
+				this.selected = model;
+			} else {
+				this.selected = null;
+			}
+		},
+		setDelayUnlockStatus(data, status) {
+			if (data && data.delayShowList) {
+				data.delayShowList.forEach(elem => {
+					elem.status = status;
+				});
+			}
+		},
+		routingSelected: function (data) {
+			this.routeData = data;
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.isSave = false;
+			}
+		},
+		previewRouteEvent: function () {
+			if (this.$refs && this.$refs.routeDetail) {
+				this.$refs.routeDetail.doShow();
+			}
+		},
+		createRouteEvent: function () {
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.clear();
+			}
+		},
+		setSelected(selected) {
+			this.$refs.routeEdit.setSelected(selected);
+		},
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		setShowCenter(code) {
+			this.$emit('setShowCenter', code);
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routingoperate/preview.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dialog
+    :title="mapInfo.name + ' / ' + name + ' / ' + title"
+    :visible.sync="show"
+    width="30%"
+    :before-close="doClose"
+    center
+    append-to-body
+  >
+    <el-table :data="data" border style="width: 100%">
+      <template v-for="(item, index) in form">
+        <el-table-column :key="index" :label="item.label">
+          <template slot-scope="scope">
+            <template v-if="item.type === 'select'">
+              <el-tooltip effect="dark" :content="item.options[scope.row[item.prop]]" placement="top">
+                <span>{{ item.options[scope.row[item.prop]] }}</span>
+              </el-tooltip>
+            </template>
+            <template v-if="item.type === 'text'">
+              <el-tooltip effect="dark" :content="scope.row[item.prop]" placement="top">
+                <span>{{ scope.row[item.prop] }}</span>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+// import { queryRouteAccessDetail } from '@/api/jmap/mapdraft';
+export default {
+	name: 'DictionaryDetailEdit',
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			title: '',
+			name: '',
+			form: [],
+			data: []
+		};
+	},
+	methods: {
+		doShow(fieldList, dataList) {
+			if (fieldList.model) {
+				const items = fieldList.model.items;
+				if (fieldList.model.convert) {
+					// data = fieldList.model.convert(data);
+				}
+				if (items) {
+					this.form = items;
+					this.name = fieldList.name;
+					this.data = dataList;
+					this.title = fieldList.title;
+				}
+				this.show = true;
+			}
+		},
+		doClose(done) {
+			this.show = false;
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/routingoperate/route.vue

@@ -0,0 +1,371 @@
+<template>
+  <div :style="{ height: cardHeight +'px' }">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
+        <div class="definition">
+          <el-form-item label="交路名称" prop="name">
+            <el-input v-model="addModel.name" />
+          </el-form-item>
+          <el-form-item label="起始站:" prop="startStationCode">
+            <el-select v-model="addModel.startStationCode" clearable :filterable="true">
+              <el-option
+                v-for="item in filterStationList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+              <!-- </el-input> -->
+            </el-select>
+            <el-button
+              :type=" field === 'startStationCode' ? 'danger' : 'primary'"
+              @click="hover('startStationCode')"
+            >激活</el-button>
+          </el-form-item>
+          <el-form-item label="起始区段:" prop="startSectionCode">
+            <el-select v-model="addModel.startSectionCode" clearable :filterable="true">
+              <el-option
+                v-for="item in filterSectionList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+            <el-button
+              :type=" field === 'startSectionCode' ? 'danger' : 'primary'"
+              @click="hover('startSectionCode')"
+            >激活</el-button>
+          </el-form-item>
+          <el-form-item label="终到站:" prop="endStationCode">
+            <el-select v-model="addModel.endStationCode" clearable :filterable="true">
+              <el-option
+                v-for="item in filterStationList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+              <!-- </el-input> -->
+            </el-select>
+            <el-button
+              :type=" field === 'endStationCode' ? 'danger' : 'primary'"
+              @click="hover('endStationCode')"
+            >激活</el-button>
+          </el-form-item>
+          <el-form-item label="终到区段:" prop="endSectionCode">
+            <el-select v-model="addModel.endSectionCode" clearable :filterable="true">
+              <el-option
+                v-for="item in filterSectionList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+            <el-button
+              :type=" field === 'endSectionCode' ? 'danger' : 'primary'"
+              @click="hover('endSectionCode')"
+            >激活</el-button>
+          </el-form-item>
+          <el-form-item label="方向" prop="directionCode">
+            <el-select v-model="addModel.directionCode" clearable :filterable="true" placeholder="请选择方向">
+              <el-option
+                v-for="item in DirectionCodeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="描述:" prop="remarks">
+            <el-input v-model="addModel.remarks" type="textarea" :rows="4" placeholder="请输入内容" />
+          </el-form-item>
+          <el-form-item label="交路区段数据:" prop="routingSectionList">
+            <div>
+              <el-select v-model="stationCode" clearable :filterable="true" placeholder="请选择车站数据">
+                <el-option
+                  v-for="item in filterStationList"
+                  :key="item.code"
+                  :label="`${item.name}(${item.code})`"
+                  :value="item.code"
+                />
+              </el-select>
+              <el-button
+                :type="field === 'routingStation' ? 'danger' : 'primary'"
+                @click="hover('routingStation')"
+              >激活</el-button>
+            </div>
+            <div>
+              <el-select v-model="sectionCode" clearable :filterable="true" placeholder="请选择区段数据">
+                <el-option
+                  v-for="item in sectionList"
+                  :key="item.code"
+                  :label="`${item.name}(${item.code})`"
+                  :value="item.code"
+                />
+              </el-select>
+              <el-button
+                :type=" field === 'routingSection' ? 'danger' : 'primary'"
+                @click="hover('routingSection')"
+              >激活</el-button>
+              <el-button
+                type="primary"
+                @click="pushSection(addModel.routingSectionList, {stationCode: stationCode, sectionCode: sectionCode})"
+              >
+                添加
+              </el-button>
+            </div>
+            <el-table :data="addModel.routingSectionList" border style="width: 97%">
+              <el-table-column prop="sectionCode" label="车站名称">
+                <template slot-scope="scope">
+                  <span>{{ formatName(scope.row.stationCode) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="sectionCode" label="区段名称">
+                <template slot-scope="scope">
+                  <span>{{ formatName(scope.row.sectionCode) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" width="50">
+                <template slot-scope="scope">
+                  <el-button
+                    type="text"
+                    size="small"
+                    @click.native.prevent="deleteSection(addModel.routingSectionList, scope.$index)"
+                  >
+                    移除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+          <el-form-item>
+            <el-button-group>
+              <el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">保存
+              </el-button>
+              <el-button v-else type="warning" size="small" :loading="loading" @click="update">更新
+              </el-button>
+            </el-button-group>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import { addRouting, updateRouting } from '@/api/jmap/mapdraft';
+import { ViewMode } from '@/scripts/ConstDic';
+import { formatName } from '@/utils/runPlan';
+import Sortable from 'sortablejs';
+
+export default {
+	name: 'RouteOperation',
+	props: {
+		selected: {
+			type: Object,
+			required: true
+		},
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		routeData: {
+			type: Object,
+			required: true
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			ViewMode: ViewMode,
+			field: '',
+			stationCode: '',
+			sectionCode: '',
+			isSave: true,
+			loading: false,
+			DirectionCodeList: this.$ConstSelect.DirectionCodeList,
+			addModel: {
+				name: '',
+				mapId: '',
+				code: '',
+				directionCode: '',
+				startStationCode: '',
+				startSectionCode: '',
+				endStationCode: '',
+				endSectionCode: '',
+				remarks: '',
+				routingSectionList: []
+			},
+			editShow: false,
+			rules: {
+				name: [
+					{ required: true, message: '请输入交路名称', trigger: 'change' }
+				],
+				startStationCode: [
+					{ required: true, message: '请选择起始车站', trigger: 'change' }
+				],
+				startSectionCode: [
+					{ required: true, message: '请选择起始区段', trigger: 'change' }
+				],
+				endStationCode: [
+					{ required: true, message: '请选择终到车站', trigger: 'change' }
+				],
+				endSectionCode: [
+					{ required: true, message: '请选择终到区段', trigger: 'change' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'sectionList',
+			'stationList'
+		]),
+		filterSectionList() {
+			if (this.sectionList) {
+				return this.sectionList.filter(elem => { return elem.isStandTrack || elem.isReentryTrack || elem.isTransferTrack; });
+			} else {
+				return [];
+			}
+		},
+		filterStationList() {
+			if (this.stationList) {
+				return this.stationList.filter(elem => { return true; });
+			} else {
+				return [];
+			}
+		}
+	},
+	watch: {
+		mapInfo(val) {
+			if (val) {
+				this.addModel.mapId = val.id;
+			}
+		},
+		routeData(val, old) {
+			if (val) {
+				this.addModel = val;
+				this.editShow = true;
+			}
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.handleSelectView(ViewMode.PHYSICAL);
+		});
+		this.rowDrop();
+	},
+	methods: {
+		// 行拖拽
+		rowDrop() {
+			const that = this;
+			const tbody = document.querySelector('.el-table__body-wrapper tbody');
+			if (tbody) {
+				Sortable.create(tbody, {
+					onEnd({ newIndex, oldIndex }) {
+						const currRow = that.addModel.mapRouteUnitRelList.splice(oldIndex, 1)[0];
+						that.addModel.mapRouteUnitRelList.splice(newIndex, 0, currRow);
+					}
+				});
+			}
+		},
+		hover(field) {
+			this.field = field === this.field ? '' : field;
+		},
+		formatName(code) {
+			return formatName(code);
+		},
+		setSelected(selected) {
+			if (selected) {
+				if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'startStationCode'.toUpperCase()) {
+					this.addModel.startStationCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() === 'endStationCode'.toUpperCase()) {
+					this.addModel.endStationCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'startSectionCode'.toUpperCase()) {
+					this.addModel.startSectionCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'endSectionCode'.toUpperCase()) {
+					this.addModel.endSectionCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() == 'routingSection'.toUpperCase()) {
+					this.sectionCode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Station'.toUpperCase() && this.field.toUpperCase() == 'routingStation'.toUpperCase()) {
+					this.stationCode = selected.code;
+				}
+			}
+		},
+		pushSection(list, data) {
+			if (data) {
+				const index = list.findIndex(elem => { return elem.sectionCode == data.sectionCode; });
+				if (index < 0) {
+					list.push(data);
+				} else {
+					this.$messageBox('相同ID的数据已存在');
+				}
+			}
+		},
+		deleteSection(list, index) {
+			list.splice(index, 1);
+		},
+		// 切换地图属性
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		buildModel(code) {
+			this.addModel.routingSectionList.forEach((elem, index) => {
+				elem['orderNum'] = index + 1;
+			});
+
+			const model = Object.assign({}, this.addModel);
+			model['mapId'] = this.mapInfo.id;
+
+			if (code) { model['code'] = code; }
+			return model;
+		},
+		save() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.loading = true;
+					addRouting(this.buildModel(getUID('Routing'))).then(resp => {
+						this.$message.success('创建交路成功！');
+						this.loading = false;
+						this.clear();
+					}).catch(() => {
+						this.$messageBox('创建交路失败');
+						this.loading = false;
+					});
+
+				}
+			});
+		},
+		update() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.loading = true;
+					updateRouting(this.buildModel()).then(resp => {
+						this.$message.success('更新交路成功！');
+						this.loading = false;
+						this.clear();
+					}).catch(() => {
+						this.$messageBox('更新交路失败');
+						this.loading = false;
+					});
+
+				}
+			});
+		},
+		clear() {
+			if (this.$refs && this.$refs.form && this.mapInfo) {
+				delete this.addModel.id;
+				this.$refs.form.resetFields();
+				this.addModel.mapId = this.mapInfo.id;
+				this.addModel.routingSectionList = [];
+				this.addModel.code = '';
+				this.stationCode = '';
+				this.sectionCode = '';
+				this.isSave = true;
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/switchoperate/detail.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-dialog title="联动道岔列表" :visible.sync="show" width="85%" :before-do-close="doClose">
+    <div>
+      <QueryListPage
+        ref="queryListPage"
+        :pager-config="pagerConfig"
+        :query-form="queryForm"
+        :query-list="queryList"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { listMap, listLinkageSwitch, deleteLinkageSwitch } from '@/api/jmap/mapdraft';
+export default {
+	name: 'RouteDetail',
+	components: {
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			show: false,
+			mapList: [],
+			pagerConfig: {
+				pageSize: 'pageSize',
+				pageIndex: 'pageNum'
+			},
+			queryForm: {
+				labelWidth: '120px',
+				queryObject: {
+					switchCode: {
+						type: 'select',
+						label: '道岔名称',
+						config: {
+							data: []
+						}
+					}
+				}
+			},
+			queryList: {
+				query: this.queryFunction,
+				afterQuery: this.afterQuery,
+				selectCheckShow: false,
+				indexShow: true,
+				columns: [
+					{
+						title: '所属地图名称',
+						prop: 'mapId'
+					},
+					{
+						title: '道岔1编号',
+						prop: 'switchACode'
+					},
+					{
+						title: '道岔2编号',
+						prop: 'switchBCode'
+					},
+					{
+						type: 'button',
+						title: '操作',
+						width: '200',
+						buttons: [
+							{
+								name: '删除',
+								handleClick: this.deleteObj,
+								type: 'danger'
+							}
+						]
+					}
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'switchList'
+		])
+	},
+	watch: {
+		switchList: function (val, old) {
+			const list = [];
+			if (val && val.length) {
+				for (let i = 0; i < val.length; i++) {
+					list.push({ label: val[i].name, value: val[i].code });
+				}
+				this.queryForm.queryObject.switchCode.config.data = list;
+			}
+		}
+	},
+	mounted() {
+		this.acquireMapList();
+	},
+	methods: {
+		doShow() {
+			this.show = true;
+			this.reloadTable();
+		},
+		doClose() {
+			this.show = false;
+		},
+		queryFunction(params) {
+			if (this.mapInfo && this.mapInfo.id) {
+				// 获取联动道岔列表
+				return listLinkageSwitch(this.mapInfo.id, params);
+			}
+		},
+		acquireMapList() {
+			// 地图名称列表
+			listMap().then(response => {
+				this.mapList = response.data;
+			});
+		},
+		convertField(dataDict, enumList, key, value, fieldList) {
+			if (dataDict && enumList && fieldList && enumList.length && fieldList.length) {
+				fieldList.forEach(field => {
+					enumList.forEach(elem => {
+						if (elem[key] === dataDict[field]) {
+							dataDict[field] = elem[value];
+						}
+					});
+				});
+			}
+		},
+		afterQuery(data) {
+			if (data && data.list) {
+				const that = this;
+				const list = data.list;
+				if (list) {
+					list.map(elem => {
+						that.convertField(elem, that.mapList, 'id', 'name', ['mapId']);
+						that.convertField(elem, that.switchList, 'code', 'name', ['switchACode', 'switchBCode']);
+					});
+				}
+			}
+			return data;
+		},
+		deleteObj(index, row) {
+			if (this.mapInfo && this.mapInfo.id && row) {
+				// 删除 双动道岔
+				deleteLinkageSwitch(this.mapInfo.id, row.id).then(response => {
+					this.$message.success('删除成功');
+					this.reloadTable();
+				}).catch(() => {
+					this.$messageBox('删除失败');
+				});
+			}
+		},
+		reloadTable() {
+			if (this.queryList && this.queryList.reload) {
+				this.queryList.reload();
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/switchoperate/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapControl">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>
+            地图名称：
+            <b>{{ mapInfo.name }}</b>
+          </span>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="previewRouteEvent">预览</el-button>
+          <el-button type="text" style="float: right; padding: 3px 3px" @click="createRouteEvent">重置</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" type="card">
+          <el-tab-pane label="联动道岔" name="Route">
+            <route-draft
+              ref="routeEdit"
+              :selected="selected"
+              :map-info="mapInfo"
+              :route-data="routeData"
+              :card-height="cardHeight"
+              @handleSelectView="handleSelectView"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+      <route-detail ref="routeDetail" :map-info="mapInfo" @routeSelected="routeSelected" />
+    </div>
+  </transition>
+</template>
+<script>
+import RouteDraft from './route';
+import RouteDetail from './detail';
+
+export default {
+	name: 'SwitchOperate',
+	components: {
+		RouteDraft,
+		RouteDetail
+	},
+	props: {
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: Object,
+			required: true
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			enabledTab: 'Route',
+			routeData: null
+		};
+	},
+	methods: {
+		clickEvent(e, model) {
+			this.onSelect(model);
+		},
+		onSelect(model) {
+			if (model) {
+				this.selected = model;
+			} else {
+				this.selected = null;
+			}
+		},
+		setDelayUnlockStatus(data, status) {
+			if (data && data.delayShowList) {
+				data.delayShowList.forEach(elem => {
+					elem.status = status;
+				});
+			}
+		},
+		routeSelected: function (data) {
+			this.routeData = data;
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.isSave = false;
+			}
+		},
+		previewRouteEvent: function () {
+			if (this.$refs && this.$refs.routeDetail) {
+				this.$refs.routeDetail.doShow();
+			}
+		},
+		createRouteEvent: function () {
+			if (this.$refs && this.$refs.routeEdit) {
+				this.$refs.routeEdit.clear();
+			}
+		},
+		setSelected(selected) {
+			this.$refs.routeEdit.setSelected(selected);
+		},
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		setShowCenter(code) {
+			this.$emit('setShowCenter', code);
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapedit/switchoperate/route.vue

@@ -0,0 +1,192 @@
+<template>
+  <div :style="{ height: cardHeight +'px' }">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-form ref="form" :model="addModel" :rules="rules" label-width="120px" size="mini">
+        <el-form-item label="道岔ID 1:" prop="switchACode">
+          <el-select v-model="addModel.switchACode" clearable :filterable="true">
+            <el-option
+              v-for="item in switchList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button :type=" field === 'switchACode' ? 'danger' : 'primary'" @click="hover('switchACode')">激活
+          </el-button>
+        </el-form-item>
+        <el-form-item label="道岔ID 2:" prop="switchBCode">
+          <el-select v-model="addModel.switchBCode" clearable :filterable="true">
+            <el-option
+              v-for="item in switchList"
+              :key="item.code"
+              :label="item.name + ' (' + item.code+ ')'"
+              :value="item.code"
+            />
+          </el-select>
+          <el-button :type=" field === 'switchBCode' ? 'danger' : 'primary'" @click="hover('switchBCode')">激活
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button-group>
+            <el-button type="primary" size="small" :loading="loading" @click="save">保存</el-button>
+          </el-button-group>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { createLinkageSwitch } from '@/api/jmap/mapdraft';
+import { ViewMode } from '@/scripts/ConstDic';
+
+export default {
+	name: 'RouteOperation',
+	components: {
+	},
+	props: {
+		selected: {
+			type: Object,
+			required: true
+		},
+		mapInfo: {
+			type: Object,
+			required: true
+		},
+		routeData: {
+			type: Object,
+			required: true
+		},
+		cardHeight: {
+			type: Number || String,
+			required: true
+		}
+	},
+	data() {
+		var switchBCode = (rule, value, callback) => {
+			if (!value) {
+				return callback(new Error('请选择道岔ID'));
+			}
+			setTimeout(() => {
+				if (value == this.addModel.switchACode) {
+					callback(new Error('道岔不能为同一个'));
+				} else {
+					callback();
+				}
+			}, 100);
+		};
+		return {
+			field: '',
+			code: '',
+			type: '',
+			loading: false,
+			addModel: {
+				mapId: '',
+				name: '',
+				switchACode: '',
+				switchBCode: ''
+			},
+			rules: {
+				switchACode: [
+					{ required: true, message: '请选择道岔ID', trigger: 'change' }
+				],
+				switchBCode: [
+					{ required: true, validator: switchBCode, trigger: 'change' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'signalList',
+			'switchList',
+			'sectionList',
+			'stationList',
+			'stationStandList'
+		]),
+		routeName: {
+			// get: function () {
+			// 	let beg = ''; let end = '';
+			// 	if (this.signalList) {
+			// 		this.signalList.forEach(elem => {
+			// 			if (elem.code === this.addModel.startSignalCode) beg = elem.name;
+			// 			if (elem.code === this.addModel.endSignalCode) end = elem.name;
+			// 		});
+			// 	}
+			// 	return this.addModel.name = beg + '-' + end;
+			// }
+		}
+	},
+	watch: {
+		mapInfo(val) {
+			if (val) {
+				this.addModel.mapId = val.id;
+			}
+		},
+		routeData(val, old) {
+			if (val) {
+				this.addModel = val;
+			}
+		},
+		routeName(val, old) {
+			if (val) {
+				this.addModel.name = val;
+			}
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.handleSelectView(ViewMode.PHYSICAL);
+		});
+	},
+	methods: {
+		// 切换地图属性
+		handleSelectView(handle) {
+			this.$emit('handleSelectView', handle);
+		},
+		hover(field) {
+			this.field = field === this.field ? '' : field;
+		},
+		buildModel() {
+			const model = Object.assign({}, this.addModel);
+			model['mapId'] = this.mapInfo.id;
+			return model;
+		},
+		save() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					// 创建联动道岔
+					this.loading = true;
+					createLinkageSwitch(this.buildModel()).then(response => {
+						this.$message.success('创建成功');
+						this.loading = false;
+					}).catch(() => {
+						this.$messageBox('操作异常');
+						this.loading = false;
+					});
+				}
+			});
+		},
+		clear() {
+			if (this.$refs && this.$refs.form && this.mapInfo) {
+				delete this.addModel.id;
+				this.$refs.form.resetFields();
+				this.addModel = {
+					mapId: this.mapInfo.id,
+					switchACode: '',
+					switchBCode: ''
+				};
+			}
+		},
+		setSelected(selected) {
+			if (selected) {
+				if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'switchACode'.toUpperCase()) {
+					this.addModel.switchACode = selected.code;
+				} else if (selected._type.toUpperCase() === 'Switch'.toUpperCase() && this.field.toUpperCase() === 'switchBCode'.toUpperCase()) {
+					this.addModel.switchBCode = selected.code;
+				}
+			}
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapmanage/create.vue

@@ -0,0 +1,339 @@
+<template>
+  <el-dialog
+    v-loading="loadingUpload"
+    title="新建地图"
+    :visible.sync="dialogShow"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <div>
+      <el-tabs v-model="activeTab" type="card">
+        <el-tab-pane label="正常创建" name="first">
+          <el-form
+            ref="newForm"
+            label-position="right"
+            :model="newModel"
+            label-width="120px"
+            size="mini"
+            :rules="newRules"
+            @submit.native.prevent
+          >
+            <el-form-item label="地图名称:" prop="name">
+              <el-input v-model="newModel.name" />
+            </el-form-item>
+            <el-form-item label="皮肤风格:" prop="skinStyle">
+              <el-select v-model="newModel.skinStyle" placeholder="请选择">
+                <el-option
+                  v-for="item in skinStyleList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="从发布地图创建" name="second">
+          <el-form
+            ref="pullForm"
+            label-position="right"
+            :model="pullModel"
+            :rules="pullRules"
+            label-width="120px"
+            size="mini"
+          >
+            <el-form-item label="地图名称:" prop="id">
+              <el-select v-model="pullModel.id" placeholder="请选择">
+                <el-option
+                  v-for="item in publishMapList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="地图名称:" prop="name">
+              <el-input v-model="pullModel.name" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <!-- <el-tab-pane label="导入" name="third">
+                    <div class="uploadDemo">
+                        <div class="el-upload-dragger">
+                            <i class="el-icon-upload"></i>
+                            <div class="el-upload__text"><em>点击导入</em></div>
+                            <input type="file" @change="importf" ref="files" class="file_box" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
+                        </div>
+                        <div class="el-upload__tip" style="text-align: center;">只能上传excel文件</div>
+                    </div>
+                </el-tab-pane> -->
+      </el-tabs>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogShow = false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="create">确 定</el-button>
+    </span>
+  </el-dialog>
+
+</template>
+
+<script>
+import { newMap, postBuildMapImport, newUsePublishMap } from '@/api/jmap/mapdraft';
+import { listPublishMap } from '@/api/jmap/map';
+import XLSX from 'xlsx';
+import { translate, translateSheetTitle } from '@/scripts/translate';
+import { sheet_to_json } from '@/utils/Export2Excel';
+import { getSkinStyleList } from '@/api/management/mapskin';
+
+export default {
+	name: 'MapCreate',
+	props: {
+		skinStyle: {
+			type: String,
+			default() {
+				return '';
+			}
+		}
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			file: null,
+			rABS: false,
+			loadingUpload: false,
+			resultJSON: {},
+			activeTab: 'first',
+			skinStyleList: [],
+			publishMapList: [],
+			newModel: {
+				id: '',
+				name: '',
+				skinStyle: ''
+			},
+			pullModel: {
+				id: '',
+				name: ''
+			},
+			newRules: {
+				name: [
+					{ required: true, message: '请输入地图名称', trigger: 'blur' }
+				],
+				skinStyle: [
+					{ required: true, message: '请选择皮肤风格', trigger: 'change' }
+				]
+			},
+			pullRules: {
+				id: [
+					{ required: true, message: '请选择地图来源', trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: '请输入地图名称', trigger: 'change' }
+				]
+			}
+		};
+	},
+	watch: {
+		skinStyle(val) {
+			this.newModel.skinStyle = val;
+		}
+	},
+	methods: {
+		show() {
+			this.dialogShow = true;
+			this.initLoadData();
+		},
+		close() {
+			if (this.$refs.newForm) {
+				this.$refs.newForm.resetFields();
+			}
+			if (this.$refs.pullForm) {
+				this.$refs.pullForm.resetFields();
+			}
+			this.dialogShow = false;
+		},
+		handleClose() {
+			this.close();
+		},
+		initLoadData() {
+			this.skinStyleList = [];
+			getSkinStyleList().then(response => {
+				this.skinStyleList = response.data;
+			});
+
+			listPublishMap().then(response => {
+				this.publishMapList = response.data;
+			}).catch(() => {
+				this.$messageBox('加载已发布地图列表失败');
+			});
+		},
+		isNormal() {
+			return this.activeTab === 'first';
+		},
+		isThird() {
+			return this.activeTab === 'third';
+		},
+		create() {
+			if (this.isThird()) {
+				this.close();
+			} else if (this.isNormal()) {
+				this.$refs['newForm'].validate((valid) => {
+					if (valid) {
+						this.loading = true;
+						newMap(this.newModel).then(response => {
+							this.loading = false;
+							this.$emit('refresh');
+							this.$message.success('创建成功！');
+							this.close();
+						}).catch(() => {
+							this.loading = false;
+							this.$messageBox('创建失败');
+							this.close();
+						});
+					}
+				});
+			} else {
+				this.$refs['pullForm'].validate((valid) => {
+					if (valid) {
+						this.loading = true;
+						newUsePublishMap(this.pullModel).then(response => {
+							this.loading = false;
+							this.$emit('refresh');
+							this.$message.success('创建成功！');
+							this.close();
+						}).catch(() => {
+							this.loading = false;
+							this.$messageBox('创建失败');
+							this.close();
+						});
+					}
+				});
+			}
+		},
+		importf() { // 导入
+			const obj = this.$refs.files;
+			let wb;
+			if (!obj.files) return;
+			const f = obj.files[0];
+			this.loadingUpload = true;
+			const reader = new FileReader();
+			const that = this;
+			reader.onload = function (e) {
+				const data = e.target.result;
+				if (that.rABS) {
+					wb = XLSX.read(btoa(that.fixdata(data)), {// 手动转化
+						type: 'base64'
+					});
+				} else {
+					wb = XLSX.read(data, {
+						type: 'binary'
+					});
+				}
+				const resultJSONData = {};
+				for (const index in wb.Sheets) {
+
+					const titleNum = that.formatSheetTitle(index);
+					const key = translateSheetTitle.sheetName[titleNum];
+
+					const filterVal = that.handelData(key);
+					const jsonData = sheet_to_json(wb.Sheets[index]);
+					const data = that.formatJson(filterVal, jsonData, key);
+					if (key === 'base') {
+						for (const i in data[0]) {
+							resultJSONData[i] = data[0][i];
+						}
+					} else {
+						resultJSONData[key] = data;
+					}
+				}
+				that.resultJSON = resultJSONData;
+				if (that.resultJSON) {
+					postBuildMapImport(that.resultJSON).then(res => {
+						that.loadingUpload = false;
+						that.$message.success('导入成功！');
+						that.$emit('refresh');
+						that.close();
+					}).catch(error => {
+						that.loadingUpload = false;
+						that.$message.error('导入失败' + error.message);
+					});
+				}
+				obj.value = ''; // 清空上次导入文件
+			};
+			if (that.rABS) {
+				reader.readAsArrayBuffer(f);
+			} else {
+				reader.readAsBinaryString(f);
+			}
+		},
+		// 转换数据格式
+		handelData(key) {
+			const tHeader = [];
+			const tHeaderF = [];
+			if (translate[key]) {
+				translate[key].columns.forEach(item => {
+					tHeader.push(item.tHeader);
+					tHeaderF.push(item.key);
+				});
+			}
+			const filterVal = {
+				tHeader: tHeader,
+				tHeaderF: tHeaderF
+			};
+			return filterVal;
+		},
+		// 文件流转BinaryString
+		fixdata(data) {
+			var o = '';
+			var l = 0;
+			var w = 10240;
+			for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
+			o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
+			return o;
+		},
+		// 转换属性名称 格式
+		formatJson(filterVal, jsonData, key) {
+			jsonData.map((item, index) => {
+				const json = {};
+				filterVal.tHeader.map((j, o) => {
+					if (item[j] != undefined) {
+						json[filterVal.tHeaderF[o]] = translate[key].columns[o].formatter(item[j]);
+					}
+				});
+				jsonData.splice(index, 1, json);
+			});
+			return jsonData;
+		},
+		// 转换sheet名字
+		formatSheetTitle(title) {
+			let index;
+			translateSheetTitle.sheetTitle.forEach((v, i) => {
+				if (title == v) index = i;
+			});
+			return index;
+		}
+	}
+};
+</script>
+<style scoped rel="stylesheet/scss" lang="scss">
+    .uploadDemo {
+        .el-upload-dragger {
+            margin: 0 auto;
+        }
+
+        .file_box {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+    }
+</style>
+<style>
+    .el-loading-mask {
+        background-color: rgba(0, 0, 0, 0.3);
+    }
+</style>

src/views/map/mapdraft/mapmanage/edit.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-dialog title="地图编辑" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
+    <div>
+      <template v-if="basicInfo">
+        <el-form
+          ref="edit"
+          label-position="right"
+          :model="editModel"
+          :rules="editRules"
+          label-width="120px"
+          size="mini"
+          @submit.native.prevent
+        >
+          <el-form-item label="地图名称:" prop="name">
+            <el-input v-model="editModel.name" />
+          </el-form-item>
+          <el-form-item label="皮肤风格:" prop="skinStyle">
+            <el-select v-model="editModel.skinStyle" placeholder="请选择" size="mini">
+              <el-option
+                v-for="item in skinStyleList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属城市:" prop="cityCode">
+            <el-select v-model="editModel.cityCode" placeholder="请选择" size="mini">
+              <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template v-else>
+        <el-form
+          ref="updt"
+          label-position="right"
+          :model="updtModel"
+          :rules="updtRules"
+          label-width="120px"
+          size="mini"
+          @submit.native.prevent
+        >
+          <el-form-item label="X偏移:" :prop="'origin.x'">
+            <el-input v-model="updtModel.origin.x" label="X偏移" disabled />
+          </el-form-item>
+          <el-form-item label="Y偏移:" :prop="'origin.y'">
+            <el-input v-model="updtModel.origin.y" label="Y偏移" disabled />
+          </el-form-item>
+          <el-form-item label="缩放比例:" prop="scaling">
+            <el-input v-model="updtModel.scaling" label="缩放比例" disabled />
+          </el-form-item>
+        </el-form>
+      </template>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogShow = false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">确 定</el-button>
+    </span>
+  </el-dialog>
+
+</template>
+
+<script>
+import { updateMap, getMapDetail } from '@/api/jmap/mapdraft';
+import { getSkinStyleList } from '@/api/management/mapskin';
+import { updateSkinStyleByCode } from '@/api/management/mapskin';
+
+export default {
+	name: 'MapEdit',
+	props: {
+		map: {
+			type: Object,
+			required: true
+		},
+		basicInfo: {
+			type: Boolean,
+			required: true,
+			default: function () {
+				return true;
+			}
+		},
+		skinStyle: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			skinStyleList: [],
+			cityList: [],
+			editModel: {
+				id: '',
+				name: '',
+				skinStyle: '',
+				cityCode: ''
+			},
+			updtModel: {
+				code: '',
+				scaling: '',
+				origin: {
+					x: '',
+					y: ''
+				}
+			},
+			isUpdate: false
+		};
+	},
+	computed: {
+		editRules() {
+			return {
+				name: [
+					{ required: true, message: '请输入地图名称', trigger: 'blur' }
+				],
+				skinStyle: [
+					{ required: true, message: '请选择关联皮肤', trigger: 'change' }
+				],
+				cityCode: [
+					{ required: true, message: '请选择关联城市', trigger: 'change' }
+				]
+			};
+		},
+		updtRules() {
+			return {
+				linkWidth: [
+					{ required: true, message: '请输入地图Link宽度', trigger: 'blur' }
+				],
+				zoneWidth: [
+					{ required: true, message: '请输入地图区段宽度', trigger: 'blur' }
+				]
+			};
+		}
+	},
+	watch: {
+		map: function (val, old) {
+			if (val) {
+				Object.assign(this.editModel, this.map);
+			}
+		},
+		'$store.state.map.map.skinStyle': function () {
+			this.isUpdate = true;
+		}
+	},
+	mounted() {
+		this.initLoadData();
+	},
+	methods: {
+		show() {
+			const dataZoom = this.$store.state.map.dataZoom;
+			if (dataZoom) {
+				this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
+				this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
+				this.updtModel.scaling = dataZoom.scaleRate;
+			}
+			this.dialogShow = true;
+		},
+		close() {
+			if (this.basicInfo) {
+				this.$refs.edit.resetFields();
+			} else {
+				this.$refs.updt.resetFields();
+			}
+
+			this.dialogShow = false;
+		},
+		handleClose() {
+			this.close();
+		},
+		save() {
+			this.loading = true;
+			if (this.basicInfo) {
+				this.editModel.id = this.$route.params.mapId;
+				// this.editModel.skinStyle = skinStyle;
+				this.$refs['edit'].validate((valid) => {
+					if (valid) {
+						updateMap(this.editModel).then(response => {
+							this.loading = false;
+							if (this.isUpdate && this.$route.params.mapId) {
+								getMapDetail(this.$route.params.mapId).then(response => {
+									this.$store.dispatch('map/setMapData', response.data);
+								});
+							}
+							this.$message.success('更新地图成功！');
+							this.$emit('refresh');
+							this.close();
+						}).catch(error => {
+							this.loading = false;
+							this.$message.error('操作异常：' + error.message);
+						});
+					} else {
+						this.loading = false;
+					}
+				});
+			} else {
+				this.updtModel.code = this.skinStyle;
+				this.$refs['updt'].validate((valid) => {
+					if (valid) {
+						updateSkinStyleByCode(this.updtModel).then(response => {
+							this.loading = false;
+							this.close();
+							this.$message.success('更新成功');
+						}).catch(() => {
+							this.loading = false;
+							this.$messageBox('更新失败');
+						});
+					} else {
+						this.loading = false;
+					}
+				});
+			}
+		},
+		initLoadData() {
+			this.cityList = [];
+			// this.$Dictionary.CityType().then(list => {
+			// 	this.cityList = list;
+			// }).catch(() => {
+			// 	this.$messageBox('加载城市列表失败');
+			// });
+
+			this.skinStyleList = [];
+			getSkinStyleList().then(response => {
+				this.skinStyleList = response.data;
+			});
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapmanage/maplist.vue

@@ -0,0 +1,327 @@
+<template>
+  <el-card v-loading="loading" class="map-list-main">
+    <div slot="header" class="clearfix">
+      <span>草稿地图列表</span>
+      <el-button type="text" style="float: right; padding: 3px 0" @click="createMap">新建</el-button>
+      <el-button type="text" class="uploadDemo">
+        <input
+          ref="files"
+          type="file"
+          class="file_box"
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+          @change="importf"
+        >
+        导入地图
+      </el-button>
+    </div>
+    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height + 'px'}">
+      <el-tree
+        ref="tree"
+        :data="mapList"
+        node-key="id"
+        highlight-current
+        :props="defaultProps"
+        class="tree-height-max"
+        @node-click="handleNodeClick"
+        @node-contextmenu="showContextMenu"
+      >
+        <span slot-scope="{ node }">
+          <span v-if="node.data.type == 'skin'" class="el-icon-news">&nbsp;{{ node.label }}</span>
+          <span v-if="node.data.type == 'map'" class="el-icon-edit-outline">&nbsp;{{ node.label }}</span>
+        </span>
+      </el-tree>
+    </el-scrollbar>
+    <map-create ref="mapCreate" :skin-style="skinStyle" @refresh="refresh" @editmap="handleNodeClick" />
+    <map-operate-menu
+      ref="menu"
+      :point="point"
+      :edit-model="editModel"
+      :skin-style="skinStyle"
+      @refresh="refresh"
+      @mapSelected="mapSelected"
+      @jlmap3d="jlmap3d"
+    />
+
+  </el-card>
+</template>
+
+<script>
+import { DeviceMenu } from '@/scripts/ConstDic';
+import { getMapTree, getMapDetail, postBuildMapImport } from '@/api/jmap/mapdraft';
+import { UrlConfig } from '@/router/index';
+import { translate, translateSheetTitle } from '@/scripts/translate';
+import { sheet_to_json } from '@/utils/Export2Excel';
+// import PopMenu from '@/components/PopMenu';
+import MapOperateMenu from './operateMenu';
+import MapCreate from './create';
+import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+import XLSX from 'xlsx';
+
+export default {
+	name: 'MapListDraft',
+	components: {
+		// PopMenu,
+		MapCreate,
+		MapOperateMenu
+	},
+	mixins: [WindowResizeHandler],
+	data() {
+		return {
+			height: 0,
+			loading: true,
+			activeName: 'first',
+			mapList: [],
+			defaultProps: {
+				children: 'children',
+				label: 'name'
+			},
+			editModel: {},
+			skinStyle: '',
+			point: {
+				x: 0,
+				y: 0
+			}
+		};
+	},
+	mounted() {
+		this.refresh();
+	},
+	methods: {
+		resizeHandler() {
+			this.height = this._clientHeight - 115;
+		},
+		getSkinStyle(node) {
+			let next = node;
+			while (next) {
+				if (next.data && next.data.type == 'skin') {
+					this.skinStyle = next.data.id;
+					break;
+				}
+				next = next.parent;
+			}
+		},
+		showContextMenu(e, obj, node, vueElem) {
+			if (obj && obj.type == 'map') {
+				e.preventDefault();
+				const menu = DeviceMenu.Map;
+
+				this.point = {
+					x: e.clientX,
+					y: e.clientY
+				};
+				this.editModel = obj;
+				this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
+			}
+		},
+		handleNodeClick(obj, node) {
+			this.getSkinStyle(node);
+			if (obj && obj.type == 'map') {
+				this.editModel = obj;
+				this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
+				this.mapSelected({ view: 'draft' });
+			}
+		},
+		mapSelected(data) {
+			if (data && this.editModel) {
+				this.$router.push({ path: `${UrlConfig.map.draft}/${this.editModel.id}/${data.view}`, query: { name: this.editModel.name } });
+			}
+		},
+		jlmap3d() {
+			this.$router.push({ path: '/jlmap3d/edit', query: { mapid: this.editModel.id } });
+		},
+		createMap() {
+			this.$refs.mapCreate.show();
+		},
+		refresh() {
+			this.mapList = [];
+			this.loading = true;
+			getMapTree().then(response => {
+				this.loading = false;
+				this.mapList = response.data;
+				this.$refs.tree.setCurrentKey(this.$route.params.mapId); // value 绑定的node-key
+			}).catch(() => {
+				this.$messageBox('刷新树级列表失败');
+				this.loading = false;
+			});
+		},
+
+		importf() { // 导入
+			const loading = this.$loading({
+				lock: true,
+				text: '正在导入中...',
+				spinner: 'el-icon-loading',
+				background: 'rgba(0, 0, 0, 0.7)'
+			});
+			const obj = this.$refs.files;
+			let wb;
+			if (!obj.files) return;
+			const f = obj.files[0];
+			const reader = new FileReader();
+			const that = this;
+			reader.onload = function (e) {
+				const data = e.target.result;
+				if (that.rABS) {
+					wb = XLSX.read(btoa(that.fixdata(data)), {// 手动转化
+						type: 'base64'
+					});
+				} else {
+					wb = XLSX.read(data, {
+						type: 'binary'
+					});
+				}
+				const resultJSONData = { 'devices': {} };
+				for (const index in wb.Sheets) {
+
+					const titleNum = that.formatSheetTitle(index);
+					const key = translateSheetTitle.sheetName[titleNum];
+
+					const filterVal = that.handelData(key);
+					const jsonData = sheet_to_json(wb.Sheets[index]);
+					const data = that.formatJson(filterVal, jsonData, key);
+					if (key === 'base') {
+						Object.assign(resultJSONData, data[0]);
+					} else if (key === 'skinVO') {
+						resultJSONData['devices'][key] = data[0];
+					} else {
+						resultJSONData['devices'][key] = data;
+					}
+				}
+				that.resultJSON = resultJSONData;
+				if (that.resultJSON) {
+					postBuildMapImport(that.resultJSON).then(res => {
+						loading.close();
+						that.$message.success('导入成功！');
+						that.refresh();
+					}).catch(error => {
+						loading.close();
+						that.$message.error('导入失败' + error.message);
+					});
+				}
+				obj.value = ''; // 清空上次导入文件
+			};
+			if (that.rABS) {
+				reader.readAsArrayBuffer(f);
+			} else {
+				reader.readAsBinaryString(f);
+			}
+		},
+		// 转换数据格式
+		handelData(key) {
+			const tHeader = [];
+			const tHeaderF = [];
+			if (translate[key]) {
+				translate[key].columns.forEach(item => {
+					tHeader.push(item.tHeader);
+					tHeaderF.push(item.key);
+				});
+			}
+			const filterVal = {
+				tHeader: tHeader,
+				tHeaderF: tHeaderF
+			};
+			return filterVal;
+		},
+		// 文件流转BinaryString
+		fixdata(data) {
+			var o = '';
+			var l = 0;
+			var w = 10240;
+			for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
+			o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
+			return o;
+		},
+		// 转换属性名称 格式
+		formatJson(filterVal, jsonData, key) {
+			jsonData.map((item, index) => {
+				const json = {};
+				filterVal.tHeader.map((j, o) => {
+					if (item[j] != undefined) {
+						json[filterVal.tHeaderF[o]] = translate[key].columns[o].formatter(item[j]);
+					}
+				});
+				jsonData.splice(index, 1, json);
+			});
+			return jsonData;
+		},
+		// 转换sheet名字
+		formatSheetTitle(title) {
+			let index;
+			translateSheetTitle.sheetTitle.forEach((v, i) => {
+				if (title == v) index = i;
+			});
+			return index;
+		},
+
+		// 前端方式导出
+		async doExportFront() {
+			const res = await getMapDetail(this.$route.params.mapId);
+			const resultData = res.data;
+			if (resultData === false) {
+				return;
+			}
+			const self = this;
+				import('@/utils/Export2Excel').then(excel => {
+					self.queryExportData(resultData).then(data => {
+						excel.export_json_excel(data, resultData.name);
+
+					}).catch(error => {
+						self.$message.error('导出执行异常：' + error.message);
+					});
+				});
+		},
+		// 格式化数据列表
+		queryExportData(data) {
+			return new Promise((resolve, reject) => {
+				const result = {
+					base: []
+				};
+				const obj = {};
+				for (const i in data) {
+					if (typeof data[i] != 'object') {
+						obj[i] = data[i];
+					} else if (data[i] instanceof Array) {
+						if (data[i].length) {
+							result[i] = [...data[i]];
+						}
+					} else if (data[i] instanceof Object) {
+						obj[i] = data[i];
+					}
+				}
+				result.base.push(obj);
+				resolve(result);
+			});
+		}
+	}
+};
+</script>
+<style scoped rel="stylesheet/scss" lang="scss">
+    .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>
+<style>
+    .el-tree {
+        overflow-x: hidden;
+    }
+	.el-card__body {
+		padding: 0px;
+	}
+    .el-tree-node.is-current>.el-tree-node__content {
+        background-color: #e4e3e3 !important;
+    }
+</style>

src/views/map/mapdraft/mapmanage/operateMenu.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <pop-menu ref="popMenu" :menu="menu" />
+    <map-edit ref="edit" :basic-info="true" :map="editModel" :skin-style="skinStyle" @refresh="refresh" />
+    <map-edit ref="axisEdit" :basic-info="false" :map="editModel" :skin-style="skinStyle" @refresh="refresh" />
+    <map-save-as ref="saveAs" :map="editModel" @refresh="refresh" />
+    <map-publish ref="publish" :map="editModel" />
+  </div>
+</template>
+
+<script>
+import { deleteMap } from '@/api/jmap/mapdraft';
+import { DeviceMenu } from '@/scripts/ConstDic';
+import { UrlConfig } from '@/router/index';
+import PopMenu from '@/components/PopMenu';
+import MapEdit from './edit';
+import MapSaveAs from './saveAs';
+import MapPublish from './publish';
+// import localStore from 'storejs';
+
+export default {
+	name: 'MapOperateMenu',
+	components: {
+		PopMenu,
+		MapEdit,
+		MapSaveAs,
+		MapPublish
+	},
+	props: {
+		point: {
+			type: Object,
+			required: true
+		},
+		skinStyle: {
+			type: String,
+			required: true
+		},
+		editModel: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			menuShow: false,
+			menu: [
+				{
+					label: '修改',
+					handler: this.updateObj
+				},
+				{
+					label: '更新坐标',
+					handler: this.updateObjAxis
+				},
+				{
+					label: '另存为',
+					handler: this.saveAs
+				},
+				{
+					label: '发布',
+					handler: this.publish
+				},
+				{
+					label: '删除',
+					handler: this.deleteObj
+				},
+				{
+					label: '编辑进路',
+					handler: this.editRoute
+				},
+				{
+					label: '编辑交路',
+					handler: this.editRouting
+				},
+				{
+					label: '编辑自动信号',
+					handler: this.editAutoRouting
+				},
+				{
+					label: '联动道岔',
+					handler: this.setSwitch
+				},
+				{
+					label: '路径单元',
+					handler: this.pathUnit
+				},
+				{
+					label: '三维化编辑',
+					handler: this.jlmap3d
+				}
+			]
+		};
+	},
+	watch: {
+		'$store.state.menuOperation.menuCount': function (val) {
+			if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Map)) {
+				this.doShow(this.$store.state.menuOperation.menuPosition);
+			} else {
+				this.doClose();
+			}
+		}
+	},
+	mounted() {
+		this.closeEvent();
+	},
+	methods: {
+		closeEvent() {
+			const self = this;
+			window.onclick = function (e) {
+				self.doClose();
+			};
+		},
+		doShow(point) {
+			this.closeEvent();
+			if (this.$refs && this.$refs.popMenu) {
+				this.$refs.popMenu.resetShowPosition(point);
+			}
+			this.menuShow = true;
+		},
+		doClose() {
+			if (this.$refs && this.$refs.popMenu) {
+				this.$refs.popMenu.close();
+			}
+			this.menuShow = false;
+		},
+		updateObj() {
+			this.doClose();
+			if (this.$refs && this.$refs.edit) {
+				this.$refs.edit.show();
+			}
+		},
+		updateObjAxis() {
+			this.doClose();
+			if (this.$refs && this.$refs.axisEdit) {
+				this.$refs.axisEdit.show();
+			}
+		},
+		saveAs() {
+			this.doClose();
+			if (this.$refs && this.$refs.saveAs) {
+				this.$refs.saveAs.show();
+			}
+		},
+		publish() {
+			this.doClose();
+			if (this.$refs && this.$refs.publish) {
+				this.$refs.publish.show();
+			}
+		},
+		deleteObj() {
+			this.doClose();
+			const _that = this;
+			this.$confirm('是否确认删除？', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				deleteMap(this.editModel.id).then(response => {
+					this.$store.dispatch('map/mapClear').then(() => {
+						_that.refresh();
+						_that.$emit('editMap', null);
+						_that.$message.success('删除成功');
+						_that.$router.push({ path: `${UrlConfig.map.draft}/0/draft` });
+					});
+				}).catch(error => {
+					_that.$message.error('删除失败：' + error.message);
+				});
+			}).catch(() => {
+			});
+		},
+		editRoute() {
+			this.$emit('mapSelected', { view: 'route' });
+		},
+		editRouting() {
+			this.$emit('mapSelected', { view: 'routing' });
+		},
+		editAutoRouting() {
+			this.$emit('mapSelected', { view: 'automatic' });
+		},
+		setSwitch() {
+			this.$emit('mapSelected', { view: 'swtich' });
+		},
+		pathUnit() {
+			this.$emit('mapSelected', { view: 'path' });
+		},
+		jlmap3d() {
+			this.$emit('jlmap3d');
+		},
+		refresh() {
+			this.$emit('refresh');
+		}
+	}
+};
+</script>

src/views/map/mapdraft/mapmanage/publish.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-dialog title="地图发布为" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
+    <div>
+      <el-form
+        ref="form"
+        label-position="right"
+        :model="editModel"
+        label-width="120px"
+        size="mini"
+        @submit.native.prevent
+      >
+        <el-form-item label="发布关联城市:" prop="cityCode">
+          <el-select v-model="editModel.cityCode" placeholder="请选择">
+            <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发布地图名称:" prop="name">
+          <el-input v-model="editModel.name" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogShow = false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="publish">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { publishMap } from '@/api/jmap/mapdraft';
+export default {
+	name: 'MapPublish',
+	props: {
+		map: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			dialogShow: false,
+			loading: false,
+			cityList: [],
+			editModel: {
+				id: '',
+				name: '',
+				cityCode: ''
+			}
+		};
+	},
+	watch: {
+		map: function (val, old) {
+			if (val) {
+				Object.assign(this.editModel, this.map);
+			}
+		}
+	},
+	mounted() {
+		// this.$Dictionary.CityType().then(list => {
+		// 	this.cityList = list;
+		// });
+	},
+	methods: {
+		show() {
+			this.dialogShow = true;
+		},
+		close() {
+			this.$refs.form.resetFields();
+			this.dialogShow = false;
+		},
+		handleClose() {
+			this.close();
+		},
+		publish() {
+			this.loading = true;
+			publishMap(this.editModel).then(response => {
+				this.loading = false;
+				if (response.data && response.data.length) {
+					this.tableToExcel(response.data);
+					this.$messageBox('发布失败，数据校验不通过');
+				} else {
+					this.$message.success('发布成功!');
+				}
+				this.close();
+			}).catch(() => {
+				this.loading = false;
+				this.$messageBox('操作异常');
+			});
+		},
+		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(['有问题数据'], dataList, '数据列表');
+                });
+		},
+		formatJson(filterVal, jsonData) {
+			return jsonData.map(v => filterVal.map(j => v[j]));
+		}
+	}
+};
+</script>