joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

ncc代码调整

Browse Source
This commit is contained in:
fan 2023-04-21 17:46:58 +08:00
parent dff6b0f545
commit 0cdaa7a6ed
40 changed files with 1671 additions and 494 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/jmapNew/constant/nccGraphRender.js Normal file
View File

@ -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;

10
src/jmapNew/constant/nccGraphType.js Normal file
View File

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

25
src/jmapNew/constant/pathsvg.js
View File

@ -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
},
zlevel: model.zlevel,
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;
}

17
src/jmapNew/constant/systemGraphRender.js
View File

@ -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;

8
src/jmapNew/constant/systemGraphType.js
View File

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

22
src/jmapNew/map.js
View File

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

4
src/jmapNew/mouseController.js
View File

@ -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;

8
src/jmapNew/painter.js
View File

@ -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) {

6
src/jmapNew/parser/index.js
View File

@ -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;

96
src/jmapNew/parser/parser-nccGraph.js Normal file
View File

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

65
src/jmapNew/parser/parser-systemGraph.js
View File

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

4
src/jmapNew/shape/index.js
View File

@ -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];

0
src/jmapNew/shape/systemGraph/Line/index.js → src/jmapNew/shape/nccGraph/Line/index.js
View File

22
src/jmapNew/shape/nccGraph/NccStation/Transfer.js Normal file
View File

@ -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() {
}
}

88
src/jmapNew/shape/nccGraph/NccStation/index.js Normal file
View File

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

114
src/jmapNew/shape/nccGraph/NccTrain/index.js Normal file
View File

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

0
src/jmapNew/shape/systemGraph/Rect/index.js → src/jmapNew/shape/nccGraph/Rect/index.js
View File

117
src/jmapNew/shape/nccGraph/RunLine/index.js Normal file
View File

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

0
src/jmapNew/shape/systemGraph/Text/index.js → src/jmapNew/shape/nccGraph/Text/index.js
View File

18
src/jmapNew/shape/nccGraph/index.js Normal file
View File

@ -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;

61
src/jmapNew/shape/systemGraph/Arrow/index.js
View File

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

15
src/jmapNew/shape/systemGraph/index.js
View File

@ -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;

4
src/jmapNew/utils/parser.js
View File

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

4
src/router/index.js
View File

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

47
src/store/modules/map.js
View File

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

9
src/store/modules/socket.js
View File

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

3
src/utils/stomp.js
View File

@ -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;

3
src/utils/subscribeCallback.js
View File

@ -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;
}
}
// 仿真内部聊天

11
src/views/newMap/display/stationDiagram/jlmap/index.vue
View File

@ -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) {
this.$jlmap.setMap(map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
},
// setMap(map) {
// this.$jlmap.setMap(map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
// },
// 刷新地图数据
refresh(map) {
},

35
src/views/newMap/display/terminals/index.vue
View File

@ -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) {
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;
}
creatSubscribe(getTopic(type, this.group), header, type === 'STATE' ? stateCallback : defaultCallback);
},
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; });
},

94
src/views/newMap/display/terminals/nccWork.vue Normal file
View File

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

8
src/views/newMap/display/terminals/terminalMenu.vue
View File

@ -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');
}
},

32
src/views/newMap/newDesignUser/demonList.vue
View File

@ -139,17 +139,17 @@ export default {
lineCode: elem.lineCode
},
{
id: '2',
name: '系统配置绘图',
type: 'mapSystem',
id: '3',
name: '画面管理',
type: 'mapPicture',
mapId: elem.id,
mapName: elem.name,
lineCode: elem.lineCode
},
{
id: '3',
name: '画面管理',
type: 'mapPicture',
id: '4',
name: 'NCC设计',
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) {

258
src/views/newMap/newMapdraftSystem/index.vue
View File

@ -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,203 +295,37 @@ 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 => {
this.$message.success(this.$t('tip.saveSuccessfully'));
this.mapSaveing = false;
this.initAutoSaveTask();
}).catch(error => {
console.log(error);
this.$messageBox(this.$t('tip.saveFailed'));
this.mapSaveing = false;
if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
this.clearAutoSave();
} else {
this.initAutoSaveTask();
}
});
}).catch(error => {
console.log(error, '错误提示');
this.mapSaveing = true;
this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => { // 草稿地图关系处理
saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(response => {
this.$message.success(this.$t('tip.saveSuccessfully'));
this.mapSaveing = false;
this.$message(this.$t('tip.saveFailed'));
this.initAutoSaveTask();
}).catch(error => {
console.log(error);
this.$messageBox(this.$t('tip.saveFailed'));
this.mapSaveing = false;
if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
this.clearAutoSave();
} else {
this.initAutoSaveTask();
}
});
}
}).catch(error => {
console.log(error, '错误提示');
this.mapSaveing = false;
this.$message(this.$t('tip.saveFailed'));
});
}
},
async checkOver() {
if (this.$refs.jlmapVisual) {
const map = this.$store.state.map.map;
if (map && this.$route.params.mapId) {
const checkInterlockDevice = await this.verifyInterlockDevice(map);
if (this.verifySectionRelation(map) && this.verifySignalPosition(map) && checkInterlockDevice && this.verifyStationPosition(map)) {
verifyMap(this.$route.params.mapId).then(res => {
if (res.data.length) {
this.tableToExcel(res.data);
this.$messageBox(this.$t('tip.dataValidationFailed'));
} else {
this.$message.success(this.$t('tip.dataValidationSuccess'));
}
}).catch(() => {
this.$message.error(this.$t('tip.requestFailed'));
});
}
}
}
},
tableToExcel(data) {
const filterVal = ['index'];
const arr = [];
data.forEach(item => {
arr.push({ index: item });
});
const dataList = this.formatJson(filterVal, arr);
import('@/utils/Export2Excel').then(excel => {
excel.export_json_to_excel([this.$t('tip.dataQuestion')], dataList, this.$t('tip.dataList'));
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
backRoute() {
this.$router.push({ path: `/design/usermap/home` });
},
updateMapModel(models) { // 创建 跟新元素
this.$store.dispatch('map/updateSystemMapDevices', models);
this.$store.dispatch('map/updateNccMapDevices', models);
},
// 撤销
revocation() {
@ -509,54 +343,10 @@ 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);
}
device.instance.drawSelected(flag);
}
}
}

349
src/views/newMap/newMapdraftSystem/jlmap.vue Normal file
View File

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

2
src/views/newMap/newMapdraftSystem/mapoperate/components/operateProperty.vue
View File

@ -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'), {

5
src/views/newMap/newMapdraftSystem/mapoperate/config/list.vue
View File

@ -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">

20
src/views/newMap/newMapdraftSystem/mapoperate/index.vue
View File

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

289
src/views/newMap/newMapdraftSystem/mapoperate/nccStation.vue Normal file
View File

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

261
src/views/newMap/newMapdraftSystem/mapoperate/runLine.vue Normal file
View File

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