新增同站示意框
This commit is contained in:
fan
parent
933ef9ed82
commit
e326a18d80
@ -17,4 +17,9 @@ nccGraphRender[nccGraphType.NccTrain] = {
|
||||
_type: nccGraphType.NccTrain,
|
||||
zlevel: 1
|
||||
};
|
||||
/** StationCircle渲染配置 */
|
||||
nccGraphRender[nccGraphType.StationCircle] = {
|
||||
_type: nccGraphType.StationCircle,
|
||||
zlevel: 1
|
||||
};
|
||||
export default nccGraphRender;
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
const nccGraphType = {
|
||||
RunLine: 'RunLine',
|
||||
NccStation: 'NccStation',
|
||||
NccTrain: 'NccTrain'
|
||||
NccTrain: 'NccTrain',
|
||||
StationCircle: 'StationCircle'
|
||||
};
|
||||
|
||||
export default nccGraphType;
|
||||
|
||||
@ -29,6 +29,10 @@ export function parser(nccData, skinCode, showConfig) {
|
||||
nccDevice[elem.code] = createDevice(nccGraphType.RunLine, elem, propConvert, showConfig);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(nccData.stationCircleList || [], elem => {
|
||||
nccDevice[elem.code] = createDevice(nccGraphType.StationCircle, elem, propConvert, showConfig);
|
||||
}, this);
|
||||
|
||||
}
|
||||
return { nccDevice, runPositionData };
|
||||
}
|
||||
@ -71,6 +75,7 @@ export function updateMapData(state, model) {
|
||||
switch (model._type) {
|
||||
case nccGraphType.RunLine: updateForList(model, state, 'runLineList'); break;
|
||||
case nccGraphType.NccStation: updateForList(model, state, 'nccStationList'); break;
|
||||
case nccGraphType.StationCircle: updateForList(model, state, 'stationCircleList'); break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
47
src/jmapNew/shape/nccGraph/StationCircle/index.js
Normal file
47
src/jmapNew/shape/nccGraph/StationCircle/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
|
||||
export default class StationCircle extends Group {
|
||||
constructor(model, {style}) {
|
||||
super();
|
||||
this._code = model.code;
|
||||
this._type = model._type;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = 9;
|
||||
this.model = model;
|
||||
this.style = style;
|
||||
this.create();
|
||||
this.setState(model);
|
||||
}
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.rectBody = new Rect({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
r: [model.r],
|
||||
x: model.position.x,
|
||||
y: model.position.y,
|
||||
width: model.width,
|
||||
height: model.height
|
||||
},
|
||||
style: {
|
||||
fill: model.fillColor,
|
||||
stroke: model.lineColor,
|
||||
lineWidth: model.lineWidth
|
||||
}
|
||||
});
|
||||
this.add(this.rectBody);
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
}
|
||||
getAnchorPoint() {
|
||||
if (this.rectBody) {
|
||||
const rect = this.rectBody.getBoundingRect();
|
||||
return {x:rect.x, y:rect.y};
|
||||
} else {
|
||||
return {x:this.model.position.x, y:this.model.position.y};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,10 +3,12 @@ import nccGraphType from '../../constant/nccGraphType';
|
||||
import NccStation from './NccStation';
|
||||
import RunLine from './RunLine';
|
||||
import NccTrain from './NccTrain';
|
||||
import StationCircle from './StationCircle';
|
||||
/** 图库*/
|
||||
const mapShape = {};
|
||||
mapShape[nccGraphType.NccStation] = NccStation;
|
||||
mapShape[nccGraphType.RunLine] = RunLine;
|
||||
mapShape[nccGraphType.NccTrain] = NccTrain;
|
||||
mapShape[nccGraphType.StationCircle] = StationCircle;
|
||||
|
||||
export default mapShape;
|
||||
|
||||
@ -621,6 +621,13 @@ const map = {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
stationCircleList: state => {
|
||||
if (state.nccData) {
|
||||
return state.nccData.stationCircleList || [];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// trainDetails: (state) => {
|
||||
// return state.trainDetails;
|
||||
// },
|
||||
@ -1314,7 +1321,6 @@ const map = {
|
||||
if (window.location.href.includes('/design/usermap/map/nccDraw')) {
|
||||
handleOperation(state, list);
|
||||
}
|
||||
console.log(ParserType.nccGraph.value, '*********');
|
||||
commit('mapRender', {devices: list, type: ParserType.nccGraph.value});
|
||||
resolve(list);
|
||||
});
|
||||
|
||||
@ -325,6 +325,7 @@ export default {
|
||||
this.$router.push({ path: `/design/usermap/home` });
|
||||
},
|
||||
updateMapModel(models) { // 创建 跟新元素
|
||||
console.log('updateMapModel', models);
|
||||
this.$store.dispatch('map/updateNccMapDevices', models);
|
||||
},
|
||||
// 撤销
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
<script>
|
||||
import NccStation from './nccStation';
|
||||
import RunLine from './runLine';
|
||||
import StationCircle from './stationCircle';
|
||||
|
||||
export default {
|
||||
name: 'MapOperate',
|
||||
@ -49,7 +50,8 @@ export default {
|
||||
lazy: true,
|
||||
tabList:[
|
||||
{label: '车站', name: 'NccStation', menus: NccStation},
|
||||
{label: '运行线', name: 'RunLine', menus: RunLine}
|
||||
{label: '运行线', name: 'RunLine', menus: RunLine},
|
||||
{label: '同站示意框', name: 'StationCircle', menus:StationCircle}
|
||||
],
|
||||
selectDevice:'',
|
||||
enabledTab: 'Line'
|
||||
|
||||
@ -31,7 +31,7 @@ import CreateOperate from './components/createOperate';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'StationStandDraft',
|
||||
name: 'StationCircle',
|
||||
components: {
|
||||
OperateProperty,
|
||||
CreateOperate
|
||||
@ -48,28 +48,26 @@ export default {
|
||||
return {
|
||||
activeName: 'first',
|
||||
lazy: true,
|
||||
LineTypeList: [],
|
||||
directionType: [
|
||||
{ name: '左端', code: 'left' },
|
||||
{ name: '右端', code: 'right' }
|
||||
],
|
||||
editModel: {
|
||||
code: '',
|
||||
width: 40,
|
||||
height: 40,
|
||||
lineWidth: 2,
|
||||
width: 10,
|
||||
height: 30,
|
||||
lineWidth: 1,
|
||||
lineColor: '',
|
||||
fillColor: '',
|
||||
r: 0,
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
addModel: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
lineWidth: 2,
|
||||
width: 10,
|
||||
height: 30,
|
||||
lineWidth: 1,
|
||||
r: 0,
|
||||
lineColor: 'rgba(255, 255, 255, 1)',
|
||||
fillColor: 'rgba(0,0,0,0)',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
@ -96,7 +94,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'rectList'
|
||||
'stationCircleList'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
@ -109,12 +107,13 @@ export default {
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.rectList, deviceChange: this.deviceChange },
|
||||
{ prop: 'code', label:'示意框：', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.stationCircleList, deviceChange: this.deviceChange },
|
||||
{ prop: 'lineColor', label: '边框颜色:', type: 'color' },
|
||||
{ prop: 'fillColor', label: '填充颜色:', type: 'color' },
|
||||
{ prop: 'width', label: '宽度:', type: 'number', min: 1, placeholder: 'px' },
|
||||
{ prop: 'height', label: '高度:', type: 'number', min: 1, placeholder: 'px' },
|
||||
{ prop: 'lineWidth', label: '边框宽度:', type: 'number', min:1, placeholder: 'px'},
|
||||
{ prop: 'r', label: '圆角半径', type: 'number', min: 0, placeholder: 'px' },
|
||||
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
@ -140,7 +139,9 @@ export default {
|
||||
{ prop: 'width', label: '宽度:', type: 'number', min:1, placeholder: 'px'},
|
||||
{ prop: 'height', label: '高度:', type: 'number', min:1, placeholder: 'px'},
|
||||
{ prop: 'lineColor', label: this.$t('map.lineColor'), type: 'color' },
|
||||
{ prop: 'fillColor', label: '填充颜色:', type: 'color' },
|
||||
{ prop: 'lineWidth', label: '边框宽度:', type: 'number', min:1, placeholder: 'px'},
|
||||
{ prop: 'r', label: '圆角半径', type: 'number', min: 0, placeholder: 'px' },
|
||||
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
@ -150,26 +151,18 @@ export default {
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
isPointShow() {
|
||||
return !this.editModel.pointShow;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$Dictionary.lineType().then(list => {
|
||||
this.LineTypeList = list;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
clearDeviceSelect() {
|
||||
this.$emit('deviceSelect', '');
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
this.deviceSelect(this.$store.getters['map/getNccDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
|
||||
if (selected && selected._type.toUpperCase() === 'StationCircle'.toUpperCase()) {
|
||||
this.$refs.form && this.$refs.form.resetFields();
|
||||
this.$refs.dataform && this.$refs.dataform.resetFields();
|
||||
this.activeName = 'first';
|
||||
@ -178,11 +171,13 @@ export default {
|
||||
},
|
||||
create() {
|
||||
const model = {
|
||||
_type: 'Rect',
|
||||
code: getUID('Rect', this.rectList),
|
||||
_type: 'StationCircle',
|
||||
code: getUID('StationCircle', this.stationCircleList),
|
||||
width: this.addModel.width,
|
||||
height: this.addModel.height,
|
||||
r: this.addModel.r,
|
||||
lineColor: this.addModel.lineColor,
|
||||
fillColor: this.addModel.fillColor,
|
||||
lineWidth: this.addModel.lineWidth,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
@ -206,54 +201,54 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.card {
|
||||
height: 100%;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
.point-section {
|
||||
/*float: left;*/
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
|
||||
.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-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
|
||||
.point-section {
|
||||
/*float: left;*/
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
/deep/ {
|
||||
.el-icon-plus,
|
||||
.el-icon-minus {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.el-input-number--mini {
|
||||
width: 110px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user