调整系统绘图模块新增
This commit is contained in:
zyy
parent
89b63e9709
commit
55ee64479f
@ -1,7 +1,8 @@
|
||||
const systemGraphType = {
|
||||
Line: 'Line',
|
||||
Text: 'Text',
|
||||
Rect: 'Rect'
|
||||
Rect: 'Rect',
|
||||
Arrow: 'Arrow'
|
||||
};
|
||||
|
||||
export default systemGraphType;
|
||||
|
||||
71
src/jmapNew/shape/systemGraph/Arrow/index.js
Normal file
71
src/jmapNew/shape/systemGraph/Arrow/index.js
Normal file
@ -0,0 +1,71 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
|
||||
export default class Arrow extends Group {
|
||||
constructor(model, {style}) {
|
||||
super();
|
||||
this._code = model.code;
|
||||
this._type = model._type;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = 0;
|
||||
this.model = model;
|
||||
// this.style = style;
|
||||
this.isShowShape = true;
|
||||
this.create();
|
||||
this.setState(model);
|
||||
this.setShowMode();
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.arrow = new Polygon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [model.position.x, model.position.y],
|
||||
rotation: -Math.PI / 180 * Number(model.rotate),
|
||||
shape: {
|
||||
points: [
|
||||
[model.position.x, model.position.y],
|
||||
[model.position.x + model.triangleLength, model.position.y - model.triangleHeight / 2],
|
||||
[model.position.x + model.triangleLength, model.position.y - model.lineWidth / 2],
|
||||
[model.position.x + model.length, model.position.y - model.lineWidth / 2],
|
||||
[model.position.x + model.length, model.position.y + model.lineWidth / 2],
|
||||
[model.position.x + model.triangleLength, model.position.y + model.lineWidth / 2],
|
||||
[model.position.x + model.triangleLength, model.position.y + model.triangleHeight / 2]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
fill: model.color
|
||||
}
|
||||
});
|
||||
this.add(this.arrow);
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
if (!this.isShowShape) return;
|
||||
}
|
||||
// 设置显示模式
|
||||
setShowMode() {
|
||||
const showMode = this.model.showMode;
|
||||
const showConditions = this.model.showConditions;
|
||||
if (!showConditions || showConditions === '01' || showMode === showConditions) {
|
||||
this.arrow.show();
|
||||
} else {
|
||||
this.arrow.hide();
|
||||
}
|
||||
}
|
||||
setShowStation(stationCode) {
|
||||
if (!stationCode || this.model.stationCode === stationCode) {
|
||||
this.show();
|
||||
this.isShowShape = true;
|
||||
this.setState(this.model);
|
||||
} else {
|
||||
this.hide();
|
||||
this.isShowShape = false;
|
||||
}
|
||||
}
|
||||
getAnchorPoint() {
|
||||
const rect = this.arrow.getBoundingRect();
|
||||
return { x:rect.x, y:rect.y };
|
||||
}
|
||||
}
|
||||
@ -3,11 +3,13 @@ import systemGraphType from '../../constant/systemGraphType';
|
||||
import Line from './Line/index.js';
|
||||
import Text2 from './Text/index.js';
|
||||
import Rect2 from './Rect/index.js';
|
||||
import Arrow from './Arrow/index.js';
|
||||
|
||||
/** 图库*/
|
||||
const mapShape = {};
|
||||
mapShape[systemGraphType.Line] = Line;
|
||||
mapShape[systemGraphType.Text] = Text2;
|
||||
mapShape[systemGraphType.Rect] = Rect2;
|
||||
mapShape[systemGraphType.Arrow] = Arrow;
|
||||
|
||||
export default mapShape;
|
||||
|
||||
223
src/views/newMap/newMapdraftSystem/mapoperate/arrow.vue
Normal file
223
src/views/newMap/newMapdraftSystem/mapoperate/arrow.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" class="card">
|
||||
<el-tab-pane class="view-control" :label="$t('map.property')" name="first" :lazy="lazy">
|
||||
<operate-property
|
||||
ref="dataform"
|
||||
:form="form"
|
||||
:edit-model="editModel"
|
||||
:rules="rules"
|
||||
type="Arrow"
|
||||
@updateMapModel="updateMapModel"
|
||||
@clearDeviceSelect="clearDeviceSelect"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
|
||||
<create-operate
|
||||
ref="createForm"
|
||||
:add-model="addModel"
|
||||
:create-form="form"
|
||||
:create-rules="rules"
|
||||
@create="create"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
import { mapGetters } from 'vuex';
|
||||
// import getModel from './models.js';
|
||||
import { getUID } from '@/jmapNew/utils/Uid';
|
||||
import OperateProperty from './components/operateProperty';
|
||||
import CreateOperate from './components/createOperate';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'StationStandDraft',
|
||||
components: {
|
||||
OperateProperty,
|
||||
CreateOperate
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
lazy: true,
|
||||
editModel: {
|
||||
_type: 'Arrow',
|
||||
code: '',
|
||||
lineWidth: 2,
|
||||
length: 15,
|
||||
rotate: 0,
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
triangleLength: 10,
|
||||
triangleHeight: 6,
|
||||
position: {x:0, y:0}
|
||||
},
|
||||
addModel: {
|
||||
_type: 'Arrow',
|
||||
code: '',
|
||||
lineWidth: 2,
|
||||
length: 15,
|
||||
rotate: 0,
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
triangleLength: 10,
|
||||
triangleHeight: 6,
|
||||
position: {x:0, y:0}
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
|
||||
],
|
||||
'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', [
|
||||
'arrowList'
|
||||
]),
|
||||
showConditionsList() {
|
||||
const showConditionsList = ConstConfig.ConstSelect.showConditionsList;
|
||||
return Cookies.get('user_lang') == 'en'
|
||||
? showConditionsList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
|
||||
: showConditionsList.map(elem => { return { value: elem.value, label: elem.label }; });
|
||||
},
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '120px',
|
||||
items: {
|
||||
draw: {
|
||||
name: this.activeName == 'first' ? this.$t('map.drawData') : '',
|
||||
item: [
|
||||
{ prop: 'code', label: '箭头编码', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.arrowList, deviceChange: this.deviceChange, isHidden:this.activeName == 'second' },
|
||||
{ prop: 'position', label: '坐标:', type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
|
||||
] },
|
||||
{ prop: 'length', label: '长度:', type: 'number', min:1, placeholder: 'px'},
|
||||
{ prop: 'lineWidth', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
|
||||
{ prop: 'triangleLength', label: '三角长度:', type: 'number', min: 1, placeholder: 'px'},
|
||||
{ prop: 'triangleHeight', label: '三角高度:', type: 'number', min: 1, placeholder: 'px'},
|
||||
{ prop: 'rotate', label: '旋转角度', type: 'number', max: 360, placeholder: '度' },
|
||||
{ prop: 'color', label: '颜色:', type: 'color' }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.createForm && this.$refs.createForm.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Arrow'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.dataform && this.$refs.dataform.resetFields();
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
});
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.addModel = {
|
||||
_type: 'Arrow',
|
||||
code: '',
|
||||
lineWidth: 2,
|
||||
length: 15,
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
triangleLength: 10,
|
||||
triangleHeight: 6,
|
||||
position: {x:0, y:0}
|
||||
};
|
||||
this.$refs.createForm && this.$refs.createForm.resetFields();
|
||||
},
|
||||
clearDeviceSelect() {
|
||||
this.$emit('deviceSelect', '');
|
||||
},
|
||||
create() {
|
||||
const model = deepAssign(this.addModel, {code: getUID('Arrow', this.arrowList)});
|
||||
this.$emit('updateMapModel', model);
|
||||
this.clear();
|
||||
},
|
||||
updateMapModel(data) {
|
||||
this.$emit('updateMapModel', data);
|
||||
},
|
||||
deleteObj() {
|
||||
this.$refs.dataform.deleteObj();
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs.dataform.edit();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.point-section {
|
||||
/*float: left;*/
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
|
||||
.point-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
|
||||
/deep/ {
|
||||
.el-icon-plus,
|
||||
.el-icon-minus {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-number--mini {
|
||||
width: 110px;
|
||||
}
|
||||
</style>
|
||||
@ -30,6 +30,7 @@
|
||||
import LineDraft from './line';
|
||||
import TextDraft from './text';
|
||||
import RectDraft from './rect';
|
||||
import ArrowDraft from './arrow';
|
||||
// import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
@ -56,7 +57,8 @@ export default {
|
||||
tabList:[
|
||||
{label: this.$t('map.line'), name:'Line', menus:LineDraft},
|
||||
{label: this.$t('map.text'), name:'Text', menus:TextDraft},
|
||||
{label: '矩形', name:'Rect', menus:RectDraft}
|
||||
{label: '矩形', name:'Rect', menus: RectDraft},
|
||||
{label: '箭头', name:'Arrow', menus: ArrowDraft}
|
||||
],
|
||||
selectDevice:'',
|
||||
enabledTab: 'Line'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user