瀏覽代碼

fix: 地图组件优化

地图组件优化
hong.yang 1 年之前
父節點
當前提交
5fd5689dfb

+ 11 - 1
data-room-ui/packages/BasicComponents/Map/index.vue

@@ -326,11 +326,21 @@ export default {
           })
           return
         }
+        let geoJsonObj
+        try {
+          geoJsonObj = JSON.parse(downMap.geoJson)
+        } catch (error) {
+          this.$message({
+            message: params.name + '地图数据格式错误',
+            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, JSON.parse(downMap.geoJson));
+        echarts.registerMap(params.name, geoJsonObj);
         this.charts.setOption(this.option, true);
       });
     }

+ 19 - 20
data-room-ui/packages/BasicComponents/Map/setting.vue

@@ -73,7 +73,6 @@
             :options="mapTree"
             :props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
             @change="mapSelect">
-
             <template slot-scope="{ node, data }">
               <span style="float: left">{{ data.name }}</span>
               <span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> 未配置 </span>
@@ -91,6 +90,23 @@
             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
           label="比例"
           label-width="100px"
@@ -104,7 +120,7 @@
           ></el-slider>
         </el-form-item>
         <el-form-item
-          label="中心点x轴位置"
+          label="中心点横向偏移"
           label-width="100px"
         >
           <el-slider
@@ -116,7 +132,7 @@
           ></el-slider>
         </el-form-item>
         <el-form-item
-          label="中心点y轴位置"
+          label="中心点纵向偏移"
           label-width="100px"
         >
           <el-slider
@@ -127,23 +143,6 @@
             :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="头部字体颜色"

+ 1 - 0
data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue

@@ -677,6 +677,7 @@ export default {
 //修改notify的样式
 .ds-el-notify {
   background-color: var(--bs-el-background-1)!important;
+  border: var(--bs-el-border)!important;
   .el-notification__title{
     color: #fff!important;
   }

+ 35 - 2
data-room-ui/packages/MapDataManagement/src/index.vue

@@ -244,12 +244,14 @@ export default {
           value: 4
         }
       ],
-      mapList: []
+      mapList: [],
+      // 提示过了
+      tipped: false
+
     }
   },
   mounted() {
     this.init()
-
   },
   methods: {
     init() {
@@ -258,6 +260,9 @@ export default {
       mapList(this.searchForm).then(res => {
         this.mapList = res
         this.searchLoading = false
+        if (!this.tipped && this.mapList.length === 0) {
+          this.tip()
+        }
       }).catch(err => {
         this.searchLoading = false
       })
@@ -310,6 +315,18 @@ export default {
       }).catch(() => {
       })
     },
+    tip() {
+      // 超链接跳转至
+      const htmlStr = `<span>大屏设计器提供了全国省市区县的地图数据,<a href="https://www.yuque.com/chuinixiongkou/bigscreen/kdrm8g3c8zfgaaq6#xjE8w" style="color: #00a0e9"  target="_blank">点击查看</a></span>`
+      this.$notify({
+        title: '推荐',
+        dangerouslyUseHTMLString: true,
+        message: htmlStr,
+        customClass: 'ds-el-notify',
+        type: 'warning',
+        duration: 5000
+      })
+    },
     deleteMapCascade(map) {
       this.$confirm('该地图存在子级,是否直接删除该地图以及其所有子级?', '提示', {
         confirmButtonText: '确定',
@@ -413,3 +430,19 @@ export default {
   height: 150px;
 }
 </style>
+<style lang="scss">
+//修改notify的样式
+.ds-el-notify {
+  background-color: var(--bs-el-background-1)!important;
+  border: var(--bs-el-border)!important;
+  .el-notification__title{
+    color: #fff!important;
+  }
+  .el-notification__content{
+    color: #fff!important;
+  }
+  .el-notification__closeBtn{
+    color: #fff!important;
+  }
+}
+</style>