feat: 地图、飞线地图组件优化，修改地图GEO获取方式，新增地图数据管理路由

地图、飞线地图组件优化，修改地图GEO获取方式，新增地图数据管理路由

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

@@ -1,9 +1,9 @@
 <template>
   <div
-    style="width: 100%; height: 100%"
     class="bs-design-wrap bs-bar"
+    style="width: 100%; height: 100%"
   >
-  <el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
+    <el-button v-if="currentDeep > 0" class="button" type='text' @click="jumpTo(config)"> 返回上一级</el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -17,6 +17,7 @@ import {nameMap} from './json/mapData.js'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+
 export default {
   name: 'MapCharts',
   mixins: [paramsMixins, commonMixins, linkageMixins],
@@ -35,7 +36,9 @@ export default {
       charts: null,
       hasData: false,
       level: '',
-      option:{}
+      option: {},
+      mapList: [],
+      currentDeep: 0,
     }
   },
   computed: {
@@ -71,7 +74,8 @@ export default {
           // 改变样式
           // config = this.changeStyle(res)
           this.newChart(config)
-        }).catch(() => {})
+        }).catch(() => {
+        })
       } else {
         // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
         this.changeData(config).then((res) => {
@@ -88,12 +92,14 @@ export default {
       return config
     },
     async jumpTo(config) {
-      this.level='country'
+      this.currentDeep--
-      const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      let map = this.mapList[this.currentDeep]
-      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      // 移除mapList中的最后一个元素
-      this.option.geo.map = '中华人民共和国';
+      this.mapList.pop()
-      this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
+      let mapData = JSON.parse(map.geoJson)
-      echarts.registerMap('中华人民共和国', map);
+      this.option.geo.map = map.name;
+      this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
+      echarts.registerMap(map.name, mapData);
       this.charts.setOption(this.option, true);
     },
     async newChart(config) {
@@ -104,8 +110,17 @@ export default {
       const lines_coord = []
       let fromCoord = []
       let coord = []
-      const mapUrl =config.customize.level==='world'?`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/worldMap/world.json`:`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
+
-      this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true).then(res=>{
+      let hasMapId = !!config.customize.mapId
+
+      // 根据mapId获取地图数据
+      let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
+      // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
+      if (!hasMapId) {
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/worldMap/world.json`
+      }
+      this.$dataRoomAxios.get(mapInfoUrl, {}, true).then(res => {
+        if (this.config.option.data) {
           this.config.option.data.forEach(val => {
             lines_coord.push({value: val.value, msg: {...val}, coords: [[val.lat1, val.lng1], [val.lat2, val.lng2]]})
             if (val.type === 'move_in') {
@@ -116,9 +131,21 @@ export default {
               fromCoord.push({name: val.from, value: [val.lat1, val.lng1, val.value], msg: {...val}})
             }
           })
-        echarts.registerMap(config.customize.scope, res)
+        }
+        let mapData = hasMapId ? JSON.parse(res.data.geoJson) : res
+        if (hasMapId && res.data.uploadedGeoJson !== 1) {
+          // 没有上传过geoJson
+          this.$message({
+            message: '请先上传地图数据',
+            type: 'warning'
+          })
+          return
+        }
+
+        this.mapList.push(res.data)
+        echarts.registerMap(config.customize.scope, mapData)
         this.option = {
-          nameMap:config.customize.level=='world'?nameMap:'',
+          nameMap: config.customize.level == '0' ? nameMap : '',
           // graphic: [
           // ],
           geo: {
@@ -226,12 +253,19 @@ export default {
                 },
               },
               effect: {
-                    show: true, period: 5, trailLength: 0, symbol: config.customize.symbol,  color:config.customize.symbolColor,symbolSize: config.customize.symbolSize,
+                show: true,
+                period: 5,
+                trailLength: 0,
+                symbol: config.customize.symbol,
+                color: config.customize.symbolColor,
+                symbolSize: config.customize.symbolSize,
               },
               lineStyle: {
-                  normal: {color: function(value){
+                normal: {
+                  color: function (value) {
                     return '#ffffff'
-                  },width: 2, opacity: 0.6, curveness: 0.2 }
+                  }, width: 2, opacity: 0.6, curveness: 0.2
+                }
               },
               data: lines_coord
             }
@@ -250,15 +284,33 @@ export default {
           }
         }
         this.charts.setOption(this.option)
+        // 点击下钻
         this.charts.on('click', async (params) => {
           if (params.name == '') return
-          if(config.customize.down===false||this.level==='province') return
+          if (!config.customize.down) {
-          this.level='province'
+            this.$message({
-          const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
+              message: '该地图未开启下钻',
-          const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+              type: 'warning'
-          this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
+            })
+            return
+          }
+          // 到达允许下钻的层数，则不再下钻
+          if (this.currentDeep >= config.customize.downLevel) return
+          const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
+          const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, false)
+          // 地图不可用
+          if (map.available !== 1) {
+            this.$message({
+              message: '未找到该地图配置',
+              type: 'warning'
+            })
+            return
+          }
+          this.currentDeep++
+          this.mapList.push(map)
+          this.changeData({...config, customize: {...config.customize, scope: params.name}})
           this.option.geo.map = params.name
-          echarts.registerMap(params.name, map);
+          echarts.registerMap(params.name, JSON.parse(map.geoJson));
           this.charts.setOption(this.option, true);
         });
       })
@@ -269,16 +321,20 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/style/echartStyle';
+
 .light-theme {
   background-color: #ffffff;
   color: #000000;
 }
+
 .auto-theme {
   background-color: rgba(0, 0, 0, 0);
 }
+
 .bs-design-wrap {
   padding: 0 16px;
   position: relative;
+
   .button {
     position: absolute;
     z-index: 999;

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

@@ -55,40 +55,56 @@
             @change="changeLevel()"
           >
            <el-option
-              label="世界"
+              v-for="level in levelList"
-              value="world"
+              :key="level.value"
-            />
+              :label="level.label"
-            <el-option
+              :value="level.value"
-              label="国家"
-              value="country"
-            />
-            <el-option
-              label="省份"
-              value="province"
             />
           </el-select>
         </el-form-item>
+
+
         <el-form-item
-          v-if="config.customize.level == 'province'"
+          label="地图"
-          label="地图显示区域"
           label-width="100px"
         >
-          <el-select
+          <el-cascader
-            v-model="config.customize.dataMap"
+            ref="cascade"
-            popper-class="bs-el-select"
+            v-model="config.customize.mapId"
-            class="bs-el-select"
+            popper-class="bs-el-cascader"
-            @change="changeMap"
+            :options="mapTree"
-          >
+            :props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
-            <el-option
+            @change="mapSelect">
-              v-for="map in mapList"
+
-              :key="map.name"
+            <template slot-scope="{ node, data }">
-              :label="map.name"
+              <span style="float: left">{{ data.name }}</span>
-              :value="map.url"
+              <span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> 未配置 </span>
-            />
+            </template>
-          </el-select>
+          </el-cascader>
+
         </el-form-item>
+
+
+<!--        <el-form-item-->
+<!--          v-if="config.customize.level == 'province'"-->
+<!--          label="地图显示区域"-->
+<!--          label-width="100px"-->
+<!--        >-->
+<!--          <el-select-->
+<!--            v-model="config.customize.dataMap"-->
+<!--            popper-class="bs-el-select"-->
+<!--            class="bs-el-select"-->
+<!--            @change="changeMap"-->
+<!--          >-->
+<!--            <el-option-->
+<!--              v-for="map in mapList"-->
+<!--              :key="map.name"-->
+<!--              :label="map.name"-->
+<!--              :value="map.url"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
         <el-form-item
-          v-if="config.customize.level == 'country'"
           label="是否开启下钻"
           label-width="100px"
         >
@@ -98,6 +114,24 @@
             active-color="#007aff"
           />
         </el-form-item>
+        <el-form-item
+          v-if="config.customize.down"
+          label="允许下钻层级"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.downLevel"
+            popper-class="bs-el-select"
+            class="bs-el-select">
+            <el-option
+              v-for="level in downLevelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+          </el-select>
+        </el-form-item>
+
         <!-- <el-form-item
           v-if="config.customize.down"
           label="头部字体颜色"
@@ -323,7 +357,9 @@ export default {
   props: {},
   data () {
     return {
+      mapTree: [],
       mapList: [],
+      currentMap: {},
       predefineThemeColors: [
         '#007aff',
         '#1aa97b',
@@ -352,7 +388,27 @@ export default {
           name:'无',
           value:'none'
         }
-      ]
+      ],
+      levelList: [
+        {value: '0', label: '世界'},
+        {value: '1', label: '国家'},
+        {value: '2', label: '省份'},
+        {value: '3', label: '城市'},
+        {value: '4', label: '区县'}
+      ],
+      // 旧版本地图等级，该数据用于兼容旧版本
+      oldLevelMap: {
+        'world' : '0',
+        'country' : '1',
+        'province' : '2',
+      },
+      downLevelList: [
+        {value: 1, label: '下钻一层'},
+        {value: 2, label: '下钻两层'},
+        {value: 3, label: '下钻三层'},
+        {value: 4, label: '下钻四层'},
+        {value: 5, label: '下钻五层'}
+      ],
     }
   },
   computed: {
@@ -366,37 +422,40 @@ export default {
     }
   },
   watch: {
-    'config.customize.level': {
+    // 'config.customize.level': {
-      handler (val) {
+    //   handler (val) {
-        this.getMapList()
+    //     this.getMapList()
-      }
+    //   }
-    }
+    // }
   },
   mounted () {
-    this.getMapList()
+    // this.getMapList()
+    this.getMapTree()
   },
   methods: {
     getMapList () {
       this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
         this.mapList = res
       })
+    },
+    getMapTree() {
+      const levelConst = ['0', '1', '2', '3', '4']
+      if (!levelConst.includes(this.config.customize.level)) {
+        this.config.customize.level = this.oldLevelMap[this.config.customize.level] || '0'
+      }
+      this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/tree/${this.config.customize.level}`).then((res) => {
+        this.mapTree = res
+      })
+    },
+    mapSelect (mapId) {
+      let mapData = this.$refs['cascade'].getCheckedNodes()[0].data
+      this.currentMap = mapData
     },
      changeMap(val){
       this.config.customize.scope=val.slice(0,-5)
     },
     changeLevel () {
-      if (this.config.customize.level === 'country') {
+      this.getMapTree()
-        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
-      }
     },
     delColor () {
       this.colors = []
@@ -431,4 +490,5 @@ export default {
 .lc-field-body {
   padding: 12px 16px;
 }
+
 </style>

data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js

@@ -41,6 +41,8 @@ const customConfig = {
     contribution: false
   },
   customize: {
+    // 地图id
+    mapId: '',
     // 是否显示文字
     mapName: false,
     // 悬浮框背景色
@@ -62,6 +64,8 @@ const customConfig = {
     fontSize:'30',
     // 是否开启下钻
     down: false,
+    // 允许下钻的层级
+    downLevel: 1,
     // 轨迹图像
     symbol: 'arrow',
     // 轨迹颜色
@@ -69,7 +73,7 @@ const customConfig = {
     // 轨迹大小
     symbolSize:8,
     // 地图级别
-    level: 'country',
+    level: 1,
     // 范围
     scope: '中国',
     // 地图区域颜色

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

@@ -1,9 +1,9 @@
 <template>
   <div
-    style="width: 100%; height: 100%"
     class="bs-design-wrap bs-bar"
+    style="width: 100%; height: 100%"
   >
-  <el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
+    <el-button v-if="currentDeep > 0" class="button" type='text' @click="jumpTo(config)"> 返回上一级</el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -16,6 +16,7 @@ import * as echarts from 'echarts'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+
 export default {
   name: 'MapCharts',
   mixins: [paramsMixins, commonMixins, linkageMixins],
@@ -31,6 +32,8 @@ export default {
   },
   data() {
     return {
+      currentDeep: 0,
+      mapList: [],
       charts: null,
       hasData: false,
       level: '',
@@ -70,7 +73,8 @@ export default {
           // 改变样式
           // config = this.changeStyle(res)
           this.newChart(config)
-        }).catch(() => {})
+        }).catch(() => {
+        })
       } else {
         // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
         this.changeData(config).then((res) => {
@@ -82,7 +86,10 @@ export default {
     dataFormatting(config, data) {
       const dataList = []
       data?.data?.forEach(item => {
-        dataList.push({ name: item[config.customize.name], value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]] })
+        dataList.push({
+          name: item[config.customize.name],
+          value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]]
+        })
       })
       config.option = {
         ...config.option,
@@ -91,31 +98,35 @@ export default {
       return config
     },
     async jumpTo(config) {
-      this.level='country'
+      this.currentDeep--
-      const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      let map = this.mapList[this.currentDeep]
-      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      // 移除mapList中的最后一个元素
-      this.option.geo.map = '中华人民共和国';
+      this.mapList.pop()
-      this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
+      let mapData = JSON.parse(map.geoJson)
-      echarts.registerMap('中华人民共和国', map);
+      this.option.geo.map = map.name;
+      this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
+      echarts.registerMap(map.name, mapData);
       this.charts.setOption(this.option, true);
     },
     async newChart(config) {
+      let center1 = config.customize.center1 ? config.customize.center1 + '%' : '50%'
+      let center2 = config.customize.center2 ? config.customize.center2 + '%' : '50%'
       this.charts = echarts.init(
         document.getElementById(`chart${this.config.code}`)
       )
       this.option = {
         // 背景颜色
         backgroundColor: config.customize.backgroundColor,
-        graphic: [
+        graphic: [],
-          ],
         geo: {
           map: config.customize.scope,
-          zlevel: 10,
+          zlevel: 9,
           show: true,
-          layoutCenter: ['50%', '50%'],
+          // 地图中心点位置
+          layoutCenter: [center1, center2],
           roam: true,
           layoutSize: "100%",
-          zoom: 1,
+          zoom: config.customize.zoom || 1,
           label: {
             // 通常状态下的样式
             normal: {
@@ -218,7 +229,7 @@ export default {
                 brushType: 'stroke'
               },
               hoverAnimation: true,
-                zlevel: 1,
+              zlevel: 11,
               // 这里渲染标志里的内容以及样式
               label: {
                 show: true,
@@ -273,19 +284,53 @@ export default {
           }
         }
       }
-      const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
+      let hasMapId = !!config.customize.mapId
-      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      // 根据mapId获取地图数据
+      let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
+      // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
+      if (!hasMapId) {
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      }
+      const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
+      const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp
+      if (hasMapId && mapResp.data.uploadedGeoJson !== 1) {
+        // 没有上传过geoJson
+        this.$message({
+          message: '请先上传地图数据',
+          type: 'warning'
+        })
+        return
+      }
+      this.mapList.push(mapResp.data)
       echarts.registerMap(config.customize.scope, map)
       this.charts.setOption(this.option)
+      // 点击下钻
       this.charts.on('click', async (params) => {
         if (params.name == '') return
-          if(config.customize.down===false||this.level==='province') return
+        if (!config.customize.down) {
-          this.level='province'
+          this.$message({
-          const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
+            message: '该地图未开启下钻',
-          const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+            type: 'warning'
-          this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
+          })
+          return
+        }
+        // 到达允许下钻的层数，则不再下钻
+        if (this.currentDeep >= config.customize.downLevel) return
+        const downMapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
+        const downMap = await this.$dataRoomAxios.get(decodeURI(downMapUrl), {}, false)
+        // 地图不可用
+        if (downMap.available !== 1) {
+          this.$message({
+            message: '未找到该地图配置',
+            type: 'warning'
+          })
+          return
+        }
+        this.currentDeep++
+        this.mapList.push(downMap)
+        this.changeData({...config, customize: {...config.customize, scope: params.name}})
         this.option.geo.map = params.name
-          echarts.registerMap(params.name, map);
+        echarts.registerMap(params.name, JSON.parse(downMap.geoJson));
         this.charts.setOption(this.option, true);
       });
     }
@@ -295,16 +340,20 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/style/echartStyle';
+
 .light-theme {
   background-color: #ffffff;
   color: #000000;
 }
+
 .auto-theme {
   background-color: rgba(0, 0, 0, 0);
 }
+
 .bs-design-wrap {
   position: relative;
   padding: 0 16px;
+
   .button {
     position: absolute;
     z-index: 999;

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

@@ -55,36 +55,33 @@
             @change="changeLevel()"
           >
             <el-option
-              label="国家"
+              v-for="level in levelList"
-              value="country"
+              :key="level.value"
-            />
+              :label="level.label"
-            <el-option
+              :value="level.value"
-              label="省份"
-              value="province"
             />
           </el-select>
         </el-form-item>
         <el-form-item
-          v-if="config.customize.level == 'province'"
+          label="地图"
-          label="地图显示区域"
           label-width="100px"
         >
-          <el-select
+          <el-cascader
-            v-model="config.customize.dataMap"
+            ref="cascade"
-            popper-class="bs-el-select"
+            v-model="config.customize.mapId"
-            class="bs-el-select"
+            popper-class="bs-el-cascader"
-            @change="changeMap()"
+            :options="mapTree"
-          >
+            :props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
-            <el-option
+            @change="mapSelect">
-              v-for="map in mapList"
+
-              :key="map.name"
+            <template slot-scope="{ node, data }">
-              :label="map.name"
+              <span style="float: left">{{ data.name }}</span>
-              :value="map.url"
+              <span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> 未配置 </span>
-            />
+            </template>
-          </el-select>
+          </el-cascader>
+
         </el-form-item>
         <el-form-item
-          v-if="config.customize.level == 'country'"
           label="是否开启下钻"
           label-width="100px"
         >
@@ -94,6 +91,59 @@
             active-color="#007aff"
           />
         </el-form-item>
+        <el-form-item
+          label="比例"
+          label-width="100px"
+        >
+          <el-slider
+            v-model="config.customize.zoom"
+            class="bs-el-slider-dark"
+            :step="0.1"
+            :min="0.1"
+            :max="5"
+          ></el-slider>
+        </el-form-item>
+        <el-form-item
+          label="中心点x轴位置"
+          label-width="100px"
+        >
+          <el-slider
+            class="bs-el-slider-dark"
+            v-model="config.customize.center1"
+            :step="1"
+            :min="1"
+            :max="100"
+          ></el-slider>
+        </el-form-item>
+        <el-form-item
+          label="中心点y轴位置"
+          label-width="100px"
+        >
+          <el-slider
+            class="bs-el-slider-dark"
+            v-model="config.customize.center2"
+            :step="1"
+            :min="1"
+            :max="100"
+          ></el-slider>
+        </el-form-item>
+        <el-form-item
+          v-if="config.customize.down"
+          label="允许下钻层级"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.downLevel"
+            popper-class="bs-el-select"
+            class="bs-el-select">
+            <el-option
+              v-for="level in downLevelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item
           v-if="config.customize.down"
           label="头部字体颜色"
@@ -295,7 +345,29 @@ export default {
         '#2B74CF',
         '#00BC9D',
         '#ED7D32'
-      ]
+      ],
+      mapTree: [],
+      currentMap: {},
+      levelList: [
+        {value: '0', label: '世界'},
+        {value: '1', label: '国家'},
+        {value: '2', label: '省份'},
+        {value: '3', label: '城市'},
+        {value: '4', label: '区县'}
+      ],
+      // 旧版本地图等级，该数据用于兼容旧版本
+      oldLevelMap: {
+        'world' : '0',
+        'country' : '1',
+        'province' : '2',
+      },
+      downLevelList: [
+        {value: 1, label: '下钻一层'},
+        {value: 2, label: '下钻两层'},
+        {value: 3, label: '下钻三层'},
+        {value: 4, label: '下钻四层'},
+        {value: 5, label: '下钻五层'}
+      ],
     }
   },
   computed: {
@@ -310,30 +382,27 @@ export default {
   },
   watch: {},
   mounted () {
-    this.getMapList()
+    this.getMapTree()
   },
   methods: {
-    getMapList () {
+    getMapTree() {
-      this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
+      const levelConst = ['0', '1', '2', '3', '4']
-        this.mapList = res
+      if (!levelConst.includes(this.config.customize.level)) {
+        this.config.customize.level = this.oldLevelMap[this.config.customize.level] || '0'
+      }
+      this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/tree/${this.config.customize.level}`).then((res) => {
+        this.mapTree = res
       })
     },
+    mapSelect (mapId) {
+      let mapData = this.$refs['cascade'].getCheckedNodes()[0].data
+      this.currentMap = mapData
+    },
     changeMap(val){
       this.config.customize.scope=val.slice(0,-5)
     },
     changeLevel () {
-      this.getMapList()
+      this.getMapTree()
-      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
-      }
     },
     delColor () {
       this.colors = []
@@ -368,4 +437,10 @@ export default {
 .lc-field-body {
   padding: 12px 16px;
 }
+/deep/.bs-el-slider-dark {
+
+  .el-slider__runway {
+    background-color: var(--bs-el-background-1) !important;
+  }
+}
 </style>

data-room-ui/packages/BasicComponents/Map/settingConfig.js

@@ -41,6 +41,11 @@ const customConfig = {
     contribution: false
   },
   customize: {
+    mapId: '',
+    // 缩放尺寸
+    zoom: 1,
+    center1: 50,
+    center2: 50,
     // 是否显示文字
     mapName: true,
     // 地图背景色
@@ -61,8 +66,10 @@ const customConfig = {
     fontSize: '30',
     // 是否开启下钻
     down: false,
+    // 允许下钻的层级
+    downLevel: 1,
     // 地图级别
-    level: 'country',
+    level: 1,
     // 范围
     scope: '中国',
     // 地图区域颜色

data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue

@@ -114,12 +114,12 @@ export default {
           path: window?.BS_CONFIG?.routers?.dataSetUrl || '/big-screen-dataSet',
           icon: 'icon-data'
         },
-        // {
+        {
-        //   id: 5,
+          id: 5,
-        //   name: '地图数据管理',
+          name: '地图数据管理',
-        //   path: '/big-screen-map-data',
+          path: '/big-screen-map-data',
-        //   icon: 'icon-data'
+          icon: 'icon-data'
-        // }
+        }
       ]
     }
   },

data-room-ui/packages/MapDataManagement/src/AddForm.vue

@@ -37,20 +37,35 @@
           />
         </el-form-item>
         <el-form-item
-          label="地图编码"
+          label="地图标识"
           prop="mapCode"
         >
+          <template slot="label">
+            <span>地图标识</span>
+            <el-tooltip
+              v-if="mapForm.parentId !== '0'"
+              class="item"
+              effect="light"
+              content="子级的地图标识解析自上级地图的子区块数据"
+              placement="top"
+            >
+              <i
+                class="el-icon-warning-outline"
+                style="color: #E3C98C;margin-left: 6px;font-size:14px"
+              />
+            </el-tooltip>
+          </template>
           <el-input
             v-if="mapForm.parentId === '0'"
             v-model="mapForm.mapCode"
             class="bs-el-input"
-            placeholder="请输入地图编码"
+            placeholder="请输入地图标识"
           />
           <el-select
             v-else
             v-model="mapForm.mapCode"
             class="bs-el-select"
-            placeholder="请选择地图编码"
+            placeholder="请选择地图标识"
             popper-class="bs-el-select"
           >
             <el-option
@@ -84,17 +99,6 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          label="开启下钻"
-          prop="enableDown"
-        >
-          <el-switch
-            v-model="mapForm.enableDown"
-            :active-value="1"
-            :inactive-value="0"
-            class="bs-el-switch"
-          />
-        </el-form-item>
         <el-form-item
           label="geoJson上传"
         >
@@ -165,8 +169,8 @@ export default {
   },
   computed: {
     autoParseNextLevelShow () {
-      // geoJson 不为空，且支持下钻
+      // geoJson 不为空
-      return !this.isEmpty(this.mapForm.geoJson) && this.mapForm.enableDown === 1
+      return !this.isEmpty(this.mapForm.geoJson)
     }
   },
   data () {
@@ -174,13 +178,14 @@ export default {
       if (this.mapForm.parentId !== '0') {
         // 不需要校验
         callback()
+        return
       }
       repeatCheck({
         parentId: this.mapForm.parentId,
         mapCode: value
       }).then(res => {
         if (res) {
-          callback(new Error('地图编码已存在'))
+          callback(new Error('地图标识已存在'))
         } else {
           callback()
         }
@@ -197,14 +202,13 @@ export default {
         mapCode: '',
         name: '',
         level: 0,
-        enableDown: 0,
         geoJson: {},
         uploadedGeoJson: 0,
         autoParseNextLevel: 0
       },
       rules: {
         mapCode: [
-          { required: true, message: '请选择地图编码', trigger: 'blur' },
+          { required: true, message: '请选择地图标识', trigger: 'blur' },
           { validator: validateCode, trigger: 'blur' }
         ],
         name: [
@@ -231,7 +235,6 @@ export default {
         mapCode: `map-${new Date().getTime()}`,
         name: '',
         level: 0,
-        enableDown: 0,
         geoJson: {},
         uploadedGeoJson: 0,
         autoParseNextLevel: 0

data-room-ui/packages/MapDataManagement/src/EditForm.vue

@@ -37,20 +37,49 @@
           />
         </el-form-item>
         <el-form-item
-          label="地图编码"
+          label="地图标识"
           prop="mapCode"
         >
+          <template slot="label">
+            <span>地图标识</span>
+            <el-tooltip
+              v-if="mapForm.parentId !== '0'"
+              class="item"
+              effect="light"
+              content="地图标识取自上级地图JSON数据中的properties.name值，用于在地图中显示地区名称"
+              placement="top"
+            >
+              <i
+                class="el-icon-warning-outline"
+                style="color: #E3C98C;margin-left: 6px;font-size:14px"
+              />
+            </el-tooltip>
+          </template>
           <el-input
             v-model="mapForm.mapCode"
             class="bs-el-input"
-            disabled
+            placeholder="请输入地图标识"
-            placeholder="请输入地图编码"
           />
         </el-form-item>
         <el-form-item
           label="地图级别"
           prop="level"
         >
+          <template slot="label">
+            <span>地图级别</span>
+            <el-tooltip
+              v-if="mapForm.parentId !== '0'"
+              class="item"
+              effect="light"
+              content="子级地图的级别根据上级地图自动递增，不可修改"
+              placement="top"
+            >
+              <i
+                class="el-icon-warning-outline"
+                style="color: #E3C98C;margin-left: 6px;font-size:14px"
+              />
+            </el-tooltip>
+          </template>
           <el-select
             v-model="mapForm.level"
             disabled
@@ -66,17 +95,6 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          label="开启下钻"
-          prop="enableDown"
-        >
-          <el-switch
-            v-model="mapForm.enableDown"
-            :active-value="1"
-            :inactive-value="0"
-            class="bs-el-switch"
-          />
-        </el-form-item>
         <el-form-item
           label="geoJson"
         >
@@ -140,7 +158,7 @@
 <script>
 import _ from 'lodash'
 import vueJsonViewer from 'vue-json-viewer'
-import {mapUpdate} from 'data-room-ui/js/utils/mapDataService'
+import {mapUpdate, getMapChildFromGeoJson} from 'data-room-ui/js/utils/mapDataService'
 
 export default {
   name: "EditForm",
@@ -149,11 +167,33 @@ export default {
   },
   computed: {
     autoParseNextLevelShow() {
-      // geoJson 不为空，且支持下钻,且未上传过（说明是刚上传的）
+      // geoJson 不为空，且未上传过（说明是刚上传的）
-      return !this.isWhitespace(this.mapForm.geoJson) && this.mapForm.enableDown === 1 && this.mapForm.uploadedGeoJson === 0
+      return !this.isWhitespace(this.mapForm.geoJson) && this.mapForm.uploadedGeoJson === 0
     }
   },
   data() {
+    const validateCode = (rule, value, callback) => {
+      console.log(this.mapForm.parentId)
+      if (this.mapForm.parentId === '0' || this.mapForm.parentId === 0) {
+        // 不需要校验
+        callback()
+        return
+      }
+      getMapChildFromGeoJson(this.mapForm.parentId).then(children => {
+        let repeat = false
+        children.forEach(child => {
+          if (child.exist && child.name === value) {
+            repeat = true
+          }
+        })
+        if (repeat) {
+          callback(new Error('地图标识已存在'))
+        } else {
+          callback()
+        }
+      })
+
+    }
     return {
       mapFormVisible: false,
       geoJsonVisible: false,
@@ -165,14 +205,14 @@ export default {
         mapCode: '',
         name: '',
         level: 0,
-        enableDown: 0,
         geoJson: '',
         uploadedGeoJson: 0,
         autoParseNextLevel: 0
       },
       rules: {
         mapCode: [
-          {required: true, message: '请输入地图编码', trigger: 'blur'}
+          {required: true, message: '请输入地图标识', trigger: 'blur'},
+          { validator: validateCode, trigger: 'blur' }
         ],
         name: [
           {required: true, message: '请输入地图名称', trigger: 'blur'}

data-room-ui/packages/MapDataManagement/src/index.vue

@@ -11,7 +11,7 @@
             class="bs-el-input"
             clearable
             maxlength="200"
-            placeholder="请输入地图名称或编码"
+            placeholder="请输入地图名称或标识"
           />
         </el-form-item>
         <el-form-item class="filter-item">
@@ -73,7 +73,7 @@
           />
           <el-table-column
             align="center"
-            label="编码"
+            label="标识"
             prop="mapCode"
             show-overflow-tooltip
           />
@@ -91,17 +91,6 @@
               <span v-else-if="scope.row.level === 4">区县</span>
             </template>
           </el-table-column>
-          <el-table-column
-            align="center"
-            label="开启下钻"
-            prop="enableDown"
-            show-overflow-tooltip
-          >
-            <template slot-scope="scope">
-              <span v-if="scope.row.enableDown === 1">是</span>
-              <span v-else>否</span>
-            </template>
-          </el-table-column>
           <el-table-column
             align="center"
             label="已上传配置JSON"
@@ -230,7 +219,6 @@ export default {
       searchForm: {
         searchKey: '',
         level: null,
-        enableDown: null,
         uploadedGeoJson: null,
         parentId: '0'
       },

data-room-ui/packages/js/utils/mapDataService.js

@@ -37,7 +37,7 @@ const mapDelete = (id = '-1') => Vue.prototype.$dataRoomAxios.post(`/bigScreen/m
  * 级联删除地图
  * @param id
  */
-const mapCascadeDelete = (id = '-1') => Vue.prototype.$dataRoomAxios.post(`/bigScreen/map/cascadeDelete/${id}`)
+const mapCascadeDelete = (id = '-1') => Vue.prototype.$dataRoomAxios.post(`/bigScreen/map/cascadingDelete/${id}`)
 
 /**
  * 根据父编码解析父级json中的子级