Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
fan
commit
8575de2bd9
@ -6,7 +6,8 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'separator', 'speedLimit', 'speedLimitName'],
|
||||
elemnetType:['name', 'line', 'separator', 'badShunt'],
|
||||
// 'speedLimit', 'speedLimitName','standTrackText','reentryTrackText','transferTrackText',
|
||||
active: {
|
||||
routeColor: true // 进路触发颜色
|
||||
},
|
||||
@ -16,7 +17,7 @@ class SkinCode extends defaultStyle {
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 12, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
fontColor: '#FFFFFF', // 字体颜色
|
||||
fontColor: 'rgb(192,192,192)', // 字体颜色 (银白)
|
||||
textAlign: 'center', // 水平对齐方式
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle', // 文字垂直对齐方式
|
||||
@ -33,39 +34,39 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standTrackText: {
|
||||
z: 10,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 24, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
fontColor: '#FFFFFF', // 字体颜色
|
||||
textAlign: 'center', // 水平对齐方式
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryTrackText: {
|
||||
z: 10,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
fontColor: '#FFFFFF', // 字体颜色
|
||||
textAlign: 'center', // 水平对齐方式
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferTrackText: {
|
||||
z: 10,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
fontColor: '#FFFFFF', // 字体颜色
|
||||
textAlign: 'center', // 水平对齐方式
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
// standTrackText: {
|
||||
// z: 10,
|
||||
// position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
// distance: 24, // 文字离区段距离
|
||||
// fontSize: 11, // 字体大小
|
||||
// fontWeight: 'normal', // 字体粗细
|
||||
// fontColor: '#FFFFFF', // 字体颜色
|
||||
// textAlign: 'center', // 水平对齐方式
|
||||
// textPosition: 'inside', // 文字位置
|
||||
// textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
// },
|
||||
// reentryTrackText: {
|
||||
// z: 10,
|
||||
// position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
// distance: 36, // 文字离区段距离
|
||||
// fontSize: 11, // 字体大小
|
||||
// fontWeight: 'normal', // 字体粗细
|
||||
// fontColor: '#FFFFFF', // 字体颜色
|
||||
// textAlign: 'center', // 水平对齐方式
|
||||
// textPosition: 'inside', // 文字位置
|
||||
// textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
// },
|
||||
// transferTrackText: {
|
||||
// z: 10,
|
||||
// position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
// distance: 36, // 文字离区段距离
|
||||
// fontSize: 11, // 字体大小
|
||||
// fontWeight: 'normal', // 字体粗细
|
||||
// fontColor: '#FFFFFF', // 字体颜色
|
||||
// textAlign: 'center', // 水平对齐方式
|
||||
// textPosition: 'inside', // 文字位置
|
||||
// textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
// },
|
||||
destinationText: {
|
||||
z: 10,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
@ -79,48 +80,59 @@ class SkinCode extends defaultStyle {
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
width: 3, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#FFFFFF', // 区段侵入颜色
|
||||
spareColor: '#618cc3', // 区段空闲颜色
|
||||
communicationOccupiedColor: '#FF00FF', // 区段通信车占用颜色
|
||||
unCommunicationOccupiedColor: '#DE310C', // 区段非通讯车占用颜色
|
||||
routeLockColor: '#3FFD46', // 区段进路锁定颜色
|
||||
spareColor: 'rgb(85,120,182)', // 区段空闲颜色 (浅蓝)
|
||||
|
||||
communicationOccupiedColor: '#FF0000', // 区段通信车占用颜色 （红色）
|
||||
unCommunicationOccupiedColor: '#FF0000', // 区段非通讯车占用颜色 （红色）
|
||||
|
||||
routeLockColor: '#FFFFFF', // 区段进路锁定颜色 （白色）
|
||||
faultLockColor: '#006400', // 区段故障锁定颜色
|
||||
|
||||
undefinedColor: '#0071C1', // 区段未定义颜色
|
||||
blockColor: '#00FF00', // 区段封锁颜色
|
||||
atcExcisionColor: '#A0522D', // 区段atc切除颜色
|
||||
atsExcisionColor: '#A0522D', // 区段ats切除颜色
|
||||
timeReleaseColor: '#3F3F3F', // 区段延时释放颜色
|
||||
|
||||
protectiveLockColor: '#FFFF00', // 区段保护锁闭
|
||||
|
||||
protectiveTimeReleaseColor: '#0071C1', // 区段保护延时解锁
|
||||
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
|
||||
logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用)
|
||||
invalidColor: '#B18E38' // 区段ARB故障颜色
|
||||
},
|
||||
speedLimit: { // 限速元素
|
||||
badShunt:{
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽度
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
|
||||
nameShow: true // 名称显示
|
||||
},
|
||||
speedLimitName: {
|
||||
z: 10,
|
||||
leftName: true, // 左侧限速值是否展示
|
||||
rightName: true, // 右侧限速值是否展示
|
||||
nameBackgroundIsRect: false, // 限速值背景是否为矩形
|
||||
nameBackgroundBorderWidth: 0, // 限速值背景是否边框宽度
|
||||
nameBackgroundBorderColor: '#000', // 限速值背景边框颜色
|
||||
limitValueDistance: -15,
|
||||
kilometerFontSize: 8, // 公里标大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
drogueWidth: 19, // 浮标宽度
|
||||
drogueHeight: 12 // 浮标高度
|
||||
distance: 2, // 分路不良 距离区段距离
|
||||
width: 1, // 分路不良的宽度
|
||||
lineColor: 'rgb(188,67,180)' // 分路不良颜色 （粉红色）
|
||||
},
|
||||
// speedLimit: { // 限速元素
|
||||
// z: 2,
|
||||
// width: 1, // 限速线的宽度
|
||||
// distance: 5, // 限速线距离区段距离
|
||||
// lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
|
||||
// nameShow: true // 名称显示
|
||||
// },
|
||||
// speedLimitName: {
|
||||
// z: 10,
|
||||
// leftName: true, // 左侧限速值是否展示
|
||||
// rightName: true, // 右侧限速值是否展示
|
||||
// nameBackgroundIsRect: false, // 限速值背景是否为矩形
|
||||
// nameBackgroundBorderWidth: 0, // 限速值背景是否边框宽度
|
||||
// nameBackgroundBorderColor: '#000', // 限速值背景边框颜色
|
||||
// limitValueDistance: -15,
|
||||
// kilometerFontSize: 8, // 公里标大小
|
||||
// kilometerColor: '#fff', // 公里标颜色
|
||||
// nameNumberFontSize: 11, // 限速值大小
|
||||
// nameNumberColor: '#C00808', // 限速值颜色
|
||||
// nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
// drogueWidth: 19, // 浮标宽度
|
||||
// drogueHeight: 12 // 浮标高度
|
||||
// },
|
||||
separator: {
|
||||
z: 3, // 分割符层级
|
||||
width: 1.5, // 物理区段分隔符宽度
|
||||
@ -458,17 +470,23 @@ class SkinCode extends defaultStyle {
|
||||
inversionColor: '#FFFF00', // 道岔反位颜色
|
||||
monolockLocationColor: '#00FF00', // 道岔单锁'定位'颜色 (绿色)
|
||||
monolockInversionColor: '#FFFF00', // 道岔单锁'反位'颜色 (黄色)
|
||||
faultFlashing: true // 故障闪烁
|
||||
faultFlashing: false // 故障闪烁
|
||||
},
|
||||
sectionAction: {
|
||||
flag: false, // 道岔 关联区段显示
|
||||
spareColor: '#5b5b5b' // 区段显示颜色
|
||||
},
|
||||
core: {
|
||||
length: 6 // 道岔单边长度
|
||||
length: 6, // 道岔单边长度
|
||||
graphShow: true, // 图形显示
|
||||
graphInversionColor: '#FFFF00', // 反位颜色
|
||||
graphLocalColor: '#00FF00' // 定位颜色
|
||||
},
|
||||
jointImg: { // 道岔 A B C D四元素属性配置
|
||||
trapezoidLength: 8 // 直角梯形元素默认长度
|
||||
trapezoidLength: 8, // 直角梯形元素默认长度
|
||||
faultStatus: true, // 挤岔表示
|
||||
fork: true, // 挤岔专用（如有挤岔操作 变为true）
|
||||
forKColor: 'red' // 挤岔颜色 配合挤岔专用
|
||||
},
|
||||
arcBlcok: { // 圆形封锁图形
|
||||
show: false, // 显示
|
||||
@ -479,10 +497,17 @@ class SkinCode extends defaultStyle {
|
||||
rectLock: { // 矩形封锁框图形
|
||||
rectWidth: 18, // 矩形框 宽高
|
||||
rectBorderColor: '#fff', // 矩形边框颜色
|
||||
monolock: true, // 单锁显示
|
||||
block: true, // 封锁显示
|
||||
blockColor: 'red' // 封锁颜色
|
||||
}
|
||||
blockColor: 'red', // 封锁颜色
|
||||
followName: true, // 位置跟随名称确定
|
||||
},
|
||||
arcBlcok: { // 圆形封锁图形
|
||||
show: true, // 显示
|
||||
shapeR: 10,
|
||||
arcBorderColor: 'red', // 默认边框颜色
|
||||
locationColor: 'red', // 定位封锁颜色
|
||||
inversionColor: 'red' // 反位封锁颜色
|
||||
},
|
||||
};
|
||||
|
||||
this[deviceType.LcControl] = {
|
||||
@ -470,7 +470,9 @@ class SkinCode extends defaultStyle {
|
||||
},
|
||||
core: {
|
||||
length: 6, // 道岔单边长度
|
||||
graphShow: true // 图形显示
|
||||
graphShow: true, // 图形显示
|
||||
graphInversionColor: '#FFFF00', // 反位颜色
|
||||
graphLocalColor: '#00FF00' // 定位颜色
|
||||
},
|
||||
jointImg: { // 道岔 A B C D四元素属性配置
|
||||
trapezoidLength: 8, // 直角梯形元素默认长度
|
||||
|
||||
@ -527,8 +527,10 @@ class SkinCode extends defaultStyle {
|
||||
spareColor: '#5b5b5b' // 区段显示颜色
|
||||
},
|
||||
core: {
|
||||
length: 6, // 道岔单边长度
|
||||
graphShow: true // 图形显示
|
||||
length: 6, // 道岔单边长度
|
||||
graphShow: true, // 图形显示
|
||||
graphInversionColor: '#FFFF00', // 反位颜色
|
||||
graphLocalColor: '#00FF00' // 定位颜色
|
||||
},
|
||||
jointImg: { // 道岔 A B C D四元素属性配置
|
||||
trapezoidLength: 8, // 直角梯形元素默认长度
|
||||
@ -537,7 +539,7 @@ class SkinCode extends defaultStyle {
|
||||
forKColor: 'red' // 挤岔颜色 配合挤岔专用
|
||||
},
|
||||
arcBlcok: { // 圆形封锁图形
|
||||
show: true, // 显示
|
||||
show: true, // 显示
|
||||
shapeR: 15,
|
||||
arcBorderColor: 'green', // 默认边框颜色
|
||||
locationColor: 'green', // 定位封锁颜色
|
||||
|
||||
196
src/jmapNew/shape/Section/EBadShunt.js
Normal file
196
src/jmapNew/shape/Section/EBadShunt.js
Normal file
@ -0,0 +1,196 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import JTriangle from '../../utils/JTriangle';
|
||||
import Vue from 'vue';
|
||||
|
||||
export default class EBadShunt extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
// 分路不良
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
/** 创建区段*/
|
||||
if (model && model.points.length > 1) {
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
let x = traingle.drictx * (style.Section.badShunt.distance) * traingle.getSinRate();
|
||||
let y = traingle.dricty * (style.Section.badShunt.distance) * traingle.getCosRate();
|
||||
if (x == Infinity) { x = 0; }
|
||||
if (y == Infinity) { y = 0; }
|
||||
// if (model.switch) {
|
||||
// 上侧临时限速线
|
||||
const badShuntLeft = this.createLimit({
|
||||
position: [x, -y],
|
||||
switch: model.switch,
|
||||
code: model.code,
|
||||
isSwitchSection: model.switchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
isCurve: model.curve, // 是否曲线
|
||||
points: model.points
|
||||
});
|
||||
// 下侧临时限速线
|
||||
const badShuntRight = this.createLimit({
|
||||
position: [-x, y],
|
||||
switch: model.switch,
|
||||
code: model.code,
|
||||
isSwitchSection: model.switchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
isCurve: model.curve, // 是否曲线
|
||||
points: model.points
|
||||
});
|
||||
badShuntLeft.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
badShuntRight.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
createLimit(model) {
|
||||
const style = this.model.style;
|
||||
const dataList = [];
|
||||
if (model.isCurve) {
|
||||
const shape = {};
|
||||
for (let i = 1; i < (model.points.length - 1); i++) {
|
||||
shape[`cpx${i}`] = model.points[i].x;
|
||||
shape[`cpy${i}`] = model.points[i].y;
|
||||
}
|
||||
|
||||
shape[`x1`] = model.points[0].x;
|
||||
shape[`y1`] = model.points[0].y;
|
||||
shape[`x2`] = model.points[model.points.length - 1].x;
|
||||
shape[`y2`] = model.points[model.points.length - 1].y;
|
||||
|
||||
dataList.push(new BezierCurve({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
culling: true,
|
||||
shape: shape,
|
||||
position: model.position,
|
||||
style: {
|
||||
lineWidth: style.Section.badShunt.width,
|
||||
stroke: style.Section.badShunt.lineColor,
|
||||
fillOpacity: 0
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
const swPadding = style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
|
||||
var switchWidth = style.Section.line.width + style.Section.line.beyondWidth; // 道岔宽度
|
||||
const beg = Object.assign({}, model.points[0]);
|
||||
const end = Object.assign({}, model.points[model.points.length - 1]);
|
||||
if (model.isSwitchSection && beg.y !== end.y) {
|
||||
const swch = Vue.prototype.$jlmap.mapDevice[model.relSwitchCode]; // 获取道岔model 及状态数据
|
||||
|
||||
if (swch && swch.instance) {
|
||||
const traingle = new JTriangle(swch.intersection, swch.skew);
|
||||
if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) {
|
||||
beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
|
||||
if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) {
|
||||
end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
end.y = end.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (model.points.length == 2) {
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.badShunt.width,
|
||||
stroke: style.Section.badShunt.lineColor
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: model.points[1].x,
|
||||
y2: model.points[1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.badShunt.width,
|
||||
stroke: style.Section.badShunt.lineColor
|
||||
}
|
||||
}));
|
||||
|
||||
for (let i = 1; i < (model.points.length - 2); i++) {
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
progressive: model.progressive,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: model.points[i].x,
|
||||
y1: model.points[i].y,
|
||||
x2: model.points[i + 1].x,
|
||||
y2: model.points[i + 1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.badShunt.width,
|
||||
stroke: style.Section.badShunt.lineColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
progressive: model.progressive,
|
||||
shape: {
|
||||
x1: model.points[model.points.length - 2].x,
|
||||
y1: model.points[model.points.length - 2].y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.badShunt.width,
|
||||
stroke: style.Section.badShunt.lineColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
return dataList;
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.eachChild((child) => {
|
||||
child.hide();
|
||||
});
|
||||
}
|
||||
show() {
|
||||
this.eachChild((child) => {
|
||||
child.show();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,7 @@ import ELimitName from './ELimitName'; // 成都三号线 限速名称
|
||||
// import JTriangle from '../../utils/JTriangle';
|
||||
import { drawSectionStyle } from '../../config/defaultStyle';
|
||||
import EStopRouteImg from './EStopRouteImg';
|
||||
import EBadShunt from './EBadShunt';
|
||||
import store from '@/store/index';
|
||||
|
||||
/** 区段*/
|
||||
@ -61,7 +62,8 @@ export default class Section extends Group {
|
||||
'separator': ESeparator, // 分隔符
|
||||
'speedLimit': ELimitLines, // 限速线
|
||||
'speedLimitName': ELimitName, // 限速线名称
|
||||
'shuttleBack': EBackArrowGroup // 折返箭头 (成都三号线显示)
|
||||
'shuttleBack': EBackArrowGroup, // 折返箭头 (成都三号线显示)
|
||||
'badShunt':EBadShunt // 大铁项目 分路不良
|
||||
};
|
||||
// 遍历当前线路下的绘图元素
|
||||
const model = this.model;
|
||||
@ -105,6 +107,7 @@ export default class Section extends Group {
|
||||
this.name && this.name.recover();
|
||||
this.speedLimit && this.speedLimit.hide();
|
||||
this.speedLimitName && this.speedLimitName.hide();
|
||||
this.badShunt && this.badShunt.hide();
|
||||
|
||||
this.axle && this.axle.setStyle({
|
||||
stroke: this.style.Section.line.spareColor,
|
||||
@ -433,9 +436,16 @@ export default class Section extends Group {
|
||||
sectionSwitch.instance && sectionSwitch.instance.setLimitState(model.speedUpLimit > 0, model.speedUpLimit);
|
||||
}
|
||||
}
|
||||
// 分路不良
|
||||
model.badShunt && this.badShuntStatus();
|
||||
}
|
||||
}
|
||||
|
||||
// 分路不良
|
||||
badShuntStatus() {
|
||||
this.badShunt && this.badShunt.show();
|
||||
}
|
||||
|
||||
/** 计算提示位置*/
|
||||
getShapeTipPoint() {
|
||||
const rect = this.getBoundingRect();
|
||||
|
||||
@ -230,11 +230,22 @@ export default class Switch extends Group {
|
||||
offsetX = directx * this.style.Switch.rectLock.offset.x;
|
||||
offsetY = directy * this.style.Switch.rectLock.offset.y;
|
||||
}
|
||||
let x = this.model.intersection.x - this.style.Switch.rectLock.rectWidth / 2 + offsetX;
|
||||
let y = this.model.intersection.y - this.style.Switch.rectLock.rectWidth / 2 + offsetY;
|
||||
if (this.style.Switch.rectLock.followName) {
|
||||
const directx = this.triangle.drictx;
|
||||
const rect = this.name.getBoundingRect();
|
||||
const wLen = this.style.Switch.rectLock.rectWidth - (directx > 0? rect.width: rect.width/2);
|
||||
const hLen = this.style.Switch.rectLock.rectWidth - rect.height
|
||||
x = rect.x - wLen/2;
|
||||
y = rect.y - hLen/2
|
||||
}
|
||||
|
||||
this.lockRect = new ELockRect({ // 单锁矩形框
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 6,
|
||||
x: this.model.intersection.x - this.style.Switch.rectLock.rectWidth / 2 + offsetX,
|
||||
y: this.model.intersection.y - this.style.Switch.rectLock.rectWidth / 2 + offsetY,
|
||||
x,
|
||||
y,
|
||||
width: this.style.Switch.rectLock.rectWidth,
|
||||
lineWidth: 1.8,
|
||||
stroke: this.style.Switch.rectLock.rectBorderColor,
|
||||
@ -314,8 +325,9 @@ export default class Switch extends Group {
|
||||
|
||||
/** 恢复状态*/
|
||||
recover() {
|
||||
this.lockRect.hide(); // 矩形包围框
|
||||
this.lockArc.hide(); // 圆形单锁框
|
||||
this.lockRect && this.lockRect.hide(); // 矩形包围框
|
||||
this.lockCircle && this.lockCircle.hide(); // 圆形包围框
|
||||
this.lockArc && this.lockArc.hide(); // 圆形单锁框
|
||||
this.name.getNameText().stopAnimation(false);
|
||||
this.shapeModelC.hide(); // 形状 C
|
||||
this.shapeModelA.hide(); // 形状 A
|
||||
@ -344,7 +356,7 @@ export default class Switch extends Group {
|
||||
}
|
||||
if (this.style.Switch.core.graphShow) { // 佛山线路显示
|
||||
this.shapeModelB.show();
|
||||
this.shapeModelB.setColor('#00FF00');
|
||||
this.shapeModelB.setColor(this.style.Switch.core.graphLocalColor);
|
||||
this.shapeModelC.show();
|
||||
this.shapeModelC.setColor(this.style.backgroundColor);
|
||||
}
|
||||
@ -364,7 +376,7 @@ export default class Switch extends Group {
|
||||
this.shapeModelA.setColor(this.style.Section.line.spareColor);
|
||||
if (this.style.Switch.core.graphShow) { // 佛山线路显示
|
||||
this.shapeModelC.show();
|
||||
this.shapeModelC.setColor('#FFFF00');
|
||||
this.shapeModelC.setColor(this.style.Switch.core.graphInversionColor);
|
||||
this.shapeModelC.attr({
|
||||
z: this.z + 6
|
||||
});
|
||||
@ -474,16 +486,20 @@ export default class Switch extends Group {
|
||||
|
||||
/** 单锁*/
|
||||
setMonolock(normalPosition, reversePosition) {
|
||||
if (this.style.Switch.rectLock.monolock) { // 判断单锁矩形是否显示
|
||||
if (this.style.Switch.rectLock &&
|
||||
this.style.Switch.rectLock.monolock) { // 判断单锁矩形是否显示
|
||||
this.lockRect.show();
|
||||
if (this.style.Switch.rectLock.rectBorderFillColor) { // 西安二号线 专用显示
|
||||
this.lockRect.setStyle({ stroke: this.style.Switch.rectLock.rectBorderColor, fill: this.style.Switch.rectLock.rectBorderFillColor });
|
||||
}
|
||||
}
|
||||
if (this.style.Switch.text.monolock) { // 单锁显示名称包围框
|
||||
|
||||
if (this.style.Switch.text &&
|
||||
this.style.Switch.text.monolock) { // 单锁显示名称包围框
|
||||
this.setHasTextBorder(1);
|
||||
}
|
||||
if (this.style.Switch.arcBlcok.show) { // 圆形单锁是否显示
|
||||
if (this.style.Switch.arcBlcok &&
|
||||
this.style.Switch.arcBlcok.show) { // 圆形单锁是否显示
|
||||
this.lockArc.show();
|
||||
if (normalPosition) {
|
||||
this.lockArc.setStyle({ stroke: this.style.Switch.arcBlcok.locationColor });
|
||||
@ -545,6 +561,7 @@ export default class Switch extends Group {
|
||||
this.lockRect.setStyle({ stroke: this.style.Switch.rectLock.blockColor, fill: this.style.Switch.rectLock.blockFillColor });
|
||||
}
|
||||
}
|
||||
|
||||
// if (this.style.Switch.coverBlock && this.style.Switch.coverBlock.show) {
|
||||
// this.shapeBlockCover.show();
|
||||
// this.shapeBlockCover.setColor(this.style.Switch.coverBlock.coverBlockColor);
|
||||
|
||||
@ -67,7 +67,7 @@ class Theme {
|
||||
'12': 'all',
|
||||
'13':'all',
|
||||
'14':'ecStation',
|
||||
'15':'datie'
|
||||
'15':'all'
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -79,7 +79,8 @@ export default {
|
||||
{
|
||||
name: 'global.help',
|
||||
handle: this.goToHelp,
|
||||
hidden: this.hideHelp
|
||||
hidden: false
|
||||
// hidden: this.hideHelp
|
||||
}
|
||||
|
||||
],
|
||||
@ -108,11 +109,10 @@ export default {
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
hideHelp() {
|
||||
debugger;
|
||||
return !(getSessionStorage('project') == 'login' || getSessionStorage('project') == 'design');
|
||||
}
|
||||
// hideHelp() {
|
||||
// return !(getSessionStorage('project') == 'login' || getSessionStorage('project') == 'design');
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
|
||||
@ -31,6 +31,7 @@ const Jlmap3dOtherVR = () => import('@/views/jlmap3d/maintainer/jl3dothervr');
|
||||
// const Jl3dMaintainer = () => import('@/views/jlmap3d/maintainer/jl3dmaintainer');
|
||||
|
||||
const DisplayNew = () => import('@/views/newMap/displayNew/index');
|
||||
const DisplayCity = () => import('@/views/newMap/displayCity/index');
|
||||
const DesignDisplayNew = () => import('@/views/newMap/displayNew/scriptDisplay/scriptPreview/index');
|
||||
const PracticeDisplay = () => import('@/views/newMap/displayNew/practiceDisplay');
|
||||
const BigLPFStrategy = () => import('@/views/newMap/displayNew/bigLPFStrategy');
|
||||
@ -371,6 +372,11 @@ export const publicAsyncRoute = [
|
||||
component: DisplayNew,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/displayCity/:mode',
|
||||
component: DisplayCity,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/design/displayNew/:mode',
|
||||
component: DesignDisplayNew,
|
||||
|
||||
284
src/views/newMap/displayCity/demon/addFault.vue
Normal file
284
src/views/newMap/displayCity/demon/addFault.vue
Normal file
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="addRules">
|
||||
<div class="addRulesInner">
|
||||
<div class="addRulesInnerTitle">新增故障</div>
|
||||
<div class="closeAddRulesInner" @click="addRulesClose">
|
||||
<span class="el-icon-close closeAddRulesIn" />
|
||||
</div>
|
||||
<el-form ref="form" :model="faultRule" label-width="100px" style="margin-left:15px;">
|
||||
<el-form-item label="目标设备">
|
||||
<!-- faultRule.targetDeviceCode -->
|
||||
<el-input v-model="targetDevice.name" disabled size="small" class="inputModelClass" />
|
||||
<!--<el-button :type="field === 'targetActive' ? 'danger' : 'primary'" size="small" @click="hover('targetActive')">{{ $t('map.activate') }}</el-button>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="触发方式">
|
||||
<el-select v-model="triggerMode" @change="changeTriggerMode">
|
||||
<el-option
|
||||
v-for="item in triggerModeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="故障类型">
|
||||
<el-select v-model="faultRule.faultType" placeholder="请选择" class="inputModelClass">
|
||||
<el-option
|
||||
v-for="item in faultTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="触发设备">
|
||||
<!-- faultRule.condition.triggerDeviceCode -->
|
||||
<el-input v-model="triggerDevice" size="small" disabled class="inputModelClass" />
|
||||
<el-button :type="field === 'triggerActive' ? 'danger' : 'primary'" size="small" @click="hover('triggerActive')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="触发状态">
|
||||
<!-- <el-input v-model="faultRule.condition.triggerDeviceStatus" size="small" class="inputModelClass" /> -->
|
||||
<el-select v-model="faultRule.condition.triggerDeviceStatus" placeholder="请选择" class="inputModelClass">
|
||||
<el-option
|
||||
v-for="item in triggerStatusList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="关联设备">
|
||||
<el-input v-model="triggerAssociatedDevice" size="small" disabled class="inputModelClass" />
|
||||
<el-button :type="field === 'triggerAssociated'? 'danger': 'primary'" size="small" @click="hover('triggerAssociated')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'TIME'" label="触发时间">
|
||||
<el-date-picker
|
||||
v-model="faultRule.condition.triggeringTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="addRulesFooter">
|
||||
<el-button size="medium" type="primary" @click="addRulesCreate">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button size="medium" @click="addRulesClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
|
||||
import { setFailureModeNew} from '@/api/simulation';
|
||||
import { deviceFaultType} from '@/scripts/cmdPlugin/Config';
|
||||
// 添加故障
|
||||
export default {
|
||||
name: 'AddChoose',
|
||||
props: {
|
||||
targetDevice: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
field:'',
|
||||
triggerStatusList:[],
|
||||
faultTypeList:[],
|
||||
faultRule:{
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggeringTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
},
|
||||
// targetDevice:'',
|
||||
triggerDevice:'',
|
||||
triggerAssociatedDevice: '',
|
||||
triggerMode: 'DEVICE',
|
||||
triggerModeList: [
|
||||
{label: '设备触发', value: 'DEVICE'},
|
||||
{label: '时间触发', value: 'TIME'}
|
||||
]
|
||||
// rules:{
|
||||
// targetDevice:[
|
||||
// { required: true, message:'请选择目标设备', trigger: 'blur' }
|
||||
// ],
|
||||
// triggerDevice:[
|
||||
// { required: true, message:'请选择触发设备', trigger: 'blur' }
|
||||
// ],
|
||||
// faultRule:{
|
||||
// faultType:[
|
||||
// { required: true, message:'请选择故障类型', trigger: 'blur' },
|
||||
// { required: true, message:'请选择故障类型', trigger: 'change' }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device.code) {
|
||||
this.deviceSelect(device);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods:{
|
||||
deviceSelect(em) {
|
||||
if (this.field.toUpperCase() === 'triggerAssociated'.toUpperCase()) {
|
||||
// if (em._type == 'Station') {
|
||||
// em = this.$store.getters['map/getDeviceByCode'](em.zcCode);
|
||||
// }
|
||||
// this.faultRule.targetDeviceType = this.covertType(em._type);
|
||||
// this.faultRule.targetDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.faultRule.condition.triggerAssociatedDeviceCode = em.code;
|
||||
} else if (this.field.toUpperCase() === 'triggerActive'.toUpperCase()) {
|
||||
this.faultRule.condition.triggerDeviceType = this.covertType(em._type);
|
||||
this.faultRule.condition.triggerDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else if (em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.triggerDevice = em._type + '-' + em.code;
|
||||
} else {
|
||||
this.triggerDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.triggerStatusList = [];
|
||||
const faultStatus = FaultStatusEnum[this.faultRule.condition.triggerDeviceType];
|
||||
if (faultStatus) {
|
||||
const list = Object.keys(faultStatus);
|
||||
list.forEach(key=>{
|
||||
this.triggerStatusList.push({label:faultStatus[key], value:key});
|
||||
});
|
||||
}
|
||||
this.field = '';
|
||||
this.faultRule.condition.triggerDeviceStatus = '';
|
||||
}
|
||||
},
|
||||
covertType(type) {
|
||||
switch (type) {
|
||||
case 'Section':return 'SECTION';
|
||||
case 'Signal':return 'SIGNAL';
|
||||
case 'Switch':return 'SWITCH';
|
||||
case 'Station':return 'STATION';
|
||||
case 'ZcControl':return 'ZC';
|
||||
case 'StationStand':return 'STAND';
|
||||
case 'Train':return 'TRAIN';
|
||||
}
|
||||
},
|
||||
hover(field) {
|
||||
if (this.field == '') {
|
||||
this.field = field;
|
||||
} else {
|
||||
this.field = '';
|
||||
}
|
||||
},
|
||||
addRulesCreate() {
|
||||
if (this.triggerDevice == '') {
|
||||
this.$messageBox('请选择触发设备');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.condition.triggerDeviceStatus == '') {
|
||||
this.$messageBox('请选择触发状态');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.faultType == '') {
|
||||
this.$messageBox('请选择故障类型');
|
||||
return;
|
||||
}
|
||||
console.log(this.faultRule, '-------------');
|
||||
setFailureModeNew(this.faultRule, this.$route.query.group).then(res=>{
|
||||
this.$emit('closeAddRules');
|
||||
this.$emit('reload');
|
||||
}).catch((error)=>{
|
||||
this.$messageBox('创建故障失败: ' + error.message);
|
||||
});
|
||||
},
|
||||
addRulesClose() {
|
||||
this.resetForm();
|
||||
this.$emit('closeAddRules');
|
||||
},
|
||||
|
||||
initValue() {
|
||||
this.faultTypeList = deviceFaultType[this.targetDevice._type];
|
||||
this.faultRule.targetDeviceCode = this.targetDevice.code;
|
||||
this.faultRule.targetDeviceType = this.covertType(this.targetDevice._type);
|
||||
},
|
||||
resetForm() {
|
||||
this.triggerDevice = '';
|
||||
this.faultRule = {
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggeringTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.addRules{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
}
|
||||
.addRulesInner{
|
||||
position: relative;
|
||||
width: 380px;
|
||||
margin-top:6px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border: 1px #ccc solid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-shadow: 3px 3px 3px #a0a0a0;
|
||||
z-index:2;
|
||||
}
|
||||
.queryList{
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
.inputModelClass{
|
||||
width:150px;
|
||||
}
|
||||
.addRulesInnerTitle{
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.closeAddRulesInner{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.closeAddRulesIn{
|
||||
font-size: 19px;
|
||||
}
|
||||
.addRulesFooter{
|
||||
margin-left: 116px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
196
src/views/newMap/displayCity/demon/equipment.vue
Normal file
196
src/views/newMap/displayCity/demon/equipment.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title="设备管理"
|
||||
:visible.sync="show"
|
||||
direction="ltr"
|
||||
:before-close="doClose"
|
||||
custom-class="dialog_box"
|
||||
size="43%"
|
||||
>
|
||||
<div style="margin-bottom: 3px; overflow: hidden; padding: 0 10px;">
|
||||
<div class="plc_box">名称: {{ plcInfo.name }}</div>
|
||||
<div class="plc_box">状态: <span :style="{'color': plcInfo.status ? 'green' : 'red'}">{{ plcInfo.status ? '在线' : '不在线' }}</span></div>
|
||||
<el-button type="text" size="small" class="freshen_box" @click="getList">刷新</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border style="width: 100%; max-height: calc(100% - 24px); overflow: auto;">
|
||||
<el-table-column prop="code" label="设备编号" width="180" />
|
||||
<el-table-column prop="typeName" label="设备类型" width="180" />
|
||||
<el-table-column prop="vrDeviceCode" label="连接设备编码">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.vrDeviceCode" class="flex_box">{{ scope.row.vrDeviceName }}</div>
|
||||
<div v-if="!scope.row.vrDeviceCode" class="flex_box">(空)</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.buttonShowType ? 'danger' : 'primary'" size="small" @click="handleClick(scope.row, scope.$index)">连接</el-button>
|
||||
<el-button size="small" @click="cancel(scope.row, scope.$index)">断开</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAllSimulationList, postSimulationConnectById, putSimulationDisconnectById } from '@/api/simulation.js';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'Equipment',
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
group: '',
|
||||
tableData: [],
|
||||
typeList: ConstConfig.ConstSelect.projectDeviceTypeList,
|
||||
plcInfo: {
|
||||
name: '',
|
||||
status: ''
|
||||
},
|
||||
index: 0,
|
||||
selected: {},
|
||||
typeObj: {
|
||||
Section: '区段',
|
||||
Signal: '信号机',
|
||||
Switch: '道岔',
|
||||
Psd: '屏蔽门',
|
||||
StationStand: '站台'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('selectDevice', (data) => {
|
||||
this.selected = data;
|
||||
this.tableData[this.index]['buttonShowType'] = false;
|
||||
this.tableData.splice(this.index, 1, this.tableData[this.index]);
|
||||
this.$store.dispatch('map/selectDeviceCode', {flag: false, type: ''});
|
||||
this.connect(this.tableData[this.index]);
|
||||
});
|
||||
},
|
||||
async beforeDestroy() {
|
||||
EventBus.$off('selectDevice');
|
||||
},
|
||||
methods: {
|
||||
async doShow() {
|
||||
this.show = true;
|
||||
this.group = this.$route.query.group;
|
||||
this.getList();
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getAllSimulationList(this.group);
|
||||
this.tableData = [];
|
||||
res.data.forEach((item, index) => {
|
||||
if (item.type == 'PLC_GATEWAY') {
|
||||
this.plcInfo = {
|
||||
name: 'PLC网关',
|
||||
status: item.online
|
||||
};
|
||||
} else {
|
||||
item.buttonShowType = false;
|
||||
item.typeName = this.typeList.find(el => el.value == item.type).label;
|
||||
if (item.vrDeviceCode) {
|
||||
item.vrDeviceName = this.$store.getters['map/getDeviceByCode'](item.vrDeviceCode).name;
|
||||
}
|
||||
if (this.project == 'heb' || this.project == 'designheb') {
|
||||
if (item.type == 'SWITCH') {
|
||||
this.tableData.push(item);
|
||||
}
|
||||
} else {
|
||||
this.tableData.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
handleClick(row, index) {
|
||||
row.buttonShowType = !row.buttonShowType;
|
||||
this.index = index;
|
||||
this.tableData.splice(index, 1, row);
|
||||
this.$store.dispatch('map/selectDeviceCode', {flag: row.buttonShowType, type: row.type});
|
||||
},
|
||||
async connect(row) {
|
||||
this.$confirm(`您确定连接${this.typeObj[this.selected._type] || '设备'}: ${this.selected.name}, 是否继续?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await postSimulationConnectById(this.group, row.id, this.selected.code);
|
||||
if (res && res.code == 200) {
|
||||
this.$message.success('连接成功!');
|
||||
this.tableData[this.index]['vrDeviceCode'] = this.selected.code;
|
||||
this.tableData[this.index]['vrDeviceName'] = this.selected.name;
|
||||
this.tableData.splice(this.index, 1, this.tableData[this.index]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
async cancel(row, index) {
|
||||
this.$confirm('您确定将次设备断开, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
if (row.vrDeviceCode) {
|
||||
row.vrDeviceCode = '';
|
||||
row.vrDeviceName = '';
|
||||
this.tableData.splice(index, 1, row);
|
||||
try {
|
||||
const res = await putSimulationDisconnectById(this.group, row.id);
|
||||
if (res && res.code == 200) {
|
||||
this.$message.success('断开成功!');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.plc_box{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
padding: 9px;
|
||||
}
|
||||
.freshen_box{
|
||||
float: right;
|
||||
}
|
||||
.flex_box{
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
/deep/ {
|
||||
.el-dialog__wrapper{
|
||||
width: 800px;
|
||||
}
|
||||
.dialog_box{
|
||||
height: 100%;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding-top: 6px;
|
||||
height: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
600
src/views/newMap/displayCity/demon/faultChoose.vue
Normal file
600
src/views/newMap/displayCity/demon/faultChoose.vue
Normal file
@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<div v-if="dialogShow" id="faultChoose">
|
||||
<div class="falutChooseTitle">{{ title }}</div>
|
||||
<div class="closeFalutChoose" @click="closeFaultChoose">
|
||||
<span class="el-icon-close closeFalutChooseIn" />
|
||||
</div>
|
||||
<el-card class="triggerFaultInfo">
|
||||
<el-button type="primary" size="small" style="margin-bottom:10px;" @click="isTableShow=!isTableShow">{{ isTableShow?'隐藏列表':'显示列表' }}</el-button>
|
||||
<el-table v-if="isTableShow" :data="faultList" height="300" border style="width: 100%;font-size:13px;">
|
||||
<el-table-column prop="targetDeviceCode" label="目标设备" width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${deviceMap[scope.row.targetDeviceType]}${formatNameByCode(scope.row.targetDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="faultType" label="故障类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ covertFaultType(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition" label="列车" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${deviceMap[scope.row.condition.triggerDeviceType] || ''}${formatNameByCode(scope.row.condition.triggerDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition" label="到达区段" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${formatNameByCode(scope.row.condition.triggerAssociatedDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition.condition.triggerTime" label="触发时间" width="150" />
|
||||
<el-table-column prop="triggeringTime" label="故障状态">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.triggeringTime? '已触发': '未触发' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="!scope.row.triggeringTime" type="text" size="small" @click="handleDelete(scope.row)">取消</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<div class="targetCard">
|
||||
<div class="targetCardHead">
|
||||
<el-button style="padding:3px 0" type="text" @click="addRulesCreate">新增</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :model="faultRule" :inline="true" label-width="100px" style="margin-left:15px;">
|
||||
<el-form-item label="目标设备" class="targetFormItem">
|
||||
<el-input v-model="targetDeviceName" disabled size="small" class="inputModelClass" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="故障类型" class="targetFormItem">
|
||||
<el-select v-model="faultRule.faultType" placeholder="请选择" class="inputModelClass" size="small" style="width: 300px;">
|
||||
<el-option
|
||||
v-for="item in faultTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="列车" class="targetFormItem">
|
||||
<el-input v-model="triggerDevice" size="small" disabled class="inputModelClass" style="width: 240px;" />
|
||||
<el-button :type="field === 'triggerActive' ? 'danger' : 'primary'" size="small" @click="hover('triggerActive')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="到达区段" class="targetFormItem">
|
||||
<el-input v-model="triggerAssociatedDevice" size="small" disabled class="inputModelClass" style="width: 240px;" />
|
||||
<el-button :type="field === 'triggerAssociated'? 'danger': 'primary'" size="small" @click="hover('triggerAssociated')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'TIME'" label="触发时间" class="targetFormItem">
|
||||
<el-date-picker
|
||||
v-model="faultRule.condition.triggerTime"
|
||||
size="small"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSimulationFaultRules, setFailureModeNew, deleteFailureRule, cancelFailureModeNew } from '@/api/simulation';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
|
||||
import ModelType from '@/jmapNew/constant/deviceType';
|
||||
import { deviceFaultType } from '@/scripts/cmdPlugin/Config';
|
||||
|
||||
// 故障列表
|
||||
export default {
|
||||
name: 'FaultChoose',
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
isAdd:false,
|
||||
isTableShow:true,
|
||||
deviceMap: {},
|
||||
simulationFault:{},
|
||||
faultList: [],
|
||||
faultRule:{
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggerTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
},
|
||||
triggerDevice:'',
|
||||
triggerAssociatedDevice: '',
|
||||
triggerMode: 'DEVICE',
|
||||
triggerModeList: [
|
||||
{label: '设备触发', value: 'DEVICE'},
|
||||
{label: '时间触发', value: 'TIME'}
|
||||
],
|
||||
field:'',
|
||||
triggerStatusList:[],
|
||||
faultTypeList:[],
|
||||
targetDeviceName: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return '自动故障设置';
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
targetDevice() {
|
||||
return this.$store.state.training.triggerFaultDevice;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.autoFaultTrigger':function(val) {
|
||||
this.dialogShow && this.getSimulationFaultRules();
|
||||
},
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device && device.code) {
|
||||
this.deviceSelect(device);
|
||||
}
|
||||
},
|
||||
targetDevice: function(device) {
|
||||
this.targetDeviceName = this.targetDevice.name || this.targetDevice.code;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.deviceMap = [];
|
||||
ConstConfig.ConstSelect.simulationDeviceList.forEach(elem => {
|
||||
this.deviceMap[elem.value] = elem.label;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
formatNameByCode(code) {
|
||||
let name = '';
|
||||
const device = this.$store.getters['map/getDeviceByCode'](code);
|
||||
if (device) {
|
||||
switch (device._type) {
|
||||
case ModelType.Signal:
|
||||
case ModelType.Switch:
|
||||
case ModelType.Station:
|
||||
case ModelType.Section: {
|
||||
if (device.parentName) {
|
||||
name += device.parentName + '-' + device.name;
|
||||
} else {
|
||||
name += device.name;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case ModelType.Train:
|
||||
name = device.code;
|
||||
break;
|
||||
}
|
||||
if (device.stationCode) {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](device.stationCode);
|
||||
if (station) {
|
||||
name += '【' + station.name + '】';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
hover(field) {
|
||||
if (this.field == '') {
|
||||
this.field = field;
|
||||
} else {
|
||||
this.field = '';
|
||||
}
|
||||
},
|
||||
handleDelete(row) {
|
||||
cancelFailureModeNew(row.id, this.$route.query.group).then(resp => {
|
||||
this.getSimulationFaultRules();
|
||||
}).catch(() => {
|
||||
this.$message.error('取消故障失败！');
|
||||
});
|
||||
},
|
||||
covertType(type) {
|
||||
switch (type) {
|
||||
case 'SECTION':return 'Section';
|
||||
case 'SIGNAL':return 'Signal';
|
||||
case 'SWITCH':return 'Switch';
|
||||
case 'STATION':return 'Station';
|
||||
case 'ZC':return 'ZcControl';
|
||||
case 'STAND':return 'StationStand';
|
||||
case 'TRAIN':return 'Train';
|
||||
case 'Section':return 'SECTION';
|
||||
case 'Signal':return 'SIGNAL';
|
||||
case 'Switch':return 'SWITCH';
|
||||
case 'Station':return 'STATION';
|
||||
case 'ZcControl':return 'ZC';
|
||||
case 'StationStand':return 'STAND';
|
||||
case 'Train':return 'TRAIN';
|
||||
}
|
||||
},
|
||||
covertFaultType(row) {
|
||||
let faultType = '';
|
||||
if (row && row.id) {
|
||||
let type = this.covertType(row.targetDeviceType);
|
||||
if (type == 'Station') {
|
||||
type = 'ZcControl';
|
||||
}
|
||||
const currentList = deviceFaultType[type];
|
||||
currentList.forEach(temp=>{
|
||||
if (temp.value === row.faultType) {
|
||||
faultType = temp.label;
|
||||
}
|
||||
});
|
||||
}
|
||||
return faultType;
|
||||
},
|
||||
closeFaultChoose() {
|
||||
this.dialogShow = false;
|
||||
this.isAdd = false;
|
||||
if (this.$refs.addFault) {
|
||||
this.$refs.addFault.resetForm();
|
||||
}
|
||||
},
|
||||
closeAddRules() {
|
||||
this.isAdd = false;
|
||||
},
|
||||
getSimulationFaultRules() {
|
||||
if (this.dialogShow) {
|
||||
getSimulationFaultRules(this.$route.query.group).then(resp => {
|
||||
this.faultList = resp.data;
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取数据异常');
|
||||
});
|
||||
}
|
||||
},
|
||||
changeTriggerMode(val) {
|
||||
this.resetForm();
|
||||
this.triggerMode = val;
|
||||
this.faultRule.condition.type = val;
|
||||
},
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
this.getSimulationFaultRules();
|
||||
this.resetForm();
|
||||
this.faultTypeList = deviceFaultType[this.targetDevice._type];
|
||||
this.faultRule.targetDeviceCode = this.targetDevice.code;
|
||||
this.faultRule.targetDeviceType = this.covertType(this.targetDevice._type);
|
||||
this.faultRule.faultType = (this.faultTypeList[0] || {}).value;
|
||||
this.$nextTick(()=>{
|
||||
this.dragEvent();
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.getSimulationFaultRules();
|
||||
this.field = '';
|
||||
this.triggerDevice = '';
|
||||
this.triggerAssociatedDevice = '';
|
||||
this.faultRule = {
|
||||
targetDeviceCode:this.targetDevice.code,
|
||||
targetDeviceType:this.covertType(this.targetDevice._type),
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggerTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addFault.initValue();
|
||||
});
|
||||
},
|
||||
deleteFailure(index, row) {
|
||||
event.cancelBubble = true;
|
||||
this.$confirm('删除故障规则，是否继续？', '提 示', {
|
||||
confirmButtonText: '确 定',
|
||||
cancelButtonText: '取 消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteFailureRule(row.id).then(resp => {
|
||||
}).catch(error => {
|
||||
this.$message.error(`删除故障规则失败: ${error.message}`);
|
||||
});
|
||||
}).catch( () => { });
|
||||
},
|
||||
settingFailure(index, row, idx) {
|
||||
const faultModel = {ruleId: row.id, auto:true};
|
||||
// row['loading' + idx] = true;
|
||||
setFailureModeNew(faultModel, this.group).then(() => {
|
||||
this.getSimulationFaultRules();
|
||||
this.$message.success('设置自动故障成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('设置自动故障失败');
|
||||
});
|
||||
},
|
||||
cancleAutoFault() {
|
||||
const faultModel = {auto:false};
|
||||
setFailureModeNew(faultModel, this.group).then(() => {
|
||||
this.getSimulationFaultRules();
|
||||
this.$message.success('取消自动故障成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('取消自动故障失败');
|
||||
});
|
||||
},
|
||||
addRulesCreate() {
|
||||
if (this.triggerMode === 'DEVICE' && this.triggerDevice == '') {
|
||||
this.$messageBox('请选择触发设备');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'DEVICE' && this.faultRule.condition.triggerDeviceStatus == '') {
|
||||
this.$messageBox('请选择触发状态');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.faultType == '') {
|
||||
this.$messageBox('请选择故障类型');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'TIME' && this.faultRule.condition.triggerTime == '') {
|
||||
this.$messageBox('请选择触发时间');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'DEVICE' && this.faultRule.condition.triggerDeviceType === 'TRAIN' && this.faultRule.condition.triggerDeviceStatus === 'Section' && this.faultRule.condition.triggerAssociatedDeviceCode == '') {
|
||||
this.$messageBox('请选择关联设备');
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
targetDeviceCode:this.targetDevice.code,
|
||||
targetDeviceType:this.covertType(this.targetDevice._type),
|
||||
faultType: this.faultRule.faultType,
|
||||
condition:{
|
||||
triggerDeviceCode: this.faultRule.condition.triggerDeviceCode || null,
|
||||
triggerDeviceStatus:this.faultRule.condition.triggerDeviceStatus || null,
|
||||
triggerDeviceType :this.faultRule.condition.triggerDeviceType || null,
|
||||
type:this.faultRule.condition.type,
|
||||
triggerTime: this.faultRule.condition.triggerTime || null,
|
||||
triggerAssociatedDeviceCode: this.faultRule.condition.triggerAssociatedDeviceCode || null
|
||||
}
|
||||
};
|
||||
setFailureModeNew(param, this.$route.query.group).then(res=>{
|
||||
this.$message.success('创建故障成功！');
|
||||
this.resetForm();
|
||||
}).catch((error)=>{
|
||||
this.$messageBox('创建故障失败: ' + error.message);
|
||||
});
|
||||
},
|
||||
deviceSelect(em) {
|
||||
if (this.field.toUpperCase() === 'triggerAssociated'.toUpperCase() && em._type.toUpperCase() === 'Section'.toUpperCase()) {
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.faultRule.condition.triggerAssociatedDeviceCode = em.code;
|
||||
} else if (this.field.toUpperCase() === 'triggerActive'.toUpperCase() && em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.faultRule.condition.triggerDeviceType = this.covertType(em._type);
|
||||
this.faultRule.condition.triggerDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else if (em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.triggerDevice = em._type + '-' + em.code;
|
||||
} else {
|
||||
this.triggerDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.triggerStatusList = [];
|
||||
const faultStatus = FaultStatusEnum[this.faultRule.condition.triggerDeviceType];
|
||||
if (faultStatus) {
|
||||
const list = Object.keys(faultStatus);
|
||||
list.forEach(key=>{
|
||||
this.triggerStatusList.push({label:faultStatus[key], value:key});
|
||||
});
|
||||
}
|
||||
this.field = '';
|
||||
this.faultRule.condition.triggerDeviceStatus = (this.triggerStatusList[0] || {}).value;
|
||||
}
|
||||
},
|
||||
dragEvent() {
|
||||
const offset = this.offset;
|
||||
const dialogHeaderEl = document.querySelector('.falutChooseTitle');
|
||||
const dragDom = document.querySelector('#faultChoose');
|
||||
dialogHeaderEl.style.cursor = 'move';
|
||||
|
||||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||||
|
||||
dialogHeaderEl.onmousedown = (e) => {
|
||||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||||
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
||||
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
||||
|
||||
/** 获取到的值带px 正则匹配替换*/
|
||||
let styL, styT;
|
||||
|
||||
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
|
||||
if (sty.left.includes('%')) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
||||
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
||||
} else {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styL = +sty.left.replace(/\px/g, '');
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
styT = +sty.top.replace(/\px/g, '');
|
||||
}
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
/** 通过事件委托，计算移动的距离*/
|
||||
const l = e.clientX - disX;
|
||||
const t = e.clientY - disY;
|
||||
|
||||
/** 移动当前元素*/
|
||||
// dragDom.style.left = `${l + styL}px`;
|
||||
// dragDom.style.top = `${t + styT}px`;
|
||||
|
||||
/** 移动当前元素*/
|
||||
if (l + styL < 0) {
|
||||
dragDom.style.left = `0px`;
|
||||
} else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
|
||||
dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
|
||||
} else {
|
||||
dragDom.style.left = `${l + styL}px`;
|
||||
}
|
||||
if (t + styT <= offset) {
|
||||
dragDom.style.top = offset + `px`;
|
||||
} else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
|
||||
dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
|
||||
} else {
|
||||
dragDom.style.top = `${t + styT}px`;
|
||||
}
|
||||
|
||||
/** 将此时的位置传出去*/
|
||||
// binding.value({ x: e.pageX, y: e.pageY });
|
||||
};
|
||||
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#faultChoose .card .queryList .el-card .el-card__body .el-table--border .el-table__body-wrapper{
|
||||
height: 135px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
#faultChoose .el-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.triggerFaultListLeft{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 730px;
|
||||
}
|
||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// height: 110px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;;
|
||||
}
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
/*滑块效果*/
|
||||
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 5px;
|
||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
/*IE滚动条颜色*/
|
||||
html {
|
||||
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
||||
scrollbar-highlight-color:#000;
|
||||
scrollbar-3dlight-color:#000;
|
||||
scrollbar-darkshadow-color:#000;
|
||||
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
||||
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
||||
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
||||
}
|
||||
</style>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
.triggerFaultInfo{
|
||||
margin-bottom:10px;
|
||||
padding: 10px 10px 10px 15px;
|
||||
}
|
||||
.triggerFaultList{
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.triggerFaultTitle{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.falutChooseTitle{
|
||||
padding: 15px;
|
||||
cursor: all-scroll;
|
||||
}
|
||||
#faultChoose{
|
||||
width: 1000px;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
background: #fff;
|
||||
padding:0px 0px 15px 0px;
|
||||
// transform: translate3d(-50%,-50%,0);
|
||||
border-radius: 6px;
|
||||
z-index:999;
|
||||
}
|
||||
.faultChooseFoot{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.closeFalutChoose{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.closeFalutChooseIn{
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.targetCard{
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
border-top: 1px #ebeef5 solid;
|
||||
}
|
||||
.targetFormItem{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.targetCardHead{
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px #f4f4f4 solid;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
</style>
|
||||
118
src/views/newMap/displayCity/demon/setTime.vue
Normal file
118
src/views/newMap/displayCity/demon/setTime.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="show" width="550px" :before-close="doClose">
|
||||
<el-form ref="form" label-width="120px" :model="formModel" :rules="rules">
|
||||
<el-form-item :label="$t('display.setTime.systemTime')" prop="initTime">
|
||||
<el-time-picker
|
||||
v-model="formModel.initTime"
|
||||
:picker-options="pickerOptions"
|
||||
:placeholder="$t('display.setTime.anyTime')"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="hasNumber" :label="$t('display.setTime.loadTrainNum')" prop="loadNum">
|
||||
<el-input-number v-model="formModel.loadNum" :min="1" :max="maxNumber" :label="$t('display.setTime.selectLoadTrainNum')" />
|
||||
<span> {{ ` (${$t('display.setTime.maxTrainNum')} ：${maxNumber}) ` }} </span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="show = false">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="status" @click="handleSure">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { prefixIntrger } from '@/utils/date';
|
||||
import { getLoadTrainNumber } from '@/api/simulation';
|
||||
|
||||
// 计划行车时间选择
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
formModel: {
|
||||
initTime: new Date(),
|
||||
loadNum: 1
|
||||
},
|
||||
maxNumber: 1,
|
||||
pickerOptions: { selectableRange: '00:00:00 - 23:59:59' },
|
||||
status: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$t('display.setTime.setSimulationSystemTime');
|
||||
},
|
||||
hasNumber() {
|
||||
return this.$route.params.mode == 'demon' && this.$route.query.prdType == '04';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
initTime: [
|
||||
{ required: true, message: this.$t('display.setTime.selectSystemTime'), trigger: 'change' },
|
||||
{
|
||||
validator(rule, value, callback) {
|
||||
if (this.maxNumber == 0) {
|
||||
callback(new Error(this.$t('display.setTime.selectValidStartTime')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
maxNumber: this.maxNumber
|
||||
}
|
||||
],
|
||||
loadNum: [
|
||||
{ required: true, message: this.$t('display.setTime.selectTrainNum'), trigger: 'change' }
|
||||
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.formModel.initTime = new Date(this.$store.state.training.initTime || null);
|
||||
this.handleChange(this.formModel.initTime);
|
||||
this.show = true;
|
||||
},
|
||||
doClose() {
|
||||
this.status = false;
|
||||
this.show = false;
|
||||
},
|
||||
handleChange(initTime) {
|
||||
this.formModel.loadNum = 0;
|
||||
if (this.hasNumber) {
|
||||
getLoadTrainNumber({ time: this.formatTime(initTime) }, this.group).then(resp => {
|
||||
this.maxNumber = parseInt(resp.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
formatTime(initTime) {
|
||||
const hh = prefixIntrger(initTime.getHours(), 2);
|
||||
const mm = prefixIntrger(initTime.getMinutes(), 2);
|
||||
const ss = prefixIntrger(initTime.getSeconds(), 2);
|
||||
return `${hh}:${mm}:${ss}`;
|
||||
},
|
||||
handleSure() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.status = true;
|
||||
const model = {
|
||||
initTime: this.formatTime(this.formModel.initTime)
|
||||
};
|
||||
|
||||
if (this.hasNumber) {
|
||||
model['loadNum'] = this.formModel.loadNum;
|
||||
}
|
||||
|
||||
this.$emit('ConfirmSelectBeginTime', model);
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
190
src/views/newMap/displayCity/demonMenu.vue
Normal file
190
src/views/newMap/displayCity/demonMenu.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="isAllShow&&project != 'bjd'" class="display_top_draft" :style="allStyle">
|
||||
<div class="btn_hover" @click="menuClick">菜单</div>
|
||||
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:-${btnWidth}px`">
|
||||
<el-button v-if="jl3dmodelShow && !isContest && project !== 'bjd'" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<Jl3d-Device
|
||||
v-if="deviceif"
|
||||
v-show="deviceShow"
|
||||
ref="Jl3dDevice"
|
||||
:panel-show="deviceShow"
|
||||
@closedevice3dview="jumpjlmap3dmodel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getPostByProjectCode } from '@/api/learn';
|
||||
import { ProjectCode } from '@/scripts/ProjectConfig';
|
||||
export default {
|
||||
name:'DemonMenu',
|
||||
components:{
|
||||
Jl3dDevice,
|
||||
},
|
||||
props:{
|
||||
isAllShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jl3dmodelShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jl3dnameShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
cctvShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
trafficplanShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
traffictrainShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
scheduleLoadShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
driverShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
schedulePreviewShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jlmap3dFaultShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
allStyle:{
|
||||
type:String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hoverBtn: false,
|
||||
btnWidth: 0,
|
||||
group:'',
|
||||
mapId:'',
|
||||
lineCode:'',
|
||||
practiceDisabled:false,
|
||||
deviceif:false,
|
||||
deviceShow: true,
|
||||
drivingShow: false,
|
||||
messageBoard: false,
|
||||
jl3dtrafficplan:this.$t('display.demon.trafficplantext'),
|
||||
jl3dtraffictrain:this.$t('display.demon.traffictraintext'),
|
||||
jl3dpassflow:this.$t('display.demon.passengerflow'),
|
||||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||||
jl3dmodel: this.$t('display.demon.deviceView')
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
isDrive() {
|
||||
return this.$route.query.prdType == '04';
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isContest() {
|
||||
return this.$route.params.mode === 'demon' && this.project == 'drts';
|
||||
},
|
||||
running() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
isLocal() { // 是否为本地项目
|
||||
return process.env.VUE_APP_PRO === 'local';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.mapId = this.$route.query.mapId;
|
||||
this.lineCode = this.$route.query.lineCode;
|
||||
EventBus.$on('loadScene', () => {
|
||||
this.practiceDisabled = true;
|
||||
});
|
||||
EventBus.$on('quitScene', () => {
|
||||
this.practiceDisabled = false;
|
||||
});
|
||||
if (this.project) {
|
||||
getPostByProjectCode(ProjectCode[this.project]).then(resp => {
|
||||
if (resp.data) {
|
||||
this.messageBoard = true;
|
||||
}
|
||||
}).catch(() => {
|
||||
console.log('获取留言板信息失败');
|
||||
});
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
menuClick() {
|
||||
this.hoverBtn = !this.hoverBtn;
|
||||
if (this.hoverBtn) {
|
||||
this.btnWidth = 600;
|
||||
} else {
|
||||
this.btnWidth = 0;
|
||||
}
|
||||
},
|
||||
jumpjlmap3dmodel() {
|
||||
if (this.deviceif == false) {
|
||||
this.deviceif = true;
|
||||
} else {
|
||||
if (this.deviceShow == false) {
|
||||
this.deviceShow = true;
|
||||
} else {
|
||||
this.deviceShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.display_top_draft{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
padding-left: 44px;
|
||||
z-index: 35;
|
||||
.btn_hover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: #4e4d4d;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 32px;
|
||||
}
|
||||
.button_group_box{
|
||||
float: left;
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
margin-left: -700px;
|
||||
// transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
src/views/newMap/displayCity/index.vue
Normal file
307
src/views/newMap/displayCity/index.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="main" :style="{width: canvasWidth+'px',height:'100%',position:'absolute',overflow:'hidden'}">
|
||||
<template>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<map-system-draft ref="mapCanvas" @back="back" />
|
||||
</transition>
|
||||
<menu-demon v-if="isDemon" ref="menuDemon" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end" />
|
||||
</template>
|
||||
<menu-system-time ref="menuSystemTime" :offset="offset" :group="group" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import MenuDemon from './menuDemon';
|
||||
import MenuSystemTime from '@/views/newMap/displayCity/menuSystemTime';
|
||||
import { clearSimulation, getSimulationInfoNew, ranAsPlan, exitRunPlan } from '@/api/simulation';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'DisplayDraft',
|
||||
components: {
|
||||
MapSystemDraft,
|
||||
MenuDemon,
|
||||
MenuSystemTime
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
offset: 15,
|
||||
offsetBottom: 15,
|
||||
tipBottom: 0,
|
||||
textStatusHeight: 0,
|
||||
planRunning:false,
|
||||
dataError: false,
|
||||
group:''
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
mode() {
|
||||
return this.$route.params.mode;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isDemon() {
|
||||
return this.mode === 'demon' && this.project != 'drts';
|
||||
},
|
||||
isContest() {
|
||||
return this.mode === 'demon' && this.project == 'drts';
|
||||
},
|
||||
isExam() {
|
||||
return this.mode === 'exam';
|
||||
},
|
||||
isLesson() {
|
||||
return (this.mode === 'teach' || this.mode === 'manage');
|
||||
},
|
||||
isScript() {
|
||||
return this.mode === 'script';
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.permissionOver': function () {
|
||||
this.$alert('用户权限已被收回', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 此处代码似乎没什么用，之前从menuSchema复制过来的
|
||||
'$store.state.training.prdType':function(val) {
|
||||
if (val == '01') { this.switchModeInner('01'); } else { this.switchModeInner('02'); }
|
||||
},
|
||||
'$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.training.prdType': function (val) { // 根据权限类型计算高度
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.planRunning) {
|
||||
this.$store.dispatch('training/simulationStart');
|
||||
}
|
||||
},
|
||||
$route() {
|
||||
if (!this.isLesson && !this.isExam) {
|
||||
this.initLoadData();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearSimulation(this.group);
|
||||
this.$store.dispatch('training/reset');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
},
|
||||
async mounted() {
|
||||
this.setWindowSize();
|
||||
this.initLoadData();
|
||||
},
|
||||
methods:{
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
// 仿真错误时，被动退出时调用
|
||||
async back() {
|
||||
if (this.isExam) {
|
||||
await this.$refs.menuExam.back();
|
||||
} else if (this.isLesson) {
|
||||
await this.$refs.lessonMenu.back();
|
||||
} else if (this.isDemon) {
|
||||
await this.$refs.menuDemon.back();
|
||||
} else if (this.isScript) {
|
||||
await this.$refs.menuScript.back();
|
||||
} else if (this.isContest) {
|
||||
await this.$refs.menuDispatherContest.back();
|
||||
}
|
||||
},
|
||||
// 设置各个按钮的定位
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
this.offset = 10;
|
||||
this.offsetBottom = 15;
|
||||
const menuBar = document.getElementById('menuBar');
|
||||
const menuTool = document.getElementById('menuTool');
|
||||
const menuBottom = document.getElementById('menuButton');
|
||||
const menuButtonsBox = document.getElementById('menuButtons_box');
|
||||
const textStatus = document.getElementById('textStatus');
|
||||
if (menuBar) {
|
||||
this.offset = (menuBar.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuTool) {
|
||||
this.offset = (menuTool.offsetHeight || 0) + 15;
|
||||
}
|
||||
const buttonWidth = this.width - 1200; // B box widht
|
||||
if (menuBottom && buttonWidth < 780) {
|
||||
this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuButtonsBox) {
|
||||
this.tipBottom = (menuButtonsBox.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (textStatus) {
|
||||
this.textStatusHeight = textStatus.offsetHeight || 0;
|
||||
textStatus.style.top = this.offset - 15 + 'px';
|
||||
}
|
||||
});
|
||||
},
|
||||
// 缩放设置
|
||||
setWindowSize() {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
// this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
||||
},
|
||||
// 初始化
|
||||
initLoadData() {
|
||||
this.group = this.$route.query.group;
|
||||
this.$store.dispatch('training/reset');
|
||||
this.loadSimulationInfo();
|
||||
this.loadMapData();
|
||||
},
|
||||
// 新版地图根据仿真group获取仿真基础信息
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data) {
|
||||
if (!resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
|
||||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));
|
||||
this.$store.dispatch('training/countTime');
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
|
||||
this.planRunning = resp.data.planRunning;
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.commit('training/start');
|
||||
}
|
||||
} else {
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
this.dataError = resp.data.dataError;
|
||||
}
|
||||
},
|
||||
// 通过showMode切换显示效果
|
||||
switchModeInner(swch) {
|
||||
let showMode = '03';
|
||||
if (swch == '01') {
|
||||
showMode = '03';
|
||||
} else if (swch == '02') {
|
||||
showMode = '02';
|
||||
}
|
||||
|
||||
const nameList = Object.keys(this.$store.state.map.map || {});
|
||||
let list = [];
|
||||
nameList.forEach(item => {
|
||||
if (item !== 'skinVO') {
|
||||
const data = this.$store.state.map.map[item];
|
||||
if (data && data.constructor === Array) {
|
||||
list = [...list, ...data];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (swch == '01') {
|
||||
this.$jlmap.updateShowStation(list, this.$store.state.training.centerStationCode); // 显示全部元素
|
||||
} else {
|
||||
this.$jlmap.updateShowStation(list, ''); // 显示全部元素
|
||||
}
|
||||
|
||||
this.$jlmap.updateShowMode(list, showMode); // 二次过滤
|
||||
},
|
||||
// 加载地图数据
|
||||
loadMapData() {
|
||||
if (parseInt(this.mapId)) {
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
const data = {
|
||||
time: model.initTime
|
||||
};
|
||||
if (this.$route.query.prdType === '04') {
|
||||
data.loadNumber = model.loadNum;
|
||||
}
|
||||
ranAsPlan(data, this.group).then(res => {
|
||||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${model.initTime}`));
|
||||
}).catch(error => {
|
||||
let message = '';
|
||||
switch (error.code) {
|
||||
case '5001':
|
||||
message = this.$t('error.mapDataError');
|
||||
break;
|
||||
case '5002':
|
||||
message = this.$t('error.runningChartDataError');
|
||||
break;
|
||||
case '5003':
|
||||
message = this.$t('error.runningChartIsNotLoaded');
|
||||
break;
|
||||
case '5004':
|
||||
message = this.$t('error.runningDataError');
|
||||
break;
|
||||
case '5000':
|
||||
message = this.$t('error.systemError');
|
||||
break;
|
||||
case '4000':
|
||||
message = this.$t('error.simulationDoesNotExist');
|
||||
break;
|
||||
case '4001':
|
||||
message = this.$t('error.simulationOperationIsNotDefined');
|
||||
break;
|
||||
case '4002':
|
||||
message = this.$t('error.simulationOperationProcessingMethodNotFound');
|
||||
break;
|
||||
case '4003':
|
||||
message = this.$t('error.simulationOperationFailed');
|
||||
break;
|
||||
case '4004':
|
||||
message = this.$t('error.operationConflict');
|
||||
break;
|
||||
default:
|
||||
message = '按计划行车异常,请退出重试!';
|
||||
// this.$messageBox('按计划行车异常,请退出重试!');
|
||||
break;
|
||||
}
|
||||
this.$messageBox(message + '，' + this.$t('error.startSimulationFailed'));
|
||||
});
|
||||
},
|
||||
end() {
|
||||
exitRunPlan(this.group).then(() => {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
306
src/views/newMap/displayCity/menuDemon.vue
Normal file
306
src/views/newMap/displayCity/menuDemon.vue
Normal file
@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div>
|
||||
<demon-menu
|
||||
ref="demonMenu"
|
||||
:is-all-show="!dataError"
|
||||
:jl3dmodel-show="isShow3dmodel && !isShowScheduling && !isDrive"
|
||||
:jl3dname-show="!isShowScheduling&&!isDrive"
|
||||
:cctv-show="!isShowScheduling"
|
||||
:trafficplan-show="!isShowScheduling"
|
||||
:schedule-load-show="isShowScheduling && !runing"
|
||||
:schedule-preview-show="isShowScheduling && runing"
|
||||
:jlmap3d-fault-show="false"
|
||||
:driver-show="isDrive"
|
||||
:all-style="'top:'+(offset+textStatusHeight)+'px'"
|
||||
/>
|
||||
|
||||
<menu-schema
|
||||
ref="menuSchema"
|
||||
:offset="offset"
|
||||
:data-error="dataError"
|
||||
:offset-bottom="offsetBottom"
|
||||
/>
|
||||
|
||||
<div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'||$route.query.lineCode == '14'}" :style="{bottom: offsetBottom + 'px'}">
|
||||
<el-button-group class="button-group-box">
|
||||
<template v-if="!dataError">
|
||||
<template v-if="!projectDevice">
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<el-button v-if="project !='bjd'" type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 单人仿真 -->
|
||||
<script>
|
||||
import DemonMenu from './demonMenu';
|
||||
import { Notification } from 'element-ui';
|
||||
import MenuSchema from '@/views/newMap/displayCity/menuSchema';
|
||||
import { getGoodsTryUse } from '@/api/management/goods';
|
||||
import {getSimulationInfoNew, clearSimulation } from '@/api/simulation';
|
||||
import { PermissionType } from '@/scripts/ConstDic';
|
||||
import { getCountTime } from '@/utils/index';
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import { quitScriptNew } from '@/api/simulation';
|
||||
import { setGoodsTryUse } from '@/api/management/goods';
|
||||
import {loadScriptNew } from '@/api/simulation';
|
||||
import StatusIcon from '@/views/components/StatusIcon/statusIcon';
|
||||
import Vue from 'vue';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'MenuDemon',
|
||||
components: {
|
||||
MenuSchema,
|
||||
DemonMenu,
|
||||
StatusIcon
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
textStatusHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tryTime: 0, // 进入页面多少秒
|
||||
timeNow: 0, // 进入页面 相对时间
|
||||
time: null, // 定时器
|
||||
countTime: 0, // 显示 倒计时
|
||||
remainingTime: 0,
|
||||
userRole:'AUDIENCE',
|
||||
goodsId: this.$route.query.goodsId,
|
||||
try: this.$route.query.try, // 是否是试用权限
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
isScriptRun:false,
|
||||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||||
jl3dmodel: this.$t('display.demon.deviceView'),
|
||||
isShow3dmodel :true,
|
||||
isGoback: false,
|
||||
runing:false,
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowScheduling() {
|
||||
return this.$route.query.prdType == '05';
|
||||
},
|
||||
isDrive() {
|
||||
return this.$route.query.prdType == '04';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
projectDevice() {
|
||||
return this.$route.query.projectDevice;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.subscribeCount': function () {
|
||||
this.group && this.initLoadPage();
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(val) {
|
||||
(val || []).forEach(item => {
|
||||
if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
|
||||
!this.isGoback && this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
!this.isGoback && this.back();
|
||||
},
|
||||
'$store.state.socket.simulationStart':function(val) {
|
||||
if (val) {
|
||||
this.setRuning(true);
|
||||
this.$store.dispatch('training/simulationStart').then(() => {
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
});
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset':function(val) {
|
||||
this.setRuning(false);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
switch (this.$store.state.training.prdType) {
|
||||
case '02': { this.userRole = 'DISPATCHER'; break; }
|
||||
case '01': { this.userRole = 'STATION_SUPERVISOR'; break; }
|
||||
case '04': { this.userRole = 'DRIVER'; break; }
|
||||
case '05': { this.userRole = 'DEPOT_DISPATCHER'; break; }
|
||||
default: { this.userRole = 'AUDIENCE'; break; }
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.time) {
|
||||
this.setTryTime();
|
||||
clearTimeout(this.time);
|
||||
}
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.demonMenu.menuClick();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async initLoadPage() {
|
||||
try {
|
||||
if (this.try != '0') {
|
||||
this.loadInitData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
loadInitData() {
|
||||
const data = {
|
||||
mapId: this.$route.query.mapId,
|
||||
prdType: this.$route.query.prdType,
|
||||
permissionType: PermissionType.SIMULATION
|
||||
};
|
||||
getGoodsTryUse(data).then(res => {
|
||||
this.remainingTime = res.data.tryTime;
|
||||
this.timeNow = Date.parse(new Date()) / 1000 + this.remainingTime;
|
||||
if (this.try) {
|
||||
this.time = setInterval(() => {
|
||||
this.tryTime += 1;
|
||||
this.countTime = getCountTime(this.timeNow);
|
||||
if (this.countTime == -1) {
|
||||
this.back();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.getTimeFail'));
|
||||
});
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
start(model) {
|
||||
this.$emit('start', model);
|
||||
},
|
||||
setRuning(run) {
|
||||
this.runing = run;
|
||||
},
|
||||
end() {
|
||||
this.$emit('end');
|
||||
},
|
||||
clearAllData() {
|
||||
this.$refs.chatbox.clearAllData();
|
||||
},
|
||||
async back() {
|
||||
this.isGoback = true;
|
||||
if (this.projectDevice) {
|
||||
clearSimulation(this.group).then(res=>{
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
if (this.project === 'bjd') {
|
||||
window.close();
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', '');
|
||||
history.go(-1);
|
||||
Notification.closeAll();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
setTryTime() {
|
||||
if (this.try) {
|
||||
const data = { time: this.tryTime, goodsId: this.goodsId };
|
||||
if (data.goodsId) {
|
||||
setGoodsTryUse(data);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
quit() {
|
||||
window.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 160px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.display-score {
|
||||
background-color: black;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding-left: 2px;
|
||||
margin-left: 10px;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
color: #fff;
|
||||
}
|
||||
.haerbin_btn_box{
|
||||
width: 450px;
|
||||
bottom: 15px!important;
|
||||
}
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
.button-group-box{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
src/views/newMap/displayCity/menuSchema.vue
Normal file
111
src/views/newMap/displayCity/menuSchema.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="schema" :style="{top: offset+'px'}">
|
||||
<el-button v-if="!isScheduling" size="small" :type="faultMode ? '':'primary' " @click="changeOperateMode()">{{ faultMode?'切换到普通模式[Tab]':'切换到故障模式[Tab]' }}</el-button>
|
||||
<fault-choose ref="faultChoose" :group="group" :offset="offset" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FaultChoose from './demon/faultChoose';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
// 右上角操作
|
||||
export default {
|
||||
name: 'MenuSchema',
|
||||
components: {
|
||||
FaultChoose
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: OperateMode.NORMAL,
|
||||
OperateMode: OperateMode,
|
||||
viewDisabled: true,
|
||||
faultMode: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
isScript() {
|
||||
return this.$route.params.mode === 'script';
|
||||
},
|
||||
isDemon() {
|
||||
return this.$route.params.mode === 'demon';
|
||||
},
|
||||
isScheduling() {
|
||||
return this.$route.query.prdType === '05';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.triggerFaultCount': function () {
|
||||
this.setFault();
|
||||
},
|
||||
'$store.state.runPlan.loadRunPlanCount': function () {
|
||||
this.viewDisabled = false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('CheckFaultModeEvent', () => {
|
||||
if (!this.isScheduling) {
|
||||
this.changeOperateMode();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
loadRunData() {
|
||||
this.$store.dispatch('runPlan/clear').then(() => {
|
||||
if (this.group) {
|
||||
this.viewDisabled = true;
|
||||
// 获取排序的车站列表
|
||||
getByGroupStationList(this.group).then(response => {
|
||||
this.$store.dispatch('runPlan/setStations', response.data).then(() => {
|
||||
loadRunPlanData(this.group, this.dataError);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.schema.getStationListFail'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
changeOperateMode() {
|
||||
this.faultMode = !this.faultMode;
|
||||
let mode = OperateMode.NORMAL;
|
||||
if (this.faultMode) {
|
||||
mode = OperateMode.FAULT;
|
||||
}
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
},
|
||||
setFault() {
|
||||
this.$refs.faultChoose.doShow();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.schema {
|
||||
z-index: 36;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
/deep/ .el-button+.el-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
</style>
|
||||
154
src/views/newMap/displayCity/menuSystemTime.vue
Normal file
154
src/views/newMap/displayCity/menuSystemTime.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div v-if="isShowSystemTime" class="display-card" :style="{top: top+'px', right: newRight+'px'}">
|
||||
<template v-if="pause">
|
||||
<span class="display-pause">{{ $t('display.systemTime.timePause') }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<system-time
|
||||
class="display-time"
|
||||
:time="time"
|
||||
/>
|
||||
<div v-if="isShowDate" style="width: 80px;height: 58px;float: right;box-shadow: 0 0 5px #eee;">
|
||||
<div class="display-date-box">{{ dateString }}</div>
|
||||
<div class="display-date-box">{{ dayString }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { prefixIntrger } from '@/utils/date';
|
||||
import SystemTime from '@/views/components/systemTime/index';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
|
||||
// 顶部时间栏显示
|
||||
export default {
|
||||
name: 'MenuSystemTime',
|
||||
components: {
|
||||
SystemTime
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '00:0000',
|
||||
dateString: '00/00/00',
|
||||
dayString: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowSystemTime() {
|
||||
return this.$route.params.mode == 'demon' ||
|
||||
this.$route.params.mode == 'dp' ||
|
||||
this.$route.params.mode == 'plan' ||
|
||||
this.$route.params.mode == 'script' ||
|
||||
this.$route.params.mode == 'practice' ||
|
||||
!this.$route.params.mode;
|
||||
},
|
||||
pause() {
|
||||
return this.$store.state.scriptRecord.simulationPause;
|
||||
},
|
||||
isDisplay() {
|
||||
return this.$route.path.includes('displayCity') || this.$route.path.includes('scriptdisplayCity');
|
||||
},
|
||||
isShowDate() { // 西安一 三号线
|
||||
return (this.$route.query.lineCode == 10 || this.$route.query.lineCode == 11) && this.isDisplay;
|
||||
},
|
||||
top() {
|
||||
return this.isShowDate ? (this.$route.query.prdType == '05' ? 5 : this.offset - 10) : this.offset;
|
||||
},
|
||||
newRight() {
|
||||
return this.isShowDate ? this.$store.state.config.width - 420 : this.$store.state.config.width / 2 - 55;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.initTime': function (initTime) {
|
||||
const date = new Date(initTime);
|
||||
this.initDate(date);
|
||||
},
|
||||
'$store.state.socket.simulationTimeSync': function (time) { // 仿真时间更新
|
||||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
|
||||
const date = new Date(+new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
|
||||
this.initDate(date);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const initTime = this.$store.state.training.initTime;
|
||||
if (initTime > 0) {
|
||||
const date = new Date(initTime);
|
||||
this.initDate(date);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDate(date) {
|
||||
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
|
||||
const years = date.getFullYear() + '';
|
||||
let months = date.getMonth() + 1 + '';
|
||||
let dates = date.getDate() + '';
|
||||
if (months.length < 2) { months = '0' + months; }
|
||||
if (dates.length < 2) { dates = '0' + dates; }
|
||||
this.dateString = dates + '/' + months + '/' + years.slice(2);
|
||||
const day = date.getDay();
|
||||
switch (day) {
|
||||
case 0:
|
||||
this.dayString = '星 期 日';
|
||||
break;
|
||||
case 1:
|
||||
this.dayString = '星 期 一';
|
||||
break;
|
||||
case 2:
|
||||
this.dayString = '星 期 二';
|
||||
break;
|
||||
case 3:
|
||||
this.dayString = '星 期 三';
|
||||
break;
|
||||
case 4:
|
||||
this.dayString = '星 期 四';
|
||||
break;
|
||||
case 5:
|
||||
this.dayString = '星 期 五';
|
||||
break;
|
||||
case 6:
|
||||
this.dayString = '星 期 六';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.display-pause {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.display-time{
|
||||
padding: 3px 5px;
|
||||
border: 1px solid rgba(255,255,255,.2);
|
||||
box-shadow: 0 2px 12px 0 rgba(255,255,255,.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
.display-date-box{
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
background: #404040;
|
||||
color: #1DEA1E;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
58
src/views/newMap/displayCity/utils.js
Normal file
58
src/views/newMap/displayCity/utils.js
Normal file
@ -0,0 +1,58 @@
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
import store from '@/store/index';
|
||||
export function covertMemberData (activeTrainList, resp) {
|
||||
let lastData = JSON.stringify(resp);
|
||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||
roleTypeList.forEach(function(element) {
|
||||
const rolename = element.value;
|
||||
if (Cookies.get('user_lang') == 'en') {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
|
||||
} else {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
|
||||
}
|
||||
});
|
||||
lastData = JSON.parse(lastData);
|
||||
const lastMemberList = [];
|
||||
// const electricDispatcherList = [];
|
||||
const deviceListData = [[], [], [], [], [], [], [], []];
|
||||
const driverList = [];
|
||||
lastData.forEach((member, index)=>{
|
||||
if (member.userId && member.userId == store.state.user.id) {
|
||||
member.disabled = true;
|
||||
member.userName = store.state.user.nickname;
|
||||
store.dispatch('training/setOrignalUserRoleId', member.id);
|
||||
} else {
|
||||
member.disabled = false;
|
||||
}
|
||||
const userName = member.userName ? '-' + member.userName : '';
|
||||
const name = member.name ? '-' + member.name : '';
|
||||
if (member.deviceCode) {
|
||||
const device = store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
member.deviceName = device.name || device.groupNumber;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
member.normalName = member.type + member.deviceName + name;
|
||||
} else {
|
||||
member.deviceName = '';
|
||||
member.label = member.type + name + userName;
|
||||
member.normalName = member.type + name;
|
||||
}
|
||||
const deviceType = ['行调', '通号', '行值', '司机', '车辆段信号楼', '上级部门', '电力调度', '停车场信号楼'];
|
||||
const deviceTypeIndex = deviceType.indexOf(member.type);
|
||||
if (deviceTypeIndex >= 0) {
|
||||
if (deviceTypeIndex == 3) {
|
||||
if (activeTrainList.length > 0) {
|
||||
if (activeTrainList.includes(member.deviceCode)) {
|
||||
deviceListData[deviceTypeIndex].push(member);
|
||||
}
|
||||
}
|
||||
lastMemberList.push(member);
|
||||
driverList.push(member);
|
||||
} else {
|
||||
deviceListData[deviceTypeIndex].push(member);
|
||||
lastMemberList.push(member);
|
||||
}
|
||||
}
|
||||
});
|
||||
return {lastMemberList:lastMemberList, deviceListData:deviceListData, driverList:driverList};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user