新增同站示意框

src/jmapNew/constant/nccGraphRender.js

@@ -17,4 +17,9 @@ nccGraphRender[nccGraphType.NccTrain] = {
     _type: nccGraphType.NccTrain,
     zlevel: 1
 };
+/** StationCircle渲染配置 */
+nccGraphRender[nccGraphType.StationCircle] = {
+    _type: nccGraphType.StationCircle,
+    zlevel: 1
+};
 export default nccGraphRender;

src/jmapNew/constant/nccGraphType.js

@@ -1,7 +1,8 @@
 const nccGraphType = {
     RunLine: 'RunLine',
     NccStation: 'NccStation',
-    NccTrain: 'NccTrain'
+    NccTrain: 'NccTrain',
+    StationCircle: 'StationCircle'
 };
 
 export default nccGraphType;

src/jmapNew/parser/parser-nccGraph.js

@@ -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;
         }
     }
 }

src/jmapNew/shape/nccGraph/StationCircle/index.js

@@ -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};
+        }
+    }
+}

src/jmapNew/shape/nccGraph/index.js

@@ -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;

src/store/modules/map.js

@@ -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);
             });

src/views/newMap/newMapdraftSystem/index.vue

@@ -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);
         },
         // 撤销

src/views/newMap/newMapdraftSystem/mapoperate/index.vue

@@ -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'

src/views/newMap/newMapdraftSystem/mapoperate/stationCircle.vue

@@ -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,
+                width: 10,
-                height: 40,
+                height: 30,
-                lineWidth: 2,
+                lineWidth: 1,
                 lineColor: '',
                 fillColor: '',
+                r: 0,
                 position: {
                     x: 0,
                     y: 0
                 }
             },
             addModel: {
-                width: 40,
+                width: 10,
-                height: 40,
+                height: 30,
-                lineWidth: 2,
+                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',
+                _type: 'StationCircle',
-                code: getUID('Rect', this.rectList),
+                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";
+@import "src/styles/mixin.scss";
-	.card {
+.card {
-		height: 100%;
+	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 {
+.point-section {
-        overflow: hidden;
+	/*float: left;*/
+	position: absolute;
+	left: 120px;
+	width: calc(100% - 120px);
+}
 
-        .title {
+.point-button {
-            text-align: right;
+	width: 28px;
-            font-size: 14px;
+	height: 28px;
-            color: #606266;
+	display: flex;
-            line-height: 40px;
+	align-items: center;
-            padding: 0 12px 0 0;
+	justify-content: center;
-            -webkit-box-sizing: border-box;
+	float: left;
-            box-sizing: border-box;
-            line-height: 28px;
-            width: 120px;
-            font-weight: bold;
-            display: block;
-            float: left;
-        }
-    }
 
-    .point-section {
+	/deep/ {
-        /*float: left;*/
+		.el-icon-plus,
-        position: absolute;
+		.el-icon-minus {
-        left: 120px;
+			transform: translateY(-5px);
-        width: calc(100% - 120px);
+		}
-    }
+	}
+}
 
-    .point-button {
+.el-input-number--mini {
-        width: 28px;
+	width: 110px;
-        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>