From 55ee64479f6ab6f7e633a37a1a8702b47ad5bc54 Mon Sep 17 00:00:00 2001
From: zyy <1787816799@qq.com>
Date: Thu, 20 May 2021 17:58:23 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=B3=BB=E7=BB=9F=E7=BB=98?=
 =?UTF-8?q?=E5=9B=BE=E6=A8=A1=E5=9D=97=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/jmapNew/constant/systemGraphType.js       |   3 +-
 src/jmapNew/shape/systemGraph/Arrow/index.js  |  71 ++++++
 src/jmapNew/shape/systemGraph/index.js        |   2 +
 .../newMapdraftSystem/mapoperate/arrow.vue    | 223 ++++++++++++++++++
 .../newMapdraftSystem/mapoperate/index.vue    |   4 +-
 5 files changed, 301 insertions(+), 2 deletions(-)
 create mode 100644 src/jmapNew/shape/systemGraph/Arrow/index.js
 create mode 100644 src/views/newMap/newMapdraftSystem/mapoperate/arrow.vue

diff --git a/src/jmapNew/constant/systemGraphType.js b/src/jmapNew/constant/systemGraphType.js
index 6f6d05f2c..df98413a2 100644
--- a/src/jmapNew/constant/systemGraphType.js
+++ b/src/jmapNew/constant/systemGraphType.js
@@ -1,7 +1,8 @@
 const systemGraphType = {
     Line: 'Line',
     Text: 'Text',
-    Rect: 'Rect'
+    Rect: 'Rect',
+    Arrow: 'Arrow'
 };
 
 export default systemGraphType;
diff --git a/src/jmapNew/shape/systemGraph/Arrow/index.js b/src/jmapNew/shape/systemGraph/Arrow/index.js
new file mode 100644
index 000000000..c5da95478
--- /dev/null
+++ b/src/jmapNew/shape/systemGraph/Arrow/index.js
@@ -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 };
+    }
+}
diff --git a/src/jmapNew/shape/systemGraph/index.js b/src/jmapNew/shape/systemGraph/index.js
index 9be6bc854..69ea2220e 100644
--- a/src/jmapNew/shape/systemGraph/index.js
+++ b/src/jmapNew/shape/systemGraph/index.js
@@ -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;
diff --git a/src/views/newMap/newMapdraftSystem/mapoperate/arrow.vue b/src/views/newMap/newMapdraftSystem/mapoperate/arrow.vue
new file mode 100644
index 000000000..1c5c21d49
--- /dev/null
+++ b/src/views/newMap/newMapdraftSystem/mapoperate/arrow.vue
@@ -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>
diff --git a/src/views/newMap/newMapdraftSystem/mapoperate/index.vue b/src/views/newMap/newMapdraftSystem/mapoperate/index.vue
index d1b8ff000..85c267657 100644
--- a/src/views/newMap/newMapdraftSystem/mapoperate/index.vue
+++ b/src/views/newMap/newMapdraftSystem/mapoperate/index.vue
@@ -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'