增加地图标记点编辑

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="layout-config__group--wrapper">
-    <ai-dialog
-        append-to-body
-        :visible.sync="isShowEditor"
-        width="1000px"
-        class="layout-config__edit"
-        title="编辑器"
-        @onConfirm="onConfirm">
-      <div>
-        <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"></code-editor>
+    <div class="layout-config__group" v-if="options.type=='map'">
+      <div flex>
+        <span class="layoutTitle fill">标记点设置</span>
+        <el-button type="text" icon="iconfont iconAdd" @click="handleMapMarker()">添加</el-button>
       </div>
-    </ai-dialog>
-    <div class="layout-config__group" v-if="options.monitorType !== 'hik' && options.monitorType !== 'dahua'">
+      <div class="layout-config__item" v-for="(item,i) in options.staticData" :key="i">
+        <label v-text="item.label"/>
+        <div class="layout-config__item--right">
+          <el-input :value="[item.lat,item.lng].join(',')" readonly size="small"/>
+          <el-button type="text" icon="el-icon-edit" @click="handleMapMarker(item,i)"/>
+        </div>
+      </div>
+    </div>
+    <div class="layout-config__group" v-else-if="options.monitorType !== 'hik' && options.monitorType !== 'dahua'">
       <h2>基础设置</h2>
       <div class="layout-config__item">
         <label>数据类型</label>
@@ -63,8 +65,7 @@
         </div>
       </div>
     </div>
-    <div class="layout-config__group"
-         v-if="options.dataType !== 'staticData' && options.type === 'monitor' && (options.monitorType === 'cmcc' || options.monitorType === 'slw')">
+    <div class="layout-config__group" v-if="options.dataType !== 'staticData' && options.type === 'monitor' &&['cmcc','slw'].includes(options.monitorType)">
       <h2>字段设置</h2>
       <div class="layout-config__item">
         <label>监控视频</label>
@@ -110,6 +111,35 @@
         </div>
       </div>
     </div>
+    <ai-dialog
+        append-to-body
+        :visible.sync="isShowEditor"
+        width="1000px"
+        class="layout-config__edit"
+        title="编辑器"
+        @onConfirm="onConfirm">
+      <div>
+        <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"></code-editor>
+      </div>
+    </ai-dialog>
+    <ai-dialog class="layout-config__edit" v-model="showMapEditor" title="设置地图标记点" append-to-body @close="form={}" @confirm="saveMarker">
+      <el-form :model="form" size="small" ref="mapMarker" label-width="120px">
+        <el-form-item label="标记点名称" :rules="{required:true,message:'请填写标记点名称'}">
+          <el-input placeholder="用于地图上展示对标记点的文字标签" v-model="form.label" clearable/>
+        </el-form-item>
+        <div flex>
+          <el-form-item class="fill" label="经度" :rules="{required:true,message:'请填写标记点经度'}">
+            <el-input v-model="form.lng" clearable placeholder="小数点位保留至少6位数"/>
+          </el-form-item>
+          <el-form-item class="fill" label="纬度" :rules="{required:true,message:'请填写标记点纬度'}">
+            <el-input v-model="form.lat" clearable placeholder="小数点位保留至少6位数"/>
+          </el-form-item>
+        </div>
+        <el-form-item label="弹窗内容">
+          <ai-editor v-model="form.winInfo" :instance="instance"/>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
   </div>
 </template>
 
@@ -119,6 +149,7 @@ import 'brace/mode/json'
 import 'brace/snippets/json';
 import 'brace/theme/github';
 import 'brace/theme/monokai';
+import AiEditor from "dui/packages/basic/AiEditor/AiEditor";
 
 export default {
   name: 'dataConfig',
@@ -153,11 +184,14 @@ export default {
       keys: [],
       monitorList: [],
       list: [],
-      jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`
+      jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`,
+      showMapEditor: false,
+      form: {}
     }
   },
 
   components: {
+    AiEditor,
     CodeEditor
   },
 
@@ -322,6 +356,20 @@ export default {
       this.$set(this.options, 'staticData', JSON.parse(this.json))
       this.isShowEditor = false
       this.$emit('change')
+    },
+    handleMapMarker(v = {}, index) {
+      this.form = this.$copy({...v, index})
+      this.showMapEditor = true
+    },
+    saveMarker() {
+      this.$refs.mapMarker.validate().then(() => {
+        const i = this.$copy(this.form.index)
+        delete this.form.index
+        if (i > -1) {
+          this.options.staticData.splice(i, 1, this.form)
+        } else this.options.staticData.push(this.form)
+        this.showMapEditor = false
+      })
     }
   }
 }
@@ -373,6 +421,12 @@ export default {
       font-size: 15px;
       font-weight: 700;
     }
+
+    .layoutTitle {
+      color: #FFFFFF;
+      font-size: 15px;
+      font-weight: 700;
+    }
   }
 
   .layout-config__item {