From 13e503cc554f032e2a035f13bfc5eec5a94ad0d6 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 9 Nov 2022 16:29:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvRender.vue                     | 102 +++++-----
 .../bigscreen/designer/components/Layout.vue  | 191 +++---------------
 .../components/form/componentConfig.vue       | 163 +++++++++++++++
 packages/bigscreen/designer/config.js         |   5 +-
 4 files changed, 242 insertions(+), 219 deletions(-)
 create mode 100644 packages/bigscreen/designer/components/form/componentConfig.vue

diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index 1683289f..274fefbc 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -22,7 +22,7 @@
                  :theme="theme"
                  :data="values"
                  :ops="chartList[data.config]"/>
-      <ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
+      <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
               :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
       <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
       <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
@@ -69,9 +69,20 @@ export default {
         return []
       }
       return this.data.type === 'map' ? this.data[this.data.dataType].map(e => {
-        return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
+        return {lng: e['经度'], lat: e['纬度'], label: e['地区名称'], ...e}
       }) : this.data[this.data.dataType]
     },
+    currentType: v => v.data.type
+  },
+  watch: {
+    values: {
+      immediate: true,
+      deep: true, handler() {
+        if (this.currentType == 'map') {
+          this.renderMap()
+        }
+      }
+    }
   },
   methods: {
     formatTable(data, isShowIndex, rowNum) {
@@ -109,7 +120,7 @@ export default {
         align: ['center', 'center', 'center', 'center', 'center']
       }
     },
-    handleMapClick(count = 0) {
+    renderMap(count = 0) {
       let {lib: AMap, map} = this
       if (AMap) {
         let infoWin = new AMap.InfoWindow({content: ""})
@@ -117,37 +128,35 @@ export default {
         let markers = this.values.filter(e => e.lng).map(e => {
           return new AMap.Marker({
             map,
-            label: e.label,
-            icon: e.icon,
+            content: e.content || `<div class="marker">
+                        <img src="${e.icon}"/>
+                        <span>${e.label}</span>
+                      </div>`,
             position: [e.lng, e.lat]
-          }).on('click', ({target}) => {
-            map.clearInfoWindow()
-            markers?.map(m => m.getIcon() == e.selectedIcon && m.setIcon(e.icon))
-            target.setIcon(e.selectedIcon)
-            infoWin.setContent([
-              `<div class="infoWin">`,
-              `<b>${e.label}</b>`,
-              `<div>累计成交金额：${e['累计成交金额(万)']}万元</div>`,
-              `<div>金融产品：${e['金融产品(万)']}万元</div>`,
-              `<div>融资需求：${e['融资需求(万)']}万元</div>`,
-              '</div>'
-            ].join(''))
-            infoWin.open(map, [e.lng, e.lat])
+          }).on('click', () => {
+            if (!!e.openWin || e.infoWindowHtml) {
+              map.clearInfoWindow()
+              infoWin.setContent(e.infoWindowHtml ||
+                  [`<div class="infoWin">`,
+                    `<b>${e.label}</b>`,
+                    '</div>'
+                  ].join('')
+              )
+              infoWin.open(map, [e.lng, e.lat])
+            }
           })
         })
         map.setFitView(markers)
       } else if (count < 10) {
         console.log("正在加载...%s", count)
-        setTimeout(() => this.handleMapClick(++count), 1000)
+        setTimeout(() => this.renderMap(++count), 1000)
       }
     }
   },
   mounted() {
-
     if (this.data.type == 'map') {
-      this.handleMapClick()
-    }
-    else if(this.data.type == 'table'){
+      this.renderMap()
+    } else if (this.data.type == 'table') {
       this.$injectLib("https://cdn.cunwuyun.cn/datav.map.vue.js")
     }
   }
@@ -197,41 +206,28 @@ export default {
     }
   }
 
-  ::v-deep.amap-info-contentContainer {
-    .amap-info-content {
-      background: #0A3257;
-      border: 1px solid #7BE5FF;
-      padding: 16px;
-      font-family: PingFangSC-Semibold, PingFang SC;
 
-      .infoWin {
-        & > b {
-          display: block;
-          font-size: 18px;
-          font-weight: 600;
-          color: #FFFFFF;
-          margin-bottom: 13px;
-        }
+  ::v-deep .marker {
+    position: relative;
 
-        & > div {
-          font-size: 16px;
-          font-weight: 400;
-          color: #7BE5FF;
-
-          & + div {
-            margin-top: 8px;
-          }
-        }
-      }
+    & > img {
+      width: 50px;
+      height: 50px;
     }
 
-    .amap-info-sharp {
-      border-top-color: #0A3257;
+    & > span {
+      display: none;
+    }
 
-      &:after {
-        border-top-color: #7BE5FF;
-        filter: none;
-      }
+    &:hover > span {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 100%);
+      display: block;
+      color: #fff;
+      font-size: 14px;
+      white-space: nowrap;
     }
   }
 }
diff --git a/packages/bigscreen/designer/components/Layout.vue b/packages/bigscreen/designer/components/Layout.vue
index ffc0e2ca..56e2c233 100644
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/packages/bigscreen/designer/components/Layout.vue
@@ -17,7 +17,7 @@
         <h2>全部资产</h2>
         <div class="layout-left__wrapper">
           <div class="layout-left__left">
-            <div @click="subIndex = 0, parentIndex = index" :class="parentIndex === index ? 'active' : ''"
+            <div @click="subIndex = 0, parentIndex = index" :class="{active: parentIndex === index}"
                  v-for="(item, index) in components" :key="index">
               <i class="iconfont iconqiyeguanli"></i>
               <span>{{ item.label }}</span>
@@ -99,154 +99,28 @@
         </div>
       </div>
       <div class="layout-right" @click.stop>
-        <div class="layout-tab" v-if="activeIndex > -1">
-          <span @click="configIndex = 0" :class="[configIndex === 0 ? 'layout-tab__active' : '']">参数</span>
-          <span @click="configIndex = 1" :class="[configIndex === 1 ? 'layout-tab__active' : '']">数据</span>
-        </div>
-        <div class="layout-right__content" v-if="activeIndex > -1">
-          <div class="layout-right__content--wrapper" v-show="configIndex === 0">
-            <div class="layout-config__group">
-              <h2>基础设置</h2>
-              <div class="layout-config__item">
-                <label>图表尺寸</label>
-                <div class="layout-config__item--right">
-                  <el-input-number size="mini" :min="0" v-model="currLayout.width"
-                                   controls-position="right"></el-input-number>
-                  <el-input-number size="mini" :min="0" v-model="currLayout.height"
-                                   controls-position="right"></el-input-number>
-                </div>
-              </div>
-              <div class="layout-config__item">
-                <label>图表位置</label>
-                <div class="layout-config__item--right">
-                  <el-input-number size="mini" :min="0" v-model="currLayout.left"
-                                   controls-position="right"></el-input-number>
-                  <el-input-number size="mini" :min="0" v-model="currLayout.top"
-                                   controls-position="right"></el-input-number>
-                </div>
-              </div>
+        <!-- 选中组件面板-->
+        <template v-if="activeIndex > -1">
+          <div class="layout-tab">
+            <span @click="configIndex = 0" :class="[configIndex === 0 ? 'layout-tab__active' : '']">参数</span>
+            <span @click="configIndex = 1" :class="[configIndex === 1 ? 'layout-tab__active' : '']">数据</span>
+          </div>
+          <div class="layout-right__content">
+            <component-config v-show="configIndex === 0" :config="currLayout" v-bind="$props"/>
+            <div class="layout-right__content--wrapper" v-show="configIndex === 1"
+                 v-if="currLayout.type !== 'title' && currLayout.type !== 'video'">
+              <data-config
+                  ref="dataConfig"
+                  :instance="instance"
+                  :dict="dict"
+                  :options="currLayout"
+                  @change="onChange('barChart')">
+              </data-config>
             </div>
           </div>
-          <div class="layout-right__content--wrapper" v-show="configIndex === 0">
-            <div class="layout-config__group">
-              <h2>组件设置</h2>
-              <div class="layout-config__item layout-config__item--input">
-                <label>标题</label>
-                <div class="layout-config__item--right">
-                  <el-input v-model="currLayout.title" size="mini"></el-input>
-                </div>
-              </div>
-              <div class="layout-config__item layout-config__item--input" v-if="currLayout.display === 'summary2'">
-                <label>标题</label>
-                <div class="layout-config__item--right">
-                  <el-input v-model="currLayout.summaryTitle" size="mini"></el-input>
-                </div>
-              </div>
-              <div class="layout-config__item" v-if="currLayout.type !== 'display'">
-                <label>边框</label>
-                <div class="layout-config__item--right">
-                  <el-select size="mini" v-model="currLayout.border" placeholder="请选择边框" clearable>
-                    <el-option
-                        v-for="(item, index) in borderList"
-                        :key="index"
-                        :label="item"
-                        :value="item">
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="layout-config__item layout-config__item--input" v-if="currLayout.type === 'video'">
-                <label>视频地址</label>
-                <div class="layout-config__item--right">
-                  <el-input v-model="currLayout.src" size="mini"></el-input>
-                </div>
-              </div>
-              <div class="layout-config__item" v-if="currLayout.type === 'monitor'">
-                <label>视频类型</label>
-                <div class="layout-config__item--right">
-                  <el-select size="mini" v-model="currLayout.monitorType" placeholder="请选择" clearable>
-                    <el-option label="中国移动" value="cmcc"></el-option>
-                    <el-option label="海康威视" value="hik"></el-option>
-                    <el-option label="大华" value="dahua"></el-option>
-                    <el-option label="视联网" value="slw"></el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="layout-config__item" v-if="currLayout.type === 'table'">
-                <label>显示排名</label>
-                <div class="layout-config__item--right">
-                  <el-select size="mini" v-model="currLayout.isShowIndex" placeholder="请选择" clearable>
-                    <el-option
-                        v-for="(item, index) in tableStatus"
-                        :key="index"
-                        :label="item.label"
-                        :value="item.value">
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="layout-config__item" v-if="currLayout.type === 'table'">
-                <label>表格行数</label>
-                <div class="layout-config__item--right">
-                  <el-input-number size="mini" style="width: 232px" :min="0" v-model="currLayout.rowNum" controls-position="right"></el-input-number>
-                </div>
-              </div>
-              <template v-if="currLayout.type === 'map'">
-                <div class="layout-config__item">
-                  <label>遮罩层</label>
-                  <div class="layout-config__item--right">
-                    <el-select size="mini" v-model="currLayout.mask" placeholder="请选择" clearable>
-                      <el-option label="是" value="1"></el-option>
-                      <el-option label="否" value="2"></el-option>
-                    </el-select>
-                  </div>
-                </div>
-                <div class="layout-config__item">
-                  <label>选择地区</label>
-                  <div class="layout-config__item--right">
-                    <AiAreaGet :instance="instance" :valueLevel="3" v-model="currLayout.areaId" placeholder="请选择地区"></AiAreaGet>
-                  </div>
-                </div>
-                <div class="layout-config__item">
-                  <label>展示光轨</label>
-                  <div class="layout-config__item--right">
-                    <ai-select v-model="currLayout.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
-                  </div>
-                </div>
-                <div class="layout-config__item layout-config__item--input">
-                  <label>地图样式</label>
-                  <div class="layout-config__item--right">
-                    <el-input size="mini" v-model="currLayout.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
-                  </div>
-                </div>
-              </template>
-              <div class="layout-config__item" v-if="currLayout.type === 'summary'">
-                <label>数据汇总</label>
-                <div class="layout-config__item--right">
-                  <el-select size="mini" v-model="currLayout.display" placeholder="请选择类型" clearable>
-                    <el-option
-                        v-for="(item, index) in summaryList"
-                        :key="index"
-                        :label="item"
-                        :value="item">
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="layout-right__content--wrapper" v-show="configIndex === 1"
-               v-if="currLayout.type !== 'title' && currLayout.type !== 'video'">
-            <data-config
-                ref="dataConfig"
-                :instance="instance"
-                :dict="dict"
-                :options="currLayout"
-                @change="onChange('barChart')">
-            </data-config>
-          </div>
-        </div>
-        <div class="layout-page__setting layout-right__content" v-if="activeIndex === -1">
+        </template>
+        <!--未选中组件,页面设置-->
+        <div class="layout-page__setting layout-right__content" v-else>
           <h2>页面设置</h2>
           <div class="layout-config__group">
             <div class="layout-config__item">
@@ -351,6 +225,7 @@ import VueRulerTool from 'vue-ruler-tool'
 import VueDraggableResizable from 'vue-draggable-resizable'
 import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 import DataConfig from './form/DataConfig.vue'
+import ComponentConfig from "./form/componentConfig";
 
 export default {
   name: "designDashboard",
@@ -396,21 +271,12 @@ export default {
       middleHeight: 0,
       widthScale: 0,
       heightScale: 0,
-      bigscreenScaleInWorkbench: 0,
-      tableStatus: [{
-        label: '是',
-        value: '1'
-      }, {
-        label: '否',
-        value: '0'
-      }],
       images: [],
-      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
-      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
     }
   },
 
   components: {
+    ComponentConfig,
     DataConfig,
     VueRulerTool,
     VueDraggableResizable,
@@ -533,7 +399,7 @@ export default {
 
     onChange(e) {
       if (e.indexOf('Chart') > -1) {
-        this.$refs[`chart${this.activeIndex}`][0].refresh()
+        this.$refs[`chart${this.activeIndex}`]?.[0]?.refresh()
       }
     },
 
@@ -989,6 +855,7 @@ export default {
 
   .layout-middle {
     flex: 1;
+    min-width: 0;
     background: #000;
 
     .canvas-wrapper {
@@ -1078,7 +945,7 @@ export default {
     border-left: 1px solid #000000;
     background: #1D2127;
 
-    ::v-deep .el-input-number {
+    ::v-deep.el-input-number {
       width: 106px;
       margin-right: 20px;
 
@@ -1100,7 +967,7 @@ export default {
       }
     }
 
-    .layout-right__content {
+    ::v-deep.layout-right__content {
       height: calc(100% - 40px);
       overflow-y: overlay;
       overflow-x: hidden;
@@ -1127,7 +994,7 @@ export default {
           margin-bottom: 0;
         }
 
-        ::v-deep .el-select, ::v-deep .el-cascader {
+        .el-select, .el-cascader {
           color: #fff;
           background: transparent;
 
@@ -1170,7 +1037,7 @@ export default {
           }
         }
 
-        &.layout-config__item--input ::v-deep input {
+        &.layout-config__item--input input {
           width: 232px;
           background: #262C33;
           font-size: 12px;
diff --git a/packages/bigscreen/designer/components/form/componentConfig.vue b/packages/bigscreen/designer/components/form/componentConfig.vue
new file mode 100644
index 00000000..d6d34a7e
--- /dev/null
+++ b/packages/bigscreen/designer/components/form/componentConfig.vue
@@ -0,0 +1,163 @@
+<template>
+  <section class="componentConfig">
+    <div class="layout-right__content--wrapper">
+      <div class="layout-config__group">
+        <h2>基础设置</h2>
+        <div class="layout-config__item">
+          <label>图表尺寸</label>
+          <div class="layout-config__item--right">
+            <el-input-number size="mini" :min="0" v-model="config.width" controls-position="right"/>
+            <el-input-number size="mini" :min="0" v-model="config.height" controls-position="right"/>
+          </div>
+        </div>
+        <div class="layout-config__item">
+          <label>图表位置</label>
+          <div class="layout-config__item--right">
+            <el-input-number size="mini" :min="0" v-model="config.left" controls-position="right"/>
+            <el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="layout-right__content--wrapper">
+      <div class="layout-config__group">
+        <h2>组件设置</h2>
+        <div class="layout-config__item layout-config__item--input">
+          <label>标题</label>
+          <div class="layout-config__item--right">
+            <el-input v-model="config.title" size="mini"></el-input>
+          </div>
+        </div>
+        <div class="layout-config__item layout-config__item--input" v-if="config.display === 'summary2'">
+          <label>标题</label>
+          <div class="layout-config__item--right">
+            <el-input v-model="config.summaryTitle" size="mini"></el-input>
+          </div>
+        </div>
+        <div class="layout-config__item" v-else-if="config.type !== 'display'">
+          <label>边框</label>
+          <div class="layout-config__item--right">
+            <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
+              <el-option
+                  v-for="(item, index) in borderList"
+                  :key="index"
+                  :label="item"
+                  :value="item">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="layout-config__item layout-config__item--input" v-else-if="config.type === 'video'">
+          <label>视频地址</label>
+          <div class="layout-config__item--right">
+            <el-input v-model="config.src" size="mini"></el-input>
+          </div>
+        </div>
+        <div class="layout-config__item" v-if="config.type === 'monitor'">
+          <label>视频类型</label>
+          <div class="layout-config__item--right">
+            <el-select size="mini" v-model="config.monitorType" placeholder="请选择" clearable>
+              <el-option label="中国移动" value="cmcc"></el-option>
+              <el-option label="海康威视" value="hik"></el-option>
+              <el-option label="大华" value="dahua"></el-option>
+              <el-option label="视联网" value="slw"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <template v-else-if="config.type === 'table'">
+          <div class="layout-config__item">
+            <label>显示排名</label>
+            <div class="layout-config__item--right">
+              <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
+                <el-option
+                    v-for="(item, index) in tableStatus"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="layout-config__item">
+            <label>表格行数</label>
+            <div class="layout-config__item--right">
+              <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="config.type === 'map'">
+          <div class="layout-config__item">
+            <label>遮罩层</label>
+            <div class="layout-config__item--right">
+              <el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
+                <el-option label="是" value="1"></el-option>
+                <el-option label="否" value="2"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="layout-config__item">
+            <label>选择地区</label>
+            <div class="layout-config__item--right">
+              <AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
+            </div>
+          </div>
+          <div class="layout-config__item">
+            <label>展示光轨</label>
+            <div class="layout-config__item--right">
+              <ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
+            </div>
+          </div>
+          <div class="layout-config__item layout-config__item--input">
+            <label>地图样式</label>
+            <div class="layout-config__item--right">
+              <el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
+            </div>
+          </div>
+        </template>
+        <div class="layout-config__item" v-if="config.type === 'summary'">
+          <label>数据汇总</label>
+          <div class="layout-config__item--right">
+            <el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
+              <el-option
+                  v-for="(item, index) in summaryList"
+                  :key="index"
+                  :label="item"
+                  :value="item">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "componentConfig",
+  props: {
+    config: {default: () => ({})},
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5'],//边框待选项
+      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],//汇总待选项
+      //是否显示排名
+      tableStatus: [
+        {label: '是', value: '1'},
+        {label: '否', value: '0'}
+      ],
+    }
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.componentConfig {
+}
+</style>
diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js
index 14c874bf..907f6003 100644
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -524,7 +524,7 @@ const components = [
             left: 0,
             top: 0,
             mask: '2',
-            pulseLines: 1,
+            pulseLines: '1',
             mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
             areaId: '',
             zIndex: 1,
@@ -536,9 +536,6 @@ const components = [
                 content: '中卫慧通',
                 lng: 117.1339399,
                 lat: 36.7190487,
-                地区: '中卫慧通',
-                经度: 117.1339399,
-                纬度: 36.7190487
               }
             ],
             api: '',