diff --git a/src/api/needSupply.js b/src/api/needSupply.js
index d6a608d..7355698 100644
--- a/src/api/needSupply.js
+++ b/src/api/needSupply.js
@@ -14,6 +14,26 @@
   })
 }
 // 各地区供给
+export function getAreaSupplyNew() {
+  const baseConfig = Vue.prototype.baseConfig
+  const { sign, username, timestamp } = getSignTimeStamp()
+  return request({
+    url: baseConfig.biUrl + '/factdata/index/getData',
+    method: 'post',
+    data: {
+      'showField': 'WD01_03,WD03_04,DL01',
+      'indexId': 'BA6C123F48EE41F4AFDBC43BF4E19403',
+      'distinct': true,
+      'type': 0,
+      'pageNo': null,
+      'pageSize': null,
+      'sign': sign,
+      'name': username,
+      'time': timestamp
+    }
+  })
+}
+// 各地区供给
 export function getAreaSupply() {
   const baseConfig = Vue.prototype.baseConfig
   const { sign, username, timestamp } = getSignTimeStamp()

diff --git a/src/api/needSupply.js b/src/api/needSupply.js
index d6a608d..7355698 100644
--- a/src/api/needSupply.js
+++ b/src/api/needSupply.js
@@ -14,6 +14,26 @@
   })
 }
 // 各地区供给
+export function getAreaSupplyNew() {
+  const baseConfig = Vue.prototype.baseConfig
+  const { sign, username, timestamp } = getSignTimeStamp()
+  return request({
+    url: baseConfig.biUrl + '/factdata/index/getData',
+    method: 'post',
+    data: {
+      'showField': 'WD01_03,WD03_04,DL01',
+      'indexId': 'BA6C123F48EE41F4AFDBC43BF4E19403',
+      'distinct': true,
+      'type': 0,
+      'pageNo': null,
+      'pageSize': null,
+      'sign': sign,
+      'name': username,
+      'time': timestamp
+    }
+  })
+}
+// 各地区供给
 export function getAreaSupply() {
   const baseConfig = Vue.prototype.baseConfig
   const { sign, username, timestamp } = getSignTimeStamp()
diff --git a/src/components/Map/components/supplyLayerNew.vue b/src/components/Map/components/supplyLayerNew.vue
new file mode 100644
index 0000000..a83d4d6
--- /dev/null
+++ b/src/components/Map/components/supplyLayerNew.vue
@@ -0,0 +1,189 @@
+<!--
+ * @Description: 柱子墙版供应图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 09:12:27
+ -->
+<template>
+  <div class="supply">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getAreaSupplyNew } from '@/api/needSupply'
+import { getIndex } from '@/utils/mathUtils'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'SupplyLayerNew',
+  mixins: [commonMixin('layer')],
+  props: {
+    colorType: {
+      type: String,
+      default: 'multi'
+    }, // 颜色类型：single单色柱，multi多色柱
+    radius: {
+      type: Number,
+      default: 5000
+    }, // 柱半径
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否可见
+    speed: {
+      type: Number,
+      default: 10
+    }, // 光晕速度
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#d75111', '#d75111', '#d75111', '#fcaf17', '#fcaf17', '#fcaf17', '#4fffc3', '#4fffc3', '#4fffc3', '#39c53d', '#39c53d']
+      }
+    }, // 颜色列表, colorType为multi用
+    color: {
+      type: String,
+      default: '#FCEC1D'
+    } // 柱状颜色， colorType为single用
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      index: null, // 数据缩放倍数
+      wholeData: [], // 各城市供应数据,全部
+      filteredData: [], // 过滤后的供需数据，用于过滤png,lng
+      citiesPositions: {
+        '太原市': { 'x': 112.549248, 'y': 37.857014 },
+        '大同市': { 'x': 113.295258, 'y': 40.090309 },
+        '阳泉市': { 'x': 113.583282, 'y': 37.861187 },
+        '晋中市': { 'x': 113.290072, 'y': 37.388188 },
+        '长治市': { 'x': 113.113556, 'y': 36.191113 },
+        '晋城市': { 'x': 112.851273, 'y': 35.497555 },
+        '临汾市': { 'x': 111.517975, 'y': 36.084148 },
+        '运城市': { 'x': 111.00396, 'y': 35.022778 },
+        '朔州市': { 'x': 112.433388, 'y': 39.331261 },
+        '忻州市': { 'x': 112.733536, 'y': 38.41769 },
+        '吕梁市': { 'x': 111.134338, 'y': 37.524364 }
+      }
+    }
+  },
+  watch: {
+    show(val) {
+      console.log('watch show: ' + val)
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      console.log('load')
+    },
+    initLayer() {
+      const { mars3d, map } = this
+      if (map) {
+        if (this.show) {
+          if (this.layer) {
+            this.removeLayer()
+          }
+        }
+        const graphicLayer = new mars3d.layer.GraphicLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const date = getToday('yyyyMMdd')
+      getAreaSupplyNew(date).then(res => {
+        if (res.status === 200) {
+          debugger
+          const data = res.data.map(item => {
+            return {
+              name: item['WD03_04'],
+              pngSupply: item['DL01'],
+              pngNeed: item['DL01'],
+              lngSupply: 0,
+              lngNeed: 0,
+              supply: (item['DL01'] + 0),
+              need: (item['DL01'] + 0)
+            }
+          })
+          this.wholeData = data
+          this.filteredData = data.filter(item => item.name !== '无')
+          // 计算缩放倍数
+          if (this.index == null) {
+            this.index = getIndex(this.filteredData.map(item => item.supply))
+          }
+          for (const i in this.filteredData) {
+            const item = this.filteredData[i]
+            const supply = item.supply
+            const position = [this.citiesPositions[item.name].x, this.citiesPositions[item.name].y]
+            const html = `<span style="font-size:18px;">${item['name']}</span><br/>
+                        <span style="color:#FFB861;font-size:18px;">实时输气：${supply.toFixed(2)}万m³</span>`
+            const color = this.colorList[i % 10]
+            this.addWall(item.name, position, supply * this.index, color, html)
+          }
+        }
+      })
+    },
+    openTooltip(city) {
+      console.log('openTooltip:' + city)
+      debugger
+      const { layer } = this
+      const graphics = layer.graphics
+      for (const graphic of graphics) {
+        if (graphic.name === city) {
+          // graphic.openTooltip()
+          graphic.openPopup()
+        } else {
+          graphic.closePopup()
+        }
+      }
+    },
+    addWall(city, position, data, color, html) {
+      const { mars3d, Cesium, layer, radius, speed } = this
+      // 下方实际数据
+      var positions = mars3d.PolyUtil.getEllipseOuterPositions({
+        position: Cesium.Cartesian3.fromDegrees(position[0], position[1], 0),
+        radius: radius, // 半径
+        count: 50 // 共返回(count*4)个点
+      })
+      // 供应
+      var graphic1 = new mars3d.graphic.WallPrimitive({
+        name: city,
+        positions: positions,
+        style: {
+          diffHeight: data,
+          closure: true,
+          material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
+            image: 'static/images/map/fence.png',
+            color: color,
+            speed: speed,
+            axisY: true
+          })
+        }
+      })
+      // graphic1.bindTooltip(html)
+      graphic1.bindPopup(html)
+      layer.addGraphic(graphic1)
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        const graphics = layer.graphics
+        for (const graphic of graphics) {
+          graphic.closePopup()
+        }
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>

diff --git a/src/api/needSupply.js b/src/api/needSupply.js
index d6a608d..7355698 100644
--- a/src/api/needSupply.js
+++ b/src/api/needSupply.js
@@ -14,6 +14,26 @@
   })
 }
 // 各地区供给
+export function getAreaSupplyNew() {
+  const baseConfig = Vue.prototype.baseConfig
+  const { sign, username, timestamp } = getSignTimeStamp()
+  return request({
+    url: baseConfig.biUrl + '/factdata/index/getData',
+    method: 'post',
+    data: {
+      'showField': 'WD01_03,WD03_04,DL01',
+      'indexId': 'BA6C123F48EE41F4AFDBC43BF4E19403',
+      'distinct': true,
+      'type': 0,
+      'pageNo': null,
+      'pageSize': null,
+      'sign': sign,
+      'name': username,
+      'time': timestamp
+    }
+  })
+}
+// 各地区供给
 export function getAreaSupply() {
   const baseConfig = Vue.prototype.baseConfig
   const { sign, username, timestamp } = getSignTimeStamp()
diff --git a/src/components/Map/components/supplyLayerNew.vue b/src/components/Map/components/supplyLayerNew.vue
new file mode 100644
index 0000000..a83d4d6
--- /dev/null
+++ b/src/components/Map/components/supplyLayerNew.vue
@@ -0,0 +1,189 @@
+<!--
+ * @Description: 柱子墙版供应图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 09:12:27
+ -->
+<template>
+  <div class="supply">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getAreaSupplyNew } from '@/api/needSupply'
+import { getIndex } from '@/utils/mathUtils'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'SupplyLayerNew',
+  mixins: [commonMixin('layer')],
+  props: {
+    colorType: {
+      type: String,
+      default: 'multi'
+    }, // 颜色类型：single单色柱，multi多色柱
+    radius: {
+      type: Number,
+      default: 5000
+    }, // 柱半径
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否可见
+    speed: {
+      type: Number,
+      default: 10
+    }, // 光晕速度
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#d75111', '#d75111', '#d75111', '#fcaf17', '#fcaf17', '#fcaf17', '#4fffc3', '#4fffc3', '#4fffc3', '#39c53d', '#39c53d']
+      }
+    }, // 颜色列表, colorType为multi用
+    color: {
+      type: String,
+      default: '#FCEC1D'
+    } // 柱状颜色， colorType为single用
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      index: null, // 数据缩放倍数
+      wholeData: [], // 各城市供应数据,全部
+      filteredData: [], // 过滤后的供需数据，用于过滤png,lng
+      citiesPositions: {
+        '太原市': { 'x': 112.549248, 'y': 37.857014 },
+        '大同市': { 'x': 113.295258, 'y': 40.090309 },
+        '阳泉市': { 'x': 113.583282, 'y': 37.861187 },
+        '晋中市': { 'x': 113.290072, 'y': 37.388188 },
+        '长治市': { 'x': 113.113556, 'y': 36.191113 },
+        '晋城市': { 'x': 112.851273, 'y': 35.497555 },
+        '临汾市': { 'x': 111.517975, 'y': 36.084148 },
+        '运城市': { 'x': 111.00396, 'y': 35.022778 },
+        '朔州市': { 'x': 112.433388, 'y': 39.331261 },
+        '忻州市': { 'x': 112.733536, 'y': 38.41769 },
+        '吕梁市': { 'x': 111.134338, 'y': 37.524364 }
+      }
+    }
+  },
+  watch: {
+    show(val) {
+      console.log('watch show: ' + val)
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      console.log('load')
+    },
+    initLayer() {
+      const { mars3d, map } = this
+      if (map) {
+        if (this.show) {
+          if (this.layer) {
+            this.removeLayer()
+          }
+        }
+        const graphicLayer = new mars3d.layer.GraphicLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const date = getToday('yyyyMMdd')
+      getAreaSupplyNew(date).then(res => {
+        if (res.status === 200) {
+          debugger
+          const data = res.data.map(item => {
+            return {
+              name: item['WD03_04'],
+              pngSupply: item['DL01'],
+              pngNeed: item['DL01'],
+              lngSupply: 0,
+              lngNeed: 0,
+              supply: (item['DL01'] + 0),
+              need: (item['DL01'] + 0)
+            }
+          })
+          this.wholeData = data
+          this.filteredData = data.filter(item => item.name !== '无')
+          // 计算缩放倍数
+          if (this.index == null) {
+            this.index = getIndex(this.filteredData.map(item => item.supply))
+          }
+          for (const i in this.filteredData) {
+            const item = this.filteredData[i]
+            const supply = item.supply
+            const position = [this.citiesPositions[item.name].x, this.citiesPositions[item.name].y]
+            const html = `<span style="font-size:18px;">${item['name']}</span><br/>
+                        <span style="color:#FFB861;font-size:18px;">实时输气：${supply.toFixed(2)}万m³</span>`
+            const color = this.colorList[i % 10]
+            this.addWall(item.name, position, supply * this.index, color, html)
+          }
+        }
+      })
+    },
+    openTooltip(city) {
+      console.log('openTooltip:' + city)
+      debugger
+      const { layer } = this
+      const graphics = layer.graphics
+      for (const graphic of graphics) {
+        if (graphic.name === city) {
+          // graphic.openTooltip()
+          graphic.openPopup()
+        } else {
+          graphic.closePopup()
+        }
+      }
+    },
+    addWall(city, position, data, color, html) {
+      const { mars3d, Cesium, layer, radius, speed } = this
+      // 下方实际数据
+      var positions = mars3d.PolyUtil.getEllipseOuterPositions({
+        position: Cesium.Cartesian3.fromDegrees(position[0], position[1], 0),
+        radius: radius, // 半径
+        count: 50 // 共返回(count*4)个点
+      })
+      // 供应
+      var graphic1 = new mars3d.graphic.WallPrimitive({
+        name: city,
+        positions: positions,
+        style: {
+          diffHeight: data,
+          closure: true,
+          material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
+            image: 'static/images/map/fence.png',
+            color: color,
+            speed: speed,
+            axisY: true
+          })
+        }
+      })
+      // graphic1.bindTooltip(html)
+      graphic1.bindPopup(html)
+      layer.addGraphic(graphic1)
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        const graphics = layer.graphics
+        for (const graphic of graphics) {
+          graphic.closePopup()
+        }
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>
diff --git a/src/permission.js b/src/permission.js
index c4f95f2..ac5b682 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -5,11 +5,12 @@
 import { Message } from 'element-ui'
 import { getToken } from '@/utils/auth' // getToken from cookie
 import { getCurrentSys } from './utils/auth'
+// import { Base64 } from 'js-base64'
 import Vue from 'vue'
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', '/applogin', '/appSubject', '/appFaceLogin', '/404', 'config/baseconfig', '/full/storageTopic', '/full/waterThreat', '/full/highConsequence', '/full/constructionThreat', '/full/routeTopic', '/full/waterThreat', '/full/sinkThreat', '/full/vip', '/full/weather', '/full/needTopic', '/full/supplyTopic', '/full/pipeOverview', '/full/overview', '/full/overview_no_button', '/full/overview_new'] // 不重定向白名单
+const whiteList = ['/login', '/applogin', '/appSubject', '/appFaceLogin', '/404', 'config/baseconfig', '/full/storageTopic', '/full/waterThreat', '/full/highConsequence', '/full/constructionThreat', '/full/routeTopic', '/full/waterThreat', '/full/sinkThreat', '/full/vip', '/full/weather', '/full/needTopic', '/full/supplyTopic', '/full/pipeOverview', '/full/overview', '/full/overview_no_button', '/full/overview_new', '/full/overview_new2'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条
@@ -87,7 +88,14 @@
       const token = to.query.token
       console.log('token' + to.query.token)
       if (token) {
-        // 调用自动登录接口，否则跳转到登录页
+        // debugger
+        // 2. Base64解码用户名和密码, 去登录
+        // const tokenString = Base64.decode(token)
+        // const tokenArray = tokenString.split(';')
+        // const account = tokenArray[0]
+        // const password = tokenArray[1]
+
+        // 1. 调用自动登录接口，否则跳转到登录页
         store.dispatch('AppLogin', token).then(() => {
           console.log('自动登录成功')
           console.log(to.path)

diff --git a/src/api/needSupply.js b/src/api/needSupply.js
index d6a608d..7355698 100644
--- a/src/api/needSupply.js
+++ b/src/api/needSupply.js
@@ -14,6 +14,26 @@
   })
 }
 // 各地区供给
+export function getAreaSupplyNew() {
+  const baseConfig = Vue.prototype.baseConfig
+  const { sign, username, timestamp } = getSignTimeStamp()
+  return request({
+    url: baseConfig.biUrl + '/factdata/index/getData',
+    method: 'post',
+    data: {
+      'showField': 'WD01_03,WD03_04,DL01',
+      'indexId': 'BA6C123F48EE41F4AFDBC43BF4E19403',
+      'distinct': true,
+      'type': 0,
+      'pageNo': null,
+      'pageSize': null,
+      'sign': sign,
+      'name': username,
+      'time': timestamp
+    }
+  })
+}
+// 各地区供给
 export function getAreaSupply() {
   const baseConfig = Vue.prototype.baseConfig
   const { sign, username, timestamp } = getSignTimeStamp()
diff --git a/src/components/Map/components/supplyLayerNew.vue b/src/components/Map/components/supplyLayerNew.vue
new file mode 100644
index 0000000..a83d4d6
--- /dev/null
+++ b/src/components/Map/components/supplyLayerNew.vue
@@ -0,0 +1,189 @@
+<!--
+ * @Description: 柱子墙版供应图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 09:12:27
+ -->
+<template>
+  <div class="supply">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getAreaSupplyNew } from '@/api/needSupply'
+import { getIndex } from '@/utils/mathUtils'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'SupplyLayerNew',
+  mixins: [commonMixin('layer')],
+  props: {
+    colorType: {
+      type: String,
+      default: 'multi'
+    }, // 颜色类型：single单色柱，multi多色柱
+    radius: {
+      type: Number,
+      default: 5000
+    }, // 柱半径
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否可见
+    speed: {
+      type: Number,
+      default: 10
+    }, // 光晕速度
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#d75111', '#d75111', '#d75111', '#fcaf17', '#fcaf17', '#fcaf17', '#4fffc3', '#4fffc3', '#4fffc3', '#39c53d', '#39c53d']
+      }
+    }, // 颜色列表, colorType为multi用
+    color: {
+      type: String,
+      default: '#FCEC1D'
+    } // 柱状颜色， colorType为single用
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      index: null, // 数据缩放倍数
+      wholeData: [], // 各城市供应数据,全部
+      filteredData: [], // 过滤后的供需数据，用于过滤png,lng
+      citiesPositions: {
+        '太原市': { 'x': 112.549248, 'y': 37.857014 },
+        '大同市': { 'x': 113.295258, 'y': 40.090309 },
+        '阳泉市': { 'x': 113.583282, 'y': 37.861187 },
+        '晋中市': { 'x': 113.290072, 'y': 37.388188 },
+        '长治市': { 'x': 113.113556, 'y': 36.191113 },
+        '晋城市': { 'x': 112.851273, 'y': 35.497555 },
+        '临汾市': { 'x': 111.517975, 'y': 36.084148 },
+        '运城市': { 'x': 111.00396, 'y': 35.022778 },
+        '朔州市': { 'x': 112.433388, 'y': 39.331261 },
+        '忻州市': { 'x': 112.733536, 'y': 38.41769 },
+        '吕梁市': { 'x': 111.134338, 'y': 37.524364 }
+      }
+    }
+  },
+  watch: {
+    show(val) {
+      console.log('watch show: ' + val)
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      console.log('load')
+    },
+    initLayer() {
+      const { mars3d, map } = this
+      if (map) {
+        if (this.show) {
+          if (this.layer) {
+            this.removeLayer()
+          }
+        }
+        const graphicLayer = new mars3d.layer.GraphicLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const date = getToday('yyyyMMdd')
+      getAreaSupplyNew(date).then(res => {
+        if (res.status === 200) {
+          debugger
+          const data = res.data.map(item => {
+            return {
+              name: item['WD03_04'],
+              pngSupply: item['DL01'],
+              pngNeed: item['DL01'],
+              lngSupply: 0,
+              lngNeed: 0,
+              supply: (item['DL01'] + 0),
+              need: (item['DL01'] + 0)
+            }
+          })
+          this.wholeData = data
+          this.filteredData = data.filter(item => item.name !== '无')
+          // 计算缩放倍数
+          if (this.index == null) {
+            this.index = getIndex(this.filteredData.map(item => item.supply))
+          }
+          for (const i in this.filteredData) {
+            const item = this.filteredData[i]
+            const supply = item.supply
+            const position = [this.citiesPositions[item.name].x, this.citiesPositions[item.name].y]
+            const html = `<span style="font-size:18px;">${item['name']}</span><br/>
+                        <span style="color:#FFB861;font-size:18px;">实时输气：${supply.toFixed(2)}万m³</span>`
+            const color = this.colorList[i % 10]
+            this.addWall(item.name, position, supply * this.index, color, html)
+          }
+        }
+      })
+    },
+    openTooltip(city) {
+      console.log('openTooltip:' + city)
+      debugger
+      const { layer } = this
+      const graphics = layer.graphics
+      for (const graphic of graphics) {
+        if (graphic.name === city) {
+          // graphic.openTooltip()
+          graphic.openPopup()
+        } else {
+          graphic.closePopup()
+        }
+      }
+    },
+    addWall(city, position, data, color, html) {
+      const { mars3d, Cesium, layer, radius, speed } = this
+      // 下方实际数据
+      var positions = mars3d.PolyUtil.getEllipseOuterPositions({
+        position: Cesium.Cartesian3.fromDegrees(position[0], position[1], 0),
+        radius: radius, // 半径
+        count: 50 // 共返回(count*4)个点
+      })
+      // 供应
+      var graphic1 = new mars3d.graphic.WallPrimitive({
+        name: city,
+        positions: positions,
+        style: {
+          diffHeight: data,
+          closure: true,
+          material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
+            image: 'static/images/map/fence.png',
+            color: color,
+            speed: speed,
+            axisY: true
+          })
+        }
+      })
+      // graphic1.bindTooltip(html)
+      graphic1.bindPopup(html)
+      layer.addGraphic(graphic1)
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        const graphics = layer.graphics
+        for (const graphic of graphics) {
+          graphic.closePopup()
+        }
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>
diff --git a/src/permission.js b/src/permission.js
index c4f95f2..ac5b682 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -5,11 +5,12 @@
 import { Message } from 'element-ui'
 import { getToken } from '@/utils/auth' // getToken from cookie
 import { getCurrentSys } from './utils/auth'
+// import { Base64 } from 'js-base64'
 import Vue from 'vue'
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', '/applogin', '/appSubject', '/appFaceLogin', '/404', 'config/baseconfig', '/full/storageTopic', '/full/waterThreat', '/full/highConsequence', '/full/constructionThreat', '/full/routeTopic', '/full/waterThreat', '/full/sinkThreat', '/full/vip', '/full/weather', '/full/needTopic', '/full/supplyTopic', '/full/pipeOverview', '/full/overview', '/full/overview_no_button', '/full/overview_new'] // 不重定向白名单
+const whiteList = ['/login', '/applogin', '/appSubject', '/appFaceLogin', '/404', 'config/baseconfig', '/full/storageTopic', '/full/waterThreat', '/full/highConsequence', '/full/constructionThreat', '/full/routeTopic', '/full/waterThreat', '/full/sinkThreat', '/full/vip', '/full/weather', '/full/needTopic', '/full/supplyTopic', '/full/pipeOverview', '/full/overview', '/full/overview_no_button', '/full/overview_new', '/full/overview_new2'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条
@@ -87,7 +88,14 @@
       const token = to.query.token
       console.log('token' + to.query.token)
       if (token) {
-        // 调用自动登录接口，否则跳转到登录页
+        // debugger
+        // 2. Base64解码用户名和密码, 去登录
+        // const tokenString = Base64.decode(token)
+        // const tokenArray = tokenString.split(';')
+        // const account = tokenArray[0]
+        // const password = tokenArray[1]
+
+        // 1. 调用自动登录接口，否则跳转到登录页
         store.dispatch('AppLogin', token).then(() => {
           console.log('自动登录成功')
           console.log(to.path)
diff --git a/src/router/index.js b/src/router/index.js
index d08eda3..e56ca28 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -140,6 +140,12 @@
     component: () => import('@/views/maps/mapOverview2'),
     meta: { title: '综合业务', icon: '' }
   },
+  {
+    path: '/full/overview_new2',
+    name: 'FullOverviewNew2',
+    component: () => import('@/views/maps/mapOverview3'),
+    meta: { title: '综合业务', icon: '' }
+  },
   // 九宫格
   { path: '/dashboard', component: () => import('@/views/dashboard/index2'), hidden: true }
 ]

diff --git a/src/api/needSupply.js b/src/api/needSupply.js
index d6a608d..7355698 100644
--- a/src/api/needSupply.js
+++ b/src/api/needSupply.js
@@ -14,6 +14,26 @@
   })
 }
 // 各地区供给
+export function getAreaSupplyNew() {
+  const baseConfig = Vue.prototype.baseConfig
+  const { sign, username, timestamp } = getSignTimeStamp()
+  return request({
+    url: baseConfig.biUrl + '/factdata/index/getData',
+    method: 'post',
+    data: {
+      'showField': 'WD01_03,WD03_04,DL01',
+      'indexId': 'BA6C123F48EE41F4AFDBC43BF4E19403',
+      'distinct': true,
+      'type': 0,
+      'pageNo': null,
+      'pageSize': null,
+      'sign': sign,
+      'name': username,
+      'time': timestamp
+    }
+  })
+}
+// 各地区供给
 export function getAreaSupply() {
   const baseConfig = Vue.prototype.baseConfig
   const { sign, username, timestamp } = getSignTimeStamp()
diff --git a/src/components/Map/components/supplyLayerNew.vue b/src/components/Map/components/supplyLayerNew.vue
new file mode 100644
index 0000000..a83d4d6
--- /dev/null
+++ b/src/components/Map/components/supplyLayerNew.vue
@@ -0,0 +1,189 @@
+<!--
+ * @Description: 柱子墙版供应图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 09:12:27
+ -->
+<template>
+  <div class="supply">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getAreaSupplyNew } from '@/api/needSupply'
+import { getIndex } from '@/utils/mathUtils'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'SupplyLayerNew',
+  mixins: [commonMixin('layer')],
+  props: {
+    colorType: {
+      type: String,
+      default: 'multi'
+    }, // 颜色类型：single单色柱，multi多色柱
+    radius: {
+      type: Number,
+      default: 5000
+    }, // 柱半径
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否可见
+    speed: {
+      type: Number,
+      default: 10
+    }, // 光晕速度
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#d75111', '#d75111', '#d75111', '#fcaf17', '#fcaf17', '#fcaf17', '#4fffc3', '#4fffc3', '#4fffc3', '#39c53d', '#39c53d']
+      }
+    }, // 颜色列表, colorType为multi用
+    color: {
+      type: String,
+      default: '#FCEC1D'
+    } // 柱状颜色， colorType为single用
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      index: null, // 数据缩放倍数
+      wholeData: [], // 各城市供应数据,全部
+      filteredData: [], // 过滤后的供需数据，用于过滤png,lng
+      citiesPositions: {
+        '太原市': { 'x': 112.549248, 'y': 37.857014 },
+        '大同市': { 'x': 113.295258, 'y': 40.090309 },
+        '阳泉市': { 'x': 113.583282, 'y': 37.861187 },
+        '晋中市': { 'x': 113.290072, 'y': 37.388188 },
+        '长治市': { 'x': 113.113556, 'y': 36.191113 },
+        '晋城市': { 'x': 112.851273, 'y': 35.497555 },
+        '临汾市': { 'x': 111.517975, 'y': 36.084148 },
+        '运城市': { 'x': 111.00396, 'y': 35.022778 },
+        '朔州市': { 'x': 112.433388, 'y': 39.331261 },
+        '忻州市': { 'x': 112.733536, 'y': 38.41769 },
+        '吕梁市': { 'x': 111.134338, 'y': 37.524364 }
+      }
+    }
+  },
+  watch: {
+    show(val) {
+      console.log('watch show: ' + val)
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      console.log('load')
+    },
+    initLayer() {
+      const { mars3d, map } = this
+      if (map) {
+        if (this.show) {
+          if (this.layer) {
+            this.removeLayer()
+          }
+        }
+        const graphicLayer = new mars3d.layer.GraphicLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const date = getToday('yyyyMMdd')
+      getAreaSupplyNew(date).then(res => {
+        if (res.status === 200) {
+          debugger
+          const data = res.data.map(item => {
+            return {
+              name: item['WD03_04'],
+              pngSupply: item['DL01'],
+              pngNeed: item['DL01'],
+              lngSupply: 0,
+              lngNeed: 0,
+              supply: (item['DL01'] + 0),
+              need: (item['DL01'] + 0)
+            }
+          })
+          this.wholeData = data
+          this.filteredData = data.filter(item => item.name !== '无')
+          // 计算缩放倍数
+          if (this.index == null) {
+            this.index = getIndex(this.filteredData.map(item => item.supply))
+          }
+          for (const i in this.filteredData) {
+            const item = this.filteredData[i]
+            const supply = item.supply
+            const position = [this.citiesPositions[item.name].x, this.citiesPositions[item.name].y]
+            const html = `<span style="font-size:18px;">${item['name']}</span><br/>
+                        <span style="color:#FFB861;font-size:18px;">实时输气：${supply.toFixed(2)}万m³</span>`
+            const color = this.colorList[i % 10]
+            this.addWall(item.name, position, supply * this.index, color, html)
+          }
+        }
+      })
+    },
+    openTooltip(city) {
+      console.log('openTooltip:' + city)
+      debugger
+      const { layer } = this
+      const graphics = layer.graphics
+      for (const graphic of graphics) {
+        if (graphic.name === city) {
+          // graphic.openTooltip()
+          graphic.openPopup()
+        } else {
+          graphic.closePopup()
+        }
+      }
+    },
+    addWall(city, position, data, color, html) {
+      const { mars3d, Cesium, layer, radius, speed } = this
+      // 下方实际数据
+      var positions = mars3d.PolyUtil.getEllipseOuterPositions({
+        position: Cesium.Cartesian3.fromDegrees(position[0], position[1], 0),
+        radius: radius, // 半径
+        count: 50 // 共返回(count*4)个点
+      })
+      // 供应
+      var graphic1 = new mars3d.graphic.WallPrimitive({
+        name: city,
+        positions: positions,
+        style: {
+          diffHeight: data,
+          closure: true,
+          material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
+            image: 'static/images/map/fence.png',
+            color: color,
+            speed: speed,
+            axisY: true
+          })
+        }
+      })
+      // graphic1.bindTooltip(html)
+      graphic1.bindPopup(html)
+      layer.addGraphic(graphic1)
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        const graphics = layer.graphics
+        for (const graphic of graphics) {
+          graphic.closePopup()
+        }
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>
diff --git a/src/permission.js b/src/permission.js
index c4f95f2..ac5b682 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -5,11 +5,12 @@
 import { Message } from 'element-ui'
 import { getToken } from '@/utils/auth' // getToken from cookie
 import { getCurrentSys } from './utils/auth'
+// import { Base64 } from 'js-base64'
 import Vue from 'vue'
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', '/applogin', '/appSubject', '/appFaceLogin', '/404', 'config/baseconfig', '/full/storageTopic', '/full/waterThreat', '/full/highConsequence', '/full/constructionThreat', '/full/routeTopic', '/full/waterThreat', '/full/sinkThreat', '/full/vip', '/full/weather', '/full/needTopic', '/full/supplyTopic', '/full/pipeOverview', '/full/overview', '/full/overview_no_button', '/full/overview_new'] // 不重定向白名单
+const whiteList = ['/login', '/applogin', '/appSubject', '/appFaceLogin', '/404', 'config/baseconfig', '/full/storageTopic', '/full/waterThreat', '/full/highConsequence', '/full/constructionThreat', '/full/routeTopic', '/full/waterThreat', '/full/sinkThreat', '/full/vip', '/full/weather', '/full/needTopic', '/full/supplyTopic', '/full/pipeOverview', '/full/overview', '/full/overview_no_button', '/full/overview_new', '/full/overview_new2'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条
@@ -87,7 +88,14 @@
       const token = to.query.token
       console.log('token' + to.query.token)
       if (token) {
-        // 调用自动登录接口，否则跳转到登录页
+        // debugger
+        // 2. Base64解码用户名和密码, 去登录
+        // const tokenString = Base64.decode(token)
+        // const tokenArray = tokenString.split(';')
+        // const account = tokenArray[0]
+        // const password = tokenArray[1]
+
+        // 1. 调用自动登录接口，否则跳转到登录页
         store.dispatch('AppLogin', token).then(() => {
           console.log('自动登录成功')
           console.log(to.path)
diff --git a/src/router/index.js b/src/router/index.js
index d08eda3..e56ca28 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -140,6 +140,12 @@
     component: () => import('@/views/maps/mapOverview2'),
     meta: { title: '综合业务', icon: '' }
   },
+  {
+    path: '/full/overview_new2',
+    name: 'FullOverviewNew2',
+    component: () => import('@/views/maps/mapOverview3'),
+    meta: { title: '综合业务', icon: '' }
+  },
   // 九宫格
   { path: '/dashboard', component: () => import('@/views/dashboard/index2'), hidden: true }
 ]
diff --git a/src/views/maps/mapOverview3.vue b/src/views/maps/mapOverview3.vue
new file mode 100644
index 0000000..13f7e83
--- /dev/null
+++ b/src/views/maps/mapOverview3.vue
@@ -0,0 +1,339 @@
+<!--
+ * @Description: 综合业务-修改供应
+ * @Author: 王晓颖
+ * @Date: 2021-12-01
+ -->
+<template>
+  <layout-map>
+    <!--地图-->
+    <Map :url="configUrl" :colorful="true" @onload="onMapload">
+      <pipe-layer ref="pipe" :show="pipeShow"/>
+      <supply-layer ref="supply" :show="supplyShow"/>
+      <weather-layer ref="weather" :show="weatherShow"/>
+      <disaster-layer ref="disaster" :show="disasterShow"/>
+      <hca-heat-layer ref="hcaHeat" :show="hcaShow"/>
+      <threat-layer ref="constructionThreat" :show="constructionThreatShow" type="construction"/>
+      <threat-layer ref="sinkThreat" :show="sinkThreatShow" color="#2C06A1" type="sinkThreat"/>
+      <threat-layer ref="waterThreat" :show="waterThreatShow" color="#ffcc00" type="waterThreat"/>
+      <route-layer ref="route" :show="routeShow"/>
+      <manage-station-layer ref="manageStation" :show="stationShow"/>
+      <station-layer ref="station" :show="station2Show"/>
+      <liquid-factory-layer ref="liquidFactory" :show="liquidFactoryShow"/>
+      <valve-layer ref="valveChamber" :show="valveChamberShow"/>
+    </Map>
+    <!--地图切换按钮-->
+    <div class="map-btn-group">
+      <button2 v-model="supplyShow" name="输气情况" icon="icon-station2" @click="showSupply(supplyShow)"/>
+      <button2 :select="routeShow" name="巡线情况" icon="icon-people" @click="showRoute(routeShow)"/>
+      <button2 :select="weatherShow" name="气象预报" icon="icon-disaster" @click="showWeather(weatherShow)"/>
+      <button2 :select="disasterShow" name="气象预警" icon="icon-disaster" @click="showDisaster(disasterShow)"/>
+      <button2 :select="hcaShow" name="高后果区" icon="icon-heat" @click="showHca(hcaShow)"/>
+      <button2 :select="constructionThreatShow" name="第三方施工" icon="icon-construction" @click="showConstructionThreat()"/>
+      <button2 :select="sinkThreatShow" name="塌陷隐患" icon="icon-sink" @click="showSinkThreat(sinkThreatShow)"/>
+      <button2 :select="waterThreatShow" name="水保隐患" icon="icon-water" @click="showWaterThreat(waterThreatShow)"/>
+    </div>
+    <div class="map-point-group">
+      <button2 style="margin-bottom:5px" :select="pipeShow" name="管线" icon="icon-station2" @click="pipeShow=!pipeShow"/>
+      <button2 style="margin-bottom:5px" :select="stationShow" name="管理站" icon="icon-station2" @click="showStation(stationShow)"/>
+      <button2 :select="station2Show" name="站场" icon="icon-station2" @click="station2Show=!station2Show"/>
+      <!--<button2 :select="station2Show" name="站场" icon="icon-station2" @click="showStation2(station2Show)"/>-->
+
+    </div>
+    <threat-dialog ref="threatDialog"/>
+    <high-consequence-dialog ref="hcaDialog"/>
+  </layout-map>
+</template>
+
+<script>
+import Map from '@/components/Map/MarsMap.vue'
+import 'mars3d-heatmap'
+import Button2 from '@/components/Button/button2'
+import LayoutMap from '../../layout/layoutMapSimple'
+import ThreatDialog from './components/threatDialog'
+import HighConsequenceDialog from './components/highConsequenceDialog'
+import SupplyLayer from '@/components/Map/components/supplyLayerNew'
+import Weather from '@/components/weather/weather'
+import WeatherLayer from '@/components/Map/components/weatherLayer'
+import DisasterLayer from '@/components/Map/components/disasterLayer'
+import HcaHeatLayer from '@/components/Map/components/hcaHeatLayer'
+import ThreatLayer from '@/components/Map/components/threatLayer'
+import RouteLayer from '@/components/Map/components/routeLayer'
+import ManageStationLayer from '@/components/Map/components/manageStationLayer'
+import StationLayer from '@/components/Map/components/stationLayer'
+import LiquidFactoryLayer from '@/components/Map/components/liquidFactoryLayer'
+import ValveLayer from '@/components/Map/components/valveLayer'
+import PipeLayer from '@/components/Map/components/pipeLayer'
+export default {
+  name: 'MapOverview2',
+  components: {
+    PipeLayer,
+    ValveLayer,
+    LiquidFactoryLayer,
+    StationLayer,
+    ManageStationLayer,
+    RouteLayer,
+    ThreatLayer,
+    HcaHeatLayer,
+    DisasterLayer,
+    WeatherLayer,
+    Weather,
+    SupplyLayer,
+    HighConsequenceDialog,
+    ThreatDialog,
+    LayoutMap,
+    Map,
+    Button2
+  },
+  data() {
+    return {
+      map: null, // 地图
+      configUrl: 'static/config/config.json',
+      alpha: 100, // 透明度
+      index: 1, // 缩放倍数
+      underground: null, // ？
+      pipeShow: true, // 显示管线
+      supplyShow: false, // 显示供应情况
+      routeShow: false, // 显示巡检人员
+      station2Show: false, // 站场
+      valveChamberShow: false, // 阀室
+      liquidFactoryShow: false, // 液化工厂
+      hcaShow: false, // 显示高后果区
+      stationShow: false, // 显示管理处
+      weatherShow: false, // 显示天气预报
+      waterThreatShow: false, // 显示水保隐患位置
+      constructionThreatShow: false, // 显示第三方施工位置
+      sinkThreatShow: false, // 显示塌陷隐患位置
+      disasterShow: false, // 显示气象灾害图层
+      earthquakeShow: false,
+      cameraShow: false,
+      timer: null, // 轮训定时器
+      clock: 1800 // 间隔时间,1800~30分钟
+    }
+  },
+  mounted() {
+    // 处理iframe监听
+    window.addEventListener('message', (event) => {
+      console.log(event)
+      var origin = event.origin
+      console.log(origin)
+      var data = event.data
+      console.log(data)
+      // 如果是数组
+      if (Array.isArray(data)) {
+        const item = data.filter(item => item.selected)[0]
+        if (item.value === '高后果区数量') {
+          this.showHca()
+        } else if (item.value === '第三方施工数量') {
+          this.showConstructionThreat()
+        } else if (item.value === '水保隐患数量') {
+          this.showWaterThreat()
+        } else if (item.value === '塌陷数量') {
+          this.showSinkThreat()
+        } else if (item.chartType === 'pill' && item.wdName === '区域') {
+          this.showSupplyAndOpenTooltip(item.value)
+        }
+      }
+    }, false)
+  },
+  methods: {
+    // 地图构造完成回调
+    onMapload(map) {
+      // 以下为演示代码
+      this.map = map
+      // 背景透明
+      this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0)
+      this.map._viewer.scene.globe.baseColor.alpha = 0
+      this.supplyShow = true
+      this.refreshData()
+    },
+    // 显示供应图层并打开弹窗
+    showSupplyAndOpenTooltip(currentCity) {
+      if (!this.supplyShow) {
+        this.supplyShow = true
+        this.weatherShow = false
+        this.hcaShow = false
+        this.constructionThreatShow = false
+        this.sinkThreatShow = false
+        this.waterThreatShow = false
+        this.disasterShow = false
+      }
+      if (currentCity) {
+        this.$refs.supply.openTooltip(currentCity + '市')
+      }
+    },
+    // 显示供应
+    showSupply() {
+      this.supplyShow = !this.supplyShow
+      if (this.supplyShow) {
+        this.weatherShow = false
+        this.hcaShow = false
+        this.constructionThreatShow = false
+        this.sinkThreatShow = false
+        this.waterThreatShow = false
+        this.disasterShow = false
+        this.routeShow = false
+      }
+    },
+    // 气象控制
+    showWeather() {
+      this.weatherShow = !this.weatherShow
+      if (this.weatherShow) {
+        this.supplyShow = false
+        this.hcaShow = false
+        this.constructionThreatShow = false
+        this.sinkThreatShow = false
+        this.waterThreatShow = false
+        this.disasterShow = false
+        this.routeShow = false
+      }
+    },
+    // 是否显示高后果区
+    showHca() {
+      this.hcaShow = !this.hcaShow
+      if (this.hcaShow) {
+        this.supplyShow = false
+        this.weatherShow = false
+        this.disasterShow = false
+        this.routeShow = false
+      }
+    },
+    // 是否显示水保隐患
+    showWaterThreat() {
+      this.waterThreatShow = !this.waterThreatShow
+      if (this.waterThreatShow) {
+        this.supplyShow = false
+        this.weatherShow = false
+        this.disasterShow = false
+        this.routeShow = false
+      }
+    },
+    // 是否显示第三方施工
+    showConstructionThreat() {
+      this.constructionThreatShow = !this.constructionThreatShow
+      if (this.constructionThreatShow) {
+        this.supplyShow = false
+        this.weatherShow = false
+        this.disasterShow = false
+        this.routeShow = false
+      }
+    },
+    // 是否显示塌陷
+    showSinkThreat() {
+      this.sinkThreatShow = !this.sinkThreatShow
+      if (this.sinkThreatLayer) {
+        this.supplyShow = false
+        this.weatherShow = false
+        this.disasterShow = false
+        this.routeShow = false
+      }
+    },
+    // 显示巡检人员
+    showRoute() {
+      this.routeShow = !this.routeShow
+      if (this.routeShow) {
+        this.supplyShow = false
+        this.hcaShow = false
+        this.constructionThreatShow = false
+        this.sinkThreatShow = false
+        this.waterThreatShow = false
+        this.weatherShow = false
+        this.disasterShow = false
+      }
+    },
+    // 显示管理处
+    showStation(show) {
+      this.stationShow = !this.stationShow
+      this.station2Show = false
+      this.liquidFactory = false
+      this.valveChamberShow = false
+    },
+    // 显示站场
+    showStation2(show) {
+      this.station2Show = !this.station2Show
+      this.stationShow = false
+      this.liquidFactory = false
+      this.valveChamberShow = false
+    },
+    // 显示阀室
+    showValveChamber(show) {
+      this.valveChamberShow = !this.valveChamberShow
+      this.station2Show = false
+      this.stationShow = false
+      this.liquidFactory = false
+    },
+    // 显示液化工厂
+    showLiquidFactory(show) {
+      this.liquidFactory = !this.liquidFactoryShow
+      this.valveChamberShow = false
+      this.station2Show = false
+      this.stationShow = false
+    },
+    // 灾害
+    showDisaster() {
+      this.disasterShow = !this.disasterShow
+      if (this.disasterShow) {
+        this.supplyShow = false
+        this.hcaShow = false
+        this.constructionThreatShow = false
+        this.sinkThreatShow = false
+        this.waterThreatShow = false
+        this.weatherShow = false
+      }
+    },
+    // 显示地震
+    showEarthquake(show) {
+      if (show) { // 移除
+        this.earthquakeShow = false
+        this.map.removeLayer(this.earthquakeLayer, true)
+        this.earthquakeLayer = null
+      } else {
+        this.earthquakeShow = true
+        this.addEarthquake()
+      }
+    },
+    // 刷新数据
+    refreshData() {
+      this.timer = setInterval(() => {
+        console.log('refreshData')
+        if (this.routeShow) {
+          this.$refs.route.initLayer()
+        }
+        if (this.hcaShow) {
+          this.$refs.hcaHeat.initLayer()
+        }
+        if (this.sinkThreatShow) {
+          this.$refs.sinkThreat.initLayer()
+        }
+        if (this.waterThreatShow) {
+          this.$refs.waterThreat.initLayer()
+        }
+        if (this.constructionThreatShow) {
+          this.$refs.constructionThreat.initLayer()
+        }
+      }, this.clock * 1000)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .map-btn-group{
+    position: absolute;
+    bottom:30px;
+    /*top:120px;*/
+    left:50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+  }
+  .map-point-group{
+    position: absolute;;
+    bottom:90px;
+    /*bottom:30px;*/
+    right:28%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>