大屏地图以及飞线图下钻优化

data-room-ui/packages/BasicComponents/FlyMap/index.vue

@@ -3,6 +3,7 @@
     style="width: 100%; height: 100%"
     class="bs-design-wrap bs-bar"
   >
+  <el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -33,7 +34,8 @@ export default {
     return {
       charts: null,
       hasData: false,
-      level:''
+      level:'',
+      option:{}
     }
   },
   computed: {
@@ -85,6 +87,15 @@ export default {
       }
       return config
     },
+    async jumpTo(config){
+      this.level='country'
+      const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      this.option.geo.map = '中华人民共和国';
+      this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
+      echarts.registerMap('中华人民共和国', map);
+      this.charts.setOption(this.option, true);
+    },
     async newChart (config) {
       this.charts = echarts.init(
         document.getElementById(`chart${this.config.code}`)
@@ -106,10 +117,10 @@ export default {
           }
         })
         echarts.registerMap(config.customize.scope, res)
-        const option = {
+        this.option = {
           nameMap:config.customize.level=='world'?nameMap:'',
-          graphic: [
-          ],
+          // graphic: [
+          // ],
           geo: {
             map: config.customize.scope,
             zlevel: 10,
@@ -228,7 +239,7 @@ export default {
           ]
         }
         if (config.customize.visual) {
-          option.visualMap = {
+          this.option.visualMap = {
             show: false,
             min: config.customize.range[0],
             max: config.customize.range[1],
@@ -238,69 +249,17 @@ export default {
             }
           }
         }
-        if(config.customize.down){
-            // config?.customize?.graphic?.forEach((item,index)=>{
-            option.graphic.push({
-              type: "text",
-              left: `250px`,
-              top: "5%",
-              style: {
-                  text: '中国',
-                  font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                  fill: config.customize.fontGraphicColor,
-              },
-              onclick:async()=>{
-                this.level='country'
-                const index = option.graphic.findIndex(i => i.style.text === '中国');
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                option.geo.map = '中华人民共和国'
-                this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
-                echarts.registerMap('中华人民共和国', map);
-                this.charts.setOption(option, true);
-
-              }
-            },)
-          // })
-          }
-        this.charts.setOption(option)
+        this.charts.setOption(this.option)
          this.charts.on('click',  async(params)=> {
-          const index = option.graphic.findIndex(i => i.style.text === params.name);
-          if(params.name=='' || index !== -1) return
+          if(params.name=='') return
           if(config.customize.down===false||this.level==='province') return
-          const idx = option.graphic.length + 1;
-          option.graphic.push({
-            type: "text",
-            left: `${idx * 250}px`,
-            top: "5%",
-            style: {
-                text: params.name,
-                font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                fill: config.customize.fontGraphicColor,
-            },
-            onclick: async() => {
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                // 利用函数的作用域，可以直接拿上面的name来用
-                const index = option.graphic.findIndex(i => i.style.text === params.name);
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                // 很多操作重复了，你可以将公共部分抽离出来
-                option.geo.map = params.name;
-                this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-                echarts.registerMap(params.name, map);
-                this.charts.setOption(option, true);
-            },
-        });
           this.level='province'
           const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
           const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
           this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-          option.geo.map = params.name
+          this.option.geo.map = params.name
           echarts.registerMap(params.name, map);
-          this.charts.setOption(option, true);
+          this.charts.setOption(this.option, true);
           });
       })
     }
@@ -317,4 +276,11 @@ export default {
 .auto-theme {
   background-color: rgba(0, 0, 0, 0);
 }
+.bs-design-wrap{
+  position: relative;
+  .button{
+    position: absolute;
+    z-index: 999;
+  }
+}
 </style>

data-room-ui/packages/BasicComponents/FlyMap/setting.vue

@@ -69,6 +69,7 @@
             v-model="config.customize.dataMap"
             popper-class="bs-el-select"
             class="bs-el-select"
+            @change="changeMap"
           >
             <el-option
               v-for="map in mapList"
@@ -89,7 +90,7 @@
             active-color="#007aff"
           />
         </el-form-item>
-        <el-form-item
+        <!-- <el-form-item
           v-if="config.customize.down"
           label="头部字体颜色"
           label-width="100px"
@@ -110,7 +111,7 @@
             controls-position="right"
             :step="1"
           />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item
           label="地图分割线颜色"
           label-width="100px"
@@ -369,15 +370,21 @@ export default {
       this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
         this.mapList = res
       })
+    },
+     changeMap(val){
+      this.config.customize.scope=val.slice(0,-5)
     },
     changeLevel () {
       if (this.config.customize.level === 'country') {
         this.config.customize.dataMap = '中华人民共和国.json'
+        this.config.customize.scope='中国'
       } else if (this.config.customize.level === 'province') {
         this.getMapList()
         this.config.customize.dataMap = '安徽省.json'
+        this.config.customize.scope='安徽省'
         this.config.customize.down=false
       }else{
+        this.config.customize.scope='世界'
         this.config.customize.down=false
       }
     },

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -3,6 +3,7 @@
     style="width: 100%; height: 100%"
     class="bs-design-wrap bs-bar"
   >
+  <el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -32,7 +33,8 @@ export default {
     return {
       charts: null,
       hasData: false,
-      level:''
+      level:'',
+      option:{}
     }
   },
   computed: {
@@ -88,11 +90,20 @@ export default {
       }
       return config
     },
+    async jumpTo(config){
+      this.level='country'
+      const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      this.option.geo.map = '中华人民共和国';
+      this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
+      echarts.registerMap('中华人民共和国', map);
+      this.charts.setOption(this.option, true);
+    },
     async newChart (config) {
       this.charts = echarts.init(
         document.getElementById(`chart${this.config.code}`)
       )
-      const option = {
+      this.option = {
         // 背景颜色
         backgroundColor: config.customize.backgroundColor,
         graphic: [
@@ -252,7 +263,7 @@ export default {
             ]
       }
       if (config.customize.visual) {
-        option.visualMap = {
+        this.option.visualMap = {
           show: true,
           min: config.customize.range[0],
           max: config.customize.range[1],
@@ -262,72 +273,20 @@ export default {
           }
         }
       }
-      if(config.customize.down){
-            // config?.customize?.graphic?.forEach((item,index)=>{
-            option.graphic.push({
-              type: "text",
-              left: `220px`,
-              top: "5%",
-              style: {
-                  text: '中国',
-                  font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                  fill: config.customize.fontGraphicColor,
-              },
-              onclick:async()=>{
-                this.level='country'
-                const index = option.graphic.findIndex(i => i.style.text === '中国');
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                option.geo.map = '中华人民共和国'
-                this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
-                echarts.registerMap('中华人民共和国', map);
-                this.charts.setOption(option, true);
-
-              }
-            },)
-          // })
-          }
       const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
       const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
       echarts.registerMap(config.customize.scope, map)
-      this.charts.setOption(option)
+      this.charts.setOption(this.option)
       this.charts.on('click',  async(params)=> {
-          const index = option.graphic.findIndex(i => i.style.text === params.name);
-          if(params.name=='' || index !== -1) return
+          if(params.name=='') return
           if(config.customize.down===false||this.level==='province') return
-          const idx = option.graphic.length + 1;
-          option.graphic.push({
-            type: "text",
-            left: `${idx * 220}px`,
-            top: "5%",
-            style: {
-                text: params.name,
-                font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                fill: config.customize.fontGraphicColor,
-            },
-            onclick: async() => {
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                // 利用函数的作用域，可以直接拿上面的name来用
-                const index = option.graphic.findIndex(i => i.style.text === params.name);
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                // 很多操作重复了，你可以将公共部分抽离出来
-                option.geo.map = params.name;
-                this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-                echarts.registerMap(params.name, map);
-                this.charts.setOption(option, true);
-            },
-        });
           this.level='province'
           const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
           const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
           this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-          option.geo.map = params.name
+          this.option.geo.map = params.name
           echarts.registerMap(params.name, map);
-          this.charts.setOption(option, true);
+          this.charts.setOption(this.option, true);
           });
     }
   }
@@ -343,4 +302,11 @@ export default {
 .auto-theme {
   background-color: rgba(0, 0, 0, 0);
 }
+.bs-design-wrap{
+  position: relative;
+  .button{
+    position: absolute;
+    z-index: 999;
+  }
+}
 </style>

data-room-ui/packages/BasicComponents/Map/setting.vue

@@ -65,6 +65,7 @@
             v-model="config.customize.dataMap"
             popper-class="bs-el-select"
             class="bs-el-select"
+            @change="changeMap()"
           >
             <el-option
               v-for="map in mapList"
@@ -307,14 +308,20 @@ export default {
         this.mapList = res
       })
     },
+    changeMap(val){
+      this.config.customize.scope=val.slice(0,-5)
+    },
     changeLevel () {
       this.getMapList()
       if (this.config.customize.level === 'country') {
         this.config.customize.dataMap = '中华人民共和国.json'
+        this.config.customize.scope='中国'
       } else if (this.config.customize.level === 'province') {
         this.config.customize.dataMap = '安徽省.json'
+        this.config.customize.scope='安徽省'
         this.config.customize.down=false
       }else{
+        this.config.customize.scope='世界'
         this.config.customize.down=false
       }
     },

data-room-ui/packages/js/mixins/commonMixins.js

@@ -117,10 +117,20 @@ export default {
      * @description: 更新chart
      * @param {Object} config
      */
-    changeData (config, filterList) {
+    changeData(config, filterList) {
+      const list = config?.paramsList?.map((item) => {
+        if (item.value === '${level}') {
+          return {...item,value:config.customize.level}
+        } else if (item.value === '${name}') {
+          return {...item,value:config.customize.scope}
+        } else {
+          return item
+        }
+      })
       const params = {
         chart: {
           ...config,
+          paramsList:list?[...list]:[],
           option: undefined
         },
         current: 1,