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

增加矩形包围框

Browse Source
This commit is contained in:
zyy 2020-03-05 15:48:51 +08:00
parent 2df1803ca5
commit 30c672026f
12 changed files with 437 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/jmapNew/config/skinCode/ningbo_01.js
View File

@ -203,7 +203,7 @@ class SkinCode extends defaultStyle {
}
};
this[deviceType.Automactic] = {
this[deviceType.MapCycleButtonVO] = {
// 是否显示
visible: true,
text: {
@ -222,6 +222,9 @@ class SkinCode extends defaultStyle {
fill: 'rgba(0,0,0,0)', // 填充色
radiusR: 6, // 控制灯大小
controlColor: '#b5b3b3' // 控制灯颜色 (灰色)
},
OutFrame: {
}
};

9
src/jmapNew/constant/deviceRender.js
View File

@ -117,10 +117,15 @@ deviceRender[deviceType.CheckBox] = {
};
/** Automactic渲染配置 自动折返*/
deviceRender[deviceType.Automactic] = {
_type: deviceType.Automactic,
deviceRender[deviceType.MapCycleButtonVO] = {
_type: deviceType.MapCycleButtonVO,
zlevel: 1
};
/** OutFrame渲染配置 自动折返包围矩形*/
deviceRender[deviceType.OutFrame] = {
_type: deviceType.OutFrame,
zlevel: 1
};
export default deviceRender;

3
src/jmapNew/constant/deviceType.js
View File

@ -10,7 +10,8 @@ const deviceType = {
StationStand: 'StationStand',
Esp: 'Esp',
Psd: 'Psd',
Automactic: 'Automactic',
MapCycleButtonVO: 'MapCycleButtonVO',
OutFrame: 'OutFrame',
StationControl: 'StationControl',
StationCounter: 'StationCounter',
StationDelayUnlock: 'StationDelayUnlock',

5
src/jmapNew/constant/stateTransition.js
View File

@ -109,7 +109,10 @@ class Status {
handleLimitControl(device) {
this.statusObj = { };
}
handleAutomactic(device) {
handleMapCycleButtonVO(device) {
this.statusObj = { };
}
handleOutFrame(device) {
this.statusObj = { };
}
getStatus() {

24
src/jmapNew/shape/Automactic/index.js
View File

@ -7,7 +7,7 @@ import Text from 'zrender/src/graphic/Text';
import Rect from 'zrender/src/graphic/shape/Rect';
import EMouse from './EMouse';
export default class LcControl extends Group {
export default class Automactic extends Group {
constructor(model, style) {
super();
this.z = 20;
@ -30,11 +30,11 @@ export default class LcControl extends Group {
shape: {
cx: model.position.x,
cy: model.position.y,
r: this.style.Automactic.lamp.radiusR
r: this.style.MapCycleButtonVO.lamp.radiusR
},
style: {
lineWidth: 0,
fill: this.style.Automactic.lamp.controlColor
fill: this.style.MapCycleButtonVO.lamp.controlColor
}
});
@ -45,9 +45,9 @@ export default class LcControl extends Group {
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,
y: model.position.y + this.style.MapCycleButtonVO.lamp.radiusR + this.style.MapCycleButtonVO.text.distance,
fontWeight: this.style.MapCycleButtonVO.text.fontWeight,
fontSize: this.style.MapCycleButtonVO.text.fontSize,
fontFamily: this.style.fontFamily,
text: model.name,
textFill: '#fff',
@ -64,9 +64,9 @@ export default class LcControl extends Group {
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y + this.style.Automactic.lamp.radiusR + this.style.Automactic.subtitleText.distance,
fontWeight: this.style.Automactic.subtitleText.fontWeight,
fontSize: this.style.Automactic.subtitleText.fontSize,
y: model.position.y + this.style.MapCycleButtonVO.lamp.radiusR + this.style.MapCycleButtonVO.subtitleText.distance,
fontWeight: this.style.MapCycleButtonVO.subtitleText.fontWeight,
fontSize: this.style.MapCycleButtonVO.subtitleText.fontSize,
fontFamily: this.style.fontFamily,
text: model.subtitleName,
textFill: '#fff',
@ -83,9 +83,9 @@ export default class LcControl extends Group {
silent: true,
shape: arcRect,
style: {
lineDash: this.style.Automactic.lamp.lineDash,
stroke: this.style.Automactic.lamp.stroke,
fill: this.style.Automactic.lamp.fill
lineDash: this.style.MapCycleButtonVO.lamp.lineDash,
stroke: this.style.MapCycleButtonVO.lamp.stroke,
fill: this.style.MapCycleButtonVO.lamp.fill
}
});
this.add(this.control);

41
src/jmapNew/shape/OutFrame/index.js Normal file
View File

@ -0,0 +1,41 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
export default class OutFrame extends Group {
constructor(model, style) {
super();
this.model = model;
this._type = model._type;
this._code = model.code;
this.style = style;
this.zlevel = model.zlevel;
this.z = 0;
this.create();
this.setState(model);
}
create() {
const model = this.model;
this.box = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: model.position.x - model.width / 2,
y: model.position.y - model.height / 2,
width: model.width,
height: model.height
},
style: {
lineDash: null,
stroke: '#fff',
lineWidth: 1,
fill: 'rgb(135,206,250,0)'
}
});
this.add(this.box);
}
// 设置状态
setState(model) {
}
}

6
src/jmapNew/shape/factory.js
View File

@ -15,7 +15,8 @@ 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 MapCycleButtonVO from './Automactic/index.js';
import OutFrame from './OutFrame/index.js';
import CheckBox from './checkBox/checkBox.js';
/** 图库*/
@ -36,7 +37,8 @@ mapShape[deviceType.TrainWindow] = TrainWindow;
mapShape[deviceType.Train] = Train;
mapShape[deviceType.Line] = Line;
mapShape[deviceType.Text] = Text2;
mapShape[deviceType.Automactic] = Automactic;
mapShape[deviceType.MapCycleButtonVO] = MapCycleButtonVO;
mapShape[deviceType.OutFrame] = OutFrame;
mapShape[deviceType.CheckBox] = CheckBox;
function shapefactory(device, jmap) {

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

@ -115,8 +115,12 @@ 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);
zrUtil.each(data.cycleButtonList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.MapCycleButtonVO, elem, propConvert);
}, this);
zrUtil.each(data.outFrameList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.OutFrame, elem, propConvert);
}, this);
zrUtil.each(data.trainWindowList || [], elem => {
@ -209,7 +213,8 @@ 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;
case deviceType.MapCycleButtonVO: updateForList(model, state, 'cycleButtonList'); break;
case deviceType.OutFrame: updateForList(model, state, 'outFrameList'); break;
}
}
}

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

@ -316,9 +316,16 @@ const map = {
return [];
}
},
automaticList: (state) => {
cycleButtonList: (state) => {
if (state.map) {
return state.map.automaticList || [];
return state.map.cycleButtonList || [];
} else {
return [];
}
},
outFrameList: (state) => {
if (state.map) {
return state.map.outFrameList || [];
} else {
return [];
}

30
src/views/newMap/newMapdraft/mapoperate/automaticControl.vue
View File

@ -37,7 +37,7 @@ import { deepAssign } from '@/utils/index';
import { getAutoReentryList} from '@/api/jmap/mapdraft';
export default {
name: 'ZcControlDraft',
name: 'MapCycleButtonVO',
components: {
ConfigList,
ConfigData
@ -58,7 +58,7 @@ export default {
code: '',
name: '',
subtitleName: '', //副标题
automaticCode: '', // 关联自动折返code
cycleCode: '', // 关联自动折返code
position: {
x: 0,
y: 0
@ -68,7 +68,7 @@ export default {
code: '',
name: '',
subtitleName: '', // 副标题
automaticCode: '', // 关联自动折返code
cycleCode: '', // 关联自动折返code
position: {
x: 0,
y: 0
@ -81,7 +81,7 @@ export default {
name: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
automaticCode:[
cycleCode:[
{ required: true, message: this.$t('rules.selectConcentrateStation'), trigger: 'change' }
],
'position.x': [
@ -95,7 +95,7 @@ export default {
},
computed: {
...mapGetters('map', [
'automaticList'
'cycleButtonList'
]),
form() {
const form = {
@ -108,14 +108,14 @@ export default {
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.automaticList, change: true, deviceChange: this.deviceChange },
{ prop: 'code', label: `${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.cycleButtonList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: '标题名称:', type: 'input' },
{ prop: 'subtitleName', label: '副标题名称:', type: 'input' },
{ prop: 'position', label: '坐标:', 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 },
{ prop:'cycleCode', label: '自动折返进路code:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.autoList },
]
}
}
@ -126,7 +126,7 @@ export default {
const form = {
labelWidth: '150px',
items: [
{ prop:'automaticCode', label: '自动折返进路:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.autoList },
{ prop:'cycleCode', label: '自动折返进路:', type: 'select', optionLabel: 'name', optionValue: 'code', options: this.autoList },
{ prop: 'name', label: '自动折返名称:', type: 'input' },
{ prop: 'subtitleName', label: '副标题名称:', type: 'input' },
{ prop: 'position', label: '坐标:', type: 'coordinate', width: '140px', children: [
@ -140,7 +140,7 @@ export default {
},
createRules: function () {
return {
automaticCode: [
cycleCode: [
{ required: true, message: '请选择自动折返进路', trigger: 'change' }
],
name: [
@ -174,7 +174,7 @@ export default {
deviceSelect(selected) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
if (selected && selected._type.toUpperCase() === 'Automactic'.toUpperCase()) {
if (selected && selected._type.toUpperCase() === 'MapCycleButtonVO'.toUpperCase()) {
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
@ -191,10 +191,10 @@ export default {
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('Automactic', this.automaticList);
const uid = getUID('MapCycleButtonVO', this.cycleButtonList);
let models = [];
const model = {
_type: 'Automactic',
_type: 'MapCycleButtonVO',
code: uid,
name: this.addModel.name,
subtitleName: this.addModel.subtitleName,
@ -202,7 +202,7 @@ export default {
x: this.addModel.position.x,
y: this.addModel.position.y
},
automaticCode:this.addModel.automaticCode
cycleCode:this.addModel.cycleCode
};
models.push(model);
this.$emit('updateMapModel', models);
@ -214,7 +214,7 @@ export default {
edit() {
this.$refs['dataform'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Automactic'}, this.editModel);
const data = Object.assign({_type: 'MapCycleButtonVO'}, this.editModel);
let models = [data];
this.$emit('updateMapModel', models);
}
@ -223,7 +223,7 @@ export default {
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Automactic'.toUpperCase()) {
if (selected && selected._type.toUpperCase() === 'MapCycleButtonVO'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),

14
src/views/newMap/newMapdraft/mapoperate/index.vue
View File

@ -92,9 +92,9 @@
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="自动折返" class="tab_pane_box" name="Automactic">
<el-tab-pane label="自动折返" class="tab_pane_box" name="MapCycleButtonVO">
<automatic-control-draft
ref="Automactic"
ref="MapCycleButtonVO"
:selected="selected"
@updateMapModel="updateMapModel"
@setCenter="setCenter"
@ -140,6 +140,14 @@
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="矩形框" class="tab_pane_box" name="OutFrame">
<out-frame-draft
ref="OutFrame"
:selected="selected"
@updateMapModel="updateMapModel"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane :label="$t('map.image')" class="tab_pane_box" name="Resource">
<Image-control-draft
ref="Resource"
@ -176,6 +184,7 @@ import TextDraft from './text';
import TrainWindowDraft from './trainwindow';
import ZcControlDraft from './zcControl';
import AutomaticControlDraft from './automaticControl';
import OutFrameDraft from './outFrameControl';
import LimitControlDraft from './limitControl';
import LcControlDraft from './lcControl';
import ImageControlDraft from './ImageControl';
@ -201,6 +210,7 @@ export default {
TextDraft,
ZcControlDraft,
AutomaticControlDraft,
OutFrameDraft,
LimitControlDraft,
LcControlDraft,
ImageControlDraft,

319
src/views/newMap/newMapdraft/mapoperate/outFrameControl.vue Normal file
View File

@ -0,0 +1,319 @@
<template>
<el-tabs v-model="activeName" class="card">
<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="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<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>
</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-list ref="make" :form="makeForm" :form-model="addModel" :rules="rules" />
<!-- <el-form ref="make" label-width="120px" :model="addModel" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.lineType')" prop="type">
<el-select v-model="addModel.type" filterable>
<el-option
v-for="item in LineTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.lineWidth')" prop="width">
<el-input-number v-model="addModel.width" :min="1" />px
</el-form-item>
<div class="coordinate">
<span class="title">{{ $t('map.linePoint') }}</span>
<div class="point-section">
<template v-for="(point, index) in addModel.points">
<div :key="index" style="overflow: hidden;">
<el-form-item
label=""
:prop="'points[' + index + '].x'"
style="display: table; float: left;"
label-width="0px"
>
<el-input-number v-model="point.x" />
</el-form-item>
<span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
, </span>
<el-form-item
label=""
:prop="'points[' + index + '].y'"
style="display: table; float: left; margin-right: 5px;"
label-width="10px"
>
<el-input-number v-model="point.y" />
</el-form-item>
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPoint(addModel.points, index)"
/>
<el-button
icon="el-icon-minus"
:disabled="index == 0 || index == addModel.points.length - 1"
circle
class="point-button"
@click="delPoint(addModel.points, index)"
/>
</div>
</template>
</div>
</div>
</el-form> -->
</el-scrollbar>
</div>
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmapNew/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
LineTypeList: [],
editModel: {
code: '',
width: 1,
height: 1,
position: {
x: 0,
y: 0
}
},
addModel: {
code: '',
width: 200,
height: 100,
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
},
makeRules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'outFrameList'
]),
form() {
const form = {
labelWidth: '120px',
items: {
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.outFrameList, change: true, deviceChange: this.deviceChange },
{ prop: 'width', label: '宽度:', type: 'number', min: 1, placeholder: 'px' },
{ prop: 'height', label: '高度:', type: 'number', min: 1, placeholder: 'px' },
{ prop: 'position', label: '坐标:', 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;
},
makeForm() {
return {
labelWidth: '120px',
items: {
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'width', label: '宽度:', type: 'number', min: 1, placeholder: 'px' },
{ prop: 'height', label: '高度:', type: 'number', min: 1, placeholder: 'px' },
{ prop: 'position', label: '坐标:', type: 'coordinate', width: '110px', 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' }
] },
]
}
}
}
},
isPointsShow() {
return this.editModel.points.length > 0;
}
},
watch: {
selected(val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
this.$Dictionary.lineType().then(list => {
this.LineTypeList = list;
});
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (selected && selected._type.toUpperCase() === 'OutFrame'.toUpperCase()) {
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
addPoint(index) {
const data = { x: 0, y: 0 };
this.editModel.points.splice(index + 1, 0, data);
},
delPoint(index) {
this.editModel.points.splice(index + 1, 0);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
const model = {
_type: 'OutFrame',
code: getUID('OutFrame', this.outFrameList),
width: this.addModel.width,
height: this.addModel.height,
position: this.addModel.position
};
this.$emit('updateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'OutFrame'}, this.editModel);
this.$emit('updateMapModel', data);
}
});
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'OutFrame'.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%;
overflow-y: auto;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
}
}
.point-section {
float: left;
width: calc(100% - 120px);
}
.point-button {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
float: left;
/deep/ {
.el-icon-plus,
.el-icon-minus {
transform: translateY(-5px);
}
}
}
.el-input-number--mini {
width: 110px;
}
</style>