ncc代码调整

src/jmapNew/constant/nccGraphRender.js

@@ -0,0 +1,31 @@
+import nccGraphType from './nccGraphType';
+
+const nccGraphRender = {};
+
+/** Line渲染配置*/
+nccGraphRender[nccGraphType.NccLine] = {
+    _type: nccGraphType.NccLine,
+    zlevel: 1
+};
+
+/** Text渲染配置*/
+nccGraphRender[nccGraphType.NccText] = {
+    _type: nccGraphType.NccText,
+    zlevel: 1
+};
+/** RunLine渲染配置 */
+nccGraphRender[nccGraphType.RunLine] = {
+    _type: nccGraphType.RunLine,
+    zlevel: 1
+};
+/** NccStation渲染配置 */
+nccGraphRender[nccGraphType.NccStation] = {
+    _type: nccGraphType.NccStation,
+    zlevel: 1
+};
+/** NccTrain渲染配置 */
+nccGraphRender[nccGraphType.NccTrain] = {
+    _type: nccGraphType.NccTrain,
+    zlevel: 1
+};
+export default nccGraphRender;

src/jmapNew/constant/nccGraphType.js

@@ -0,0 +1,10 @@
+const nccGraphType = {
+    NccLine: 'NccLine',
+    NccText: 'NccText',
+    NccRect: 'NccRect',
+    RunLine: 'RunLine',
+    NccStation: 'NccStation',
+    NccTrain: 'NccTrain'
+};
+
+export default nccGraphType;

src/jmapNew/constant/pathsvg.js

@@ -11,15 +11,27 @@ const map = {
     ControlSwitch: {
         width: 90,
         path: 'M6.429,40.85H0V15.05H51.429L64.286,0H77.143L90,15.05V31L79,43H64.286L51.429,30.1h-30V40.85H12.857V30.1H6.429V40.85ZM60,17.2l4.286-4.3H77.143l4.286,4.3V27.95l-4.286,4.3H64.286L60,27.95V17.2Z'
+    },
+    TransferSign: {
+        width: 1024,
+        path: 'M366.592 302.592c41.984-31.744 92.16-48.128 144.384-48.128 132.608 0 240.64 109.056 247.296 245.248l-26.112-27.136c-9.728-9.728-25.088-9.728-34.304 0s-9.728 26.112 0 35.84l64 66.56c5.12 5.632 11.776 7.68 18.944 7.168 6.656 0.512 13.824-2.048 18.944-7.168l64-66.56c9.728-9.728 9.728-26.112 0-35.84s-25.088-9.728-34.304 0l-26.624 27.648c-6.656-161.792-134.656-291.84-291.328-291.84-61.44 0-119.808 19.456-169.472 56.832-28.672 21.504-53.248 48.128-73.216 78.848-2.56 4.096-3.584 8.192-3.584 12.8 0 7.168 3.584 14.336 9.728 18.944 10.24 7.168 23.552 4.096 30.208-6.144 15.872-26.112 36.864-48.64 61.44-67.072z m144.896 514.56c61.44 0 119.808-19.456 169.472-56.832 28.672-21.504 53.248-48.128 73.216-78.848 2.56-4.096 3.584-8.192 3.584-12.8 0-7.168-3.584-14.336-9.728-18.944-10.24-7.168-23.552-4.096-30.208 6.144-16.896 26.112-37.888 48.64-61.952 67.072-42.496 31.744-92.16 48.128-144.384 48.128-132.096 0-240.64-109.056-247.296-245.76l25.6 27.136c9.728 9.728 25.088 9.728 34.304 0s9.728-26.112 0-35.84l-64-66.56c-5.12-5.632-11.776-7.68-18.944-7.168-6.656-0.512-13.824 2.048-18.944 7.168l-64 66.56c-9.728 9.728-9.728 26.112 0 35.84s25.088 9.728 34.304 0l26.624-27.648c7.68 162.304 135.68 292.352 292.352 292.352z'
+    },
+    NccTrainBody: {
+        width: 195,
+        path: 'M21.7305 69.7461H181.789C184.211 69.7461 186.164 67.793 186.164 65.3711L194.289 5.11719C194.289 2.69531 192.336 0.742188 189.914 0.742188H59.6797C33.1367 0.742188 0.792966 22.2656 0.792966 48.8086C0.792966 58.8672 16.125 69.7461 21.7305 69.7461Z'
+        // path: 'M24.6484 134.746H184.707C187.129 134.746 189.082 132.793 189.082 130.371L197.207 70.1172C197.207 67.6953 195.254 65.7422 192.832 65.7422H62.5977C36.0547 65.7422 3.71094 87.2656 3.71094 113.809C3.71094 123.867 19.043 134.746 24.6484 134.746Z'
+        // path: 'M62.6442 298H480.377C486.697 298 491.795 293.669 491.795 288.299L513 154.701C513 149.331 507.903 145 501.582 145H161.687C92.413 145 7.99999 192.723 7.99999 251.576C7.99999 273.879 48.0146 298 62.6442 298Z'
+        // path: 'M -23.77657 -22.3304 C -69.33338 -9.394520000000002 -108.70345 6.915939999999999 -97.45486 19.851829999999996 C -86.20626999999999 32.78771 -83.95655 26.600989999999996 -83.95655 26.600989999999996 L 85.89722 26.600989999999996 L 99.39553000000001 -22.33039 C 99.39553000000001 -22.33039 21.780230000000003 -35.26627 -23.776569999999992 -22.33039 z'
+        // path: 'M 897.8 689.9 L 78.3 689.9 C 65.89999999999999 689.9 55.9 679.9 55.9 667.5 L 14.3 359 C 14.3 346.6 24.3 336.6 36.7 336.6 L 703.5 336.6 C 839.4 336.6 1005 446.8 1005 582.7 C 1005 634.2 926.5 689.9000000000001 897.8 689.9000000000001 z'
+        // path: 'M897.8 689.9H78.3c-12.4 0-22.4-10-22.4-22.4L14.3 359c0-12.4 10-22.4 22.4-22.4h666.8c135.9 0 301.5 110.2 301.5 246.1 0 51.5-78.5 107.2-107.2 107.2z'
     }
 };
-
+// M 897.8 689.9 L 78.3 689.9 C 65.89999999999999 689.9 55.9 679.9 55.9 667.5 L 14.3 359 C 14.3 346.6 24.3 336.6 36.7 336.6 L 703.5 336.6 C 839.4 336.6 1005 446.8 1005 582.7 C 1005 634.2 926.5 689.9000000000001 897.8 689.9000000000001 z
 export default function createPathSvg(model) {
     const svg = path.createFromString(map[model._subType].path, {
-        shape: {
         zlevel: model.zlevel,
-            z: model.z
+        z: model.z,
-        },
+        shape: {},
         style: {
             fill: model.fill
         }
@@ -27,5 +39,8 @@ export default function createPathSvg(model) {
     const scaleX = model.width / map[model._subType].width;
     svg.scale = [scaleX, scaleX];
     svg.position = [model.x, model.y];
+    if (model.rotation) {
+        svg.rotation = model.rotation;
+    }
     return svg;
 }

src/jmapNew/constant/systemGraphRender.js

@@ -1,17 +0,0 @@
-import systemGraphType from './systemGraphType';
-
-const systemGraphRender = {};
-
-/** Line渲染配置*/
-systemGraphRender[systemGraphType.Line] = {
-    _type: systemGraphType.Line,
-    zlevel: 1
-};
-
-/** Text渲染配置*/
-systemGraphRender[systemGraphType.Text] = {
-    _type: systemGraphType.Text,
-    zlevel: 1
-};
-
-export default systemGraphRender;

src/jmapNew/constant/systemGraphType.js

@@ -1,8 +0,0 @@
-const systemGraphType = {
-    Line: 'Line',
-    Text: 'Text',
-    Rect: 'Rect',
-    Arrow: 'Arrow'
-};
-
-export default systemGraphType;

src/jmapNew/map.js

@@ -507,6 +507,25 @@ class Jlmap {
             }
         }
     }
+    updateNccTrain(list) {
+        list.forEach(item => {
+            let oDevice = null;
+            if (this.mapDevice[item.groupNum]) {
+                oDevice = this.mapDevice[item.groupNum];
+                Object.assign(oDevice, item);
+            } else {
+                oDevice = deviceFactory('NccTrain', item, this.showConfig);
+                this.mapDevice[item.groupNum] = oDevice;
+            }
+            if (!item.showTrainDiagram) {
+                this.$painter.delete(oDevice);
+                delete this.mapDevice[item.groupNum];
+            } else {
+                this.$painter.updateNccTrain(oDevice);
+            }
+        });
+
+    }
     update(list = [], fetch = true) {
         this.setUpdateMapDevice(list, fetch); // 增加一个 前数据 处理 为了在区段中 获取全部的 道岔信息
 
@@ -536,6 +555,7 @@ class Jlmap {
                 }
             } else if (elem.deviceType == 'OVERLAP') {
                 const overlapRoute = this.mapDevice[elem.code];
+                if (!overlapRoute || !overlapRoute.pathList || overlapRoute.pathList[0]) { return; }
                 const model = this.mapDevice[overlapRoute.pathList[0].sectionList[0]];
                 if (overlapRoute.pathList[0].right) {
                     overlapRoute['points'] = { x: model.points[0].x, y: model.points[0].y };
@@ -674,7 +694,7 @@ class Jlmap {
                     store.commit('map/updateActiveTrainList', elem);
                 } else if (elem.deviceType === 'STAND') {
                     store.dispatch('map/updateStationStand', elem);
-                    const psdDevice = this.mapDevice[this.mapDevice[elem.code].psdCode];
+                    const psdDevice = this.mapDevice[(this.mapDevice[elem.code] || {}).psdCode];
                     if (psdDevice) {
                         psdDevice.fault = elem.fault;
                         this.$painter.update(psdDevice);

src/jmapNew/mouseController.js

@@ -1,4 +1,5 @@
 import deviceType from './constant/deviceType';
+import nccGraphType from './constant/nccGraphType';
 import Eventful from 'zrender/src/mixin/Eventful';
 import * as eventTool from 'zrender/src/core/event';
 import store from '@/store/index';
@@ -10,7 +11,8 @@ class EventModel {
 
         let view = e.target;
         while (view) {
-            if (Object.values(deviceType).includes(view._type)) {
+            const types = {...deviceType, ...nccGraphType};
+            if (Object.values(types).includes(view._type)) {
                 this.deviceCode = view._code;
                 this.deviceType = view._type;
                 this.eventTarget = view;

src/jmapNew/painter.js

@@ -2,7 +2,7 @@ import * as zrUtil from 'zrender/src/core/util';
 // import * as vector from 'zrender/src/core/vector';
 import Group from 'zrender/src/container/Group';
 import deviceType from './constant/deviceType';
-import systemGraphType from './constant/systemGraphType';
+import nccGraphType from './constant/nccGraphType';
 import transitionDeviceStatus from './constant/stateTransition';
 // import shapefactory from './shape/factory';
 import Graphic from './shape';
@@ -43,7 +43,7 @@ class Painter {
         // 添加子级图层
         zrUtil.each([
             ...Object.values(deviceType),
-            ...Object.values(systemGraphType)], (type) => {
+            ...Object.values(nccGraphType)], (type) => {
             const level = new Group({ name: `__${type}__` });
             this.mapInstanceLevel[type] = level;
             this.parentLevel.add(level);
@@ -162,6 +162,10 @@ class Painter {
             this.$transformHandleScreen.transformView(device.instance);
         }
     }
+    updateNccTrain(device) {
+        this.delete(device);
+        this.add(device);
+    }
     /** 画面更新 */
     updatePicture(device) {
         if (device) {

src/jmapNew/parser/index.js

@@ -1,15 +1,15 @@
 import * as parserGraph from './parser-graph.js';
-import * as parserSystemGraph from './parser-systemGraph.js';
+import * as parserNccGraph from './parser-nccGraph.js';
 
 export const ParserType = {
     Graph: { name: '绘图', value: 'Graph' },
-    systemGraph: { name: '系统绘图', value: 'systemGraph' }
+    nccGraph: { name: '系统绘图', value: 'NccGraph' }
 };
 
 export function parserFactory(type) {
     switch (type) {
     case ParserType.Graph.value : return parserGraph;
-    case ParserType.systemGraph.value: return parserSystemGraph;
+    case ParserType.nccGraph.value: return parserNccGraph;
     }
 
     return parserGraph;

src/jmapNew/parser/parser-nccGraph.js

@@ -0,0 +1,96 @@
+import * as zrUtil from 'zrender/src/core/util';
+import nccGraphType from '../constant/nccGraphType';
+import nccGraphRender from '../constant/nccGraphRender';
+import Vue from 'vue';
+import { deepClone } from '@/utils/index';
+
+export function deviceFactory(type, elem, showConfig) {
+    return {...nccGraphRender[type], ...elem, ...showConfig};
+}
+
+export function createDevice(type, elem, propConvert, showConfig) {
+    const device = deviceFactory(type, Object.assign(elem, { _type: type } ), showConfig);
+    return propConvert ? propConvert.initPrivateProps(device) : device;
+}
+
+export function parser(nccData, skinCode, showConfig) {
+    const nccDevice = {};
+    const runPositionData = {};
+    const propConvert = skinCode ? Vue.prototype.$theme.loadPropConvert(skinCode) : null;
+    if (nccData) {
+        zrUtil.each(nccData.lineList || [], elem => {
+            nccDevice[elem.code] = createDevice(nccGraphType.NccLine, elem, propConvert, showConfig);
+        }, this);
+
+        zrUtil.each(nccData.textList || [], elem => {
+            nccDevice[elem.code] = createDevice(nccGraphType.NccText, elem, propConvert, showConfig);
+        }, this);
+
+        zrUtil.each(nccData.rectList || [], elem => {
+            nccDevice[elem.code] = createDevice(nccGraphType.NccRect, elem, propConvert, showConfig);
+        }, this);
+
+        zrUtil.each(nccData.nccStationList || [], elem => {
+            nccDevice[elem.code] = createDevice(nccGraphType.NccStation, elem, propConvert, showConfig);
+            if (elem.stationCode) {
+                runPositionData[elem.stationCode] = handleRunPositionData(elem, nccData.runLineList);
+                if (elem.stationCode === 'Station43447') {
+                    console.log(runPositionData[elem.stationCode], elem, nccData.runLineList, '******Station43447');
+                }
+            }
+        }, this);
+
+        zrUtil.each(nccData.runLineList || [], elem => {
+            nccDevice[elem.code] = createDevice(nccGraphType.RunLine, elem, propConvert, showConfig);
+        }, this);
+
+    }
+    console.log(nccDevice, 'nccDevice', runPositionData);
+    return { nccDevice, runPositionData };
+}
+function handleRunPositionData(nccStation, runLineList) {
+    let positionData = [];
+    nccStation.lineNames.forEach(lineName => {
+        const runLine = runLineList.find(elem => elem.lineName === lineName);
+        if (runLine) {
+            const pointIndex = runLine.points.findIndex(point => point.x === nccStation.position.x && point.y === nccStation.position.y);
+            positionData = [{runLineCode: runLine.code, pointIndex: pointIndex}];
+        }
+    });
+    return positionData;
+}
+
+// 同步绘制数据到原始数据
+export function updateForList(model, state, lstName) {
+    if (!state.nccData) { state.nccData = {nccStationList: [], runLineList:[]}; }
+    const list = state.nccData[lstName];
+    if (list && list instanceof Array) {
+        const i = list.findIndex(elem => elem.code == model.code );
+        if (i < 0) {
+            list.push(deepClone(model)); // 新增
+        } else {
+            if (model._dispose) {
+                list.splice(i, 1);
+            } else {
+                list.splice(i, 1, deepClone(model));
+            }
+        }
+        state.nccData[lstName] = [...list];
+    } else {
+        state.nccData[lstName] = [model];
+    }
+    console.log(state.nccData, '********');
+    state.map.nccData = JSON.stringify(state.nccData);
+}
+
+export function updateMapData(state, model) {
+    if (state.map && model) {
+        switch (model._type) {
+        case nccGraphType.NccLine: updateForList(model, state, 'lineList'); break;
+        case nccGraphType.NccText: updateForList(model, state, 'textList'); break;
+        case nccGraphType.NccRect: updateForList(model, state, 'rectList'); break;
+        case nccGraphType.RunLine: updateForList(model, state, 'runLineList'); break;
+        case nccGraphType.NccStation: updateForList(model, state, 'nccStationList'); break;
+        }
+    }
+}

src/jmapNew/parser/parser-systemGraph.js

@@ -1,65 +0,0 @@
-import * as zrUtil from 'zrender/src/core/util';
-import systemGraphType from '../constant/systemGraphType';
-import systemGraphRender from '../constant/systemGraphRender';
-import Vue from 'vue';
-import { deepClone } from '@/utils/index';
-
-export function deviceFactory(type, elem, showConfig) {
-    return {...systemGraphRender[type], ...elem, ...showConfig};
-}
-
-export function createDevice(type, elem, propConvert, showConfig) {
-    const device = deviceFactory(type, Object.assign(elem, { _type: type } ), showConfig);
-    return propConvert ? propConvert.initPrivateProps(device) : device;
-}
-
-export function parser(data, skinCode, showConfig) {
-    var mapDevice = {};
-    var propConvert = skinCode ? Vue.prototype.$theme.loadPropConvert(skinCode) : null;
-    if (data) {
-        zrUtil.each(data.lineList || [], elem => {
-            mapDevice[elem.code] = createDevice(systemGraphType.Line, elem, propConvert, showConfig);
-        }, this);
-
-        zrUtil.each(data.textList || [], elem => {
-            mapDevice[elem.code] = createDevice(systemGraphType.Text, elem, propConvert, showConfig);
-        }, this);
-
-        zrUtil.each(data.rectList || [], elem => {
-            mapDevice[elem.code] = createDevice(systemGraphType.Rect, elem, propConvert, showConfig);
-        }, this);
-
-    }
-
-    return mapDevice;
-}
-
-// 同步绘制数据到原始数据
-export function updateForList(model, state, lstName) {
-    const list = state.map[lstName];
-    if (list && list instanceof Array) {
-        const i = list.findIndex(elem => elem.code == model.code );
-        if (i < 0) {
-            list.push(deepClone(model)); // 新增
-        } else {
-            if (model._dispose) {
-                list.splice(i, 1);
-            } else {
-                list.splice(i, 1, deepClone(model));
-            }
-        }
-        state.map[lstName] = [...list];
-    } else {
-        state.map[lstName] = [model];
-    }
-}
-
-export function updateMapData(state, model) {
-    if (state.map && model) {
-        switch (model._type) {
-        case systemGraphType.Line: updateForList(model, state, 'lineList'); break;
-        case systemGraphType.Text: updateForList(model, state, 'textList'); break;
-        case systemGraphType.Rect: updateForList(model, state, 'rectList'); break;
-        }
-    }
-}

src/jmapNew/shape/index.js

@@ -1,10 +1,10 @@
 import graphMapShape from './graph';
-import systemGraphShape from './systemGraph';
+import nccGraphShape from './nccGraph';
 
 export default {
     __Shape: {
         ...graphMapShape,
-        // ...systemGraphShape
+        ...nccGraphShape
     },
     getBuilder(type) {
         const ShapeClazz = this.__Shape[type];

src/jmapNew/shape/nccGraph/NccStation/Transfer.js

@@ -0,0 +1,22 @@
+import Group from 'zrender/src/container/Group';
+import createPathSvg from '../../../constant/pathsvg';
+
+export default class Transfer extends Group {
+    constructor(model) {
+        super();
+        this.model = model;
+        this.zlevel = model.zlevel;
+        this.z = model.z;
+        this._subType = model._subType;
+        this.create();
+    }
+    create() {
+        this.path = createPathSvg(this.model);
+        this.add(this.path);
+    }
+    setControlColor(color) {
+        this.path.setStyle({fill: color});
+    }
+    recover() {
+    }
+}

src/jmapNew/shape/nccGraph/NccStation/index.js

@@ -0,0 +1,88 @@
+import Circle from 'zrender/src/graphic/shape/Circle';
+import Text from 'zrender/src/graphic/Text';
+import Group from 'zrender/src/container/Group';
+import BoundingRect from 'zrender/src/core/BoundingRect';
+import Transfer from './Transfer';
+
+export default class NccStation extends Group {
+    constructor(model, {style, lineCode}) {
+        super();
+        this._code = model.code;
+        this.stationCode = model.stationCode;
+        this._type = model._type;
+        this.name = model.name;
+        this.zlevel = model.zlevel;
+        this.model = model;
+        this.style = style;
+        this.z = 6;
+        this.lineCode = lineCode;
+        this.create();
+        this.setState(model);
+    }
+
+    create() {
+        const model = this.model;
+        this.stationMain = new Circle({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: model.position.x,
+                cy: model.position.y,
+                r: model.radius
+            },
+            style: {
+                fill: model.fillColor,
+                lineWidth: model.lineWidth,
+                stroke: model.lineColor
+            }
+        });
+        this.stationName = new Text({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            style: {
+                x: model.position.x + model.snOffset.x,
+                y: model.position.y + model.snOffset.y,
+                text: model.name,
+                fontFamily: this.style.fontFamily,
+                fontSize: Number(model.font),
+                textFill: model.fontColor,
+                textAlign: 'middle'
+            }
+        });
+        if (model.isTransfer) {
+            this.transferSign = new Transfer({
+                zlevel: this.zlevel,
+                z: this.z + 2,
+                x: model.position.x - model.radius,
+                y: model.position.y - model.radius,
+                _subType: 'TransferSign',
+                width: model.radius * 2,
+                fill: '#f00'
+            });
+            this.add(this.transferSign);
+            this.add(this.transferSign);
+        }
+        this.add(this.stationMain);
+        this.add(this.stationName);
+    }
+
+    setState(model) {
+    }
+    getBoundingRect() {
+        if (this.stationMain) {
+            return this.stationMain.getBoundingRect().clone();
+        } else {
+            return new BoundingRect(this.model.position.x, this.model.position.y, 0, 0);
+        }
+    }
+
+    setShowStation(stationCode) {
+
+    }
+    screenShow() {
+
+    }
+    getAnchorPoint() {
+        return this.model.position;
+    }
+}

src/jmapNew/shape/nccGraph/NccTrain/index.js

@@ -0,0 +1,114 @@
+import Group from 'zrender/src/container/Group';
+import BoundingRect from 'zrender/src/core/BoundingRect';
+import createPathSvg from '../../../constant/pathsvg';
+import store from '@/store/index';
+
+export default class NccTrain extends Group {
+    constructor(model, {style, lineCode}) {
+        super();
+        this._code = model.groupNum;
+        this._type = model._type;
+        this.name = model.groupNum;
+        this.zlevel = model.zlevel;
+        this.model = model;
+        this.style = style;
+        this.z = 6;
+        this.lineCode = lineCode;
+        this.point = [];
+        this.create();
+        this.setState(model);
+    }
+
+    create() {
+        const model = this.model;
+        const nccRunPositionData = store.state.map.nccRunPositionData;
+        const startPositions = nccRunPositionData[model.startStationCode];
+        const endPositions = nccRunPositionData[model.targetStationCode];
+        let runLineCode = '';
+        let pointIndexs = [];
+        let runLinePoints = [];
+        startPositions.forEach(item =>{
+            const position = endPositions.find(el => el.runLineCode === item.runLineCode);
+            if (position) {
+                runLineCode = position.runLineCode;
+                pointIndexs = [item.pointIndex, position.pointIndex];
+            }
+        });
+        if (runLineCode) {
+            const runLine = store.getters['map/getNccDeviceByCode'](runLineCode);
+            runLinePoints = runLine.points;
+        }
+        let px = 0;
+        let py = 0;
+        let angle = 0;
+        if (pointIndexs.length && Math.abs(pointIndexs[0] - pointIndexs[1]) > 1) {
+            let stateI = pointIndexs[0];
+            const endI = pointIndexs[1];
+            const step = Math.sign( endI - stateI);
+            const lengthList = [];
+            let totalLength = 0;
+            while (stateI !== endI) {
+                const p1 = runLinePoints[stateI];
+                const p2 = runLinePoints[stateI + step];
+                const length = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+                lengthList.push(length);
+                totalLength += length;
+                stateI += step;
+            }
+            const complateLength = totalLength * model.stationComplateRatio;
+            let nowIndex = 0;
+            let nowLength = complateLength;
+            while (nowLength > lengthList[nowIndex]) {
+                nowLength -= lengthList[nowIndex];
+                nowIndex++;
+            }
+            const startP = runLinePoints[pointIndexs[0] + nowIndex];
+            const endP = runLinePoints[pointIndexs[0] + nowIndex + 1];
+            const nowRatio = nowLength / lengthList[nowIndex];
+            px = startP.x + Math.round(nowRatio * (endP.x - startP.x));
+            py = startP.y + Math.round(nowRatio * (endP.y - startP.y));
+            angle = Math.atan2(startP.y - endP.y, startP.x - endP.x);
+            angle = -angle;
+        } else if (pointIndexs.length) {
+            const startP = runLinePoints[pointIndexs[0]];
+            const endP = runLinePoints[pointIndexs[1]];
+            px = startP.x + Math.round(model.stationComplateRatio * (endP.x - startP.x));
+            py = startP.y + Math.round(model.stationComplateRatio * (endP.y - startP.y));
+            angle = Math.atan2( startP.y - endP.y, startP.x - endP.x);
+            angle = -angle;
+        }
+        const trainWidth = 15;
+        const offset = -10;
+        this.tranBody = createPathSvg({
+            zlevel: this.zlevel,
+            z: this.z + 5,
+            x: px + Math.sin(angle) * offset,
+            y: py + Math.cos(angle) * offset,
+            _subType: 'NccTrainBody',
+            width: trainWidth,
+            fill: '#D381CA',
+            rotation: angle
+        });
+        this.point = [px + Math.sin(angle) * offset, py + Math.cos(angle) * offset];
+        if (!this.point[0]) {
+            console.log(this.point[0], this.point[1], '--------', this.model, startPositions, endPositions, nccRunPositionData);
+        }
+        this.add(this.tranBody);
+    }
+
+    setState(model) {
+    }
+    getBoundingRect() {
+        return new BoundingRect(this.point[0], this.point[1], 0, 0);
+    }
+
+    setShowStation(stationCode) {
+
+    }
+    screenShow() {
+
+    }
+    getAnchorPoint() {
+        return this.model.position;
+    }
+}

src/jmapNew/shape/nccGraph/RunLine/index.js

@@ -0,0 +1,117 @@
+import Group from 'zrender/src/container/Group';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+import Sector from 'zrender/src/graphic/shape/Sector';
+
+export default class RunLine extends Group {
+    constructor(model, {style}) {
+        super();
+        this._code = model.code;
+        this._type = model._type;
+        this.zlevel = model.zlevel;
+        this.z = 0;
+        this.model = model;
+        this.backgroundColor = style.backgroundColor;
+        this.style = style.Line;
+        this.create();
+        this.setState(model);
+    }
+    isRightAngle(x1, y1, x2, y2, x3, y3) {
+        const distance12 = (x2 - x1) ** 2 + (y2 - y1) ** 2;
+        const distance13 = (x3 - x1) ** 2 + (y3 - y1) ** 2;
+        const distance23 = (x3 - x2) ** 2 + (y3 - y2) ** 2;
+        console.log(distance12, distance13, distance23, 'isRightAngle', x1, y1, x2, y2, x3, y3);
+        if (distance12 >= distance13 && distance12 >= distance23) {
+            return distance12 === distance13 + distance23;
+        } else if (distance13 >= distance12 && distance13 >= distance23) {
+            return distance13 === distance12 + distance23;
+        } else {
+            return distance23 === distance12 + distance13;
+        }
+    }
+    create() {
+        const model = this.model;
+        const roundPointIndexList = [];
+        if (model && model.points && model.points.length > 1) {
+            const points = [];
+            const modelPoints = model.points;
+            const length = modelPoints.length;
+            for (let i = 0; i < length; i++) {
+                points.push([modelPoints[i].x, modelPoints[i].y]);
+                if (i > 0 && i < length - 1) {
+                    const isRight = this.isRightAngle(modelPoints[i - 1].x, modelPoints[i - 1].y, modelPoints[i].x, modelPoints[i].y, modelPoints[i + 1].x, modelPoints[i + 1].y );
+                    isRight && roundPointIndexList.push(i);
+                }
+            }
+            this.segment = new Polyline({
+                zlevel: this.zlevel,
+                z:this.z,
+                shape: {
+                    points:points
+                },
+                style: {
+                    lineWidth: model.width,
+                    stroke: model.lineColor
+                }
+            });
+            this.add(this.segment);
+        }
+        if (roundPointIndexList.length) {
+            roundPointIndexList.forEach(pointIndex => {
+                console.log(pointIndex, model.points, 'modelPoints');
+                const simpx = model.points[pointIndex - 1].x + model.points[pointIndex + 1].x - model.points[pointIndex].x;
+                const simpy = model.points[pointIndex - 1].y + model.points[pointIndex + 1].y - model.points[pointIndex].y;
+                const preAngle = Math.atan2(model.points[pointIndex - 1].y - simpy, model.points[pointIndex - 1].x - simpx );
+                const nextAngle = Math.atan2(model.points[pointIndex + 1].y - simpy, model.points[pointIndex + 1].x - simpx);
+                const startAngle = Math.min(preAngle, nextAngle);
+                const endAngle = Math.max(preAngle, nextAngle);
+                console.log(startAngle, endAngle, '****');
+                const embellishSector1 = new Sector({
+                    zlevel: this.zlevel,
+                    z: this.z + 1,
+                    shape: {
+                        cx: model.points[pointIndex].x + Math.sign(simpx - model.points[pointIndex].x) * model.width,
+                        cy: model.points[pointIndex].y + Math.sign(simpy - model.points[pointIndex].y) * model.width,
+                        r: model.width / 2 * 3 * Math.sqrt(2),
+                        r0: model.width / 2 * 3,
+                        startAngle: startAngle,
+                        endAngle:endAngle,
+                        clockwise: !(endAngle - startAngle > Math.PI)
+                    },
+                    style: {
+                        fill: this.backgroundColor
+                    }
+                });
+                const embellishSector2 = new Sector({
+                    zlevel: this.zlevel,
+                    z: this.z + 1,
+                    shape: {
+                        cx: model.points[pointIndex].x + Math.sign(simpx - model.points[pointIndex].x) * model.width,
+                        cy: model.points[pointIndex].y + Math.sign(simpy - model.points[pointIndex].y) * model.width,
+                        r: model.width,
+                        r0: model.width / 2,
+                        startAngle: startAngle,
+                        endAngle: endAngle,
+                        clockwise: !(endAngle - startAngle > Math.PI)
+                    },
+                    style: {
+                        fill: model.lineColor
+                    }
+                });
+                this.add(embellishSector1);
+                this.add(embellishSector2);
+            });
+        }
+        console.log(this, 'runline');
+    }
+
+    setState(model) {
+    }
+    getAnchorPoint() {
+        if (this.segment) {
+            const rect = this.segment.getBoundingRect();
+            return {x:rect.x, y:rect.y};
+        } else {
+            return {x:0, y:0};
+        }
+    }
+}

src/jmapNew/shape/nccGraph/index.js

@@ -0,0 +1,18 @@
+import nccGraphType from '../../constant/nccGraphType';
+
+import Line from './Line';
+import Text2 from './Text';
+import Rect2 from './Rect';
+import NccStation from './NccStation';
+import RunLine from './RunLine';
+import NccTrain from './NccTrain';
+/** 图库*/
+const mapShape = {};
+mapShape[nccGraphType.NccLine] = Line;
+mapShape[nccGraphType.NccText] = Text2;
+mapShape[nccGraphType.NccRect] = Rect2;
+mapShape[nccGraphType.NccStation] = NccStation;
+mapShape[nccGraphType.RunLine] = RunLine;
+mapShape[nccGraphType.NccTrain] = NccTrain;
+
+export default mapShape;

src/jmapNew/shape/systemGraph/Arrow/index.js

@@ -1,61 +0,0 @@
-import Group from 'zrender/src/container/Group';
-import Polygon from 'zrender/src/graphic/shape/Polygon';
-
-export default class Arrow extends Group {
-    constructor(model, {style}) {
-        super();
-        this._code = model.code;
-        this._type = model._type;
-        this.zlevel = model.zlevel;
-        this.z = 0;
-        this.model = model;
-        // this.style = style;
-        this.isShowShape = true;
-        this.create();
-        this.setState(model);
-    }
-
-    create() {
-        const model = this.model;
-        this.arrow = new Polygon({
-            zlevel: this.zlevel,
-            z: this.z,
-            origin: [model.position.x, model.position.y],
-            rotation: -Math.PI / 180 * Number(model.rotate),
-            shape: {
-                points: [
-                    [model.position.x, model.position.y],
-                    [model.position.x + model.triangleLength, model.position.y - model.triangleHeight / 2],
-                    [model.position.x + model.triangleLength, model.position.y - model.lineWidth / 2],
-                    [model.position.x + model.length, model.position.y - model.lineWidth / 2],
-                    [model.position.x + model.length, model.position.y + model.lineWidth / 2],
-                    [model.position.x + model.triangleLength, model.position.y + model.lineWidth / 2],
-                    [model.position.x + model.triangleLength, model.position.y + model.triangleHeight / 2]
-                ]
-            },
-            style: {
-                fill: model.color
-            }
-        });
-        this.add(this.arrow);
-    }
-
-    setState(model) {
-        if (!this.isShowShape) return;
-    }
-
-    setShowStation(stationCode) {
-        if (!stationCode || this.model.stationCode === stationCode) {
-            this.show();
-            this.isShowShape = true;
-            this.setState(this.model);
-        } else {
-            this.hide();
-            this.isShowShape = false;
-        }
-    }
-    getAnchorPoint() {
-        const rect = this.arrow.getBoundingRect();
-        return { x:rect.x, y:rect.y };
-    }
-}

src/jmapNew/shape/systemGraph/index.js

@@ -1,15 +0,0 @@
-import systemGraphType from '../../constant/systemGraphType';
-
-import Line from './Line/index.js';
-import Text2 from './Text/index.js';
-import Rect2 from './Rect/index.js';
-import Arrow from './Arrow/index.js';
-
-/** 图库*/
-const mapShape = {};
-mapShape[systemGraphType.Line] = Line;
-mapShape[systemGraphType.Text] = Text2;
-mapShape[systemGraphType.Rect] = Rect2;
-mapShape[systemGraphType.Arrow] = Arrow;
-
-export default mapShape;

src/jmapNew/utils/parser.js

@@ -1,5 +1,6 @@
 import * as matrix from 'zrender/src/core/matrix';
 import deviceRender from '../constant/deviceRender';
+import nccGraphRender from '../constant/nccGraphRender';
 
 export function createTransform(opts) {
     let transform = matrix.create();
@@ -34,5 +35,6 @@ export function calculateDCenter(viewRect, offsetX) {
 }
 
 export function deviceFactory(type, elem, showConfig) {
-    return {...deviceRender[type], ...elem, ...showConfig};
+    const renderConfig = { ...nccGraphRender, ...deviceRender };
+    return {...renderConfig[type], ...elem, ...showConfig};
 }

src/router/index.js

@@ -1349,8 +1349,8 @@ export const asyncRouter = [
                 component: NewMapDraft,
                 hidden: true
             },
-            { // 地图系统绘制
+            { // ncc地图绘制
-                path: 'usermap/map/systemDraw/:mapId/:view',
+                path: 'usermap/map/nccDraw/:mapId/:view',
                 component: NewMapDraftSystem,
                 hidden: true
             },

src/store/modules/map.js

@@ -221,8 +221,11 @@ const map = {
         trainWindowSectionCode: '', // 选择车次窗所属区段code
         flankProtectList: [], // 侧防列表
         map: null, // 地图数据
+        nccData: null, // ncc数据
         dataZoom: {}, // 缩放位置
         mapDevice: {}, // 解析后的地图数据
+        nccDevice: {},
+        nccRunPositionData: {},
         mapList: {}, // 地图数据列表
         mapViewLoadedCount: 0, // 地图视图加载完成标识
         initJlmapLoadedCount: 0, // Jlmap初始化表示
@@ -604,6 +607,20 @@ const map = {
                 return [];
             }
         },
+        nccStationList: state => {
+            if (state.nccData) {
+                return state.nccData.nccStationList || [];
+            } else {
+                return [];
+            }
+        },
+        runLineList: state => {
+            if (state.nccData) {
+                return state.nccData.runLineList || [];
+            } else {
+                return [];
+            }
+        },
         // trainDetails: (state) => {
         //     return state.trainDetails;
         // },
@@ -616,6 +633,9 @@ const map = {
         getDeviceByCode: state => code => {
             return state.mapDevice[code];
         },
+        getNccDeviceByCode: state => code => {
+            return state.nccDevice[code];
+        },
         getPictureDeviceByCode: state => code => {
             return state.pictureDeviceMap[code];
         },
@@ -822,6 +842,13 @@ const map = {
                 state.foldLineMap = foldLineMap;
                 const parser = parserFactory(ParserType.Graph.value);
                 state.mapDevice = parser.parser(map, map.skinVO.code, showConfig);
+                if (map.nccData) {
+                    const nccParser = parserFactory(ParserType.nccGraph.value);
+                    state.nccData = JSON.parse(map.nccData);
+                    const parserData = nccParser.parser(state.nccData, map.skinVO.code, showConfig);
+                    state.nccDevice = parserData.nccDevice;
+                    state.nccRunPositionData = parserData.runPositionData;
+                }
                 state.stationControlMap = {};
                 map.stationList.forEach(station => {
                     if (station.ciStation) {
@@ -872,7 +899,7 @@ const map = {
         setDataZoom: (state, dataZoom) => {
             state.dataZoom = dataZoom;
         },
-        mapRender: (state, devices, type = ParserType.Graph.value) => {
+        mapRender: (state, { devices, type = ParserType.Graph.value }) => {
             if (devices && devices.length) {
                 if (state.map) {
                     const parser = parserFactory(type);
@@ -1203,7 +1230,7 @@ const map = {
         },
         setOverlapData: ({ commit }, overlapData) => {
             commit('setOverlapData', overlapData);
-            commit('mapRender', overlapData);
+            commit('mapRender', { devices: overlapData });
         },
         setAutoReentryData: ({ commit }, autoReentryData) => {
             commit('setAutoReentryData', autoReentryData);
@@ -1258,14 +1285,15 @@ const map = {
                 });
                 const list = Object.values(dict);
                 if (window.location.href.includes('/lineDesign/usermap/map/draw')) {
+                    console.log(state.mapDevice);
                     handleOperation(state, list);
                 }
-                commit('mapRender', list);
+                commit('mapRender', { devices: list });
                 resolve(list);
             });
         },
 
-        updateSystemMapDevices: ({ commit, state }, models) => {
+        updateNccMapDevices: ({ commit, state }, models) => {
             return new Promise(resolve => {
                 if (!(models instanceof Array)) {
                     models = [models];
@@ -1283,20 +1311,21 @@ const map = {
                     }
                 });
                 const list = Object.values(dict);
-                if (window.location.href.includes('/design/usermap/map/systemDraw')) {
+                if (window.location.href.includes('/design/usermap/map/nccDraw')) {
                     handleOperation(state, list);
                 }
-                commit('mapRender', list, ParserType.systemGraph.value);
+                console.log(ParserType.nccGraph.value, '*********');
+                commit('mapRender', {devices: list, type: ParserType.nccGraph.value});
                 resolve(list);
             });
         },
 
         setRevocation({ state, commit }) {
-            commit('mapRender', revocation(state, state.stepData.shift() || [])); // 撤销
+            commit('mapRender', { devices: revocation(state, state.stepData.shift() || []) }); // 撤销
         },
 
         setRecover({ state, commit }) {
-            commit('mapRender', recover(state, state.recoverStepData.shift() || [])); // 恢复
+            commit('mapRender', { devices: recover(state, state.recoverStepData.shift() || []) }); // 恢复
         },
 
         saveMapDeviceDefaultRelations({ state }) {
@@ -1364,7 +1393,7 @@ const map = {
                     });
                 }
 
-                commit('mapRender', deviceList);
+                commit('mapRender', { devices: deviceList });
             }
         },
 

src/store/modules/socket.js

@@ -119,7 +119,8 @@ const socket = {
         simulationWorkParam: {},
         conversationMessage: {},
         controlTransfer: {},
-        operationModeApplyList: [] // 模式转换消息列表
+        operationModeApplyList: [], // 模式转换消息列表
+        nccRunData: [] // ncc运行数据
     },
     getters: {
     },
@@ -406,6 +407,9 @@ const socket = {
                     state.operationModeApplyList.splice(index, 1);
                 }
             });
+        },
+        handleNccRun: (state, list) => {
+            state.nccRunData = list;
         }
     },
 
@@ -644,6 +648,9 @@ const socket = {
         },
         operationModeApply: ({ commit }, message) => {
             commit('operationModeApply', message);
+        },
+        handleNccRun: ({ commit }, message) => {
+            commit('handleNccRun', message);
         }
     }
 };

src/utils/stomp.js

@@ -68,6 +68,9 @@ export function getTopic(type, group, param) {
     case 'JL3D':
         topic = `/user/queue/simulation/${group}/jl3d`;
         break;
+    case 'NCC':
+        topic = `/user/queue/diagram/simulation/${group}`;
+        break;
     }
 
     return topic;

src/utils/subscribeCallback.js

@@ -197,6 +197,9 @@ function handle(data) {
     case 'Simulation_Control_Transfer_Result':
         store.dispatch('socket/setControlTransfer', msg);
         break;
+    case 'SIMULATION_NCC_STATION_DIAGRAM':
+        store.dispatch('socket/handleNccRun', msg);
+        break;
     }
 }
 // 仿真内部聊天

src/views/newMap/display/stationDiagram/jlmap/index.vue

@@ -112,11 +112,6 @@ export default {
         $route() {
             this.mapViewLoaded(true);
         },
-        // '$store.state.socket.simulationReset': function (val) { // 仿真结束标识
-        //     if (val) {
-        //         this.simulationReset(val);
-        //     }
-        // },
         '$store.state.training.rezoomCount': function () {
             let code = this.$store.state.training.offsetStationCode; // 偏移集中站坐标
             if (code && code.includes('Cycle')) { // 单独处理 自动折返
@@ -329,9 +324,9 @@ export default {
             });
         },
         // 设置新的地图数据
-        setMap(map) {
+        // setMap(map) {
-            this.$jlmap.setMap(map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
+        //     this.$jlmap.setMap(map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
-        },
+        // },
         // 刷新地图数据
         refresh(map) {
         },

src/views/newMap/display/terminals/index.vue

@@ -2,6 +2,7 @@
   <div v-loading="loading" style="height: 100%">
     <dispatcher-work v-if="picture === 'dispatchWork'" ref="dispatcherWork" />
     <local-work v-else-if="picture === 'localWork'" ref="localWork" :centralized-station-map="centralizedStationMap" />
+    <ncc-work v-else-if="picture === 'nccWork'" ref="nccWork" />
     <jl3d-drive v-else-if="picture === 'drivingPlan'" ref="jl3dDrive" />
     <jl3d-device v-else-if="picture === 'jl3dModle'" ref="jl3dModle" />
     <cctv-view v-else-if="picture === 'cctvView'" ref="cctvView" />
@@ -85,6 +86,7 @@ import TroWork from './troWork';
 import TroDetailWork from './troDetailWork';
 import TestRunplan from './testRunplan';
 import DriverAtsWork from './driverAtsWork';
+import NccWork from './nccWork';
 
 export default {
     name: 'Index',
@@ -121,7 +123,8 @@ export default {
         TroDetailWork,
         Jl3dMaintainerSelect,
         TestRunplan,
-        DriverAtsWork
+        DriverAtsWork,
+        NccWork
     },
     data() {
         return {
@@ -154,6 +157,7 @@ export default {
     },
     watch: {
         '$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
+            if (this.picture === 'nccWork') { return; }
             this.subscribe('ATS_STATUS');
             if (this.isFirst) {
                 this.$store.dispatch('training/setMapDefaultState');
@@ -224,32 +228,7 @@ export default {
         },
         subscribe(type) { // 根据显示端分别订阅
             const header = {group: this.group || '', 'X-Token': getToken()};
-            switch (type) {
+            creatSubscribe(getTopic(type, this.group), header, type === 'STATE' ? stateCallback : defaultCallback);
-            case 'COMMON':
-                creatSubscribe(getTopic(type, this.group), header, defaultCallback);
-                break;
-            case 'ATS_STATUS':
-                creatSubscribe(getTopic(type, this.group), header, defaultCallback);
-                break;
-            case 'STATE':
-                creatSubscribe(getTopic(type, this.group), header, stateCallback);
-                break;
-            case 'CTC':
-                creatSubscribe(getTopic(type, this.group), header, defaultCallback);
-                break;
-            case 'LPF':
-                creatSubscribe(getTopic(type, this.group), header, defaultCallback);
-                break;
-            case 'YJDDZH':
-                creatSubscribe(getTopic(type, this.group), header, defaultCallback);
-                break;
-            case 'RUNFACT':
-                creatSubscribe(getTopic(type, this.group), header, defaultCallback);
-                break;
-            case 'JL3D':
-                creatSubscribe(getTopic(type, this.group), header, defaultCallback);
-                break;
-            }
         },
         clearSubscribe() {
             clearSubscribe(getTopic('COMMON', this.group));
@@ -295,6 +274,8 @@ export default {
                 this.mapViewLoaded(true);
             } else if (val === 'dispatchingCommand') {
                 this.$nextTick(() => { this.subscribe('CTC'); });
+            } else if (val === 'nccWork') {
+                this.$nextTick(() => { this.subscribe('NCC'); });
             }
             this.$nextTick(() => { this.loading = false; });
         },

src/views/newMap/display/terminals/nccWork.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <component :is="menus" :selected="selected" />
+    <station-diagram ref="stationDiagram" @setSelected="setSelected" />
+  </div>
+</template>
+
+<script>
+import StationDiagram from '../stationDiagram/index';
+import {mapGetters} from 'vuex';
+// import { clearSubscribe, getTopic} from '@/utils/stomp';
+export default {
+    name: 'NccWork',
+    components: {
+        StationDiagram
+    },
+    data() {
+        return {
+            menus: null,
+            selected: null
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'sectionList',
+            'signalList',
+            'trainWindowList'
+
+        ]),
+        mapData() {
+            return this.$store.state.map.map;
+        },
+        mapDevice() {
+            return this.$store.state.map.mapDevice;
+        },
+        nccDevice() {
+            return this.$store.state.map.nccDevice;
+        },
+        roleDeviceCode() {
+            return this.$store.state.training.roleDeviceCode;
+        },
+        // 大铁线路
+        datie() {
+            return ['16', '19'].includes(this.$route.query.lineCode);
+        },
+        group() {
+            return this.$route.query.group;
+        }
+    },
+    watch: {
+        // 地图数据加载完毕
+        '$store.state.map.mapDataLoadedCount': function () {
+            // const lineCode = this.$jlmap.lineCode;
+            // if (lineCode) {
+            //     this.menus = this.$theme.loadLocalWorkMenuComponent(lineCode);
+            // }
+        },
+        '$store.state.map.initJlmapLoadedCount': function (val) {
+            this.handleLocalWorkData();
+        },
+        '$store.state.socket.nccRunData': function (val) {
+            this.$jlmap.updateNccTrain(val);
+        },
+        '$store.state.training.roleDeviceCode': function (val) {
+            // const type = this.datie ? 'chainStation' : 'localWork';
+            // if (this.mapData && this.mapData.pictureList) {
+            //     const picture = this.mapData.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(this.roleDeviceCode) && picture.type === type);
+            //     if (picture) {
+            //         this.handlerPictureShow(picture);
+            //     }
+            // }
+        }
+    },
+    mounted() {
+        // clearSubscribe(getTopic('ATS_STATUS', this.group));
+    },
+    beforeDestroy() {
+    },
+    methods: {
+        setSelected(val) {
+            this.selected = val;
+        },
+        handleLocalWorkData() {
+            const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
+            const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
+            this.$jlmap.setMap(this.mapData, this.nccDevice, logicData, repaint);
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/newMap/display/terminals/terminalMenu.vue

@@ -40,6 +40,13 @@ export default {
                     isShow: () => this.$route.query.lineCode !== '14',
                     click: this.changePictureShow
                 },
+                {
+                    name: 'Ncc',
+                    code: 'nccWork',
+                    roleList: ['DISPATCHER'],
+                    isShow: () => this.$route.query.simType === 'METRO',
+                    click: this.changePictureShow
+                },
                 {
                     name: '行调台',
                     code: 'dispatcherManage',
@@ -305,7 +312,6 @@ export default {
             } else if (this.roles === 'DRIVER') {
                 // 司机模拟
                 const trainingDesign = this.$store.state.training.domConfig ? this.$store.state.training.domConfig.trainingDesign : false;
-                console.log('1111111111111111', trainingDesign);
                 this.changePictureShow(trainingDesign ? 'driverAtsWork' : 'drivingPlan');
             }
         },

src/views/newMap/newDesignUser/demonList.vue

@@ -139,17 +139,17 @@ export default {
                             lineCode: elem.lineCode
                         },
                         {
-                            id: '2',
+                            id: '3',
-                            name: '系统配置绘图',
+                            name: '画面管理',
-                            type: 'mapSystem',
+                            type: 'mapPicture',
                             mapId: elem.id,
                             mapName: elem.name,
                             lineCode: elem.lineCode
                         },
                         {
-                            id: '3',
+                            id: '4',
-                            name: '画面管理',
+                            name: 'NCC设计',
-                            type: 'mapPicture',
+                            type: 'nccDesign',
                             mapId: elem.id,
                             mapName: elem.name,
                             lineCode: elem.lineCode
@@ -180,16 +180,6 @@ export default {
                 });
                 break;
             }
-            case 'mapSystem': {
-                if (this.loadingProjectList.includes(this.project)) {
-                    this.$store.dispatch('app/transitionAnimations');
-                }
-                this.$router.push({
-                    path: `/design/usermap/map/systemDraw/${obj.mapId}/draft`,
-                    query: { name: obj.mapName, lineCode: obj.lineCode }
-                });
-                break;
-            }
             case 'mapPicture': {
                 if (this.loadingProjectList.includes(this.project)) {
                     this.$store.dispatch('app/transitionAnimations');
@@ -200,6 +190,16 @@ export default {
                 });
                 break;
             }
+            case 'nccDesign': {
+                if (this.loadingProjectList.includes(this.project)) {
+                    this.$store.dispatch('app/transitionAnimations');
+                }
+                this.$router.push({
+                    path: `/design/usermap/map/nccDraw/${obj.mapId}/draft`,
+                    query: { name: obj.mapName, lineCode: obj.lineCode }
+                });
+                break;
+            }
             }
         },
         showContextMenu(e, obj, node, vueElem) {

src/views/newMap/newMapdraftSystem/index.vue

@@ -34,9 +34,9 @@
   </transition>
 </template>
 <script>
-import { saveMap, verifyMap, getMapDetail, postBuildMapImport, getRouteNewList, getAutoReentryList } from '@/api/jmap/mapdraft';
+import { saveMap, getMapDetail } from '@/api/jmap/mapdraft';
 import { ViewMode, TrainingMode, getDeviceMenuByDeviceType, DeviceMenu } from '@/scripts/ConstDic';
-import JlmapVisual from '@/views/newMap/jlmapNew/index';
+import JlmapVisual from './jlmap';
 import MapOperate from './mapoperate/index';
 import { EventBus } from '@/scripts/event-bus';
 import { mapGetters } from 'vuex';
@@ -275,7 +275,7 @@ export default {
         },
         // 获取设备数据
         getDeviceByEm(em) {
-            var	device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
+            var	device = this.$store.getters['map/getNccDeviceByCode'](em.deviceCode) || null;
             if (device) {
                 device._viewVal = em.val;
             }
@@ -295,139 +295,9 @@ export default {
                 this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
             }
         },
-        verifySectionPoint(map) { // 校验区段坐标不为空
-            let flag = true;
-            map.sectionList.forEach(elem => {
-                if (elem.points.length > 0) {
-                    for (let index = 0; index < elem.points.length; index++) {
-                        if (String(elem.points[index].x) == 'undefined' || String(elem.points[index].y) == 'undefined') {
-                            this.$message(`${elem.name}${this.$t('tip.sectionPointsDeficiency')}`);
-                            flag = false;
-                        }
-                    }
-                } else {
-                    this.$message(this.$t('tip.sectionPointsDeficiency'));
-                    flag = false;
-                }
-            });
-            return flag;
-        },
-        verifySectionRelation(map) {
-            let flag = true;
-            const tipInfoList = [];
-            map.sectionList.forEach(section => {
-                section.type === '01' && map.sectionList.forEach(item => {
-                    if (section.code !== item.code && item.type === '01' && this.checkSectionPointsHasCoincide(section.points, item.points) && !this.checkCorrelation(section, item)) {
-                        tipInfoList.push('区段' + section.name + '(' + section.code + '): 或者区段' + item.name + '(' + item.code + ')' + '关联关系设置错误！' );
-                    }
-                });
-            });
-            if (!tipInfoList.length) {
-                flag = true;
-            } else {
-                flag = false;
-                this.$messageBox(this.$t('tip.dataValidationFailed'));
-                this.tableToExcel(tipInfoList);
-            }
-            return flag;
-        },
-        async verifyInterlockDevice(map) {
-            let flag = true;
-            const tipInfoList = [];
-            const routeCodeList = [];
-            const cycleCodeList = [];
-            const resp1 = await getRouteNewList(this.$route.params.mapId, {pageSize:9999, pageNum:1});
-            if (resp1.data && resp1.data.list) {
-                resp1.data.list.forEach(item => {
-                    routeCodeList.push(item.code);
-                });
-            }
-            const resp2 = await getAutoReentryList(this.$route.params.mapId, {pageSize:9999, pageNum:1});
-            if (resp2.data && resp2.data.list) {
-                resp2.data.list.forEach(item => {
-                    cycleCodeList.push(item.code);
-                });
-            }
-            map.cycleButtonList.forEach(cycleButton => {
-                if (!cycleCodeList.includes(cycleButton.cycleCode)) {
-                    flag = false;
-                    tipInfoList.push('自动折返功能按钮' + cycleButton.name + '(' + cycleButton.code + ')' + '的关联自动折返数据不存在！');
-                }
-            });
-            map.automaticRouteButtonList.forEach(routeButton => {
-                if (!routeCodeList.includes(routeButton.automaticRouteCode)) {
-                    flag = false;
-                    tipInfoList.push('自动进路功能按钮' + routeButton.name + '(' + routeButton.code + ')' + '的关联进路数据不存在！');
-                }
-            });
-            if (!flag) {
-                this.$messageBox(this.$t('tip.dataValidationFailed'));
-                this.tableToExcel(tipInfoList);
-            }
-            return flag;
-        },
-        verifyStationPosition(map) {
-            let flag = true;
-            const tipInfoList = [];
-            map.stationStandList.forEach(stationStand => {
-                const section = this.$store.getters['map/getDeviceByCode'](stationStand.standTrackCode);
-                const list = [];
-                section && section.points.forEach(point => {
-                    list.push(point.x);
-                });
-                if (stationStand.position.x > Math.max(...list) || stationStand.position.x < Math.min(...list)) {
-                    flag = false;
-                    tipInfoList.push('站台' + stationStand.name + '(' + stationStand.code + ')' + '位置偏移出关联站台轨，请检查关联站台轨是否正确！');
-                }
-            });
-            if (!flag) {
-                this.$messageBox(this.$t('tip.dataValidationFailed'));
-                this.tableToExcel(tipInfoList);
-            }
-            return flag;
-        },
-        verifySignalPosition(map) {
-            let flag = true;
-            const tipInfoList = [];
-            map.signalList.forEach(signal => {
-                const section = this.$store.getters['map/getDeviceByCode'](signal.sectionCode);
-                if (section) {
-                    const offsetX = signal.positionPoint ? signal.positionPoint.x : 0;
-                    const signalPositionX = signal.position.x - offsetX;
-                    const max = Math.max(section.points[section.points.length - 1].x, section.points[0].x);
-                    const min = Math.min(section.points[section.points.length - 1].x, section.points[0].x);
-                    if (signalPositionX < min && signalPositionX > max) {
-                        tipInfoList.push('信号机' + signal.name + '(' + signal.code + ')未在其关联的区段' + section.name + '(' + section.code + ')里');
-                    }
-                } else {
-                    tipInfoList.push('信号机' + signal.name + '(' + signal.code + ')所关联的区段不存在');
-                }
-            });
-            if (!tipInfoList.length) {
-                flag = true;
-            } else {
-                flag = false;
-                this.$messageBox(this.$t('tip.dataValidationFailed'));
-                this.tableToExcel(tipInfoList);
-            }
-            return flag;
-        },
-        checkPointsCoincide(point1, point2) { // 校验两点是否重合
-            if (point1 && point2) {
-                return point1.x === point2.x && point1.y === point2.y;
-            }
-            return false;
-        },
-        checkSectionPointsHasCoincide(points1, points2) { // 校验两区段的左右点是否有重合
-            return points1.length && points2.length && (this.checkPointsCoincide(points1[0], points2[0]) || this.checkPointsCoincide(points1[0], points2[points2.length - 1]) || this.checkPointsCoincide(points1[points1.length - 1], points2[points2.length - 1]) || this.checkPointsCoincide(points1[points1.length - 1], points2[0]));
-        },
-        checkCorrelation(section1, section2) { // 校验后者是否与前者有关联关系
-            return section1.leftSectionCode === section2.code || section1.rightSectionCode === section2.code;
-        },
         saveMapEvent() { // 保存地图
             const map = this.$store.state.map.map;
             if (this.$refs.jlmapVisual && map && parseInt(this.$route.params.mapId)) {
-                if (this.verifySectionPoint(map)) {
                 this.mapSaveing = true;
                 this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => { // 草稿地图关系处理
                     saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(response => {
@@ -450,48 +320,12 @@ export default {
                     this.$message(this.$t('tip.saveFailed'));
                 });
             }
-            }
         },
-        async checkOver() {
-            if (this.$refs.jlmapVisual) {
-                const map = this.$store.state.map.map;
-                if (map && this.$route.params.mapId) {
-                    const checkInterlockDevice = await this.verifyInterlockDevice(map);
-                    if (this.verifySectionRelation(map) && this.verifySignalPosition(map) && checkInterlockDevice && this.verifyStationPosition(map)) {
-                        verifyMap(this.$route.params.mapId).then(res => {
-                            if (res.data.length) {
-                                this.tableToExcel(res.data);
-                                this.$messageBox(this.$t('tip.dataValidationFailed'));
-                            } else {
-                                this.$message.success(this.$t('tip.dataValidationSuccess'));
-                            }
-                        }).catch(() => {
-                            this.$message.error(this.$t('tip.requestFailed'));
-                        });
-                    }
-                }
-            }
-        },
-        tableToExcel(data) {
-            const filterVal = ['index'];
-            const arr = [];
-            data.forEach(item => {
-                arr.push({ index: item });
-            });
-            const dataList = this.formatJson(filterVal, arr);
-            import('@/utils/Export2Excel').then(excel => {
-                excel.export_json_to_excel([this.$t('tip.dataQuestion')], dataList, this.$t('tip.dataList'));
-            });
-        },
-        formatJson(filterVal, jsonData) {
-            return jsonData.map(v => filterVal.map(j => v[j]));
-        },
-
         backRoute() {
             this.$router.push({ path: `/design/usermap/home` });
         },
         updateMapModel(models) { // 创建 跟新元素
-            this.$store.dispatch('map/updateSystemMapDevices', models);
+            this.$store.dispatch('map/updateNccMapDevices', models);
         },
         // 撤销
         revocation() {
@@ -509,57 +343,13 @@ export default {
             this.deviceHighLight(device, true);
             this.oldDevice = device;
         },
-        createMap() {
-            this.$refs.mapCreate.show();
-        },
-        importf() { // 导入地图jsons数据
-            const loading = this.$loading({
-                lock: true,
-                text: '正在导入中...',
-                spinner: 'el-icon-loading',
-                background: 'rgba(0, 0, 0, 0.7)'
-            });
-            setTimeout(() => {
-                const obj = this.$refs.files;
-                if (!obj.files) return;
-                const f = obj.files[0];
-                const reader = new FileReader();
-                const that = this;
-                reader.readAsText(f, 'utf-8');
-                reader.onload = function(e) {
-                    const data = e.target.result;
-                    postBuildMapImport(JSON.parse(data)).then(res => {
-                        loading.close();
-                        that.$message.success('导入成功！');
-                        that.refresh();
-                        loading.close();
-                    }).catch(error => {
-                        loading.close();
-                        that.$message.error('导入失败' + error.message);
-                    });
-                    obj.value = '';
-                };
-            });
-        },
         // 高亮设备
         deviceHighLight(device, flag) {
             if (device && device.instance && typeof device.instance.drawSelected === 'function' ) {
-                if (device._type === 'Section' && device.type === '04') {
-                    device.relevanceSectionList.forEach(item => {
-                        const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
-                        sectionModel && sectionModel.instance.drawSelected(flag);
-                    });
-                } else if (device._type === 'Section' && device.type === '01' && device.logicSectionCodeList && device.logicSectionCodeList.length) {
-                    device.logicSectionCodeList.forEach(item => {
-                        const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
-                        sectionModel && sectionModel.instance.drawSelected(flag);
-                    });
-                } else {
                 device.instance.drawSelected(flag);
             }
         }
     }
-    }
 };
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>

src/views/newMap/newMapdraftSystem/jlmap.vue

@@ -0,0 +1,349 @@
+<template>
+  <div ref="jlmapCanvas" class="jlmap-canvas" :style="{ width: width+'px', height: height+'px' }" @mousemove="mousemove">
+    <div :id="canvasId" class="display_canvas" />
+    <progress-bar ref="progressBar" />
+    <div 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" style="width: 95px" />
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataZoom.offsetY" :disabled="true" style="width: 95px" />
+        </el-form-item>
+        <div style="display: inline-block">
+          <span class="title" style="width: 90px; height: 28px; line-height: 30px;">鼠标偏移:</span>
+          <el-form-item label="x" label-width="12px">
+            <el-input ref="offsetX" v-model="offset.x" :disabled="true" style="width: 95px" />
+          </el-form-item>
+          <el-form-item label="y" label-width="12px">
+            <el-input v-model="offset.y" :disabled="true" style="width: 95px" />
+          </el-form-item>
+        </div>
+        <el-form-item label="缩 放:">
+          <el-input v-model="dataZoom.scaleRate" :disabled="true" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Jlmap from '@/jmapNew/map';
+import ProgressBar from '@/views/components/progressBar/index';
+import { mapGetters } from 'vuex';
+import { EventBus } from '@/scripts/event-bus';
+import Theme from '@/jmapNew/theme/factory';
+export default {
+    name: 'JlmapVisual',
+    components: {
+        ProgressBar
+    },
+    props: {
+        draftShow: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        }
+    },
+    data() {
+        return {
+            loading: true,
+            dataZoom: {
+                offsetX: '0',
+                offsetY: '0',
+                scaleRate: '1'
+            },
+            offset: {
+                x: 0,
+                y: 0
+            },
+            concentrationStationList: [],
+            canvasId:'',
+            previewOrMapDraw: false
+        };
+    },
+    computed: {
+        ...mapGetters('training', [
+            'mode'
+        ]),
+        width() {
+            return this.$store.state.config.width;
+        },
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.map.map': function (val, old) {
+            try {
+                if (val) {
+                    this.setMap(val);
+                }
+            } catch (error) {
+                console.log('[ERROR] ', error);
+                this.mapViewLoaded(false);
+            }
+        },
+        '$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);
+        },
+        '$store.state.socket.simulationReset': function (val) { // 仿真结束标识
+            if (val) {
+                this.simulationReset(val);
+            }
+        }
+    },
+    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);
+        });
+        this.canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
+        this.$store.dispatch('config/setCurrentCancasId', { id: this.canvasId });
+    },
+    mounted() {
+        this.initLoadPage();
+    },
+    beforeDestroy() {
+        EventBus.$off('refresh');
+        EventBus.$off('viewLoading');
+        EventBus.$off('viewProgressAt');
+        this.$store.dispatch('socket/clearSimulationRoleList');
+        this.$store.dispatch('menuOperation/resetRequestList');
+        if (this.$jlmap) {
+            this.$jlmap.dispose();
+            Vue.prototype.$jlmap = null;
+        }
+    },
+    methods: {
+        // 初始化jlmap
+        initLoadPage() {
+            document.getElementById(this.canvasId).oncontextmenu = function (e) {
+                return false;
+            };
+            // 默认个人地图绘制可以滚轮放大缩小 其他地图显示不允许此操作
+            const path = window.location.href;
+            const mouseWheelFlag = true;
+            this.previewOrMapDraw = false;
+            if (path.indexOf('nccDraw') !== -1) {
+                this.previewOrMapDraw = true;
+            }
+            Vue.prototype.$theme = new Theme();
+            this.selfJlmap = Vue.prototype.$jlmap = new Jlmap({
+                dom: document.getElementById(this.canvasId),
+                config: {
+                    renderer: 'canvas',
+                    width: this.width,
+                    height: this.height
+                },
+                options: {
+                    scaleRate: 1,
+                    offsetX: 0,
+                    offsetY: 0,
+                    zoomOnMouseWheel: mouseWheelFlag
+                },
+                showConfig: {
+                    previewOrMapDraw: this.previewOrMapDraw
+                },
+                methods: {
+                    dataLoaded: this.handleDataLoaded,
+                    viewLoaded: this.handleViewLoaded,
+                    stateLoaded: this.handleStateLoaded,
+                    stateUpdate: this.handleStateUpdate
+                }
+            });
+            this.$jlmap.on('dataZoom', this.onDataZoom, this);
+            this.$jlmap.on('selected', this.onSelected, this);
+            this.$jlmap.on('contextmenu', this.onContextMenu, this);
+            if (this.$route.path.includes('/usermap/map/nccDraw')) {
+                this.$jlmap.on('keyboard', this.onKeyboard, this);
+            } else {
+                this.$jlmap.on('keyboard', this.onSimulationKeyboard, this);
+            }
+            window.document.oncontextmenu = function () {
+                return false;
+            };
+        },
+        // 重置jlmap宽高
+        resetSize() {
+            this.$nextTick(() => {
+                this.$jlmap && this.$jlmap.resize({ width: this.width, height: this.height });
+                setTimeout(() => {
+                    this.$store.dispatch('config/resetCanvasOffset');
+                    this.$store.dispatch('training/emitTipFresh');
+                }, 100);
+            });
+        },
+        // 设置显示图层
+        setLevelVisible(levels) {
+            this.$jlmap && this.$jlmap.setLevelVisible(levels);
+        },
+        // 设置显示中心
+        setCenter(deviceCode) {
+            this.$jlmap && this.$jlmap.setCenter(deviceCode);
+        },
+        // 地图数据加载完成
+        handleDataLoaded() {
+            this.$store.dispatch('map/mapDataLoaded');
+        },
+        // 地图视图加载完成
+        handleViewLoaded() {
+            this.$store.dispatch('map/mapViewLoaded');
+        },
+        // 地图状态加载完成
+        handleStateLoaded() {
+            this.mapViewLoaded(false);
+        },
+        // 地图状态更新
+        handleStateUpdate(list) {
+            this.$store.dispatch('map/mapStateLoaded');
+        },
+        // 键盘快捷键事件
+        onKeyboard(hook) {
+            switch (hook) {
+            case 'Ctrl_Z': this.$store.dispatch('map/setRevocation');
+                break;
+            case 'Ctrl_Y': this.$store.dispatch('map/setRecover');
+                break;
+            case 'Delete': this.$store.dispatch('map/setDeleteCount');
+                break;
+            case 'Update':
+                this.$refs.offsetX.focus();
+                this.$store.dispatch('map/setUpdateCount');
+                break;
+            }
+        },
+        onSimulationKeyboard(hook) {
+            switch (hook) {
+            case 'Update': this.$store.dispatch('map/setKeyboardEnter');
+                break;
+            case 'Tab': EventBus.$emit('CheckFaultModeEvent');
+                break;
+            }
+        },
+        async simulationReset() {
+            await this.$store.dispatch('socket/setSimulationStart');
+            await this.$store.dispatch('map/initClearTrainData');
+            await this.$store.dispatch('map/setTrainWindowShow', false); // 结束清除车次窗显示
+            await this.$store.dispatch('training/over');
+            await this.$store.dispatch('map/resetActiveTrainList');
+            await this.$store.dispatch('socket/setSimulationReset'); // 清空
+            await this.$store.dispatch('training/setMapDefaultState');
+        },
+        // 视图缩放事件
+        onDataZoom(dataZoom) {
+            this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
+            this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
+            this.dataZoom.scaleRate = dataZoom.scaleRate + '';
+            this.offset.x = this.dataZoom.offsetX;
+            this.offset.y = this.dataZoom.offsetY;
+            const lineCode = this.$store.getters['map/lineCode'];
+            lineCode && this.$store.commit('map/setDataZoom', this.dataZoom);
+            this.$store.dispatch('training/emitTipFresh');
+        },
+        // 点击选择事件
+        onSelected(em) {
+            this.$emit('onSelect', em);
+        },
+        // 右键点击事件
+        onContextMenu(em) {
+            this.$emit('onMenu', em);
+        },
+        // 设置地图加载状态
+        mapViewLoaded(loading) {
+            this.loading = loading;
+            if (loading) {
+                this.$refs.progressBar && this.$refs.progressBar.start();
+            } else {
+                this.$refs.progressBar && this.$refs.progressBar.end(true);
+            }
+        },
+        // 设置地图加载进度
+        mapViewProgressAt(percentage) {
+            this.$nextTick(() => {
+                this.$refs.progressBar.progressAt(percentage);
+            });
+        },
+        // 设置新的地图数据
+        setMap(map) {
+            this.$jlmap.setMap(map, this.$store.state.map.nccDevice, {routeData: {}, autoReentryData: {}});
+        },
+        // 刷新地图数据
+        refresh(map) {
+        },
+        // 缩小
+        setShrink() {
+            this.$jlmap.setOptions({type: 'zoom', scale: -1});
+        },
+        // 放大
+        setMagnify() {
+            this.$jlmap.setOptions({type: 'zoom', scale: 1});
+        },
+        mousemove(e) {
+            this.offset = {
+                x: e.offsetX + Number(this.dataZoom.offsetX),
+                y: e.offsetY + Number(this.dataZoom.offsetY)
+            };
+            this.$store.dispatch('map/setMousemove');
+        },
+        setOffset(data, num, sum, obj) {
+            this.$jlmap.switchScreen(data, num, sum, obj);
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.jlmap-canvas {
+	position: relative;
+	-moz-user-select: none;
+	-o-user-select: none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	background: #000;
+	float: left;
+}
+.title{
+	text-align: right;
+	font-size: 14px;
+	color: #606266;
+	line-height: 32px;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	font-weight: 700;
+}
+
+.zoom-view {
+	position: absolute;
+	bottom: 0;
+	background: #fff;
+	padding-top: 5px;
+	height: 42px;
+	border-bottom: 1px #f3f3f3 solid;
+	border-right: 1px #f3f3f3 solid;
+}
+
+/deep/ {
+	.el-form.el-form--inline {
+		height: 28px !important;
+		line-height: 28px !important
+	}
+}
+</style>

src/views/newMap/newMapdraftSystem/mapoperate/components/operateProperty.vue

@@ -59,7 +59,7 @@ export default {
         },
         // 删除对象
         deleteObj() {
-            const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+            const selected = this.$store.getters['map/getNccDeviceByCode'](this.editModel.code);
             if (selected && this.isDeleteHide) {
                 this.isDeleteHide = false;
                 this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {

src/views/newMap/newMapdraftSystem/mapoperate/config/list.vue

@@ -95,6 +95,11 @@
               <el-input v-model="formModel[item.prop]" type="text" :disabled="item.disabled" maxlength="30" :show-word-limit="true" @input="((val)=>{deviceChange(val, item)})" />
             </el-form-item>
           </template>
+          <template v-if="checkFieldType(item, 'textarea')">
+            <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
+              <el-input v-model="formModel[item.prop]" type="textarea" :disabled="item.disabled" maxlength="30" :show-word-limit="true" @input="((val)=>{deviceChange(val, item)})" />
+            </el-form-item>
+          </template>
           <template v-if="checkFieldType(item, 'number')">
             <el-form-item v-if="!item.isHidden" :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
               <template v-if="!item.firstLevel">

src/views/newMap/newMapdraftSystem/mapoperate/index.vue

@@ -31,7 +31,8 @@ import LineDraft from './line';
 import TextDraft from './text';
 import RectDraft from './rect';
 import ArrowDraft from './arrow';
-// import { EventBus } from '@/scripts/event-bus';
+import NccStation from './nccStation';
+import RunLine from './runLine';
 
 export default {
     name: 'MapOperate',
@@ -58,7 +59,9 @@ export default {
                 {label: this.$t('map.line'), name:'Line', menus:LineDraft},
                 {label: this.$t('map.text'), name:'Text', menus:TextDraft},
                 {label: '矩形', name:'Rect', menus: RectDraft},
-                {label: '箭头', name:'Arrow', menus: ArrowDraft}
+                {label: '箭头', name:'Arrow', menus: ArrowDraft},
+                {label: '车站', name: 'NccStation', menus: NccStation},
+                {label: '地图线', name: 'RunLine', menus: RunLine}
             ],
             selectDevice:'',
             enabledTab: 'Line'
@@ -132,22 +135,11 @@ export default {
         margin-right: 5px;
     }
 
-    // .physical-view {
-    //     line-height: 25px;
-    //     height: 118px;
-    //     padding-left: 12px;
-
-    //     .el-checkbox {
-    //         width: 70px;
-    //         margin: 0;
-    //         margin-right: 30px;
-    //     }
-    // }
-
     .map-operate{
         height: 47px;
         padding: 15px;
         display:flex;
+		justify-content: space-between;
     }
     .mapEdit{
         height: calc(100% - 47px);

src/views/newMap/newMapdraftSystem/mapoperate/nccStation.vue

@@ -0,0 +1,289 @@
+<template>
+  <el-tabs v-model="activeName" class="card">
+    <el-tab-pane class="view-control" :label="$t('map.property')" name="first" :lazy="lazy">
+      <operate-property
+        ref="dataform"
+        :form="form"
+        :edit-model="editModel"
+        :rules="rules"
+        type="NccStation"
+        @updateMapModel="updateMapModel"
+        @clearDeviceSelect="clearDeviceSelect"
+      />
+    </el-tab-pane>
+    <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
+      <create-operate
+        ref="createForm"
+        :create-form="createForm"
+        :add-model="addModel"
+        :create-rules="rules"
+        @create="create"
+      />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmapNew/utils/Uid';
+import OperateProperty from './components/operateProperty';
+import CreateOperate from './components/createOperate';
+import { deepAssign } from '@/utils/index';
+
+export default {
+    name: 'StationStandDraft',
+    components: {
+        OperateProperty,
+        CreateOperate
+    },
+    props: {
+        selected: {
+            type: Object,
+            default: function () {
+                return null;
+            }
+        }
+    },
+    data() {
+        return {
+            activeName: 'first',
+            lazy: true,
+            lineList: [
+                {label: '西安地铁1号线', value: '西安地铁1号线'},
+                {label: '西安地铁2号线', value: '西安地铁2号线'},
+                {label: '西安地铁3号线', value: '西安地铁3号线'},
+                {label: '西安地铁4号线', value: '西安地铁4号线'},
+                {label: '西安地铁5号线', value: '西安地铁5号线'},
+                {label: '西安地铁6号线', value: '西安地铁6号线'},
+                {label: '西安地铁9号线', value: '西安地铁9号线'},
+                {label: '西安地铁14号线', value: '西安地铁14号线'}
+            ],
+            editModel: {
+                code: '',
+                radius: 5,
+                lineWidth: 0,
+                lineColor: '',
+                fillColor: '#fff',
+                position: {
+                    x: 0,
+                    y: 0
+                },
+                stationCode: '',
+                name: '',
+                font: 9,
+                fontColor: '#fff',
+                snOffset: {
+                    x: 0,
+                    y: 15
+                },
+                lineNames: [],
+                sn: '',
+                isTransfer: false
+            },
+            addModel: {
+                radius: 5,
+                lineWidth: 0,
+                lineColor: '',
+                fillColor: '#fff',
+                position: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            rules: {
+                code: [
+                    { required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
+                ],
+                radius: [
+                    { required: true, message: '请输入半径', trigger: 'blur' }
+                ],
+                'position.x': [
+                    { required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
+                ],
+                'position.y': [
+                    { required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'nccStationList',
+            'stationList',
+            'runLineList'
+        ]),
+        form() {
+            const form = {
+                labelWidth: '120px',
+                items: {
+                    code: {
+                        name: '',
+                        item: []
+                    },
+                    draw: {
+                        name: this.$t('map.drawData'),
+                        item: [
+                            { prop: 'code', label: 'NCC车站编码', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.nccStationList, deviceChange: this.deviceChange },
+                            { prop: 'fillColor', label: '填充颜色:', type: 'color' },
+                            { prop: 'lineColor', label: '边框颜色:', type: 'color' },
+                            { prop: 'radius', label: '半径:', type: 'number', min: 1, placeholder: 'px' },
+                            { prop: 'lineWidth', label: '边框宽度:', type: 'number', min:1, placeholder: 'px'},
+                            { prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
+                                { prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
+                                { prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
+                            ] },
+                            { prop: 'name', label: '车站名称:', type: 'textarea' },
+                            { prop: 'font', label: '名称字体:', type: 'number', min: 1, placeholder: 'px' },
+                            { prop: 'fontColor', label: '名称颜色:', type: 'color'},
+                            { prop: 'snOffset', label: '车站名偏移:', type: 'coordinate', width: '120px', children: [
+                                { prop: 'snOffset.x', firstLevel: 'snOffset', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
+                                { prop: 'snOffset.y', firstLevel: 'snOffset', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
+                            ] }
+                        ]
+                    },
+                    map: {
+                        name: this.$t('map.mapData'),
+                        item: [
+                            { prop: 'isTransfer', label: '换乘站', type: 'checkbox' },
+                            { prop: 'stationCode', label: '关联车站：', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.stationList},
+                            { prop: 'lineNames', label: '所属线路：', type: 'multiSelect', optionLabel: 'label', optionValue: 'value', options: this.lineList },
+                            { prop: 'sn', label: '线路序号：', type: 'input' }
+                        ]
+                    }
+                }
+            };
+            return form;
+        },
+        createForm() {
+            const form = {
+                labelWidth: '120px',
+                items:{
+                    all:{
+                        name:'',
+                        item: [
+                            { prop: 'radius', label: '半径:', type: 'number', min:1, placeholder: 'px'},
+                            { prop: 'fillColor', label: '填充色', type: 'color' },
+                            { prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
+                                { prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
+                                { prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
+                            ] },
+                            { prop: 'lineColor', label: this.$t('map.lineColor'), type: 'color' },
+                            { prop: 'lineWidth', label: '边框宽度:', type: 'number', min:1, placeholder: 'px'}
+                        ]
+                    }
+                }
+            };
+            return form;
+        },
+        isPointShow() {
+            return !this.editModel.pointShow;
+        }
+    },
+    methods: {
+        clearDeviceSelect() {
+            this.$emit('deviceSelect', '');
+        },
+        deviceChange(code) {
+            this.$emit('setCenter', code);
+            this.deviceSelect(this.$store.getters['map/getNccDeviceByCode'](code));
+        },
+        deviceSelect(selected) {
+            if (selected && selected._type.toUpperCase() === 'NccStation'.toUpperCase()) {
+                this.$refs.form && this.$refs.form.resetFields();
+                this.$refs.dataform && this.$refs.dataform.resetFields();
+                this.activeName = 'first';
+                this.editModel = deepAssign(this.editModel, selected);
+                console.log(this.editModel, selected, '****');
+            }
+        },
+        create() {
+            const model = {
+                _type: 'NccStation',
+                code: getUID('NccStation', this.nccStationList),
+                radius: this.addModel.radius,
+                lineColor: this.addModel.lineColor,
+                lineWidth: this.addModel.lineWidth,
+                fillColor: this.addModel.fillColor,
+                position: {
+                    x: this.addModel.position.x,
+                    y: this.addModel.position.y
+                },
+                stationCode: '',
+                name: '',
+                font: 9,
+                fontColor: '#fff',
+                snOffset: {
+                    x: 0,
+                    y: 15
+                },
+                lineNames: [],
+                sn: '',
+                isTransfer: false
+            };
+            this.$emit('updateMapModel', model);
+            this.$refs.createForm.resetForm();
+        },
+        updateMapModel(data) {
+            delete data.lineName;
+            this.$emit('updateMapModel', data);
+        },
+        deleteObj() {
+            this.$refs.dataform.deleteObj();
+        },
+        // 修改对象
+        edit() {
+            this.$refs.dataform.edit();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+.card {
+	height: 100%;
+}
+
+.coordinate {
+	overflow: hidden;
+
+	.title {
+		text-align: right;
+		font-size: 14px;
+		color: #606266;
+		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 {
+	position: absolute;
+	left: 120px;
+	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/newMap/newMapdraftSystem/mapoperate/runLine.vue

@@ -0,0 +1,261 @@
+<template>
+  <el-tabs v-model="activeName" class="card">
+    <el-tab-pane class="view-control" :label="$t('map.property')" name="first" :lazy="lazy">
+      <operate-property
+        ref="dataform"
+        :form="form"
+        :edit-model="editModel"
+        :rules="rules"
+        type="RunLine"
+        @updateMapModel="updateMapModel"
+        @clearDeviceSelect="clearDeviceSelect"
+      />
+    </el-tab-pane>
+    <el-tab-pane class="view-control" label="生成" name="second" :lazy="lazy">
+      <el-form ref="generateForm" :model="createForm" :rules="rules" label-width="100px" size="small">
+        <el-form-item label="生成线路" prop="lines">
+          <el-select v-model="createForm.lines" multiple placeholder="请选择">
+            <el-option
+              v-for="item in lineList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="generate">生成</el-button>
+        </el-form-item>
+      </el-form>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmapNew/utils/Uid';
+import OperateProperty from './components/operateProperty';
+import { deepAssign } from '@/utils/index';
+
+export default {
+    name: 'StationStandDraft',
+    components: {
+        OperateProperty
+    },
+    props: {
+        selected: {
+            type: Object,
+            default: function () {
+                return null;
+            }
+        }
+    },
+    data() {
+        return {
+            activeName: 'first',
+            lazy: true,
+            lineList: [
+                {label: '西安地铁1号线', value: '西安地铁1号线'},
+                {label: '西安地铁2号线', value: '西安地铁2号线'},
+                {label: '西安地铁3号线', value: '西安地铁3号线'},
+                {label: '西安地铁4号线', value: '西安地铁4号线'},
+                {label: '西安地铁5号线', value: '西安地铁5号线'},
+                {label: '西安地铁6号线', value: '西安地铁6号线'},
+                {label: '西安地铁9号线', value: '西安地铁9号线'},
+                {label: '西安地铁14号线', value: '西安地铁14号线'}
+            ],
+            editModel: {
+                code: '',
+                width: 5,
+                lineColor: '',
+                points: [],
+                lineName: ''
+            },
+            createForm: {
+                lines: []
+            },
+            rules: {
+                lines: [
+                    { required: true, message: '请选择需生成的线路', trigger: 'change' }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'runLineList',
+            'nccStationList',
+            'lineCode'
+        ]),
+        form() {
+            const form = {
+                labelWidth: '120px',
+                items: {
+                    code: {
+                        name: '',
+                        item: []
+                    },
+                    draw: {
+                        name: this.$t('map.drawData'),
+                        item: [
+                            { prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.runLineList, deviceChange: this.deviceChange },
+                            { prop: 'lineColor', label: this.$t('map.lineColor') + ':', type: 'color' },
+                            { prop: 'width', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
+                            { prop: 'points', label: '运行线坐标：', type: 'points', width: '100px', addPoint: this.addPoint, delPoint: this.delPoint }
+                        ]
+                    },
+                    map: {
+                        name: this.$t('map.mapData'),
+                        item: [
+                            { prop: 'lineName', label: '所属线路：', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.lineList }
+                        ]
+                    }
+                }
+            };
+            return form;
+        },
+        isPointsShow() {
+            return this.editModel.points.length > 0;
+        },
+        isPointShow() {
+            return !this.editModel.pointShow;
+        }
+    },
+    methods: {
+        generate() {
+            this.$refs.generateForm.validate((valid) => {
+                const { generateData, checkResult } = this.checkGenerateLine();
+                if (valid && checkResult) {
+                    this.createForm.lines.forEach(line => {
+                        generateData[line] && this.createRunLine(line, generateData[line]);
+                    });
+                }
+            });
+        },
+        createRunLine(line, nccStations) {
+            nccStations.sort((a, b) => a.sn - b.sn);
+            const pointArr = [];
+            nccStations.forEach(st => pointArr.push(st.position));
+            const model = {
+                _type: 'RunLine',
+                code: getUID('RunLine', this.runLineList),
+                width: 5,
+                lineColor: '#C1F467',
+                points: pointArr,
+                lineName: line
+            };
+            this.$emit('updateMapModel', model);
+        },
+        checkGenerateLine() {
+            const generateData = {};
+            let errMsgs = '';
+            this.nccStationList.forEach(nccStation => {
+                nccStation.lineNames.forEach(lineName => {
+                    if (this.createForm.lines.includes(lineName)) {
+                        generateData[lineName] ? generateData[lineName].push(nccStation) : generateData[lineName] = [nccStation];
+                        console.log(lineName, generateData, 'gen');
+                        if (!nccStation.sn) {
+                            errMsgs += lineName + nccStation.name + '没有配置车站顺序；';
+                        }
+                    }
+                });
+            });
+            if (errMsgs.length) {
+                this.$messageBox(errMsgs);
+                return {generateData: generateData, checkResult : false};
+            }
+            return {generateData: generateData, checkResult : true};
+        },
+        clearDeviceSelect() {
+            this.$emit('deviceSelect', '');
+        },
+        deviceChange(code) {
+            this.$emit('setCenter', code);
+            this.deviceSelect(this.$store.getters['map/getNccDeviceByCode'](code));
+        },
+        deviceSelect(selected) {
+            if (selected && selected._type.toUpperCase() === 'RunLine'.toUpperCase()) {
+                this.$refs.form && this.$refs.form.resetFields();
+                this.$refs.dataform && this.$refs.dataform.resetFields();
+                this.activeName = 'first';
+                this.editModel = deepAssign(this.editModel, selected);
+            }
+        },
+        addPoint(index) {
+            const data = { x: 0, y: 0 };
+            this.editModel.points.splice(index + 1, 0, data);
+        },
+        delPoint(index) {
+            this.editModel.points.splice(index, 1);
+        },
+        addPointAddModel(index) {
+            const data = { x: 0, y: 0};
+            this.addModel.points.splice(index + 1, 0, data);
+        },
+        delPointAddModel(index) {
+            this.addModel.points.splice(index, 1);
+        },
+        updateMapModel(data) {
+            this.$emit('updateMapModel', data);
+        },
+        deleteObj() {
+            this.$refs.dataform.deleteObj();
+        },
+        // 修改对象
+        edit() {
+            this.$refs.dataform.edit();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+.card {
+	height: 100%;
+}
+
+.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 {
+	position: absolute;
+	left: 120px;
+	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>