From 30c672026f0241bdf85fde42831cfb8a115b634e Mon Sep 17 00:00:00 2001
From: zyy <1787816799@qq.com>
Date: Thu, 5 Mar 2020 15:48:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=9F=A9=E5=BD=A2=E5=8C=85?=
 =?UTF-8?q?=E5=9B=B4=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/jmapNew/config/skinCode/ningbo_01.js      |   5 +-
 src/jmapNew/constant/deviceRender.js          |   9 +-
 src/jmapNew/constant/deviceType.js            |   3 +-
 src/jmapNew/constant/stateTransition.js       |   5 +-
 src/jmapNew/shape/Automactic/index.js         |  24 +-
 src/jmapNew/shape/OutFrame/index.js           |  41 +++
 src/jmapNew/shape/factory.js                  |   6 +-
 src/jmapNew/utils/parser.js                   |  11 +-
 src/store/modules/map.js                      |  11 +-
 .../mapoperate/automaticControl.vue           |  30 +-
 .../newMap/newMapdraft/mapoperate/index.vue   |  14 +-
 .../mapoperate/outFrameControl.vue            | 319 ++++++++++++++++++
 12 files changed, 437 insertions(+), 41 deletions(-)
 create mode 100644 src/jmapNew/shape/OutFrame/index.js
 create mode 100644 src/views/newMap/newMapdraft/mapoperate/outFrameControl.vue

diff --git a/src/jmapNew/config/skinCode/ningbo_01.js b/src/jmapNew/config/skinCode/ningbo_01.js
index 2cdf784ab..d06ce0e0f 100644
--- a/src/jmapNew/config/skinCode/ningbo_01.js
+++ b/src/jmapNew/config/skinCode/ningbo_01.js
@@ -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: {
+                
             }
         };
 
diff --git a/src/jmapNew/constant/deviceRender.js b/src/jmapNew/constant/deviceRender.js
index 15fd2dccf..90a90f970 100644
--- a/src/jmapNew/constant/deviceRender.js
+++ b/src/jmapNew/constant/deviceRender.js
@@ -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;
diff --git a/src/jmapNew/constant/deviceType.js b/src/jmapNew/constant/deviceType.js
index 6407bfeb4..f1af16ab7 100644
--- a/src/jmapNew/constant/deviceType.js
+++ b/src/jmapNew/constant/deviceType.js
@@ -10,7 +10,8 @@ const deviceType = {
     StationStand: 'StationStand',
     Esp: 'Esp',
     Psd: 'Psd',
-    Automactic: 'Automactic',
+    MapCycleButtonVO: 'MapCycleButtonVO',
+    OutFrame: 'OutFrame',
     StationControl: 'StationControl',
     StationCounter: 'StationCounter',
     StationDelayUnlock: 'StationDelayUnlock',
diff --git a/src/jmapNew/constant/stateTransition.js b/src/jmapNew/constant/stateTransition.js
index 1bff1aac5..f993764e1 100644
--- a/src/jmapNew/constant/stateTransition.js
+++ b/src/jmapNew/constant/stateTransition.js
@@ -109,7 +109,10 @@ class Status {
     handleLimitControl(device) {
         this.statusObj = { };
     }
-    handleAutomactic(device) {
+    handleMapCycleButtonVO(device) {
+        this.statusObj = { };
+    }
+    handleOutFrame(device) {
         this.statusObj = { };
     }
     getStatus() {
diff --git a/src/jmapNew/shape/Automactic/index.js b/src/jmapNew/shape/Automactic/index.js
index 03a10015e..f1bfbde4e 100644
--- a/src/jmapNew/shape/Automactic/index.js
+++ b/src/jmapNew/shape/Automactic/index.js
@@ -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);
diff --git a/src/jmapNew/shape/OutFrame/index.js b/src/jmapNew/shape/OutFrame/index.js
new file mode 100644
index 000000000..af6376aa6
--- /dev/null
+++ b/src/jmapNew/shape/OutFrame/index.js
@@ -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) {
+    }
+}
diff --git a/src/jmapNew/shape/factory.js b/src/jmapNew/shape/factory.js
index b003bf2e4..36a7ce029 100644
--- a/src/jmapNew/shape/factory.js
+++ b/src/jmapNew/shape/factory.js
@@ -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) {
diff --git a/src/jmapNew/utils/parser.js b/src/jmapNew/utils/parser.js
index b54e7cdce..0b0567b91 100644
--- a/src/jmapNew/utils/parser.js
+++ b/src/jmapNew/utils/parser.js
@@ -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;
         }
     }
 }
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 7d6ce651e..2b8cd2ae2 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -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 [];
             }
diff --git a/src/views/newMap/newMapdraft/mapoperate/automaticControl.vue b/src/views/newMap/newMapdraft/mapoperate/automaticControl.vue
index ec07c28e6..33968a55c 100644
--- a/src/views/newMap/newMapdraft/mapoperate/automaticControl.vue
+++ b/src/views/newMap/newMapdraft/mapoperate/automaticControl.vue
@@ -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'),
diff --git a/src/views/newMap/newMapdraft/mapoperate/index.vue b/src/views/newMap/newMapdraft/mapoperate/index.vue
index c2b3ef8de..0cf5c53cc 100644
--- a/src/views/newMap/newMapdraft/mapoperate/index.vue
+++ b/src/views/newMap/newMapdraft/mapoperate/index.vue
@@ -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,
diff --git a/src/views/newMap/newMapdraft/mapoperate/outFrameControl.vue b/src/views/newMap/newMapdraft/mapoperate/outFrameControl.vue
new file mode 100644
index 000000000..12328d376
--- /dev/null
+++ b/src/views/newMap/newMapdraft/mapoperate/outFrameControl.vue
@@ -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>