创建自动折返模块
This commit is contained in:
zyy
parent
6101a0d28a
commit
af5c108610
@ -203,6 +203,20 @@ class SkinCode extends defaultStyle {
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.Automactic] = {
|
||||
// 是否显示
|
||||
visible: true,
|
||||
text: {
|
||||
fontSize: 11, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
distance: 5 // 灯跟文字距离
|
||||
},
|
||||
lamp: {
|
||||
radiusR: 6, // 控制灯大小
|
||||
controlColor: '#b5b3b3' // 控制灯颜色 (灰色)
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
common: { // 通用属性
|
||||
textFontSize: 10, // 站台默认字体大小
|
||||
|
||||
@ -116,4 +116,11 @@ deviceRender[deviceType.CheckBox] = {
|
||||
zlevel: 1
|
||||
};
|
||||
|
||||
/** Automactic渲染配置 自动折返*/
|
||||
deviceRender[deviceType.Automactic] = {
|
||||
_type: deviceType.Automactic,
|
||||
zlevel: 1
|
||||
};
|
||||
|
||||
|
||||
export default deviceRender;
|
||||
|
||||
@ -10,6 +10,7 @@ const deviceType = {
|
||||
StationStand: 'StationStand',
|
||||
Esp: 'Esp',
|
||||
Psd: 'Psd',
|
||||
Automactic: 'Automactic',
|
||||
StationControl: 'StationControl',
|
||||
StationCounter: 'StationCounter',
|
||||
StationDelayUnlock: 'StationDelayUnlock',
|
||||
|
||||
@ -106,6 +106,9 @@ class Status {
|
||||
handleLimitControl(device) {
|
||||
this.statusObj = { };
|
||||
}
|
||||
handleAutomactic(device) {
|
||||
this.statusObj = { };
|
||||
}
|
||||
getStatus() {
|
||||
return this.statusObj;
|
||||
}
|
||||
|
||||
53
src/jmapNew/shape/Automactic/EMouse.js
Normal file
53
src/jmapNew/shape/Automactic/EMouse.js
Normal file
@ -0,0 +1,53 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
|
||||
export default class EMouse extends Group {
|
||||
constructor(device) {
|
||||
super();
|
||||
this.device = device;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
this.text = new Text({
|
||||
zlevel: this.device.zlevel,
|
||||
z: this.device.z+1,
|
||||
position: [0, 0],
|
||||
style: {
|
||||
x: this.device.model.position.x,
|
||||
y: this.device.model.position.y + this.device.style.LcControl.lamp.radiusR + this.device.style.LcControl.text.distance-30,
|
||||
fontWeight: 'normal',
|
||||
fontSize: this.device.style.LcControl.mouseOverStyle.fontSize,
|
||||
fontFamily: this.device.style.LcControl.mouseOverStyle.fontFamily,
|
||||
text: this.device.model.name,
|
||||
textFill: this.device.style.LcControl.mouseOverStyle.fontColor,
|
||||
textAlign: this.device.style.LcControl.mouseOverStyle.textAlign,
|
||||
textVerticalAlign: this.device.style.LcControl.mouseOverStyle.textVerticalAlign
|
||||
}
|
||||
});
|
||||
this.add(this.text);
|
||||
this.text.hide();
|
||||
}
|
||||
mouseover(e) {
|
||||
if (e.target && e.target._subType == 'Text') {
|
||||
this.text.show();
|
||||
} else {
|
||||
this.device.control.setControlColor(this.device.style.LcControl.mouseOverStyle.arcColor);
|
||||
this.device.control.setTextColor(this.device.style.LcControl.mouseOverStyle.textColor);
|
||||
this.device.control.setTextBorder(true);
|
||||
this.device.control.setArcBorder(true);
|
||||
}
|
||||
}
|
||||
|
||||
mouseout(e) {
|
||||
if (!this.device.model.down) {
|
||||
if (e.target && e.target._subType == 'Text') {
|
||||
this.text.hide();
|
||||
} else {
|
||||
this.device.control.setControlColor(this.device.style.LcControl.lamp.controlColor);
|
||||
this.device.control.setTextColor('#FFFFFF');
|
||||
this.device.control.setTextBorder(false);
|
||||
this.device.control.setArcBorder(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
97
src/jmapNew/shape/Automactic/index.js
Normal file
97
src/jmapNew/shape/Automactic/index.js
Normal file
@ -0,0 +1,97 @@
|
||||
/*
|
||||
* 自动折返 控制器
|
||||
*/
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import EControl from '../element/EControl';
|
||||
import EMouse from './EMouse';
|
||||
|
||||
export default class LcControl extends Group {
|
||||
constructor(model, style) {
|
||||
super();
|
||||
this.z = 20;
|
||||
this._code = model.code;
|
||||
this._type = model._type;
|
||||
this.zlevel = model.zlevel;
|
||||
this.model = model;
|
||||
this.style = style;
|
||||
this.create();
|
||||
this.createMouseEvent();
|
||||
this.setState(model);
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.control = new Arc({
|
||||
_subType: 'Control',
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
cx: model.position.x,
|
||||
cy: model.position.y,
|
||||
r: this.style.Automactic.lamp.radiusR
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0,
|
||||
fill: this.style.Automactic.lamp.controlColor
|
||||
}
|
||||
});
|
||||
|
||||
this.text = new Text({
|
||||
_subType: 'Text',
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: [0, 0],
|
||||
style: {
|
||||
x: model.position.x,
|
||||
y: model.position.y + this.style.Automactic.lamp.radiusR + this.style.Automactic.text.distance,
|
||||
fontWeight: this.style.Automactic.text.fontWeight,
|
||||
fontSize: this.style.Automactic.text.fontSize,
|
||||
fontFamily: this.style.fontFamily,
|
||||
text: model.name,
|
||||
textFill: '#fff',
|
||||
textAlign: 'middle',
|
||||
textVerticalAlign: 'top'
|
||||
}
|
||||
});
|
||||
const arcRect = this.getArcBoundingRect();
|
||||
this.arcBorder = new Rect({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
silent: true,
|
||||
shape: arcRect,
|
||||
style: {
|
||||
lineDash: this.style.arcBorderStyle.lineDash,
|
||||
stroke: this.style.arcBorderStyle.stroke,
|
||||
fill: this.style.arcBorderStyle.fill
|
||||
}
|
||||
});
|
||||
this.add(this.control);
|
||||
this.add(this.text);
|
||||
this.add(this.textBorder);
|
||||
}
|
||||
|
||||
// 设置状态
|
||||
setState(model) {
|
||||
}
|
||||
|
||||
createMouseEvent() {
|
||||
if (this.style.LcControl.mouseOverStyle) {
|
||||
this.mouseEvent = new EMouse(this);
|
||||
this.add(this.mouseEvent);
|
||||
this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
|
||||
this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
|
||||
}
|
||||
}
|
||||
|
||||
getShapeTipPoint() {
|
||||
if (this.control) {
|
||||
var distance = 2;
|
||||
var rect = this.control.getBoundingRect();
|
||||
return {
|
||||
x: rect.x + rect.width / 2,
|
||||
y: rect.y - distance
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@ -15,6 +15,7 @@ import TrainWindow from './TrainWindow/index.js';
|
||||
import Train from './Train/index.js';
|
||||
import Line from './Line/index.js';
|
||||
import Text2 from './Text/index.js';
|
||||
import Automactic from './Automactic/index.js';
|
||||
import CheckBox from './checkBox/checkBox.js';
|
||||
|
||||
/** 图库*/
|
||||
@ -35,6 +36,7 @@ mapShape[deviceType.TrainWindow] = TrainWindow;
|
||||
mapShape[deviceType.Train] = Train;
|
||||
mapShape[deviceType.Line] = Line;
|
||||
mapShape[deviceType.Text] = Text2;
|
||||
mapShape[deviceType.Automactic] = Automactic;
|
||||
mapShape[deviceType.CheckBox] = CheckBox;
|
||||
|
||||
function shapefactory(device, jmap) {
|
||||
|
||||
@ -115,6 +115,10 @@ export function parser(data, skinCode) {
|
||||
mapDevice[elem.code] = createDevice(deviceType.Text, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.Automactic || [], elem => {
|
||||
mapDevice[elem.code] = createDevice(deviceType.Automactic, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.trainWindowList || [], elem => {
|
||||
mapDevice[elem.code] = createDevice(deviceType.TrainWindow, elem, propConvert);
|
||||
if (elem.sectionCode) {
|
||||
@ -205,6 +209,7 @@ export function updateMapData(state, model) {
|
||||
case deviceType.Text: updateForList(model, state, 'textList'); break;
|
||||
case deviceType.Psd: updateForList(model, state, 'psdList'); break;
|
||||
case deviceType.Esp: updateForList(model, state, 'espList'); break;
|
||||
case deviceType.Automactic: updateForList(model, state, 'automaticList'); break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -316,6 +316,13 @@ const map = {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
automaticList: (state) => {
|
||||
if (state.map) {
|
||||
return state.map.automaticList || [];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
resourceList: (state) => {
|
||||
if (state.map) {
|
||||
return state.map.resourceList;
|
||||
|
||||
270
src/views/newMap/newMapdraft/mapoperate/automaticControl.vue
Normal file
270
src/views/newMap/newMapdraft/mapoperate/automaticControl.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card" @tab-click="handleClick">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
|
||||
<div style="height: calc(100% - 46px);">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<config-data ref="make" :form="formMake" :form-model="addModel" :rules="createRules" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmapNew/utils/Uid';
|
||||
import ConfigList from './config/list';
|
||||
import ConfigData from './config/data';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import { getAutoReentryList} from '@/api/jmap/mapdraft';
|
||||
|
||||
export default {
|
||||
name: 'ZcControlDraft',
|
||||
components: {
|
||||
ConfigList,
|
||||
ConfigData
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
autoList: [],
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
automaticCode: '', // 关联自动折返code
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
automaticCode: '', // 关联自动折返code
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
|
||||
],
|
||||
automaticCode:[
|
||||
{ required: true, message: this.$t('rules.selectConcentrateStation'), trigger: 'change' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'automaticList'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: `${this.$t('map.zcZoneControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.automaticList, change: true, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: this.$t('map.statusSignalName'), type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] },
|
||||
{ prop:'automaticCode', label: '自动折返进路code:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.autoList },
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
formMake() {
|
||||
const form = {
|
||||
labelWidth: '150px',
|
||||
items: [
|
||||
{ prop:'automaticCode', label: '自动折返进路:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.autoList },
|
||||
{ prop: 'name', label: '自动折返名称:', type: 'input' },
|
||||
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
|
||||
] },
|
||||
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
createRules: function () {
|
||||
return {
|
||||
automaticCode: [
|
||||
{ required: true, message: '请选择自动折返进路', trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected(val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAutoMaticList();
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
handleClick() {
|
||||
this.getAutoMaticList();
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.dataform.resetFields();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Automactic'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
}
|
||||
},
|
||||
async getAutoMaticList() {
|
||||
const params = {
|
||||
pageSize: 9999,
|
||||
pageNum: 1
|
||||
};
|
||||
const resp = await getAutoReentryList(this.$route.params.mapId, params);
|
||||
this.autoList = resp.data.list;
|
||||
console.log(this.autoList)
|
||||
},
|
||||
// 创建对象
|
||||
create() {
|
||||
this.$refs.make.validate((valid) => {
|
||||
if (valid) {
|
||||
const uid = getUID('Automactic', this.automaticList);
|
||||
let models = [];
|
||||
const model = {
|
||||
_type: 'Automactic',
|
||||
code: uid,
|
||||
name: this.addModel.name,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
},
|
||||
automaticCode:this.addModel.automaticCode
|
||||
};
|
||||
models.push(model);
|
||||
this.$emit('updateMapModel', models);
|
||||
this.$refs.make.resetForm();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = Object.assign({_type: 'Automactic'}, this.editModel);
|
||||
let models = [data];
|
||||
this.$emit('updateMapModel', models);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除对象
|
||||
deleteObj() {
|
||||
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
|
||||
if (selected && selected._type.toUpperCase() === 'Automactic'.toUpperCase()) {
|
||||
const _that = this;
|
||||
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_that.$emit('updateMapModel', {...selected, _dispose: true});
|
||||
_that.deviceSelect();
|
||||
}).catch(() => {
|
||||
_that.$message.info(this.$t('tip.cancelledDelete'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.view-control{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 160px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.map-draft-group {
|
||||
color: #3E44BE;
|
||||
}
|
||||
</style>
|
||||
@ -92,6 +92,14 @@
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="自动折返" class="tab_pane_box" name="AutomaticControl">
|
||||
<automatic-control-draft
|
||||
ref="AutomaticControl"
|
||||
:selected="selected"
|
||||
@updateMapModel="updateMapModel"
|
||||
@setCenter="setCenter"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('map.train')" class="tab_pane_box" name="Train">
|
||||
<train-draft
|
||||
ref="Train"
|
||||
@ -167,6 +175,7 @@ import LineDraft from './line';
|
||||
import TextDraft from './text';
|
||||
import TrainWindowDraft from './trainwindow';
|
||||
import ZcControlDraft from './zcControl';
|
||||
import AutomaticControlDraft from './automaticControl';
|
||||
import LimitControlDraft from './limitControl';
|
||||
import LcControlDraft from './lcControl';
|
||||
import ImageControlDraft from './ImageControl';
|
||||
@ -191,6 +200,7 @@ export default {
|
||||
LineDraft,
|
||||
TextDraft,
|
||||
ZcControlDraft,
|
||||
AutomaticControlDraft,
|
||||
LimitControlDraft,
|
||||
LcControlDraft,
|
||||
ImageControlDraft,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user