ncc代码调整
This commit is contained in:
fan
parent
dff6b0f545
commit
0cdaa7a6ed
31
src/jmapNew/constant/nccGraphRender.js
Normal file
31
src/jmapNew/constant/nccGraphRender.js
Normal 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
10
src/jmapNew/constant/nccGraphType.js
Normal file
@ -0,0 +1,10 @@
|
||||
const nccGraphType = {
|
||||
NccLine: 'NccLine',
|
||||
NccText: 'NccText',
|
||||
NccRect: 'NccRect',
|
||||
RunLine: 'RunLine',
|
||||
NccStation: 'NccStation',
|
||||
NccTrain: 'NccTrain'
|
||||
};
|
||||
|
||||
export default nccGraphType;
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -1,8 +0,0 @@
|
||||
const systemGraphType = {
|
||||
Line: 'Line',
|
||||
Text: 'Text',
|
||||
Rect: 'Rect',
|
||||
Arrow: 'Arrow'
|
||||
};
|
||||
|
||||
export default systemGraphType;
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
96
src/jmapNew/parser/parser-nccGraph.js
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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];
|
||||
|
||||
22
src/jmapNew/shape/nccGraph/NccStation/Transfer.js
Normal file
22
src/jmapNew/shape/nccGraph/NccStation/Transfer.js
Normal 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
88
src/jmapNew/shape/nccGraph/NccStation/index.js
Normal 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
114
src/jmapNew/shape/nccGraph/NccTrain/index.js
Normal 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;
|
||||
}
|
||||
}
|
||||
117
src/jmapNew/shape/nccGraph/RunLine/index.js
Normal file
117
src/jmapNew/shape/nccGraph/RunLine/index.js
Normal 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};
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/jmapNew/shape/nccGraph/index.js
Normal file
18
src/jmapNew/shape/nccGraph/index.js
Normal 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;
|
||||
@ -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 };
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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};
|
||||
}
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
@ -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 });
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
// 仿真内部聊天
|
||||
|
||||
@ -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) {
|
||||
},
|
||||
|
||||
@ -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
94
src/views/newMap/display/terminals/nccWork.vue
Normal 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>
|
||||
@ -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');
|
||||
}
|
||||
},
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
|
||||
349
src/views/newMap/newMapdraftSystem/jlmap.vue
Normal file
349
src/views/newMap/newMapdraftSystem/jlmap.vue
Normal 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>
|
||||
@ -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'), {
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
289
src/views/newMap/newMapdraftSystem/mapoperate/nccStation.vue
Normal 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
261
src/views/newMap/newMapdraftSystem/mapoperate/runLine.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user